diff --git a/crm/api/session.py b/crm/api/session.py
index c6c5e3dd..368a272c 100644
--- a/crm/api/session.py
+++ b/crm/api/session.py
@@ -25,7 +25,7 @@ def get_contacts():
 
 	contacts = frappe.qb.get_query(
 		"Contact",
-		fields=['name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation'],
+		fields=['name', 'first_name', 'last_name', 'full_name', 'image', 'email_id', 'mobile_no', 'phone', 'salutation', 'company_name'],
 		order_by="first_name asc",
 		distinct=True,
 	).run(as_dict=1)
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index a0217a1e..f56d4ead 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -3,16 +3,18 @@
     class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
     :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
   >
-    <div class="flex flex-col">
+    <div class="flex flex-col overflow-hidden">
       <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
-      <SidebarLink
-        v-for="link in links"
-        :icon="link.icon"
-        :label="link.label"
-        :to="link.to"
-        :isCollapsed="isSidebarCollapsed"
-        class="mx-2 my-0.5"
-      />
+      <div class="flex flex-col overflow-y-auto">
+        <SidebarLink
+          v-for="link in links"
+          :icon="link.icon"
+          :label="link.label"
+          :to="link.to"
+          :isCollapsed="isSidebarCollapsed"
+          class="mx-2 my-0.5"
+        />
+      </div>
     </div>
     <SidebarLink
       :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
diff --git a/frontend/src/components/ContactModal.vue b/frontend/src/components/ContactModal.vue
new file mode 100644
index 00000000..5fd0d6ce
--- /dev/null
+++ b/frontend/src/components/ContactModal.vue
@@ -0,0 +1,136 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      title: editMode ? 'Edit contact' : 'New contact',
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? 'Update' : 'Create',
+          variant: 'solid',
+          disabled: !dirty,
+          onClick: ({ close }) => updateContact(close),
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <FormControl
+          type="text"
+          size="md"
+          variant="outline"
+          label="Salutation"
+          v-model="_contact.salutation"
+        />
+        <div class="flex gap-4">
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="text"
+            label="First Name"
+            v-model="_contact.first_name"
+          />
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="text"
+            label="Last Name"
+            v-model="_contact.last_name"
+          />
+        </div>
+        <FormControl
+          type="text"
+          variant="outline"
+          size="md"
+          label="Organisation"
+          v-model="_contact.company_name"
+        />
+        <div class="flex gap-4">
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="text"
+            label="Mobile no"
+            v-model="_contact.mobile_no"
+          />
+          <FormControl
+            class="flex-1"
+            variant="outline"
+            size="md"
+            type="email"
+            label="Email"
+            v-model="_contact.email_id"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { FormControl, Dialog, call } from 'frappe-ui'
+import { ref, defineModel, nextTick, watch, computed } from 'vue'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    default: {},
+  },
+})
+
+const show = defineModel()
+const contacts = defineModel('reloadContacts')
+
+const editMode = ref(false)
+let _contact = ref({})
+
+async function updateContact(close) {
+  if (JSON.stringify(props.contact) === JSON.stringify(_contact.value)) {
+    return
+  }
+
+  if (_contact.value.name) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'Contact',
+      name: _contact.value.name,
+      fieldname: _contact.value,
+    })
+    if (d.name) {
+      contacts.value.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'Contact',
+        ..._contact.value,
+      },
+    })
+    if (d.name) {
+      contacts.value.reload()
+    }
+  }
+  close()
+}
+
+const dirty = computed(() => {
+  return JSON.stringify(props.contact) !== JSON.stringify(_contact.value)
+})
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    nextTick(() => {
+      _contact.value = { ...props.contact }
+      if (_contact.value.first_name) {
+        editMode.value = true
+      }
+    })
+  }
+)
+</script>
diff --git a/frontend/src/pages/Contact.vue b/frontend/src/pages/Contact.vue
new file mode 100644
index 00000000..c4f71105
--- /dev/null
+++ b/frontend/src/pages/Contact.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="flex gap-6 p-5">
+    <FileUploader @success="changeContactImage" :validateFile="validateFile">
+      <template #default="{ openFileSelector, error }">
+        <div class="group relative h-24 w-24">
+          <Avatar
+            size="3xl"
+            :image="contact.image"
+            :label="contact.full_name"
+            class="!h-24 !w-24"
+          />
+          <component
+            :is="contact.image ? Dropdown : 'div'"
+            v-bind="
+              contact.image
+                ? {
+                    options: [
+                      {
+                        icon: 'upload',
+                        label: contact.image ? 'Change image' : 'Upload image',
+                        onClick: openFileSelector,
+                      },
+                      {
+                        icon: 'trash-2',
+                        label: 'Remove image',
+                        onClick: () => changeContactImage(''),
+                      },
+                    ],
+                  }
+                : { onClick: openFileSelector }
+            "
+            class="!absolute bottom-0 left-0 right-0"
+          >
+            <div
+              class="z-1 absolute bottom-0 left-0 right-0 flex h-13 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
+              style="
+                -webkit-clip-path: inset(12px 0 0 0);
+                clip-path: inset(12px 0 0 0);
+              "
+            >
+              <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+            </div>
+          </component>
+          <ErrorMessage class="mt-2" :message="error" />
+        </div>
+      </template>
+    </FileUploader>
+    <div class="flex flex-col justify-center gap-2">
+      <div class="text-3xl font-semibold text-gray-900">
+        {{ contact.salutation + ' ' + contact.full_name }}
+      </div>
+      <div class="flex items-center gap-2 text-base text-gray-700">
+        <div v-if="contact.email_id" class="flex items-center gap-1.5">
+          <EmailIcon class="h-4 w-4" />
+          <span class="">{{ contact.email_id }}</span>
+        </div>
+        <span
+          v-if="contact.mobile_no"
+          class="text-3xl leading-[0] text-gray-600"
+          >&middot;</span
+        >
+        <div v-if="contact.mobile_no" class="flex items-center gap-1.5">
+          <PhoneIcon class="h-4 w-4" />
+          <span class="">{{ contact.mobile_no }}</span>
+        </div>
+        <span
+          v-if="(contact.email_id || contact.mobile_no) && contact.company_name"
+          class="text-3xl leading-[0] text-gray-600"
+          >&middot;</span
+        >
+        <div v-if="contact.company_name" class="flex items-center gap-1.5">
+          <Avatar :label="contact.company_name" size="xs" />
+          <span class="">{{ contact.company_name }}</span>
+        </div>
+      </div>
+      <div class="mt-1 flex gap-2">
+        <Button label="Edit" size="sm" @click="showContactModal = true">
+          <template #prefix>
+            <EditIcon class="h-4 w-4" />
+          </template>
+        </Button>
+        <Button label="Delete" theme="red" size="sm" @click="deleteContact">
+          <template #prefix>
+            <FeatherIcon name="trash-2" class="h-4 w-4" />
+          </template>
+        </Button>
+        <!-- <Button label="Add lead" size="sm">
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4 w-4" />
+          </template>
+        </Button>
+        <Button label="Add deal" size="sm">
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4 w-4" />
+          </template>
+        </Button> -->
+      </div>
+    </div>
+    <ContactModal
+      v-model="showContactModal"
+      v-model:reloadContacts="contacts"
+      :contact="contact"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  FeatherIcon,
+  Avatar,
+  FileUploader,
+  ErrorMessage,
+  Dropdown,
+  call,
+} from 'frappe-ui'
+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'
+
+const props = defineProps({
+  contact: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { contacts } = contactsStore()
+
+const showContactModal = ref(false)
+
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
+}
+
+async function changeContactImage(file) {
+  await call('frappe.client.set_value', {
+    doctype: 'Contact',
+    name: props.contact.name,
+    fieldname: 'image',
+    value: file?.file_url || '',
+  })
+  contacts.reload()
+}
+
+async function deleteContact() {
+  $dialog({
+    title: 'Delete contact',
+    message: 'Are you sure you want to delete this contact?',
+    actions: [
+      {
+        label: 'Delete',
+        theme: 'red',
+        variant: 'solid',
+        async onClick({ close }) {
+          await call('frappe.client.delete', {
+            doctype: 'Contact',
+            name: props.contact.name,
+          })
+          contacts.reload()
+          close()
+        },
+      },
+    ],
+  })
+}
+</script>
diff --git a/frontend/src/pages/Contacts.vue b/frontend/src/pages/Contacts.vue
index 4d4c0481..7137911b 100644
--- a/frontend/src/pages/Contacts.vue
+++ b/frontend/src/pages/Contacts.vue
@@ -4,131 +4,92 @@
       <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
-      <Button variant="solid" label="Create">
+      <Button variant="solid" label="Create" @click="showContactModal = true">
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex items-center justify-between px-5 pb-4 pt-3">
-    <div class="flex items-center gap-2">
-      <Dropdown :options="viewsDropdownOptions">
-        <template #default="{ open }">
-          <Button :label="currentView.label">
-            <template #prefix
-              ><FeatherIcon :name="currentView.icon" class="h-4"
-            /></template>
-            <template #suffix
-              ><FeatherIcon
-                :name="open ? 'chevron-up' : 'chevron-down'"
-                class="h-4 text-gray-600"
-            /></template>
-          </Button>
-        </template>
-      </Dropdown>
+  <div class="flex h-full overflow-hidden">
+    <div class="flex flex-col overflow-y-auto border-r">
+      <router-link
+        :to="{ name: 'Contact', params: { contactId: contact.name } }"
+        v-for="(contact, i) in contacts.data"
+        :key="i"
+        :class="[
+          currentContact?.name === contact.name
+            ? 'bg-gray-50 hover:bg-gray-100'
+            : 'hover:bg-gray-50',
+        ]"
+      >
+        <div class="flex w-[352px] items-center gap-3 border-b px-5 py-4">
+          <Avatar :image="contact.image" :label="contact.full_name" size="xl" />
+          <div class="flex flex-col items-start gap-1">
+            <span class="text-base font-medium text-gray-900">
+              {{ contact.full_name }}
+            </span>
+            <span class="text-sm text-gray-700">{{ contact.email_id }}</span>
+          </div>
+        </div>
+      </router-link>
     </div>
-    <div class="flex items-center gap-2">
-      <Button label="Sort">
-        <template #prefix><SortIcon class="h-4" /></template>
-      </Button>
-      <Button label="Filter">
-        <template #prefix><FilterIcon class="h-4" /></template>
-      </Button>
-      <Button icon="more-horizontal" />
+    <div class="flex-1">
+      <router-view v-if="currentContact" :contact="currentContact" />
+      <div
+        v-else
+        class="grid h-full place-items-center text-xl font-medium text-gray-500"
+      >
+        <div class="flex flex-col items-center justify-center space-y-2">
+          <ContactsIcon class="h-10 w-10" />
+          <div>No contact selected</div>
+        </div>
+      </div>
     </div>
   </div>
-  <ListView class="px-5" v-if="rows" :columns="columns" :rows="rows" row-key="name" />
+  <ContactModal
+    v-model="showContactModal"
+    v-model:reloadContacts="contacts"
+    :contact="{}"
+  />
 </template>
 
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import SortIcon from '@/components/Icons/SortIcon.vue'
-import FilterIcon from '@/components/Icons/FilterIcon.vue'
-import { FeatherIcon, Button, Dropdown, Breadcrumbs, ListView } from 'frappe-ui'
-import { ref, computed } from 'vue'
+import ContactModal from '@/components/ContactModal.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { FeatherIcon, Breadcrumbs, Avatar } from 'frappe-ui'
 import { contactsStore } from '@/stores/contacts.js'
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 
 const { contacts } = contactsStore()
+const route = useRoute()
 
-const breadcrumbs = [{ label: 'Contacts', route: { name: 'Contacts' } }]
+const showContactModal = ref(false)
 
-const columns = [
-  {
-    label: 'Full name',
-    key: 'full_name',
-    width: '12rem',
-  },
-  {
-    label: 'Email',
-    key: 'email',
-    width: '12rem',
-  },
-  {
-    label: 'Phone',
-    key: 'mobile_no',
-    width: '12rem',
-  },
-]
+const currentContact = computed(() => {
+  return contacts.data.find(
+    (contact) => contact.name === route.params.contactId
+  )
+})
 
-const rows = computed(() => {
-  return contacts.data?.map((contact) => {
-    return {
-      name: contact.name,
-      full_name: {
-        label: contact.full_name,
-        image_label: contact.full_name,
-        image: contact.image,
-      },
-      email: contact.email_id,
-      mobile_no: contact.mobile_no,
-    }
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Contacts', route: { name: 'Contacts' } }]
+  if (!currentContact.value) return items
+  items.push({
+    label: currentContact.value.full_name,
+    route: {
+      name: 'Contact',
+      params: { contactId: currentContact.value.name },
+    },
   })
+  return items
 })
 
-const currentView = ref({
-  label: 'List',
-  icon: 'list',
+onMounted(() => {
+  const el = document.querySelector('.router-link-active')
+  if (el)
+    setTimeout(() => {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    })
 })
-
-const viewsDropdownOptions = [
-  {
-    label: 'List',
-    icon: 'list',
-    onClick() {
-      currentView.value = {
-        label: 'List',
-        icon: 'list',
-      }
-    },
-  },
-  {
-    label: 'Table',
-    icon: 'grid',
-    onClick() {
-      currentView.value = {
-        label: 'Table',
-        icon: 'grid',
-      }
-    },
-  },
-  {
-    label: 'Calender',
-    icon: 'calendar',
-    onClick() {
-      currentView.value = {
-        label: 'Calender',
-        icon: 'calendar',
-      }
-    },
-  },
-  {
-    label: 'Board',
-    icon: 'columns',
-    onClick() {
-      currentView.value = {
-        label: 'Board',
-        icon: 'columns',
-      }
-    },
-  },
-]
 </script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index c841ccb1..337606ef 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -38,6 +38,14 @@ const routes = [
     path: '/contacts',
     name: 'Contacts',
     component: () => import('@/pages/Contacts.vue'),
+    children: [
+      {
+        path: '/contacts/:contactId?',
+        name: 'Contact',
+        component: () => import('@/pages/Contact.vue'),
+        props: true,
+      },
+    ],
   },
   {
     path: '/organizations',