diff --git a/code/.storybook/bench/bench.stories.tsx b/code/.storybook/bench/bench.stories.tsx
index 3dabf307bad4..a2bddbb169c1 100644
--- a/code/.storybook/bench/bench.stories.tsx
+++ b/code/.storybook/bench/bench.stories.tsx
@@ -69,7 +69,7 @@ export default {
     return (
       <iframe
         src="/bundle-analyzer/index.html"
-        style={{ border: 'none', width: '100%', height: '100vh' }}
+        style={{ position: 'fixed', width: '100vw', height: '100vh', border: 'none' }}
         key={args.metafile} // force re-render on args change
       />
     );
diff --git a/code/core/src/components/components/ActionList/ActionList.stories.tsx b/code/core/src/components/components/ActionList/ActionList.stories.tsx
index 848ecc02861e..14641c6e79a7 100644
--- a/code/core/src/components/components/ActionList/ActionList.stories.tsx
+++ b/code/core/src/components/components/ActionList/ActionList.stories.tsx
@@ -2,7 +2,7 @@ import { CheckIcon, EllipsisIcon, PlayAllHollowIcon } from '@storybook/icons';
 
 import { Badge, Form, ProgressSpinner } from '../..';
 import preview from '../../../../../.storybook/preview';
-import { Shortcut } from '../../../manager/container/Menu';
+import { Shortcut } from '../../../manager/components/Shortcut';
 import { ActionList } from './ActionList';
 
 const meta = preview.meta({
diff --git a/code/core/src/components/components/Zoom/ZoomIFrame.tsx b/code/core/src/components/components/Zoom/ZoomIFrame.tsx
index d166d3b96c28..b44f2ebb1b65 100644
--- a/code/core/src/components/components/Zoom/ZoomIFrame.tsx
+++ b/code/core/src/components/components/Zoom/ZoomIFrame.tsx
@@ -39,9 +39,9 @@ export class ZoomIFrame extends Component<IZoomIFrameProps> {
     try {
       // @ts-expect-error (non strict)
       Object.assign(this.iframe.contentDocument.body.style, {
-        width: `${scale * 100}%`,
-        height: `${scale * 100}%`,
-        transform: `scale(${1 / scale})`,
+        width: `${(1 / scale) * 100}%`,
+        height: `${(1 / scale) * 100}%`,
+        transform: `scale(${scale})`,
         transformOrigin: 'top left',
       });
     } catch (e) {
@@ -51,9 +51,9 @@ export class ZoomIFrame extends Component<IZoomIFrameProps> {
 
   setIframeZoom(scale: number) {
     Object.assign(this.iframe.style, {
-      width: `${scale * 100}%`,
-      height: `${scale * 100}%`,
-      transform: `scale(${1 / scale})`,
+      width: `${(1 / scale) * 100}%`,
+      height: `${(1 / scale) * 100}%`,
+      transform: `scale(${scale})`,
       transformOrigin: 'top left',
     });
   }
diff --git a/code/core/src/manager-api/modules/shortcuts.ts b/code/core/src/manager-api/modules/shortcuts.ts
index 0c16b169686d..ba890991b1a2 100644
--- a/code/core/src/manager-api/modules/shortcuts.ts
+++ b/code/core/src/manager-api/modules/shortcuts.ts
@@ -45,7 +45,9 @@ export interface SubAPI {
    * @param shortcuts The new shortcuts to set.
    * @returns A promise that resolves to the new shortcuts.
    */
-  setShortcuts(shortcuts: API_Shortcuts): Promise<API_Shortcuts>;
+  setShortcuts(
+    update: API_Shortcuts | ((shortcuts: API_Shortcuts) => API_Shortcuts)
+  ): Promise<API_Shortcuts>;
   /**
    * Sets the shortcut for the given action to the given value.
    *
@@ -205,24 +207,25 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
 
       return defaults;
     },
-    async setShortcuts(shortcuts: API_Shortcuts) {
-      await store.setState({ shortcuts }, { persistence: 'permanent' });
+    async setShortcuts(update) {
+      const { shortcuts } = await store.setState(
+        (state) => ({ shortcuts: typeof update === 'function' ? update(state.shortcuts) : update }),
+        { persistence: 'permanent' }
+      );
       return shortcuts;
     },
     async restoreAllDefaultShortcuts() {
       return api.setShortcuts(api.getDefaultShortcuts() as API_Shortcuts);
     },
     async setShortcut(action, value) {
-      const shortcuts = api.getShortcutKeys();
-      await api.setShortcuts({ ...shortcuts, [action]: value });
+      await api.setShortcuts((shortcuts) => ({ ...shortcuts, [action]: value }));
       return value;
     },
     async setAddonShortcut(addon: string, shortcut: API_AddonShortcut) {
-      const shortcuts = api.getShortcutKeys();
-      await api.setShortcuts({
+      await api.setShortcuts((shortcuts) => ({
         ...shortcuts,
         [`${addon}-${shortcut.actionName}`]: shortcut.defaultShortcut,
-      });
+      }));
       addonsShortcuts[`${addon}-${shortcut.actionName}`] = shortcut;
       return shortcut;
     },
diff --git a/code/core/src/manager-api/tests/shortcuts.test.js b/code/core/src/manager-api/tests/shortcuts.test.js
index be1efd4063d9..ff0f6e08137d 100644
--- a/code/core/src/manager-api/tests/shortcuts.test.js
+++ b/code/core/src/manager-api/tests/shortcuts.test.js
@@ -6,8 +6,10 @@ function createMockStore() {
   let state = {};
   return {
     getState: vi.fn().mockImplementation(() => state),
-    setState: vi.fn().mockImplementation((s) => {
+    setState: vi.fn().mockImplementation((update) => {
+      const s = typeof update === 'function' ? update(state) : update;
       state = { ...state, ...s };
+      return state;
     }),
   };
 }
diff --git a/code/core/src/manager/components/Shortcut.tsx b/code/core/src/manager/components/Shortcut.tsx
new file mode 100644
index 000000000000..ad19e3783fd8
--- /dev/null
+++ b/code/core/src/manager/components/Shortcut.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { shortcutToHumanString } from 'storybook/manager-api';
+import { styled } from 'storybook/theming';
+
+const Wrapper = styled.span(({ theme }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 16,
+  fontSize: '11px',
+  fontWeight: theme.typography.weight.regular,
+  background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)',
+  color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
+  borderRadius: 2,
+  userSelect: 'none',
+  pointerEvents: 'none',
+  padding: '0 4px',
+}));
+
+const Key = styled.kbd(({ theme }) => ({
+  padding: 0,
+  fontFamily: theme.typography.fonts.base,
+  verticalAlign: 'middle',
+  '& + &': {
+    marginLeft: 6,
+  },
+}));
+
+export const Shortcut = ({ keys }: { keys: string[] }) => (
+  <Wrapper>
+    {keys.map((key) => (
+      <Key key={key}>{shortcutToHumanString([key])}</Key>
+    ))}
+  </Wrapper>
+);
diff --git a/code/core/src/manager/components/preview/NumericInput.stories.tsx b/code/core/src/manager/components/preview/NumericInput.stories.tsx
new file mode 100644
index 000000000000..a0edc6effacd
--- /dev/null
+++ b/code/core/src/manager/components/preview/NumericInput.stories.tsx
@@ -0,0 +1,105 @@
+import { expect, fireEvent, fn } from 'storybook/test';
+
+import preview from '../../../../../.storybook/preview';
+import { NumericInput } from './NumericInput';
+
+const meta = preview.meta({
+  component: NumericInput,
+  tags: ['autodocs'],
+  args: {
+    setValue: fn(),
+  },
+});
+
+export default meta;
+
+export const Default = meta.story({
+  args: {
+    value: '10',
+  },
+  play: async ({ args, canvas }) => {
+    const input = await canvas.findByRole('textbox');
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(input).toHaveValue('11');
+    expect(args.setValue).toHaveBeenNthCalledWith(1, '11');
+    expect(args.setValue).toHaveBeenNthCalledWith(2, '12');
+    expect(args.setValue).toHaveBeenNthCalledWith(3, '11');
+  },
+});
+
+export const WithParsedUnit = meta.story({
+  args: {
+    value: '10em',
+  },
+  play: async ({ args, canvas }) => {
+    const input = await canvas.findByRole('textbox');
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(input).toHaveValue('11em');
+    expect(args.setValue).toHaveBeenNthCalledWith(1, '11em');
+    expect(args.setValue).toHaveBeenNthCalledWith(2, '12em');
+    expect(args.setValue).toHaveBeenNthCalledWith(3, '11em');
+  },
+});
+
+export const WithExplicitUnit = meta.story({
+  args: {
+    value: '10',
+    unit: 'vw',
+  },
+  play: async ({ args, canvas }) => {
+    const input = await canvas.findByRole('textbox');
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(input).toHaveValue('11vw');
+    expect(args.setValue).toHaveBeenNthCalledWith(1, '11vw');
+    expect(args.setValue).toHaveBeenNthCalledWith(2, '12vw');
+    expect(args.setValue).toHaveBeenNthCalledWith(3, '11vw');
+  },
+});
+
+export const WithBaseUnit = meta.story({
+  args: {
+    value: '10em',
+    baseUnit: 'em',
+  },
+  play: async ({ args, canvas }) => {
+    const input = await canvas.findByRole('textbox');
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(input).toHaveValue('11');
+    expect(args.setValue).toHaveBeenNthCalledWith(1, '11em');
+    expect(args.setValue).toHaveBeenNthCalledWith(2, '12em');
+    expect(args.setValue).toHaveBeenNthCalledWith(3, '11em');
+  },
+});
+
+export const WithMinAndMax = meta.story({
+  args: {
+    value: '10em',
+    minValue: 9,
+    maxValue: 11,
+  },
+  play: async ({ args, canvas }) => {
+    const input = await canvas.findByRole('textbox');
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+    expect(input).toHaveValue('11em');
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    expect(input).toHaveValue('9em');
+    expect(args.setValue).toHaveBeenNthCalledWith(1, '11em');
+    expect(args.setValue).toHaveBeenNthCalledWith(2, '11em');
+    expect(args.setValue).toHaveBeenNthCalledWith(3, '11em');
+    expect(args.setValue).toHaveBeenNthCalledWith(4, '10em');
+    expect(args.setValue).toHaveBeenNthCalledWith(5, '9em');
+    expect(args.setValue).toHaveBeenNthCalledWith(6, '9em');
+  },
+});
diff --git a/code/core/src/manager/components/preview/NumericInput.tsx b/code/core/src/manager/components/preview/NumericInput.tsx
new file mode 100644
index 000000000000..82cf1f6d4d44
--- /dev/null
+++ b/code/core/src/manager/components/preview/NumericInput.tsx
@@ -0,0 +1,187 @@
+import type { ChangeEvent, ComponentProps, ReactNode } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { Form } from 'storybook/internal/components';
+
+import { useId } from '@react-aria/utils';
+import { styled } from 'storybook/theming';
+
+const Wrapper = styled.div<{ after?: ReactNode; before?: ReactNode }>(
+  ({ after, before, theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: 32,
+    paddingInline: 9,
+    fontSize: theme.typography.size.s1,
+    color: theme.textMutedColor,
+    background: theme.input.background,
+    boxShadow: `${theme.input.border} 0 0 0 1px inset`,
+    borderRadius: theme.input.borderRadius,
+    svg: {
+      display: 'block',
+    },
+    input: {
+      width: '100%',
+      height: '100%',
+      minHeight: '100%',
+      flex: '1 1 auto',
+      paddingInline: 0,
+      fontSize: 'inherit',
+      background: 'transparent',
+      border: 'none',
+      boxShadow: 'none',
+      color: theme.input.color,
+      '&:focus, &:focus-visible': {
+        boxShadow: 'none',
+        outline: 'none',
+      },
+    },
+    '&:has(input:focus-visible)': {
+      outline: `2px solid ${theme.color.secondary}`,
+      outlineOffset: -2,
+    },
+    ...(after && { paddingRight: 2 }),
+    ...(before && { paddingLeft: 2 }),
+  })
+);
+
+interface NumericInputProps extends Omit<ComponentProps<typeof Form.Input>, 'value'> {
+  label?: string;
+  before?: ReactNode;
+  after?: ReactNode;
+  value: string;
+  setValue: (value: string) => void;
+  minValue?: number;
+  maxValue?: number;
+  unit?: string;
+  baseUnit?: string;
+}
+
+export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(function NumericInput(
+  {
+    label,
+    before,
+    after,
+    value,
+    setValue,
+    minValue = -Infinity,
+    maxValue = Infinity,
+    unit,
+    baseUnit,
+    className,
+    style,
+    ...props
+  },
+  forwardedRef
+) {
+  const baseUnitRegex = useMemo(() => baseUnit && new RegExp(`${baseUnit}$`), [baseUnit]);
+  const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState(
+    baseUnitRegex ? value.replace(baseUnitRegex, '') : value
+  );
+  const id = props.id || inputId;
+
+  useImperativeHandle(forwardedRef, () => inputRef.current!);
+
+  const parseValue = useCallback(
+    (value: string) => {
+      const [, inputValue, inputUnit = unit || baseUnit || ''] =
+        value.match(/(-?\d+(?:\.\d+)?)(\%|[a-z]{0,4})?$/) || [];
+      const number = Math.max(minValue, Math.min(parseFloat(inputValue), maxValue));
+      return { number, unit: inputUnit };
+    },
+    [minValue, maxValue, unit, baseUnit]
+  );
+
+  const updateValue = useCallback(
+    (value: string) => {
+      const { number, unit } = parseValue(value);
+      if (Number.isNaN(number)) {
+        setInputValue(value);
+      } else {
+        setInputValue(`${number}${unit === baseUnit ? '' : unit}`);
+        setValue(`${number}${unit}`);
+      }
+    },
+    [parseValue, setValue, baseUnit]
+  );
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => updateValue(e.target.value),
+    [updateValue]
+  );
+
+  const setInputSelection = useCallback(() => {
+    requestAnimationFrame(() => {
+      const input = inputRef.current;
+      const index = input?.value.search(/[^-\d.]/) ?? -1;
+      if (input && index >= 0) {
+        input.setSelectionRange(index, index);
+      }
+    });
+  }, []);
+
+  const updateInputValue = useCallback(
+    () => setInputValue(baseUnitRegex ? value.replace(baseUnitRegex, '') : value),
+    [value, baseUnitRegex]
+  );
+
+  useEffect(() => {
+    if (inputRef.current !== document.activeElement) {
+      updateInputValue();
+    }
+  }, [updateInputValue]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+        return;
+      }
+      e.preventDefault();
+
+      const { number, unit } = parseValue(inputValue);
+      if (!Number.isNaN(number)) {
+        updateValue(`${e.key === 'ArrowUp' ? number + 1 : number - 1}${unit}`);
+        setInputSelection();
+      }
+    };
+
+    const input = inputRef.current;
+    if (input) {
+      input.addEventListener('keydown', handleKeyDown);
+      return () => input.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [inputValue, parseValue, updateValue, setInputSelection]);
+
+  return (
+    <Wrapper after={after} before={before} className={className} style={style}>
+      {before && <div>{before}</div>}
+      {label && (
+        <label htmlFor={id} className="sb-sr-only">
+          {label}
+        </label>
+      )}
+      <Form.Input
+        {...props}
+        id={id}
+        ref={inputRef}
+        value={inputValue}
+        onChange={onChange}
+        onFocus={setInputSelection}
+        onBlur={updateInputValue}
+      />
+      {after && <div>{after}</div>}
+    </Wrapper>
+  );
+});
diff --git a/code/core/src/manager/components/preview/Viewport.tsx b/code/core/src/manager/components/preview/Viewport.tsx
index b20a30639d64..9064fbf95763 100644
--- a/code/core/src/manager/components/preview/Viewport.tsx
+++ b/code/core/src/manager/components/preview/Viewport.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { ActionList } from 'storybook/internal/components';
 
@@ -12,7 +12,7 @@ import {
   useViewport,
 } from '../../../viewport/useViewport';
 import { IFrame } from './Iframe';
-import { SizeInput } from './SizeInput';
+import { NumericInput } from './NumericInput';
 
 type DragSide = 'none' | 'both' | 'bottom' | 'right';
 
@@ -110,14 +110,13 @@ const FrameWrapper = styled.div<{
       rgba(0,0,0,0) 100%)`,
   },
   iframe: {
-    borderRadius: 'inherit',
     pointerEvents: dragging === 'none' ? 'auto' : 'none',
   },
 }));
 
 const DragHandle = styled.div<{
-  'data-side': DragSide;
   isDefault: boolean;
+  'data-side': DragSide;
 }>(
   { display: 'none' },
   ({ theme, isDefault }) =>
@@ -192,6 +191,17 @@ const ScrollEdge = styled.div<{ 'data-edge': DragSide }>({
   },
 });
 
+const SizeInput = styled(NumericInput)({
+  width: 85,
+  height: 28,
+  minHeight: 28,
+});
+
+const parseNumber = (value: string) => {
+  const [match, number, unit] = value.match(/^(\d+(?:\.\d+)?)(\%|[a-z]{0,4})?$/) || [];
+  return match ? { number: Number(number), unit } : undefined;
+};
+
 export const Viewport = ({
   active,
   id,
@@ -215,6 +225,10 @@ export const Viewport = ({
   const dragStart = useRef<[number, number] | undefined>();
 
   useEffect(() => {
+    const scrollRight = targetRef.current?.querySelector('[data-edge="right"]');
+    const scrollBottom = targetRef.current?.querySelector('[data-edge="bottom"]');
+    const scrollBoth = targetRef.current?.querySelector('[data-edge="both"]');
+
     const onDrag = (e: MouseEvent) => {
       if (dragSide.current === 'both' || dragSide.current === 'right') {
         targetRef.current!.style.width = `${dragStart.current![0] + e.clientX}px`;
@@ -224,13 +238,24 @@ export const Viewport = ({
         targetRef.current!.style.height = `${dragStart.current![1] + e.clientY}px`;
         dragRefY.current!.dataset.value = `${dragStart.current![1] + e.clientY}`;
       }
+      if (dragSide.current === 'both') {
+        scrollBoth?.scrollIntoView({ block: 'center', inline: 'center' });
+      }
+      if (dragSide.current === 'right') {
+        scrollRight?.scrollIntoView({ block: 'center', inline: 'center' });
+      }
+      if (dragSide.current === 'bottom') {
+        scrollBottom?.scrollIntoView({ block: 'center', inline: 'center' });
+      }
     };
 
     const onEnd = () => {
       window.removeEventListener('mouseup', onEnd);
       window.removeEventListener('mousemove', onDrag);
       setDragging('none');
-      resize(`${targetRef.current!.clientWidth}px`, `${targetRef.current!.clientHeight}px`);
+      const { clientWidth, clientHeight } = targetRef.current!;
+      const scale = Number(targetRef.current!.dataset.scale) || 1;
+      resize(`${Math.round(clientWidth / scale)}px`, `${Math.round(clientHeight / scale)}px`);
       dragStart.current = undefined;
     };
 
@@ -251,16 +276,31 @@ export const Viewport = ({
     return () => handles.forEach((el) => el?.removeEventListener('mousedown', onStart));
   }, [resize]);
 
+  const frameStyles = useMemo(() => {
+    const { number: nx, unit: ux = 'px' } = parseNumber(width) ?? { number: 0, unit: 'px' };
+    const { number: ny, unit: uy = 'px' } = parseNumber(height) ?? { number: 0, unit: 'px' };
+    return {
+      width: `${nx * scale}${ux}`,
+      height: `${ny * scale}${uy}`,
+    };
+  }, [width, height, scale]);
+
   return (
     <ViewportWrapper key={id} active={active} isDefault={isDefault}>
       {!isDefault && (
         <ViewportControls>
           <ViewportDimensions>
             <SizeInput
+              aria-label="Viewport width"
               data-size-input="width"
               label="Viewport width"
-              prefix="W"
+              before={
+                <ActionList.Action size="small" readOnly aria-hidden>
+                  W
+                </ActionList.Action>
+              }
               value={width}
+              minValue={0}
               setValue={(value) => resize(value, height)}
             />
             <ActionList.Button
@@ -273,10 +313,16 @@ export const Viewport = ({
               <TransferIcon />
             </ActionList.Button>
             <SizeInput
+              aria-label="Viewport height"
               data-size-input="height"
               label="Viewport height"
-              prefix="H"
+              before={
+                <ActionList.Action size="small" readOnly aria-hidden>
+                  H
+                </ActionList.Action>
+              }
               value={height}
+              minValue={0}
               setValue={(value) => resize(width, value)}
             />
             {isCustom && lastSelectedOption && (
@@ -296,25 +342,27 @@ export const Viewport = ({
       <FrameWrapper
         isDefault={isDefault}
         data-dragging={dragging}
-        style={{ width, height }}
+        data-scale={scale}
+        style={isDefault ? { height: '100%', width: '100%' } : frameStyles}
         ref={targetRef}
       >
-        <IFrame
-          allowFullScreen
-          active={active}
-          key={id}
-          id={id}
-          title={id}
-          src={src}
-          scale={scale}
-        />
-        {!isDefault && (
-          <>
-            <ScrollEdge data-edge="right" />
-            <ScrollEdge data-edge="bottom" />
-            <ScrollEdge data-edge="both" />
-          </>
-        )}
+        <div
+          style={{
+            height: `${(1 / scale) * 100}%`,
+            width: `${(1 / scale) * 100}%`,
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
+          }}
+        >
+          <IFrame allowFullScreen active={active} key={id} id={id} title={id} src={src} scale={1} />
+          {!isDefault && (
+            <>
+              <ScrollEdge data-edge="right" />
+              <ScrollEdge data-edge="bottom" />
+              <ScrollEdge data-edge="both" />
+            </>
+          )}
+        </div>
         <DragHandle
           ref={dragRefX}
           isDefault={isDefault}
diff --git a/code/core/src/manager/components/preview/tools/share.tsx b/code/core/src/manager/components/preview/tools/share.tsx
index b7dd9720cccc..6c9863df3647 100644
--- a/code/core/src/manager/components/preview/tools/share.tsx
+++ b/code/core/src/manager/components/preview/tools/share.tsx
@@ -12,7 +12,7 @@ import { Consumer, types } from 'storybook/manager-api';
 import type { API, Combo } from 'storybook/manager-api';
 import { styled, useTheme } from 'storybook/theming';
 
-import { Shortcut } from '../../../container/Menu';
+import { Shortcut } from '../../Shortcut';
 
 const mapper = ({ api, state }: Combo) => {
   const { storyId, refId } = state;
diff --git a/code/core/src/manager/components/preview/tools/zoom.stories.tsx b/code/core/src/manager/components/preview/tools/zoom.stories.tsx
new file mode 100644
index 000000000000..9b4b6e9e320b
--- /dev/null
+++ b/code/core/src/manager/components/preview/tools/zoom.stories.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+
+import type { StoryContext } from '@storybook/react-vite';
+
+import { fn, screen, within } from 'storybook/test';
+
+import preview from '../../../../../../.storybook/preview';
+import { Zoom } from './zoom';
+
+const openDialog = async (context: StoryContext<typeof Zoom>) => {
+  const zoom = await context.canvas.findByRole('button', { name: 'Change zoom level' });
+  await context.userEvent.click(zoom);
+  return screen.findByRole('dialog');
+};
+
+const meta = preview.meta({
+  component: Zoom,
+  args: {
+    value: 1,
+    zoomIn: fn(),
+    zoomOut: fn(),
+    zoomTo: fn(),
+  },
+  render: (args: Parameters<typeof Zoom>[0]) => {
+    const [value, setValue] = useState(args.value);
+    return (
+      <Zoom
+        {...{
+          value,
+          zoomIn: () => setValue(value + 0.5),
+          zoomOut: () => setValue(value - 0.5),
+          zoomTo: setValue,
+        }}
+      />
+    );
+  },
+  play: async (context) => {
+    await openDialog(context as any);
+  },
+});
+
+export default meta;
+
+export const Default = meta.story({});
+
+export const ZoomIn = meta.story({
+  play: async (context) => {
+    const dialog = await openDialog(context as any);
+    const zoomIn = await within(dialog).findByRole('button', { name: 'Zoom in' });
+    await context.userEvent.click(zoomIn);
+  },
+});
+
+export const ZoomOut = meta.story({
+  play: async (context) => {
+    const dialog = await openDialog(context as any);
+    const zoomOut = await within(dialog).findByRole('button', { name: 'Zoom out' });
+    await context.userEvent.click(zoomOut);
+  },
+});
+
+export const Undo = meta.story({
+  play: async (context) => {
+    const dialog = await openDialog(context as any);
+    const zoomIn = await within(dialog).findByRole('button', { name: 'Zoom in' });
+    await context.userEvent.click(zoomIn);
+    const undo = await within(dialog).findByRole('button', { name: 'Reset zoom' });
+    await context.userEvent.click(undo);
+  },
+});
+
+export const MaxZoom = meta.story({
+  args: {
+    value: 4,
+  },
+});
+
+export const MinZoom = meta.story({
+  args: {
+    value: 0.25,
+  },
+});
diff --git a/code/core/src/manager/components/preview/tools/zoom.tsx b/code/core/src/manager/components/preview/tools/zoom.tsx
index bc11e58a87fc..42b3d9c0eb70 100644
--- a/code/core/src/manager/components/preview/tools/zoom.tsx
+++ b/code/core/src/manager/components/preview/tools/zoom.tsx
@@ -1,23 +1,40 @@
-import type { EventHandler, PropsWithChildren, SyntheticEvent } from 'react';
-import React, { Component, createContext, memo, useCallback } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { Component, createContext, memo, useCallback, useEffect, useRef } from 'react';
 
-import { Button, Separator } from 'storybook/internal/components';
+import { ActionList, Button, PopoverProvider } from 'storybook/internal/components';
 import type { Addon_BaseType } from 'storybook/internal/types';
 
-import { ZoomIcon, ZoomOutIcon, ZoomResetIcon } from '@storybook/icons';
+import { UndoIcon, ZoomIcon } from '@storybook/icons';
 
-import { types } from 'storybook/manager-api';
+import { types, useStorybookApi } from 'storybook/manager-api';
+import { styled } from 'storybook/theming';
 
-const initialZoom = 1 as const;
+import { Shortcut } from '../../Shortcut';
+import { NumericInput } from '../NumericInput';
 
-const Context = createContext({ value: initialZoom, set: (v: number) => {} });
+const ZOOM_LEVELS = [0.25, 0.5, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 2, 3, 4] as const;
+const INITIAL_ZOOM_LEVEL = 1;
 
-class ZoomProvider extends Component<
+const ZoomButton = styled(Button)({
+  minWidth: 48,
+});
+
+const Context = createContext({ value: INITIAL_ZOOM_LEVEL, set: (v: number) => {} });
+
+const ZoomInput = styled(NumericInput)({
+  input: {
+    width: 100,
+  },
+});
+
+export const ZoomConsumer = Context.Consumer;
+
+export class ZoomProvider extends Component<
   PropsWithChildren<{ shouldScale: boolean }>,
   { value: number }
 > {
   state = {
-    value: initialZoom,
+    value: INITIAL_ZOOM_LEVEL,
   };
 
   set = (value: number) => this.setState({ value });
@@ -27,84 +44,173 @@ class ZoomProvider extends Component<
     const { set } = this;
     const { value } = this.state;
     return (
-      <Context.Provider value={{ value: shouldScale ? value : initialZoom, set }}>
+      <Context.Provider value={{ value: shouldScale ? value : INITIAL_ZOOM_LEVEL, set }}>
         {children}
       </Context.Provider>
     );
   }
 }
 
-const { Consumer: ZoomConsumer } = Context;
+export const Zoom = memo<{
+  value: number;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  zoomTo: (value: number) => void;
+}>(function Zoom({ value, zoomIn, zoomOut, zoomTo }) {
+  const inputRef = useRef<HTMLInputElement>(null);
 
-const Zoom = memo<{
-  zoomIn: EventHandler<SyntheticEvent>;
-  zoomOut: EventHandler<SyntheticEvent>;
-  reset: EventHandler<SyntheticEvent>;
-}>(function Zoom({ zoomIn, zoomOut, reset }) {
   return (
-    <>
-      <Button key="zoomin" padding="small" variant="ghost" onClick={zoomIn} ariaLabel="Zoom in">
-        <ZoomIcon />
-      </Button>
-      <Button key="zoomout" padding="small" variant="ghost" onClick={zoomOut} ariaLabel="Zoom out">
-        <ZoomOutIcon />
-      </Button>
-      <Button
-        key="zoomreset"
+    <PopoverProvider
+      padding="none"
+      onVisibleChange={(isVisible) => {
+        if (isVisible) {
+          requestAnimationFrame(() => inputRef.current?.select());
+        }
+      }}
+      popover={
+        <>
+          <ActionList>
+            <ActionList.Item>
+              <ZoomInput
+                aria-label="Zoom percentage"
+                ref={inputRef}
+                unit="%"
+                before={
+                  <ActionList.Button size="small" padding="small" readOnly aria-hidden>
+                    <ZoomIcon />
+                  </ActionList.Button>
+                }
+                after={
+                  <ActionList.Button
+                    size="small"
+                    padding="small"
+                    disabled={value === INITIAL_ZOOM_LEVEL}
+                    onClick={() => zoomTo(INITIAL_ZOOM_LEVEL)}
+                    ariaLabel="Reset zoom"
+                  >
+                    <UndoIcon />
+                  </ActionList.Button>
+                }
+                value={`${Math.round(value * 100)}%`}
+                minValue={1}
+                maxValue={1000}
+                setValue={(value: string) => {
+                  const zoomLevel = parseInt(value, 10) / 100;
+                  if (!Number.isNaN(zoomLevel)) {
+                    zoomTo(zoomLevel);
+                  }
+                }}
+              />
+            </ActionList.Item>
+          </ActionList>
+          <ActionList>
+            <ActionList.Item>
+              <ActionList.Action
+                onClick={zoomIn}
+                ariaLabel="Zoom in"
+                disabled={value >= ZOOM_LEVELS.at(-1)!}
+              >
+                <ActionList.Text>Zoom in</ActionList.Text>
+                <Shortcut keys={['alt', '+']} />
+              </ActionList.Action>
+            </ActionList.Item>
+            <ActionList.Item>
+              <ActionList.Action
+                onClick={zoomOut}
+                ariaLabel="Zoom out"
+                disabled={value <= ZOOM_LEVELS.at(0)!}
+              >
+                <ActionList.Text>Zoom out</ActionList.Text>
+                <Shortcut keys={['alt', '-']} />
+              </ActionList.Action>
+            </ActionList.Item>
+            <ActionList.Item active={value === 0.5}>
+              <ActionList.Action onClick={() => zoomTo(0.5)} ariaLabel="Zoom to 50%">
+                <ActionList.Text>50%</ActionList.Text>
+              </ActionList.Action>
+            </ActionList.Item>
+            <ActionList.Item active={value === 1}>
+              <ActionList.Action onClick={() => zoomTo(1)} ariaLabel="Zoom to 100%">
+                <ActionList.Text>100%</ActionList.Text>
+                <Shortcut keys={['alt', '0']} />
+              </ActionList.Action>
+            </ActionList.Item>
+            <ActionList.Item active={value === 2}>
+              <ActionList.Action onClick={() => zoomTo(2)} ariaLabel="Zoom to 200%">
+                200%
+              </ActionList.Action>
+            </ActionList.Item>
+          </ActionList>
+        </>
+      }
+    >
+      <ZoomButton
         padding="small"
         variant="ghost"
-        onClick={reset}
-        ariaLabel="Reset zoom"
+        ariaLabel="Change zoom level"
+        active={value !== INITIAL_ZOOM_LEVEL}
       >
-        <ZoomResetIcon />
-      </Button>
-    </>
+        {Math.round(value * 100)}%
+      </ZoomButton>
+    </PopoverProvider>
   );
 });
 
-export { Zoom, ZoomConsumer, ZoomProvider };
+const ZoomWrapper = memo<{
+  set: (zoomLevel: number) => void;
+  value: number;
+}>(function ZoomWrapper({ set, value }) {
+  const api = useStorybookApi();
 
-const ZoomWrapper = memo<{ set: (zoomLevel: number) => void; value: number }>(function ZoomWrapper({
-  set,
-  value,
-}) {
-  const zoomIn = useCallback(
-    (e: SyntheticEvent) => {
-      e.preventDefault();
-      set(0.8 * value);
-    },
-    [set, value]
-  );
-  const zoomOut = useCallback(
-    (e: SyntheticEvent) => {
-      e.preventDefault();
-      set(1.25 * value);
-    },
-    [set, value]
-  );
-  const reset = useCallback(
-    (e: SyntheticEvent) => {
-      e.preventDefault();
-      set(initialZoom);
+  const zoomIn = useCallback(() => {
+    const higherZoomLevel = ZOOM_LEVELS.find((level) => level > value);
+    if (higherZoomLevel) {
+      set(higherZoomLevel);
+    }
+  }, [set, value]);
+
+  const zoomOut = useCallback(() => {
+    const lowerZoomLevel = ZOOM_LEVELS.findLast((level) => level < value);
+    if (lowerZoomLevel) {
+      set(lowerZoomLevel);
+    }
+  }, [set, value]);
+
+  const zoomTo = useCallback(
+    (value: number) => {
+      set(value);
     },
-    [set, initialZoom]
+    [set]
   );
-  return <Zoom key="zoom" {...{ zoomIn, zoomOut, reset }} />;
-});
 
-function ZoomToolRenderer() {
-  return (
-    <>
-      <ZoomConsumer>{({ set, value }) => <ZoomWrapper {...{ set, value }} />}</ZoomConsumer>
-      <Separator />
-    </>
-  );
-}
+  useEffect(() => {
+    api.setAddonShortcut('zoom', {
+      label: 'Zoom to 100%',
+      defaultShortcut: ['alt', '0'],
+      actionName: 'zoomReset',
+      action: () => zoomTo(1),
+    });
+    api.setAddonShortcut('zoom', {
+      label: 'Zoom in',
+      defaultShortcut: ['alt', '='],
+      actionName: 'zoomIn',
+      action: zoomIn,
+    });
+    api.setAddonShortcut('zoom', {
+      label: 'Zoom out',
+      defaultShortcut: ['alt', '-'],
+      actionName: 'zoomOut',
+      action: zoomOut,
+    });
+  }, [api, zoomIn, zoomOut, zoomTo]);
+
+  return <Zoom key="zoom" {...{ value, zoomIn, zoomOut, zoomTo }} />;
+});
 
 export const zoomTool: Addon_BaseType = {
   title: 'zoom',
   id: 'zoom',
   type: types.TOOL,
   match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
-  render: ZoomToolRenderer,
+  render: () => <ZoomConsumer>{(zoomContext) => <ZoomWrapper {...zoomContext} />}</ZoomConsumer>,
 };
diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx
index c6d1ed365988..55bd6b9f34da 100644
--- a/code/core/src/manager/components/sidebar/ContextMenu.tsx
+++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx
@@ -18,8 +18,8 @@ import type { API } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
 import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
-import { Shortcut } from '../../container/Menu';
 import { getMostCriticalStatusValue } from '../../utils/status';
+import { Shortcut } from '../Shortcut';
 import { UseSymbol } from './IconSymbols';
 import { StatusButton } from './StatusButton';
 import { StatusContext } from './StatusContext';
diff --git a/code/core/src/manager/container/Menu.stories.tsx b/code/core/src/manager/container/Menu.stories.tsx
index 4c3758a574b3..5c81f339a7c9 100644
--- a/code/core/src/manager/container/Menu.stories.tsx
+++ b/code/core/src/manager/container/Menu.stories.tsx
@@ -7,8 +7,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 
 import { initialState } from '../../shared/checklist-store/checklistData.state';
+import { Shortcut } from '../components/Shortcut';
 import { internal_universalChecklistStore as mockStore } from '../manager-stores.mock';
-import { Shortcut } from './Menu';
 
 const onLinkClick = action('onLinkClick');
 
diff --git a/code/core/src/manager/container/Menu.tsx b/code/core/src/manager/container/Menu.tsx
index 08bc657f2711..2590c40e694c 100644
--- a/code/core/src/manager/container/Menu.tsx
+++ b/code/core/src/manager/container/Menu.tsx
@@ -1,4 +1,3 @@
-import type { FC } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
 import { ActionList, ProgressSpinner } from 'storybook/internal/components';
@@ -15,52 +14,20 @@ import {
 } from '@storybook/icons';
 
 import type { API } from 'storybook/manager-api';
-import { shortcutToHumanString } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
 import type { NormalLink } from '../../components/components/tooltip/TooltipLinkList';
+import { Shortcut } from '../components/Shortcut';
 import { useChecklist } from '../components/sidebar/useChecklist';
 
 export type MenuItem = NormalLink & {
   closeOnClick?: boolean;
 };
 
-const Key = styled.span(({ theme }) => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 16,
-  fontSize: '11px',
-  fontWeight: theme.typography.weight.regular,
-  background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)',
-  color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
-  borderRadius: 2,
-  userSelect: 'none',
-  pointerEvents: 'none',
-  padding: '0 4px',
-}));
-
-const KeyChild = styled.code(({ theme }) => ({
-  padding: 0,
-  fontFamily: theme.typography.fonts.base,
-  verticalAlign: 'middle',
-  '& + &': {
-    marginLeft: 6,
-  },
-}));
-
 const ProgressCircle = styled(ProgressSpinner)(({ theme }) => ({
   color: theme.color.secondary,
 }));
 
-export const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
-  <Key>
-    {keys.map((key) => (
-      <KeyChild key={key}>{shortcutToHumanString([key])}</KeyChild>
-    ))}
-  </Key>
-);
-
 export const useMenu = ({
   api,
   showToolbar,
diff --git a/code/core/src/manager/container/Preview.tsx b/code/core/src/manager/container/Preview.tsx
index e410ca0aecac..25d4d83e14b4 100644
--- a/code/core/src/manager/container/Preview.tsx
+++ b/code/core/src/manager/container/Preview.tsx
@@ -22,8 +22,8 @@ import { zoomTool } from '../components/preview/tools/zoom';
 import type { PreviewProps } from '../components/preview/utils/types';
 
 const defaultTabs = [createCanvasTab()];
-const defaultTools = [menuTool, remountTool, zoomTool];
-const defaultToolsExtra = [addonsTool, fullScreenTool, shareTool, openInEditorTool];
+const defaultTools = [menuTool, remountTool];
+const defaultToolsExtra = [zoomTool, addonsTool, fullScreenTool, shareTool, openInEditorTool];
 
 const emptyTabsList: Addon_BaseType[] = [];