diff --git a/src/components/ui/Switch.tsx b/src/components/ui/Switch.tsx
index 30aba22..8c19f25 100644
--- a/src/components/ui/Switch.tsx
+++ b/src/components/ui/Switch.tsx
@@ -1,5 +1,11 @@
 "use client";
-import React from 'react';
+
+import React from "react";
+import {
+  Switch as HeroSwitch,
+  Label,
+  Description,
+} from "@heroui/react";
 
 export interface SwitchProps {
   label?: React.ReactNode;
@@ -7,7 +13,7 @@ export interface SwitchProps {
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   disabled?: boolean;
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   checkedIcon?: React.ReactNode;
   uncheckedIcon?: React.ReactNode;
   id?: string;
@@ -16,21 +22,21 @@ export interface SwitchProps {
 }
 
 const trackSizes = {
-  sm: 'w-8 h-4.5',
-  md: 'w-11 h-6',
-  lg: 'w-14 h-7.5',
+  sm: "w-8 h-[18px]",
+  md: "w-11 h-6",
+  lg: "w-14 h-[30px]",
 };
 
 const thumbSizes = {
-  sm: 'w-3.5 h-3.5',
-  md: 'w-5 h-5',
-  lg: 'w-6.5 h-6.5',
+  sm: "size-3.5",
+  md: "size-5",
+  lg: "size-[26px]",
 };
 
 const translateSizes = {
-  sm: 'translate-x-3.5',
-  md: 'translate-x-5',
-  lg: 'translate-x-6.5',
+  sm: "translate-x-3.5",
+  md: "translate-x-5",
+  lg: "translate-x-[26px]",
 };
 
 export const Switch: React.FC<SwitchProps> = ({
@@ -39,85 +45,100 @@ export const Switch: React.FC<SwitchProps> = ({
   checked = false,
   onChange,
   disabled = false,
-  size = 'md',
+  size = "md",
   checkedIcon,
   uncheckedIcon,
   id,
   name,
-  className = '',
+  className = "",
 }) => {
-  const switchId = id || name || (typeof label === 'string' ? label.toLowerCase().replace(/\s+/g, '-') : undefined);
-
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(!checked);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      handleClick();
-    }
-  };
+  const switchId =
+    id ||
+    name ||
+    (typeof label === "string"
+      ? label.toLowerCase().replace(/\s+/g, "-")
+      : undefined);
 
   return (
-    <div className={`inline-flex items-start gap-3 select-none ${className}`}>
-      {/* Switch Button */}
-      <button
-        id={switchId}
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        className={`
-          relative shrink-0 inline-flex items-center rounded-full p-0.5 cursor-pointer transition-colors duration-200 ease-in-out
-          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
-          focus-visible:ring-cyan-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950
-          disabled:opacity-50 disabled:cursor-not-allowed
-          ${trackSizes[size]}
-          ${
-            checked
-              ? 'bg-cyan-500 dark:bg-cyan-500'
-              : 'bg-slate-300 dark:bg-slate-700 hover:bg-slate-400 dark:hover:bg-slate-600'
-          }
-        `}
-      >
-        {/* Thumb */}
-        <span
+    <HeroSwitch
+      id={switchId}
+      name={name}
+      isSelected={checked}
+      isDisabled={disabled}
+      size={size}
+      className={className}
+      onChange={(e: any) => {
+        if (!onChange || disabled) return;
+        const val = typeof e === "boolean" ? e : Boolean(e?.target?.checked);
+        onChange(val);
+      }}
+    >
+      <HeroSwitch.Content>
+        <HeroSwitch.Control
           className={`
-            pointer-events-none flex items-center justify-center rounded-full bg-white shadow-md transform transition-transform duration-200 ease-in-out text-slate-800
-            ${thumbSizes[size]}
-            ${checked ? translateSizes[size] : 'translate-x-0'}
+            ${trackSizes[size]}
+            relative shrink-0 inline-flex items-center rounded-full p-0.5
+            transition-colors duration-200 ease-in-out cursor-pointer
+            border-0 m-0 box-border outline-none
+
+            ${
+              checked
+                ? "bg-cyan-500"
+                : "bg-slate-300 hover:bg-slate-400 dark:bg-slate-700 dark:hover:bg-slate-600"
+            }
+
+            ${disabled ? "cursor-not-allowed opacity-50" : ""}
           `}
         >
-          {checked ? checkedIcon : uncheckedIcon}
-        </span>
-      </button>
+          <HeroSwitch.Thumb
+            className={`
+              ${thumbSizes[size]}
+              ${checked ? translateSizes[size] : "translate-x-0"}
+              
+              border-0 m-0 pointer-events-none shrink-0 flex items-center justify-center
+              rounded-full bg-white text-slate-800 shadow-md
+              transition-transform duration-200 ease-in-out
+            `}
+          >
+            {(checkedIcon || uncheckedIcon) && (
+              <HeroSwitch.Icon>
+                {checked ? checkedIcon : uncheckedIcon}
+              </HeroSwitch.Icon>
+            )}
+          </HeroSwitch.Thumb>
+        </HeroSwitch.Control>
 
-      {/* Label and description */}
-      {(label || description) && (
-        <div className="flex flex-col text-left cursor-pointer" onClick={handleClick}>
-          {label && (
-            <span
-              className={`text-xs sm:text-sm font-medium transition-colors ${
-                disabled
-                  ? 'text-slate-400 dark:text-slate-600'
-                  : 'text-slate-800 dark:text-slate-200 hover:text-slate-950 dark:hover:text-white'
-              }`}
-            >
-              {label}
-            </span>
-          )}
-          {description && (
-            <span className="text-xs text-slate-500 dark:text-slate-400">
-              {description}
-            </span>
-          )}
-        </div>
-      )}
-    </div>
+        {/* TEXTOS */}
+        {(label || description) && (
+          <div className="flex flex-col text-left">
+            {label && (
+              <Label
+                className={`
+                  text-xs sm:text-sm font-medium transition-colors cursor-pointer
+                  ${
+                    disabled
+                      ? "text-slate-400 dark:text-slate-600 cursor-not-allowed"
+                      : "text-slate-800 hover:text-slate-950 dark:text-slate-200 dark:hover:text-white"
+                  }
+                `}
+              >
+                {label}
+              </Label>
+            )}
+
+            {description && (
+              <Description
+                className={`
+                  text-xs text-slate-500 dark:text-slate-400 cursor-pointer
+                  ${disabled ? "cursor-not-allowed" : ""}
+                `}
+              >
+                {description}
+              </Description>
+            )}
+          </div>
+        )}
+      </HeroSwitch.Content>
+    </HeroSwitch>
   );
-};
+};
\ No newline at end of file