diff --git a/app/templates/index.html b/app/templates/index.html
index 7db353d..650eb09 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -3,34 +3,39 @@
 {% block title %}Home - {{ app_name }}{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-lg-8 mx-auto text-center">
+<!-- Hero Section -->
+<div class="row mb-5">
+    <div class="col-lg-10 mx-auto text-center">
         <div class="py-5">
-            <h1 class="display-3 mb-4">
-                <i class="bi bi-bricks text-danger"></i> LEGO Instructions Manager
+            <div class="mb-4">
+                <i class="bi bi-bricks" style="font-size: 5rem; color: var(--lego-red);"></i>
+            </div>
+            <h1 class="display-3 mb-4 fw-bold">
+                LEGO Instructions Manager
             </h1>
             <p class="lead mb-5">
-                Organize, manage, and access all your LEGO instruction manuals in one place.
-                Upload PDFs and images, search by theme, set number, or year, and integrate with Brickset for automatic set details.
+                Your personal digital library for organizing and managing LEGO instruction manuals. 
+                Upload PDFs and images, search by theme, set number, or year, and integrate with 
+                Brickset for automatic set details.
             </p>
             
             {% if not current_user.is_authenticated %}
-                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
-                    <a href="{{ url_for('auth.register') }}" class="btn btn-danger btn-lg px-4 gap-3">
-                        <i class="bi bi-person-plus"></i> Get Started
+                <div class="d-flex gap-3 justify-content-center flex-wrap">
+                    <a href="{{ url_for('auth.register') }}" class="btn btn-danger btn-lg px-5">
+                        <i class="bi bi-person-plus"></i> Get Started Free
                     </a>
-                    <a href="{{ url_for('auth.login') }}" class="btn btn-outline-secondary btn-lg px-4">
-                        <i class="bi bi-box-arrow-in-right"></i> Login
+                    <a href="{{ url_for('auth.login') }}" class="btn btn-outline-secondary btn-lg px-5">
+                        <i class="bi bi-box-arrow-in-right"></i> Sign In
                     </a>
                 </div>
             {% else %}
-                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
-                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-danger btn-lg px-4 gap-3">
+                <div class="d-flex gap-3 justify-content-center flex-wrap">
+                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-danger btn-lg px-5">
                         <i class="bi bi-speedometer2"></i> Go to Dashboard
                     </a>
                     <div class="btn-group">
                         <a href="{{ url_for('sets.add_set') }}" class="btn btn-outline-secondary btn-lg px-4">
-                            <i class="bi bi-box-seam"></i> Add Official Set
+                            <i class="bi bi-box-seam"></i> Add Set
                         </a>
                         <a href="{{ url_for('sets.add_set') }}?type=moc" class="btn btn-outline-warning btn-lg px-4">
                             <i class="bi bi-star-fill"></i> Add MOC
@@ -42,66 +47,173 @@
     </div>
 </div>
 
-<div class="row mt-5">
-    <div class="col-md-4 mb-4">
-        <div class="card h-100 shadow-sm">
-            <div class="card-body text-center">
-                <i class="bi bi-cloud-upload display-1 text-primary mb-3"></i>
-                <h3 class="card-title">Upload & Organize</h3>
-                <p class="card-text">
-                    Upload instruction PDFs and images for your LEGO sets. Keep everything organized by theme, year, and set number.
+<!-- Feature Cards -->
+<div class="row g-4 mb-5">
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 shadow-sm border-0">
+            <div class="card-body text-center p-4">
+                <div class="mb-4">
+                    <i class="bi bi-cloud-upload display-1 text-primary"></i>
+                </div>
+                <h3 class="card-title h4 fw-bold mb-3">Upload & Organize</h3>
+                <p class="card-text text-muted">
+                    Upload instruction PDFs and images for your LEGO sets. Keep everything 
+                    organized by theme, year, and set number for easy access.
                 </p>
             </div>
         </div>
     </div>
     
-    <div class="col-md-4 mb-4">
-        <div class="card h-100 shadow-sm">
-            <div class="card-body text-center">
-                <i class="bi bi-search display-1 text-success mb-3"></i>
-                <h3 class="card-title">Easy Search</h3>
-                <p class="card-text">
-                    Quickly find any instruction manual using powerful search and filtering. Sort by theme, year, or set number.
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 shadow-sm border-0">
+            <div class="card-body text-center p-4">
+                <div class="mb-4">
+                    <i class="bi bi-search display-1 text-success"></i>
+                </div>
+                <h3 class="card-title h4 fw-bold mb-3">Powerful Search</h3>
+                <p class="card-text text-muted">
+                    Quickly find any instruction manual using advanced search and filtering. 
+                    Sort by theme, year, set number, or search by name.
                 </p>
             </div>
         </div>
     </div>
     
-    <div class="col-md-4 mb-4">
-        <div class="card h-100 shadow-sm">
-            <div class="card-body text-center">
-                <i class="bi bi-link-45deg display-1 text-danger mb-3"></i>
-                <h3 class="card-title">Brickset Integration</h3>
-                <p class="card-text">
-                    Connect with Brickset API to automatically populate set details and access official instructions when available.
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 shadow-sm border-0">
+            <div class="card-body text-center p-4">
+                <div class="mb-4">
+                    <i class="bi bi-link-45deg display-1 text-danger"></i>
+                </div>
+                <h3 class="card-title h4 fw-bold mb-3">Brickset Integration</h3>
+                <p class="card-text text-muted">
+                    Connect with Brickset API to automatically populate set details 
+                    and access official instructions when available.
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 shadow-sm border-0">
+            <div class="card-body text-center p-4">
+                <div class="mb-4">
+                    <i class="bi bi-star-fill display-1 text-warning"></i>
+                </div>
+                <h3 class="card-title h4 fw-bold mb-3">MOC Support</h3>
+                <p class="card-text text-muted">
+                    Not just official sets! Organize your My Own Creations (MOCs) 
+                    with custom numbering and dedicated management features.
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 shadow-sm border-0">
+            <div class="card-body text-center p-4">
+                <div class="mb-4">
+                    <i class="bi bi-images display-1 text-info"></i>
+                </div>
+                <h3 class="card-title h4 fw-bold mb-3">Image Gallery</h3>
+                <p class="card-text text-muted">
+                    View instruction images in an organized gallery with thumbnails. 
+                    Supports both PDF and image formats for maximum flexibility.
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 shadow-sm border-0">
+            <div class="card-body text-center p-4">
+                <div class="mb-4">
+                    <i class="bi bi-phone display-1 text-secondary"></i>
+                </div>
+                <h3 class="card-title h4 fw-bold mb-3">Responsive Design</h3>
+                <p class="card-text text-muted">
+                    Access your instruction library from any device. Fully responsive 
+                    design works perfectly on desktop, tablet, and mobile.
                 </p>
             </div>
         </div>
     </div>
 </div>
 
-<div class="row mt-5">
+<!-- Features List -->
+<div class="row mb-5">
     <div class="col-lg-10 mx-auto">
-        <div class="card shadow">
-            <div class="card-body">
-                <h3 class="card-title mb-4">
-                    <i class="bi bi-info-circle"></i> Features
-                </h3>
-                <div class="row">
+        <div class="card shadow border-0">
+            <div class="card-body p-5">
+                <div class="text-center mb-5">
+                    <h3 class="fw-bold mb-2">
+                        <i class="bi bi-stars text-warning"></i> Everything You Need
+                    </h3>
+                    <p class="text-muted">Comprehensive features for managing your LEGO collection</p>
+                </div>
+                <div class="row g-4">
                     <div class="col-md-6">
                         <ul class="list-unstyled">
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Upload PDF and image instructions</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Organize by theme and year</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Search and filter capabilities</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> User authentication & profiles</li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Multi-format Support</strong>
+                                    <p class="text-muted small mb-0">Upload PDF and image instructions</p>
+                                </div>
+                            </li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Theme Organization</strong>
+                                    <p class="text-muted small mb-0">Automatic categorization by LEGO themes</p>
+                                </div>
+                            </li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Advanced Filtering</strong>
+                                    <p class="text-muted small mb-0">Search and filter by multiple criteria</p>
+                                </div>
+                            </li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Secure Authentication</strong>
+                                    <p class="text-muted small mb-0">Personal accounts with password protection</p>
+                                </div>
+                            </li>
                         </ul>
                     </div>
                     <div class="col-md-6">
                         <ul class="list-unstyled">
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Brickset API integration</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Automatic set detail population</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Image gallery view</li>
-                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> Responsive design</li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Brickset API</strong>
+                                    <p class="text-muted small mb-0">Automatic set details from Brickset database</p>
+                                </div>
+                            </li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Auto-populate Data</strong>
+                                    <p class="text-muted small mb-0">Set details filled automatically from API</p>
+                                </div>
+                            </li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Beautiful Gallery</strong>
+                                    <p class="text-muted small mb-0">Visual grid layout for easy browsing</p>
+                                </div>
+                            </li>
+                            <li class="mb-3 d-flex align-items-start">
+                                <i class="bi bi-check-circle-fill text-success me-3 mt-1 fs-5"></i>
+                                <div>
+                                    <strong>Modern Interface</strong>
+                                    <p class="text-muted small mb-0">Clean, intuitive design with smooth animations</p>
+                                </div>
+                            </li>
                         </ul>
                     </div>
                 </div>
@@ -109,4 +221,22 @@
         </div>
     </div>
 </div>
-{% endblock %}
+
+<!-- CTA Section -->
+{% if not current_user.is_authenticated %}
+<div class="row">
+    <div class="col-lg-8 mx-auto">
+        <div class="card text-center shadow-lg border-0" style="background: linear-gradient(135deg, #d11013 0%, #ff4757 100%);">
+            <div class="card-body p-5 text-white">
+                <h2 class="fw-bold mb-3">Ready to Organize Your LEGO Collection?</h2>
+                <p class="lead mb-4">Join now and start managing your instructions digitally</p>
+                <a href="{{ url_for('auth.register') }}" class="btn btn-light btn-lg px-5">
+                    <i class="bi bi-person-plus"></i> Create Free Account
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+
+{% endblock %}
\ No newline at end of file