diff --git a/client/bun.lockb b/client/bun.lockb
index f0da48e..4594326 100755
Binary files a/client/bun.lockb and b/client/bun.lockb differ
diff --git a/client/package.json b/client/package.json
index 9dea249..c77b9ac 100644
--- a/client/package.json
+++ b/client/package.json
@@ -36,6 +36,7 @@
     "lucide-react": "^0.453.0",
     "moment": "^2.30.1",
     "next-themes": "^0.3.0",
+    "qrcode": "^1.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
@@ -53,6 +54,7 @@
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@types/node": "^22.7.7",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
diff --git a/client/src/components/modals/command-modal.tsx b/client/src/components/modals/command-modal.tsx
index 08efaa5..f39a48f 100644
--- a/client/src/components/modals/command-modal.tsx
+++ b/client/src/components/modals/command-modal.tsx
@@ -22,6 +22,7 @@ import {
   PanelTopInactive,
   PenLineIcon,
   Plus,
+  QrCode,
   TextCursorInput,
 } from "lucide-react";
 import {
@@ -29,6 +30,7 @@ import {
   useImageCaptioningStore,
   useImagineModal,
   useOcrMagic,
+  useQRCodeStore,
   useSettingsModal,
   useTranslateMagicModal,
   usettHMagic,
@@ -47,6 +49,7 @@ export function CommandModal() {
   const ocrModal = useOcrMagic();
   const ttHModal = usettHMagic();
   const translateModal = useTranslateMagicModal();
+  const qrModal = useQRCodeStore();
   const imageCaptioningModal = useImageCaptioningStore();
   const navigate = useNavigate();
 
@@ -85,6 +88,10 @@ export function CommandModal() {
               <TextCursorInput />
               <span>Text Extractor (OCR)</span>
             </CommandItem>
+            <CommandItem onSelect={() => qrModal.onOpen()}>
+              <QrCode />
+              <span>QR Code Generator</span>
+            </CommandItem>
             <CommandItem onSelect={() => ttHModal.onOpen({ text: "" })}>
               <PenLineIcon />
               <span>Text To Handwriting</span>
diff --git a/client/src/components/modals/qr-magic-modal.tsx b/client/src/components/modals/qr-magic-modal.tsx
new file mode 100644
index 0000000..c151624
--- /dev/null
+++ b/client/src/components/modals/qr-magic-modal.tsx
@@ -0,0 +1,121 @@
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { useQRCodeStore } from "@/stores/modal-store"; // Assuming you have modal store for opening the modal
+import { Button } from "../ui/button";
+import toast from "react-hot-toast";
+import { X } from "lucide-react";
+import { ChangeEvent, FormEvent, useState } from "react";
+import QRCode from "qrcode"; // QRCode from qrcode-react package
+import { Input } from "../ui/input";
+import { Skeleton } from "../ui/skeleton";
+
+export default function QRCodeGeneratorModal() {
+  const modal = useQRCodeStore(); // Modal state control
+  const [loading, setLoading] = useState(false);
+  const [qrData, setQrData] = useState(""); // Text or URL to generate QR code
+  const [generatedQRCode, setGeneratedQRCode] = useState(""); // Base64 QR code data
+
+  // Handle input change
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setQrData(e.target.value);
+  };
+
+  // Handle QR Code generation
+  const handleGenerateQRCode = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!qrData)
+      return toast.error("Please enter text or URL to generate QR code!");
+
+    setLoading(true);
+    try {
+      const qrCodeData = await QRCode.toDataURL(qrData); // Generate QR Code data as a base64 URL
+      setGeneratedQRCode(qrCodeData);
+    } catch (error) {
+      console.error("Error generating QR code:", error);
+      toast.error("Failed to generate QR Code.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={modal.isOpen} onOpenChange={() => modal.onClose()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <div className="flex items-center justify-between">
+              <p>QR Code Generator Tool</p>
+              <Button
+                variant={"outline"}
+                size={"icon"}
+                className="rounded-full"
+                onClick={() => modal.onClose()}
+              >
+                <X />
+              </Button>
+            </div>
+          </AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogDescription>
+          Generate a QR Code for any URL or text input.
+        </AlertDialogDescription>
+        <div className="grid gap-4 w-full">
+          <form
+            onSubmit={handleGenerateQRCode}
+            className="w-full flex items-center flex-col gap-4"
+          >
+            {generatedQRCode && (
+              <div className="mt-4 flex justify-center items-center flex-col">
+                <img
+                  src={generatedQRCode}
+                  alt="Generated QR Code"
+                  className="max-w-full h-auto"
+                />
+                <div className="mt-2 text-sm text-center">
+                  <a
+                    href={generatedQRCode}
+                    download="qrcode.png"
+                    className="text-blue-600"
+                  >
+                    Download QR Code
+                  </a>
+                </div>
+              </div>
+            )}
+
+            {loading && (
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-[90%]" />
+                <Skeleton className="h-4 w-[75%]" />
+              </div>
+            )}
+            <Input
+              type="text"
+              value={qrData}
+              onChange={handleInputChange}
+              disabled={loading}
+              placeholder="Enter text or URL"
+              className="w-full"
+            />
+            <Button
+              disabled={loading}
+              className="w-full"
+              variant={"outline"}
+              type="submit"
+            >
+              {loading ? "Generating..." : "Generate QR Code"}
+            </Button>
+          </form>
+        </div>
+        <AlertDialogFooter />
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/client/src/contexts/modals.tsx b/client/src/contexts/modals.tsx
index 8b0908a..60c7fef 100644
--- a/client/src/contexts/modals.tsx
+++ b/client/src/contexts/modals.tsx
@@ -3,6 +3,7 @@ import DeleteChatbotModal from "@/components/modals/delete-chatbot-modal";
 import ImageCaptioningModal from "@/components/modals/image-captioning-magic-modal";
 import ImagineModal from "@/components/modals/imgine-modal";
 import OcrMagicModal from "@/components/modals/ocr-magic-modal";
+import QRCodeGeneratorModal from "@/components/modals/qr-magic-modal";
 import SettingsModal from "@/components/modals/settings-modal";
 import ShareModal from "@/components/modals/share-modal";
 import TranslateMagicModal from "@/components/modals/translate-magic-modal";
@@ -24,6 +25,7 @@ export default function Modals() {
       <TtsMagicModal />
       <ImageCaptioningModal />
       <TranslateMagicModal />
+      <QRCodeGeneratorModal />
       <ImagineModal />
       <DeleteChatbotModal />
     </>
diff --git a/client/src/stores/modal-store.ts b/client/src/stores/modal-store.ts
index 5b4de71..b92a55c 100644
--- a/client/src/stores/modal-store.ts
+++ b/client/src/stores/modal-store.ts
@@ -1,6 +1,7 @@
 import { DefaultModal, defaultModalValues } from "@/types/default-modal-store";
 import { create } from "zustand";
 
+export const useQRCodeStore = create<DefaultModal>(defaultModalValues);
 export const useCreateChatbotModal = create<DefaultModal>(defaultModalValues);
 export const useDeleteChatbotModal = create<DefaultModal>(defaultModalValues);
 export const useUpdateChatbotModal = create<DefaultModal>(defaultModalValues);