diff --git a/app/Models/System/User.php b/app/Models/System/User.php
index 7213a50..94b2296 100644
--- a/app/Models/System/User.php
+++ b/app/Models/System/User.php
@@ -82,4 +82,17 @@ class User extends Authenticatable
     {
         return !is_null($this->company_id);
     }
+
+    /**
+     * Get the URL for the user's avatar.
+     */
+    public function getAvatarUrlAttribute(): string
+    {
+        if ($this->avatar) {
+            return \Illuminate\Support\Facades\Storage::disk('public')->url($this->avatar);
+        }
+
+        // Return a default UI Avatar if no avatar is set
+        return "https://ui-avatars.com/api/?name=" . urlencode($this->name) . "&color=7F9CF5&background=EBF4FF";
+    }
 }
diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
index c64bf64..6590d18 100644
--- a/resources/views/layouts/navigation.blade.php
+++ b/resources/views/layouts/navigation.blade.php
@@ -22,8 +22,13 @@
             <div class="hidden sm:flex sm:items-center sm:ms-6">
                 <x-dropdown align="right" width="48">
                     <x-slot name="trigger">
-                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
-                            <div>{{ Auth::user()->name }}</div>
+                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
+                                x-data="{ avatarUrl: '{{ Auth::user()->avatar_url }}' }"
+                                @avatar-updated.window="avatarUrl = $event.detail.url">
+                            <div class="flex items-center gap-x-3">
+                                <img :src="avatarUrl" class="size-8 rounded-full object-cover ring-2 ring-gray-100 dark:ring-gray-700 shadow-sm" alt="{{ Auth::user()->name }}">
+                                <div>{{ Auth::user()->name }}</div>
+                            </div>
 
                             <div class="ms-1">
                                 <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -74,9 +79,16 @@
 
         <!-- Responsive Settings Options -->
         <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600">
-            <div class="px-4">
-                <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
-                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
+            <div class="px-4 flex items-center gap-x-3">
+                <div class="shrink-0" 
+                     x-data="{ avatarUrl: '{{ Auth::user()->avatar_url }}' }"
+                     @avatar-updated.window="avatarUrl = $event.detail.url">
+                    <img :src="avatarUrl" class="size-10 rounded-full object-cover ring-2 ring-gray-100 dark:ring-gray-700 shadow-sm" alt="{{ Auth::user()->name }}">
+                </div>
+                <div>
+                    <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ Auth::user()->name }}</div>
+                    <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
+                </div>
             </div>
 
             <div class="mt-3 space-y-1">