diff --git a/src/components/Header.astro b/src/components/Header.astro
index d8f18efa..9ef8a7b1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -11,16 +11,24 @@ const pages = [
 
 <style>
     .cancel-button {
-        background: none;
-        border: none;
         color: var(--ayu-red-500);
         cursor: pointer;
-        padding: 0;
+    }
+
+    .cancel-button .text {
+        transition: color 0.2s ease;
+        color: var(--ayu-accent);
+    }
+
+    .cancel-button:hover .text {
+        color: var(--ayu-red-500);
     }
 </style>
 
-<header class="">
-    <div class="w-full flex items-center gap-3 px-4 py-2 border-b-1 border-ayu-gutter">
+<header>
+    <div
+        class="w-full flex items-center gap-3 px-4 py-2 border-b-1 border-ayu-gutter"
+    >
         <img src="/favicon.svg" alt="oliver bryan icon" class="h-6 w-6" />
         <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1>
     </div>
@@ -39,14 +47,17 @@ const pages = [
 
         {
             !pages.find((page) => page.path === currentPage.path) && (
-                <span class="flex items-center justify-start gap-2">
-                    <span class="text-ayu-gutter">| {currentPage.path} </span>
+                <span class="flex items-center justify-start gap-4 text-ayu-gutter">
+                    {"|"}
                     <button
-                        class="cancel-button flex items-center justify-center"
+                        class="cancel-button flex items-center justify-center gap-2"
                         type="button"
                         onclick="window.location.href='/'"
                     >
-                        <span class="text-2xl leading-none">&times;</span>
+                        <span class="text-sm text">{currentPage.path} </span>
+                        <span class="text-xl leading-none text-ayu-red-500">
+                            &times;
+                        </span>
                     </button>
                 </span>
             )