diff --git a/dist/main.js b/dist/main.js
index 7a09ebc..472ef28 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -1042,4 +1042,3 @@ document.addEventListener('DOMContentLoaded', function () {
     new MemoryMapDarkModeManager();
     memoryMap = new MemoryMap();
 });
-
diff --git a/frontend/public/auth.html b/frontend/public/auth.html
index 6d50eaf..bc391d8 100644
--- a/frontend/public/auth.html
+++ b/frontend/public/auth.html
@@ -7,40 +7,90 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+        
         body {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #0f766e 0%, #10b981 50%, #059669 100%);
             min-height: 100vh;
             font-family: 'Inter', system-ui, sans-serif;
+            position: relative;
+            overflow-x: hidden;
+        }
+        
+        body::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: 
+                radial-gradient(circle at 20% 50%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(5, 150, 105, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 20%, rgba(6, 182, 212, 0.2) 0%, transparent 50%);
+            animation: gradientShift 15s ease infinite;
+        }
+        
+        @keyframes gradientShift {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.8; }
         }
         
         .glass-effect {
-            background: rgba(255, 255, 255, 0.15);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            background: rgba(255, 255, 255, 0.12);
+            backdrop-filter: blur(20px) saturate(180%);
+            border: 1px solid rgba(255, 255, 255, 0.25);
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
         }
         
         .input-field {
-            background: rgba(255, 255, 255, 0.9);
-            backdrop-filter: blur(5px);
-            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 2px solid transparent;
         }
         
         .input-field:focus {
             background: rgba(255, 255, 255, 1);
-            box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 10px 30px rgba(16, 185, 129, 0.15);
             transform: translateY(-2px);
+            border-color: rgba(16, 185, 129, 0.5);
+        }
+        
+        .input-field:hover {
+            border-color: rgba(16, 185, 129, 0.3);
         }
         
         .btn-primary {
-            background: linear-gradient(135deg, #10b981, #059669);
-            transition: all 0.3s ease;
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn-primary::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-primary:hover::before {
+            left: 100%;
         }
         
         .btn-primary:hover {
-            background: linear-gradient(135deg, #059669, #047857);
-            transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
+            background: linear-gradient(135deg, #059669 0%, #047857 100%);
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);
+        }
+        
+        .btn-primary:active {
+            transform: translateY(-1px);
         }
         
         .floating-shapes {
@@ -50,58 +100,111 @@
             width: 100%;
             height: 100%;
             overflow: hidden;
-            z-index: -1;
+            z-index: 0;
+            pointer-events: none;
         }
         
         .shape {
             position: absolute;
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.08);
             border-radius: 50%;
-            animation: float 6s ease-in-out infinite;
+            animation: float 8s ease-in-out infinite;
+            filter: blur(2px);
         }
         
         .shape:nth-child(1) {
-            width: 100px;
-            height: 100px;
+            width: 120px;
+            height: 120px;
             left: 10%;
             top: 20%;
             animation-delay: 0s;
+            animation-duration: 10s;
         }
         
         .shape:nth-child(2) {
-            width: 150px;
-            height: 150px;
+            width: 180px;
+            height: 180px;
             right: 10%;
             top: 60%;
             animation-delay: 2s;
+            animation-duration: 12s;
         }
         
         .shape:nth-child(3) {
-            width: 80px;
-            height: 80px;
+            width: 100px;
+            height: 100px;
             left: 70%;
             top: 10%;
             animation-delay: 4s;
+            animation-duration: 9s;
+        }
+        
+        .shape:nth-child(4) {
+            width: 140px;
+            height: 140px;
+            left: 30%;
+            bottom: 15%;
+            animation-delay: 1s;
+            animation-duration: 11s;
         }
         
         @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(180deg); }
+            0%, 100% { 
+                transform: translateY(0px) translateX(0px) rotate(0deg); 
+                opacity: 0.6;
+            }
+            25% {
+                transform: translateY(-30px) translateX(20px) rotate(90deg);
+                opacity: 0.8;
+            }
+            50% { 
+                transform: translateY(-60px) translateX(-20px) rotate(180deg); 
+                opacity: 0.4;
+            }
+            75% {
+                transform: translateY(-30px) translateX(-40px) rotate(270deg);
+                opacity: 0.7;
+            }
         }
         
         .slide-in {
-            animation: slideInUp 0.6s ease-out;
+            animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
         @keyframes slideInUp {
             from {
                 opacity: 0;
-                transform: translateY(30px);
+                transform: translateY(40px) scale(0.95);
             }
             to {
                 opacity: 1;
-                transform: translateY(0);
+                transform: translateY(0) scale(1);
+            }
+        }
+        
+        .icon-pulse {
+            animation: iconPulse 3s ease-in-out infinite;
+        }
+        
+        @keyframes iconPulse {
+            0%, 100% {
+                transform: scale(1);
+                filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
             }
+            50% {
+                transform: scale(1.05);
+                filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
+            }
+        }
+        
+        .tab-active {
+            background: rgba(255, 255, 255, 0.3) !important;
+            color: white !important;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .tab-inactive {
+            color: rgba(255, 255, 255, 0.7) !important;
         }
     </style>
 </head>
@@ -111,113 +214,123 @@
         <div class="shape"></div>
         <div class="shape"></div>
         <div class="shape"></div>
+        <div class="shape"></div>
     </div>
 
     <!-- Main Container -->
-    <div class="w-full max-w-md p-6 mx-4">
+    <div class="w-full max-w-md p-6 mx-4 relative z-10">
         <!-- Header -->
-        <div class="text-center mb-8 slide-in">
-            <div class="mb-4">
-                <i class="fas fa-map-marked-alt text-6xl text-white drop-shadow-lg"></i>
+        <div class="text-center mb-10 slide-in">
+            <div class="mb-6 icon-pulse">
+                <i class="fas fa-map-marked-alt text-7xl text-white drop-shadow-2xl"></i>
+            </div>
+            <h1 class="text-5xl font-extrabold text-white mb-3 drop-shadow-2xl tracking-tight">Memory Map</h1>
+            <p class="text-white/90 text-lg font-medium drop-shadow-lg">Capture and share your precious moments</p>
+            <div class="mt-4 flex items-center justify-center space-x-2">
+                <div class="w-2 h-2 bg-white/60 rounded-full animate-pulse"></div>
+                <div class="w-2 h-2 bg-white/60 rounded-full animate-pulse" style="animation-delay: 0.2s;"></div>
+                <div class="w-2 h-2 bg-white/60 rounded-full animate-pulse" style="animation-delay: 0.4s;"></div>
             </div>
-            <h1 class="text-4xl font-bold text-white mb-2 drop-shadow-lg">Memory Map</h1>
-            <p class="text-white/80 text-lg">Capture and share your precious moments</p>
         </div>
 
         <!-- Auth Container -->
-        <div class="glass-effect rounded-2xl p-8 slide-in">
+        <div class="glass-effect rounded-3xl p-8 slide-in shadow-2xl" style="animation-delay: 0.2s;">
             <!-- Toggle Buttons -->
-            <div class="flex mb-6">
-                <button id="loginTab" class="flex-1 py-3 px-4 text-center font-semibold text-white bg-white/20 rounded-l-xl transition-all duration-300">
-                    Login
+            <div class="flex mb-8 bg-white/10 rounded-2xl p-1.5">
+                <button id="loginTab" class="flex-1 py-3.5 px-4 text-center font-bold text-white bg-white/30 rounded-xl transition-all duration-300 shadow-lg">
+                    <i class="fas fa-sign-in-alt mr-2"></i>Login
                 </button>
-                <button id="signupTab" class="flex-1 py-3 px-4 text-center font-semibold text-white/70 rounded-r-xl transition-all duration-300">
-                    Sign Up
+                <button id="signupTab" class="flex-1 py-3.5 px-4 text-center font-semibold text-white/70 rounded-xl transition-all duration-300 hover:bg-white/10">
+                    <i class="fas fa-user-plus mr-2"></i>Sign Up
                 </button>
             </div>
 
             <!-- Login Form -->
-            <form id="loginForm" class="space-y-4">
+            <form id="loginForm" class="space-y-5">
                 <div>
-                    <label class="block text-white/90 text-sm font-semibold mb-2">
-                        <i class="fas fa-user mr-2"></i>Username or Email
+                    <label class="block text-white/95 text-sm font-bold mb-3 tracking-wide">
+                        <i class="fas fa-user mr-2 text-emerald-200"></i>Username or Email
                     </label>
-                    <input type="text" id="loginUsername" class="input-field w-full px-4 py-3 rounded-xl border-0 focus:outline-none focus:ring-0" placeholder="Enter your username or email" required>
+                    <input type="text" id="loginUsername" class="input-field w-full px-5 py-4 rounded-xl border-0 focus:outline-none focus:ring-0 font-medium text-slate-700 placeholder:text-slate-400" placeholder="Enter your username or email" required>
                 </div>
                 
                 <div>
-                    <label class="block text-white/90 text-sm font-semibold mb-2">
-                        <i class="fas fa-lock mr-2"></i>Password
+                    <label class="block text-white/95 text-sm font-bold mb-3 tracking-wide">
+                        <i class="fas fa-lock mr-2 text-emerald-200"></i>Password
                     </label>
                     <div class="relative">
-                        <input type="password" id="loginPassword" class="input-field w-full px-4 py-3 pr-12 rounded-xl border-0 focus:outline-none focus:ring-0" placeholder="Enter your password" required>
-                        <button type="button" id="toggleLoginPassword" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                            <i class="fas fa-eye"></i>
+                        <input type="password" id="loginPassword" class="input-field w-full px-5 py-4 pr-14 rounded-xl border-0 focus:outline-none focus:ring-0 font-medium text-slate-700 placeholder:text-slate-400" placeholder="Enter your password" required>
+                        <button type="button" id="toggleLoginPassword" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-slate-500 hover:text-emerald-600 transition-colors duration-300">
+                            <i class="fas fa-eye text-lg"></i>
                         </button>
                     </div>
                 </div>
                 
-                <button type="submit" class="btn-primary w-full py-3 text-white font-semibold rounded-xl">
+                <button type="submit" class="btn-primary w-full py-4 text-white font-bold rounded-xl text-lg shadow-xl mt-6">
                     <i class="fas fa-sign-in-alt mr-2"></i>Sign In
                 </button>
             </form>
 
             <!-- Signup Form -->
-            <form id="signupForm" class="space-y-4 hidden">
+            <form id="signupForm" class="space-y-5 hidden">
                 <div>
-                    <label class="block text-white/90 text-sm font-semibold mb-2">
-                        <i class="fas fa-user mr-2"></i>Username
+                    <label class="block text-white/95 text-sm font-bold mb-3 tracking-wide">
+                        <i class="fas fa-user mr-2 text-emerald-200"></i>Username
                     </label>
-                    <input type="text" id="signupUsername" class="input-field w-full px-4 py-3 rounded-xl border-0 focus:outline-none focus:ring-0" placeholder="Choose a username" required>
+                    <input type="text" id="signupUsername" class="input-field w-full px-5 py-4 rounded-xl border-0 focus:outline-none focus:ring-0 font-medium text-slate-700 placeholder:text-slate-400" placeholder="Choose a username" required>
                 </div>
                 
                 <div>
-                    <label class="block text-white/90 text-sm font-semibold mb-2">
-                        <i class="fas fa-envelope mr-2"></i>Email
+                    <label class="block text-white/95 text-sm font-bold mb-3 tracking-wide">
+                        <i class="fas fa-envelope mr-2 text-emerald-200"></i>Email
                     </label>
-                    <input type="email" id="signupEmail" class="input-field w-full px-4 py-3 rounded-xl border-0 focus:outline-none focus:ring-0" placeholder="Enter your email" required>
+                    <input type="email" id="signupEmail" class="input-field w-full px-5 py-4 rounded-xl border-0 focus:outline-none focus:ring-0 font-medium text-slate-700 placeholder:text-slate-400" placeholder="Enter your email" required>
                 </div>
                 
                 <div>
-                    <label class="block text-white/90 text-sm font-semibold mb-2">
-                        <i class="fas fa-lock mr-2"></i>Password
+                    <label class="block text-white/95 text-sm font-bold mb-3 tracking-wide">
+                        <i class="fas fa-lock mr-2 text-emerald-200"></i>Password
                     </label>
                     <div class="relative">
-                        <input type="password" id="signupPassword" class="input-field w-full px-4 py-3 pr-12 rounded-xl border-0 focus:outline-none focus:ring-0" placeholder="Create a password" required>
-                        <button type="button" id="toggleSignupPassword" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700">
-                            <i class="fas fa-eye"></i>
+                        <input type="password" id="signupPassword" class="input-field w-full px-5 py-4 pr-14 rounded-xl border-0 focus:outline-none focus:ring-0 font-medium text-slate-700 placeholder:text-slate-400" placeholder="Create a password" required>
+                        <button type="button" id="toggleSignupPassword" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-slate-500 hover:text-emerald-600 transition-colors duration-300">
+                            <i class="fas fa-eye text-lg"></i>
                         </button>
                     </div>
-                    <p class="text-white/70 text-xs mt-1">
-                        <i class="fas fa-info-circle mr-1"></i>
-                        Password must be at least 6 characters long
-                    </p>
+                    <div class="mt-3 bg-white/20 backdrop-blur-sm rounded-lg p-3 border border-white/30">
+                        <p class="text-white/90 text-xs font-medium flex items-start">
+                            <i class="fas fa-shield-alt mr-2 mt-0.5 text-emerald-200"></i>
+                            <span>Password must be at least 6 characters long</span>
+                        </p>
+                    </div>
                 </div>
                 
-                <button type="submit" class="btn-primary w-full py-3 text-white font-semibold rounded-xl">
+                <button type="submit" class="btn-primary w-full py-4 text-white font-bold rounded-xl text-lg shadow-xl mt-6">
                     <i class="fas fa-user-plus mr-2"></i>Create Account
                 </button>
             </form>
 
             <!-- Loading Spinner -->
-            <div id="loadingSpinner" class="hidden text-center py-4">
-                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
-                <p class="text-white/80 mt-2">Processing...</p>
+            <div id="loadingSpinner" class="hidden text-center py-6">
+                <div class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-white/30 border-t-white"></div>
+                <p class="text-white/90 mt-3 font-semibold">Processing...</p>
             </div>
 
             <!-- Error/Success Messages -->
-            <div id="messageContainer" class="mt-4"></div>
+            <div id="messageContainer" class="mt-5"></div>
         </div>
 
         <!-- Footer -->
-        <div class="text-center mt-6 text-white/70 text-sm">
-            <p>
-                <i class="fas fa-heart mr-1"></i>
-                Start mapping your memories today
-            </p>
+        <div class="text-center mt-8 text-white/80 text-sm slide-in" style="animation-delay: 0.4s;">
+            <div class="bg-white/10 backdrop-blur-sm rounded-2xl px-6 py-4 inline-block border border-white/20">
+                <p class="font-medium flex items-center justify-center">
+                    <i class="fas fa-heart mr-2 text-red-300 animate-pulse"></i>
+                    Start mapping your memories today
+                </p>
+            </div>
         </div>
     </div>
 
     <script src="../../dist/auth.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/public/main.html b/frontend/public/main.html
index 5653c4d..37f73b9 100644
--- a/frontend/public/main.html
+++ b/frontend/public/main.html
@@ -18,57 +18,80 @@
 </head>
 
 
-<body class="bg-slate-50 dark:bg-slate-900 min-h-screen transition-colors duration-300">
+<body
+    class="bg-gradient-to-br from-slate-50 via-emerald-50/30 to-teal-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 min-h-screen transition-all duration-500">
     <!-- Navigation -->
     <nav
-        class="fixed top-0 w-full z-50 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 transition-colors duration-300">
-        <div class="max-w-6xl mx-auto px-6 py-4">
+        class="fixed top-0 w-full z-50 bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl border-b border-slate-200/50 dark:border-slate-700/50 transition-all duration-300 shadow-lg shadow-slate-200/50 dark:shadow-slate-900/50">
+        <div class="max-w-7xl mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-3">
-                    <div class="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
-                        <i class="fas fa-map-marked-alt text-white text-sm"></i>
+                <div class="flex items-center space-x-4 group">
+                    <div
+                        class="w-11 h-11 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30 group-hover:shadow-emerald-500/50 transition-all duration-300 group-hover:scale-110">
+                        <i class="fas fa-map-marked-alt text-white text-lg"></i>
                     </div>
-                    <h1 class="text-xl font-semibold text-slate-800 dark:text-slate-100">Memory Map</h1>
+                    <h1
+                        class="text-2xl font-extrabold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
+                        Memory Map</h1>
                 </div>
-                <div class="hidden md:flex space-x-6">
+                <div class="hidden md:flex space-x-8">
                     <a href="#"
-                        class="text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100 font-medium transition-colors">Explore</a>
+                        class="text-slate-700 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 font-semibold transition-all duration-300 relative group">
+                        Explore
+                        <span
+                            class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-600 group-hover:w-full transition-all duration-300"></span>
+                    </a>
                     <a href="#"
-                        class="text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100 font-medium transition-colors">My
-                        Maps</a>
+                        class="text-slate-700 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 font-semibold transition-all duration-300 relative group">
+                        My Maps
+                        <span
+                            class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-600 group-hover:w-full transition-all duration-300"></span>
+                    </a>
                     <a href="#"
-                        class="text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100 font-medium transition-colors">Friends</a>
+                        class="text-slate-700 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 font-semibold transition-all duration-300 relative group">
+                        Friends
+                        <span
+                            class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-600 group-hover:w-full transition-all duration-300"></span>
+                    </a>
                     <a href="#"
-                        class="text-slate-600 dark:text-slate-300 hover:text-slate-800 dark:hover:text-slate-100 font-medium transition-colors">Settings</a>
+                        class="text-slate-700 dark:text-slate-300 hover:text-emerald-600 dark:hover:text-emerald-400 font-semibold transition-all duration-300 relative group">
+                        Settings
+                        <span
+                            class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-600 group-hover:w-full transition-all duration-300"></span>
+                    </a>
                 </div>
-                <div class="flex items-center space-x-3">
+                <div class="flex items-center space-x-4">
                     <!-- User Info -->
-                    <div id="userInfo" class="hidden items-center space-x-2 mr-3">
+                    <div id="userInfo"
+                        class="hidden items-center space-x-3 mr-2 bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-slate-700 dark:to-slate-600 px-4 py-2 rounded-2xl border border-emerald-200/50 dark:border-slate-600">
                         <div class="text-right">
-                            <p id="userName" class="text-sm font-medium text-slate-800 dark:text-slate-100"></p>
-                            <p class="text-xs text-slate-500 dark:text-slate-400">Logged in</p>
+                            <p id="userName" class="text-sm font-bold text-slate-800 dark:text-slate-100"></p>
+                            <p class="text-xs text-emerald-600 dark:text-emerald-400 font-medium">● Online</p>
                         </div>
-                        <div class="w-8 h-8 bg-emerald-600 rounded-full flex items-center justify-center">
-                            <i class="fas fa-user text-white text-xs"></i>
+                        <div
+                            class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-full flex items-center justify-center shadow-lg shadow-emerald-500/30">
+                            <i class="fas fa-user text-white text-sm"></i>
                         </div>
                     </div>
-                    
+
                     <!-- Dark Mode Toggle -->
                     <button id="darkModeToggle"
-                        class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-700 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
-                        <i class="fas fa-moon text-slate-600 dark:text-slate-300 text-sm dark:hidden"></i>
-                        <i class="fas fa-sun text-yellow-500 text-sm hidden dark:block"></i>
+                        class="w-11 h-11 rounded-2xl bg-slate-100 dark:bg-slate-700 flex items-center justify-center hover:bg-slate-200 dark:hover:bg-slate-600 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-110">
+                        <i class="fas fa-moon text-slate-600 dark:text-slate-300 text-base dark:hidden"></i>
+                        <i class="fas fa-sun text-yellow-500 text-base hidden dark:block"></i>
                     </button>
-                    
+
                     <!-- Logout Button -->
                     <button id="logoutBtn"
-                        class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 font-medium transition-colors text-sm">
-                        <i class="fas fa-sign-out-alt mr-1"></i>Logout
+                        class="bg-gradient-to-r from-red-500 to-red-600 text-white px-5 py-2.5 rounded-2xl hover:from-red-600 hover:to-red-700 font-bold transition-all duration-300 text-sm shadow-lg shadow-red-500/30 hover:shadow-red-500/50 hover:scale-105">
+                        <i class="fas fa-sign-out-alt mr-0 md:mr-2"></i>
+                        <span class="hidden md:inline">Logout</span>
                     </button>
-                    
+
                     <button
-                        class="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 font-medium transition-colors">
-                        Add Memory
+                        class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-2.5 rounded-2xl hover:from-emerald-600 hover:to-teal-700 font-bold transition-all duration-300 shadow-lg shadow-emerald-500/30 hover:shadow-emerald-500/50 hover:scale-105">
+                        <i class="fas fa-plus mr-0 md:mr-2"></i>
+                        <span class="hidden md:inline">Add Memory</span>
                     </button>
                 </div>
             </div>
@@ -76,34 +99,45 @@ <h1 class="text-xl font-semibold text-slate-800 dark:text-slate-100">Memory Map<
     </nav>
 
     <!-- Hero Section -->
-    <section class="pt-20 pb-12 px-6">
-        <div class="max-w-4xl mx-auto text-center">
-            <h2 class="text-4xl md:text-5xl font-bold text-slate-800 dark:text-slate-100 mb-4 transition-colors">
-                Your Adventures, Beautifully Mapped
+    <section class="pt-32 pb-16 px-6">
+        <div class="max-w-5xl mx-auto text-center">
+            <div
+                class="inline-block mb-6 px-6 py-2 bg-gradient-to-r from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30 rounded-full border border-emerald-200 dark:border-emerald-700">
+                <p class="text-emerald-700 dark:text-emerald-300 font-bold text-sm tracking-wide">✨ YOUR JOURNEY STARTS
+                    HERE</p>
+            </div>
+            <h2
+                class="text-5xl md:text-7xl font-black text-slate-900 dark:text-slate-100 mb-6 transition-colors leading-tight tracking-tight">
+                Your Adventures,<br />
+                <span
+                    class="bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 bg-clip-text text-transparent">Beautifully
+                    Mapped</span>
             </h2>
-            <p class="text-lg text-slate-600 dark:text-slate-300 mb-8 max-w-2xl mx-auto transition-colors">
+            <p
+                class="text-xl text-slate-600 dark:text-slate-300 mb-10 max-w-3xl mx-auto transition-colors leading-relaxed font-medium">
                 Create visual journals of your travels. Share memories with friends,
                 discover new places, and build a personal collection of life's adventures.
             </p>
-            <div class="flex flex-col sm:flex-row gap-3 justify-center">
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <button id="startMappingBtn"
-                    class="bg-emerald-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-emerald-700 transition-colors">
-                    Start Mapping
+                    class="bg-gradient-to-r from-emerald-600 to-teal-600 text-white px-8 py-4 rounded-2xl font-bold hover:from-emerald-700 hover:to-teal-700 transition-all duration-300 shadow-2xl shadow-emerald-500/30 hover:shadow-emerald-500/50 hover:scale-105 text-lg">
+                    <i class="fas fa-rocket mr-2"></i>Start Mapping
                 </button>
                 <button
-                    class="bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 px-6 py-3 rounded-lg font-medium border border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
-                    Learn More
+                    class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-8 py-4 rounded-2xl font-bold border-2 border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-all duration-300 hover:scale-105 text-lg shadow-xl">
+                    <i class="fas fa-play-circle mr-2"></i>Learn More
                 </button>
             </div>
         </div>
     </section>
 
     <!-- Interactive Map Preview -->
-    <section class="py-8 px-6">
-        <div class="max-w-4xl mx-auto">
+    <section class="py-12 px-6">
+        <div class="max-w-6xl mx-auto">
             <div
-                class="relative h-80 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden transition-colors">
-                <div class="absolute inset-0 bg-slate-100 dark:bg-slate-700 transition-colors">
+                class="relative h-96 bg-white dark:bg-slate-800 rounded-3xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300 shadow-2xl hover:shadow-3xl group">
+                <div
+                    class="absolute inset-0 bg-gradient-to-br from-slate-100 via-emerald-50 to-teal-50 dark:from-slate-700 dark:via-slate-600 dark:to-slate-700 transition-colors">
                     <!-- Simple illustrated map background -->
                     <svg class="w-full h-full" viewBox="0 0 400 300" fill="none">
                         <!-- Landmasses -->
@@ -126,67 +160,79 @@ <h2 class="text-4xl md:text-5xl font-bold text-slate-800 dark:text-slate-100 mb-
                 <div class="map-pin" style="top: 35%; left: 85%;" data-location="Bali"></div>
 
                 <div
-                    class="absolute bottom-4 left-4 bg-white dark:bg-slate-700 rounded-lg p-3 border border-slate-200 dark:border-slate-600 transition-colors">
-                    <div class="flex items-center space-x-3">
-                        <div class="w-8 h-8 bg-amber-400 rounded-md"></div>
+                    class="absolute bottom-6 left-6 bg-white/95 dark:bg-slate-700/95 backdrop-blur-xl rounded-2xl p-5 border border-slate-200 dark:border-slate-600 transition-all duration-300 shadow-2xl hover:scale-105">
+                    <div class="flex items-center space-x-4">
+                        <div class="w-14 h-14 bg-gradient-to-br from-amber-400 to-orange-500 rounded-xl shadow-lg">
+                        </div>
                         <div>
-                            <h3 class="font-medium text-slate-800 dark:text-slate-100 text-sm transition-colors">Paris
+                            <h3 class="font-bold text-slate-800 dark:text-slate-100 text-base transition-colors">Paris
                                 Adventure</h3>
-                            <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors">5 photos • 2 friends
-                            </p>
+                            <p class="text-sm text-slate-500 dark:text-slate-400 transition-colors font-medium">5 photos
+                                • 2 friends</p>
                         </div>
                     </div>
                 </div>
+
+                <div
+                    class="absolute top-6 right-6 bg-emerald-500 text-white px-4 py-2 rounded-full font-bold text-sm shadow-lg animate-pulse">
+                    <i class="fas fa-map-pin mr-1"></i> 4 Memories
+                </div>
             </div>
         </div>
     </section>
 
     <!-- Features Section -->
-    <section class="py-16 px-6 bg-white dark:bg-slate-800 transition-colors">
-        <div class="max-w-4xl mx-auto">
-            <div class="text-center mb-12">
-                <h3 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-3 transition-colors">Why Memory Map?
-                </h3>
-                <p class="text-lg text-slate-600 dark:text-slate-300 transition-colors">Every journey deserves to be
-                    remembered beautifully</p>
+    <section class="py-20 px-6 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm transition-colors">
+        <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-16">
+                <div
+                    class="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30 rounded-full border border-emerald-200 dark:border-emerald-700">
+                    <p class="text-emerald-700 dark:text-emerald-300 font-bold text-sm tracking-wide">WHY CHOOSE US</p>
+                </div>
+                <h3 class="text-4xl md:text-5xl font-black text-slate-900 dark:text-slate-100 mb-4 transition-colors">
+                    Why Memory Map?</h3>
+                <p class="text-xl text-slate-600 dark:text-slate-300 transition-colors font-medium">Every journey
+                    deserves to be remembered beautifully</p>
             </div>
 
             <div class="grid md:grid-cols-3 gap-8">
-                <div class="text-center p-6">
+                <div
+                    class="text-center p-8 bg-gradient-to-br from-white to-rose-50 dark:from-slate-700 dark:to-rose-900/20 rounded-3xl border-2 border-rose-100 dark:border-rose-900/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
                     <div
-                        class="w-12 h-12 bg-rose-100 dark:bg-rose-900 rounded-lg flex items-center justify-center mx-auto mb-4 transition-colors">
-                        <i class="fas fa-camera text-rose-600 dark:text-rose-400 text-lg transition-colors"></i>
+                        class="w-16 h-16 bg-gradient-to-br from-rose-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all duration-300 shadow-lg shadow-rose-500/30 group-hover:shadow-rose-500/50 group-hover:scale-110">
+                        <i class="fas fa-camera text-white text-2xl transition-colors"></i>
                     </div>
-                    <h4 class="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-3 transition-colors">Visual
+                    <h4 class="text-2xl font-black text-slate-900 dark:text-slate-100 mb-4 transition-colors">Visual
                         Storytelling</h4>
-                    <p class="text-slate-600 dark:text-slate-300 leading-relaxed transition-colors">
+                    <p class="text-slate-600 dark:text-slate-300 leading-relaxed transition-colors font-medium">
                         Upload photos, add notes, and create rich visual stories of your adventures.
                         Every memory becomes a beautiful piece of your journey.
                     </p>
                 </div>
 
-                <div class="text-center p-6">
+                <div
+                    class="text-center p-8 bg-gradient-to-br from-white to-blue-50 dark:from-slate-700 dark:to-blue-900/20 rounded-3xl border-2 border-blue-100 dark:border-blue-900/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
                     <div
-                        class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mx-auto mb-4 transition-colors">
-                        <i class="fas fa-users text-blue-600 dark:text-blue-400 text-lg transition-colors"></i>
+                        class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all duration-300 shadow-lg shadow-blue-500/30 group-hover:shadow-blue-500/50 group-hover:scale-110">
+                        <i class="fas fa-users text-white text-2xl transition-colors"></i>
                     </div>
-                    <h4 class="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-3 transition-colors">
+                    <h4 class="text-2xl font-black text-slate-900 dark:text-slate-100 mb-4 transition-colors">
                         Collaborative Memories</h4>
-                    <p class="text-slate-600 dark:text-slate-300 leading-relaxed transition-colors">
+                    <p class="text-slate-600 dark:text-slate-300 leading-relaxed transition-colors font-medium">
                         Invite friends to contribute their photos and stories. Build shared memories
                         and see adventures from multiple perspectives.
                     </p>
                 </div>
 
-                <div class="text-center p-6">
+                <div
+                    class="text-center p-8 bg-gradient-to-br from-white to-emerald-50 dark:from-slate-700 dark:to-emerald-900/20 rounded-3xl border-2 border-emerald-100 dark:border-emerald-900/30 transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
                     <div
-                        class="w-12 h-12 bg-emerald-100 dark:bg-emerald-900 rounded-lg flex items-center justify-center mx-auto mb-4 transition-colors">
-                        <i
-                            class="fas fa-map-marked-alt text-emerald-600 dark:text-emerald-400 text-lg transition-colors"></i>
+                        class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-6 transition-all duration-300 shadow-lg shadow-emerald-500/30 group-hover:shadow-emerald-500/50 group-hover:scale-110">
+                        <i class="fas fa-map-marked-alt text-white text-2xl transition-colors"></i>
                     </div>
-                    <h4 class="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-3 transition-colors">
+                    <h4 class="text-2xl font-black text-slate-900 dark:text-slate-100 mb-4 transition-colors">
                         Interactive Maps</h4>
-                    <p class="text-slate-600 dark:text-slate-300 leading-relaxed transition-colors">
+                    <p class="text-slate-600 dark:text-slate-300 leading-relaxed transition-colors font-medium">
                         Visualize your travels on beautiful interactive maps. Discover patterns,
                         relive moments, and plan your next adventure.
                     </p>
@@ -196,137 +242,175 @@ <h4 class="text-xl font-semibold text-slate-800 dark:text-slate-100 mb-3 transit
     </section>
 
     <!-- Memory Grid Section -->
-    <section class="py-16 px-6 bg-slate-50 dark:bg-slate-900 transition-colors">
-        <div class="max-w-4xl mx-auto">
-            <div class="text-center mb-12">
-                <h3 class="text-3xl font-bold text-slate-800 dark:text-slate-100 mb-3 transition-colors">Recent Memories
-                </h3>
-                <p class="text-lg text-slate-600 dark:text-slate-300 transition-colors">Discover amazing adventures from
-                    our community</p>
+    <section
+        class="py-20 px-6 bg-gradient-to-br from-slate-50 via-emerald-50/30 to-teal-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors">
+        <div class="max-w-6xl mx-auto">
+            <div class="text-center mb-16">
+                <div
+                    class="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-emerald-100 to-teal-100 dark:from-emerald-900/30 dark:to-teal-900/30 rounded-full border border-emerald-200 dark:border-emerald-700">
+                    <p class="text-emerald-700 dark:text-emerald-300 font-bold text-sm tracking-wide">COMMUNITY
+                        HIGHLIGHTS</p>
+                </div>
+                <h3 class="text-4xl md:text-5xl font-black text-slate-900 dark:text-slate-100 mb-4 transition-colors">
+                    Recent Memories</h3>
+                <p class="text-xl text-slate-600 dark:text-slate-300 transition-colors font-medium">Discover amazing
+                    adventures from our community</p>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <div
-                    class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-colors">
-                    <div class="h-32 bg-orange-200 dark:bg-orange-800 transition-colors"></div>
-                    <div class="p-4">
-                        <div class="flex items-center space-x-2 mb-2">
-                            <div class="w-6 h-6 bg-slate-300 dark:bg-slate-600 rounded-full transition-colors"></div>
+                    class="bg-white dark:bg-slate-800 rounded-2xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
+                    <div
+                        class="h-40 bg-gradient-to-br from-orange-300 to-red-400 dark:from-orange-700 dark:to-red-800 transition-colors relative overflow-hidden">
+                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300">
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div class="flex items-center space-x-3 mb-3">
+                            <div
+                                class="w-8 h-8 bg-gradient-to-br from-slate-300 to-slate-400 dark:from-slate-600 dark:to-slate-500 rounded-full transition-colors">
+                            </div>
                             <div>
-                                <h5 class="font-medium text-slate-800 dark:text-slate-100 text-sm transition-colors">
-                                    Sarah Chen</h5>
-                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors">2 days ago</p>
+                                <h5 class="font-bold text-slate-800 dark:text-slate-100 text-sm transition-colors">Sarah
+                                    Chen</h5>
+                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-medium">2
+                                    days ago</p>
                             </div>
                         </div>
-                        <h4 class="font-semibold text-slate-800 dark:text-slate-100 mb-1 text-sm transition-colors">
+                        <h4 class="font-black text-slate-900 dark:text-slate-100 mb-2 text-base transition-colors">
                             Santorini Sunset</h4>
-                        <p class="text-slate-600 dark:text-slate-300 text-xs mb-3 transition-colors">The most beautiful
-                            sunset I've ever witnessed...</p>
+                        <p class="text-slate-600 dark:text-slate-300 text-sm mb-4 transition-colors leading-relaxed">The
+                            most beautiful sunset I've ever witnessed...</p>
                         <div class="flex items-center justify-between">
                             <div class="flex space-x-1">
-                                <div class="w-4 h-4 bg-slate-300 dark:bg-slate-600 rounded-full transition-colors">
+                                <div
+                                    class="w-5 h-5 bg-gradient-to-br from-slate-300 to-slate-400 dark:from-slate-600 dark:to-slate-500 rounded-full transition-colors border-2 border-white dark:border-slate-800">
                                 </div>
-                                <div class="w-4 h-4 bg-slate-400 dark:bg-slate-500 rounded-full transition-colors">
+                                <div
+                                    class="w-5 h-5 bg-gradient-to-br from-slate-400 to-slate-500 dark:from-slate-500 dark:to-slate-400 rounded-full transition-colors border-2 border-white dark:border-slate-800 -ml-2">
                                 </div>
-                                <span class="text-xs text-slate-500 dark:text-slate-400 transition-colors">+3</span>
+                                <span
+                                    class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-bold ml-1">+3</span>
                             </div>
-                            <div
-                                class="flex items-center space-x-1 text-slate-500 dark:text-slate-400 transition-colors">
-                                <i class="fas fa-heart text-xs"></i>
-                                <span class="text-xs">24</span>
+                            <div class="flex items-center space-x-2 text-rose-500 dark:text-rose-400 transition-colors">
+                                <i class="fas fa-heart text-sm"></i>
+                                <span class="text-sm font-bold">24</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div
-                    class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-colors">
-                    <div class="h-32 bg-green-200 dark:bg-green-800 transition-colors"></div>
-                    <div class="p-4">
-                        <div class="flex items-center space-x-2 mb-2">
-                            <div class="w-6 h-6 bg-slate-300 dark:bg-slate-600 rounded-full transition-colors"></div>
+                    class="bg-white dark:bg-slate-800 rounded-2xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
+                    <div
+                        class="h-40 bg-gradient-to-br from-green-300 to-emerald-500 dark:from-green-700 dark:to-emerald-800 transition-colors relative overflow-hidden">
+                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300">
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div class="flex items-center space-x-3 mb-3">
+                            <div
+                                class="w-8 h-8 bg-gradient-to-br from-slate-300 to-slate-400 dark:from-slate-600 dark:to-slate-500 rounded-full transition-colors">
+                            </div>
                             <div>
-                                <h5 class="font-medium text-slate-800 dark:text-slate-100 text-sm transition-colors">
-                                    Alex Rivera</h5>
-                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors">1 week ago</p>
+                                <h5 class="font-bold text-slate-800 dark:text-slate-100 text-sm transition-colors">Alex
+                                    Rivera</h5>
+                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-medium">1
+                                    week ago</p>
                             </div>
                         </div>
-                        <h4 class="font-semibold text-slate-800 dark:text-slate-100 mb-1 text-sm transition-colors">
+                        <h4 class="font-black text-slate-900 dark:text-slate-100 mb-2 text-base transition-colors">
                             Hiking in Patagonia</h4>
-                        <p class="text-slate-600 dark:text-slate-300 text-xs mb-3 transition-colors">Epic 5-day trek
-                            through pristine wilderness...</p>
+                        <p class="text-slate-600 dark:text-slate-300 text-sm mb-4 transition-colors leading-relaxed">
+                            Epic 5-day trek through pristine wilderness...</p>
                         <div class="flex items-center justify-between">
                             <div class="flex space-x-1">
-                                <span class="text-xs text-slate-500 dark:text-slate-400 transition-colors">Solo
+                                <span
+                                    class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-bold">Solo
                                     adventure</span>
                             </div>
-                            <div
-                                class="flex items-center space-x-1 text-slate-500 dark:text-slate-400 transition-colors">
-                                <i class="fas fa-heart text-xs"></i>
-                                <span class="text-xs">18</span>
+                            <div class="flex items-center space-x-2 text-rose-500 dark:text-rose-400 transition-colors">
+                                <i class="fas fa-heart text-sm"></i>
+                                <span class="text-sm font-bold">18</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div
-                    class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-colors">
-                    <div class="h-32 bg-purple-200 dark:bg-purple-800 transition-colors"></div>
-                    <div class="p-4">
-                        <div class="flex items-center space-x-2 mb-2">
-                            <div class="w-6 h-6 bg-slate-300 dark:bg-slate-600 rounded-full transition-colors"></div>
+                    class="bg-white dark:bg-slate-800 rounded-2xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
+                    <div
+                        class="h-40 bg-gradient-to-br from-purple-300 to-pink-400 dark:from-purple-700 dark:to-pink-800 transition-colors relative overflow-hidden">
+                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300">
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div class="flex items-center space-x-3 mb-3">
+                            <div
+                                class="w-8 h-8 bg-gradient-to-br from-slate-300 to-slate-400 dark:from-slate-600 dark:to-slate-500 rounded-full transition-colors">
+                            </div>
                             <div>
-                                <h5 class="font-medium text-slate-800 dark:text-slate-100 text-sm transition-colors">
-                                    Maya Patel</h5>
-                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors">3 days ago</p>
+                                <h5 class="font-bold text-slate-800 dark:text-slate-100 text-sm transition-colors">Maya
+                                    Patel</h5>
+                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-medium">3
+                                    days ago</p>
                             </div>
                         </div>
-                        <h4 class="font-semibold text-slate-800 dark:text-slate-100 mb-1 text-sm transition-colors">
-                            Tokyo Food Tour</h4>
-                        <p class="text-slate-600 dark:text-slate-300 text-xs mb-3 transition-colors">Incredible street
-                            food discoveries in Shibuya...</p>
+                        <h4 class="font-black text-slate-900 dark:text-slate-100 mb-2 text-base transition-colors">Tokyo
+                            Food Tour</h4>
+                        <p class="text-slate-600 dark:text-slate-300 text-sm mb-4 transition-colors leading-relaxed">
+                            Incredible street food discoveries in Shibuya...</p>
                         <div class="flex items-center justify-between">
                             <div class="flex space-x-1">
-                                <div class="w-4 h-4 bg-slate-300 dark:bg-slate-600 rounded-full transition-colors">
+                                <div
+                                    class="w-5 h-5 bg-gradient-to-br from-slate-300 to-slate-400 dark:from-slate-600 dark:to-slate-500 rounded-full transition-colors border-2 border-white dark:border-slate-800">
                                 </div>
-                                <div class="w-4 h-4 bg-slate-400 dark:bg-slate-500 rounded-full transition-colors">
+                                <div
+                                    class="w-5 h-5 bg-gradient-to-br from-slate-400 to-slate-500 dark:from-slate-500 dark:to-slate-400 rounded-full transition-colors border-2 border-white dark:border-slate-800 -ml-2">
                                 </div>
-                                <span class="text-xs text-slate-500 dark:text-slate-400 transition-colors">+2</span>
+                                <span
+                                    class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-bold ml-1">+2</span>
                             </div>
-                            <div
-                                class="flex items-center space-x-1 text-slate-500 dark:text-slate-400 transition-colors">
-                                <i class="fas fa-heart text-xs"></i>
-                                <span class="text-xs">31</span>
+                            <div class="flex items-center space-x-2 text-rose-500 dark:text-rose-400 transition-colors">
+                                <i class="fas fa-heart text-sm"></i>
+                                <span class="text-sm font-bold">31</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div
-                    class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-colors">
-                    <div class="h-32 bg-blue-200 dark:bg-blue-800 transition-colors"></div>
-                    <div class="p-4">
-                        <div class="flex items-center space-x-2 mb-2">
-                            <div class="w-6 h-6 bg-slate-300 dark:bg-slate-600 rounded-full transition-colors"></div>
+                    class="bg-white dark:bg-slate-800 rounded-2xl border-2 border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-2xl group">
+                    <div
+                        class="h-40 bg-gradient-to-br from-blue-300 to-cyan-400 dark:from-blue-700 dark:to-cyan-800 transition-colors relative overflow-hidden">
+                        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300">
+                        </div>
+                    </div>
+                    <div class="p-5">
+                        <div class="flex items-center space-x-3 mb-3">
+                            <div
+                                class="w-8 h-8 bg-gradient-to-br from-slate-300 to-slate-400 dark:from-slate-600 dark:to-slate-500 rounded-full transition-colors">
+                            </div>
                             <div>
-                                <h5 class="font-medium text-slate-800 dark:text-slate-100 text-sm transition-colors">
-                                    James Wilson</h5>
-                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors">5 days ago</p>
+                                <h5 class="font-bold text-slate-800 dark:text-slate-100 text-sm transition-colors">James
+                                    Wilson</h5>
+                                <p class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-medium">5
+                                    days ago</p>
                             </div>
                         </div>
-                        <h4 class="font-semibold text-slate-800 dark:text-slate-100 mb-1 text-sm transition-colors">
+                        <h4 class="font-black text-slate-900 dark:text-slate-100 mb-2 text-base transition-colors">
                             Northern Lights</h4>
-                        <p class="text-slate-600 dark:text-slate-300 text-xs mb-3 transition-colors">Finally caught the
-                            aurora in Iceland...</p>
+                        <p class="text-slate-600 dark:text-slate-300 text-sm mb-4 transition-colors leading-relaxed">
+                            Finally caught the aurora in Iceland...</p>
                         <div class="flex items-center justify-between">
                             <div class="flex space-x-1">
-                                <span class="text-xs text-slate-500 dark:text-slate-400 transition-colors">with
+                                <span
+                                    class="text-xs text-slate-500 dark:text-slate-400 transition-colors font-bold">with
                                     Emma</span>
                             </div>
-                            <div
-                                class="flex items-center space-x-1 text-slate-500 dark:text-slate-400 transition-colors">
-                                <i class="fas fa-heart text-xs"></i>
-                                <span class="text-xs">42</span>
+                            <div class="flex items-center space-x-2 text-rose-500 dark:text-rose-400 transition-colors">
+                                <i class="fas fa-heart text-sm"></i>
+                                <span class="text-sm font-bold">42</span>
                             </div>
                         </div>
                     </div>
@@ -336,76 +420,82 @@ <h4 class="font-semibold text-slate-800 dark:text-slate-100 mb-1 text-sm transit
     </section>
 
     <!-- CTA Section -->
-    <section class="py-16 px-6 bg-emerald-600 dark:bg-emerald-700 transition-colors">
-        <div class="max-w-3xl mx-auto text-center">
-            <h3 class="text-3xl font-bold text-white mb-4">Start Your Memory Map Today</h3>
-            <p class="text-lg text-emerald-100 dark:text-emerald-200 mb-8 max-w-2xl mx-auto transition-colors">
+    <section
+        class="py-24 px-6 bg-gradient-to-br from-emerald-600 via-teal-600 to-cyan-600 dark:from-emerald-700 dark:via-teal-700 dark:to-cyan-700 transition-colors relative overflow-hidden">
+        <div
+            class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYgMi42ODYgNiA2cy0yLjY4NiA2LTYgNi02LTIuNjg2LTYtNiAyLjY4Ni02IDYtNnoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW9wYWNpdHk9Ii4xIi8+PC9nPjwvc3ZnPg==')] opacity-20">
+        </div>
+        <div class="max-w-4xl mx-auto text-center relative z-10">
+            <h3 class="text-4xl md:text-5xl font-black text-white mb-6">Start Your Memory Map Today</h3>
+            <p
+                class="text-xl text-emerald-50 dark:text-emerald-100 mb-10 max-w-3xl mx-auto transition-colors leading-relaxed font-medium">
                 Join thousands of adventurers who are already creating beautiful visual journals of their travels.
                 Your next great story is waiting to be mapped.
             </p>
-            <div class="flex flex-col sm:flex-row gap-3 justify-center">
+            <div class="flex flex-col sm:flex-row gap-5 justify-center">
                 <button
-                    class="bg-white text-emerald-600 px-6 py-3 rounded-lg font-semibold hover:bg-slate-50 transition-colors">
-                    Create Free Account
+                    class="bg-white text-emerald-600 px-8 py-4 rounded-2xl font-black hover:bg-slate-50 transition-all duration-300 shadow-2xl hover:scale-105 text-lg">
+                    <i class="fas fa-user-plus mr-2"></i>Create Free Account
                 </button>
                 <button
-                    class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-emerald-800 dark:hover:bg-emerald-600 transition-colors">
-                    Learn More
+                    class="border-2 border-white text-white px-8 py-4 rounded-2xl font-bold hover:bg-white/10 backdrop-blur-sm transition-all duration-300 hover:scale-105 text-lg">
+                    <i class="fas fa-info-circle mr-2"></i>Learn More
                 </button>
             </div>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-slate-800 dark:bg-slate-900 text-white py-12 px-6 transition-colors">
-        <div class="max-w-4xl mx-auto">
-            <div class="grid md:grid-cols-4 gap-8 mb-8">
+    <footer class="bg-slate-900 dark:bg-black text-white py-16 px-6 transition-colors">
+        <div class="max-w-6xl mx-auto">
+            <div class="grid md:grid-cols-4 gap-10 mb-12">
                 <div>
-                    <div class="flex items-center space-x-3 mb-4">
-                        <div class="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center">
-                            <i class="fas fa-map-marked-alt text-white text-sm"></i>
+                    <div class="flex items-center space-x-3 mb-6">
+                        <div
+                            class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center shadow-lg">
+                            <i class="fas fa-map-marked-alt text-white text-base"></i>
                         </div>
-                        <h1 class="text-lg font-semibold">Memory Map</h1>
+                        <h1 class="text-xl font-black">Memory Map</h1>
                     </div>
-                    <p class="text-slate-400 dark:text-slate-500 text-sm leading-relaxed transition-colors">
+                    <p class="text-slate-400 dark:text-slate-500 text-sm leading-relaxed transition-colors font-medium">
                         Creating beautiful visual journals of your adventures,
                         one memory at a time.
                     </p>
                 </div>
 
                 <div>
-                    <h4 class="font-medium text-base mb-3">Product</h4>
-                    <ul class="space-y-2 text-sm text-slate-400 dark:text-slate-500 transition-colors">
-                        <li><a href="#" class="hover:text-white transition-colors">Features</a></li>
-                        <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
-                        <li><a href="#" class="hover:text-white transition-colors">Mobile App</a></li>
-                        <li><a href="#" class="hover:text-white transition-colors">API</a></li>
+                    <h4 class="font-black text-base mb-4">Product</h4>
+                    <ul class="space-y-3 text-sm text-slate-400 dark:text-slate-500 transition-colors">
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">Features</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">Pricing</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">Mobile App</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">API</a></li>
                     </ul>
                 </div>
 
                 <div>
-                    <h4 class="font-medium text-base mb-3">Company</h4>
-                    <ul class="space-y-2 text-sm text-slate-400 dark:text-slate-500 transition-colors">
-                        <li><a href="#" class="hover:text-white transition-colors">About</a></li>
-                        <li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
-                        <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
-                        <li><a href="#" class="hover:text-white transition-colors">Contact</a></li>
+                    <h4 class="font-black text-base mb-4">Company</h4>
+                    <ul class="space-y-3 text-sm text-slate-400 dark:text-slate-500 transition-colors">
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">About</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">Blog</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">Careers</a></li>
+                        <li><a href="#" class="hover:text-emerald-400 transition-colors font-medium">Contact</a></li>
                     </ul>
                 </div>
 
                 <div>
-                    <h4 class="font-medium text-base mb-3">Connect</h4>
+                    <h4 class="font-black text-base mb-4">Connect</h4>
                     <div class="flex space-x-3">
                         <a href="#"
-                            class="w-8 h-8 bg-slate-700 dark:bg-slate-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 text-sm transition-colors">
+                            class="w-10 h-10 bg-slate-800 dark:bg-slate-900 rounded-xl flex items-center justify-center hover:bg-gradient-to-br hover:from-emerald-500 hover:to-teal-600 text-base transition-all duration-300 hover:scale-110 shadow-lg">
                             <i class="fab fa-twitter"></i>
                         </a>
                         <a href="#"
-                            class="w-8 h-8 bg-slate-700 dark:bg-slate-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 text-sm transition-colors">
+                            class="w-10 h-10 bg-slate-800 dark:bg-slate-900 rounded-xl flex items-center justify-center hover:bg-gradient-to-br hover:from-emerald-500 hover:to-teal-600 text-base transition-all duration-300 hover:scale-110 shadow-lg">
                             <i class="fab fa-instagram"></i>
                         </a>
                         <a href="#"
-                            class="w-8 h-8 bg-slate-700 dark:bg-slate-800 rounded-lg flex items-center justify-center hover:bg-emerald-600 text-sm transition-colors">
+                            class="w-10 h-10 bg-slate-800 dark:bg-slate-900 rounded-xl flex items-center justify-center hover:bg-gradient-to-br hover:from-emerald-500 hover:to-teal-600 text-base transition-all duration-300 hover:scale-110 shadow-lg">
                             <i class="fab fa-facebook"></i>
                         </a>
                     </div>
@@ -413,22 +503,26 @@ <h4 class="font-medium text-base mb-3">Connect</h4>
             </div>
 
             <div
-                class="border-t border-slate-700 dark:border-slate-800 pt-6 text-center text-sm text-slate-400 dark:text-slate-500 transition-colors">
-                <p>&copy; 2024 Memory Map. All rights reserved. Made with ❤️ for adventurers worldwide.</p>
+                class="border-t border-slate-800 dark:border-slate-900 pt-8 text-center text-sm text-slate-400 dark:text-slate-500 transition-colors">
+                <p class="font-medium">&copy; 2025 Memory Map. All rights reserved. Made with <span
+                        class="text-red-500">❤️</span> for adventurers worldwide.</p>
             </div>
         </div>
     </footer>
 
     <!-- Map Modal -->
-    <div id="mapModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
+    <div id="mapModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center hidden">
         <div
-            class="bg-white dark:bg-slate-800 rounded-xl w-full max-w-4xl h-5/6 max-h-screen mx-4 flex flex-col transition-colors">
-            <div class="bg-emerald-600 text-white p-4 rounded-t-xl flex justify-between items-center">
+            class="bg-white dark:bg-slate-800 rounded-3xl w-full max-w-6xl h-5/6 max-h-screen mx-4 flex flex-col transition-colors shadow-2xl border-2 border-slate-200 dark:border-slate-700">
+            <div
+                class="bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 text-white p-6 rounded-t-3xl flex justify-between items-center shadow-lg">
                 <div>
-                    <h2 class="text-xl font-semibold">Create Your Memory Map</h2>
-                    <p class="text-emerald-100 text-sm">Click on the map to add a memory at any location</p>
+                    <h2 class="text-2xl font-black">Create Your Memory Map</h2>
+                    <p class="text-emerald-50 text-sm font-medium mt-1">Click on the map to add a memory at any location
+                    </p>
                 </div>
-                <button id="closeMapBtn" class="text-white hover:text-emerald-200 text-xl transition-colors">
+                <button id="closeMapBtn"
+                    class="text-white hover:text-emerald-100 text-2xl transition-colors hover:scale-110 w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white/10">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
@@ -437,118 +531,110 @@ <h2 class="text-xl font-semibold">Create Your Memory Map</h2>
 
                 <!-- Memory Form -->
                 <div id="memoryForm"
-                    class="absolute top-4 right-4 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl w-80 max-w-[calc(100vw-2rem)] h-[80vh] flex flex-col hidden transition-all duration-300 transform translate-x-full opacity-0 shadow-2xl z-[1000] overflow-hidden">
-                    
+                    class="absolute bottom-3 right-4 bg-white dark:bg-slate-700 border-2 border-slate-200 dark:border-slate-600 rounded-2xl w-80 max-w-[calc(100vw-2rem)] h-[80vh] flex flex-col hidden transition-all duration-300 transform translate-x-full opacity-0 shadow-2xl z-[1000] overflow-hidden">
+
                     <!-- Fixed Header -->
-                    <div class="flex items-center justify-between p-5 pb-3 border-b border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-700 flex-shrink-0">
-                        <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-100 transition-colors flex items-center">
-                            <i class="fas fa-camera-retro mr-2 text-emerald-600"></i>
+                    <div
+                        class="flex items-center justify-between p-6 pb-4 border-b-2 border-slate-200 dark:border-slate-600 bg-gradient-to-r from-white to-emerald-50 dark:from-slate-700 dark:to-slate-600 flex-shrink-0">
+                        <h3
+                            class="text-xl font-black text-slate-900 dark:text-slate-100 transition-colors flex items-center">
+                            <i class="fas fa-camera-retro mr-3 text-emerald-600 text-2xl"></i>
                             Add Memory
                         </h3>
                         <button id="closeFormBtn"
-                            class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition-colors p-1 hover:bg-slate-100 dark:hover:bg-slate-600 rounded-lg">
-                            <i class="fas fa-times"></i>
+                            class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition-colors p-2 hover:bg-slate-100 dark:hover:bg-slate-600 rounded-xl">
+                            <i class="fas fa-times text-lg"></i>
                         </button>
                     </div>
 
                     <!-- Scrollable Content Area -->
                     <div class="flex-1 overflow-y-auto">
-                        <form id="addMemoryForm" class="p-5 space-y-4">
+                        <form id="addMemoryForm" class="p-6 space-y-5">
                             <!-- Memory Title -->
                             <div>
-                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2 transition-colors flex items-center">
+                                <label
+                                    class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-3 transition-colors flex items-center">
                                     <i class="fas fa-map-marker-alt mr-2 text-emerald-600"></i>Memory Title
                                 </label>
                                 <input type="text" id="memoryTitle" name="title" required
-                                    class="w-full px-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors"
+                                    class="w-full px-4 py-3 border-2 border-slate-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors font-medium"
                                     placeholder="Give this memory a title">
                             </div>
 
                             <!-- Memory Description -->
                             <div>
-                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2 transition-colors flex items-center">
+                                <label
+                                    class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-3 transition-colors flex items-center">
                                     <i class="fas fa-comment mr-2 text-emerald-600"></i>Description
                                 </label>
                                 <textarea id="memoryDescription" name="description" rows="3"
-                                    class="w-full px-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors resize-none"
+                                    class="w-full px-4 py-3 border-2 border-slate-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors resize-none font-medium"
                                     placeholder="Describe this memory..."></textarea>
                             </div>
 
                             <!-- Photo Upload -->
                             <div>
-                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2 transition-colors flex items-center">
+                                <label
+                                    class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-3 transition-colors flex items-center">
                                     <i class="fas fa-camera mr-2 text-emerald-600"></i>Photo *
                                 </label>
                                 <div class="relative">
                                     <input type="file" id="memoryPhoto" name="photo" accept="image/*" required
-                                        class="w-full px-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors file:mr-3 file:py-1 file:px-3 file:rounded-full file:border-0 file:text-sm file:font-medium file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
+                                        class="w-full px-4 py-3 border-2 border-slate-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-bold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100 file:transition-colors">
                                 </div>
-                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">JPG, PNG or WebP (max 10MB)</p>
-                                
+                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">JPG, PNG or WebP
+                                    (max 10MB)</p>
+
                                 <!-- Photo Preview -->
-                                <div id="photoPreview" class="hidden mt-3">
+                                <div id="photoPreview" class="hidden mt-4">
                                     <div class="relative inline-block">
-                                        <img id="previewImage" src="" alt="Preview" 
-                                             class="w-full max-w-48 h-32 object-cover rounded-lg border border-slate-200 dark:border-slate-600 shadow-sm">
-                                        <button type="button" id="removePreview" 
-                                                class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600 transition-colors">
+                                        <img id="previewImage" src="/placeholder.svg" alt="Preview"
+                                            class="w-full max-w-48 h-32 object-cover rounded-xl border-2 border-slate-200 dark:border-slate-600 shadow-lg">
+                                        <button type="button" id="removePreview"
+                                            class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-7 h-7 flex items-center justify-center text-xs hover:bg-red-600 transition-colors shadow-lg font-bold">
                                             <i class="fas fa-times"></i>
                                         </button>
                                     </div>
-                                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Preview of selected photo</p>
+                                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 font-medium">Preview of
+                                        selected photo</p>
                                 </div>
                             </div>
 
                             <!-- Friends/Tags -->
                             <div>
-                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2 transition-colors flex items-center">
+                                <label
+                                    class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-3 transition-colors flex items-center">
                                     <i class="fas fa-users mr-2 text-emerald-600"></i>Friends/Tags
                                 </label>
                                 <input type="text" id="memoryFriends" name="friends"
-                                    class="w-full px-3 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors"
+                                    class="w-full px-4 py-3 border-2 border-slate-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100 transition-colors font-medium"
                                     placeholder="Sarah, Mike, adventure (comma separated)">
                             </div>
                         </form>
                     </div>
 
                     <!-- Fixed Footer with Action Buttons -->
-                    <div class="flex space-x-3 p-5 pt-3 bg-white dark:bg-slate-700 border-t border-slate-200 dark:border-slate-600 flex-shrink-0">
+                    <div
+                        class="flex space-x-3 p-6 pt-4 bg-gradient-to-r from-white to-emerald-50 dark:from-slate-700 dark:to-slate-600 border-t-2 border-slate-200 dark:border-slate-600 flex-shrink-0">
                         <button type="submit" form="addMemoryForm"
-                            class="flex-1 bg-emerald-600 text-white py-2.5 px-4 rounded-lg font-medium hover:bg-emerald-700 focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 text-sm transition-colors flex items-center justify-center">
+                            class="flex-1 bg-gradient-to-r from-emerald-600 to-teal-600 text-white py-3 px-4 rounded-xl font-bold hover:from-emerald-700 hover:to-teal-700 focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 text-sm transition-all duration-300 flex items-center justify-center shadow-lg hover:scale-105">
                             <i class="fas fa-plus mr-2"></i>Add Memory
                         </button>
                         <button type="button" id="cancelMemoryBtn"
-                            class="px-4 py-2.5 border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-lg font-medium hover:bg-slate-50 dark:hover:bg-slate-600 focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-sm transition-colors">
+                            class="px-5 py-3 border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 rounded-xl font-bold hover:bg-slate-50 dark:hover:bg-slate-600 focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-sm transition-all duration-300">
                             Cancel
                         </button>
                     </div>
                 </div>
 
-                <!-- I didn't feel the need of this block, below. But uncomment if u like it -->
-                <!-- Photo Cards Container -->
-                <!-- <div id="photoCardsContainer"
-                    class="absolute top-4 left-4 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl p-4 w-96 max-w-[calc(100vw-2rem)] hidden transition-all duration-300 transform -translate-x-full opacity-0 shadow-2xl z-[1000] max-h-[80vh] overflow-y-auto">
-                    <div class="flex items-center justify-between mb-4 sticky top-0 bg-white dark:bg-slate-700 pb-2 border-b border-slate-200 dark:border-slate-600">
-                        <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-100 transition-colors flex items-center">
-                            <i class="fas fa-images mr-2 text-emerald-600"></i>
-                            Memories at this location
-                        </h3>
-                        <button id="closeCardsBtn"
-                            class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition-colors p-1">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    </div>
-                    
-                    <div id="photoCardsList" class="space-y-4">
-                    </div>
-                </div> -->
-
                 <!-- Loading Spinner -->
                 <div id="loadingSpinner"
-                    class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
-                    <div class="bg-white dark:bg-slate-800 rounded-lg p-4 flex items-center space-x-3">
-                        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-emerald-600"></div>
-                        <span class="text-slate-800 dark:text-slate-100">Uploading memory...</span>
+                    class="absolute inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center hidden">
+                    <div
+                        class="bg-white dark:bg-slate-800 rounded-2xl p-6 flex items-center space-x-4 shadow-2xl border-2 border-slate-200 dark:border-slate-700">
+                        <div class="animate-spin rounded-full h-8 w-8 border-4 border-emerald-200 border-t-emerald-600">
+                        </div>
+                        <span class="text-slate-800 dark:text-slate-100 font-bold text-lg">Uploading memory...</span>
                     </div>
                 </div>
 
@@ -556,8 +642,9 @@ <h3 class="text-lg font-semibold text-slate-800 dark:text-slate-100 transition-c
         </div>
     </div>
 
-    <div id="messageContainer" class="fixed top-20 right-4 z-[60] space-y-2"></div>
+    <div id="messageContainer" class="fixed top-24 right-6 z-[60] space-y-3"></div>
 
 </body>
 <script src="./../../dist/main.js"></script>
-</html>
+
+</html>
\ No newline at end of file