diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
new file mode 100644
index 0000000..16a2bc5
--- /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 24a1b37..56b717c 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;