diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
index 99b85e0ec34..359bb183890 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables.tsx
@@ -1,4 +1,14 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { FormProvider, useForm, useFormContext } from 'react-hook-form'
+import { match } from 'ts-pattern'
+import { TerraformVariablesTable } from '@qovery/domains/service-settings/feature'
+import { TerraformVariablesProvider, useTerraformVariablesContext } from '@qovery/domains/service-terraform/feature'
+import { type Terraform } from '@qovery/domains/services/data-access'
+import { type TerraformGeneralData, useEditService, useService } from '@qovery/domains/services/feature'
+import { SettingsHeading } from '@qovery/shared/console-shared'
+import { Button, LoaderSpinner, Section } from '@qovery/shared/ui'
+import { buildEditServicePayload } from '@qovery/shared/util-services'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings/terraform-variables'
@@ -6,6 +16,97 @@ export const Route = createFileRoute(
   component: RouteComponent,
 })
 
+const TerraformVariablesLoader = () => (
+  <div className="flex min-h-page-container items-center justify-center">
+    <LoaderSpinner />
+  </div>
+)
+
+const TerraformVariablesSettingsForm = ({ service }: { service: Terraform }) => {
+  const { organizationId = '', projectId = '', environmentId = '' } = Route.useParams()
+  const { handleSubmit } = useFormContext<TerraformGeneralData>()
+  const { serializeForApi, tfVarFiles, errors } = useTerraformVariablesContext()
+
+  const { mutate: editService, isLoading: isLoadingEditService } = useEditService({
+    organizationId,
+    projectId,
+    environmentId,
+  })
+
+  if (service?.serviceType !== 'TERRAFORM') {
+    return null
+  }
+
+  const onSubmit = handleSubmit(() => {
+    // Edit the service with the updated variables and the updated order of tfvars files
+    const payload = buildEditServicePayload({
+      service,
+      request: {
+        terraform_variables_source: {
+          ...service.terraform_variables_source,
+          tf_vars: serializeForApi(),
+          tf_var_file_paths: [...tfVarFiles.filter((file) => file.enabled)].reverse().map((file) => file.source),
+        },
+      },
+    })
+    editService({
+      serviceId: service.id,
+      payload,
+    })
+  })
+
+  return (
+    <>
+      <TerraformVariablesTable />
+      <div className="mt-10 flex justify-end">
+        <Button type="submit" size="lg" onClick={onSubmit} loading={isLoadingEditService} disabled={errors.size > 0}>
+          Save
+        </Button>
+      </div>
+    </>
+  )
+}
+
+const TerraformVariablesContent = ({ service }: { service: Terraform }) => {
+  const methods = useForm<TerraformGeneralData>({
+    mode: 'onChange',
+    defaultValues: match(service)
+      .with({ serviceType: 'TERRAFORM' }, (s) => s)
+      .otherwise(() => ({})),
+  })
+
+  return (
+    <Section className="px-8 pb-8 pt-6">
+      <SettingsHeading
+        title="Terraform variables"
+        description="Select .tfvars files and configure variable values for your Terraform deployment"
+      />
+      <div className="w-full">
+        <FormProvider {...methods}>
+          <TerraformVariablesProvider>
+            <TerraformVariablesSettingsForm service={service} />
+          </TerraformVariablesProvider>
+        </FormProvider>
+      </div>
+    </Section>
+  )
+}
+
+const TerraformVariablesWrapper = () => {
+  const { serviceId } = useParams({ strict: false })
+  const { data: service } = useService({ serviceId })
+
+  if (service?.serviceType !== 'TERRAFORM') {
+    return null
+  }
+
+  return <TerraformVariablesContent service={service} />
+}
+
 function RouteComponent() {
-  return <div className="px-10 py-7">Terraform variables</div>
+  return (
+    <Suspense fallback={<TerraformVariablesLoader />}>
+      <TerraformVariablesWrapper />
+    </Suspense>
+  )
 }
diff --git a/libs/domains/service-settings/feature/src/index.ts b/libs/domains/service-settings/feature/src/index.ts
index 9bef3cb849a..741244c0d4f 100644
--- a/libs/domains/service-settings/feature/src/index.ts
+++ b/libs/domains/service-settings/feature/src/index.ts
@@ -9,3 +9,4 @@ export * from './lib/service-domain-settings/service-domain-settings/service-dom
 export * from './lib/service-deployment-restrictions-settings/service-deployment-restrictions-settings/service-deployment-restrictions-settings'
 export * from './lib/terraform-configuration-settings/terraform-configuration-settings'
 export * from './lib/terraform-arguments-settings/terraform-arguments-settings'
+export * from './lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table'
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
similarity index 95%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
index 97378bfe842..bd4e27d5495 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.spec.tsx
@@ -1,7 +1,10 @@
 import { FormProvider, useForm } from 'react-hook-form'
+import {
+  TerraformVariablesContext,
+  type TerraformVariablesContextType,
+} from '@qovery/domains/service-terraform/feature'
+import { type TerraformGeneralData } from '@qovery/domains/services/feature'
 import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
-import { type TerraformGeneralData } from '../terraform-configuration-settings/terraform-configuration-settings'
-import { TerraformVariablesContext, type TerraformVariablesContextType } from '../terraform-variables-context'
 import { TfvarsFilesPopover } from './terraform-tfvars-popover'
 
 const WrapperComponent = ({
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
similarity index 76%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
index 54fbcab823a..a3adecbce4d 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover.tsx
@@ -1,6 +1,8 @@
 import { type CheckedState } from '@radix-ui/react-checkbox'
+import clsx from 'clsx'
 import { Reorder } from 'framer-motion'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { type TfVarsFile, useTerraformVariablesContext } from '@qovery/domains/service-terraform/feature'
 import {
   Button,
   Checkbox,
@@ -13,8 +15,6 @@ import {
   Skeleton,
   Tooltip,
 } from '@qovery/shared/ui'
-import { twMerge } from '@qovery/shared/util-js'
-import { type TfVarsFile, useTerraformVariablesContext } from '../terraform-variables-context'
 
 const TfvarItem = ({
   file,
@@ -41,13 +41,21 @@ const TfvarItem = ({
     [tfVarFiles, file.source, setTfVarFiles]
   )
 
+  const isLastItem = useMemo(() => index === tfVarFiles.length - 1, [index, tfVarFiles.length])
+
   useEffect(() => {
     setCurrentIndex(index.toString())
   }, [index])
 
   return (
     <div
-      className="grid w-full grid-cols-[1fr_70px] items-center justify-between border-b border-neutral-250 px-4 py-3 last:rounded-b-lg last:border-b-0 hover:bg-neutral-100"
+      className={clsx(
+        'relative grid w-full grid-cols-[1fr_70px] items-center justify-between rounded-b-md bg-surface-neutral px-4 py-3',
+        {
+          'rounded-none after:absolute after:bottom-0 after:h-[1px] after:w-full after:bg-surface-neutral-componentActive':
+            !isLastItem,
+        }
+      )}
       onMouseEnter={() => setHoveredRow(file.source)}
       onMouseLeave={() => setHoveredRow(undefined)}
     >
@@ -60,14 +68,14 @@ const TfvarItem = ({
           className="ml-1 cursor-pointer"
         />
         <label className="flex cursor-pointer flex-col gap-0.5 text-sm" htmlFor={file.source}>
-          <span className="text-neutral-400">{file.source}</span>
-          <span className="text-xs text-neutral-350">{Object.keys(file.variables).length} variables</span>
+          <span className="text-neutral">{file.source}</span>
+          <span className="text-xs text-neutral-subtle">{Object.keys(file.variables).length} variables</span>
         </label>
       </div>
       <div className="flex items-center justify-between">
-        <Icon iconName="grip-lines" iconStyle="regular" className="text-neutral-350" />
+        <Icon iconName="grip-lines" iconStyle="regular" className="text-neutral-subtle" />
         <div className="flex items-center gap-1.5">
-          <span className="text-md leading-3 text-neutral-300">#</span>
+          <span className="text-md leading-3 text-neutral-subtle">#</span>
           <InputTextSmall
             name="order"
             value={currentIndex}
@@ -142,7 +150,7 @@ export const TfvarsFilesPopover = () => {
               side="left"
               content={
                 <span
-                  className="relative right-0 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-brand-400 text-sm font-bold leading-[0] text-white"
+                  className="absolute -left-1.5 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-surface-brand-solid text-3xs font-bold leading-[0] text-neutralInvert"
                   data-testid="enabled-files-count"
                 >
                   {enabledFilesCount}
@@ -161,29 +169,23 @@ export const TfvarsFilesPopover = () => {
               </Button>
             </Indicator>
           ) : (
-            <Button
-              size="md"
-              variant="solid"
-              className="gap-1.5 px-[13px]"
-              type="button"
-              data-testid="open-tfvars-files-button"
-            >
+            <Button size="md" variant="solid" className="gap-1.5" type="button" data-testid="open-tfvars-files-button">
               <Icon iconName="file-lines" iconStyle="regular" />
               .tfvars files
             </Button>
           )}
         </div>
       </Popover.Trigger>
-      <Popover.Content side="right" className="flex w-[340px] flex-col rounded-lg border border-neutral-250 p-0">
+      <Popover.Content side="right" className="flex w-[340px] flex-col rounded-lg border border-neutral p-0">
         <div className="flex items-center justify-between px-3 py-2">
-          <span className="px-1 py-1 text-sm font-medium text-neutral-400">Add and order .tfvars files</span>
+          <span className="px-1 py-1 text-sm font-medium text-neutral">Add and order .tfvars files</span>
           <Popover.Close>
-            <button type="button" className="flex items-center justify-center px-1 py-1">
-              <Icon iconName="xmark" className="text-lg font-normal leading-4 text-neutral-350" />
-            </button>
+            <Button type="button" iconOnly variant="plain">
+              <Icon iconName="xmark" className="text-sm font-normal leading-4 text-neutral-subtle" />
+            </Button>
           </Popover.Close>
         </div>
-        <div className="flex flex-col gap-2 border-t border-neutral-250 px-4 py-3">
+        <div className="flex flex-col gap-2 border-t border-neutral px-4 py-3">
           <div className="relative">
             <InputTextSmall
               name="path"
@@ -205,35 +207,35 @@ export const TfvarsFilesPopover = () => {
               </div>
             ) : (
               <button
-                className="absolute right-0 top-0 flex h-full w-9 items-center justify-center"
+                className="absolute right-0 top-0 flex h-full w-9 items-center justify-center text-neutral-subtle hover:text-neutral"
                 type="button"
                 onClick={submitNewPath}
               >
-                <Icon iconName="plus" className="text-lg font-normal leading-4 text-neutral-350" />
+                <Icon iconName="plus" className="text-sm" />
               </button>
             )}
           </div>
-          {newPathErrorMessage && <div className="text-xs text-red-500">{newPathErrorMessage}</div>}
+          {newPathErrorMessage && <div className="text-xs text-negative">{newPathErrorMessage}</div>}
         </div>
         {!areTfVarsFilesLoading && tfVarFiles.length !== 0 && (
-          <div className="flex items-center justify-between border-t border-neutral-250 bg-neutral-100 px-4 py-1">
-            <span className="text-xs text-neutral-350">File order defines override priority.</span>
+          <div className="flex items-center justify-between border-t border-neutral bg-surface-neutral px-4 py-1">
+            <span className="text-xs text-neutral-subtle">File order defines override priority.</span>
             <Tooltip
               classNameContent="max-w-[230px]"
               content="Files higher in the list override variables from lower ones."
               side="left"
             >
-              <span className="text-sm text-neutral-350">
+              <span className="text-sm text-neutral-subtle">
                 <Icon iconName="info-circle" iconStyle="regular" />
               </span>
             </Tooltip>
           </div>
         )}
-        <div className="flex flex-col border-t border-neutral-250">
+        <div className="flex flex-col border-t border-neutral">
           {areTfVarsFilesLoading && tfVarFiles.length === 0 ? (
             <>
               {Array.from({ length: 2 }).map((_, index) => (
-                <div key={index} className="flex w-full items-center gap-4 border-b border-neutral-250 px-4 py-4">
+                <div key={index} className="flex w-full items-center gap-4 border-b border-neutral px-4 py-4">
                   <div className="flex items-center">
                     <Skeleton height={16} width={16} />
                   </div>
@@ -245,16 +247,16 @@ export const TfvarsFilesPopover = () => {
               ))}
             </>
           ) : tfVarFiles.length > 0 ? (
-            <ScrollShadowWrapper className="max-h-[300px]">
+            <ScrollShadowWrapper hideSides className="max-h-[300px]">
               <Reorder.Group axis="y" values={tfVarFiles} onReorder={onReorder}>
                 {tfVarFiles?.map((file, index) => (
                   <Reorder.Item
                     key={file.source}
                     value={file}
-                    initial={{ cursor: 'grab' }}
+                    initial={{ cursor: 'grab', borderColor: 'var(--brand-6)' }}
                     exit={{ cursor: 'grab' }}
-                    whileDrag={{ cursor: 'grabbing', borderColor: '#642DFF', borderWidth: '2px' }}
-                    className={twMerge('flex w-full items-center border-b border-neutral-250')}
+                    whileDrag={{ cursor: 'grabbing', borderWidth: '2px' }}
+                    className="flex w-full items-center"
                     data-testid="tfvar-item"
                   >
                     <TfvarItem key={file.source} file={file} index={index} onIndexChange={onIndexChange} />
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx
similarity index 100%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-settings.tsx
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
similarity index 97%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
index c9f3581db3a..d9eacf9c5fd 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.spec.tsx
@@ -1,12 +1,12 @@
 import { type TfVarsFileResponse } from 'qovery-typescript-axios'
 import { FormProvider, useForm } from 'react-hook-form'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import { type TerraformGeneralData } from '../terraform-configuration-settings/terraform-configuration-settings'
 import {
   CUSTOM_SOURCE,
   TerraformVariablesContext,
   type TerraformVariablesContextType,
-} from '../terraform-variables-context'
+} from '@qovery/domains/service-terraform/feature'
+import { type TerraformGeneralData } from '@qovery/domains/services/feature'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { TerraformVariablesTable } from './terraform-variables-table'
 
 const mockTfVarsFromRepo: TfVarsFileResponse[] = []
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
similarity index 74%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
index 0ad247cb716..4788497c3bf 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-table/terraform-variables-table.tsx
@@ -1,16 +1,19 @@
+import { clsx } from 'clsx'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { DropdownVariable } from '@qovery/domains/variables/feature'
-import { Badge, Button, Checkbox, Icon, LoaderSpinner, Tooltip, truncateText } from '@qovery/shared/ui'
-import { twMerge } from '@qovery/shared/util-js'
-import { TfvarsFilesPopover } from '../terraform-tfvars-popover/terraform-tfvars-popover'
-import { SECRET_UNCHANGED_VALUE, type UIVariable, useTerraformVariablesContext } from '../terraform-variables-context'
 import {
+  SECRET_UNCHANGED_VALUE,
+  type UIVariable,
   formatSource,
   getSourceBadgeClassName,
   isCustomVariable,
   isVariableChanged,
-} from '../terraform-variables-utils'
+  useTerraformVariablesContext,
+} from '@qovery/domains/service-terraform/feature'
+import { DropdownVariable } from '@qovery/domains/variables/feature'
+import { Badge, Button, Checkbox, Icon, LoaderSpinner, Tooltip, truncateText } from '@qovery/shared/ui'
+import { twMerge } from '@qovery/shared/util-js'
+import { TfvarsFilesPopover } from '../terraform-tfvars-popover/terraform-tfvars-popover'
 
 const SourceCell = ({ variable }: { variable: UIVariable }) => {
   const sourceCellRef = useRef<HTMLDivElement>(null)
@@ -41,7 +44,7 @@ const SourceCell = ({ variable }: { variable: UIVariable }) => {
 
   return (
     <div
-      className="no-scrollbar inline-flex h-full items-center overflow-y-auto border-r border-neutral-250 px-2 lg:px-4"
+      className="no-scrollbar inline-flex h-full items-center overflow-y-auto border-r border-neutral px-4"
       ref={sourceCellRef}
     >
       <Badge className={twMerge(getSourceBadgeClassName(variable), 'font-medium')} variant="surface">
@@ -88,16 +91,15 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
   }, [isSecretPlaceholder, focusValueTextarea])
 
   return (
-    <div className="w-full border-b border-neutral-250">
+    <div className="w-full border-b border-neutral">
       <div
-        className={twMerge(
-          'grid min-h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center',
-          hoveredRow ? (hoveredRow === variable.source ? 'bg-neutral-100' : 'bg-white') : 'bg-white',
-          isRowSelected(variable.id) && 'bg-neutral-150 hover:bg-neutral-150',
-          isMultiline && 'min-h-auto'
-        )}
+        className={clsx('grid min-h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center bg-surface-neutral', {
+          'bg-surface-neutral-component': hoveredRow === variable.source,
+          'bg-surface-neutral-componentActive hover:bg-surface-neutral-componentActive': isRowSelected(variable.id),
+          'min-h-auto': isMultiline,
+        })}
       >
-        <div className="flex h-full items-center justify-center border-r border-neutral-250">
+        <div className="flex h-full items-center justify-center border-r border-neutral">
           <Checkbox
             checked={isRowSelected(variable.id)}
             onCheckedChange={() => selectRow(variable.id)}
@@ -107,17 +109,12 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         {/* Variable name cell */}
         <div
           className={twMerge(
-            'h-full border-r border-neutral-250 transition-all duration-100',
-            isCustomVariable(variable) && 'hover:bg-neutral-100',
-            (isCellFocused('key') || isRowSelected(variable.id)) && 'bg-neutral-150 hover:bg-neutral-150'
+            'h-full border-r border-neutral',
+            isCustomVariable(variable) && 'hover:bg-surface-neutral-component',
+            isCellFocused('key') && 'bg-surface-neutral-component hover:bg-surface-neutral-component'
           )}
         >
-          <div
-            className={twMerge(
-              'flex h-full w-full items-center border border-transparent',
-              errors.get(variable.id)?.field === 'key' && 'border-red-500'
-            )}
-          >
+          <div className={twMerge('flex h-full w-full items-center border border-transparent')}>
             {variable.isNew ? (
               <input
                 name="key"
@@ -127,7 +124,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 }}
                 className={twMerge(
                   'peer h-full w-full bg-transparent px-4 text-sm outline-none',
-                  isCellFocused('key') && 'bg-neutral-150 hover:bg-neutral-150'
+                  isCellFocused('key') && 'bg-surface-neutral-component hover:bg-surface-neutral-component'
                 )}
                 onFocus={() => setFocusedCell('key')}
                 onBlur={() => setFocusedCell(undefined)}
@@ -140,12 +137,12 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 spellCheck={false}
               />
             ) : (
-              <span className="px-4 text-sm text-neutral-350">{variable.key}</span>
+              <span className="px-4 text-sm text-neutral">{variable.key}</span>
             )}
             {variable.description && (
               <Tooltip content={variable.description}>
                 <span
-                  className="-ml-2 text-neutral-300 hover:text-neutral-400"
+                  className="-ml-2 text-neutral-disabled hover:text-neutral-subtle"
                   role="img"
                   aria-label="Variable description"
                   data-tooltip-content={variable.description}
@@ -156,8 +153,8 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
             )}
             {errors.get(variable.id)?.field === 'key' && (
               <Tooltip content={errors.get(variable.id)?.message}>
-                <div className="mr-4">
-                  <Icon iconName="circle-exclamation" iconStyle="regular" className="text-red-500" />
+                <div className="mr-3">
+                  <Icon iconName="circle-exclamation" iconStyle="regular" className="text-negative" />
                 </div>
               </Tooltip>
             )}
@@ -165,7 +162,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         </div>
         {/* Variable value cell */}
         <div
-          className="group relative flex h-full min-h-[44px] items-center border-r border-neutral-250"
+          className="group relative flex h-full min-h-[44px] items-center border-r border-neutral"
           onMouseEnter={() => {
             setIsCellHovered(true)
           }}
@@ -179,16 +176,24 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
           <div
             className={twMerge(
               // Ensure the pseudo-element is behind by using after:-z-10
-              'relative z-0 flex h-full w-full items-center border border-transparent after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:right-0 after:top-0 after:-z-10 after:h-full after:w-full after:transition-all after:duration-100 group-hover:after:bg-neutral-100',
-              isCellFocused('value') && 'after:bg-neutral-150 group-hover:after:bg-neutral-150',
+              'relative z-0 flex h-full w-full items-center border border-transparent after:pointer-events-none after:absolute after:-left-[1px] after:-top-[1px] after:bottom-0 after:right-0 after:-z-10 after:h-[calc(100%+2px)] after:w-[calc(100%+2px)] group-hover:after:bg-surface-neutral-component',
+              isCellFocused('value') &&
+                'after:bg-surface-neutral-component group-hover:after:bg-surface-neutral-component',
               !isSecretPlaceholder && 'cursor-text',
-              errors.get(variable.id)?.field === 'value' && 'border-red-500'
+              errors.get(variable.id)?.field === 'value' && 'border-surface-negative'
             )}
             onClick={onValueCellClick}
           >
             {isSecretPlaceholder && (
-              <div className="absolute left-0 top-0 flex h-full w-full cursor-default items-center gap-2 bg-white px-4 transition-all duration-100 group-hover:bg-neutral-100">
-                <span className="text-xs text-neutral-350" data-testid="hide_value_secret">
+              <div
+                className={twMerge(
+                  'absolute left-0 top-0 flex h-full w-full cursor-default items-center gap-2 bg-surface-neutral px-4 group-hover:bg-surface-neutral-component',
+                  hoveredRow === variable.source &&
+                    'bg-surface-neutral-component group-hover:bg-surface-neutral-component',
+                  isRowSelected(variable.id) && 'bg-surface-neutral-componentActive'
+                )}
+              >
+                <span className="text-xs text-neutral" data-testid="hide_value_secret">
                   ● ● ● ● ● ● ● ●
                 </span>
               </div>
@@ -203,7 +208,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
               onFocus={() => setFocusedCell('value')}
               onBlur={() => setFocusedCell(undefined)}
               className={twMerge(
-                'vertical-align-middle h-5 w-full resize-none bg-transparent px-4 text-sm text-neutral-400 outline-none',
+                'vertical-align-middle h-5 w-full resize-none bg-transparent px-4 text-sm text-neutral outline-none',
                 isMultiline && 'h-full min-h-5 resize-y py-3'
               )}
               style={{ minHeight: textareaMinHeight }}
@@ -212,10 +217,11 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
             />
             <div
               className={twMerge(
-                'absolute right-0 top-0 mr-4 flex h-full translate-x-1 items-center gap-2 pl-3 opacity-0 transition-all duration-100 group-hover:bg-neutral-100',
-                isCellFocused('value') && 'bg-neutral-150 group-hover:bg-neutral-150',
+                'absolute right-0 top-0 mr-3 flex h-full translate-x-1 items-center gap-1 pl-3 opacity-0 group-hover:bg-surface-neutral-component',
+                isCellFocused('value') && 'bg-surface-neutral-component group-hover:bg-surface-neutral-component',
                 isCellHovered && 'translate-x-0 opacity-100',
-                isVariablePopoverOpen && 'bg-white'
+                isVariablePopoverOpen &&
+                  (isRowSelected(variable.id) ? 'bg-surface-neutral-componentActive' : 'bg-surface-neutral')
               )}
             >
               {!isSecretPlaceholder && (
@@ -237,11 +243,11 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 >
                   <button
                     className={twMerge(
-                      'justify-center border-none bg-transparent px-1 text-neutral-350 hover:text-neutral-400'
+                      'justify-center border-none bg-transparent px-1 text-neutral-subtle hover:text-neutral'
                     )}
                     type="button"
                   >
-                    <Icon className="text-sm" iconName="wand-magic-sparkles" />
+                    <Icon className="text-xs" iconName="wand-magic-sparkles" />
                   </button>
                 </DropdownVariable>
               )}
@@ -249,24 +255,24 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
                 <button
                   type="button"
                   onClick={() => focusValueTextarea()}
-                  className="px-1 text-neutral-350 hover:text-neutral-400"
+                  className="px-1 text-neutral-subtle hover:text-neutral"
                 >
-                  <Icon iconName="pen" iconStyle="regular" />
+                  <Icon className="text-xs" iconName="pen" iconStyle="regular" />
                 </button>
               )}
               {isVariableChanged(variable) && (
                 <button
                   type="button"
                   onClick={() => revertValue(variable.id)}
-                  className="px-1 text-neutral-350 hover:text-neutral-400"
+                  className="px-1 text-neutral-subtle hover:text-neutral"
                 >
-                  <Icon iconName="rotate-left" iconStyle="regular" />
+                  <Icon className="text-xs" iconName="rotate-left" iconStyle="regular" />
                 </button>
               )}
               {errors.get(variable.id)?.field === 'value' && (
                 <Tooltip content={errors.get(variable.id)?.message}>
                   <span className="px-1">
-                    <Icon iconName="circle-exclamation" iconStyle="regular" className="text-red-500" />
+                    <Icon className="text-xs text-negative" iconName="circle-exclamation" iconStyle="regular" />
                   </span>
                 </Tooltip>
               )}
@@ -277,7 +283,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
         <SourceCell variable={variable} />
         {/* Secret toggle cell */}
         <button
-          className="flex items-center justify-center text-center text-sm text-neutral-400"
+          className="flex items-center justify-center text-center text-sm text-neutral"
           type="button"
           onClick={() => {
             toggleSecret(variable.id)
@@ -286,7 +292,7 @@ const VariableRow = ({ variable }: { variable: UIVariable }) => {
           <Icon
             iconName={variable.secret ? 'lock-keyhole' : 'lock-keyhole-open'}
             iconStyle="regular"
-            className={variable.secret ? 'text-neutral-400' : 'text-neutral-300'}
+            className={variable.secret ? 'text-neutral' : 'text-neutral-disabled'}
           />
         </button>
       </div>
@@ -315,23 +321,23 @@ const TerraformVariablesRows = () => {
   )
 
   return (
-    <div className="flex flex-col items-center justify-center border-t border-neutral-250">
-      <div className="grid h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center border-b border-neutral-250 bg-neutral-100">
-        <div className="flex h-full items-center justify-center border-r border-neutral-250">
+    <div className="flex flex-col items-center justify-center border-t border-neutral">
+      <div className="grid h-[44px] w-full grid-cols-[52px_1fr_1fr_1fr_52px] items-center border-b border-neutral bg-surface-neutral-subtle">
+        <div className="flex h-full items-center justify-center border-r border-neutral">
           <Checkbox
             disabled={!isSelectAllCheckboxEnabled}
             onCheckedChange={onSelectAllToggle}
             checked={isAllSelected}
           />
         </div>
-        <div className="flex h-full items-center border-r border-neutral-250">
-          <span className="px-4 text-sm text-neutral-400">Variable</span>
+        <div className="flex h-full items-center border-r border-neutral">
+          <span className="px-4 text-sm text-neutral">Variable</span>
         </div>
-        <div className="flex h-full items-center border-r border-neutral-250">
-          <span className="px-4 text-sm text-neutral-400">Value</span>
+        <div className="flex h-full items-center border-r border-neutral">
+          <span className="px-4 text-sm text-neutral">Value</span>
         </div>
-        <div className="flex h-full items-center border-r border-neutral-250">
-          <span className="px-4 text-sm text-neutral-400">Source</span>
+        <div className="flex h-full items-center border-r border-neutral">
+          <span className="px-4 text-sm text-neutral">Source</span>
         </div>
       </div>
 
@@ -344,12 +350,12 @@ const TerraformVariablesRows = () => {
 
 const TerraformVariablesLoadingState = () => {
   return (
-    <div className="flex items-center justify-center border-b border-t border-neutral-250 bg-neutral-100 p-4">
+    <div className="flex min-h-40 items-center justify-center border-b border-t border-neutral bg-surface-neutral">
       <div className="flex flex-col items-center gap-4 py-4">
         <LoaderSpinner classWidth="w-6" />
         <div className="flex flex-col items-center gap-1">
-          <span className="text-center text-sm font-medium text-neutral-350">Fetching .tfvars files...</span>
-          <span className="text-center text-sm text-neutral-350">Pulling your Terraform variable definitions.</span>
+          <span className="text-center text-sm font-medium text-neutral">Fetching .tfvars files...</span>
+          <span className="text-center text-sm text-neutral-subtle">Pulling your Terraform variable definitions.</span>
         </div>
       </div>
     </div>
@@ -358,10 +364,10 @@ const TerraformVariablesLoadingState = () => {
 
 const TerraformVariablesEmptyState = () => {
   return (
-    <div className="flex items-center justify-center border-b border-t border-neutral-250 bg-neutral-100 p-4">
+    <div className="flex min-h-40 items-center justify-center border-b border-t border-neutral bg-surface-neutral">
       <div className="flex flex-col items-center gap-2 py-4">
-        <Icon iconName="key" iconStyle="regular" className="text-lg text-neutral-300" />
-        <span className="text-center text-sm text-neutral-350">
+        <Icon iconName="key" iconStyle="regular" className="text-lg text-neutral-subtle" />
+        <span className="text-center text-sm text-neutral-subtle">
           Load a .tfvars file or manually add variables
           <br />
           to configure your Terraform service.
@@ -384,9 +390,9 @@ export const TerraformVariablesTable = () => {
   }, [addVariable])
 
   return (
-    <div className="flex flex-col rounded-lg border border-neutral-250">
+    <div className="flex flex-col rounded-lg border border-neutral bg-surface-neutral">
       <div className="flex items-center justify-between px-4 py-3">
-        <span className="text-sm font-medium text-neutral-400">Variable configuration</span>
+        <span className="text-sm font-medium text-neutral">Variable configuration</span>
         <TfvarsFilesPopover />
       </div>
 
@@ -407,7 +413,7 @@ export const TerraformVariablesTable = () => {
             Delete selected
           </Button>
         )}
-        <Button size="md" variant="surface" className="gap-1.5" type="button" onClick={onAddVariable}>
+        <Button size="md" variant="outline" className="gap-1.5" type="button" onClick={onAddVariable}>
           Add variable
           <Icon iconName="plus" iconStyle="regular" />
         </Button>
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
similarity index 96%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
rename to libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
index b843ad282d3..3b2c223224b 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
+++ b/libs/domains/service-settings/feature/src/lib/terraform-variables-settings/terraform-variables-utils.spec.ts
@@ -1,6 +1,5 @@
 import { type TerraformVariableDefinition } from 'qovery-typescript-axios'
-import { type UIVariable } from './terraform-variables-context'
-import { buildMetadataByKey, isVariableChanged } from './terraform-variables-utils'
+import { type UIVariable, buildMetadataByKey, isVariableChanged } from '@qovery/domains/service-terraform/feature'
 
 describe('Terraform variables utility functions', () => {
   describe('buildMetadataByKey', () => {
diff --git a/libs/domains/service-terraform/feature/src/index.ts b/libs/domains/service-terraform/feature/src/index.ts
index 77a737ea7c2..04fe1afd4dc 100644
--- a/libs/domains/service-terraform/feature/src/index.ts
+++ b/libs/domains/service-terraform/feature/src/index.ts
@@ -1,10 +1,9 @@
 export * from './source-setting/source-setting'
-export * from './lib/terraform-variables-settings/terraform-variables-settings'
-export * from './lib/terraform-variables-settings/terraform-variables-context'
-export * from './lib/terraform-variables-settings/terraform-tfvars-popover/terraform-tfvars-popover'
 export * from './lib/hooks/use-terraform-resources/use-terraform-resources'
 export * from './lib/terraform-resources-section/terraform-resources-section'
 export * from './lib/resource-details/resource-details'
 export * from './lib/resource-tree-list/resource-tree-list'
 export * from './lib/hooks/use-terraform-available-versions/use-terraform-available-versions'
 export * from './lib/terraform-variables-settings/dockerfile-fragment-inline-setting/dockerfile-fragment-inline-setting'
+export * from './lib/terraform-variables-context'
+export * from './lib/terraform-variables-utils'
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx b/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
similarity index 98%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
rename to libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
index 1579ea3188d..5d5692ea64f 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-context.tsx
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-context.tsx
@@ -1,3 +1,4 @@
+import { useParams } from '@tanstack/react-router'
 import { type AxiosError } from 'axios'
 import {
   GitProviderEnum,
@@ -16,7 +17,6 @@ import {
   useState,
 } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
 import { v4 as uuidv4 } from 'uuid'
 import {
@@ -89,8 +89,8 @@ export const TerraformVariablesContext = createContext<TerraformVariablesContext
 export const TerraformVariablesProvider = ({ children }: PropsWithChildren) => {
   // Initial data fetching...
   const { getValues } = useFormContext<TerraformGeneralData>()
-  const { organizationId = '', applicationId = '' } = useParams()
-  const { data: serviceResponse } = useService({ serviceId: applicationId })
+  const { organizationId = '', serviceId = '' } = useParams({ strict: false })
+  const { data: serviceResponse } = useService({ serviceId, suspense: true })
   const service = match(serviceResponse)
     .with({ serviceType: 'TERRAFORM' }, (s) => s)
     .otherwise(() => null)
diff --git a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts b/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
similarity index 84%
rename from libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts
rename to libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
index 5330bb433ec..1c4ed77cff5 100644
--- a/libs/domains/service-terraform/feature/src/lib/terraform-variables-settings/terraform-variables-utils.ts
+++ b/libs/domains/service-terraform/feature/src/lib/terraform-variables-utils.ts
@@ -49,13 +49,13 @@ export const isCustomVariable = (v: UIVariable) => {
 
 export const getSourceBadgeClassName = (variable: UIVariable) => {
   if (isCustomVariable(variable)) {
-    return 'text-[#65636D] bg-[#F2EFF3] border-[#D0CDD780]'
+    return 'text-neutral-subtle bg-surface-neutral-component border-neutral-component'
   }
   if (isVariableChanged(variable)) {
-    return 'text-[#AB6400] bg-[#FFF7C2] border-[#DC9B004D]'
+    return 'text-warning bg-surface-warning-component border-warning-subtle'
   }
   if (variable.source.includes('.tfvars')) {
-    return 'text-[#218358] bg-[#E6F6EB] border-[#008F3E33]'
+    return 'text-positive bg-surface-positive-component border-positive-subtle'
   }
-  return 'text-[#0D74CE] bg-[#E6F4FE] border-[#0083EB33]'
+  return 'text-info bg-surface-info-component border-info-subtle'
 }
diff --git a/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx b/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
index 8bf7e0d64f8..14d24c193d5 100644
--- a/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
+++ b/libs/shared/ui/src/lib/components/scroll-shadow-wrapper/scroll-shadow-wrapper.tsx
@@ -4,10 +4,11 @@ export interface ScrollShadowWrapperProps {
   children: ReactNode
   className?: string
   style?: CSSProperties
+  hideSides?: boolean
 }
 
 export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
-  const { children, className = '', style = {} } = props
+  const { children, className = '', style = {}, hideSides = false } = props
 
   const [scrollTop, setScrollTop] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
@@ -52,19 +53,23 @@ export function ScrollShadowWrapper(props: ScrollShadowWrapperProps) {
       className={`relative overflow-y-auto pr-[1px] ${className}`}
       onScroll={onScrollHandler}
     >
-      <div
-        data-testid="scroll-shadow-top"
-        className={`pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 ${
-          getVisibleSides().top ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
+      {!hideSides && (
+        <div
+          data-testid="scroll-shadow-top"
+          className={`pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 ${
+            getVisibleSides().top ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+      )}
       {children}
-      <div
-        data-testid="scroll-shadow-bottom"
-        className={`pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 ${
-          getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
+      {!hideSides && (
+        <div
+          data-testid="scroll-shadow-bottom"
+          className={`pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 ${
+            getVisibleSides().bottom ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+      )}
     </div>
   )
 }