diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js
index 0c7c21c..e646346 100644
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -14,6 +14,15 @@ const SetPaymentQr = ({ shop }) => {
     left: shop.xposition,
     top: shop.yposition,
   });
+
+  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);
@@ -30,12 +39,15 @@ const SetPaymentQr = ({ shop }) => {
       )}`;
     }
   };
-  
+
   const [isConfig, setIsConfig] = useState(false);
+  const [isConfigQR, setIsConfigQR] = useState(false);
   const [isViewTables, setIsViewTables] = useState(false);
 
   const [tables, setTables] = useState([]);
 
+  const [selectedTable, setSelectedTable] = useState(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -57,7 +69,10 @@ const SetPaymentQr = ({ shop }) => {
     const details = {
       qrSize: initialSize,
       qrPosition: initialPos,
-      qrBackgroundFile, // Include qrBackground file
+      qrBackgroundFile,
+      fontsize,
+      fontcolor,
+      fontPosition: initialFontPos,
     };
 
     // Call saveCafeDetails function with the updated details object
@@ -79,10 +94,21 @@ const SetPaymentQr = ({ shop }) => {
     }));
   };
 
+  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];
@@ -94,7 +120,7 @@ const SetPaymentQr = ({ shop }) => {
 
   return (
     <div style={styles.container}>
-      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
+      <h3 style={styles.title}>QR kedai dan meja</h3>
 
       <div
         id="qr-code-container"
@@ -111,7 +137,7 @@ const SetPaymentQr = ({ shop }) => {
         }}
       >
         <img
-          src={generateQRCodeUrl(shopUrl)}
+          src={generateQRCodeUrl(selectedTable?.tableCode || null)}
           alt="QR Code"
           style={{
             position: "absolute",
@@ -120,6 +146,23 @@ const SetPaymentQr = ({ shop }) => {
             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={{
+            transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
+            width: '200%',
+            lineHeight: 0,
+            fontFamily: 'Plus Jakarta Sans',
+            color: fontcolor
+          }} >{selectedTable == null ? 'Nomor meja' : selectedTable.tableNo}</h1>
+        </div>
         <input
           type="file"
           accept="image/*"
@@ -132,72 +175,194 @@ const SetPaymentQr = ({ shop }) => {
         <p>Klik untuk ganti background</p>
       </div>
       <div style={styles.resultMessage}>
-        <p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi QR</p>
+        <p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
         <div
           onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div>
       </div>
       <div style={styles.switchContainer}>
-        {isConfig && <>
-          <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>
+        {isConfig &&
+          <div style={{ marginLeft: '15px' }}>
+            <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
+              {isConfigQR ? '˅' : '˃'} Konfigurasi 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>
-            </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 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>
-            </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 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>
-            </label>
+            </>}
+
+            <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
+              {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
+            </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'}} placeholder="Meja A1"/>
+              <div
+                onClick={() => qrBackgroundInputRef.current.click()} 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}>
@@ -270,6 +435,7 @@ const styles = {
   },
   switchContainer: {
     textAlign: "left",
+    marginTop: '-15px'
   },
   description: {
     margin: "10px 0",
diff --git a/src/helpers/cafeHelpers.js b/src/helpers/cafeHelpers.js
index 7d006c5..6296f51 100644
--- a/src/helpers/cafeHelpers.js
+++ b/src/helpers/cafeHelpers.js
@@ -164,6 +164,22 @@ export async function saveCafeDetails(cafeId, details) {
   try {
     const formData = new FormData();
 
+    // Append qrBackground file if it exists
+    if (details.fontsize) {
+      formData.append("fontsize", details.fontsize);
+    }
+
+    // Append qrBackground file if it exists
+    if (details.fontfamily) {
+      formData.append("fontfamily", details.fontfamily);
+    }
+
+    // Append qrBackground file if it exists
+    if (details.fontPosition) {
+      formData.append("fontxposition", details.fontPosition.left);
+      formData.append("fontyposition", details.fontPosition.top);
+    }
+
     // Append qrBackground file if it exists
     if (details.qrBackgroundFile) {
       formData.append("qrBackground", details.qrBackgroundFile);