diff --git a/apps/web/src/design-system/button/Button.styles.ts b/apps/web/src/design-system/button/Button.styles.ts
index 1be75f98e6b..14be66bc1d2 100644
--- a/apps/web/src/design-system/button/Button.styles.ts
+++ b/apps/web/src/design-system/button/Button.styles.ts
@@ -3,140 +3,103 @@ import { colors, shadows } from '../config';
 
 const getGradient = (color) => `linear-gradient(0deg, ${color} 0%, ${color} 100%)`;
 
-const getLabelStyles = (disabled: boolean, variant?: string): any => {
-  if (disabled && variant === 'subtle') {
-    return {
-      gap: '8px',
-    };
-  }
-
-  if (disabled) {
-    return {};
-  }
-
-  return {
-    backgroundImage: colors.horizontal,
-    backgroundClip: 'text',
-    fontWeight: 'bold',
-    gap: '8px',
-  };
-};
+const getOutlineStyles = (theme, dark) => ({
+  border: '1px solid transparent',
+  background: `${dark ? getGradient(colors.B17) : getGradient(colors.white)} padding-box, ${
+    colors.horizontal
+  } border-box`,
+  color: dark ? theme.white : 'transparent',
+  boxShadow: dark ? shadows.dark : shadows.medium,
+});
 
-export const getOutlineStyles = (theme) => {
-  const dark = theme.colorScheme === 'dark';
-
-  return {
-    border: '1px solid transparent',
-    background: `${dark ? getGradient(colors.B17) : getGradient(colors.white)} padding-box, ${
-      colors.horizontal
-    } border-box`,
-    color: dark ? theme.white : 'transparent',
-    boxShadow: dark ? shadows.dark : shadows.medium,
-  };
-};
-
-export const getSubtleStyles = (theme) => {
-  const dark = theme.colorScheme === 'dark';
-
-  return {
-    border: 'none',
-    padding: '0 8px',
+const getSubtleStyles = (theme, dark) => ({
+  border: 'none',
+  padding: '0 8px',
+  background: 'transparent',
+  color: dark ? theme.white : 'transparent',
+  boxShadow: 'none',
+  '.mantine-Button-label': {
+    'div[data-square]': {
+      color: colors.white,
+      backgroundImage: colors.horizontal,
+      backgroundColor: 'transparent',
+    },
+  },
+  '&:hover:not(:disabled), &:focus:not(:disabled)': {
     background: 'transparent',
     color: dark ? theme.white : 'transparent',
-    boxShadow: 'none',
+    filter: dark ? 'none' : 'brightness(0.9)',
     '.mantine-Button-label': {
       'div[data-square]': {
-        color: colors.white,
-        backgroundImage: colors.horizontal,
-        backgroundColor: 'transparent',
+        color: dark ? colors.gradientMiddle : theme.white,
+        backgroundColor: dark ? theme.white : 'transparent',
+        backgroundImage: dark ? 'none' : colors.horizontal,
       },
-    },
-    '&:hover:not(:disabled)': {
-      background: 'transparent',
-      color: dark ? theme.white : 'transparent',
-      filter: dark ? 'none' : 'brightness(0.9)',
-      '.mantine-Button-label': {
-        'div[data-square]': {
-          color: dark ? colors.gradientMiddle : theme.white,
-          backgroundColor: dark ? theme.white : 'transparent',
-          backgroundImage: dark ? 'none' : colors.horizontal,
-        },
-        'div:last-of-type': {
-          backgroundImage: 'none !important',
-          backgroundColor: dark ? theme.white : 'transparent',
-          backgroundClip: 'none !important',
-          color: 'transparent',
-          '-webkit-text-fill-color': 'initial !important',
-        },
+      'div:last-of-type': {
+        backgroundImage: 'none !important',
+        backgroundColor: dark ? theme.white : 'transparent',
+        backgroundClip: 'none !important',
+        color: 'transparent',
+        '-webkit-text-fill-color': 'initial !important',
       },
     },
-    '&:focus:not(:disabled)': {
-      background: 'transparent',
-      color: dark ? theme.white : 'transparent',
-      filter: dark ? 'none' : 'brightness(0.9)',
-      '.mantine-Button-label': {
-        'div[data-square]': {
-          color: dark ? colors.gradientMiddle : theme.white,
-          backgroundColor: dark ? theme.white : 'transparent',
-          backgroundImage: dark ? 'none' : colors.horizontal,
-        },
-        'div:last-of-type': {
-          backgroundImage: 'none !important',
-          backgroundColor: dark ? theme.white : 'transparent',
-          backgroundClip: 'none !important',
-          color: 'transparent',
-          '-webkit-text-fill-color': 'initial !important',
-        },
+  },
+  '&:disabled': {
+    opacity: 0.4,
+    background: 'transparent',
+  },
+});
+
+const getPulseStyles = () => ({
+  '&:not(:disabled):not([data-loading])': {
+    animation: 'pulse-animation 2s infinite',
+    '@keyframes pulse-animation': {
+      '0%': {
+        boxShadow: '0 0 0 0 rgba(255, 82, 82, 0.7)',
+      },
+      '70%': {
+        boxShadow: '0 0 0 10px rgba(255, 82, 82, 0)',
+      },
+      '100%': {
+        boxShadow: '0 0 0 0 rgba(255, 82, 82, 0)',
       },
     },
-    '&:disabled': {
-      opacity: 0.4,
-      background: 'transparent',
-    },
-  };
-};
+  },
+});
+
+const getLabelStyles = (disabled, variant, dark) => {
+  if (disabled) {
+    return {};
+  }
 
-export const getPulseStyles = () => {
   return {
-    [`&:not(:disabled):not([data-loading])`]: {
-      animation: 'pulse-animation 2s infinite',
-      '@keyframes pulse-animation': {
-        '0%': {
-          boxShadow: '0 0 0 0 rgba(255, 82, 82, 0.7)',
-        },
-        '70%': {
-          boxShadow: '0 0 0 10px rgba(255, 82, 82, 0)',
-        },
-        '100%': {
-          boxShadow: '0 0 0 0 rgba(255, 82, 82, 0)',
-        },
-      },
-    },
+    backgroundImage: colors.horizontal,
+    backgroundClip: 'text',
+    fontWeight: 'bold',
+    gap: '8px',
   };
 };
 
 export default createStyles(
-  (
-    theme: MantineTheme,
-    { disabled, inherit, variant, pulse }: { disabled: boolean; inherit: boolean; variant?: string; pulse?: boolean },
-    getRef
-  ) => {
+  (theme: MantineTheme, { disabled, inherit, variant, pulse }) => {
+    const dark = theme.colorScheme === 'dark';
     const loading = getRef('loading');
     let overrides = {};
+
     if (variant === 'outline') {
-      overrides = getOutlineStyles(theme);
+      overrides = getOutlineStyles(theme, dark);
     }
 
     if (variant === 'subtle') {
-      overrides = getSubtleStyles(theme);
+      overrides = getSubtleStyles(theme, dark);
     }
 
     if (pulse) {
-      overrides = Object.assign({}, overrides, getPulseStyles());
+      overrides = { ...overrides, ...getPulseStyles() };
     }
 
     return {
-      label: getLabelStyles(disabled, variant),
+      label: getLabelStyles(disabled, variant, dark),
       root: {
         backgroundImage: colors.horizontal,
         width: inherit ? '100%' : '',