diff --git a/erpnext/crm/call_summary/call_summary_utils.py b/erpnext/crm/call_summary/call_summary_utils.py
index 0b6131ffd89..5814e2b97b1 100644
--- a/erpnext/crm/call_summary/call_summary_utils.py
+++ b/erpnext/crm/call_summary/call_summary_utils.py
@@ -4,9 +4,15 @@ import frappe
 def get_contact_doc(phone_number):
 	phone_number = phone_number[-10:]
 	contacts = frappe.get_all('Contact', or_filters={
-		'phone': ['like', '%{}%'.format(phone_number)],
-		'mobile_no': ['like', '%{}%'.format(phone_number)]
+		'phone': ['like', '%{}'.format(phone_number)],
+		'mobile_no': ['like', '%{}'.format(phone_number)]
 	}, fields=['*'])
 
 	if contacts:
-		return contacts[0]
\ No newline at end of file
+		return contacts[0]
+
+@frappe.whitelist()
+def get_last_communication(phone_number, customer=None):
+	# find last communication through phone_number
+	# find last issues, opportunity, lead
+	pass
\ No newline at end of file
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 25fe0d61a38..3f55d0737da 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -1,7 +1,8 @@
 {
     "css/erpnext.css": [
         "public/less/erpnext.less",
-        "public/less/hub.less"
+        "public/less/hub.less",
+        "public/less/call_summary.less"
     ],
     "css/marketplace.css": [
         "public/less/hub.less"
@@ -49,7 +50,8 @@
         "public/js/education/student_button.html",
         "public/js/education/assessment_result_tool.html",
         "public/js/hub/hub_factory.js",
-        "public/js/call_summary_dialog.js"
+        "public/js/call_popup/call_summary_dialog.js",
+        "public/js/call_popup/call_summary.html"
     ],
     "js/item-dashboard.min.js": [
         "stock/dashboard/item_dashboard.html",
diff --git a/erpnext/public/js/call_popup/call_summary_dialog.js b/erpnext/public/js/call_popup/call_summary_dialog.js
new file mode 100644
index 00000000000..9909b709c91
--- /dev/null
+++ b/erpnext/public/js/call_popup/call_summary_dialog.js
@@ -0,0 +1,101 @@
+class CallSummaryDialog {
+	constructor(opts) {
+		this.number = opts.number;
+		this.make();
+	}
+
+	make() {
+		var d = new frappe.ui.Dialog({
+			'title': `Incoming Call: ${this.number}`,
+			'fields': [{
+				'fieldname': 'customer_info',
+				'fieldtype': 'HTML'
+			}, {
+				'fieldtype': 'Section Break'
+			}, {
+				'fieldtype': 'Text',
+				'label': "Last Communication",
+				'fieldname': 'last_communication',
+				'default': 'This is not working please helpppp',
+				'placeholder': __("Select or add new customer"),
+				'readonly': true
+			}, {
+				'fieldtype': 'Column Break'
+			}, {
+				'fieldtype': 'Text',
+				'label': 'Call Summary',
+				'fieldname': 'call_communication',
+				'default': 'This is not working please helpppp',
+				"placeholder": __("Select or add new customer")
+			}]
+		});
+		// this.body.html(this.get_dialog_skeleton());
+		frappe.xcall('erpnext.crm.call_summary.call_summary_utils.get_contact_doc', {
+			phone_number: this.number
+		}).then(res => {
+			this.make_customer_contact(res, d.fields_dict["customer_info"].$wrapper);
+			// this.make_last_communication_section();
+		});
+		d.show();
+	}
+
+	get_dialog_skeleton() {
+		return `
+			<div class="call-summary-body">
+				<div class="customer-info flex">
+				</div>
+				<div class="flex">
+					<div class="last-communication"></div>
+					<div class="call-summary"></div>
+				</div>
+				<hr>
+				<div class="flex">
+					<div class="section-right"></div>
+					<div class="section-left"></div>
+				</div>
+			</div>
+		`;
+	}
+	make_customer_contact(res, wrapper) {
+		if (!res) {
+			wrapper.append('<b>Unknown Contact</b>');
+		} else {
+			wrapper.append(`
+				<img src="${res.image}">
+				<div class='flex-column'>
+					<span>${res.first_name} ${res.last_name}</span>
+					<span>${res.mobile_no}</span>
+					<span>Customer: <b>Some Enterprise</b></span>
+				</div>
+			`);
+		}
+	}
+
+	make_last_communication_section() {
+		const last_communication_section = this.body.find('.last-communication');
+		const last_communication = frappe.ui.form.make_control({
+			parent: last_communication_section,
+			df: {
+				fieldtype: "Text",
+				label: "Last Communication",
+				fieldname: "last_communication",
+				'default': 'This is not working please helpppp',
+				"placeholder": __("Select or add new customer")
+			},
+		});
+		last_communication.set_value('This is not working please helpppp');
+	}
+
+	make_summary_section() {
+		//
+	}
+}
+
+$(document).on('app_ready', function() {
+	frappe.realtime.on('incoming_call', data => {
+		const number = data.CallFrom;
+		frappe.call_summary_dialog = new CallSummaryDialog({
+			number
+		});
+	});
+});
diff --git a/erpnext/public/js/call_summary_dialog.js b/erpnext/public/js/call_summary_dialog.js
deleted file mode 100644
index 17bf7b97666..00000000000
--- a/erpnext/public/js/call_summary_dialog.js
+++ /dev/null
@@ -1,32 +0,0 @@
-class CallSummaryDialog {
-	constructor(opts) {
-		this.number = opts.number;
-		this.make();
-	}
-
-	make() {
-		var d = new frappe.ui.Dialog();
-		this.$modal_body = $(d.body);
-		this.call_summary_dialog = d;
-		$(d.header).html(`<div>Incoming Call: ${this.number}</div>`);
-		frappe.xcall('erpnext.crm.call_summary.call_summary_utils.get_contact_doc', {
-			phone_number: this.number
-		}).then(res => {
-			if (!res) {
-				this.$modal_body.html('Unknown Contact');
-			} else {
-				this.$modal_body.append(`${frappe.utils.get_form_link('Contact', res.name, true)}`)
-			}
-		});
-		d.show();
-	}
-}
-
-$(document).on('app_ready', function() {
-	frappe.realtime.on('incoming_call', data => {
-		const number = data.CallFrom;
-		frappe.call_summary_dialog = new CallSummaryDialog({
-			number
-		});
-	});
-});
diff --git a/erpnext/public/less/call_summary.less b/erpnext/public/less/call_summary.less
new file mode 100644
index 00000000000..73f6fd4f771
--- /dev/null
+++ b/erpnext/public/less/call_summary.less
@@ -0,0 +1,6 @@
+.customer-info {
+	img {
+		width: auto;
+		height: 100px;
+	}
+}
\ No newline at end of file