diff --git a/static/assets/style.css b/static/assets/style.css
index 786654a..434d157 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -5,36 +5,36 @@
 @source "../**/*.ts";
 
 @theme {
-  --color-background: light-dark(#f7f6f3, #0b0c10);
-  --color-background-sidebar: light-dark(#fbfbfa, #0f1115);
-  --color-background-header: light-dark(#fbfbfa, #0f1115);
+  --color-background: light-dark(#ffffff, #0b0c10);
+  --color-background-sidebar: light-dark(#f7f7f7, #0f1115);
+  --color-background-header: light-dark(#fbfbfb, #0f1115);
   --color-background-surface: light-dark(#ffffff, #17181c);
-  --color-background-button: light-dark(#ffffff, #131417);
-  --color-background-button-hover: light-dark(#f7f6f3, #1c1d22);
+  --color-background-button: light-dark(#f5f5f5, #131417);
+  --color-background-button-hover: light-dark(#ececec, #1c1d22);
 
-  --color-foreground-muted: light-dark(#787774, #a1a1aa);
+  --color-foreground-muted: light-dark(#6e6e6e, #a1a1aa);
   --color-foreground: light-dark(#111111, #f3f4f6);
 
-  --color-accent: #1f6c9f;
-  --color-border: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
-  --color-surface-hover: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05));
+  --color-accent: #216a97;
+  --color-border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1));
+  --color-surface-hover: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
 }
 
 :root {
   color-scheme: light dark;
 
   --bg: var(--color-background);
-  --panel: light-dark(#f5f5f4, #181818);
-  --panel-soft: light-dark(#e7e5e4, #202020);
+  --panel: light-dark(#f7f7f7, #181818);
+  --panel-soft: light-dark(#ececec, #202020);
   --header: light-dark(#ffffff, #101010);
-  --text: light-dark(#1c1917, #e7e5e4);
-  --text-muted: light-dark(#57534e, #a8a29e);
-  --text-faint: light-dark(#a8a29e, #78716c);
+  --text: light-dark(#111111, #e7e5e4);
+  --text-muted: light-dark(#666666, #a8a29e);
+  --text-faint: light-dark(#9a9a9a, #78716c);
   --accent: var(--color-accent);
   --danger: #dc2626;
-  --surface-thumb: light-dark(#e7e5e4, #44403c);
-  --surface-tab-hover: light-dark(#e7e5e4, #202020);
-  --surface-tab-active: light-dark(#1c1917, #fafaf9);
+  --surface-thumb: light-dark(#cccccc, #44403c);
+  --surface-tab-hover: light-dark(#e4e4e4, #202020);
+  --surface-tab-active: light-dark(#1e1b17, #fafaf9);
   --text-tab-active: light-dark(#fafaf9, #0c0a09);
   --surface-select: light-dark(#ffffff, #181818);
   --text-on-accent: light-dark(#fafaf9, #0c0a09);
@@ -42,6 +42,9 @@
   --shadow-subtle: light-dark(0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.18));
   --shadow-card: light-dark(0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.28));
   --shadow-card-hover: light-dark(0 6px 18px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.34));
+  --scrollbar-track: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.05));
+  --scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2));
+  --scrollbar-thumb-hover: light-dark(rgba(0, 0, 0, 0.26), rgba(255, 255, 255, 0.3));
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
@@ -70,6 +73,10 @@ body {
   color: var(--text);
 }
 
+button:not([data-unstyled-button]) {
+  border: 1px solid var(--color-border);
+}
+
 @layer utilities {
   .shadow-soft {
     box-shadow: var(--shadow-card);
@@ -119,17 +126,17 @@ body {
   }
 
   .scrollbar-hide::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--scrollbar-track);
     border-radius: 0;
   }
 
   .scrollbar-hide::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
+    background: var(--scrollbar-thumb);
     border-radius: 0;
   }
 
   .scrollbar-hide::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
+    background: var(--scrollbar-thumb-hover);
   }
 
   button.in-watchlist .watchlist-icon {
@@ -139,7 +146,7 @@ body {
   .scrollbar-hide {
     -ms-overflow-style: auto;
     scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
   }
 }
 
diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index ddf27e1..d7f1af2 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -290,7 +290,7 @@
                     </div>
                   </div>
                 {{end}}
-                <button type="button" data-themes-open class="text-left text-sm text-foreground-muted transition-colors hover:text-foreground">
+                <button type="button" data-unstyled-button data-themes-open class="text-left text-sm text-foreground-muted transition-colors hover:text-foreground">
                   Theme Songs
                 </button>
                 <a href="/anime/{{$anime.MalID}}/reviews" class="text-sm text-foreground-muted transition-colors hover:text-foreground">Reviews</a>
diff --git a/templates/components/filter_bar.gohtml b/templates/components/filter_bar.gohtml
index b5c5437..d99fab1 100644
--- a/templates/components/filter_bar.gohtml
+++ b/templates/components/filter_bar.gohtml
@@ -10,7 +10,7 @@
         type="text"
         value="{{.Query}}"
         placeholder="Search anime..."
-        class="focus:ring-accent w-full rounded-none bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1"
+        class="!rounded-none focus:ring-accent w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1"
       />
       {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
       {{if .Status}}<input type="hidden" name="status" value="{{.Status}}">{{end}}
@@ -124,7 +124,7 @@
       </div>
     </ui-dropdown>
 
-    <a href="?sort={{if eq .Sort "asc"}}desc{{else}}asc{{end}}&q={{.Query}}&status={{.Status}}&type={{.Type}}&order_by={{.OrderBy}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex h-9 w-9 items-center justify-center bg-background-button  text-foreground-muted hover:text-foreground transition-colors">
+    <a href="?sort={{if eq .Sort "asc"}}desc{{else}}asc{{end}}&q={{.Query}}&status={{.Status}}&type={{.Type}}&order_by={{.OrderBy}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex h-9 w-9 items-center justify-center bg-background-button text-foreground-muted hover:text-foreground transition-colors ring-1 ring-border">
       {{if eq .Sort "asc"}}
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
       {{else}}
diff --git a/templates/components/navigation.gohtml b/templates/components/navigation.gohtml
index d0d3625..9680cad 100644
--- a/templates/components/navigation.gohtml
+++ b/templates/components/navigation.gohtml
@@ -10,7 +10,7 @@
 
 <nav class="bg-background-sidebar h-full border-r border-border">
   <div class="flex flex-col">
-    <button type="button" class="group relative flex w-full items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover" data-command-palette-open {{if $isCollapsed}}title="Search"{{end}}>
+    <button type="button" data-unstyled-button class="group relative flex w-full items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover" data-command-palette-open {{if $isCollapsed}}title="Search"{{end}}>
       <svg class="size-6 shrink-0 text-foreground-muted transition-colors duration-200 group-hover:text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="11" cy="11" r="8" />
         <path d="m21 21-4.35-4.35" />
@@ -39,7 +39,7 @@
             placeholder="Search or jump to..."
             class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none"
           />
-          <button type="button" class="mr-3 px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground" data-command-palette-close>Esc</button>
+          <button type="button" data-unstyled-button class="mr-3 px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground" data-command-palette-close>Esc</button>
         </div>
         <div data-command-palette-results class="max-h-[min(70vh,34rem)] overflow-y-auto py-2"></div>
       </div>
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index 907682b..0ecea30 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -45,7 +45,7 @@
     <div class="flex flex-col gap-3">
       <div class="flex items-center justify-between px-2">
         <div class="flex items-center gap-4">
-          <button data-play-pause class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
+          <button data-play-pause data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
             <svg data-icon-play class="size-6 transition-colors duration-200" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
             <svg data-icon-pause class="size-6 transition-colors duration-200 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="9" y1="6" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="18" /></svg>
           </button>
@@ -59,7 +59,7 @@
                 </div>
               </div>
             </div>
-            <button data-mute class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
+            <button data-mute data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
               <svg data-icon-volume class="size-6 transition-colors duration-200" viewBox="0 0 24 24" aria-hidden="true"><polygon points="5 10 9 10 13 6 13 18 9 14 5 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polygon><path d="M16 9c1.3 1.3 1.3 4.7 0 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path><path d="M18.8 6.5c3 2.9 3 8.1 0 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"></path></svg>
               <svg data-icon-muted class="size-6 transition-colors duration-200 hidden" viewBox="0 0 24 24" aria-hidden="true"><polygon points="5 10 9 10 13 6 13 18 9 14 5 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polygon><line x1="16" y1="9" x2="21" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="21" y1="9" x2="16" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg>
             </button>
@@ -69,7 +69,7 @@
         <div class="flex items-center gap-4">
           <ui-dropdown class="relative block" data-align="right" data-position="top">
             <div data-trigger class="cursor-pointer">
-              <button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none" aria-label="Settings">
+                <button data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none" aria-label="Settings">
                 <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>
@@ -113,7 +113,7 @@
             </div>
           </ui-dropdown>
           
-          <button data-fullscreen class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
+          <button data-fullscreen data-unstyled-button class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
             <svg class="size-6 transition-colors duration-200" viewBox="0 0 240 240" aria-hidden="true"><path d="M143.7,53.9c-1.9-1.9-1.3-4,1.4-4.4l50.6-8.4c1.8-0.5,3.7,0.6,4.2,2.4c0.2,0.6,0.2,1.2,0,1.7l-8.4,50.6c-0.4,2.7-2.4,3.4-4.4,1.4l-14.5-14.5l-28.2,28.2l-14.3-14.3l28.2-28.2L143.7,53.9z M44.2,200.9l50.6-8.4c2.7-0.4,3.4-2.4,1.4-4.4l-14.5-14.5l28.2-28.2l-14.3-14.3l-28.2,28.2l-14.5-14.5c-1.9-1.9-4-1.3-4.4,1.4l-8.4,50.6c-0.5,1.8,0.6,3.6,2.4,4.2C43,201,43.6,201,44.2,200.9L44.2,200.9z" fill="currentColor"></path></svg>
           </button>
         </div>
@@ -136,8 +136,8 @@
       </div>
 
       <button data-skip class="hidden absolute right-6 bottom-24 bg-white/95 text-black font-bold px-4 py-2 text-sm rounded shadow-lg shadow-black/30 ring-1 ring-black/10 hover:bg-white transition-colors">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>
+      <button data-backward data-unstyled-button 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 data-unstyled-button 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>
diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml
index 30062ec..9efe584 100644
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -6,7 +6,7 @@
 <div class="flex gap-2">
   <ui-dropdown class="relative block" data-align="left" data-width="min-w-[160px]">
     <div data-trigger class="cursor-pointer">
-      <button type="button" class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-foreground transition-colors disabled:opacity-50">
+      <button type="button" class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-foreground transition-colors border border-border disabled:opacity-50">
         <span id="watchlist-status-display-{{$anime.MalID}}">
           {{if $status}}
             {{if eq $status "watching"}}Watching{{end}}
@@ -48,7 +48,7 @@
     </div>
   </ui-dropdown>
 
-  <a href="/anime/{{$anime.MalID}}/watch{{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}?ep={{.ContinueWatchingEp}}{{end}}" class="bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors">
+  <a href="/anime/{{$anime.MalID}}/watch{{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}?ep={{.ContinueWatchingEp}}{{end}}" class="inline-flex items-center justify-center bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors border border-border">
     {{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}Continue Episode {{.ContinueWatchingEp}}{{else}}Watch Now{{end}}
   </a>
 </div>
diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index 2924b16..ba7c15f 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -6,15 +6,15 @@
 
   <div class="flex flex-wrap items-center justify-between gap-4">
     <div class="flex flex-wrap items-center gap-6">
-      <button class="text-sm transition-colors text-foreground" onclick="filterWatchlist('all', this)">All</button>
-      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
-      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
-      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
-      <button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
+      <button data-unstyled-button class="text-sm transition-colors text-foreground" onclick="filterWatchlist('all', this)">All</button>
+      <button data-unstyled-button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
+      <button data-unstyled-button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
+      <button data-unstyled-button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
+      <button data-unstyled-button class="text-sm transition-colors text-foreground-muted hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
     </div>
 
       <div class="flex items-center gap-4">
-        <button type="button" class="text-foreground-muted transition-colors hover:text-foreground" onclick="exportWatchlistCsv()" title="Export to CSV" aria-label="Export to CSV">
+        <button type="button" data-unstyled-button class="text-foreground-muted transition-colors hover:text-foreground" onclick="exportWatchlistCsv()" title="Export to CSV" aria-label="Export to CSV">
           <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
             <path d="M7 10l5 5 5-5"/>
@@ -24,7 +24,7 @@
 
         <ui-dropdown class="relative block" data-align="right" data-width="min-w-[150px]">
           <div data-trigger>
-            <button type="button" class="flex items-center gap-2 text-sm text-foreground-muted transition-colors hover:text-foreground">
+            <button type="button" data-unstyled-button class="flex items-center gap-2 text-sm text-foreground-muted transition-colors hover:text-foreground">
               <span>Sort by: <span id="sort-by-display">Date Added</span></span>
               <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>
@@ -37,7 +37,7 @@
           </div>
         </ui-dropdown>
 
-        <button type="button" id="sort-order-btn" class="text-foreground-muted transition-colors hover:text-foreground" onclick="toggleSortOrder(this)">
+        <button type="button" id="sort-order-btn" data-unstyled-button class="text-foreground-muted transition-colors hover:text-foreground" onclick="toggleSortOrder(this)">
           <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" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
         </button>
       </div>
@@ -53,7 +53,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">
+              <button type="button" data-unstyled-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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </div>