diff --git a/web/package.json b/web/package.json
index 41ff665..527e583 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,7 @@
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.0",
     "react-error-boundary": "^4.1.2",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^14.1.3",
@@ -66,4 +67,4 @@
       "public"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 398ebfc..d1dc409 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-draggable:
+        specifier: ^4.4.0
+        version: 4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-error-boundary:
         specifier: ^4.1.2
         version: 4.1.2(react@18.3.1)
@@ -1166,6 +1169,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -2356,6 +2363,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-draggable@4.4.6:
+    resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==}
+    peerDependencies:
+      react: '>= 16.3.0'
+      react-dom: '>= 16.3.0'
+
   react-error-boundary@4.1.2:
     resolution: {integrity: sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==}
     peerDependencies:
@@ -3961,6 +3974,8 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@1.2.1: {}
+
   clsx@2.1.1: {}
 
   color-convert@2.0.1:
@@ -5242,6 +5257,13 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-draggable@4.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 1.2.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-error-boundary@4.1.2(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.0
diff --git a/web/src/pages/desktop/menu/index.tsx b/web/src/pages/desktop/menu/index.tsx
index fd8830f..a36126c 100644
--- a/web/src/pages/desktop/menu/index.tsx
+++ b/web/src/pages/desktop/menu/index.tsx
@@ -3,6 +3,7 @@ import { Divider } from 'antd';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
 import { MenuIcon, XIcon } from 'lucide-react';
+import Draggable from 'react-draggable';
 
 import { getMenuDisabledItems } from '@/lib/localstorage.ts';
 import { menuDisabledItemsAtom } from '@/jotai/settings.ts';
@@ -30,60 +31,62 @@ export const Menu = () => {
   }, []);
 
   return (
-    <div className="fixed left-1/2 top-[10px] z-[1000] -translate-x-1/2">
-      <div className="sticky top-[10px]">
-        <div
-          className={clsx(
-            'h-[36px] items-center rounded bg-neutral-800/80',
-            isMenuOpen ? 'flex' : 'hidden'
-          )}
-        >
-          <div className="hidden h-[30px] select-none items-center px-3 sm:flex">
-            <img src="/sipeed.ico" width={18} height={18} alt="sipeed" />
-          </div>
-
-          <Screen />
-          <Keyboard />
-          <Mouse />
-          <Divider type="vertical" />
-
-          {!menuDisabledItems.includes('image') && <Image />}
-          {!menuDisabledItems.includes('download') && <DownloadImage />}
-          {!menuDisabledItems.includes('script') && <Script />}
-          {!menuDisabledItems.includes('terminal') && <Terminal />}
-          {!menuDisabledItems.includes('wol') && <Wol />}
-
-          {['image', 'script', 'terminal', 'wol', 'download'].some(
-            (key) => !menuDisabledItems.includes(key)
-          ) && <Divider type="vertical" />}
-
-          {!menuDisabledItems.includes('power') && (
-            <>
-              <Power />
-              <Divider type="vertical" />
-            </>
-          )}
-
-          <Settings />
-          <Fullscreen />
-
+    <Draggable positionOffset={{ x: '-50%', y: '0%' }}>
+      <div className="fixed left-1/2 top-[10px] z-[1000] -translate-x-1/2">
+        <div className="sticky top-[10px]">
           <div
-            className="mr-1 flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700 hover:text-white"
-            onClick={() => setIsMenuOpen((o) => !o)}
+            className={clsx(
+              'h-[36px] items-center rounded bg-neutral-800/80',
+              isMenuOpen ? 'flex' : 'hidden'
+            )}
           >
-            <XIcon size={20} />
+            <div className="hidden h-[30px] select-none items-center px-3 sm:flex">
+              <img src="/sipeed.ico" width={18} height={18} alt="sipeed" />
+            </div>
+
+            <Screen />
+            <Keyboard />
+            <Mouse />
+            <Divider type="vertical" />
+
+            {!menuDisabledItems.includes('image') && <Image />}
+            {!menuDisabledItems.includes('download') && <DownloadImage />}
+            {!menuDisabledItems.includes('script') && <Script />}
+            {!menuDisabledItems.includes('terminal') && <Terminal />}
+            {!menuDisabledItems.includes('wol') && <Wol />}
+
+            {['image', 'script', 'terminal', 'wol', 'download'].some(
+              (key) => !menuDisabledItems.includes(key)
+            ) && <Divider type="vertical" />}
+
+            {!menuDisabledItems.includes('power') && (
+              <>
+                <Power />
+                <Divider type="vertical" />
+              </>
+            )}
+
+            <Settings />
+            <Fullscreen />
+
+            <div
+              className="mr-1 flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700 hover:text-white"
+              onClick={() => setIsMenuOpen((o) => !o)}
+            >
+              <XIcon size={20} />
+            </div>
           </div>
+
+          {!isMenuOpen && (
+            <div
+              className="flex h-[30px] w-[50px] items-center justify-center rounded bg-neutral-800/50 text-white/50 hover:bg-neutral-800 hover:text-white"
+              onClick={() => setIsMenuOpen((o) => !o)}
+            >
+              <MenuIcon />
+            </div>
+          )}
         </div>
-
-        {!isMenuOpen && (
-          <div
-            className="flex h-[30px] w-[50px] items-center justify-center rounded bg-neutral-800/50 text-white/50 hover:bg-neutral-800 hover:text-white"
-            onClick={() => setIsMenuOpen((o) => !o)}
-          >
-            <MenuIcon />
-          </div>
-        )}
       </div>
-    </div>
+    </Draggable>
   );
 };