Various fixes (#11448)

# Scrollbar fix Fixes https://github.com/twentyhq/twenty/issues/11403 <img width="1512" alt="image" src="https://github.com/user-attachments/assets/b13fe0f2-8c61-4ea8-9ea1-e61e571a90da" /> --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-04-09 01:03:43 +02:00
parent ab63214efa
commit b6e344e7be
41 changed files with 265 additions and 470 deletions
--- a/packages/twenty-front/index.html
+++ b/packages/twenty-front/index.html
@ -60,7 +60,7 @@
      }
    </script>
  </head>
-  <body style="width: 100%; height: 100vh">
+  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script
--- a/packages/twenty-front/src/hooks/tests/usePageChangeEffectNavigateLocation.test.ts
+++ b/packages/twenty-front/src/hooks/tests/usePageChangeEffectNavigateLocation.test.ts
@ -91,23 +91,23 @@ const testCases: {
  { loc: AppPath.SignInUp, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: AppPath.InviteTeam },
  { loc: AppPath.SignInUp, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: defaultHomePagePath },

-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: undefined },
-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: '/plan-required' },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: '/settings/billing' },
  { loc: AppPath.Invite, isLoggedIn: false, isWorkspaceSuspended: false, onboardingStatus: undefined, res: undefined },
-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: undefined },
-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: undefined },
-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: undefined },
-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: undefined },
-  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: '/create/workspace' },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: '/create/profile' },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: '/sync/emails' },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: '/invite-team' },
+  { loc: AppPath.Invite, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: '/objects/companies' },

-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: undefined },
-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: '/plan-required' },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: '/settings/billing' },
  { loc: AppPath.ResetPassword, isLoggedIn: false, isWorkspaceSuspended: false, onboardingStatus: undefined, res: undefined },
-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: undefined },
-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: undefined },
-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: undefined },
-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: undefined },
-  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: undefined },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: '/create/workspace' },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: '/create/profile' },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: '/sync/emails' },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: '/invite-team' },
+  { loc: AppPath.ResetPassword, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.COMPLETED, res: '/objects/companies' },

  { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: false, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: AppPath.PlanRequired },
  { loc: AppPath.VerifyEmail, isLoggedIn: true, isWorkspaceSuspended: true, onboardingStatus: OnboardingStatus.COMPLETED, res: '/settings/billing' },
--- a/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts
+++ b/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts
@ -7,10 +7,10 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
 import { OnboardingStatus } from '~/generated/graphql';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
-import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
-import { isDefined } from 'twenty-shared/utils';

 export const usePageChangeEffectNavigateLocation = () => {
  const { isMatchingLocation } = useIsMatchingLocation();
@ -47,10 +47,6 @@ export const usePageChangeEffectNavigateLocation = () => {
    (objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
  );

-  if (isMatchingOpenRoute) {
-    return;
-  }
-
  if (!isLoggedIn && !isMatchingOngoingUserCreationRoute) {
    return AppPath.SignInUp;
  }
--- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
+++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx
@ -1,9 +1,11 @@
 import styled from '@emotion/styled';

+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
+import { Modal } from '@/ui/layout/modal/components/Modal';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
 import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';

 const StyledContainer = styled.div`
  background: ${({ theme }) => theme.background.noisy};
@ -23,8 +25,11 @@ const StyledContainer = styled.div`
 `;

 export const UserOrMetadataLoader = () => {
+  const showAuthModal = useShowAuthModal();
+
  return (
    <StyledContainer>
+      {showAuthModal && <Modal.Backdrop modalVariant="primary" />}
      <LeftPanelSkeletonLoader />
      <RightPanelSkeletonLoader />
    </StyledContainer>
--- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
+++ b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
@ -10,7 +10,7 @@ import { ClientConfigProviderEffect } from '@/client-config/components/ClientCon
 import { MainContextStoreProvider } from '@/context-store/components/MainContextStoreProvider';
 import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
 import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
-import { ObjectMetadataItemsGater } from '@/object-metadata/components/ObjectMetadataItemsGater';
+import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
 import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
@ -45,28 +45,27 @@ export const AppRouterProviders = () => {
              <UserProvider>
                <AuthProvider>
                  <ApolloMetadataClientProvider>
+                    <ObjectMetadataItemsLoadEffect />
                    <ObjectMetadataItemsProvider>
-                      <ObjectMetadataItemsGater>
-                        <PrefetchDataProvider>
-                          <UserThemeProviderEffect />
-                          <SnackBarProvider>
-                            <DialogManagerScope dialogManagerScopeId="dialog-manager">
-                              <DialogManager>
-                                <StrictMode>
-                                  <PromiseRejectionEffect />
-                                  <GotoHotkeysEffectsProvider />
-                                  <ServerPreconnect />
-                                  <PageTitle title={pageTitle} />
-                                  <PageFavicon />
-                                  <Outlet />
-                                </StrictMode>
-                              </DialogManager>
-                            </DialogManagerScope>
-                          </SnackBarProvider>
-                          <MainContextStoreProvider />
-                        </PrefetchDataProvider>
-                        <PageChangeEffect />
-                      </ObjectMetadataItemsGater>
+                      <PrefetchDataProvider>
+                        <UserThemeProviderEffect />
+                        <SnackBarProvider>
+                          <DialogManagerScope dialogManagerScopeId="dialog-manager">
+                            <DialogManager>
+                              <StrictMode>
+                                <PromiseRejectionEffect />
+                                <GotoHotkeysEffectsProvider />
+                                <ServerPreconnect />
+                                <PageTitle title={pageTitle} />
+                                <PageFavicon />
+                                <Outlet />
+                              </StrictMode>
+                            </DialogManager>
+                          </DialogManagerScope>
+                        </SnackBarProvider>
+                        <MainContextStoreProvider />
+                      </PrefetchDataProvider>
+                      <PageChangeEffect />
                    </ObjectMetadataItemsProvider>
                  </ApolloMetadataClientProvider>
                </AuthProvider>
--- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
+++ b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import {
+  createSearchParams,
  matchPath,
  useLocation,
  useNavigate,
@ -60,15 +61,27 @@ export const PageChangeEffect = () => {
  }, [location, previousLocation]);

  const [searchParams] = useSearchParams();
-  const navigationParams = searchParams.get('animateModal')
-    ? `?animateModal=${searchParams.get('animateModal')}`
-    : '';

  useEffect(() => {
    if (isDefined(pageChangeEffectNavigateLocation)) {
-      navigate(pageChangeEffectNavigateLocation + navigationParams);
+      const hasQueryParams = pageChangeEffectNavigateLocation.includes('?');
+
+      const navigationParams = createSearchParams({
+        ...(searchParams.get('animateModal')
+          ? { animateModal: searchParams.get('animateModal') ?? 'false' }
+          : {}),
+      });
+
+      if (hasQueryParams) {
+        navigate(pageChangeEffectNavigateLocation);
+      } else {
+        navigate({
+          pathname: pageChangeEffectNavigateLocation,
+          search: navigationParams.toString(),
+        });
+      }
    }
-  }, [navigate, pageChangeEffectNavigateLocation, navigationParams]);
+  }, [navigate, pageChangeEffectNavigateLocation, searchParams]);

  useEffect(() => {
    const isLeavingRecordIndexPage = !!matchPath(
--- a/packages/twenty-front/src/modules/auth/hooks/tests/useAuth.test.tsx
+++ b/packages/twenty-front/src/modules/auth/hooks/tests/useAuth.test.tsx
@ -1,20 +1,20 @@
-import { useApolloClient } from '@apollo/client';
-import { MockedProvider } from '@apollo/client/testing';
-import { expect } from '@storybook/test';
-import { ReactNode, act } from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { RecoilRoot, useRecoilValue } from 'recoil';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { billingState } from '@/client-config/states/billingState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
 import { supportChatState } from '@/client-config/states/supportChatState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
+import { useApolloClient } from '@apollo/client';
+import { MockedProvider } from '@apollo/client/testing';
+import { expect } from '@storybook/test';
+import { ReactNode, act } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { RecoilRoot, useRecoilValue } from 'recoil';

 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { renderHook } from '@testing-library/react';
-import { email, mocks, password, results, token } from '../__mocks__/useAuth';
 import { iconsState } from 'twenty-ui/display';
+import { email, mocks, password, results, token } from '../__mocks__/useAuth';

 const redirectSpy = jest.fn();

@ -24,6 +24,12 @@ jest.mock('@/domain-manager/hooks/useRedirect', () => ({
  })),
 }));

+jest.mock('@/object-metadata/hooks/useRefreshObjectMetadataItem', () => ({
+  useRefreshObjectMetadataItems: jest.fn().mockImplementation(() => ({
+    refreshObjectMetadataItems: jest.fn(),
+  })),
+}));
+
 const Wrapper = ({ children }: { children: ReactNode }) => (
  <MockedProvider mocks={mocks} addTypename={false}>
    <RecoilRoot>
--- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
+++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@ -56,15 +56,15 @@ import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useL
 import { useRedirect } from '@/domain-manager/hooks/useRedirect';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
-import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
+import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { i18n } from '@lingui/core';
 import { useSearchParams } from 'react-router-dom';
 import { APP_LOCALES } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
+import { iconsState } from 'twenty-ui/display';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
-import { iconsState } from 'twenty-ui/display';

 export const useAuth = () => {
  const setTokenPair = useSetRecoilState(tokenPairState);
@ -73,9 +73,7 @@ export const useAuth = () => {
    currentWorkspaceMemberState,
  );
  const setCurrentUserWorkspace = useSetRecoilState(currentUserWorkspaceState);
-  const setIsAppWaitingForFreshObjectMetadataState = useSetRecoilState(
-    isAppWaitingForFreshObjectMetadataState,
-  );
+
  const setCurrentWorkspaceMembers = useSetRecoilState(
    currentWorkspaceMembersState,
  );
@ -84,6 +82,8 @@ export const useAuth = () => {
    isEmailVerificationRequiredState,
  );

+  const { refreshObjectMetadataItems } = useRefreshObjectMetadataItems();
+
  const setSignInUpStep = useSetRecoilState(signInUpStepState);
  const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
  const setWorkspaces = useSetRecoilState(workspacesState);
@ -312,7 +312,6 @@ export const useAuth = () => {

      setWorkspaces(validWorkspaces);
    }
-    setIsAppWaitingForFreshObjectMetadataState(true);

    return {
      user,
@ -328,7 +327,6 @@ export const useAuth = () => {
    setCurrentWorkspaceMember,
    setCurrentWorkspaceMembers,
    setDateTimeFormat,
-    setIsAppWaitingForFreshObjectMetadataState,
    setLastAuthenticateWorkspaceDomain,
    setWorkspaces,
  ]);
@ -351,9 +349,15 @@ export const useAuth = () => {
        getAuthTokensResult.data?.getAuthTokensFromLoginToken.tokens,
      );

+      await refreshObjectMetadataItems();
      await loadCurrentUser();
    },
-    [getAuthTokensFromLoginToken, setTokenPair, loadCurrentUser],
+    [
+      getAuthTokensFromLoginToken,
+      setTokenPair,
+      refreshObjectMetadataItems,
+      loadCurrentUser,
+    ],
  );

  const handleCredentialsSignIn = useCallback(
--- a/packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts
+++ b/packages/twenty-front/src/modules/auth/hooks/useVerifyLogin.ts
@ -1,11 +1,9 @@
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';

 import { useAuth } from '@/auth/hooks/useAuth';
-import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
 import { AppPath } from '@/types/AppPath';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useLingui } from '@lingui/react/macro';
-import { useSetRecoilState } from 'recoil';
 import { useNavigateApp } from '~/hooks/useNavigateApp';

 export const useVerifyLogin = () => {
@ -14,21 +12,14 @@ export const useVerifyLogin = () => {
  const { getAuthTokensFromLoginToken } = useAuth();
  const { t } = useLingui();

-  const setIsAppWaitingForFreshObjectMetadata = useSetRecoilState(
-    isAppWaitingForFreshObjectMetadataState,
-  );
-
  const verifyLoginToken = async (loginToken: string) => {
    try {
-      setIsAppWaitingForFreshObjectMetadata(true);
      await getAuthTokensFromLoginToken(loginToken);
    } catch (error) {
      enqueueSnackBar(t`Authentication failed`, {
        variant: SnackBarVariant.Error,
      });
      navigate(AppPath.SignInUp);
-    } finally {
-      setIsAppWaitingForFreshObjectMetadata(false);
    }
  };

--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
@ -11,12 +11,13 @@ import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
-import { ActionLink } from 'twenty-ui/navigation';
 import { HorizontalSeparator } from 'twenty-ui/display';
+import { ActionLink } from 'twenty-ui/navigation';

 const StyledContentContainer = styled.div`
  margin-bottom: ${({ theme }) => theme.spacing(8)};
  margin-top: ${({ theme }) => theme.spacing(4)};
+  width: 200px;
 `;

 export const SignInUpWorkspaceScopeForm = () => {
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts
@ -1,17 +1,16 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';

 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';

 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';

 import { AppPath } from '@/types/AppPath';
+import { isDefined } from 'twenty-shared/utils';
 import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
-import { isDefined } from 'twenty-shared/utils';

 export const useWorkspaceFromInviteHash = () => {
  const { enqueueSnackBar } = useSnackBar();
@ -19,9 +18,7 @@ export const useWorkspaceFromInviteHash = () => {
  const workspaceInviteHash = useParams().workspaceInviteHash;
  const currentWorkspace = useRecoilValue(currentWorkspaceState);
  const [initiallyLoggedIn] = useState(isDefined(currentWorkspace));
-  const setIsDefaultLayoutAuthModalVisible = useSetRecoilState(
-    isDefaultLayoutAuthModalVisibleState,
-  );
+
  const { data: workspaceFromInviteHash, loading } =
    useGetWorkspaceFromInviteHashQuery({
      skip: !workspaceInviteHash,
@ -46,8 +43,6 @@ export const useWorkspaceFromInviteHash = () => {
              },
            );
          navigate(AppPath.Index);
-        } else {
-          setIsDefaultLayoutAuthModalVisible(true);
        }
      },
    });
--- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
+++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
@ -4,6 +4,7 @@ import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
 import { AppPath } from '@/types/AppPath';
+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@ -62,9 +63,10 @@ export const MainContextStoreProvider = () => {
  );

  const viewId = getViewId(viewIdQueryParam, indexViewId, lastVisitedViewId);
+  const showAuthModal = useShowAuthModal();

  const shouldComputeContextStore =
-    isRecordIndexPage || isRecordShowPage || isSettingsPage;
+    (isRecordIndexPage || isRecordShowPage || isSettingsPage) && !showAuthModal;

  if (!shouldComputeContextStore) {
    return null;
--- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx
+++ b/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx
@ -61,13 +61,12 @@ export const MainContextStoreProviderEffect = ({
  );

  useEffect(() => {
-    if (!objectMetadataItem) {
-      setContextStoreCurrentObjectMetadataItemId(undefined);
-      return;
+    if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem?.id) {
+      setContextStoreCurrentObjectMetadataItemId(objectMetadataItem?.id);
    }

-    if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) {
-      setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
+    if (!objectMetadataItem) {
+      return;
    }

    setLastVisitedViewForObjectMetadataNamePlural({
--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsGater.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsGater.tsx
@ -1,19 +0,0 @@
-import React from 'react';
-import { useRecoilValue } from 'recoil';
-
-import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
-import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';
-
-export const ObjectMetadataItemsGater = ({
-  children,
-}: React.PropsWithChildren) => {
-  const isAppWaitingForFreshObjectMetadata = useRecoilValue(
-    isAppWaitingForFreshObjectMetadataState,
-  );
-
-  const shouldDisplayChildren = !isAppWaitingForFreshObjectMetadata;
-
-  return (
-    <>{shouldDisplayChildren ? <>{children}</> : <UserOrMetadataLoader />}</>
-  );
-};
--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
@ -1,8 +1,8 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';

-import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { PreComputedChipGeneratorsProvider } from '@/object-metadata/components/PreComputedChipGeneratorsProvider';
+import { isAppWaitingForFreshObjectMetadataState } from '@/object-metadata/states/isAppWaitingForFreshObjectMetadataState';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { UserOrMetadataLoader } from '~/loading/components/UserOrMetadataLoader';

@ -10,11 +10,16 @@ export const ObjectMetadataItemsProvider = ({
  children,
 }: React.PropsWithChildren) => {
  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-  const shouldDisplayChildren = objectMetadataItems.length > 0;
+
+  const isAppWaitingForFreshObjectMetadata = useRecoilValue(
+    isAppWaitingForFreshObjectMetadataState,
+  );
+
+  const shouldDisplayChildren =
+    !isAppWaitingForFreshObjectMetadata && objectMetadataItems.length > 0;

  return (
    <>
-      <ObjectMetadataItemsLoadEffect />
      {shouldDisplayChildren ? (
        <PreComputedChipGeneratorsProvider>
          {children}
--- a/packages/twenty-front/src/modules/object-metadata/hooks/useRefreshObjectMetadataItem.ts
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/useRefreshObjectMetadataItem.ts
@ -39,7 +39,8 @@ export const useRefreshObjectMetadataItems = (
          !isDeeplyEqual(
            snapshot.getLoadable(objectMetadataItemsState).getValue(),
            toSetObjectMetadataItems,
-          )
+          ) &&
+          toSetObjectMetadataItems.length > 0
        ) {
          set(objectMetadataItemsState, toSetObjectMetadataItems);
          set(isAppWaitingForFreshObjectMetadataState, false);
--- a/packages/twenty-front/src/modules/object-record/hooks/tests/useLazyLoadRecordIndexTable.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/hooks/tests/useLazyLoadRecordIndexTable.test.tsx
@ -433,6 +433,17 @@ const HookMockWrapper = getJestMetadataAndApolloMocksWrapper({
  apolloMocks: mocks,
 });

+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn().mockReturnValue({
+    pathname: '/',
+    search: '',
+    hash: '',
+    state: null,
+    key: 'default',
+  }),
+}));
+
 const Wrapper = ({ children }: { children: ReactNode }) => {
  return (
    <HookMockWrapper>
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@ -1,4 +1,6 @@
 import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
@ -7,7 +9,7 @@ import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
-import { capitalize } from 'twenty-shared/utils';
+import { capitalize, isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';

 const StyledTitleWithSelectedRecords = styled.div`
@ -59,10 +61,19 @@ export const RecordIndexPageHeader = () => {
      label
    );

+  const contextStoreCurrentViewId = useRecoilComponentValueV2(
+    contextStoreCurrentViewIdComponentState,
+    MAIN_CONTEXT_STORE_INSTANCE_ID,
+  );
+
  return (
    <PageHeader title={pageHeaderTitle} Icon={Icon}>
-      <RecordIndexActionMenu indexId={recordIndexId} />
-      <PageHeaderToggleCommandMenuButton />
+      {isDefined(contextStoreCurrentViewId) && (
+        <>
+          <RecordIndexActionMenu indexId={recordIndexId} />
+          <PageHeaderToggleCommandMenuButton />
+        </>
+      )}
    </PageHeader>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLazyLoadRecordIndexTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLazyLoadRecordIndexTable.ts
@ -1,15 +1,14 @@
-import { useRecoilValue } from 'recoil';
-
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useLazyFindManyRecords } from '@/object-record/hooks/useLazyFindManyRecords';
 import { useFindManyRecordIndexTableParams } from '@/object-record/record-index/hooks/useFindManyRecordIndexTableParams';
 import { useRecordTableRecordGqlFields } from '@/object-record/record-index/hooks/useRecordTableRecordGqlFields';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
-import { isWorkspaceActiveOrSuspended } from 'twenty-shared/workspace';
+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';

 export const useLazyLoadRecordIndexTable = (objectNameSingular: string) => {
+  const showAuthModal = useShowAuthModal();
+
  const { objectMetadataItem } = useObjectMetadataItem({
    objectNameSingular,
  });
@ -17,8 +16,6 @@ export const useLazyLoadRecordIndexTable = (objectNameSingular: string) => {
  const { setRecordTableData, setIsRecordTableInitialLoading } =
    useRecordTable();

-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-
  const params = useFindManyRecordIndexTableParams(objectNameSingular);

  const recordGqlFields = useRecordTableRecordGqlFields({ objectMetadataItem });
@ -44,9 +41,7 @@ export const useLazyLoadRecordIndexTable = (objectNameSingular: string) => {

  return {
    findManyRecords,
-    records: isWorkspaceActiveOrSuspended(currentWorkspace)
-      ? records
-      : SIGN_IN_BACKGROUND_MOCK_COMPANIES,
+    records: !showAuthModal ? records : SIGN_IN_BACKGROUND_MOCK_COMPANIES,
    totalCount: totalCount,
    loading,
    fetchMoreRecords,
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBodyEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableNoRecordGroupBodyEffect.tsx
@ -2,25 +2,28 @@ import { useEffect, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useDebouncedCallback } from 'use-debounce';

-import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
 import { useLazyLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLazyLoadRecordIndexTable';
 import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
+import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
 import { tableEncounteredUnrecoverableErrorComponentState } from '@/object-record/record-table/states/tableEncounteredUnrecoverableErrorComponentState';
 import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { useScrollToPosition } from '@/ui/utilities/scroll/hooks/useScrollToPosition';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { isNonEmptyString, isNull } from '@sniptt/guards';
+import { isNonEmptyString } from '@sniptt/guards';

 export const RecordTableNoRecordGroupBodyEffect = () => {
  const { objectNameSingular } = useRecordTableContextOrThrow();

-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const { setIsRecordTableInitialLoading } = useRecordTable();
+
+  const showAuthModal = useShowAuthModal();

  const [hasInitializedScroll, setHasInitializedScroll] = useState(false);

@ -139,7 +142,8 @@ export const RecordTableNoRecordGroupBodyEffect = () => {
  ]);

  useEffect(() => {
-    if (isNull(currentWorkspaceMember)) {
+    if (showAuthModal) {
+      setIsRecordTableInitialLoading(false);
      return;
    }

@ -147,7 +151,12 @@ export const RecordTableNoRecordGroupBodyEffect = () => {
      findManyRecords();
      setHasInitialized(true);
    }
-  }, [currentWorkspaceMember, findManyRecords, hasInitialized]);
+  }, [
+    findManyRecords,
+    hasInitialized,
+    setIsRecordTableInitialLoading,
+    showAuthModal,
+  ]);

  return <></>;
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupBodyEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableRecordGroupBodyEffect.tsx
@ -1,21 +1,22 @@
 import { useEffect, useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';

-import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
 import { useLazyLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLazyLoadRecordIndexTable';
 import { recordIndexHasFetchedAllRecordsByGroupComponentState } from '@/object-record/record-index/states/recordIndexHasFetchedAllRecordsByGroupComponentState';
 import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
+import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { useScrollToPosition } from '@/ui/utilities/scroll/hooks/useScrollToPosition';
 import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
-import { isNonEmptyString, isNull } from '@sniptt/guards';
+import { isNonEmptyString } from '@sniptt/guards';
+import { OnboardingStatus } from '~/generated-metadata/graphql';

 export const RecordTableRecordGroupBodyEffect = () => {
  const { objectNameSingular } = useRecordTableContextOrThrow();

-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+  const onboardingStatus = useOnboardingStatus();

  const recordGroupId = useCurrentRecordGroupId();

@ -79,12 +80,12 @@ export const RecordTableRecordGroupBodyEffect = () => {
  }, [hasNextPage, setHasRecordFetchedAllRecordsComponents]);

  useEffect(() => {
-    if (isNull(currentWorkspaceMember)) {
+    if (onboardingStatus !== OnboardingStatus.COMPLETED) {
      return;
    }

    findManyRecords();
-  }, [currentWorkspaceMember, findManyRecords]);
+  }, [onboardingStatus, findManyRecords]);

  return <></>;
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
@ -2,7 +2,6 @@ import { ReactElement, useContext } from 'react';

 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableCellBaseContainer } from '@/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer';
-import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';

 import { RecordTableCellSoftFocusModeHotkeysSetterEffect } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusModeHotkeysSetterEffect';
 import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
@ -27,19 +26,14 @@ export const RecordTableCellContainer = ({
    <RecordTableCellBaseContainer>
      {isInEditMode ? (
        <RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
-      ) : hasSoftFocus ? (
-        <>
-          <RecordTableCellSoftFocusModeHotkeysSetterEffect />
-          <RecordTableCellSoftFocusMode
-            editModeContent={editModeContent}
-            nonEditModeContent={nonEditModeContent}
-          />
-        </>
      ) : (
        <RecordTableCellDisplayMode>
          {nonEditModeContent}
        </RecordTableCellDisplayMode>
      )}
+      {hasSoftFocus ? (
+        <RecordTableCellSoftFocusModeHotkeysSetterEffect />
+      ) : null}
    </RecordTableCellBaseContainer>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
@ -41,11 +41,11 @@ export const RecordTableCellFieldContextWrapper = ({
  return (
    <RecordFieldComponentInstanceContext.Provider value={{ instanceId }}>
      {isLabelIdentifier ? (
-        <RecordTableCellFieldContextLabelIdentifier>
+        <RecordTableCellFieldContextLabelIdentifier key={instanceId}>
          {children}
        </RecordTableCellFieldContextLabelIdentifier>
      ) : (
-        <RecordTableCellFieldContextGeneric>
+        <RecordTableCellFieldContextGeneric key={instanceId}>
          {children}
        </RecordTableCellFieldContextGeneric>
      )}
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
@ -1,117 +0,0 @@
-import { ReactElement, useContext, useEffect, useRef } from 'react';
-import { useRecoilValue } from 'recoil';
-
-import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
-import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
-import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
-import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
-import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
-import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
-import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
-
-import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
-import { isDefined } from 'twenty-shared/utils';
-import { IconArrowUpRight } from 'twenty-ui/display';
-import { useIsMobile } from 'twenty-ui/utilities';
-import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
-
-type RecordTableCellSoftFocusModeProps = {
-  editModeContent: ReactElement;
-  nonEditModeContent: ReactElement;
-};
-
-export const RecordTableCellSoftFocusMode = ({
-  editModeContent,
-  nonEditModeContent,
-}: RecordTableCellSoftFocusModeProps) => {
-  const { columnIndex, columnDefinition } = useContext(RecordTableCellContext);
-  const { recordId, isReadOnly } = useContext(FieldContext);
-
-  const { onActionMenuDropdownOpened } = useRecordTableBodyContextOrThrow();
-
-  const { openTableCell } = useOpenRecordTableCellFromCell();
-
-  const editModeContentOnly = useIsFieldInputOnly();
-
-  const isFieldInputOnly = useIsFieldInputOnly();
-
-  const isEmpty = useIsFieldEmpty();
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState);
-
-  useEffect(() => {
-    if (!isSoftFocusUsingMouse) {
-      scrollRef.current?.scrollIntoView({ block: 'nearest' });
-    }
-  }, [isSoftFocusUsingMouse]);
-
-  const handleClick = () => {
-    if (!isFieldInputOnly && !isReadOnly) {
-      openTableCell();
-    }
-  };
-
-  const handleButtonClick = () => {
-    if (!isFieldInputOnly && isFirstColumn) {
-      openTableCell(undefined, false, true);
-    } else {
-      openTableCell();
-    }
-    /*
-    Disabling sidepanel access for now, TODO: launch
-    if (!isFieldInputOnly) {
-      openTableCell(undefined, true);
-    }
-    */
-  };
-
-  const handleActionMenuDropdown = (event: React.MouseEvent) => {
-    onActionMenuDropdownOpened(event, recordId);
-  };
-
-  const isFirstColumn = columnIndex === 0;
-  const customButtonIcon = useGetButtonIcon();
-  const buttonIcon = isFirstColumn
-    ? IconArrowUpRight // IconLayoutSidebarRightExpand - Disabling sidepanel access for now
-    : customButtonIcon;
-
-  const isMobile = useIsMobile();
-  const showButton =
-    isDefined(buttonIcon) &&
-    !editModeContentOnly &&
-    !isReadOnly &&
-    !(isMobile && isFirstColumn);
-
-  const dontShowContent = isEmpty && isReadOnly;
-
-  const showPlaceholder =
-    !editModeContentOnly && !isReadOnly && isFirstColumn && isEmpty;
-
-  return (
-    <>
-      <RecordTableCellDisplayContainer
-        onClick={handleClick}
-        scrollRef={scrollRef}
-        softFocus
-        onContextMenu={handleActionMenuDropdown}
-        placeholderForEmptyCell={
-          showPlaceholder ? columnDefinition.label : undefined
-        }
-      >
-        {dontShowContent ? (
-          <></>
-        ) : editModeContentOnly ? (
-          editModeContent
-        ) : (
-          nonEditModeContent
-        )}
-      </RecordTableCellDisplayContainer>
-      {showButton && (
-        <RecordTableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
-      )}
-    </>
-  );
-};
--- a/packages/twenty-front/src/modules/prefetch/components/PrefetchRunFavoriteQueriesEffect.tsx
+++ b/packages/twenty-front/src/modules/prefetch/components/PrefetchRunFavoriteQueriesEffect.tsx
@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';

-import { currentUserState } from '@/auth/states/currentUserState';
 import { Favorite } from '@/favorites/types/Favorite';
 import { FavoriteFolder } from '@/favorites/types/FavoriteFolder';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@ -13,17 +12,12 @@ import { prefetchFavoriteFoldersState } from '@/prefetch/states/prefetchFavorite
 import { prefetchFavoritesState } from '@/prefetch/states/prefetchFavoritesState';
 import { prefetchIsLoadedFamilyState } from '@/prefetch/states/prefetchIsLoadedFamilyState';
 import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
-import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { isDefined } from 'twenty-shared/utils';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

 export const PrefetchRunFavoriteQueriesEffect = () => {
-  const currentUser = useRecoilValue(currentUserState);
-
-  const isWorkspaceActive = useIsWorkspaceActivationStatusEqualsTo(
-    WorkspaceActivationStatus.ACTIVE,
-  );
+  const showAuthModal = useShowAuthModal();

  const { objectMetadataItems } = useObjectMetadataItems();

@ -53,14 +47,14 @@ export const PrefetchRunFavoriteQueriesEffect = () => {
    objectNameSingular: CoreObjectNameSingular.Favorite,
    filter: findAllFavoritesOperationSignature.variables.filter,
    recordGqlFields: findAllFavoritesOperationSignature.fields,
-    skip: !currentUser || !isWorkspaceActive,
+    skip: showAuthModal,
  });

  const { records: favoriteFolders } = useFindManyRecords({
    objectNameSingular: CoreObjectNameSingular.FavoriteFolder,
    filter: findAllFavoriteFoldersOperationSignature.variables.filter,
    recordGqlFields: findAllFavoriteFoldersOperationSignature.fields,
-    skip: !currentUser || !isWorkspaceActive,
+    skip: showAuthModal,
  });

  const setPrefetchFavoritesState = useRecoilCallback(
--- 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
@ -8,7 +8,7 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl
 import { useSetTableColumns } from '@/object-record/record-table/hooks/useSetTableColumns';
 import { SIGN_IN_BACKGROUND_MOCK_COLUMN_DEFINITIONS } from '@/sign-in-background-mock/constants/SignInBackgroundMockColumnDefinitions';
 import { SIGN_IN_BACKGROUND_MOCK_VIEW_FIELDS } from '@/sign-in-background-mock/constants/SignInBackgroundMockViewFields';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useInitViewBar } from '@/views/hooks/useInitViewBar';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';

@ -23,11 +23,13 @@ export const SignInBackgroundMockContainerEffect = ({
  recordTableId,
  viewId,
 }: SignInBackgroundMockContainerEffectProps) => {
-  const setContextStoreCurrentObjectMetadataItemId =
-    useSetRecoilComponentStateV2(
-      contextStoreCurrentObjectMetadataItemIdComponentState,
-      MAIN_CONTEXT_STORE_INSTANCE_ID,
-    );
+  const [
+    contextStoreCurrentObjectMetadataItemId,
+    setContextStoreCurrentObjectMetadataItemId,
+  ] = useRecoilComponentStateV2(
+    contextStoreCurrentObjectMetadataItemIdComponentState,
+    MAIN_CONTEXT_STORE_INSTANCE_ID,
+  );

  const { setAvailableTableColumns } = useRecordTable({
    recordTableId,
@ -61,7 +63,9 @@ export const SignInBackgroundMockContainerEffect = ({
      recordTableId,
    );

-    setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
+    if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) {
+      setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
+    }
  }, [
    setViewObjectMetadataId,
    setAvailableFieldDefinitions,
@ -70,6 +74,7 @@ export const SignInBackgroundMockContainerEffect = ({
    setTableColumns,
    recordTableId,
    setContextStoreCurrentObjectMetadataItemId,
+    contextStoreCurrentObjectMetadataItemId,
  ]);

  return <></>;
--- a/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
@ -4,8 +4,6 @@ import React from 'react';
 const StyledInputErrorHelper = styled.div`
  color: ${({ theme }) => theme.color.red};
  font-size: ${({ theme }) => theme.font.size.xs};
-  position: absolute;
-  margin-top: ${({ theme }) => theme.spacing(0.25)};
 `;

 export const InputErrorHelper = ({
--- a/packages/twenty-front/src/modules/ui/layout/hooks/tests/useShowAuthModal.test.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/hooks/tests/useShowAuthModal.test.tsx
@ -1,11 +1,10 @@
 import { renderHook } from '@testing-library/react';
-import { RecoilRoot, useSetRecoilState } from 'recoil';
+import { RecoilRoot } from 'recoil';

 import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
-import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
@ -39,14 +38,9 @@ const setupMockIsMatchingLocation = (pathname: string) => {
  });
 };

-const getResult = (isDefaultLayoutAuthModalVisible = true) =>
+const getResult = () =>
  renderHook(
    () => {
-      const setIsDefaultLayoutAuthModalVisible = useSetRecoilState(
-        isDefaultLayoutAuthModalVisibleState,
-      );
-      setIsDefaultLayoutAuthModalVisible(isDefaultLayoutAuthModalVisible);
-
      return useShowAuthModal();
    },
    {
@ -112,15 +106,15 @@ const testCases = [
  { loc: AppPath.ResetPassword, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: true },

  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
-  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
-  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
-  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
+  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
+  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
+  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
  { loc: AppPath.CreateWorkspace, isLogged: false, subscriptionStatus: undefined, onboardingStatus: undefined, res: true },
  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: true },
  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: true },
  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: true },
  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: true },
-  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
+  { loc: AppPath.CreateWorkspace, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: true },

  { loc: AppPath.CreateProfile, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
  { loc: AppPath.CreateProfile, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
@ -157,14 +151,14 @@ const testCases = [

  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
-  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
-  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
+  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
+  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.COMPLETED, res: true },
  { loc: AppPath.PlanRequired, isLogged: false, subscriptionStatus: undefined, onboardingStatus: undefined, res: true },
  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.WORKSPACE_ACTIVATION, res: true },
  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.PROFILE_CREATION, res: true },
  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.SYNC_EMAIL, res: true },
  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.INVITE_TEAM, res: true },
-  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
+  { loc: AppPath.PlanRequired, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.COMPLETED, res: true },

  { loc: AppPath.PlanRequiredSuccess, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PLAN_REQUIRED, res: true },
  { loc: AppPath.PlanRequiredSuccess, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.COMPLETED, res: false },
@ -290,7 +284,7 @@ const testCases = [

 describe('useShowAuthModal', () => {
  testCases.forEach((testCase) => {
-    it(`testCase for location ${testCase.loc} with onboardingStatus ${testCase.onboardingStatus} should return ${testCase.res}`, () => {
+    it(`testCase for location ${testCase.loc} with onboardingStatus ${testCase.onboardingStatus} and subscriptionStatus ${testCase.subscriptionStatus} should return ${testCase.res}`, () => {
      setupMockOnboardingStatus(testCase.onboardingStatus);
      setupMockSubscriptionStatus(testCase.subscriptionStatus);
      setupMockIsMatchingLocation(testCase.loc);
@ -305,21 +299,21 @@ describe('useShowAuthModal', () => {
  });

  describe('test with token validation loading', () => {
-    it(`with appPath ${AppPath.Invite} and isDefaultLayoutAuthModalVisible=false`, () => {
+    it(`with appPath ${AppPath.Invite} `, () => {
      setupMockOnboardingStatus(OnboardingStatus.COMPLETED);
      setupMockSubscriptionStatus(SubscriptionStatus.Active);
      setupMockIsMatchingLocation(AppPath.Invite);
      setupMockIsLogged(true);
-      const { result } = getResult(false);
-      expect(result.current).toBeFalsy();
+      const { result } = getResult();
+      expect(result.current).toBeTruthy();
    });
-    it(`with appPath ${AppPath.ResetPassword} and isDefaultLayoutAuthModalVisible=false`, () => {
+    it(`with appPath ${AppPath.ResetPassword} `, () => {
      setupMockOnboardingStatus(OnboardingStatus.COMPLETED);
      setupMockSubscriptionStatus(SubscriptionStatus.Active);
      setupMockIsMatchingLocation(AppPath.ResetPassword);
      setupMockIsLogged(true);
-      const { result } = getResult(false);
-      expect(result.current).toBeFalsy();
+      const { result } = getResult();
+      expect(result.current).toBeTruthy();
    });
  });

--- a/packages/twenty-front/src/modules/ui/layout/hooks/useShowAuthModal.ts
+++ b/packages/twenty-front/src/modules/ui/layout/hooks/useShowAuthModal.ts
@ -1,40 +1,27 @@
 import { useMemo } from 'react';
-import { useRecoilValue } from 'recoil';

 import { useIsLogged } from '@/auth/hooks/useIsLogged';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
-import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
-import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
-import { isDefined } from 'twenty-shared/utils';
-import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
+import { OnboardingStatus } from '~/generated/graphql';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';

 export const useShowAuthModal = () => {
  const { isMatchingLocation } = useIsMatchingLocation();
  const isLoggedIn = useIsLogged();
  const onboardingStatus = useOnboardingStatus();
-  const subscriptionStatus = useSubscriptionStatus();
-
-  const isDefaultLayoutAuthModalVisible = useRecoilValue(
-    isDefaultLayoutAuthModalVisibleState,
-  );

  return useMemo(() => {
-    if (
-      isMatchingLocation(AppPath.Verify) ||
-      isMatchingLocation(AppPath.VerifyEmail)
-    ) {
-      return true;
-    }
-
    if (
      isMatchingLocation(AppPath.Invite) ||
      isMatchingLocation(AppPath.ResetPassword) ||
      isMatchingLocation(AppPath.VerifyEmail) ||
-      isMatchingLocation(AppPath.SignInUp)
+      isMatchingLocation(AppPath.Verify) ||
+      isMatchingLocation(AppPath.SignInUp) ||
+      isMatchingLocation(AppPath.CreateWorkspace) ||
+      isMatchingLocation(AppPath.PlanRequired)
    ) {
-      return isDefaultLayoutAuthModalVisible;
+      return true;
    }

    if (
@ -48,20 +35,6 @@ export const useShowAuthModal = () => {
      return true;
    }

-    if (isMatchingLocation(AppPath.PlanRequired)) {
-      return (
-        (onboardingStatus === OnboardingStatus.COMPLETED &&
-          !isDefined(subscriptionStatus)) ||
-        subscriptionStatus === SubscriptionStatus.Canceled
-      );
-    }
-
    return false;
-  }, [
-    isLoggedIn,
-    isDefaultLayoutAuthModalVisible,
-    isMatchingLocation,
-    onboardingStatus,
-    subscriptionStatus,
-  ]);
+  }, [isLoggedIn, isMatchingLocation, onboardingStatus]);
 };
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
@ -257,3 +257,4 @@ export const Modal = ({
 Modal.Header = ModalHeader;
 Modal.Content = ModalContent;
 Modal.Footer = ModalFooter;
+Modal.Backdrop = StyledBackDrop;
--- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
@ -26,7 +26,7 @@ const StyledLayout = styled.div`
  flex-direction: column;
  height: 100dvh;
  position: relative;
-  scrollbar-color: ${({ theme }) => theme.border.color.medium};
+  scrollbar-color: ${({ theme }) => theme.border.color.medium} transparent;
  scrollbar-width: 4px;
  width: 100%;

@ -105,7 +105,9 @@ export const DefaultLayout = () => {
            )}
            {showAuthModal ? (
              <>
-                <SignInBackgroundMockPage />
+                <StyledMainContainer>
+                  <SignInBackgroundMockPage />
+                </StyledMainContainer>
                <AnimatePresence mode="wait">
                  <LayoutGroup>
                    <AuthModal isOpenAnimated={animateModal}>
--- a/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
@ -1,5 +0,0 @@
-import { createState } from 'twenty-ui/utilities';
-export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
-  key: 'isDefaultLayoutAuthModalVisibleState',
-  defaultValue: true,
-});
--- a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@ -9,10 +9,10 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta

 const StyledScrollWrapper = styled.div`
  &.scroll-wrapper-x-enabled {
-    overflow-x: scroll;
+    overflow-x: overlay;
  }
  &.scroll-wrapper-y-enabled {
-    overflow-y: scroll;
+    overflow-y: overlay;
  }
  overflow-x: hidden;
  overflow-y: hidden;
--- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx
+++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx
@ -10,7 +10,6 @@ import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
@ -21,7 +20,9 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useParams } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
+import { MainButton } from 'twenty-ui/input';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
 import { z } from 'zod';
 import {
  useUpdatePasswordViaResetTokenMutation,
@ -29,8 +30,6 @@ import {
 } from '~/generated/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { logError } from '~/utils/logError';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
-import { MainButton } from 'twenty-ui/input';

 const validationSchema = z
  .object({
@ -89,9 +88,6 @@ export const PasswordReset = () => {

  const isLoggedIn = useIsLogged();

-  const setIsDefaultLayoutAuthModalVisibleState = useSetRecoilState(
-    isDefaultLayoutAuthModalVisibleState,
-  );
  const { control, handleSubmit } = useForm<Form>({
    mode: 'onChange',
    defaultValues: {
@ -105,7 +101,7 @@ export const PasswordReset = () => {
    variables: {
      token: passwordResetToken ?? '',
    },
-    skip: !passwordResetToken,
+    skip: !passwordResetToken || isTokenValid,
    onError: (error) => {
      enqueueSnackBar(error?.message ?? 'Token Invalid', {
        variant: SnackBarVariant.Error,
@ -114,7 +110,6 @@ export const PasswordReset = () => {
    },
    onCompleted: (data) => {
      setIsTokenValid(true);
-      setIsDefaultLayoutAuthModalVisibleState(true);
      if (isNonEmptyString(data?.validatePasswordResetToken?.email)) {
        setEmail(data.validatePasswordResetToken.email);
      }
--- a/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx
+++ b/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx
@ -1,100 +1,12 @@
-import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
-import { useRecoilValue } from 'recoil';
-
-import { Logo } from '@/auth/components/Logo';
-import { Title } from '@/auth/components/Title';
-import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
-import { useMemo } from 'react';
-
-import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash';
 import styled from '@emotion/styled';
-import { useLingui } from '@lingui/react/macro';
-import { isNonEmptyString } from '@sniptt/guards';
 import { motion } from 'framer-motion';
-import { isDefined } from 'twenty-shared/utils';
-import { Loader } from 'twenty-ui/feedback';
-import { MainButton } from 'twenty-ui/input';
-import { PublicWorkspaceDataOutput } from '~/generated/graphql';

 const StyledContentContainer = styled(motion.div)`
+  height: 300px;
  margin-bottom: ${({ theme }) => theme.spacing(8)};
  margin-top: ${({ theme }) => theme.spacing(4)};
 `;

-const StyledForm = styled.form`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin-top: ${({ theme }) => theme.spacing(10)};
-`;
-
-const StandardContent = ({
-  workspacePublicData,
-  signInUpForm,
-  title,
-}: {
-  workspacePublicData: PublicWorkspaceDataOutput | null;
-  signInUpForm: JSX.Element | null;
-  title: string;
-}) => {
-  return (
-    <>
-      <Logo secondaryLogo={workspacePublicData?.logo} />
-      <Title animate={false}>{title}</Title>
-      {signInUpForm}
-    </>
-  );
-};
-
 export const SignInUpLoading = () => {
-  const { t } = useLingui();
-  const workspacePublicData = useRecoilValue(workspacePublicDataState);
-
-  const { workspaceInviteHash, workspace: workspaceFromInviteHash } =
-    useWorkspaceFromInviteHash();
-
-  const title = useMemo(() => {
-    if (isDefined(workspaceInviteHash)) {
-      return `Join ${workspaceFromInviteHash?.displayName ?? ''} team`;
-    }
-    const workspaceName = !isDefined(workspacePublicData?.displayName)
-      ? DEFAULT_WORKSPACE_NAME
-      : !isNonEmptyString(workspacePublicData?.displayName)
-        ? t`Your Workspace`
-        : workspacePublicData?.displayName;
-
-    return t`Welcome to ${workspaceName}`;
-  }, [
-    workspaceFromInviteHash?.displayName,
-    workspaceInviteHash,
-    workspacePublicData?.displayName,
-    t,
-  ]);
-
-  return (
-    <StandardContent
-      workspacePublicData={workspacePublicData}
-      signInUpForm={
-        <>
-          <p style={{ color: 'red', backgroundColor: 'blue' }}>
-            SignInUpLoading
-          </p>
-          <StyledContentContainer>
-            <StyledForm>
-              <MainButton
-                disabled={true}
-                title={t`Continue`}
-                type="submit"
-                variant={'primary'}
-                Icon={() => <Loader />}
-                fullWidth
-              />
-            </StyledForm>
-          </StyledContentContainer>
-        </>
-      }
-      title={title}
-    />
-  );
+  return <StyledContentContainer />;
 };
--- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
@ -1,30 +1,32 @@
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
-import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { RecordIndexContainerGater } from '@/object-record/record-index/components/RecordIndexContainerGater';
 import { PageContainer } from '@/ui/layout/page/components/PageContainer';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { isNonEmptyString, isUndefined } from '@sniptt/guards';
+import { isUndefined } from '@sniptt/guards';

 export const RecordIndexPage = () => {
-  const contextStoreCurrentViewId = useRecoilComponentValueV2(
-    contextStoreCurrentViewIdComponentState,
-    MAIN_CONTEXT_STORE_INSTANCE_ID,
-  );
-
  const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(
    contextStoreCurrentObjectMetadataItemIdComponentState,
    MAIN_CONTEXT_STORE_INSTANCE_ID,
  );

-  if (
-    isUndefined(contextStoreCurrentObjectMetadataItemId) ||
-    !isNonEmptyString(contextStoreCurrentViewId)
-  ) {
-    return null;
+  const { objectMetadataItems } = useObjectMetadataItems();
+
+  if (isUndefined(contextStoreCurrentObjectMetadataItemId)) {
+    return <></>;
  }

+  const objectMetadataItem = objectMetadataItems.find(
+    (objectMetadataItem) =>
+      objectMetadataItem.id === contextStoreCurrentObjectMetadataItemId,
+  );
+
+  if (isUndefined(objectMetadataItem)) {
+    return <></>;
+  }
  return (
    <PageContainer>
      <ContextStoreComponentInstanceContext.Provider
--- a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
+++ b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
@ -8,6 +8,7 @@ import { z } from 'zod';
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
+import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
@ -15,14 +16,14 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Trans, useLingui } from '@lingui/react/macro';
-import {
-  OnboardingStatus,
-  useActivateWorkspaceMutation,
-} from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title } from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
 import { MainButton } from 'twenty-ui/input';
+import {
+  OnboardingStatus,
+  useActivateWorkspaceMutation,
+} from '~/generated/graphql';

 const StyledContentContainer = styled.div`
  width: 100%;
@ -42,6 +43,7 @@ export const CreateWorkspace = () => {
  const { enqueueSnackBar } = useSnackBar();
  const onboardingStatus = useOnboardingStatus();
  const setNextOnboardingStatus = useSetNextOnboardingStatus();
+  const { refreshObjectMetadataItems } = useRefreshObjectMetadataItems();

  const { loadCurrentUser } = useAuth();
  const [activateWorkspace] = useActivateWorkspaceMutation();
@ -81,6 +83,8 @@ export const CreateWorkspace = () => {
        if (isDefined(result.errors)) {
          throw result.errors ?? new Error(t`Unknown error`);
        }
+
+        await refreshObjectMetadataItems();
        await loadCurrentUser();
        setNextOnboardingStatus();
      } catch (error: any) {
@ -93,6 +97,7 @@ export const CreateWorkspace = () => {
      activateWorkspace,
      enqueueSnackBar,
      loadCurrentUser,
+      refreshObjectMetadataItems,
      setNextOnboardingStatus,
      t,
    ],
--- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@ -21,6 +21,7 @@ import { UserProvider } from '~/modules/users/components/UserProvider';
 import { mockedApolloClient } from '~/testing/mockedApolloClient';

 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
+import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
@ -29,10 +30,10 @@ import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider
 import { WorkspaceProviderEffect } from '@/workspace/components/WorkspaceProviderEffect';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
-import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import { IconsProvider } from 'twenty-ui/display';
+import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
+import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';

 export type PageDecoratorArgs = {
  routePath: string;
@ -86,6 +87,7 @@ const Providers = () => {
              <WorkspaceProviderEffect />
              <UserProvider>
                <ApolloMetadataClientMockedProvider>
+                  <ObjectMetadataItemsLoadEffect />
                  <ObjectMetadataItemsProvider>
                    <FullHeightStorybookLayout>
                      <HelmetProvider>
--- a/packages/twenty-server/src/engine/core-modules/email/email.module-factory.ts
+++ b/packages/twenty-server/src/engine/core-modules/email/email.module-factory.ts
@ -12,10 +12,14 @@ export const emailModuleFactory = (

  switch (driver) {
    case EmailDriver.Logger:
-      return {};
+      return {
+        type: EmailDriver.Logger,
+      };

    case EmailDriver.Smtp: {
-      const options: EmailModuleOptions = {};
+      const options: EmailModuleOptions = {
+        type: EmailDriver.Smtp,
+      };

      const host = environmentService.get('EMAIL_SMTP_HOST');
      const port = environmentService.get('EMAIL_SMTP_PORT');
--- a/packages/twenty-server/src/engine/core-modules/email/email.module.ts
+++ b/packages/twenty-server/src/engine/core-modules/email/email.module.ts
@ -1,6 +1,9 @@
 import { DynamicModule, Global } from '@nestjs/common';

-import { EmailModuleAsyncOptions } from 'src/engine/core-modules/email/interfaces/email.interface';
+import {
+  EmailDriver,
+  EmailModuleAsyncOptions,
+} from 'src/engine/core-modules/email/interfaces/email.interface';

 import { LoggerDriver } from 'src/engine/core-modules/email/drivers/logger.driver';
 import { SmtpDriver } from 'src/engine/core-modules/email/drivers/smtp.driver';
@ -16,7 +19,9 @@ export class EmailModule {
      useFactory: (...args: any[]) => {
        const config = options.useFactory(...args);

-        return config ? new SmtpDriver(config) : new LoggerDriver();
+        return config.type === EmailDriver.Smtp
+          ? new SmtpDriver(config)
+          : new LoggerDriver();
      },
      inject: options.inject || [],
    };
--- a/packages/twenty-server/src/engine/core-modules/email/interfaces/email.interface.ts
+++ b/packages/twenty-server/src/engine/core-modules/email/interfaces/email.interface.ts
@ -7,7 +7,13 @@ export enum EmailDriver {
  Smtp = 'smtp',
 }

-export type EmailModuleOptions = SMTPConnection.Options | undefined;
+export type EmailModuleOptions =
+  | (SMTPConnection.Options & {
+      type: EmailDriver.Smtp;
+    })
+  | {
+      type: EmailDriver.Logger;
+    };

 export type EmailModuleAsyncOptions = {
  useFactory: (...args: any[]) => EmailModuleOptions;