diff --git a/apps/client/src/widgets/Breadcrumb.css b/apps/client/src/widgets/Breadcrumb.css
index fe081ee3f..1993e57ca 100644
--- a/apps/client/src/widgets/Breadcrumb.css
+++ b/apps/client/src/widgets/Breadcrumb.css
@@ -1,4 +1,13 @@
 .component.breadcrumb {
     contain: none;
     margin: 0 10px;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+    gap: 0.25em;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
 }
diff --git a/apps/client/src/widgets/Breadcrumb.tsx b/apps/client/src/widgets/Breadcrumb.tsx
index 24a859eac..dc1b07233 100644
--- a/apps/client/src/widgets/Breadcrumb.tsx
+++ b/apps/client/src/widgets/Breadcrumb.tsx
@@ -1,7 +1,8 @@
+import { Fragment } from "preact/jsx-runtime";
 import "./Breadcrumb.css";
+import ActionButton from "./react/ActionButton";
 import { useNoteContext } from "./react/hooks";
 import NoteLink from "./react/NoteLink";
-import { joinElements } from "./react/react_utils";
 
 export default function Breadcrumb() {
     const { noteContext } = useNoteContext();
@@ -9,9 +10,12 @@ export default function Breadcrumb() {
 
     return (
         <div className="breadcrumb">
-            {joinElements(notePath.map(item => (
-                <BreadcrumbItem key={item} notePath={item} />
-            )), <>&nbsp;›&nbsp;</>)}
+            {notePath.map(item => (
+                <Fragment key={item}>
+                    <BreadcrumbItem notePath={item} />
+                    <BreadcrumbSeparator notePath={item} />
+                </Fragment>
+            ))}
         </div>
     )
 }
@@ -25,6 +29,15 @@ function BreadcrumbItem({ notePath }: { notePath: string }) {
     )
 }
 
+function BreadcrumbSeparator({ notePath }: { notePath: string}) {
+    return (
+        <ActionButton
+            icon="bx bx-chevron-right"
+            text=""
+        />
+    )
+}
+
 function buildNotePaths(notePathArray: string[] | undefined) {
     if (!notePathArray) return [];