Remove step 1 of new object field (#7397)

fixes #7356 fixes #6967 fixes #7102 fixes #7121 fixes #7505
2024-10-09 14:54:49 +05:30
parent 9b9e03fbf6
commit 58cbcbfe70
46 changed files with 374 additions and 574 deletions
--- a/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
+++ b/packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx
@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';

+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';

@ -202,22 +203,21 @@ const SettingsIntegrationShowDatabaseConnection = lazy(() =>
  })),
 );

-const SettingsObjectNewFieldStep1 = lazy(() =>
+const SettingsObjectNewFieldSelect = lazy(() =>
  import(
-    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1'
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect'
  ).then((module) => ({
-    default: module.SettingsObjectNewFieldStep1,
+    default: module.SettingsObjectNewFieldSelect,
  })),
 );

-const SettingsObjectNewFieldStep2 = lazy(() =>
+const SettingsObjectNewFieldConfigure = lazy(() =>
  import(
-    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2'
+    '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure'
  ).then((module) => ({
-    default: module.SettingsObjectNewFieldStep2,
+    default: module.SettingsObjectNewFieldConfigure,
  })),
 );
-
 const SettingsObjectFieldEdit = lazy(() =>
  import('~/pages/settings/data-model/SettingsObjectFieldEdit').then(
    (module) => ({
@ -245,7 +245,7 @@ export const SettingsRoutes = ({
  isCRMMigrationEnabled,
  isServerlessFunctionSettingsEnabled,
 }: SettingsRoutesProps) => (
-  <Suspense fallback={null}>
+  <Suspense fallback={<SettingsSkeletonLoader />}>
    <Routes>
      <Route path={SettingsPath.ProfilePage} element={<SettingsProfile />} />
      <Route path={SettingsPath.Appearance} element={<SettingsAppearance />} />
@ -345,12 +345,12 @@ export const SettingsRoutes = ({
        element={<SettingsIntegrationShowDatabaseConnection />}
      />
      <Route
-        path={SettingsPath.ObjectNewFieldStep1}
-        element={<SettingsObjectNewFieldStep1 />}
+        path={SettingsPath.ObjectNewFieldSelect}
+        element={<SettingsObjectNewFieldSelect />}
      />
      <Route
-        path={SettingsPath.ObjectNewFieldStep2}
-        element={<SettingsObjectNewFieldStep2 />}
+        path={SettingsPath.ObjectNewFieldConfigure}
+        element={<SettingsObjectNewFieldConfigure />}
      />
      <Route
        path={SettingsPath.ObjectFieldEdit}
--- a/packages/twenty-front/src/modules/object-metadata/utils/getDisabledFieldMetadataItems.ts
+++ b/packages/twenty-front/src/modules/object-metadata/utils/getDisabledFieldMetadataItems.ts
@ -1,9 +0,0 @@
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-
-export const getDisabledFieldMetadataItems = (
-  objectMetadataItem: Pick<ObjectMetadataItem, 'fields'>,
-) =>
-  objectMetadataItem.fields.filter(
-    (fieldMetadataItem) =>
-      !fieldMetadataItem.isActive && !fieldMetadataItem.isSystem,
-  );
--- a/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsSkeletonLoader.tsx
@ -0,0 +1,52 @@
+import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { PageBody } from '@/ui/layout/page/PageBody';
+import { PageHeader } from '@/ui/layout/page/PageHeader';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const StyledTitleLoaderContainer = styled.div`
+  margin: ${({ theme }) => theme.spacing(8, 8, 2)};
+`;
+
+export const SettingsSkeletonLoader = () => {
+  const theme = useTheme();
+  return (
+    <StyledContainer>
+      <PageHeader
+        title={
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+              width={120}
+            />{' '}
+          </SkeletonTheme>
+        }
+      />
+      <PageBody>
+        <StyledTitleLoaderContainer>
+          <SkeletonTheme
+            baseColor={theme.background.tertiary}
+            highlightColor={theme.background.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton
+              height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
+              width={200}
+            />
+          </SkeletonTheme>
+        </StyledTitleLoaderContainer>
+      </PageBody>
+    </StyledContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx
@ -6,20 +6,17 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { IconChevronDown } from 'twenty-ui';

-type SettingsDataModelNewFieldBreadcrumbDropDownProps = {
-  isConfigureStep: boolean;
-  onBreadcrumbClick: (isConfigureStep: boolean) => void;
-};
-
 const StyledContainer = styled.div`
  align-items: center;
-  color: ${({ theme }) => theme.font.color.secondary};
+  color: ${({ theme }) => theme.font.color.tertiary};
  cursor: pointer;
  display: flex;
  font-size: ${({ theme }) => theme.font.size.md};
 `;
+
 const StyledButtonContainer = styled.div`
  position: relative;
  width: 100%;
@ -48,19 +45,24 @@ const StyledButton = styled(Button)`
  padding-right: ${({ theme }) => theme.spacing(6)};
 `;

-export const SettingsDataModelNewFieldBreadcrumbDropDown = ({
-  isConfigureStep,
-  onBreadcrumbClick,
-}: SettingsDataModelNewFieldBreadcrumbDropDownProps) => {
+export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
  const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
-
  const { closeDropdown } = useDropdown(dropdownId);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { objectSlug = '' } = useParams();
+  const theme = useTheme();

-  const handleClick = (step: boolean) => {
-    onBreadcrumbClick(step);
+  const isConfigureStep = location.pathname.includes('/configure');
+
+  const handleClick = (isConfigureStep: boolean) => {
+    if (isConfigureStep) {
+      navigate(`/settings/objects/${objectSlug}/new-field/configure`);
+    } else {
+      navigate(`/settings/objects/${objectSlug}/new-field/select`);
+    }
    closeDropdown();
  };
-  const theme = useTheme();

  return (
    <StyledContainer>
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect.tsx
@ -10,36 +10,25 @@ import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fiel
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { H2Title, IconSearch } from 'twenty-ui';
-import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { SettingsDataModelFieldTypeFormValues } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';

-export const settingsDataModelFieldTypeFormSchema = z.object({
-  type: z.enum(
-    Object.keys(SETTINGS_FIELD_TYPE_CONFIGS) as [
-      SettingsFieldType,
-      ...SettingsFieldType[],
-    ],
-  ),
-});
-
-export type SettingsDataModelFieldTypeFormValues = z.infer<
-  typeof settingsDataModelFieldTypeFormSchema
->;
-
-type SettingsDataModelFieldTypeSelectProps = {
+type SettingsObjectNewFieldSelectorProps = {
  className?: string;
  excludedFieldTypes?: SettingsFieldType[];
  fieldMetadataItem?: Pick<
    FieldMetadataItem,
    'defaultValue' | 'options' | 'type'
  >;
-  onFieldTypeSelect: () => void;
+
+  objectSlug: string;
 };

 const StyledTypeSelectContainer = styled.div`
@ -68,12 +57,11 @@ const StyledSearchInput = styled(TextInput)`
  width: 100%;
 `;

-export const SettingsDataModelFieldTypeSelect = ({
-  className,
+export const SettingsObjectNewFieldSelector = ({
  excludedFieldTypes = [],
  fieldMetadataItem,
-  onFieldTypeSelect,
-}: SettingsDataModelFieldTypeSelectProps) => {
+  objectSlug,
+}: SettingsObjectNewFieldSelectorProps) => {
  const theme = useTheme();
  const { control } = useFormContext<SettingsDataModelFieldTypeFormValues>();
  const [searchQuery, setSearchQuery] = useState('');
@ -112,59 +100,60 @@ export const SettingsDataModelFieldTypeSelect = ({
  };

  return (
-    <Controller
-      name="type"
-      control={control}
-      defaultValue={
-        fieldMetadataItem && fieldMetadataItem.type in fieldTypeConfigs
-          ? (fieldMetadataItem.type as SettingsFieldType)
-          : FieldMetadataType.Text
-      }
-      render={({ field: { onChange } }) => (
-        <StyledTypeSelectContainer className={className}>
-          <Section>
-            <StyledSearchInput
-              LeftIcon={IconSearch}
-              placeholder="Search a type"
-              value={searchQuery}
-              onChange={setSearchQuery}
-            />
-          </Section>
-          {SETTINGS_FIELD_TYPE_CATEGORIES.map((category) => (
-            <Section key={category}>
-              <H2Title
-                title={category}
-                description={
-                  SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS[category]
-                }
-              />
-              <StyledContainer>
-                {fieldTypeConfigs
-                  .filter(([, config]) => config.category === category)
-                  .map(([key, config]) => (
-                    <StyledCardContainer>
-                      <SettingsCard
-                        key={key}
-                        onClick={() => {
-                          onChange(key as SettingsFieldType);
-                          resetDefaultValueField(key as SettingsFieldType);
-                          onFieldTypeSelect();
-                        }}
-                        Icon={
-                          <config.Icon
-                            size={theme.icon.size.xl}
-                            stroke={theme.icon.stroke.sm}
+    <>
+      {' '}
+      <Section>
+        <StyledSearchInput
+          LeftIcon={IconSearch}
+          placeholder="Search a type"
+          value={searchQuery}
+          onChange={setSearchQuery}
+        />
+      </Section>
+      <Controller
+        name="type"
+        control={control}
+        render={() => (
+          <StyledTypeSelectContainer>
+            {SETTINGS_FIELD_TYPE_CATEGORIES.map((category) => (
+              <Section key={category}>
+                <H2Title
+                  title={category}
+                  description={
+                    SETTINGS_FIELD_TYPE_CATEGORY_DESCRIPTIONS[category]
+                  }
+                />
+                <StyledContainer>
+                  {fieldTypeConfigs
+                    .filter(([, config]) => config.category === category)
+                    .map(([key, config]) => (
+                      <StyledCardContainer key={key}>
+                        <UndecoratedLink
+                          to={`/settings/objects/${objectSlug}/new-field/configure?fieldType=${key}`}
+                          fullWidth
+                          onClick={() =>
+                            resetDefaultValueField(key as SettingsFieldType)
+                          }
+                        >
+                          <SettingsCard
+                            key={key}
+                            Icon={
+                              <config.Icon
+                                size={theme.icon.size.xl}
+                                stroke={theme.icon.stroke.sm}
+                              />
+                            }
+                            title={config.label}
                          />
-                        }
-                        title={config.label}
-                      />
-                    </StyledCardContainer>
-                  ))}
-              </StyledContainer>
-            </Section>
-          ))}
-        </StyledTypeSelectContainer>
-      )}
-    />
+                        </UndecoratedLink>
+                      </StyledCardContainer>
+                    ))}
+                </StyledContainer>
+              </Section>
+            ))}
+          </StyledTypeSelectContainer>
+        )}
+      />
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/stories/SettingsDataModelFieldTypeSelect.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/stories/SettingsDataModelFieldTypeSelect.stories.tsx
@ -1,58 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { FormProviderDecorator } from '~/testing/decorators/FormProviderDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-
-import { SettingsDataModelFieldTypeSelect } from '../SettingsDataModelFieldTypeSelect';
-
-const meta: Meta<typeof SettingsDataModelFieldTypeSelect> = {
-  title:
-    'Modules/Settings/DataModel/Fields/Forms/SettingsDataModelFieldTypeSelect',
-  component: SettingsDataModelFieldTypeSelect,
-  decorators: [FormProviderDecorator, ComponentDecorator],
-  parameters: {
-    container: { width: 512 },
-    msw: graphqlMocks,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SettingsDataModelFieldTypeSelect>;
-
-export const Default: Story = {};
-
-export const WithOpenSelect: Story = {
-  play: async () => {
-    const canvas = within(document.body);
-
-    const inputField = await canvas.findByText('Text');
-
-    await userEvent.click(inputField);
-
-    const input = await canvas.findByText('Unique ID');
-    await userEvent.click(input);
-
-    await userEvent.click(inputField);
-  },
-};
-
-export const WithExcludedFieldTypes: Story = {
-  args: {
-    excludedFieldTypes: [FieldMetadataType.Uuid, FieldMetadataType.Numeric],
-  },
-  play: async () => {
-    const canvas = within(document.body);
-
-    const inputField = await canvas.findByText('Text');
-
-    await userEvent.click(inputField);
-
-    await canvas.findByText('Number');
-
-    expect(canvas.queryByText('Unique ID')).toBeNull();
-    expect(canvas.queryByText('Numeric')).toBeNull();
-  },
-};
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema.ts
@ -1,9 +1,8 @@
-import { z } from 'zod';
-
 import { settingsDataModelFieldDescriptionFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
 import { settingsDataModelFieldIconLabelFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
 import { settingsDataModelFieldSettingsFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
-import { settingsDataModelFieldTypeFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
+import { z } from 'zod';
+import { settingsDataModelFieldTypeFormSchema } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';

 export const settingsFieldFormSchema = (existingOtherLabels?: string[]) => {
  return z
--- a/packages/twenty-front/src/modules/types/SettingsPath.ts
+++ b/packages/twenty-front/src/modules/types/SettingsPath.ts
@ -12,8 +12,8 @@ export enum SettingsPath {
  ObjectOverview = 'objects/overview',
  ObjectDetail = 'objects/:objectSlug',
  ObjectEdit = 'objects/:objectSlug/edit',
-  ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
-  ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
+  ObjectNewFieldSelect = 'objects/:objectSlug/new-field/select',
+  ObjectNewFieldConfigure = 'objects/:objectSlug/new-field/configure',
  ObjectFieldEdit = 'objects/:objectSlug/:fieldSlug',
  NewObject = 'objects/new',
  NewServerlessFunction = 'functions/new',
--- a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { JSX, ReactNode } from 'react';
-import { IconComponent } from 'twenty-ui';

 import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
 import {
@ -14,7 +13,6 @@ type SubMenuTopBarContainerProps = {
  children: JSX.Element | JSX.Element[];
  title?: string;
  actionButton?: ReactNode;
-  Icon: IconComponent;
  className?: string;
  links: BreadcrumbProps['links'];
 };
--- a/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts
+++ b/packages/twenty-front/src/modules/views/view-picker/hooks/useGetAvailableFieldsForKanban.ts
@ -38,7 +38,7 @@ export const useGetAvailableFieldsForKanban = () => {
      navigate(
        `/settings/objects/${getObjectSlug(
          objectMetadataItem,
-        )}/new-field/step-2?fieldType=${FieldMetadataType.Select}`,
+        )}/new-field/configure?fieldType=${FieldMetadataType.Select}`,
      );
    } else {
      navigate(`/settings/objects`);
--- a/packages/twenty-front/src/pages/settings/Releases.tsx
+++ b/packages/twenty-front/src/pages/settings/Releases.tsx
@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import rehypeStringify from 'rehype-stringify';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
-import { IconRocket } from 'twenty-ui';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';

@ -107,7 +106,6 @@ export const Releases = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconRocket}
      title="Releases"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsBilling.tsx
@ -5,7 +5,6 @@ import {
  IconCalendarEvent,
  IconCircleX,
  IconCreditCard,
-  IconCurrencyDollar,
 } from 'twenty-ui';

 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -137,7 +136,6 @@ export const SettingsBilling = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconCurrencyDollar}
      title="Billing"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
@ -1,4 +1,4 @@
-import { H2Title, IconUserCircle } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';

 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { ChangePassword } from '@/settings/profile/components/ChangePassword';
@ -13,7 +13,6 @@ import { Section } from '@/ui/layout/section/components/Section';

 export const SettingsProfile = () => (
  <SubMenuTopBarContainer
-    Icon={IconUserCircle}
    title="Profile"
    links={[
      {
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
@ -1,4 +1,4 @@
-import { H2Title, IconSettings } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';

 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { DeleteWorkspace } from '@/settings/profile/components/DeleteWorkspace';
@ -13,7 +13,6 @@ import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersion

 export const SettingsWorkspace = () => (
  <SubMenuTopBarContainer
-    Icon={IconSettings}
    title="General"
    links={[
      {
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@ -1,17 +1,16 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { isNonEmptyArray } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
-  H2Title,
-  IconTrash,
-  IconUsers,
-  IconReload,
-  IconMail,
  Avatar,
+  H2Title,
+  IconMail,
+  IconReload,
+  IconTrash,
  MOBILE_VIEWPORT,
 } from 'twenty-ui';
-import { isNonEmptyArray } from '@sniptt/guards';
-import { useTheme } from '@emotion/react';

 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -21,26 +20,26 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
 import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
-import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Table } from '@/ui/layout/table/components/Table';
-import { TableHeader } from '@/ui/layout/table/components/TableHeader';
-import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';
-import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
-import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
-import { Status } from '../../modules/ui/display/status/components/Status';
 import { formatDistanceToNow } from 'date-fns';
-import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
+import { useGetWorkspaceInvitationsQuery } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';
+import { Status } from '../../modules/ui/display/status/components/Status';
+import { TableCell } from '../../modules/ui/layout/table/components/TableCell';
+import { TableRow } from '../../modules/ui/layout/table/components/TableRow';
 import { useDeleteWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useDeleteWorkspaceInvitation';
+import { useResendWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useResendWorkspaceInvitation';
+import { workspaceInvitationsState } from '../../modules/workspace-invitation/states/workspaceInvitationsStates';

 const StyledButtonContainer = styled.div`
  align-items: center;
@ -167,7 +166,6 @@ export const SettingsWorkspaceMembers = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconUsers}
      title="Members"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { H2Title, IconAt } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
@ -36,7 +36,6 @@ export const SettingsAccounts = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconAt}
      title="Account"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx
@ -4,12 +4,10 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { IconCalendarEvent } from 'twenty-ui';

 export const SettingsAccountsCalendars = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconCalendarEvent}
      title="Calendars"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsAccountsEmails.tsx
@ -4,11 +4,9 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
-import { IconMail } from 'twenty-ui';

 export const SettingsAccountsEmails = () => (
  <SubMenuTopBarContainer
-    Icon={IconMail}
    title="Emails"
    links={[
      {
--- a/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
+++ b/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
@ -3,12 +3,10 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { IconAt } from 'twenty-ui';

 export const SettingsNewAccount = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconAt}
      title="New Account"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx
+++ b/packages/twenty-front/src/pages/settings/crm-migration/SettingsCRMMigration.tsx
@ -1,6 +1,5 @@
 // @ts-expect-error external library has a typing issue
 import { RevertConnect } from '@revertdotdev/revert-react';
-import { IconSettings } from 'twenty-ui';

 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
@ -18,7 +17,6 @@ export const SettingsCRMMigration = () => {
  const currentWorkspace = useRecoilValue(currentWorkspaceState);
  return (
    <SubMenuTopBarContainer
-      Icon={IconSettings}
      title="Migrate"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconHierarchy2 } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';

 import { useCreateOneObjectMetadataItem } from '@/object-metadata/hooks/useCreateOneObjectMetadataItem';
@ -69,7 +69,6 @@ export const SettingsNewObject = () => {
    // eslint-disable-next-line react/jsx-props-no-spreading
    <FormProvider {...formConfig}>
      <SubMenuTopBarContainer
-        Icon={IconHierarchy2}
        title="New Object"
        links={[
          {
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPageContent.tsx
@ -1,6 +1,5 @@
 import { useUpdateOneObjectMetadataItem } from '@/object-metadata/hooks/useUpdateOneObjectMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { getDisabledFieldMetadataItems } from '@/object-metadata/utils/getDisabledFieldMetadataItems';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsObjectSummaryCard } from '@/settings/data-model/object-details/components/SettingsObjectSummaryCard';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -10,9 +9,8 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 import { Section } from '@/ui/layout/section/components/Section';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
 import styled from '@emotion/styled';
-import { isNonEmptyArray } from '@sniptt/guards';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconHierarchy2, IconPlus } from 'twenty-ui';
+import { H2Title, IconPlus } from 'twenty-ui';
 import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';

 const StyledDiv = styled.div`
@ -40,14 +38,10 @@ export const SettingsObjectDetailPageContent = ({
    navigate(getSettingsPagePath(SettingsPath.Objects));
  };

-  const disabledFieldMetadataItems =
-    getDisabledFieldMetadataItems(objectMetadataItem);
-
  const shouldDisplayAddFieldButton = !objectMetadataItem.isRemote;

  return (
    <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
      title={objectMetadataItem.labelPlural}
      links={[
        {
@ -80,13 +74,7 @@ export const SettingsObjectDetailPageContent = ({
          />
          {shouldDisplayAddFieldButton && (
            <StyledDiv>
-              <UndecoratedLink
-                to={
-                  isNonEmptyArray(disabledFieldMetadataItems)
-                    ? './new-field/step-1'
-                    : './new-field/step-2'
-                }
-              >
+              <UndecoratedLink to={'./new-field/select'}>
                <Button
                  Icon={IconPlus}
                  title="Add Field"
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@ -5,7 +5,7 @@ import pick from 'lodash.pick';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconArchive, IconHierarchy2 } from 'twenty-ui';
+import { H2Title, IconArchive } from 'twenty-ui';
 import { z } from 'zod';

 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@ -107,7 +107,6 @@ export const SettingsObjectEdit = () => {
    <RecordFieldValueSelectorContextProvider>
      <FormProvider {...formConfig}>
        <SubMenuTopBarContainer
-          Icon={IconHierarchy2}
          title="Edit"
          links={[
            {
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@ -5,12 +5,7 @@ import pick from 'lodash.pick';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import {
-  H2Title,
-  IconArchive,
-  IconArchiveOff,
-  IconHierarchy2,
-} from 'twenty-ui';
+import { H2Title, IconArchive, IconArchiveOff } from 'twenty-ui';
 import { z } from 'zod';

 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
@ -186,7 +181,6 @@ export const SettingsObjectFieldEdit = () => {
      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
      <FormProvider {...formConfig}>
        <SubMenuTopBarContainer
-          Icon={IconHierarchy2}
          title={fieldMetadataItem?.label}
          links={[
            {
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure.tsx
@ -11,7 +11,6 @@ import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/Field
 import { SettingsDataModelFieldDescriptionForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm';
 import { SettingsDataModelFieldIconLabelForm } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm';
 import { SettingsDataModelFieldSettingsFormCard } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
-import { SettingsDataModelFieldTypeSelect } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
 import { settingsFieldFormSchema } from '@/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema';
 import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { AppPath } from '@/types/AppPath';
@ -22,42 +21,36 @@ import { Section } from '@/ui/layout/section/components/Section';
 import { View } from '@/views/types/View';
 import { ViewType } from '@/views/types/ViewType';
 import { useApolloClient } from '@apollo/client';
-import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
 import pick from 'lodash.pick';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { H1Title, H1TitleFontColor, H2Title, IconHierarchy2 } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

-// TODO: fix this type
 type SettingsDataModelNewFieldFormValues = z.infer<
  ReturnType<typeof settingsFieldFormSchema>
 > &
  any;

-const StyledH1Title = styled(H1Title)`
-  margin-bottom: 0;
-  padding-top: ${({ theme }) => theme.spacing(3)};
-`;
-export const SettingsObjectNewFieldStep2 = () => {
+export const SettingsObjectNewFieldConfigure = () => {
  const navigate = useNavigate();
  const { objectSlug = '' } = useParams();
  const [searchParams] = useSearchParams();
-  const fieldType = searchParams.get('fieldType') as SettingsFieldType;
+  const fieldType =
+    (searchParams.get('fieldType') as SettingsFieldType) ||
+    FieldMetadataType.Text;
  const { enqueueSnackBar } = useSnackBar();

-  const [isConfigureStep, setIsConfigureStep] = useState(false);
  const { findActiveObjectMetadataItemBySlug } =
    useFilteredObjectMetadataItems();
-
  const activeObjectMetadataItem =
    findActiveObjectMetadataItemBySlug(objectSlug);
  const { createMetadataField } = useFieldMetadataItem();
+  const apolloClient = useApolloClient();

  const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
    mode: 'onTouched',
@ -66,14 +59,14 @@ export const SettingsObjectNewFieldStep2 = () => {
        activeObjectMetadataItem?.fields.map((value) => value.name),
      ),
    ),
+    defaultValues: {
+      type: fieldType,
+      icon: 'IconUsers',
+      label: '',
+      description: '',
+    },
  });

-  useEffect(() => {
-    if (!activeObjectMetadataItem) {
-      navigate(AppPath.NotFound);
-    }
-  }, [activeObjectMetadataItem, navigate]);
-
  const [, setObjectViews] = useState<View[]>([]);
  const [, setRelationObjectViews] = useState<View[]>([]);

@ -85,7 +78,6 @@ export const SettingsObjectNewFieldStep2 = () => {
    },
    onCompleted: async (views) => {
      if (isUndefinedOrNull(views)) return;
-
      setObjectViews(views);
    },
  });
@ -103,15 +95,17 @@ export const SettingsObjectNewFieldStep2 = () => {
    },
    onCompleted: async (views) => {
      if (isUndefinedOrNull(views)) return;
-
      setRelationObjectViews(views);
    },
  });
-
  const { createOneRelationMetadataItem: createOneRelationMetadata } =
    useCreateOneRelationMetadataItem();

-  const apolloClient = useApolloClient();
+  useEffect(() => {
+    if (!activeObjectMetadataItem) {
+      navigate(AppPath.NotFound);
+    }
+  }, [activeObjectMetadataItem, navigate]);

  if (!activeObjectMetadataItem) return null;

@ -160,17 +154,7 @@ export const SettingsObjectNewFieldStep2 = () => {
      });
    }
  };
-
-  const excludedFieldTypes: SettingsFieldType[] = (
-    [
-      FieldMetadataType.Link,
-      FieldMetadataType.Numeric,
-      FieldMetadataType.RichText,
-      FieldMetadataType.Actor,
-      FieldMetadataType.Email,
-      FieldMetadataType.Phone,
-    ] as const
-  ).filter(isDefined);
+  if (!activeObjectMetadataItem) return null;

  return (
    <RecordFieldValueSelectorContextProvider>
@ -178,96 +162,57 @@ export const SettingsObjectNewFieldStep2 = () => {
        {...formConfig}
      >
        <SubMenuTopBarContainer
-          Icon={IconHierarchy2}
+          title="2. Configure field"
          links={[
-            {
-              children: 'Objects',
-              href: '/settings/objects',
-            },
+            { children: 'Workspace', href: '/settings/workspace' },
+            { children: 'Objects', href: '/settings/objects' },
            {
              children: activeObjectMetadataItem.labelPlural,
              href: `/settings/objects/${objectSlug}`,
            },
-            {
-              children: (
-                <SettingsDataModelNewFieldBreadcrumbDropDown
-                  isConfigureStep={isConfigureStep}
-                  onBreadcrumbClick={setIsConfigureStep}
-                />
-              ),
-            },
+
+            { children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
          ]}
          actionButton={
-            !activeObjectMetadataItem.isRemote && (
-              <SaveAndCancelButtons
-                isSaveDisabled={!canSave}
-                isCancelDisabled={isSubmitting}
-                onCancel={() => {
-                  if (!isConfigureStep) {
-                    navigate(`/settings/objects/${objectSlug}`);
-                  } else {
-                    setIsConfigureStep(false);
-                  }
-                }}
-                onSave={formConfig.handleSubmit(handleSave)}
-              />
-            )
+            <SaveAndCancelButtons
+              isSaveDisabled={!canSave}
+              isCancelDisabled={isSubmitting}
+              onCancel={() =>
+                navigate(`/settings/objects/${objectSlug}/new-field/select`)
+              }
+              onSave={formConfig.handleSubmit(handleSave)}
+            />
          }
        >
          <SettingsPageContainer>
-            <StyledH1Title
-              title={
-                !isConfigureStep
-                  ? '1. Select a field type'
-                  : '2. Configure field'
-              }
-              fontColor={H1TitleFontColor.Primary}
-            />
-
-            {!isConfigureStep ? (
-              <SettingsDataModelFieldTypeSelect
-                excludedFieldTypes={excludedFieldTypes}
+            <Section>
+              <H2Title
+                title="Icon and Name"
+                description="The name and icon of this field"
+              />
+              <SettingsDataModelFieldIconLabelForm
+                maxLength={FIELD_NAME_MAXIMUM_LENGTH}
+              />
+            </Section>
+            <Section>
+              <H2Title title="Values" description="The values of this field" />
+              <SettingsDataModelFieldSettingsFormCard
+                isCreatingField
                fieldMetadataItem={{
+                  icon: formConfig.watch('icon'),
+                  label: formConfig.watch('label') || 'New Field',
                  type: fieldType as FieldMetadataType,
                }}
-                onFieldTypeSelect={() => setIsConfigureStep(true)}
+                objectMetadataItem={activeObjectMetadataItem}
              />
-            ) : (
-              <>
-                <Section>
-                  <H2Title
-                    title="Icon and Name"
-                    description="The name and icon of this field"
-                  />
-                  <SettingsDataModelFieldIconLabelForm
-                    maxLength={FIELD_NAME_MAXIMUM_LENGTH}
-                  />
-                </Section>
-                <Section>
-                  <H2Title
-                    title="Values"
-                    description="The values of this field"
-                  />
-
-                  <SettingsDataModelFieldSettingsFormCard
-                    isCreatingField
-                    fieldMetadataItem={{
-                      icon: formConfig.watch('icon'),
-                      label: formConfig.watch('label') || 'Employees',
-                      type: formConfig.watch('type'),
-                    }}
-                    objectMetadataItem={activeObjectMetadataItem}
-                  />
-                </Section>
-                <Section>
-                  <H2Title
-                    title="Description"
-                    description="The description of this field"
-                  />
-                  <SettingsDataModelFieldDescriptionForm />
-                </Section>
-              </>
-            )}
+            </Section>
+            <Section>
+              <H2Title
+                title="Description"
+                description="The description of this field"
+              />
+              <SettingsDataModelFieldDescriptionForm />
+            </Section>
          </SettingsPageContainer>
        </SubMenuTopBarContainer>
      </FormProvider>
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect.tsx
@ -0,0 +1,90 @@
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsDataModelNewFieldBreadcrumbDropDown } from '@/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown';
+import { SETTINGS_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsFieldTypeConfigs';
+import { SettingsObjectNewFieldSelector } from '@/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector';
+import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
+import { AppPath } from '@/types/AppPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { isDefined } from 'twenty-ui';
+import { z } from 'zod';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+export const settingsDataModelFieldTypeFormSchema = z.object({
+  type: z.enum(
+    Object.keys(SETTINGS_FIELD_TYPE_CONFIGS) as [
+      SettingsFieldType,
+      ...SettingsFieldType[],
+    ],
+  ),
+});
+
+export type SettingsDataModelFieldTypeFormValues = z.infer<
+  typeof settingsDataModelFieldTypeFormSchema
+>;
+
+export const SettingsObjectNewFieldSelect = () => {
+  const navigate = useNavigate();
+  const { objectSlug = '' } = useParams();
+  const { findActiveObjectMetadataItemBySlug } =
+    useFilteredObjectMetadataItems();
+  const activeObjectMetadataItem =
+    findActiveObjectMetadataItemBySlug(objectSlug);
+  const formMethods = useForm({
+    resolver: zodResolver(settingsDataModelFieldTypeFormSchema),
+    defaultValues: {
+      type: FieldMetadataType.Text,
+    },
+  });
+  const excludedFieldTypes: SettingsFieldType[] = (
+    [
+      FieldMetadataType.Link,
+      FieldMetadataType.Numeric,
+      FieldMetadataType.RichText,
+      FieldMetadataType.Actor,
+      FieldMetadataType.Email,
+      FieldMetadataType.Phone,
+    ] as const
+  ).filter(isDefined);
+
+  useEffect(() => {
+    if (!activeObjectMetadataItem) {
+      navigate(AppPath.NotFound);
+    }
+  }, [activeObjectMetadataItem, navigate]);
+
+  if (!activeObjectMetadataItem) return null;
+
+  return (
+    <RecordFieldValueSelectorContextProvider>
+      <FormProvider // eslint-disable-next-line react/jsx-props-no-spreading
+        {...formMethods}
+      >
+        <SubMenuTopBarContainer
+          title="1. Select a field type"
+          links={[
+            { children: 'Workspace', href: '/settings/workspace' },
+            { children: 'Objects', href: '/settings/objects' },
+            {
+              children: activeObjectMetadataItem.labelPlural,
+              href: `/settings/objects/${objectSlug}`,
+            },
+            { children: <SettingsDataModelNewFieldBreadcrumbDropDown /> },
+          ]}
+        >
+          <SettingsPageContainer>
+            <SettingsObjectNewFieldSelector
+              objectSlug={objectSlug}
+              excludedFieldTypes={excludedFieldTypes}
+            />
+          </SettingsPageContainer>
+        </SubMenuTopBarContainer>
+      </FormProvider>
+    </RecordFieldValueSelectorContextProvider>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@ -1,133 +0,0 @@
-import styled from '@emotion/styled';
-import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconHierarchy2, IconPlus } from 'twenty-ui';
-
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
-import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-
-import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
-import { settingsObjectFieldsFamilyState } from '@/settings/data-model/object-details/states/settingsObjectFieldsFamilyState';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { AppPath } from '@/types/AppPath';
-import { SettingsPath } from '@/types/SettingsPath';
-import { Button } from '@/ui/input/button/components/Button';
-import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { Section } from '@/ui/layout/section/components/Section';
-import { useRecoilState } from 'recoil';
-import { SettingsObjectFieldTable } from '~/pages/settings/data-model/SettingsObjectFieldTable';
-
-const StyledSection = styled(Section)`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledAddCustomFieldButton = styled(Button)`
-  align-self: flex-end;
-  margin-top: ${({ theme }) => theme.spacing(2)};
-`;
-
-export const SettingsObjectNewFieldStep1 = () => {
-  const navigate = useNavigate();
-
-  const { objectSlug = '' } = useParams();
-  const { findActiveObjectMetadataItemBySlug } =
-    useFilteredObjectMetadataItems();
-
-  const activeObjectMetadataItem =
-    findActiveObjectMetadataItemBySlug(objectSlug);
-
-  const [settingsObjectFields] = useRecoilState(
-    settingsObjectFieldsFamilyState({
-      objectMetadataItemId: activeObjectMetadataItem?.id,
-    }),
-  );
-
-  const { activateMetadataField, deactivateMetadataField } =
-    useFieldMetadataItem();
-
-  const canSave = settingsObjectFields?.some(
-    (field, index) =>
-      field.isActive !== activeObjectMetadataItem?.fields[index].isActive,
-  );
-
-  const handleSave = async () => {
-    if (!activeObjectMetadataItem || !settingsObjectFields) {
-      return;
-    }
-
-    await Promise.all(
-      settingsObjectFields.map((fieldMetadataItem, index) => {
-        if (
-          fieldMetadataItem.isActive ===
-          activeObjectMetadataItem.fields[index].isActive
-        ) {
-          return undefined;
-        }
-
-        return fieldMetadataItem.isActive
-          ? activateMetadataField(fieldMetadataItem)
-          : deactivateMetadataField(fieldMetadataItem);
-      }),
-    );
-
-    navigate(`/settings/objects/${objectSlug}`);
-  };
-
-  useEffect(() => {
-    if (!activeObjectMetadataItem) {
-      navigate(AppPath.NotFound);
-      return;
-    }
-  }, [activeObjectMetadataItem, navigate]);
-
-  if (!activeObjectMetadataItem) return null;
-
-  return (
-    <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
-      links={[
-        {
-          children: 'Workspace',
-          href: getSettingsPagePath(SettingsPath.Workspace),
-        },
-        { children: 'Objects', href: '/settings/objects' },
-        {
-          children: activeObjectMetadataItem.labelPlural,
-          href: `/settings/objects/${objectSlug}`,
-        },
-        { children: 'New Field' },
-      ]}
-      actionButton={
-        !activeObjectMetadataItem.isRemote && (
-          <SaveAndCancelButtons
-            isSaveDisabled={!canSave}
-            onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-            onSave={handleSave}
-          />
-        )
-      }
-    >
-      <SettingsPageContainer>
-        <StyledSection>
-          <H2Title
-            title="Check deactivated fields"
-            description="Before creating a custom field, check if it already exists in the deactivated section."
-          />
-          <SettingsObjectFieldTable
-            objectMetadataItem={activeObjectMetadataItem}
-            mode="new-field"
-          />
-          <StyledAddCustomFieldButton
-            Icon={IconPlus}
-            title="Add Custom Field"
-            size="small"
-            variant="secondary"
-            to={`/settings/objects/${objectSlug}/new-field/step-2`}
-          />
-        </StyledSection>
-      </SettingsPageContainer>
-    </SubMenuTopBarContainer>
-  );
-};
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx
@ -4,12 +4,10 @@ import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { IconHierarchy2 } from 'twenty-ui';

 export const SettingsObjectOverview = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
      links={[
        {
          children: 'Workspace',
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@ -1,12 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  H2Title,
-  IconChevronRight,
-  IconHierarchy2,
-  IconPlus,
-  IconSearch,
-} from 'twenty-ui';
+import { H2Title, IconChevronRight, IconPlus, IconSearch } from 'twenty-ui';

 import { useDeleteOneObjectMetadataItem } from '@/object-metadata/hooks/useDeleteOneObjectMetadataItem';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
@ -133,7 +127,6 @@ export const SettingsObjects = () => {
  );
  return (
    <SubMenuTopBarContainer
-      Icon={IconHierarchy2}
      title="Data model"
      actionButton={
        <UndecoratedLink to={getSettingsPagePath(SettingsPath.NewObject)}>
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldConfigure.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldConfigure.stories.tsx
@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
+import { SettingsObjectNewFieldConfigure } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldConfigure';

 import {
  PageDecorator,
@ -7,15 +8,13 @@ import {
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

-import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
-
 const meta: Meta<PageDecoratorArgs> = {
  title:
-    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep2',
-  component: SettingsObjectNewFieldStep2,
+    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldConfigure',
+  component: SettingsObjectNewFieldConfigure,
  decorators: [PageDecorator],
  args: {
-    routePath: '/settings/objects/:objectSlug/new-field/step-2',
+    routePath: '/settings/objects/:objectSlug/new-field/configure',
    routeParams: { ':objectSlug': 'companies' },
  },
  parameters: {
@ -25,21 +24,11 @@ const meta: Meta<PageDecoratorArgs> = {

 export default meta;

-export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
+export type Story = StoryObj<typeof SettingsObjectNewFieldConfigure>;

 export const Default: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
-    await canvas.findByText('Objects');
-    await canvas.findByText('1. Select a field type');
-
-    const searchInput = await canvas.findByPlaceholderText('Search a type');
-
-    await userEvent.type(searchInput, 'Num');
-
-    const numberTypeButton = await canvas.findByText('Number');
-
-    await userEvent.click(numberTypeButton);

    await canvas.findByText('2. Configure field');

@ -49,11 +38,10 @@ export const Default: Story = {
    const descriptionInput = await canvas.findByPlaceholderText(
      'Write a description',
    );
-
    await userEvent.type(descriptionInput, 'Test description');

    const saveButton = await canvas.findByText('Save');
-
+    await new Promise((resolve) => setTimeout(resolve, 5000));
    await userEvent.click(saveButton);
  },
 };
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldSelect.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldSelect.stories.tsx
@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+import { SettingsObjectNewFieldSelect } from '~/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldSelect';
+
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title:
+    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldSelect',
+  component: SettingsObjectNewFieldSelect,
+  decorators: [PageDecorator],
+  args: {
+    routePath: '/settings/objects/:objectSlug/new-field/select',
+    routeParams: { ':objectSlug': 'companies' },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsObjectNewFieldSelect>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Objects');
+    await canvas.findByText('1. Select a field type');
+    const searchInput = await canvas.findByPlaceholderText('Search a type');
+    await userEvent.type(searchInput, 'Rela');
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    await userEvent.clear(searchInput);
+    await userEvent.type(searchInput, 'Num');
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+  },
+};
--- a/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/stories/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
@ -1,38 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
-
-import {
-  PageDecorator,
-  PageDecoratorArgs,
-} from '~/testing/decorators/PageDecorator';
-import { graphqlMocks } from '~/testing/graphqlMocks';
-
-import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
-
-const meta: Meta<PageDecoratorArgs> = {
-  title:
-    'Pages/Settings/DataModel/SettingsObjectNewField/SettingsObjectNewFieldStep1',
-  component: SettingsObjectNewFieldStep1,
-  decorators: [PageDecorator],
-  args: {
-    routePath: '/settings/objects/:objectSlug/new-field/step-1',
-    routeParams: { ':objectSlug': 'companies' },
-  },
-  parameters: {
-    msw: graphqlMocks,
-  },
-};
-
-export default meta;
-
-export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
-
-export const Default: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await canvas.findByText('Objects');
-    await canvas.findByText('Companies');
-    await canvas.findByText('Check deactivated fields');
-    await canvas.findByText('Add Custom Field');
-  },
-};
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { H2Title, IconCode, IconPlus } from 'twenty-ui';
+import { H2Title, IconPlus } from 'twenty-ui';

 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
@ -20,7 +20,6 @@ const StyledButtonContainer = styled.div`
 export const SettingsDevelopers = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconCode}
      title="Developers"
      actionButton={<SettingsReadDocumentationButton />}
      links={[
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
@ -4,7 +4,7 @@ import { DateTime } from 'luxon';
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
-import { H2Title, IconCode, IconRepeat, IconTrash } from 'twenty-ui';
+import { H2Title, IconRepeat, IconTrash } from 'twenty-ui';

 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -145,7 +145,6 @@ export const SettingsDevelopersApiKeyDetail = () => {
    <>
      {apiKeyData?.name && (
        <SubMenuTopBarContainer
-          Icon={IconCode}
          title={apiKeyData?.name}
          links={[
            {
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconCode } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';

 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -65,7 +65,6 @@ export const SettingsDevelopersApiKeysNew = () => {
  const canSave = !!formValues.name && createOneApiKey;
  return (
    <SubMenuTopBarContainer
-      Icon={IconCode}
      title="New key"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx
@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconCode, IconTrash } from 'twenty-ui';
+import { H2Title, IconTrash } from 'twenty-ui';

 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@ -93,7 +93,6 @@ export const SettingsDevelopersWebhooksDetail = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconCode}
      title={webhookData.targetUrl}
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew.tsx
@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { H2Title, IconCode, isDefined } from 'twenty-ui';
+import { H2Title, isDefined } from 'twenty-ui';

 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -64,7 +64,6 @@ export const SettingsDevelopersWebhooksNew = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconCode}
      title="New Webhook"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconSettings } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';

 import { useGetDatabaseConnections } from '@/databases/hooks/useGetDatabaseConnections';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
@ -42,7 +42,6 @@ export const SettingsIntegrationDatabase = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconSettings}
      title={integration.text}
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationEditDatabaseConnection.tsx
@ -1,5 +1,3 @@
-import { IconSettings } from 'twenty-ui';
-
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationEditDatabaseConnectionContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -9,7 +7,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 export const SettingsIntegrationEditDatabaseConnection = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconSettings}
      title="Edit connection"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { H2Title, IconSettings } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';
 import { z } from 'zod';

 import { useCreateOneDatabaseConnection } from '@/databases/hooks/useCreateOneDatabaseConnection';
@ -131,7 +131,6 @@ export const SettingsIntegrationNewDatabaseConnection = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconSettings}
      title="New"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationShowDatabaseConnection.tsx
@ -1,5 +1,3 @@
-import { IconSettings } from 'twenty-ui';
-
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsIntegrationDatabaseConnectionShowContainer } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -9,7 +7,6 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
 export const SettingsIntegrationShowDatabaseConnection = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconSettings}
      title="Database Connection"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
@ -4,14 +4,12 @@ import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
-import { IconApps } from 'twenty-ui';

 export const SettingsIntegrations = () => {
  const integrationCategories = useSettingsIntegrationCategories();

  return (
    <SubMenuTopBarContainer
-      Icon={IconApps}
      title="Integrations"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
+++ b/packages/twenty-front/src/pages/settings/profile/appearance/components/SettingsAppearance.tsx
@ -1,4 +1,4 @@
-import { H2Title, IconColorSwatch } from 'twenty-ui';
+import { H2Title } from 'twenty-ui';

 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -14,7 +14,6 @@ export const SettingsAppearance = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconColorSwatch}
      title="Experience"
      links={[
        {
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionDetail.tsx
@ -21,7 +21,7 @@ import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCode, IconFunction, IconSettings, IconTestPipe } from 'twenty-ui';
+import { IconCode, IconSettings, IconTestPipe } from 'twenty-ui';
 import { usePreventOverlapCallback } from '~/hooks/usePreventOverlapCallback';
 import { isDefined } from '~/utils/isDefined';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@ -227,7 +227,6 @@ export const SettingsServerlessFunctionDetail = () => {
  return (
    !loading && (
      <SubMenuTopBarContainer
-        Icon={IconFunction}
        title={formValues.name}
        links={[
          {
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctions.tsx
@ -5,12 +5,11 @@ import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Section } from '@/ui/layout/section/components/Section';
 import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
-import { IconFunction, IconPlus } from 'twenty-ui';
+import { IconPlus } from 'twenty-ui';

 export const SettingsServerlessFunctions = () => {
  return (
    <SubMenuTopBarContainer
-      Icon={IconFunction}
      title="Functions"
      actionButton={
        <UndecoratedLink
--- a/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx
+++ b/packages/twenty-front/src/pages/settings/serverless-functions/SettingsServerlessFunctionsNew.tsx
@ -12,7 +12,6 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { IconFunction } from 'twenty-ui';
 import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
 import { isDefined } from '~/utils/isDefined';

@ -77,7 +76,6 @@ export const SettingsServerlessFunctionsNew = () => {

  return (
    <SubMenuTopBarContainer
-      Icon={IconFunction}
      title="New Function"
      links={[
        {