diff --git a/package-lock.json b/package-lock.json
index c55f5c9..9752558 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "lucide-react": "^0.277.0",
         "next": "13.5.4",
         "postcss": "8.4.31",
+        "qr-code-styling": "^1.6.0-rc.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-intersection-observer": "^9.5.2",
@@ -4473,6 +4474,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr-code-styling": {
+      "version": "1.6.0-rc.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
+      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
+      "dependencies": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "node_modules/qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 542a479..0d7093b 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "lucide-react": "^0.277.0",
     "next": "13.5.4",
     "postcss": "8.4.31",
+    "qr-code-styling": "^1.6.0-rc.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intersection-observer": "^9.5.2",
diff --git a/src/components/qrcode/page.tsx b/src/components/qrcode/page.tsx
new file mode 100644
index 0000000..5b50ac6
--- /dev/null
+++ b/src/components/qrcode/page.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+import QRCodeStyling from 'qr-code-styling';
+
+interface GenerateQRProps {
+  url: string | URL;
+  size?: number;
+  background?: string;
+  color?: string;
+}
+
+const GenerateQR: React.FC<GenerateQRProps> = ({ url, size = 512, background = 'white', color = 'black' }) => {
+  const qrCodeRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (qrCodeRef.current) {
+      const qrCode = new QRCodeStyling({
+        width: size,
+        height: size,
+        data: url.toString(),
+        image: '',
+        margin: 20,
+        qrOptions: {
+          typeNumber: 0,
+          mode: 'Byte',
+          errorCorrectionLevel: 'Q',
+        },
+        dotsOptions: {
+          color: color,
+          type: 'square',
+        },
+        backgroundOptions: {
+          color: background,
+        },
+      });
+
+      qrCode.append(qrCodeRef.current);
+      qrCode.update();
+    }
+  }, [url, size, background, color]);
+
+  return (
+    <div ref={qrCodeRef}></div>
+  );
+};
+
+export default GenerateQR;
\ No newline at end of file