diff --git a/src/App.css b/src/App.css
index 04ebe4c..810e639 100644
--- a/src/App.css
+++ b/src/App.css
@@ -64,6 +64,11 @@ body {
 
 /* removed two-column layout; reverted to single column */
 
+/* Ensure sticky cart bar stays above item overlays */
+.StickyCartBar {
+  z-index: 3000 !important;
+}
+
 .App-link {
   color: #61dafb;
 }
diff --git a/src/components/Item.js b/src/components/Item.js
index 7d48540..1e4234e 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -4,6 +4,7 @@ const Item = ({
   blank,
   forCart,
   forInvoice,
+  portrait,
   name: initialName,
   description: initialDescription,
   price: initialPrice,
@@ -53,10 +54,10 @@ const Item = ({
   };
 
   const handleCreate = () => {
-    handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
+    handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, promoPrice);
   };
   const handleUpdate = () => {
-    handleUpdateItem(itemName, itemPrice, selectedImage, previewUrl);
+    handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, promoPrice);
   };
 
   const handleRemoveClick = () => {
@@ -94,21 +95,57 @@ const Item = ({
     setItemName(event.target.value);
   };
 
+  const toTitleCase = (str) => {
+    if (!str) return str;
+    return String(str)
+      .toLowerCase()
+      .replace(/(^|[\s\-/'])([a-zA-Z\u00C0-\u024F])/g, (m, p1, p2) => p1 + p2.toUpperCase());
+  };
+
+  const displayName = toTitleCase(itemName);
+
   return (
-    <div className={`${!last && !forInvoice ? styles.notLast : ""}`}>
-      <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
+    <div className={`${(!portrait && !last && !forInvoice) ? styles.notLast : ""}`}>
+      <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} ${portrait ? styles.itemPortrait : ""} `}>
         {!forInvoice && (
-          <img
-            src={previewUrl}
-            onError={({ currentTarget }) => {
-              currentTarget.onerror = null;
-              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 className={styles.imageWrap}>
+            <img
+              src={previewUrl}
+              onError={({ currentTarget }) => {
+                currentTarget.onerror = null;
+                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}
+            />
+            {promoPrice && promoPrice != 0 && promoPrice != '' && (
+              <div className={styles.promoPill}>Promo</div>
+            )}
+            {portrait && (
+              <>
+                <div className={styles.overlayName}>{displayName}</div>
+                <div className={styles.bottomOverlay}>
+                  <div className={styles.overlayPriceCol}>
+                    {(promoPrice && promoPrice != 0 && promoPrice != '') ? (
+                      <>
+                        <span className={styles.overlayOriginal}>Rp {formatCurrency(initialPrice)}</span>
+                        <span className={styles.overlayPromo}>Rp {formatCurrency(promoPrice)}</span>
+                      </>
+                    ) : (
+                      <span className={styles.overlayPromo}>Rp {formatCurrency(initialPrice)}</span>
+                    )}
+                  </div>
+                  <div className={styles.qtyGroup}>
+                    <button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
+                    <span className={styles.qtyVal}>{itemQty}</span>
+                    <button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
         )}
         <div className={styles.itemDetails}>
           {forInvoice &&
@@ -129,37 +166,27 @@ const Item = ({
             </svg>
 
           }
-          {/* <input
-          className={`${
-            forInvoice ? styles.itemInvoiceName : styles.itemName
-          } ${isBeingEdit || blank ? styles.blank : styles.notblank} ${
-            !isAvailable ? styles.disabled : ""
-          }`}
-          value={itemName}
-          placeholder="Nama item"
-          onChange={handleNameChange}
-          disabled={!blank && !isBeingEdit}
-        /> */}
-          <div style={{ marginRight: forInvoice ? 10 : 0 }}>
-            <h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{itemName}</h3>
-            {!forInvoice && (
-              <div className={styles.priceRow}>
-                {promoPrice && promoPrice != 0 && promoPrice != '' ? (
-                  <>
-                    <div className={styles.promoBadge} style={{ background: !isAvailable ? 'gray' : undefined }}>
-                      Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
-                    </div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <span className={styles.priceNow}>Rp {formatCurrency(promoPrice)}</span>
-                      <span className={styles.priceOld}>Rp {formatCurrency(initialPrice)}</span>
-                    </div>
-                  </>
-                ) : (
-                  <span className={styles.priceNow}>Rp {formatCurrency(initialPrice)}</span>
-                )}
-              </div>
-            )}
-          </div>
+          {/* Title under image for portrait, non-overlay */}
+          {portrait && null}
+          {!portrait && (
+            <div style={{ marginRight: forInvoice ? 10 : 0 }}>
+              <h3 className={styles.title} style={{ width: forInvoice ? 160 : 'auto' }}>{displayName}</h3>
+              {!forInvoice && (
+                <div className={styles.priceRow}>
+                  {promoPrice && promoPrice != 0 && promoPrice != '' ? (
+                    <>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                        <span className={`${styles.itemPriceList} ${styles.promo}`}>Rp {formatCurrency(promoPrice)}</span>
+                        <span className={`${styles.itemPriceList} ${styles.original}`}>Rp {formatCurrency(initialPrice)}</span>
+                      </div>
+                    </>
+                  ) : (
+                    <span className={styles.itemPriceList}>Rp {formatCurrency(initialPrice)}</span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
           {forInvoice && (
             <>
               <p className={styles.multiplySymbol}>x</p>
@@ -168,30 +195,30 @@ const Item = ({
           )}
 
           {!forInvoice && (
-            !isBeingEdit && itemQty > 0 ? (
-              <div className={styles.itemQty}>
-                <div className={styles.qtyGroup}>
-                  <button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi">-</button>
-                  {!blank && !isBeingEdit ? (
-                    <span className={styles.qtyVal}>{itemQty}</span>
-                  ) : (
-                    <input className={styles.itemQtyInput} value={itemQty} onChange={handleQtyChange} disabled={!blank && !isBeingEdit} />
-                  )}
-                  <button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah">+</button>
+            portrait ? (
+              (blank || isBeingEdit) ? (
+                <div className={styles.itemQty}>
+                  <button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', minWidth: 90, height: 36, fontSize: 14 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
+                    {isBeingEdit ? 'Simpan' : 'Buat'}
+                  </button>
                 </div>
-              </div>
-            ) : !blank && !isBeingEdit ? (
-              <div className={styles.itemQty}>
-                <button className={styles.addButton} onClick={handlePlusClick} disabled={!isAvailable}>
-                  Pesan
-                </button>
-              </div>
+              ) : null
             ) : (
-              <div className={styles.itemQty}>
-                <button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', width: 150 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
-                  {isBeingEdit ? 'Simpan' : 'Buat'}
-                </button>
-              </div>
+              !isBeingEdit ? (
+                <div className={styles.itemQty}>
+                  <div className={styles.qtyGroup}>
+                    <button className={styles.qtyBtn} onClick={handleNegativeClick} aria-label="Kurangi" style={{ width: 32, height: 32, fontSize: 18 }}>-</button>
+                    <span className={styles.qtyVal}>{itemQty}</span>
+                    <button className={styles.qtyBtn} onClick={handlePlusClick} aria-label="Tambah" style={{ width: 32, height: 32, fontSize: 18 }}>+</button>
+                  </div>
+                </div>
+              ) : (
+                <div className={styles.itemQty}>
+                  <button className={styles.addButton} style={{ backgroundColor: '#ffffff', color: 'var(--brand-sage, #6B8F71)', borderColor: 'var(--brand-sage, #6B8F71)', width: 130, height: 36, fontSize: 14 }} onClick={isBeingEdit ? handleUpdate : handleCreate}>
+                    {isBeingEdit ? 'Simpan' : 'Buat'}
+                  </button>
+                </div>
+              )
             )
           )}
 
@@ -204,19 +231,10 @@ const Item = ({
             ⓧ
           </div>
         )}
-        {/* {blank && (
-        <button className={styles.createItem} onClick={handleCreate}>
-          Create Item
-        </button>
-      )} */}
       </div>
-      {itemDescription && itemDescription != 'undefined' && itemDescription?.length ? (
-        <div>
-          <p className={styles.desc} style={{ padding: '4px 6px', margin: 0 }}>{itemDescription}</p>
-        </div>
-      ) : null}
+      {null}
     </div>
   );
 };
 
-export default Item;
+export default Item;
\ No newline at end of file
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index 0a74e5f..854cec0 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -1,7 +1,6 @@
 .itemContainer {
   display: flex;
   flex-direction: column;
-  /* gap: 10px; */
 }
 
 .item {
@@ -9,24 +8,40 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  gap: 10px;
-  padding: 8px 10px;
-  margin: 6px 0;
+  gap: 8px; /* Increased gap for better spacing */
+  padding: 6px 8px; /* Increased padding for better touch targets */
+  margin: 8px 0; /* Increased margin for better separation */
   border: 1px solid #e3ece6;
-  border-radius: 12px;
+  border-radius: 8px; /* Slightly increased border radius */
   background: var(--brand-sage-50, #F0F6F2);
   box-shadow: 0 1px 3px rgba(0,0,0,0.03);
   box-sizing: border-box;
   transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 }
-.item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-color: #d9e6de; }
+.item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #d9e6de; }
 
-.item:not(.itemInvoice) {
-  /* border-top: 2px solid #00000017; */
+/* Portrait variant for cafe page grid */
+.itemPortrait {
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
 }
+.imageWrap { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
+.imageContainer { display: block; width: 100%; height: 100%; object-fit: cover; }
+.itemPortrait .imageWrap { width: 100%; height: auto; aspect-ratio: 1 / 1; }
+.itemPortrait .imageContainer { border-radius: 6px; }
+.itemPortrait .itemDetails { align-items: flex-start; text-align: left; gap: 8px; } /* Increased gap */
+.itemPortrait .itemQty { justify-content: flex-start; }
+
+.itemPortrait .title { font-size: 14px; } /* Increased font size */
+.itemPortrait .priceNow { font-size: 13px; } /* Increased font size */
 
 .notLast{
-  padding-bottom: 10px;
+  padding-bottom: 12px; /* Increased padding */
   border-bottom: 2px solid #00000017;
 }
 
@@ -34,14 +49,14 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
-  font-size: 18px;
+  font-size: 20px; /* Increased font size */
   margin-top: 0px;
   margin-bottom: 0px;
   padding-top: 0px;
 }
 
 .itemInvoice:last-child {
-  margin-bottom: 0; /* Remove margin-bottom for the last child */
+  margin-bottom: 0;
 }
 
 .itemImage {
@@ -49,29 +64,29 @@
   height: 100%;
 }
 
-.imageContainer {
+.item:not(.itemPortrait) .imageContainer {
   position: relative;
-  width: clamp(68px, 18vw, 96px);
-  height: clamp(68px, 18vw, 96px);
-  border-radius: 10px;
+  width: clamp(80px, 20vw, 110px); /* Increased size */
+  height: clamp(80px, 20vw, 110px); /* Increased size */
+  border-radius: 12px; /* Increased border radius */
   object-fit: cover;
 }
 
 .overlay {
   position: absolute;
-  top: 15px;
-  left: 8px;
-  right: 8px;
-  bottom: 15px;
+  top: 18px; /* Increased top position */
+  left: 10px; /* Increased left position */
+  right: 10px; /* Increased right position */
+  bottom: 18px; /* Increased bottom position */
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 20px;
+  border-radius: 20px; /* Increased border radius */
   cursor: pointer;
   transition: background-color 0.3s ease;
-  font-size: 3.3vw;
+  font-size: 3.8vw; /* Increased font size */
 }
 
 .overlay:hover {
@@ -87,19 +102,19 @@
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
-  gap: 6px;
-  margin-left: 6px;
-  margin-right: 6px;
+  gap: 8px; /* Increased gap */
+  margin-left: 8px; /* Increased margin */
+  margin-right: 8px; /* Increased margin */
   flex: 1;
   min-width: 0;
 }
-.infoRow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.infoRow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* Increased gap */
 
 .itemInvoiceDetails {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  margin-left: 10px;
+  margin-left: 12px; /* Increased margin */
   margin-top: -15px;
   flex-grow: 1;
 }
@@ -107,20 +122,20 @@
 .itemName {
   font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
-  width: calc(100% - 15px); /* Adjust the width to prevent overflow */
-  font-size: 5vw;
+  width: calc(100% - 18px); /* Adjusted width */
+  font-size: 5.5vw; /* Increased font size */
   font-weight: 500;
   margin-top: 0;
-  margin: 0 5px;
+  margin: 0 6px; /* Increased margin */
   color: rgba(88, 55, 50, 1);
   background-color: transparent;
   text-transform: capitalize;
 }
 
 .itemInvoiceName {
-  width: calc(260% - 15px);
+  width: calc(280% - 18px); /* Adjusted width */
   background-color: transparent;
-  font-size: 1.3rem;
+  font-size: 1.4rem; /* Increased font size */
   font-weight: 500;
 }
 
@@ -138,8 +153,8 @@
   font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
-  font-size: 0.9rem;
-  margin-left: 5px;
+  font-size: 1rem; /* Increased font size */
+  margin-left: 6px; /* Increased margin */
   color: #d9c61c;
   text-align: right;
   margin-top: 22px;
@@ -149,18 +164,18 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
-  min-height: 32px;
+  gap: 10px; /* Increased gap */
+  min-height: 36px; /* Increased height */
 }
 
 .itemQtyValue {
   font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
-  margin-top: 19px;
-  margin-left: 1px;
-  margin-right: 1px;
-  width: 25px;
+  margin-top: 22px; /* Increased margin */
+  margin-left: 2px;
+  margin-right: 2px;
+  width: 30px; /* Increased width */
   text-align: center;
 }
 
@@ -168,9 +183,9 @@
   font-family: "Plus Jakarta Sans", sans-serif;
   font-style: normal;
   font-weight: 600;
-  width: 30px; /* Adjust the width to prevent overflow */
-  font-size: 0.9rem;
-  margin-bottom: 10px;
+  width: 36px; /* Increased width */
+  font-size: 1rem; /* Increased font size */
+  margin-bottom: 12px; /* Increased margin */
   text-align: center;
   background-color: transparent;
 }
@@ -180,14 +195,14 @@
   border: 1px solid var(--brand-sage, #6B8F71);
   color: #ffffff;
   display: inline-block;
-  font-size: 13px;
+  font-size: 14px; /* Increased font size */
   font-weight: 600;
   cursor: pointer;
-  min-width: 84px;
-  height: 34px;
-  padding: 0 14px;
-  border-radius: 10px; /* square rounded corner */
-  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+  min-width: 85px; /* Increased width */
+  height: 36px; /* Increased height */
+  padding: 0 14px; /* Increased padding */
+  border-radius: 12px; /* Increased border radius */
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 }
 .addButton:hover { background-color: var(--brand-sage-hover, #7FAE7D); border-color: var(--brand-sage-hover, #7FAE7D); }
 .addButton:disabled { background-color: var(--brand-sage-muted, #CFD8D3); border-color: var(--brand-sage-muted, #CFD8D3); cursor: default; }
@@ -199,32 +214,32 @@
   color: gray;
 }
 .plusNegative {
-  width: 30px;
-  height: 30px;
+  width: 36px; /* Increased width */
+  height: 36px; /* Increased height */
 }
 
 .plusNegative2 {
-  width: 84px;
-  height: 21px;
+  width: 90px; /* Increased width */
+  height: 24px; /* Increased height */
   position: absolute;
   transform: rotate(45deg);
-  left: -33px;
-  top: 21px;
+  left: -38px; /* Adjusted position */
+  top: 24px; /* Adjusted position */
 }
 .remove {
-  width: 25px;
-  height: 25px;
-  margin-top: -10px;
-  margin-right: 10px;
+  width: 30px; /* Increased width */
+  height: 30px; /* Increased height */
+  margin-top: -12px; /* Adjusted margin */
+  margin-right: 12px; /* Adjusted margin */
 }
 
 /* New elements for clean cafe item card */
 .title {
   font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 600;
-  font-size: 16px;
+  font-size: 18px; /* Increased font size */
   color: #2d2d2d;
-  margin: 0 0 2px 0;
+  margin: 0 0 3px 0; /* Increased margin */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -236,71 +251,184 @@
 
 /* Responsive type scale for title and price */
 @media (min-width: 600px) {
-  .title { font-size: 17px; }
-  .priceNow { font-size: 15px; }
+  .title { font-size: 19px; }
+  .priceNow { font-size: 17px; }
 }
 @media (min-width: 992px) {
-  .title { font-size: 18px; }
-  .priceNow { font-size: 16px; }
+  .title { font-size: 20px; }
+  .priceNow { font-size: 18px; }
 }
 .desc {
   color: #5f5f5f;
-  font-size: 12px;
-  line-height: 1.25;
+  font-size: 14px; /* Increased font size */
+  line-height: 1.3;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 2;
 }
-.priceRow { display: inline-flex; align-items: center; gap: 8px; }
+.priceRow { display: inline-flex; align-items: center; gap: 10px; } /* Increased gap */
+
+/* Gaya harga baru untuk item list */
+.itemPriceList {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  color: #1c1d1d;
+  margin: 2px 0;
+  white-space: nowrap;
+}
+
+.itemPriceList.promo {
+  color: #e53935;
+  font-size: 13px;
+}
+
+.itemPriceList.original {
+  color: #727272;
+  font-size: 12px;
+  text-decoration: line-through;
+}
+
 .promoBadge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 2px 8px;
-  height: 20px;
+  padding: 3px 10px; /* Increased padding */
+  height: 24px; /* Increased height */
   border-radius: 999px;
   background: linear-gradient(to right, #e52535, #fe6d78);
   color: #fff;
-  font-size: 11px;
+  font-size: 13px; /* Increased font size */
   font-weight: 700;
 }
 .priceNow {
   color: #1c1d1d;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 16px; /* Increased font size */
   white-space: nowrap;
 }
 .priceOld {
   color: #727272;
-  font-size: 12px;
+  font-size: 14px; /* Increased font size */
   text-decoration: line-through;
   white-space: nowrap;
 }
 .qtyGroup {
   display: inline-flex;
   align-items: center;
-  border: 1px solid #e6e6e6;
-  border-radius: 10px; /* square rounded corners */
-  height: 32px;
+  border: 1px solid rgba(255,255,255,0.6);
+  border-radius: 10px; /* Increased border radius */
+  height: 30px; /* Increased height */
   overflow: hidden;
+  background: transparent;
 }
 .qtyBtn {
-  width: 34px;
-  height: 32px;
+  width: 30px; /* Increased width */
+  height: 30px; /* Increased height */
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #fff;
-  color: var(--brand-sage, #6B8F71);
+  background: transparent;
+  color: #fff;
   border: none;
+  font-size: 20px; /* Increased font size */
 }
-.qtyBtn:hover { background: var(--brand-sage-50, #F0F6F2); }
+.qtyBtn:hover { background: rgba(255,255,255,0.15); }
 .qtyVal {
-  min-width: 28px;
+  min-width: 26px; /* Increased width */
   text-align: center;
   font-weight: 700;
-  color: #2d2d2d;
+  color: #fff;
+  font-size: 15px; /* Increased font size */
+}
+
+.actionRow { display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; } /* Increased gap */
+
+/* Promo pill overlay on image */
+.promoPill {
+  position: absolute;
+  top: 14px; /* Increased top position */
+  right: 14px; /* Increased right position */
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 12px; /* Increased padding */
+  height: auto;
+  border-radius: 10px; /* Increased border radius */
+  background: #e53935;
+  color: #fff;
+  font-size: 13px; /* Increased font size */
+  font-weight: 700;
+}
+
+/* Info overlay on image (name + price) */
+.overlayName {
+  position: absolute;
+  top: 14px; /* Increased top position */
+  left: 14px; /* Increased left position */
+  z-index: 2;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 800;
+  font-size: 16px; /* Increased font size */
+  line-height: 1.3;
+  color: #fff;
+  mix-blend-mode: difference;
+  margin: 0;
+  max-width: 75%; /* Increased width */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  pointer-events: none;
+  text-transform: capitalize;
+}
+@media (min-width: 600px) { .overlayName { font-size: 17px; } }
+.overlayPrice { display: flex; align-items: center; gap: 8px; } /* Increased gap */
+.overlayNow { color: #fff; font-weight: 800; font-size: 14px; } /* Increased font size */
+.overlayOld { color: rgba(255,255,255,0.8); font-size: 13px; text-decoration: line-through; } /* Increased font size */
+
+/* Bottom overlay bar: price left, qty right */
+.bottomOverlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px; /* Increased padding */
+  background: rgba(0,0,0,0.55);
+  color: #fff;
+}
+
+/* New stacked price for clarity */
+.overlayPriceCol { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } /* Increased line height */
+.overlayOriginal { color: rgba(255,255,255,0.85); font-weight: 700; font-size: 12px; text-decoration: line-through; } /* Increased font size */
+@media (min-width: 600px) { .overlayOriginal { font-size: 13px; } }
+.overlayPromo { color: #fff; font-weight: 900; font-size: 18px; } /* Increased font size */
+@media (min-width: 600px) {
+  .overlayOriginal { font-size: 16px; } /* Increased font size */
+  .overlayPromo { font-size: 20px; } /* Increased font size */
+}
+
+/* Title text below image for portrait mode */
+.title {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 16px; /* Increased font size */
+  color: #1c1d1d;
+  margin: 8px 3px 6px 3px; /* Increased margin */
+  text-transform: capitalize;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+}
+@media (min-width: 600px) {
+  .title { font-size: 17px; } /* Increased font size */
 }
 
 .itemInvoice .itemDetails {
@@ -312,7 +440,7 @@
 .itemInvoice .itemName,
 .itemInvoice .itemPrice,
 .itemInvoice .itemQty .qtyInvoice .multiplySymbol {
-  font-size: 0.9rem;
+  font-size: 1.1rem; /* Increased font size */
 }
 
 .blank {
@@ -325,6 +453,6 @@
 
 .createItem {
   position: absolute;
-  left: 15px;
-  right: 15px;
-}
+  left: 18px; /* Increased position */
+  right: 18px; /* Increased position */
+}
\ No newline at end of file
diff --git a/src/components/ItemConfig.js b/src/components/ItemConfig.js
index a3498f4..6c62bf6 100644
--- a/src/components/ItemConfig.js
+++ b/src/components/ItemConfig.js
@@ -93,10 +93,10 @@ const ItemConfig = ({
 
     return (
         <div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 301, backgroundColor: '#00000061' }}>
-            <div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', backgroundColor: 'white', borderRadius: '20px 20px 0 0', overflowY: 'auto' }}>
+            <div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '18px', backgroundColor: 'white', borderRadius: '24px 24px 0 0', overflowY: 'auto' }}> {/* Increased padding and border radius */}
                 <div style={{ display: 'flex' }}>
-                    <div style={{ width: '26vw', height: '26vw', marginRight: '10px' }}>
-                        <img style={{ width: '100%', height: '100%', borderRadius: '10px', objectFit: 'cover' }} src={previewUrl} />
+                    <div style={{ width: '30vw', height: '30vw', marginRight: '12px' }}> {/* Increased size and margin */}
+                        <img style={{ width: '100%', height: '100%', borderRadius: '12px', objectFit: 'cover' }} src={previewUrl} /> {/* Increased border radius */}
                         <input
                             type="file"
                             ref={fileInputRef}
@@ -106,30 +106,30 @@ const ItemConfig = ({
                             style={{ display: "none" }}
                         />
                     </div>
-                    <div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                        <div onClick={() => handleChangeImage()} style={{ width: '140px', marginRight: '10px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    <div style={{ width: '68%', height: '30vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> {/* Increased size */}
+                        <div onClick={() => handleChangeImage()} style={{ width: '160px', marginRight: '12px', height: '48px', alignContent: 'center', textAlign: 'center', borderRadius: '12px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '16px' }}> {/* Increased size and font */}
                             {isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
                         </div>
-                        <div onClick={handleDelete} style={{ width: '76px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                        <div onClick={handleDelete} style={{ width: '84px', height: '48px', alignContent: 'center', textAlign: 'center', borderRadius: '12px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '16px' }}> {/* Increased size and font */}
                             Hapus
                         </div>
                     </div>
                 </div>
 
-                <div style={{ display: 'flex', flexDirection: 'column', color: 'black', marginTop: '10px' }}>
-                    <p style={{ marginBottom: '5px', fontWeight: '500' }}>Nama item</p>
+                <div style={{ display: 'flex', flexDirection: 'column', color: 'black', marginTop: '12px' }}> {/* Increased margin */}
+                    <p style={{ marginBottom: '6px', fontWeight: '500', fontSize: '18px' }}>Nama item</p> {/* Increased margin and font size */}
                     <input
                         value={itemName}
                         style={{
-                            padding: '10px',
-                            borderRadius: '8px',
+                            padding: '12px', // Increased padding
+                            borderRadius: '8px', // Increased border radius
                             border: '1px solid #ccc',
-                            fontSize: '14px',
+                            fontSize: '16px', // Increased font size
                             width: '100%',
-                            marginBottom: '15px',
+                            marginBottom: '18px', // Increased margin
                             outline: 'none',
                             transition: 'all 0.3s ease',
-                            boxSizing: 'border-box', // Make sure the padding doesn't cause overflow
+                            boxSizing: 'border-box',
                         }}
                         onChange={(e)=>setItemName(e.target.value)}
                         onFocus={(e) => e.target.style.borderColor = '#60d37e'}
@@ -139,16 +139,16 @@ const ItemConfig = ({
 
                 <div style={{ display: 'flex', color: 'black', justifyContent: 'space-between' }}>
                     <div style={{ width: '48%' }}>
-                        <p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Harga</p>
+                        <p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Harga</p> {/* Increased margin and font size */}
                         <input
                             value={itemPrice}
                             style={{
-                                padding: '10px',
-                                borderRadius: '8px',
+                                padding: '12px', // Increased padding
+                                borderRadius: '8px', // Increased border radius
                                 border: '1px solid #ccc',
-                                fontSize: '14px',
+                                fontSize: '16px', // Increased font size
                                 width: '100%',
-                                marginBottom: '15px',
+                                marginBottom: '18px', // Increased margin
                                 outline: 'none',
                                 transition: 'all 0.3s ease',
                                 boxSizing: 'border-box',
@@ -159,17 +159,17 @@ const ItemConfig = ({
                         />
                     </div>
                     <div style={{ width: '48%' }}>
-                        <p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Harga promo</p>
+                        <p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Harga promo</p> {/* Increased margin and font size */}
                         <input
                             value={itemPromoPrice}
                             placeholder="Opsional"
                             style={{
-                                padding: '10px',
-                                borderRadius: '8px',
+                                padding: '12px', // Increased padding
+                                borderRadius: '8px', // Increased border radius
                                 border: '1px solid #ccc',
-                                fontSize: '14px',
+                                fontSize: '16px', // Increased font size
                                 width: '100%',
-                                marginBottom: '15px',
+                                marginBottom: '18px', // Increased margin
                                 outline: 'none',
                                 transition: 'all 0.3s ease',
                                 boxSizing: 'border-box',
@@ -182,21 +182,21 @@ const ItemConfig = ({
                 </div>
 
                 <div style={{ display: 'flex', flexDirection: 'column', color: 'black' }}>
-                    <p style={{ marginBottom: '5px', fontWeight: '500', marginTop: 0 }}>Deskripsi</p>
+                    <p style={{ marginBottom: '6px', fontWeight: '500', marginTop: 0, fontSize: '18px' }}>Deskripsi</p> {/* Increased margin and font size */}
 
                     <textarea
                         ref={textareaRef}
                         style={{
-                            padding: '10px',
-                            borderRadius: '8px',
+                            padding: '12px', // Increased padding
+                            borderRadius: '8px', // Increased border radius
                             border: '1px solid #ccc',
-                            fontSize: '14px',
+                            fontSize: '16px', // Increased font size
                             width: '100%',
-                            marginBottom: '15px',
+                            marginBottom: '18px', // Increased margin
                             outline: 'none',
                             transition: 'all 0.3s ease',
                             boxSizing: 'border-box',
-                            resize: 'none', // Prevent manual resize that could cause overflow
+                            resize: 'none',
                         }}
                         placeholder="Tambah deskripsi..."
                         value={itemDescription}
@@ -206,8 +206,8 @@ const ItemConfig = ({
                     />
                 </div>
 
-                <div style={{ width: '100%', height: '35px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                    <div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <div style={{ width: '100%', height: '42px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}> {/* Increased height */}
+                    <div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '48px', alignContent: 'center', textAlign: 'center', borderRadius: '12px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '18px' }}> {/* Increased height and font size */}
                         {isBeingEdit? 'Simpan' : 'Buat Item'}
                     </div>
                 </div>
@@ -216,4 +216,4 @@ const ItemConfig = ({
     );
 };
 
-export default ItemConfig;
+export default ItemConfig;
\ No newline at end of file
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index 5dc15f9..cf75256 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -74,6 +74,22 @@ const ItemLister = ({
 
   const [randomKey, setRandomKey] = useState(0);
 
+  // Dummy items for style preview on cafe page (non-invoice, non-edit)
+  const showGrid = !isEdit && !forInvoice;
+  const dummyCount = showGrid ? Math.max(0, 6 - items.length) : 0;
+  const dummyItems = Array.from({ length: dummyCount }, (_, i) => ({
+    itemId: `dummy-${itemTypeId}-${i}`,
+    name: `Sample ${i + 1}`,
+    price: 25000 + i * 5000,
+    promoPrice: i % 2 === 1 ? 20000 + i * 3000 : 0,
+    qty: 0,
+    description: 'Contoh deskripsi singkat item.',
+    image: getImageUrl(`uploads/samples/sample (${(i % 16) + 1}).png`),
+    availability: true,
+    selectedImage: null,
+  }));
+  const displayItems = showGrid ? [...items, ...dummyItems] : items;
+
   const handlePlusClick = (itemId) => {
     const updatedItems = items.map((item) => {
       if (item.itemId === itemId) {
@@ -609,7 +625,7 @@ const ItemLister = ({
 
             {(isEdit && isFirstStep || !isEdit) &&
               <div className={styles["title-container"]}>
-                {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
+                {isEdit && <ItemType blank={true} imageUrl={previewUrl} compact={true} />}
                 <input
                   className={`${styles.title} ${isEdit ? styles.border : styles.noborder
                     }`}
@@ -626,7 +642,7 @@ const ItemLister = ({
                       disabled={index === 0}
                       aria-label="Naikkan kategori"
                     >
-                      <ArrowUp size={18} />
+                      <ArrowUp size={16} /> {/* Reduced icon size for compact design */}
                     </button>
                     <button
                       className={styles.iconBtn}
@@ -634,14 +650,14 @@ const ItemLister = ({
                       disabled={index === indexTotal - 1}
                       aria-label="Turunkan kategori"
                     >
-                      <ArrowDown size={18} />
+                      <ArrowDown size={16} /> {/* Reduced icon size for compact design */}
                     </button>
                     <button
                       className={styles.iconBtn}
                       onClick={toggleEditTypeItem}
                       aria-label="Edit kategori"
                     >
-                      <Pencil size={18} />
+                      <Pencil size={16} /> {/* Reduced icon size for compact design */}
                     </button>
                   </div>
                 )}
@@ -657,6 +673,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/addnew.png")}
+                    compact={true}
                   />
                   {/* {typeImage != null && !previewUrl.includes(typeImage) && (
                 <ItemType
@@ -674,6 +691,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/beverage4.jpg")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -681,6 +699,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/beverage1.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -688,6 +707,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/beverage2.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -695,6 +715,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/beverage3.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -702,6 +723,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/snack5.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -709,6 +731,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/dessert1.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -716,6 +739,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/dessert2.jpg")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -723,6 +747,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/food4.jpg")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -730,6 +755,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/food1.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -737,6 +763,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/food2.jpg")}
+                    compact={true}
                   />
 
                   <ItemType
@@ -745,6 +772,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/food3.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -752,6 +780,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/packet1.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -759,6 +788,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/packet2.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -766,6 +796,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/snack1.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -773,6 +804,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/snack2.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -780,6 +812,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/snack3.png")}
+                    compact={true}
                   />
                   <ItemType
                     rectangular={true}
@@ -787,6 +820,7 @@ const ItemLister = ({
                       handleImageChange(previewUrl, selectedImage)
                     }
                     imageUrl={getImageUrl("uploads/assets/snack4.png")}
+                    compact={true}
                   />
                   {Array.from({ length: 16 }, (_, index) => {
                     const sampleNumber = index + 1; // To get numbers from 1 to 16
@@ -798,6 +832,7 @@ const ItemLister = ({
                           handleImageChange(previewUrl, selectedImage)
                         }
                         imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)}
+                        compact={true}
                       />
                     );
                   })}
@@ -809,7 +844,7 @@ const ItemLister = ({
               <div key={randomKey}>
                 {isEdit && <div style={{ display: 'flex', justifyContent: 'flex-start' }}><div style={{ marginTop: '49px', marginRight: '10px', marginLeft: '10px' }} onClick={() => setIsFirstStep(true)}><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path d="M48,256c0,114.87,93.13,208,208,208s208-93.13,208-208S370.87,48,256,48,48,141.13,48,256Zm212.65-91.36a16,16,0,0,1,.09,22.63L208.42,240H342a16,16,0,0,1,0,32H208.42l52.32,52.73A16,16,0,1,1,238,347.27l-79.39-80a16,16,0,0,1,0-22.54l79.39-80A16,16,0,0,1,260.65,164.64Z" /></svg></div>
                   <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>}
-                <div className={styles["item-list"]}>
+                <div className={`${styles["item-list"]} ${(!isEdit && !forInvoice) ? styles["item-grid"] : ""}`}>
                   {user && (
                     user.user_id == shopOwnerId || user.cafeId == shopId) &&
                     isEditMode && (
@@ -930,7 +965,7 @@ const ItemLister = ({
                     ) : null;
                   })}
 
-                  {items.map((item, indexx) => {
+                  {(showGrid ? [...items, ...dummyItems] : items).map((item, indexx) => {
                     return !forCart || (forCart && item.qty > 0) ? (
                       <div
                         key={item.itemId}>
@@ -1030,9 +1065,10 @@ const ItemLister = ({
 
                           <Item
                             key={item.itemId}
-                            last={index === indexTotal - 1 && indexx === items.length - 1}
+                            last={index === indexTotal - 1 && indexx === (showGrid ? (items.length + dummyItems.length) : items.length) - 1}
                             forCart={forCart}
                             forInvoice={forInvoice}
+                            portrait={showGrid}
                             name={item.name}
                             price={item.price}
                             promoPrice={item.promoPrice}
@@ -1042,9 +1078,9 @@ const ItemLister = ({
                               itemTypeId ? getImageUrl(item.image) : item.image
                             }
                             imageFile={item.selectedImage}
-                            onPlusClick={() => handlePlusClick(item.itemId)}
-                            onNegativeClick={() => handleNegativeClick(item.itemId)}
-                            onRemoveClick={() => handleRemoveClick(item.itemId)}
+                            onPlusClick={() => (String(item.itemId).startsWith('dummy-') ? undefined : handlePlusClick(item.itemId))}
+                            onNegativeClick={() => (String(item.itemId).startsWith('dummy-') ? undefined : handleNegativeClick(item.itemId))}
+                            onRemoveClick={() => (String(item.itemId).startsWith('dummy-') ? undefined : handleRemoveClick(item.itemId))}
                             isBeingEdit={isEditItem == item.itemId}
                             isAvailable={item.availability}
                             handleUpdateItem={(name, price, image, description, promoPrice) =>
@@ -1106,4 +1142,4 @@ const ItemLister = ({
   );
 };
 
-export default ItemLister;
+export default ItemLister;
\ No newline at end of file
diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css
index 1adf89e..e5f9119 100644
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -2,80 +2,78 @@
 
 .item-lister {
   width: 100%;
-  padding: 10px; /* Adjust padding as needed */
-  box-sizing: border-box; /* Ensure padding doesn't affect width */
+  padding: 10px; /* Slightly reduced padding */
+  box-sizing: border-box;
   white-space: break-spaces;
 }
 
 .fullscreen {
-  position: fixed; /* Keep the container fixed */
-  top: 0; /* Adjust the top position as needed */
-  bottom: 0; /* Occupy the full height of the viewport */
-  left: 0; /* Align to the left */
-  right: 0; /* Align to the right */
-  background-color: white; /* Background color */
-  z-index: 1000; /* Layering */
-  overflow-y: auto; /* Allow vertical scrolling */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: white;
+  z-index: 1000;
+  overflow-y: auto;
 }
+
 .grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
-  /* padding: 10px; */
-  /* max-height: calc(3 * (25vw - 20px) + 20px); */
-  overflow-y: auto;
-  height: calc(49vw - 20px);
+  height: calc(50vw - 20px);
 }
 
 @media (min-height: 0px) {
   .grid-container {
-    height: 27vh;
+    height: 28vh;
   }
 }
 @media (min-height: 630px) {
   .grid-container {
-    height: 27vh;
+    height: 28vh;
   }
 }
 @media (min-height: 636px) {
   .grid-container {
-    height: 29vh;
+    height: 30vh;
   }
 }
 @media (min-height: 650px) {
   .grid-container {
-    height: 34vh;
+    height: 36vh;
   }
 }
 @media (min-height: 705px) {
   .grid-container {
-    height: 37vh;
+    height: 39vh;
   }
 }
 @media (min-height: 735px) {
   .grid-container {
-    height: 38vh;
+    height: 40vh;
   }
 }
 @media (min-height: 759px) {
   .grid-container {
-    height: 40vh;
+    height: 42vh;
   }
 }
 @media (min-height: 819px) {
   .grid-container {
-    height: 44vh;
+    height: 46vh;
   }
 }
 
 @media (min-height: 830px) {
   .grid-container {
-    height: 47vh;
+    height: 49vh;
   }
 }
 @media (min-height: 892px) {
   .grid-container {
-    height: 49vh;
+    height: 51vh;
   }
 }
 
@@ -83,6 +81,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 12px 16px; /* Added padding for better spacing */
+  background-color: #f8f9fa; /* Light background for better visual separation */
+  border-radius: 12px; /* Rounded corners */
+  margin-bottom: 16px; /* Space below the title container */
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow */
 }
 
 .titleActions {
@@ -100,7 +103,7 @@
   border: 1px solid #e6e6e6;
   background: #ffffff;
   color: #2d2d2d;
-  border-radius: 8px; /* square rounded */
+  border-radius: 8px;
   cursor: pointer;
 }
 .iconBtn:disabled {
@@ -114,21 +117,21 @@
 
 .title {
   background-color: transparent;
-    font-family: "Plus Jakarta Sans", sans-serif;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 20px;
-    color: rgba(88, 55, 50, 1);
-    text-align: left;
-    width: calc(70% - 10px);
-    padding-left: 10px;
-    text-transform: capitalize;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 600; /* Increased font weight for better visibility */
+  font-style: normal;
+  font-size: 20px;
+  color: rgba(88, 55, 50, 1);
+  text-align: left;
+  width: calc(70% - 10px);
+  padding-left: 10px;
+  text-transform: capitalize;
 }
 
 .edit-typeItem-button {
-  margin-left: auto; /* Push the button to the right */
-  padding: 8px 16px; /* Adjust padding as needed */
-  font-size: 14px;
+  margin-left: auto;
+  padding: 6px 12px;
+  font-size: 13px;
   background-color: #007bff;
   color: #fff;
   border: none;
@@ -138,8 +141,8 @@
 
 .add-item-button {
   margin-top: 10px;
-  padding: 8px 16px; /* Adjust padding as needed */
-  font-size: 14px;
+  padding: 6px 12px;
+  font-size: 13px;
   background-color: #359d42d1;
   color: #fff;
   border: none;
@@ -149,7 +152,24 @@
 
 .item-list {
   display: flex;
-  flex-direction: column; /* Display items in a column */
+  flex-direction: column;
+}
+
+/* Grid layout for portrait cards on cafe page */
+.item-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+@media (min-width: 600px) {
+  .item-grid {
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  }
+}
+@media (min-width: 992px) {
+  .item-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
 }
 
 .border {
@@ -168,13 +188,13 @@
   z-index: 100;
   background-color: #0000008c;
   width: 100%;
-  top: 7px;
+  top: 6px;
   bottom: -4px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .PaymentOption {
@@ -252,3 +272,24 @@
   color: black;
   text-align: left;
 }
+
+/* Harga dalam item list - dikurangi ukurannya agar proporsional */
+.itemPriceList {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  color: #1c1d1d;
+  margin: 2px 0;
+  white-space: nowrap;
+}
+
+.itemPriceList.promo {
+  color: #e53935;
+  font-size: 13px;
+}
+
+.itemPriceList.original {
+  color: #727272;
+  font-size: 12px;
+  text-decoration: line-through;
+}
\ No newline at end of file
diff --git a/src/components/ItemType.js b/src/components/ItemType.js
index 3770708..b6980a8 100644
--- a/src/components/ItemType.js
+++ b/src/components/ItemType.js
@@ -10,6 +10,8 @@ export default function ItemType({
   imageUrl,
   selected,
   rectangular,
+  compact,
+  noIcon, // New prop to remove icons
 }) {
   const inputRef = useRef(null);
   const [namee, setName] = useState(name);
@@ -67,29 +69,44 @@ export default function ItemType({
 
   const iconImageUrl = imageUrl === 'uploads/assets/All.png' ? 'icon:all' : imageUrl;
 
+  // If noIcon is true, we render a button-like element without icons
+  if (noIcon) {
+    return (
+      <div
+        className={`${styles["item-type"]} ${compact ? styles["item-type-compact"] : ""}`}
+        style={{ zIndex: blank ? 301 : "inherit" }}
+      >
+        <div
+          onClick={onClick}
+          className={`${styles["item-type-rect"]} ${compact ? styles["item-type-rect-compact"] : ""} ${selected ? styles["selected"] : ""}`}
+          style={{
+            backgroundColor: selected ? 'var(--brand-sage, #6B8F71)' : '#ffffff',
+            borderColor: selected ? 'var(--brand-sage, #6B8F71)' : '#e6e6e6',
+            color: selected ? '#ffffff' : '#2d2d2d',
+          }}
+        >
+          <span>
+            {formatName(namee)}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
-      className={
-        styles[
-        namee
-          ? "item-type"
-          : rectangular
-            ? "item-type-rectangular"
-            : "item-type-nomargin"
-        ]
-      }
+      className={`${styles["item-type"]} ${compact ? styles["item-type-compact"] : ""}`}
       style={{ zIndex: blank ? 301 : "inherit" }}
     >
       <div
         onClick={
           rectangular ? (blank ? null : () => onClick(iconImageUrl)) : onClick
         }
-        className={styles["item-type-rect"]}
+        className={`${styles["item-type-rect"]} ${compact ? styles["item-type-rect-compact"] : ""} ${selected ? styles["selected"] : ""}`}
         style={{
-          // Remove lift-up effect; only color changes when selected
           backgroundColor: selected ? 'var(--brand-sage, #6B8F71)' : '#ffffff',
-          border: selected ? '1px solid var(--brand-sage, #6B8F71)' : '1px solid #e6e6e6',
-          color: selected ? '#ffffff' : '#4a6b5a'
+          borderColor: selected ? 'var(--brand-sage, #6B8F71)' : '#e6e6e6',
+          color: selected ? '#ffffff' : '#2d2d2d',
         }}
       >
         {iconImageUrl === 'uploads/assets/All.png' ? (
@@ -148,7 +165,7 @@ c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
           </svg>
         ) : (iconImageUrl && typeof iconImageUrl === 'string' && iconImageUrl.startsWith('icon:')) ? (
           <div style={{width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}>
-            <LucideCategoryIcon name={namee} iconKey={(iconImageUrl || '').split(':')[1]} />
+            <LucideCategoryIcon name={namee} iconKey={(iconImageUrl || '').split(':')[1]} compact={compact} />
           </div>
         ) : (
           <img
@@ -170,27 +187,17 @@ c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
         )}
       </div>
       {!rectangular && !blank && (
-        <input
-          ref={inputRef}
-          className={`${styles["item-type-name"]} ${styles.noborder}`}
-          value={formatName(namee)}
-          onChange={handleNameChange}
-          disabled={true}
-          style={{
-            top: 'initial',
-            borderBottom: 'none',
-            color: selected ? '#2d2d2d' : '#333',
-            textTransform: 'capitalize'
-          }}
-        />
+        <div className={`${styles["item-type-name"]} ${compact ? styles["item-type-name-compact"] : ""}`} style={{ color: selected ? '#2d2d2d' : '#333' }}>
+          {formatName(namee)}
+        </div>
       )}
     </div>
   );
 }
 
-function LucideCategoryIcon({ name, iconKey }) {
+function LucideCategoryIcon({ name, iconKey, compact }) {
   const key = pickIconKey(name, iconKey);
-  const size = '56%';
+  const size = compact ? '65%' : '56%';
   switch (key) {
     case 'coffee':
       return <Coffee color={'currentColor'} size={size} strokeWidth={2} />;
@@ -218,4 +225,4 @@ function pickIconKey(name, iconKey) {
   if (/(dessert|cake|kue|manis|ice|es krim|ice-cream)/.test(n)) return 'dessert';
   if (/(food|makan|snack|cemilan|nasi|mie|noodle|soup|sup|ayam|daging|ikan|roti|sandwich|burger|pizza)/.test(n)) return 'food';
   return 'food';
-}
+}
\ No newline at end of file
diff --git a/src/components/ItemType.module.css b/src/components/ItemType.module.css
index f3cd906..484f276 100644
--- a/src/components/ItemType.module.css
+++ b/src/components/ItemType.module.css
@@ -1,7 +1,7 @@
 .item-type {
   width: auto;
   height: auto;
-  margin: 0 4px; /* tighter spacing between tiles */
+  margin: 0 6px;
   overflow: visible;
   text-align: center;
   align-items: center;
@@ -10,64 +10,107 @@
   justify-content: center;
   position: relative;
 }
-.item-type-rectangular {
-  width: calc(25vw - 20px);
-  height: calc(25vw - 20px);
-  overflow: visible;
-  text-align: center;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  position: relative; /* Ensure absolute positioning inside works */
+
+/* Compact version of item-type */
+.item-type-compact {
+  margin: 0 4px;
 }
-.item-type-nomargin {
-  width: calc(25vw - 20px);
-  height: calc(39vw - 20px);
+
+.item-type-rectangular {
+  width: calc(30vw - 24px);
+  height: calc(30vw - 24px);
   overflow: visible;
   text-align: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative; /* Ensure absolute positioning inside works */
+  position: relative;
 }
+
+.item-type-nomargin {
+  width: calc(30vw - 24px);
+  height: calc(45vw - 24px);
+  overflow: visible;
+  text-align: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
 .item-type-rect {
   position: relative;
-  height: clamp(48px, 9vw, 80px);
-  width: clamp(48px, 9vw, 80px);
+  height: 48px; /* Fixed height for better touch targets */
+  min-width: 100px; /* Minimum width */
+  padding: 0 20px; /* Horizontal padding */
   object-fit: cover;
-  border-radius: 12px;
+  border-radius: 12px; /* Square rounded corners */
   background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s ease;
+  border: 1px solid #e6e6e6;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: #2d2d2d;
+  cursor: pointer;
+}
+
+/* Compact version of item-type-rect */
+.item-type-rect-compact {
+  height: 42px; /* Slightly smaller for compact version */
+  min-width: 90px;
+  padding: 0 18px;
+  border-radius: 10px;
+  font-size: 14px;
 }
 
 .item-type-rect:hover {
   background-color: var(--brand-sage-100, #E9F3ED);
   border-color: var(--brand-sage, #6B8F71);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+.item-type-rect.selected {
+  background-color: var(--brand-sage, #6B8F71);
+  color: #ffffff;
+  border-color: var(--brand-sage, #6B8F71);
+  box-shadow: 0 2px 6px rgba(107, 143, 113, 0.2);
 }
 
 .item-type-name {
   font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 12px;
-  color: #333;
+  font-size: 16px;
+  color: #2d2d2d;
   width: auto;
   text-align: center;
   background-color: transparent;
   position: relative;
-  margin-top: 6px; /* keep label spacing constant; avoid jumping */
+  margin-top: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
+
+/* Compact version of item-type-name */
+.item-type-name-compact {
+  font-size: 14px;
+  max-width: 140px;
 }
 
 .item-type-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 15px;
+  border-radius: 12px;
 }
 
 .item-type-image-container {
@@ -77,6 +120,7 @@
   width: 100%;
   height: 100%;
 }
+
 .item-type-image-input {
   opacity: 0;
   position: absolute;
@@ -88,12 +132,12 @@
 
 .item-type-create {
   position: absolute;
-  top: 76%; /* Position below the input */
+  top: 76%;
   left: 50%;
   transform: translateX(-50%);
-  margin-top: 10px; /* Space between input and button */
-  width: 20vw;
-  text-align: center; /* Center button text */
+  margin-top: 12px;
+  width: 24vw;
+  text-align: center;
 }
 
 .border {
@@ -103,3 +147,17 @@
 .noborder {
   border: 1px solid #ffffff00;
 }
+
+/* No icon styles */
+.no-icon {
+  height: 48px;
+  min-width: 100px;
+  padding: 0 20px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: "Plus Jakarta Sans", sans-serif;
+}
\ No newline at end of file
diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css
index e4a47ce..e1ce173 100644
--- a/src/components/ItemTypeLister.css
+++ b/src/components/ItemTypeLister.css
@@ -3,55 +3,83 @@
   width: 100%;
   overflow-x: auto;
   white-space: nowrap;
-  padding: 2px 0px; /* tighter top/bottom padding */
+  padding: 12px 0;
+  margin-bottom: 12px;
+  scrollbar-width: thin;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.item-type-lister::-webkit-scrollbar {
+  height: 8px;
+}
+
+.item-type-lister::-webkit-scrollbar-thumb {
+  background-color: #c5c5c5;
+  border-radius: 4px;
 }
 
 .category-bar {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   overflow-x: auto;
-  padding: 8px 12px 4px;
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  padding: 10px 15px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  justify-content: center;
+  width: 100%;
 }
 .category-bar::-webkit-scrollbar { display: none; }
 
 /* Legacy horizontal tile list container (used for tile UI) */
 .item-type-list {
   display: inline-flex;
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   overflow-y: hidden;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
 }
 
 .category-chip {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 36px;
-  padding: 0 14px;
-  border-radius: 999px;
+  gap: 10px;
+  height: 42px;
+  padding: 0 18px;
+  border-radius: 12px; /* Square rounded corners */
   border: 1px solid #e6e6e6;
   background: #ffffff;
   color: #2d2d2d;
   font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 16px;
   cursor: pointer;
   user-select: none;
+  transition: all 0.2s ease;
+  justify-content: center;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+.category-chip:hover { 
+  border-color: #d0d0d0; 
+  background-color: #f8f8f8;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
-.category-chip:hover { border-color: #d0d0d0; }
 .category-chip.selected {
   background: #73a585;
   color: #ffffff;
   border-color: #73a585;
+  box-shadow: 0 2px 6px rgba(115, 165, 133, 0.2);
 }
 
 .category-chip .chip-icon {
-  width: 18px;
-  height: 18px;
+  width: 22px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -77,27 +105,40 @@
 
 .inline-container {
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
-  gap: 10px; /* Spacing between grid items */
-  padding: 10px; /* Padding inside grid */
-  overflow-y: auto; /* Allow scrolling if items overflow */
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  padding: 12px;
+  overflow-y: auto;
 }
 .grid-container {
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
-  gap: 10px; /* Spacing between grid items */
-  padding: 10px; /* Padding inside grid */
-  max-height: calc(3 * (25vw - 20px) + 20px); /* 3 items + gaps */
-  overflow-y: auto; /* Allow scrolling if items overflow */
-  padding-top: 15px;
-  height: calc(43vw - 20px);
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  padding: 12px;
+  max-height: calc(3 * (30vw - 24px) + 24px);
+  overflow-y: auto;
+  padding-top: 18px;
+  height: calc(48vw - 24px);
 }
 
 .add-button {
-  margin: 10px; /* Margin around the button */
-  padding: 10px 20px; /* Padding for the button */
-  position: absolute; /* Optional, for styling */
+  margin: 12px;
+  padding: 12px 24px;
+  position: absolute;
   bottom: 0;
-  align-self: center; /* Center the button horizontally */
+  align-self: center;
 }
-/* Legacy styles kept for ItemType grid if needed elsewhere */
+
+/* Centered container for item type list */
+.centered-item-type-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 12px 0;
+}
+
+/* No icon styles */
+.no-icon {
+  padding: 0 20px; /* Increased padding for better touch targets */
+}
\ No newline at end of file
diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js
index 8ede325..3705764 100644
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -28,7 +28,7 @@ const ItemTypeLister = ({
       // Use smooth-scroll-into-view-if-needed to scroll to the target div
       smoothScroll(newItemDivRef.current, {
         behavior: "smooth",
-        block: "start", // Adjust this based on your needs
+        block: "start",
         inline: "nearest",
       });
     } else {
@@ -36,11 +36,11 @@ const ItemTypeLister = ({
 
       smoothScroll(node, {
         behavior: "smooth",
-        block: "start", // Adjust this based on your needs
+        block: "start",
         inline: "nearest",
       });
     }
-  }, [isAddingNewItem]); // Dependency array includes isAddingNewItem
+  }, [isAddingNewItem]);
 
   const toggleAddNewItem = () => {
     setIsAddingNewItem((prev) => !prev);
@@ -62,53 +62,58 @@ const ItemTypeLister = ({
 
   return (
     <div className="item-type-lister" style={{ overflowX: isAddingNewItem ? 'hidden' : 'auto' }}>
-      <div ref={newItemDivRef} className="item-type-list" style={{ display: 'inline-flex' }}>
-        {isEditMode && !isAddingNewItem && canManage && (
-          <ItemType
-            onClick={toggleAddNewItem}
-            name={"buat baru"}
-            imageUrl={"icon:plus"}
-          />
-        )}
+      <div className="centered-item-type-list">
+        <div ref={newItemDivRef} className="item-type-list" style={{ display: 'inline-flex' }}>
+          {isEditMode && !isAddingNewItem && canManage && (
+            <ItemType
+              onClick={toggleAddNewItem}
+              name={"buat baru"}
+              noIcon={true}
+              compact={false} // Make it larger for better touch targets
+            />
+          )}
 
-        {canManage && isAddingNewItem && (
-          <ItemLister
-            shopId={shopId}
-            shopOwnerId={shopOwnerId}
-            user={user}
-            typeName={""}
-            setShopItems={setShopItems}
-            itemList={items}
-            isEditMode={true}
-            handleCreateItem={(itemTypeId, name, price, selectedImage, description, promoPrice) => createItem(shopId, name, price, selectedImage, itemTypeId, description, promoPrice)}
-            beingEditedType={beingEditedType}
-            setBeingEditedType={setBeingEditedType}
-            alwaysEdit={true}
-            handleUnEdit={toggleAddNewItem}
-          />
-        )}
+          {canManage && isAddingNewItem && (
+            <ItemLister
+              shopId={shopId}
+              shopOwnerId={shopOwnerId}
+              user={user}
+              typeName={""}
+              setShopItems={setShopItems}
+              itemList={items}
+              isEditMode={true}
+              handleCreateItem={(itemTypeId, name, price, selectedImage, description, promoPrice) => createItem(shopId, name, price, selectedImage, itemTypeId, description, promoPrice)}
+              beingEditedType={beingEditedType}
+              setBeingEditedType={setBeingEditedType}
+              alwaysEdit={true}
+              handleUnEdit={toggleAddNewItem}
+            />
+          )}
 
-        {itemTypes && itemTypes.length > 0 && (
-          <ItemType
-            name={"semua"}
-            onClick={() => onFilterChange(0)}
-            imageUrl={"icon:all"}
-            selected={filterId === 0}
-          />
-        )}
+          {itemTypes && itemTypes.length > 0 && (
+            <ItemType
+              name={"semua"}
+              onClick={() => onFilterChange(0)}
+              selected={filterId === 0}
+              noIcon={true}
+              compact={false} // Make it larger for better touch targets
+            />
+          )}
 
-        {itemTypes && itemTypes.map((itemType) => (
-          <ItemType
-            key={itemType.itemTypeId}
-            name={itemType.name}
-            imageUrl={"icon:category"}
-            onClick={() => onFilterChange(itemType.itemTypeId)}
-            selected={filterId === itemType.itemTypeId}
-          />
-        ))}
+          {itemTypes && itemTypes.map((itemType) => (
+            <ItemType
+              key={itemType.itemTypeId}
+              name={itemType.name}
+              onClick={() => onFilterChange(itemType.itemTypeId)}
+              selected={filterId === itemType.itemTypeId}
+              noIcon={true}
+              compact={false} // Make it larger for better touch targets
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
 };
 
-export default ItemTypeLister;
+export default ItemTypeLister;
\ No newline at end of file
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
index c86453c..1f95df3 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -15,7 +15,7 @@
   width: 80vw;
   max-height: 80vh;
   position: relative;
-  overflow: visible; /* Add this line to enable scrolling */
+  overflow: visible;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,16 +23,21 @@
 
 .closeButton {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 12px; /* Increased top position */
+  right: 12px; /* Increased right position */
   background: none;
   border: none;
-  font-size: 24px;
+  font-size: 28px; /* Increased font size */
   cursor: pointer;
   color: #333;
   padding: 0;
+  width: 30px; /* Increased width */
+  height: 30px; /* Increased height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .closeButton:hover {
-  color: #f44336; /* Change color on hover for better UX */
-}
+  color: #f44336;
+}
\ No newline at end of file