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..6e76c95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@ 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'
diff --git a/src/store/calibration.js b/src/store/calibration.js
index beb8026..153daef 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -23,6 +23,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 +122,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 +174,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 +202,36 @@ export default {
 
       return positions;
     },
-    async saveCalib(context) {
-      const state = context.state;
-      const db = firebase.firestore();
-      const calibrationData = { ...state };
-      delete calibrationData.calibrations;
+<<<<<<< HEAD
+    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;
+=======
+
+    // 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 data = { ...state };
+    delete data.calibrations;
+>>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
+
+        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 +255,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 +290,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..cee9de9 100644
--- a/src/views/CameraConfiguration.vue
+++ b/src/views/CameraConfiguration.vue
@@ -198,6 +198,7 @@
                       <v-icon left>mdi-arrow-left</v-icon>
                       Back
                     </v-btn>
+<<<<<<< HEAD
                     <v-btn
                       color="#FF425A"
                       dark
@@ -216,6 +217,152 @@
       </v-row>
     </v-container>
   </div>
+=======
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <v-container fluid>
+            <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-header>
+                            <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>
+                        </v-stepper-header>
+
+                        <v-stepper-items>
+                            <!-- Step 1: Instructions -->
+                            <v-stepper-content step="1" class="compact-content">
+                            <v-card flat>
+                                <v-card-text class="text-center py-2">
+                                    <div class="mb-2">
+                                        <v-icon size="64" color="#FF425A">mdi-camera-iris</v-icon>
+                                    </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;">
+                                            <ul class="compact-list">
+                                                <li>The system will request camera permission</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>
+                                        </div>
+                                    </v-alert>
+                                    <v-alert outlined color="#FF425A" dense class="mx-auto" style="max-width: 400px; font-size: 14px;">
+                                        <strong>Important:</strong> Please allow camera access when prompted.
+                                    </v-alert>
+                                </v-card-text>
+                            </v-card>
+                            <div class="text-center pb-2">
+                                <v-btn color="#FF425A" dark @click="startCameraSetup">
+                                    <v-icon left>mdi-arrow-right</v-icon>
+                                    Continue
+                                </v-btn>
+                            </div>
+                        </v-stepper-content>
+
+                        <!-- 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">
+                                    <BlinkTresholdCard />
+                                </v-card-text>
+
+                                <!-- Camera Preview -->
+                                <v-card-text class="pa-2 text-center">
+                                    <div class="d-flex justify-center mb-2">
+                                        <v-btn x-small outlined color="#002D51" @click="showCameraModal = true">
+                                            <v-icon left x-small>mdi-help-circle</v-icon>
+                                            Camera Help
+                                        </v-btn>
+                                    </div>
+                                    <div v-if="isModelLoaded" class="camera-wrapper mx-auto">
+                                        <!-- Simple video test -->
+                                        <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;">
+                                        <v-progress-circular :size="50" :width="6" color="#FF425A"
+                                            indeterminate></v-progress-circular>
+                                        <h4 class="mt-3">Loading face detection model...</h4>
+                                    </div>
+                                </v-card-text>
+
+                                <v-card-actions class="justify-center py-2">
+                                    <v-btn text @click="setupStep = 1" class="mr-2">
+                                        <v-icon left>mdi-arrow-left</v-icon>
+                                        Back
+                                    </v-btn>
+                                    <v-btn color="#FF425A" dark :disabled="!isCameraOn" @click="goToCalibRecord()">
+                                        <v-icon left>mdi-play</v-icon>
+                                        Start Calibration
+                                    </v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-stepper-content>
+                        </v-stepper-items>
+                    </v-stepper>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+>>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
 </template>
 
 <script>
@@ -249,8 +396,23 @@ export default {
     model() {
       return this.$store.state.detect.model;
     },
+<<<<<<< HEAD
     isModelLoaded() {
       return this.$store.state.detect.loaded;
+=======
+    data() {
+        return {
+            isCameraOn: false,
+            webcamStream: null,
+            video: null,
+            fromRuxailab: false,
+            mediaDevices: [],
+            selectedMediaDevice: null,
+            setupStep: 1,
+            showCameraModal: false,
+            calibrationMode: 'multi-point', // Default to multi-point
+        };
+>>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
     },
     predictions() {
       return this.$store.state.detect.predictions;
@@ -359,10 +521,34 @@ export default {
               width: 600,
               height: 500,
             },
+<<<<<<< HEAD
           })
           .then((stream) => {
             // stream is a MediaStream object
             this.video.srcObject = stream;
+=======
+            deep: true,
+        },
+    },
+    mounted() {
+        this.verifyFromRuxailab()
+    },
+    methods: {
+        updateCalibrationMode(mode) {
+            this.$store.commit('setCalibrationMode', mode);
+        },
+        
+        startCameraSetup() {
+            this.setupStep = 2;
+            this.setupCamera();
+        },
+        async setupCamera() {
+            // Load the faceLandmarksDetection model assets.
+            const model = await faceLandmarksDetection.load(
+                faceLandmarksDetection.SupportedPackages.mediapipeFacemesh,
+                { maxFaces: 1 }
+            );
+>>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
 
             this.webcamStream = stream;
 
@@ -536,7 +722,12 @@ export default {
 
 /* Compact Stepper Styles */
 .compact-stepper {
+<<<<<<< HEAD
   margin-bottom: 24px;
+=======
+    /* Allow content to expand; page scrolls if needed */
+    max-height: none;
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .compact-content {
@@ -560,8 +751,19 @@ export default {
 }
 
 .compact-stepper {
+<<<<<<< HEAD
   border-radius: 12px !important;
   overflow: hidden !important;
+=======
+    border-radius: 12px !important;
+    /* Do not clip content (prevents scrolling) */
+    overflow: visible !important;
+}
+
+/* Ensure stepper content isn't clipped */
+.v-stepper__content {
+    overflow: visible !important;
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .compact-stepper .v-stepper__step__step {
@@ -605,6 +807,7 @@ export default {
 }
 
 .camera-wrapper {
+<<<<<<< HEAD
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -632,6 +835,47 @@ export default {
 
 #canvas {
   transform: scaleX(-1);
+=======
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    border: 5px solid #FF425A;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #000;
+}
+
+#video-tag {
+    width: 100%;
+    height: auto;
+    transform: scaleX(-1);
+    z-index: 1;
+    display: block;
+    max-height: none; /* Remove any height constraints */
+}
+
+#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;
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .mask {
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index 22c7adb..db8641d 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
   <div style="height: 100%;">
     <!-- Fullscreen required during calibration -->
     <v-dialog v-model="fullscreenRequiredDialog" max-width="520" persistent>
@@ -37,6 +38,9 @@
       </v-card>
     </v-dialog>
 
+=======
+  <div class="page-root">
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     <div v-if="!model" class="center-container">
       <v-progress-circular :size="80" :width="8" indeterminate color="black" class="loading-spinner"
         style="margin-bottom: 16px;"></v-progress-circular>
@@ -87,16 +91,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 +165,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,9 +265,18 @@
         </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>
@@ -265,11 +289,17 @@ export default {
   data() {
     return {
       // camera
+      keydownHandlerRef: null,
       webcamfile: null,
       recordWebCam: null,
       configWebCam: {
         audio: false,
-        video: true
+        video: {
+          width: { ideal: 1280, min: 640 },
+          height: { ideal: 720, min: 480 },
+          aspectRatio: { ideal: 16/9 },
+          facingMode: 'user'
+        }
       },
 
       // calibration
@@ -289,13 +319,39 @@ export default {
       showStepper: true,
       calibrationStarted: false,
       loadingConfig: false,
+<<<<<<< HEAD
 
       fullscreenRequiredDialog: false,
       navigationBlockedDialog: false,
       finishingCalibration: false,
+=======
+      isFullscreen: false,
+      beforeUnloadHandlerRef: null,
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     };
   },
   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,8 +391,25 @@ 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() {
+<<<<<<< HEAD
     console.log("rodou created");
     await this.verifyFromRuxailab()
     this.$store.commit('setIndex', 0)
@@ -359,8 +432,30 @@ export default {
     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);
+=======
+    try {
+      await this.verifyFromRuxailab()
+      this.$store.commit('setIndex', 0)
+      this.usedPattern = this.generateRuntimePattern()
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 
+      await this.startWebCamCapture();
+      
+      // Wait for model to be loaded before drawing
+      if (!this.model) {
+        console.warn('Model not loaded yet, waiting...');
+        // You might want to add a watcher for model loading
+        return;
+      }
+      
+      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)
+    } catch (error) {
+      console.error('Error during component initialization:', error);
+    }
   },
+<<<<<<< HEAD
   mounted() {
     document.addEventListener("fullscreenchange", this.onFullscreenChange);
     document.addEventListener("webkitfullscreenchange", this.onFullscreenChange);
@@ -553,14 +648,164 @@ export default {
         this.fullscreenRequiredDialog = true;
         return;
       }
+=======
+
+  mounted() {
+    // Handle window resize events
+    window.addEventListener('resize', this.handleResize);
+    // Track fullscreen changes so we can react if the user exits fullscreen mid-calibration
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
+  },
+
+  beforeDestroy() {
+    // Clean up event listeners
+    window.removeEventListener('resize', this.handleResize);
+    if (this.keydownHandlerRef) {
+      document.removeEventListener('keydown', this.keydownHandlerRef);
+    }
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
+    if (this.beforeUnloadHandlerRef) {
+      window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+    }
+  },
+
+  beforeRouteLeave(to, from, next) {
+  this.exitFullscreen();
+  if (this.keydownHandlerRef) {
+    document.removeEventListener('keydown', this.keydownHandlerRef);
+  }
+  next();
+  },
+
+  methods: {
+    handleFullscreenChange() {
+      const isNowFullscreen =
+        !!document.fullscreenElement ||
+        !!document.webkitFullscreenElement ||
+        !!document.mozFullScreenElement ||
+        !!document.msFullscreenElement;
+
+      this.isFullscreen = isNowFullscreen;
+
+      // If user exits fullscreen in the middle of calibration, pause and return to instructions
+      if (!isNowFullscreen && this.calibrationStarted && !this.showStepper) {
+        this.calibrationStarted = false;
+        this.showStepper = true;
+        // Keep the current stepper step (training or validation) so user can resume explicitly
+        this.exitFullscreen();
+        // Optional lightweight notice – avoid blocking alerts during calibration
+        // eslint-disable-next-line no-console
+        console.warn('Calibration left fullscreen; showing instructions again.');
+      }
+    },
+
+    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) {
+        // eslint-disable-next-line no-console
+        console.warn('Fullscreen API not supported in this browser');
+        return;
+      }
+
+      if (
+        !document.fullscreenElement &&
+        !document.webkitFullscreenElement &&
+        !document.mozFullScreenElement &&
+        !document.msFullscreenElement
+      ) {
+        try {
+          requestFullscreen.call(el);
+          // While in fullscreen, capture pointer events on the canvas to avoid clicking underlying UI
+          if (canvas) {
+            canvas.style.pointerEvents = 'auto';
+          }
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          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 (
+        (document.fullscreenElement ||
+          document.webkitFullscreenElement ||
+          document.mozFullScreenElement ||
+          document.msFullscreenElement) &&
+        exitFullscreenFn
+      ) {
+        try {
+          exitFullscreenFn.call(document);
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.warn('Exit fullscreen failed:', err);
+        }
+      }
+    },
+
+    startTraining() {
+      this.enterFullscreen();
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       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() {
+<<<<<<< HEAD
       if (!this.isFullscreen()) {
         this.fullscreenRequiredDialog = true;
         return;
       }
+=======
+      this.enterFullscreen();
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.showStepper = false;
       this.calibrationStarted = true;
     },
@@ -620,9 +865,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 +878,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);
 
@@ -717,15 +969,25 @@ export default {
     },
     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 +1002,7 @@ export default {
       );
       ctx.stroke();
       ctx.fill();
+      
       // inner circle
       ctx.beginPath();
       ctx.strokeStyle = "red";
@@ -754,6 +1017,7 @@ export default {
       );
       ctx.stroke();
       ctx.fill();
+      
       // hollow circumference
       ctx.strokeStyle = this.pointColor;
       ctx.lineWidth = 1;
@@ -762,10 +1026,14 @@ export default {
       ctx.stroke();
     },
     async endCalib() {
+<<<<<<< HEAD
       if (this.finishingCalibration) return;
       this.finishingCalibration = true;
       this.calibrationStarted = false;
 
+=======
+      this.exitFullscreen();
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.calibPredictionPoints.forEach(element => {
         delete element.point_x;
         delete element.point_y;
@@ -819,6 +1087,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 => {
@@ -838,14 +1111,20 @@ 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;",
+      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);
+          // Fallback to basic video if constraints fail
+          mediaStreamObj = await navigator.mediaDevices.getUserMedia({
+            audio: false,
+            video: true
           });
+<<<<<<< HEAD
 
           let recordingWebCam = [];
           let video = document.getElementById("video-tag");
@@ -883,7 +1162,65 @@ export default {
         })
         .catch((e) => {
           console.error("Error", e);
+=======
+        }
+        
+        // Create media recorder object
+        this.recordWebCam = new MediaRecorder(mediaStreamObj, {
+          mimeType: "video/webm;",
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
         });
+
+        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;
+        
+        // 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 load before detecting face
+        return new Promise((resolve) => {
+          video.onloadeddata = () => {
+            console.log('Video loaded with dimensions:', video.videoWidth, 'x', video.videoHeight);
+            this.detectFace();
+            resolve();
+          };
+        });
+        
+      } catch (e) {
+        console.error("Error accessing webcam:", e);
+        // Handle webcam access denied or not available
+        alert("Camera access is required for eye tracking. Please allow camera permissions and refresh the page.");
+        throw e;
+      }
     },
 
     async verifyFromRuxailab() {
@@ -940,6 +1277,16 @@ export default {
     generateRuntimePattern() {
       const width = window.innerWidth
       const height = window.innerHeight
+      
+      // Check if single-point mode is enabled
+      if (this.isSinglePointMode) {
+        return [{
+          x: width / 2,
+          y: height / 2
+        }];
+      }
+      
+      // Multi-point calibration (existing logic)
       const offset = this.offset || 100
       const points = this.$store.state.calibration.pointNumber || 9
 
@@ -947,7 +1294,6 @@ export default {
       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
 
@@ -974,12 +1320,27 @@ export default {
 </script>
 
 <style scoped>
+<<<<<<< HEAD
+=======
+
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 #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 +1610,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,
+      },
+    },
+  },
+};