diff --git a/frontend/components/global/Avatar.vue b/frontend/components/global/Avatar.vue
index f6c9d29..54ab6ca 100644
--- a/frontend/components/global/Avatar.vue
+++ b/frontend/components/global/Avatar.vue
@@ -8,6 +8,7 @@ import { useImage } from "@vueuse/core";
 type Props = {
     src: string | null | undefined;
     alt: string;
+    iconClass?: string;
 };
 
 // props
@@ -18,7 +19,7 @@ const { src } = toRefs(props);
 
 // state
 
-const { isLoading } = useImage({ src: src.value ?? '' });
+const { isLoading } = useImage({ src: src.value ?? "" });
 </script>
 
 <template>
@@ -41,7 +42,12 @@ const { isLoading } = useImage({ src: src.value ?? '' });
                 :delay-ms="600"
             >
                 <div class="size-full rounded-full flex-center">
-                    <Icon name="ci:profile" size="16" class="**:stroke-black" />
+                    <Icon
+                        name="ci:profile"
+                        size="16"
+                        class="**:stroke-black"
+                        :class="iconClass"
+                    />
                 </div>
             </AvatarFallback>
         </template>
diff --git a/frontend/components/global/Header.vue b/frontend/components/global/Header.vue
index 57fde5f..681cb0d 100644
--- a/frontend/components/global/Header.vue
+++ b/frontend/components/global/Header.vue
@@ -32,7 +32,10 @@ const isHomePage = computed(() => route.path === "/");
         <div
             class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0"
         >
-            <button class="md:hidden header-navbar-item" @click="isSideDrawerOpen = true">
+            <button
+                class="md:hidden header-navbar-item"
+                @click="isSideDrawerOpen = true"
+            >
                 <Icon name="humbleicons:bars" size="28" />
             </button>
             <div class="max-md:hidden flex items-center gap-8 lg:gap-16">
@@ -46,6 +49,7 @@ const isHomePage = computed(() => route.path === "/");
                         >
                             <Avatar
                                 class="!size-7"
+                                iconClass="header-navbar-item"
                                 :src="account.profile_photo"
                                 :alt="
                                     account.first_name && account.last_name
@@ -61,12 +65,15 @@ const isHomePage = computed(() => route.path === "/");
                         <NuxtLink to="/signin" class="flex-center">
                             <Icon
                                 name="ci:profile"
-                                class="**:stroke-black size-5 lg:size-6"
+                                class="**:stroke-black size-5 lg:size-6 header-navbar-item"
                             />
                         </NuxtLink>
                     </Tooltip>
                     <Tooltip title="محصولات">
-                        <NuxtLink to="/products" class="flex-center header-navbar-item">
+                        <NuxtLink
+                            to="/products"
+                            class="flex-center header-navbar-item"
+                        >
                             <Icon
                                 name="ci:search"
                                 class="**:stroke-black size-4.5 lg:size-[21px]"
@@ -106,7 +113,7 @@ const isHomePage = computed(() => route.path === "/");
             <div class="header-navbar-item">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 lg:h-6 "
+                    class="h-5 lg:h-6"
                     fill="none"
                     viewBox="0 0 220 40"
                 >