From 296581fedfec59b534542b070d41e0235508f930 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sun, 17 May 2026 02:49:47 +0200
Subject: [PATCH] refactor: replace harsh shadows with subtle ring+shadow, add
 heading-serif and border-hairline

---
 templates/anime.gohtml                        |  8 ++++----
 templates/base.gohtml                         |  2 +-
 templates/browse.gohtml                       |  2 +-
 templates/components/anime_card.gohtml        | 12 ++++++------
 templates/components/dropdown.gohtml          |  4 ++--
 templates/components/filter_bar.gohtml        |  8 ++++----
 templates/components/navigation.gohtml        |  2 +-
 templates/components/video_player.gohtml      |  6 +++---
 templates/components/watchlist_actions.gohtml |  2 +-
 templates/discover.gohtml                     |  8 ++++----
 templates/login.gohtml                        |  4 ++--
 templates/watch.gohtml                        |  6 +++---
 templates/watchlist.gohtml                    |  6 +++---
 templates/watchlist_partial.gohtml            |  8 ++++----
 14 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 424ec7d..7a29627 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -98,7 +98,7 @@
 <div class="flex w-full flex-col gap-10 lg:pr-80">
   <div class="flex flex-col gap-8 md:flex-row lg:gap-12">
     <div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
-      <div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-lg">
+      <div class="aspect-2/3 w-full overflow-hidden border-hairline bg-background-surface shadow-soft">
         {{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
         {{if $anime.Images.Webp.LargeImageURL}}
           {{$imageUrl = $anime.Images.Webp.LargeImageURL}}
@@ -111,7 +111,7 @@
 
     <div class="flex grow flex-col">
       <div class="mb-4">
-        <h1 class="text-2xl font-normal text-foreground md:text-4xl">
+        <h1 class="heading-serif text-2xl font-normal text-foreground md:text-4xl">
           {{$anime.DisplayTitle}}
         </h1>
         {{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
@@ -344,7 +344,7 @@
 </div>
 
 <div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
-  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-2xl ring-1 ring-border">
+  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border">
     <div class="flex items-center justify-between border-b border-border px-6 py-4">
       <h2 class="text-base font-normal text-foreground">Theme Songs</h2>
       <button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted ring-1 ring-border transition-colors hover:text-foreground">Close</button>
@@ -380,4 +380,4 @@
 })();
 </script>
 
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/templates/base.gohtml b/templates/base.gohtml
index d0f9575..9338eb1 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -35,7 +35,7 @@
   </style>
    <script type="module" src="/dist/static/theme.js" defer></script>
    <template id="toast-template">
-      <div class="toast pointer-events-auto w-[22rem] max-w-[calc(100vw-2rem)] bg-background shadow-2xl ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0">
+      <div class="toast pointer-events-auto w-[22rem] max-w-[calc(100vw-2rem)] bg-background shadow-soft ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0">
         <div class="min-w-0 flex-1">
          <div class="toast-message text-sm font-medium text-foreground leading-snug"></div>
        </div>
diff --git a/templates/browse.gohtml b/templates/browse.gohtml
index 29892b7..8fb215d 100644
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -7,7 +7,7 @@
 {{define "browse_content"}}
 <div id="browse-content" class="flex flex-col gap-6">
   <div class="flex items-end justify-between">
-    <h1 class="text-xl font-normal text-foreground">Browse</h1>
+    <h1 class="heading-serif text-xl font-normal text-foreground">Browse</h1>
   </div>
 
   {{template "filter_bar" .}}
diff --git a/templates/components/anime_card.gohtml b/templates/components/anime_card.gohtml
index 79ad98f..7fb98d6 100644
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -17,32 +17,32 @@
 {{$displayTitle := $anime.DisplayTitle}}
 
 <div class="flex w-full flex-col gap-2" data-id="{{$dataId}}">
-  <a href="/anime/{{$anime.MalID}}" class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-background-surface after:absolute after:inset-0 {{if $withActions}}after:bg-black/80 after:opacity-0 hover:after:opacity-100{{else}}after:bg-linear-to-t after:from-black/80 after:via-black/20 after:to-transparent after:opacity-80 hover:after:opacity-100{{end}} after:transition-opacity">
+  <a href="/anime/{{$anime.MalID}}" class="group relative flex aspect-2/3 w-full flex-col overflow-hidden border-hairline bg-background-surface after:absolute after:inset-0 {{if $withActions}}after:bg-black/80 after:opacity-0 hover:after:opacity-100{{else}}after:bg-linear-to-t after:from-black/80 after:via-black/20 after:to-transparent after:opacity-80 hover:after:opacity-100{{end}} after:transition-opacity">
     <img src="{{$imageUrl}}" alt="{{$displayTitle}}" class="h-full w-full object-cover" loading="lazy" />
 
     {{if $withActions}}
       <div class="absolute inset-0 z-10 flex flex-col p-3 {{if $hasTopBadge}}pt-10{{end}} opacity-0 transition-opacity duration-300 group-hover:opacity-100">
         {{if not $isWatchlist}}
-          <h3 class="mb-1.5 line-clamp-2 text-base font-semibold text-white shadow-black drop-shadow-md">
+          <h3 class="mb-1.5 line-clamp-2 text-base font-semibold text-white">
             {{$displayTitle}}
           </h3>
         {{end}}
 
         {{if $anime.Synopsis}}
-          <p class="line-clamp-4 text-xs leading-relaxed text-white/80 shadow-black drop-shadow-md">
+          <p class="line-clamp-4 text-xs leading-relaxed text-white/80">
             {{$anime.Synopsis}}
           </p>
         {{end}}
 
         <div class="mt-auto flex items-center justify-start pb-2 pl-2">
           <button type="button" data-mal-id="{{$anime.MalID}}" onclick="event.preventDefault(); event.stopPropagation(); toggleWatchlist({{$anime.MalID}}, '{{$anime.DisplayTitle}}', this)" class="text-accent hover:text-accent/80 transition-colors focus:outline-none {{if $isWatchlist}}in-watchlist{{end}}" aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}">
-            <svg class="size-6 shadow-black drop-shadow-md watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
+            <svg class="size-6 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
           </button>
         </div>
       </div>
     {{else}}
       <div class="absolute bottom-0 left-0 z-10 w-full p-4">
-        <h3 class="line-clamp-2 text-sm font-medium text-white shadow-black drop-shadow-md {{if $compact}}mb-0{{end}}">
+        <h3 class="line-clamp-2 text-sm font-medium text-white {{if $compact}}mb-0{{end}}">
           {{$displayTitle}}
         </h3>
         {{if not $compact}}
@@ -72,4 +72,4 @@
     </h3>
   {{end}}
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/templates/components/dropdown.gohtml b/templates/components/dropdown.gohtml
index fad594a..49eb602 100644
--- a/templates/components/dropdown.gohtml
+++ b/templates/components/dropdown.gohtml
@@ -4,10 +4,10 @@
     {{template "dropdown_trigger" .}}
   </div>
 
-  <div data-content class="hidden absolute z-50 {{if .Width}}{{.Width}}{{else}}min-w-[320px]{{end}} bg-background-button rounded-none shadow-2xl {{if eq .Align "left"}}left-0{{else}}right-0{{end}} {{if eq .Position "top"}}bottom-full mb-2{{else}}top-full mt-2{{end}}">
+  <div data-content class="hidden absolute z-50 {{if .Width}}{{.Width}}{{else}}min-w-[320px]{{end}} bg-background-button rounded-none shadow-soft ring-1 ring-border {{if eq .Align "left"}}left-0{{else}}right-0{{end}} {{if eq .Position "top"}}bottom-full mb-2{{else}}top-full mt-2{{end}}">
     <div class="flex flex-col py-1">
       {{template "dropdown_children" .}}
     </div>
   </div>
 </ui-dropdown>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/templates/components/filter_bar.gohtml b/templates/components/filter_bar.gohtml
index 39baab5..eadcc61 100644
--- a/templates/components/filter_bar.gohtml
+++ b/templates/components/filter_bar.gohtml
@@ -45,7 +45,7 @@
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
       <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="flex flex-col py-1">
         <input type="hidden" name="q" value="{{.Query}}">
         {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
@@ -75,7 +75,7 @@
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
       <div class="flex flex-col py-1">
         <a href="?status=&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Any Status</a>
         <a href="?status=airing&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Airing</a>
@@ -92,7 +92,7 @@
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
       <div class="flex flex-col py-1">
         <a href="?type=&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Any Type</a>
         <a href="?type=tv&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">TV</a>
@@ -112,7 +112,7 @@
           <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
         </button>
       </div>
-      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
         <div class="flex flex-col py-1">
           <a href="?order_by=&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Default</a>
           <a href="?order_by=popularity&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Popularity</a>
diff --git a/templates/components/navigation.gohtml b/templates/components/navigation.gohtml
index 74f66e0..024d5e6 100644
--- a/templates/components/navigation.gohtml
+++ b/templates/components/navigation.gohtml
@@ -23,7 +23,7 @@
     </button>
 
     <div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-search-dialog aria-hidden="true">
-      <form action="/browse" method="GET" class="w-full max-w-2xl overflow-hidden bg-background-button shadow-2xl ring-1 ring-border" data-search-root role="search">
+      <form action="/browse" method="GET" class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border" data-search-root role="search">
         <label for="search-input" class="sr-only">Search anime</label>
         <div class="flex items-center border-b border-border">
           <svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index 128c230..ccf2c60 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -72,7 +72,7 @@
                 <svg class="size-6 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
               </button>
             </div>
-            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-2xl right-0 bottom-full mb-2">
+            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-soft ring-1 ring-border right-0 bottom-full mb-2">
               <div class="flex flex-col py-1">
                 <div class="flex items-center justify-between px-5 py-2.5">
                   <span class="text-[15px] font-medium text-white">Autoplay</span>
@@ -134,12 +134,12 @@
         <span class="w-12 text-center" data-duration>0:00</span>
       </div>
 
-      <button data-skip class="hidden absolute right-6 bottom-24 bg-white text-black font-bold px-4 py-2 text-sm rounded shadow-lg transition-transform hover:scale-105 active:scale-95">Skip</button>
+      <button data-skip class="hidden absolute right-6 bottom-24 bg-white text-black font-bold px-4 py-2 text-sm rounded shadow-soft transition-transform hover:scale-105 active:scale-95">Skip</button>
       <button data-backward class="hidden absolute left-1/4 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" /></svg></button>
       <button data-forward class="hidden absolute right-1/4 top-1/2 -translate-y-1/2 translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" /></svg></button>
       
     </div>
   </div>
-  <div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none drop-shadow-md z-30" style="text-shadow: 0px 0px 4px black, 0px 0px 8px black; font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
+  <div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none z-30" style="text-shadow: 0px 0px 2px rgba(0,0,0,0.55); font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
 </div>
 {{end}}
diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml
index e1a1340..30062ec 100644
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -21,7 +21,7 @@
       </button>
     </div>
 
-    <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-2xl left-0 top-full mt-2">
+    <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2">
       <div class="flex flex-col py-1">
         <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.DisplayTitle}}', this)">
           <span class="font-medium text-sm text-foreground">Watching</span>
diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index eb6ed72..8aebc95 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -40,9 +40,9 @@
 
 <div class="flex flex-col gap-12 pb-12">
   <section class="relative flex flex-col items-center justify-center overflow-hidden bg-background-surface px-6 py-24 text-center ring-1 ring-border">
-    <div class="from-accent/10 absolute inset-0 bg-linear-to-b to-transparent opacity-50"></div>
+    <div class="absolute inset-0 opacity-40" style="background: radial-gradient(60% 60% at 50% 0%, rgba(0,0,0,0.06), transparent 70%);"></div>
     <div class="relative z-10 flex max-w-2xl flex-col items-center gap-6">
-      <h1 class="text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
+      <h1 class="heading-serif text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
         Don't know what to watch?
       </h1>
       <p class="text-lg text-foreground-muted">
@@ -50,10 +50,10 @@
       </p>
       <button
         id="surprise-btn"
-        class="group bg-accent relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full px-8 py-4 font-medium text-on-accent transition-transform hover:scale-105 active:scale-95 disabled:opacity-70 disabled:hover:scale-100"
+        class="group relative inline-flex items-center justify-center gap-2 overflow-hidden bg-foreground px-7 py-3.5 font-medium text-background transition-colors hover:bg-foreground/90 active:scale-[0.98] disabled:opacity-70"
         onclick="handleSurpriseMe()"
       >
-        <span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-on-accent border-t-transparent"></span>
+        <span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-background border-t-transparent"></span>
         <svg id="surprise-icon" class="h-5 w-5 transition-transform group-hover:rotate-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
         </svg>
diff --git a/templates/login.gohtml b/templates/login.gohtml
index 62af368..d7b693f 100644
--- a/templates/login.gohtml
+++ b/templates/login.gohtml
@@ -2,7 +2,7 @@
 {{define "content"}}
 <div class="flex min-h-screen items-center justify-center p-4">
   <div class="w-full max-w-md">
-    <h1 class="mb-2 text-3xl font-normal text-foreground">Sign in</h1>
+    <h1 class="heading-serif mb-2 text-3xl font-normal text-foreground">Sign in</h1>
     <p class="text-foreground-muted mb-8">Enter your credentials to continue.</p>
 
     <form method="POST" action="/login" class="flex flex-col gap-6">
@@ -44,4 +44,4 @@
     {{end}}
   </div>
 </div>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index dbe6b4f..2ece075 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -23,7 +23,7 @@
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
           </button>
         </div>
-        <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-2xl right-0 top-full mt-2">
+        <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-soft ring-1 ring-border right-0 top-full mt-2">
           <div class="flex flex-col py-1">
             <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.Title}}', this)">
               <span class="text-sm text-foreground">Watching</span>
@@ -89,7 +89,7 @@
               <svg class="w-4 h-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
             </button>
           </div>
-          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-border max-h-64 overflow-y-auto scrollbar-hide">
+          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-soft ring-1 ring-border border border-border max-h-64 overflow-y-auto scrollbar-hide">
             <div class="flex flex-col py-1">
               {{range .Seasons}}
                 <a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-foreground-muted hover:bg-surface-hover{{end}} transition-colors">
@@ -124,7 +124,7 @@
                 <svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
               </button>
             </div>
-            <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button rounded shadow-2xl">
+            <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button rounded shadow-soft ring-1 ring-border">
               <div class="flex flex-col py-1">
                 {{$ranges := ceilDiv $totalEpisodes 100}}
                 {{range $i := seq $ranges}}
diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index 86e9e63..a6e6dbc 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -2,7 +2,7 @@
 {{define "content"}}
 {{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6">
-  <h1 class="text-xl font-normal text-foreground">Watchlist</h1>
+  <h1 class="heading-serif text-xl font-normal text-foreground">Watchlist</h1>
 
   <div class="flex flex-wrap items-center justify-between gap-4">
     <div class="flex flex-wrap items-center gap-6">
@@ -21,7 +21,7 @@
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
             </button>
           </div>
-          <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-2xl right-0 top-full mt-2 ring-1 ring-border">
+          <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-soft right-0 top-full mt-2 ring-1 ring-border">
             <div class="flex flex-col py-1">
               <button class="flex w-full items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-surface-hover" onclick="setSortBy('date', this)">Date Added</button>
               <button class="flex w-full items-center px-4 py-2 text-sm text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground" onclick="setSortBy('title', this)">Title</button>
@@ -46,7 +46,7 @@
           <div class="absolute inset-0 z-20 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 pointer-events-none">
             <div class="flex justify-end">
               <button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none pointer-events-auto" aria-label="Remove from Watchlist">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </div>
           </div>
diff --git a/templates/watchlist_partial.gohtml b/templates/watchlist_partial.gohtml
index c3389ff..1a1a061 100644
--- a/templates/watchlist_partial.gohtml
+++ b/templates/watchlist_partial.gohtml
@@ -1,7 +1,7 @@
 {{define "title"}}Watchlist{{end}}
 {{define "content"}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6">
-  <h1 class="text-lg font-normal text-foreground">Watchlist</h1>
+  <h1 class="heading-serif text-lg font-normal text-foreground">Watchlist</h1>
 
   <div class="flex flex-wrap items-center justify-between gap-4">
     <div class="flex flex-wrap items-center gap-6">
@@ -20,7 +20,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h20"></path><path d="M6 12h12"></path><path d="M9 19h6"></path></svg>
           </button>
         </div>
-        <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-2xl right-0 top-full mt-2">
+        <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-soft ring-1 ring-border right-0 top-full mt-2">
           <div class="flex flex-col py-1">
             <button class="flex w-full items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-surface-hover" onclick="setSortBy('date', this)">Date Added</button>
             <button class="flex w-full items-center px-4 py-2 text-sm text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground" onclick="setSortBy('title', this)">Title</button>
@@ -49,7 +49,7 @@
                   <div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                     <div class="flex justify-end">
                       <button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                       </button>
                     </div>
                   </div>
@@ -161,4 +161,4 @@
     })
   }
 </script>
-{{end}}
\ No newline at end of file
+{{end}}