diff --git a/src/components/Item.js b/src/components/Item.js
index c38e60f..47579d5 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -94,21 +94,21 @@ const Item = ({
       <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
         {!forInvoice && (
           // <div className={styles.imageContainer}>
-            <img
-              src={
-                previewUrl
-              }
-              onError={({ currentTarget }) => {
-                currentTarget.onerror = null; // prevents looping
-                currentTarget.src =
-                  "https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
-              }}
-              alt={itemName}
-              style={{
-                filter: !isAvailable ? "grayscale(100%)" : "none",
-              }}
-              className={styles.imageContainer}
-            />
+          <img
+            src={
+              previewUrl
+            }
+            onError={({ currentTarget }) => {
+              currentTarget.onerror = null; // prevents looping
+              currentTarget.src =
+                "https://png.pngtree.com/png-vector/20221125/ourmid/pngtree-no-image-available-icon-flatvector-illustration-pic-design-profile-vector-png-image_40966566.jpg";
+            }}
+            alt={itemName}
+            style={{
+              filter: !isAvailable ? "grayscale(100%)" : "none",
+            }}
+            className={styles.imageContainer}
+          />
           // </div>
         )}
         <div className={styles.itemDetails}>
@@ -142,17 +142,17 @@ const Item = ({
           disabled={!blank && !isBeingEdit}
         /> */}
           <h3 style={{
-  textTransform: 'capitalize',
-  margin: '5px 0px 10px 10px',
-  fontSize: '16px',
-  display: '-webkit-box',
-  WebkitBoxOrient: 'vertical',
-  overflow: 'hidden',
-  WebkitLineClamp: 2,
-  textOverflow: 'ellipsis'
-}}>
-  {itemName}
-</h3>
+            textTransform: 'capitalize',
+            margin: '5px 0px 10px 10px',
+            fontSize: '16px',
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            WebkitLineClamp: 2,
+            textOverflow: 'ellipsis'
+          }}>
+            {itemName}
+          </h3>
           {forInvoice && (
             <>
               <p className={styles.multiplySymbol}>x</p>
@@ -224,7 +224,7 @@ const Item = ({
                     }}>{initialPrice}</span>
                   </div>
                 </>
-                }
+              }
             </div>
           )}
 
@@ -300,7 +300,7 @@ const Item = ({
             ))}
 
           {forInvoice && (
-            <p className={styles.itemPriceInvoice}>Rp {itemQty * itemPrice}</p>
+            <p className={styles.itemPriceInvoice}>Rp {itemQty * (promoPrice > 0? promoPrice : itemPrice)}</p>
           )}
         </div>
         {forCart && (
@@ -316,13 +316,14 @@ const Item = ({
       </div>
       {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
         <div>
-          <p style={{ 
+          <p style={{
             maxHeight: '34px',
-  display: '-webkit-box',
-  WebkitBoxOrient: 'vertical',
-  overflow: 'hidden',
-  WebkitLineClamp: 2,
-  textOverflow: 'ellipsis', color: '#5f5f5f', fontSize: '14px', padding: '5px', margin: 0 }}>{itemDescription}</p>
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            WebkitLineClamp: 2,
+            textOverflow: 'ellipsis', color: '#5f5f5f', fontSize: '14px', padding: '5px', margin: 0
+          }}>{itemDescription}</p>
         </div>
       }
     </div>
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index 3c6b497..85ff8b3 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -52,10 +52,6 @@
   position: relative;
   width: 26vw;
   height: 26vw;
-  border-radius: 10px;
-  margin-right: 10px;
-  object-fit: cover;
-  position: relative;
 }
 
 .overlay {
@@ -145,7 +141,6 @@
   font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
-  width: calc(100% - 15px); /* Adjust the width to prevent overflow */
   font-size: 0.9rem;
   margin-left: 5px;
   color: #d9c61c;
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index a2c16cf..17b53ed 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -25,7 +25,7 @@
   /* filter: blur(1.5px);
   -webkit-filter: blur(1.5px); */
   /* border-radius: 13px 13px 0 0; */
-  background-color: #8ec781;
+  background-color: #6ec35a;
   /* Rounded corners at the top */
   text-align: right;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 214932e..1b0dc80 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -296,7 +296,7 @@ function CafePage({
                   {cartItemsLength > 0 &&
                     <div style={{ marginTop: '10px', height: '40px', position: 'sticky', bottom: '40px', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
 
-                      <div onClick={goToCart} style={{ backgroundColor: 'rgb(142, 199, 129)', width: '70vw', height: '40px', borderRadius: '30px', display: 'flex', justifyContent: 'space-between', padding: '0 20px' }}>
+                      <div onClick={goToCart} style={{ backgroundColor: '#6ec35a', width: '70vw', height: '40px', borderRadius: '30px', display: 'flex', justifyContent: 'space-between', padding: '0 20px' }}>
                         <div style={{ display: 'flex', flexWrap: 'wrap', alignContent: 'center' }}>{cartItemsLength} item</div>
                         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '130px' }}>
                           <span style={{ whiteSpace: 'nowrap' }}>Rp{totalPrice}</span>
@@ -311,7 +311,7 @@ function CafePage({
                     </div>
                   }
                 </div>
-                <div style={{ marginTop: '30px', height: '68px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '25px', lineHeight: '2.25rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}><div>KEDAIMASTER</div></div>
+                <div style={{ marginTop: '30px', height: '27px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '15px', lineHeight: '1rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}><div>KEDAIMASTER</div></div>
               </body>
             </div>
           )
diff --git a/src/pages/Cart.js b/src/pages/Cart.js
index 0696338..17f5277 100644
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -189,7 +189,7 @@ export default function Invoice({ shopId, table, sendParam, deviceType, socket }
     setEmail(event.target.value);
   };
   return (
-    <div className={styles.Invoice} style={{height: (getItemsByCafeId(shopId).length > 0 ? '': 'calc(100vh - 75px)'), minHeight: (getItemsByCafeId(shopId).length > 0 ? 'calc(100vh - 210px)': '') }}>
+    <div className={styles.Invoice} style={{height: (getItemsByCafeId(shopId).length > 0 ? '': '100vh'), minHeight: (getItemsByCafeId(shopId).length > 0 ? 'calc(100vh - 210px)': '') }}>
       
       <div style={{ marginTop: "50px" }}></div>
       <h2 className={styles["Invoice-title"]}>Keranjang</h2>