diff --git a/package.json b/package.json
index 465493a..86892ce 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "sharp-ico": "0.1.5"
   },
   "dependencies": {
+    "@neodrag/svelte": "^2.2.0",
     "@svelte-put/shortcut": "^4.0.0",
     "@tauri-apps/api": "^2.1.1",
     "@tauri-apps/plugin-dialog": "^2.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c803a2..aec3137 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@neodrag/svelte':
+        specifier: ^2.2.0
+        version: 2.2.0
       '@svelte-put/shortcut':
         specifier: ^4.0.0
         version: 4.0.0(svelte@5.3.0)
@@ -938,6 +941,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@neodrag/svelte@2.2.0':
+    resolution: {integrity: sha512-ZUgf9hFMJPN2fG9jFeECv6XebVYjGQ845vORSWwSmpkhmFM9tslWNZ/DfsSXcybBxhulkN9GC0A+bgXRQsDhdA==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -5052,6 +5058,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@neodrag/svelte@2.2.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index 2b22626..4d80a69 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-  import type { Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
   import * as Dialog from './index.js';
   import { cn } from '@/utils.js';
   import Close from '@/components/icons/Close.svelte';
+  import { draggable } from '@neodrag/svelte';
 
   let {
     ref = $bindable(null),
@@ -15,6 +16,16 @@
     portalProps?: DialogPrimitive.PortalProps;
     children: Snippet;
   } = $props();
+
+  $effect(() => {
+    if (ref)
+      draggable(ref, {
+        handle: '.drag-handle',
+        bounds: 'body',
+        defaultClassDragging: 'duration-0',
+        applyUserSelectHack: true
+      });
+  });
 </script>
 
 <Dialog.Portal {...portalProps}>
@@ -27,6 +38,8 @@
     )}
     {...restProps}
   >
+    <div class="drag-handle absolute h-12 w-full"></div>
+
     {@render children?.()}
     <DialogPrimitive.Close
       class="absolute right-5 top-5 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index 34ec36a..a57f102 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -12,7 +12,7 @@
 <DialogPrimitive.Overlay
   bind:ref
   class={cn(
-    'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+    'fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
     className
   )}
   {...restProps}