diff --git a/classes/class03/lib/shared/camera.js b/classes/class03/lib/shared/camera.js
index dc9e3f0..49624ca 100644
--- a/classes/class03/lib/shared/camera.js
+++ b/classes/class03/lib/shared/camera.js
@@ -1,10 +1,12 @@
+export const extraHorizontalCaptureAreaInPixels = 600
+
 export default class Camera {
   constructor() {
     this.video = document.createElement('video')
   }
 
   static async init() {
-    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
       throw new Error(
         `Browser API navigator.mediaDevices.getUserMedia not available`
       )
@@ -12,11 +14,12 @@ export default class Camera {
     const videoConfig = {
       audio: false,
       video: {
-        width: globalThis.screen.availWidth,
+        width: globalThis.screen.availWidth + extraHorizontalCaptureAreaInPixels,
         height: globalThis.screen.availHeight,
         frameRate: {
           ideal: 60
-        }
+        },
+        transform: `translate(-${extraHorizontalCaptureAreaInPixels}px)`
       }
     }
     const stream = await navigator.mediaDevices.getUserMedia(videoConfig)
diff --git a/classes/class03/pages/titles/src/controllers/handGestureController.js b/classes/class03/pages/titles/src/controllers/handGestureController.js
index cf93727..4b8b9b9 100644
--- a/classes/class03/pages/titles/src/controllers/handGestureController.js
+++ b/classes/class03/pages/titles/src/controllers/handGestureController.js
@@ -1,4 +1,5 @@
-import { prepareRunChecker } from "../../../../lib/shared/util.js"
+import { prepareRunChecker } from '../../../../lib/shared/util.js'
+import { extraHorizontalCaptureAreaInPixels } from '../../../../lib/shared/camera.js'
 
 const { shouldRun: scrollShouldRun } = prepareRunChecker({ timerDelay: 200 })
 const { shouldRun: clickShouldRun } = prepareRunChecker({ timerDelay: 300 })
@@ -46,7 +47,7 @@ export default class HandGestureController {
       for await (const { event, x, y } of this.#service.detectGestures(hands)) {
         if (event === 'click') {
           if (!clickShouldRun()) continue
-          this.#view.clickOnElement(x, y)
+          this.#view.clickOnElement(x - extraHorizontalCaptureAreaInPixels / 2, y)
 
           continue
         }
diff --git a/classes/class03/pages/titles/src/views/handGestureView.js b/classes/class03/pages/titles/src/views/handGestureView.js
index 4f7cabe..a631866 100644
--- a/classes/class03/pages/titles/src/views/handGestureView.js
+++ b/classes/class03/pages/titles/src/views/handGestureView.js
@@ -1,11 +1,14 @@
+import { extraHorizontalCaptureAreaInPixels } from '../../../../../lib/shared/camera.js'
+
 export default class HandGestureView {
   #handsCanvas = document.querySelector('#hands')
   #canvasContext = this.#handsCanvas.getContext('2d')
   #fingerLookupIndexes
   constructor({ fingerLookupIndexes }) {
-    this.#handsCanvas.width = globalThis.screen.availWidth
+    this.#handsCanvas.width = globalThis.screen.availWidth + extraHorizontalCaptureAreaInPixels
     this.#handsCanvas.height = globalThis.screen.availHeight
     this.#fingerLookupIndexes = fingerLookupIndexes
+    this.#handsCanvas.style.transform = `translate(-${extraHorizontalCaptureAreaInPixels / 2}px)`
   }
 
   clearCanvas() {
@@ -27,11 +30,11 @@ export default class HandGestureView {
       this.#drawFingersAndHoverElements(keypoints)
     }
   }
-  
+
   clickOnElement(x, y) {
     const element = document.elementFromPoint(x, y)
-    if(!element) return;
-    
+    if (!element) return;
+
     const rect = element.getBoundingClientRect()
     const event = new MouseEvent('click', {
       view: window,
@@ -67,7 +70,7 @@ export default class HandGestureView {
       // [0] é a palma da mao (wrist)
       const [{ x, y }] = points
       region.moveTo(x, y)
-      for(const point of points) {
+      for (const point of points) {
         region.lineTo(point.x, point.y)
       }
       this.#canvasContext.stroke(region)