diff --git a/components/informational/accordion.css b/components/informational/accordion.css
index 3f27fa9..a43520a 100644
--- a/components/informational/accordion.css
+++ b/components/informational/accordion.css
@@ -3,7 +3,7 @@
 }
 
 .accordion {
-  @apply relative flex flex-col;
+  @apply relative flex flex-col focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500;
 }
 
 .accordion-group-secondary .accordion-title {
@@ -76,7 +76,7 @@
   > .accordion
   .accordion-toggle:checked
   ~ .accordion-title,
-.accordion:focus .accordion-title,
+.accordion-group.accordion-group-hover .accordion:focus .accordion-title,
 .accordion-group.accordion-group-hover
   > .accordion.accordion-open
   .accordion-title {
diff --git a/components/inputs/button.css b/components/inputs/button.css
index 1889646..f87d457 100644
--- a/components/inputs/button.css
+++ b/components/inputs/button.css
@@ -1,6 +1,6 @@
 /* Base Button */
 .btn {
-  @apply inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-xl  bg-gray-200 px-5 text-center text-sm font-medium  transition-transform focus:outline-none active:scale-[0.97];
+  @apply inline-flex h-10 cursor-pointer select-none items-center justify-center rounded-xl bg-gray-200 px-5 text-center text-sm font-medium transition-transform  focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-500  active:scale-[0.97];
 }
 
 .btn:where(
@@ -15,47 +15,47 @@
 
 /* Primary Colors */
 .btn-primary {
-  @apply bg-primary;
+  @apply bg-primary focus-visible:outline-primary;
 }
 
 .btn-secondary {
-  @apply bg-secondary;
+  @apply bg-secondary focus-visible:outline-secondary;
 }
 
 .btn-success {
-  @apply bg-success;
+  @apply bg-success  focus-visible:outline-success;
 }
 
 .btn-error {
-  @apply bg-error;
+  @apply bg-error focus-visible:outline-error;
 }
 
 .btn-warning {
-  @apply bg-warning;
+  @apply bg-warning focus-visible:outline-warning;
 }
 
 /* Outline colors */
 .btn-outline {
-  @apply border-2 border-gray-500 bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:border-gray-300 hover:bg-gray-300;
+  @apply border-2 border-gray-500 bg-transparent text-whiteInverted transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:border-gray-300 hover:bg-gray-300 focus-visible:outline-gray-600;
 }
 .btn-outline-primary {
-  @apply border-2 border-primary bg-transparent text-primary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-primary  hover:text-white;
+  @apply border-2 border-primary bg-transparent text-primary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-primary hover:text-white  focus-visible:outline-primary;
 }
 
 .btn-outline-secondary {
-  @apply border-2 border-secondary bg-transparent text-secondary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-secondary hover:text-white;
+  @apply border-2 border-secondary bg-transparent text-secondary transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-secondary hover:text-white focus-visible:outline-secondary;
 }
 
 .btn-outline-success {
-  @apply border-2 border-success bg-transparent  text-success transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-success hover:text-white;
+  @apply border-2 border-success bg-transparent  text-success  transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-success hover:text-white focus-visible:outline-success;
 }
 
 .btn-outline-error {
-  @apply border-2 border-error bg-transparent text-error transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-error hover:text-white;
+  @apply border-2 border-error bg-transparent text-error transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-error hover:text-white focus-visible:outline-error;
 }
 
 .btn-outline-warning {
-  @apply border-2 border-warning bg-transparent  text-warning transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-warning hover:text-white;
+  @apply border-2 border-warning bg-transparent  text-warning  transition-[transform,color,background-color,border-color,text-decoration-color,fill,stroke] hover:bg-warning hover:text-white focus-visible:outline-warning;
 }
 
 /* Button Sizes */
@@ -64,7 +64,7 @@
 }
 
 .btn-sm {
-  @apply h-[2rem] min-h-[2rem] rounded-lg  px-3 text-sm;
+  @apply h-8 min-h-[2rem] rounded-lg  px-3 text-sm;
 }
 
 .btn-md {
@@ -72,11 +72,11 @@
 }
 
 .btn-lg {
-  @apply h-[3rem] min-h-[3rem]  px-6 text-lg;
+  @apply h-12 min-h-[3rem]  px-6 text-lg;
 }
 
 .btn-xl {
-  @apply h-[4rem] min-h-[4rem]  rounded-2xl px-8 text-xl;
+  @apply h-16 min-h-[4rem]  rounded-2xl px-8 text-xl;
 }
 
 .btn:disabled {
diff --git a/components/inputs/checkbox.css b/components/inputs/checkbox.css
index 68f17cd..405a11c 100644
--- a/components/inputs/checkbox.css
+++ b/components/inputs/checkbox.css
@@ -9,7 +9,7 @@
   --checkbox-bg-hover: rgb(var(--gray-200));
   --checkline-color: rgb(var(--white));
   transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  @apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-md border border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]   align-top   accent-backgroundPrimary outline-none;
+  @apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-md border border-[var(--checkbox-border)] bg-[var(--checkbox-bg)]   align-top   accent-backgroundPrimary outline-none focus:outline-2   focus-visible:outline   focus-visible:outline-offset-2 focus-visible:outline-primary;
 }
 
 .checkbox::after {
@@ -52,26 +52,31 @@
 .checkbox-primary {
   --checkbox-bg-checked: rgb(var(--primary));
   --checkbox-border-checked: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .checkbox-secondary {
   --checkbox-bg-checked: rgb(var(--secondary));
   --checkbox-border-checked: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .checkbox-success {
   --checkbox-bg-checked: rgb(var(--success));
   --checkbox-border-checked: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .checkbox-error {
   --checkbox-bg-checked: rgb(var(--error));
   --checkbox-border-checked: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .checkbox-warning {
   --checkbox-bg-checked: rgb(var(--warning));
   --checkbox-border-checked: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* bordered */
@@ -81,6 +86,7 @@
   --checkbox-border-checked: rgb(var(--primary));
   --checkbox-border: rgb(var(--primary));
   --checkbox-border-hover: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
   /* --checkbox-bg-hover: var(--backgroundPrimary); */
 }
 
@@ -89,6 +95,7 @@
   --checkbox-border-checked: rgb(var(--secondary));
   --checkbox-border: rgb(var(--secondary));
   --checkbox-border-hover: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .checkbox-bordered-success {
@@ -96,6 +103,7 @@
   --checkbox-border-checked: rgb(var(--success));
   --checkbox-border: rgb(var(--success));
   --checkbox-border-hover: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .checkbox-bordered-error {
@@ -103,6 +111,7 @@
   --checkbox-border-checked: rgb(var(--error));
   --checkbox-border: rgb(var(--error));
   --checkbox-border-hover: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .checkbox-bordered-warning {
@@ -110,6 +119,7 @@
   --checkbox-border-checked: rgb(var(--warning));
   --checkbox-border: rgb(var(--warning));
   --checkbox-border-hover: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* Ghost */
@@ -118,30 +128,35 @@
   --checkbox-bg-checked: rgb(var(--primary));
   --checkbox-border-checked: rgb(var(--primary));
   --checkbox-border-hover: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .checkbox-ghost-secondary {
   --checkbox-bg-checked: rgb(var(--secondary));
   --checkbox-border-checked: rgb(var(--secondary));
   --checkbox-border-hover: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .checkbox-ghost-success {
   --checkbox-bg-checked: rgb(var(--success));
   --checkbox-border-checked: rgb(var(--success));
   --checkbox-border-hover: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .checkbox-ghost-error {
   --checkbox-bg-checked: rgb(var(--error));
   --checkbox-border-checked: rgb(var(--error));
   --checkbox-border-hover: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .checkbox-ghost-warning {
   --checkbox-bg-checked: rgb(var(--warning));
   --checkbox-border-checked: rgb(var(--warning));
   --checkbox-border-hover: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* Sizes */
diff --git a/components/inputs/radio.css b/components/inputs/radio.css
index d76aa8a..1f67d16 100644
--- a/components/inputs/radio.css
+++ b/components/inputs/radio.css
@@ -9,7 +9,7 @@
   --radio-bg-hover: rgb(var(--gray-200));
   --checkline-color: rgb(var(--white));
   transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  @apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-full border border-[var(--radio-border)] bg-[var(--radio-bg)]   align-top   accent-backgroundPrimary outline-none;
+  @apply relative m-0 inline-block h-5 w-5 cursor-pointer appearance-none rounded-full border border-[var(--radio-border)] bg-[var(--radio-bg)] align-top accent-backgroundPrimary  focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-primary;
 }
 .radio:after {
   transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
@@ -52,26 +52,31 @@
 .radio-primary {
   --radio-bg-checked: rgb(var(--primary));
   --radio-border-checked: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .radio-secondary {
   --radio-bg-checked: rgb(var(--secondary));
   --radio-border-checked: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .radio-success {
   --radio-bg-checked: rgb(var(--success));
   --radio-border-checked: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .radio-error {
   --radio-bg-checked: rgb(var(--error));
   --radio-border-checked: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .radio-warning {
   --radio-bg-checked: rgb(var(--warning));
   --radio-border-checked: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* bordered */
@@ -80,6 +85,7 @@
   --radio-bg-checked: rgb(var(--primary));
   --radio-border-checked: rgb(var(--primary));
   --radio-border-hover: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .radio-bordered-secondary {
@@ -87,6 +93,7 @@
   --radio-bg-checked: rgb(var(--secondary));
   --radio-border-checked: rgb(var(--secondary));
   --radio-border-hover: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .radio-bordered-success {
@@ -94,6 +101,7 @@
   --radio-bg-checked: rgb(var(--success));
   --radio-border-checked: rgb(var(--success));
   --radio-border-hover: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .radio-bordered-error {
@@ -101,6 +109,7 @@
   --radio-bg-checked: rgb(var(--error));
   --radio-border-checked: rgb(var(--error));
   --radio-border-hover: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .radio-bordered-warning {
@@ -108,6 +117,7 @@
   --radio-bg-checked: rgb(var(--warning));
   --radio-border-checked: rgb(var(--warning));
   --radio-border-hover: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* Ghost */
@@ -116,30 +126,35 @@
   --radio-bg-checked: rgb(var(--primary));
   --radio-border-checked: rgb(var(--primary));
   --radio-border-hover: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .radio-ghost-secondary {
   --radio-bg-checked: rgb(var(--secondary));
   --radio-border-checked: rgb(var(--secondary));
   --radio-border-hover: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .radio-ghost-success {
   --radio-bg-checked: rgb(var(--success));
   --radio-border-checked: rgb(var(--success));
   --radio-border-hover: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .radio-ghost-error {
   --radio-bg-checked: rgb(var(--error));
   --radio-border-checked: rgb(var(--error));
   --radio-border-hover: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .radio-ghost-warning {
   --radio-bg-checked: rgb(var(--warning));
   --radio-border-checked: rgb(var(--warning));
   --radio-border-hover: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 /* Sizes */
 
diff --git a/components/inputs/switch.css b/components/inputs/switch.css
index ad7489d..3c487ef 100644
--- a/components/inputs/switch.css
+++ b/components/inputs/switch.css
@@ -1,16 +1,16 @@
 .switch {
   -webkit-appearance: none;
   -moz-appearance: none;
-  --switch-bg: rgb(var(--gray-50));
+  --switch-bg: rgb(var(--gray-500));
   --switch-border: rgb(var(--gray-500));
   --switch-bg-checked: rgb(var(--primary));
   --switch-border-checked: rgb(var(--primary));
   --switch-border-hover: rgb(var(--gray-600));
-  --switch-bg-hover: inherit;
+  --switch-bg-hover: rgb(var(--gray-500));
   --checkline-color: rgb(var(--white));
-  --circle-color: rgb(var(--gray-500));
-  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
-  @apply relative m-0 inline-block  h-[21px] w-[38px] cursor-pointer  appearance-none rounded-xl border border-[var(--switch-border)] bg-[var(--switch-bg)]   align-top  outline-none;
+  --circle-color: rgb(var(--gray-50));
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
+  @apply relative m-0 inline-block  h-[21px] w-[38px] cursor-pointer appearance-none   rounded-xl   border border-[var(--switch-border)]  bg-[var(--switch-bg)] align-top outline-none focus:outline-2 focus-visible:outline   focus-visible:outline-offset-2  focus-visible:outline-primary;
 }
 
 .switch::after {
@@ -22,15 +22,12 @@
 .switch:checked {
   --circle-color: rgb(var(--white));
   @apply border-[var(--switch-border-checked)] bg-[var(--switch-bg-checked)];
-  --d-o: 0.3s;
-  --d-t: 0.6s;
-  --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
   --o: 1;
   --r: 43deg;
 }
 
 .switch:disabled {
-  --circle-color: rgb(var(--gray-200));
+  /* --circle-color: rgb(var(--gray-50)); */
   @apply cursor-not-allowed border-gray-600 bg-gray-600 opacity-50;
 }
 
@@ -66,26 +63,31 @@
 .switch-primary {
   --switch-bg-checked: rgb(var(--primary));
   --switch-border-checked: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .switch-secondary {
   --switch-bg-checked: rgb(var(--secondary));
   --switch-border-checked: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .switch-success {
   --switch-bg-checked: rgb(var(--success));
   --switch-border-checked: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .switch-error {
   --switch-bg-checked: rgb(var(--error));
   --switch-border-checked: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .switch-warning {
   --switch-bg-checked: rgb(var(--warning));
   --switch-border-checked: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* bordered */
@@ -95,6 +97,7 @@
   --switch-border-checked: rgb(var(--primary));
   --switch-border: rgb(var(--primary));
   --switch-border-hover: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
   /* --switch-bg-hover: var(--backgroundPrimary); */
 }
 
@@ -103,6 +106,7 @@
   --switch-border-checked: rgb(var(--secondary));
   --switch-border: rgb(var(--secondary));
   --switch-border-hover: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .switch-bordered-success {
@@ -110,6 +114,7 @@
   --switch-border-checked: rgb(var(--success));
   --switch-border: rgb(var(--success));
   --switch-border-hover: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .switch-bordered-error {
@@ -117,6 +122,7 @@
   --switch-border-checked: rgb(var(--error));
   --switch-border: rgb(var(--error));
   --switch-border-hover: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .switch-bordered-warning {
@@ -124,43 +130,58 @@
   --switch-border-checked: rgb(var(--warning));
   --switch-border: rgb(var(--warning));
   --switch-border-hover: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* Ghost */
 
 .switch-ghost-primary {
-  --switch-bg-checked: rgb(var(--primary));
-  --switch-border-checked: rgb(var(--primary));
+  --switch-bg: rgb(var(--gray-50));
+  --circle-color: rgb(var(--gray-500));
+  --switch-bg-hover: rgb(var(--gray-50));
   --switch-border-hover: rgb(var(--primary));
-  --checkline-color: rgb(var(--primary));
+  --switch-bg-checked: rgb(var(--primary));
+  @apply focus-visible:outline-primary;
 }
 
 .switch-ghost-secondary {
-  --switch-bg-checked: rgb(var(--secondary));
-  --switch-border-checked: rgb(var(--secondary));
+  --switch-bg: rgb(var(--gray-50));
+  --circle-color: rgb(var(--gray-500));
+  --switch-bg-hover: rgb(var(--gray-50));
   --switch-border-hover: rgb(var(--secondary));
-  --checkline-color: rgb(var(--secondary));
+  --switch-border-checked: rgb(var(--secondary));
+  --switch-bg-checked: rgb(var(--secondary));
+  @apply focus-visible:outline-secondary;
 }
 
 .switch-ghost-success {
-  --switch-bg-checked: rgb(var(--success));
-  --switch-border-checked: rgb(var(--success));
+  --switch-bg: rgb(var(--gray-50));
+  --circle-color: rgb(var(--gray-500));
+  --switch-bg-hover: rgb(var(--gray-50));
   --switch-border-hover: rgb(var(--success));
-  --checkline-color: rgb(var(--success));
+  --switch-border-checked: rgb(var(--success));
+  --switch-bg-checked: rgb(var(--success));
+  @apply focus-visible:outline-success;
 }
 
 .switch-ghost-error {
-  --switch-bg-checked: rgb(var(--error));
-  --switch-border-checked: rgb(var(--error));
+  --switch-bg: rgb(var(--gray-50));
+  --circle-color: rgb(var(--gray-500));
+  --switch-bg-hover: rgb(var(--gray-50));
   --switch-border-hover: rgb(var(--error));
-  --checkline-color: rgb(var(--error));
+  --switch-border-checked: rgb(var(--error));
+  --switch-bg-checked: rgb(var(--error));
+  @apply focus-visible:outline-error;
 }
 
 .switch-ghost-warning {
-  --switch-bg-checked: rgb(var(--warning));
-  --switch-border-checked: rgb(var(--warning));
+  --switch-bg: rgb(var(--gray-50));
+  --circle-color: rgb(var(--gray-500));
+  --switch-bg-hover: rgb(var(--gray-50));
   --switch-border-hover: rgb(var(--warning));
-  --checkline-color: rgb(var(--warning));
+  --switch-border-checked: rgb(var(--warning));
+  --switch-bg-checked: rgb(var(--warning));
+  @apply focus-visible:outline-warning;
 }
 
 /* Sizes */