From 110d70ed84450e264e5c6434da0ff0800efc1305 Mon Sep 17 00:00:00 2001
From: Kevin Abatan <abatan.k@gmail.com>
Date: Thu, 23 Jan 2025 23:05:32 +0100
Subject: [PATCH] feat: adding breadcrumb all around the app

---
 packages/app-builder/package.json             |   3 +-
 .../src/components/Breadcrumbs.tsx            |  79 ++++++
 .../src/repositories/TestRunRepository.ts     |  22 +-
 .../src/routes/_builder+/analytics.tsx        |  22 +-
 .../app-builder/src/routes/_builder+/api.tsx  |  17 +-
 .../_index.tsx}                               |   0
 .../_layout.tsx}                              |  36 +--
 .../decisions.tsx}                            |   4 +-
 .../{$caseId.files.tsx => $caseId+/files.tsx} |   2 +-
 .../information.tsx}                          |   2 +-
 .../src/routes/_builder+/cases+/_index.tsx    |   5 +-
 .../src/routes/_builder+/cases+/_layout.tsx   |  18 ++
 .../_builder+/cases+/inboxes.$inboxId.tsx     |   2 +-
 .../_builder+/cases+/inboxes._layout.tsx      |  15 +-
 .../src/routes/_builder+/data+/_layout.tsx    |  17 +-
 .../_builder+/decisions+/$decisionId.tsx      |  32 ++-
 .../routes/_builder+/decisions+/_index.tsx    |   5 +-
 .../routes/_builder+/decisions+/_layout.tsx   |  18 ++
 .../src/routes/_builder+/lists+/$listId.tsx   |  26 +-
 .../src/routes/_builder+/lists+/_index.tsx    |   5 +-
 .../src/routes/_builder+/lists+/_layout.tsx   |  18 ++
 .../scenarios+/$scenarioId+/_layout.tsx       |  13 +
 .../scenarios+/$scenarioId+/home.tsx          |  52 ++--
 .../i+/$iterationId+/_edit-view+/_layout.tsx  |  37 ++-
 .../$scenarioId+/scheduled-executions.tsx     |  25 +-
 .../{$testRunId.tsx => $testRunId+/index.tsx} |  34 ++-
 .../$scenarioId+/test-run+/_layout.tsx        |  17 ++
 .../$scenarioId+/test-run+/index.tsx          |  12 +-
 .../scenarios+/$scenarioId+/workflow.tsx      |  20 +-
 .../routes/_builder+/scenarios+/_index.tsx    |   4 +-
 .../routes/_builder+/scenarios+/_layout.tsx   |  18 ++
 .../routes/_builder+/settings+/_layout.tsx    |  15 +-
 .../routes/_builder+/settings+/api-keys.tsx   |   5 +
 .../_builder+/settings+/inboxes._index.tsx    |   5 +
 .../routes/_builder+/settings+/scenarios.tsx  |   5 +
 .../src/routes/_builder+/settings+/tags.tsx   |   5 +
 .../src/routes/_builder+/settings+/users.tsx  |   5 +
 .../routes/_builder+/settings+/webhooks.tsx   |   5 +
 .../app-builder/src/utils/routes/routes.ts    | 251 ++++++++++--------
 .../app-builder/src/utils/routes/types.ts     |  29 +-
 pnpm-lock.yaml                                |  15 ++
 41 files changed, 627 insertions(+), 293 deletions(-)
 create mode 100644 packages/app-builder/src/components/Breadcrumbs.tsx
 rename packages/app-builder/src/routes/_builder+/cases+/{$caseId._index.tsx => $caseId+/_index.tsx} (100%)
 rename packages/app-builder/src/routes/_builder+/cases+/{$caseId._layout.tsx => $caseId+/_layout.tsx} (90%)
 rename packages/app-builder/src/routes/_builder+/cases+/{$caseId.decisions.tsx => $caseId+/decisions.tsx} (93%)
 rename packages/app-builder/src/routes/_builder+/cases+/{$caseId.files.tsx => $caseId+/files.tsx} (96%)
 rename packages/app-builder/src/routes/_builder+/cases+/{$caseId.information.tsx => $caseId+/information.tsx} (97%)
 create mode 100644 packages/app-builder/src/routes/_builder+/cases+/_layout.tsx
 create mode 100644 packages/app-builder/src/routes/_builder+/decisions+/_layout.tsx
 create mode 100644 packages/app-builder/src/routes/_builder+/lists+/_layout.tsx
 rename packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/{$testRunId.tsx => $testRunId+/index.tsx} (84%)
 create mode 100644 packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout.tsx
 create mode 100644 packages/app-builder/src/routes/_builder+/scenarios+/_layout.tsx

diff --git a/packages/app-builder/package.json b/packages/app-builder/package.json
index 6071b18d5..f2702d4c7 100644
--- a/packages/app-builder/package.json
+++ b/packages/app-builder/package.json
@@ -107,6 +107,7 @@
     "ui-design-system": "workspace:*",
     "ui-icons": "workspace:*",
     "zod": "^3.23.8",
-    "zustand": "^5.0.0"
+    "zustand": "^5.0.0",
+    "@swan-io/boxed": "^3.2.0"
   }
 }
diff --git a/packages/app-builder/src/components/Breadcrumbs.tsx b/packages/app-builder/src/components/Breadcrumbs.tsx
new file mode 100644
index 000000000..32519869e
--- /dev/null
+++ b/packages/app-builder/src/components/Breadcrumbs.tsx
@@ -0,0 +1,79 @@
+import { Link, useMatches } from '@remix-run/react';
+import { Future } from '@swan-io/boxed';
+import clsx from 'clsx';
+import {
+  type FunctionComponent,
+  type PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react';
+import { filter } from 'remeda';
+
+type Links = {
+  Element: FunctionComponent | undefined;
+  pathname: string;
+}[];
+
+const Separator = () => (
+  <span className="text-s text-grey-80 font-bold">/</span>
+);
+
+const LinkWrapper = ({
+  isLast,
+  children,
+  pathname,
+}: PropsWithChildren<{ isLast: boolean; pathname: string }>) => {
+  return isLast ? (
+    children
+  ) : (
+    <Link
+      to={pathname}
+      className={clsx('transition-colors', {
+        'text-grey-50 hover:text-grey-00': !isLast,
+      })}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export const BreadCrumbs = () => {
+  const matches = useMatches();
+  const [links, setLinks] = useState<Links>([]);
+
+  console.log('Matches', matches);
+
+  useEffect(() => {
+    Future.all(
+      matches.map(({ id, pathname }) =>
+        Future.fromPromise(
+          import(/* @vite-ignore */ `../${id}`) as Promise<{
+            BreadCrumb?: FunctionComponent;
+          }>,
+        ).map((result) => ({
+          Element: result.isOk() ? result.value.BreadCrumb : undefined,
+          pathname,
+        })),
+      ),
+    )
+      .map(filter((r) => r.Element !== undefined))
+      .then(setLinks);
+  }, [matches]);
+
+  return (
+    <div className="flex flex-row items-center gap-4">
+      {links.map(({ Element, pathname }, i) => {
+        const isLast = i === links.length - 1;
+
+        return Element ? (
+          <div className="text-s flex items-center gap-4 font-bold" key={i}>
+            <LinkWrapper isLast={isLast} pathname={pathname}>
+              <Element />
+            </LinkWrapper>
+            {!isLast ? <Separator /> : null}
+          </div>
+        ) : null;
+      })}
+    </div>
+  );
+};
diff --git a/packages/app-builder/src/repositories/TestRunRepository.ts b/packages/app-builder/src/repositories/TestRunRepository.ts
index be462e808..b31a2bc61 100644
--- a/packages/app-builder/src/repositories/TestRunRepository.ts
+++ b/packages/app-builder/src/repositories/TestRunRepository.ts
@@ -14,6 +14,7 @@ import {
 } from '@app-builder/models/testrun';
 import { toUUID } from '@app-builder/utils/short-uuid';
 import { addDays } from 'date-fns';
+import { sleep } from 'radash';
 import { randomInteger } from 'remeda';
 import short from 'short-uuid';
 
@@ -30,13 +31,13 @@ export interface TestRunRepository {
 
 const testruns: TestRun[] = [
   {
-    id: '989ed5e4-c7ca-4685-9535-a3e1ab9dfc75',
-    refIterationId: '6f6fe0d8-9a1a-4d5a-bdd7-fa7fcda1b4e3',
-    scenarioId: '6f6fe0d8-0804-4500-ae68-f4e56ea780d7',
-    testIterationId: '6f6fe0d8-bbc8-4df3-a913-c0064ed99e4e',
+    id: '84386e82-2da2-493a-a08f-0e6456756193',
+    refIterationId: '84386e82-45cf-4fdf-9112-9fab1a55e8be',
+    scenarioId: '84386e82-a26f-4317-b1e3-373efdf6f6b1',
+    testIterationId: '84386e82-4d57-4aea-9c62-d60d496319a6',
     startDate: new Date().toISOString(),
     endDate: addDays(new Date(), 1).toISOString(),
-    creatorId: '96762987-8895-4af2-9c0a-2dffde09985c',
+    creatorId: '34c74c92-4570-4623-9ea8-fa9374d11e4b',
     status: 'up',
   },
 ];
@@ -176,8 +177,15 @@ export const makeGetTestRunRepository2 = () => {
       return Promise.resolve();
     },
     listTestRuns: () => Promise.resolve(testruns),
-    listDecisions: () => Promise.resolve(testrunDecisions),
-    listRuleExecutions: () => Promise.resolve(testrunRuleExecutions),
+    listDecisions: async () => {
+      await sleep(1500);
+      return testrunDecisions;
+    },
+    listRuleExecutions: async () => {
+      await sleep(4000);
+      //throw new Error('Some Timeout');
+      return testrunRuleExecutions;
+    },
     launchTestRun: (args: TestRunCreateInput) => {
       const testRun: TestRun = {
         id: toUUID(short.generate()),
diff --git a/packages/app-builder/src/routes/_builder+/analytics.tsx b/packages/app-builder/src/routes/_builder+/analytics.tsx
index 4b2908acc..38284c2ff 100644
--- a/packages/app-builder/src/routes/_builder+/analytics.tsx
+++ b/packages/app-builder/src/routes/_builder+/analytics.tsx
@@ -1,4 +1,5 @@
 import { ErrorComponent, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { isAnalyticsAvailable } from '@app-builder/services/feature-access';
 import { serverServices } from '@app-builder/services/init.server';
 import { notFound } from '@app-builder/utils/http/http-responses';
@@ -41,19 +42,26 @@ export async function loader({ request }: LoaderFunctionArgs) {
   });
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="analytics" className="me-2 size-6" />
+      <span className="line-clamp-1 text-start">
+        {t('navigation:analytics')}
+      </span>
+    </div>
+  );
+};
+
 export default function Analytics() {
-  const { t } = useTranslation(handle.i18n);
   const { globalDashbord } = useLoaderData<typeof loader>();
 
   return (
     <Page.Main>
       <Page.Header className="justify-between">
-        <div className="flex flex-row items-center">
-          <Icon icon="analytics" className="me-2 size-6" />
-          <span className="line-clamp-1 text-start">
-            {t('navigation:analytics')}
-          </span>
-        </div>
+        <BreadCrumbs />
       </Page.Header>
       <iframe
         src={globalDashbord.src}
diff --git a/packages/app-builder/src/routes/_builder+/api.tsx b/packages/app-builder/src/routes/_builder+/api.tsx
index adf6808c5..26adb8c00 100644
--- a/packages/app-builder/src/routes/_builder+/api.tsx
+++ b/packages/app-builder/src/routes/_builder+/api.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { serverServices } from '@app-builder/services/init.server';
 import { downloadFile } from '@app-builder/utils/download-file';
 import { getRoute } from '@app-builder/utils/routes';
@@ -39,6 +40,17 @@ export async function loader({ request }: LoaderFunctionArgs) {
   return json({ openapi });
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="world" className="me-2 size-6" />
+      <span className="line-clamp-1 text-start">{t('navigation:api')}</span>
+    </div>
+  );
+};
+
 export default function Api() {
   const { t } = useTranslation(handle.i18n);
   const { openapi } = useLoaderData<typeof loader>();
@@ -46,10 +58,7 @@ export default function Api() {
   return (
     <Page.Main>
       <Page.Header className="justify-between">
-        <div className="flex flex-row items-center">
-          <Icon icon="world" className="me-2 size-6" />
-          <span className="line-clamp-1 text-start">{t('navigation:api')}</span>
-        </div>
+        <BreadCrumbs />
       </Page.Header>
       <Page.Container>
         <Page.Content>
diff --git a/packages/app-builder/src/routes/_builder+/cases+/$caseId._index.tsx b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/_index.tsx
similarity index 100%
rename from packages/app-builder/src/routes/_builder+/cases+/$caseId._index.tsx
rename to packages/app-builder/src/routes/_builder+/cases+/$caseId+/_index.tsx
diff --git a/packages/app-builder/src/routes/_builder+/cases+/$caseId._layout.tsx b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/_layout.tsx
similarity index 90%
rename from packages/app-builder/src/routes/_builder+/cases+/$caseId._layout.tsx
rename to packages/app-builder/src/routes/_builder+/cases+/$caseId+/_layout.tsx
index 92a903061..03b1ff5e6 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/$caseId._layout.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/_layout.tsx
@@ -4,6 +4,7 @@ import {
   Page,
   TabLink,
 } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { casesI18n } from '@app-builder/components/Cases';
 import { CaseHistory } from '@app-builder/components/Cases/CaseHistory/CaseHistory';
 import {
@@ -23,7 +24,7 @@ import {
 } from '@app-builder/services/feature-access';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute, type RouteID } from '@app-builder/utils/routes';
-import { fromParams, fromUUID } from '@app-builder/utils/short-uuid';
+import { fromParams } from '@app-builder/utils/short-uuid';
 import {
   defer,
   type LoaderFunctionArgs,
@@ -129,30 +130,33 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
 export function useCurrentCase() {
   return useRouteLoaderData(
-    'routes/_builder+/cases+/$caseId._layout' satisfies RouteID,
+    'routes/_builder+/cases+/$caseId+/_layout' satisfies RouteID,
   ) as SerializeFrom<typeof loader>;
 }
 
+export const BreadCrumb = () => {
+  const { caseDetail } = useLoaderData<typeof loader>();
+
+  return (
+    <div className="flex items-center gap-4">
+      <span className="line-clamp-2 text-start">{caseDetail.name}</span>
+      <CopyToClipboardButton toCopy={caseDetail.id}>
+        <span className="text-s line-clamp-1 max-w-40 font-normal">
+          <span className="font-medium">ID</span> {caseDetail.id}
+        </span>
+      </CopyToClipboardButton>
+    </div>
+  );
+};
+
 export default function CasePage() {
   const { t } = useTranslation(handle.i18n);
   const { caseDetail } = useLoaderData<typeof loader>();
 
   return (
     <Page.Main>
-      <Page.Header className="justify-between gap-8">
-        <div className="flex flex-row items-center gap-4">
-          <Page.BackLink
-            to={getRoute('/cases/inboxes/:inboxId', {
-              inboxId: fromUUID(caseDetail.inboxId),
-            })}
-          />
-          <span className="line-clamp-2 text-start">{caseDetail.name}</span>
-          <CopyToClipboardButton toCopy={caseDetail.id}>
-            <span className="text-s line-clamp-1 max-w-40 font-normal">
-              <span className="font-medium">ID</span> {caseDetail.id}
-            </span>
-          </CopyToClipboardButton>
-        </div>
+      <Page.Header className="justify-between">
+        <BreadCrumbs />
         <EditCaseStatus caseId={caseDetail.id} status={caseDetail.status} />
       </Page.Header>
       <div className="flex size-full flex-col overflow-hidden">
diff --git a/packages/app-builder/src/routes/_builder+/cases+/$caseId.decisions.tsx b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/decisions.tsx
similarity index 93%
rename from packages/app-builder/src/routes/_builder+/cases+/$caseId.decisions.tsx
rename to packages/app-builder/src/routes/_builder+/cases+/$caseId+/decisions.tsx
index d4d0f5be8..b60263593 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/$caseId.decisions.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/decisions.tsx
@@ -5,7 +5,7 @@ import { Link } from '@remix-run/react';
 import { type Namespace } from 'i18next';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { useCurrentCase } from './$caseId._layout';
+import { useCurrentCase } from './_layout';
 
 export const handle = {
   i18n: ['common', 'navigation', 'data', ...casesI18n] satisfies Namespace,
@@ -27,7 +27,7 @@ export default function CasePage() {
               Link: (
                 <Link
                   className="hover:text-purple-65 text-purple-82 hover:underline"
-                  to={getRoute('/decisions/')}
+                  to={getRoute('/decisions')}
                 />
               ),
             }}
diff --git a/packages/app-builder/src/routes/_builder+/cases+/$caseId.files.tsx b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/files.tsx
similarity index 96%
rename from packages/app-builder/src/routes/_builder+/cases+/$caseId.files.tsx
rename to packages/app-builder/src/routes/_builder+/cases+/$caseId+/files.tsx
index 5b436165c..71c9ec9ab 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/$caseId.files.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/files.tsx
@@ -5,7 +5,7 @@ import { UploadFile } from '@app-builder/routes/ressources+/cases+/upload-file';
 import { type Namespace } from 'i18next';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { useCurrentCase } from './$caseId._layout';
+import { useCurrentCase } from './_layout';
 
 export const handle = {
   i18n: ['common', 'navigation', ...casesI18n] satisfies Namespace,
diff --git a/packages/app-builder/src/routes/_builder+/cases+/$caseId.information.tsx b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/information.tsx
similarity index 97%
rename from packages/app-builder/src/routes/_builder+/cases+/$caseId.information.tsx
rename to packages/app-builder/src/routes/_builder+/cases+/$caseId+/information.tsx
index 3b9292cfc..920fdc2cd 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/$caseId.information.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/$caseId+/information.tsx
@@ -7,7 +7,7 @@ import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
 import { type Namespace } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import { useCurrentCase } from './$caseId._layout';
+import { useCurrentCase } from './_layout';
 
 export const handle = {
   i18n: ['common', 'navigation', ...casesI18n] satisfies Namespace,
diff --git a/packages/app-builder/src/routes/_builder+/cases+/_index.tsx b/packages/app-builder/src/routes/_builder+/cases+/_index.tsx
index 991781326..436ab7c49 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/_index.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/_index.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { CreateInbox } from '@app-builder/routes/ressources+/settings+/inboxes+/create';
 import { isCreateInboxAvailable } from '@app-builder/services/feature-access';
 import { serverServices } from '@app-builder/services/init.server';
@@ -8,7 +9,6 @@ import { json, type LoaderFunctionArgs, redirect } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { useTranslation } from 'react-i18next';
 import * as R from 'remeda';
-import { Icon } from 'ui-icons';
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const { authService } = serverServices;
@@ -36,8 +36,7 @@ export default function Cases() {
   return (
     <Page.Main>
       <Page.Header>
-        <Icon icon="case-manager" className="me-2 size-6" />
-        {t('navigation:case_manager')}
+        <BreadCrumbs />
       </Page.Header>
       <Page.Container>
         <Page.Content>
diff --git a/packages/app-builder/src/routes/_builder+/cases+/_layout.tsx b/packages/app-builder/src/routes/_builder+/cases+/_layout.tsx
new file mode 100644
index 000000000..f18ff7aea
--- /dev/null
+++ b/packages/app-builder/src/routes/_builder+/cases+/_layout.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from '@remix-run/react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'ui-icons';
+
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation', 'cases']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="case-manager" className="me-2 size-6" />
+      {t('navigation:case_manager')}
+    </div>
+  );
+};
+
+export default function CasesLayout() {
+  return <Outlet />;
+}
diff --git a/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx b/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx
index 1317a73b5..b0b843eb1 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx
@@ -96,7 +96,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   } catch (error) {
     // if inbox is deleted or user no longer have access, the user is redirected
     if (isNotFoundHttpError(error) || isForbiddenHttpError(error)) {
-      return redirect(getRoute('/cases/'));
+      return redirect(getRoute('/cases'));
     } else {
       throw error;
     }
diff --git a/packages/app-builder/src/routes/_builder+/cases+/inboxes._layout.tsx b/packages/app-builder/src/routes/_builder+/cases+/inboxes._layout.tsx
index f2593e7d1..ad91f5fb1 100644
--- a/packages/app-builder/src/routes/_builder+/cases+/inboxes._layout.tsx
+++ b/packages/app-builder/src/routes/_builder+/cases+/inboxes._layout.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { casesI18n } from '@app-builder/components/Cases';
 import { CreateInbox } from '@app-builder/routes/ressources+/settings+/inboxes+/create';
 import { isCreateInboxAvailable } from '@app-builder/services/feature-access';
@@ -30,6 +31,17 @@ export async function loader({ request }: LoaderFunctionArgs) {
   });
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation', 'cases']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="case-manager" className="me-2 size-6" />
+      <span className="text-s">{t('navigation:case_manager')}</span>
+    </div>
+  );
+};
+
 export default function Cases() {
   const { t } = useTranslation(handle.i18n);
   const { inboxes, isCreateInboxAvailable } = useLoaderData<typeof loader>();
@@ -37,8 +49,7 @@ export default function Cases() {
   return (
     <Page.Main>
       <Page.Header>
-        <Icon icon="case-manager" className="me-2 size-6" />
-        {t('navigation:case_manager')}
+        <BreadCrumbs />
       </Page.Header>
       <div className="flex h-full flex-row overflow-hidden">
         <div className="border-e-grey-90 bg-grey-100 flex h-full w-fit min-w-[200px] max-w-[300px] shrink-0 flex-col overflow-y-auto border-e p-4">
diff --git a/packages/app-builder/src/routes/_builder+/data+/_layout.tsx b/packages/app-builder/src/routes/_builder+/data+/_layout.tsx
index 1f8700331..d67ab987b 100644
--- a/packages/app-builder/src/routes/_builder+/data+/_layout.tsx
+++ b/packages/app-builder/src/routes/_builder+/data+/_layout.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { DataModelContextProvider } from '@app-builder/services/data/data-model';
 import {
   isCreateDataModelFieldAvailable,
@@ -45,6 +46,17 @@ export async function loader({ request }: LoaderFunctionArgs) {
   });
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="harddrive" className="me-2 size-6" />
+      {t('navigation:data')}
+    </div>
+  );
+};
+
 export default function Data() {
   const { t } = useTranslation(handle.i18n);
   const { dataModel, dataModelFeatureAccess } = useLoaderData<typeof loader>();
@@ -52,10 +64,7 @@ export default function Data() {
   return (
     <Page.Main>
       <Page.Header className="justify-between">
-        <div className="flex flex-row items-center">
-          <Icon icon="harddrive" className="me-2 size-6" />
-          {t('navigation:data')}
-        </div>
+        <BreadCrumbs />
       </Page.Header>
       <DataModelContextProvider
         dataModel={dataModel}
diff --git a/packages/app-builder/src/routes/_builder+/decisions+/$decisionId.tsx b/packages/app-builder/src/routes/_builder+/decisions+/$decisionId.tsx
index f14a87d1c..26403f125 100644
--- a/packages/app-builder/src/routes/_builder+/decisions+/$decisionId.tsx
+++ b/packages/app-builder/src/routes/_builder+/decisions+/$decisionId.tsx
@@ -9,6 +9,7 @@ import {
   RulesDetail,
   useDecisionRightPanelContext,
 } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { PivotDetail } from '@app-builder/components/Decisions/PivotDetail';
 import { ScorePanel } from '@app-builder/components/Decisions/Score';
 import { DecisionDetailTriggerObject } from '@app-builder/components/Decisions/TriggerObjectDetail';
@@ -94,9 +95,24 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   }
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['decisions']);
+  const { decision } = useLoaderData<typeof loader>();
+
+  return (
+    <div className="flex items-center gap-4">
+      <span className="line-clamp-1 text-start">{t('decisions:decision')}</span>
+      <CopyToClipboardButton toCopy={decision.id}>
+        <span className="text-s line-clamp-1 max-w-40 font-normal">
+          <span className="font-medium">ID</span> {decision.id}
+        </span>
+      </CopyToClipboardButton>
+    </div>
+  );
+};
+
 export default function DecisionPage() {
   const { decision, pivots, astRuleData } = useLoaderData<typeof loader>();
-  const { t } = useTranslation(decisionsI18n);
 
   const pivotValues = R.pipe(
     decision.pivotValues,
@@ -119,18 +135,8 @@ export default function DecisionPage() {
   return (
     <DecisionRightPanel.Root>
       <Page.Main>
-        <Page.Header className="justify-between gap-8">
-          <div className="flex flex-row items-center gap-4">
-            <Page.BackButton />
-            <span className="line-clamp-1 text-start">
-              {t('decisions:decision')}
-            </span>
-            <CopyToClipboardButton toCopy={decision.id}>
-              <span className="text-s line-clamp-1 max-w-40 font-normal">
-                <span className="font-medium">ID</span> {decision.id}
-              </span>
-            </CopyToClipboardButton>
-          </div>
+        <Page.Header className="justify-between">
+          <BreadCrumbs />
           {!decision.case ? <AddToCase decisionIds={[decision.id]} /> : null}
         </Page.Header>
         <Page.Container>
diff --git a/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx b/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx
index 6352fbfa2..4589a1c92 100644
--- a/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx
+++ b/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx
@@ -14,6 +14,7 @@ import {
   useDecisionRightPanelContext,
   useSelectedDecisionIds,
 } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { decisionFilterNames } from '@app-builder/components/Decisions/Filters/filters';
 import { FiltersButton } from '@app-builder/components/Filters';
 import { useCursorPaginatedFetcher } from '@app-builder/hooks/useCursorPaginatedFetcher';
@@ -118,7 +119,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 }
 
 export default function Decisions() {
-  const { t } = useTranslation(handle.i18n);
   const {
     decisionsData: initialDecisionsData,
     filters,
@@ -173,8 +173,7 @@ export default function Decisions() {
     <DecisionRightPanel.Root>
       <Page.Main>
         <Page.Header>
-          <Icon icon="decision" className="me-2 size-6" />
-          {t('navigation:decisions')}
+          <BreadCrumbs />
         </Page.Header>
 
         <Page.Container>
diff --git a/packages/app-builder/src/routes/_builder+/decisions+/_layout.tsx b/packages/app-builder/src/routes/_builder+/decisions+/_layout.tsx
new file mode 100644
index 000000000..a77e52236
--- /dev/null
+++ b/packages/app-builder/src/routes/_builder+/decisions+/_layout.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from '@remix-run/react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'ui-icons';
+
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="decision" className="me-2 size-6" />
+      {t('navigation:decisions')}
+    </div>
+  );
+};
+
+export const DecisionLayout = () => {
+  return <Outlet />;
+};
diff --git a/packages/app-builder/src/routes/_builder+/lists+/$listId.tsx b/packages/app-builder/src/routes/_builder+/lists+/$listId.tsx
index b25e37668..cf1f76a74 100644
--- a/packages/app-builder/src/routes/_builder+/lists+/$listId.tsx
+++ b/packages/app-builder/src/routes/_builder+/lists+/$listId.tsx
@@ -1,4 +1,5 @@
 import { ErrorComponent, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { LoadingIcon } from '@app-builder/components/Spinner';
 import { DeleteList } from '@app-builder/routes/ressources+/lists+/delete';
 import { EditList } from '@app-builder/routes/ressources+/lists+/edit';
@@ -79,6 +80,12 @@ type CustomListValue = {
 
 const columnHelper = createColumnHelper<CustomListValue>();
 
+export const BreadCrumb = () => {
+  const { customList } = useLoaderData<typeof loader>();
+
+  return <span className="line-clamp-2 text-start">{customList.name}</span>;
+};
+
 export default function Lists() {
   const { customList, listFeatureAccess } = useLoaderData<typeof loader>();
   const listValues = customList.values ?? [];
@@ -137,17 +144,14 @@ export default function Lists() {
   return (
     <Page.Main>
       <Page.Header className="justify-between">
-        <div className="flex w-full flex-row items-center gap-4">
-          <Page.BackButton />
-          <span className="line-clamp-2 text-start">{customList.name}</span>
-          {listFeatureAccess.isEditListAvailable ? (
-            <EditList
-              listId={customList.id}
-              name={customList.name}
-              description={customList.description}
-            />
-          ) : null}
-        </div>
+        <BreadCrumbs />
+        {listFeatureAccess.isEditListAvailable ? (
+          <EditList
+            listId={customList.id}
+            name={customList.name}
+            description={customList.description}
+          />
+        ) : null}
       </Page.Header>
       <Page.Container>
         {customList.description ? (
diff --git a/packages/app-builder/src/routes/_builder+/lists+/_index.tsx b/packages/app-builder/src/routes/_builder+/lists+/_index.tsx
index ebaad435c..5467910df 100644
--- a/packages/app-builder/src/routes/_builder+/lists+/_index.tsx
+++ b/packages/app-builder/src/routes/_builder+/lists+/_index.tsx
@@ -1,4 +1,5 @@
 import { ErrorComponent, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { type CustomList } from '@app-builder/models/custom-list';
 import { CreateList } from '@app-builder/routes/ressources+/lists+/create';
 import { isCreateListAvailable } from '@app-builder/services/feature-access';
@@ -17,7 +18,6 @@ import { type Namespace } from 'i18next';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Table, useVirtualTable } from 'ui-design-system';
-import { Icon } from 'ui-icons';
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const { authService } = serverServices;
@@ -82,8 +82,7 @@ export default function ListsPage() {
   return (
     <Page.Main>
       <Page.Header>
-        <Icon icon="lists" className="me-2 size-6" />
-        {t('navigation:lists')}
+        <BreadCrumbs />
       </Page.Header>
       <Page.Container>
         <Page.Content className="max-w-screen-xl">
diff --git a/packages/app-builder/src/routes/_builder+/lists+/_layout.tsx b/packages/app-builder/src/routes/_builder+/lists+/_layout.tsx
new file mode 100644
index 000000000..32e2d62a8
--- /dev/null
+++ b/packages/app-builder/src/routes/_builder+/lists+/_layout.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from '@remix-run/react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'ui-icons';
+
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="lists" className="me-2 size-6" />
+      {t('navigation:lists')}
+    </div>
+  );
+};
+
+export default function ListsLayout() {
+  return <Outlet />;
+}
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/_layout.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/_layout.tsx
index a2371eb0e..021432004 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/_layout.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/_layout.tsx
@@ -1,4 +1,5 @@
 import { ErrorComponent } from '@app-builder/components';
+import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import { adaptScenarioIterationWithType } from '@app-builder/models/scenario-iteration';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute, type RouteID } from '@app-builder/utils/routes';
@@ -49,9 +50,21 @@ export function useCurrentScenario() {
   return currentScenario;
 }
 
+export const BreadCrumb = () => {
+  const currentScenario = useCurrentScenario();
+
+  return (
+    <div className="flex flex-row items-center gap-4">
+      <p className="line-clamp-2 text-start">{currentScenario.name}</p>
+      <TriggerObjectTag>{currentScenario.triggerObjectType}</TriggerObjectTag>
+    </div>
+  );
+};
+
 export default function CurrentScenarioLayout() {
   return <Outlet />;
 }
+
 export function ErrorBoundary() {
   const error = useRouteError();
   captureRemixErrorBoundaryError(error);
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
index 5505cb48a..474a573f3 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/home.tsx
@@ -1,4 +1,5 @@
 import { CopyToClipboardButton } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { CalloutV2 } from '@app-builder/components/Callout';
 import { ExternalLink } from '@app-builder/components/ExternalLink';
 import { setToastMessage } from '@app-builder/components/MarbleToaster';
@@ -10,7 +11,6 @@ import {
   ScenarioIterationMenu,
 } from '@app-builder/components/Scenario/Iteration/ScenarioIterationMenu';
 import { TestRunNudge } from '@app-builder/components/Scenario/TestRun/TestRunNudge';
-import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import { WorkflowNudge } from '@app-builder/components/Scenario/Workflow/WorkflowNudge';
 import { Spinner } from '@app-builder/components/Spinner';
 import { type ScheduledExecution } from '@app-builder/models/decision';
@@ -148,36 +148,28 @@ export default function ScenarioHome() {
 
   return (
     <Page.Main>
-      <Page.Header className="justify-between gap-4">
-        <div className="flex w-full flex-row items-center justify-between gap-4">
-          <div className="flex flex-row items-center gap-4">
-            <Page.BackLink to={getRoute('/scenarios/')} />
-            <p className="line-clamp-2 text-start">{currentScenario.name}</p>
-            <TriggerObjectTag>
-              {currentScenario.triggerObjectType}
-            </TriggerObjectTag>
-            {featureAccess.isEditScenarioAvailable ? (
-              <div className="flex flex-row gap-4">
-                <UpdateScenario
-                  defaultValue={{
-                    name: currentScenario.name,
-                    scenarioId: currentScenario.id,
-                    description: currentScenario.description,
-                  }}
-                >
-                  <Button
-                    variant="secondary"
-                    className="isolate h-10 w-fit"
-                    disabled={!hydrated}
-                  >
-                    <Icon icon="edit-square" className="size-6" />
-                    <p>{t('scenarios:update_scenario.title')}</p>
-                  </Button>
-                </UpdateScenario>
-              </div>
-            ) : null}
+      <Page.Header className="justify-between">
+        <BreadCrumbs />
+        {featureAccess.isEditScenarioAvailable ? (
+          <div className="flex flex-row gap-4">
+            <UpdateScenario
+              defaultValue={{
+                name: currentScenario.name,
+                scenarioId: currentScenario.id,
+                description: currentScenario.description,
+              }}
+            >
+              <Button
+                variant="secondary"
+                className="isolate h-10 w-fit"
+                disabled={!hydrated}
+              >
+                <Icon icon="edit-square" className="size-6" />
+                <p>{t('scenarios:update_scenario.title')}</p>
+              </Button>
+            </UpdateScenario>
           </div>
-        </div>
+        ) : null}
       </Page.Header>
       <Page.Container>
         {currentScenario.description ? (
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout.tsx
index 425ca5bf3..5b668f1c3 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout.tsx
@@ -1,11 +1,11 @@
 import { navigationI18n, Page, TabLink } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { CornerPing } from '@app-builder/components/Ping';
 import {
   getFormattedLive,
   getFormattedVersion,
   ScenarioIterationMenu,
 } from '@app-builder/components/Scenario/Iteration/ScenarioIterationMenu';
-import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import { type ScenarioIterationWithType } from '@app-builder/models/scenario-iteration';
 import {
   useCurrentScenario,
@@ -75,6 +75,26 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   });
 }
 
+export const BreadCrumb = () => {
+  const scenarioIterations = useScenarioIterations();
+  const iterationId = useParam('iterationId');
+
+  const currentIteration = React.useMemo(() => {
+    const currentIteration = scenarioIterations.find(
+      ({ id }) => id === iterationId,
+    );
+    invariant(currentIteration, 'currentIteration is required');
+    return currentIteration;
+  }, [iterationId, scenarioIterations]);
+
+  return (
+    <VersionSelect
+      currentIteration={currentIteration}
+      scenarioIterations={scenarioIterations}
+    />
+  );
+};
+
 export default function ScenarioEditLayout() {
   const { t } = useTranslation(handle.i18n);
   const currentScenario = useCurrentScenario();
@@ -107,19 +127,8 @@ export default function ScenarioEditLayout() {
     <Page.Main>
       <Page.Header className="justify-between gap-4">
         <div className="flex flex-row items-center gap-4">
-          <Page.BackLink
-            to={getRoute('/scenarios/:scenarioId/home', {
-              scenarioId: fromUUID(currentScenario.id),
-            })}
-          />
-          <p className="line-clamp-2 text-start">{currentScenario.name}</p>
-          <TriggerObjectTag>
-            {currentScenario.triggerObjectType}
-          </TriggerObjectTag>
-          <VersionSelect
-            currentIteration={currentIteration}
-            scenarioIterations={scenarioIterations}
-          />
+          <BreadCrumbs />
+
           {withEditTag ? (
             <Tag size="big" border="square">
               {t('common:edit')}
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/scheduled-executions.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/scheduled-executions.tsx
index 378d06814..503e6fedd 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/scheduled-executions.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/scheduled-executions.tsx
@@ -1,21 +1,27 @@
 import { ErrorComponent, Page, scenarioI18n } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { ScheduledExecutionsList } from '@app-builder/components/Scenario/ScheduledExecutionsList';
-import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute } from '@app-builder/utils/routes';
-import { fromParams, fromUUID } from '@app-builder/utils/short-uuid';
+import { fromParams } from '@app-builder/utils/short-uuid';
 import { json, type LoaderFunctionArgs } from '@remix-run/node';
 import { useLoaderData, useRouteError } from '@remix-run/react';
 import { captureRemixErrorBoundaryError } from '@sentry/remix';
 import { type Namespace } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import { useCurrentScenario } from './_layout';
-
 export const handle = {
   i18n: [...scenarioI18n] satisfies Namespace,
 };
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(handle.i18n);
+
+  return (
+    <p className="line-clamp-2 text-start">{t('scenarios:home.execution')}</p>
+  );
+};
+
 export async function loader({ request, params }: LoaderFunctionArgs) {
   const { authService } = serverServices;
   const { decision } = await authService.isAuthenticated(request, {
@@ -36,19 +42,10 @@ export default function ScheduledExecutions() {
   const { t } = useTranslation(handle.i18n);
   const { scheduledExecutions } = useLoaderData<typeof loader>();
 
-  const currentScenario = useCurrentScenario();
-
   return (
     <Page.Main>
       <Page.Header className="gap-4">
-        <Page.BackLink
-          to={getRoute('/scenarios/:scenarioId/home', {
-            scenarioId: fromUUID(currentScenario.id),
-          })}
-        />
-        <p className="line-clamp-2 text-start">{currentScenario.name}</p>
-
-        <TriggerObjectTag>{currentScenario.triggerObjectType}</TriggerObjectTag>
+        <BreadCrumbs />
       </Page.Header>
 
       <Page.Container>
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId+/index.tsx
similarity index 84%
rename from packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId.tsx
rename to packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId+/index.tsx
index d7bb9eb94..9181f6b83 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId+/index.tsx
@@ -1,17 +1,17 @@
-import { Page } from '@app-builder/components';
+import { CopyToClipboardButton, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { DistributionOfDecisionChart } from '@app-builder/components/Scenario/TestRun/Graphs/DistributionOfDecisionChart';
 import { FilterTransactionByDecision } from '@app-builder/components/Scenario/TestRun/Graphs/FilterTransactionByDecision';
 import { type Versions } from '@app-builder/components/Scenario/TestRun/Graphs/HamburgerGraph';
 import { DistributionOfDecisionChartSkeleton } from '@app-builder/components/Scenario/TestRun/Skeletons/DistributionOfDecicionSkeleton';
 import { FilterTransactionByDecisionSkeleton } from '@app-builder/components/Scenario/TestRun/Skeletons/FilterTransactionByDecicionSkeleton';
 import { TestRunDetails } from '@app-builder/components/Scenario/TestRun/TestRunDetails';
-import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import { adaptScenarioIterationWithType } from '@app-builder/models/scenario-iteration';
 import { CancelTestRun } from '@app-builder/routes/ressources+/scenarios+/$scenarioId+/testrun+/$testRunId+/cancel';
 import { serverServices } from '@app-builder/services/init.server';
 import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
 import { getRoute } from '@app-builder/utils/routes';
-import { fromParams, fromUUID } from '@app-builder/utils/short-uuid';
+import { fromParams } from '@app-builder/utils/short-uuid';
 import { defer, type LoaderFunctionArgs } from '@remix-run/node';
 import { Await, useLoaderData } from '@remix-run/react';
 import { Suspense, useMemo } from 'react';
@@ -20,7 +20,7 @@ import { mapToObj, pick } from 'remeda';
 import { Button } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
-import { useCurrentScenario, useScenarioIterations } from '../_layout';
+import { useCurrentScenario, useScenarioIterations } from '../../_layout';
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
   const { authService } = serverServices;
@@ -36,6 +36,22 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   return defer({ run, decisionsPromise, rulesPromise });
 }
 
+export function BreadCrumb() {
+  const { run } = useLoaderData<typeof loader>();
+  const { t } = useTranslation(['scenarios']);
+
+  return (
+    <div className="flex items-center gap-4">
+      <p className="line-clamp-2 text-start">{t('scenarios:home.testrun')}</p>
+      <CopyToClipboardButton toCopy={run.id}>
+        <span className="text-s line-clamp-1 max-w-40 font-normal">
+          <span className="font-medium">ID</span> {run.id}
+        </span>
+      </CopyToClipboardButton>
+    </div>
+  );
+}
+
 export default function TestRun() {
   const { run, decisionsPromise, rulesPromise } =
     useLoaderData<typeof loader>();
@@ -78,14 +94,8 @@ export default function TestRun() {
 
   return (
     <Page.Main>
-      <Page.Header className="gap-4">
-        <Page.BackLink
-          to={getRoute('/scenarios/:scenarioId/test-run/', {
-            scenarioId: fromUUID(currentScenario.id),
-          })}
-        />
-        <p className="line-clamp-2 text-start">{currentScenario.name}</p>
-        <TriggerObjectTag>{currentScenario.triggerObjectType}</TriggerObjectTag>
+      <Page.Header className="justify-between">
+        <BreadCrumbs />
         {run.status === 'up' ? (
           <CancelTestRun testRunId={run.id}>
             <Button
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout.tsx
new file mode 100644
index 000000000..579405a69
--- /dev/null
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout.tsx
@@ -0,0 +1,17 @@
+import { Outlet } from '@remix-run/react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['scenarios']);
+
+  return (
+    <div className={clsx('flex flex-row items-center gap-4')}>
+      <p className="line-clamp-2 text-start">{t('scenarios:testrun.home')}</p>
+    </div>
+  );
+};
+
+export const TestRunLayout = () => {
+  return <Outlet />;
+};
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/index.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/index.tsx
index bd545f239..d9630e785 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/index.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/test-run+/index.tsx
@@ -1,4 +1,5 @@
 import { ErrorComponent, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { FiltersButton } from '@app-builder/components/Filters';
 import {
   type TestRunsFilters,
@@ -8,7 +9,6 @@ import {
 } from '@app-builder/components/Scenario/TestRun/Filters';
 import { testRunsFilterNames } from '@app-builder/components/Scenario/TestRun/Filters/filters';
 import { TestRunSelector } from '@app-builder/components/Scenario/TestRun/TestRunSelector';
-import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import {
   isForbiddenHttpError,
   isNotFoundHttpError,
@@ -19,7 +19,7 @@ import { CreateTestRun } from '@app-builder/routes/ressources+/scenarios+/$scena
 import { serverServices } from '@app-builder/services/init.server';
 import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
 import { getRoute } from '@app-builder/utils/routes';
-import { fromParams, fromUUID } from '@app-builder/utils/short-uuid';
+import { fromParams } from '@app-builder/utils/short-uuid';
 import { json, type LoaderFunctionArgs, redirect } from '@remix-run/node';
 import { useLoaderData, useRouteError } from '@remix-run/react';
 import { captureRemixErrorBoundaryError } from '@sentry/remix';
@@ -114,13 +114,7 @@ export default function TestRuns() {
   return (
     <Page.Main>
       <Page.Header className="gap-4">
-        <Page.BackLink
-          to={getRoute('/scenarios/:scenarioId/home', {
-            scenarioId: fromUUID(currentScenario.id),
-          })}
-        />
-        <p className="line-clamp-2 text-start">{currentScenario.name}</p>
-        <TriggerObjectTag>{currentScenario.triggerObjectType}</TriggerObjectTag>
+        <BreadCrumbs />
       </Page.Header>
 
       <Page.Container>
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/workflow.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/workflow.tsx
index 6318979b3..459ef87d9 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/workflow.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/$scenarioId+/workflow.tsx
@@ -1,6 +1,6 @@
 import { ErrorComponent, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { setToastMessage } from '@app-builder/components/MarbleToaster';
-import { TriggerObjectTag } from '@app-builder/components/Scenario/TriggerObjectTag';
 import { DetailPanel } from '@app-builder/components/Scenario/Workflow/DetailPanel/DetailPanel';
 import {
   adaptScenarioUpdateWorkflowInput,
@@ -33,6 +33,7 @@ import {
 import { useFetcher, useLoaderData, useRouteError } from '@remix-run/react';
 import { captureRemixErrorBoundaryError } from '@sentry/remix';
 import { type Namespace } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { useCurrentScenario } from './_layout';
 
@@ -164,6 +165,14 @@ export async function action({ request, params }: LoaderFunctionArgs) {
   );
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['scenarios']);
+
+  return (
+    <p className="line-clamp-2 text-start">{t('scenarios:home.workflow')}</p>
+  );
+};
+
 export default function Workflow() {
   const {
     scenarios,
@@ -198,14 +207,7 @@ export default function Workflow() {
   return (
     <Page.Main>
       <Page.Header className="gap-4">
-        <Page.BackLink
-          to={getRoute('/scenarios/:scenarioId/home', {
-            scenarioId: fromUUID(currentScenario.id),
-          })}
-        />
-        <p className="line-clamp-2 text-start">{currentScenario.name}</p>
-
-        <TriggerObjectTag>{currentScenario.triggerObjectType}</TriggerObjectTag>
+        <BreadCrumbs />
       </Page.Header>
       <WorkflowProvider
         data={{
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/_index.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/_index.tsx
index e687a867d..d76d98bce 100644
--- a/packages/app-builder/src/routes/_builder+/scenarios+/_index.tsx
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/_index.tsx
@@ -1,4 +1,5 @@
 import { ErrorComponent, Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { CreateScenario } from '@app-builder/routes/ressources+/scenarios+/create';
 import { serverServices } from '@app-builder/services/init.server';
 import { getRoute } from '@app-builder/utils/routes';
@@ -33,8 +34,7 @@ export default function ScenariosPage() {
   return (
     <Page.Main>
       <Page.Header>
-        <Icon icon="scenarios" className="me-2 size-6" />
-        {t('navigation:scenarios')}
+        <BreadCrumbs />
       </Page.Header>
       <Page.Container>
         <Page.Description>
diff --git a/packages/app-builder/src/routes/_builder+/scenarios+/_layout.tsx b/packages/app-builder/src/routes/_builder+/scenarios+/_layout.tsx
new file mode 100644
index 000000000..619da9fea
--- /dev/null
+++ b/packages/app-builder/src/routes/_builder+/scenarios+/_layout.tsx
@@ -0,0 +1,18 @@
+import { Outlet } from '@remix-run/react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from 'ui-icons';
+
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex flex-row items-center">
+      <Icon icon="scenarios" className="me-2 size-6" />
+      <span>{t('navigation:scenarios')}</span>
+    </div>
+  );
+};
+
+export default function ScenarioLayout() {
+  return <Outlet />;
+}
diff --git a/packages/app-builder/src/routes/_builder+/settings+/_layout.tsx b/packages/app-builder/src/routes/_builder+/settings+/_layout.tsx
index 4d46f8e78..7f92013bb 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/_layout.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/_layout.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@app-builder/components';
+import { BreadCrumbs } from '@app-builder/components/Breadcrumbs';
 import { Nudge } from '@app-builder/components/Nudge';
 import { type CurrentUser } from '@app-builder/models';
 import {
@@ -84,6 +85,17 @@ export async function loader({ request }: LoaderFunctionArgs) {
   return { sections, entitlements };
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['navigation']);
+
+  return (
+    <div className="flex items-center">
+      <Icon icon="settings" className="me-2 size-6" />
+      {t('navigation:settings')}
+    </div>
+  );
+};
+
 export default function Settings() {
   const { t } = useTranslation(handle.i18n);
   const { sections, entitlements } = useLoaderData<typeof loader>();
@@ -91,8 +103,7 @@ export default function Settings() {
   return (
     <Page.Main>
       <Page.Header>
-        <Icon icon="settings" className="me-2 size-6" />
-        {t('navigation:settings')}
+        <BreadCrumbs />
       </Page.Header>
       <div className="flex size-full flex-row overflow-hidden">
         <div className="border-e-grey-90 bg-grey-100 flex h-full w-fit min-w-[200px] flex-col overflow-y-auto border-e p-4">
diff --git a/packages/app-builder/src/routes/_builder+/settings+/api-keys.tsx b/packages/app-builder/src/routes/_builder+/settings+/api-keys.tsx
index 34e443195..5f0419f5f 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/api-keys.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/api-keys.tsx
@@ -55,6 +55,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 const columnHelper = createColumnHelper<ApiKey>();
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['settings']);
+  return <span>{t('settings:api_keys')}</span>;
+};
+
 export default function ApiKeys() {
   const { t } = useTranslation(['settings']);
   const {
diff --git a/packages/app-builder/src/routes/_builder+/settings+/inboxes._index.tsx b/packages/app-builder/src/routes/_builder+/settings+/inboxes._index.tsx
index 9d3261fbf..843794c49 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/inboxes._index.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/inboxes._index.tsx
@@ -38,6 +38,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 const columnHelper = createColumnHelper<InboxWithCasesCount>();
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['settings']);
+  return <span>{t('settings:inboxes')}</span>;
+};
+
 export default function Inboxes() {
   const { t } = useTranslation(['settings']);
   const { inboxes, isCreateInboxAvailable } = useLoaderData<typeof loader>();
diff --git a/packages/app-builder/src/routes/_builder+/settings+/scenarios.tsx b/packages/app-builder/src/routes/_builder+/settings+/scenarios.tsx
index 963aa7384..c7752d463 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/scenarios.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/scenarios.tsx
@@ -22,6 +22,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
   });
 }
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['settings']);
+  return <span>{t('settings:scenarios')}</span>;
+};
+
 export default function Users() {
   const { t } = useTranslation(['settings']);
   const { organization, user } = useLoaderData<typeof loader>();
diff --git a/packages/app-builder/src/routes/_builder+/settings+/tags.tsx b/packages/app-builder/src/routes/_builder+/settings+/tags.tsx
index fbd188672..9c7d79277 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/tags.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/tags.tsx
@@ -38,6 +38,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 const columnHelper = createColumnHelper<Tag>();
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['settings']);
+  return <span>{t('settings:tags')}</span>;
+};
+
 export default function Tags() {
   const { t } = useTranslation(['settings']);
   const {
diff --git a/packages/app-builder/src/routes/_builder+/settings+/users.tsx b/packages/app-builder/src/routes/_builder+/settings+/users.tsx
index 2af83713d..b9f9f91c7 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/users.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/users.tsx
@@ -58,6 +58,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 const columnHelper = createColumnHelper<User>();
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['settings']);
+  return <span>{t('settings:users')}</span>;
+};
+
 export default function Users() {
   const { t } = useTranslation(['settings', 'cases']);
   const {
diff --git a/packages/app-builder/src/routes/_builder+/settings+/webhooks.tsx b/packages/app-builder/src/routes/_builder+/settings+/webhooks.tsx
index de2450829..e6df3c172 100644
--- a/packages/app-builder/src/routes/_builder+/settings+/webhooks.tsx
+++ b/packages/app-builder/src/routes/_builder+/settings+/webhooks.tsx
@@ -47,6 +47,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 const columnHelper = createColumnHelper<Webhook>();
 
+export const BreadCrumb = () => {
+  const { t } = useTranslation(['settings']);
+  return <span>{t('settings:webhooks')}</span>;
+};
+
 export default function Webhooks() {
   const { t } = useTranslation(['settings']);
   const { webhooks, isCreateWebhookAvailable } = useLoaderData<typeof loader>();
diff --git a/packages/app-builder/src/utils/routes/routes.ts b/packages/app-builder/src/utils/routes/routes.ts
index d39e96f1d..d6f5ba030 100644
--- a/packages/app-builder/src/utils/routes/routes.ts
+++ b/packages/app-builder/src/utils/routes/routes.ts
@@ -50,47 +50,53 @@ export const routes = [
             "file": "routes/_builder+/api.tsx"
           },
           {
-            "id": "routes/_builder+/cases+/$caseId._layout",
-            "path": "cases/:caseId",
-            "file": "routes/_builder+/cases+/$caseId._layout.tsx",
+            "id": "routes/_builder+/cases+/_layout",
+            "path": "cases",
+            "file": "routes/_builder+/cases+/_layout.tsx",
             "children": [
               {
-                "id": "routes/_builder+/cases+/$caseId._index",
-                "index": true,
-                "file": "routes/_builder+/cases+/$caseId._index.tsx"
-              },
-              {
-                "id": "routes/_builder+/cases+/$caseId.decisions",
-                "path": "decisions",
-                "file": "routes/_builder+/cases+/$caseId.decisions.tsx"
+                "id": "routes/_builder+/cases+/$caseId+/_layout",
+                "path": ":caseId",
+                "file": "routes/_builder+/cases+/$caseId+/_layout.tsx",
+                "children": [
+                  {
+                    "id": "routes/_builder+/cases+/$caseId+/_index",
+                    "index": true,
+                    "file": "routes/_builder+/cases+/$caseId+/_index.tsx"
+                  },
+                  {
+                    "id": "routes/_builder+/cases+/$caseId+/decisions",
+                    "path": "decisions",
+                    "file": "routes/_builder+/cases+/$caseId+/decisions.tsx"
+                  },
+                  {
+                    "id": "routes/_builder+/cases+/$caseId+/files",
+                    "path": "files",
+                    "file": "routes/_builder+/cases+/$caseId+/files.tsx"
+                  },
+                  {
+                    "id": "routes/_builder+/cases+/$caseId+/information",
+                    "path": "information",
+                    "file": "routes/_builder+/cases+/$caseId+/information.tsx"
+                  }
+                ]
               },
               {
-                "id": "routes/_builder+/cases+/$caseId.files",
-                "path": "files",
-                "file": "routes/_builder+/cases+/$caseId.files.tsx"
+                "id": "routes/_builder+/cases+/_index",
+                "index": true,
+                "file": "routes/_builder+/cases+/_index.tsx"
               },
               {
-                "id": "routes/_builder+/cases+/$caseId.information",
-                "path": "information",
-                "file": "routes/_builder+/cases+/$caseId.information.tsx"
-              }
-            ]
-          },
-          {
-            "id": "routes/_builder+/cases+/_index",
-            "index": true,
-            "path": "cases/",
-            "file": "routes/_builder+/cases+/_index.tsx"
-          },
-          {
-            "id": "routes/_builder+/cases+/inboxes._layout",
-            "path": "cases/inboxes",
-            "file": "routes/_builder+/cases+/inboxes._layout.tsx",
-            "children": [
-              {
-                "id": "routes/_builder+/cases+/inboxes.$inboxId",
-                "path": ":inboxId",
-                "file": "routes/_builder+/cases+/inboxes.$inboxId.tsx"
+                "id": "routes/_builder+/cases+/inboxes._layout",
+                "path": "inboxes",
+                "file": "routes/_builder+/cases+/inboxes._layout.tsx",
+                "children": [
+                  {
+                    "id": "routes/_builder+/cases+/inboxes.$inboxId",
+                    "path": ":inboxId",
+                    "file": "routes/_builder+/cases+/inboxes.$inboxId.tsx"
+                  }
+                ]
               }
             ]
           },
@@ -117,109 +123,134 @@ export const routes = [
             ]
           },
           {
-            "id": "routes/_builder+/decisions+/$decisionId",
-            "path": "decisions/:decisionId",
-            "file": "routes/_builder+/decisions+/$decisionId.tsx"
-          },
-          {
-            "id": "routes/_builder+/decisions+/_index",
-            "index": true,
-            "path": "decisions/",
-            "file": "routes/_builder+/decisions+/_index.tsx"
-          },
-          {
-            "id": "routes/_builder+/lists+/$listId",
-            "path": "lists/:listId",
-            "file": "routes/_builder+/lists+/$listId.tsx"
-          },
-          {
-            "id": "routes/_builder+/lists+/_index",
-            "index": true,
-            "path": "lists/",
-            "file": "routes/_builder+/lists+/_index.tsx"
+            "id": "routes/_builder+/decisions+/_layout",
+            "path": "decisions",
+            "file": "routes/_builder+/decisions+/_layout.tsx",
+            "children": [
+              {
+                "id": "routes/_builder+/decisions+/$decisionId",
+                "path": ":decisionId",
+                "file": "routes/_builder+/decisions+/$decisionId.tsx"
+              },
+              {
+                "id": "routes/_builder+/decisions+/_index",
+                "index": true,
+                "file": "routes/_builder+/decisions+/_index.tsx"
+              }
+            ]
           },
           {
-            "id": "routes/_builder+/scenarios+/$scenarioId+/_layout",
-            "path": "scenarios/:scenarioId",
-            "file": "routes/_builder+/scenarios+/$scenarioId+/_layout.tsx",
+            "id": "routes/_builder+/lists+/_layout",
+            "path": "lists",
+            "file": "routes/_builder+/lists+/_layout.tsx",
             "children": [
               {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/_index",
-                "index": true,
-                "file": "routes/_builder+/scenarios+/$scenarioId+/_index.tsx"
+                "id": "routes/_builder+/lists+/$listId",
+                "path": ":listId",
+                "file": "routes/_builder+/lists+/$listId.tsx"
               },
               {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/home",
-                "path": "home",
-                "file": "routes/_builder+/scenarios+/$scenarioId+/home.tsx"
-              },
+                "id": "routes/_builder+/lists+/_index",
+                "index": true,
+                "file": "routes/_builder+/lists+/_index.tsx"
+              }
+            ]
+          },
+          {
+            "id": "routes/_builder+/scenarios+/_layout",
+            "path": "scenarios",
+            "file": "routes/_builder+/scenarios+/_layout.tsx",
+            "children": [
               {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_layout",
-                "path": "i/:iterationId",
-                "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_layout.tsx",
+                "id": "routes/_builder+/scenarios+/$scenarioId+/_layout",
+                "path": ":scenarioId",
+                "file": "routes/_builder+/scenarios+/$scenarioId+/_layout.tsx",
                 "children": [
                   {
-                    "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout",
-                    "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout.tsx",
+                    "id": "routes/_builder+/scenarios+/$scenarioId+/_index",
+                    "index": true,
+                    "file": "routes/_builder+/scenarios+/$scenarioId+/_index.tsx"
+                  },
+                  {
+                    "id": "routes/_builder+/scenarios+/$scenarioId+/home",
+                    "path": "home",
+                    "file": "routes/_builder+/scenarios+/$scenarioId+/home.tsx"
+                  },
+                  {
+                    "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_layout",
+                    "path": "i/:iterationId",
+                    "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_layout.tsx",
                     "children": [
                       {
-                        "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_index",
-                        "index": true,
-                        "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_index.tsx"
+                        "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout",
+                        "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_layout.tsx",
+                        "children": [
+                          {
+                            "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_index",
+                            "index": true,
+                            "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/_index.tsx"
+                          },
+                          {
+                            "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision",
+                            "path": "decision",
+                            "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision.tsx"
+                          },
+                          {
+                            "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules",
+                            "path": "rules",
+                            "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx"
+                          },
+                          {
+                            "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/trigger",
+                            "path": "trigger",
+                            "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/trigger.tsx"
+                          }
+                        ]
                       },
                       {
-                        "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision",
-                        "path": "decision",
-                        "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/decision.tsx"
-                      },
+                        "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId",
+                        "path": "rules/:ruleId",
+                        "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId.tsx"
+                      }
+                    ]
+                  },
+                  {
+                    "id": "routes/_builder+/scenarios+/$scenarioId+/scheduled-executions",
+                    "path": "scheduled-executions",
+                    "file": "routes/_builder+/scenarios+/$scenarioId+/scheduled-executions.tsx"
+                  },
+                  {
+                    "id": "routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout",
+                    "path": "test-run",
+                    "file": "routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout.tsx",
+                    "children": [
                       {
-                        "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules",
-                        "path": "rules",
-                        "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx"
+                        "id": "routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId+/index",
+                        "index": true,
+                        "path": ":testRunId/",
+                        "file": "routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId+/index.tsx"
                       },
                       {
-                        "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/trigger",
-                        "path": "trigger",
-                        "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/trigger.tsx"
+                        "id": "routes/_builder+/scenarios+/$scenarioId+/test-run+/index",
+                        "index": true,
+                        "file": "routes/_builder+/scenarios+/$scenarioId+/test-run+/index.tsx"
                       }
                     ]
                   },
                   {
-                    "id": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId",
-                    "path": "rules/:ruleId",
-                    "file": "routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId.tsx"
+                    "id": "routes/_builder+/scenarios+/$scenarioId+/workflow",
+                    "path": "workflow",
+                    "file": "routes/_builder+/scenarios+/$scenarioId+/workflow.tsx"
                   }
                 ]
               },
               {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/scheduled-executions",
-                "path": "scheduled-executions",
-                "file": "routes/_builder+/scenarios+/$scenarioId+/scheduled-executions.tsx"
-              },
-              {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId",
-                "path": "test-run/:testRunId",
-                "file": "routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId.tsx"
-              },
-              {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/test-run+/index",
+                "id": "routes/_builder+/scenarios+/_index",
                 "index": true,
-                "path": "test-run/",
-                "file": "routes/_builder+/scenarios+/$scenarioId+/test-run+/index.tsx"
-              },
-              {
-                "id": "routes/_builder+/scenarios+/$scenarioId+/workflow",
-                "path": "workflow",
-                "file": "routes/_builder+/scenarios+/$scenarioId+/workflow.tsx"
+                "file": "routes/_builder+/scenarios+/_index.tsx"
               }
             ]
           },
-          {
-            "id": "routes/_builder+/scenarios+/_index",
-            "index": true,
-            "path": "scenarios/",
-            "file": "routes/_builder+/scenarios+/_index.tsx"
-          },
           {
             "id": "routes/_builder+/settings+/_layout",
             "path": "settings",
diff --git a/packages/app-builder/src/utils/routes/types.ts b/packages/app-builder/src/utils/routes/types.ts
index 0c1e962c5..bc3680ea2 100644
--- a/packages/app-builder/src/utils/routes/types.ts
+++ b/packages/app-builder/src/utils/routes/types.ts
@@ -7,20 +7,21 @@ export type RoutePath =
   | '/sign-up'
   | '/analytics'
   | '/api'
+  | '/cases'
   | '/cases/:caseId'
   | '/cases/:caseId/decisions'
   | '/cases/:caseId/files'
   | '/cases/:caseId/information'
-  | '/cases/'
   | '/cases/inboxes'
   | '/cases/inboxes/:inboxId'
   | '/data'
   | '/data/list'
   | '/data/schema'
+  | '/decisions'
   | '/decisions/:decisionId'
-  | '/decisions/'
+  | '/lists'
   | '/lists/:listId'
-  | '/lists/'
+  | '/scenarios'
   | '/scenarios/:scenarioId'
   | '/scenarios/:scenarioId/home'
   | '/scenarios/:scenarioId/i/:iterationId'
@@ -29,10 +30,9 @@ export type RoutePath =
   | '/scenarios/:scenarioId/i/:iterationId/trigger'
   | '/scenarios/:scenarioId/i/:iterationId/rules/:ruleId'
   | '/scenarios/:scenarioId/scheduled-executions'
-  | '/scenarios/:scenarioId/test-run/:testRunId'
-  | '/scenarios/:scenarioId/test-run/'
+  | '/scenarios/:scenarioId/test-run'
+  | '/scenarios/:scenarioId/test-run/:testRunId/'
   | '/scenarios/:scenarioId/workflow'
-  | '/scenarios/'
   | '/settings'
   | '/settings/api-keys'
   | '/settings/inboxes/:inboxId'
@@ -128,11 +128,12 @@ export type RouteID =
   | 'routes/_builder+/_layout'
   | 'routes/_builder+/analytics'
   | 'routes/_builder+/api'
-  | 'routes/_builder+/cases+/$caseId._layout'
-  | 'routes/_builder+/cases+/$caseId._index'
-  | 'routes/_builder+/cases+/$caseId.decisions'
-  | 'routes/_builder+/cases+/$caseId.files'
-  | 'routes/_builder+/cases+/$caseId.information'
+  | 'routes/_builder+/cases+/_layout'
+  | 'routes/_builder+/cases+/$caseId+/_layout'
+  | 'routes/_builder+/cases+/$caseId+/_index'
+  | 'routes/_builder+/cases+/$caseId+/decisions'
+  | 'routes/_builder+/cases+/$caseId+/files'
+  | 'routes/_builder+/cases+/$caseId+/information'
   | 'routes/_builder+/cases+/_index'
   | 'routes/_builder+/cases+/inboxes._layout'
   | 'routes/_builder+/cases+/inboxes.$inboxId'
@@ -140,10 +141,13 @@ export type RouteID =
   | 'routes/_builder+/data+/_index'
   | 'routes/_builder+/data+/list'
   | 'routes/_builder+/data+/schema'
+  | 'routes/_builder+/decisions+/_layout'
   | 'routes/_builder+/decisions+/$decisionId'
   | 'routes/_builder+/decisions+/_index'
+  | 'routes/_builder+/lists+/_layout'
   | 'routes/_builder+/lists+/$listId'
   | 'routes/_builder+/lists+/_index'
+  | 'routes/_builder+/scenarios+/_layout'
   | 'routes/_builder+/scenarios+/$scenarioId+/_layout'
   | 'routes/_builder+/scenarios+/$scenarioId+/_index'
   | 'routes/_builder+/scenarios+/$scenarioId+/home'
@@ -155,7 +159,8 @@ export type RouteID =
   | 'routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/trigger'
   | 'routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/rules.$ruleId'
   | 'routes/_builder+/scenarios+/$scenarioId+/scheduled-executions'
-  | 'routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId'
+  | 'routes/_builder+/scenarios+/$scenarioId+/test-run+/_layout'
+  | 'routes/_builder+/scenarios+/$scenarioId+/test-run+/$testRunId+/index'
   | 'routes/_builder+/scenarios+/$scenarioId+/test-run+/index'
   | 'routes/_builder+/scenarios+/$scenarioId+/workflow'
   | 'routes/_builder+/scenarios+/_index'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77c68993e..4c238340b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,6 +130,9 @@ importers:
       '@sentry/remix':
         specifier: ^8.34.0
         version: 8.34.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.53.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.27.0)(@remix-run/node@2.15.1(typescript@5.6.3))(@remix-run/react@2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react@18.3.1)
+      '@swan-io/boxed':
+        specifier: ^3.2.0
+        version: 3.2.0(typescript@5.6.3)
       '@tanstack/react-table':
         specifier: ^8.20.5
         version: 8.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3127,6 +3130,14 @@ packages:
   '@swagger-api/apidom-reference@1.0.0-alpha.9':
     resolution: {integrity: sha512-KQ6wB5KplqdSsjxdA8BaQulj5zlF5VBCd5KP3RN/9vvixgsD/gyrVY59nisdzmPTqiL6yjhk612eQ96MgG8KiA==}
 
+  '@swan-io/boxed@3.2.0':
+    resolution: {integrity: sha512-wk6gSWjZ7nj619ifwyLFZN+B0mjpsXyfroT97ByFqvi5Ywx9nLWz7cEvStTNGIh1oAxKxGtGQLbs9dFGmtypNA==}
+    peerDependencies:
+      typescript: '>=5.0.0'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@tailwindcss/aspect-ratio@0.4.0':
     resolution: {integrity: sha512-WJu0I4PpqNPuutpaA9zDUq2JXR+lorZ7PbLcKNLmb6GL9/HLfC7w3CRsMhJF4BbYd/lkY6CfXOvkYpuGnZfkpQ==}
     peerDependencies:
@@ -11437,6 +11448,10 @@ snapshots:
     transitivePeerDependencies:
       - debug
 
+  '@swan-io/boxed@3.2.0(typescript@5.6.3)':
+    optionalDependencies:
+      typescript: 5.6.3
+
   '@tailwindcss/aspect-ratio@0.4.0(tailwindcss@3.1.3(postcss@8.4.47))':
     dependencies:
       tailwindcss: 3.1.3(postcss@8.4.47)