diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 00000000..28e4da88
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,99 @@
+/* Custom styles for DISCOVER Cookbook landing page */
+
+/* Smooth transitions for theme switching */
+* {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Enhanced card hover effects */
+.card {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+[data-bs-theme="dark"] .card:hover {
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+}
+
+/* Button enhancements */
+.btn {
+    transition: all 0.2s ease;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+}
+
+/* Navbar backdrop blur effect */
+.navbar {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* Footer styling improvements */
+footer {
+    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
+}
+
+[data-bs-theme="light"] footer {
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    color: #212529 !important;
+}
+
+/* Icon animations */
+.bi {
+    transition: transform 0.2s ease;
+}
+
+.card:hover .bi {
+    transform: scale(1.1);
+}
+
+/* Focus indicators for accessibility */
+.btn:focus,
+.nav-link:focus {
+    outline: 2px solid #0d6efd;
+    outline-offset: 2px;
+}
+
+[data-bs-theme="dark"] .btn:focus,
+[data-bs-theme="dark"] .nav-link:focus {
+    outline-color: #6ea8fe;
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+    .display-4 {
+        font-size: 2rem;
+    }
+    
+    .lead {
+        font-size: 1rem;
+    }
+}
+
+/* Loading animation for theme switch */
+.theme-logo {
+    transition: opacity 0.3s ease;
+}
+
+/* Skip link for accessibility */
+.skip-link {
+    position: absolute;
+    top: -40px;
+    left: 6px;
+    background: #0d6efd;
+    color: white;
+    padding: 8px;
+    text-decoration: none;
+    border-radius: 4px;
+    z-index: 1000;
+}
+
+.skip-link:focus {
+    top: 6px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 028f3ce2..f791e43b 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
     <!-- Custom styles -->
+    <link rel="stylesheet" href="assets/css/custom.css">
     <style>
         body { font-family: 'Inter', sans-serif; }
         [data-bs-theme="dark"] {
@@ -25,6 +26,8 @@
     </style>
 </head>
 <body>
+    <!-- Skip link for accessibility -->
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <!-- Navigation bar -->
     <nav class="navbar navbar-expand-lg sticky-top border-bottom">
         <div class="container">
@@ -33,7 +36,7 @@
                 <img src="_static/images/logo-dark.png" alt="DISCOVER Cookbook" height="75" class="me-2 theme-logo dark-logo">
                 <img src="_static/images/logo-light.png" alt="DISCOVER Cookbook" height="75" class="me-2 theme-logo light-logo d-none">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto align-items-center">
                     <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
@@ -52,7 +55,7 @@
     </nav>
 
     <!-- Main content -->
-    <div class="container py-5">
+    <div id="main-content" class="container py-5">
         <div class="text-center py-5 mb-5">
             <h1 class="display-4 fw-bold mb-3">Welcome to <span class="text-success">DISCOVER</span> Cookbook</h1>
             <p class="lead text-muted mb-4 mx-auto" style="max-width: 600px;">Your comprehensive guide to creating diverse, inclusive, and accessible conferences and events in the tech sector</p>
@@ -131,7 +134,121 @@ <h2 class="h3 mb-0">Development Version</h2>
                     <p class="text-muted mb-4">The in-progress development version containing the latest community contributions. Ideal for contributors and early adopters, but may be unstable.</p>
                     <div class="row gy-3 align-items-end">
                         <div class="col-md">
-                            <small class="text-muted d-block mb-2">Read:</small>
+                            <small class="text-muted d-block mb-2">Status: In Development</small>
+                            <div class="d-flex flex-wrap gap-2">
+                                <a href="https://discover-cookbook.numfocus.org/dev/en/" class="btn btn-outline-info btn-sm">English (Dev)</a>
+                                <a href="https://discover-cookbook.numfocus.org/dev/es/" class="btn btn-outline-secondary btn-sm">Español (Dev)</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contribute section -->
+        <section id="contribute" class="mb-5">
+            <div class="card border">
+                <div class="card-body p-4">
+                    <div class="d-flex align-items-center mb-3">
+                        <i class="bi bi-people text-success me-2"></i>
+                        <h2 class="h3 mb-0">Get Involved</h2>
+                    </div>
+                    <p class="text-muted mb-4">Join our community of contributors working to make conferences more diverse and inclusive. Whether you're fixing typos, adding content, or translating, every contribution matters.</p>
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <div class="d-flex align-items-start">
+                                <i class="bi bi-chat-dots text-info me-3 mt-1"></i>
+                                <div>
+                                    <h5 class="mb-1">Discussions</h5>
+                                    <p class="text-muted mb-2">Share ideas and ask questions</p>
+                                    <a href="https://github.com/numfocus/DISCOVER-Cookbook/discussions" class="btn btn-outline-info btn-sm">Join Discussion</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="d-flex align-items-start">
+                                <i class="bi bi-bug text-warning me-3 mt-1"></i>
+                                <div>
+                                    <h5 class="mb-1">Issues</h5>
+                                    <p class="text-muted mb-2">Report bugs or request features</p>
+                                    <a href="https://github.com/numfocus/DISCOVER-Cookbook/issues" class="btn btn-outline-warning btn-sm">Report Issue</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bg-dark text-light py-4 mt-5">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <div class="d-flex align-items-center mb-3 mb-md-0">
+                        <img src="_static/images/Numfocus-logo-light.png" alt="NumFOCUS" height="40" class="me-3">
+                        <div>
+                            <small class="text-muted">Supported by</small>
+                            <div class="fw-semibold">NumFOCUS</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <div class="d-flex flex-wrap justify-content-md-end gap-3 mb-2">
+                        <a href="https://numfocus.org/privacy-policy" class="text-light text-decoration-none">Privacy</a>
+                        <a href="https://numfocus.org/code-of-conduct" class="text-light text-decoration-none">Code of Conduct</a>
+                        <a href="https://github.com/numfocus/DISCOVER-Cookbook" class="text-light text-decoration-none">GitHub</a>
+                    </div>
+                    <small class="text-muted">© 2024 NumFOCUS. Licensed under CC BY 4.0</small>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    
+    <!-- Theme switcher script -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const themeSwitcher = document.getElementById('theme-switcher');
+            const lightIcon = document.getElementById('light-icon');
+            const darkIcon = document.getElementById('dark-icon');
+            const htmlElement = document.documentElement;
+            const darkLogo = document.querySelector('.dark-logo');
+            const lightLogo = document.querySelector('.light-logo');
+            
+            // Get saved theme or default to dark
+            const savedTheme = localStorage.getItem('theme') || 'dark';
+            setTheme(savedTheme);
+            
+            themeSwitcher.addEventListener('click', function() {
+                const currentTheme = htmlElement.getAttribute('data-bs-theme');
+                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                setTheme(newTheme);
+                localStorage.setItem('theme', newTheme);
+            });
+            
+            function setTheme(theme) {
+                htmlElement.setAttribute('data-bs-theme', theme);
+                
+                if (theme === 'light') {
+                    lightIcon.classList.remove('d-none');
+                    darkIcon.classList.add('d-none');
+                    darkLogo.classList.add('d-none');
+                    lightLogo.classList.remove('d-none');
+                } else {
+                    lightIcon.classList.add('d-none');
+                    darkIcon.classList.remove('d-none');
+                    darkLogo.classList.remove('d-none');
+                    lightLogo.classList.add('d-none');
+                }
+            }
+        });
+    </script>
+</body>
+</html>2">Read:</small>
                             <a href="https://discover-cookbook.numfocus.org/dev/en/" class="btn btn-outline-secondary btn-sm">English</a>
                         </div>
                         <div class="col-md">
