diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index dd6c0942..2ef3ace4 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Call Logs' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Call Logs') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Call Logs" />
     </template>
     <template #right-header>
       <CustomActions
@@ -86,7 +54,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -94,7 +62,6 @@ import ViewControls from '@/components/ViewControls.vue'
 import CallLogsListView from '@/components/ListViews/CallLogsListView.vue'
 import CallLogModal from '@/components/Modals/CallLogModal.vue'
 import { getCallLogDetail } from '@/utils/callLog'
-import { Dropdown } from 'frappe-ui'
 import { computed, ref } from 'vue'
 
 const callLogsListView = ref(null)
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index c3661953..e9919aa5 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Contacts' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Contacts') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Contacts" />
     </template>
     <template #right-header>
       <CustomActions
@@ -104,7 +72,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -114,7 +82,6 @@ import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
 import { organizationsStore } from '@/stores/organizations.js'
 import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
-import { Dropdown } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const { getOrganization } = organizationsStore()
diff --git a/frontend/src/pages/Deals.vue b/frontend/src/pages/Deals.vue
index 0ca9a8a7..b5851473 100644
--- a/frontend/src/pages/Deals.vue
+++ b/frontend/src/pages/Deals.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Deals' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Deals') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Deals" />
     </template>
     <template #right-header>
       <CustomActions
@@ -295,7 +263,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
diff --git a/frontend/src/pages/EmailTemplates.vue b/frontend/src/pages/EmailTemplates.vue
index d12a832b..49e689a6 100644
--- a/frontend/src/pages/EmailTemplates.vue
+++ b/frontend/src/pages/EmailTemplates.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Email Templates' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Email Templates') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Email Templates" />
     </template>
     <template #right-header>
       <CustomActions
@@ -100,7 +68,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -108,7 +76,6 @@ import ViewControls from '@/components/ViewControls.vue'
 import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
 import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
 import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
-import { Dropdown } from 'frappe-ui'
 import { computed, ref } from 'vue'
 
 const emailTemplatesListView = ref(null)
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 380a756f..494f741f 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Notes' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Notes') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Notes" />
     </template>
     <template #right-header>
       <Button variant="solid" :label="__('Create')" @click="createNote">
@@ -135,7 +103,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
index cc58986b..519add21 100644
--- a/frontend/src/pages/Organizations.vue
+++ b/frontend/src/pages/Organizations.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Organizations' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Organizations') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Organizations" />
     </template>
     <template #right-header>
       <CustomActions
@@ -102,7 +70,7 @@
   />
 </template>
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -110,7 +78,6 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import QuickEntryModal from '@/components/Settings/QuickEntryModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import ViewControls from '@/components/ViewControls.vue'
-import { Dropdown } from 'frappe-ui'
 import {
   dateFormat,
   dateTooltipFormat,
diff --git a/frontend/src/pages/Tasks.vue b/frontend/src/pages/Tasks.vue
index 44e0d1aa..b7d94b14 100644
--- a/frontend/src/pages/Tasks.vue
+++ b/frontend/src/pages/Tasks.vue
@@ -1,39 +1,7 @@
 <template>
   <LayoutHeader>
     <template #left-header>
-      <div class="flex items-center">
-        <router-link
-          :to="{ name: 'Tasks' }"
-          class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-600 hover:text-gray-700"
-        >
-          {{ __('Tasks') }}
-        </router-link>
-        <span class="mx-0.5 text-base text-gray-500" aria-hidden="true">
-          /
-        </span>
-        <Dropdown
-          v-if="viewControls"
-          :options="viewControls.viewsDropdownOptions"
-        >
-          <template #default="{ open }">
-            <Button
-              variant="ghost"
-              class="text-lg font-medium"
-              :label="__(viewControls.currentView.label)"
-            >
-              <template #prefix>
-                <Icon :icon="viewControls.currentView.icon" class="h-4" />
-              </template>
-              <template #suffix>
-                <FeatherIcon
-                  :name="open ? 'chevron-up' : 'chevron-down'"
-                  class="h-4 text-gray-800"
-                />
-              </template>
-            </Button>
-          </template>
-        </Dropdown>
-      </div>
+      <ViewBreadcrumbs v-model="viewControls" routeName="Tasks" />
     </template>
     <template #right-header>
       <CustomActions
@@ -225,7 +193,7 @@
 </template>
 
 <script setup>
-import Icon from '@/components/Icon.vue'
+import ViewBreadcrumbs from '@/components/ViewBreadcrumbs.vue'
 import CustomActions from '@/components/CustomActions.vue'
 import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'