diff --git a/packages/components/src/Button/Button.style.tsx b/packages/components/src/Button/Button.style.tsx
index 9a3f866fa..db4d0d6db 100644
--- a/packages/components/src/Button/Button.style.tsx
+++ b/packages/components/src/Button/Button.style.tsx
@@ -1,8 +1,6 @@
-import styled, { css } from 'styled-components';
-import { ArrowTopRightOnSquare } from '@interlay/icons';
-import { theme } from '@interlay/theme';
 import { ButtonSizes, ButtonVariants } from '@interlay/themev2';
 import { ButtonColors } from '@interlay/themev2/src/components';
+import styled, { css } from 'styled-components';
 
 type StyledButtonProps = {
   $fullWidth?: boolean;
@@ -16,61 +14,44 @@ const StyledButton = styled.button<StyledButtonProps>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
   width: ${(props) => (props.$fullWidth ? '100%' : 'auto')};
   background: none;
-  outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
+  outline: transparent solid 2px;
   border: 0px solid;
 
-  border-radius: ${({ theme }) => theme.button.rounded};
-  font-weight: ${({ theme }) => theme.button.fontWeight};
+  text-decoration: none;
+  appearance: none;
+  user-select: none;
 
-  ${({ theme, $size }) => css(theme.button.size[$size])}
-  ${({ theme, $variant, $color }) => {
-    const { bg, color, border, hover, focus, disabled, active } = theme.button.variant[$variant].color[$color];
+  ${({ theme, $size, $variant, $color, $isFocusVisible }) => {
+    const { active, disabled, hover, focus, focusVisible } = theme.button.variant[$variant].color[$color];
 
     return css`
-      background-color: ${bg};
-      color: ${color};
-      border: ${border};
+      ${theme.button.base}
+      ${theme.button.size[$size]}
+      ${theme.button.variant[$variant].color[$color].base}
+      ${$isFocusVisible && focusVisible}
 
       &:hover:not([disabled]) {
-        background-color: ${hover.bg};
+        ${hover}
       }
 
       &:active:not([disabled]) {
-        background-color: ${active.bg};
+        ${active}
       }
 
       &:focus:not([disabled]) {
-        box-shadow: ${focus?.boxShadow};
+        ${focus}
       }
 
       &[aria-disabled='true'],
       &[disabled] {
         pointer-events: none;
         cursor: not-allowed;
-        color: ${disabled.color};
-        background-color: ${disabled.bg};
-        border: ${disabled.border};
+        ${disabled}
       }
     `;
   }}
-
-  transition: ${({ theme }) => theme.transition('common', 'normal', 'easeIn')}
-`;
-
-const LoadingWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  margin-right: ${theme.spacing.spacing2};
-`;
-
-const StyledIcon = styled(ArrowTopRightOnSquare)`
-  margin-left: ${theme.spacing.spacing2};
-  width: 1.2em;
-  height: 1.2em;
-  color: inherit;
 `;
 
-export { LoadingWrapper, StyledButton, StyledIcon };
+export { StyledButton };
diff --git a/packages/core/themeV2/src/components/button.ts b/packages/core/themeV2/src/components/button.ts
index 302ade4f3..3a78683f5 100644
--- a/packages/core/themeV2/src/components/button.ts
+++ b/packages/core/themeV2/src/components/button.ts
@@ -1,44 +1,27 @@
-type ButtonSizes = 's' | 'md' | 'lg' | 'xl' | '2xl';
+import { Styles } from 'styled-components/dist/types';
 
-type ButtonSizeParams = {
-  padding: string;
-  fontSize: string;
-  lineHeight: string;
-  height: string;
-};
+type ButtonSizes = 's' | 'md' | 'lg' | 'xl' | '2xl';
 
 type ButtonColors = 'default' | 'primary';
 
 type ButtonColorsParams = {
-  color: string;
-  bg: string;
-  border?: string;
-  hover: {
-    bg: string;
-  };
-  active: {
-    bg: string;
-  };
-  focus?: {
-    boxShadow: string;
-  };
-  disabled: {
-    color: string;
-    bg?: string;
-    border?: string;
-  };
+  base: Styles<object>;
+  hover: Styles<object>;
+  active: Styles<object>;
+  focus?: Styles<object>;
+  focusVisible?: Styles<object>;
+  disabled: Styles<object>;
 };
 
-type ButtonVariants = 'solid' | 'outline' | 'ghost';
-
 type ButtonVariantParams = {
   color: Record<ButtonColors, ButtonColorsParams>;
 };
 
+type ButtonVariants = 'solid' | 'outline' | 'ghost';
+
 type ButtonTheme = {
-  rounded: string;
-  fontWeight: number;
-  size: Record<ButtonSizes, ButtonSizeParams>;
+  base: Styles<object>;
+  size: Record<ButtonSizes, Styles<object>>;
   variant: Record<ButtonVariants, ButtonVariantParams>;
 };
 
diff --git a/packages/core/themeV2/src/core/colors.ts b/packages/core/themeV2/src/core/colors.ts
index c73aab6ce..6fb5e9b3c 100644
--- a/packages/core/themeV2/src/core/colors.ts
+++ b/packages/core/themeV2/src/core/colors.ts
@@ -1,21 +1,15 @@
-type Color = {
-  50: string;
-  75: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-};
+type ColorHue = keyof Colors;
+
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 type Colors = {
   light: string;
   dark: string;
-  primary: Color;
+  primary: Record<ColorShade, string>;
   // secondary: Color;
-  grey: Color;
+  grey: Record<ColorShade, string>;
   // success: Color;
   // error: Color;
 };
 
-export type { Colors };
+export type { Colors, ColorHue, ColorShade };
diff --git a/packages/core/themeV2/src/core/transition.ts b/packages/core/themeV2/src/core/transition.ts
index d43adb838..eab340588 100644
--- a/packages/core/themeV2/src/core/transition.ts
+++ b/packages/core/themeV2/src/core/transition.ts
@@ -1,3 +1,5 @@
+import { Styles } from 'styled-components/dist/types';
+
 type TransitionProperty = keyof typeof transitionProprety;
 
 const transitionProprety = {
@@ -32,8 +34,11 @@ const transition = (
   property: TransitionProperty,
   duration: TransitionDuration,
   timingFunction?: TransitionTimingFunction
-) =>
-  `${transitionProprety[property]} ${transitionDuration[duration]} ${timingFunction ? transitionTimingFunction[timingFunction] : ''}`;
+): Styles<object> => ({
+  transitionProperty: transitionProprety[property],
+  transitionDuration: transitionDuration[duration],
+  transitionTimingFunction: timingFunction && transitionTimingFunction[timingFunction]
+});
 
 export { transition };
 export type { TransitionProperty, TransitionDuration, TransitionTimingFunction };
diff --git a/packages/core/themeV2/src/core/typography.ts b/packages/core/themeV2/src/core/typography.ts
index 6a0627f4b..7a87199c0 100644
--- a/packages/core/themeV2/src/core/typography.ts
+++ b/packages/core/themeV2/src/core/typography.ts
@@ -1,57 +1,57 @@
-import { css } from 'styled-components';
+import { Styles } from 'styled-components/dist/types';
 
 import { style } from '../utils';
 
 import { fontSize } from './font-size';
 import { lineHeight } from './line-height';
 
-type Typography = keyof typeof typographyBase;
+type Typography = 'xs' | 's' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
 
-const typographyBase = {
-  xs: css({
+const typographyBase: Record<Typography, Styles<object>> = {
+  xs: {
     fontSize: fontSize('xs', 'rem'),
     lineHeight: lineHeight('xs', 'rem')
-  }),
-  s: css({
+  },
+  s: {
     fontSize: fontSize('s', 'rem'),
     lineHeight: lineHeight('s', 'rem')
-  }),
-  md: css({
+  },
+  md: {
     fontSize: fontSize('md', 'rem'),
     lineHeight: lineHeight('md', 'rem')
-  }),
-  lg: css({
+  },
+  lg: {
     fontSize: fontSize('lg', 'rem'),
     lineHeight: lineHeight('lg', 'rem')
-  }),
-  xl: css({
+  },
+  xl: {
     fontSize: fontSize('xl', 'rem'),
     lineHeight: lineHeight('xl', 'rem')
-  }),
-  '2xl': css({
+  },
+  '2xl': {
     fontSize: fontSize('2xl', 'rem'),
     lineHeight: lineHeight('2xl', 'rem')
-  }),
-  '3xl': css({
+  },
+  '3xl': {
     fontSize: fontSize('3xl', 'rem'),
     lineHeight: lineHeight('3xl', 'rem')
-  }),
-  '4xl': css({
+  },
+  '4xl': {
     fontSize: fontSize('4xl', 'rem'),
     lineHeight: lineHeight('4xl', 'rem')
-  }),
-  '5xl': css({
+  },
+  '5xl': {
     fontSize: fontSize('5xl', 'rem'),
     lineHeight: lineHeight('5xl', 'rem')
-  }),
-  '6xl': css({
+  },
+  '6xl': {
     fontSize: fontSize('6xl', 'rem'),
     lineHeight: lineHeight('6xl', 'rem')
-  }),
-  '7xl': css({
+  },
+  '7xl': {
     fontSize: fontSize('7xl', 'rem'),
     lineHeight: lineHeight('7xl', 'rem')
-  })
+  }
 };
 
 const typography = style(typographyBase);
diff --git a/packages/core/themeV2/src/themes/bob/button.ts b/packages/core/themeV2/src/themes/bob/button.ts
index 32cf16710..8ead54f70 100644
--- a/packages/core/themeV2/src/themes/bob/button.ts
+++ b/packages/core/themeV2/src/themes/bob/button.ts
@@ -1,12 +1,15 @@
-import { fontSize, fontWeight, lineHeight, rounded, spacing } from '../../core';
+import { fontSize, fontWeight, lineHeight, rounded, spacing, transition } from '../../core';
 import { ButtonTheme } from '../../components';
 import { rem } from '../../utils';
 
 import { colors } from './colors';
 
 const button: ButtonTheme = {
-  rounded: rounded('md'),
-  fontWeight: fontWeight('semibold'),
+  base: {
+    borderRadius: rounded('md'),
+    fontWeight: fontWeight('semibold'),
+    ...transition('common', 'normal')
+  },
   size: {
     s: {
       height: rem(36),
@@ -18,7 +21,6 @@ const button: ButtonTheme = {
       height: spacing('5xl'),
       fontSize: fontSize('s'),
       lineHeight: lineHeight('s'),
-      // FIXME:
       padding: `0 ${spacing('lg')}`
     },
     lg: {
@@ -44,37 +46,41 @@ const button: ButtonTheme = {
     solid: {
       color: {
         default: {
-          bg: colors.grey[200],
-          color: colors.light,
+          base: {
+            backgroundColor: colors('grey', 200),
+            color: colors('light')
+          },
           hover: {
-            bg: colors.grey[100]
+            backgroundColor: colors('grey', 100)
           },
           active: {
-            bg: colors.grey[100]
+            backgroundColor: colors('grey', 100)
           },
           focus: {
             boxShadow: '0px 0px 0px 4px #4040403D, 0px 1px 2px 0px #1018280D'
           },
           disabled: {
-            color: colors.grey[100],
-            bg: colors.grey[200]
+            color: colors('grey', 100),
+            backgroundColor: colors('grey', 200)
           }
         },
         primary: {
-          bg: colors.primary[300],
-          color: colors.light,
+          base: {
+            backgroundColor: colors('primary', 300),
+            color: colors('light')
+          },
           hover: {
-            bg: colors.primary[200]
+            backgroundColor: colors('primary', 200)
           },
           active: {
-            bg: colors.primary[200]
+            backgroundColor: colors('primary', 200)
           },
           focus: {
             boxShadow: '0px 0px 0px 4px #FA45163D, 0px 1px 2px 0px #1018280D'
           },
           disabled: {
-            color: colors.grey[100],
-            bg: colors.grey[200]
+            color: colors('grey', 100),
+            backgroundColor: colors('grey', 200)
           }
         }
       }
@@ -82,39 +88,41 @@ const button: ButtonTheme = {
     outline: {
       color: {
         default: {
-          bg: 'none',
-          border: `1px solid ${colors.grey[200]}`,
-          color: colors.light,
+          base: {
+            border: `1px solid ${colors('grey', 200)}`,
+            color: colors('light')
+          },
           hover: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
           active: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
           focus: {
             boxShadow: '0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D'
           },
           disabled: {
-            color: colors.grey[200],
-            border: `1px solid ${colors.grey[100]}`
+            color: colors('grey', 200),
+            border: `1px solid ${colors('grey', 100)}`
           }
         },
         primary: {
-          bg: 'none',
-          border: `1px solid ${colors.primary[300]}`,
-          color: colors.primary[300],
+          base: {
+            border: `1px solid ${colors('primary', 300)}`,
+            color: colors('primary', 300)
+          },
           hover: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
           active: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
           focus: {
             boxShadow: '0px 0px 0px 4px #D92D2040, 0px 1px 2px 0px #1018280D'
           },
           disabled: {
-            color: colors.grey[200],
-            border: `1px solid ${colors.grey[100]}`
+            color: colors('grey', 200),
+            border: `1px solid ${colors('grey', 100)}`
           }
         }
       }
@@ -122,32 +130,37 @@ const button: ButtonTheme = {
     ghost: {
       color: {
         default: {
-          bg: 'none',
-          color: colors.light,
+          base: {
+            color: colors('light')
+          },
           hover: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
           active: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
-          focus: {
+          focusVisible: {
             boxShadow: '0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D'
           },
           disabled: {
-            color: colors.grey[200]
+            color: colors('grey', 200)
           }
         },
         primary: {
-          bg: 'none',
-          color: colors.primary[300],
+          base: {
+            color: colors('primary', 300)
+          },
           hover: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
           },
           active: {
-            bg: colors.grey[300]
+            backgroundColor: colors('grey', 300)
+          },
+          focusVisible: {
+            boxShadow: '0px 0px 0px 4px #D92D2040, 0px 1px 2px 0px #1018280D'
           },
           disabled: {
-            color: colors.grey[200]
+            color: colors('grey', 200)
           }
         }
       }
diff --git a/packages/core/themeV2/src/themes/bob/colors.ts b/packages/core/themeV2/src/themes/bob/colors.ts
index 473cb8588..772425fec 100644
--- a/packages/core/themeV2/src/themes/bob/colors.ts
+++ b/packages/core/themeV2/src/themes/bob/colors.ts
@@ -1,6 +1,6 @@
-import { Colors } from '../../core';
+import { ColorHue, ColorShade, Colors } from '../../core';
 
-const colors: Colors = {
+const colorsBase: Colors = {
   light: '#ffffff',
   dark: '#030303',
   primary: {
@@ -23,4 +23,12 @@ const colors: Colors = {
   }
 };
 
+const colors = (hue: ColorHue, shade: ColorShade = 500) => {
+  if (hue === 'light' || hue === 'dark') {
+    return colorsBase[hue];
+  }
+
+  return colorsBase[hue][shade];
+};
+
 export { colors };