diff --git a/src/App.js b/src/App.js
index 401664d..5da5f07 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ import CafePage from "./pages/CafePage";
 import SearchResult from "./pages/SearchResult";
 import Cart from "./pages/Cart";
 import Invoice from "./pages/Invoice";
+import Transactions from "./pages/Transactions";
 import Footer from "./components/Footer";
 
 import GuestSideLogin from "./pages/GuestSideLogin";
@@ -290,6 +291,23 @@ function App() {
               </>
             }
           />
+          <Route
+            path="/:shopId/:tableId?/transactions"
+            element={
+              <>
+                <Transactions
+                  sendParam={handleSetParam}
+                  deviceType={deviceType}
+                />
+                <Footer
+                  shopId={shopId}
+                  tableId={tableId}
+                  cartItemsLength={totalItemsCount}
+                  selectedPage={3}
+                />
+              </>
+            }
+          />
           <Route
             path="/:shopId/guest-side-login"
             element={<GuestSideLogin shopId={shopId} socket={socket} />}
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 5bd628a..090e394 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -8,10 +8,8 @@ export default function Footer({
   cartItemsLength,
   selectedPage,
 }) {
-  const { goToShop, goToSearch, goToCart } = useNavigationHelpers(
-    shopId,
-    tableId,
-  );
+  const { goToShop, goToSearch, goToCart, goToTransactions } =
+    useNavigationHelpers(shopId, tableId);
 
   return (
     <div className={styles.item}>
@@ -50,7 +48,7 @@ export default function Footer({
         </div>
 
         {/* Profile Icon */}
-        <div className={styles["footer-icon"]}>
+        <div onClick={goToTransactions} className={styles["footer-icon"]}>
           <svg
             viewBox="0 0 34 34"
             style={{ fill: selectedPage === 3 ? "black" : "#8F8787" }}
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 2924533..58bf3f8 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -1,6 +1,8 @@
 import React from "react";
 import styles from "./Modal.module.css";
+import TablesPage from "./TablesPage.js";
 import TableMaps from "../components/TableMaps";
+import Transactions from "../pages/Transactions";
 
 const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
   if (!isOpen) return null;
@@ -23,8 +25,10 @@ const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
         <button onClick={onClose} className={styles.closeButton}>
           &times;
         </button>
-        {modalContent === "edit_tables" && <TableMaps shopId={shopId} />}
-        {modalContent === "new_transaction" && <TableMaps shopId={shopId} />}
+        {modalContent === "edit_tables" && <TablesPage shopId={shopId} />}
+        {modalContent === "new_transaction" && (
+          <Transactions propsShopId={shopId} />
+        )}
       </div>
     </div>
   );
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
index 99c0b95..0c89ef5 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -1,5 +1,3 @@
-/* src/components/Modal.module.css */
-
 .modalOverlay {
   position: fixed;
   top: 0;
@@ -21,9 +19,9 @@
   height: 80%;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   position: relative;
+  overflow: auto; /* Add this line to enable scrolling */
 }
 
-/* Style the close button as an "X" */
 .closeButton {
   position: absolute;
   top: 10px;
@@ -36,7 +34,6 @@
   padding: 0;
 }
 
-/* Optional: Add a hover effect */
 .closeButton:hover {
   color: #f44336; /* Change color on hover for better UX */
 }
diff --git a/src/components/NewTransactionMessage.js b/src/components/NewTransactionMessage.js
new file mode 100644
index 0000000..1ec0f15
--- /dev/null
+++ b/src/components/NewTransactionMessage.js
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from "react";
+import { getTables, updateTable, createTable } from "../helpers/tableHelper";
+import { getTransactions } from "../helpers/transactionHelpers";
+import TableCanvas from "./TableCanvas";
+import TableList from "./TableList";
+
+const TablesPage = ({ shopId }) => {
+  const [transactions, setTransactions] = useState([]);
+  const [tables, setTables] = useState([]);
+  const [selectedTable, setSelectedTable] = useState(null);
+  const [newTable, setNewTable] = useState(null);
+  const [originalTables, setOriginalTables] = useState([]);
+  const [tableNo, setTableNo] = useState(""); // State for table name
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedTables = await getTables(shopId);
+        setTables(fetchedTables);
+        setOriginalTables(fetchedTables);
+      } catch (error) {
+        console.error("Error fetching tables:", error);
+      }
+    };
+
+    fetchData();
+  }, [shopId]);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedTransactions = await getTransactions(shopId);
+        // setTransactions(fetchedTransactions);
+        console.log(fetchedTransactions);
+      } catch (error) {
+        console.error("Error fetching transactions:", error);
+      }
+    };
+
+    fetchData();
+  }, [shopId]);
+
+  const handleAddTable = () => {
+    const nextId = Math.random().toString(36).substr(2, 11);
+
+    setTables(originalTables);
+    setNewTable({
+      tableId: nextId,
+      xposition: 100,
+      yposition: 100,
+      tableNo: nextId,
+    });
+    setSelectedTable(null);
+    setTableNo(""); // Reset table name
+  };
+
+  const moveTable = (direction) => {
+    if (!selectedTable && !newTable) return;
+
+    const moveAmount = 10;
+    const { xposition, yposition } = selectedTable || newTable;
+    let newX = xposition;
+    let newY = yposition;
+
+    switch (direction) {
+      case "left":
+        newX = xposition - moveAmount;
+        break;
+      case "right":
+        newX = xposition + moveAmount;
+        break;
+      case "up":
+        newY = yposition - moveAmount;
+        break;
+      case "down":
+        newY = yposition + moveAmount;
+        break;
+      default:
+        break;
+    }
+
+    if (newTable) {
+      setNewTable({
+        ...newTable,
+        xposition: newX,
+        yposition: newY,
+      });
+    } else if (selectedTable) {
+      setTables(
+        tables.map((table) =>
+          table.tableId === selectedTable.tableId
+            ? { ...table, xposition: newX, yposition: newY }
+            : table
+        )
+      );
+      setSelectedTable({
+        ...selectedTable,
+        xposition: newX,
+        yposition: newY,
+      });
+    }
+  };
+
+  const handleSelectTable = (event) => {
+    const canvas = event.target;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const clickedTable = tables.find(
+      (table) =>
+        x >= table.xposition &&
+        x <= table.xposition + 40 &&
+        y >= table.yposition &&
+        y <= table.yposition + 30
+    );
+
+    if (clickedTable) {
+      setSelectedTable(clickedTable);
+      setNewTable(null);
+      setTableNo(clickedTable.tableNo || ""); // Set table name if exists
+    } else if (newTable) {
+      setSelectedTable(newTable);
+      setTableNo(newTable.tableNo || ""); // Set table name if exists
+    }
+  };
+
+  const handleSelect = (table) => {
+    setSelectedTable(null);
+    setSelectedTable(table);
+    setNewTable(null);
+    setTables(originalTables);
+    if (table.tableNo != 0)
+      setTableNo(table.tableNo || ""); // Set table name if exists
+    else setTableNo(0);
+    console.log(table.tableNo);
+  };
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+    >
+      <TableCanvas
+        tables={tables}
+        selectedTable={selectedTable}
+        setTableNo={setTableNo}
+        handleSelectTable={handleSelectTable}
+        handleAddTable={handleAddTable}
+        moveTable={moveTable}
+      />
+      {/* <TableList
+        tables={tables}
+        onSelectTable={handleSelect}
+        selectedTable={selectedTable}
+      /> */}
+    </div>
+  );
+};
+
+export default TablesPage;
diff --git a/src/components/TableCanvas.js b/src/components/TableCanvas.js
new file mode 100644
index 0000000..bb72db1
--- /dev/null
+++ b/src/components/TableCanvas.js
@@ -0,0 +1,226 @@
+import React, { useRef, useState, useEffect } from "react";
+
+const TableCanvas = ({
+  tables,
+  selectedTable,
+  newTable,
+  setTableNo,
+  handleSelectTable,
+  handleAddTable,
+  moveTable,
+  handleSave,
+  handleCancel,
+  handleSetTableNo,
+  tableNo,
+}) => {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const padding = 50;
+  const rectWidth = 40;
+  const rectHeight = 30;
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current) {
+        const { clientWidth, clientHeight } = containerRef.current;
+        setCanvasSize({ width: clientWidth, height: clientHeight });
+      }
+    };
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (
+      tables.length === 0 ||
+      canvasSize.width === 0 ||
+      canvasSize.height === 0
+    )
+      return;
+
+    const canvas = canvasRef.current;
+    const context = canvas.getContext("2d");
+
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+
+    context.clearRect(0, 0, canvas.width, canvas.height);
+
+    const allTables = newTable ? [...tables, newTable] : tables;
+    const hasMultipleTables = allTables.length > 1;
+    const minX = hasMultipleTables
+      ? Math.min(...allTables.map((table) => table.xposition))
+      : 0;
+    const minY = hasMultipleTables
+      ? Math.min(...allTables.map((table) => table.yposition))
+      : 0;
+    const maxX = hasMultipleTables
+      ? Math.max(...allTables.map((table) => table.xposition))
+      : 1;
+    const maxY = hasMultipleTables
+      ? Math.max(...allTables.map((table) => table.yposition))
+      : 1;
+
+    const patternWidth = maxX - minX;
+    const patternHeight = maxY - minY;
+    const scaleX =
+      patternWidth > 0 ? (canvas.width - 2 * padding) / patternWidth : 1;
+    const scaleY =
+      patternHeight > 0 ? (canvas.height - 2 * padding) / patternHeight : 1;
+    const scale = Math.min(scaleX, scaleY);
+
+    const scaledTables = allTables.map((table) => ({
+      ...table,
+      xposition: (table.xposition - minX) * scale + padding,
+      yposition: (table.yposition - minY) * scale + padding,
+    }));
+
+    scaledTables.forEach((table) => {
+      context.beginPath();
+      context.rect(table.xposition, table.yposition, rectWidth, rectHeight);
+      context.fillStyle =
+        table.tableId === (selectedTable?.tableId || newTable?.tableId)
+          ? "red"
+          : "blue";
+      context.fill();
+      context.stroke();
+      context.font = "12px Arial";
+      context.fillStyle = "white";
+      context.textAlign = "center";
+      context.textBaseline = "middle";
+      context.fillText(
+        table.tableId === (selectedTable?.tableId || newTable?.tableId)
+          ? tableNo === 0
+            ? "clerk"
+            : tableNo
+          : table.tableNo === 0
+          ? "clerk"
+          : table.tableNo,
+        table.xposition + rectWidth / 2,
+        table.yposition + rectHeight / 2
+      );
+    });
+  }, [tables, canvasSize, newTable, selectedTable, tableNo]);
+
+  return (
+    <div ref={containerRef} style={{ width: "100%", height: "100%" }}>
+      <canvas
+        ref={canvasRef}
+        style={{
+          display: "block",
+          borderRadius: "5px",
+          backgroundColor: "#e9e9e9",
+        }}
+        onClick={handleSelectTable}
+      />
+      <div>
+        {!selectedTable && !newTable && (
+          <button
+            onClick={handleAddTable}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "10px",
+              backgroundColor: "#007bff",
+              color: "#fff",
+              border: "none",
+              borderRadius: "4px",
+              fontSize: "16px",
+              cursor: "pointer",
+              marginBottom: "10px",
+              transition: "background-color 0.3s ease",
+            }}
+          >
+            Add Table
+          </button>
+        )}
+        {(selectedTable || newTable) && (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                marginBottom: "10px",
+              }}
+            >
+              <button onClick={() => moveTable("left")} style={buttonStyle}>
+                {"◄"}
+              </button>
+              <button onClick={() => moveTable("up")} style={buttonStyle}>
+                {"▲"}
+              </button>
+              <button onClick={() => moveTable("down")} style={buttonStyle}>
+                {"▼"}
+              </button>
+              <button onClick={() => moveTable("right")} style={buttonStyle}>
+                {"►"}
+              </button>
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                marginBottom: "10px",
+              }}
+            >
+              <input
+                type="text"
+                placeholder="Table No"
+                value={tableNo}
+                disabled={tableNo === 0 ? "disabled" : ""}
+                onChange={handleSetTableNo}
+                style={{
+                  marginRight: "10px",
+                  padding: "10px",
+                  fontSize: "16px",
+                  borderRadius: "4px",
+                  border: "1px solid #ddd",
+                  boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
+                  width: "100px",
+                }}
+              />
+              <button onClick={handleCancel} style={actionButtonStyle}>
+                Cancel
+              </button>
+              {(newTable || selectedTable) && (
+                <button onClick={handleSave} style={actionButtonStyle}>
+                  Save
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const buttonStyle = {
+  padding: "10px",
+  fontSize: "20px",
+  border: "1px solid #ddd",
+  borderRadius: "4px",
+  cursor: "pointer",
+  margin: "0 5px",
+};
+
+const actionButtonStyle = {
+  padding: "10px 20px",
+  fontSize: "16px",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  margin: "0 5px",
+  transition: "background-color 0.3s ease, color 0.3s ease",
+};
+
+export default TableCanvas;
diff --git a/src/components/TableList.js b/src/components/TableList.js
new file mode 100644
index 0000000..891a086
--- /dev/null
+++ b/src/components/TableList.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+const TableList = ({ tables, onSelectTable, selectedTable }) => {
+  return (
+    <div
+      style={{
+        width: "100%",
+        marginTop: "20px",
+        maxHeight: "400px",
+        overflowY: "auto",
+      }}
+    >
+      <ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
+        {tables.map((table) => (
+          <li
+            key={table.tableId}
+            style={{
+              backgroundColor: "white",
+              marginBottom: "10px",
+              padding: "10px",
+              borderRadius: "4px",
+              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+              cursor: "pointer",
+              backgroundColor:
+                table.tableId === selectedTable?.tableId
+                  ? "lightblue"
+                  : "white",
+            }}
+            onClick={() => onSelectTable(table)}
+          >
+            {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
+            Position: ({table.xposition}, {table.yposition})
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TableList;
diff --git a/src/components/TablesPage.js b/src/components/TablesPage.js
new file mode 100644
index 0000000..2a00bea
--- /dev/null
+++ b/src/components/TablesPage.js
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import { getTables, updateTable, createTable } from "../helpers/tableHelper";
+import TableCanvas from "./TableCanvas";
+import TableList from "./TableList";
+
+const TablesPage = ({ shopId }) => {
+  const [tables, setTables] = useState([]);
+  const [selectedTable, setSelectedTable] = useState(null);
+  const [newTable, setNewTable] = useState(null);
+  const [originalTables, setOriginalTables] = useState([]);
+  const [tableNo, setTableNo] = useState(""); // State for table name
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedTables = await getTables(shopId);
+        setTables(fetchedTables);
+        setOriginalTables(fetchedTables);
+      } catch (error) {
+        console.error("Error fetching tables:", error);
+      }
+    };
+
+    fetchData();
+  }, [shopId]);
+
+  const handleAddTable = () => {
+    const nextId = Math.random().toString(36).substr(2, 11);
+
+    setTables(originalTables);
+    setNewTable({
+      tableId: nextId,
+      xposition: 100,
+      yposition: 100,
+      tableNo: nextId,
+    });
+    setSelectedTable(null);
+    setTableNo(""); // Reset table name
+  };
+
+  const moveTable = (direction) => {
+    if (!selectedTable && !newTable) return;
+
+    const moveAmount = 10;
+    const { xposition, yposition } = selectedTable || newTable;
+    let newX = xposition;
+    let newY = yposition;
+
+    switch (direction) {
+      case "left":
+        newX = xposition - moveAmount;
+        break;
+      case "right":
+        newX = xposition + moveAmount;
+        break;
+      case "up":
+        newY = yposition - moveAmount;
+        break;
+      case "down":
+        newY = yposition + moveAmount;
+        break;
+      default:
+        break;
+    }
+
+    if (newTable) {
+      setNewTable({
+        ...newTable,
+        xposition: newX,
+        yposition: newY,
+      });
+    } else if (selectedTable) {
+      setTables(
+        tables.map((table) =>
+          table.tableId === selectedTable.tableId
+            ? { ...table, xposition: newX, yposition: newY }
+            : table
+        )
+      );
+      setSelectedTable({
+        ...selectedTable,
+        xposition: newX,
+        yposition: newY,
+      });
+    }
+  };
+
+  const handleSelectTable = (event) => {
+    const canvas = event.target;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    const clickedTable = tables.find(
+      (table) =>
+        x >= table.xposition &&
+        x <= table.xposition + 40 &&
+        y >= table.yposition &&
+        y <= table.yposition + 30
+    );
+
+    if (clickedTable) {
+      setSelectedTable(clickedTable);
+      setNewTable(null);
+      setTableNo(clickedTable.tableNo || ""); // Set table name if exists
+    } else if (newTable) {
+      setSelectedTable(newTable);
+      setTableNo(newTable.tableNo || ""); // Set table name if exists
+    }
+  };
+
+  const handleSelect = (table) => {
+    setSelectedTable(null);
+    setSelectedTable(table);
+    setNewTable(null);
+    setTables(originalTables);
+    if (table.tableNo != 0)
+      setTableNo(table.tableNo || ""); // Set table name if exists
+    else setTableNo(0);
+    console.log(table.tableNo);
+  };
+
+  const handleCancel = () => {
+    setSelectedTable(null);
+    setNewTable(null);
+    setTables(originalTables);
+    setTableNo(""); // Reset table name
+  };
+
+  const handleSave = async () => {
+    if (newTable) {
+      try {
+        const createdTable = await createTable(shopId, {
+          ...newTable,
+          tableNo,
+        });
+        setTables([...tables, createdTable]);
+        setOriginalTables([...tables, createdTable]);
+        setNewTable(null);
+        setTableNo(""); // Reset table name
+      } catch (error) {
+        console.error("Error creating table:", error);
+      }
+    } else if (selectedTable) {
+      try {
+        const updatedTable = await updateTable(shopId, {
+          ...selectedTable,
+          tableNo,
+        });
+        setTables(
+          tables.map((table) =>
+            table.tableId === updatedTable.tableId ? updatedTable : table
+          )
+        );
+        setOriginalTables(
+          tables.map((table) =>
+            table.tableId === updatedTable.tableId ? updatedTable : table
+          )
+        );
+        setSelectedTable(null);
+        setTableNo(""); // Reset table name
+      } catch (error) {
+        console.error("Error updating table:", error);
+      }
+    }
+  };
+
+  const handleSetTableNo = (event) => {
+    const newValue = event.target.value;
+    // Prevent setting value to '0' or starting with '0'
+    if (newValue === "" || /^[1-9][0-9]*$/.test(newValue)) {
+      setTableNo(newValue);
+    }
+  };
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+    >
+      <TableCanvas
+        tables={tables}
+        selectedTable={selectedTable}
+        newTable={newTable}
+        setTableNo={setTableNo}
+        handleSelectTable={handleSelectTable}
+        handleAddTable={handleAddTable}
+        moveTable={moveTable}
+        handleSave={handleSave}
+        handleCancel={handleCancel}
+        handleSetTableNo={handleSetTableNo}
+        tableNo={tableNo}
+      />
+      <TableList
+        tables={tables}
+        onSelectTable={handleSelect}
+        selectedTable={selectedTable}
+      />
+    </div>
+  );
+};
+
+export default TablesPage;
diff --git a/src/helpers/navigationHelpers.js b/src/helpers/navigationHelpers.js
index d4b095b..f7eb2dd 100644
--- a/src/helpers/navigationHelpers.js
+++ b/src/helpers/navigationHelpers.js
@@ -72,6 +72,15 @@ export const useNavigationHelpers = (shopId, tableId) => {
     navigate(url);
   };
 
+  const goToTransactions = () => {
+    let url = `/${shopId}`;
+    if (tableId) {
+      url += `/${tableId}`;
+    }
+    url += "/transactions";
+    navigate(url);
+  };
+
   const goToGuestSideLogin = () => {
     let url = `/${shopId}`;
     if (tableId) {
@@ -91,6 +100,7 @@ export const useNavigationHelpers = (shopId, tableId) => {
     goToSearch,
     goToCart,
     goToInvoice,
+    goToTransactions,
     goToGuestSideLogin,
     goToAdminCafes,
   };
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index 492e47f..fe3b5df 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -2,12 +2,37 @@ import API_BASE_URL from "../config.js";
 import { getLocalStorage, updateLocalStorage } from "./localStorageHelpers";
 import { getItemsByCafeId } from "../helpers/cartHelpers.js";
 
+export async function getTransactions(shopId, demand) {
+  try {
+    const token = getLocalStorage("auth");
+    const response = await fetch(
+      `${API_BASE_URL}/transaction/get-transactions/${shopId}?demandLength=${demand}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return false;
+    }
+
+    const transactions = await response.json();
+    return transactions;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+
 export const handlePaymentFromClerk = async (
   shopId,
   user_email,
   payment_type,
   serving_type,
-  tableNo,
+  tableNo
 ) => {
   try {
     const token = getLocalStorage("auth");
@@ -36,7 +61,7 @@ export const handlePaymentFromClerk = async (
           tableNo,
           transactions: structuredItems,
         }),
-      },
+      }
     );
 
     if (response.ok) {
@@ -61,7 +86,7 @@ export const handlePaymentFromGuestSide = async (
   user_email,
   payment_type,
   serving_type,
-  tableNo,
+  tableNo
 ) => {
   try {
     const token = getLocalStorage("authGuestSide");
@@ -90,7 +115,7 @@ export const handlePaymentFromGuestSide = async (
           tableNo,
           transactions: structuredItems,
         }),
-      },
+      }
     );
     const res = await response.json();
     console.log(res);
@@ -115,7 +140,7 @@ export const handlePaymentFromGuestDevice = async (
   shopId,
   payment_type,
   serving_type,
-  tableNo,
+  tableNo
 ) => {
   try {
     const token = getLocalStorage("auth");
@@ -143,7 +168,7 @@ export const handlePaymentFromGuestDevice = async (
           tableNo,
           transactions: structuredItems,
         }),
-      },
+      }
     );
 
     if (response.ok) {
diff --git a/src/pages/Invoice.js b/src/pages/Invoice.js
index 77f9616..a686094 100644
--- a/src/pages/Invoice.js
+++ b/src/pages/Invoice.js
@@ -60,7 +60,7 @@ export default function Invoice({ sendParam, deviceType }) {
         email,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        tableNumber
       );
     } else if (deviceType == "guestSide") {
       const pay = await handlePaymentFromGuestSide(
@@ -68,14 +68,14 @@ export default function Invoice({ sendParam, deviceType }) {
         email,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        tableNumber
       );
     } else if (deviceType == "guestDevice") {
       const pay = await handlePaymentFromGuestDevice(
         shopId,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        tableNumber
       );
     }
 
diff --git a/src/pages/Invoice.module.css b/src/pages/Invoice.module.css
index 0f330b7..59a069f 100644
--- a/src/pages/Invoice.module.css
+++ b/src/pages/Invoice.module.css
@@ -99,6 +99,19 @@
   cursor: pointer;
 }
 
+.Confirm {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
 .RoundedRectangle {
   border-radius: 20px;
   padding-top: 5px;
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
new file mode 100644
index 0000000..58c9a77
--- /dev/null
+++ b/src/pages/Transactions.js
@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+import styles from "./Transactions.module.css";
+import { useParams } from "react-router-dom";
+import { ColorRing } from "react-loader-spinner";
+import { getTransactions } from "../helpers/transactionHelpers";
+
+export default function Transactions({ propsShopId, sendParam, deviceType }) {
+  const { shopId, tableId } = useParams();
+  if (sendParam) sendParam({ shopId, tableId });
+
+  const [transactions, setTransactions] = useState([]);
+  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchTransactions = async () => {
+      try {
+        const response = await getTransactions(shopId || propsShopId, 5);
+        console.log("modallll");
+        console.log(response);
+        setTransactions(response);
+      } catch (error) {
+        console.error("Error fetching transactions:", error);
+      }
+    };
+
+    fetchTransactions();
+  }, [shopId]);
+
+  const calculateTotalPrice = (detailedTransactions) => {
+    return detailedTransactions.reduce((total, dt) => {
+      return total + dt.qty * dt.Item.price;
+    }, 0);
+  };
+
+  const handlePayment = async (isCash) => {
+    setIsPaymentLoading(true);
+    try {
+      // Implement payment logic here
+      console.log(`Processing ${isCash ? "cash" : "cashless"} payment`);
+      // Simulate payment process
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+    } catch (error) {
+      console.error("Error processing payment:", error);
+    } finally {
+      setIsPaymentLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.Transactions}>
+      <div style={{ marginTop: "30px" }}></div>
+      <h2 className={styles["Transactions-title"]}>Transactions</h2>
+      <div style={{ marginTop: "30px" }}></div>
+      <div>
+        {transactions.map((transaction) => (
+          <div
+            key={transaction.transactionId}
+            className={styles.RoundedRectangle}
+          >
+            <h2 className={styles["Transactions-detail"]}>
+              Transaction ID: {transaction.transactionId}
+            </h2>
+            <h2 className={styles["Transactions-detail"]}>
+              Payment Type: {transaction.payment_type}
+            </h2>
+            <ul>
+              {transaction.DetailedTransactions.map((detail) => (
+                <li key={detail.detailedTransactionId}>
+                  <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
+                  {detail.Item.price}
+                </li>
+              ))}
+            </ul>
+            <h2 className={styles["Transactions-detail"]}>
+              {transaction.serving_type === "pickup"
+                ? "Diambil di kasir"
+                : `Diantar ke meja nomor ${
+                    transaction.Table ? transaction.Table.tableNo : "N/A"
+                  }`}
+            </h2>
+            <div className={styles.TotalContainer}>
+              <span>Total:</span>
+              <span>
+                Rp {calculateTotalPrice(transaction.DetailedTransactions)}
+              </span>
+            </div>
+            <div className={styles.TotalContainer}>
+              <button
+                className={styles.PayButton}
+                onClick={() => handlePayment(false)}
+              >
+                {isPaymentLoading ? (
+                  <ColorRing height="50" width="50" color="white" />
+                ) : (
+                  "Confirm"
+                )}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css
new file mode 100644
index 0000000..fa18fb3
--- /dev/null
+++ b/src/pages/Transactions.module.css
@@ -0,0 +1,120 @@
+.Transactions {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  background-color: #e9e9e9;
+}
+
+.Transactions-title {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+  color: rgba(88, 55, 50, 1);
+  text-align: left;
+  margin-left: 20px;
+  margin-top: 17px;
+}
+
+.Transactions-detail {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 20px;
+  color: rgba(88, 55, 50, 1);
+  text-align: left;
+  margin-left: 20px;
+  margin-top: 17px;
+}
+
+.PaymentOption {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  border-radius: 15px 15px 0 0;
+
+  position: fixed;
+  bottom: 75px;
+  right: 0;
+  left: 0;
+}
+
+.PaymentOptionMargin {
+  z-index: -1;
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+
+  position: relative;
+  height: 229.39px;
+}
+
+.TotalContainer {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
+.PayButton {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+
+  width: 80vw;
+  height: 18vw;
+  border-radius: 50px;
+  background-color: rgba(88, 55, 50, 1);
+  color: white;
+  border: none;
+  margin: 0px auto;
+  cursor: pointer;
+  margin-bottom: 23px;
+}
+
+.Pay2Button {
+  text-align: center;
+  color: rgba(88, 55, 50, 1);
+  font-size: 1em;
+  margin-bottom: 25px;
+  cursor: pointer;
+}
+
+.Confirm {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
+.RoundedRectangle {
+  border-radius: 20px;
+  padding-top: 5px;
+  margin: 26px;
+  background-color: #f9f9f9;
+}