diff --git a/src/components/icons/HomeIcon.tsx b/src/components/icons/HomeIcon.tsx
new file mode 100644
index 0000000..0807bfd
--- /dev/null
+++ b/src/components/icons/HomeIcon.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+type Props = React.SVGProps<SVGSVGElement>;
+
+const HomeIcon: React.FC<Props> = ({ ...props }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width='24'
+            height='24'
+            viewBox="0 0 24 24"
+            fill="none"
+            {...props}
+        >
+            <path d="M17.79 22.75H6.21c-2.74 0-4.96-2.23-4.96-4.97v-7.41c0-1.36.84-3.07 1.92-3.91l5.39-4.2C10.18 1 12.77.94 14.45 2.12l6.18 4.33c1.19.83 2.12 2.61 2.12 4.06v7.28c0 2.73-2.22 4.96-4.96 4.96ZM9.48 3.46-3.46v-7.28c0-.96-.69-2.29-1.48-2.83l-6.18-4.33c-1.14-.8-3.02-.76-4.11.09Z"></path>
+            <path d="M12 18.75c-.41 0-.75-.34-.75-.75v-3c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75Z"></path>
+        </svg>
+    );
+};
+
+export default HomeIcon;
diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx
index 6c9f227..dd4c6dd 100644
--- a/src/components/navigation/BottomNavBar.tsx
+++ b/src/components/navigation/BottomNavBar.tsx
@@ -1,18 +1,20 @@
 import React from 'react'
 import BottomNavLink from './BottomNavLink'
 import BottomNavHighlightLink from './BottomNavLinkBig'
-import HomeHashtagIcon from '../icons/HomeHashtagIcon'
 import PagerIcon from '../icons/PagerIcon'
 import NotifiBoardIcon from '../icons/NotifBoardIcon'
 import BagIcon from '../icons/BagIcon'
 import HeartIcon from '../icons/HeartIcon'
-import { useParams } from 'next/navigation'
+import { useParams, usePathname } from 'next/navigation'
+import HomeIcon from '../icons/HomeIcon'
 
 type Props = object
 
 function BottomNavBar({ }: Props) {
   const params = useParams();
   const { name } = params;
+  const pathname = usePathname();
+  const isHomeRoute = pathname === `/${name}`;
 
   return (
     <div className="fixed bottom-0 left-0 w-full bg-transparent">
@@ -37,9 +39,16 @@ function BottomNavBar({ }: Props) {
               className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
             >
               <BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
-              <BottomNavLink href={`/${name}`} icon={<PagerIcon />} value="پیجر" />
-              <BottomNavHighlightLink href={`/${name}`} icon={<HomeHashtagIcon />} value="منو" />
-              <BottomNavLink href={`/${name}`} icon={<NotifiBoardIcon />} value="اعلان ها" />
+              <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon />} value="پیجر" />
+              <BottomNavHighlightLink
+                href={`/${name}`}
+                icon={
+                  <HomeIcon className='transition-all duration-200'
+                    fill={isHomeRoute ? 'white' : 'transparent'}
+                    stroke={isHomeRoute ? 'black' : 'white'}
+                    strokeWidth={1} />}
+                value="منو" />
+              <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon />} value="اعلان ها" />
               <BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
             </div>
           </foreignObject>