diff --git a/index.html b/index.html
index c66b72e..18cf28d 100644
--- a/index.html
+++ b/index.html
@@ -33,68 +33,68 @@
         }
     </style>
 </head>
-<body class="bg-gray-50">
+<body class="bg-gray-100 font-sans">
     <!-- Navigation -->
-    <nav class="bg-white shadow-md sticky top-0 z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-gray-200">
+        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between items-center h-16">
                 <div class="flex items-center">
                     <h1 class="text-2xl font-bold text-indigo-600">ZenCom</h1>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <button onclick="showCreatePost()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
+                    <button onclick="showCreatePost()" class="bg-indigo-600 text-white px-4 py-2 rounded-full font-semibold hover:bg-indigo-700 transition-all duration-300 transform hover:scale-105 flex items-center shadow-md">
                         <i class="fas fa-plus mr-2"></i>Buat Postingan
                     </button>
                     <div id="userMenu" class="hidden">
                         <div class="relative">
-                            <button onclick="toggleUserMenu()" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
-                                <img id="userAvatar" src="https://picsum.photos/seed/user/40/40" alt="User" class="w-8 h-8 rounded-full">
-                                <span id="userName">User</span>
-                                <i class="fas fa-chevron-down text-sm"></i>
+                            <button onclick="toggleUserMenu()" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 transition">
+                                <img id="userAvatar" src="https://picsum.photos/seed/user/40/40" alt="User" class="w-9 h-9 rounded-full border-2 border-indigo-200 hover:border-indigo-400 transition">
+                                <span id="userName" class="font-semibold">User</span>
+                                <i class="fas fa-chevron-down text-sm transition-transform duration-300"></i>
                             </button>
-                            <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2">
-                                <a href="#" onclick="showProfile()" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Profil</a>
-                                <a href="#" onclick="logout()" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Keluar</a>
+                            <div id="dropdownMenu" class="hidden absolute right-0 mt-3 w-48 bg-white rounded-lg shadow-xl py-2 border border-gray-100 fade-in">
+                                <a href="#" onclick="showProfile()" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition">Profil</a>
+                                <a href="#" onclick="logout()" class="block px-4 py-2 text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition">Keluar</a>
                             </div>
                         </div>
                     </div>
-                    <button id="loginBtn" onclick="showLogin()" class="text-gray-700 hover:text-gray-900">Masuk</button>
+                    <button id="loginBtn" onclick="showLogin()" class="font-semibold text-gray-700 hover:text-indigo-600 transition">Masuk</button>
                 </div>
             </div>
         </div>
     </nav>
 
     <!-- Main Content -->
-    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <!-- Auth Modals -->
-        <div id="authModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 fade-in">
+        <div id="authModal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
+            <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 fade-in border border-gray-200">
                 <div class="flex justify-between items-center mb-6">
-                    <h2 id="authTitle" class="text-2xl font-bold">Masuk</h2>
-                    <button onclick="closeAuthModal()" class="text-gray-500 hover:text-gray-700">
+                    <h2 id="authTitle" class="text-2xl font-bold text-gray-800">Masuk</h2>
+                    <button onclick="closeAuthModal()" class="text-gray-400 hover:text-gray-700 transition">
                         <i class="fas fa-times text-xl"></i>
                     </button>
                 </div>
                 <form id="authForm" onsubmit="handleAuth(event)">
                     <div id="nameField" class="hidden mb-4">
-                        <label class="block text-gray-700 mb-2">Nama Lengkap</label>
-                        <input type="text" id="fullName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        <label class="block text-gray-700 mb-2 font-semibold">Nama Lengkap</label>
+                        <input type="text" id="fullName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-400 transition" required>
                     </div>
                     <div class="mb-4">
-                        <label class="block text-gray-700 mb-2">Email</label>
-                        <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        <label class="block text-gray-700 mb-2 font-semibold">Email</label>
+                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-400 transition" required>
                     </div>
                     <div class="mb-6">
-                        <label class="block text-gray-700 mb-2">Password</label>
-                        <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        <label class="block text-gray-700 mb-2 font-semibold">Password</label>
+                        <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-400 transition" required>
                     </div>
-                    <button type="submit" id="authSubmitBtn" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
+                    <button type="submit" id="authSubmitBtn" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-semibold shadow-md transform hover:scale-105">
                         <span id="authBtnText">Masuk</span>
                     </button>
                 </form>
-                <p class="mt-4 text-center text-gray-600">
+                <p class="mt-6 text-center text-gray-600">
                     <span id="authSwitchText">Belum punya akun?</span>
-                    <button onclick="switchAuthMode()" class="text-indigo-600 hover:underline ml-1">
+                    <button onclick="switchAuthMode()" class="text-indigo-600 hover:underline ml-1 font-semibold">
                         <span id="authSwitchBtn">Daftar</span>
                     </button>
                 </p>
@@ -102,24 +102,24 @@ <h2 id="authTitle" class="text-2xl font-bold">Masuk</h2>
         </div>
 
         <!-- Create Post Modal -->
-        <div id="createPostModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-            <div class="bg-white rounded-lg p-8 max-w-2xl w-full mx-4 fade-in">
+        <div id="createPostModal" class="hidden fixed inset-0 bg-black/60 flex items-center justify-center z-50 backdrop-blur-sm">
+            <div class="bg-white rounded-xl shadow-2xl p-8 max-w-2xl w-full mx-4 fade-in border border-gray-200">
                 <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-2xl font-bold">Buat Postingan Baru</h2>
-                    <button onclick="closeCreatePost()" class="text-gray-500 hover:text-gray-700">
+                    <h2 class="text-2xl font-bold text-gray-800">Buat Postingan Baru</h2>
+                    <button onclick="closeCreatePost()" class="text-gray-400 hover:text-gray-700 transition">
                         <i class="fas fa-times text-xl"></i>
                     </button>
                 </div>
                 <form onsubmit="createPost(event)">
                     <div class="mb-4">
-                        <textarea id="postContent" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Apa yang Anda pikirkan?" required></textarea>
+                        <textarea id="postContent" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-400 transition" placeholder="Apa yang Anda pikirkan, ${currentUser?.user_metadata?.full_name || 'User'}?" required></textarea>
                     </div>
                     <div class="mb-4">
-                        <label class="block text-gray-700 mb-2">Upload Gambar (Opsional)</label>
-                        <input type="file" id="postImage" accept="image/*" class="w-full" onchange="previewImage(event)">
-                        <img id="imagePreview" class="hidden mt-4 max-w-full rounded-lg">
+                        <label class="block text-gray-700 mb-2 font-semibold">Upload Gambar (Opsional)</label>
+                        <input type="file" id="postImage" accept="image/*" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" onchange="previewImage(event)">
+                        <img id="imagePreview" class="hidden mt-4 max-h-60 w-auto rounded-lg shadow-md">
                     </div>
-                    <button type="submit" id="createPostBtn" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
+                    <button type="submit" id="createPostBtn" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-semibold shadow-md transform hover:scale-105">
                         Posting
                     </button>
                 </form>
@@ -127,7 +127,7 @@ <h2 class="text-2xl font-bold">Buat Postingan Baru</h2>
         </div>
 
         <!-- Posts Feed -->
-        <div id="postsContainer" class="space-y-6">
+        <div id="postsContainer" class="space-y-6 max-w-2xl mx-auto">
             <!-- Posts will be dynamically inserted here -->
         </div>
 
@@ -147,8 +147,8 @@ <h2 class="text-2xl font-bold">Buat Postingan Baru</h2>
         // --------------------------------------------------------------------------------
         // SUPABASE INITIALIZATION
         // --------------------------------------------------------------------------------
-        const SUPABASE_URL = 'https://spjdrgckbnjnctfgereg.supabase.co';
-        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNwamRyZ2NrYm5qbmN0ZmdlcmVnIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTg2Mjg1NjQsImV4cCI6MjA3NDIwNDU2NH0.7VDu-KvNdRrxcRtX6SvhUPEJqVfLeDSGN9yqazii78w';
+        const SUPABASE_URL = 'https://xalacqxnlhjelpcqexle.supabase.co';
+        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhhbGFjcXhubGhqZWxwY3FleGxlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTg5NDYwNzIsImV4cCI6MjA3NDUyMjA3Mn0.t4eaDIvIxkZQVg5pDIg_Kt5_xg2pIG7sfdsmL6poMjQ';
 
         const { createClient } = supabase;
         const db = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
@@ -186,17 +186,28 @@ <h2 class="text-2xl font-bold">Buat Postingan Baru</h2>
             const loginBtn = document.getElementById('loginBtn');
 
             if (user) {
+                // Immediately show the user menu and hide the login button for a responsive feel.
+                userMenu.classList.remove('hidden');
+                loginBtn.classList.add('hidden');
+                document.getElementById('userName').textContent = 'Memuat...'; // Placeholder text
+                document.getElementById('userAvatar').src = `https://picsum.photos/seed/${user.id}/40/40`;
+
                 const { data: profile, error } = await db
                     .from('profiles')
                     .select('full_name, avatar_url')
                     .eq('id', user.id)
                     .single();
 
+                if (error && error.code !== 'PGRST116') { // PGRST116 means no rows found, which is okay
+                    console.error('Error fetching profile:', error);
+                }
+
                 if (profile) {
-                    userMenu.classList.remove('hidden');
-                    loginBtn.classList.add('hidden');
                     document.getElementById('userName').textContent = profile.full_name || user.email;
                     document.getElementById('userAvatar').src = profile.avatar_url || `https://picsum.photos/seed/${user.id}/40/40`;
+                } else {
+                    // Fallback if profile is not available
+                    document.getElementById('userName').textContent = user.email;
                 }
             } else {
                 userMenu.classList.add('hidden');
@@ -423,7 +434,7 @@ <h2 class="text-2xl font-bold">Buat Postingan Baru</h2>
 
         function createPostElement(post) {
             const div = document.createElement('div');
-            div.className = 'bg-white rounded-lg shadow-md p-6 post-card fade-in';
+            div.className = 'bg-white rounded-xl shadow-md border border-gray-200 p-6 post-card fade-in';
             
             const isLiked = currentUser && post.likes.some(like => like.user_id === currentUser.id);
             const likeCount = post.likes.length;
@@ -431,52 +442,53 @@ <h2 class="text-2xl font-bold">Buat Postingan Baru</h2>
             
             div.innerHTML = `
                 <div class="flex items-start space-x-4 mb-4">
-                    <img src="${post.profiles.avatar_url || `https://picsum.photos/seed/${post.user_id}/40/40`}" alt="${post.profiles.full_name}" class="w-12 h-12 rounded-full">
+                    <img src="${post.profiles.avatar_url || `https://picsum.photos/seed/${post.user_id}/50/50`}" alt="${post.profiles.full_name}" class="w-12 h-12 rounded-full border-2 border-gray-200">
                     <div class="flex-1">
-                        <h3 class="font-semibold text-gray-900">${post.profiles.full_name || 'Anonymous'}</h3>
+                        <h3 class="font-bold text-gray-900">${post.profiles.full_name || 'Anonymous'}</h3>
                         <p class="text-sm text-gray-500">${formatDate(post.created_at)}</p>
                     </div>
                 </div>
-                <p class="text-gray-800 mb-4 whitespace-pre-wrap">${post.content}</p>
-                ${post.image_url ? `<img src="${post.image_url}" alt="Post image" class="w-full rounded-lg mb-4">` : ''}
-                <div class="flex items-center justify-between pt-4 border-t">
+                <p class="text-gray-800 mb-4 whitespace-pre-wrap text-base">${post.content}</p>
+                ${post.image_url ? `<img src="${post.image_url}" alt="Post image" class="w-full rounded-lg mb-4 border border-gray-200 shadow-sm">` : ''}
+                <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                     <div class="flex items-center space-x-6">
-                        <button onclick="toggleLike(${post.id})" class="flex items-center space-x-2 text-gray-600 hover:text-red-600 transition">
-                            <i class="fas fa-heart ${isLiked ? 'text-red-600' : ''}"></i>
-                            <span id="like-count-${post.id}">${likeCount}</span>
+                        <button onclick="toggleLike(event, ${post.id})" class="flex items-center space-x-2 text-gray-500 hover:text-red-500 transition group">
+                            <i class="fas fa-heart ${isLiked ? 'text-red-500' : 'group-hover:text-red-500'}"></i>
+                            <span id="like-count-${post.id}" class="font-semibold">${likeCount}</span>
                         </button>
-                        <button onclick="toggleComments(${post.id})" class="flex items-center space-x-2 text-gray-600 hover:text-blue-600 transition">
+                        <button onclick="toggleComments(${post.id})" class="flex items-center space-x-2 text-gray-500 hover:text-blue-500 transition">
                             <i class="fas fa-comment"></i>
-                            <span>${commentCount}</span>
+                            <span class="font-semibold">${commentCount}</span>
                         </button>
-                        <button onclick="sharePost(${post.id}, '${post.content.substring(0, 100)}')" class="flex items-center space-x-2 text-gray-600 hover:text-green-600 transition">
+                        <button onclick="sharePost(${post.id}, '${post.content.substring(0, 100)}')" class="flex items-center space-x-2 text-gray-500 hover:text-green-500 transition">
                             <i class="fas fa-share"></i>
                         </button>
                     </div>
-                    ${post.image_url ? `<a href="${post.image_url}" download="zencom-post-${post.id}.jpg" target="_blank" class="text-gray-600 hover:text-indigo-600 transition">
+                    ${post.image_url ? `<a href="${post.image_url}" download="zencom-post-${post.id}.jpg" target="_blank" class="text-gray-500 hover:text-indigo-600 transition" title="Download gambar">
                         <i class="fas fa-download"></i>
                     </a>` : ''}
                 </div>
-                <div id="comments-${post.id}" class="hidden mt-4 pt-4 border-t">
-                    <div class="mb-4 space-y-3">
+                <div id="comments-${post.id}" class="hidden mt-4 pt-4 border-t border-gray-200">
+                    <div class="mb-4 space-y-4">
                         ${post.comments.map(comment => `
                             <div class="flex items-start space-x-3">
-                                <img src="${comment.profiles.avatar_url || `https://picsum.photos/seed/${comment.user_id}/40/40`}" alt="${comment.profiles.full_name}" class="w-8 h-8 rounded-full">
-                                <div class="flex-1 bg-gray-100 rounded-lg p-2">
-                                    <p class="font-semibold text-sm">${comment.profiles.full_name || 'Anonymous'}</p>
+                                <img src="${comment.profiles.avatar_url || `https://picsum.photos/seed/${comment.user_id}/40/40`}" alt="${comment.profiles.full_name}" class="w-9 h-9 rounded-full">
+                                <div class="flex-1 bg-gray-100 rounded-lg p-3">
+                                    <p class="font-semibold text-sm text-gray-800">${comment.profiles.full_name || 'Anonymous'}</p>
                                     <p class="text-gray-700 text-sm">${comment.content}</p>
                                 </div>
                             </div>
                         `).join('')}
                     </div>
                     ${currentUser ? `
-                        <form onsubmit="addComment(event, ${post.id})" class="flex space-x-2">
-                            <input type="text" id="comment-input-${post.id}" placeholder="Tulis komentar..." class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
-                            <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
-                                <i class="fas fa-paper-plane"></i>
+                        <form onsubmit="addComment(event, ${post.id})" class="flex space-x-3 items-center">
+                            <img src="${document.getElementById('userAvatar').src}" class="w-9 h-9 rounded-full">
+                            <input type="text" id="comment-input-${post.id}" placeholder="Tulis komentar..." class="flex-1 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-400 transition" required>
+                            <button type="submit" class="bg-indigo-600 text-white rounded-full h-9 w-9 flex items-center justify-center hover:bg-indigo-700 transition shadow-sm">
+                                <i class="fas fa-paper-plane text-sm"></i>
                             </button>
                         </form>
-                    ` : '<p class="text-gray-500 text-sm">Silakan masuk untuk berkomentar.</p>'}
+                    ` : '<p class="text-gray-500 text-sm text-center">Silakan masuk untuk berkomentar.</p>'}
                 </div>
             `;
             
