src/assets/views/components/Breadcrumb.svelte

@@ -1,13 +1,41 @@
 <script lang="ts">
+    import Icon from "../utils/Icon.svelte";
+
     export let currentPageTitle: string;
     export let pages: { link: string, title: string }[] = [];
 </script>
 
+<style lang="scss">
+    ol {
+        display: flex;
+        flex-direction: row;
+        margin: 8px 0;
+        padding: 0 8px;
+
+        list-style: none;
+        overflow: hidden;
+
+        border-radius: 5px;
+
+        li {
+            display: flex;
+            flex-direction: row;
+            white-space: nowrap;
+            align-items: center;
+
+            a, span {
+                display: block;
+                padding: 8px;
+            }
+        }
+    }
+</style>
+
 <nav aria-label="breadcrumb">
-    <ol class="breadcrumb">
+    <ol class="breadcrumb panel">
         {#each pages as page}
-            <li><a href={page.link}>{page.title}</a></li>
+            <li><a href={page.link}>{page.title}</a> <Icon name="chevron-right"/></li>
         {/each}
-        <li class="active" aria-current="page">{currentPageTitle}</li>
+        <li class="active" aria-current="page"><span>{currentPageTitle}</span></li>
     </ol>
 </nav>

src/assets/views/components/Pagination.svelte

@@ -20,7 +20,7 @@
 			display: flex;
 			flex-direction: row;
 			width: fit-content;
-			margin: 0 auto;
+			margin: 8px auto;
 			padding: 0;
 
 			list-style: none;