diff --git a/crm/crm/doctype/crm_call_log/crm_call_log.py b/crm/crm/doctype/crm_call_log/crm_call_log.py
index 748b75d9..27549c3b 100644
--- a/crm/crm/doctype/crm_call_log/crm_call_log.py
+++ b/crm/crm/doctype/crm_call_log/crm_call_log.py
@@ -1,9 +1,39 @@
 # Copyright (c) 2023, Frappe Technologies Pvt. Ltd. and contributors
 # For license information, please see license.txt
 
-# import frappe
+import frappe
 from frappe.model.document import Document
 
 
 class CRMCallLog(Document):
 	pass
+
+@frappe.whitelist()
+def get_call_log(name):
+	doc = frappe.get_doc("CRM Call Log", name)
+	_doc = doc.as_dict()
+	if doc.lead:
+		_doc.lead_name = frappe.db.get_value("CRM Lead", doc.lead, "lead_name")
+	if doc.note:
+		note = frappe.db.get_values("CRM Note", doc.note, ["title", "content"])[0]
+		_doc.note_doc = {
+			"title": note[0],
+			"content": note[1]
+		}
+
+	return _doc
+
+@frappe.whitelist()
+def create_lead_from_call_log(call_log):
+	lead = frappe.new_doc("CRM Lead")
+	lead.first_name = "Lead from call " + call_log.get("from")
+	lead.mobile_no = call_log.get("from")
+	lead.lead_owner = frappe.session.user
+	lead.save(ignore_permissions=True)
+
+	frappe.db.set_value("CRM Call Log", call_log.get("name"), "lead", lead.name)
+
+	if call_log.get("note"):
+		frappe.db.set_value("CRM Note", call_log.get("note"), "lead", lead.name)
+
+	return lead.name
\ No newline at end of file
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index e989a301..0e960811 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -99,7 +99,7 @@
               <div class="flex items-center gap-1">
                 <DurationIcon class="w-4 h-4 text-gray-600" />
                 <div class="text-sm text-gray-600">Duration</div>
-                <div class="text-sm">{{ call.duration }}s</div>
+                <div class="text-sm">{{ secondsToDuration(call.duration) }}</div>
               </div>
               <div
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -259,7 +259,7 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import PlayIcon from '@/components/Icons/PlayIcon.vue'
-import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { timeAgo, dateFormat, dateTooltipFormat, secondsToDuration } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { Button, FeatherIcon, Tooltip, Dropdown, TextEditor } from 'frappe-ui'
 import { computed, h } from 'vue'
diff --git a/frontend/src/pages/CallLog.vue b/frontend/src/pages/CallLog.vue
index 1f0a17e5..b0d396d5 100644
--- a/frontend/src/pages/CallLog.vue
+++ b/frontend/src/pages/CallLog.vue
@@ -1,65 +1,168 @@
 <template>
-  <LayoutHeader v-if="callLog.doc">
+  <LayoutHeader v-if="callLog.data">
     <template #left-header>
       <Breadcrumbs :items="breadcrumbs" />
     </template>
     <template #right-header>
-      <Button v-if="!callLog.doc.lead" variant="solid" label="Create lead" @click="createLead">
+      <Button
+        v-if="!callLog.data.lead"
+        variant="solid"
+        label="Create lead"
+        @click="createLead"
+      >
         <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
       </Button>
     </template>
   </LayoutHeader>
   <div class="border-b"></div>
-  <div v-if="callLog.doc" class="p-3">
-    <div class="px-3 pb-1 text-base font-medium">{{ details.label }}</div>
-    <div class="grid grid-cols-5 gap-4 p-3">
-      <div
-        v-for="field in details.fields"
-        :key="field.key"
-        class="flex flex-col gap-2"
-      >
-        <div class="text-sm text-gray-500">{{ field.label }}</div>
-        <div class="text-sm text-gray-900">{{ callLog.doc[field.key] }}</div>
+  <div v-if="callLog.data" class="p-6 max-w-lg">
+    <div class="pb-3 text-base font-medium">Call details</div>
+    <div class="flex flex-col gap-4 border rounded-lg p-4 mb-3 shadow-sm">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <FeatherIcon
+            :name="
+              callLog.data.type == 'Incoming'
+                ? 'phone-incoming'
+                : 'phone-outgoing'
+            "
+            class="w-4 h-4 text-gray-600"
+          />
+          <div class="font-medium">
+            {{ callLog.data.type == 'Incoming' ? 'Inbound' : 'Outbound' }} call
+          </div>
+        </div>
+        <div>
+          <Badge
+            :variant="'subtle'"
+            :theme="callLog.data.status === 'Completed' ? 'green' : 'gray'"
+            size="md"
+            :label="callLog.data.status"
+          />
+        </div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-1">
+          <Avatar
+            :image="callLog.data.caller.image"
+            :label="callLog.data.caller.label"
+            size="xl"
+          />
+          <div class="flex flex-col gap-1 ml-1">
+            <div class="text-base font-medium">
+              {{ callLog.data.caller.label }}
+            </div>
+            <div class="text-xs text-gray-600">
+              {{ callLog.data.from }}
+            </div>
+          </div>
+          <FeatherIcon name="arrow-right" class="w-5 h-5 text-gray-600 mx-2" />
+          <Avatar
+            :image="callLog.data.receiver.image"
+            :label="callLog.data.receiver.label"
+            size="xl"
+          />
+          <div class="flex flex-col gap-1 ml-1">
+            <div class="text-base font-medium">
+              {{ callLog.data.receiver.label }}
+            </div>
+            <div class="text-xs text-gray-600">
+              {{ callLog.data.to }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-1">
+          <DurationIcon class="w-4 h-4 text-gray-600" />
+          <div class="text-sm text-gray-600">Duration</div>
+          <div class="text-sm">{{ callLog.data.duration }}</div>
+        </div>
+        <div>
+          <Tooltip
+            class="text-gray-600 text-sm"
+            :text="dateFormat(callLog.data.modified, dateTooltipFormat)"
+          >
+            {{ timeAgo(callLog.data.modified) }}
+          </Tooltip>
+        </div>
       </div>
     </div>
-    <!-- <div class="px-3 pb-1 text-base font-medium mt-3">Call note</div>
-    <div v-if="callNote?.doc" class="flex flex-col p-3">
-      <TextInput
-        type="text"
-        class="text-base bg-white border-none !pl-0 hover:bg-white focus:!shadow-none focus-visible:!ring-0"
-        v-model="callNote.doc.title"
-        placeholder="Untitled note"
-      />
-      <TextEditor
-        ref="content"
-        editor-class="!prose-sm !leading-5 max-w-none p-2 pl-0 overflow-auto focus:outline-none"
-        :bubbleMenu="true"
-        :content="callNote.doc.content"
-        @change="(val) => (callNote.doc.content = val)"
-        placeholder="Type something and press enter"
-      />
-    </div> -->
+
+    <div v-if="callLog.data.recording_url" class="mt-6">
+      <div class="mb-3 text-base font-medium">Call recording</div>
+      <div class="flex items-center justify-between border rounded shadow-sm">
+        <audio
+          class="audio-control"
+          controls
+          :src="callLog.data.recording_url"
+        ></audio>
+      </div>
+    </div>
+
+    <div v-if="callLog.data.note" class="mt-6">
+      <div class="mb-3 text-base font-medium">Call note</div>
+      <div
+        class="flex flex-col gap-3 border rounded p-4 shadow-sm cursor-pointer h-56"
+        @click="showNoteModal = true"
+      >
+        <div class="text-lg font-medium truncate">
+          {{ callLog.data.note_doc.title }}
+        </div>
+        <TextEditor
+          v-if="callLog.data.note_doc.content"
+          :content="callLog.data.note_doc.content"
+          :editable="false"
+          editor-class="!prose-sm max-w-none !text-sm text-gray-600 focus:outline-none"
+          class="flex-1 overflow-hidden"
+        />
+      </div>
+    </div>
+
+    <div v-if="callLog.data.lead" class="mt-6">
+      <div class="mb-3 text-base font-medium">Lead</div>
+
+      <Button
+        variant="outline"
+        :route="{ name: 'Lead', params: { leadId: callLog.data.lead } }"
+        :label="callLog.data.lead_name"
+        class="p-4"
+      >
+        <template #prefix><Avatar :label="callLog.data.lead_name" /></template>
+      </Button>
+    </div>
   </div>
+  <NoteModal
+    v-model="showNoteModal"
+    :note="callLog.data?.note_doc"
+    @updateNote="updateNote"
+  />
 </template>
 
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import DurationIcon from '@/components/Icons/DurationIcon.vue'
+import NoteModal from '@/components/NoteModal.vue'
+import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
 import {
-  createDocumentResource,
-  TextInput,
   TextEditor,
+  Avatar,
   FeatherIcon,
   call,
+  Tooltip,
+  Badge,
+  createResource,
 } from 'frappe-ui'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
-import { computed } from 'vue'
+import { secondsToDuration } from '@/utils'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const { getUser } = usersStore()
-const { contacts } = contactsStore()
+const { contacts, getContact } = contactsStore()
 
 const props = defineProps({
   callLogId: {
@@ -68,94 +171,82 @@ const props = defineProps({
   },
 })
 
-const callLog = createDocumentResource({
-  doctype: 'CRM Call Log',
-  name: props.callLogId,
-  setValue: {},
+const showNoteModal = ref(false)
+
+const callLog = createResource({
+  url: 'crm.crm.doctype.crm_call_log.crm_call_log.get_call_log',
+  auto: true,
+  cache: ['callLog', props.callLogId],
+  params: {
+    name: props.callLogId,
+  },
+  transform: (doc) => {
+    doc.duration = secondsToDuration(doc.duration)
+    if (doc.type === 'Incoming') {
+      doc.caller = {
+        label: getContact(doc.from)?.full_name || 'Unknown',
+        image: getContact(doc.from)?.image,
+      }
+      doc.receiver = {
+        label: getUser(doc.receiver).full_name,
+        image: getUser(doc.receiver).user_image,
+      }
+    } else {
+      doc.caller = {
+        label: getUser(doc.caller).full_name,
+        image: getUser(doc.caller).user_image,
+      }
+      doc.receiver = {
+        label: getContact(doc.to)?.full_name || 'Unknown',
+        image: getContact(doc.to)?.image,
+      }
+    }
+    return doc
+  },
 })
 
-const breadcrumbs = computed(() => [
-  { label: 'Call Logs', route: { name: 'Call Logs' } },
-  { label: callLog.doc?.from },
-])
-
-const details = {
-  label: 'Call Details',
-  fields: [
-    {
-      label: 'From',
-      key: 'from',
-      type: 'data',
-    },
-    {
-      label: 'To',
-      key: 'to',
-      type: 'data',
-    },
-    {
-      label: 'Duration',
-      key: 'duration',
-      type: 'data',
-    },
-    {
-      label: 'Start Time',
-      key: 'start_time',
-      type: 'data',
-    },
-    {
-      label: 'End Time',
-      key: 'end_time',
-      type: 'data',
-    },
-    {
-      label: 'Type',
-      key: 'type',
-      type: 'data',
-    },
-    {
-      label: 'Status',
-      key: 'status',
-      type: 'data',
-    },
-  ],
-}
-
-// const callNote = computed(() => {
-//   return createDocumentResource({
-//     doctype: 'CRM Note',
-//     name: callLog.doc?.note,
-//     auto: true,
-//     setValue: {},
-//   })
-// })
-
-async function createLead() {
-  let d = await call('frappe.client.insert', {
-    doc: {
-      doctype: 'CRM Lead',
-      first_name: "Lead from " + callLog.doc.from,
-      mobile_no: callLog.doc.from,
-      lead_owner: getUser().name,
-    },
-  })
-  if (d.name) {
-    await update_call_log(d.name)
-    await update_note(d.name)
-    contacts.reload()
-    router.push({ name: 'Lead', params: { leadId: d.name } })
+async function updateNote(_note) {
+  if (_note.title || _note.content) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'CRM Note',
+      name: callLog.data?.note,
+      fieldname: _note,
+    })
+    if (d.name) {
+      callLog.reload()
+    }
   }
 }
 
-async function update_note(lead) {
-  await call('frappe.client.set_value', {
-    doctype: 'CRM Note',
-    name: callLog.doc?.note,
-    fieldname: 'lead',
-    value: lead,
+function createLead() {
+  call('crm.crm.doctype.crm_call_log.crm_call_log.create_lead_from_call_log', {
+    call_log: callLog.data,
+  }).then((d) => {
+    if (d) {
+      callLog.reload()
+      contacts.reload()
+      router.push({ name: 'Lead', params: { leadId: d } })
+    }
   })
 }
 
-async function update_call_log(lead) {
-  callLog.setValue.submit({ lead: lead })
-}
+const breadcrumbs = computed(() => [
+  { label: 'Call Logs', route: { name: 'Call Logs' } },
+  { label: callLog.data?.caller.label },
+])
 </script>
+
+<style scoped>
+.audio-control {
+  width: 100%;
+  height: 40px;
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.audio-control::-webkit-media-controls-panel {
+  background-color: white;
+}
+</style>
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 7b535ebe..43f5499b 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -94,7 +94,6 @@ const columns = [
     key: 'duration',
     type: 'icon',
     size: 'w-20',
-    align: 'text-right'
   },
   {
     label: 'From (number)',
@@ -137,7 +136,7 @@ const rows = computed(() => {
       }
       receiver = {
         label: getContact(callLog.to)?.full_name || 'Unknown',
-        image: getContact(callLog.from)?.image,
+        image: getContact(callLog.to)?.image,
       }
     }