diff --git a/crm/crm/doctype/crm_call_log/crm_call_log.json b/crm/crm/doctype/crm_call_log/crm_call_log.json
index 8ed05487..8eb1ce4d 100644
--- a/crm/crm/doctype/crm_call_log/crm_call_log.json
+++ b/crm/crm/doctype/crm_call_log/crm_call_log.json
@@ -14,6 +14,7 @@
   "call_received_by",
   "medium",
   "start_time",
+  "note",
   "column_break_ufnp",
   "type",
   "to",
@@ -99,11 +100,17 @@
    "fieldtype": "Link",
    "label": "Lead/Deal",
    "options": "CRM Lead"
+  },
+  {
+   "fieldname": "note",
+   "fieldtype": "Link",
+   "label": "Note",
+   "options": "CRM Note"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-08-28 01:34:24.864624",
+ "modified": "2023-08-28 11:42:33.487807",
  "modified_by": "Administrator",
  "module": "CRM",
  "name": "CRM Call Log",
diff --git a/crm/crm/doctype/crm_note/crm_note.json b/crm/crm/doctype/crm_note/crm_note.json
index 2af17976..146852b7 100644
--- a/crm/crm/doctype/crm_note/crm_note.json
+++ b/crm/crm/doctype/crm_note/crm_note.json
@@ -34,8 +34,13 @@
   }
  ],
  "index_web_pages_for_search": 1,
- "links": [],
- "modified": "2023-08-26 19:09:21.850043",
+ "links": [
+  {
+   "link_doctype": "CRM Call Log",
+   "link_fieldname": "note"
+  }
+ ],
+ "modified": "2023-08-28 11:48:42.100802",
  "modified_by": "Administrator",
  "module": "CRM",
  "name": "CRM Note",
diff --git a/frontend/src/pages/CallLog.vue b/frontend/src/pages/CallLog.vue
new file mode 100644
index 00000000..0b22b9b0
--- /dev/null
+++ b/frontend/src/pages/CallLog.vue
@@ -0,0 +1,147 @@
+<template>
+  <LayoutHeader v-if="callLog.doc">
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs" />
+    </template>
+    <template #right-header>
+      <Button 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>
+    </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>
+</template>
+
+<script setup>
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import {
+  createDocumentResource,
+  TextInput,
+  TextEditor,
+  FeatherIcon,
+  call,
+} from 'frappe-ui'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps({
+  callLogId: {
+    type: String,
+    required: true,
+  },
+})
+
+const callLog = createDocumentResource({
+  doctype: 'CRM Call Log',
+  name: props.callLogId,
+})
+
+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,
+  })
+})
+
+async function createLead() {
+  let d = await call('frappe.client.insert', {
+    doc: {
+      doctype: 'CRM Lead',
+      lead_name: 'Lead from call',
+    },
+  })
+  if (d.name) {
+    await update_call_log(d.name)
+    await update_note(d.name)
+    router.push({ name: 'Lead', params: { leadId: d.name } })
+  }
+}
+
+async function update_note(lead) {
+  callNote.value.setValue.submit({ lead: lead })
+}
+
+async function update_call_log(lead) {
+  callLog.setValue.submit({ lead: lead })
+}
+</script>
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
index 98af5c94..323e09c8 100644
--- a/frontend/src/pages/CallLogs.vue
+++ b/frontend/src/pages/CallLogs.vue
@@ -39,6 +39,7 @@ const callLogs = createListResource({
   type: 'list',
   doctype: 'CRM Call Log',
   fields: [
+    'name',
     'from',
     'to',
     'duration',
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 55ac8790..44da837f 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -44,6 +44,12 @@ const routes = [
     name: 'Call Logs',
     component: () => import('@/pages/CallLogs.vue'),
   },
+  {
+    path: '/call-logs/:callLogId',
+    name: 'Call Log',
+    component: () => import('@/pages/CallLog.vue'),
+    props: true,
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',