From c42ea57b97fc7ecf293c14913b9b2c35171be7ab Mon Sep 17 00:00:00 2001
From: "gitstart-app[bot]"
 <57568882+gitstart-app[bot]@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:29:00 +0200
Subject: [PATCH] New Settings Layout (#6867)

#### \
Description

- **Added "Exit Settings" Back Button**: Introduced a new back button
labeled "Exit Settings" for easy navigation back to the app content.
- **Implemented Settings Navbar Breadcrumb**: A breadcrumb navigation
bar for each settings page has been added to improve navigation within
the settings. This ensures users can easily trace their location within
the settings.
- **Persistent CTA Zone**: The Call-to-Action (CTA) zone at the top of
the page now remains visible even when the user scrolls down, preventing
unresponsive behavior and improving accessibility.
- **Page Title**: The page title has been added to each settings page
and separated from the breadcrumb, following the app's layout standards.
- we could not reproduce the Billing and CMR Migrations settings on the
app, but we updated the files according, please let's us know if is
there any way to log in with access to these pages, or if is everything
ok.
- Some breadcrumbs are not following the Figma, are following the
current app sections isntead, because we would need to change the
sidebar structure, and we should not do it on this PR

### Demo


<https://www.loom.com/share/21b20a2cd2f3471e94d61563c9901b19?sid=9dc49456-6cae-48e1-9149-8d706f00ab65>

### Refs:

#6144

Fixes #6144

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/AppNavigationDrawer.tsx        |  2 +-
 .../SettingsNavigationDrawerItems.tsx         |  2 +-
 .../components/SettingsPageContainer.tsx      |  2 +-
 .../SettingsReadDocumentationButton.tsx       |  2 +-
 .../src/modules/ui/layout/page/PageHeader.tsx |  2 +-
 .../src/modules/ui/layout/page/PagePanel.tsx  |  1 +
 .../ui/layout/page/SubMenuTopBarContainer.tsx | 34 +++++++-----
 .../bread-crumb/components/Breadcrumb.tsx     | 34 +++++-------
 .../components/NavigationDrawer.tsx           |  5 +-
 .../components/NavigationDrawerBackButton.tsx | 18 ++++--
 .../src/pages/settings/Releases.tsx           | 23 +++++---
 .../src/pages/settings/SettingsBilling.tsx    | 14 ++++-
 .../src/pages/settings/SettingsProfile.tsx    | 14 ++++-
 .../src/pages/settings/SettingsWorkspace.tsx  | 14 ++++-
 .../settings/SettingsWorkspaceMembers.tsx     | 14 ++++-
 .../SettingsAppearance.stories.tsx            |  2 +-
 .../settings/accounts/SettingsAccounts.tsx    | 14 ++++-
 .../accounts/SettingsAccountsCalendars.tsx    | 24 ++++----
 .../accounts/SettingsAccountsEmails.tsx       | 23 +++++---
 .../settings/accounts/SettingsNewAccount.tsx  | 23 +++++---
 .../crm-migration/SettingsCRMMigration.tsx    | 12 +++-
 .../settings/data-model/SettingsNewObject.tsx | 26 ++++-----
 .../SettingsObjectDetailPageContent.tsx       | 18 +++---
 .../data-model/SettingsObjectEdit.tsx         | 55 +++++++++----------
 .../data-model/SettingsObjectFieldEdit.tsx    | 38 +++++++------
 .../SettingsObjectNewFieldStep1.tsx           | 27 ++++-----
 .../SettingsObjectNewFieldStep2.tsx           | 44 +++++++--------
 .../data-model/SettingsObjectOverview.tsx     | 23 ++++----
 .../settings/data-model/SettingsObjects.tsx   |  9 +++
 .../SettingsObjectNewFieldStep1.stories.tsx   |  1 -
 .../developers/SettingsDevelopers.tsx         |  9 +++
 .../SettingsDevelopersApiKeysNew.stories.tsx  |  3 +-
 .../SettingsDevelopersApiKeyDetail.tsx        | 23 ++++----
 .../api-keys/SettingsDevelopersApiKeysNew.tsx | 23 +++++---
 .../SettingsDevelopersWebhookDetail.tsx       | 31 +++++++----
 .../SettingsDevelopersWebhooksNew.tsx         | 25 +++++----
 .../SettingsIntegrationDatabase.tsx           | 24 ++++----
 ...tingsIntegrationEditDatabaseConnection.tsx | 23 +++++---
 ...ttingsIntegrationNewDatabaseConnection.tsx | 32 +++++------
 ...tingsIntegrationShowDatabaseConnection.tsx | 18 +++++-
 .../integrations/SettingsIntegrations.tsx     | 14 ++++-
 .../components/SettingsAppearance.tsx         | 16 +++++-
 .../SettingsServerlessFunctionDetail.tsx      | 31 ++++++-----
 .../SettingsServerlessFunctions.tsx           | 14 +++--
 .../SettingsServerlessFunctionsNew.tsx        | 21 ++++---
 45 files changed, 504 insertions(+), 323 deletions(-)

diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
index 1dbe04bad..da636fe02 100644
--- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -42,7 +42,7 @@ export const AppNavigationDrawer = ({
   const drawerProps: NavigationDrawerProps = isSettingsDrawer
     ? {
         isSubMenu: true,
-        title: 'Settings',
+        title: 'Exit Settings',
         children: <SettingsNavigationDrawerItems />,
         footer: <GithubVersionLink />,
       }
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
index 2818f9e84..04f110207 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
@@ -96,7 +96,7 @@ export const SettingsNavigationDrawerItems = () => {
           Icon={IconUserCircle}
         />
         <SettingsNavigationDrawerItem
-          label="Appearance"
+          label="Experience"
           path={SettingsPath.Appearance}
           Icon={IconColorSwatch}
         />
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
index d33f1493d..926fa57bc 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
@@ -10,7 +10,7 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(8)};
   overflow: auto;
-  padding: ${({ theme }) => theme.spacing(8)};
+  padding: ${({ theme }) => theme.spacing(6, 8, 8)};
   width: ${({ width }) => {
     if (isDefined(width)) {
       return width + 'px';
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx
index 1ac2596a0..c4cc6432d 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx
@@ -6,7 +6,7 @@ export const SettingsReadDocumentationButton = () => {
   return (
     <Button
       title="Read documentation"
-      variant="primary"
+      variant="secondary"
       accent="default"
       size="small"
       Icon={IconBook2}
diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
index 28b15ecf8..f352d7343 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@@ -89,7 +89,7 @@ type PageHeaderProps = {
   hasNextRecord?: boolean;
   navigateToPreviousRecord?: () => void;
   navigateToNextRecord?: () => void;
-  Icon: IconComponent;
+  Icon?: IconComponent;
   children?: ReactNode;
   width?: number;
 };
diff --git a/packages/twenty-front/src/modules/ui/layout/page/PagePanel.tsx b/packages/twenty-front/src/modules/ui/layout/page/PagePanel.tsx
index 14cf6b0df..bf952c11b 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/PagePanel.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PagePanel.tsx
@@ -9,6 +9,7 @@ const StyledPanel = styled.div`
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
+  padding-bottom: ${({ theme }) => theme.spacing(10)};
 `;
 
 type PagePanelProps = {
diff --git a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
index 8df4797d8..ef767a67a 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
@@ -2,48 +2,52 @@ import styled from '@emotion/styled';
 import { JSX, ReactNode } from 'react';
 import { IconComponent } from 'twenty-ui';
 
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
 import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
-import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
+import {
+  Breadcrumb,
+  BreadcrumbProps,
+} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { PageBody } from './PageBody';
 import { PageHeader } from './PageHeader';
 
 type SubMenuTopBarContainerProps = {
   children: JSX.Element | JSX.Element[];
-  title: string | ReactNode;
+  title?: string;
   actionButton?: ReactNode;
   Icon: IconComponent;
   className?: string;
+  links: BreadcrumbProps['links'];
 };
 
-const StyledContainer = styled.div<{ isMobile: boolean }>`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(3) : 0)};
   width: 100%;
 `;
 
+const StyledTitle = styled.h3`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  line-height: 1.2;
+  margin: ${({ theme }) => theme.spacing(8, 8, 2)};
+`;
+
 export const SubMenuTopBarContainer = ({
   children,
   title,
   actionButton,
-  Icon,
   className,
+  links,
 }: SubMenuTopBarContainerProps) => {
-  const isMobile = useIsMobile();
-
   return (
-    <StyledContainer isMobile={isMobile} className={className}>
-      <PageHeader
-        title={title}
-        Icon={Icon}
-        width={OBJECT_SETTINGS_WIDTH + 4 * 8}
-      >
+    <StyledContainer className={className}>
+      <PageHeader title={<Breadcrumb links={links} />}>
         {actionButton}
       </PageHeader>
       <PageBody>
         <InformationBannerWrapper />
+        {title && <StyledTitle>{title}</StyledTitle>}
         {children}
       </PageBody>
     </StyledContainer>
diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
index 925f9cc07..a43ee3175 100644
--- a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
@@ -1,27 +1,22 @@
 import styled from '@emotion/styled';
-import { CSSProperties, Fragment, ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
-type BreadcrumbProps = {
+export type BreadcrumbProps = {
   className?: string;
-  links: {
-    href?: string;
-    styles?: CSSProperties;
-    children?: string | ReactNode;
-  }[];
+  links: { children: string | ReactNode; href?: string }[];
 };
 
 const StyledWrapper = styled.nav`
   align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
-  display: flex;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: grid;
   font-size: ${({ theme }) => theme.font.size.md};
-  // font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: ${({ theme }) => theme.spacing(2)};
-  line-height: ${({ theme }) => theme.text.lineHeight.lg};
-  white-space: nowrap;
+  grid-auto-flow: column;
+  grid-column-gap: ${({ theme }) => theme.spacing(1)};
   max-width: 100%;
   min-width: 0;
+  height: ${({ theme }) => theme.spacing(8)};
 `;
 
 const StyledLink = styled(Link)`
@@ -39,7 +34,10 @@ const StyledText = styled.span`
   white-space: nowrap;
 `;
 
-// TODO: not sure that passing styles to the link is a good idea
+const StyledDivider = styled.span`
+  width: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
   return (
     <StyledWrapper className={className}>
@@ -49,15 +47,13 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
         return (
           <Fragment key={index}>
             {link.href ? (
-              <StyledLink style={link.styles} title={text} to={link.href}>
+              <StyledLink title={text} to={link.href}>
                 {link.children}
               </StyledLink>
             ) : (
-              <StyledText style={link.styles} title={text}>
-                {link.children}
-              </StyledText>
+              <StyledText title={text}>{link.children}</StyledText>
             )}
-            {index < links.length - 1 && '/'}
+            {index < links.length - 1 && <StyledDivider>/</StyledDivider>}
           </Fragment>
         );
       })}
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
index 92b020a7d..35fb3cae0 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@@ -1,7 +1,7 @@
-import { ReactNode, useState } from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { ReactNode, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
@@ -32,7 +32,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3.5)};
+  gap: ${({ theme }) => theme.spacing(3)};
   height: 100%;
   min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
   padding: ${({ theme }) => theme.spacing(3, 2, 4)};
@@ -41,7 +41,6 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
     isSubMenu
       ? css`
           padding-right: ${theme.spacing(8)};
-          padding-top: 41px;
         `
       : ''}
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
index ae4d2144d..96490d7f0 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronLeft } from 'twenty-ui';
+import { IconX } from 'twenty-ui';
 
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
@@ -18,17 +18,22 @@ const StyledIconAndButtonContainer = styled.button`
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  font-size: ${({ theme }) => theme.font.size.lg};
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   gap: ${({ theme }) => theme.spacing(2)};
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1.5, 1)};
   width: 100%;
+  font-family: ${({ theme }) => theme.font.family};
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
+  }
 `;
 
 const StyledContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
+  height: ${({ theme }) => theme.spacing(8)};
   justify-content: space-between;
 `;
 
@@ -42,9 +47,10 @@ export const NavigationDrawerBackButton = ({
     <StyledContainer>
       <UndecoratedLink to={navigationMemorizedUrl} replace>
         <StyledIconAndButtonContainer>
-          <IconChevronLeft
+          <IconX
             size={theme.icon.size.md}
             stroke={theme.icon.stroke.lg}
+            color={theme.font.color.tertiary}
           />
           <span>{title}</span>
         </StyledIconAndButtonContainer>
diff --git a/packages/twenty-front/src/pages/settings/Releases.tsx b/packages/twenty-front/src/pages/settings/Releases.tsx
index a775bf246..60845a1b8 100644
--- a/packages/twenty-front/src/pages/settings/Releases.tsx
+++ b/packages/twenty-front/src/pages/settings/Releases.tsx
@@ -3,18 +3,16 @@ import React, { useEffect, useState } from 'react';
 import rehypeStringify from 'rehype-stringify';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import { H1Title, IconRocket } from 'twenty-ui';
+import { IconRocket } from 'twenty-ui';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
-const StyledH1Title = styled(H1Title)`
-  margin-bottom: 0;
-`;
-
 type ReleaseNote = {
   slug: string;
   date: string;
@@ -108,9 +106,20 @@ export const Releases = () => {
   }, []);
 
   return (
-    <SubMenuTopBarContainer Icon={IconRocket} title="Releases">
+    <SubMenuTopBarContainer
+      Icon={IconRocket}
+      title="Releases"
+      links={[
+        {
+          children: 'Others',
+          href: getSettingsPagePath(SettingsPath.Releases),
+        },
+        {
+          children: 'Releases',
+        },
+      ]}
+    >
       <SettingsPageContainer>
-        <StyledH1Title title="Releases" />
         <ScrollWrapper contextProviderName="releases">
           <StyledReleaseContainer>
             {releases.map((release) => (
diff --git a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
index e184ec40c..ee057b711 100644
--- a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
@@ -14,7 +14,9 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsBillingCoverImage } from '@/billing/components/SettingsBillingCoverImage';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Info } from '@/ui/display/info/components/Info';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -140,7 +142,17 @@ export const SettingsBilling = () => {
   };
 
   return (
-    <SubMenuTopBarContainer Icon={IconCurrencyDollar} title="Billing">
+    <SubMenuTopBarContainer
+      Icon={IconCurrencyDollar}
+      title="Billing"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Billing' },
+      ]}
+    >
       <SettingsPageContainer>
         <StyledH1Title title="Billing" />
         <SettingsBillingCoverImage />
diff --git a/packages/twenty-front/src/pages/settings/SettingsProfile.tsx b/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
index 07202b6fa..86b0e5637 100644
--- a/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
@@ -6,11 +6,23 @@ import { DeleteAccount } from '@/settings/profile/components/DeleteAccount';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 
 export const SettingsProfile = () => (
-  <SubMenuTopBarContainer Icon={IconUserCircle} title="Profile">
+  <SubMenuTopBarContainer
+    Icon={IconUserCircle}
+    title="Profile"
+    links={[
+      {
+        children: 'User',
+        href: getSettingsPagePath(SettingsPath.ProfilePage),
+      },
+      { children: 'Profile' },
+    ]}
+  >
     <SettingsPageContainer>
       <Section>
         <H2Title title="Picture" />
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
index 84f27a4c4..359961d24 100644
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
@@ -2,14 +2,26 @@ import { H2Title, IconSettings } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { NameField } from '@/settings/workspace/components/NameField';
 import { ToggleImpersonate } from '@/settings/workspace/components/ToggleImpersonate';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 
 export const SettingsWorkspace = () => (
-  <SubMenuTopBarContainer Icon={IconSettings} title="General">
+  <SubMenuTopBarContainer
+    Icon={IconSettings}
+    title="General"
+    links={[
+      {
+        children: 'Workspace',
+        href: getSettingsPagePath(SettingsPath.Workspace),
+      },
+      { children: 'General' },
+    ]}
+  >
     <SettingsPageContainer>
       <Section>
         <H2Title title="Picture" />
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
index 2408fd380..d0399a65c 100644
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -9,6 +9,8 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@@ -46,7 +48,17 @@ export const SettingsWorkspaceMembers = () => {
   };
 
   return (
-    <SubMenuTopBarContainer Icon={IconUsers} title="Members">
+    <SubMenuTopBarContainer
+      Icon={IconUsers}
+      title="Members"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Members' },
+      ]}
+    >
       <SettingsPageContainer>
         <Section>
           <H2Title
diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
index b6017b4f0..1aa66449a 100644
--- a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
@@ -30,7 +30,7 @@ export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findByText('Theme', undefined, {
+    await canvas.findByText('Appearance', undefined, {
       timeout: 3000,
     });
 
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
index 2a6763c8f..ed1ad2713 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
@@ -12,6 +12,8 @@ import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components
 import { SettingsAccountsConnectedAccountsListCard } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsListCard';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 
@@ -33,7 +35,17 @@ export const SettingsAccounts = () => {
   });
 
   return (
-    <SubMenuTopBarContainer Icon={IconAt} title="Account">
+    <SubMenuTopBarContainer
+      Icon={IconAt}
+      title="Account"
+      links={[
+        {
+          children: 'User',
+          href: getSettingsPagePath(SettingsPath.ProfilePage),
+        },
+        { children: 'Account' },
+      ]}
+    >
       <SettingsPageContainer>
         {loading ? (
           <SettingsAccountLoader />
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
index f2e93d234..ff4a6cd6a 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
@@ -4,24 +4,24 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { IconCalendarEvent } from 'twenty-ui';
 
 export const SettingsAccountsCalendars = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconCalendarEvent}
-      title={
-        <Breadcrumb
-          links={[
-            {
-              children: 'Accounts',
-              href: getSettingsPagePath(SettingsPath.Accounts),
-            },
-            { children: 'Calendars' },
-          ]}
-        />
-      }
+      title="Calendars"
+      links={[
+        {
+          children: 'User',
+          href: getSettingsPagePath(SettingsPath.ProfilePage),
+        },
+        {
+          children: 'Accounts',
+          href: getSettingsPagePath(SettingsPath.Accounts),
+        },
+        { children: 'Calendars' },
+      ]}
     >
       <SettingsPageContainer>
         <Section>
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
index 11af16608..6e2d574b9 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
@@ -1,21 +1,26 @@
 import { SettingsAccountsMessageChannelsContainer } from '@/settings/accounts/components/SettingsAccountsMessageChannelsContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { IconMail } from 'twenty-ui';
 
 export const SettingsAccountsEmails = () => (
   <SubMenuTopBarContainer
     Icon={IconMail}
-    title={
-      <Breadcrumb
-        links={[
-          { children: 'Accounts', href: '/settings/accounts' },
-          { children: 'Emails' },
-        ]}
-      />
-    }
+    title="Emails"
+    links={[
+      {
+        children: 'User',
+        href: getSettingsPagePath(SettingsPath.ProfilePage),
+      },
+      {
+        children: 'Accounts',
+        href: getSettingsPagePath(SettingsPath.Accounts),
+      },
+      { children: 'Emails' },
+    ]}
   >
     <SettingsPageContainer>
       <Section>
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
index 69465ef5e..440ebedb9 100644
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
@@ -1,21 +1,26 @@
 import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { IconAt } from 'twenty-ui';
 
 export const SettingsNewAccount = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconAt}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Accounts', href: '/settings/accounts' },
-            { children: `New` },
-          ]}
-        />
-      }
+      title="New Account"
+      links={[
+        {
+          children: 'User',
+          href: getSettingsPagePath(SettingsPath.ProfilePage),
+        },
+        {
+          children: 'Accounts',
+          href: getSettingsPagePath(SettingsPath.Accounts),
+        },
+        { children: `New` },
+      ]}
     >
       <SettingsPageContainer>
         <SettingsNewAccountSection />
diff --git a/packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx b/packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx
index 4b6c98be0..5794ee4ae 100644
--- a/packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx
+++ b/packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx
@@ -6,9 +6,10 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useRecoilValue } from 'recoil';
 
 const REVERT_PUBLIC_KEY = 'pk_live_a87fee8c-28c7-494f-99a3-996ff89f9918';
@@ -18,7 +19,14 @@ export const SettingsCRMMigration = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconSettings}
-      title={<Breadcrumb links={[{ children: 'Migrate' }]} />}
+      title="Migrate"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Migrate' },
+      ]}
       actionButton={<SettingsReadDocumentationButton />}
     >
       <SettingsPageContainer>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
index 0b40a39d8..f3ddd5440 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
@@ -7,7 +7,6 @@ import { z } from 'zod';
 import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
-import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
   SettingsDataModelObjectAboutForm,
@@ -20,7 +19,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 const newObjectFormSchema = settingsDataModelObjectAboutFormSchema;
 
@@ -72,17 +70,18 @@ export const SettingsNewObject = () => {
     <FormProvider {...formConfig}>
       <SubMenuTopBarContainer
         Icon={IconHierarchy2}
-        title={
-          <Breadcrumb
-            links={[
-              {
-                children: 'Objects',
-                href: settingsObjectsPagePath,
-              },
-              { children: 'New' },
-            ]}
-          />
-        }
+        title="New Object"
+        links={[
+          {
+            children: 'Workspace',
+            href: getSettingsPagePath(SettingsPath.Workspace),
+          },
+          {
+            children: 'Objects',
+            href: settingsObjectsPagePath,
+          },
+          { children: 'New' },
+        ]}
         actionButton={
           <SaveAndCancelButtons
             isSaveDisabled={!canSave}
@@ -93,7 +92,6 @@ export const SettingsNewObject = () => {
         }
       >
         <SettingsPageContainer>
-          <SettingsHeaderContainer></SettingsHeaderContainer>
           <Section>
             <H2Title
               title="About"
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
index f7ca61f50..c69c27507 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
@@ -8,7 +8,6 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import styled from '@emotion/styled';
 import { isNonEmptyArray } from '@sniptt/guards';
@@ -49,14 +48,15 @@ export const SettingsObjectDetailPageContent = ({
   return (
     <SubMenuTopBarContainer
       Icon={IconHierarchy2}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Objects', href: '/settings/objects' },
-            { children: objectMetadataItem.labelPlural },
-          ]}
-        />
-      }
+      title={objectMetadataItem.labelPlural}
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Objects', href: '/settings/objects' },
+        { children: objectMetadataItem.labelPlural },
+      ]}
     >
       <SettingsPageContainer>
         <Section>
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
index 641c6b30d..8782a7b75 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@@ -13,7 +13,6 @@ import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdat
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
-import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import {
   SettingsDataModelObjectAboutForm,
@@ -30,7 +29,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 const objectEditFormSchema = z
   .object({})
@@ -110,35 +108,36 @@ export const SettingsObjectEdit = () => {
       <FormProvider {...formConfig}>
         <SubMenuTopBarContainer
           Icon={IconHierarchy2}
-          title={
-            <Breadcrumb
-              links={[
-                {
-                  children: 'Objects',
-                  href: settingsObjectsPagePath,
-                },
-                {
-                  children: activeObjectMetadataItem.labelPlural,
-                  href: `${settingsObjectsPagePath}/${objectSlug}`,
-                },
-                { children: 'Edit' },
-              ]}
-            />
+          title="Edit"
+          links={[
+            {
+              children: 'Workspace',
+              href: getSettingsPagePath(SettingsPath.Workspace),
+            },
+            {
+              children: 'Objects',
+              href: settingsObjectsPagePath,
+            },
+            {
+              children: activeObjectMetadataItem.labelPlural,
+              href: `${settingsObjectsPagePath}/${objectSlug}`,
+            },
+            { children: 'Edit Object' },
+          ]}
+          actionButton={
+            activeObjectMetadataItem.isCustom && (
+              <SaveAndCancelButtons
+                isSaveDisabled={!canSave}
+                isCancelDisabled={isSubmitting}
+                onCancel={() =>
+                  navigate(`${settingsObjectsPagePath}/${objectSlug}`)
+                }
+                onSave={formConfig.handleSubmit(handleSave)}
+              />
+            )
           }
         >
           <SettingsPageContainer>
-            <SettingsHeaderContainer>
-              {activeObjectMetadataItem.isCustom && (
-                <SaveAndCancelButtons
-                  isSaveDisabled={!canSave}
-                  isCancelDisabled={isSubmitting}
-                  onCancel={() =>
-                    navigate(`${settingsObjectsPagePath}/${objectSlug}`)
-                  }
-                  onSave={formConfig.handleSubmit(handleSave)}
-                />
-              )}
-            </SettingsHeaderContainer>
             <Section>
               <H2Title
                 title="About"
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
index cc626497c..353beeee8 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -26,13 +26,14 @@ import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/field
 import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
 import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
 import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
 
@@ -173,23 +174,24 @@ export const SettingsObjectFieldEdit = () => {
       <FormProvider {...formConfig}>
         <SubMenuTopBarContainer
           Icon={IconHierarchy2}
-          title={
-            <Breadcrumb
-              links={[
-                {
-                  children: 'Objects',
-                  href: '/settings/objects',
-                  styles: { minWidth: 'max-content' },
-                },
-                {
-                  children: activeObjectMetadataItem.labelPlural,
-                  href: `/settings/objects/${objectSlug}`,
-                  styles: { maxWidth: '60%' },
-                },
-                { children: activeMetadataField.label },
-              ]}
-            />
-          }
+          title={activeMetadataField?.label}
+          links={[
+            {
+              children: 'Workspace',
+              href: getSettingsPagePath(SettingsPath.Workspace),
+            },
+            {
+              children: 'Objects',
+              href: '/settings/objects',
+            },
+            {
+              children: activeObjectMetadataItem.labelPlural,
+              href: `/settings/objects/${objectSlug}`,
+            },
+            {
+              children: activeMetadataField.label,
+            },
+          ]}
           actionButton={
             shouldDisplaySaveAndCancel && (
               <SaveAndCancelButtons
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
index a43c94db3..d608e7996 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@@ -9,11 +9,12 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 
 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { AppPath } from '@/types/AppPath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useRecoilState } from 'recoil';
 import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
 
@@ -86,18 +87,18 @@ export const SettingsObjectNewFieldStep1 = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconHierarchy2}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Objects', href: '/settings/objects' },
-            {
-              children: activeObjectMetadataItem.labelPlural,
-              href: `/settings/objects/${objectSlug}`,
-            },
-            { children: 'New Field' },
-          ]}
-        />
-      }
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Objects', href: '/settings/objects' },
+        {
+          children: activeObjectMetadataItem.labelPlural,
+          href: `/settings/objects/${objectSlug}`,
+        },
+        { children: 'New Field' },
+      ]}
       actionButton={
         !activeObjectMetadataItem.isRemote && (
           <SaveAndCancelButtons
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
index 449aa8aa9..b07901935 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -19,7 +19,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { View } from '@/views/types/View';
 import { ViewType } from '@/views/types/ViewType';
 import { useApolloClient } from '@apollo/client';
@@ -41,6 +40,7 @@ type SettingsDataModelNewFieldFormValues = z.infer<
 
 const StyledH1Title = styled(H1Title)`
   margin-bottom: 0;
+  padding-top: ${({ theme }) => theme.spacing(3)};
 `;
 export const SettingsObjectNewFieldStep2 = () => {
   const navigate = useNavigate();
@@ -177,30 +177,24 @@ export const SettingsObjectNewFieldStep2 = () => {
       >
         <SubMenuTopBarContainer
           Icon={IconHierarchy2}
-          title={
-            <Breadcrumb
-              links={[
-                {
-                  children: 'Objects',
-                  href: '/settings/objects',
-                  styles: { minWidth: 'max-content' },
-                },
-                {
-                  children: activeObjectMetadataItem.labelPlural,
-                  href: `/settings/objects/${objectSlug}`,
-                  styles: { maxWidth: '50%' },
-                },
-                {
-                  children: (
-                    <SettingsDataModelNewFieldBreadcrumbDropDown
-                      isConfigureStep={isConfigureStep}
-                      onBreadcrumbClick={setIsConfigureStep}
-                    />
-                  ),
-                },
-              ]}
-            />
-          }
+          links={[
+            {
+              children: 'Objects',
+              href: '/settings/objects',
+            },
+            {
+              children: activeObjectMetadataItem.labelPlural,
+              href: `/settings/objects/${objectSlug}`,
+            },
+            {
+              children: (
+                <SettingsDataModelNewFieldBreadcrumbDropDown
+                  isConfigureStep={isConfigureStep}
+                  onBreadcrumbClick={setIsConfigureStep}
+                />
+              ),
+            },
+          ]}
           actionButton={
             !activeObjectMetadataItem.isRemote && (
               <SaveAndCancelButtons
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
index a33ed73e4..6adcb2a9d 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
@@ -1,24 +1,25 @@
 import { ReactFlowProvider } from 'reactflow';
 
 import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverview';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { IconHierarchy2 } from 'twenty-ui';
 
 export const SettingsObjectOverview = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconHierarchy2}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Data model', href: '/settings/objects' },
-            {
-              children: 'Overview',
-            },
-          ]}
-        />
-      }
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Objects', href: '/settings/objects' },
+        {
+          children: 'Overview',
+        },
+      ]}
     >
       <ReactFlowProvider>
         <SettingsDataModelOverview />
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
index 8817c6f5a..c31af9513 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -145,6 +145,15 @@ export const SettingsObjects = () => {
           />
         </UndecoratedLink>
       }
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Objects',
+        },
+      ]}
     >
       <SettingsPageContainer>
         <>
diff --git a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
index d54dd9f4d..752bfcc71 100644
--- a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
@@ -30,7 +30,6 @@ export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('Settings');
     await canvas.findByText('Objects');
     await canvas.findByText('Companies');
     await canvas.findByText('Check deactivated fields');
diff --git a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
index c551fda45..4cb6cf888 100644
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
@@ -5,6 +5,8 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
 import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
 import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
@@ -21,6 +23,13 @@ export const SettingsDevelopers = () => {
       Icon={IconCode}
       title="Developers"
       actionButton={<SettingsReadDocumentationButton />}
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Developers' },
+      ]}
     >
       <SettingsPageContainer>
         <Section>
diff --git a/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx b/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
index ec5630ab8..9b13c2679 100644
--- a/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
@@ -25,8 +25,7 @@ export type Story = StoryObj<typeof SettingsDevelopersApiKeysNew>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await canvas.findByText('Settings');
-    await canvas.findByText('New API Key');
+    await canvas.findByText('New Key');
     await canvas.findByText('Name');
     await canvas.findByText('Expiration Date');
 
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
index 268bf73c3..fa1c93c17 100644
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
@@ -17,12 +17,13 @@ import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTo
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
 import { computeNewExpirationDate } from '@/settings/developers/utils/compute-new-expiration-date';
 import { formatExpiration } from '@/settings/developers/utils/format-expiration';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
 
 const StyledInfo = styled.span`
@@ -65,6 +66,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
       setApiKeyName(record.name);
     },
   });
+  const developerPath = getSettingsPagePath(SettingsPath.Developers);
 
   const deleteIntegration = async (redirect = true) => {
     await updateApiKey?.({
@@ -72,7 +74,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
       updateOneRecordInput: { revokedAt: DateTime.now().toString() },
     });
     if (redirect) {
-      navigate('/settings/developers');
+      navigate(developerPath);
     }
   };
 
@@ -122,14 +124,15 @@ export const SettingsDevelopersApiKeyDetail = () => {
       {apiKeyData?.name && (
         <SubMenuTopBarContainer
           Icon={IconCode}
-          title={
-            <Breadcrumb
-              links={[
-                { children: 'Developers', href: '/settings/developers' },
-                { children: `${apiKeyName} API Key` },
-              ]}
-            />
-          }
+          title={apiKeyData?.name}
+          links={[
+            {
+              children: 'Workspace',
+              href: getSettingsPagePath(SettingsPath.Workspace),
+            },
+            { children: 'Developers', href: developerPath },
+            { children: `${apiKeyName} API Key` },
+          ]}
         >
           <SettingsPageContainer>
             <Section>
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
index 7a2207125..5e4ebe5cf 100644
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
@@ -10,11 +10,12 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { EXPIRATION_DATES } from '@/settings/developers/constants/ExpirationDates';
 import { apiKeyTokenState } from '@/settings/developers/states/generatedApiKeyTokenState';
 import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useGenerateApiKeyTokenMutation } from '~/generated/graphql';
@@ -65,14 +66,18 @@ export const SettingsDevelopersApiKeysNew = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconCode}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Developers', href: '/settings/developers' },
-            { children: 'New API Key' },
-          ]}
-        />
-      }
+      title="New key"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Developers',
+          href: getSettingsPagePath(SettingsPath.Developers),
+        },
+        { children: 'New Key' },
+      ]}
       actionButton={
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
diff --git a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx
index 174561f6a..c18292c4c 100644
--- a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx
@@ -11,6 +11,8 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { Webhook } from '@/settings/developers/types/webhook/Webhook';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { Select } from '@/ui/input/components/Select';
 import { TextArea } from '@/ui/input/components/TextArea';
@@ -18,7 +20,6 @@ import { TextInput } from '@/ui/input/components/TextInput';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 const StyledFilterRow = styled.div`
   display: flex;
@@ -55,9 +56,11 @@ export const SettingsDevelopersWebhooksDetail = () => {
     objectNameSingular: CoreObjectNameSingular.Webhook,
   });
 
+  const developerPath = getSettingsPagePath(SettingsPath.Developers);
+
   const deleteWebhook = () => {
     deleteOneWebhook(webhookId);
-    navigate('/settings/developers');
+    navigate(developerPath);
   };
 
   const fieldTypeOptions = [
@@ -81,7 +84,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
         description: description,
       },
     });
-    navigate('/settings/developers');
+    navigate(developerPath);
   };
 
   return (
@@ -89,19 +92,23 @@ export const SettingsDevelopersWebhooksDetail = () => {
       {webhookData?.targetUrl && (
         <SubMenuTopBarContainer
           Icon={IconCode}
-          title={
-            <Breadcrumb
-              links={[
-                { children: 'Developers', href: '/settings/developers' },
-                { children: 'Webhook' },
-              ]}
-            />
-          }
+          title={webhookData.targetUrl}
+          links={[
+            {
+              children: 'Workspace',
+              href: getSettingsPagePath(SettingsPath.Workspace),
+            },
+            {
+              children: 'Developers',
+              href: developerPath,
+            },
+            { children: 'Webhook' },
+          ]}
           actionButton={
             <SaveAndCancelButtons
               isSaveDisabled={!isDirty}
               onCancel={() => {
-                navigate('/settings/developers');
+                navigate(developerPath);
               }}
               onSave={handleSave}
             />
diff --git a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx
index 499393a34..997e73754 100644
--- a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx
@@ -7,10 +7,11 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { Webhook } from '@/settings/developers/types/webhook/Webhook';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { isValidUrl } from '~/utils/url/isValidUrl';
 
 export const SettingsDevelopersWebhooksNew = () => {
@@ -49,19 +50,23 @@ export const SettingsDevelopersWebhooksNew = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconCode}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Developers', href: '/settings/developers' },
-            { children: 'New webhook' },
-          ]}
-        />
-      }
+      title="New Webhook"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Developers',
+          href: getSettingsPagePath(SettingsPath.Developers),
+        },
+        { children: 'New Webhook' },
+      ]}
       actionButton={
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
           onCancel={() => {
-            navigate('/settings/developers');
+            navigate(getSettingsPagePath(SettingsPath.Developers));
           }}
           onSave={handleSave}
         />
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
index 430848d76..2136ae1ae 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
@@ -13,7 +13,6 @@ import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsIntegrationDatabase = () => {
   const { databaseKey = '' } = useParams();
@@ -44,17 +43,18 @@ export const SettingsIntegrationDatabase = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconSettings}
-      title={
-        <Breadcrumb
-          links={[
-            {
-              children: 'Integrations',
-              href: getSettingsPagePath(SettingsPath.Integrations),
-            },
-            { children: integration.text },
-          ]}
-        />
-      }
+      title={integration.text}
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Integrations',
+          href: getSettingsPagePath(SettingsPath.Integrations),
+        },
+        { children: integration.text },
+      ]}
     >
       <SettingsPageContainer>
         <SettingsIntegrationPreview
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx
index 7600c2a89..5203f01de 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx
@@ -2,21 +2,26 @@ import { IconSettings } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationEditDatabaseConnectionContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 
 export const SettingsIntegrationEditDatabaseConnection = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconSettings}
-      title={
-        <Breadcrumb
-          links={[
-            // TODO
-            { children: 'Edit connection' },
-          ]}
-        />
-      }
+      title="Edit connection"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Integrations',
+          href: getSettingsPagePath(SettingsPath.Integrations),
+        },
+        { children: 'Edit connection' },
+      ]}
     >
       <SettingsPageContainer>
         <SettingsIntegrationEditDatabaseConnectionContainer />
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
index 4763e02e6..1440bd661 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
@@ -23,7 +23,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { CreateRemoteServerInput } from '~/generated-metadata/graphql';
 
 const createRemoteServerInputPostgresSchema =
@@ -133,21 +132,22 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconSettings}
-      title={
-        <Breadcrumb
-          links={[
-            {
-              children: 'Integrations',
-              href: settingsIntegrationsPagePath,
-            },
-            {
-              children: integration.text,
-              href: `${settingsIntegrationsPagePath}/${databaseKey}`,
-            },
-            { children: 'New' },
-          ]}
-        />
-      }
+      title="New"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Integrations',
+          href: settingsIntegrationsPagePath,
+        },
+        {
+          children: integration.text,
+          href: `${settingsIntegrationsPagePath}/${databaseKey}`,
+        },
+        { children: 'New' },
+      ]}
       actionButton={
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx
index 297c6fc76..04fe78e64 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx
@@ -2,11 +2,27 @@ import { IconSettings } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationDatabaseConnectionShowContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 
 export const SettingsIntegrationShowDatabaseConnection = () => {
   return (
-    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+    <SubMenuTopBarContainer
+      Icon={IconSettings}
+      title="Database Connection"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Integrations',
+          href: getSettingsPagePath(SettingsPath.Integrations),
+        },
+        { children: 'Database Connection' },
+      ]}
+    >
       <SettingsPageContainer>
         <SettingsIntegrationDatabaseConnectionShowContainer />
       </SettingsPageContainer>
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
index cd12fb14e..acc3c5cc6 100644
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
@@ -1,6 +1,8 @@
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationGroup } from '@/settings/integrations/components/SettingsIntegrationGroup';
 import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { IconApps } from 'twenty-ui';
 
@@ -8,7 +10,17 @@ export const SettingsIntegrations = () => {
   const integrationCategories = useSettingsIntegrationCategories();
 
   return (
-    <SubMenuTopBarContainer Icon={IconApps} title="Integrations">
+    <SubMenuTopBarContainer
+      Icon={IconApps}
+      title="Integrations"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        { children: 'Integrations' },
+      ]}
+    >
       <SettingsPageContainer>
         {integrationCategories.map((group) => (
           <SettingsIntegrationGroup key={group.key} integrationGroup={group} />
diff --git a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
index efa1036b0..f3fe094bc 100644
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
+++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
@@ -1,6 +1,8 @@
 import { H2Title, IconColorSwatch } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { ColorSchemePicker } from '@/ui/input/color-scheme/components/ColorSchemePicker';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
@@ -11,10 +13,20 @@ export const SettingsAppearance = () => {
   const { colorScheme, setColorScheme } = useColorScheme();
 
   return (
-    <SubMenuTopBarContainer Icon={IconColorSwatch} title="Appearance">
+    <SubMenuTopBarContainer
+      Icon={IconColorSwatch}
+      title="Experience"
+      links={[
+        {
+          children: 'User',
+          href: getSettingsPagePath(SettingsPath.ProfilePage),
+        },
+        { children: 'Experience' },
+      ]}
+    >
       <SettingsPageContainer>
         <Section>
-          <H2Title title="Theme" />
+          <H2Title title="Appearance" />
           <ColorSchemePicker value={colorScheme} onChange={setColorScheme} />
         </Section>
         <Section>
diff --git a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
index bc25cd57b..8358e61fa 100644
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
@@ -4,25 +4,26 @@ import { SettingsServerlessFunctionSettingsTab } from '@/settings/serverless-fun
 import { SettingsServerlessFunctionTestTab } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTab';
 import { SettingsServerlessFunctionTestTabEffect } from '@/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTestTabEffect';
 import { useExecuteOneServerlessFunction } from '@/settings/serverless-functions/hooks/useExecuteOneServerlessFunction';
+import { useGetOneServerlessFunctionSourceCode } from '@/settings/serverless-functions/hooks/useGetOneServerlessFunctionSourceCode';
+import { usePublishOneServerlessFunction } from '@/settings/serverless-functions/hooks/usePublishOneServerlessFunction';
 import { useServerlessFunctionUpdateFormState } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
 import { useUpdateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useUpdateOneServerlessFunction';
-import { usePublishOneServerlessFunction } from '@/settings/serverless-functions/hooks/usePublishOneServerlessFunction';
 import { settingsServerlessFunctionInputState } from '@/settings/serverless-functions/states/settingsServerlessFunctionInputState';
 import { settingsServerlessFunctionOutputState } from '@/settings/serverless-functions/states/settingsServerlessFunctionOutputState';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { IconCode, IconFunction, IconSettings, IconTestPipe } from 'twenty-ui';
-import { isDefined } from '~/utils/isDefined';
-import { useGetOneServerlessFunctionSourceCode } from '@/settings/serverless-functions/hooks/useGetOneServerlessFunctionSourceCode';
-import { useState } from 'react';
 import { usePreventOverlapCallback } from '~/hooks/usePreventOverlapCallback';
+import { isDefined } from '~/utils/isDefined';
 
 const TAB_LIST_COMPONENT_ID = 'serverless-function-detail';
 
@@ -204,14 +205,18 @@ export const SettingsServerlessFunctionDetail = () => {
     !loading && (
       <SubMenuTopBarContainer
         Icon={IconFunction}
-        title={
-          <Breadcrumb
-            links={[
-              { children: 'Functions', href: '/settings/functions' },
-              { children: `${formValues.name}` },
-            ]}
-          />
-        }
+        title={formValues.name}
+        links={[
+          {
+            children: 'Workspace',
+            href: getSettingsPagePath(SettingsPath.Workspace),
+          },
+          {
+            children: 'Functions',
+            href: getSettingsPagePath(SettingsPath.ServerlessFunctions),
+          },
+          { children: `${formValues.name}` },
+        ]}
       >
         <SettingsPageContainer>
           <Section>
diff --git a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
index ff44358c0..00dcabb77 100644
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
@@ -1,4 +1,3 @@
-import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsServerlessFunctionsTable } from '@/settings/serverless-functions/components/SettingsServerlessFunctionsTable';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@@ -6,7 +5,6 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { IconFunction, IconPlus } from 'twenty-ui';
 
@@ -27,11 +25,17 @@ export const SettingsServerlessFunctions = () => {
           />
         </UndecoratedLink>
       }
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Functions',
+        },
+      ]}
     >
       <SettingsPageContainer>
-        <SettingsHeaderContainer>
-          <Breadcrumb links={[{ children: 'Functions' }]} />
-        </SettingsHeaderContainer>
         <Section>
           <SettingsServerlessFunctionsTable />
         </Section>
diff --git a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx
index 2011d88a9..7fc841d07 100644
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx
@@ -1,7 +1,6 @@
 import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useNavigate } from 'react-router-dom';
 
 import { SettingsServerlessFunctionNewForm } from '@/settings/serverless-functions/components/SettingsServerlessFunctionNewForm';
@@ -81,14 +80,18 @@ export const SettingsServerlessFunctionsNew = () => {
   return (
     <SubMenuTopBarContainer
       Icon={IconFunction}
-      title={
-        <Breadcrumb
-          links={[
-            { children: 'Functions', href: '/settings/functions' },
-            { children: 'New' },
-          ]}
-        />
-      }
+      title="New Function"
+      links={[
+        {
+          children: 'Workspace',
+          href: getSettingsPagePath(SettingsPath.Workspace),
+        },
+        {
+          children: 'Functions',
+          href: getSettingsPagePath(SettingsPath.ServerlessFunctions),
+        },
+        { children: 'New' },
+      ]}
       actionButton={
         <SaveAndCancelButtons
           isSaveDisabled={!canSave}