diff --git a/package-lock.json b/package-lock.json
index c591857..af34a97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "@radix-ui/react-popover": "^1.1.4",
         "@radix-ui/react-select": "^2.1.4",
         "@radix-ui/react-slot": "^1.1.1",
-        "@tanstack/react-query": "^5.64.2",
         "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -1873,30 +1872,6 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@tanstack/query-core": {
-      "version": "5.64.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.64.2.tgz",
-      "integrity": "sha512-hdO8SZpWXoADNTWXV9We8CwTkXU88OVWRBcsiFrk7xJQnhm6WRlweDzMD+uH+GnuieTBVSML6xFa17C2cNV8+g==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.64.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.64.2.tgz",
-      "integrity": "sha512-3pakNscZNm8KJkxmovvtZ4RaXLyiYYobwleTMvpIGUoKRa8j8VlrQKNl5W8VUEfVfZKkikvXVddLuWMbcSCA1Q==",
-      "dependencies": {
-        "@tanstack/query-core": "5.64.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19"
-      }
-    },
     "node_modules/@tokenizer/token": {
       "version": "0.3.0",
       "license": "MIT"
@@ -8012,7 +7987,8 @@
     },
     "node_modules/zod": {
       "version": "3.24.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index c646e7e..a2c536d 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
-    "@tanstack/react-query": "^5.64.2",
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/src/components/staff/qr/qrbutton.tsx b/src/components/staff/qr/qrbutton.tsx
index 20ed535..3d76321 100644
--- a/src/components/staff/qr/qrbutton.tsx
+++ b/src/components/staff/qr/qrbutton.tsx
@@ -3,13 +3,12 @@ import { useState } from 'react';
 import { useLiff } from '@/contexts/liff';
 import Modal from './Modal';
 import { ScanLine } from 'lucide-react';
+import { apiClient } from '@/utils/axios';
+import { useAuth } from '@/contexts/auth';
 
 export default function QrButton() {
   const { client } = useLiff();
-
-  // TODO: Define the file path
-  // TODO: Read the existing file content
-
+  const { token } = useAuth();
   const [qrCodeValue, setQrCodeValue] = useState<string | null>(null);
   const [modalType, setModalType] = useState<
     'confirm' | 'invalid' | 'already' | null
@@ -23,25 +22,46 @@ export default function QrButton() {
     }
     try {
       const result = await client.scanCodeV2();
-      const value = result.value;
+      const value = result.value ?? '';
 
-      if (value) {
-        setQrCodeValue(value);
-        setIsModalOpen(true);
-        setModalType('confirm');
-      } else if (value === 'taken') {
-        setModalType('already');
-        setIsModalOpen(true);
-      } else {
-        setModalType('invalid');
-        setIsModalOpen(true);
-      }
-    } catch (err) {
-      console.error('QR Scan failed:', err);
+      // Post the QR code result to the API
+      const status = await postQrCodeToApi(value ?? '');
+      setModalType(status?.toString() as 'confirm' | 'invalid' | 'already');
+      setQrCodeValue(value);
+      setIsModalOpen(true);
+    } catch (error) {
+      console.error('Error scanning QR code:', error);
+      alert('Failed to scan QR code. Please try again.');
       setModalType('invalid');
+      setIsModalOpen(true);
     }
   };
 
+  const postQrCodeToApi = async (value: string) => {
+    try {
+      const response = await apiClient.post(
+        `/users/qr/${value}`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${token?.accessToken}`,
+          },
+        },
+      );
+      if (response.status === 200) {
+        return 'confirm';
+      } else if (response.status === 400) {
+        return 'already';
+      } else if (response.status === 500) {
+        return 'invalid';
+      } else {
+        return 'invalid';
+      }
+    } catch (error) {
+      console.error('Error posting QR code to API:', error);
+      return error;
+    }
+  };
   return (
     <div className="mt-12 flex justify-center">
       <div className="flex h-12 w-72 flex-row justify-center rounded-full bg-white px-4 py-2 text-lg text-dark-pink">