diff --git a/README.md b/README.md
index a54611c..cb4475c 100644
--- a/README.md
+++ b/README.md
@@ -119,10 +119,12 @@ Use the included Bruno collection in the `bruno/` directory for testing the API:
 - **Enhanced Security**: JWT authentication with theme persistence
 
 ### Frontend Redesign
+- **Beautiful Homepage**: Hero section with features showcase and modern design
 - **Multiple Themes**: 11 beautiful themes including Tokyo Night, Dracula, Nord, Solarized Dark, Monokai, One Dark Pro, Material Dark, and Catppuccin variants (Mocha, Macchiato, Frappé, Latte) with CSS variables
 - **HTMX Forms**: Real-time form submissions and updates without JavaScript frameworks
 - **Theme Switcher**: Dropdown selector that saves preferences to database
 - **Responsive Design**: Tailwind CSS for mobile-first responsive layouts
+- **Smooth Animations**: CSS transitions and scroll effects
 
 ### Technical Updates
 - **Go Templates**: Server-side rendering with template inheritance
diff --git a/backend/templates/index.html b/backend/templates/index.html
index ab1a6e7..ec1df2c 100644
--- a/backend/templates/index.html
+++ b/backend/templates/index.html
@@ -3,95 +3,160 @@
 {{define "title"}}Bookmann - Home{{end}}
 
 {{define "content"}}
-<div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-8">
-        <h1 class="text-4xl font-bold">Welcome to Bookmann</h1>
-        <select id="theme-select" class="px-3 py-2 border rounded" onchange="changeTheme()">
-            <option value="tokyo-night">Tokyo Night</option>
-            <option value="dracula">Dracula</option>
-            <option value="nord">Nord</option>
-            <option value="solarized-dark">Solarized Dark</option>
-            <option value="monokai">Monokai</option>
-            <option value="one-dark-pro">One Dark Pro</option>
-            <option value="material-dark">Material Dark</option>
-            <option value="catppuccin-mocha">Catppuccin Mocha</option>
-            <option value="catppuccin-macchiato">Catppuccin Macchiato</option>
-            <option value="catppuccin-frappe">Catppuccin Frappé</option>
-            <option value="catppuccin-latte">Catppuccin Latte</option>
-        </select>
-    </div>
-    
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div class="card p-6 rounded-lg shadow-md border">
-            <h2 class="text-2xl font-semibold mb-4">Login</h2>
-            <form hx-post="/api/auth/login" hx-target="#result" hx-swap="innerHTML">
-                <div class="mb-4">
-                    <label class="block" style="color: var(--text-secondary)">Email or Username</label>
-                    <input type="text" name="login" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                </div>
-                <div class="mb-4">
-                    <label class="block" style="color: var(--text-secondary)">Password</label>
-                    <input type="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                </div>
-                <button type="submit" class="btn-primary px-4 py-2 rounded">
-                    Login
-                </button>
-            </form>
+<!-- Hero Section -->
+<div class="relative overflow-hidden">
+    <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10"></div>
+    <div class="relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
+        <div class="flex justify-between items-start mb-8">
+            <div></div>
+            <select id="theme-select" class="px-3 py-2 border rounded text-sm" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)" onchange="changeTheme()">
+                <option value="tokyo-night">Tokyo Night</option>
+                <option value="dracula">Dracula</option>
+                <option value="nord">Nord</option>
+                <option value="solarized-dark">Solarized Dark</option>
+                <option value="monokai">Monokai</option>
+                <option value="one-dark-pro">One Dark Pro</option>
+                <option value="material-dark">Material Dark</option>
+                <option value="catppuccin-mocha">Catppuccin Mocha</option>
+                <option value="catppuccin-macchiato">Catppuccin Macchiato</option>
+                <option value="catppuccin-frappe">Catppuccin Frappé</option>
+                <option value="catppuccin-latte">Catppuccin Latte</option>
+            </select>
         </div>
-        
-        <div class="card p-6 rounded-lg shadow-md border">
-            <h2 class="text-2xl font-semibold mb-4">Register</h2>
-            <form hx-post="/api/auth/register" hx-target="#result" hx-swap="innerHTML">
-                <div class="mb-4">
-                    <label class="block" style="color: var(--text-secondary)">Email</label>
-                    <input type="email" name="email" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                </div>
-                <div class="mb-4">
-                    <label class="block" style="color: var(--text-secondary)">Username</label>
-                    <input type="text" name="username" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                </div>
-                <div class="mb-4">
-                    <label class="block" style="color: var(--text-secondary)">Password</label>
-                    <input type="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
-                </div>
-                <button type="submit" class="btn-primary px-4 py-2 rounded">
-                    Register
-                </button>
-            </form>
+
+        <div class="text-center">
+            <h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold" style="color: var(--text-primary)">
+                📚 Bookmann
+            </h1>
+            <p class="mt-6 max-w-2xl mx-auto text-xl" style="color: var(--text-secondary)">
+                Your personal ebook management system. Track reading progress, organize your library, and enjoy beautiful themes.
+            </p>
+            <div class="mt-10">
+                <a href="#auth" class="btn-primary px-8 py-3 rounded-lg font-medium text-lg">
+                    Get Started
+                </a>
+            </div>
         </div>
     </div>
-    
-    <div id="result" class="mt-8 text-center"></div>
 </div>
+
+<!-- Features Section -->
+<div class="py-16 bg-opacity-50" style="background-color: var(--bg-secondary)">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-12">
+            <h2 class="text-3xl font-extrabold" style="color: var(--text-primary)">Why Bookmann?</h2>
+            <p class="mt-4 text-lg" style="color: var(--text-secondary)">Discover the features that make ebook management effortless</p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="card p-6 rounded-xl border" style="background-color: var(--bg-primary); border-color: var(--border)">
+                <div class="text-center">
+                    <div class="mx-auto w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
+                        <span class="text-white text-2xl">📖</span>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Reading Progress</h3>
+                    <p style="color: var(--text-secondary)">Track your reading progress across all your ebooks with detailed statistics.</p>
+                </div>
+            </div>
+
+            <div class="card p-6 rounded-xl border" style="background-color: var(--bg-primary); border-color: var(--border)">
+                <div class="text-center">
+                    <div class="mx-auto w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
+                        <span class="text-white text-2xl">🎨</span>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Beautiful Themes</h3>
+                    <p style="color: var(--text-secondary)">Choose from 11 stunning themes including Tokyo Night, Dracula, and Catppuccin variants.</p>
+                </div>
+            </div>
+
+            <div class="card p-6 rounded-xl border" style="background-color: var(--bg-primary); border-color: var(--border)">
+                <div class="text-center">
+                    <div class="mx-auto w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
+                        <span class="text-white text-2xl">⚡</span>
+                    </div>
+                    <h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">Fast & Modern</h3>
+                    <p style="color: var(--text-secondary)">Built with Go and HTMX for lightning-fast performance and smooth interactions.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Auth Section -->
+<div id="auth" class="py-16">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-12">
+            <h2 class="text-3xl font-extrabold" style="color: var(--text-primary)">Join Bookmann Today</h2>
+            <p class="mt-4 text-lg" style="color: var(--text-secondary)">Create your account or sign in to start managing your ebook library</p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="card p-8 rounded-xl border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                <h3 class="text-2xl font-semibold mb-6 text-center" style="color: var(--text-primary)">Login</h3>
+                <form hx-post="/api/auth/login" hx-target="#auth-result" hx-swap="innerHTML">
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email or Username</label>
+                            <input type="text" name="login" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
+                            <input type="password" name="password" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                        </div>
+                        <button type="submit" class="w-full btn-primary py-2 rounded-lg font-medium">
+                            Sign In
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="card p-8 rounded-xl border" style="background-color: var(--bg-secondary); border-color: var(--border)">
+                <h3 class="text-2xl font-semibold mb-6 text-center" style="color: var(--text-primary)">Create Account</h3>
+                <form hx-post="/api/auth/register" hx-target="#auth-result" hx-swap="innerHTML">
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email</label>
+                            <input type="email" name="email" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
+                            <input type="text" name="username" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
+                            <input type="password" name="password" class="w-full px-3 py-2 border rounded-lg" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                        </div>
+                        <button type="submit" class="w-full btn-primary py-2 rounded-lg font-medium">
+                            Sign Up
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div id="auth-result" class="mt-8 text-center"></div>
+    </div>
+</div>
+
 <script>
-    function changeTheme() {
-        const theme = document.getElementById('theme-select').value;
-        applyTheme(theme);
-        // Save to server if logged in
-        fetch('/api/auth/theme', {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': 'Bearer ' + localStorage.getItem('token')
-            },
-            body: JSON.stringify({ theme })
-        }).catch(err => console.log('Theme save failed', err));
-    }
-    function loadUserTheme() {
-        // If logged in, load from profile
-        const token = localStorage.getItem('token');
-        if (token) {
-            fetch('/api/auth/profile', {
-                headers: { 'Authorization': 'Bearer ' + token }
-            }).then(res => res.json()).then(data => {
-                if (data.theme) applyTheme(data.theme);
-            }).catch(() => {});
-        }
-    }
     document.addEventListener('DOMContentLoaded', () => {
         loadTheme();
         loadUserTheme();
         document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';
+
+        // Smooth scroll for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
     });
 </script>
 {{end}}
\ No newline at end of file