From f25f80c199fbc04f734151db3765b45cdc96fab1 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Sun, 9 Apr 2023 16:43:43 +0200
Subject: [PATCH] Implement new UI

---
 README.md                                     |   4 +
 front/.storybook/preview-head.html            |   4 +-
 front/package-lock.json                       |   2 +-
 front/package.json                            |   8 +-
 front/public/index.html                       |   2 +-
 front/src/App.tsx                             |  21 ++--
 front/src/index.css                           |   2 +-
 front/src/index.tsx                           |   7 ++
 front/src/interfaces/workspace.interface.ts   |   5 +
 front/src/layout/AppLayout.tsx                |  25 +++--
 .../layout/__stories__/AppLayout.stories.tsx  |  19 ++++
 front/src/layout/__tests__/AppLayout.test.tsx |  10 ++
 .../layout/containers/FullWidthContainer.tsx  |  16 ---
 .../layout/containers/WithTopBarContainer.tsx |  45 ++++++++
 front/src/layout/navbar/NavItem.tsx           |  45 ++++----
 front/src/layout/navbar/NavTitle.tsx          |  22 ++++
 front/src/layout/navbar/Navbar.tsx            |  48 ++++-----
 front/src/layout/navbar/ProfileContainer.tsx  |  63 -----------
 .../src/layout/navbar/WorkspaceContainer.tsx  |  51 +++++++++
 .../navbar/__stories__/NavItem.stories.tsx    |  19 ++--
 .../navbar/__stories__/Navbar.stories.tsx     |  35 +++---
 .../layout/navbar/__tests__/Navbar.test.tsx   |   8 +-
 front/src/layout/styles/themes.ts             |  55 ++++++++++
 front/src/layout/top-bar/TopBar.tsx           |  38 +++++++
 front/src/pages/Contacts.tsx                  |   9 --
 front/src/pages/Insights.tsx                  |   9 --
 front/src/pages/companies/Companies.tsx       |  12 +++
 .../__stories__/Companies.stories.tsx         |  18 ++++
 .../companies/__tests__/Companies.test.tsx    |  10 ++
 front/src/pages/inbox/Inbox.tsx               |  18 ----
 .../pages/inbox/__stories__/Inbox.stories.tsx |  13 ---
 .../src/pages/inbox/__tests__/Inbox.test.tsx  |  10 --
 .../discussion-panel/DiscussionPanel.tsx      | 100 ------------------
 .../__stories__/DiscussionPanel.stories.tsx   |   8 --
 .../__tests__/DiscussionPanel.test.tsx        |  10 --
 .../discussion-panel/composer/Composer.tsx    |  57 ----------
 .../composer/ComposerSwitch.tsx               |  49 ---------
 .../composer/__stories__/Composer.stories.tsx |   8 --
 .../__stories__/ComposerSwitch.stories.tsx    |   8 --
 .../composer/__tests__/Composer.test.tsx      |  10 --
 .../__tests__/ComposerSwitch.test.tsx         |  10 --
 .../inbox/discussion-panel/events/Booking.tsx |  80 --------------
 .../inbox/discussion-panel/events/Message.tsx |  90 ----------------
 .../inbox/discussion-panel/events/Note.tsx    |  52 ---------
 .../events/__stories__/Booking.stories.tsx    |  21 ----
 .../events/__stories__/Message.stories.tsx    |  19 ----
 .../events/__stories__/Note.stories.tsx       |  17 ---
 .../events/__tests__/Booking.test.tsx         |  10 --
 .../events/__tests__/Message.test.tsx         |  10 --
 .../events/__tests__/Note.test.tsx            |  10 --
 .../src/pages/inbox/list-panel/ListPanel.tsx  |  50 ---------
 .../inbox/list-panel/ListPanelHeader.tsx      |  17 ---
 .../pages/inbox/list-panel/ListPanelItem.tsx  |  98 -----------------
 .../__stories__/ListPanel.stories.tsx         |   8 --
 .../__stories__/ListPanelHeader.stories.tsx   |   9 --
 .../__stories__/ListPanelItem.stories.tsx     |  19 ----
 .../list-panel/__tests__/ListPanel.test.tsx   |  10 --
 .../__tests__/ListPanelHeader.test.tsx        |  10 --
 .../__tests__/ListPanelItem.test.tsx          |  10 --
 .../pages/inbox/plugin-panel/PluginPanel.tsx  |  27 -----
 .../inbox/plugin-panel/PluginPanelNav.tsx     |  46 --------
 .../plugin-history/PanelHistory.tsx           |   5 -
 .../plugin-history/UserActivity.tsx           |   7 --
 .../plugin-history/UserInformation.tsx        |   7 --
 front/src/pages/people/People.tsx             |  12 +++
 .../people/__stories__/People.stories.tsx     |  17 +++
 .../pages/people/__tests__/People.test.tsx    |  10 ++
 infra/dev/Makefile                            |   6 +-
 infra/dev/twenty/Dockerfile                   |   4 +
 69 files changed, 473 insertions(+), 1121 deletions(-)
 create mode 100644 front/src/interfaces/workspace.interface.ts
 create mode 100644 front/src/layout/__stories__/AppLayout.stories.tsx
 create mode 100644 front/src/layout/__tests__/AppLayout.test.tsx
 delete mode 100644 front/src/layout/containers/FullWidthContainer.tsx
 create mode 100644 front/src/layout/containers/WithTopBarContainer.tsx
 create mode 100644 front/src/layout/navbar/NavTitle.tsx
 delete mode 100644 front/src/layout/navbar/ProfileContainer.tsx
 create mode 100644 front/src/layout/navbar/WorkspaceContainer.tsx
 create mode 100644 front/src/layout/styles/themes.ts
 create mode 100644 front/src/layout/top-bar/TopBar.tsx
 delete mode 100644 front/src/pages/Contacts.tsx
 delete mode 100644 front/src/pages/Insights.tsx
 create mode 100644 front/src/pages/companies/Companies.tsx
 create mode 100644 front/src/pages/companies/__stories__/Companies.stories.tsx
 create mode 100644 front/src/pages/companies/__tests__/Companies.test.tsx
 delete mode 100644 front/src/pages/inbox/Inbox.tsx
 delete mode 100644 front/src/pages/inbox/__stories__/Inbox.stories.tsx
 delete mode 100644 front/src/pages/inbox/__tests__/Inbox.test.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/composer/Composer.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/Booking.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/Message.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/Note.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx
 delete mode 100644 front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/ListPanel.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/ListPanelHeader.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/ListPanelItem.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx
 delete mode 100644 front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx
 delete mode 100644 front/src/pages/inbox/plugin-panel/PluginPanel.tsx
 delete mode 100644 front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx
 delete mode 100644 front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx
 delete mode 100644 front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx
 delete mode 100644 front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx
 create mode 100644 front/src/pages/people/People.tsx
 create mode 100644 front/src/pages/people/__stories__/People.stories.tsx
 create mode 100644 front/src/pages/people/__tests__/People.test.tsx

diff --git a/README.md b/README.md
index be2c3b5cd..569698dd6 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,10 @@ Once this is completed you should have:
 - server available on: http://localhost:3000/health
 - postgres: available on http://localhost:5432 that should contain `twenty` database
 
+### Step 3: IDE setup
+
+If you are using VSCode, please use the `Dev Containers` extension to open the project in a container. This will allow you to run Visual Studio on top of the docker container. This will allow you to run the project without having to install node on your machine. 
+
 ### Note
 
 If you are using Docker install, make sure to ssh in the docker container during development to execute commands. You can also use `Makefile` to help you
diff --git a/front/.storybook/preview-head.html b/front/.storybook/preview-head.html
index ea6fb49f7..206362bfb 100644
--- a/front/.storybook/preview-head.html
+++ b/front/.storybook/preview-head.html
@@ -1,8 +1,8 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
 <style type="text/css">
 body {
   margin: 0;
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/front/package-lock.json b/front/package-lock.json
index 8d3304566..1ca401cc4 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@apollo/client": "^3.7.5",
-        "@emotion/react": "^11.10.5",
+        "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.5",
         "@fortawesome/fontawesome-svg-core": "^6.2.1",
         "@fortawesome/free-regular-svg-icons": "^6.2.1",
diff --git a/front/package.json b/front/package.json
index 6fd7f70b7..bc97892fb 100644
--- a/front/package.json
+++ b/front/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.5",
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
@@ -49,7 +49,11 @@
   "overrides": {
     "react-refresh": "0.14.0"
   },
-  "jest": {},
+  "jest": {
+    "coveragePathIgnorePatterns" : [
+      ".stories.tsx$"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
diff --git a/front/public/index.html b/front/public/index.html
index 0b1e7de4a..d10a53a2f 100644
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 
     <title>Twenty</title>
   </head>
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 23651e064..a33e58148 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import Inbox from './pages/inbox/Inbox';
-import Contacts from './pages/Contacts';
-import Insights from './pages/Insights';
+import People from './pages/people/People';
+import Companies from './pages/companies/Companies';
 import AppLayout from './layout/AppLayout';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
 
 function App() {
   const user = {
@@ -13,14 +12,20 @@ function App() {
     last_name: 'Bochet',
   };
 
+  const workspace = {
+    id: 1,
+    name: 'Claap',
+    logo: 'data:image/png;base64,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',
+  };
+
   return (
     <div>
       {
-        <AppLayout user={user}>
+        <AppLayout user={user} workspace={workspace}>
           <Routes>
-            <Route path="/" element={<Inbox />} />
-            <Route path="/contacts" element={<Contacts />} />
-            <Route path="/insights" element={<Insights />} />
+            <Route path="/" element={<Navigate to="/people" replace />} />
+            <Route path="/people" element={<People />} />
+            <Route path="/companies" element={<Companies />} />
           </Routes>
         </AppLayout>
       }
diff --git a/front/src/index.css b/front/src/index.css
index 3479ed478..56ab0e418 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: 'Inter';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/front/src/index.tsx b/front/src/index.tsx
index da49bc85d..3c13d9d96 100644
--- a/front/src/index.tsx
+++ b/front/src/index.tsx
@@ -10,6 +10,8 @@ import {
   createHttpLink,
 } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
+import '@emotion/react';
+import { ThemeType } from './layout/styles/themes';
 
 const httpLink = createHttpLink({ uri: process.env.REACT_APP_API_URL });
 
@@ -34,3 +36,8 @@ root.render(
     </BrowserRouter>
   </ApolloProvider>,
 );
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends ThemeType {}
+}
diff --git a/front/src/interfaces/workspace.interface.ts b/front/src/interfaces/workspace.interface.ts
new file mode 100644
index 000000000..4460a9588
--- /dev/null
+++ b/front/src/interfaces/workspace.interface.ts
@@ -0,0 +1,5 @@
+export interface Workspace {
+  id: number;
+  name: string;
+  logo: string;
+}
diff --git a/front/src/layout/AppLayout.tsx b/front/src/layout/AppLayout.tsx
index 0aabdd1a0..8386dbeb3 100644
--- a/front/src/layout/AppLayout.tsx
+++ b/front/src/layout/AppLayout.tsx
@@ -1,24 +1,37 @@
 import Navbar from './navbar/Navbar';
 import styled from '@emotion/styled';
+import { ThemeProvider } from '@emotion/react';
 import { User } from '../interfaces/user.interface';
+import { Workspace } from '../interfaces/workspace.interface';
+import { lightTheme } from './styles/themes';
 
 const StyledLayout = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  width: 100vw;
   height: 100vh;
 `;
 
+const StyledRightContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+`;
+
 type OwnProps = {
   children: JSX.Element;
   user?: User;
+  workspace?: Workspace;
 };
 
-function AppLayout({ children, user }: OwnProps) {
+function AppLayout({ children, user, workspace }: OwnProps) {
   return (
-    <StyledLayout>
-      <Navbar user={user} />
-      <div>{children}</div>
-    </StyledLayout>
+    <ThemeProvider theme={lightTheme}>
+      <StyledLayout>
+        <Navbar user={user} workspace={workspace} />
+        <StyledRightContainer>{children}</StyledRightContainer>
+      </StyledLayout>
+    </ThemeProvider>
   );
 }
 
diff --git a/front/src/layout/__stories__/AppLayout.stories.tsx b/front/src/layout/__stories__/AppLayout.stories.tsx
new file mode 100644
index 000000000..2f67383b0
--- /dev/null
+++ b/front/src/layout/__stories__/AppLayout.stories.tsx
@@ -0,0 +1,19 @@
+import { MemoryRouter } from 'react-router-dom';
+import AppLayout from '../AppLayout';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../styles/themes';
+
+export default {
+  title: 'AppLayout',
+  component: AppLayout,
+};
+
+export const AppLayoutDefault = () => (
+  <ThemeProvider theme={lightTheme}>
+    <MemoryRouter>
+      <AppLayout>
+        <div data-testid="content">Test</div>
+      </AppLayout>
+    </MemoryRouter>
+  </ThemeProvider>
+);
diff --git a/front/src/layout/__tests__/AppLayout.test.tsx b/front/src/layout/__tests__/AppLayout.test.tsx
new file mode 100644
index 000000000..53dab7c80
--- /dev/null
+++ b/front/src/layout/__tests__/AppLayout.test.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { AppLayoutDefault } from '../__stories__/AppLayout.stories';
+
+it('Checks the AppLayout render', () => {
+  const { getByTestId } = render(<AppLayoutDefault />);
+
+  const title = getByTestId('content');
+  expect(title).toHaveTextContent('Test');
+});
diff --git a/front/src/layout/containers/FullWidthContainer.tsx b/front/src/layout/containers/FullWidthContainer.tsx
deleted file mode 100644
index 797ab9109..000000000
--- a/front/src/layout/containers/FullWidthContainer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: JSX.Element;
-};
-
-const StyledContainer = styled.div`
-  display: flex;
-  height: calc(100vh - 60px);
-`;
-
-function FullWidthContainer({ children }: OwnProps) {
-  return <StyledContainer>{children}</StyledContainer>;
-}
-
-export default FullWidthContainer;
diff --git a/front/src/layout/containers/WithTopBarContainer.tsx b/front/src/layout/containers/WithTopBarContainer.tsx
new file mode 100644
index 000000000..9fdc45802
--- /dev/null
+++ b/front/src/layout/containers/WithTopBarContainer.tsx
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import TopBar from '../top-bar/TopBar';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+type OwnProps = {
+  children: JSX.Element;
+  title: string;
+  icon: IconProp;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: ${(props) => props.theme.noisyBackground};
+  flex: 1;
+  padding-right: 12px;
+  padding-bottom: 12px;
+`;
+
+const ContentSubContainer = styled.div`
+  display: flex;
+  background: ${(props) => props.theme.primaryBackground};
+  border-radius: 8px;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  flex: 1;
+`;
+
+function FullWidthContainer({ children, title, icon }: OwnProps) {
+  return (
+    <StyledContainer>
+      <TopBar title={title} icon={icon} />
+      <ContentContainer>
+        <ContentSubContainer>{children}</ContentSubContainer>
+      </ContentContainer>
+    </StyledContainer>
+  );
+}
+
+export default FullWidthContainer;
diff --git a/front/src/layout/navbar/NavItem.tsx b/front/src/layout/navbar/NavItem.tsx
index b24529b60..5c0463fd2 100644
--- a/front/src/layout/navbar/NavItem.tsx
+++ b/front/src/layout/navbar/NavItem.tsx
@@ -1,40 +1,44 @@
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 type OwnProps = {
   label: string;
   to: string;
   active?: boolean;
+  icon: IconProp;
 };
 
 type StyledItemProps = {
   active?: boolean;
 };
 
-const StyledItem = styled.button`
+const StyledItem = styled.button<StyledItemProps>`
   display: flex;
-  height: 60px;
-  background: inherit;
-  align-items: center;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  font-size: 16px;
-  margin-bottom: -2px;
+  border: none;
+  font-size: 12px;
   cursor: pointer;
-  color: ${(props: StyledItemProps) => (props.active ? 'black' : '#2e3138')};
-  font-weight: ${(props: StyledItemProps) =>
-    props.active ? 'bold' : 'inherit'};
-  border: 0;
-  border-bottom: ${(props: StyledItemProps) =>
-    props.active ? '2px solid black' : '2px solid #eaecee'};
-  &:hover {
-    border-bottom: 2px solid #2e3138;
+  background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+  font-family: 'Inter';
+  color: ${(props) =>
+    props.active ? props.theme.text100 : props.theme.text60};
+  border-radius: 4px;
+  :hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: ${(props) => props.theme.text100};
   }
 `;
 
-function NavItem({ label, to, active }: OwnProps) {
+const StyledItemLabel = styled.div`
+  display: flex;
+  margin-left: 8px;
+`;
+
+function NavItem({ label, icon, to, active }: OwnProps) {
   const navigate = useNavigate();
 
   return (
@@ -45,7 +49,8 @@ function NavItem({ label, to, active }: OwnProps) {
       active={active}
       aria-selected={active}
     >
-      {label}
+      <FontAwesomeIcon icon={icon} />
+      <StyledItemLabel>{label}</StyledItemLabel>
     </StyledItem>
   );
 }
diff --git a/front/src/layout/navbar/NavTitle.tsx b/front/src/layout/navbar/NavTitle.tsx
new file mode 100644
index 000000000..4bd73236b
--- /dev/null
+++ b/front/src/layout/navbar/NavTitle.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+  text-transform: uppercase;
+  color: ${(props) => props.theme.text30};
+  font-size: 12px;
+  font-weight: 600;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+`;
+
+function NavTitle({ label }: OwnProps) {
+  return <StyledTitle>{label}</StyledTitle>;
+}
+
+export default NavTitle;
diff --git a/front/src/layout/navbar/Navbar.tsx b/front/src/layout/navbar/Navbar.tsx
index bb7a8a84b..0b9410f51 100644
--- a/front/src/layout/navbar/Navbar.tsx
+++ b/front/src/layout/navbar/Navbar.tsx
@@ -1,64 +1,62 @@
 import styled from '@emotion/styled';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 import { User } from '../../interfaces/user.interface';
+import { Workspace } from '../../interfaces/workspace.interface';
 import NavItem from './NavItem';
-import ProfileContainer from './ProfileContainer';
+import NavTitle from './NavTitle';
+import WorkspaceContainer from './WorkspaceContainer';
+import { faUser } from '@fortawesome/free-regular-svg-icons';
+import { faBuilding } from '@fortawesome/free-regular-svg-icons';
 
 const NavbarContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding-left: 12px;
-  height: 58px;
-  border-bottom: 2px solid #eaecee;
+  flex-direction: column;
+  background: ${(props) => props.theme.noisyBackground};
+  min-width: 220px;
+  padding: 8px;
 `;
 
 const NavItemsContainer = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  margin-top: 40px;
 `;
 
 type OwnProps = {
   user?: User;
+  workspace?: Workspace;
 };
 
-function Navbar({ user }: OwnProps) {
+function Navbar({ workspace }: OwnProps) {
   return (
     <>
       <NavbarContainer>
+        {workspace && <WorkspaceContainer workspace={workspace} />}
         <NavItemsContainer>
+          <NavTitle label="Workspace" />
           <NavItem
-            label="Inbox"
-            to="/"
+            label="People"
+            to="/people"
+            icon={faUser}
             active={
               !!useMatch({
-                path: useResolvedPath('/').pathname,
+                path: useResolvedPath('/people').pathname,
                 end: true,
               })
             }
           />
           <NavItem
-            label="Contacts"
-            to="/contacts"
+            label="Companies"
+            to="/companies"
+            icon={faBuilding}
             active={
               !!useMatch({
-                path: useResolvedPath('/contacts').pathname,
-                end: true,
-              })
-            }
-          />
-          <NavItem
-            label="Insights"
-            to="/insights"
-            active={
-              !!useMatch({
-                path: useResolvedPath('/insights').pathname,
+                path: useResolvedPath('/companies').pathname,
                 end: true,
               })
             }
           />
         </NavItemsContainer>
-        <ProfileContainer user={user} />
       </NavbarContainer>
     </>
   );
diff --git a/front/src/layout/navbar/ProfileContainer.tsx b/front/src/layout/navbar/ProfileContainer.tsx
deleted file mode 100644
index 6482649df..000000000
--- a/front/src/layout/navbar/ProfileContainer.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import styled from '@emotion/styled';
-import { User } from '../../interfaces/user.interface';
-
-type OwnProps = {
-  user?: User;
-};
-
-const StyledContainer = styled.button`
-  display: flex;
-  height: 60px;
-  background: inherit;
-  align-items: center;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  font-size: 14px;
-  margin-bottom: -2px;
-  cursor: pointer;
-  border: 0;
-`;
-
-const StyledInfoContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledEmail = styled.div`
-  display: flex;
-`;
-
-const StyledAvatar = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  border-radius: 40px;
-  background: black;
-  font-size: 20px;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  margin-right: 16px;
-  flex-shrink: 0;
-`;
-
-function ProfileContainer({ user }: OwnProps) {
-  return (
-    <StyledContainer>
-      <StyledAvatar>
-        {user?.first_name
-          .split(' ')
-          .map((n) => n[0])
-          .join('')}
-      </StyledAvatar>
-      <StyledInfoContainer>
-        <StyledEmail>{user?.email}</StyledEmail>
-      </StyledInfoContainer>
-    </StyledContainer>
-  );
-}
-
-export default ProfileContainer;
diff --git a/front/src/layout/navbar/WorkspaceContainer.tsx b/front/src/layout/navbar/WorkspaceContainer.tsx
new file mode 100644
index 000000000..df94d2351
--- /dev/null
+++ b/front/src/layout/navbar/WorkspaceContainer.tsx
@@ -0,0 +1,51 @@
+import styled from '@emotion/styled';
+import { Workspace } from '../../interfaces/workspace.interface';
+
+type OwnProps = {
+  workspace: Workspace;
+};
+
+const StyledContainer = styled.button`
+  display: inline-flex;
+  width: min-content;
+  height: 34px;
+  align-items: center;
+  cursor: pointer;
+  border: 0;
+  background: inherit;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 4px;
+  padding: 8px;
+  margin-left: 4px;
+`;
+
+type StyledLogoProps = {
+  logo: string;
+};
+
+const StyledLogo = styled.div<StyledLogoProps>`
+  background: url(${(props) => props.logo});
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+`;
+
+const StyledName = styled.div`
+  margin-left: 4px;
+  font-family: 'Inter';
+  font-weight: 500;
+  font-size: 14px;
+  font-color: ${(props) => props.theme.text0};
+`;
+
+function ProfileContainer({ workspace }: OwnProps) {
+  return (
+    <StyledContainer>
+      <StyledLogo logo={workspace.logo}></StyledLogo>
+      <StyledName>{workspace?.name}</StyledName>
+    </StyledContainer>
+  );
+}
+
+export default ProfileContainer;
diff --git a/front/src/layout/navbar/__stories__/NavItem.stories.tsx b/front/src/layout/navbar/__stories__/NavItem.stories.tsx
index 0f58f587a..0a9a68517 100644
--- a/front/src/layout/navbar/__stories__/NavItem.stories.tsx
+++ b/front/src/layout/navbar/__stories__/NavItem.stories.tsx
@@ -1,6 +1,9 @@
 import { MemoryRouter } from 'react-router-dom';
+import { faUser } from '@fortawesome/free-regular-svg-icons';
+import { ThemeProvider } from '@emotion/react';
 
 import NavItem from '../../../layout/navbar/NavItem';
+import { lightTheme } from '../../styles/themes';
 
 export default {
   title: 'NavItem',
@@ -8,13 +11,17 @@ export default {
 };
 
 export const NavItemDefault = () => (
-  <MemoryRouter>
-    <NavItem label="Test" to="/test" />
-  </MemoryRouter>
+  <ThemeProvider theme={lightTheme}>
+    <MemoryRouter>
+      <NavItem label="Test" to="/test" icon={faUser} />
+    </MemoryRouter>
+  </ThemeProvider>
 );
 
 export const NavItemActive = () => (
-  <MemoryRouter initialEntries={['/test']}>
-    <NavItem label="Test" to="/test" active={true} />
-  </MemoryRouter>
+  <ThemeProvider theme={lightTheme}>
+    <MemoryRouter initialEntries={['/test']}>
+      <NavItem label="Test" to="/test" active={true} icon={faUser} />
+    </MemoryRouter>
+  </ThemeProvider>
 );
diff --git a/front/src/layout/navbar/__stories__/Navbar.stories.tsx b/front/src/layout/navbar/__stories__/Navbar.stories.tsx
index 37a884ae1..67e78c246 100644
--- a/front/src/layout/navbar/__stories__/Navbar.stories.tsx
+++ b/front/src/layout/navbar/__stories__/Navbar.stories.tsx
@@ -1,21 +1,32 @@
 import { MemoryRouter } from 'react-router-dom';
 
 import Navbar from '../Navbar';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../styles/themes';
 
 export default {
   title: 'Navbar',
   component: Navbar,
 };
 
-export const NavbarOnInsights = () => (
-  <MemoryRouter initialEntries={['/insights']}>
-    <Navbar
-      user={{
-        id: 1,
-        email: 'charles@twenty.com',
-        first_name: 'Charles',
-        last_name: 'Bochet',
-      }}
-    />
-  </MemoryRouter>
-);
+export const NavbarOnCompanies = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <Navbar
+          user={{
+            id: 1,
+            email: 'charles@twenty.com',
+            first_name: 'Charles',
+            last_name: 'Bochet',
+          }}
+          workspace={{
+            id: 1,
+            name: 'Claap',
+            logo: 'data:image/png;base64,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',
+          }}
+        />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};
diff --git a/front/src/layout/navbar/__tests__/Navbar.test.tsx b/front/src/layout/navbar/__tests__/Navbar.test.tsx
index b0bdb9553..d7d5bdb68 100644
--- a/front/src/layout/navbar/__tests__/Navbar.test.tsx
+++ b/front/src/layout/navbar/__tests__/Navbar.test.tsx
@@ -1,16 +1,16 @@
 import { render } from '@testing-library/react';
 
-import { NavbarOnInsights } from '../__stories__/Navbar.stories';
+import { NavbarOnCompanies } from '../__stories__/Navbar.stories';
 
 it('Checks the NavItem renders', () => {
-  const { getByRole } = render(<NavbarOnInsights />);
+  const { getByRole } = render(<NavbarOnCompanies />);
 
-  expect(getByRole('button', { name: 'Insights' })).toHaveAttribute(
+  expect(getByRole('button', { name: 'Companies' })).toHaveAttribute(
     'aria-selected',
     'true',
   );
 
-  expect(getByRole('button', { name: 'Inbox' })).toHaveAttribute(
+  expect(getByRole('button', { name: 'People' })).toHaveAttribute(
     'aria-selected',
     'false',
   );
diff --git a/front/src/layout/styles/themes.ts b/front/src/layout/styles/themes.ts
new file mode 100644
index 000000000..5a88afaeb
--- /dev/null
+++ b/front/src/layout/styles/themes.ts
@@ -0,0 +1,55 @@
+export const lightTheme = {
+  noisyBackground:
+    '#fcfcfc url(data:image/png;base64,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);',
+  primaryBackground: '#fff',
+  secondaryBackground: '#fcfcfc',
+  tertiaryBackground: '#f5f5f5',
+  pinkBackground: '#ffe5f4',
+  greenBackground: '#e6fff2',
+  purpleBackground: '#e0e0ff',
+  yellowBackground: '#fff2e7',
+
+  primaryBorder: 'rgba(0, 0, 0, 0.08)',
+
+  text100: '#000',
+  text80: '#333',
+  text60: '#666',
+  text40: '#999',
+  text30: '#b3b3b3',
+  text20: '#ccc',
+  text0: '#fff',
+
+  blue: '#1961ed',
+  pink: '#cc0078',
+  green: '#1e7e50',
+  purple: '#1111b7',
+  yellow: '#cc660a',
+};
+
+export const darkTheme = {
+  noisyBackground:
+    '#191919 url(data:image/png;base64,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);',
+  primaryBackground: '#141414',
+  secondaryBackground: '#171717',
+  tertiaryBackground: '#333333',
+  pinkBackground: '#cc0078',
+  greenBackground: '#1e7e50',
+  purpleBackground: '#1111b7',
+  yellowBackground: '#cc660a',
+
+  text100: '#ffffff',
+  text80: '#ccc',
+  text60: '#999',
+  text40: '#666',
+  text30: '#4c4c4c',
+  text20: '#333',
+  text0: '#000',
+
+  blue: '#6895ec',
+  pink: '#ffe5f4',
+  green: '#e6fff2',
+  purple: '#e0e0ff',
+  yellow: '#fff2e7',
+};
+
+export type ThemeType = typeof lightTheme;
diff --git a/front/src/layout/top-bar/TopBar.tsx b/front/src/layout/top-bar/TopBar.tsx
new file mode 100644
index 000000000..27341a91a
--- /dev/null
+++ b/front/src/layout/top-bar/TopBar.tsx
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const TopBarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 40px;
+  align-items: center;
+  background: ${(props) => props.theme.noisyBackground};
+  padding: 8px;
+  font-size: 14px;
+  color: ${(props) => props.theme.text80};
+`;
+
+const TitleContainer = styled.div`
+  font-family: 'Inter';
+  margin-left: 4px;
+  font-size: 14px;
+`;
+
+type OwnProps = {
+  title: string;
+  icon: IconProp;
+};
+
+function TopBar({ title, icon }: OwnProps) {
+  return (
+    <>
+      <TopBarContainer>
+        <FontAwesomeIcon icon={icon} />
+        <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
+      </TopBarContainer>
+    </>
+  );
+}
+
+export default TopBar;
diff --git a/front/src/pages/Contacts.tsx b/front/src/pages/Contacts.tsx
deleted file mode 100644
index 9d28c6d59..000000000
--- a/front/src/pages/Contacts.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Contacts() {
-  return (
-    <div>
-      <h1>This is the history page</h1>
-    </div>
-  );
-}
-
-export default Contacts;
diff --git a/front/src/pages/Insights.tsx b/front/src/pages/Insights.tsx
deleted file mode 100644
index f79db7bf5..000000000
--- a/front/src/pages/Insights.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-function Insights() {
-  return (
-    <div>
-      <h1>This is the insights page</h1>
-    </div>
-  );
-}
-
-export default Insights;
diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx
new file mode 100644
index 000000000..d21144f44
--- /dev/null
+++ b/front/src/pages/companies/Companies.tsx
@@ -0,0 +1,12 @@
+import { faBuilding } from '@fortawesome/free-regular-svg-icons';
+import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
+
+function Companies() {
+  return (
+    <WithTopBarContainer title="Companies" icon={faBuilding}>
+      <></>
+    </WithTopBarContainer>
+  );
+}
+
+export default Companies;
diff --git a/front/src/pages/companies/__stories__/Companies.stories.tsx b/front/src/pages/companies/__stories__/Companies.stories.tsx
new file mode 100644
index 000000000..4eb213777
--- /dev/null
+++ b/front/src/pages/companies/__stories__/Companies.stories.tsx
@@ -0,0 +1,18 @@
+import { MemoryRouter } from 'react-router-dom';
+import Companies from '../Companies';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+import AppLayout from '../../../layout/AppLayout';
+
+export default {
+  title: 'Companies',
+  component: Companies,
+};
+
+export const CompaniesDefault = () => (
+  <ThemeProvider theme={lightTheme}>
+    <MemoryRouter>
+      <Companies />
+    </MemoryRouter>
+  </ThemeProvider>
+);
diff --git a/front/src/pages/companies/__tests__/Companies.test.tsx b/front/src/pages/companies/__tests__/Companies.test.tsx
new file mode 100644
index 000000000..dd1007aa8
--- /dev/null
+++ b/front/src/pages/companies/__tests__/Companies.test.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { CompaniesDefault } from '../__stories__/Companies.stories';
+
+it('Checks the Companies page render', () => {
+  const { getByTestId } = render(<CompaniesDefault />);
+
+  const title = getByTestId('top-bar-title');
+  expect(title).toHaveTextContent('Companies');
+});
diff --git a/front/src/pages/inbox/Inbox.tsx b/front/src/pages/inbox/Inbox.tsx
deleted file mode 100644
index e84334a1f..000000000
--- a/front/src/pages/inbox/Inbox.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import FullWidthContainer from '../../layout/containers/FullWidthContainer';
-import DiscussionPanel from './discussion-panel/DiscussionPanel';
-import ListPanel from './list-panel/ListPanel';
-import PluginPanel from './plugin-panel/PluginPanel';
-
-function Inbox() {
-  return (
-    <FullWidthContainer>
-      <>
-        <ListPanel />
-        <DiscussionPanel />
-        <PluginPanel />
-      </>
-    </FullWidthContainer>
-  );
-}
-
-export default Inbox;
diff --git a/front/src/pages/inbox/__stories__/Inbox.stories.tsx b/front/src/pages/inbox/__stories__/Inbox.stories.tsx
deleted file mode 100644
index b91c1fe47..000000000
--- a/front/src/pages/inbox/__stories__/Inbox.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import Inbox from '../Inbox';
-
-export default {
-  title: 'Inbox',
-  component: Inbox,
-};
-
-export const InboxDefault = () => (
-  <MemoryRouter>
-    <Inbox />
-  </MemoryRouter>
-);
diff --git a/front/src/pages/inbox/__tests__/Inbox.test.tsx b/front/src/pages/inbox/__tests__/Inbox.test.tsx
deleted file mode 100644
index 604c664fb..000000000
--- a/front/src/pages/inbox/__tests__/Inbox.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { InboxDefault } from '../__stories__/Inbox.stories';
-
-it('Checks the Inbox page render', () => {
-  const { getAllByRole } = render(<InboxDefault />);
-
-  const button = getAllByRole('button');
-  expect(button[0]).toHaveTextContent('Sylvie Vartan');
-});
diff --git a/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx b/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx
deleted file mode 100644
index cc01d7748..000000000
--- a/front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import styled from '@emotion/styled';
-import Composer from './composer/Composer';
-import Booking, { BookingEvent } from './events/Booking';
-import Message, { MessageEvent } from './events/Message';
-import Note, { NoteEvent } from './events/Note';
-
-export type Event = BookingEvent | MessageEvent | NoteEvent;
-
-const StyledPanel = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-`;
-
-const EventsContainer = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  padding: 32px;
-`;
-
-const StyledToday = styled.div`
-  font-size: 12px;
-  color: #2e3138;
-  border-bottom: 1px solid #eaecee;
-  margin-top: 32px;
-  padding-bottom: 8px;
-  margin-bottom: 8px;
-`;
-
-const ComposerContainer = styled.div`
-  display: flex;
-  padding: 32px;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-
-function DiscussionPanel() {
-  return (
-    <StyledPanel>
-      <EventsContainer>
-        <Booking
-          booking={{
-            id: 1,
-            time: 'Wed, Sep 10, 2022',
-            user: 'Georges',
-            nights: 4,
-            guests: 5,
-            price: '756.90$',
-            listing: 'Rochefort Montagne',
-            dateRange: 'Mon, Sep 30 - Fri, Oct 2',
-          }}
-        />
-        <StyledToday>Today</StyledToday>
-        <Message
-          message={{
-            id: 1,
-            time: '2 hours ago',
-            user: 'Georges Alain',
-            channel: 'sms',
-            message:
-              'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where to look for.',
-          }}
-        />
-        <Message
-          message={{
-            id: 2,
-            time: 'just now',
-            user: 'Support',
-            channel: 'sms',
-            message: 'Hello I’m here bla bla bla',
-            agent: 'Leslie A',
-          }}
-        />
-        <Note
-          note={{
-            id: 1,
-            time: 'just now',
-            agent: 'LeslieA',
-            message: 'Hello I’m here bla bla bla',
-          }}
-        />
-        <Message
-          message={{
-            id: 3,
-            time: 'just now',
-            user: 'Georges Alain',
-            channel: 'sms',
-            message: 'Thank you !',
-          }}
-        />
-      </EventsContainer>
-      <ComposerContainer>
-        <Composer />
-      </ComposerContainer>
-    </StyledPanel>
-  );
-}
-
-export default DiscussionPanel;
diff --git a/front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx b/front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx
deleted file mode 100644
index 0a4b2bc9b..000000000
--- a/front/src/pages/inbox/discussion-panel/__stories__/DiscussionPanel.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import DiscussionPanel from '../DiscussionPanel';
-
-export default {
-  title: 'DiscussionPanel',
-  component: DiscussionPanel,
-};
-
-export const DiscussionPanelDefault = () => <DiscussionPanel />;
diff --git a/front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx b/front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx
deleted file mode 100644
index 3ca23ce29..000000000
--- a/front/src/pages/inbox/discussion-panel/__tests__/DiscussionPanel.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { DiscussionPanelDefault } from '../__stories__/DiscussionPanel.stories';
-
-it('Checks the discussion panel render', () => {
-  const { getAllByText } = render(<DiscussionPanelDefault />);
-
-  const text = getAllByText('Rochefort Montagne');
-  expect(text).toBeDefined();
-});
diff --git a/front/src/pages/inbox/discussion-panel/composer/Composer.tsx b/front/src/pages/inbox/discussion-panel/composer/Composer.tsx
deleted file mode 100644
index 21580df38..000000000
--- a/front/src/pages/inbox/discussion-panel/composer/Composer.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import styled from '@emotion/styled';
-import ComposerSwitch from './ComposerSwitch';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  border: 2px solid #000000;
-  border-radius: 12px;
-`;
-
-const StyledInputContainer = styled.div`
-  display: flex;
-  padding: 8px;
-  justify-content: center;
-  & > textarea {
-    width: 95%;
-    border: none;
-    outline: none;
-    font-family: 'Source Sans Pro';
-
-    &::placeholder {
-      font-family: 'Source Sans Pro';
-    }
-  }
-`;
-
-const ActionContainer = styled.div`
-  display: flex;
-  padding: 16px;
-  justify-content: flex-end;
-`;
-
-const PrimaryButton = styled.button`
-  background: black;
-  font-weight: bold;
-  color: white;
-  padding: 16px 24px;
-  border: 0;
-  border-radius: 12px;
-  cursor: pointer;
-`;
-
-function Composer() {
-  return (
-    <StyledContainer>
-      <ComposerSwitch />
-      <StyledInputContainer>
-        <textarea rows={5} placeholder="Type to chat..."></textarea>
-      </StyledInputContainer>
-      <ActionContainer>
-        <PrimaryButton>Reply by SMS</PrimaryButton>
-      </ActionContainer>
-    </StyledContainer>
-  );
-}
-
-export default Composer;
diff --git a/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx b/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx
deleted file mode 100644
index f6ecf4bd0..000000000
--- a/front/src/pages/inbox/discussion-panel/composer/ComposerSwitch.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import styled from '@emotion/styled';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  border-bottom: 2px solid #eaecee;
-  padding: 0px 12px;
-`;
-
-const SwitchTab = styled.button`
-  display: flex;
-  border-bottom: 2px solid #eaecee;
-  margin-bottom: -2px;
-  padding: 12px;
-  cursor: pointer;
-  color: #2e3138;
-  background: inherit;
-  border: 0;
-
-  &:hover {
-    border-bottom: 2px solid #2e3138;
-  }
-`;
-
-const SwitchTabActive = styled.button`
-  display: flex;
-  border: 0;
-  border-bottom: 2px solid black;
-  margin-bottom: -2px;
-  padding: 12px;
-  cursor: pointer;
-  color: black;
-  font-weight: bold;
-  background: inherit;
-`;
-
-function ComposerSwitch() {
-  return (
-    <StyledContainer>
-      <SwitchTabActive>Reply</SwitchTabActive>
-      <SwitchTab>Call</SwitchTab>
-      <SwitchTab>Note</SwitchTab>
-      <SwitchTab>Transfer</SwitchTab>
-      <SwitchTab>Help</SwitchTab>
-    </StyledContainer>
-  );
-}
-
-export default ComposerSwitch;
diff --git a/front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx b/front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx
deleted file mode 100644
index e2c3f18c7..000000000
--- a/front/src/pages/inbox/discussion-panel/composer/__stories__/Composer.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Composer from '../Composer';
-
-export default {
-  title: 'Composer',
-  component: Composer,
-};
-
-export const ComposerDefault = () => <Composer />;
diff --git a/front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx b/front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx
deleted file mode 100644
index e1cdb42c7..000000000
--- a/front/src/pages/inbox/discussion-panel/composer/__stories__/ComposerSwitch.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import ComposerSwitch from '../ComposerSwitch';
-
-export default {
-  title: 'Composer',
-  component: ComposerSwitch,
-};
-
-export const ComposerSwithDefault = () => <ComposerSwitch />;
diff --git a/front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx b/front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx
deleted file mode 100644
index 1952c572b..000000000
--- a/front/src/pages/inbox/discussion-panel/composer/__tests__/Composer.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { ComposerDefault } from '../__stories__/Composer.stories';
-
-it('Checks the composer render', () => {
-  const { getAllByRole } = render(<ComposerDefault />);
-
-  const button = getAllByRole('button');
-  expect(button[0]).toHaveTextContent('Reply');
-});
diff --git a/front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx b/front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx
deleted file mode 100644
index 1d24c87ef..000000000
--- a/front/src/pages/inbox/discussion-panel/composer/__tests__/ComposerSwitch.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { ComposerSwithDefault } from '../__stories__/ComposerSwitch.stories';
-
-it('Checks the composer switch render', () => {
-  const { getAllByRole } = render(<ComposerSwithDefault />);
-
-  const button = getAllByRole('button');
-  expect(button[0]).toHaveTextContent('Reply');
-});
diff --git a/front/src/pages/inbox/discussion-panel/events/Booking.tsx b/front/src/pages/inbox/discussion-panel/events/Booking.tsx
deleted file mode 100644
index 8e8ac67e4..000000000
--- a/front/src/pages/inbox/discussion-panel/events/Booking.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import styled from '@emotion/styled';
-
-export type BookingEvent = {
-  id: number;
-  user: string;
-  time: string;
-  listing: string;
-  nights: number;
-  guests: number;
-  price: string;
-  dateRange: string;
-};
-
-type OwnProps = {
-  booking: BookingEvent;
-};
-
-const StyledBooking = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledLabel = styled.div`
-  font-size: 12px;
-  color: #2e3138;
-  margin-bottom: 8px;
-`;
-
-const StyledContainer = styled.div`
-  display: flex;
-  padding: 16px;
-  flex-direction: row;
-  border: 1px solid #000000;
-  border-radius: 12px;
-`;
-
-const StyledPicture = styled.div`
-  background: #2e3138;
-  width: 50px;
-  height: 42px;
-  margin-right: 16px;
-`;
-
-const StyledContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const StyledListing = styled.div`
-  font-size: 16px;
-  font-weight: bold;
-`;
-
-const StyledDetails = styled.div`
-  font-size: 12px;
-  color: #2e3138;
-`;
-
-function Booking({ booking }: OwnProps) {
-  return (
-    <StyledBooking>
-      <StyledLabel>
-        {booking.time} · {booking.user} booked a trip
-      </StyledLabel>
-      <StyledContainer>
-        <StyledPicture />
-        <StyledContent>
-          <StyledListing>{booking.listing}</StyledListing>
-          <StyledDetails>
-            {booking.dateRange} · {booking.nights} nights · {booking.guests}{' '}
-            guests · {booking.price}
-          </StyledDetails>
-        </StyledContent>
-      </StyledContainer>
-    </StyledBooking>
-  );
-}
-
-export default Booking;
diff --git a/front/src/pages/inbox/discussion-panel/events/Message.tsx b/front/src/pages/inbox/discussion-panel/events/Message.tsx
deleted file mode 100644
index 29e2c9ff3..000000000
--- a/front/src/pages/inbox/discussion-panel/events/Message.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import styled from '@emotion/styled';
-
-export type MessageEvent = {
-  id: number;
-  user: string;
-  time: string;
-  channel: string;
-  message: string;
-  agent?: string;
-};
-
-type OwnProps = {
-  message: MessageEvent;
-};
-
-const StyledMessage = styled.div`
-  display: flex;
-  margin-top: 12px;
-  margin-bottom: 20px;
-`;
-
-const StyledAvatar = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  border-radius: 40px;
-  background: black;
-  font-size: 20px;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  margin-right: 16px;
-  flex-shrink: 0;
-`;
-
-const StyledContent = styled.div``;
-
-const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const StyledUser = styled.div`
-  font-size: 16px;
-  color: black;
-  font-weight: bold;
-`;
-
-const StyledTime = styled.div`
-  margin-left: 8px;
-  font-size: 12px;
-  color: #2e3138;
-`;
-
-const StyledAgent = styled.div`
-  text-decoration: underline;
-  margin-left: 4px;
-  font-size: 12px;
-  color: #2e3138;
-`;
-
-const StyledDetails = styled.div`
-  margin-top: 8px;
-`;
-
-function Message({ message }: OwnProps) {
-  return (
-    <StyledMessage>
-      <StyledAvatar>
-        {message.user
-          .split(' ')
-          .map((n) => n[0])
-          .join('')}
-      </StyledAvatar>
-      <StyledContent>
-        <StyledTitle>
-          <StyledUser>{message.user}</StyledUser>
-          <StyledTime>
-            {message.time} ({message.channel})
-          </StyledTime>
-          {message.agent && <StyledAgent>by {message.agent}</StyledAgent>}
-        </StyledTitle>
-        <StyledDetails>{message.message}</StyledDetails>
-      </StyledContent>
-    </StyledMessage>
-  );
-}
-
-export default Message;
diff --git a/front/src/pages/inbox/discussion-panel/events/Note.tsx b/front/src/pages/inbox/discussion-panel/events/Note.tsx
deleted file mode 100644
index be16cb7ef..000000000
--- a/front/src/pages/inbox/discussion-panel/events/Note.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import styled from '@emotion/styled';
-
-export type NoteEvent = {
-  id: number;
-  time: string;
-  message: string;
-  agent: string;
-};
-
-type OwnProps = {
-  note: NoteEvent;
-};
-
-const StyledNote = styled.div`
-  display: flex;
-  background: #f8f9fa;
-  border-left: 4px solid black;
-  padding: 8px 20px;
-  flex-direction: column;
-  margin-top: 12px;
-  margin-bottom: 20px;
-`;
-
-const StyledLabel = styled.div`
-  font-size: 12px;
-  color: #2e3138;
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: row;
-`;
-
-const StyledAgent = styled.div`
-  text-decoration: underline;
-  margin-left: 4px;
-  font-size: 12px;
-  color: #2e3138;
-`;
-
-const StyledMessage = styled.div``;
-
-function Note({ note }: OwnProps) {
-  return (
-    <StyledNote>
-      <StyledLabel>
-        Internal Note {note.time} <StyledAgent>by {note.agent}</StyledAgent>
-      </StyledLabel>
-      <StyledMessage>{note.message}</StyledMessage>
-    </StyledNote>
-  );
-}
-
-export default Note;
diff --git a/front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx b/front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx
deleted file mode 100644
index 79c85f74c..000000000
--- a/front/src/pages/inbox/discussion-panel/events/__stories__/Booking.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Booking from '../Booking';
-
-export default {
-  title: 'DiscussionPanel',
-  component: Booking,
-};
-
-export const BookingDefault = () => (
-  <Booking
-    booking={{
-      id: 1,
-      time: 'Wed, Sep 10, 2022',
-      user: 'Georges',
-      nights: 4,
-      guests: 5,
-      price: '756.90$',
-      listing: 'Rochefort Montagne',
-      dateRange: 'Mon, Sep 30 - Fri, Oct 2',
-    }}
-  />
-);
diff --git a/front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx b/front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx
deleted file mode 100644
index 37aa5b487..000000000
--- a/front/src/pages/inbox/discussion-panel/events/__stories__/Message.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Message from '../Message';
-
-export default {
-  title: 'DiscussionPanel',
-  component: Message,
-};
-
-export const MessageDefault = () => (
-  <Message
-    message={{
-      id: 1,
-      time: '2 hours ago',
-      user: 'Georges Alain',
-      channel: 'sms',
-      message:
-        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where to look for.',
-    }}
-  />
-);
diff --git a/front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx b/front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx
deleted file mode 100644
index 341e024c1..000000000
--- a/front/src/pages/inbox/discussion-panel/events/__stories__/Note.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Note from '../Note';
-
-export default {
-  title: 'DiscussionPanel',
-  component: Note,
-};
-
-export const NoteDefault = () => (
-  <Note
-    note={{
-      id: 1,
-      time: 'just now',
-      agent: 'LeslieA',
-      message: 'Hello I’m here bla bla bla',
-    }}
-  />
-);
diff --git a/front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx b/front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx
deleted file mode 100644
index ef0d43994..000000000
--- a/front/src/pages/inbox/discussion-panel/events/__tests__/Booking.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { BookingDefault } from '../__stories__/Booking.stories';
-
-it('Checks the booking event render', () => {
-  const { getAllByText } = render(<BookingDefault />);
-
-  const text = getAllByText('Rochefort Montagne');
-  expect(text).toBeDefined();
-});
diff --git a/front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx b/front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx
deleted file mode 100644
index 34bbe2b5d..000000000
--- a/front/src/pages/inbox/discussion-panel/events/__tests__/Message.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { MessageDefault } from '../__stories__/Message.stories';
-
-it('Checks the booking event render', () => {
-  const { getAllByText } = render(<MessageDefault />);
-
-  const text = getAllByText('Georges Alain');
-  expect(text).toBeDefined();
-});
diff --git a/front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx b/front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx
deleted file mode 100644
index 509226033..000000000
--- a/front/src/pages/inbox/discussion-panel/events/__tests__/Note.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { NoteDefault } from '../__stories__/Note.stories';
-
-it('Checks the booking event render', () => {
-  const { getAllByText } = render(<NoteDefault />);
-
-  const text = getAllByText('Hello I’m here bla bla bla');
-  expect(text).toBeDefined();
-});
diff --git a/front/src/pages/inbox/list-panel/ListPanel.tsx b/front/src/pages/inbox/list-panel/ListPanel.tsx
deleted file mode 100644
index cf1752d89..000000000
--- a/front/src/pages/inbox/list-panel/ListPanel.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from '@emotion/styled';
-import ListPanelHeader from './ListPanelHeader';
-import ListPanelItem from './ListPanelItem';
-
-const StyledList = styled.div`
-  display: flex;
-  width: 325px;
-  flex-direction: column;
-  border-right: 2px solid #eaecee;
-`;
-
-export type Task = {
-  id: number;
-  targetUser: string;
-  label: string;
-  time: string;
-  lastMessage: string;
-};
-
-function ListPanel() {
-  const tasks: Task[] = [
-    {
-      id: 1,
-      targetUser: 'Sylvie Vartan',
-      label: 'Guest at #xxx property',
-      time: '3h',
-      lastMessage:
-        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where ...',
-    },
-    {
-      id: 2,
-      targetUser: 'Johnny Halliday',
-      label: 'Guest at #xxx property',
-      time: '4h',
-      lastMessage: 'Hello, this is Johnny',
-    },
-  ];
-  return (
-    <StyledList>
-      <>
-        <ListPanelHeader />
-        {tasks.map((item) => (
-          <ListPanelItem key={item.id} task={item} />
-        ))}
-      </>
-    </StyledList>
-  );
-}
-
-export default ListPanel;
diff --git a/front/src/pages/inbox/list-panel/ListPanelHeader.tsx b/front/src/pages/inbox/list-panel/ListPanelHeader.tsx
deleted file mode 100644
index 1d0a0ad81..000000000
--- a/front/src/pages/inbox/list-panel/ListPanelHeader.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-const StyledHeader = styled.div`
-  display: flex;
-  font-weight: bold;
-  align-items: center;
-  padding: 16px 24px;
-  font-size: 18px;
-  letter-spacing: 1px;
-  border-bottom: 1px solid #eaecee;
-`;
-
-function ListPanelHeader() {
-  return <StyledHeader>6 tasks waiting</StyledHeader>;
-}
-
-export default ListPanelHeader;
diff --git a/front/src/pages/inbox/list-panel/ListPanelItem.tsx b/front/src/pages/inbox/list-panel/ListPanelItem.tsx
deleted file mode 100644
index c1a7d570d..000000000
--- a/front/src/pages/inbox/list-panel/ListPanelItem.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import styled from '@emotion/styled';
-import { Task } from './ListPanel';
-
-type OwnProps = {
-  task: Task;
-};
-
-const StyledListItem = styled.button`
-  display: flex;
-  padding: 16px 24px;
-  flex-direction: column;
-  color: #2e3138;
-  border: 0;
-  border-bottom: 1px solid #eaecee;
-  cursor: pointer;
-  font-family: inherit;
-  text-align: inherit;
-  align-items: inherit;
-  background: #f1f3f5;
-`;
-
-const StyledHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledAvatarAndTitle = styled.div`
-  display: flex;
-`;
-
-const StyledAvatar = styled.div`
-  display: flex;
-  width: 40px;
-  height: 40px;
-  border-radius: 40px;
-  background: #52555b;
-  font-size: 20px;
-  color: white;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-`;
-
-const StyledTitle = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 8px;
-`;
-
-const StyledName = styled.div`
-  font-weight: bold;
-  font-size: 18px;
-  color: black;
-`;
-
-const StyledLabel = styled.div`
-  display: flex;
-  font-size: 14px;
-`;
-
-const StyledTime = styled.div`
-  display: flex;
-  justify-self: flex-end;
-  color: #7d8187;
-  font-size: 14px;
-`;
-
-const StyledContent = styled.div`
-  display: flex;
-  color: #52555b;
-  font-size: 14px;
-  margin-top: 8px;
-`;
-
-function ListPanelItem({ task }: OwnProps) {
-  return (
-    <StyledListItem>
-      <StyledHeader>
-        <StyledAvatarAndTitle>
-          <StyledAvatar>
-            {task.targetUser
-              .split(' ')
-              .map((n) => n[0])
-              .join('')}
-          </StyledAvatar>
-          <StyledTitle>
-            <StyledName>{task.targetUser}</StyledName>
-            <StyledLabel>{task.label}</StyledLabel>
-          </StyledTitle>
-        </StyledAvatarAndTitle>
-        <StyledTime>{task.time}</StyledTime>
-      </StyledHeader>
-      <StyledContent>{task.lastMessage} </StyledContent>
-    </StyledListItem>
-  );
-}
-
-export default ListPanelItem;
diff --git a/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx
deleted file mode 100644
index bda65c434..000000000
--- a/front/src/pages/inbox/list-panel/__stories__/ListPanel.stories.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import ListPanel from '../ListPanel';
-
-export default {
-  title: 'ListPanel',
-  component: ListPanel,
-};
-
-export const ListPanelDefault = () => <ListPanel />;
diff --git a/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx
deleted file mode 100644
index 7d62efedd..000000000
--- a/front/src/pages/inbox/list-panel/__stories__/ListPanelHeader.stories.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import ListPanelHeader from '../ListPanelHeader';
-
-export default {
-  title: 'ListPanel',
-  component: ListPanelHeader,
-};
-
-export const ListPanelHeaderDefault = () => <ListPanelHeader />;
diff --git a/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx b/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx
deleted file mode 100644
index 642ae4e07..000000000
--- a/front/src/pages/inbox/list-panel/__stories__/ListPanelItem.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import ListPanelItem from '../ListPanelItem';
-
-export default {
-  title: 'ListPanel',
-  component: ListPanelItem,
-};
-
-export const ListPanelItemDefault = () => (
-  <ListPanelItem
-    task={{
-      id: 1,
-      targetUser: 'Sylvie Vartan',
-      label: 'Guest at #xxx property',
-      time: '3h',
-      lastMessage:
-        'I’m looking for my order but couldn’t find it. Could you help me find it. I don’t know where ...',
-    }}
-  />
-);
diff --git a/front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx
deleted file mode 100644
index c34294777..000000000
--- a/front/src/pages/inbox/list-panel/__tests__/ListPanel.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { ListPanelDefault } from '../__stories__/ListPanel.stories';
-
-it('Checks the task list render', () => {
-  const { getAllByRole } = render(<ListPanelDefault />);
-
-  const button = getAllByRole('button');
-  expect(button[0]).toHaveTextContent('Sylvie Vartan');
-});
diff --git a/front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx
deleted file mode 100644
index 5c18987ba..000000000
--- a/front/src/pages/inbox/list-panel/__tests__/ListPanelHeader.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { ListPanelHeaderDefault } from '../__stories__/ListPanelHeader.stories';
-
-it('Checks the ListPanelHeader render', () => {
-  const { getAllByText } = render(<ListPanelHeaderDefault />);
-
-  const text = getAllByText('6 tasks waiting');
-  expect(text).toBeDefined();
-});
diff --git a/front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx b/front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx
deleted file mode 100644
index efe251375..000000000
--- a/front/src/pages/inbox/list-panel/__tests__/ListPanelItem.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { ListPanelItemDefault } from '../__stories__/ListPanelItem.stories';
-
-it('Checks the ListPanelItem render', () => {
-  const { getAllByText } = render(<ListPanelItemDefault />);
-
-  const text = getAllByText('Sylvie Vartan');
-  expect(text).toBeDefined();
-});
diff --git a/front/src/pages/inbox/plugin-panel/PluginPanel.tsx b/front/src/pages/inbox/plugin-panel/PluginPanel.tsx
deleted file mode 100644
index bf5acc7f1..000000000
--- a/front/src/pages/inbox/plugin-panel/PluginPanel.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from '@emotion/styled';
-import PluginPanelNav from './PluginPanelNav';
-import PluginHistory from './plugin-history/PanelHistory';
-
-const StyledPanel = styled.div`
-  display: flex;
-  width: 350px;
-  border-left: 1px solid #eaecee;
-`;
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-grow: 1;
-`;
-
-function PluginPanel() {
-  return (
-    <StyledPanel>
-      <StyledContainer>
-        <PluginHistory />
-      </StyledContainer>
-      <PluginPanelNav />
-    </StyledPanel>
-  );
-}
-
-export default PluginPanel;
diff --git a/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx b/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx
deleted file mode 100644
index 296526d6f..000000000
--- a/front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import styled from '@emotion/styled';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClone } from '@fortawesome/free-regular-svg-icons';
-
-const StyledNav = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 60px;
-  border-left: 1px solid #eaecee;
-  background: #f1f3f5;
-`;
-
-const StyledNavItem = styled.div`
-  display: flex;
-  width: 60px;
-  border-bottom: 1px solid #eaecee;
-  padding: 22px;
-  cursor: pointer;
-`;
-
-function PluginPanelNav() {
-  return (
-    <StyledNav>
-      <StyledNavItem>
-        <FontAwesomeIcon icon={faClone} size="lg" />
-      </StyledNavItem>
-      <StyledNavItem>
-        <FontAwesomeIcon icon={faClone} size="lg" />
-      </StyledNavItem>
-      <StyledNavItem>
-        <FontAwesomeIcon icon={faClone} size="lg" />
-      </StyledNavItem>
-      <StyledNavItem>
-        <FontAwesomeIcon icon={faClone} size="lg" />
-      </StyledNavItem>
-      <StyledNavItem>
-        <FontAwesomeIcon icon={faClone} size="lg" />
-      </StyledNavItem>
-      <StyledNavItem>
-        <FontAwesomeIcon icon={faClone} size="lg" />
-      </StyledNavItem>
-    </StyledNav>
-  );
-}
-
-export default PluginPanelNav;
diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx
deleted file mode 100644
index fc58aed0f..000000000
--- a/front/src/pages/inbox/plugin-panel/plugin-history/PanelHistory.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function PluginHistory() {
-  return <div></div>;
-}
-
-export default PluginHistory;
diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx
deleted file mode 100644
index 5109fbf57..000000000
--- a/front/src/pages/inbox/plugin-panel/plugin-history/UserActivity.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from '@emotion/styled';
-
-function UserActivity() {
-  return;
-}
-
-export default UserActivity;
diff --git a/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx b/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx
deleted file mode 100644
index c060da814..000000000
--- a/front/src/pages/inbox/plugin-panel/plugin-history/UserInformation.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from '@emotion/styled';
-
-function UserInformation() {
-  return;
-}
-
-export default UserInformation;
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
new file mode 100644
index 000000000..c3ec377e2
--- /dev/null
+++ b/front/src/pages/people/People.tsx
@@ -0,0 +1,12 @@
+import { faUser } from '@fortawesome/free-regular-svg-icons';
+import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
+
+function People() {
+  return (
+    <WithTopBarContainer title="People" icon={faUser}>
+      <></>
+    </WithTopBarContainer>
+  );
+}
+
+export default People;
diff --git a/front/src/pages/people/__stories__/People.stories.tsx b/front/src/pages/people/__stories__/People.stories.tsx
new file mode 100644
index 000000000..98a6d427a
--- /dev/null
+++ b/front/src/pages/people/__stories__/People.stories.tsx
@@ -0,0 +1,17 @@
+import { MemoryRouter } from 'react-router-dom';
+import People from '../People';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+export default {
+  title: 'People',
+  component: People,
+};
+
+export const PeopleDefault = () => (
+  <ThemeProvider theme={lightTheme}>
+    <MemoryRouter>
+      <People />
+    </MemoryRouter>
+  </ThemeProvider>
+);
diff --git a/front/src/pages/people/__tests__/People.test.tsx b/front/src/pages/people/__tests__/People.test.tsx
new file mode 100644
index 000000000..ce20166a7
--- /dev/null
+++ b/front/src/pages/people/__tests__/People.test.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { PeopleDefault } from '../__stories__/People.stories';
+
+it('Checks the People page render', () => {
+  const { getByTestId } = render(<PeopleDefault />);
+
+  const title = getByTestId('top-bar-title');
+  expect(title).toHaveTextContent('People');
+});
diff --git a/infra/dev/Makefile b/infra/dev/Makefile
index 9d2e986f7..dc2a1ccac 100644
--- a/infra/dev/Makefile
+++ b/infra/dev/Makefile
@@ -8,10 +8,10 @@ sh: ##
 	@docker-compose exec twenty sh
 
 front-test: ## 
-	@docker-compose exec twenty sh -c "npm run test"
+	@docker-compose exec twenty sh -c "cd front && npm run test"
 
 front-coverage: ## 
-	@docker-compose exec twenty sh -c "npm run coverage"
+	@docker-compose exec twenty sh -c "cd front && npm run coverage"
 
 front-storybook: ## 
-	@docker-compose exec twenty sh -c "npm run storybook"
+	@docker-compose exec twenty sh -c "cd front && npm run storybook"
diff --git a/infra/dev/twenty/Dockerfile b/infra/dev/twenty/Dockerfile
index b8854173c..e5edcfce9 100644
--- a/infra/dev/twenty/Dockerfile
+++ b/infra/dev/twenty/Dockerfile
@@ -1,5 +1,9 @@
 FROM node:18-alpine as app
 
+RUN apk update && apk upgrade && \
+    apk add --no-cache bash git openssh && \
+    apk add libc6-compat
+
 WORKDIR /app
 COPY ../.. .