diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index 143d110..72ab2b3 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/app/layouts/admin/navbar.tsx
@@ -2,6 +2,7 @@ import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
 import { ChevronIcon } from '~/components/icons/chevron'
+import { ProfileIcon } from '~/components/icons/profile'
 import { APP } from '~/configs/meta'
 import type { loader } from '~/routes/_admin.lg-admin'
 
@@ -26,11 +27,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" />