diff --git a/client/src/components/Topbar.svelte b/client/src/components/Topbar.svelte
index 166059a..84f2845 100644
--- a/client/src/components/Topbar.svelte
+++ b/client/src/components/Topbar.svelte
@@ -7,13 +7,12 @@
     updateSearchTerm
   } from "../stores/searchStore.js";
 
-  import avatarSrc from "../assets/avatar.png";
   import { clearTokens } from "../utils/api.js";
 
   const dispatch = createEventDispatcher();
   export let placeholder = "";
-  // Örnek avatar (yerel dosya)
-  export let avatarUrl = avatarSrc;
+  // Avatar opsiyonel; yoksa placeholder ikon gösterilir
+  export let avatarUrl = null;
   let showAvatarMenu = false;
   let avatarWrap;
 
@@ -86,7 +85,9 @@
       {#if avatarUrl}
         <img src={avatarUrl} alt="Avatar" loading="lazy" />
       {:else}
-        <i class="fa-solid fa-user"></i>
+        <div class="placeholder">
+          <i class="fa-regular fa-user"></i>
+        </div>
       {/if}
     </button>
 
@@ -157,8 +158,8 @@
   }
 
   .avatar {
-    border: none;
-    background: #f2f2f2;
+    border: 0.5px solid var(--border, #dcdcdc);
+    background: #f7f8fa;
     border-radius: 10px;
     width: 42px;
     height: 42px;
@@ -177,8 +178,16 @@
     border-radius: 10px;
   }
 
-  .avatar i {
-    color: #666;
+  .avatar .placeholder {
+    width: 100%;
+    height: 100%;
+    background: #eef1f6;
+    border: 0.5px solid var(--border, #dcdcdc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    color: #2c3e50;
     font-size: 18px;
   }