diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index fd58500..7dd77df 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/app/layouts/admin/navbar.tsx
@@ -3,6 +3,7 @@ import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
 import { NotificationIcon } from '~/components/icons/notification'
+import { ProfileIcon } from '~/components/icons/profile'
 import { APP } from '~/configs/meta'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -27,11 +28,16 @@ export const Navbar = () => {
         <Popover className="relative">
           <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
             <div className="flex items-center">
-              <img
-                src={staffData?.profile_picture}
-                alt={staffData?.name}
-                className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
-              />
+              {staffData?.profile_picture === '' ? (
+                <ProfileIcon className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
+              ) : (
+                <img
+                  src={staffData?.profile_picture}
+                  alt={staffData?.name}
+                  className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+                />
+              )}
+
               <span className="text-xs">{staffData?.name}</span>
             </div>
             <ChevronIcon className="opacity-50" />