From 433962321a1c30ae11a73ceac18692acb7f328be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Fri, 30 Jun 2023 08:26:06 +0200
Subject: [PATCH] feat: onboarding ui flow (#464)

* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug
---
 .vscode/settings.json                         |   1 -
 front/.storybook/main.js                      |   5 +-
 front/.storybook/preview-head.html            |   5 +-
 front/package.json                            |   3 +
 front/src/App.tsx                             |  38 ++-
 front/src/AppWrapper.tsx                      |  23 --
 front/src/index.css                           |   2 +-
 front/src/index.tsx                           |  20 +-
 .../modules/auth/components/ui/FooterNote.tsx |  10 +-
 .../modules/auth/components/ui/InputLabel.tsx |  16 --
 front/src/modules/auth/components/ui/Logo.tsx |  11 +-
 .../src/modules/auth/components/ui/Modal.tsx  |  18 +-
 .../modules/auth/components/ui/Section.tsx    |  31 +++
 .../src/modules/auth/components/ui/Title.tsx  |  20 +-
 .../src/modules/ui/components/board/Board.tsx |   4 +-
 .../modules/ui/components/buttons/Button.tsx  | 152 ++++++++++++
 .../ui/components/buttons/MainButton.tsx      |  87 +++++++
 .../ui/components/buttons/PrimaryButton.tsx   |  42 ----
 .../ui/components/buttons/SecondaryButton.tsx |  43 ----
 .../buttons/__stories__/Button.stories.tsx    | 230 ++++++++++++++++++
 .../__stories__/MainButton.stories.tsx        | 104 ++++++++
 .../__stories__/PrimaryButton.stories.tsx     |  47 ----
 .../__stories__/SecondaryButton.stories.tsx   |  47 ----
 .../editable-cell/types/EditableDate.tsx      |   4 +-
 .../ui/components/inputs/ImageInput.tsx       | 123 ++++++++++
 .../ui/components/inputs/TextInput.tsx        |  57 +++--
 .../src/modules/ui/components/modal/Modal.tsx |  69 ++++--
 .../ui/components/motion/AnimatedEaseIn.tsx   |  29 +++
 .../ui/components/motion/AnimatedTextWord.tsx |  70 ++++++
 front/src/modules/ui/icons/index.ts           |   2 +
 front/src/modules/ui/layout/AuthLayout.tsx    |  11 +
 .../ui/layout/navbar/NavCollapseButton.tsx    |   4 +-
 .../ui/layout/navbar/NavbarContainer.tsx      |  16 +-
 front/src/modules/ui/themes/boxShadow.ts      |   2 +
 front/src/modules/ui/themes/colors.ts         |   1 +
 front/src/pages/auth/CreateProfile.tsx        |  92 +++++++
 front/src/pages/auth/CreateWorkspace.tsx      |  74 ++++++
 front/src/pages/auth/Index.tsx                |  92 ++++---
 front/src/pages/auth/PasswordLogin.tsx        |  78 +++---
 front/src/providers/apollo/ApolloProvider.tsx |   6 +-
 front/src/providers/user/UserProvider.tsx     |   6 +-
 front/yarn.lock                               | 147 ++++++++++-
 infra/dev/package-lock.json                   |   6 -
 server/package.json                           |   4 +-
 server/yarn.lock                              |  10 +
 45 files changed, 1461 insertions(+), 401 deletions(-)
 delete mode 100644 front/src/AppWrapper.tsx
 delete mode 100644 front/src/modules/auth/components/ui/InputLabel.tsx
 create mode 100644 front/src/modules/auth/components/ui/Section.tsx
 create mode 100644 front/src/modules/ui/components/buttons/Button.tsx
 create mode 100644 front/src/modules/ui/components/buttons/MainButton.tsx
 delete mode 100644 front/src/modules/ui/components/buttons/PrimaryButton.tsx
 delete mode 100644 front/src/modules/ui/components/buttons/SecondaryButton.tsx
 create mode 100644 front/src/modules/ui/components/buttons/__stories__/Button.stories.tsx
 create mode 100644 front/src/modules/ui/components/buttons/__stories__/MainButton.stories.tsx
 delete mode 100644 front/src/modules/ui/components/buttons/__stories__/PrimaryButton.stories.tsx
 delete mode 100644 front/src/modules/ui/components/buttons/__stories__/SecondaryButton.stories.tsx
 create mode 100644 front/src/modules/ui/components/inputs/ImageInput.tsx
 create mode 100644 front/src/modules/ui/components/motion/AnimatedEaseIn.tsx
 create mode 100644 front/src/modules/ui/components/motion/AnimatedTextWord.tsx
 create mode 100644 front/src/modules/ui/layout/AuthLayout.tsx
 create mode 100644 front/src/pages/auth/CreateProfile.tsx
 create mode 100644 front/src/pages/auth/CreateWorkspace.tsx
 delete mode 100644 infra/dev/package-lock.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2311f1916..9696c8c80 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,7 +31,6 @@
     "!javascript",
     "!json",
     "!typescript",
-    "!typescriptreact",
     "md",
     "mdx"
   ],
diff --git a/front/.storybook/main.js b/front/.storybook/main.js
index 4d4d827e6..fc1005781 100644
--- a/front/.storybook/main.js
+++ b/front/.storybook/main.js
@@ -52,8 +52,9 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-coverage",
-    "@storybook/addon-styling"
-
+    "@storybook/addon-styling",
+    "@storybook/addon-knobs",
+    "storybook-addon-pseudo-states",
   ],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/front/.storybook/preview-head.html b/front/.storybook/preview-head.html
index 5d0269ace..38d225385 100644
--- a/front/.storybook/preview-head.html
+++ b/front/.storybook/preview-head.html
@@ -1,4 +1,7 @@
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
+<link
+href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+rel="stylesheet"
+/>
 <style type="text/css">
 body {
   margin: 0;
diff --git a/front/package.json b/front/package.json
index 5a29c96eb..4580da5e5 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,6 +18,7 @@
     "apollo-link-rest": "^0.9.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
+    "framer-motion": "^10.12.17",
     "graphql": "^16.6.0",
     "hex-rgb": "^5.0.0",
     "js-cookie": "^3.0.5",
@@ -97,6 +98,7 @@
     "@storybook/addon-coverage": "^0.0.8",
     "@storybook/addon-essentials": "^7.0.22",
     "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addon-links": "^7.0.22",
     "@storybook/addon-styling": "^1.3.0",
     "@storybook/jest": "^0.1.0",
@@ -141,6 +143,7 @@
     "prop-types": "^15.8.1",
     "react-scripts": "5.0.1",
     "storybook": "^7.0.22",
+    "storybook-addon-pseudo-states": "^2.1.0",
     "ts-jest": "^29.1.0",
     "typescript": "^4.9.3",
     "webpack": "^5.75.0"
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 0d227bf0b..3d8dd82dd 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,10 +1,15 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { AnimatePresence, LayoutGroup } from 'framer-motion';
 
 import { useTrackPageView } from '@/analytics/hooks/useTrackPageView';
 import { RequireAuth } from '@/auth/components/RequireAuth';
 import { RequireNotAuth } from '@/auth/components/RequireNotAuth';
+import { AuthModal } from '@/auth/components/ui/Modal';
 import { useGoToHotkeys } from '@/hotkeys/hooks/useGoToHotkeys';
+import { AuthLayout } from '@/ui/layout/AuthLayout';
 import { DefaultLayout } from '@/ui/layout/DefaultLayout';
+import { CreateProfile } from '~/pages/auth/CreateProfile';
+import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
 import { Index } from '~/pages/auth/Index';
 import { PasswordLogin } from '~/pages/auth/PasswordLogin';
 import { Verify } from '~/pages/auth/Verify';
@@ -13,6 +18,29 @@ import { Opportunities } from '~/pages/opportunities/Opportunities';
 import { People } from '~/pages/people/People';
 import { SettingsProfile } from '~/pages/settings/SettingsProfile';
 
+/**
+ * AuthRoutes is used to allow transitions between auth pages with framer-motion.
+ */
+function AuthRoutes() {
+  const location = useLocation();
+
+  return (
+    <LayoutGroup>
+      <AuthModal>
+        <AnimatePresence mode="wait">
+          <Routes location={location} key={location.pathname}>
+            <Route path="" element={<Index />} />
+            <Route path="callback" element={<Verify />} />
+            <Route path="password-login" element={<PasswordLogin />} />
+            <Route path="create/workspace" element={<CreateWorkspace />} />
+            <Route path="create/profile" element={<CreateProfile />} />
+          </Routes>
+        </AnimatePresence>
+      </AuthModal>
+    </LayoutGroup>
+  );
+}
+
 export function App() {
   useGoToHotkeys('p', '/people');
   useGoToHotkeys('c', '/companies');
@@ -49,11 +77,9 @@ export function App() {
           path="auth/*"
           element={
             <RequireNotAuth>
-              <Routes>
-                <Route path="" element={<Index />} />
-                <Route path="callback" element={<Verify />} />
-                <Route path="password-login" element={<PasswordLogin />} />
-              </Routes>
+              <AuthLayout>
+                <AuthRoutes />
+              </AuthLayout>
             </RequireNotAuth>
           }
         />
diff --git a/front/src/AppWrapper.tsx b/front/src/AppWrapper.tsx
deleted file mode 100644
index d3784e6ab..000000000
--- a/front/src/AppWrapper.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { StrictMode } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-
-import { ApolloProvider } from './providers/apollo/ApolloProvider';
-import { AppThemeProvider } from './providers/theme/AppThemeProvider';
-import { UserProvider } from './providers/user/UserProvider';
-import { App } from './App';
-
-export function AppWrapper() {
-  return (
-    <ApolloProvider>
-      <BrowserRouter>
-        <AppThemeProvider>
-          <StrictMode>
-            <UserProvider>
-              <App />
-            </UserProvider>
-          </StrictMode>
-        </AppThemeProvider>
-      </BrowserRouter>
-    </ApolloProvider>
-  );
-}
diff --git a/front/src/index.css b/front/src/index.css
index f818d2cc4..5c9b489dc 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: 'Inter';
+  font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/front/src/index.tsx b/front/src/index.tsx
index 70090c80f..7c3ec9b30 100644
--- a/front/src/index.tsx
+++ b/front/src/index.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
 import { ThemeType } from '@/ui/themes/themes';
 
 import '@emotion/react';
 
-import { AppWrapper } from './AppWrapper';
+import { ApolloProvider } from './providers/apollo/ApolloProvider';
+import { AppThemeProvider } from './providers/theme/AppThemeProvider';
+import { UserProvider } from './providers/user/UserProvider';
+import { App } from './App';
 
 import './index.css';
 
@@ -16,7 +20,17 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <RecoilRoot>
-    <AppWrapper />
+    <ApolloProvider>
+      <BrowserRouter>
+        <AppThemeProvider>
+          <StrictMode>
+            <UserProvider>
+              <App />
+            </UserProvider>
+          </StrictMode>
+        </AppThemeProvider>
+      </BrowserRouter>
+    </ApolloProvider>
   </RecoilRoot>,
 );
 
diff --git a/front/src/modules/auth/components/ui/FooterNote.tsx b/front/src/modules/auth/components/ui/FooterNote.tsx
index 026ed6695..a5afe3d36 100644
--- a/front/src/modules/auth/components/ui/FooterNote.tsx
+++ b/front/src/modules/auth/components/ui/FooterNote.tsx
@@ -1,20 +1,16 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.sm}px;
-  padding-left: ${({ theme }) => theme.spacing(14)};
-  padding-right: ${({ theme }) => theme.spacing(14)};
   text-align: center;
 `;
 
-export function FooterNote({ children }: OwnProps): JSX.Element {
-  return <StyledContainer>{children}</StyledContainer>;
+export function FooterNote(props: Props) {
+  return <StyledContainer {...props} />;
 }
diff --git a/front/src/modules/auth/components/ui/InputLabel.tsx b/front/src/modules/auth/components/ui/InputLabel.tsx
deleted file mode 100644
index 39d8a0b70..000000000
--- a/front/src/modules/auth/components/ui/InputLabel.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  label: string;
-  subLabel?: string;
-};
-
-const StyledContainer = styled.div`
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  margin-bottom: ${({ theme }) => theme.spacing(4)};
-  margin-top: ${({ theme }) => theme.spacing(4)};
-`;
-
-export function InputLabel({ label, subLabel }: OwnProps): JSX.Element {
-  return <StyledContainer>{label}</StyledContainer>;
-}
diff --git a/front/src/modules/auth/components/ui/Logo.tsx b/front/src/modules/auth/components/ui/Logo.tsx
index 7ad0adba6..129cdb75d 100644
--- a/front/src/modules/auth/components/ui/Logo.tsx
+++ b/front/src/modules/auth/components/ui/Logo.tsx
@@ -1,18 +1,21 @@
 import styled from '@emotion/styled';
 
+type Props = React.ComponentProps<'div'>;
+
 const StyledLogo = styled.div`
-  height: 40px;
-  width: 40px;
+  height: 48px;
 
   img {
     height: 100%;
     width: 100%;
   }
+
+  width: 48px;
 `;
 
-export function Logo(): JSX.Element {
+export function Logo(props: Props) {
   return (
-    <StyledLogo>
+    <StyledLogo {...props}>
       <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
     </StyledLogo>
   );
diff --git a/front/src/modules/auth/components/ui/Modal.tsx b/front/src/modules/auth/components/ui/Modal.tsx
index d83119940..6e22ff218 100644
--- a/front/src/modules/auth/components/ui/Modal.tsx
+++ b/front/src/modules/auth/components/ui/Modal.tsx
@@ -3,23 +3,23 @@ import styled from '@emotion/styled';
 
 import { Modal as UIModal } from '@/ui/components/modal/Modal';
 
-type OwnProps = {
-  children: React.ReactNode;
-};
+type Props = React.ComponentProps<'div'>;
 
 const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-bottom: ${({ theme }) => theme.spacing(10)};
-  padding-top: ${({ theme }) => theme.spacing(10)};
-  width: 400px;
+  padding: ${({ theme }) => theme.spacing(10)};
+  width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
 `;
 
-export function Modal({ children }: OwnProps): JSX.Element {
+export function AuthModal({ children, ...restProps }: Props) {
   return (
-    <UIModal>
-      <StyledContainer>{children}</StyledContainer>
+    <UIModal isOpen={true}>
+      <StyledContainer {...restProps}>{children}</StyledContainer>
     </UIModal>
   );
 }
diff --git a/front/src/modules/auth/components/ui/Section.tsx b/front/src/modules/auth/components/ui/Section.tsx
new file mode 100644
index 000000000..04b48de61
--- /dev/null
+++ b/front/src/modules/auth/components/ui/Section.tsx
@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  title: string;
+  description?: string;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function Section({ title, description }: OwnProps): JSX.Element {
+  return (
+    <StyledContainer>
+      <StyledTitle>{title}</StyledTitle>
+      {description && <StyledDescription>{description}</StyledDescription>}
+    </StyledContainer>
+  );
+}
diff --git a/front/src/modules/auth/components/ui/Title.tsx b/front/src/modules/auth/components/ui/Title.tsx
index b32861632..eb21a2dea 100644
--- a/front/src/modules/auth/components/ui/Title.tsx
+++ b/front/src/modules/auth/components/ui/Title.tsx
@@ -1,16 +1,28 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-type OwnProps = {
-  children: React.ReactNode;
+import { AnimatedTextWord } from '@/ui/components/motion/AnimatedTextWord';
+
+type Props = React.PropsWithChildren & {
+  animate?: boolean;
 };
 
 const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-top: ${({ theme }) => theme.spacing(10)};
 `;
 
-export function Title({ children }: OwnProps): JSX.Element {
+const StyledAnimatedTextWord = styled(AnimatedTextWord)`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export function Title({ children, animate = false }: Props) {
+  if (animate && typeof children === 'string') {
+    return <StyledAnimatedTextWord text={children} />;
+  }
+
   return <StyledTitle>{children}</StyledTitle>;
 }
diff --git a/front/src/modules/ui/components/board/Board.tsx b/front/src/modules/ui/components/board/Board.tsx
index b221672e0..fed05f785 100644
--- a/front/src/modules/ui/components/board/Board.tsx
+++ b/front/src/modules/ui/components/board/Board.tsx
@@ -10,12 +10,12 @@ export const StyledBoard = styled.div`
   width: 100%;
 `;
 
-export interface Column {
+export type Column = {
   id: string;
   title: string;
   colorCode?: string;
   itemKeys: string[];
-}
+};
 
 export function getOptimisticlyUpdatedBoard(
   board: Column[],
diff --git a/front/src/modules/ui/components/buttons/Button.tsx b/front/src/modules/ui/components/buttons/Button.tsx
new file mode 100644
index 000000000..7435be952
--- /dev/null
+++ b/front/src/modules/ui/components/buttons/Button.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { rgba } from '@/ui/themes/colors';
+
+type Variant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'tertiaryBold'
+  | 'tertiaryLight'
+  | 'danger';
+
+type Size = 'medium' | 'small';
+
+type Props = {
+  icon?: React.ReactNode;
+  title: string;
+  fullWidth?: boolean;
+  variant?: Variant;
+  size?: Size;
+} & React.ComponentProps<'button'>;
+
+const StyledButton = styled.button<
+  Pick<Props, 'fullWidth' | 'variant' | 'size'>
+>`
+  align-items: center;
+  background: ${({ theme, variant, disabled }) => {
+    switch (variant) {
+      case 'primary':
+        if (disabled) {
+          return rgba(theme.color.blue, 0.4);
+        } else {
+          return theme.color.blue;
+        }
+      default:
+        return theme.background.primary;
+    }
+  }};
+  border: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return `1px solid ${theme.background.transparent.medium}`;
+      case 'tertiary':
+      default:
+        return 'none';
+    }
+  }};
+  border-radius: 4px;
+  box-shadow: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return theme.boxShadow.extraLight;
+      default:
+        return 'none';
+    }
+  }};
+  color: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      if (variant === 'primary') {
+        return theme.color.gray0;
+      } else {
+        return theme.font.color.extraLight;
+      }
+    }
+
+    switch (variant) {
+      case 'primary':
+        return theme.color.gray0;
+      case 'tertiaryLight':
+        return theme.font.color.tertiary;
+      case 'danger':
+        return theme.color.red;
+      default:
+        return theme.font.color.secondary;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'tertiary':
+      case 'tertiaryLight':
+        return theme.font.weight.regular;
+      default:
+        return theme.font.weight.medium;
+    }
+  }};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  justify-content: flex-start;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+
+  transition: background 0.1s ease;
+
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  &:hover,
+  &:active {
+    ${({ theme, variant, disabled }) => {
+      if (disabled) {
+        return '';
+      }
+
+      switch (variant) {
+        case 'primary':
+          return `background: linear-gradient(0deg, ${theme.background.transparent.medium} 0%, ${theme.background.transparent.medium} 100%), ${theme.color.blue}`;
+        default:
+          return `background: ${theme.background.tertiary}`;
+      }
+    }};
+  }
+
+  &:focus {
+    outline: none;
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'tertiaryLight':
+        case 'tertiaryBold':
+        case 'tertiary':
+          return `color: ${theme.color.blue};`;
+        default:
+          return '';
+      }
+    }};
+  }
+`;
+
+export function Button({
+  icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  size = 'medium',
+  ...props
+}: Props) {
+  return (
+    <StyledButton
+      fullWidth={fullWidth}
+      variant={variant}
+      size={size}
+      {...props}
+    >
+      {icon}
+      {title}
+    </StyledButton>
+  );
+}
diff --git a/front/src/modules/ui/components/buttons/MainButton.tsx b/front/src/modules/ui/components/buttons/MainButton.tsx
new file mode 100644
index 000000000..ca607fac7
--- /dev/null
+++ b/front/src/modules/ui/components/buttons/MainButton.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+type Variant = 'primary' | 'secondary';
+
+type Props = {
+  icon?: React.ReactNode;
+  title: string;
+  fullWidth?: boolean;
+  variant?: Variant;
+} & React.ComponentProps<'button'>;
+
+const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
+  align-items: center;
+  background: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      return theme.background.tertiary;
+    }
+
+    switch (variant) {
+      case 'primary':
+        return `radial-gradient(
+          50% 62.62% at 50% 0%,
+          ${theme.font.color.secondary} 0%,
+          ${theme.font.color.primary} 100%
+        )`;
+      case 'secondary':
+        return theme.background.primary;
+      default:
+        return theme.background.primary;
+    }
+  }};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 8px;
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+  color: ${({ theme, variant, disabled }) => {
+    if (disabled) {
+      return theme.font.color.extraLight;
+    }
+
+    switch (variant) {
+      case 'primary':
+        return theme.font.color.inverted;
+      case 'secondary':
+        return theme.font.color.primary;
+      default:
+        return theme.font.color.primary;
+    }
+  }};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+
+  ${({ theme, variant }) => {
+    switch (variant) {
+      case 'secondary':
+        return `
+          &:hover {
+            background: ${theme.background.tertiary};
+          }
+        `;
+      default:
+        return '';
+    }
+  }};
+`;
+
+export function MainButton({
+  icon,
+  title,
+  fullWidth = false,
+  variant = 'primary',
+  ...props
+}: Props) {
+  return (
+    <StyledButton fullWidth={fullWidth} variant={variant} {...props}>
+      {icon}
+      {title}
+    </StyledButton>
+  );
+}
diff --git a/front/src/modules/ui/components/buttons/PrimaryButton.tsx b/front/src/modules/ui/components/buttons/PrimaryButton.tsx
deleted file mode 100644
index beabf0b57..000000000
--- a/front/src/modules/ui/components/buttons/PrimaryButton.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const StyledButton = styled.button<{ fullWidth: boolean }>`
-  align-items: center;
-  background: radial-gradient(
-    50% 62.62% at 50% 0%,
-    ${({ theme }) => theme.font.color.secondary} 0%,
-    ${({ theme }) => theme.font.color.primary} 100%
-  );
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
-      0%,
-    0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
-  color: ${({ theme }) => theme.font.color.inverted};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: ${({ theme }) => theme.spacing(2)};
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-`;
-
-export function PrimaryButton({
-  children,
-  fullWidth,
-  ...props
-}: OwnProps): JSX.Element {
-  return (
-    <StyledButton fullWidth={fullWidth ?? false} {...props}>
-      {children}
-    </StyledButton>
-  );
-}
diff --git a/front/src/modules/ui/components/buttons/SecondaryButton.tsx b/front/src/modules/ui/components/buttons/SecondaryButton.tsx
deleted file mode 100644
index 45cdb7fb8..000000000
--- a/front/src/modules/ui/components/buttons/SecondaryButton.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-type OwnProps = {
-  children: React.ReactNode;
-  fullWidth?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const StyledButton = styled.button<{ fullWidth: boolean }>`
-  align-items: center;
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 8px;
-  box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
-      0%,
-    0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
-  color: ${({ theme }) => theme.font.color.primary};
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  gap: 8px;
-  justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
-  padding: 8px 32px;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-
-  &:hover {
-    background: ${({ theme }) => theme.background.tertiary};
-  }
-`;
-
-export function SecondaryButton({
-  children,
-  fullWidth,
-  ...props
-}: OwnProps): JSX.Element {
-  return (
-    <StyledButton fullWidth={fullWidth ?? false} {...props}>
-      {children}
-    </StyledButton>
-  );
-}
diff --git a/front/src/modules/ui/components/buttons/__stories__/Button.stories.tsx b/front/src/modules/ui/components/buttons/__stories__/Button.stories.tsx
new file mode 100644
index 000000000..f5afbebe8
--- /dev/null
+++ b/front/src/modules/ui/components/buttons/__stories__/Button.stories.tsx
@@ -0,0 +1,230 @@
+import styled from '@emotion/styled';
+import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconSearch } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { Button } from '../Button';
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 800px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledTitle = styled.h1`
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  text-transform: uppercase;
+`;
+
+const StyledLine = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+const StyledButtonContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.color.gray20};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Buttons/Button',
+  component: Button,
+  decorators: [withKnobs],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+const clickJestFn = jest.fn();
+
+const variants: ButtonProps['variant'][] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'tertiaryBold',
+  'tertiaryLight',
+  'danger',
+];
+
+const ButtonLine = (props: ButtonProps) => (
+  <>
+    <StyledButtonContainer>
+      <StyledDescription>With icon</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-with-icon`}
+        {...props}
+        icon={<IconSearch size={14} />}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Default</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-default`}
+        onClick={clickJestFn}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Hover</StyledDescription>
+      <Button
+        id={`${props.variant}-button-hover`}
+        data-testid={`${props.variant}-button-hover`}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Pressed</StyledDescription>
+      <Button
+        id={`${props.variant}-button-pressed`}
+        data-testid={`${props.variant}-button-pressed`}
+        {...props}
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Disabled</StyledDescription>
+      <Button
+        data-testid={`${props.variant}-button-disabled`}
+        {...props}
+        disabled
+      />
+    </StyledButtonContainer>
+    <StyledButtonContainer>
+      <StyledDescription>Focus</StyledDescription>
+      <Button
+        id={`${props.variant}-button-focus`}
+        data-testid={`${props.variant}-button-focus`}
+        {...props}
+      />
+    </StyledButtonContainer>
+  </>
+);
+
+const ButtonContainer = (props: Partial<ButtonProps>) => {
+  const title = text('Text', 'A button title');
+
+  return (
+    <StyledContainer>
+      {variants.map((variant) => (
+        <div key={variant}>
+          <StyledTitle>{variant}</StyledTitle>
+          <StyledLine>
+            <ButtonLine {...props} title={title} variant={variant} />
+          </StyledLine>
+        </div>
+      ))}
+    </StyledContainer>
+  );
+};
+
+// Medium size
+export const MediumSize: Story = {
+  render: getRenderWrapperForComponent(<ButtonContainer />),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+
+    const button = canvas.getByTestId('primary-button-default');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+MediumSize.parameters = {
+  pseudo: {
+    hover: [
+      '#primary-button-hover',
+      '#secondary-button-hover',
+      '#tertiary-button-hover',
+      '#tertiaryBold-button-hover',
+      '#tertiaryLight-button-hover',
+      '#danger-button-hover',
+    ],
+    active: [
+      '#primary-button-pressed',
+      '#secondary-button-pressed',
+      '#tertiary-button-pressed',
+      '#tertiaryBold-button-pressed',
+      '#tertiaryLight-button-pressed',
+      '#danger-button-pressed',
+    ],
+    focus: [
+      '#primary-button-focus',
+      '#secondary-button-focus',
+      '#tertiary-button-focus',
+      '#tertiaryBold-button-focus',
+      '#tertiaryLight-button-focus',
+      '#danger-button-focus',
+    ],
+  },
+};
+
+// Small size
+export const SmallSize: Story = {
+  render: getRenderWrapperForComponent(<ButtonContainer size="small" />),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+
+    const button = canvas.getByTestId('primary-button-default');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+SmallSize.parameters = {
+  pseudo: {
+    hover: [
+      '#primary-button-hover',
+      '#secondary-button-hover',
+      '#tertiary-button-hover',
+      '#tertiaryBold-button-hover',
+      '#tertiaryLight-button-hover',
+      '#danger-button-hover',
+    ],
+    active: [
+      '#primary-button-pressed',
+      '#secondary-button-pressed',
+      '#tertiary-button-pressed',
+      '#tertiaryBold-button-pressed',
+      '#tertiaryLight-button-pressed',
+      '#danger-button-pressed',
+    ],
+    focus: [
+      '#primary-button-focus',
+      '#secondary-button-focus',
+      '#tertiary-button-focus',
+      '#tertiaryBold-button-focus',
+      '#tertiaryLight-button-focus',
+      '#danger-button-focus',
+    ],
+  },
+};
diff --git a/front/src/modules/ui/components/buttons/__stories__/MainButton.stories.tsx b/front/src/modules/ui/components/buttons/__stories__/MainButton.stories.tsx
new file mode 100644
index 000000000..c9d164401
--- /dev/null
+++ b/front/src/modules/ui/components/buttons/__stories__/MainButton.stories.tsx
@@ -0,0 +1,104 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { IconBrandGoogle } from '@/ui/icons';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { MainButton } from '../MainButton';
+
+const meta: Meta<typeof MainButton> = {
+  title: 'UI/Buttons/MainButton',
+  component: MainButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+
+const clickJestFn = jest.fn();
+
+export const DefaultPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A primary Button" onClick={clickJestFn} />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIconPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A primary Button"
+    />,
+  ),
+};
+
+export const WithIconPrimaryDisabled: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A primary Button"
+      disabled
+    />,
+  ),
+};
+
+export const FullWidthPrimary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A primary Button" fullWidth />,
+  ),
+};
+
+export const DefaultSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      title="A secondary Button"
+      onClick={clickJestFn}
+      variant="secondary"
+    />,
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIconSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A secondary Button"
+      variant="secondary"
+    />,
+  ),
+};
+
+export const WithIconSecondaryDisabled: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton
+      icon={<IconBrandGoogle size={16} stroke={4} />}
+      title="A secondary Button"
+      variant="secondary"
+      disabled
+    />,
+  ),
+};
+
+export const FullWidthSecondary: Story = {
+  render: getRenderWrapperForComponent(
+    <MainButton title="A secondary Button" variant="secondary" fullWidth />,
+  ),
+};
diff --git a/front/src/modules/ui/components/buttons/__stories__/PrimaryButton.stories.tsx b/front/src/modules/ui/components/buttons/__stories__/PrimaryButton.stories.tsx
deleted file mode 100644
index 81d3c02b8..000000000
--- a/front/src/modules/ui/components/buttons/__stories__/PrimaryButton.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { IconBrandGoogle } from '@/ui/icons';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { PrimaryButton } from '../PrimaryButton';
-
-const meta: Meta<typeof PrimaryButton> = {
-  title: 'UI/Buttons/PrimaryButton',
-  component: PrimaryButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof PrimaryButton>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton onClick={clickJestFn}>A Primary Button</PrimaryButton>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton>
-      <IconBrandGoogle size={16} stroke={4} />A Primary Button
-    </PrimaryButton>,
-  ),
-};
-
-export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
-    <PrimaryButton fullWidth={true}>A Primary Button</PrimaryButton>,
-  ),
-};
diff --git a/front/src/modules/ui/components/buttons/__stories__/SecondaryButton.stories.tsx b/front/src/modules/ui/components/buttons/__stories__/SecondaryButton.stories.tsx
deleted file mode 100644
index 64b35eeaf..000000000
--- a/front/src/modules/ui/components/buttons/__stories__/SecondaryButton.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { expect, jest } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-
-import { IconBrandGoogle } from '@/ui/icons';
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { SecondaryButton } from '../SecondaryButton';
-
-const meta: Meta<typeof SecondaryButton> = {
-  title: 'UI/Buttons/SecondaryButton',
-  component: SecondaryButton,
-};
-
-export default meta;
-type Story = StoryObj<typeof SecondaryButton>;
-
-const clickJestFn = jest.fn();
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton onClick={clickJestFn}>A Primary Button</SecondaryButton>,
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(0);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-
-    expect(clickJestFn).toHaveBeenCalledTimes(1);
-  },
-};
-
-export const WithIcon: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton>
-      <IconBrandGoogle size={16} stroke={4} />A Primary Button
-    </SecondaryButton>,
-  ),
-};
-
-export const FullWidth: Story = {
-  render: getRenderWrapperForComponent(
-    <SecondaryButton fullWidth={true}>A Primary Button</SecondaryButton>,
-  ),
-};
diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
index b4aa9b483..9c8e46fa0 100644
--- a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
+++ b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
@@ -49,9 +49,9 @@ export function EditableDate({
     ),
   );
 
-  interface DatePickerContainerProps {
+  type DatePickerContainerProps = {
     children: React.ReactNode;
-  }
+  };
 
   const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
     return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
diff --git a/front/src/modules/ui/components/inputs/ImageInput.tsx b/front/src/modules/ui/components/inputs/ImageInput.tsx
new file mode 100644
index 000000000..e5eb7d721
--- /dev/null
+++ b/front/src/modules/ui/components/inputs/ImageInput.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icons';
+
+import { Button } from '../buttons/Button';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const Picture = styled.button<{ withPicture: boolean }>`
+  align-items: center;
+  background: ${({ theme, disabled }) =>
+    disabled ? theme.background.secondary : theme.background.tertiary};
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.light};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  height: 66px;
+  justify-content: center;
+  overflow: hidden;
+  transition: background 0.1s ease;
+
+  width: 66px;
+
+  img {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  ${({ theme, withPicture, disabled }) => {
+    if (withPicture || disabled) {
+      return '';
+    }
+
+    return `
+      &:hover {
+        background: ${theme.background.quaternary};
+      }
+    `;
+  }};
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: ${({ theme }) => theme.spacing(4)};
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+const Text = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+`;
+
+type Props = Omit<React.ComponentProps<'div'>, 'children'> & {
+  picture: string | null | undefined;
+  onUpload?: () => void;
+  onRemove?: () => void;
+  disabled?: boolean;
+};
+
+export function ImageInput({
+  picture,
+  onUpload,
+  onRemove,
+  disabled = false,
+  ...restProps
+}: Props) {
+  const theme = useTheme();
+
+  return (
+    <Container {...restProps}>
+      <Picture withPicture={!!picture} disabled={disabled} onClick={onUpload}>
+        {picture ? (
+          <img
+            src={picture || '/images/default-profile-picture.png'}
+            alt="profile"
+          />
+        ) : (
+          <IconFileUpload size={theme.icon.size.md} />
+        )}
+      </Picture>
+      <Content>
+        <ButtonContainer>
+          <Button
+            icon={<IconUpload size={theme.icon.size.sm} />}
+            onClick={onUpload}
+            variant="secondary"
+            title="Upload"
+            disabled={disabled}
+            fullWidth
+          />
+          <Button
+            icon={<IconTrash size={theme.icon.size.sm} />}
+            onClick={onRemove}
+            variant="secondary"
+            title="Remove"
+            disabled={!picture || disabled}
+            fullWidth
+          />
+        </ButtonContainer>
+        <Text>
+          We support your best PNGs, JPEGs and GIFs portraits under 10MB
+        </Text>
+      </Content>
+    </Container>
+  );
+}
diff --git a/front/src/modules/ui/components/inputs/TextInput.tsx b/front/src/modules/ui/components/inputs/TextInput.tsx
index c1c4e9a59..09e2e041e 100644
--- a/front/src/modules/ui/components/inputs/TextInput.tsx
+++ b/front/src/modules/ui/components/inputs/TextInput.tsx
@@ -5,32 +5,48 @@ type OwnProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'onChange'
 > & {
+  label?: string;
   onChange?: (text: string) => void;
   fullWidth?: boolean;
 };
 
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
 const StyledInput = styled.input<{ fullWidth: boolean }>`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
+  background-color: ${({ theme }) => theme.background.tertiary};
+  border: none;
   border-radius: 4px;
-  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) =>
-  theme.spacing(3)};
 
   color: ${({ theme }) => theme.font.color.primary};
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+
   outline: none;
+  padding: ${({ theme }) => theme.spacing(2)};
   width: ${({ fullWidth, theme }) =>
-    fullWidth ? `calc(100% - ${theme.spacing(6)})` : 'auto'};
+    fullWidth ? `calc(100% - ${theme.spacing(4)})` : 'auto'};
 
   &::placeholder,
   &::-webkit-input-placeholder {
-    color: ${({ theme }) => theme.font.color.light}
-    font-family: ${({ theme }) => theme.font.family};;
+    color: ${({ theme }) => theme.font.color.light};
+    font-family: ${({ theme }) => theme.font.family};
     font-weight: ${({ theme }) => theme.font.weight.medium};
   }
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
 export function TextInput({
+  label,
   value,
   onChange,
   fullWidth,
@@ -39,16 +55,19 @@ export function TextInput({
   const [internalValue, setInternalValue] = useState(value);
 
   return (
-    <StyledInput
-      fullWidth={fullWidth ?? false}
-      value={internalValue}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => {
-        setInternalValue(event.target.value);
-        if (onChange) {
-          onChange(event.target.value);
-        }
-      }}
-      {...props}
-    />
+    <StyledContainer>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <StyledInput
+        fullWidth={fullWidth ?? false}
+        value={internalValue}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          setInternalValue(event.target.value);
+          if (onChange) {
+            onChange(event.target.value);
+          }
+        }}
+        {...props}
+      />
+    </StyledContainer>
   );
 }
diff --git a/front/src/modules/ui/components/modal/Modal.tsx b/front/src/modules/ui/components/modal/Modal.tsx
index caa5826a2..4b06190f1 100644
--- a/front/src/modules/ui/components/modal/Modal.tsx
+++ b/front/src/modules/ui/components/modal/Modal.tsx
@@ -1,25 +1,54 @@
 import React from 'react';
-import ReactModal from 'react-modal';
-import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const ModalDiv = styled(motion.div)`
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: 8px;
+  z-index: 10000; // should be higher than Backdrop's z-index
+`;
+
+const BackDrop = styled(motion.div)`
+  align-items: center;
+  background: ${({ theme }) => theme.background.overlay};
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+`;
+
+type Props = React.PropsWithChildren & {
+  isOpen?: boolean;
+};
+
+const modalVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+  exit: { opacity: 0 },
+};
+
+export function Modal({ isOpen = false, children }: Props) {
+  if (!isOpen) {
+    return null;
+  }
 
-export function Modal({ children }: { children: React.ReactNode }) {
-  const theme = useTheme();
   return (
-    <ReactModal
-      isOpen
-      ariaHideApp={false}
-      style={{
-        overlay: {
-          backgroundColor: theme.background.overlay,
-          zIndex: 2,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        },
-        content: { zIndex: 1000, minWidth: 200, inset: 'auto', padding: 0 },
-      }}
-    >
-      {children}
-    </ReactModal>
+    <>
+      <BackDrop>
+        <ModalDiv
+          layout
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          variants={modalVariants}
+        >
+          {children}
+        </ModalDiv>
+      </BackDrop>
+    </>
   );
 }
diff --git a/front/src/modules/ui/components/motion/AnimatedEaseIn.tsx b/front/src/modules/ui/components/motion/AnimatedEaseIn.tsx
new file mode 100644
index 000000000..9eb8186aa
--- /dev/null
+++ b/front/src/modules/ui/components/motion/AnimatedEaseIn.tsx
@@ -0,0 +1,29 @@
+import { motion } from 'framer-motion';
+
+type Props = Omit<
+  React.ComponentProps<typeof motion.div>,
+  'initial' | 'animated' | 'transition'
+> & {
+  duration?: number;
+};
+
+export function AnimatedEaseIn({
+  children,
+  duration = 0.8,
+  ...restProps
+}: Props) {
+  const initial = { opacity: 0 };
+  const animate = { opacity: 1 };
+  const transition = { ease: 'linear', duration };
+
+  return (
+    <motion.div
+      initial={initial}
+      animate={animate}
+      transition={transition}
+      {...restProps}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/front/src/modules/ui/components/motion/AnimatedTextWord.tsx b/front/src/modules/ui/components/motion/AnimatedTextWord.tsx
new file mode 100644
index 000000000..958aab266
--- /dev/null
+++ b/front/src/modules/ui/components/motion/AnimatedTextWord.tsx
@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledContainer = styled(motion.div)`
+  display: flex;
+  overflow: hidden;
+`;
+
+const Word = styled(motion.span)`
+  white-space: pre;
+`;
+
+type Props = Omit<React.ComponentProps<typeof motion.div>, 'children'> & {
+  text: string;
+};
+
+const containerAnimation = {
+  hidden: { opacity: 0 },
+  visible: (i = 1) => ({
+    opacity: 1,
+    transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
+  }),
+};
+
+const childAnimation = {
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      type: 'spring',
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+  hidden: {
+    opacity: 0,
+    x: 20,
+    transition: {
+      type: 'spring',
+      damping: 12,
+      stiffness: 100,
+    },
+  },
+};
+
+export function AnimatedTextWord({ text = '', ...restProps }: Props) {
+  const words = useMemo(() => {
+    const words = text.split(' ');
+
+    return words.map((value, index) =>
+      index === words.length - 1 ? value : value + ' ',
+    );
+  }, [text]);
+
+  return (
+    <StyledContainer
+      variants={containerAnimation}
+      initial="hidden"
+      animate="visible"
+      {...restProps}
+    >
+      {words.map((word, index) => (
+        <Word variants={childAnimation} key={index}>
+          {word}
+        </Word>
+      ))}
+    </StyledContainer>
+  );
+}
diff --git a/front/src/modules/ui/icons/index.ts b/front/src/modules/ui/icons/index.ts
index 085c9b8b4..94af123f8 100644
--- a/front/src/modules/ui/icons/index.ts
+++ b/front/src/modules/ui/icons/index.ts
@@ -28,3 +28,5 @@ export { IconArrowNarrowUp } from '@tabler/icons-react';
 export { IconArrowRight } from '@tabler/icons-react';
 export { IconArrowUpRight } from '@tabler/icons-react';
 export { IconBrandGoogle } from '@tabler/icons-react';
+export { IconUpload } from '@tabler/icons-react';
+export { IconFileUpload } from '@tabler/icons-react';
diff --git a/front/src/modules/ui/layout/AuthLayout.tsx b/front/src/modules/ui/layout/AuthLayout.tsx
new file mode 100644
index 000000000..2113eefc4
--- /dev/null
+++ b/front/src/modules/ui/layout/AuthLayout.tsx
@@ -0,0 +1,11 @@
+import { Companies } from '~/pages/companies/Companies';
+
+export function AuthLayout({ children }: React.PropsWithChildren) {
+  return (
+    <>
+      {/** Mocked data */}
+      <Companies />
+      {children}
+    </>
+  );
+}
diff --git a/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx b/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx
index e2ee8828b..3fc6f0d56 100644
--- a/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx
+++ b/front/src/modules/ui/layout/navbar/NavCollapseButton.tsx
@@ -34,11 +34,11 @@ const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
     `}
 `;
 
-interface CollapseButtonProps {
+type CollapseButtonProps = {
   hideIfOpen?: boolean;
   hideIfClosed?: boolean;
   hideOnDesktop?: boolean;
-}
+};
 
 export default function NavCollapseButton({
   hideIfOpen,
diff --git a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx
index 88f8f27b8..81b1d20c1 100644
--- a/front/src/modules/ui/layout/navbar/NavbarContainer.tsx
+++ b/front/src/modules/ui/layout/navbar/NavbarContainer.tsx
@@ -7,34 +7,32 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 
 const StyledNavbarContainer = styled.div`
   flex-direction: column;
-  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
-  padding: ${({ theme }) => theme.spacing(2)};
   flex-shrink: 0;
   overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(2)};
+  width: ${(props) => (useRecoilValue(isNavbarOpenedState) ? 'auto' : '0')};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: ${(props) =>
       useRecoilValue(isNavbarOpenedState)
         ? `calc(100% - ` + props.theme.spacing(4) + `)`
         : '0'};
+  }
 `;
 
 const NavbarContent = styled.div`
   display: ${() => (useRecoilValue(isNavbarOpenedState) ? 'block' : 'none')};
 `;
 
-interface NavbarProps {
+type NavbarProps = {
   children: React.ReactNode;
   layout?: string;
-}
+};
 
-export const NavbarContainer: React.FC<NavbarProps> = ({
-  children,
-  layout,
-}) => {
+export function NavbarContainer({ children, layout }: NavbarProps) {
   return (
     <StyledNavbarContainer>
       <NavbarContent>{children}</NavbarContent>
     </StyledNavbarContainer>
   );
-};
+}
diff --git a/front/src/modules/ui/themes/boxShadow.ts b/front/src/modules/ui/themes/boxShadow.ts
index 6862c253d..ddcb88e1b 100644
--- a/front/src/modules/ui/themes/boxShadow.ts
+++ b/front/src/modules/ui/themes/boxShadow.ts
@@ -1,6 +1,7 @@
 import { grayScale, rgba } from './colors';
 
 export const boxShadowLight = {
+  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
   light: `0px 2px 4px 0px ${rgba(
     grayScale.gray100,
     0.04,
@@ -12,6 +13,7 @@ export const boxShadowLight = {
 };
 
 export const boxShadowDark = {
+  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
   light: `0px 2px 4px 0px ${rgba(
     grayScale.gray100,
     0.04,
diff --git a/front/src/modules/ui/themes/colors.ts b/front/src/modules/ui/themes/colors.ts
index 213f06768..b4f8fb3f7 100644
--- a/front/src/modules/ui/themes/colors.ts
+++ b/front/src/modules/ui/themes/colors.ts
@@ -113,6 +113,7 @@ export const color = {
   gray30: grayScale.gray20,
   gray20: grayScale.gray15,
   gray10: grayScale.gray10,
+  gray0: grayScale.gray0,
 };
 
 export function rgba(hex: string, alpha: number) {
diff --git a/front/src/pages/auth/CreateProfile.tsx b/front/src/pages/auth/CreateProfile.tsx
new file mode 100644
index 000000000..086a31d3a
--- /dev/null
+++ b/front/src/pages/auth/CreateProfile.tsx
@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Section } from '@/auth/components/ui/Section';
+import { SubTitle } from '@/auth/components/ui/SubTitle';
+import { Title } from '@/auth/components/ui/Title';
+import { MainButton } from '@/ui/components/buttons/MainButton';
+import { ImageInput } from '@/ui/components/inputs/ImageInput';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+
+const StyledContentContainer = styled.div`
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(6)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledButtonContainer = styled.div`
+  width: 200px;
+`;
+
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export function CreateProfile() {
+  const navigate = useNavigate();
+
+  const handleCreate = useCallback(async () => {
+    navigate('/');
+  }, [navigate]);
+
+  useHotkeys(
+    'enter',
+    () => {
+      handleCreate();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [handleCreate],
+  );
+
+  return (
+    <>
+      <Title>Create profile</Title>
+      <SubTitle>How you'll be identify on the app.</SubTitle>
+      <StyledContentContainer>
+        <StyledSectionContainer>
+          <Section title="Picture" />
+          <ImageInput picture={null} disabled />
+        </StyledSectionContainer>
+        <StyledSectionContainer>
+          <Section
+            title="Name"
+            description="Your name as it will be displayed on the app"
+          />
+          <StyledComboInputContainer>
+            <TextInput
+              label="First Name"
+              value=""
+              placeholder="Tim"
+              fullWidth
+            />
+            <TextInput
+              label="Last Name"
+              value=""
+              placeholder="Cook"
+              fullWidth
+            />
+          </StyledComboInputContainer>
+        </StyledSectionContainer>
+      </StyledContentContainer>
+      <StyledButtonContainer>
+        <MainButton title="Continue" onClick={handleCreate} fullWidth />
+      </StyledButtonContainer>
+    </>
+  );
+}
diff --git a/front/src/pages/auth/CreateWorkspace.tsx b/front/src/pages/auth/CreateWorkspace.tsx
new file mode 100644
index 000000000..3d992ca54
--- /dev/null
+++ b/front/src/pages/auth/CreateWorkspace.tsx
@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Section } from '@/auth/components/ui/Section';
+import { SubTitle } from '@/auth/components/ui/SubTitle';
+import { Title } from '@/auth/components/ui/Title';
+import { MainButton } from '@/ui/components/buttons/MainButton';
+import { ImageInput } from '@/ui/components/inputs/ImageInput';
+import { TextInput } from '@/ui/components/inputs/TextInput';
+
+const StyledContentContainer = styled.div`
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(6)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledButtonContainer = styled.div`
+  width: 200px;
+`;
+
+export function CreateWorkspace() {
+  const navigate = useNavigate();
+
+  const handleCreate = useCallback(async () => {
+    navigate('/auth/create/profile');
+  }, [navigate]);
+
+  useHotkeys(
+    'enter',
+    () => {
+      handleCreate();
+    },
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+    },
+    [handleCreate],
+  );
+
+  return (
+    <>
+      <Title>Create your workspace</Title>
+      <SubTitle>
+        A shared environment where you will be able to manage your customer
+        relations with your team.
+      </SubTitle>
+      <StyledContentContainer>
+        <StyledSectionContainer>
+          <Section title="Workspace logo" />
+          <ImageInput picture={null} disabled />
+        </StyledSectionContainer>
+        <StyledSectionContainer>
+          <Section
+            title="Workspace name"
+            description="The name of your organization"
+          />
+          <TextInput value="" placeholder="Apple" fullWidth />
+        </StyledSectionContainer>
+      </StyledContentContainer>
+      <StyledButtonContainer>
+        <MainButton title="Continue" onClick={handleCreate} fullWidth />
+      </StyledButtonContainer>
+    </>
+  );
+}
diff --git a/front/src/pages/auth/Index.tsx b/front/src/pages/auth/Index.tsx
index 97caa870a..189ab286e 100644
--- a/front/src/pages/auth/Index.tsx
+++ b/front/src/pages/auth/Index.tsx
@@ -1,28 +1,32 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 
 import { FooterNote } from '@/auth/components/ui/FooterNote';
 import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
 import { Logo } from '@/auth/components/ui/Logo';
-import { Modal } from '@/auth/components/ui/Modal';
 import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
-import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
-import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
+import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
+import { AnimatedEaseIn } from '@/ui/components/motion/AnimatedEaseIn';
 import { IconBrandGoogle } from '@/ui/icons';
-import { Companies } from '~/pages/companies/Companies';
 
 const StyledContentContainer = styled.div`
-  padding-bottom: ${({ theme }) => theme.spacing(8)};
-  padding-top: ${({ theme }) => theme.spacing(8)};
   width: 200px;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(3)};
+  }
+`;
+
+const StyledFooterNote = styled(FooterNote)`
+  max-width: 283px;
 `;
 
 export function Index() {
@@ -37,13 +41,20 @@ export function Index() {
     authFlowUserEmailState,
   );
 
+  const [visible, setVisible] = useState(false);
+
   const onGoogleLoginClick = useCallback(() => {
     window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
   }, []);
 
   const onPasswordLoginClick = useCallback(() => {
+    if (!visible) {
+      setVisible(true);
+      return;
+    }
+
     navigate('/auth/password-login');
-  }, [navigate]);
+  }, [navigate, visible]);
 
   useHotkeys(
     'enter',
@@ -64,31 +75,48 @@ export function Index() {
 
   return (
     <>
-      <Companies />
-      <Modal>
+      <AnimatedEaseIn>
         <Logo />
-        <Title>Welcome to Twenty</Title>
-        <StyledContentContainer>
-          <PrimaryButton fullWidth={true} onClick={onGoogleLoginClick}>
-            <IconBrandGoogle size={theme.icon.size.sm} stroke={4} />
-            Continue With Google
-          </PrimaryButton>
-          <HorizontalSeparator />
-          <TextInput
-            value={authFlowUserEmail}
-            placeholder="Email"
-            onChange={(value) => setAuthFlowUserEmail(value)}
-            fullWidth={true}
-          />
-          <SecondaryButton fullWidth={true} onClick={onPasswordLoginClick}>
-            Continue
-          </SecondaryButton>
-        </StyledContentContainer>
-        <FooterNote>
-          By using Twenty, you agree to the Terms of Service and Data Processing
-          Agreement.
-        </FooterNote>
-      </Modal>
+      </AnimatedEaseIn>
+      <Title animate>Welcome to Twenty</Title>
+      <StyledContentContainer>
+        <MainButton
+          icon={<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />}
+          title="Continue with Google"
+          onClick={onGoogleLoginClick}
+          fullWidth
+        />
+        {visible && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            transition={{
+              type: 'spring',
+              stiffness: 800,
+              damping: 35,
+            }}
+          >
+            <HorizontalSeparator />
+            <TextInput
+              value={authFlowUserEmail}
+              placeholder="Email"
+              onChange={(value) => setAuthFlowUserEmail(value)}
+              fullWidth={true}
+            />
+          </motion.div>
+        )}
+        <MainButton
+          title="Continue with Email"
+          onClick={onPasswordLoginClick}
+          disabled={!authFlowUserEmail}
+          variant="secondary"
+          fullWidth
+        />
+      </StyledContentContainer>
+      <StyledFooterNote>
+        By using Twenty, you agree to the Terms of Service and Data Processing
+        Agreement.
+      </StyledFooterNote>
     </>
   );
 }
diff --git a/front/src/pages/auth/PasswordLogin.tsx b/front/src/pages/auth/PasswordLogin.tsx
index 829c41993..b4d6aa5af 100644
--- a/front/src/pages/auth/PasswordLogin.tsx
+++ b/front/src/pages/auth/PasswordLogin.tsx
@@ -1,34 +1,45 @@
 import { useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { useRecoilState } from 'recoil';
 
-import { InputLabel } from '@/auth/components/ui/InputLabel';
 import { Logo } from '@/auth/components/ui/Logo';
-import { Modal } from '@/auth/components/ui/Modal';
+import { Section } from '@/auth/components/ui/Section';
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
-import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
+import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
-import { Companies } from '~/pages/companies/Companies';
 
 const StyledContentContainer = styled.div`
-  padding-bottom: ${({ theme }) => theme.spacing(4)};
-  padding-top: ${({ theme }) => theme.spacing(6)};
-  width: 320px;
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(6)};
+  }
 `;
 
-const StyledInputContainer = styled.div`
-  margin-top: ${({ theme }) => theme.spacing(1)};
+const StyledAnimatedContent = styled(motion.div)`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(8)};
+  }
+`;
+
+const StyledSectionContainer = styled.div`
+  > * + * {
+    margin-top: ${({ theme }) => theme.spacing(4)};
+  }
 `;
 
 const StyledButtonContainer = styled.div`
-  margin-top: ${({ theme }) => theme.spacing(7)};
+  width: 200px;
 `;
 
 const StyledErrorContainer = styled.div`
@@ -36,7 +47,6 @@ const StyledErrorContainer = styled.div`
 `;
 
 export function PasswordLogin() {
-  const navigate = useNavigate();
   const [, setMockMode] = useRecoilState(isMockModeState);
   const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
     captureHotkeyTypeInFocusState,
@@ -58,7 +68,8 @@ export function PasswordLogin() {
       await login(authFlowUserEmail, internalPassword);
       setMockMode(false);
       setCaptureHotkeyTypeInFocus(false);
-      navigate('/');
+      // TODO: Navigate to the workspace selection page when it's ready
+      // navigate('/auth/create/workspace');
     } catch (err: any) {
       setFormError(err.message);
     }
@@ -66,7 +77,6 @@ export function PasswordLogin() {
     authFlowUserEmail,
     internalPassword,
     login,
-    navigate,
     setMockMode,
     setCaptureHotkeyTypeInFocus,
   ]);
@@ -85,23 +95,22 @@ export function PasswordLogin() {
 
   return (
     <>
-      <Companies />
-      <Modal>
-        <Logo />
-        <Title>Welcome to Twenty</Title>
-        <SubTitle>Enter your credentials to sign in</SubTitle>
+      <Logo />
+      <Title>Welcome to Twenty</Title>
+      <SubTitle>Enter your credentials to sign in</SubTitle>
+      <StyledAnimatedContent>
         <StyledContentContainer>
-          <StyledInputContainer>
-            <InputLabel label="Email" />
+          <StyledSectionContainer>
+            <Section title="Email" />
             <TextInput
               value={authFlowUserEmail}
               placeholder="Email"
               onChange={(value) => setAuthFlowUserEmail(value)}
               fullWidth
             />
-          </StyledInputContainer>
-          <StyledInputContainer>
-            <InputLabel label="Password" />
+          </StyledSectionContainer>
+          <StyledSectionContainer>
+            <Section title="Password" />
             <TextInput
               value={internalPassword}
               placeholder="Password"
@@ -109,17 +118,18 @@ export function PasswordLogin() {
               fullWidth
               type="password"
             />
-            <StyledButtonContainer>
-              <PrimaryButton fullWidth onClick={handleLogin}>
-                Continue
-              </PrimaryButton>
-            </StyledButtonContainer>
-          </StyledInputContainer>
-          {formError && (
-            <StyledErrorContainer>{formError}</StyledErrorContainer>
-          )}
+          </StyledSectionContainer>
         </StyledContentContainer>
-      </Modal>
+        <StyledButtonContainer>
+          <MainButton
+            title="Continue"
+            onClick={handleLogin}
+            disabled={!authFlowUserEmail || !internalPassword}
+            fullWidth
+          />
+        </StyledButtonContainer>
+        {formError && <StyledErrorContainer>{formError}</StyledErrorContainer>}
+      </StyledAnimatedContent>
     </>
   );
 }
diff --git a/front/src/providers/apollo/ApolloProvider.tsx b/front/src/providers/apollo/ApolloProvider.tsx
index 8c72dca7b..f6fef0b05 100644
--- a/front/src/providers/apollo/ApolloProvider.tsx
+++ b/front/src/providers/apollo/ApolloProvider.tsx
@@ -5,9 +5,7 @@ import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
 import useApolloMocked from '@/apollo/hooks/useApolloMocked';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 
-export const ApolloProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export function ApolloProvider({ children }: React.PropsWithChildren) {
   const apolloClient = useApolloFactory();
   const mockedClient = useApolloMocked();
 
@@ -18,4 +16,4 @@ export const ApolloProvider: React.FC<React.PropsWithChildren> = ({
       {children}
     </ApolloProviderBase>
   );
-};
+}
diff --git a/front/src/providers/user/UserProvider.tsx b/front/src/providers/user/UserProvider.tsx
index 99490a067..eaa7faddc 100644
--- a/front/src/providers/user/UserProvider.tsx
+++ b/front/src/providers/user/UserProvider.tsx
@@ -5,9 +5,7 @@ import { useFetchCurrentUser } from '@/auth/hooks/useFetchCurrentUser';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
 
-export const UserProvider: React.FC<React.PropsWithChildren> = ({
-  children,
-}) => {
+export function UserProvider({ children }: React.PropsWithChildren) {
   const [, setCurrentUser] = useRecoilState(currentUserState);
   const [tokenPair] = useRecoilState(tokenPairState);
   const user = useFetchCurrentUser(tokenPair);
@@ -19,4 +17,4 @@ export const UserProvider: React.FC<React.PropsWithChildren> = ({
   }, [setCurrentUser, user]);
 
   return <>{children}</>;
-};
+}
diff --git a/front/yarn.lock b/front/yarn.lock
index 730e7fb8e..2a4422b46 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1405,7 +1405,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
   integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
@@ -1639,7 +1639,7 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.11.0":
+"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
   integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
@@ -1655,6 +1655,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
@@ -1662,12 +1669,17 @@
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
-"@emotion/react@^11.10.6":
+"@emotion/react@^11.10.6", "@emotion/react@^11.8.1":
   version "11.11.1"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
   integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
@@ -1881,6 +1893,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.0.tgz#113bc85fa102cf890ae801668f43ee265c547a09"
   integrity sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==
 
+"@floating-ui/core@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.1.tgz#4d795b649cc3b1cbb760d191c80dcb4353c9a366"
+  integrity sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==
+
 "@floating-ui/dom@^1.0.0", "@floating-ui/dom@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.3.0.tgz#69456f2164fc3d33eb40837686eaf71537235ac9"
@@ -1888,6 +1905,13 @@
   dependencies:
     "@floating-ui/core" "^1.3.0"
 
+"@floating-ui/dom@^1.0.1":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.4.2.tgz#eb3a37f7506c4f95ef735967dc3496b5012e11cb"
+  integrity sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==
+  dependencies:
+    "@floating-ui/core" "^1.3.1"
+
 "@floating-ui/react-dom@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
@@ -3401,6 +3425,23 @@
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
+"@storybook/addon-knobs@^7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-7.0.2.tgz#f28fd180d8a283df6eb67f8f2578f1563b7b7615"
+  integrity sha512-PzKuscxcBPhA2jpDxJ/F+BvBRqHJ8qBki1kS1IOjmJbAfE96WFnweXZ73ImyAJnRtmtReCL6p0ZmFkrNDMDpUw==
+  dependencies:
+    copy-to-clipboard "^3.3.3"
+    core-js "^3.29.0"
+    escape-html "^1.0.3"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    prop-types "^15.8.1"
+    qs "^6.11.1"
+    react-colorful "^5.6.1"
+    react-lifecycles-compat "^3.0.4"
+    react-select "^5.7.0"
+
 "@storybook/addon-links@^7.0.22":
   version "7.0.22"
   resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-7.0.22.tgz#21701d592582862588b28ef021b78bd26e3de2b2"
@@ -5049,6 +5090,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
+  integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@>=16", "@types/react@^18.0.25":
   version "18.2.12"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
@@ -7708,6 +7756,13 @@ cookie@^0.4.2:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.25.1, core-js-compat@^3.30.1, core-js-compat@^3.30.2:
   version "3.31.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.31.0.tgz#4030847c0766cc0e803dcdfb30055d7ef2064bf1"
@@ -7725,7 +7780,7 @@ core-js@^2.4.0, core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.19.2:
+core-js@^3.19.2, core-js@^3.29.0:
   version "3.31.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.0.tgz#4471dd33e366c79d8c0977ed2d940821719db344"
   integrity sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ==
@@ -8385,6 +8440,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -8411,6 +8474,11 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -8773,7 +8841,7 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -9644,6 +9712,15 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
+framer-motion@^10.12.17:
+  version "10.12.17"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.12.17.tgz#0e891aaddbe6049267c413449945af95585cbc87"
+  integrity sha512-IR+aAYntsyu6ofyxqQV4QYotmOqzcuKxhqNpfc3DXJjNWOPpOeSyH0A+In3IEBu49Yx/+PNht+YMeZSdCNaYbw==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -9920,6 +9997,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -12555,6 +12640,13 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -14105,7 +14197,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14212,7 +14304,7 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.10.0, qs@^6.4.0:
+qs@^6.10.0, qs@^6.11.1, qs@^6.4.0:
   version "6.11.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
   integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
@@ -14280,7 +14372,7 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-colorful@^5.1.2:
+react-colorful@^5.1.2, react-colorful@^5.6.1:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
@@ -14405,7 +14497,7 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lifecycles-compat@^3.0.0:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -14539,6 +14631,21 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-select@^5.7.0:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.3.tgz#fa0dc9a23cad6ff3871ad3829f6083a4b54961a2"
+  integrity sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@@ -14565,6 +14672,16 @@ react-tooltip@^5.13.1:
     "@floating-ui/dom" "^1.0.0"
     classnames "^2.3.0"
 
+react-transition-group@^4.3.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -15632,6 +15749,11 @@ store2@^2.14.2:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
   integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
 
+storybook-addon-pseudo-states@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/storybook-addon-pseudo-states/-/storybook-addon-pseudo-states-2.1.0.tgz#05faffb7e0d19fc012035ecee2a02d432f312d2d"
+  integrity sha512-AwbCL1OiZ16aIeXSP/IOovkMwXy7NTZqmjkz+UM2guSGjvogHNA95NhuVyWoqieE+QWUpGO48+MrBGMeeJcHOQ==
+
 storybook@^7.0.22:
   version "7.0.22"
   resolved "https://registry.yarnpkg.com/storybook/-/storybook-7.0.22.tgz#84edede1eb22f146488b0b18778538e9aacabb75"
@@ -16192,6 +16314,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -16611,7 +16738,7 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
-use-isomorphic-layout-effect@^1.1.1:
+use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
diff --git a/infra/dev/package-lock.json b/infra/dev/package-lock.json
deleted file mode 100644
index e3a634c47..000000000
--- a/infra/dev/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "dev",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}
diff --git a/server/package.json b/server/package.json
index b99fff6eb..b1c8487ba 100644
--- a/server/package.json
+++ b/server/package.json
@@ -43,6 +43,7 @@
     "@nestjs/terminus": "^9.2.2",
     "@paljs/plugins": "^5.3.3",
     "@prisma/client": "^4.13.0",
+    "add": "^2.0.6",
     "apollo-server-express": "^3.12.0",
     "axios": "^1.4.0",
     "bcrypt": "^5.1.0",
@@ -61,7 +62,8 @@
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.2.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@nestjs/cli": "^9.0.0",
diff --git a/server/yarn.lock b/server/yarn.lock
index 20aa61629..a31b3461f 100644
--- a/server/yarn.lock
+++ b/server/yarn.lock
@@ -2187,6 +2187,11 @@ acorn@^8.4.1, acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.2:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
+add@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
+  integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -6984,6 +6989,11 @@ yargs@^17.3.1:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
+yarn@^1.22.19:
+  version "1.22.19"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+  integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz"