diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
index 1390f8b635..d6b1c0e8f7 100644
--- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
+++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js
@@ -27,8 +27,7 @@ frappe.search.AwesomeBar = class AwesomeBar {
 			setTimeout(() => input.focus(), 10);
 		});
 
-		let search_modal_body = `<div class="align-baseline flex py-2 px-1 relative navbar-modal-wrapper">
-			<div class="modal-search-icon absolute pr-2 pl-2">${frappe.utils.icon("search")}</div>
+		let search_modal_body = `<div class="align-baseline flex p-2 relative navbar-modal-wrapper">
 			<input
 				id="navbar-search"
 				type="text"
@@ -41,16 +40,18 @@ frappe.search.AwesomeBar = class AwesomeBar {
 		let search_modal_footer = `<div class="awesomebar-modal-footer flex justify-between w-100">
 			<div class="help-navigation">
 				<span class="help-item-navigate">
-					<span class="help-item">${frappe.utils.icon("arrow-up")}</span>
-					<span class="help-item">${frappe.utils.icon("arrow-down")}</span>
+					<span class="help-item">${frappe.utils.icon("arrow-up", "xs")}</span>
+					<span class="help-item">${frappe.utils.icon("arrow-down", "xs")}</span>
 					<span>${__("to navigate")}</span>
 				</span>
 				<span class="help-item-navigate">
-					<span class="help-item">${frappe.utils.icon("corner-down-left")}</span>
+					<span class="help-item">${frappe.utils.icon("corner-down-left", "xs")}</span>
 					<span>${__("to select")}</span>
 				</span>
-				<span class="help-item help-item-esc">${__("esc")}</span>
-				<span>${__("to close")}</span>
+				<span class="help-item-navigate">
+					<span class="help-item help-item-escape">${__("esc")}</span>
+					<span>${__("to close")}</span>
+				</span>
 			</div>
 			<div class="pointer">${frappe.utils.icon("circle-question-mark")}</div>
 		</div>`;
@@ -219,45 +220,20 @@ frappe.search.AwesomeBar = class AwesomeBar {
 	}
 
 	show_help() {
-		const txt =
-			'<table class="table table-bordered">\
-			<tr><td style="width: 50%">' +
-			__("Create a new record") +
-			"</td><td>" +
-			__("new type of document") +
-			"</td></tr>\
-			<tr><td>" +
-			__("List a document type") +
-			"</td><td>" +
-			__("document type..., e.g. customer") +
-			"</td></tr>\
-			<tr><td>" +
-			__("Search in a document type") +
-			"</td><td>" +
-			__("text in document type") +
-			"</td></tr>\
-			<tr><td>" +
-			__("Tags") +
-			"</td><td>" +
-			__("tag name..., e.g. #tag") +
-			"</td></tr>\
-			<tr><td>" +
-			__("Open a module or tool") +
-			"</td><td>" +
-			__("module name...") +
-			"</td></tr>\
-			<tr><td>" +
-			__("Open in new tab") +
-			"</td><td>" +
-			(frappe.utils.is_mac() ? "⌘ + Enter" : "Ctrl + Enter") +
-			"</td></tr>\
-			<tr><td>" +
-			__("Calculate") +
-			"</td><td>" +
-			__("e.g. (55 + 434) / 4 or =Math.sin(Math.PI/2)...") +
-			"</td></tr>\
-		</table>";
-		frappe.msgprint(txt, __("Search Help"));
+		const help_data = [
+			[__("Create a new record"), __("new type of document")],
+			[__("List a document type"), __("document type..., e.g. customer")],
+			[__("Search in a document type"), __("text in document type")],
+			[__("Tags"), __("tag name..., e.g. #tag")],
+			[__("Open a module or tool"), __("module name...")],
+			[__("Open in new tab"), frappe.utils.is_mac() ? "⌘ + Enter" : "Ctrl + Enter"],
+			[__("Calculate"), __("e.g. (55 + 434) / 4")],
+		];
+		frappe.msgprint({
+			message: help_data,
+			title: __("Search Help"),
+			as_table: true,
+		});
 	}
 
 	set_specifics(txt, end_txt) {
diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index e9cd4f79e8..3cb388a3fd 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -39,8 +39,7 @@ body.modal-open[style^="padding-right"] {
 		top: 0;
 		z-index: 3;
 		background: inherit;
-		padding: var(--padding-sm) var(--padding-lg);
-		// padding-bottom: 0;
+		padding: var(--padding-sm) var(--padding-md);
 		border-bottom: 1px solid var(--border-color);
 
 		.modal-title {
@@ -66,7 +65,7 @@ body.modal-open[style^="padding-right"] {
 	}
 
 	.modal-body {
-		padding: var(--padding-md) var(--padding-lg);
+		padding: var(--padding-md) var(--padding-md);
 		.form-layout:first-child > .form-page {
 			.visible-section:first-child {
 				padding-top: 0;
@@ -93,7 +92,7 @@ body.modal-open[style^="padding-right"] {
 		bottom: 0;
 		z-index: 1;
 		background: inherit;
-		padding: var(--padding-md) var(--padding-lg);
+		padding: var(--padding-md);
 		justify-content: space-between;
 
 		button {
diff --git a/frappe/public/scss/desk/navbar.scss b/frappe/public/scss/desk/navbar.scss
index 4b0ea766a6..5ae494158e 100644
--- a/frappe/public/scss/desk/navbar.scss
+++ b/frappe/public/scss/desk/navbar.scss
@@ -86,12 +86,8 @@
 }
 
 .navbar-modal-wrapper {
-	.modal-search-icon {
-		position: absolute;
-	}
-
 	#navbar-search {
-		padding-left: 42px;
+		display: flex;
 	}
 
 	.awesomplete {
@@ -127,17 +123,23 @@
 .awesomebar-modal-footer {
 	font-size: 12px;
 	.help-navigation {
+		display: flex;
+		gap: var(--margin-md);
 		.help-item-navigate {
-			margin-right: 1rem;
+			display: flex;
+			gap: var(--margin-xs);
+			align-items: center;
 		}
 		.help-item {
 			background-color: var(--border-color);
-			padding: 2px;
-			margin-right: 0.25rem;
+			padding: 3px;
+			display: flex;
+			font-size: x-small;
 			border-radius: 4px;
 		}
-		.help-item-esc {
+		.help-item-escape {
 			padding: 2px 4px;
+			display: inline-flex;
 		}
 	}
 }