diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d677e7b..f3b27c0 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -63,6 +63,12 @@ function DialogContent({
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[10000] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className,
         )}
+        onInteractOutside={(event) => {
+          const target = event.target as HTMLElement | null;
+          if (target?.closest('[data-window-drag-area="true"]')) {
+            event.preventDefault();
+          }
+        }}
         {...props}
       >
         {children}
diff --git a/src/components/window-drag-area.tsx b/src/components/window-drag-area.tsx
index 7879144..1378e4b 100644
--- a/src/components/window-drag-area.tsx
+++ b/src/components/window-drag-area.tsx
@@ -16,11 +16,11 @@ export function WindowDragArea() {
     checkPlatform();
   }, []);
 
-  const handleMouseDown = (e: React.MouseEvent) => {
-    // Only handle left mouse button
+  const handlePointerDown = (e: React.PointerEvent) => {
     if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
 
-    // Start dragging asynchronously
     const startDrag = async () => {
       try {
         const window = getCurrentWindow();
@@ -42,7 +42,8 @@ export function WindowDragArea() {
     <button
       type="button"
       className="fixed top-0 right-0 left-0 h-10 bg-transparent border-0 z-[9999] select-none"
-      onMouseDown={handleMouseDown}
+      data-window-drag-area="true"
+      onPointerDown={handlePointerDown}
       onContextMenu={(e) => {
         e.preventDefault();
         e.stopPropagation();