diff --git a/app/src/features/api.tsx b/app/src/features/api.tsx
index c310ef3e..e6a84af7 100644
--- a/app/src/features/api.tsx
+++ b/app/src/features/api.tsx
@@ -1,7 +1,7 @@
-import { collection, Timestamp, addDoc, getDocs, query, where, runTransaction, doc, orderBy, limit } from "firebase/firestore";
+import { collection, Timestamp, getDoc, getDocs, query, where, runTransaction, doc, orderBy, limit } from "firebase/firestore";
 import { FirebaseDatabase } from "../firebase";
 
-const TransactionsCollectionName = "transactions"
+const TransactionsCollectionName = "transactions-new"
 const DishCollectionName = "dishes"
 const UserCollectionName = "users"
 const QRCollectionName = "qr-codes"
@@ -56,21 +56,23 @@ const DishAPI = {
       const out = await runTransaction(FirebaseDatabase, async (transaction) => {
         const qrDoc = await transaction.get(qrRef)
         if (!qrDoc.exists()) {
-          throw "QR code not registered";
+          return null;
         }
 
-        const dish = qrDoc.data().dish
-
-        const docData = {
-          dish: dish,
-          user: user,
-          timestamp: Timestamp.now(),
+        const dishRef = doc(FirebaseDatabase, "dishes", qrDoc.data().dishID);
+        const dishSnap = await getDoc(dishRef);
+
+        if (dishSnap.exists()) {
+          const dish = dishSnap.data();
+          const docData = {
+            dish: dish,
+            user: user,
+            timestamp: Timestamp.now(),
+          }
+          const docRef = doc(collection(FirebaseDatabase, TransactionsCollectionName));
+          transaction.set(docRef, docData);
+          return docRef.id;
         }
-
-        const docRef = doc(collection(FirebaseDatabase, TransactionsCollectionName));
-
-        await transaction.set(docRef, docData);
-        return docRef.id;
       });
       return out;
   },
diff --git a/app/src/routes/borrow.tsx b/app/src/routes/borrow.tsx
index 71f28632..5c113a10 100644
--- a/app/src/routes/borrow.tsx
+++ b/app/src/routes/borrow.tsx
@@ -3,13 +3,10 @@ import { useNavigate } from "react-router-dom";
 import Scanner from "../widgets/scanner";
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
-import { faCoffee } from "@fortawesome/free-solid-svg-icons";
+import { faCoffee, faExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import DishAPI from "../features/api";
 import { FirebaseContext } from "../firebase";
-import Login from "./login";
-import { GoogleAuth, FirebaseAuth } from "../firebase";
-import { signInWithPopup } from "firebase/auth";
 
 const Confirm = ({ show, onSubmit, onCancel, id }) => {
   return (
@@ -21,8 +18,8 @@ const Confirm = ({ show, onSubmit, onCancel, id }) => {
     >
       <Modal.Header closeButton></Modal.Header>
       <Modal.Body className="text-center">
-        <p style={{ textAlign: "center" }}>ID : {id}</p>
         <FontAwesomeIcon icon={faCoffee} size="4x" />
+        <p style={{ textAlign: "center" }}>ID: {id}</p>
       </Modal.Body>
       <Modal.Footer className="justify-content-center">
         <Button variant="secondary" onClick={onSubmit}>
@@ -33,9 +30,70 @@ const Confirm = ({ show, onSubmit, onCancel, id }) => {
   );
 };
 
+const DishNotFound = ({ show, onCancel, id }) => {
+  return (
+    <Modal
+      onHide={onCancel}
+      show={show}
+      className="modal-dialog-centered modal-sm"
+      centered
+    >
+      <Modal.Header closeButton></Modal.Header>
+      <Modal.Body className="text-center">
+        <FontAwesomeIcon
+          style={{ color: '#BF4949', margin: '16 0 16 0' }}
+          icon={faExclamation}
+          size="4x"
+        />
+        <p style={{ textAlign: 'center' }}>
+          Dish ID: {id} does not exist. Please try again.
+        </p>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+const BorrowDishSuccess = ({ show, success, onCancel, id }) => {
+  return (
+    <Modal onHide={onCancel} show={show} className="modal-dialog-bottom modal-sm" centered>
+      <Modal.Header closeButton></Modal.Header>
+      <Modal.Body style={{ width: '100%', display: 'flex', gap: '0.5rem' }}>
+        {success ? (
+          <>
+            <FontAwesomeIcon icon={faCoffee} size="4x" />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div>Successfully borrowed</div>
+              <div>Dish # {id} </div>
+              <div>Return by ...</div>
+            </div>
+          </>
+        ) : (
+          <>
+            <FontAwesomeIcon
+              style={{ color: '#BF4949' }}
+              icon={faExclamation}
+              size="4x"
+            />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div>Failed to borrow</div>
+              <div>Dish # {id} </div>
+              <div>Please scan and try again</div>
+            </div>
+          </>
+        )}
+      </Modal.Body>
+    </Modal>
+  );
+}
+
 export default () => {
   const [scanId, setScanId] = useState("");
   const [confirm, setConfirm] = useState(false);
+  const [dishNotFound, setDishNotFound] = useState(false);
+  const [borrowDishResult, setBorrowDishResult] = useState({
+    show: false,
+    success: false,
+  });
   const firebase = useContext(FirebaseContext);
   const navigate = useNavigate();
   const [Buffer, setBuffer] = useState(false);
@@ -53,32 +111,43 @@ export default () => {
     setConfirm(false);
     const user = firebase?.user?.uid || null;
     console.log("USER: " + user);
-    const docId = await DishAPI.addDishBorrow(scanId, user);
-    setBuffer(true);
 
-    console.log("doc ref" + docId);
-    const transactionID = docId;
+    try {
+      const docId = await DishAPI.addDishBorrow(scanId, user);
+      if (docId === null) {
+        setDishNotFound(true);
+        return;
+      }
+
+      setBuffer(true);
+
+      const transactionID = docId;
 
-    if (!firebase?.user) {
-      console.log("USER IS NULL");
-      navigate(`/login/?transaction_id=${transactionID}`);
+      if (!firebase?.user) {
+        console.log('USER IS NULL');
+        navigate(`/login/?transaction_id=${transactionID}`);
+        console.log('LOGGED out user' + user);
+      }
+      setBorrowDishResult({ show: true, success: true });
+    } catch (e) {
+      console.log(e);
+      setBorrowDishResult({ show: true, success: false});
     }
-    console.log("LOGGEd out user" + user);
   };
 
-  const onCancel = confirm
-    ? () => {
-        setScanId("");
-        setConfirm(false);
-      }
-    : null;
+  const onCancel = () => {
+    setScanId('');
+    setConfirm(false);
+    setDishNotFound(false);
+    setBorrowDishResult({ ...borrowDishResult, show: false });
+  };
 
   return (
     <>
       <Scanner
         mode="Scan Dishes"
         onScan={onScan}
-        onClose={() => navigate("/home")}
+        onClose={() => navigate('/home')}
       />
       <Confirm
         show={confirm}
@@ -88,6 +157,13 @@ export default () => {
         }}
         onCancel={onCancel}
       />
+      <DishNotFound show={dishNotFound} id={scanId} onCancel={onCancel} />
+      <BorrowDishSuccess
+        show={borrowDishResult.show}
+        success={borrowDishResult.success}
+        onCancel={onCancel}
+        id={scanId}
+      />
     </>
   );
 };