diff --git a/src/components/Item.js b/src/components/Item.js
index 2f03fa7..7ef6e22 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -168,37 +168,50 @@ const Item = ({
               lineHeight: '1rem',
               marginLeft: 10
             }}>
-              {promoPrice && promoPrice != 0 && promoPrice != '' &&
-              <div style={{
-                position: 'relative',
-                marginTop: '0.125rem',
-                display: 'flex',
-                width: 'max-content',
-                alignItems: 'center',
-                whiteSpace: 'nowrap',
-                borderRadius: '9999px',
-                backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
-                padding: '0.25rem 0.75rem',
-                color: 'rgb(255, 255, 255)',
-                fontSize: '0.75rem',
-                fontWeight: 600,
-                lineHeight: '1rem'
-              }}>
-                Promo
-              </div>
-}
-              <div style={{ display: 'flex' }}>
-                <span style={{
-                  marginLeft: '1rem',
-                  marginRight: '0.5rem',
-                  marginTop: '0.125rem'
-                }}>{promoPrice}</span>
-                <span style={{
-                  marginTop: '0.125rem',
-                  color: 'rgb(114, 114, 114)',
-                  textDecoration: 'line-through'
-                }}>{initialPrice}</span>
-              </div>
+              {promoPrice && promoPrice != 0 && promoPrice != '' ?
+                <>
+                  <div style={{
+                    position: 'relative',
+                    marginTop: '0.125rem',
+                    display: 'flex',
+                    width: 'max-content',
+                    alignItems: 'center',
+                    whiteSpace: 'nowrap',
+                    borderRadius: '9999px',
+                    backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
+                    padding: '0.25rem 0.75rem',
+                    color: 'rgb(255, 255, 255)',
+                    fontSize: '0.75rem',
+                    fontWeight: 600,
+                    lineHeight: '1rem'
+                  }}>
+                    Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
+                  </div>
+
+                  <div style={{ display: 'flex' }}>
+                    <span style={{
+                      marginLeft: '1rem',
+                      marginRight: '0.5rem',
+                      marginTop: '0.125rem'
+                    }}>{promoPrice}</span>
+                    <span style={{
+                      marginTop: '0.125rem',
+                      color: 'rgb(114, 114, 114)',
+                      textDecoration: 'line-through'
+                    }}>{initialPrice}</span>
+                  </div>
+                </>
+                :
+                <>
+
+                  <div style={{ display: 'flex' }}>
+                    <span style={{
+                      marginRight: '0.5rem',
+                      marginTop: '0.125rem'
+                    }}>{initialPrice}</span>
+                  </div>
+                </>
+                }
             </div>
           )}
 
@@ -250,7 +263,7 @@ const Item = ({
               <div className={styles.itemQty}>
                 <button
                   className={styles.addButton}
-                  style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#73a585' : 'gray'}` }}
+                  style={{ backgroundColor: !isAvailable ? "" : "inherit", border: `2px solid ${isAvailable ? 'inherit' : 'gray'}`, color: `${isAvailable ? '#a8c7a9' : 'gray'}` }}
                   onClick={handlePlusClick}
                   disabled={!isAvailable} // Optionally disable the button if not available
                 >
@@ -264,7 +277,7 @@ const Item = ({
                   style={{
                     backgroundColor: "white",
                     width: "150px",
-                    color: '#73a585'
+                    color: '#a8c7a9'
                   }}
                   onClick={isBeingEdit ? handleUpdate : handleCreate}
                 >
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index ebcd450..8391975 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -153,8 +153,8 @@
   align-items: center;
   font-size: 0.9rem;
   margin-left: 5px;
-  color: rgb(115, 165, 133);
-  fill: rgb(115, 165, 133);
+  color: #a8c7a9;
+  fill: #a8c7a9;
   height: 40px;
 }
 
@@ -182,7 +182,7 @@
 
 .addButton {
   background-color: #ffffff;
-    border: 2px solid #73a585;
+    border: 2px solid #a8c7a9;
     /* border: none; */
     display: inline-block;
     font-size: 14px;