diff --git a/packages/components/src/Accordion/Accordion.stories.tsx b/packages/components/src/Accordion/Accordion.stories.tsx
index e999260a3..560d11ebc 100644
--- a/packages/components/src/Accordion/Accordion.stories.tsx
+++ b/packages/components/src/Accordion/Accordion.stories.tsx
@@ -29,6 +29,8 @@ export default {
 
 export const Default: StoryObj<AccordionProps> = {};
 
+export const Splitted: StoryObj<AccordionProps> = { args: { variant: 'splitted' } };
+
 export const DefaultExpanded: StoryObj<AccordionProps> = {
   args: {
     defaultExpandedKeys: ['1']
diff --git a/packages/components/src/Accordion/Accordion.style.tsx b/packages/components/src/Accordion/Accordion.style.tsx
index cec271b27..ee1395f51 100644
--- a/packages/components/src/Accordion/Accordion.style.tsx
+++ b/packages/components/src/Accordion/Accordion.style.tsx
@@ -1,11 +1,14 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ChevronDown } from '@interlay/icons';
-import { theme } from '@interlay/theme';
+import { AccordionVariants } from '@interlay/themev2';
 
-import { H3 } from '../Text';
+import { H3, Span } from '../Text';
 
 type StyledAccordionProps = {
-  $isDisabled: boolean;
+  $variant: AccordionVariants;
+};
+
+type StyledChevronDownProps = {
   $isExpanded: boolean;
 };
 
@@ -22,22 +25,33 @@ type StyledAccordionItemContentProps = {
   $isExpanded: boolean;
 };
 
-const StyledAccordionItemWrapper = styled.div<Pick<StyledAccordionProps, '$isDisabled'>>`
+type StyledAccordionItemWrapperProps = {
+  $isDisabled: boolean;
+  $variant: AccordionVariants;
+};
+
+const StyledAccordion = styled.div<StyledAccordionProps>`
+  display: flex;
+  flex-direction: column;
+  ${({ theme, $variant }) => theme.accordion.variant[$variant].base}
+`;
+
+const StyledAccordionItemWrapper = styled.div<StyledAccordionItemWrapperProps>`
   z-index: inherit;
   position: relative;
   opacity: ${({ $isDisabled }) => $isDisabled && '0.5'};
+  ${({ theme, $variant }) => theme.accordion.variant[$variant].item.base}
 `;
 
 const StyledAccordionItemHeading = styled(H3)`
   margin: 0;
-  font-weight: ${theme.fontWeight.semibold};
+  ${({ theme }) => theme.accordion.item.heading}
 `;
 
 const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: ${theme.spacing.spacing4};
   min-height: 3.25rem;
   text-overflow: ellipsis;
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
@@ -48,11 +62,13 @@ const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
   color: inherit;
   font: inherit;
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
+
+  ${({ theme }) => theme.accordion.item.button}
 `;
 
-const StyledChevronDown = styled(ChevronDown)<Pick<StyledAccordionProps, '$isExpanded'>>`
+const StyledChevronDown = styled(ChevronDown)<StyledChevronDownProps>`
   transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-180deg)'};
-  transition: transform ${theme.transition.duration.duration150}ms ease;
+  transition: transform 150ms ease;
 `;
 
 const StyledAccordionItemRegion = styled.div<StyledAccordionItemRegionProps>`
@@ -64,10 +80,24 @@ const StyledAccordionItemRegion = styled.div<StyledAccordionItemRegionProps>`
 const StyledAccordionItemContent = styled.div<StyledAccordionItemContentProps>`
   overflow: hidden;
   padding-top: 0;
-  padding-left: ${theme.spacing.spacing4};
-  padding-right: ${theme.spacing.spacing4};
-  padding-bottom: ${({ $isExpanded }) => ($isExpanded ? theme.spacing.spacing4 : 0)};
   transition: all 200ms ease 0ms;
+
+  ${({ theme, $isExpanded }) => {
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight } = theme.accordion.item.content || {};
+
+    return css`
+      padding-top: ${paddingTop};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      padding-bottom: ${$isExpanded ? paddingBottom : 0};
+    `;
+  }}
+`;
+
+const StyledSpan = styled(Span)`
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
 `;
 
 export {
@@ -76,5 +106,7 @@ export {
   StyledAccordionItemHeading,
   StyledAccordionItemRegion,
   StyledAccordionItemWrapper,
-  StyledChevronDown
+  StyledChevronDown,
+  StyledAccordion,
+  StyledSpan
 };
diff --git a/packages/components/src/Accordion/Accordion.tsx b/packages/components/src/Accordion/Accordion.tsx
index a03dd58f3..5472afbdf 100644
--- a/packages/components/src/Accordion/Accordion.tsx
+++ b/packages/components/src/Accordion/Accordion.tsx
@@ -2,13 +2,14 @@ import { AriaAccordionProps, useAccordion } from '@react-aria/accordion';
 import { mergeProps } from '@react-aria/utils';
 import { useTreeState } from '@react-stately/tree';
 import { forwardRef, HTMLAttributes, Ref } from 'react';
-import { FontSize } from '@interlay/theme';
 import { useDOMRef } from '@interlay/hooks';
+import { AccordionVariants } from '@interlay/themev2';
 
 import { AccordionItem } from './AccordionItem';
+import { StyledAccordion } from './Accordion.style';
 
 type Props = {
-  size?: FontSize;
+  variant?: AccordionVariants;
 };
 
 type InheritAttrs<T> = Omit<AriaAccordionProps<T>, keyof Props>;
@@ -18,7 +19,7 @@ type NativeAttrs<T> = Omit<HTMLAttributes<unknown>, (keyof InheritAttrs<T> & Pro
 type AccordionProps<T = any> = Props & InheritAttrs<T> & NativeAttrs<T>;
 
 const Accordion = <T extends Record<string, unknown>>(
-  { size = 'base', ...props }: AccordionProps<T>,
+  { variant = 'light', ...props }: AccordionProps<T>,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
   const state = useTreeState(props);
@@ -26,11 +27,11 @@ const Accordion = <T extends Record<string, unknown>>(
   const { accordionProps } = useAccordion(props, state, accordionRef);
 
   return (
-    <div {...mergeProps(props, accordionProps)} ref={accordionRef}>
+    <StyledAccordion $variant={variant} {...mergeProps(props, accordionProps)} ref={accordionRef}>
       {[...state.collection].map((item) => (
-        <AccordionItem<T> key={item.key} item={item} size={size} state={state} />
+        <AccordionItem<T> key={item.key} item={item} state={state} variant={variant} />
       ))}
-    </div>
+    </StyledAccordion>
   );
 };
 
diff --git a/packages/components/src/Accordion/AccordionItem.tsx b/packages/components/src/Accordion/AccordionItem.tsx
index ff7d8dd58..21a0877d4 100644
--- a/packages/components/src/Accordion/AccordionItem.tsx
+++ b/packages/components/src/Accordion/AccordionItem.tsx
@@ -4,25 +4,24 @@ import { mergeProps } from '@react-aria/utils';
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
 import { useRef } from 'react';
-import { FontSize } from '@interlay/theme';
-
-import { Span } from '..';
+import { AccordionVariants } from '@interlay/themev2';
 
 import {
   StyledAccordionItemButton,
   StyledAccordionItemHeading,
   StyledAccordionItemWrapper,
-  StyledChevronDown
+  StyledChevronDown,
+  StyledSpan
 } from './Accordion.style';
 import { AccordionItemRegion } from './AccordionItemRegion';
 
 type AccordionItemProps<T> = {
   item: Node<T>;
   state: TreeState<T>;
-  size?: FontSize;
+  variant?: AccordionVariants;
 };
 const AccordionItem = <T extends Record<string, unknown>>({
-  size = 'base',
+  variant = 'light',
   ...props
 }: AccordionItemProps<T>): JSX.Element => {
   const ref = useRef<HTMLButtonElement>(null);
@@ -33,8 +32,8 @@ const AccordionItem = <T extends Record<string, unknown>>({
   const { isFocusVisible, focusProps } = useFocusRing();
 
   return (
-    <StyledAccordionItemWrapper $isDisabled={isDisabled}>
-      <StyledAccordionItemHeading size={size}>
+    <StyledAccordionItemWrapper $isDisabled={isDisabled} $variant={variant}>
+      <StyledAccordionItemHeading>
         <FocusRing within>
           <StyledAccordionItemButton
             {...mergeProps(buttonProps, focusProps)}
@@ -42,7 +41,7 @@ const AccordionItem = <T extends Record<string, unknown>>({
             $isDisabled={isDisabled}
             $isFocusVisible={isFocusVisible}
           >
-            <Span>{item.props.title}</Span>
+            <StyledSpan>{item.props.title}</StyledSpan>
             <StyledChevronDown $isExpanded={isExpanded} aria-hidden='true' role='img' size='s' />
           </StyledAccordionItemButton>
         </FocusRing>
diff --git a/packages/components/src/Alert/Alert.style.tsx b/packages/components/src/Alert/Alert.style.tsx
index 381667719..13a69a02d 100644
--- a/packages/components/src/Alert/Alert.style.tsx
+++ b/packages/components/src/Alert/Alert.style.tsx
@@ -1,28 +1,38 @@
-import { Warning } from '@interlay/icons';
-import styled from 'styled-components';
-import { theme } from '@interlay/theme';
-import { Status } from '@interlay/theme';
+import { CheckCircle, InformationCircle, Warning } from '@interlay/icons';
+import styled, { css } from 'styled-components';
+import { AlertStatus } from '@interlay/themev2';
 
 import { Flex } from '../Flex';
 
 type StyledAlertProps = {
-  $status: Status;
+  $status: AlertStatus;
 };
 
+// FIXME: waiting on JAy
 const StyledAlert = styled(Flex)<StyledAlertProps>`
-  padding: ${theme.spacing.spacing2};
-  color: ${({ $status }) => theme.alert.status[$status]};
-  border: 1px solid ${({ $status }) => theme.alert.status[$status]};
-  background-color: ${({ $status }) => theme.alert.bg[$status]};
-  border-radius: ${theme.rounded.md};
-  font-size: ${theme.text.xs};
+  ${({ $status, theme }) => css`
+    ${theme.alert.base}
+    ${theme.alert.status[$status]}
+  `}
 `;
 
-const StyledWarningIcon = styled(Warning)`
-  color: inherit;
-  width: ${theme.spacing.spacing5};
-  height: ${theme.spacing.spacing5};
-  flex-shrink: 0;
+const StyledInformationCircle = styled(InformationCircle)<StyledAlertProps>`
+  ${({ $status, theme }) => css`
+    ${theme.alert.status[$status]}
+  `}
 `;
 
-export { StyledAlert, StyledWarningIcon };
+const StyledCheckCircle = styled(CheckCircle)<StyledAlertProps>`
+  ${({ $status, theme }) => css`
+    ${theme.alert.base}
+    ${theme.alert.status[$status]}
+  `}
+`;
+
+const StyledWarning = styled(Warning)<StyledAlertProps>`
+  ${({ $status, theme }) => css`
+    ${theme.alert.status[$status].color}
+  `}
+`;
+
+export { StyledAlert, StyledInformationCircle, StyledCheckCircle, StyledWarning };
diff --git a/packages/components/src/Alert/Alert.tsx b/packages/components/src/Alert/Alert.tsx
index 345f169dd..30185a57b 100644
--- a/packages/components/src/Alert/Alert.tsx
+++ b/packages/components/src/Alert/Alert.tsx
@@ -1,23 +1,35 @@
-import { Status } from '@interlay/theme';
+import { AlertStatus } from '@interlay/themev2';
+import { ForwardRefExoticComponent } from 'react';
 
 import { FlexProps } from '../Flex';
 
-import { StyledAlert, StyledWarningIcon } from './Alert.style';
+import { StyledAlert, StyledCheckCircle, StyledInformationCircle, StyledWarning } from './Alert.style';
+
+const iconMap: Record<AlertStatus, ForwardRefExoticComponent<any>> = {
+  info: StyledInformationCircle,
+  success: StyledCheckCircle,
+  error: StyledWarning,
+  warning: StyledWarning
+};
 
 type Props = {
-  status?: Status;
+  status?: AlertStatus;
 };
 
 type InheritAttrs = Omit<FlexProps, keyof Props>;
 
 type AlertProps = Props & InheritAttrs;
 
-const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => (
-  <StyledAlert $status={status} alignItems='center' gap='md' role='alert' {...props}>
-    <StyledWarningIcon />
-    <div>{children}</div>
-  </StyledAlert>
-);
+const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => {
+  const Icon = iconMap[status];
+
+  return (
+    <StyledAlert $status={status} alignItems='center' gap='md' role='alert' {...props}>
+      <Icon $status={status} size='md' />
+      <div>{children}</div>
+    </StyledAlert>
+  );
+};
 
 export { Alert };
 export type { AlertProps };
diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
index 271eed31e..8a24ac2c8 100644
--- a/packages/components/src/Button/Button.stories.tsx
+++ b/packages/components/src/Button/Button.stories.tsx
@@ -16,8 +16,19 @@ export default {
 
 export const Solid: StoryObj<ButtonProps> = {
   args: {
-    variant: 'solid',
-    loading: true
+    variant: 'solid'
+  }
+};
+
+export const Outline: StoryObj<ButtonProps> = {
+  args: {
+    variant: 'outline'
+  }
+};
+
+export const Ghost: StoryObj<ButtonProps> = {
+  args: {
+    variant: 'ghost'
   }
 };
 
diff --git a/packages/components/src/Button/Button.style.tsx b/packages/components/src/Button/Button.style.tsx
index 721d33715..049d6b49b 100644
--- a/packages/components/src/Button/Button.style.tsx
+++ b/packages/components/src/Button/Button.style.tsx
@@ -2,6 +2,8 @@ import { ButtonSizes, ButtonVariants } from '@interlay/themev2';
 import { ButtonColors } from '@interlay/themev2/src/components';
 import styled, { css } from 'styled-components';
 
+import { UnstyledButton } from '../UnstyledButton';
+
 type StyledButtonProps = {
   $fullWidth?: boolean;
   $size: ButtonSizes;
@@ -11,17 +13,14 @@ type StyledButtonProps = {
   $isIconOnly?: boolean;
 };
 
-const StyledButton = styled.button<StyledButtonProps>`
+const StyledButton = styled(UnstyledButton)<StyledButtonProps>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: ${(props) => (props.$fullWidth ? '100%' : 'auto')};
-  background: none;
   outline: transparent solid 2px;
   border: 0px solid;
 
-  text-decoration: none;
-  appearance: none;
   user-select: none;
 
   ${({ theme, $size, $variant, $color, $isFocusVisible, $isIconOnly }) => {
diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
index 9703d2913..04564017c 100644
--- a/packages/components/src/Button/Button.tsx
+++ b/packages/components/src/Button/Button.tsx
@@ -1,11 +1,10 @@
 import { useDOMRef } from '@interlay/hooks';
-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 { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/themev2';
-import { Slot, Slottable } from '@radix-ui/react-slot';
+import { Slottable } from '@radix-ui/react-slot';
 
 import { Flex } from '../Flex';
 import { Spinner } from '../Spinner';
@@ -59,8 +58,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color = 'default',
       fullWidth,
       isIconOnly,
-      onPress,
-      onClick,
       asChild,
       ...props
     },
@@ -70,11 +67,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const isDisabled = disabled || loading;
 
-    const { buttonProps } = useButton({ isDisabled, onPress, ...props }, domRef);
     const { focusProps, isFocusVisible } = useFocusRing(props);
 
-    const Comp = asChild ? Slot : 'button';
-
     return (
       <StyledButton
         ref={domRef}
@@ -84,9 +78,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         $isIconOnly={isIconOnly}
         $size={size}
         $variant={variant}
-        as={Comp}
+        asChild={asChild}
         disabled={isDisabled}
-        {...mergeProps(props, buttonProps, focusProps, { onClick })}
+        {...mergeProps(props, focusProps)}
       >
         {loading && (
           <Flex elementType='span' marginRight={isIconOnly ? undefined : 's'}>
diff --git a/packages/components/src/Card/Card.style.tsx b/packages/components/src/Card/Card.style.tsx
index 486283548..61ff4a230 100644
--- a/packages/components/src/Card/Card.style.tsx
+++ b/packages/components/src/Card/Card.style.tsx
@@ -8,25 +8,25 @@ type StyledCardProps = {
   $rounded: Rounded;
   $padding: Spacing;
   $shadowed: boolean;
-  $background: Color;
+  $background?: Color;
   $isHoverable?: boolean;
   $isPressable?: boolean;
 };
 
 const StyledCard = styled(Flex)<StyledCardProps>`
-  background-color: ${({ $background, theme }) => theme.color($background)};
   border-radius: ${({ $rounded, theme }) => theme.rounded($rounded)};
   padding: ${({ $padding, theme }) => theme.spacing($padding)};
   cursor: ${({ $isPressable }) => $isPressable && 'pointer'};
   outline: none;
 
   // TODO: add isHoverable
-  ${({ $bordered, $isPressable, $shadowed, theme }) => {
-    const { border, boxShadow, ...baseCss } = theme.card.base;
+  ${({ $bordered, $isPressable, $shadowed, $background, theme }) => {
+    const { border, boxShadow, backgroundColor, ...baseCss } = theme.card.base;
 
     return css`
       border: ${typeof $bordered === 'boolean' ? border : `1px solid ${$bordered}`};
       box-shadow: ${$shadowed && boxShadow};
+      background-color: ${$background ? theme.color($background) : backgroundColor};
       ${baseCss}
 
       &:focus {
diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx
index 86ab8147e..efe3f1bb7 100644
--- a/packages/components/src/Card/Card.tsx
+++ b/packages/components/src/Card/Card.tsx
@@ -29,7 +29,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
   (
     {
       direction = 'column',
-      background = 'grey-300',
+      background,
       isHoverable,
       isPressable,
       children,
diff --git a/packages/components/src/Divider/Divider.tsx b/packages/components/src/Divider/Divider.tsx
index deac02751..89a07b7e9 100644
--- a/packages/components/src/Divider/Divider.tsx
+++ b/packages/components/src/Divider/Divider.tsx
@@ -21,7 +21,7 @@ type DividerProps = Props & NativeAttrs & ElementTypeProp & MarginProps;
 
 const Divider = forwardRef<HTMLHRElement, DividerProps>(
   (
-    { elementType: elementTypeProp, orientation = 'horizontal', color = 'grey-200', size = 's', ...props },
+    { elementType: elementTypeProp, orientation = 'horizontal', color = 'grey-400', size = 's', ...props },
     ref
   ): JSX.Element => {
     const elementType = elementTypeProp || orientation === 'vertical' ? 'div' : 'hr';
diff --git a/packages/components/src/HelperText/HelperText.style.tsx b/packages/components/src/HelperText/HelperText.style.tsx
index f4e25d674..d9e733c6f 100644
--- a/packages/components/src/HelperText/HelperText.style.tsx
+++ b/packages/components/src/HelperText/HelperText.style.tsx
@@ -10,7 +10,7 @@ type StyledHelperTextProps = {
 const StyledHelperText = styled.div<StyledHelperTextProps>`
   font-weight: ${({ theme }) => theme.fontWeight('medium')};
   ${({ theme }) => theme.typography('xs')}
-  color: ${({ $hasError, theme }) => ($hasError ? '#FF0000' : theme.color('grey-100'))};
+  color: ${({ $hasError, theme }) => ($hasError ? theme.color('red-500') : theme.color('grey-100'))};
   padding: ${({ theme }) => theme.spacing('xs')} 0;
   ${({ $isHidden }) => $isHidden && visuallyHidden()}
 `;
diff --git a/packages/components/src/Modal/Modal.stories.tsx b/packages/components/src/Modal/Modal.stories.tsx
index c271e99df..4c54b2a0d 100644
--- a/packages/components/src/Modal/Modal.stories.tsx
+++ b/packages/components/src/Modal/Modal.stories.tsx
@@ -87,7 +87,6 @@ export const ScrollBehaviour: StoryObj<StoryProps> = {
   args: {
     title: 'Title',
     footer: true,
-    scrollBehavior: 'outside',
     children: (
       <>
         Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
diff --git a/packages/components/src/Modal/Modal.style.tsx b/packages/components/src/Modal/Modal.style.tsx
index 1cf885c9c..b48e025ed 100644
--- a/packages/components/src/Modal/Modal.style.tsx
+++ b/packages/components/src/Modal/Modal.style.tsx
@@ -6,16 +6,13 @@ import { Dialog, DialogBody } from '../Dialog';
 type StyledModalProps = {
   $isOpen?: boolean;
   $placement: 'top' | 'center';
-  $scrollBehavior: 'inside' | 'outside';
 };
 
 type StyledDialogProps = {
-  $scrollBehavior: 'inside' | 'outside';
   $isOpen?: boolean;
 };
 
 type StyledModalBodyProps = {
-  $scrollBehavior: 'inside' | 'outside';
   $noPadding?: boolean;
 };
 
@@ -30,10 +27,7 @@ const StyledWrapper = styled.div<StyledModalProps>`
 
   display: flex;
   justify-content: center;
-  align-items: ${({ $placement, $scrollBehavior }) =>
-    $scrollBehavior === 'inside' && $placement === 'center' ? 'center' : 'flex-start'};
-
-  overflow: ${({ $scrollBehavior }) => $scrollBehavior === 'outside' && 'auto'};
+  align-items: ${({ $placement }) => ($placement === 'center' ? 'center' : 'flex-start')};
 `;
 
 const StyledModal = styled.div<StyledModalProps>`
@@ -51,20 +45,16 @@ const StyledModal = styled.div<StyledModalProps>`
       : 'opacity .1s cubic-bezier(0.5,0,1,1), visibility 0s linear, transform 0s linear .1s'};
 
   outline: none;
-
-  height: ${({ $scrollBehavior }) => $scrollBehavior === 'inside' && '100dvh'};
+  margin: ${({ theme }) => `${theme.spacing('7xl')} ${theme.spacing('xl')}`};
 `;
 
 const StyledDialog = styled(Dialog)<StyledDialogProps>`
-  margin: ${({ theme }) => `${theme.spacing('7xl')} ${theme.spacing('xl')}`};
-
-  max-height: ${({ $scrollBehavior, theme }) =>
-    $scrollBehavior === 'inside' && `calc(100% - ${theme.spacing('10xl')})`};
   pointer-events: ${({ $isOpen }) => !$isOpen && 'none'};
+  max-height: ${({ theme }) => `calc(100dvh - ${theme.spacing('10xl')})`};
 `;
 
 const StyledDialogBody = styled(DialogBody)<StyledModalBodyProps>`
-  overflow-y: ${({ $scrollBehavior }) => $scrollBehavior === 'inside' && 'auto'};
+  overflow-y: auto;
   position: relative;
   padding: ${({ $noPadding }) => $noPadding && 0};
 `;
diff --git a/packages/components/src/Modal/Modal.tsx b/packages/components/src/Modal/Modal.tsx
index 3ff12e699..a36099d95 100644
--- a/packages/components/src/Modal/Modal.tsx
+++ b/packages/components/src/Modal/Modal.tsx
@@ -6,7 +6,6 @@ import { DialogProps } from '../Dialog';
 import { Overlay } from '../Overlay';
 
 import { StyledDialog } from './Modal.style';
-import { ModalContext } from './ModalContext';
 import { ModalWrapper, ModalWrapperProps } from './ModalWrapper';
 
 const isInteractingWithToasts = (element: Element) => {
@@ -22,7 +21,6 @@ type ModalSizes = DialogSize;
 type Props = {
   container?: Element;
   placement?: 'top' | 'center';
-  scrollBehavior?: 'inside' | 'outside';
   size?: ModalSizes;
 };
 
@@ -36,7 +34,6 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
       children,
       isDismissable = true,
       placement = 'center',
-      scrollBehavior = 'inside',
       isKeyboardDismissDisabled,
       shouldCloseOnBlur,
       shouldCloseOnInteractOutside,
@@ -58,26 +55,23 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
         : !isInteractingWithToasts(element);
 
     return (
-      <ModalContext.Provider value={{ scrollBehavior }}>
-        <Overlay container={container} isOpen={isOpen} nodeRef={wrapperRef}>
-          <ModalWrapper
-            ref={domRef}
-            isDismissable={isDismissable}
-            isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-            isOpen={isOpen}
-            placement={placement}
-            scrollBehaviour={scrollBehavior}
-            shouldCloseOnBlur={shouldCloseOnBlur}
-            shouldCloseOnInteractOutside={handleShouldCloseOnInteractOutside}
-            wrapperRef={wrapperRef}
-            onClose={onClose}
-          >
-            <StyledDialog $isOpen={isOpen} $scrollBehavior={scrollBehavior} size={size} {...props}>
-              {children}
-            </StyledDialog>
-          </ModalWrapper>
-        </Overlay>
-      </ModalContext.Provider>
+      <Overlay container={container} isOpen={isOpen} nodeRef={wrapperRef}>
+        <ModalWrapper
+          ref={domRef}
+          isDismissable={isDismissable}
+          isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+          isOpen={isOpen}
+          placement={placement}
+          shouldCloseOnBlur={shouldCloseOnBlur}
+          shouldCloseOnInteractOutside={handleShouldCloseOnInteractOutside}
+          wrapperRef={wrapperRef}
+          onClose={onClose}
+        >
+          <StyledDialog $isOpen={isOpen} size={size} {...props}>
+            {children}
+          </StyledDialog>
+        </ModalWrapper>
+      </Overlay>
     );
   }
 );
diff --git a/packages/components/src/Modal/ModalBody.tsx b/packages/components/src/Modal/ModalBody.tsx
index 32cad0400..895539df5 100644
--- a/packages/components/src/Modal/ModalBody.tsx
+++ b/packages/components/src/Modal/ModalBody.tsx
@@ -1,7 +1,6 @@
 import { DialogBodyProps } from '../Dialog';
 
 import { StyledDialogBody } from './Modal.style';
-import { useModalContext } from './ModalContext';
 
 type Props = {
   noPadding?: boolean;
@@ -11,11 +10,9 @@ type InheritAttrs = Omit<DialogBodyProps, keyof Props>;
 
 type ModalBodyProps = Props & InheritAttrs;
 
-const ModalBody = ({ noPadding, ...props }: ModalBodyProps): JSX.Element => {
-  const { scrollBehavior } = useModalContext();
-
-  return <StyledDialogBody {...props} $noPadding={noPadding} $scrollBehavior={scrollBehavior} />;
-};
+const ModalBody = ({ noPadding, ...props }: ModalBodyProps): JSX.Element => (
+  <StyledDialogBody {...props} $noPadding={noPadding} />
+);
 
 export { ModalBody };
 export type { ModalBodyProps };
diff --git a/packages/components/src/Modal/ModalContext.tsx b/packages/components/src/Modal/ModalContext.tsx
deleted file mode 100644
index 5f0259520..000000000
--- a/packages/components/src/Modal/ModalContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-interface ModalConfig {
-  scrollBehavior: 'inside' | 'outside';
-}
-
-const defaultContext = { scrollBehavior: 'inside' } as ModalConfig;
-
-const ModalContext = React.createContext<ModalConfig>(defaultContext);
-
-const useModalContext = (): ModalConfig => React.useContext<ModalConfig>(ModalContext);
-
-export { ModalContext, useModalContext };
-export type { ModalConfig };
diff --git a/packages/components/src/Modal/ModalFooter.tsx b/packages/components/src/Modal/ModalFooter.tsx
index 655a8d5d2..0564102ad 100644
--- a/packages/components/src/Modal/ModalFooter.tsx
+++ b/packages/components/src/Modal/ModalFooter.tsx
@@ -2,7 +2,7 @@ import { DialogFooter, DialogFooterProps } from '../Dialog';
 
 type ModalFooterProps = DialogFooterProps;
 
-const ModalFooter = ({ direction = 'column', gap = 'spacing4', ...props }: ModalFooterProps): JSX.Element => (
+const ModalFooter = ({ direction = 'column', gap = 's', ...props }: ModalFooterProps): JSX.Element => (
   <DialogFooter {...props} direction={direction} gap={gap} />
 );
 
diff --git a/packages/components/src/Modal/ModalWrapper.tsx b/packages/components/src/Modal/ModalWrapper.tsx
index c95e3ea92..87f4f5900 100644
--- a/packages/components/src/Modal/ModalWrapper.tsx
+++ b/packages/components/src/Modal/ModalWrapper.tsx
@@ -10,7 +10,6 @@ import { StyledModal, StyledWrapper } from './Modal.style';
 type Props = {
   children: ReactNode;
   placement?: 'top' | 'center';
-  scrollBehaviour: 'inside' | 'outside';
   isOpen?: boolean;
   onClose: () => void;
   wrapperRef: RefObject<HTMLDivElement>;
@@ -26,7 +25,6 @@ const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
       children,
       isDismissable = true,
       placement = 'center',
-      scrollBehaviour = 'inside',
       onClose,
       isKeyboardDismissDisabled,
       isOpen,
@@ -55,14 +53,8 @@ const ModalWrapper = forwardRef<HTMLDivElement, ModalWrapperProps>(
     return (
       <div ref={wrapperRef}>
         <Underlay {...underlayProps} isOpen={!!isOpen} />
-        <StyledWrapper $isOpen={!!isOpen} $placement={placement} $scrollBehavior={scrollBehaviour}>
-          <StyledModal
-            ref={ref}
-            $isOpen={isOpen}
-            $placement={placement}
-            $scrollBehavior={scrollBehaviour}
-            {...mergeProps(modalProps, props)}
-          >
+        <StyledWrapper $isOpen={!!isOpen} $placement={placement}>
+          <StyledModal ref={ref} $isOpen={isOpen} $placement={placement} {...mergeProps(modalProps, props)}>
             {children}
           </StyledModal>
         </StyledWrapper>
diff --git a/packages/components/src/ProgressBar/ProgressBar.stories.tsx b/packages/components/src/ProgressBar/ProgressBar.stories.tsx
index c56cf215c..3c969a6d8 100644
--- a/packages/components/src/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/components/src/ProgressBar/ProgressBar.stories.tsx
@@ -8,3 +8,5 @@ export default {
 } as Meta<typeof ProgressBar>;
 
 export const Default: StoryObj<ProgressBarProps> = { args: { label: 'Loading...', value: 20 } };
+
+export const ShowValue: StoryObj<ProgressBarProps> = { args: { label: 'Progress:', showValueLabel: true, value: 20 } };
diff --git a/packages/components/src/ProgressBar/ProgressBar.style.tsx b/packages/components/src/ProgressBar/ProgressBar.style.tsx
index 52d7928de..abb0a2801 100644
--- a/packages/components/src/ProgressBar/ProgressBar.style.tsx
+++ b/packages/components/src/ProgressBar/ProgressBar.style.tsx
@@ -1,26 +1,43 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { theme } from '@interlay/theme';
-import { ProgressBarColors } from '@interlay/theme';
+import { Color, ProgressBarSize } from '@interlay/themev2';
+
+type StyledTrackProps = {
+  $size: ProgressBarSize;
+};
 
 type StyledFillProps = {
-  $color: ProgressBarColors;
+  $color?: Color;
+  $size: ProgressBarSize;
 };
 
-const StyledTrack = styled.div`
+const StyledTrack = styled.div<StyledTrackProps>`
   overflow: hidden;
   z-index: 1;
   width: 100%;
   min-width: ${theme.spacing.spacing6};
-  background-color: ${theme.progressBar.bg};
-  height: 1px;
+
+  ${({ theme, $size }) => css`
+    min-width: ${theme.spacing('2xl')};
+    ${theme.progressBar.track}
+    ${theme.progressBar.size[$size].track}
+  `}
 `;
 
 const StyledFill = styled.div<StyledFillProps>`
-  background-color: ${({ $color }) => ($color === 'red' ? theme.alert.status.error : theme.colors.textSecondary)};
-  height: 1px;
   border: none;
   transition: width ${theme.transition.duration.duration100}ms;
   will-change: width;
+
+  ${({ theme, $size, $color }) => {
+    const { backgroundColor, ...fillCss } = theme.progressBar.fill;
+
+    return css`
+      background: ${($color && theme.color($color)) || backgroundColor};
+      ${fillCss}
+      ${theme.progressBar.size[$size].fill}
+    `;
+  }}
 `;
 
 export { StyledFill, StyledTrack };
diff --git a/packages/components/src/ProgressBar/ProgressBar.tsx b/packages/components/src/ProgressBar/ProgressBar.tsx
index a760c159a..f26c12795 100644
--- a/packages/components/src/ProgressBar/ProgressBar.tsx
+++ b/packages/components/src/ProgressBar/ProgressBar.tsx
@@ -1,13 +1,13 @@
 import { AriaProgressBarProps, useProgressBar } from '@react-aria/progress';
 import { CSSProperties } from 'react';
-import { ProgressBarColors } from '@interlay/theme';
+import { Color, ProgressBarSize } from '@interlay/themev2';
 
 import { Flex, FlexProps } from '../Flex';
 import { Span } from '../Text';
 
 import { StyledFill, StyledTrack } from './ProgressBar.style';
 
-type Props = { color?: ProgressBarColors; showValueLabel?: boolean };
+type Props = { color?: Color; showValueLabel?: boolean; size?: ProgressBarSize };
 
 type AriaAttrs = Omit<AriaProgressBarProps, keyof Props>;
 
@@ -22,7 +22,8 @@ const ProgressBar = (props: ProgressBarProps): JSX.Element => {
     value = 0,
     minValue = 0,
     maxValue = 100,
-    color = 'default',
+    color,
+    size = 'md',
     showValueLabel,
     label,
     className,
@@ -36,13 +37,13 @@ const ProgressBar = (props: ProgressBarProps): JSX.Element => {
   return (
     <Flex className={className} direction='column' gap='s' hidden={hidden} style={style} {...progressBarProps}>
       {(label || showValueLabel) && (
-        <Flex>
+        <Flex gap='s'>
           {label && <Span {...labelProps}>{label}</Span>}
           {showValueLabel && <Span>{progressBarProps['aria-valuetext']}</Span>}
         </Flex>
       )}
-      <StyledTrack>
-        <StyledFill $color={color} style={barStyle} />
+      <StyledTrack $size={size}>
+        <StyledFill $color={color} $size={size} style={barStyle} />
       </StyledTrack>
     </Flex>
   );
diff --git a/packages/components/src/TokenInput/TokenInputBalance.tsx b/packages/components/src/TokenInput/TokenInputBalance.tsx
index 95903d784..7b331e09f 100644
--- a/packages/components/src/TokenInput/TokenInputBalance.tsx
+++ b/packages/components/src/TokenInput/TokenInputBalance.tsx
@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 
-import { CTA } from '../CTA';
-import { Dd, Flex } from '..';
+import { Dd, Flex, UnstyledButton } from '..';
 
 import { StyledBalance, StyledBalanceLabel } from './TokenInput.style';
 
@@ -37,10 +36,10 @@ const TokenInputBalance = ({
           {label}
         </StyledBalanceLabel>
         <Dd color='grey-200' size='xs' weight='medium'>
-          {balance}
+          <UnstyledButton>{balance}</UnstyledButton>
         </Dd>
       </StyledBalance>
-      <CTA
+      {/* <CTA
         aria-controls={inputId}
         aria-label={ariaLabel}
         disabled={isDisabled}
@@ -48,7 +47,7 @@ const TokenInputBalance = ({
         onPress={handleClickBalance}
       >
         MAX
-      </CTA>
+      </CTA> */}
     </Flex>
   );
 };
diff --git a/packages/components/src/UnstyledButton/ UnstyledButton.stories.tsx b/packages/components/src/UnstyledButton/ UnstyledButton.stories.tsx
new file mode 100644
index 000000000..fc18fb88e
--- /dev/null
+++ b/packages/components/src/UnstyledButton/ UnstyledButton.stories.tsx	
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { UnstyledButton, UnstyledButtonProps } from '.';
+
+export default {
+  title: 'Buttons/UnstyledButton',
+  component: UnstyledButton,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    children: 'Button'
+  }
+} as Meta<typeof UnstyledButton>;
+
+export const Default: StoryObj<UnstyledButtonProps> = {};
diff --git a/packages/components/src/UnstyledButton/UnstyledButton.style.tsx b/packages/components/src/UnstyledButton/UnstyledButton.style.tsx
new file mode 100644
index 000000000..e5350a10e
--- /dev/null
+++ b/packages/components/src/UnstyledButton/UnstyledButton.style.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+type StyledButtonProps = {
+  $isFocusVisible?: boolean;
+};
+
+const StyledButton = styled.button<StyledButtonProps>`
+  background-color: transparent;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  appearance: none;
+  text-align: left;
+  text-decoration: none;
+  color: inherit;
+  touch-action: manipulation;
+  outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
+`;
+
+export { StyledButton };
diff --git a/packages/components/src/UnstyledButton/UnstyledButton.tsx b/packages/components/src/UnstyledButton/UnstyledButton.tsx
new file mode 100644
index 000000000..9e65f2f4e
--- /dev/null
+++ b/packages/components/src/UnstyledButton/UnstyledButton.tsx
@@ -0,0 +1,43 @@
+import { useDOMRef } from '@interlay/hooks';
+import { useButton } from '@react-aria/button';
+import { mergeProps } from '@react-aria/utils';
+import { PressEvent } from '@react-types/shared';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { useFocusRing } from '@react-aria/focus';
+
+import { StyledButton } from './UnstyledButton.style';
+
+type Props = {
+  asChild?: boolean;
+  onPress?: (e: PressEvent) => void;
+};
+
+type NativeAttrs = Omit<ButtonHTMLAttributes<unknown>, keyof Props>;
+
+type UnstyledButtonProps = Props & NativeAttrs;
+
+const UnstyledButton = forwardRef<HTMLButtonElement, UnstyledButtonProps>(
+  ({ onPress, asChild, ...props }, ref): JSX.Element => {
+    const domRef = useDOMRef(ref);
+
+    const { buttonProps } = useButton({ onPress, ...props }, domRef);
+    const { focusProps, isFocusVisible } = useFocusRing(props);
+
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+      <StyledButton
+        ref={domRef}
+        $isFocusVisible={isFocusVisible}
+        as={Comp}
+        {...mergeProps(props, focusProps, buttonProps)}
+      />
+    );
+  }
+);
+
+UnstyledButton.displayName = 'Button';
+
+export { UnstyledButton };
+export type { UnstyledButtonProps };
diff --git a/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx b/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx
new file mode 100644
index 000000000..ac084b549
--- /dev/null
+++ b/packages/components/src/UnstyledButton/__tests__/CTA.test.tsx
@@ -0,0 +1,25 @@
+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/UnstyledButton/index.tsx b/packages/components/src/UnstyledButton/index.tsx
new file mode 100644
index 000000000..9e6f78007
--- /dev/null
+++ b/packages/components/src/UnstyledButton/index.tsx
@@ -0,0 +1,2 @@
+export type { UnstyledButtonProps } from './UnstyledButton';
+export { UnstyledButton } from './UnstyledButton';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index e1d39d8ab..040431128 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -69,3 +69,7 @@ export { TokenInput, TokenListItem } from './TokenInput';
 export type { TokenData, TokenInputProps, TokenListItemProps, TokenSelectProps } from './TokenInput';
 export { Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+export { UnstyledButton } from './UnstyledButton';
+export type { UnstyledButtonProps } from './UnstyledButton';
diff --git a/packages/core/themeV2/src/components/accordion.ts b/packages/core/themeV2/src/components/accordion.ts
index 63baaed4d..2125299d8 100644
--- a/packages/core/themeV2/src/components/accordion.ts
+++ b/packages/core/themeV2/src/components/accordion.ts
@@ -1,12 +1,23 @@
-import { Spacing } from '../core';
+import { StyledObject } from 'styled-components';
+
+type AccordionVariants = 'light' | 'splitted';
 
 type AccordionTheme = {
-  padding: Spacing;
-  minHeight: Spacing | string;
-  region: {
-    paddingX: Spacing;
-    paddingBottom: Spacing;
+  item: {
+    base?: StyledObject<object>;
+    button?: StyledObject<object>;
+    heading?: StyledObject<object>;
+    content?: StyledObject<object>;
   };
+  variant: Record<
+    AccordionVariants,
+    {
+      base: StyledObject<object>;
+      item: {
+        base: StyledObject<object>;
+      };
+    }
+  >;
 };
 
-export type { AccordionTheme };
+export type { AccordionTheme, AccordionVariants };
diff --git a/packages/core/themeV2/src/components/alert.ts b/packages/core/themeV2/src/components/alert.ts
index 9e232fed6..d89a3232d 100644
--- a/packages/core/themeV2/src/components/alert.ts
+++ b/packages/core/themeV2/src/components/alert.ts
@@ -1,16 +1,10 @@
-import { Rounded, Spacing } from '../core';
+import { StyledObject } from 'styled-components';
 
 type AlertStatus = 'info' | 'success' | 'warning' | 'error';
 
-type AlertSatusParams = {
-  border: string;
-  bg: string;
-};
-
 type AlertTheme = {
-  padding: Spacing;
-  rounded: Rounded;
-  status: Record<AlertStatus, AlertSatusParams>;
+  base: StyledObject<object>;
+  status: Record<AlertStatus, StyledObject<object>>;
 };
 
 export type { AlertTheme, AlertStatus };
diff --git a/packages/core/themeV2/src/components/index.ts b/packages/core/themeV2/src/components/index.ts
index 13d57ff38..7c2171b66 100644
--- a/packages/core/themeV2/src/components/index.ts
+++ b/packages/core/themeV2/src/components/index.ts
@@ -10,3 +10,4 @@ export * from './list';
 export * from './radio';
 export * from './switch';
 export * from './spinner';
+export * from './progress-bar';
diff --git a/packages/core/themeV2/src/components/progress-bar.ts b/packages/core/themeV2/src/components/progress-bar.ts
new file mode 100644
index 000000000..352b61b06
--- /dev/null
+++ b/packages/core/themeV2/src/components/progress-bar.ts
@@ -0,0 +1,11 @@
+import { StyledObject } from 'styled-components';
+
+type ProgressBarSize = 's' | 'md' | 'lg';
+
+type ProgressBarTheme = {
+  track: StyledObject<object>;
+  fill: StyledObject<object>;
+  size: Record<ProgressBarSize, { track: StyledObject<object>; fill: StyledObject<object> }>;
+};
+
+export type { ProgressBarTheme, ProgressBarSize };
diff --git a/packages/core/themeV2/src/core/colors.ts b/packages/core/themeV2/src/core/colors.ts
index 0205b2a08..c1494a27b 100644
--- a/packages/core/themeV2/src/core/colors.ts
+++ b/packages/core/themeV2/src/core/colors.ts
@@ -1,18 +1,27 @@
-type ColorShade = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 type PrimaryColors = Record<`primary-${ColorShade}`, string>;
 
 type GreyColors = Record<`grey-${ColorShade}`, string>;
 
+type BlueColors = Record<`blue-${ColorShade}`, string>;
+
+type GreenColors = Record<`green-${ColorShade}`, string>;
+
+type RedColors = Record<`red-${ColorShade}`, string>;
+
 type Palette = {
   light: string;
   dark: string;
 } & PrimaryColors &
-  GreyColors;
+  GreyColors &
+  BlueColors &
+  GreenColors &
+  RedColors;
 
 type Color = keyof Palette;
 
 const color = (colors: Palette) => (color: Color) => colors[color];
 
 export { color };
-export type { Color, Palette, PrimaryColors, GreyColors };
+export type { Color, Palette, PrimaryColors, GreyColors, BlueColors, GreenColors, RedColors };
diff --git a/packages/core/themeV2/src/core/space.ts b/packages/core/themeV2/src/core/space.ts
index 302e349ac..082e6a882 100644
--- a/packages/core/themeV2/src/core/space.ts
+++ b/packages/core/themeV2/src/core/space.ts
@@ -22,6 +22,7 @@ const baseSpacing = {
   '11xl': 160
 };
 
+// TODO: make this accept more props such as space("xl", "s") -> `Xrem Xrem`
 const spacing = style(baseSpacing);
 
 export { spacing };
diff --git a/packages/core/themeV2/src/define.ts b/packages/core/themeV2/src/define.ts
index b2bdbb799..a0c1d5543 100644
--- a/packages/core/themeV2/src/define.ts
+++ b/packages/core/themeV2/src/define.ts
@@ -25,7 +25,8 @@ import {
   ListTheme,
   RadioTheme,
   SwitchTheme,
-  SpinnerTheme
+  SpinnerTheme,
+  ProgressBarTheme
 } from './components';
 
 const baseTheme = {
@@ -54,6 +55,7 @@ type ThemeParams = {
   radio: RadioTheme;
   switch: SwitchTheme;
   spinner: SpinnerTheme;
+  progressBar: ProgressBarTheme;
 };
 
 const defineTheme = ({ colors, ...theme }: ThemeParams) => ({
diff --git a/packages/core/themeV2/src/index.ts b/packages/core/themeV2/src/index.ts
index 02c8bf951..5215232e4 100644
--- a/packages/core/themeV2/src/index.ts
+++ b/packages/core/themeV2/src/index.ts
@@ -6,7 +6,10 @@ export type {
   SpinnerSizes,
   InputSizes,
   DividerSizes,
-  DialogSize
+  DialogSize,
+  AccordionVariants,
+  ProgressBarSize,
+  AlertStatus
 } from './components';
 export type {
   IconsSizes,
diff --git a/packages/core/themeV2/src/themes/bob/accordion.ts b/packages/core/themeV2/src/themes/bob/accordion.ts
index b25883453..5f2fa838f 100644
--- a/packages/core/themeV2/src/themes/bob/accordion.ts
+++ b/packages/core/themeV2/src/themes/bob/accordion.ts
@@ -1,8 +1,38 @@
+import { fontWeight, rounded, spacing, typography } from '../../core';
 import { AccordionTheme } from '../../components';
 
+import { color } from './colors';
+
 const accordion: AccordionTheme = {
-  size: {
-    xs: {}
+  item: {
+    button: {
+      padding: spacing('xl')
+    },
+    heading: {
+      ...typography('lg'),
+      fontWeight: fontWeight('medium')
+    },
+    content: {
+      paddingTop: spacing('none'),
+      paddingLeft: spacing('xl'),
+      paddingRight: spacing('xl'),
+      paddingBottom: spacing('xl')
+    }
+  },
+  variant: {
+    light: { base: {}, item: { base: {} } },
+    splitted: {
+      base: {
+        gap: spacing('md')
+      },
+      item: {
+        base: {
+          borderRadius: rounded('xl'),
+          border: `1px solid ${color('grey-400')}`,
+          background: color('grey-500')
+        }
+      }
+    }
   }
 };
 
diff --git a/packages/core/themeV2/src/themes/bob/alert.ts b/packages/core/themeV2/src/themes/bob/alert.ts
index d62ed2718..9a3bd7542 100644
--- a/packages/core/themeV2/src/themes/bob/alert.ts
+++ b/packages/core/themeV2/src/themes/bob/alert.ts
@@ -1,8 +1,35 @@
+import { rounded, spacing } from '../../core';
 import { AlertTheme } from '../../components';
 
+import { color } from './colors';
+
 const alert: AlertTheme = {
-  size: {
-    xs: {}
+  base: {
+    color: color('dark'),
+    padding: spacing('md'),
+    borderRadius: rounded('md')
+  },
+  status: {
+    error: {
+      backgroundColor: color('red-300'),
+      border: `1px solid ${color('red-600')}`,
+      color: color('red-300')
+    },
+    info: {
+      backgroundColor: color('blue-300'),
+      border: `1px solid ${color('blue-600')}`,
+      color: color('red-300')
+    },
+    success: {
+      backgroundColor: color('green-200'),
+      border: `1px solid ${color('green-600')}`,
+      color: color('red-300')
+    },
+    warning: {
+      backgroundColor: color('red-300'),
+      border: `1px solid ${color('red-600')}`,
+      color: color('red-300')
+    }
   }
 };
 
diff --git a/packages/core/themeV2/src/themes/bob/button.ts b/packages/core/themeV2/src/themes/bob/button.ts
index 62d0a125f..e5ece55f2 100644
--- a/packages/core/themeV2/src/themes/bob/button.ts
+++ b/packages/core/themeV2/src/themes/bob/button.ts
@@ -47,14 +47,14 @@ const button: ButtonTheme = {
       color: {
         default: {
           base: {
-            backgroundColor: color('grey-200'),
+            backgroundColor: color('grey-500'),
             color: color('light')
           },
           hover: {
-            backgroundColor: color('grey-100')
+            backgroundColor: color('grey-400')
           },
           active: {
-            backgroundColor: color('grey-100')
+            backgroundColor: color('grey-300')
           },
           focus: {
             boxShadow: '0px 0px 0px 4px #4040403D, 0px 1px 2px 0px #1018280D'
@@ -65,14 +65,14 @@ const button: ButtonTheme = {
         },
         primary: {
           base: {
-            backgroundColor: color('primary-300'),
+            backgroundColor: color('primary-500'),
             color: color('light')
           },
           hover: {
-            backgroundColor: color('primary-200')
+            backgroundColor: color('primary-600')
           },
           active: {
-            backgroundColor: color('primary-200')
+            backgroundColor: color('primary-700')
           },
           focus: {
             boxShadow: '0px 0px 0px 4px #FA45163D, 0px 1px 2px 0px #1018280D'
@@ -87,11 +87,11 @@ const button: ButtonTheme = {
       color: {
         default: {
           base: {
-            border: `1px solid ${color('grey-200')}`,
+            border: `1px solid ${color('grey-400')}`,
             color: color('light')
           },
           hover: {
-            backgroundColor: color('grey-300')
+            backgroundColor: color('grey-600')
           },
           active: {
             backgroundColor: color('grey-300')
diff --git a/packages/core/themeV2/src/themes/bob/card.ts b/packages/core/themeV2/src/themes/bob/card.ts
index 3bfb25d18..f6694ea1e 100644
--- a/packages/core/themeV2/src/themes/bob/card.ts
+++ b/packages/core/themeV2/src/themes/bob/card.ts
@@ -6,8 +6,9 @@ import { color } from './colors';
 const card: CardTheme = {
   base: {
     color: color('light'),
-    border: `1px solid ${color('grey-200')}`,
+    border: `1px solid ${color('grey-400')}`,
     boxShadow: '0px 1px 3px 0px #0000001a, 0px 1px 2px 0px #0000000f',
+    backgroundColor: color('grey-500'),
     ...transition('common', 'normal')
   },
   focus: {
diff --git a/packages/core/themeV2/src/themes/bob/colors.ts b/packages/core/themeV2/src/themes/bob/colors.ts
index 1e8aa8a07..711ab0e72 100644
--- a/packages/core/themeV2/src/themes/bob/colors.ts
+++ b/packages/core/themeV2/src/themes/bob/colors.ts
@@ -1,38 +1,78 @@
-import { Palette, GreyColors, PrimaryColors, color as baseColor } from '../../core';
+import { Palette, GreyColors, PrimaryColors, color as baseColor, BlueColors, GreenColors, RedColors } from '../../core';
 
 const primary: PrimaryColors = {
   'primary-50': '#ffefe6',
-  'primary-75': '#ffbf97',
-  'primary-100': '#ffa56c',
-  'primary-200': '#ff7e2c',
-  'primary-300': '#ff6301',
-  'primary-400': '#b34501',
-  'primary-500': '#9c3c01',
-  'primary-600': '#9c3c01',
-  'primary-700': '#9c3c01',
-  'primary-800': '#9c3c01',
-  'primary-900': '#9c3c01'
+  'primary-100': '#ffcfb0',
+  'primary-200': '#ffb78a',
+  'primary-300': '#ff9655',
+  'primary-400': '#ff8234',
+  'primary-500': '#ff6301',
+  'primary-600': '#e85a01',
+  'primary-700': '#b54601',
+  'primary-800': '#8c3601',
+  'primary-900': '#6b2a00'
 };
 
 const grey: GreyColors = {
   'grey-50': '#e8e8e9',
-  'grey-75': '#9fa2a6',
-  'grey-100': '#787b81',
-  'grey-200': '#3e424b',
-  'grey-300': '#161b26',
-  'grey-400': '#0f131b',
-  'grey-500': '#0d1017',
-  'grey-600': '#0d1017',
-  'grey-700': '#0d1017',
-  'grey-800': '#0d1017',
-  'grey-900': '#0d1017'
+  'grey-100': '#b7b8bc',
+  'grey-200': '#94969b',
+  'grey-300': '#63666e',
+  'grey-400': '#454951',
+  'grey-500': '#161b26',
+  'grey-600': '#141923',
+  'grey-700': '#10131b',
+  'grey-800': '#0c0f15',
+  'grey-900': '#090b10'
+};
+
+const blue: BlueColors = {
+  'blue-50': '#e6f0fa',
+  'blue-100': '#b0d0ef',
+  'blue-200': '#8ab9e7',
+  'blue-300': '#5498dc',
+  'blue-400': '#3385d5',
+  'blue-500': '#0066cb',
+  'blue-600': '#005db9',
+  'blue-700': '#004890',
+  'blue-800': '#003870',
+  'blue-900': '#002b55'
+};
+
+const green: GreenColors = {
+  'green-50': '#e8f7f0',
+  'green-100': '#b8e7cf',
+  'green-200': '#95dcb8',
+  'green-300': '#65cc97',
+  'green-400': '#47c283',
+  'green-500': '#19b364',
+  'green-600': '#17a35b',
+  'green-700': '#127f47',
+  'green-800': '#0e6237',
+  'green-900': '#0b4b2a'
+};
+
+const red: RedColors = {
+  'red-50': '#feeceb',
+  'red-100': '#fac5c1',
+  'red-200': '#f8a9a3',
+  'red-300': '#f5827a',
+  'red-400': '#f36960',
+  'red-500': '#f04438',
+  'red-600': '#da3e33',
+  'red-700': '#aa3028',
+  'red-800': '#84251f',
+  'red-900': '#651d18'
 };
 
 const colors: Palette = {
   light: '#ffffff',
   dark: '#030303',
   ...primary,
-  ...grey
+  ...grey,
+  ...blue,
+  ...green,
+  ...red
 };
 
 const color = baseColor(colors);
diff --git a/packages/core/themeV2/src/themes/bob/dialog.ts b/packages/core/themeV2/src/themes/bob/dialog.ts
index 23441ccbb..0c83b51e9 100644
--- a/packages/core/themeV2/src/themes/bob/dialog.ts
+++ b/packages/core/themeV2/src/themes/bob/dialog.ts
@@ -5,8 +5,8 @@ import { color } from './colors';
 
 const dialog: DialogTheme = {
   base: {
-    background: color('grey-300'),
-    border: `1px solid ${color('grey-200')}`,
+    background: color('grey-500'),
+    border: `1px solid ${color('grey-400')}`,
     borderRadius: rounded('md')
   },
   header: {
diff --git a/packages/core/themeV2/src/themes/bob/index.ts b/packages/core/themeV2/src/themes/bob/index.ts
index 326e3b438..976872313 100644
--- a/packages/core/themeV2/src/themes/bob/index.ts
+++ b/packages/core/themeV2/src/themes/bob/index.ts
@@ -13,6 +13,7 @@ import { radio } from './radio';
 import { colors } from './colors';
 import { spinner } from './spinner';
 import { _switch } from './switch';
+import { progressBar } from './progress-bar';
 
 const bobTheme = defineTheme({
   colors,
@@ -27,7 +28,8 @@ const bobTheme = defineTheme({
   list,
   radio,
   spinner,
-  switch: _switch
+  switch: _switch,
+  progressBar
 });
 
 export { bobTheme };
diff --git a/packages/core/themeV2/src/themes/bob/input.ts b/packages/core/themeV2/src/themes/bob/input.ts
index 5404b9941..8266281eb 100644
--- a/packages/core/themeV2/src/themes/bob/input.ts
+++ b/packages/core/themeV2/src/themes/bob/input.ts
@@ -7,7 +7,7 @@ const input: InputTheme = {
   base: {
     color: color('light'),
     backgroundColor: color('grey-500'),
-    border: `1px solid ${color('grey-200')}`,
+    border: `1px solid ${color('grey-400')}`,
     borderRadius: rounded('md'),
     ...transition('common', 'normal')
   },
@@ -38,27 +38,27 @@ const input: InputTheme = {
     }
   },
   hover: {
-    border: `1px solid ${color('grey-200')}`
+    border: `1px solid ${color('grey-300')}`
   },
   focus: {
     border: `1px solid ${color('light')}`,
     boxShadow: `0 0 0 1px ${color('light')}`
   },
   placeholder: {
-    color: color('grey-100')
+    color: color('grey-300')
   },
   disabled: {
     opacity: 0.5
   },
   error: {
     base: {
-      border: `1px solid ${'#FF0000'}`
+      border: `1px solid ${color('red-500')}`
     },
     hover: {
-      border: `1px solid ${'#FF0000'}`
+      border: `1px solid ${color('red-500')}`
     },
     focus: {
-      boxShadow: `0 0 0 1px ${'#FF0000'}`
+      boxShadow: `0 0 0 1px ${color('red-500')}`
     }
   }
 };
diff --git a/packages/core/themeV2/src/themes/bob/progress-bar.ts b/packages/core/themeV2/src/themes/bob/progress-bar.ts
new file mode 100644
index 000000000..585c92676
--- /dev/null
+++ b/packages/core/themeV2/src/themes/bob/progress-bar.ts
@@ -0,0 +1,41 @@
+import { ProgressBarTheme } from '../../components';
+import { spacing } from '../../core';
+
+import { color } from './colors';
+
+const progressBar: ProgressBarTheme = {
+  track: {
+    background: color('grey-500')
+  },
+  fill: {
+    background: `linear-gradient(90deg, #FF6301 0%, #FFF500 100%)`
+  },
+  size: {
+    s: {
+      track: {
+        height: spacing('s')
+      },
+      fill: {
+        height: spacing('s')
+      }
+    },
+    md: {
+      track: {
+        height: spacing('md')
+      },
+      fill: {
+        height: spacing('md')
+      }
+    },
+    lg: {
+      track: {
+        height: spacing('lg')
+      },
+      fill: {
+        height: spacing('lg')
+      }
+    }
+  }
+};
+
+export { progressBar };
diff --git a/packages/core/themeV2/src/themes/bob/spinner.ts b/packages/core/themeV2/src/themes/bob/spinner.ts
index 8195c92cf..c8bf1483c 100644
--- a/packages/core/themeV2/src/themes/bob/spinner.ts
+++ b/packages/core/themeV2/src/themes/bob/spinner.ts
@@ -39,7 +39,7 @@ const spinner: SpinnerTheme = {
       borderColor: `${color('light')} ${color('light')} ${'transparent'}`
     },
     primary: {
-      borderColor: `${color('primary-300')} ${color('primary-300')} ${'transparent'}`
+      borderColor: `${color('primary-500')} ${color('primary-500')} ${'transparent'}`
     }
   }
 };
diff --git a/packages/icons/common/src/CheckCircle.tsx b/packages/icons/common/src/CheckCircle.tsx
index 022333796..21f2846ce 100644
--- a/packages/icons/common/src/CheckCircle.tsx
+++ b/packages/icons/common/src/CheckCircle.tsx
@@ -13,7 +13,7 @@ const CheckCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
     xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+      d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'
       strokeLinecap='round'
       strokeLinejoin='round'
     />