diff --git a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx
index 8d50264e0ea..69ff2e2f061 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx
@@ -3,7 +3,9 @@ import { Suspense } from 'react'
 import { EnvironmentMode, useEnvironment } from '@qovery/domains/environments/feature'
 import { ServiceList } from '@qovery/domains/services/feature'
 import { SERVICES_NEW_URL, SERVICES_URL } from '@qovery/shared/routes'
-import { Heading, Icon, Link, LoaderSpinner, Section } from '@qovery/shared/ui'
+import { Heading, Icon, Link, Section, Skeleton, TablePrimitives } from '@qovery/shared/ui'
+
+const { Table } = TablePrimitives
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
@@ -66,15 +68,70 @@ function EnvironmentOverview() {
   )
 }
 
-function RouteComponent() {
+function ServiceListSkeleton() {
+  const columnSizes = ['40%', '15%', '15%', '20%', '10%']
+
   return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-screen items-center justify-center">
-          <LoaderSpinner className="w-6" />
+    <div className="container mx-auto mt-6 pb-10">
+      <Section className="gap-8">
+        <div className="flex flex-col gap-6">
+          <div className="flex justify-between">
+            <div className="flex items-center gap-3">
+              <Skeleton height={32} width={32} />
+              <Skeleton height={32} width={100} />
+            </div>
+          </div>
+          <hr className="w-full border-neutral" />
         </div>
-      }
-    >
+        <div className="flex flex-col gap-8">
+          <Section className="flex flex-col gap-3.5">
+            <div className="flex items-center justify-between">
+              <Skeleton height={28} width={90} />
+              <Skeleton height={28} width={140} />
+            </div>
+            <Table.Root className="w-full border-b">
+              <Table.Header>
+                <Table.Row>
+                  {[...Array(5)].map((_, index) => (
+                    <Table.ColumnHeaderCell
+                      key={index}
+                      className="first:border-r"
+                      style={{ width: columnSizes[index] }}
+                    >
+                      <Skeleton height={16} width={100} />
+                    </Table.ColumnHeaderCell>
+                  ))}
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {[...Array(3)].map((_, index) => (
+                  <Table.Row key={index}>
+                    {[...Array(5)].map((_, index) => (
+                      <Table.Cell key={index} className="h-14 first:border-r" style={{ width: columnSizes[index] }}>
+                        {index === 0 ? (
+                          <div className="flex items-center justify-between">
+                            <Skeleton height={16} width={300} />
+                            <Skeleton height={16} width={200} />
+                          </div>
+                        ) : (
+                          <Skeleton height={16} width={60} />
+                        )}
+                      </Table.Cell>
+                    ))}
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Root>
+          </Section>
+        </div>
+      </Section>
+    </div>
+  )
+}
+
+function RouteComponent() {
+  return (
+    <Suspense fallback={<ServiceListSkeleton />}>
       <EnvironmentOverview />
     </Suspense>
   )
diff --git a/apps/console-v5/src/routes/_authenticated/organization/route.tsx b/apps/console-v5/src/routes/_authenticated/organization/route.tsx
index f95b1606ae4..d1bd7e65b6f 100644
--- a/apps/console-v5/src/routes/_authenticated/organization/route.tsx
+++ b/apps/console-v5/src/routes/_authenticated/organization/route.tsx
@@ -1,7 +1,7 @@
 import { type IconName } from '@fortawesome/fontawesome-common-types'
 import { Outlet, createFileRoute, useLocation, useMatches, useParams } from '@tanstack/react-router'
 import { Suspense } from 'react'
-import { Icon, LoaderSpinner, Navbar } from '@qovery/shared/ui'
+import { ErrorBoundary, Icon, LoaderSpinner, Navbar } from '@qovery/shared/ui'
 import { queries } from '@qovery/state/util-queries'
 import Header from '../../../app/components/header/header'
 import { type FileRouteTypes } from '../../../routeTree.gen'
@@ -341,21 +341,23 @@ function OrganizationRoute() {
     <div className="flex h-dvh w-full flex-col bg-background">
       {/* TODO: Conflicts with body main:not(.h-screen, .layout-onboarding) */}
       <div className="min-h-0 flex-1 overflow-auto">
-        <Suspense fallback={<MainLoader />}>
-          <>
-            <Header />
-
-            <div className="sticky top-0 z-header border-b border-neutral bg-background-secondary px-4">
-              <Navbar.Root activeId={activeTabId} className="container relative top-[1px] mx-0 -mt-[1px]">
-                {navigationContext && <NavigationBar context={navigationContext} />}
-              </Navbar.Root>
-            </div>
-
-            <div className={needsFullWidth ? 'min-h-0' : 'container mx-auto min-h-0 px-4'}>
-              <Outlet />
-            </div>
-          </>
-        </Suspense>
+        <ErrorBoundary>
+          <Suspense fallback={<MainLoader />}>
+            <>
+              <Header />
+
+              <div className="sticky top-0 z-header border-b border-neutral bg-background-secondary px-4">
+                <Navbar.Root activeId={activeTabId} className="container relative top-[1px] mx-0 -mt-[1px]">
+                  {navigationContext && <NavigationBar context={navigationContext} />}
+                </Navbar.Root>
+              </div>
+
+              <div className={needsFullWidth ? 'min-h-0' : 'container mx-auto min-h-0 px-4'}>
+                <Outlet />
+              </div>
+            </>
+          </Suspense>
+        </ErrorBoundary>
       </div>
     </div>
   )
diff --git a/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap b/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap
index c46b4042b72..feac9733ffd 100644
--- a/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap
+++ b/libs/domains/environments/feature/src/lib/environment-list/__snapshots__/environment-list.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
       <thead>
         <tr>
           <th
-            class="h-11 px-4 text-left font-code font-medium first:border-r"
+            class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
             style="width: 40%;"
           >
             <div
@@ -34,7 +34,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </th>
           <th
-            class="h-11 px-4 text-left font-code font-medium first:border-r"
+            class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
             style="width: 15%;"
           >
             <div
@@ -57,7 +57,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </th>
           <th
-            class="h-11 px-4 text-left font-code font-medium first:border-r"
+            class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
             style="width: 15%;"
           >
             <div
@@ -80,7 +80,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </th>
           <th
-            class="h-11 px-4 text-left font-code font-medium first:border-r"
+            class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
             style="width: 20%;"
           >
             <div
@@ -103,7 +103,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </th>
           <th
-            class="h-11 px-4 text-left font-code font-medium first:border-r"
+            class="h-11 border-neutral px-4 text-left font-code font-medium first:border-r"
             style="width: 10%;"
           >
             <button
@@ -122,7 +122,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
           class="h-16 cursor-pointer hover:bg-neutral-100"
         >
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 40%;"
           >
             <div
@@ -167,7 +167,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -216,7 +216,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -265,7 +265,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 20%;"
           >
             <a
@@ -302,7 +302,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </a>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 10%;"
           >
             <span
@@ -317,7 +317,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
           class="h-16 cursor-pointer hover:bg-neutral-100"
         >
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 40%;"
           >
             <div
@@ -362,7 +362,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -411,7 +411,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -446,7 +446,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 20%;"
           >
             <a
@@ -476,7 +476,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </a>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 10%;"
           >
             <span
@@ -491,7 +491,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
           class="h-16 cursor-pointer hover:bg-neutral-100"
         >
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 40%;"
           >
             <div
@@ -536,7 +536,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -585,7 +585,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -620,7 +620,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 20%;"
           >
             <a
@@ -650,7 +650,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </a>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 10%;"
           >
             <span
@@ -665,7 +665,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
           class="h-16 cursor-pointer hover:bg-neutral-100"
         >
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 40%;"
           >
             <div
@@ -710,7 +710,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -759,7 +759,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 15%;"
           >
             <div
@@ -808,7 +808,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </div>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 20%;"
           >
             <a
@@ -838,7 +838,7 @@ exports[`EnvironmentList should match snapshot 1`] = `
             </a>
           </td>
           <td
-            class="h-14 px-4 py-0 first:border-r"
+            class="h-14 border-neutral px-4 py-0 first:border-r"
             style="width: 10%;"
           >
             <span
diff --git a/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap b/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap
index f1cfc313d58..7e25c8acba1 100644
--- a/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/pods-metrics/__snapshots__/pods-metrics.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
         <thead>
           <tr>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -28,7 +28,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -38,7 +38,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -48,7 +48,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -58,7 +58,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -68,7 +68,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -78,7 +78,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -88,7 +88,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </th>
             <th
-              class="h-11 px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
+              class="h-11 border-neutral px-4 text-left font-code font-medium first:w-1/4 first:pl-[52px]"
             >
               <button
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -106,7 +106,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
             class="hover:bg-neutral-100"
           >
             <td
-              class="h-14 px-4 py-0 text-nowrap"
+              class="h-14 border-neutral px-4 py-0 text-nowrap"
             >
               <button
                 class="text-md pointer inline-flex h-14 w-9 items-center justify-start text-neutral-350"
@@ -124,7 +124,7 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </button>
             </td>
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             >
               <span
                 class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-full gap-2 capitalize"
@@ -169,30 +169,30 @@ exports[`PodsMetrics should match snapshot with data 1`] = `
               </span>
             </td>
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             />
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             >
               30 MiB (20%)
             </td>
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             >
               12 mCPU (5%)
             </td>
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             >
               -
             </td>
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             >
               -
             </td>
             <td
-              class="h-14 px-4 py-0"
+              class="h-14 border-neutral px-4 py-0"
             >
               <i
                 aria-hidden="true"
diff --git a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
index 0d98b363ef6..c9945ce02fd 100644
--- a/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`ServiceList should match snapshot 1`] = `
         <thead>
           <tr>
             <th
-              class="h-11 text-left font-code px-6 pl-4 font-medium"
+              class="h-11 border-neutral text-left font-code px-6 pl-4 font-medium"
               style="width: 20px;"
             >
               <div
@@ -54,7 +54,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </th>
             <th
-              class="h-11 text-left font-code px-6 font-medium"
+              class="h-11 border-neutral text-left font-code px-6 font-medium"
               style="width: 15%;"
             >
               <div
@@ -77,13 +77,13 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </th>
             <th
-              class="h-11 text-left font-code px-6 font-medium"
+              class="h-11 border-neutral text-left font-code px-6 font-medium"
               style="width: 30%;"
             >
               Target version
             </th>
             <th
-              class="h-11 text-left font-code px-6 font-medium"
+              class="h-11 border-neutral text-left font-code px-6 font-medium"
               style="width: 3%;"
             >
               <button
@@ -102,7 +102,7 @@ exports[`ServiceList should match snapshot 1`] = `
             class="h-[68px]"
           >
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 20px;"
             >
               <label
@@ -278,7 +278,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 15%;"
             >
               <div
@@ -327,7 +327,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 30%;"
             >
               <div
@@ -421,7 +421,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 3%;"
             >
               <a
@@ -445,7 +445,7 @@ exports[`ServiceList should match snapshot 1`] = `
             class="h-[68px]"
           >
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 20px;"
             >
               <label
@@ -630,7 +630,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 15%;"
             >
               <div
@@ -679,7 +679,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 30%;"
             >
               <div
@@ -769,7 +769,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 3%;"
             >
               <a
@@ -793,7 +793,7 @@ exports[`ServiceList should match snapshot 1`] = `
             class="h-[68px]"
           >
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 20px;"
             >
               <label
@@ -1280,7 +1280,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 15%;"
             >
               <div
@@ -1329,7 +1329,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 30%;"
             >
               <div
@@ -1423,7 +1423,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 3%;"
             >
               <a
@@ -1447,7 +1447,7 @@ exports[`ServiceList should match snapshot 1`] = `
             class="h-[68px]"
           >
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 20px;"
             >
               <label
@@ -1727,7 +1727,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 15%;"
             >
               <div
@@ -1776,7 +1776,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 30%;"
             >
               <div
@@ -1870,7 +1870,7 @@ exports[`ServiceList should match snapshot 1`] = `
               </div>
             </td>
             <td
-              class="h-14 py-0 px-6 first:relative"
+              class="h-14 border-neutral py-0 px-6 first:relative"
               style="width: 3%;"
             >
               <a
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index a0af14efda0..fbf2b015936 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -83,7 +83,6 @@ import { ServiceAvatar } from '../service-avatar/service-avatar'
 import { ServiceLinksPopover } from '../service-links-popover/service-links-popover'
 import { ServiceTemplateIndicator } from '../service-template-indicator/service-template-indicator'
 import { ServiceListActionBar } from './service-list-action-bar'
-import { ServiceListSkeleton } from './service-list-skeleton'
 
 const { Table } = TablePrimitives
 
@@ -325,7 +324,7 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
   const organizationId = environment.organization.id || ''
   const projectId = environment.project.id || ''
 
-  const { data: services = [], isLoading: isServicesLoading } = useServices({ environmentId })
+  const { data: services = [] } = useServices({ environmentId, suspense: true })
   const { data: checkRunningStatusClosed } = useCheckRunningStatusClosed({
     clusterId,
     environmentId,
@@ -753,10 +752,6 @@ export function ServiceList({ className, environment, ...props }: ServiceListPro
     },
   })
 
-  if (services.length === 0 && isServicesLoading) {
-    return <ServiceListSkeleton />
-  }
-
   if (services.length === 0) {
     return (
       <EmptyState
diff --git a/libs/domains/variables/feature/src/lib/output-variables/__snapshots__/output-variables.spec.tsx.snap b/libs/domains/variables/feature/src/lib/output-variables/__snapshots__/output-variables.spec.tsx.snap
index a0cae4cbc34..1cf7f3e6314 100644
--- a/libs/domains/variables/feature/src/lib/output-variables/__snapshots__/output-variables.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/output-variables/__snapshots__/output-variables.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`OutputVariables when serviceType is JOB should match snapshot 1`] = `
           <thead>
             <tr>
               <th
-                class="h-11 px-4 text-left font-code font-medium"
+                class="h-11 border-neutral px-4 text-left font-code font-medium"
                 style="width: 50%;"
               >
                 <button
@@ -36,7 +36,7 @@ exports[`OutputVariables when serviceType is JOB should match snapshot 1`] = `
                 </button>
               </th>
               <th
-                class="h-11 px-4 text-left font-code font-medium"
+                class="h-11 border-neutral px-4 text-left font-code font-medium"
                 style="width: 50%;"
               >
                 Value
@@ -50,7 +50,7 @@ exports[`OutputVariables when serviceType is JOB should match snapshot 1`] = `
               class="h-12"
             >
               <td
-                class="h-14 px-4 py-0"
+                class="h-14 border-neutral px-4 py-0"
                 style="width: 50%;"
               >
                 <div
@@ -65,7 +65,7 @@ exports[`OutputVariables when serviceType is JOB should match snapshot 1`] = `
                 </div>
               </td>
               <td
-                class="h-14 px-4 py-0"
+                class="h-14 border-neutral px-4 py-0"
                 style="width: 50%;"
               >
                 <span
@@ -112,7 +112,7 @@ exports[`OutputVariables when serviceType is TERRAFORM should match snapshot 1`]
           <thead>
             <tr>
               <th
-                class="h-11 px-4 text-left font-code font-medium"
+                class="h-11 border-neutral px-4 text-left font-code font-medium"
                 style="width: 50%;"
               >
                 <button
@@ -133,7 +133,7 @@ exports[`OutputVariables when serviceType is TERRAFORM should match snapshot 1`]
                 </button>
               </th>
               <th
-                class="h-11 px-4 text-left font-code font-medium"
+                class="h-11 border-neutral px-4 text-left font-code font-medium"
                 style="width: 50%;"
               >
                 Value
@@ -147,7 +147,7 @@ exports[`OutputVariables when serviceType is TERRAFORM should match snapshot 1`]
               class="h-12"
             >
               <td
-                class="h-14 px-4 py-0"
+                class="h-14 border-neutral px-4 py-0"
                 style="width: 50%;"
               >
                 <div
@@ -162,7 +162,7 @@ exports[`OutputVariables when serviceType is TERRAFORM should match snapshot 1`]
                 </div>
               </td>
               <td
-                class="h-14 px-4 py-0"
+                class="h-14 border-neutral px-4 py-0"
                 style="width: 50%;"
               >
                 <span
diff --git a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
index 4221f51dd11..e174d4b9ba2 100644
--- a/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
+++ b/libs/domains/variables/feature/src/lib/variable-list/__snapshots__/variable-list.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="items-center text-xs grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <div
                     class="flex h-5 items-center"
@@ -43,7 +43,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </th>
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <button
                     class="flex items-center gap-1 cursor-pointer select-none"
@@ -77,7 +77,7 @@ exports[`VariableList should match snapshot 1`] = `
                   class="h-11 px-4 text-left font-code border-r border-neutral pl-0 group relative flex items-center font-medium"
                 />
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <div
                     class="relative inline-block"
@@ -99,7 +99,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </th>
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <div
                     class="relative inline-block"
@@ -121,7 +121,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </th>
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <div
                     class="relative inline-block"
@@ -143,7 +143,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </th>
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <button
                     class="flex items-center gap-1 cursor-pointer select-none"
@@ -165,7 +165,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -181,7 +181,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -237,13 +237,13 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -252,7 +252,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -267,7 +267,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -283,7 +283,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -339,13 +339,13 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -354,7 +354,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -369,7 +369,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -385,7 +385,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -430,7 +430,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex w-full items-center gap-2 text-sm"
@@ -447,7 +447,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <a
                     class="flex items-center gap-2 text-sm font-medium"
@@ -544,7 +544,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </a>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -553,7 +553,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -568,7 +568,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -584,7 +584,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -624,7 +624,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="group flex h-5 w-full items-center gap-2 text-sm"
@@ -648,10 +648,10 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -660,7 +660,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -675,7 +675,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -691,7 +691,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -731,7 +731,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="flex h-5 items-center gap-2 text-sm text-neutral-disabled"
@@ -754,7 +754,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <a
                     class="flex items-center gap-2 text-sm font-medium"
@@ -851,7 +851,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </a>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -860,7 +860,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -875,7 +875,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -891,7 +891,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -981,7 +981,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="flex h-5 items-center gap-2 text-sm text-neutral-disabled"
@@ -1004,7 +1004,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <a
                     class="flex items-center gap-2 text-sm font-medium"
@@ -1101,7 +1101,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </a>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -1110,7 +1110,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -1125,7 +1125,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -1141,7 +1141,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -1190,7 +1190,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="group flex h-5 w-full items-center gap-2 text-sm"
@@ -1214,10 +1214,10 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -1226,7 +1226,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -1241,7 +1241,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[32px_minmax(0,40%)_50px_minmax(0,20%)_minmax(0,15%)_minmax(0,10%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <label
                     class="absolute inset-y-0 left-0 flex items-center p-4"
@@ -1257,7 +1257,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </label>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -1313,13 +1313,13 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 />
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm font-medium capitalize"
@@ -1328,7 +1328,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
@@ -1366,7 +1366,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="items-center text-xs grid w-full grid-cols-[minmax(0,calc(40%_+_32px))_50px_minmax(0,30%)_minmax(0,15%)_minmax(0,12%)]"
               >
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <button
                     class="flex items-center gap-1 cursor-pointer select-none"
@@ -1400,7 +1400,7 @@ exports[`VariableList should match snapshot 1`] = `
                   class="h-11 px-4 text-left font-code border-r border-neutral pl-0 group relative flex items-center font-medium"
                 />
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <div
                     class="relative inline-block"
@@ -1422,7 +1422,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </th>
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <div
                     class="relative inline-block"
@@ -1444,7 +1444,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </div>
                 </th>
                 <th
-                  class="h-11 px-4 text-left font-code group relative flex items-center font-medium"
+                  class="h-11 border-neutral px-4 text-left font-code group relative flex items-center font-medium"
                 >
                   <button
                     class="flex items-center gap-1 cursor-pointer select-none"
@@ -1466,7 +1466,7 @@ exports[`VariableList should match snapshot 1`] = `
                 class="h-16 items-center hover:bg-surface-neutral-subtle grid w-full grid-cols-[minmax(0,calc(40%_+_32px))_50px_minmax(0,30%)_minmax(0,15%)_minmax(0,12%)]"
               >
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <div
                     class="flex flex-col justify-center gap-1"
@@ -1506,7 +1506,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </button>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="group flex h-5 w-full items-center gap-2 text-sm"
@@ -1530,7 +1530,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <a
                     class="flex items-center gap-2 text-sm font-medium"
@@ -1540,7 +1540,7 @@ exports[`VariableList should match snapshot 1`] = `
                   </a>
                 </td>
                 <td
-                  class="px-4 py-0 flex h-full items-center first:relative"
+                  class="border-neutral px-4 py-0 flex h-full items-center first:relative"
                 >
                   <span
                     class="text-sm text-neutral-subtle"
diff --git a/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx b/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx
index 806b8315d33..8ecaa426d91 100644
--- a/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx
+++ b/libs/shared/ui/src/lib/components/table-primitives/table-primitives.tsx
@@ -62,7 +62,7 @@ const TableCell = forwardRef<ElementRef<'td'>, TableCellProps>(function TableCel
   ref
 ) {
   return (
-    <td ref={ref} className={twMerge('h-14 px-4 py-0', className)} {...rest}>
+    <td ref={ref} className={twMerge('h-14 border-neutral px-4 py-0', className)} {...rest}>
       {children}
     </td>
   )
@@ -88,7 +88,7 @@ const TableColumnHeaderCell = forwardRef<ElementRef<'th'>, TableColumnHeaderCell
   ref
 ) {
   return (
-    <th ref={ref} className={twMerge('h-11 px-4 text-left font-code font-normal', className)} {...rest}>
+    <th ref={ref} className={twMerge('h-11 border-neutral px-4 text-left font-code font-normal', className)} {...rest}>
       {children}
     </th>
   )