diff --git a/theseus_gui/src/components/ui/Breadcrumbs.vue b/theseus_gui/src/components/ui/Breadcrumbs.vue
index 039c10b1c..23d1e3edc 100644
--- a/theseus_gui/src/components/ui/Breadcrumbs.vue
+++ b/theseus_gui/src/components/ui/Breadcrumbs.vue
@@ -1,6 +1,16 @@
 <template>
   <div class="breadcrumbs">
-    <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
+    <div
+      v-if="props.afterLogo && breadcrumbContext.routeBreadcrumbs.value?.length > 0"
+      class="breadcrumbs__item"
+    >
+      <ChevronRightIcon class="chevron" />
+    </div>
+    <div
+      v-for="breadcrumb in breadcrumbContext.routeBreadcrumbs.value"
+      :key="breadcrumb.name"
+      class="breadcrumbs__item"
+    >
       <router-link
         v-if="breadcrumb.link"
         :to="{
@@ -20,26 +30,23 @@
 
 <script setup>
 import { ChevronRightIcon } from 'omorphia'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useBreadcrumbs, useBreadcrumbContext } from '@/store/breadcrumbs'
 import { useRoute } from 'vue-router'
-import { computed } from 'vue'
 
-const route = useRoute()
+const props = defineProps({
+  afterLogo: {
+    type: Boolean,
+    default: false,
+  },
+})
 
 const breadcrumbData = useBreadcrumbs()
 
-breadcrumbData.$subscribe(() => {
-  breadcrumbData?.resetToNames(breadcrumbs.value)
-})
+const route = useRoute()
+const breadcrumbContext = useBreadcrumbContext(route)
 
-const breadcrumbs = computed(() => {
-  const additionalContext =
-    route.meta.useContext === true
-      ? breadcrumbData.context
-      : route.meta.useRootContext === true
-      ? breadcrumbData.rootContext
-      : null
-  return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+breadcrumbData.$subscribe(() => {
+  breadcrumbData?.resetToNames(breadcrumbContext.routeBreadcrumbs.value)
 })
 
 const breadcrumbName = (bcn) => {
@@ -61,9 +68,12 @@ const breadcrumbName = (bcn) => {
     vertical-align: center;
     margin: auto 0;
 
-    .chevron,
+    .chevron {
+      margin: auto 0.5rem;
+    }
+
     a {
-      margin: auto 0.25rem;
+      margin: auto 0;
     }
   }
 
diff --git a/theseus_gui/src/store/breadcrumbs.js b/theseus_gui/src/store/breadcrumbs.js
index 268afc5a8..80905b6de 100644
--- a/theseus_gui/src/store/breadcrumbs.js
+++ b/theseus_gui/src/store/breadcrumbs.js
@@ -1,3 +1,5 @@
+import { computed } from 'vue'
+
 import { defineStore } from 'pinia'
 
 export const useBreadcrumbs = defineStore('breadcrumbsStore', {
@@ -34,3 +36,28 @@ export const useBreadcrumbs = defineStore('breadcrumbsStore', {
     },
   },
 })
+
+export const useBreadcrumbContext = (route) => {
+  const breadcrumbs = useBreadcrumbs()
+
+  const routeContext = computed(() => {
+    const { meta } = route
+    if (meta?.useContext) {
+      return breadcrumbs.context
+    } else if (meta?.useRootContext) {
+      return breadcrumbs.rootContext
+    } else {
+      return null
+    }
+  })
+
+  const routeBreadcrumbs = computed(() => {
+    const { meta } = route
+    return routeContext.value ? [routeContext.value, ...meta.breadcrumb] : meta.breadcrumb
+  })
+
+  return {
+    routeContext,
+    routeBreadcrumbs,
+  }
+}