diff --git a/header.html b/header.html
index 45d2b2e..bd02b33 100644
--- a/header.html
+++ b/header.html
@@ -3,14 +3,38 @@
 <head>
     <meta charset="UTF-8">
     <title>Header</title>
+    <script src="https://kit.fontawesome.com/0fd87250ec.js" crossorigin="anonymous"></script>
     <link href="navigator.css" rel="stylesheet" type="text/css">
 </head>
 <body>
+    <script>
+        function toggleMenu() {
+            if (document.body.clientWidth > 600)
+                return document.location = "https://mp2i-vms.fr"
+
+            if (document.getElementById("menu-sec").classList.contains("hidden")) {
+                document.getElementById("menu-sec").classList.remove("hidden");
+                document.getElementById("dropdown-indicator").className = "fa-solid fa-caret-up";
+            } else {
+                document.getElementById("menu-sec").classList.add("hidden");
+                document.getElementById("dropdown-indicator").className = "fa-solid fa-caret-down";
+            }
+        }
+    </script>
     <div class="unified_navigator">
-        <a class="logo" href="https://mp2i-vms.fr"><img src="icon.png"><strong>mp2i-vms.fr</strong></a>
-        <div class="link"><a href="#">Pages personnelles</a></div>
-        <div class="link"><a href="#">Git</a></div>
-        <div class="link"><a href="#">Minecraft</a></div>
+        <div class="nav-container">
+            <div class="logo-wrapper" onclick="toggleMenu();">
+                <a class="logo">
+                    <img src="icon.png" alt="logo"><strong>mp2i-vms.fr</strong>
+                </a>
+                <i id="dropdown-indicator" class="fa-solid fa-caret-down"></i>
+            </div>
+            <div class="menu-wrapper hidden" id="menu-sec">
+                <div class="link"><a href="https://mp2i-vms.fr/pages.html"><i class="fa-solid fa-house"></i> Pages personnelles</a></div>
+                <div class="link"><a href="https://git.mp2i-vms.fr"><i class="fa-brands fa-git-alt"></i> Git</a></div>
+                <div class="link"><a href="https://play.mp2i-vms.fr"><i class="fa-solid fa-cubes"></i> Minecraft</a></div>
+            </div>
+        </div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/navigator.css b/navigator.css
index bb89f56..7866186 100644
--- a/navigator.css
+++ b/navigator.css
@@ -2,23 +2,68 @@ body {
     font-family: sans-serif;
     margin: 0;
 }
+
 .unified_navigator {
-    padding: 10px 50px;
-    display: flex;
-    justify-content: flex-start;
-    gap: 40px;
+    user-select: none;
     background: rgb(42,25,93);
     background: linear-gradient(90deg, rgba(42,25,93,1) 8%, rgba(60,11,89,1) 49%, rgba(34,0,71,1) 82%);
     color: white;
-    box-shadow: 0 10px 10px rgb(128, 128, 128);
-    line-height: 3em;
+    line-height: 2em;
+    font-size: 14px;
 }
 
-.unified_navigator .link {
-//padding: 15px 25px;
-//border: 2px solid red;
-//border-radius: .5em;
-//background: black;
+.unified_navigator .nav-container {
+    width: clamp(550px, 60%, 1000px);
+    margin: auto;
+    padding: 12px 50px;
+    display: flex;
+    justify-content: flex-start;
+    gap: 40px;
+}
+
+.unified_navigator .menu-wrapper {
+    display: contents;
+}
+
+.unified_navigator .logo-wrapper {
+    display: inline;
+    width: fit-content;
+    cursor: pointer;
+}
+
+.unified_navigator #dropdown-indicator {
+    display: none;
+}
+
+@media screen and (max-width: 600px) {
+    .unified_navigator .nav-container {
+        padding: 12px 0;
+        width: 100%;
+        flex-direction: column;
+        gap: 5px;
+        text-align: center;
+    }
+
+    .unified_navigator .menu-wrapper.hidden {
+        display: none;
+    }
+
+    .unified_navigator .logo-wrapper {
+        margin: auto;
+        padding: 5px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: transform 100ms;
+    }
+
+    .unified_navigator .logo-wrapper:hover {
+        transform: scale(1.1);
+    }
+
+    .unified_navigator i, .unified_navigator #dropdown-indicator {
+        display: inline;
+        margin: 0 5px;
+    }
 }
 
 .unified_navigator a:link, .unified_navigator a:visited {
