diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
index 17609accf8..18b8891bdf 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
@@ -9,7 +9,11 @@ import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageL
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { FeatureFlagKey, PageLayoutType } from '~/generated/graphql';
+import {
+  FeatureFlagKey,
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+} from '~/generated/graphql';
 
 export const PageLayoutContent = () => {
   const isRecordPageEnabled = useIsFeatureEnabled(
@@ -33,8 +37,10 @@ export const PageLayoutContent = () => {
   const isRecordPageLayout =
     currentPageLayout.type === PageLayoutType.RECORD_PAGE;
 
-  const isCanvasLayout = isRecordPageEnabled && layoutMode === 'canvas';
-  const isVerticalList = isRecordPageEnabled && layoutMode === 'vertical-list';
+  const isCanvasLayout =
+    isRecordPageEnabled && layoutMode === PageLayoutTabLayoutMode.CANVAS;
+  const isVerticalList =
+    isRecordPageEnabled && layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST;
 
   if (isCanvasLayout) {
     return <PageLayoutCanvasViewer widgets={activeTab.widgets} />;
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
index 0b8023595f..a03a911629 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
@@ -120,8 +120,8 @@ export const PageLayoutRendererContent = () => {
         <PageLayoutTabListEffect
           tabs={sortedTabs}
           componentInstanceId={tabListInstanceId}
-          defaultTabIdToFocusOnMobileAndSidePanel={
-            currentPageLayout.defaultTabIdToFocusOnMobileAndSidePanel
+          defaultTabToFocusOnMobileAndSidePanelId={
+            currentPageLayout.defaultTabToFocusOnMobileAndSidePanelId
           }
         />
         {(sortedTabs.length > 1 || isPageLayoutInEditMode) && (
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListEffect.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListEffect.tsx
index c860253308..f40f317ea2 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListEffect.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListEffect.tsx
@@ -12,14 +12,14 @@ type PageLayoutTabListEffectProps = Pick<
   'componentInstanceId' | 'onChangeTab'
 > & {
   tabs: PageLayoutTab[];
-  defaultTabIdToFocusOnMobileAndSidePanel?: string;
+  defaultTabToFocusOnMobileAndSidePanelId?: string;
 };
 
 export const PageLayoutTabListEffect = ({
   tabs,
   onChangeTab,
   componentInstanceId,
-  defaultTabIdToFocusOnMobileAndSidePanel,
+  defaultTabToFocusOnMobileAndSidePanelId,
 }: PageLayoutTabListEffectProps) => {
   const [activeTabId, setActiveTabId] = useRecoilComponentState(
     activeTabIdComponentState,
@@ -32,7 +32,7 @@ export const PageLayoutTabListEffect = ({
   const initialActiveTabId = getPageLayoutTabListInitialActiveTabId({
     activeTabId,
     tabs,
-    defaultTabIdToFocusOnMobileAndSidePanel,
+    defaultTabToFocusOnMobileAndSidePanelId,
     isMobile,
     isInRightDrawer,
   });
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts
index 8f13d2b3a2..ffbc66ecaf 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultCompanyRecordPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
 import {
+  PageLayoutTabLayoutMode,
   PageLayoutType,
   WidgetConfigurationType,
   WidgetType,
@@ -22,7 +23,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -59,7 +60,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Timeline',
       icon: 'IconTimelineEvent',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -96,7 +97,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Tasks',
       icon: 'IconCheckbox',
       position: 300,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -133,7 +134,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Notes',
       icon: 'IconNotes',
       position: 400,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -170,7 +171,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Files',
       icon: 'IconPaperclip',
       position: 500,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -207,7 +208,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Emails',
       icon: 'IconMail',
       position: 600,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -244,7 +245,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Calendar',
       icon: 'IconCalendarEvent',
       position: 700,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultNoteRecordPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultNoteRecordPageLayout.ts
index bb84d90b94..5a4e61b556 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultNoteRecordPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultNoteRecordPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultNoteRecordPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
   __typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -88,7 +92,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Note',
       icon: 'IconNotes',
       position: 150,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -132,7 +136,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Timeline',
       icon: 'IconTimelineEvent',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -169,7 +173,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Files',
       icon: 'IconPaperclip',
       position: 300,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultOpportunityRecordPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultOpportunityRecordPageLayout.ts
index efb1918daa..6df2602b49 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultOpportunityRecordPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultOpportunityRecordPageLayout.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultOpportunityRecordPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
 import {
+  PageLayoutTabLayoutMode,
   PageLayoutType,
   WidgetConfigurationType,
   WidgetType,
@@ -22,7 +23,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -59,7 +60,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Timeline',
       icon: 'IconTimelineEvent',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -96,7 +97,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Tasks',
       icon: 'IconCheckbox',
       position: 300,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -133,7 +134,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Notes',
       icon: 'IconNotes',
       position: 400,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -170,7 +171,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Files',
       icon: 'IconPaperclip',
       position: 500,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -207,7 +208,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Emails',
       icon: 'IconMail',
       position: 600,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -244,7 +245,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Calendar',
       icon: 'IconCalendarEvent',
       position: 700,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultPersonRecordPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultPersonRecordPageLayout.ts
index fda7b1cc6b..ec8160ab91 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultPersonRecordPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultPersonRecordPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultPersonRecordPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
   __typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -55,7 +59,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Timeline',
       icon: 'IconTimelineEvent',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -92,7 +96,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Tasks',
       icon: 'IconCheckbox',
       position: 300,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -129,7 +133,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Notes',
       icon: 'IconNotes',
       position: 400,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -166,7 +170,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Files',
       icon: 'IconPaperclip',
       position: 500,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -203,7 +207,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Emails',
       icon: 'IconMail',
       position: 600,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -240,7 +244,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Calendar',
       icon: 'IconCalendarEvent',
       position: 700,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultRecordPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultRecordPageLayout.ts
index 183c6a77fd..484bb119a8 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultRecordPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultRecordPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultRecordPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
   __typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -55,7 +59,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Timeline',
       icon: 'IconTimelineEvent',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -92,7 +96,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Tasks',
       icon: 'IconCheckbox',
       position: 300,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -129,7 +133,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Notes',
       icon: 'IconNotes',
       position: 400,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -166,7 +170,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Files',
       icon: 'IconPaperclip',
       position: 500,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultTaskRecordPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultTaskRecordPageLayout.ts
index 50bb968b00..cc24a5dbc9 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultTaskRecordPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultTaskRecordPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultTaskRecordPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
   __typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -85,7 +89,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Note',
       icon: 'IconNotes',
       position: 150,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -129,7 +133,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Timeline',
       icon: 'IconTimelineEvent',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -166,7 +170,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
       title: 'Files',
       icon: 'IconPaperclip',
       position: 300,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowPageLayout.ts
index a791df1927..9ca75e1454 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_WORKFLOW_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 /**
  * Default Workflow PageLayout.
@@ -22,7 +26,7 @@ export const DEFAULT_WORKFLOW_PAGE_LAYOUT: PageLayout = {
       id: 'workflow-tab-flow',
       title: 'Flow',
       position: 100,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       icon: 'IconSettings',
       pageLayoutId: DEFAULT_WORKFLOW_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowRunPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowRunPageLayout.ts
index 6f96d57156..ba864bcde5 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowRunPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowRunPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowRunPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 /**
  * Default WorkflowRun PageLayout.
@@ -15,7 +19,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
   deletedAt: null,
-  defaultTabIdToFocusOnMobileAndSidePanel: 'workflow-run-tab-flow',
+  defaultTabToFocusOnMobileAndSidePanelId: 'workflow-run-tab-flow',
   tabs: [
     // Fields tab (position 100)
     {
@@ -23,7 +27,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
       id: 'workflow-run-tab-fields',
       title: 'Home',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       icon: 'IconHome',
       pageLayoutId: DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
@@ -61,7 +65,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
       id: 'workflow-run-tab-flow',
       title: 'Flow',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       icon: 'IconSettings',
       pageLayoutId: DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowVersionPageLayout.ts b/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowVersionPageLayout.ts
index b9811c4d75..0d00b80b3c 100644
--- a/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowVersionPageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowVersionPageLayout.ts
@@ -1,6 +1,10 @@
 import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowVersionPageLayoutId';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 /**
  * Default WorkflowVersion PageLayout.
@@ -15,7 +19,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
   deletedAt: null,
-  defaultTabIdToFocusOnMobileAndSidePanel: 'workflow-version-tab-flow',
+  defaultTabToFocusOnMobileAndSidePanelId: 'workflow-version-tab-flow',
   tabs: [
     // Fields tab (position 100)
     {
@@ -24,7 +28,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
       title: 'Home',
       icon: 'IconHome',
       position: 100,
-      layoutMode: 'vertical-list',
+      layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
       pageLayoutId: DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
@@ -62,7 +66,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
       title: 'Flow',
       icon: 'IconSettings',
       position: 200,
-      layoutMode: 'canvas',
+      layoutMode: PageLayoutTabLayoutMode.CANVAS,
       pageLayoutId: DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID,
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/contexts/PageLayoutContentContext.ts b/packages/twenty-front/src/modules/page-layout/contexts/PageLayoutContentContext.ts
index 589dcdddd2..e0a9ef1090 100644
--- a/packages/twenty-front/src/modules/page-layout/contexts/PageLayoutContentContext.ts
+++ b/packages/twenty-front/src/modules/page-layout/contexts/PageLayoutContentContext.ts
@@ -1,4 +1,4 @@
-import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
+import { type PageLayoutTabLayoutMode } from '~/generated/graphql';
 import { createRequiredContext } from '~/utils/createRequiredContext';
 
 export type PageLayoutContentContextType = {
diff --git a/packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutWithRelationWidgets.test.tsx b/packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutWithRelationWidgets.test.tsx
index f76ad20f76..f67e3b7038 100644
--- a/packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutWithRelationWidgets.test.tsx
+++ b/packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutWithRelationWidgets.test.tsx
@@ -8,6 +8,7 @@ import {
   AggregateOperations,
   BarChartLayout,
   GraphOrderBy,
+  PageLayoutTabLayoutMode,
   PageLayoutType,
   WidgetConfigurationType,
   WidgetType,
@@ -35,7 +36,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
         title: 'Fields',
         icon: 'IconList',
         position: 100,
-        layoutMode: 'vertical-list',
+        layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
         pageLayoutId: 'test-layout',
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
diff --git a/packages/twenty-front/src/modules/page-layout/types/PageLayout.ts b/packages/twenty-front/src/modules/page-layout/types/PageLayout.ts
index a06ca3d6a5..017aacf957 100644
--- a/packages/twenty-front/src/modules/page-layout/types/PageLayout.ts
+++ b/packages/twenty-front/src/modules/page-layout/types/PageLayout.ts
@@ -3,5 +3,4 @@ import { type PageLayout as PageLayoutGenerated } from '~/generated/graphql';
 
 export type PageLayout = Omit<PageLayoutGenerated, 'tabs'> & {
   tabs: PageLayoutTab[];
-  defaultTabIdToFocusOnMobileAndSidePanel?: string;
 };
diff --git a/packages/twenty-front/src/modules/page-layout/types/PageLayoutTab.ts b/packages/twenty-front/src/modules/page-layout/types/PageLayoutTab.ts
index 0da4fe3100..243e711a2f 100644
--- a/packages/twenty-front/src/modules/page-layout/types/PageLayoutTab.ts
+++ b/packages/twenty-front/src/modules/page-layout/types/PageLayoutTab.ts
@@ -1,15 +1,6 @@
-import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { type PageLayoutTab as PageLayoutTabGenerated } from '~/generated/graphql';
 
-export type PageLayoutTab = Omit<
-  PageLayoutTabGenerated,
-  'widgets' | 'layoutMode'
-> & {
+export type PageLayoutTab = Omit<PageLayoutTabGenerated, 'widgets'> & {
   widgets: PageLayoutWidget[];
-  /**
-   * Only available behind IS_RECORD_PAGE_LAYOUT_ENABLED for now.
-   */
-  layoutMode?: PageLayoutTabLayoutMode;
-  icon?: string | null;
 };
diff --git a/packages/twenty-front/src/modules/page-layout/types/PageLayoutTabLayoutMode.ts b/packages/twenty-front/src/modules/page-layout/types/PageLayoutTabLayoutMode.ts
deleted file mode 100644
index 7aac8d6b6a..0000000000
--- a/packages/twenty-front/src/modules/page-layout/types/PageLayoutTabLayoutMode.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type PageLayoutTabLayoutMode = 'grid' | 'vertical-list' | 'canvas';
diff --git a/packages/twenty-front/src/modules/page-layout/types/PageLayoutWidget.ts b/packages/twenty-front/src/modules/page-layout/types/PageLayoutWidget.ts
index 42e5c4c7d7..7323761075 100644
--- a/packages/twenty-front/src/modules/page-layout/types/PageLayoutWidget.ts
+++ b/packages/twenty-front/src/modules/page-layout/types/PageLayoutWidget.ts
@@ -1,6 +1,5 @@
 import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
-import { type RulesLogic } from 'json-logic-js';
 import { type Nullable } from 'twenty-shared/types';
 import {
   type PageLayoutWidget as PageLayoutWidgetGenerated,
@@ -12,6 +11,5 @@ export type PageLayoutWidget = Omit<
   'objectMetadataId' | 'configuration'
 > & {
   objectMetadataId?: Nullable<string>;
-  conditionalDisplay?: RulesLogic;
   configuration: WidgetConfiguration | FieldsConfiguration | FieldConfiguration;
 };
diff --git a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
index 16ddebc8c5..a61494ced5 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
@@ -23,7 +23,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: 'tab-2',
         tabs: mockTabs,
-        defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
+        defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
         isMobile: true,
         isInRightDrawer: true,
       });
@@ -35,7 +35,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: 'tab-1',
         tabs: mockTabs,
-        defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
+        defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
         isMobile: false,
         isInRightDrawer: false,
       });
@@ -46,11 +46,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
 
   describe('when activeTabId does not exist in tabs', () => {
     describe('on mobile or in right drawer', () => {
-      it('should return defaultTabIdToFocusOnMobileAndSidePanel when on mobile and default exists', () => {
+      it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and default exists', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: 'non-existent-tab',
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
+          defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
           isMobile: true,
           isInRightDrawer: false,
         });
@@ -58,11 +58,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
         expect(result).toBe('tab-3');
       });
 
-      it('should return defaultTabIdToFocusOnMobileAndSidePanel when in right drawer and default exists', () => {
+      it('should return defaultTabToFocusOnMobileAndSidePanelId when in right drawer and default exists', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: null,
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: 'tab-2',
+          defaultTabToFocusOnMobileAndSidePanelId: 'tab-2',
           isMobile: false,
           isInRightDrawer: true,
         });
@@ -70,11 +70,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
         expect(result).toBe('tab-2');
       });
 
-      it('should return defaultTabIdToFocusOnMobileAndSidePanel when on mobile and in right drawer', () => {
+      it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and in right drawer', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: null,
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: 'tab-1',
+          defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
           isMobile: true,
           isInRightDrawer: true,
         });
@@ -82,11 +82,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
         expect(result).toBe('tab-1');
       });
 
-      it('should fallback to first tab when defaultTabIdToFocusOnMobileAndSidePanel does not exist', () => {
+      it('should fallback to first tab when defaultTabToFocusOnMobileAndSidePanelId does not exist', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: null,
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: 'non-existent-tab',
+          defaultTabToFocusOnMobileAndSidePanelId: 'non-existent-tab',
           isMobile: true,
           isInRightDrawer: false,
         });
@@ -94,11 +94,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
         expect(result).toBe('tab-1');
       });
 
-      it('should fallback to first tab when defaultTabIdToFocusOnMobileAndSidePanel is undefined', () => {
+      it('should fallback to first tab when defaultTabToFocusOnMobileAndSidePanelId is undefined', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: null,
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: undefined,
+          defaultTabToFocusOnMobileAndSidePanelId: undefined,
           isMobile: true,
           isInRightDrawer: false,
         });
@@ -112,7 +112,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: null,
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
+          defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
           isMobile: false,
           isInRightDrawer: false,
         });
@@ -124,7 +124,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
         const result = getPageLayoutTabListInitialActiveTabId({
           activeTabId: null,
           tabs: mockTabs,
-          defaultTabIdToFocusOnMobileAndSidePanel: undefined,
+          defaultTabToFocusOnMobileAndSidePanelId: undefined,
           isMobile: false,
           isInRightDrawer: false,
         });
@@ -139,7 +139,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: null,
         tabs: [],
-        defaultTabIdToFocusOnMobileAndSidePanel: 'tab-1',
+        defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
         isMobile: false,
         isInRightDrawer: false,
       });
@@ -151,7 +151,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: null,
         tabs: [],
-        defaultTabIdToFocusOnMobileAndSidePanel: 'tab-1',
+        defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
         isMobile: true,
         isInRightDrawer: false,
       });
@@ -163,7 +163,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: null,
         tabs: mockTabs,
-        defaultTabIdToFocusOnMobileAndSidePanel: undefined,
+        defaultTabToFocusOnMobileAndSidePanelId: undefined,
         isMobile: false,
         isInRightDrawer: false,
       });
@@ -177,7 +177,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: null,
         tabs: singleTab,
-        defaultTabIdToFocusOnMobileAndSidePanel: undefined,
+        defaultTabToFocusOnMobileAndSidePanelId: undefined,
         isMobile: false,
         isInRightDrawer: false,
       });
@@ -191,7 +191,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: 'tab-1',
         tabs: mockTabs,
-        defaultTabIdToFocusOnMobileAndSidePanel: 'tab-2',
+        defaultTabToFocusOnMobileAndSidePanelId: 'tab-2',
         isMobile: true,
         isInRightDrawer: true,
       });
@@ -203,7 +203,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: 'non-existent',
         tabs: mockTabs,
-        defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
+        defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
         isMobile: true,
         isInRightDrawer: false,
       });
@@ -215,7 +215,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
       const result = getPageLayoutTabListInitialActiveTabId({
         activeTabId: 'non-existent',
         tabs: mockTabs,
-        defaultTabIdToFocusOnMobileAndSidePanel: 'invalid-tab',
+        defaultTabToFocusOnMobileAndSidePanelId: 'invalid-tab',
         isMobile: true,
         isInRightDrawer: false,
       });
diff --git a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
index de33c9551d..43faf7a0c0 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
@@ -1,7 +1,7 @@
 import { type DraftPageLayout } from '@/page-layout/types/DraftPageLayout';
 import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
-import { PageLayoutType } from '~/generated/graphql';
 import { getTabsByDisplayMode } from '@/page-layout/utils/getTabsByDisplayMode';
+import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
 
 describe('getTabsByDisplayMode', () => {
   const createMockTab = (id: string): PageLayoutTab => ({
@@ -320,7 +320,7 @@ describe('getTabsByDisplayMode', () => {
     it('should handle tabs with additional properties', () => {
       const tabWithExtraProps: PageLayoutTab = {
         ...createMockTab('tab-1'),
-        layoutMode: 'grid' as const,
+        layoutMode: PageLayoutTabLayoutMode.GRID as const,
       };
       const pageLayout = createMockPageLayout([tabWithExtraProps]);
 
@@ -332,7 +332,9 @@ describe('getTabsByDisplayMode', () => {
       });
 
       expect(result.pinnedLeftTab).toBeUndefined();
-      expect(result.tabsToRenderInTabList[0]?.layoutMode).toBe('grid');
+      expect(result.tabsToRenderInTabList[0]?.layoutMode).toBe(
+        PageLayoutTabLayoutMode.GRID,
+      );
     });
   });
 
diff --git a/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts b/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
index e4b580fc92..5a9b62944f 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
@@ -4,7 +4,7 @@ import { isDefined } from 'twenty-shared/utils';
 type GetPageLayoutTabListInitialActiveTabIdParams = {
   activeTabId: string | null;
   tabs: PageLayoutTab[];
-  defaultTabIdToFocusOnMobileAndSidePanel?: string;
+  defaultTabToFocusOnMobileAndSidePanelId?: string;
   isMobile: boolean;
   isInRightDrawer: boolean;
 };
@@ -12,7 +12,7 @@ type GetPageLayoutTabListInitialActiveTabIdParams = {
 export const getPageLayoutTabListInitialActiveTabId = ({
   activeTabId,
   tabs,
-  defaultTabIdToFocusOnMobileAndSidePanel,
+  defaultTabToFocusOnMobileAndSidePanelId,
   isMobile,
   isInRightDrawer,
 }: GetPageLayoutTabListInitialActiveTabIdParams): string | null => {
@@ -26,14 +26,14 @@ export const getPageLayoutTabListInitialActiveTabId = ({
 
   if (
     isOnMobileOrSidePanel &&
-    isDefined(defaultTabIdToFocusOnMobileAndSidePanel)
+    isDefined(defaultTabToFocusOnMobileAndSidePanelId)
   ) {
     const defaultTabExists = tabs.some(
-      (tab) => tab.id === defaultTabIdToFocusOnMobileAndSidePanel,
+      (tab) => tab.id === defaultTabToFocusOnMobileAndSidePanelId,
     );
 
     if (defaultTabExists) {
-      return defaultTabIdToFocusOnMobileAndSidePanel;
+      return defaultTabToFocusOnMobileAndSidePanelId;
     }
   }
 
diff --git a/packages/twenty-front/src/modules/page-layout/utils/getTabLayoutMode.ts b/packages/twenty-front/src/modules/page-layout/utils/getTabLayoutMode.ts
index 3fb1398837..80a5724606 100644
--- a/packages/twenty-front/src/modules/page-layout/utils/getTabLayoutMode.ts
+++ b/packages/twenty-front/src/modules/page-layout/utils/getTabLayoutMode.ts
@@ -1,7 +1,6 @@
 import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
-import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
 import { assertPageLayoutTabHasDefinedLayoutModeOrThrow } from '@/page-layout/utils/assertPageLayoutTabHasDefinedLayoutModeOrThrow';
-import { PageLayoutType } from '~/generated/graphql';
+import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
 
 type GetTabLayoutModeParams = {
   tab: PageLayoutTab | undefined;
@@ -18,5 +17,5 @@ export const getTabLayoutMode = ({
     return tab.layoutMode;
   }
 
-  return 'grid';
+  return PageLayoutTabLayoutMode.GRID;
 };
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
index d1dc206ce3..758605ebc3 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
@@ -29,7 +29,11 @@ import styled from '@emotion/styled';
 import { type MouseEvent } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { IconLock } from 'twenty-ui/display';
-import { PageLayoutType, WidgetType } from '~/generated/graphql';
+import {
+  PageLayoutTabLayoutMode,
+  PageLayoutType,
+  WidgetType,
+} from '~/generated/graphql';
 
 const StyledNoAccessContainer = styled.div`
   align-items: center;
@@ -87,7 +91,8 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
   const isRichTextWidget = widget.type === WidgetType.STANDALONE_RICH_TEXT;
   const hideRichTextHeader = isRichTextWidget && !isPageLayoutInEditMode;
 
-  const showHeader = layoutMode !== 'canvas' && !hideRichTextHeader;
+  const showHeader =
+    layoutMode !== PageLayoutTabLayoutMode.CANVAS && !hideRichTextHeader;
 
   const handleClick = () => {
     handleEditWidget({
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
index 4dc28ad325..ef4e338649 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
@@ -12,7 +12,7 @@ import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingCon
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type MutableSnapshot } from 'recoil';
 import { ComponentDecorator } from 'twenty-ui/testing';
-import { PageLayoutType } from '~/generated/graphql';
+import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
 import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
 
 const mockPageLayout: PageLayout = {
@@ -54,7 +54,10 @@ const meta: Meta<typeof DashboardWidgetPlaceholder> = {
             }}
           >
             <PageLayoutContentProvider
-              value={{ tabId: 'tab-1', layoutMode: 'grid' }}
+              value={{
+                tabId: 'tab-1',
+                layoutMode: PageLayoutTabLayoutMode.GRID,
+              }}
             >
               <Story />
             </PageLayoutContentProvider>
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
index 3817568b4a..e6c824646c 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
@@ -42,6 +42,7 @@ import {
   AggregateOperations,
   AxisNameDisplay,
   BarChartLayout,
+  PageLayoutTabLayoutMode,
   PageLayoutType,
   WidgetConfigurationType,
 } from '~/generated/graphql';
@@ -311,7 +312,7 @@ export const WithNumberChart: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -396,7 +397,7 @@ export const WithGaugeChart: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -485,7 +486,7 @@ export const WithBarChart: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -577,7 +578,7 @@ export const SmallWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -673,7 +674,7 @@ export const MediumWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -769,7 +770,7 @@ export const LargeWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -861,7 +862,7 @@ export const WideWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -957,7 +958,7 @@ export const TallWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -1071,7 +1072,7 @@ export const WithManyToOneRelationFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -1177,7 +1178,7 @@ export const WithOneToManyRelationFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -1291,7 +1292,7 @@ export const OneToManyRelationFieldWidgetWithSeeAllButton: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -1405,7 +1406,7 @@ export const OnMobile: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -1501,7 +1502,7 @@ export const InSidePanel: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'grid',
+                    layoutMode: PageLayoutTabLayoutMode.GRID,
                     tabId: TAB_ID_OVERVIEW,
                   }}
                 >
@@ -1589,10 +1590,8 @@ export const Catalog: CatalogStory<Story, typeof WidgetRenderer> = {
 
     const layoutMode =
       variant === 'canvas'
-        ? ('canvas' as const)
-        : variant === 'side-column'
-          ? ('grid' as const)
-          : ('grid' as const);
+        ? PageLayoutTabLayoutMode.CANVAS
+        : PageLayoutTabLayoutMode.GRID;
 
     const widget: PageLayoutWidget = {
       __typename: 'PageLayoutWidget',
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
index c27265f569..c9a813f43e 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
@@ -27,6 +27,7 @@ import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/con
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import {
+  PageLayoutTabLayoutMode,
   PageLayoutType,
   WidgetConfigurationType,
   WidgetType,
@@ -389,7 +390,7 @@ export const TextFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -481,7 +482,7 @@ export const AddressFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -576,7 +577,7 @@ export const NumberFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -668,7 +669,7 @@ export const LinkFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -770,7 +771,7 @@ export const ManyToOneRelationFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -867,7 +868,7 @@ export const OneToManyRelationFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -959,7 +960,7 @@ export const BooleanFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1050,7 +1051,7 @@ export const CurrencyFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1144,7 +1145,7 @@ export const EmailsFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1239,7 +1240,7 @@ export const PhonesFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1334,7 +1335,7 @@ export const SelectFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1427,7 +1428,7 @@ export const MultiSelectFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1531,7 +1532,7 @@ export const TimelineActivityRelationFieldWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1632,7 +1633,7 @@ export const ManyToOneRelationCardWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1737,7 +1738,7 @@ export const OneToManyRelationCardWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1836,7 +1837,7 @@ export const TimelineActivityRelationCardWidget: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
@@ -1998,7 +1999,7 @@ export const OneToManyRelationCardWidgetWithProgressiveLoading: Story = {
               >
                 <PageLayoutContentProvider
                   value={{
-                    layoutMode: 'vertical-list',
+                    layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
                     tabId: 'fields',
                   }}
                 >
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts b/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
index 4892ad8f77..d7fe162b44 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
@@ -1,5 +1,4 @@
-import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
-import { PageLayoutType } from '~/generated/graphql';
+import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
 import { type WidgetCardVariant } from '~/modules/page-layout/widgets/types/WidgetCardVariant';
 
 type GetWidgetCardVariantParams = {
@@ -21,7 +20,7 @@ export const getWidgetCardVariant = ({
     return 'dashboard';
   }
 
-  if (layoutMode === 'canvas') {
+  if (layoutMode === PageLayoutTabLayoutMode.CANVAS) {
     return 'canvas';
   }