diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 490a7c4af7..596376534e 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -31,6 +31,14 @@ body.product-page {
 .carousel-control-prev,
 .carousel-control-next {
 	opacity: 1;
+	width: 8%;
+
+	@media (max-width: 1200px) {
+		width: 10%;
+	}
+	@media (max-width: 768px) {
+		width: 15%;
+	}
 }
 
 .carousel-body {
@@ -43,6 +51,8 @@ body.product-page {
 
 .carousel-content {
 	max-width: 400px;
+	margin-left: 5rem; 
+	margin-right: 5rem; 
 }
 
 .card {
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 2cff4b3707..e560f4ad7d 100644
--- a/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
+++ b/erpnext/shopping_cart/web_template/hero_slider/hero_slider.html
@@ -1,7 +1,7 @@
 {%- macro slide(image, title, subtitle, action, label, index, align="Left", theme="Dark") -%}
 {%- set align_class = resolve_class({
 	'text-right': align == 'Right',
-	'text-centre': align == 'Center',
+	'text-centre': align == 'Centre',
 	'text-left': align == 'Left',
 }) -%}
 
@@ -15,7 +15,7 @@
 	<div class="carousel-body container d-flex {{ align_class }}">
 		<div class="carousel-content align-self-center">
 			{%- if title -%}<h1 class="{{ heading_class }}">{{ title }}</h1>{%- endif -%}
-			{%- if subtitle -%}<p class="text-muted mt-2">{{ subtitle }}</p>{%- endif -%}
+			{%- if subtitle -%}<p class="{{ heading_class }} mt-2">{{ subtitle }}</p>{%- endif -%}
 			{%- if action -%}
 			<a href="{{ action }}" class="btn btn-primary mt-3">
 				{{ label }}