From 69be81c467063cfff4179b5f0a333a061d73ffcd Mon Sep 17 00:00:00 2001
From: Harish Vishwakarma <harishv.lpu@gmail.com>
Date: Fri, 16 Jan 2026 07:17:29 +0530
Subject: [PATCH] Update zeko.chat website

---
 app/src/main/AndroidManifest.xml |   2 +-
 website/delete-account.html      | 629 +++++++++++++++++--------
 website/index.html               | 488 +++++++++++++++----
 website/privacy.html             | 786 ++++++++++++++++++++++++-------
 4 files changed, 1465 insertions(+), 440 deletions(-)

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index edc7c8f3..ab96feb2 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -37,7 +37,7 @@
         android:name=".PeptideApplication"
         android:theme="@style/Theme.Peptide"
         android:enableOnBackInvokedCallback="true"
-        tools:targetApi="tiramisu">
+        tools:targetApi="baklava">
         <provider
             android:name="androidx.core.content.FileProvider"
             android:authorities="${applicationId}.fileprovider"
diff --git a/website/delete-account.html b/website/delete-account.html
index 2e2cb387..08737b0d 100644
--- a/website/delete-account.html
+++ b/website/delete-account.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Request Account Deletion - ZekoChat</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@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
@@ -11,245 +14,489 @@
                 extend: {
                     colors: {
                         'primary': '#100518',
-                        'background': '#131722',
+                        'background': '#0a0a0f',
+                        'surface': '#131722',
                         'accent': '#FEDD17',
-                    }
+                        'accent-2': '#FF6B35',
+                        'accent-3': '#8B5CF6',
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'slide-up': 'slideUp 0.6s ease-out',
+                        'fade-in': 'fadeIn 0.8s ease-out',
+                        'shake': 'shake 0.5s ease-in-out',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0px)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        slideUp: {
+                            'from': { opacity: '0', transform: 'translateY(30px)' },
+                            'to': { opacity: '1', transform: 'translateY(0)' },
+                        },
+                        fadeIn: {
+                            'from': { opacity: '0' },
+                            'to': { opacity: '1' },
+                        },
+                        shake: {
+                            '0%, 100%': { transform: 'translateX(0)' },
+                            '25%': { transform: 'translateX(-5px)' },
+                            '75%': { transform: 'translateX(5px)' },
+                        },
+                    },
+                    backgroundImage: {
+                        'hero-gradient': 'linear-gradient(135deg, #100518 0%, #1a0a2e 50%, #0a0a0f 100%)',
+                    },
                 }
             }
         }
     </script>
     <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        .gradient-text {
+            background: linear-gradient(135deg, #FEDD17 0%, #FF6B35 50%, #8B5CF6 100%);
+            background-size: 200% 200%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .glass {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+        }
+        .glass-strong {
+            background: rgba(16, 5, 24, 0.8);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+        }
+        .noise {
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+            opacity: 0.02;
+        }
+        .input-modern {
+            transition: all 0.3s ease;
+        }
+        .input-modern:focus {
+            box-shadow: 0 0 0 4px rgba(254, 221, 23, 0.1);
+        }
+        .btn-danger {
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-danger::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.5s;
+        }
+        .btn-danger:hover::before {
+            left: 100%;
+        }
+        .step-line::before {
+            content: '';
+            position: absolute;
+            left: 20px;
+            top: 44px;
+            bottom: 0;
+            width: 2px;
+            background: linear-gradient(to bottom, rgba(254, 221, 23, 0.3), transparent);
+        }
+        .step-line:last-child::before {
+            display: none;
         }
     </style>
 </head>
-<body class="bg-background text-white min-h-screen">
+<body class="bg-background text-white min-h-screen font-sans antialiased overflow-x-hidden">
+    <!-- Noise Overlay -->
+    <div class="noise fixed inset-0 pointer-events-none z-50"></div>
+
     <!-- Navigation -->
-    <nav class="bg-primary/90 backdrop-blur-sm sticky top-0 z-50 border-b border-white/10">
+    <nav class="glass-strong fixed w-full top-0 z-40 border-b border-white/5">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center space-x-3">
-                    <img src="assets/logo.png" alt="ZekoChat Logo" class="h-10 w-10 rounded-lg">
-                    <span class="text-xl font-bold">ZekoChat</span>
+            <div class="flex justify-between items-center h-20">
+                <a href="index.html" class="flex items-center space-x-3 group">
+                    <div class="relative">
+                        <div class="absolute -inset-1 bg-gradient-to-r from-accent via-accent-2 to-accent-3 rounded-xl blur opacity-30 group-hover:opacity-60 transition duration-500"></div>
+                        <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-11 w-11 rounded-xl">
+                    </div>
+                    <span class="text-xl font-bold tracking-tight">ZekoChat</span>
+                </a>
+                <div class="hidden md:flex items-center space-x-2">
+                    <a href="index.html" class="px-4 py-2 rounded-full text-gray-300 font-medium text-sm transition hover:bg-white/10 hover:text-white">Home</a>
+                    <a href="privacy.html" class="px-4 py-2 rounded-full text-gray-300 font-medium text-sm transition hover:bg-white/10 hover:text-white">Privacy</a>
+                    <a href="delete-account.html" class="px-4 py-2 rounded-full bg-white/10 text-accent font-medium text-sm transition hover:bg-white/15">Account</a>
+                    <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="ml-4 px-5 py-2.5 rounded-full bg-gradient-to-r from-accent to-accent-2 text-primary font-semibold text-sm transition transform hover:scale-105 hover:shadow-lg hover:shadow-accent/25">
+                        Download
+                    </a>
                 </div>
-                <div class="hidden md:flex space-x-6">
-                    <a href="index.html" class="hover:text-accent transition">Home</a>
-                    <a href="privacy.html" class="hover:text-accent transition">Privacy Policy</a>
-                    <a href="delete-account.html" class="text-accent hover:text-accent/80 transition">Delete Account</a>
-                </div>
-                <button id="mobile-menu-button" class="md:hidden text-white">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="mobile-menu-button" class="md:hidden relative w-10 h-10 flex items-center justify-center rounded-xl bg-white/10 hover:bg-white/15 transition">
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
             </div>
             <!-- Mobile Menu -->
-            <div id="mobile-menu" class="hidden md:hidden pb-4">
-                <a href="index.html" class="block py-2 hover:text-accent transition">Home</a>
-                <a href="privacy.html" class="block py-2 hover:text-accent transition">Privacy Policy</a>
-                <a href="delete-account.html" class="block py-2 text-accent">Delete Account</a>
+            <div id="mobile-menu" class="hidden md:hidden pb-6 animate-slide-up">
+                <div class="flex flex-col space-y-2 pt-4 border-t border-white/10">
+                    <a href="index.html" class="px-4 py-3 rounded-xl text-gray-300 hover:bg-white/10 transition">Home</a>
+                    <a href="privacy.html" class="px-4 py-3 rounded-xl text-gray-300 hover:bg-white/10 transition">Privacy Policy</a>
+                    <a href="delete-account.html" class="px-4 py-3 rounded-xl bg-white/10 text-accent font-medium">Delete Account</a>
+                    <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="mt-2 px-4 py-3 rounded-xl bg-gradient-to-r from-accent to-accent-2 text-primary font-semibold text-center">
+                        Download App
+                    </a>
+                </div>
             </div>
         </div>
     </nav>
 
+    <!-- Header Section -->
+    <section class="relative pt-32 pb-16 overflow-hidden">
+        <!-- Background -->
+        <div class="absolute inset-0 bg-hero-gradient"></div>
+        <div class="absolute top-1/4 -left-32 w-96 h-96 bg-red-500/5 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 -right-32 w-96 h-96 bg-accent-3/5 rounded-full blur-3xl"></div>
+
+        <div class="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center animate-fade-in">
+                <!-- Icon -->
+                <div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-red-500/20 to-orange-500/20 border border-red-500/20 mb-8">
+                    <svg class="w-10 h-10 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                </div>
+
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">
+                    Request Account <span class="gradient-text">Deletion</span>
+                </h1>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    We're sorry to see you go. Please fill out the form below to request deletion of your account.
+                </p>
+            </div>
+        </div>
+    </section>
+
     <!-- Main Content -->
-    <main class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div class="text-center mb-12">
-            <h1 class="text-4xl md:text-5xl font-bold mb-4">Request Account Deletion</h1>
-            <p class="text-gray-400 text-lg">
-                We're sorry to see you go. Please fill out the form below to request deletion of your account.
-            </p>
-        </div>
-
-        <!-- Important Notice -->
-        <div class="bg-yellow-500/20 border border-yellow-500/50 rounded-lg p-6 mb-8">
-            <div class="flex items-start">
-                <svg class="h-6 w-6 text-yellow-500 mr-3 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                </svg>
-                <div>
-                    <h3 class="font-semibold text-yellow-500 mb-2">Important Information</h3>
-                    <ul class="text-gray-300 text-sm space-y-1 list-disc list-inside">
-                        <li>Account deletion is permanent and cannot be undone</li>
-                        <li>All your messages, media, and account data will be permanently deleted</li>
-                        <li>You will lose access to all servers and groups you're a member of</li>
-                        <li>This process may take up to 30 days to complete</li>
-                        <li>Some information may be retained for legal or security purposes as required by law</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        <!-- Deletion Form -->
-        <form id="deletion-form" class="bg-white/5 backdrop-blur-sm rounded-xl p-8 border border-white/10">
-            <div class="space-y-6">
-                <!-- Email -->
-                <div>
-                    <label for="email" class="block text-sm font-medium mb-2">
-                        Email Address <span class="text-red-400">*</span>
-                    </label>
-                    <input 
-                        type="email" 
-                        id="email" 
-                        name="email" 
-                        required
-                        class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-500"
-                        placeholder="your.email@example.com"
-                    >
-                    <p class="text-gray-400 text-sm mt-1">The email address associated with your ZekoChat account</p>
-                </div>
-
-                <!-- Username -->
-                <div>
-                    <label for="username" class="block text-sm font-medium mb-2">
-                        Username <span class="text-red-400">*</span>
-                    </label>
-                    <input 
-                        type="text" 
-                        id="username" 
-                        name="username" 
-                        required
-                        class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-500"
-                        placeholder="Your username"
-                    >
-                    <p class="text-gray-400 text-sm mt-1">Your ZekoChat username (without the tag)</p>
-                </div>
-
-                <!-- Reason -->
-                <div>
-                    <label for="reason" class="block text-sm font-medium mb-2">
-                        Reason for Deletion (Optional)
-                    </label>
-                    <textarea 
-                        id="reason" 
-                        name="reason" 
-                        rows="4"
-                        class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent text-white placeholder-gray-500 resize-none"
-                        placeholder="Help us improve by sharing why you're leaving (optional)"
-                    ></textarea>
-                </div>
-
-                <!-- Confirmation Checkbox -->
-                <div class="flex items-start">
-                    <input 
-                        type="checkbox" 
-                        id="confirm" 
-                        name="confirm" 
-                        required
-                        class="mt-1 h-5 w-5 rounded border-white/20 bg-white/10 text-accent focus:ring-accent focus:ring-2"
-                    >
-                    <label for="confirm" class="ml-3 text-sm text-gray-300">
-                        I understand that account deletion is permanent and cannot be undone. I confirm that I want to delete my ZekoChat account and all associated data. <span class="text-red-400">*</span>
-                    </label>
-                </div>
-
-                <!-- Submit Button -->
-                <div class="pt-4">
-                    <button 
-                        type="submit"
-                        class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-background"
-                    >
-                        Submit Deletion Request
-                    </button>
-                </div>
-            </div>
-        </form>
-
-        <!-- Alternative Methods -->
-        <div class="mt-12 bg-white/5 backdrop-blur-sm rounded-xl p-8 border border-white/10">
-            <h2 class="text-2xl font-semibold mb-4">Alternative Methods</h2>
-            <p class="text-gray-400 mb-4">
-                You can also request account deletion through the following methods:
-            </p>
-            <div class="space-y-4">
-                <div class="flex items-start">
-                    <svg class="h-6 w-6 text-accent mr-3 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                    </svg>
-                    <div>
-                        <h3 class="font-semibold mb-1">Email</h3>
-                        <p class="text-gray-400 text-sm">Send an email to <a href="mailto:contact@zeko.chat" class="text-accent hover:underline">contact@zeko.chat</a> with your account details and deletion request.</p>
+    <main class="relative pb-32">
+        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+            <!-- Important Notice -->
+            <div class="glass rounded-2xl p-6 border border-yellow-500/30 bg-yellow-500/5 mb-8 animate-fade-in">
+                <div class="flex items-start gap-4">
+                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-yellow-500/20 flex items-center justify-center">
+                        <svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                        </svg>
                     </div>
-                </div>
-                <div class="flex items-start">
-                    <svg class="h-6 w-6 text-accent mr-3 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
-                    </svg>
                     <div>
-                        <h3 class="font-semibold mb-1">Support Server</h3>
-                        <p class="text-gray-400 text-sm">Join our <a href="https://app.peptide.chat/invite/Testers" class="text-accent hover:underline" target="_blank">Testers Server</a> and contact our support team.</p>
+                        <h3 class="font-bold text-yellow-400 text-lg mb-3">Important Information</h3>
+                        <ul class="text-gray-300 space-y-2">
+                            <li class="flex items-start gap-2">
+                                <svg class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01" />
+                                </svg>
+                                <span>Account deletion is <strong class="text-white">permanent</strong> and cannot be undone</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <svg class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01" />
+                                </svg>
+                                <span>All your messages, media, and account data will be permanently deleted</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <svg class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01" />
+                                </svg>
+                                <span>You will lose access to all servers and groups you're a member of</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <svg class="w-5 h-5 text-yellow-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01" />
+                                </svg>
+                                <span>This process may take up to <strong class="text-white">30 days</strong> to complete</span>
+                            </li>
+                        </ul>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- What Happens Next -->
-        <div class="mt-12 bg-white/5 backdrop-blur-sm rounded-xl p-8 border border-white/10">
-            <h2 class="text-2xl font-semibold mb-4">What Happens Next?</h2>
-            <ol class="list-decimal list-inside space-y-3 text-gray-300">
-                <li>We will verify your identity and account ownership</li>
-                <li>You will receive a confirmation email within 24-48 hours</li>
-                <li>Your account will be scheduled for deletion</li>
-                <li>Account deletion will be completed within 30 days</li>
-                <li>You will receive a final confirmation once deletion is complete</li>
-            </ol>
+            <!-- Deletion Form -->
+            <form id="deletion-form" class="glass rounded-2xl p-8 border border-white/10 mb-8 animate-fade-in">
+                <div class="space-y-6">
+                    <!-- Email -->
+                    <div>
+                        <label for="email" class="flex items-center gap-2 text-sm font-medium mb-3">
+                            <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                            </svg>
+                            Email Address <span class="text-red-400">*</span>
+                        </label>
+                        <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            required
+                            class="input-modern w-full px-5 py-4 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-accent text-white placeholder-gray-500"
+                            placeholder="your.email@example.com"
+                        >
+                        <p class="text-gray-500 text-sm mt-2">The email address associated with your ZekoChat account</p>
+                    </div>
+
+                    <!-- Username -->
+                    <div>
+                        <label for="username" class="flex items-center gap-2 text-sm font-medium mb-3">
+                            <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                            </svg>
+                            Username <span class="text-red-400">*</span>
+                        </label>
+                        <input
+                            type="text"
+                            id="username"
+                            name="username"
+                            required
+                            class="input-modern w-full px-5 py-4 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-accent text-white placeholder-gray-500"
+                            placeholder="Your username"
+                        >
+                        <p class="text-gray-500 text-sm mt-2">Your ZekoChat username (without the tag)</p>
+                    </div>
+
+                    <!-- Reason -->
+                    <div>
+                        <label for="reason" class="flex items-center gap-2 text-sm font-medium mb-3">
+                            <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                            </svg>
+                            Reason for Deletion <span class="text-gray-500">(Optional)</span>
+                        </label>
+                        <textarea
+                            id="reason"
+                            name="reason"
+                            rows="4"
+                            class="input-modern w-full px-5 py-4 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:border-accent text-white placeholder-gray-500 resize-none"
+                            placeholder="Help us improve by sharing why you're leaving (optional)"
+                        ></textarea>
+                    </div>
+
+                    <!-- Confirmation Checkbox -->
+                    <div class="flex items-start gap-4 p-5 rounded-xl bg-red-500/5 border border-red-500/20">
+                        <input
+                            type="checkbox"
+                            id="confirm"
+                            name="confirm"
+                            required
+                            class="mt-1 h-5 w-5 rounded border-white/20 bg-white/10 text-red-500 focus:ring-red-500 focus:ring-2 cursor-pointer"
+                        >
+                        <label for="confirm" class="text-sm text-gray-300 cursor-pointer">
+                            I understand that account deletion is <strong class="text-white">permanent and cannot be undone</strong>. I confirm that I want to delete my ZekoChat account and all associated data. <span class="text-red-400">*</span>
+                        </label>
+                    </div>
+
+                    <!-- Submit Button -->
+                    <div class="pt-4">
+                        <button
+                            type="submit"
+                            class="btn-danger w-full bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 text-white font-bold py-4 px-6 rounded-xl transition transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-background flex items-center justify-center gap-3"
+                        >
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                            </svg>
+                            Submit Deletion Request
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+            <!-- What Happens Next -->
+            <div class="glass rounded-2xl p-8 border border-white/10 mb-8 animate-fade-in">
+                <h2 class="text-2xl font-bold mb-8 flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center">
+                        <svg class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                    </div>
+                    What Happens Next?
+                </h2>
+                <div class="space-y-6">
+                    <div class="step-line relative flex items-start gap-4">
+                        <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center z-10">
+                            <span class="text-accent font-bold">1</span>
+                        </div>
+                        <div class="pt-1">
+                            <h4 class="font-semibold mb-1">Identity Verification</h4>
+                            <p class="text-gray-400 text-sm">We will verify your identity and account ownership</p>
+                        </div>
+                    </div>
+                    <div class="step-line relative flex items-start gap-4">
+                        <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center z-10">
+                            <span class="text-accent font-bold">2</span>
+                        </div>
+                        <div class="pt-1">
+                            <h4 class="font-semibold mb-1">Confirmation Email</h4>
+                            <p class="text-gray-400 text-sm">You will receive a confirmation email within 24-48 hours</p>
+                        </div>
+                    </div>
+                    <div class="step-line relative flex items-start gap-4">
+                        <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center z-10">
+                            <span class="text-accent font-bold">3</span>
+                        </div>
+                        <div class="pt-1">
+                            <h4 class="font-semibold mb-1">Scheduled Deletion</h4>
+                            <p class="text-gray-400 text-sm">Your account will be scheduled for deletion</p>
+                        </div>
+                    </div>
+                    <div class="step-line relative flex items-start gap-4">
+                        <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center z-10">
+                            <span class="text-accent font-bold">4</span>
+                        </div>
+                        <div class="pt-1">
+                            <h4 class="font-semibold mb-1">Account Removal</h4>
+                            <p class="text-gray-400 text-sm">Account deletion will be completed within 30 days</p>
+                        </div>
+                    </div>
+                    <div class="relative flex items-start gap-4">
+                        <div class="flex-shrink-0 w-10 h-10 rounded-xl bg-green-500/20 flex items-center justify-center z-10">
+                            <svg class="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                        </div>
+                        <div class="pt-1">
+                            <h4 class="font-semibold mb-1">Final Confirmation</h4>
+                            <p class="text-gray-400 text-sm">You will receive a final confirmation once deletion is complete</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Alternative Methods -->
+            <div class="glass rounded-2xl p-8 border border-white/10 animate-fade-in">
+                <h2 class="text-2xl font-bold mb-6 flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-xl bg-accent/20 flex items-center justify-center">
+                        <svg class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                        </svg>
+                    </div>
+                    Alternative Methods
+                </h2>
+                <p class="text-gray-400 mb-6">
+                    You can also request account deletion through the following methods:
+                </p>
+                <div class="grid sm:grid-cols-2 gap-4">
+                    <a href="mailto:contact@zeko.chat" class="flex items-center gap-4 bg-white/5 rounded-xl p-5 border border-white/5 hover:border-accent/30 transition group">
+                        <div class="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center group-hover:scale-110 transition">
+                            <svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <div class="font-semibold mb-1">Email</div>
+                            <div class="text-accent text-sm">contact@zeko.chat</div>
+                        </div>
+                    </a>
+                    <a href="https://app.peptide.chat/invite/Testers" target="_blank" class="flex items-center gap-4 bg-white/5 rounded-xl p-5 border border-white/5 hover:border-accent/30 transition group">
+                        <div class="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center group-hover:scale-110 transition">
+                            <svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <div class="font-semibold mb-1">Support Server</div>
+                            <div class="text-accent text-sm">Join Testers Server</div>
+                        </div>
+                    </a>
+                </div>
+            </div>
         </div>
     </main>
 
     <!-- Success Modal -->
-    <div id="success-modal" class="hidden fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-        <div class="bg-background border border-white/20 rounded-xl p-8 max-w-md w-full">
+    <div id="success-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/80 backdrop-blur-sm" onclick="closeSuccessModal()"></div>
+        <div class="relative glass rounded-3xl p-10 max-w-md w-full border border-white/10 animate-slide-up">
             <div class="text-center">
-                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-500/20 mb-4">
-                    <svg class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-2xl bg-green-500/20 border border-green-500/30 mb-6">
+                    <svg class="h-10 w-10 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                     </svg>
                 </div>
-                <h3 class="text-2xl font-bold mb-2">Request Submitted</h3>
-                <p class="text-gray-400 mb-6">
+                <h3 class="text-2xl font-bold mb-3">Request Submitted</h3>
+                <p class="text-gray-400 mb-8">
                     Your account deletion request has been submitted successfully. We will process your request and send you a confirmation email within 24-48 hours.
                 </p>
-                <button 
+                <button
                     onclick="closeSuccessModal()"
-                    class="bg-accent text-primary px-6 py-2 rounded-lg font-semibold hover:bg-accent/90 transition"
+                    class="w-full bg-gradient-to-r from-accent to-accent-2 text-primary px-6 py-4 rounded-xl font-bold hover:shadow-lg hover:shadow-accent/25 transition transform hover:scale-[1.02]"
                 >
-                    Close
+                    Got it, thanks
                 </button>
             </div>
         </div>
     </div>
 
     <!-- Footer -->
-    <footer class="bg-primary/50 border-t border-white/10 mt-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-            <div class="grid md:grid-cols-3 gap-8">
-                <div>
-                    <div class="flex items-center space-x-3 mb-4">
-                        <img src="assets/logo.png" alt="ZekoChat Logo" class="h-8 w-8 rounded-lg">
-                        <span class="text-lg font-bold">ZekoChat</span>
+    <footer class="relative border-t border-white/5 bg-surface/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+            <div class="grid md:grid-cols-4 gap-12">
+                <!-- Brand -->
+                <div class="md:col-span-2">
+                    <div class="flex items-center space-x-3 mb-6">
+                        <div class="relative">
+                            <div class="absolute -inset-1 bg-gradient-to-r from-accent to-accent-3 rounded-xl blur opacity-30"></div>
+                            <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-10 w-10 rounded-xl">
+                        </div>
+                        <span class="text-xl font-bold">ZekoChat</span>
                     </div>
-                    <p class="text-gray-400 text-sm">
-                        Your place to vibe with friends. Join endless chats and connections.
+                    <p class="text-gray-400 leading-relaxed max-w-sm mb-6">
+                        Your place to vibe with friends. Join endless chats and connections on the modern messaging platform.
                     </p>
+                    <!-- Social Links -->
+                    <div class="flex gap-4">
+                        <a href="https://github.com/peptidechat/peptide" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition" target="_blank">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                        </a>
+                        <a href="https://app.peptide.chat/invite/Testers" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition" target="_blank">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                            </svg>
+                        </a>
+                    </div>
                 </div>
+
+                <!-- Legal -->
                 <div>
-                    <h4 class="font-semibold mb-4">Legal</h4>
-                    <ul class="space-y-2 text-sm text-gray-400">
-                        <li><a href="privacy.html" class="hover:text-accent transition">Privacy Policy</a></li>
-                        <li><a href="delete-account.html" class="hover:text-accent transition">Delete Account</a></li>
+                    <h4 class="font-semibold mb-5 text-sm uppercase tracking-wider text-gray-400">Legal</h4>
+                    <ul class="space-y-3">
+                        <li><a href="privacy.html" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
+                        <li><a href="delete-account.html" class="text-gray-400 hover:text-white transition">Delete Account</a></li>
                     </ul>
                 </div>
+
+                <!-- Support -->
                 <div>
-                    <h4 class="font-semibold mb-4">Support</h4>
-                    <ul class="space-y-2 text-sm text-gray-400">
-                        <li><a href="https://app.peptide.chat/invite/Testers" class="hover:text-accent transition">Join Testers Server</a></li>
-                        <li><a href="https://github.com/peptidechat/peptide" class="hover:text-accent transition">GitHub</a></li>
+                    <h4 class="font-semibold mb-5 text-sm uppercase tracking-wider text-gray-400">Support</h4>
+                    <ul class="space-y-3">
+                        <li><a href="https://app.peptide.chat/invite/Testers" class="text-gray-400 hover:text-white transition" target="_blank">Join Community</a></li>
+                        <li><a href="mailto:contact@zeko.chat" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
                     </ul>
                 </div>
             </div>
-            <div class="mt-8 pt-8 border-t border-white/10 text-center text-sm text-gray-400">
-                <p>&copy; 2024 ZekoChat. All rights reserved.</p>
+
+            <!-- Bottom Bar -->
+            <div class="mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
+                <p class="text-sm text-gray-500">&copy; 2025 ZekoChat. All rights reserved.</p>
+                <div class="flex items-center gap-2 text-sm text-gray-500">
+                    <span>Made with</span>
+                    <span class="text-red-500">❤️</span>
+                    <span>for chatters everywhere</span>
+                </div>
             </div>
         </div>
     </footer>
@@ -264,7 +511,7 @@
         // Form submission
         document.getElementById('deletion-form').addEventListener('submit', function(e) {
             e.preventDefault();
-            
+
             // Get form data
             const formData = new FormData(this);
             const data = {
@@ -276,27 +523,27 @@
             };
 
             // In a real implementation, you would send this data to your backend
-            // For now, we'll just show a success message
             console.log('Deletion request submitted:', data);
-            
+
             // Show success modal
             document.getElementById('success-modal').classList.remove('hidden');
-            
+            document.body.style.overflow = 'hidden';
+
             // Reset form
             this.reset();
         });
 
         function closeSuccessModal() {
             document.getElementById('success-modal').classList.add('hidden');
+            document.body.style.overflow = 'auto';
         }
 
-        // Close modal on outside click
-        document.getElementById('success-modal').addEventListener('click', function(e) {
-            if (e.target === this) {
+        // Close modal on escape key
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
                 closeSuccessModal();
             }
         });
     </script>
 </body>
 </html>
-
diff --git a/website/index.html b/website/index.html
index bfd3490e..8ed90738 100644
--- a/website/index.html
+++ b/website/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ZekoChat - Your Place to Vibe with Friends</title>
     <meta name="description" content="ZekoChat is a modern chat platform where you can message friends, create groups, and build communities. Join endless chats and connections!">
+    <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@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
@@ -12,131 +15,412 @@
                 extend: {
                     colors: {
                         'primary': '#100518',
-                        'background': '#131722',
+                        'background': '#0a0a0f',
+                        'surface': '#131722',
                         'accent': '#FEDD17',
-                    }
+                        'accent-2': '#FF6B35',
+                        'accent-3': '#8B5CF6',
+                        'glow': 'rgba(254, 221, 23, 0.15)',
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'float-delayed': 'float 6s ease-in-out 2s infinite',
+                        'glow': 'glow 2s ease-in-out infinite alternate',
+                        'gradient': 'gradient 8s ease infinite',
+                        'slide-up': 'slideUp 0.6s ease-out',
+                        'fade-in': 'fadeIn 0.8s ease-out',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'spin-slow': 'spin 20s linear infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0px)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        glow: {
+                            'from': { boxShadow: '0 0 20px rgba(254, 221, 23, 0.3)' },
+                            'to': { boxShadow: '0 0 40px rgba(254, 221, 23, 0.6)' },
+                        },
+                        gradient: {
+                            '0%, 100%': { backgroundPosition: '0% 50%' },
+                            '50%': { backgroundPosition: '100% 50%' },
+                        },
+                        slideUp: {
+                            'from': { opacity: '0', transform: 'translateY(30px)' },
+                            'to': { opacity: '1', transform: 'translateY(0)' },
+                        },
+                        fadeIn: {
+                            'from': { opacity: '0' },
+                            'to': { opacity: '1' },
+                        },
+                    },
+                    backgroundImage: {
+                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+                        'hero-gradient': 'linear-gradient(135deg, #100518 0%, #1a0a2e 50%, #0a0a0f 100%)',
+                    },
                 }
             }
         }
     </script>
     <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        .gradient-text {
+            background: linear-gradient(135deg, #FEDD17 0%, #FF6B35 50%, #8B5CF6 100%);
+            background-size: 200% 200%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: gradient 5s ease infinite;
+        }
+        .glass {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+        }
+        .glass-strong {
+            background: rgba(16, 5, 24, 0.8);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+        }
+        .card-hover {
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .card-hover:hover {
+            transform: translateY(-8px) scale(1.02);
+        }
+        .icon-gradient {
+            background: linear-gradient(135deg, rgba(254, 221, 23, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
+        }
+        .btn-glow {
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-glow::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            transition: left 0.5s;
+        }
+        .btn-glow:hover::before {
+            left: 100%;
+        }
+        .noise {
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+            opacity: 0.02;
+        }
+        .blob {
+            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+        }
+        .scroll-indicator {
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
+            40% { transform: translateY(-10px) translateX(-50%); }
+            60% { transform: translateY(-5px) translateX(-50%); }
         }
     </style>
 </head>
-<body class="bg-background text-white min-h-screen">
+<body class="bg-background text-white min-h-screen font-sans antialiased overflow-x-hidden">
+    <!-- Noise Overlay -->
+    <div class="noise fixed inset-0 pointer-events-none z-50"></div>
+
     <!-- Navigation -->
-    <nav class="bg-primary/90 backdrop-blur-sm sticky top-0 z-50 border-b border-white/10">
+    <nav class="glass-strong fixed w-full top-0 z-40 border-b border-white/5">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center space-x-3">
-                    <img src="assets/logo.png" alt="ZekoChat Logo" class="h-10 w-10 rounded-lg">
-                    <span class="text-xl font-bold">ZekoChat</span>
+            <div class="flex justify-between items-center h-20">
+                <a href="index.html" class="flex items-center space-x-3 group">
+                    <div class="relative">
+                        <div class="absolute -inset-1 bg-gradient-to-r from-accent via-accent-2 to-accent-3 rounded-xl blur opacity-30 group-hover:opacity-60 transition duration-500"></div>
+                        <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-11 w-11 rounded-xl">
+                    </div>
+                    <span class="text-xl font-bold tracking-tight">ZekoChat</span>
+                </a>
+                <div class="hidden md:flex items-center space-x-2">
+                    <a href="index.html" class="px-4 py-2 rounded-full bg-white/10 text-accent font-medium text-sm transition hover:bg-white/15">Home</a>
+                    <a href="privacy.html" class="px-4 py-2 rounded-full text-gray-300 font-medium text-sm transition hover:bg-white/10 hover:text-white">Privacy</a>
+                    <a href="delete-account.html" class="px-4 py-2 rounded-full text-gray-300 font-medium text-sm transition hover:bg-white/10 hover:text-white">Account</a>
+                    <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="ml-4 px-5 py-2.5 rounded-full bg-gradient-to-r from-accent to-accent-2 text-primary font-semibold text-sm transition transform hover:scale-105 hover:shadow-lg hover:shadow-accent/25">
+                        Download
+                    </a>
                 </div>
-                <div class="hidden md:flex space-x-6">
-                    <a href="index.html" class="text-accent hover:text-accent/80 transition">Home</a>
-                    <a href="privacy.html" class="hover:text-accent transition">Privacy Policy</a>
-                    <a href="delete-account.html" class="hover:text-accent transition">Delete Account</a>
-                </div>
-                <button id="mobile-menu-button" class="md:hidden text-white">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="mobile-menu-button" class="md:hidden relative w-10 h-10 flex items-center justify-center rounded-xl bg-white/10 hover:bg-white/15 transition">
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
             </div>
             <!-- Mobile Menu -->
-            <div id="mobile-menu" class="hidden md:hidden pb-4">
-                <a href="index.html" class="block py-2 text-accent">Home</a>
-                <a href="privacy.html" class="block py-2 hover:text-accent transition">Privacy Policy</a>
-                <a href="delete-account.html" class="block py-2 hover:text-accent transition">Delete Account</a>
+            <div id="mobile-menu" class="hidden md:hidden pb-6 animate-slide-up">
+                <div class="flex flex-col space-y-2 pt-4 border-t border-white/10">
+                    <a href="index.html" class="px-4 py-3 rounded-xl bg-white/10 text-accent font-medium">Home</a>
+                    <a href="privacy.html" class="px-4 py-3 rounded-xl text-gray-300 hover:bg-white/10 transition">Privacy Policy</a>
+                    <a href="delete-account.html" class="px-4 py-3 rounded-xl text-gray-300 hover:bg-white/10 transition">Delete Account</a>
+                    <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="mt-2 px-4 py-3 rounded-xl bg-gradient-to-r from-accent to-accent-2 text-primary font-semibold text-center">
+                        Download App
+                    </a>
+                </div>
             </div>
         </div>
     </nav>
 
     <!-- Hero Section -->
-    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <div class="text-center">
-            <div class="flex justify-center mb-8">
-                <img src="assets/logo.png" alt="ZekoChat Logo" class="h-32 w-32 rounded-2xl shadow-2xl">
-            </div>
-            <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-accent to-white bg-clip-text text-transparent">
-                Welcome to ZekoChat
-            </h1>
-            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-2xl mx-auto">
-                Join endless chats and connections; ZekoChat is your place to vibe with friends!
-            </p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="bg-accent text-primary px-8 py-3 rounded-lg font-semibold hover:bg-accent/90 transition transform hover:scale-105">
-                    Download on Google Play
-                </a>
-                <a href="privacy.html" class="border-2 border-white/20 px-8 py-3 rounded-lg font-semibold hover:border-accent hover:text-accent transition">
-                    Privacy Policy
-                </a>
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
+        <!-- Background Elements -->
+        <div class="absolute inset-0 bg-hero-gradient"></div>
+
+        <!-- Animated Blobs -->
+        <div class="absolute top-1/4 -left-32 w-96 h-96 bg-accent/10 blob blur-3xl animate-float opacity-60"></div>
+        <div class="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-3/10 blob blur-3xl animate-float-delayed opacity-60"></div>
+        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent-2/5 rounded-full blur-3xl animate-pulse-slow"></div>
+
+        <!-- Grid Pattern -->
+        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:72px_72px] [mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_70%)]"></div>
+
+        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+            <div class="text-center animate-fade-in">
+                <!-- Badge -->
+                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass border border-white/10 mb-8">
+                    <span class="relative flex h-2 w-2">
+                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                        <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                    </span>
+                    <span class="text-sm text-gray-300">Now available on Google Play</span>
+                </div>
+
+                <!-- Logo -->
+                <div class="flex justify-center mb-10">
+                    <div class="relative group">
+                        <div class="absolute -inset-4 bg-gradient-to-r from-accent via-accent-2 to-accent-3 rounded-3xl blur-2xl opacity-40 group-hover:opacity-60 transition duration-700 animate-glow"></div>
+                        <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-32 w-32 md:h-40 md:w-40 rounded-3xl shadow-2xl animate-float">
+                    </div>
+                </div>
+
+                <!-- Heading -->
+                <h1 class="text-5xl md:text-7xl lg:text-8xl font-black mb-6 tracking-tight">
+                    Welcome to<br>
+                    <span class="gradient-text">ZekoChat</span>
+                </h1>
+
+                <!-- Subheading -->
+                <p class="text-xl md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
+                    Join endless chats and connections — your place to
+                    <span class="text-white font-medium">vibe</span> with friends.
+                </p>
+
+                <!-- CTA Buttons -->
+                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
+                    <a href="https://play.google.com/store/apps/details?id=com.zekochat" class="btn-glow group relative inline-flex items-center gap-3 bg-gradient-to-r from-accent to-accent-2 text-primary px-8 py-4 rounded-2xl font-bold text-lg transition transform hover:scale-105 hover:shadow-2xl hover:shadow-accent/30">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.206 12l2.492-2.491zM5.864 2.658L16.8 8.99l-2.302 2.302-8.634-8.634z"/>
+                        </svg>
+                        Download on Google Play
+                    </a>
+                    <a href="#features" class="group inline-flex items-center gap-2 px-8 py-4 rounded-2xl border-2 border-white/20 font-semibold text-lg transition hover:border-white/40 hover:bg-white/5">
+                        Explore Features
+                        <svg class="w-5 h-5 transition group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                        </svg>
+                    </a>
+                </div>
+
+                <!-- Stats -->
+                <div class="flex flex-wrap justify-center gap-8 md:gap-16">
+                    <div class="text-center">
+                        <div class="text-3xl md:text-4xl font-bold gradient-text">10K+</div>
+                        <div class="text-sm text-gray-500 mt-1">Active Users</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl md:text-4xl font-bold gradient-text">500+</div>
+                        <div class="text-sm text-gray-500 mt-1">Communities</div>
+                    </div>
+                    <div class="text-center">
+                        <div class="text-3xl md:text-4xl font-bold gradient-text">1M+</div>
+                        <div class="text-sm text-gray-500 mt-1">Messages Sent</div>
+                    </div>
+                </div>
             </div>
         </div>
+
+        <!-- Scroll Indicator -->
+        <div class="scroll-indicator absolute bottom-8 left-1/2 text-gray-500">
+            <svg class="w-6 h-6 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+            </svg>
+        </div>
     </section>
 
     <!-- Features Section -->
-    <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-        <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Features</h2>
-        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-accent/50 transition">
-                <div class="text-4xl mb-4">💬</div>
-                <h3 class="text-xl font-semibold mb-2">Message Friends</h3>
-                <p class="text-gray-400">Connect with friends through direct messages and stay in touch wherever you are.</p>
+    <section id="features" class="relative py-32 overflow-hidden">
+        <!-- Background -->
+        <div class="absolute inset-0 bg-gradient-to-b from-background via-surface/50 to-background"></div>
+
+        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <!-- Section Header -->
+            <div class="text-center mb-20">
+                <span class="inline-block px-4 py-1.5 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">Features</span>
+                <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+                    Everything you need to<br>
+                    <span class="gradient-text">stay connected</span>
+                </h2>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto">
+                    Powerful features designed for modern communication
+                </p>
             </div>
-            <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-accent/50 transition">
-                <div class="text-4xl mb-4">👥</div>
-                <h3 class="text-xl font-semibold mb-2">Group Conversations</h3>
-                <p class="text-gray-400">Create group chats and bring your crew together for seamless communication.</p>
-            </div>
-            <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-accent/50 transition">
-                <div class="text-4xl mb-4">🌐</div>
-                <h3 class="text-xl font-semibold mb-2">Communities & Servers</h3>
-                <p class="text-gray-400">Join or create servers to build communities around shared interests.</p>
-            </div>
-            <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-accent/50 transition">
-                <div class="text-4xl mb-4">🔒</div>
-                <h3 class="text-xl font-semibold mb-2">Secure & Private</h3>
-                <p class="text-gray-400">Your privacy matters. We keep your conversations secure and your data protected.</p>
-            </div>
-            <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-accent/50 transition">
-                <div class="text-4xl mb-4">🎨</div>
-                <h3 class="text-xl font-semibold mb-2">Customizable</h3>
-                <p class="text-gray-400">Personalize your experience with themes, custom backgrounds, and more.</p>
-            </div>
-            <div class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-accent/50 transition">
-                <div class="text-4xl mb-4">📱</div>
-                <h3 class="text-xl font-semibold mb-2">Modern Design</h3>
-                <p class="text-gray-400">Beautiful, intuitive interface built with modern Android design principles.</p>
+
+            <!-- Feature Grid -->
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
+                <!-- Feature 1 -->
+                <div class="card-hover glass rounded-3xl p-8 border border-white/10 group">
+                    <div class="icon-gradient w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition duration-300">
+                        <span class="text-3xl">💬</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Message Friends</h3>
+                    <p class="text-gray-400 leading-relaxed">Connect with friends through direct messages and stay in touch wherever you are.</p>
+                </div>
+
+                <!-- Feature 2 -->
+                <div class="card-hover glass rounded-3xl p-8 border border-white/10 group">
+                    <div class="icon-gradient w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition duration-300">
+                        <span class="text-3xl">👥</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Group Conversations</h3>
+                    <p class="text-gray-400 leading-relaxed">Create group chats and bring your crew together for seamless communication.</p>
+                </div>
+
+                <!-- Feature 3 -->
+                <div class="card-hover glass rounded-3xl p-8 border border-white/10 group">
+                    <div class="icon-gradient w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition duration-300">
+                        <span class="text-3xl">🌐</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Communities & Servers</h3>
+                    <p class="text-gray-400 leading-relaxed">Join or create servers to build communities around shared interests.</p>
+                </div>
+
+                <!-- Feature 4 -->
+                <div class="card-hover glass rounded-3xl p-8 border border-white/10 group">
+                    <div class="icon-gradient w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition duration-300">
+                        <span class="text-3xl">🔒</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Secure & Private</h3>
+                    <p class="text-gray-400 leading-relaxed">Your privacy matters. We keep your conversations secure and your data protected.</p>
+                </div>
+
+                <!-- Feature 5 -->
+                <div class="card-hover glass rounded-3xl p-8 border border-white/10 group">
+                    <div class="icon-gradient w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition duration-300">
+                        <span class="text-3xl">🎨</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Customizable</h3>
+                    <p class="text-gray-400 leading-relaxed">Personalize your experience with themes, custom backgrounds, and more.</p>
+                </div>
+
+                <!-- Feature 6 -->
+                <div class="card-hover glass rounded-3xl p-8 border border-white/10 group">
+                    <div class="icon-gradient w-16 h-16 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition duration-300">
+                        <span class="text-3xl">⚡</span>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
+                    <p class="text-gray-400 leading-relaxed">Built with modern technology for instant message delivery and smooth performance.</p>
+                </div>
             </div>
         </div>
     </section>
 
+    <!-- CTA Section -->
+    <section class="relative py-32 overflow-hidden">
+        <!-- Background -->
+        <div class="absolute inset-0 bg-gradient-to-r from-accent/10 via-accent-2/5 to-accent-3/10"></div>
+        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.01)_1px,transparent_1px)] bg-[size:48px_48px]"></div>
+
+        <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass border border-white/10 mb-8">
+                <span class="text-accent">🚀</span>
+                <span class="text-sm text-gray-300">Start chatting today</span>
+            </div>
+
+            <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+                Ready to join the<br>
+                <span class="gradient-text">conversation?</span>
+            </h2>
+
+            <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto">
+                Download ZekoChat now and connect with friends, join communities, and experience modern messaging.
+            </p>
+
+            <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="btn-glow inline-flex items-center gap-3 bg-gradient-to-r from-accent to-accent-2 text-primary px-10 py-5 rounded-2xl font-bold text-lg transition transform hover:scale-105 hover:shadow-2xl hover:shadow-accent/30">
+                <svg class="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 0 1-.61-.92V2.734a1 1 0 0 1 .609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.206 12l2.492-2.491zM5.864 2.658L16.8 8.99l-2.302 2.302-8.634-8.634z"/>
+                </svg>
+                Get it on Google Play
+            </a>
+        </div>
+    </section>
+
     <!-- Footer -->
-    <footer class="bg-primary/50 border-t border-white/10 mt-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-            <div class="grid md:grid-cols-3 gap-8">
-                <div>
-                    <div class="flex items-center space-x-3 mb-4">
-                        <img src="assets/logo.png" alt="ZekoChat Logo" class="h-8 w-8 rounded-lg">
-                        <span class="text-lg font-bold">ZekoChat</span>
+    <footer class="relative border-t border-white/5 bg-surface/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+            <div class="grid md:grid-cols-4 gap-12">
+                <!-- Brand -->
+                <div class="md:col-span-2">
+                    <div class="flex items-center space-x-3 mb-6">
+                        <div class="relative">
+                            <div class="absolute -inset-1 bg-gradient-to-r from-accent to-accent-3 rounded-xl blur opacity-30"></div>
+                            <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-10 w-10 rounded-xl">
+                        </div>
+                        <span class="text-xl font-bold">ZekoChat</span>
                     </div>
-                    <p class="text-gray-400 text-sm">
-                        Your place to vibe with friends. Join endless chats and connections.
+                    <p class="text-gray-400 leading-relaxed max-w-sm mb-6">
+                        Your place to vibe with friends. Join endless chats and connections on the modern messaging platform.
                     </p>
+                    <!-- Social Links -->
+                    <div class="flex gap-4">
+                        <a href="https://github.com/peptidechat/peptide" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition" target="_blank">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                        </a>
+                        <a href="https://app.peptide.chat/invite/Testers" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition" target="_blank">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                            </svg>
+                        </a>
+                    </div>
                 </div>
+
+                <!-- Legal -->
                 <div>
-                    <h4 class="font-semibold mb-4">Legal</h4>
-                    <ul class="space-y-2 text-sm text-gray-400">
-                        <li><a href="privacy.html" class="hover:text-accent transition">Privacy Policy</a></li>
-                        <li><a href="delete-account.html" class="hover:text-accent transition">Delete Account</a></li>
+                    <h4 class="font-semibold mb-5 text-sm uppercase tracking-wider text-gray-400">Legal</h4>
+                    <ul class="space-y-3">
+                        <li><a href="privacy.html" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
+                        <li><a href="delete-account.html" class="text-gray-400 hover:text-white transition">Delete Account</a></li>
+                    </ul>
+                </div>
+
+                <!-- Support -->
+                <div>
+                    <h4 class="font-semibold mb-5 text-sm uppercase tracking-wider text-gray-400">Support</h4>
+                    <ul class="space-y-3">
+                        <li><a href="https://app.peptide.chat/invite/Testers" class="text-gray-400 hover:text-white transition" target="_blank">Join Community</a></li>
+                        <li><a href="mailto:contact@zeko.chat" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
                     </ul>
                 </div>
             </div>
-            <div class="mt-8 pt-8 border-t border-white/10 text-center text-sm text-gray-400">
-                <p>&copy; 2024 ZekoChat. All rights reserved.</p>
+
+            <!-- Bottom Bar -->
+            <div class="mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
+                <p class="text-sm text-gray-500">&copy; 2025 ZekoChat. All rights reserved.</p>
+                <div class="flex items-center gap-2 text-sm text-gray-500">
+                    <span>Made with</span>
+                    <span class="text-red-500">❤️</span>
+                    <span>for chatters everywhere</span>
+                </div>
             </div>
         </div>
     </footer>
@@ -147,7 +431,39 @@
             const menu = document.getElementById('mobile-menu');
             menu.classList.toggle('hidden');
         });
+
+        // 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'
+                    });
+                }
+            });
+        });
+
+        // Intersection Observer for fade-in animations
+        const observerOptions = {
+            root: null,
+            rootMargin: '0px',
+            threshold: 0.1
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate-fade-in');
+                }
+            });
+        }, observerOptions);
+
+        document.querySelectorAll('.card-hover').forEach(el => {
+            observer.observe(el);
+        });
     </script>
 </body>
 </html>
-
diff --git a/website/privacy.html b/website/privacy.html
index 12eaeece..1528033a 100644
--- a/website/privacy.html
+++ b/website/privacy.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Privacy Policy - ZekoChat</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@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
         tailwind.config = {
@@ -11,210 +14,633 @@
                 extend: {
                     colors: {
                         'primary': '#100518',
-                        'background': '#131722',
+                        'background': '#0a0a0f',
+                        'surface': '#131722',
                         'accent': '#FEDD17',
-                    }
+                        'accent-2': '#FF6B35',
+                        'accent-3': '#8B5CF6',
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'slide-up': 'slideUp 0.6s ease-out',
+                        'fade-in': 'fadeIn 0.8s ease-out',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0px)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        slideUp: {
+                            'from': { opacity: '0', transform: 'translateY(30px)' },
+                            'to': { opacity: '1', transform: 'translateY(0)' },
+                        },
+                        fadeIn: {
+                            'from': { opacity: '0' },
+                            'to': { opacity: '1' },
+                        },
+                    },
+                    backgroundImage: {
+                        'hero-gradient': 'linear-gradient(135deg, #100518 0%, #1a0a2e 50%, #0a0a0f 100%)',
+                    },
                 }
             }
         }
     </script>
     <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        .gradient-text {
+            background: linear-gradient(135deg, #FEDD17 0%, #FF6B35 50%, #8B5CF6 100%);
+            background-size: 200% 200%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .glass {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+        }
+        .glass-strong {
+            background: rgba(16, 5, 24, 0.8);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+        }
+        .noise {
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+            opacity: 0.02;
+        }
+        .section-card {
+            transition: all 0.3s ease;
+        }
+        .section-card:hover {
+            border-color: rgba(254, 221, 23, 0.3);
+        }
+        .toc-link {
+            transition: all 0.2s ease;
+        }
+        .toc-link:hover {
+            padding-left: 1rem;
+            color: #FEDD17;
         }
     </style>
 </head>
-<body class="bg-background text-white min-h-screen">
+<body class="bg-background text-white min-h-screen font-sans antialiased overflow-x-hidden">
+    <!-- Noise Overlay -->
+    <div class="noise fixed inset-0 pointer-events-none z-50"></div>
+
     <!-- Navigation -->
-    <nav class="bg-primary/90 backdrop-blur-sm sticky top-0 z-50 border-b border-white/10">
+    <nav class="glass-strong fixed w-full top-0 z-40 border-b border-white/5">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center space-x-3">
-                    <img src="assets/logo.png" alt="ZekoChat Logo" class="h-10 w-10 rounded-lg">
-                    <span class="text-xl font-bold">ZekoChat</span>
+            <div class="flex justify-between items-center h-20">
+                <a href="index.html" class="flex items-center space-x-3 group">
+                    <div class="relative">
+                        <div class="absolute -inset-1 bg-gradient-to-r from-accent via-accent-2 to-accent-3 rounded-xl blur opacity-30 group-hover:opacity-60 transition duration-500"></div>
+                        <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-11 w-11 rounded-xl">
+                    </div>
+                    <span class="text-xl font-bold tracking-tight">ZekoChat</span>
+                </a>
+                <div class="hidden md:flex items-center space-x-2">
+                    <a href="index.html" class="px-4 py-2 rounded-full text-gray-300 font-medium text-sm transition hover:bg-white/10 hover:text-white">Home</a>
+                    <a href="privacy.html" class="px-4 py-2 rounded-full bg-white/10 text-accent font-medium text-sm transition hover:bg-white/15">Privacy</a>
+                    <a href="delete-account.html" class="px-4 py-2 rounded-full text-gray-300 font-medium text-sm transition hover:bg-white/10 hover:text-white">Account</a>
+                    <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="ml-4 px-5 py-2.5 rounded-full bg-gradient-to-r from-accent to-accent-2 text-primary font-semibold text-sm transition transform hover:scale-105 hover:shadow-lg hover:shadow-accent/25">
+                        Download
+                    </a>
                 </div>
-                <div class="hidden md:flex space-x-6">
-                    <a href="index.html" class="hover:text-accent transition">Home</a>
-                    <a href="privacy.html" class="text-accent hover:text-accent/80 transition">Privacy Policy</a>
-                    <a href="delete-account.html" class="hover:text-accent transition">Delete Account</a>
-                </div>
-                <button id="mobile-menu-button" class="md:hidden text-white">
-                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="mobile-menu-button" class="md:hidden relative w-10 h-10 flex items-center justify-center rounded-xl bg-white/10 hover:bg-white/15 transition">
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
             </div>
             <!-- Mobile Menu -->
-            <div id="mobile-menu" class="hidden md:hidden pb-4">
-                <a href="index.html" class="block py-2 hover:text-accent transition">Home</a>
-                <a href="privacy.html" class="block py-2 text-accent">Privacy Policy</a>
-                <a href="delete-account.html" class="block py-2 hover:text-accent transition">Delete Account</a>
+            <div id="mobile-menu" class="hidden md:hidden pb-6 animate-slide-up">
+                <div class="flex flex-col space-y-2 pt-4 border-t border-white/10">
+                    <a href="index.html" class="px-4 py-3 rounded-xl text-gray-300 hover:bg-white/10 transition">Home</a>
+                    <a href="privacy.html" class="px-4 py-3 rounded-xl bg-white/10 text-accent font-medium">Privacy Policy</a>
+                    <a href="delete-account.html" class="px-4 py-3 rounded-xl text-gray-300 hover:bg-white/10 transition">Delete Account</a>
+                    <a href="https://play.google.com/store/apps/details?id=chat.peptide" class="mt-2 px-4 py-3 rounded-xl bg-gradient-to-r from-accent to-accent-2 text-primary font-semibold text-center">
+                        Download App
+                    </a>
+                </div>
             </div>
         </div>
     </nav>
 
-    <!-- Privacy Policy Content -->
-    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <h1 class="text-4xl md:text-5xl font-bold mb-8">Privacy Policy</h1>
-        <p class="text-gray-400 mb-8">Last updated: <span id="last-updated"></span></p>
+    <!-- Header Section -->
+    <section class="relative pt-32 pb-20 overflow-hidden">
+        <!-- Background -->
+        <div class="absolute inset-0 bg-hero-gradient"></div>
+        <div class="absolute top-1/4 -left-32 w-96 h-96 bg-accent/5 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 -right-32 w-96 h-96 bg-accent-3/5 rounded-full blur-3xl"></div>
 
-        <div class="prose prose-invert max-w-none space-y-8">
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">1. Introduction</h2>
-                <p class="text-gray-300 leading-relaxed">
-                    Welcome to ZekoChat ("we," "our," or "us"). We are committed to protecting your privacy and ensuring you have a positive experience while using our mobile application and services. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our chat application.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">2. Information We Collect</h2>
-                <h3 class="text-xl font-semibold mb-3 mt-6">2.1 Information You Provide</h3>
-                <ul class="list-disc pl-6 text-gray-300 space-y-2">
-                    <li><strong>Account Information:</strong> Email address, username, password, and profile information (display name, profile picture, bio)</li>
-                    <li><strong>Content:</strong> Messages, media files, and other content you create or share through the app</li>
-                    <li><strong>Contact Information:</strong> Information you provide when contacting support or submitting feedback</li>
-                </ul>
-
-                <h3 class="text-xl font-semibold mb-3 mt-6">2.2 Automatically Collected Information</h3>
-                <ul class="list-disc pl-6 text-gray-300 space-y-2">
-                    <li><strong>Device Information:</strong> Device type, operating system, unique device identifiers, and mobile network information</li>
-                    <li><strong>Usage Data:</strong> How you interact with the app, features used, time spent, and frequency of use</li>
-                    <li><strong>Log Data:</strong> IP address, browser type, access times, and pages viewed</li>
-                    <li><strong>Location Data:</strong> With your permission, we may collect location information</li>
-                </ul>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">3. How We Use Your Information</h2>
-                <p class="text-gray-300 leading-relaxed mb-4">We use the information we collect to:</p>
-                <ul class="list-disc pl-6 text-gray-300 space-y-2">
-                    <li>Provide, maintain, and improve our services</li>
-                    <li>Process transactions and send related information</li>
-                    <li>Send technical notices, updates, security alerts, and support messages</li>
-                    <li>Respond to your comments, questions, and requests</li>
-                    <li>Monitor and analyze trends, usage, and activities</li>
-                    <li>Detect, prevent, and address technical issues and fraudulent activities</li>
-                    <li>Personalize your experience and deliver content relevant to your interests</li>
-                    <li>Comply with legal obligations and enforce our terms of service</li>
-                </ul>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">4. Information Sharing and Disclosure</h2>
-                <p class="text-gray-300 leading-relaxed mb-4">We do not sell your personal information. We may share your information only in the following circumstances:</p>
-                <ul class="list-disc pl-6 text-gray-300 space-y-2">
-                    <li><strong>With Your Consent:</strong> When you explicitly authorize us to share your information</li>
-                    <li><strong>Service Providers:</strong> With third-party service providers who perform services on our behalf (e.g., cloud storage, analytics)</li>
-                    <li><strong>Legal Requirements:</strong> When required by law, court order, or government regulation</li>
-                    <li><strong>Safety and Security:</strong> To protect the rights, property, or safety of ZekoChat, our users, or others</li>
-                    <li><strong>Business Transfers:</strong> In connection with any merger, sale, or acquisition of assets</li>
-                </ul>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">5. Data Security</h2>
-                <p class="text-gray-300 leading-relaxed">
-                    We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure, and we cannot guarantee absolute security.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">6. Data Retention</h2>
-                <p class="text-gray-300 leading-relaxed">
-                    We retain your personal information for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law. When you delete your account, we will delete or anonymize your personal information, except where we are required to retain it for legal purposes.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">7. Your Rights and Choices</h2>
-                <p class="text-gray-300 leading-relaxed mb-4">Depending on your location, you may have the following rights:</p>
-                <ul class="list-disc pl-6 text-gray-300 space-y-2">
-                    <li><strong>Access:</strong> Request access to your personal information</li>
-                    <li><strong>Correction:</strong> Request correction of inaccurate or incomplete information</li>
-                    <li><strong>Deletion:</strong> Request deletion of your personal information (see our <a href="delete-account.html" class="text-accent hover:underline">Account Deletion page</a>)</li>
-                    <li><strong>Portability:</strong> Request transfer of your data to another service</li>
-                    <li><strong>Objection:</strong> Object to processing of your personal information</li>
-                    <li><strong>Restriction:</strong> Request restriction of processing your personal information</li>
-                </ul>
-                <p class="text-gray-300 leading-relaxed mt-4">
-                    To exercise these rights, please contact us using the information provided in the "Contact Us" section below.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">8. Children's Privacy</h2>
-                <p class="text-gray-300 leading-relaxed">
-                    Our services are not intended for children under the age of 13 (or the minimum age in your jurisdiction). We do not knowingly collect personal information from children. If you believe we have collected information from a child, please contact us immediately, and we will take steps to delete such information.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">9. International Data Transfers</h2>
-                <p class="text-gray-300 leading-relaxed">
-                    Your information may be transferred to and processed in countries other than your country of residence. These countries may have data protection laws that differ from those in your country. We take appropriate measures to ensure your information is protected in accordance with this Privacy Policy.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">10. Changes to This Privacy Policy</h2>
-                <p class="text-gray-300 leading-relaxed">
-                    We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date. You are advised to review this Privacy Policy periodically for any changes.
-                </p>
-            </section>
-
-            <section>
-                <h2 class="text-2xl font-semibold mb-4 text-accent">11. Contact Us</h2>
-                <p class="text-gray-300 leading-relaxed mb-4">
-                    If you have any questions, concerns, or requests regarding this Privacy Policy or our data practices, please contact us:
-                </p>
-                <div class="bg-white/5 rounded-lg p-6 border border-white/10">
-                    <p class="text-gray-300"><strong>Email:</strong> <a href="mailto:contact@zeko.chat" class="text-accent hover:underline">contact@zeko.chat</a></p>
-                    <p class="text-gray-300 mt-2"><strong>Support Server:</strong> <a href="https://app.peptide.chat/invite/Testers" class="text-accent hover:underline" target="_blank">Join Testers Server</a></p>
+        <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center animate-fade-in">
+                <!-- Icon -->
+                <div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-accent/20 to-accent-3/20 border border-white/10 mb-8">
+                    <svg class="w-10 h-10 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                    </svg>
                 </div>
-            </section>
+
+                <h1 class="text-4xl md:text-6xl font-bold mb-6">
+                    Privacy <span class="gradient-text">Policy</span>
+                </h1>
+                <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-4">
+                    Your privacy is important to us. Learn how we collect, use, and protect your information.
+                </p>
+                <p class="text-sm text-gray-500">Last updated: <span id="last-updated"></span></p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Main Content -->
+    <main class="relative pb-32">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid lg:grid-cols-4 gap-12">
+                <!-- Table of Contents (Sidebar) -->
+                <aside class="hidden lg:block">
+                    <div class="sticky top-28">
+                        <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">On this page</h3>
+                        <nav class="space-y-2">
+                            <a href="#introduction" class="toc-link block text-sm text-gray-400 hover:text-accent">1. Introduction</a>
+                            <a href="#information-collected" class="toc-link block text-sm text-gray-400 hover:text-accent">2. Information We Collect</a>
+                            <a href="#how-we-use" class="toc-link block text-sm text-gray-400 hover:text-accent">3. How We Use Your Information</a>
+                            <a href="#sharing" class="toc-link block text-sm text-gray-400 hover:text-accent">4. Information Sharing</a>
+                            <a href="#security" class="toc-link block text-sm text-gray-400 hover:text-accent">5. Data Security</a>
+                            <a href="#retention" class="toc-link block text-sm text-gray-400 hover:text-accent">6. Data Retention</a>
+                            <a href="#rights" class="toc-link block text-sm text-gray-400 hover:text-accent">7. Your Rights</a>
+                            <a href="#children" class="toc-link block text-sm text-gray-400 hover:text-accent">8. Children's Privacy</a>
+                            <a href="#international" class="toc-link block text-sm text-gray-400 hover:text-accent">9. International Transfers</a>
+                            <a href="#changes" class="toc-link block text-sm text-gray-400 hover:text-accent">10. Changes</a>
+                            <a href="#contact" class="toc-link block text-sm text-gray-400 hover:text-accent">11. Contact Us</a>
+                        </nav>
+                    </div>
+                </aside>
+
+                <!-- Policy Content -->
+                <div class="lg:col-span-3 space-y-8">
+                    <!-- Section 1 -->
+                    <section id="introduction" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">1</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">Introduction</h2>
+                                <p class="text-gray-300 leading-relaxed">
+                                    Welcome to ZekoChat ("we," "our," or "us"). We are committed to protecting your privacy and ensuring you have a positive experience while using our mobile application and services. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our chat application.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 2 -->
+                    <section id="information-collected" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">2</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-6">Information We Collect</h2>
+
+                                <div class="space-y-6">
+                                    <div class="bg-white/5 rounded-xl p-6 border border-white/5">
+                                        <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
+                                            <svg class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                            </svg>
+                                            Information You Provide
+                                        </h3>
+                                        <ul class="space-y-3 text-gray-300">
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Account Information:</strong> Email address, username, password, and profile information (display name, profile picture, bio)</div>
+                                            </li>
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Content:</strong> Messages, media files, and other content you create or share through the app</div>
+                                            </li>
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Contact Information:</strong> Information you provide when contacting support or submitting feedback</div>
+                                            </li>
+                                        </ul>
+                                    </div>
+
+                                    <div class="bg-white/5 rounded-xl p-6 border border-white/5">
+                                        <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
+                                            <svg class="w-5 h-5 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                            </svg>
+                                            Automatically Collected Information
+                                        </h3>
+                                        <ul class="space-y-3 text-gray-300">
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Device Information:</strong> Device type, operating system, unique device identifiers, and mobile network information</div>
+                                            </li>
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Usage Data:</strong> How you interact with the app, features used, time spent, and frequency of use</div>
+                                            </li>
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Log Data:</strong> IP address, browser type, access times, and pages viewed</div>
+                                            </li>
+                                            <li class="flex items-start gap-3">
+                                                <span class="text-accent mt-1">•</span>
+                                                <div><strong class="text-white">Location Data:</strong> With your permission, we may collect location information</div>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 3 -->
+                    <section id="how-we-use" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">3</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-6">How We Use Your Information</h2>
+                                <p class="text-gray-300 mb-6">We use the information we collect to:</p>
+                                <div class="grid sm:grid-cols-2 gap-4">
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Provide, maintain, and improve our services</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Process transactions and send related information</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Send technical notices, updates, and security alerts</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Respond to your comments, questions, and requests</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Monitor and analyze trends, usage, and activities</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Detect, prevent, and address technical issues</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Personalize your experience and content</span>
+                                    </div>
+                                    <div class="flex items-start gap-3 bg-white/5 rounded-xl p-4">
+                                        <svg class="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span class="text-gray-300 text-sm">Comply with legal obligations</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 4 -->
+                    <section id="sharing" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">4</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">Information Sharing and Disclosure</h2>
+
+                                <!-- Highlight Box -->
+                                <div class="bg-green-500/10 border border-green-500/30 rounded-xl p-4 mb-6">
+                                    <p class="text-green-400 font-medium flex items-center gap-2">
+                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                                        </svg>
+                                        We do not sell your personal information.
+                                    </p>
+                                </div>
+
+                                <p class="text-gray-300 mb-6">We may share your information only in the following circumstances:</p>
+                                <ul class="space-y-4 text-gray-300">
+                                    <li class="flex items-start gap-3">
+                                        <span class="text-accent mt-1">•</span>
+                                        <div><strong class="text-white">With Your Consent:</strong> When you explicitly authorize us to share your information</div>
+                                    </li>
+                                    <li class="flex items-start gap-3">
+                                        <span class="text-accent mt-1">•</span>
+                                        <div><strong class="text-white">Service Providers:</strong> With third-party service providers who perform services on our behalf (e.g., cloud storage, analytics)</div>
+                                    </li>
+                                    <li class="flex items-start gap-3">
+                                        <span class="text-accent mt-1">•</span>
+                                        <div><strong class="text-white">Legal Requirements:</strong> When required by law, court order, or government regulation</div>
+                                    </li>
+                                    <li class="flex items-start gap-3">
+                                        <span class="text-accent mt-1">•</span>
+                                        <div><strong class="text-white">Safety and Security:</strong> To protect the rights, property, or safety of ZekoChat, our users, or others</div>
+                                    </li>
+                                    <li class="flex items-start gap-3">
+                                        <span class="text-accent mt-1">•</span>
+                                        <div><strong class="text-white">Business Transfers:</strong> In connection with any merger, sale, or acquisition of assets</div>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 5 -->
+                    <section id="security" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">5</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">Data Security</h2>
+                                <p class="text-gray-300 leading-relaxed">
+                                    We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure, and we cannot guarantee absolute security.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 6 -->
+                    <section id="retention" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">6</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">Data Retention</h2>
+                                <p class="text-gray-300 leading-relaxed">
+                                    We retain your personal information for as long as necessary to fulfill the purposes outlined in this Privacy Policy, unless a longer retention period is required or permitted by law. When you delete your account, we will delete or anonymize your personal information, except where we are required to retain it for legal purposes.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 7 -->
+                    <section id="rights" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">7</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-6">Your Rights and Choices</h2>
+                                <p class="text-gray-300 mb-6">Depending on your location, you may have the following rights:</p>
+                                <div class="grid sm:grid-cols-2 gap-4">
+                                    <div class="bg-white/5 rounded-xl p-4 border border-white/5">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <div class="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
+                                                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                                                </svg>
+                                            </div>
+                                            <h4 class="font-semibold">Access</h4>
+                                        </div>
+                                        <p class="text-gray-400 text-sm">Request access to your personal information</p>
+                                    </div>
+                                    <div class="bg-white/5 rounded-xl p-4 border border-white/5">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <div class="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
+                                                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                                                </svg>
+                                            </div>
+                                            <h4 class="font-semibold">Correction</h4>
+                                        </div>
+                                        <p class="text-gray-400 text-sm">Request correction of inaccurate or incomplete information</p>
+                                    </div>
+                                    <div class="bg-white/5 rounded-xl p-4 border border-white/5">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <div class="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
+                                                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                                </svg>
+                                            </div>
+                                            <h4 class="font-semibold">Deletion</h4>
+                                        </div>
+                                        <p class="text-gray-400 text-sm">Request deletion of your personal information</p>
+                                    </div>
+                                    <div class="bg-white/5 rounded-xl p-4 border border-white/5">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <div class="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
+                                                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+                                                </svg>
+                                            </div>
+                                            <h4 class="font-semibold">Portability</h4>
+                                        </div>
+                                        <p class="text-gray-400 text-sm">Request transfer of your data to another service</p>
+                                    </div>
+                                    <div class="bg-white/5 rounded-xl p-4 border border-white/5">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <div class="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
+                                                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+                                                </svg>
+                                            </div>
+                                            <h4 class="font-semibold">Objection</h4>
+                                        </div>
+                                        <p class="text-gray-400 text-sm">Object to processing of your personal information</p>
+                                    </div>
+                                    <div class="bg-white/5 rounded-xl p-4 border border-white/5">
+                                        <div class="flex items-center gap-3 mb-2">
+                                            <div class="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center">
+                                                <svg class="w-4 h-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                                </svg>
+                                            </div>
+                                            <h4 class="font-semibold">Restriction</h4>
+                                        </div>
+                                        <p class="text-gray-400 text-sm">Request restriction of processing your information</p>
+                                    </div>
+                                </div>
+                                <p class="text-gray-300 mt-6">
+                                    To exercise these rights, please contact us using the information provided in the "Contact Us" section below.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 8 -->
+                    <section id="children" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">8</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">Children's Privacy</h2>
+                                <p class="text-gray-300 leading-relaxed">
+                                    Our services are not intended for children under the age of 13 (or the minimum age in your jurisdiction). We do not knowingly collect personal information from children. If you believe we have collected information from a child, please contact us immediately, and we will take steps to delete such information.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 9 -->
+                    <section id="international" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">9</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">International Data Transfers</h2>
+                                <p class="text-gray-300 leading-relaxed">
+                                    Your information may be transferred to and processed in countries other than your country of residence. These countries may have data protection laws that differ from those in your country. We take appropriate measures to ensure your information is protected in accordance with this Privacy Policy.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 10 -->
+                    <section id="changes" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">10</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-4">Changes to This Privacy Policy</h2>
+                                <p class="text-gray-300 leading-relaxed">
+                                    We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date. You are advised to review this Privacy Policy periodically for any changes.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Section 11 -->
+                    <section id="contact" class="section-card glass rounded-2xl p-8 border border-white/10">
+                        <div class="flex items-start gap-4">
+                            <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-accent/20 to-accent-2/20 flex items-center justify-center">
+                                <span class="text-lg font-bold text-accent">11</span>
+                            </div>
+                            <div class="flex-1">
+                                <h2 class="text-2xl font-bold mb-6">Contact Us</h2>
+                                <p class="text-gray-300 mb-6">
+                                    If you have any questions, concerns, or requests regarding this Privacy Policy or our data practices, please contact us:
+                                </p>
+                                <div class="grid sm:grid-cols-2 gap-4">
+                                    <a href="mailto:contact@zeko.chat" class="flex items-center gap-4 bg-white/5 rounded-xl p-5 border border-white/5 hover:border-accent/30 transition group">
+                                        <div class="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center group-hover:scale-110 transition">
+                                            <svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-semibold mb-1">Email</div>
+                                            <div class="text-accent text-sm">contact@zeko.chat</div>
+                                        </div>
+                                    </a>
+                                    <a href="https://app.peptide.chat/invite/Testers" target="_blank" class="flex items-center gap-4 bg-white/5 rounded-xl p-5 border border-white/5 hover:border-accent/30 transition group">
+                                        <div class="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center group-hover:scale-110 transition">
+                                            <svg class="w-6 h-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-semibold mb-1">Support Server</div>
+                                            <div class="text-accent text-sm">Join Testers Server</div>
+                                        </div>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
         </div>
     </main>
 
     <!-- Footer -->
-    <footer class="bg-primary/50 border-t border-white/10 mt-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-            <div class="grid md:grid-cols-3 gap-8">
-                <div>
-                    <div class="flex items-center space-x-3 mb-4">
-                        <img src="assets/logo.png" alt="ZekoChat Logo" class="h-8 w-8 rounded-lg">
-                        <span class="text-lg font-bold">ZekoChat</span>
+    <footer class="relative border-t border-white/5 bg-surface/50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+            <div class="grid md:grid-cols-4 gap-12">
+                <!-- Brand -->
+                <div class="md:col-span-2">
+                    <div class="flex items-center space-x-3 mb-6">
+                        <div class="relative">
+                            <div class="absolute -inset-1 bg-gradient-to-r from-accent to-accent-3 rounded-xl blur opacity-30"></div>
+                            <img src="assets/logo.png" alt="ZekoChat Logo" class="relative h-10 w-10 rounded-xl">
+                        </div>
+                        <span class="text-xl font-bold">ZekoChat</span>
                     </div>
-                    <p class="text-gray-400 text-sm">
-                        Your place to vibe with friends. Join endless chats and connections.
+                    <p class="text-gray-400 leading-relaxed max-w-sm mb-6">
+                        Your place to vibe with friends. Join endless chats and connections on the modern messaging platform.
                     </p>
+                    <!-- Social Links -->
+                    <div class="flex gap-4">
+                        <a href="https://github.com/peptidechat/peptide" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition" target="_blank">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                        </a>
+                        <a href="https://app.peptide.chat/invite/Testers" class="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center hover:bg-white/10 transition" target="_blank">
+                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                            </svg>
+                        </a>
+                    </div>
                 </div>
+
+                <!-- Legal -->
                 <div>
-                    <h4 class="font-semibold mb-4">Legal</h4>
-                    <ul class="space-y-2 text-sm text-gray-400">
-                        <li><a href="privacy.html" class="hover:text-accent transition">Privacy Policy</a></li>
-                        <li><a href="delete-account.html" class="hover:text-accent transition">Delete Account</a></li>
+                    <h4 class="font-semibold mb-5 text-sm uppercase tracking-wider text-gray-400">Legal</h4>
+                    <ul class="space-y-3">
+                        <li><a href="privacy.html" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
+                        <li><a href="delete-account.html" class="text-gray-400 hover:text-white transition">Delete Account</a></li>
                     </ul>
                 </div>
+
+                <!-- Support -->
                 <div>
-                    <h4 class="font-semibold mb-4">Support</h4>
-                    <ul class="space-y-2 text-sm text-gray-400">
-                        <li><a href="https://app.peptide.chat/invite/Testers" class="hover:text-accent transition">Join Testers Server</a></li>
-                        <li><a href="https://github.com/peptidechat/peptide" class="hover:text-accent transition">GitHub</a></li>
+                    <h4 class="font-semibold mb-5 text-sm uppercase tracking-wider text-gray-400">Support</h4>
+                    <ul class="space-y-3">
+                        <li><a href="https://app.peptide.chat/invite/Testers" class="text-gray-400 hover:text-white transition" target="_blank">Join Community</a></li>
+                        <li><a href="mailto:contact@zeko.chat" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
                     </ul>
                 </div>
             </div>
-            <div class="mt-8 pt-8 border-t border-white/10 text-center text-sm text-gray-400">
-                <p>&copy; 2024 ZekoChat. All rights reserved.</p>
+
+            <!-- Bottom Bar -->
+            <div class="mt-16 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
+                <p class="text-sm text-gray-500">&copy; 2025 ZekoChat. All rights reserved.</p>
+                <div class="flex items-center gap-2 text-sm text-gray-500">
+                    <span>Made with</span>
+                    <span class="text-red-500">❤️</span>
+                    <span>for chatters everywhere</span>
+                </div>
             </div>
         </div>
     </footer>
 
     <script>
         // Set last updated date
-        document.getElementById('last-updated').textContent = new Date().toLocaleDateString('en-US', { 
-            year: 'numeric', 
-            month: 'long', 
-            day: 'numeric' 
+        document.getElementById('last-updated').textContent = new Date().toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
         });
 
         // Mobile menu toggle
@@ -222,7 +648,43 @@
             const menu = document.getElementById('mobile-menu');
             menu.classList.toggle('hidden');
         });
+
+        // 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) {
+                    const offset = 100;
+                    const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
+                    window.scrollTo({
+                        top: targetPosition,
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+
+        // Highlight current section in TOC
+        const sections = document.querySelectorAll('section[id]');
+        const tocLinks = document.querySelectorAll('.toc-link');
+
+        window.addEventListener('scroll', () => {
+            let current = '';
+            sections.forEach(section => {
+                const sectionTop = section.offsetTop;
+                if (window.scrollY >= sectionTop - 200) {
+                    current = section.getAttribute('id');
+                }
+            });
+
+            tocLinks.forEach(link => {
+                link.classList.remove('text-accent', 'pl-4');
+                if (link.getAttribute('href') === '#' + current) {
+                    link.classList.add('text-accent', 'pl-4');
+                }
+            });
+        });
     </script>
 </body>
 </html>
-