diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index d30bc8c144..b4a1cf81be 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -13,7 +13,8 @@
 		"public/js/shopping_cart.js"
 	],
 	"css/erpnext-web.css": [
-		"public/scss/website.scss"
+		"public/scss/website.scss",
+		"public/scss/shopping_cart.scss"
 	],
 	"js/marketplace.min.js": [
 		"public/js/hub/marketplace.js"
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
new file mode 100644
index 0000000000..16a2bc585a
--- /dev/null
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -0,0 +1,206 @@
+@import "frappe/public/scss/desk/variables";
+@import "frappe/public/scss/mixins";
+
+.carousel-control {
+	height: 42px;
+	width: 42px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: white;
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
+	border-radius: 100px;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+	opacity: 1;
+}
+
+.carousel-body {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.carousel-content {
+	max-width: 400px;
+}
+
+.card {
+	border: none;
+}
+
+.card-grid {
+	display: grid;
+	grid-gap: 15px;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));;
+}
+
+.product-category-section {
+	.card:hover {
+		box-shadow: 0px 16px 45px 6px rgba(0, 0, 0, 0.08), 0px 8px 10px -10px rgba(0, 0, 0, 0.04);
+	}
+}
+
+.item-card-group-section {
+	.card {
+		height: 360px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	// .card-body {
+	// 	text-align: center;
+	// }
+
+	// .featured-item {
+	// 	.card-body {
+	// 		text-align: left;
+	// 	}
+	// }
+
+	.card-img {
+		max-height: 210px;
+		object-fit: contain;
+		margin-top: 1.25rem;
+	}
+
+	.product-title {
+		font-size: 14px;
+		color: var(--gray-800);
+		font-weight: 500;
+	}
+
+	.product-description {
+		font-size: 12px;
+		color: var(--text-color);
+		margin: 20px 0;
+		display: -webkit-box;
+		-webkit-line-clamp: 6;
+		-webkit-box-orient: vertical;
+	}
+
+	.product-category {
+		font-size: 13px;
+		color: var(--gray-600);
+		margin: var(--margin-sm) 0;
+	}
+
+	.product-price {
+		font-size: 18px;
+		font-weight: 600;
+		color: var(--text-color);
+		margin: var(--margin-sm) 0;
+	}
+
+	.item-card {
+		padding: var(--padding-sm);
+	}
+}
+
+#page-all-products {
+	.page-header {
+		font-size: 20px;
+		font-weight: 700;
+		color: var(--text-color);
+	}
+
+	.filters-section {
+		.title-section {
+			border-bottom: 1px solid var(--table-border-color);
+		}
+
+		.filter-title {
+			font-weight: 500;
+		}
+
+		.clear-filters {
+			font-size: 13px;
+		}
+
+		.filter-label {
+			font-size: 11px;
+			font-weight: 600;
+			color: var(--gray-700);
+			text-transform: uppercase;
+		}
+
+		.filter-block {
+			border-bottom: 1px solid var(--table-border-color);
+		}
+
+		.checkbox {
+			.label-area {
+				font-size: 13px;
+				color: var(--gray-800);
+			}
+		}
+	}
+}
+
+.product-page {
+	@include card($padding: var(--padding-md));
+	min-height: 70vh;
+
+	.product-title {
+		font-size: 16px;
+		font-weight: 500;
+		color: var(--text-color);
+	}
+
+	.product-code {
+		color: var(--gray-600);
+		font-size: 13px;
+	}
+
+	.product-description {
+		font-size: 13px;
+		color: var(--gray-800);
+	}
+
+
+
+	.product-image {
+		border-color: var(--table-border-color) !important;
+	 	img {
+			min-height: 320px;
+			max-height: 30rem;
+			min-width: 320px;
+		}
+	}
+
+	.item-slideshow-image {
+		height: 4rem;
+		width: 4rem;
+		object-fit: contain;
+		padding: 0.5rem;
+		border: 1px solid var(--table-border-color);
+		border-radius: 4px;
+		cursor: pointer;
+
+		&:hover, &.active {
+			border-color: $primary;
+		}
+	}
+
+	.item-cart {
+		.product-price {
+			font-size: 20px;
+			color: var(--text-color);
+			font-weight: 600;
+
+			.formatted-price {
+				color: var(--gray-600);
+				font-size: 14px;
+			}
+		}
+
+		.no-stock {
+			font-size: 14px;
+		}
+	}
+}
+
diff --git a/erpnext/public/scss/website.scss b/erpnext/public/scss/website.scss
index 24a1b3780c..56b717c424 100644
--- a/erpnext/public/scss/website.scss
+++ b/erpnext/public/scss/website.scss
@@ -1,29 +1,10 @@
 @import "frappe/public/scss/website/variables";
 
-.product-image img {
-	min-height: 20rem;
-	max-height: 30rem;
-}
-
 .filter-options {
 	max-height: 300px;
 	overflow: auto;
 }
 
-.item-slideshow-image {
-	height: 3rem;
-	width: 3rem;
-	object-fit: contain;
-	padding: 0.5rem;
-	border: 1px solid $border-color;
-	border-radius: 4px;
-	cursor: pointer;
-
-	&:hover, &.active {
-		border-color: $primary;
-	}
-}
-
 .address-card {
 	cursor: pointer;
 	position: relative;
@@ -43,10 +24,10 @@
 
 .check {
 	display: inline-flex;
-    padding: 0.25rem;
-    background: $primary;
-    color: white;
-    border-radius: 50%;
+	padding: 0.25rem;
+	background: $primary;
+	color: white;
+	border-radius: 50%;
 	font-size: 12px;
 	width: 24px;
 	height: 24px;
diff --git a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
index 3f0419e564..ace23bfd56 100644
--- a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
+++ b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
@@ -46,11 +46,11 @@
 			{%- set primary_action_label = values['slide_' + index + '_primary_action_label'] -%}
 			{%- set align = values['slide_' + index + '_content_align'] -%}
 			{%- set theme = values['slide_' + index + '_theme'] -%}
-			
+
 			{%- if image -%}
 				{{ slide(image, title, subtitle, primary_action, primary_action_label, index, align, theme) }}
 			{%- endif -%}
-		
+
 		{%- endfor -%}
 	</div>
 	{%- if show_controls -%}
@@ -82,31 +82,4 @@
 </script>
 
 <style>
-	.carousel-control {
-		height: 42px;
-		width: 42px;
-		display: flex;
-		align-items: center;
-    	justify-content: center;
-	    background: white;
-	    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 1px rgba(0, 0, 0, 0.06);
-	    border-radius: 100px;
-	}
-
-	.carousel-control-prev,
-	.carousel-control-next {
-		opacity: 1;
-	}
-
-	.carousel-body {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-	}
-
-	.carousel-content {
-		max-width: 400px;
-	}
 </style>
\ No newline at end of file
diff --git a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
index e69de29bb2..d39d1b7b50 100644
--- a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
+++ b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.html
@@ -0,0 +1,38 @@
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
+
+<div class="section-with-cards item-card-group-section">
+	<div class="item-group-header d-flex justify-content-between">
+		<div class="title-section">
+			{%- if title -%}
+			<h2 class="section-title">{{ title }}</h2>
+			{%- endif -%}
+			{%- if subtitle -%}
+			<p class="section-description">{{ subtitle }}</p>
+			{%- endif -%}
+		</div>
+		<div class="primary-action-section">
+			{%- if primary_action -%}
+			<a href="{{ action }}" class="btn btn-primary pull-right">
+				{{ primary_action_label }}
+			</a>
+			{%- endif -%}
+		</div>
+	</div>
+
+	<div class="row">
+		{%- for index in ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] -%}
+		{%- set item = values['card_' + index + '_item'] -%}
+			{%- if item -%}
+				{%- set item = frappe.get_doc("Item", item) -%}
+				{{ item_card(
+					item.item_name, item.image, item.route, item.description,
+					item.standard_rate, item.item_group, values['card_' + index + '_featured'],
+					True, "Center"
+				) }}
+			{%- endif -%}
+		{%- endfor -%}
+	</div>
+</div>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
index f1a70a99ad..ad087b0470 100644
--- a/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
+++ b/erpnext/shopping_cart/web_template/item_card_group/item_card_group.json
@@ -16,6 +16,21 @@
    "label": "Subtitle",
    "reqd": 0
   },
+  {
+   "__unsaved": 1,
+   "fieldname": "primary_action_label",
+   "fieldtype": "Data",
+   "label": "Primary Action Label",
+   "reqd": 0
+  },
+  {
+   "__islocal": 1,
+   "__unsaved": 1,
+   "fieldname": "primary_action",
+   "fieldtype": "Data",
+   "label": "Primary Action",
+   "reqd": 0
+  },
   {
    "fieldname": "card_1",
    "fieldtype": "Section Break",
@@ -36,264 +51,210 @@
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_2",
    "fieldtype": "Section Break",
    "label": "Card 2",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_2_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_2_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_3",
    "fieldtype": "Section Break",
    "label": "Card 3",
+   "options": "",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_3_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_3_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_4",
    "fieldtype": "Section Break",
    "label": "Card 4",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_4_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_4_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_5",
    "fieldtype": "Section Break",
    "label": "Card 5",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_5_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_5_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_6",
    "fieldtype": "Section Break",
    "label": "Card 6",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_6_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_6_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_7",
    "fieldtype": "Section Break",
    "label": "Card 7",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_7_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_7_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_8",
    "fieldtype": "Section Break",
    "label": "Card 8",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_8_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_8_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_9",
    "fieldtype": "Section Break",
    "label": "Card 9",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_9_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_9_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_10",
    "fieldtype": "Section Break",
    "label": "Card 10",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_10_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_10_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_11",
    "fieldtype": "Section Break",
    "label": "Card 11",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_11_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_11_featured",
    "fieldtype": "Check",
    "label": "Featured",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_12",
    "fieldtype": "Section Break",
    "label": "Card 12",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_12_item",
    "fieldtype": "Link",
    "label": "Item",
+   "options": "Item",
    "reqd": 0
   },
   {
-   "__islocal": 1,
-   "__unsaved": 1,
    "fieldname": "card_12_featured",
    "fieldtype": "Check",
    "label": "Featured",
@@ -301,7 +262,7 @@
   }
  ],
  "idx": 0,
- "modified": "2020-11-17 16:37:46.325181",
+ "modified": "2020-11-19 18:48:52.633045",
  "modified_by": "Administrator",
  "module": "Shopping Cart",
  "name": "Item Card Group",
diff --git a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
index 88ba7fd898..06b76af901 100644
--- a/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
+++ b/erpnext/shopping_cart/web_template/product_category_cards/product_category_cards.html
@@ -15,7 +15,7 @@
 </div>
 {%- endmacro -%}
 
-<div class="section-with-cards">
+<div class="section-with-cards product-category-section">
 	{%- if title -%}
 	<h2 class="section-title">{{ title }}</h2>
 	{%- endif -%}
@@ -37,17 +37,4 @@
 </div>
 
 <style>
-	.card-grid {
-		display: grid;
-		grid-gap: 15px;
-		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));;
-	}
-
-	.card {
-		border: none;
-	}
-
-	.card:hover {
-		box-shadow: 0px 16px 45px 6px rgba(0, 0, 0, 0.08), 0px 8px 10px -10px rgba(0, 0, 0, 0.04);
-	}
 </style>
diff --git a/erpnext/templates/generators/item/item.html b/erpnext/templates/generators/item/item.html
index d3691a6e99..55c45e256a 100644
--- a/erpnext/templates/generators/item/item.html
+++ b/erpnext/templates/generators/item/item.html
@@ -7,17 +7,19 @@
 {% endblock %}
 
 {% block page_content %}
-{% from "erpnext/templates/includes/macros.html" import product_image %}
-<div class="item-content">
-	<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
-		<div class="row mb-5">
-			{% include "templates/generators/item/item_image.html" %}
-			{% include "templates/generators/item/item_details.html" %}
+<div class="product-page">
+	{% from "erpnext/templates/includes/macros.html" import product_image %}
+	<div class="item-content">
+		<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
+			<div class="row mb-5">
+				{% include "templates/generators/item/item_image.html" %}
+				{% include "templates/generators/item/item_details.html" %}
+			</div>
+
+			{% include "templates/generators/item/item_specifications.html" %}
+
+			{{ doc.website_content or '' }}
 		</div>
-
-		{% include "templates/generators/item/item_specifications.html" %}
-
-		{{ doc.website_content or '' }}
 	</div>
 </div>
 {% endblock %}
diff --git a/erpnext/templates/generators/item/item_add_to_cart.html b/erpnext/templates/generators/item/item_add_to_cart.html
index dbf15de1e4..3210e2497f 100644
--- a/erpnext/templates/generators/item/item_add_to_cart.html
+++ b/erpnext/templates/generators/item/item_add_to_cart.html
@@ -6,10 +6,10 @@
 <div class="item-cart row mt-2" data-variant-item-code="{{ item_code }}">
 	<div class="col-md-12">
 		{% if cart_settings.show_price and product_info.price %}
-		<h4>
+		<div class="product-price">
 			{{ product_info.price.formatted_price_sales_uom }}
-			<small class="text-muted">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
-		</h4>
+			<small class="formatted-price">({{ product_info.price.formatted_price }} / {{ product_info.uom }})</small>
+		</div>
 		{% else %}
 			{{ _("Unit of Measurement") }} : {{ product_info.uom }}
 		{% endif %}
@@ -17,11 +17,11 @@
 		{% if cart_settings.show_stock_availability %}
 		<div>
 			{% if product_info.in_stock == 0 %}
-			<span class="text-danger">
+			<span class="text-danger no-stock">
 				{{ _('Not in stock') }}
 			</span>
 			{% elif product_info.in_stock == 1 %}
-			<span class="text-success">
+			<span class="text-success has-stock">
 				{{ _('In stock') }}
 				{% if product_info.show_stock_qty and product_info.stock_qty %}
 					({{ product_info.stock_qty[0][0] }})
diff --git a/erpnext/templates/generators/item/item_details.html b/erpnext/templates/generators/item/item_details.html
index 4cbecb0215..9a0bb5cfc3 100644
--- a/erpnext/templates/generators/item/item_details.html
+++ b/erpnext/templates/generators/item/item_details.html
@@ -1,14 +1,21 @@
 <div class="col-md-8">
 <!-- title -->
-<h1 itemprop="name">
+<div class="product-title" itemprop="name">
 	{{ item_name }}
-</h1>
-<p class="text-muted">
+</div>
+<p class="product-code">
 	<span>{{ _("Item Code") }}:</span>
 	<span itemprop="productID">{{ doc.name }}</span>
 </p>
+{% if has_variants %}
+	<!-- configure template -->
+	{% include "templates/generators/item/item_configure.html" %}
+{% else %}
+	<!-- add variant to cart -->
+	{% include "templates/generators/item/item_add_to_cart.html" %}
+{% endif %}
 <!-- description -->
-<div itemprop="description">
+<div class="product-description" itemprop="description">
 {% if frappe.utils.strip_html(doc.web_long_description or '') %}
 	{{ doc.web_long_description | safe }}
 {% elif frappe.utils.strip_html(doc.description or '')  %}
@@ -17,12 +24,4 @@
 	{{ _("No description given") }}
 {% endif  %}
 </div>
-
-{% if has_variants %}
-	<!-- configure template -->
-	{% include "templates/generators/item/item_configure.html" %}
-{% else %}
-	<!-- add variant to cart -->
-	{% include "templates/generators/item/item_add_to_cart.html" %}
-{% endif %}
 </div>
diff --git a/erpnext/templates/generators/item/item_image.html b/erpnext/templates/generators/item/item_image.html
index 5d46a45053..fa70ebe998 100644
--- a/erpnext/templates/generators/item/item_image.html
+++ b/erpnext/templates/generators/item/item_image.html
@@ -1,42 +1,42 @@
-<div class="col-md-4 h-100">
-{% if slides %}
-{{ product_image(slides[0].image, 'product-image') }}
-<div class="item-slideshow">
-	{% for item in slides %}
-	<img class="item-slideshow-image mt-2 {% if loop.first %}active{% endif %}"
-			src="{{ item.image }}" alt="{{ item.heading }}">
-	{% endfor %}
-</div>
-<!-- Simple image slideshow -->
-<script>
-	frappe.ready(() => {
-		$('.page_content').on('click', '.item-slideshow-image', (e) => {
-			const $img = $(e.currentTarget);
-			const link = $img.prop('src');
-			const $product_image = $('.product-image');
-			$product_image.find('a').prop('href', link);
-			$product_image.find('img').prop('src', link);
+<div class="col-md-4 h-100 d-flex">
+	{% if slides %}
+	<div class="item-slideshow d-flex flex-column mr-3">
+		{% for item in slides %}
+		<img class="item-slideshow-image mb-2 {% if loop.first %}active{% endif %}"
+				src="{{ item.image }}" alt="{{ item.heading }}">
+		{% endfor %}
+	</div>
+	{{ product_image(slides[0].image, 'product-image') }}
+	<!-- Simple image slideshow -->
+	<script>
+		frappe.ready(() => {
+			$('.page_content').on('click', '.item-slideshow-image', (e) => {
+				const $img = $(e.currentTarget);
+				const link = $img.prop('src');
+				const $product_image = $('.product-image');
+				$product_image.find('a').prop('href', link);
+				$product_image.find('img').prop('src', link);
 
-			$('.item-slideshow-image').removeClass('active');
-			$img.addClass('active');
-		});
-	})
-</script>
-{% else %}
-{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
-{% endif %}
+				$('.item-slideshow-image').removeClass('active');
+				$img.addClass('active');
+			});
+		})
+	</script>
+	{% else %}
+	{{ product_image(website_image or image or 'no-image.jpg', alt=website_image_alt or item_name) }}
+	{% endif %}
 
-<!-- Simple image preview -->
+	<!-- Simple image preview -->
 
-<div class="image-zoom-view" style="display: none;">
-	<button type="button" class="close" aria-label="Close">
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-		 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
-			<line x1="18" y1="6" x2="6" y2="18"></line>
-			<line x1="6" y1="6" x2="18" y2="18"></line>
-		</svg>
-	</button>
-</div>
+	<div class="image-zoom-view" style="display: none;">
+		<button type="button" class="close" aria-label="Close">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+			stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	</div>
 </div>
 <style>
 	.website-image {
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index ea6b00fc58..1523b0d9fd 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -8,9 +8,9 @@
 {% endmacro %}
 
 {% macro product_image(website_image, css_class="", alt="") %}
-    <div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
+	<div class="border text-center rounded h-100 {{ css_class }}" style="overflow: hidden;">
 		<img itemprop="image" class="website-image h-100 w-100" alt="{{ alt }}" src="{{ frappe.utils.quoted(website_image or 'no-image.jpg') | abs_url }}">
-    </div>
+	</div>
 {% endmacro %}
 
 {% macro media_image(website_image, name, css_class="") %}
@@ -18,13 +18,13 @@
 		{% if not website_image -%}
 		<div class="sidebar-standard-image"> <div class="standard-image" style="background-color: rgb(250, 251, 252);">{{name}}</div> </div>
 		{%- endif %}
-    	{% if website_image -%}
+		{% if website_image -%}
 			<a href="{{ frappe.utils.quoted(website_image) }}">
 				<img itemprop="image" src="{{ frappe.utils.quoted(website_image) | abs_url }}"
 					class="img-responsive img-thumbnail sidebar-image" style="min-height:100%; min-width:100%;">
 			</a>
-    	{%- endif %}
-    </div>
+		{%- endif %}
+	</div>
 {% endmacro %}
 
 {% macro render_homepage_section(section) %}
@@ -57,4 +57,61 @@
 </section>
 {% endif %}
 
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
+
+{%- macro item_card(title, image, url, description, rate, category, is_featured=False, is_full_width=False, align="Left") -%}
+{%- set align_items_class = resolve_class({
+	'align-items-end': align == 'Right',
+	'align-items-center': align == 'Center',
+	'align-items-start': align == 'Left',
+}) -%}
+{%- set col_size = 3 if is_full_width else 4 -%}
+{% if is_featured %}
+<div class="col-sm-{{ col_size*2 }} item-card">
+	<div class="card featured-item {{ align_items_class }}">
+		{% if image %}
+		<div class="row no-gutters">
+			<div class="col-md-6">
+				<img class="card-img" src="{{ image }}" alt="{{ title }}">
+			</div>
+			<div class="col-md-6">
+				{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+			</div>
+		</div>
+		{% else %}
+			<div class="col-md-12">
+				{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+			</div>
+		{% endif %}
+	</div>
+</div>
+{% else %}
+<div class="col-sm-{{ col_size }} item-card">
+	<div class="card {{ align_items_class }}">
+		{% if image %}
+		<img class="card-img" src="{{ image }}" alt="{{ title }}">
+		{% endif %}
+		{{ item_card_body(title, description, url, rate, category, is_featured, align) }}
+	</div>
+</div>
+{% endif %}
+{%- endmacro -%}
+
+{%- macro item_card_body(title, description, url, rate, category, is_featured, align) -%}
+{%- set align_class = resolve_class({
+	'text-right': align == 'Right',
+	'text-center': align == 'Center' and not is_featured,
+	'text-left': align == 'Left' or is_featured,
+}) -%}
+<div class="card-body {{ align_class }}">
+	<div class="product-title">{{ title or '' }}</div>
+	{% if is_featured %}
+	<div class="product-price">{{ rate or '' }}</div>
+	<div class="product-description ellipsis">{{ description or '' }}</div>
+	{% else %}
+	<div class="product-category">{{ category or '' }}</div>
+	<div class="product-price">{{ rate or '' }}</div>
+	{% endif %}
+</div>
+<a href="{{ url or '#' }}" class="stretched-link"></a>
+{%- endmacro -%}
\ No newline at end of file
diff --git a/erpnext/templates/includes/products_as_list.html b/erpnext/templates/includes/products_as_list.html
index 88910d0b46..9bf9fd95d7 100644
--- a/erpnext/templates/includes/products_as_list.html
+++ b/erpnext/templates/includes/products_as_list.html
@@ -1,4 +1,4 @@
-{% from "erpnext/templates/includes/macros.html" import product_image_square %}
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
 
 <a class="product-link product-list-link" href="{{ route|abs_url }}">
 	<div class='row'>
diff --git a/erpnext/www/all-products/index.html b/erpnext/www/all-products/index.html
index 0126b59c64..1d194ee374 100644
--- a/erpnext/www/all-products/index.html
+++ b/erpnext/www/all-products/index.html
@@ -1,12 +1,11 @@
 {% extends "templates/web.html" %}
-
 {% block title %}{{ _('Products') }}{% endblock %}
 {% block header %}
-<h1>{{ _('Products') }}</h1>
+<div class="mb-6">{{ _('Products') }}</div>
 {% endblock header %}
 
 {% block page_content %}
-<div class="row">
+<div class="row" style="display: none;">
 	<div class="col-8">
 		<div class="input-group input-group-sm mb-3">
 			<input type="search" class="form-control" placeholder="{{_('Search')}}"
@@ -31,27 +30,34 @@
 </div>
 
 <div class="row">
-	<div class="col-12 order-2 col-md-8 order-md-1 products-list">
-		{% if items %}
-			{% for item in items %}
-				{% include "erpnext/www/all-products/item_row.html" %}
-			{% endfor %}
-		{% else %}
-			{% include "erpnext/www/all-products/not_found.html" %}
-		{% endif %}
+	<div class="col-12 order-2 col-md-9 order-md-2 item-card-group-section">
+		<div class="row">
+			{% if items %}
+				{% for item in items %}
+					{% include "erpnext/www/all-products/item_row.html" %}
+				{% endfor %}
+			{% else %}
+				{% include "erpnext/www/all-products/not_found.html" %}
+			{% endif %}
+		</div>
 	</div>
-	<div class="col-12 order-1 col-md-4 order-md-2">
+	<div class="col-12 order-1 col-md-3 order-md-1">
 
 		{% if frappe.form_dict.start or frappe.form_dict.field_filters or frappe.form_dict.attribute_filters or frappe.form_dict.search %}
-		<a class="mb-3 d-inline-block" href="/all-products">{{ _('Clear filters') }}</a>
+
+
 		{% endif  %}
 
-		<div class="collapse d-md-block" id="product-filters">
+		<div class="collapse d-md-block mr-4 filters-section" id="product-filters">
+			<div class="d-flex justify-content-between align-items-center mb-5 title-section">
+				<div class="mb-4 filters-title" > {{ _('Filters') }} </div>
+				<a class="mb-4 clear-filters" href="/all-products">{{ _('Clear All') }}</a>
+			</div>
 			{% for field_filter in field_filters %}
 				{%- set item_field =  field_filter[0] %}
 				{%- set values =  field_filter[1] %}
-				<div class="mb-4">
-					<h6>{{ item_field.label }}</h6>
+				<div class="mb-4 filter-block pb-5">
+					<div class="filter-label mb-3">{{ item_field.label }}</div>
 
 					{% if values | len > 20 %}
 					<!-- show inline filter if values more than 20 -->
@@ -61,15 +67,15 @@
 					{% if values %}
 					<div class="filter-options">
 						{% for value in values %}
-						<div class="custom-control custom-checkbox" data-value="{{ value }}">
-							<input type="checkbox"
-								class="product-filter field-filter custom-control-input"
-								id="{{value}}"
-								data-filter-name="{{ item_field.fieldname }}"
-								data-filter-value="{{ value }}"
-							>
-							<label class="custom-control-label" for="{{value}}">
-								{{ value }}
+						<div class="checkbox" data-value="{{ value }}">
+							<label for="{{value}}">
+								<input type="checkbox"
+									class="product-filter field-filter"
+									id="{{value}}"
+									data-filter-name="{{ item_field.fieldname }}"
+									data-filter-value="{{ value }}"
+								>
+								<span class="label-area">{{ value }}</span>
 							</label>
 						</div>
 						{% endfor %}
@@ -81,9 +87,8 @@
 			{% endfor %}
 
 			{% for attribute in attribute_filters %}
-				<div class="mb-4">
-					<h6>{{ attribute.name }}</h6>
-
+				<div class="mb-4 filter-block pb-5">
+					<div class="filter-label mb-3">{{ attribute.name}}</div>
 					{% if values | len > 20 %}
 					<!-- show inline filter if values more than 20 -->
 					<input type="text" class="form-control form-control-sm mb-2 product-filter-filter"/>
@@ -92,16 +97,15 @@
 					{% if attribute.item_attribute_values %}
 					<div class="filter-options">
 						{% for attr_value in attribute.item_attribute_values %}
-						<div class="custom-control custom-checkbox" data-value="{{ value }}">
-							<input type="checkbox"
-								class="product-filter attribute-filter custom-control-input"
-								id="{{attr_value.name}}"
-								data-attribute-name="{{ attribute.name }}"
-								data-attribute-value="{{ attr_value.attribute_value }}"
-								{% if attr_value.checked %} checked {% endif %}
-							>
-							<label class="custom-control-label" for="{{attr_value.name}}">
-								{{ attr_value.attribute_value }}
+						<div class="checkbox">
+							<label data-value="{{ value }}">
+								<input type="checkbox"
+									class="product-filter attribute-filter"
+									id="{{attr_value.name}}"
+									data-attribute-name="{{ attribute.name }}"
+									data-attribute-value="{{ attr_value.attribute_value }}"
+									{% if attr_value.checked %} checked {% endif %}>
+									<span class="label-area">{{ attr_value.attribute_value }}</span>
 							</label>
 						</div>
 						{% endfor %}
@@ -158,6 +162,4 @@
 	});
 </script>
 
-{% endblock %}
-
-
+{% endblock %}
\ No newline at end of file
diff --git a/erpnext/www/all-products/item_row.html b/erpnext/www/all-products/item_row.html
index 9e628265aa..b5280eacb7 100644
--- a/erpnext/www/all-products/item_row.html
+++ b/erpnext/www/all-products/item_row.html
@@ -1,24 +1,7 @@
-<div class="card mb-3">
-	<div class="row no-gutters">
-		<div class="col-md-3">
-			<div class="card-body">
-				<a class="no-underline" href="/{{ item.route }}">
-					<img class="website-image" src="{{ item.website_image or item.image or 'no-image.jpg' }}" alt="{{ item.item_name }}">
-				</a>
-			</div>
-		</div>
-		<div class="col-md-9">
-			<div class="card-body">
-				<h5 class="card-title">
-					<a class="text-dark" href="/{{ item.route }}">
-						{{ item.item_name or item.name }}
-					</a>
-				</h5>
-				<p class="card-text">
-					{{ item.website_description or item.description or '<i class="text-muted">No description</i>' }}
-				</p>
-				<a href="/{{ item.route }}" class="btn btn-sm btn-light">{{ _('More details') }}</a>
-			</div>
-		</div>
-	</div>
-</div>
+{% from "erpnext/templates/includes/macros.html" import item_card, item_card_body %}
+
+{{ item_card(
+	item.item_name or item.name, item.website_image or item.image, item.route, item.website_description or item.description,
+	item.standard_rate, item.item_group
+) }}
+