--- a/mrjunejune/pages/parts/header.html	Thu Jan 01 05:57:03 2026 -0800
+++ b/mrjunejune/pages/parts/header.html	Thu Jan 01 08:23:46 2026 -0800
@@ -1,26 +1,3 @@
-<header>
-	<nav>
-      <h2 class="header-logo">
-        <div id="themeToggle">
-          <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_favicon.svg" height="50" width="50">
-        </div>
-        <a href="/">MrJuneJune</a>
-      </h2>
-		<div class="internal-links">
-			<a href="/resume">Resume</a>
-			<a href="/tools">Tools</a>
-    </div>
-    <div class="social-links">
-			<a href="https://github.com/mrjunejune" target="_blank">
-				<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"
-					><path
-						fill="currentColor"
-						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-					></path></svg>
-			</a>
-		</div>
-	</nav>
-</header>
 <style>
   :root {
     --header-background: var(--white);
@@ -32,19 +9,19 @@
     width: 33%;
   }
   .header-logo {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr ;
     align-items: center;
   }
   header {
   	margin: auto;
-  	padding: 0 1em;
-      background: var(--header-background);
-      color: rgb(var(--header-color));
-      font-family: "Atkinson", sans-serif;
-      box-shadow: 0 2px 8px rgba(var(--black), 5%);
-      width: 720px;
-      max-width: calc(100% - 2em);
-
+  	padding: 1em 1em;
+    background: var(--header-background);
+    color: rgb(var(--header-color));
+    font-family: "Atkinson", sans-serif;
+    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    width: 720px;
+    max-width: calc(100% - 2em);
   }
   h2 {
   	margin: 0;
@@ -54,21 +31,6 @@
   h2 a.active {
   	text-decoration: none;
   }
-  nav {
-  	display: flex;
-  	align-items: center;
-  	justify-content: space-between;
-  }
-  nav a {
-  	padding: 1em 0.5em;
-  	color: rgb(var(--header-color));
-  	border-bottom: 4px solid transparent;
-  	text-decoration: none;
-  }
-  nav a.active {
-  	text-decoration: none;
-  	border-bottom-color: var(--link-hover-accent);
-  }
   .social-links,
   .social-links a {
     display: flex;
@@ -83,20 +45,35 @@
   	.social-links {
   		display: none;
   	}
-  .internal-links {
-    width: 45%;
-  }
-  }
-  :global(.dark) img {
-    -webkit-filter: invert(1); /* safari 6.0 - 9.0 */
-            filter: invert(1);
+    .internal-links {
+      width: 45%;
+    }
   }
   #themeToggle {
     background: var(--header-background);
     display: flex;
     align-items: center;
     border-radius: 25px;
-    filter: invert(1);
     cursor: pointer;
   }
+
+  /* Dark Mode toggles */
+  :is(html.dark, @media (prefers-color-scheme: dark) { html }) img {
+    -webkit-filter:  grayscale(1);
+    filter:  grayscale(1);
+  }
+  :is(html.light-mode, @media (prefers-color-scheme: dark) { html }) img {
+    -webkit-filter: brightness(2.9) grayscale(1);
+    filter:  brightness(2.9) grayscale(1);
+  }
 </style>
+<header>
+  <h2 class="header-logo">
+    <div id="themeToggle">
+      <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
+    </div>
+    <a href="/">MrJuneJune</a>
+  </h2>
+</header>
+<script src="index.js"></script>
+