diff --git a/front/package.json b/front/package.json
index 20cede359..ac86f5fa8 100644
--- a/front/package.json
+++ b/front/package.json
@@ -127,7 +127,7 @@
     "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
     "http-server": "^14.1.1",
     "mock-apollo-client": "^1.2.1",
-    "msw": "^1.2.1",
+    "msw": "1.2.1",
     "msw-storybook-addon": "^1.8.0",
     "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
diff --git a/front/public/mockServiceWorker.js b/front/public/mockServiceWorker.js
index 8ee70b3e4..87e0f31b8 100644
--- a/front/public/mockServiceWorker.js
+++ b/front/public/mockServiceWorker.js
@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.2).
+ * Mock Service Worker (1.2.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 928971a73..e291acad3 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,5 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+
 import { RequireAuth } from './modules/auth/components/RequireAuth';
 import { AuthCallback } from './pages/auth/AuthCallback';
 import { Login } from './pages/auth/Login';
@@ -10,37 +12,39 @@ import { SettingsProfile } from './pages/settings/SettingsProfile';
 
 export function App() {
   return (
-    <Routes>
-      <Route
-        path="*"
-        element={
-          <RequireAuth>
+    <DefaultLayout>
+      <Routes>
+        <Route
+          path="*"
+          element={
+            <RequireAuth>
+              <Routes>
+                <Route path="" element={<Navigate to="/people" replace />} />
+                <Route path="people" element={<People />} />
+                <Route path="companies" element={<Companies />} />
+                <Route path="opportunities" element={<Opportunities />} />
+              </Routes>
+            </RequireAuth>
+          }
+        />
+        <Route
+          path="auth/*"
+          element={
             <Routes>
-              <Route path="" element={<Navigate to="/people" replace />} />
-              <Route path="people" element={<People />} />
-              <Route path="companies" element={<Companies />} />
-              <Route path="opportunities" element={<Opportunities />} />
+              <Route path="callback" element={<AuthCallback />} />
+              <Route path="login" element={<Login />} />
             </Routes>
-          </RequireAuth>
-        }
-      />
-      <Route
-        path="auth/*"
-        element={
-          <Routes>
-            <Route path="callback" element={<AuthCallback />} />
-            <Route path="login" element={<Login />} />
-          </Routes>
-        }
-      />
-      <Route
-        path="settings/*"
-        element={
-          <Routes>
-            <Route path="profile" element={<SettingsProfile />} />
-          </Routes>
-        }
-      />
-    </Routes>
+          }
+        />
+        <Route
+          path="settings/*"
+          element={
+            <Routes>
+              <Route path="profile" element={<SettingsProfile />} />
+            </Routes>
+          }
+        />
+      </Routes>
+    </DefaultLayout>
   );
 }
diff --git a/front/src/AppNavbar.tsx b/front/src/AppNavbar.tsx
index f07155c4c..3b61b876e 100644
--- a/front/src/AppNavbar.tsx
+++ b/front/src/AppNavbar.tsx
@@ -1,6 +1,7 @@
-import { useMatch, useResolvedPath } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 
+import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
 import {
   IconBuildingSkyscraper,
   IconInbox,
@@ -16,51 +17,51 @@ import NavWorkspaceButton from './modules/ui/layout/navbar/NavWorkspaceButton';
 
 export function AppNavbar() {
   const theme = useTheme();
+  const currentPath = useLocation().pathname;
+
+  const shouldDiplaySubNavBar = currentPath.match(/\/settings\//g) !== null;
+
   return (
     <>
-      <NavWorkspaceButton />
-      <NavItemsContainer>
-        <NavItem
-          label="Search"
-          to="/search"
-          icon={<IconSearch size={theme.iconSizeMedium} />}
-          soon={true}
-        />
-        <NavItem
-          label="Inbox"
-          to="/inbox"
-          icon={<IconInbox size={theme.iconSizeMedium} />}
-          soon={true}
-        />
-        <NavItem
-          label="Settings"
-          to="/settings/profile"
-          icon={<IconSettings size={theme.iconSizeMedium} />}
-        />
-        <NavTitle label="Workspace" />
-        <NavItem
-          label="People"
-          to="/people"
-          icon={<IconUser size={theme.iconSizeMedium} />}
-          active={
-            !!useMatch({
-              path: useResolvedPath('/people').pathname,
-              end: true,
-            })
-          }
-        />
-        <NavItem
-          label="Companies"
-          to="/companies"
-          icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
-          active={
-            !!useMatch({
-              path: useResolvedPath('/companies').pathname,
-              end: true,
-            })
-          }
-        />
-      </NavItemsContainer>
+      {!shouldDiplaySubNavBar ? (
+        <>
+          <NavWorkspaceButton />
+          <NavItemsContainer>
+            <NavItem
+              label="Search"
+              to="/search"
+              icon={<IconSearch size={theme.iconSizeMedium} />}
+              soon={true}
+            />
+            <NavItem
+              label="Inbox"
+              to="/inbox"
+              icon={<IconInbox size={theme.iconSizeMedium} />}
+              soon={true}
+            />
+            <NavItem
+              label="Settings"
+              to="/settings/profile"
+              icon={<IconSettings size={theme.iconSizeMedium} />}
+            />
+            <NavTitle label="Workspace" />
+            <NavItem
+              label="People"
+              to="/people"
+              icon={<IconUser size={theme.iconSizeMedium} />}
+              active={currentPath === '/people'}
+            />
+            <NavItem
+              label="Companies"
+              to="/companies"
+              icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
+              active={currentPath === '/companies'}
+            />
+          </NavItemsContainer>
+        </>
+      ) : (
+        <SettingsNavbar />
+      )}
     </>
   );
 }
diff --git a/front/src/AppPage.tsx b/front/src/AppPage.tsx
deleted file mode 100644
index f633ca865..000000000
--- a/front/src/AppPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { DefaultLayout } from '@/ui/layout/DefaultLayout';
-
-import { AppNavbar } from './AppNavbar';
-
-type OwnProps = {
-  children: JSX.Element;
-};
-
-export function AppPage({ children }: OwnProps) {
-  return <DefaultLayout Navbar={AppNavbar}>{children}</DefaultLayout>;
-}
diff --git a/front/src/modules/search/components/__stories__/CommandMenu.stories.tsx b/front/src/modules/search/components/__stories__/CommandMenu.stories.tsx
index ff28e59a1..7464ae623 100644
--- a/front/src/modules/search/components/__stories__/CommandMenu.stories.tsx
+++ b/front/src/modules/search/components/__stories__/CommandMenu.stories.tsx
@@ -1,6 +1,7 @@
+import { MemoryRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { CommandMenu } from '../CommandMenu';
 
@@ -13,5 +14,9 @@ export default meta;
 type Story = StoryObj<typeof CommandMenu>;
 
 export const Default: Story = {
-  render: getRenderWrapperForPage(<CommandMenu initiallyOpen={true} />),
+  render: getRenderWrapperForComponent(
+    <MemoryRouter>
+      <CommandMenu initiallyOpen={true} />
+    </MemoryRouter>,
+  ),
 };
diff --git a/front/src/modules/settings/components/SettingsNavbar.tsx b/front/src/modules/settings/components/SettingsNavbar.tsx
index 07a040a53..c5f238cc4 100644
--- a/front/src/modules/settings/components/SettingsNavbar.tsx
+++ b/front/src/modules/settings/components/SettingsNavbar.tsx
@@ -8,16 +8,15 @@ import {
   IconSettings,
   IconUser,
 } from '@/ui/icons/index';
-import NavBackButton from '@/ui/layout/navbar//NavBackButton';
 import NavItem from '@/ui/layout/navbar/NavItem';
 import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
 import NavTitle from '@/ui/layout/navbar/NavTitle';
+import SubNavbarContainer from '@/ui/layout/navbar/sub-navbar/SubNavBarContainer';
 
 export function SettingsNavbar() {
   const theme = useTheme();
   return (
-    <>
-      <NavBackButton title="Settings" />
+    <SubNavbarContainer backButtonTitle="Settings">
       <NavItemsContainer>
         <NavTitle label="User" />
         <NavItem
@@ -64,6 +63,6 @@ export function SettingsNavbar() {
           danger={true}
         />
       </NavItemsContainer>
-    </>
+    </SubNavbarContainer>
   );
 }
diff --git a/front/src/modules/settings/components/SettingsPage.tsx b/front/src/modules/settings/components/SettingsPage.tsx
deleted file mode 100644
index 2a6e6801f..000000000
--- a/front/src/modules/settings/components/SettingsPage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { SecondaryLayout } from '@/ui/layout/SecondaryLayout';
-
-import { SettingsNavbar } from './SettingsNavbar';
-
-type OwnProps = {
-  children: JSX.Element;
-};
-
-export function SettingsPage({ children }: OwnProps) {
-  return <SecondaryLayout Navbar={SettingsNavbar}>{children}</SecondaryLayout>;
-}
diff --git a/front/src/modules/ui/layout/DefaultLayout.tsx b/front/src/modules/ui/layout/DefaultLayout.tsx
index aecdf14db..37abdd518 100644
--- a/front/src/modules/ui/layout/DefaultLayout.tsx
+++ b/front/src/modules/ui/layout/DefaultLayout.tsx
@@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { CommandMenu } from '@/search/components/CommandMenu';
+import { AppNavbar } from '~/AppNavbar';
 
 import { NavbarContainer } from './navbar/NavbarContainer';
 import { isNavbarOpenedState } from './states/isNavbarOpenedState';
@@ -25,9 +26,8 @@ const MainContainer = styled.div`
   overflow: hidden;
   width: ${() =>
     useRecoilValue(isNavbarOpenedState)
-      ? `(calc(100% -  ${NAVBAR_WIDTH})`
+      ? `calc(100% - ${NAVBAR_WIDTH})`
       : '100%'};
-
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: ${() => (useRecoilValue(isNavbarOpenedState) ? '0' : '100%')};
   }
@@ -35,10 +35,9 @@ const MainContainer = styled.div`
 
 type OwnProps = {
   children: JSX.Element;
-  Navbar: () => JSX.Element;
 };
 
-export function DefaultLayout({ children, Navbar }: OwnProps) {
+export function DefaultLayout({ children }: OwnProps) {
   const currentUser = useRecoilState(currentUserState);
   const userIsAuthenticated = !!currentUser;
 
@@ -48,7 +47,7 @@ export function DefaultLayout({ children, Navbar }: OwnProps) {
         <>
           <CommandMenu />
           <NavbarContainer>
-            <Navbar />
+            <AppNavbar />
           </NavbarContainer>
           <MainContainer>{children}</MainContainer>
         </>
diff --git a/front/src/modules/ui/layout/Panel.tsx b/front/src/modules/ui/layout/Panel.tsx
index 52a06cda1..d953d2fcf 100644
--- a/front/src/modules/ui/layout/Panel.tsx
+++ b/front/src/modules/ui/layout/Panel.tsx
@@ -6,6 +6,7 @@ const StyledPanel = styled.div`
   border: 1px solid ${(props) => props.theme.primaryBorder};
   border-radius: 8px;
   display: flex;
+  flex-direction: row;
   width: 100%;
 `;
 
diff --git a/front/src/modules/ui/layout/SecondaryLayout.tsx b/front/src/modules/ui/layout/SecondaryLayout.tsx
deleted file mode 100644
index e6d36957f..000000000
--- a/front/src/modules/ui/layout/SecondaryLayout.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import styled from '@emotion/styled';
-
-import { NavbarContainer } from './navbar/NavbarContainer';
-import { MOBILE_VIEWPORT } from './styles/themes';
-
-type OwnProps = {
-  children: JSX.Element;
-  Navbar: () => JSX.Element;
-};
-
-const StyledLayout = styled.div`
-  background: ${(props) => props.theme.noisyBackground};
-  display: flex;
-  flex-direction: row;
-  height: 100vh;
-  position: relative;
-  width: 100vw;
-`;
-const MainContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  width: 100%;
-`;
-
-const SubContainer = styled.div`
-  background: ${(props) => props.theme.primaryBackground};
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  border-radius: ${(props) => props.theme.spacing(2)};
-  display: flex;
-  flex-direction: column;
-  margin: ${(props) => props.theme.spacing(4)};
-  max-width: calc(100vw - 500px);
-  padding: ${(props) => props.theme.spacing(8)};
-  width: 100%;
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
-    max-width: none;
-  }
-`;
-
-const SubSubContainer = styled.div`
-  color: ${(props) => props.theme.text100};
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  width: 350px;
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
-  }
-`;
-
-export const SecondaryLayout = ({ children, Navbar }: OwnProps) => {
-  return (
-    <StyledLayout>
-      <NavbarContainer layout="secondary">
-        <Navbar />
-      </NavbarContainer>
-      <MainContainer>
-        <SubContainer>
-          <SubSubContainer>{children}</SubSubContainer>
-        </SubContainer>
-      </MainContainer>
-    </StyledLayout>
-  );
-};
diff --git a/front/src/modules/ui/layout/containers/ContentContainer.tsx b/front/src/modules/ui/layout/containers/ContentContainer.tsx
new file mode 100644
index 000000000..df7adac7f
--- /dev/null
+++ b/front/src/modules/ui/layout/containers/ContentContainer.tsx
@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { Panel } from '../Panel';
+import { RightDrawer } from '../right-drawer/components/RightDrawer';
+import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpenState';
+
+type OwnProps = {
+  children: JSX.Element;
+  topMargin?: number;
+};
+
+const MainContainer = styled.div<{ topMargin: number }>`
+  background: ${(props) => props.theme.noisyBackground};
+  display: flex;
+
+  flex-direction: row;
+  gap: ${(props) => props.theme.spacing(2)};
+  height: calc(100% - ${(props) => props.topMargin}px);
+
+  padding-bottom: ${(props) => props.theme.spacing(3)};
+  padding-right: ${(props) => props.theme.spacing(3)};
+  width: calc(100% - ${(props) => props.theme.spacing(3)});
+`;
+
+type LeftContainerProps = {
+  isRightDrawerOpen?: boolean;
+};
+
+const LeftContainer = styled.div<LeftContainerProps>`
+  display: flex;
+  position: relative;
+  width: calc(
+    100% -
+      ${(props) =>
+        props.isRightDrawerOpen
+          ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
+          : '0px'}
+  );
+`;
+
+export function ContentContainer({ children, topMargin }: OwnProps) {
+  const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
+
+  return (
+    <MainContainer topMargin={topMargin ?? 0}>
+      <LeftContainer isRightDrawerOpen={isRightDrawerOpen}>
+        <Panel>{children}</Panel>
+      </LeftContainer>
+      <RightDrawer />
+    </MainContainer>
+  );
+}
diff --git a/front/src/modules/ui/layout/containers/NoTopBarContainer.tsx b/front/src/modules/ui/layout/containers/NoTopBarContainer.tsx
new file mode 100644
index 000000000..4cabe87cc
--- /dev/null
+++ b/front/src/modules/ui/layout/containers/NoTopBarContainer.tsx
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import { ContentContainer } from './ContentContainer';
+
+type OwnProps = {
+  children: JSX.Element;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  padding-top: ${(props) => props.theme.spacing(4)};
+  width: 100%;
+`;
+
+export function NoTopBarContainer({ children }: OwnProps) {
+  return (
+    <StyledContainer>
+      <ContentContainer topMargin={16}>{children}</ContentContainer>
+    </StyledContainer>
+  );
+}
diff --git a/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx b/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
index 23ca8eb45..798d8da2f 100644
--- a/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
+++ b/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
@@ -1,12 +1,10 @@
 import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilState } from 'recoil';
 
-import { Panel } from '../Panel';
-import { RightDrawer } from '../right-drawer/components/RightDrawer';
-import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpenState';
 import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/TopBar';
 
+import { ContentContainer } from './ContentContainer';
+
 type OwnProps = {
   children: JSX.Element;
   title: string;
@@ -20,53 +18,18 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-const MainContainer = styled.div`
-  background: ${(props) => props.theme.noisyBackground};
-  display: flex;
-  flex-direction: row;
-  gap: ${(props) => props.theme.spacing(2)};
-  height: calc(
-    100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} -
-      ${(props) => props.theme.spacing(5)}
-  );
-  padding-bottom: ${(props) => props.theme.spacing(3)};
-  padding-right: ${(props) => props.theme.spacing(3)};
-  width: calc(100% - ${(props) => props.theme.spacing(3)});
-`;
-
-type LeftContainerProps = {
-  isRightDrawerOpen?: boolean;
-};
-
-const LeftContainer = styled.div<LeftContainerProps>`
-  display: flex;
-  position: relative;
-  width: calc(
-    100% -
-      ${(props) =>
-        props.isRightDrawerOpen
-          ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
-          : '0px'}
-  );
-`;
-
 export function WithTopBarContainer({
   children,
   title,
   icon,
   onAddButtonClick,
 }: OwnProps) {
-  const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
-
   return (
     <StyledContainer>
       <TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
-      <MainContainer>
-        <LeftContainer isRightDrawerOpen={isRightDrawerOpen}>
-          <Panel>{children}</Panel>
-        </LeftContainer>
-        <RightDrawer />
-      </MainContainer>
+      <ContentContainer topMargin={TOP_BAR_MIN_HEIGHT}>
+        {children}
+      </ContentContainer>
     </StyledContainer>
   );
 }
diff --git a/front/src/modules/ui/layout/navbar/NavItemsContainer.tsx b/front/src/modules/ui/layout/navbar/NavItemsContainer.tsx
index 452ec3b28..56e1356ac 100644
--- a/front/src/modules/ui/layout/navbar/NavItemsContainer.tsx
+++ b/front/src/modules/ui/layout/navbar/NavItemsContainer.tsx
@@ -8,6 +8,7 @@ const StyledNavItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 40px;
+  min-width: 220px;
 `;
 
 function NavItemsContainer({ children }: OwnProps) {
diff --git a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx
index 21c06235d..e38de7f1f 100644
--- a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx
+++ b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx
@@ -4,10 +4,9 @@ import { useRecoilValue } from 'recoil';
 import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from '../styles/themes';
 
-const StyledNavbarContainer = styled.div<{ width: string }>`
+const StyledNavbarContainer = styled.div`
   flex-direction: column;
-  width: ${(props) =>
-    useRecoilValue(isNavbarOpenedState) ? props.width : '0'};
+  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
   padding: ${(props) => props.theme.spacing(2)};
   flex-shrink: 0;
   overflow: hidden;
@@ -19,18 +18,6 @@ const StyledNavbarContainer = styled.div<{ width: string }>`
         : '0'};
 `;
 
-const NavbarSubContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: auto;
-  margin-top: 41px;
-  width: 160px;
-
-  @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
-  }
-`;
-
 const NavbarContent = styled.div`
   display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
 `;
@@ -44,18 +31,8 @@ export const NavbarContainer: React.FC<NavbarProps> = ({
   children,
   layout,
 }) => {
-  if (layout === 'secondary') {
-    return (
-      <StyledNavbarContainer width="500px">
-        <NavbarSubContainer>
-          <NavbarContent>{children}</NavbarContent>
-        </NavbarSubContainer>
-      </StyledNavbarContainer>
-    );
-  }
-
   return (
-    <StyledNavbarContainer width="220px">
+    <StyledNavbarContainer>
       <NavbarContent>{children}</NavbarContent>
     </StyledNavbarContainer>
   );
diff --git a/front/src/modules/ui/layout/navbar/NavBackButton.tsx b/front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx
similarity index 95%
rename from front/src/modules/ui/layout/navbar/NavBackButton.tsx
rename to front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx
index 96ae4e8bf..d540564b7 100644
--- a/front/src/modules/ui/layout/navbar/NavBackButton.tsx
+++ b/front/src/modules/ui/layout/navbar/sub-navbar/NavBackButton.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { IconChevronLeft } from '@/ui/icons/index';
 
-import NavCollapseButton from './NavCollapseButton';
+import NavCollapseButton from '../NavCollapseButton';
 
 type OwnProps = {
   title: string;
diff --git a/front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx b/front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx
new file mode 100644
index 000000000..9357f1998
--- /dev/null
+++ b/front/src/modules/ui/layout/navbar/sub-navbar/SubNavBarContainer.tsx
@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+import NavBackButton from './NavBackButton';
+
+type OwnProps = {
+  children: JSX.Element;
+  backButtonTitle: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 300px;
+  padding-top: ${(props) => props.theme.spacing(6)};
+`;
+
+const StyledNavItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function SubNavbarContainer({
+  children,
+  backButtonTitle,
+}: OwnProps) {
+  return (
+    <StyledContainer>
+      <NavBackButton title={backButtonTitle} />
+      <StyledNavItemsContainer>{children}</StyledNavItemsContainer>
+    </StyledContainer>
+  );
+}
diff --git a/front/src/modules/ui/layout/top-bar/TopBar.tsx b/front/src/modules/ui/layout/top-bar/TopBar.tsx
index 8659bc6de..024b0a150 100644
--- a/front/src/modules/ui/layout/top-bar/TopBar.tsx
+++ b/front/src/modules/ui/layout/top-bar/TopBar.tsx
@@ -5,7 +5,7 @@ import { IconPlus } from '@/ui/icons/index';
 
 import NavCollapseButton from '../navbar/NavCollapseButton';
 
-export const TOP_BAR_MIN_HEIGHT = '40px';
+export const TOP_BAR_MIN_HEIGHT = 40;
 
 const TopBarContainer = styled.div`
   align-items: center;
@@ -14,7 +14,7 @@ const TopBarContainer = styled.div`
   display: flex;
   flex-direction: row;
   font-size: 14px;
-  min-height: ${TOP_BAR_MIN_HEIGHT};
+  min-height: ${TOP_BAR_MIN_HEIGHT}px;
   padding: ${(props) => props.theme.spacing(2)};
 `;
 
diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx
index 82b27c596..7ac55b613 100644
--- a/front/src/pages/companies/Companies.tsx
+++ b/front/src/pages/companies/Companies.tsx
@@ -24,7 +24,6 @@ import { IconBuildingSkyscraper } from '@/ui/icons/index';
 import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
-import { AppPage } from '~/AppPage';
 import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
 
 import { TableActionBarButtonCreateCommentThreadCompany } from './table/TableActionBarButtonCreateCommentThreadCompany';
@@ -76,31 +75,29 @@ export function Companies() {
   const companiesColumns = useCompaniesColumns();
   const theme = useTheme();
   return (
-    <AppPage>
-      <WithTopBarContainer
-        title="Companies"
-        icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
-        onAddButtonClick={handleAddButtonClick}
-      >
-        <>
-          <StyledCompaniesContainer>
-            <EntityTable
-              data={companies}
-              columns={companiesColumns}
-              viewName="All Companies"
-              viewIcon={<IconList size={16} />}
-              availableSorts={availableSorts}
-              availableFilters={availableFilters}
-              onSortsUpdate={updateSorts}
-              onFiltersUpdate={updateFilters}
-            />
-          </StyledCompaniesContainer>
-          <EntityTableActionBar>
-            <TableActionBarButtonCreateCommentThreadCompany />
-            <TableActionBarButtonDeleteCompanies />
-          </EntityTableActionBar>
-        </>
-      </WithTopBarContainer>
-    </AppPage>
+    <WithTopBarContainer
+      title="Companies"
+      icon={<IconBuildingSkyscraper size={theme.iconSizeMedium} />}
+      onAddButtonClick={handleAddButtonClick}
+    >
+      <>
+        <StyledCompaniesContainer>
+          <EntityTable
+            data={companies}
+            columns={companiesColumns}
+            viewName="All Companies"
+            viewIcon={<IconList size={16} />}
+            availableSorts={availableSorts}
+            availableFilters={availableFilters}
+            onSortsUpdate={updateSorts}
+            onFiltersUpdate={updateFilters}
+          />
+        </StyledCompaniesContainer>
+        <EntityTableActionBar>
+          <TableActionBarButtonCreateCommentThreadCompany />
+          <TableActionBarButtonDeleteCompanies />
+        </EntityTableActionBar>
+      </>
+    </WithTopBarContainer>
   );
 }
diff --git a/front/src/pages/companies/__stories__/Companies.comments.stories.tsx b/front/src/pages/companies/__stories__/Companies.comments.stories.tsx
index c603f2b69..deb295e31 100644
--- a/front/src/pages/companies/__stories__/Companies.comments.stories.tsx
+++ b/front/src/pages/companies/__stories__/Companies.comments.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { Companies } from '../Companies';
 
 import { Story } from './Companies.stories';
-import { render } from './shared';
 
 const meta: Meta<typeof Companies> = {
   title: 'Pages/Companies/Comments',
@@ -17,7 +17,7 @@ const meta: Meta<typeof Companies> = {
 export default meta;
 
 export const OpenCommentsSection: Story = {
-  render,
+  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
index d2fa0e81e..ce69d6dba 100644
--- a/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
+++ b/front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
@@ -2,10 +2,12 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
 import { Companies } from '../Companies';
 
 import { Story } from './Companies.stories';
-import { mocks, render } from './shared';
 
 const meta: Meta<typeof Companies> = {
   title: 'Pages/Companies/FilterBy',
@@ -15,7 +17,7 @@ const meta: Meta<typeof Companies> = {
 export default meta;
 
 export const FilterByName: Story = {
-  render,
+  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -38,12 +40,12 @@ export const FilterByName: Story = {
     expect(await canvas.findByText('Contains Air')).toBeInTheDocument();
   },
   parameters: {
-    msw: mocks,
+    msw: graphqlMocks,
   },
 };
 
 export const FilterByAccountOwner: Story = {
-  render,
+  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -72,6 +74,6 @@ export const FilterByAccountOwner: Story = {
     expect(await canvas.findByText('Is Charles Test')).toBeInTheDocument();
   },
   parameters: {
-    msw: mocks,
+    msw: graphqlMocks,
   },
 };
diff --git a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
index fae83e435..d8f911538 100644
--- a/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
+++ b/front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
@@ -2,10 +2,12 @@ import { expect } from '@storybook/jest';
 import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
+
 import { Companies } from '../Companies';
 
 import { Story } from './Companies.stories';
-import { mocks, render } from './shared';
 
 const meta: Meta<typeof Companies> = {
   title: 'Pages/Companies/SortBy',
@@ -15,7 +17,7 @@ const meta: Meta<typeof Companies> = {
 export default meta;
 
 export const SortByName: Story = {
-  render,
+  render: getRenderWrapperForPage(<Companies />, '/companies'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -41,6 +43,6 @@ export const SortByName: Story = {
     await expect(canvas.queryAllByTestId('remove-icon-name')).toStrictEqual([]);
   },
   parameters: {
-    msw: mocks,
+    msw: graphqlMocks,
   },
 };
diff --git a/front/src/pages/companies/__stories__/Companies.stories.tsx b/front/src/pages/companies/__stories__/Companies.stories.tsx
index 656e78670..46f5bcba1 100644
--- a/front/src/pages/companies/__stories__/Companies.stories.tsx
+++ b/front/src/pages/companies/__stories__/Companies.stories.tsx
@@ -15,7 +15,7 @@ export default meta;
 export type Story = StoryObj<typeof Companies>;
 
 export const Default: Story = {
-  render: getRenderWrapperForPage(<Companies />),
+  render: getRenderWrapperForPage(<Companies />, '/companies'),
   parameters: {
     msw: graphqlMocks,
   },
diff --git a/front/src/pages/companies/__stories__/shared.tsx b/front/src/pages/companies/__stories__/shared.tsx
deleted file mode 100644
index a7dcb2b3f..000000000
--- a/front/src/pages/companies/__stories__/shared.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
-import { graphql } from 'msw';
-import { RecoilRoot } from 'recoil';
-
-import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
-import { GraphqlQueryUser } from '@/users/interfaces/user.interface';
-import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
-import { filterAndSortData } from '~/testing/mock-data';
-import { mockedCompaniesData } from '~/testing/mock-data/companies';
-import { mockedUsersData } from '~/testing/mock-data/users';
-import { mockedClient } from '~/testing/mockedClient';
-
-import { Companies } from '../Companies';
-
-export const mocks = [
-  graphql.query('GetCompanies', (req, res, ctx) => {
-    const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
-      mockedCompaniesData,
-      req.variables.where,
-      req.variables.orderBy,
-      req.variables.limit,
-    );
-    return res(
-      ctx.data({
-        companies: returnedMockedData,
-      }),
-    );
-  }),
-  graphql.query('SearchUser', (req, res, ctx) => {
-    const returnedMockedData = filterAndSortData<GraphqlQueryUser>(
-      mockedUsersData,
-      req.variables.where,
-      req.variables.orderBy,
-      req.variables.limit,
-    );
-    return res(
-      ctx.data({
-        searchResults: returnedMockedData,
-      }),
-    );
-  }),
-];
-
-export function render() {
-  return (
-    <RecoilRoot>
-      <ApolloProvider client={mockedClient}>
-        <MemoryRouter>
-          <FullHeightStorybookLayout>
-            <Companies />
-          </FullHeightStorybookLayout>
-        </MemoryRouter>
-      </ApolloProvider>
-    </RecoilRoot>
-  );
-}
diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx
index dcc750ed6..80f604b6c 100644
--- a/front/src/pages/opportunities/Opportunities.tsx
+++ b/front/src/pages/opportunities/Opportunities.tsx
@@ -1,6 +1,5 @@
 import { IconTargetArrow } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
-import { AppPage } from '~/AppPage';
 
 import { Board } from '../../modules/opportunities/components/Board';
 import { useBoard } from '../../modules/opportunities/hooks/useBoard';
@@ -13,10 +12,8 @@ export function Opportunities() {
   if (!initialBoard || !items)
     return <div>Initial board or items not found</div>;
   return (
-    <AppPage>
-      <WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
-        <Board initialBoard={initialBoard} items={items} />
-      </WithTopBarContainer>
-    </AppPage>
+    <WithTopBarContainer title="Opportunities" icon={<IconTargetArrow />}>
+      <Board initialBoard={initialBoard} items={items} />
+    </WithTopBarContainer>
   );
 }
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 9ec4003a9..1015676e6 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -20,7 +20,6 @@ import { EntityTable } from '@/ui/components/table/EntityTable';
 import { IconList, IconUser } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import { BoolExpType } from '@/utils/interfaces/generic.interface';
-import { AppPage } from '~/AppPage';
 
 import { TableActionBarButtonCreateCommentThreadPeople } from './table/TableActionBarButtonCreateCommentThreadPeople';
 import { TableActionBarButtonDeletePeople } from './table/TableActionBarButtonDeletePeople';
@@ -74,31 +73,29 @@ export function People() {
 
   const theme = useTheme();
   return (
-    <AppPage>
-      <WithTopBarContainer
-        title="People"
-        icon={<IconUser size={theme.iconSizeMedium} />}
-        onAddButtonClick={handleAddButtonClick}
-      >
-        <>
-          <StyledPeopleContainer>
-            <EntityTable
-              data={people}
-              columns={peopleColumns}
-              viewName="All People"
-              viewIcon={<IconList size={theme.iconSizeMedium} />}
-              availableSorts={availableSorts}
-              availableFilters={availableFilters}
-              onSortsUpdate={updateSorts}
-              onFiltersUpdate={updateFilters}
-            />
-          </StyledPeopleContainer>
-          <EntityTableActionBar>
-            <TableActionBarButtonCreateCommentThreadPeople />
-            <TableActionBarButtonDeletePeople />
-          </EntityTableActionBar>
-        </>
-      </WithTopBarContainer>
-    </AppPage>
+    <WithTopBarContainer
+      title="People"
+      icon={<IconUser size={theme.iconSizeMedium} />}
+      onAddButtonClick={handleAddButtonClick}
+    >
+      <>
+        <StyledPeopleContainer>
+          <EntityTable
+            data={people}
+            columns={peopleColumns}
+            viewName="All People"
+            viewIcon={<IconList size={theme.iconSizeMedium} />}
+            availableSorts={availableSorts}
+            availableFilters={availableFilters}
+            onSortsUpdate={updateSorts}
+            onFiltersUpdate={updateFilters}
+          />
+        </StyledPeopleContainer>
+        <EntityTableActionBar>
+          <TableActionBarButtonCreateCommentThreadPeople />
+          <TableActionBarButtonDeletePeople />
+        </EntityTableActionBar>
+      </>
+    </WithTopBarContainer>
   );
 }
diff --git a/front/src/pages/people/__stories__/People.comments.stories.tsx b/front/src/pages/people/__stories__/People.comments.stories.tsx
index 1a8e29778..d95ba1609 100644
--- a/front/src/pages/people/__stories__/People.comments.stories.tsx
+++ b/front/src/pages/people/__stories__/People.comments.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
-import { render } from './shared';
 
 const meta: Meta<typeof People> = {
   title: 'Pages/People/Comments',
@@ -17,7 +17,7 @@ const meta: Meta<typeof People> = {
 export default meta;
 
 export const OpenCommentsSection: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/front/src/pages/people/__stories__/People.filterBy.stories.tsx b/front/src/pages/people/__stories__/People.filterBy.stories.tsx
index e893c080c..51f128e09 100644
--- a/front/src/pages/people/__stories__/People.filterBy.stories.tsx
+++ b/front/src/pages/people/__stories__/People.filterBy.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
-import { render } from './shared';
 
 const meta: Meta<typeof People> = {
   title: 'Pages/People/FilterBy',
@@ -17,7 +17,7 @@ const meta: Meta<typeof People> = {
 export default meta;
 
 export const Email: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -44,7 +44,7 @@ export const Email: Story = {
 };
 
 export const CompanyName: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/front/src/pages/people/__stories__/People.inputs.stories.tsx b/front/src/pages/people/__stories__/People.inputs.stories.tsx
index 441beeb61..3f805ecf3 100644
--- a/front/src/pages/people/__stories__/People.inputs.stories.tsx
+++ b/front/src/pages/people/__stories__/People.inputs.stories.tsx
@@ -7,12 +7,12 @@ import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { fetchOneFromData } from '~/testing/mock-data';
 import { mockedPeopleData } from '~/testing/mock-data/people';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
-import { render } from './shared';
 
 const meta: Meta<typeof People> = {
   title: 'Pages/People/Input',
@@ -22,7 +22,7 @@ const meta: Meta<typeof People> = {
 export default meta;
 
 export const InteractWithManyRows: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -66,7 +66,7 @@ export const InteractWithManyRows: Story = {
 };
 
 export const CheckCheckboxes: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -97,7 +97,7 @@ export const CheckCheckboxes: Story = {
 };
 
 export const EditRelation: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -153,7 +153,7 @@ export const EditRelation: Story = {
 };
 
 export const SelectRelationWithKeys: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/front/src/pages/people/__stories__/People.sortBy.stories.tsx b/front/src/pages/people/__stories__/People.sortBy.stories.tsx
index 4d747caf4..c1a0edcd8 100644
--- a/front/src/pages/people/__stories__/People.sortBy.stories.tsx
+++ b/front/src/pages/people/__stories__/People.sortBy.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { People } from '../People';
 
 import { Story } from './People.stories';
-import { render } from './shared';
 
 const meta: Meta<typeof People> = {
   title: 'Pages/People/SortBy',
@@ -17,7 +17,7 @@ const meta: Meta<typeof People> = {
 export default meta;
 
 export const Email: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -43,7 +43,7 @@ export const Email: Story = {
 };
 
 export const Cancel: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/front/src/pages/people/__stories__/People.stories.tsx b/front/src/pages/people/__stories__/People.stories.tsx
index 57f7eaecc..3dcbb42d8 100644
--- a/front/src/pages/people/__stories__/People.stories.tsx
+++ b/front/src/pages/people/__stories__/People.stories.tsx
@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { People } from '../People';
 
-import { render } from './shared';
-
 const meta: Meta<typeof People> = {
   title: 'Pages/People',
   component: People,
@@ -16,7 +15,7 @@ export default meta;
 export type Story = StoryObj<typeof People>;
 
 export const Default: Story = {
-  render,
+  render: getRenderWrapperForPage(<People />, '/people'),
   parameters: {
     msw: graphqlMocks,
   },
diff --git a/front/src/pages/people/__stories__/shared.tsx b/front/src/pages/people/__stories__/shared.tsx
deleted file mode 100644
index 4e6e91078..000000000
--- a/front/src/pages/people/__stories__/shared.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
-import { RecoilRoot } from 'recoil';
-
-import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
-import { mockedClient } from '~/testing/mockedClient';
-
-import { People } from '../People';
-
-export function render() {
-  return (
-    <RecoilRoot>
-      <ApolloProvider client={mockedClient}>
-        <MemoryRouter>
-          <FullHeightStorybookLayout>
-            <People />
-          </FullHeightStorybookLayout>
-        </MemoryRouter>
-      </ApolloProvider>
-    </RecoilRoot>
-  );
-}
diff --git a/front/src/pages/settings/SettingsProfile.tsx b/front/src/pages/settings/SettingsProfile.tsx
index 790ac1bea..b49ca0b58 100644
--- a/front/src/pages/settings/SettingsProfile.tsx
+++ b/front/src/pages/settings/SettingsProfile.tsx
@@ -1,14 +1,20 @@
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { SettingsPage } from '@/settings/components/SettingsPage';
+import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
 import { TopTitle } from '@/ui/layout/top-bar/TopTitle';
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.spacing(8)};
+`;
 export function SettingsProfile() {
   const currentUser = useRecoilValue(currentUserState);
   return (
-    <SettingsPage>
-      <>
+    <NoTopBarContainer>
+      <StyledContainer>
         <TopTitle title="Profile" />
         <div>
           <h5>Name</h5>
@@ -18,7 +24,7 @@ export function SettingsProfile() {
           <h5>Email</h5>
           <span>{currentUser?.email} </span>
         </div>
-      </>
-    </SettingsPage>
+      </StyledContainer>
+    </NoTopBarContainer>
   );
 }
diff --git a/front/src/pages/settings/__stories__/settings.stories.tsx b/front/src/pages/settings/__stories__/settings.stories.tsx
index b4049a961..c09725f2a 100644
--- a/front/src/pages/settings/__stories__/settings.stories.tsx
+++ b/front/src/pages/settings/__stories__/settings.stories.tsx
@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { SettingsProfile } from '../SettingsProfile';
 
-import { render } from './shared';
-
 const meta: Meta<typeof SettingsProfile> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
@@ -16,7 +15,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsProfile>;
 
 export const Default: Story = {
-  render,
+  render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
   parameters: {
     msw: graphqlMocks,
   },
diff --git a/front/src/pages/settings/__stories__/shared.tsx b/front/src/pages/settings/__stories__/shared.tsx
deleted file mode 100644
index ca29d169c..000000000
--- a/front/src/pages/settings/__stories__/shared.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
-import { RecoilRoot } from 'recoil';
-
-import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
-import { mockedClient } from '~/testing/mockedClient';
-
-import { SettingsProfile } from '../SettingsProfile';
-
-export function render() {
-  return (
-    <RecoilRoot>
-      <ApolloProvider client={mockedClient}>
-        <MemoryRouter>
-          <FullHeightStorybookLayout>
-            <SettingsProfile />
-          </FullHeightStorybookLayout>
-        </MemoryRouter>
-      </ApolloProvider>
-    </RecoilRoot>
-  );
-}
diff --git a/front/src/testing/renderWrappers.tsx b/front/src/testing/renderWrappers.tsx
index 4d712be9b..57cf84e72 100644
--- a/front/src/testing/renderWrappers.tsx
+++ b/front/src/testing/renderWrappers.tsx
@@ -3,17 +3,27 @@ import { MemoryRouter } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
 import { RecoilRoot } from 'recoil';
 
+import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+import { AuthProvider } from '~/providers/AuthProvider';
+
 import { ComponentStorybookLayout } from './ComponentStorybookLayout';
 import { FullHeightStorybookLayout } from './FullHeightStorybookLayout';
 import { mockedClient } from './mockedClient';
 
-export function getRenderWrapperForPage(children: React.ReactElement) {
+export function getRenderWrapperForPage(
+  children: React.ReactElement,
+  currentPath: string,
+) {
   return function render() {
     return (
       <RecoilRoot>
         <ApolloProvider client={mockedClient}>
-          <MemoryRouter>
-            <FullHeightStorybookLayout>{children}</FullHeightStorybookLayout>
+          <MemoryRouter initialEntries={[currentPath]}>
+            <FullHeightStorybookLayout>
+              <AuthProvider>
+                <DefaultLayout>{children}</DefaultLayout>
+              </AuthProvider>
+            </FullHeightStorybookLayout>
           </MemoryRouter>
         </ApolloProvider>
       </RecoilRoot>
diff --git a/front/yarn.lock b/front/yarn.lock
index 392a8dc88..f59a8e229 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -12316,10 +12316,10 @@ msw-storybook-addon@^1.8.0:
   dependencies:
     is-node-process "^1.0.1"
 
-msw@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/msw/-/msw-1.2.2.tgz#126c3150c07f651e97b24fbd405821f3aeaf9397"
-  integrity sha512-GsW3PE/Es/a1tYThXcM8YHOZ1S1MtivcS3He/LQbbTCx3rbWJYCtWD5XXyJ53KlNPT7O1VI9sCW3xMtgFe8XpQ==
+msw@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/msw/-/msw-1.2.1.tgz#9dd347583eeba5e5c7f33b54be5600a899dc61bd"
+  integrity sha512-bF7qWJQSmKn6bwGYVPXOxhexTCGD5oJSZg8yt8IBClxvo3Dx/1W0zqE1nX9BSWmzRsCKWfeGWcB/vpqV6aclpw==
   dependencies:
     "@mswjs/cookies" "^0.2.2"
     "@mswjs/interceptors" "^0.17.5"