diff --git a/static/readme-logo-dark.svg b/static/readme-logo-dark.svg
index e69b827..7131c4a 100644
--- a/static/readme-logo-dark.svg
+++ b/static/readme-logo-dark.svg
@@ -1,4 +1,40 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="miter">
-  <rect x="6" y="10" width="12" height="12" />
-  <rect x="14" y="6" width="12" height="12" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140">
+  <defs>
+    <linearGradient id="bg-grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0d0d0d" />
+      <stop offset="100%" stop-color="#1a1a1a" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle with gradient -->
+  <circle cx="70" cy="70" r="60" fill="url(#bg-grad-dark)" />
+  
+  <!-- Stylized play button with Japanese geometric influence -->
+  <path 
+    d="M55 45 L55 95 L95 70 Z" 
+    fill="none" 
+    stroke="#ff6b6b" 
+    stroke-width="4" 
+    stroke-linejoin="miter"
+  />
+  
+  <!-- Outer frame - Japanese inspired rectangle -->
+  <rect 
+    x="30" y="30" 
+    width="80" height="80" 
+    rx="4"
+    fill="none" 
+    stroke="#2d2d2d" 
+    stroke-width="2"
+    stroke-dasharray="8 4"
+  />
+  
+  <!-- Corner accents -->
+  <path d="M35 40 L35 35 L40 35" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  <path d="M100 35 L105 35 L105 40" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  <path d="M105 100 L105 105 L100 105" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  <path d="M40 105 L35 105 L35 100" fill="none" stroke="#ff6b6b" stroke-width="2" stroke-linecap="round" />
+  
+  <!-- Subtle inner glow -->
+  <circle cx="70" cy="70" r="20" fill="none" stroke="#ff6b6b" stroke-width="0.5" opacity="0.3" />
+</svg>
\ No newline at end of file
diff --git a/static/readme-logo-light.svg b/static/readme-logo-light.svg
index b83f8a4..ff85769 100644
--- a/static/readme-logo-light.svg
+++ b/static/readme-logo-light.svg
@@ -1,4 +1,40 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#000000" stroke-width="2.5" stroke-linejoin="miter">
-  <rect x="6" y="10" width="12" height="12" />
-  <rect x="14" y="6" width="12" height="12" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140">
+  <defs>
+    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1a1a2e" />
+      <stop offset="100%" stop-color="#16213e" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle with gradient -->
+  <circle cx="70" cy="70" r="60" fill="url(#bg-grad)" />
+  
+  <!-- Stylized play button with Japanese geometric influence -->
+  <path 
+    d="M55 45 L55 95 L95 70 Z" 
+    fill="none" 
+    stroke="#e94560" 
+    stroke-width="4" 
+    stroke-linejoin="miter"
+  />
+  
+  <!-- Outer frame - Japanese inspired rectangle -->
+  <rect 
+    x="30" y="30" 
+    width="80" height="80" 
+    rx="4"
+    fill="none" 
+    stroke="#0f3460" 
+    stroke-width="2"
+    stroke-dasharray="8 4"
+  />
+  
+  <!-- Corner accents -->
+  <path d="M35 40 L35 35 L40 35" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  <path d="M100 35 L105 35 L105 40" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  <path d="M105 100 L105 105 L100 105" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  <path d="M40 105 L35 105 L35 100" fill="none" stroke="#e94560" stroke-width="2" stroke-linecap="round" />
+  
+  <!-- Subtle inner glow -->
+  <circle cx="70" cy="70" r="20" fill="none" stroke="#e94560" stroke-width="0.5" opacity="0.3" />
+</svg>
\ No newline at end of file
diff --git a/templates/components/header.gohtml b/templates/components/header.gohtml
index e441ef5..8a7ca71 100644
--- a/templates/components/header.gohtml
+++ b/templates/components/header.gohtml
@@ -8,11 +8,11 @@
       <button onclick="toggleSidebar()" class="hidden text-neutral-400 transition-colors hover:text-white focus:outline-none lg:block">
         <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="12" y2="12"/><line x1="3" x2="21" y1="6" y2="6"/><line x1="3" x2="21" y1="18" y2="18"/></svg>
       </button>
-      <a href="/" class="group flex items-center gap-2 focus:outline-none">
-        <svg class="h-7 w-7 transition-transform group-hover:scale-110" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M15 80 L25 30 L50 60 L75 30 L85 80" stroke="currentColor" class="text-accent" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-          <circle cx="50" cy="25" r="8" fill="white" />
-        </svg>
+      <a href="/" class="group flex items-center gap-2.5 focus:outline-none">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="/static/readme-logo-dark.svg" />
+          <img src="/static/readme-logo-light.svg" alt="MAL" class="h-8 w-8" />
+        </picture>
         <span class="text-xl font-bold tracking-tight text-white hidden sm:block">MyAnime<span class="text-accent">List</span></span>
       </a>
     </div>