diff --git a/public/bin/selector/script.js b/public/bin/selector/script.js
index 876ed018..bd792216 100644
--- a/public/bin/selector/script.js
+++ b/public/bin/selector/script.js
@@ -120,6 +120,30 @@ function addPartToPage(part) {
 
 
     } 
+
+    if(part.displayAmount && part.currentStockIncludingNonFulfilled < 6 && !part.outOfStock){
+        let stockDiv = document.createElement("div");
+        stockDiv.className = "amountRemaining";
+
+        let stockText = document.createElement("h1");
+        stockText.innerText = part.currentStockIncludingNonFulfilled + " left in stock";
+        stockText.className = "outOfStockText";
+
+        let stockInnerText = document.createElement("p");
+        stockInnerText.innerText = "Shipping times may be delayed";
+        stockInnerText.className = "outOfStockInnerText";
+
+        stockDiv.appendChild(stockText)
+        stockDiv.appendChild(stockInnerText)
+        selectorItem.appendChild(stockDiv)
+
+        console.log("display amunt" + part.displayAmount);
+        console.log("current stock" + part.currentStockIncludingNonFulfilled);
+
+        console.log("out of stock" + part.outOfStock);
+
+
+    }
     selectorItem.addEventListener("click", () => {
         let isSelected = selectorItem.className.includes("selected")
         if (isSelected) {
diff --git a/public/bin/selector/style.css b/public/bin/selector/style.css
index 85b44cb9..0ee6261f 100644
--- a/public/bin/selector/style.css
+++ b/public/bin/selector/style.css
@@ -59,20 +59,32 @@
     cursor: pointer;
     filter: grayscale(0) brightness(1);
     transition: filter 300ms;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for a more polished look */
+
 }
 
 .new-tag {
     position: absolute;
-    top: 10%;
-    right: -35%;
+    top: 17%;
+    right: -38%;
     transform: translate(-50%, -50%) rotate(45deg); /* Adjust rotation angle as needed */
     width: 60%;
     height: auto;
 
 }
 
+.new-tag:hover{
+   
+        transform: translate(-50%, -50%) rotate(30deg); /* Slight rotation on hover */
+    
+}
+
 .selector-item:hover {
-    background-color: #bcbda7;}
+    background-color: #bcbda7;
+    transform: translate(0%, 0%) scale(1.05); /* Slight rotation on hover */
+
+}
+    
 
 
 .selector-item.disabled {
@@ -123,32 +135,54 @@
 
 .outOfStock{
     position: absolute;
-    background-color: rgb(228, 245, 37);
+    background-color: aliceblue;
     top: 17%;
     left: 23%;
     transform: translate(-50%, -50%) rotate(-35deg); /* Adjust rotation angle as needed */
     display: flex;
-    align-items: center;
     display: table-column;
+    border-radius: 20px; /* Smooth corners */
+    background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%); /* Nice gradient color */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for a more polished look */
+}
+
+.outOfStock:hover {
+    transform: translate(-50%, -50%) rotate(-30deg); /* Slight rotation on hover */
+}
+
+.amountRemaining{
+    position: absolute;
+    background-color: aliceblue;
+    top: 17%;
+    left: 23%;
+    transform: translate(-50%, -50%) rotate(-35deg); /* Adjust rotation angle as needed */
+    display: flex;
+    display: table-column;
+    border-radius: 20px; /* Smooth corners */
+    background: linear-gradient(135deg, #f8cc08 0%, #df3d01 100%); /* Nice gradient color */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for a more polished look */
+}
+
+.amountRemaining:hover {
+    transform: translate(-50%, -50%) rotate(-30deg); /* Slight rotation on hover */
 }
 
 .outOfStockText {    
-    width: 60%;
-    height: auto;
-    white-space: nowrap;
+
+    position: relative;  
     padding-top: 10px;
     padding-left: 10px;
     padding-right: 10px;
+    white-space: nowrap;
 
 }
 
 .outOfStockInnerText {
-    width: 20%;
-    height: auto;
-    white-space: nowrap;
-    padding-bottom: 10px;
+    position: relative;  
     padding-left: 10px;
     padding-right: 10px;
+    white-space: nowrap;
+    padding-bottom: 10px;
    
 }