From 19dd2d35fbad4e00bbc1ea1e61923155cbd8f528 Mon Sep 17 00:00:00 2001
From: Michael Ryom <ryom.michael@gmail.com>
Date: Sun, 22 Feb 2026 16:36:08 +0100
Subject: [PATCH] feat: Add dynamic menu customization system

Config-driven menu rendering with reorderable/hideable items,
submenu item promotion to main menu, and vertical/horizontal
orientation toggle.

New files:
- menu-config.ts: config types, defaults, validation
- menu-customization.tsx: drag-to-reorder settings UI
- promoted-items.tsx: renders promoted submenu items in main menu

Modified:
- menu/index.tsx: config-driven rendering with orientation toggle
- jotai/device.ts: menuConfigAtom
- storage/index.ts: menu config persistence
- video, keyboard, mouse, settings submenus: config-driven item order
---
 browser/src/components/menu/index.tsx         | 136 +++++-
 .../src/components/menu/keyboard/index.tsx    |  18 +-
 browser/src/components/menu/mouse/index.tsx   |  26 +-
 .../src/components/menu/promoted-items.tsx    | 242 ++++++++++
 .../src/components/menu/settings/index.tsx    |  16 +-
 .../menu/settings/menu-customization.tsx      | 457 ++++++++++++++++++
 browser/src/components/menu/video/index.tsx   |  21 +-
 browser/src/jotai/device.ts                   |   6 +
 browser/src/libs/menu-config.ts               | 219 +++++++++
 browser/src/libs/storage/index.ts             |  26 +
 10 files changed, 1125 insertions(+), 42 deletions(-)
 create mode 100644 browser/src/components/menu/promoted-items.tsx
 create mode 100644 browser/src/components/menu/settings/menu-customization.tsx
 create mode 100644 browser/src/libs/menu-config.ts

diff --git a/browser/src/components/menu/index.tsx b/browser/src/components/menu/index.tsx
index a5f1683c..80a718a0 100644
--- a/browser/src/components/menu/index.tsx
+++ b/browser/src/components/menu/index.tsx
@@ -2,25 +2,54 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Divider } from 'antd';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
-import { ChevronRightIcon, GripVerticalIcon, XIcon } from 'lucide-react';
+import {
+  ChevronRightIcon,
+  GripVerticalIcon,
+  XIcon,
+  ArrowRightLeftIcon,
+} from 'lucide-react';
 import Draggable from 'react-draggable';
 
-import { serialStateAtom } from '@/jotai/device.ts';
+import { menuConfigAtom, serialStateAtom } from '@/jotai/device.ts';
+import {
+  type MenuItemId,
+  type SubMenuItemId,
+  isSubMenuItem,
+  SERIAL_REQUIRED_ITEMS,
+  getSubMenuItemMeta,
+} from '@/libs/menu-config';
 import * as storage from '@/libs/storage';
 
 import { Audio } from './audio';
 import { Fullscreen } from './fullscreen';
 import { Keyboard } from './keyboard';
 import { Mouse } from './mouse';
+import { PromotedSubMenuItem } from './promoted-items';
 import { Recorder } from './recorder';
 import { SerialPort } from './serial-port';
 import { Settings } from './settings';
 import { Video } from './video';
 
+// Map MenuItemId to its component
+const MENU_ITEM_COMPONENTS: Record<MenuItemId, React.FC> = {
+  video: Video,
+  audio: Audio,
+  serialPort: SerialPort,
+  keyboard: Keyboard,
+  mouse: Mouse,
+  recorder: Recorder,
+  settings: Settings,
+  fullscreen: Fullscreen,
+};
+
 export const Menu = () => {
   const serialState = useAtomValue(serialStateAtom);
+  const menuConfig = useAtomValue(menuConfigAtom);
 
   const [isMenuOpen, setIsMenuOpen] = useState(true);
+  const [orientation, setOrientation] = useState<'horizontal' | 'vertical'>(
+    storage.getMenuOrientation()
+  );
   const [menuBounds, setMenuBounds] = useState({ left: 0, right: 0, top: 0, bottom: 0 });
 
   const nodeRef = useRef<HTMLDivElement | null>(null);
@@ -52,15 +81,71 @@ export const Menu = () => {
 
   useEffect(() => {
     handleResize();
-  }, [isMenuOpen, serialState, handleResize]);
+  }, [isMenuOpen, serialState, menuConfig, orientation, handleResize]);
 
   function toggleMenu() {
     const isOpen = !isMenuOpen;
-
     setIsMenuOpen(isOpen);
     storage.setIsMenuOpen(isOpen);
   }
 
+  function toggleOrientation() {
+    const newOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+    setOrientation(newOrientation);
+    storage.setMenuOrientation(newOrientation);
+  }
+
+  // Build the list of rendered menu items with dividers between serial/non-serial groups
+  const renderMenuItems = () => {
+    const elements: React.ReactNode[] = [];
+    let lastRequiredSerial: boolean | null = null;
+
+    for (const itemId of menuConfig.visibleItems) {
+      let requiresSerial: boolean;
+      let element: React.ReactNode;
+
+      if (isSubMenuItem(itemId)) {
+        // Promoted submenu item
+        const meta = getSubMenuItemMeta(itemId as SubMenuItemId);
+        requiresSerial = meta?.requiresSerial ?? false;
+
+        if (requiresSerial && serialState !== 'connected') continue;
+
+        element = <PromotedSubMenuItem key={itemId} itemId={itemId as SubMenuItemId} />;
+      } else {
+        const menuItemId = itemId as MenuItemId;
+        requiresSerial = SERIAL_REQUIRED_ITEMS.includes(menuItemId);
+
+        if (requiresSerial && serialState !== 'connected') continue;
+
+        const Component = MENU_ITEM_COMPONENTS[menuItemId];
+        if (!Component) continue;
+
+        element = <Component key={menuItemId} />;
+      }
+
+      // Add divider at serial/non-serial transitions
+      if (lastRequiredSerial !== null && lastRequiredSerial !== requiresSerial) {
+        const dividerType = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+        elements.push(
+          <Divider
+            key={`div-${itemId}`}
+            type={dividerType}
+            className={orientation === 'horizontal' ? 'px-0.5' : ''}
+            style={orientation === 'vertical' ? { margin: '2px 0' } : undefined}
+          />
+        );
+      }
+
+      elements.push(element);
+      lastRequiredSerial = requiresSerial;
+    }
+
+    return elements;
+  };
+
+  const isVertical = orientation === 'vertical';
+
   return (
     <Draggable
       nodeRef={nodeRef}
@@ -76,8 +161,12 @@ export const Menu = () => {
         <div className="sticky top-[10px] flex w-full justify-center">
           <div
             className={clsx(
-              'h-[34px] items-center justify-between space-x-1.5 rounded bg-neutral-800/70 px-2',
-              isMenuOpen ? 'flex' : 'hidden'
+              'items-center justify-between rounded bg-neutral-800/70 px-2',
+              isMenuOpen
+                ? isVertical
+                  ? 'flex flex-col space-y-1.5 py-2'
+                  : 'flex h-[34px] space-x-1.5'
+                : 'hidden'
             )}
           >
             <strong>
@@ -85,28 +174,25 @@ export const Menu = () => {
                 <GripVerticalIcon size={18} />
               </div>
             </strong>
-            <Divider type="vertical" />
-
-            <Video />
-            <Audio />
+            <Divider
+              type={isVertical ? 'horizontal' : 'vertical'}
+              style={isVertical ? { margin: '2px 0' } : undefined}
+            />
 
-            {serialState === 'connected' && (
-              <>
-                <SerialPort />
+            {renderMenuItems()}
 
-                <Divider type="vertical" className="px-0.5" />
+            <Divider
+              type={isVertical ? 'horizontal' : 'vertical'}
+              style={isVertical ? { margin: '2px 0' } : undefined}
+            />
 
-                <Keyboard />
-                <Mouse />
-              </>
-            )}
-
-            <Recorder />
-
-            <Divider type="vertical" className="px-0.5" />
-
-            <Settings />
-            <Fullscreen />
+            <div
+              className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-400 hover:bg-neutral-700/70 hover:text-white"
+              onClick={toggleOrientation}
+              title={isVertical ? 'Switch to horizontal' : 'Switch to vertical'}
+            >
+              <ArrowRightLeftIcon size={16} />
+            </div>
             <div
               className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70"
               onClick={toggleMenu}
diff --git a/browser/src/components/menu/keyboard/index.tsx b/browser/src/components/menu/keyboard/index.tsx
index 7a1d4e73..a1cb792c 100644
--- a/browser/src/components/menu/keyboard/index.tsx
+++ b/browser/src/components/menu/keyboard/index.tsx
@@ -1,19 +1,31 @@
 import { useState } from 'react';
 import { Popover } from 'antd';
+import { useAtomValue } from 'jotai';
 import { KeyboardIcon } from 'lucide-react';
 
+import { menuConfigAtom } from '@/jotai/device';
+import type { KeyboardSubItemId } from '@/libs/menu-config';
+
 import { Paste } from './paste.tsx';
 import { Shortcuts } from './shortcuts';
 import { VirtualKeyboard } from './virtual-keyboard.tsx';
 
+const KEYBOARD_SUB_COMPONENTS: Record<KeyboardSubItemId, React.FC> = {
+  'keyboard.paste': Paste,
+  'keyboard.virtualKeyboard': VirtualKeyboard,
+  'keyboard.shortcuts': Shortcuts,
+};
+
 export const Keyboard = () => {
+  const menuConfig = useAtomValue(menuConfigAtom);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const content = (
     <div className="flex flex-col space-y-0.5">
-      <Paste />
-      <VirtualKeyboard />
-      <Shortcuts />
+      {menuConfig.subMenus.keyboard.map((itemId) => {
+        const Component = KEYBOARD_SUB_COMPONENTS[itemId];
+        return Component ? <Component key={itemId} /> : null;
+      })}
     </div>
   );
 
diff --git a/browser/src/components/menu/mouse/index.tsx b/browser/src/components/menu/mouse/index.tsx
index 4f1dd545..1c7111f9 100644
--- a/browser/src/components/menu/mouse/index.tsx
+++ b/browser/src/components/menu/mouse/index.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
-import { Divider, Popover } from 'antd';
-import { useAtom, useSetAtom } from 'jotai';
+import { Popover } from 'antd';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { MouseIcon } from 'lucide-react';
 
+import { menuConfigAtom } from '@/jotai/device';
 import {
   mouseJigglerModeAtom,
   mouseModeAtom,
@@ -10,6 +11,7 @@ import {
   scrollDirectionAtom,
   scrollIntervalAtom
 } from '@/jotai/mouse.ts';
+import type { MouseSubItemId } from '@/libs/menu-config';
 import { mouseJiggler } from '@/libs/mouse-jiggler';
 import * as storage from '@/libs/storage';
 
@@ -19,7 +21,16 @@ import { Mode } from './mode.tsx';
 import { Speed } from './speed.tsx';
 import { Style } from './style.tsx';
 
+const MOUSE_SUB_COMPONENTS: Record<MouseSubItemId, React.FC> = {
+  'mouse.style': Style,
+  'mouse.mode': Mode,
+  'mouse.direction': Direction,
+  'mouse.speed': Speed,
+  'mouse.jiggler': Jiggler,
+};
+
 export const Mouse = () => {
+  const menuConfig = useAtomValue(menuConfigAtom);
   const [mouseStyle, setMouseStyle] = useAtom(mouseStyleAtom);
   const [mouseMode, setMouseMode] = useAtom(mouseModeAtom);
   const setScrollDirection = useSetAtom(scrollDirectionAtom);
@@ -60,13 +71,10 @@ export const Mouse = () => {
 
   const content = (
     <div className="flex flex-col space-y-0.5">
-      <Style />
-      <Mode />
-      <Direction />
-      <Speed />
-
-      <Divider style={{ margin: '5px 0 5px 0' }} />
-      <Jiggler />
+      {menuConfig.subMenus.mouse.map((itemId) => {
+        const Component = MOUSE_SUB_COMPONENTS[itemId];
+        return Component ? <Component key={itemId} /> : null;
+      })}
     </div>
   );
 
diff --git a/browser/src/components/menu/promoted-items.tsx b/browser/src/components/menu/promoted-items.tsx
new file mode 100644
index 00000000..1cf602f5
--- /dev/null
+++ b/browser/src/components/menu/promoted-items.tsx
@@ -0,0 +1,242 @@
+import { useEffect, useState } from 'react';
+import { Divider, Popover } from 'antd';
+import { useSetAtom } from 'jotai';
+import {
+  MonitorIcon,
+  RotateCwIcon,
+  MaximizeIcon,
+  VideoIcon,
+  ClipboardIcon,
+  KeyboardIcon,
+  CommandIcon,
+  MousePointerIcon,
+  MousePointer2Icon,
+  ArrowUpDownIcon,
+  GaugeIcon,
+  MousePointerClickIcon,
+  LanguagesIcon,
+  LayoutGridIcon,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { isKeyboardOpenAtom } from '@/jotai/keyboard';
+import { device } from '@/libs/device';
+import { CharCodes, ShiftChars } from '@/libs/keyboard/charCodes';
+import { getModifierBit } from '@/libs/keyboard/keymap';
+import type { SubMenuItemId } from '@/libs/menu-config';
+import { getSubMenuItemMeta } from '@/libs/menu-config';
+import * as storage from '@/libs/storage';
+
+import { Recorder as ShortcutRecorder } from './keyboard/shortcuts/recorder';
+import { Shortcut } from './keyboard/shortcuts/shortcut';
+import type { Shortcut as ShortcutInterface } from './keyboard/shortcuts/types';
+import { Resolution } from './video/resolution';
+import { Rotation } from './video/rotation';
+import { Scale } from './video/scale';
+import { Device } from './video/device';
+import { Style } from './mouse/style';
+import { Mode } from './mouse/mode';
+import { Direction } from './mouse/direction';
+import { Speed } from './mouse/speed';
+import { Jiggler } from './mouse/jiggler';
+import { Language } from './settings/language';
+import { MenuCustomization } from './settings/menu-customization';
+
+// Icon mapping for each submenu item
+const ITEM_ICONS: Record<SubMenuItemId, React.ReactNode> = {
+  'video.resolution': <MonitorIcon size={18} />,
+  'video.rotation': <RotateCwIcon size={18} />,
+  'video.scale': <MaximizeIcon size={18} />,
+  'video.device': <VideoIcon size={18} />,
+  'keyboard.paste': <ClipboardIcon size={18} />,
+  'keyboard.virtualKeyboard': <KeyboardIcon size={18} />,
+  'keyboard.shortcuts': <CommandIcon size={18} />,
+  'mouse.style': <MousePointerIcon size={18} />,
+  'mouse.mode': <MousePointer2Icon size={18} />,
+  'mouse.direction': <ArrowUpDownIcon size={18} />,
+  'mouse.speed': <GaugeIcon size={18} />,
+  'mouse.jiggler': <MousePointerClickIcon size={18} />,
+  'settings.language': <LanguagesIcon size={18} />,
+  'settings.menuCustomization': <LayoutGridIcon size={18} />,
+};
+
+// Components for popover items
+const POPOVER_COMPONENTS: Partial<Record<SubMenuItemId, React.FC>> = {
+  'video.resolution': Resolution,
+  'video.rotation': Rotation,
+  'video.scale': Scale,
+  'video.device': Device,
+  'mouse.style': Style,
+  'mouse.mode': Mode,
+  'mouse.direction': Direction,
+  'mouse.speed': Speed,
+  'mouse.jiggler': Jiggler,
+  'settings.language': Language,
+  'settings.menuCustomization': MenuCustomization,
+};
+
+const BUTTON_CLASS =
+  'flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white';
+
+// Promoted paste: direct clipboard-to-keyboard action
+const PromotedPaste: React.FC<{ label: string }> = ({ label }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function paste() {
+    if (isLoading) return;
+    setIsLoading(true);
+    try {
+      const text = await navigator.clipboard.readText();
+      if (!text) return;
+      for (const char of text) {
+        const ascii = char.charCodeAt(0);
+        const code = CharCodes[ascii];
+        if (!code) continue;
+        let modifier = 0;
+        if ((ascii >= 65 && ascii <= 90) || ShiftChars[ascii]) {
+          modifier |= getModifierBit('ShiftLeft');
+        }
+        await device.sendKeyboardData([modifier, 0, code, 0, 0, 0, 0, 0]);
+        await new Promise((r) => setTimeout(r, 50));
+        await device.sendKeyboardData([0, 0, 0, 0, 0, 0, 0, 0]);
+      }
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className={BUTTON_CLASS} onClick={paste} title={label}>
+      <ClipboardIcon size={18} />
+    </div>
+  );
+};
+
+// Promoted shortcuts: self-contained popover with shortcuts content
+const PromotedShortcuts: React.FC<{ label: string }> = ({ label }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [customShortcuts, setCustomShortcuts] = useState<ShortcutInterface[]>([]);
+
+  const defaultShortcuts: ShortcutInterface[] = [
+    { keys: [{ code: 'MetaLeft', label: 'Win' }, { code: 'Tab', label: 'Tab' }] },
+    { keys: [{ code: 'ControlLeft', label: 'Ctrl' }, { code: 'AltLeft', label: 'Alt' }, { code: 'Delete', label: '⌫' }] },
+  ];
+
+  useEffect(() => {
+    const shortcuts = storage.getShortcuts();
+    if (!shortcuts) return;
+    setCustomShortcuts(JSON.parse(shortcuts));
+  }, []);
+
+  function addShortcut(shortcut: ShortcutInterface) {
+    const shortcuts = [...customShortcuts, shortcut];
+    setCustomShortcuts(shortcuts);
+    storage.setShortcuts(JSON.stringify(shortcuts));
+  }
+
+  function delShortcut(index: number) {
+    const shortcuts = customShortcuts.filter((_, i) => i !== index);
+    setCustomShortcuts(shortcuts);
+    storage.setShortcuts(JSON.stringify(shortcuts));
+  }
+
+  function handleOpenChange(open: boolean) {
+    if (open) { setIsOpen(true); return; }
+    if (isRecording) return;
+    setIsOpen(false);
+  }
+
+  const content = (
+    <ScrollArea className="max-w-[400px] [&>[data-radix-scroll-area-viewport]]:max-h-[350px]">
+      {customShortcuts.length > 0 && (
+        <>
+          {customShortcuts.map((shortcut, index) => (
+            <Shortcut key={index} shortcut={shortcut} />
+          ))}
+          <Divider style={{ margin: '5px 0 5px 0' }} />
+        </>
+      )}
+      {defaultShortcuts.map((shortcut, index) => (
+        <Shortcut key={index} shortcut={shortcut} />
+      ))}
+      <Divider style={{ margin: '5px 0 5px 0' }} />
+      <ShortcutRecorder
+        shortcuts={customShortcuts}
+        addShortcut={addShortcut}
+        delShortcut={delShortcut}
+        setIsRecording={setIsRecording}
+      />
+    </ScrollArea>
+  );
+
+  return (
+    <Popover
+      content={content}
+      placement="bottomLeft"
+      trigger="click"
+      arrow={false}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <div className={BUTTON_CLASS} title={label}>
+        <CommandIcon size={18} />
+      </div>
+    </Popover>
+  );
+};
+
+interface PromotedSubMenuItemProps {
+  itemId: SubMenuItemId;
+}
+
+export const PromotedSubMenuItem: React.FC<PromotedSubMenuItemProps> = ({ itemId }) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const setIsKeyboardOpen = useSetAtom(isKeyboardOpenAtom);
+
+  const meta = getSubMenuItemMeta(itemId);
+  if (!meta) return null;
+
+  const icon = ITEM_ICONS[itemId];
+  const label = t(meta.labelKey, meta.defaultLabel);
+
+  // Special cases
+  if (itemId === 'keyboard.virtualKeyboard') {
+    return (
+      <div className={BUTTON_CLASS} onClick={() => setIsKeyboardOpen((prev) => !prev)} title={label}>
+        {icon}
+      </div>
+    );
+  }
+
+  if (itemId === 'keyboard.paste') {
+    return <PromotedPaste label={label} />;
+  }
+
+  if (itemId === 'keyboard.shortcuts') {
+    return <PromotedShortcuts label={label} />;
+  }
+
+  // Standard popover items
+  const ContentComponent = POPOVER_COMPONENTS[itemId];
+  if (!ContentComponent) return null;
+
+  return (
+    <Popover
+      content={<ContentComponent />}
+      placement="bottomLeft"
+      trigger="click"
+      arrow={false}
+      open={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <div className={BUTTON_CLASS} title={label}>
+        {icon}
+      </div>
+    </Popover>
+  );
+};
diff --git a/browser/src/components/menu/settings/index.tsx b/browser/src/components/menu/settings/index.tsx
index 4de22a2e..110bbec9 100644
--- a/browser/src/components/menu/settings/index.tsx
+++ b/browser/src/components/menu/settings/index.tsx
@@ -1,11 +1,22 @@
 import { Popover } from 'antd';
+import { useAtomValue } from 'jotai';
 import { BookIcon, DownloadIcon, SettingsIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
+import { menuConfigAtom } from '@/jotai/device';
+import type { SettingsSubItemId } from '@/libs/menu-config';
+
 import { Language } from './language.tsx';
+import { MenuCustomization } from './menu-customization';
+
+const SETTINGS_SUB_COMPONENTS: Record<SettingsSubItemId, React.FC> = {
+  'settings.language': Language,
+  'settings.menuCustomization': MenuCustomization,
+};
 
 export const Settings = () => {
   const { t } = useTranslation();
+  const menuConfig = useAtomValue(menuConfigAtom);
 
   function openPage(url: string) {
     window.open(url, '_blank');
@@ -13,7 +24,10 @@ export const Settings = () => {
 
   const content = (
     <div className="flex flex-col space-y-0.5">
-      <Language />
+      {menuConfig.subMenus.settings.map((itemId) => {
+        const Component = SETTINGS_SUB_COMPONENTS[itemId];
+        return Component ? <Component key={itemId} /> : null;
+      })}
 
       <div
         className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
diff --git a/browser/src/components/menu/settings/menu-customization.tsx b/browser/src/components/menu/settings/menu-customization.tsx
new file mode 100644
index 00000000..1f16480c
--- /dev/null
+++ b/browser/src/components/menu/settings/menu-customization.tsx
@@ -0,0 +1,457 @@
+import { useState } from 'react';
+import { Modal, Button, Collapse } from 'antd';
+import { useAtom } from 'jotai';
+import {
+  LayoutGridIcon,
+  EyeIcon,
+  EyeOffIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  RotateCcwIcon,
+  LockIcon,
+  ArrowUpFromLineIcon,
+  ArrowDownFromLineIcon,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { menuConfigAtom } from '@/jotai/device';
+import {
+  type MenuItemId,
+  type MenuConfig,
+  type SubMenuItemId,
+  MENU_ITEMS_META,
+  SUB_MENU_ITEMS_META,
+  DEFAULT_MENU_CONFIG,
+  PROTECTED_ITEMS,
+  PROTECTED_SUB_ITEMS,
+  isSubMenuItem,
+  getParentMenuId,
+} from '@/libs/menu-config';
+import * as storage from '@/libs/storage';
+
+export const MenuCustomization = () => {
+  const { t } = useTranslation();
+  const [menuConfig, setMenuConfig] = useAtom(menuConfigAtom);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [localConfig, setLocalConfig] = useState<MenuConfig>(menuConfig);
+
+  const openModal = () => {
+    setLocalConfig({ ...menuConfig });
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const saveConfig = () => {
+    setMenuConfig(localConfig);
+    storage.setMenuConfig(localConfig);
+    setIsModalOpen(false);
+  };
+
+  const resetToDefaults = () => {
+    setLocalConfig({ ...DEFAULT_MENU_CONFIG });
+  };
+
+  const moveItem = (itemId: MenuItemId | SubMenuItemId, direction: 'up' | 'down') => {
+    const items = [...localConfig.visibleItems];
+    const idx = items.indexOf(itemId);
+    if (idx === -1) return;
+
+    const newIdx = direction === 'up' ? idx - 1 : idx + 1;
+    if (newIdx < 0 || newIdx >= items.length) return;
+
+    // Swap
+    [items[idx], items[newIdx]] = [items[newIdx], items[idx]];
+    setLocalConfig({ ...localConfig, visibleItems: items });
+  };
+
+  const toggleVisibility = (itemId: MenuItemId) => {
+    // Don't allow hiding protected items
+    if (PROTECTED_ITEMS.includes(itemId)) return;
+
+    const isVisible = localConfig.visibleItems.includes(itemId);
+
+    if (isVisible) {
+      // Move to hidden
+      setLocalConfig({
+        ...localConfig,
+        visibleItems: localConfig.visibleItems.filter((id) => id !== itemId),
+        hiddenItems: [...localConfig.hiddenItems, itemId],
+      });
+    } else {
+      // Move to visible
+      setLocalConfig({
+        ...localConfig,
+        visibleItems: [...localConfig.visibleItems, itemId],
+        hiddenItems: localConfig.hiddenItems.filter((id) => id !== itemId),
+      });
+    }
+  };
+
+  const getItemLabel = (itemId: MenuItemId | SubMenuItemId): string => {
+    // Check if it's a submenu item (promoted)
+    if (isSubMenuItem(itemId)) {
+      const meta = SUB_MENU_ITEMS_META.find((m) => m.id === itemId);
+      if (!meta) return itemId;
+      return t(meta.labelKey, meta.defaultLabel);
+    }
+    const meta = MENU_ITEMS_META.find((m) => m.id === itemId);
+    if (!meta) return itemId;
+    return t(meta.labelKey, meta.defaultLabel);
+  };
+
+  const getSubItemLabel = (itemId: SubMenuItemId): string => {
+    const meta = SUB_MENU_ITEMS_META.find((m) => m.id === itemId);
+    if (!meta) return itemId;
+    return t(meta.labelKey, meta.defaultLabel);
+  };
+
+  const isProtected = (itemId: MenuItemId): boolean => {
+    return PROTECTED_ITEMS.includes(itemId);
+  };
+
+  const isSubItemProtected = (itemId: SubMenuItemId): boolean => {
+    return PROTECTED_SUB_ITEMS.includes(itemId);
+  };
+
+  const moveSubItem = (parent: 'video' | 'keyboard' | 'mouse' | 'settings', itemId: SubMenuItemId, direction: 'up' | 'down') => {
+    const items = [...localConfig.subMenus[parent]];
+    const idx = items.indexOf(itemId as never);
+    if (idx === -1) return;
+
+    const newIdx = direction === 'up' ? idx - 1 : idx + 1;
+    if (newIdx < 0 || newIdx >= items.length) return;
+
+    [items[idx], items[newIdx]] = [items[newIdx], items[idx]];
+    setLocalConfig({
+      ...localConfig,
+      subMenus: { ...localConfig.subMenus, [parent]: items },
+    });
+  };
+
+  const toggleSubItemVisibility = (parent: 'video' | 'keyboard' | 'mouse' | 'settings', itemId: SubMenuItemId) => {
+    if (isSubItemProtected(itemId)) return;
+
+    const isVisible = localConfig.subMenus[parent].includes(itemId as never);
+
+    if (isVisible) {
+      setLocalConfig({
+        ...localConfig,
+        subMenus: {
+          ...localConfig.subMenus,
+          [parent]: localConfig.subMenus[parent].filter((id) => id !== itemId),
+        },
+        hiddenSubItems: [...localConfig.hiddenSubItems, itemId],
+      });
+    } else {
+      setLocalConfig({
+        ...localConfig,
+        subMenus: {
+          ...localConfig.subMenus,
+          [parent]: [...localConfig.subMenus[parent], itemId as never],
+        },
+        hiddenSubItems: localConfig.hiddenSubItems.filter((id) => id !== itemId),
+      });
+    }
+  };
+
+  const promoteToMainMenu = (parent: 'video' | 'keyboard' | 'mouse' | 'settings', itemId: SubMenuItemId) => {
+    if (isSubItemProtected(itemId)) return;
+    
+    // Remove from submenu
+    const newSubMenus = {
+      ...localConfig.subMenus,
+      [parent]: localConfig.subMenus[parent].filter((id) => id !== itemId),
+    };
+    
+    // Add to promoted items and visible items
+    const newPromotedItems = [...localConfig.promotedItems, itemId];
+    const newVisibleItems = [...localConfig.visibleItems, itemId];
+    
+    setLocalConfig({
+      ...localConfig,
+      visibleItems: newVisibleItems,
+      subMenus: newSubMenus,
+      promotedItems: newPromotedItems,
+    });
+  };
+
+  const demoteFromMainMenu = (itemId: SubMenuItemId) => {
+    if (isSubItemProtected(itemId)) return;
+    
+    const parent = getParentMenuId(itemId) as 'video' | 'keyboard' | 'mouse' | 'settings';
+    
+    // Remove from visibleItems and promotedItems
+    const newVisibleItems = localConfig.visibleItems.filter((id) => id !== itemId);
+    const newPromotedItems = localConfig.promotedItems.filter((id) => id !== itemId);
+    
+    // Add back to submenu
+    const newSubMenus = {
+      ...localConfig.subMenus,
+      [parent]: [...localConfig.subMenus[parent], itemId as never],
+    };
+    
+    setLocalConfig({
+      ...localConfig,
+      visibleItems: newVisibleItems,
+      subMenus: newSubMenus,
+      promotedItems: newPromotedItems,
+    });
+  };
+
+  const renderSubMenuItems = (parent: 'video' | 'keyboard' | 'mouse' | 'settings', items: SubMenuItemId[]) => (
+    <div className="space-y-1">
+      {items.map((itemId, idx) => (
+        <div
+          key={itemId}
+          className="flex items-center justify-between rounded bg-neutral-700/50 px-2 py-1.5"
+        >
+          <span className="text-sm text-neutral-300">{getSubItemLabel(itemId)}</span>
+          <div className="flex items-center space-x-0.5">
+            <button
+              className="rounded p-0.5 text-neutral-400 hover:bg-neutral-600 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+              onClick={() => moveSubItem(parent, itemId, 'up')}
+              disabled={idx === 0}
+              title={t('settings.moveUp', 'Move Up')}
+            >
+              <ChevronUpIcon size={14} />
+            </button>
+            <button
+              className="rounded p-0.5 text-neutral-400 hover:bg-neutral-600 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+              onClick={() => moveSubItem(parent, itemId, 'down')}
+              disabled={idx === items.length - 1}
+              title={t('settings.moveDown', 'Move Down')}
+            >
+              <ChevronDownIcon size={14} />
+            </button>
+            {isSubItemProtected(itemId) ? (
+              <span className="rounded p-0.5 text-neutral-500">
+                <LockIcon size={14} />
+              </span>
+            ) : (
+              <>
+                <button
+                  className="rounded p-0.5 text-blue-400 hover:bg-neutral-600 hover:text-blue-300"
+                  onClick={() => promoteToMainMenu(parent, itemId)}
+                  title={t('settings.promoteToMain', 'Move to Main Menu')}
+                >
+                  <ArrowUpFromLineIcon size={14} />
+                </button>
+                <button
+                  className="rounded p-0.5 text-neutral-400 hover:bg-neutral-600 hover:text-white"
+                  onClick={() => toggleSubItemVisibility(parent, itemId)}
+                  title={t('settings.hide', 'Hide')}
+                >
+                  <EyeOffIcon size={14} />
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+
+  const getHiddenSubItemsForParent = (parent: MenuItemId): SubMenuItemId[] => {
+    return localConfig.hiddenSubItems.filter((id) => id.startsWith(`${parent}.`));
+  };
+
+  const renderHiddenSubItems = (parent: 'video' | 'keyboard' | 'mouse' | 'settings') => {
+    const hidden = getHiddenSubItemsForParent(parent);
+    if (hidden.length === 0) return null;
+    return (
+      <div className="mt-2 space-y-1">
+        <span className="text-xs text-neutral-500">{t('settings.hiddenItems', 'Hidden Items')}:</span>
+        {hidden.map((itemId) => (
+          <div
+            key={itemId}
+            className="flex items-center justify-between rounded bg-neutral-800/30 px-2 py-1.5"
+          >
+            <span className="text-sm text-neutral-500">{getSubItemLabel(itemId)}</span>
+            <button
+              className="rounded p-0.5 text-neutral-400 hover:bg-neutral-600 hover:text-white"
+              onClick={() => toggleSubItemVisibility(parent, itemId)}
+            >
+              <EyeIcon size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div
+        className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
+        onClick={openModal}
+      >
+        <LayoutGridIcon size={16} />
+        <span>{t('settings.customizeMenu', 'Customize Menu')}</span>
+      </div>
+
+      <Modal
+        title={t('settings.customizeMenu', 'Customize Menu')}
+        open={isModalOpen}
+        onCancel={closeModal}
+        footer={[
+          <Button key="reset" onClick={resetToDefaults}>
+            <RotateCcwIcon size={14} className="mr-1" />
+            {t('settings.resetDefaults', 'Reset to Defaults')}
+          </Button>,
+          <Button key="cancel" onClick={closeModal}>
+            {t('settings.cancel', 'Cancel')}
+          </Button>,
+          <Button key="save" type="primary" onClick={saveConfig}>
+            {t('settings.save', 'Save')}
+          </Button>,
+        ]}
+        width={600}
+      >
+        <div className="max-h-[60vh] space-y-4 overflow-y-auto">
+          {/* Main Menu Items */}
+          <Collapse
+            defaultActiveKey={['mainMenu']}
+            ghost
+            items={[
+              {
+                key: 'mainMenu',
+                label: <span className="text-sm font-medium text-neutral-300">{t('settings.mainMenu', 'Main Menu')}</span>,
+                children: (
+                  <div className="space-y-3">
+                    <div className="space-y-1">
+                      {localConfig.visibleItems.map((itemId, idx) => {
+                        const isPromotedItem = isSubMenuItem(itemId);
+                        const isProtectedItem = isPromotedItem ? isSubItemProtected(itemId as SubMenuItemId) : isProtected(itemId as MenuItemId);
+                        
+                        return (
+                          <div
+                            key={itemId}
+                            className={`flex items-center justify-between rounded px-3 py-2 ${isPromotedItem ? 'bg-neutral-700/70' : 'bg-neutral-800'}`}
+                          >
+                            <div className="flex items-center space-x-2">
+                              {isPromotedItem && (
+                                <span className="text-[10px] text-blue-400 uppercase">{t('settings.promoted', 'Promoted')}</span>
+                              )}
+                              <span className="text-neutral-200">{getItemLabel(itemId)}</span>
+                            </div>
+                            <div className="flex items-center space-x-1">
+                              <button
+                                className="rounded p-1 text-neutral-400 hover:bg-neutral-700 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+                                onClick={() => moveItem(itemId, 'up')}
+                                disabled={idx === 0}
+                              >
+                                <ChevronUpIcon size={16} />
+                              </button>
+                              <button
+                                className="rounded p-1 text-neutral-400 hover:bg-neutral-700 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+                                onClick={() => moveItem(itemId, 'down')}
+                                disabled={idx === localConfig.visibleItems.length - 1}
+                              >
+                                <ChevronDownIcon size={16} />
+                              </button>
+                              {isProtectedItem ? (
+                                <span className="rounded p-1 text-neutral-500">
+                                  <LockIcon size={16} />
+                                </span>
+                              ) : isPromotedItem ? (
+                                <button
+                                  className="rounded p-1 text-blue-400 hover:bg-neutral-700 hover:text-blue-300"
+                                  onClick={() => demoteFromMainMenu(itemId as SubMenuItemId)}
+                                  title={t('settings.demoteToSubmenu', 'Move to Submenu')}
+                                >
+                                  <ArrowDownFromLineIcon size={16} />
+                                </button>
+                              ) : (
+                                <button
+                                  className="rounded p-1 text-neutral-400 hover:bg-neutral-700 hover:text-white"
+                                  onClick={() => toggleVisibility(itemId as MenuItemId)}
+                                >
+                                  <EyeOffIcon size={16} />
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                    {localConfig.hiddenItems.length > 0 && (
+                      <div>
+                        <span className="text-xs text-neutral-500">{t('settings.hiddenItems', 'Hidden Items')}:</span>
+                        <div className="mt-1 space-y-1">
+                          {localConfig.hiddenItems.map((itemId) => (
+                            <div
+                              key={itemId}
+                              className="flex items-center justify-between rounded bg-neutral-800/50 px-3 py-2"
+                            >
+                              <span className="text-neutral-400">{getItemLabel(itemId)}</span>
+                              <button
+                                className="rounded p-1 text-neutral-400 hover:bg-neutral-700 hover:text-white"
+                                onClick={() => toggleVisibility(itemId)}
+                              >
+                                <EyeIcon size={16} />
+                              </button>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ),
+              },
+            ]}
+          />
+
+          {/* Submenus */}
+          <Collapse
+            ghost
+            items={[
+              {
+                key: 'video',
+                label: <span className="text-sm font-medium text-neutral-300">{t('menu.video', 'Video')} {t('settings.submenu', 'Submenu')}</span>,
+                children: (
+                  <>
+                    {renderSubMenuItems('video', localConfig.subMenus.video)}
+                    {renderHiddenSubItems('video')}
+                  </>
+                ),
+              },
+              {
+                key: 'keyboard',
+                label: <span className="text-sm font-medium text-neutral-300">{t('menu.keyboard', 'Keyboard')} {t('settings.submenu', 'Submenu')}</span>,
+                children: (
+                  <>
+                    {renderSubMenuItems('keyboard', localConfig.subMenus.keyboard)}
+                    {renderHiddenSubItems('keyboard')}
+                  </>
+                ),
+              },
+              {
+                key: 'mouse',
+                label: <span className="text-sm font-medium text-neutral-300">{t('menu.mouse', 'Mouse')} {t('settings.submenu', 'Submenu')}</span>,
+                children: (
+                  <>
+                    {renderSubMenuItems('mouse', localConfig.subMenus.mouse)}
+                    {renderHiddenSubItems('mouse')}
+                  </>
+                ),
+              },
+              {
+                key: 'settings',
+                label: <span className="text-sm font-medium text-neutral-300">{t('menu.settings', 'Settings')} {t('settings.submenu', 'Submenu')}</span>,
+                children: (
+                  <>
+                    {renderSubMenuItems('settings', localConfig.subMenus.settings)}
+                    {renderHiddenSubItems('settings')}
+                  </>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+};
diff --git a/browser/src/components/menu/video/index.tsx b/browser/src/components/menu/video/index.tsx
index f2bb0b3f..5c8df41d 100644
--- a/browser/src/components/menu/video/index.tsx
+++ b/browser/src/components/menu/video/index.tsx
@@ -1,18 +1,31 @@
 import { Popover } from 'antd';
+import { useAtomValue } from 'jotai';
 import { MonitorIcon } from 'lucide-react';
 
+import { menuConfigAtom } from '@/jotai/device';
+import type { VideoSubItemId } from '@/libs/menu-config';
+
 import { Device } from './device.tsx';
 import { Resolution } from './resolution.tsx';
 import { Rotation } from './rotation.tsx';
 import { Scale } from './scale.tsx';
 
+const VIDEO_SUB_COMPONENTS: Record<VideoSubItemId, React.FC> = {
+  'video.resolution': Resolution,
+  'video.rotation': Rotation,
+  'video.scale': Scale,
+  'video.device': Device,
+};
+
 export const Video = () => {
+  const menuConfig = useAtomValue(menuConfigAtom);
+
   const content = (
     <div className="flex flex-col space-y-0.5">
-      <Resolution />
-      <Rotation />
-      <Scale />
-      <Device />
+      {menuConfig.subMenus.video.map((itemId) => {
+        const Component = VIDEO_SUB_COMPONENTS[itemId];
+        return Component ? <Component key={itemId} /> : null;
+      })}
     </div>
   );
 
diff --git a/browser/src/jotai/device.ts b/browser/src/jotai/device.ts
index ed6c4754..ed091606 100644
--- a/browser/src/jotai/device.ts
+++ b/browser/src/jotai/device.ts
@@ -1,5 +1,7 @@
 import { atom } from 'jotai';
 
+import { type MenuConfig, DEFAULT_MENU_CONFIG, validateMenuConfig } from '@/libs/menu-config';
+import * as storage from '@/libs/storage';
 import type { Resolution, Rotation } from '@/types.ts';
 
 type VideoState = 'disconnected' | 'connecting' | 'connected';
@@ -18,3 +20,7 @@ export const videoDeviceIdAtom = atom('');
 export const videoStateAtom = atom<VideoState>('disconnected');
 
 export const serialStateAtom = atom<SerialState>('disconnected');
+
+export const menuConfigAtom = atom<MenuConfig>(
+  validateMenuConfig(storage.getMenuConfig() ?? { ...DEFAULT_MENU_CONFIG })
+);
diff --git a/browser/src/libs/menu-config.ts b/browser/src/libs/menu-config.ts
new file mode 100644
index 00000000..aa952bb2
--- /dev/null
+++ b/browser/src/libs/menu-config.ts
@@ -0,0 +1,219 @@
+// Menu item identifiers
+export type MenuItemId = 
+  | 'video'
+  | 'audio'
+  | 'serialPort'
+  | 'keyboard'
+  | 'mouse'
+  | 'recorder'
+  | 'settings'
+  | 'fullscreen';
+
+// Submenu item identifiers (grouped by parent)
+export type VideoSubItemId = 'video.resolution' | 'video.rotation' | 'video.scale' | 'video.device';
+export type KeyboardSubItemId = 'keyboard.paste' | 'keyboard.virtualKeyboard' | 'keyboard.shortcuts';
+export type MouseSubItemId = 'mouse.style' | 'mouse.mode' | 'mouse.direction' | 'mouse.speed' | 'mouse.jiggler';
+export type SettingsSubItemId = 'settings.language' | 'settings.menuCustomization';
+
+export type SubMenuItemId = VideoSubItemId | KeyboardSubItemId | MouseSubItemId | SettingsSubItemId;
+
+// Menu configuration stored in localStorage
+export interface MenuConfig {
+  // Items visible in the main menu, in order (can include SubMenuItemId for promoted items)
+  visibleItems: (MenuItemId | SubMenuItemId)[];
+  // Items that are hidden
+  hiddenItems: MenuItemId[];
+  // Submenu items configuration (per parent menu)
+  subMenus: {
+    video: VideoSubItemId[];
+    keyboard: KeyboardSubItemId[];
+    mouse: MouseSubItemId[];
+    settings: SettingsSubItemId[];
+  };
+  // Hidden submenu items
+  hiddenSubItems: SubMenuItemId[];
+  // Submenu items promoted to main menu
+  promotedItems: SubMenuItemId[];
+}
+
+// Items that require serial connection to function
+export const SERIAL_REQUIRED_ITEMS: MenuItemId[] = ['serialPort', 'keyboard', 'mouse'];
+
+// Items that cannot be hidden
+export const PROTECTED_ITEMS: MenuItemId[] = ['settings'];
+export const PROTECTED_SUB_ITEMS: SubMenuItemId[] = ['settings.menuCustomization'];
+
+// Default submenu configurations
+export const DEFAULT_VIDEO_SUB_ITEMS: VideoSubItemId[] = ['video.resolution', 'video.rotation', 'video.scale', 'video.device'];
+export const DEFAULT_KEYBOARD_SUB_ITEMS: KeyboardSubItemId[] = ['keyboard.paste', 'keyboard.virtualKeyboard', 'keyboard.shortcuts'];
+export const DEFAULT_MOUSE_SUB_ITEMS: MouseSubItemId[] = ['mouse.style', 'mouse.mode', 'mouse.direction', 'mouse.speed', 'mouse.jiggler'];
+export const DEFAULT_SETTINGS_SUB_ITEMS: SettingsSubItemId[] = ['settings.language', 'settings.menuCustomization'];
+
+// Default menu configuration
+export const DEFAULT_MENU_CONFIG: MenuConfig = {
+  visibleItems: ['video', 'audio', 'serialPort', 'keyboard', 'mouse', 'recorder', 'settings', 'fullscreen'],
+  hiddenItems: [],
+  subMenus: {
+    video: [...DEFAULT_VIDEO_SUB_ITEMS],
+    keyboard: [...DEFAULT_KEYBOARD_SUB_ITEMS],
+    mouse: [...DEFAULT_MOUSE_SUB_ITEMS],
+    settings: [...DEFAULT_SETTINGS_SUB_ITEMS],
+  },
+  hiddenSubItems: [],
+  promotedItems: [],
+};
+
+// Check if an item ID is a submenu item
+export function isSubMenuItem(id: string): id is SubMenuItemId {
+  return id.includes('.');
+}
+
+// Get parent menu ID from submenu item ID
+export function getParentMenuId(subItemId: SubMenuItemId): MenuItemId {
+  return subItemId.split('.')[0] as MenuItemId;
+}
+
+// Menu item metadata for UI
+export interface MenuItemMeta {
+  id: MenuItemId;
+  labelKey: string;
+  defaultLabel: string;
+  requiresSerial: boolean;
+  isProtected: boolean;
+}
+
+export const MENU_ITEMS_META: MenuItemMeta[] = [
+  { id: 'video', labelKey: 'menu.video', defaultLabel: 'Video', requiresSerial: false, isProtected: false },
+  { id: 'audio', labelKey: 'menu.audio', defaultLabel: 'Audio', requiresSerial: false, isProtected: false },
+  { id: 'serialPort', labelKey: 'menu.serialPort', defaultLabel: 'Serial Port', requiresSerial: true, isProtected: false },
+  { id: 'keyboard', labelKey: 'menu.keyboard', defaultLabel: 'Keyboard', requiresSerial: true, isProtected: false },
+  { id: 'mouse', labelKey: 'menu.mouse', defaultLabel: 'Mouse', requiresSerial: true, isProtected: false },
+  { id: 'recorder', labelKey: 'menu.recorder', defaultLabel: 'Recorder', requiresSerial: false, isProtected: false },
+  { id: 'settings', labelKey: 'menu.settings', defaultLabel: 'Settings', requiresSerial: false, isProtected: true },
+  { id: 'fullscreen', labelKey: 'menu.fullscreen', defaultLabel: 'Fullscreen', requiresSerial: false, isProtected: false },
+];
+
+// Submenu item metadata
+export interface SubMenuItemMeta {
+  id: SubMenuItemId;
+  parent: MenuItemId;
+  labelKey: string;
+  defaultLabel: string;
+  isProtected: boolean;
+  requiresSerial: boolean;
+}
+
+export const SUB_MENU_ITEMS_META: SubMenuItemMeta[] = [
+  // Video submenu
+  { id: 'video.resolution', parent: 'video', labelKey: 'video.resolution', defaultLabel: 'Resolution', isProtected: false, requiresSerial: false },
+  { id: 'video.rotation', parent: 'video', labelKey: 'video.rotation', defaultLabel: 'Rotation', isProtected: false, requiresSerial: false },
+  { id: 'video.scale', parent: 'video', labelKey: 'video.scale', defaultLabel: 'Scale', isProtected: false, requiresSerial: false },
+  { id: 'video.device', parent: 'video', labelKey: 'video.device', defaultLabel: 'Device', isProtected: false, requiresSerial: false },
+  // Keyboard submenu
+  { id: 'keyboard.paste', parent: 'keyboard', labelKey: 'keyboard.paste', defaultLabel: 'Paste', isProtected: false, requiresSerial: true },
+  { id: 'keyboard.virtualKeyboard', parent: 'keyboard', labelKey: 'keyboard.virtualKeyboard', defaultLabel: 'Virtual Keyboard', isProtected: false, requiresSerial: true },
+  { id: 'keyboard.shortcuts', parent: 'keyboard', labelKey: 'keyboard.shortcut.title', defaultLabel: 'Shortcuts', isProtected: false, requiresSerial: true },
+  // Mouse submenu
+  { id: 'mouse.style', parent: 'mouse', labelKey: 'mouse.cursor.title', defaultLabel: 'Cursor Style', isProtected: false, requiresSerial: true },
+  { id: 'mouse.mode', parent: 'mouse', labelKey: 'mouse.mode', defaultLabel: 'Mode', isProtected: false, requiresSerial: true },
+  { id: 'mouse.direction', parent: 'mouse', labelKey: 'mouse.direction', defaultLabel: 'Wheel Direction', isProtected: false, requiresSerial: true },
+  { id: 'mouse.speed', parent: 'mouse', labelKey: 'mouse.speed', defaultLabel: 'Wheel Speed', isProtected: false, requiresSerial: true },
+  { id: 'mouse.jiggler', parent: 'mouse', labelKey: 'mouse.jiggler.title', defaultLabel: 'Mouse Jiggler', isProtected: false, requiresSerial: true },
+  // Settings submenu
+  { id: 'settings.language', parent: 'settings', labelKey: 'settings.language', defaultLabel: 'Language', isProtected: false, requiresSerial: false },
+  { id: 'settings.menuCustomization', parent: 'settings', labelKey: 'settings.customizeMenu', defaultLabel: 'Customize Menu', isProtected: true, requiresSerial: false },
+];
+
+// Helper to get metadata for an item
+export function getMenuItemMeta(id: MenuItemId): MenuItemMeta | undefined {
+  return MENU_ITEMS_META.find(item => item.id === id);
+}
+
+// Helper to get metadata for a submenu item
+export function getSubMenuItemMeta(id: SubMenuItemId): SubMenuItemMeta | undefined {
+  return SUB_MENU_ITEMS_META.find(item => item.id === id);
+}
+
+// Get all submenu items for a parent
+export function getSubMenuItemsForParent(parent: MenuItemId): SubMenuItemMeta[] {
+  return SUB_MENU_ITEMS_META.filter(item => item.parent === parent);
+}
+
+// Validate and fix menu config (ensure all items exist, settings is visible)
+export function validateMenuConfig(config: MenuConfig): MenuConfig {
+  const allMenuItems = new Set<MenuItemId>(DEFAULT_MENU_CONFIG.visibleItems as MenuItemId[]);
+  const allSubItems = new Set<SubMenuItemId>(SUB_MENU_ITEMS_META.map(m => m.id));
+  
+  // Separate menu items and promoted submenu items in visibleItems
+  const promotedItems = config.promotedItems ?? [];
+  const visibleItems: (MenuItemId | SubMenuItemId)[] = [];
+  const hiddenItems = [...(config.hiddenItems ?? [])];
+  
+  // Process visible items - keep valid menu items and promoted submenu items
+  for (const item of config.visibleItems ?? []) {
+    if (isSubMenuItem(item)) {
+      if (allSubItems.has(item) && promotedItems.includes(item)) {
+        visibleItems.push(item);
+      }
+    } else if (allMenuItems.has(item as MenuItemId)) {
+      visibleItems.push(item);
+    }
+  }
+  
+  // Add any missing menu items
+  for (const item of allMenuItems) {
+    if (!visibleItems.includes(item) && !hiddenItems.includes(item)) {
+      visibleItems.push(item);
+    }
+  }
+  
+  // Ensure settings is always visible
+  if (hiddenItems.includes('settings')) {
+    const idx = hiddenItems.indexOf('settings');
+    hiddenItems.splice(idx, 1);
+    if (!visibleItems.includes('settings')) {
+      visibleItems.push('settings');
+    }
+  }
+  
+  // Remove any invalid hidden items
+  const validHidden = hiddenItems.filter(item => allMenuItems.has(item));
+  
+  // Validate submenus - use defaults if not present or merge missing items
+  const subMenus = config.subMenus ?? DEFAULT_MENU_CONFIG.subMenus;
+  const hiddenSubItems = config.hiddenSubItems ?? [];
+  
+  // Ensure all submenu items exist (excluding promoted ones)
+  const validateSubMenu = <T extends SubMenuItemId>(items: T[], defaults: T[]): T[] => {
+    const allItems = new Set<T>(defaults);
+    const result = items.filter(item => allItems.has(item) && !promotedItems.includes(item));
+    // Add any missing items (that aren't hidden or promoted)
+    for (const item of defaults) {
+      if (!result.includes(item) && !hiddenSubItems.includes(item) && !promotedItems.includes(item)) {
+        result.push(item);
+      }
+    }
+    return result;
+  };
+  
+  // Ensure menuCustomization is never hidden or promoted
+  const validHiddenSubItems = hiddenSubItems.filter(
+    item => !PROTECTED_SUB_ITEMS.includes(item)
+  );
+  const validPromotedItems = promotedItems.filter(
+    item => allSubItems.has(item) && !PROTECTED_SUB_ITEMS.includes(item)
+  );
+  
+  return {
+    visibleItems,
+    hiddenItems: validHidden,
+    subMenus: {
+      video: validateSubMenu(subMenus.video ?? [], DEFAULT_VIDEO_SUB_ITEMS),
+      keyboard: validateSubMenu(subMenus.keyboard ?? [], DEFAULT_KEYBOARD_SUB_ITEMS),
+      mouse: validateSubMenu(subMenus.mouse ?? [], DEFAULT_MOUSE_SUB_ITEMS),
+      settings: validateSubMenu(subMenus.settings ?? [], DEFAULT_SETTINGS_SUB_ITEMS),
+    },
+    hiddenSubItems: validHiddenSubItems,
+    promotedItems: validPromotedItems,
+  };
+}
diff --git a/browser/src/libs/storage/index.ts b/browser/src/libs/storage/index.ts
index 7583d973..755440ae 100644
--- a/browser/src/libs/storage/index.ts
+++ b/browser/src/libs/storage/index.ts
@@ -1,4 +1,5 @@
 import type { Resolution, Rotation } from '@/types';
+import type { MenuConfig } from '@/libs/menu-config';
 
 const LANGUAGE_KEY = 'nanokvm-usb-language';
 const VIDEO_DEVICE_ID_KEY = 'nanokvm-usb-video-device-id';
@@ -13,6 +14,8 @@ const MOUSE_SCROLL_DIRECTION_KEY = 'nanokvm-usb-mouse-scroll-direction';
 const MOUSE_SCROLL_INTERVAL_KEY = 'nanokvm-usb-mouse-scroll-interval';
 const MOUSE_JIGGLER_MODE_KEY = 'nanokvm-usb-mouse-jiggler-mode';
 const KEYBOARD_SHORTCUT_KEY = 'nanokvm-usb-keyboard-shortcut';
+const MENU_CONFIG_KEY = 'nanokvm-usb-menu-config';
+const MENU_ORIENTATION_KEY = 'nanokvm-usb-menu-orientation';
 
 export function getLanguage() {
   return localStorage.getItem(LANGUAGE_KEY);
@@ -155,3 +158,26 @@ export function getMouseJigglerMode(): 'enable' | 'disable' {
 export function setMouseJigglerMode(jiggler: 'enable' | 'disable'): void {
   localStorage.setItem(MOUSE_JIGGLER_MODE_KEY, jiggler);
 }
+
+export function getMenuConfig(): MenuConfig | null {
+  const config = localStorage.getItem(MENU_CONFIG_KEY);
+  if (!config) return null;
+  try {
+    return JSON.parse(config) as MenuConfig;
+  } catch {
+    return null;
+  }
+}
+
+export function setMenuConfig(config: MenuConfig): void {
+  localStorage.setItem(MENU_CONFIG_KEY, JSON.stringify(config));
+}
+
+export function getMenuOrientation(): 'horizontal' | 'vertical' {
+  const orientation = localStorage.getItem(MENU_ORIENTATION_KEY);
+  return orientation === 'vertical' ? 'vertical' : 'horizontal';
+}
+
+export function setMenuOrientation(orientation: 'horizontal' | 'vertical'): void {
+  localStorage.setItem(MENU_ORIENTATION_KEY, orientation);
+}