diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 871fd50ec1..2a67fe082f 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -224,7 +224,7 @@
 	<div class="w-full h-full relative">
 		<div
 			bind:this={div}
-			class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
+			class="w-full h-full overflow-auto bg-surface-tertiary pt-4 {noMaxH ? '' : 'max-h-screen'}"
 			data-nav-id={navigationId}
 		>
 			<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-sm">
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index c19b6583b2..f2ca9ce9f6 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -537,7 +537,7 @@
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
-			<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative">
+			<div class="h-full !overflow-visible bg-surface-secondary dark:bg-[#272D38] relative">
 				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
 					{#if assets?.length}
 						<AssetsDropdownButton {assets} />
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index e4e916a3da..8aa63e452d 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -92,9 +92,7 @@
 				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
 				color == 'red'
 					? 'peer-checked:bg-red-600'
-					: color == 'blue'
-						? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
-						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
+					: 'peer-checked:bg-[#6E86FF] dark:peer-checked:bg-[#5469E3]',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
 					: size === '2sm'
diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts
index ad1046e872..3ca3fa423b 100644
--- a/frontend/src/lib/components/common/button/model.ts
+++ b/frontend/src/lib/components/common/button/model.ts
@@ -86,7 +86,7 @@ export namespace ButtonType {
 			border:
 				'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
 			contained:
-				'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
+				'bg-[#6E86FF] hover:bg-[#5469E3] focus-visible:bg-[#5469E3] text-white focus-visible:ring-frost-300',
 			divider: 'divide-x divide-frost-600'
 		},
 		marine: {
@@ -114,7 +114,7 @@ export namespace ButtonType {
 			border:
 				'border-marine-300 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-marine-200',
 			contained:
-				'bg-marine-400 hover:bg-marine-200 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
+				'bg-[#2A356E] hover:bg-[#1F2953] focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
 			divider: 'divide-x divide-gray-800 dark:divide-gray-200'
 		},
 		gray: {
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index 22bf228815..92e0782b34 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -57,7 +57,7 @@
 				? 'hover:text-secondary data-[state=on]:text-secondary text-tertiary'
 				: 'hover:text-primary data-[state=on]:text-primary text-secondary',
 			'data-[state=on]:bg-surface data-[state=off]:border-transparent data-[state=on]:border-gray-300 dark:data-[state=on]:border-gray-500',
-			'bg-surface-secondary hover:bg-surface-hover',
+			'hover:bg-surface-hover',
 			disabled ? '!shadow-none' : '',
 			className
 		)}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 293da341e4..77db0e55ba 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -72,7 +72,7 @@
 >
 	<div
 		class={twMerge(
-			'flex bg-surface-secondary rounded-md h-full',
+			'flex bg-surface-tertiary rounded-md h-full',
 			wrap ? 'flex-wrap' : '',
 			tabListClass
 		)}
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index a96dcdf5ce..29aa3d989c 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte
@@ -31,7 +31,7 @@
 		spacingSize="xl"
 		startIcon={{ icon: Plus }}
 		href="{base}/apps/add?nodraft=true"
-		color="marine"
+		color="blue"
 		dropdownItems={[
 			{
 				label: 'Import low-code app from YAML',
diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
index 1671a84e5b..7a58c21e9a 100644
--- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsFlow.svelte
@@ -32,7 +32,7 @@
 		startIcon={{ icon: Plus }}
 		endIcon={{ icon: BarsStaggered }}
 		href="{base}/flows/add?nodraft=true"
-		color="marine"
+		color="blue"
 		dropdownItems={[
 			{
 				label: 'Import from YAML',
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 0e1f929df7..cf8530f9a6 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -139,7 +139,7 @@
 >
 	<Splitpanes>
 		<Pane size={50} minSize={15} class="h-full relative z-0">
-			<div class="grow overflow-hidden bg-gray h-full bg-surface-secondary relative">
+			<div class="grow overflow-hidden h-full bg-surface-tertiary relative">
 				{#if loading}
 					<div class="p-2 pt-10">
 						{#each new Array(6) as _}
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 78978db0db..7a7154346c 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -373,7 +373,7 @@
 		/>
 	</div>
 
-	<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
+	<div class="z-10 flex-auto grow !bg-surface-tertiary" bind:clientHeight={minHeight}>
 		<FlowGraphV2
 			bind:this={graph}
 			earlyStop={flowStore.val.value?.skip_expr !== undefined}
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 4788da7604..0ad5958822 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -585,7 +585,7 @@
 				nodesDraggable={false}
 				--background-color={false}
 			>
-				<div class="absolute inset-0 !bg-surface-secondary h-full"></div>
+				<div class="absolute inset-0 !bg-surface-tertiary h-full"></div>
 				<Controls position="top-right" orientation="horizontal" showLock={false}>
 					{#if download}
 						<ControlButton
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index af3b1e944b..34af3c55be 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -553,7 +553,7 @@
 				{showCode}
 			/>
 		{:else}
-			<div class="border rounded-md">
+			<div class="border rounded-md bg-surface-secondary">
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
 					<Item
 						{item}
diff --git a/frontend/src/lib/components/home/TreeViewRoot.svelte b/frontend/src/lib/components/home/TreeViewRoot.svelte
index e9f8f797fd..004726f5e4 100644
--- a/frontend/src/lib/components/home/TreeViewRoot.svelte
+++ b/frontend/src/lib/components/home/TreeViewRoot.svelte
@@ -36,7 +36,7 @@
 		<div class="text-gray-500 dark:text-gray-400">No items</div>
 	</div>
 {:else}
-	<div class="border rounded-md">
+	<div class="border rounded-md bg-surface-secondary">
 		{#each groupedItems.slice(0, nbDisplayed) as item (item['folderName'] ?? 'user__' + item['username'])}
 			{#if item}
 				<TreeView
diff --git a/frontend/src/lib/components/scripts/CreateActionsScript.svelte b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
index 3491dffe7d..dac7942e59 100644
--- a/frontend/src/lib/components/scripts/CreateActionsScript.svelte
+++ b/frontend/src/lib/components/scripts/CreateActionsScript.svelte
@@ -13,7 +13,7 @@
 		{aiDescription}
 		size="sm"
 		spacingSize="xl"
-		color="marine"
+		color="blue"
 		startIcon={{ icon: Plus }}
 		href="{base}/scripts/add"
 	>
diff --git a/frontend/src/lib/components/text_input/TextInput.svelte b/frontend/src/lib/components/text_input/TextInput.svelte
index ee9f58c5e3..7d9c483dc8 100644
--- a/frontend/src/lib/components/text_input/TextInput.svelte
+++ b/frontend/src/lib/components/text_input/TextInput.svelte
@@ -18,7 +18,7 @@
 	}
 
 	export const inputBaseClass =
-		'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint'
+		'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-[#ffffff] dark:!bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint'
 </script>
 
 <script lang="ts">
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 1eb0f711fb..e7525ece10 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -5,8 +5,9 @@ const {
 const { zIndexes } = require('./src/lib/zIndexes')
 
 const lightTheme = {
-	surface: '#ffffff',
-	surfaceSecondary: '#f3f4f6',
+	surface: '#FBFBFD',
+	surfaceSecondary: '#ffffff',
+	surfaceTertiary: '#EFEFF4',
 	surfaceHover: '#e5e7eb',
 	surfaceDisabled: '#f9fafb',
 	surfaceSelected: '#d1d5db',
@@ -17,15 +18,16 @@ const lightTheme = {
 	textHint: '#757E8F',
 	textDisabled: '#a0aec0',
 
-	border: '#dddddd',
+	border: '#E5E7EB',
 	borderHover: '#cccccc'
 }
 
 const lightThemeRgb = makeRgb(lightTheme)
 
 const darkTheme = {
-	surface: '#2e3440',
-	surfaceSecondary: '#3b4252',
+	surface: '#262B35',
+	surfaceSecondary: '#2e3440',
+	surfaceTertiary: '#434c5e',
 	surfaceHover: '#454F64',
 	surfaceDisabled: '#212732',
 	surfaceSelected: '#434c5e',
@@ -408,6 +410,7 @@ const config = {
 
 			surface: 'rgb(var(--color-surface) / <alpha-value>)',
 			'surface-secondary': 'rgb(var(--color-surface-secondary) / <alpha-value>)',
+			'surface-tertiary': 'rgb(var(--color-surface-tertiary) / <alpha-value>)',
 			'surface-hover': 'rgb(var(--color-surface-hover) / <alpha-value>)',
 			'surface-disabled': 'rgb(var(--color-surface-disabled) / <alpha-value>)',
 			'surface-selected': 'rgb(var(--color-surface-selected) / <alpha-value>)',
@@ -420,6 +423,7 @@ const config = {
 
 			'surface-inverse': 'rgb(var(--color-surface-inverse) / <alpha-value>)',
 			'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
+			'surface-tertiary-inverse': 'rgb(var(--color-surface-tertiary-inverse) / <alpha-value>)',
 			'surface-hover-inverse': 'rgb(var(--color-surface-hover-inverse) / <alpha-value>)',
 			'surface-disabled-inverse': 'rgb(var(--color-surface-disabled-inverse) / <alpha-value>)',
 			'surface-selected-inverse': 'rgb(var(--color-surface-selected-inverse) / <alpha-value>)',
@@ -516,6 +520,7 @@ const config = {
 					color: lightTheme.textPrimary,
 					'--color-surface': lightThemeRgb.surface,
 					'--color-surface-secondary': lightThemeRgb.surfaceSecondary,
+					'--color-surface-tertiary': lightThemeRgb.surfaceTertiary,
 					'--color-surface-hover': lightThemeRgb.surfaceHover,
 					'--color-surface-disabled': lightThemeRgb.surfaceDisabled,
 					'--color-surface-selected': lightThemeRgb.surfaceSelected,
@@ -528,6 +533,7 @@ const config = {
 
 					'--color-surface-inverse': darkThemeRgb.surface,
 					'--color-surface-secondary-inverse': darkThemeRgb.surfaceSecondary,
+					'--color-surface-tertiary-inverse': darkThemeRgb.surfaceTertiary,
 					'--color-surface-hover-inverse': darkThemeRgb.surfaceHover,
 					'--color-surface-disabled-inverse': darkThemeRgb.surfaceDisabled,
 					'--color-surface-selected-inverse': darkThemeRgb.surfaceSelected,
@@ -559,6 +565,7 @@ const config = {
 
 						'--color-surface': darkThemeRgb.surface,
 						'--color-surface-secondary': darkThemeRgb.surfaceSecondary,
+						'--color-surface-tertiary': darkThemeRgb.surfaceTertiary,
 						'--color-surface-hover': darkThemeRgb.surfaceHover,
 						'--color-surface-disabled': darkThemeRgb.surfaceDisabled,
 						'--color-surface-selected': darkThemeRgb.surfaceSelected,
@@ -571,6 +578,7 @@ const config = {
 
 						'--color-surface-inverse': lightThemeRgb.surface,
 						'--color-surface-secondary-inverse': lightThemeRgb.surfaceSecondary,
+						'--color-surface-tertiary-inverse': lightThemeRgb.surfaceTertiary,
 						'--color-surface-hover-inverse': lightThemeRgb.surfaceHover,
 						'--color-surface-disabled-inverse': lightThemeRgb.surfaceDisabled,
 						'--color-surface-selected-inverse': lightThemeRgb.surfaceSelected,