diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro
deleted file mode 100644
index 7093515..0000000
--- a/src/components/Hamburger.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
----
-
-<div class="hamburger">
-  <span class="line"></span>
-  <span class="line"></span>
-  <span class="line"></span>
-</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 1da8286..d6e1524 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,13 +1,22 @@
 ---
-import Hamburger from "./Hamburger.astro";
+import Menu from "./Menu.astro";
 import Navigation from "./Navigation.astro";
 import ThemeIcon from "./ThemeIcon.astro";
 ---
 
 <header>
   <nav>
-    <Hamburger />
-    <ThemeIcon />
+    <div>
+      <ThemeIcon />
+      <Menu />
+    </div>
     <Navigation />
   </nav>
 </header>
+
+<style>
+  div {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
new file mode 100644
index 0000000..f601af2
--- /dev/null
+++ b/src/components/Menu.astro
@@ -0,0 +1,6 @@
+---
+---
+
+<button aria-expanded="false" aria-controls="main-menu" class="menu">
+  Menu
+</button>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 308e5d1..bf97dd4 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,6 +1,6 @@
 ---
 ---
-<div class="nav-links">
+<div id="main-menu" class="nav-links">
   <a href="/">Home</a>
   <a href="/about/">About</a>
   <a href="/blog/">Blog</a>
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index 61c4fd5..827caaf 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -2,8 +2,8 @@
 
 ---
 
-<button id="themeToggle">
-  <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<button id="themeToggle" aria-label="Toggle theme">
+  <svg aria-hidden="true" width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
       class="sun"
       fill-rule="evenodd"
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 6019c86..1bb9763 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -15,7 +15,7 @@ const identity = {
 
 const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
 
-const skillColor = "navy";
+const skillColor = "crimson";
 const fontWeight = "bold";
 const textCase = "uppercase";
 ---
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
index 3e950bd..c895b64 100644
--- a/src/scripts/menu.js
+++ b/src/scripts/menu.js
@@ -1,3 +1,6 @@
-document.querySelector('.hamburger').addEventListener('click', () => {
-  document.querySelector('.nav-links').classList.toggle('expanded');
+const menu = document.querySelector('.menu')
+
+menu.addEventListener('click', () => {
+  const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+  menu.setAttribute('aria-expanded', !isExpanded);
 });
diff --git a/src/styles/global.css b/src/styles/global.css
index 0768104..7ab5ecc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -22,24 +22,18 @@ h1 {
 
 /* nav styles */
 
-.hamburger {
-  padding-right: 20px;
-  cursor: pointer;
+.menu {
+  background-color: #0d0950;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
 }
 
-.hamburger .line {
-  display: block;
-  width: 40px;
-  height: 5px;
-  margin-bottom: 10px;
-  background-color: #ff9776;
-}
 
 .nav-links {
   width: 100%;
-  top: 5rem;
-  left: 48px;
-  background-color: #ff9776;
   display: none;
   margin: 0;
 }
@@ -52,6 +46,7 @@ h1 {
   font-size: 1.2rem;
   font-weight: bold;
   text-transform: uppercase;
+  color: #0d0950;
 }
 
 .nav-links a:hover,
@@ -59,7 +54,7 @@ h1 {
   background-color: #ff9776;
 }
 
-.expanded {
+:has(.menu[aria-expanded="true"]) .nav-links {
   display: unset;
 }
 
@@ -77,7 +72,7 @@ h1 {
     padding: 15px 20px;
   }
 
-  .hamburger {
+  .menu {
     display: none;
   }
 }
@@ -87,6 +82,20 @@ html.dark {
   color: #fff;
 }
 
+.dark .menu {
+  background-color: #fff;
+  color: #000;
+}
+
+.dark .nav-links a:hover,
+.dark .nav-links a:focus {
+  color: #0d0950;
+}
+
 .dark .nav-links a {
   color: #fff;
+}
+
+.dark a {
+  color: #ff9776;
 }
\ No newline at end of file