diff --git a/frappe/public/js/frappe/ui/link_preview.js b/frappe/public/js/frappe/ui/link_preview.js
index 357ebbf671..328cd23716 100644
--- a/frappe/public/js/frappe/ui/link_preview.js
+++ b/frappe/public/js/frappe/ui/link_preview.js
@@ -170,24 +170,49 @@ frappe.ui.LinkPreview = class {
 			this.href = this.href.replace(new RegExp(' ', 'g'), '%20');
 		}
 
-		let image_html = '';
+		let popover_content =`
+			<div class="preview-popover-header">
+				<div class="preview-header">
+					${this.get_image_html(preview_data)}
+					<div class="preview-name">
+						<a href=${this.href}>${__(preview_data.preview_title)}</a>
+					</div>
+					<div class="text-muted preview-title">${this.get_id_html(preview_data)}</div>
+				</div>
+			</div>
+			<hr>
+			<div class="popover-body">
+				${this.get_content_html(preview_data)}
+			</div>
+		`;
+
+		return popover_content;
+	}
+
+	get_id_html(preview_data) {
 		let id_html = '';
-		let content_html = '';
-
-		let image_url = preview_data.preview_image;
-		let avatar_html = frappe.get_avatar(
-			"avatar-large",
-			preview_data.preview_title,
-			image_url
-		);
-		image_html = `<div class="preview-image">
-			${avatar_html}
-		</div>`;
-
 		if (preview_data.preview_title !== preview_data.name) {
 			id_html = `<a class="text-muted" href=${this.href}>${preview_data.name}</a>`;
 		}
 
+		return id_html;
+	}
+
+	get_image_html(preview_data) {
+		let avatar_html = frappe.get_avatar(
+			"avatar-medium",
+			preview_data.preview_title,
+			preview_data.preview_image
+		);
+
+		return `<div class="preview-image">
+			${avatar_html}
+		</div>`;
+	}
+
+	get_content_html(preview_data) {
+		let content_html = '';
+
 		Object.keys(preview_data).forEach(key => {
 			if (!['preview_image', 'preview_title', 'name'].includes(key)) {
 				let value = frappe.ellipsis(preview_data[key], 280);
@@ -200,23 +225,8 @@ frappe.ui.LinkPreview = class {
 				`;
 			}
 		});
-		content_html = `<div class="preview-table">${content_html}</div>`;
 
-		let popover_content =`
-			<div class="preview-popover-header">
-				<div class="preview-header">
-					${image_html}
-					<div class="preview-name"><a href=${this.href}>${__(preview_data.preview_title)}</a></div>
-					<div class="text-muted preview-title">${id_html}</div>
-				</div>
-			</div>
-			<hr>
-			<div class="popover-body">
-				${content_html}
-			</div>
-		`;
-
-		return popover_content;
+		return `<div class="preview-table">${content_html}</div>`;
 	}
 
 };
diff --git a/frappe/public/scss/desk/link_preview.scss b/frappe/public/scss/desk/link_preview.scss
index dc7cf726f2..b2dd3ec425 100644
--- a/frappe/public/scss/desk/link_preview.scss
+++ b/frappe/public/scss/desk/link_preview.scss
@@ -2,56 +2,37 @@
 	max-width: 100%;
 
 	.popover-content {
-		padding: 15px 25px;
+		padding: var(--padding-md) 25px;
 
-		.preview-popover-header {
+		.preview-header {
+			@include flex(flex, null, center, column);
+		}
 
-			.preview-header {
-				@include flex(flex, null, center, column);
-			}
+		.preview-image {
+			margin-bottom: var(--margin-sm);
 
-			.preview-image {
-				margin-bottom: var(--margin-sm);
-				// object-fit: cover;
-				// border-radius: var(--border-radius-sm);
+			.avatar {
+				width: 52px;
+				height: 52px;
 
-				.avatar {
-					width: 52px;
-					height: 52px;
+				.standard-image {
+					font-size: var(--text-lg);
 				}
 			}
+		}
 
-			img:after {
-				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
-			}
+		.preview-name {
+			font-size: var(--text-base);
+			font-weight: 500;
+		}
 
-			img[alt]:after {
-				height: 52px;
-				@include flex();
-				position: absolute;
-				z-index: 1;
-				top: -15px;
-				left: 0px;
-				width: 100%;
-				background-color: var(--bg-color);
-				border-radius: var(--border-radius);
-			}
-
-			.preview-name {
-				// display: block;
-				font-size: var(--text-base);
-				font-weight: 500;
-			}
-
-			.preview-title:not(:empty) {
-				margin-top: var(--margin-xs);
-				font-size: var(--text-md);
-			}
+		.preview-title:not(:empty) {
+			margin-top: var(--margin-xs);
+			font-size: var(--text-md);
 		}
 
 		.popover-body {
 			padding: 0;
-
 			.preview-table {
 				padding-bottom: var(--padding-xs);
 				max-width: 330px;