diff --git a/components/Breadcrumps/index.tsx b/components/Breadcrumbs/index.tsx
similarity index 100%
rename from components/Breadcrumps/index.tsx
rename to components/Breadcrumbs/index.tsx
diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
index 416185f3d..3955bb27a 100644
--- a/components/TopBar/TopBar.tsx
+++ b/components/TopBar/TopBar.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
 import { RxSlash } from 'react-icons/rx'
-import { TiHomeOutline } from 'react-icons/ti'
+import HomeIcon from 'assets/icons/svg/HomeIcon.svg'
 import { FaInfoCircle } from 'react-icons/fa'
 import { IoIosArrowBack } from 'react-icons/io'
 import categoryDescriptions from './CategoryDescriptions'
@@ -49,7 +49,7 @@ export const TopBar: FC<TopBarProps> = ({}) => {
         href={'/'}
         className="gap-x-2 items-center bg-[#EDEDED] bg-opacity-20 px-[10px] py-[6px] rounded-md cursor-pointer hidden md:flex"
       >
-        <TiHomeOutline />
+        <HomeIcon className="m-auto fill-text-primary-light dark:fill-text-quaternary" />
         <h3>Home</h3>
       </Link>
       <RxSlash className="hidden md:inline-block" />
diff --git a/pages/[category]/index.tsx b/pages/[category]/index.tsx
index df364642c..a71cb39b5 100644
--- a/pages/[category]/index.tsx
+++ b/pages/[category]/index.tsx
@@ -4,7 +4,7 @@ import { SubCategories } from 'types'
 import Link from 'next/link'
 import AddIcon from 'assets/icons/svg/AddIcon.svg'
 import ArrowIcon from 'assets/icons/svg/ArrowIcon.svg'
-import BreadCrumbs from 'components/Breadcrumps'
+import BreadCrumbs from 'components/Breadcrumbs'
 import MessageIcon from 'assets/icons/svg/MessageIcon.svg'
 import categoryDescriptions from 'components/TopBar/CategoryDescriptions'