From 2380e145ee937e678e8cb1dca02e9f95e3f3d8cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Thu, 15 Jan 2026 16:09:46 +0100
Subject: [PATCH 1/9] refactor(logo): rename logo component and update story
 title

---
 .../src/lib/components/logo-branded/logo-branded.stories.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/logo-branded/logo-branded.stories.tsx b/libs/shared/ui/src/lib/components/logo-branded/logo-branded.stories.tsx
index a6065bafd24..2bbde2ea54a 100644
--- a/libs/shared/ui/src/lib/components/logo-branded/logo-branded.stories.tsx
+++ b/libs/shared/ui/src/lib/components/logo-branded/logo-branded.stories.tsx
@@ -1,9 +1,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-webpack5'
-import { LogoBrandedIcon } from './logo'
+import { LogoBrandedIcon } from './logo-branded'
 
 const meta: Meta<typeof LogoBrandedIcon> = {
   component: LogoBrandedIcon,
-  title: 'Logo',
+  title: 'LogoBranded',
 }
 
 export default meta

From ce86ca2dc11d9b950e345f815cbc108f3e8d4349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Thu, 15 Jan 2026 18:01:20 +0100
Subject: [PATCH 2/9] feat(checkbox): enhance checkbox component with color
 variants and update storybook configuration

---
 .../components/checkbox/checkbox.stories.tsx  | 37 +++++----
 .../src/lib/components/checkbox/checkbox.tsx  | 76 ++++++++++---------
 .../shared/ui/src/lib/styles/base/themes.scss |  4 +-
 3 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/checkbox/checkbox.stories.tsx b/libs/shared/ui/src/lib/components/checkbox/checkbox.stories.tsx
index e02d8c43396..4969612afa0 100644
--- a/libs/shared/ui/src/lib/components/checkbox/checkbox.stories.tsx
+++ b/libs/shared/ui/src/lib/components/checkbox/checkbox.stories.tsx
@@ -1,9 +1,18 @@
 import type { Meta } from '@storybook/react-webpack5'
-import { Checkbox } from './checkbox'
+import { Checkbox, type CheckboxProps } from './checkbox'
 
 const Story: Meta<typeof Checkbox> = {
   component: Checkbox,
   title: 'Checkbox',
+  argTypes: {
+    color: {
+      control: { type: 'radio' },
+      options: ['brand', 'red'],
+    },
+  },
+  args: {
+    color: 'brand',
+  },
   decorators: [
     (Story) => (
       <div style={{ background: 'white', padding: '3em' }}>
@@ -15,27 +24,27 @@ const Story: Meta<typeof Checkbox> = {
 export default Story
 
 export const Primary = {
-  render: () => (
+  render: (args: CheckboxProps) => (
     <>
-      <label className="flex items-center gap-3">
-        <Checkbox />
+      <label className="flex items-center gap-2">
+        <Checkbox {...args} />
         Not checked
       </label>
-      <label className="flex items-center gap-3">
-        <Checkbox defaultChecked />
+      <label className="flex items-center gap-2">
+        <Checkbox {...args} defaultChecked />
         Checked
       </label>
-      <label className="flex items-center gap-3">
-        <Checkbox checked="indeterminate" /> Indeterminate
+      <label className="flex items-center gap-2">
+        <Checkbox {...args} checked="indeterminate" /> Indeterminate
       </label>
-      <label className="flex items-center gap-3">
-        <Checkbox disabled /> Not checked
+      <label className="flex items-center gap-2">
+        <Checkbox {...args} disabled /> Not checked
       </label>
-      <label className="flex items-center gap-3">
-        <Checkbox disabled defaultChecked /> Checked
+      <label className="flex items-center gap-2">
+        <Checkbox {...args} disabled defaultChecked /> Checked
       </label>
-      <label className="flex items-center gap-3">
-        <Checkbox disabled checked="indeterminate" /> Indeterminate
+      <label className="flex items-center gap-2">
+        <Checkbox {...args} disabled checked="indeterminate" /> Indeterminate
       </label>
     </>
   ),
diff --git a/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx b/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
index f210f175308..25531c458a4 100644
--- a/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
+++ b/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
@@ -7,44 +7,41 @@ import Icon from '../icon/icon'
 const checkboxVariants = cva(
   [
     'group',
-    'transition',
-    'bg-neutral-100',
-    'dark:bg-neutral-500',
+    'inline-flex',
+    'shrink-0',
+    'items-center',
+    'justify-center',
+    'h-4',
+    'w-4',
+    'rounded',
     'border',
-    'border-neutral-300',
-    'dark:border-neutral-350',
-    'rounded-sm',
-    'w-[18px]',
-    'h-[18px]',
-    'hover:border-2',
-    'data-[state=checked]:border',
-    'data-[state=indeterminate]:border-2',
-    'disabled:border',
-    'disabled:border-neutral-250',
+    'border-neutral',
+    'bg-surface-neutral',
+    'transition-colors',
+    'disabled:cursor-not-allowed',
+    'disabled:border-neutral',
+    'disabled:bg-surface-neutral-subtle',
+    'disabled:hover:border-neutral',
+    'disabled:data-[state=checked]:bg-surface-neutral-subtle',
+    'disabled:data-[state=checked]:border-neutral',
+    'disabled:data-[state=indeterminate]:border-neutral',
   ],
   {
     variants: {
       color: {
         brand: [
-          'hover:border-brand-500',
-          'dark:hover:border-brand-500',
-          'data-[state=checked]:bg-brand-500',
-          'dark:data-[state=checked]:bg-brand-500',
-          'data-[state=checked]:border-brand-500',
-          'dark:data-[state=checked]:border-brand-500',
-          'data-[state=indeterminate]:border-brand-500',
-          'disabled:data-[state=checked]:border-brand-300',
-          'disabled:data-[state=checked]:bg-brand-300',
-          'disabled:data-[state=indeterminate]:border-brand-300',
+          'hover:border-brand-strong',
+          'data-[state=checked]:bg-surface-brand-solid',
+          'hover:data-[state=checked]:bg-surface-brand-solidHover',
+          'data-[state=checked]:border-brand-strong',
+          'data-[state=indeterminate]:border-brand-strong',
         ],
         red: [
-          'hover:border-red-500',
-          'data-[state=checked]:bg-red-500',
-          'data-[state=checked]:border-red-500',
-          'data-[state=indeterminate]:border-red-500',
-          'disabled:data-[state=checked]:border-red-300',
-          'disabled:data-[state=checked]:bg-red-300',
-          'disabled:data-[state=indeterminate]:border-red-300',
+          'hover:border-negative-strong',
+          'data-[state=checked]:bg-surface-negative-solid',
+          'hover:data-[state=checked]:bg-surface-negative-solidHover',
+          'data-[state=checked]:border-negative-strong',
+          'data-[state=indeterminate]:border-negative-strong',
         ],
       },
     },
@@ -54,11 +51,19 @@ const checkboxVariants = cva(
   }
 )
 
-const indeterminateVariants = cva(['h-[10px]', 'w-[10px]'], {
+const indeterminateVariants = cva(['h-3', 'w-3', 'rounded-[2px]'], {
   variants: {
     color: {
-      brand: ['bg-brand-500', 'group-disabled:bg-brand-300'],
-      red: ['bg-red-500', 'group-disabled:bg-red-300'],
+      brand: [
+        'bg-surface-brand-solid',
+        'hover:bg-surface-brand-solidHover',
+        'group-disabled:bg-surface-neutral-componentHover',
+      ],
+      red: [
+        'bg-surface-negative-solid',
+        'hover:bg-surface-negative-solidHover',
+        'group-disabled:bg-surface-neutral-componentHover',
+      ],
     },
   },
   defaultVariants: {
@@ -86,7 +91,10 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
           {props.checked === 'indeterminate' ? (
             <span className={indeterminateVariants({ color })} />
           ) : (
-            <Icon iconName="check" className="text-xs leading-[18px] text-white" />
+            <Icon
+              iconName="check"
+              className="text-xs leading-[16px] text-neutralInvert group-disabled:text-neutral-disabled"
+            />
           )}
         </span>
       </CheckboxPrimitive.Indicator>
diff --git a/libs/shared/ui/src/lib/styles/base/themes.scss b/libs/shared/ui/src/lib/styles/base/themes.scss
index 60767afcac3..851b3c868bd 100644
--- a/libs/shared/ui/src/lib/styles/base/themes.scss
+++ b/libs/shared/ui/src/lib/styles/base/themes.scss
@@ -28,7 +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-12: hsla(240, 6%, 94%, 1);
+  --neutral-invert-12: hsla(300, 100%, 100%, 1);
 
   /* Brand */
   --brand-1: hsla(240, 100%, 100%, 1);
@@ -130,7 +130,7 @@
   --neutral-9: hsla(251, 5%, 45%, 1);
   --neutral-10: hsla(251, 4%, 50%, 1);
   --neutral-11: hsla(258, 7%, 72%, 1);
-  --neutral-12: hsla(240, 6%, 94%, 1);
+  --neutral-12: hsla(300, 100%, 100%, 1);
   --field: hsla(270, 4%, 10%, 1);
   --contrast: hsla(300, 100%, 100%, 1);
   --contrast-inverted: hsla(257, 10%, 14%, 1);

From 666234e586335ba43052245d677a76a65d5b19ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 16 Jan 2026 14:16:55 +0100
Subject: [PATCH 3/9] feat(storybook): add overflow-auto class to body and
 enhance InputCheckbox styles

---
 libs/shared/ui/.storybook/preview.tsx             |  2 ++
 .../inputs/input-checkbox/input-checkbox.tsx      | 15 +++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/libs/shared/ui/.storybook/preview.tsx b/libs/shared/ui/.storybook/preview.tsx
index 21ef01b8216..37d32ec8cd2 100644
--- a/libs/shared/ui/.storybook/preview.tsx
+++ b/libs/shared/ui/.storybook/preview.tsx
@@ -5,6 +5,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { RouterProvider, createHashHistory, createRootRoute, createRoute, createRouter } from '@tanstack/react-router'
 import '../src/lib/styles/main.scss'
 
+document.body.classList.add('overflow-auto')
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
diff --git a/libs/shared/ui/src/lib/components/inputs/input-checkbox/input-checkbox.tsx b/libs/shared/ui/src/lib/components/inputs/input-checkbox/input-checkbox.tsx
index b24954911dd..6abf172a9cb 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-checkbox/input-checkbox.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-checkbox/input-checkbox.tsx
@@ -62,11 +62,9 @@ export function InputCheckbox(props: InputCheckboxProps) {
         checked={check}
         disabled={disabled}
         onChange={(e) => inputChange(e.currentTarget.checked, e)}
-        className={`input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded-sm before:bg-white before:text-white dark:before:bg-neutral-500 ${bigClasses} ${
-          disabled
-            ? 'before:border-neutral-250 dark:before:border-neutral-350'
-            : 'cursor-pointer before:border-neutral-350'
-        } before:border-2 before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] checked:before:border-brand-500 checked:before:bg-brand-500`}
+        className={`input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded before:border before:border-neutral before:bg-surface-neutral before:text-neutralInvert ${bigClasses} ${
+          disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+        } before:text-xs before:font-black before:leading-none before:transition-colors before:content-[''] checked:before:border-brand-strong checked:before:bg-surface-brand-solid hover:before:border-brand-strong checked:hover:before:bg-surface-brand-solidHover disabled:before:border-neutral disabled:before:bg-surface-neutral-subtle disabled:checked:before:border-neutral disabled:checked:before:bg-surface-neutral-subtle disabled:hover:before:border-neutral`}
       />
       {label && (
         <label
@@ -78,7 +76,12 @@ export function InputCheckbox(props: InputCheckboxProps) {
           {label}
         </label>
       )}
-      {check && <Icon iconName="check" className={`absolute text-2xs text-white ${big ? 'left-1.5' : 'left-1'}`} />}
+      {check && (
+        <Icon
+          iconName="check"
+          className={`pointer-events-none absolute leading-[16px] ${disabled ? 'text-neutral-disabled' : 'text-neutralInvert'} ${big ? 'left-1 text-sm' : 'left-[2.75px] text-xs'}`}
+        />
+      )}
     </div>
   )
 }

From 7c557fb155a0ba64c0559e1ebbda630d8d450a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 16 Jan 2026 15:35:45 +0100
Subject: [PATCH 4/9] refactor(inputs): update input components for improved
 styling and error handling

---
 .../inputs/input-select/input-select.tsx      |  2 +-
 .../input-text-area/input-text-area.tsx       |  8 +++---
 .../input-text-small/input-text-small.tsx     |  8 +++---
 .../inputs/input-text/input-text.tsx          | 20 ++++++++-----
 .../ui/src/lib/styles/components/input.scss   | 28 +++++++++----------
 5 files changed, 36 insertions(+), 30 deletions(-)

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 63199d68a64..ee2f9cf690a 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
@@ -354,7 +354,7 @@ export function InputSelect({
           </div>
         )}
       </div>
-      {hint && <p className="mt-0.5 px-3 text-xs font-normal text-neutral-subtle">{hint}</p>}
+      {hint && !error && <p className="mt-0.5 px-3 text-xs font-normal text-neutral-subtle">{hint}</p>}
       {error && <p className="mt-0.5 px-3 text-xs font-medium text-negative">{error}</p>}
     </div>
   )
diff --git a/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx b/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx
index 1ddbab0f678..2ace7cce0ac 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-text-area/input-text-area.tsx
@@ -30,7 +30,7 @@ export const InputTextArea = forwardRef<HTMLTextAreaElement, InputTextAreaProps>
   const hasError = error && error.length > 0 ? 'input--error' : ''
   const inputActions = hasFocus ? 'input--focused' : ''
 
-  const isDisabled = props.disabled ? 'input--disabled !border-neutral-250' : ''
+  const isDisabled = props.disabled ? 'input--disabled !border-neutral' : ''
 
   return (
     <div
@@ -50,7 +50,7 @@ export const InputTextArea = forwardRef<HTMLTextAreaElement, InputTextAreaProps>
           ref={ref}
           name={name}
           id={label}
-          className="mt-5 min-h-[52px] w-full appearance-none bg-transparent pr-3 text-sm text-neutral-400 outline-0"
+          className="mt-5 min-h-[52px] w-full appearance-none bg-transparent pr-3 text-sm text-neutral outline-0"
           value={!currentValue ? undefined : currentValue}
           onChange={(e) => {
             if (onChange) onChange(e)
@@ -61,8 +61,8 @@ export const InputTextArea = forwardRef<HTMLTextAreaElement, InputTextAreaProps>
           disabled={props.disabled}
         />
       </div>
-      {hint && <p className="mt-0.5 px-3 text-xs font-normal text-neutral-350">{hint}</p>}
-      {error && <p className="mt-1 px-3 text-xs font-medium text-red-500">{error}</p>}
+      {hint && !error && <p className="mt-0.5 px-3 text-xs font-normal text-neutral-subtle">{hint}</p>}
+      {error && <p className="mt-1 px-3 text-xs font-medium text-negative">{error}</p>}
     </div>
   )
 })
diff --git a/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx b/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx
index 733d4f57a34..abf1e120ac7 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-text-small/input-text-small.tsx
@@ -75,7 +75,7 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
       {(error || warning) && errorMessagePosition === 'left' && (
         <Tooltip content={error || warning || ''} align="center" side="top">
           <div data-testid="warning-icon-left" className="flex items-center">
-            <Icon iconName="triangle-exclamation" className="block text-sm text-yellow-500" />
+            <Icon iconName="triangle-exclamation" className="block text-sm text-warning" />
           </div>
         </Tooltip>
       )}
@@ -93,7 +93,7 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
         <input
           className={twMerge(
             clsx(
-              'absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350',
+              'absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle',
               {
                 'pr-8': hasShowPasswordButton,
               }
@@ -121,14 +121,14 @@ export const InputTextSmall = forwardRef<HTMLInputElement, InputTextSmallProps>(
           <div
             data-testid="show-password-button"
             onClick={() => setCurrentType(currentType === 'password' ? 'text' : 'password')}
-            className="absolute right-2 -translate-y-0.5 transform text-sm text-neutral-400 dark:text-neutral-50"
+            className="absolute right-2 -translate-y-[0.5px] transform text-sm text-neutral-subtle hover:text-neutral"
           >
             <Icon name={currentType === 'password' ? IconAwesomeEnum.EYE : IconAwesomeEnum.EYE_SLASH} />
           </div>
         )}
       </div>
       {error && errorMessagePosition === 'bottom' && (
-        <p className="mt-1 px-4 text-xs font-medium text-red-500">{error}</p>
+        <p className="mt-1 px-4 text-xs font-medium text-negative">{error}</p>
       )}
     </div>
   )
diff --git a/libs/shared/ui/src/lib/components/inputs/input-text/input-text.tsx b/libs/shared/ui/src/lib/components/inputs/input-text/input-text.tsx
index d8979b110ba..e459385c1a7 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-text/input-text.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-text/input-text.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { type ChangeEventHandler, type ReactNode, forwardRef, useEffect, useRef, useState } from 'react'
 import Icon from '../../icon/icon'
 
@@ -51,7 +52,7 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(function I
 
   const inputActions = hasFocus ? 'input--focused' : disabled ? 'input--disabled' : ''
 
-  const isDisabled = disabled ? 'input--disabled !border-neutral-250' : ''
+  const isDisabled = disabled ? 'input--disabled !border-neutral' : ''
 
   const displayPicker = () => {
     const input = inputRef.current?.querySelector('input')
@@ -76,7 +77,7 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(function I
       <div className="relative">
         <div
           aria-label="input-container"
-          className={`input ${inputActions} ${isDisabled} ${hasError} ${hasLabelUp} `}
+          className={`input group ${inputActions} ${isDisabled} ${hasError} ${hasLabelUp} `}
           ref={inputRef}
         >
           <div className={`${disabled ? 'pointer-events-none' : ''}`}>
@@ -102,12 +103,12 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(function I
             />
             {isInputDate && (
               <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                <Icon iconName="angle-down" className="text-sm text-neutral-400" />
+                <Icon iconName="angle-down" className="text-sm text-neutral-subtle group-hover:text-neutral" />
               </div>
             )}
             {(currentValue as string)?.length > 0 && type === 'password' && (
               <div
-                className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 transition-colors hover:text-neutral-400"
+                className="absolute right-4 top-1/2 -translate-y-1/2 text-neutral transition-colors hover:text-neutral"
                 onClick={() => (currentType === 'password' ? setCurrentType('text') : setCurrentType('password'))}
               >
                 {currentType === 'password' && <Icon iconName="eye" className="text-sm" />}
@@ -117,13 +118,18 @@ export const InputText = forwardRef<HTMLInputElement, InputTextProps>(function I
           </div>
         </div>
         {!isInputDate && rightElement && (
-          <div data-testid="right-floating-component" className="absolute right-4 top-1/2 -translate-y-1/2">
+          <div
+            data-testid="right-floating-component"
+            className={clsx('absolute right-4 top-1/2 -translate-y-1/2 text-neutral-subtle hover:text-neutral', {
+              'pointer-events-none text-neutral-disabled': disabled,
+            })}
+          >
             {rightElement}
           </div>
         )}
       </div>
-      {hint && <p className="mt-0.5 px-3 text-xs font-normal text-neutral-350 dark:text-neutral-50">{hint}</p>}
-      {error && <p className="mt-0.5 px-3 text-xs font-medium text-red-500">{error}</p>}
+      {hint && !error && <p className="mt-0.5 px-3 text-xs text-neutral-subtle">{hint}</p>}
+      {error && <p className="mt-0.5 px-3 text-xs text-negative">{error}</p>}
     </div>
   )
 })
diff --git a/libs/shared/ui/src/lib/styles/components/input.scss b/libs/shared/ui/src/lib/styles/components/input.scss
index 6d855b6772a..9f39480bca1 100644
--- a/libs/shared/ui/src/lib/styles/components/input.scss
+++ b/libs/shared/ui/src/lib/styles/components/input.scss
@@ -27,7 +27,7 @@
 }
 
 .input--small {
-  @apply relative h-9 min-h-[36px];
+  @apply relative h-9 min-h-[36px] rounded;
 }
 
 .input__value {
@@ -41,7 +41,7 @@
 
 .input--focused,
 .input__button--focused {
-  outline: 1px solid var(--brand-9);
+  outline: 2px solid var(--brand-4);
   label {
     @apply translate-y-0 text-xs;
   }
@@ -60,7 +60,7 @@
   min-height: theme('space.9');
   height: theme('space.9');
   padding: theme('space.2');
-  background-color: theme('colors.neutral.150');
+  @apply bg-surface-neutral-component;
   padding-top: 0;
   border-color: transparent;
 
@@ -83,11 +83,11 @@
 }
 
 .input--disabled {
-  @apply pointer-events-none border-neutral-250 bg-neutral-100;
+  @apply pointer-events-none border-neutral bg-surface-neutral-subtle;
   box-shadow: none !important;
 
   label {
-    @apply text-neutral-350;
+    @apply text-neutral-disabled;
   }
 
   .input__button--focused {
@@ -97,20 +97,20 @@
 
 .input--error,
 .input--error .input__button {
-  @apply border-red-500;
+  @apply border-negative-strong;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
 
   &:hover {
-    @apply border-red-500;
+    @apply border-negative-strong;
   }
 }
 
 .input--error.input--focused {
-  outline: 1px solid theme('colors.red.500');
+  outline: 2px solid var(--negative-4);
 }
 
 .input--success {
-  @apply border-green-500;
+  @apply border-positive-strong;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
 }
 
@@ -125,13 +125,13 @@
   &:hover,
   &:focus,
   &[aria-expanded='true'] {
-    @apply border-brand-500;
+    @apply border-brand-strong;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
 .input__list {
-  @apply pointer-events-auto mt-2 max-h-96 w-full list-none overflow-scroll rounded border-neutral-250 bg-white p-2 text-neutral-400 focus-within:outline-none;
+  @apply pointer-events-auto mt-2 max-h-96 w-full list-none overflow-scroll rounded border-neutral bg-white p-2 text-neutral focus-within:outline-none;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 
   ul {
@@ -140,17 +140,17 @@
 }
 
 .input__item {
-  @apply mb-1 cursor-pointer select-none rounded px-3 py-2 text-sm font-medium text-neutral-400 last:mb-0 hover:bg-neutral-150 hover:text-neutral-400;
+  @apply mb-1 cursor-pointer select-none rounded px-3 py-2 text-sm font-medium text-neutral last:mb-0 hover:bg-surface-neutral-component hover:text-neutral;
 
   &.is-active,
   &[data-current-selected],
   &[data-current-nav] {
-    @apply bg-neutral-150 text-neutral-400;
+    @apply bg-surface-neutral-component text-neutral;
   }
 }
 
 .input__arrow {
-  @apply absolute right-4 top-1/2 -translate-y-1/2 text-sm text-neutral-400;
+  @apply absolute right-4 top-1/2 -translate-y-1/2 text-sm text-neutral;
 }
 
 // time

From 58b9e42c637716572a99a41d8328d3c3354c62e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 16 Jan 2026 15:41:03 +0100
Subject: [PATCH 5/9] feat(button, dropdown): add 'select-none' utility to
 button and dropdown menu item styles for improved user experience

---
 .../ui/src/lib/components/button-primitive/button-primitive.tsx | 1 +
 .../ui/src/lib/components/dropdown-menu/dropdown-menu.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

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 f0cd9a45c8f..11247b76d66 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
@@ -18,6 +18,7 @@ const _buttonVariants = cva(
     'disabled:bg-surface-neutral-component',
     'focus-visible:[&:not(:active)]:outline-2',
     'outline-0',
+    'select-none',
   ],
   {
     variants: {
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 ec165b7c06b..ac461e68e3e 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,7 +5,7 @@ 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'],
+  ['px-3', 'flex', 'items-center', 'h-8', 'text-sm', 'font-medium', 'rounded-sm', 'outline-none', 'select-none'],
   {
     variants: {
       color: {

From 276fa062b889a7dc2cfbc6ed48c97ae8b3e305ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 16 Jan 2026 17:58:21 +0100
Subject: [PATCH 6/9] feat(input-select): enhance styling and hover states for
 input select components

---
 .../input-select-small/input-select-small.tsx |  6 ++--
 .../inputs/input-select/input-select.tsx      | 18 ++++++------
 .../ui/src/lib/styles/components/input.scss   |  6 ++--
 .../ui/src/lib/styles/components/select.scss  | 28 ++++++++-----------
 tailwind-workspace-preset.js                  |  2 +-
 5 files changed, 28 insertions(+), 32 deletions(-)

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 ca50737541f..a2b65b378f8 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
@@ -48,14 +48,14 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
   }, [defaultValue])
 
   return (
-    <div className={`${className} relative flex items-center gap-4`}>
+    <div className={`${className} group relative flex items-center gap-4`}>
       {label && <label className="shrink-0 text-sm">{label}</label>}
       <select
         data-testid={dataTestId || 'input-select-small'}
         name={name}
         value={value}
         className={twMerge(
-          'h-9 w-full cursor-pointer appearance-none rounded border border-neutral-250 bg-neutral-100 px-3 pr-6 text-sm font-medium text-neutral-400 shadow-sm transition-colors hover:bg-neutral-50 hover:outline-brand-500 active:shadow-none disabled:shadow-none hover:[&:not(:active)]:border-neutral-300',
+          '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',
           inputClassName
         )}
         onChange={(e) => onClickItem(e.target.value)}
@@ -68,7 +68,7 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
       </select>
       <Icon
         name={IconAwesomeEnum.CHEVRON_DOWN}
-        className="pointer-events-none absolute right-4 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-400"
+        className="pointer-events-none absolute right-4 top-2.5 translate-y-0.5 text-xs leading-3 text-neutral-subtle group-hover:text-neutral"
       />
     </div>
   )
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 ee2f9cf690a..89ef7c1b83c 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
@@ -134,7 +134,7 @@ export function InputSelect({
             <button
               type="button"
               data-testid="input-menu-list-button"
-              className="inline-flex items-center gap-1 text-sm font-medium text-brand-500 transition duration-100 hover:text-brand-600"
+              className="hover:text-brand-hover inline-flex items-center gap-1 text-sm font-medium text-brand transition duration-100"
               onClick={menuListButton.onClick}
             >
               {menuListButton.label}
@@ -157,13 +157,13 @@ export function InputSelect({
               {props.isSelected && <Icon iconName="check" className="text-xs" />}
             </span>
           ) : props.isSelected ? (
-            <Icon iconName="check" className="text-brand" />
+            <Icon iconName="check" className="w-4 text-brand" />
           ) : props.data.icon ? (
             <div className="flex h-full w-4 items-center justify-center">{props.data.icon}</div>
           ) : (
-            <Icon iconName="check" className="opacity-0" />
+            <Icon iconName="check" className="w-4 opacity-0" />
           )}
-          <label id={id} className="ml-2 flex flex-col gap-0.5 truncate text-sm">
+          <label id={id} className="ml-1 flex flex-col gap-0.5 truncate text-sm">
             {props.label}
             {props.data.description && <span className="font-normal">{props.data.description}</span>}
           </label>
@@ -226,9 +226,9 @@ export function InputSelect({
 
   const inputActions =
     hasFocus && !disabled
-      ? '!border-brand-500 !shadow-[0_2px_2px_rgba(0, 0, 0, 0.05)] input--focused'
+      ? '!border-brand-strong !shadow-[0_2px_2px_rgba(0, 0, 0, 0.05)] input--focused'
       : disabled
-        ? '!bg-neutral-100 !border-neutral-250 !pointer-events-none'
+        ? '!bg-surface-neutral-subtle !border-neutral !pointer-events-none'
         : hasError
           ? 'input--error'
           : ''
@@ -271,12 +271,12 @@ export function InputSelect({
     styles: {
       menu: (base) => ({
         ...base,
-        backgroundColor: 'var(--neutral-2)',
+        backgroundColor: 'var(--neutral-1)',
         borderRadius: '6px',
       }),
       menuList: (base) => ({
         ...base,
-        backgroundColor: 'var(--neutral-2)',
+        backgroundColor: 'var(--neutral-1)',
       }),
       menuPortal: (base) => ({
         ...base,
@@ -305,7 +305,7 @@ export function InputSelect({
     <div className={className}>
       <div
         className={`input input--select ${hasIcon ? 'input--has-icon' : ''} ${inputActions} ${
-          disabled ? '!border-neutral-250 !bg-neutral-100' : ''
+          disabled ? '!border-neutral !bg-surface-neutral-subtle' : ''
         } ${isFilter ? 'input--filter' : ''}`}
         data-testid={dataTestId || 'select'}
       >
diff --git a/libs/shared/ui/src/lib/styles/components/input.scss b/libs/shared/ui/src/lib/styles/components/input.scss
index 9f39480bca1..caa38bf034d 100644
--- a/libs/shared/ui/src/lib/styles/components/input.scss
+++ b/libs/shared/ui/src/lib/styles/components/input.scss
@@ -27,7 +27,7 @@
 }
 
 .input--small {
-  @apply relative h-9 min-h-[36px] rounded;
+  @apply relative h-9 min-h-[36px];
 }
 
 .input__value {
@@ -52,7 +52,7 @@
     @apply translate-y-0 text-xs;
   }
   .input__value[type='time'] {
-    color: theme('colors.neutral.400');
+    @apply text-neutral;
   }
 }
 
@@ -75,9 +75,9 @@
   }
 
   .input-select__placeholder {
+    @apply text-neutral-disabled;
     display: block !important;
     font-size: theme('fontSize.ssm') !important;
-    color: theme('colors.neutral.300') !important;
     font-weight: 400;
   }
 }
diff --git a/libs/shared/ui/src/lib/styles/components/select.scss b/libs/shared/ui/src/lib/styles/components/select.scss
index 2361775bed3..3678c2de20a 100644
--- a/libs/shared/ui/src/lib/styles/components/select.scss
+++ b/libs/shared/ui/src/lib/styles/components/select.scss
@@ -1,7 +1,7 @@
 .input-select__control .input-select__input-container {
   @apply text-sm;
   margin: 0;
-  color: theme('colors.neutral.400');
+  color: theme('textColor.neutral.DEFAULT');
 }
 
 .input-select__control {
@@ -28,10 +28,10 @@
 
 // state
 .input-select--error {
-  @apply border-red-500;
+  @apply border-negative-strong;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
   &:hover {
-    @apply border-red-500;
+    @apply border-negative-strong;
   }
 }
 
@@ -42,10 +42,10 @@
 }
 
 .input-select--disabled {
-  @apply pointer-events-none border-neutral-250 bg-neutral-100;
+  @apply pointer-events-none border-neutral bg-surface-neutral-subtle;
 
   & > label {
-    @apply text-neutral-350;
+    @apply text-neutral-subtle;
   }
 }
 
@@ -70,7 +70,7 @@
 .input-select__option,
 .input-select__button {
   display: flex !important;
-  background: var(--neutral-2) !important;
+  background: var(--neutral-1) !important;
   padding: 8px !important;
   cursor: pointer !important;
   @apply items-center gap-2 rounded-md;
@@ -80,29 +80,25 @@
   }
 
   .input-select__checkbox {
-    @apply flex h-4 w-4 shrink-0 items-center justify-center rounded-md border-2 border-neutral bg-surface-neutral;
-  }
-
-  &:hover {
-    background: var(--neutral-2) !important;
+    @apply flex h-4 w-4 shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral;
   }
 }
 
 .input-select__option--is-disabled {
   label {
-    @apply text-neutral-300;
+    @apply text-neutral-disabled;
   }
 }
 
 .input-select__option--is-selected {
-  background: theme('colors.white');
+  background: theme('colors.background.DEFAULT');
 
   label {
     @apply text-neutral;
   }
 
   .input-select__checkbox {
-    @apply border-0 bg-brand-500;
+    @apply border-0 bg-surface-brand-solid;
   }
 }
 
@@ -114,8 +110,8 @@
 .input-select__option--is-focused.input-select__option--is-selected,
 .input-select__button:hover,
 .input-select__option--is-focused:hover {
-  background: var(--neutral-4) !important;
+  background: var(--brand-3) !important;
   label {
-    color: var(--brand-9) !important;
+    color: var(--brand-10) !important;
   }
 }
diff --git a/tailwind-workspace-preset.js b/tailwind-workspace-preset.js
index bdd451a7458..117d3bb2a87 100644
--- a/tailwind-workspace-preset.js
+++ b/tailwind-workspace-preset.js
@@ -343,7 +343,7 @@ module.exports = {
           DEFAULT: 'var(--neutral-invert-12)',
           contrasted: 'var(--contrast-inverted)',
         },
-        brand: { DEFAULT: 'var(--brand-11)' },
+        brand: { DEFAULT: 'var(--brand-11)', hover: 'var(--brand-10)' },
         info: { DEFAULT: 'var(--info-11)' },
         positive: { DEFAULT: 'var(--positive-11)' },
         negative: { DEFAULT: 'var(--negative-11)' },

From b54b572a3b621c84246e28aa4c2c9764f9762166 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Mon, 19 Jan 2026 14:37:33 +0100
Subject: [PATCH 7/9] refactor(inputs): update input components for improved
 styling and consistency across various input types

---
 .../src/lib/components/checkbox/checkbox.tsx  |  4 +--
 .../input-credit-card/input-credit-card.tsx   |  9 ++++---
 .../inputs/input-file/input-file.tsx          | 10 +++----
 .../inputs/input-filter/input-filter.tsx      |  4 +++
 .../input-radio-box/input-radio-box.tsx       |  4 +--
 .../inputs/input-radio/input-radio.tsx        |  6 ++---
 .../input-select-small/input-select-small.tsx |  2 +-
 .../input-size-unit/input-size-unit.tsx       |  2 +-
 .../inputs/input-tags/input-tags.tsx          | 10 +++----
 .../inputs/input-toggle/input-toggle.tsx      |  2 +-
 .../radio-group/radio-group.stories.tsx       | 22 ++++++++--------
 .../components/radio-group/radio-group.tsx    | 26 +++++++++----------
 .../ui/src/lib/components/slider/slider.tsx   | 12 ++++-----
 .../ui/src/lib/styles/components/input.scss   | 10 ++++---
 .../ui/src/lib/styles/components/select.scss  |  4 +++
 15 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx b/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
index 25531c458a4..fb37230b8fd 100644
--- a/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
+++ b/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
@@ -33,7 +33,7 @@ const checkboxVariants = cva(
           'hover:border-brand-strong',
           'data-[state=checked]:bg-surface-brand-solid',
           'hover:data-[state=checked]:bg-surface-brand-solidHover',
-          'data-[state=checked]:border-brand-strong',
+          'data-[state=checked]:border-0',
           'data-[state=indeterminate]:border-brand-strong',
         ],
         red: [
@@ -93,7 +93,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
           ) : (
             <Icon
               iconName="check"
-              className="text-xs leading-[16px] text-neutralInvert group-disabled:text-neutral-disabled"
+              className="text-xs text-neutralInvert group-disabled:text-neutral-disabled"
             />
           )}
         </span>
diff --git a/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx b/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx
index 83ee3b869f9..33084874470 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx
@@ -77,7 +77,10 @@ export function InputCreditCard(props: InputCreditCardProps) {
 
   const hasError = error && error.length > 0 ? 'input--error' : ''
 
-  const isDisabled = disabled ? 'input--disabled !border-neutral-250' : ''
+  const inputActions = hasFocus ? 'input--focused' : disabled ? 'input--disabled' : ''
+
+
+  const isDisabled = disabled ? 'input--disabled !border-neutral' : ''
 
   useEffect(() => {
     switch (props.type) {
@@ -125,7 +128,7 @@ export function InputCreditCard(props: InputCreditCardProps) {
       <div className="relative">
         <div
           aria-label="input-container"
-          className={`input ${props.type === 'number' ? '!pl-12' : ''} ${isDisabled} ${hasError} ${hasLabelUp} `}
+          className={`input ${props.type === 'number' ? '!pl-12' : ''} ${inputActions} ${isDisabled} ${hasError} ${hasLabelUp} `}
           ref={inputRef}
         >
           {props.type === 'number' && (
@@ -156,7 +159,7 @@ export function InputCreditCard(props: InputCreditCardProps) {
           </div>
         </div>
       </div>
-      {error && <p className="mt-1 px-4 text-xs font-medium text-red-500">{error}</p>}
+      {error && <p className="mt-1 px-4 text-xs font-medium text-negative">{error}</p>}
     </div>
   )
 }
diff --git a/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx b/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx
index 36ec5e812bc..280272609e9 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx
@@ -48,8 +48,8 @@ export function InputFile(props: InputFileProps) {
     <label
       data-testid={dataTestId}
       htmlFor="dropzone-file"
-      className={`relative flex h-[72px] w-[72px] cursor-pointer items-center justify-center rounded border border-dashed border-neutral-300 bg-neutral-50 duration-150 ease-out ${
-        !selectedImage ? 'hover:bg-neutral-150' : 'bg-neutral-50'
+      className={`relative flex h-[72px] w-[72px] cursor-pointer items-center justify-center rounded border border-dashed border-neutral bg-surface-neutral-subtle duration-150 ease-out ${
+        !selectedImage ? 'hover:bg-surface-neutral-component' : 'bg-surface-neutral-subtle'
       } ${className}`}
     >
       <input
@@ -75,14 +75,14 @@ export function InputFile(props: InputFileProps) {
               setSelectedImage(undefined)
               onChange && onChange(undefined)
             }}
-            className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-brand-50 text-neutral-350 duration-150 ease-out hover:bg-brand-100 hover:text-brand-500"
+            className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-surface-brand-subtle text-neutral-subtle duration-150 ease-out hover:bg-surface-brand-component hover:text-brand"
           >
             <Icon iconName="xmark" className="text-xs" />
           </span>
         </>
       ) : (
         <svg
-          className="relative"
+          className="relative input-file-icon"
           xmlns="http://www.w3.org/2000/svg"
           width="17"
           height="14"
@@ -90,7 +90,7 @@ export function InputFile(props: InputFileProps) {
           viewBox="0 0 17 14"
         >
           <path
-            fill="#A1A8CF"
+            fill="currentColor"
             d="M14.969 0h-12c-1.094 0-2 .906-2 2v10c0 1.125.906 2 2 2h12c1.094 0 2-.875 2-2V2c0-1.094-.875-2-2-2zm-10.5 2c.812 0 1.5.688 1.5 1.5 0 .844-.657 1.5-1.5 1.5-.875 0-1.5-.656-1.5-1.5 0-.813.687-1.5 1.5-1.5zm10.468 9.75a.539.539 0 01-.437.25H3.562a.514.514 0 01-.468-.25c-.063-.188-.063-.375.062-.531l2.188-3A.488.488 0 015.75 8c.156 0 .281.094.375.219l1.031 1.406 2.907-4.375A.499.499 0 0110.5 5c.156 0 .313.094.406.25l4 6c.094.125.094.344.031.5z"
           />
         </svg>
diff --git a/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx b/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
index 85c999b0032..d57bde2a9f7 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-filter/input-filter.tsx
@@ -14,6 +14,10 @@ export interface InputFilterProps {
   isLoading?: boolean
 }
 
+/*
+ * @deprecated Not used in audit logs an
+ */
+
 export function InputFilter({ name, nameKey, options, onChange, defaultValue, isLoading }: InputFilterProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [currentValue, setCurrentValue] = useState<string | string[] | undefined>(defaultValue)
diff --git a/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx b/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx
index 8b690979d0a..a74eca751cd 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx
@@ -18,11 +18,11 @@ export function InputRadioBox(props: InputRadioBoxProps) {
       data-testid="input-radio-box"
       onClick={() => onChange(value)}
       className={`mb-2 rounded border p-4 transition-all ${
-        fieldValue === value ? 'border-brand-500 bg-brand-50' : 'border-neutral-250 bg-neutral-100'
+        fieldValue === value ? 'border-brand-strong bg-surface-brand-subtle' : 'border-neutral bg-surface-neutral-subtle'
       }`}
     >
       <InputRadio big name={name} value={value} label={label} onChange={onChange} formValue={fieldValue} />
-      {description && <div className="ml-[31px] mt-1 text-sm text-neutral-400">{description}</div>}
+      {description && <div className="ml-[31px] mt-1 text-sm text-neutral">{description}</div>}
     </div>
   )
 }
diff --git a/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx b/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx
index 6643bbc2571..329c020db88 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx
@@ -57,14 +57,14 @@ export function InputRadio(props: InputRadioProps) {
         checked={check}
         disabled={disable}
         onChange={(e) => inputChange(e.currentTarget.checked, e.currentTarget.value, e)}
-        className="relative mr-5 appearance-none font-icons  before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border-2 before:border-neutral-350 before:bg-white before:text-xs before:font-black before:leading-none before:text-white  before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-brand-500 after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-500 checked:after:opacity-100 hover:before:border-brand-500"
+        className="relative mr-5 appearance-none font-icons before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border before:border-neutral before:bg-surface-neutral before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-surface-brand-solid after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-strong checked:after:opacity-100 hover:before:border-brand-strong"
       />
       <label
         htmlFor={value}
-        className={`font-medium leading-5 text-neutral-400 dark:text-neutral-50 ${big ? 'text-sm' : 'text-ssm'}`}
+        className={`font-medium leading-5 text-neutral ${big ? 'text-sm' : 'text-ssm'}`}
       >
         {label}
-        {description && <p className="mt-1 text-xs font-normal text-neutral-350 dark:text-neutral-50">{description}</p>}
+        {description && <p className="mt-1 text-xs font-normal text-neutral-subtle">{description}</p>}
       </label>
     </div>
   )
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 a2b65b378f8..e56d0e0b336 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
@@ -49,7 +49,7 @@ export function InputSelectSmall(props: InputSelectSmallProps) {
 
   return (
     <div className={`${className} group relative flex items-center gap-4`}>
-      {label && <label className="shrink-0 text-sm">{label}</label>}
+      {label && <label className="shrink-0 text-sm text-neutral">{label}</label>}
       <select
         data-testid={dataTestId || 'input-select-small'}
         name={name}
diff --git a/libs/shared/ui/src/lib/components/inputs/input-size-unit/input-size-unit.tsx b/libs/shared/ui/src/lib/components/inputs/input-size-unit/input-size-unit.tsx
index 5f0aa046aa8..9a4b977e9fe 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-size-unit/input-size-unit.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-size-unit/input-size-unit.tsx
@@ -60,7 +60,7 @@ export function InputSizeUnit(props: InputSizeUnitProps) {
           }
         />
         {showConsumption && (
-          <p data-testid="current-consumption" className="ml-4 mt-1 text-xs text-neutral-350">
+          <p data-testid="current-consumption" className="ml-4 mt-1 text-xs text-neutral-subtle">
             Current consumption:{' '}
             {currentSize < 1024 ? currentSize + ` ${MemorySizeEnum.MB}` : currentSize / 1024 + ` ${MemorySizeEnum.GB}`}
           </p>
diff --git a/libs/shared/ui/src/lib/components/inputs/input-tags/input-tags.tsx b/libs/shared/ui/src/lib/components/inputs/input-tags/input-tags.tsx
index 744e5f5f057..57cce79bd2b 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-tags/input-tags.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-tags/input-tags.tsx
@@ -74,13 +74,13 @@ export function InputTags(props: InputTagsProps) {
           <div
             data-testid={`input-tags-${index}`}
             key={index}
-            className="relative mr-1 mt-1 inline-flex h-7 select-none items-center rounded-[33px] border border-neutral-300 bg-neutral-100 pl-3 pr-7 text-sm text-neutral-400"
+            className="relative mr-1 mt-1 inline-flex h-7 select-none items-center rounded-full border border-neutral bg-surface-neutral-subtle pl-2 pr-6 text-sm text-neutral"
           >
             <span className="text">{tag}</span>
             <div
               data-testid={`input-tags-remove-${index}`}
               onClick={() => removeTag(index)}
-              className="transition-background absolute right-1 top-[6px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-full text-xs duration-200 ease-out hover:bg-neutral-200 "
+              className="transition-background absolute right-1 top-[6px] flex h-4 w-4 cursor-pointer items-center justify-center rounded-full text-xs duration-200 ease-out hover:bg-surface-neutral-componentHover"
             >
               <Icon iconName="xmark" />
             </div>
@@ -91,10 +91,10 @@ export function InputTags(props: InputTagsProps) {
           data-testid="input-tags-field"
           onKeyDown={handleKeyDown}
           type="text"
-          className={`${!focused ? 'text-transparent' : ''} ${
+          className={`bg-transparent ${!focused ? 'text-transparent' : ''} ${
             focused || currentTags?.length > 0 || inputValue.length > 0
-              ? 'inline-flex text-ssm text-neutral-400'
-              : 'absolute left-0 top-0 h-full w-full bg-transparent'
+              ? 'inline-flex text-ssm text-neutral'
+              : 'absolute left-0 top-0 h-full w-full'
           }`}
           placeholder={currentTags?.length > 0 ? placeholder : ''}
           onChange={(e) => setInputValue(e.currentTarget.value)}
diff --git a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
index 2eb7c612391..b427d061762 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-toggle/input-toggle.tsx
@@ -83,7 +83,7 @@ export function InputToggle(props: InputToggleProps) {
         >
           <div
             aria-label="circle"
-            className={`${toggleSizeCircle} transform rounded-full bg-white shadow-lg ${
+            className={`${toggleSizeCircle} transform rounded-full bg-surface-neutral shadow-lg ${
               animateEnabled ? 'duration-300 ease-in-out' : ''
             } ${toggleActive ? `${small ? 'translate-x-3.5' : 'translate-x-6'}` : ''}`}
           />
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 71f5ec73902..879edc333de 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
@@ -6,7 +6,7 @@ const Story: Meta<typeof RadioGroup.Root> = {
   title: 'RadioGroup',
   decorators: [
     (Story) => (
-      <div style={{ background: 'white', padding: '3em' }}>
+      <div style={{ padding: '3em' }}>
         <Story />
       </div>
     ),
@@ -17,19 +17,19 @@ export default Story
 export const Primary = {
   render: () => (
     <RadioGroup.Root defaultValue="1">
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="1" /> Value 1
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="2" /> Value 2
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="3" /> Value 3
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="4" disabled /> Value 4
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="5" disabled checked /> Value 5
       </label>
     </RadioGroup.Root>
@@ -39,19 +39,19 @@ export const Primary = {
 export const Check = {
   render: () => (
     <RadioGroup.Root defaultValue="1">
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="1" variant="check" /> Value 1
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="2" variant="check" /> Value 2
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="3" variant="check" /> Value 3
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="4" disabled variant="check" /> Value 4
       </label>
-      <label className="flex gap-3">
+      <label className="flex gap-3 items-center">
         <RadioGroup.Item value="5" disabled checked variant="check" /> Value 5
       </label>
     </RadioGroup.Root>
diff --git a/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx b/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx
index fa9aeaaa59e..68786a3becd 100644
--- a/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx
+++ b/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx
@@ -8,24 +8,22 @@ const itemVariants = cva(
   [
     'group',
     'transition',
-    'bg-neutral-100',
-    'dark:bg-neutral-500',
+    'bg-surface-neutral',
     'border',
-    'border-neutral-300',
+    'border-neutral',
     'w-[20px]',
     'h-[20px]',
     'rounded-full',
-    'hover:border-2',
-    'hover:border-brand-500',
-    'data-[state=checked]:bg-brand-500',
-    'data-[state=checked]:border-2',
-    'data-[state=checked]:border-brand-500',
+    'hover:border-brand-strong',
+    'data-[state=checked]:bg-surface-brand-solid',
+    'data-[state=checked]:border-0',
+    'hover:data-[state=checked]:bg-surface-brand-solidHover',
+    'disabled:cursor-not-allowed',
     'disabled:hover:border',
-    'disabled:bg-neutral-150',
-    'disabled:border-neutral-250',
-    'disabled:data-[state=checked]:hover:border-2',
-    'disabled:data-[state=checked]:border-brand-300',
-    'disabled:data-[state=checked]:bg-brand-300',
+    'disabled:bg-surface-neutral-component',
+    'disabled:border-neutral-component',
+    'disabled:data-[state=checked]:border-0',
+    'disabled:data-[state=checked]:bg-surface-brand-component',
   ],
   {
     variants: {
@@ -69,7 +67,7 @@ const RadioGroupItem = forwardRef<ElementRef<typeof RadioGroupPrimitive.Item>, R
     return (
       <RadioGroupPrimitive.Item {...props} className={twMerge(itemVariants({ variant }), className)} ref={ref}>
         <RadioGroupPrimitive.Indicator className={indicatorVariants({ variant })}>
-          {variant === 'check' && <Icon iconName="check" className="text-xs text-white" />}
+          {variant === 'check' && <Icon iconName="check" className="text-xs text-neutralInvert" />}
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
     )
diff --git a/libs/shared/ui/src/lib/components/slider/slider.tsx b/libs/shared/ui/src/lib/components/slider/slider.tsx
index 3e9244b58e1..efa5a3db3a2 100644
--- a/libs/shared/ui/src/lib/components/slider/slider.tsx
+++ b/libs/shared/ui/src/lib/components/slider/slider.tsx
@@ -24,12 +24,12 @@ export function Slider(props: SliderProps) {
       {label && (
         <div className="mb-2 flex items-center justify-between">
           {label && (
-            <p data-testid="label" className="text-sm text-neutral-400">
+            <p data-testid="label" className="text-sm text-neutral">
               {label}
             </p>
           )}
           {valueLabel && value && (
-            <p className="font-medium text-brand-500">
+            <p className="font-medium text-brand">
               {value.map((currentValue, index) => `${currentValue}${index < value.length - 1 ? ', ' : ''}`)}
               {valueLabel}
             </p>
@@ -38,19 +38,19 @@ export function Slider(props: SliderProps) {
       )}
       <Root
         onValueChange={(value) => handleChange(value)}
-        className="relative flex h-1 w-full cursor-pointer rounded bg-neutral-300"
+        className="relative flex h-1 w-full cursor-pointer rounded bg-surface-neutral-solid"
         value={value}
         min={min}
         max={max}
         step={step}
       >
-        <Track className="relative flex h-1 flex-grow rounded-full bg-neutral-300">
-          <Range className="absolute h-full rounded-full bg-brand-500" />
+        <Track className="relative flex h-1 flex-grow rounded-full bg-surface-neutral-solid">
+          <Range className="absolute h-full rounded-full bg-surface-brand-solid" />
         </Track>
         {value?.map((v, index) => (
           <Thumb
             key={index}
-            className="duration-600 -mt-1.5 block h-4 w-4 cursor-grab rounded-full bg-brand-500 transition-all ease-in-out hover:bg-brand-600 focus:shadow-2xl focus-visible:cursor-grabbing focus-visible:outline-none"
+            className="duration-600 -mt-1.5 block h-4 w-4 cursor-grab rounded-full bg-surface-brand-solid transition-all ease-in-out hover:bg-surface-brand-solidHover focus:shadow-2xl focus-visible:cursor-grabbing focus-visible:outline-none"
           />
         ))}
       </Root>
diff --git a/libs/shared/ui/src/lib/styles/components/input.scss b/libs/shared/ui/src/lib/styles/components/input.scss
index caa38bf034d..bd334dfa0d8 100644
--- a/libs/shared/ui/src/lib/styles/components/input.scss
+++ b/libs/shared/ui/src/lib/styles/components/input.scss
@@ -1,7 +1,7 @@
 @use '../base/variable';
 
 .input {
-  @apply relative min-h-[52px] cursor-pointer rounded-md border border-neutral-component bg-background px-3 py-2 hover:bg-surface-neutral-component;
+  @apply relative min-h-[52px] cursor-pointer rounded-md border border-neutral-component bg-surface-neutral px-3 py-2 hover:bg-surface-neutral-component;
   transition:
     120ms all variable.$timing-cubic,
     0 outline;
@@ -39,6 +39,10 @@
   color: transparent;
 }
 
+.input-file-icon {
+  color: theme('textColor.neutral.disabled');
+}
+
 .input--focused,
 .input__button--focused {
   outline: 2px solid var(--brand-4);
@@ -57,8 +61,8 @@
 }
 
 .input--filter {
-  min-height: theme('space.9');
-  height: theme('space.9');
+  min-height: theme('space.7');
+  height: theme('space.7');
   padding: theme('space.2');
   @apply bg-surface-neutral-component;
   padding-top: 0;
diff --git a/libs/shared/ui/src/lib/styles/components/select.scss b/libs/shared/ui/src/lib/styles/components/select.scss
index 3678c2de20a..554605c0b84 100644
--- a/libs/shared/ui/src/lib/styles/components/select.scss
+++ b/libs/shared/ui/src/lib/styles/components/select.scss
@@ -26,6 +26,10 @@
   transition-property: transform;
 }
 
+.input--filter .input-select__control {
+  height:28px;
+}
+
 // state
 .input-select--error {
   @apply border-negative-strong;

From 6e03946d5f1c675559241c8cef9549a8ac7df5d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Mon, 19 Jan 2026 14:58:42 +0100
Subject: [PATCH 8/9] chore(snapshots): update snapshots for various components
 to reflect styling changes and improvements in button and input components

---
 .../cluster-access-modal.spec.tsx.snap        |  14 +-
 .../cluster-delete-modal.spec.tsx.snap        |  10 +-
 .../cluster-log-row.spec.tsx.snap             |   8 +-
 .../cluster-migration-modal.spec.tsx.snap     |  12 +-
 .../__snapshots__/cluster-setup.spec.tsx.snap |   2 +-
 .../cluster-terminal.spec.tsx.snap            |   2 +-
 .../terraform-export-modal.spec.tsx.snap      |   6 +-
 .../update-all-modal.spec.tsx.snap            |  14 +-
 ...annotation-create-edit-modal.spec.tsx.snap |  32 +-
 ...registry-services-list-modal.spec.tsx.snap |   4 +-
 .../git-branch-settings.spec.tsx.snap         |   4 +-
 ...t-public-repository-settings.spec.tsx.snap |   6 +-
 .../git-token-list.spec.tsx.snap              |  12 +-
 .../label-create-edit-modal.spec.tsx.snap     |  16 +-
 .../deployment-setting.spec.tsx.snap          |   6 +-
 ...etworking-port-setting-modal.spec.tsx.snap |  26 +-
 .../source-setting.spec.tsx.snap              |   4 +-
 .../values-override-yaml-modal.spec.tsx.snap  |   6 +-
 ...values-override-yaml-setting.spec.tsx.snap |   2 +-
 ...file-fragment-inline-setting.spec.tsx.snap |   4 +-
 .../auto-deploy-setting.spec.tsx.snap         |   2 +-
 ...ation-cancel-lifecycle-modal.spec.tsx.snap |   6 +-
 .../dockerfile-settings.spec.tsx.snap         |  16 +-
 .../force-unlock-modal.spec.tsx.snap          |   6 +-
 .../general-setting.spec.tsx.snap             |   6 +-
 .../__snapshots__/last-commit.spec.tsx.snap   |   4 +-
 .../__snapshots__/last-version.spec.tsx.snap  |   2 +-
 .../__snapshots__/pod-details.spec.tsx.snap   |   8 +-
 .../pod-statuses-callout.spec.tsx.snap        |   4 +-
 .../__snapshots__/pods-metrics.spec.tsx.snap  |   2 +-
 .../redeploy-modal.spec.tsx.snap              |  16 +-
 .../select-commit-modal.spec.tsx.snap         |  10 +-
 .../select-version-modal.spec.tsx.snap        |   8 +-
 .../service-clone-modal.spec.tsx.snap         |   8 +-
 .../service-links-popover.spec.tsx.snap       | 169 +------
 .../service-list-action-bar.spec.tsx.snap     |   4 +-
 .../__snapshots__/input-search.spec.tsx.snap  |   4 +-
 .../dropdown-variable.spec.tsx.snap           |   2 +-
 .../field-variable-suggestion.spec.tsx.snap   |   2 +-
 .../__snapshots__/variable-list.spec.tsx.snap |  44 +-
 .../gcp-existing-vpc.spec.tsx.snap            |  12 +-
 .../gcp-vpc-feature.spec.tsx.snap             |  12 +-
 .../step-kubeconfig.spec.tsx.snap             |  10 +-
 ...n-labels-annotations-feature.spec.tsx.snap |  16 +-
 .../button-popover-subnets.spec.tsx.snap      | 421 ++++++++++++++++++
 .../devops-copilot-button.spec.tsx.snap       |   2 +-
 .../input/__snapshots__/input.spec.tsx.snap   |   4 +-
 .../button-primitive.spec.tsx.snap            |   2 +-
 .../button/__snapshots__/button.spec.tsx.snap |   4 +-
 .../__snapshots__/input-filter.spec.tsx.snap  |   6 +-
 .../modal-confirmation.spec.tsx.snap          |  18 +-
 .../modal-multi-confirmation.spec.tsx.snap    |   8 +-
 52 files changed, 642 insertions(+), 386 deletions(-)
 create mode 100644 libs/shared/console-shared/src/lib/cluster-settings/ui/cluster-resources-settings/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap

diff --git a/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
index 8c319f0a503..7189d2fe849 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap
@@ -70,7 +70,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               qovery cluster kubeconfig --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
@@ -108,7 +108,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               export KUBECONFIG=&lt;path&gt;
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
@@ -141,7 +141,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
@@ -163,7 +163,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
@@ -251,7 +251,7 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               qovery cluster debug-pod --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
@@ -284,7 +284,7 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
@@ -306,7 +306,7 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
               type="button"
             >
               Copy
diff --git a/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
index 12f21f28aa5..73e20493cf7 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap
@@ -33,7 +33,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
               class="hidden"
             />
             <input
-              class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+              class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
               data-testid="input-value"
               name="name"
               placeholder="Enter "delete""
@@ -155,7 +155,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-red-500 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 data-[state=indeterminate]:border-red-500 disabled:data-[state=checked]:border-red-300 disabled:data-[state=checked]:bg-red-300 disabled:data-[state=indeterminate]:border-red-300 shrink-0"
+                class="group inline-flex items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-negative-strong data-[state=checked]:bg-surface-negative-solid hover:data-[state=checked]:bg-surface-negative-solidHover data-[state=checked]:border-negative-strong data-[state=indeterminate]:border-negative-strong shrink-0"
                 data-state="unchecked"
                 id="confirm_qovery_config"
                 role="checkbox"
@@ -186,7 +186,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-red-500 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 data-[state=indeterminate]:border-red-500 disabled:data-[state=checked]:border-red-300 disabled:data-[state=checked]:bg-red-300 disabled:data-[state=indeterminate]:border-red-300 shrink-0"
+                class="group inline-flex items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-negative-strong data-[state=checked]:bg-surface-negative-solid hover:data-[state=checked]:bg-surface-negative-solidHover data-[state=checked]:border-negative-strong data-[state=indeterminate]:border-negative-strong shrink-0"
                 data-state="unchecked"
                 id="confirm_cloud_provider"
                 role="checkbox"
@@ -252,13 +252,13 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
           class="flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-red-500 text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-red-500 text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
             disabled=""
             type="submit"
           >
diff --git a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-log-row/__snapshots__/cluster-log-row.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-log-row/__snapshots__/cluster-log-row.spec.tsx.snap
index e978fa91bc5..bf8e94fb0a0 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-log-row/__snapshots__/cluster-log-row.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-logs/cluster-log-row/__snapshots__/cluster-log-row.spec.tsx.snap
@@ -55,9 +55,9 @@ exports[`ClusterLogRow should display cell error message 1`] = `
         />
       </span>
       <span
-        title="Mon, 12 Jan 2026 15:57:33 GMT"
+        title="Mon, 19 Jan 2026 13:44:04 GMT"
       >
-        12 Jan, 15:57:33.00
+        19 Jan, 13:44:04.00
       </span>
     </div>
   </div>
@@ -119,9 +119,9 @@ exports[`ClusterLogRow should display cell message 1`] = `
         />
       </span>
       <span
-        title="Mon, 12 Jan 2026 15:57:33 GMT"
+        title="Mon, 19 Jan 2026 13:44:04 GMT"
       >
-        12 Jan, 15:57:33.00
+        19 Jan, 13:44:04.00
       </span>
     </div>
   </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
index c04b4c2f8d6..6daa9abfa13 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-migration-modal/__snapshots__/cluster-migration-modal.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 h-4 w-4 min-w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong h-4 w-4 min-w-4"
               data-state="unchecked"
               id="activation"
               role="checkbox"
@@ -58,7 +58,7 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 h-4 w-4 min-w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong h-4 w-4 min-w-4"
               data-state="unchecked"
               id="downtime"
               role="checkbox"
@@ -94,7 +94,7 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 h-4 w-4 min-w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong h-4 w-4 min-w-4"
               data-state="unchecked"
               id="environments"
               role="checkbox"
@@ -130,7 +130,7 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 h-4 w-4 min-w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong h-4 w-4 min-w-4"
               data-state="unchecked"
               id="compatibility"
               role="checkbox"
@@ -182,14 +182,14 @@ exports[`ClusterMigrationModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
index 01c65455163..7dc33b58d49 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
@@ -78,7 +78,7 @@ exports[`ClusterSetup should match manage deployment snapshot 1`] = `
             qovery cluster install
           </span>
           <button
-            class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
+            class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral cursor-pointer gap-2 font-sans font-medium"
             type="button"
           >
             Copy
diff --git a/libs/domains/clusters/feature/src/lib/cluster-terminal/__snapshots__/cluster-terminal.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-terminal/__snapshots__/cluster-terminal.spec.tsx.snap
index 4774df6c20d..c95986aa89f 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-terminal/__snapshots__/cluster-terminal.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-terminal/__snapshots__/cluster-terminal.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`ClusterTerminal should match snapshot 1`] = `
         class="flex items-center gap-1"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
         >
           Close shell
           <i
diff --git a/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
index 3ade29df20e..b691a7e8f70 100644
--- a/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/terraform-export-modal/__snapshots__/terraform-export-modal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`TerraformExportModal should match with snapshots 1`] = `
             >
               <div
                 aria-label="circle"
-                class="w-3.5 h-3.5 transform rounded-full bg-white shadow-lg  "
+                class="w-3.5 h-3.5 transform rounded-full bg-surface-neutral shadow-lg  "
               />
             </div>
           </div>
@@ -62,14 +62,14 @@ exports[`TerraformExportModal should match with snapshots 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
index d179e059020..396ab2e3e76 100644
--- a/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/update-all-modal/__snapshots__/update-all-modal.spec.tsx.snap
@@ -29,7 +29,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
           </strong>
         </p>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
           data-testid="deselect-all"
         >
           Deselect All
@@ -55,7 +55,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
                 class="relative flex items-center gap-2 mr-4"
               >
                 <input
-                  class="input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded-sm before:bg-white before:text-white dark:before:bg-neutral-500 mr-5 before:w-4 before:h-4 cursor-pointer before:border-neutral-350 before:border-2 before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] checked:before:border-brand-500 checked:before:bg-brand-500"
+                  class="input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded before:border before:border-neutral before:bg-surface-neutral before:text-neutralInvert mr-5 before:w-4 before:h-4 cursor-pointer before:text-xs before:font-black before:leading-none before:transition-colors before:content-[''] checked:before:border-brand-strong checked:before:bg-surface-brand-solid hover:before:border-brand-strong checked:hover:before:bg-surface-brand-solidHover disabled:before:border-neutral disabled:before:bg-surface-neutral-subtle disabled:checked:before:border-neutral disabled:checked:before:bg-surface-neutral-subtle disabled:hover:before:border-neutral"
                   data-testid="input-checkbox"
                   id="0"
                   name="0"
@@ -64,7 +64,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
                 />
                 <i
                   aria-hidden="true"
-                  class="fa-regular fa-check absolute text-2xs text-white left-1"
+                  class="fa-regular fa-check pointer-events-none absolute leading-[16px] text-neutralInvert left-[2.75px] text-xs"
                 />
               </div>
               Amy Maxwell
@@ -169,7 +169,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
                 class="relative flex items-center gap-2 mr-4"
               >
                 <input
-                  class="input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded-sm before:bg-white before:text-white dark:before:bg-neutral-500 mr-5 before:w-4 before:h-4 cursor-pointer before:border-neutral-350 before:border-2 before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] checked:before:border-brand-500 checked:before:bg-brand-500"
+                  class="input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded before:border before:border-neutral before:bg-surface-neutral before:text-neutralInvert mr-5 before:w-4 before:h-4 cursor-pointer before:text-xs before:font-black before:leading-none before:transition-colors before:content-[''] checked:before:border-brand-strong checked:before:bg-surface-brand-solid hover:before:border-brand-strong checked:hover:before:bg-surface-brand-solidHover disabled:before:border-neutral disabled:before:bg-surface-neutral-subtle disabled:checked:before:border-neutral disabled:checked:before:bg-surface-neutral-subtle disabled:hover:before:border-neutral"
                   data-testid="input-checkbox"
                   id="1"
                   name="1"
@@ -279,7 +279,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
                 class="relative flex items-center gap-2 mr-4"
               >
                 <input
-                  class="input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded-sm before:bg-white before:text-white dark:before:bg-neutral-500 mr-5 before:w-4 before:h-4 cursor-pointer before:border-neutral-350 before:border-2 before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] checked:before:border-brand-500 checked:before:bg-brand-500"
+                  class="input-checkbox relative h-0 w-0 appearance-none font-icons before:absolute before:left-0 before:top-0 before:flex before:-translate-y-1/2 before:items-center before:justify-center before:rounded before:border before:border-neutral before:bg-surface-neutral before:text-neutralInvert mr-5 before:w-4 before:h-4 cursor-pointer before:text-xs before:font-black before:leading-none before:transition-colors before:content-[''] checked:before:border-brand-strong checked:before:bg-surface-brand-solid hover:before:border-brand-strong checked:hover:before:bg-surface-brand-solidHover disabled:before:border-neutral disabled:before:bg-surface-neutral-subtle disabled:checked:before:border-neutral disabled:checked:before:bg-surface-neutral-subtle disabled:hover:before:border-neutral"
                   data-testid="input-checkbox"
                   id="2"
                   name="2"
@@ -388,13 +388,13 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
         class="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-white py-6 dark:bg-neutral-550"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           type="submit"
         >
diff --git a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
index 83766260551..27edc46fc59 100644
--- a/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/annotation-create-edit-modal/__snapshots__/annotation-create-edit-modal.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input     "
+              class="input group     "
             >
               <div
                 class=""
@@ -93,7 +93,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
                       class="hidden"
                     />
                     <input
-                      class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+                      class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
                       data-testid="annotations.0.key"
                       name="annotations.0.key"
                       spellcheck="false"
@@ -114,7 +114,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
                       class="hidden"
                     />
                     <input
-                      class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+                      class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
                       data-testid="annotations.0.value"
                       name="annotations.0.value"
                       spellcheck="false"
@@ -124,7 +124,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
                   </div>
                 </div>
                 <button
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
                   type="button"
                 >
                   <i
@@ -136,7 +136,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
             </li>
           </ul>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
             type="button"
           >
             Add annotation
@@ -159,7 +159,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="CRON_JOBS"
               role="checkbox"
@@ -186,7 +186,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="DEPLOYMENTS"
               role="checkbox"
@@ -213,7 +213,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="HPA"
               role="checkbox"
@@ -240,7 +240,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="INGRESS"
               role="checkbox"
@@ -267,7 +267,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="JOBS"
               role="checkbox"
@@ -294,7 +294,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="PODS"
               role="checkbox"
@@ -321,7 +321,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="SECRETS"
               role="checkbox"
@@ -348,7 +348,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="SERVICES"
               role="checkbox"
@@ -375,7 +375,7 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           >
             <button
               aria-checked="false"
-              class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 mr-3 h-4 w-4"
+              class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong mr-3 h-4 w-4"
               data-state="unchecked"
               id="STATEFUL_SETS"
               role="checkbox"
@@ -402,14 +402,14 @@ exports[`AnnotationCreateEditModal should match with snatpshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/organizations/feature/src/lib/container-registry-services-list-modal/__snapshots__/container-registry-services-list-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/container-registry-services-list-modal/__snapshots__/container-registry-services-list-modal.spec.tsx.snap
index ad693323392..239ae085c50 100644
--- a/libs/domains/organizations/feature/src/lib/container-registry-services-list-modal/__snapshots__/container-registry-services-list-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/container-registry-services-list-modal/__snapshots__/container-registry-services-list-modal.spec.tsx.snap
@@ -93,8 +93,8 @@ exports[`ContainerRegistryServicesListModal should match snapshots 1`] = `
                     />
                   </button>
                   <a
-                    class="cursor-pointer transition duration-100 font-medium inline-flex items-center gap-1 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400 text-sm"
-                    href="/organization/0000-0000-0000/project/1/environment/1/services/general"
+                    class="cursor-pointer transition duration-100 font-medium inline-flex items-center gap-1 hover:brightness-75 text-surface-brand-solid text-sm"
+                    to="/organization/0000-0000-0000/project/1/environment/1/services/general"
                   >
                     Development
                   </a>
diff --git a/libs/domains/organizations/feature/src/lib/git-branch-settings/__snapshots__/git-branch-settings.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/git-branch-settings/__snapshots__/git-branch-settings.spec.tsx.snap
index 8c7c16ccb0b..e59d0e4892a 100644
--- a/libs/domains/organizations/feature/src/lib/git-branch-settings/__snapshots__/git-branch-settings.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/git-branch-settings/__snapshots__/git-branch-settings.spec.tsx.snap
@@ -119,7 +119,7 @@ exports[`GitBranchSettings should match snapshot 1`] = `
       >
         <div
           aria-label="input-container"
-          class="input    input--label-up "
+          class="input group    input--label-up "
         >
           <div
             class=""
@@ -142,7 +142,7 @@ exports[`GitBranchSettings should match snapshot 1`] = `
         </div>
       </div>
       <p
-        class="mt-0.5 px-3 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+        class="mt-0.5 px-3 text-xs text-neutral-subtle"
       >
         Provide the folder path in the repository where the application is located.
       </p>
diff --git a/libs/domains/organizations/feature/src/lib/git-public-repository-settings/__snapshots__/git-public-repository-settings.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/git-public-repository-settings/__snapshots__/git-public-repository-settings.spec.tsx.snap
index eac876a5986..0eba6072fc6 100644
--- a/libs/domains/organizations/feature/src/lib/git-public-repository-settings/__snapshots__/git-public-repository-settings.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/git-public-repository-settings/__snapshots__/git-public-repository-settings.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`GitPublicRepositorySettings should match snapshot 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
@@ -58,7 +58,7 @@ exports[`GitPublicRepositorySettings should match snapshot 1`] = `
       >
         <div
           aria-label="input-container"
-          class="input     "
+          class="input group     "
         >
           <div
             class=""
@@ -91,7 +91,7 @@ exports[`GitPublicRepositorySettings should match snapshot 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input    input--label-up "
+            class="input group    input--label-up "
           >
             <div
               class=""
diff --git a/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
index 41b1c010803..31bd95ffcdc 100644
--- a/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap
@@ -70,7 +70,7 @@ exports[`GitTokenList should match snapshot 1`] = `
             </div>
             <div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
                 disabled=""
               >
                 <span
@@ -84,7 +84,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral mr-2"
               >
                 <i
                   aria-hidden="true"
@@ -92,7 +92,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
               >
                 <i
                   aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`GitTokenList should match snapshot 1`] = `
             </div>
             <div>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
                 disabled=""
               >
                 <span
@@ -176,7 +176,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral mr-2"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral mr-2"
               >
                 <i
                   aria-hidden="true"
@@ -184,7 +184,7 @@ exports[`GitTokenList should match snapshot 1`] = `
                 />
               </button>
               <button
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
               >
                 <i
                   aria-hidden="true"
diff --git a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
index 6aea9f24c3f..86f60c118f4 100644
--- a/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
+++ b/libs/domains/organizations/feature/src/lib/label-create-edit-modal/__snapshots__/label-create-edit-modal.spec.tsx.snap
@@ -28,7 +28,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input     "
+              class="input group     "
             >
               <div
                 class=""
@@ -107,7 +107,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
                       class="hidden"
                     />
                     <input
-                      class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+                      class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
                       data-testid="labels.0.key"
                       name="labels.0.key"
                       spellcheck="false"
@@ -128,7 +128,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
                       class="hidden"
                     />
                     <input
-                      class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+                      class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
                       data-testid="labels.0.value"
                       name="labels.0.value"
                       spellcheck="false"
@@ -157,13 +157,13 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
                     >
                       <div
                         aria-label="circle"
-                        class="w-3.5 h-3.5 transform rounded-full bg-white shadow-lg  "
+                        class="w-3.5 h-3.5 transform rounded-full bg-surface-neutral shadow-lg  "
                       />
                     </div>
                   </div>
                 </div>
                 <button
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle"
                   type="button"
                 >
                   <i
@@ -175,7 +175,7 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
             </li>
           </ul>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert mt-3"
             type="button"
           >
             Add label
@@ -189,14 +189,14 @@ exports[`LabelCreateEditModal should match with snatpshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-helm/feature/src/lib/deployment-setting/__snapshots__/deployment-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/deployment-setting/__snapshots__/deployment-setting.spec.tsx.snap
index c1a8b6a1900..e430263df28 100644
--- a/libs/domains/service-helm/feature/src/lib/deployment-setting/__snapshots__/deployment-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/deployment-setting/__snapshots__/deployment-setting.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`DeploymentSetting should match snapshot 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input    input--label-up "
+              class="input group    input--label-up "
             >
               <div
                 class=""
@@ -67,7 +67,7 @@ exports[`DeploymentSetting should match snapshot 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input    input--label-up "
+            class="input group    input--label-up "
           >
             <div
               class=""
@@ -110,7 +110,7 @@ exports[`DeploymentSetting should match snapshot 1`] = `
           >
             <div
               aria-label="circle"
-              class="w-3.5 h-3.5 transform rounded-full bg-white shadow-lg  "
+              class="w-3.5 h-3.5 transform rounded-full bg-surface-neutral shadow-lg  "
             />
           </div>
         </div>
diff --git a/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
index a6e7a3073e5..ecb120eb6bd 100644
--- a/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/networking-port-setting-modal/__snapshots__/networking-port-setting-modal.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`NetworkingPortSettingModal should match snapshot in create state 1`] =
             >
               <div
                 aria-label="input-container"
-                class="input     "
+                class="input group     "
               >
                 <div
                   class=""
@@ -168,7 +168,7 @@ exports[`NetworkingPortSettingModal should match snapshot in create state 1`] =
             >
               <div
                 aria-label="input-container"
-                class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+                class="input group input--disabled input--disabled !border-neutral  input--label-up "
               >
                 <div
                   class="pointer-events-none"
@@ -201,7 +201,7 @@ exports[`NetworkingPortSettingModal should match snapshot in create state 1`] =
             >
               <div
                 aria-label="input-container"
-                class="input     "
+                class="input group     "
               >
                 <div
                   class=""
@@ -234,7 +234,7 @@ exports[`NetworkingPortSettingModal should match snapshot in create state 1`] =
               >
                 <div
                   aria-label="input-container"
-                  class="input     "
+                  class="input group     "
                 >
                   <div
                     class=""
@@ -269,14 +269,14 @@ port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&g
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
@@ -330,7 +330,7 @@ exports[`NetworkingPortSettingModal should match snapshot in edit state 1`] = `
             >
               <div
                 aria-label="input-container"
-                class="input    input--label-up "
+                class="input group    input--label-up "
               >
                 <div
                   class=""
@@ -362,7 +362,7 @@ exports[`NetworkingPortSettingModal should match snapshot in edit state 1`] = `
             >
               <div
                 aria-label="input-container"
-                class="input    input--label-up "
+                class="input group    input--label-up "
               >
                 <div
                   class=""
@@ -490,7 +490,7 @@ exports[`NetworkingPortSettingModal should match snapshot in edit state 1`] = `
             >
               <div
                 aria-label="input-container"
-                class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+                class="input group input--disabled input--disabled !border-neutral  input--label-up "
               >
                 <div
                   class="pointer-events-none"
@@ -523,7 +523,7 @@ exports[`NetworkingPortSettingModal should match snapshot in edit state 1`] = `
             >
               <div
                 aria-label="input-container"
-                class="input    input--label-up "
+                class="input group    input--label-up "
               >
                 <div
                   class=""
@@ -556,7 +556,7 @@ exports[`NetworkingPortSettingModal should match snapshot in edit state 1`] = `
               >
                 <div
                   aria-label="input-container"
-                  class="input    input--label-up "
+                  class="input group    input--label-up "
                 >
                   <div
                     class=""
@@ -591,14 +591,14 @@ port from the internet. Default value is p&lt;port_number&gt;-&lt;service_name&g
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-helm/feature/src/lib/source-setting/__snapshots__/source-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/source-setting/__snapshots__/source-setting.spec.tsx.snap
index d6521ea4e5b..27b83b9245e 100644
--- a/libs/domains/service-helm/feature/src/lib/source-setting/__snapshots__/source-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/source-setting/__snapshots__/source-setting.spec.tsx.snap
@@ -348,7 +348,7 @@ exports[`SourceSetting should match snapshot helm chart settings with OCI kind 1
       >
         <div
           aria-label="input-container"
-          class="input    input--label-up "
+          class="input group    input--label-up "
         >
           <div
             class=""
@@ -380,7 +380,7 @@ exports[`SourceSetting should match snapshot helm chart settings with OCI kind 1
       >
         <div
           aria-label="input-container"
-          class="input    input--label-up "
+          class="input group    input--label-up "
         >
           <div
             class=""
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
index 459baba30a3..efb33636cf8 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-yaml-modal/__snapshots__/values-override-yaml-modal.spec.tsx.snap
@@ -63,7 +63,7 @@ exports[`ValuesOverrideYamlModal should match snapshot 1`] = `
                   aria-controls="radix-:ri:"
                   aria-expanded="false"
                   aria-haspopup="dialog"
-                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-4 top-4 px-2.5"
+                  class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-4 top-4 px-2.5"
                   data-state="closed"
                   type="button"
                 >
@@ -116,14 +116,14 @@ exports[`ValuesOverrideYamlModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/service-helm/feature/src/lib/values-override-yaml-setting/__snapshots__/values-override-yaml-setting.spec.tsx.snap b/libs/domains/service-helm/feature/src/lib/values-override-yaml-setting/__snapshots__/values-override-yaml-setting.spec.tsx.snap
index 639c47377b2..430806fe128 100644
--- a/libs/domains/service-helm/feature/src/lib/values-override-yaml-setting/__snapshots__/values-override-yaml-setting.spec.tsx.snap
+++ b/libs/domains/service-helm/feature/src/lib/values-override-yaml-setting/__snapshots__/values-override-yaml-setting.spec.tsx.snap
@@ -32,7 +32,7 @@ exports[`ValuesOverrideAsYamlSetting should match snapshot 1`] = `
             No override defined.
           </p>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
             type="button"
           >
             <i
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
index 37bb8bddda8..cccbb7736e3 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/dockerfile-fragment-inline-setting/__snapshots__/dockerfile-fragment-inline-setting.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`DockerfileFragmentInlineSetting should match snapshot with content 1`]
           Commands
         </h2>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral aspect-square justify-center p-0 hover:text-neutral-400"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-6 rounded bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral aspect-square justify-center p-0 hover:text-neutral-400"
           type="button"
         >
           <i
@@ -91,7 +91,7 @@ exports[`DockerfileFragmentInlineSetting should match snapshot without content 1
             No commands defined.
           </p>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
             type="button"
           >
             <i
diff --git a/libs/domains/services/feature/src/lib/auto-deploy-setting/__snapshots__/auto-deploy-setting.spec.tsx.snap b/libs/domains/services/feature/src/lib/auto-deploy-setting/__snapshots__/auto-deploy-setting.spec.tsx.snap
index f6da0f4bff1..4ce3deeb9ad 100644
--- a/libs/domains/services/feature/src/lib/auto-deploy-setting/__snapshots__/auto-deploy-setting.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/auto-deploy-setting/__snapshots__/auto-deploy-setting.spec.tsx.snap
@@ -23,7 +23,7 @@ exports[`AutoDeploySetting should match snapshot 1`] = `
         >
           <div
             aria-label="circle"
-            class="w-3.5 h-3.5 transform rounded-full bg-white shadow-lg  "
+            class="w-3.5 h-3.5 transform rounded-full bg-surface-neutral shadow-lg  "
           />
         </div>
       </div>
diff --git a/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
index 8eb62e1541a..648c4ebac19 100644
--- a/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/confirmation-cancel-lifecycle-modal/__snapshots__/confirmation-cancel-lifecycle-modal.spec.tsx.snap
@@ -23,7 +23,7 @@ exports[`ConfirmationCancelLifecycleModal should match snapshot 1`] = `
       >
         <button
           aria-checked="false"
-          class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 relative top-0.5 mr-3 h-4 min-w-4"
+          class="group inline-flex shrink-0 items-center justify-center w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong relative top-0.5 mr-3 h-4 min-w-4"
           data-state="unchecked"
           role="checkbox"
           type="button"
@@ -56,14 +56,14 @@ exports[`ConfirmationCancelLifecycleModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/dockerfile-settings/__snapshots__/dockerfile-settings.spec.tsx.snap b/libs/domains/services/feature/src/lib/dockerfile-settings/__snapshots__/dockerfile-settings.spec.tsx.snap
index d5c3fab939e..57d0cb251a4 100644
--- a/libs/domains/services/feature/src/lib/dockerfile-settings/__snapshots__/dockerfile-settings.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/dockerfile-settings/__snapshots__/dockerfile-settings.spec.tsx.snap
@@ -126,7 +126,7 @@ exports[`DockerfileSettings should match snapshot with children 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input    input--label-up "
+              class="input group    input--label-up "
             >
               <div
                 class=""
@@ -149,7 +149,7 @@ exports[`DockerfileSettings should match snapshot with children 1`] = `
             </div>
           </div>
           <p
-            class="mt-0.5 px-3 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+            class="mt-0.5 px-3 text-xs text-neutral-subtle"
           >
             <span>
               Specify the location of your dockerfile. Expected format: myapp/Dockerfile
@@ -177,7 +177,7 @@ exports[`DockerfileSettings should match snapshot with children 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input     "
+              class="input group     "
             >
               <div
                 class=""
@@ -200,7 +200,7 @@ exports[`DockerfileSettings should match snapshot with children 1`] = `
             </div>
           </div>
           <p
-            class="mt-0.5 px-3 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+            class="mt-0.5 px-3 text-xs text-neutral-subtle"
           >
             Specify the target stage to build in a multi-stage Dockerfile
           </p>
@@ -342,7 +342,7 @@ exports[`DockerfileSettings should match snapshot without children 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input    input--label-up "
+              class="input group    input--label-up "
             >
               <div
                 class=""
@@ -365,7 +365,7 @@ exports[`DockerfileSettings should match snapshot without children 1`] = `
             </div>
           </div>
           <p
-            class="mt-0.5 px-3 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+            class="mt-0.5 px-3 text-xs text-neutral-subtle"
           >
             <span>
               Specify the location of your dockerfile. Expected format: myapp/Dockerfile
@@ -393,7 +393,7 @@ exports[`DockerfileSettings should match snapshot without children 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input     "
+              class="input group     "
             >
               <div
                 class=""
@@ -416,7 +416,7 @@ exports[`DockerfileSettings should match snapshot without children 1`] = `
             </div>
           </div>
           <p
-            class="mt-0.5 px-3 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+            class="mt-0.5 px-3 text-xs text-neutral-subtle"
           >
             Specify the target stage to build in a multi-stage Dockerfile
           </p>
diff --git a/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
index c0c573c6653..b925822e86e 100644
--- a/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/force-unlock-modal/__snapshots__/force-unlock-modal.spec.tsx.snap
@@ -32,7 +32,7 @@ exports[`ForceUnlockModal should match snapshot 1`] = `
       >
         <button
           aria-checked="false"
-          class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300 h-4 w-4 min-w-4"
+          class="group inline-flex shrink-0 items-center justify-center rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong h-4 w-4 min-w-4"
           data-state="unchecked"
           id="acknowledge"
           role="checkbox"
@@ -67,14 +67,14 @@ exports[`ForceUnlockModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap b/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap
index a6a2867faca..e06ddaefe8f 100644
--- a/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/general-setting/__snapshots__/general-setting.spec.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`GeneralSetting should match snapshot 1`] = `
 <body>
@@ -18,7 +18,7 @@ exports[`GeneralSetting should match snapshot 1`] = `
           >
             <div
               aria-label="input-container"
-              class="input     "
+              class="input group     "
             >
               <div
                 class=""
@@ -57,7 +57,7 @@ exports[`GeneralSetting should match snapshot 1`] = `
           Description (optional)
         </label>
         <textarea
-          class="mt-5 min-h-[52px] w-full appearance-none bg-transparent pr-3 text-sm text-neutral-400 outline-0"
+          class="mt-5 min-h-[52px] w-full appearance-none bg-transparent pr-3 text-sm text-neutral outline-0"
           id="Description (optional)"
           name="description"
         />
diff --git a/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap b/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
index 47c7f1a63bd..fe7ae795d46 100644
--- a/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`LastCommit should match snapshot 1`] = `
         data-state="closed"
       >
         <button
-          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-6 px-1.5 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral flex min-w-[81px] justify-center gap-1 rounded-r-none border-r-0 pl-1"
+          class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-6 px-1.5 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral flex min-w-[81px] justify-center gap-1 rounded-r-none border-r-0 pl-1"
           type="button"
         >
           <i
@@ -22,7 +22,7 @@ exports[`LastCommit should match snapshot 1`] = `
         </button>
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-6 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-6 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
         data-state="closed"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap b/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
index 74a93fbabba..a14a6fbdc28 100644
--- a/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`LastVersion should match snapshot 1`] = `
         </span>
       </span>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-6 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-6 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral w-7 justify-center gap-1 rounded-l-none px-1.5"
         data-state="closed"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap b/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
index 9a109986069..f738a6cee80 100644
--- a/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/pod-details/__snapshots__/pod-details.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`PodDetails should match snapshot with container based pod and with mult
         class="absolute left-[23.5px] top-8 h-[calc(100%-48px)] w-[1px] gap-2 bg-neutral-300"
       />
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
         to="/organization//project//environment//logs/1/service-logs"
         type="button"
       >
@@ -144,7 +144,7 @@ exports[`PodDetails should match snapshot with git based pod and with last_termi
         class="absolute left-[23.5px] top-8 h-[calc(100%-48px)] w-[1px] gap-2 bg-neutral-300"
       />
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
         to="/organization//project//environment//logs/1/service-logs"
         type="button"
       >
@@ -272,7 +272,7 @@ exports[`PodDetails should match snapshot with git based pod and without last_te
         class="absolute left-[23.5px] top-8 h-[calc(100%-48px)] w-[1px] gap-2 bg-neutral-300"
       />
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
         to="/organization//project//environment//logs/1/service-logs"
         type="button"
       >
@@ -369,7 +369,7 @@ exports[`PodDetails should match snapshot with pod error with 0 containers 1`] =
         class="absolute left-[23.5px] top-8 h-[calc(100%-48px)] w-[1px] gap-2 bg-neutral-300"
       />
       <a
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral absolute right-2 top-2 gap-2"
         to="/organization//project//environment//logs/1/service-logs?instance=app-z0fb41d62-5c7fdb6f5f-44wpd"
         type="button"
       >
diff --git a/libs/domains/services/feature/src/lib/pod-statuses-callout/__snapshots__/pod-statuses-callout.spec.tsx.snap b/libs/domains/services/feature/src/lib/pod-statuses-callout/__snapshots__/pod-statuses-callout.spec.tsx.snap
index 2d235f6539b..cde99e01d7d 100644
--- a/libs/domains/services/feature/src/lib/pod-statuses-callout/__snapshots__/pod-statuses-callout.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/pod-statuses-callout/__snapshots__/pod-statuses-callout.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`PodStatusesCallout should render successfully 1`] = `
         class="flex flex-row items-center gap-1.5"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
           disabled=""
           type="button"
         >
@@ -44,7 +44,7 @@ exports[`PodStatusesCallout should render successfully 1`] = `
           />
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
           type="button"
         >
           <i
diff --git a/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap b/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap
index 9e70161cf78..128e11b2693 100644
--- a/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap
@@ -115,7 +115,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               />
             </button>
             <button
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral truncate"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral truncate"
             >
               foobar
             </button>
diff --git a/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
index ef1a9f5fef6..f6e0f6d2cde 100644
--- a/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/redeploy-modal/__snapshots__/redeploy-modal.spec.tsx.snap
@@ -26,19 +26,19 @@ exports[`RedeployModal should match snapshot 1`] = `
             class="flex items-start gap-3 "
           >
             <input
-              class="relative mr-5 appearance-none font-icons  before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border-2 before:border-neutral-350 before:bg-white before:text-xs before:font-black before:leading-none before:text-white  before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-brand-500 after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-500 checked:after:opacity-100 hover:before:border-brand-500"
+              class="relative mr-5 appearance-none font-icons before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border before:border-neutral before:bg-surface-neutral before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-surface-brand-solid after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-strong checked:after:opacity-100 hover:before:border-brand-strong"
               id="redeploy"
               name="action"
               type="radio"
               value="redeploy"
             />
             <label
-              class="font-medium leading-5 text-neutral-400 dark:text-neutral-50 text-ssm"
+              class="font-medium leading-5 text-neutral text-ssm"
               for="redeploy"
             >
               Redeploy
               <p
-                class="mt-1 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+                class="mt-1 text-xs font-normal text-neutral-subtle"
               >
                 This action will not restart your service but it will allow to align again your configuration with your cluster.
               </p>
@@ -48,19 +48,19 @@ exports[`RedeployModal should match snapshot 1`] = `
             class="flex items-start gap-3 "
           >
             <input
-              class="relative mr-5 appearance-none font-icons  before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border-2 before:border-neutral-350 before:bg-white before:text-xs before:font-black before:leading-none before:text-white  before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-brand-500 after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-500 checked:after:opacity-100 hover:before:border-brand-500"
+              class="relative mr-5 appearance-none font-icons before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border before:border-neutral before:bg-surface-neutral before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-surface-brand-solid after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-strong checked:after:opacity-100 hover:before:border-brand-strong"
               id="restart"
               name="action"
               type="radio"
               value="restart"
             />
             <label
-              class="font-medium leading-5 text-neutral-400 dark:text-neutral-50 text-ssm"
+              class="font-medium leading-5 text-neutral text-ssm"
               for="restart"
             >
               Restart service
               <p
-                class="mt-1 text-xs font-normal text-neutral-350 dark:text-neutral-50"
+                class="mt-1 text-xs font-normal text-neutral-subtle"
               >
                 To restart the pods of your service.
               </p>
@@ -71,14 +71,14 @@ exports[`RedeployModal should match snapshot 1`] = `
           class="mt-6 flex justify-end gap-3"
         >
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
             data-testid="cancel-button"
             type="button"
           >
             Cancel
           </button>
           <button
-            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
             data-testid="submit-button"
             disabled=""
             type="submit"
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
index 92338590a22..0f0c028293e 100644
--- a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
@@ -73,7 +73,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
               <div>
                 <button
                   aria-checked="false"
-                  class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 w-[20px] h-[20px] rounded-full hover:border-2 hover:border-brand-500 data-[state=checked]:bg-brand-500 data-[state=checked]:border-2 data-[state=checked]:border-brand-500 disabled:hover:border disabled:bg-neutral-150 disabled:border-neutral-250 disabled:data-[state=checked]:hover:border-2 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300"
+                  class="group transition bg-surface-neutral border border-neutral w-[20px] h-[20px] rounded-full hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid data-[state=checked]:border-0 hover:data-[state=checked]:bg-surface-brand-solidHover disabled:cursor-not-allowed disabled:hover:border disabled:bg-surface-neutral-component disabled:border-neutral-component disabled:data-[state=checked]:border-0 disabled:data-[state=checked]:bg-surface-brand-component"
                   data-radix-collection-item=""
                   data-state="unchecked"
                   role="radio"
@@ -175,7 +175,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
               <div>
                 <button
                   aria-checked="true"
-                  class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 w-[20px] h-[20px] rounded-full hover:border-2 hover:border-brand-500 data-[state=checked]:bg-brand-500 data-[state=checked]:border-2 data-[state=checked]:border-brand-500 disabled:hover:border disabled:bg-neutral-150 disabled:border-neutral-250 disabled:data-[state=checked]:hover:border-2 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300"
+                  class="group transition bg-surface-neutral border border-neutral w-[20px] h-[20px] rounded-full hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid data-[state=checked]:border-0 hover:data-[state=checked]:bg-surface-brand-solidHover disabled:cursor-not-allowed disabled:hover:border disabled:bg-surface-neutral-component disabled:border-neutral-component disabled:data-[state=checked]:border-0 disabled:data-[state=checked]:bg-surface-brand-component"
                   data-disabled=""
                   data-radix-collection-item=""
                   data-state="checked"
@@ -192,7 +192,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="fa-regular fa-check text-xs text-white"
+                      class="fa-regular fa-check text-xs text-neutralInvert"
                     />
                   </span>
                 </button>
@@ -277,12 +277,12 @@ exports[`SelectCommitModal should match snapshot 1`] = `
       class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-white p-5"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
         disabled=""
       >
         Deploy
diff --git a/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
index c13da37c7cb..23664b23cff 100644
--- a/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-version-modal/__snapshots__/select-version-modal.spec.tsx.snap
@@ -136,12 +136,12 @@ exports[`SelectVersionModal should match snapshot 1`] = `
       class="flex justify-end gap-3"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
         disabled=""
       >
         Deploy
@@ -280,12 +280,12 @@ exports[`SelectVersionModal should match snapshot with helm version 1`] = `
       class="flex justify-end gap-3"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
       >
         Cancel
       </button>
       <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       >
         Deploy
       </button>
diff --git a/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
index ce1ae6eb044..39664332824 100644
--- a/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-clone-modal/__snapshots__/service-clone-modal.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`ServiceCloneModal should match snapshot 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
@@ -74,7 +74,7 @@ exports[`ServiceCloneModal should match snapshot 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input    input--label-up "
+            class="input group    input--label-up "
           >
             <div
               class=""
@@ -315,14 +315,14 @@ exports[`ServiceCloneModal should match snapshot 1`] = `
         class="mt-6 flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           data-testid="cancel-button"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="submit-button"
           disabled=""
           type="submit"
diff --git a/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap
index d87240bd7b5..bc38e52df2f 100644
--- a/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap
@@ -1,170 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`ServiceLinksPopover Gateway API / Envoy stack separator should show divider and label when both nginx and gateway-api links exist 1`] = `
-<body
-  data-scroll-locked="1"
-  style="pointer-events: none;"
->
-  <span
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-radix-focus-guard=""
-    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
-    tabindex="0"
-  />
-  <button
-    aria-controls="radix-:rk:"
-    aria-expanded="true"
-    aria-haspopup="dialog"
-    aria-hidden="true"
-    class=""
-    data-aria-hidden="true"
-    data-state="open"
-    type="button"
-  >
-    links
-  </button>
-  <div
-    data-radix-popper-content-wrapper=""
-    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: -20px; --radix-popper-available-height: -18px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 100% 0px;"
-  >
-    <div
-      class="rounded border bg-surface-neutral shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded max-w-[280px] border-transparent p-2 text-sm text-neutral-350"
-      data-align="end"
-      data-side="bottom"
-      data-state="open"
-      id="radix-:rk:"
-      role="dialog"
-      style="--radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
-      tabindex="-1"
-    >
-      <div
-        class="flex items-center justify-between p-2"
-      >
-        <p
-          class="font-medium text-neutral-350 dark:text-neutral-250"
-        >
-          2
-           
-          links
-           attached
-        </p>
-        <a
-          class="cursor-pointer transition duration-100 font-medium inline-flex items-center gap-1 hover:brightness-75 text-surface-brand-solid text-ssm"
-          to="/organization/:organizationId/project/:projectId/environment/:environmentId/application/:applicationId/settings/domain"
-          type="button"
-        >
-          Customize
-          <i
-            aria-hidden="true"
-            class="fa-regular fa-circle-plus text-xs"
-          />
-        </a>
-      </div>
-      <ul
-        class="max-h-96 overflow-y-auto"
-      >
-        <li
-          class="flex p-2"
-        >
-          <span
-            class="relative cursor-pointer transition after:absolute after:inset-[-4px] after:block after:content-[''] mr-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400"
-            data-state="closed"
-            data-testid="copy-container"
-          >
-            <span
-              class="icon-solid-copy shrink-0 "
-              role="img"
-            />
-          </span>
-          <a
-            class="flex w-full items-center justify-between text-neutral-400 transition hover:text-brand-500 dark:text-neutral-50 dark:hover:text-brand-400"
-            href="https://nginx.qovery.com"
-            rel="noreferrer"
-            target="_blank"
-          >
-            <div
-              class="mr-2 text-ssm font-medium"
-            >
-              https://nginx.qovery.com
-            </div>
-            <div
-              class="text-xs text-neutral-350 dark:text-neutral-250"
-            >
-              8080
-            </div>
-          </a>
-        </li>
-        <li
-          class="my-2 border-t border-neutral-200 dark:border-neutral-600"
-        />
-        <li
-          class="flex items-center gap-1 px-2 pb-1 text-xs font-medium text-neutral-350 dark:text-neutral-250"
-        >
-          <span>
-            Gateway API / Envoy stack
-          </span>
-          <span
-            class="inline-flex cursor-help"
-            data-state="closed"
-          >
-            <i
-              aria-hidden="true"
-              class="fa-regular fa-circle-info text-neutral-350 hover:text-neutral-400 dark:text-neutral-250 dark:hover:text-neutral-200"
-            />
-          </span>
-        </li>
-        <li
-          class="flex p-2"
-        >
-          <span
-            class="relative cursor-pointer transition after:absolute after:inset-[-4px] after:block after:content-[''] mr-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400"
-            data-state="closed"
-            data-testid="copy-container"
-          >
-            <span
-              class="icon-solid-copy shrink-0 "
-              role="img"
-            />
-          </span>
-          <a
-            class="flex w-full items-center justify-between text-neutral-400 transition hover:text-brand-500 dark:text-neutral-50 dark:hover:text-brand-400"
-            href="https://gateway-api.qovery.com"
-            rel="noreferrer"
-            target="_blank"
-          >
-            <div
-              class="mr-2 text-ssm font-medium"
-            >
-              <span
-                class=""
-                data-state="closed"
-                data-testid="truncate-text"
-              >
-                https://gateway-api.qovery
-                ...
-              </span>
-            </div>
-            <div
-              class="text-xs text-neutral-350 dark:text-neutral-250"
-            >
-              8081
-            </div>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <span
-    aria-hidden="true"
-    data-aria-hidden="true"
-    data-radix-focus-guard=""
-    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
-    tabindex="0"
-  />
-</body>
-`;
-
 exports[`ServiceLinksPopover should match snapshot 1`] = `
 <body
   data-scroll-locked="1"
@@ -215,8 +50,8 @@ exports[`ServiceLinksPopover should match snapshot 1`] = `
            attached
         </p>
         <a
-          class="cursor-pointer transition duration-100 font-medium inline-flex items-center gap-1 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400 text-ssm"
-          href="/organization/:organizationId/project/:projectId/environment/:environmentId/application/:applicationId/settings/domain"
+          class="cursor-pointer transition duration-100 font-medium inline-flex items-center gap-1 hover:brightness-75 text-surface-brand-solid text-ssm"
+          to="/organization/:organizationId/project/:projectId/environment/:environmentId/application/:applicationId/settings/domain"
           type="button"
         >
           Customize
diff --git a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
index 3e09867f613..de49ca69f41 100644
--- a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap
@@ -30,7 +30,7 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
               class="flex gap-3"
             >
               <button
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center gap-2"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center gap-2"
               >
                 Deploy selected 
                 <i
@@ -41,7 +41,7 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
               <button
                 aria-expanded="false"
                 aria-haspopup="menu"
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center gap-2"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center gap-2"
                 data-state="closed"
                 id="radix-:rf:"
                 type="button"
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
index 148171bf969..ae9662cc3bd 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`InputSearch should match snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutralInvert hover:bg-surface-neutralInvert-component text-neutralInvert hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutralInvert hover:bg-surface-neutralInvert-component text-neutralInvert hidden"
       >
         my-value
         <span>
@@ -69,7 +69,7 @@ exports[`InputSearch should match with snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-7 px-2 rounded bg-neutral-500 active:bg-neutral-600 hover:bg-neutral-400 text-white disabled:text-neutral-300 disabled:bg-neutral-100 hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutralInvert hover:bg-surface-neutralInvert-component text-neutralInvert hidden"
       >
         my-value
         <span>
diff --git a/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap b/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
index ecdf9b9a12a..9f71467361c 100644
--- a/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`DropdownVariable should render dropdown content when clicked 1`] = `
     class="max-h-[200px] overflow-y-auto"
   >
     <div
-      class="text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-2 data-[highlighted]:text-brand-11 hover:bg-brand-2 hover:text-brand-11 cursor-pointer text-neutral flex h-[52px] items-start justify-between gap-1 px-2 py-1.5"
+      class="text-sm font-medium rounded-sm outline-none select-none data-[highlighted]:bg-brand-2 data-[highlighted]:text-brand-11 hover:bg-brand-2 hover:text-brand-11 cursor-pointer text-neutral flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
       data-orientation="vertical"
       data-radix-collection-item=""
       role="menuitem"
diff --git a/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap b/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
index 1dcf4f1f902..0cededf27d9 100644
--- a/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`FieldVariableSuggestion should render dropdown content when clicked 1`]
     class="max-h-[200px] overflow-y-auto"
   >
     <div
-      class="text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-2 data-[highlighted]:text-brand-11 hover:bg-brand-2 hover:text-brand-11 cursor-pointer text-neutral flex h-[52px] items-start justify-between gap-1 px-2 py-1.5"
+      class="text-sm font-medium rounded-sm outline-none select-none data-[highlighted]:bg-brand-2 data-[highlighted]:text-brand-11 hover:bg-brand-2 hover:text-brand-11 cursor-pointer text-neutral flex h-[52px] items-start justify-between gap-1 px-2 py-1.5"
       data-orientation="vertical"
       data-radix-collection-item=""
       role="menuitem"
diff --git a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
index 9cb808fb766..0f4d973bea7 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -70,7 +70,7 @@ exports[`VariableList should match snapshot 1`] = `
                 aria-controls="radix-:r26:"
                 aria-expanded="false"
                 aria-haspopup="dialog"
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
                 data-state="closed"
                 type="button"
               >
@@ -93,7 +93,7 @@ exports[`VariableList should match snapshot 1`] = `
                 aria-controls="radix-:r29:"
                 aria-expanded="false"
                 aria-haspopup="dialog"
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
                 data-state="closed"
                 type="button"
               >
@@ -116,7 +116,7 @@ exports[`VariableList should match snapshot 1`] = `
                 aria-controls="radix-:r2c:"
                 aria-expanded="false"
                 aria-haspopup="dialog"
-                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
+                class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1 whitespace-nowrap text-xs"
                 data-state="closed"
                 type="button"
               >
@@ -182,7 +182,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r2e:"
               type="button"
@@ -266,7 +266,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -321,7 +321,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r2k:"
               type="button"
@@ -375,7 +375,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -430,7 +430,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r2o:"
               type="button"
@@ -484,7 +484,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -528,7 +528,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r2s:"
               type="button"
@@ -690,7 +690,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -729,7 +729,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r30:"
               type="button"
@@ -806,7 +806,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -845,7 +845,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r36:"
               type="button"
@@ -1013,7 +1013,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -1102,7 +1102,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r3c:"
               type="button"
@@ -1270,7 +1270,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -1318,7 +1318,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r3i:"
               type="button"
@@ -1395,7 +1395,7 @@ exports[`VariableList should match snapshot 1`] = `
             >
               <button
                 aria-checked="false"
-                class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-brand-500 dark:hover:border-brand-500 data-[state=checked]:bg-brand-500 dark:data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 dark:data-[state=checked]:border-brand-500 data-[state=indeterminate]:border-brand-500 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300 disabled:data-[state=indeterminate]:border-brand-300"
+                class="group inline-flex shrink-0 items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid hover:data-[state=checked]:bg-surface-brand-solidHover data-[state=checked]:border-0 data-[state=indeterminate]:border-brand-strong"
                 data-state="unchecked"
                 role="checkbox"
                 type="button"
@@ -1450,7 +1450,7 @@ exports[`VariableList should match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="actions"
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               data-state="closed"
               id="radix-:r3o:"
               type="button"
@@ -1521,7 +1521,7 @@ exports[`VariableList should match snapshot 1`] = `
               class="flex gap-3"
             >
               <button
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-red-500 text-sm h-8 px-2.5 rounded-md bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted items-center gap-2"
+                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-red-500 text-sm h-8 px-2.5 rounded-md bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted items-center gap-2"
                 data-state="closed"
                 disabled=""
               >
diff --git a/libs/pages/cluster/src/lib/ui/page-settings-network/gcp-existing-vpc/__snapshots__/gcp-existing-vpc.spec.tsx.snap b/libs/pages/cluster/src/lib/ui/page-settings-network/gcp-existing-vpc/__snapshots__/gcp-existing-vpc.spec.tsx.snap
index e7a213751e5..ae3a932acde 100644
--- a/libs/pages/cluster/src/lib/ui/page-settings-network/gcp-existing-vpc/__snapshots__/gcp-existing-vpc.spec.tsx.snap
+++ b/libs/pages/cluster/src/lib/ui/page-settings-network/gcp-existing-vpc/__snapshots__/gcp-existing-vpc.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`GcpExistingVPC should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
@@ -67,7 +67,7 @@ exports[`GcpExistingVPC should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
@@ -100,7 +100,7 @@ exports[`GcpExistingVPC should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
@@ -133,7 +133,7 @@ exports[`GcpExistingVPC should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
@@ -166,7 +166,7 @@ exports[`GcpExistingVPC should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
@@ -199,7 +199,7 @@ exports[`GcpExistingVPC should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input input--disabled input--disabled !border-neutral-250  input--label-up "
+            class="input group input--disabled input--disabled !border-neutral  input--label-up "
           >
             <div
               class="pointer-events-none"
diff --git a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/gcp-vpc-feature/__snapshots__/gcp-vpc-feature.spec.tsx.snap b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/gcp-vpc-feature/__snapshots__/gcp-vpc-feature.spec.tsx.snap
index 090aa64af8b..451ed973b67 100644
--- a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/gcp-vpc-feature/__snapshots__/gcp-vpc-feature.spec.tsx.snap
+++ b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/gcp-vpc-feature/__snapshots__/gcp-vpc-feature.spec.tsx.snap
@@ -38,7 +38,7 @@ exports[`ButtonPopoverSubnets should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
@@ -70,7 +70,7 @@ exports[`ButtonPopoverSubnets should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
@@ -115,7 +115,7 @@ exports[`ButtonPopoverSubnets should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
@@ -147,7 +147,7 @@ exports[`ButtonPopoverSubnets should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
@@ -179,7 +179,7 @@ exports[`ButtonPopoverSubnets should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
@@ -211,7 +211,7 @@ exports[`ButtonPopoverSubnets should match snapshots 1`] = `
         >
           <div
             aria-label="input-container"
-            class="input     "
+            class="input group     "
           >
             <div
               class=""
diff --git a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap
index 74e141e3323..3515437dc7d 100644
--- a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap
+++ b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap
@@ -60,13 +60,13 @@ exports[`StepKubeconfig should match snapshot 1`] = `
         class="flex justify-between"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
           type="button"
         >
           Back
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="button-submit"
           disabled=""
           type="submit"
@@ -130,7 +130,7 @@ exports[`StepKubeconfig should match snapshot with data 1`] = `
           </div>
           <div>
             <button
-              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component text-neutral"
               type="button"
             >
               <i
@@ -145,13 +145,13 @@ exports[`StepKubeconfig should match snapshot with data 1`] = `
         class="flex justify-between"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
           type="button"
         >
           Back
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           data-testid="button-submit"
           disabled=""
           type="submit"
diff --git a/libs/pages/settings/src/lib/feature/page-organization-labels-annotations-feature/__snapshots__/page-organization-labels-annotations-feature.spec.tsx.snap b/libs/pages/settings/src/lib/feature/page-organization-labels-annotations-feature/__snapshots__/page-organization-labels-annotations-feature.spec.tsx.snap
index a1a93c199d3..5b92d85cad2 100644
--- a/libs/pages/settings/src/lib/feature/page-organization-labels-annotations-feature/__snapshots__/page-organization-labels-annotations-feature.spec.tsx.snap
+++ b/libs/pages/settings/src/lib/feature/page-organization-labels-annotations-feature/__snapshots__/page-organization-labels-annotations-feature.spec.tsx.snap
@@ -26,7 +26,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
               Define and manage the labels & annotations to be used within your organization.
             </p>
             <button
-              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-xs h-6 px-1.5 rounded bg-surface-brand-subtle border border-brand-subtle text-brand hover:bg-surface-brand-component w-fit items-center gap-1"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-xs h-6 px-1.5 rounded bg-surface-brand-subtle border border-brand-subtle text-brand hover:bg-surface-brand-component w-fit items-center gap-1"
             >
               <i
                 aria-hidden="true"
@@ -40,7 +40,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
           <button
             aria-expanded="false"
             aria-haspopup="menu"
-            class="inline-flex items-center font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert shrink-0 gap-2"
+            class="inline-flex items-center font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert shrink-0 gap-2"
             data-state="closed"
             id="radix-:r6:"
             type="button"
@@ -108,7 +108,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
                   class="flex gap-2"
                 >
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
                   >
                     <span
                       class="absolute -right-1 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-brand-500 text-3xs font-bold leading-[0] text-white"
@@ -119,7 +119,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
                     />
                   </button>
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
                   >
                     <i
                       aria-hidden="true"
@@ -127,7 +127,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
                     />
                   </button>
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
                     data-state="closed"
                     disabled=""
                   >
@@ -198,7 +198,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
                   class="flex gap-2"
                 >
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral relative mr-2"
                   >
                     <span
                       class="absolute -right-1 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-brand-500 text-3xs font-bold leading-[0] text-white"
@@ -209,7 +209,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
                     />
                   </button>
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
                   >
                     <i
                       aria-hidden="true"
@@ -217,7 +217,7 @@ exports[`PageOrganizationLabelsAnnotationsFeature should match snapshot 1`] = `
                     />
                   </button>
                   <button
-                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+                    class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
                     data-state="closed"
                     disabled=""
                   >
diff --git a/libs/shared/console-shared/src/lib/cluster-settings/ui/cluster-resources-settings/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap b/libs/shared/console-shared/src/lib/cluster-settings/ui/cluster-resources-settings/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap
new file mode 100644
index 00000000000..d09a91c3f0f
--- /dev/null
+++ b/libs/shared/console-shared/src/lib/cluster-settings/ui/cluster-resources-settings/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap
@@ -0,0 +1,421 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`ButtonPopoverSubnets should match snapshot 1`] = `
+<body>
+  <span
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  <div
+    aria-controls="radix-:rf:"
+    aria-expanded="true"
+    aria-haspopup="dialog"
+    data-state="open"
+    type="button"
+  >
+    <button>
+      children
+    </button>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: -20px; --radix-popper-available-height: -18px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
+  >
+    <div
+      class="rounded border border-neutral bg-surface-neutral shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded relative divide-y p-0 text-sm text-neutral data-[state=open]:block data-[state=closed]:hidden"
+      data-align="start"
+      data-side="bottom"
+      data-state="open"
+      id="radix-:rf:"
+      role="dialog"
+      style="width: 648px; --radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height);"
+      tabindex="-1"
+    >
+      <div
+        class="flex flex-col gap-3 p-4"
+      >
+        <h6
+          class="flex items-center gap-1.5 font-medium text-neutral"
+        >
+          EKS private subnet IDs
+          <span
+            class="text-sm0"
+            data-state="closed"
+          >
+            <i
+              aria-hidden="true"
+              class="fa-regular fa-circle-info "
+            />
+          </span>
+        </h6>
+        <div
+          class="flex flex-row gap-x-3 p-3 border rounded text-sm border-warning-component bg-surface-warning-subtle text-warning"
+          data-accent-color="yellow"
+        >
+          <div
+            class="-order-2 text-lg leading-6"
+          >
+            <i
+              aria-hidden="true"
+              class="fa-regular fa-exclamation-circle "
+            />
+          </div>
+          <div
+            class="-order-1 mr-auto gap-x-3 text-neutral"
+          >
+            <span
+              class="block font-medium leading-6"
+            >
+              These subnets have to be private and connected to internet through a NAT Gateway.
+            </span>
+          </div>
+        </div>
+        <ul
+          class="flex flex-col gap-3"
+        >
+          <li
+            class="grid grid-cols-[6fr_6fr_6fr_1fr] items-center gap-x-2 text-sm font-medium text-neutral-subtle"
+          >
+            <span>
+              IDs zone A
+            </span>
+            <span>
+              IDs zone B
+            </span>
+            <span>
+              IDs zone C
+            </span>
+            <span />
+          </li>
+          <li
+            class="grid grid-cols-[6fr_6fr_6fr_1fr] items-center gap-x-2"
+          >
+            <div
+              class="w-full"
+              data-testid="input-small-wrapper"
+            >
+              <div
+                class="input input--small flex-grow"
+                data-testid="input"
+              >
+                <label
+                  class="hidden"
+                />
+                <input
+                  class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
+                  data-testid="input-value"
+                  name="aws_existing_vpc.eks_subnets.0.A"
+                  spellcheck="false"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="w-full"
+              data-testid="input-small-wrapper"
+            >
+              <div
+                class="input input--small flex-grow"
+                data-testid="input"
+              >
+                <label
+                  class="hidden"
+                />
+                <input
+                  class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
+                  data-testid="input-value"
+                  name="aws_existing_vpc.eks_subnets.0.B"
+                  spellcheck="false"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="w-full"
+              data-testid="input-small-wrapper"
+            >
+              <div
+                class="input input--small flex-grow"
+                data-testid="input"
+              >
+                <label
+                  class="hidden"
+                />
+                <input
+                  class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
+                  data-testid="input-value"
+                  name="aws_existing_vpc.eks_subnets.0.C"
+                  spellcheck="false"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <button
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle w-full"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="fa-regular fa-trash-can text-base"
+              />
+            </button>
+          </li>
+        </ul>
+        <button
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle self-end"
+          type="button"
+        >
+          Add subnets
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-plus ml-2 text-base"
+          />
+        </button>
+      </div>
+      <div
+        class="flex flex-col gap-4 p-4 text-right text-base"
+      >
+        <div>
+          <button
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle mr-1"
+            type="button"
+          >
+            Cancel
+          </button>
+          <span
+            type="button"
+          >
+            <button
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+              data-state="closed"
+              disabled=""
+              type="button"
+            >
+              Confirm
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
+
+exports[`ButtonPopoverSubnets should match snapshot with invalid state 1`] = `
+<body>
+  <span
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  <div
+    aria-controls="radix-:ro:"
+    aria-expanded="true"
+    aria-haspopup="dialog"
+    data-state="open"
+    type="button"
+  >
+    <button>
+      children
+    </button>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: -20px; --radix-popper-available-height: -18px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
+  >
+    <div
+      class="rounded border border-neutral bg-surface-neutral shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded relative divide-y p-0 text-sm text-neutral data-[state=open]:block data-[state=closed]:hidden"
+      data-align="start"
+      data-side="bottom"
+      data-state="open"
+      id="radix-:ro:"
+      role="dialog"
+      style="width: 648px; --radix-popover-content-transform-origin: var(--radix-popper-transform-origin); --radix-popover-content-available-width: var(--radix-popper-available-width); --radix-popover-content-available-height: var(--radix-popper-available-height); --radix-popover-trigger-width: var(--radix-popper-anchor-width); --radix-popover-trigger-height: var(--radix-popper-anchor-height);"
+      tabindex="-1"
+    >
+      <div
+        class="flex flex-col gap-3 p-4"
+      >
+        <h6
+          class="flex items-center gap-1.5 font-medium text-neutral"
+        >
+          EKS private subnet IDs
+          <span
+            class="text-sm0"
+            data-state="closed"
+          >
+            <i
+              aria-hidden="true"
+              class="fa-regular fa-circle-info "
+            />
+          </span>
+        </h6>
+        <div
+          class="flex flex-row gap-x-3 p-3 border rounded text-sm border-warning-component bg-surface-warning-subtle text-warning"
+          data-accent-color="yellow"
+        >
+          <div
+            class="-order-2 text-lg leading-6"
+          >
+            <i
+              aria-hidden="true"
+              class="fa-regular fa-exclamation-circle "
+            />
+          </div>
+          <div
+            class="-order-1 mr-auto gap-x-3 text-neutral"
+          >
+            <span
+              class="block font-medium leading-6"
+            >
+              These subnets have to be private and connected to internet through a NAT Gateway.
+            </span>
+          </div>
+        </div>
+        <ul
+          class="flex flex-col gap-3"
+        >
+          <li
+            class="grid grid-cols-[6fr_6fr_6fr_1fr] items-center gap-x-2 text-sm font-medium text-neutral-subtle"
+          >
+            <span>
+              IDs zone A
+            </span>
+            <span>
+              IDs zone B
+            </span>
+            <span>
+              IDs zone C
+            </span>
+            <span />
+          </li>
+          <li
+            class="grid grid-cols-[6fr_6fr_6fr_1fr] items-center gap-x-2"
+          >
+            <div
+              class="w-full"
+              data-testid="input-small-wrapper"
+            >
+              <div
+                class="input input--small flex-grow"
+                data-testid="input"
+              >
+                <label
+                  class="hidden"
+                />
+                <input
+                  class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
+                  data-testid="input-value"
+                  name="aws_existing_vpc.eks_subnets.0.A"
+                  spellcheck="false"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="w-full"
+              data-testid="input-small-wrapper"
+            >
+              <div
+                class="input input--small flex-grow"
+                data-testid="input"
+              >
+                <label
+                  class="hidden"
+                />
+                <input
+                  class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
+                  data-testid="input-value"
+                  name="aws_existing_vpc.eks_subnets.0.B"
+                  spellcheck="false"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="w-full"
+              data-testid="input-small-wrapper"
+            >
+              <div
+                class="input input--small flex-grow"
+                data-testid="input"
+              >
+                <label
+                  class="hidden"
+                />
+                <input
+                  class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
+                  data-testid="input-value"
+                  name="aws_existing_vpc.eks_subnets.0.C"
+                  spellcheck="false"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <button
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle w-full"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="fa-regular fa-trash-can text-base"
+              />
+            </button>
+          </li>
+        </ul>
+        <button
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle self-end"
+          type="button"
+        >
+          Add subnets
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-plus ml-2 text-base"
+          />
+        </button>
+      </div>
+      <div
+        class="flex flex-col gap-4 p-4 text-right text-base"
+      >
+        <div>
+          <button
+            class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-8 px-2.5 rounded-md text-neutral-subtle hover:bg-surface-neutral-subtle mr-1"
+            type="button"
+          >
+            Cancel
+          </button>
+          <span
+            type="button"
+          >
+            <button
+              class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+              data-state="closed"
+              disabled=""
+              type="button"
+            >
+              Confirm
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/__snapshots__/devops-copilot-button.spec.tsx.snap b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/__snapshots__/devops-copilot-button.spec.tsx.snap
index 18e2a7efcd0..76840decdf8 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/__snapshots__/devops-copilot-button.spec.tsx.snap
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-button/__snapshots__/devops-copilot-button.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`DevopsCopilotButton should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral ml-4 mr-4 h-[38px] gap-3 px-3 dark:ml-3 dark:h-9"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral ml-4 mr-4 h-[38px] gap-3 px-3 dark:ml-3 dark:h-9"
       type="button"
     >
       <span
diff --git a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
index 942663bac2c..77b93c20b5d 100644
--- a/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
+++ b/libs/shared/devops-copilot/feature/src/lib/devops-copilot-panel/input/__snapshots__/input.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`Input should match snapshot when loading 1`] = `
         class="flex items-end justify-end p-2"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs px-2 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-500 transition-colors dark:text-white"
+          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs px-2 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-500 transition-colors dark:text-white"
           data-state="closed"
           type="button"
         >
@@ -47,7 +47,7 @@ exports[`Input should match snapshot when not loading 1`] = `
         class="flex items-end justify-end p-2"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs px-2 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-500 transition-colors dark:text-white"
+          class="inline-flex items-center shrink-0 font-medium active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs px-2 rounded-full bg-surface-neutral-component hover:bg-surface-neutral-componentHover group relative bottom-0.5 h-7 w-7 min-w-7 justify-center text-neutral-500 transition-colors dark:text-white"
           data-state="closed"
           type="button"
         >
diff --git a/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap b/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
index 6b4c6f40151..9eb66f8d375 100644
--- a/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/button-primitive/__snapshots__/button-primitive.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`ButtonPrimitive should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       type="button"
     >
       Foobar
diff --git a/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap b/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
index 11459e673cb..81707738b25 100644
--- a/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/button/__snapshots__/button.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button should match snapshot 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
       type="button"
     >
       Foobar
@@ -17,7 +17,7 @@ exports[`Button should match snapshot with loading 1`] = `
 <body>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component pointer-events-none relative text-transparent"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-xs h-7 px-2 rounded bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component pointer-events-none relative text-transparent"
       type="button"
     >
       <div
diff --git a/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap b/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
index 74718db45ef..33e863b2cc6 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/inputs/input-filter/__snapshots__/input-filter.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`InputFilter should match input filter with loading 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       <div
@@ -24,7 +24,7 @@ exports[`InputFilter should match input filter with value 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral"
       type="button"
     >
       Option 1
@@ -47,7 +47,7 @@ exports[`InputFilter should match input filter without value 1`] = `
 <div>
   <div>
     <button
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-2"
+      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-2"
       type="button"
     >
       Filter
diff --git a/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap b/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
index e0b34048713..acc2dd73731 100644
--- a/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/modals/modal-confirmation/__snapshots__/modal-confirmation.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`ModalConfirmation should match confirm mode with description 1`] = `
             class="hidden"
           />
           <input
-            class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+            class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
             data-testid="input-value"
             name="name"
             placeholder="Enter the current name"
@@ -54,13 +54,13 @@ exports[`ModalConfirmation should match confirm mode with description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="submit"
         >
           Confirm
@@ -111,7 +111,7 @@ exports[`ModalConfirmation should match delete mode with description 1`] = `
             class="hidden"
           />
           <input
-            class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+            class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
             data-testid="input-value"
             name="name"
             placeholder="Enter the current name"
@@ -125,13 +125,13 @@ exports[`ModalConfirmation should match delete mode with description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="submit"
         >
           Confirm
@@ -181,7 +181,7 @@ exports[`ModalConfirmation should match delete mode without description 1`] = `
             class="hidden"
           />
           <input
-            class="absolute left-0 top-0 h-full w-full rounded px-2 text-sm text-neutral-400 placeholder:text-neutral-350 dark:bg-transparent dark:text-neutral-50 dark:placeholder:text-neutral-350"
+            class="absolute left-0 top-0 h-full w-full rounded bg-transparent px-2 text-sm text-neutral placeholder:text-neutral-subtle"
             data-testid="input-value"
             name="name"
             placeholder="Enter the current name"
@@ -195,13 +195,13 @@ exports[`ModalConfirmation should match delete mode without description 1`] = `
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
           type="submit"
         >
           Confirm
diff --git a/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap b/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
index 0317d5027fa..0f39b69405d 100644
--- a/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
+++ b/libs/shared/ui/src/lib/components/modals/modal-multi-confirmation/__snapshots__/modal-multi-confirmation.spec.tsx.snap
@@ -51,7 +51,7 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
               >
                 <button
                   aria-checked="false"
-                  class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-red-500 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 data-[state=indeterminate]:border-red-500 disabled:data-[state=checked]:border-red-300 disabled:data-[state=checked]:bg-red-300 disabled:data-[state=indeterminate]:border-red-300 mt-0.5 shrink-0"
+                  class="group inline-flex items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-negative-strong data-[state=checked]:bg-surface-negative-solid hover:data-[state=checked]:bg-surface-negative-solidHover data-[state=checked]:border-negative-strong data-[state=indeterminate]:border-negative-strong mt-0.5 shrink-0"
                   data-state="unchecked"
                   id="one"
                   role="checkbox"
@@ -83,7 +83,7 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
               >
                 <button
                   aria-checked="false"
-                  class="group transition bg-neutral-100 dark:bg-neutral-500 border border-neutral-300 dark:border-neutral-350 rounded-sm w-[18px] h-[18px] hover:border-2 data-[state=checked]:border data-[state=indeterminate]:border-2 disabled:border disabled:border-neutral-250 hover:border-red-500 data-[state=checked]:bg-red-500 data-[state=checked]:border-red-500 data-[state=indeterminate]:border-red-500 disabled:data-[state=checked]:border-red-300 disabled:data-[state=checked]:bg-red-300 disabled:data-[state=indeterminate]:border-red-300 mt-0.5 shrink-0"
+                  class="group inline-flex items-center justify-center h-4 w-4 rounded border border-neutral bg-surface-neutral transition-colors disabled:cursor-not-allowed disabled:border-neutral disabled:bg-surface-neutral-subtle disabled:hover:border-neutral disabled:data-[state=checked]:bg-surface-neutral-subtle disabled:data-[state=checked]:border-neutral disabled:data-[state=indeterminate]:border-neutral hover:border-negative-strong data-[state=checked]:bg-surface-negative-solid hover:data-[state=checked]:bg-surface-negative-solidHover data-[state=checked]:border-negative-strong data-[state=indeterminate]:border-negative-strong mt-0.5 shrink-0"
                   data-state="unchecked"
                   id="two"
                   role="checkbox"
@@ -112,13 +112,13 @@ exports[`ModalMultiConfirmation should match delete mode without description 1`]
         class="flex justify-end gap-3"
       >
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand text-sm h-10 px-3 rounded-lg text-neutral-subtle hover:bg-surface-neutral-subtle"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 outline-red-500 text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-red-500 text-sm h-10 px-3 rounded-lg bg-surface-negative-solid hover:bg-surface-negative-solidHover border border-negative-component text-neutral-contrasted"
           disabled=""
           type="submit"
         >

From 924784c7fb5728cc13c839129f69163e7d46686c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Mon, 19 Jan 2026 15:15:04 +0100
Subject: [PATCH 9/9] refactor(components): format check

---
 .../src/lib/components/checkbox/checkbox.tsx  |  5 +----
 .../input-credit-card/input-credit-card.tsx   |  1 -
 .../inputs/input-file/input-file.tsx          |  2 +-
 .../input-radio-box/input-radio-box.tsx       |  4 +++-
 .../inputs/input-radio/input-radio.tsx        |  5 +----
 .../inputs/input-select/input-select.tsx      |  2 +-
 .../radio-group/radio-group.stories.tsx       | 20 +++++++++----------
 .../ui/src/lib/styles/components/select.scss  |  2 +-
 8 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx b/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
index fb37230b8fd..02cf48808d4 100644
--- a/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
+++ b/libs/shared/ui/src/lib/components/checkbox/checkbox.tsx
@@ -91,10 +91,7 @@ const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxP
           {props.checked === 'indeterminate' ? (
             <span className={indeterminateVariants({ color })} />
           ) : (
-            <Icon
-              iconName="check"
-              className="text-xs text-neutralInvert group-disabled:text-neutral-disabled"
-            />
+            <Icon iconName="check" className="text-xs text-neutralInvert group-disabled:text-neutral-disabled" />
           )}
         </span>
       </CheckboxPrimitive.Indicator>
diff --git a/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx b/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx
index 33084874470..fd484f84996 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-credit-card/input-credit-card.tsx
@@ -79,7 +79,6 @@ export function InputCreditCard(props: InputCreditCardProps) {
 
   const inputActions = hasFocus ? 'input--focused' : disabled ? 'input--disabled' : ''
 
-
   const isDisabled = disabled ? 'input--disabled !border-neutral' : ''
 
   useEffect(() => {
diff --git a/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx b/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx
index 280272609e9..e4db1e04937 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-file/input-file.tsx
@@ -82,7 +82,7 @@ export function InputFile(props: InputFileProps) {
         </>
       ) : (
         <svg
-          className="relative input-file-icon"
+          className="input-file-icon relative"
           xmlns="http://www.w3.org/2000/svg"
           width="17"
           height="14"
diff --git a/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx b/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx
index a74eca751cd..b90237e3b3a 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-radio-box/input-radio-box.tsx
@@ -18,7 +18,9 @@ export function InputRadioBox(props: InputRadioBoxProps) {
       data-testid="input-radio-box"
       onClick={() => onChange(value)}
       className={`mb-2 rounded border p-4 transition-all ${
-        fieldValue === value ? 'border-brand-strong bg-surface-brand-subtle' : 'border-neutral bg-surface-neutral-subtle'
+        fieldValue === value
+          ? 'border-brand-strong bg-surface-brand-subtle'
+          : 'border-neutral bg-surface-neutral-subtle'
       }`}
     >
       <InputRadio big name={name} value={value} label={label} onChange={onChange} formValue={fieldValue} />
diff --git a/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx b/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx
index 329c020db88..dc3d1fcf683 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-radio/input-radio.tsx
@@ -59,10 +59,7 @@ export function InputRadio(props: InputRadioProps) {
         onChange={(e) => inputChange(e.currentTarget.checked, e.currentTarget.value, e)}
         className="relative mr-5 appearance-none font-icons before:absolute before:left-[1px] before:top-[1px] before:flex before:h-[1.125rem] before:w-[1.125rem] before:items-center before:justify-center before:rounded-full before:border before:border-neutral before:bg-surface-neutral before:text-xs before:font-black before:leading-none before:transition-all before:content-[''] after:absolute after:left-[5px] after:top-[5px] after:h-2.5 after:w-2.5 after:rounded-full after:bg-surface-brand-solid after:opacity-0 after:transition-all after:content-[''] checked:before:border-brand-strong checked:after:opacity-100 hover:before:border-brand-strong"
       />
-      <label
-        htmlFor={value}
-        className={`font-medium leading-5 text-neutral ${big ? 'text-sm' : 'text-ssm'}`}
-      >
+      <label htmlFor={value} className={`font-medium leading-5 text-neutral ${big ? 'text-sm' : 'text-ssm'}`}>
         {label}
         {description && <p className="mt-1 text-xs font-normal text-neutral-subtle">{description}</p>}
       </label>
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 89ef7c1b83c..247e17227c9 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
@@ -134,7 +134,7 @@ export function InputSelect({
             <button
               type="button"
               data-testid="input-menu-list-button"
-              className="hover:text-brand-hover inline-flex items-center gap-1 text-sm font-medium text-brand transition duration-100"
+              className="inline-flex items-center gap-1 text-sm font-medium text-brand transition duration-100 hover:text-brand-hover"
               onClick={menuListButton.onClick}
             >
               {menuListButton.label}
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 879edc333de..5faa892ab01 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 gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="1" /> Value 1
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="2" /> Value 2
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="3" /> Value 3
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="4" disabled /> Value 4
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="5" disabled checked /> Value 5
       </label>
     </RadioGroup.Root>
@@ -39,19 +39,19 @@ export const Primary = {
 export const Check = {
   render: () => (
     <RadioGroup.Root defaultValue="1">
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="1" variant="check" /> Value 1
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="2" variant="check" /> Value 2
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="3" variant="check" /> Value 3
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="4" disabled variant="check" /> Value 4
       </label>
-      <label className="flex gap-3 items-center">
+      <label className="flex items-center gap-3">
         <RadioGroup.Item value="5" disabled checked variant="check" /> Value 5
       </label>
     </RadioGroup.Root>
diff --git a/libs/shared/ui/src/lib/styles/components/select.scss b/libs/shared/ui/src/lib/styles/components/select.scss
index 554605c0b84..3f356a8cace 100644
--- a/libs/shared/ui/src/lib/styles/components/select.scss
+++ b/libs/shared/ui/src/lib/styles/components/select.scss
@@ -27,7 +27,7 @@
 }
 
 .input--filter .input-select__control {
-  height:28px;
+  height: 28px;
 }
 
 // state