diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
index c4f71105..d4820aa7 100644
--- a/frontend/src/pages/Contact.vue
+++ b/frontend/src/pages/Contact.vue
@@ -1,4 +1,9 @@
 <template>
+  <LayoutHeader v-if="contact">
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs" />
+    </template>
+  </LayoutHeader>
   <div class="flex gap-6 p-5">
     <FileUploader @success="changeContactImage" :validateFile="validateFile">
       <template #default="{ openFileSelector, error }">
@@ -107,30 +112,43 @@
 <script setup>
 import {
   FeatherIcon,
+  Breadcrumbs,
   Avatar,
   FileUploader,
   ErrorMessage,
   Dropdown,
   call,
 } from 'frappe-ui'
+import LayoutHeader from '@/components/LayoutHeader.vue'
 import ContactModal from '@/components/ContactModal.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CameraIcon from '@/components/Icons/CameraIcon.vue'
 import { contactsStore } from '@/stores/contacts.js'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+
+const { getContactByName, contacts } = contactsStore()
+
+const showContactModal = ref(false)
 
 const props = defineProps({
-  contact: {
-    type: Object,
+  contactId: {
+    type: String,
     required: true,
   },
 })
 
-const { contacts } = contactsStore()
+const contact = computed(() => getContactByName(props.contactId))
 
-const showContactModal = ref(false)
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Contacts', route: { name: 'Contacts' } }]
+  items.push({
+    label: contact.value.full_name,
+    route: { name: 'Contact', params: { contactId: contact.value.name } },
+  })
+  return items
+})
 
 function validateFile(file) {
   let extn = file.name.split('.').pop().toLowerCase()
@@ -142,7 +160,7 @@ function validateFile(file) {
 async function changeContactImage(file) {
   await call('frappe.client.set_value', {
     doctype: 'Contact',
-    name: props.contact.name,
+    name: props.contactId,
     fieldname: 'image',
     value: file?.file_url || '',
   })
@@ -161,7 +179,7 @@ async function deleteContact() {
         async onClick({ close }) {
           await call('frappe.client.delete', {
             doctype: 'Contact',
-            name: props.contact.name,
+            name: props.contactId,
           })
           contacts.reload()
           close()
diff --git a/frontend/src/stores/contacts.js b/frontend/src/stores/contacts.js
index 999ad0e7..a3d2a9e2 100644
--- a/frontend/src/stores/contacts.js
+++ b/frontend/src/stores/contacts.js
@@ -4,6 +4,7 @@ import { reactive } from 'vue'
 
 export const contactsStore = defineStore('crm-contacts', () => {
   let contactsByPhone = reactive({})
+  let contactsByName = reactive({})
 
   const contacts = createResource({
     url: 'crm.api.session.get_contacts',
@@ -12,6 +13,7 @@ export const contactsStore = defineStore('crm-contacts', () => {
     transform(contacts) {
       for (let contact of contacts) {
         contactsByPhone[contact.mobile_no] = contact
+        contactsByName[contact.name] = contact
       }
       return contacts
     },
@@ -26,9 +28,13 @@ export const contactsStore = defineStore('crm-contacts', () => {
   function getContact(mobile_no) {
     return contactsByPhone[mobile_no]
   }
+  function getContactByName(name) {
+    return contactsByName[name]
+  }
 
   return {
     contacts,
     getContact,
+    getContactByName,
   }
 })