diff --git a/apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar/index.tsx b/apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar/index.tsx
index 09a66e1c4a..e41bcd0250 100644
--- a/apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar/index.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar/index.tsx
@@ -62,6 +62,13 @@ export const TopBar = observer(
                 time: Date.now()
             };
 
+            // If the clicked frame is not selected and this is not a multiselect operation,
+            // select it first to ensure we drag the correct frame
+            if (!editorEngine.frames.isSelected(frame.id) && !e.shiftKey) {
+                editorEngine.frames.select([frame], false);
+            }
+
+            // Get the currently selected frames after potential selection update
             const selectedFrames = editorEngine.frames.selected.map(frameData => frameData.frame);
             const framesToMove = selectedFrames.length > 0 ? selectedFrames : [frame];
 
diff --git a/apps/web/client/src/components/store/editor/frames/manager.ts b/apps/web/client/src/components/store/editor/frames/manager.ts
index c3640d3c17..516e357e2b 100644
--- a/apps/web/client/src/components/store/editor/frames/manager.ts
+++ b/apps/web/client/src/components/store/editor/frames/manager.ts
@@ -79,11 +79,27 @@ export class FramesManager {
     }
 
     select(frames: Frame[], multiselect = false) {
+        if (!multiselect) {
+            this.deselectAll();
+            // Without multiselect, always ensure frames are selected
+            for (const frame of frames) {
+                this.updateFrameSelection(frame.id, true);
+            }
+        } else {
+            // With multiselect, toggle individual frames
+            for (const frame of frames) {
+                this.updateFrameSelection(frame.id, !this.isSelected(frame.id));
+            }
+        }
+        this.notify();
+    }
+
+    ensureSelected(frames: Frame[], multiselect = false) {
         if (!multiselect) {
             this.deselectAll();
         }
         for (const frame of frames) {
-            this.updateFrameSelection(frame.id, !this.isSelected(frame.id));
+            this.updateFrameSelection(frame.id, true);
         }
         this.notify();
     }
diff --git a/packages/file-system/src/fs.ts b/packages/file-system/src/fs.ts
index ee1073d8fc..545f9d5684 100644
--- a/packages/file-system/src/fs.ts
+++ b/packages/file-system/src/fs.ts
@@ -7,8 +7,14 @@
  */
 
 import type ZenFS from '@zenfs/core';
-import { getFS } from './config';
-import type { FileChangeEvent, FileEntry, FileInfo } from './types';
+import {
+    type FileChangeEvent,
+    type FileChangeEvent,
+    type FileEntry,
+    type FileEntry,
+    type FileInfo,
+    type FileInfo,
+} from './types';
 
 export class FileSystem {
     private fs: typeof ZenFS | null = null;
diff --git a/packages/file-system/src/hooks/useDirectory.ts b/packages/file-system/src/hooks/useDirectory.ts
index 3ef03a53eb..3b59ddf7d7 100644
--- a/packages/file-system/src/hooks/useDirectory.ts
+++ b/packages/file-system/src/hooks/useDirectory.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { useFS } from './useFS';
-import type { FileEntry } from '../types';
+import { useEffect, useState } from 'react';
+
+import { type FileEntry, type FileEntry } from '../types';
 
 export function useDirectory(rootDir: string, path: string) {
     const { fs, isInitializing, error: fsError } = useFS(rootDir);
diff --git a/packages/file-system/src/hooks/useFS.tsx b/packages/file-system/src/hooks/useFS.tsx
index ca98aec67c..c52d6ba90f 100644
--- a/packages/file-system/src/hooks/useFS.tsx
+++ b/packages/file-system/src/hooks/useFS.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
 import { FileSystem } from '../fs';
 
 export function useFS(rootDir: string) {
diff --git a/packages/file-system/src/hooks/useFile.ts b/packages/file-system/src/hooks/useFile.ts
index db1b897d63..5746e03321 100644
--- a/packages/file-system/src/hooks/useFile.ts
+++ b/packages/file-system/src/hooks/useFile.ts
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
+
 import { useFS } from './useFS';
 
 export function useFile(rootDir: string, path: string) {