diff --git a/src/data/handTrackingConfig.ts b/src/data/handTrackingConfig.ts
index 5133463..9537124 100644
--- a/src/data/handTrackingConfig.ts
+++ b/src/data/handTrackingConfig.ts
@@ -1,5 +1,11 @@
 export const HAND_TRACKING_FRAME_WIDTH = 320;
 export const HAND_TRACKING_FRAME_HEIGHT = 240;
+// The browser MediaPipe model (hand_landmarker.task float16) is more
+// sensitive than the backend Python model and needs a higher-resolution
+// frame to detect hands reliably. The backend keeps 320x240 because that
+// is the JPEG payload size sent over the WebSocket.
+export const HAND_TRACKING_BROWSER_CAMERA_WIDTH = 640;
+export const HAND_TRACKING_BROWSER_CAMERA_HEIGHT = 480;
 export const HAND_TRACKING_TARGET_FPS = 10;
 export const HAND_TRACKING_JPEG_QUALITY = 0.55;
 export const HAND_TRACKING_CAMERA_TIMEOUT_MS = 8_000;
diff --git a/src/hooks/handTracking/useBrowserHandTracking.ts b/src/hooks/handTracking/useBrowserHandTracking.ts
index 285fa2f..9364dcf 100644
--- a/src/hooks/handTracking/useBrowserHandTracking.ts
+++ b/src/hooks/handTracking/useBrowserHandTracking.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import {
-  HAND_TRACKING_FRAME_HEIGHT,
-  HAND_TRACKING_FRAME_WIDTH,
+  HAND_TRACKING_BROWSER_CAMERA_HEIGHT,
+  HAND_TRACKING_BROWSER_CAMERA_WIDTH,
   HAND_TRACKING_RUNTIME_START_DELAY_MS,
   HAND_TRACKING_TARGET_FPS,
 } from "@/data/handTrackingConfig";
@@ -66,8 +66,8 @@ export function useBrowserHandTracking({
       try {
         const stream = await getCameraStreamWithTimeout({
           video: {
-            width: HAND_TRACKING_FRAME_WIDTH,
-            height: HAND_TRACKING_FRAME_HEIGHT,
+            width: HAND_TRACKING_BROWSER_CAMERA_WIDTH,
+            height: HAND_TRACKING_BROWSER_CAMERA_HEIGHT,
             facingMode: "user",
           },
           audio: false,