diff --git a/.gitignore b/.gitignore
index 499bd98..61ced85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Firebase config (local only)
+src/firebase.js
diff --git a/src/App.vue b/src/App.vue
index 23c43a1..fff870f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,3 +12,24 @@ export default {
   name: 'App',
 };
 </script>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  min-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Vuetify root fix */
+.v-application {
+  min-height: 100vh !important;
+}
+
+.v-main {
+  min-height: 100vh;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 219cc2f..90f89e6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,18 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import vuetify from './plugins/vuetify';
+import vuetify from './plugins/vuetify'
 import './services/axios'
 import firebase from 'firebase/app'
 import 'firebase/firestore'
 import { envConfig } from './config/environment'
 
-Vue.config.productionTip = false
-
 const firebaseConfig = envConfig.firebase;
 
-// Initialize Firebase
-firebase.initializeApp(firebaseConfig);
+
+Vue.config.productionTip = false
 
 new Vue({
   router,
diff --git a/src/mixins/CameraMixin.js b/src/mixins/CameraMixin.js
new file mode 100644
index 0000000..7a83db9
--- /dev/null
+++ b/src/mixins/CameraMixin.js
@@ -0,0 +1,139 @@
+/**
+ * CameraMixin — Reusable webcam / MediaRecorder logic.
+ *
+ * Extracted from DoubleCalibrationRecord.vue (Issue #112).
+ * Mix this into any Vue component that needs camera capture
+ * and face-detection support.
+ *
+ * Requirements for the host component:
+ *  - Must have a <video id="video-tag"> in its template (for ML inference).
+ *  - Must have a <video id="video-preview"> in its template (for UI display).
+ *  - Must provide `this.model` (the face-landmarks-detection model instance)
+ *    and `this.configWebCam` (getUserMedia constraints) via its own
+ *    data / computed / store.
+ */
+
+export default {
+    data() {
+        return {
+            /** @type {MediaRecorder|null} */
+            recordWebCam: null,
+            /** Blob + name of the recorded webcam video */
+            webcamfile: null,
+        };
+    },
+
+    methods: {
+        /**
+         * Request camera access, wire up MediaRecorder, and start recording.
+         * Resolves once the video element fires `loadeddata`.
+         */
+        async startWebCamCapture() {
+            try {
+                let mediaStreamObj;
+
+                try {
+                    // Try with ideal constraints first
+                    mediaStreamObj = await navigator.mediaDevices.getUserMedia(
+                        this.configWebCam,
+                    );
+                } catch (error) {
+                    console.warn(
+                        'Failed with ideal constraints, trying basic video:',
+                        error,
+                    );
+                    mediaStreamObj = await navigator.mediaDevices.getUserMedia({
+                        audio: false,
+                        video: true,
+                    });
+                }
+
+                // Create media recorder
+                this.recordWebCam = new MediaRecorder(mediaStreamObj, {
+                    mimeType: 'video/webm;',
+                });
+
+                let recordingWebCam = [];
+                const video = document.getElementById('video-tag'); // ML
+                const preview = document.getElementById('video-preview'); // UI
+
+                if (!video || !preview) {
+                    console.error('Video elements not found');
+                    return;
+                }
+
+                video.srcObject = mediaStreamObj;
+                preview.srcObject = mediaStreamObj;
+
+                // Save frames
+                this.recordWebCam.ondataavailable = (ev) => {
+                    recordingWebCam.push(ev.data);
+                };
+
+                // On stop → build blob
+                const self = this;
+                this.recordWebCam.onstop = () => {
+                    const blob = new Blob(recordingWebCam, { type: 'video/webm' });
+                    recordingWebCam = [];
+                    self.webcamfile = { blob, name: mediaStreamObj.id };
+                    mediaStreamObj.getTracks().forEach((track) => track.stop());
+                    self.stopRecord();
+                };
+
+                // Start recording
+                this.recordWebCam.start();
+
+                // Wait for video to be ready
+                return new Promise((resolve) => {
+                    video.onloadeddata = () => {
+                        this.detectFace();
+                        resolve();
+                    };
+                });
+            } catch (e) {
+                console.error('Error accessing webcam:', e);
+                alert(
+                    'Camera access is required for eye tracking. Please allow camera permissions and refresh the page.',
+                );
+                throw e;
+            }
+        },
+
+        /**
+         * Run face-landmark detection on the current video frame.
+         * Retries automatically if the video isn't ready yet.
+         *
+         * @returns {Promise<Array>} Face predictions from the model.
+         */
+        async detectFace() {
+            const video = document.getElementById('video-tag');
+
+            if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
+                console.warn('Video not ready yet, waiting...');
+                await new Promise((resolve) => setTimeout(resolve, 100));
+                return this.detectFace();
+            }
+
+            const lastPrediction = await this.model.estimateFaces({ input: video });
+            return lastPrediction;
+        },
+
+        /**
+         * Stop the MediaRecorder if it is still active.
+         */
+        async stopRecord() {
+            if (!this.recordWebCam) return;
+            if (this.recordWebCam.state !== 'inactive') {
+                await this.stopWebCamCapture();
+            }
+        },
+
+        /**
+         * Stop the MediaRecorder and mark calibration as finished.
+         */
+        async stopWebCamCapture() {
+            await this.recordWebCam.stop();
+            this.calibFinished = true;
+        },
+    },
+};
diff --git a/src/services/CalibrationCalculator.js b/src/services/CalibrationCalculator.js
new file mode 100644
index 0000000..09b9f35
--- /dev/null
+++ b/src/services/CalibrationCalculator.js
@@ -0,0 +1,170 @@
+/**
+ * CalibrationCalculator — Pure calibration math utilities.
+ *
+ * Extracted from DoubleCalibrationRecord.vue (Issue #112) so they
+ * can be unit-tested independently of the Vue component.
+ */
+
+/**
+ * Generate a calibration-point pattern for a given screen size.
+ *
+ * @param {number} pointCount  Number of calibration points (1-9).
+ * @param {number} width       Screen / viewport width in px.
+ * @param {number} height      Screen / viewport height in px.
+ * @param {number} offset      Margin from screen edge in px.
+ * @returns {{ x: number, y: number }[]}
+ */
+export function generateCalibrationPattern(pointCount, width, height, offset) {
+    const patterns = [];
+
+    switch (pointCount) {
+        case 1:
+            patterns.push({ x: width / 2, y: height / 2 });
+            break;
+
+        case 2:
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            break;
+
+        case 3:
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width / 2, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            break;
+
+        case 4:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 5:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: width / 2, y: height / 2 });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 6: {
+            const stepX6 = (width - 2 * offset) / 2;
+            const stepY6 = (height - 2 * offset) / 1;
+            for (let i = 0; i < 2; i++) {
+                for (let j = 0; j < 3; j++) {
+                    patterns.push({
+                        x: offset + j * stepX6,
+                        y: offset + i * stepY6,
+                    });
+                }
+            }
+            break;
+        }
+
+        case 7:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width / 2, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 8:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width / 2, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width / 2, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 9:
+        default: {
+            const cols = 3;
+            const rows = 3;
+            const usableWidth = width - 2 * offset;
+            const usableHeight = height - 2 * offset;
+            const stepX = usableWidth / (cols - 1);
+            const stepY = usableHeight / (rows - 1);
+
+            for (let i = 0; i < rows; i++) {
+                for (let j = 0; j < cols; j++) {
+                    patterns.push({
+                        x: offset + j * stepX,
+                        y: offset + i * stepY,
+                    });
+                }
+            }
+            break;
+        }
+    }
+
+    return patterns;
+}
+
+/**
+ * Generate a runtime calibration pattern based on screen dimensions.
+ *
+ * @param {Object} opts
+ * @param {boolean} opts.isSinglePointMode  Use centre-only pattern.
+ * @param {number}  opts.offset             Margin from screen edge.
+ * @param {number}  opts.pointNumber        Number of calibration points.
+ * @param {number}  [opts.width]            Viewport width  (default: window.innerWidth).
+ * @param {number}  [opts.height]           Viewport height (default: window.innerHeight).
+ * @returns {{ x: number, y: number }[]}
+ */
+export function generateRuntimePattern({
+    isSinglePointMode,
+    offset = 100,
+    pointNumber = 9,
+    width = window.innerWidth,
+    height = window.innerHeight,
+}) {
+    if (isSinglePointMode) {
+        return [{ x: width / 2, y: height / 2 }];
+    }
+
+    const points = pointNumber;
+    const minCols = 3;
+    const cols = Math.max(minCols, Math.round(Math.sqrt(points)));
+    const rows = Math.ceil(points / cols);
+
+    const usableWidth = width - 2 * offset;
+    const usableHeight = height - 2 * offset;
+
+    const stepX = usableWidth / (cols - 1);
+    const stepY = usableHeight / (rows - 1);
+
+    const pattern = [];
+
+    for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+            if (pattern.length < points) {
+                pattern.push({
+                    x: offset + j * stepX,
+                    y: offset + i * stepY,
+                });
+            }
+        }
+    }
+
+    return pattern;
+}
+
+/**
+ * Euclidean distance between two 2-D landmark points (arrays).
+ *
+ * @param {number[]} pointA  [x, y, …]
+ * @param {number[]} pointB  [x, y, …]
+ * @returns {number}
+ */
+export function calculateDistance(pointA, pointB) {
+    const dx = pointB[0] - pointA[0];
+    const dy = pointB[1] - pointA[1];
+    return Math.sqrt(dx * dx + dy * dy);
+}
diff --git a/src/store/calibration.js b/src/store/calibration.js
index beb8026..3c74c1f 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -2,6 +2,7 @@ import axios from 'axios';
 import firebase from 'firebase/app';
 import 'firebase/firestore';
 import router from '@/router';
+
 export default {
   state: {
     calibName: "",
@@ -23,6 +24,9 @@ export default {
     threshold: 200,
     calibrations: [],
     fromDashboard: false,
+    // New single-point calibration features
+    calibrationMode: 'multi-point', // 'multi-point' | 'single-point'
+    singlePointPosition: null, // Will be calculated as screen center
     runtime: {
       circleIrisPoints: [],
       calibPredictionPoints: [],
@@ -119,6 +123,22 @@ export default {
     setFromDashboard(state, newFromDashboard) {
       state.fromDashboard = newFromDashboard;
     },
+
+    // New single-point calibration mutations
+    setCalibrationMode(state, mode) {
+      state.calibrationMode = mode;
+      // If switching to single-point, set pointNumber to 1
+      if (mode === 'single-point') {
+        state.pointNumber = 1;
+      } else {
+        state.pointNumber = 9; // Default multi-point
+      }
+    },
+
+    setSinglePointPosition(state, position) {
+      state.singlePointPosition = position;
+    },
+
     setRuntimeData(state, payload) {
       state.runtime.circleIrisPoints = payload.circleIrisPoints;
       state.runtime.calibPredictionPoints = payload.calibPredictionPoints;
@@ -155,6 +175,9 @@ export default {
       state.threshold = 200;
       state.calibrations = [];
       state.fromDashboard = false;
+      // Reset single-point calibration properties
+      state.calibrationMode = 'multi-point';
+      state.singlePointPosition = null;
     },
   },
   actions: {
@@ -180,20 +203,29 @@ export default {
 
       return positions;
     },
-    async saveCalib(context) {
-      const state = context.state;
-      const db = firebase.firestore();
-      const calibrationData = { ...state };
-      delete calibrationData.calibrations;
+
+    // Generate single-point calibration pattern (center of screen)
+    generateSinglePointPattern({ commit }, { width, height }) {
+      const centerPoint = {
+        x: width / 2,
+        y: height / 2,
+      };
+
+      commit('setSinglePointPosition', centerPoint);
+      return [centerPoint];
+    },
+    async saveCalib({ state, dispatch }) {
       try {
-        const calibrationsCollection = db.collection("calibrations");
-        await calibrationsCollection.add(calibrationData);
-        console.log("Data successfully saved to calibrations collection!");
-        context.dispatch("getAllCalibs");
-      } catch (error) {
-        console.error("Error saving data to calibrations collection:", error);
+        const data = { ...state };
+        delete data.calibrations;
+
+        await firebase.firestore().collection("calibrations").add(data);
+        dispatch("getAllCalibs");
+      } catch (e) {
+        console.error("Save failed:", e);
       }
     },
+
     async finishCalibration({ state, dispatch }) {
       console.log("[Calibration] finishCalibration started");
 
@@ -217,7 +249,7 @@ export default {
       state.runtime.usedPattern.forEach((p) => {
         const data =
           predictions[p.x.toString().split(".")[0]][
-            p.y.toString().split(".")[0]
+          p.y.toString().split(".")[0]
           ];
 
         p.precision = Number(data.PrecisionSD).toFixed(2);
@@ -252,44 +284,59 @@ export default {
     },
     async getAllCalibs({ commit }) {
       try {
-        const db = firebase.firestore();
-        const calibrationsCollection = await db
+        const snapshot = await firebase
+          .firestore()
           .collection("calibrations")
           .get();
 
         const calibrations = [];
-        calibrationsCollection.forEach((doc) => {
-          var averageAccuracy = 0;
-          var averagePrecision = 0;
-          var data = doc.data();
-          data.pattern.forEach((element) => {
-            averageAccuracy += Number(element.accuracy);
-            averagePrecision += Number(element.precision);
-          });
-          data.averageAccuracy = averageAccuracy / data.pattern.length;
-          data.averagePrecision = averagePrecision / data.pattern.length;
+
+        snapshot.forEach((doc) => {
+          const data = doc.data();
+
+          let averageAccuracy = 0;
+          let averagePrecision = 0;
+
+          if (data.runtime?.usedPattern?.length) {
+            const total = data.runtime.usedPattern.length;
+
+            averageAccuracy =
+              data.runtime.usedPattern.reduce(
+                (sum, p) => sum + Number(p.accuracy || 0),
+                0
+              ) / total;
+
+            averagePrecision =
+              data.runtime.usedPattern.reduce(
+                (sum, p) => sum + Number(p.precision || 0),
+                0
+              ) / total;
+          }
+
           calibrations.push({
             id: doc.id,
-            model: doc.data().models,
             ...data,
+            averageAccuracy: Number(averageAccuracy.toFixed(2)),
+            averagePrecision: Number(averagePrecision.toFixed(2)),
           });
         });
 
         commit("setCalibrations", calibrations);
-      } catch (error) {
-        console.error("Error getting calibrations:", error);
-        throw error;
+      } catch (err) {
+        console.error("Error getting calibrations:", err);
       }
     },
     async deleteCalib({ dispatch }, calib) {
       try {
-        const db = firebase.firestore();
-        const calibrationsCollection = db.collection("calibrations");
-        await calibrationsCollection.doc(calib.id).delete();
+        await firebase
+          .firestore()
+          .collection("calibrations")
+          .doc(calib.id)
+          .delete();
+
         dispatch("getAllCalibs");
-      } catch (error) {
-        console.error("Error deleting calibration:", error);
-        return { success: false, message: "Failed to delete calibration" };
+      } catch (e) {
+        console.error("Delete failed:", e);
       }
     },
     async sendData(context, data) {
diff --git a/src/views/CameraConfiguration.vue b/src/views/CameraConfiguration.vue
index bd395db..02c28d1 100644
--- a/src/views/CameraConfiguration.vue
+++ b/src/views/CameraConfiguration.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="box">
+  <div id="box" style="min-height: 100vh; overflow-y: auto;">
     <Toolbar v-if="!fromRuxailab" />
 
     <!-- Fullscreen Required Modal -->
@@ -72,28 +72,16 @@
     </v-dialog>
 
     <v-container fluid>
-      <v-row justify="center" align="center" style="min-height: 100%">
+      <v-row justify="center" align="center">
         <v-col cols="12" md="10" lg="8" xl="6">
-          <v-stepper
-            v-model="setupStep"
-            elevation="0"
-            class="mx-auto compact-stepper"
-          >
+          <v-stepper v-model="setupStep" elevation="0" class="mx-auto compact-stepper">
             <v-stepper-header>
-              <v-stepper-step
-                :complete="setupStep > 1"
-                step="1"
-                color="#FF425A"
-              >
+              <v-stepper-step :complete="setupStep > 1" step="1" color="#FF425A">
                 Camera Setup
               </v-stepper-step>
               <v-divider></v-divider>
-              <v-stepper-step
-                :complete="setupStep > 2"
-                step="2"
-                color="#FF425A"
-              >
-                Preview & Calibration
+              <v-stepper-step :complete="setupStep > 2" step="2" color="#FF425A">
+                Preview &amp; Calibration
               </v-stepper-step>
             </v-stepper-header>
 
@@ -107,15 +95,10 @@
                     </div>
                     <v-alert color="#fff" dense class="mb-3">
                       <h4 class="mb-2 text-center">What will happen:</h4>
-                      <div
-                        class="text-left mx-auto"
-                        style="max-width: 400px; font-size: 16px"
-                      >
+                      <div class="text-left mx-auto" style="max-width: 400px; font-size: 16px">
                         <ul class="compact-list">
                           <li>The system will request camera permission</li>
-                          <li>
-                            Your webcam image will appear with a face guide
-                          </li>
+                          <li>Your webcam image will appear with a face guide</li>
                           <li>Position your face inside the mask overlay</li>
                           <li>Make sure both eyes are clearly visible</li>
                         </ul>
@@ -128,8 +111,7 @@
                       class="mx-auto"
                       style="max-width: 400px; font-size: 14px"
                     >
-                      <strong>Important:</strong> Please allow camera access
-                      when prompted.
+                      <strong>Important:</strong> Please allow camera access when prompted.
                     </v-alert>
                   </v-card-text>
                 </v-card>
@@ -144,11 +126,50 @@
               <!-- Step 2: Camera Preview -->
               <v-stepper-content step="2" class="compact-content">
                 <v-card flat>
+                  <!-- Calibration Mode Selection -->
+                  <v-card-text v-if="!fromRuxailab" class="pb-2 pt-2">
+                    <v-card outlined class="pa-3 mb-3">
+                      <v-card-title class="text-h6 pa-2">
+                        <v-icon left color="#FF425A">mdi-target</v-icon>
+                        Calibration Mode
+                      </v-card-title>
+                      <v-card-text class="pa-2">
+                        <v-radio-group v-model="calibrationMode" @change="updateCalibrationMode">
+                          <v-radio
+                            label="Multi-point (High Accuracy)"
+                            value="multi-point"
+                            color="#FF425A"
+                          >
+                            <template v-slot:label>
+                              <div>
+                                <strong>Multi-point (High Accuracy)</strong>
+                                <div class="text-caption text--secondary">
+                                  9 points across screen - Best accuracy for precise tracking
+                                </div>
+                              </div>
+                            </template>
+                          </v-radio>
+                          <v-radio
+                            label="Single-point (Quick Setup)"
+                            value="single-point"
+                            color="#FF425A"
+                          >
+                            <template v-slot:label>
+                              <div>
+                                <strong>Single-point (Quick Setup)</strong>
+                                <div class="text-caption text--secondary">
+                                  Center point only - Faster setup, lower accuracy
+                                </div>
+                              </div>
+                            </template>
+                          </v-radio>
+                        </v-radio-group>
+                      </v-card-text>
+                    </v-card>
+                  </v-card-text>
+
                   <!-- Blink Threshold Configuration -->
-                  <v-card-text
-                    v-if="!fromRuxailab"
-                    class="pb-1 pt-2 text-center"
-                  >
+                  <v-card-text v-if="!fromRuxailab" class="pb-1 pt-2 text-center">
                     <BlinkTresholdCard />
                   </v-card-text>
 
@@ -165,24 +186,17 @@
                         Camera Help
                       </v-btn>
                     </div>
-                    <div
-                      v-if="isModelLoaded"
-                      class="camera-wrapper mx-auto"
-                      style="max-height: 400px"
-                    >
-                      <video id="video-tag" autoplay playsinline />
-                      <canvas id="canvas" />
-                      <v-img
-                        v-if="isCameraOn"
-                        class="mask"
-                        src="@/assets/mask_desktop.svg"
+                    <div v-if="isModelLoaded" class="camera-wrapper mx-auto">
+                      <video
+                        id="video-tag"
+                        autoplay
+                        playsinline
+                        style="width: 100%; height: auto; transform: scaleX(-1); display: block;"
                       />
+                      <canvas id="canvas" />
+                      <v-img v-if="isCameraOn" class="mask" src="@/assets/mask_desktop.svg" />
                     </div>
-                    <div
-                      v-else
-                      class="loading-container"
-                      style="min-height: 300px"
-                    >
+                    <div v-else class="loading-container" style="min-height: 300px">
                       <v-progress-circular
                         :size="50"
                         :width="6"
@@ -243,6 +257,7 @@ export default {
       showCameraModal: false,
       showFullscreenModal: false,
       fullscreenError: "",
+      calibrationMode: 'multi-point',
     };
   },
   computed: {
@@ -283,6 +298,9 @@ export default {
     }
   },
   methods: {
+    updateCalibrationMode(mode) {
+      this.$store.commit('setCalibrationMode', mode);
+    },
     isFullscreen() {
       return !!(
         document.fullscreenElement ||
@@ -356,8 +374,6 @@ export default {
             audio: false,
             video: {
               deviceId: this.selectedMediaDevice,
-              width: 600,
-              height: 500,
             },
           })
           .then((stream) => {
@@ -371,8 +387,8 @@ export default {
             this.video.onloadeddata = () => {
               const canvas = document.getElementById("canvas");
 
-              canvas.width = this.video.videoWidth || 500;
-              canvas.height = this.video.videoHeight || 400;
+              canvas.width = this.video.videoWidth || 640;
+              canvas.height = this.video.videoHeight || 480;
 
               this.isCameraOn = true;
               this.detectFace();
@@ -386,7 +402,7 @@ export default {
       }
 
       const constraints = {
-        video: { deviceId: deviceId, width: 600, height: 500 },
+        video: { deviceId: deviceId },
         audio: false,
       };
 
@@ -400,7 +416,7 @@ export default {
           this.detectFace();
         };
       } catch (err) {
-        console.error("Erro ao acessar dispositivo de vídeo:", err);
+        console.error("Error accessing video device:", err);
       }
     },
     async detectFace() {
@@ -418,9 +434,11 @@ export default {
 
         this.$store.commit("setPredictions", prediction);
 
-        canvas.width = this.video.videoWidth || 500;
-        canvas.height = this.video.videoHeight || 400;
-        ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
+        canvas.width = this.video.videoWidth || 640;
+        canvas.height = this.video.videoHeight || 480;
+
+        // Clear the canvas to make it transparent
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
         const th = this;
 
@@ -536,6 +554,7 @@ export default {
 
 /* Compact Stepper Styles */
 .compact-stepper {
+  max-height: none;
   margin-bottom: 24px;
 }
 
@@ -561,7 +580,12 @@ export default {
 
 .compact-stepper {
   border-radius: 12px !important;
-  overflow: hidden !important;
+  overflow: visible !important;
+}
+
+/* Ensure stepper content isn't clipped */
+.v-stepper__content {
+  overflow: visible !important;
 }
 
 .compact-stepper .v-stepper__step__step {
@@ -607,35 +631,43 @@ export default {
 .camera-wrapper {
   position: relative;
   width: 100%;
-  max-width: 500px;
-  height: auto;
-  aspect-ratio: 5/4;
+  max-width: 800px;
   margin: 0 auto;
   border: 5px solid #ff425a;
   border-radius: 12px;
   overflow: hidden;
-}
-
-#video-tag,
-#canvas,
-.mask {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  background: #000;
 }
 
 #video-tag {
+  width: 100%;
+  height: auto;
   transform: scaleX(-1);
+  z-index: 1;
+  display: block;
+  max-height: none;
 }
 
 #canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   transform: scaleX(-1);
+  z-index: 2;
+  background: transparent;
+  pointer-events: none;
 }
 
 .mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
+  z-index: 3;
 }
 </style>
 
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index 22c7adb..41c7f08 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 100%;">
+  <div class="page-root">
     <!-- Fullscreen required during calibration -->
     <v-dialog v-model="fullscreenRequiredDialog" max-width="520" persistent>
       <v-card>
@@ -87,16 +87,26 @@
               <v-card flat>
                 <v-card-text class="text-center px-6 py-6">
                   <v-icon size="50" color="#FF425A" class="mb-4">mdi-eye-settings</v-icon>
-                  <h2 class="text-h4 font-weight-bold mb-4">Eye Tracking Calibration</h2>
+                  <h2 class="text-h4 font-weight-bold mb-4">{{ calibrationTitle }}</h2>
 
                   <v-alert color="#002D51" dark class="mb-4 text-left">
                     <div class="text-body-1">
-                      <p class="font-weight-bold mb-2">This calibration consists of two phases:</p>
-                      <ol class="pl-4">
-                        <li class="mb-1"><strong>Training Phase:</strong> The system learns your eye movement patterns
-                        </li>
-                        <li><strong>Validation Phase:</strong> The system verifies the calibration accuracy</li>
-                      </ol>
+                      <p class="font-weight-bold mb-2">{{ calibrationDescription }}</p>
+                      <div v-if="isSinglePointMode">
+                        <p class="mb-1"><strong>Single-Point Mode:</strong></p>
+                        <ul class="pl-4">
+                          <li>Quick setup with center screen point only</li>
+                          <li>Lower accuracy but faster calibration</li>
+                          <li>Good for quick testing or demos</li>
+                        </ul>
+                      </div>
+                      <div v-else>
+                        <p class="font-weight-bold mb-2">This calibration consists of two phases:</p>
+                        <ol class="pl-4">
+                          <li class="mb-1"><strong>Training Phase:</strong> The system learns your eye movement patterns</li>
+                          <li><strong>Validation Phase:</strong> The system verifies the calibration accuracy</li>
+                        </ol>
+                      </div>
                     </div>
                   </v-alert>
 
@@ -151,6 +161,7 @@
 
                   <v-alert color="#FF425A" dark dense class="text-center">
                     <strong>Total points to calibrate:</strong> {{ usedPattern.length }}
+                    <span v-if="isSinglePointMode"> (Center point only)</span>
                   </v-alert>
                 </v-card-text>
                 <v-card-actions class="justify-space-between px-6 pb-6">
@@ -250,26 +261,46 @@
         </v-stepper>
       </v-card>
     </v-dialog>
+    <video
+     id="video-preview"
+     autoplay
+     playsinline
+     muted
+     :style="videoPreviewStyle"
+     ></video>
+
     <canvas id="canvas" style="z-index: 0;" />
     <video autoplay id="video-tag" style="display: none;"></video>
   </div>
+  
 </template>
 
 <script>
 import axios from 'axios';
 import { envConfig } from '../config/environment';
+import {
+  generateCalibrationPattern,
+  generateRuntimePattern,
+  calculateDistance,
+} from '@/services/CalibrationCalculator';
+import CameraMixin from '@/mixins/CameraMixin';
 
 
 export default {
+  mixins: [CameraMixin],
 
   data() {
     return {
       // camera
-      webcamfile: null,
-      recordWebCam: null,
+      keydownHandlerRef: null,
       configWebCam: {
         audio: false,
-        video: true
+        video: {
+          width: { ideal: 1280, min: 640 },
+          height: { ideal: 720, min: 480 },
+          aspectRatio: { ideal: 16/9 },
+          facingMode: 'user'
+        }
       },
 
       // calibration
@@ -293,9 +324,31 @@ export default {
       fullscreenRequiredDialog: false,
       navigationBlockedDialog: false,
       finishingCalibration: false,
+      beforeUnloadHandlerRef: null,
     };
   },
   computed: {
+    videoPreviewStyle() {
+      if (this.calibrationStarted && !this.showStepper) {
+        // During calibration - hide the preview
+        return {
+          display: 'none'
+        };
+      } else {
+        // Normal preview mode - ensure proper aspect ratio and sizing
+        return {
+          width: '100%',
+          height: 'auto',
+          maxWidth: '600px',
+          maxHeight: '400px',
+          objectFit: 'contain', // Changed from 'cover' to 'contain' to show full video
+          borderRadius: '12px',
+          marginBottom: '16px',
+          display: 'block',
+          margin: '0 auto 16px auto' // Center the video
+        };
+      }
+    },
     radius() {
       return this.$store.state.calibration.radius
     },
@@ -335,36 +388,64 @@ export default {
     isControlled() {
       return this.$store.state.calibration.isControlled
     },
+    
+    // New single-point calibration computed properties
+    calibrationMode() {
+      return this.$store.state.calibration.calibrationMode;
+    },
+    isSinglePointMode() {
+      return this.calibrationMode === 'single-point';
+    },
+    calibrationTitle() {
+      return this.isSinglePointMode ? 'Single-Point Calibration' : 'Multi-Point Calibration';
+    },
+    calibrationDescription() {
+      return this.isSinglePointMode 
+        ? 'Quick calibration using center point only. Lower accuracy but faster setup.'
+        : 'High accuracy calibration using multiple points across the screen.';
+    },
   },
   async created() {
-    console.log("rodou created");
-    await this.verifyFromRuxailab()
-    this.$store.commit('setIndex', 0)
-    this.usedPattern = this.generateRuntimePattern()
+    try {
+      await this.verifyFromRuxailab()
+      this.$store.commit('setIndex', 0)
+      this.usedPattern = this.generateRuntimePattern()
 
-    if (this.usedPattern.length === 0) {
-      const width = window.innerWidth
-      const height = window.innerHeight
-      const offset = this.offset || 100
-      const pointCount = this.$store.state.calibration.pointNumber
+      if (this.usedPattern.length === 0) {
+        const width = window.innerWidth
+        const height = window.innerHeight
+        const offset = this.offset || 100
+        const pointCount = this.$store.state.calibration.pointNumber
 
-      const generatedPattern = this.generateCalibrationPattern(pointCount, width, height, offset)
+        const generatedPattern = this.generateCalibrationPattern(pointCount, width, height, offset)
 
-      this.$store.commit('setMockPattern', generatedPattern)
-      this.usedPattern = generatedPattern
+        this.$store.commit('setMockPattern', generatedPattern)
+        this.usedPattern = generatedPattern
+      }
 
-    }
-    await this.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)
-    this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
-    console.log("UsedPattern inteiro", this.usedPattern);
+      await this.startWebCamCapture();
+
+      // Wait for model to be loaded before drawing
+      if (!this.model) {
+        console.warn('Model not loaded yet, waiting...');
+        return;
+      }
 
+      this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
+      this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
+    } catch (error) {
+      console.error('Error during component initialization:', error);
+    }
   },
+
   mounted() {
-    document.addEventListener("fullscreenchange", this.onFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", this.onFullscreenChange);
-    window.addEventListener("beforeunload", this.onBeforeUnload);
+    // Handle window resize events
+    window.addEventListener('resize', this.handleResize);
+    // Track fullscreen changes
+    document.addEventListener('fullscreenchange', this.onFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', this.onFullscreenChange);
+    document.addEventListener('mozfullscreenchange', this.onFullscreenChange);
+    document.addEventListener('MSFullscreenChange', this.onFullscreenChange);
 
     this.applyCalibrationScrollLock();
 
@@ -372,14 +453,29 @@ export default {
       this.fullscreenRequiredDialog = true;
     }
   },
+
   beforeDestroy() {
-    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
-    document.removeEventListener("webkitfullscreenchange", this.onFullscreenChange);
-    window.removeEventListener("beforeunload", this.onBeforeUnload);
+    // Clean up event listeners
+    window.removeEventListener('resize', this.handleResize);
+    if (this.keydownHandlerRef) {
+      document.removeEventListener('keydown', this.keydownHandlerRef);
+    }
+    document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', this.onFullscreenChange);
+    document.removeEventListener('MSFullscreenChange', this.onFullscreenChange);
+    if (this.beforeUnloadHandlerRef) {
+      window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+    }
 
     this.removeCalibrationScrollLock();
   },
+
   beforeRouteLeave(to, from, next) {
+    this.exitFullscreen();
+    if (this.keydownHandlerRef) {
+      document.removeEventListener('keydown', this.keydownHandlerRef);
+    }
     if (this.calibrationStarted && !this.calibFinished && !this.finishingCalibration) {
       this.navigationBlockedDialog = true;
       next(false);
@@ -387,6 +483,7 @@ export default {
     }
     next();
   },
+
   methods: {
     applyCalibrationScrollLock() {
       const body = document.body;
@@ -416,20 +513,73 @@ export default {
         document.msFullscreenElement
       );
     },
-    requestFullscreen(element) {
-      const el = element || document.documentElement;
-      if (el.requestFullscreen) return el.requestFullscreen();
-      if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
-      if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
-      if (el.msRequestFullscreen) return el.msRequestFullscreen();
-      return Promise.reject(new Error("Fullscreen API not supported"));
+    handleResize() {
+      // Regenerate pattern for new screen size if needed
+      if (this.calibrationStarted) {
+        const canvas = document.getElementById('canvas');
+        if (canvas) {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        }
+      }
+    },
+    // Note: Fullscreen may be blocked on some mobile browsers (iOS Safari).
+    // Failure is safely ignored.
+    enterFullscreen() {
+      const canvas = document.getElementById('canvas');
+      const el = canvas || document.documentElement;
+
+      // Guard: fullscreen not supported
+      const requestFullscreen =
+        el.requestFullscreen ||
+        el.webkitRequestFullscreen ||
+        el.mozRequestFullScreen ||
+        el.msRequestFullscreen;
+
+      if (!requestFullscreen) {
+        console.warn('Fullscreen API not supported in this browser');
+        return;
+      }
+
+      if (!this.isFullscreen()) {
+        try {
+          requestFullscreen.call(el);
+          if (canvas) {
+            canvas.style.pointerEvents = 'auto';
+          }
+        } catch (err) {
+          console.warn('Fullscreen request failed:', err);
+        }
+      }
+    },
+    exitFullscreen() {
+      const exitFullscreenFn =
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.mozCancelFullScreen ||
+        document.msExitFullscreen;
+
+      const canvas = document.getElementById('canvas');
+      if (canvas) {
+        canvas.style.pointerEvents = 'none';
+      }
+
+      if (this.isFullscreen() && exitFullscreenFn) {
+        try {
+          exitFullscreenFn.call(document);
+        } catch (err) {
+          console.warn('Exit fullscreen failed:', err);
+        }
+      }
     },
     async requestFullscreenAndClose() {
       try {
-        await this.requestFullscreen(document.documentElement);
+        this.enterFullscreen();
       } catch (e) {
         // Keep dialog open; browser will show its own UI hints if blocked.
       }
+      // Small delay to let fullscreen engage
+      await new Promise(resolve => setTimeout(resolve, 200));
       if (this.isFullscreen()) {
         this.fullscreenRequiredDialog = false;
       }
@@ -440,127 +590,26 @@ export default {
         this.showStepper = true;
       }
     },
-    onBeforeUnload(e) {
-      if (this.calibrationStarted && !this.calibFinished) {
-        e.preventDefault();
-        e.returnValue = "";
-      }
-    },
     generateCalibrationPattern(pointCount, width, height, offset) {
-      const patterns = [];
-      
-      switch(pointCount) {
-        case 1:
-          // Center point only
-          patterns.push({ x: width/2, y: height/2 });
-          break;
-          
-        case 2:
-          // Left and right edges (horizontal coverage)
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          break;
-          
-        case 3:
-          // Horizontal line: left, center, right
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width/2, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          break;
-          
-        case 4:
-          // Four corners (optimal for 4-point calibration)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 5:
-          // Four corners + center (cross pattern)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: width/2, y: height/2 });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 6: {
-          // 3x2 rectangle pattern
-          const stepX6 = (width - 2 * offset) / 2;
-          const stepY6 = (height - 2 * offset) / 1;
-          for (let i = 0; i < 2; i++) {
-            for (let j = 0; j < 3; j++) {
-              patterns.push({
-                x: offset + j * stepX6,
-                y: offset + i * stepY6,
-              });
-            }
-          }
-          break;
-        }
-          
-        case 7:
-          // Partial 3x3 grid (strategic selection)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width/2, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 8:
-          // Partial 3x3 grid (without center)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width/2, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width/2, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 9:
-        default: {
-          // Full 3x3 grid (current working pattern)
-          const cols = 3;
-          const rows = 3;
-          const usableWidth = width - 2 * offset;
-          const usableHeight = height - 2 * offset;
-          const stepX = usableWidth / (cols - 1);
-          const stepY = usableHeight / (rows - 1);
-          
-          for (let i = 0; i < rows; i++) {
-            for (let j = 0; j < cols; j++) {
-              patterns.push({
-                x: offset + j * stepX,
-                y: offset + i * stepY,
-              });
-            }
-          }
-          break;
-        }
-      }
-      
-      return patterns;
+      return generateCalibrationPattern(pointCount, width, height, offset);
     },
     
     startTraining() {
-      if (!this.isFullscreen()) {
-        this.fullscreenRequiredDialog = true;
-        return;
-      }
+      this.enterFullscreen();
       this.showStepper = false;
       this.calibrationStarted = true;
+      // Warn user if they try to refresh/close tab mid-calibration
+      if (!this.beforeUnloadHandlerRef) {
+        this.beforeUnloadHandlerRef = (e) => {
+          if (!this.calibrationStarted) return;
+          e.preventDefault();
+          e.returnValue = '';
+        };
+        window.addEventListener('beforeunload', this.beforeUnloadHandlerRef);
+      }
     },
     startValidation() {
-      if (!this.isFullscreen()) {
-        this.fullscreenRequiredDialog = true;
-        return;
-      }
+      this.enterFullscreen();
       this.showStepper = false;
       this.calibrationStarted = true;
     },
@@ -620,9 +669,11 @@ export default {
           }
         }
       }
-      document.addEventListener('keydown', keydownHandler)
+      this.keydownHandlerRef = keydownHandler;
+      document.addEventListener('keydown', keydownHandler);
     },
     nextStep() {
+      this.exitFullscreen();
       this.usedPattern.forEach(element => {
         delete element.data;
       });
@@ -631,6 +682,11 @@ export default {
       this.stepperStep = 3;
       this.showStepper = true;
       this.calibrationStarted = false;
+      // Allow tab close/refresh again when calibration is paused
+      if (this.beforeUnloadHandlerRef) {
+        window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+        this.beforeUnloadHandlerRef = null;
+      }
 
       console.log("nextStep rodou drawPoint com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
 
@@ -710,22 +766,29 @@ export default {
       }
     },
     calculateDistance(eyelidTip, eyelidBottom) {
-      const xDistance = eyelidBottom[0] - eyelidTip[0];
-      const yDistance = eyelidBottom[1] - eyelidTip[1];
-      const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-      return distance;
+      return calculateDistance(eyelidTip, eyelidBottom);
     },
     drawPoint(x, y, radius) {
       const canvas = document.getElementById('canvas');
+      if (!canvas) {
+        console.error('Canvas element not found');
+        return;
+      }
 
-      console.log('Window size:', window.innerWidth, 'x', window.innerHeight);
-
+      // Set canvas size to current window/screen size
       canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight
+      canvas.height = window.innerHeight;
+      
       const ctx = canvas.getContext('2d');
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      if (!ctx) {
+        console.error('Canvas context not available');
+        return;
+      }
+      
+      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;
@@ -740,6 +803,7 @@ export default {
       );
       ctx.stroke();
       ctx.fill();
+      
       // inner circle
       ctx.beginPath();
       ctx.strokeStyle = "red";
@@ -754,6 +818,7 @@ export default {
       );
       ctx.stroke();
       ctx.fill();
+      
       // hollow circumference
       ctx.strokeStyle = this.pointColor;
       ctx.lineWidth = 1;
@@ -765,7 +830,7 @@ export default {
       if (this.finishingCalibration) return;
       this.finishingCalibration = true;
       this.calibrationStarted = false;
-
+      this.exitFullscreen();
       this.calibPredictionPoints.forEach(element => {
         delete element.point_x;
         delete element.point_y;
@@ -819,6 +884,11 @@ export default {
       this.$router.push(
         `/postCalibration?redirectingToRuxailab=${this.fromRuxailab}`
       )
+      // Calibration is fully finished; remove beforeunload guard
+      if (this.beforeUnloadHandlerRef) {
+        window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+        this.beforeUnloadHandlerRef = null;
+      }
     },
     savePoint(whereToSave, patternLike) {
       patternLike.forEach(point => {
@@ -835,56 +905,8 @@ 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);
-        });
-    },
+    // startWebCamCapture, detectFace, stopRecord, stopWebCamCapture
+    // are provided by CameraMixin
 
     async verifyFromRuxailab() {
       const urlParams = new URLSearchParams(window.location.search);
@@ -908,78 +930,38 @@ 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
-      const offset = this.offset || 100
-      const points = this.$store.state.calibration.pointNumber || 9
-
-      const minCols = 3
-      const cols = Math.max(minCols, Math.round(Math.sqrt(points)))
-      const rows = Math.ceil(points / cols)
-
-
-      const usableWidth = width - 2 * offset
-      const usableHeight = height - 2 * offset
-
-      const stepX = usableWidth / (cols - 1)
-      const stepY = usableHeight / (rows - 1)
-
-      const pattern = []
-
-      for (let i = 0; i < rows; i++) {
-        for (let j = 0; j < cols; j++) {
-          if (pattern.length < points) {
-            pattern.push({
-              x: offset + j * stepX,
-              y: offset + i * stepY
-            })
-          }
-        }
-      }
-
-      return pattern
+      return generateRuntimePattern({
+        isSinglePointMode: this.isSinglePointMode,
+        offset: this.offset || 100,
+        pointNumber: this.$store.state.calibration.pointNumber || 9,
+      });
     }
   },
 };
 </script>
 
 <style scoped>
+
 #canvas {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 1000;
+  background-color: transparent;
+}
+
+/* When in fullscreen, ensure canvas covers entire screen */
+:fullscreen #canvas,
+:-webkit-full-screen #canvas,
+:-moz-full-screen #canvas {
+  width: 100% !important;
+  height: 100% !important;
 }
 
 .center-container {
@@ -1249,6 +1231,22 @@ kbd {
 .calibration-stepper .v-divider {
   border-color: rgba(255, 255, 255, 0.3) !important;
 }
+.page-root {
+  min-height: 100vh;
+  overflow-y: auto;
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Video preview container */
+#video-preview {
+  max-width: 90vw; /* Ensure it doesn't exceed viewport width */
+  max-height: 60vh; /* Limit height to 60% of viewport */
+}
 </style>
 
 <style>
diff --git a/vue.config.js b/vue.config.js
index 2ae460b..f34a2e4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,10 @@
 module.exports = {
-  transpileDependencies: [
-    'vuetify'
-  ]
-}
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+};