diff --git a/packages/ui/button.tsx b/packages/ui/button.tsx
index 87abeb9..759c524 100644
--- a/packages/ui/button.tsx
+++ b/packages/ui/button.tsx
@@ -4,17 +4,20 @@ import { cva } from 'class-variance-authority';
 import type { ButtonHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
-const variants = cva('rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white', {
-  defaultVariants: {
-    color: 'default',
-  },
-  variants: {
-    color: {
-      danger: 'bg-danger hover:bg-danger-700',
-      default: 'bg-primary hover:bg-primary-700',
+const variants = cva(
+  'rounded-sm h-10 px-5 py-2.5 text-sm font-medium text-white transition-all ease-in-out',
+  {
+    defaultVariants: {
+      color: 'default',
     },
-  },
-});
+    variants: {
+      color: {
+        danger: 'bg-danger hover:bg-danger-700',
+        default: 'bg-primary hover:bg-primary-700',
+      },
+    },
+  }
+);
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;
 
diff --git a/packages/ui/checkbox.tsx b/packages/ui/checkbox.tsx
index f43c90d..b3a18dd 100644
--- a/packages/ui/checkbox.tsx
+++ b/packages/ui/checkbox.tsx
@@ -26,7 +26,7 @@ const Label = forwardRef<HTMLLabelElement, LabelProps>(
 );
 
 const variants = cva(
-  'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
+  'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
 );
 
 export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
diff --git a/packages/ui/input.tsx b/packages/ui/input.tsx
index 9ec7cd8..49ee7e3 100644
--- a/packages/ui/input.tsx
+++ b/packages/ui/input.tsx
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
 
 const variants = cva(
-  '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:ring-0 hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-in-out hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
+  '[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:ring-0 hover:border-primary-500 focus:border-primary-500 block w-full rounded-sm border disabled:hover:border-gray-300 border-gray-300 h-9 p-2 px-3 text-sm text-gray-900 outline-none transition-all ease-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
 );
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &