diff --git a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx
index 57dece90..f98c116a 100644
--- a/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx
+++ b/src/components/General/BreadcrumbBar/BreadcrumbBar.tsx
@@ -1,3 +1,4 @@
+import { Text } from '@status-im/components'
 import { ChevronRightIcon } from '@status-im/icons'
 import { XStack } from 'tamagui'
 
@@ -11,14 +12,17 @@ const BreadcrumbBar = ({ breadcrumbList }: BreadcrumbBarProps) => {
   return (
     <nav className="breadcrumb-bar-nav">
       <ul className="breadcrumb-bar-ul">
-        {breadcrumbList.map((item, index) => (
-          <XStack space={'$2'} alignItems="center" key={index}>
-            <li className="breadcrumb-bar-li">{item}</li>
-            {index !== breadcrumbList.length - 1 && (
-              <ChevronRightIcon size={20} color="#647084" />
-            )}
-          </XStack>
-        ))}
+        {breadcrumbList.map((item, index) => {
+          const isNotLast = index !== breadcrumbList.length - 1
+          return (
+            <XStack space={'$2'} alignItems="center" key={index}>
+              <Text size={15} color={isNotLast ? '#647084' : ''}>
+                {item}
+              </Text>
+              {isNotLast && <ChevronRightIcon size={20} color="#647084" />}
+            </XStack>
+          )
+        })}
       </ul>
     </nav>
   )