diff --git a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
index 0db87d40a..9c1ccdde9 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
+++ b/src/components/image-editor/useImageCanvasStageInteractions.test.tsx
@@ -920,4 +920,52 @@ describe('useImageCanvasStageInteractions', () => {
     expect(flushMinimapViewportDrag).toHaveBeenCalledTimes(1);
     expect(onViewportInteractionEnd).toHaveBeenCalledTimes(2);
   });
+
+  it('allows middle-button dragging and rejects right-button dragging', () => {
+    render(<StageInteractionsHarness />);
+
+    const viewport = screen.getByTestId('viewport');
+
+    act(() => {
+      fireEvent(
+        viewport, 
+        new MouseEvent('pointerdown',{
+          bubbles: true,
+          clientX: 100,
+          clientY: 100,
+          button: 1,
+          buttons: 4,
+        }),
+      );
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('true');
+
+    act(() => {
+      fireEvent(
+        viewport, 
+        new MouseEvent('pointerup',{
+          bubbles: true,
+          clientX: 100,
+          clientY: 100,
+          button: 1,
+          buttons: 0,
+        }),
+      );
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('false');
+
+    act(() => {
+      fireEvent(
+        viewport, 
+        new MouseEvent('pointerdown',{
+          bubbles: true,
+          clientX: 100,
+          clientY: 100,
+          button: 2,
+          buttons: 2,
+        }),
+      );
+    });
+    expect(screen.getByTestId('panning').textContent).toBe('false');
+  });
 });
diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts
index 1b94876b2..5f19ae5d3 100644
--- a/src/components/image-editor/useImageCanvasStageInteractions.ts
+++ b/src/components/image-editor/useImageCanvasStageInteractions.ts
@@ -239,7 +239,7 @@ export function useImageCanvasStageInteractions({
   const handleCanvasPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       const button = getPointerButton(event);
-      if (button !== 0 || effectiveTool === 'hand') {
+      if (button === 1 ||(button !== 2 && effectiveTool === 'hand')) {
         startPan(event);
         return;
       }