diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 66199a4..f202fa4 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,176 +1,109 @@
 @import "../../../../frappe/frappe/public/less/variables.less";
 
 body[data-route^="Hub/"] {
-	.freeze .image-view-container {
-		.list-row-col {
-			background-color: @light-bg;
-			color: @light-bg;
-		}
-
-		.placeholder-text {
-			color: @light-bg;
-		}
+	.hub-icon {
+		width: 40px;
 	}
 
-	.freeze {
-		display: none;
-	}
-
-	.image-view-container {
-		justify-content: space-around;
-	}
-}
-
-.img-wrapper {
-	border: 1px solid #d1d8dd;
-	border-radius: 3px;
-	padding: 12px;
-	overflow: hidden;
-	text-align: center;
-	white-space: nowrap;
-
-	.helper {
-		height: 100%;
-		display: inline-block;
-		vertical-align: middle;
-	}
-}
-
-/* hub */
-div[data-page-route="hub"] {
-	.page-head {
-		height: 80px;
-
-		.title-text {
-			cursor: pointer;
-		}
-	}
-
-	.page-content {
-		margin-top: 80px;
-	}
-
-	.page-title h1 {
-		margin-bottom: 0px;
-	}
-
-	.account-details {
-		margin-top: 20px;
-	}
-
-	[data-original-title="Search"] {
-		float: right;
-		width: 220px;
-	}
-
-	.hub-main-section {
-		padding: 30px;
-	}
-
-	.listing-body {
-		margin: 0;
-	}
-
-	.main-list-section {
-		padding: 0;
-		// border-right: 1px solid #d1d8dd;
-	}
-
-	.side-list-section {
-		padding: 0;
-	}
-
-	.item-list-header h3 {
-		font-weight: normal;
-	}
-
-	.hub-item-page {
-
-		h2 {
-			margin-top: 10px;
-		}
-
-		.item-header {
-			display: flex;
-		}
-
-		.item-page-image {
-			flex: 1;
-		}
-
-		.title-content {
-			flex: 3;
-
-			.description {
-				margin: 30px 0px;
-			}
-
-			.actions {
-				margin-top: 30px;
-
-				.rfq-btn.disabled {
-					background-color: #b1bdca;
-					color: #fff;
-					border-color: #b1bdca;
-				}
-			}
-		}
-
-		.company-items {
-			margin-top: 40px;
-		}
-	}
-
-	.company-header {
-		display: flex;
-	}
-
-	.item-list {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-
-	.hub-item-wrapper {
-		margin-bottom: 20px;
+	.hub-page-title {
+		margin-left: 10px;
 	}
 
 	.img-wrapper {
-		border: 1px solid @border-color;
+		border: 1px solid #d1d8dd;
 		border-radius: 3px;
 		padding: 12px;
 		overflow: hidden;
 		text-align: center;
 		white-space: nowrap;
 
-		img {
-			max-width: 100%;
-			max-height: 100%;
-			display: inline-block;
-			vertical-align: middle;
-		}
-
 		.helper {
 			height: 100%;
 			display: inline-block;
 			vertical-align: middle;
 		}
+	}
 
-		.standard-image {
-			font-size: 72px;
-			border: none;
-			background-color: @light-bg;
+	.tree {
+		margin: 10px 0px;
+		padding: 0px;
+		height: 100%;
+		position: relative;
+	}
+
+	.tree.with-skeleton.opened::before {
+		left: 9px;
+		top: 14px;
+		height: calc(~"100% - 32px");
+	}
+
+	.list-header-icon {
+		width: 72px;
+		border-radius: 4px;
+		flex-shrink: 0;
+		margin: 10px;
+		padding: 1px;
+		border: 1px solid @border-color;
+		height: 72px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		img {
+			border-radius: 4px;
 		}
 	}
 
-	.hub-item-title {
-		width: 100%;
+	.star-icon.fa-star {
+		color: @indicator-orange;
 	}
 
-	.breadcrumb {
-		padding-left: 0;
-		padding-top: 0;
-		margin-bottom: 10px;
+	.octicon-heart.liked {
+		color: @indicator-red;
 	}
 
-}
\ No newline at end of file
+	.margin-vertical-10 {
+		margin: 10px 0px;
+	}
+
+	.margin-vertical-15 {
+		margin: 15px 0px;
+	}
+
+	.frappe-list .result {
+		min-height: 100px;
+	}
+}
+
+.image-view-container {
+	.image-view-body {
+		&:hover .like-button {
+			opacity: 0.7;
+		}
+	}
+
+	.like-button {
+		bottom: 10px !important;
+		left: 10px !important;
+		width: 36px;
+		height: 36px;
+		opacity: 0;
+		font-size: 16px;
+		color: @text-color;
+		position: absolute;
+
+		// show zoom button on mobile devices
+		@media (max-width: @screen-xs) {
+			opacity: 0.5
+		}
+	}
+
+	.image-view-body:hover .like-button {
+		opacity: 0.7;
+	}
+}
+
+.rating-area .star-icon {
+	cursor: pointer;
+	font-size: 15px;
+}