From ee6c0ef904f517e005cef01bfcc66eaf82ad681d Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Wed, 6 May 2026 11:49:24 +0200
Subject: [PATCH] Replace sign-in mocked metadata with hardcoded BackgroundMock
 (#20308)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

When the user is logged out, we render the auth modal on top of a sample
table to make the empty page feel alive. So far this was achieved by
**loading a full set of mocked object / field / view / navigation-menu
metadata into the runtime metadata store** and then mounting the real
`RecordTable` and `AppNavigationDrawer` behind the modal. This had a few
downsides:

- Significant bundle weight pulled in for unauthenticated users (mocked
GraphQL fixtures + the real `RecordTable` virtualization stack).
- Plenty of code paths that had to know about the "showAuthModal" case
(`useRecordIndexTableQuery`, `useTriggerInitialRecordTableDataLoad`,
`MainContextStoreProvider`, `IsMinimalMetadataReadyEffect`...).
- Any change to metadata-store internals or to the record-table runtime
risked breaking the logged-out background.

This PR replaces the entire flow with a small, self-contained
`BackgroundMock` component tree that **does not consume any metadata**
and **does not load any mocked metadata at runtime**.

### What changed

- New module under `sign-in-background-mock`:
- `BackgroundMockPage` + `BackgroundMockViewBar` + `BackgroundMockTable`
+ `BackgroundMockTableRow` render a hardcoded "Companies" table that
visually mirrors the real one.
- `BackgroundMockNavigationDrawer` renders a hardcoded sidebar with
People / Companies / Opportunities / Tasks / Notes (with their standard
colors).
- Hardcoded constants in `BackgroundMockCompanies.ts`,
`BackgroundMockColumns.ts`, `BackgroundMockNavigationItems.ts`.
- `MinimalMetadataLoadEffect` no longer calls `loadMockedMetadataAtomic`
for unauthenticated users — it just doesn't load anything.
- `IsMinimalMetadataReadyEffect` now reports ready immediately when
there is no access token pair, so the skeleton loader doesn't hang
waiting for metadata that will never come.
- `MainContextStoreProvider`, `useRecordIndexTableQuery`, and
`useTriggerInitialRecordTableDataLoad` drop their `showAuthModal`
branches — the real `RecordTable` is no longer mounted behind the modal.
- `DefaultLayout` and `NotFound` now lazily load `BackgroundMockPage` /
`BackgroundMockNavigationDrawer` instead of the deleted
`SignInBackgroundMockPage` / `SignInAppNavigationDrawerMock`.
- Removed: `SignInBackgroundMockPage`, `SignInBackgroundMockContainer`,
`SignInBackgroundMockContainerEffect`, `SignInAppNavigationDrawerMock`,
`SignInBackgroundMockColumnDefinitions`,
`SignInBackgroundMockCompanies`, `SignInBackgroundMockViewFields`.

`useLoadMockedMetadata` and `preloadMockedMetadata` are kept on purpose:
Storybook decorators (`ObjectMetadataItemsDecorator`,
`WorkflowStepDecorator`) still rely on the mocked metadata fixtures, but
**production** unauthenticated runtime no longer touches them.

### Visual parity

Side-by-side at 1440×900 on `/sign-in`:

**Before** (loads mocked metadata + real RecordTable):

![before](https://github.com/user-attachments/assets/before-placeholder)

**After** (purely hardcoded BackgroundMock):

![after](https://github.com/user-attachments/assets/after-placeholder)

## Test plan

- [ ] `npx nx typecheck twenty-front` ✅ (passes locally)
- [ ] `npx nx lint:diff-with-main twenty-front` ✅ (oxlint + prettier
clean)
- [ ] `npx jest useRecordIndexTableQuery` ✅
- [ ] Manually verify `/sign-in` renders the table + nav drawer behind
the modal
- [ ] Manually verify `/not-found` still renders the background
- [ ] Verify CI: storybook, unit tests, e2e tests
---
 .../components/MainContextStoreProvider.tsx   |   13 +-
 .../IsMinimalMetadataReadyEffect.tsx          |   13 +-
 .../MinimalMetadataLoadEffect.tsx             |   52 +-
 .../hooks/useRecordIndexTableQuery.ts         |    9 +-
 .../useTriggerInitialRecordTableDataLoad.ts   |   62 +-
 ...tsx => BackgroundMockNavigationDrawer.tsx} |   61 +-
 .../components/BackgroundMockPage.tsx         |   63 +
 .../components/BackgroundMockTable.tsx        |  232 +++
 .../components/BackgroundMockTableRow.tsx     |  164 ++
 .../components/BackgroundMockViewBar.tsx      |   61 +
 .../SignInBackgroundMockContainer.tsx         |  113 --
 .../SignInBackgroundMockContainerEffect.tsx   |   86 -
 .../components/SignInBackgroundMockPage.tsx   |   27 -
 .../constants/BackgroundMockColumnWidths.ts   |    9 +
 .../constants/BackgroundMockColumns.ts        |   45 +
 .../constants/BackgroundMockCompanies.ts      |  223 +++
 .../BackgroundMockNavigationItems.ts          |   38 +
 .../constants/BackgroundMockOtherItems.ts     |    8 +
 .../BackgroundMockTableDimensions.ts          |    6 +
 .../SignInBackgroundMockColumnDefinitions.ts  |  302 ----
 .../SignInBackgroundMockCompanies.ts          | 1385 -----------------
 .../SignInBackgroundMockViewFields.ts         |   78 -
 .../layout/page/components/DefaultLayout.tsx  |   12 +-
 .../src/pages/not-found/NotFound.tsx          |    8 +-
 .../decorators/MockedMetadataLoadEffect.tsx   |   31 +
 .../src/testing/decorators/PageDecorator.tsx  |    6 +-
 26 files changed, 975 insertions(+), 2132 deletions(-)
 rename packages/twenty-front/src/modules/sign-in-background-mock/components/{SignInAppNavigationDrawerMock.tsx => BackgroundMockNavigationDrawer.tsx} (56%)
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTable.tsx
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTableRow.tsx
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockViewBar.tsx
 delete mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
 delete mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx
 delete mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumnWidths.ts
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumns.ts
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockCompanies.ts
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockNavigationItems.ts
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockOtherItems.ts
 create mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockTableDimensions.ts
 delete mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts
 delete mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts
 delete mode 100644 packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts
 create mode 100644 packages/twenty-front/src/testing/decorators/MockedMetadataLoadEffect.tsx

diff --git a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
index e68208d720..11d7a9ceae 100644
--- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
+++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
@@ -3,7 +3,6 @@ import { metadataStoreState } from '@/metadata-store/states/metadataStoreState';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { viewsSelector } from '@/views/states/selectors/viewsSelector';
@@ -38,8 +37,6 @@ const getViewId = (
   return undefined;
 };
 
-const SIGN_IN_BACKGROUND_OBJECT_NAME_PLURAL = 'companies';
-
 export const MainContextStoreProvider = () => {
   const location = useLocation();
   const isRecordIndexPage = isMatchingLocation(
@@ -49,15 +46,10 @@ export const MainContextStoreProvider = () => {
   const isRecordShowPage = isMatchingLocation(location, AppPath.RecordShowPage);
   const isStandalonePage = isMatchingLocation(location, AppPath.PageLayoutPage);
   const isSettingsPage = useIsSettingsPage();
-  const showAuthModal = useShowAuthModal();
 
-  const objectNamePluralFromParams = useParams().objectNamePlural ?? '';
+  const objectNamePlural = useParams().objectNamePlural ?? '';
   const objectNameSingular = useParams().objectNameSingular ?? '';
 
-  const objectNamePlural = showAuthModal
-    ? SIGN_IN_BACKGROUND_OBJECT_NAME_PLURAL
-    : objectNamePluralFromParams;
-
   const [searchParams] = useSearchParams();
   const viewIdQueryParamRaw = searchParams.get('viewId');
 
@@ -120,8 +112,7 @@ export const MainContextStoreProvider = () => {
     (isRecordIndexPage ||
       isRecordShowPage ||
       isStandalonePage ||
-      isSettingsPage ||
-      showAuthModal) &&
+      isSettingsPage) &&
     metadataStore.status === 'up-to-date';
 
   if (!shouldComputeContextStore) {
diff --git a/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx b/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx
index 10bd5b0183..165c3c1413 100644
--- a/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx
+++ b/packages/twenty-front/src/modules/metadata-store/effect-components/IsMinimalMetadataReadyEffect.tsx
@@ -28,21 +28,24 @@ export const IsMinimalMetadataReadyEffect = () => {
   );
 
   useEffect(() => {
+    if (!hasAccessTokenPair) {
+      setIsMinimalMetadataReady(true);
+      return;
+    }
+
     const hasActiveWorkspace = isWorkspaceActiveOrSuspended(currentWorkspace);
 
     const areObjectsLoaded = metadataStore.status === 'up-to-date';
     const areViewsLoaded = metadataStoreViews.status === 'up-to-date';
 
-    const isReady = !areObjectsLoaded
-      ? false
-      : !hasAccessTokenPair ||
-        (isDefined(currentUser) && (!hasActiveWorkspace || areViewsLoaded));
-
     if (!areObjectsLoaded) {
       setIsMinimalMetadataReady(false);
       return;
     }
 
+    const isReady =
+      isDefined(currentUser) && (!hasActiveWorkspace || areViewsLoaded);
+
     if (isReady) {
       setIsMinimalMetadataReady(true);
     }
diff --git a/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx b/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx
index 3bb238ddb1..5e683446a2 100644
--- a/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx
+++ b/packages/twenty-front/src/modules/metadata-store/effect-components/MinimalMetadataLoadEffect.tsx
@@ -2,70 +2,41 @@ import { useHasAccessTokenPair } from '@/auth/hooks/useHasAccessTokenPair';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadedState';
 import { useLoadMinimalMetadata } from '@/metadata-store/hooks/useLoadMinimalMetadata';
-import { useLoadMockedMetadata } from '@/metadata-store/hooks/useLoadMockedMetadata';
 import { useLoadStaleMetadataEntities } from '@/metadata-store/hooks/useLoadStaleMetadataEntities';
 import { metadataLoadedVersionState } from '@/metadata-store/states/metadataLoadedVersionState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useEffect, useState } from 'react';
 import { isWorkspaceActiveOrSuspended } from 'twenty-shared/workspace';
 
-type LoadedState = 'none' | 'mocked' | 'real';
-
-const computeDesiredLoadState = (
-  hasAccessTokenPair: boolean,
-  isActiveWorkspace: boolean,
-): LoadedState => {
-  if (hasAccessTokenPair && isActiveWorkspace) {
-    return 'real';
-  }
-
-  return 'mocked';
-};
-
 export const MinimalMetadataLoadEffect = () => {
   const hasAccessTokenPair = useHasAccessTokenPair();
   const isCurrentUserLoaded = useAtomStateValue(isCurrentUserLoadedState);
   const currentWorkspace = useAtomStateValue(currentWorkspaceState);
   const metadataLoadedVersion = useAtomStateValue(metadataLoadedVersionState);
-  const [lastMetadataLoadData, setLastMetadataLoadData] = useState<{
-    state: LoadedState;
-    version: number;
-  }>({ state: 'none', version: -1 });
+  const [lastLoadedVersion, setLastLoadedVersion] = useState<number>(-1);
 
   const { loadMinimalMetadata } = useLoadMinimalMetadata();
-  const { loadMockedMetadataAtomic } = useLoadMockedMetadata();
   const { loadStaleMetadataEntities } = useLoadStaleMetadataEntities();
 
   const isActiveWorkspace = isWorkspaceActiveOrSuspended(currentWorkspace);
-
-  const desiredLoadState = computeDesiredLoadState(
-    hasAccessTokenPair,
-    isActiveWorkspace,
-  );
+  const shouldLoadRealMetadata = hasAccessTokenPair && isActiveWorkspace;
 
   useEffect(() => {
     if (!isCurrentUserLoaded) {
       return;
     }
 
-    const versionChanged =
-      metadataLoadedVersion !== lastMetadataLoadData.version;
-
-    if (!versionChanged && lastMetadataLoadData.state === desiredLoadState) {
+    if (!shouldLoadRealMetadata) {
       return;
     }
 
-    setLastMetadataLoadData({
-      state: desiredLoadState,
-      version: metadataLoadedVersion,
-    });
+    if (metadataLoadedVersion === lastLoadedVersion) {
+      return;
+    }
+
+    setLastLoadedVersion(metadataLoadedVersion);
 
     const performLoad = async () => {
-      if (desiredLoadState === 'mocked') {
-        await loadMockedMetadataAtomic();
-        return;
-      }
-
       const result = await loadMinimalMetadata();
 
       if (result?.staleEntityKeys && result.staleEntityKeys.length > 0) {
@@ -76,13 +47,10 @@ export const MinimalMetadataLoadEffect = () => {
     performLoad();
   }, [
     isCurrentUserLoaded,
-    hasAccessTokenPair,
-    isActiveWorkspace,
-    desiredLoadState,
-    lastMetadataLoadData,
+    shouldLoadRealMetadata,
+    lastLoadedVersion,
     metadataLoadedVersion,
     loadMinimalMetadata,
-    loadMockedMetadataAtomic,
     loadStaleMetadataEntities,
   ]);
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts
index 66eeb5a393..91deff9c6a 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexTableQuery.ts
@@ -2,12 +2,8 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useRelevantRecordsGqlFields } from '@/object-record/record-field/hooks/useRelevantRecordsGqlFields';
 import { useFindManyRecordIndexTableParams } from '@/object-record/record-index/hooks/useFindManyRecordIndexTableParams';
-import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
-import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 
 export const useRecordIndexTableQuery = (objectNameSingular: string) => {
-  const showAuthModal = useShowAuthModal();
-
   const params = useFindManyRecordIndexTableParams(objectNameSingular);
 
   const { objectMetadataItem } = useObjectMetadataItem({
@@ -28,12 +24,11 @@ export const useRecordIndexTableQuery = (objectNameSingular: string) => {
   } = useFindManyRecords({
     ...params,
     recordGqlFields,
-    skip: showAuthModal,
   });
 
   return {
-    records: showAuthModal ? SIGN_IN_BACKGROUND_MOCK_COMPANIES : records,
-    loading: showAuthModal ? false : loading,
+    records,
+    loading,
     hasNextPage,
     queryIdentifier,
     totalCount,
diff --git a/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts b/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts
index fbd5f8deb7..5c7d25e890 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad.ts
@@ -30,8 +30,6 @@ import { recordIdByRealIndexComponentState } from '@/object-record/record-table/
 import { scrollAtRealIndexComponentState } from '@/object-record/record-table/virtualization/states/scrollAtRealIndexComponentState';
 import { totalNumberOfRecordsToVirtualizeComponentState } from '@/object-record/record-table/virtualization/states/totalNumberOfRecordsToVirtualizeComponentState';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
-import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { useAtomComponentFamilyStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateCallbackState';
 import { useAtomComponentSelectorCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorCallbackState';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
@@ -41,8 +39,6 @@ import { isDefined } from 'twenty-shared/utils';
 export const useTriggerInitialRecordTableDataLoad = () => {
   const { recordTableId, objectNameSingular } = useRecordTableContextOrThrow();
 
-  const showAuthModal = useShowAuthModal();
-
   const { findManyRecordsLazy } =
     useRecordIndexTableLazyQuery(objectNameSingular);
 
@@ -155,40 +151,35 @@ export const useTriggerInitialRecordTableDataLoad = () => {
         let records: ObjectRecord[] | null = null;
         let totalCount = 0;
 
-        if (showAuthModal) {
-          records = SIGN_IN_BACKGROUND_MOCK_COMPANIES;
-          totalCount = SIGN_IN_BACKGROUND_MOCK_COMPANIES.length;
-        } else {
-          const newRecordIdByRealIndex = new Map(
-            store.get(recordIdByRealIndexCallbackState),
-          );
-          const newDataLoadingStatusByRealIndex = new Map(
-            store.get(dataLoadingStatusByRealIndexCallbackState),
-          );
+        const newRecordIdByRealIndex = new Map(
+          store.get(recordIdByRealIndexCallbackState),
+        );
+        const newDataLoadingStatusByRealIndex = new Map(
+          store.get(dataLoadingStatusByRealIndexCallbackState),
+        );
 
-          for (const [realIndex] of currentRecordIds.entries()) {
-            newDataLoadingStatusByRealIndex.set(realIndex, 'not-loaded');
-            newRecordIdByRealIndex.delete(realIndex);
-          }
-
-          store.set(recordIdByRealIndexCallbackState, newRecordIdByRealIndex);
-          store.set(
-            dataLoadingStatusByRealIndexCallbackState,
-            newDataLoadingStatusByRealIndex,
-          );
-
-          store.set(
-            recordIndexRecordIdsByGroupFamilyState(NO_RECORD_GROUP_FAMILY_KEY),
-            [],
-          );
-
-          const { records: findManyRecords, totalCount: findManyTotalCount } =
-            await findManyRecordsLazy();
-
-          records = findManyRecords;
-          totalCount = findManyTotalCount;
+        for (const [realIndex] of currentRecordIds.entries()) {
+          newDataLoadingStatusByRealIndex.set(realIndex, 'not-loaded');
+          newRecordIdByRealIndex.delete(realIndex);
         }
 
+        store.set(recordIdByRealIndexCallbackState, newRecordIdByRealIndex);
+        store.set(
+          dataLoadingStatusByRealIndexCallbackState,
+          newDataLoadingStatusByRealIndex,
+        );
+
+        store.set(
+          recordIndexRecordIdsByGroupFamilyState(NO_RECORD_GROUP_FAMILY_KEY),
+          [],
+        );
+
+        const { records: findManyRecords, totalCount: findManyTotalCount } =
+          await findManyRecordsLazy();
+
+        records = findManyRecords;
+        totalCount = findManyTotalCount;
+
         store.set(totalNumberOfRecordsToVirtualizeCallbackState, totalCount);
 
         if (isDefined(records)) {
@@ -230,7 +221,6 @@ export const useTriggerInitialRecordTableDataLoad = () => {
       recordIndexAllRecordIds,
       recordIndexRecordIdsByGroupFamilyState,
       store,
-      showAuthModal,
       dataPagesLoadedCallbackState,
       isRecordTableInitialLoading,
       lastScrollPositionCallbackState,
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockNavigationDrawer.tsx
similarity index 56%
rename from packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
rename to packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockNavigationDrawer.tsx
index fce9b61590..34750fbbaa 100644
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockNavigationDrawer.tsx
@@ -1,11 +1,3 @@
-import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
-
-import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
-import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
-import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
@@ -13,28 +5,27 @@ import { getSettingsPath } from 'twenty-shared/utils';
 import { IconSearch, IconSettings } from 'twenty-ui/display';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
 
+import { BACKGROUND_MOCK_OTHER_ITEMS } from '@/sign-in-background-mock/constants/BackgroundMockOtherItems';
+import { BACKGROUND_MOCK_WORKSPACE_ITEMS } from '@/sign-in-background-mock/constants/BackgroundMockNavigationItems';
+import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
+import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
+import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
+
 const StyledMainSectionWrapper = styled.div`
   min-height: fit-content;
 `;
 
-const WORKSPACE_FAVORITES = [
-  'person',
-  'company',
-  'opportunity',
-  'task',
-  'note',
-];
-
-export type SignInAppNavigationDrawerMockProps = {
+export type BackgroundMockNavigationDrawerProps = {
   className?: string;
 };
 
-export const SignInAppNavigationDrawerMock = ({
+export const BackgroundMockNavigationDrawer = ({
   className,
-}: SignInAppNavigationDrawerMockProps) => {
+}: BackgroundMockNavigationDrawerProps) => {
   const isMobile = useIsMobile();
   const { t } = useLingui();
-  const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
 
   return (
     <NavigationDrawer className={className} title={DEFAULT_WORKSPACE_NAME}>
@@ -56,12 +47,30 @@ export const SignInAppNavigationDrawerMock = ({
           </NavigationDrawerSection>
         </StyledMainSectionWrapper>
       )}
-      <NavigationDrawerSectionForObjectMetadataItems
-        sectionTitle={t`Workspace`}
-        objectMetadataItems={objectMetadataItems.filter((item) =>
-          WORKSPACE_FAVORITES.includes(item.nameSingular),
-        )}
-      />
+      <NavigationDrawerSection>
+        <NavigationDrawerSectionTitle label={t`Workspace`} />
+        {BACKGROUND_MOCK_WORKSPACE_ITEMS.map((item, index) => (
+          <NavigationDrawerItem
+            key={item.label}
+            label={item.label}
+            Icon={item.Icon}
+            iconColor={item.color}
+            active={index === 0}
+            onClick={() => {}}
+          />
+        ))}
+      </NavigationDrawerSection>
+      <NavigationDrawerSection>
+        <NavigationDrawerSectionTitle label={t`Other`} />
+        {BACKGROUND_MOCK_OTHER_ITEMS.map((item) => (
+          <NavigationDrawerItem
+            key={item.label}
+            label={item.label}
+            Icon={item.Icon}
+            onClick={() => {}}
+          />
+        ))}
+      </NavigationDrawerSection>
     </NavigationDrawer>
   );
 };
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx
new file mode 100644
index 0000000000..9cc4bd825c
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockPage.tsx
@@ -0,0 +1,63 @@
+import { styled } from '@linaria/react';
+import { t } from '@lingui/core/macro';
+import {
+  IconBuildingSkyscraper,
+  IconDotsVertical,
+  IconLayoutSidebarRight,
+  IconPlus,
+  TintedIconTile,
+} from 'twenty-ui/display';
+import { Button, LightIconButton } from 'twenty-ui/input';
+
+import { BackgroundMockTable } from '@/sign-in-background-mock/components/BackgroundMockTable';
+import { BackgroundMockViewBar } from '@/sign-in-background-mock/components/BackgroundMockViewBar';
+import { PageBody } from '@/ui/layout/page/components/PageBody';
+import { PageContainer } from '@/ui/layout/page/components/PageContainer';
+import { PageHeader } from '@/ui/layout/page/components/PageHeader';
+
+const StyledTableContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export const BackgroundMockPage = () => {
+  return (
+    <PageContainer>
+      <PageHeader
+        title={t`Companies`}
+        Icon={() => (
+          <TintedIconTile Icon={IconBuildingSkyscraper} color="blue" />
+        )}
+      >
+        <Button
+          Icon={IconPlus}
+          title={t`New Company`}
+          variant="primary"
+          accent="default"
+          size="small"
+        />
+        <LightIconButton
+          Icon={IconDotsVertical}
+          accent="tertiary"
+          size="small"
+        />
+        <Button
+          Icon={IconLayoutSidebarRight}
+          variant="secondary"
+          accent="default"
+          size="small"
+        />
+      </PageHeader>
+      <PageBody>
+        <StyledTableContainer>
+          <BackgroundMockViewBar />
+          <BackgroundMockTable />
+        </StyledTableContainer>
+      </PageBody>
+    </PageContainer>
+  );
+};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTable.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTable.tsx
new file mode 100644
index 0000000000..b5fcc13b10
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTable.tsx
@@ -0,0 +1,232 @@
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
+
+import { BackgroundMockTableRow } from '@/sign-in-background-mock/components/BackgroundMockTableRow';
+import { BACKGROUND_MOCK_COLUMNS } from '@/sign-in-background-mock/constants/BackgroundMockColumns';
+import { BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/BackgroundMockCompanies';
+import { BACKGROUND_MOCK_TABLE_DIMENSIONS } from '@/sign-in-background-mock/constants/BackgroundMockTableDimensions';
+import {
+  IconChevronDown,
+  IconPlus,
+  OverflowingTextWithTooltip,
+  useIcons,
+} from 'twenty-ui/display';
+import { Checkbox } from 'twenty-ui/input';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+
+const StyledTableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+const StyledTable = styled.div`
+  background: ${themeCssVariables.background.primary};
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  font-size: ${themeCssVariables.font.size.md};
+  overflow: hidden;
+  position: relative;
+`;
+
+const StyledHeaderRow = styled.div`
+  background: ${themeCssVariables.background.primary};
+  display: flex;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+`;
+
+const StyledDragHandleColumn = styled.div`
+  background: ${themeCssVariables.background.primary};
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.dragHandleColumnWidth}px;
+`;
+
+const StyledCheckboxHeaderColumn = styled.div`
+  align-items: center;
+  background: ${themeCssVariables.background.primary};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  justify-content: center;
+  padding-right: ${themeCssVariables.spacing[1]};
+  width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.checkboxColumnWidth}px;
+`;
+
+const StyledHeaderCell = styled.div<{ width: number }>`
+  align-items: center;
+  background: ${themeCssVariables.background.primary};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  border-right: 1px solid ${themeCssVariables.border.color.light};
+  box-sizing: border-box;
+  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
+  flex-shrink: 0;
+  font-weight: ${themeCssVariables.font.weight.medium};
+  gap: ${themeCssVariables.spacing[1]};
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  overflow: hidden;
+  padding: 0 ${themeCssVariables.spacing[2]};
+  width: ${({ width }) => width}px;
+`;
+
+const StyledHeaderLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledAddColumnHeaderCell = styled.div`
+  align-items: center;
+  background: ${themeCssVariables.background.primary};
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  box-sizing: border-box;
+  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
+  flex: 1;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  min-width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.addColumnButtonWidth}px;
+`;
+
+const StyledAddColumnIconWrapper = styled.div`
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  justify-content: center;
+  width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.addColumnButtonWidth}px;
+`;
+
+const StyledTableBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+`;
+
+const StyledFooterRow = styled.div`
+  display: flex;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+`;
+
+const StyledFooterCheckboxColumn = styled.div`
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.checkboxColumnWidth}px;
+`;
+
+const StyledFooterCell = styled.div<{ width: number }>`
+  align-items: center;
+  box-sizing: border-box;
+  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
+  flex-shrink: 0;
+  font-weight: ${themeCssVariables.font.weight.medium};
+  gap: ${themeCssVariables.spacing[1]};
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 0 ${themeCssVariables.spacing[2]};
+  white-space: nowrap;
+  width: ${({ width }) => width}px;
+`;
+
+const StyledFooterLabel = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+const StyledFooterValue = styled.span`
+  color: ${themeCssVariables.font.color.primary};
+  flex-shrink: 0;
+`;
+
+const StyledLastEmptyCell = styled.div`
+  flex: 1;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  min-width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.addColumnButtonWidth}px;
+`;
+
+export const BackgroundMockTable = () => {
+  const { theme } = useContext(ThemeContext);
+  const { getIcon } = useIcons();
+
+  return (
+    <StyledTableWrapper>
+      <StyledTable>
+        <StyledHeaderRow>
+          <StyledDragHandleColumn />
+          <StyledCheckboxHeaderColumn>
+            <Checkbox hoverable checked={false} />
+          </StyledCheckboxHeaderColumn>
+          {BACKGROUND_MOCK_COLUMNS.map((column) => {
+            const Icon = getIcon(column.iconName);
+            return (
+              <StyledHeaderCell key={column.label} width={column.width}>
+                {Icon !== undefined && (
+                  <Icon
+                    size={theme.icon.size.md}
+                    stroke={theme.icon.stroke.sm}
+                  />
+                )}
+                <StyledHeaderLabel>{column.label}</StyledHeaderLabel>
+              </StyledHeaderCell>
+            );
+          })}
+          <StyledAddColumnHeaderCell>
+            <StyledAddColumnIconWrapper>
+              <IconPlus
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.sm}
+              />
+            </StyledAddColumnIconWrapper>
+          </StyledAddColumnHeaderCell>
+        </StyledHeaderRow>
+        <StyledTableBody>
+          {BACKGROUND_MOCK_COMPANIES.map((company) => (
+            <BackgroundMockTableRow key={company.id} company={company} />
+          ))}
+        </StyledTableBody>
+        <StyledFooterRow>
+          <StyledDragHandleColumn />
+          <StyledFooterCheckboxColumn />
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[0].width}>
+            <StyledFooterLabel>
+              <OverflowingTextWithTooltip text="Calculate" />
+            </StyledFooterLabel>
+            <IconChevronDown
+              size={theme.icon.size.sm}
+              stroke={theme.icon.stroke.sm}
+            />
+          </StyledFooterCell>
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[1].width}>
+            <StyledFooterLabel>
+              <OverflowingTextWithTooltip text="Count all" />
+            </StyledFooterLabel>
+            <StyledFooterValue>599</StyledFooterValue>
+          </StyledFooterCell>
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[2].width} />
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[3].width} />
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[4].width} />
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[5].width}>
+            <StyledFooterLabel>
+              <OverflowingTextWithTooltip text="Max of Employees" />
+            </StyledFooterLabel>
+            <StyledFooterValue>284,571</StyledFooterValue>
+          </StyledFooterCell>
+          <StyledFooterCell width={BACKGROUND_MOCK_COLUMNS[6].width}>
+            <StyledFooterLabel>
+              <OverflowingTextWithTooltip text="Not empty of Address" />
+            </StyledFooterLabel>
+            <StyledFooterValue>599</StyledFooterValue>
+          </StyledFooterCell>
+          <StyledLastEmptyCell />
+        </StyledFooterRow>
+      </StyledTable>
+    </StyledTableWrapper>
+  );
+};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTableRow.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTableRow.tsx
new file mode 100644
index 0000000000..bf47fb1269
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockTableRow.tsx
@@ -0,0 +1,164 @@
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
+
+import { type BackgroundMockCompany } from '@/sign-in-background-mock/constants/BackgroundMockCompanies';
+import { BACKGROUND_MOCK_COLUMN_WIDTHS } from '@/sign-in-background-mock/constants/BackgroundMockColumnWidths';
+import { BACKGROUND_MOCK_TABLE_DIMENSIONS } from '@/sign-in-background-mock/constants/BackgroundMockTableDimensions';
+import { Avatar, IconLink } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components';
+import { Checkbox } from 'twenty-ui/input';
+import { getLogoUrlFromDomainName } from 'twenty-shared/utils';
+
+const StyledRow = styled.div`
+  display: flex;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+`;
+
+const StyledDragHandleColumn = styled.div`
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.dragHandleColumnWidth}px;
+`;
+
+const StyledCheckboxColumn = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  justify-content: center;
+  padding-right: ${themeCssVariables.spacing[1]};
+  width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.checkboxColumnWidth}px;
+`;
+
+const StyledCell = styled.div<{ width: number }>`
+  align-items: center;
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  border-right: 1px solid ${themeCssVariables.border.color.light};
+  box-sizing: border-box;
+  color: ${themeCssVariables.font.color.primary};
+  display: flex;
+  flex-shrink: 0;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  overflow: hidden;
+  padding-left: ${themeCssVariables.spacing[2]};
+  white-space: nowrap;
+  width: ${({ width }) => width}px;
+`;
+
+const StyledTruncated = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const StyledMutedText = styled.span`
+  color: ${themeCssVariables.font.color.tertiary};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const StyledLastEmptyCell = styled.div`
+  border-bottom: 1px solid ${themeCssVariables.border.color.light};
+  flex: 1;
+  height: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.rowHeight}px;
+  min-width: ${BACKGROUND_MOCK_TABLE_DIMENSIONS.addColumnButtonWidth}px;
+`;
+
+type BackgroundMockTableRowProps = {
+  company: BackgroundMockCompany;
+};
+
+const formatNumber = (value: number) => value.toLocaleString('en-US');
+
+const PersonChip = ({ fullName }: { fullName: string | null }) => {
+  if (fullName === null) {
+    return null;
+  }
+
+  return (
+    <Chip
+      label={fullName}
+      size={ChipSize.Small}
+      variant={ChipVariant.Transparent}
+      accent={ChipAccent.TextPrimary}
+      clickable={false}
+      leftComponent={
+        <Avatar
+          type="rounded"
+          placeholder={fullName}
+          placeholderColorSeed={fullName}
+          size="md"
+        />
+      }
+    />
+  );
+};
+
+export const BackgroundMockTableRow = ({
+  company,
+}: BackgroundMockTableRowProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  const logoUrl = getLogoUrlFromDomainName(company.domainName);
+
+  return (
+    <StyledRow>
+      <StyledDragHandleColumn />
+      <StyledCheckboxColumn>
+        <Checkbox hoverable checked={false} />
+      </StyledCheckboxColumn>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS.Name}>
+        <Chip
+          label={company.name}
+          size={ChipSize.Small}
+          variant={ChipVariant.Transparent}
+          accent={ChipAccent.TextPrimary}
+          clickable={false}
+          leftComponent={
+            <Avatar
+              type="squared"
+              avatarUrl={logoUrl}
+              placeholder={company.name}
+              placeholderColorSeed={company.id}
+              size="md"
+            />
+          }
+        />
+      </StyledCell>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS.Domain}>
+        <Chip
+          label={company.domainName}
+          size={ChipSize.Small}
+          variant={ChipVariant.Transparent}
+          accent={ChipAccent.TextSecondary}
+          clickable={false}
+          leftComponent={
+            <IconLink
+              size={theme.icon.size.sm}
+              stroke={theme.icon.stroke.sm}
+              color={theme.font.color.tertiary}
+            />
+          }
+        />
+      </StyledCell>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS['Created by']}>
+        <PersonChip fullName={company.createdBy} />
+      </StyledCell>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS['Account Owner']}>
+        <PersonChip fullName={company.accountOwner} />
+      </StyledCell>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS['Creation date']}>
+        <StyledMutedText>{company.creationDate}</StyledMutedText>
+      </StyledCell>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS.Employees}>
+        <StyledTruncated>{formatNumber(company.employees)}</StyledTruncated>
+      </StyledCell>
+      <StyledCell width={BACKGROUND_MOCK_COLUMN_WIDTHS.Address}>
+        <StyledTruncated>{company.address}</StyledTruncated>
+      </StyledCell>
+      <StyledLastEmptyCell />
+    </StyledRow>
+  );
+};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockViewBar.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockViewBar.tsx
new file mode 100644
index 0000000000..b8608af410
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/BackgroundMockViewBar.tsx
@@ -0,0 +1,61 @@
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
+
+import { TopBar } from '@/ui/layout/top-bar/components/TopBar';
+import {
+  IconBuildingSkyscraper,
+  IconChevronDown,
+  TintedIconTile,
+} from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+
+const StyledViewPicker = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  font-weight: ${themeCssVariables.font.weight.medium};
+  gap: ${themeCssVariables.spacing[1]};
+  height: 100%;
+  padding: 0 ${themeCssVariables.spacing[2]};
+`;
+
+const StyledViewPickerCount = styled.span`
+  color: ${themeCssVariables.font.color.tertiary};
+`;
+
+const StyledRightAction = styled.div`
+  align-items: center;
+  color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
+  font-weight: ${themeCssVariables.font.weight.regular};
+  height: 100%;
+  padding: 0 ${themeCssVariables.spacing[2]};
+`;
+
+export const BackgroundMockViewBar = () => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <TopBar
+      leftComponent={
+        <StyledViewPicker>
+          <TintedIconTile Icon={IconBuildingSkyscraper} color="blue" />
+          <span>All Companies</span>
+          <StyledViewPickerCount>· 599</StyledViewPickerCount>
+          <IconChevronDown
+            size={theme.icon.size.sm}
+            stroke={theme.icon.stroke.sm}
+          />
+        </StyledViewPicker>
+      }
+      rightComponent={
+        <>
+          <StyledRightAction>Filter</StyledRightAction>
+          <StyledRightAction>Sort</StyledRightAction>
+          <StyledRightAction>Options</StyledRightAction>
+        </>
+      }
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
deleted file mode 100644
index 54119848a3..0000000000
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { styled } from '@linaria/react';
-
-import { CommandMenuComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuComponentInstanceContext';
-import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
-import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
-import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
-import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
-import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
-import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record-index/hooks/useRecordIndexFieldMetadataDerivedStates';
-import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
-import { SignInBackgroundMockContainerEffect } from '@/sign-in-background-mock/components/SignInBackgroundMockContainerEffect';
-import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { ViewBar } from '@/views/components/ViewBar';
-import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { isDefined } from 'twenty-shared/utils';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: auto;
-`;
-
-export const SignInBackgroundMockContainer = () => {
-  const objectNamePlural = 'companies';
-  const objectNameSingular = 'company';
-  const recordIndexId = 'sign-up-mock-record-table-id';
-  const viewBarId = 'companies-mock';
-
-  const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
-
-  const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
-    contextStoreCurrentObjectMetadataItemIdComponentState,
-    MAIN_CONTEXT_STORE_INSTANCE_ID,
-  );
-
-  const objectMetadataItem = objectMetadataItems.find(
-    (objectMetadataItem) =>
-      objectMetadataItem.id === contextStoreCurrentObjectMetadataItemId,
-  );
-
-  const {
-    fieldDefinitionByFieldMetadataItemId,
-    fieldMetadataItemByFieldMetadataItemId,
-    labelIdentifierFieldMetadataItem,
-    recordFieldByFieldMetadataItemId,
-  } = useRecordIndexFieldMetadataDerivedStates(
-    objectMetadataItem,
-    recordIndexId,
-  );
-
-  return (
-    <StyledContainer>
-      <RecordIndexContextProvider
-        value={{
-          objectPermissionsByObjectMetadataId: {},
-          recordIndexId,
-          viewBarInstanceId: recordIndexId,
-          objectNamePlural,
-          objectNameSingular,
-          objectMetadataItem: objectMetadataItem ?? objectMetadataItems[0],
-          onIndexRecordsLoaded: () => {},
-          indexIdentifierUrl: () => '',
-          fieldDefinitionByFieldMetadataItemId,
-          fieldMetadataItemByFieldMetadataItemId,
-          labelIdentifierFieldMetadataItem,
-          recordFieldByFieldMetadataItemId,
-        }}
-      >
-        <ViewComponentInstanceContext.Provider
-          value={{ instanceId: recordIndexId }}
-        >
-          <RecordComponentInstanceContextsWrapper
-            componentInstanceId={recordIndexId}
-          >
-            <ContextStoreComponentInstanceContext.Provider
-              value={{
-                instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
-              }}
-            >
-              <SignInBackgroundMockContainerEffect
-                objectNamePlural={objectNamePlural}
-                recordTableId={recordIndexId}
-                viewId={viewBarId}
-              />
-              <CommandMenuComponentInstanceContext.Provider
-                value={{ instanceId: recordIndexId }}
-              >
-                {isDefined(objectMetadataItem) && (
-                  <>
-                    <ViewBar
-                      viewBarId={viewBarId}
-                      optionsDropdownButton={<></>}
-                      isReadOnly
-                    />
-
-                    <RecordTableWithWrappers
-                      objectNameSingular={objectNameSingular}
-                      recordTableId={recordIndexId}
-                      viewBarId={viewBarId}
-                    />
-                  </>
-                )}
-              </CommandMenuComponentInstanceContext.Provider>
-            </ContextStoreComponentInstanceContext.Provider>
-          </RecordComponentInstanceContextsWrapper>
-        </ViewComponentInstanceContext.Provider>
-      </RecordIndexContextProvider>
-    </StyledContainer>
-  );
-};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx
deleted file mode 100644
index 3bcf245e0b..0000000000
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainerEffect.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useEffect } from 'react';
-
-import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
-import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
-import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
-
-import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState';
-import { type RecordField } from '@/object-record/record-field/types/RecordField';
-import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions';
-import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
-import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
-import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
-import { isDefined } from 'twenty-shared/utils';
-import { useInitViewBar } from '@/views/hooks/useInitViewBar';
-
-type SignInBackgroundMockContainerEffectProps = {
-  objectNamePlural: string;
-  recordTableId: string;
-  viewId: string;
-};
-
-export const SignInBackgroundMockContainerEffect = ({
-  objectNamePlural,
-  recordTableId,
-  viewId,
-}: SignInBackgroundMockContainerEffectProps) => {
-  const [
-    contextStoreCurrentObjectMetadataItemId,
-    setContextStoreCurrentObjectMetadataItemId,
-  ] = useAtomComponentState(
-    contextStoreCurrentObjectMetadataItemIdComponentState,
-    MAIN_CONTEXT_STORE_INSTANCE_ID,
-  );
-
-  const setCurrentRecordFields = useSetAtomComponentState(
-    currentRecordFieldsComponentState,
-    recordTableId,
-  );
-
-  const objectMetadataItem = useAtomFamilySelectorValue(
-    objectMetadataItemFamilySelector,
-    { objectName: objectNamePlural, objectNameType: 'plural' },
-  );
-
-  const { setAvailableFieldDefinitions, setViewObjectMetadataId } =
-    useInitViewBar(viewId);
-
-  useEffect(() => {
-    if (!isDefined(objectMetadataItem)) {
-      return;
-    }
-
-    setViewObjectMetadataId?.(objectMetadataItem.id);
-
-    setAvailableFieldDefinitions?.(SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS);
-
-    const recordFields = SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS.filter(
-      (fieldDefinition) => fieldDefinition.fieldMetadataId !== '',
-    ).map(
-      (columnDefinitionMock) =>
-        ({
-          fieldMetadataItemId: columnDefinitionMock.fieldMetadataId,
-          id: columnDefinitionMock.fieldMetadataId,
-          isVisible: columnDefinitionMock.isVisible,
-          position: columnDefinitionMock.position,
-          size: columnDefinitionMock.size,
-        }) satisfies RecordField as RecordField,
-    );
-
-    setCurrentRecordFields(recordFields);
-
-    if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) {
-      setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
-    }
-  }, [
-    setViewObjectMetadataId,
-    setAvailableFieldDefinitions,
-    objectMetadataItem,
-    recordTableId,
-    setContextStoreCurrentObjectMetadataItemId,
-    contextStoreCurrentObjectMetadataItemId,
-    setCurrentRecordFields,
-  ]);
-
-  return <></>;
-};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
deleted file mode 100644
index 8f030db2bf..0000000000
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { styled } from '@linaria/react';
-
-import { SignInBackgroundMockContainer } from '@/sign-in-background-mock/components/SignInBackgroundMockContainer';
-import { PageBody } from '@/ui/layout/page/components/PageBody';
-import { PageContainer } from '@/ui/layout/page/components/PageContainer';
-import { PageHeader } from '@/ui/layout/page/components/PageHeader';
-import { IconBuildingSkyscraper } from 'twenty-ui/display';
-
-const StyledTableContainer = styled.div`
-  display: flex;
-  height: 100%;
-  width: 100%;
-`;
-
-export const SignInBackgroundMockPage = () => {
-  return (
-    <PageContainer>
-      <PageHeader title={t`Companies`} Icon={IconBuildingSkyscraper} />
-      <PageBody>
-        <StyledTableContainer>
-          <SignInBackgroundMockContainer />
-        </StyledTableContainer>
-      </PageBody>
-    </PageContainer>
-  );
-};
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumnWidths.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumnWidths.ts
new file mode 100644
index 0000000000..ec06ad2c76
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumnWidths.ts
@@ -0,0 +1,9 @@
+export const BACKGROUND_MOCK_COLUMN_WIDTHS = {
+  Name: 180,
+  Domain: 130,
+  'Created by': 130,
+  'Account Owner': 130,
+  'Creation date': 130,
+  Employees: 110,
+  Address: 200,
+} as const;
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumns.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumns.ts
new file mode 100644
index 0000000000..b6add8f1f6
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockColumns.ts
@@ -0,0 +1,45 @@
+import { BACKGROUND_MOCK_COLUMN_WIDTHS } from '@/sign-in-background-mock/constants/BackgroundMockColumnWidths';
+
+export type BackgroundMockColumn = {
+  label: keyof typeof BACKGROUND_MOCK_COLUMN_WIDTHS;
+  iconName: string;
+  width: number;
+};
+
+export const BACKGROUND_MOCK_COLUMNS = [
+  {
+    label: 'Name',
+    iconName: 'IconBuildingSkyscraper',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS.Name,
+  },
+  {
+    label: 'Domain',
+    iconName: 'IconLink',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS.Domain,
+  },
+  {
+    label: 'Created by',
+    iconName: 'IconUserCircle',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS['Created by'],
+  },
+  {
+    label: 'Account Owner',
+    iconName: 'IconUserCircle',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS['Account Owner'],
+  },
+  {
+    label: 'Creation date',
+    iconName: 'IconCalendar',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS['Creation date'],
+  },
+  {
+    label: 'Employees',
+    iconName: 'IconUsers',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS.Employees,
+  },
+  {
+    label: 'Address',
+    iconName: 'IconMap',
+    width: BACKGROUND_MOCK_COLUMN_WIDTHS.Address,
+  },
+] satisfies BackgroundMockColumn[];
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockCompanies.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockCompanies.ts
new file mode 100644
index 0000000000..da17ee638c
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockCompanies.ts
@@ -0,0 +1,223 @@
+export type BackgroundMockCompany = {
+  id: string;
+  name: string;
+  domainName: string;
+  createdBy: string | null;
+  accountOwner: string | null;
+  creationDate: string;
+  employees: number;
+  address: string;
+};
+
+export const BACKGROUND_MOCK_COMPANIES = [
+  {
+    id: 'google',
+    name: 'Google',
+    domainName: 'goo.gle',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 284571,
+    address: 'Mountain View',
+  },
+  {
+    id: 'microsoft',
+    name: 'Microsoft',
+    domainName: 'microsoft.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 226067,
+    address: 'Redmond',
+  },
+  {
+    id: 'meta',
+    name: 'Meta',
+    domainName: 'metacareers.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 119511,
+    address: 'Menlo Park',
+  },
+  {
+    id: 'slb',
+    name: 'SLB',
+    domainName: 'slb.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 113151,
+    address: 'Houston',
+  },
+  {
+    id: 'cisco',
+    name: 'Cisco',
+    domainName: 'cisco.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 99625,
+    address: 'San Jose',
+  },
+  {
+    id: 'uber',
+    name: 'Uber',
+    domainName: 'uber.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Tim Apple',
+    creationDate: 'about 13 hours ago',
+    employees: 90545,
+    address: 'San Francisco',
+  },
+  {
+    id: 'salesforce',
+    name: 'Salesforce',
+    domainName: 'salesforce.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 71322,
+    address: 'San Francisco',
+  },
+  {
+    id: 'amdocs',
+    name: 'Amdocs',
+    domainName: 'amdocs.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 35731,
+    address: 'Chesterfield',
+  },
+  {
+    id: 'vmware',
+    name: 'VMware',
+    domainName: 'vmware.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 34759,
+    address: 'Palo Alto',
+  },
+  {
+    id: 'globallogic',
+    name: 'GlobalLogic',
+    domainName: 'globallogic.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 24461,
+    address: 'Santa Clara',
+  },
+  {
+    id: 'servicenow',
+    name: 'ServiceNow',
+    domainName: 'servicenow.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Tim Apple',
+    creationDate: 'about 13 hours ago',
+    employees: 24104,
+    address: 'Santa Clara',
+  },
+  {
+    id: 'ssctech',
+    name: 'SS&C Technologies',
+    domainName: 'ssctech.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 20311,
+    address: 'Windsor',
+  },
+  {
+    id: 'workday',
+    name: 'Workday',
+    domainName: 'workday.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 20036,
+    address: 'Pleasanton',
+  },
+  {
+    id: 'redhat',
+    name: 'Red Hat',
+    domainName: 'redhat.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 19945,
+    address: 'Raleigh',
+  },
+  {
+    id: 'netsuite',
+    name: 'NetSuite',
+    domainName: 'netsuite.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 19269,
+    address: 'Austin',
+  },
+  {
+    id: 'synopsys',
+    name: 'Synopsys Inc',
+    domainName: 'synopsys.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 18061,
+    address: 'Sunnyvale',
+  },
+  {
+    id: 'siemens',
+    name: 'Siemens Digital Industries',
+    domainName: 'sw.siemens.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Tim Apple',
+    creationDate: 'about 13 hours ago',
+    employees: 17262,
+    address: 'Plano',
+  },
+  {
+    id: 'sas',
+    name: 'SAS',
+    domainName: 'sas.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 16287,
+    address: 'Cary',
+  },
+  {
+    id: 'intuit',
+    name: 'Intuit',
+    domainName: 'intuit.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 15851,
+    address: 'Mountain View',
+  },
+  {
+    id: 'broadcom',
+    name: 'Broadcom Software',
+    domainName: 'broadcom.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Phil Schiller',
+    creationDate: 'about 13 hours ago',
+    employees: 15127,
+    address: 'San Jose',
+  },
+  {
+    id: 'autodesk',
+    name: 'Autodesk',
+    domainName: 'autodesk.com',
+    createdBy: 'Tim Apple',
+    accountOwner: 'Jony Ive',
+    creationDate: 'about 13 hours ago',
+    employees: 14593,
+    address: 'San Francisco',
+  },
+] satisfies BackgroundMockCompany[];
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockNavigationItems.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockNavigationItems.ts
new file mode 100644
index 0000000000..331361967c
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockNavigationItems.ts
@@ -0,0 +1,38 @@
+import {
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconCheckbox,
+  type IconComponent,
+  IconFileText,
+  IconHeart,
+  IconLayoutDashboard,
+  IconNotes,
+  IconRocket,
+  IconStar,
+  IconTargetArrow,
+  IconUser,
+  IconUserCircle,
+} from 'twenty-ui/display';
+import { type ThemeColor } from 'twenty-ui/theme';
+
+export type BackgroundMockNavigationItem = {
+  label: string;
+  Icon: IconComponent;
+  color: ThemeColor;
+};
+
+export const BACKGROUND_MOCK_WORKSPACE_ITEMS = [
+  { label: 'Companies', Icon: IconBuildingSkyscraper, color: 'blue' },
+  { label: 'People', Icon: IconUser, color: 'blue' },
+  { label: 'Opportunities', Icon: IconTargetArrow, color: 'red' },
+  { label: 'Tasks', Icon: IconCheckbox, color: 'turquoise' },
+  { label: 'Notes', Icon: IconNotes, color: 'turquoise' },
+  { label: 'Dashboards', Icon: IconLayoutDashboard, color: 'orange' },
+  { label: 'Workflows', Icon: IconRocket, color: 'pink' },
+  { label: 'Rockets', Icon: IconRocket, color: 'sky' },
+  { label: 'Pets', Icon: IconHeart, color: 'orange' },
+  { label: 'Survey results', Icon: IconStar, color: 'yellow' },
+  { label: 'Employment Histories', Icon: IconUserCircle, color: 'green' },
+  { label: 'Pet Care Agreements', Icon: IconFileText, color: 'purple' },
+  { label: 'Star History', Icon: IconCalendarEvent, color: 'red' },
+] satisfies BackgroundMockNavigationItem[];
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockOtherItems.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockOtherItems.ts
new file mode 100644
index 0000000000..a62f487169
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockOtherItems.ts
@@ -0,0 +1,8 @@
+import { IconFileText, IconSettings } from 'twenty-ui/display';
+
+import { type BackgroundMockNavigationItem } from '@/sign-in-background-mock/constants/BackgroundMockNavigationItems';
+
+export const BACKGROUND_MOCK_OTHER_ITEMS = [
+  { label: 'Settings', Icon: IconSettings, color: 'gray' },
+  { label: 'Documentation', Icon: IconFileText, color: 'gray' },
+] satisfies BackgroundMockNavigationItem[];
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockTableDimensions.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockTableDimensions.ts
new file mode 100644
index 0000000000..69cd882a60
--- /dev/null
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/constants/BackgroundMockTableDimensions.ts
@@ -0,0 +1,6 @@
+export const BACKGROUND_MOCK_TABLE_DIMENSIONS = {
+  rowHeight: 32,
+  dragHandleColumnWidth: 12,
+  checkboxColumnWidth: 28,
+  addColumnButtonWidth: 32,
+} as const;
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts
deleted file mode 100644
index 2db635ef5a..0000000000
--- a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions.ts
+++ /dev/null
@@ -1,302 +0,0 @@
-/* oxlint-disable twenty/max-consts-per-file */
-import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
-import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
-import { findByProperty } from 'twenty-shared/utils';
-import { FieldMetadataType, RelationType } from '~/generated-metadata/graphql';
-import { getMockObjectMetadataItemOrThrow } from '~/testing/utils/getMockObjectMetadataItemOrThrow';
-
-const COMPANY_MOCK_OBJECT = getMockObjectMetadataItemOrThrow('company');
-
-export const SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS = (
-  [
-    {
-      position: 0,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'name'))?.id ??
-        '',
-      label: 'Name',
-      size: 100,
-      type: FieldMetadataType.TEXT,
-      metadata: {
-        fieldName: 'name',
-        placeHolder: 'Name',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconBuildingSkyscraper',
-      isVisible: true,
-      defaultValue: '',
-    },
-    {
-      position: 1,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'domainName'))
-          ?.id ?? '',
-      label: 'Domain Name',
-      size: 100,
-      type: FieldMetadataType.LINKS,
-      metadata: {
-        fieldName: 'domainName',
-        placeHolder: 'Domain Name',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconLink',
-      isVisible: true,
-      defaultValue: '',
-    },
-    {
-      position: 2,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'employees'))
-          ?.id ?? '',
-      label: 'Employees',
-      size: 100,
-      type: FieldMetadataType.NUMBER,
-      metadata: {
-        fieldName: 'employees',
-        placeHolder: 'Employees',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconUsers',
-      isVisible: true,
-      defaultValue: 0,
-    },
-    {
-      position: 3,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'people'))?.id ??
-        '',
-      label: 'People',
-      size: 100,
-      type: FieldMetadataType.RELATION,
-      metadata: {
-        fieldName: 'people',
-        relationType: RelationType.ONE_TO_MANY,
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconUsers',
-      isVisible: true,
-      defaultValue: [],
-    },
-    {
-      position: 4,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'address'))
-          ?.id ?? '',
-      label: 'Address',
-      size: 100,
-      type: FieldMetadataType.ADDRESS,
-      metadata: {
-        fieldName: 'address',
-        placeHolder: 'Address',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconMap',
-      isVisible: true,
-      defaultValue: '',
-    },
-    {
-      position: 5,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'accountOwner'))
-          ?.id ?? '',
-      label: 'Account Owner',
-      size: 100,
-      type: FieldMetadataType.RELATION,
-      metadata: {
-        fieldName: 'accountOwner',
-        relationType: RelationType.MANY_TO_ONE,
-        relationObjectMetadataNameSingular: 'workspaceMember',
-        relationObjectMetadataNamePlural: 'workspaceMembers',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconUserCircle',
-      isVisible: true,
-      defaultValue: null,
-    },
-    {
-      position: 6,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'attachments'))
-          ?.id ?? '',
-      label: 'Attachments',
-      size: 100,
-      type: FieldMetadataType.RELATION,
-      metadata: {
-        fieldName: 'attachments',
-        relationType: RelationType.ONE_TO_MANY,
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconFileImport',
-      isVisible: true,
-      defaultValue: [],
-    },
-    {
-      position: 7,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'createdAt'))
-          ?.id ?? '',
-      label: 'Creation date',
-      size: 100,
-      type: FieldMetadataType.DATE_TIME,
-      metadata: {
-        fieldName: 'createdAt',
-        placeHolder: 'Creation date',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconCalendar',
-      isVisible: true,
-      defaultValue: '',
-    },
-    {
-      position: 8,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(
-          findByProperty('name', 'idealCustomerProfile'),
-        )?.id ?? '',
-      label: 'ICP',
-      size: 100,
-      type: FieldMetadataType.BOOLEAN,
-      metadata: {
-        fieldName: 'idealCustomerProfile',
-        placeHolder: 'ICP',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconTarget',
-      isVisible: true,
-      defaultValue: false,
-    },
-    {
-      position: 9,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'linkedinLink'))
-          ?.id ?? '',
-      label: 'Linkedin',
-      size: 100,
-      type: FieldMetadataType.LINKS,
-      metadata: {
-        fieldName: 'linkedinLink',
-        placeHolder: 'Linkedin',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconBrandLinkedin',
-      isVisible: true,
-      defaultValue: '',
-    },
-    {
-      position: 10,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'opportunities'))
-          ?.id ?? '',
-      label: 'Opportunities',
-      size: 100,
-      type: FieldMetadataType.RELATION,
-      metadata: {
-        fieldName: 'opportunities',
-        relationType: RelationType.ONE_TO_MANY,
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconTargetArrow',
-      isVisible: true,
-      defaultValue: [],
-    },
-    {
-      position: 11,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'xLink'))?.id ??
-        '',
-      label: 'X',
-      size: 100,
-      type: FieldMetadataType.LINKS,
-      metadata: {
-        fieldName: 'xLink',
-        placeHolder: 'X',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconBrandX',
-      isVisible: true,
-      defaultValue: '',
-    },
-    {
-      position: 12,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(
-          findByProperty('name', 'activityTargets'),
-        )?.id ?? '',
-      label: 'Activities',
-      size: 100,
-      type: FieldMetadataType.RELATION,
-      metadata: {
-        fieldName: 'activityTargets',
-        relationType: RelationType.ONE_TO_MANY,
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconCheckbox',
-      isVisible: true,
-      defaultValue: [],
-    },
-    {
-      position: 13,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(
-          findByProperty('name', 'annualRecurringRevenue'),
-        )?.id ?? '',
-      label: 'ARR',
-      size: 100,
-      type: FieldMetadataType.CURRENCY,
-      metadata: {
-        fieldName: 'annualRecurringRevenue',
-        placeHolder: 'ARR',
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconMoneybag',
-      isVisible: true,
-      defaultValue: 0,
-    },
-    {
-      position: 14,
-      fieldMetadataId:
-        COMPANY_MOCK_OBJECT.fields.find(findByProperty('name', 'favorites'))
-          ?.id ?? '',
-      label: 'Favorites',
-      size: 100,
-      type: FieldMetadataType.RELATION,
-      metadata: {
-        fieldName: 'favorites',
-        relationType: RelationType.ONE_TO_MANY,
-        relationObjectMetadataNameSingular: '',
-        relationObjectMetadataNamePlural: '',
-        objectMetadataNameSingular: 'company',
-      },
-      iconName: 'IconHeart',
-      isVisible: true,
-      defaultValue: [],
-    },
-  ] satisfies ColumnDefinition<FieldMetadata>[]
-).filter(filterAvailableTableColumns);
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts
deleted file mode 100644
index a2e41f9636..0000000000
--- a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockCompanies.ts
+++ /dev/null
@@ -1,1385 +0,0 @@
-import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
-import { type RecordGqlConnectionEdgesRequired } from '@/object-record/graphql/types/RecordGqlConnectionEdgesRequired';
-import { type RecordGqlEdge } from '@/object-record/graphql/types/RecordGqlEdge';
-
-// oxlint-disable-next-line @typescripttypescript/naming-convention
-const baseMock = [
-  {
-    __typename: 'Company',
-    id: '04b2e9f5-0713-40a5-8216-82802401d33e',
-    domainName: {
-      primaryLinkUrl: 'anthropic.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 1100,
-    name: 'Anthropic',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '548 Market Street',
-      addressStreet2: null,
-      addressState: null,
-      addressPostcode: '94104',
-      addressCountry: 'United States',
-      addressCity: 'San Francisco',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '240da2ec-2d40-4e49-8df4-9c6a049190df',
-            email: 'bertrand.voulzy@google.com',
-            avatarUrl: null,
-            phone: '+33788901234',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '04b2e9f5-0713-40a5-8216-82802401d33e',
-            jobTitle: 'zdf',
-            xLink: {
-              primaryLinkLabel: 'asd',
-              primaryLinkUrl: 'asd.com',
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Bertrand',
-              lastName: 'Voulzy',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: 'asd',
-              primaryLinkUrl: 'asd.com',
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'Anthropic',
-      primaryLinkUrl: 'https://www.linkedin.com/company/anthropicresearch',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '0d940997-c21e-4ec2-873b-de4264d89025',
-    domainName: {
-      primaryLinkUrl: 'google.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 72_000,
-    name: 'Google',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '1600 Amphitheatre Pkwy',
-      addressStreet2: 'Mountain View',
-      addressState: 'CA',
-      addressPostcode: '94043',
-      addressCountry: 'United States',
-      addressCity: 'Mountain View',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '240da2ec-2d40-4e49-8df4-9c6a049190ef',
-            email: 'madison.perez@google.com',
-            avatarUrl: null,
-            phone: '+33788901234',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '0d940997-c21e-4ec2-873b-de4264d89025',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Madison',
-              lastName: 'Perez',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '56955422-5d54-41b7-ba36-f0d20e1417ae',
-            email: 'avery.carter@airbnb.com',
-            avatarUrl: null,
-            phone: '+33786789012',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '0d940997-c21e-4ec2-873b-de4264d89025',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Avery',
-              lastName: 'Carter',
-            },
-            city: 'New York',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '755035db-623d-41fe-92e7-dd45b7c568e1',
-            email: 'ethan.mitchell@google.com',
-            avatarUrl: null,
-            phone: '+33787890123',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '0d940997-c21e-4ec2-873b-de4264d89025',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Ethan',
-              lastName: 'Mitchell',
-            },
-            city: 'Los Angeles',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: 'a2e78a5f-338b-46df-8811-fa08c7d19d35',
-            email: 'elizabeth.baker@airbnb.com',
-            avatarUrl: null,
-            phone: '+33784567890',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '0d940997-c21e-4ec2-873b-de4264d89025',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Elizabeth',
-              lastName: 'Baker',
-            },
-            city: 'New York',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: 'ca1f5bf3-64ad-4b0e-bbfd-e9fd795b7016',
-            email: 'christopher.nelson@airbnb.com',
-            avatarUrl: null,
-            phone: '+33785678901',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '0d940997-c21e-4ec2-873b-de4264d89025',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Christopher',
-              lastName: 'Nelson',
-            },
-            city: 'San Francisco',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'google',
-      primaryLinkUrl: 'https://www.linkedin.com/company/google',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '118995f3-5d81-46d6-bf83-f7fd33ea6102',
-    domainName: {
-      primaryLinkUrl: 'facebook.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 87_000,
-    name: 'Facebook',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '1 Hacker Way',
-      addressStreet2: 'Menlo Park',
-      addressState: 'CA',
-      addressPostcode: '94025',
-      addressCountry: 'United States',
-      addressCity: 'Menlo Park',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '93c72d2e-f517-42fd-80ae-14173b3b70ae',
-            email: 'christopher.gonzalez@anthropic.com',
-            avatarUrl: null,
-            phone: '+33789012345',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '118995f3-5d81-46d6-bf83-f7fd33ea6102',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Christopher',
-              lastName: 'Gonzalez',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: 'eeeacacf-eee1-4690-ad2c-8619e5b56a2e',
-            email: 'ashley.parker@anthropic.com',
-            avatarUrl: null,
-            phone: '+33780123456',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '118995f3-5d81-46d6-bf83-f7fd33ea6102',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Ashley',
-              lastName: 'Parker',
-            },
-            city: 'Los Angeles',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'facebook',
-      primaryLinkUrl: 'https://www.linkedin.com/company/facebook',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [
-        {
-          __typename: 'OpportunityEdge',
-          node: {
-            __typename: 'Opportunity',
-            id: '53f66647-0543-4cc2-9f96-95cc699960f2',
-            pointOfContactId: '93c72d2e-f517-42fd-80ae-14173b3b70ae',
-            stage: 'NEW',
-            amount: {
-              __typename: 'Currency',
-              amountMicros: 2000000,
-              currencyCode: 'USD',
-            },
-            createdAt: '2024-11-23T15:38:03.703Z',
-            closeDate: '2024-11-23T15:38:03.703Z',
-            personId: '93c72d2e-f517-42fd-80ae-14173b3b70ae',
-            companyId: '118995f3-5d81-46d6-bf83-f7fd33ea6102',
-            updatedAt: '2024-11-23T15:38:03.703Z',
-          },
-        },
-      ],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '1d3a1c6e-707e-44dc-a1d2-30030bf1a944',
-    domainName: {
-      primaryLinkUrl: 'netflix.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 3_000,
-    name: 'Netflix',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '121 Albright Way',
-      addressStreet2: 'Los Gatos',
-      addressState: 'CA',
-      addressPostcode: '95032',
-      addressCountry: 'France',
-      addressCity: 'Paris',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'netflix',
-      primaryLinkUrl: 'https://www.linkedin.com/company/netflix',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '460b6fb1-ed89-413a-b31a-962986e67bb4',
-    domainName: {
-      primaryLinkUrl: 'microsoft.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 221_000,
-    name: 'Microsoft',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '1 Microsoft Way',
-      addressStreet2: 'Redmond',
-      addressState: 'WA',
-      addressPostcode: '98052',
-      addressCountry: 'United States',
-      addressCity: 'Redmond',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '1d151852-490f-4466-8391-733cfd66a0c8',
-            email: 'isabella.scott@microsoft.com',
-            avatarUrl: null,
-            phone: '+33782345678',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '460b6fb1-ed89-413a-b31a-962986e67bb4',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Isabella',
-              lastName: 'Scott',
-            },
-            city: 'New York',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '98406e26-80f1-4dff-b570-a74942528de3',
-            email: 'matthew.green@microsoft.com',
-            avatarUrl: null,
-            phone: '+33783456789',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '460b6fb1-ed89-413a-b31a-962986e67bb4',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Matthew',
-              lastName: 'Green',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '9b324a88-6784-4449-afdf-dc62cb8702f2',
-            email: 'nicholas.wright@microsoft.com',
-            avatarUrl: null,
-            phone: '+33781234567',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: '460b6fb1-ed89-413a-b31a-962986e67bb4',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Nicholas',
-              lastName: 'Wright',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'microsoft',
-      primaryLinkUrl: 'https://www.linkedin.com/company/microsoft',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [
-        {
-          __typename: 'OpportunityEdge',
-          node: {
-            __typename: 'Opportunity',
-            id: '81ab695d-2f89-406f-90ea-180f433b2445',
-            stage: 'NEW',
-            pointOfContactId: '9b324a88-6784-4449-afdf-dc62cb8702f2',
-            amount: {
-              __typename: 'Currency',
-              amountMicros: 300000,
-              currencyCode: 'USD',
-            },
-            createdAt: '2024-11-23T15:38:03.703Z',
-            closeDate: '2024-11-23T15:38:03.703Z',
-            personId: '9b324a88-6784-4449-afdf-dc62cb8702f2',
-            companyId: '460b6fb1-ed89-413a-b31a-962986e67bb4',
-            updatedAt: '2024-11-23T15:38:03.703Z',
-          },
-        },
-        {
-          __typename: 'OpportunityEdge',
-          node: {
-            __typename: 'Opportunity',
-            id: '9b059852-35b1-4045-9cde-42f715148954',
-            stage: 'NEW',
-            pointOfContactId: '98406e26-80f1-4dff-b570-a74942528de3',
-            amount: {
-              __typename: 'Currency',
-              amountMicros: 4000000,
-              currencyCode: 'USD',
-            },
-            createdAt: '2024-11-23T15:38:03.703Z',
-            closeDate: '2024-11-23T15:38:03.703Z',
-            personId: '98406e26-80f1-4dff-b570-a74942528de3',
-            companyId: '460b6fb1-ed89-413a-b31a-962986e67bb4',
-            updatedAt: '2024-11-23T15:38:03.703Z',
-          },
-        },
-      ],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '7a93d1e5-3f74-492d-a101-2a70f50a1645',
-    domainName: {
-      primaryLinkUrl: 'libeo.io',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 50,
-    name: 'Libeo',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '42 rue de paradis',
-      addressStreet2: '3rd floor',
-      addressCity: 'Paris',
-      addressState: 'Ile de France',
-      addressPostcode: '75010',
-      addressCountry: 'France',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'libeo',
-      primaryLinkUrl: 'https://www.linkedin.com/company/libeo',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
-    domainName: {
-      primaryLinkUrl: 'airbnb.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 6_000,
-    name: 'Airbnb',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '888 Brannan Street',
-      addressStreet2: '4th Floor',
-      addressCity: 'San Francisco',
-      addressState: 'CA',
-      addressPostcode: '94103',
-      addressCountry: 'United States',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'airbnb',
-      primaryLinkUrl: 'https://www.linkedin.com/company/airbnb',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
-    domainName: {
-      primaryLinkUrl: 'claap.io',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 7,
-    name: 'Claap',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '901 Fifth Avenue',
-      addressStreet2: 'Suite 1200',
-      addressCity: 'Seattle',
-      addressState: 'WA',
-      addressPostcode: '98164',
-      addressCountry: 'United States',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'claap',
-      primaryLinkUrl: 'https://www.linkedin.com/company/claap',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
-    domainName: {
-      primaryLinkUrl: 'algolia.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 250,
-    name: 'Algolia',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '3790 El Camino Real',
-      addressStreet2: 'Unit 518',
-      addressCity: 'Palo Alto',
-      addressState: 'CA',
-      addressPostcode: '94306',
-      addressCountry: 'United States',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '240da2ec-2d40-4e49-8df4-9c6a049191df',
-            email: 'lorie.vladim@google.com',
-            avatarUrl: null,
-            phone: '+33788901235',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Lorie',
-              lastName: 'Vladim',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'algolia',
-      primaryLinkUrl: 'https://www.linkedin.com/company/algolia',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: 'a7bc68d5-f79e-40dd-bd06-c36e6abb4678',
-    domainName: {
-      primaryLinkUrl: 'samsung.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 400_000,
-    name: 'Samsung',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '129, Samsung-ro',
-      addressStreet2: 'Yeongtong-gu, Suwon-si',
-      addressPostcode: '16677',
-      addressState: 'Gyeonggi-do',
-      addressCity: 'Gyeonggi-do',
-      addressCountry: 'South Korea',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '240da2ec-2d40-4e49-8df4-9c6a049191de',
-            email: 'louis.duss@google.com',
-            avatarUrl: null,
-            phone: '+33788901234',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: 'a7bc68d5-f79e-40dd-bd06-c36e6abb4678',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Louis',
-              lastName: 'Duss',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'samsung',
-      primaryLinkUrl: 'https://www.linkedin.com/company/samsung',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: 'aaffcfbd-f86b-419f-b794-02319abe8637',
-    domainName: {
-      primaryLinkUrl: 'hasura.io',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 17_000,
-    name: 'Hasura',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '576 Folsom St.',
-      addressStreet2: 'Floor 3',
-      addressCity: 'San Francisco',
-      addressState: 'CA',
-      addressPostcode: '94105',
-      addressCountry: 'United States',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'hasura',
-      primaryLinkUrl: 'https://www.linkedin.com/company/hasura',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: 'f33dc242-5518-4553-9433-42d8eb82834b',
-    domainName: {
-      primaryLinkUrl: 'wework.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 2_000,
-    name: 'Wework',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '575 Lexington Ave 16th Floor',
-      addressStreet2: '16th Floor',
-      addressCity: 'New York',
-      addressState: 'NY',
-      addressPostcode: '10022',
-      addressCountry: 'United States',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'wework',
-      primaryLinkUrl: 'https://www.linkedin.com/company/wework',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-  {
-    __typename: 'Company',
-    id: 'fe256b39-3ec3-4fe3-8997-b76aa0bfa408',
-    domainName: {
-      primaryLinkUrl: 'linkedin.com',
-      primaryLinkLabel: '',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    updatedAt: '2024-11-23T15:38:03.699Z',
-    employees: 20_000,
-    name: 'Linkedin',
-    favorites: {
-      __typename: 'FavoriteConnection',
-      edges: [],
-    },
-    address: {
-      addressStreet1: '315 Montgomery St',
-      addressStreet2: '13th Fl.',
-      addressCity: 'San Francisco',
-      addressState: 'CA',
-      addressPostcode: '94104',
-      addressCountry: 'United States',
-      addressLat: null,
-      addressLng: null,
-      __typename: 'Address',
-    },
-    accountOwner: null,
-    people: {
-      __typename: 'PersonConnection',
-      edges: [
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '0aa00beb-ac73-4797-824e-87a1f5aea9e0',
-            email: 'sylvie.palmer@linkedin.com',
-            avatarUrl: null,
-            phone: '+33780123456',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: 'fe256b39-3ec3-4fe3-8997-b76aa0bfa408',
-            jobTitle: '',
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Sylvie',
-              lastName: 'Palmer',
-            },
-            city: 'Los Angeles',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-        {
-          __typename: 'PersonEdge',
-          node: {
-            __typename: 'Person',
-            id: '86083141-1c0e-494c-a1b6-85b1c6fefaa5',
-            email: 'christoph.calisto@linkedin.com',
-            avatarUrl: null,
-            phone: '+33789012345',
-            createdAt: '2024-11-23T15:38:03.700Z',
-            companyId: 'fe256b39-3ec3-4fe3-8997-b76aa0bfa408',
-            jobTitle: null,
-            xLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-            name: {
-              __typename: 'FullName',
-              firstName: 'Christoph',
-              lastName: 'Callisto',
-            },
-            city: 'Seattle',
-            updatedAt: '2024-11-23T15:38:03.700Z',
-            linkedinLink: {
-              primaryLinkLabel: null,
-              primaryLinkUrl: null,
-              secondaryLinks: [],
-              __typename: 'Links',
-            },
-          },
-        },
-      ],
-    },
-    attachments: {
-      __typename: 'AttachmentConnection',
-      edges: [],
-    },
-    createdAt: '2024-11-23T15:38:03.699Z',
-    idealCustomerProfile: null,
-    linkedinLink: {
-      primaryLinkLabel: 'linkedin',
-      primaryLinkUrl: 'https://www.linkedin.com/company/linkedin',
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    opportunities: {
-      __typename: 'OpportunityConnection',
-      edges: [
-        {
-          __typename: 'OpportunityEdge',
-          node: {
-            __typename: 'Opportunity',
-            id: '7c887ee3-be10-412b-a663-16bd3c2228e1',
-            stage: 'NEW',
-            pointOfContactId: '86083141-1c0e-494c-a1b6-85b1c6fefaa5',
-            amount: {
-              __typename: 'Currency',
-              amountMicros: 100000,
-              currencyCode: 'USD',
-            },
-            createdAt: '2024-11-23T15:38:03.703Z',
-            closeDate: '2024-11-23T15:38:03.703Z',
-            personId: '86083141-1c0e-494c-a1b6-85b1c6fefaa5',
-            companyId: 'fe256b39-3ec3-4fe3-8997-b76aa0bfa408',
-            updatedAt: '2024-11-23T15:38:03.703Z',
-          },
-        },
-      ],
-    },
-    accountOwnerId: null,
-    xLink: {
-      primaryLinkLabel: null,
-      primaryLinkUrl: null,
-      secondaryLinks: [],
-      __typename: 'Links',
-    },
-    annualRecurringRevenue: {
-      __typename: 'Currency',
-      amountMicros: null,
-      currencyCode: null,
-    },
-  },
-];
-
-// oxlint-disable-next-line twenty/max-consts-per-file, @typescripttypescript/naming-convention
-const baseMockToRecordConnection = {
-  edges: baseMock.map(
-    (mockCompany) =>
-      ({
-        node: mockCompany,
-        cursor: mockCompany.id,
-        __typename: 'CompanyEdge',
-      }) as RecordGqlEdge,
-  ) as any,
-  pageInfo: {},
-  __typename: 'CompanyConnection',
-} as RecordGqlConnectionEdgesRequired;
-
-// oxlint-disable-next-line twenty/max-consts-per-file
-export const SIGN_IN_BACKGROUND_MOCK_COMPANIES = getRecordsFromRecordConnection(
-  { recordConnection: baseMockToRecordConnection },
-);
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts b/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts
deleted file mode 100644
index 423f6eab0a..0000000000
--- a/packages/twenty-front/src/modules/sign-in-background-mock/constants/SignInBackgroundMockViewFields.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { type ViewField } from '@/views/types/ViewField';
-
-export const SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS = [
-  {
-    id: '5168be09-f200-40f5-9e04-29d607de06e5',
-    fieldMetadataId: '20202020-7fbd-41ad-b64d-25a15ff62f04',
-    size: 150,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 4,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-  {
-    id: '5ece850b-76fd-4135-9b99-06d49cad14ae',
-    fieldMetadataId: '20202020-a61d-4b78-b998-3fd88b4f73a1',
-    size: 170,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 5,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-  {
-    id: '604dbdbb-df01-4e47-921b-f9963109f912',
-    fieldMetadataId: '20202020-0739-495d-8e70-c0807f6b2268',
-    size: 150,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 2,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-  {
-    id: '7cbc36c8-37c6-4561-8c46-ddb316ddd121',
-    fieldMetadataId: '20202020-4dc2-47c9-bb15-6e6f19ba9e46',
-    size: 150,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 3,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-  {
-    id: 'a7d19be3-1ce9-479b-9453-2930a381e07c',
-    fieldMetadataId: '20202020-5e4e-4007-a630-8a2617914889',
-    size: 100,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 1,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-  {
-    id: 'cafacdc8-cbfc-4545-8242-94787f144ace',
-    fieldMetadataId: 'REPLACE_ME',
-    size: 180,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 0,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-  {
-    id: 'f0cc50c9-b9b6-405b-a1c0-23f7698ea731',
-    fieldMetadataId: '20202020-ad10-4117-a039-3f04b7a5f939',
-    size: 170,
-    createdAt: '2023-11-23T15:38:03.706Z',
-    viewId: '20202020-2441-4424-8163-4002c523d415',
-    position: 6,
-    isVisible: true,
-    updatedAt: '2023-11-23T15:38:03.706Z',
-  },
-] as (ViewField & {
-  createdAt: string;
-  viewId: string;
-  updatedAt: string;
-})[];
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
index 45affd9dc7..e8a9722489 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
@@ -11,12 +11,12 @@ import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar
 import { PageDragDropProvider } from '@/navigation-menu-item/display/dnd/providers/PageDragDropProvider';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
-import { SignInAppNavigationDrawerMock } from '@/sign-in-background-mock/components/SignInAppNavigationDrawerMock';
+import { BackgroundMockNavigationDrawer } from '@/sign-in-background-mock/components/BackgroundMockNavigationDrawer';
 import { Suspense, lazy, useContext } from 'react';
 
-const SignInBackgroundMockPage = lazy(() =>
-  import('@/sign-in-background-mock/components/SignInBackgroundMockPage').then(
-    (module) => ({ default: module.SignInBackgroundMockPage }),
+const BackgroundMockPage = lazy(() =>
+  import('@/sign-in-background-mock/components/BackgroundMockPage').then(
+    (module) => ({ default: module.BackgroundMockPage }),
   ),
 );
 import { useShowFullscreen } from '@/ui/layout/fullscreen/hooks/useShowFullscreen';
@@ -95,7 +95,7 @@ export const DefaultLayout = () => {
                 {!showAuthModal && <KeyboardShortcutMenu />}
                 {showAuthModal ? (
                   <StyledNavigationDrawerWrapper>
-                    <SignInAppNavigationDrawerMock />
+                    <BackgroundMockNavigationDrawer />
                   </StyledNavigationDrawerWrapper>
                 ) : useShowFullScreen ? null : (
                   <StyledNavigationDrawerWrapper>
@@ -106,7 +106,7 @@ export const DefaultLayout = () => {
                   <>
                     <StyledMainContainer>
                       <Suspense fallback={null}>
-                        <SignInBackgroundMockPage />
+                        <BackgroundMockPage />
                       </Suspense>
                     </StyledMainContainer>
                     <AnimatePresence mode="wait">
diff --git a/packages/twenty-front/src/pages/not-found/NotFound.tsx b/packages/twenty-front/src/pages/not-found/NotFound.tsx
index 88db9589b5..1eccfa5fc8 100644
--- a/packages/twenty-front/src/pages/not-found/NotFound.tsx
+++ b/packages/twenty-front/src/pages/not-found/NotFound.tsx
@@ -1,9 +1,9 @@
 import { Trans, useLingui } from '@lingui/react/macro';
 import { lazy, Suspense } from 'react';
 
-const SignInBackgroundMockPage = lazy(() =>
-  import('@/sign-in-background-mock/components/SignInBackgroundMockPage').then(
-    (module) => ({ default: module.SignInBackgroundMockPage }),
+const BackgroundMockPage = lazy(() =>
+  import('@/sign-in-background-mock/components/BackgroundMockPage').then(
+    (module) => ({ default: module.BackgroundMockPage }),
   ),
 );
 import { AppPath } from 'twenty-shared/types';
@@ -69,7 +69,7 @@ export const NotFound = () => {
         </AnimatedPlaceholderErrorContainer>
       </StyledBackDrop>
       <Suspense fallback={null}>
-        <SignInBackgroundMockPage />
+        <BackgroundMockPage />
       </Suspense>
     </>
   );
diff --git a/packages/twenty-front/src/testing/decorators/MockedMetadataLoadEffect.tsx b/packages/twenty-front/src/testing/decorators/MockedMetadataLoadEffect.tsx
new file mode 100644
index 0000000000..e94c7f4077
--- /dev/null
+++ b/packages/twenty-front/src/testing/decorators/MockedMetadataLoadEffect.tsx
@@ -0,0 +1,31 @@
+import { useLoadMockedMetadata } from '@/metadata-store/hooks/useLoadMockedMetadata';
+import { isMinimalMetadataReadyState } from '@/metadata-store/states/isMinimalMetadataReadyState';
+import { metadataStoreState } from '@/metadata-store/states/metadataStoreState';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import { useEffect } from 'react';
+
+export const MockedMetadataLoadEffect = () => {
+  const { loadMockedMetadataAtomic } = useLoadMockedMetadata();
+  const metadataStore = useAtomFamilyStateValue(
+    metadataStoreState,
+    'objectMetadataItems',
+  );
+  const setIsMinimalMetadataReady = useSetAtomState(
+    isMinimalMetadataReadyState,
+  );
+
+  useEffect(() => {
+    void loadMockedMetadataAtomic();
+  }, [loadMockedMetadataAtomic]);
+
+  useEffect(() => {
+    if (metadataStore.status === 'up-to-date') {
+      setIsMinimalMetadataReady(true);
+    } else {
+      setIsMinimalMetadataReady(false);
+    }
+  }, [metadataStore.status, setIsMinimalMetadataReady]);
+
+  return null;
+};
diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
index fae58488d7..afda7b9336 100644
--- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@@ -16,8 +16,7 @@ import { ApolloCoreClientMockedProvider } from '@/object-metadata/hooks/__mocks_
 import { DefaultLayout } from '@/ui/layout/page/components/DefaultLayout';
 import { MinimalMetadataGater } from '@/metadata-store/components/MinimalMetadataGater';
 import { UserMetadataProviderInitialEffect } from '@/metadata-store/effect-components/UserMetadataProviderInitialEffect';
-import { IsMinimalMetadataReadyEffect } from '@/metadata-store/effect-components/IsMinimalMetadataReadyEffect';
-import { MinimalMetadataLoadEffect } from '@/metadata-store/effect-components/MinimalMetadataLoadEffect';
+import { MockedMetadataLoadEffect } from '~/testing/decorators/MockedMetadataLoadEffect';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { useState } from 'react';
 import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider';
@@ -87,8 +86,7 @@ const Providers = () => {
             <ClientConfigProviderEffect />
             <ClientConfigProvider>
               <UserMetadataProviderInitialEffect />
-              <MinimalMetadataLoadEffect />
-              <IsMinimalMetadataReadyEffect />
+              <MockedMetadataLoadEffect />
               <WorkspaceProviderEffect />
               <MinimalMetadataGater>
                 <ApolloCoreClientMockedProvider>