diff --git a/src/components/navigationBar/AuthenticatedComponents.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
index 268e5c6..41ed528 100644
--- a/src/components/navigationBar/AuthenticatedComponents.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -16,9 +16,10 @@ import { useUserRole } from "@/hooks/useUserRole";
 
 interface AuthenticatedComponentsProps {
   uid: string;
+  avatarUrl?: string | null;
 }
 
-export const AuthenticatedComponents = ({ uid }: AuthenticatedComponentsProps) => {
+export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedComponentsProps) => {
   const notifications = 100;
   const displayValue = notifications >= 100 ? "..." : notifications;
   const { data } = useUserRole();
@@ -44,7 +45,12 @@ export const AuthenticatedComponents = ({ uid }: AuthenticatedComponentsProps) =
         <DropdownMenuTrigger asChild>
           <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
             <Avatar>
-              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
+              {avatarUrl ? (
+                <AvatarImage src={avatarUrl} alt="profile" />
+              ) : (
+                <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" alt="profile" />
+              )}
+
               <AvatarFallback>1</AvatarFallback>
             </Avatar>
           </Button>
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index 249d2fe..c90f5cb 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -17,6 +17,7 @@ import { SearchBar } from "./serchBar";
 import { AuthenticatedComponents } from "./AuthenticatedComponents";
 import { UnAuthenticatedComponents } from "./UnAuthenticatedComponents";
 
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import { getUserId } from "@/lib/supabase/actions/getUserId";
 
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
@@ -44,8 +45,9 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
 ListItem.displayName = "ListItem";
 
 export async function NavigationBar() {
+  const client = createSupabaseClient();
   const userId = await getUserId();
-
+  const { data: avatarUrl } = await client.from("profiles").select("avatar_url").eq("id", userId).single();
   const businessComponents = [
     {
       title: "Business",
@@ -119,7 +121,11 @@ export async function NavigationBar() {
                 <ThemeToggle />
               </div>
               <Separator orientation="vertical" className="mx-3" />
-              {userId ? <AuthenticatedComponents uid={userId} /> : <UnAuthenticatedComponents />}
+              {userId ? (
+                <AuthenticatedComponents uid={userId} avatarUrl={avatarUrl?.avatar_url} />
+              ) : (
+                <UnAuthenticatedComponents />
+              )}
             </div>
           </div>
         </div>