From 210d17546742f1daaec76b4faee355399e6662ef Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 10 Feb 2026 16:10:04 +0100
Subject: [PATCH 1/8] feat(new-nav): add environment overview

---
 .../select-commit-modal.tsx                   | 35 ++++++++-----------
 1 file changed, 15 insertions(+), 20 deletions(-)

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..4ecc0d475f7 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">
@@ -179,12 +174,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>

From 60be49e52a2dabd7adca8fc508e0460b8cace3ec Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 10 Feb 2026 16:49:23 +0100
Subject: [PATCH 2/8] impr: color tokens for uninstall modal

---
 .../service-action-toolbar.tsx                | 14 ++++++-------
 .../service-remove-modal.tsx                  | 20 +++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

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 8347dee2f00..fcd956a1d08 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
@@ -728,10 +728,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: [
@@ -739,20 +739,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>
@@ -775,14 +775,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>
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"

From 6e299f1600017913b7c52212455a418124afba7f Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 10 Feb 2026 17:00:29 +0100
Subject: [PATCH 3/8] impr: color token tweaks

---
 .../service-links-popover.tsx                 | 36 +++++++------------
 .../src/lib/service-list/service-list.tsx     |  2 +-
 2 files changed, 14 insertions(+), 24 deletions(-)

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 abf254cebe4..1ce3d2b7ffc 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
@@ -65,16 +65,16 @@ export function ServiceLinksPopover({
       <Popover.Trigger className={filteredLinks.length === 0 ? 'hidden' : ''}>{children}</Popover.Trigger>
       <Popover.Content
         side={side}
-        className="max-w-[280px] border-transparent p-2 text-sm text-neutral-350"
+        className="max-w-[280px] border-transparent p-2 text-sm text-neutral-subtle"
         align={align}
       >
         <div className="flex items-center justify-between p-2">
-          <p className="font-medium text-neutral-350 dark:text-neutral-250">
+          <p className="font-medium text-neutral">
             {filteredLinks?.length ?? 0} {pluralize(filteredLinks?.length ?? 0, 'link')} attached
           </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>
@@ -84,12 +84,9 @@ export function ServiceLinksPopover({
         <ul className="max-h-96 overflow-y-auto">
           {nginxLinks.map((link: LinkProps) => (
             <li key={link.url} className="flex p-2">
-              <CopyToClipboardButtonIcon
-                className="mr-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400"
-                content={link.url ?? ''}
-              />
+              <CopyToClipboardButtonIcon className="mr-2 text-brand hover:text-brand-hover" content={link.url ?? ''} />
               <a
-                className="flex w-full items-center justify-between text-neutral-400 transition hover:text-brand-500 dark:text-neutral-50 dark:hover:text-brand-400"
+                className="flex w-full items-center justify-between text-brand transition hover:text-brand-hover"
                 href={link.url}
                 target="_blank"
                 rel="noreferrer"
@@ -97,14 +94,14 @@ export function ServiceLinksPopover({
                 <div className="mr-2 text-ssm font-medium">
                   <Truncate text={link.url ?? ''} truncateLimit={26} />
                 </div>
-                <div className="text-xs text-neutral-350 dark:text-neutral-250">{link.internal_port}</div>
+                <div className="text-xs text-neutral-subtle">{link.internal_port}</div>
               </a>
             </li>
           ))}
           {nginxLinks.length > 0 && gatewayApiLinks.length > 0 && (
             <>
-              <li className="my-2 border-t border-neutral-200 dark:border-neutral-600" />
-              <li className="flex items-center gap-1 px-2 pb-1 text-xs font-medium text-neutral-350 dark:text-neutral-250">
+              <li className="my-2 border-t border-neutral" />
+              <li className="flex items-center gap-1 px-2 pb-1 text-xs font-medium text-neutral">
                 <span>Gateway API / Envoy stack</span>
                 <Tooltip
                   content={
@@ -115,7 +112,7 @@ export function ServiceLinksPopover({
                         href="https://www.qovery.com/blog/nginx-ingress-controller-end-of-maintenance-by-march-2026"
                         target="_blank"
                         rel="noreferrer"
-                        className="underline hover:text-neutral-100"
+                        className="underline"
                       >
                         more info
                       </a>
@@ -125,11 +122,7 @@ export function ServiceLinksPopover({
                   classNameContent="max-w-xs"
                 >
                   <span className="inline-flex cursor-help">
-                    <Icon
-                      iconName="circle-info"
-                      iconStyle="regular"
-                      className="text-neutral-350 hover:text-neutral-400 dark:text-neutral-250 dark:hover:text-neutral-200"
-                    />
+                    <Icon iconName="circle-info" iconStyle="regular" className="text-neutral-subtle" />
                   </span>
                 </Tooltip>
               </li>
@@ -137,12 +130,9 @@ export function ServiceLinksPopover({
           )}
           {gatewayApiLinks.map((link: LinkProps) => (
             <li key={link.url} className="flex p-2">
-              <CopyToClipboardButtonIcon
-                className="mr-2 text-brand-500 hover:text-brand-600 dark:hover:text-brand-400"
-                content={link.url ?? ''}
-              />
+              <CopyToClipboardButtonIcon className="mr-2 text-brand hover:text-brand-hover" content={link.url ?? ''} />
               <a
-                className="flex w-full items-center justify-between text-neutral-400 transition hover:text-brand-500 dark:text-neutral-50 dark:hover:text-brand-400"
+                className="flex w-full items-center justify-between text-brand transition hover:text-brand-hover"
                 href={link.url}
                 target="_blank"
                 rel="noreferrer"
@@ -150,7 +140,7 @@ export function ServiceLinksPopover({
                 <div className="mr-2 text-ssm font-medium">
                   <Truncate text={link.url ?? ''} truncateLimit={26} />
                 </div>
-                <div className="text-xs text-neutral-350 dark:text-neutral-250">{link.internal_port}</div>
+                <div className="text-xs text-neutral-subtle">{link.internal_port}</div>
               </a>
             </li>
           ))}
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 fbf2b015936..402dda10807 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
@@ -255,7 +255,7 @@ function ServiceNameCell({
           {'auto_deploy' in service && service.auto_deploy && (
             <Tooltip content="Auto-deploy">
               <span>
-                <Icon className="text-neutral-300" iconName="arrows-rotate" />
+                <Icon className="text-neutral-subtle" iconName="arrows-rotate" />
               </span>
             </Tooltip>
           )}

From ef88b460ce969bbafd8761ce5bc902a869ac8787 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 10 Feb 2026 17:44:36 +0100
Subject: [PATCH 4/8] impr: color token tweaks

---
 libs/shared/ui/src/lib/components/radio-group/radio-group.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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>
     )

From 092623bded7334e7f0024f9d34129dd810f9c77c Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 24 Feb 2026 11:36:24 +0100
Subject: [PATCH 5/8] Update color tokens

---
 .../services/feature/src/lib/service-list/service-list.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 402dda10807..73051589eaf 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
@@ -228,6 +228,7 @@ function ServiceNameCell({
               <Tooltip content={service.name}>
                 <Link
                   className="inline max-w-max truncate"
+                  color="neutral"
                   to={serviceLink}
                   underline
                   onClick={(e) => e.stopPropagation()}
@@ -509,6 +510,7 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
                     <ExternalLink
                       href={gitRepository.url}
                       underline
+                      color="neutral"
                       size="ssm"
                       withIcon={false}
                       className="font-normal"
@@ -518,10 +520,11 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
                   </span>
                   {gitRepository.branch && gitRepository.url && (
                     <span className="flex items-center gap-2 text-neutral-subtle">
-                      <Icon iconName="code-branch" iconStyle="regular" />
+                      <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"

From 6d5f18a59c791847b03e3c0216874733ad943515 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 24 Feb 2026 13:25:21 +0100
Subject: [PATCH 6/8] Updating the min-width of the status cells

---
 .../src/lib/service-list/service-list.tsx     | 91 ++++++++++---------
 1 file changed, 50 insertions(+), 41 deletions(-)

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 73051589eaf..cab48e03a32 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
@@ -17,6 +17,7 @@ import {
   type Database,
   type Environment,
   type HelmSourceRepositoryResponse,
+  type ListServicesByEnvironmentId200ResponseResultsInner,
   type Status,
 } from 'qovery-typescript-axios'
 import { ServiceSubActionDto } from 'qovery-ws-typescript-axios'
@@ -399,11 +400,13 @@ 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}
+                deploymentStatus={info.row.original.deploymentStatus}
+                environment={environment}
+              />
+            </div>
           )
         },
       }),
@@ -415,6 +418,8 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
         filterFn: 'arrIncludesSome',
         size: 15,
         cell: (info) => {
+          const Wrapper = ({ children }: { children: React.ReactNode }) => <div className="min-w-40">{children}</div>
+
           const service = info.row.original
           const link = match(service)
             .with(
@@ -450,46 +455,50 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
 
           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>
+              <Wrapper>
+                <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>
+              </Wrapper>
             )
           }
 
           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>
+            <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' }, (s) => s.deploymentStatus?.state)
+                        .otherwise((s) => s.runningStatus?.state)}
+                    />
+                    {value}
+                  </Link>
+                </Tooltip>
+              </Skeleton>
+            </Wrapper>
           )
         },
       }),

From 407f224c9313841d1ba7a95879e5580817ca8074 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Tue, 24 Feb 2026 17:53:37 +0100
Subject: [PATCH 7/8] Splitting components of the Services list table

---
 .../service-list/service-list-cells/index.ts  |   4 +
 .../service-last-deployment-cell.tsx          |  38 ++
 .../service-list-cells/service-name-cell.tsx  | 248 +++++++
 .../service-running-status-cell.tsx           | 109 +++
 .../service-version-cell.tsx                  | 220 ++++++
 .../src/lib/service-list/service-list.tsx     | 625 +-----------------
 6 files changed, 650 insertions(+), 594 deletions(-)
 create mode 100644 libs/domains/services/feature/src/lib/service-list/service-list-cells/index.ts
 create mode 100644 libs/domains/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx
 create mode 100644 libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx
 create mode 100644 libs/domains/services/feature/src/lib/service-list/service-list-cells/service-running-status-cell.tsx
 create mode 100644 libs/domains/services/feature/src/lib/service-list/service-list-cells/service-version-cell.tsx

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..c7ad4e7fa1a
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-last-deployment-cell.tsx
@@ -0,0 +1,38 @@
+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'
+
+type ServiceLastDeploymentCellProps = {
+  service: AnyService
+  organizationId: string
+  projectId: string
+  environmentId: string
+}
+
+export function ServiceLastDeploymentCell({
+  service,
+  organizationId,
+  projectId,
+  environmentId,
+}: ServiceLastDeploymentCellProps) {
+  const value = 'deploymentStatus' in service ? service.deploymentStatus.last_deployment_date : undefined
+  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>
+  )
+}
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..8f071e24522
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-name-cell.tsx
@@ -0,0 +1,248 @@
+import { useNavigate } from '@tanstack/react-router'
+import { type Environment, ServiceTypeEnum, type Status } 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,
+  SERVICES_GENERAL_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 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,
+  deploymentStatus,
+}: {
+  service: AnyService
+  environment: Environment
+  deploymentStatus?: Status
+}) {
+  const navigate = useNavigate()
+
+  const deploymentRequestsCount = Number(deploymentStatus?.deployment_requests_count)
+
+  const serviceLink = match(service)
+    .with(
+      { serviceType: ServiceTypeEnum.DATABASE },
+      ({ id }) =>
+        DATABASE_URL(environment.organization.id, environment.project.id, service.environment.id, id) +
+        DATABASE_GENERAL_URL
+    )
+    .otherwise(
+      ({ id }) =>
+        APPLICATION_URL(environment.organization.id, environment.project.id, service.environment.id, id) +
+        SERVICES_GENERAL_URL
+    )
+
+  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)
+  }
+
+  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={serviceLink}
+                      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={serviceLink}
+                      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"
+                  color="neutral"
+                  to={serviceLink}
+                  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..2b3e5d2826e
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-list/service-list-cells/service-running-status-cell.tsx
@@ -0,0 +1,109 @@
+import { ServiceTypeEnum } from 'qovery-typescript-axios'
+import { ServiceSubActionDto } from 'qovery-ws-typescript-axios'
+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'
+
+type ServiceRunningStatusCellProps = {
+  service: AnyService
+  organizationId: string
+  projectId: string
+  environment: Environment
+  clusterId: string
+}
+
+export function ServiceRunningStatusCell({
+  service,
+  organizationId,
+  projectId,
+  environment,
+  clusterId,
+}: ServiceRunningStatusCellProps) {
+  const stateLabel = service.runningStatus.stateLabel
+
+  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(service.runningStatus.triggered_action)
+    .with({ sub_action: ServiceSubActionDto.TERRAFORM_PLAN_ONLY }, () => 'Plan ' + stateLabel.toLowerCase())
+    .with({ sub_action: ServiceSubActionDto.TERRAFORM_PLAN_AND_APPLY }, () => 'Apply ' + stateLabel.toLowerCase())
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_MIGRATE_STATE },
+      () => 'Migrate state ' + stateLabel.toLowerCase()
+    )
+    .with(
+      { sub_action: ServiceSubActionDto.TERRAFORM_FORCE_UNLOCK_STATE },
+      () => 'Force unlock ' + stateLabel.toLowerCase()
+    )
+    .with({ sub_action: ServiceSubActionDto.TERRAFORM_DESTROY }, () => 'Destroy ' + stateLabel.toLocaleString())
+    .with({ sub_action: ServiceSubActionDto.NONE }, () => stateLabel)
+    .with(undefined, () => stateLabel)
+    .exhaustive()
+
+  if (checkRunningStatusClosed) {
+    return (
+      <Wrapper>
+        <Tooltip content="See cluster">
+          <Link
+            as="button"
+            to={CLUSTER_URL(organizationId, environment)}
+            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' }, (s) => s.deploymentStatus?.state)
+                .otherwise((s) => s.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..8ba9a9defc2
--- /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-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
+}
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 cab48e03a32..039fa0a5956 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,311 +11,32 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import {
-  type ApplicationGitRepository,
-  type ContainerResponse,
-  type Database,
-  type Environment,
-  type HelmSourceRepositoryResponse,
-  type ListServicesByEnvironmentId200ResponseResultsInner,
-  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 {
-  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'
+import { Checkbox, EmptyState, Icon, Link, TableFilter, TablePrimitives, Truncate } from '@qovery/shared/ui'
+import { twMerge } from '@qovery/shared/util-js'
+import useServices from '../hooks/use-services/use-services'
 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
-  environment: Environment
-  deploymentStatus?: Status
-}) {
-  const navigate = useNavigate()
-
-  const deploymentRequestsCount = Number(deploymentStatus?.deployment_requests_count)
-
-  const serviceLink = match(service)
-    .with(
-      { serviceType: ServiceTypeEnum.DATABASE },
-      ({ id }) =>
-        DATABASE_URL(environment.organization.id, environment.project.id, service.environment.id, id) +
-        DATABASE_GENERAL_URL
-    )
-    .otherwise(
-      ({ id }) =>
-        APPLICATION_URL(environment.organization.id, environment.project.id, service.environment.id, id) +
-        SERVICES_GENERAL_URL
-    )
-
-  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)
-  }
-
-  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={serviceLink}
-                      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={serviceLink}
-                      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"
-                  color="neutral"
-                  to={serviceLink}
-                  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>
-  )
-}
-
 export interface ServiceListProps extends ComponentProps<typeof Table.Root> {
   environment: Environment
 }
@@ -327,10 +48,7 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
   const projectId = environment.project.id || ''
 
   const { data: services = [] } = useServices({ environmentId, suspense: true })
-  const { data: checkRunningStatusClosed } = useCheckRunningStatusClosed({
-    clusterId,
-    environmentId,
-  })
+
   const [sorting, setSorting] = useState<SortingState>([])
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const navigate = useNavigate()
@@ -418,87 +136,14 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
         filterFn: 'arrIncludesSome',
         size: 15,
         cell: (info) => {
-          const Wrapper = ({ children }: { children: React.ReactNode }) => <div className="min-w-40">{children}</div>
-
-          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 (
-              <Wrapper>
-                <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>
-              </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' }, (s) => s.deploymentStatus?.state)
-                        .otherwise((s) => s.runningStatus?.state)}
-                    />
-                    {value}
-                  </Link>
-                </Tooltip>
-              </Skeleton>
-            </Wrapper>
+            <ServiceRunningStatusCell
+              service={info.row.original}
+              environment={environment}
+              organizationId={organizationId}
+              projectId={projectId}
+              clusterId={clusterId}
+            />
           )
         },
       }),
@@ -508,201 +153,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
-                      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-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', {
@@ -711,34 +164,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({

From 2fe49fec7b377cc5bcfc1b8e58c60661cb53621e Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Wed, 25 Feb 2026 10:12:57 +0100
Subject: [PATCH 8/8] Fix outdated snapshots

---
 .../select-commit-modal.spec.tsx.snap         | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

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"