diff --git a/frontend/src/components/ViewBreadcrumbs.vue b/frontend/src/components/ViewBreadcrumbs.vue
index 75ed1816..d1b59fbf 100644
--- a/frontend/src/components/ViewBreadcrumbs.vue
+++ b/frontend/src/components/ViewBreadcrumbs.vue
@@ -2,11 +2,22 @@
   <div class="flex items-center">
     <router-link
       :to="{ name: routeName }"
-      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-5 hover:text-ink-gray-7"
+      class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+      :class="[
+        viewControls
+          ? 'text-ink-gray-5 hover:text-ink-gray-7'
+          : 'text-ink-gray-7',
+      ]"
     >
       {{ __(routeName) }}
     </router-link>
-    <span class="mx-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
+    <span
+      v-if="viewControls"
+      class="mx-0.5 text-base text-ink-gray-4"
+      aria-hidden="true"
+    >
+      /
+    </span>
     <Dropdown v-if="viewControls" :options="viewControls.viewsDropdownOptions">
       <template #default="{ open }">
         <Button