diff --git a/account.html b/account.html
index 843b580..1aa68f6 100644
--- a/account.html
+++ b/account.html
@@ -10,12 +10,16 @@
 		<script src="scripts/account.js" type="module"></script>
 	</head>
 	<body>
-		<header class="w3-black w3-bar">				
-			<nav class="w3-large w3-bar" id="nav">
-				<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
-				<a class="w3-bar-item w3-mobile w3-button" href="index.html">Instances</a>
-				<a class="w3-bar-item w3-mobile w3-button" href="account.html" aria-current="true">Account</a>
-				<a class="w3-bar-item w3-mobile w3-button" href="login.html">Logout</a>
+		<header>
+			<nav id="hamnav">
+				<h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
+				<label for="hamburger">&#9776;</label>
+				<input type="checkbox" id="hamburger">
+				<div id="hamitems">
+					<a href="index.html">Instances</a>
+					<a href="account.html" aria-current="true">Account</a>
+					<a href="login.html">Logout</a>
+				</div>
 			</nav>
 		</header>
 		<main class="w3-container">
diff --git a/config.html b/config.html
index 1561605..66b6f5e 100644
--- a/config.html
+++ b/config.html
@@ -11,12 +11,16 @@
 		<script src="scripts/config.js" type="module"></script>
 	</head>
 	<body>
-		<header class="w3-black w3-bar">				
-			<nav class="w3-large w3-bar" id="nav">
-				<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
-				<a class="w3-bar-item w3-mobile w3-button" href="index.html" aria-current="true">Instances</a>
-				<a class="w3-bar-item w3-mobile w3-button" href="account.html">Account</a>
-				<a class="w3-bar-item w3-mobile w3-button" href="login.html">Logout</a>
+		<header>
+			<nav id="hamnav">
+				<h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
+				<label for="hamburger">&#9776;</label>
+				<input type="checkbox" id="hamburger">
+				<div id="hamitems">
+					<a href="index.html" aria-current="true">Instances</a>
+					<a href="account.html">Account</a>
+					<a href="login.html">Logout</a>
+				</div>
 			</nav>
 		</header>
 		<main class="w3-container">
diff --git a/css/style.css b/css/style.css
index d3dce6e..30f8dc4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,6 +3,10 @@
 	--success-color: #0f0;
 }
 
+* {
+	box-sizing: border-box;
+}
+
 h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td {
 	font-family: monospace;
 }
@@ -45,4 +49,84 @@ img {
 
 .none {
 	display: none;
+}
+
+nav {
+	overflow: hidden;
+	color: white;
+	background-color: black;
+	font-size: larger;
+}
+
+nav a, nav h1, nav label {
+	text-align: left;
+	padding: 14px 16px;
+	text-decoration: none;
+}
+
+#hamitems a:hover {
+	background-color: white;
+	color: black;
+}
+
+#hamitems a[aria-current="true"] {
+	background-color: white;
+	color: black;
+}
+
+#hamitems:hover a[aria-current="true"] {
+	background-color: black;
+	color: white;
+}
+
+#hamitems:hover a[aria-current="true"]:hover {
+	background-color: white;
+	color: black;
+}
+
+#hamnav label, #hamburger {
+	display: none;
+}
+
+@media screen and (min-width: 600px){
+	nav {
+		display: flex;
+		align-items: center;
+	}
+
+	#hamitems {
+		display: flex;
+	}
+}
+
+@media screen and (max-width: 600px){
+	nav {
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
+	#hamitems {
+		display: block;
+		grid-column: 1 / span 2;
+	}
+
+	#hamitems a {
+		box-sizing: border-box;
+		display: block;
+		text-align: center;
+		width: 100%;
+		border-top: 1px solid #888;
+	}
+
+   	#hamnav label { 
+		display: inline-block; 
+	}
+  
+	#hamitems { 
+		display: none; 
+	}
+
+	#hamnav input:checked ~ #hamitems { 
+		display: block; 
+	}
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ab43b4c..22962b6 100644
--- a/index.html
+++ b/index.html
@@ -11,12 +11,16 @@
 		<script src="scripts/instance.js" type="module"></script>
 	</head>
 	<body>
-		<header class="w3-black w3-bar">				
-			<nav class="w3-large w3-bar" id="nav">
-				<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
-				<a class="w3-bar-item w3-mobile w3-button" href="index.html" aria-current="true">Instances</a>
-				<a class="w3-bar-item w3-mobile w3-button" href="account.html">Account</a>
-				<a class="w3-bar-item w3-mobile w3-button" href="login.html">Logout</a>
+		<header>
+			<nav id="hamnav">
+				<h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
+				<label for="hamburger">&#9776;</label>
+				<input type="checkbox" id="hamburger">
+				<div id="hamitems">
+					<a href="index.html" aria-current="true">Instances</a>
+					<a href="account.html">Account</a>
+					<a href="login.html">Logout</a>
+				</div>
 			</nav>
 		</header>
 		<main class="w3-container">
diff --git a/login.html b/login.html
index a8f8633..f6a8711 100644
--- a/login.html
+++ b/login.html
@@ -10,10 +10,14 @@
 		<script src="scripts/login.js" type="module"></script>
 	</head>
 	<body class="w3-display-container" style="min-height: 100vh;">
-		<header class="w3-black w3-bar">				
-			<nav class="w3-large w3-bar" id="nav">
-				<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
-				<a class="w3-bar-item w3-mobile w3-button w3-hide-small" href="login.html" aria-current="true">Login</a>
+		<header>
+			<nav id="hamnav">
+				<h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
+				<label for="hamburger">&#9776;</label>
+				<input type="checkbox" id="hamburger">
+				<div id="hamitems">
+					<a href="login.html" aria-current="true">Login</a>
+				</div>
 			</nav>
 		</header>
 		<main class="w3-container w3-display-middle w3-mobile">
