diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
new file mode 100644
index 0000000..9263d5e
--- /dev/null
+++ b/src/app/staff/page.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import Header from "@/components/layout/header";
+import React from "react";
+import dynamic from "next/dynamic";
+import Button from "@/components/button";
+
+const Html5QrcodePlugin = dynamic(() => import('@/components/qr-scanner'), {
+  ssr: false,
+});
+
+const Modal = dynamic(() => import('@/components/modal'), {
+  ssr: false,
+});
+
+export default function Page() {
+  const [text, setText] = React.useState<string>("");
+  const [showModal, setShowModal] = React.useState<boolean>(false);
+
+  const onScanSuccess = (decodedText: string) => {
+    setText(decodedText);
+    setShowModal(true); // Muestra el modal al escanear
+  };
+
+  const onScanError = (errorMessage: string) => {
+    console.warn("QR Error:", errorMessage);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <div className="d-flex flex-column min-vh-100">
+      <Header small />
+      <main className="py-3">
+        <div className="container text-center">
+          <h1 className="mb-4">Lectura de QRs</h1>
+
+          <div className="mb-4">
+            <Html5QrcodePlugin
+              fps={10}
+              qrbox={500}
+              qrCodeSuccessCallback={onScanSuccess}
+              qrCodeErrorCallback={onScanError}
+            />
+          </div>
+
+          <p className="mt-4">
+            {text
+              ? `Texto escaneado: ${text}`
+              : "Escanea un código QR para ver el texto aquí."}
+          </p>
+        </div>
+      </main>
+
+      <Modal
+        isVisible={showModal}
+        size="md"
+        onClose={handleCloseModal}
+        closeButton
+        className={{
+          content: "p-3",
+          body: "text-center",
+        }}
+      >
+        <h5 className="mb-3">Texto escaneado</h5>
+        <p>{text}</p>
+
+        <Button variant="success" onClick={handleCloseModal}>
+          Confirmar lectura
+        </Button>
+      </Modal>
+    </div>
+  );
+}
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 704edfd..8071c0e 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -74,7 +74,7 @@ export default function Modal({
       aria-hidden="true"
     >
       <div
-        className={`modal-dialog modal-dialog-centered ${className?.dialog ?? ''} ${modalSizeClass}`}
+        className={`modal-dialog modal-dialog-centered ${className?.dialog} ${modalSizeClass}`}
       >
         <div className={`modal-content ${className?.content}`}>
           {closeButton && (