diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index edb124dbb..dcdf21ff6 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -4,8 +4,8 @@ import React from 'react';
 
 import { InterlayUIProvider } from '../packages/core/system/src';
 import { CSSReset } from '../packages/components/src';
-import '../packages/core/theme/src/css/theme.interlay.css';
-import { bobTheme } from '../packages/core/themeV2/src';
+import '../packages/core/theme/src/temp/css/theme.interlay.css';
+import { bobTheme } from '../packages/core/theme/src';
 import './style.css';
 
 const preview: Preview = {
diff --git a/README.md b/README.md
index 5bb3efb40..c1c97c773 100644
--- a/README.md
+++ b/README.md
@@ -60,10 +60,10 @@ function App({ children }) {
 2. Now you can start using components like so!:
 
 ```jsx
-import { CTA } from '@interlay/ui';
+import { Button } from '@interlay/ui';
 
 function Example() {
-  return <CTA>I am using Interlay UI</CTA>;
+  return <Button>I am using Interlay UI</Button>;
 }
 ```
 
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index aa43fbb8e..dfc832a97 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -28,7 +28,7 @@
 
 ### Patch Changes
 
-- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA
+- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and Button
 
 - [#46](https://github.com/interlay/ui/pull/46) [`95c75c1968cda23b75ff5f7aaaa13d5c4cbe6c0e`](https://github.com/interlay/ui/commit/95c75c1968cda23b75ff5f7aaaa13d5c4cbe6c0e) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(components): Radio and RadioGroup
 
diff --git a/packages/components/README.md b/packages/components/README.md
index 3c22d30b2..038466168 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -60,10 +60,10 @@ function App({ children }) {
 2. Now you can start using components like so!:
 
 ```jsx
-import { CTA } from '@interlay/ui';
+import { Button } from '@interlay/ui';
 
 function Example() {
-  return <CTA>I am using Interlay UI</CTA>;
+  return <Button>I am using Interlay UI</Button>;
 }
 ```
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 6834a50ac..bfb9dd3f6 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -43,7 +43,7 @@
     "@interlay/icons": "workspace:*",
     "@interlay/system": "workspace:*",
     "@interlay/theme": "workspace:*",
-    "@interlay/themev2": "workspace:*",
+    "@interlay/theme": "workspace:*",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-aria/accordion": "3.0.0-alpha.20",
     "@react-aria/breadcrumbs": "^3.5.4",
diff --git a/packages/components/src/Accordion/Accordion.style.tsx b/packages/components/src/Accordion/Accordion.style.tsx
index ee1395f51..b9f81cce8 100644
--- a/packages/components/src/Accordion/Accordion.style.tsx
+++ b/packages/components/src/Accordion/Accordion.style.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { ChevronDown } from '@interlay/icons';
-import { AccordionVariants } from '@interlay/themev2';
+import { AccordionVariants } from '@interlay/theme';
 
 import { H3, Span } from '../Text';
 
diff --git a/packages/components/src/Accordion/Accordion.tsx b/packages/components/src/Accordion/Accordion.tsx
index 5472afbdf..ad39c7555 100644
--- a/packages/components/src/Accordion/Accordion.tsx
+++ b/packages/components/src/Accordion/Accordion.tsx
@@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils';
 import { useTreeState } from '@react-stately/tree';
 import { forwardRef, HTMLAttributes, Ref } from 'react';
 import { useDOMRef } from '@interlay/hooks';
-import { AccordionVariants } from '@interlay/themev2';
+import { AccordionVariants } from '@interlay/theme';
 
 import { AccordionItem } from './AccordionItem';
 import { StyledAccordion } from './Accordion.style';
diff --git a/packages/components/src/Accordion/AccordionItem.tsx b/packages/components/src/Accordion/AccordionItem.tsx
index 21a0877d4..9b338aa2c 100644
--- a/packages/components/src/Accordion/AccordionItem.tsx
+++ b/packages/components/src/Accordion/AccordionItem.tsx
@@ -4,7 +4,7 @@ import { mergeProps } from '@react-aria/utils';
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
 import { useRef } from 'react';
-import { AccordionVariants } from '@interlay/themev2';
+import { AccordionVariants } from '@interlay/theme';
 
 import {
   StyledAccordionItemButton,
diff --git a/packages/components/src/Alert/Alert.style.tsx b/packages/components/src/Alert/Alert.style.tsx
index 13a69a02d..038c5469f 100644
--- a/packages/components/src/Alert/Alert.style.tsx
+++ b/packages/components/src/Alert/Alert.style.tsx
@@ -1,6 +1,6 @@
 import { CheckCircle, InformationCircle, Warning } from '@interlay/icons';
 import styled, { css } from 'styled-components';
-import { AlertStatus } from '@interlay/themev2';
+import { AlertStatus } from '@interlay/theme';
 
 import { Flex } from '../Flex';
 
diff --git a/packages/components/src/Alert/Alert.tsx b/packages/components/src/Alert/Alert.tsx
index 30185a57b..9f0675a33 100644
--- a/packages/components/src/Alert/Alert.tsx
+++ b/packages/components/src/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { AlertStatus } from '@interlay/themev2';
+import { AlertStatus } from '@interlay/theme';
 import { ForwardRefExoticComponent } from 'react';
 
 import { FlexProps } from '../Flex';
diff --git a/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx b/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx
index 6cde82b38..215ff8b88 100644
--- a/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx
+++ b/packages/components/src/Breadcrumbs/BreadcrumbItem.tsx
@@ -32,7 +32,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre
 
   const commonProps: Pick<TextLinkProps, 'size' | 'color'> = {
     size: 's',
-    color: isCurrent ? 'secondary' : 'tertiary'
+    color: isCurrent ? 'light' : 'green-300'
   };
 
   return (
@@ -51,7 +51,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre
           {children}
         </StyledLinkBreadcrumb>
       )}
-      {isCurrent === false && <ChevronRight color='tertiary' size='xs' />}
+      {isCurrent === false && <ChevronRight color='green-300' size='xs' />}
     </Fragment>
   );
 };
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx b/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx
index 8f945bc63..48bd1ff1b 100644
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx
+++ b/packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { theme } from '@interlay/theme';
 
 import { Span } from '../Text';
 import { TextLink } from '../TextLink';
@@ -28,12 +27,12 @@ const StyledListItem = styled.li`
 `;
 
 const StyledSpanBreadcrumb = styled(Span)<StyledBreadcrumbProps>`
-  padding: 0 ${theme.spacing.spacing2};
+  padding: 0 ${({ theme }) => theme.spacing('s')};
   cursor: default;
 `;
 
 const StyledLinkBreadcrumb = styled(TextLink)<StyledBreadcrumbProps>`
-  padding: 0 ${theme.spacing.spacing2};
+  padding: 0 ${({ theme }) => theme.spacing('s')};
   text-decoration: none;
 `;
 
diff --git a/packages/components/src/Button/Button.style.tsx b/packages/components/src/Button/Button.style.tsx
index 049d6b49b..fde788348 100644
--- a/packages/components/src/Button/Button.style.tsx
+++ b/packages/components/src/Button/Button.style.tsx
@@ -1,5 +1,5 @@
-import { ButtonSizes, ButtonVariants } from '@interlay/themev2';
-import { ButtonColors } from '@interlay/themev2/src/components';
+import { ButtonSizes, ButtonVariants } from '@interlay/theme';
+import { ButtonColors } from '@interlay/theme/src/components';
 import styled, { css } from 'styled-components';
 
 import { UnstyledButton } from '../UnstyledButton';
diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
index 04564017c..e69ffa01e 100644
--- a/packages/components/src/Button/Button.tsx
+++ b/packages/components/src/Button/Button.tsx
@@ -3,7 +3,7 @@ import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { PressEvent } from '@react-types/shared';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/themev2';
+import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/theme';
 import { Slottable } from '@radix-ui/react-slot';
 
 import { Flex } from '../Flex';
diff --git a/packages/components/src/Button/__tests__/CTA.test.tsx b/packages/components/src/Button/__tests__/CTA.test.tsx
index ac084b549..a83c0750a 100644
--- a/packages/components/src/Button/__tests__/CTA.test.tsx
+++ b/packages/components/src/Button/__tests__/CTA.test.tsx
@@ -2,11 +2,11 @@ import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { testA11y } from '@interlay/test-utils';
 
-import { CTA } from '..';
+import { Button } from '..';
 
-describe('CTA', () => {
+describe('Button', () => {
   it('should render correctly', () => {
-    const wrapper = render(<CTA>Button</CTA>);
+    const wrapper = render(<Button>Button</Button>);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
@@ -14,12 +14,12 @@ describe('CTA', () => {
   it('ref should be forwarded', () => {
     const ref = createRef<HTMLButtonElement>();
 
-    render(<CTA ref={ref}>Button</CTA>);
+    render(<Button ref={ref}>Button</Button>);
 
     expect(ref.current).not.toBeNull();
   });
 
   it('should pass a11y', async () => {
-    await testA11y(<CTA>Button</CTA>);
+    await testA11y(<Button>Button</Button>);
   });
 });
diff --git a/packages/components/src/CTA/BaseCTA.tsx b/packages/components/src/CTA/BaseCTA.tsx
deleted file mode 100644
index 566e7b5ef..000000000
--- a/packages/components/src/CTA/BaseCTA.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import { CTASizes, CTAVariants } from '../../../core/theme/src';
-import { ElementTypeProp } from '../utils/types';
-
-import { OutlinedCTA, PrimaryCTA, SecondaryCTA, TextCTA } from './CTA.style';
-
-const ctaElements = {
-  primary: PrimaryCTA,
-  secondary: SecondaryCTA,
-  outlined: OutlinedCTA,
-  text: TextCTA
-};
-
-type Props = {
-  variant?: CTAVariants;
-  fullWidth?: boolean;
-  size?: CTASizes;
-  disabled?: boolean;
-  isFocusVisible?: boolean;
-};
-
-type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
-
-type BaseCTAProps = Props & NativeAttrs & ElementTypeProp;
-
-const BaseCTA = forwardRef<HTMLElement, BaseCTAProps>(
-  (
-    {
-      variant = 'primary',
-      fullWidth = false,
-      size = 'medium',
-      children,
-      disabled,
-      elementType,
-      isFocusVisible,
-      ...props
-    },
-    ref
-  ): JSX.Element => {
-    const StyledCTA = ctaElements[variant];
-
-    return (
-      <StyledCTA
-        ref={ref}
-        $fullWidth={fullWidth}
-        $isFocusVisible={isFocusVisible}
-        $size={size}
-        as={elementType}
-        disabled={disabled}
-        {...props}
-      >
-        {children}
-      </StyledCTA>
-    );
-  }
-);
-
-BaseCTA.displayName = 'BaseCTA';
-
-export { BaseCTA };
-export type { BaseCTAProps };
diff --git a/packages/components/src/CTA/CTA.stories.tsx b/packages/components/src/CTA/CTA.stories.tsx
deleted file mode 100644
index efa9babbf..000000000
--- a/packages/components/src/CTA/CTA.stories.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Flex } from '..';
-
-import { CTA, CTAProps } from '.';
-
-export default {
-  title: 'Buttons/CTA',
-  component: CTA,
-  parameters: {
-    layout: 'centered'
-  },
-  args: {
-    href: '#',
-    children: 'Button'
-  },
-  render: (args) => (
-    <Flex gap='md'>
-      <CTA {...args} />
-      <CTA {...args} disabled />
-    </Flex>
-  )
-} as Meta<typeof CTA>;
-
-export const Primary: StoryObj<CTAProps> = {
-  args: {
-    variant: 'primary'
-  }
-};
-
-export const Secondary: StoryObj<CTAProps> = {
-  args: {
-    variant: 'secondary'
-  }
-};
-
-export const Outlined: StoryObj<CTAProps> = {
-  args: {
-    variant: 'outlined'
-  }
-};
-
-export const Text: StoryObj<CTAProps> = {
-  args: {
-    variant: 'text'
-  }
-};
-
-export const XSmall: StoryObj<CTAProps> = {
-  args: {
-    size: 'x-small'
-  }
-};
-
-export const Small: StoryObj<CTAProps> = {
-  args: {
-    size: 'small'
-  }
-};
-
-export const Large: StoryObj<CTAProps> = {
-  args: {
-    size: 'large'
-  }
-};
-
-export const Loading: StoryObj<CTAProps> = {
-  render: (args) => (
-    <Flex direction='column' gap='md'>
-      <CTA {...args} />
-      <CTA variant='secondary' {...args} />
-      <CTA variant='outlined' {...args} />
-      <CTA variant='text' {...args} />
-      <CTA {...args} />
-    </Flex>
-  ),
-  args: {
-    loading: true
-  }
-};
diff --git a/packages/components/src/CTA/CTA.style.tsx b/packages/components/src/CTA/CTA.style.tsx
deleted file mode 100644
index 598b72cf2..000000000
--- a/packages/components/src/CTA/CTA.style.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import styled from 'styled-components';
-import { ArrowTopRightOnSquare } from '@interlay/icons';
-
-import { theme } from '../../../core/theme/src';
-import { CTASizes, CTAVariants } from '../../../core/theme/src';
-import { Spinner } from '../Spinner';
-
-interface StyledCTAProps {
-  $fullWidth: boolean;
-  $size: CTASizes;
-  $isFocusVisible?: boolean;
-}
-
-type StyledSpinnerProps = {
-  $variant: CTAVariants;
-};
-
-const BaseCTA = styled.button<StyledCTAProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: ${theme.cta.primary.text};
-  border: none;
-  border-radius: ${theme.rounded.md};
-  font-size: ${(props) => theme.cta[props.$size].text};
-  font-weight: ${theme.fontWeight.medium};
-  line-height: ${(props) => theme.cta[props.$size].lineHeight};
-  padding: ${(props) => `0 ${theme.cta[props.$size].padding}`};
-  height: ${({ $size }) => theme.cta[$size].height};
-  text-decoration: none;
-  width: ${(props) => (props.$fullWidth ? '100%' : 'auto')};
-  background: none;
-  // TODO: enforce outline
-  outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
-
-  &[aria-disabled='true'],
-  &[disabled] {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 50%;
-  }
-`;
-
-const PrimaryCTA = styled(BaseCTA)`
-  background-color: ${theme.cta.primary.bg};
-
-  &:hover:not([disabled]) {
-    background-color: ${theme.cta.primary.bgHover};
-  }
-`;
-
-const SecondaryCTA = styled(BaseCTA)`
-  background-color: ${theme.cta.secondary.bg};
-  color: ${theme.cta.secondary.text};
-`;
-
-const OutlinedCTA = styled(BaseCTA)`
-  color: ${theme.cta.outlined.text};
-  border: ${theme.cta.outlined.border};
-
-  &:hover:not([disabled]) {
-    background-color: ${theme.cta.outlined.bgHover};
-  }
-`;
-
-const TextCTA = styled(BaseCTA)`
-  color: ${theme.cta.text.text};
-
-  &:hover:not([disabled]) {
-    background-color: ${theme.cta.text.bgHover};
-  }
-`;
-
-const LoadingWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  margin-right: ${theme.spacing.spacing2};
-`;
-
-const StyledSpinner = styled(Spinner)<StyledSpinnerProps>`
-  border-top-color: ${({ $variant }) => theme.cta[$variant].text};
-  border-right-color: ${({ $variant }) => theme.cta[$variant].text};
-  border-bottom-color: ${({ $variant }) => theme.cta[$variant].text};
-  border-left-color: transparent;
-`;
-
-const StyledIcon = styled(ArrowTopRightOnSquare)`
-  margin-left: ${theme.spacing.spacing2};
-  width: 1.2em;
-  height: 1.2em;
-  color: inherit;
-`;
-
-export { LoadingWrapper, OutlinedCTA, PrimaryCTA, SecondaryCTA, StyledIcon, StyledSpinner, TextCTA };
-export type { StyledCTAProps };
diff --git a/packages/components/src/CTA/CTA.tsx b/packages/components/src/CTA/CTA.tsx
deleted file mode 100644
index b93e1b288..000000000
--- a/packages/components/src/CTA/CTA.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useButton } from '@react-aria/button';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { PressEvent } from '@react-types/shared';
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { useDOMRef } from '@interlay/hooks';
-
-import { CTASizes, IconSize } from '../../../core/theme/src';
-
-import { BaseCTA, BaseCTAProps } from './BaseCTA';
-import { LoadingWrapper, StyledSpinner } from './CTA.style';
-
-const loadingSizes: Record<CTASizes, IconSize> = {
-  'x-small': 'xs',
-  small: 'xs',
-  medium: 's',
-  large: 's'
-};
-
-type Props = {
-  fullWidth?: boolean;
-  size?: CTASizes;
-  loading?: boolean;
-  onPress?: (e: PressEvent) => void;
-};
-
-type NativeAttrs = Omit<ButtonHTMLAttributes<unknown>, keyof Props>;
-
-type InheritAttrs = Omit<BaseCTAProps, keyof Props & NativeAttrs>;
-
-type CTAProps = Props & InheritAttrs & NativeAttrs;
-
-/**
- * @deprecated use Button
- */
-const CTA = forwardRef<HTMLButtonElement, CTAProps>(
-  (
-    { children, loading, disabled, variant = 'primary', fullWidth, size = 'medium', onPress, onClick, ...props },
-    ref
-  ): JSX.Element => {
-    const domRef = useDOMRef(ref);
-
-    const isDisabled = disabled || loading;
-
-    const { buttonProps } = useButton({ isDisabled, onPress, ...props }, domRef);
-    const { focusProps, isFocusVisible } = useFocusRing(props);
-
-    return (
-      <BaseCTA
-        ref={domRef}
-        disabled={isDisabled}
-        fullWidth={fullWidth}
-        isFocusVisible={isFocusVisible}
-        size={size}
-        variant={variant}
-        {...mergeProps(props, buttonProps, focusProps, { onClick })}
-      >
-        {loading && (
-          <LoadingWrapper>
-            <StyledSpinner
-              $variant={variant}
-              aria-label='Loading...'
-              size={loadingSizes[size]}
-              thickness={size === 'large' ? 3 : 2}
-            />
-          </LoadingWrapper>
-        )}
-        {children}
-      </BaseCTA>
-    );
-  }
-);
-
-CTA.displayName = 'CTA';
-
-export { CTA };
-export type { CTAProps };
diff --git a/packages/components/src/CTA/CTALink.stories.tsx b/packages/components/src/CTA/CTALink.stories.tsx
deleted file mode 100644
index b1fec9fa4..000000000
--- a/packages/components/src/CTA/CTALink.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Flex } from '..';
-
-import { CTALink, CTALinkProps } from '.';
-
-export default {
-  title: 'Navigation/CTALink',
-  component: CTALink,
-  parameters: {
-    layout: 'centered'
-  },
-  args: {
-    href: '#',
-    children: 'Button'
-  },
-  render: (args) => (
-    <Flex gap='md'>
-      <CTALink {...args} />
-      <CTALink {...args} disabled />
-    </Flex>
-  )
-} as Meta<typeof CTALink>;
-
-export const Primary: StoryObj<CTALinkProps> = {
-  args: {
-    variant: 'primary'
-  }
-};
-
-export const Secondary: StoryObj<CTALinkProps> = {
-  args: {
-    variant: 'secondary'
-  }
-};
-
-export const Outlined: StoryObj<CTALinkProps> = {
-  args: {
-    variant: 'outlined'
-  }
-};
-
-export const Text: StoryObj<CTALinkProps> = {
-  args: {
-    variant: 'text'
-  }
-};
-
-export const XSmall: StoryObj<CTALinkProps> = {
-  args: {
-    size: 'x-small'
-  }
-};
-
-export const Small: StoryObj<CTALinkProps> = {
-  args: {
-    size: 'small'
-  }
-};
-
-export const Large: StoryObj<CTALinkProps> = {
-  args: {
-    size: 'large'
-  }
-};
diff --git a/packages/components/src/CTA/CTALink.tsx b/packages/components/src/CTA/CTALink.tsx
deleted file mode 100644
index 17cbebbde..000000000
--- a/packages/components/src/CTA/CTALink.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useFocusRing } from '@react-aria/focus';
-import { AriaLinkOptions, useLink } from '@react-aria/link';
-import { mergeProps } from '@react-aria/utils';
-import { AnchorHTMLAttributes, forwardRef } from 'react';
-import { useDOMRef } from '@interlay/hooks';
-
-import { BaseCTA, BaseCTAProps } from './BaseCTA';
-import { StyledIcon } from './CTA.style';
-
-type Props = {
-  external?: boolean;
-  disabled?: boolean;
-  icon?: boolean;
-};
-
-type AriaAttrs = Omit<AriaLinkOptions, keyof Props>;
-
-type InheritAttrs = Omit<BaseCTAProps, keyof Props & AriaAttrs>;
-
-type NativeAttrs = Omit<AnchorHTMLAttributes<unknown>, keyof Props & AriaAttrs & InheritAttrs>;
-
-type CTALinkProps = Props & AriaAttrs & InheritAttrs & NativeAttrs;
-
-/**
- * @deprecated use Button component with asChild prop
- */
-const CTALink = forwardRef<HTMLAnchorElement, CTALinkProps>(
-  ({ disabled, external, children, icon, ...props }, ref): JSX.Element => {
-    const linkRef = useDOMRef(ref);
-
-    const ariaProps = {
-      ...props,
-      isDisabled: disabled,
-      ...(external && { target: '_blank', rel: 'noreferrer' })
-    };
-
-    const { linkProps } = useLink(ariaProps, linkRef);
-    const { focusProps, isFocusVisible } = useFocusRing();
-
-    return (
-      <BaseCTA
-        ref={linkRef}
-        elementType='a'
-        isFocusVisible={isFocusVisible}
-        {...mergeProps(props, linkProps, focusProps, {
-          ...(external && { target: '_blank', rel: 'noreferrer' })
-        })}
-      >
-        {children}
-        {icon && <StyledIcon />}
-      </BaseCTA>
-    );
-  }
-);
-
-CTALink.displayName = 'CTALink';
-
-export { CTALink };
-export type { CTALinkProps };
diff --git a/packages/components/src/CTA/__tests__/CTA.test.tsx b/packages/components/src/CTA/__tests__/CTA.test.tsx
deleted file mode 100644
index ac084b549..000000000
--- a/packages/components/src/CTA/__tests__/CTA.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { render } from '@testing-library/react';
-import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
-
-import { CTA } from '..';
-
-describe('CTA', () => {
-  it('should render correctly', () => {
-    const wrapper = render(<CTA>Button</CTA>);
-
-    expect(() => wrapper.unmount()).not.toThrow();
-  });
-
-  it('ref should be forwarded', () => {
-    const ref = createRef<HTMLButtonElement>();
-
-    render(<CTA ref={ref}>Button</CTA>);
-
-    expect(ref.current).not.toBeNull();
-  });
-
-  it('should pass a11y', async () => {
-    await testA11y(<CTA>Button</CTA>);
-  });
-});
diff --git a/packages/components/src/CTA/index.tsx b/packages/components/src/CTA/index.tsx
deleted file mode 100644
index 01bda90ce..000000000
--- a/packages/components/src/CTA/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export type { BaseCTAProps } from './BaseCTA';
-export { BaseCTA } from './BaseCTA';
-export type { CTAProps } from './CTA';
-export { CTA } from './CTA';
-export type { CTALinkProps } from './CTALink';
-export { CTALink } from './CTALink';
diff --git a/packages/components/src/Card/Card.style.tsx b/packages/components/src/Card/Card.style.tsx
index 61ff4a230..c8308921a 100644
--- a/packages/components/src/Card/Card.style.tsx
+++ b/packages/components/src/Card/Card.style.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Color, Rounded, Spacing } from '@interlay/themev2';
+import { Color, Rounded, Spacing } from '@interlay/theme';
 
 import { Flex } from '../Flex';
 
diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx
index efe3f1bb7..859072189 100644
--- a/packages/components/src/Card/Card.tsx
+++ b/packages/components/src/Card/Card.tsx
@@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils';
 import { PressEvent } from '@react-types/shared';
 import { forwardRef } from 'react';
 import { useDOMRef } from '@interlay/hooks';
-import { Color, Rounded, Spacing } from '@interlay/themev2';
+import { Color, Rounded, Spacing } from '@interlay/theme';
 
 import { FlexProps } from '../Flex';
 
diff --git a/packages/components/src/Dialog/Dialog.style.tsx b/packages/components/src/Dialog/Dialog.style.tsx
index 94b701a69..9a6bc13a8 100644
--- a/packages/components/src/Dialog/Dialog.style.tsx
+++ b/packages/components/src/Dialog/Dialog.style.tsx
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize, Spacing } from '@interlay/theme';
 
 import { Flex } from '../Flex';
 import { H3 } from '../Text';
@@ -9,11 +9,16 @@ type StyledDialogProps = {
   $size: DialogSize;
 };
 
+type StyledDialogBodyProps = {
+  $maxHeight?: Spacing;
+};
+
 const StyledDialog = styled.section<StyledDialogProps>`
   display: flex;
   flex-direction: column;
   position: relative;
   outline: none;
+  overflow: hidden;
 
   width: 100%;
   ${({ theme, $size }) => css`
@@ -36,8 +41,9 @@ const StyledDialogHeader = styled(H3)`
   flex-shrink: 0;
 `;
 
-const StyledDialogBody = styled(Flex)`
+const StyledDialogBody = styled(Flex)<StyledDialogBodyProps>`
   ${({ theme }) => theme.dialog.body};
+  max-height: ${({ theme, $maxHeight }) => $maxHeight && theme.spacing($maxHeight)};
 
   flex: 1 1 auto;
 `;
diff --git a/packages/components/src/Dialog/Dialog.tsx b/packages/components/src/Dialog/Dialog.tsx
index e340288fc..da92d155f 100644
--- a/packages/components/src/Dialog/Dialog.tsx
+++ b/packages/components/src/Dialog/Dialog.tsx
@@ -4,7 +4,7 @@ import { PressEvent } from '@react-types/shared';
 import { forwardRef, ReactNode } from 'react';
 import { XMark } from '@interlay/icons';
 import { useDOMRef } from '@interlay/hooks';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize } from '@interlay/theme';
 
 import { ElementTypeProp } from '../utils/types';
 
diff --git a/packages/components/src/Dialog/DialogBody.tsx b/packages/components/src/Dialog/DialogBody.tsx
index 91612834e..c81291c5d 100644
--- a/packages/components/src/Dialog/DialogBody.tsx
+++ b/packages/components/src/Dialog/DialogBody.tsx
@@ -1,14 +1,19 @@
+import { Spacing } from '@interlay/theme';
+
 import { FlexProps } from '../Flex';
 
 import { StyledDialogBody } from './Dialog.style';
-import { useDialogContext } from './DialogContext';
 
-type DialogBodyProps = FlexProps;
+type Props = {
+  maxHeight?: Spacing;
+};
+
+type InheritAttrs = Omit<FlexProps, keyof Props>;
 
-const DialogBody = ({ direction = 'column', ...props }: DialogBodyProps): JSX.Element => {
-  const { size } = useDialogContext();
+type DialogBodyProps = Props & InheritAttrs;
 
-  return <StyledDialogBody {...props} $size={size} direction={direction} />;
+const DialogBody = ({ direction = 'column', maxHeight, ...props }: DialogBodyProps): JSX.Element => {
+  return <StyledDialogBody {...props} $maxHeight={maxHeight} direction={direction} />;
 };
 
 export { DialogBody };
diff --git a/packages/components/src/Dialog/DialogContext.tsx b/packages/components/src/Dialog/DialogContext.tsx
index e161f1a9c..f8b4897d7 100644
--- a/packages/components/src/Dialog/DialogContext.tsx
+++ b/packages/components/src/Dialog/DialogContext.tsx
@@ -1,6 +1,6 @@
 import { DOMAttributes } from '@react-types/shared';
 import React from 'react';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize } from '@interlay/theme';
 
 interface DialogConfig {
   titleProps?: DOMAttributes;
diff --git a/packages/components/src/Dialog/DialogFooter.tsx b/packages/components/src/Dialog/DialogFooter.tsx
index 0702a39c9..a0347b019 100644
--- a/packages/components/src/Dialog/DialogFooter.tsx
+++ b/packages/components/src/Dialog/DialogFooter.tsx
@@ -1,16 +1,13 @@
 import { FlexProps } from '../Flex';
 
 import { StyledDialogFooter } from './Dialog.style';
-import { useDialogContext } from './DialogContext';
 
 type InheritAttrs = FlexProps;
 
 type DialogFooterProps = InheritAttrs;
 
 const DialogFooter = (props: DialogFooterProps): JSX.Element => {
-  const { size } = useDialogContext();
-
-  return <StyledDialogFooter $size={size} {...props} />;
+  return <StyledDialogFooter {...props} />;
 };
 
 export { DialogFooter };
diff --git a/packages/components/src/Dialog/DialogHeader.tsx b/packages/components/src/Dialog/DialogHeader.tsx
index b64ca315b..fc3a56c3f 100644
--- a/packages/components/src/Dialog/DialogHeader.tsx
+++ b/packages/components/src/Dialog/DialogHeader.tsx
@@ -15,10 +15,10 @@ type InheritAttrs = Omit<TextProps, keyof Props>;
 type DialogHeaderProps = Props & InheritAttrs;
 
 const DialogHeader = ({ elementType, children, align = 'start', ...props }: DialogHeaderProps): JSX.Element => {
-  const { titleProps, size } = useDialogContext();
+  const { titleProps } = useDialogContext();
 
   return (
-    <StyledDialogHeader $size={size} align={align} as={elementType} size='xl' {...mergeProps(titleProps || {}, props)}>
+    <StyledDialogHeader align={align} as={elementType} size='xl' {...mergeProps(titleProps || {}, props)}>
       {children}
     </StyledDialogHeader>
   );
diff --git a/packages/components/src/Divider/Divider.style.tsx b/packages/components/src/Divider/Divider.style.tsx
index 683c62e07..889d69b06 100644
--- a/packages/components/src/Divider/Divider.style.tsx
+++ b/packages/components/src/Divider/Divider.style.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { StyledMarginProps } from '@interlay/hooks';
-import { Color, DividerSizes } from '@interlay/themev2';
+import { Color, DividerSizes } from '@interlay/theme';
 
 import { Orientation } from '../../../core/theme/src';
 import { marginCSS } from '../utils/margin';
diff --git a/packages/components/src/Divider/Divider.tsx b/packages/components/src/Divider/Divider.tsx
index 89a07b7e9..e6972b635 100644
--- a/packages/components/src/Divider/Divider.tsx
+++ b/packages/components/src/Divider/Divider.tsx
@@ -2,7 +2,7 @@ import { useSeparator } from '@react-aria/separator';
 import { mergeProps } from '@react-aria/utils';
 import { forwardRef, HTMLAttributes } from 'react';
 import { useStyleProps } from '@interlay/hooks';
-import { Color, DividerSizes } from '@interlay/themev2';
+import { Color, DividerSizes } from '@interlay/theme';
 
 import { MarginProps, Orientation } from '../../../core/theme/src';
 import { ElementTypeProp } from '../utils/types';
diff --git a/packages/components/src/Drawer/Drawer.stories.tsx b/packages/components/src/Drawer/Drawer.stories.tsx
index bc31a0a2a..dba04eea5 100644
--- a/packages/components/src/Drawer/Drawer.stories.tsx
+++ b/packages/components/src/Drawer/Drawer.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { CTA } from '..';
+import { Button } from '..';
 
 import { Drawer, DrawerProps } from '.';
 
@@ -18,7 +18,7 @@ const Render = () => {
 
   return (
     <>
-      <CTA onClick={() => setOpen(true)}>Open</CTA>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Drawer isOpen={isOpen} onClose={() => setOpen(false)}>
         Drawer
       </Drawer>
diff --git a/packages/components/src/Field/Field.style.tsx b/packages/components/src/Field/Field.style.tsx
index b56da511c..1dbe228fa 100644
--- a/packages/components/src/Field/Field.style.tsx
+++ b/packages/components/src/Field/Field.style.tsx
@@ -1,16 +1,22 @@
-import styled from 'styled-components';
-import { Spacing } from '@interlay/themev2';
+import styled, { CSSProperties } from 'styled-components';
+
+import { Flex } from '../Flex';
 
 type StyledFieldProps = {
-  $maxWidth?: Spacing;
+  $maxWidth?: CSSProperties['maxWidth'];
+  $fullWidth?: boolean;
 };
 
-const StyledField = styled.div<StyledFieldProps>`
+const StyledFieldElWrapper = styled.div`
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
   height: 100%;
-  max-width: ${({ $maxWidth, theme }) => $maxWidth && theme.spacing($maxWidth)};
 `;
 
-export { StyledField };
+const StyledField = styled(Flex)<StyledFieldProps>`
+  max-width: ${({ $maxWidth }) => $maxWidth};
+  width: ${({ $fullWidth, $maxWidth }) => ($fullWidth || $maxWidth) && '100%'};
+`;
+
+export { StyledField, StyledFieldElWrapper };
diff --git a/packages/components/src/Field/Field.tsx b/packages/components/src/Field/Field.tsx
index a668f4881..20a1a8b42 100644
--- a/packages/components/src/Field/Field.tsx
+++ b/packages/components/src/Field/Field.tsx
@@ -1,18 +1,20 @@
 import { forwardRef, HTMLAttributes, ReactNode } from 'react';
-import { LabelPosition, Spacing } from '@interlay/themev2';
+import { LabelPosition } from '@interlay/theme';
+import { CSSProperties } from 'styled-components';
 
 import { Flex, FlexProps } from '../Flex';
 import { HelperText, HelperTextProps } from '../HelperText';
 import { Label, LabelProps } from '../Label';
 import { hasError } from '../utils/input';
 
-import { StyledField } from './Field.style';
+import { StyledField, StyledFieldElWrapper } from './Field.style';
 
 type Props = {
   label?: ReactNode;
   labelPosition?: LabelPosition;
   labelProps?: LabelProps;
-  maxWidth?: Spacing;
+  maxWidth?: CSSProperties['maxWidth'];
+  fullWidth?: boolean;
 };
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
@@ -33,6 +35,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
       descriptionProps,
       children,
       maxWidth,
+      fullWidth,
       ...props
     },
     ref
@@ -42,7 +45,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
 
     const element = (
       <>
-        <StyledField $maxWidth={maxWidth}>{children}</StyledField>
+        <StyledFieldElWrapper>{children}</StyledFieldElWrapper>
         {hasHelpText && (
           <HelperText
             description={description}
@@ -55,7 +58,13 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
     );
 
     return (
-      <Flex ref={ref} direction={labelPosition === 'top' ? 'column' : 'row'} {...props}>
+      <StyledField
+        ref={ref}
+        $fullWidth={fullWidth}
+        $maxWidth={maxWidth}
+        direction={labelPosition === 'top' ? 'column' : 'row'}
+        {...props}
+      >
         {label && (
           <Label {...labelProps} position={labelPosition}>
             {label}
@@ -68,7 +77,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
             {element}
           </Flex>
         )}
-      </Flex>
+      </StyledField>
     );
   }
 );
diff --git a/packages/components/src/Flex/Flex.style.tsx b/packages/components/src/Flex/Flex.style.tsx
index 2e79582e8..cec5757f1 100644
--- a/packages/components/src/Flex/Flex.style.tsx
+++ b/packages/components/src/Flex/Flex.style.tsx
@@ -1,4 +1,4 @@
-import type { AlignItems, AlignSelf, Direction, JustifyContent, Spacing, Wrap } from '@interlay/themev2';
+import type { AlignItems, AlignSelf, Direction, JustifyContent, Spacing, Wrap } from '@interlay/theme';
 
 import { styled } from 'styled-components';
 import { StyledMarginProps } from '@interlay/hooks';
diff --git a/packages/components/src/Flex/Flex.tsx b/packages/components/src/Flex/Flex.tsx
index b931e07a7..ef3f58710 100644
--- a/packages/components/src/Flex/Flex.tsx
+++ b/packages/components/src/Flex/Flex.tsx
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 
 import { forwardRef } from 'react';
 import { useStyleProps } from '@interlay/hooks';
-import { AlignItems, AlignSelf, Direction, JustifyContent, MarginProps, Spacing, Wrap } from '@interlay/themev2';
+import { AlignItems, AlignSelf, Direction, JustifyContent, MarginProps, Spacing, Wrap } from '@interlay/theme';
 
 import { ElementTypeProp } from '../utils/types';
 
diff --git a/packages/components/src/Grid/Grid.stories.tsx b/packages/components/src/Grid/Grid.stories.tsx
deleted file mode 100644
index 6af771933..000000000
--- a/packages/components/src/Grid/Grid.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-
-import { Grid, GridItem, GridProps } from '.';
-
-export default {
-  title: 'Layout/Grid',
-  component: Grid,
-  subcomponents: { GridItem }
-} as Meta<typeof Grid>;
-
-export const Default: StoryFn<GridProps> = (args) => (
-  <Grid {...args}>
-    <GridItem desktop={{ span: 6, start: 1 }} mobile={{ span: 4, start: 1 }}>
-      <h2>Grid content</h2>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam minima non modi consequuntur corporis est
-        itaque, exercitationem amet, fugiat optio, facilis repellendus inventore vero perferendis. Possimus porro eaque
-        facere.
-      </p>
-    </GridItem>
-    <GridItem desktop={{ span: 6, start: 7 }} mobile={{ span: 4, start: 1 }}>
-      <h2>Grid content</h2>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis nam minima non modi consequuntur corporis est
-        itaque, exercitationem amet, fugiat optio, facilis repellendus inventore vero perferendis. Possimus porro eaque
-        facere.
-      </p>
-    </GridItem>
-  </Grid>
-);
diff --git a/packages/components/src/Grid/Grid.style.tsx b/packages/components/src/Grid/Grid.style.tsx
deleted file mode 100644
index b4775fb27..000000000
--- a/packages/components/src/Grid/Grid.style.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '@interlay/theme';
-
-export const GridContainer = styled.div`
-  display: grid;
-  gap: ${theme.spacing.spacing5};
-  grid-template-columns: repeat(4, 1fr);
-
-  @media screen and (min-width: 48em) {
-    grid-template-columns: repeat(12, 1fr);
-  }
-`;
diff --git a/packages/components/src/Grid/Grid.tsx b/packages/components/src/Grid/Grid.tsx
deleted file mode 100644
index c3ab5371e..000000000
--- a/packages/components/src/Grid/Grid.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { GridContainer } from './Grid.style';
-
-interface GridProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-const Grid = ({ className, children }: GridProps): JSX.Element => (
-  <GridContainer className={className}>{children}</GridContainer>
-);
-
-export { Grid };
-export type { GridProps };
diff --git a/packages/components/src/Grid/GridItem.style.tsx b/packages/components/src/Grid/GridItem.style.tsx
deleted file mode 100644
index 44e438bf5..000000000
--- a/packages/components/src/Grid/GridItem.style.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-import { GridItemProps } from './GridItem';
-
-export const GridItemContainer = styled.div<GridItemProps>`
-  grid-column: ${(props) =>
-    props.mobile.start ? `${props.mobile.start} / span ${props.mobile.span}` : `span ${props.mobile.span}`};
-  grid-row: ${(props) => props.mobile.row || 'auto'};
-  justify-self: ${(props) => props.mobile.justify || 'auto'};
-
-  @media (min-width: 48em) {
-    grid-column: ${(props) =>
-      props.desktop.start ? `${props.desktop.start} / span ${props.desktop.span}` : `span ${props.desktop.span}`};
-    grid-row: ${(props) => props.desktop.row || 'auto'};
-    justify-self: ${(props) => props.desktop.justify || 'auto'};
-  }
-`;
diff --git a/packages/components/src/Grid/GridItem.tsx b/packages/components/src/Grid/GridItem.tsx
deleted file mode 100644
index 3ecdfe568..000000000
--- a/packages/components/src/Grid/GridItem.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { GridItemContainer } from './GridItem.style';
-
-type Justify = 'start' | 'center' | 'end';
-
-type GridColumnsWide = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type GridColumnsNarrow = 1 | 2 | 3 | 4;
-
-interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  mobile: {
-    span: GridColumnsNarrow;
-    start?: GridColumnsNarrow;
-    row?: number;
-    justify?: Justify;
-  };
-  desktop: {
-    span: GridColumnsWide;
-    start?: GridColumnsWide;
-    row?: number;
-    justify?: Justify;
-  };
-}
-
-const GridItem = ({ mobile, desktop, className, children }: GridItemProps): JSX.Element => (
-  <GridItemContainer className={className} desktop={desktop} mobile={mobile}>
-    {children}
-  </GridItemContainer>
-);
-
-export { GridItem };
-export type { GridItemProps };
diff --git a/packages/components/src/Grid/__tests__/Grid.test.tsx b/packages/components/src/Grid/__tests__/Grid.test.tsx
deleted file mode 100644
index ae83a76f5..000000000
--- a/packages/components/src/Grid/__tests__/Grid.test.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { Grid, GridItem } from '..';
-
-describe('Grid', () => {
-  it('should render correctly', () => {
-    const wrapper = render(
-      <Grid>
-        <GridItem desktop={{ span: 1 }} mobile={{ span: 1 }}>
-          item
-        </GridItem>
-      </Grid>
-    );
-
-    expect(() => wrapper.unmount()).not.toThrow();
-  });
-});
diff --git a/packages/components/src/Grid/index.ts b/packages/components/src/Grid/index.ts
deleted file mode 100644
index 4de7077e0..000000000
--- a/packages/components/src/Grid/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type { GridProps } from './Grid';
-export { Grid } from './Grid';
-export type { GridItemProps } from './GridItem';
-export { GridItem } from './GridItem';
diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
index b57347883..f4370a9e7 100644
--- a/packages/components/src/Input/BaseInput.tsx
+++ b/packages/components/src/Input/BaseInput.tsx
@@ -1,4 +1,4 @@
-import { Spacing, InputSizes } from '@interlay/themev2';
+import { Spacing, InputSizes } from '@interlay/theme';
 import { FocusEvent, forwardRef, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
 
 import { Field, FieldProps, useFieldProps } from '../Field';
diff --git a/packages/components/src/Input/Input.style.tsx b/packages/components/src/Input/Input.style.tsx
index 89d515409..200d7e5b8 100644
--- a/packages/components/src/Input/Input.style.tsx
+++ b/packages/components/src/Input/Input.style.tsx
@@ -1,4 +1,4 @@
-import { InputSizes, Spacing } from '@interlay/themev2';
+import { InputSizes, Spacing } from '@interlay/theme';
 import styled, { css } from 'styled-components';
 
 type BaseInputProps = {
@@ -93,6 +93,7 @@ const StyledAdornment = styled.div<StyledAdornmentProps>`
   position: absolute;
   // to not allow adornment to take more than 50% of the input. We might want to reduce this in the future.
   max-width: 50%;
+  ${({ theme }) => theme.input.adornment};
 `;
 
 const StyledAdornmentRight = styled(StyledAdornment)`
diff --git a/packages/components/src/List/List.style.tsx b/packages/components/src/List/List.style.tsx
index 8a2e2c324..65d0df300 100644
--- a/packages/components/src/List/List.style.tsx
+++ b/packages/components/src/List/List.style.tsx
@@ -1,23 +1,26 @@
-import styled, { css } from 'styled-components';
-import { theme } from '@interlay/theme';
+import styled, { CSSProperties, css } from 'styled-components';
 
 import { Flex } from '../Flex';
 
-const StyledList = styled(Flex)``;
+type StyledListProps = {
+  $maxHeight?: CSSProperties['maxHeight'];
+};
+
+const StyledList = styled(Flex)<StyledListProps>`
+  max-height: ${({ $maxHeight }) => $maxHeight};
+`;
 
 type StyledListItemProps = {
   $isDisabled: boolean;
   $isHovered: boolean;
-  $isInteractable: boolean;
+  $isInteraButtonble: boolean;
   $isFocusVisible: boolean;
 };
 
 const StyledListItem = styled.div<StyledListItemProps>`
   flex: 1;
   align-self: stretch;
-  padding: ${theme.spacing.spacing3};
-  color: ${theme.colors.textPrimary};
-  cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'};
+  cursor: ${({ $isInteraButtonble }) => $isInteraButtonble && 'pointer'};
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
   opacity: ${({ $isDisabled }) => $isDisabled && 0.5};
   white-space: nowrap;
diff --git a/packages/components/src/List/List.tsx b/packages/components/src/List/List.tsx
index 91b69476c..c471d6d82 100644
--- a/packages/components/src/List/List.tsx
+++ b/packages/components/src/List/List.tsx
@@ -2,9 +2,9 @@ import { AriaGridListOptions, useGridList } from '@react-aria/gridlist';
 import { mergeProps } from '@react-aria/utils';
 import { ListProps as StatelyListProps, useListState } from '@react-stately/list';
 import { forwardRef } from 'react';
-import { ListVariants } from '@interlay/theme';
 import { Selection } from '@react-types/shared';
 import { useDOMRef } from '@interlay/hooks';
+import { CSSProperties } from 'styled-components';
 
 import { FlexProps } from '../Flex';
 
@@ -12,7 +12,7 @@ import { StyledList } from './List.style';
 import { ListItem } from './ListItem';
 
 type Props = {
-  variant?: ListVariants;
+  maxHeight?: CSSProperties['maxHeight'];
 };
 
 type InheritAttrs = Omit<
@@ -28,7 +28,7 @@ type ListProps = Props & NativeAttrs & InheritAttrs;
 const List = forwardRef<HTMLDivElement, ListProps>(
   (
     {
-      variant = 'primary',
+      maxHeight,
       direction = 'column',
       onSelectionChange,
       selectionMode,
@@ -59,12 +59,7 @@ const List = forwardRef<HTMLDivElement, ListProps>(
     const { gridProps } = useGridList(ariaProps, state, listRef);
 
     return (
-      <StyledList
-        {...mergeProps(gridProps, props)}
-        ref={listRef}
-        direction={direction}
-        gap={variant === 'card' ? undefined : 's'}
-      >
+      <StyledList {...mergeProps(gridProps, props)} ref={listRef} $maxHeight={maxHeight} direction={direction}>
         {[...state.collection].map((item) => (
           <ListItem key={item.key} item={item} state={state} />
         ))}
diff --git a/packages/components/src/List/ListItem.tsx b/packages/components/src/List/ListItem.tsx
index d7931ade3..386b394c4 100644
--- a/packages/components/src/List/ListItem.tsx
+++ b/packages/components/src/List/ListItem.tsx
@@ -23,9 +23,9 @@ const ListItem = <T extends object>({ item, state }: InternalProps<T>): JSX.Elem
   const ref = useRef(null);
   const { rowProps, gridCellProps, isDisabled } = useGridListItem({ node: item }, state, ref);
 
-  const isInteractable = state.selectionManager.selectionMode !== 'none' && !isDisabled;
+  const isInteraButtonble = state.selectionManager.selectionMode !== 'none' && !isDisabled;
 
-  const { isHovered, hoverProps } = useHover({ isDisabled: !isInteractable });
+  const { isHovered, hoverProps } = useHover({ isDisabled: !isInteraButtonble });
   const { focusProps, isFocusVisible } = useFocusRing();
 
   const props = useMemo(
@@ -40,7 +40,7 @@ const ListItem = <T extends object>({ item, state }: InternalProps<T>): JSX.Elem
       $isDisabled={isDisabled}
       $isFocusVisible={isFocusVisible}
       $isHovered={isHovered}
-      $isInteractable={isInteractable}
+      $isInteraButtonble={isInteraButtonble}
     >
       <Flex {...mergeProps(gridCellProps, props)}>{item.rendered}</Flex>
     </StyledListItem>
diff --git a/packages/components/src/Meter/Meter.tsx b/packages/components/src/Meter/Meter.tsx
index 7efc91839..06c7652c2 100644
--- a/packages/components/src/Meter/Meter.tsx
+++ b/packages/components/src/Meter/Meter.tsx
@@ -60,7 +60,7 @@ const Meter = ({
           $variant={variant}
           alignItems='center'
           direction='column'
-          gap='spacing1'
+          gap='xs'
           justifyContent='center'
         >
           <Indicator />
diff --git a/packages/components/src/Modal/Modal.stories.tsx b/packages/components/src/Modal/Modal.stories.tsx
index 4c54b2a0d..b29b55501 100644
--- a/packages/components/src/Modal/Modal.stories.tsx
+++ b/packages/components/src/Modal/Modal.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { CTA } from '../CTA';
+import { Button } from '../Button';
 
 import { Modal, ModalProps } from './Modal';
 import { ModalHeader } from './ModalHeader';
@@ -15,7 +15,7 @@ const Render = ({ title, footer, children, ...args }: StoryProps) => {
 
   return (
     <>
-      <CTA onPress={() => setState(true)}>Open Modal</CTA>
+      <Button onPress={() => setState(true)}>Open Modal</Button>
       <Modal {...args} isOpen={state} onClose={() => setState(false)}>
         {title && (
           <>
@@ -25,7 +25,7 @@ const Render = ({ title, footer, children, ...args }: StoryProps) => {
         <ModalBody>{children}</ModalBody>
         {footer && (
           <ModalFooter>
-            <CTA fullWidth>Procced</CTA>
+            <Button fullWidth>Procced</Button>
           </ModalFooter>
         )}
       </Modal>
@@ -203,3 +203,125 @@ export const ScrollBehaviour: StoryObj<StoryProps> = {
     )
   }
 };
+
+export const MaxHeight: StoryObj<StoryProps> = {
+  args: {
+    title: 'Title',
+    footer: true,
+    maxHeight: '400px',
+    children: (
+      <>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+        mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+        leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+        consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+        vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+        ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+        commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+        Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+        vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+        purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+        consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+      </>
+    )
+  }
+};
diff --git a/packages/components/src/Modal/Modal.style.tsx b/packages/components/src/Modal/Modal.style.tsx
index 837df6536..86e658221 100644
--- a/packages/components/src/Modal/Modal.style.tsx
+++ b/packages/components/src/Modal/Modal.style.tsx
@@ -1,5 +1,5 @@
 import styled, { CSSProperties } from 'styled-components';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize } from '@interlay/theme';
 
 import { overlayCSS } from '../utils/overlay';
 import { Dialog, DialogBody } from '../Dialog';
@@ -11,11 +11,11 @@ type StyledWrapperProps = {
 type StyledModalProps = {
   $isOpen?: boolean;
   $size: DialogSize;
+  $maxHeight?: CSSProperties['maxHeight'];
 };
 
 type StyledDialogProps = {
   $isOpen?: boolean;
-  $maxHeight?: CSSProperties['maxHeight'];
 };
 
 type StyledModalBodyProps = {
@@ -36,6 +36,8 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   align-items: ${({ $placement }) => ($placement === 'center' ? 'center' : 'flex-start')};
 `;
 
+//FIXME: on very small screen (height) the modal could overflow when max-heigh is set
+// might not need the max-heigh property
 const StyledModal = styled.div<StyledModalProps>`
   transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0)' : `translateY(20px)`)};
   ${({ $isOpen }) => overlayCSS(!!$isOpen)}
@@ -54,11 +56,12 @@ const StyledModal = styled.div<StyledModalProps>`
   margin: ${({ theme }) => `${theme.spacing('7xl')} ${theme.spacing('xl')}`};
   max-width: ${({ theme, $size }) => theme.dialog.size[$size].maxWidth};
   width: 100%;
+  max-height: ${({ theme, $maxHeight }) => $maxHeight || `calc(100dvh - ${theme.spacing('10xl')})`};
 `;
 
 const StyledDialog = styled(Dialog)<StyledDialogProps>`
   pointer-events: ${({ $isOpen }) => !$isOpen && 'none'};
-  max-height: ${({ theme, $maxHeight }) => $maxHeight || `calc(100dvh - ${theme.spacing('10xl')})`};
+  max-height: inherit;
 `;
 
 const StyledDialogBody = styled(DialogBody)<StyledModalBodyProps>`
diff --git a/packages/components/src/Modal/Modal.tsx b/packages/components/src/Modal/Modal.tsx
index d4ce048ea..375e1b77c 100644
--- a/packages/components/src/Modal/Modal.tsx
+++ b/packages/components/src/Modal/Modal.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useRef } from 'react';
 import { useDOMRef } from '@interlay/hooks';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize } from '@interlay/theme';
 import { CSSProperties } from 'styled-components';
 
 import { DialogProps } from '../Dialog';
@@ -64,6 +64,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
           isDismissable={isDismissable}
           isKeyboardDismissDisabled={isKeyboardDismissDisabled}
           isOpen={isOpen}
+          maxHeight={maxHeight}
           placement={placement}
           shouldCloseOnBlur={shouldCloseOnBlur}
           shouldCloseOnInteractOutside={handleShouldCloseOnInteractOutside}
@@ -71,7 +72,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
           wrapperRef={wrapperRef}
           onClose={onClose}
         >
-          <StyledDialog $isOpen={isOpen} $maxHeight={maxHeight} size={size} {...props}>
+          <StyledDialog $isOpen={isOpen} size={size} {...props}>
             {children}
           </StyledDialog>
         </ModalWrapper>
diff --git a/packages/components/src/Modal/ModalWrapper.tsx b/packages/components/src/Modal/ModalWrapper.tsx
index 5331ed2fe..90a97c3fc 100644
--- a/packages/components/src/Modal/ModalWrapper.tsx
+++ b/packages/components/src/Modal/ModalWrapper.tsx
@@ -2,7 +2,8 @@ import { AriaModalOverlayProps, AriaOverlayProps, useModalOverlay } from '@react
 import { mergeProps } from '@react-aria/utils';
 import { OverlayTriggerState } from '@react-stately/overlays';
 import { forwardRef, ReactNode, RefObject } from 'react';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize } from '@interlay/theme';
+import { CSSProperties } from 'styled-components';
 
 import { Underlay } from '../Overlay/Underlay';
 
@@ -15,6 +16,7 @@ type Props = {
   onClose: () => void;
   wrapperRef: RefObject<HTMLDivElement>;
   size: DialogSize;
+  maxHeight?: CSSProperties['maxHeight'];
 };
 
 type InheritAttrs = Omit<AriaModalOverlayProps & AriaOverlayProps, keyof Props>;
@@ -34,6 +36,7 @@ const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
       shouldCloseOnBlur,
       wrapperRef,
       size,
+      maxHeight,
       ...props
     },
     ref
@@ -57,7 +60,13 @@ const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
       <div ref={wrapperRef}>
         <Underlay {...underlayProps} isOpen={!!isOpen} />
         <StyledWrapper $placement={placement}>
-          <StyledModal ref={ref} $isOpen={isOpen} $size={size} {...mergeProps(modalProps, props)}>
+          <StyledModal
+            ref={ref}
+            $isOpen={isOpen}
+            $maxHeight={maxHeight}
+            $size={size}
+            {...mergeProps(modalProps, props)}
+          >
             {children}
           </StyledModal>
         </StyledWrapper>
diff --git a/packages/components/src/Modal/__tests__/Modal.test.tsx b/packages/components/src/Modal/__tests__/Modal.test.tsx
index 0ddb069f4..151005e0f 100644
--- a/packages/components/src/Modal/__tests__/Modal.test.tsx
+++ b/packages/components/src/Modal/__tests__/Modal.test.tsx
@@ -2,14 +2,13 @@ import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { testA11y } from '@interlay/test-utils';
 
-import { Modal, ModalBody, ModalDivider, ModalFooter, ModalHeader } from '..';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '..';
 
 describe('Modal', () => {
   it('should render correctly', () => {
     const wrapper = render(
       <Modal isOpen onClose={jest.fn}>
         <ModalHeader>title</ModalHeader>
-        <ModalDivider />
         <ModalBody>body</ModalBody>
         <ModalFooter>footer</ModalFooter>
       </Modal>
@@ -24,7 +23,6 @@ describe('Modal', () => {
     render(
       <Modal ref={ref} isOpen onClose={jest.fn}>
         <ModalHeader>title</ModalHeader>
-        <ModalDivider />
         <ModalBody>body</ModalBody>
         <ModalFooter>footer</ModalFooter>
       </Modal>
@@ -37,7 +35,6 @@ describe('Modal', () => {
     await testA11y(
       <Modal isOpen onClose={jest.fn}>
         <ModalHeader>title</ModalHeader>
-        <ModalDivider />
         <ModalBody>body</ModalBody>
         <ModalFooter>footer</ModalFooter>
       </Modal>
diff --git a/packages/components/src/Popover/Popover.stories.tsx b/packages/components/src/Popover/Popover.stories.tsx
index 1ddd4f07c..6c0f19a8a 100644
--- a/packages/components/src/Popover/Popover.stories.tsx
+++ b/packages/components/src/Popover/Popover.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { CTA } from '../CTA';
+import { Button } from '../Button';
 
 import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverProps, PopoverTrigger } from '.';
 
@@ -11,14 +11,14 @@ const Render = ({ title, footer, children, placement = 'left', ...args }: StoryP
     <>
       <Popover {...args}>
         <PopoverTrigger>
-          <CTA style={{ [placement]: 0, position: 'absolute', margin: 20 }}>Open Popover</CTA>
+          <Button style={{ [placement]: 0, position: 'absolute', margin: 20 }}>Open Popover</Button>
         </PopoverTrigger>
         <PopoverContent>
           {title && <PopoverHeader>Popover Header</PopoverHeader>}
           <PopoverBody>{children}</PopoverBody>
           {footer && (
             <PopoverFooter>
-              <CTA>Confirm</CTA>
+              <Button>Confirm</Button>
             </PopoverFooter>
           )}
         </PopoverContent>
diff --git a/packages/components/src/Popover/PopoverContentWrapper.tsx b/packages/components/src/Popover/PopoverContentWrapper.tsx
index 4c81dc2b5..79ec89969 100644
--- a/packages/components/src/Popover/PopoverContentWrapper.tsx
+++ b/packages/components/src/Popover/PopoverContentWrapper.tsx
@@ -59,7 +59,7 @@ const PopoverContentWrapper = forwardRef<HTMLDivElement, PopoverContentWrapperPr
           style={{ ...style, ...popoverProps.style }}
         >
           {!isNonModal && <DismissButton onDismiss={state.close} />}
-          <Dialog size='small' {...dialogProps}>
+          <Dialog size='s' {...dialogProps}>
             {children}
           </Dialog>
           <DismissButton onDismiss={state.close} />
diff --git a/packages/components/src/Popover/PopoverHeader.tsx b/packages/components/src/Popover/PopoverHeader.tsx
index 04ea84f09..c83d9094e 100644
--- a/packages/components/src/Popover/PopoverHeader.tsx
+++ b/packages/components/src/Popover/PopoverHeader.tsx
@@ -2,7 +2,7 @@ import { DialogHeader, DialogHeaderProps } from '../Dialog';
 
 type PopoverHeaderProps = DialogHeaderProps;
 
-const PopoverHeader = ({ size = 'base', weight = 'semibold', children, ...props }: PopoverHeaderProps): JSX.Element => (
+const PopoverHeader = ({ size = 'md', weight = 'semibold', children, ...props }: PopoverHeaderProps): JSX.Element => (
   <DialogHeader size={size} weight={weight} {...props}>
     {children}
   </DialogHeader>
diff --git a/packages/components/src/ProgressBar/ProgressBar.style.tsx b/packages/components/src/ProgressBar/ProgressBar.style.tsx
index abb0a2801..070e54b60 100644
--- a/packages/components/src/ProgressBar/ProgressBar.style.tsx
+++ b/packages/components/src/ProgressBar/ProgressBar.style.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { theme } from '@interlay/theme';
-import { Color, ProgressBarSize } from '@interlay/themev2';
+import { Color, ProgressBarSize } from '@interlay/theme';
 
 type StyledTrackProps = {
   $size: ProgressBarSize;
diff --git a/packages/components/src/ProgressBar/ProgressBar.tsx b/packages/components/src/ProgressBar/ProgressBar.tsx
index f26c12795..5edc5f969 100644
--- a/packages/components/src/ProgressBar/ProgressBar.tsx
+++ b/packages/components/src/ProgressBar/ProgressBar.tsx
@@ -1,6 +1,6 @@
 import { AriaProgressBarProps, useProgressBar } from '@react-aria/progress';
 import { CSSProperties } from 'react';
-import { Color, ProgressBarSize } from '@interlay/themev2';
+import { Color, ProgressBarSize } from '@interlay/theme';
 
 import { Flex, FlexProps } from '../Flex';
 import { Span } from '../Text';
diff --git a/packages/components/src/Radio/Radio.style.tsx b/packages/components/src/Radio/Radio.style.tsx
index 8a1ab16f2..cdefb0892 100644
--- a/packages/components/src/Radio/Radio.style.tsx
+++ b/packages/components/src/Radio/Radio.style.tsx
@@ -24,8 +24,8 @@ const StyledRadioGroup = styled(Flex)<StyledRadioGroupProps>`
   width: 100%;
 
   label {
-    margin-right: ${({ $orientation, $gap }) => $orientation === 'horizontal' && $gap && theme.spacing[$gap]};
-    margin-bottom: ${({ $orientation, $gap }) => $orientation === 'vertical' && $gap && theme.spacing[$gap]};
+    margin-right: ${({ $orientation, $gap, theme }) => $orientation === 'horizontal' && $gap && theme.spacing($gap)};
+    margin-bottom: ${({ $orientation, $gap, theme }) => $orientation === 'vertical' && $gap && theme.spacing($gap)};
   }
 `;
 
diff --git a/packages/components/src/Radio/RadioGroup.tsx b/packages/components/src/Radio/RadioGroup.tsx
index ac9a6a97b..2152d6afb 100644
--- a/packages/components/src/Radio/RadioGroup.tsx
+++ b/packages/components/src/Radio/RadioGroup.tsx
@@ -41,7 +41,7 @@ const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       >
         <StyledRadioGroup
           {...radioGroupProps}
-          $gap={orientation === 'horizontal' ? gap || 'spacing4' : gap}
+          $gap={orientation === 'horizontal' ? gap || 'md' : gap}
           $orientation={orientation}
           direction={orientation === 'vertical' ? 'column' : 'row'}
           onChange={onChange}
diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
index d09ce524b..288e93a1a 100644
--- a/packages/components/src/Select/Select.stories.tsx
+++ b/packages/components/src/Select/Select.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { Key, useState } from 'react';
 
 import { Flex } from '../Flex';
-import { CTA } from '..';
+import { Button } from '..';
 
 import { Select, SelectProps } from './Select';
 
@@ -120,7 +120,7 @@ const ControlledOpenComponent = (args: SelectProps<any>) => {
 
   return (
     <>
-      <CTA onPress={() => setState(true)}>Open Modal</CTA>
+      <Button onPress={() => setState(true)}>Open Modal</Button>
       <Render {...(args as any)} open={state} onOpenChange={setState} />
     </>
   );
@@ -174,7 +174,7 @@ export const SideLabel: StoryObj<SelectProps> = {
 
 export const MaxWidth: StoryObj<SelectProps> = {
   args: {
-    maxWidth: 'spacing28'
+    maxWidth: '11xl'
   }
 };
 
diff --git a/packages/components/src/Select/Select.style.tsx b/packages/components/src/Select/Select.style.tsx
index 877fb81e9..e9f091520 100644
--- a/packages/components/src/Select/Select.style.tsx
+++ b/packages/components/src/Select/Select.style.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { ChevronDown } from '@interlay/icons';
-import { InputSizes } from '@interlay/themev2';
+import { InputSizes } from '@interlay/theme';
 
 import { List } from '../List';
 import { Span } from '../Text';
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index 21d5ef6f5..c3acc0915 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -1,5 +1,5 @@
 import { useDOMRef } from '@interlay/hooks';
-import { InputSizes } from '@interlay/themev2';
+import { InputSizes } from '@interlay/theme';
 import { useSelect } from '@react-aria/select';
 import { mergeProps, useId } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
@@ -164,7 +164,6 @@ const Select = <T extends SelectObject = SelectObject>(
             selectedKeys: state.selectedItem?.key ? [state.selectedItem?.key] : [],
             disabledKeys
           })}
-          maxHeight='650px'
           state={state}
         />
       )}
diff --git a/packages/components/src/Select/SelectModal.tsx b/packages/components/src/Select/SelectModal.tsx
index cb05738a4..e25e66a9c 100644
--- a/packages/components/src/Select/SelectModal.tsx
+++ b/packages/components/src/Select/SelectModal.tsx
@@ -2,7 +2,7 @@ import { useId } from '@react-aria/utils';
 import { SelectState } from '@react-stately/select';
 import { forwardRef, ReactNode } from 'react';
 
-import { Modal, ModalBody, ModalHeader, ModalProps, P } from '..';
+import { Input, Modal, ModalBody, ModalHeader, ModalProps, P } from '..';
 import { ListItem, ListProps } from '../List';
 
 import { StyledList } from './Select.style';
@@ -43,6 +43,7 @@ const SelectModal = forwardRef<HTMLDivElement, SelectModalProps>(
             {title}
           </ModalHeader>
           <ModalBody noPadding={hasItems}>
+            <Input />
             {hasItems ? (
               <StyledList
                 {...listProps}
diff --git a/packages/components/src/Select/SelectTrigger.tsx b/packages/components/src/Select/SelectTrigger.tsx
index cf2e84365..8d3f82d8c 100644
--- a/packages/components/src/Select/SelectTrigger.tsx
+++ b/packages/components/src/Select/SelectTrigger.tsx
@@ -1,5 +1,5 @@
 import { useDOMRef } from '@interlay/hooks';
-import { Sizes } from '@interlay/theme';
+import { InputSizes } from '@interlay/theme';
 import { useButton } from '@react-aria/button';
 import { PressEvent } from '@react-types/shared';
 import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
@@ -10,7 +10,7 @@ import { StyledChevronDown, StyledTrigger, StyledTriggerValue } from './Select.s
 
 type Props = {
   as?: any;
-  size?: Sizes;
+  size?: InputSizes;
   isOpen?: boolean;
   hasError?: boolean;
   placeholder?: ReactNode;
diff --git a/packages/components/src/Spinner/Spinner.stories.tsx b/packages/components/src/Spinner/Spinner.stories.tsx
index ec7a17655..bf8495848 100644
--- a/packages/components/src/Spinner/Spinner.stories.tsx
+++ b/packages/components/src/Spinner/Spinner.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { SpinnerSizes } from '@interlay/themev2';
+import { SpinnerSizes } from '@interlay/theme';
 
 import { Spinner, SpinnerProps } from '.';
 
diff --git a/packages/components/src/Spinner/Spinner.style.tsx b/packages/components/src/Spinner/Spinner.style.tsx
index 7df972339..1999a1441 100644
--- a/packages/components/src/Spinner/Spinner.style.tsx
+++ b/packages/components/src/Spinner/Spinner.style.tsx
@@ -1,4 +1,4 @@
-import { SpinnerColors, SpinnerSizes } from '@interlay/themev2';
+import { SpinnerColors, SpinnerSizes } from '@interlay/theme';
 import styled, { css } from 'styled-components';
 
 interface StyledSpinnerProps {
diff --git a/packages/components/src/Spinner/Spinner.tsx b/packages/components/src/Spinner/Spinner.tsx
index 11c3a4ee3..572b3b2d1 100644
--- a/packages/components/src/Spinner/Spinner.tsx
+++ b/packages/components/src/Spinner/Spinner.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { SpinnerColors, SpinnerSizes } from '@interlay/themev2';
+import { SpinnerColors, SpinnerSizes } from '@interlay/theme';
 
 import { StyledSpinner } from './Spinner.style';
 
diff --git a/packages/components/src/Stack/Stack.stories.tsx b/packages/components/src/Stack/Stack.stories.tsx
index fcd85b317..9a18e11e7 100644
--- a/packages/components/src/Stack/Stack.stories.tsx
+++ b/packages/components/src/Stack/Stack.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { CTA } from '../CTA';
+import { Button } from '../Button';
 import { P } from '../Text';
 
 import { Stack, StackProps } from '.';
@@ -13,7 +13,7 @@ export default {
   },
   render: (args) => (
     <Stack {...args}>
-      <P>Stack children</P> <P>Stack children</P> <CTA>CTA</CTA>
+      <P>Stack children</P> <P>Stack children</P> <Button>Button</Button>
     </Stack>
   )
 } as Meta<typeof Stack>;
diff --git a/packages/components/src/Table/Table.stories.tsx b/packages/components/src/Table/Table.stories.tsx
index 793417da3..c1cd13b40 100644
--- a/packages/components/src/Table/Table.stories.tsx
+++ b/packages/components/src/Table/Table.stories.tsx
@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ChevronRight } from '@interlay/icons';
 
-import { CTA } from '../CTA';
+import { Button } from '../Button';
 
 import { ColumnProps, RowProps, Table, TableProps } from '.';
 
 const action = (
-  <CTA size='small' variant='text' onPress={() => alert('Pressed')}>
+  <Button size='small' variant='text' onPress={() => alert('Pressed')}>
     <ChevronRight size='s' />
-  </CTA>
+  </Button>
 );
 const columns: ColumnProps[] = [
   { name: 'Coin', id: 'coin' },
@@ -42,7 +42,7 @@ export default {
 
 export const Default: StoryObj<TableProps> = {};
 
-export const SelectableRow: StoryObj<TableProps> = {
+export const SeleButtonbleRow: StoryObj<TableProps> = {
   args: {
     onRowAction: (key) => alert(`Row ${key} selected`)
   }
diff --git a/packages/components/src/Tabs/Tab.tsx b/packages/components/src/Tabs/Tab.tsx
index b99540cd5..c6af96523 100644
--- a/packages/components/src/Tabs/Tab.tsx
+++ b/packages/components/src/Tabs/Tab.tsx
@@ -1,14 +1,14 @@
+import { TabsSize } from '@interlay/theme';
 import { useTab } from '@react-aria/tabs';
 import { TabListState } from '@react-stately/tabs';
 import { AriaTabProps } from '@react-types/tabs';
 import { ReactNode, useRef } from 'react';
-import { Sizes } from '@interlay/theme';
 
 import { StyledTab } from './Tabs.style';
 
 type Props = {
   fullWidth?: boolean;
-  size: Sizes;
+  size: TabsSize;
 };
 
 type InheritProps<T> = {
@@ -23,7 +23,7 @@ const Tab = <T extends Record<string, unknown>>({
   item,
   state,
   fullWidth = false,
-  size = 'small'
+  size = 'md'
 }: TabProps<T>): JSX.Element => {
   const ref = useRef<HTMLDivElement>(null);
   const { tabProps, isDisabled } = useTab(item, state, ref);
diff --git a/packages/components/src/Tabs/Tabs.style.tsx b/packages/components/src/Tabs/Tabs.style.tsx
index 79788fe90..cf9bffc0f 100644
--- a/packages/components/src/Tabs/Tabs.style.tsx
+++ b/packages/components/src/Tabs/Tabs.style.tsx
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import { theme } from '@interlay/theme';
-import { AlignItems, Sizes } from '@interlay/theme';
+import styled, { css } from 'styled-components';
+import { TabsSize, theme } from '@interlay/theme';
+import { AlignItems } from '@interlay/theme';
 
 import { hideScrollbar } from '../utils/visually-hidden';
 
@@ -12,7 +12,7 @@ const StyledTabs = styled.div`
 
 type TabListWrapperProps = {
   $fullWidth: boolean;
-  $size: Sizes;
+  $size: TabsSize;
   $align: AlignItems;
 };
 
@@ -20,14 +20,14 @@ const TabListWrapper = styled.div<TabListWrapperProps>`
   display: ${({ $fullWidth }) => ($fullWidth ? 'flex' : 'inline-flex')};
   align-self: ${({ $align, $fullWidth }) => !$fullWidth && $align};
   position: relative;
-  background-color: ${theme.tabs.bg};
-  padding: ${({ $size }) => theme.tabs[$size].wrapper.padding};
-  border-radius: ${theme.rounded.md};
-  border: ${theme.tabs.border};
   z-index: 0;
   max-width: 100%;
   overflow-x: auto;
+
   ${hideScrollbar()}
+
+  ${({ theme }) => theme.tabs.base};
+  ${({ $size, theme }) => theme.tabs.size[$size].base};
 `;
 
 type TabListProps = {
@@ -41,7 +41,7 @@ const TabList = styled.div<TabListProps>`
 
 type StyledTabProps = {
   $fullWidth: boolean;
-  $size: Sizes;
+  $size: TabsSize;
   $isDisabled: boolean;
 };
 
@@ -50,39 +50,35 @@ const StyledTab = styled.div<StyledTabProps>`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${({ $size }) => theme.tabs[$size].tab.padding};
-  font-size: ${({ $size }) => theme.tabs[$size].tab.text};
-  font-weight: ${({ $size }) => theme.tabs[$size].tab.fontWeight};
   text-align: center;
   cursor: ${({ $isDisabled }) => !$isDisabled && 'pointer'};
   user-select: none;
   outline: none;
-  border-radius: ${theme.rounded.rg};
-  color: ${theme.tabs.color};
-  // TODO: have this transition into theme
-  transition: color 150ms;
   opacity: ${({ $isDisabled }) => $isDisabled && '.5'};
   overflow: hidden;
 
-  &[aria-selected='true'] {
-    color: ${theme.tabs.active.color};
-  }
+  ${({ theme, $size }) => {
+    return css`
+      ${theme.tabs.item.base}
+      ${theme.tabs.size[$size].item}
+    `;
+  }};
 `;
 
 type TabSelectionProps = {
   $isFocusVisible: boolean;
   $width: number;
   $transform: string;
-  $size: Sizes;
+  $size: TabsSize;
 };
 
 const TabSelection = styled.div<TabSelectionProps>`
   position: absolute;
-  top: ${({ $size }) => theme.tabs[$size].selection.padding};
-  bottom: ${({ $size }) => theme.tabs[$size].selection.padding};
+  top: ${({ $size, theme }) => theme.tabs.size[$size].base.padding};
+  bottom: ${({ $size, theme }) => theme.tabs.size[$size].base.padding};
   left: 0;
-  border-radius: ${theme.rounded.rg};
-  background-color: ${theme.tabs.active.bg};
+  border-radius: ${({ theme }) => theme.tabs.item.base.borderRadius};
+  background-color: ${({ theme }) => theme.tabs.item.base.backgroundColor};
   will-change: transform, width;
   transition:
     transform ${theme.transition.duration.duration150}ms,
@@ -92,19 +88,27 @@ const TabSelection = styled.div<TabSelectionProps>`
   width: ${(props) => props.$width}px;
   transform: ${(props) => props.$transform};
 
+  ${({ theme }) => {
+    return css`
+      ${theme.tabs.item.selected}
+    `;
+  }};
+
   ${(props) =>
     props.$isFocusVisible &&
-    `&:after {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: -4px;
-    right: -4px;
-    bottom: -4px;
-    border-radius: ${theme.rounded.md};
-    border: 2px solid ${theme.tabs.active.bg};
-    z-index: 3;
-  }`}
+    css`
+      &:after {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        border-radius: ${theme.rounded.md};
+        border: 2px solid ${theme.tabs.active.bg};
+        z-index: 3;
+      }
+    `}
 `;
 
 export { StyledTab, StyledTabs, TabList, TabListWrapper, TabSelection };
diff --git a/packages/components/src/Tabs/Tabs.tsx b/packages/components/src/Tabs/Tabs.tsx
index 8210552e6..e650daab6 100644
--- a/packages/components/src/Tabs/Tabs.tsx
+++ b/packages/components/src/Tabs/Tabs.tsx
@@ -1,11 +1,11 @@
+import { useDOMRef } from '@interlay/hooks';
+import { AlignItems, TabsSize } from '@interlay/theme';
 import { useFocusRing } from '@react-aria/focus';
 import { useTabList } from '@react-aria/tabs';
 import { mergeProps } from '@react-aria/utils';
 import { useTabListState } from '@react-stately/tabs';
 import { CollectionChildren, Key } from '@react-types/shared';
-import { forwardRef, HTMLAttributes, useEffect, useState } from 'react';
-import { AlignItems, Sizes } from '@interlay/theme';
-import { useDOMRef } from '@interlay/hooks';
+import { HTMLAttributes, forwardRef, useEffect, useState } from 'react';
 
 import { Tab } from './Tab';
 import { TabPanel } from './TabPanel';
@@ -18,7 +18,7 @@ type Props = {
   disabledKeys?: Key[];
   panel?: React.ReactNode;
   fullWidth?: boolean;
-  size?: Sizes;
+  size?: TabsSize;
   align?: AlignItems;
 };
 
@@ -28,7 +28,7 @@ type TabsProps = Props & NativeAttrs;
 
 const Tabs = forwardRef<HTMLDivElement, TabsProps>(
   (
-    { children, className, style, panel, fullWidth = false, size = 'small', align = 'flex-start', ...props },
+    { children, className, style, panel, fullWidth = false, size = 'md', align = 'flex-start', ...props },
     ref
   ): JSX.Element => {
     const ariaProps = { children: children as CollectionChildren<Record<string, unknown>>, ...props };
diff --git a/packages/components/src/Text/Dl/Dl.style.tsx b/packages/components/src/Text/Dl/Dl.style.tsx
index 3e226af2a..5a40075af 100644
--- a/packages/components/src/Text/Dl/Dl.style.tsx
+++ b/packages/components/src/Text/Dl/Dl.style.tsx
@@ -1,14 +1,13 @@
 import styled from 'styled-components';
-import { resolveColor } from '@interlay/theme';
 
 import { TextProps } from '../types';
 
 const StyledDt = styled.dt<TextProps>`
-  color: ${({ color }) => resolveColor(color)};
+  color: ${({ color, theme }) => color && theme.color(color)};
 `;
 
 const StyledDd = styled.dd<TextProps>`
-  color: ${({ color }) => resolveColor(color)};
+  color: ${({ color, theme }) => color && theme.color(color)};
 `;
 
 export { StyledDd, StyledDt };
diff --git a/packages/components/src/Text/Dl/Dt.tsx b/packages/components/src/Text/Dl/Dt.tsx
index 2f7c0c65f..d1f852d41 100644
--- a/packages/components/src/Text/Dl/Dt.tsx
+++ b/packages/components/src/Text/Dl/Dt.tsx
@@ -7,9 +7,7 @@ import { mapTextProps } from '../utils';
 type DtProps = TextProps<HTMLElement>;
 
 const Dt = forwardRef<HTMLElement, DtProps>(
-  ({ color = 'tertiary', ...props }, ref): JSX.Element => (
-    <Text ref={ref} as='dt' {...mapTextProps({ color, ...props })} />
-  )
+  ({ color = 'light', ...props }, ref): JSX.Element => <Text ref={ref} as='dt' {...mapTextProps({ color, ...props })} />
 );
 
 Dt.displayName = 'Dt';
diff --git a/packages/components/src/Text/style.tsx b/packages/components/src/Text/style.tsx
index cddd50e71..56a872c06 100644
--- a/packages/components/src/Text/style.tsx
+++ b/packages/components/src/Text/style.tsx
@@ -1,8 +1,8 @@
-import { Color, FontWeight, NormalAlignments, Typography } from '@interlay/themev2';
+import { Color, FontWeight, NormalAlignments, Typography } from '@interlay/theme';
 import styled, { css } from 'styled-components';
 
 type StyledTextProps = {
-  $color: Color;
+  $color: Color | 'inherit';
   $size: Typography;
   $weight: FontWeight;
   $align?: NormalAlignments;
@@ -12,7 +12,7 @@ type StyledTextProps = {
 
 const Text = styled.p<StyledTextProps>`
   ${({ theme, $size }) => theme.typography($size)}
-  color: ${({ theme, $color }) => theme.color($color)};
+  color: ${({ theme, $color }) => ($color === 'inherit' ? 'inherit' : theme.color($color))};
   font-weight: ${({ theme, $weight }) => theme.fontWeight($weight)};
   text-align: ${({ $align }) => $align};
   white-space: ${({ $noWrap }) => $noWrap && 'nowrap'};
diff --git a/packages/components/src/Text/types.ts b/packages/components/src/Text/types.ts
index 34b36b5de..245489dd5 100644
--- a/packages/components/src/Text/types.ts
+++ b/packages/components/src/Text/types.ts
@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import { Color, FontSize, FontWeight } from '@interlay/themev2';
+import { Color, FontSize, FontWeight } from '@interlay/theme';
 
 import { NormalAlignments } from '../../../core/theme/src';
 
 type Props = {
-  color?: Color;
+  color?: Color | 'inherit';
   size?: FontSize;
   align?: NormalAlignments;
   weight?: FontWeight;
diff --git a/packages/components/src/TextLink/TextLink.style.tsx b/packages/components/src/TextLink/TextLink.style.tsx
index 601e16553..0eac3d312 100644
--- a/packages/components/src/TextLink/TextLink.style.tsx
+++ b/packages/components/src/TextLink/TextLink.style.tsx
@@ -1,22 +1,20 @@
 import styled from 'styled-components';
 import { ArrowTopRightOnSquare } from '@interlay/icons';
-import { theme, resolveColor, resolveHeight } from '@interlay/theme';
-import { Colors, FontSize, FontWeight } from '@interlay/theme';
+import { Color, FontWeight, Typography } from '@interlay/theme';
 
 type BaseTextLinkProps = {
-  $color?: Colors;
+  $color: Color;
   $isQuiet?: boolean;
-  $size?: FontSize;
+  $size: Typography;
   $weight?: FontWeight;
 };
 
 const BaseTextLink = styled.a<BaseTextLinkProps>`
   display: inline-flex;
   align-items: center;
-  color: ${({ $color }) => resolveColor($color)};
-  font-size: ${({ $size }) => $size && theme.text[$size]};
-  line-height: ${({ $size }) => resolveHeight($size)};
-  font-weight: ${({ $weight }) => $weight && theme.fontWeight[$weight]};
+  color: ${({ $color, theme }) => $color && theme.color($color)};
+  ${({ $size, theme }) => $size && theme.typography($size)};
+  font-weight: ${({ $weight, theme }) => $weight && theme.fontWeight($weight)};
   text-decoration: ${(props) => (props.$isQuiet ? 'none' : 'underline')};
 
   &:hover,
@@ -26,7 +24,7 @@ const BaseTextLink = styled.a<BaseTextLinkProps>`
 `;
 
 const StyledIcon = styled(ArrowTopRightOnSquare)`
-  margin-left: ${theme.spacing.spacing2};
+  margin-left: ${({ theme }) => theme.spacing('s')};
   width: 1em;
   height: 1em;
   color: inherit;
diff --git a/packages/components/src/TextLink/TextLink.tsx b/packages/components/src/TextLink/TextLink.tsx
index 754caeeed..cc1ae78cd 100644
--- a/packages/components/src/TextLink/TextLink.tsx
+++ b/packages/components/src/TextLink/TextLink.tsx
@@ -1,16 +1,16 @@
 import { AriaLinkOptions, useLink } from '@react-aria/link';
 import { mergeProps } from '@react-aria/utils';
 import { AnchorHTMLAttributes, forwardRef } from 'react';
-import { Colors, FontSize, FontWeight } from '@interlay/theme';
+import { Color, FontWeight, Typography } from '@interlay/theme';
 import { useDOMRef } from '@interlay/hooks';
 
 import { BaseTextLink, StyledIcon } from './TextLink.style';
 
 type Props = {
-  color?: Colors;
+  color?: Color;
   external?: boolean;
   isQuiet?: boolean;
-  size?: FontSize;
+  size?: Typography;
   weight?: FontWeight;
   icon?: boolean;
 };
@@ -21,10 +21,10 @@ type NativeAttrs = Omit<AnchorHTMLAttributes<unknown>, keyof Props & AriaAttrs>;
 
 type TextLinkProps = Props & NativeAttrs & AriaAttrs;
 
-// TODO: merge this with CTALink
+// TODO: merge this with ButtonLink
 const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
   (
-    { color = 'primary', external, isQuiet, size, weight, icon, children, href, className, ...props },
+    { color = 'light', external, isQuiet, size = 'md', weight, icon, children, href, className, ...props },
     ref
   ): JSX.Element => {
     const linkRef = useDOMRef(ref);
diff --git a/packages/components/src/TokenInput/BaseTokenInput.style.tsx b/packages/components/src/TokenInput/BaseTokenInput.style.tsx
index 09baed4b4..247c05c95 100644
--- a/packages/components/src/TokenInput/BaseTokenInput.style.tsx
+++ b/packages/components/src/TokenInput/BaseTokenInput.style.tsx
@@ -1,4 +1,4 @@
-import { InputSizes, TokenInputSize } from '@interlay/themev2';
+import { InputSizes, TokenInputSize } from '@interlay/theme';
 import styled, { css } from 'styled-components';
 
 import { Flex } from '../Flex';
@@ -40,6 +40,8 @@ const StyledBaseInput = styled.input<StyledBaseInputProps>`
       padding-left: ${paddingLeft};
       padding-right: ${paddingRight};
 
+      position: relative;
+
       ${sizeCss}
       ${theme.input.base}
       ${$hasError && theme.input.error.base}
@@ -52,7 +54,6 @@ const StyledBaseInput = styled.input<StyledBaseInputProps>`
       }
 
       &:focus:not(:disabled) {
-        z-index: 1;
         ${$hasError ? theme.input.error.focus : theme.input.focus}
       }
 
@@ -74,7 +75,7 @@ const StyledUSDAdornment = styled.span<StyledUSDAdornmentProps>`
   overflow: hidden;
   max-width: -webkit-fill-available;
   text-overflow: ellipsis;
-  ${({ theme, $size }) => theme.tokenInput.size[$size].addornment.bottom}
+  ${({ theme }) => theme.tokenInput.addorment.usd}
 `;
 
 type StyledAdornmentProps = {
@@ -90,11 +91,23 @@ const StyledAdornment = styled.div<StyledAdornmentProps>`
   bottom: ${({ theme }) => theme.spacing('s')};
   overflow: hidden;
   max-width: ${({ theme, $size }) => `calc(100% - (2 *${theme.input.size[$size].paddingLeft}))`};
-  z-index: 2;
+  z-index: 1;
+  z-index: 5;
+
+  pointer-events: none;
+`;
+
+const StyledGroupInputWrapper = styled(Flex)`
+  input:focus,
+  button:focus,
+  input:hover,
+  button:hover {
+    z-index: 5;
+  }
 `;
 
-const StyledInputWrapper = styled(Flex)`
+const StyledNumberInputWrapper = styled.div`
   position: relative;
 `;
 
-export { StyledBaseInput, StyledAdornment, StyledUSDAdornment, StyledInputWrapper };
+export { StyledBaseInput, StyledAdornment, StyledUSDAdornment, StyledNumberInputWrapper, StyledGroupInputWrapper };
diff --git a/packages/components/src/TokenInput/BaseTokenInput.tsx b/packages/components/src/TokenInput/BaseTokenInput.tsx
index 11996077c..f65a2abe8 100644
--- a/packages/components/src/TokenInput/BaseTokenInput.tsx
+++ b/packages/components/src/TokenInput/BaseTokenInput.tsx
@@ -1,16 +1,22 @@
 import { useCurrencyFormatter, useDOMRef } from '@interlay/hooks';
-import { Spacing, TokenInputSize } from '@interlay/themev2';
+import { Spacing, TokenInputSize } from '@interlay/theme';
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield';
 import { mergeProps } from '@react-aria/utils';
 import { ChangeEventHandler, FocusEvent, forwardRef, ReactNode, useCallback, useEffect, useState } from 'react';
-import { HelperTextProps } from 'src/HelperText';
-import { LabelProps } from 'src/Label';
 
+import { HelperTextProps } from '../HelperText';
+import { LabelProps } from '../Label';
 import { Field, FieldProps, useFieldProps } from '../Field';
 import { Flex } from '../Flex';
 import { hasError } from '../utils/input';
 
-import { StyledAdornment, StyledBaseInput, StyledInputWrapper, StyledUSDAdornment } from './BaseTokenInput.style';
+import {
+  StyledAdornment,
+  StyledBaseInput,
+  StyledGroupInputWrapper,
+  StyledNumberInputWrapper,
+  StyledUSDAdornment
+} from './BaseTokenInput.style';
 import { TokenInputLabel } from './TokenInputLabel';
 
 const escapeRegExp = (string: string): string => {
@@ -108,9 +114,9 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
     const hasLabel = !!label || !!balance;
 
     // FIXME: move this into Field
-    const { fieldProps: styleFieldProps } = useFieldProps({ ...props, descriptionProps, errorMessageProps });
+    const { fieldProps: styleFieldProps } = useFieldProps({ ...props, descriptionProps, errorMessageProps } as any);
 
-    const error = hasError({ isInvalid, errorMessage: props.errorMessage });
+    const error = hasError({ isInvalid, errorMessage: props.errorMessage } as any);
 
     const bottomAdornment = valueUSD !== undefined && (
       <StyledUSDAdornment $isDisabled={isDisabled} $size={size}>
@@ -126,18 +132,20 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
               {label}
             </TokenInputLabel>
           )}
-          <StyledInputWrapper>
-            <StyledBaseInput
-              ref={ref}
-              $adornmentBottom={!!bottomAdornment}
-              $hasError={error}
-              $size={size}
-              placeholder={placeholder}
-              {...mergeProps(inputProps, { onChange: handleChange })}
-            />
-            <StyledAdornment $size={size}>{bottomAdornment}</StyledAdornment>
+          <StyledGroupInputWrapper>
+            <StyledNumberInputWrapper>
+              <StyledBaseInput
+                ref={ref}
+                $adornmentBottom={!!bottomAdornment}
+                $hasError={error}
+                $size={size}
+                placeholder={placeholder}
+                {...mergeProps(inputProps, { onChange: handleChange })}
+              />
+              <StyledAdornment $size={size}>{bottomAdornment}</StyledAdornment>
+            </StyledNumberInputWrapper>
             {endAdornment}
-          </StyledInputWrapper>
+          </StyledGroupInputWrapper>
           {children}
         </Flex>
       </Field>
diff --git a/packages/components/src/TokenInput/SelectableTokenInput.tsx b/packages/components/src/TokenInput/SelectableTokenInput.tsx
index 303f8853b..ac5d01c26 100644
--- a/packages/components/src/TokenInput/SelectableTokenInput.tsx
+++ b/packages/components/src/TokenInput/SelectableTokenInput.tsx
@@ -4,8 +4,8 @@ import { Key, ReactNode, forwardRef, useEffect, useState } from 'react';
 import { HelperText } from '../HelperText';
 
 import { BaseTokenInput, BaseTokenInputProps } from './BaseTokenInput';
-import { TokenSelect, TokenSelectProps } from './TokenSelect';
 import { TokenInputBalance } from './TokenInputBalance';
+import { TokenSelect, TokenSelectProps } from './TokenSelect';
 
 type Props = {
   balance?: string | number;
@@ -32,6 +32,7 @@ const SelectableTokenInput = forwardRef<HTMLInputElement, SelectableTokenInputPr
       balanceLabel,
       humanBalance,
       onClickBalance,
+      size,
       ...props
     },
     ref
@@ -66,6 +67,8 @@ const SelectableTokenInput = forwardRef<HTMLInputElement, SelectableTokenInputPr
         description={undefined}
         errorMessage={undefined}
         isInvalid={isInvalid}
+        maxWidth='7rem'
+        size={size}
         value={ticker}
         onSelectionChange={chain(onSelectionChange, handleTokenChange)}
       />
diff --git a/packages/components/src/TokenInput/TokenAdornment.tsx b/packages/components/src/TokenInput/TokenAdornment.tsx
index ab3b04a08..ff065e0ed 100644
--- a/packages/components/src/TokenInput/TokenAdornment.tsx
+++ b/packages/components/src/TokenInput/TokenAdornment.tsx
@@ -1,4 +1,4 @@
-import { TokenInputSize } from '@interlay/themev2';
+import { TokenInputSize } from '@interlay/theme';
 
 import { FlexProps } from '../Flex';
 
diff --git a/packages/components/src/TokenInput/TokenInput.style.tsx b/packages/components/src/TokenInput/TokenInput.style.tsx
index e5001ee72..7240be28c 100644
--- a/packages/components/src/TokenInput/TokenInput.style.tsx
+++ b/packages/components/src/TokenInput/TokenInput.style.tsx
@@ -1,11 +1,8 @@
-import styled from 'styled-components';
-import { ChevronDown } from '@interlay/icons';
-import { theme } from '@interlay/theme';
-import { TokenInputSize } from '@interlay/themev2';
+import styled, { css } from 'styled-components';
+import { TokenInputSize } from '@interlay/theme';
 
 import { UnstyledButton } from '../UnstyledButton';
 import { Flex } from '../Flex';
-import { List } from '../List';
 import { StyledTrigger } from '../Select/Select.style';
 import { Span } from '../Text';
 
@@ -24,12 +21,15 @@ const StyledTicker = styled.span`
 `;
 
 const StyledTokenAdornment = styled(Flex)<StyledTokenAdornmentProps>`
-  ${({ theme, $size }) => theme.tokenInput.size[$size].addornment.token.base}
+  ${({ theme, $size }) => css`
+    ${theme.tokenInput.addorment.token.base}
+    ${theme.tokenInput.size[$size].addornment.token.base}
+  `}
 `;
 
 const StyledTokenImg = styled.img<StyledTokenAdornmentProps>`
   ${({ theme, $size }) => theme.tokenInput.size[$size].addornment.token.img}
-  border-radius: ${theme.rounded.full};
+  border-radius: ${({ theme }) => theme.rounded('full')};
 `;
 
 const StyledTokenSelect = styled(StyledTrigger)`
@@ -37,28 +37,30 @@ const StyledTokenSelect = styled(StyledTrigger)`
   border-bottom-left-radius: 0;
   overflow: hidden;
   margin-left: -1px;
-  max-width: 150px;
-  width: 100%;
-`;
-
-const StyledChevronDown = styled(ChevronDown)`
-  margin-left: ${theme.spacing.spacing1};
 `;
 
 const StyledListItemLabel = styled(Span)<StyledListItemSelectedLabelProps>`
-  color: ${({ $isSelected }) =>
-    $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text};
   text-overflow: ellipsis;
   overflow: hidden;
-`;
 
-const StyledList = styled(List)`
-  overflow: auto;
-  padding: 0 ${theme.spacing.spacing4} ${theme.spacing.spacing2} ${theme.spacing.spacing4};
+  ${({ theme, $isSelected }) => {
+    return css`
+      ${theme.tokenInput.list.item.ticker}
+      ${$isSelected && theme.tokenInput.list.item.selected.ticker}
+    `;
+  }}
 `;
 
-const StyledListHeader = styled(Flex)`
-  padding: ${theme.spacing.spacing2} ${theme.spacing.spacing4};
+const StyledListItemUsd = styled(Span)<StyledListItemSelectedLabelProps>`
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  ${({ theme, $isSelected }) => {
+    return css`
+      ${theme.tokenInput.list.item.usd}
+      ${$isSelected && theme.tokenInput.list.item.selected.usd}
+    `;
+  }}
 `;
 
 const StyledListTokenWrapper = styled(Flex)`
@@ -77,14 +79,12 @@ const StyledBalanceLabel = styled(Span)`
 
 export {
   StyledBalanceLabel,
-  StyledChevronDown,
-  StyledList,
-  StyledListHeader,
   StyledListItemLabel,
   StyledListTokenWrapper,
   StyledTicker,
   StyledBalanceButton,
   StyledTokenAdornment,
   StyledTokenSelect,
-  StyledTokenImg
+  StyledTokenImg,
+  StyledListItemUsd
 };
diff --git a/packages/components/src/TokenInput/TokenListItem.tsx b/packages/components/src/TokenInput/TokenListItem.tsx
index 5f37cd968..cde246d24 100644
--- a/packages/components/src/TokenInput/TokenListItem.tsx
+++ b/packages/components/src/TokenInput/TokenListItem.tsx
@@ -2,9 +2,8 @@ import { useCurrencyFormatter } from '@interlay/hooks';
 
 import { Flex } from '../Flex';
 import { useSelectModalContext } from '../Select/SelectModalContext';
-import { Span } from '../Text';
 
-import { StyledListItemLabel, StyledListTokenWrapper, StyledTokenImg } from './TokenInput.style';
+import { StyledListItemLabel, StyledListItemUsd, StyledListTokenWrapper, StyledTokenImg } from './TokenInput.style';
 import { TokenData } from './TokenSelect';
 
 type TokenListItemProps = { isDisabled?: boolean } & TokenData;
@@ -15,15 +14,15 @@ const TokenListItem = ({ balance, balanceUSD, ticker, logoUrl, isDisabled }: Tok
 
   return (
     <>
-      <StyledListTokenWrapper alignItems='center' flex='1' gap='spacing2'>
-        <StyledTokenImg alt={ticker} src={logoUrl} />
+      <StyledListTokenWrapper alignItems='center' flex='1' gap='s'>
+        <StyledTokenImg $size='lg' alt={ticker} src={logoUrl} />
         <StyledListItemLabel $isSelected={isSelected}>{ticker}</StyledListItemLabel>
       </StyledListTokenWrapper>
-      <Flex alignItems='flex-end' direction='column' flex='0' gap='spacing2'>
+      <Flex alignItems='flex-end' direction='column' flex='0' gap='xs'>
         <StyledListItemLabel $isSelected={isSelected}>{balance}</StyledListItemLabel>
-        <Span color='light' size='s'>
+        <StyledListItemUsd $isSelected={isSelected} color='light'>
           {format(balanceUSD)}
-        </Span>
+        </StyledListItemUsd>
       </Flex>
     </>
   );
diff --git a/packages/components/src/TokenInput/TokenSelect.tsx b/packages/components/src/TokenInput/TokenSelect.tsx
index 1db0f50bf..889d5d942 100644
--- a/packages/components/src/TokenInput/TokenSelect.tsx
+++ b/packages/components/src/TokenInput/TokenSelect.tsx
@@ -1,8 +1,8 @@
 import { mergeProps } from '@react-aria/utils';
 
+import { Span } from '../Text';
 import { Flex } from '../Flex';
 import { Item, ModalSelectProps, Select } from '../Select';
-import { Span } from '../Text';
 
 import { StyledTicker, StyledTokenImg, StyledTokenSelect } from './TokenInput.style';
 import { TokenListItem } from './TokenListItem';
@@ -23,15 +23,21 @@ type TokenData = {
 
 type TokenSelectProps = Omit<ModalSelectProps<TokenData>, 'children' | 'type'>;
 
-const TokenSelect = ({ modalProps, ...props }: TokenSelectProps): JSX.Element => (
+const TokenSelect = ({ modalProps, value, ...props }: TokenSelectProps): JSX.Element => (
   <Select<TokenData>
     {...props}
     aria-label='select token'
     asSelectTrigger={StyledTokenSelect}
-    modalProps={mergeProps({ title: 'Select Token' }, modalProps)}
-    placeholder={<Span>Select Token</Span>}
+    maxWidth={value ? '6.75rem' : '7.5rem'}
+    modalProps={mergeProps({ title: 'Select Token', listProps: { maxHeight: '32rem' } }, modalProps)}
+    placeholder={
+      <Span color='inherit' size='s'>
+        Select token
+      </Span>
+    }
     renderValue={(item) => <Value data={item.value as TokenData} />}
     type='modal'
+    value={value}
   >
     {(data: TokenData) => (
       <Item key={data.ticker} textValue={data.ticker}>
diff --git a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
index 4b46bb8b6..5cbe7e42f 100644
--- a/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
+++ b/packages/components/src/TokenInput/__tests__/TokenInput.test.tsx
@@ -7,7 +7,7 @@ import { TokenInput } from '..';
 
 describe('TokenInput', () => {
   it('should render correctly', () => {
-    const wrapper = render(<TokenInput label='label' ticker='BTC' />);
+    const wrapper = render(<TokenInput label='label' logoUrl='' ticker='BTC' />);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
@@ -15,28 +15,28 @@ describe('TokenInput', () => {
   it('ref should be forwarded', () => {
     const ref = createRef<HTMLInputElement>();
 
-    render(<TokenInput ref={ref} label='label' ticker='BTC' />);
+    render(<TokenInput ref={ref} label='label' logoUrl='' ticker='BTC' />);
     expect(ref.current).not.toBeNull();
   });
 
   it('should pass a11y', async () => {
-    await testA11y(<TokenInput label='label' ticker='BTC' />);
+    await testA11y(<TokenInput label='label' logoUrl='' ticker='BTC' />);
   });
 
   it('should render with placeholder', () => {
-    render(<TokenInput label='label' ticker='BTC' />);
+    render(<TokenInput label='label' logoUrl='' ticker='BTC' />);
 
     expect(screen.getByPlaceholderText('0')).toBeInTheDocument();
   });
 
   it('should render with usd value', () => {
-    render(<TokenInput label='label' ticker='BTC' valueUSD={10} />);
+    render(<TokenInput label='label' logoUrl='' ticker='BTC' valueUSD={10} />);
 
     expect(screen.getByText('$10.00')).toBeInTheDocument();
   });
 
   it('should render with default value', () => {
-    render(<TokenInput defaultValue='10' label='label' ticker='BTC' />);
+    render(<TokenInput defaultValue='10' label='label' logoUrl='' ticker='BTC' />);
 
     expect(screen.getByRole('textbox', { name: /label/i })).toHaveValue('10');
   });
@@ -47,7 +47,7 @@ describe('TokenInput', () => {
 
       const handleValueChange = (value?: string | number) => setValue(value?.toString() || '');
 
-      return <TokenInput label='label' ticker='BTC' value={value} onValueChange={handleValueChange} />;
+      return <TokenInput label='label' logoUrl='' ticker='BTC' value={value} onValueChange={handleValueChange} />;
     };
 
     render(<Component />);
@@ -64,20 +64,20 @@ describe('TokenInput', () => {
   });
 
   it('should render description', () => {
-    render(<TokenInput description='Please select token' label='label' ticker='BTC' />);
+    render(<TokenInput description='Please select token' label='label' logoUrl='' ticker='BTC' />);
 
     expect(screen.getByRole('textbox', { name: /label/i })).toHaveAccessibleDescription(/please select token$/i);
   });
 
   describe('balance', () => {
     it('should render', () => {
-      render(<TokenInput balance={10} label='label' ticker='BTC' />);
+      render(<TokenInput balance={10} label='label' logoUrl='' ticker='BTC' />);
 
       expect(screen.getByRole('definition')).toHaveTextContent('10');
     });
 
     it('should render human value', () => {
-      render(<TokenInput balance={10} humanBalance={11} label='label' ticker='BTC' />);
+      render(<TokenInput balance={10} humanBalance={11} label='label' logoUrl='' ticker='BTC' />);
 
       expect(screen.getByRole('definition')).toHaveTextContent('11');
     });
@@ -91,6 +91,7 @@ describe('TokenInput', () => {
           balance={10}
           humanBalance={11}
           label='label'
+          logoUrl=''
           ticker='BTC'
           onClickBalance={handleClickBalance}
           onValueChange={handleValueChange}
@@ -114,7 +115,14 @@ describe('TokenInput', () => {
       const handleBlur = jest.fn();
 
       render(
-        <TokenInput balance={10} label='label' ticker='BTC' onBlur={handleBlur} onClickBalance={handleClickBalance} />
+        <TokenInput
+          balance={10}
+          label='label'
+          logoUrl=''
+          ticker='BTC'
+          onBlur={handleBlur}
+          onClickBalance={handleClickBalance}
+        />
       );
 
       userEvent.type(screen.getByRole('textbox', { name: /label/i }), '1');
@@ -140,7 +148,14 @@ describe('TokenInput', () => {
       const handleClickBalance = jest.fn();
 
       render(
-        <TokenInput balance={0} humanBalance={11} label='label' ticker='BTC' onClickBalance={handleClickBalance} />
+        <TokenInput
+          balance={0}
+          humanBalance={11}
+          label='label'
+          logoUrl=''
+          ticker='BTC'
+          onClickBalance={handleClickBalance}
+        />
       );
 
       expect(screen.getByRole('button', { name: /apply max balance/i })).toBeDisabled();
@@ -149,7 +164,9 @@ describe('TokenInput', () => {
     it('should have max btn disabled when input is disabled', async () => {
       const handleClickBalance = jest.fn();
 
-      render(<TokenInput isDisabled balance={10} label='label' ticker='BTC' onClickBalance={handleClickBalance} />);
+      render(
+        <TokenInput isDisabled balance={10} label='label' logoUrl='' ticker='BTC' onClickBalance={handleClickBalance} />
+      );
 
       expect(screen.getByRole('button', { name: /apply max balance/i })).toBeDisabled();
     });
@@ -157,44 +174,38 @@ describe('TokenInput', () => {
 
   describe('fixed type', () => {
     it('should render with ticker adornment', () => {
-      render(<TokenInput label='label' ticker='BTC' />);
+      render(<TokenInput label='label' logoUrl='' ticker='BTC' />);
 
       expect(screen.getAllByText(/btc/i)).toHaveLength(2);
     });
 
     it('should render with unknown ticker', () => {
-      render(<TokenInput label='label' ticker='ABC' />);
+      render(<TokenInput label='label' logoUrl='' ticker='ABC' />);
 
       expect(screen.getAllByText(/abc/i)).toHaveLength(2);
     });
-
-    it('should render with multi ticker', () => {
-      render(<TokenInput label='label' ticker={{ text: 'Custom', icons: ['BTC', 'ABC'] }} />);
-
-      expect(screen.getAllByText(/custom/i)).toHaveLength(2);
-    });
   });
 
-  describe('selectable type', () => {
+  describe('seleButtonble type', () => {
     const items = [
-      { balance: 1, value: 'BTC', balanceUSD: 10000 },
-      { balance: 2, value: 'ETH', balanceUSD: 900 }
+      { balance: 1, ticker: 'BTC', balanceUSD: 10000, logoUrl: '' },
+      { balance: 2, ticker: 'ETH', balanceUSD: 900, logoUrl: '' }
     ];
 
     it('should render correctly', async () => {
-      const wrapper = render(<TokenInput label='label' selectProps={{ items }} type='selectable' />);
+      const wrapper = render(<TokenInput label='label' selectProps={{ items }} type='seleButtonble' />);
 
       expect(() => wrapper.unmount()).not.toThrow();
     });
 
     it('should pass a11y', async () => {
-      await testA11y(<TokenInput label='label' selectProps={{ items }} type='selectable' />);
+      await testA11y(<TokenInput label='label' selectProps={{ items }} type='seleButtonble' />);
     });
 
     it('ref should be forwarded to the modal', async () => {
       const ref = createRef<HTMLInputElement>();
 
-      render(<TokenInput label='label' selectProps={{ items, modalProps: { ref } }} type='selectable' />);
+      render(<TokenInput label='label' selectProps={{ items, modalProps: { ref } }} type='seleButtonble' />);
 
       userEvent.click(screen.getByRole('button', { name: /select token/i }));
 
@@ -206,13 +217,13 @@ describe('TokenInput', () => {
     });
 
     it('should render empty value', () => {
-      render(<TokenInput label='label' selectProps={{ items }} type='selectable' />);
+      render(<TokenInput label='label' selectProps={{ items }} type='seleButtonble' />);
 
       expect(screen.getByRole('button', { name: /select token/i })).toHaveTextContent(/select token$/i);
     });
 
     it('should render default value', () => {
-      render(<TokenInput label='label' selectProps={{ defaultValue: 'BTC', items }} type='selectable' />);
+      render(<TokenInput label='label' selectProps={{ defaultValue: 'BTC', items }} type='seleButtonble' />);
 
       expect(screen.getByRole('button', { name: /select token/i })).toHaveTextContent('BTC');
     });
@@ -227,7 +238,7 @@ describe('TokenInput', () => {
           <TokenInput
             label='label'
             selectProps={{ defaultValue: 'BTC', items, onSelectionChange: handleSelectionChange, value }}
-            type='selectable'
+            type='seleButtonble'
           />
         );
       };
@@ -255,7 +266,7 @@ describe('TokenInput', () => {
 
     it('should render description', () => {
       render(
-        <TokenInput label='label' selectProps={{ items, description: 'Please select token' }} type='selectable' />
+        <TokenInput label='label' selectProps={{ items, description: 'Please select token' }} type='seleButtonble' />
       );
 
       expect(screen.getByRole('button', { name: /select token/i })).toHaveAccessibleDescription(
@@ -265,7 +276,11 @@ describe('TokenInput', () => {
 
     it('should render select error message', () => {
       render(
-        <TokenInput label='label' selectProps={{ items, errorMessage: 'Token field is required' }} type='selectable' />
+        <TokenInput
+          label='label'
+          selectProps={{ items, errorMessage: 'Token field is required' }}
+          type='seleButtonble'
+        />
       );
 
       expect(screen.getByRole('button', { name: /select token/i })).toHaveAccessibleDescription(
diff --git a/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx b/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx
index 0e31db7e2..ed35775c2 100644
--- a/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx
+++ b/packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx
@@ -26,7 +26,7 @@ export default {
     ticker: { control: 'select', options: Object.keys(coins) }
   },
   args: {
-    type: 'selectable',
+    type: 'seleButtonble',
     label: 'Amount',
     selectProps: {
       items
@@ -34,9 +34,9 @@ export default {
   }
 } as Meta<typeof TokenInput>;
 
-export const Selectable: StoryObj<TokenInputProps> = {};
+export const SeleButtonble: StoryObj<TokenInputProps> = {};
 
-export const SelectableDefaultValue: StoryObj<TokenInputProps> = {
+export const SeleButtonbleDefaultValue: StoryObj<TokenInputProps> = {
   args: {
     selectProps: {
       defaultValue: 'BTC',
@@ -52,23 +52,24 @@ const ControlledSelectComponent = (args: any) => {
     <TokenInput
       {...args}
       selectProps={mergeProps(args.selectProps, { value: state, onSelectionChange: setState })}
-      type='selectable'
+      type='seleButtonble'
     />
   );
 };
 
-export const SelectableControlledValue: StoryObj<TokenInputProps> = {
+export const SeleButtonbleControlledValue: StoryObj<TokenInputProps> = {
   render: ControlledSelectComponent
 };
 
-export const SelectableWithBalance: StoryObj<TokenInputProps> = {
+export const SeleButtonbleWithBalance: StoryObj<TokenInputProps> = {
   args: {
     balance: '10',
-    valueUSD: '0'
+    valueUSD: 0,
+    size: 's'
   }
 };
 
-export const SelectableDescription: StoryObj<TokenInputProps> = {
+export const SeleButtonbleDescription: StoryObj<TokenInputProps> = {
   args: {
     selectProps: {
       items,
@@ -77,7 +78,7 @@ export const SelectableDescription: StoryObj<TokenInputProps> = {
   }
 };
 
-export const SelectableErrorMessage: StoryObj<TokenInputProps> = {
+export const SeleButtonbleErrorMessage: StoryObj<TokenInputProps> = {
   args: {
     selectProps: {
       items,
diff --git a/packages/components/src/Tooltip/Tooltip.stories.tsx b/packages/components/src/Tooltip/Tooltip.stories.tsx
index cc78cf00e..31c854db2 100644
--- a/packages/components/src/Tooltip/Tooltip.stories.tsx
+++ b/packages/components/src/Tooltip/Tooltip.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 
-import { CTA } from '../CTA';
+import { Button } from '../Button';
 
 import { Tooltip, TooltipProps } from '.';
 
@@ -12,7 +12,7 @@ export default {
   },
   render: (args) => (
     <Tooltip {...args}>
-      <CTA>Hover Me</CTA>
+      <Button>Hover Me</Button>
     </Tooltip>
   ),
   args: {
diff --git a/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx b/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx
index ac084b549..6b5bcbe66 100644
--- a/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx
+++ b/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx
@@ -2,11 +2,11 @@ import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { testA11y } from '@interlay/test-utils';
 
-import { CTA } from '..';
+import { UnstyledButton } from '..';
 
-describe('CTA', () => {
+describe('UnstyledButton', () => {
   it('should render correctly', () => {
-    const wrapper = render(<CTA>Button</CTA>);
+    const wrapper = render(<UnstyledButton>Button</UnstyledButton>);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
@@ -14,12 +14,12 @@ describe('CTA', () => {
   it('ref should be forwarded', () => {
     const ref = createRef<HTMLButtonElement>();
 
-    render(<CTA ref={ref}>Button</CTA>);
+    render(<UnstyledButton ref={ref}>Button</UnstyledButton>);
 
     expect(ref.current).not.toBeNull();
   });
 
   it('should pass a11y', async () => {
-    await testA11y(<CTA>Button</CTA>);
+    await testA11y(<UnstyledButton>Button</UnstyledButton>);
   });
 });
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 040431128..e64b57f02 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -6,8 +6,6 @@ export type { AlertProps } from './Alert';
 export { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbItemProps, BreadcrumbsProps } from './Breadcrumbs';
 export { CSSReset } from './CSSReset';
-export { CTA, CTALink } from './CTA';
-export type { CTALinkProps, CTAProps } from './CTA';
 export { Card } from './Card';
 export type { CardProps } from './Card';
 export { Divider } from './Divider';
@@ -18,8 +16,6 @@ export { Field, useFieldProps } from './Field';
 export type { FieldProps } from './Field';
 export { Flex } from './Flex';
 export type { FlexProps } from './Flex';
-export { Grid, GridItem } from './Grid';
-export type { GridItemProps, GridProps } from './Grid';
 export { Input } from './Input';
 export type { InputProps } from './Input';
 export { Label } from './Label';
diff --git a/packages/components/src/types/styled-components.d.ts b/packages/components/src/types/styled-components.d.ts
index b69c7ca19..532240058 100644
--- a/packages/components/src/types/styled-components.d.ts
+++ b/packages/components/src/types/styled-components.d.ts
@@ -1,4 +1,4 @@
-import { Theme } from '@interlay/themev2';
+import { Theme } from '@interlay/theme';
 
 declare module 'styled-components' {
   export interface DefaultTheme extends Theme {}
diff --git a/packages/components/src/utils/margin.ts b/packages/components/src/utils/margin.ts
index d354bd99c..b3e052821 100644
--- a/packages/components/src/utils/margin.ts
+++ b/packages/components/src/utils/margin.ts
@@ -1,8 +1,6 @@
-import { StyledMarginProps } from '@interlay/hooks';
-import { Theme } from '@interlay/themev2';
 import { css } from 'styled-components';
 
-const marginCSS = ({ theme, ...props }: StyledMarginProps & { theme: Theme }) => {
+const marginCSS = ({ theme, ...props }: any) => {
   const marginTop = props.$marginTop || props.$marginY;
   const marginBottom = props.$marginBottom || props.$marginY;
   const marginLeft = props.$marginLeft || props.$marginX;
diff --git a/packages/components/src/utils/overlay.ts b/packages/components/src/utils/overlay.ts
index ed0a3e9e1..9663339d6 100644
--- a/packages/components/src/utils/overlay.ts
+++ b/packages/components/src/utils/overlay.ts
@@ -1,25 +1,24 @@
+import { Placement } from '@interlay/theme';
 import { css } from 'styled-components';
 
-import { Placement, theme } from '../../../core/theme/src';
-
 const getOverlayPlacementCSS = (placement: Placement) => {
   switch (placement) {
     case 'bottom':
       return css`
-        transform: translateY(${theme.overlay.placement.transform});
+        transform: translateY(6px);
       `;
     case 'right':
       return css`
-        transform: translateX(${theme.overlay.placement.transform});
+        transform: translateX(6px);
       `;
     case 'left':
       return css`
-        transform: translateX(calc(${theme.overlay.placement.transform} * -1));
+        transform: translateX(-6px);
       `;
     case 'top':
     default:
       return css`
-        transform: translateY(calc(${theme.overlay.placement.transform} * -1));
+        transform: translateY(-6px);
       `;
   }
 };
@@ -29,9 +28,9 @@ const overlayCSS = (isOpen: boolean) => css`
   opacity: ${isOpen ? 1 : 0};
   pointer-events: ${isOpen ? 'auto' : 'none'};
   transition:
-    transform ${theme.transition.duration.duration100}ms ease-in-out,
-    opacity ${theme.transition.duration.duration100}ms ease-in-out,
-    visibility 0ms linear ${theme.transition.duration.duration100}ms;
+    transform 100ms ease-in-out,
+    opacity 100ms ease-in-out,
+    visibility 0ms linear 100ms;
 `;
 
 export { getOverlayPlacementCSS, overlayCSS };
diff --git a/packages/components/src/utils/visually-hidden.ts b/packages/components/src/utils/visually-hidden.ts
index b36e7c274..d6b9d57d6 100644
--- a/packages/components/src/utils/visually-hidden.ts
+++ b/packages/components/src/utils/visually-hidden.ts
@@ -1,8 +1,6 @@
-import type { DefaultTheme, RuleSet } from 'styled-components';
-
 import { css } from 'styled-components';
 
-const hideScrollbar = (): RuleSet<DefaultTheme> => css`
+const hideScrollbar = () => css`
   &::-webkit-scrollbar {
     display: none;
   }
diff --git a/packages/core/system/src/provider.tsx b/packages/core/system/src/provider.tsx
index 3a0039ff3..460811674 100644
--- a/packages/core/system/src/provider.tsx
+++ b/packages/core/system/src/provider.tsx
@@ -18,13 +18,15 @@ interface InterlayUIProviderProps extends Omit<ModalProviderProps, 'children'> {
 const InterlayUIProvider: React.FC<InterlayUIProviderProps> = ({
   children,
   locale = 'en-US',
-  theme = {},
+  theme = {} as DefaultTheme,
   ...otherProps
 }) => {
   return (
     <ThemeProvider theme={theme}>
       <I18nProvider locale={locale}>
-        <OverlayProvider {...otherProps}>{children}</OverlayProvider>
+        <OverlayProvider {...otherProps}>
+          <div style={{ isolation: 'isolate' }}>{children}</div>
+        </OverlayProvider>
       </I18nProvider>
     </ThemeProvider>
   );
diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md
index ae505434a..cffbd256a 100644
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Patch Changes
 
-- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA
+- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and Button
 
 ## 0.0.6
 
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index 0e035734f..c57a638d1 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -42,12 +42,14 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "styled-components": ">=6.0.0"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.0.7"
   },
   "clean-package": "./clean-package.config.json"
 }
diff --git a/packages/core/themeV2/src/components/accordion.ts b/packages/core/theme/src/components/accordion.ts
similarity index 100%
rename from packages/core/themeV2/src/components/accordion.ts
rename to packages/core/theme/src/components/accordion.ts
diff --git a/packages/core/themeV2/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
similarity index 100%
rename from packages/core/themeV2/src/components/alert.ts
rename to packages/core/theme/src/components/alert.ts
diff --git a/packages/core/themeV2/src/components/button.ts b/packages/core/theme/src/components/button.ts
similarity index 100%
rename from packages/core/themeV2/src/components/button.ts
rename to packages/core/theme/src/components/button.ts
diff --git a/packages/core/themeV2/src/components/card.ts b/packages/core/theme/src/components/card.ts
similarity index 100%
rename from packages/core/themeV2/src/components/card.ts
rename to packages/core/theme/src/components/card.ts
diff --git a/packages/core/themeV2/src/components/dialog.ts b/packages/core/theme/src/components/dialog.ts
similarity index 89%
rename from packages/core/themeV2/src/components/dialog.ts
rename to packages/core/theme/src/components/dialog.ts
index 7bd8c1b5e..7a1707778 100644
--- a/packages/core/themeV2/src/components/dialog.ts
+++ b/packages/core/theme/src/components/dialog.ts
@@ -1,6 +1,7 @@
-import { MaxWidth } from 'src/core';
 import { StyledObject } from 'styled-components';
 
+import { MaxWidth } from '../core';
+
 type DialogSize = MaxWidth;
 
 type DialogTheme = {
diff --git a/packages/core/themeV2/src/components/divider.ts b/packages/core/theme/src/components/divider.ts
similarity index 100%
rename from packages/core/themeV2/src/components/divider.ts
rename to packages/core/theme/src/components/divider.ts
diff --git a/packages/core/themeV2/src/components/drawer.ts b/packages/core/theme/src/components/drawer.ts
similarity index 100%
rename from packages/core/themeV2/src/components/drawer.ts
rename to packages/core/theme/src/components/drawer.ts
diff --git a/packages/core/themeV2/src/components/index.ts b/packages/core/theme/src/components/index.ts
similarity index 89%
rename from packages/core/themeV2/src/components/index.ts
rename to packages/core/theme/src/components/index.ts
index 3824890de..cd5c088c8 100644
--- a/packages/core/themeV2/src/components/index.ts
+++ b/packages/core/theme/src/components/index.ts
@@ -13,3 +13,5 @@ export * from './spinner';
 export * from './progress-bar';
 export * from './tooltip';
 export * from './token-input';
+export * from './tabs';
+export * from './table';
diff --git a/packages/core/themeV2/src/components/input.ts b/packages/core/theme/src/components/input.ts
similarity index 93%
rename from packages/core/themeV2/src/components/input.ts
rename to packages/core/theme/src/components/input.ts
index 513b32238..a53903e07 100644
--- a/packages/core/themeV2/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -14,6 +14,7 @@ type InputTheme = {
   disabled: StyledObject<object>;
   size: Record<InputSizes, StyledObject<object>>;
   placeholder: StyledObject<object>;
+  adornment: StyledObject<object>;
 };
 
 export type { InputSizes, InputTheme };
diff --git a/packages/core/themeV2/src/components/list.ts b/packages/core/theme/src/components/list.ts
similarity index 100%
rename from packages/core/themeV2/src/components/list.ts
rename to packages/core/theme/src/components/list.ts
diff --git a/packages/core/themeV2/src/components/progress-bar.ts b/packages/core/theme/src/components/progress-bar.ts
similarity index 100%
rename from packages/core/themeV2/src/components/progress-bar.ts
rename to packages/core/theme/src/components/progress-bar.ts
diff --git a/packages/core/themeV2/src/components/radio.ts b/packages/core/theme/src/components/radio.ts
similarity index 100%
rename from packages/core/themeV2/src/components/radio.ts
rename to packages/core/theme/src/components/radio.ts
diff --git a/packages/core/themeV2/src/components/spinner.ts b/packages/core/theme/src/components/spinner.ts
similarity index 100%
rename from packages/core/themeV2/src/components/spinner.ts
rename to packages/core/theme/src/components/spinner.ts
diff --git a/packages/core/themeV2/src/components/switch.ts b/packages/core/theme/src/components/switch.ts
similarity index 100%
rename from packages/core/themeV2/src/components/switch.ts
rename to packages/core/theme/src/components/switch.ts
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
new file mode 100644
index 000000000..7694e173f
--- /dev/null
+++ b/packages/core/theme/src/components/table.ts
@@ -0,0 +1,15 @@
+import { StyledObject } from 'styled-components';
+
+type TableTheme = {
+  tab: {
+    base: StyledObject<object>;
+    item: {
+      base: StyledObject<object>;
+      hover: StyledObject<object>;
+      focus: StyledObject<object>;
+      selected: StyledObject<object>;
+    };
+  };
+};
+
+export type { TableTheme };
diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts
new file mode 100644
index 000000000..a90fff36e
--- /dev/null
+++ b/packages/core/theme/src/components/tabs.ts
@@ -0,0 +1,22 @@
+import { StyledObject } from 'styled-components';
+
+type TabsSize = 's' | 'md' | 'lg';
+
+type TabsTheme = {
+  base: StyledObject<object>;
+  item: {
+    base: StyledObject<object>;
+    hover: StyledObject<object>;
+    focus: StyledObject<object>;
+    selected: StyledObject<object>;
+  };
+  size: Record<
+    TabsSize,
+    {
+      base: StyledObject<object>;
+      item: StyledObject<object>;
+    }
+  >;
+};
+
+export type { TabsSize, TabsTheme };
diff --git a/packages/core/themeV2/src/components/token-input.ts b/packages/core/theme/src/components/token-input.ts
similarity index 64%
rename from packages/core/themeV2/src/components/token-input.ts
rename to packages/core/theme/src/components/token-input.ts
index e876071cb..9cfd0f7ed 100644
--- a/packages/core/themeV2/src/components/token-input.ts
+++ b/packages/core/theme/src/components/token-input.ts
@@ -6,12 +6,21 @@ type TokenInputSize = InputSizes;
 
 type TokenInputTheme = {
   balance: StyledObject<object>;
-  addorment: { token: { base: StyledObject<object>; img?: StyledObject<object> } };
+  addorment: { token: { base: StyledObject<object>; img?: StyledObject<object> }; usd: StyledObject<object> };
+  list: {
+    item: {
+      ticker: StyledObject<object>;
+      usd: StyledObject<object>;
+      selected: {
+        ticker: StyledObject<object>;
+        usd: StyledObject<object>;
+      };
+    };
+  };
   size: Record<
     TokenInputSize,
     {
       addornment: {
-        bottom: StyledObject<object>;
         token: { base: StyledObject<object>; img: StyledObject<object> };
       };
     }
diff --git a/packages/core/themeV2/src/components/tooltip.ts b/packages/core/theme/src/components/tooltip.ts
similarity index 100%
rename from packages/core/themeV2/src/components/tooltip.ts
rename to packages/core/theme/src/components/tooltip.ts
diff --git a/packages/core/theme/src/breakpoints.ts b/packages/core/theme/src/core/breakpoints.ts
similarity index 100%
rename from packages/core/theme/src/breakpoints.ts
rename to packages/core/theme/src/core/breakpoints.ts
diff --git a/packages/core/themeV2/src/core/colors.ts b/packages/core/theme/src/core/colors.ts
similarity index 85%
rename from packages/core/themeV2/src/core/colors.ts
rename to packages/core/theme/src/core/colors.ts
index c1494a27b..41157ba3a 100644
--- a/packages/core/themeV2/src/core/colors.ts
+++ b/packages/core/theme/src/core/colors.ts
@@ -21,7 +21,7 @@ type Palette = {
 
 type Color = keyof Palette;
 
-const color = (colors: Palette) => (color: Color) => colors[color];
+const color = (colors: Palette) => (color: Color | 'inherit') => (color === 'inherit' ? color : colors[color]);
 
 export { color };
 export type { Color, Palette, PrimaryColors, GreyColors, BlueColors, GreenColors, RedColors };
diff --git a/packages/core/themeV2/src/core/font-size.ts b/packages/core/theme/src/core/font-size.ts
similarity index 100%
rename from packages/core/themeV2/src/core/font-size.ts
rename to packages/core/theme/src/core/font-size.ts
diff --git a/packages/core/themeV2/src/core/font-weight.ts b/packages/core/theme/src/core/font-weight.ts
similarity index 100%
rename from packages/core/themeV2/src/core/font-weight.ts
rename to packages/core/theme/src/core/font-weight.ts
diff --git a/packages/core/themeV2/src/core/icon.ts b/packages/core/theme/src/core/icon.ts
similarity index 91%
rename from packages/core/themeV2/src/core/icon.ts
rename to packages/core/theme/src/core/icon.ts
index f819c4caa..5f0ec1208 100644
--- a/packages/core/themeV2/src/core/icon.ts
+++ b/packages/core/theme/src/core/icon.ts
@@ -44,9 +44,9 @@ const iconSizeBase: Record<IconsSizes, Styles<object>> = {
 const icon = (colors: Palette) => {
   const getColor = color(colors);
 
-  return (size: IconsSizes, color: Color = 'light') => css`
+  return (size: IconsSizes, color?: Color) => css`
     ${iconSizeBase[size]}
-    color: ${getColor(color)};
+    color: ${color && getColor(color)};
   `;
 };
 
diff --git a/packages/core/themeV2/src/core/index.ts b/packages/core/theme/src/core/index.ts
similarity index 100%
rename from packages/core/themeV2/src/core/index.ts
rename to packages/core/theme/src/core/index.ts
diff --git a/packages/core/themeV2/src/core/line-height.ts b/packages/core/theme/src/core/line-height.ts
similarity index 100%
rename from packages/core/themeV2/src/core/line-height.ts
rename to packages/core/theme/src/core/line-height.ts
diff --git a/packages/core/themeV2/src/core/max-width.ts b/packages/core/theme/src/core/max-width.ts
similarity index 100%
rename from packages/core/themeV2/src/core/max-width.ts
rename to packages/core/theme/src/core/max-width.ts
diff --git a/packages/core/themeV2/src/core/rounded.ts b/packages/core/theme/src/core/rounded.ts
similarity index 100%
rename from packages/core/themeV2/src/core/rounded.ts
rename to packages/core/theme/src/core/rounded.ts
diff --git a/packages/core/themeV2/src/core/space.ts b/packages/core/theme/src/core/space.ts
similarity index 100%
rename from packages/core/themeV2/src/core/space.ts
rename to packages/core/theme/src/core/space.ts
diff --git a/packages/core/themeV2/src/core/transition.ts b/packages/core/theme/src/core/transition.ts
similarity index 100%
rename from packages/core/themeV2/src/core/transition.ts
rename to packages/core/theme/src/core/transition.ts
diff --git a/packages/core/themeV2/src/core/typography.ts b/packages/core/theme/src/core/typography.ts
similarity index 100%
rename from packages/core/themeV2/src/core/typography.ts
rename to packages/core/theme/src/core/typography.ts
diff --git a/packages/core/themeV2/src/define.ts b/packages/core/theme/src/define.ts
similarity index 93%
rename from packages/core/themeV2/src/define.ts
rename to packages/core/theme/src/define.ts
index e84c8de2e..f13e0b1b8 100644
--- a/packages/core/themeV2/src/define.ts
+++ b/packages/core/theme/src/define.ts
@@ -28,7 +28,9 @@ import {
   SpinnerTheme,
   ProgressBarTheme,
   TooltipTheme,
-  TokenInputTheme
+  TokenInputTheme,
+  TableTheme,
+  TabsTheme
 } from './components';
 
 const baseTheme = {
@@ -60,6 +62,8 @@ type ThemeParams = {
   progressBar: ProgressBarTheme;
   tooltip: TooltipTheme;
   tokenInput: TokenInputTheme;
+  tabs: TabsTheme;
+  table: TableTheme;
 };
 
 const defineTheme = ({ colors, ...theme }: ThemeParams) => ({
diff --git a/packages/core/theme/src/index.ts b/packages/core/theme/src/index.ts
index 778db4c4f..2cee7a78c 100644
--- a/packages/core/theme/src/index.ts
+++ b/packages/core/theme/src/index.ts
@@ -1,5 +1,45 @@
-export type { ComponentLibraryTheme } from './base';
-export { default as theme } from './base';
-export * from './breakpoints';
-export type * from './types';
-export * from './utils';
+export type {
+  ButtonSizes,
+  ButtonVariants,
+  ButtonColors,
+  SpinnerColors,
+  SpinnerSizes,
+  InputSizes,
+  DividerSizes,
+  DialogSize,
+  AccordionVariants,
+  ProgressBarSize,
+  AlertStatus,
+  TokenInputSize,
+  TabsSize
+} from './components';
+export type {
+  IconsSizes,
+  Color,
+  BreakPoints,
+  FontSize,
+  FontWeight,
+  LineHeight,
+  Rounded,
+  Spacing,
+  TransitionDuration,
+  TransitionProperty,
+  TransitionTimingFunction,
+  Typography,
+  NormalAlignments,
+  MaxWidth,
+  AlignItems,
+  AlignSelf,
+  Direction,
+  JustifyContent,
+  LabelPosition,
+  MarginProps,
+  Orientation,
+  Overflow,
+  Placement,
+  Status,
+  Wrap
+} from './core';
+export { bobTheme } from './themes';
+export type { Theme } from './define';
+export * from './temp';
diff --git a/packages/core/theme/src/base.ts b/packages/core/theme/src/temp/base.ts
similarity index 100%
rename from packages/core/theme/src/base.ts
rename to packages/core/theme/src/temp/base.ts
diff --git a/packages/core/themeV2/src/core/breakpoints.ts b/packages/core/theme/src/temp/breakpoints.ts
similarity index 100%
rename from packages/core/themeV2/src/core/breakpoints.ts
rename to packages/core/theme/src/temp/breakpoints.ts
diff --git a/packages/core/theme/src/css/theme.base.css b/packages/core/theme/src/temp/css/theme.base.css
similarity index 100%
rename from packages/core/theme/src/css/theme.base.css
rename to packages/core/theme/src/temp/css/theme.base.css
diff --git a/packages/core/theme/src/css/theme.bob.css b/packages/core/theme/src/temp/css/theme.bob.css
similarity index 100%
rename from packages/core/theme/src/css/theme.bob.css
rename to packages/core/theme/src/temp/css/theme.bob.css
diff --git a/packages/core/theme/src/css/theme.interlay.css b/packages/core/theme/src/temp/css/theme.interlay.css
similarity index 100%
rename from packages/core/theme/src/css/theme.interlay.css
rename to packages/core/theme/src/temp/css/theme.interlay.css
diff --git a/packages/core/theme/src/css/theme.kintsugi.css b/packages/core/theme/src/temp/css/theme.kintsugi.css
similarity index 100%
rename from packages/core/theme/src/css/theme.kintsugi.css
rename to packages/core/theme/src/temp/css/theme.kintsugi.css
diff --git a/packages/core/theme/src/temp/index.ts b/packages/core/theme/src/temp/index.ts
new file mode 100644
index 000000000..545650ab5
--- /dev/null
+++ b/packages/core/theme/src/temp/index.ts
@@ -0,0 +1,4 @@
+export type { ComponentLibraryTheme } from './base';
+export { default as theme } from './base';
+export * from './breakpoints';
+export * from './types';
diff --git a/packages/core/theme/src/temp/types.ts b/packages/core/theme/src/temp/types.ts
new file mode 100644
index 000000000..baf80cd18
--- /dev/null
+++ b/packages/core/theme/src/temp/types.ts
@@ -0,0 +1,2 @@
+export type Variants = 'primary' | 'secondary' | 'tertiary';
+export type MeterVariants = Exclude<Variants, 'tertiary'>;
diff --git a/packages/core/themeV2/src/themes/bob/accordion.ts b/packages/core/theme/src/themes/bob/accordion.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/accordion.ts
rename to packages/core/theme/src/themes/bob/accordion.ts
diff --git a/packages/core/themeV2/src/themes/bob/alert.ts b/packages/core/theme/src/themes/bob/alert.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/alert.ts
rename to packages/core/theme/src/themes/bob/alert.ts
diff --git a/packages/core/themeV2/src/themes/bob/button.ts b/packages/core/theme/src/themes/bob/button.ts
similarity index 91%
rename from packages/core/themeV2/src/themes/bob/button.ts
rename to packages/core/theme/src/themes/bob/button.ts
index e5ece55f2..a32925d09 100644
--- a/packages/core/themeV2/src/themes/bob/button.ts
+++ b/packages/core/theme/src/themes/bob/button.ts
@@ -1,6 +1,6 @@
 import { fontSize, fontWeight, lineHeight, rounded, spacing, transition } from '../../core';
 import { ButtonTheme } from '../../components';
-import { rem } from '../../utils';
+import { hexToRgba, rem } from '../../utils';
 
 import { color } from './colors';
 
@@ -130,10 +130,10 @@ const button: ButtonTheme = {
             color: color('light')
           },
           hover: {
-            backgroundColor: color('grey-300')
+            backgroundColor: hexToRgba(color('grey-300'), 20)
           },
           active: {
-            backgroundColor: color('grey-300')
+            backgroundColor: hexToRgba(color('grey-300'), 30)
           },
           focusVisible: {
             boxShadow: '0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D'
@@ -144,13 +144,13 @@ const button: ButtonTheme = {
         },
         primary: {
           base: {
-            color: color('primary-300')
+            color: color('primary-500')
           },
           hover: {
-            backgroundColor: color('grey-300')
+            backgroundColor: hexToRgba(color('primary-500'), 20)
           },
           active: {
-            backgroundColor: color('grey-300')
+            backgroundColor: hexToRgba(color('primary-500'), 30)
           },
           focusVisible: {
             boxShadow: '0px 0px 0px 4px #D92D2040, 0px 1px 2px 0px #1018280D'
diff --git a/packages/core/themeV2/src/themes/bob/card.ts b/packages/core/theme/src/themes/bob/card.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/card.ts
rename to packages/core/theme/src/themes/bob/card.ts
diff --git a/packages/core/themeV2/src/themes/bob/colors.ts b/packages/core/theme/src/themes/bob/colors.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/colors.ts
rename to packages/core/theme/src/themes/bob/colors.ts
diff --git a/packages/core/themeV2/src/themes/bob/dialog.ts b/packages/core/theme/src/themes/bob/dialog.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/dialog.ts
rename to packages/core/theme/src/themes/bob/dialog.ts
diff --git a/packages/core/themeV2/src/themes/bob/divider.ts b/packages/core/theme/src/themes/bob/divider.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/divider.ts
rename to packages/core/theme/src/themes/bob/divider.ts
diff --git a/packages/core/themeV2/src/themes/bob/drawer.ts b/packages/core/theme/src/themes/bob/drawer.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/drawer.ts
rename to packages/core/theme/src/themes/bob/drawer.ts
diff --git a/packages/core/themeV2/src/themes/bob/index.ts b/packages/core/theme/src/themes/bob/index.ts
similarity index 89%
rename from packages/core/themeV2/src/themes/bob/index.ts
rename to packages/core/theme/src/themes/bob/index.ts
index 4f2e09eae..53ca5b688 100644
--- a/packages/core/themeV2/src/themes/bob/index.ts
+++ b/packages/core/theme/src/themes/bob/index.ts
@@ -16,6 +16,8 @@ import { _switch } from './switch';
 import { progressBar } from './progress-bar';
 import { tooltip } from './tooltip';
 import { tokenInput } from './token-input';
+import { tabs } from './tabs';
+import { table } from './table';
 
 const bobTheme = defineTheme({
   colors,
@@ -33,7 +35,9 @@ const bobTheme = defineTheme({
   switch: _switch,
   progressBar,
   tooltip,
-  tokenInput
+  tokenInput,
+  table,
+  tabs
 });
 
 export { bobTheme };
diff --git a/packages/core/themeV2/src/themes/bob/input.ts b/packages/core/theme/src/themes/bob/input.ts
similarity index 94%
rename from packages/core/themeV2/src/themes/bob/input.ts
rename to packages/core/theme/src/themes/bob/input.ts
index 63e3f8807..70dd4e0f4 100644
--- a/packages/core/themeV2/src/themes/bob/input.ts
+++ b/packages/core/theme/src/themes/bob/input.ts
@@ -6,7 +6,7 @@ import { color } from './colors';
 const input: InputTheme = {
   base: {
     color: color('light'),
-    backgroundColor: color('grey-600'),
+    backgroundColor: color('grey-700'),
     border: `1px solid ${color('grey-400')}`,
     borderRadius: rounded('md'),
     ...transition('common', 'normal')
@@ -60,6 +60,9 @@ const input: InputTheme = {
     focus: {
       boxShadow: `0 0 0 1px ${color('red-500')}`
     }
+  },
+  adornment: {
+    color: color('grey-300')
   }
 };
 
diff --git a/packages/core/themeV2/src/themes/bob/list.ts b/packages/core/theme/src/themes/bob/list.ts
similarity index 89%
rename from packages/core/themeV2/src/themes/bob/list.ts
rename to packages/core/theme/src/themes/bob/list.ts
index 3aa96a313..0f672b7c2 100644
--- a/packages/core/themeV2/src/themes/bob/list.ts
+++ b/packages/core/theme/src/themes/bob/list.ts
@@ -8,7 +8,7 @@ const list: ListTheme = {
     base: {
       borderRadius: rounded('md'),
       color: color('light'),
-      padding: spacing('lg'),
+      padding: `${spacing('md')} ${spacing('lg')}`,
       ...typography('md')
     },
     hover: {
diff --git a/packages/core/themeV2/src/themes/bob/progress-bar.ts b/packages/core/theme/src/themes/bob/progress-bar.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/progress-bar.ts
rename to packages/core/theme/src/themes/bob/progress-bar.ts
diff --git a/packages/core/themeV2/src/themes/bob/radio.ts b/packages/core/theme/src/themes/bob/radio.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/radio.ts
rename to packages/core/theme/src/themes/bob/radio.ts
diff --git a/packages/core/themeV2/src/themes/bob/spinner.ts b/packages/core/theme/src/themes/bob/spinner.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/spinner.ts
rename to packages/core/theme/src/themes/bob/spinner.ts
diff --git a/packages/core/themeV2/src/themes/bob/switch.ts b/packages/core/theme/src/themes/bob/switch.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/switch.ts
rename to packages/core/theme/src/themes/bob/switch.ts
diff --git a/packages/core/theme/src/themes/bob/table.ts b/packages/core/theme/src/themes/bob/table.ts
new file mode 100644
index 000000000..32f31af45
--- /dev/null
+++ b/packages/core/theme/src/themes/bob/table.ts
@@ -0,0 +1,25 @@
+import { TableTheme } from 'src/components';
+
+import { rounded, typography, spacing } from '../../core';
+
+import { color } from './colors';
+
+const table: TableTheme = {
+  item: {
+    base: {
+      borderRadius: rounded('md'),
+      color: color('light'),
+      padding: `${spacing('md')} ${spacing('lg')}`,
+      ...typography('md')
+    },
+    hover: {
+      backgroundColor: color('grey-600')
+    },
+    selected: {
+      backgroundColor: color('light'),
+      color: color('dark')
+    }
+  }
+};
+
+export { table };
diff --git a/packages/core/theme/src/themes/bob/tabs.ts b/packages/core/theme/src/themes/bob/tabs.ts
new file mode 100644
index 000000000..4e28548e4
--- /dev/null
+++ b/packages/core/theme/src/themes/bob/tabs.ts
@@ -0,0 +1,61 @@
+import { rounded, spacing, typography, transition } from '../../core';
+import { TabsTheme } from '../../components';
+
+import { color } from './colors';
+
+const tabs: TabsTheme = {
+  base: {
+    backgroundColor: color('grey-800'),
+    borderRadius: rounded('md')
+  },
+  item: {
+    base: {
+      backgroundColor: 'transparent',
+      borderRadius: rounded('s'),
+      color: color('light'),
+      ...transition('common', 'normal')
+    },
+    hover: {
+      border: `1px solid ${color('grey-300')}`
+    },
+    focus: {
+      border: `1px solid ${color('light')}`,
+      boxShadow: `0 0 0 1px ${color('light')}`
+    },
+    selected: {
+      backgroundColor: color('grey-500'),
+      border: `1px solid ${color('grey-400')}`
+    }
+  },
+  size: {
+    s: {
+      base: {
+        padding: spacing('xs')
+      },
+      item: {
+        padding: `${spacing('s')} ${spacing('xs')}`,
+        ...typography('s')
+      }
+    },
+    md: {
+      base: {
+        padding: spacing('xs')
+      },
+      item: {
+        padding: `${spacing('s')} ${spacing('xs')}`,
+        ...typography('md')
+      }
+    },
+    lg: {
+      base: {
+        padding: spacing('xs')
+      },
+      item: {
+        padding: `${spacing('s')} ${spacing('xs')}`,
+        ...typography('lg')
+      }
+    }
+  }
+};
+
+export { tabs };
diff --git a/packages/core/themeV2/src/themes/bob/token-input.ts b/packages/core/theme/src/themes/bob/token-input.ts
similarity index 67%
rename from packages/core/themeV2/src/themes/bob/token-input.ts
rename to packages/core/theme/src/themes/bob/token-input.ts
index 8aefeb6b7..1da9d9698 100644
--- a/packages/core/themeV2/src/themes/bob/token-input.ts
+++ b/packages/core/theme/src/themes/bob/token-input.ts
@@ -3,6 +3,7 @@ import { TokenInputTheme } from '../../components';
 
 import { color } from './colors';
 
+// TODO: handle different sizes
 const tokenInput: TokenInputTheme = {
   balance: {
     padding: `${spacing('xxs')} 0`,
@@ -13,27 +14,49 @@ const tokenInput: TokenInputTheme = {
   addorment: {
     token: {
       base: {
-        backgroundColor: color('grey-500'),
+        backgroundColor: color('grey-600'),
         border: `1px solid ${color('grey-400')}`,
         borderLeft: 'none',
         borderTopRightRadius: rounded('md'),
         borderBottomRightRadius: rounded('md'),
         color: color('light')
       }
+    },
+    usd: {
+      ...typography('xs'),
+      color: color('grey-200')
+    }
+  },
+  list: {
+    item: {
+      ticker: {
+        color: color('light'),
+        fontWeight: fontWeight('medium'),
+        ...typography('md')
+      },
+      usd: {
+        color: color('grey-300'),
+        fontWeight: fontWeight('medium'),
+        ...typography('s')
+      },
+      selected: {
+        ticker: {
+          color: color('dark')
+        },
+        usd: {
+          color: color('grey-300')
+        }
+      }
     }
   },
   size: {
     s: {
       addornment: {
-        bottom: {
-          ...typography('xs'),
-          color: color('grey-200')
-        },
         token: {
           base: {
             paddingLeft: spacing('md'),
             paddingRight: spacing('md'),
-            ...typography('md')
+            ...typography('xs')
           },
           img: {
             height: spacing('2xl'),
@@ -44,15 +67,11 @@ const tokenInput: TokenInputTheme = {
     },
     md: {
       addornment: {
-        bottom: {
-          ...typography('xs'),
-          color: color('grey-200')
-        },
         token: {
           base: {
             paddingLeft: spacing('md'),
             paddingRight: spacing('md'),
-            ...typography('md')
+            ...typography('s')
           },
           img: {
             height: spacing('2xl'),
@@ -63,10 +82,6 @@ const tokenInput: TokenInputTheme = {
     },
     lg: {
       addornment: {
-        bottom: {
-          ...typography('xs'),
-          color: color('grey-200')
-        },
         token: {
           base: {
             paddingLeft: spacing('md'),
@@ -74,8 +89,8 @@ const tokenInput: TokenInputTheme = {
             ...typography('md')
           },
           img: {
-            height: spacing('2xl'),
-            width: spacing('2xl')
+            height: spacing('3xl'),
+            width: spacing('3xl')
           }
         }
       }
diff --git a/packages/core/themeV2/src/themes/bob/tooltip.ts b/packages/core/theme/src/themes/bob/tooltip.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/bob/tooltip.ts
rename to packages/core/theme/src/themes/bob/tooltip.ts
diff --git a/packages/core/themeV2/src/themes/index.ts b/packages/core/theme/src/themes/index.ts
similarity index 100%
rename from packages/core/themeV2/src/themes/index.ts
rename to packages/core/theme/src/themes/index.ts
diff --git a/packages/core/theme/src/types.ts b/packages/core/theme/src/types.ts
index 510cd511c..a6a61492e 100644
--- a/packages/core/theme/src/types.ts
+++ b/packages/core/theme/src/types.ts
@@ -1,106 +1,5 @@
-import theme from './base';
+type DeepPartial<T> = {
+  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
 
-export const tuple = <T extends string[]>(...args: T): T => args;
-
-export const variant = tuple('primary', 'secondary', 'tertiary');
-
-export const ctaVariant = tuple('primary', 'secondary', 'outlined', 'text');
-
-export const status = tuple('error', 'warning', 'success');
-
-export const sizes = tuple('small', 'medium', 'large');
-
-// TODO: add info
-export const colors = tuple('primary', 'secondary', 'tertiary', 'success', 'warning', 'error');
-
-export const justifyContent = tuple(
-  'flex-start',
-  'center',
-  'flex-end',
-  'space-between',
-  'space-around',
-  'space-evenly'
-);
-
-export const alignItems = tuple('flex-start', 'center', 'flex-end', 'stretch', 'baseline');
-
-export const normalAlignments = tuple('start', 'center', 'end');
-
-export const direction = tuple('row', 'row-reverse', 'column', 'column-reverse');
-
-export const wrap = tuple('wrap', 'nowrap', 'wrap-reverse');
-
-export const alignSelf = tuple(
-  'auto',
-  'normal',
-  'start',
-  'end',
-  'center',
-  'flex-start',
-  'flex-end',
-  'self-start',
-  'self-end',
-  'stretch'
-);
-
-export type Variants = (typeof variant)[number];
-
-export type CTAVariants = (typeof ctaVariant)[number];
-
-export type CardVariants = 'default' | 'bordered';
-
-export type ListVariants = Exclude<Variants, 'tertiary'> | 'card';
-
-export type MeterVariants = Exclude<Variants, 'tertiary'>;
-
-export type DividerVariants = Colors | 'default';
-
-export type CTASizes = 'x-small' | 'small' | 'medium' | 'large';
-
-export type Status = (typeof status)[number];
-
-export type Sizes = (typeof sizes)[number];
-
-export type Colors = (typeof colors)[number];
-
-export type JustifyContent = (typeof justifyContent)[number];
-
-export type AlignItems = (typeof alignItems)[number];
-
-export type Wrap = (typeof wrap)[number];
-
-export type AlignSelf = (typeof alignSelf)[number];
-
-export type NormalAlignments = (typeof normalAlignments)[number];
-
-export type Direction = (typeof direction)[number];
-
-export type FontSize = keyof typeof theme.text;
-
-export type Spacing = keyof typeof theme.spacing;
-
-export type Placement = 'top' | 'right' | 'bottom' | 'left';
-
-export interface MarginProps {
-  margin?: Spacing;
-  marginTop?: Spacing;
-  marginBottom?: Spacing;
-  marginLeft?: Spacing;
-  marginRight?: Spacing;
-  marginX?: Spacing;
-  marginY?: Spacing;
-}
-
-export type FontWeight = keyof typeof theme.fontWeight;
-
-export type Orientation = 'horizontal' | 'vertical';
-
-export type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit';
-
-export type ProgressBarColors = 'default' | 'red';
-
-export type BorderRadius = keyof typeof theme.rounded;
-
-export type LabelPosition = 'top' | 'side';
-
-export type IconSize = keyof typeof theme.icon.sizes;
+export type { DeepPartial };
diff --git a/packages/core/theme/src/utils.ts b/packages/core/theme/src/utils.ts
index cc573aca5..3562e4b5b 100644
--- a/packages/core/theme/src/utils.ts
+++ b/packages/core/theme/src/utils.ts
@@ -1,42 +1,23 @@
-import base from './base';
-import { Colors, FontSize } from './types';
+const rem = (value: number, base = 16) => `${(1 / base) * value}rem`;
 
-const resolveColor = (color: Colors | undefined): string => {
-  switch (color) {
-    case 'primary':
-      return base.colors.textPrimary;
-    case 'secondary':
-      return base.colors.textSecondary;
-    case 'tertiary':
-      return base.colors.textTertiary;
-    case 'success':
-      return base.colors.success;
-    case 'warning':
-      return base.colors.warning;
-    case 'error':
-      return base.colors.error;
-    default:
-      return base.colors.textPrimary;
-  }
-};
+const style =
+  <T extends Record<string, any>>(baseStyle: T) =>
+  (key: keyof typeof baseStyle, unit: 'rem' | 'px' = 'rem', base = 16) => {
+    if (unit === 'px') {
+      return `${baseStyle[key]}px`;
+    }
+
+    return rem(baseStyle[key], base);
+  };
+
+// MEMO: only supports 6 digits hex
+const hexToRgba = (hex: string, opacity: number) => {
+  const tempHex = hex.replace('#', '');
+  const r = parseInt(tempHex.substring(0, 2), 16);
+  const g = parseInt(tempHex.substring(2, 4), 16);
+  const b = parseInt(tempHex.substring(4, 6), 16);
 
-const resolveHeight = (size: FontSize | undefined): string | undefined => {
-  switch (size) {
-    case 's':
-      return base.lineHeight.s;
-    case 'base':
-    case 'lg':
-    case 'xl':
-    default:
-      return base.lineHeight.base;
-    case 'xs':
-    case 'xl2':
-    case 'xl3':
-    case 'xl4':
-    case 'xl5':
-    case 'xl6':
-      return undefined;
-  }
+  return `rgba(${r},${g},${b},${opacity / 100})`;
 };
 
-export { resolveColor, resolveHeight };
+export { rem, style, hexToRgba };
diff --git a/packages/core/theme/tsup.config.ts b/packages/core/theme/tsup.config.ts
index 27c61bcf3..fd2bba042 100644
--- a/packages/core/theme/tsup.config.ts
+++ b/packages/core/theme/tsup.config.ts
@@ -4,16 +4,5 @@ export default defineConfig({
   clean: true,
   target: 'es2019',
   format: ['cjs', 'esm'],
-  banner: { js: '"use client";' },
-  entry: {
-    index: 'src/index.ts',
-    kintsugi: 'src/css/theme.kintsugi.css',
-    interlay: 'src/css/theme.interlay.css',
-    bob: 'src/css/theme.bob.css'
-  },
-  dts: {
-    entry: {
-      index: 'src/index.ts'
-    }
-  }
+  banner: { js: '"use client";' }
 });
diff --git a/packages/core/themeV2/CHANGELOG.md b/packages/core/themeV2/CHANGELOG.md
deleted file mode 100644
index ae505434a..000000000
--- a/packages/core/themeV2/CHANGELOG.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# @interlay/theme
-
-## 0.0.7
-
-### Patch Changes
-
-- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA
-
-## 0.0.6
-
-### Patch Changes
-
-- [#38](https://github.com/interlay/ui/pull/38) [`0f85afc`](https://github.com/interlay/ui/commit/0f85afc17d8a576331cbd8ae5f6b743977cf80a0) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(theme): bob loading spinner (#37)
-
-## 0.0.5
-
-### Patch Changes
-
-- [#36](https://github.com/interlay/ui/pull/36) [`200454d`](https://github.com/interlay/ui/commit/200454d7df265c661a5e74d83293179962be8822) Thanks [@tomjeatt](https://github.com/tomjeatt)! - feature: add BOB tab styles
-
-## 0.0.4
-
-### Patch Changes
-
-- [#29](https://github.com/interlay/ui/pull/29) [`edd2937`](https://github.com/interlay/ui/commit/edd2937b2fbe05fd82b33c1e1cada3ed5c76e3db) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(components): select types
-  fix(theme): bob input disable
-
-## 0.0.3
-
-### Patch Changes
-
-- [#27](https://github.com/interlay/ui/pull/27) [`5d11b0a`](https://github.com/interlay/ui/commit/5d11b0aa63dd3efa13e16a52f3b267bfa09e45d4) Thanks [@danielsimao](https://github.com/danielsimao)! - feat(theme): add bob
-
-## 0.0.2
-
-### Patch Changes
-
-- [#11](https://github.com/interlay/ui/pull/11) [`fec9ccb`](https://github.com/interlay/ui/commit/fec9ccbdbfbee8fa6bb1d8ebfbb29fa5497fd442) Thanks [@danielsimao](https://github.com/danielsimao)! - fix/remove theme font
-
-## 0.0.1
-
-### Patch Changes
-
-- Initial Release 🎉
diff --git a/packages/core/themeV2/README.md b/packages/core/themeV2/README.md
deleted file mode 100644
index b50e0daf4..000000000
--- a/packages/core/themeV2/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# @interlay/theme
-
-Interlay UI components theme.
-
-## Installation
-
-```sh
-yarn add @interlay/theme
-# or
-npm i @interlay/theme
-```
-
-## Contribution
-
-Yes please! See the
-[contributing guidelines](https://github.com/interlay/ui/blob/main/CONTRIBUTING.MD)
-for details.
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/packages/core/themeV2/clean-package.config.json b/packages/core/themeV2/clean-package.config.json
deleted file mode 100644
index f75a45e95..000000000
--- a/packages/core/themeV2/clean-package.config.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "remove": ["devDependencies"],
-  "replace": {
-    "main": "dist/index.js",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.mjs",
-        "require": "./dist/index.js"
-      },
-      "./dist/*.css": {
-        "import": "./dist/*.css",
-        "require": "./dist/*.css"
-      },
-      "./package.json": "./package.json"
-    }
-  }
-}
diff --git a/packages/core/themeV2/package.json b/packages/core/themeV2/package.json
deleted file mode 100644
index f3a665bba..000000000
--- a/packages/core/themeV2/package.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "name": "@interlay/themev2",
-  "version": "0.0.7",
-  "description": "The default theme for Interlay UI components",
-  "homepage": "https://github.com/interlay/ui#readme",
-  "license": "MIT",
-  "keywords": [
-    "interlay",
-    "interlay ui",
-    "theme",
-    "theming",
-    "design",
-    "ui",
-    "components",
-    "classNames",
-    "css"
-  ],
-  "main": "src/index.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/interlay/ui.git",
-    "directory": "packages/core/theme"
-  },
-  "bugs": {
-    "url": "https://github.com/interlay/ui/issues"
-  },
-  "scripts": {
-    "lint": "eslint .",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
-    "clean": "rimraf dist .turbo",
-    "typecheck": "tsc --noEmit",
-    "build": "tsup",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "styled-components": ">=6.0.0"
-  },
-  "devDependencies": {
-    "clean-package": "^2.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.7"
-  },
-  "clean-package": "./clean-package.config.json"
-}
diff --git a/packages/core/themeV2/src/index.ts b/packages/core/themeV2/src/index.ts
deleted file mode 100644
index 968de09d3..000000000
--- a/packages/core/themeV2/src/index.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export type {
-  ButtonSizes,
-  ButtonVariants,
-  ButtonColors,
-  SpinnerColors,
-  SpinnerSizes,
-  InputSizes,
-  DividerSizes,
-  DialogSize,
-  AccordionVariants,
-  ProgressBarSize,
-  AlertStatus,
-  TokenInputSize
-} from './components';
-export type {
-  IconsSizes,
-  Color,
-  BreakPoints,
-  FontSize,
-  FontWeight,
-  LineHeight,
-  Rounded,
-  Spacing,
-  TransitionDuration,
-  TransitionProperty,
-  TransitionTimingFunction,
-  Typography,
-  NormalAlignments,
-  MaxWidth,
-  AlignItems,
-  AlignSelf,
-  Direction,
-  JustifyContent,
-  LabelPosition,
-  MarginProps,
-  Orientation,
-  Overflow,
-  Placement,
-  Status,
-  Wrap
-} from './core';
-export { bobTheme } from './themes';
-export type { Theme } from './define';
diff --git a/packages/core/themeV2/src/types.ts b/packages/core/themeV2/src/types.ts
deleted file mode 100644
index a6a61492e..000000000
--- a/packages/core/themeV2/src/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-type DeepPartial<T> = {
-  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
-};
-
-export type { DeepPartial };
diff --git a/packages/core/themeV2/src/utils.ts b/packages/core/themeV2/src/utils.ts
deleted file mode 100644
index dd07ea592..000000000
--- a/packages/core/themeV2/src/utils.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-const rem = (value: number, base = 16) => `${(1 / base) * value}rem`;
-
-const style =
-  <T extends Record<string, any>>(baseStyle: T) =>
-  (key: keyof typeof baseStyle, unit: 'rem' | 'px' = 'rem', base = 16) => {
-    if (unit === 'px') {
-      return `${baseStyle[key]}px`;
-    }
-
-    return rem(baseStyle[key], base);
-  };
-
-export { rem, style };
diff --git a/packages/core/themeV2/tsconfig.json b/packages/core/themeV2/tsconfig.json
deleted file mode 100644
index 249c65938..000000000
--- a/packages/core/themeV2/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": false
-  },
-  "include": ["src"]
-}
diff --git a/packages/core/themeV2/tsup.config.ts b/packages/core/themeV2/tsup.config.ts
deleted file mode 100644
index 27c61bcf3..000000000
--- a/packages/core/themeV2/tsup.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  clean: true,
-  target: 'es2019',
-  format: ['cjs', 'esm'],
-  banner: { js: '"use client";' },
-  entry: {
-    index: 'src/index.ts',
-    kintsugi: 'src/css/theme.kintsugi.css',
-    interlay: 'src/css/theme.interlay.css',
-    bob: 'src/css/theme.bob.css'
-  },
-  dts: {
-    entry: {
-      index: 'src/index.ts'
-    }
-  }
-});
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 5f84163ca..5f9fbe424 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@interlay/theme": "workspace:*",
-    "@interlay/themev2": "workspace:*",
+    "@interlay/theme": "workspace:*",
     "@internationalized/number": "^3.2.1",
     "@react-aria/i18n": "^3.8.1",
     "@react-aria/utils": "^3.19.0",
diff --git a/packages/hooks/src/use-form/__tests__/use-form.test.tsx b/packages/hooks/src/use-form/__tests__/use-form.test.tsx
index b809c526d..c4b814e79 100644
--- a/packages/hooks/src/use-form/__tests__/use-form.test.tsx
+++ b/packages/hooks/src/use-form/__tests__/use-form.test.tsx
@@ -190,7 +190,7 @@ describe('useForm', () => {
 
       render(
         <form onSubmit={result.current.handleSubmit}>
-          <TokenInput label='Amount' ticker='BTC' {...props} />
+          <TokenInput label='Amount' logoUrl='' ticker='BTC' {...props} />
           <button type='submit'>Submit</button>
         </form>
       );
diff --git a/packages/hooks/src/use-style-props.tsx b/packages/hooks/src/use-style-props.tsx
index 5ecc72da1..8bc8792b8 100644
--- a/packages/hooks/src/use-style-props.tsx
+++ b/packages/hooks/src/use-style-props.tsx
@@ -1,4 +1,4 @@
-import { Spacing } from '@interlay/themev2';
+import { Spacing } from '@interlay/theme';
 
 type MarginProps = {
   margin?: Spacing;
diff --git a/packages/icons/common/package.json b/packages/icons/common/package.json
index 526f8d156..f8ecc43fc 100644
--- a/packages/icons/common/package.json
+++ b/packages/icons/common/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@interlay/theme": "workspace:*",
-    "@interlay/themev2": "workspace:*"
+    "@interlay/theme": "workspace:*"
   },
   "peerDependencies": {
     "react": ">=18",
diff --git a/packages/icons/common/src/core/Icon.style.tsx b/packages/icons/common/src/core/Icon.style.tsx
index a21cfa1bd..ce4c137dd 100644
--- a/packages/icons/common/src/core/Icon.style.tsx
+++ b/packages/icons/common/src/core/Icon.style.tsx
@@ -1,9 +1,9 @@
-import { Color, IconsSizes } from '@interlay/themev2';
+import { Color, IconsSizes } from '@interlay/theme';
 import styled from 'styled-components';
 
 type StyledIconProps = {
   $size: IconsSizes;
-  $color: Color;
+  $color?: Color;
 };
 
 const StyledIcon = styled.svg<StyledIconProps>`
diff --git a/packages/icons/common/src/core/Icon.tsx b/packages/icons/common/src/core/Icon.tsx
index 1b43e7803..c51166176 100644
--- a/packages/icons/common/src/core/Icon.tsx
+++ b/packages/icons/common/src/core/Icon.tsx
@@ -1,5 +1,5 @@
 import { SVGAttributes, forwardRef } from 'react';
-import { Color, IconsSizes } from '@interlay/themev2';
+import { Color, IconsSizes } from '@interlay/theme';
 
 import { StyledIcon } from './Icon.style';
 
@@ -13,7 +13,7 @@ type NativeAttrs<T = unknown> = Omit<SVGAttributes<T>, keyof Props>;
 type IconProps<T = unknown> = Props & NativeAttrs<T>;
 
 const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ size = 'md', color = 'light', ...props }, ref): JSX.Element => (
+  ({ size = 'md', color, ...props }, ref): JSX.Element => (
     <StyledIcon ref={ref} $color={color} $size={size} {...props} />
   )
 );
diff --git a/packages/icons/common/src/types/styled-components.d.ts b/packages/icons/common/src/types/styled-components.d.ts
index b69c7ca19..532240058 100644
--- a/packages/icons/common/src/types/styled-components.d.ts
+++ b/packages/icons/common/src/types/styled-components.d.ts
@@ -1,4 +1,4 @@
-import { Theme } from '@interlay/themev2';
+import { Theme } from '@interlay/theme';
 
 declare module 'styled-components' {
   export interface DefaultTheme extends Theme {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5b4227a0..e81336177 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,7 +164,7 @@ importers:
         version: 7.3.0(@swc/core@1.4.2)(ts-node@10.9.2)(typescript@5.3.3)
       turbo:
         specifier: latest
-        version: 1.12.4
+        version: 1.12.5
       typescript:
         specifier: '>=3.0.0'
         version: 5.3.3
@@ -186,9 +186,6 @@ importers:
       '@interlay/theme':
         specifier: workspace:*
         version: link:../core/theme
-      '@interlay/themev2':
-        specifier: workspace:*
-        version: link:../core/themeV2
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.2.56)(react@18.2.0)
@@ -361,18 +358,6 @@ importers:
         version: 18.2.0(react@18.2.0)
 
   packages/core/theme:
-    devDependencies:
-      clean-package:
-        specifier: ^2.2.0
-        version: 2.2.0
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-
-  packages/core/themeV2:
     devDependencies:
       clean-package:
         specifier: ^2.2.0
@@ -392,9 +377,6 @@ importers:
       '@interlay/theme':
         specifier: workspace:*
         version: link:../core/theme
-      '@interlay/themev2':
-        specifier: workspace:*
-        version: link:../core/themeV2
       '@internationalized/number':
         specifier: ^3.2.1
         version: 3.5.1
@@ -445,9 +427,6 @@ importers:
       '@interlay/theme':
         specifier: workspace:*
         version: link:../../core/theme
-      '@interlay/themev2':
-        specifier: workspace:*
-        version: link:../../core/themeV2
       styled-components:
         specifier: '>=6.0.0'
         version: 6.1.8(react-dom@18.2.0)(react@18.2.0)
@@ -770,7 +749,7 @@ packages:
       js-tokens: 4.0.0
 
   /@babel/parser@7.23.9:
-    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
+    resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZButtonxkVNwc+03SVP7aCdWrTlA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
@@ -1379,7 +1358,7 @@ packages:
     dev: true
 
   /@babel/plugin-transform-modules-systemjs@7.23.9(@babel/core@7.23.9):
-    resolution: {integrity: sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==}
+    resolution: {integrity: sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjButtonO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4716,7 +4695,7 @@ packages:
     dev: false
 
   /@react-types/table@3.9.3(react@18.2.0):
-    resolution: {integrity: sha512-Hs/pMbxJdga2zBol4H5pV1FVIiRjCuSTXst6idJjkctanTexR4xkyrtBwl+rdLNoGwQ2pGii49vgklc5bFK7zA==}
+    resolution: {integrity: sha512-Hs/pMbxJdga2zBol4H5pV1FVIiRjCuSTXst6idJjkButtonnTexR4xkyrtBwl+rdLNoGwQ2pGii49vgklc5bFK7zA==}
     peerDependencies:
       react: ^18.2.0
     dependencies:
@@ -4726,7 +4705,7 @@ packages:
     dev: false
 
   /@react-types/tabs@3.3.5(react@18.2.0):
-    resolution: {integrity: sha512-6NTSZBOWekCtApdZrhu5tHhE/8q52oVohQN+J5T7shAXd6ZAtu8PABVR/nH4BWucc8FL0OUajRqunqzQMU13gA==}
+    resolution: {integrity: sha512-6NTSZBOWekButtonpdZrhu5tHhE/8q52oVohQN+J5T7shAXd6ZAtu8PABVR/nH4BWucc8FL0OUajRqunqzQMU13gA==}
     peerDependencies:
       react: ^18.2.0
     dependencies:
@@ -13394,64 +13373,64 @@ packages:
       yargs: 17.7.2
     dev: true
 
-  /turbo-darwin-64@1.12.4:
-    resolution: {integrity: sha512-dBwFxhp9isTa9RS/fz2gDVk5wWhKQsPQMozYhjM7TT4jTrnYn0ZJMzr7V3B/M/T8QF65TbniW7w1gtgxQgX5Zg==}
+  /turbo-darwin-64@1.12.5:
+    resolution: {integrity: sha512-0GZ8reftwNQgIQLHkHjHEXTc/Z1NJm+YjsrBP+qhM/7yIZ3TEy9gJhuogDt2U0xIWwFgisTyzbtU7xNaQydtoA==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-darwin-arm64@1.12.4:
-    resolution: {integrity: sha512-1Uo5iI6xsJ1j9ObsqxYRsa3W26mEbUe6fnj4rQYV6kDaqYD54oAMJ6hM53q9rB8JvFxwdrUXGp3PwTw9A0qqkA==}
+  /turbo-darwin-arm64@1.12.5:
+    resolution: {integrity: sha512-8WpOLNNzvH6kohQOjihD+gaWL+ZFNfjvBwhOF0rjEzvW+YR3Pa7KjhulrjWyeN2yMFqAPubTbZIGOz1EVXLuQA==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-64@1.12.4:
-    resolution: {integrity: sha512-ONg2aSqKP7LAQOg7ysmU5WpEQp4DGNxSlAiR7um+LKtbmC/UxogbR5+T+Uuq6zGuQ5kJyKjWJ4NhtvUswOqBsA==}
+  /turbo-linux-64@1.12.5:
+    resolution: {integrity: sha512-INit73+bNUpwqGZCxgXCR3I+cQsdkQ3/LkfkgSOibkpg+oGqxJRzeXw3sp990d7SCoE8QOcs3iw+PtiFX/LDAA==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-arm64@1.12.4:
-    resolution: {integrity: sha512-9FPufkwdgfIKg/9jj87Cdtftw8o36y27/S2vLN7FTR2pp9c0MQiTBOLVYadUr1FlShupddmaMbTkXEhyt9SdrA==}
+  /turbo-linux-arm64@1.12.5:
+    resolution: {integrity: sha512-6lkRBvxtI/GQdGtaAec9LvVQUoRw6nXFp0kM+Eu+5PbZqq7yn6cMkgDJLI08zdeui36yXhone8XGI8pHg8bpUQ==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-64@1.12.4:
-    resolution: {integrity: sha512-2mOtxHW5Vjh/5rDVu/aFwsMzI+chs8XcEuJHlY1sYOpEymYTz+u6AXbnzRvwZFMrLKr7J7fQOGl+v96sLKbNdA==}
+  /turbo-windows-64@1.12.5:
+    resolution: {integrity: sha512-gQYbOhZg5Ww0bQ/bC0w/4W6yQRwBumUUnkB+QPo15VznwxZe2a7bo6JM+9Xy9dKLa/kn+p7zTqme4OEp6M3/Yg==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-arm64@1.12.4:
-    resolution: {integrity: sha512-nOY5wae9qnxPOpT1fRuYO0ks6dTwpKMPV6++VkDkamFDLFHUDVM/9kmD2UTeh1yyrKnrZksbb9zmShhmfj1wog==}
+  /turbo-windows-arm64@1.12.5:
+    resolution: {integrity: sha512-auvhZ9FrhnvQ4mgBlY9O68MT4dIfprYGvd2uPICba/mHUZZvVy5SGgbHJ0KbMwaJfnnFoPgLJO6M+3N2gDprKw==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo@1.12.4:
-    resolution: {integrity: sha512-yUJ7elEUSToiGwFZogXpYKJpQ0BvaMbkEuQECIWtkBLcmWzlMOt6bActsIm29oN83mRU0WbzGt4e8H1KHWedhg==}
+  /turbo@1.12.5:
+    resolution: {integrity: sha512-FATU5EnhrYG8RvQJYFJnDd18DpccDjyvd53hggw9T9JEg9BhWtIEoeaKtBjYbpXwOVrJQMDdXcIB4f2nD3QPPg==}
     hasBin: true
     optionalDependencies:
-      turbo-darwin-64: 1.12.4
-      turbo-darwin-arm64: 1.12.4
-      turbo-linux-64: 1.12.4
-      turbo-linux-arm64: 1.12.4
-      turbo-windows-64: 1.12.4
-      turbo-windows-arm64: 1.12.4
+      turbo-darwin-64: 1.12.5
+      turbo-darwin-arm64: 1.12.5
+      turbo-linux-64: 1.12.5
+      turbo-linux-arm64: 1.12.5
+      turbo-windows-64: 1.12.5
+      turbo-windows-arm64: 1.12.5
     dev: true
 
   /tween-functions@1.2.0: