diff --git a/src/components/IdentifyCafeModal.js b/src/components/IdentifyCafeModal.js
new file mode 100644
index 0000000..7a2f56d
--- /dev/null
+++ b/src/components/IdentifyCafeModal.js
@@ -0,0 +1,348 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import styles from "./IdentifyCafeModal.module.css";
+import API_BASE_URL from "../config.js";
+import { getTables, createTable } from "../helpers/tableHelper";
+import { saveCafeDetails } from "../helpers/cafeHelpers";
+import { getImageUrl } from "../helpers/itemHelper";
+import { toPng } from "html-to-image";
+
+export default function IdentifyCafeModal({ shop }) {
+  const [cafeIdentifyName, setCafeIdentifyName] = useState(shop.cafeIdentifyName || "");
+  const [availability, setAvailability] = useState(null); // 200 ok, 409 taken
+  const [checking, setChecking] = useState(false);
+
+  const [tables, setTables] = useState([]);
+  const [selectedTable, setSelectedTable] = useState(null);
+
+  const [qrSize, setQrSize] = useState(Number(shop.scale) || 1);
+  const [qrX, setQrX] = useState(Number(shop.xposition) || 50);
+  const [qrY, setQrY] = useState(Number(shop.yposition) || 50);
+  const [fontSize, setFontSize] = useState(Number(shop.fontsize) || 16);
+  const [fontColor, setFontColor] = useState(shop.fontcolor || "#FFFFFF");
+  const [fontX, setFontX] = useState(Number(shop.fontxposition) || 50);
+  const [fontY, setFontY] = useState(Number(shop.fontyposition) || 85);
+  const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
+  const bgFileRef = useRef(null);
+
+  const [newTableNo, setNewTableNo] = useState("");
+  const previewRef = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1); // 1=Alamat, 2=Desain QR, 3=Meja
+  const [saveStatus, setSaveStatus] = useState(null); // 'success' | 'error'
+  const [saving, setSaving] = useState(false);
+
+  const initialDesignRef = useRef({
+    qrSize: Number(shop.scale) || 1,
+    qrX: Number(shop.xposition) || 50,
+    qrY: Number(shop.yposition) || 50,
+    fontSize: Number(shop.fontsize) || 16,
+    fontColor: shop.fontcolor || "#FFFFFF",
+    fontX: Number(shop.fontxposition) || 50,
+    fontY: Number(shop.fontyposition) || 85,
+    bgImageUrl: getImageUrl(shop.qrBackground),
+  });
+
+  const shopHost = useMemo(() => window.location.hostname, []);
+  const fullLink = useMemo(() => `${shopHost}/${cafeIdentifyName}`, [shopHost, cafeIdentifyName]);
+
+  // Debounced availability check
+  const debounceRef = useRef(null);
+  const handleIdentifyChange = (e) => {
+    const val = e.target.value
+      .toLowerCase()
+      .replace(/\s+/g, "_")
+      .replace(/[^a-z0-9_]/g, "");
+    setCafeIdentifyName(val);
+    setChecking(true);
+    setAvailability(null);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const res = await fetch(`${API_BASE_URL}/cafe/check-identifyName/${val}`);
+        setAvailability(res.ok ? 200 : 409);
+      } catch (_) {
+        setAvailability(409);
+      } finally {
+        setChecking(false);
+      }
+    }, 600);
+  };
+
+  // Load tables
+  useEffect(() => {
+    (async () => {
+      try {
+        const fetched = await getTables(shop.cafeId);
+        setTables(fetched || []);
+      } catch (e) {
+        // ignore
+      }
+    })();
+  }, [shop.cafeId]);
+
+  const handleUploadBg = (e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const url = URL.createObjectURL(file);
+      setBgImageUrl(url);
+    }
+  };
+
+  const handleCreateTable = async () => {
+    if (!newTableNo) return;
+    try {
+      const created = await createTable(shop.cafeId, { tableNo: newTableNo });
+      setTables((t) => [...t, created]);
+      setNewTableNo("");
+    } catch (e) {
+      // noop
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaveStatus(null);
+    const qrBackgroundFile = bgFileRef.current?.files?.[0];
+    const details = {
+      qrSize,
+      qrPosition: { left: qrX, top: qrY },
+      qrBackgroundFile,
+      fontsize: fontSize,
+      fontcolor: fontColor,
+      fontPosition: { left: fontX, top: fontY },
+      cafeIdentifyName: shop.cafeIdentifyName !== cafeIdentifyName ? cafeIdentifyName : null,
+    };
+    try {
+      await saveCafeDetails(shop.cafeId, details);
+      setSaveStatus('success');
+    } catch (e) {
+      setSaveStatus('error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const downloadPreview = async () => {
+    if (!previewRef.current) return;
+    const node = previewRef.current;
+    const originalBg = node.style.backgroundColor;
+    node.style.backgroundColor = "transparent";
+    try {
+      const dataUrl = await toPng(node, { pixelRatio: 2 });
+      const link = document.createElement("a");
+      link.href = dataUrl;
+      link.download = selectedTable ? `QR Meja (${selectedTable.tableNo}).png` : `QR ${shop.name}.png`;
+      link.click();
+    } catch (e) {
+      // noop
+    } finally {
+      node.style.backgroundColor = originalBg;
+    }
+  };
+
+  const copyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(fullLink);
+      setCopied(true);
+      setTimeout(()=>setCopied(false), 1400);
+    } catch (_) {}
+  };
+
+  const applyPreset = (preset) => {
+    if (preset === 'center') {
+      setQrX(50); setQrY(50); setQrSize(1);
+      setFontX(50); setFontY(85);
+    } else if (preset === 'topLeft') {
+      setQrX(25); setQrY(30); setQrSize(1);
+      setFontX(50); setFontY(85);
+    } else if (preset === 'bottomRight') {
+      setQrX(75); setQrY(70); setQrSize(1);
+      setFontX(50); setFontY(15);
+    }
+  };
+
+  const resetDesign = () => {
+    const d = initialDesignRef.current;
+    setQrSize(d.qrSize);
+    setQrX(d.qrX);
+    setQrY(d.qrY);
+    setFontSize(d.fontSize);
+    setFontColor(d.fontColor);
+    setFontX(d.fontX);
+    setFontY(d.fontY);
+    setBgImageUrl(d.bgImageUrl);
+    if (bgFileRef.current) bgFileRef.current.value = '';
+  };
+
+  // Positioning helpers
+  const qrStyle = {
+    left: `${qrX}%`,
+    top: `${qrY}%`,
+    transform: `translate(-50%, -50%) scale(${qrSize})`,
+  };
+  const fontStyle = {
+    left: `${fontX}%`,
+    top: `${fontY}%`,
+    transform: `translate(-50%, -50%)`,
+    color: fontColor,
+    fontSize: `${fontSize}px`,
+    position: "absolute",
+    fontWeight: 700,
+  };
+
+  const qrData = selectedTable ? `${fullLink}/${selectedTable.tableNo}` : fullLink;
+
+  const canProceedFromStep1 = () => {
+    if (!cafeIdentifyName) return false;
+    if (cafeIdentifyName === (shop.cafeIdentifyName || '')) return true;
+    return availability === 200 && !checking;
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.title}>Identifikasi kedai</div>
+        <div className={styles.steps}>
+          <div className={`${styles.step} ${currentStep === 1 ? styles.stepActive : ''}`}>
+            <span className={styles.stepNumber}>1</span> Alamat
+          </div>
+          <div className={`${styles.step} ${currentStep === 2 ? styles.stepActive : ''}`}>
+            <span className={styles.stepNumber}>2</span> Desain QR
+          </div>
+          <div className={`${styles.step} ${currentStep === 3 ? styles.stepActive : ''}`}>
+            <span className={styles.stepNumber}>3</span> Meja
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.scrollArea}>
+        {currentStep === 1 && (
+          <div className={styles.section}>
+            <div className={styles.sectionTitle}>Alamat kedai</div>
+            <div className={styles.row}>
+              <div className={styles.domainPrefix}>{shopHost}/</div>
+              <input
+                value={cafeIdentifyName}
+                onChange={handleIdentifyChange}
+                className={styles.input}
+                placeholder="alamat_kedai"
+              />
+              <div className={`${styles.status} ${availability === 200 ? styles.statusOk : availability === 409 ? styles.statusBad : ''}`}>
+                {checking ? 'Memeriksa…' : availability === 200 ? 'Tersedia' : availability === 409 ? 'Terpakai' : 'Menunggu input'}
+              </div>
+            </div>
+            <div className={styles.helpText}>Gunakan huruf kecil, angka, dan garis bawah (_). Contoh: kopikenangan_malam</div>
+            <div className={styles.copyRow}>
+              <input className={styles.linkField} readOnly value={fullLink} />
+              <button className={styles.button} onClick={copyLink}>{copied ? 'Disalin' : 'Salin'}</button>
+            </div>
+          </div>
+        )}
+
+        {currentStep === 2 && (
+          <div className={styles.section}>
+            <div className={styles.sectionTitle}>Desain QR</div>
+            <div className={styles.presets}>
+              <button className={styles.presetButton} onClick={()=>applyPreset('center')}>Tengah</button>
+              <button className={styles.presetButton} onClick={()=>applyPreset('topLeft')}>Atas-Kiri</button>
+              <button className={styles.presetButton} onClick={()=>applyPreset('bottomRight')}>Bawah-Kanan</button>
+              <button className={styles.presetButton} onClick={resetDesign}>Reset desain</button>
+            </div>
+            <div className={styles.grid}>
+              <div>
+                <div ref={previewRef} id="qr-code-container" className={styles.previewBox} style={{ backgroundColor: '#fff' }}>
+                  {bgImageUrl && <img src={bgImageUrl} alt="Background" className={styles.bgPreview} />}
+                  <img
+                    className={styles.qrLayer}
+                    style={qrStyle}
+                    alt="QR"
+                    src={`https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(qrData)}`}
+                  />
+                  <div style={fontStyle}>{selectedTable ? selectedTable.tableNo : 'Kedai'}</div>
+                </div>
+              </div>
+              <div className={styles.controls}>
+                <div className={styles.field}>
+                  <label className={styles.label}>Gambar latar</label>
+                  <input ref={bgFileRef} type="file" accept="image/*" onChange={handleUploadBg} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Skala QR ({qrSize}x)</label>
+                  <input className={styles.range} type="range" min="0.5" max="3" step="0.1" value={qrSize} onChange={(e)=>setQrSize(parseFloat(e.target.value))} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Posisi QR - horizontal ({qrX}%)</label>
+                  <input className={styles.range} type="range" min="0" max="100" step="1" value={qrX} onChange={(e)=>setQrX(parseInt(e.target.value))} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Posisi QR - vertikal ({qrY}%)</label>
+                  <input className={styles.range} type="range" min="0" max="100" step="1" value={qrY} onChange={(e)=>setQrY(parseInt(e.target.value))} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Ukuran teks ({fontSize}px)</label>
+                  <input className={styles.range} type="range" min="8" max="48" step="1" value={fontSize} onChange={(e)=>setFontSize(parseInt(e.target.value))} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Warna teks</label>
+                  <input className={styles.colorInput} type="color" value={fontColor} onChange={(e)=>setFontColor(e.target.value)} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Posisi teks - horizontal ({fontX}%)</label>
+                  <input className={styles.range} type="range" min="0" max="100" step="1" value={fontX} onChange={(e)=>setFontX(parseInt(e.target.value))} />
+                </div>
+                <div className={styles.field}>
+                  <label className={styles.label}>Posisi teks - vertikal ({fontY}%)</label>
+                  <input className={styles.range} type="range" min="0" max="100" step="1" value={fontY} onChange={(e)=>setFontY(parseInt(e.target.value))} />
+                </div>
+              </div>
+            </div>
+            <div className={styles.helpText}>Tip: Gunakan latar yang kontras agar QR mudah dipindai.</div>
+          </div>
+        )}
+
+        {currentStep === 3 && (
+          <div className={styles.section}>
+            <div className={styles.sectionTitle}>Daftar meja</div>
+            <div className={styles.tables}>
+              <input className={styles.input} placeholder="Meja A1" value={newTableNo} onChange={(e)=>setNewTableNo(e.target.value)} />
+              <button className={styles.button} onClick={handleCreateTable}>Buat meja</button>
+            </div>
+            <div className={styles.tableList}>
+              {tables && tables
+                .filter((t)=>t.tableNo !== 0)
+                .map((t)=>{
+                  const active = selectedTable && selectedTable.tableId === t.tableId;
+                  return (
+                    <div
+                      key={t.tableId}
+                      className={`${styles.tableItem} ${active ? styles.tableItemActive : ''}`}
+                      onClick={()=>setSelectedTable(active ? null : t)}
+                    >
+                      {t.tableNo}
+                    </div>
+                  );
+                })}
+            </div>
+            <div className={styles.helpText}>Pilih meja untuk membuat QR khusus meja (opsional).</div>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.footer}>
+        <div className={styles.actions}>
+          <button className={`${styles.button} ${styles.secondary}`} disabled={currentStep === 1} onClick={()=>setCurrentStep((s)=>Math.max(1, s-1))}>Kembali</button>
+          {currentStep < 3 ? (
+            <button className={`${styles.button} ${styles.primary}`} disabled={currentStep === 1 && !canProceedFromStep1()} onClick={()=>setCurrentStep((s)=>Math.min(3, s+1))}>Lanjut</button>
+          ) : (
+            <button className={`${styles.button} ${styles.primary}`} onClick={handleSave} disabled={saving}>{saving ? 'Menyimpan…' : 'Simpan'}</button>
+          )}
+        </div>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          {saveStatus === 'success' && <div className={`${styles.banner} ${styles.bannerSuccess}`}>Simpan berhasil</div>}
+          {saveStatus === 'error' && <div className={`${styles.banner} ${styles.bannerError}`}>Gagal menyimpan</div>}
+          <button className={`${styles.button} ${styles.muted}`} onClick={downloadPreview}>Download QR {selectedTable ? 'meja' : 'kedai'}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/IdentifyCafeModal.module.css b/src/components/IdentifyCafeModal.module.css
new file mode 100644
index 0000000..1e8a84c
--- /dev/null
+++ b/src/components/IdentifyCafeModal.module.css
@@ -0,0 +1,299 @@
+/* IdentifyCafeModal.module.css */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  background: #fff;
+  height: 100%;
+}
+
+.steps {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.step {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid #e6e6e6;
+  background: #fafafa;
+  color: #666;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.stepNumber {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: #e9ecef;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.stepActive {
+  border-color: #cdebd8;
+  background: #e9f7ef;
+  color: #245c3d;
+}
+
+.helpText {
+  font-size: 12px;
+  color: #666;
+  margin-top: 6px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.scrollArea {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.section {
+  background: #fafafa;
+  border: 1px solid #e6e6e6;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.sectionTitle {
+  margin: 0 0 10px 0;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.domainPrefix {
+  background: #f0f0f0;
+  border: 1px solid #ddd;
+  border-radius: 10px 0 0 10px;
+  padding: 10px 12px;
+  font-size: 14px;
+  color: #555;
+}
+
+.input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 0 10px 10px 0;
+  outline: none;
+  font-size: 14px;
+}
+
+.status {
+  font-size: 12px;
+  font-weight: 700;
+  padding: 6px 10px;
+  border-radius: 999px;
+}
+
+.statusOk {
+  color: #155724;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+}
+
+.statusBad {
+  color: #721c24;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+}
+
+.copyRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.linkField {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #333;
+  background: #fff;
+}
+
+.button {
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  background: #fff;
+  cursor: pointer;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1.3fr 1fr;
+  gap: 16px;
+}
+
+.previewBox {
+  border: 1px solid #e6e6e6;
+  border-radius: 12px;
+  background: #fff;
+  height: 280px;
+  position: relative;
+  overflow: hidden;
+}
+
+.bgPreview {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.qrLayer {
+  position: absolute;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0 4px 0;
+}
+
+.presetButton {
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid #e6e6e6;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 12px;
+  color: #555;
+}
+
+.range {
+  width: 100%;
+}
+
+.colorInput {
+  height: 38px;
+  padding: 0 6px;
+}
+
+.tables {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.tableList {
+  max-height: 180px;
+  overflow: auto;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.tableItem {
+  padding: 8px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.tableItemActive {
+  background: #e9f7ef;
+  border: 1px solid #cdebd8;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.primary {
+  background: #28a745;
+  color: #fff;
+  border: none;
+}
+
+.muted {
+  background: #f6f6f6;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.secondary {
+  background: #f0f0f0;
+}
+
+.banner {
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.bannerSuccess {
+  color: #155724;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+}
+
+.bannerError {
+  color: #721c24;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+}
+
+@media (max-width: 820px) {
+  .grid { grid-template-columns: 1fr; }
+  .controls { grid-template-columns: 1fr; }
+}
diff --git a/src/components/ItemConfig.js b/src/components/ItemConfig.js
index d528c18..3254c84 100644
--- a/src/components/ItemConfig.js
+++ b/src/components/ItemConfig.js
@@ -23,6 +23,8 @@ const ItemConfig = ({
     const [itemDescription, setItemDescription] = useState(initialDescription);
     const fileInputRef = useRef(null);
     const textareaRef = useRef(null);
+    const [saving, setSaving] = useState(false);
+    const [saveStatus, setSaveStatus] = useState(null); // 'success' | 'error'
 
     useEffect(() => {
         // Prevent scrolling when modal is open
@@ -79,15 +81,29 @@ const ItemConfig = ({
         }
     }, [textareaRef.current]);
 
-    const handleCreate = () => {
-        console.log(itemPromoPrice)
-        handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, itemPromoPrice);
-        document.body.style.overflow = "auto";
+    const handleCreate = async () => {
+        setSaving(true);
+        setSaveStatus(null);
+        try {
+            await Promise.resolve(handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, itemPromoPrice));
+            setSaveStatus('success');
+        } catch (e) {
+            setSaveStatus('error');
+        } finally {
+            setSaving(false);
+        }
     };
-    const handleUpdate = () => {
-        console.log(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice)
-        handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
-        document.body.style.overflow = "auto";
+    const handleUpdate = async () => {
+        setSaving(true);
+        setSaveStatus(null);
+        try {
+            await Promise.resolve(handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice));
+            setSaveStatus('success');
+        } catch (e) {
+            setSaveStatus('error');
+        } finally {
+            setSaving(false);
+        }
     };
 
     return (
@@ -124,6 +140,14 @@ const ItemConfig = ({
                 </div>
 
                 <div className={styles.formSection}>
+                    <div className={styles.bannerRow}>
+                        {saveStatus === 'success' && (
+                            <span className={`${styles.banner} ${styles.bannerSuccess}`}>Perubahan disimpan</span>
+                        )}
+                        {saveStatus === 'error' && (
+                            <span className={`${styles.banner} ${styles.bannerError}`}>Gagal menyimpan perubahan</span>
+                        )}
+                    </div>
                     <div className={styles.formGroup}>
                         <label className={styles.formLabel}>Nama Item</label>
                         <input
@@ -167,17 +191,19 @@ const ItemConfig = ({
                     </div>
 
                     <div className={styles.formActions}>
-                        <button 
-                            onClick={cancelEdit} 
+                        <button
+                            onClick={cancelEdit}
                             className={`${styles.formButton} ${styles.cancelButton}`}
+                            disabled={saving}
                         >
                             Batal
                         </button>
-                        <button 
-                            onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()}} 
+                        <button
+                            onClick={() => { isBeingEdit ? handleUpdate() : handleCreate() }}
                             className={`${styles.formButton} ${styles.saveButton}`}
+                            disabled={saving}
                         >
-                            {isBeingEdit ? 'Simpan Perubahan' : 'Buat Item'}
+                            {saving ? 'Menyimpan…' : (isBeingEdit ? 'Simpan Perubahan' : 'Buat Item')}
                         </button>
                     </div>
                 </div>
@@ -186,4 +212,4 @@ const ItemConfig = ({
     );
 };
 
-export default ItemConfig;
\ No newline at end of file
+export default ItemConfig;
diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css
index e1ce173..408db88 100644
--- a/src/components/ItemTypeLister.css
+++ b/src/components/ItemTypeLister.css
@@ -1,10 +1,12 @@
+/* ItemTypeLister.css */
+
 /* New clean, intuitive category bar */
 .item-type-lister {
   width: 100%;
   overflow-x: auto;
   white-space: nowrap;
-  padding: 12px 0;
-  margin-bottom: 12px;
+  padding: 8px 0; /* Reduced padding for more compact design */
+  margin-bottom: 8px; /* Reduced margin for more compact design */
   scrollbar-width: thin;
   display: flex;
   justify-content: center;
@@ -12,20 +14,20 @@
 }
 
 .item-type-lister::-webkit-scrollbar {
-  height: 8px;
+  height: 6px;
 }
 
 .item-type-lister::-webkit-scrollbar-thumb {
   background-color: #c5c5c5;
-  border-radius: 4px;
+  border-radius: 3px;
 }
 
 .category-bar {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px; /* Reduced gap for more compact design */
   overflow-x: auto;
-  padding: 10px 15px;
+  padding: 6px 10px; /* Reduced padding */
   -ms-overflow-style: none;
   scrollbar-width: none;
   justify-content: center;
@@ -39,7 +41,7 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
   overflow-y: hidden;
-  gap: 10px;
+  gap: 6px; /* Added gap for consistent spacing */
   justify-content: center;
   align-items: center;
   width: 100%;
@@ -49,37 +51,34 @@
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
-  gap: 10px;
-  height: 42px;
-  padding: 0 18px;
-  border-radius: 12px; /* Square rounded corners */
+  gap: 6px;
+  height: 32px; /* Reduced height for more compact design */
+  padding: 0 14px; /* Reduced padding for more compact design */
+  border-radius: 999px;
   border: 1px solid #e6e6e6;
   background: #ffffff;
   color: #2d2d2d;
   font-family: "Plus Jakarta Sans", sans-serif;
   font-weight: 500;
-  font-size: 16px;
+  font-size: 13px; /* Slightly smaller font */
   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.selected {
   background: #73a585;
   color: #ffffff;
   border-color: #73a585;
-  box-shadow: 0 2px 6px rgba(115, 165, 133, 0.2);
 }
 
 .category-chip .chip-icon {
-  width: 22px;
-  height: 22px;
+  width: 16px; /* Reduced icon size */
+  height: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -105,40 +104,146 @@
 
 .inline-container {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  padding: 12px;
-  overflow-y: auto;
+  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-container {
   display: grid;
-  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);
+  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);
 }
 
 .add-button {
-  margin: 12px;
-  padding: 12px 24px;
-  position: absolute;
+  margin: 10px; /* Margin around the button */
+  padding: 10px 20px; /* Padding for the button */
+  position: absolute; /* Optional, for styling */
   bottom: 0;
-  align-self: center;
+  align-self: center; /* Center the button horizontally */
 }
 
-/* Centered container for item type list */
-.centered-item-type-list {
+/* Legacy styles kept for ItemType grid if needed elsewhere */
+
+/* Compact centered item type list without icon tiles */
+.compact-centered-list {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: 12px 0;
+  padding: 8px 0;
+  overflow-x: auto;
 }
 
-/* No icon styles */
-.no-icon {
-  padding: 0 20px; /* Increased padding for better touch targets */
+.compact-item-type {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 1px solid #e6e6e6;
+  background: #ffffff;
+  color: #2d2d2d;
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  margin: 0 4px;
+  white-space: nowrap;
+}
+.compact-item-type:hover { 
+  border-color: #d0d0d0; 
+  background-color: #f8f8f8;
+}
+.compact-item-type.selected {
+  background: #73a585;
+  color: #ffffff;
+  border-color: #73a585;
+}
+
+.compact-add-item {
+  background: #f4f7f5;
+  border-color: #dfe7e2;
+  color: #4a6b5a;
+}
+.compact-add-item:hover { 
+  background: #eaf1ed; 
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .item-type-lister {
+    padding: 6px 0;
+    margin-bottom: 6px;
+  }
+  
+  .category-bar {
+    gap: 4px;
+    padding: 4px 8px;
+  }
+  
+  .item-type-list {
+    gap: 4px;
+  }
+  
+  .category-chip {
+    height: 28px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+  
+  .category-chip .chip-icon {
+    width: 14px;
+    height: 14px;
+  }
+  
+  .compact-item-type {
+    height: 32px;
+    padding: 0 14px;
+    font-size: 13px;
+    margin: 0 3px;
+  }
+}
+
+@media (max-width: 480px) {
+  .item-type-lister {
+    padding: 4px 0;
+    margin-bottom: 4px;
+  }
+  
+  .category-bar {
+    gap: 3px;
+    padding: 3px 6px;
+  }
+  
+  .item-type-list {
+    gap: 3px;
+  }
+  
+  .category-chip {
+    height: 26px;
+    padding: 0 10px;
+    font-size: 11px;
+  }
+  
+  .category-chip .chip-icon {
+    width: 12px;
+    height: 12px;
+  }
+  
+  .compact-item-type {
+    height: 30px;
+    padding: 0 12px;
+    font-size: 12px;
+    margin: 0 2px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js
index 3705764..0248f0d 100644
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import smoothScroll from "smooth-scroll-into-view-if-needed";
 import "./ItemTypeLister.css";
-import ItemType from "./ItemType";
 import { createItem } from "../helpers/itemHelper.js";
 import { getImageUrl } from "../helpers/itemHelper";
 import ItemLister from "./ItemLister";
@@ -62,15 +61,15 @@ const ItemTypeLister = ({
 
   return (
     <div className="item-type-lister" style={{ overflowX: isAddingNewItem ? 'hidden' : 'auto' }}>
-      <div className="centered-item-type-list">
-        <div ref={newItemDivRef} className="item-type-list" style={{ display: 'inline-flex' }}>
+      <div className="compact-centered-list">
+        <div ref={newItemDivRef} className="compact-item-type-list" style={{ display: 'inline-flex' }}>
           {isEditMode && !isAddingNewItem && canManage && (
-            <ItemType
+            <div
+              className="compact-item-type compact-add-item"
               onClick={toggleAddNewItem}
-              name={"buat baru"}
-              noIcon={true}
-              compact={false} // Make it larger for better touch targets
-            />
+            >
+              Buat baru
+            </div>
           )}
 
           {canManage && isAddingNewItem && (
@@ -91,24 +90,22 @@ const ItemTypeLister = ({
           )}
 
           {itemTypes && itemTypes.length > 0 && (
-            <ItemType
-              name={"semua"}
+            <div
+              className={`compact-item-type ${filterId === 0 ? 'selected' : ''}`}
               onClick={() => onFilterChange(0)}
-              selected={filterId === 0}
-              noIcon={true}
-              compact={false} // Make it larger for better touch targets
-            />
+            >
+              Semua
+            </div>
           )}
 
           {itemTypes && itemTypes.map((itemType) => (
-            <ItemType
+            <div
               key={itemType.itemTypeId}
-              name={itemType.name}
+              className={`compact-item-type ${filterId === itemType.itemTypeId ? 'selected' : ''}`}
               onClick={() => onFilterChange(itemType.itemTypeId)}
-              selected={filterId === itemType.itemTypeId}
-              noIcon={true}
-              compact={false} // Make it larger for better touch targets
-            />
+            >
+              {formatName(itemType.name)}
+            </div>
           ))}
         </div>
       </div>
diff --git a/src/components/Modal.js b/src/components/Modal.js
index e3ef0ae..1316c00 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -5,7 +5,7 @@ import AccountUpdatePage from "../components/AccountUpdatePage.js";
 import CreateClerk from "../pages/CreateClerk"
 import CreateCafe from "../pages/CreateCafe"
 import CreateTenant from "../pages/CreateTenant"
-import TablesPage from "./TablesPage.js";
+import IdentifyCafeModal from "./IdentifyCafeModal.js";
 import PaymentOptions from "./PaymentOptions.js";
 import Transaction from "../pages/Transaction";
 import Transaction_item from "../pages/Transaction_item";
@@ -77,7 +77,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
   if(modalContent == '') handleOverlayClick();
   return (
     <div key={updateKey} onClick={handleOverlayClick} className={styles.modalOverlay}>
-      <div className={styles.modalContent} onClick={handleContentClick}>
+      <div className={`${styles.modalContent} ${(modalContent === 'edit_tables' || modalContent === 'payment_option' || modalContent === 'create_clerk') ? styles.modalContentWide : ''}`} onClick={handleContentClick}>
         
       {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
         {modalContent === "reset-password" && <ResetPassword />}
@@ -86,7 +86,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "create_clerk" && <CreateClerk shopId={shop.cafeId} />}
         {modalContent === "create_kedai" && <CreateCafe shopId={shop.cafeId} />}
         {modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
-        {modalContent === "edit_tables" && <TablesPage shop={shop} />}
+        {modalContent === "edit_tables" && <IdentifyCafeModal shop={shop} />}
         {modalContent === "new_transaction" && (
           <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} depth={depth} shopImg={shopImg} setModal={setModal}/>
         )}
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
index bd6ebe3..b1d694b 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -8,7 +8,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 9999;
   padding: 20px;
 }
 
@@ -23,6 +23,12 @@
   flex-direction: column;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   animation: modalAppear 0.3s ease-out;
+  position: relative;
+  z-index: 10000; /* ensure above any page overlays */
+}
+
+.modalContentWide {
+  max-width: 920px;
 }
 
 @keyframes modalAppear {
@@ -178,6 +184,31 @@
   margin-top: 10px;
 }
 
+.bannerRow {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+
+.banner {
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.bannerSuccess {
+  color: #155724;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+}
+
+.bannerError {
+  color: #721c24;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+}
+
 .formButton {
   flex: 1;
   padding: 14px 16px;
@@ -262,4 +293,4 @@
   .formActions {
     flex-direction: column;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js
index e324cb2..d229195 100644
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -1,18 +1,13 @@
 import React, { useState, useRef, useEffect } from "react";
 import QrScanner from "qr-scanner";  // Import qr-scanner
 import { getImageUrl } from "../helpers/itemHelper";
-import {
-  getCafe,
-  saveCafeDetails,
-  setConfirmationStatus,
-  setOpenBillAvailability
-} from "../helpers/cafeHelpers";
+import { getCafe, saveCafeDetails } from "../helpers/cafeHelpers";
 import Switch from "react-switch"; // Import the Switch component
+import styles from "./PaymentOptions.module.css";
 
-const SetPaymentQr = ({ shopId,
-  qrCodeUrl }) => {
-  const [qrPosition, setQrPosition] = useState([50, 50]);
-  const [qrSize, setQrSize] = useState(50);
+const SetPaymentQr = ({ shopId, qrCodeUrl }) => {
+  const [qrPosition, setQrPosition] = useState([50, 50]); // legacy kept for API compatibility
+  const [qrSize, setQrSize] = useState(50); // legacy kept for API compatibility
   const [qrPayment, setQrPayment] = useState();
   const [qrPaymentFile, setQrPaymentFile] = useState();
   const [qrCodeDetected, setQrCodeDetected] = useState(false);
@@ -26,6 +21,9 @@ const SetPaymentQr = ({ shopId,
 
   const [isConfigQRIS, setIsConfigQRIS] = useState(false);
   const [isOpenBillAvailable, setIsOpenBillAvailable] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState(null); // 'success' | 'error'
+  const [copied, setCopied] = useState(false);
 
   useEffect(() => {
     const fetchCafe = async () => {
@@ -104,6 +102,8 @@ const SetPaymentQr = ({ shopId,
 
   // Save cafe details
   const handleSave = async () => {
+    setSaving(true);
+    setSaveStatus(null);
     let qrPaymentFileCache;
     console.log(qrPaymentFile)
     if(qrPaymentFile != null)
@@ -120,240 +120,141 @@ const SetPaymentQr = ({ shopId,
 
     try {
       const response = await saveCafeDetails(cafe.cafeId, details);
-
-      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
-      setIsQRISavailable(response.isQRISavailable ? 1 : 0); // Update state after saving
-      setIsOpenBillAvailable(response.isOpenBillAvailable ? 1 : 0); // Update state after saving
-
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0);
+      setIsQRISavailable(response.isQRISavailable ? 1 : 0);
+      setIsOpenBillAvailable(response.isOpenBillAvailable ? 1 : 0);
+      setSaveStatus('success');
       console.log("Cafe details saved:", response);
     } catch (error) {
       console.error("Error saving cafe details:", error);
+      setSaveStatus('error');
+    } finally {
+      setSaving(false);
     }
   };
 
+  const copyQrData = async () => {
+    if (!qrCodeData) return;
+    try {
+      await navigator.clipboard.writeText(qrCodeData);
+      setCopied(true);
+      setTimeout(()=>setCopied(false), 1200);
+    } catch {}
+  };
+
   return (
-    <div style={styles.container}>
-      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
+    <div className={styles.container}>
+      <h3 className={styles.title}>Konfigurasi pembayaran</h3>
 
-      <div style={styles.switchContainer}>
-        <p style={styles.uploadMessage}>
-          Pembayaran QRIS.
-        </p>
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <div className={styles.sectionTitle}>Pembayaran QRIS</div>
+            <div className={styles.sectionDesc}>Aktifkan agar pelanggan dapat membayar via QRIS. Kasir tetap perlu verifikasi rekening.</div>
+          </div>
+          <Switch
+            onChange={(checked) => setIsQRISavailable(checked ? 1 : 0)}
+            checked={isQRISavailable === 1}
+            offColor="#888"
+            onColor="#4CAF50"
+            uncheckedIcon={false}
+            checkedIcon={false}
+            height={25}
+            width={50}
+          />
+        </div>
 
-        {isConfigQRIS ?
+        <div className={styles.row}>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.configButton}`}
+            onClick={() => isQRISavailable === 1 && setIsConfigQRIS(true)}
+            disabled={isQRISavailable !== 1}
+          >
+            Konfigurasi QRIS
+          </button>
+        </div>
+
+        {isConfigQRIS && (
           <>
             <div
               id="qr-code-container"
               ref={qrCodeContainerRef}
+              className={styles.imageBox}
               onClick={() => qrPaymentInputRef.current.click()}
-              style={{
-                ...styles.qrCodeContainer,
-                backgroundImage: `url(${qrPayment})`,
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                backgroundSize: "contain",
-              }}
+              style={{ backgroundImage: `url(${qrPayment})` }}
             >
-              <input
-                type="file"
-                accept="image/*"
-                ref={qrPaymentInputRef}
-                style={{ display: "none" }}
-                onChange={handleFileChange}
-              />
+              <input type="file" accept="image/*" ref={qrPaymentInputRef} style={{ display: 'none' }} onChange={handleFileChange} />
             </div>
-            <div style={styles.uploadMessage}>
-              <p>Klik untuk ganti background</p>
-            </div>
-            <div style={styles.resultMessage}>
-              {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
-              {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
-                onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div
-                  onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
-            </div>
-
-            <div onClick={() => setIsConfigQRIS(false)}
-
-              style={{
-                ...styles.qrisConfigButton,
-                width: '100%',
-                marginLeft: "0",
-              }}
-            >Terapkan</div>
-          </>
-          :
-          <>
-            <p style={styles.description}>
-              Aktifkan fitur agar pelanggan dapat menggunakan opsi pembayaran QRIS, namun kasir anda perlu memeriksa rekening untuk memastikan pembayaran.
-            </p>
-            <div style={{ display: 'flex' }}>
-              <Switch
-                onChange={(checked) => setIsQRISavailable(checked ? 1 : 0)}
-                checked={isQRISavailable === 1} // Convert to boolean
-                offColor="#888"
-                onColor="#4CAF50"
-                uncheckedIcon={false}
-                checkedIcon={false}
-                height={25}
-                width={50}
-              />
-              <div
-                onClick={() => setIsConfigQRIS(true)}
-                style={{
-                  ...styles.qrisConfigButton,
-                  backgroundColor: isQRISavailable == 1 ? styles.qrisConfigButton.backgroundColor : 'gray',
-                }}
-              >
-                Konfigurasi QRIS
+            <div className={styles.smallNote}>Klik area untuk unggah/ganti gambar QR</div>
+            <div className={styles.detectRow}>
+              <div className={`${styles.tag} ${qrCodeDetected ? styles.tagOk : styles.tagBad}`}>
+                {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? 'QR terdeteksi' : 'Tidak ada QR terdeteksi'}
               </div>
-
+              <button className={styles.button} onClick={() => qrPaymentInputRef.current.click()}>{qrPayment ? 'Ganti' : 'Unggah'}</button>
+            </div>
+            {qrCodeDetected && (
+              <div className={styles.copyRow}>
+                <input className={styles.linkField} readOnly value={qrCodeData || ''} />
+                <button className={styles.button} onClick={copyQrData}>{copied ? 'Disalin' : 'Salin'}</button>
+              </div>
+            )}
+            <div className={styles.actionsRight}>
+              <button className={`${styles.button} ${styles.primary}`} onClick={() => setIsConfigQRIS(false)}>Terapkan</button>
             </div>
           </>
-        }
-      </div>
-      <div style={styles.switchContainer}>
-        <p style={styles.uploadMessage}>
-          Open bill
-        </p>
-        <p style={styles.description}>
-          Aktifkan fitur agar pelanggan dapat menambahkan pesanan selama sesi berlangsung tanpa perlu melakukan transaksi baru dan hanya membayar di akhir.
-        </p>
-        <Switch
-          onChange={(checked) => setIsOpenBillAvailable(checked ? 1 : 0)}
-          checked={isOpenBillAvailable === 1} // Convert to boolean
-          offColor="#888"
-          onColor="#4CAF50"
-          uncheckedIcon={false}
-          checkedIcon={false}
-          height={25}
-          width={50}
-        />
+        )}
       </div>
 
-      <div style={styles.switchContainer}>
-        <p style={styles.uploadMessage}>
-          Pengecekan ganda
-        </p>
-        <p style={styles.description}>
-          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
-        </p>
-        <Switch
-          onChange={(checked) => setIsNeedConfirmationState(checked ? 1 : 0)}
-          checked={isNeedConfirmationState === 1} // Convert to boolean
-          offColor="#888"
-          onColor="#4CAF50"
-          uncheckedIcon={false}
-          checkedIcon={false}
-          height={25}
-          width={50}
-        />
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <div className={styles.sectionTitle}>Open bill</div>
+            <div className={styles.sectionDesc}>Izinkan pelanggan menambah pesanan dalam satu sesi dan bayar di akhir.</div>
+          </div>
+          <Switch
+            onChange={(checked) => setIsOpenBillAvailable(checked ? 1 : 0)}
+            checked={isOpenBillAvailable === 1}
+            offColor="#888"
+            onColor="#4CAF50"
+            uncheckedIcon={false}
+            checkedIcon={false}
+            height={25}
+            width={50}
+          />
+        </div>
       </div>
 
-      <div style={styles.buttonContainer}>
-        <button onClick={handleSave} style={styles.saveButton}>
-          Simpan
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <div>
+            <div className={styles.sectionTitle}>Pengecekan ganda</div>
+            <div className={styles.sectionDesc}>Kasir memeriksa kembali ketersediaan item sebelum pembayaran.</div>
+          </div>
+          <Switch
+            onChange={(checked) => setIsNeedConfirmationState(checked ? 1 : 0)}
+            checked={isNeedConfirmationState === 1}
+            offColor="#888"
+            onColor="#4CAF50"
+            uncheckedIcon={false}
+            checkedIcon={false}
+            height={25}
+            width={50}
+          />
+        </div>
+      </div>
+
+      <div className={styles.footer}>
+        <div>
+          {saveStatus === 'success' && <span className={`${styles.banner} ${styles.bannerSuccess}`}>Simpan berhasil</span>}
+          {saveStatus === 'error' && <span className={`${styles.banner} ${styles.bannerError}`}>Gagal menyimpan</span>}
+        </div>
+        <button className={`${styles.button} ${styles.primary}`} onClick={handleSave} disabled={saving}>
+          {saving ? 'Menyimpan…' : 'Simpan'}
         </button>
       </div>
     </div>
   );
 };
 
-// Styles
-const styles = {
-  container: {
-    position: 'relative',
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    maxHeight: '80vh',
-    width: '100%',
-    backgroundColor: "white",
-    padding: "20px",
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-    textAlign: "center", // Center text and children
-  },
-  title: {
-    marginBottom: "20px",
-    fontWeight: "bold",
-  },
-  qrCodeContainer: {
-    backgroundColor: '#999999',
-    borderRadius: '20px',
-    position: "relative",
-    width: "100%",
-    height: "200px",
-    backgroundSize: "contain",
-    overflow: "hidden",
-    margin: "0 auto", // Center the QR code container
-    marginTop: '10px'
-  },
-  uploadMessage: {
-    fontWeight: 600,
-    textAlign: "left",
-  },
-  qrisConfigButton: {
-    borderRadius: '15px',
-    backgroundColor: '#28a745',
-    width: '144px',
-    textAlign: 'center',
-    color: 'white',
-    lineHeight: '24px',
-    marginLeft: '14px',
-  },
-  uploadButton: {
-    paddingRight: '10px',
-    backgroundColor: '#28a745',
-    borderRadius: '30px',
-    color: 'white',
-    fontWeight: 700,
-    height: '36px',
-    lineHeight: '36px',
-    paddingLeft: '10px',
-    paddingHeight: '10px',
-  },
-  resultMessage: {
-    marginTop: "-24px",
-    textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-between'
-  },
-  buttonContainer: {
-    marginTop: "20px",
-    textAlign: "left",
-  },
-  saveButton: {
-    padding: "10px 20px",
-    fontSize: "16px",
-    backgroundColor: "#28a745",
-    color: "#fff",
-    border: "none",
-    borderRadius: "30px",
-    cursor: "pointer",
-    transition: "background-color 0.3s",
-  },
-  switchContainer: {
-    textAlign: "left",
-  },
-  description: {
-    margin: "10px 0",
-    fontSize: "14px",
-    color: "#666",
-  },
-  sliderContainer: {
-    marginBottom: "20px",
-  },
-  label: {
-    display: "block",
-    marginBottom: "10px",
-  },
-  sliderWrapper: {
-    display: "flex",
-    alignItems: "center",
-  },
-  input: {
-    flex: "1",
-    margin: "0 10px",
-  },
-};
-
 export default SetPaymentQr;
diff --git a/src/components/PaymentOptions.module.css b/src/components/PaymentOptions.module.css
new file mode 100644
index 0000000..6d91f6c
--- /dev/null
+++ b/src/components/PaymentOptions.module.css
@@ -0,0 +1,171 @@
+/* PaymentOptions.module.css */
+
+.container {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 80vh;
+  width: 100%;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.section {
+  background: #fafafa;
+  border: 1px solid #e6e6e6;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 14px;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.sectionTitle {
+  font-weight: 700;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.sectionDesc {
+  font-size: 13px;
+  color: #666;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.button {
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  background: #fff;
+  cursor: pointer;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.primary {
+  background: #28a745;
+  border: none;
+  color: #fff;
+}
+
+.configButton {
+  font-weight: 600;
+}
+
+.imageBox {
+  background-color: #999999;
+  border-radius: 12px;
+  position: relative;
+  width: 100%;
+  height: 220px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  overflow: hidden;
+  margin: 10px 0 6px 0;
+}
+
+.smallNote {
+  font-size: 12px;
+  color: #777;
+}
+
+.detectRow {
+  margin-top: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tag {
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tagOk {
+  color: #155724;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+}
+
+.tagBad {
+  color: #721c24;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+}
+
+.copyRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.linkField {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  font-size: 14px;
+}
+
+.actionsRight {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 14px;
+}
+
+.banner {
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.bannerSuccess {
+  color: #155724;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+}
+
+.bannerError {
+  color: #721c24;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+}
+
+@media (max-width: 720px) {
+  .container { padding: 16px; }
+}
+
diff --git a/src/components/TablesPage.js b/src/components/TablesPage.js
deleted file mode 100644
index 5270ed5..0000000
--- a/src/components/TablesPage.js
+++ /dev/null
@@ -1,1180 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import API_BASE_URL from "../config.js";
-import { getImageUrl } from "../helpers/itemHelper";
-import { getTables, updateTable, createTable } from "../helpers/tableHelper";
-import {
-  getCafe,
-  saveCafeDetails,
-  setConfirmationStatus,
-} from "../helpers/cafeHelpers";
-
-import { toPng } from 'html-to-image';
-import { ColorRing } from "react-loader-spinner";
-
-const SetPaymentQr = ({ shop }) => {
-  const [initialPos, setInitialPos] = useState({
-    left: shop.xposition,
-    top: shop.yposition,
-  });
-
-  const [isViewingQR, setIsViewingQR] = useState(false);
-  const [isConfigFont, setIsConfigFont] = useState(false);
-  const [fontsize, setfontsize] = useState(shop.fontsize);
-  const [fontcolor, setfontcolor] = useState(shop.fontcolor);
-  const [initialFontPos, setInitialFontPos] = useState({
-    left: shop.fontxposition,
-    top: shop.fontyposition,
-  });
-
-  const [initialSize, setInitialSize] = useState(shop.scale);
-  const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
-  const qrBackgroundInputRef = useRef(null);
-
-  const [cafeIdentifyNameUpdate, setCafeIdentifyNameUpdate] = useState(shop.cafeIdentifyName);
-  const shopUrl = window.location.hostname + "/" + cafeIdentifyNameUpdate;
-
-
-  const cafeIdentifyNameRef = useRef(null);
-  const [isconfigcafeidentityname, setIsConfigCafeIdentityName] = useState(false);
-
-
-  const generateQRCodeUrl = (tableCode) => {
-    if (tableCode != null) {
-      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-        shopUrl + "/" + tableCode
-      )}`;
-    } else {
-      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-        shopUrl
-      )}`;
-    }
-  };
-
-  const [isConfig, setIsConfig] = useState(false);
-  const [isConfigQR, setIsConfigQR] = useState(false);
-  const [isViewTables, setIsViewTables] = useState(false);
-
-  const [tables, setTables] = useState([]);
-
-  const [selectedTable, setSelectedTable] = useState(null);
-
-  const [tableNo, setTableNo] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [identifyNameResponse, setIdentifyNameResponse] = useState('-----------------');
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        console.log(shop);
-        const fetchedTables = await getTables(shop.cafeId);
-        setTables(fetchedTables);
-      } catch (error) {
-        console.error("Error fetching tables:", error);
-      }
-    };
-
-    fetchData();
-  }, [shop.cafeId]);
-
-  const handleSave = () => {
-    const qrBackgroundFile = qrBackgroundInputRef.current.files[0]; // Get the selected file for qrBackground
-
-    // Prepare the details object
-    const details = {
-      qrSize: initialSize,
-      qrPosition: initialPos,
-      qrBackgroundFile,
-      fontsize,
-      fontcolor,
-      fontPosition: initialFontPos,
-      cafeIdentifyName: shop.cafeIdentifyName != cafeIdentifyNameUpdate ? cafeIdentifyNameUpdate : null,
-      name: shop.name != inputValue ? inputValue : null
-    };
-
-    // Call saveCafeDetails function with the updated details object
-    saveCafeDetails(shop.cafeId, details)
-      .then((response) => {
-        console.log("Cafe details saved:", response);
-          window.location.href = `/${cafeIdentifyNameUpdate}?modal=edit_tables`;
-      })
-      .catch((error) => {
-        console.error("Error saving cafe details:", error);
-      });
-  };
-
-
-  const handlePositionChange = (e) => {
-    const { name, value } = e.target;
-    setInitialPos((prevPosition) => ({
-      ...prevPosition,
-      [name]: parseFloat(value).toFixed(2),
-    }));
-  };
-
-  const handleFontPositionChange = (e) => {
-    const { name, value } = e.target;
-    setInitialFontPos((prevPosition) => ({
-      ...prevPosition,
-      [name]: parseFloat(value).toFixed(2),
-    }));
-  };
-
-  const handleSizeChange = (e) => {
-    setInitialSize(parseFloat(e.target.value).toFixed(2));
-  };
-
-  const handleFontSizeChange = (e) => {
-    setfontsize(parseFloat(e.target.value).toFixed(2));
-  };
-
-  const handleFileChange = (e) => {
-    const file = e.target.files[0];
-    if (file) {
-      const newBgImage = URL.createObjectURL(file); // Create a temporary URL for display
-      setBgImageUrl(newBgImage);
-    }
-  };
-
-  const handleCreate = async () => {
-    // if (newTable) {
-    try {
-      const createdTable = await createTable(shop.cafeId, {
-        // ...newTable,
-        tableNo,
-      });
-      setTables([...tables, createdTable]);
-      setTableNo("");
-    } catch (error) {
-      console.error("Error creating table:", error);
-    }
-  };
-
-  function downloadQrCodeContainer({ selectedTable, shop }) {
-    const node = document.getElementById('qr-code-container');
-
-    if (!node) return;
-
-    // Save the original background color
-    const originalBackgroundColor = node.style.backgroundColor;
-
-    // Temporarily remove the background color
-    node.style.backgroundColor = 'transparent';
-
-    const isTableSelected = selectedTable != null;
-
-    toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution
-      .then((dataUrl) => {
-        const link = document.createElement('a');
-        link.href = dataUrl;
-
-        // Set the file name based on whether selectedTable exists
-        link.download = isTableSelected
-          ? `QR Meja (${selectedTable.tableNo}).png`
-          : `QR ${shop.name}.png`;
-
-        link.click();
-      })
-      .catch((err) => {
-        console.error('Could not download the image', err);
-      })
-      .finally(() => {
-        // Restore the original background color after the download
-        node.style.backgroundColor = originalBackgroundColor;
-      });
-  }
-
-  // This will hold the timeout ID so we can clear it when needed
-  const typingTimeoutRef = useRef(null);
-
-  const handleInputChange = (e) => {
-    setIsLoading(true)
-    const updatedValue = e.target.value
-      .toLowerCase()
-      .replace(/ /g, '_')
-      .replace(/[^a-z0-9_]/g, '');
-    setCafeIdentifyNameUpdate(updatedValue);
-
-    // Clear the existing timeout
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    // Set a new timeout
-    typingTimeoutRef.current = setTimeout(() => {
-      // Call the function to check if the name is already used
-      checkIfNameIsUsed(updatedValue);
-    }, 1000); // 1 second delay
-  };
-
-  const checkIfNameIsUsed = async (newIdentifyName) => {
-    // Replace this with your actual API call
-    try {
-      const response = await fetch(API_BASE_URL + `/cafe/check-identifyName/${newIdentifyName}`);
-      console.log(response)
-      if (response.ok) {
-        setIsLoading(false);
-        setIdentifyNameResponse(200)
-      }
-      else {
-        setIsLoading(false);
-        setIdentifyNameResponse(409)
-      }
-    } catch (error) {
-
-    }
-  };
-
-  const [inputValue, setInputValue] = useState(shop.name);
-  const inputRef = useRef(null);
-
-  // Monospace font for accurate character width calculation
-  const monospaceFont = 'monospace';
-
-  // Minimum width for the input field
-  const minWidth = 100; // Minimum width in pixels (adjust as necessary)
-
-  // Function to handle input change and adjust the width
-  const handleInputNameChange = (e) => {
-    setInputValue(e.target.value);
-  };
-
-  // Resize the input width based on the number of characters typed
-  useEffect(() => {
-    if (inputRef.current) {
-      // Get the width of a single character
-      const characterWidth = 10; // You can adjust this value based on the actual font size
-
-      // Calculate the required width based on the number of characters
-      const newWidth = characterWidth * inputValue?.length + 30;
-
-      // Set the input width, ensuring it doesn't go below the minimum width
-      inputRef.current.style.width = `${Math.max(newWidth, minWidth)}px`;
-    }
-  }, [inputValue]); // Trigger effect when the input value changes
-
-  return (
-    <div style={styles.container}>
-      <h3 style={styles.title}>Identifikasi kedai</h3>
-      <div style={{ height: 80, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%' }}>
-        <div
-          style={{
-            width: '100%',
-            height: 38,
-            left: 0,
-            top: 42,
-            position: 'absolute',
-            zIndex: 1,
-          }}
-        >
-          <div
-            style={{
-              width: '100%',
-              height: 38,
-              left: 0,
-              top: 0,
-              position: 'absolute',
-              overflow: 'hidden'
-            }}
-          >
-            <div
-              style={{
-                width: '100%',
-                height: 38,
-                left: 0,
-                top: 0,
-                position: 'absolute',
-                background: '#35363A',
-                boxShadow: '0px -1px 0px #DADCE0 inset',
-              }}
-            />
-            <div
-              style={{
-                width: 51,
-                height: 22,
-                left: 1375,
-                top: 8,
-                position: 'absolute',
-              }}
-            >
-              <div
-                style={{
-                  width: 16,
-                  height: 16,
-                  left: 35,
-                  top: 3,
-                  position: 'absolute',
-                }}
-              >
-                <img
-                  style={{
-                    width: 3,
-                    height: 12,
-                    left: 6.67,
-                    top: 2,
-                    position: 'absolute',
-                  }}
-                  src='https://via.placeholder.com/3x12'
-                />
-              </div>
-              <img
-                style={{
-                  width: 22,
-                  height: 22,
-                  left: 0,
-                  top: 0,
-                  position: 'absolute',
-                  borderRadius: 9999,
-                }}
-                src='https://via.placeholder.com/22x22'
-              />
-            </div>
-            <div
-              style={{
-                height: 28,
-                left: isconfigcafeidentityname ? 0 : 69,
-                right: 0,
-                top: 5,
-                position: 'absolute',
-                zIndex: 3
-              }}
-            >
-              <div
-                style={{
-                  width: '100%',
-                  height: 28,
-                  top: 0,
-                  position: 'absolute',
-                  background: '#202124',
-                  borderRadius: isconfigcafeidentityname ? 0 : '14px 0 0 14px',
-                }}
-              />
-              <div
-                style={{
-                  width: 16,
-                  height: 16,
-                  left: 1199,
-                  top: 6,
-                  position: 'absolute',
-                }}
-              >
-                <img
-                  style={{
-                    width: 12,
-                    height: 11.47,
-                    left: 2,
-                    top: 2,
-                    position: 'absolute',
-                  }}
-                  src='https://via.placeholder.com/12x11'
-                />
-              </div>
-              <div
-                style={{
-                  height: 16,
-                  left: 33,
-                  right: 0,
-                  top: 4,
-                  position: 'absolute',
-                }}
-              >
-                <div
-                  style={{
-                    left: 0,
-                    right: 0,
-                    top: 0,
-                    position: 'absolute',
-                    justifyContent: 'flex-start',
-                    alignItems: 'center',
-                    display: 'inline-flex',
-                  }}
-                >
-                  <div
-                    style={{
-                      color: 'white',
-                      fontSize: 14,
-                      fontFamily: 'Roboto',
-                      fontWeight: '400',
-                      letterSpacing: 0.25,
-                      wordWrap: 'break-word',
-                    }}
-                  >
-                    {window.location.hostname}/
-                  </div>
-                  <input
-                    ref={cafeIdentifyNameRef}
-                    style={{
-                      width: '100%',
-                      color: '#86888A',
-                      fontSize: 14,
-                      fontFamily: 'Roboto',
-                      fontWeight: '400',
-                      letterSpacing: 0.25,
-                      wordWrap: 'break-word',
-                      backgroundColor: 'transparent',
-                      borderColor: 'transparent',
-                      paddingLeft: isconfigcafeidentityname ? '10px' : '0', // Adjust padding when focused
-                      borderLeft: isconfigcafeidentityname ? '1px solid #ccc' : '0', // Adjust border when focused
-                    }}
-                    onChange={
-                      handleInputChange
-                    }
-                    value={cafeIdentifyNameUpdate}
-                    onFocus={() => {
-                      setIsConfigCafeIdentityName(true); // Set the state to true when input is focused
-                    }}
-                  />
-
-                </div>
-              </div>
-              <div
-                style={{
-                  width: 12,
-                  height: 12,
-                  left: 11,
-                  top: 8,
-                  position: 'absolute',
-                }}
-              >
-                <svg style={{
-                  left: 2,
-                  top: 0.5,
-                  position: 'absolute',
-                }} xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 4H8.5V3C8.5 1.62 7.38 0.5 6 0.5C4.62 0.5 3.5 1.62 3.5 3V4H3C2.45 4 2 4.45 2 5V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V5C10 4.45 9.55 4 9 4ZM4.5 4V3C4.5 2.17 5.17 1.5 6 1.5C6.83 1.5 7.5 2.17 7.5 3V4H4.5Z" fill="#EAEAEA" />
-                </svg>
-              </div>
-            </div>
-            <div
-              style={{
-                width: 109,
-                height: 16,
-                left: 12,
-                top: 11,
-                position: 'absolute',
-              }}
-            >
-              <div
-                style={{
-                  width: 16,
-                  height: 16,
-                  left: 31,
-                  top: 0,
-                  position: 'absolute',
-                }}
-              ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.9979 6.33122V2.80455C13.9979 2.50455 13.6379 2.35788 13.4312 2.57122L12.2446 3.75788C11.0379 2.55122 9.31789 1.85788 7.43789 2.02455C4.64456 2.27788 2.34456 4.52455 2.03789 7.31788C1.63789 10.9312 4.45789 13.9979 7.99789 13.9979C11.0579 13.9979 13.5846 11.7046 13.9512 8.74455C13.9979 8.34455 13.6846 7.99788 13.2846 7.99788C12.9512 7.99788 12.6712 8.24455 12.6312 8.57122C12.3446 10.8979 10.3379 12.6979 7.93122 12.6645C5.45789 12.6312 3.37122 10.5445 3.33122 8.06455C3.29122 5.46455 5.40456 3.33122 7.99789 3.33122C9.28456 3.33122 10.4512 3.85788 11.2979 4.69788L9.90456 6.09122C9.69122 6.30455 9.83789 6.66455 10.1379 6.66455H13.6646C13.8512 6.66455 13.9979 6.51788 13.9979 6.33122Z" fill="white" />
-                </svg>
-              </div>
-              <div
-                style={{
-                  width: 16,
-                  height: 16,
-                  left: 0,
-                  top: 0,
-                  position: 'absolute',
-                }}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2299 7.07685H4.62795L8.38601 3.31879C8.68635 3.01845 8.68635 2.52559 8.38601 2.22525C8.08567 1.92492 7.60051 1.92492 7.30018 2.22525L2.22525 7.30018C1.92492 7.60051 1.92492 8.08567 2.22525 8.38601L7.30018 13.4609C7.60051 13.7613 8.08567 13.7613 8.38601 13.4609C8.68635 13.1606 8.68635 12.6754 8.38601 12.3751L4.62795 8.61704H13.2299C13.6535 8.61704 14 8.2705 14 7.84694C14 7.42339 13.6535 7.07685 13.2299 7.07685Z" fill="#86888A" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          style={{
-            width: '100%',
-            height: 42,
-            left: 0,
-            top: 0,
-            position: 'absolute',
-          }}
-        >
-          <div
-            style={{
-              width: '100%',
-              height: 42,
-              left: 0,
-              top: 0,
-              position: 'absolute',
-            }}
-          >
-            <div
-              style={{
-                width: '100%',
-                height: 42,
-                left: 0,
-                top: 0,
-                position: 'absolute',
-                background: '#202124',
-                boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-                borderTopLeftRadius: 8,
-                borderTopRightRadius: 8,
-              }}
-            />
-            <div
-              style={{
-                width: 167,
-                height: 34,
-                left: 72,
-                top: 8,
-                position: 'absolute',
-              }}
-            >
-              <div
-                style={{
-                  width: 131,
-                  height: 34,
-                  left: 8,
-                  top: 0,
-                  position: 'absolute',
-                }}
-              >
-                <div
-                  style={{
-                    left: -6,
-                    top: 0,
-                    position: 'absolute',
-                    justifyContent: 'flex-start',
-                    alignItems: 'center',
-                    gap: 8,
-                    display: 'inline-flex',
-                  }}
-                >
-                  <div
-                    style={{
-                      justifyContent: 'flex-start',
-                      alignItems: 'flex-start',
-                      display: 'flex',
-                    }}
-                  >
-                    <div
-                      style={{ width: 6, height: 8, background: '#35363A' }}
-                    ></div>
-                    <div
-                      style={{
-                        padding: 8,
-                        background: '#35363A',
-                        borderTopLeftRadius: 8,
-                        borderTopRightRadius: 8,
-                        overflow: 'hidden',
-                        justifyContent: 'flex-start',
-                        alignItems: 'center',
-                        gap: 9,
-                        display: 'flex',
-                      }}
-                    >
-                      <img
-                        style={{ width: 16, height: 16 }}
-                        src='./kedaimaster150.png'
-                      />
-                      <div>
-                        <span
-                          style={{
-                            color: 'white',
-                            fontSize: 12,
-                            fontFamily: 'Roboto',
-                            fontWeight: '400',
-                            letterSpacing: 0.2,
-                            wordWrap: 'break-word',
-                          }}
-                        >
-                          KedaiMaster
-                        </span>
-                        <span
-                          style={{
-                            color: '#35363A',
-                            fontSize: 12,
-                            fontFamily: 'Roboto',
-                            fontWeight: '400',
-                            letterSpacing: 0.2,
-                            wordWrap: 'break-word',
-                          }}
-                        >
-                          .
-                        </span>
-                      </div>
-
-                      <div
-                        style={{ width: 18, height: 18, position: 'relative' }}
-                      ><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-                          <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5836 5.42207C12.3618 5.20023 12.0034 5.20023 11.7816 5.42207L9 8.19795L6.21843 5.41638C5.99659 5.19454 5.63823 5.19454 5.41638 5.41638C5.19454 5.63823 5.19454 5.99659 5.41638 6.21843L8.19795 9L5.41638 11.7816C5.19454 12.0034 5.19454 12.3618 5.41638 12.5836C5.63823 12.8055 5.99659 12.8055 6.21843 12.5836L9 9.80205L11.7816 12.5836C12.0034 12.8055 12.3618 12.8055 12.5836 12.5836C12.8055 12.3618 12.8055 12.0034 12.5836 11.7816L9.80205 9L12.5836 6.21843C12.7998 6.00228 12.7998 5.63823 12.5836 5.42207Z" fill="white" />
-                        </svg>
-                      </div>
-                    </div>
-                    <div
-                      style={{
-                        width: 6,
-                        height: 8,
-                        transform: 'rotate(180deg)',
-                        transformOrigin: '0 0',
-                        background: '#35363A',
-                      }}
-                    ></div>
-                  </div>
-                  <div style={{ width: 20, height: 20, position: 'relative' }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7142 10.9524H10.9523V15.7143C10.9523 16.2381 10.5237 16.6667 9.99992 16.6667C9.47611 16.6667 9.04754 16.2381 9.04754 15.7143V10.9524H4.28563C3.76182 10.9524 3.33325 10.5238 3.33325 10C3.33325 9.47623 3.76182 9.04766 4.28563 9.04766H9.04754V4.28575C9.04754 3.76195 9.47611 3.33337 9.99992 3.33337C10.5237 3.33337 10.9523 3.76195 10.9523 4.28575V9.04766H15.7142C16.238 9.04766 16.6666 9.47623 16.6666 10C16.6666 10.5238 16.238 10.9524 15.7142 10.9524Z" fill="#BDC1C6" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              style={{
-                width: 52,
-                height: 12,
-                left: 13,
-                top: 15.5,
-                position: 'absolute',
-              }}
-            >
-              <div
-                style={{
-                  width: 12,
-                  height: 12,
-                  left: 40,
-                  top: 0,
-                  position: 'absolute',
-                  background: '#27CA40',
-                  borderRadius: 9999,
-                  border: '0.50px #3EAF3F solid',
-                }}
-              />
-              <div
-                style={{
-                  width: 12,
-                  height: 12,
-                  left: 20,
-                  top: 0,
-                  position: 'absolute',
-                  background: '#FFC130',
-                  borderRadius: 9999,
-                  border: '0.50px #E1A325 solid',
-                }}
-              />
-              <div
-                style={{
-                  width: 12,
-                  height: 12,
-                  left: 0,
-                  top: 0,
-                  position: 'absolute',
-                  background: '#FF6058',
-                  borderRadius: 9999,
-                  border: '0.50px #E14942 solid',
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-
-
-      {!isconfigcafeidentityname ?
-        <>
-          <div style={styles.uploadMessage}>
-            <p>Alamat kedai</p>
-          </div>
-          <div style={styles.resultMessage}>
-            <p>-----------------</p>
-            <div
-              onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
-            </div>
-          </div>
-        </> : (
-          <>
-
-            <div style={styles.uploadMessage}>
-              <p>{cafeIdentifyNameUpdate == shop.cafeIdentifyName ?
-                '-----------------' :
-                !isLoading && identifyNameResponse == 200 ?
-                  'Alamat tersedia'
-                  :
-                  !isLoading && identifyNameResponse != 200 ?
-                    'Alamat terpakai'
-                    :
-                    < ColorRing
-                      height="16"
-                      width="16" style={{ marginTop: '5px' }} />
-
-              }
-              </p>
-            </div>
-            {identifyNameResponse == 199 &&
-              <div style={{ position: 'absolute', height: '100%', width: '100%', top: 0, left: 0, zIndex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#252525a8', borderRadius: '8px' }}>
-                <div style={{ width: '80%', backgroundColor: 'white', borderRadius: '8px' }}>
-                  <h3>ⓘ</h3>
-                  <p style={{ padding: '0px 14px 14px 14px' }}>Perubahan alamat bisnis akan menyebabkan seluruh QR kode identifikasi kedai atau meja yang telah dicetak sebelumnya menjadi tidak berlaku.</p>
-                  <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-                    <div
-                      onClick={() => { setIdentifyNameResponse(200); }} style={styles.changeButton}>Batal
-                    </div>
-                    <div
-                      onClick={() => { setIsConfigCafeIdentityName(false); setIdentifyNameResponse(200); }} style={styles.changeButton}>Terapkan
-                    </div>
-
-                  </div>
-                </div>
-              </div>
-            }
-            <div style={styles.resultMessage}>
-              <p>{cafeIdentifyNameUpdate != shop.cafeIdentifyName && identifyNameResponse == 200 && !isLoading ?
-                <div
-                  onClick={() => { setIdentifyNameResponse(199) }} style={styles.changeButton2}>Terapkan
-                </div>
-                :
-                '----------'}</p>
-              {isconfigcafeidentityname ?
-                <div
-                  onClick={() => { setIdentifyNameResponse(0); setCafeIdentifyNameUpdate(shop.cafeIdentifyName); setIsConfigCafeIdentityName(false); }} style={styles.changeButton}>Batal
-                </div>
-                :
-                <div
-                  onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
-                </div>
-              }
-            </div>
-            {/* <div
-                onClick={() => { }} style={styles.changeButton}>Simpan
-                {isLoading &&
-                  <ColorRing
-                    height="20"
-                    width="20" style={{ marginTop: '5px' }} />
-                }
-              </div> */}
-          </>
-        )}
-
-      <div style={{ height: 110, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%', border: '1px solid black', borderRadius: '8px', marginBottom: '10px' }}>
-        <div style={{ padding: '16px 12px', height: '84px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <div style={{ height: '27.4px', fontSize: '17.6px', fontFamily: 'monospace', fontWeight: '500', color: 'rgba(88, 55, 50, 1)' }}>
-            <input
-              ref={inputRef}
-              style={{
-                fontSize: '17.6px',
-                fontFamily: 'monospace',  // Monospace font ensures each character has the same width
-                fontWeight: '500',
-                minWidth: `${minWidth}px`, // Minimum width for the input
-              }}
-              value={inputValue}
-              onChange={handleInputNameChange}
-            />
-            &nbsp;menu
-          </div>
-          <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' />
-        </div>
-      </div>
-      <div
-        id="qr-code-container"
-        style={{
-          ...styles.qrCodeContainer,
-          backgroundColor: '#cdcdcd'
-        }}
-      >
-        <img
-          src={bgImageUrl}
-          alt="QR Code"
-          style={{
-            position: "absolute",
-            width: '100%',
-            height: '100%',
-            objectFit: 'contain',
-            transform: "translate(-50%, 0%)",
-          }} />
-        <img
-          src={generateQRCodeUrl(selectedTable?.tableCode || null)}
-          alt="QR Code"
-          style={{
-            position: "absolute",
-            width: `${initialSize}%`,
-            left: `${initialPos.left}%`,
-            top: `${initialPos.top}%`,
-            transform: "translate(-50%, -50%)",
-          }} />
-        <div style={{
-          transformOrigin: 'left',
-          transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
-          position: "absolute",
-          fontSize: `${fontsize * 3}%`,
-          left: `${initialFontPos.left}%`,
-          top: `${initialFontPos.top}%`,
-          textAlign: initialFontPos.left > 50 ? 'right' : 'left'
-        }}>
-          <h1 style={{
-            visibility: !selectedTable && isViewingQR ? 'hidden' : 'visible',
-            transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
-            width: '200%',
-            lineHeight: 0,
-            fontFamily: 'Plus Jakarta Sans',
-            color: fontcolor
-          }} >{selectedTable == null ? (isConfigFont ? 'Nomor meja' : '') : selectedTable.tableNo}</h1>
-        </div>
-        <input
-          type="file"
-          accept="image/*"
-          ref={qrBackgroundInputRef}
-          style={{ display: "none" }}
-          onChange={handleFileChange}
-        />
-      </div>
-      {!isViewingQR ?
-        <>
-          <div style={styles.uploadMessage}>
-            <p>QR sticker kedai dan meja</p>
-            <p>Background</p>
-          </div>
-          <div style={styles.resultMessage}>
-            <p onClick={() => { setIsConfig(!isConfig); setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
-            <div
-              onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div>
-          </div>
-          <div style={styles.switchContainer}>
-            {isConfig &&
-              <div style={{ marginLeft: '15px' }}>
-                <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
-                  {isConfigQR ? '˅' : '˃'} QR
-                </p>
-                {isConfigQR && <>
-                  <div style={styles.sliderContainer}>
-                    <label style={styles.label}>
-                      QR Code Size:
-                      <div style={styles.sliderWrapper}>
-                        <span style={styles.labelStart}>10%</span>
-                        <input
-                          type="range"
-                          step="0.25"
-                          min="10"
-                          max="100"
-                          value={initialSize}
-                          onChange={handleSizeChange}
-                          style={styles.input}
-                        />
-                        <span style={styles.value}>{initialSize}%</span>
-                      </div>
-                    </label>
-                  </div>
-                  <div style={styles.sliderContainer}>
-                    <label style={styles.label}>
-                      QR Code Position X:
-                      <div style={styles.sliderWrapper}>
-                        <span style={styles.labelStart}>0%</span>
-                        <input
-                          type="range"
-                          step="0.25"
-                          name="left"
-                          min="0"
-                          max="100"
-                          value={initialPos.left}
-                          onChange={handlePositionChange}
-                          style={styles.input}
-                        />
-                        <span style={styles.value}>{initialPos.left}%</span>
-                      </div>
-                    </label>
-                  </div>
-                  <div style={styles.sliderContainer}>
-                    <label style={styles.label}>
-                      QR Code Position Y:
-                      <div style={styles.sliderWrapper}>
-                        <span style={styles.labelStart}>0%</span>
-                        <input
-                          type="range"
-                          step="0.25"
-                          name="top"
-                          min="0"
-                          max="100"
-                          value={initialPos.top}
-                          onChange={handlePositionChange}
-                          style={styles.input}
-                        />
-                        <span style={styles.value}>{initialPos.top}%</span>
-                      </div>
-                    </label>
-                  </div>
-                </>}
-
-                <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
-                  {isConfigFont ? '˅' : '˃'} Nomor meja
-                </p>
-                {isConfigFont && (
-                  <>
-                    <div style={styles.sliderContainer}>
-                      <label style={styles.label}>
-                        Ukuran nomor meja:
-                        <div style={styles.sliderWrapper}>
-                          <span style={styles.labelStart}>10%</span>
-                          <input
-                            type="range"
-                            step="0.25"
-                            min="10"
-                            max="100"
-                            value={fontsize}
-                            onChange={handleFontSizeChange}
-                            style={styles.input}
-                          />
-                          <span style={styles.value}>{fontsize}%</span>
-                        </div>
-                      </label>
-                    </div>
-                    <div style={styles.sliderContainer}>
-                      <label style={styles.label}>
-                        Posisi nomor meja - horizontal:
-                        <div style={styles.sliderWrapper}>
-                          <span style={styles.labelStart}>0%</span>
-                          <input
-                            type="range"
-                            step="0.25"
-                            name="left"
-                            min="0"
-                            max="100"
-                            value={initialFontPos.left}
-                            onChange={handleFontPositionChange}
-                            style={styles.input}
-                          />
-                          <span style={styles.value}>{initialFontPos.left}%</span>
-                        </div>
-                      </label>
-                    </div>
-                    <div style={styles.sliderContainer}>
-                      <label style={styles.label}>
-                        Posisi nomor meja - vertikal:
-                        <div style={styles.sliderWrapper}>
-                          <span style={styles.labelStart}>0%</span>
-                          <input
-                            type="range"
-                            step="0.25"
-                            name="top"
-                            min="0"
-                            max="100"
-                            value={initialFontPos.top}
-                            onChange={handleFontPositionChange}
-                            style={styles.input}
-                          />
-                          <span style={styles.value}>{initialFontPos.top}%</span>
-                        </div>
-                      </label>
-                    </div>
-                    <div style={styles.sliderContainer}>
-                      <label style={styles.label}>
-                        Warna nomor meja:
-                        <div style={styles.sliderWrapper}>
-                          <input
-                            type="color"
-                            value='#FFFFFF' // This should be the state holding the selected font color
-                            onChange={(e) => setfontcolor(e.target.value)} // Update the font color state
-                            style={styles.colorInput} // Add your styles for the color input if needed
-                          />
-                          <span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */}
-                        </div>
-                      </label>
-                    </div>
-                  </>
-                )}
-
-
-              </div>
-            }
-            <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
-          {isViewTables ? '˅' : '˃'} Daftar meja
-        </p>
-
-            {isViewTables &&
-              <div style={{ marginTop: '34px', marginLeft: '15px' }}>
-                <div style={styles.resultMessage}>
-                  <input style={{ borderRadius: '12px', paddingLeft: '13px', marginRight: '10px', width: '48%' }} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo} />
-                  <div
-                    onClick={handleCreate} style={styles.uploadButton}>Buat meja</div>
-                </div>
-                {tables && tables
-                  .filter((table) => table.tableNo !== 0)
-                  .map((table) => (
-                    <li
-                      key={table.tableId}
-                      style={{
-                        backgroundColor:
-                          table.tableId === selectedTable?.tableId
-                            ? "lightblue"
-                            : "white",
-                        marginBottom: "10px",
-                        padding: "10px",
-                        borderRadius: "4px",
-                        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-                        cursor: "pointer",
-                        listStyle: 'square'
-                      }}
-                      onClick={() => setSelectedTable(selectedTable == table ? null : table)}
-                    >
-                      <div style={{ marginBottom: "10px" }}>
-                        {table.tableNo}
-                      </div>
-                    </li>
-                  ))
-                }
-              </div>
-            }
-          </div>
-          <div style={styles.buttonContainer}>
-            <button
-              onClick={handleSave}
-              style={{
-                ...styles.saveButton,
-                backgroundColor: isconfigcafeidentityname ? 'rgb(125, 125, 125)' : styles.saveButton.backgroundColor
-              }}
-            >
-              Simpan
-            </button>
-            <button onClick={() => setIsViewingQR(true)} style={styles.saveButton}>
-              Download QR {selectedTable ? 'meja' : 'kedai'}
-            </button>
-          </div>
-        </> :
-        <>
-          <div style={styles.uploadMessage}>
-            <p>Ini adalah QR yang dapat di scan oleh tamu untuk memesan </p>
-            {/* <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p> */}
-          </div>
-          <div style={styles.buttonContainer}>
-            <button onClick={() => downloadQrCodeContainer({ selectedTable, shop })} style={styles.saveButton}>
-              Download QR {selectedTable ? 'meja' : 'kedai'}
-            </button>
-          </div>
-          <div style={styles.backButtonContainer}>
-            <p onClick={() => setIsViewingQR(false)} >
-              Kembali
-            </p>
-          </div>
-        </>
-      }
-    </div>
-  );
-};
-
-// Styles
-const styles = {
-  container: {
-    position: 'relative',
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    maxHeight: '80vh',
-    width: '100%',
-    backgroundColor: "white",
-    padding: "20px",
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-    textAlign: "center", // Center text and children
-  },
-  title: {
-    marginBottom: "20px",
-    fontWeight: "bold",
-  },
-  qrCodeContainer: {
-    backgroundColor: '#999999',
-    borderRadius: '8px',
-    position: "relative",
-    width: "100%",
-    height: "200px",
-    backgroundSize: "contain",
-    overflow: "hidden",
-    margin: "0 auto", // Center the QR code container
-  },
-  uploadMessage: {
-    fontWeight: 600,
-    textAlign: "left",
-    fontSize: "15px"
-  },
-  changeButton: {
-    paddingRight: '10px',
-    backgroundColor: 'rgb(40, 167, 69)',
-    borderRadius: '30px',
-    color: 'white',
-    fontWeight: 700,
-    height: '31px',
-    lineHeight: '32px',
-    paddingLeft: '10px',
-    paddingHeight: '10px',
-    marginBottom: '22px',
-    width: '80px',
-    textAlign: 'center'
-  },
-  changeButton2: {
-    color: 'black',
-    fontWeight: 700,
-    textAlign: 'left'
-  },
-  uploadButton: {
-    paddingRight: '10px',
-    backgroundColor: 'green',
-    borderRadius: '30px',
-    color: 'white',
-    fontWeight: 700,
-    height: '36px',
-    lineHeight: '36px',
-    paddingLeft: '10px',
-    paddingHeight: '10px',
-    width: '40%',
-    textAlign: 'center'
-  },
-  resultMessage: {
-    marginTop: "-24px",
-    // marginBottom: "10px",
-    textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-between'
-  },
-  resultMessage2: {
-    marginTop: "-24px",
-    marginBottom: "10px",
-    textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-evenly'
-  },
-  buttonContainer: {
-    marginTop: "20px",
-    textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-evenly'
-  },
-  backButtonContainer: {
-    marginTop: "2px",
-    marginBottom: "-10px",
-    textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-evenly'
-  },
-  saveButton: {
-    padding: '6px 15px',
-    fontSize: '13px',
-    backgroundColor: 'rgb(40, 167, 69)',
-    color: 'rgb(255, 255, 255)',
-    border: ' none',
-    borderRadius: '30px',
-    cursor: 'pointer',
-    transition: 'background-color 0.3s',
-  },
-  switchContainer: {
-    textAlign: "left",
-    marginTop: '-15px'
-  },
-  description: {
-    margin: "10px 0",
-  },
-  sliderContainer: {
-    marginBottom: "20px",
-  },
-  label: {
-    display: "block",
-    marginBottom: "10px",
-  },
-  sliderWrapper: {
-    display: "flex",
-    alignItems: "center",
-  },
-  input: {
-    flex: "1",
-    margin: "0 10px",
-  },
-};
-
-export default SetPaymentQr;
diff --git a/src/index.css b/src/index.css
index d61228b..c979be0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,15 +17,16 @@ code {
 
 /* Ensure proper scrolling behavior */
 html, body {
-  height: 100%;
   width: 100%;
-  overflow: hidden;
+  min-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 #root {
-  height: 100%;
   width: 100%;
-  overflow: hidden;
+  min-height: 100%;
+  overflow: visible;
 }
 
 /* Custom scrollbar */
@@ -95,4 +96,4 @@ html, body {
     max-height: 80vh;
     overflow-y: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/Cart.js b/src/pages/Cart.js
index 1b95853..e3c6426 100644
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import styles from "./Invoice.module.css";
+import cartStyles from "./CartPage.module.css";
 import { useParams } from "react-router-dom"; // Changed from useSearchParams to useLocation
 import { ThreeDots, ColorRing } from "react-loader-spinner";
 
@@ -384,7 +385,13 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
   return (
     <div className={styles.Invoice} style={{ height: (getItemsByCafeId(shopId).length > 0 ? '' : '100vh'), minHeight: (getItemsByCafeId(shopId).length > 0 ? '100vh' : '') }}>
 
-      <div onClick={goToShop} style={{ marginLeft: '22px', marginTop: '49px', marginRight: '10px', display: 'flex', flexWrap: 'nowrap', alignItems: 'center', fontSize: '25px' }} ><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>Keranjang</div>
+      <div className={cartStyles.header}>
+        <div className={cartStyles.backBtn} onClick={goToShop} aria-label="Kembali">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path fill="#fff" 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>
+        <div className={cartStyles.title}>Keranjang</div>
+      </div>
+      <div className={cartStyles.container}>
 
       {(transactionData == null && getItemsByCafeId(shopId).length < 1) ?
         <div style={{ height: '75vh', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignContent: 'center', alignItems: 'center' }}>
@@ -443,21 +450,21 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
                   </div>
                 )}
 
-                <div className={styles.NoteContainer}>
-                  <span>Catatan :</span>
-                  <span></span>
-                </div>
-
-                <div className={styles.NoteContainer}>
-                  <textarea
-                    ref={textareaRef}
-                    className={styles.NoteInput}
-                    placeholder="Tambahkan catatan..."
-                  />
-                </div>
               </div>
             }
 
+            {getItemsByCafeId(shopId).length > 0 && (
+              <div className={`${styles.RoundedRectangle} ${cartStyles.sectionCard}`}>
+                <div className={cartStyles.sectionTitle}>Catatan Untuk Kasir</div>
+                <div className={cartStyles.divider}></div>
+                <textarea
+                  ref={textareaRef}
+                  className={styles.NoteInput}
+                  placeholder="Contoh: tanpa gula, ekstra es, dsb."
+                />
+              </div>
+            )}
+
             {transactionData &&
               <div className={styles.RoundedRectangle} style={{ backgroundColor: '#c3c3c3', fontSize: '15px', display: 'flex', justifyContent: 'space-between' }}>
                 {transactionData.payment_type != 'paylater' ?
@@ -575,6 +582,7 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
           </>
         )
       }
+      </div>
     </div>
   );
 }
diff --git a/src/pages/CartPage.module.css b/src/pages/CartPage.module.css
new file mode 100644
index 0000000..8b253ae
--- /dev/null
+++ b/src/pages/CartPage.module.css
@@ -0,0 +1,68 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--brand-sage, #6B8F71);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.backBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.15);
+  border: 1px solid rgba(255,255,255,0.25);
+  cursor: pointer;
+}
+
+.title {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.container {
+  padding: 12px;
+}
+
+.sectionCard {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  padding: 12px;
+  margin: 12px 8px;
+}
+
+.sectionTitle {
+  font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  color: #2d2d2d;
+  margin: 4px 0 10px 4px;
+}
+
+.rowBetween {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.hint {
+  font-size: 12px;
+  color: #666;
+}
+
+.divider {
+  height: 1px;
+  background: #eee;
+  margin: 8px 0 12px 0;
+}
diff --git a/src/pages/CreateClerk.js b/src/pages/CreateClerk.js
index 12836b1..3fa4c64 100644
--- a/src/pages/CreateClerk.js
+++ b/src/pages/CreateClerk.js
@@ -1,119 +1,153 @@
-import React, { useState } from 'react';
-import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
+import React, { useEffect, useMemo, useState } from 'react';
+import { createClerks, getClerks } from '../helpers/userHelpers';
 import { useLocation } from "react-router-dom";
+import styles from './CreateClerk.module.css';
 
 const CreateClerk = ({ shopId }) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [banner, setBanner] = useState(null); // { type: 'success'|'error', text: string }
+  const [clerks, setClerks] = useState([]);
 
   const location = useLocation();
   
   const queryParams = new URLSearchParams(location.search);
   const cafeIdParam = queryParams.get("cafeId");
+  const effectiveShopId = useMemo(()=> shopId || cafeIdParam, [shopId, cafeIdParam]);
+
+  useEffect(()=>{
+    const load = async ()=>{
+      if (!effectiveShopId) return;
+      try {
+        const data = await getClerks(effectiveShopId);
+        if (data && Array.isArray(data)) setClerks(data);
+      } catch (e) {}
+    };
+    load();
+  }, [effectiveShopId]);
+
+  const generatePassword = () => {
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789!@#$%';
+    let pwd = '';
+    for (let i = 0; i < 12; i++) pwd += chars[Math.floor(Math.random()*chars.length)];
+    setPassword(pwd);
+  };
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    setLoading(true);
-    setMessage('');
+    setSaving(true);
+    setBanner(null);
 
     // Basic validation
     if (!username || !password) {
-      setMessage('Username and password are required');
-      setLoading(false);
+      setBanner({ type: 'error', text: 'Username dan password wajib diisi' });
+      setSaving(false);
+      return;
+    }
+    if (username.length < 3) {
+      setBanner({ type: 'error', text: 'Username minimal 3 karakter' });
+      setSaving(false);
+      return;
+    }
+    if (password.length < 6) {
+      setBanner({ type: 'error', text: 'Password minimal 6 karakter' });
+      setSaving(false);
       return;
     }
 
     try {
-      const create = await createClerks(shopId || cafeIdParam, username, password);
-
-      if (create) setMessage('Clerk created successfully');
-      else setMessage('Failed to create clerk');
+      const create = await createClerks(effectiveShopId, username, password);
+      if (create) {
+        setBanner({ type: 'success', text: 'Kasir berhasil ditambahkan' });
+        // Refresh list
+        try {
+          const data = await getClerks(effectiveShopId);
+          if (data && Array.isArray(data)) setClerks(data);
+        } catch {}
+        // Clear form
+        setUsername('');
+        setPassword('');
+      } else {
+        setBanner({ type: 'error', text: 'Gagal menambahkan kasir' });
+      }
     } catch (error) {
-      setMessage('Error creating clerk');
+      setBanner({ type: 'error', text: 'Terjadi kesalahan saat menambahkan kasir' });
     } finally {
-      setLoading(false);
+      setSaving(false);
     }
   };
 
   return (
-    <div style={styles.container}>
-      <h2 style={styles.header}>Tambah Kasir</h2>
-      <form onSubmit={handleSubmit} style={styles.form}>
-        <input
-          type="text"
-          placeholder="Username"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-          style={styles.input}
-        />
-        <input
-          type="password"
-          placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          style={styles.input}
-        />
-        <button type="submit" style={styles.button} disabled={loading}>
-          {loading ? 'Creating...' : 'Create Clerk'}
-        </button>
-        {message && (
-          <p style={{ ...styles.message, color: message.includes('success') ? 'green' : 'red' }}>
-            {message}
-          </p>
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h2 className={styles.title}>Tambah Kasir</h2>
+        {banner && (
+          <div className={`${styles.banner} ${banner.type === 'success' ? styles.bannerSuccess : styles.bannerError}`}>
+            {banner.text}
+          </div>
         )}
-      </form>
+      </div>
+
+      <div className={styles.section}>
+        <div className={styles.sectionTitle}>Form kasir baru</div>
+        <form onSubmit={handleSubmit}>
+          <div className={styles.formRow}>
+            <div className={styles.field}>
+              <label className={styles.label}>Username</label>
+              <input
+                className={styles.input}
+                type="text"
+                placeholder="kasir_baru"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </div>
+            <div className={styles.field}>
+              <label className={styles.label}>Password</label>
+              <div className={styles.pwdRow}>
+                <input
+                  className={styles.input}
+                  type={showPassword ? 'text' : 'password'}
+                  placeholder="••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+                <button type="button" className={styles.button} onClick={()=>setShowPassword(!showPassword)}>
+                  {showPassword ? 'Sembunyikan' : 'Tampilkan'}
+                </button>
+                <button type="button" className={styles.button} onClick={generatePassword}>
+                  Generate
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className={styles.footer}>
+            <button className={`${styles.button} ${styles.primary}`} type="submit" disabled={saving}>
+              {saving ? 'Menambahkan…' : 'Tambah Kasir'}
+            </button>
+          </div>
+        </form>
+      </div>
+
+      <div className={styles.section}>
+        <div className={styles.sectionTitle}>Daftar kasir</div>
+        <div className={styles.list}>
+          {clerks && clerks.length > 0 ? (
+            clerks.map((c) => (
+              <div key={c.user_id || c.username} className={`${styles.listItem} ${styles.muted}`}>
+                <span>@{c.username}</span>
+                {/* Tempatkan tombol hapus jika API tersedia */}
+              </div>
+            ))
+          ) : (
+            <div className={styles.listItem}>Belum ada kasir</div>
+          )}
+        </div>
+      </div>
     </div>
   );
 };
 
-// Basic styling to make it mobile-friendly with a white background
-const styles = {
-  container: {
-    backgroundColor: '#fff',
-    width: '100%',
-    maxWidth: '350px',
-    margin: '0 auto',
-    padding: '20px',
-    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
-    borderRadius: '8px',
-    boxSizing: 'border-box',
-  },
-  header: {
-    textAlign: 'center',
-    marginBottom: '20px',
-    fontSize: '20px',
-    color: '#333',
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '15px',
-  },
-  input: {
-    padding: '12px',
-    fontSize: '16px',
-    borderRadius: '8px',
-    border: '1px solid #ccc',
-    width: '100%',
-    boxSizing: 'border-box',
-    backgroundColor: '#f9f9f9',
-  },
-  button: {
-    padding: '12px',
-    fontSize: '16px',
-    borderRadius: '8px',
-    border: 'none',
-    backgroundColor: '#28a745',
-    color: 'white',
-    cursor: 'pointer',
-    width: '100%',
-  },
-  message: {
-    textAlign: 'center',
-    marginTop: '10px',
-  },
-};
-
 export default CreateClerk;
diff --git a/src/pages/CreateClerk.module.css b/src/pages/CreateClerk.module.css
new file mode 100644
index 0000000..aeb52f1
--- /dev/null
+++ b/src/pages/CreateClerk.module.css
@@ -0,0 +1,137 @@
+/* CreateClerk.module.css */
+
+.container {
+  background: #fff;
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.section {
+  background: #fafafa;
+  border: 1px solid #e6e6e6;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 14px;
+}
+
+.sectionTitle {
+  margin: 0 0 10px 0;
+  font-weight: 700;
+  font-size: 15px;
+}
+
+.formRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.label {
+  font-size: 13px;
+  color: #555;
+}
+
+.input {
+  padding: 12px;
+  font-size: 14px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  background: #fff;
+}
+
+.pwdRow {
+  display: flex;
+  gap: 8px;
+}
+
+.button {
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  background: #fff;
+  cursor: pointer;
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.primary {
+  background: #28a745;
+  border: none;
+  color: #fff;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.banner {
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.bannerSuccess {
+  color: #155724;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+}
+
+.bannerError {
+  color: #721c24;
+  background: #f8d7da;
+  border: 1px solid #f5c6cb;
+}
+
+.list {
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-radius: 6px;
+}
+
+.muted {
+  background: #f0f0f0;
+}
+
+@media (max-width: 720px) {
+  .formRow { grid-template-columns: 1fr; }
+}
+
diff --git a/src/pages/StickyCartBar.module.css b/src/pages/StickyCartBar.module.css
new file mode 100644
index 0000000..3ae4d12
--- /dev/null
+++ b/src/pages/StickyCartBar.module.css
@@ -0,0 +1,76 @@
+/* StickyCartBar.module.css */
+
+.bar {
+  position: sticky;
+  bottom: 40px;
+  z-index: 120; /* above items, below modal */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  pointer-events: none; /* allow buttons to define interaction */
+}
+
+.row {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 980px;
+  padding: 0 12px;
+  pointer-events: auto;
+}
+
+.mainBtn {
+  flex: 1;
+  height: 44px;
+  border-radius: 999px;
+  background: var(--brand-primary, #73a585);
+  color: #fff;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(115,165,133,0.35);
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.value {
+  white-space: nowrap;
+  font-weight: 700;
+}
+
+.cartIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.historyBtn {
+  width: 48px;
+  height: 44px;
+  border-radius: 999px;
+  background: var(--brand-primary, #73a585);
+  color: #fff;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(115,165,133,0.35);
+}
+
+@media (max-width: 480px) {
+  .mainBtn { height: 42px; }
+  .historyBtn { height: 42px; width: 46px; }
+}
+
diff --git a/src/pages/WelcomePage.css b/src/pages/WelcomePage.css
index 4dc61a3..c0b851b 100644
--- a/src/pages/WelcomePage.css
+++ b/src/pages/WelcomePage.css
@@ -7,6 +7,8 @@
   width: 100%;
   height: 100%;
   text-align: center;
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 .image-container {
@@ -15,6 +17,11 @@
   overflow: hidden;
   border-radius: 50%;
   margin-bottom: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
 }
 
 .fileInput {
@@ -24,38 +31,134 @@
 .circular-image {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
+  border-radius: 50%;
 }
 
 .welcoming-text {
   font-size: 24px;
   margin-bottom: 20px;
   font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  max-width: 80%;
 }
 
 .get-started-button {
-  padding: 10px 20px;
+  padding: 12px 24px;
   border: none;
   border-radius: 25px;
-  background-color: #007bff; /* Bootstrap primary color */
+  background-color: #28a745; /* Bootstrap primary color */
   color: white;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s;
   font-family: "Plus Jakarta Sans", sans-serif;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
 }
 
 .get-started-button:hover {
-  background-color: #0056b3; /* Darker shade on hover */
+  background-color: #218838; /* Darker shade on hover */
+  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
+}
+
+.get-started-button:active {
+  transform: translateY(1px);
 }
 
 /* Fullscreen styles */
 .fullscreen {
   position: fixed;
-  top: 50%;
-  left: 50%;
+  top: 0;
+  left: 0;
   width: 100vw;
   height: 100vh;
-  transform: translate(-50%, -50%);
-  z-index: 300;
+  z-index: 1000;
+  background-color: inherit;
 }
+
+.fullscreen .image-container {
+  width: 200px;
+  height: 200px;
+}
+
+.fullscreen .welcoming-text {
+  font-size: 32px;
+  margin-bottom: 30px;
+}
+
+.fullscreen .get-started-button {
+  padding: 16px 32px;
+  font-size: 20px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .welcome-page {
+    padding: 15px;
+  }
+  
+  .image-container {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .welcoming-text {
+    font-size: 20px;
+    margin-bottom: 16px;
+  }
+  
+  .get-started-button {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+  
+  .fullscreen .image-container {
+    width: 150px;
+    height: 150px;
+  }
+  
+  .fullscreen .welcoming-text {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .fullscreen .get-started-button {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .image-container {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .welcoming-text {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+  
+  .get-started-button {
+    padding: 8px 16px;
+    font-size: 12px;
+  }
+  
+  .fullscreen .image-container {
+    width: 120px;
+    height: 120px;
+  }
+  
+  .fullscreen .welcoming-text {
+    font-size: 20px;
+    margin-bottom: 16px;
+  }
+  
+  .fullscreen .get-started-button {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/WelcomePage.js b/src/pages/WelcomePage.js
index db57f3a..dfa79ad 100644
--- a/src/pages/WelcomePage.js
+++ b/src/pages/WelcomePage.js
@@ -1,5 +1,5 @@
 // WelcomePage.js
-import React,{useRef} from "react";
+import React, { useRef } from "react";
 import "./WelcomePage.css";
 
 const WelcomePage = ({
@@ -15,6 +15,15 @@ const WelcomePage = ({
   const handleImageClick = () => {
     fileInputRef.current.click();
   };
+  
+  // SVG Icon for camera
+  const CameraIcon = () => (
+    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M21 19H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <circle cx="12" cy="13" r="4" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+  
   return (
     <div
       className={`welcome-page ${isFullscreen ? "fullscreen" : ""}`} // Corrected the className syntax
@@ -29,10 +38,13 @@ const WelcomePage = ({
         className="image-container"
       >
         {!isFullscreen &&
-        <div onClick={handleImageClick} style={{width: '100%', height: '100%', position:'absolute'}}>
-          <h1 style={{textAlign:'left'}}>
-            {image ? "Click To Change Image" : "Click To Add Image"}
-          </h1>
+        <div onClick={handleImageClick} style={{width: '100%', height: '100%', position:'absolute', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'}}>
+          <div style={{textAlign: 'center', color: 'white'}}>
+            <CameraIcon />
+            <h1 style={{textAlign:'center', fontSize: '16px', margin: '10px 0 0 0'}}>
+              {image ? "Klik untuk mengganti gambar" : "Klik untuk menambahkan gambar"}
+            </h1>
+          </div>
           <input 
             ref={fileInputRef} style={{display: 'none', width:'100%', height: '100%'}}type="file" accept="image/*" onChange={onImageChange} />
         </div>
@@ -43,10 +55,10 @@ const WelcomePage = ({
         {welcomingText}
       </h1>
       <button className="get-started-button" onClick={onGetStarted}>
-        Get Started
+        Mulai
       </button>
     </div>
   );
 };
 
-export default WelcomePage;
+export default WelcomePage;
\ No newline at end of file
diff --git a/src/pages/WelcomePageEditor.css b/src/pages/WelcomePageEditor.css
index bde0686..eb7fdea 100644
--- a/src/pages/WelcomePageEditor.css
+++ b/src/pages/WelcomePageEditor.css
@@ -1,56 +1,395 @@
 /* WelcomePageEditor.css */
+
 .welcome-page-editor {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background-color: rgb(207, 207, 207);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  background-color: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  overflow: hidden; /* contain scroll inside editor-content */
+  font-family: "Plus Jakarta Sans", sans-serif;
 }
 
-h2 {
-  margin-bottom: 20px;
+.editor-header {
+  padding: 24px;
+  border-bottom: 1px solid #e6e6e6;
+  background-color: #f8f9fa;
+}
+
+.editor-title {
+  margin: 0;
+  font-weight: 700;
   font-size: 24px;
   color: #333;
 }
 
-input[type="file"] {
-  margin-bottom: 20px;
-}
-
-textarea {
+.editor-content {
+  display: flex;
+  flex: 1; /* take remaining height */
   width: 100%;
-  height: 100px; /* Adjust as needed */
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  resize: none;
-  margin-bottom: 20px;
-  font-size: 16px;
+  overflow-y: auto; /* enable vertical scroll in editor-content */
+  overflow-x: hidden;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
-textarea:focus {
-  border-color: #007bff; /* Highlight border color on focus */
+.config-panel {
+  width: 100%;
+  max-width: 960px;
+  padding: 24px;
+  border-right: none;
+  background-color: #fafafa;
+  overflow-y: visible;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  box-sizing: border-box;
+}
+
+.config-section {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.section-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 18px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.config-group {
+  margin-bottom: 20px;
+}
+
+.config-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #555;
+}
+
+.config-input {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  font-size: 15px;
+  color: #333;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.config-input:focus {
   outline: none;
+  border-color: #28a745;
+  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
 }
 
-label {
-  margin-bottom: 20px;
+.color-input {
+  height: 45px;
+  padding: 8px;
+  cursor: pointer;
+}
+
+.textarea-input {
+  min-height: 80px;
+  resize: vertical;
+  font-family: "Plus Jakarta Sans", sans-serif;
+}
+
+.switch-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.switch-label {
+  font-weight: 500;
+  font-size: 15px;
+  color: #333;
+}
+
+.save-button {
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: none;
+  background-color: #28a745;
+  color: white;
+  font-weight: 600;
   font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.save-button:hover {
+  background-color: #218838;
+  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
+}
+
+.save-button:disabled {
+  background-color: #a1a1a1;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.preview-button {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  background-color: #ffffff;
+  color: #333;
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.preview-button:hover {
+  background-color: #f2f2f2;
+}
+
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.preview-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.preview-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid #e6e6e6;
+  background-color: #f8f9fa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 18px;
+  color: #333;
+}
+
+.preview-container {
+  flex: 1;
+  padding: 24px;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .welcome-preview {
   width: 100%;
-  height: 100%;
-  border: 1px dashed #ccc; /* Preview border style */
-  border-radius: 8px;
-  padding: 20px;
+  max-width: 400px;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.fullscreen-toggle {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+
+.fullscreen-toggle:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transform: scale(1.05);
+}
+
+.toggle-icon {
+  font-size: 24px;
+  transform: rotate(45deg);
+}
+
+/* Top actions row */
+.top-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.top-actions .preview-button {
+  width: auto;
+  padding: 10px 14px;
+}
+
+/* Theme & color redesign */
+.hex-input {
+  max-width: 140px;
+}
+
+.theme-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.color-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.contrast-card {
+  margin-top: 16px;
+  border-radius: 12px;
+  border: 1px solid #e6e6e6;
+}
+
+.contrast-inner {
+  padding: 16px;
+}
+
+.contrast-title {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.contrast-preview {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+@media (max-width: 992px) {
+  .theme-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.inline-preview {
+  margin-top: 12px;
+  background: #fff;
+  border: 1px solid #e6e6e6;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.inline-preview-content {
+  padding: 16px;
+  min-height: 320px;
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #ffffff; /* Background for preview area */
+  box-sizing: border-box;
+}
+
+/* Responsive design */
+@media (max-width: 992px) {
+  .editor-content {
+    flex-direction: column;
+    padding: 12px;
+  }
+  
+  .config-panel {
+    width: 100%;
+    border-right: none;
+    border-bottom: none;
+    max-height: none;
+  }
+  
+  .preview-panel {
+    height: 50vh;
+  }
+}
+
+@media (max-width: 768px) {
+  .editor-header {
+    padding: 16px;
+  }
+  
+  .editor-title {
+    font-size: 20px;
+  }
+  
+  .config-panel {
+    padding: 16px;
+  }
+  
+  .config-section {
+    padding: 16px;
+  }
+  
+  .section-title {
+    font-size: 16px;
+  }
+  
+  .preview-container {
+    padding: 16px;
+  }
+
+  .inline-preview-content {
+    min-height: 260px;
+    padding: 12px;
+  }
 }
diff --git a/src/pages/WelcomePageEditor.js b/src/pages/WelcomePageEditor.js
index 7af1b95..4097f3d 100644
--- a/src/pages/WelcomePageEditor.js
+++ b/src/pages/WelcomePageEditor.js
@@ -14,6 +14,7 @@ const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
   const [isWelcomePageActive, setIsWelcomePageActive] = useState(false); // State for the switch
   const [loading, setLoading] = useState(false); // Loading state
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
 
   // Load existing welcome page configuration when component mounts
   useEffect(() => {
@@ -51,6 +52,21 @@ const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
     setTextColor(e.target.value);
   };
 
+  // Extra handlers for HEX input fields
+  const handleBackgroundHexInput = (e) => {
+    let v = e.target.value;
+    if (!v.startsWith('#')) v = '#' + v.replace(/#/g, '');
+    if (v.length > 7) v = v.slice(0, 7);
+    setBackgroundColor(v);
+  };
+
+  const handleTextHexInput = (e) => {
+    let v = e.target.value;
+    if (!v.startsWith('#')) v = '#' + v.replace(/#/g, '');
+    if (v.length > 7) v = v.slice(0, 7);
+    setTextColor(v);
+  };
+
   const handleSave = async () => {
     setLoading(true);
 
@@ -72,85 +88,236 @@ const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
     }
   };
 
+  // SVG Icons
+  const CoffeeIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17 8h1.5a2.5 2.5 0 0 1 0 5H15m0-5H13m-1 0H6a3 3 0 0 0-3 3v1.5a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3h-5.5m-1 0V5a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1V2m-5 0v1a1 1 0 0 0-1 1v1m0 0v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  const PaletteIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14 3v4a1 1 0 0 0 1 1h4m-9 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6 10v-2a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3v2h10ZM16 21v-2a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v2h8Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  const TypeIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 7V4h16v3M9 20h6M12 4v16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  const SaveIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <path d="M17 21v-8H7v8M7 3v5h8M12 11h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+
+  const EyeIcon = () => (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" stroke="currentColor" strokeWidth="2"/>
+      <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" strokeWidth="2"/>
+      <path d="M22 12c-1.5-4-5-6-10-6S4 8 2 12" stroke="currentColor" strokeWidth="2"/>
+    </svg>
+  );
+
   return (
-    <div
-      className="welcome-page-editor"
-      style={{ width: "80vw", height: "80vh" }}
-    >
-      <h2>Edit Welcome Page</h2>
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        <textarea
-          value={welcomingText}
-          onChange={handleTextChange}
-          placeholder="Enter welcoming text..."
-          style={{ height: "20px", resize: "none" }} // Reduced height
-        />
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <label>
-            Background Color:
-            <input
-              type="color"
-              value={backgroundColor}
-              onChange={handleColorChange}
-            />
-          </label>
-          <label>
-            Text Color:
-            <input
-              type="color"
-              value={textColor}
-              onChange={handleTextColorChange}
-            />
-          </label>
-        </div>
-        <div style={{ display: "flex", alignItems: "center" }}>
-          <label style={{ marginRight: "10px" }}>Is Welcome Page Active:</label>
-          <Switch
-            onChange={() => setIsWelcomePageActive(!isWelcomePageActive)}
-            checked={isWelcomePageActive}
-            offColor="#888"
-            onColor="#0a0"
-            uncheckedIcon={false}
-            checkedIcon={false}
-          />
-        </div>
-        <button onClick={handleSave} disabled={loading}>
-          {loading ? "Saving..." : "Save Configuration"}
-        </button>
+    <div className="welcome-page-editor">
+      <div className="editor-header">
+        <h2 className="editor-title">Konfigurasi Halaman Selamat Datang</h2>
       </div>
-      <div
-        style={{ width: "100%", height: "100%", position: "relative", flex: 1, borderRadius: '15px' }}
-      >
-        <WelcomePage
-          image={image}
-          welcomingText={welcomingText}
-          backgroundColor={backgroundColor}
-          textColor={textColor}
-          onGetStarted={() => setIsFullscreen(false)}
-          isFullscreen={isFullscreen}
-          onImageChange={handleImageChange}
-        />
-        <div style={{ position: "absolute", bottom: 0, right: 0 }}>
-          <svg
-            width="100" // Adjust size as needed
-            height="100" // Adjust size as needed
-            style={{ position: "absolute", bottom: 0, right: 0 }}
-            onClick={() => setIsFullscreen(true)}
+      
+      <div className="editor-content">
+        {/* Configuration Panel */}
+        <div className="config-panel">
+          {/* Top Preview Toggle */}
+          <div className="top-actions">
+            <button
+              type="button"
+              className="preview-button"
+              onClick={() => setShowPreview(!showPreview)}
+            >
+              <EyeIcon /> {showPreview ? 'Tutup Pratinjau' : 'Preview'}
+            </button>
+          </div>
+
+          {showPreview && (
+            <div className="inline-preview">
+              <div className="inline-preview-content">
+                <WelcomePage
+                  image={image}
+                  welcomingText={welcomingText}
+                  backgroundColor={backgroundColor}
+                  textColor={textColor}
+                  onGetStarted={() => setShowPreview(false)}
+                  isFullscreen={false}
+                  onImageChange={handleImageChange}
+                />
+              </div>
+            </div>
+          )}
+          <div className="config-section">
+            <h3 className="section-title">
+              <CoffeeIcon />
+              Konten Utama
+            </h3>
+            
+            <div className="config-group">
+              <label className="config-label">Teks Selamat Datang</label>
+              <textarea
+                className="config-input textarea-input"
+                value={welcomingText}
+                onChange={handleTextChange}
+                placeholder="Masukkan teks selamat datang..."
+              />
+            </div>
+            
+            <div className="config-group">
+              <label className="config-label">Gambar Latar Belakang</label>
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleImageChange}
+                className="config-input"
+              />
+              {image && (
+                <div style={{ marginTop: '12px', textAlign: 'center' }}>
+                  <img 
+                    src={image} 
+                    alt="Preview" 
+                    style={{ 
+                      maxWidth: '100%', 
+                      maxHeight: '150px', 
+                      borderRadius: '8px',
+                      border: '1px solid #ddd'
+                    }} 
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          
+          <div className="config-section">
+            <h3 className="section-title">
+              <PaletteIcon />
+              Tema & Warna
+            </h3>
+
+            <div className="theme-grid">
+              <div className="color-field">
+                <label className="config-label">Warna Latar Belakang</label>
+                <div className="color-row">
+                  <input
+                    type="color"
+                    className="config-input color-input"
+                    value={backgroundColor}
+                    onChange={handleColorChange}
+                  />
+                  <input
+                    type="text"
+                    className="config-input hex-input"
+                    value={backgroundColor}
+                    onChange={handleBackgroundHexInput}
+                    maxLength={7}
+                    placeholder="#FFFFFF"
+                  />
+                </div>
+                <div className="swatches" aria-label="Background presets">
+                  {['#ffffff','#f8f9fa','#fff3cd','#e8f5e9','#e3f2fd','#212529'].map((c) => (
+                    <button
+                      key={c}
+                      className="swatch"
+                      style={{ backgroundColor: c, borderColor: c.toLowerCase()==='#ffffff'?'#ddd':'transparent' }}
+                      onClick={() => setBackgroundColor(c)}
+                      title={c}
+                      type="button"
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div className="color-field">
+                <label className="config-label">Warna Teks</label>
+                <div className="color-row">
+                  <input
+                    type="color"
+                    className="config-input color-input"
+                    value={textColor}
+                    onChange={handleTextColorChange}
+                  />
+                  <input
+                    type="text"
+                    className="config-input hex-input"
+                    value={textColor}
+                    onChange={handleTextHexInput}
+                    maxLength={7}
+                    placeholder="#000000"
+                  />
+                </div>
+                <div className="swatches" aria-label="Text presets">
+                  {['#000000','#212529','#343a40','#6c757d','#ffffff','#28a745'].map((c) => (
+                    <button
+                      key={c}
+                      className="swatch"
+                      style={{ backgroundColor: c, borderColor: c.toLowerCase()==='#ffffff'?'#ddd':'transparent' }}
+                      onClick={() => setTextColor(c)}
+                      title={c}
+                      type="button"
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="contrast-card" style={{ backgroundColor }}>
+              <div className="contrast-inner">
+                <div className="contrast-title">Pratinjau Kontrast</div>
+                <div className="contrast-preview" style={{ color: textColor }}>{welcomingText || 'Contoh Teks'}</div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="config-section">
+            <h3 className="section-title">
+              <TypeIcon />
+              Pengaturan
+            </h3>
+            
+            <div className="switch-container">
+              <span className="switch-label">Aktifkan Halaman Selamat Datang</span>
+              <Switch
+                onChange={() => setIsWelcomePageActive(!isWelcomePageActive)}
+                checked={isWelcomePageActive}
+                offColor="#cccccc"
+                onColor="#28a745"
+                uncheckedIcon={false}
+                checkedIcon={false}
+                height={24}
+                width={48}
+                handleDiameter={20}
+              />
+            </div>
+          </div>
+          
+          <button 
+            className="save-button" 
+            onClick={handleSave} 
+            disabled={loading}
           >
-            <g transform="rotate(45 50 50)">
-              <circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
-              <text
-                x="50"
-                y="50"
-                textAnchor="middle"
-                dominantBaseline="middle"
-                fontSize="24"
-                fill="white" // Adjust text color as needed
-              >
-                &lt;&gt;
-              </text>
-            </g>
-          </svg>
+            {loading ? (
+              <>
+                <div className="loading-spinner"></div>
+                Menyimpan...
+              </>
+            ) : (
+              <>
+                <SaveIcon />
+                Simpan Konfigurasi
+              </>
+            )}
+          </button>
+          {/* Pratinjau dipicu oleh tombol atas; section khusus dihapus */}
         </div>
       </div>
     </div>