diff --git a/frappe/desk/page/desktop/desktop.css b/frappe/desk/page/desktop/desktop.css
index bc9884239a..049c0564d7 100644
--- a/frappe/desk/page/desktop/desktop.css
+++ b/frappe/desk/page/desktop/desktop.css
@@ -132,10 +132,6 @@
 .icon-container:has(.icon){
     background-color: var(--surface-gray-3);
 }
-.icon-container .icon{
-    width: 27px;
-    height: 27px;
-}
 .icon-container:hover{
 	transform: scale(1.05);
     transition: transform 0.1s;
diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar_header.js b/frappe/public/js/frappe/ui/sidebar/sidebar_header.js
index 5d2a5a4441..b91efca57f 100644
--- a/frappe/public/js/frappe/ui/sidebar/sidebar_header.js
+++ b/frappe/public/js/frappe/ui/sidebar/sidebar_header.js
@@ -147,14 +147,10 @@ frappe.ui.SidebarHeader = class SidebarHeader {
 			this.header_icon = `<img src=${this.header_icon}></img>`;
 		} else if (this.sidebar.sidebar_data) {
 			this.header_icon = this.sidebar.sidebar_data.header_icon;
-			this.header_icon = frappe.utils.icon(
-				this.header_icon,
-				"lg",
-				"",
-				"",
-				"",
-				false,
-				`var(${this.header_bg_color})`
+			this.header_icon = frappe.utils.desktop_icon(
+				this.sidebar.sidebar_title.charAt(0),
+				"gray",
+				"sm"
 			);
 		} else {
 			this.header_icon = this.get_default_icon();
diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js
index 52e274f377..0279e228bb 100644
--- a/frappe/public/js/frappe/utils/utils.js
+++ b/frappe/public/js/frappe/utils/utils.js
@@ -1276,11 +1276,12 @@ Object.assign(frappe.utils, {
 		},
 		image_path: "/assets/frappe/images/leaflet/",
 	},
-	desktop_icon(letter, color) {
+	desktop_icon(letter, color, size) {
+		let icon_size = size ? size : "md";
 		let opacity_hex = "1A";
 		let icon_html = $(`
 			<div class="icon-container">
-				<svg fill="currentColor" class="desktop-alphabet icon text-ink-gray-7 icon-lg" stroke=none style="" aria-hidden="true">
+				<svg fill="currentColor" class="desktop-alphabet icon text-ink-gray-7 icon-${icon_size}" stroke=none style="" aria-hidden="true">
 				<use class="" href="#${letter}"></use>
 				</svg>
 			</div>
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 67e5fd7767..c92408b22c 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -143,7 +143,9 @@
 		}
 		@include transition(all, 0.3s, cubic-bezier(0.4, 0, 0.2, 1));
 	}
-
+	.nav-item {
+		margin-left: -5px;
+	}
 	.standard-items-sections {
 		margin-top: 14px;
 		.dropdown-notifications {
@@ -164,6 +166,10 @@
 				left: 100%;
 			}
 		}
+
+		.nav-item {
+			margin-left: 0px;
+		}
 	}
 
 	// show placeholder so that main section remains static
diff --git a/frappe/public/scss/desk/sidebar_header.scss b/frappe/public/scss/desk/sidebar_header.scss
index ea6a6eeddc..da10cf0f5e 100644
--- a/frappe/public/scss/desk/sidebar_header.scss
+++ b/frappe/public/scss/desk/sidebar_header.scss
@@ -19,7 +19,15 @@
 .header-logo {
 	width: 32px;
 	height: 32px;
-	padding: 4px;
+
+	& .icon-container {
+		padding: 4px;
+		border-radius: 10px;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+	}
 	& img {
 		width: 100%;
 		height: 100%;