diff --git a/src/components/calibration/CalibrationCanvas.vue b/src/components/calibration/CalibrationCanvas.vue
new file mode 100644
index 0000000..f4049e8
--- /dev/null
+++ b/src/components/calibration/CalibrationCanvas.vue
@@ -0,0 +1,121 @@
+<template>
+  <canvas id="calibration-canvas" style="z-index: 0;" />
+</template>
+
+<script>
+export default {
+  name: 'CalibrationCanvas',
+  props: {
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFFFF'
+    },
+    pointColor: {
+      type: String,
+      default: '#000000FF'
+    },
+    radius: {
+      type: Number,
+      required: true
+    },
+    innerCircleRadius: {
+      type: Number,
+      default: 5
+    },
+    animationFrames: {
+      type: Number,
+      default: 250
+    },
+    animationRefreshRate: {
+      type: Number,
+      default: 10
+    }
+  },
+  mounted() {
+    this.resizeCanvas();
+    window.addEventListener('resize', this.resizeCanvas);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeCanvas);
+  },
+  methods: {
+    resizeCanvas() {
+      const canvas = document.getElementById('calibration-canvas');
+      if (canvas) {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+      }
+    },
+    clearCanvas() {
+      const canvas = document.getElementById('calibration-canvas');
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    },
+    drawPoint(x, y, currentRadius) {
+      const canvas = document.getElementById('calibration-canvas');
+      if (!canvas) return;
+      
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      
+      // Fill background
+      ctx.fillStyle = this.backgroundColor;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      
+      // Draw main circle 
+      ctx.beginPath();
+      ctx.strokeStyle = this.pointColor;
+      ctx.fillStyle = this.pointColor;
+      ctx.arc(x, y, currentRadius, 0, Math.PI * 2, false);
+      ctx.stroke();
+      ctx.fill();
+      
+      // Draw inner red dot
+      ctx.beginPath();
+      ctx.strokeStyle = "red";
+      ctx.fillStyle = "red";
+      ctx.arc(x, y, this.innerCircleRadius, 0, Math.PI * 2, false);
+      ctx.stroke();
+      ctx.fill();
+      
+      // Draw hollow circumference representing maximum radius
+      ctx.strokeStyle = this.pointColor;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(x, y, this.radius, 0, 2 * Math.PI, false);
+      ctx.stroke();
+    },
+    async triggerAnimation(origin, target) {
+      const frames = this.animationFrames;
+      const deltaX = (target.x - origin.x) / frames;
+      const deltaY = (target.y - origin.y) / frames;
+
+      for (let d = 1; d <= frames; d++) {
+        const xPosition = origin.x + deltaX * d;
+        const yPosition = origin.y + deltaY * d;
+        
+        if (d === frames) {
+          this.drawPoint(xPosition, yPosition, 1);
+        } else {
+          // Shrink radius as it moves
+          const currentRadius = (this.radius / frames) * (frames - d);
+          this.drawPoint(xPosition, yPosition, currentRadius);
+        }
+        await new Promise(resolve => setTimeout(resolve, this.animationRefreshRate));
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+#calibration-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none; /* Let clicks pass through to UI underneath if needed */
+}
+</style>
diff --git a/src/components/calibration/WebcamManager.vue b/src/components/calibration/WebcamManager.vue
new file mode 100644
index 0000000..db097bf
--- /dev/null
+++ b/src/components/calibration/WebcamManager.vue
@@ -0,0 +1,91 @@
+<template>
+  <video 
+    id="video-tag" 
+    autoplay 
+    playsinline
+    style="display: none;"
+    @loadedmetadata="onMetadataLoaded"
+  ></video>
+</template>
+
+<script>
+export default {
+  name: 'WebcamManager',
+  data() {
+    return {
+      recordWebCam: null,
+      webcamfile: null,
+      configWebCam: {
+        audio: false,
+        video: true
+      }
+    }
+  },
+  beforeDestroy() {
+    this.stopWebCamCapture();
+  },
+  methods: {
+    async startWebCamCapture() {
+      try {
+        const mediaStreamObj = await navigator.mediaDevices.getUserMedia(this.configWebCam);
+        
+        // Create media recorder object
+        this.recordWebCam = new MediaRecorder(mediaStreamObj, {
+          mimeType: "video/webm;",
+        });
+
+        let recordingWebCam = [];
+        let video = document.getElementById("video-tag");
+        video.srcObject = mediaStreamObj;
+        
+        // Save frames to recordingWebCam array
+        this.recordWebCam.ondataavailable = (ev) => {
+          recordingWebCam.push(ev.data);
+        };
+        
+        // OnStop WebCam Record
+        this.recordWebCam.onstop = () => {
+          // Generate blob from the frames
+          let blob = new Blob(recordingWebCam, { type: "video/webm" });
+          recordingWebCam = [];
+          this.webcamfile = { blob: blob, name: mediaStreamObj.id };
+          
+          // End webcam capture
+          mediaStreamObj.getTracks().forEach((track) => track.stop());
+          this.$emit('capture-stopped', this.webcamfile);
+        };
+
+        // Init record webcam
+        this.recordWebCam.start();
+        return true;
+      } catch (e) {
+        console.error("Error starting webcam:", e);
+        this.$emit('error', e);
+        return false;
+      }
+    },
+    
+    async onMetadataLoaded() {
+      // Additional wait to ensure video renders properly
+      await new Promise(resolve => setTimeout(resolve, 200));
+      const video = document.getElementById("video-tag");
+      if (video && video.videoWidth > 0 && video.videoHeight > 0) {
+        this.$emit('video-ready', video);
+      }
+    },
+
+    async stopRecord() {
+      if (!this.recordWebCam) return;
+      if (this.recordWebCam.state !== "inactive") {
+        await this.stopWebCamCapture();
+      }
+    },
+
+    async stopWebCamCapture() {
+      if (this.recordWebCam && this.recordWebCam.state !== 'inactive') {
+        this.recordWebCam.stop();
+      }
+    }
+  }
+}
+</script>
diff --git a/src/services/ml/FaceDetector.js b/src/services/ml/FaceDetector.js
new file mode 100644
index 0000000..f032fa5
--- /dev/null
+++ b/src/services/ml/FaceDetector.js
@@ -0,0 +1,85 @@
+class FaceDetector {
+  constructor(model) {
+    this.model = model;
+  }
+
+  /**
+   * Estimates the face landmarks from a given video element.
+   * Includes defensive checking for video readiness.
+   * 
+   * @param {HTMLVideoElement} videoElement The video element to analyze
+   * @returns {Promise<Array>} The prediction array from TensorFlow
+   */
+  async detectFace(videoElement) {
+    if (!this.model) {
+      throw new Error("TensorFlow Face Landmarks Model not loaded.");
+    }
+
+    if (!videoElement || videoElement.videoWidth === 0 || videoElement.videoHeight === 0) {
+      console.warn('FaceDetector: Video not ready or has 0 dimensions.');
+      // Return null rather than hanging or looping internally, letting the caller retry
+      return null;
+    }
+
+    try {
+      const predictions = await this.model.estimateFaces({
+        input: videoElement,
+      });
+      return predictions;
+    } catch (error) {
+      console.error("FaceDetector: Error estimating faces", error);
+      return null;
+    }
+  }
+
+  /**
+   * Helper utility to safely extract exact iris and eyelid data
+   * and detect blinks.
+   * 
+   * @param {Object} prediction A single face prediction object from the model
+   * @param {Number} leftEyeThreshold 
+   * @param {Number} rightEyeThreshold 
+   * @returns {Object|null} Formatted prediction data or null if invalid/blinking
+   */
+  processPrediction(prediction, leftEyeThreshold, rightEyeThreshold) {
+    if (!prediction || !prediction.annotations || !prediction.annotations.leftEyeIris || !prediction.annotations.rightEyeIris) {
+      return null;
+    }
+
+    const annotations = prediction.annotations;
+
+    // left eye
+    const leftIris = annotations.leftEyeIris;
+    const leftEyelid = annotations.leftEyeUpper0.concat(annotations.leftEyeLower0);
+    const leftEyelidTip = leftEyelid[3];
+    const leftEyelidBottom = leftEyelid[11];
+    const leftDistance = this._calculateDistance(leftEyelidTip, leftEyelidBottom);
+    const isLeftBlink = leftDistance < leftEyeThreshold;
+
+    // right eye
+    const rightIris = annotations.rightEyeIris;
+    const rightEyelid = annotations.rightEyeUpper0.concat(annotations.rightEyeLower0);
+    const rightEyelidTip = rightEyelid[3];
+    const rightEyelidBottom = rightEyelid[11];
+    const rightDistance = this._calculateDistance(rightEyelidTip, rightEyelidBottom);
+    const isRightBlink = rightDistance < rightEyeThreshold;
+
+    if (isLeftBlink || isRightBlink) {
+      return { isBlinking: true };
+    }
+
+    return {
+      isBlinking: false,
+      leftIris: leftIris[0],
+      rightIris: rightIris[0]
+    };
+  }
+
+  _calculateDistance(point1, point2) {
+    const xDistance = point2[0] - point1[0];
+    const yDistance = point2[1] - point1[1];
+    return Math.sqrt(xDistance * xDistance + yDistance * yDistance);
+  }
+}
+
+export default FaceDetector;
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index 22c7adb..542c9e8 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -250,28 +250,38 @@
         </v-stepper>
       </v-card>
     </v-dialog>
-    <canvas id="canvas" style="z-index: 0;" />
-    <video autoplay id="video-tag" style="display: none;"></video>
+    <calibration-canvas
+      ref="calibrationCanvas"
+      :background-color="backgroundColor"
+      :point-color="pointColor"
+      :radius="radius"
+      :inner-circle-radius="innerCircleRadius"
+      :animation-frames="animationFrames"
+      :animation-refresh-rate="animationRefreshRate"
+    />
+    <webcam-manager
+      ref="webcamManager"
+      @video-ready="onVideoReady"
+      @capture-stopped="onCaptureStopped"
+      @error="onWebcamError"
+    />
   </div>
 </template>
 
 <script>
 import axios from 'axios';
 import { envConfig } from '../config/environment';
-
+import CalibrationCanvas from '@/components/calibration/CalibrationCanvas.vue';
+import WebcamManager from '@/components/calibration/WebcamManager.vue';
+import FaceDetector from '@/services/ml/FaceDetector';
 
 export default {
-
+  components: {
+    CalibrationCanvas,
+    WebcamManager
+  },
   data() {
     return {
-      // camera
-      webcamfile: null,
-      recordWebCam: null,
-      configWebCam: {
-        audio: false,
-        video: true
-      },
-
       // calibration
       circleIrisPoints: [],
       calibPredictionPoints: [],
@@ -293,6 +303,8 @@ export default {
       fullscreenRequiredDialog: false,
       navigationBlockedDialog: false,
       finishingCalibration: false,
+      
+      faceDetectorService: null,
     };
   },
   computed: {
@@ -353,10 +365,25 @@ export default {
       this.$store.commit('setMockPattern', generatedPattern)
       this.usedPattern = generatedPattern
 
+    // Initialize Face Detector when model is ready from Vuex
+    if (this.model) {
+      this.faceDetectorService = new FaceDetector(this.model);
     }
-    await this.startWebCamCapture();
+    
+    // Start webcam natively via component ref
+    this.$nextTick(async () => {
+      if(this.$refs.webcamManager) {
+        await this.$refs.webcamManager.startWebCamCapture();
+      }
+    });
+    
     console.log("chamou drawPoint no created com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
-    this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
+    // Draw initial point when component ready
+    this.$nextTick(() => {
+      if(this.$refs.calibrationCanvas) {
+        this.$refs.calibrationCanvas.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1);
+      }
+    });
     this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
     console.log("UsedPattern inteiro", this.usedPattern);
 
@@ -600,15 +627,17 @@ export default {
             i++
 
             if (i < pattern.length) {
-              await th.triggerAnimation(pattern[i - 1], pattern[i], this.animationRefreshRate)
+              if (th.$refs.calibrationCanvas) {
+                await th.$refs.calibrationCanvas.triggerAnimation(pattern[i - 1], pattern[i]);
+              }
               document.addEventListener('keydown', keydownHandler)
             } else {
               // Completed all points - finalize
               th.$store.commit('setIndex', i)
               th.savePoint(whereToSave, th.usedPattern)
-              const canvas = document.getElementById('canvas');
-              const ctx = canvas.getContext('2d');
-              ctx.clearRect(0, 0, canvas.width, canvas.height)
+              if (th.$refs.calibrationCanvas) {
+                th.$refs.calibrationCanvas.clearCanvas();
+              }
               // Show stepper at step 3 (validation) or step 4 (completion)
               if (th.currentStep === 1) {
                 th.nextStep();
@@ -634,8 +663,24 @@ export default {
 
       console.log("nextStep rodou drawPoint com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
 
-      this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
-      this.advance(this.usedPattern, this.calibPredictionPoints, this.msPerCapture)
+      if (this.$refs.calibrationCanvas) {
+        this.$refs.calibrationCanvas.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1);
+      }
+    async onVideoReady(videoElement) {
+      if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
+        // Just verify detector works, extraction triggered by "S" key
+        if(this.faceDetectorService) {
+          const prediction = await this.faceDetectorService.detectFace(videoElement);
+          if (prediction && prediction.length > 0) this.faceDetected = true;
+        }
+      }
+    },
+    onCaptureStopped(webcamfile) {
+      console.log("Webcam capture stopped.");
+      // Could push to Vuex or handle upload here if needed
+    },
+    onWebcamError(error) {
+      console.error("Failed to initialize webcam:", error);
     },
     async extract(point, timeBetweenCaptures) {
       point.data = [];
@@ -643,50 +688,49 @@ export default {
         if (!this.isFullscreen()) {
           throw new Error("fullscreen_required");
         }
-        const prediction = await this.detectFace();
+        
+        // Lazy initialize face detector here if it missed the computed watcher
+        if (!this.faceDetectorService && this.model) {
+          this.faceDetectorService = new FaceDetector(this.model);
+        }
+
+        const video = document.getElementById("video-tag");
+        const prediction = await this.faceDetectorService.detectFace(video);
 
-        // 🛡️ DEFENSIVE GUARD: Check if face is detected
-        // When user moves face out of frame, prediction array is empty
-        // This prevents crash: "Cannot read property 'annotations' of undefined"
         if (!prediction || prediction.length === 0) {
           this.faceDetected = false;
           console.warn('Face not detected. Waiting for face to return...');
           await new Promise(resolve => setTimeout(resolve, 500));
-          continue; // Skip this iteration and retry
+          continue;
         }
 
         this.faceDetected = true;
-        const pred = prediction[0];
-
-        // Additional safety check for required annotations
-        if (!pred.annotations || !pred.annotations.leftEyeIris || !pred.annotations.rightEyeIris) {
-          console.warn('Incomplete face landmarks detected. Retrying...');
+        const processedData = this.faceDetectorService.processPrediction(
+          prediction[0], 
+          this.leftEyeTreshold, 
+          this.rightEyeTreshold
+        );
+
+        if (!processedData) {
+          console.warn('Incomplete face landmarks. Retrying...');
           await new Promise(resolve => setTimeout(resolve, 500));
           continue;
         }
 
-        // left eye
-        const leftIris = pred.annotations.leftEyeIris;
-        const leftEyelid = pred.annotations.leftEyeUpper0.concat(pred.annotations.leftEyeLower0);
-        const leftEyelidTip = leftEyelid[3];
-        const leftEyelidBottom = leftEyelid[11];
-        const isLeftBlink = this.calculateDistance(leftEyelidTip, leftEyelidBottom) < this.leftEyeTreshold;
-        // right eye
-        const rightIris = pred.annotations.rightEyeIris;
-        const rightEyelid = pred.annotations.rightEyeUpper0.concat(pred.annotations.rightEyeLower0);
-        const rightEyelidTip = rightEyelid[3];
-        const rightEyelidBottom = rightEyelid[11];
-        const isRightBlink = this.calculateDistance(rightEyelidTip, rightEyelidBottom) < this.rightEyeTreshold;
-
-        if (isLeftBlink || isRightBlink) {
-          console.log('eyes closed, disconsidered');
-          // set timer so that when eyes open it doesnt select the unstable values
+        if (processedData.isBlinking) {
+          console.log('Eyes closed or blinking, ignored frame');
           await new Promise(resolve => setTimeout(resolve, 500));
         } else {
-          const newPrediction = { leftIris: leftIris[0], rightIris: rightIris[0] };
-          point.data.push(newPrediction);
-          const radius = (this.radius / this.predByPointCount) * a
-          this.drawPoint(point.x, point.y, radius)
+          // Success
+          point.data.push({ 
+            leftIris: processedData.leftIris, 
+            rightIris: processedData.rightIris 
+          });
+          
+          const currentRadius = (this.radius / this.predByPointCount) * a
+          if (this.$refs.calibrationCanvas) {
+            this.$refs.calibrationCanvas.drawPoint(point.x, point.y, currentRadius);
+          }
           a++;
         }
         await new Promise(resolve => setTimeout(resolve, timeBetweenCaptures));
@@ -715,52 +759,6 @@ export default {
       const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
       return distance;
     },
-    drawPoint(x, y, radius) {
-      const canvas = document.getElementById('canvas');
-
-      console.log('Window size:', window.innerWidth, 'x', window.innerHeight);
-
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight
-      const ctx = canvas.getContext('2d');
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.fillStyle = this.backgroundColor;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      //circle 
-      ctx.beginPath();
-      ctx.strokeStyle = this.pointColor;
-      ctx.fillStyle = this.pointColor;
-      ctx.arc(
-        x,
-        y,
-        radius,
-        0,
-        Math.PI * 2,
-        false
-      );
-      ctx.stroke();
-      ctx.fill();
-      // inner circle
-      ctx.beginPath();
-      ctx.strokeStyle = "red";
-      ctx.fillStyle = "red";
-      ctx.arc(
-        x,
-        y,
-        this.innerCircleRadius,
-        0,
-        Math.PI * 2,
-        false
-      );
-      ctx.stroke();
-      ctx.fill();
-      // hollow circumference
-      ctx.strokeStyle = this.pointColor;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.arc(x, y, this.radius, 0, 2 * Math.PI, false);
-      ctx.stroke();
-    },
     async endCalib() {
       if (this.finishingCalibration) return;
       this.finishingCalibration = true;
@@ -813,7 +811,9 @@ export default {
         fromRuxailab: this.fromRuxailab,
       })
 
-      await this.stopRecord()
+      if (this.$refs.webcamManager) {
+        await this.$refs.webcamManager.stopRecord();
+      }
       this.calibFinished = true
 
       this.$router.push(
@@ -835,56 +835,6 @@ export default {
         });
       });
     },
-    // canvas related
-    async startWebCamCapture() {
-      // Request permission for screen capture
-
-      return navigator.mediaDevices
-        .getUserMedia(this.configWebCam)
-        .then(async (mediaStreamObj) => {
-          // Create media recorder object
-          this.recordWebCam = new MediaRecorder(mediaStreamObj, {
-            mimeType: "video/webm;",
-          });
-
-          let recordingWebCam = [];
-          let video = document.getElementById("video-tag");
-          video.srcObject = mediaStreamObj;
-          // Define screen capture events
-          // Save frames to recordingWebCam array
-          this.recordWebCam.ondataavailable = (ev) => {
-            recordingWebCam.push(ev.data);
-          };
-          // OnStop WebCam Record
-          const th = this;
-
-          this.recordWebCam.onstop = () => {
-            // Generate blob from the frames
-            let blob = new Blob(recordingWebCam, { type: "video/webm" });
-            recordingWebCam = [];
-            const uploadMediaWebCam = { blob: blob, name: mediaStreamObj.id };
-            th.webcamfile = uploadMediaWebCam;
-            // End webcam capture
-            mediaStreamObj.getTracks().forEach((track) => track.stop());
-            th.stopRecord();
-          };
-
-          // Init record webcam
-          this.recordWebCam.start();
-          
-          // Wait for video to be fully ready with proper dimensions
-          video.onloadedmetadata = async () =>{
-            // Additional wait to ensure video renders properly
-            await new Promise(resolve => setTimeout(resolve, 200));
-            if (video.videoWidth > 0 && video.videoHeight > 0) {
-              this.detectFace();
-            }
-          }
-        })
-        .catch((e) => {
-          console.error("Error", e);
-        });
-    },
 
     async verifyFromRuxailab() {
       const urlParams = new URLSearchParams(window.location.search);
@@ -908,35 +858,6 @@ export default {
       this.loadingConfig = false;
     },
 
-    async detectFace() {
-      const video = document.getElementById("video-tag");
-      
-      // Ensure video has valid dimensions before processing
-      if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
-        console.warn('Video not ready yet, waiting...');
-        // Wait a bit and try again
-        await new Promise(resolve => setTimeout(resolve, 100));
-        return this.detectFace(); // Retry
-      }
-      
-      const lastPrediction = await this.model.estimateFaces({
-        input: video,
-      });
-      return lastPrediction
-    },
-
-    async stopRecord() {
-      if (!this.recordWebCam) return;
-      if (this.recordWebCam.state != "inactive") {
-        await this.stopWebCamCapture();
-      }
-    },
-
-    async stopWebCamCapture() {
-      await this.recordWebCam.stop();
-      this.calibFinished = true;
-    },
-
     generateRuntimePattern() {
       const width = window.innerWidth
       const height = window.innerHeight