diff --git a/src/back/routes/common/navbar.css b/src/back/routes/common/navbar.css
new file mode 100644
index 0000000..a7d15c5
--- /dev/null
+++ b/src/back/routes/common/navbar.css
@@ -0,0 +1,115 @@
+.nav-logo {
+	display: flex;
+	align-items: center;
+}
+
+nav {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+
+	ul.desktop-menu {
+		display: flex;
+		gap: 8px;
+		padding-left: 0;
+
+		li {
+			list-style: none;
+		}
+	}
+
+	.hamburger-menu__icon {
+		cursor: pointer;
+
+		svg * {
+			fill: var(--color-brand-accent) !important;
+		}
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+
+	.hamburger-menu-toggle {
+		display: none;
+		anchor-name: --hamburger-toggle;
+
+		input {
+			display: none;
+		}
+
+		.hamburger-menu__open-icon {
+			display: block;
+			anchor-name: --my-anchor;
+		}
+
+		.hamburger-menu__close-icon {
+			display: none;
+		}
+	}
+
+	.hamburger-menu {
+		display: none;
+	}
+
+	@media (max-width: 1000px) {
+		.hamburger-menu-toggle {
+			display: flex;
+			align-items: center;
+		}
+
+		ul.desktop-menu {
+			display: none;
+		}
+
+		.hamburger-menu {
+			position: fixed;
+			position-anchor: --my-anchor;
+			top: calc(anchor(top) - 2px);
+			right: calc(anchor(right) - 14px);
+			display: flex;
+			opacity: 0;
+			transition: opacity 50ms;
+			pointer-events: none;
+			box-shadow: -3px 3px var(--color-brand-canvas-07);
+			background-color: var(--color-brand-canvas);
+			flex-flow: column;
+			padding: 12px;
+			padding-top: 2px;
+			align-items: flex-end;
+
+			ul {
+				display: flex !important;
+				margin: 0;
+				padding: 0;
+
+				flex-flow: column;
+				align-items: stretch;
+				justify-content: stretch;
+				width: 50%;
+				width: fit-content;
+				row-gap: 12px;
+
+				li {
+					list-style: none;
+
+					a {
+						margin: 0;
+						width: 100%;
+					}
+				}
+			}
+		}
+
+		&:has(#hamburger-menu-toggle-checkbox:checked) {
+			.hamburger-menu__close-icon {
+				display: block;
+			}
+
+			.hamburger-menu {
+				opacity: 1;
+				pointer-events: all;
+			}
+		}
+	}
+}
diff --git a/src/back/routes/common/navbar.ts b/src/back/routes/common/navbar.ts
index d10cc0f..e03ac50 100644
--- a/src/back/routes/common/navbar.ts
+++ b/src/back/routes/common/navbar.ts
@@ -1,5 +1,6 @@
 import type { Context } from "koa";
 import { button } from "src/back/elements/button.js";
+import { icon } from "src/back/icons.js";
 import { tempstream } from "tempstream";
 import type { FlatTemplatable } from "tempstream";
 import { breadcrumbs } from "./breadcrumbs.js";
@@ -26,7 +27,7 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
 		)
 		.join("\n");
 
-	return /* HTML */ tempstream`<nav>
+	return tempstream /* HTML */ `<nav>
 			<a href="/" class="nav-logo">
 				<img
 					src="/assets/logo"
@@ -36,9 +37,29 @@ export async function default_navbar(ctx: Context): Promise<FlatTemplatable> {
 				/>
 				${ctx.$app.manifest.name}
 			</a>
-			<ul>
+			<ul class="desktop-menu">
 				${linksHTML}
 			</ul>
+			<div class="hamburger-menu-toggle">
+				<input type="checkbox" id="hamburger-menu-toggle-checkbox" />
+				<label
+					for="hamburger-menu-toggle-checkbox"
+					class="hamburger-menu__icon hamburger-menu__open-icon"
+				>
+					${icon("hamburger")}
+				</label>
+			</div>
+			<div class="hamburger-menu">
+				<label
+					for="hamburger-menu-toggle-checkbox"
+					class="hamburger-menu__icon hamburger-menu__close-icon"
+				>
+					${icon("hamburger-close")}
+				</label>
+				<ul>
+					${linksHTML}
+				</ul>
+			</div>
 		</nav>
 		${breadcrumbs(ctx)} `;
 }
diff --git a/src/icons/hamburger-close.svg b/src/icons/hamburger-close.svg
new file mode 100644
index 0000000..1b3f341
--- /dev/null
+++ b/src/icons/hamburger-close.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="icon"
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   sodipodi:docname="hamburger-close.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="7.6390567"
+     inkscape:cx="9.6870599"
+     inkscape:cy="26.377602"
+     inkscape:window-width="1536"
+     inkscape:window-height="832"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g2" />
+  <defs
+     id="defs1">
+    <style
+       id="style1">
+      .cls-1 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-0.33652353,-1.2228587)">
+    <g
+       id="g2"
+       transform="translate(0,1.89814)">
+      <rect
+         id="rect1"
+         width="23.110205"
+         height="3.0114162"
+         x="10.832777"
+         y="-2.2211621"
+         inkscape:transform-center-x="-8.1456912"
+         transform="rotate(45)"
+         inkscape:transform-center-y="8.1456912" />
+      <rect
+         id="use2"
+         width="23.110205"
+         height="3.0114162"
+         x="-12.270555"
+         y="-23.893587"
+         inkscape:transform-center-x="-7.9605633"
+         transform="rotate(135)"
+         inkscape:transform-center-y="-7.960561" />
+    </g>
+  </g>
+</svg>
diff --git a/src/icons/hamburger.svg b/src/icons/hamburger.svg
new file mode 100644
index 0000000..a8199cb
--- /dev/null
+++ b/src/icons/hamburger.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="icon"
+   width="32"
+   height="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   sodipodi:docname="hamburger.svg"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="7.6390567"
+     inkscape:cx="9.6870599"
+     inkscape:cy="26.377602"
+     inkscape:window-width="1536"
+     inkscape:window-height="832"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g1" />
+  <defs
+     id="defs1">
+    <style
+       id="style1">
+      .cls-1 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <g
+     id="g1"
+     transform="translate(-0.33652353,-1.2228587)">
+    <g
+       id="g2"
+       transform="translate(0,1.89814)">
+      <rect
+         style=""
+         id="rect1"
+         width="23.110205"
+         height="3.0114162"
+         x="4.7814212"
+         y="8.0485344" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#rect1"
+         id="use1"
+         transform="translate(0,5.7704762)" />
+      <use
+         x="0"
+         y="0"
+         xlink:href="#use1"
+         id="use2"
+         transform="translate(0,5.7704762)" />
+    </g>
+  </g>
+</svg>
diff --git a/src/main.css b/src/main.css
index 5fc9d6f..5f8f215 100644
--- a/src/main.css
+++ b/src/main.css
@@ -98,27 +98,6 @@ body {
 	padding: 0.5rem;
 }
 
-.nav-logo {
-	display: flex;
-	align-items: center;
-}
-
-nav {
-	display: flex;
-	flex-flow: row wrap;
-	justify-content: space-between;
-
-	ul {
-		display: flex;
-		gap: 8px;
-		padding-left: 0;
-
-		li {
-			list-style: none;
-		}
-	}
-}
-
 body.jdd-editor {
 	margin: 0 !important;
 	padding: 0 !important;