diff --git a/apps/console-v5/src/routeTree.gen.ts b/apps/console-v5/src/routeTree.gen.ts
index dd8a430a4d9..c742698aaaa 100644
--- a/apps/console-v5/src/routeTree.gen.ts
+++ b/apps/console-v5/src/routeTree.gen.ts
@@ -1,59 +1,55 @@
 /* eslint-disable */
-
 // @ts-nocheck
-
 // noinspection JSUnusedGlobalSymbols
-
 // This file was automatically generated by TanStack Router.
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
-import { Route as IndexRouteImport } from './routes/index'
-import { Route as LoginIndexRouteImport } from './routes/login/index'
-import { Route as LoginAuth0CallbackRouteImport } from './routes/login/auth0-callback'
-import { Route as AuthenticatedOrganizationRouteRouteImport } from './routes/_authenticated/organization/route'
-import { Route as AuthenticatedOrganizationIndexRouteImport } from './routes/_authenticated/organization/index'
 import { Route as AuthenticatedAcceptInvitationIndexRouteImport } from './routes/_authenticated/accept-invitation/index'
-import { Route as AuthenticatedOnboardingProjectRouteImport } from './routes/_authenticated/onboarding/project'
-import { Route as AuthenticatedOnboardingPlansRouteImport } from './routes/_authenticated/onboarding/plans'
 import { Route as AuthenticatedOnboardingPersonalizeRouteImport } from './routes/_authenticated/onboarding/personalize'
-import { Route as AuthenticatedOrganizationOrganizationIdRouteRouteImport } from './routes/_authenticated/organization/$organizationId/route'
-import { Route as AuthenticatedOrganizationOrganizationIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/index'
-import { Route as AuthenticatedOrganizationOrganizationIdSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/settings'
-import { Route as AuthenticatedOrganizationOrganizationIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/overview'
-import { Route as AuthenticatedOrganizationOrganizationIdClustersRouteImport } from './routes/_authenticated/organization/$organizationId/clusters'
-import { Route as AuthenticatedOrganizationOrganizationIdAuditLogsRouteImport } from './routes/_authenticated/organization/$organizationId/audit-logs'
-import { Route as AuthenticatedOrganizationOrganizationIdAlertsRouteImport } from './routes/_authenticated/organization/$organizationId/alerts'
+import { Route as AuthenticatedOnboardingPlansRouteImport } from './routes/_authenticated/onboarding/plans'
+import { Route as AuthenticatedOnboardingProjectRouteImport } from './routes/_authenticated/onboarding/project'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/$clusterId/index'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterNewRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/new'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/index'
+import { Route as AuthenticatedOrganizationOrganizationIdAlertsRouteImport } from './routes/_authenticated/organization/$organizationId/alerts'
+import { Route as AuthenticatedOrganizationOrganizationIdAuditLogsRouteImport } from './routes/_authenticated/organization/$organizationId/audit-logs'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/index'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdVariablesRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/variables'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/overview'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/overview'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/route'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/route'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/credentials'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsDangerZoneRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/danger-zone'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsEksAnywhereRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/eks-anywhere'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsImageRegistryRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/index'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsNetworkRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/network'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsResourcesRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/resources'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/route'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/index'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/general'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/index'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/index'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/general'
-import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsDangerZoneRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/danger-zone'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugResourcesRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/resources'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/general'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsResourcesRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/resources'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsNetworkRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/network'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsImageRegistryRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/image-registry'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsEksAnywhereRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/eks-anywhere'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsDangerZoneRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/danger-zone'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/credentials'
-import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/create/$slug/route'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterNewRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/new'
+import { Route as AuthenticatedOrganizationOrganizationIdClustersRouteImport } from './routes/_authenticated/organization/$organizationId/clusters'
+import { Route as AuthenticatedOrganizationOrganizationIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/index'
+import { Route as AuthenticatedOrganizationOrganizationIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/overview'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/index'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/index'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/overview'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsDangerZoneRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/danger-zone'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/general'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/index'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/settings/route'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdVariablesRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/variables'
+import { Route as AuthenticatedOrganizationOrganizationIdRouteRouteImport } from './routes/_authenticated/organization/$organizationId/route'
+import { Route as AuthenticatedOrganizationOrganizationIdSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/settings'
+import { Route as AuthenticatedOrganizationIndexRouteImport } from './routes/_authenticated/organization/index'
+import { Route as AuthenticatedOrganizationRouteRouteImport } from './routes/_authenticated/organization/route'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as LoginAuth0CallbackRouteImport } from './routes/login/auth0-callback'
+import { Route as LoginIndexRouteImport } from './routes/login/index'
 
 const AuthenticatedRoute = AuthenticatedRouteImport.update({
   id: '/_authenticated',
@@ -74,42 +70,36 @@ const LoginAuth0CallbackRoute = LoginAuth0CallbackRouteImport.update({
   path: '/login/auth0-callback',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AuthenticatedOrganizationRouteRoute =
-  AuthenticatedOrganizationRouteRouteImport.update({
-    id: '/organization',
-    path: '/organization',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedOrganizationIndexRoute =
-  AuthenticatedOrganizationIndexRouteImport.update({
-    id: '/',
-    path: '/',
-    getParentRoute: () => AuthenticatedOrganizationRouteRoute,
-  } as any)
-const AuthenticatedAcceptInvitationIndexRoute =
-  AuthenticatedAcceptInvitationIndexRouteImport.update({
-    id: '/accept-invitation/',
-    path: '/accept-invitation/',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedOnboardingProjectRoute =
-  AuthenticatedOnboardingProjectRouteImport.update({
-    id: '/onboarding/project',
-    path: '/onboarding/project',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedOnboardingPlansRoute =
-  AuthenticatedOnboardingPlansRouteImport.update({
-    id: '/onboarding/plans',
-    path: '/onboarding/plans',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
-const AuthenticatedOnboardingPersonalizeRoute =
-  AuthenticatedOnboardingPersonalizeRouteImport.update({
-    id: '/onboarding/personalize',
-    path: '/onboarding/personalize',
-    getParentRoute: () => AuthenticatedRoute,
-  } as any)
+const AuthenticatedOrganizationRouteRoute = AuthenticatedOrganizationRouteRouteImport.update({
+  id: '/organization',
+  path: '/organization',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedOrganizationIndexRoute = AuthenticatedOrganizationIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => AuthenticatedOrganizationRouteRoute,
+} as any)
+const AuthenticatedAcceptInvitationIndexRoute = AuthenticatedAcceptInvitationIndexRouteImport.update({
+  id: '/accept-invitation/',
+  path: '/accept-invitation/',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedOnboardingProjectRoute = AuthenticatedOnboardingProjectRouteImport.update({
+  id: '/onboarding/project',
+  path: '/onboarding/project',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedOnboardingPlansRoute = AuthenticatedOnboardingPlansRouteImport.update({
+  id: '/onboarding/plans',
+  path: '/onboarding/plans',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
+const AuthenticatedOnboardingPersonalizeRoute = AuthenticatedOnboardingPersonalizeRouteImport.update({
+  id: '/onboarding/personalize',
+  path: '/onboarding/personalize',
+  getParentRoute: () => AuthenticatedRoute,
+} as any)
 const AuthenticatedOrganizationOrganizationIdRouteRoute =
   AuthenticatedOrganizationOrganizationIdRouteRouteImport.update({
     id: '/$organizationId',
@@ -165,228 +155,161 @@ const AuthenticatedOrganizationOrganizationIdClusterNewRoute =
     getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
   } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRouteImport.update(
-    {
-      id: '/project/$projectId/',
-      path: '/project/$projectId/',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRouteImport.update({
+    id: '/project/$projectId/',
+    path: '/project/$projectId/',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRouteImport.update(
-    {
-      id: '/cluster/$clusterId/',
-      path: '/cluster/$clusterId/',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRouteImport.update({
+    id: '/cluster/$clusterId/',
+    path: '/cluster/$clusterId/',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdVariablesRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdVariablesRouteImport.update(
-    {
-      id: '/project/$projectId/variables',
-      path: '/project/$projectId/variables',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdVariablesRouteImport.update({
+    id: '/project/$projectId/variables',
+    path: '/project/$projectId/variables',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdOverviewRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdOverviewRouteImport.update(
-    {
-      id: '/project/$projectId/overview',
-      path: '/project/$projectId/overview',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdOverviewRouteImport.update({
+    id: '/project/$projectId/overview',
+    path: '/project/$projectId/overview',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRouteImport.update(
-    {
-      id: '/cluster/$clusterId/overview',
-      path: '/cluster/$clusterId/overview',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRouteImport.update({
+    id: '/cluster/$clusterId/overview',
+    path: '/cluster/$clusterId/overview',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRouteImport.update(
-    {
-      id: '/cluster/$clusterId/cluster-logs',
-      path: '/cluster/$clusterId/cluster-logs',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRouteImport.update({
+    id: '/cluster/$clusterId/cluster-logs',
+    path: '/cluster/$clusterId/cluster-logs',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteImport.update(
-    {
-      id: '/project/$projectId/settings',
-      path: '/project/$projectId/settings',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteImport.update({
+    id: '/project/$projectId/settings',
+    path: '/project/$projectId/settings',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute =
-  AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteImport.update(
-    {
-      id: '/cluster/create/$slug',
-      path: '/cluster/create/$slug',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteImport.update({
+    id: '/cluster/create/$slug',
+    path: '/cluster/create/$slug',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteImport.update(
-    {
-      id: '/cluster/$clusterId/settings',
-      path: '/cluster/$clusterId/settings',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteImport.update({
+    id: '/cluster/$clusterId/settings',
+    path: '/cluster/$clusterId/settings',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRouteImport.update(
-    {
-      id: '/',
-      path: '/',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute =
-  AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRouteImport.update(
-    {
-      id: '/',
-      path: '/',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRouteImport.update(
-    {
-      id: '/',
-      path: '/',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRouteImport.update(
-    {
-      id: '/general',
-      path: '/general',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsGeneralRouteImport.update({
+    id: '/general',
+    path: '/general',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsDangerZoneRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsDangerZoneRouteImport.update(
-    {
-      id: '/danger-zone',
-      path: '/danger-zone',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsDangerZoneRouteImport.update({
+    id: '/danger-zone',
+    path: '/danger-zone',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterCreateSlugResourcesRoute =
-  AuthenticatedOrganizationOrganizationIdClusterCreateSlugResourcesRouteImport.update(
-    {
-      id: '/resources',
-      path: '/resources',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterCreateSlugResourcesRouteImport.update({
+    id: '/resources',
+    path: '/resources',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterCreateSlugGeneralRoute =
-  AuthenticatedOrganizationOrganizationIdClusterCreateSlugGeneralRouteImport.update(
-    {
-      id: '/general',
-      path: '/general',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterCreateSlugGeneralRouteImport.update({
+    id: '/general',
+    path: '/general',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsResourcesRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsResourcesRouteImport.update(
-    {
-      id: '/resources',
-      path: '/resources',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsResourcesRouteImport.update({
+    id: '/resources',
+    path: '/resources',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsNetworkRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsNetworkRouteImport.update(
-    {
-      id: '/network',
-      path: '/network',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsNetworkRouteImport.update({
+    id: '/network',
+    path: '/network',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsImageRegistryRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsImageRegistryRouteImport.update(
-    {
-      id: '/image-registry',
-      path: '/image-registry',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsImageRegistryRouteImport.update({
+    id: '/image-registry',
+    path: '/image-registry',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsGeneralRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsGeneralRouteImport.update(
-    {
-      id: '/general',
-      path: '/general',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsGeneralRouteImport.update({
+    id: '/general',
+    path: '/general',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsEksAnywhereRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsEksAnywhereRouteImport.update(
-    {
-      id: '/eks-anywhere',
-      path: '/eks-anywhere',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsEksAnywhereRouteImport.update({
+    id: '/eks-anywhere',
+    path: '/eks-anywhere',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsDangerZoneRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsDangerZoneRouteImport.update(
-    {
-      id: '/danger-zone',
-      path: '/danger-zone',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsDangerZoneRouteImport.update({
+    id: '/danger-zone',
+    path: '/danger-zone',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRouteImport.update(
-    {
-      id: '/credentials',
-      path: '/credentials',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRouteImport.update({
+    id: '/credentials',
+    path: '/credentials',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRoute =
-  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRouteImport.update(
-    {
-      id: '/advanced-settings',
-      path: '/advanced-settings',
-      getParentRoute: () =>
-        AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRouteImport.update({
+    id: '/advanced-settings',
+    path: '/advanced-settings',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRouteImport.update(
-    {
-      id: '/project/$projectId/environment/$environmentId/',
-      path: '/project/$projectId/environment/$environmentId/',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRouteImport.update({
+    id: '/project/$projectId/environment/$environmentId/',
+    path: '/project/$projectId/environment/$environmentId/',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute =
-  AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRouteImport.update(
-    {
-      id: '/project/$projectId/environment/$environmentId/overview',
-      path: '/project/$projectId/environment/$environmentId/overview',
-      getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
-    } as any,
-  )
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRouteImport.update({
+    id: '/project/$projectId/environment/$environmentId/overview',
+    path: '/project/$projectId/environment/$environmentId/overview',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -1023,7 +946,7 @@ const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteC
 
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren =
   AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute._addFileChildren(
-    AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteChildren,
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteChildren
   )
 
 interface AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteChildren {
@@ -1044,7 +967,7 @@ const AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteChildren
 
 const AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteWithChildren =
   AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRoute._addFileChildren(
-    AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteChildren,
+    AuthenticatedOrganizationOrganizationIdClusterCreateSlugRouteRouteChildren
   )
 
 interface AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteChildren {
@@ -1065,7 +988,7 @@ const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteC
 
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteWithChildren =
   AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRoute._addFileChildren(
-    AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteChildren,
+    AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsRouteRouteChildren
   )
 
 interface AuthenticatedOrganizationOrganizationIdRouteRouteChildren {
@@ -1092,20 +1015,13 @@ interface AuthenticatedOrganizationOrganizationIdRouteRouteChildren {
 
 const AuthenticatedOrganizationOrganizationIdRouteRouteChildren: AuthenticatedOrganizationOrganizationIdRouteRouteChildren =
   {
-    AuthenticatedOrganizationOrganizationIdAlertsRoute:
-      AuthenticatedOrganizationOrganizationIdAlertsRoute,
-    AuthenticatedOrganizationOrganizationIdAuditLogsRoute:
-      AuthenticatedOrganizationOrganizationIdAuditLogsRoute,
-    AuthenticatedOrganizationOrganizationIdClustersRoute:
-      AuthenticatedOrganizationOrganizationIdClustersRoute,
-    AuthenticatedOrganizationOrganizationIdOverviewRoute:
-      AuthenticatedOrganizationOrganizationIdOverviewRoute,
-    AuthenticatedOrganizationOrganizationIdSettingsRoute:
-      AuthenticatedOrganizationOrganizationIdSettingsRoute,
-    AuthenticatedOrganizationOrganizationIdIndexRoute:
-      AuthenticatedOrganizationOrganizationIdIndexRoute,
-    AuthenticatedOrganizationOrganizationIdClusterNewRoute:
-      AuthenticatedOrganizationOrganizationIdClusterNewRoute,
+    AuthenticatedOrganizationOrganizationIdAlertsRoute: AuthenticatedOrganizationOrganizationIdAlertsRoute,
+    AuthenticatedOrganizationOrganizationIdAuditLogsRoute: AuthenticatedOrganizationOrganizationIdAuditLogsRoute,
+    AuthenticatedOrganizationOrganizationIdClustersRoute: AuthenticatedOrganizationOrganizationIdClustersRoute,
+    AuthenticatedOrganizationOrganizationIdOverviewRoute: AuthenticatedOrganizationOrganizationIdOverviewRoute,
+    AuthenticatedOrganizationOrganizationIdSettingsRoute: AuthenticatedOrganizationOrganizationIdSettingsRoute,
+    AuthenticatedOrganizationOrganizationIdIndexRoute: AuthenticatedOrganizationOrganizationIdIndexRoute,
+    AuthenticatedOrganizationOrganizationIdClusterNewRoute: AuthenticatedOrganizationOrganizationIdClusterNewRoute,
     AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute:
       AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute,
     AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute:
@@ -1134,7 +1050,7 @@ const AuthenticatedOrganizationOrganizationIdRouteRouteChildren: AuthenticatedOr
 
 const AuthenticatedOrganizationOrganizationIdRouteRouteWithChildren =
   AuthenticatedOrganizationOrganizationIdRouteRoute._addFileChildren(
-    AuthenticatedOrganizationOrganizationIdRouteRouteChildren,
+    AuthenticatedOrganizationOrganizationIdRouteRouteChildren
   )
 
 interface AuthenticatedOrganizationRouteRouteChildren {
@@ -1142,17 +1058,14 @@ interface AuthenticatedOrganizationRouteRouteChildren {
   AuthenticatedOrganizationIndexRoute: typeof AuthenticatedOrganizationIndexRoute
 }
 
-const AuthenticatedOrganizationRouteRouteChildren: AuthenticatedOrganizationRouteRouteChildren =
-  {
-    AuthenticatedOrganizationOrganizationIdRouteRoute:
-      AuthenticatedOrganizationOrganizationIdRouteRouteWithChildren,
-    AuthenticatedOrganizationIndexRoute: AuthenticatedOrganizationIndexRoute,
-  }
+const AuthenticatedOrganizationRouteRouteChildren: AuthenticatedOrganizationRouteRouteChildren = {
+  AuthenticatedOrganizationOrganizationIdRouteRoute: AuthenticatedOrganizationOrganizationIdRouteRouteWithChildren,
+  AuthenticatedOrganizationIndexRoute: AuthenticatedOrganizationIndexRoute,
+}
 
-const AuthenticatedOrganizationRouteRouteWithChildren =
-  AuthenticatedOrganizationRouteRoute._addFileChildren(
-    AuthenticatedOrganizationRouteRouteChildren,
-  )
+const AuthenticatedOrganizationRouteRouteWithChildren = AuthenticatedOrganizationRouteRoute._addFileChildren(
+  AuthenticatedOrganizationRouteRouteChildren
+)
 
 interface AuthenticatedRouteChildren {
   AuthenticatedOrganizationRouteRoute: typeof AuthenticatedOrganizationRouteRouteWithChildren
@@ -1163,19 +1076,14 @@ interface AuthenticatedRouteChildren {
 }
 
 const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
-  AuthenticatedOrganizationRouteRoute:
-    AuthenticatedOrganizationRouteRouteWithChildren,
-  AuthenticatedOnboardingPersonalizeRoute:
-    AuthenticatedOnboardingPersonalizeRoute,
+  AuthenticatedOrganizationRouteRoute: AuthenticatedOrganizationRouteRouteWithChildren,
+  AuthenticatedOnboardingPersonalizeRoute: AuthenticatedOnboardingPersonalizeRoute,
   AuthenticatedOnboardingPlansRoute: AuthenticatedOnboardingPlansRoute,
   AuthenticatedOnboardingProjectRoute: AuthenticatedOnboardingProjectRoute,
-  AuthenticatedAcceptInvitationIndexRoute:
-    AuthenticatedAcceptInvitationIndexRoute,
+  AuthenticatedAcceptInvitationIndexRoute: AuthenticatedAcceptInvitationIndexRoute,
 }
 
-const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
-  AuthenticatedRouteChildren,
-)
+const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(AuthenticatedRouteChildren)
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
@@ -1183,6 +1091,4 @@ const rootRouteChildren: RootRouteChildren = {
   LoginAuth0CallbackRoute: LoginAuth0CallbackRoute,
   LoginIndexRoute: LoginIndexRoute,
 }
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
+export const routeTree = rootRouteImport._addFileChildren(rootRouteChildren)._addFileTypes<FileRouteTypes>()
diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/variables.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/variables.tsx
index 381326a73f5..8163e910e27 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/variables.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/variables.tsx
@@ -37,9 +37,9 @@ function RouteComponent() {
         </div>
       }
     >
-      <div className="container mx-auto mt-6 pb-10">
-        <Section className="gap-8">
-          <div className="flex flex-col gap-6">
+      <div className="container mx-auto flex min-h-page-container flex-col pt-6">
+        <Section className="min-h-0 flex-1 gap-8">
+          <div className="flex shrink-0 flex-col gap-6">
             <div className="flex justify-between">
               <Heading>Project variables</Heading>
               <ActionToolbar.Root className="flex">
@@ -66,7 +66,7 @@ function RouteComponent() {
             </div>
             <hr className="w-full border-neutral" />
           </div>
-          <div className="flex flex-col gap-8">
+          <div className="flex min-h-0 flex-1 flex-col gap-8">
             <VariableList
               scope="PROJECT"
               projectId={projectId}
diff --git a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
index b487de367cd..eb68280e811 100644
--- a/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
+++ b/libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx
@@ -330,9 +330,9 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
               <Icon
                 iconName="arrow-turn-down-right"
                 iconStyle="regular"
-                className="ml-1 mr-2 text-2xs text-neutral-300"
+                className="ml-1 mr-2 text-2xs text-neutral-disabled"
               />
-              <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-teal-500 px-1 text-2xs font-bold text-neutral-50">
+              <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-surface-info-component px-1 text-2xs font-bold text-info">
                 ALIAS
               </span>
             </div>
@@ -362,9 +362,9 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
             <Icon
               iconName="arrow-turn-down-right"
               iconStyle="regular"
-              className="ml-1 mr-2 text-2xs text-neutral-300"
+              className="ml-1 mr-2 text-2xs text-neutral-subtle"
             />
-            <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-brand-500 px-1 text-2xs font-bold text-neutral-50">
+            <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-surface-brand-component px-1 text-2xs font-bold text-brand">
               OVERRIDE
             </span>
           </div>
@@ -440,7 +440,7 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
                 rightElement={
                   <Tooltip content="Scope can't be changed. Re-create the var with the right scope." side="left">
                     <div>
-                      <Icon iconName="circle-info" className="text-sm text-neutral-350" />
+                      <Icon iconName="circle-info" className="text-sm text-neutral-subtle" />
                     </div>
                   </Tooltip>
                 }
diff --git a/libs/domains/variables/feature/src/lib/output-variables/output-variables.tsx b/libs/domains/variables/feature/src/lib/output-variables/output-variables.tsx
index 157bbd21388..7d485a9cebd 100644
--- a/libs/domains/variables/feature/src/lib/output-variables/output-variables.tsx
+++ b/libs/domains/variables/feature/src/lib/output-variables/output-variables.tsx
@@ -62,11 +62,11 @@ export function OutputVariables({ serviceId, serviceType, className, ...props }:
           const { key, description } = info.row.original
           return (
             <div className="flex items-center gap-1">
-              <span className="text-sm text-neutral-350">{key}</span>{' '}
+              <span className="text-sm text-neutral-subtle">{key}</span>{' '}
               {description && (
                 <Tooltip content={description}>
                   <span>
-                    <Icon iconName="circle-info" className="text-neutral-350" />
+                    <Icon iconName="circle-info" className="text-neutral-subtle" />
                   </span>
                 </Tooltip>
               )}
@@ -103,9 +103,9 @@ export function OutputVariables({ serviceId, serviceType, className, ...props }:
   if (variables.length === 0) {
     return (
       <div className="px-3 py-8 text-center">
-        <Icon iconName="wave-pulse" className="text-neutral-350" />
-        <p className="mt-1 text-xs font-medium text-neutral-350">No output variables found</p>
-        <p className="mt-1 text-xs text-neutral-350">
+        <Icon iconName="wave-pulse" className="text-neutral-subtle" />
+        <p className="mt-1 text-xs font-medium text-neutral-subtle">No output variables found</p>
+        <p className="mt-1 text-xs text-neutral-subtle">
           {scopeName} output variables will appear here after your first successful deployment.
         </p>
       </div>
diff --git a/libs/domains/variables/feature/src/lib/variable-list/variable-list-action-bar.tsx b/libs/domains/variables/feature/src/lib/variable-list/variable-list-action-bar.tsx
index d004f2a2b72..1b3fe9e9167 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/variable-list-action-bar.tsx
+++ b/libs/domains/variables/feature/src/lib/variable-list/variable-list-action-bar.tsx
@@ -1,5 +1,5 @@
-import { Button, Icon, Tooltip, useModalConfirmation } from '@qovery/shared/ui'
-import { pluralize, twMerge } from '@qovery/shared/util-js'
+import { StickyActionFormToaster, useModalConfirmation } from '@qovery/shared/ui'
+import { pluralize } from '@qovery/shared/util-js'
 import { useDeleteVariable } from '../hooks/use-delete-variable/use-delete-variable'
 import { type useVariables } from '../hooks/use-variables/use-variables'
 
@@ -9,17 +9,25 @@ export interface VariableListActionBarProps {
 }
 
 export function VariableListActionBar({ selectedRows = [], resetRowSelection }: VariableListActionBarProps) {
-  const hasSelection = Boolean(selectedRows.length)
+  const selectedCount = selectedRows.length
+  const hasSelection = Boolean(selectedCount)
 
   const { mutateAsync: deleteVariable } = useDeleteVariable()
 
   const { openModalConfirmation } = useModalConfirmation()
 
   const deletableVariables = selectedRows.filter(({ scope }) => scope !== 'BUILT_IN')
+  const deletableCount = deletableVariables.length
+  const description =
+    selectedCount === 0
+      ? ''
+      : `${selectedCount} selected ${pluralize(selectedCount, 'variable')}${
+          deletableCount === selectedCount ? '' : ` (${deletableCount} deletable)`
+        }`
 
   const handleDeleteAllVariables = () =>
     openModalConfirmation({
-      title: `Delete ${deletableVariables.length} ${pluralize(deletableVariables.length, 'variable')}`,
+      title: `Delete ${deletableCount} ${pluralize(deletableCount, 'variable')}`,
       name: 'these variables',
       confirmationMethod: 'action',
       action: async () => {
@@ -33,42 +41,15 @@ export function VariableListActionBar({ selectedRows = [], resetRowSelection }:
     })
 
   return (
-    <div className="sticky bottom-4">
-      <div className="relative">
-        <div
-          className={twMerge(
-            'absolute bottom-4 left-1/2 w-[448px] -translate-x-1/2',
-            hasSelection ? '' : 'h-0 overflow-hidden'
-          )}
-        >
-          <div
-            className={twMerge(
-              'flex h-[52px] items-center justify-between rounded-md border border-neutral bg-surface-neutralInvert-component p-2 pl-4 text-sm font-medium text-neutralInvert shadow-xl',
-              hasSelection ? 'animate-action-bar-fade-in' : 'animate-action-bar-fade-out'
-            )}
-          >
-            <span>
-              {selectedRows.length} selected {pluralize(selectedRows.length, 'variable')}
-            </span>
-            <div className="flex gap-3">
-              <Button type="button" variant="surface" color="neutral" size="md" onClick={() => resetRowSelection()}>
-                Deselect
-              </Button>
-              <Tooltip content="No deletable variables" disabled={deletableVariables.length !== 0}>
-                <Button
-                  color="red"
-                  size="md"
-                  className="items-center gap-2"
-                  onClick={() => handleDeleteAllVariables()}
-                  disabled={deletableVariables.length === 0}
-                >
-                  Delete selected <Icon iconName="trash" />
-                </Button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <StickyActionFormToaster
+      visible={hasSelection}
+      description={description}
+      onReset={resetRowSelection}
+      submitButtonColor="red"
+      resetLabel="Deselect"
+      onSubmit={handleDeleteAllVariables}
+      submitLabel="Delete selected"
+      disabledValidation={deletableCount === 0}
+    />
   )
 }
diff --git a/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx b/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx
index 2ca9d0a1965..060e8a1932d 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx
+++ b/libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx
@@ -209,7 +209,7 @@ export function VariableList({
           return (
             <div className="flex flex-col justify-center gap-1">
               <div className="flex items-center gap-2">
-                <div className="truncate">
+                <div className="flex items-center truncate">
                   {variable.owned_by === ExternalServiceEnum.DOPPLER && (
                     <span
                       data-testid="doppler-tag"
@@ -219,17 +219,17 @@ export function VariableList({
                     </span>
                   )}
                   {variable.aliased_variable && (
-                    <span className="mr-2 inline-flex h-4 items-center rounded-sm bg-teal-500 px-1 text-2xs font-bold text-neutral-50">
+                    <span className="mr-2 inline-flex h-4 items-center rounded bg-surface-info-component px-1 text-2xs font-bold text-info">
                       ALIAS
                     </span>
                   )}
                   {variable.overridden_variable && (
-                    <span className="mr-2 inline-flex h-4 items-center rounded-sm bg-brand-500 px-1 text-2xs font-bold text-neutral-50">
+                    <span className="mr-2 inline-flex h-4 items-center rounded bg-surface-brand-component px-1 text-2xs font-bold text-brand">
                       OVERRIDE
                     </span>
                   )}
                   {variable.mount_path && (
-                    <span className="mr-2 inline-flex h-4 items-center rounded-sm bg-purple-500 px-1 text-2xs font-bold text-neutral-50">
+                    <span className="mr-2 inline-flex h-4 items-center rounded bg-surface-accent1-component px-1 text-2xs font-bold text-accent1">
                       FILE
                     </span>
                   )}
@@ -247,14 +247,14 @@ export function VariableList({
                 {variable.description && (
                   <Tooltip content={variable.description}>
                     <span>
-                      <Icon iconName="circle-info" iconStyle="regular" className="text-neutral-350" />
+                      <Icon iconName="circle-info" iconStyle="regular" className="text-neutral-subtle" />
                     </span>
                   </Tooltip>
                 )}
               </div>
               {(variable.aliased_variable || variable.overridden_variable) && (
-                <div className="flex flex-row gap-1 text-2xs text-neutral-350">
-                  <Icon iconName="arrow-turn-down-right" iconStyle="regular" className="text-2xs text-neutral-300" />
+                <div className="flex flex-row gap-1 text-2xs text-neutral-subtle">
+                  <Icon iconName="arrow-turn-down-right" iconStyle="regular" className="text-2xs text-neutral-subtle" />
                   {variable.aliased_variable && <span>{variable.aliased_variable.key}</span>}
                   {variable.overridden_variable && <span>{variable.overridden_variable.key}</span>}
                 </div>
@@ -275,8 +275,8 @@ export function VariableList({
           return (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
-                <Button variant="outline" size="md" aria-label="actions">
-                  <Icon iconName="ellipsis-vertical" iconStyle="regular" className="mx-1" />
+                <Button variant="outline" size="md" aria-label="actions" className="w-8 justify-center">
+                  <Icon iconName="ellipsis-vertical" iconStyle="regular" />
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content>
@@ -352,11 +352,11 @@ export function VariableList({
             return (
               <div className="flex items-center gap-3" onClick={() => _onEditVariable(variable)}>
                 {variable.value !== null ? (
-                  <Icon className="ml-0.5 text-neutral-400" iconName="file-lines" />
+                  <Icon className="ml-0.5 text-neutral" iconName="file-lines" />
                 ) : (
-                  <Icon className="ml-0.5 text-neutral-400" iconName="file-lock" />
+                  <Icon className="ml-0.5 text-neutral" iconName="file-lock" />
                 )}
-                <span className="cursor-pointer text-sky-500 hover:underline">
+                <span className="cursor-pointer text-info hover:underline">
                   {getEnvironmentVariableFileMountPath(variable)}
                 </span>
               </div>
@@ -390,7 +390,7 @@ export function VariableList({
                 return (
                   <>
                     <span className="text-sm font-medium">{value ? upperCaseFirstLetter(value) : 'Null'}</span>
-                    <span className="text-xs text-neutral-350">{count}</span>
+                    <span className="text-xs text-neutral-subtle">{count}</span>
                   </>
                 )
               },
@@ -430,7 +430,7 @@ export function VariableList({
             return (
               <>
                 <span className="text-sm font-medium">{upperCaseFirstLetter(value)}</span>
-                <span className="text-xs text-neutral-350">{count}</span>
+                <span className="text-xs text-neutral-subtle">{count}</span>
               </>
             )
           },
@@ -510,7 +510,7 @@ export function VariableList({
       <EmptyState
         title="No variable found"
         description="You can create a variable from the button on the top"
-        className="mt-2 rounded-t-sm bg-white pt-10"
+        className="mt-2 rounded-t-sm bg-background pt-10"
       />
     )
   }
diff --git a/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx b/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx
index 58a2e865dde..f595acb5063 100644
--- a/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx
+++ b/libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx
@@ -13,10 +13,7 @@ import {
   useEditCluster,
   useUpdateKarpenterPrivateFargate,
 } from '@qovery/domains/clusters/feature'
-import {
-  type ClusterResourcesEdit,
-  type SCWControlPlaneFeatureType,
-} from '@qovery/shared/interfaces'
+import { type ClusterResourcesEdit, type SCWControlPlaneFeatureType } from '@qovery/shared/interfaces'
 import { useModal } from '@qovery/shared/ui'
 import { PageSettingsResources } from '../../ui/page-settings-resources/page-settings-resources'
 
diff --git a/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx b/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx
index bfd052d2f6c..d91ff7a4d0e 100644
--- a/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx
+++ b/libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx
@@ -263,7 +263,7 @@ export function Spotlight({ organizationId, open, onOpenChange }: SpotlightProps
       className="bg-surface-neutral-subtle"
       loop
     >
-      <div className="outline-neutral rounded-lg bg-surface-neutral outline outline-[1px]">
+      <div className="rounded-lg bg-surface-neutral outline outline-[1px] outline-neutral">
         <div className="flex w-full items-center border-b border-neutral pl-4 text-base text-neutral-subtle">
           <Icon iconName="magnifying-glass" iconStyle="regular" />
           <Command.Input
diff --git a/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.spec.tsx b/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.spec.tsx
index 36d4e93220f..bf36a8530b7 100644
--- a/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.spec.tsx
+++ b/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.spec.tsx
@@ -43,4 +43,11 @@ describe('StickyActionFormToaster', () => {
 
     expect(screen.getByTestId('submit-button')).toBeDisabled()
   })
+
+  it('should allow customizing submit button color', () => {
+    props.disabledValidation = false
+    renderWithProviders(<StickyActionFormToaster {...props} submitButtonColor="red" />)
+
+    expect(screen.getByTestId('submit-button')).toHaveClass('bg-surface-negative-solid')
+  })
 })
diff --git a/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx b/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx
index 0ba3c520db5..75f9f866a1a 100644
--- a/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx
+++ b/libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import Button from '../button/button'
+import Button, { type ButtonProps } from '../button/button'
 
 export interface StickyActionFormToasterProps {
   visible?: boolean
@@ -8,6 +8,7 @@ export interface StickyActionFormToasterProps {
   resetLabel?: string
   onSubmit?: () => void
   submitLabel?: string
+  submitButtonColor?: ButtonProps['color']
   className?: string
   disabledValidation?: boolean
   loading?: boolean
@@ -22,6 +23,7 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
     onSubmit,
     className = '',
     visible = false,
+    submitButtonColor,
   } = props
 
   const [visibleState, setVisibleState] = useState(visible)
@@ -37,6 +39,8 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
     }
   }, [visible])
 
+  const submitButtonColorValue = submitButtonColor ?? 'green'
+
   return (
     <div className={`sticky bottom-4 flex justify-center ${className} ${!visibleState ? 'mb-[52px]' : ''}`}>
       <div
@@ -54,7 +58,7 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
           )}
           {submitLabel && onSubmit && (
             <Button
-              color="green"
+              color={submitButtonColorValue}
               size="md"
               data-testid="submit-button"
               onClick={() => onSubmit()}
diff --git a/tailwind-workspace-preset.js b/tailwind-workspace-preset.js
index 2b956fc8651..c6951c3fa84 100644
--- a/tailwind-workspace-preset.js
+++ b/tailwind-workspace-preset.js
@@ -119,15 +119,18 @@ module.exports = {
       },
       spacing: {
         'right-help-sidebar': '22.5rem',
-        'navbar-height': '4rem',
+        'navbar-height': '2.75rem',
+        'breadcrumb-height': '4rem',
       },
       maxWidth: {
         'content-with-navigation-left': '44.5rem',
       },
       minHeight: {
-        'page-container': 'calc(100vh - theme(spacing.navbar-height))',
-        'page-container-wbanner': 'calc(100vh - theme(spacing.navbar-height) - 40px)',
-        'page-container-wprogressbar': 'calc(100vh - theme(spacing.navbar-height) - 6px)',
+        'page-container': 'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height))',
+        'page-container-wbanner':
+          'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 40px)',
+        'page-container-wprogressbar':
+          'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 6px)',
       },
       fontFamily: {
         sans: ['Roboto', 'Helvetica', 'sans-serif'],