diff --git a/.changeset/eleven-bikes-approve.md b/.changeset/eleven-bikes-approve.md
new file mode 100644
index 00000000..895ce886
--- /dev/null
+++ b/.changeset/eleven-bikes-approve.md
@@ -0,0 +1,6 @@
+---
+'@crossed/theme': patch
+'@crossed/ui': patch
+---
+
+fix button style
diff --git a/packages/theme/src/dark/theme.ts b/packages/theme/src/dark/theme.ts
index cf6eed97..9622a35c 100644
--- a/packages/theme/src/dark/theme.ts
+++ b/packages/theme/src/dark/theme.ts
@@ -71,42 +71,47 @@ export default {
           border: colors.primary[60],
         },
         focus: {
-          text: colors.white,
-          icon: colors.white,
-          background: colors.primary[60],
-          border: colors.primary[60],
+          text: '',
+          icon: '',
+          background: colors.primary[0],
+          border: colors.primary[40],
         },
         disabled: {
-          text: colors.primary[80],
-          icon: colors.primary[80],
+          text: colors.neutral[80],
+          icon: colors.neutral[80],
           background: colors.primary[100],
           border: colors.primary[100],
         },
       },
       secondary: {
         default: {
-          text: colors.primary.primary,
-          icon: colors.primary.primary,
-          background: colors.neutral['60'],
-          border: colors.neutral['60'],
+          text: colors.primary[40],
+          icon: colors.primary[40],
+          background: colors.neutral[60],
+          border: colors.neutral[60],
         },
         hover: {
-          text: colors.primary.primary,
-          icon: colors.primary.primary,
-          background: colors.neutral['50'],
-          border: colors.neutral['50'],
+          text: colors.primary[40],
+          icon: colors.primary[40],
+          background: colors.neutral[50],
+          border: colors.neutral[50],
         },
         active: {
-          text: colors.primary.primary,
-          icon: colors.primary.primary,
-          background: colors.neutral['60'],
-          border: colors.neutral['50'],
+          text: colors.primary[40],
+          icon: colors.primary[40],
+          background: colors.neutral[60],
+          border: colors.neutral[40],
+        },
+        focus: {
+          text: '',
+          icon: '',
+          background: colors.neutral[60],
+          border: colors.primary[40],
         },
-        focus: { background: '', text: '', icon: '', border: '' },
         disabled: {
-          text: colors.primary[10],
-          icon: colors.primary[10],
-          background: colors.primary[40],
+          text: colors.primary[40],
+          icon: colors.primary[40],
+          background: colors.neutral[60],
           border: colors.primary[40],
         },
       },
@@ -120,7 +125,7 @@ export default {
         hover: {
           text: colors.primary[30],
           icon: colors.primary[30],
-          background: 'transparent',
+          background: colors.neutral['60'],
           border: 'transparent',
         },
         active: {
@@ -129,10 +134,15 @@ export default {
           background: 'transparent',
           border: 'transparent',
         },
-        focus: { background: '', text: '', icon: '', border: '' },
+        focus: {
+          text: '',
+          icon: '',
+          background: colors.primary['70'],
+          border: colors.primary[40],
+        },
         disabled: {
-          text: colors.primary[80],
-          icon: colors.primary[80],
+          text: colors.neutral[80],
+          icon: colors.neutral[80],
           background: 'transparent',
           border: 'transparent',
         },
diff --git a/packages/theme/src/light/theme.ts b/packages/theme/src/light/theme.ts
index 3d35ab95..49124937 100644
--- a/packages/theme/src/light/theme.ts
+++ b/packages/theme/src/light/theme.ts
@@ -70,7 +70,12 @@ export default {
           background: colors.primary[60],
           border: colors.primary[60],
         },
-        focus: { background: '', text: '', icon: '', border: '' },
+        focus: {
+          background: colors.primary[60],
+          text: '',
+          icon: '',
+          border: colors.primary[40],
+        },
         disabled: {
           text: colors.primary[10],
           icon: colors.primary[10],
@@ -95,9 +100,14 @@ export default {
           text: colors.primary.primary,
           icon: colors.primary.primary,
           background: colors.neutral['60'],
-          border: colors.neutral['50'],
+          border: colors.neutral['40'],
+        },
+        focus: {
+          background: colors.neutral['60'],
+          text: '',
+          icon: '',
+          border: colors.primary.primary,
         },
-        focus: { background: '', text: '', icon: '', border: '' },
         disabled: {
           text: colors.primary[10],
           icon: colors.primary[10],
@@ -115,7 +125,7 @@ export default {
         hover: {
           text: colors.primary[50],
           icon: colors.primary[50],
-          background: 'transparent',
+          background: colors.neutral[60],
           border: 'transparent',
         },
         active: {
@@ -124,10 +134,15 @@ export default {
           background: 'transparent',
           border: 'transparent',
         },
-        focus: { background: '', text: '', icon: '', border: '' },
+        focus: {
+          text: '',
+          icon: '',
+          background: colors.primary[10],
+          border: colors.primary[40],
+        },
         disabled: {
-          text: colors.primary[10],
-          icon: colors.primary[10],
+          text: colors.neutral[80],
+          icon: colors.neutral[80],
           background: 'transparent',
           border: 'transparent',
         },
diff --git a/packages/theme/src/neutral.ts b/packages/theme/src/neutral.ts
index 22301621..d24ace98 100644
--- a/packages/theme/src/neutral.ts
+++ b/packages/theme/src/neutral.ts
@@ -12,4 +12,5 @@ export const neutral = {
   70: '#AEB6CE',
   60: '#E8E6FF',
   50: '#D1CDFF',
+  40: '#BCB6FF',
 } as const;
diff --git a/packages/ui/src/buttons/Button/__tests__/__snapshots__/Button.spec.tsx.snap b/packages/ui/src/buttons/Button/__tests__/__snapshots__/Button.spec.tsx.snap
index 02bb4dad..b3bab312 100644
--- a/packages/ui/src/buttons/Button/__tests__/__snapshots__/Button.spec.tsx.snap
+++ b/packages/ui/src/buttons/Button/__tests__/__snapshots__/Button.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button applies the correct styles for lg size 1`] = `
 <button
   aria-labelledby=":r6:"
-  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-primary-default-background)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-primary-default-background)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-primary-default-background)] gap-[8px] height-[52px] padding-horizontal-[var(--space-lg)] hover:background-color-[var(--components--action-primary-hover-background)] hover:border-color-[var(--components--action-primary-hover-background)] active:background-color-[var(--components--action-primary-active-background)] active:border-color-[var(--components--action-primary-active-background)]"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-primary-focus-border)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-primary-default-background)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-primary-default-background)] gap-[8px] height-[52px] padding-horizontal-[var(--space-lg)] hover:background-color-[var(--components--action-primary-hover-background)] hover:border-color-[var(--components--action-primary-hover-background)] active:background-color-[var(--components--action-primary-active-background)] active:border-color-[var(--components--action-primary-active-background)]"
   role="button"
   tabindex="0"
   type="button"
@@ -15,7 +15,7 @@ exports[`Button applies the correct styles for lg size 1`] = `
 exports[`Button applies the correct styles for primary variant 1`] = `
 <button
   aria-labelledby=":r4:"
-  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-primary-default-background)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-primary-default-background)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-primary-default-background)] gap-[8px] height-[44px] padding-horizontal-[var(--space-md)] hover:background-color-[var(--components--action-primary-hover-background)] hover:border-color-[var(--components--action-primary-hover-background)] active:background-color-[var(--components--action-primary-active-background)] active:border-color-[var(--components--action-primary-active-background)]"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-primary-focus-border)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-primary-default-background)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-primary-default-background)] gap-[8px] height-[44px] padding-horizontal-[var(--space-md)] hover:background-color-[var(--components--action-primary-hover-background)] hover:border-color-[var(--components--action-primary-hover-background)] active:background-color-[var(--components--action-primary-active-background)] active:border-color-[var(--components--action-primary-active-background)]"
   role="button"
   tabindex="0"
   type="button"
@@ -27,7 +27,7 @@ exports[`Button applies the correct styles for primary variant 1`] = `
 exports[`Button applies the correct styles for secondary variant 1`] = `
 <button
   aria-labelledby=":r5:"
-  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-secondary-default-border)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-secondary-default-border)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-secondary-default-background)] gap-[8px] height-[44px] padding-horizontal-[var(--space-md)] hover:border-color-[var(--components--action-secondary-hover-border)] hover:background-color-[var(--components--action-secondary-hover-background)] active:border-color-[var(--components--action-secondary-active-border)] active:background-color-[var(--components--action-secondary-active-background)]"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-secondary-focus-border)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-secondary-default-border)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-secondary-default-background)] gap-[8px] height-[44px] padding-horizontal-[var(--space-md)] hover:border-color-[var(--components--action-secondary-hover-border)] hover:background-color-[var(--components--action-secondary-hover-background)] active:border-color-[var(--components--action-secondary-active-border)] active:background-color-[var(--components--action-secondary-active-background)]"
   role="button"
   tabindex="0"
   type="button"
@@ -39,7 +39,7 @@ exports[`Button applies the correct styles for secondary variant 1`] = `
 exports[`Button applies the correct styles for sm size 1`] = `
 <button
   aria-labelledby=":r7:"
-  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-primary-default-background)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-primary-default-background)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-primary-default-background)] gap-[8px] height-[32px] padding-horizontal-[var(--space-xs)] hover:background-color-[var(--components--action-primary-hover-background)] hover:border-color-[var(--components--action-primary-hover-background)] active:background-color-[var(--components--action-primary-active-background)] active:border-color-[var(--components--action-primary-active-background)]"
+  class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73 disabled:opacity-[0.5] box-sizing-[border-box] focus-visible:outline-width-[2px] focus-visible:outline-offset-[2px] focus-visible:outline-style-[solid] focus-visible:outline-color-[var(--components--action-primary-focus-border)] display-[flex] border-radius-[7px] border-width-[2px] border-style-[solid] border-color-[var(--components--action-primary-default-background)] flex-direction-[row] align-items-[center] justify-content-[center] background-color-[var(--components--action-primary-default-background)] gap-[8px] height-[32px] padding-horizontal-[var(--space-xs)] hover:background-color-[var(--components--action-primary-hover-background)] hover:border-color-[var(--components--action-primary-hover-background)] active:background-color-[var(--components--action-primary-active-background)] active:border-color-[var(--components--action-primary-active-background)]"
   role="button"
   tabindex="0"
   type="button"
diff --git a/packages/ui/src/buttons/Button/styles.ts b/packages/ui/src/buttons/Button/styles.ts
index a2e98b3b..69e0dd7e 100644
--- a/packages/ui/src/buttons/Button/styles.ts
+++ b/packages/ui/src/buttons/Button/styles.ts
@@ -60,7 +60,7 @@ export const buttonPrimaryStyles = createStyles(
         },
         'web': {
           ':focus-visible': {
-            outlineColor: Action.primary.default.background,
+            outlineColor: Action.primary.focus.border,
           },
         },
       },
@@ -88,7 +88,7 @@ export const buttonSecondaryStyles = createStyles(
         },
         'web': {
           ':focus-visible': {
-            outlineColor: Action.secondary.default.border,
+            outlineColor: Action.secondary.focus.border,
           },
         },
       },
@@ -116,7 +116,8 @@ export const buttonTertiaryStyles = createStyles(
         },
         'web': {
           ':focus-visible': {
-            outlineColor: Action.tertiary.default.text,
+            outlineColor: Action.tertiary.focus.border,
+            backgroundColor: Action.tertiary.focus.background,
           },
         },
       },