diff --git a/libs/domains/services/feature/src/index.ts b/libs/domains/services/feature/src/index.ts
index a6c78c963e8..1115f99e231 100644
--- a/libs/domains/services/feature/src/index.ts
+++ b/libs/domains/services/feature/src/index.ts
@@ -23,6 +23,9 @@ export * from './lib/hooks/use-service-statuses/use-service-statuses'
 export * from './lib/hooks/use-service-type/use-service-type'
 export * from './lib/hooks/use-service/use-service'
 export * from './lib/hooks/use-services/use-services'
+export * from './lib/hooks/use-service-deployment-and-running-statuses/use-service-deployment-and-running-statuses'
+export * from './lib/hooks/use-services-list/use-services-list'
+export * from './lib/hooks/use-services-list-context/use-services-list-context'
 export * from './lib/hooks/use-delete-all-services/use-delete-all-services'
 export * from './lib/hooks/use-delete-service/use-delete-service'
 export * from './lib/hooks/use-edit-service/use-edit-service'
diff --git a/libs/domains/services/feature/src/lib/hooks/use-service-deployment-and-running-statuses/use-service-deployment-and-running-statuses.ts b/libs/domains/services/feature/src/lib/hooks/use-service-deployment-and-running-statuses/use-service-deployment-and-running-statuses.ts
new file mode 100644
index 00000000000..15293334432
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/hooks/use-service-deployment-and-running-statuses/use-service-deployment-and-running-statuses.ts
@@ -0,0 +1,72 @@
+import { useQuery } from '@tanstack/react-query'
+import { P, match } from 'ts-pattern'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import { type ServiceRunningStatus, type ServiceStatuses } from '@qovery/shared/interfaces'
+import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseDeploymentFullStatusProps {
+  environmentId?: string
+  service?: AnyService
+}
+
+export function useServiceDeploymentAndRunningStatuses({
+  environmentId: envId,
+  service,
+}: UseDeploymentFullStatusProps) {
+  const serviceId = service?.id ?? ''
+  const environmentId = envId ?? ''
+  const { data: runningStatus } = useQuery({
+    ...queries.services.runningStatus(environmentId, serviceId),
+  })
+
+  const { data: deploymentStatus } = useQuery({
+    ...queries.services.deploymentStatus(environmentId, serviceId),
+  })
+
+  const deploymentStatusLabel = upperCaseFirstLetter(
+    (deploymentStatus?.state === 'READY' ? 'NEVER_DEPLOYED' : deploymentStatus?.state)?.replace('_', ' ') ?? 'STOPPED'
+  )
+  const runningStatusLabel = upperCaseFirstLetter(runningStatus?.state.replace('_', ' ') ?? 'STOPPED')
+  const isManagedDb = service?.serviceType === 'DATABASE' && service.mode === 'MANAGED'
+  const runningStatusOverride: ServiceRunningStatus = match({ runningStatus, isManagedDb })
+    .with({ runningStatus: P.any, isManagedDb: true }, () => ({
+      triggered_action: undefined,
+      ...deploymentStatus,
+      state: match(deploymentStatus?.state)
+        .with('DEPLOYED', () => 'RUNNING' as const)
+        .otherwise(() => 'UNKNOWN' as const),
+      stateLabel: match(deploymentStatus?.state)
+        .with('DEPLOYED', () => 'Running')
+        .otherwise(() => 'Unknown'),
+    }))
+    .with({ runningStatus: P.nullish, isManagedDb: false }, () => ({
+      state: undefined,
+      stateLabel: undefined,
+      triggered_action: undefined,
+    }))
+    .with({ runningStatus: P.not(P.nullish) }, ({ runningStatus }) => ({
+      triggered_action: undefined, // will be unpacked from runningStatus if present
+      ...runningStatus,
+      stateLabel: runningStatusLabel,
+    }))
+    .exhaustive()
+
+  const data: ServiceStatuses = {
+    runningStatus: runningStatusOverride,
+    ...(deploymentStatus
+      ? {
+          deploymentStatus: {
+            ...deploymentStatus,
+            stateLabel: deploymentStatusLabel,
+          },
+        }
+      : {}),
+  }
+
+  return {
+    data,
+  }
+}
+
+export default useServiceDeploymentAndRunningStatuses
diff --git a/libs/domains/services/feature/src/lib/hooks/use-services-list-context/use-services-list-context.tsx b/libs/domains/services/feature/src/lib/hooks/use-services-list-context/use-services-list-context.tsx
new file mode 100644
index 00000000000..7d45a426be4
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/hooks/use-services-list-context/use-services-list-context.tsx
@@ -0,0 +1,68 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import { type ServiceStatuses } from '@qovery/shared/interfaces'
+import { useServicesList } from '../use-services-list/use-services-list'
+
+type ServiceWithStatus = AnyService & ServiceStatuses
+
+interface ServicesListContextType {
+  statuses: Record<string, ServiceStatuses>
+  services: ServiceWithStatus[]
+  addStatusForService: (serviceId: string, status: ServiceStatuses) => void
+}
+
+export function ServicesListProvider({
+  children,
+  environmentId,
+}: {
+  children: React.ReactNode
+  environmentId: string
+}) {
+  const [servicesList, setServicesList] = useState<AnyService[]>([])
+  const [statuses, setStatuses] = useState<ServicesListContextType['statuses']>({})
+
+  const { data: servicesResponse = [] } = useServicesList({ environmentId, suspense: true })
+
+  useEffect(() => {
+    setServicesList(servicesResponse)
+  }, [servicesResponse])
+
+  const addStatusForService = useCallback((serviceId: string, status: ServiceStatuses) => {
+    setStatuses((prevStatuses) => ({
+      ...prevStatuses,
+      [serviceId]: {
+        ...prevStatuses[serviceId],
+        ...status,
+      },
+    }))
+  }, [])
+
+  const services = useMemo((): ServiceWithStatus[] => {
+    return servicesList.map((service) => ({
+      ...service,
+      runningStatus: statuses[service.id]?.runningStatus,
+      deploymentStatus: statuses[service.id]?.deploymentStatus,
+    }))
+  }, [servicesList, statuses])
+
+  const value = useMemo<ServicesListContextType>(
+    () => ({
+      statuses,
+      services,
+      addStatusForService,
+    }),
+    [services, statuses, addStatusForService]
+  )
+
+  return <ServicesListContext.Provider value={value}>{children}</ServicesListContext.Provider>
+}
+
+export const ServicesListContext = createContext<ServicesListContextType | undefined>(undefined)
+
+export function useServicesListContext() {
+  const context = useContext(ServicesListContext)
+  if (context === undefined) {
+    throw new Error('useServiceLogsContext must be used within a ServicesListProvider')
+  }
+  return context
+}
diff --git a/libs/domains/services/feature/src/lib/hooks/use-services-list/use-services-list.ts b/libs/domains/services/feature/src/lib/hooks/use-services-list/use-services-list.ts
new file mode 100644
index 00000000000..1a366ca734d
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/hooks/use-services-list/use-services-list.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseServicesListProps {
+  environmentId?: string
+  suspense?: boolean
+}
+
+export function useServicesList({ environmentId, suspense = false }: UseServicesListProps) {
+  return useQuery({
+    ...queries.services.list(environmentId!),
+    select(services) {
+      services.sort(({ name: nameA }, { name: nameB }) => nameA.localeCompare(nameB))
+      return services
+    },
+    enabled: Boolean(environmentId),
+    suspense,
+  })
+}
+
+export default useServicesList
diff --git a/libs/domains/services/feature/src/lib/last-version/last-version.tsx b/libs/domains/services/feature/src/lib/last-version/last-version.tsx
index 0e82b58af4f..804ec94c265 100644
--- a/libs/domains/services/feature/src/lib/last-version/last-version.tsx
+++ b/libs/domains/services/feature/src/lib/last-version/last-version.tsx
@@ -117,7 +117,7 @@ export function LastVersion({ organizationId, projectId, service, version }: Las
 
   return (
     <span className="flex">
-      <Badge variant="surface" className="min-w-7 max-w-[81px] rounded-r-none border-r-0 border-neutral-250">
+      <Badge variant="outline" className="min-w-7 max-w-[81px] rounded-r-none border-r-0">
         <span className="flex h-full w-full items-center justify-center truncate">
           <Truncate text={version} truncateLimit={8} />
         </span>
@@ -125,7 +125,7 @@ export function LastVersion({ organizationId, projectId, service, version }: Las
       <Tooltip content="Deploy from another version">
         <Button
           type="button"
-          variant="surface"
+          variant="outline"
           size="xs"
           className="w-7 justify-center gap-1 rounded-l-none px-1.5"
           onClick={(e) => deployVersion(e)}
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
index d94b144d09d..dd18b7f1802 100644
--- a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
@@ -9,12 +9,12 @@ exports[`SelectCommitModal should match snapshot 1`] = `
       class="flex flex-col gap-2 text-sm"
     >
       <h2
-        class="h4 max-w-sm truncate text-neutral-400 dark:text-neutral-50"
+        class="h4 max-w-sm truncate text-neutral"
       >
         Deploy other version
       </h2>
       <p
-        class="text-neutral-350 dark:text-neutral-50"
+        class="text-neutral-subtle"
       >
         Type a version to deploy
       </p>
@@ -54,21 +54,21 @@ exports[`SelectCommitModal should match snapshot 1`] = `
           class="pl-2"
         >
           <div
-            class="relative pl-5 text-sm font-medium text-neutral-350"
+            class="relative pl-5 text-sm font-medium text-neutral-subtle"
           >
             <i
               aria-hidden="true"
-              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-300 dark:text-neutral-350"
+              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
             />
             Commit
              on 
-            Jan 01, 0123
+            Dec 31, 0122
           </div>
           <div
-            class="border-l border-neutral-250 pb-5 pl-5 pt-3 dark:border-neutral-350"
+            class="border-l border-neutral pb-5 pl-5 pt-3"
           >
             <label
-              class="-mt-px flex w-full flex-row gap-3 border border-neutral-250 p-3 first:rounded-t-md last:rounded-b-md dark:border-neutral-350 cursor-pointer"
+              class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md cursor-pointer"
             >
               <div>
                 <button
@@ -86,14 +86,14 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                 class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
               >
                 <a
-                  class="max-w-full truncate font-medium text-neutral-400 hover:text-brand-500 dark:text-neutral-50"
+                  class="max-w-full truncate font-medium text-neutral"
                   rel="noreferrer"
                   target="_blank"
                 >
                   lorem
                 </a>
                 <span
-                  class="text-neutral-350 dark:text-neutral-50"
+                  class="text-neutral-subtle"
                 >
                   committed 
                   1904 years
@@ -156,21 +156,21 @@ exports[`SelectCommitModal should match snapshot 1`] = `
           class="pl-2"
         >
           <div
-            class="relative pl-5 text-sm font-medium text-neutral-350"
+            class="relative pl-5 text-sm font-medium text-neutral-subtle"
           >
             <i
               aria-hidden="true"
-              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-300 dark:text-neutral-350"
+              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
             />
             Commit
              on 
-            Jan 01, 0456
+            Dec 31, 0455
           </div>
           <div
-            class="border-l border-neutral-250 pb-5 pl-5 pt-3 dark:border-neutral-350"
+            class="border-l border-neutral pb-5 pl-5 pt-3"
           >
             <label
-              class="-mt-px flex w-full flex-row gap-3 border border-neutral-250 p-3 first:rounded-t-md last:rounded-b-md dark:border-neutral-350 bg-neutral-100 dark:bg-neutral-500"
+              class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md bg-surface-neutral-subtle"
             >
               <div>
                 <button
@@ -192,7 +192,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                   >
                     <i
                       aria-hidden="true"
-                      class="fa-regular fa-check text-xs text-neutralInvert"
+                      class="fa-regular fa-check text-xs text-neutral"
                     />
                   </span>
                 </button>
@@ -201,14 +201,14 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                 class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
               >
                 <a
-                  class="max-w-full truncate font-medium hover:text-brand-500 dark:text-neutral-50 text-neutral-350"
+                  class="max-w-full truncate font-medium text-brand"
                   rel="noreferrer"
                   target="_blank"
                 >
                   ipsum
                 </a>
                 <span
-                  class="text-neutral-350 dark:text-neutral-50"
+                  class="text-neutral-subtle"
                 >
                   committed 
                   1571 years
@@ -274,7 +274,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-white p-5"
+      class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5"
     >
       <button
         class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.tsx b/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.tsx
index 588f7e28d32..9170493c168 100644
--- a/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.tsx
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.tsx
@@ -76,8 +76,8 @@ export function SelectCommitModal({
   return (
     <div className="flex flex-col gap-6 p-5">
       <div className="flex flex-col gap-2 text-sm">
-        <h2 className="h4 max-w-sm truncate text-neutral-400 dark:text-neutral-50">{title}</h2>
-        <p className="text-neutral-350 dark:text-neutral-50">{description}</p>
+        <h2 className="h4 max-w-sm truncate text-neutral">{title}</h2>
+        <p className="text-neutral-subtle">{description}</p>
         {children}
       </div>
 
@@ -88,14 +88,11 @@ export function SelectCommitModal({
           <ScrollShadowWrapper className="max-h-[50vh] pb-[60px]">
             {Object.entries(filterCommits).map(([date, commits]) => (
               <div key={date} className="pl-2">
-                <div className="relative pl-5 text-sm font-medium text-neutral-350">
-                  <Icon
-                    iconName="code-commit"
-                    className="absolute left-0 top-1 -translate-x-1/2 text-neutral-300 dark:text-neutral-350"
-                  />
+                <div className="relative pl-5 text-sm font-medium text-neutral-subtle">
+                  <Icon iconName="code-commit" className="absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle" />
                   {pluralize(commits.length, 'Commit')} on {dateToFormat(date, 'MMM dd, yyyy')}
                 </div>
-                <div className="border-l border-neutral-250 pb-5 pl-5 pt-3 dark:border-neutral-350">
+                <div className="border-l border-neutral pb-5 pl-5 pt-3">
                   {commits.map(
                     (
                       { author_name, author_avatar_url, commit_page_url, created_at, git_commit_id, message },
@@ -109,10 +106,10 @@ export function SelectCommitModal({
                         <label
                           key={git_commit_id}
                           className={twMerge(
-                            '-mt-px flex w-full flex-row gap-3 border border-neutral-250 p-3 first:rounded-t-md last:rounded-b-md dark:border-neutral-350',
-                            isCurrentDeployedCommit ? 'bg-neutral-100 dark:bg-neutral-500' : 'cursor-pointer',
+                            '-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md',
+                            isCurrentDeployedCommit ? 'bg-surface-neutral-subtle' : 'cursor-pointer',
                             clsx({
-                              'border-brand-500 bg-brand-50 dark:bg-neutral-600': isSelected,
+                              'border-surface-brand-solid bg-surface-brand-component': isSelected,
                               'border-t-transparent': isSelectedSiblings,
                             })
                           )}
@@ -130,17 +127,15 @@ export function SelectCommitModal({
                               target="_blank"
                               rel="noreferrer"
                               className={twMerge(
-                                'max-w-full truncate font-medium text-neutral-400 hover:text-brand-500 dark:text-neutral-50',
+                                'max-w-full truncate font-medium text-neutral',
                                 clsx({
-                                  'text-neutral-350': isCurrentDeployedCommit,
+                                  'text-brand': isCurrentDeployedCommit,
                                 })
                               )}
                             >
                               {message}
                             </a>
-                            <span className="text-neutral-350 dark:text-neutral-50">
-                              committed {timeAgo(new Date(created_at))} ago
-                            </span>
+                            <span className="text-neutral-subtle">committed {timeAgo(new Date(created_at))} ago</span>
                           </div>
                           <div className="flex flex-col items-end gap-2">
                             <div className="flex items-center gap-1.5">
@@ -152,12 +147,7 @@ export function SelectCommitModal({
                               />
                               <TagCommit commitId={git_commit_id} />
                             </div>
-                            <span
-                              className={clsx(
-                                'text-xs',
-                                isCurrentDeployedCommit ? 'text-neutral-400 dark:text-neutral-50' : 'text-brand-500'
-                              )}
-                            >
+                            <span className={clsx('text-xs', isCurrentDeployedCommit ? 'text-brand' : '')}>
                               {
                                 isSelected ? (
                                   'Selected version'
@@ -179,12 +169,12 @@ export function SelectCommitModal({
           </ScrollShadowWrapper>
         </RadioGroup.Root>
       ) : (
-        <div className="px-3 py-6 text-center">
-          <Icon iconName="wave-pulse" className="text-neutral-350" />
-          <p className="mt-1 text-xs font-medium text-neutral-350">No result for this search</p>
+        <div className="px-3 py-6 pb-[60px] text-center">
+          <Icon iconName="wave-pulse" className="text-neutral" />
+          <p className="mt-1 text-xs font-medium text-neutral">No result for this search</p>
         </div>
       )}
-      <div className="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-white p-5">
+      <div className="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5">
         <Button variant="outline" color="neutral" size="lg" onClick={() => onCancel()}>
           Cancel
         </Button>
diff --git a/libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx b/libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx
index e6ab950f748..10eae53d105 100644
--- a/libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx
+++ b/libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx
@@ -727,10 +727,10 @@ function MenuOtherActions({
       description: 'Choose how to remove this service',
       entities: [
         <div className="flex items-center gap-2" key={`service-avatar-${service.id}`}>
-          <div className="flex h-5 w-5 items-center justify-center rounded-full border border-neutral-200">
+          <div className="flex h-5 w-5 items-center justify-center rounded-full border border-neutral">
             <ServiceAvatar service={service} size="xs" />
           </div>
-          <span className="text-sm font-medium text-neutral-400">{service.name}</span>
+          <span className="text-sm font-medium text-neutral">{service.name}</span>
         </div>,
       ],
       actions: [
@@ -738,20 +738,20 @@ function MenuOtherActions({
           id: 'uninstall',
           title: 'Uninstall',
           description: (
-            <div className="flex flex-col gap-2 text-neutral-350">
+            <div className="flex flex-col gap-2 text-neutral-subtle">
               <span>
                 Stop and remove the service but keep all Qovery configuration, data and settings.
                 <br />
                 You can easily reinstall or redeploy later with the same configuration.
               </span>
               <div>
-                <span className="font-medium text-neutral-400">What's deleted:</span>
+                <span className="font-medium text-neutral-subtle">What's deleted:</span>
                 <ul className="list-disc pl-4">
                   <li>All service data</li>
                 </ul>
               </div>
               <div>
-                <span className="font-medium text-neutral-400">What's kept:</span>
+                <span className="font-medium text-neutral-subtle">What's kept:</span>
                 <ul className="list-disc pl-4">
                   <li>Qovery configuration</li>
                   <li>Environment variables</li>
@@ -774,14 +774,14 @@ function MenuOtherActions({
           id: 'delete',
           title: 'Delete permanently',
           description: (
-            <div className="flex flex-col gap-2 text-neutral-350">
+            <div className="flex flex-col gap-2 text-neutral-subtle">
               <span>
                 Permanently remove the service and all associated data.
                 <br />
                 This action cannot be undone.
               </span>
               <div>
-                <span className="font-medium text-neutral-400">What's deleted:</span>
+                <span className="font-medium text-neutral-subtle">What's deleted:</span>
                 <ul className="list-disc pl-4">
                   <li>All service data</li>
                   <li>Qovery configuration</li>
@@ -959,10 +959,7 @@ export function ServiceActionToolbar({
         <>
           <Tooltip content="Logs">
             <ActionToolbar.Button asChild>
-              <Link
-                to={environmentLogsLink + SERVICE_LOGS_URL(service.id)}
-                // state={{ prevUrl: pathname }}
-              >
+              <Link to={environmentLogsLink + SERVICE_LOGS_URL(service.id)} color="neutral">
                 <Icon iconName="scroll" />
               </Link>
             </ActionToolbar.Button>
diff --git a/libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.tsx b/libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.tsx
index b39d9f763a2..8fa92b2ddb1 100644
--- a/libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.tsx
+++ b/libs/domains/services/feature/src/lib/service-links-popover/service-links-popover.tsx
@@ -70,7 +70,7 @@ export function ServiceLinksPopover({
           </p>
           {serviceType !== 'HELM' && (
             <Popover.Close>
-              <Link to={pathDomainsSetting} color="brand" className="text-ssm">
+              <Link to={pathDomainsSetting} color="neutral" className="text-ssm">
                 Customize
                 <Icon iconName="circle-plus" iconStyle="regular" className="text-xs" />
               </Link>
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-cells/index.ts b/libs/domains/services/feature/src/lib/service-list/service-list-cells/index.ts
new file mode 100644
index 00000000000..f0cbe4b47a6
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/index.ts
@@ -0,0 +1,4 @@
+export * from './service-name-cell'
+export * from './service-version-cell'
+export * from './service-last-deployment-cell'
+export * from './service-running-status-cell'
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx
new file mode 100644
index 00000000000..28b8200d9fe
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx
@@ -0,0 +1,40 @@
+import { type AnyService } from '@qovery/domains/services/data-access'
+import { DEPLOYMENT_LOGS_VERSION_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
+import { Icon, Link, Tooltip } from '@qovery/shared/ui'
+import { dateUTCString, timeAgo } from '@qovery/shared/util-dates'
+import useDeploymentStatus from '../../hooks/use-deployment-status/use-deployment-status'
+
+type ServiceLastDeploymentCellProps = {
+  service: AnyService
+  organizationId: string
+  projectId: string
+  environmentId: string
+}
+
+export function ServiceLastDeploymentCell({
+  service,
+  organizationId,
+  projectId,
+  environmentId,
+}: ServiceLastDeploymentCellProps) {
+  const { data: deploymentStatus } = useDeploymentStatus({ environmentId: environmentId, serviceId: service.id })
+  const date = deploymentStatus?.last_deployment_date
+  const linkLog =
+    ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
+    DEPLOYMENT_LOGS_VERSION_URL(service?.id, deploymentStatus?.execution_id)
+
+  return date ? (
+    <Link
+      to={linkLog}
+      className="group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-subtle hover:translate-x-0 hover:text-neutral"
+      onClick={(event) => event.stopPropagation()}
+    >
+      <Tooltip content={dateUTCString(date)} delayDuration={200}>
+        <span className="whitespace-nowrap text-ssm font-normal">{timeAgo(new Date(date))}</span>
+      </Tooltip>
+      <Icon iconName="arrow-up-right" iconStyle="regular" className="text-ssm opacity-0 group-hover:opacity-100" />
+    </Link>
+  ) : (
+    <span className="block w-full text-right">-</span>
+  )
+}
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx
new file mode 100644
index 00000000000..5da1d107811
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx
@@ -0,0 +1,244 @@
+import { useNavigate } from '@tanstack/react-router'
+import { type Environment } from 'qovery-typescript-axios'
+import { match } from 'ts-pattern'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import {
+  APPLICATION_GENERAL_URL,
+  APPLICATION_URL,
+  DATABASE_GENERAL_URL,
+  DATABASE_URL,
+  DEPLOYMENT_LOGS_VERSION_URL,
+  ENVIRONMENT_LOGS_URL,
+} from '@qovery/shared/routes'
+import { AnimatedGradientText, Badge, Button, Icon, Link, Tooltip } from '@qovery/shared/ui'
+import { formatCronExpression, pluralize, upperCaseFirstLetter } from '@qovery/shared/util-js'
+import useDeploymentStatus from '../../hooks/use-deployment-status/use-deployment-status'
+import ServiceActionToolbar from '../../service-action-toolbar/service-action-toolbar'
+import { ServiceAvatar } from '../../service-avatar/service-avatar'
+import ServiceLinksPopover from '../../service-links-popover/service-links-popover'
+import ServiceTemplateIndicator from '../../service-template-indicator/service-template-indicator'
+
+export function ServiceNameCell({ service, environment }: { service: AnyService; environment: Environment }) {
+  const navigate = useNavigate()
+  const { data: deploymentStatus } = useDeploymentStatus({ environmentId: environment.id, serviceId: service.id })
+  const deploymentRequestsCount = Number(deploymentStatus?.deployment_requests_count)
+
+  const LinkDeploymentStatus = () => {
+    const environmentLog = ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id)
+    const deploymentLog = DEPLOYMENT_LOGS_VERSION_URL(service.id, deploymentStatus?.execution_id)
+    // const precheckLog = ENVIRONMENT_PRE_CHECK_LOGS_URL(deploymentStatus?.execution_id ?? '')
+
+    return match(deploymentStatus?.state)
+      .with('DEPLOYMENT_QUEUED', 'DELETE_QUEUED', 'STOP_QUEUED', 'RESTART_QUEUED', (s) => (
+        <span className="text-ssm font-normal text-neutral-subtle">{upperCaseFirstLetter(s).replace('_', ' ')}...</span>
+      ))
+      .with('CANCELED', () => <span className="text-ssm font-normal text-neutral-subtle">Last deployment aborted</span>)
+      .with('DEPLOYING', 'RESTARTING', 'BUILDING', 'DELETING', 'CANCELING', 'STOPPING', (s) => (
+        <Link
+          to={environmentLog + deploymentLog}
+          color="brand"
+          underline
+          size="ssm"
+          className="group flex truncate"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <AnimatedGradientText shimmerWidth={80} className="group-hover:text-brand">
+            <span className="flex items-center gap-0.5">
+              {upperCaseFirstLetter(s)}... <Icon iconName="arrow-up-right" />
+            </span>
+          </AnimatedGradientText>
+        </Link>
+      ))
+      .with('DEPLOYMENT_ERROR', 'DELETE_ERROR', 'STOP_ERROR', 'RESTART_ERROR', 'BUILD_ERROR', () => (
+        <Link
+          // to={deploymentStatus?.steps === null ? environmentLog + precheckLog : environmentLog + deploymentLog}
+          to={environmentLog + deploymentLog}
+          color="red"
+          underline
+          size="ssm"
+          className="truncate"
+          onClick={(e) => e.stopPropagation()}
+        >
+          Last deployment failed
+          <Icon iconName="arrow-up-right" />
+        </Link>
+      ))
+      .otherwise(() => null)
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <span className="flex min-w-0 items-center gap-4 text-sm font-medium text-neutral">
+        <ServiceTemplateIndicator service={service} size="sm">
+          <ServiceAvatar service={service} size="sm" border="solid" />
+        </ServiceTemplateIndicator>
+        {match(service)
+          .with({ serviceType: 'DATABASE' }, (db) => {
+            return (
+              <span className="flex min-w-0 shrink flex-col truncate pr-2">
+                <span className="flex items-center gap-1.5">
+                  <Tooltip content={db.name}>
+                    <Link
+                      className="inline max-w-max truncate"
+                      to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
+                      params={{
+                        organizationId: environment.organization.id,
+                        projectId: environment.project.id,
+                        environmentId: environment.id,
+                        serviceId: service.id,
+                      }}
+                      underline
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {db.name}
+                    </Link>
+                  </Tooltip>
+                </span>
+                <LinkDeploymentStatus />
+              </span>
+            )
+          })
+          .with({ serviceType: 'JOB' }, (job) => {
+            const schedule = match(job)
+              .with(
+                { job_type: 'CRON' },
+                ({ schedule }) =>
+                  `Triggered: ${formatCronExpression(schedule.cronjob?.scheduled_at)} (${schedule.cronjob?.timezone})`
+              )
+              .with({ job_type: 'LIFECYCLE' }, ({ schedule }) => {
+                const actions = [
+                  schedule.on_start && 'Deploy',
+                  schedule.on_stop && 'Stop',
+                  schedule.on_delete && 'Delete',
+                ]
+                  .filter(Boolean)
+                  .join(' - ')
+                return actions ? `Triggered on: ${actions}` : undefined
+              })
+              .exhaustive()
+
+            return (
+              <span className="flex min-w-0 shrink flex-col truncate pr-2">
+                <span className="flex items-center gap-1.5">
+                  <Tooltip content={service.name}>
+                    <Link
+                      className="inline max-w-max truncate"
+                      to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
+                      params={{
+                        organizationId: environment.organization.id,
+                        projectId: environment.project.id,
+                        environmentId: environment.id,
+                        serviceId: service.id,
+                      }}
+                      underline
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {service.name}
+                    </Link>
+                  </Tooltip>
+                  <Tooltip content={schedule}>
+                    <span className="truncate text-sm font-normal">
+                      <Icon iconName="info-circle" iconStyle="regular" />
+                    </span>
+                  </Tooltip>
+                </span>
+                <LinkDeploymentStatus />
+              </span>
+            )
+          })
+          .otherwise(() => (
+            <span className="flex min-w-0 shrink flex-col truncate pr-2">
+              <Tooltip content={service.name}>
+                <Link
+                  className="inline max-w-max truncate"
+                  to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
+                  params={{
+                    organizationId: environment.organization.id,
+                    projectId: environment.project.id,
+                    environmentId: environment.id,
+                    serviceId: service.id,
+                  }}
+                  underline
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {service.name}
+                </Link>
+              </Tooltip>
+              <LinkDeploymentStatus />
+            </span>
+          ))}
+
+        {deploymentRequestsCount > 0 && (
+          <Tooltip
+            content={`This service has ${deploymentRequestsCount} queued ${pluralize(deploymentRequestsCount, 'deployment')}`}
+          >
+            <Badge className="flex items-center gap-1">
+              <Icon iconName="clock-eight" iconStyle="regular" />
+              {deploymentRequestsCount}
+            </Badge>
+          </Tooltip>
+        )}
+      </span>
+      <div className="flex shrink-0 items-center gap-5">
+        <div className="flex items-center">
+          {'auto_deploy' in service && service.auto_deploy && (
+            <Tooltip content="Auto-deploy">
+              <span>
+                <Icon className="text-neutral-subtle" iconName="arrows-rotate" />
+              </span>
+            </Tooltip>
+          )}
+          <div onClick={(e) => e.stopPropagation()}>
+            <ServiceLinksPopover
+              organizationId={environment.organization.id}
+              projectId={environment.project.id}
+              environmentId={environment.id}
+              serviceId={service.id}
+              align="start"
+            >
+              <Button variant="surface" color="neutral" radius="full" className="ml-3">
+                <Tooltip content="Links">
+                  <div className="flex items-center gap-1">
+                    <Icon iconName="link" iconStyle="regular" />
+                    <Icon iconName="angle-down" />
+                  </div>
+                </Tooltip>
+              </Button>
+            </ServiceLinksPopover>
+          </div>
+        </div>
+        <div onClick={(e) => e.stopPropagation()}>
+          <ServiceActionToolbar
+            serviceId={service.id}
+            environment={environment}
+            shellAction={match(service)
+              .with({ serviceType: 'DATABASE', mode: 'MANAGED' }, () => undefined)
+              .with(
+                { serviceType: 'DATABASE', mode: 'CONTAINER' },
+                () => () =>
+                  navigate({
+                    to:
+                      DATABASE_URL(environment.organization.id, environment.project.id, environment.id, service.id) +
+                      DATABASE_GENERAL_URL,
+                    state: {
+                      hasShell: true,
+                    } as any,
+                  })
+              )
+              .otherwise(
+                () => () =>
+                  navigate({
+                    to:
+                      APPLICATION_URL(environment.organization.id, environment.project.id, environment.id, service.id) +
+                      APPLICATION_GENERAL_URL,
+                    state: {
+                      hasShell: true,
+                    } as any,
+                  })
+              )}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-running-status-cell.tsx b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-running-status-cell.tsx
new file mode 100644
index 00000000000..0ae54f5616c
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-running-status-cell.tsx
@@ -0,0 +1,133 @@
+import { type Environment, ServiceTypeEnum } from 'qovery-typescript-axios'
+import { ServiceSubActionDto } from 'qovery-ws-typescript-axios'
+import { useEffect } from 'react'
+import { match } from 'ts-pattern'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import {
+  APPLICATION_URL,
+  CLUSTER_URL,
+  DATABASE_GENERAL_URL,
+  DATABASE_URL,
+  SERVICES_GENERAL_URL,
+} from '@qovery/shared/routes'
+import { Link, Skeleton, StatusChip, Tooltip } from '@qovery/shared/ui'
+import { useCheckRunningStatusClosed } from '../../hooks/use-check-running-status-closed/use-check-running-status-closed'
+import { useServiceDeploymentAndRunningStatuses } from '../../hooks/use-service-deployment-and-running-statuses/use-service-deployment-and-running-statuses'
+import { useServicesListContext } from '../../hooks/use-services-list-context/use-services-list-context'
+
+type ServiceRunningStatusCellProps = {
+  service: AnyService
+  organizationId: string
+  projectId: string
+  environment: Environment
+  clusterId: string
+}
+
+export function ServiceRunningStatusCell({
+  service,
+  organizationId,
+  projectId,
+  environment,
+  clusterId,
+}: ServiceRunningStatusCellProps) {
+  const { addStatusForService, statuses } = useServicesListContext()
+  const { data } = useServiceDeploymentAndRunningStatuses({ environmentId: environment.id, service })
+  const { runningStatus, deploymentStatus } = data
+
+  // Setting the status in the context to be used in other cells and filters without needing to fetch it again
+  useEffect(() => {
+    if (
+      data.runningStatus?.state !== statuses[service.id]?.runningStatus.state ||
+      data.deploymentStatus?.state !== statuses[service.id]?.deploymentStatus?.state
+    ) {
+      addStatusForService(service.id, data)
+    }
+  }, [data, addStatusForService, service.id, statuses])
+
+  const { data: checkRunningStatusClosed } = useCheckRunningStatusClosed({
+    clusterId,
+    environmentId: environment.id,
+  })
+
+  const Wrapper = ({ children }: { children: React.ReactNode }) => <div className="min-w-40">{children}</div>
+
+  const link = match(service)
+    .with(
+      { serviceType: ServiceTypeEnum.DATABASE },
+      ({ id }) => DATABASE_URL(organizationId, projectId, environment.id, id) + DATABASE_GENERAL_URL
+    )
+    .otherwise(({ id }) => APPLICATION_URL(organizationId, projectId, environment.id, id) + SERVICES_GENERAL_URL)
+
+  const value = match(runningStatus?.triggered_action)
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_PLAN_ONLY },
+      () => 'Plan ' + runningStatus?.stateLabel?.toLowerCase()
+    )
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_PLAN_AND_APPLY },
+      () => 'Apply ' + runningStatus?.stateLabel?.toLowerCase()
+    )
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_MIGRATE_STATE },
+      () => 'Migrate state ' + runningStatus?.stateLabel?.toLowerCase()
+    )
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_FORCE_UNLOCK_STATE },
+      () => 'Force unlock ' + runningStatus?.stateLabel?.toLowerCase()
+    )
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_DESTROY },
+      () => 'Destroy ' + runningStatus?.stateLabel?.toLowerCase()
+    )
+    .with({ sub_action: ServiceSubActionDto.NONE }, () => runningStatus?.stateLabel)
+    .with(undefined, () => runningStatus?.stateLabel)
+    .exhaustive()
+
+  if (checkRunningStatusClosed) {
+    return (
+      <Wrapper>
+        <Tooltip content="See cluster">
+          <Link
+            as="button"
+            to={CLUSTER_URL(organizationId, environment.id)}
+            onClick={(e) => e.stopPropagation()}
+            className="gap-2 whitespace-nowrap text-sm"
+            size="md"
+            color="neutral"
+            variant="outline"
+            radius="full"
+          >
+            <StatusChip status="STOPPED" />
+            Status unavailable
+          </Link>
+        </Tooltip>
+      </Wrapper>
+    )
+  }
+
+  return (
+    <Wrapper>
+      <Skeleton width={102} height={34} show={!value}>
+        <Tooltip content="See overview">
+          <Link
+            as="button"
+            to={link}
+            onClick={(e) => e.stopPropagation()}
+            className="gap-2 whitespace-nowrap text-sm"
+            size="md"
+            color="neutral"
+            variant="outline"
+            radius="full"
+          >
+            <StatusChip
+              status={match(service)
+                .with({ serviceType: 'DATABASE', mode: 'MANAGED' }, () => deploymentStatus?.state)
+                .otherwise(() => runningStatus?.state)}
+            />
+            {value}
+          </Link>
+        </Tooltip>
+      </Skeleton>
+    </Wrapper>
+  )
+}
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx
new file mode 100644
index 00000000000..0cd96651c06
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx
@@ -0,0 +1,220 @@
+import {
+  type ApplicationGitRepository,
+  type ContainerResponse,
+  type HelmSourceRepositoryResponse,
+} from 'qovery-typescript-axios'
+import { P, match } from 'ts-pattern'
+import {
+  type AnyService,
+  type Application,
+  type Database,
+  type Helm,
+  type Job,
+  type Terraform,
+} from '@qovery/domains/services/data-access'
+import {
+  IconEnum,
+  isHelmGitSource,
+  isHelmRepositorySource,
+  isJobContainerSource,
+  isJobGitSource,
+} from '@qovery/shared/enums'
+import { ExternalLink, Icon, Tooltip, Truncate } from '@qovery/shared/ui'
+import { buildGitProviderUrl } from '@qovery/shared/util-git'
+import { containerRegistryKindToIcon } from '@qovery/shared/util-js'
+import LastCommit from '../../last-commit/last-commit'
+import LastVersion from '../../last-version/last-version'
+
+type ServiceVersionCellProps = {
+  service: AnyService
+  organizationId: string
+  projectId: string
+}
+
+export function ServiceVersionCell({ service, organizationId, projectId }: ServiceVersionCellProps) {
+  const gitInfo = (service: Application | Job | Helm | Terraform, gitRepository?: ApplicationGitRepository) =>
+    gitRepository && (
+      <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+        <div className="flex w-44 flex-col gap-1.5">
+          <span className="flex items-center gap-2 text-neutral-subtle">
+            <Icon className="h-3 w-3 text-inherit" name={gitRepository.provider} />
+            <ExternalLink
+              href={gitRepository.url}
+              underline
+              color="neutral"
+              size="ssm"
+              withIcon={false}
+              className="font-normal"
+            >
+              <Truncate text={gitRepository.name} truncateLimit={20} />
+            </ExternalLink>
+          </span>
+          {gitRepository.branch && gitRepository.url && (
+            <span className="flex items-center gap-2 text-neutral-subtle">
+              <Icon className="h-3 w-3 text-inherit" iconName="code-branch" iconStyle="regular" />
+              <ExternalLink
+                href={buildGitProviderUrl(gitRepository.url, gitRepository.branch)}
+                underline
+                color="neutral"
+                size="ssm"
+                withIcon={false}
+                className="font-normal"
+              >
+                <Truncate text={gitRepository.branch} truncateLimit={20} />
+              </ExternalLink>
+            </span>
+          )}
+        </div>
+        <LastCommit
+          organizationId={organizationId}
+          projectId={projectId}
+          gitRepository={gitRepository}
+          service={service}
+        />
+      </div>
+    )
+  const containerInfo = (containerImage?: Pick<ContainerResponse, 'image_name' | 'tag' | 'registry'>) =>
+    containerImage && (
+      <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+        <div className="flex w-44 flex-col gap-1.5">
+          <span className="flex items-center gap-2 text-neutral">
+            <Icon width={16} name={containerRegistryKindToIcon(containerImage.registry.kind)} />
+            <Tooltip
+              content={
+                <span className="text-center">
+                  {containerImage.registry.name.length >= 20 && (
+                    <>
+                      {containerImage.registry.name} <br />
+                    </>
+                  )}{' '}
+                  {containerImage.registry.url}
+                </span>
+              }
+            >
+              <span className="text-neutral">
+                {containerImage.registry.name.length >= 20 ? (
+                  <Truncate text={containerImage.registry.name.toLowerCase()} truncateLimit={20} />
+                ) : (
+                  containerImage.registry.name.toLowerCase()
+                )}
+              </span>
+            </Tooltip>
+          </span>
+          <span className="flex items-center gap-2 text-neutral">
+            <Icon width={16} name={IconEnum.CONTAINER} />
+            <Truncate text={`${containerImage.image_name}`} truncateLimit={20} />
+          </span>
+        </div>
+        {(service.serviceType === 'CONTAINER' ||
+          (service.serviceType === 'JOB' && isJobContainerSource(service.source))) && (
+          <LastVersion
+            organizationId={organizationId}
+            projectId={projectId}
+            service={service}
+            version={containerImage.tag}
+          />
+        )}
+      </div>
+    )
+
+  const datasourceInfo = (datasource?: Pick<Database, 'accessibility' | 'mode' | 'type' | 'version'>) =>
+    datasource && (
+      <div className="flex flex-col gap-1.5 text-ssm text-neutral">
+        <span className="flex items-center gap-2">
+          <Icon name={datasource.type} className="max-h-[12px] max-w-[12px]" height={12} width={12} />
+          {datasource.type.toLowerCase().replace('sql', 'SQL').replace('db', 'DB')}
+        </span>
+        <span className="flex items-center gap-2">
+          <Icon name={datasource.type} className="max-h-[12px] max-w-[12px]" height={12} width={12} />v
+          {datasource.version}
+        </span>
+      </div>
+    )
+
+  const helmInfo = (helmRepository?: HelmSourceRepositoryResponse) =>
+    helmRepository && (
+      <div className="flex items-center gap-1">
+        <div className="flex w-44 flex-col gap-1.5" onClick={(e) => e.stopPropagation()}>
+          <span className="flex gap-2">
+            <Icon width={12} name={IconEnum.HELM_OFFICIAL} />
+            <Tooltip
+              content={
+                <span className="text-center">
+                  {helmRepository.repository?.name.length > 20 && (
+                    <>
+                      {helmRepository.repository?.name} <br />
+                    </>
+                  )}
+                  {helmRepository.repository?.url}
+                </span>
+              }
+            >
+              <span className="text-neutral">
+                {helmRepository.repository?.name.length > 20 ? (
+                  <Truncate text={helmRepository.repository?.name.toLowerCase()} truncateLimit={20} />
+                ) : (
+                  helmRepository.repository?.name.toLowerCase()
+                )}
+              </span>
+            </Tooltip>
+          </span>
+          <div className="flex gap-2">
+            <Icon width={12} name={IconEnum.HELM_OFFICIAL} />
+            <span className="text-neutral">
+              <Truncate text={helmRepository.chart_name} truncateLimit={20} />
+            </span>
+          </div>
+        </div>
+        {service.serviceType === 'HELM' && (
+          <LastVersion
+            organizationId={organizationId}
+            projectId={projectId}
+            service={service}
+            version={helmRepository.chart_version}
+          />
+        )}
+      </div>
+    )
+
+  const cell = match({ service })
+    .with({ service: P.intersection({ serviceType: 'JOB' }, { source: P.when(isJobGitSource) }) }, ({ service }) => {
+      const {
+        source: { docker },
+      } = service
+      return gitInfo(service, docker?.git_repository)
+    })
+    .with(
+      { service: P.intersection({ serviceType: 'JOB' }, { source: P.when(isJobContainerSource) }) },
+      ({
+        service: {
+          source: { image },
+        },
+      }) => containerInfo(image)
+    )
+    .with({ service: { serviceType: 'APPLICATION' } }, ({ service }) => gitInfo(service, service.git_repository))
+    .with({ service: { serviceType: 'CONTAINER' } }, ({ service: { image_name, tag, registry } }) =>
+      containerInfo({ image_name, tag, registry })
+    )
+    .with({ service: { serviceType: 'DATABASE' } }, ({ service: { accessibility, mode, type, version } }) =>
+      datasourceInfo({ accessibility, mode, type, version })
+    )
+    .with({ service: P.intersection({ serviceType: 'HELM' }, { source: P.when(isHelmGitSource) }) }, ({ service }) => {
+      const {
+        source: { git },
+      } = service
+      return gitInfo(service, git?.git_repository)
+    })
+    .with(
+      { service: P.intersection({ serviceType: 'HELM' }, { source: P.when(isHelmRepositorySource) }) },
+      ({
+        service: {
+          source: { repository },
+        },
+      }) => helmInfo(repository)
+    )
+    .with({ service: { serviceType: 'TERRAFORM' } }, ({ service }) => {
+      return gitInfo(service, service?.terraform_files_source?.git?.git_repository)
+    })
+    .exhaustive()
+  return cell
+}
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index 9e8f4d47440..5e08f01be59 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -11,329 +11,55 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import {
-  type ApplicationGitRepository,
-  type ContainerResponse,
-  type Database,
-  type Environment,
-  type HelmSourceRepositoryResponse,
-  type Status,
-} from 'qovery-typescript-axios'
-import { ServiceSubActionDto } from 'qovery-ws-typescript-axios'
+import { type Environment } from 'qovery-typescript-axios'
 import { type ComponentProps, Fragment, useMemo, useState } from 'react'
-import { P, match } from 'ts-pattern'
-import {
-  type AnyService,
-  type Application,
-  type Helm,
-  type Job,
-  type Terraform,
-} from '@qovery/domains/services/data-access'
-import {
-  IconEnum,
-  ServiceTypeEnum,
-  isHelmGitSource,
-  isHelmRepositorySource,
-  isJobContainerSource,
-  isJobGitSource,
-} from '@qovery/shared/enums'
+import { match } from 'ts-pattern'
+import { ServiceTypeEnum } from '@qovery/shared/enums'
 import {
-  APPLICATION_GENERAL_URL,
   APPLICATION_URL,
-  CLUSTER_URL,
   DATABASE_GENERAL_URL,
   DATABASE_URL,
-  DEPLOYMENT_LOGS_VERSION_URL,
-  ENVIRONMENT_LOGS_URL,
   SERVICES_GENERAL_URL,
   SERVICES_NEW_URL,
   SERVICES_URL,
 } from '@qovery/shared/routes'
+import { Checkbox, EmptyState, Icon, Link, TableFilter, TablePrimitives, Truncate } from '@qovery/shared/ui'
+import { twMerge } from '@qovery/shared/util-js'
 import {
-  AnimatedGradientText,
-  Badge,
-  Button,
-  Checkbox,
-  EmptyState,
-  ExternalLink,
-  Icon,
-  Link,
-  Skeleton,
-  StatusChip,
-  TableFilter,
-  TablePrimitives,
-  Tooltip,
-  Truncate,
-} from '@qovery/shared/ui'
-import { dateUTCString, timeAgo } from '@qovery/shared/util-dates'
-import { buildGitProviderUrl } from '@qovery/shared/util-git'
-import {
-  containerRegistryKindToIcon,
-  formatCronExpression,
-  pluralize,
-  twMerge,
-  upperCaseFirstLetter,
-} from '@qovery/shared/util-js'
-import { useCheckRunningStatusClosed } from '../hooks/use-check-running-status-closed/use-check-running-status-closed'
-import { useServices } from '../hooks/use-services/use-services'
-import { LastCommit } from '../last-commit/last-commit'
-import LastVersion from '../last-version/last-version'
-import { ServiceActionToolbar } from '../service-action-toolbar/service-action-toolbar'
+  ServicesListProvider,
+  useServicesListContext,
+} from '../hooks/use-services-list-context/use-services-list-context'
 import { ServiceAvatar } from '../service-avatar/service-avatar'
-import { ServiceLinksPopover } from '../service-links-popover/service-links-popover'
-import { ServiceTemplateIndicator } from '../service-template-indicator/service-template-indicator'
 import { ServiceListActionBar } from './service-list-action-bar'
+import {
+  ServiceLastDeploymentCell,
+  ServiceNameCell,
+  ServiceRunningStatusCell,
+  ServiceVersionCell,
+} from './service-list-cells'
 
 const { Table } = TablePrimitives
 
-function ServiceNameCell({
-  service,
-  environment,
-  deploymentStatus,
-}: {
-  service: AnyService
+export interface ServiceListProps extends ComponentProps<typeof Table.Root> {
   environment: Environment
-  deploymentStatus?: Status
-}) {
-  const navigate = useNavigate()
-
-  const deploymentRequestsCount = Number(deploymentStatus?.deployment_requests_count)
-
-  const LinkDeploymentStatus = () => {
-    const environmentLog = ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id)
-    const deploymentLog = DEPLOYMENT_LOGS_VERSION_URL(service.id, deploymentStatus?.execution_id)
-    // const precheckLog = ENVIRONMENT_PRE_CHECK_LOGS_URL(deploymentStatus?.execution_id ?? '')
-
-    return match(deploymentStatus?.state)
-      .with('DEPLOYMENT_QUEUED', 'DELETE_QUEUED', 'STOP_QUEUED', 'RESTART_QUEUED', (s) => (
-        <span className="text-ssm font-normal text-neutral-350">{upperCaseFirstLetter(s).replace('_', ' ')}...</span>
-      ))
-      .with('CANCELED', () => <span className="text-ssm font-normal text-neutral-350">Last deployment aborted</span>)
-      .with('DEPLOYING', 'RESTARTING', 'BUILDING', 'DELETING', 'CANCELING', 'STOPPING', (s) => (
-        <Link
-          to={environmentLog + deploymentLog}
-          color="brand"
-          underline
-          size="ssm"
-          className="group flex truncate"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <AnimatedGradientText shimmerWidth={80} className="group-hover:text-brand-500">
-            <span className="flex items-center gap-0.5">
-              {upperCaseFirstLetter(s)}... <Icon iconName="arrow-up-right" />
-            </span>
-          </AnimatedGradientText>
-        </Link>
-      ))
-      .with('DEPLOYMENT_ERROR', 'DELETE_ERROR', 'STOP_ERROR', 'RESTART_ERROR', 'BUILD_ERROR', () => (
-        <Link
-          // to={deploymentStatus?.steps === null ? environmentLog + precheckLog : environmentLog + deploymentLog}
-          to={environmentLog + deploymentLog}
-          color="red"
-          underline
-          size="ssm"
-          className="truncate"
-          onClick={(e) => e.stopPropagation()}
-        >
-          Last deployment failed
-          <Icon iconName="arrow-up-right" />
-        </Link>
-      ))
-      .otherwise(() => null)
-  }
+}
 
+export function ServiceList({ ...props }: ServiceListProps) {
   return (
-    <div className="flex items-center justify-between">
-      <span className="flex min-w-0 items-center gap-4 text-sm font-medium text-neutral">
-        <ServiceTemplateIndicator service={service} size="sm">
-          <ServiceAvatar service={service} size="sm" border="solid" />
-        </ServiceTemplateIndicator>
-        {match(service)
-          .with({ serviceType: 'DATABASE' }, (db) => {
-            return (
-              <span className="flex min-w-0 shrink flex-col truncate pr-2">
-                <span className="flex items-center gap-1.5">
-                  <Tooltip content={db.name}>
-                    <Link
-                      className="inline max-w-max truncate"
-                      to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
-                      params={{
-                        organizationId: environment.organization.id,
-                        projectId: environment.project.id,
-                        environmentId: environment.id,
-                        serviceId: service.id,
-                      }}
-                      underline
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      {db.name}
-                    </Link>
-                  </Tooltip>
-                </span>
-                <LinkDeploymentStatus />
-              </span>
-            )
-          })
-          .with({ serviceType: 'JOB' }, (job) => {
-            const schedule = match(job)
-              .with(
-                { job_type: 'CRON' },
-                ({ schedule }) =>
-                  `Triggered: ${formatCronExpression(schedule.cronjob?.scheduled_at)} (${schedule.cronjob?.timezone})`
-              )
-              .with({ job_type: 'LIFECYCLE' }, ({ schedule }) => {
-                const actions = [
-                  schedule.on_start && 'Deploy',
-                  schedule.on_stop && 'Stop',
-                  schedule.on_delete && 'Delete',
-                ]
-                  .filter(Boolean)
-                  .join(' - ')
-                return actions ? `Triggered on: ${actions}` : undefined
-              })
-              .exhaustive()
-
-            return (
-              <span className="flex min-w-0 shrink flex-col truncate pr-2">
-                <span className="flex items-center gap-1.5">
-                  <Tooltip content={service.name}>
-                    <Link
-                      className="inline max-w-max truncate"
-                      to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
-                      params={{
-                        organizationId: environment.organization.id,
-                        projectId: environment.project.id,
-                        environmentId: environment.id,
-                        serviceId: service.id,
-                      }}
-                      underline
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      {service.name}
-                    </Link>
-                  </Tooltip>
-                  <Tooltip content={schedule}>
-                    <span className="truncate text-sm font-normal">
-                      <Icon iconName="info-circle" iconStyle="regular" />
-                    </span>
-                  </Tooltip>
-                </span>
-                <LinkDeploymentStatus />
-              </span>
-            )
-          })
-          .otherwise(() => (
-            <span className="flex min-w-0 shrink flex-col truncate pr-2">
-              <Tooltip content={service.name}>
-                <Link
-                  className="inline max-w-max truncate"
-                  to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
-                  params={{
-                    organizationId: environment.organization.id,
-                    projectId: environment.project.id,
-                    environmentId: environment.id,
-                    serviceId: service.id,
-                  }}
-                  underline
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  {service.name}
-                </Link>
-              </Tooltip>
-              <LinkDeploymentStatus />
-            </span>
-          ))}
-
-        {deploymentRequestsCount > 0 && (
-          <Tooltip
-            content={`This service has ${deploymentRequestsCount} queued ${pluralize(deploymentRequestsCount, 'deployment')}`}
-          >
-            <Badge className="flex items-center gap-1">
-              <Icon iconName="clock-eight" iconStyle="regular" />
-              {deploymentRequestsCount}
-            </Badge>
-          </Tooltip>
-        )}
-      </span>
-      <div className="flex shrink-0 items-center gap-5">
-        <div className="flex items-center">
-          {'auto_deploy' in service && service.auto_deploy && (
-            <Tooltip content="Auto-deploy">
-              <span>
-                <Icon className="text-neutral-300" iconName="arrows-rotate" />
-              </span>
-            </Tooltip>
-          )}
-          <div onClick={(e) => e.stopPropagation()}>
-            <ServiceLinksPopover
-              organizationId={environment.organization.id}
-              projectId={environment.project.id}
-              environmentId={environment.id}
-              serviceId={service.id}
-              align="start"
-            >
-              <Button variant="surface" color="neutral" radius="full" className="ml-3">
-                <Tooltip content="Links">
-                  <div className="flex items-center gap-1">
-                    <Icon iconName="link" iconStyle="regular" />
-                    <Icon iconName="angle-down" />
-                  </div>
-                </Tooltip>
-              </Button>
-            </ServiceLinksPopover>
-          </div>
-        </div>
-        <div onClick={(e) => e.stopPropagation()}>
-          <ServiceActionToolbar
-            serviceId={service.id}
-            environment={environment}
-            shellAction={match(service)
-              .with({ serviceType: 'DATABASE', mode: 'MANAGED' }, () => undefined)
-              .with(
-                { serviceType: 'DATABASE', mode: 'CONTAINER' },
-                () => () =>
-                  navigate({
-                    to:
-                      DATABASE_URL(environment.organization.id, environment.project.id, environment.id, service.id) +
-                      DATABASE_GENERAL_URL,
-                    state: {
-                      hasShell: true,
-                    } as any,
-                  })
-              )
-              .otherwise(
-                () => () =>
-                  navigate({
-                    to:
-                      APPLICATION_URL(environment.organization.id, environment.project.id, environment.id, service.id) +
-                      APPLICATION_GENERAL_URL,
-                    state: {
-                      hasShell: true,
-                    } as any,
-                  })
-              )}
-          />
-        </div>
-      </div>
-    </div>
+    <ServicesListProvider environmentId={props.environment.id || ''}>
+      <ServiceListTable {...props} />
+    </ServicesListProvider>
   )
 }
 
-export interface ServiceListProps extends ComponentProps<typeof Table.Root> {
-  environment: Environment
-}
-
-export function ServiceList({ className, environment, ...props }: ServiceListProps) {
+export function ServiceListTable({ className, environment, ...props }: ServiceListProps) {
   const clusterId = environment.cluster_id || ''
   const environmentId = environment.id || ''
   const organizationId = environment.organization.id || ''
   const projectId = environment.project.id || ''
 
-  const { data: services = [] } = useServices({ environmentId, suspense: true })
-  const { data: checkRunningStatusClosed } = useCheckRunningStatusClosed({
-    clusterId,
-    environmentId,
-  })
+  const { services } = useServicesListContext()
+
   const [sorting, setSorting] = useState<SortingState>([])
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const navigate = useNavigate()
@@ -403,11 +129,9 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
         },
         cell: (info) => {
           return (
-            <ServiceNameCell
-              service={info.row.original}
-              deploymentStatus={info.row.original.deploymentStatus}
-              environment={environment}
-            />
+            <div className="min-w-[400px] flex-1">
+              <ServiceNameCell service={info.row.original} environment={environment} />
+            </div>
           )
         },
       }),
@@ -419,81 +143,14 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
         filterFn: 'arrIncludesSome',
         size: 15,
         cell: (info) => {
-          const service = info.row.original
-          const link = match(service)
-            .with(
-              { serviceType: ServiceTypeEnum.DATABASE },
-              ({ id }) => DATABASE_URL(organizationId, projectId, environmentId, id) + DATABASE_GENERAL_URL
-            )
-            .otherwise(({ id }) => APPLICATION_URL(organizationId, projectId, environmentId, id) + SERVICES_GENERAL_URL)
-
-          const value = match(service.runningStatus.triggered_action)
-            .with(
-              { sub_action: ServiceSubActionDto.TERRAFORM_PLAN_ONLY },
-              () => 'Plan ' + info.getValue()?.toLowerCase()
-            )
-            .with(
-              { sub_action: ServiceSubActionDto.TERRAFORM_PLAN_AND_APPLY },
-              () => 'Apply ' + info.getValue()?.toLowerCase()
-            )
-            .with(
-              { sub_action: ServiceSubActionDto.TERRAFORM_MIGRATE_STATE },
-              () => 'Migrate state ' + info.getValue()?.toLowerCase()
-            )
-            .with(
-              { sub_action: ServiceSubActionDto.TERRAFORM_FORCE_UNLOCK_STATE },
-              () => 'Force unlock ' + info.getValue()?.toLowerCase()
-            )
-            .with(
-              { sub_action: ServiceSubActionDto.TERRAFORM_DESTROY },
-              () => 'Destroy ' + info.getValue()?.toLocaleString()
-            )
-            .with({ sub_action: ServiceSubActionDto.NONE }, () => info.getValue())
-            .with(undefined, () => info.getValue())
-            .exhaustive()
-
-          if (checkRunningStatusClosed) {
-            return (
-              <Tooltip content="See cluster">
-                <Link
-                  as="button"
-                  to={CLUSTER_URL(organizationId, environment.cluster_id)}
-                  onClick={(e) => e.stopPropagation()}
-                  className="gap-2 whitespace-nowrap text-sm"
-                  size="md"
-                  color="neutral"
-                  variant="outline"
-                  radius="full"
-                >
-                  <StatusChip status="STOPPED" />
-                  Status unavailable
-                </Link>
-              </Tooltip>
-            )
-          }
-
           return (
-            <Skeleton width={102} height={34} show={!value}>
-              <Tooltip content="See overview">
-                <Link
-                  as="button"
-                  to={link}
-                  onClick={(e) => e.stopPropagation()}
-                  className="gap-2 whitespace-nowrap text-sm"
-                  size="md"
-                  color="neutral"
-                  variant="outline"
-                  radius="full"
-                >
-                  <StatusChip
-                    status={match(service)
-                      .with({ serviceType: 'DATABASE', mode: 'MANAGED' }, (s) => s.deploymentStatus?.state)
-                      .otherwise((s) => s.runningStatus?.state)}
-                  />
-                  {value}
-                </Link>
-              </Tooltip>
-            </Skeleton>
+            <ServiceRunningStatusCell
+              service={info.row.original}
+              environment={environment}
+              organizationId={organizationId}
+              projectId={projectId}
+              clusterId={clusterId}
+            />
           )
         },
       }),
@@ -503,199 +160,9 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
         enableSorting: false,
         size: 30,
         cell: (info) => {
-          const service = info.row.original
-
-          const gitInfo = (service: Application | Job | Helm | Terraform, gitRepository?: ApplicationGitRepository) =>
-            gitRepository && (
-              <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
-                <div className="flex w-44 flex-col gap-1.5">
-                  <span className="flex items-center gap-2 text-neutral-subtle">
-                    <Icon className="h-3 w-3 text-inherit" name={gitRepository.provider} />
-                    <ExternalLink
-                      href={gitRepository.url}
-                      underline
-                      size="ssm"
-                      withIcon={false}
-                      className="font-normal"
-                    >
-                      <Truncate text={gitRepository.name} truncateLimit={20} />
-                    </ExternalLink>
-                  </span>
-                  {gitRepository.branch && gitRepository.url && (
-                    <span className="flex items-center gap-2 text-neutral-subtle">
-                      <Icon iconName="code-branch" iconStyle="regular" />
-                      <ExternalLink
-                        href={buildGitProviderUrl(gitRepository.url, gitRepository.branch)}
-                        underline
-                        size="ssm"
-                        withIcon={false}
-                        className="font-normal"
-                      >
-                        <Truncate text={gitRepository.branch} truncateLimit={20} />
-                      </ExternalLink>
-                    </span>
-                  )}
-                </div>
-                <LastCommit
-                  organizationId={organizationId}
-                  projectId={projectId}
-                  gitRepository={gitRepository}
-                  service={service}
-                />
-              </div>
-            )
-          const containerInfo = (containerImage?: Pick<ContainerResponse, 'image_name' | 'tag' | 'registry'>) =>
-            containerImage && (
-              <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
-                <div className="flex w-44 flex-col gap-1.5">
-                  <span className="flex items-center gap-2 text-neutral-350">
-                    <Icon width={16} name={containerRegistryKindToIcon(containerImage.registry.kind)} />
-                    <Tooltip
-                      content={
-                        <span className="text-center">
-                          {containerImage.registry.name.length >= 20 && (
-                            <>
-                              {containerImage.registry.name} <br />
-                            </>
-                          )}{' '}
-                          {containerImage.registry.url}
-                        </span>
-                      }
-                    >
-                      <span className="text-neutral-350">
-                        {containerImage.registry.name.length >= 20 ? (
-                          <Truncate text={containerImage.registry.name.toLowerCase()} truncateLimit={20} />
-                        ) : (
-                          containerImage.registry.name.toLowerCase()
-                        )}
-                      </span>
-                    </Tooltip>
-                  </span>
-                  <span className="flex items-center gap-2 text-neutral-350">
-                    <Icon width={16} name={IconEnum.CONTAINER} />
-                    <Truncate text={`${containerImage.image_name}`} truncateLimit={20} />
-                  </span>
-                </div>
-                {(service.serviceType === 'CONTAINER' ||
-                  (service.serviceType === 'JOB' && isJobContainerSource(service.source))) && (
-                  <LastVersion
-                    organizationId={organizationId}
-                    projectId={projectId}
-                    service={service}
-                    version={containerImage.tag}
-                  />
-                )}
-              </div>
-            )
-
-          const datasourceInfo = (datasource?: Pick<Database, 'accessibility' | 'mode' | 'type' | 'version'>) =>
-            datasource && (
-              <div className="flex flex-col gap-1.5 text-ssm text-neutral-350">
-                <span className="flex items-center gap-2">
-                  <Icon name={datasource.type} className="max-h-[12px] max-w-[12px]" height={12} width={12} />
-                  {datasource.type.toLowerCase().replace('sql', 'SQL').replace('db', 'DB')}
-                </span>
-                <span className="flex items-center gap-2">
-                  <Icon name={datasource.type} className="max-h-[12px] max-w-[12px]" height={12} width={12} />v
-                  {datasource.version}
-                </span>
-              </div>
-            )
-
-          const helmInfo = (helmRepository?: HelmSourceRepositoryResponse) =>
-            helmRepository && (
-              <div className="flex items-center gap-1">
-                <div className="flex w-44 flex-col gap-1.5" onClick={(e) => e.stopPropagation()}>
-                  <span className="flex gap-2">
-                    <Icon width={12} name={IconEnum.HELM_OFFICIAL} />
-                    <Tooltip
-                      content={
-                        <span className="text-center">
-                          {helmRepository.repository?.name.length > 20 && (
-                            <>
-                              {helmRepository.repository?.name} <br />
-                            </>
-                          )}
-                          {helmRepository.repository?.url}
-                        </span>
-                      }
-                    >
-                      <span className="text-neutral">
-                        {helmRepository.repository?.name.length > 20 ? (
-                          <Truncate text={helmRepository.repository?.name.toLowerCase()} truncateLimit={20} />
-                        ) : (
-                          helmRepository.repository?.name.toLowerCase()
-                        )}
-                      </span>
-                    </Tooltip>
-                  </span>
-                  <div className="flex gap-2">
-                    <Icon width={12} name={IconEnum.HELM_OFFICIAL} />
-                    <span className="text-neutral">
-                      <Truncate text={helmRepository.chart_name} truncateLimit={20} />
-                    </span>
-                  </div>
-                </div>
-                {service.serviceType === 'HELM' && (
-                  <LastVersion
-                    organizationId={organizationId}
-                    projectId={projectId}
-                    service={service}
-                    version={helmRepository.chart_version}
-                  />
-                )}
-              </div>
-            )
-
-          const cell = match({ service })
-            .with(
-              { service: P.intersection({ serviceType: 'JOB' }, { source: P.when(isJobGitSource) }) },
-              ({ service }) => {
-                const {
-                  source: { docker },
-                } = service
-                return gitInfo(service, docker?.git_repository)
-              }
-            )
-            .with(
-              { service: P.intersection({ serviceType: 'JOB' }, { source: P.when(isJobContainerSource) }) },
-              ({
-                service: {
-                  source: { image },
-                },
-              }) => containerInfo(image)
-            )
-            .with({ service: { serviceType: 'APPLICATION' } }, ({ service }) =>
-              gitInfo(service, service.git_repository)
-            )
-            .with({ service: { serviceType: 'CONTAINER' } }, ({ service: { image_name, tag, registry } }) =>
-              containerInfo({ image_name, tag, registry })
-            )
-            .with({ service: { serviceType: 'DATABASE' } }, ({ service: { accessibility, mode, type, version } }) =>
-              datasourceInfo({ accessibility, mode, type, version })
-            )
-            .with(
-              { service: P.intersection({ serviceType: 'HELM' }, { source: P.when(isHelmGitSource) }) },
-              ({ service }) => {
-                const {
-                  source: { git },
-                } = service
-                return gitInfo(service, git?.git_repository)
-              }
-            )
-            .with(
-              { service: P.intersection({ serviceType: 'HELM' }, { source: P.when(isHelmRepositorySource) }) },
-              ({
-                service: {
-                  source: { repository },
-                },
-              }) => helmInfo(repository)
-            )
-            .with({ service: { serviceType: 'TERRAFORM' } }, ({ service }) => {
-              return gitInfo(service, service?.terraform_files_source?.git?.git_repository)
-            })
-            .exhaustive()
-          return cell
+          return (
+            <ServiceVersionCell service={info.row.original} organizationId={organizationId} projectId={projectId} />
+          )
         },
       }),
       columnHelper.accessor('deploymentStatus.last_deployment_date', {
@@ -704,34 +171,18 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
         enableSorting: true,
         size: 3,
         cell: (info) => {
-          const service = info.row.original
-          const value = info.getValue()
-          const linkLog =
-            ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
-            DEPLOYMENT_LOGS_VERSION_URL(service?.id, service?.deploymentStatus?.execution_id)
-
-          return value ? (
-            <Link
-              to={linkLog}
-              className="group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-subtle hover:translate-x-0 hover:text-neutral"
-              onClick={(event) => event.stopPropagation()}
-            >
-              <Tooltip content={dateUTCString(value)} delayDuration={200}>
-                <span className="whitespace-nowrap text-ssm font-normal">{timeAgo(new Date(value))}</span>
-              </Tooltip>
-              <Icon
-                iconName="arrow-up-right"
-                iconStyle="regular"
-                className="text-ssm opacity-0 group-hover:opacity-100"
-              />
-            </Link>
-          ) : (
-            <span className="block w-full text-right">-</span>
+          return (
+            <ServiceLastDeploymentCell
+              service={info.row.original}
+              organizationId={organizationId}
+              projectId={projectId}
+              environmentId={environmentId}
+            />
           )
         },
       }),
     ],
-    [columnHelper, organizationId, projectId, environmentId, navigate]
+    [columnHelper, environment, clusterId, organizationId, projectId, environmentId]
   )
 
   const table = useReactTable({
diff --git a/libs/domains/services/feature/src/lib/service-remove-modal/service-remove-modal.tsx b/libs/domains/services/feature/src/lib/service-remove-modal/service-remove-modal.tsx
index c508b9b6d90..d9fa70fb22f 100644
--- a/libs/domains/services/feature/src/lib/service-remove-modal/service-remove-modal.tsx
+++ b/libs/domains/services/feature/src/lib/service-remove-modal/service-remove-modal.tsx
@@ -51,9 +51,9 @@ export function ServiceRemoveModal({
 
   return (
     <div className="p-6">
-      <h2 className="h4 mb-1 max-w-sm text-neutral-400 dark:text-neutral-50">{title}</h2>
+      <h2 className="h4 mb-1 max-w-sm text-neutral">{title}</h2>
       <div className="mb-4">
-        <div className="text-sm text-neutral-350 dark:text-neutral-50">
+        <div className="text-sm text-neutral-subtle">
           {description ? (
             description
           ) : (
@@ -77,18 +77,18 @@ export function ServiceRemoveModal({
                     <label
                       key={action.id}
                       className={twMerge(
-                        'flex cursor-pointer flex-col gap-2 rounded border border-neutral-250 bg-neutral-100 p-5 text-left text-sm shadow transition-all',
-                        selectedActionId === action.id && 'border-brand-500 bg-brand-50'
+                        'flex cursor-pointer flex-col gap-2 rounded border border-surface-neutral-subtle bg-surface-neutral-subtle p-5 text-left text-sm shadow transition-all',
+                        selectedActionId === action.id && 'border-surface-brand-solid bg-surface-brand-component'
                       )}
                     >
                       <div className="flex items-center gap-3">
                         <RadioGroup.Item value={action.id} />
                         {action.icon && (
-                          <Icon iconName={action.icon} iconStyle="regular" className="text-base text-neutral-350" />
+                          <Icon iconName={action.icon} iconStyle="regular" className="text-base text-neutral" />
                         )}
-                        <span className="font-medium text-neutral-400">{action.title}</span>
+                        <span className="font-medium text-neutral">{action.title}</span>
                       </div>
-                      <span className="inline-block text-sm text-neutral-350">{action.description}</span>
+                      <span className="inline-block text-sm text-neutral-subtle">{action.description}</span>
                     </label>
                   ))}
                 </RadioGroup.Root>
@@ -135,16 +135,16 @@ export function ServiceRemoveModal({
 
           <div className="flex flex-col gap-1.5">
             <div>
-              <span className="text-sm text-neutral-350">This action cannot be undone, type "</span>
+              <span className="text-sm text-neutral-subtle">This action cannot be undone, type "</span>
               <span
                 className={twMerge(
-                  'text-sm font-semibold text-neutral-350',
+                  'text-sm font-semibold text-neutral-subtle',
                   selectedAction?.color && `text-${selectedAction?.color}-500`
                 )}
               >
                 {selectedAction?.id}
               </span>
-              <span className="text-sm text-neutral-350">" to confirm.</span>
+              <span className="text-sm text-neutral-subtle">" to confirm.</span>
             </div>
             <Controller
               name="name"
diff --git a/libs/shared/interfaces/src/lib/domain/service-running-status.interface.ts b/libs/shared/interfaces/src/lib/domain/service-running-status.interface.ts
index 31c3c19a478..7cf6f29d2a9 100644
--- a/libs/shared/interfaces/src/lib/domain/service-running-status.interface.ts
+++ b/libs/shared/interfaces/src/lib/domain/service-running-status.interface.ts
@@ -1,12 +1,15 @@
-import { type ServiceStateDto } from 'qovery-ws-typescript-axios'
+import { type Status } from 'qovery-typescript-axios'
+import { type ServiceActionDetailsDto, type ServiceStateDto } from 'qovery-ws-typescript-axios'
 
-export interface ServiceRunningStatus {
-  id: string
-  state: keyof typeof ServiceStateDto
-  pods: {
-    name: string
-    state: keyof typeof ServiceStateDto
-    restart_count: number
-    state_message: string
-  }[]
+export type ServiceRunningStatus = {
+  triggered_action: ServiceActionDetailsDto | undefined
+  state: ServiceStateDto | 'UNKNOWN' | undefined
+  stateLabel: string | undefined
+}
+
+export type ServiceStatuses = {
+  runningStatus: ServiceRunningStatus
+  deploymentStatus?: Status & {
+    stateLabel: string | undefined
+  }
 }
diff --git a/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx b/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx
index 68786a3becd..716ded7676c 100644
--- a/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx
+++ b/libs/shared/ui/src/lib/components/radio-group/radio-group.tsx
@@ -67,7 +67,7 @@ const RadioGroupItem = forwardRef<ElementRef<typeof RadioGroupPrimitive.Item>, R
     return (
       <RadioGroupPrimitive.Item {...props} className={twMerge(itemVariants({ variant }), className)} ref={ref}>
         <RadioGroupPrimitive.Indicator className={indicatorVariants({ variant })}>
-          {variant === 'check' && <Icon iconName="check" className="text-xs text-neutralInvert" />}
+          {variant === 'check' && <Icon iconName="check" className="text-xs text-neutral" />}
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
     )