diff --git a/package-lock.json b/package-lock.json
index be736fc..8b4e91c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "caniuse-lite": "^1.0.30001690",
+        "html-to-image": "^1.11.11",
         "html2canvas": "^1.4.1",
         "jsqr": "^1.4.0",
         "qrcode.react": "^3.1.0",
@@ -10264,6 +10265,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.11",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==",
+      "license": "MIT"
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
diff --git a/package.json b/package.json
index 325f78f..833756d 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "groovebrew-mockup",
   "version": "0.1.0",
   "private": true,
-  "homepage": ".",
+  "homepage": "https://dev.kedaimaster.com",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -11,6 +11,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "caniuse-lite": "^1.0.30001690",
+    "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
     "jsqr": "^1.4.0",
     "qrcode.react": "^3.1.0",
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
index 3c7c4b8..8fff705 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -13,6 +13,7 @@
 
 .modalContent {
   width: 80vw;
+  max-height: 80vh;
   position: relative;
   overflow: visible; /* Add this line to enable scrolling */
   display: flex;
diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js
index e646346..8dc227f 100644
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -7,7 +7,8 @@ import {
   saveCafeDetails,
   setConfirmationStatus,
 } from "../helpers/cafeHelpers";
-import Switch from "react-switch"; // Import the Switch component
+
+import { toPng } from 'html-to-image';
 
 const SetPaymentQr = ({ shop }) => {
   const [initialPos, setInitialPos] = useState({
@@ -15,6 +16,7 @@ const SetPaymentQr = ({ shop }) => {
     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);
@@ -48,6 +50,8 @@ const SetPaymentQr = ({ shop }) => {
 
   const [selectedTable, setSelectedTable] = useState(null);
 
+  const [tableNo, setTableNo] = useState(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -118,6 +122,45 @@ const SetPaymentQr = ({ shop }) => {
     }
   };
 
+  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;
+  
+    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);
+      })
+  }
+  
+  
   return (
     <div style={styles.container}>
       <h3 style={styles.title}>QR kedai dan meja</h3>
@@ -156,6 +199,7 @@ const SetPaymentQr = ({ shop }) => {
           textAlign: initialFontPos.left > 50 ? 'right' : 'left'
         }}>
           <h1 style={{
+            visibility: !selectedTable && isViewingQR ? 'hidden' : 'visible',
             transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
             width: '200%',
             lineHeight: 0,
@@ -171,11 +215,13 @@ const SetPaymentQr = ({ shop }) => {
           onChange={handleFileChange}
         />
       </div>
+      {!isViewingQR ?
+      <>
       <div style={styles.uploadMessage}>
         <p>Klik untuk ganti background</p>
       </div>
       <div style={styles.resultMessage}>
-        <p onClick={() => setIsConfig(!isConfig)}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
+        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
         <div
           onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</div>
       </div>
@@ -332,9 +378,9 @@ const SetPaymentQr = ({ shop }) => {
         {isViewTables &&
           <div style={{marginTop: '34px', marginLeft: '15px'}}>
             <div style={styles.resultMessage}>
-              <input style={{borderRadius: '12px', paddingLeft: '13px'}} placeholder="Meja A1"/>
+              <input style={{borderRadius: '12px', paddingLeft: '13px', marginRight: '10px'}} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo}/>
               <div
-                onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Buat meja</div>
+                onClick={handleCreate} style={styles.uploadButton}>Buat meja</div>
             </div>
             {tables && tables
               .filter((table) => table.tableNo !== 0)
@@ -364,12 +410,31 @@ const SetPaymentQr = ({ shop }) => {
           </div>
         }
       </div>
-
       <div style={styles.buttonContainer}>
         <button onClick={handleSave} style={styles.saveButton}>
           Simpan
         </button>
+        <button onClick={()=>setIsViewingQR(true)} style={styles.saveButton}>
+          Download QR {selectedTable? 'meja' : 'kedai'}
+        </button>
       </div>
+      </> :
+      <>
+      <div style={styles.uploadMessage}>
+        <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>
   );
 };
@@ -377,6 +442,9 @@ const SetPaymentQr = ({ shop }) => {
 // Styles
 const styles = {
   container: {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    maxHeight: '100%',
     width: '100%',
     backgroundColor: "white",
     padding: "20px",
@@ -401,6 +469,7 @@ const styles = {
   uploadMessage: {
     fontWeight: 600,
     textAlign: "left",
+    fontSize: "15px"
   },
   uploadButton: {
     paddingRight: '10px',
@@ -415,6 +484,7 @@ const styles = {
   },
   resultMessage: {
     marginTop: "-24px",
+    marginBottom: "10px",
     textAlign: "left",
     display: 'flex',
     justifyContent: 'space-between'
@@ -422,9 +492,18 @@ const styles = {
   buttonContainer: {
     marginTop: "20px",
     textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
+  backButtonContainer: {
+    marginTop: "2px",
+    marginBottom: "-10px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
   },
   saveButton: {
-    padding: "10px 20px",
+    padding: "10px 15px",
     fontSize: "16px",
     backgroundColor: "#28a745",
     color: "#fff",
diff --git a/src/pages/Cart.js b/src/pages/Cart.js
index 4a00ef3..289a95e 100644
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -220,7 +220,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
 
 {table.tableNo != null && (
         <div className={styles.OrderTypeContainer}>
-            <span htmlFor="orderType">Diantar ke meja {table.tableNo}</span>
+            <span htmlFor="orderType">Diantar ke {table.tableNo}</span>
           {/* <select
             id="orderType"
             value={orderType}
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index e919e69..09fd846 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -183,7 +183,7 @@ const LinktreePage = ({ user, setModal }) => {
   ];
   console.log(items)
 
-  const selectedItems = items.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
+  const selectedItems = items?.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
 
   // If the selected tenant is found, extract the cafes
   const selectedSubItems = selectedItems?.subItems || [];
diff --git a/src/pages/Invoice.js b/src/pages/Invoice.js
index db077c9..8c29fa8 100644
--- a/src/pages/Invoice.js
+++ b/src/pages/Invoice.js
@@ -103,7 +103,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
         <h2 className={styles["Invoice-detail"]}>
           {orderType === "pickup"
             ? "Diambil di kasir"
-            : `Diantar ke meja nomor ${table.tableNo || tableNumber || "-"}`}
+            : `Diantar ke ${table.tableNo || tableNumber || "-"}`}
         </h2>
         <div className={styles.TotalContainer}>
           <span>Total:</span>
diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js
index 661f43a..a79ac07 100644
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -182,7 +182,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
             <h2 className={styles["Transactions-detail"]}>
               {transaction.serving_type === "pickup"
                 ? "Ambil sendiri"
-                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                 }`}
             </h2>
             {transaction.notes != "" && (
diff --git a/src/pages/Transaction_pending.js b/src/pages/Transaction_pending.js
index f677428..7c6b746 100644
--- a/src/pages/Transaction_pending.js
+++ b/src/pages/Transaction_pending.js
@@ -139,7 +139,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                 <p>Pembayaran: {transaction.payment_type}</p>
                 <p>{transaction.serving_type === "pickup"
                 ? "Ambil sendiri"
-                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                 }`}</p>
               </div>
             </div>
@@ -163,7 +163,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
             <h2 className={styles["Transactions-detail"]}>
               {transaction.serving_type === "pickup"
                 ? "Ambil sendiri"
-                : `Diantar ke meja ${transaction.Table ? transaction.Table.tableNo : "N/A"
+                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                 }`}
             </h2>
             {transaction.notes != "" && (