diff --git a/src/App.js b/src/App.js
index 3b43976..240c678 100644
--- a/src/App.js
+++ b/src/App.js
@@ -394,14 +394,14 @@ function App() {
     console.log(transaction_info);  // Log the updated transaction_info
 
 
-const depthh = transactionList.current.findIndex(
-  item => item.transactionId.toString() === transaction_info.toString()
-);
-
-setDepth(depthh);
+    const depthh = transactionList.current.findIndex(
+      item => item.transactionId.toString() === transaction_info.toString()
+    );
 
+    setDepth(depthh);
+    console.log(transaction_info == response[0].transactionId)
     // If transaction_info is an empty string, set the modal
-    if (transaction_info == '') return false;
+    if (transaction_info == '' || transaction_info == response[0].transactionId) return false;
     else return true;
   }
 
@@ -433,6 +433,7 @@ setDepth(depthh);
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
+        navigate(`?transactionId=${data.transactionId}`, { replace: true });
       }
     });
 
diff --git a/src/components/Item.js b/src/components/Item.js
index ce255b1..fe3b53f 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -192,7 +192,7 @@ const Item = ({
                     whiteSpace: 'nowrap',
                     borderRadius: '9999px',
                     backgroundColor: !isAvailable ? 'gray' : 'unset',
-                    backgroundImage: isAvailable && 'linear-gradient(to right, #e52535, #eb525e)',
+                    backgroundImage: isAvailable && 'linear-gradient(to right, #e52535, #fe6d78)',
                     padding: '0.25rem 0rem',
                     color: 'rgb(255, 255, 255)',
                     fontSize: '0.75rem',
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 991f780..9e3f4d8 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -93,7 +93,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "transaction_canceled" && (
           <Transaction propsShopId={shop.cafeId} />
         )}
-        {modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType}/>}
+        {modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType} setModal={setModal}/>}
         {modalContent === "transaction_item" && <Transaction_item />}
         {modalContent === "transaction_confirmed" && (
           <Transaction_confirmed  deviceType={deviceType} paymentUrl={shop.qrPayment} setModal={setModal}/>
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index 85c29a9..fa1aeb3 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -47,7 +47,7 @@ export async function declineTransaction(transactionId) {
       return false;
     }
 
-    return true;
+    return await response.json();
   } catch (error) {
     console.error("Error:", error);
   }
@@ -57,7 +57,7 @@ export async function cancelTransaction(transactionId) {
   try {
     const token = getLocalStorage("auth");
     const response = await fetch(
-      `${API_BASE_URL}/transaction/cancel-transaction/${transactionId}`,
+      `${API_BASE_URL}/transaction/decline-transaction/${transactionId}`,
       {
         method: "POST",
         headers: {
diff --git a/src/pages/Transaction_pending.js b/src/pages/Transaction_pending.js
index 0816aca..6c20b8d 100644
--- a/src/pages/Transaction_pending.js
+++ b/src/pages/Transaction_pending.js
@@ -11,7 +11,7 @@ import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
 import { useSearchParams } from "react-router-dom";
 
-export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, shopImg }) {
+export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, shopImg, setModal }) {
   const { shopId, tableId } = useParams();
   if (sendParam) sendParam({ shopId, tableId });
 
@@ -173,7 +173,15 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
             <div
               onClick={() => {
                 localStorage.setItem('lastTransaction', JSON.stringify(transaction));
-              }} className={styles["addNewItem"]}>Tambah pesanan</div>
+                setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);
+
+                // Dispatch the custom event
+                window.dispatchEvent(new Event("localStorageUpdated"));
+              }}
+              className={styles["addNewItem"]}
+            >
+              Tambah pesanan
+            </div>   
 
             <h2 className={styles["Transactions-detail"]}>
               {transaction.serving_type === "pickup"
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
index e934af9..f6dd1ba 100644
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -121,7 +121,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
         setTransactions((prevTransactions) =>
           prevTransactions.map((transaction) =>
             transaction.transactionId === transactionId
-              ? { ...transaction, confirmed: -1 } // Set to confirmed
+              ? c // Set to confirmed
               : transaction
           )
         );
@@ -153,7 +153,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                 {transaction.confirmed === 1 ? (
                   <ColorRing className={styles['receipt-logo']} />
                 ) : transaction.confirmed === -1 || transaction.confirmed === -2 ? (
-                  <div style={{ display: 'flex', justifyContent: 'center' }}>
+                  <div style={{ display: 'flex', justifyContent: 'center', margin: '16px 0px' }}>
                     <svg
                       style={{ width: '60px', transform: 'Rotate(45deg)' }}
                       clipRule="evenodd"
@@ -172,7 +172,32 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                 ) : transaction.confirmed === 2 ? (
                   <ColorRing className={styles['receipt-logo']} />
                 ) : transaction.confirmed === 3 ? (
-                  "Transaction success"
+                  <div>
+                  <svg
+                    height="60px"
+                    width="60px"
+                    version="1.1"
+                    id="Layer_1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    xmlnsXlink="http://www.w3.org/1999/xlink"
+                    viewBox="0 0 506.4 506.4"
+                    xmlSpace="preserve"
+                    fill="#000000"
+                    style={{marginTop: '12px', marginBottom: '12px'}}
+                  >
+                    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                    <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                    <g id="SVGRepo_iconCarrier">
+                      <circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" />
+                      <path
+                        style={{ fill: '#F4EFEF' }}
+                        d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z"
+                      ></path>
+                      <path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path>
+                      <path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path>
+                    </g>
+                  </svg>
+                </div>
                 ) : (
 
                   <ColorRing className={styles['receipt-logo']} />
@@ -196,7 +221,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                     )}</h3>
                     :
                     <h3>{transaction.confirmed === 1 ? (
-                      "Silahkan Bayar Dengan QRIS"
+                      (transaction.payment_type == 'cash' ? 'Silahkan Bayar Ke Kasir' : "Silahkan Bayar Dengan QRIS")
                     ) : transaction.confirmed === -1 ? (
                       "Dibatalkan Oleh Kasir"
                     ) : transaction.confirmed === -2 ? (
@@ -268,15 +293,15 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                   Rp {calculateTotalPrice(transaction.DetailedTransactions)}
                 </span>
               </div>
+
               <div className={styles.TotalContainer}>
-                {(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) ||
-                  (deviceType == 'guestDevice' && (transaction.confirmed == 0))&&
+                {(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) &&
                   <button
                     className={styles.PayButton}
                     onClick={() => handleConfirm(transaction.transactionId)}
                     disabled={isPaymentLoading}
                   >
-                    {deviceType === "clerk" ? (
+                    {
                       isPaymentLoading ? (
                         <ColorRing height="50" width="50" color="white" />
                       ) : transaction.confirmed === 1 ? (
@@ -286,17 +311,12 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                       ) : (
                         "Confirm availability"
                       )
-                    ) :
-                      isPaymentLoading ? (
-                        <ColorRing height="50" width="50" color="white" />
-                      ) : (
-                        "Transaction success"
-                      )}
+                    }
 
                   </button>
                 }
 
-                {transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
+                {deviceType == 'guestDevice' &&  transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
                   <ButtonWithReplica
                     paymentUrl={paymentUrl}
                     price={
@@ -324,7 +344,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                 }
               </div>
 
-              {transaction.payment_type == 'cash' ?
+              {deviceType == 'guestDevice' && transaction.confirmed >=0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ?
                 <button
                   className={styles.PayButton}
                   onClick={() => handleDecline(transaction.transactionId)}
@@ -345,7 +365,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                   )}
                 </button>
                 :
-                ((transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
+                ((transaction.confirmed >= 0 && transaction.confirmed < 2 && transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
                   <h5
                     className={`${styles.DeclineButton}`}
                     onClick={() =>
@@ -358,14 +378,6 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                   </h5>
                 )
               }
-              {transaction.confirmed == 0 && (
-                <h5
-                  className={styles.DeclineButton}
-                  onClick={() => handleDecline(transaction.transactionId)}
-                >
-                  decline
-                </h5>
-              )}
             </div>
           ))}
       </div>