diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index 7296d60..409731f 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -39,22 +39,21 @@
 	</script>
 
 <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">
-    <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="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
+  <section class="flex flex-col items-center justify-center bg-background-surface px-6 py-16 text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-5">
+      <h1 class="leading-[1.15] text-3xl font-normal tracking-[-0.02em] text-foreground sm:text-4xl">
         Don't know what to watch?
       </h1>
-      <p class="text-lg text-foreground-muted">
+      <p class="text-base text-foreground-muted">
         Let us pick something for you from our vast collection of anime.
       </p>
       <button
         id="surprise-btn"
-        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"
+        class="group relative inline-flex h-11 items-center justify-center gap-2 bg-background-button px-5 text-base font-normal text-foreground transition-colors hover:bg-background-button-hover active:bg-background-button-hover disabled:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent sm:h-12"
         onclick="handleSurpriseMe()"
       >
         <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">
+        <svg id="surprise-icon" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
           <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
         </svg>
         <span id="surprise-text">Surprise Me</span>
@@ -65,8 +64,8 @@
   {{/* Trending Section */}}
   <section class="flex flex-col gap-4">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-normal text-foreground">Trending This Season</h2>
-      <a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
+      <h2 class="text-base font-normal text-foreground">Trending This Season</h2>
+      <a href="/browse?order_by=popularity&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
     </div>
     <div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
       {{template "discover_skeleton"}}
@@ -76,8 +75,8 @@
   {{/* Upcoming Section */}}
   <section class="flex flex-col gap-4">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-normal text-foreground">Highly Anticipated</h2>
-      <a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-accent text-sm hover:underline">View all</a>
+      <h2 class="text-base font-normal text-foreground">Highly Anticipated</h2>
+      <a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
     </div>
     <div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
       {{template "discover_skeleton"}}
@@ -87,8 +86,8 @@
   {{/* Top Section */}}
   <section class="flex flex-col gap-4">
     <div class="flex items-center justify-between">
-      <h2 class="text-xl font-normal text-foreground">All-Time Greats</h2>
-      <a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
+      <h2 class="text-base font-normal text-foreground">All-Time Greats</h2>
+      <a href="/browse?order_by=score&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
     </div>
     <div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
       {{template "discover_skeleton"}}
diff --git a/templates/index.gohtml b/templates/index.gohtml
index ec8155a..229b36c 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -9,7 +9,7 @@
 
   <section class="w-full">
     <div class="mb-4 flex items-end justify-between">
-      <h2 class="text-lg font-normal text-foreground">Currently Airing</h2>
+      <h2 class="text-base font-normal text-foreground">Currently Airing</h2>
       <a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
         See more
         <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 group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
@@ -22,7 +22,7 @@
 
   <section class="w-full">
     <div class="mb-4 flex items-end justify-between">
-      <h2 class="text-lg font-normal text-foreground">Most Popular</h2>
+      <h2 class="text-base font-normal text-foreground">Most Popular</h2>
       <a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
         See more
         <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 group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
@@ -77,7 +77,7 @@
 
 {{define "continue_watching_skeleton"}}
 <section id="continue-watching-section" class="w-full">
-  <h2 class="mb-3 text-lg font-normal text-foreground">Continue Watching</h2>
+  <h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
   <div class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
     {{range (seq 3)}}
       <div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">