diff --git a/.gitignore b/.gitignore
index 925d54ce..33acb324 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ rls
 translations
 po/*.po~
 .env
+Rocket.toml
diff --git a/static/images/boxicon-menu.svg b/static/images/boxicon-menu.svg
new file mode 100644
index 00000000..0dd7a2ba
--- /dev/null
+++ b/static/images/boxicon-menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" fill="#F4F4F4"/></svg>
\ No newline at end of file
diff --git a/static/js/menu.js b/static/js/menu.js
new file mode 100644
index 00000000..b40b5650
--- /dev/null
+++ b/static/js/menu.js
@@ -0,0 +1,10 @@
+document.addEventListener("DOMContentLoaded", () => {
+	let content = document.getElementById("content");
+	document.getElementById("menu").querySelector("a").addEventListener("click", () => {
+		content.classList.add("opened");
+	});
+	content.addEventListener("click", (e) => {
+		if (e.target === content)
+			content.classList.remove("opened");
+	});
+});
\ No newline at end of file
diff --git a/static/main.css b/static/main.css
index 5f218a57..ebd7310d 100644
--- a/static/main.css
+++ b/static/main.css
@@ -25,14 +25,31 @@ a, a:visited {
  */
 
 header {
+	background: #ECECEC;
+}
+header #content {
 	display: flex;
 	align-content: center;
 	justify-content: space-between;
-	background: #ECECEC;
 }
 
-header #menu {
+header nav#menu {
+	position: relative;
 	display: none;
+	transform: skewX(-15deg);
+	left: -1em;
+	padding: 1em 1em 1em 2em;
+	background: #7765E3;
+	align-self: flex-start;
+}
+header nav#menu a {
+	transform: skewX(15deg);
+	width: 1.75em;
+	height: 1.75em;
+	margin: 0;
+	padding: 0;
+	background: url("/static/images/boxicon-menu.svg") no-repeat center;
+	background-size: contain;
 }
 
 header nav {
@@ -483,31 +500,80 @@ form.new-post input[type="submit"] {
  *   Small Screens   *
  * ================= */
 
-@media screen and (max-width: 500px) {
-	header {	
-		padding: 1em;
+@media screen and (max-width: 900px) {
+	header {
 		flex-direction: column;
 	}
 
-	header #menu {	
-		display: flex;
+	header nav#menu {	
+		display: inline-flex;
 	}
 
-	header > nav {	
+	header #content {
 		display: none;
 		text-align: center;
 	}
-	header nav a, header nav a.title { padding: 0.5em; }
-	header nav a.title {	
-		width: 100vw;
-		margin: 0;
-		border: none;
-		font-size: 1.75em;
+
+	@keyframes menuOpening {
+		from {
+			transform: scaleX(0);
+			transform-origin: left;
+			opacity: 0;
+		}
+
+		to {
+			transform: scaleX(1);
+			transform-origin: left;
+			opacity: 1;
+		}
 	}
 
-	header:focus-within > nav {	
+	header #content.opened, header:focus-within #content {
+		position: fixed;
 		display: flex;
 		flex-direction: column;
+		justify-content: flex-start;
+
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+
+		animation: 0.2s menuOpening;
+	}
+	header #content.opened::before, header:focus-within #content::before {
+		content: "";
+		position: absolute;
+		transform: skewX(-10deg);
+		top: 0;
+		left: -20%;
+		width: 100%;
+		height: 100%;
+
+		z-index: -10;
+
+		background: #7765E3;
+	}
+	header #content.opened > nav, header:focus-within #content > nav {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+	header #content.opened > nav a, header:focus-within #content > nav a {
+		margin: 0;
+		padding: 1rem 1.5rem;
+		color: #F4F4F4;
+		font-size: 1.4em;
+		font-weight: 300;
+	}
+	header #content.opened > nav a.title, header:focus-within #content > nav a.title {
+		font-size: 1.8em;
+	}
+	header #content.opened > nav hr, header:focus-within #content > nav hr {
+		display: block;
+		margin: 0;
+		width: 100%;
+		border: solid #F4F4F4 0.1rem;
 	}
 
 	body > main > * {	
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 6d843110..6c8c3f61 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -6,27 +6,32 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />        
         <link rel="stylesheet" href="/static/main.css" />
         <link rel="stylesheet" href="/static/fontawesome-5.0.10/css/fontawesome-all.min.css" />
+        <script src="/static/js/menu.js"></script>
     </head>
     <body>
         <header>
-            <nav id="menu"><a href="#">{{ "Menu" | _ }}</a></nav>
-            <nav>
-                <a href="/" class="title">{{ "Plume" | _ }}</a>
-                <hr/>
-                {% block header %}
-                {% endblock header %}
-            </nav>
-            <nav>
-                {% if account %}
-                    <a href="/dashboard">{{ "Dashboard" | _ }}</a>
-                    <a href="/notifications">{{ "Notifications" | _ }}</a>
-                    <a href="/me">{{ "My account" | _ }}</a>
-                    <a href="/logout">{{ "Log Out" | _ }}</a>
-                {% else %}
-                    <a href="/login">{{ "Log In" | _ }}</a>
-                    <a href="/users/new">{{ "Register" | _ }}</a>
-                {% endif %}
+            <nav id="menu">
+                <a href="#" aria-label="{{ "Menu" | _ }}" title="{{ "Menu" | _ }}"></a>
             </nav>
+            <div id="content">
+                <nav>
+                    <a href="/" class="title">{{ "Plume" | _ }}</a>
+                    <hr/>
+                    {% block header %}
+                    {% endblock header %}
+                </nav>
+                <nav>
+                    {% if account %}
+                        <a href="/dashboard">{{ "Dashboard" | _ }}</a>
+                        <a href="/notifications">{{ "Notifications" | _ }}</a>
+                        <a href="/me">{{ "My account" | _ }}</a>
+                        <a href="/logout">{{ "Log Out" | _ }}</a>
+                    {% else %}
+                        <a href="/login">{{ "Log In" | _ }}</a>
+                        <a href="/users/new">{{ "Register" | _ }}</a>
+                    {% endif %}
+                </nav>
+            </div>
         </header>
         <main>
             {% block content %}