diff --git a/components/Breadcrumbs/breadcrumbs.module.css b/components/Breadcrumbs/breadcrumbs.module.css
index 9523fd4c9..93bedd5a6 100644
--- a/components/Breadcrumbs/breadcrumbs.module.css
+++ b/components/Breadcrumbs/breadcrumbs.module.css
@@ -19,6 +19,7 @@
 .listItem {
   align-items: center;
   display: flex;
+  gap: var(--Spacing-x-quarter);
 }
 
 .homeLink {
diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx
index 422bb6ae2..a3244fab8 100644
--- a/components/Breadcrumbs/index.tsx
+++ b/components/Breadcrumbs/index.tsx
@@ -1,6 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import { ChevronRightSmallIcon,HouseIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
@@ -26,12 +26,7 @@ export default async function Breadcrumbs() {
             >
               <HouseIcon width={16} height={16} color="peach80" />
             </Link>
-            <ChevronRightIcon
-              width={16}
-              height={16}
-              aria-hidden="true"
-              color="peach80"
-            />
+            <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
           </li>
         ) : null}
 
@@ -46,12 +41,7 @@ export default async function Breadcrumbs() {
                 >
                   {breadcrumb.title}
                 </Link>
-                <ChevronRightIcon
-                  width={16}
-                  height={16}
-                  aria-hidden="true"
-                  color="peach80"
-                />
+                <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
               </li>
             )
           }