diff --git a/src/main.js b/src/main.js
index a869b0c..c8bffc0 100755
--- a/src/main.js
+++ b/src/main.js
@@ -20,8 +20,9 @@ async function render() {
     return;
   }
 
+  // Güvenli Avatar URL
   const avatarUrl = user?.avatar
-    ? `https://pocketbase.iontalp.com/api/files/_pb_users_auth_/${user.id}/${user.avatar}?thumb=100x100`
+    ? `https://pocketbase.iontalp.com/api/files/${user.collectionId || "_pb_users_auth_"}/${user.id}/${user.avatar}?thumb=100x100`
     : null;
 
   let currentBg =
@@ -54,17 +55,17 @@ async function render() {
         selectedCity = city;
         localStorage.setItem("selected_city", city);
         render();
-      }
+      },
     );
   } else if (activeTab === "kaza") {
-    currentPage = renderKaza(pb);
+    currentPage = await renderKaza(pb);
   } else {
-    currentPage = renderDesktop(selectedCity, pb);
+    currentPage = await renderDesktop(selectedCity, pb);
   }
 
   app.innerHTML = `
     <div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
-      <!-- Kristal Netliğinde Arka Plan (Blur Kaldırıldı) -->
+      <!-- Kristal Netliğinde Arka Plan -->
       <div class="absolute inset-0 z-0 bg-center bg-cover bg-no-repeat transition-all duration-700" 
         style="background-image: url('${currentBg}');">
       </div>
@@ -72,51 +73,59 @@ async function render() {
       <!-- İnce Netlik Katmanı -->
       <div class="absolute inset-0 z-10 bg-black/25"></div>
 
-      <!-- Sol Menü (Sidebar) -->
-      <button id="globalSidebarToggle" class="fixed top-4 left-4 z-50 bg-slate-900/80 hover:bg-slate-800 text-white p-2.5 rounded-xl transition-all border border-white/10 shadow-lg">
-        ${sidebarOpen ? "◀" : "▶"}
-      </button>
-
+      <!-- Mobil Karartma Overlay -->
       ${sidebarOpen ? `<div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-30 md:hidden"></div>` : ""}
 
-      <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0 p-6" : "w-72 -translate-x-full md:w-20 md:translate-x-0 md:p-3"} h-screen bg-slate-900/85 border-r border-white/10 flex flex-col justify-between transition-all duration-300 overflow-hidden shadow-2xl">
-        <div>
-          <div class="flex items-center justify-between mb-8 mt-2">
-            <h1 class="font-bold text-white text-xl ${sidebarOpen ? "block" : "hidden md:hidden"}">Dashboard OS</h1>
+      <!-- Sol Menü (Sidebar) -->
+      <aside id="sidebar" class="fixed md:relative z-40 md:z-30 inset-y-0 left-0 ${sidebarOpen ? "w-72 translate-x-0" : "w-72 -translate-x-full md:w-20 md:translate-x-0"} h-screen bg-slate-900/85 border-r border-white/10 flex flex-col justify-between transition-all duration-300 ease-in-out overflow-hidden shadow-2xl p-4">
+        <div class="w-full">
+          <!-- Sidebar Üst Başlık & Toggle Butonu (İç içe geçmeyi çözen kısım) -->
+          <div class="flex items-center justify-between mb-6 h-10 px-1">
+            <h1 class="font-bold text-white text-lg ${sidebarOpen ? "block" : "hidden"} transition-all truncate">İon Talp</h1>
+            <button id="globalSidebarToggle" class="bg-slate-800/80 hover:bg-slate-700 text-white w-9 h-9 rounded-xl transition-all border border-white/10 shadow-md flex items-center justify-center shrink-0 ${sidebarOpen ? "" : "mx-auto"}">
+              <span>${sidebarOpen ? "◀" : "▶"}</span>
+            </button>
           </div>
 
+          <!-- Navigasyon Menüsü (Zıplamayı önleyen sabit genişlikli ikonlar) -->
           <nav class="space-y-2 w-full">
-            <button id="navDesktop" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "desktop" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
-              <span>🏠</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Masaüstü</span>
+            <button id="navDesktop" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "desktop" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
+              <span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">🏠</span>
+              <span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Masaüstü</span>
             </button>
-            <button id="navKaza" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "kaza" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
-              <span>📿</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Kaza Namazı</span>
+            <button id="navKaza" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "kaza" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
+              <span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">📿</span>
+              <span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Kaza Namazı</span>
             </button>
-            <button id="navSettings" class="w-full flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === "settings" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
-              <span>⚙️</span> <span class="${sidebarOpen ? "block" : "hidden md:hidden"}">Ayarlar</span>
+            <button id="navSettings" class="w-full flex items-center h-12 px-3 rounded-xl font-medium transition-all ${activeTab === "settings" ? "bg-indigo-600/40 text-indigo-300 border border-indigo-500/40" : "text-slate-400 hover:text-white hover:bg-white/5"}">
+              <span class="w-6 h-6 flex items-center justify-center text-xl shrink-0">⚙️</span>
+              <span class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Ayarlar</span>
             </button>
           </nav>
         </div>
 
+        <!-- Profil ve Çıkış Alanı -->
         <div class="space-y-3 pt-4 border-t border-white/10 w-full">
-          <div id="profileBtn" class="flex items-center ${sidebarOpen ? "" : "md:justify-center"} gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
+          <div id="profileBtn" class="flex items-center h-12 px-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
             ${
               avatarUrl
-                ? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20 shadow-md shrink-0" />`
-                : `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
+                ? `<img src="${avatarUrl}" alt="Avatar" class="w-9 h-9 rounded-full object-cover border border-white/20 shadow-md shrink-0" />`
+                : `<div class="w-9 h-9 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400 shrink-0">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
             }
-            <div class="${sidebarOpen ? "block" : "hidden md:hidden"} overflow-hidden">
+            <div class="${sidebarOpen ? "opacity-100 ml-3" : "opacity-0 w-0 hidden"} transition-opacity duration-200 overflow-hidden whitespace-nowrap">
               <p class="text-sm font-medium text-white truncate">${user.name || user.username || user.email}</p>
               <p class="text-xs text-emerald-400">Çevrimiçi</p>
             </div>
           </div>
 
-          <button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 py-2.5 rounded-xl border border-rose-500/30 text-sm font-medium transition-all flex items-center justify-center gap-2">
-            <span>🚪</span> <span class="${sidebarOpen ? "inline" : "hidden md:hidden"}">Çıkış Yap</span>
+          <button id="logoutBtn" class="w-full bg-rose-500/20 text-rose-300 hover:bg-rose-500/30 h-11 rounded-xl border border-rose-500/30 text-sm font-medium transition-all flex items-center justify-center">
+            <span class="w-6 h-6 flex items-center justify-center text-base shrink-0">🚪</span>
+            <span class="${sidebarOpen ? "opacity-100 ml-2" : "opacity-0 w-0 hidden"} transition-opacity duration-200 whitespace-nowrap overflow-hidden">Çıkış Yap</span>
           </button>
         </div>
       </aside>
 
+      <!-- Ana İçerik -->
       <main id="mainContent" class="relative z-20 flex-1 h-screen p-4 md:p-8 flex items-center justify-center overflow-y-auto">
         ${currentPage.html}
       </main>
@@ -124,21 +133,35 @@ async function render() {
   `;
 
   const mainContent = document.getElementById("mainContent");
-  currentPage.initEvents(mainContent);
 
-  document.getElementById("navDesktop")?.addEventListener("click", () => { activeTab = "desktop"; render(); });
-  document.getElementById("navKaza")?.addEventListener("click", () => { activeTab = "kaza"; render(); });
-  document.getElementById("navSettings")?.addEventListener("click", () => { activeTab = "settings"; render(); });
+  if (currentPage.initEvents) {
+    currentPage.initEvents(mainContent);
+  }
+
+  document.getElementById("navDesktop")?.addEventListener("click", () => {
+    activeTab = "desktop";
+    render();
+  });
+  document.getElementById("navKaza")?.addEventListener("click", () => {
+    activeTab = "kaza";
+    render();
+  });
+  document.getElementById("navSettings")?.addEventListener("click", () => {
+    activeTab = "settings";
+    render();
+  });
 
   document.getElementById("logoutBtn")?.addEventListener("click", () => {
     pb.authStore.clear();
     render();
   });
 
-  document.getElementById("globalSidebarToggle")?.addEventListener("click", () => {
-    sidebarOpen = !sidebarOpen;
-    render();
-  });
+  document
+    .getElementById("globalSidebarToggle")
+    ?.addEventListener("click", () => {
+      sidebarOpen = !sidebarOpen;
+      render();
+    });
 
   document.getElementById("sidebarOverlay")?.addEventListener("click", () => {
     sidebarOpen = false;
@@ -171,7 +194,7 @@ function renderLogin() {
         .collection("users")
         .authWithPassword(
           document.getElementById("identity").value,
-          document.getElementById("password").value
+          document.getElementById("password").value,
         );
       render();
     } catch {
@@ -180,4 +203,5 @@ function renderLogin() {
   });
 }
 
-render();
\ No newline at end of file
+// Uygulamayı başlat
+render();