From 3874d32a974c46fe8e30b24479cc8cf74b3aa7a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Bonnet?= <bonnet.rem@gmail.com>
Date: Mon, 21 Oct 2024 15:06:47 +0200
Subject: [PATCH] feat(environment-logs): add new version (#1726)

---
 .../cluster-action-toolbar.spec.tsx.snap      |  26 +--
 .../domains/environment-logs/feature/.babelrc |  12 ++
 .../environment-logs/feature/.eslintrc.json   |  18 ++
 .../environment-logs/feature/README.md        |   7 +
 .../environment-logs/feature/jest.config.ts   |  11 +
 .../environment-logs/feature/project.json     |   9 +
 .../environment-logs/feature/src/index.ts     |   2 +
 .../environment-stages.spec.tsx               |  60 ++++++
 .../environment-stages/environment-stages.tsx | 102 +++++++++
 .../header-environment-stages.spec.tsx        |  54 +++++
 .../header-environment-stages.tsx             |  78 +++++++
 .../header-pre-check-logs.spec.tsx            |  40 ++++
 .../header-pre-check-logs.tsx                 |  72 +++++++
 .../use-pre-check-logs/use-pre-check-logs.ts  |  69 +++++++
 .../list-pre-check-logs.spec.tsx              |  60 ++++++
 .../list-pre-check-logs.tsx                   |  84 ++++++++
 .../row-pre-check-logs.spec.tsx               |  32 +++
 .../row-pre-check-logs/row-pre-check-logs.tsx |  48 +++++
 .../environment-logs/feature/tsconfig.json    |  20 ++
 .../feature/tsconfig.lib.json                 |  19 ++
 .../feature/tsconfig.spec.json                |  20 ++
 .../lib/domains-environments-data-access.ts   |   9 +
 .../domains/environments/feature/src/index.ts |   1 +
 .../create-clone-environment-modal.tsx        |   1 +
 .../environment-action-toolbar.spec.tsx.snap  |  20 +-
 .../environment-avatar/environment-avatar.tsx |   6 +-
 .../environment-state-chip.tsx                |  36 +++-
 .../use-deployment-history.ts                 |   2 +-
 .../use-deployment-stages.ts                  |  20 ++
 libs/domains/projects/feature/project.json    |   2 +-
 .../domains/service-logs/feature/src/index.ts |   2 +
 .../breadcrumb-deployment-history.spec.tsx    |  44 ++++
 .../breadcrumb-deployment-history.tsx         | 103 +++++++++
 .../breadcrumb-deployment-logs.spec.tsx       |  70 +++++++
 .../breadcrumb-deployment-logs.tsx            | 166 +++++++++++++++
 .../stage-item/stage-item.tsx                 | 110 ++++++++++
 .../src/lib/header-logs/header-logs.spec.tsx  |  80 +++++++
 .../src/lib/header-logs/header-logs.tsx       | 123 +++++++++++
 .../use-deployment-history.ts                 |  15 ++
 .../use-deployment-logs.ts                    |   3 +-
 .../use-deployment-status.ts                  |  21 ++
 .../list-deployment-logs.spec.tsx             |  14 +-
 .../list-deployment-logs.tsx                  |  87 ++++++--
 .../row-deployment-logs.spec.tsx}             |   8 +-
 .../row-deployment-logs.tsx}                  |  12 +-
 .../list-service-logs.spec.tsx                |  19 +-
 .../list-service-logs/list-service-logs.tsx   |  64 ++++--
 .../row-service-logs/style.scss               |   2 +-
 .../service-logs-placeholder.tsx              |  16 +-
 .../use-deployment-history.ts                 |   2 +-
 .../service-action-toolbar.spec.tsx.snap      |  18 +-
 .../service-links-popover.spec.tsx.snap       |   2 +-
 .../dropdown-variable.spec.tsx.snap           |   4 +-
 .../field-variable-suggestion.spec.tsx.snap   |   4 +-
 .../src/lib/ui/page-general/page-general.tsx  |   2 +-
 .../button-popover-subnets.spec.tsx.snap      |   4 +-
 .../ui/breadcrumb-item/breadcrumb-item.tsx    |   2 +-
 .../src/lib/ui/breadcrumb/breadcrumb.tsx      | 160 +++++++++++---
 .../src/lib/ui/navigation/navigation.tsx      |   2 +-
 .../layout/src/lib/ui/top-bar/top-bar.tsx     |   2 +-
 .../deployment-logs-feature.tsx               |  72 ++++---
 .../environment-stages-feature.spec.tsx       | 121 +++++++++++
 .../environment-stages-feature.tsx            | 195 ++++++++++++++++++
 .../pod-logs-feature/pod-logs-feature.tsx     |  73 +++----
 .../pre-check-logs-feature.spec.tsx           |  22 ++
 .../pre-check-logs-feature.tsx                |  20 ++
 .../sidebar-history-feature.spec.tsx          |  14 --
 .../sidebar-history-feature.tsx               |  38 ----
 .../src/lib/page-environment-logs.tsx         | 152 +++++++++-----
 .../sidebar-history/sidebar-history.spec.tsx  | 107 ----------
 .../ui/sidebar-history/sidebar-history.tsx    | 136 ------------
 .../sidebar-pipeline-item.spec.tsx            |  59 ------
 .../sidebar-pipeline-item.tsx                 | 118 -----------
 .../sidebar-pipeline.spec.tsx                 |  20 --
 .../ui/sidebar-pipeline/sidebar-pipeline.tsx  |  38 ----
 .../ui/sidebar-status/sidebar-status.spec.tsx |  14 --
 .../lib/ui/sidebar-status/sidebar-status.tsx  |  54 -----
 .../src/lib/ui/sidebar/sidebar.spec.tsx       |  27 ---
 .../src/lib/ui/sidebar/sidebar.tsx            |  51 -----
 .../src/lib/ui/container/container.tsx        |   4 +-
 .../page-settings-deployment-pipeline.tsx     |  26 +--
 .../routes/src/lib/sub-router/logs.router.ts  |   5 +
 libs/shared/ui/src/index.ts                   |   1 +
 .../badge-deployment-order.spec.tsx           |   1 -
 .../badge-deployment-order.tsx                |  21 +-
 .../ui/src/lib/components/board/board.tsx     |   2 +-
 .../dropdown-menu/dropdown-menu.tsx           |   4 +-
 .../lib/components/icon/icons/services.tsx    |   6 +-
 .../components/menu/menu-group/menu-group.tsx |   5 +-
 .../components/menu/menu-item/menu-item.tsx   |   2 +-
 .../ui/src/lib/components/popover/popover.tsx |   2 +-
 .../stage-status-chip.spec.tsx                |  32 +++
 .../stage-status-chip.stories.tsx             |  32 +++
 .../stage-status-chip/stage-status-chip.tsx   | 127 ++++++++++++
 .../components/status-chip/status-chip.tsx    |  15 +-
 .../use-status-web-sockets.ts                 |   1 +
 package.json                                  |   2 +-
 tsconfig.base.json                            |   1 +
 yarn.lock                                     |   4 +-
 99 files changed, 2741 insertions(+), 984 deletions(-)
 create mode 100644 libs/domains/environment-logs/feature/.babelrc
 create mode 100644 libs/domains/environment-logs/feature/.eslintrc.json
 create mode 100644 libs/domains/environment-logs/feature/README.md
 create mode 100644 libs/domains/environment-logs/feature/jest.config.ts
 create mode 100644 libs/domains/environment-logs/feature/project.json
 create mode 100644 libs/domains/environment-logs/feature/src/index.ts
 create mode 100644 libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.spec.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.spec.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.spec.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/hooks/use-pre-check-logs/use-pre-check-logs.ts
 create mode 100644 libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.spec.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.spec.tsx
 create mode 100644 libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.tsx
 create mode 100644 libs/domains/environment-logs/feature/tsconfig.json
 create mode 100644 libs/domains/environment-logs/feature/tsconfig.lib.json
 create mode 100644 libs/domains/environment-logs/feature/tsconfig.spec.json
 create mode 100644 libs/domains/environments/feature/src/lib/hooks/use-deployment-stages/use-deployment-stages.ts
 create mode 100644 libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.spec.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.spec.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/stage-item/stage-item.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/header-logs/header-logs.spec.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
 create mode 100644 libs/domains/service-logs/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
 create mode 100644 libs/domains/service-logs/feature/src/lib/hooks/use-deployment-status/use-deployment-status.ts
 rename libs/domains/service-logs/feature/src/lib/list-deployment-logs/{row-deployment/row-deployment.spec.tsx => row-deployment-logs/row-deployment-logs.spec.tsx} (71%)
 rename libs/domains/service-logs/feature/src/lib/list-deployment-logs/{row-deployment/row-deployment.tsx => row-deployment-logs/row-deployment-logs.tsx} (88%)
 create mode 100644 libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.spec.tsx
 create mode 100644 libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.tsx
 create mode 100644 libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.spec.tsx
 create mode 100644 libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.spec.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.spec.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.spec.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.spec.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.spec.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.spec.tsx
 delete mode 100644 libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.tsx
 create mode 100644 libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.spec.tsx
 create mode 100644 libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx
 create mode 100644 libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx

diff --git a/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
index 32ef77332fc..cdb499b9730 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
+++ b/libs/domains/clusters/feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
@@ -107,7 +107,7 @@ exports[`ClusterActionToolbar should match manage deployment snapshot 1`] = `
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -120,7 +120,7 @@ exports[`ClusterActionToolbar should match manage deployment snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 relative"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 relative"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -133,7 +133,7 @@ exports[`ClusterActionToolbar should match manage deployment snapshot 1`] = `
         Update
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -264,7 +264,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
     <div
       aria-labelledby="radix-:r12:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -277,7 +277,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -290,7 +290,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
         Access info
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -303,7 +303,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -316,7 +316,7 @@ exports[`ClusterActionToolbar should match other actions snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -465,7 +465,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
     <div
       aria-labelledby="radix-:r1p:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -478,7 +478,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -491,7 +491,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
         Access info
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -504,7 +504,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
         See audit logs
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -517,7 +517,7 @@ exports[`ClusterActionToolbar should match outdated snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
diff --git a/libs/domains/environment-logs/feature/.babelrc b/libs/domains/environment-logs/feature/.babelrc
new file mode 100644
index 00000000000..1ea870ead41
--- /dev/null
+++ b/libs/domains/environment-logs/feature/.babelrc
@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
diff --git a/libs/domains/environment-logs/feature/.eslintrc.json b/libs/domains/environment-logs/feature/.eslintrc.json
new file mode 100644
index 00000000000..772a43d2783
--- /dev/null
+++ b/libs/domains/environment-logs/feature/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/libs/domains/environment-logs/feature/README.md b/libs/domains/environment-logs/feature/README.md
new file mode 100644
index 00000000000..a5208528a95
--- /dev/null
+++ b/libs/domains/environment-logs/feature/README.md
@@ -0,0 +1,7 @@
+# feature
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test feature` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/domains/environment-logs/feature/jest.config.ts b/libs/domains/environment-logs/feature/jest.config.ts
new file mode 100644
index 00000000000..5cb0709a31c
--- /dev/null
+++ b/libs/domains/environment-logs/feature/jest.config.ts
@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'feature',
+  preset: '../../../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../../../coverage/libs/domains/environment-logs/feature',
+}
diff --git a/libs/domains/environment-logs/feature/project.json b/libs/domains/environment-logs/feature/project.json
new file mode 100644
index 00000000000..ed3412fbcc6
--- /dev/null
+++ b/libs/domains/environment-logs/feature/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "feature",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/domains/environment-logs/feature/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project feature --web",
+  "targets": {}
+}
diff --git a/libs/domains/environment-logs/feature/src/index.ts b/libs/domains/environment-logs/feature/src/index.ts
new file mode 100644
index 00000000000..94d4881b71b
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/environment-stages/environment-stages'
+export * from './lib/list-pre-check-logs/list-pre-check-logs'
diff --git a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.spec.tsx b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.spec.tsx
new file mode 100644
index 00000000000..54aa7bdfe91
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.spec.tsx
@@ -0,0 +1,60 @@
+import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_PRE_CHECK_LOGS_URL } from '@qovery/shared/routes'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { EnvironmentStages, type EnvironmentStagesProps } from './environment-stages'
+
+describe('EnvironmentStages', () => {
+  const defaultProps: EnvironmentStagesProps = {
+    environment: {
+      id: 'env-1',
+      name: 'Test Environment',
+      organization: { id: 'org-1' },
+      project: { id: 'proj-1' },
+      cloud_provider: {
+        provider: 'AWS',
+      },
+    },
+    environmentStatus: {
+      state: 'RUNNING',
+    },
+    hideSkipped: false,
+    setHideSkipped: jest.fn(),
+    deploymentStages: [],
+    preCheckStage: {
+      status: 'SUCCESS',
+      total_duration_sec: 120,
+    },
+  }
+
+  it('renders loading spinner when deploymentStages is undefined', () => {
+    renderWithProviders(<EnvironmentStages {...defaultProps} deploymentStages={undefined} />)
+    expect(screen.getByTestId('spinner')).toBeInTheDocument()
+  })
+
+  it('renders pre-check stage when preCheckStage is provided', () => {
+    renderWithProviders(<EnvironmentStages {...defaultProps} />)
+    expect(screen.getByText('Pre-check')).toBeInTheDocument()
+  })
+
+  it('renders children when deploymentStages is provided', () => {
+    renderWithProviders(
+      <EnvironmentStages {...defaultProps}>
+        <div data-testid="child-content">Child Content</div>
+      </EnvironmentStages>
+    )
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+  })
+
+  it('renders the "Hide skipped" checkbox', () => {
+    renderWithProviders(<EnvironmentStages {...defaultProps} />)
+    expect(screen.getByLabelText('Hide skipped')).toBeInTheDocument()
+  })
+
+  it('renders the correct link for pre-check logs', () => {
+    renderWithProviders(<EnvironmentStages {...defaultProps} />)
+    const logLink = screen.getByText('Pre-check logs').closest('a')
+    expect(logLink).toHaveAttribute(
+      'href',
+      ENVIRONMENT_LOGS_URL('org-1', 'proj-1', 'env-1') + ENVIRONMENT_PRE_CHECK_LOGS_URL()
+    )
+  })
+})
diff --git a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
new file mode 100644
index 00000000000..e6ac5d3c1a8
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
@@ -0,0 +1,102 @@
+import { type CheckedState } from '@radix-ui/react-checkbox'
+import {
+  type DeploymentStageWithServicesStatuses,
+  type Environment,
+  type EnvironmentStatus,
+  type EnvironmentStatusesWithStagesPreCheckStage,
+} from 'qovery-typescript-axios'
+import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react'
+import { NavLink } from 'react-router-dom'
+import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_PRE_CHECK_LOGS_URL } from '@qovery/shared/routes'
+import { Checkbox, Icon, LoaderSpinner, StageStatusChip, StatusChip, Tooltip, Truncate } from '@qovery/shared/ui'
+import { HeaderEnvironmentStages } from '../header-environment-stages/header-environment-stages'
+
+export interface EnvironmentStagesProps extends PropsWithChildren {
+  environment: Environment
+  environmentStatus: EnvironmentStatus
+  hideSkipped: CheckedState
+  setHideSkipped: Dispatch<SetStateAction<CheckedState>>
+  deploymentStages?: DeploymentStageWithServicesStatuses[]
+  preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage
+}
+
+export function EnvironmentStages({
+  environment,
+  environmentStatus,
+  deploymentStages,
+  preCheckStage,
+  hideSkipped,
+  setHideSkipped,
+  children,
+}: EnvironmentStagesProps) {
+  return (
+    <div className="h-[calc(100vh-64px)] w-[calc(100vw-64px)] p-1">
+      <HeaderEnvironmentStages environment={environment} environmentStatus={environmentStatus}>
+        <div className="flex items-center gap-3 text-sm font-medium text-neutral-50">
+          <Checkbox
+            name="skipped"
+            id="skipped"
+            className="shrink-0"
+            color="brand"
+            checked={hideSkipped}
+            onCheckedChange={setHideSkipped}
+          />
+          <label htmlFor="skipped">Hide skipped</label>
+        </div>
+      </HeaderEnvironmentStages>
+      <div className="flex h-[calc(100vh-120px)] justify-center border border-t-0 border-neutral-500 bg-neutral-600">
+        <div className="h-full w-full">
+          <div className="flex gap-0.5 overflow-y-scroll py-6 pl-6 pr-4">
+            {!deploymentStages ? (
+              <div className="mt-6 flex h-full w-full justify-center">
+                <LoaderSpinner className="h-6 w-6" theme="dark" />
+              </div>
+            ) : (
+              <>
+                {preCheckStage && (
+                  <>
+                    <div className="h-fit w-60 min-w-60 overflow-hidden rounded border border-neutral-500 bg-neutral-650 text-neutral-50">
+                      <div className="flex h-[58px] items-center gap-3.5 border-b border-neutral-500 px-3 py-2.5">
+                        <StageStatusChip status={preCheckStage?.status} />
+                        <div className="flex flex-col gap-0.5">
+                          <span className="flex gap-1.5 text-sm font-medium">Pre-check</span>
+                          <span className="text-xs">
+                            {Math.max(0, Math.floor((preCheckStage?.total_duration_sec ?? 0) / 60))}m{' '}
+                            {preCheckStage?.total_duration_sec ?? 0 % 60}s
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex flex-col gap-1.5 bg-neutral-800 p-1.5">
+                        <NavLink
+                          to={
+                            ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
+                            ENVIRONMENT_PRE_CHECK_LOGS_URL()
+                          }
+                          className="flex w-full items-center gap-2.5 rounded border border-neutral-400 bg-neutral-550 px-2.5 py-2 hover:border-brand-400"
+                        >
+                          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-neutral-400 text-neutral-250">
+                            <Icon iconName="list-check" iconStyle="solid" />
+                          </span>
+                          <span className="text-sm">Pre-check logs</span>
+                          <StatusChip className="ml-auto" status={preCheckStage.status} />
+                        </NavLink>
+                      </div>
+                    </div>
+                    <div className="mt-4 w-4">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9" fill="none" viewBox="0 0 17 9">
+                        <path fill="#383E50" d="M16.092 4.5L8.592.17v8.66l7.5-4.33zm-16 .75h9.25v-1.5H.092v1.5z"></path>
+                      </svg>
+                    </div>
+                  </>
+                )}
+                {children}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EnvironmentStages
diff --git a/libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.spec.tsx b/libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.spec.tsx
new file mode 100644
index 00000000000..ae32c14ca1c
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.spec.tsx
@@ -0,0 +1,54 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { HeaderEnvironmentStages, type HeaderEnvironmentStagesProps } from './header-environment-stages'
+
+describe('HeaderEnvironmentStages', () => {
+  const defaultProps: HeaderEnvironmentStagesProps = {
+    environment: {
+      name: 'Test Environment',
+      cloud_provider: {
+        provider: 'AWS',
+      },
+    },
+    environmentStatus: {
+      state: 'RUNNING',
+      total_deployment_duration_in_seconds: 125,
+      last_deployment_state: 'DEPLOYED',
+    },
+  }
+
+  it('renders the environment name', () => {
+    renderWithProviders(<HeaderEnvironmentStages {...defaultProps} />)
+    expect(screen.getByText('Test Environment')).toBeInTheDocument()
+  })
+
+  it('renders the status text', () => {
+    renderWithProviders(<HeaderEnvironmentStages {...defaultProps} />)
+    expect(screen.getByText('Deployed')).toBeInTheDocument()
+  })
+
+  it('renders the deployment duration when not deploying', () => {
+    renderWithProviders(<HeaderEnvironmentStages {...defaultProps} />)
+    expect(screen.getByText('2m : 5s')).toBeInTheDocument()
+  })
+
+  it('does not render the deployment duration when deploying', () => {
+    const props = {
+      ...defaultProps,
+      environmentStatus: {
+        ...defaultProps.environmentStatus,
+        state: 'DEPLOYING',
+      },
+    }
+    renderWithProviders(<HeaderEnvironmentStages {...props} />)
+    expect(screen.queryByText('2m : 5s')).not.toBeInTheDocument()
+  })
+
+  it('renders children when provided', () => {
+    renderWithProviders(
+      <HeaderEnvironmentStages {...defaultProps}>
+        <div data-testid="child-element">Child Content</div>
+      </HeaderEnvironmentStages>
+    )
+    expect(screen.getByTestId('child-element')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.tsx b/libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.tsx
new file mode 100644
index 00000000000..c452af08acb
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/header-environment-stages/header-environment-stages.tsx
@@ -0,0 +1,78 @@
+import { type Environment, type EnvironmentStatus } from 'qovery-typescript-axios'
+import { type PropsWithChildren } from 'react'
+import { IconEnum } from '@qovery/shared/enums'
+import { Icon, StatusChip, Tooltip } from '@qovery/shared/ui'
+import { dateUTCString } from '@qovery/shared/util-dates'
+import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+
+export interface HeaderEnvironmentStagesProps extends PropsWithChildren {
+  environment: Environment
+  environmentStatus: EnvironmentStatus
+}
+
+function EndCurve() {
+  return (
+    <svg
+      className="relative -left-0.5 -top-[1px]"
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="48"
+      fill="none"
+      viewBox="0 0 40 49"
+    >
+      <path fill="#1A2031" d="M0 .955h5.071a16 16 0 0114.545 9.334l17.722 38.666H0v-48z"></path>
+      <path stroke="#2A3041" d="M37.084 48.955L18.037 7.764A11 11 0 008.052 1.38H0"></path>
+    </svg>
+  )
+}
+
+export function HeaderEnvironmentStages({ environment, environmentStatus, children }: HeaderEnvironmentStagesProps) {
+  const totalDurationSec = environmentStatus?.total_deployment_duration_in_seconds ?? 0
+
+  return (
+    <div className="flex h-12 w-full items-center justify-between border-b border-neutral-500 bg-neutral-900 pr-4">
+      <div className="flex h-full">
+        <div className="flex h-full items-center gap-4 border-l border-t border-neutral-500 bg-neutral-600 py-2.5 pl-4 pr-0.5 text-sm font-medium text-neutral-50">
+          <span className="flex items-center gap-2">
+            <span className="flex items-center gap-2.5">
+              <Icon name={IconEnum.SERVICES} />
+              {environment.name}
+            </span>
+            {environmentStatus.last_deployment_id && (
+              <Tooltip content={`Excecution id: ${environmentStatus.last_deployment_id}`} side="bottom">
+                <span>
+                  <Icon className="text-base" iconName="circle-info" iconStyle="regular" />
+                </span>
+              </Tooltip>
+            )}
+          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="5" height="6" fill="none" viewBox="0 0 5 6">
+            <circle cx="2.5" cy="2.955" r="2.5" fill="#383E50"></circle>
+          </svg>
+          <span className="flex items-center gap-2">
+            <StatusChip status={environmentStatus?.last_deployment_state} />
+            <span>{upperCaseFirstLetter(environmentStatus?.last_deployment_state).replace(/_/g, ' ')}</span>
+          </span>
+          {environmentStatus?.state !== 'DEPLOYING' && (
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" width="5" height="6" fill="none" viewBox="0 0 5 6">
+                <circle cx="2.5" cy="2.955" r="2.5" fill="#383E50"></circle>
+              </svg>
+              <span
+                className="flex items-center gap-1.5"
+                title={dateUTCString(environmentStatus.last_deployment_date ?? '')}
+              >
+                <Icon iconName="stopwatch" iconStyle="regular" className="text-base text-neutral-250" />
+                {Math.floor(totalDurationSec / 60)}m : {totalDurationSec % 60}s
+              </span>
+            </>
+          )}
+        </div>
+        <EndCurve />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default HeaderEnvironmentStages
diff --git a/libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.spec.tsx b/libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.spec.tsx
new file mode 100644
index 00000000000..8e24d1d1501
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.spec.tsx
@@ -0,0 +1,40 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { HeaderPreCheckLogs, type HeaderPreCheckLogsProps } from './header-pre-check-logs'
+
+const mockProps: HeaderPreCheckLogsProps = {
+  environment: {
+    id: 'env-id',
+    name: 'Test Environment',
+    organization: {
+      id: 'org-id',
+    },
+    project: {
+      id: 'project-id',
+    },
+    cloud_provider: {
+      provider: 'AWS',
+    },
+  },
+  preCheckStage: {
+    status: 'SUCCESS',
+    total_duration_sec: 125,
+  },
+}
+
+describe('HeaderPreCheckLogs', () => {
+  it('renders correctly with given props', () => {
+    renderWithProviders(<HeaderPreCheckLogs {...mockProps} />)
+
+    expect(screen.getByText('Pre-check')).toBeInTheDocument()
+    expect(screen.getByText('2m : 5s')).toBeInTheDocument()
+  })
+
+  it('renders children correctly', () => {
+    renderWithProviders(
+      <HeaderPreCheckLogs {...mockProps}>
+        <div data-testid="child-content">Child Content</div>
+      </HeaderPreCheckLogs>
+    )
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.tsx b/libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.tsx
new file mode 100644
index 00000000000..886d1a43796
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/header-pre-check-logs/header-pre-check-logs.tsx
@@ -0,0 +1,72 @@
+import { type Environment, type EnvironmentStatusesWithStagesPreCheckStage } from 'qovery-typescript-axios'
+import { type PropsWithChildren } from 'react'
+import { ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
+import { Icon, Link, StatusChip } from '@qovery/shared/ui'
+import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+
+export interface HeaderPreCheckLogsProps extends PropsWithChildren {
+  environment: Environment
+  preCheckStage: EnvironmentStatusesWithStagesPreCheckStage
+}
+
+function EndCurve() {
+  return (
+    <svg
+      className="relative -left-0.5 -top-[1px]"
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="48"
+      fill="none"
+      viewBox="0 0 40 49"
+    >
+      <path fill="#1A2031" d="M0 .955h5.071a16 16 0 0114.545 9.334l17.722 38.666H0v-48z"></path>
+      <path stroke="#2A3041" d="M37.084 48.955L18.037 7.764A11 11 0 008.052 1.38H0"></path>
+    </svg>
+  )
+}
+
+export function HeaderPreCheckLogs({ environment, preCheckStage, children }: HeaderPreCheckLogsProps) {
+  const totalDurationSec = preCheckStage.total_duration_sec ?? 0
+
+  return (
+    <div className="flex h-12 w-full items-center justify-between border-b border-neutral-500 bg-neutral-900 pr-4">
+      <div className="flex h-full">
+        <div className="flex h-full items-center gap-4 border-t border-neutral-500 bg-neutral-600 py-2.5 pl-4 pr-0.5 text-sm font-medium text-neutral-50">
+          <Link
+            as="button"
+            size="sm"
+            variant="surface"
+            color="neutral"
+            className="w-7 justify-center"
+            to={ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id)}
+          >
+            <Icon iconName="timeline" />
+          </Link>
+          <span className="text-neutral-400">/</span>
+          <span className="flex items-center gap-2.5">
+            <Icon iconName="list-check" />
+            Pre-check
+          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="5" height="6" fill="none" viewBox="0 0 5 6">
+            <circle cx="2.5" cy="2.955" r="2.5" fill="#383E50"></circle>
+          </svg>
+          <span className="flex items-center gap-2">
+            <StatusChip status={preCheckStage.status} />
+            <span>{upperCaseFirstLetter(preCheckStage?.status).replace(/_/g, ' ')}</span>
+          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="5" height="6" fill="none" viewBox="0 0 5 6">
+            <circle cx="2.5" cy="2.955" r="2.5" fill="#383E50"></circle>
+          </svg>
+          <span className="flex items-center gap-1.5">
+            <Icon iconName="stopwatch" iconStyle="regular" className="text-base text-neutral-250" />
+            {Math.floor(totalDurationSec / 60)}m : {totalDurationSec % 60}s
+          </span>
+        </div>
+        <EndCurve />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default HeaderPreCheckLogs
diff --git a/libs/domains/environment-logs/feature/src/lib/hooks/use-pre-check-logs/use-pre-check-logs.ts b/libs/domains/environment-logs/feature/src/lib/hooks/use-pre-check-logs/use-pre-check-logs.ts
new file mode 100644
index 00000000000..87a0fdee9d5
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/hooks/use-pre-check-logs/use-pre-check-logs.ts
@@ -0,0 +1,69 @@
+import { type QueryClient } from '@tanstack/react-query'
+import { type EnvironmentLogs } from 'qovery-typescript-axios'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { QOVERY_WS } from '@qovery/shared/util-node-env'
+import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
+
+export interface UsePreCheckLogsProps {
+  clusterId?: string
+  organizationId?: string
+  projectId?: string
+  environmentId?: string
+  versionId?: string
+}
+
+export interface EnvironmentPreCheckLogId extends EnvironmentLogs {
+  // Needed for row UI indicator
+  id: number
+}
+
+// This hook simplifies the process of fetching and managing pre-check deployment logs data
+export function usePreCheckLogs({
+  clusterId,
+  organizationId,
+  projectId,
+  environmentId,
+  versionId,
+}: UsePreCheckLogsProps) {
+  const [logs, setLogs] = useState<EnvironmentLogs[]>([])
+
+  // Reset logs when versionId changes
+  useEffect(() => setLogs([]), [versionId])
+
+  const messageHandler = useCallback(
+    (_: QueryClient, message: EnvironmentLogs[]) => {
+      setLogs((prevLogs) => {
+        const combinedLogs = [...prevLogs, ...message]
+        return [...new Map(combinedLogs.map((item) => [item['timestamp'], item])).values()]
+      })
+    },
+    [setLogs]
+  )
+
+  useReactQueryWsSubscription({
+    url: QOVERY_WS + '/deployment/logs',
+    urlSearchParams: {
+      organization: organizationId,
+      cluster: clusterId,
+      project: projectId,
+      environment: environmentId,
+      version: versionId,
+    },
+    enabled: Boolean(organizationId) && Boolean(clusterId) && Boolean(projectId) && Boolean(environmentId),
+    onMessage: messageHandler,
+  })
+
+  const preCheckLogs = useMemo(
+    () =>
+      logs
+        .filter((currentData: EnvironmentLogs) => currentData.details.stage?.step === 'PreCheck')
+        .map((log, index) => ({ ...log, id: index + 1 })) as EnvironmentPreCheckLogId[],
+    [logs]
+  )
+
+  return {
+    data: preCheckLogs,
+  }
+}
+
+export default usePreCheckLogs
diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.spec.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.spec.tsx
new file mode 100644
index 00000000000..5b4b23ec4ed
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.spec.tsx
@@ -0,0 +1,60 @@
+import { environmentFactoryMock } from '@qovery/shared/factories'
+import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
+import { ListPreCheckLogs } from './list-pre-check-logs'
+
+jest.mock('../hooks/use-pre-check-logs/use-pre-check-logs', () => {
+  return {
+    ...jest.requireActual('../hooks/use-pre-check-logs/use-pre-check-logs'),
+    usePreCheckLogs: () => ({
+      data: [
+        {
+          id: '1',
+          timestamp: '2023-01-01T00:00:00Z',
+          message: { safe_message: 'Log 1' },
+          details: { stage: { step: 'PreCheck' } },
+        },
+        {
+          id: '2',
+          timestamp: '2023-01-01T00:01:00Z',
+          message: { safe_message: 'Log 2' },
+          details: { stage: { step: 'PreCheck' } },
+        },
+      ],
+    }),
+  }
+})
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    organizationId: '0',
+    projectId: '1',
+    environmentId: '2',
+    serviceId: '3',
+    versionId: '4',
+  }),
+}))
+
+describe('ListPreCheckLogs', () => {
+  const defaultProps = {
+    environment: environmentFactoryMock(1)[0],
+    preCheckStage: {
+      status: 'RUNNING',
+      start_time: '2023-01-01T00:00:00Z',
+    },
+  }
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<ListPreCheckLogs {...defaultProps} />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should display logs', async () => {
+    renderWithProviders(<ListPreCheckLogs {...defaultProps} />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Log 1')).toBeInTheDocument()
+      expect(screen.getByText('Log 2')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
new file mode 100644
index 00000000000..55c218905a4
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/list-pre-check-logs.tsx
@@ -0,0 +1,84 @@
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { type Environment, type EnvironmentStatusesWithStagesPreCheckStage } from 'qovery-typescript-axios'
+import { memo, useEffect, useMemo, useRef } from 'react'
+import { useParams } from 'react-router-dom'
+import { LoaderSpinner, TablePrimitives } from '@qovery/shared/ui'
+import { HeaderPreCheckLogs } from '../header-pre-check-logs/header-pre-check-logs'
+import { type EnvironmentPreCheckLogId, usePreCheckLogs } from '../hooks/use-pre-check-logs/use-pre-check-logs'
+import { RowPreCheckLogs } from './row-pre-check-logs/row-pre-check-logs'
+
+const { Table } = TablePrimitives
+
+const MemoizedRowPreCheckLogs = memo(RowPreCheckLogs)
+
+export interface ListPreCheckLogsProps {
+  environment: Environment
+  preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage
+}
+
+export function ListPreCheckLogs({ environment, preCheckStage }: ListPreCheckLogsProps) {
+  const { organizationId, projectId, versionId } = useParams()
+  const refScrollSection = useRef<HTMLDivElement>(null)
+
+  const { data: logs = [] } = usePreCheckLogs({
+    clusterId: environment.cluster_id,
+    organizationId,
+    projectId,
+    environmentId: environment.id,
+    versionId,
+  })
+
+  const columnHelper = createColumnHelper<EnvironmentPreCheckLogId>()
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor('timestamp', {}),
+      columnHelper.accessor('message', {}),
+      columnHelper.accessor('details.stage.step', {}),
+    ],
+    [columnHelper]
+  )
+
+  const table = useReactTable({
+    data: logs,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  // `useEffect` used to scroll to the bottom of the logs when new logs are added or when the pauseLogs state changes
+  useEffect(() => {
+    const section = refScrollSection.current
+    if (!section) return
+  }, [logs])
+
+  if (!logs || logs.length === 0) {
+    return (
+      <div className="h-full p-1">
+        <div className="flex h-full w-full justify-center border border-neutral-500 bg-neutral-600 pt-11">
+          <LoaderSpinner className="h-6 w-6" theme="dark" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!preCheckStage) return null
+
+  return (
+    <div className="h-[calc(100vh-64px)] w-full max-w-[calc(100vw-64px)] overflow-hidden bg-neutral-900 p-1">
+      <div className="relative h-full border border-r-0 border-t-0 border-neutral-500 bg-neutral-600">
+        <HeaderPreCheckLogs environment={environment} preCheckStage={preCheckStage} />
+        <div className="max-h-[calc(100vh-170px)] w-full overflow-y-scroll pb-12" ref={refScrollSection}>
+          <Table.Root className="w-full text-xs">
+            <Table.Body className="divide-y-0">
+              {table.getRowModel().rows.map((row) => (
+                <MemoizedRowPreCheckLogs key={row.id} {...row} />
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ListPreCheckLogs
diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.spec.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.spec.tsx
new file mode 100644
index 00000000000..fafe0af7c14
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.spec.tsx
@@ -0,0 +1,32 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { RowPreCheckLogs } from './row-pre-check-logs'
+
+describe('RowPreCheckLogs', () => {
+  const mockProps = {
+    index: 0,
+    original: {
+      id: 1,
+      timestamp: '2023-04-01T12:00:00Z',
+      message: {
+        safe_message: 'Test log message',
+      },
+      details: {
+        stage: {
+          step: 'PreCheck',
+        },
+      },
+    },
+  }
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<RowPreCheckLogs {...mockProps} />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('renders basic row content', () => {
+    renderWithProviders(<RowPreCheckLogs {...mockProps} />)
+
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('Test log message')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.tsx b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.tsx
new file mode 100644
index 00000000000..3cb15c3ce2d
--- /dev/null
+++ b/libs/domains/environment-logs/feature/src/lib/list-pre-check-logs/row-pre-check-logs/row-pre-check-logs.tsx
@@ -0,0 +1,48 @@
+import { type Row } from '@tanstack/react-table'
+import clsx from 'clsx'
+import { LogsType } from '@qovery/shared/enums'
+import { Ansi, TablePrimitives } from '@qovery/shared/ui'
+import { dateFullFormat, dateUTCString } from '@qovery/shared/util-dates'
+import { type EnvironmentPreCheckLogId } from '../../hooks/use-pre-check-logs/use-pre-check-logs'
+
+const { Table } = TablePrimitives
+
+export interface RowPreCheckLogsProps extends Row<EnvironmentPreCheckLogId> {}
+
+export function RowPreCheckLogs({ original }: RowPreCheckLogsProps) {
+  const step = original.details?.stage?.step
+  const type = original.type
+
+  const success = step === 'Deployed'
+  const error = type === LogsType.ERROR || step === 'DeployedError'
+
+  return (
+    <Table.Row className="mb-0.5 flex min-h-6 select-none bg-neutral-600 text-xs hover:bg-neutral-550">
+      <Table.Cell className="h-6 min-w-10 py-1 pl-2 pr-1 text-left font-code font-bold text-neutral-300 group-hover:bg-neutral-550 group-hover:delay-1000">
+        <span className="relative block">{original.id}</span>
+      </Table.Cell>
+      <Table.Cell className="h-fit shrink-0 py-1 pl-2 pr-3 font-code font-bold text-neutral-300">
+        <span title={dateUTCString(original.timestamp)}>
+          {dateFullFormat(original.timestamp, 'UTC', 'dd MMM, HH:mm:ss.SS')}
+        </span>
+      </Table.Cell>
+      <Table.Cell
+        className={clsx('relative h-fit w-full select-text overflow-hidden py-1 pl-3 pr-6 font-code font-bold', {
+          'text-red-500': error,
+          'text-green-500': success,
+          'text-white': !error && !success,
+        })}
+      >
+        <span className="truncate whitespace-pre-wrap break-all">
+          {type === LogsType.ERROR ? (
+            <Ansi>{original.error?.user_log_message}</Ansi>
+          ) : (
+            <Ansi>{original.message?.safe_message}</Ansi>
+          )}
+        </span>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default RowPreCheckLogs
diff --git a/libs/domains/environment-logs/feature/tsconfig.json b/libs/domains/environment-logs/feature/tsconfig.json
new file mode 100644
index 00000000000..c88d07daddd
--- /dev/null
+++ b/libs/domains/environment-logs/feature/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json"
+}
diff --git a/libs/domains/environment-logs/feature/tsconfig.lib.json b/libs/domains/environment-logs/feature/tsconfig.lib.json
new file mode 100644
index 00000000000..45b22973977
--- /dev/null
+++ b/libs/domains/environment-logs/feature/tsconfig.lib.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/libs/domains/environment-logs/feature/tsconfig.spec.json b/libs/domains/environment-logs/feature/tsconfig.spec.json
new file mode 100644
index 00000000000..1033686367b
--- /dev/null
+++ b/libs/domains/environment-logs/feature/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts b/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts
index 01c23a807d2..9d4bc881133 100644
--- a/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts
+++ b/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts
@@ -5,6 +5,7 @@ import {
   DatabasesApi,
   DeploymentStageMainCallsApi,
   type DeploymentStageRequest,
+  type DeploymentStageWithServicesStatuses,
   type DockerfileCheckRequest,
   EnvironmentActionsApi,
   EnvironmentApi,
@@ -40,6 +41,14 @@ export const environments = createQueryKeys('environments', {
     },
   }),
   // NOTE: Value is set by WebSocket
+  deploymentStages: (environmentId: string) => ({
+    queryKey: [environmentId],
+    async queryFn() {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return new Promise<DeploymentStageWithServicesStatuses[] | null>(() => {})
+    },
+  }),
+  // NOTE: Value is set by WebSocket
   runningStatus: (environmentId: string) => ({
     queryKey: [environmentId],
     queryFn() {
diff --git a/libs/domains/environments/feature/src/index.ts b/libs/domains/environments/feature/src/index.ts
index bb3cdef60b1..b257b135098 100644
--- a/libs/domains/environments/feature/src/index.ts
+++ b/libs/domains/environments/feature/src/index.ts
@@ -7,6 +7,7 @@ export * from './lib/terraform-export-modal/terraform-export-modal'
 export * from './lib/create-clone-environment-modal/create-clone-environment-modal'
 export * from './lib/environment-action-toolbar/environment-action-toolbar'
 export * from './lib/hooks/use-deployment-status/use-deployment-status'
+export * from './lib/hooks/use-deployment-stages/use-deployment-stages'
 export * from './lib/hooks/use-environment/use-environment'
 export * from './lib/hooks/use-edit-environment/use-edit-environment'
 export * from './lib/hooks/use-delete-environment/use-delete-environment'
diff --git a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
index cb6910fc4ec..c36f3aae58b 100644
--- a/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
+++ b/libs/domains/environments/feature/src/lib/create-clone-environment-modal/create-clone-environment-modal.tsx
@@ -31,6 +31,7 @@ export function CreateCloneEnvironmentModal({
   const navigate = useNavigate()
   const { enableAlertClickOutside } = useModal()
   const { data: clusters = [] } = useClusters({ organizationId })
+
   const { mutateAsync: createEnvironment, isLoading: isCreateEnvironmentLoading } = useCreateEnvironment()
   const { mutateAsync: cloneEnvironment, isLoading: isCloneEnvironmentLoading } = useCloneEnvironment()
 
diff --git a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
index 63caa61a67e..fe0f68db64f 100644
--- a/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
@@ -94,7 +94,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -107,7 +107,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -120,7 +120,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         Redeploy
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -138,7 +138,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -256,7 +256,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
     <div
       aria-labelledby="radix-:rv:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -269,7 +269,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       tabindex="-1"
     >
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/123/environment/3840068565336064/logs"
@@ -283,7 +283,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Logs
       </a>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/audit-logs/general?targetType=ENVIRONMENT&projectId=123&targetId=3840068565336064"
@@ -297,7 +297,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -310,7 +310,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -323,7 +323,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Export as Terraform
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
diff --git a/libs/domains/environments/feature/src/lib/environment-avatar/environment-avatar.tsx b/libs/domains/environments/feature/src/lib/environment-avatar/environment-avatar.tsx
index 4b98a4c3981..ba3b43367e4 100644
--- a/libs/domains/environments/feature/src/lib/environment-avatar/environment-avatar.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-avatar/environment-avatar.tsx
@@ -7,7 +7,9 @@ export interface EnvironmentAvatarProps extends Omit<ComponentPropsWithoutRef<ty
 }
 
 export const EnvironmentAvatar = forwardRef<ElementRef<typeof Avatar>, EnvironmentAvatarProps>(
-  function EnvironmentAvatar({ environment, ...props }, ref) {
-    return <Avatar ref={ref} fallback={<Icon name="SERVICES" height="100%" width="100%" />} {...props} />
+  function EnvironmentAvatar({ environment, className, ...props }, ref) {
+    return (
+      <Avatar ref={ref} className={className} fallback={<Icon name="SERVICES" height="40" width="40" />} {...props} />
+    )
   }
 )
diff --git a/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx b/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx
index 1ceddf89b9d..def3d2e384b 100644
--- a/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx
@@ -1,16 +1,42 @@
-import { StatusChip, type StatusChipProps } from '@qovery/shared/ui'
+import { Skeleton, StatusChip, type StatusChipProps } from '@qovery/shared/ui'
 import { useDeploymentStatus } from '../hooks/use-deployment-status/use-deployment-status'
 import { useRunningStatus } from '../hooks/use-running-status/use-running-status'
 
+/**
+ * Difference between `deployment` and `last-deployment`:
+ *
+ * The `state` variable is used to determine the status of the current deployment.
+ * The `lastDeploymentState` variable is used to store the status of the last deployment.
+ *
+ * Condition from the API:
+ * state = deployment.currentStatus.toState()
+ * lastDeploymentState = deployment.deploymentStatus?.toState() ?: deployment.currentStatus.toState()
+ *
+ * When the deployment is terminated, the `currentStatus` represents the status for the entire environment.
+ * This means that if a single service is triggered while there was a previous deployment failure,
+ * the `currentStatus` will be in error even if the deployment of the single service was successful.
+ * To avoid losing the knowledge of whether the last deployment was a success or failure,
+ * we store it in the `lastDeploymentState` field.
+ */
+
 export interface EnvironmentStateChipProps extends Omit<StatusChipProps, 'status'> {
+  mode: 'running' | 'deployment' | 'last-deployment'
   environmentId?: string
-  mode: 'deployment' | 'running'
 }
 
-type DeploymentStateChipProps = Omit<EnvironmentStateChipProps, 'mode'>
+type DeploymentStateChipProps = Omit<EnvironmentStateChipProps, 'mode'> & { mode: 'deployment' | 'last-deployment' }
 
-function DeploymentStateChip({ environmentId, ...props }: DeploymentStateChipProps) {
+function DeploymentStateChip({ environmentId, mode, ...props }: DeploymentStateChipProps) {
   const { data: deploymentStatus } = useDeploymentStatus({ environmentId })
+
+  if (mode === 'last-deployment') {
+    return (
+      <Skeleton width={16} height={16} show={!deploymentStatus?.last_deployment_state} rounded>
+        <StatusChip status={deploymentStatus?.last_deployment_state} {...props} />
+      </Skeleton>
+    )
+  }
+
   return <StatusChip status={deploymentStatus?.state ?? 'STOPPED'} {...props} />
 }
 
@@ -22,7 +48,7 @@ function RunningStateChip({ environmentId, ...props }: RunningStateChipProps) {
 }
 
 export function EnvironmentStateChip({ mode, ...props }: EnvironmentStateChipProps) {
-  return mode === 'deployment' ? <DeploymentStateChip {...props} /> : <RunningStateChip {...props} />
+  return mode === 'running' ? <RunningStateChip {...props} /> : <DeploymentStateChip mode={mode} {...props} />
 }
 
 export default EnvironmentStateChip
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts b/libs/domains/environments/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
index 0bd52cf81f4..16715756a2f 100644
--- a/libs/domains/environments/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
+++ b/libs/domains/environments/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
@@ -8,7 +8,7 @@ export interface UseDeploymentHistoryProps {
 export function useDeploymentHistory({ environmentId }: UseDeploymentHistoryProps) {
   return useQuery({
     ...queries.environments.deploymentHistory({ environmentId }),
-    refetchInterval: 2000,
+    refetchInterval: 5000,
   })
 }
 
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-deployment-stages/use-deployment-stages.ts b/libs/domains/environments/feature/src/lib/hooks/use-deployment-stages/use-deployment-stages.ts
new file mode 100644
index 00000000000..55dd85fc9a5
--- /dev/null
+++ b/libs/domains/environments/feature/src/lib/hooks/use-deployment-stages/use-deployment-stages.ts
@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseDeploymentStagesProps {
+  environmentId?: string
+}
+
+export function useDeploymentStages({ environmentId }: UseDeploymentStagesProps) {
+  return useQuery({
+    // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion
+    ...queries.environments.deploymentStages(environmentId!!),
+    enabled: Boolean(environmentId),
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  })
+}
+
+export default useDeploymentStages
diff --git a/libs/domains/projects/feature/project.json b/libs/domains/projects/feature/project.json
index 35dc3cc924a..30de2ed6235 100644
--- a/libs/domains/projects/feature/project.json
+++ b/libs/domains/projects/feature/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "feature",
+  "name": "domains-projects-feature",
   "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/domains/projects/feature/src",
   "projectType": "library",
diff --git a/libs/domains/service-logs/feature/src/index.ts b/libs/domains/service-logs/feature/src/index.ts
index 4932f0aba81..45c40f28db9 100644
--- a/libs/domains/service-logs/feature/src/index.ts
+++ b/libs/domains/service-logs/feature/src/index.ts
@@ -2,3 +2,5 @@ export * from './lib/list-service-logs/list-service-logs'
 export * from './lib/update-time-context/update-time-context'
 export * from './lib/list-deployment-logs/list-deployment-logs'
 export * from './lib/service-stage-ids-context/service-stage-ids-context'
+export * from './lib/breadcrumb-deployment-history/breadcrumb-deployment-history'
+export * from './lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs'
diff --git a/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.spec.tsx b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.spec.tsx
new file mode 100644
index 00000000000..c7b44dc6715
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.spec.tsx
@@ -0,0 +1,44 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { useDeploymentHistory } from '../hooks/use-deployment-history/use-deployment-history'
+import { BreadcrumbDeploymentHistory } from './breadcrumb-deployment-history'
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    organizationId: 'org-123',
+    projectId: 'proj-456',
+    environmentId: 'env-789',
+  }),
+}))
+
+jest.mock('../hooks/use-deployment-history/use-deployment-history')
+
+const mockDeploymentHistory = [
+  { id: 'version-1', created_at: '2023-01-01T00:00:00Z', status: 'RUNNING' },
+  { id: 'version-2', created_at: '2023-01-02T00:00:00Z', status: 'RUNNING' },
+]
+
+describe('BreadcrumbDeploymentHistory', () => {
+  beforeEach(() => {
+    useDeploymentHistory.mockReturnValue({
+      data: mockDeploymentHistory,
+      isFetched: true,
+    })
+  })
+
+  it('renders correctly with deployment history', async () => {
+    const { userEvent } = renderWithProviders(<BreadcrumbDeploymentHistory type="DEPLOYMENT" serviceId="service-1" />, {
+      container: document.body,
+    })
+
+    expect(screen.getByText('Deployment History')).toBeInTheDocument()
+    expect(screen.getByText('Latest')).toBeInTheDocument()
+
+    const dropdownButton = screen.getByRole('button')
+
+    await userEvent.click(dropdownButton)
+
+    expect(screen.getByText('versi...n-1')).toBeInTheDocument()
+    expect(screen.getByText('versi...n-2')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.tsx b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.tsx
new file mode 100644
index 00000000000..bc05c8da0fc
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-history/breadcrumb-deployment-history.tsx
@@ -0,0 +1,103 @@
+import clsx from 'clsx'
+import { Link, useParams } from 'react-router-dom'
+import { match } from 'ts-pattern'
+import {
+  DEPLOYMENT_LOGS_VERSION_URL,
+  ENVIRONMENT_LOGS_URL,
+  ENVIRONMENT_PRE_CHECK_LOGS_URL,
+  ENVIRONMENT_STAGES_URL,
+} from '@qovery/shared/routes'
+import { Button, DropdownMenu, Icon, StatusChip, Tooltip } from '@qovery/shared/ui'
+import { dateFullFormat } from '@qovery/shared/util-dates'
+import { trimId } from '@qovery/shared/util-js'
+import { useDeploymentHistory } from '../hooks/use-deployment-history/use-deployment-history'
+
+export interface BreadcrumbDeploymentHistoryProps {
+  type: 'DEPLOYMENT' | 'STAGES' | 'PRE_CHECK'
+  serviceId?: string
+  versionId?: string
+}
+
+export function BreadcrumbDeploymentHistory({ type, serviceId, versionId }: BreadcrumbDeploymentHistoryProps) {
+  const { organizationId = '', projectId = '', environmentId = '' } = useParams()
+  const { data: deploymentHistory = [], isFetched: isFetchedDeloymentHistory } = useDeploymentHistory({ environmentId })
+
+  if (!isFetchedDeloymentHistory || deploymentHistory.length === 0) return null
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex flex-col">
+        <span className="mb-1 ml-2 text-xs font-medium text-neutral-350 dark:text-neutral-300">Deployment History</span>
+        <div className="flex items-center">
+          <DropdownMenu.Root>
+            <span className="relative -top-[2px] flex h-6 items-center px-2">
+              {!versionId || versionId === deploymentHistory[0]?.id ? (
+                <Tooltip content={dateFullFormat(deploymentHistory[0].created_at)} side="bottom">
+                  <span className="mr-2 flex h-5 items-center gap-1 rounded bg-purple-500 px-1 text-sm font-medium text-neutral-50">
+                    Latest
+                    <Icon iconName="circle-info" iconStyle="regular" className="text-xs" />
+                  </span>
+                </Tooltip>
+              ) : (
+                <span className="mr-2 text-sm font-medium text-neutral-50">
+                  {dateFullFormat(deploymentHistory.find((h) => h.id === versionId)?.created_at ?? 0)}
+                </span>
+              )}
+              <DropdownMenu.Trigger asChild>
+                <Button type="button" variant="plain" radius="full">
+                  <Icon iconName="angle-down" />
+                </Button>
+              </DropdownMenu.Trigger>
+            </span>
+            <DropdownMenu.Content className="-ml-2.5 max-h-64 w-80 overflow-y-auto">
+              <span className="mb-1 block px-2 text-sm font-medium text-neutral-250">Deployment History</span>
+              {deploymentHistory.map((history) => (
+                <DropdownMenu.Item
+                  asChild
+                  key={history.id}
+                  className={clsx('min-h-9', {
+                    'bg-neutral-400': (versionId || deploymentHistory[0]?.id) === history.id,
+                  })}
+                >
+                  <Link
+                    className="flex w-full justify-between"
+                    to={match(type)
+                      .with(
+                        'DEPLOYMENT',
+                        () =>
+                          ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
+                          DEPLOYMENT_LOGS_VERSION_URL(serviceId, history.id)
+                      )
+                      .with(
+                        'STAGES',
+                        () =>
+                          ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
+                          ENVIRONMENT_STAGES_URL(history.id)
+                      )
+                      .with(
+                        'PRE_CHECK',
+                        () =>
+                          ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
+                          ENVIRONMENT_PRE_CHECK_LOGS_URL(history.id)
+                      )
+                      .exhaustive()}
+                  >
+                    <Tooltip content={history.id}>
+                      <span>{trimId(history.id)}</span>
+                    </Tooltip>
+                    <span className="flex items-center gap-2.5 text-xs text-neutral-250">
+                      {dateFullFormat(history.created_at)}
+                      <StatusChip status={history.status} />
+                    </span>
+                  </Link>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BreadcrumbDeploymentHistory
diff --git a/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.spec.tsx b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.spec.tsx
new file mode 100644
index 00000000000..3df396f72b3
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.spec.tsx
@@ -0,0 +1,70 @@
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { BreadcrumbDeploymentLogs, type BreadcrumbDeploymentLogsProps } from './breadcrumb-deployment-logs'
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    organizationId: 'org-123',
+    projectId: 'proj-456',
+    environmentId: 'env-789',
+  }),
+}))
+
+const mockProps: BreadcrumbDeploymentLogsProps = {
+  serviceId: 'service-1',
+  versionId: 'version-1',
+  services: [
+    { id: 'service-1', serviceType: 'APPLICATION', name: 'Service 1' },
+    { id: 'service-2', serviceType: 'APPLICATION', name: 'Service 2' },
+  ],
+  statusStages: [
+    {
+      name: 'Stage 1',
+      applications: [{ id: 'service-1', state: 'RUNNING', steps: { total_duration_sec: 120 } }],
+      databases: [],
+      containers: [],
+      jobs: [],
+      helms: [],
+    },
+    {
+      name: 'Stage 2',
+      applications: [],
+      databases: [{ id: 'service-2', state: 'COMPLETED', steps: { total_duration_sec: 60 } }],
+      containers: [],
+      jobs: [],
+      helms: [],
+    },
+  ],
+}
+
+describe('BreadcrumbDeploymentLogs', () => {
+  it('renders correctly with given props', async () => {
+    renderWithProviders(<BreadcrumbDeploymentLogs {...mockProps} />)
+    expect(screen.getByText('Deployment logs')).toBeInTheDocument()
+    expect(screen.getByText('Service 1')).toBeInTheDocument()
+  })
+
+  it('opens dropdown when button is clicked', async () => {
+    const { userEvent } = renderWithProviders(<BreadcrumbDeploymentLogs {...mockProps} />)
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+  })
+
+  it('displays "No result" message when search has no matches', async () => {
+    const { userEvent } = renderWithProviders(<BreadcrumbDeploymentLogs {...mockProps} />)
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+
+    const searchInput = screen.getByPlaceholderText('Search...')
+    await userEvent.type(searchInput, 'Nonexistent Service')
+
+    expect(screen.getByText('No result for this search')).toBeInTheDocument()
+  })
+
+  it('renders correct stage index for the current service', async () => {
+    renderWithProviders(<BreadcrumbDeploymentLogs {...mockProps} />)
+    const badgeElement = screen.getByText('1')
+    expect(badgeElement).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.tsx b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.tsx
new file mode 100644
index 00000000000..6075f3a13bb
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs.tsx
@@ -0,0 +1,166 @@
+import { type CheckedState } from '@radix-ui/react-checkbox'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { type DeploymentStageWithServicesStatuses, type Status } from 'qovery-typescript-axios'
+import { useMemo, useState } from 'react'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import { BadgeDeploymentOrder, Button, Checkbox, Icon, InputSearch, Popover } from '@qovery/shared/ui'
+import { StageItem } from './stage-item/stage-item'
+
+export function mergeServices(
+  applications?: Status[],
+  databases?: Status[],
+  containers?: Status[],
+  jobs?: Status[],
+  helms?: Status[]
+) {
+  return (
+    (applications &&
+      databases &&
+      containers &&
+      jobs &&
+      helms && [...applications, ...databases, ...containers, ...jobs, ...helms]) ||
+    []
+  )
+}
+export interface BreadcrumbDeploymentLogsProps {
+  serviceId: string
+  versionId: string
+  services: AnyService[]
+  statusStages: DeploymentStageWithServicesStatuses[]
+}
+
+export function BreadcrumbDeploymentLogs({
+  serviceId,
+  versionId,
+  services,
+  statusStages,
+}: BreadcrumbDeploymentLogsProps) {
+  const [open, setOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [hideSkipped, setHideSkipped] = useState<CheckedState>(true)
+
+  const getService = (serviceId: string) => services.find((service: AnyService) => service.id === serviceId)
+  const currentService = getService(serviceId)
+
+  const findStageIndex = (serviceId: string): number => {
+    for (let i = 0; i < statusStages.length; i++) {
+      const stage = statusStages[i]
+      const mergedServices = mergeServices(
+        stage.applications,
+        stage.databases,
+        stage.containers,
+        stage.jobs,
+        stage.helms
+      )
+      if (mergedServices.some((service) => service.id === serviceId)) {
+        return i + 1
+      }
+    }
+    return -1
+  }
+
+  const currentFindStageIndex = findStageIndex(serviceId)
+
+  const stagesWithMergedServices = useMemo(
+    () =>
+      statusStages.map((stage) => ({
+        ...stage,
+        mergedServices: mergeServices(stage.applications, stage.databases, stage.containers, stage.jobs, stage.helms),
+      })),
+    [statusStages]
+  )
+
+  const filteredStages = useMemo(
+    () =>
+      stagesWithMergedServices
+        .map((stage) => ({
+          ...stage,
+          mergedServices: stage.mergedServices.filter((service) => {
+            const fullService = getService(service.id)
+            return fullService?.name.toLowerCase().includes(searchTerm.toLowerCase())
+          }),
+        }))
+        .filter((stage) => stage.mergedServices.length > 0),
+    [stagesWithMergedServices, searchTerm, services]
+  )
+
+  // XXX: https://github.com/radix-ui/primitives/issues/1342
+  // We are waiting for radix combobox primitives
+  // So we are using DropdownMenu.Root in combination of Popover.Root
+  // to get the flexibility of Popover.Root but keeping the accessiblity of
+  // DropdownMenu.Root for entries.
+  // So both open state should be sync
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex flex-col">
+        <span className="ml-2 text-xs font-medium text-neutral-350 dark:text-neutral-300">Deployment logs</span>
+        <div className="flex items-center gap-1">
+          <DropdownMenu.Root open={open} onOpenChange={(open) => setOpen(open)}>
+            <Popover.Root open={open} onOpenChange={(open) => setOpen(open)}>
+              <span className="flex items-center justify-between pl-2">
+                <BadgeDeploymentOrder className="mr-1.5" order={currentFindStageIndex} />
+                <span className="mr-3 text-sm font-medium text-neutral-50">{currentService?.name}</span>
+                <Popover.Trigger>
+                  <Button type="button" variant="plain" radius="full">
+                    <Icon iconName="angle-down" />
+                  </Button>
+                </Popover.Trigger>
+              </span>
+              <DropdownMenu.Content asChild>
+                <Popover.Content className="-ml-2.5 flex min-w-96 flex-col gap-3 rounded-md border-transparent bg-neutral-700 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded">
+                  {/* 
+                    `stopPropagation` is used to prevent the event from `DropdownMenu.Root` parent
+                    fix issue with item focus if we use input search
+                    https://github.com/radix-ui/primitives/issues/2193#issuecomment-1790564604 
+                  */}
+                  <div className="flex flex-col gap-3" onKeyDown={(e) => e.stopPropagation()}>
+                    <InputSearch
+                      placeholder="Search..."
+                      className="mb-1 dark:bg-neutral-600"
+                      onChange={(value) => setSearchTerm(value)}
+                      autofocus
+                    />
+                    <div className="flex items-center gap-3 text-sm font-medium text-neutral-50">
+                      <Checkbox
+                        name="skipped"
+                        id="skipped"
+                        className="shrink-0"
+                        color="brand"
+                        checked={hideSkipped}
+                        onCheckedChange={setHideSkipped}
+                      />
+                      <label htmlFor="skipped">Hide skipped</label>
+                    </div>
+                  </div>
+                  <div className="overflow-y-auto">
+                    {filteredStages.length > 0 ? (
+                      filteredStages.map((stage, index) => (
+                        <StageItem
+                          key={index}
+                          stage={stage}
+                          index={index}
+                          getService={getService}
+                          serviceId={serviceId}
+                          versionId={versionId}
+                          searchTerm={searchTerm}
+                          hideSkipped={hideSkipped}
+                        />
+                      ))
+                    ) : (
+                      <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>
+                    )}
+                  </div>
+                </Popover.Content>
+              </DropdownMenu.Content>
+            </Popover.Root>
+          </DropdownMenu.Root>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BreadcrumbDeploymentLogs
diff --git a/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/stage-item/stage-item.tsx b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/stage-item/stage-item.tsx
new file mode 100644
index 00000000000..0c82800650b
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/breadcrumb-deployment-logs/stage-item/stage-item.tsx
@@ -0,0 +1,110 @@
+import { type CheckedState } from '@radix-ui/react-checkbox'
+import * as Collapsible from '@radix-ui/react-collapsible'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import clsx from 'clsx'
+import { type Stage, type Status } from 'qovery-typescript-axios'
+import { useEffect, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import { ServiceAvatar } from '@qovery/domains/services/feature'
+import { DEPLOYMENT_LOGS_VERSION_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
+import { BadgeDeploymentOrder, Icon, StatusChip, Truncate, dropdownMenuItemVariants } from '@qovery/shared/ui'
+import { dateUTCString } from '@qovery/shared/util-dates'
+import { twMerge, upperCaseFirstLetter } from '@qovery/shared/util-js'
+
+export interface StageItemProps {
+  stage: {
+    mergedServices: Status[]
+    stage?: Stage
+  }
+  index: number
+  serviceId: string
+  versionId: string
+  searchTerm: string
+  getService: (serviceId: string) => AnyService | undefined
+  hideSkipped: CheckedState
+}
+
+export function StageItem({ stage, index, getService, serviceId, versionId, searchTerm, hideSkipped }: StageItemProps) {
+  const { organizationId = '', projectId = '', environmentId = '' } = useParams()
+
+  const [isOpen, setIsOpen] = useState(() => {
+    // Initialize open state based on whether there are any non-skipped services
+    return stage.mergedServices.some((service) => service.steps?.total_duration_sec !== undefined)
+  })
+
+  useEffect(() => {
+    if (searchTerm.length > 0) setIsOpen(true)
+  }, [searchTerm])
+
+  const mergedServices = stage.mergedServices.filter((s) => {
+    if (!hideSkipped) {
+      return true
+    }
+    return s.steps?.total_duration_sec !== undefined
+  })
+
+  if (mergedServices.length === 0) return null
+
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={setIsOpen} asChild>
+      <div className="mb-2 last:mb-0">
+        <Collapsible.Trigger className="w-full" asChild>
+          <button className="flex items-center justify-between px-2 pb-2 pt-1 text-sm text-neutral-250">
+            <span className="flex items-center">
+              <BadgeDeploymentOrder className="mr-1.5" order={index + 1} />
+              <Truncate text={upperCaseFirstLetter(stage.stage?.name)} truncateLimit={40} />
+            </span>
+            <Icon iconName={isOpen ? 'chevron-up' : 'chevron-down'} />
+          </button>
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          {stage.mergedServices.map((service) => {
+            const fullService = getService(service.id)
+            const totalDurationSec = service.steps?.total_duration_sec
+
+            if (hideSkipped && !totalDurationSec) return null
+
+            return (
+              <DropdownMenu.Item
+                key={service.id}
+                className={twMerge(
+                  clsx(dropdownMenuItemVariants({ color: 'brand' }), 'w-full justify-between gap-1 px-2 py-1.5', {
+                    'bg-neutral-400': service.id === serviceId,
+                  })
+                )}
+                asChild
+              >
+                <Link
+                  to={
+                    ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
+                    DEPLOYMENT_LOGS_VERSION_URL(service.id, versionId)
+                  }
+                >
+                  <span className="flex items-center gap-2.5">
+                    <ServiceAvatar size="xs" service={getService(service.id)!} border="none" />
+                    <Truncate text={fullService?.name ?? ''} truncateLimit={28} />
+                  </span>
+                  <span className="flex items-center gap-2">
+                    <span className="text-xs text-neutral-300">
+                      {totalDurationSec ? (
+                        <span title={dateUTCString(service.last_deployment_date ?? '')}>
+                          {Math.floor(totalDurationSec / 60)}m:{totalDurationSec % 60}s
+                        </span>
+                      ) : (
+                        'skipped'
+                      )}
+                    </span>
+                    <StatusChip status={totalDurationSec ? service.state : 'SKIP'} />
+                  </span>
+                </Link>
+              </DropdownMenu.Item>
+            )
+          })}
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
+  )
+}
+
+export default StageItem
diff --git a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.spec.tsx b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.spec.tsx
new file mode 100644
index 00000000000..386a6ea380c
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.spec.tsx
@@ -0,0 +1,80 @@
+import { useLinks, useService } from '@qovery/domains/services/feature'
+import { renderWithProviders, screen, within } from '@qovery/shared/util-tests'
+import { HeaderLogs, type HeaderLogsProps } from './header-logs'
+
+jest.mock('@qovery/domains/services/feature', () => ({
+  ...jest.requireActual('@qovery/domains/services/feature'),
+  useService: jest.fn(),
+  useLinks: jest.fn(),
+  ServiceAvatar: () => <div data-testid="service-avatar" />,
+  ServiceLinksPopover: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+const mockProps: HeaderLogsProps = {
+  type: 'DEPLOYMENT',
+  serviceId: 'service-1',
+  environment: {
+    id: 'env-1',
+    organization: { id: 'org-1' },
+    project: { id: 'proj-1' },
+  },
+  serviceStatus: {
+    id: 'status-1',
+    state: 'RUNNING',
+    steps: { total_computing_duration_sec: 125 },
+  },
+  environmentStatus: {
+    id: 'env-status-1',
+    state: 'RUNNING',
+  },
+}
+
+describe('HeaderLogs', () => {
+  beforeEach(() => {
+    useService.mockReturnValue({
+      data: {
+        id: 'service-1',
+        name: 'Test Service',
+        serviceType: 'APPLICATION',
+      },
+    })
+    useLinks.mockReturnValue({
+      data: [
+        { id: 'link-1', url: 'https://example.com', is_default: false, is_qovery_domain: false },
+        { id: 'link-2', url: 'https://qovery.com', is_default: true, is_qovery_domain: true },
+      ],
+    })
+  })
+
+  it('renders correctly for deployment type', async () => {
+    renderWithProviders(<HeaderLogs {...mockProps} />)
+
+    expect(screen.getByText('Test Service')).toBeInTheDocument()
+    expect(screen.getByText('2m : 5s')).toBeInTheDocument()
+    expect(screen.getByTestId('service-avatar')).toBeInTheDocument()
+
+    const linksButton = screen.getByRole('button', { name: /link/ })
+    expect(within(linksButton).getByText('1 link')).toBeInTheDocument()
+  })
+
+  it('renders correctly for service type', () => {
+    renderWithProviders(<HeaderLogs {...mockProps} type="SERVICE" />)
+
+    expect(screen.getByText('Test Service')).toBeInTheDocument()
+    expect(screen.queryByText('2m : 5s')).not.toBeInTheDocument()
+  })
+
+  it('displays correct number of links', () => {
+    renderWithProviders(<HeaderLogs {...mockProps} />)
+    expect(screen.getByText('1 link')).toBeInTheDocument()
+  })
+
+  it('renders children content', () => {
+    renderWithProviders(
+      <HeaderLogs {...mockProps}>
+        <div data-testid="child-content">Child Content</div>
+      </HeaderLogs>
+    )
+    expect(screen.getByTestId('child-content')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
new file mode 100644
index 00000000000..9f9c7f5eee6
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
@@ -0,0 +1,123 @@
+import { type Environment, type EnvironmentStatus, type Status } from 'qovery-typescript-axios'
+import { type PropsWithChildren } from 'react'
+import { ServiceAvatar, ServiceLinksPopover, useLinks, useService } from '@qovery/domains/services/feature'
+import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
+import { Button, Icon, Link, Tooltip } from '@qovery/shared/ui'
+import { dateUTCString } from '@qovery/shared/util-dates'
+import { pluralize } from '@qovery/shared/util-js'
+
+export interface HeaderLogsProps extends PropsWithChildren {
+  type: 'DEPLOYMENT' | 'SERVICE'
+  serviceId: string
+  environment: Environment
+  serviceStatus: Status
+  versionId?: string
+  environmentStatus?: EnvironmentStatus
+}
+
+function EndCurve() {
+  return (
+    <svg
+      className="relative -left-0.5 -top-[1px]"
+      xmlns="http://www.w3.org/2000/svg"
+      width="40"
+      height="48"
+      fill="none"
+      viewBox="0 0 40 49"
+    >
+      <path fill="#1A2031" d="M0 .955h5.071a16 16 0 0114.545 9.334l17.722 38.666H0v-48z"></path>
+      <path stroke="#2A3041" d="M37.084 48.955L18.037 7.764A11 11 0 008.052 1.38H0"></path>
+    </svg>
+  )
+}
+
+export function HeaderLogs({
+  type,
+  environment,
+  versionId,
+  serviceId,
+  environmentStatus,
+  serviceStatus,
+  children,
+}: HeaderLogsProps) {
+  const { data: service } = useService({ environmentId: environment.id, serviceId })
+  const { data: links = [] } = useLinks({ serviceId: serviceId, serviceType: service?.serviceType })
+  const filteredLinks = links.filter((link) => !(link.is_default && link.is_qovery_domain))
+
+  if (!service) return null
+
+  const totalDurationSec = serviceStatus?.steps?.total_computing_duration_sec ?? 0
+
+  return (
+    <div className="flex h-12 w-full items-center justify-between border-b border-neutral-500 bg-neutral-900 pr-4">
+      <div className="flex h-full">
+        <div className="flex h-full items-center gap-4 border-t border-neutral-500 bg-neutral-600 py-2.5 pl-4 pr-0.5 text-sm font-medium text-neutral-50">
+          {type === 'DEPLOYMENT' && (
+            <>
+              <Link
+                as="button"
+                size="sm"
+                variant="surface"
+                color="neutral"
+                className="w-7 justify-center"
+                to={
+                  ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
+                  ENVIRONMENT_STAGES_URL(versionId)
+                }
+              >
+                <Icon iconName="timeline" />
+              </Link>
+              <span className="text-neutral-400">/</span>
+            </>
+          )}
+          <span className="flex items-center gap-2">
+            <span className="flex items-center gap-2.5">
+              <ServiceAvatar size="xs" service={service} border="none" />
+              {service.name}
+            </span>
+            <Tooltip side="bottom" content={<span>Execution id: {environmentStatus?.id}</span>}>
+              <span>
+                <Icon className="text-base" iconName="circle-info" iconStyle="regular" />
+              </span>
+            </Tooltip>
+          </span>
+          {type === 'DEPLOYMENT' && (
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" width="5" height="6" fill="none" viewBox="0 0 5 6">
+                <circle cx="2.5" cy="2.955" r="2.5" fill="#383E50"></circle>
+              </svg>
+              <span
+                className="flex items-center gap-1.5"
+                title={dateUTCString(serviceStatus.last_deployment_date ?? '')}
+              >
+                <Icon iconName="stopwatch" iconStyle="regular" className="text-base text-neutral-250" />
+                {Math.floor(totalDurationSec / 60)}m : {totalDurationSec % 60}s
+              </span>
+            </>
+          )}
+          <ServiceLinksPopover
+            organizationId={environment.organization.id}
+            projectId={environment.project.id}
+            environmentId={environment.id}
+            serviceId={serviceId}
+            align="start"
+          >
+            <Button variant="surface" color="neutral" radius="full">
+              <Tooltip content="Links">
+                <div className="flex items-center gap-1">
+                  <Icon iconName="link" iconStyle="regular" />
+                  {filteredLinks.length} {pluralize(filteredLinks.length, 'link', 'links')}
+                  <Icon iconName="angle-down" />
+                </div>
+              </Tooltip>
+            </Button>
+          </ServiceLinksPopover>
+        </div>
+        <EndCurve />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export default HeaderLogs
diff --git a/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts b/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
new file mode 100644
index 00000000000..16715756a2f
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseDeploymentHistoryProps {
+  environmentId: string
+}
+
+export function useDeploymentHistory({ environmentId }: UseDeploymentHistoryProps) {
+  return useQuery({
+    ...queries.environments.deploymentHistory({ environmentId }),
+    refetchInterval: 5000,
+  })
+}
+
+export default useDeploymentHistory
diff --git a/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-logs/use-deployment-logs.ts b/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-logs/use-deployment-logs.ts
index 8fce5ee6611..7c34cea94bd 100644
--- a/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-logs/use-deployment-logs.ts
+++ b/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-logs/use-deployment-logs.ts
@@ -114,7 +114,8 @@ export function useDeploymentLogs({
           // 1. The stage name is "delete".
           // 2. stageId is empty or equal with current stageId.
           // 3. The transmitter matches serviceId or has a type of "Environment" or "TaskManager".
-          return (isDeleteStage || isEmptyOrEqualStageId) && isMatchingTransmitter
+          // 4. Don't have step PreCheck
+          return (isDeleteStage || isEmptyOrEqualStageId) && isMatchingTransmitter && stage?.step !== 'PreCheck'
         })
         .map((log, index) => ({ ...log, id: index + 1 }))
         .filter((log, index, array) =>
diff --git a/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-status/use-deployment-status.ts b/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-status/use-deployment-status.ts
new file mode 100644
index 00000000000..aeeee4fd8e1
--- /dev/null
+++ b/libs/domains/service-logs/feature/src/lib/hooks/use-deployment-status/use-deployment-status.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseDeploymentStatusProps {
+  environmentId?: string
+  serviceId?: string
+}
+
+export function useDeploymentStatus({ environmentId, serviceId }: UseDeploymentStatusProps) {
+  return useQuery({
+    // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion
+    ...queries.services.deploymentStatus(environmentId!!, serviceId!!),
+    enabled: Boolean(environmentId) && Boolean(serviceId),
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
+  })
+}
+
+export default useDeploymentStatus
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.spec.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.spec.tsx
index acc76b93a98..71484d37f31 100644
--- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.spec.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.spec.tsx
@@ -1,6 +1,5 @@
 import { type Status } from 'qovery-typescript-axios'
-import { useDeploymentStatus } from '@qovery/domains/services/feature'
-import { useServiceType } from '@qovery/domains/services/feature'
+import { useDeploymentStatus, useLinks, useService } from '@qovery/domains/services/feature'
 import { environmentFactoryMock } from '@qovery/shared/factories'
 import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
 import { useDeploymentLogs } from '../hooks/use-deployment-logs/use-deployment-logs'
@@ -101,8 +100,15 @@ describe('ListDeploymentLogs', () => {
       data: { state: 'RUNNING' },
     })
 
-    useServiceType.mockReturnValue({
-      data: { serviceType: 'APPLICATION' },
+    useService.mockReturnValue({
+      data: {
+        id: 'service-1',
+        name: 'Test Service',
+        serviceType: 'APPLICATION',
+      },
+    })
+    useLinks.mockReturnValue({
+      data: [{ id: 'link-1', url: 'https://example.com', is_default: false, is_qovery_domain: false }],
     })
   })
 
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
index 4b5da8f894e..c1630a7cea5 100644
--- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx
@@ -7,23 +7,32 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import download from 'downloadjs'
-import { type DeploymentHistoryEnvironment, type Environment, type Status } from 'qovery-typescript-axios'
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  type DeploymentHistoryEnvironment,
+  type Environment,
+  type EnvironmentStatus,
+  type Stage,
+  type Status,
+} from 'qovery-typescript-axios'
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
-import { useDeploymentStatus, useServiceType } from '@qovery/domains/services/feature'
-import { Button, Icon, TablePrimitives } from '@qovery/shared/ui'
+import { ServiceStateChip, useDeploymentStatus, useService } from '@qovery/domains/services/feature'
+import { ENVIRONMENT_LOGS_URL, SERVICE_LOGS_URL } from '@qovery/shared/routes'
+import { Button, Icon, Link, TablePrimitives } from '@qovery/shared/ui'
 import { DeploymentLogsPlaceholder } from '../deployment-logs-placeholder/deployment-logs-placeholder'
+import HeaderLogs from '../header-logs/header-logs'
 import { type EnvironmentLogIds, useDeploymentLogs } from '../hooks/use-deployment-logs/use-deployment-logs'
 import { ProgressIndicator } from '../progress-indicator/progress-indicator'
+import { ServiceStageIdsContext } from '../service-stage-ids-context/service-stage-ids-context'
 import { ShowNewLogsButton } from '../show-new-logs-button/show-new-logs-button'
 import { ShowPreviousLogsButton } from '../show-previous-logs-button/show-previous-logs-button'
 import { FiltersStageStep } from './filters-stage-step/filters-stage-step'
-import { RowDeployment } from './row-deployment/row-deployment'
+import { RowDeploymentLogs } from './row-deployment-logs/row-deployment-logs'
 
 const { Table } = TablePrimitives
 
-const MemoizedRowDeployment = memo(RowDeployment)
+const MemoizedRowDeploymentLogs = memo(RowDeploymentLogs)
 
 export type FilterType = 'ALL' | 'DEPLOY' | 'BUILD'
 
@@ -119,18 +128,27 @@ export interface ListDeploymentLogsProps {
   environment: Environment
   deploymentHistoryEnvironment: DeploymentHistoryEnvironment[]
   serviceStatus: Status
+  stage?: Stage
+  environmentStatus?: EnvironmentStatus
 }
 
 export function ListDeploymentLogs({
   environment,
   deploymentHistoryEnvironment,
+  environmentStatus,
   serviceStatus,
+  stage,
 }: ListDeploymentLogsProps) {
   const { hash } = useLocation()
   const { organizationId, projectId, serviceId, versionId } = useParams()
   const refScrollSection = useRef<HTMLDivElement>(null)
+  const { updateStageId } = useContext(ServiceStageIdsContext)
+
+  useEffect(() => {
+    if (stage) updateStageId(stage.id)
+  }, [serviceId, serviceStatus, updateStageId, stage])
 
-  const { data: serviceType } = useServiceType({ environmentId: environment.id, serviceId })
+  const { data: service } = useService({ environmentId: environment.id, serviceId })
   const { data: deploymentStatus } = useDeploymentStatus({ environmentId: environment.id, serviceId })
   const {
     data: logs = [],
@@ -276,24 +294,57 @@ export function ListDeploymentLogs({
 
   if (!logs || logs.length === 0 || !serviceStatus.is_part_last_deployment) {
     return (
-      <div className="px-1 pb-1">
-        <div className="h-[calc(100vh-116px)] bg-neutral-650 pt-11">
-          <DeploymentLogsPlaceholder
+      <div className="h-full p-1">
+        <div className="h-full border border-t-0 border-neutral-500 bg-neutral-600">
+          <HeaderLogs
+            type="DEPLOYMENT"
+            environment={environment}
+            serviceId={serviceId ?? ''}
+            versionId={versionId}
             serviceStatus={serviceStatus}
-            itemsLength={logs.length}
-            deploymentHistoryEnvironment={deploymentHistoryEnvironment}
+            environmentStatus={environmentStatus}
           />
+          <div className="bg-neutral-600 pt-11">
+            <DeploymentLogsPlaceholder
+              serviceStatus={serviceStatus}
+              itemsLength={logs.length}
+              deploymentHistoryEnvironment={deploymentHistoryEnvironment}
+            />
+          </div>
         </div>
       </div>
     )
   }
   return (
-    <div className="h-[calc(100vh-112px)] w-full max-w-[calc(100vw-64px)] overflow-hidden p-1 pt-0">
-      <div className="relative h-full border border-neutral-500 bg-neutral-600">
-        <div className="flex h-12 w-full items-center justify-between border-b border-neutral-500 px-4 py-2.5">
+    <div className="h-[calc(100vh-64px)] w-full max-w-[calc(100vw-64px)] overflow-hidden bg-neutral-900 p-1">
+      <div className="relative h-full border border-r-0 border-t-0 border-neutral-500 bg-neutral-600">
+        <HeaderLogs
+          type="DEPLOYMENT"
+          environment={environment}
+          serviceId={serviceId ?? ''}
+          versionId={versionId}
+          serviceStatus={serviceStatus}
+          environmentStatus={environmentStatus}
+        >
+          <Link
+            as="button"
+            className="gap-1"
+            variant="surface"
+            to={ENVIRONMENT_LOGS_URL(organizationId, projectId, environment.id) + SERVICE_LOGS_URL(serviceId)}
+          >
+            {match(service)
+              .with({ serviceType: 'DATABASE' }, (db) => db.mode === 'CONTAINER')
+              .otherwise(() => true) ? (
+              <ServiceStateChip className="mr-1" mode="running" environmentId={environment.id} serviceId={serviceId} />
+            ) : null}
+            Go to service logs
+            <Icon iconName="arrow-right" />
+          </Link>
+        </HeaderLogs>
+        <div className="flex h-12 w-full items-center justify-between border-b border-r border-neutral-500 px-4 py-2.5">
           <FiltersStageStep
             serviceStatus={serviceStatus}
-            serviceType={serviceType}
+            serviceType={service?.serviceType}
             isFilterActive={isFilterActive}
             toggleColumnFilter={toggleColumnFilter}
           />
@@ -308,7 +359,7 @@ export function ListDeploymentLogs({
           </Button>
         </div>
         <div
-          className="h-full w-full overflow-y-scroll pb-16"
+          className="max-h-[calc(100vh-170px)] w-full overflow-y-scroll pb-12"
           ref={refScrollSection}
           onWheel={(event) => {
             if (
@@ -332,7 +383,7 @@ export function ListDeploymentLogs({
           <Table.Root className="w-full text-xs">
             <Table.Body className="divide-y-0">
               {table.getRowModel().rows.map((row) => (
-                <MemoizedRowDeployment key={row.id} {...row} />
+                <MemoizedRowDeploymentLogs key={row.id} {...row} />
               ))}
             </Table.Body>
           </Table.Root>
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment/row-deployment.spec.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment-logs/row-deployment-logs.spec.tsx
similarity index 71%
rename from libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment/row-deployment.spec.tsx
rename to libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment-logs/row-deployment-logs.spec.tsx
index 78fb1f16ebc..d7c7b114e83 100644
--- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment/row-deployment.spec.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment-logs/row-deployment-logs.spec.tsx
@@ -1,7 +1,7 @@
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import { RowDeployment } from './row-deployment'
+import { RowDeploymentLogs } from './row-deployment-logs'
 
-describe('RowDeployment', () => {
+describe('RowDeploymentLogs', () => {
   const mockProps = {
     index: 0,
     original: {
@@ -19,12 +19,12 @@ describe('RowDeployment', () => {
   }
 
   it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<RowDeployment {...mockProps} />)
+    const { baseElement } = renderWithProviders(<RowDeploymentLogs {...mockProps} />)
     expect(baseElement).toBeTruthy()
   })
 
   it('renders basic row content', () => {
-    renderWithProviders(<RowDeployment {...mockProps} />)
+    renderWithProviders(<RowDeploymentLogs {...mockProps} />)
 
     expect(screen.getByText('1')).toBeInTheDocument()
     expect(screen.getByText('Test log message')).toBeInTheDocument()
diff --git a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment/row-deployment.tsx b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment-logs/row-deployment-logs.tsx
similarity index 88%
rename from libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment/row-deployment.tsx
rename to libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment-logs/row-deployment-logs.tsx
index 50e457fc2f6..727afd7f336 100644
--- a/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment/row-deployment.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-deployment-logs/row-deployment-logs/row-deployment-logs.tsx
@@ -1,7 +1,7 @@
 import { type IconName } from '@fortawesome/fontawesome-common-types'
 import { type Row } from '@tanstack/react-table'
 import clsx from 'clsx'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { LogsType } from '@qovery/shared/enums'
 import { Ansi, Icon, TablePrimitives, Tooltip } from '@qovery/shared/ui'
@@ -9,14 +9,12 @@ import { dateFullFormat, dateUTCString } from '@qovery/shared/util-dates'
 import { useCopyToClipboard } from '@qovery/shared/util-hooks'
 import { twMerge } from '@qovery/shared/util-js'
 import { type EnvironmentLogIds } from '../../hooks/use-deployment-logs/use-deployment-logs'
-import { UpdateTimeContext } from '../../update-time-context/update-time-context'
 
 const { Table } = TablePrimitives
 
-export interface RowDeploymentProps extends Row<EnvironmentLogIds> {}
+export interface RowDeploymentLogsProps extends Row<EnvironmentLogIds> {}
 
-export function RowDeployment({ original }: RowDeploymentProps) {
-  const { utc } = useContext(UpdateTimeContext)
+export function RowDeploymentLogs({ original }: RowDeploymentLogsProps) {
   const [, copyToClipboard] = useCopyToClipboard()
   const navigate = useNavigate()
   const { pathname, hash } = useLocation()
@@ -73,7 +71,7 @@ export function RowDeployment({ original }: RowDeploymentProps) {
       </Table.Cell>
       <Table.Cell className="h-fit shrink-0 py-1 pl-2 pr-3 font-code font-bold text-neutral-300">
         <span title={dateUTCString(original.timestamp)}>
-          {dateFullFormat(original.timestamp, utc ? 'UTC' : undefined, 'dd MMM, HH:mm:ss.SS')}
+          {dateFullFormat(original.timestamp, 'UTC', 'dd MMM, HH:mm:ss.SS')}
         </span>
       </Table.Cell>
       <Table.Cell
@@ -95,4 +93,4 @@ export function RowDeployment({ original }: RowDeploymentProps) {
   )
 }
 
-export default RowDeployment
+export default RowDeploymentLogs
diff --git a/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.spec.tsx b/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.spec.tsx
index fd1c6ab3816..dad0aaf89f6 100644
--- a/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.spec.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.spec.tsx
@@ -1,11 +1,8 @@
-import { applicationFactoryMock } from '@qovery/shared/factories'
 import { renderWithProviders } from '@qovery/shared/util-tests'
 import ListServiceLogs from './list-service-logs'
 
 window.HTMLElement.prototype.scroll = jest.fn()
 
-const mockApplication = applicationFactoryMock(1)[0]
-
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: () => ({
@@ -16,11 +13,6 @@ jest.mock('react-router-dom', () => ({
   }),
 }))
 
-jest.mock('@qovery/domains/services/feature', () => ({
-  useService: () => ({ data: mockApplication }),
-  useRunningStatus: () => ({ data: { state: 'RUNNING' } }),
-}))
-
 jest.mock('../hooks/use-service-logs/use-service-logs', () => ({
   useServiceLogs: () => ({
     data: [
@@ -46,7 +38,16 @@ jest.mock('../hooks/use-service-logs/use-service-logs', () => ({
 
 describe('ListServiceLogs', () => {
   it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<ListServiceLogs clusterId="000" />)
+    const { baseElement } = renderWithProviders(
+      <ListServiceLogs
+        environment={{
+          id: 'env-1',
+          organization: { id: 'org-1' },
+          project: { id: 'proj-1' },
+        }}
+        clusterId="000"
+      />
+    )
     expect(baseElement).toBeTruthy()
   })
 })
diff --git a/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx b/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx
index 61bbd591007..8e7c1af9de1 100644
--- a/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx
+++ b/libs/domains/service-logs/feature/src/lib/list-service-logs/list-service-logs.tsx
@@ -8,12 +8,15 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import download from 'downloadjs'
+import { type Environment, type EnvironmentStatus, type Status } from 'qovery-typescript-axios'
 import { type ServiceLogResponseDto } from 'qovery-ws-typescript-axios'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useParams, useSearchParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
-import { useRunningStatus, useService } from '@qovery/domains/services/feature'
-import { Button, DropdownMenu, Icon, TablePrimitives } from '@qovery/shared/ui'
+import { ServiceStateChip, useRunningStatus, useService } from '@qovery/domains/services/feature'
+import { DEPLOYMENT_LOGS_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
+import { Button, DropdownMenu, Icon, Link, TablePrimitives } from '@qovery/shared/ui'
+import { HeaderLogs } from '../header-logs/header-logs'
 import { type LogType, useServiceLogs } from '../hooks/use-service-logs/use-service-logs'
 import { ProgressIndicator } from '../progress-indicator/progress-indicator'
 import { ServiceLogsPlaceholder } from '../service-logs-placeholder/service-logs-placeholder'
@@ -30,16 +33,19 @@ const MemoizedRowInfraLogs = memo(RowInfraLogs)
 const MemoizedRowServiceLogs = memo(RowServiceLogs)
 
 export interface ListServiceLogsProps {
+  environment: Environment
   clusterId: string
+  serviceStatus: Status
+  environmentStatus?: EnvironmentStatus
 }
 
-export function ListServiceLogs({ clusterId }: ListServiceLogsProps) {
-  const { organizationId, projectId, environmentId, serviceId } = useParams()
+export function ListServiceLogs({ environment, clusterId, serviceStatus, environmentStatus }: ListServiceLogsProps) {
+  const { serviceId } = useParams()
   const refScrollSection = useRef<HTMLDivElement>(null)
   const [searchParams, setSearchParams] = useSearchParams()
 
-  const { data: service } = useService({ environmentId, serviceId })
-  const { data: runningStatus } = useRunningStatus({ environmentId, serviceId })
+  const { data: service } = useService({ environmentId: environment.id, serviceId })
+  const { data: runningStatus } = useRunningStatus({ environmentId: environment.id, serviceId })
   const {
     data: logs = [],
     pauseLogs,
@@ -51,10 +57,10 @@ export function ListServiceLogs({ clusterId }: ListServiceLogsProps) {
     enabledNginx,
     setEnabledNginx,
   } = useServiceLogs({
-    organizationId,
+    organizationId: environment.organization.id,
     clusterId,
-    projectId,
-    environmentId,
+    projectId: environment.project.id,
+    environmentId: environment.id,
     serviceId,
     enabled: service?.serviceType === 'DATABASE' ? service?.mode === 'CONTAINER' : true,
   })
@@ -172,8 +178,8 @@ export function ListServiceLogs({ clusterId }: ListServiceLogsProps) {
   // Temporary solution with `includes` to handle the case where only one log with the message 'No pods found' is received.
   if (!logs || logs.length === 0 || logs[0].message.includes('No pods found')) {
     return (
-      <div className="px-1 pb-1">
-        <div className="h-[calc(100vh-116px)] bg-neutral-650 pt-11">
+      <div className="p-1">
+        <div className="h-[calc(100vh-72px)] border border-neutral-500 bg-neutral-600 pt-11">
           <ServiceLogsPlaceholder
             serviceName={service?.name}
             itemsLength={logs.length}
@@ -191,8 +197,38 @@ export function ListServiceLogs({ clusterId }: ListServiceLogsProps) {
         setUpdateTimeContext,
       }}
     >
-      <div className="h-[calc(100vh-112px)] w-full max-w-[calc(100vw-64px)] overflow-hidden p-1 pt-0">
-        <div className="relative h-full border border-neutral-500 bg-neutral-600">
+      <div className="h-[calc(100vh-64px)] w-full max-w-[calc(100vw-64px)] overflow-hidden p-1">
+        <div className="relative h-full border border-r-0 border-t-0 border-neutral-500 bg-neutral-600">
+          <HeaderLogs
+            type="SERVICE"
+            environment={environment}
+            serviceId={serviceId ?? ''}
+            serviceStatus={serviceStatus}
+            environmentStatus={environmentStatus}
+          >
+            <Link
+              as="button"
+              className="gap-1"
+              variant="surface"
+              to={
+                ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
+                DEPLOYMENT_LOGS_URL(serviceId)
+              }
+            >
+              {match(service)
+                .with({ serviceType: 'DATABASE' }, (db) => db.mode === 'CONTAINER')
+                .otherwise(() => true) ? (
+                <ServiceStateChip
+                  className="mr-1"
+                  mode="deployment"
+                  environmentId={environment.id}
+                  serviceId={serviceId}
+                />
+              ) : null}
+              Go to latest deployment
+              <Icon iconName="arrow-right" />
+            </Link>
+          </HeaderLogs>
           <div className="flex h-12 w-full items-center justify-between border-b border-neutral-500 px-4 py-2.5">
             <div className="flex items-center gap-3">
               <Button
@@ -287,7 +323,7 @@ export function ListServiceLogs({ clusterId }: ListServiceLogsProps) {
             </div>
           </div>
           <div
-            className="h-full w-full overflow-y-scroll pb-8"
+            className="h-full w-full overflow-y-scroll pb-20"
             ref={refScrollSection}
             onWheel={(event) => {
               if (
diff --git a/libs/domains/service-logs/feature/src/lib/list-service-logs/row-service-logs/style.scss b/libs/domains/service-logs/feature/src/lib/list-service-logs/row-service-logs/style.scss
index 283cba072ee..708ecba0fe0 100644
--- a/libs/domains/service-logs/feature/src/lib/list-service-logs/row-service-logs/style.scss
+++ b/libs/domains/service-logs/feature/src/lib/list-service-logs/row-service-logs/style.scss
@@ -5,5 +5,5 @@
 .sl-row:hover + .sl-expanded,
 .sl-expanded:hover,
 .sl-row:has(+ .sl-expanded:hover) {
-  background-color: theme('colors.neutral.700');
+  background-color: theme('colors.neutral.550');
 }
diff --git a/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx b/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
index 984c16ab2c9..915c9a057ac 100644
--- a/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
+++ b/libs/domains/service-logs/feature/src/lib/service-logs-placeholder/service-logs-placeholder.tsx
@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { P, match } from 'ts-pattern'
 import { useDeploymentStatus } from '@qovery/domains/services/feature'
-import { LoaderSpinner } from '@qovery/shared/ui'
+import { DEPLOYMENT_LOGS_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
+import { Icon, Link, LoaderSpinner } from '@qovery/shared/ui'
 
 export function LoaderPlaceholder() {
   return (
@@ -20,7 +21,7 @@ export interface ServiceLogsPlaceholderProps {
 }
 
 export function ServiceLogsPlaceholder({ serviceName, databaseMode, itemsLength }: ServiceLogsPlaceholderProps) {
-  const { environmentId, serviceId } = useParams()
+  const { organizationId, projectId, environmentId, serviceId } = useParams()
   const { data: deploymentStatus } = useDeploymentStatus({ environmentId, serviceId })
   const { state: deploymentState } = deploymentStatus ?? {}
   const [showPlaceholder, setShowPlaceholder] = useState(false)
@@ -47,7 +48,16 @@ export function ServiceLogsPlaceholder({ serviceName, databaseMode, itemsLength
           <p className="mb-1 font-medium text-neutral-50">
             No logs available for <span className="text-brand-400">{serviceName}</span>.
           </p>
-          <p className="text-sm font-normal text-neutral-300">Please check if the service is up and running.</p>
+          <p className="mb-2 text-sm font-normal text-neutral-300">Please check if the service is up and running.</p>
+          <Link
+            as="button"
+            size="sm"
+            color="neutral"
+            to={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + DEPLOYMENT_LOGS_URL(serviceId)}
+          >
+            Go to latest deployment
+            <Icon iconName="arrow-right" className="ml-1" />
+          </Link>
         </div>
       ) : (
         <LoaderPlaceholder />
diff --git a/libs/domains/services/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts b/libs/domains/services/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
index d71cf15f37d..80e375c757a 100644
--- a/libs/domains/services/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
+++ b/libs/domains/services/feature/src/lib/hooks/use-deployment-history/use-deployment-history.ts
@@ -12,7 +12,7 @@ export function useDeploymentHistory({ serviceId, serviceType }: UseDeploymentHi
     // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion
     ...queries.services.deploymentHistory({ serviceId: serviceId!!, serviceType: serviceType!! }),
     enabled: Boolean(serviceId) && Boolean(serviceType),
-    refetchInterval: 2000,
+    refetchInterval: 5000,
   })
 }
 
diff --git a/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap
index 3bd9acd0c90..8eb651cc193 100644
--- a/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap
@@ -94,7 +94,7 @@ exports[`ServiceActionToolbar should match manage deployment snapshot 1`] = `
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -134,7 +134,7 @@ exports[`ServiceActionToolbar should match manage deployment snapshot 1`] = `
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -252,7 +252,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
     <div
       aria-labelledby="radix-:rv:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -265,7 +265,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
       tabindex="-1"
     >
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/456/environment/789/logs/0/service-logs"
@@ -284,7 +284,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         target="_blank"
       >
         <div
-          class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+          class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
           data-orientation="vertical"
           data-radix-collection-item=""
           role="menuitem"
@@ -298,7 +298,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         </div>
       </a>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/audit-logs/general?targetId=0&targetType=HELM&projectId=123&environmentId=3840068565336064"
@@ -312,7 +312,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -325,7 +325,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         Copy identifiers
       </div>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/123/environment/3840068565336064/application/0/settings/general"
@@ -339,7 +339,7 @@ exports[`ServiceActionToolbar should match other actions snapshot 1`] = `
         Open settings
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
diff --git a/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap
index 3c12b9de192..7697a833b89 100644
--- a/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-links-popover/__snapshots__/service-links-popover.spec.tsx.snap
@@ -29,7 +29,7 @@ exports[`ServiceLinksPopover should match snapshot 1`] = `
     style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: -20px; --radix-popper-available-height: -18px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 100% 0px;"
   >
     <div
-      class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border-solid dark:border-neutral-500 dark:bg-neutral-550 max-w-[280px] border-transparent p-2 text-sm text-neutral-350"
+      class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border dark:border-neutral-500 dark:bg-neutral-550 max-w-[280px] border-transparent p-2 text-sm text-neutral-350"
       data-align="end"
       data-side="bottom"
       data-state="open"
diff --git a/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap b/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
index 631d732c62e..4237f02981f 100644
--- a/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`DropdownVariable should render dropdown content when clicked 1`] = `
 <div
   aria-labelledby="radix-:rf:"
   aria-orientation="vertical"
-  class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border-solid dark:border-neutral-500 dark:bg-neutral-550 flex max-h-60 w-[248px] min-w-[248px] flex-col p-2"
+  class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border dark:border-neutral-500 dark:bg-neutral-550 flex max-h-60 w-[248px] min-w-[248px] flex-col p-2"
   data-align="center"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -39,7 +39,7 @@ exports[`DropdownVariable should render dropdown content when clicked 1`] = `
     class="overflow-y-auto"
   >
     <div
-      class="text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
+      class="text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
       data-orientation="vertical"
       data-radix-collection-item=""
       role="menuitem"
diff --git a/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap b/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
index 639639dbc52..7557efd2cff 100644
--- a/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`FieldVariableSuggestion should render dropdown content when clicked 1`]
 <div
   aria-labelledby="radix-:rf:"
   aria-orientation="vertical"
-  class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border-solid dark:border-neutral-500 dark:bg-neutral-550 flex max-h-60 w-[248px] min-w-[248px] flex-col p-2"
+  class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border dark:border-neutral-500 dark:bg-neutral-550 flex max-h-60 w-[248px] min-w-[248px] flex-col p-2"
   data-align="center"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -39,7 +39,7 @@ exports[`FieldVariableSuggestion should render dropdown content when clicked 1`]
     class="overflow-y-auto"
   >
     <div
-      class="text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 dark:border-solid dark:border-neutral-500 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
+      class="text-sm font-medium rounded-sm outline-none data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 dark:text-neutral-100 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
       data-orientation="vertical"
       data-radix-collection-item=""
       role="menuitem"
diff --git a/libs/pages/application/src/lib/ui/page-general/page-general.tsx b/libs/pages/application/src/lib/ui/page-general/page-general.tsx
index f28409abd85..dd0abd3d2f5 100644
--- a/libs/pages/application/src/lib/ui/page-general/page-general.tsx
+++ b/libs/pages/application/src/lib/ui/page-general/page-general.tsx
@@ -17,7 +17,7 @@ export function PageGeneral({ serviceId, environmentId, isCronJob, isLifecycleJo
         <PodsMetrics environmentId={environmentId} serviceId={serviceId}>
           {isCronJob && (
             <div className="grid grid-cols-[min-content_1fr] gap-x-3 gap-y-1 rounded border border-neutral-250 bg-neutral-100 p-3 text-xs text-neutral-350">
-              <Icon className="row-span-2" iconName="circle-info" />
+              <Icon className="row-span-2" iconName="circle-info" iconStyle="regular" />
               <p>
                 The number of past Completed or Failed job execution retained in the history and their TTL can be
                 customized in the advanced settings.
diff --git a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap
index 000be7a657b..d0f79664c09 100644
--- a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap
+++ b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/button-popover-subnets/__snapshots__/button-popover-subnets.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`ButtonPopoverSubnets should match snapshot 1`] = `
     style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: -20px; --radix-popper-available-height: -18px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
   >
     <div
-      class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border-solid dark:border-neutral-500 dark:bg-neutral-550 relative divide-y p-0 text-sm text-neutral-350 data-[state=open]:block data-[state=closed]:hidden"
+      class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border dark:border-neutral-500 dark:bg-neutral-550 relative divide-y p-0 text-sm text-neutral-350 data-[state=open]:block data-[state=closed]:hidden"
       data-align="start"
       data-side="bottom"
       data-state="open"
@@ -195,7 +195,7 @@ exports[`ButtonPopoverSubnets should match snapshot with invalid state 1`] = `
     style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: -20px; --radix-popper-available-height: -18px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
   >
     <div
-      class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border-solid dark:border-neutral-500 dark:bg-neutral-550 relative divide-y p-0 text-sm text-neutral-350 data-[state=open]:block data-[state=closed]:hidden"
+      class="rounded bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border dark:border-neutral-500 dark:bg-neutral-550 relative divide-y p-0 text-sm text-neutral-350 data-[state=open]:block data-[state=closed]:hidden"
       data-align="start"
       data-side="bottom"
       data-state="open"
diff --git a/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx b/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx
index 19738aa6d0e..11422ef5ef1 100644
--- a/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx
+++ b/libs/pages/layout/src/lib/ui/breadcrumb-item/breadcrumb-item.tsx
@@ -23,7 +23,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps) {
     <div className="flex items-center justify-center">
       <div className="flex flex-col">
         {label && <span className="ml-2 text-xs font-medium text-neutral-350 dark:text-neutral-300">{label}</span>}
-        <div className="flex items-center gap-1">
+        <div className="flex items-center">
           <BreadcrumbItemValue link={link} active={isLast} name={currentName ?? ''} logo={logo} />
           {menuItems.length > 0 && (
             <Menu
diff --git a/libs/pages/layout/src/lib/ui/breadcrumb/breadcrumb.tsx b/libs/pages/layout/src/lib/ui/breadcrumb/breadcrumb.tsx
index f1fb8a0bf3d..c40b368ba43 100644
--- a/libs/pages/layout/src/lib/ui/breadcrumb/breadcrumb.tsx
+++ b/libs/pages/layout/src/lib/ui/breadcrumb/breadcrumb.tsx
@@ -3,7 +3,8 @@ import { type Cluster, type Environment, type Organization, type Project } from
 import { memo, useCallback, useEffect, useState } from 'react'
 import { useLocation, useMatch, useNavigate, useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
-import { EnvironmentMode } from '@qovery/domains/environments/feature'
+import { EnvironmentMode, useDeploymentStages } from '@qovery/domains/environments/feature'
+import { BreadcrumbDeploymentHistory, BreadcrumbDeploymentLogs } from '@qovery/domains/service-logs/feature'
 import { ServiceStateChip, useServices } from '@qovery/domains/services/feature'
 import { IconEnum } from '@qovery/shared/enums'
 import {
@@ -14,12 +15,17 @@ import {
   CLUSTER_URL,
   DATABASE_GENERAL_URL,
   DATABASE_URL,
+  DEPLOYMENT_LOGS_URL,
+  DEPLOYMENT_LOGS_VERSION_URL,
   ENVIRONMENTS_GENERAL_URL,
   ENVIRONMENTS_URL,
   ENVIRONMENT_LOGS_URL,
+  ENVIRONMENT_PRE_CHECK_LOGS_URL,
+  ENVIRONMENT_STAGES_URL,
   INFRA_LOGS_URL,
   SERVICES_GENERAL_URL,
   SERVICES_URL,
+  SERVICE_LOGS_URL,
   SETTINGS_URL,
 } from '@qovery/shared/routes'
 import { Button, Icon, type MenuData, type MenuItemProps, Tooltip } from '@qovery/shared/ui'
@@ -37,26 +43,43 @@ export function Breadcrumb(props: BreadcrumbProps) {
   const { organizations, clusters, projects, environments, createProjectModal } = props
   const { organizationId, projectId, environmentId, applicationId, databaseId, clusterId } = useParams()
 
+  const { data: statusStages = [], isFetched: isFetchedStatusStages } = useDeploymentStages({ environmentId })
+  const { data: services = [] } = useServices({ environmentId })
+
   const matchAuditLogs = useMatch({ path: AUDIT_LOGS_URL(), end: false })
   const matchSettings = useMatch({ path: SETTINGS_URL(), end: false })
   const matchClusters = useMatch({ path: CLUSTERS_URL(), end: false })
+  const matchEnvironmentLogs = useMatch({ path: ENVIRONMENT_LOGS_URL(), end: false })
+  const matchServiceLogs = useMatch({ path: ENVIRONMENT_LOGS_URL() + SERVICE_LOGS_URL(), end: false })
+  const matchDeploymentLogs = useMatch({ path: ENVIRONMENT_LOGS_URL() + DEPLOYMENT_LOGS_URL(), end: false })
+  const matchEnvironmentStage = useMatch({
+    path: ENVIRONMENT_LOGS_URL() + ENVIRONMENT_STAGES_URL(),
+    end: false,
+  })
+  const matchEnvironmentStageVersion = useMatch({
+    path: ENVIRONMENT_LOGS_URL() + ENVIRONMENT_STAGES_URL(':versionId'),
+    end: false,
+  })
+  const matchEnvironmentPreCheck = useMatch({
+    path: ENVIRONMENT_LOGS_URL() + ENVIRONMENT_PRE_CHECK_LOGS_URL(),
+    end: false,
+  })
+  const matchEnvironmentPreCheckVersion = useMatch({
+    path: ENVIRONMENT_LOGS_URL() + ENVIRONMENT_PRE_CHECK_LOGS_URL(':versionId'),
+    end: false,
+  })
+  const matchDeploymentLogsVersion = useMatch({
+    path: ENVIRONMENT_LOGS_URL() + DEPLOYMENT_LOGS_VERSION_URL(),
+    end: false,
+  })
+
   const location = useLocation()
   const navigate = useNavigate()
   const currentOrganization = organizations?.find((organization) => organizationId === organization.id)
 
-  const locationIsApplicationLogs = location.pathname.includes(
-    ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId)
-  )
-  const locationIsDeploymentLogs = location.pathname.includes(
-    ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId)
-  )
-
   const locationIsClusterLogs = location.pathname.includes(INFRA_LOGS_URL(organizationId, clusterId))
 
-  const matchLogsRoute =
-    location.pathname.includes(INFRA_LOGS_URL(organizationId, clusterId)) ||
-    locationIsApplicationLogs ||
-    locationIsDeploymentLogs
+  const matchLogsRoute = location.pathname.includes(INFRA_LOGS_URL(organizationId, clusterId)) || matchEnvironmentLogs
 
   const clustersMenu: MenuData = [
     {
@@ -135,8 +158,6 @@ export function Breadcrumb(props: BreadcrumbProps) {
     },
   ]
 
-  const { data: services = [] } = useServices({ environmentId })
-
   const applicationMenu: MenuData = [
     {
       title: 'Services',
@@ -153,7 +174,7 @@ export function Breadcrumb(props: BreadcrumbProps) {
         contentLeft: (
           <div className="flex items-center">
             <ServiceStateChip mode="deployment" environmentId={service.environment?.id} serviceId={service.id} />
-            <div className="ml-3 mt-[1px]">
+            <div className="ml-3">
               <Icon
                 name={match(service)
                   .with({ serviceType: 'HELM' }, () => IconEnum.HELM)
@@ -172,6 +193,38 @@ export function Breadcrumb(props: BreadcrumbProps) {
     },
   ]
 
+  const servicesLogsMenu: MenuData = [
+    {
+      title: 'Service logs',
+      search: true,
+      sortAlphabetically: true,
+      items: services.map((service) => ({
+        name: service.name,
+        link: {
+          url: ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + SERVICE_LOGS_URL(service.id),
+        },
+        contentLeft: (
+          <div className="flex items-center">
+            <ServiceStateChip mode="running" environmentId={service.environment?.id} serviceId={service.id} />
+            <div className="ml-3">
+              <Icon
+                name={match(service)
+                  .with({ serviceType: 'HELM' }, () => IconEnum.HELM)
+                  .with({ serviceType: 'DATABASE' }, () => IconEnum.DATABASE)
+                  .with({ serviceType: 'JOB' }, (s) =>
+                    s.job_type === 'LIFECYCLE' ? IconEnum.LIFECYCLE_JOB : IconEnum.CRON_JOB
+                  )
+                  .otherwise(() => IconEnum.APPLICATION)}
+                width="16"
+              />
+            </div>
+          </div>
+        ),
+        isActive: matchServiceLogs?.params['serviceId'] === service.id,
+      })) as MenuItemProps[],
+    },
+  ]
+
   const squareContent = (text: string | undefined, margin = 'mr-2 mt-0.5') => (
     <div
       className={`h-4.5 flex w-4 items-center justify-center rounded-sm bg-neutral-200 text-center text-xs font-bold uppercase text-neutral-350 ${margin}`}
@@ -252,12 +305,12 @@ export function Breadcrumb(props: BreadcrumbProps) {
         )}
         {environmentId && (
           <>
-            <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300">/</div>
+            <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300 dark:text-neutral-500">/</div>
             <div className="flex items-center">
               {environmentId && (
                 <>
                   <BreadcrumbItem
-                    isLast={!(applicationId || databaseId)}
+                    isLast={!(applicationId || databaseId || matchEnvironmentLogs)}
                     label="Environment"
                     data={environments}
                     menuItems={environmentMenu}
@@ -266,7 +319,7 @@ export function Breadcrumb(props: BreadcrumbProps) {
                   />
                   {(applicationId || databaseId) && (
                     <>
-                      <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300">/</div>
+                      <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300 dark:text-neutral-500">/</div>
                       <div className="flex items-center">
                         <BreadcrumbItem
                           isLast={true}
@@ -290,13 +343,6 @@ export function Breadcrumb(props: BreadcrumbProps) {
             </div>
           </>
         )}
-        {matchLogsRoute && (
-          <div className="flex">
-            <div className="ml-3 mt-2 flex h-6 items-center rounded-[3px] bg-purple-800 px-1.5 text-ssm font-medium text-purple-300">
-              LOGS
-            </div>
-          </div>
-        )}
         {matchAuditLogs && (
           <BreadcrumbItem
             label={organizations.find(({ id }) => id === organizationId)?.name}
@@ -327,8 +373,70 @@ export function Breadcrumb(props: BreadcrumbProps) {
             link=""
           />
         )}
+        {(matchDeploymentLogsVersion || matchDeploymentLogs) &&
+          statusStages &&
+          isFetchedStatusStages &&
+          services.length > 0 && (
+            <>
+              <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300 dark:text-neutral-500">/</div>
+              <div className="flex items-center">
+                <BreadcrumbDeploymentLogs
+                  serviceId={
+                    matchDeploymentLogsVersion?.params['serviceId'] || matchDeploymentLogs?.params['serviceId'] || ''
+                  }
+                  versionId={
+                    matchDeploymentLogsVersion?.params['versionId'] || matchDeploymentLogs?.params['versionId'] || ''
+                  }
+                  services={services}
+                  statusStages={statusStages}
+                />
+              </div>
+              <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300 dark:text-neutral-500">/</div>
+              <BreadcrumbDeploymentHistory
+                type="DEPLOYMENT"
+                serviceId={
+                  matchDeploymentLogsVersion?.params['serviceId'] || matchDeploymentLogs?.params['serviceId'] || ''
+                }
+                versionId={matchDeploymentLogsVersion?.params['versionId']}
+              />
+            </>
+          )}
+        {(matchEnvironmentStage ||
+          matchEnvironmentStageVersion ||
+          matchEnvironmentPreCheck ||
+          matchEnvironmentPreCheckVersion) &&
+          statusStages && (
+            <>
+              <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300 dark:text-neutral-500">/</div>
+              <BreadcrumbDeploymentHistory
+                type={matchEnvironmentPreCheck ? 'PRE_CHECK' : 'STAGES'}
+                versionId={
+                  matchEnvironmentStageVersion?.params['versionId'] ||
+                  matchEnvironmentPreCheckVersion?.params['versionId']
+                }
+              />
+            </>
+          )}
+        {matchServiceLogs && services && (
+          <>
+            <div className="mx-3 mt-3 h-auto w-4 text-center text-neutral-300 dark:text-neutral-500">/</div>
+            <div className="flex items-center">
+              <BreadcrumbItem
+                isLast
+                label="Service logs"
+                data={services}
+                menuItems={servicesLogsMenu}
+                paramId={matchServiceLogs?.params['serviceId'] ?? ''}
+                link={
+                  ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
+                  SERVICE_LOGS_URL(matchServiceLogs?.params['serviceId'])
+                }
+              />
+            </div>
+          </>
+        )}
       </div>
-      {(locationIsApplicationLogs || locationIsDeploymentLogs || locationIsClusterLogs) && (
+      {(matchEnvironmentLogs || locationIsClusterLogs) && (
         <div className="ml-auto">
           <Button
             className="gap-2"
diff --git a/libs/pages/layout/src/lib/ui/navigation/navigation.tsx b/libs/pages/layout/src/lib/ui/navigation/navigation.tsx
index 2db8a35cbc6..4a7b3b0b1ee 100644
--- a/libs/pages/layout/src/lib/ui/navigation/navigation.tsx
+++ b/libs/pages/layout/src/lib/ui/navigation/navigation.tsx
@@ -34,7 +34,7 @@ export function Navigation({ defaultOrganizationId, clusterNotification }: Navig
     pathname.includes(CLUSTER_URL(organizationId, clusterId))
 
   return (
-    <div className="flex h-screen w-16 flex-col bg-white dark:bg-neutral-650">
+    <div className="flex h-screen w-16 flex-col bg-white dark:bg-neutral-600">
       <RouterLink
         to={matchLogInfraRoute ? INFRA_LOGS_URL(organizationId, clusterId) : ORGANIZATION_URL(organizationId)}
         className="z-10 flex h-16 w-16 items-center justify-center border-b border-neutral-200 dark:border-neutral-500"
diff --git a/libs/pages/layout/src/lib/ui/top-bar/top-bar.tsx b/libs/pages/layout/src/lib/ui/top-bar/top-bar.tsx
index d894b1f7f79..e6493ea0b01 100644
--- a/libs/pages/layout/src/lib/ui/top-bar/top-bar.tsx
+++ b/libs/pages/layout/src/lib/ui/top-bar/top-bar.tsx
@@ -3,7 +3,7 @@ import { BreadcrumbFeature } from '../../feature/breadcrumb/breadcrumb'
 
 export function TopBar({ children }: { children?: ReactNode }) {
   return (
-    <div className="sticky left-16 top-0 h-navbar-height w-full border-b border-l border-neutral-200 bg-white dark:border-neutral-500 dark:bg-neutral-650">
+    <div className="sticky left-16 top-0 h-navbar-height w-full border-b border-l border-neutral-200 bg-white dark:border-neutral-500 dark:bg-neutral-600">
       <div className="flex h-full items-center justify-between px-5">
         <BreadcrumbFeature />
         {children}
diff --git a/libs/pages/logs/environment/src/lib/feature/deployment-logs-feature/deployment-logs-feature.tsx b/libs/pages/logs/environment/src/lib/feature/deployment-logs-feature/deployment-logs-feature.tsx
index 6fd56640842..bb2d21178a5 100644
--- a/libs/pages/logs/environment/src/lib/feature/deployment-logs-feature/deployment-logs-feature.tsx
+++ b/libs/pages/logs/environment/src/lib/feature/deployment-logs-feature/deployment-logs-feature.tsx
@@ -1,16 +1,20 @@
-import { type DeploymentStageWithServicesStatuses, type Environment, type Status } from 'qovery-typescript-axios'
+import {
+  type DeploymentStageWithServicesStatuses,
+  type Environment,
+  type EnvironmentStatus,
+  type Stage,
+  type Status,
+} from 'qovery-typescript-axios'
 import { useParams } from 'react-router-dom'
-import { match } from 'ts-pattern'
 import { useDeploymentHistory } from '@qovery/domains/environments/feature'
 import { ListDeploymentLogs } from '@qovery/domains/service-logs/feature'
 import { useService } from '@qovery/domains/services/feature'
-import { DEPLOYMENT_LOGS_URL, ENVIRONMENT_LOGS_URL, SERVICE_LOGS_URL } from '@qovery/shared/routes'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
-import { LinkLogs } from '../pod-logs-feature/pod-logs-feature'
 
 export interface DeploymentLogsFeatureProps {
   environment: Environment
-  statusStages?: DeploymentStageWithServicesStatuses[]
+  deploymentStages?: DeploymentStageWithServicesStatuses[]
+  environmentStatus?: EnvironmentStatus
 }
 
 export function getServiceStatusesById(services?: DeploymentStageWithServicesStatuses[], serviceId = '') {
@@ -59,45 +63,63 @@ export function getServiceStatusesById(services?: DeploymentStageWithServicesSta
   return null
 }
 
-export function DeploymentLogsFeature({ environment, statusStages }: DeploymentLogsFeatureProps) {
-  const { organizationId = '', projectId = '', serviceId = '' } = useParams()
+export function getStageFromServiceId(
+  deploymentStages: DeploymentStageWithServicesStatuses[],
+  serviceId: string
+): Stage | undefined {
+  for (const deploymentStage of deploymentStages) {
+    const serviceTypes: (keyof DeploymentStageWithServicesStatuses)[] = [
+      'applications',
+      'containers',
+      'jobs',
+      'databases',
+      'helms',
+    ]
+
+    for (const serviceType of serviceTypes) {
+      const services = deploymentStage[serviceType]
+      if (Array.isArray(services) && services.some((service) => service.id === serviceId)) {
+        return deploymentStage.stage
+      }
+    }
+  }
+
+  return undefined
+}
+
+export function DeploymentLogsFeature({
+  environment,
+  environmentStatus,
+  deploymentStages,
+}: DeploymentLogsFeatureProps) {
+  const { serviceId = '' } = useParams()
 
   const { data: service, isFetched: isFetchedService } = useService({ environmentId: environment.id, serviceId })
   const { data: deploymentHistoryEnvironment = [] } = useDeploymentHistory({ environmentId: environment.id })
 
   useDocumentTitle(`Deployment logs - ${service?.name ?? 'Loading...'}`)
 
-  const serviceStatus = getServiceStatusesById(statusStages, serviceId) as Status
+  const serviceStatus = getServiceStatusesById(deploymentStages, serviceId) as Status
 
   if (!serviceStatus && isFetchedService)
     return (
-      <div className="flex h-full w-full items-center overflow-y-auto bg-neutral-900 px-1 pt-1">
-        <div className="h-full w-full border border-neutral-500 bg-neutral-650"></div>
+      <div className="flex h-full w-full items-center overflow-y-auto bg-neutral-800 px-1 pt-1">
+        <div className="h-full w-full border border-neutral-500 bg-neutral-600"></div>
       </div>
     )
 
+  const stageFromServiceId = getStageFromServiceId(deploymentStages ?? [], serviceId)
+
   if (!serviceStatus) return null
 
   return (
-    <div className="w-full">
-      <div className="flex w-full items-center overflow-y-auto bg-neutral-900 px-1 pt-1">
-        <LinkLogs
-          title="Deployment logs"
-          url={ENVIRONMENT_LOGS_URL(organizationId, projectId, environment.id) + DEPLOYMENT_LOGS_URL(serviceId)}
-          statusChip={false}
-        />
-        <LinkLogs
-          title="Service logs"
-          url={ENVIRONMENT_LOGS_URL(organizationId, projectId, environment.id) + SERVICE_LOGS_URL(serviceId)}
-          statusChip={match(service)
-            .with({ serviceType: 'DATABASE' }, (db) => db.mode === 'CONTAINER')
-            .otherwise(() => true)}
-        />
-      </div>
+    <div className="h-full w-full bg-neutral-900">
       <ListDeploymentLogs
         environment={environment}
         deploymentHistoryEnvironment={deploymentHistoryEnvironment}
         serviceStatus={serviceStatus}
+        environmentStatus={environmentStatus}
+        stage={stageFromServiceId}
       />
     </div>
   )
diff --git a/libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.spec.tsx b/libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.spec.tsx
new file mode 100644
index 00000000000..7a258f81169
--- /dev/null
+++ b/libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.spec.tsx
@@ -0,0 +1,121 @@
+import { type DeploymentStageWithServicesStatuses } from 'qovery-typescript-axios'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import {
+  EnvironmentStagesFeature,
+  type EnvironmentStagesFeatureProps,
+  matchServicesWithStatuses,
+} from './environment-stages-feature'
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ versionId: 'version-1' }),
+}))
+
+jest.mock('@qovery/domains/services/feature', () => ({
+  ...jest.requireActual('@qovery/domains/services/feature'),
+  useServices: () => ({
+    data: [
+      { id: 'app-1', name: 'App 1', serviceType: 'APPLICATION' },
+      { id: 'app-2', name: 'App 2', serviceType: 'APPLICATION' },
+    ],
+  }),
+}))
+
+describe('EnvironmentStagesFeature', () => {
+  const defaultProps: EnvironmentStagesFeatureProps = {
+    environment: {
+      id: 'env-1',
+      name: 'Test Environment',
+      organization: { id: 'org-1' },
+      project: { id: 'proj-1' },
+      cloud_provider: {
+        provider: 'AWS',
+      },
+    },
+    environmentStatus: {
+      state: 'RUNNING',
+      total_duration_sec: 120,
+    },
+    deploymentStages: [
+      {
+        stage: {
+          id: 'stage-1',
+          name: 'Stage 1',
+          status: 'ONGOING',
+          steps: { total_duration_sec: 120 },
+        },
+        applications: [
+          {
+            id: 'app-1',
+            name: 'App 1',
+            state: 'BUILDING',
+            is_part_last_deployment: true,
+            steps: { total_duration_sec: 60 },
+          },
+          {
+            id: 'app-2',
+            name: 'App 2',
+            state: 'STOPPED',
+            is_part_last_deployment: false,
+            steps: { total_duration_sec: 30 },
+          },
+        ],
+      },
+    ],
+    preCheckStage: {
+      status: 'SUCCESS',
+      total_duration_sec: 30,
+    },
+  }
+
+  it('renders loading spinner when environmentStatus is undefined', () => {
+    renderWithProviders(<EnvironmentStagesFeature {...defaultProps} environmentStatus={undefined} />)
+    expect(screen.getByTestId('spinner')).toBeInTheDocument()
+  })
+
+  it('renders stages and services', () => {
+    renderWithProviders(<EnvironmentStagesFeature {...defaultProps} />)
+    expect(screen.getByText('Stage 1')).toBeInTheDocument()
+    expect(screen.getByText('App 1')).toBeInTheDocument()
+  })
+
+  it('renders service duration', () => {
+    renderWithProviders(<EnvironmentStagesFeature {...defaultProps} />)
+    expect(screen.getByText('1m 0s')).toBeInTheDocument()
+  })
+
+  it('does not render skipped services when hideSkipped is true', async () => {
+    const { userEvent } = renderWithProviders(<EnvironmentStagesFeature {...defaultProps} />)
+
+    await userEvent.click(screen.getByLabelText('Hide skipped'))
+
+    expect(screen.getByText('App 1')).toBeInTheDocument()
+    expect(screen.queryByText('App 2')).not.toBeInTheDocument()
+  })
+
+  it('should correctly map services and stages', () => {
+    const input = [
+      {
+        stage: { id: 'stage1', name: 'Stage 1' },
+        applications: [{ id: 'app1', name: 'App 1', state: 'RUNNING' }],
+        databases: [{ id: 'db1', name: 'DB 1', state: 'STOPPED' }],
+        containers: [],
+        jobs: [],
+        helms: [],
+      },
+    ]
+
+    const expectedOutput = [
+      {
+        stage: { id: 'stage1', name: 'Stage 1' },
+        services: [
+          { id: 'app1', name: 'App 1', state: 'RUNNING', status: 'RUNNING' },
+          { id: 'db1', name: 'DB 1', state: 'STOPPED', status: 'STOPPED' },
+        ],
+      },
+    ]
+
+    const result = matchServicesWithStatuses(input as DeploymentStageWithServicesStatuses[])
+    expect(result).toEqual(expectedOutput)
+  })
+})
diff --git a/libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.tsx b/libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.tsx
new file mode 100644
index 00000000000..bffd4dd86b0
--- /dev/null
+++ b/libs/pages/logs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.tsx
@@ -0,0 +1,195 @@
+import { type CheckedState } from '@radix-ui/react-checkbox'
+import clsx from 'clsx'
+import {
+  type DeploymentStageWithServicesStatuses,
+  type Environment,
+  type EnvironmentStatus,
+  type EnvironmentStatusesWithStagesPreCheckStage,
+} from 'qovery-typescript-axios'
+import { useState } from 'react'
+import { NavLink, useParams } from 'react-router-dom'
+import { Fragment } from 'react/jsx-runtime'
+import { match } from 'ts-pattern'
+import { EnvironmentStages } from '@qovery/domains/environment-logs/feature'
+import { type AnyService } from '@qovery/domains/services/data-access'
+import { ServiceAvatar, useServices } from '@qovery/domains/services/feature'
+import { DEPLOYMENT_LOGS_URL, DEPLOYMENT_LOGS_VERSION_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
+import { Icon, LoaderSpinner, StageStatusChip, StatusChip, Tooltip, Truncate } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+
+export interface EnvironmentStagesFeatureProps {
+  environment: Environment
+  deploymentStages?: DeploymentStageWithServicesStatuses[]
+  environmentStatus?: EnvironmentStatus
+  preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage
+}
+
+export function matchServicesWithStatuses(deploymentStages?: DeploymentStageWithServicesStatuses[]) {
+  if (!deploymentStages) return []
+
+  return deploymentStages.map((deploymentStage) => {
+    const serviceTypes = ['applications', 'databases', 'containers', 'jobs', 'helms'] as const
+
+    const services = serviceTypes
+      .map((serviceType) => deploymentStage[serviceType])
+      .flat()
+      .map((service) => ({ ...service, status: service?.state }))
+
+    return { services, stage: deploymentStage.stage }
+  })
+}
+
+export function EnvironmentStagesFeature({
+  environment,
+  environmentStatus,
+  deploymentStages,
+  preCheckStage,
+}: EnvironmentStagesFeatureProps) {
+  useDocumentTitle(`Environment stages ${environment ? `- ${environment?.name}` : '- Loading...'}`)
+
+  const { versionId } = useParams()
+  const { data: services = [] } = useServices({ environmentId: environment.id })
+
+  const [hideSkipped, setHideSkipped] = useState<CheckedState>(false)
+
+  const getServiceById = (id: string) => services.find((service) => service.id === id) as AnyService
+
+  if (!environmentStatus) {
+    return (
+      <div className="h-[calc(100vh-64px)] w-[calc(100vw-64px)] p-1">
+        <div className="flex h-full w-full justify-center border border-neutral-500 bg-neutral-600 pt-11">
+          <LoaderSpinner className="h-6 w-6" theme="dark" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="h-full w-full bg-neutral-800">
+      <EnvironmentStages
+        environment={environment}
+        environmentStatus={environmentStatus}
+        deploymentStages={deploymentStages}
+        preCheckStage={preCheckStage}
+        hideSkipped={hideSkipped}
+        setHideSkipped={setHideSkipped}
+      >
+        <>
+          {matchServicesWithStatuses(deploymentStages)?.map((s) => {
+            const stageTotalDurationSec = s.stage?.steps?.total_duration_sec ?? 0
+            const stageName = s?.stage?.name || ''
+
+            if (hideSkipped && s?.stage?.status === 'SKIPPED') return null
+
+            return (
+              <Fragment key={s.stage?.id}>
+                <div
+                  className={clsx(
+                    'h-fit w-60 min-w-60 overflow-hidden rounded border border-neutral-500 bg-neutral-650',
+                    {
+                      'text-neutral-50': s?.stage?.status !== 'SKIPPED',
+                      'text-neutral-300': s?.stage?.status === 'SKIPPED',
+                    }
+                  )}
+                >
+                  <div className="flex h-[58px] items-center gap-3.5 border-b border-neutral-500 px-3 py-2.5">
+                    <StageStatusChip status={s.stage?.status} />
+                    <div className="flex flex-col gap-0.5">
+                      <span className="flex gap-1.5 text-sm font-medium">
+                        <Truncate text={upperCaseFirstLetter(stageName) || ''} truncateLimit={20} />
+                        {s?.stage?.description && (
+                          <Tooltip content={s?.stage?.description}>
+                            <span className="text-neutral-250">
+                              <Icon iconName="info-circle" iconStyle="regular" />
+                            </span>
+                          </Tooltip>
+                        )}
+                      </span>
+                      {match(s.stage?.status)
+                        .with('CANCELED', 'DONE', 'ERROR', () => (
+                          <span className="text-xs">
+                            {Math.floor(stageTotalDurationSec / 60)}m {stageTotalDurationSec % 60}s
+                          </span>
+                        ))
+                        .otherwise(() => null)}
+                    </div>
+                  </div>
+                  <div className="flex max-h-[75vh] flex-col gap-1.5 overflow-x-hidden overflow-y-scroll bg-neutral-800 p-1.5">
+                    {s.services.length > 0 ? (
+                      s.services.map((service) => {
+                        const fullService = getServiceById(service.id!)
+                        const serviceTotalDurationSec = service?.steps?.total_duration_sec
+
+                        if (hideSkipped && !service.is_part_last_deployment) return null
+                        if (!fullService) return null
+
+                        return (
+                          <NavLink
+                            key={service?.id}
+                            to={
+                              versionId
+                                ? ENVIRONMENT_LOGS_URL(
+                                    environment.organization.id,
+                                    environment.project.id,
+                                    environment.id
+                                  ) + DEPLOYMENT_LOGS_VERSION_URL(service.id, versionId)
+                                : ENVIRONMENT_LOGS_URL(
+                                    environment.organization.id,
+                                    environment.project.id,
+                                    environment.id
+                                  ) + DEPLOYMENT_LOGS_URL(service.id)
+                            }
+                            className={clsx(
+                              'flex w-full items-center gap-2.5 rounded border border-neutral-400 bg-neutral-550 px-2.5 py-2 hover:border-brand-400',
+                              {
+                                'text-neutral-300': !service.is_part_last_deployment,
+                              }
+                            )}
+                          >
+                            <ServiceAvatar
+                              service={fullService}
+                              border="solid"
+                              size="sm"
+                              className={clsx('border-neutral-400', {
+                                'opacity-50': !service.is_part_last_deployment,
+                              })}
+                            />
+                            <span className="flex flex-col gap-0.5 text-sm">
+                              <Truncate text={fullService.name} truncateLimit={18} />
+                              {serviceTotalDurationSec && (
+                                <span className="text-xs">
+                                  {Math.floor(serviceTotalDurationSec / 60)}m {serviceTotalDurationSec % 60}s
+                                </span>
+                              )}
+                            </span>
+                            <StatusChip
+                              className="ml-auto"
+                              status={!service.is_part_last_deployment ? 'SKIPPED' : service.state}
+                            />
+                          </NavLink>
+                        )
+                      })
+                    ) : (
+                      <div className="px-3 py-6 text-center" data-testid="placeholder-stage">
+                        <Icon iconName="wave-pulse" className="text-neutral-350" />
+                        <p className="mt-1 text-xs font-medium text-neutral-350">No service for this stage.</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="mt-4 w-4 last:hidden">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9" fill="none" viewBox="0 0 17 9">
+                    <path fill="#383E50" d="M16.092 4.5L8.592.17v8.66l7.5-4.33zm-16 .75h9.25v-1.5H.092v1.5z"></path>
+                  </svg>
+                </div>
+              </Fragment>
+            )
+          })}
+        </>
+      </EnvironmentStages>
+    </div>
+  )
+}
+
+export default EnvironmentStagesFeature
diff --git a/libs/pages/logs/environment/src/lib/feature/pod-logs-feature/pod-logs-feature.tsx b/libs/pages/logs/environment/src/lib/feature/pod-logs-feature/pod-logs-feature.tsx
index 38cbdd23db0..b95c7c32cc9 100644
--- a/libs/pages/logs/environment/src/lib/feature/pod-logs-feature/pod-logs-feature.tsx
+++ b/libs/pages/logs/environment/src/lib/feature/pod-logs-feature/pod-logs-feature.tsx
@@ -1,62 +1,37 @@
-import clsx from 'clsx'
-import { Link, useLocation, useParams } from 'react-router-dom'
-import { match } from 'ts-pattern'
+import {
+  type DeploymentStageWithServicesStatuses,
+  type Environment,
+  type EnvironmentStatus,
+  type Status,
+} from 'qovery-typescript-axios'
+import { useParams } from 'react-router-dom'
 import { ListServiceLogs } from '@qovery/domains/service-logs/feature'
-import { ServiceStateChip, useService } from '@qovery/domains/services/feature'
-import { DEPLOYMENT_LOGS_URL, ENVIRONMENT_LOGS_URL, SERVICE_LOGS_URL } from '@qovery/shared/routes'
+import { useService } from '@qovery/domains/services/feature'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
+import { getServiceStatusesById } from '../deployment-logs-feature/deployment-logs-feature'
 
 export interface PodLogsFeatureProps {
-  clusterId: string
+  environment: Environment
+  deploymentStages?: DeploymentStageWithServicesStatuses[]
+  environmentStatus?: EnvironmentStatus
 }
 
-export function LinkLogs({ title, url, statusChip = true }: { title: string; url: string; statusChip?: boolean }) {
-  const { environmentId = '', serviceId = '' } = useParams()
-  const location = useLocation()
-
-  const isActive = location.pathname.includes(url)
-  return (
-    <Link
-      className={clsx(
-        'transition-timing duration-250 flex h-11 items-center rounded-t px-6 text-sm font-medium text-neutral-50 transition-colors hover:bg-neutral-700',
-        {
-          'bg-neutral-650': isActive,
-        }
-      )}
-      to={url}
-    >
-      {statusChip && (
-        <ServiceStateChip className="mr-2" mode="running" environmentId={environmentId} serviceId={serviceId} />
-      )}
-
-      <span className="truncate">{title}</span>
-    </Link>
-  )
-}
-
-export function PodLogsFeature({ clusterId }: PodLogsFeatureProps) {
-  const { organizationId = '', projectId = '', environmentId = '', serviceId = '' } = useParams()
-  const { data: service } = useService({ environmentId, serviceId })
+export function PodLogsFeature({ environment, deploymentStages, environmentStatus }: PodLogsFeatureProps) {
+  const { serviceId = '' } = useParams()
+  const { data: service } = useService({ environmentId: environment.id, serviceId })
 
   useDocumentTitle(`Service logs ${service ? `- ${service?.name}` : '- Loading...'}`)
 
+  const serviceStatus = getServiceStatusesById(deploymentStages, serviceId) as Status
+
   return (
-    <div className="w-full">
-      <div className="flex w-full items-center overflow-y-auto bg-neutral-900 px-1 pt-1">
-        <LinkLogs
-          title="Deployment logs"
-          url={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + DEPLOYMENT_LOGS_URL(serviceId)}
-          statusChip={false}
-        />
-        <LinkLogs
-          title="Service logs"
-          url={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + SERVICE_LOGS_URL(serviceId)}
-          statusChip={match(service)
-            .with({ serviceType: 'DATABASE' }, (db) => db.mode === 'CONTAINER')
-            .otherwise(() => true)}
-        />
-      </div>
-      <ListServiceLogs clusterId={clusterId} />
+    <div className="h-full w-full bg-neutral-900">
+      <ListServiceLogs
+        environment={environment}
+        clusterId={environment.cluster_id}
+        serviceStatus={serviceStatus}
+        environmentStatus={environmentStatus}
+      />
     </div>
   )
 }
diff --git a/libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.spec.tsx b/libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.spec.tsx
new file mode 100644
index 00000000000..8b6e1ba0a4e
--- /dev/null
+++ b/libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.spec.tsx
@@ -0,0 +1,22 @@
+import { Route, Routes } from 'react-router-dom'
+import { environmentFactoryMock } from '@qovery/shared/factories'
+import { renderWithProviders } from '@qovery/shared/util-tests'
+import PreCheckLogsFeature, { type PreCheckLogsFeatureProps } from './pre-check-logs-feature'
+
+describe('PreCheckLogsFeature', () => {
+  const props: PreCheckLogsFeatureProps = {
+    environment: environmentFactoryMock(1)[0],
+  }
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(
+      <Routes location="/organization/1/project/2/environment/3/logs/">
+        <Route
+          path="/organization/1/project/2/environment/3/logs/4/pre-check-logs"
+          element={<PreCheckLogsFeature {...props} />}
+        />
+      </Routes>
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})
diff --git a/libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.tsx b/libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.tsx
new file mode 100644
index 00000000000..9835ad98f64
--- /dev/null
+++ b/libs/pages/logs/environment/src/lib/feature/pre-check-logs-feature/pre-check-logs-feature.tsx
@@ -0,0 +1,20 @@
+import { type Environment, type EnvironmentStatusesWithStagesPreCheckStage } from 'qovery-typescript-axios'
+import { ListPreCheckLogs } from '@qovery/domains/environment-logs/feature'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+
+export interface PreCheckLogsFeatureProps {
+  environment: Environment
+  preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage
+}
+
+export function PreCheckLogsFeature({ environment, preCheckStage }: PreCheckLogsFeatureProps) {
+  useDocumentTitle('Environment Pre-check logs')
+
+  return (
+    <div className="h-full w-full bg-neutral-800">
+      <ListPreCheckLogs environment={environment} preCheckStage={preCheckStage} />
+    </div>
+  )
+}
+
+export default PreCheckLogsFeature
diff --git a/libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.spec.tsx b/libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.spec.tsx
deleted file mode 100644
index 51d648d8e96..00000000000
--- a/libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.spec.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { renderWithProviders } from '@qovery/shared/util-tests'
-import SidebarHistoryFeature, { type SidebarHistoryFeatureProps } from './sidebar-history-feature'
-
-describe('SidebarHistoryFeature', () => {
-  const props: SidebarHistoryFeatureProps = {
-    versionId: '1',
-    serviceId: '2',
-  }
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<SidebarHistoryFeature {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-})
diff --git a/libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.tsx b/libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.tsx
deleted file mode 100644
index 291b8774aea..00000000000
--- a/libs/pages/logs/environment/src/lib/feature/sidebar-history-feature/sidebar-history-feature.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useLocation, useParams } from 'react-router-dom'
-import { useDeploymentHistory } from '@qovery/domains/environments/feature'
-import { useDeploymentStatus } from '@qovery/domains/environments/feature'
-import { useServices } from '@qovery/domains/services/feature'
-import { ENVIRONMENT_LOGS_URL, SERVICE_LOGS_URL } from '@qovery/shared/routes'
-import SidebarHistory from '../../ui/sidebar-history/sidebar-history'
-
-export interface SidebarHistoryFeatureProps {
-  versionId?: string
-  serviceId?: string
-}
-
-export function SidebarHistoryFeature({ versionId, serviceId }: SidebarHistoryFeatureProps) {
-  const { organizationId = '', projectId = '', environmentId = '' } = useParams()
-  const { data } = useDeploymentHistory({ environmentId })
-  const { data: services } = useServices({ environmentId })
-  const { data: deploymentStatus } = useDeploymentStatus({ environmentId })
-
-  const { pathname } = useLocation()
-  const pathLogs = ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId)
-  const serviceLogsPath = pathname.includes(SERVICE_LOGS_URL(serviceId))
-
-  const defaultServiceId = serviceId || services?.[0]?.id
-
-  if (!data || !defaultServiceId || serviceLogsPath) return
-
-  return (
-    <SidebarHistory
-      data={data}
-      environmentState={deploymentStatus?.state}
-      versionId={versionId}
-      serviceId={defaultServiceId}
-      pathLogs={pathLogs}
-    />
-  )
-}
-
-export default SidebarHistoryFeature
diff --git a/libs/pages/logs/environment/src/lib/page-environment-logs.tsx b/libs/pages/logs/environment/src/lib/page-environment-logs.tsx
index b34e36cb17c..58ee1f12479 100644
--- a/libs/pages/logs/environment/src/lib/page-environment-logs.tsx
+++ b/libs/pages/logs/environment/src/lib/page-environment-logs.tsx
@@ -1,65 +1,76 @@
 import { type QueryClient } from '@tanstack/react-query'
-import { type DeploymentStageWithServicesStatuses, type EnvironmentStatus } from 'qovery-typescript-axios'
+import {
+  type DeploymentStageWithServicesStatuses,
+  type EnvironmentStatus,
+  type EnvironmentStatusesWithStagesPreCheckStage,
+} from 'qovery-typescript-axios'
 import { useCallback, useState } from 'react'
-import { Route, Routes, matchPath, useLocation, useParams } from 'react-router-dom'
+import { Navigate, Route, Routes, matchPath, useLocation, useParams } from 'react-router-dom'
 import { useEnvironment } from '@qovery/domains/environments/feature'
 import { ServiceStageIdsProvider } from '@qovery/domains/service-logs/feature'
-import { useServices } from '@qovery/domains/services/feature'
 import {
   DEPLOYMENT_LOGS_URL,
   DEPLOYMENT_LOGS_VERSION_URL,
   ENVIRONMENT_LOGS_URL,
+  ENVIRONMENT_PRE_CHECK_LOGS_URL,
+  ENVIRONMENT_STAGES_URL,
   SERVICE_LOGS_URL,
 } from '@qovery/shared/routes'
-import { Icon } from '@qovery/shared/ui'
+import { LoaderSpinner } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 import { QOVERY_WS } from '@qovery/shared/util-node-env'
 import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import DeploymentLogsFeature from './feature/deployment-logs-feature/deployment-logs-feature'
+import EnvironmentStagesFeature from './feature/environment-stages-feature/environment-stages-feature'
 import PodLogsFeature from './feature/pod-logs-feature/pod-logs-feature'
-import Sidebar from './ui/sidebar/sidebar'
+import PreCheckLogsFeature from './feature/pre-check-logs-feature/pre-check-logs-feature'
 
 export function PageEnvironmentLogs() {
   const { organizationId = '', projectId = '', environmentId = '' } = useParams()
-
+  const location = useLocation()
   const { data: environment } = useEnvironment({ environmentId })
 
   useDocumentTitle(`Environment logs ${environment ? `- ${environment?.name}` : '- Loading...'}`)
 
-  const location = useLocation()
-  const matchDeployment = matchPath<'serviceId', string>(
-    ENVIRONMENT_LOGS_URL() + DEPLOYMENT_LOGS_URL(),
+  const matchEnvironmentStageVersion = matchPath<'versionId', string>(
+    ENVIRONMENT_LOGS_URL() + ENVIRONMENT_STAGES_URL(':versionId'),
     location.pathname
   )
   const matchDeploymentVersion = matchPath<'versionId' | 'serviceId', string>(
     ENVIRONMENT_LOGS_URL() + DEPLOYMENT_LOGS_VERSION_URL(),
     location.pathname
   )
-  const matchServiceLogs = matchPath<'serviceId', string>(
-    ENVIRONMENT_LOGS_URL() + SERVICE_LOGS_URL(),
-    location.pathname
-  )
 
-  const versionId =
+  const deploymentVersionId =
     matchDeploymentVersion?.params.versionId !== ':versionId' ? matchDeploymentVersion?.params.versionId : undefined
 
-  const matchServiceId = matchDeploymentVersion || matchServiceLogs || matchDeployment
-  const serviceId = matchServiceId?.params.serviceId !== ':serviceId' ? matchServiceId?.params.serviceId : undefined
+  const stageVersionId =
+    matchEnvironmentStageVersion?.params.versionId !== ':versionId'
+      ? matchEnvironmentStageVersion?.params.versionId
+      : undefined
 
-  const { data: services } = useServices({ environmentId })
-
-  const [statusStages, setStatusStages] = useState<DeploymentStageWithServicesStatuses[]>()
+  const [deploymentStages, setDeploymentStages] = useState<DeploymentStageWithServicesStatuses[]>()
   const [environmentStatus, setEnvironmentStatus] = useState<EnvironmentStatus>()
+  const [preCheckStage, setPreCheckStage] = useState<EnvironmentStatusesWithStagesPreCheckStage>()
 
   const messageHandler = useCallback(
     (
       _: QueryClient,
-      { stages, environment }: { stages: DeploymentStageWithServicesStatuses[]; environment: EnvironmentStatus }
+      {
+        stages,
+        environment,
+        pre_check_stage,
+      }: {
+        stages: DeploymentStageWithServicesStatuses[]
+        environment: EnvironmentStatus
+        pre_check_stage: EnvironmentStatusesWithStagesPreCheckStage
+      }
     ) => {
-      setStatusStages(stages)
+      setDeploymentStages(stages)
       setEnvironmentStatus(environment)
+      setPreCheckStage(pre_check_stage)
     },
-    [setStatusStages, setEnvironmentStatus]
+    [setDeploymentStages]
   )
   useReactQueryWsSubscription({
     url: QOVERY_WS + '/deployment/status',
@@ -68,54 +79,97 @@ export function PageEnvironmentLogs() {
       cluster: environment?.cluster_id,
       project: projectId,
       environment: environmentId,
-      version: versionId,
+      version: deploymentVersionId || stageVersionId,
     },
     enabled:
       Boolean(organizationId) && Boolean(environment?.cluster_id) && Boolean(projectId) && Boolean(environmentId),
     onMessage: messageHandler,
   })
 
-  if (!environment) return
+  if (!environment)
+    return (
+      <div className="h-[calc(100vh-64px)] w-[calc(100vw-64px)] p-1">
+        <div className="flex h-full w-full justify-center border border-neutral-500 bg-neutral-600 pt-11">
+          <LoaderSpinner className="h-6 w-6" theme="dark" />
+        </div>
+      </div>
+    )
 
   return (
     <div className="flex h-full">
       <ServiceStageIdsProvider>
-        <Sidebar
-          services={services}
-          statusStages={statusStages}
-          environmentStatus={environmentStatus}
-          versionId={versionId}
-          serviceId={serviceId}
-        />
         <Routes>
+          <Route
+            path={ENVIRONMENT_STAGES_URL()}
+            element={
+              <EnvironmentStagesFeature
+                environment={environment}
+                environmentStatus={environmentStatus}
+                deploymentStages={deploymentStages}
+                preCheckStage={preCheckStage}
+              />
+            }
+          />
+          <Route
+            path={ENVIRONMENT_STAGES_URL(':versionId')}
+            element={
+              <EnvironmentStagesFeature
+                environment={environment}
+                environmentStatus={environmentStatus}
+                deploymentStages={deploymentStages}
+                preCheckStage={preCheckStage}
+              />
+            }
+          />
+          <Route
+            path={ENVIRONMENT_PRE_CHECK_LOGS_URL()}
+            element={<PreCheckLogsFeature environment={environment} preCheckStage={preCheckStage} />}
+          />
+          <Route
+            path={ENVIRONMENT_PRE_CHECK_LOGS_URL(':versionId')}
+            element={<PreCheckLogsFeature environment={environment} preCheckStage={preCheckStage} />}
+          />
           <Route
             path={DEPLOYMENT_LOGS_URL()}
-            element={<DeploymentLogsFeature environment={environment} statusStages={statusStages} />}
+            element={
+              <DeploymentLogsFeature
+                environment={environment}
+                deploymentStages={deploymentStages}
+                environmentStatus={environmentStatus}
+              />
+            }
           />
           <Route
             path={DEPLOYMENT_LOGS_VERSION_URL()}
             element={
-              <DeploymentLogsFeature key={location.pathname} environment={environment} statusStages={statusStages} />
+              <DeploymentLogsFeature
+                key={location.pathname}
+                environment={environment}
+                deploymentStages={deploymentStages}
+                environmentStatus={environmentStatus}
+              />
+            }
+          />
+          <Route
+            path={SERVICE_LOGS_URL()}
+            element={
+              <PodLogsFeature
+                environment={environment}
+                deploymentStages={deploymentStages}
+                environmentStatus={environmentStatus}
+              />
+            }
+          />
+          <Route
+            path="*"
+            element={
+              <Navigate
+                to={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + ENVIRONMENT_STAGES_URL()}
+              />
             }
           />
-          <Route path={SERVICE_LOGS_URL()} element={<PodLogsFeature clusterId={environment?.cluster_id} />} />
         </Routes>
       </ServiceStageIdsProvider>
-      {(location.pathname === `${ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId)}/` ||
-        location.pathname === ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId)) && (
-        <div className="m-1 flex min-h-full w-[calc(100%-8px)] justify-center rounded bg-neutral-650">
-          <div className="mt-12 flex flex-col items-center">
-            <Icon iconName="wrench" className="text-neutral-300" />
-            <div className="font-medium text-neutral-300">
-              Please select a service on the left menu to access its deployment logs or live logs.
-              <p>
-                You can access the deployment logs only for the services recently deployed (
-                <span className="text-brand-400">in purple</span>).
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.spec.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.spec.tsx
deleted file mode 100644
index 09645a4c6f1..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.spec.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { StateEnum } from 'qovery-typescript-axios'
-import { ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
-import { trimId } from '@qovery/shared/util-js'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import SidebarHistory, { type SidebarHistoryProps } from './sidebar-history'
-
-const currentDate = new Date().toString()
-const mockNavigate = jest.fn()
-
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useNavigate: () => mockNavigate,
-}))
-
-describe('SidebarHistory', () => {
-  const props: SidebarHistoryProps = {
-    data: [
-      {
-        id: '1',
-        created_at: currentDate,
-        applications: [
-          {
-            id: '4',
-            created_at: currentDate,
-            name: 'my-app',
-          },
-        ],
-      },
-      {
-        id: '2',
-        created_at: currentDate,
-        applications: [
-          {
-            id: '4',
-            created_at: currentDate,
-            name: 'my-app-1',
-          },
-        ],
-      },
-      {
-        id: '3',
-        created_at: currentDate,
-        applications: [
-          {
-            id: '1',
-            created_at: currentDate,
-            name: 'my-app-3',
-          },
-        ],
-      },
-    ],
-    pathLogs: ENVIRONMENT_LOGS_URL('1', '2', '3'),
-    serviceId: '4',
-    versionId: '5',
-    environmentState: StateEnum.BUILDING,
-  }
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<SidebarHistory {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should button to back logs home', async () => {
-    renderWithProviders(<SidebarHistory {...props} />)
-
-    const btn = screen.getByTestId('btn-back-logs')
-    expect(btn).toHaveAttribute('href', '/organization/1/project/2/environment/3/logs')
-  })
-
-  it('should open the menu and navigate to the logs page', async () => {
-    const { userEvent } = renderWithProviders(<SidebarHistory {...props} />)
-
-    const btn = screen.getByRole('button', { name: 'Deployment log history' })
-    await userEvent.click(btn)
-
-    const item = screen.getByText(trimId(props.data[1].id))
-    expect(item.parentElement?.parentElement?.parentElement).toHaveAttribute(
-      'href',
-      '/organization/1/project/2/environment/3/logs/4/deployment-logs/2'
-    )
-  })
-
-  it('should have latest label if the environmentState is not new', async () => {
-    props.environmentState = StateEnum.DEPLOYED
-    renderWithProviders(<SidebarHistory {...props} />)
-
-    screen.getByText('Latest')
-  })
-
-  it('should have new label if deployment is in progress', async () => {
-    props.environmentState = StateEnum.CANCELING
-    props.versionId = '3'
-    props.serviceId = '1'
-
-    renderWithProviders(<SidebarHistory {...props} />)
-    screen.getByText('New')
-  })
-
-  it('should have a button with numbers of deployment before the latest', async () => {
-    props.environmentState = StateEnum.DEPLOYED
-    props.versionId = '3'
-    props.serviceId = '1'
-    renderWithProviders(<SidebarHistory {...props} />)
-
-    screen.getByText('2')
-  })
-})
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.tsx
deleted file mode 100644
index eecc25d8c4f..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-history/sidebar-history.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { type DeploymentHistoryEnvironment, type StateEnum } from 'qovery-typescript-axios'
-import { match } from 'ts-pattern'
-import { DEPLOYMENT_LOGS_VERSION_URL } from '@qovery/shared/routes'
-import { Badge, Button, Icon, Link, Menu, MenuAlign, type MenuData, StatusChip, Tooltip } from '@qovery/shared/ui'
-import { dateFullFormat } from '@qovery/shared/util-dates'
-import { trimId } from '@qovery/shared/util-js'
-
-export interface SidebarHistoryProps {
-  data: DeploymentHistoryEnvironment[]
-  pathLogs: string
-  serviceId: string
-  versionId?: string
-  environmentState?: StateEnum
-}
-
-export function SidebarHistory({ data, serviceId, versionId, pathLogs, environmentState }: SidebarHistoryProps) {
-  const menuHistory: MenuData = [
-    {
-      items:
-        data?.map((item, index) => ({
-          name: item.id,
-          itemContentCustom: (
-            <div
-              className={`flex w-full justify-between py-2 text-xs ${
-                item.id === versionId || (!versionId && index === 0) ? 'text-brand-400' : 'text-neutral-300'
-              }`}
-            >
-              <div className="flex">
-                <StatusChip className="mr-3" status={item.status} />
-                <Tooltip content={item.id}>
-                  <p className="font-medium text-brand-300">{trimId(item.id)}</p>
-                </Tooltip>
-              </div>
-              <div>{dateFullFormat(item.created_at)}</div>
-            </div>
-          ),
-          link: {
-            url: pathLogs + DEPLOYMENT_LOGS_VERSION_URL(serviceId, item.id),
-          },
-        })) || [],
-    },
-  ]
-
-  function findPositionById(data: DeploymentHistoryEnvironment[], versionId = '') {
-    const index = data.findIndex((item) => item.id === versionId)
-    return index !== -1 ? index : 0
-  }
-
-  const showNewTag = match(environmentState)
-    .with(
-      'DEPLOYING',
-      'DELETING',
-      'RESTARTING',
-      'BUILDING',
-      'STOP_QUEUED',
-      'CANCELING',
-      'QUEUED',
-      'DELETE_QUEUED',
-      'DEPLOYMENT_QUEUED',
-      () => true
-    )
-    .otherwise(() => false)
-
-  if (data.length === 0) return null
-
-  const currentPosition = findPositionById(data, versionId)
-
-  return (
-    <div className="flex border-b border-neutral-500 px-4 py-3">
-      <div className="flex">
-        <Link
-          as="button"
-          data-testid="btn-back-logs"
-          type="button"
-          color="neutral"
-          variant="surface"
-          className="!rounded-r-none !border-r-0"
-          to={pathLogs}
-        >
-          <Icon iconName="house" />
-        </Link>
-        <Menu
-          width={300}
-          menus={menuHistory}
-          arrowAlign={MenuAlign.CENTER}
-          trigger={
-            <Button
-              className="mr-1.5 w-[200px] justify-center gap-2 !rounded-l-none"
-              type="button"
-              color="neutral"
-              variant="surface"
-            >
-              Deployment log history
-              <Icon iconName="chevron-down" />
-            </Button>
-          }
-        />
-        {currentPosition > 0 && showNewTag && (
-          <Tooltip content="New deployment available!" side="right" color="orange">
-            <div>
-              <Link
-                as="button"
-                className="w-[50px] !border-orange-500 bg-neutral-500 !text-orange-500"
-                type="button"
-                color="neutral"
-                variant="surface"
-                to={pathLogs + DEPLOYMENT_LOGS_VERSION_URL(serviceId, '')}
-              >
-                <span className="inline-flex items-center">
-                  New
-                  <i className="relative top-[1px] ml-1 block h-2 w-2 before:absolute before:left-0.5 before:top-0.5 before:block before:h-1 before:w-1 before:rounded-full before:bg-orange-500 after:block after:h-2 after:w-2 after:rounded-full after:bg-orange-500/30 after:motion-safe:animate-pulse" />
-                </span>
-              </Link>
-            </div>
-          </Tooltip>
-        )}
-        {currentPosition === 0 && <Badge className="w-[50px] justify-center">Latest</Badge>}
-        {environmentState && currentPosition > 0 && !showNewTag && (
-          <Link
-            as="button"
-            className="w-[50px] justify-center gap-1"
-            type="button"
-            color="neutral"
-            variant="surface"
-            to={pathLogs + DEPLOYMENT_LOGS_VERSION_URL(serviceId, '')}
-          >
-            {currentPosition}
-            <Icon iconName="chevrons-right" />
-          </Link>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default SidebarHistory
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.spec.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.spec.tsx
deleted file mode 100644
index 2f892243e08..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.spec.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ServiceDeploymentStatusEnum, StateEnum } from 'qovery-typescript-axios'
-import { applicationFactoryMock } from '@qovery/shared/factories'
-import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
-import SidebarPipelineItem, { type SidebarPipelineItemProps } from './sidebar-pipeline-item'
-
-const applications = applicationFactoryMock(2)
-
-describe('SidebarPipelineItem', () => {
-  const props: SidebarPipelineItemProps = {
-    serviceId: '1',
-    index: 1,
-    services: applications,
-    currentStage: {
-      stage: {
-        id: 'stage-1',
-        name: 'Stage 1',
-      },
-      applications: [
-        {
-          id: '1',
-          state: StateEnum.READY,
-          message: 'hello',
-          service_deployment_status: ServiceDeploymentStatusEnum.UP_TO_DATE,
-        },
-      ],
-      databases: [],
-      containers: [],
-      jobs: [],
-    },
-  }
-
-  it('should render successfully', () => {
-    const { baseElement, getByText } = renderWithProviders(<SidebarPipelineItem {...props} />)
-    expect(baseElement).toBeTruthy()
-    expect(getByText('Stage 1')).toBeInTheDocument()
-  })
-
-  it('should have message when no services', async () => {
-    props.services = []
-    props.currentStage = {
-      stage: {
-        id: 'stage-1',
-        name: 'Stage 1',
-      },
-      applications: [],
-      databases: [],
-      containers: [],
-      jobs: [],
-    }
-
-    const { userEvent } = renderWithProviders(<SidebarPipelineItem {...props} />)
-
-    await userEvent.click(screen.getByTestId('toggle-stage'))
-
-    waitFor(() => {
-      expect(screen.getByText('No service for this stage')).toBeInTheDocument()
-    })
-  })
-})
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.tsx
deleted file mode 100644
index 8524cd245d3..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline-item/sidebar-pipeline-item.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { type DeploymentStageWithServicesStatuses, type Status } from 'qovery-typescript-axios'
-import { useContext, useEffect, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
-import { ServiceStageIdsContext } from '@qovery/domains/service-logs/feature'
-import { type AnyService } from '@qovery/domains/services/data-access'
-import { ServiceAvatar } from '@qovery/domains/services/feature'
-import { DEPLOYMENT_LOGS_VERSION_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
-import { BadgeDeploymentOrder, Icon, StatusChip } from '@qovery/shared/ui'
-
-export function mergeServices(
-  applications?: Status[],
-  databases?: Status[],
-  containers?: Status[],
-  jobs?: Status[],
-  helms?: Status[]
-) {
-  return (
-    (applications &&
-      databases &&
-      containers &&
-      jobs &&
-      helms && [...applications, ...databases, ...containers, ...jobs, ...helms]) ||
-    []
-  )
-}
-
-export interface SidebarPipelineItemProps {
-  index: number
-  services: AnyService[]
-  currentStage: DeploymentStageWithServicesStatuses
-  serviceId?: string
-  versionId?: string
-}
-
-export function SidebarPipelineItem({ currentStage, index, serviceId, versionId, services }: SidebarPipelineItemProps) {
-  const { organizationId = '', projectId = '', environmentId = '' } = useParams()
-  const { updateStageId } = useContext(ServiceStageIdsContext)
-
-  const currentApplication = (serviceId: string) => services.find((service: AnyService) => service.id === serviceId)
-
-  const servicesStages = mergeServices(
-    currentStage.applications,
-    currentStage.databases,
-    currentStage.containers,
-    currentStage.jobs,
-    currentStage.helms
-  )
-
-  const [openStage, setOpenStage] = useState(servicesStages.length > 0)
-
-  useEffect(() => {
-    const activeStage = servicesStages.some((service: Status) => service.id === serviceId)
-    if (activeStage) {
-      currentStage.stage?.id && updateStageId(currentStage.stage.id)
-    }
-  }, [serviceId, currentStage.stage?.id, servicesStages, updateStageId])
-
-  return (
-    <div className="mb-1.5">
-      <div
-        data-testid="toggle-stage"
-        className="mb-1.5 inline-flex cursor-pointer select-none items-center text-ssm font-medium text-neutral-100"
-        onClick={() => setOpenStage(!openStage)}
-      >
-        <BadgeDeploymentOrder className="mr-3" order={index} />
-        {currentStage?.stage?.name}
-        <Icon iconName="caret-down" className={`ml-3 text-neutral-350 ${!openStage ? '-rotate-90' : ''}`} />
-      </div>
-      {openStage && (
-        <div>
-          {servicesStages.length > 0 ? (
-            servicesStages.map((service, index) => (
-              <div
-                key={index}
-                className={`relative pl-[31px] before:absolute before:left-[9px] before:top-0 before:block before:h-full before:w-[1px] before:bg-neutral-500 before:content-[''] ${
-                  serviceId === service.id ? 'before:w-[3px] before:bg-brand-500' : ''
-                }`}
-              >
-                {currentApplication(service.id) && (
-                  <Link
-                    key={service.id}
-                    to={
-                      ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) +
-                      DEPLOYMENT_LOGS_VERSION_URL(service.id, versionId ? versionId : '')
-                    }
-                    className={`flex w-full items-center justify-between rounded-[3px] px-2.5 py-1.5 text-ssm font-medium transition-all hover:text-neutral-50 ${
-                      serviceId === service.id
-                        ? 'bg-neutral-500 !text-neutral-50'
-                        : 'text-neutral-100 hover:bg-neutral-600'
-                    } ${service.is_part_last_deployment ? '!text-brand-400' : ''}`}
-                  >
-                    <div className="flex truncate">
-                      <ServiceAvatar
-                        size="xs"
-                        service={currentApplication(service.id)!}
-                        className="mr-2.5 mt-0.5"
-                        border="none"
-                      />
-                      <span className="truncate">{currentApplication(service.id)?.name}</span>
-                    </div>
-                    <StatusChip status={service.state} />
-                  </Link>
-                )}
-              </div>
-            ))
-          ) : (
-            <div className="pb-3 pt-1 text-center">
-              <Icon iconName="wave-pulse" className="text-neutral-350" />
-              <p className="mt-1 text-xs font-medium text-neutral-350">No service for this stage</p>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default SidebarPipelineItem
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.spec.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.spec.tsx
deleted file mode 100644
index 389d435a2f4..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.spec.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { applicationFactoryMock } from '@qovery/shared/factories'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import SidebarPipeline, { type SidebarPipelineProps } from './sidebar-pipeline'
-
-describe('SidebarPipeline', () => {
-  const props: SidebarPipelineProps = {
-    services: applicationFactoryMock(2),
-    serviceId: '1',
-  }
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<SidebarPipeline {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should have loader when statusStages is undefined', () => {
-    renderWithProviders(<SidebarPipeline {...props} />)
-    screen.getByTestId('spinner')
-  })
-})
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.tsx
deleted file mode 100644
index d66a645ae36..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-pipeline/sidebar-pipeline.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { type DeploymentStageWithServicesStatuses } from 'qovery-typescript-axios'
-import { type AnyService } from '@qovery/domains/services/data-access'
-import { LoaderSpinner } from '@qovery/shared/ui'
-import SidebarPipelineItem from '../sidebar-pipeline-item/sidebar-pipeline-item'
-
-export interface SidebarPipelineProps {
-  services: AnyService[]
-  serviceId?: string
-  versionId?: string
-  statusStages?: DeploymentStageWithServicesStatuses[]
-}
-
-export function SidebarPipeline({ services, versionId, serviceId, statusStages }: SidebarPipelineProps) {
-  return (
-    <div className="p-5">
-      <p className="mb-4 text-xs font-medium text-neutral-50">Pipeline</p>
-      {!statusStages ? (
-        <div className="flex justify-center">
-          <LoaderSpinner className="h-6 w-6" theme="dark" />
-        </div>
-      ) : (
-        statusStages.map((currentStage: DeploymentStageWithServicesStatuses, index: number) => (
-          <SidebarPipelineItem
-            // Using index key because we don't have generic ID for stages
-            key={index}
-            index={index}
-            versionId={versionId}
-            serviceId={serviceId}
-            currentStage={currentStage}
-            services={services}
-          />
-        ))
-      )}
-    </div>
-  )
-}
-
-export default SidebarPipeline
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.spec.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.spec.tsx
deleted file mode 100644
index f5115db7290..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.spec.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { render } from '__tests__/utils/setup-jest'
-import { applicationDeploymentsFactoryMock } from '@qovery/shared/factories'
-import SidebarStatus, { type SidebarStatusProps } from './sidebar-status'
-
-describe('SidebarStatus', () => {
-  const props: SidebarStatusProps = {
-    environmentDeploymentHistory: applicationDeploymentsFactoryMock(1)[0],
-  }
-
-  it('should render successfully', () => {
-    const { baseElement } = render(<SidebarStatus {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-})
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.tsx
deleted file mode 100644
index 47831c88744..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar-status/sidebar-status.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { type EnvironmentStatus } from 'qovery-typescript-axios'
-import { Icon, StatusChip, Tooltip } from '@qovery/shared/ui'
-import { dateFullFormat, dateUTCString } from '@qovery/shared/util-dates'
-
-export interface SidebarStatusProps {
-  environmentStatus?: EnvironmentStatus
-}
-
-export function SidebarStatus(props: SidebarStatusProps) {
-  const { environmentStatus } = props
-
-  return (
-    <div className="border-b border-neutral-500 p-5">
-      <div className="mb-2 flex items-center justify-between text-xs text-neutral-300">
-        Deployment status:
-        <StatusChip status={environmentStatus?.last_deployment_state || environmentStatus?.state} />
-      </div>
-      <div className="mb-2 flex items-center justify-between text-xs text-neutral-300">
-        Deployment Execution id:
-        <Tooltip content={environmentStatus?.last_deployment_id || ''}>
-          <span className="text-brand-400">
-            {environmentStatus?.last_deployment_id && environmentStatus?.last_deployment_id.length > 23
-              ? `${environmentStatus?.last_deployment_id?.substring(
-                  0,
-                  8
-                )}...${environmentStatus?.last_deployment_id?.slice(-8)}`
-              : environmentStatus?.last_deployment_id}
-          </span>
-        </Tooltip>
-      </div>
-      {environmentStatus?.last_deployment_date && (
-        <p className="flex items-center justify-between text-xs text-neutral-300">
-          Deployment start time:
-          <span className="text-neutral-50" title={dateUTCString(environmentStatus.last_deployment_date)}>
-            {dateFullFormat(environmentStatus.last_deployment_date)}
-          </span>
-        </p>
-      )}
-      <p className="mt-2 flex items-center justify-between text-xs text-neutral-300">
-        Parallel Deployment:
-        <span className="flex text-neutral-50">
-          7{' '}
-          <Tooltip side="right" content="Number of services deployed in parallel on each pipeline stage">
-            <span className="flex items-center">
-              <Icon className="ml-1 cursor-pointer text-xs text-neutral-300" name="icon-solid-circle-info" />
-            </span>
-          </Tooltip>
-        </span>
-      </p>
-    </div>
-  )
-}
-
-export default SidebarStatus
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.spec.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.spec.tsx
deleted file mode 100644
index 489d5128227..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.spec.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { applicationFactoryMock } from '@qovery/shared/factories'
-import { renderWithProviders, screen } from '@qovery/shared/util-tests'
-import Sidebar, { type SidebarProps } from './sidebar'
-
-describe('Sidebar', () => {
-  const props: SidebarProps = {
-    services: applicationFactoryMock(2),
-    serviceId: '1',
-    versionId: '2',
-  }
-
-  it('should render successfully', () => {
-    const { baseElement } = renderWithProviders(<Sidebar {...props} />)
-    expect(baseElement).toBeTruthy()
-  })
-
-  it('should toggles sidebar visibility when the button is clicked', async () => {
-    renderWithProviders(<Sidebar {...props} />)
-    const sidebar = screen.getByTestId('sidebar')
-    const toggleButton = screen.getByTestId('sidebar-resize-button')
-
-    toggleButton.click()
-
-    expect(toggleButton).toHaveClass('border-l')
-    expect(sidebar).toHaveClass('w-full')
-  })
-})
diff --git a/libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.tsx b/libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.tsx
deleted file mode 100644
index 82a0998b0e5..00000000000
--- a/libs/pages/logs/environment/src/lib/ui/sidebar/sidebar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
-  type DeploymentHistoryEnvironment,
-  type DeploymentStageWithServicesStatuses,
-  type EnvironmentStatus,
-  type StateEnum,
-} from 'qovery-typescript-axios'
-import { useState } from 'react'
-import { type AnyService } from '@qovery/domains/services/data-access'
-import { Icon } from '@qovery/shared/ui'
-import SidebarHistoryFeature from '../../feature/sidebar-history-feature/sidebar-history-feature'
-import SidebarPipeline from '../sidebar-pipeline/sidebar-pipeline'
-import SidebarStatus from '../sidebar-status/sidebar-status'
-
-export interface SidebarProps {
-  services: AnyService[]
-  statusStages?: DeploymentStageWithServicesStatuses[]
-  environmentStatus?: EnvironmentStatus
-  currentEnvironmentState?: StateEnum
-  environmentDeploymentHistory?: DeploymentHistoryEnvironment
-  versionId?: string
-  serviceId?: string
-}
-
-export function Sidebar({ services, statusStages, environmentStatus, versionId, serviceId }: SidebarProps) {
-  const [openSidebar, setOpenSidebar] = useState(true)
-
-  return (
-    <div
-      className={`flex h-[calc(100vh-4rem)] shrink-0 border-x border-neutral-500 bg-neutral-650 ${
-        openSidebar ? 'w-[340px]' : 'w-5'
-      }`}
-    >
-      <div data-testid="sidebar" className={`h-full w-full overflow-x-scroll ${!openSidebar ? 'hidden' : ''}`}>
-        <SidebarHistoryFeature serviceId={serviceId} versionId={versionId} />
-        <SidebarStatus environmentStatus={environmentStatus} />
-        <SidebarPipeline services={services} versionId={versionId} serviceId={serviceId} statusStages={statusStages} />
-      </div>
-      <div
-        data-testid="sidebar-resize-button"
-        onClick={() => setOpenSidebar(!openSidebar)}
-        className={`flex w-5 cursor-pointer items-center justify-center border-neutral-500 text-neutral-350 transition-all duration-150 ease-in-out hover:bg-neutral-600 ${
-          openSidebar ? 'border-l' : ''
-        } `}
-      >
-        <Icon iconName="angle-down" className={`text-sm ${openSidebar ? 'rotate-90' : '-rotate-90'}`} />
-      </div>
-    </div>
-  )
-}
-
-export default Sidebar
diff --git a/libs/pages/services/src/lib/ui/container/container.tsx b/libs/pages/services/src/lib/ui/container/container.tsx
index 9df4e883522..523a1c17a78 100644
--- a/libs/pages/services/src/lib/ui/container/container.tsx
+++ b/libs/pages/services/src/lib/ui/container/container.tsx
@@ -111,8 +111,8 @@ export function Container({ children }: PropsWithChildren) {
       link: `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_GENERAL_URL}`,
     },
     {
-      icon: <EnvironmentStateChip mode="deployment" environmentId={environmentId} />,
-      name: 'Deployments',
+      icon: <EnvironmentStateChip mode="last-deployment" environmentId={environmentId} />,
+      name: 'Deployments History',
       active:
         location.pathname === `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_DEPLOYMENTS_URL}`,
       link: `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_DEPLOYMENTS_URL}`,
diff --git a/libs/pages/services/src/lib/ui/page-settings-deployment-pipeline/page-settings-deployment-pipeline.tsx b/libs/pages/services/src/lib/ui/page-settings-deployment-pipeline/page-settings-deployment-pipeline.tsx
index b4fcc373914..1c613628ab6 100644
--- a/libs/pages/services/src/lib/ui/page-settings-deployment-pipeline/page-settings-deployment-pipeline.tsx
+++ b/libs/pages/services/src/lib/ui/page-settings-deployment-pipeline/page-settings-deployment-pipeline.tsx
@@ -141,20 +141,20 @@ export function PageSettingsDeploymentPipeline(props: PageSettingsDeploymentPipe
                         heading={
                           <div className="flex grow items-center">
                             <BadgeDeploymentOrder order={deployment_order} />
-                            <span className="block truncate text-2xs font-bold text-neutral-400">
-                              <Truncate truncateLimit={28} text={name || ''} />
+                            <span className="flex items-center gap-1.5 text-sm font-bold text-neutral-400">
+                              <Truncate truncateLimit={28} text={upperCaseFirstLetter(name) || ''} />
+                              {description && (
+                                <Tooltip content={description}>
+                                  <span>
+                                    <Icon
+                                      iconName="circle-info"
+                                      iconStyle="regular"
+                                      className="cursor-default text-xs text-neutral-350"
+                                    />
+                                  </span>
+                                </Tooltip>
+                              )}
                             </span>
-                            {description && (
-                              <Tooltip content={description}>
-                                <div>
-                                  <Icon
-                                    iconName="circle-info"
-                                    iconStyle="regular"
-                                    className="relative -top-[2px] ml-1 cursor-default text-xs text-neutral-350"
-                                  />
-                                </div>
-                              </Tooltip>
-                            )}
                             <DropdownMenu.Root>
                               <DropdownMenu.Trigger asChild>
                                 <Button data-testid="btn-more-menu" color="neutral" variant="plain" className="ml-auto">
diff --git a/libs/shared/routes/src/lib/sub-router/logs.router.ts b/libs/shared/routes/src/lib/sub-router/logs.router.ts
index 03165e9459c..9a294d0d545 100644
--- a/libs/shared/routes/src/lib/sub-router/logs.router.ts
+++ b/libs/shared/routes/src/lib/sub-router/logs.router.ts
@@ -9,6 +9,8 @@ export const ENVIRONMENT_LOGS_URL = (
   environmentId = ':environmentId'
 ) => `${SERVICES_URL(organizationId, projectId, environmentId)}/logs`
 
+export const ENVIRONMENT_STAGES_URL = (versionId?: string) => (versionId ? `/stages/${versionId}` : '/stages')
+
 export const SERVICE_LOGS_URL = (serviceId = ':serviceId', podName = '') =>
   `/${serviceId}/service-logs${podName ? `?pod_name=${podName}` : ''}`
 
@@ -16,3 +18,6 @@ export const DEPLOYMENT_LOGS_URL = (serviceId = ':serviceId') => `/${serviceId}/
 
 export const DEPLOYMENT_LOGS_VERSION_URL = (serviceId = ':serviceId', versionId = ':versionId') =>
   `/${serviceId}/deployment-logs/${versionId}`
+
+export const ENVIRONMENT_PRE_CHECK_LOGS_URL = (versionId?: string) =>
+  versionId ? `/pre-check-logs/${versionId}` : '/pre-check-logs'
diff --git a/libs/shared/ui/src/index.ts b/libs/shared/ui/src/index.ts
index d8dc899feac..e689778b379 100644
--- a/libs/shared/ui/src/index.ts
+++ b/libs/shared/ui/src/index.ts
@@ -67,6 +67,7 @@ export * from './lib/components/table/table-row-filter/table-row-filter'
 export * from './lib/components/table/table-head-filter/table-head-filter'
 export * from './lib/components/tooltip/tooltip'
 export * from './lib/components/status-chip/status-chip'
+export * from './lib/components/stage-status-chip/stage-status-chip'
 export * from './lib/components/status-label/status-label'
 export * from './lib/components/skeleton/skeleton'
 export * from './lib/components/tabs/tabs'
diff --git a/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.spec.tsx b/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.spec.tsx
index 2dc86a049b7..a5ce1fafacf 100644
--- a/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.spec.tsx
+++ b/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.spec.tsx
@@ -15,6 +15,5 @@ describe('BadgeDeploymentOrder', () => {
     const badgeSvg = screen.getByTestId('badge-svg')
     expect(badge).toBeInTheDocument()
     expect(badgeSvg).toBeInTheDocument()
-    expect(badgeSvg).toHaveAttribute('fill', '#009EDD')
   })
 })
diff --git a/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.tsx b/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.tsx
index 8fbbae2b057..c2deb992c98 100644
--- a/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.tsx
+++ b/libs/shared/ui/src/lib/components/badge-deployment-order/badge-deployment-order.tsx
@@ -1,23 +1,22 @@
+import { twMerge } from '@qovery/shared/util-js'
+
 export interface BadgeDeploymentOrderProps {
   order?: number
   className?: string
 }
 
-export function BadgeDeploymentOrder(props: BadgeDeploymentOrderProps) {
-  const { order = 0, className = '' } = props
-
+export function BadgeDeploymentOrder({ order = 0, className }: BadgeDeploymentOrderProps) {
   return (
-    <div data-testid="badge" className={`relative mr-2 flex drop-shadow-sm ${className}`}>
-      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <div data-testid="badge" className={twMerge('relative mr-2 flex drop-shadow-sm', className)}>
+      <svg data-testid="badge-svg" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
         <path
-          data-testid="badge-svg"
-          d="M0.75 7.4944V7.49434C0.749825 6.70932 0.956163 5.93795 1.34845 5.25727C1.74074 4.57661 2.30525 4.01043 2.98569 3.61534C2.98571 3.61533 2.98573 3.61532 2.98575 3.6153L7.73569 0.859176L7.73572 0.859157C8.42304 0.460203 9.20414 0.25 9.99947 0.25C10.7948 0.25 11.5759 0.460203 12.2632 0.859157L17.0132 3.6174L17.0132 3.61744C17.6933 4.01207 18.2577 4.57758 18.6501 5.25751C19.0426 5.93743 19.2494 6.70805 19.25 7.49249V12.5056V12.5057C19.2502 13.2907 19.0438 14.0621 18.6515 14.7427C18.2593 15.4234 17.6947 15.9896 17.0143 16.3847C17.0143 16.3847 17.0143 16.3847 17.0142 16.3847L12.2643 19.1408L12.2643 19.1408C11.577 19.5398 10.7959 19.75 10.0005 19.75C9.20521 19.75 8.42413 19.5398 7.73682 19.1409C7.73681 19.1409 7.73679 19.1409 7.73678 19.1408L2.98682 16.3826L2.98675 16.3826C2.30669 15.9879 1.74232 15.4224 1.34988 14.7425C0.957447 14.0626 0.750626 13.292 0.75 12.5075L0.75 12.5056V7.4944Z"
           fill="#009EDD"
-          stroke="url(#paint0_linear_12619_562346)"
-          strokeWidth="0.5"
-        />
+          stroke="#3AB0E9"
+          strokeWidth="0.667"
+          d="M1 5.996v0c0-.607.154-1.203.446-1.728A3.398 3.398 0 012.66 3.005L6.327.8h0A3.242 3.242 0 017.999.333 3.242 3.242 0 019.672.8l3.667 2.207h0c.503.302.922.737 1.214 1.261.292.525.446 1.12.447 1.726v4.01c0 .607-.154 1.203-.446 1.728-.292.525-.711.96-1.215 1.263L9.673 15.2h0A3.242 3.242 0 018 15.667c-.587 0-1.164-.161-1.672-.467L2.66 12.993h0a3.398 3.398 0 01-1.214-1.261A3.556 3.556 0 011 10.006v-4.01z"
+        ></path>
       </svg>
-      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-2xs text-neutral-50">
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-xs font-medium text-neutral-50 dark:text-neutral-700">
         {order}
       </span>
     </div>
diff --git a/libs/shared/ui/src/lib/components/board/board.tsx b/libs/shared/ui/src/lib/components/board/board.tsx
index 5ee01292d53..e9af5ec8289 100644
--- a/libs/shared/ui/src/lib/components/board/board.tsx
+++ b/libs/shared/ui/src/lib/components/board/board.tsx
@@ -194,7 +194,7 @@ const BoardColumn = <T extends Card>({
 
   return (
     <motion.div layout="position" layoutId={columnId} className="flex w-60 shrink-0 flex-col rounded">
-      <div className="flex h-11 items-center justify-between rounded-t border border-neutral-250 bg-neutral-100 px-3 py-2">
+      <div className="flex h-[58px] items-center justify-between rounded-t border border-neutral-250 bg-neutral-100 px-3 py-2">
         {heading}
       </div>
 
diff --git a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
index cfcdbf60a9e..a73fd698366 100644
--- a/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/shared/ui/src/lib/components/dropdown-menu/dropdown-menu.tsx
@@ -14,8 +14,6 @@ const dropdownMenuItemVariants = cva(
           'data-[highlighted]:text-brand-500',
           'dark:data-[highlighted]:bg-neutral-400',
           'dark:text-neutral-100',
-          'dark:border-solid',
-          'dark:border-neutral-500',
         ],
         red: ['data-[highlighted]:bg-red-50', 'data-[highlighted]:text-red-600'],
         yellow: ['data-[highlighted]:bg-neutral-150'],
@@ -137,7 +135,7 @@ const DropdownMenuContent = forwardRef<ElementRef<typeof DropdownMenuPrimitive.C
           sideOffset={sideOffset}
           align={align}
           className={twMerge(
-            'flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550',
+            'flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:border dark:border-neutral-500 dark:bg-neutral-550',
             className
           )}
           ref={ref}
diff --git a/libs/shared/ui/src/lib/components/icon/icons/services.tsx b/libs/shared/ui/src/lib/components/icon/icons/services.tsx
index 16874a2b31a..149c62b3682 100644
--- a/libs/shared/ui/src/lib/components/icon/icons/services.tsx
+++ b/libs/shared/ui/src/lib/components/icon/icons/services.tsx
@@ -1,6 +1,8 @@
-export function ServicesIcon() {
+import { type IconProps } from '../icon'
+
+export function ServicesIcon(props: IconProps) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" {...props} fill="none" viewBox="0 0 40 40">
       <g clipPath="url(#clip0_16172_275368)">
         <path
           fill="#0C0F38"
diff --git a/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx b/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx
index e2402ef2252..9393339f5cb 100644
--- a/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx
+++ b/libs/shared/ui/src/lib/components/menu/menu-group/menu-group.tsx
@@ -66,13 +66,13 @@ export function MenuGroup(props: MenuGroupProps) {
       {!isFilter && menu?.title && (
         <div className="flex items-center justify-between" style={headPaddingStyle}>
           {menu?.title && (
-            <p data-testid="title" className="text-sm text-neutral-350 dark:text-neutral-250">
+            <p data-testid="title" className="text-sm font-medium text-neutral-350 dark:text-neutral-250">
               {menu?.title}
             </p>
           )}
           {menu?.button && (
             <span
-              className="link inline-block cursor-pointer text-sm font-medium text-brand-500 dark:text-brand-400 dark:hover:text-brand-500"
+              className="link inline-block cursor-pointer text-sm font-medium text-brand-500 dark:hover:text-brand-500"
               onClick={menu?.button.onClick}
             >
               {menu?.button.label}
@@ -84,6 +84,7 @@ export function MenuGroup(props: MenuGroupProps) {
         <div className="menu__search" style={headPaddingStyle} data-testid="menu-search">
           <InputSearch
             autofocus
+            className="dark:bg-neutral-600"
             placeholder="Search"
             isEmpty={filteredItems.length === 0}
             onChange={(value: string) => {
diff --git a/libs/shared/ui/src/lib/components/menu/menu-item/menu-item.tsx b/libs/shared/ui/src/lib/components/menu/menu-item/menu-item.tsx
index ae4e98507a8..be58593dd7d 100644
--- a/libs/shared/ui/src/lib/components/menu/menu-item/menu-item.tsx
+++ b/libs/shared/ui/src/lib/components/menu/menu-item/menu-item.tsx
@@ -62,7 +62,7 @@ export function MenuItem(props: MenuItemProps) {
     itemContentCustom
   ) : (
     <>
-      <div className={`flex items-baseline truncate ${className}`}>
+      <div className={`flex items-center truncate ${className}`}>
         {copy && (
           <div onClick={(e) => e.preventDefault()}>
             <CopyToClipboardButtonIcon
diff --git a/libs/shared/ui/src/lib/components/popover/popover.tsx b/libs/shared/ui/src/lib/components/popover/popover.tsx
index 1b289c4dc3a..3ab8cf85570 100644
--- a/libs/shared/ui/src/lib/components/popover/popover.tsx
+++ b/libs/shared/ui/src/lib/components/popover/popover.tsx
@@ -30,7 +30,7 @@ const PopoverContent = forwardRef<ElementRef<typeof PopoverPrimitive.Content>, P
           {...props}
           ref={forwardedRef}
           className={twMerge(
-            'rounded bg-white p-4 shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border-solid dark:border-neutral-500 dark:bg-neutral-550',
+            'rounded bg-white p-4 shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded dark:border dark:border-neutral-500 dark:bg-neutral-550',
             className
           )}
         />
diff --git a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.spec.tsx b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.spec.tsx
new file mode 100644
index 00000000000..6311b3f75a7
--- /dev/null
+++ b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.spec.tsx
@@ -0,0 +1,32 @@
+import { StageStatusEnum } from 'qovery-typescript-axios'
+import { renderWithProviders, screen } from '@qovery/shared/util-tests'
+import { StageStatusChip } from './stage-status-chip'
+
+describe('StageStatusChip', () => {
+  it('renders a skeleton when status is undefined', () => {
+    renderWithProviders(<StageStatusChip status={undefined} />)
+    const skeleton = screen.getByRole('generic', { busy: true })
+    expect(skeleton).toBeInTheDocument()
+  })
+
+  it('renders the correct icon for each status', () => {
+    const statuses = Object.values(StageStatusEnum)
+
+    statuses.forEach((status) => {
+      const { container } = renderWithProviders(<StageStatusChip status={status} />)
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+  })
+
+  it('applies custom className', () => {
+    const { container } = renderWithProviders(<StageStatusChip status="DONE" className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('renders an animated loader for ONGOING status', () => {
+    renderWithProviders(<StageStatusChip status="ONGOING" />)
+    const loader = screen.getByLabelText('loading')
+    expect(loader).toBeInTheDocument()
+    expect(loader).toHaveClass('animate-spin')
+  })
+})
diff --git a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx
new file mode 100644
index 00000000000..fa5bf3b73f5
--- /dev/null
+++ b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/react'
+import { StageStatusEnum } from 'qovery-typescript-axios'
+import { StageStatusChip, type StageStatusChipProps } from './stage-status-chip'
+
+const Story: Meta<typeof StageStatusChip> = {
+  component: StageStatusChip,
+  title: 'StageStatusChip',
+  argTypes: {
+    status: {
+      options: [...Object.values(StageStatusEnum)],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    status: StageStatusEnum.ONGOING,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ background: 'white', padding: '3em' }}>
+        <div className="inline-flex">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export const Primary = {
+  render: (props: StageStatusChipProps) => <StageStatusChip {...props} />,
+}
+
+export default Story
diff --git a/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx
new file mode 100644
index 00000000000..bab1f364277
--- /dev/null
+++ b/libs/shared/ui/src/lib/components/stage-status-chip/stage-status-chip.tsx
@@ -0,0 +1,127 @@
+import { type StageStatusEnum, type StepMetricStatusEnum } from 'qovery-typescript-axios'
+import { match } from 'ts-pattern'
+import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+import Icon from '../icon/icon'
+import Skeleton from '../skeleton/skeleton'
+import Tooltip from '../tooltip/tooltip'
+
+export interface StageStatusChipProps {
+  status: keyof typeof StageStatusEnum | keyof typeof StepMetricStatusEnum | undefined
+  className?: string
+}
+
+export function StageStatusChip({ status, className = '' }: StageStatusChipProps) {
+  if (!status) {
+    return (
+      <Skeleton width={24} height={24}>
+        <div className={className}></div>
+      </Skeleton>
+    )
+  }
+
+  const icon = match(status)
+    .with('SKIPPED', 'SKIP', () => (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path
+          className="fill-neutral-100 stroke-neutral-250 dark:fill-neutral-650 dark:stroke-neutral-400"
+          d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
+        ></path>
+        <path
+          fill="#A0AFC5"
+          d="M6.91 16.241a.44.44 0 00.693.36l6.009-4.241a.44.44 0 000-.72L7.603 7.4a.44.44 0 00-.693.359v8.482zm8.924-9.331a.44.44 0 00-.44.44v9.3c0 .244.197.44.44.44h.817a.44.44 0 00.44-.44v-9.3a.44.44 0 00-.44-.44h-.817z"
+        ></path>
+      </svg>
+    ))
+    .with('QUEUED', () => (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path
+          fill="#F2F3FE"
+          stroke="#847AE6"
+          d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
+        ></path>
+        <g clipPath="url(#clip0_9487_5796)">
+          <g clipPath="url(#clip1_9487_5796)">
+            <path
+              fill="#5B50D6"
+              d="M17.375 12a5.375 5.375 0 10-10.75 0 5.375 5.375 0 0010.75 0zm-11.99 0a6.615 6.615 0 1113.23 0 6.615 6.615 0 01-13.23 0zm7.235-3.514V12c0 .207-.103.4-.276.517L9.863 14.17a.619.619 0 01-.86-.174.618.618 0 01.173-.86l2.204-1.468V8.486c0-.344.276-.62.62-.62s.62.276.62.62z"
+            ></path>
+          </g>
+        </g>
+        <defs>
+          <clipPath id="clip0_9487_5796">
+            <path fill="#fff" d="M0 0H14V14H0z" transform="translate(5 5)"></path>
+          </clipPath>
+          <clipPath id="clip1_9487_5796">
+            <path fill="#fff" d="M0 0H14V14H0z" transform="translate(5 5)"></path>
+          </clipPath>
+        </defs>
+      </svg>
+    ))
+    .with('ONGOING', () => (
+      <span className="relative flex h-6 w-6 items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" fill="none" viewBox="0 0 22 24">
+          <path
+            fill="#5B50D6"
+            stroke="#847AE6"
+            d="M.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 012.99 4.507s0 0 0 0L8.49 1.2h0a4.864 4.864 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892A5.333 5.333 0 01.5 15.009V8.993z"
+          ></path>
+        </svg>
+        <span
+          aria-label="loading"
+          className="absolute left-0 top-0 flex h-full w-full animate-spin items-center justify-center text-neutral-50"
+        >
+          <Icon iconName="loader" />
+        </span>
+      </span>
+    ))
+    .with('DONE', 'SUCCESS', () => (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path
+          fill="#44C979"
+          stroke="#31AC6F"
+          d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
+        ></path>
+        <path
+          className="fill-neutral-50 dark:fill-neutral-700"
+          fillRule="evenodd"
+          d="M10.138 16.337l7.533-7.143-1.582-1.495-5.955 5.644-2.978-2.822-1.577 1.495 4.56 4.32z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    ))
+    .with('CANCELED', 'CANCEL', () => (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path
+          fill="#F4C004"
+          stroke="#D1A002"
+          d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
+        ></path>
+        <path
+          fill="#101420"
+          d="M12.85 6H11.4a.4.4 0 00-.4.4v6.7c0 .22.18.4.4.4h1.45a.4.4 0 00.4-.4V6.4a.4.4 0 00-.4-.4zM11 15.4v1.45c0 .22.18.4.4.4h1.45a.4.4 0 00.4-.4V15.4a.4.4 0 00-.4-.4H11.4a.4.4 0 00-.4.4z"
+        ></path>
+      </svg>
+    ))
+    .with('ERROR', () => (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <path
+          fill="#FF6240"
+          stroke="#DB402E"
+          d="M1.5 8.993v0c0-.91.23-1.804.669-2.591A5.098 5.098 0 013.99 4.507s0 0 0 0L9.49 1.2h0a4.863 4.863 0 012.508-.7 4.864 4.864 0 012.51.7l5.5 3.31h0a5.097 5.097 0 011.82 1.892c.439.787.67 1.68.671 2.59v6.015c0 .91-.23 1.804-.669 2.591a5.097 5.097 0 01-1.822 1.895l-5.5 3.307h0c-.763.459-1.628.7-2.508.7-.88 0-1.746-.241-2.51-.7 0 0 0 0 0 0l-5.5-3.31h0a5.098 5.098 0 01-1.82-1.892 5.333 5.333 0 01-.671-2.589V8.993z"
+        ></path>
+        <path
+          fill="#fff"
+          d="M12.85 6.375H11.4a.4.4 0 00-.4.4v6.7c0 .22.18.4.4.4h1.45a.4.4 0 00.4-.4v-6.7a.4.4 0 00-.4-.4zM11 15.775v1.45c0 .22.18.4.4.4h1.45a.4.4 0 00.4-.4v-1.45a.4.4 0 00-.4-.4H11.4a.4.4 0 00-.4.4z"
+        ></path>
+      </svg>
+    ))
+    .exhaustive()
+
+  return (
+    <Tooltip content={upperCaseFirstLetter(status)}>
+      <div className={className}>{icon}</div>
+    </Tooltip>
+  )
+}
+
+export default StageStatusChip
diff --git a/libs/shared/ui/src/lib/components/status-chip/status-chip.tsx b/libs/shared/ui/src/lib/components/status-chip/status-chip.tsx
index fc5e09a8dba..f6d01165e08 100644
--- a/libs/shared/ui/src/lib/components/status-chip/status-chip.tsx
+++ b/libs/shared/ui/src/lib/components/status-chip/status-chip.tsx
@@ -1,4 +1,9 @@
-import { type ClusterStateEnum, type StateEnum, type StepMetricStatusEnum } from 'qovery-typescript-axios'
+import {
+  type ClusterStateEnum,
+  type StageStatusEnum,
+  type StateEnum,
+  type StepMetricStatusEnum,
+} from 'qovery-typescript-axios'
 import { match } from 'ts-pattern'
 import { type RunningState } from '@qovery/shared/enums'
 import { upperCaseFirstLetter } from '@qovery/shared/util-js'
@@ -24,7 +29,7 @@ import {
 import Tooltip from '../tooltip/tooltip'
 
 export interface StatusChipProps {
-  status: StateEnum | keyof typeof RunningState | ClusterStateEnum | StepMetricStatusEnum | undefined
+  status: StateEnum | keyof typeof RunningState | ClusterStateEnum | StepMetricStatusEnum | StageStatusEnum | undefined
   appendTooltipMessage?: string
   className?: string
 }
@@ -48,7 +53,7 @@ export function StatusChip(props: StatusChipProps) {
   const icon = match(status)
     // success
     .with('READY', () => <StoppedIcon />)
-    .with('DEPLOYED', 'RUNNING', 'COMPLETED', 'SUCCESS', () => <DeployedIcon />)
+    .with('DEPLOYED', 'RUNNING', 'COMPLETED', 'SUCCESS', 'DONE', () => <DeployedIcon />)
     .with('RESTARTED', () => <RestartedIcon />)
     // spinner
     .with(
@@ -63,7 +68,7 @@ export function StatusChip(props: StatusChipProps) {
       'WAITING_STOPPING',
       () => <QueuedIcon />
     )
-    .with('DEPLOYING', 'STARTING', () => <DeployingIcon />)
+    .with('DEPLOYING', 'STARTING', 'ONGOING', () => <DeployingIcon />)
     .with('RESTARTING', () => <RestartingIcon />)
     .with('BUILDING', () => <BuildingIcon />)
     .with('STOPPING', () => <StoppingIcon />)
@@ -72,7 +77,7 @@ export function StatusChip(props: StatusChipProps) {
     // stopped
     .with('STOPPED', () => <StoppedIcon />)
     .with('CANCELED', 'CANCEL', () => <CanceledIcon />)
-    .with('SKIP', () => <SkipIcon />)
+    .with('SKIP', 'SKIPPED', () => <SkipIcon />)
     .with('DELETED', () => <DeletedIcon />)
     // unknow / error / warning
     .with('UNKNOWN', () => <UnknownIcon />)
diff --git a/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts b/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts
index dc83b1b74a8..f0736dc0ce2 100644
--- a/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts
+++ b/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts
@@ -40,6 +40,7 @@ export function useStatusWebSockets({
           queries.environments.deploymentStatus(environmentId).queryKey,
           () => message.environment
         )
+        queryClient.setQueryData(queries.environments.deploymentStages(environmentId).queryKey, () => message.stages)
         for (const stage of message.stages ?? []) {
           const services = [
             ...(stage.applications ?? []),
diff --git a/package.json b/package.json
index 437ee40a81f..5edda0e220b 100644
--- a/package.json
+++ b/package.json
@@ -161,7 +161,7 @@
     "jest": "29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "29.7.0",
-    "jest-environment-node": "^29.4.1",
+    "jest-environment-node": "^29.7.0",
     "jest-websocket-mock": "^2.4.1",
     "lint-staged": "^13.0.3",
     "msw": "^1.3.0",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b3f02e34f58..bf245c5c841 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -38,6 +38,7 @@
       "@qovery/domains/variables/data-access": ["libs/domains/variables/data-access/src/index.ts"],
       "@qovery/domains/variables/feature": ["libs/domains/variables/feature/src/index.ts"],
       "@qovery/domains/variables/util": ["libs/domains/variables/util/src/index.ts"],
+      "@qovery/domains/environment-logs/feature": ["libs/domains/environment-logs/feature/src/index.ts"],
       "@qovery/pages/application": ["libs/pages/application/src/index.ts"],
       "@qovery/pages/cluster": ["libs/pages/cluster/src/index.ts"],
       "@qovery/pages/clusters": ["libs/pages/clusters/src/index.ts"],
diff --git a/yarn.lock b/yarn.lock
index 1bb33f82ea4..96fb6509b17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4112,7 +4112,7 @@ __metadata:
     jest: 29.7.0
     jest-canvas-mock: ^2.5.2
     jest-environment-jsdom: 29.7.0
-    jest-environment-node: ^29.4.1
+    jest-environment-node: ^29.7.0
     jest-websocket-mock: ^2.4.1
     jwt-decode: ^4.0.0
     lint-staged: ^13.0.3
@@ -15069,7 +15069,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-environment-node@npm:^29.4.1, jest-environment-node@npm:^29.7.0":
+"jest-environment-node@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-environment-node@npm:29.7.0"
   dependencies: