diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
index 5ad191a10a57..b6017b4f0a36 100644
--- a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
@@ -6,8 +6,11 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
+import { userEvent, within } from '@storybook/test';
 import { SettingsAppearance } from '../profile/appearance/components/SettingsAppearance';
 
+Date.now = () => new Date('2022-06-13T12:33:37.000Z').getTime();
+
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsAppearance',
   component: SettingsAppearance,
@@ -15,6 +18,7 @@ const meta: Meta<PageDecoratorArgs> = {
   args: { routePath: '/settings/appearance' },
   parameters: {
     msw: graphqlMocks,
+    date: new Date(2021, 1, 1),
   },
 };
 
@@ -22,4 +26,72 @@ export default meta;
 
 export type Story = StoryObj<typeof SettingsAppearance>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Theme', undefined, {
+      timeout: 3000,
+    });
+
+    await canvas.findByText('Date and time');
+  },
+};
+
+export const DateTimeSettingsTimezone: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    await canvas.findByText('Date and time');
+
+    const timezoneSelect = await canvas.findByText(
+      '(GMT-04:00) Eastern Daylight Time - New York',
+    );
+
+    userEvent.click(timezoneSelect);
+
+    const systemSettingsOptions = await canvas.findByText(
+      '(GMT-11:00) Niue Time',
+    );
+
+    userEvent.click(systemSettingsOptions);
+
+    await canvas.findByText('(GMT-11:00) Niue Time');
+  },
+};
+
+export const DateTimeSettingsDateFormat: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    await canvas.findByText('Date and time');
+
+    const timeFormatSelect = await canvas.findByText('13 Jun, 2022');
+
+    userEvent.click(timeFormatSelect);
+
+    const timeFormatOptions = await canvas.findByText('Jun 13, 2022');
+
+    userEvent.click(timeFormatOptions);
+
+    await canvas.findByText('Jun 13, 2022');
+  },
+};
+
+export const DateTimeSettingsTimeFormat: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+
+    await canvas.findByText('Date and time');
+
+    const timeFormatSelect = await canvas.findByText('24h (08:33)');
+
+    userEvent.click(timeFormatSelect);
+
+    const timeFormatOptions = await canvas.findByText('12h (8:33 AM)');
+
+    userEvent.click(timeFormatOptions);
+
+    await canvas.findByText('12h (8:33 AM)');
+  },
+};
diff --git a/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx b/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx
index ebe8d272f505..40b3b8ae69cc 100644
--- a/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx
@@ -7,7 +7,6 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/utils/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Developers/SettingsDevelopers',
@@ -26,8 +25,9 @@ export type Story = StoryObj<typeof SettingsDevelopers>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await sleep(100);
 
-    await canvas.findByText('API keys');
+    await canvas.findByText('API keys', undefined, {
+      timeout: 3000,
+    });
   },
 };
diff --git a/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx b/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx
index 5f95eacb238b..c28749873556 100644
--- a/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx
@@ -7,7 +7,6 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { sleep } from '~/utils/sleep';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
@@ -29,8 +28,9 @@ export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
 export const Default: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    sleep(100);
 
-    await canvas.findByText('Connect a new database');
+    await canvas.findByText('Connect a new database', undefined, {
+      timeout: 3000,
+    });
   },
 };
diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
index 19453453c664..2381241c4a06 100644
--- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@@ -21,7 +21,9 @@ import { DefaultLayout } from '~/modules/ui/layout/page/DefaultLayout';
 import { UserProvider } from '~/modules/users/components/UserProvider';
 import { mockedApolloClient } from '~/testing/mockedApolloClient';
 
+import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
 import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
+import { IconsProvider } from 'twenty-ui';
 import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 
 export type PageDecoratorArgs = {
@@ -63,6 +65,7 @@ const ApolloStorybookDevLogEffect = () => {
 const Providers = () => {
   return (
     <RecoilRoot>
+      <RecoilDebugObserverEffect />
       <ApolloProvider client={mockedApolloClient}>
         <ApolloStorybookDevLogEffect />
         <ApolloMetadataClientMockedProvider>
@@ -73,11 +76,13 @@ const Providers = () => {
               <FullHeightStorybookLayout>
                 <HelmetProvider>
                   <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                    <ObjectMetadataItemsProvider>
-                      <PrefetchDataProvider>
-                        <Outlet />
-                      </PrefetchDataProvider>
-                    </ObjectMetadataItemsProvider>
+                    <IconsProvider>
+                      <ObjectMetadataItemsProvider>
+                        <PrefetchDataProvider>
+                          <Outlet />
+                        </PrefetchDataProvider>
+                      </ObjectMetadataItemsProvider>
+                    </IconsProvider>
                   </SnackBarProviderScope>
                 </HelmetProvider>
               </FullHeightStorybookLayout>
diff --git a/packages/twenty-front/src/testing/mock-data/view-fields.ts b/packages/twenty-front/src/testing/mock-data/view-fields.ts
index f8af8db65787..b68cfb706a27 100644
--- a/packages/twenty-front/src/testing/mock-data/view-fields.ts
+++ b/packages/twenty-front/src/testing/mock-data/view-fields.ts
@@ -4,7 +4,7 @@ export const mockedViewFieldsData = [
   // Companies
   {
     id: '79035310-e955-4986-a4a4-73f9d9949c6a',
-    fieldMetadataId: 'name',
+    fieldMetadataId: '9e123592-cd2b-471c-8143-3cc0b46089ef',
     viewId: mockedViewsData[0].id,
     position: 0,
     isVisible: true,
diff --git a/packages/twenty-front/src/testing/mock-data/views.ts b/packages/twenty-front/src/testing/mock-data/views.ts
index f924a9fccd7b..d13c0dc3fdfb 100644
--- a/packages/twenty-front/src/testing/mock-data/views.ts
+++ b/packages/twenty-front/src/testing/mock-data/views.ts
@@ -807,7 +807,7 @@ export const mockedViewsData = [
   {
     id: '37a8a866-eb17-4e76-9382-03143a2f6a80',
     name: 'All companies',
-    objectMetadataId: 'f9fd99a8-108f-4066-9675-cde753cf5de9',
+    objectMetadataId: '701aecf9-eb1c-4d84-9d94-b954b231b64b',
     type: 'table',
     icon: 'IconSkyline',
     key: 'INDEX',
@@ -850,7 +850,7 @@ export const mockedViewsData = [
   {
     id: '5c307222-1dd5-4ff3-ab06-8d990e9b3c74',
     name: 'All companies (v2)',
-    objectMetadataId: 'f9fd99a8-108f-4066-9675-cde753cf5de9',
+    objectMetadataId: '701aecf9-eb1c-4d84-9d94-b954b231b64b',
     type: 'table',
     icon: 'IconSkyline',
     key: 'INDEX',