diff --git a/comps/custom/QrReader.tsx b/comps/custom/QrReader.tsx
index 677f197..307dab8 100755
--- a/comps/custom/QrReader.tsx
+++ b/comps/custom/QrReader.tsx
@@ -2,77 +2,75 @@ import { useEffect, useRef, useState } from "react";
 import QrScanner from "qr-scanner";
 
 export const QrReader = () => {
-    const scanner = useRef<QrScanner>();
-    const videoEl = useRef<HTMLVideoElement>(null);
-    const qrBoxEl = useRef<HTMLDivElement>(null);
-    const [qrOn, setQrOn] = useState<boolean>(true);
-    const [scannedResult, setScannedResult] = useState<string | undefined>("");
+  const scanner = useRef<QrScanner>();
+  const videoEl = useRef<HTMLVideoElement>(null);
+  const qrBoxEl = useRef<HTMLDivElement>(null);
+  const [qrOn, setQrOn] = useState<boolean>(true);
+  const [scannedResult, setScannedResult] = useState<string | undefined>("");
 
-    // Success
-    const onScanSuccess = (result: QrScanner.ScanResult) => {
-        console.log(result);
-        setScannedResult(result?.data);
+  // Success
+  const onScanSuccess = (result: QrScanner.ScanResult) => {
+    console.log(result);
+    setScannedResult(result?.data);
+  };
+
+  // Fail
+  const onScanFail = (err: string | Error) => {
+    console.log(err);
+  };
+
+  useEffect(() => {
+    if (videoEl?.current && !scanner.current) {
+      scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
+        onDecodeError: onScanFail,
+        preferredCamera: "environment",
+        highlightScanRegion: true,
+        highlightCodeOutline: true,
+        overlay: qrBoxEl?.current || undefined,
+      });
+
+      scanner?.current
+        ?.start()
+        .then(() => setQrOn(true))
+        .catch((err) => {
+          if (err) setQrOn(false);
+        });
+    }
+
+    return () => {
+      if (!videoEl?.current) {
+        scanner?.current?.stop();
+      }
     };
+  }, []);
 
-    // Fail
-    const onScanFail = (err: string | Error) => {
-        console.log(err);
-    };
+  useEffect(() => {
+    if (!qrOn)
+      alert(
+        "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
+      );
+  }, [qrOn]);
 
-    useEffect(() => {
-        if (videoEl?.current && !scanner.current) {
-            scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
-                onDecodeError: onScanFail,
-                preferredCamera: "environment",
-                highlightScanRegion: true,
-                highlightCodeOutline: true,
-                overlay: qrBoxEl?.current || undefined,
-            });
+  return (
+    <div className="qr-reader">
+      {/* QR */}
+      <video ref={videoEl}></video>
+      <div ref={qrBoxEl} className="qr-box"></div>
 
-            scanner?.current
-                ?.start()
-                .then(() => setQrOn(true))
-                .catch((err) => {
-                    if (err) setQrOn(false);
-                });
-        }
-
-        return () => {
-            if (!videoEl?.current) {
-                scanner?.current?.stop();
-            }
-        };
-    }, []);
-
-    useEffect(() => {
-        if (!qrOn)
-            alert(
-                "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
-            );
-    }, [qrOn]);
-
-    return (
-        <div className="qr-reader">
-            {/* QR */}
-            <video ref={videoEl}></video>
-            <div ref={qrBoxEl} className="qr-box">
-               
-            </div>
-
-            {/* Show Data Result if scan is success */}
-            {scannedResult && (
-                <p
-                    style={{
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        zIndex: 99999,
-                        color: "white",
-                    }}
-                >
-                    Scanned Result: {scannedResult}
-                </p>
-            )}
-        </div>
-    );
+      {/* Show Data Result if scan is success */}
+      {scannedResult && (
+        <p
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: 99999,
+            color: "white",
+          }}
+        >
+          Scanned Result: {scannedResult}
+        </p>
+      )}
+    </div>
+  );
 };
diff --git a/modules.json b/modules.json
index 153d0b8..d05ad12 100755
--- a/modules.json
+++ b/modules.json
@@ -16,6 +16,8 @@
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.1.0",
+    "react-qr-code": "^2.0.15",
+    "qr-scanner": "^1.4.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@types/autosize": "^4.0.3",
     "@types/lodash.capitalize": "^4.2.9",