diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..b00c763
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+git pull origin production
+
+composer install
+php artisan migrate --force
+
+npm install
+npm run prod
diff --git a/resources/js/components/Nav.vue b/resources/js/components/Nav.vue
index 665d0ad..0424b0c 100644
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -7,13 +7,6 @@
             </svg>
         </router-link>
         <hr>
-<!--        <router-link to="/memos" class="nav-item">-->
-<!--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">-->
-<!--                <title>Paramètres</title>-->
-<!--                <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>-->
-<!--            </svg>-->
-<!--            Activitées-->
-<!--        </router-link>-->
         <router-link to="/memos" class="nav-item">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
                 <title>Paramètres</title>
@@ -21,6 +14,13 @@
             </svg>
             Memos
         </router-link>
+        <router-link to="/jeux" class="nav-item">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current site-logo">
+                <title>Paramètres</title>
+                <path d="M22.9 10.1c-.1-.1-.2-.2-.3-.2L20 9.5c-.1-.5-.3-.9-.6-1.4.2-.2.4-.6.8-1 .3-.4.6-.8.7-1 .1 0 .1-.2.1-.3 0-.1 0-.2-.1-.3-.3-.5-1.1-1.3-2.4-2.4-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.3.1l-2 1.5c-.4-.2-.8-.4-1.3-.5l-.4-2.6c0-.1-.1-.2-.2-.3-.1-.2-.2-.2-.3-.2h-3.2c-.3 0-.4.1-.5.4-.1.5-.3 1.4-.4 2.7-.5.1-.9.3-1.3.5l-2-1.5c-.1-.1-.3-.2-.4-.2-.2 0-.7.3-1.4 1-.6.7-1.1 1.3-1.4 1.6-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.6.8 1.2 1.4 1.5 2-.2.5-.3.9-.5 1.4l-2.6.4c-.1 0-.2.1-.3.2-.1.1-.1.2-.1.3v3.2c0 .1 0 .2.1.3.1.1.2.2.3.2l2.6.4c.1.5.3.9.6 1.4-.2.2-.4.6-.8 1-.3.4-.6.8-.7 1-.1.1-.1.2-.1.3 0 .1 0 .2.1.3.4.5 1.2 1.3 2.4 2.4.1.1.2.2.4.2.1 0 .3 0 .4-.1l2-1.5c.3.1.7.3 1.2.5l.4 2.6c0 .1.1.2.2.3.1.1.2.1.4.1h3.2c.3 0 .4-.1.5-.4.1-.5.3-1.4.4-2.7.4-.1.9-.3 1.3-.5l2 1.5c.1.1.3.1.4.1.2 0 .7-.3 1.3-1 .7-.7 1.2-1.2 1.4-1.5.1-.1.1-.2.1-.3 0-.1 0-.2-.1-.4-.7-.8-1.2-1.5-1.5-2 .2-.4.4-.8.6-1.3l2.7-.4c.1 0 .2-.1.3-.2.1-.1.1-.2.1-.3v-3.2c-.2-.1-.2-.2-.3-.3zm-8.3 4.5c-.7.7-1.6 1.1-2.6 1.1s-1.9-.4-2.6-1.1c-.7-.7-1.1-1.6-1.1-2.6s.4-1.9 1.1-2.6c.7-.7 1.6-1.1 2.6-1.1s1.9.4 2.6 1.1c.7.7 1.1 1.6 1.1 2.6s-.4 1.9-1.1 2.6z"/>
+            </svg>
+            Jeux
+        </router-link>
     </nav>
 </template>
 
diff --git a/resources/js/router.js b/resources/js/router.js
index 8f19237..1041aa9 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -8,6 +8,8 @@ import MemoIndex from "./views/Memo/MemoIndex";
 import MemoCreate from "./views/Memo/MemoCreate";
 import MemoShow from "./views/Memo/MemoShow";
 import MemoEdit from "./views/Memo/MemoEdit";
+import GameIndex from "./views/Games/GameIndex";
+import Hangman from "./views/Games/Hangman";
 
 Vue.use(VueRouter)
 
@@ -46,5 +48,14 @@ export default new VueRouter({
             path: '/memos/:id/edit', component: MemoEdit,
             meta: {title: 'Edit Memo'}
         },
+
+        {
+            path: '/jeux', component: GameIndex,
+            meta: {title: 'Liste des jeux'}
+        },
+        {
+            path: '/jeux/pendu', component: Hangman,
+            meta: {title: 'Jeu : Le pendu'}
+        },
     ]
 })
diff --git a/resources/js/views/Games/GameIndex.vue b/resources/js/views/Games/GameIndex.vue
new file mode 100644
index 0000000..06a0935
--- /dev/null
+++ b/resources/js/views/Games/GameIndex.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="p-2">
+        <h1>Liste des jeux</h1>
+        <div>
+            <router-link to="/jeux/pendu">
+                Pendu
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "GameIndex"
+    }
+</script>
+
+<style scoped>
+    .figure-container {
+        fill: transparent;
+        stroke: #fff;
+        stroke-width: 4px;
+        stroke-linecap: round;
+    }
+
+    .figure-part {
+        display: none;
+    }
+
+    .wrong-letters-container {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        display: flex;
+        flex-direction: column;
+        text-align: right;
+    }
+
+    .wrong-letters-container p {
+        margin: 0 0 5px;
+    }
+
+    .wrong-letters-container span {
+        font-size: 24px;
+    }
+
+    .word {
+        display: flex;
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .word .letter {
+        border-bottom: 3px solid #2980b9;
+        display: inline-flex;
+        font-size: 30px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 3px;
+        height: 50px;
+        width: 20px;
+    }
+
+    .popup-container {
+        background-color: rgba(0, 0, 0, 0.3);
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        display: none;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .popup-container .popup {
+        background-color: #2980b9;
+        border-radius: 5px;
+        box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1);
+        padding: 20px;
+        text-align: center;
+    }
+
+    button {
+        cursor: pointer;
+        background-color: #fff;
+        color: #2980b9;
+        border: 0;
+        margin-top: 20px;
+        padding: 12px 20px;
+        font-size: 16px;
+    }
+
+    button:active {
+         transform: scale(0.98);
+     }
+
+    button:focus {
+         outline: 0;
+     }
+
+    .notification-container {
+        background-color: rgba(0, 0, 0, 0.3);
+        border-radius: 10px 10px 0 0;
+        padding: 15px 20px;
+        position: absolute;
+        bottom: -50px;
+        transition: transform 0.3s ease-in-out;
+    }
+
+    .notification-container p {
+        margin: 0;
+    }
+
+    .notification-container .show {
+         transform: translateY(-50px);
+    }
+</style>
diff --git a/resources/js/views/Games/Hangman.vue b/resources/js/views/Games/Hangman.vue
new file mode 100644
index 0000000..c238d7a
--- /dev/null
+++ b/resources/js/views/Games/Hangman.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="p-2">
+        <h1>Pendu</h1>
+        <p>Trouve le mot du pendu - Saisi les lettres</p>
+        <div class="game-container">
+            <svg height="250" width="200" class="figure-container">
+                <!-- Potence -->
+                <line x1="60" y1="20" x2="140" y2="20" />
+                <line x1="140" y1="20" x2="140" y2="50" />
+                <line x1="60" y1="20" x2="60" y2="230" />
+                <line x1="20" y1="230" x2="100" y2="230" />
+
+                <!-- Tête -->
+                <circle cx="140" cy="70" r="20" class="figure-part"/>
+                <!-- Corps -->
+                <line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
+                <line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
+                <line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
+                <line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
+                <line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
+            </svg>
+
+            <div class="wrong-letters-container">
+                <div id="wrong-letters"></div>
+            </div>
+
+            <div class="word" id="word"></div>
+        </div>
+
+        <div class="popup-container" id="popup-container">
+            <div class="popup">
+                <h2 id="final-message"></h2>
+                <button id="play-button" @click="playAgain">Play Again</button>
+            </div>
+        </div>
+
+        <div class="notification-container" id="notification-container">
+            <p>You have already entered this letter</p>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Hangman",
+        methods: {
+            playAgain: function () {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 394d433..7b96008 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -15,3 +15,5 @@
 
 @import "pages/auth";
 @import "pages/memos";
+
+@import "pages/games/hangman";
diff --git a/resources/sass/pages/games/hangman.scss b/resources/sass/pages/games/hangman.scss
new file mode 100644
index 0000000..f7f7809
--- /dev/null
+++ b/resources/sass/pages/games/hangman.scss
@@ -0,0 +1,110 @@
+.game-container {
+    padding: 20px 30px;
+    position: relative;
+    margin: auto;
+    height: 350px;
+    width: 450px;
+}
+
+.figure-container {
+    fill: transparent;
+    stroke: $dark;
+    stroke-width: 4px;
+    stroke-linecap: round;
+}
+
+.figure-part {
+    display: none;
+}
+
+.wrong-letters-container {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+
+    p {
+        margin: 0 0 5px;
+    }
+
+    span {
+        font-size: 24px;
+    }
+}
+
+.word {
+    display: flex;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .letter {
+        border-bottom: 3px solid #2980b9;
+        display: inline-flex;
+        font-size: 30px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 3px;
+        height: 50px;
+        width: 20px;
+    }
+}
+
+.popup-container {
+    background-color: rgba(0,0,0,0.3);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    display: none;
+    align-items: center;
+    justify-content: center;
+
+    .popup {
+        background-color: #2980b9;
+        border-radius: 5px;
+        box-shadow: 0 15px 10px 3px rgba(0,0,0,0.1);
+        padding: 20px;
+        text-align: center;
+
+        button {
+            cursor: pointer;
+            background-color: #fff;
+            color: #2980b9;
+            border: 0;
+            margin-top: 20px;
+            padding: 12px 20px;
+            font-size: 16px;
+
+            &:active {
+                transform: scale(0.98);
+            }
+
+            &:focus {
+                outline: 0;
+            }
+        }
+    }
+}
+
+.notification-container {
+    background-color: rgba(0,0,0,0.3);
+    border-radius: 10px 10px 0 0;
+    padding: 15px 20px;
+    position: absolute;
+    bottom: -50px;
+    transition: transform 0.3s ease-in-out;
+
+    p {
+        margin: 0;
+    }
+
+    &.show {
+        transform: translateY(-50px);
+    }
+}