diff --git a/.storybook/main.ts b/.storybook/main.ts
index a96ba38..f93fc61 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,4 +11,4 @@ const config: StorybookConfig = {
   ],
   framework: '@storybook/react-vite',
 };
-export default config;
+export default config;
\ No newline at end of file
diff --git a/src/app/styles/index.css b/src/app/styles/index.css
index 2264950..37dbba4 100644
--- a/src/app/styles/index.css
+++ b/src/app/styles/index.css
@@ -73,9 +73,11 @@
   --margin-s: 16px;
 
   /* Padding (Primitive/Scale) */
+  --padding-xl: 24px;
   --padding-l: 16px;
   --padding-m: 12px;
   --padding-s: 8px;
+  --padding-ss: 4px;
 
   /* Radius (Primitive/Scale) */
   --radius-xl: 40px;
diff --git a/src/shared/ui/Button/Button.variants.ts b/src/shared/ui/Button/Button.variants.ts
index 105631b..310ed12 100644
--- a/src/shared/ui/Button/Button.variants.ts
+++ b/src/shared/ui/Button/Button.variants.ts
@@ -2,21 +2,60 @@ import { tv } from 'tailwind-variants';
 
 export const buttonVariants = tv({
   base: [
+    /* layout */
     'flex items-center justify-center',
-    'h-[44px]',
-    'px-[24px]',
-    'py-[--padding-m]',
-    'gap-[--spacing-xxs]',
-    'rounded-[--radius-l]',
+    'w-[163px] h-[44px]',
+    'px-[var(--padding-xl)] py-[var(--padding-m)]',
+    'gap-[var(--spacing-xxs)]',
+
+    /* style */
+    'rounded-[var(--radius-l)]',
     'typo-body-1',
     'transition-colors',
+    'focus:outline-none',
   ],
+
   variants: {
     variant: {
-      fill: ['bg-gray-900 text-white'],
-      outline: ['border-2 border-gray-900 text-gray-900'],
+      fill: [
+        /* default */
+        'bg-[var(--color-gray-900)] text-[var(--color-white)]',
+
+        /* hover */
+        'hover:bg-[var(--color-gray-500)]',
+
+        /* focus */
+        'focus:bg-[var(--color-gray-600)] focus:text-[var(--color-white)]',
+
+        /* disabled */
+        'disabled:bg-[var(--color-gray-200)]',
+        'disabled:text-[var(--color-gray-400)]',
+        'disabled:cursor-not-allowed',
+      ],
+
+      outline: [
+        /* default */
+        'bg-transparent',
+        'border-2',
+        'border-[var(--color-gray-900)]',
+        'text-[var(--color-gray-900)]',
+
+        /* hover */
+        'hover:border-[var(--color-gray-500)]',
+        'hover:text-[var(--color-gray-500)]',
+
+        /* focus */
+        'focus:border-[var(--color-gray-600)]',
+        'focus:text-[var(--color-gray-600)]',
+
+        /* disabled */
+        'disabled:border-[var(--color-gray-300)]',
+        'disabled:text-[var(--color-gray-400)]',
+        'disabled:cursor-not-allowed',
+      ],
     },
   },
+
   defaultVariants: {
     variant: 'fill',
   },