diff --git a/shop/static/shop/css/shop.css b/shop/static/shop/css/shop.css
index 824a705..1384488 100644
--- a/shop/static/shop/css/shop.css
+++ b/shop/static/shop/css/shop.css
@@ -541,3 +541,8 @@ v .cart-table {
 .next:hover {
     opacity: 1;
 }
+
+.color-sample.selected {
+    border: 3px solid #90ee90 !important; /* Use your light-green color */
+    transform: scale(1.1); /* Makes the selected color slightly larger */
+}
diff --git a/shop/templates/shop/product_item.html b/shop/templates/shop/product_item.html
index 8ad9ba7..e33b840 100644
--- a/shop/templates/shop/product_item.html
+++ b/shop/templates/shop/product_item.html
@@ -137,7 +137,9 @@ function selectColor(productId, colorId, colorName, element) {
 
     // Remove selected class from all colors
     const colorSamples = element.parentElement.querySelectorAll('.color-sample');
-    colorSamples.forEach(sample => sample.classList.remove('selected'));
+    colorSamples.forEach(sample => {
+        sample.classList.remove('selected');
+    });
 
     // Add selected class to clicked color
     element.classList.add('selected');