diff --git a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
index 684866240c6..dd08e2df9c9 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-creation-flow/cluster-new/cluster-new.tsx
@@ -56,7 +56,7 @@ function CardOption({ icon, title, description, selectedCloudProvider, recommend
 
   const renderContent = () => (
     <span>
-      <span className="text-neutral-neutral flex flex-col text-base font-semibold">
+      <span className="flex flex-col text-base font-semibold text-neutral">
         {title}
         {recommended && (
           <span>
diff --git a/libs/shared/ui/src/lib/components/accordion/accordion.tsx b/libs/shared/ui/src/lib/components/accordion/accordion.tsx
index 4979b12c9dc..707560a3c89 100644
--- a/libs/shared/ui/src/lib/components/accordion/accordion.tsx
+++ b/libs/shared/ui/src/lib/components/accordion/accordion.tsx
@@ -31,7 +31,7 @@ const AccordionTrigger = forwardRef<ElementRef<typeof AccordionPrimitive.Trigger
     >
       <Icon
         iconName="chevron-down"
-        className="text-neutral-350 transition-transform duration-200 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
+        className="text-neutral-subtle transition-transform duration-200 ease-[cubic-bezier(0.87,_0,_0.13,_1)] group-data-[state=open]:rotate-180"
         aria-hidden
       />
       {children}
diff --git a/libs/shared/ui/src/lib/components/action-toolbar/action-toolbar.tsx b/libs/shared/ui/src/lib/components/action-toolbar/action-toolbar.tsx
index d6977daf6a6..054f38ca42f 100644
--- a/libs/shared/ui/src/lib/components/action-toolbar/action-toolbar.tsx
+++ b/libs/shared/ui/src/lib/components/action-toolbar/action-toolbar.tsx
@@ -46,6 +46,9 @@ const toolbarButtonVariants = cva(['active:scale-100'], {
       className: [
         'first:rounded-l',
         'last:rounded-r',
+        'first:border-r-0',
+        'first:border-x',
+        'border-l-0',
         'hover:border-brand-strong',
         'data-[state=open]:bg-surface-brand-subtle',
         'data-[state=open]:border-brand-strong',
diff --git a/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.stories.tsx b/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.stories.tsx
index eb4da4d5a8c..92362236649 100644
--- a/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.stories.tsx
+++ b/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.stories.tsx
@@ -19,7 +19,7 @@ const Story: Meta<typeof ActionTriggerStatusChip> = {
   },
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.tsx b/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.tsx
index 596b6bb40dc..05bdb1f83ec 100644
--- a/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.tsx
+++ b/libs/shared/ui/src/lib/components/action-trigger-status-chip/action-trigger-status-chip.tsx
@@ -13,17 +13,7 @@ import Indicator from '../indicator/indicator'
 import StatusChip from '../status-chip/status-chip'
 
 const triggerActionVariants = cva(
-  [
-    'flex',
-    'items-center',
-    'justify-center',
-    'rounded-full',
-    'border',
-    'border-neutral-200',
-    'text-neutral-350',
-    'dark:border-neutral-400',
-    'dark:text-neutral-250',
-  ],
+  ['flex', 'items-center', 'justify-center', 'rounded-full', 'border', 'border-neutral', 'text-neutral-subtle'],
   {
     variants: {
       size: {
@@ -34,7 +24,7 @@ const triggerActionVariants = cva(
   }
 )
 
-const statusChipVariants = cva(['relative', 'rounded-full', 'bg-white', 'dark:bg-neutral-600'], {
+const statusChipVariants = cva(['relative', 'rounded-full', 'bg-background'], {
   variants: {
     size: {
       sm: ['-left-0.5', '-top-1'],
@@ -54,17 +44,17 @@ export function TriggerActionIcon({
     <span className={className}>
       {match(triggerAction)
         .with(undefined, 'UNKNOWN', () => <Icon iconStyle="regular" iconName="question-circle" />)
-        .with('DELETE', () => <Icon iconStyle="solid" iconName="trash-can-xmark" />)
-        .with('UNINSTALL', () => <Icon iconStyle="solid" iconName="trash-can-xmark" />)
-        .with('DEPLOY', () => <Icon iconStyle="solid" iconName="play" />)
-        .with('RESTART', () => <Icon iconStyle="solid" iconName="arrow-rotate-right" />)
-        .with('STOP', () => <Icon iconStyle="solid" iconName="stop" />)
-        .with('DEPLOY_DRY_RUN', () => <Icon iconStyle="solid" iconName="play" />)
-        .with('TERRAFORM_FORCE_UNLOCK', () => <Icon iconStyle="regular" iconName="circle-play" />)
-        .with('TERRAFORM_MIGRATE_STATE', () => <Icon iconStyle="regular" iconName="circle-play" />)
-        .with('DELETE_RESOURCES_ONLY', () => <Icon iconStyle="solid" iconName="trash-can-xmark" />)
-        .with('TERRAFORM_PLAN_ONLY', () => <Icon iconStyle="regular" iconName="circle-play" />)
-        .with('TERRAFORM_PLAN_AND_APPLY', () => <Icon iconStyle="regular" iconName="circle-play" />)
+        .with('DELETE', () => <Icon iconStyle="regular" iconName="trash-can" />)
+        .with('UNINSTALL', () => <Icon iconStyle="regular" iconName="trash-can" />)
+        .with('DEPLOY', () => <Icon iconStyle="regular" iconName="rocket" />)
+        .with('RESTART', () => <Icon iconStyle="regular" iconName="arrow-rotate-right" />)
+        .with('STOP', () => <Icon iconStyle="regular" iconName="circle-stop" />)
+        .with('DEPLOY_DRY_RUN', () => <Icon iconStyle="regular" iconName="rocket" />)
+        .with('TERRAFORM_FORCE_UNLOCK', () => <Icon iconStyle="regular" iconName="lock-keyhole-open" />)
+        .with('TERRAFORM_MIGRATE_STATE', () => <Icon iconStyle="regular" iconName="file-export" />)
+        .with('DELETE_RESOURCES_ONLY', () => <Icon iconStyle="regular" iconName="trash-can" />)
+        .with('TERRAFORM_PLAN_ONLY', () => <Icon iconStyle="regular" iconName="rectangle-list" />)
+        .with('TERRAFORM_PLAN_AND_APPLY', () => <Icon iconStyle="regular" iconName="rocket" />)
         .with('TERRAFORM_DESTROY', () => <Icon iconStyle="regular" iconName="fire" />)
         .with('TERRAFORM_FORCE_UNLOCK_STATE', () => <Icon iconStyle="regular" iconName="lock-keyhole-open" />)
         .exhaustive()}
diff --git a/libs/shared/ui/src/lib/components/animated-gradient-text/animated-gradient-text.tsx b/libs/shared/ui/src/lib/components/animated-gradient-text/animated-gradient-text.tsx
index b181115f9a8..ddd6fe89151 100644
--- a/libs/shared/ui/src/lib/components/animated-gradient-text/animated-gradient-text.tsx
+++ b/libs/shared/ui/src/lib/components/animated-gradient-text/animated-gradient-text.tsx
@@ -16,7 +16,7 @@ export function AnimatedGradientText({ children, className, shimmerWidth = 100 }
         } as CSSProperties
       }
       className={twMerge(
-        'relative inline-flex animate-[shiny-text_3s_linear_infinite] items-center bg-gradient-to-r from-brand-500 via-brand-200 via-60% to-brand-500 bg-clip-text text-transparent [background-position:0_0] [background-size:var(--shimmer-width)_100%]',
+        'relative inline-flex animate-[shiny-text_3s_linear_infinite] items-center bg-gradient-to-r from-brand-11 via-brand-8 via-60% to-brand-11 bg-clip-text text-transparent [background-position:0_0] [background-size:var(--shimmer-width)_100%]',
         className
       )}
     >
diff --git a/libs/shared/ui/src/lib/components/badge/badge.stories.tsx b/libs/shared/ui/src/lib/components/badge/badge.stories.tsx
index d21d6dbc216..f1239aba525 100644
--- a/libs/shared/ui/src/lib/components/badge/badge.stories.tsx
+++ b/libs/shared/ui/src/lib/components/badge/badge.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof Badge> = {
   title: 'Badge',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-surface-neutral', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/badge/badge.tsx b/libs/shared/ui/src/lib/components/badge/badge.tsx
index db7d7f16df2..6aac4e4e066 100644
--- a/libs/shared/ui/src/lib/components/badge/badge.tsx
+++ b/libs/shared/ui/src/lib/components/badge/badge.tsx
@@ -35,7 +35,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'red',
-      className: ['bg-surface-negative-subtle'],
+      className: ['bg-surface-negative-subtle', 'text-negative'],
     },
     {
       variant: 'outline',
@@ -45,7 +45,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'purple',
-      className: ['bg-surface-accent1-component'],
+      className: ['bg-surface-accent1-component', 'text-accent1'],
     },
     {
       variant: 'outline',
@@ -55,7 +55,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'sky',
-      className: ['bg-surface-info-subtle'],
+      className: ['bg-surface-info-subtle', 'text-info'],
     },
     {
       variant: 'outline',
@@ -65,7 +65,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'green',
-      className: ['bg-surface-positive-subtle'],
+      className: ['bg-surface-positive-subtle', 'text-positive'],
     },
     {
       variant: 'outline',
@@ -75,7 +75,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'yellow',
-      className: ['bg-surface-warning-subtle'],
+      className: ['bg-surface-warning-subtle', 'text-warning'],
     },
     {
       variant: 'outline',
@@ -85,7 +85,7 @@ const badgeVariants = cva(['text-neutral', 'inline-flex', 'items-center', 'shrin
     {
       variant: 'surface',
       color: 'brand',
-      className: ['bg-surface-brand-subtle'],
+      className: ['bg-surface-brand-subtle', 'text-brand'],
     },
     {
       variant: 'outline',
diff --git a/libs/shared/ui/src/lib/components/banner/banner.tsx b/libs/shared/ui/src/lib/components/banner/banner.tsx
index 64cda46eef9..e374b706bd6 100644
--- a/libs/shared/ui/src/lib/components/banner/banner.tsx
+++ b/libs/shared/ui/src/lib/components/banner/banner.tsx
@@ -8,25 +8,12 @@ import Icon from '../icon/icon'
 const bannerVariants = cva('flex h-10 items-center justify-center text-sm font-medium', {
   variants: {
     color: {
-      brand: ['bg-brand-500', 'text-white'],
-      yellow: ['bg-yellow-500', 'text-yellow-900'],
-      purple: ['bg-purple-500', 'text-white'],
-      red: ['bg-red-500', 'text-white'],
+      brand: ['bg-surface-brand-component', 'text-brand'],
+      yellow: ['bg-surface-warning-component', 'text-warning'],
+      red: ['bg-surface-negative-component', 'text-negative'],
     },
   },
 })
-
-const buttonVariants = cva('ml-4', {
-  variants: {
-    color: {
-      brand: ['!bg-brand-400/50', 'hover:!bg-brand-400/75', '!text-white'],
-      yellow: ['!bg-yellow-600/50', 'hover:!bg-yellow-600/75', '!text-yellow-900'],
-      purple: ['!bg-purple-400', 'hover:!bg-purple-600', '!text-white'],
-      red: ['!bg-red-400', 'hover:!bg-red-600', '!text-white'],
-    },
-  },
-})
-
 export interface BannerProps extends VariantProps<typeof bannerVariants> {
   buttonLabel?: string
   buttonIconRight?: IconName
@@ -43,7 +30,7 @@ export const Banner = forwardRef<HTMLDivElement, PropsWithChildren<BannerProps>>
     <div className={twMerge(bannerVariants({ color }), 'relative')} ref={forwardedRef}>
       {children}
       {buttonLabel && (
-        <Button type="button" className={twMerge('gap-1', buttonVariants({ color }))} onClick={onClickButton}>
+        <Button type="button" className="ml-4 gap-1" variant="solid" color={color} onClick={onClickButton}>
           {buttonLabel}
           {buttonIconRight && <Icon iconName={buttonIconRight} />}
         </Button>
@@ -51,10 +38,9 @@ export const Banner = forwardRef<HTMLDivElement, PropsWithChildren<BannerProps>>
       {dismissible && (
         <Button
           type="button"
-          className={twMerge(
-            'absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 justify-center',
-            buttonVariants({ color })
-          )}
+          variant="plain"
+          color={color}
+          className="absolute right-2 top-1/2 flex h-7 w-7 -translate-y-1/2 justify-center"
           onClick={onDismiss}
           aria-label="Dismiss"
         >
diff --git a/libs/shared/ui/src/lib/components/block-content-delete/block-content-delete.tsx b/libs/shared/ui/src/lib/components/block-content-delete/block-content-delete.tsx
index b06f1f1e0d5..0828dfa8e13 100644
--- a/libs/shared/ui/src/lib/components/block-content-delete/block-content-delete.tsx
+++ b/libs/shared/ui/src/lib/components/block-content-delete/block-content-delete.tsx
@@ -47,7 +47,7 @@ export function BlockContentDelete(props: BlockContentDeleteProps) {
         <p className="mb-5 text-sm text-neutral">{description}</p>
         {list?.map((element, index) => (
           <p key={index} data-testid={element.text} className="mb-2 text-sm font-medium text-neutral">
-            <Icon name={element.icon || 'icon-solid-trash'} className="mr-3 text-neutral" />
+            <Icon name={element.icon || 'icon-solid-trash'} className="mr-3 text-negative" />
             {element.text}
           </p>
         ))}
diff --git a/libs/shared/ui/src/lib/components/board/board.stories.tsx b/libs/shared/ui/src/lib/components/board/board.stories.tsx
index 5b4e132e443..4b1700baf55 100644
--- a/libs/shared/ui/src/lib/components/board/board.stories.tsx
+++ b/libs/shared/ui/src/lib/components/board/board.stories.tsx
@@ -7,7 +7,7 @@ const Story: Meta<typeof Board.Root> = {
   title: 'Board',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-surface-neutral', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/board/board.tsx b/libs/shared/ui/src/lib/components/board/board.tsx
index e9af5ec8289..f302c7f87a1 100644
--- a/libs/shared/ui/src/lib/components/board/board.tsx
+++ b/libs/shared/ui/src/lib/components/board/board.tsx
@@ -194,7 +194,7 @@ const BoardColumn = <T extends Card>({
 
   return (
     <motion.div layout="position" layoutId={columnId} className="flex w-60 shrink-0 flex-col rounded">
-      <div className="flex h-[58px] items-center justify-between rounded-t border border-neutral-250 bg-neutral-100 px-3 py-2">
+      <div className="flex h-[58px] items-center justify-between rounded-t-lg border border-neutral bg-surface-neutral-subtle px-3 py-2 text-neutral">
         {heading}
       </div>
 
@@ -202,7 +202,7 @@ const BoardColumn = <T extends Card>({
         onDrop={(e) => handleDragEnd(e)}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
-        className={`w-full rounded-b border border-t-0 border-neutral-250 px-1 transition-colors ${active ? 'bg-green-100' : 'bg-neutral-200'}`}
+        className={`w-full rounded-b-lg border border-t-0 border-neutral px-1 text-neutral transition-colors ${active ? 'bg-surface-neutral-componentHover' : 'bg-surface-neutral-component'}`}
       >
         {children}
         <BoardDropIndicator columnId={columnId} />
@@ -227,7 +227,7 @@ const BoardCard = ({ children, cardId, columnId }: BoardCardProps) => {
         layoutId={cardId}
         draggable="true"
         onDragStart={(e) => handleDragStart(e as unknown as DragEvent)}
-        className="cursor-grab rounded border border-neutral-200 bg-neutral-50 px-2 py-3 active:cursor-grabbing active:outline active:outline-green-500"
+        className="cursor-grab rounded border border-neutral bg-surface-neutral px-2 py-3 text-neutral active:cursor-grabbing active:border-neutral-strong"
       >
         {children}
       </motion.div>
@@ -248,7 +248,7 @@ const BoardDropIndicator = ({ beforeId, columnId }: BoardDropIndicatorProps) =>
       data-before={beforeId ?? '-1'}
       data-board={boardId}
       data-column={columnId}
-      className="my-0.5 h-0.5 w-full bg-violet-400 opacity-0"
+      className="my-0.5 h-0.5 w-full bg-surface-neutral-solid opacity-0"
     />
   )
 }
diff --git a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
index 11247b76d66..16e0b8f91b9 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
+++ b/libs/shared/ui/src/lib/components/button-primitive/button-primitive.tsx
@@ -158,10 +158,26 @@ const _buttonVariants = cva(
           'hover:bg-surface-brand-component',
         ],
       },
+      //plain
       {
         variant: 'plain',
         color: 'neutral',
-        className: ['text-neutral-subtle', 'hover:bg-surface-neutral-subtle'],
+        className: ['text-neutral-subtle', 'border-0', 'border-neutral-subtle', 'hover:border'],
+      },
+      {
+        variant: 'plain',
+        color: 'red',
+        className: ['text-negative', 'border-0', 'border-negative-subtle', 'hover:border'],
+      },
+      {
+        variant: 'plain',
+        color: 'yellow',
+        className: ['text-warning', 'border-0', 'border-warning-subtle', 'hover:border'],
+      },
+      {
+        variant: 'plain',
+        color: 'brand',
+        className: ['text-brand', 'border-0', 'border-brand-subtle', 'hover:border'],
       },
     ],
     defaultVariants: {
diff --git a/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action-element/button-icon-action-element.tsx b/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action-element/button-icon-action-element.tsx
index ace20b3a15b..f7ea8cf2219 100644
--- a/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action-element/button-icon-action-element.tsx
+++ b/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action-element/button-icon-action-element.tsx
@@ -28,7 +28,7 @@ export function ButtonIconActionElement(props: ButtonIconActionElementProps) {
     if (triggerTooltip) {
       return (
         <Tooltip content={triggerTooltip} delayDuration={100}>
-          <span className={`flex ${withRightBorder ? 'border-r border-r-neutral-250' : ''}`}>{content}</span>
+          <span className={`flex ${withRightBorder ? 'border-r border-r-neutral' : ''}`}>{content}</span>
         </Tooltip>
       )
     } else {
diff --git a/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action.tsx b/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action.tsx
index 07a68f6461b..5a921263e40 100644
--- a/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action.tsx
+++ b/libs/shared/ui/src/lib/components/buttons/button-icon-action/button-icon-action.tsx
@@ -7,6 +7,9 @@ export interface ButtonIconActionProps {
   className?: string
 }
 
+/**
+ * @deprecated Use the standard <Button> component instead.
+ */
 export function ButtonIconAction(props: ButtonIconActionProps) {
   const { actions, className = '' } = props
 
diff --git a/libs/shared/ui/src/lib/components/callout/callout.stories.tsx b/libs/shared/ui/src/lib/components/callout/callout.stories.tsx
index 489702c2f46..c0b284e8adf 100644
--- a/libs/shared/ui/src/lib/components/callout/callout.stories.tsx
+++ b/libs/shared/ui/src/lib/components/callout/callout.stories.tsx
@@ -1,14 +1,22 @@
 import type { Meta } from '@storybook/react-webpack5'
 import { Button } from '../button/button'
 import { Icon } from '../icon/icon'
-import { Callout } from './callout'
+import { Callout, type CalloutRootProps } from './callout'
+
+const COLOR_OPTIONS = ['green', 'red', 'sky', 'yellow', 'neutral', 'purple'] as const
 
 const Story: Meta<typeof Callout.Root> = {
   component: Callout.Root,
   title: 'Callout',
+  argTypes: {
+    color: {
+      options: COLOR_OPTIONS,
+      control: { type: 'select' },
+    },
+  },
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -17,8 +25,11 @@ const Story: Meta<typeof Callout.Root> = {
 export default Story
 
 export const Primary = {
-  render: () => (
-    <Callout.Root color="green">
+  args: {
+    color: 'green',
+  },
+  render: (props: CalloutRootProps) => (
+    <Callout.Root {...props}>
       <Callout.Icon>
         <Icon iconName="triangle-exclamation" iconStyle="regular" />
       </Callout.Icon>
@@ -26,9 +37,7 @@ export const Primary = {
         <Callout.TextHeading>Lorem ipsum</Callout.TextHeading>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        consequat. laborum.
       </Callout.Text>
     </Callout.Root>
   ),
diff --git a/libs/shared/ui/src/lib/components/callout/callout.tsx b/libs/shared/ui/src/lib/components/callout/callout.tsx
index 845000eb33d..a1f01ccbc01 100644
--- a/libs/shared/ui/src/lib/components/callout/callout.tsx
+++ b/libs/shared/ui/src/lib/components/callout/callout.tsx
@@ -2,7 +2,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react'
 import { twMerge } from '@qovery/shared/util-js'
 
-const calloutRootVariants = cva(['flex', 'flex-row', 'gap-x-3', 'p-3', 'border', 'rounded', 'text-sm'], {
+const calloutRootVariants = cva(['flex', 'flex-row', 'gap-x-4', 'p-4', 'border', 'rounded', 'text-sm'], {
   variants: {
     color: {
       green: ['border-positive-component', 'bg-surface-positive-subtle', 'text-positive'],
@@ -10,7 +10,7 @@ const calloutRootVariants = cva(['flex', 'flex-row', 'gap-x-3', 'p-3', 'border',
       sky: ['border-info-component', 'bg-surface-info-subtle', 'text-info'],
       yellow: ['border-warning-component', 'bg-surface-warning-subtle', 'text-warning'],
       neutral: ['bg-surface-neutral-subtle', 'border-surface-neutral-component', 'text-neutral'],
-      purple: ['border-purple-500', 'bg-purple-50', 'text-purple-500'],
+      purple: ['border-accent1-subtle', 'bg-surface-accent1-component', 'text-accent1'],
     },
   },
 })
@@ -37,7 +37,7 @@ const CalloutIcon = forwardRef<ElementRef<'div'>, CalloutIconProps>(function Cal
   ref
 ) {
   return (
-    <div {...props} className={twMerge('-order-2 text-lg leading-6', className)} ref={ref}>
+    <div {...props} className={twMerge('-order-2 text-base leading-6', className)} ref={ref}>
       {children}
     </div>
   )
@@ -50,7 +50,7 @@ const CalloutText = forwardRef<ElementRef<'div'>, CalloutTextProps>(function Cal
   ref
 ) {
   return (
-    <div {...props} className={twMerge('-order-1 mr-auto gap-x-3 text-neutral', className)} ref={ref}>
+    <div {...props} className={twMerge('-order-1 mr-auto gap-x-4 text-neutral', className)} ref={ref}>
       {children}
     </div>
   )
diff --git a/libs/shared/ui/src/lib/components/copy-to-clipboard/copy-to-clipboard.tsx b/libs/shared/ui/src/lib/components/copy-to-clipboard/copy-to-clipboard.tsx
index 0bbae64c1bb..51f60549ba4 100644
--- a/libs/shared/ui/src/lib/components/copy-to-clipboard/copy-to-clipboard.tsx
+++ b/libs/shared/ui/src/lib/components/copy-to-clipboard/copy-to-clipboard.tsx
@@ -37,7 +37,7 @@ export function CopyToClipboard({ text, children, className = '' }: CopyToClipbo
               ...child.props,
               color: 'green',
               variant: 'solid',
-              className: twMerge(child.props.className, 'hover:bg-green-500'),
+              className: twMerge(child.props.className, 'hover:bg-surface-positive-solidHover'),
             },
             <Icon iconName="check" className="mr-1" />,
             'Copied'
diff --git a/libs/shared/ui/src/lib/components/description-list/description-list.stories.tsx b/libs/shared/ui/src/lib/components/description-list/description-list.stories.tsx
index bce3599071c..05fe3749ba7 100644
--- a/libs/shared/ui/src/lib/components/description-list/description-list.stories.tsx
+++ b/libs/shared/ui/src/lib/components/description-list/description-list.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof DescriptionList.Root> = {
   title: 'Description List',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -17,15 +17,6 @@ export default Story
 export const HighlightDetails = {
   render: () => (
     <>
-      <div className="dark bg-neutral-550">
-        <DescriptionList.Root>
-          <DescriptionList.Term>Name:</DescriptionList.Term>
-          <DescriptionList.Details>Foobar</DescriptionList.Details>
-
-          <DescriptionList.Term>Version:</DescriptionList.Term>
-          <DescriptionList.Details>1.2.3</DescriptionList.Details>
-        </DescriptionList.Root>
-      </div>
       <DescriptionList.Root>
         <DescriptionList.Term>Name:</DescriptionList.Term>
         <DescriptionList.Details>Foobar</DescriptionList.Details>
@@ -40,15 +31,6 @@ export const HighlightDetails = {
 export const HighlightTerm = {
   render: () => (
     <>
-      <div className="dark bg-neutral-550">
-        <DescriptionList.Root hightlight="term">
-          <DescriptionList.Term>Name:</DescriptionList.Term>
-          <DescriptionList.Details>Foobar</DescriptionList.Details>
-
-          <DescriptionList.Term>Version:</DescriptionList.Term>
-          <DescriptionList.Details>1.2.3</DescriptionList.Details>
-        </DescriptionList.Root>
-      </div>
       <DescriptionList.Root hightlight="term">
         <DescriptionList.Term>Name:</DescriptionList.Term>
         <DescriptionList.Details>Foobar</DescriptionList.Details>
diff --git a/libs/shared/ui/src/lib/components/description-list/description-list.tsx b/libs/shared/ui/src/lib/components/description-list/description-list.tsx
index 4b8144c5b72..4a21bb8bc1d 100644
--- a/libs/shared/ui/src/lib/components/description-list/description-list.tsx
+++ b/libs/shared/ui/src/lib/components/description-list/description-list.tsx
@@ -32,12 +32,7 @@ const DescriptionTerm = forwardRef<ElementRef<'dt'>, DescriptionTermProps>(funct
   return (
     <dt
       ref={ref}
-      className={twMerge(
-        highlight === 'term'
-          ? 'font-medium text-neutral-400 dark:font-normal dark:text-white'
-          : 'text-neutral-350 dark:text-neutral-300',
-        className
-      )}
+      className={twMerge(highlight === 'term' ? 'font-medium text-neutral' : 'text-neutral-subtle', className)}
       {...rest}
     >
       {children}
@@ -55,12 +50,7 @@ const DescriptionDetails = forwardRef<ElementRef<'dd'>, DescriptionDetailsProps>
   return (
     <dd
       ref={ref}
-      className={twMerge(
-        highlight === 'details'
-          ? 'font-medium text-neutral-400 dark:font-normal dark:text-white'
-          : 'text-neutral-350 dark:text-neutral-300',
-        className
-      )}
+      className={twMerge(highlight === 'details' ? 'font-medium text-neutral' : 'text-neutral-subtle', className)}
       {...rest}
     >
       {children}
diff --git a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.stories.tsx b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.stories.tsx
index ee732e839bd..16b1e04c197 100644
--- a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.stories.tsx
+++ b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.stories.tsx
@@ -7,6 +7,13 @@ import { DropdownMenu } from './dropdown-menu'
 const Story: Meta<typeof DropdownMenu.Root> = {
   component: DropdownMenu.Root,
   title: 'DropdownMenu',
+  argTypes: {
+    side: {
+      control: { type: 'inline-radio' },
+      options: ['bottom', 'left', 'right', 'top'],
+      labels: { bottom: 'down' },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ background: 'white', padding: '3em' }}>
@@ -18,14 +25,17 @@ const Story: Meta<typeof DropdownMenu.Root> = {
 export default Story
 
 export const Primary = {
-  render: () => (
+  args: {
+    side: 'bottom',
+  },
+  render: (args: { side: 'bottom' | 'left' | 'right' | 'top' }) => (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <Button size="md" variant="outline" color="neutral">
           Trigger
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content side={args.side}>
         <DropdownMenu.Item icon={<Icon iconName="play" />}>Deploy</DropdownMenu.Item>
         <DropdownMenu.Item icon={<Icon iconName="play" />} color="yellow">
           Update
diff --git a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
index ac461e68e3e..1f292c4dd94 100644
--- a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
@@ -5,15 +5,26 @@ import { type ComponentPropsWithoutRef, type ElementRef, type ReactElement, clon
 import { twMerge } from '@qovery/shared/util-js'
 
 const dropdownMenuItemVariants = cva(
-  ['px-3', 'flex', 'items-center', 'h-8', 'text-sm', 'font-medium', 'rounded-sm', 'outline-none', 'select-none'],
+  [
+    'px-3',
+    'flex',
+    'items-center',
+    'h-8',
+    'text-sm',
+    'font-medium',
+    'rounded-sm',
+    'outline-none',
+    'select-none',
+    'rounded',
+  ],
   {
     variants: {
       color: {
         brand: [
-          'data-[highlighted]:bg-brand-2',
-          'data-[highlighted]:text-brand-11',
-          'hover:bg-brand-2',
-          'hover:text-brand-11',
+          'data-[highlighted]:bg-surface-brand-component',
+          'data-[highlighted]:text-brand',
+          'hover:bg-surface-brand-component',
+          'hover:text-brand',
         ],
         red: [
           'data-[highlighted]:bg-surface-negative-component',
@@ -29,7 +40,7 @@ const dropdownMenuItemVariants = cva(
         ],
       },
       disabled: {
-        true: ['cursor-not-allowed'],
+        true: ['cursor-not-allowed, hover:bg-transparent, hover:text-neutral-disabled'],
         false: ['cursor-pointer'],
       },
     },
@@ -67,7 +78,7 @@ const dropdownMenuItemVariants = cva(
   }
 )
 
-const dropdownMenuItemIconVariants = cva(['text-sm', 'mr-3'], {
+const dropdownMenuItemIconVariants = cva(['text-sm', 'mr-2'], {
   variants: {
     color: {
       brand: [],
@@ -145,7 +156,7 @@ const DropdownMenuContent = forwardRef<ElementRef<typeof DropdownMenuPrimitive.C
           sideOffset={sideOffset}
           align={align}
           className={twMerge(
-            'flex w-[258px] flex-col gap-1 rounded-md border border-neutral bg-surface-neutral p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded',
+            'flex w-[258px] flex-col gap-1 rounded-md border border-neutral bg-surface-neutral p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-down-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-up-md-faded',
             className
           )}
           ref={ref}
diff --git a/libs/shared/ui/src/lib/components/dropzone/dropzone.tsx b/libs/shared/ui/src/lib/components/dropzone/dropzone.tsx
index 7586ca15bcb..356b30a5cad 100644
--- a/libs/shared/ui/src/lib/components/dropzone/dropzone.tsx
+++ b/libs/shared/ui/src/lib/components/dropzone/dropzone.tsx
@@ -13,12 +13,12 @@ export function Dropzone({ isDragActive, typeFile = '.env', className }: Dropzon
   return (
     <div
       className={twMerge(
-        `flex min-h-[140px] w-full cursor-pointer items-center justify-center rounded border border-neutral-250 bg-neutral-100 text-xs text-neutral-350 transition-all duration-150 ease-in-out hover:border-neutral-300`,
+        `flex min-h-[140px] w-full cursor-pointer items-center justify-center rounded border border-neutral-component bg-surface-neutral-component text-xs text-neutral-subtle transition-all duration-150 ease-in-out hover:bg-surface-neutral-componentHover`,
         classNamesDragIsActive,
         className
       )}
     >
-      <div className="flex h-full flex-col items-center justify-center text-center text-neutral-350">
+      <div className="flex h-full flex-col items-center justify-center text-center text-neutral-subtle">
         <Icon iconName="file-arrow-down" iconStyle="regular" className="mb-2 text-xl" />
         {!isDragActive ? (
           <p className="text-ssm">Click to import your {typeFile} file or drag and drop it</p>
diff --git a/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx b/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx
index b1d805a232f..3762d2cd7e2 100644
--- a/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx
+++ b/libs/shared/ui/src/lib/components/empty-state/empty-state.tsx
@@ -14,7 +14,7 @@ export function EmptyState({ title, description, className, icon, children }: Em
   return (
     <div
       className={twMerge(
-        'flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral bg-surface-neutral p-10 text-center text-sm text-neutral-subtle',
+        'flex h-56 flex-col items-center justify-center gap-4 rounded-lg border border-neutral bg-surface-neutral-subtle p-10 text-center text-sm text-neutral-subtle',
         className
       )}
     >
diff --git a/libs/shared/ui/src/lib/components/enable-box/enable-box.tsx b/libs/shared/ui/src/lib/components/enable-box/enable-box.tsx
index 745be9164d7..8a1813e5570 100644
--- a/libs/shared/ui/src/lib/components/enable-box/enable-box.tsx
+++ b/libs/shared/ui/src/lib/components/enable-box/enable-box.tsx
@@ -34,7 +34,9 @@ export function EnableBox(props: EnableBoxProps) {
     if (currentChecked !== checked) setChecked(currentChecked)
   }, [currentChecked, setChecked, checked])
 
-  const checkedClasses = currentChecked ? 'bg-brand-50 border border-brand-500' : ' bg-neutral-100  border-neutral-250'
+  const checkedClasses = currentChecked
+    ? 'bg-surface-brand-subtle border border-brand-strong'
+    : ' bg-surface-neutral-subtle border-neutral'
 
   return (
     <div
@@ -50,11 +52,11 @@ export function EnableBox(props: EnableBoxProps) {
             checked={currentChecked ?? false}
             onCheckedChange={(checked) => setCurrentChecked(checked as boolean)}
           />
-          <label htmlFor={name} className="cursor-pointer select-none text-sm font-medium text-neutral-400">
+          <label htmlFor={name} className="cursor-pointer select-none text-sm font-medium text-neutral">
             {title}
           </label>
         </div>
-        {description && <p className="ml-8 text-sm text-neutral-400">{description}</p>}
+        {description && <p className="ml-8 text-sm text-neutral">{description}</p>}
       </div>
 
       {currentChecked && <div onClick={(e) => e.stopPropagation()}>{children}</div>}
diff --git a/libs/shared/ui/src/lib/components/icon-flag/icon-flag.tsx b/libs/shared/ui/src/lib/components/icon-flag/icon-flag.tsx
index a7da69ed0a2..5593f9d3827 100644
--- a/libs/shared/ui/src/lib/components/icon-flag/icon-flag.tsx
+++ b/libs/shared/ui/src/lib/components/icon-flag/icon-flag.tsx
@@ -9,7 +9,11 @@ export function IconFlag(props: IconFlagProps) {
   const { code = 'US', className = '' } = props
 
   return (
-    <ReactCountryFlag className={`!h-[11px] !w-[14px] rounded-sm drop-shadow ${className}`} countryCode={code} svg />
+    <ReactCountryFlag
+      className={`!h-[11px] !w-[14px] rounded-sm border border-neutral retina:border-[0.5px] ${className}`}
+      countryCode={code}
+      svg
+    />
   )
 }
 
diff --git a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
index e56d0e0b336..9ec6c7b6402 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-select-small/input-select-small.tsx
@@ -55,7 +55,7 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
         name={name}
         value={value}
         className={twMerge(
-          'disabled:shadow-non h-9 w-full cursor-pointer appearance-none rounded border border-neutral bg-surface-neutral px-3 pr-6 text-sm text-neutral shadow-sm transition-colors hover:bg-surface-neutral-component focus:outline-none active:shadow-none',
+          'h-9 w-full cursor-pointer appearance-none rounded border border-neutral bg-surface-neutral px-3 pr-6 text-sm text-neutral transition-colors hover:bg-surface-neutral-component focus:outline-none',
           inputClassName
         )}
         onChange={(e) => onClickItem(e.target.value)}
diff --git a/libs/shared/ui/src/lib/components/inputs/input-select/input-select.tsx b/libs/shared/ui/src/lib/components/inputs/input-select/input-select.tsx
index b1acadbc9db..4e8790b7232 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-select/input-select.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-select/input-select.tsx
@@ -226,7 +226,7 @@ export function InputSelect({
 
   const inputActions =
     hasFocus && !disabled
-      ? '!border-brand-strong !shadow-[0_2px_2px_rgba(0, 0, 0, 0.05)] input--focused'
+      ? '!border-brand-strong input--focused'
       : disabled
         ? '!bg-surface-neutral-subtle !border-neutral !pointer-events-none'
         : hasError
@@ -273,6 +273,7 @@ export function InputSelect({
         ...base,
         backgroundColor: 'var(--neutral-1)',
         borderRadius: '6px',
+        borderColor: 'var(--neutral-6)',
       }),
       menuList: (base) => ({
         ...base,
diff --git a/libs/shared/ui/src/lib/components/legacy-avatar/legacy-avatar.tsx b/libs/shared/ui/src/lib/components/legacy-avatar/legacy-avatar.tsx
index 15f6c643511..baecf69a546 100644
--- a/libs/shared/ui/src/lib/components/legacy-avatar/legacy-avatar.tsx
+++ b/libs/shared/ui/src/lib/components/legacy-avatar/legacy-avatar.tsx
@@ -40,7 +40,7 @@ export function LegacyAvatar(props: LegacyAvatarProps) {
     noTooltip = false,
   } = props
 
-  const defineClass = `${style === LegacyAvatarStyle.STROKED ? 'border border-neutral-200' : ''} ${
+  const defineClass = `${style === LegacyAvatarStyle.STROKED ? 'border border-neutral' : ''} ${
     onClick ? 'cursor-pointer' : ''
   }`
 
@@ -54,8 +54,8 @@ export function LegacyAvatar(props: LegacyAvatarProps) {
       {url ? (
         <img src={url} alt={alt} className="h-full w-full rounded-full" />
       ) : (
-        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-200 text-center">
-          <span className="relative text-xs font-medium text-neutral-400">
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-center">
+          <span className="relative text-xs font-medium text-neutral">
             {firstName && firstName.charAt(0).toUpperCase()}
             {lastName && lastName.charAt(0).toUpperCase()}
           </span>
@@ -70,11 +70,11 @@ export function LegacyAvatar(props: LegacyAvatarProps) {
           className="absolute -right-[2px] top-[24px] flex h-[18px] w-[18px] items-center rounded-full text-sm font-medium"
         >
           {logoUrl ? (
-            <span className="flex h-full w-full items-center justify-center rounded-full bg-neutral-50 p-[2px]">
+            <span className="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral p-[2px]">
               <img src={logoUrl} alt="Logo Organization" />
             </span>
           ) : (
-            <span className="flex h-full w-full items-center justify-center rounded-full border border-neutral-50 bg-neutral-150 text-2xs uppercase text-neutral-350">
+            <span className="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-2xs uppercase text-neutral-subtle">
               {logoText}
             </span>
           )}
diff --git a/libs/shared/ui/src/lib/components/link/link.stories.tsx b/libs/shared/ui/src/lib/components/link/link.stories.tsx
index 96b99accf21..1bf80f4f223 100644
--- a/libs/shared/ui/src/lib/components/link/link.stories.tsx
+++ b/libs/shared/ui/src/lib/components/link/link.stories.tsx
@@ -7,7 +7,7 @@ const Story: Meta<typeof Link> = {
   title: 'Link',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/link/link.tsx b/libs/shared/ui/src/lib/components/link/link.tsx
index a3457745d19..72b06972bf9 100644
--- a/libs/shared/ui/src/lib/components/link/link.tsx
+++ b/libs/shared/ui/src/lib/components/link/link.tsx
@@ -7,23 +7,14 @@ import { buttonVariants } from '../button-primitive/button-primitive'
 import Icon from '../icon/icon'
 
 export const linkVariants = cva(
-  [
-    'cursor-pointer',
-    'transition',
-    'duration-100',
-    'font-medium',
-    'inline-flex',
-    'items-center',
-    'gap-1',
-    'hover:brightness-75',
-  ],
+  ['cursor-pointer', 'transition', 'duration-100', 'font-medium', 'inline-flex', 'items-center', 'gap-1'],
   {
     variants: {
       color: {
-        brand: ['text-surface-brand-solid'],
-        red: ['text-negative'],
-        sky: ['text-info'],
-        current: ['text-current'],
+        brand: ['text-brand', 'hover:text-brand-hover'],
+        red: ['text-negative', 'hover:text-negative-hover'],
+        sky: ['text-info', 'hover:text-info-hover'],
+        neutral: ['text-neutral', 'hover:text-neutral-subtle'],
       },
       size: {
         xs: ['text-xs'],
diff --git a/libs/shared/ui/src/lib/components/loader-dots/loader-dots.tsx b/libs/shared/ui/src/lib/components/loader-dots/loader-dots.tsx
index feb65639038..38bbf3e2336 100644
--- a/libs/shared/ui/src/lib/components/loader-dots/loader-dots.tsx
+++ b/libs/shared/ui/src/lib/components/loader-dots/loader-dots.tsx
@@ -7,10 +7,7 @@ export interface LoaderDotsProps {
 export function LoaderDots({ className }: LoaderDotsProps) {
   return (
     <span
-      className={twMerge(
-        'relative -left-[120px] inline-block h-2.5 w-2.5 animate-loader-dots rounded-full text-neutral-900 dark:text-neutral-250',
-        className
-      )}
+      className={twMerge('relative -left-[120px] inline-block h-2.5 w-2.5 animate-loader-dots rounded-full', className)}
     />
   )
 }
diff --git a/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.stories.tsx b/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.stories.tsx
index 7ce8b5878e1..049e5601405 100644
--- a/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.stories.tsx
+++ b/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.stories.tsx
@@ -4,12 +4,7 @@ import { LoaderSpinner } from './loader-spinner'
 export default {
   component: LoaderSpinner,
   title: 'LoaderSpinner',
-  argTypes: {
-    theme: {
-      options: ['dark', 'light'],
-      control: { type: 'select' },
-    },
-  },
+  argTypes: {},
 } as Meta<typeof LoaderSpinner>
 
 const Template: StoryFn<typeof LoaderSpinner> = (args) => <LoaderSpinner {...args} />
@@ -19,5 +14,4 @@ Primary.args = {
   className: '',
   classWidth: 'w-16',
   classBorder: 'border-4',
-  theme: 'light',
 }
diff --git a/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.tsx b/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.tsx
index 80d36a0e69d..fd755a794bb 100644
--- a/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.tsx
+++ b/libs/shared/ui/src/lib/components/loader-spinner/loader-spinner.tsx
@@ -2,17 +2,15 @@ export interface LoaderSpinnerProps {
   className?: string
   classWidth?: string
   classBorder?: string
-  theme?: 'dark' | 'light'
 }
 
 export function LoaderSpinner(props: LoaderSpinnerProps) {
-  const { className = '', classWidth = 'w-4', classBorder = 'border-2', theme = 'light' } = props
-  const themeClasses = theme === 'dark' ? 'border-neutral-350 border-r-neutral-50' : 'border-r-neutral-500'
+  const { className = '', classWidth = 'w-4', classBorder = 'border-2' } = props
 
   return (
     <div
       data-testid="spinner"
-      className={`aspect-square ${classBorder || 'border-2'}  rounded-full border-solid ${themeClasses} animate-spin ${
+      className={`aspect-square ${classBorder || 'border-2'}  animate-spin rounded-full border-solid border-neutral border-r-neutral-strong ${
         classWidth || 'w-4'
       } ${className || ''}`}
     />
diff --git a/libs/shared/ui/src/lib/components/logo-branded/logo-branded.tsx b/libs/shared/ui/src/lib/components/logo-branded/logo-branded.tsx
index d9449561935..d17efeec1cb 100644
--- a/libs/shared/ui/src/lib/components/logo-branded/logo-branded.tsx
+++ b/libs/shared/ui/src/lib/components/logo-branded/logo-branded.tsx
@@ -29,7 +29,7 @@ export function LogoBrandedIcon(props: SVGProps<SVGSVGElement>) {
       />
       <path
         d="M80.3554 21.4078L45.5514 1.31333C43.3963 0.0687351 40.7428 0.0687351 38.5906 1.31333L3.78655 21.4078C1.63427 22.6496 0.306152 24.9494 0.306152 27.4358V67.6247C0.306152 70.1111 1.63149 72.4082 3.78655 73.6528L42.071 95.7575V73.6528C42.071 72.4082 42.7336 71.261 43.8112 70.6373L62.9534 59.5864V83.6986L80.3554 73.6528C82.5104 72.4082 83.8358 70.1111 83.8358 67.6247V27.4358C83.8358 24.9494 82.5104 22.6524 80.3554 21.4078ZM40.3308 48.5354L21.1886 59.5864V37.4816C21.1886 36.2371 21.8512 35.0899 22.9288 34.4662L40.3308 24.4204C41.4083 23.7995 42.7336 23.7995 43.8112 24.4204L61.2132 34.4662C62.2907 35.0871 62.9534 36.2371 62.9534 37.4816V59.5864L43.8112 48.5354C42.7336 47.9145 41.4083 47.9145 40.3308 48.5354Z"
-        fill="#642DFF"
+        fill="var(--brand-9)"
       />
     </svg>
   )
diff --git a/libs/shared/ui/src/lib/components/navbar/navbar.tsx b/libs/shared/ui/src/lib/components/navbar/navbar.tsx
index 2e057ec0c94..884a876a7ef 100644
--- a/libs/shared/ui/src/lib/components/navbar/navbar.tsx
+++ b/libs/shared/ui/src/lib/components/navbar/navbar.tsx
@@ -43,8 +43,8 @@ const navbarItemVariants = cva(
   {
     variants: {
       active: {
-        true: ['text-brand-11'],
-        false: ['text-neutral-subtle', 'hover:text-brand-11'],
+        true: ['text-brand'],
+        false: ['text-neutral-subtle', 'hover:text-brand'],
       },
     },
     defaultVariants: {
diff --git a/libs/shared/ui/src/lib/components/pagination/pagination.tsx b/libs/shared/ui/src/lib/components/pagination/pagination.tsx
index a3e4808bd09..f3453024864 100644
--- a/libs/shared/ui/src/lib/components/pagination/pagination.tsx
+++ b/libs/shared/ui/src/lib/components/pagination/pagination.tsx
@@ -18,7 +18,7 @@ export function Pagination(props: PaginationProps) {
       <div className="flex items-center gap-0.5">
         <Button
           data-testid="button-previous-page"
-          className="w-9 justify-center"
+          className="w-8 justify-center"
           variant="surface"
           color="neutral"
           size="md"
@@ -30,7 +30,7 @@ export function Pagination(props: PaginationProps) {
         </Button>
         <Button
           data-testid="button-next-page"
-          className="w-9 justify-center"
+          className="w-8 justify-center"
           variant="surface"
           color="neutral"
           size="md"
diff --git a/libs/shared/ui/src/lib/components/password-show-hide/password-show-hide.tsx b/libs/shared/ui/src/lib/components/password-show-hide/password-show-hide.tsx
index 3650ad7fd93..aaacb1ba2a1 100644
--- a/libs/shared/ui/src/lib/components/password-show-hide/password-show-hide.tsx
+++ b/libs/shared/ui/src/lib/components/password-show-hide/password-show-hide.tsx
@@ -27,22 +27,22 @@ export function PasswordShowHide({
   const visible = defaultVisible || _visible
 
   return isSecret ? (
-    <span className={twMerge('flex items-center gap-2 text-sm text-neutral-300', className)} {...props}>
+    <span className={twMerge('flex h-5 items-center gap-2 text-sm text-neutral-disabled', className)} {...props}>
       <Tooltip content="Secret variable">
         <span>
           <Icon className="block w-4" iconName="lock-keyhole" iconStyle="regular" />
         </span>
       </Tooltip>
-      <span className="pt-1.5 text-xl font-medium tracking-widest" data-testid="hide_value_secret">
+      <span className="pt-1.5 font-medium tracking-widest" data-testid="hide_value_secret">
         ********
       </span>
     </span>
   ) : (
-    <span className={twMerge('flex items-center gap-2 text-sm', className)} {...props}>
+    <span className={twMerge('flex h-5 items-center gap-2 text-sm', className)} {...props}>
       <Tooltip content={visible ? 'Hide variable' : 'View variable'}>
         <button
           type="button"
-          className="w-4 text-brand-500"
+          className="w-4 text-brand"
           onClick={() => setVisible((visible) => !visible)}
           data-testid="toggle-button"
         >
@@ -58,18 +58,20 @@ export function PasswordShowHide({
               onChange={(e) => {
                 onChange?.(e)
               }}
-              className="h-full w-full bg-transparent text-sm text-neutral-400 outline-none"
+              className="h-full w-full bg-transparent text-neutral outline-none"
             />
           ) : (
-            <span className="truncate text-brand-500" data-testid="visible_value">
+            <span className="truncate text-neutral" data-testid="visible_value">
               {value}
             </span>
           )}
-          {canCopy && Boolean(value) && <CopyToClipboardButtonIcon content={value!} iconClassName="text-brand-500" />}
+          {canCopy && Boolean(value) && (
+            <CopyToClipboardButtonIcon content={value!} iconClassName="text-neutral-subtle hover:text-neutral" />
+          )}
         </>
       ) : (
         <Tooltip content={value}>
-          <span className="pt-1.5 text-xl font-medium tracking-widest text-neutral-350" data-testid="hide_value">
+          <span className="pt-1 font-medium tracking-widest text-neutral-subtle" data-testid="hide_value">
             ********
           </span>
         </Tooltip>
diff --git a/libs/shared/ui/src/lib/components/popover/popover.stories.tsx b/libs/shared/ui/src/lib/components/popover/popover.stories.tsx
index 1f112079ef9..2a991ec56e9 100644
--- a/libs/shared/ui/src/lib/components/popover/popover.stories.tsx
+++ b/libs/shared/ui/src/lib/components/popover/popover.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof Popover.Root> = {
   title: 'Popover',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -16,10 +16,10 @@ export const Primary = {
   render: () => (
     <Popover.Root>
       <Popover.Trigger>
-        <span>Click Me</span>
+        <span className="text-neutral">Click Me</span>
       </Popover.Trigger>
       <Popover.Content style={{ width: 360 }}>
-        <p>
+        <p className="text-sm text-neutral">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
           consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
diff --git a/libs/shared/ui/src/lib/components/progress-bar/progress-bar.stories.tsx b/libs/shared/ui/src/lib/components/progress-bar/progress-bar.stories.tsx
index dbb4c098628..63b88c49b0e 100644
--- a/libs/shared/ui/src/lib/components/progress-bar/progress-bar.stories.tsx
+++ b/libs/shared/ui/src/lib/components/progress-bar/progress-bar.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof ProgressBar.Root> = {
   title: 'ProgressBar',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em', maxWidth: '600px' }}>
+      <div style={{ background: 'bg-white', padding: '3em', maxWidth: '600px' }}>
         <Story />
       </div>
     ),
@@ -18,13 +18,13 @@ export const Default: StoryObj<typeof ProgressBar.Root> = {
   render: () => (
     <div className="flex w-full flex-col gap-y-14">
       <ProgressBar.Root>
-        <ProgressBar.Cell value={60} color="var(--color-green-500)" />
-        <ProgressBar.Cell value={30} color="var(--color-yellow-500)" />
-        <ProgressBar.Cell value={10} color="var(--color-brand-500)" />
+        <ProgressBar.Cell value={60} color="var(--positive-9)" />
+        <ProgressBar.Cell value={30} color="var(--warning-9)" />
+        <ProgressBar.Cell value={10} color="var(--brand-9)" />
       </ProgressBar.Root>
       <ProgressBar.Root mode="absolute">
-        <ProgressBar.Cell value={30} color="var(--color-green-500)" />
-        <ProgressBar.Cell value={10} color="var(--color-brand-500)" />
+        <ProgressBar.Cell value={30} color="var(--positive-9)" />
+        <ProgressBar.Cell value={10} color="var(--brand-9)" />
       </ProgressBar.Root>
     </div>
   ),
diff --git a/libs/shared/ui/src/lib/components/radio-group/radio-group.stories.tsx b/libs/shared/ui/src/lib/components/radio-group/radio-group.stories.tsx
index 5faa892ab01..8cc4fff48fc 100644
--- a/libs/shared/ui/src/lib/components/radio-group/radio-group.stories.tsx
+++ b/libs/shared/ui/src/lib/components/radio-group/radio-group.stories.tsx
@@ -17,19 +17,19 @@ export default Story
 export const Primary = {
   render: () => (
     <RadioGroup.Root defaultValue="1">
-      <label className="flex items-center gap-3">
+      <label className="flex items-center gap-3 text-neutral">
         <RadioGroup.Item value="1" /> Value 1
       </label>
-      <label className="flex items-center gap-3">
+      <label className="flex items-center gap-3 text-neutral">
         <RadioGroup.Item value="2" /> Value 2
       </label>
-      <label className="flex items-center gap-3">
+      <label className="flex items-center gap-3 text-neutral">
         <RadioGroup.Item value="3" /> Value 3
       </label>
-      <label className="flex items-center gap-3">
+      <label className="flex items-center gap-3 text-neutral">
         <RadioGroup.Item value="4" disabled /> Value 4
       </label>
-      <label className="flex items-center gap-3">
+      <label className="flex items-center gap-3 text-neutral">
         <RadioGroup.Item value="5" disabled checked /> Value 5
       </label>
     </RadioGroup.Root>
diff --git a/libs/shared/ui/src/lib/components/section/section.stories.tsx b/libs/shared/ui/src/lib/components/section/section.stories.tsx
index 4d89d6f8b2a..ca22569582b 100644
--- a/libs/shared/ui/src/lib/components/section/section.stories.tsx
+++ b/libs/shared/ui/src/lib/components/section/section.stories.tsx
@@ -7,7 +7,7 @@ const Story: Meta<typeof Section> = {
   title: 'Section',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/segmented-control/segmented-control.stories.tsx b/libs/shared/ui/src/lib/components/segmented-control/segmented-control.stories.tsx
index 0b39d25e5da..ca08faba9be 100644
--- a/libs/shared/ui/src/lib/components/segmented-control/segmented-control.stories.tsx
+++ b/libs/shared/ui/src/lib/components/segmented-control/segmented-control.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof SegmentedControl.Root> = {
   title: 'SegmentedControl',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/segmented-control/segmented-control.tsx b/libs/shared/ui/src/lib/components/segmented-control/segmented-control.tsx
index 16afc52a753..6534f432caf 100644
--- a/libs/shared/ui/src/lib/components/segmented-control/segmented-control.tsx
+++ b/libs/shared/ui/src/lib/components/segmented-control/segmented-control.tsx
@@ -34,7 +34,7 @@ const SegmentedControlRoot = forwardRef<ElementRef<typeof ToggleGroupPrimitive.R
       <ToggleGroupPrimitive.Root
         ref={forwardedRef}
         className={twMerge(
-          'relative inline-grid h-9 min-w-max auto-cols-[1fr] grid-flow-col items-stretch rounded bg-neutral-150 align-top font-medium text-neutral-300',
+          'relative inline-grid h-9 min-w-max auto-cols-[1fr] grid-flow-col items-stretch rounded bg-surface-neutral-component align-top font-medium text-neutral-disabled',
           className
         )}
         onValueChange={(value) => {
@@ -72,7 +72,7 @@ const SegmentedControlItem = forwardRef<ElementRef<typeof ToggleGroupPrimitive.I
         {/* SegmentedControlItemLabel */}
         <span className="box-border flex grow items-center justify-center">
           {/* SegmentedControlItemLabelActive */}
-          <span className="box-border flex h-9 grow items-center justify-center rounded border border-neutral-250 bg-white px-4 text-neutral-400 opacity-0 shadow-sm group-data-[state=on]:opacity-100">
+          <span className="box-border flex h-9 grow items-center justify-center rounded border border-neutral bg-surface-neutral px-4 text-neutral opacity-0 group-data-[state=on]:opacity-100">
             {children}
           </span>
           {/* SegmentedControlItemLabelInactive */}
diff --git a/libs/shared/ui/src/lib/components/sidebar/sidebar.tsx b/libs/shared/ui/src/lib/components/sidebar/sidebar.tsx
index 6ff3da97f26..8ed36b7388c 100644
--- a/libs/shared/ui/src/lib/components/sidebar/sidebar.tsx
+++ b/libs/shared/ui/src/lib/components/sidebar/sidebar.tsx
@@ -159,7 +159,7 @@ const SidebarRoot = forwardRef<ElementRef<'div'>, SidebarRootProps>(function Sid
 const SidebarBadge = ({ children }: PropsWithChildren) => (
   <span
     data-testid="sidebar-badge"
-    className="ml-auto rounded bg-surface-brand-solid px-1 text-3xs uppercase text-neutral-contrasted"
+    className="ml-auto rounded bg-surface-brand-solid px-1 text-3xs uppercase text-neutralInvert"
   >
     {children}
   </span>
diff --git a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx
index 8ab89629ff0..56255c2493a 100644
--- a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx
+++ b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx
@@ -16,7 +16,7 @@ const Story: Meta<typeof StageStatusChip> = {
   },
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <div className="inline-flex">
           <Story />
         </div>
diff --git a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx
index e1808960b27..ff258b22d5f 100644
--- a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx
+++ b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx
@@ -21,11 +21,12 @@ export function StageStatusChip({ status, className = '' }: StageStatusChipProps
     .with('SKIPPED', 'SKIP', () => (
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
         <path
-          className="fill-neutral-100 stroke-neutral-250 dark:fill-neutral-650 dark:stroke-neutral-400"
+          fill="var(--neutral-1)"
+          stroke="var(--neutral-6)"
           d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
         ></path>
         <path
-          fill="#A0AFC5"
+          fill="var(--neutral-11)"
           d="M6.91 16.241a.44.44 0 00.693.36l6.009-4.241a.44.44 0 000-.72L7.603 7.4a.44.44 0 00-.693.359v8.482zm8.924-9.331a.44.44 0 00-.44.44v9.3c0 .244.197.44.44.44h.817a.44.44 0 00.44-.44v-9.3a.44.44 0 00-.44-.44h-.817z"
         ></path>
       </svg>
@@ -33,23 +34,24 @@ export function StageStatusChip({ status, className = '' }: StageStatusChipProps
     .with('QUEUED', () => (
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
         <path
-          stroke="#847AE6"
+          fill="var(--brand-2)"
+          stroke="var(--brand-6)"
           d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
         ></path>
         <g clipPath="url(#clip0_9487_5796)">
           <g clipPath="url(#clip1_9487_5796)">
             <path
-              fill="#847AE6"
+              fill="var(--brand-11)"
               d="M17.375 12a5.375 5.375 0 10-10.75 0 5.375 5.375 0 0010.75 0zm-11.99 0a6.615 6.615 0 1113.23 0 6.615 6.615 0 01-13.23 0zm7.235-3.514V12c0 .207-.103.4-.276.517L9.863 14.17a.619.619 0 01-.86-.174.618.618 0 01.173-.86l2.204-1.468V8.486c0-.344.276-.62.62-.62s.62.276.62.62z"
             ></path>
           </g>
         </g>
         <defs>
           <clipPath id="clip0_9487_5796">
-            <path fill="#fff" d="M0 0H14V14H0z" transform="translate(5 5)"></path>
+            <path fill="var(--background-1)" d="M0 0H14V14H0z" transform="translate(5 5)"></path>
           </clipPath>
           <clipPath id="clip1_9487_5796">
-            <path fill="#fff" d="M0 0H14V14H0z" transform="translate(5 5)"></path>
+            <path fill="var(--background-1)" d="M0 0H14V14H0z" transform="translate(5 5)"></path>
           </clipPath>
         </defs>
       </svg>
@@ -58,14 +60,14 @@ export function StageStatusChip({ status, className = '' }: StageStatusChipProps
       <span className="relative flex h-6 w-6 items-center justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" fill="none" viewBox="0 0 22 24">
           <path
-            fill="#5B50D6"
-            stroke="#847AE6"
+            fill="var(--brand-9)"
+            stroke="var(--brand-7)"
             d="M.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 012.99 4.507s0 0 0 0L8.49 1.2h0a4.864 4.864 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892A5.333 5.333 0 01.5 15.009V8.993z"
           ></path>
         </svg>
         <span
           aria-label="loading"
-          className="absolute left-0 top-0 flex h-full w-full animate-spin items-center justify-center text-neutral-50"
+          className="absolute left-0 top-0 flex h-full w-full animate-spin items-center justify-center text-neutralInvert"
         >
           <Icon iconName="loader" />
         </span>
@@ -74,12 +76,12 @@ export function StageStatusChip({ status, className = '' }: StageStatusChipProps
     .with('DONE', 'SUCCESS', () => (
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
         <path
-          fill="#44C979"
-          stroke="#31AC6F"
+          fill="var(--positive-9)"
+          stroke="var(--positive-7)"
           d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
         ></path>
         <path
-          className="fill-neutral-50 dark:fill-neutral-700"
+          className="fill-surface-neutral-contrasted"
           fillRule="evenodd"
           d="M10.138 16.337l7.533-7.143-1.582-1.495-5.955 5.644-2.978-2.822-1.577 1.495 4.56 4.32z"
           clipRule="evenodd"
@@ -89,11 +91,12 @@ export function StageStatusChip({ status, className = '' }: StageStatusChipProps
     .with('CANCELED', 'CANCEL', () => (
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
         <path
-          className="fill-neutral-100 stroke-neutral-250 dark:fill-neutral-650 dark:stroke-neutral-400"
+          fill="var(--neutral-2)"
+          stroke="var(--neutral-6)"
           d="M1.5 8.993c0-.91.23-1.804.669-2.591A5.1 5.1 0 0 1 3.99 4.507L9.49 1.2a4.86 4.86 0 0 1 2.508-.7 4.86 4.86 0 0 1 2.51.7l5.5 3.31a5.1 5.1 0 0 1 1.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.1 5.1 0 0 1-1.822 1.895l-5.5 3.307c-.763.459-1.628.7-2.508.7s-1.746-.241-2.51-.7l-5.5-3.31a5.1 5.1 0 0 1-1.82-1.892 5.33 5.33 0 0 1-.671-2.589V8.993Z"
         ></path>
         <path
-          fill="#A0AFC5"
+          fill="var(--neutral-10)"
           d="M16.743 8.988a.364.364 0 0 0 0-.514l-1.217-1.217a.364.364 0 0 0-.514 0l-2.755 2.755a.364.364 0 0 1-.514 0L8.988 7.257a.364.364 0 0 0-.514 0L7.257 8.474a.364.364 0 0 0 0 .514l2.755 2.755a.364.364 0 0 1 0 .514l-2.755 2.755a.364.364 0 0 0 0 .514l1.217 1.217a.364.364 0 0 0 .514 0l2.755-2.754a.364.364 0 0 1 .514 0l2.755 2.754a.364.364 0 0 0 .514 0l1.217-1.217a.364.364 0 0 0 0-.514l-2.754-2.755a.364.364 0 0 1 0-.514z"
         ></path>
       </svg>
@@ -101,12 +104,12 @@ export function StageStatusChip({ status, className = '' }: StageStatusChipProps
     .with('ERROR', () => (
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
         <path
-          fill="#FF6240"
-          stroke="#DB402E"
+          fill="var(--negative-9)"
+          stroke="var(--negative-7)"
           d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
         ></path>
         <path
-          fill="#fff"
+          fill="var(--neutral-invert-12)"
           d="M12.85 6.375H11.4a.4.4 0 00-.4.4v6.7c0 .22.18.4.4.4h1.45a.4.4 0 00.4-.4v-6.7a.4.4 0 00-.4-.4zM11 15.775v1.45c0 .22.18.4.4.4h1.45a.4.4 0 00.4-.4v-1.45a.4.4 0 00-.4-.4H11.4a.4.4 0 00-.4.4z"
         ></path>
       </svg>
diff --git a/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx b/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx
index 21b6e7aa6fe..0ba3c520db5 100644
--- a/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx
+++ b/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx
@@ -41,11 +41,11 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
     <div className={`sticky bottom-4 flex justify-center ${className} ${!visibleState ? 'mb-[52px]' : ''}`}>
       <div
         data-testid="sticky-action-form-toaster"
-        className={`inline-flex items-center gap-10 rounded bg-surface-neutral-component p-2 pl-4 text-neutral shadow-xl ${
+        className={`inline-flex items-center gap-10 rounded-md border border-neutral bg-surface-neutralInvert-component p-2 pl-4 text-neutralInvert shadow-xl ${
           visible ? 'animate-action-bar-fade-in' : 'animate-action-bar-fade-out'
         } ${visibleState ? 'visible' : 'hidden'}`}
       >
-        {description && <span className="text-sm font-medium text-neutral">{description}</span>}
+        {description && <span className="text-sm font-medium text-neutralInvert">{description}</span>}
         <div className="flex gap-5">
           {resetLabel && onReset && (
             <button type="button" className="text-ssm font-medium underline" onClick={() => onReset()}>
diff --git a/libs/shared/ui/src/lib/components/table-primitives/table-primitives.stories.tsx b/libs/shared/ui/src/lib/components/table-primitives/table-primitives.stories.tsx
index 0e90d347c0a..970b53e1d37 100644
--- a/libs/shared/ui/src/lib/components/table-primitives/table-primitives.stories.tsx
+++ b/libs/shared/ui/src/lib/components/table-primitives/table-primitives.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof Table.Root> = {
   title: 'Table Primitives',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx b/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx
index de21b85204f..4dab58d842b 100644
--- a/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx
+++ b/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx
@@ -12,7 +12,7 @@ const TableRoot = forwardRef<ElementRef<'table'>, TableRootProps>(function Table
   return (
     <table
       ref={ref}
-      className={twMerge('min-w-full divide-y divide-neutral-200 text-sm text-neutral-400', className)}
+      className={twMerge('min-w-full divide-y divide-neutral text-sm text-neutral', className)}
       {...rest}
     >
       {children}
@@ -20,7 +20,7 @@ const TableRoot = forwardRef<ElementRef<'table'>, TableRootProps>(function Table
   )
 })
 
-interface TableHeaderProps extends ComponentPropsWithoutRef<'thead'> {}
+interface TableHeaderProps extends ComponentPropsWiwoutRef<'thead'> {}
 
 const TableHeader = forwardRef<ElementRef<'thead'>, TableHeaderProps>(function TableHeader({ children, ...rest }, ref) {
   return (
@@ -37,7 +37,7 @@ const TableBody = forwardRef<ElementRef<'tbody'>, TableBodyProps>(function Table
   ref
 ) {
   return (
-    <tbody className={twMerge('divide-y divide-neutral-200', className)} ref={ref} {...rest}>
+    <tbody className={twMerge('divide-y divide-neutral', className)} ref={ref} {...rest}>
       {children}
     </tbody>
   )
@@ -86,7 +86,7 @@ const TableColumnHeaderCell = forwardRef<ElementRef<'th'>, TableColumnHeaderCell
   ref
 ) {
   return (
-    <th ref={ref} className={twMerge('h-11 px-4 text-left', className)} {...rest}>
+    <th ref={ref} className={twMerge('h-11 px-4 text-left font-code font-normal', className)} {...rest}>
       {children}
     </th>
   )
diff --git a/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.stories.tsx b/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.stories.tsx
index b18713a4133..a035069afdf 100644
--- a/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.stories.tsx
+++ b/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof Tabs.Root> = {
   title: 'Tabs Primitives',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -18,41 +18,39 @@ export const Primary = {
   render: () => (
     <div className="flex flex-col gap-3">
       {['xs' as const, 'md' as const].map((size) =>
-        ['none' as const, 'full' as const].map((radius) =>
-          ['' as const, 'dark bg-neutral-550' as const].map((theme) => (
-            <div key={`${size}${radius}${theme}`} className={`p-3 ${theme}`}>
-              <Tabs.Root defaultValue="account">
-                <Tabs.List>
-                  <Tabs.Trigger size={size} radius={radius} value="account">
-                    Account
-                  </Tabs.Trigger>
-                  <Tabs.Trigger size={size} radius={radius} value="documents">
-                    Documents
-                  </Tabs.Trigger>
-                  <Tabs.Trigger size={size} radius={radius} value="settings">
-                    Settings
-                  </Tabs.Trigger>
-                  <Tabs.Trigger size={size} radius={radius} value="disabled" disabled>
-                    Disabled
-                  </Tabs.Trigger>
-                </Tabs.List>
-                <div className={theme.split(' ').includes('dark') ? 'mt-2 text-white' : 'mt-2'}>
-                  <Tabs.Content value="account">
-                    <span>Make changes to your account.</span>
-                  </Tabs.Content>
+        ['none' as const, 'full' as const].map((radius) => (
+          <div key={`${size}${radius}`} className="p-3">
+            <Tabs.Root defaultValue="account">
+              <Tabs.List>
+                <Tabs.Trigger size={size} radius={radius} value="account">
+                  Account
+                </Tabs.Trigger>
+                <Tabs.Trigger size={size} radius={radius} value="documents">
+                  Documents
+                </Tabs.Trigger>
+                <Tabs.Trigger size={size} radius={radius} value="settings">
+                  Settings
+                </Tabs.Trigger>
+                <Tabs.Trigger size={size} radius={radius} value="disabled" disabled>
+                  Disabled
+                </Tabs.Trigger>
+              </Tabs.List>
+              <div className="mt-2">
+                <Tabs.Content value="account">
+                  <span>Make changes to your account.</span>
+                </Tabs.Content>
 
-                  <Tabs.Content value="documents">
-                    <span>Access and update your documents.</span>
-                  </Tabs.Content>
+                <Tabs.Content value="documents">
+                  <span>Access and update your documents.</span>
+                </Tabs.Content>
 
-                  <Tabs.Content value="settings">
-                    <span>Edit your profile or update contact information.</span>
-                  </Tabs.Content>
-                </div>
-              </Tabs.Root>
-            </div>
-          ))
-        )
+                <Tabs.Content value="settings">
+                  <span>Edit your profile or update contact information.</span>
+                </Tabs.Content>
+              </div>
+            </Tabs.Root>
+          </div>
+        ))
       )}
     </div>
   ),
diff --git a/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.tsx b/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.tsx
index 7c81e660198..c4a597ecc40 100644
--- a/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.tsx
+++ b/libs/shared/ui/src/lib/components/tabs-primitives/tabs-primitives.tsx
@@ -35,22 +35,15 @@ const triggerVariants = cva(
     'shrink-0',
     'select-none',
     'box-border',
-    'hover:text-brand-500',
-    'hover:border-brand-500',
-    'border-neutral-250',
-    'dark:border-neutral-350',
-    'data-[state=active]:border-brand-500',
-    'dark:data-[state=active]:border-brand-500',
-    'data-[state=active]:text-brand-500',
-    'dark:data-[state=active]:text-white',
-    'dark:hover:text-white',
-    'disabled:border-neutral-200',
-    'disabled:text-neutral-300',
-    'dark:disabled:border-neutral-400',
-    'dark:disabled:text-neutral-350',
+    'hover:text-brandHover',
+    'hover:border-brand-strong',
+    'border-neutral',
+    'data-[state=active]:border-brand-strong',
+    'data-[state=active]:text-brand',
+    'disabled:border-neutral',
+    'disabled:text-neutral-disabled',
     'transition',
-    'text-neutral-350',
-    'dark:text-neutral-300',
+    'text-neutral-subtle',
   ],
   {
     variants: {
diff --git a/libs/shared/ui/src/lib/components/tabs/tabs.tsx b/libs/shared/ui/src/lib/components/tabs/tabs.tsx
index 634d828aa85..f87d888d318 100644
--- a/libs/shared/ui/src/lib/components/tabs/tabs.tsx
+++ b/libs/shared/ui/src/lib/components/tabs/tabs.tsx
@@ -22,7 +22,7 @@ export interface TabsProps {
  * @deprecated This should be migrated to the tabs-primitives component
  */
 export function Tabs(props: TabsProps) {
-  const { items = [], contentRight, className = 'bg-white pl-4', classNameBtn = '', fullWidth } = props
+  const { items = [], contentRight, className = 'bg-background pl-4', classNameBtn = '', fullWidth } = props
 
   function content(item: TabsItem) {
     return typeof item.name === 'string' ? (
@@ -35,14 +35,10 @@ export function Tabs(props: TabsProps) {
     )
   }
 
-  const btnClassName = `h-14 border-b-2 px-4 flex gap-3 items-center group transition ease-in-out duration-200 ${classNameBtn} dark:hover:border-neutral-50 dark:hover:text-neutral-50 hover:border-brand-500 hover:text-brand-500`
+  const btnClassName = `h-14 border-b-2 px-4 flex gap-3 items-center group transition ease-in-out duration-200 ${classNameBtn} hover:border-brand-strong hover:text-brand`
 
   const btnClassNameActive = (item: TabsItem) =>
-    `${
-      item?.active
-        ? `dark:text-brand-50 dark:border-brand-50 text-brand-500 border-brand-500`
-        : `dark:text-neutral-400 dark:border-neutral-400 text-neutral-350 border-neutral-250`
-    }`
+    `${item?.active ? `text-brand border-brand-strong` : `text-neutral-subtle border-neutral`}`
 
   const contentTab = (item: TabsItem, index: number) => {
     if (item.onClick) {
diff --git a/libs/shared/ui/src/lib/components/tag-commit/tag-commit.tsx b/libs/shared/ui/src/lib/components/tag-commit/tag-commit.tsx
index 09726f73fdc..c0a9f32857c 100644
--- a/libs/shared/ui/src/lib/components/tag-commit/tag-commit.tsx
+++ b/libs/shared/ui/src/lib/components/tag-commit/tag-commit.tsx
@@ -33,10 +33,10 @@ export function TagCommit(props: TagCommitProps) {
   const contentTag = (
     <Tag
       data-testid="tag-commit"
-      className={`flex items-center justify-center border font-medium ${withBackground ? 'bg-white dark:bg-transparent' : ''} ${
+      className={`flex items-center justify-center border font-medium ${withBackground ? 'bg-background' : ''} ${
         commitDeltaCount
-          ? 'border-orange-500 text-orange-500'
-          : 'w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400'
+          ? 'border-negative-strong text-negative'
+          : 'w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle'
       }`}
     >
       {!hover ? (
@@ -50,7 +50,9 @@ export function TagCommit(props: TagCommitProps) {
       )}
       {commitId.substring(0, 7)}
       {commitDeltaCount ? (
-        <span className="ml-1 inline-block h-4 rounded-[34px] bg-orange-500 px-1 text-white">{commitDeltaCount}</span>
+        <span className="ml-1 inline-block h-4 rounded-[34px] bg-surface-negative-solid px-1 text-neutral-contrasted">
+          {commitDeltaCount}
+        </span>
       ) : null}
     </Tag>
   )
@@ -58,7 +60,7 @@ export function TagCommit(props: TagCommitProps) {
   const copyTag = (
     <Tag
       data-testid="tag-commit"
-      className="flex h-7 w-[70px] items-center justify-center bg-green-500 font-medium text-white"
+      className="flex h-7 w-[70px] items-center justify-center bg-surface-positive-solid font-medium text-neutral-contrasted"
     >
       <Icon iconName="check" iconStyle="regular" className="mr-1 w-4" />
       Copied
diff --git a/libs/shared/ui/src/lib/components/toast/toast.tsx b/libs/shared/ui/src/lib/components/toast/toast.tsx
index 52882036704..425a9c40803 100644
--- a/libs/shared/ui/src/lib/components/toast/toast.tsx
+++ b/libs/shared/ui/src/lib/components/toast/toast.tsx
@@ -40,25 +40,25 @@ export const ToastContent = (
   return (
     <div
       data-testid="toast"
-      className="group relative cursor-pointer rounded bg-neutral-900 shadow-[0_16px_24px_rgba(0,0,0,0.12)]"
+      className="group relative cursor-pointer rounded bg-surface-neutralInvert shadow-[0_16px_24px_rgba(0,0,0,0.12)]"
       onClick={() => options && toastAction.dismiss(options.id)}
     >
       <div className="flex">
         <div className="mt-[1px] flex h-full justify-center pl-4 pt-2">
-          {status === ToastEnum.SUCCESS && <Icon name="icon-solid-check" className="text-green-500" />}
-          {status === ToastEnum.ERROR && <Icon name="icon-solid-circle-exclamation" className="text-red-500" />}
-          {status === ToastEnum.WARNING && <Icon name="icon-solid-circle-exclamation" className="text-yellow-500" />}
+          {status === ToastEnum.SUCCESS && <Icon name="icon-solid-check" className="text-positiveInvert" />}
+          {status === ToastEnum.ERROR && <Icon name="icon-solid-circle-exclamation" className="text-negativeInvert" />}
+          {status === ToastEnum.WARNING && <Icon name="icon-solid-circle-exclamation" className="text-warningInvert" />}
         </div>
         <div className="max-w-[256px] break-words py-2 pl-3 pr-4">
           {title && (
-            <p data-testid="toast-title" className="font-medium text-white">
+            <p data-testid="toast-title" className="font-medium text-neutralInvert">
               {title}
             </p>
           )}
           {description && (
             <span
               data-testid="toast-description"
-              className={`block text-sm font-medium text-neutral-300 ${!labelAction ? 'mb-1' : ''}`}
+              className={`block text-sm font-medium text-neutralInvert-subtle ${!labelAction ? 'mb-1' : ''}`}
             >
               {description}
             </span>
@@ -68,7 +68,7 @@ export const ToastContent = (
             <button
               data-testid="label-action"
               onClick={(e) => onLabelClick(e)}
-              className="-mt-1 mb-1 cursor-pointer text-sm font-medium text-blue-400"
+              className="-mt-1 mb-1 cursor-pointer text-sm font-medium text-infoInvert"
             >
               {labelAction}
             </button>
@@ -76,23 +76,23 @@ export const ToastContent = (
         </div>
         {!labelAction && options && callback && (
           <div
-            className="flex items-center justify-end rounded-r border-l border-neutral-500 px-4 transition duration-150 ease-in-out hover:bg-neutral-700"
+            className="flex items-center justify-end rounded-r border-l border-neutralInvert px-4 transition duration-150 ease-in-out hover:bg-surface-neutralInvert-subtle"
             onClick={() => {
               toastAction.dismiss(options.id)
               callback()
             }}
           >
             {iconAction ? (
-              <Icon iconName={iconAction} className="text-sm text-white" />
+              <Icon iconName={iconAction} className="text-sm text-neutralInvert" />
             ) : (
-              <Icon iconName="gear" className="text-sm text-white" />
+              <Icon iconName="gear" className="text-sm text-neutralInvert" />
             )}
           </div>
         )}
 
         {options && (
           <button
-            className="absolute left-[-8px] top-[-8px] flex h-6 w-6 items-center justify-center rounded-full border border-neutral-400 bg-neutral-600 text-white opacity-0 duration-150 ease-out hover:bg-neutral-700 group-hover:opacity-100"
+            className="absolute left-[-8px] top-[-8px] flex h-6 w-6 items-center justify-center rounded-full border border-neutralInvert bg-surface-neutralInvert text-neutralInvert opacity-0 duration-150 ease-out hover:bg-surface-neutralInvert-subtle group-hover:opacity-100"
             onClick={() => toastAction.dismiss(options.id)}
           >
             <Icon iconName="xmark" className="text-sm" />
diff --git a/libs/shared/ui/src/lib/components/tooltip/tooltip.tsx b/libs/shared/ui/src/lib/components/tooltip/tooltip.tsx
index d8ba3239061..b63b5269642 100644
--- a/libs/shared/ui/src/lib/components/tooltip/tooltip.tsx
+++ b/libs/shared/ui/src/lib/components/tooltip/tooltip.tsx
@@ -1,27 +1,8 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { type VariantProps, cva } from 'class-variance-authority'
 import { type ComponentProps, type ElementRef, type ReactNode, forwardRef } from 'react'
 import { twMerge } from '@qovery/shared/util-js'
 
-const tooltipContentVariants = cva(['rounded', 'px-2', 'py-1.5', 'text-xs', 'font-medium'], {
-  variants: {
-    color: {
-      neutral: ['bg-surface-neutralInvert', 'text-neutralInvert'],
-      orange: ['bg-orange-500', 'text-neutral-50'],
-    },
-  },
-})
-
-const tooltipArrowVariants = cva('', {
-  variants: {
-    color: {
-      neutral: ['fill-surface-neutralInvert'],
-      orange: ['fill-orange-500'],
-    },
-  },
-})
-
-export interface TooltipProps extends VariantProps<typeof tooltipContentVariants>, TooltipPrimitive.TooltipProps {
+export interface TooltipProps extends TooltipPrimitive.TooltipProps {
   content: ReactNode
   container?: ComponentProps<typeof TooltipPrimitive.Portal>['container']
   side?: 'top' | 'right' | 'bottom' | 'left'
@@ -44,7 +25,6 @@ export const Tooltip = forwardRef<ElementRef<typeof TooltipPrimitive.Trigger>, T
     delayDuration = 200,
     classNameTrigger = '',
     classNameContent = '',
-    color = 'neutral',
     disabled = false,
   },
   forwardedRef
@@ -63,13 +43,16 @@ export const Tooltip = forwardRef<ElementRef<typeof TooltipPrimitive.Trigger>, T
       </TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal container={container}>
         <TooltipPrimitive.Content
-          className={twMerge('z-[10000]', tooltipContentVariants({ color }), classNameContent)}
+          className={twMerge(
+            'z-[10000] rounded bg-surface-neutralInvert px-2 py-1.5 text-xs font-medium text-neutralInvert',
+            classNameContent
+          )}
           side={side}
           sideOffset={6}
           align={align}
         >
           {content}
-          <TooltipPrimitive.Arrow className={tooltipArrowVariants({ color })} offset={10} width={11} height={5} />
+          <TooltipPrimitive.Arrow className="fill-surface-neutralInvert" offset={10} width={11} height={5} />
         </TooltipPrimitive.Content>
       </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
diff --git a/libs/shared/ui/src/lib/components/tree-view/tree-view.stories.tsx b/libs/shared/ui/src/lib/components/tree-view/tree-view.stories.tsx
index a1db8f71a35..26010bb2d8e 100644
--- a/libs/shared/ui/src/lib/components/tree-view/tree-view.stories.tsx
+++ b/libs/shared/ui/src/lib/components/tree-view/tree-view.stories.tsx
@@ -6,7 +6,7 @@ const Story: Meta<typeof TreeView.Root> = {
   title: 'TreeView',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-background', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/components/tree-view/tree-view.tsx b/libs/shared/ui/src/lib/components/tree-view/tree-view.tsx
index 9baec98f46b..c2e3d3cf82a 100644
--- a/libs/shared/ui/src/lib/components/tree-view/tree-view.tsx
+++ b/libs/shared/ui/src/lib/components/tree-view/tree-view.tsx
@@ -30,9 +30,9 @@ const TreeViewTrigger = forwardRef<ElementRef<typeof TreeViewPrimitive.Trigger>,
     const iconName = isOpen ? 'minus' : 'plus'
 
     return (
-      <div className={twMerge('flex w-full items-center py-2 pr-5 text-sm text-neutral-400 outline-none', className)}>
+      <div className={twMerge('flex w-full items-center py-2 pr-5 text-sm text-neutral outline-none', className)}>
         <TreeViewPrimitive.Trigger
-          className="mr-5 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded border border-neutral-250 text-3xs"
+          className="mr-4 inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded border border-neutral text-3xs"
           onClick={() => setIsOpen(!isOpen)}
           {...props}
           ref={forwardedRef}
@@ -53,7 +53,7 @@ const TreeViewContent = forwardRef<ElementRef<typeof TreeViewPrimitive.Content>,
   ({ children, className, ...props }, forwardedRef) => (
     <TreeViewPrimitive.Content
       className={twMerge(
-        'data-[state=closed]:slidein-up-sm-faded ml-2 overflow-hidden border-l border-neutral-200 pl-[26px] data-[state=open]:animate-slidein-down-sm-faded',
+        'data-[state=closed]:slidein-up-sm-faded ml-2 overflow-hidden border-l border-neutral pl-[26px] data-[state=open]:animate-slidein-down-sm-faded retina:border-l-[0.5px]',
         className
       )}
       {...props}
diff --git a/libs/shared/ui/src/lib/components/warning-screen-mobile/warning-screen-mobile.tsx b/libs/shared/ui/src/lib/components/warning-screen-mobile/warning-screen-mobile.tsx
index a21f3cdf8da..d1bfecd987b 100644
--- a/libs/shared/ui/src/lib/components/warning-screen-mobile/warning-screen-mobile.tsx
+++ b/libs/shared/ui/src/lib/components/warning-screen-mobile/warning-screen-mobile.tsx
@@ -7,8 +7,8 @@ export function WarningScreenMobile() {
   if (hide) return null
 
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-brand-500 text-neutral-650 lg:hidden ">
-      <div className="w-[400px] rounded bg-white p-6 text-center shadow-xl">
+    <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-surface-brand-solid text-neutral lg:hidden ">
+      <div className="w-[400px] rounded bg-surface-neutral p-6 text-center shadow-xl">
         <div className="mb-4 flex justify-center">
           <img className="w-[80px]" src="/assets/logos/logo-icon.svg" alt="Qovery logo" />
         </div>
@@ -17,7 +17,7 @@ export function WarningScreenMobile() {
           <Button className="max-w-max" onClick={() => setHide(true)}>
             Continue anyway
           </Button>
-          <p className="text-xs text-neutral-350">
+          <p className="text-xs text-neutral-subtle">
             Not recommended: the console is not responsive and your experience may be degraded.
           </p>
         </div>
diff --git a/libs/shared/ui/src/lib/components/xterm/xterm.stories.tsx b/libs/shared/ui/src/lib/components/xterm/xterm.stories.tsx
index f96cf9f757a..1579145219b 100644
--- a/libs/shared/ui/src/lib/components/xterm/xterm.stories.tsx
+++ b/libs/shared/ui/src/lib/components/xterm/xterm.stories.tsx
@@ -22,7 +22,7 @@ const Story: Meta<typeof MyComponent> = {
   title: 'XTerm',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ background: 'bg-white', padding: '3em' }}>
         <Story />
       </div>
     ),
diff --git a/libs/shared/ui/src/lib/styles/base/themes.scss b/libs/shared/ui/src/lib/styles/base/themes.scss
index 851b3c868bd..9a7a574d894 100644
--- a/libs/shared/ui/src/lib/styles/base/themes.scss
+++ b/libs/shared/ui/src/lib/styles/base/themes.scss
@@ -28,6 +28,7 @@
   --neutral-invert-2: hsla(270, 4%, 10%, 1);
   --neutral-invert-3: hsla(260, 4%, 14%, 1);
   --neutral-invert-6: hsla(270, 5%, 24%, 1);
+  --neutral-invert-11: hsla(258, 7%, 72%, 1);
   --neutral-invert-12: hsla(300, 100%, 100%, 1);
 
   /* Brand */
@@ -60,6 +61,9 @@
   --positive-11: hsla(154, 60%, 32%, 1);
   --positive-12: hsla(155, 40%, 16%, 1);
 
+  /* Positive invert */
+  --positive-invert-11: hsla(151, 65%, 54%, 1);
+
   /* Warning */
   --warning-1: hsla(40, 60%, 99%, 1);
   --warning-2: hsla(51, 91%, 95%, 1);
@@ -75,6 +79,9 @@
   --warning-11: hsla(35, 100%, 34%, 1);
   --warning-12: hsla(24, 40%, 22%, 1);
 
+  /* Warning Invert */
+  --warning-invert-11: hsla(46, 100%, 54%, 1);
+
   /* Negative */
   --negative-1: hsla(0, 100%, 99%, 1);
   --negative-2: hsla(8, 100%, 98%, 1);
@@ -90,6 +97,9 @@
   --negative-11: hsla(10, 82%, 45%, 1);
   --negative-12: hsla(8, 50%, 24%, 1);
 
+  /* Negative invert */
+  --negative-invert-11: hsla(12, 100%, 75%, 1);
+
   /* Info */
   --info-1: hsla(210, 100%, 99%, 1);
   --info-2: hsla(207, 100%, 98%, 1);
@@ -105,6 +115,9 @@
   --info-11: hsla(208, 88%, 43%, 1);
   --info-12: hsla(216, 71%, 23%, 1);
 
+  /* Info invert */
+  --info-invert-11: hsla(210, 100%, 72%, 1);
+
   /* Accent */
   --accent-3: hsla(341, 100%, 96%, 1);
   --accent-6: hsla(338, 69%, 85%, 1);
@@ -140,6 +153,7 @@
   --neutral-invert-2: hsla(270, 20%, 98%, 1);
   --neutral-invert-3: hsla(285, 14%, 95%, 1);
   --neutral-invert-6: hsla(263, 11%, 86%, 1);
+  --neutral-invert-11: hsla(252, 5%, 41%, 1);
   --neutral-invert-12: hsla(257, 10%, 14%, 1);
 
   /* Brand */
@@ -172,6 +186,9 @@
   --positive-11: hsla(151, 65%, 54%, 1);
   --positive-12: hsla(144, 70%, 82%, 1);
 
+  /* Positive invert */
+  --positive-invert-11: hsla(154, 60%, 32%, 1);
+
   /* Warning */
   --warning-1: hsla(36, 29%, 7%, 1);
   --warning-2: hsla(39, 32%, 9%, 1);
@@ -187,6 +204,9 @@
   --warning-11: hsla(46, 100%, 54%, 1);
   --warning-12: hsla(41, 100%, 85%, 1);
 
+  /* Warning Invert */
+  --warning-invert-11: hsla(35, 100%, 34%, 1);
+
   /* Negative */
   --negative-1: hsla(0, 17%, 8%, 1);
   --negative-2: hsla(10, 24%, 10%, 1);
@@ -202,6 +222,9 @@
   --negative-11: hsla(12, 100%, 75%, 1);
   --negative-12: hsla(10, 86%, 89%, 1);
 
+  /* Negative invert */
+  --negative-invert-11: hsla(10, 82%, 45%, 1);
+
   /* Info */
   --info-1: hsla(215, 42%, 9%, 1);
   --info-2: hsla(218, 39%, 11%, 1);
@@ -217,6 +240,9 @@
   --info-11: hsla(210, 100%, 72%, 1);
   --info-12: hsla(205, 100%, 88%, 1);
 
+  /* Info invert */
+  --info-invert-11: hsla(208, 88%, 43%, 1);
+
   /* Accent */
   --accent-3: hsla(333, 45%, 15%, 1);
   --accent-6: hsla(333, 49%, 29%, 1);
diff --git a/libs/shared/ui/src/lib/styles/components/select.scss b/libs/shared/ui/src/lib/styles/components/select.scss
index 3f356a8cace..36af948ad0b 100644
--- a/libs/shared/ui/src/lib/styles/components/select.scss
+++ b/libs/shared/ui/src/lib/styles/components/select.scss
@@ -63,6 +63,9 @@
   width: calc(100% + 2rem) !important;
   left: -1rem;
   margin-top: 1rem !important;
+  box-shadow:
+    0 0 0 1px var(--neutral-6),
+    0 4px 11px hsla(0, 0, 0, 0.1) !important;
   @apply p-2;
 }
 
@@ -84,7 +87,7 @@
   }
 
   .input-select__checkbox {
-    @apply flex h-4 w-4 shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral;
+    @apply flex h-4 w-4 shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral text-neutralInvert;
   }
 }
 
diff --git a/tailwind-workspace-preset.js b/tailwind-workspace-preset.js
index 117d3bb2a87..ede83f63419 100644
--- a/tailwind-workspace-preset.js
+++ b/tailwind-workspace-preset.js
@@ -290,6 +290,7 @@ module.exports = {
             componentHover: 'var(--neutral-4)',
             componentActive: 'var(--neutral-5)',
             solid: 'var(--neutral-9)',
+            contrasted: 'var(--contrast)',
           },
           neutralInvert: {
             DEFAULT: 'var(--neutral-invert-1)',
@@ -341,14 +342,19 @@ module.exports = {
         },
         neutralInvert: {
           DEFAULT: 'var(--neutral-invert-12)',
+          subtle: 'var(--neutral-invert-11)',
           contrasted: 'var(--contrast-inverted)',
         },
         brand: { DEFAULT: 'var(--brand-11)', hover: 'var(--brand-10)' },
-        info: { DEFAULT: 'var(--info-11)' },
-        positive: { DEFAULT: 'var(--positive-11)' },
-        negative: { DEFAULT: 'var(--negative-11)' },
-        warning: { DEFAULT: 'var(--warning-11)' },
-        accent1: { DEFAULT: 'var(--accent-11)' },
+        info: { DEFAULT: 'var(--info-11)', hover: 'var(--info-10)' },
+        infoInvert: { DEFAULT: 'var(--info-invert-11)' },
+        positive: { DEFAULT: 'var(--positive-11)', hover: 'var(--positive-10)' },
+        positiveInvert: { DEFAULT: 'var(--positive-invert-11)' },
+        negative: { DEFAULT: 'var(--negative-11)', hover: 'var(--negative-10)' },
+        negativeInvert: { DEFAULT: 'var(--negative-invert-11)' },
+        warning: { DEFAULT: 'var(--warning-11)', hover: 'var(--warning-10)' },
+        warningInvert: { DEFAULT: 'var(--warning-invert-11)' },
+        accent1: { DEFAULT: 'var(--accent-11)', hover: 'var(--accent1-10)' },
       },
       borderColor: {
         neutral: {
@@ -454,40 +460,34 @@ module.exports = {
         },
         loaderDots: {
           '0%': {
-            boxShadow:
-              '0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0)',
+            boxShadow: '0px 0 transparent, 0px 0 transparent, 0px 0 transparent, 0px 0 transparent',
           },
           '12%': {
-            boxShadow:
-              '100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0)',
+            boxShadow: '100px 0 var(--neutral-5), 0px 0 transparent, 0px 0 transparent, 0px 0 transparent',
           },
           '25%': {
-            boxShadow:
-              '110px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0)',
+            boxShadow: '110px 0 var(--neutral-5), 100px 0 var(--neutral-5), 0px 0 transparent, 0px 0 transparent',
           },
           '36%': {
             boxShadow:
-              '120px 0 rgba(255, 255, 255, 1), 110px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0)',
+              '120px 0 var(--neutral-5), 110px 0 var(--neutral-5), 100px 0 var(--neutral-5), 0px 0 transparent',
           },
           '50%': {
             boxShadow:
-              '130px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 110px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1)',
+              '130px 0 var(--neutral-5), 120px 0 var(--neutral-5), 110px 0 var(--neutral-5), 100px 0 var(--neutral-5)',
           },
           '62%': {
             boxShadow:
-              '200px 0 rgba(255, 255, 255, 0), 130px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 110px 0 rgba(255, 255, 255, 1)',
+              '200px 0 transparent, 130px 0 var(--neutral-5), 120px 0 var(--neutral-5), 110px 0 var(--neutral-5)',
           },
           '75%': {
-            boxShadow:
-              '200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1)',
+            boxShadow: '200px 0 transparent, 200px 0 transparent, 130px 0 var(--neutral-5), 120px 0 var(--neutral-5)',
           },
           '87%': {
-            boxShadow:
-              '200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 rgba(255, 255, 255, 1)',
+            boxShadow: '200px 0 transparent, 200px 0 transparent, 200px 0 transparent, 130px 0 var(--neutral-5)',
           },
           '100%': {
-            boxShadow:
-              '200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0)',
+            boxShadow: '200px 0 transparent, 200px 0 transparent, 200px 0 transparent, 200px 0 transparent',
           },
         },
         'shiny-text': {
@@ -526,5 +526,9 @@ module.exports = {
       after: ['last'],
     },
   },
-  plugins: [],
+  plugins: [
+    function ({ addVariant }) {
+      addVariant('retina', '@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)')
+    },
+  ],
 }