diff --git a/index.html b/index.html
index 54d0708..3760cc3 100644
--- a/index.html
+++ b/index.html
@@ -8,41 +8,53 @@
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
     </head>
     <body>
-        <script>0</script>
+        <script>
+            function menu_toggle() {
+                var menu = document.getElementsByTagName('menu')[0];
+                var img = document.querySelector('nav > img');
+                if (menu.style.display == 'none') {
+                    menu.style.display = 'block';
+                    img.src = '/menu-close.png';
+                } else {
+                    menu.style.display = 'none';
+                    img.src = '/menu-burger.png';
+                }
+            }
+        </script>
         <h1>Bloub Bloub Studio</h1>
         <nav>
-            <img id="menu-icon" src="/menu-burger.png" alt="menu icon" />
+            <img src="/menu-burger.png" alt="menu icon" onclick="menu_toggle()" />
+            <menu>
+                <a href="/">
+                    <img src="/forum-logo.svg" alt="forum" />
+                    <h3>FORUM</h3>
+                </a>
+                <a href="/">
+                    <img src="/steam-logo.png" alt="steam" />
+                    <h3>STEAM</h3>
+                </a>
+                <a href="/">
+                    <img src="/youtube-logo.png" alt="youtube" />
+                    <h3>YOUTUBE</h3>
+                </a>
+                <a href="/">
+                    <img src="/twitter-logo.png" alt="twitter" />
+                    <h3>TWITTER</h3>
+                </a>
+                <a href="/">
+                    <img src="/email-logo.png" alt="email us" />
+                    <h3>EMAIL US</h3>
+                </a>
+                <a href="/">
+                    <img src="/mailing-list-logo.png" alt="mailing list" />
+                    <h3>MAILING LIST</h3>
+                </a>
+                <a href="/">
+                    <img src="/press-kit-logo.png" alt="press kit" />
+                    <h3>PRESS KIT</h3>
+                </a>
+            </menu>
         </nav>
-        <menu>
-            <a href="/">
-                <img src="/forum-logo.svg" alt="forum" />
-                <h3>FORUM</h3>
-            </a>
-            <a href="/">
-                <img src="/steam-logo.png" alt="steam" />
-                <h3>STEAM</h3>
-            </a>
-            <a href="/">
-                <img src="/youtube-logo.png" alt="youtube" />
-                <h3>TWITTER</h3>
-            </a>
-            <a href="/">
-                <img src="/twitter-logo.png" alt="twitter" />
-                <h3>TWITTER</h3>
-            </a>
-            <a href="/">
-                <img src="/email-logo.png" alt="email us" />
-                <h3>EMAIL US</h3>
-            </a>
-            <a href="/">
-                <img src="/mailing-list-logo.png" alt="mailing list" />
-                <h3>MAILING LIST</h3>
-            </a>
-            <a href="/">
-                <img src="/press-kit-logo.png" alt="press kit" />
-                <h3>PRESS KIT</h3>
-            </a>
-        </menu>
         <main class="games">
             <a href="/game0.html" class="game">
                 <img src="/miniature.png" alt="GAME 0" />
diff --git a/menu-burger.png b/menu-burger.png
new file mode 100644
index 0000000..6ec2c1b
Binary files /dev/null and b/menu-burger.png differ
diff --git a/menu-close.png b/menu-close.png
new file mode 100644
index 0000000..6800293
Binary files /dev/null and b/menu-close.png differ
diff --git a/style.css b/style.css
index 9c277e8..0570ff2 100644
--- a/style.css
+++ b/style.css
@@ -20,6 +20,8 @@ menu a {
     padding-left: 1rem;
     padding-right: 1rem;
     padding-bottom: 1rem;
+    text-decoration: none;
+    color: white;
 }
 
 menu a img {
@@ -36,32 +38,49 @@ menu a h3 {
     margin: 0px;
 }
 
-nav {
+nav > img {
     display: none;
 }
 
 @media (max-width: 900px) {
     menu {
         display: none;
+        position: absolute;
+        background-color: black;
+        padding: 0.69rem;
+        margin-top: 0;
+        right: 0;
+        z-index: 2;
+        text-align: left;
     }
-    nav {
+    menu a {
+        display: flex;
+    }
+    menu a img {
+        width: 25px;
+        height: 25px;
+        padding-right: 1rem;
+    }
+    menu a:hover img {
+        width: 25px;
+        height: 25px;
+        transition: 0;
+    }
+    nav > img {
         display: block;
         color: red;
         margin: 1rem;
         position: absolute;
         top: 0px;
         right: 0px;
+        margin-top: 1.5rem;
+        width: 42px;
     }
     h1 {
         padding-right: 50px;
     }
 }
 
-#menu-icon {
-    margin-top: 10px;
-    width: 42px;
-}
-
 #notif {
     position: fixed;
     margin: 1rem;
diff --git a/youtube-logo.png b/youtube-logo.png
new file mode 100644
index 0000000..a37389d
Binary files /dev/null and b/youtube-logo.png differ
