diff --git a/frappe/public/js/frappe/views/image/image_view.js b/frappe/public/js/frappe/views/image/image_view.js
index 7cade5461f..8d4d514770 100644
--- a/frappe/public/js/frappe/views/image/image_view.js
+++ b/frappe/public/js/frappe/views/image/image_view.js
@@ -110,18 +110,20 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 		return `
 			<div class="image-view-item ellipsis">
 				<div class="image-view-header">
-					<input class="level-item list-row-checkbox hidden-xs" type="checkbox" data-name="${escape(
-						item.name
-					)}">
-					${this.get_like_html(item)}
+					<div>
+						<input class="level-item list-row-checkbox hidden-xs" type="checkbox" data-name="${escape(
+							item.name
+						)}">
+						${this.get_like_html(item)}
+					</div>
 				</span>
 				</div>
-				<div class="image-view-body">
+				<div class="image-view-body ${_class}">
 					<a  data-name="${encoded_name}"
 						title="${encoded_name}"
 						href="${this.get_form_link(item)}"
 					>
-						<div class="image-field ${_class}"
+						<div class="image-field"
 							data-name="${encoded_name}"
 						>
 							${_html}
diff --git a/frappe/public/scss/image-view.scss b/frappe/public/scss/image-view.scss
index ae88df3b2f..58a539aa23 100644
--- a/frappe/public/scss/image-view.scss
+++ b/frappe/public/scss/image-view.scss
@@ -38,25 +38,26 @@
 		}
 
 		.image-view-item {
-			padding: var(--padding-sm) var(--padding-md);
+			position: relative;
+			padding: var(--padding-sm) var(--padding-sm);
 			display: flex;
 			flex-direction: column;
 			height: 250px;
 			border-radius: var(--border-radius);
 
-			.list-row-checkbox {
-				&:before {
-					display: none;
-				}
+			// .list-row-checkbox {
+			// 	&:before {
+			// 		display: none;
+			// 	}
 
-				&:checked:before {
-					display: block;
-				}
-			}
+			// 	&:checked:before {
+			// 		display: block;
+			// 	}
+			// }
 
-			.not-liked {
-				display: none;
-			}
+			// .not-liked {
+			// 	display: none;
+			// }
 		}
 
 		.image-view-item:hover {
@@ -75,15 +76,21 @@
 		}
 
 		.image-view-header {
-			height: 20px;
+			position: absolute;
+			top: 12px;
+			left: var(--padding-md);
+			right: var(--padding-md);
+			display: block;
 			margin-bottom: var(--margin-sm);
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
+
+			div {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
 		}
 
 		.image-view-info {
-			margin-top: var(--margin-xs);
 			font-size: $font-size-sm;
 			color: var(--gray-600);
 			margin-bottom: 0;
@@ -98,29 +105,35 @@
 				text-decoration: none;
 			}
 
-			height: 130px;
-			width: 130px;
+			height: 100%;
+			width: 100%;
 			margin: 0 auto;
+
+			&.no-image {
+				@include flex(flex, center, center, null);
+				background-color: var(--control-bg);
+				border-radius: $border-radius;
+			}
 		}
 
 		.image-field {
+			max-height: 175px;
 			position: relative;
 			display: block;
-			width: 130px;
 			text-align: center;
 			margin: 0 auto;
+			overflow: hidden;
 			border-radius: var(--border-radius);
 
 			.image-wrapper {
+				@include flex(flex, null, center, null);
 				width: 100%;
 				height: 100%;
-				display: flex;
-				justify-content: center;
 			}
 
 			img {
-				max-width: 100%;
-				max-height: 100%;
+				// max-width: 100%;
+				// max-height: 100%;
 				border-radius: $border-radius;
 				color: transparent;
 				display: block;
@@ -134,17 +147,9 @@
 				z-index: 1;
 				left: 0;
 				position: absolute;
-				min-width: 130px;
-				min-height: 130px;
 				padding: 0;
 				background: var(--gray-50);
 			}
-			&.no-image {
-				line-height: 130px;
-				height: 130px;
-				background-color: var(--gray-50);
-				border-radius: $border-radius;
-			}
 		}
 
 		.image-title {
@@ -160,7 +165,7 @@
 			font-weight: 500;
 			justify-content: start;
 			align-items: center;
-			margin-top: var(--margin-lg);
+			margin-top: var(--margin-sm);
 		}
 
 		.placeholder-text {