diff --git a/code/interface_borne/assets/css/main.css b/code/interface_borne/assets/css/main.css
index 1084086..cac77e3 100644
--- a/code/interface_borne/assets/css/main.css
+++ b/code/interface_borne/assets/css/main.css
@@ -6,4 +6,22 @@ html, body {
 .page {
     width: 100%;
     height: 100%;
+}
+
+#camera > video, #camera > canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+}
+
+#camera > video {
+    z-index: 0;
+}
+#camera > canvas {
+    z-index: 1;
 }
\ No newline at end of file
diff --git a/code/interface_borne/assets/js/camera_page.js b/code/interface_borne/assets/js/camera_page.js
index ec1956d..3a316eb 100644
--- a/code/interface_borne/assets/js/camera_page.js
+++ b/code/interface_borne/assets/js/camera_page.js
@@ -1,14 +1,14 @@
 class CameraPage {
-    constructor(canvas) {
+    constructor() {
 
         this.spinnerWeight = 10;
         this.spinnerColor = "#0F0FFF"
 
-        this.canvas = canvas;
-        this.ctx = canvas.getContext("2d");
-        this.video = document.createElement("video");
+        this.canvas = document.getElementById("overlay-canvas");
+        this.ctx = this.canvas.getContext("2d");
+        this.video = document.getElementById("camera-video");
         this.width;
-        this.height; //calculé automatiquement en fonction de la largeur du flux vidéo
+        this.height; //calcule automatiquement en fonction de la largeur du flux vidéo
         this.videoWidth;
         this.videoHeight;
         this.streaming = false;
@@ -80,9 +80,8 @@ class CameraPage {
 
     _frame() {
         if (this.streaming && this.enabled && this.width && this.height) {
-            this.canvas.width = this.width;
-            this.canvas.height = this.height;
-            this.ctx.drawImage(this.video, 0, 0, this.width, this.height);
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            // this.ctx.drawImage(this.video, 0, 0, this.width, this.height);
             this._drawEffects();
         }
         if (this.enabled) {
diff --git a/code/interface_borne/assets/js/main.js b/code/interface_borne/assets/js/main.js
index 8d06818..846caa8 100644
--- a/code/interface_borne/assets/js/main.js
+++ b/code/interface_borne/assets/js/main.js
@@ -1,7 +1,5 @@
 let stateManager; 
 
 window.addEventListener("load", () => {
-	let canvas = document.createElement("canvas");
-	document.body.appendChild(canvas);
-	stateManager = new StateManager(canvas);
+	stateManager = new StateManager();
 }, false);
diff --git a/code/interface_borne/assets/js/state_manager.js b/code/interface_borne/assets/js/state_manager.js
index 8988288..6d4d700 100644
--- a/code/interface_borne/assets/js/state_manager.js
+++ b/code/interface_borne/assets/js/state_manager.js
@@ -6,16 +6,18 @@ const STATE = {
 };
 
 class StateManager {
-    constructor(canvas) {
-        this.canvas = canvas;
+    constructor() {
         this._state = STATE.sleeping;
-        this._cameraPage = new CameraPage(this.canvas);
+        this._cameraPage = new CameraPage();
         this._sleepingPage = new SleepingPage();
 
         this.wsClient = new WebsocketClient(
             (effects) => this._cameraPage.setEffects(effects),
             (state) => this.changeState(state)
         );
+        
+        this._sleepingPage.enabled = true;
+        this._cameraPage.enabled = false;
 
         //TODO: Remove qd implémenté dans le backend
         document.getElementById("sleeping-page-continue").onclick = () => this.setState(STATE.video);
diff --git a/code/interface_borne/index.html b/code/interface_borne/index.html
index b924523..f4db05b 100644
--- a/code/interface_borne/index.html
+++ b/code/interface_borne/index.html
@@ -17,7 +17,8 @@
             <button id="sleeping-page-continue">Continuer</button>
         </div>
         <div id="camera">
-
+            <canvas id="overlay-canvas"></canvas>
+            <video id="camera-video"></video>
         </div>
         <script src="assets/js/camera_page.js"></script>
         <script src="assets/js/network.js"></script>
diff --git a/docs/rapports_pan2/module_hardware/rapport.md b/docs/rapports_pan2/module_hardware/rapport.md
index 45c43ab..e7ae77e 100644
--- a/docs/rapports_pan2/module_hardware/rapport.md
+++ b/docs/rapports_pan2/module_hardware/rapport.md
@@ -73,6 +73,7 @@ Package id 0:  +69.0°C  (high = +105.0°C, crit = +105.0°C)
 Core 0:        +69.0°C  (high = +105.0°C, crit = +105.0°C)
 Core 1:        +68.0°C  (high = +105.0°C, crit = +105.0°C)
 ```
+<div style="page-break-after: always;"></div>
 
 ## Impact de l'utilisation de Docker
 Nous nous sommes également posé la question de l'impact de l'utilisation de docker dans les performances de notre projet. Pour mesurer cela, nous avons effectué des benchmark directement sur le système puis dans un container Docker pour mesurer la différence. Nous avons utlisé sysbench pour évaluer les performances du CPU, de la RAM et du disque (écriture/lecture aléatoire).
diff --git a/docs/rapports_pan2/module_hardware/rapport.pdf b/docs/rapports_pan2/module_hardware/rapport.pdf
index ff74e97..af95ffb 100644
Binary files a/docs/rapports_pan2/module_hardware/rapport.pdf and b/docs/rapports_pan2/module_hardware/rapport.pdf differ