diff --git a/index.hbs b/index.hbs
index 9e5712c..65d202f 100644
--- a/index.hbs
+++ b/index.hbs
@@ -1,13 +1,13 @@
 {{!< default}}
 
-<header class="container mx-auto px-4 py-8 text-center">
-    <h1 class="text-5xl font-bold tracking-tight text-[var(--text-primary)]">{{@site.title}}</h1>
-    <p class="mt-2 text-xl text-[var(--text-secondary)]">{{@site.description}}</p>
+<header class="container mx-auto px-4 py-16 md:py-24 text-center animate-fadeInUp">
+    <h1 class="text-6xl md:text-8xl font-bold tracking-tighter text-[var(--brand-primary)] mb-4">{{@site.title}}</h1>
+    <p class="mt-4 text-xl md:text-2xl text-[var(--text-secondary)] max-w-2xl mx-auto font-serif italic italic opacity-90">{{@site.description}}</p>
 </header>
 
-<div class="container mx-auto px-4">
+<div class="container mx-auto px-4 pb-20">
     {{#if posts}}
-        <div id="posts-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
             {{#foreach posts}}
                 {{> "post-card"}}
             {{/foreach}}
@@ -25,9 +25,9 @@
             {{/if}}
         </div>
 
-        <div id="loading-spinner" class="htmx-indicator text-center py-8">
-            <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
-            <p class="text-[var(--text-secondary)] mt-2">Loading more posts...</p>
+        <div id="loading-spinner" class="htmx-indicator text-center py-12">
+            <div class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
+            <p class="text-[var(--text-secondary)] mt-4 font-medium tracking-wide">Loading more posts...</p>
         </div>
 
     {{else}}