diff --git a/ShopOnline.Web/Pages/DisplayCustomSpinner.razor b/ShopOnline.Web/Pages/DisplayCustomSpinner.razor
new file mode 100644
index 0000000..77318ca
--- /dev/null
+++ b/ShopOnline.Web/Pages/DisplayCustomSpinner.razor
@@ -0,0 +1 @@
+<div class="lds-spin"><i class="custom fa-regular fa-heart fa-10x" style="background: transparent;"></i></div>
\ No newline at end of file
diff --git a/ShopOnline.Web/Pages/DisplayCustomSpinner.razor.css b/ShopOnline.Web/Pages/DisplayCustomSpinner.razor.css
new file mode 100644
index 0000000..37660cd
--- /dev/null
+++ b/ShopOnline.Web/Pages/DisplayCustomSpinner.razor.css
@@ -0,0 +1,47 @@
+.lds-spin {
+    display: inline-block;
+    transform: translateZ(1px);
+}
+
+    .lds-spin > i {
+        margin-top: 2em;
+        padding: 30px;
+        border-radius: 65%;
+        display: inline-block;
+        box-shadow:  inset 0 0 50px #fff, /* inner white */
+            inset 20px 0 80px #f0f, /* inner left magenta short */
+            inset -20px 0 80px #0ff, /* inner right cyan short */
+            inset 20px 0 300px #f0f, /* inner left magenta broad */
+            inset -20px 0 300px #0ff, /* inner right cyan broad */
+            0 0 50px #fff, /* outer white */
+            -10px 0 80px #f0f, /* outer left magenta */
+            10px 0 80px #0ff; /* outer right cyan */
+        animation: lds-spin 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+        color: floralwhite;
+    }
+
+
+
+.custom {
+    background: transparent;
+    
+}
+
+@keyframes lds-spin {
+    0%, 100% {
+        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+    }
+
+    0% {
+        transform: rotateY(0deg);
+    }
+
+    50% {
+        transform: rotateY(1800deg);
+        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+    }
+
+    100% {
+        transform: rotateY(3600deg);
+    }
+}
diff --git a/ShopOnline.Web/Pages/ProductDetails.razor b/ShopOnline.Web/Pages/ProductDetails.razor
index c8c4720..4de3944 100644
--- a/ShopOnline.Web/Pages/ProductDetails.razor
+++ b/ShopOnline.Web/Pages/ProductDetails.razor
@@ -5,7 +5,7 @@
 {
     <div class="row d-flex justify-content-center">
         <div class="col-md-1">
-            <DisplaySpinner />
+            <DisplayCustomSpinner />
         </div>
     </div>
 }
diff --git a/ShopOnline.Web/Pages/Products.razor b/ShopOnline.Web/Pages/Products.razor
index 9e0a5c0..10ef51b 100644
--- a/ShopOnline.Web/Pages/Products.razor
+++ b/ShopOnline.Web/Pages/Products.razor
@@ -6,7 +6,7 @@
 {
     <div class="row d-flex justify-content-center">
         <div class="col-md-1">
-            <DisplaySpinner/>
+            <DisplayCustomSpinner/>
         </div>
     </div>
 
diff --git a/ShopOnline.Web/Pages/ShoppingCart.razor b/ShopOnline.Web/Pages/ShoppingCart.razor
index 8215013..cfaa2a8 100644
--- a/ShopOnline.Web/Pages/ShoppingCart.razor
+++ b/ShopOnline.Web/Pages/ShoppingCart.razor
@@ -4,7 +4,7 @@
 @if(ShoppingCartItems == null && ErrorMessage == null) {
     <div class="row d-flex justify-content-center">
         <div class="col-md-1">
-            <DisplaySpinner />
+            <DisplayCustomSpinner />
         </div>
     </div>
 }