diff --git a/README.md b/README.md
index 11fa121..0995ae2 100644
--- a/README.md
+++ b/README.md
@@ -452,7 +452,7 @@ For questions or comments, please [open an issue](https://github.com/chrisvel/tu
 
 Join the tududi community:
 
-[![Discord](https://img.shields.io/discord/1234567890?color=7289da&label=Discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/fkbeJ9CmcH)  
+[![Discord](https://img.shields.io/badge/Discord-Join%20Server-7289da?logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/fkbeJ9CmcH)  
 [![Reddit](https://img.shields.io/reddit/subreddit-subscribers/tududi?color=ff4500&label=Reddit&logo=reddit&logoColor=white&style=for-the-badge)](https://www.reddit.com/r/tududi/)
 
 ## 🌟 Please check my other projects!
diff --git a/index.html b/index.html
index 878b9c1..20e4221 100644
--- a/index.html
+++ b/index.html
@@ -4,48 +4,94 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>tududi - Self-Hosted Task & Project Management</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --primary-color: #1e88e5;
-            --secondary-color: #666666;
-            --light-color: #f5f5f5;
-            --dark-color: #212121;
-            --success-color: #0d47a1;
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --secondary-color: #64748b;
+            --accent-color: #06b6d4;
+            --light-color: #f8fafc;
+            --dark-color: #0f172a;
+            --success-color: #059669;
             
             --bg-color: #ffffff;
-            --text-color: #212121;
-            --card-bg: #f5f5f5;
-            --border-color: rgba(0, 0, 0, 0.1);
-            --button-hover: #1565c0;
+            --text-color: #1e293b;
+            --text-muted: #64748b;
+            --card-bg: #ffffff;
+            --border-color: rgba(0, 0, 0, 0.08);
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --gradient-primary: linear-gradient(135deg, #e6a968 0%, #d49958 100%);
+            --gradient-elegant: linear-gradient(135deg, #f0b575 0%, #e0a465 100%);
+            --gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
         }
         
         [data-theme="dark"] {
-            --primary-color: #42a5f5;
-            --secondary-color: #aaaaaa;
-            --light-color: #333333;
-            --dark-color: #f5f5f5;
-            --success-color: #64b5f6;
+            --primary-color: #3b82f6;
+            --primary-hover: #2563eb;
+            --secondary-color: #94a3b8;
+            --accent-color: #06b6d4;
+            --light-color: #1e293b;
+            --dark-color: #f1f5f9;
+            --success-color: #10b981;
             
-            --bg-color: #121212;
-            --text-color: #f5f5f5;
-            --card-bg: #1e1e1e;
+            --bg-color: #0f172a;
+            --text-color: #f1f5f9;
+            --text-muted: #94a3b8;
+            --card-bg: #1e293b;
             --border-color: rgba(255, 255, 255, 0.1);
-            --button-hover: #2196f3;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+            --gradient-primary: linear-gradient(135deg, #e6a968 0%, #d49958 100%);
+            --gradient-elegant: linear-gradient(135deg, #f0b575 0%, #e0a465 100%);
+            --gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
         }
         
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
         }
         
         body {
-            line-height: 1.6;
+            line-height: 1.7;
             color: var(--text-color);
             background-color: var(--bg-color);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+            font-weight: 400;
             transition: all 0.3s ease;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
         
         .container {
@@ -57,8 +103,10 @@
         
         /* Header */
         header {
-            background-color: var(--bg-color);
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border-color);
             position: fixed;
             width: 100%;
             top: 0;
@@ -66,6 +114,22 @@
             transition: all 0.3s ease;
         }
         
+        [data-theme="dark"] header {
+            background: rgba(15, 23, 42, 0.95);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        }
+        
+        header::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: var(--gradient-primary);
+            opacity: 0.3;
+        }
+        
         nav {
             display: flex;
             justify-content: space-between;
@@ -76,13 +140,34 @@
         .logo {
             display: flex;
             align-items: center;
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--primary-color);
+            font-size: 1.75rem;
+            font-weight: 800;
+            color: #1e293b;
+            text-decoration: none;
+            transition: all 0.3s ease;
         }
         
-        .logo i {
-            margin-right: 10px;
+        [data-theme="dark"] .logo {
+            color: white;
+        }
+        
+        .logo:hover {
+            transform: translateY(-1px);
+        }
+        
+        .logo-icon {
+            margin-right: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .logo-icon svg {
+            color: #1e293b;
+        }
+        
+        [data-theme="dark"] .logo-icon svg {
+            color: white;
         }
         
         .nav-links {
@@ -92,22 +177,42 @@
         }
         
         .nav-links li {
-            margin-left: 30px;
+            margin-left: 8px;
         }
         
         .nav-links a {
             text-decoration: none;
             color: var(--text-color);
             font-weight: 500;
-            transition: color 0.3s;
+            transition: all 0.3s ease;
+            position: relative;
+            padding: 8px 16px;
+            border-radius: 8px;
+        }
+        
+        .nav-links a::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 0;
+            height: 2px;
+            background: var(--gradient-primary);
+            transition: all 0.3s ease;
+            transform: translateX(-50%);
         }
         
         .nav-links a:hover {
             color: var(--primary-color);
+            background: rgba(37, 99, 235, 0.05);
+        }
+        
+        .nav-links a:hover::before {
+            width: 100%;
         }
         
         .theme-switch {
-            margin-left: 30px;
+            margin-left: 8px;
             display: flex;
             align-items: center;
         }
@@ -164,65 +269,117 @@
         }
         
         .cta-button {
-            background-color: var(--primary-color);
+            background: var(--gradient-primary);
             color: white;
-            padding: 10px 20px;
-            border-radius: 5px;
+            padding: 12px 24px;
+            border-radius: 8px;
+            text-decoration: none;
             font-weight: 600;
-            transition: background-color 0.3s;
+            transition: all 0.3s ease;
+            box-shadow: var(--shadow-sm);
         }
         
         .cta-button:hover {
-            background-color: var(--button-hover);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
             color: white;
         }
         
         /* Hero Section */
         .hero {
-            padding: 150px 0 100px;
+            padding: 180px 0 120px;
             text-align: center;
-            background-color: var(--bg-color);
+            background: var(--gradient-primary);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60"><defs><pattern id="hero-pattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="60" height="60" fill="url(%23hero-pattern)"/></svg>') repeat;
+            opacity: 0.6;
+        }
+        
+        .hero::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%);
         }
         
         .hero-content {
             max-width: 900px;
             margin: 0 auto;
+            position: relative;
+            z-index: 1;
         }
         
         .hero h1 {
-            font-size: 3rem;
-            margin-bottom: 20px;
-            color: var(--text-color);
+            font-size: 3.5rem;
+            font-weight: 800;
+            margin-bottom: 24px;
+            color: white;
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            position: relative;
+            z-index: 1;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            animation: fadeInUp 0.8s ease-out;
         }
         
         .hero p {
-            font-size: 1.25rem;
-            color: var(--secondary-color);
-            margin-bottom: 30px;
+            font-size: 1.3rem;
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 40px;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+            line-height: 1.6;
+            position: relative;
+            z-index: 1;
+            animation: fadeInUp 0.8s ease-out 0.2s both;
         }
         
         .hero-buttons {
             display: flex;
             justify-content: center;
             gap: 20px;
-            margin-bottom: 50px;
+            margin-bottom: 60px;
+            flex-wrap: wrap;
+            position: relative;
+            z-index: 1;
+            animation: fadeInUp 0.8s ease-out 0.4s both;
         }
         
         .hero-buttons a {
             text-decoration: none;
-            padding: 15px 30px;
-            border-radius: 5px;
+            padding: 16px 32px;
+            border-radius: 12px;
             font-weight: 600;
-            transition: all 0.3s;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
         }
         
         .primary-button {
-            background-color: var(--primary-color);
-            color: white;
+            background-color: white;
+            color: var(--primary-color);
+            box-shadow: var(--shadow-lg);
         }
         
         .primary-button:hover {
-            background-color: var(--button-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         }
         
         .secondary-button {
@@ -256,71 +413,136 @@
             border-radius: 5px;
         }
         
+        .hero-image-container {
+            margin-bottom: 40px;
+            position: relative;
+            z-index: 1;
+        }
+        
         .hero-image {
             max-width: 100%;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            border-radius: 16px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
             margin: 0 auto;
             transition: all 0.3s ease;
+            animation: fadeInUp 0.8s ease-out 0.6s both;
         }
         
         /* Features */
         .features {
-            padding: 100px 0;
+            padding: 120px 0;
+            background-color: var(--light-color);
+        }
+        
+        [data-theme="dark"] .features {
             background-color: var(--bg-color);
         }
         
         .section-header {
             text-align: center;
-            margin-bottom: 60px;
+            margin-bottom: 80px;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
         }
         
         .section-header h2 {
-            font-size: 2.5rem;
-            margin-bottom: 20px;
+            font-size: 2.4rem;
+            font-weight: 800;
+            margin-bottom: 24px;
             color: var(--text-color);
+            line-height: 1.2;
+            letter-spacing: -0.02em;
         }
         
         .section-header p {
-            font-size: 1.2rem;
-            color: var(--secondary-color);
+            font-size: 1.25rem;
+            color: var(--text-muted);
+            line-height: 1.6;
             max-width: 700px;
             margin: 0 auto;
         }
         
         .features-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 24px;
         }
         
         .feature-card {
             background-color: var(--card-bg);
-            border-radius: 10px;
-            padding: 30px;
-            text-align: center;
-            transition: transform 0.3s, box-shadow 0.3s;
+            padding: 24px 20px;
+            border-radius: 12px;
+            box-shadow: var(--shadow-md);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            text-align: left;
+            border: 1px solid var(--border-color);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: var(--gradient-primary);
+            transition: all 0.3s ease;
+        }
+        
+        .feature-card::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+            transition: left 0.5s ease;
         }
         
         .feature-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: var(--shadow-lg);
+        }
+        
+        .feature-card:hover::after {
+            left: 100%;
+        }
+        
+        .feature-card:hover::before {
+            height: 6px;
         }
         
         .feature-icon {
-            font-size: 2.5rem;
-            color: var(--primary-color);
-            margin-bottom: 20px;
+            background: var(--gradient-primary);
+            color: white;
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 16px;
+            font-size: 1.2rem;
+            box-shadow: var(--shadow-md);
         }
         
         .feature-card h3 {
-            font-size: 1.5rem;
-            margin-bottom: 15px;
+            font-size: 1.2rem;
+            font-weight: 700;
+            margin-bottom: 12px;
             color: var(--text-color);
+            line-height: 1.3;
         }
         
         .feature-card p {
-            color: var(--secondary-color);
+            color: var(--text-muted);
+            line-height: 1.6;
+            font-size: 0.9rem;
         }
         
         /* Languages Section */
@@ -629,13 +851,37 @@
         
         /* Responsive */
         @media (max-width: 768px) {
+            .hero {
+                padding: 140px 0 80px;
+            }
+            
             .hero h1 {
                 font-size: 2.5rem;
             }
             
+            .hero p {
+                font-size: 1.1rem;
+            }
+            
             .hero-buttons {
                 flex-direction: column;
-                gap: 10px;
+                gap: 12px;
+                align-items: center;
+            }
+            
+            .hero-buttons a {
+                width: 100%;
+                max-width: 280px;
+                text-align: center;
+            }
+            
+            .section-header h2 {
+                font-size: 2.2rem;
+            }
+            
+            .features-grid {
+                grid-template-columns: 1fr;
+                gap: 24px;
             }
             
             .screenshots-grid {
@@ -658,6 +904,12 @@
         <div class="container">
             <nav>
                 <div class="logo">
+                    <div class="logo-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="28" height="28">
+                            <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="3.5" fill="none"/>
+                            <path d="M10 16l4 4 8-8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                        </svg>
+                    </div>
                     <span>tududi</span>
                 </div>
                 <ul class="nav-links">
@@ -681,8 +933,8 @@
     <section class="hero">
         <div class="container">
             <div class="hero-content">
-                <div class="video-container">
-                    <iframe src="https://www.youtube.com/embed/mT7QBGssLTo?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                <div class="hero-image-container">
+                    <img src="screenshots/all-dark.png" alt="tududi - Dark Mode Interface" class="hero-image">
                 </div>
                 <h1>Task Management Made Simple</h1>
                 <p>tududi is the self-hosted task management tool that puts you in control. Organize your life and projects with a clear, hierarchical structure, smart recurring tasks, and seamless Telegram integration. Get focused, stay productive, and keep your data private.</p>
@@ -706,42 +958,42 @@
                         <i class="fas fa-sync-alt"></i>
                     </div>
                     <h3>Smart Recurring Tasks</h3>
-                    <p>Sophisticated recurring task system with parent-child relationships. Support for daily, weekly, monthly, and complex patterns. Completion-based recurrence and direct parent editing from any task instance.</p>
+                    <p>Daily, weekly, monthly patterns with completion-based recurrence and parent-child relationships.</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-tasks"></i>
                     </div>
                     <h3>Advanced Task Management</h3>
-                    <p>Create, update, and organize tasks with rich metadata including priorities, due dates, and custom tags. Smart sorting by name, date, priority, or completion status with powerful filtering options.</p>
+                    <p>Rich metadata with priorities, due dates, and tags. Smart sorting and powerful filtering options.</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-sticky-note"></i>
                     </div>
                     <h3>Project Documentation</h3>
-                    <p>Attach detailed notes and documentation to any project. Rich text support for meeting notes, project requirements, ideas, and reference materials - all searchable and organized.</p>
+                    <p>Rich text notes for projects with full search and organization capabilities.</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-tag"></i>
                     </div>
                     <h3>Flexible Tagging System</h3>
-                    <p>Create custom tags for cross-cutting concerns like #urgent, #client-work, or #personal. Tag both tasks and notes for powerful cross-project organization and instant filtering.</p>
+                    <p>Custom tags for tasks and notes with instant filtering and cross-project organization.</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-project-diagram"></i>
                     </div>
-                    <h3>Hierarchical Project Organization</h3>
-                    <p>Structure your work with Areas containing Projects containing Tasks. Perfect for GTD methodology - separate work areas, personal projects, and specific actionable tasks.</p>
+                    <h3>Hierarchical Organization</h3>
+                    <p>GTD-style Areas → Projects → Tasks structure for clear work separation.</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
                         <i class="fas fa-layer-group"></i>
                     </div>
                     <h3>Life Area Management</h3>
-                    <p>Organize projects into life areas like Work, Personal, Health, or Learning. Maintain clear boundaries between different aspects of your life while keeping everything in one place.</p>
+                    <p>Organize projects by life areas - Work, Personal, Health, Learning - with clear boundaries.</p>
                 </div>
                 <div class="feature-card">
                     <div class="feature-icon">
@@ -907,53 +1159,6 @@
         </div>
     </section>
 
-    <section class="installation" style="background-color: var(--card-bg);">
-        <div class="container">
-            <div class="section-header">
-                <h2>🔄 Intelligent Recurring Tasks</h2>
-                <p>tududi's recurring task system goes beyond simple repetition. With smart parent-child relationships and flexible scheduling options, manage complex recurring workflows with ease.</p>
-            </div>
-            <div class="installation-steps" style="background-color: var(--bg-color);">
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px;">
-                    <div style="text-align: center; padding: 20px;">
-                        <div style="font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;">
-                            <i class="fas fa-calendar-day"></i>
-                        </div>
-                        <h3 style="color: var(--text-color); margin-bottom: 10px;">Multiple Patterns</h3>
-                        <p style="color: var(--secondary-color); font-size: 0.9rem;">Daily, weekly, monthly, monthly weekday (e.g., "2nd Tuesday"), and monthly last day patterns</p>
-                    </div>
-                    <div style="text-align: center; padding: 20px;">
-                        <div style="font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;">
-                            <i class="fas fa-check-double"></i>
-                        </div>
-                        <h3 style="color: var(--text-color); margin-bottom: 10px;">Completion-Based</h3>
-                        <p style="color: var(--secondary-color); font-size: 0.9rem;">Next task scheduled based on completion date instead of due date - perfect for flexible routines</p>
-                    </div>
-                    <div style="text-align: center; padding: 20px;">
-                        <div style="font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;">
-                            <i class="fas fa-link"></i>
-                        </div>
-                        <h3 style="color: var(--text-color); margin-bottom: 10px;">Parent-Child Linking</h3>
-                        <p style="color: var(--secondary-color); font-size: 0.9rem;">Generated tasks maintain connection to their parent - edit recurrence from any instance</p>
-                    </div>
-                </div>
-                <div style="background-color: var(--card-bg); padding: 25px; border-radius: 10px; border-left: 4px solid var(--primary-color);">
-                    <h4 style="color: var(--text-color); margin-bottom: 15px; display: flex; align-items: center;">
-                        <i class="fas fa-lightbulb" style="color: var(--primary-color); margin-right: 10px;"></i>
-                        Example Use Cases
-                    </h4>
-                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; font-size: 0.9rem; color: var(--secondary-color);">
-                        <div><strong style="color: var(--text-color);">Daily:</strong> Take vitamins, review goals</div>
-                        <div><strong style="color: var(--text-color);">Weekly:</strong> Grocery shopping (every Sunday)</div>
-                        <div><strong style="color: var(--text-color);">Monthly:</strong> Pay rent (1st of month)</div>
-                        <div><strong style="color: var(--text-color);">Complex:</strong> Team review (1st Mon of quarter)</div>
-                        <div><strong style="color: var(--text-color);">Flexible:</strong> Car maintenance (completion-based)</div>
-                        <div><strong style="color: var(--text-color);">End Date:</strong> Study plan (until exam date)</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
 
     <section class="screenshots" id="screenshots">
         <div class="container">
@@ -1062,7 +1267,7 @@
             </div>
             <div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 40px;">
                 <a href="https://discord.gg/fkbeJ9CmcH" style="display: inline-block;">
-                    <img src="https://img.shields.io/discord/1234567890?color=7289da&label=Discord&logo=discord&logoColor=white&style=for-the-badge" alt="Join Discord" style="height: 40px; transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
+                    <img src="https://img.shields.io/badge/Discord-Join%20Server-7289da?logo=discord&logoColor=white&style=for-the-badge" alt="Join Discord" style="height: 40px; transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                 </a>
                 <a href="https://www.reddit.com/r/tududi/" style="display: inline-block;">
                     <img src="https://img.shields.io/reddit/subreddit-subscribers/tududi?color=ff4500&label=Reddit&logo=reddit&logoColor=white&style=for-the-badge" alt="Join Reddit" style="height: 40px; transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
diff --git a/screenshots/all-dark.png b/screenshots/all-dark.png
index b529f32..a289de3 100644
Binary files a/screenshots/all-dark.png and b/screenshots/all-dark.png differ
diff --git a/screenshots/all-light.png b/screenshots/all-light.png
index 5c05c7d..168a12c 100644
Binary files a/screenshots/all-light.png and b/screenshots/all-light.png differ