diff --git a/package.json b/package.json
index dfcdd547..53384ce8 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
+    "html5-qrcode": "^2.3.8",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21c04aab..9dfb3dec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -100,6 +100,9 @@ devDependencies:
   eslint-plugin-prettier:
     specifier: ^5.2.1
     version: 5.2.1(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.3.3)
+  html5-qrcode:
+    specifier: ^2.3.8
+    version: 2.3.8
   postcss:
     specifier: ^8.4.39
     version: 8.4.39
@@ -2741,6 +2744,10 @@ packages:
     resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
     dev: false
 
+  /html5-qrcode@2.3.8:
+    resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
+    dev: true
+
   /ignore@5.3.1:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
@@ -4735,6 +4742,7 @@ packages:
       which-module: 2.0.1
       y18n: 4.0.3
       yargs-parser: 18.1.3
+    dev: false
 
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
diff --git a/src/components/(main)/home/CustomButton.tsx b/src/components/(main)/home/CustomButton.tsx
index fed9e512..186a978f 100644
--- a/src/components/(main)/home/CustomButton.tsx
+++ b/src/components/(main)/home/CustomButton.tsx
@@ -35,7 +35,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   const router = useRouter();
 
   const firstdate = async () => {
-    let firstDateDate = currentDate;
+    /* let firstDateDate = currentDate;
     const firstDate = process.env.NEXT_PUBLIC_FIRST_DATE_DATE;
 
     if (firstDate) {
@@ -52,7 +52,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
       router.push('/firstdate/home');
     } else {
       router.push('/register');
-    }
+    } */
   };
 
   const rubpeun = async () => {
@@ -131,7 +131,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   };
   const buttonProps = {
     'first-date': {
-      color: 'bg-project-pink',
+      color: 'bg-project-pink opacity-30 event-pointer-none',
       onClick: firstdate,
     },
     'rub-peun': {
diff --git a/src/components/rpkm/staff/home/qrscanner/QRScanner.tsx b/src/components/rpkm/staff/home/qrscanner/QRScanner.tsx
index 32668e7b..500c80dd 100644
--- a/src/components/rpkm/staff/home/qrscanner/QRScanner.tsx
+++ b/src/components/rpkm/staff/home/qrscanner/QRScanner.tsx
@@ -1,7 +1,7 @@
 'use client';
-import React from 'react';
-import { QrReader } from 'react-qr-reader';
+import React, { useEffect } from 'react';
 import { motion } from 'framer-motion';
+import { Html5Qrcode } from 'html5-qrcode';
 
 interface ScanProps {
   sendCheckInRequest: (
@@ -10,26 +10,44 @@ interface ScanProps {
   ) => Promise<void>;
 }
 
+const id = 'reader';
+
 const Scan = ({ sendCheckInRequest }: ScanProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleScanResult = (scanRawData: any) => {
-    if (!scanRawData || !scanRawData.text) {
-      return;
-    }
-    sendCheckInRequest('userId', scanRawData.text);
-  };
+  useEffect(() => {
+    const reader = new Html5Qrcode(id);
+    reader
+      .start(
+        { facingMode: 'environment' },
+        {
+          fps: 10,
+          qrbox: { width: 500, height: 500 },
+          aspectRatio: 1,
+        },
+        (decodedText) => {
+          if (localStorage.getItem('enable') === 'false') return;
+          sendCheckInRequest('userId', decodedText);
+        },
+        (errorMessage) => {
+          console.log(errorMessage);
+        }
+      )
+      .then(() => {
+        reader.applyVideoConstraints({
+          //eslint-disable-next-line @typescript-eslint/no-explicit-any
+          advanced: [{ zoom: 2.5, focusMode: 'continuous' } as any],
+        });
+      });
+
+    return () => reader.clear();
+  }, []);
 
   return (
     <div className="flex flex-col items-center justify-center w-full">
       <div className="relative w-full h-full">
-        <div className="overflow-hidden aspect-square">
-          <QrReader
-            scanDelay={0}
-            className="bg-black w-[100vw] aspect-square -mt-[13vw] -ml-[14vw]"
-            onResult={handleScanResult}
-            constraints={{ facingMode: 'environment' }}
-          />
-        </div>
+        <div
+          id={id}
+          className="w-full aspect-auto"
+        ></div>
 
         <motion.div
           className="absolute left-1/2 top-1/2 h-[50vw] w-[50vw] max-w-md -translate-x-1/2 -translate-y-1/2 transform rounded-3xl border-4 border-white"