diff --git a/src/index.html b/src/index.html
index 55da993..5b7ca46 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,9 +13,7 @@
 		<div class="app-container">
 			<header class="header">
 				<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu">
-					<span class="hamburger-line"></span>
-					<span class="hamburger-line"></span>
-					<span class="hamburger-line"></span>
+					<span class="hamburger-icon"></span>
 				</button>
 				<div class="logo">
 					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
diff --git a/src/main.css b/src/main.css
index baecc7c..4369ac8 100644
--- a/src/main.css
+++ b/src/main.css
@@ -124,22 +124,46 @@ code, kbd {
 
 .menu-toggle {
 	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	width: 28px;
-	height: 20px;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
 	background: none;
 	border: none;
 	cursor: pointer;
-	padding: 0;
+	padding: 4px;
+	border-radius: var(--border-radius-sm);
 }
 
-.hamburger-line {
+.menu-toggle:hover {
+	background: var(--primary-bg-light);
+}
+
+.hamburger-icon {
+	position: relative;
+	width: 18px;
+	height: 2px;
+	background-color: var(--text-color);
+	border-radius: 1px;
+}
+
+.hamburger-icon::before,
+.hamburger-icon::after {
+	content: "";
+	position: absolute;
+	left: 0;
 	width: 100%;
 	height: 2px;
 	background-color: var(--text-color);
-	border-radius: 2px;
-	transition: all 0.3s ease;
+	border-radius: 1px;
+}
+
+.hamburger-icon::before {
+	top: -6px;
+}
+
+.hamburger-icon::after {
+	top: 6px;
 }
 
 .logo {