diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 5dc66df..bf02df0 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -1,13 +1,15 @@
 "use client";
-import React, { useEffect } from 'react';
-import { FiX } from 'react-icons/fi';
+
+import React from "react";
+import { Modal as HeroModal } from "@heroui/react";
+import { FiX } from "react-icons/fi";
 
 export interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   title?: React.ReactNode;
   description?: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
   children: React.ReactNode;
   footer?: React.ReactNode;
   closeOnOverlayClick?: boolean;
@@ -16,12 +18,12 @@ export interface ModalProps {
 }
 
 const sizeStyles = {
-  sm: 'max-w-md',
-  md: 'max-w-lg',
-  lg: 'max-w-2xl',
-  xl: 'max-w-4xl',
-  '2xl': 'max-w-6xl',
-  full: 'max-w-[95vw] h-[90vh]',
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  "2xl": "max-w-6xl",
+  full: "max-w-[95vw] h-[90vh]",
 };
 
 export const Modal: React.FC<ModalProps> = ({
@@ -29,101 +31,74 @@ export const Modal: React.FC<ModalProps> = ({
   onClose,
   title,
   description,
-  size = 'md',
+  size = "md",
   children,
   footer,
   closeOnOverlayClick = true,
   showCloseButton = true,
-  className = '',
+  className = "",
 }) => {
-  // ESC key handler and body scroll lock
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.body.style.overflow = originalOverflow;
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, onClose]);
-
-  if (!isOpen) return null;
-
   return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto"
-    >
-      {/* Backdrop */}
-      <div
-        onClick={() => {
-          if (closeOnOverlayClick) onClose();
+    <HeroModal>
+      <HeroModal.Backdrop
+        isOpen={isOpen}
+        isDismissable={closeOnOverlayClick}
+        onOpenChange={(open) => {
+          if (!open) {
+            onClose();
+          }
         }}
-        className="fixed inset-0 bg-slate-950/70 backdrop-blur-md transition-opacity animate-fadeIn"
-      />
+        variant="blur"
+        className="fixed inset-0 bg-slate-950/70 backdrop-blur-md transition-opacity animate-fadeIn">
+        <HeroModal.Container placement="center" scroll="inside" size="md" className="p-4 sm:p-6">
+          <HeroModal.Dialog
+            aria-modal="true"
+            className={`
+              relative w-full rounded-3xl overflow-hidden shadow-2xl z-10 p-0
+              bg-white text-slate-900 border border-slate-200
+              dark:bg-slate-900/95 dark:text-slate-100 dark:border-slate-800
+              transition-all transform animate-scaleUp
+              ${sizeStyles[size]}
+              ${className}
+            `}>
 
-      {/* Modal Dialog Card */}
-      <div
-        className={`
-          relative w-full rounded-3xl overflow-hidden shadow-2xl z-10
-          bg-white text-slate-900 border border-slate-200
-          dark:bg-slate-900/95 dark:text-slate-100 dark:border-slate-800
-          transition-all transform animate-scaleUp
-          ${sizeStyles[size]}
-          ${className}
-        `}
-      >
-        {/* Header */}
-        {(title || description || showCloseButton) && (
-          <div className="flex items-start justify-between p-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
-            <div className="space-y-1 pr-6">
-              {title && (
-                <h2 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">
-                  {title}
-                </h2>
-              )}
-              {description && (
-                <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400">
-                  {description}
-                </p>
-              )}
-            </div>
+            {/* Header */}
+            {(title || description || showCloseButton) && (
+              <HeroModal.Header className="flex items-start justify-between p-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
+                <div className="space-y-1 pr-6">
+                  {title && (
+                    <HeroModal.Heading className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">
+                      {title}
+                    </HeroModal.Heading>
+                  )}
+                  {description && (
+                    <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400">{description}</p>
+                  )}
+                </div>
 
-            {showCloseButton && (
-              <button
-                type="button"
-                onClick={onClose}
-                aria-label="Cerrar modal"
-                className="p-2 rounded-xl text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors"
-              >
-                <FiX className="text-lg" />
-              </button>
+                {showCloseButton && (
+                  <HeroModal.CloseTrigger
+                    className="p-2 rounded-xl text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors"
+                    onPress={onClose}
+                    aria-label="Cerrar modal">
+                    <FiX className="text-lg" />
+                  </HeroModal.CloseTrigger>
+                )}
+              </HeroModal.Header>
             )}
-          </div>
-        )}
 
-        {/* Body Content */}
-        <div className="p-6 overflow-y-auto max-h-[calc(85vh-160px)]">
-          {children}
-        </div>
+            {/* Body Content */}
+            <HeroModal.Body className="p-6 overflow-y-auto max-h-[calc(85vh-160px)]">{children}</HeroModal.Body>
 
-        {/* Footer */}
-        {footer && (
-          <div className="p-6 pt-4 border-t border-slate-100 dark:border-slate-800/80 bg-slate-50/50 dark:bg-slate-950/40 flex items-center justify-end gap-3">
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>
+            {/* Footer */}
+            {footer && (
+              <HeroModal.Footer className="p-6 pt-4 border-t border-slate-100 dark:border-slate-800/80 bg-slate-50/50 dark:bg-slate-950/40 flex items-center justify-end gap-3">
+                {footer}
+              </HeroModal.Footer>
+            )}
+          </HeroModal.Dialog>
+        </HeroModal.Container>
+      </HeroModal.Backdrop>
+    </HeroModal>
   );
 };