diff --git a/code/interface_borne/assets/js/audio_page.js b/code/interface_borne/assets/js/audio_page.js
new file mode 100644
index 0000000..df56436
--- /dev/null
+++ b/code/interface_borne/assets/js/audio_page.js
@@ -0,0 +1,11 @@
+class AudioPage {
+    constructor() {
+        this.isEnabled = false;
+        this.DOMElement = document.getElementById("audio");
+
+    }
+    set enabled(isEnabled) {
+        this.isEnabled = isEnabled;
+        this.DOMElement.style.display = isEnabled ? "block" : "none";
+    }
+}
\ 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 3a316eb..be3e262 100644
--- a/code/interface_borne/assets/js/camera_page.js
+++ b/code/interface_borne/assets/js/camera_page.js
@@ -25,6 +25,9 @@ class CameraPage {
         this.DOMElement.style.display = val ? "block" : "none";
         if (val) {
             this._frame();
+            this.video.play();
+        }else {
+            this.video.pause();
         }
     }
 
diff --git a/code/interface_borne/assets/js/state_manager.js b/code/interface_borne/assets/js/state_manager.js
index 6d4d700..3d72b56 100644
--- a/code/interface_borne/assets/js/state_manager.js
+++ b/code/interface_borne/assets/js/state_manager.js
@@ -10,6 +10,8 @@ class StateManager {
         this._state = STATE.sleeping;
         this._cameraPage = new CameraPage();
         this._sleepingPage = new SleepingPage();
+        this._audioPage = new AudioPage();
+        this._thankYouPage = new ThankYouPage();
 
         this.wsClient = new WebsocketClient(
             (effects) => this._cameraPage.setEffects(effects),
@@ -18,17 +20,30 @@ class StateManager {
         
         this._sleepingPage.enabled = true;
         this._cameraPage.enabled = false;
-
+        this._audioPage.enabled = false;
+        this._thankYouPage.enabled = false;
         //TODO: Remove qd implémenté dans le backend
         document.getElementById("sleeping-page-continue").onclick = () => this.setState(STATE.video);
     }
 
     setState(newState) {
+        console.log({current:this._state,new:newState})
         if(this._state == STATE.sleeping && newState == STATE.video) {
             this._cameraPage.enabled = true;
             this._sleepingPage.enabled = false;
+            this._state = newState;
+        }else if(this._state == STATE.video && newState == STATE.audio) {
+            this._cameraPage.enabled = false;
+            this._audioPage.enabled = true;
+            this._state = newState;
+        }else if(this._state == STATE.audio && newState == STATE.thankYou) {
+            this._audioPage.enabled = false;
+            this._thankYouPage.enabled = true;
+            this._state = newState;
+        }else if(this._state == STATE.thankYou && newState == STATE.sleeping) {
+            this._thankYouPage.enabled = false;
+            this._sleepingPage.enabled = true;
+            this._state = newState;
         }
     }
-
-    
 }
\ No newline at end of file
diff --git a/code/interface_borne/assets/js/thank_you_page.js b/code/interface_borne/assets/js/thank_you_page.js
new file mode 100644
index 0000000..3e0971a
--- /dev/null
+++ b/code/interface_borne/assets/js/thank_you_page.js
@@ -0,0 +1,11 @@
+class ThankYouPage {
+    constructor() {
+        this.isEnabled = false;
+        this.DOMElement = document.getElementById("thank-you");
+    }
+
+    set enabled(isEnabled) {
+        this.isEnabled = isEnabled;
+        this.DOMElement.style.display = isEnabled ? "block" : "none";
+    }
+}
\ No newline at end of file
diff --git a/code/interface_borne/index.html b/code/interface_borne/index.html
index f4db05b..aab8b71 100644
--- a/code/interface_borne/index.html
+++ b/code/interface_borne/index.html
@@ -7,11 +7,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="assets/css/main.css">
     <!-- <link rel="stylesheet" href="assets/css/bootstrap-grid.min.css"> -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
     <title>Téléreview</title>
 </head>
 
 <body>
-        <div id="sleeping-page" class="">
+        <div id="sleeping-page" class="page">
             <h1>Venez donner votre avis</h1>
             <!-- Boutton pour test -->
             <button id="sleeping-page-continue">Continuer</button>
@@ -20,8 +23,16 @@
             <canvas id="overlay-canvas"></canvas>
             <video id="camera-video"></video>
         </div>
+        <div id="audio">
+            <h1>Enregistrement audio blabal</h1>
+        </div>
+        <div id="thank-you">
+            <h1>Merci pour votre avis !!!!!!!!!!</h1>
+        </div>
         <script src="assets/js/camera_page.js"></script>
         <script src="assets/js/network.js"></script>
+        <script src="assets/js/thank_you_page.js"></script>
+        <script src="assets/js/audio_page.js"></script>
         <script src="assets/js/sleeping_page.js"></script>
         <script src="assets/js/state_manager.js"></script>
         <script src="assets/js/main.js"></script>
diff --git a/code/setup.sh b/code/setup.sh
new file mode 100755
index 0000000..206acad
--- /dev/null
+++ b/code/setup.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+sudo modprobe v4l2loopback devices=2