diff --git a/truthseeker/static/css/game_ui_game.css b/truthseeker/static/css/game_ui_game.css
new file mode 100644
index 0000000..ef3cdc6
--- /dev/null
+++ b/truthseeker/static/css/game_ui_game.css
@@ -0,0 +1,189 @@
+html {
+    background-color: black;
+    color: white;
+}
+
+:root {
+    --button-color : #FF0000;
+}
+
+.game_app {
+    margin: 0;
+}
+
+.current_background {
+    background-position: center;
+    background-size: cover;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    /* Place the background behind everything */
+    z-index: -9999;
+}
+
+/* Buttons */
+.action_button {
+    border-color: black;
+    border-style: solid;
+    border-width: 0.125em;
+    background-color: var(--button-color);
+    border-radius: var(--button-and-dialog-border-radius);
+    cursor: pointer;
+    font-family: "Titan One", sans-serif;
+    font-size: 1.5em;
+    min-width: 10em;
+    padding-bottom: 0.5em;
+    padding-top: 0.5em;
+    padding-left: 1em;
+    padding-right: 1em;
+    overflow: hidden;
+    text-transform: uppercase;
+    transition: box-shadow 0.5s, transform 0.5s;
+}
+
+.action_button:hover {
+    box-shadow: 10px 10px 0px 0px black;
+    transform: translate(0.1em, 0.1em);
+}
+
+.next_btn {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    fill: var(--button-color);
+    height: 5em;
+    padding: 0;
+    transform: rotate(180deg);
+    width: 5em;
+}
+
+#emotion_and_culprit_choices_next_btn, #interrogation_next_btn {
+    position: fixed;
+    left: calc(100% - 6em);
+    top: 1em;
+}
+
+/* Introduction */
+.introduction {
+    padding: 1em;
+    max-width: 50vw;
+}
+
+.introduction_title {
+    color: var(--button-color);
+    font-family: "Spicy Rice", serif;
+    font-size: 5em;
+    font-weight: bold;
+    margin: 0;
+    text-align: left;
+}
+
+.introduction_text {
+    font-family: "Spicy Rice", serif;
+    font-size: 2em;
+    margin-bottom: 1em;
+    margin-top: 1em;
+}
+
+/* Interrogation */
+.interrogation {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.interrogation_title {
+    color: var(--button-color);
+    font-family: "Spicy Rice", sans-serif;
+    font-size: 3em;
+    margin: 1em;
+    text-transform: uppercase;
+}
+
+.suspects {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.suspect {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    margin: 1em;
+}
+
+.suspect_picture {
+    margin-bottom: 1em;
+    height: 15em;
+    width: 15em;
+}
+
+.suspect_picture[alt] {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    font-family: "Roboto Mono", sans-serif;
+    font-size: 1em;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+}
+
+.ask_button {
+    background-color: white;
+    color: black;
+    text-transform: none;
+}
+
+/* Emotion and culprit choices */
+.culprit_btn {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+
+.culprit_icon {
+    fill: white;
+    height: 1em;
+    width: 1em;
+}
+
+.culprit_btn_text {
+    margin: 0;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+}
+
+.culprit_btn_checked {
+    background-color: green;
+}
+
+.suspect_emotion_chooser {
+    background-color: #5A5656;
+    border: none;
+    border-radius: var(--button-and-dialog-border-radius);
+    color: white;
+    font-family: "Roboto Mono", sans-serif;
+    font-size: 1em;
+    margin: 1em;
+    padding: 0.5em;
+}
+
+.emotion_and_culprit_choices_title {
+    font-size: 2em;
+    margin: 0.5em;
+    text-align: center;
+    font-family: "Spicy Rice", sans-serif;
+    color: var(--button-color);
+}
diff --git a/truthseeker/templates/game.html b/truthseeker/templates/game.html
index bf821c9..0dcb578 100644
--- a/truthseeker/templates/game.html
+++ b/truthseeker/templates/game.html
@@ -1,3 +1,84 @@
-game.html template
-<br>
-<a href="/">Return to index</a>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <title>Truth Inquiry</title>
+        <link rel="stylesheet" href="/static/css/game_ui.css">
+        <link rel="stylesheet" href="/static/css/game_ui_game.css">
+        <meta name="color-scheme" content="dark light">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="UTF-8">
+    </head>
+    <body class="game_app">
+        <div class="current_background"></div>
+        <div class="introduction hidden">
+            <h1 class="introduction_title">Truth Inquiry</h1>
+            <p class="introduction_text">Bienvenue dans Truth Inquiry, vous allez intégrer la peau d’un enquêteur.<br><br>Vous avez été donné responsable de résoudre une enquête et devez trouver le coupable d’un vol.<br><br>Cliquez sur la flèche pour découvrir les suspects et les interroger.</p>
+            <button id="introduction_next_btn" aria-label="Commencer">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
+                </svg>
+            </button>
+        </div>
+        <div class="interrogation hidden">
+            <h1 class="interrogation_title">Suspects</h1>
+            <button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
+                </svg>
+            </button>
+            <div class="suspects">
+                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <div class="suspect">
+                    <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                    <button class="ask_button action_button">Interroger</button>
+                </div>
+            </div>
+        </div>
+        <div class="emotion_and_culprit_choices">
+            <h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
+            <button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
+                </svg>
+            </button>
+            <div class="suspects">
+                <!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
+                <div class="suspect">
+                    <select class="suspect_emotion_chooser" required="required">
+                        <option value="">Choisissez une émotion</option>
+                        <!-- Add other emotions here -->
+                    </select>
+                    <img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
+                    <!-- Add culprit_btn_checked class when a choice is checked -->
+                    <!-- Only one button can be checked at a time, so when one is checked, the previous one, if applicable, is unchecked -->
+                    <button class="culprit_btn action_button">
+                        <svg class="culprit_checked_icon hidden culprit_icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
+                            <path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"></path>
+                        </svg>
+                        <svg class="culprit_unchecked_icon culprit_icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
+                            <path d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z">
+                        </svg>
+                        <p class="culprit_btn_text">Couplable</p>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="alert_dialog_background"></div>
+        <div class="unsupported_browser">
+            <div id="unsupported_browser_dialog" class="alert_dialog">
+                <h3 class="alert_dialog_title">Navigateur non supporté</h3>
+                <p class="alert_dialog_msg unsupported_browser_msg"></p>
+            </div>
+        </div>
+        <noscript>
+            <div class="alert_dialog_background" style="display: block;"></div>
+            <div class="js_requirement">
+                <div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
+                    <h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
+                    <p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
+                </div>
+            </div>
+        </noscript>
+        <script src="/static/js/game_common.js"></script>
+    </body>
+</html>