diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index cf32f81e67c..e836948c1f2 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -1373,11 +1373,14 @@
   "ux_editor.component_properties.stickyHeader": "Fest tittelraden",
   "ux_editor.component_properties.style": "Stil",
   "ux_editor.component_properties.subdomains": "Subdomener (kommaseparert)",
+  "ux_editor.component_properties.subform.choose_data_model": "Velg datamodell...",
   "ux_editor.component_properties.subform.choose_layout_set": "Velg et underskjema...",
   "ux_editor.component_properties.subform.choose_layout_set_description": "Velg først underskjemaet du vil bruke i Tabell for underskjema. Deretter kan du sette opp egenskapene for komponenten.",
   "ux_editor.component_properties.subform.choose_layout_set_header": "Velg underskjemaet du vil bruke",
   "ux_editor.component_properties.subform.choose_layout_set_label": "Velg et underskjema",
   "ux_editor.component_properties.subform.create_layout_set_button": "Opprett et nytt underskjema",
+  "ux_editor.component_properties.subform.create_new_data_model": "Lag ny datamodell",
+  "ux_editor.component_properties.subform.create_new_data_model_label": "Navn på ny datamodell",
   "ux_editor.component_properties.subform.created_layout_set_name": "Navn på underskjema",
   "ux_editor.component_properties.subform.data_model_binding_label": "Velg datamodellknytning",
   "ux_editor.component_properties.subform.data_model_empty_messsage": "Ingen tilgjengelige datamodeller",
diff --git a/frontend/packages/shared/src/types/AppsQueryKey.ts b/frontend/packages/shared/src/types/AppsQueryKey.ts
index 8516df4f95e..6854da5864f 100644
--- a/frontend/packages/shared/src/types/AppsQueryKey.ts
+++ b/frontend/packages/shared/src/types/AppsQueryKey.ts
@@ -1,5 +1,6 @@
 export enum AppsQueryKey {
   AppLayouts = 'formLayouts',
+  AppLayoutSets = 'fetchLayoutSets',
   AppLayoutSettings = 'layoutSettings',
   AppTextResources = 'fetchTextResources',
 }
diff --git a/frontend/packages/ux-editor/src/AppContext.test.tsx b/frontend/packages/ux-editor/src/AppContext.test.tsx
index 10f7fc5ffa9..bbe93415699 100644
--- a/frontend/packages/ux-editor/src/AppContext.test.tsx
+++ b/frontend/packages/ux-editor/src/AppContext.test.tsx
@@ -163,6 +163,21 @@ describe('AppContext', () => {
     );
   });
 
+  it('invalidates layout sets query for Apps in preview', async () => {
+    const { queryClient } = renderAppContext(({ updateLayoutSetsForPreview }: AppContextProps) => (
+      <Button onClick={() => updateLayoutSetsForPreview()} />
+    ));
+
+    await clickButton();
+
+    await waitFor(async () => expect(queryClient.invalidateQueries).toHaveBeenCalledTimes(1));
+    await waitFor(async () =>
+      expect(queryClient.invalidateQueries).toHaveBeenCalledWith({
+        queryKey: [AppsQueryKey.AppLayoutSets],
+      }),
+    );
+  });
+
   it('invalidates layout settings query for Apps in preview', async () => {
     const { queryClient } = renderAppContext(
       ({ updateLayoutSettingsForPreview, selectedFormLayoutSetName }: AppContextProps) => (
diff --git a/frontend/packages/ux-editor/src/AppContext.tsx b/frontend/packages/ux-editor/src/AppContext.tsx
index f1550bb04e2..f748c953a66 100644
--- a/frontend/packages/ux-editor/src/AppContext.tsx
+++ b/frontend/packages/ux-editor/src/AppContext.tsx
@@ -20,6 +20,7 @@ export interface AppContextProps {
   selectedFormLayoutName: string;
   setSelectedFormLayoutName: (selectedFormLayoutName: string) => void;
   updateLayoutsForPreview: (layoutSetName: string, resetQueries?: boolean) => Promise<void>;
+  updateLayoutSetsForPreview: (resetQueries?: boolean) => Promise<void>;
   updateLayoutSettingsForPreview: (layoutSetName: string, resetQueries?: boolean) => Promise<void>;
   updateTextsForPreview: (language: string, resetQueries?: boolean) => Promise<void>;
   shouldReloadPreview: boolean;
@@ -75,6 +76,13 @@ export const AppContextProvider = ({
     [refetch],
   );
 
+  const updateLayoutSetsForPreview = useCallback(
+    async (resetQueries: boolean = false): Promise<void> => {
+      return await refetch([AppsQueryKey.AppLayoutSets], resetQueries);
+    },
+    [refetch],
+  );
+
   const updateLayoutSettingsForPreview = useCallback(
     async (layoutSetName: string, resetQueries: boolean = false): Promise<void> => {
       return await refetch([AppsQueryKey.AppLayoutSettings, layoutSetName], resetQueries);
@@ -97,6 +105,7 @@ export const AppContextProvider = ({
       selectedFormLayoutName,
       setSelectedFormLayoutName,
       updateLayoutsForPreview,
+      updateLayoutSetsForPreview,
       updateLayoutSettingsForPreview,
       updateTextsForPreview,
       shouldReloadPreview,
@@ -109,6 +118,7 @@ export const AppContextProvider = ({
       selectedFormLayoutName,
       setSelectedFormLayoutName,
       updateLayoutsForPreview,
+      updateLayoutSetsForPreview,
       updateLayoutSettingsForPreview,
       updateTextsForPreview,
       shouldReloadPreview,
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css
similarity index 100%
rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.module.css
rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx
similarity index 100%
rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet.tsx
rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx
deleted file mode 100644
index 1973042cdd9..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { StudioButton, StudioCard, StudioSpinner, StudioTextfield } from '@studio/components';
-import { TrashIcon, CheckmarkIcon } from '@studio/icons';
-import classes from './CreateNewSubformLayoutSet.module.css';
-import { SubformDataModelSelect } from './SubformDataModelSelect';
-import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName';
-import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform';
-import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
-
-type CreateNewSubformLayoutSetProps = {
-  onUpdateLayoutSet: (layoutSetName: string) => void;
-  layoutSets: LayoutSets;
-  setShowCreateSubformCard: (showCreateSubform: boolean) => void;
-  hasSubforms: boolean;
-};
-
-export const CreateNewSubformLayoutSet = ({
-  onUpdateLayoutSet,
-  layoutSets,
-  setShowCreateSubformCard,
-  hasSubforms,
-}: CreateNewSubformLayoutSetProps): React.ReactElement => {
-  const { t } = useTranslation();
-  const [newSubform, setNewSubform] = useState('');
-  const [selectedDataType, setSelectedDataType] = useState<string>();
-  const { validateLayoutSetName } = useValidateLayoutSetName();
-  const { createSubform, isPendingLayoutSetMutation } = useCreateSubform();
-  const [nameError, setNameError] = useState('');
-
-  function handleChange(subformName: string) {
-    const subformNameValidation = validateLayoutSetName(subformName, layoutSets);
-    setNameError(subformNameValidation);
-    setNewSubform(subformName);
-  }
-
-  function handleCreateSubform() {
-    createSubform({
-      layoutSetName: newSubform,
-      onSubformCreated: onUpdateLayoutSet,
-      dataType: selectedDataType,
-    });
-  }
-
-  const saveIcon = isPendingLayoutSetMutation ? (
-    <StudioSpinner size='sm' spinnerTitle={t('general.loading')} />
-  ) : (
-    <CheckmarkIcon />
-  );
-
-  return (
-    <StudioCard>
-      <StudioCard.Content>
-        <StudioTextfield
-          label={t('ux_editor.component_properties.subform.created_layout_set_name')}
-          value={newSubform}
-          size='sm'
-          disabled={isPendingLayoutSetMutation}
-          onChange={(e) => handleChange(e.target.value)}
-          error={nameError}
-        />
-        <SubformDataModelSelect
-          selectedDataType={selectedDataType}
-          setSelectedDataType={setSelectedDataType}
-        />
-        <div className={classes.buttonGroup}>
-          <StudioButton
-            icon={saveIcon}
-            onClick={handleCreateSubform}
-            title={t('general.save')}
-            disabled={!newSubform || !!nameError || !selectedDataType}
-            variant='secondary'
-            color='success'
-          />
-          {hasSubforms && (
-            <StudioButton
-              onClick={() => setShowCreateSubformCard(false)}
-              title={t('general.close')}
-              icon={<TrashIcon />}
-              variant='secondary'
-              color='danger'
-            />
-          )}
-        </div>
-      </StudioCard.Content>
-    </StudioCard>
-  );
-};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx
deleted file mode 100644
index e5eb86f3866..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.test.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import type { ISubformDataModelSelectProps } from './SubformDataModelSelect';
-import { SubformDataModelSelect } from './SubformDataModelSelect';
-import userEvent from '@testing-library/user-event';
-import { renderWithProviders } from 'dashboard/testing/mocks';
-import { textMock } from '@studio/testing/mocks/i18nMock';
-import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
-
-jest.mock('app-shared/hooks/queries/useAppMetadataModelIdsQuery');
-
-const user = userEvent.setup();
-
-const mockDataModelIds = ['dataModelId1', 'dataModelId2'];
-const defaultProps: ISubformDataModelSelectProps = {
-  selectedDataType: '',
-  setSelectedDataType: jest.fn(),
-};
-
-describe('SubformDataModelSelect', () => {
-  afterEach(jest.clearAllMocks);
-
-  it('renders StudioNativeSelect with its label', () => {
-    (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
-    renderSubformDataModelSelect();
-    expect(
-      screen.getByRole('combobox', {
-        name: textMock('ux_editor.component_properties.subform.data_model_binding_label'),
-      }),
-    ).toBeInTheDocument();
-  });
-
-  it('Renders all options', () => {
-    (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
-    renderSubformDataModelSelect();
-    expect(screen.getAllByRole('option')).toHaveLength(mockDataModelIds.length);
-  });
-
-  it('Selects provided selected item when there are provided options', () => {
-    (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
-    renderSubformDataModelSelect({ selectedDataType: mockDataModelIds[1] });
-    expect(screen.getByRole('combobox')).toHaveValue(mockDataModelIds[1]);
-  });
-
-  it('Renders a hidden placeholder option with an empty value', () => {
-    (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
-    renderSubformDataModelSelect();
-    const placeholderOption = screen.getByRole('option', { hidden: true, name: '' });
-    expect(placeholderOption).toBeInTheDocument();
-    expect(placeholderOption).toHaveAttribute('value', '');
-  });
-
-  it('Calls setSelectedDataType when selecting an option', async () => {
-    (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
-    const setSelectedDataType = jest.fn();
-    renderSubformDataModelSelect({ setSelectedDataType });
-    await user.selectOptions(
-      screen.getByRole('combobox'),
-      screen.getByRole('option', { name: mockDataModelIds[1] }),
-    );
-    expect(setSelectedDataType).toHaveBeenCalledTimes(1);
-    expect(setSelectedDataType).toHaveBeenCalledWith(mockDataModelIds[1]);
-  });
-});
-
-const renderSubformDataModelSelect = (props: Partial<ISubformDataModelSelectProps> = {}) =>
-  renderWithProviders(<SubformDataModelSelect {...defaultProps} {...props} />);
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx
deleted file mode 100644
index 15ee9d3d400..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/SubformDataModelSelect.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
-import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { useTranslation } from 'react-i18next';
-import { StudioNativeSelect } from '@studio/components';
-
-export interface ISubformDataModelSelectProps {
-  selectedDataType: string;
-  setSelectedDataType: (dataType: string) => void;
-}
-
-export const SubformDataModelSelect = ({
-  selectedDataType,
-  setSelectedDataType,
-}: ISubformDataModelSelectProps) => {
-  const { t } = useTranslation();
-  const { org, app } = useStudioEnvironmentParams();
-  const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false);
-
-  function handleChange(dataType: string) {
-    setSelectedDataType(dataType);
-  }
-
-  return (
-    <StudioNativeSelect
-      label={t('ux_editor.component_properties.subform.data_model_binding_label')}
-      onChange={(e) => handleChange(e.target.value)}
-      value={selectedDataType}
-      size='small'
-    >
-      <option value='' hidden></option>
-      {dataModelIds ? (
-        dataModelIds.map((dataModelId) => (
-          <option value={dataModelId} key={dataModelId}>
-            {dataModelId}
-          </option>
-        ))
-      ) : (
-        <option disabled>
-          {t('ux_editor.component_properties.subform.data_model_empty_messsage')}
-        </option>
-      )}
-    </StudioNativeSelect>
-  );
-};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts
deleted file mode 100644
index f239c07a245..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet';
-export { SubformDataModelSelect } from './SubformDataModelSelect';
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.module.css
similarity index 100%
rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.module.css
rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.module.css
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx
new file mode 100644
index 00000000000..8cf0710b45f
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformButtons.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import classes from './CreateNewSubformButtons.module.css';
+import { CheckmarkIcon, TrashIcon } from '@studio/icons';
+import { StudioButton, StudioSpinner } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+type CreateNewSubformButtonsProps = {
+  isPendingNewSubformMutation: boolean;
+  disableSaveButton: boolean;
+  displayCloseButton: boolean;
+  handleCloseButton: () => void;
+};
+
+export const CreateNewSubformButtons = ({
+  isPendingNewSubformMutation,
+  disableSaveButton,
+  displayCloseButton,
+  handleCloseButton,
+}: CreateNewSubformButtonsProps) => {
+  const { t } = useTranslation();
+
+  const saveIcon = isPendingNewSubformMutation ? (
+    <StudioSpinner size='sm' spinnerTitle={t('general.loading')} />
+  ) : (
+    <CheckmarkIcon />
+  );
+
+  return (
+    <div className={classes.buttonGroup}>
+      <StudioButton
+        icon={saveIcon}
+        type='submit'
+        title={t('general.save')}
+        disabled={disableSaveButton}
+        variant='secondary'
+        color='success'
+      />
+      {displayCloseButton && (
+        <StudioButton
+          onClick={handleCloseButton}
+          title={t('general.close')}
+          icon={<TrashIcon />}
+          variant='secondary'
+          color='danger'
+        />
+      )}
+    </div>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx
similarity index 60%
rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx
rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx
index b50ac34c15a..98e31569c4c 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformLayoutSet/CreateNewSubformLayoutSet.test.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithProviders } from '../../../../../../testing/mocks';
-import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet';
+import { CreateNewSubformSection } from './CreateNewSubformSection';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { screen } from '@testing-library/react';
 import { layoutSets } from 'app-shared/mocks/mocks';
@@ -8,24 +8,13 @@ import userEvent from '@testing-library/user-event';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import { queriesMock } from 'app-shared/mocks/queriesMock';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { app, org } from '@studio/testing/testids';
+import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
 
-const onUpdateLayoutSetMock = jest.fn();
 const setShowCreateSubformCardMock = jest.fn();
-const selectedOptionDataType = 'moped';
-
-jest.mock('./SubformDataModelSelect', () => ({
-  SubformDataModelSelect: ({
-    selectedDataType,
-    setSelectedDataType,
-  }: {
-    selectedDataType: string | undefined;
-    setSelectedDataType: (value: string) => void;
-  }) => (
-    <select onChange={(e) => setSelectedDataType(e.target.value)} value={selectedDataType}>
-      <option value={selectedOptionDataType}>Mock Data Type</option>
-    </select>
-  ),
-}));
+const onComponentUpdate = jest.fn();
+const dataModelIds = ['dataModel1', 'dataModel2'];
 
 describe('CreateNewSubformLayoutSet ', () => {
   afterEach(jest.clearAllMocks);
@@ -54,22 +43,39 @@ describe('CreateNewSubformLayoutSet ', () => {
     expect(closeButton).not.toBeInTheDocument();
   });
 
-  it('calls onSubformCreated when save button is clicked', async () => {
+  it('displays the close button when data model input is rendered', async () => {
+    const user = userEvent.setup();
+
+    renderCreateNewSubformLayoutSet({ hasSubforms: false });
+
+    const displayDataModelInput = screen.getByRole('button', {
+      name: textMock('ux_editor.component_properties.subform.create_new_data_model'),
+    });
+    await user.click(displayDataModelInput);
+
+    const closeButton = screen.getByRole('button', { name: textMock('general.close') });
+    await user.click(closeButton);
+
+    expect(
+      screen.queryByRole('button', { name: textMock('general.close') }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('calls onComponentUpdate when save button is clicked', async () => {
     const user = userEvent.setup();
     renderCreateNewSubformLayoutSet({});
     const input = screen.getByRole('textbox');
     await user.type(input, 'NewSubform');
     const dataModelSelect = screen.getByRole('combobox');
-    await user.selectOptions(dataModelSelect, ['moped']);
+    await user.selectOptions(dataModelSelect, [dataModelIds[0]]);
     const saveButton = screen.getByRole('button', { name: textMock('general.save') });
     await user.click(saveButton);
-    expect(onUpdateLayoutSetMock).toHaveBeenCalledTimes(1);
-    expect(onUpdateLayoutSetMock).toHaveBeenCalledWith('NewSubform');
+    expect(onComponentUpdate).toHaveBeenCalledTimes(1);
+    expect(onComponentUpdate).toHaveBeenCalledWith('NewSubform');
   });
 
   it('displays loading spinner when save button is clicked', async () => {
     const user = userEvent.setup();
-
     const addLayoutSetMock = jest.fn().mockImplementation(
       () =>
         new Promise((resolve) => {
@@ -80,12 +86,8 @@ describe('CreateNewSubformLayoutSet ', () => {
       queries: { addLayoutSet: addLayoutSetMock },
     });
 
-    const input = screen.getByRole('textbox');
-    await user.type(input, 'NewSubform');
-
-    const dataModelSelect = screen.getByRole('combobox');
-    await user.selectOptions(dataModelSelect, ['moped']);
-
+    await user.type(screen.getByRole('textbox'), 'NewSubform');
+    await user.selectOptions(screen.getByRole('combobox'), [dataModelIds[0]]);
     const saveButton = screen.getByRole('button', { name: textMock('general.save') });
     await user.click(saveButton);
 
@@ -93,12 +95,12 @@ describe('CreateNewSubformLayoutSet ', () => {
     expect(spinner).toBeInTheDocument();
   });
 
-  it('disables the save button when input is invalid', async () => {
+  it('disables the save button when subform name is invalid', async () => {
     const user = userEvent.setup();
     renderCreateNewSubformLayoutSet({});
 
     const dataModelSelect = screen.getByRole('combobox');
-    await user.selectOptions(dataModelSelect, ['moped']);
+    await user.selectOptions(dataModelSelect, [dataModelIds[0]]);
 
     const saveButton = screen.getByRole('button', { name: textMock('general.save') });
     expect(saveButton).toBeDisabled();
@@ -112,7 +114,7 @@ describe('CreateNewSubformLayoutSet ', () => {
     expect(saveButton).not.toBeDisabled();
   });
 
-  it('disables the save button when the input is valid and data model is invalid', async () => {
+  it('disables the save button when data model is not selected', async () => {
     const user = userEvent.setup();
     renderCreateNewSubformLayoutSet({});
 
@@ -131,32 +133,59 @@ describe('CreateNewSubformLayoutSet ', () => {
     await user.type(input, 'NewSubform');
 
     const dataModelSelect = screen.getByRole('combobox');
-    await user.selectOptions(dataModelSelect, ['moped']);
+    await user.selectOptions(dataModelSelect, [dataModelIds[0]]);
 
     const saveButton = screen.getByRole('button', { name: textMock('general.close') });
     expect(saveButton).not.toBeDisabled();
   });
+
+  it('disables save button when input for new data model is invalid', async () => {
+    const user = userEvent.setup();
+    renderCreateNewSubformLayoutSet({});
+
+    await user.type(screen.getByRole('textbox'), 'subform1');
+
+    const createNewDataModel = screen.getByRole('button', {
+      name: textMock('ux_editor.component_properties.subform.create_new_data_model'),
+    });
+    await user.click(createNewDataModel);
+
+    const saveButton = screen.getByRole('button', { name: textMock('general.save') });
+    expect(saveButton).toBeDisabled();
+
+    const dataModelInput = screen.getByRole('textbox', {
+      name: textMock('ux_editor.component_properties.subform.create_new_data_model_label'),
+    });
+    await user.type(dataModelInput, 'datamodel');
+    expect(saveButton).not.toBeDisabled();
+  });
 });
 
 type RenderCreateNewSubformLayoutSetProps = {
+  layoutSetsMock?: LayoutSets;
   hasSubforms?: boolean;
   queries?: Partial<ServicesContextProps>;
 };
 
 const renderCreateNewSubformLayoutSet = ({
+  layoutSetsMock = layoutSets,
   hasSubforms = true,
   queries,
 }: RenderCreateNewSubformLayoutSetProps) => {
+  const queryClient = createQueryClientMock();
+  queryClient.setQueryData([QueryKey.AppMetadataModelIds, org, app, false], dataModelIds);
+
   return renderWithProviders(
-    <CreateNewSubformLayoutSet
-      onUpdateLayoutSet={onUpdateLayoutSetMock}
-      layoutSets={layoutSets}
+    <CreateNewSubformSection
+      layoutSets={layoutSetsMock}
       setShowCreateSubformCard={setShowCreateSubformCardMock}
+      onComponentUpdate={onComponentUpdate}
       hasSubforms={hasSubforms}
+      recommendedNextActionText={{ title: 'title', description: 'description' }}
     />,
     {
       queries: { ...queriesMock, ...queries },
-      queryClient: createQueryClientMock(),
+      queryClient,
     },
   );
 };
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx
new file mode 100644
index 00000000000..c6efe918455
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  StudioCard,
+  StudioParagraph,
+  StudioRecommendedNextAction,
+  StudioTextfield,
+} from '@studio/components';
+import { useValidateLayoutSetName } from 'app-shared/hooks/useValidateLayoutSetName';
+import type { LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
+import { SubformDataModel } from './SubformDataModel';
+import { CreateNewSubformButtons } from './CreateNewSubformButtons';
+import { SubformInstructions } from './SubformInstructions';
+import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform';
+
+type CreateNewSubformSectionProps = {
+  layoutSets: LayoutSets;
+  setShowCreateSubformCard: (showCreateSubform: boolean) => void;
+  hasSubforms: boolean;
+  recommendedNextActionText: {
+    title: string;
+    description: string;
+  };
+  onComponentUpdate: (subform: string) => void;
+};
+
+export const CreateNewSubformSection = ({
+  layoutSets,
+  setShowCreateSubformCard,
+  hasSubforms,
+  recommendedNextActionText: { title, description },
+  onComponentUpdate,
+}: CreateNewSubformSectionProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { validateLayoutSetName } = useValidateLayoutSetName();
+  const [nameError, setNameError] = useState<string>();
+  const [newDataModel, setNewDataModel] = useState<string>('');
+  const [selectedDataModel, setSelectedDataModel] = useState<string>('');
+  const [displayDataModelInput, setDisplayDataModelInput] = useState(false);
+  const { createSubform, isPendingNewSubformMutation } = useCreateSubform();
+
+  const handleSubformName = (subformName: string) => {
+    const subformNameValidation = validateLayoutSetName(subformName, layoutSets);
+    setNameError(subformNameValidation);
+  };
+
+  const handleCloseButton = () => {
+    if (displayDataModelInput) {
+      setNewDataModel('');
+      setDisplayDataModelInput(false);
+    } else {
+      setShowCreateSubformCard(false);
+    }
+  };
+
+  const handleCreateSubformSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    const formData: FormData = new FormData(e.currentTarget);
+    const newSubformName = formData.get('subform') as string;
+    const subformDataType = formData.get('subformDataModel') as string;
+    const newSubformDataType = formData.get('newSubformDataModel') as string;
+
+    createSubform({
+      layoutSetName: newSubformName,
+      onSubformCreated: onComponentUpdate,
+      dataType: subformDataType || newSubformDataType,
+      newDataModel: !!newSubformDataType,
+    });
+  };
+
+  const hasInvalidSubformName = nameError === undefined || Boolean(nameError);
+  const hasInvalidDataModel = displayDataModelInput ? !newDataModel : !selectedDataModel;
+
+  return (
+    <StudioRecommendedNextAction
+      title={t(title)}
+      description={t(description)}
+      hideSaveButton={true}
+      hideSkipButton={true}
+      onSave={handleCreateSubformSubmit}
+    >
+      {!hasSubforms && (
+        <>
+          <StudioParagraph size='sm'>
+            {t('ux_editor.component_properties.subform.no_existing_layout_set_empty_subform')}
+          </StudioParagraph>
+          <SubformInstructions />
+        </>
+      )}
+      <StudioCard>
+        <StudioCard.Content>
+          <StudioTextfield
+            name='subform'
+            label={t('ux_editor.component_properties.subform.created_layout_set_name')}
+            size='sm'
+            disabled={isPendingNewSubformMutation}
+            onChange={(e) => handleSubformName(e.target.value)}
+            error={nameError}
+          />
+          <SubformDataModel
+            setDisplayDataModelInput={setDisplayDataModelInput}
+            setNewDataModel={setNewDataModel}
+            displayDataModelInput={displayDataModelInput}
+            setSelectedDataModel={setSelectedDataModel}
+          />
+          <CreateNewSubformButtons
+            isPendingNewSubformMutation={isPendingNewSubformMutation}
+            disableSaveButton={hasInvalidSubformName || hasInvalidDataModel}
+            displayCloseButton={hasSubforms || displayDataModelInput}
+            handleCloseButton={handleCloseButton}
+          />
+        </StudioCard.Content>
+      </StudioCard>
+    </StudioRecommendedNextAction>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.module.css
new file mode 100644
index 00000000000..a0e83399116
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.module.css
@@ -0,0 +1,4 @@
+.displayDataModelButton {
+  padding-left: var(--fds-spacing-1);
+  border-radius: var(--fds-sizing-1);
+}
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx
new file mode 100644
index 00000000000..6c9807f9bc8
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { SubformDataModel, type SubformDataModelProps } from './SubformDataModel';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from 'dashboard/testing/mocks';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
+
+jest.mock('app-shared/hooks/queries/useAppMetadataModelIdsQuery');
+
+const user = userEvent.setup();
+
+const mockDataModelIds = ['dataModelId1', 'dataModelId2'];
+
+(useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
+
+describe('SubformDataModel', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('renders StudioNativeSelect with its label and options', () => {
+    renderSubformDataModelSelect();
+
+    const dataModelSelect = screen.getByRole('combobox', {
+      name: textMock('ux_editor.component_properties.subform.data_model_binding_label'),
+    });
+    const options = screen.getAllByRole('option');
+
+    expect(dataModelSelect).toBeInTheDocument();
+    expect(options).toHaveLength(mockDataModelIds.length);
+  });
+
+  it('Renders placeholder option with an empty value', () => {
+    renderSubformDataModelSelect();
+
+    const placeholderOption = screen.getByRole('option', {
+      hidden: true,
+      name: '',
+    });
+    expect(placeholderOption).toBeInTheDocument();
+    expect(placeholderOption).toHaveAttribute('value', '');
+  });
+
+  it('Calls setDataModel when selecting an option', async () => {
+    const setSelectedDataModel = jest.fn();
+    renderSubformDataModelSelect({ setSelectedDataModel });
+
+    await user.selectOptions(
+      screen.getByRole('combobox'),
+      screen.getByRole('option', { name: mockDataModelIds[1] }),
+    );
+    await waitFor(() => expect(setSelectedDataModel).toHaveBeenCalledTimes(1));
+    expect(setSelectedDataModel).toHaveBeenCalledWith(mockDataModelIds[1]);
+  });
+
+  it('Should call setDisplayDataModelInput true when clicking create new data model button', async () => {
+    const setDisplayDataModelInput = jest.fn();
+    renderSubformDataModelSelect({ setDisplayDataModelInput });
+    const displayDataModelInput = screen.getByRole('button', {
+      name: textMock('ux_editor.component_properties.subform.create_new_data_model'),
+    });
+    await user.click(displayDataModelInput);
+
+    expect(setDisplayDataModelInput).toHaveBeenCalledWith(true);
+  });
+
+  it('Should display create new data model input when setDisplayDataModelInput is true', () => {
+    renderSubformDataModelSelect({ displayDataModelInput: true });
+    const dataModelInput = screen.getByRole('textbox', {
+      name: textMock('ux_editor.component_properties.subform.create_new_data_model_label'),
+    });
+
+    expect(dataModelInput).toBeInTheDocument();
+  });
+});
+
+const defaultProps: SubformDataModelProps = {
+  setDisplayDataModelInput: jest.fn(),
+  setNewDataModel: jest.fn(),
+  displayDataModelInput: false,
+  setSelectedDataModel: jest.fn(),
+};
+
+const renderSubformDataModelSelect = (props: Partial<SubformDataModelProps> = {}) => {
+  (useAppMetadataModelIdsQuery as jest.Mock).mockReturnValue({ data: mockDataModelIds });
+  renderWithProviders(<SubformDataModel {...defaultProps} {...props} />);
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx
new file mode 100644
index 00000000000..32508217bb1
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { StudioTextfield, StudioNativeSelect, StudioProperty } from '@studio/components';
+import { LinkIcon } from '@studio/icons';
+import { useTranslation } from 'react-i18next';
+import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
+import classes from './SubformDataModel.module.css';
+
+export type SubformDataModelProps = {
+  setDisplayDataModelInput: (setDisplayDataModelInput: boolean) => void;
+  setNewDataModel: (dataModelId: string) => void;
+  displayDataModelInput: boolean;
+  setSelectedDataModel: (dataModelId: string) => void;
+};
+
+export const SubformDataModel = ({
+  setDisplayDataModelInput,
+  setSelectedDataModel,
+  setNewDataModel,
+  displayDataModelInput,
+}: SubformDataModelProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { org, app } = useStudioEnvironmentParams();
+  const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false);
+
+  const handleDataModel = (dataModelId: string) => {
+    // TODO: https://github.com/Altinn/altinn-studio/issues/14184
+    setNewDataModel(dataModelId);
+  };
+
+  const handleDisplayInput = () => {
+    setDisplayDataModelInput(true);
+  };
+
+  return (
+    <>
+      <StudioNativeSelect
+        label={t('ux_editor.component_properties.subform.data_model_binding_label')}
+        onChange={(e) => setSelectedDataModel(e.target.value)}
+        size='small'
+        disabled={displayDataModelInput}
+        name='subformDataModel'
+      >
+        <option value='' hidden />
+        {dataModelIds ? (
+          dataModelIds.map((dataModelId) => (
+            <option value={dataModelId} key={dataModelId}>
+              {dataModelId}
+            </option>
+          ))
+        ) : (
+          <option value=''>
+            {t('ux_editor.component_properties.subform.data_model_empty_messsage')}
+          </option>
+        )}
+      </StudioNativeSelect>
+      {displayDataModelInput ? (
+        <StudioTextfield
+          name='newSubformDataModel'
+          label={t('ux_editor.component_properties.subform.create_new_data_model_label')}
+          size='sm'
+          onChange={(e) => handleDataModel(e.target.value)}
+        />
+      ) : (
+        <StudioProperty.Button
+          icon={<LinkIcon />}
+          className={classes.displayDataModelButton}
+          onClick={handleDisplayInput}
+          property={t('ux_editor.component_properties.subform.create_new_data_model')}
+        />
+      )}
+    </>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformInstructions.tsx
similarity index 100%
rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SubformInstructions.tsx
rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformInstructions.tsx
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts
new file mode 100644
index 00000000000..1af67251c53
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/index.ts
@@ -0,0 +1 @@
+export { CreateNewSubformSection } from './CreateNewSubformSection';
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx
index 9e33b3cf106..ece47e04d2d 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.test.tsx
@@ -49,21 +49,6 @@ describe('EditLayoutSet', () => {
     expect(screen.getByRole('textbox')).toBeInTheDocument();
   });
 
-  it('should disable save button until user has selected a subform', async () => {
-    const user = userEvent.setup();
-    renderEditLayoutSet(subformLayoutSet);
-
-    const saveButton = screen.getByRole('button', { name: textMock('general.save') });
-    expect(saveButton).toBeDisabled();
-
-    const subformSelector = screen.getByRole('combobox', {
-      name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'),
-    });
-    await user.selectOptions(subformSelector, [subformLayoutSetId]);
-
-    expect(saveButton).not.toBeDisabled();
-  });
-
   it('should call handleComponentChange when save button is clicked', async () => {
     const user = userEvent.setup();
     renderEditLayoutSet(subformLayoutSet);
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx
index 81b31abe538..dba2761057c 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.tsx
@@ -1,86 +1,46 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SelectLayoutSet } from './SelectLayoutSet/SelectLayoutSet';
-import {
-  StudioButton,
-  StudioParagraph,
-  StudioProperty,
-  StudioRecommendedNextAction,
-} from '@studio/components';
-import { CheckmarkIcon, PlusIcon } from '@studio/icons';
-import classes from './EditLayoutSet.module.css';
-import { CreateNewSubformLayoutSet } from './CreateNewSubformLayoutSet';
+import { CreateNewSubformSection } from './CreateNewSubformSection';
 import { SubformUtilsImpl } from '@altinn/ux-editor/classes/SubformUtils';
-import { SubformInstructions } from './SubformInstructions';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 import type { IGenericEditComponent } from '@altinn/ux-editor/components/config/componentConfig';
 import type { ComponentType } from 'app-shared/types/ComponentType';
+import { SelectSubformSection } from './SelectSubformSection/SelectSubformSection';
 
 export const EditLayoutSet = <T extends ComponentType>({
   handleComponentChange,
   component,
 }: IGenericEditComponent<T>): React.ReactElement => {
-  const { t } = useTranslation();
   const [showCreateSubformCard, setShowCreateSubformCard] = useState<boolean>(false);
-  const [selectedSubform, setSelectedSubform] = useState<string>(undefined);
   const { org, app } = useStudioEnvironmentParams();
   const { data: layoutSets } = useLayoutSetsQuery(org, app);
-
   const subformUtils = new SubformUtilsImpl(layoutSets.sets);
   const hasSubforms = subformUtils.hasSubforms;
-  const { title, description } = subformUtils.recommendedNextActionText;
 
-  const handleUpdatedLayoutSet = (layoutSet: string): void => {
-    const updatedComponent = { ...component, layoutSet };
+  const handleUpdateComponent = (subform: string) => {
+    const updatedComponent = { ...component, layoutSet: subform };
     handleComponentChange(updatedComponent);
   };
 
+  const displayCreateSubformCard = showCreateSubformCard || !hasSubforms;
+  if (displayCreateSubformCard) {
+    return (
+      <CreateNewSubformSection
+        setShowCreateSubformCard={setShowCreateSubformCard}
+        onComponentUpdate={handleUpdateComponent}
+        layoutSets={layoutSets}
+        hasSubforms={hasSubforms}
+        recommendedNextActionText={subformUtils.recommendedNextActionText}
+      />
+    );
+  }
+
   return (
-    <StudioRecommendedNextAction
-      title={t(title)}
-      description={t(description)}
-      hideSaveButton={true}
-      hideSkipButton={true}
-    >
-      {!hasSubforms && (
-        <>
-          <StudioParagraph size='sm'>
-            {t('ux_editor.component_properties.subform.no_existing_layout_set_empty_subform')}
-          </StudioParagraph>
-          <SubformInstructions />
-        </>
-      )}
-      {showCreateSubformCard || !hasSubforms ? (
-        <CreateNewSubformLayoutSet
-          layoutSets={layoutSets}
-          onUpdateLayoutSet={handleUpdatedLayoutSet}
-          setShowCreateSubformCard={setShowCreateSubformCard}
-          hasSubforms={hasSubforms}
-        />
-      ) : (
-        <>
-          <SelectLayoutSet
-            setSelectedSubform={setSelectedSubform}
-            selectedSubform={selectedSubform}
-          />
-          <StudioProperty.Button
-            className={classes.createSubformLinkButton}
-            property={t('ux_editor.component_properties.subform.create_layout_set_button')}
-            icon={<PlusIcon />}
-            onClick={() => setShowCreateSubformCard(true)}
-          />
-          <StudioButton
-            className={classes.saveSubformButton}
-            icon={<CheckmarkIcon />}
-            onClick={() => handleUpdatedLayoutSet(selectedSubform)}
-            title={t('general.save')}
-            disabled={!selectedSubform}
-            variant='secondary'
-            color='success'
-          />
-        </>
-      )}
-    </StudioRecommendedNextAction>
+    <SelectSubformSection
+      setShowCreateSubformCard={setShowCreateSubformCard}
+      onComponentUpdate={handleUpdateComponent}
+      recommendedNextActionText={subformUtils.recommendedNextActionText}
+      subformLayoutSetsIds={subformUtils.subformLayoutSetsIds}
+    />
   );
 };
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.module.css
deleted file mode 100644
index d4591226e1d..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.selectLayoutSet {
-  display: grid;
-  flex-direction: column;
-  gap: var(--fds-spacing-2);
-}
-
-.layoutSetsOption {
-  text-overflow: ellipsis;
-  width: 100%;
-}
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx
deleted file mode 100644
index 1c8ab704c40..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.test.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { SelectLayoutSet } from './SelectLayoutSet';
-import { renderWithProviders } from 'dashboard/testing/mocks';
-import { QueryKey } from 'app-shared/types/QueryKey';
-import { app, org } from '@studio/testing/testids';
-import { layoutSetsMock } from '@altinn/ux-editor/testing/layoutSetsMock';
-import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
-import { screen } from '@testing-library/react';
-import { textMock } from '@studio/testing/mocks/i18nMock';
-import userEvent from '@testing-library/user-event';
-
-const subform1 = 'subformLayoutSetId';
-const subform2 = 'subformLayoutSetId2';
-
-const layoutSets = {
-  ...layoutSetsMock,
-  sets: [
-    { id: subform1, type: 'subform' },
-    { id: subform2, type: 'subform' },
-  ],
-};
-
-describe('SelectLayoutSet', () => {
-  afterEach(jest.clearAllMocks);
-
-  it('should render the select layout set component with 3 options (1 dummy)', () => {
-    const setSelectedSubform = jest.fn();
-    renderSelectLayoutSet({ setSelectedSubform, selectedSubform: undefined });
-
-    const selectLayoutSet = screen.getByRole('combobox');
-    expect(selectLayoutSet).toBeInTheDocument();
-
-    const dummyOption = screen.getByRole('option', {
-      name: textMock('ux_editor.component_properties.subform.choose_layout_set'),
-    });
-    const options = screen.getAllByRole('option');
-
-    expect(options).toHaveLength(3);
-    expect(options[0]).toBe(dummyOption);
-  });
-
-  it('should call setSelectedSubform when selecting a subform', async () => {
-    const setSelectedSubform = jest.fn();
-    const user = userEvent.setup();
-    renderSelectLayoutSet({ setSelectedSubform, selectedSubform: undefined });
-
-    const selectLayoutSet = screen.getByRole('combobox');
-    await user.selectOptions(selectLayoutSet, subform2);
-
-    expect(setSelectedSubform).toHaveBeenCalledTimes(1);
-    expect(setSelectedSubform).toHaveBeenCalledWith(subform2);
-  });
-
-  it('should display the selected subform layout set in document', () => {
-    const setSelectedSubform = jest.fn();
-    renderSelectLayoutSet({ setSelectedSubform, selectedSubform: subform1 });
-
-    const selectLayoutSet = screen.getByRole('combobox');
-    expect(selectLayoutSet).toHaveValue(subform1);
-  });
-});
-
-type SelectLayoutSetProps = {
-  setSelectedSubform: (layoutSetId: string) => void;
-  selectedSubform: string;
-};
-
-const renderSelectLayoutSet = ({ setSelectedSubform, selectedSubform }: SelectLayoutSetProps) => {
-  const queryClient = createQueryClientMock();
-  queryClient.setQueryData([QueryKey.LayoutSets, org, app], layoutSets);
-
-  renderWithProviders(
-    <SelectLayoutSet setSelectedSubform={setSelectedSubform} selectedSubform={selectedSubform} />,
-    { queryClient },
-  );
-};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx
deleted file mode 100644
index 1033dfdc898..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectLayoutSet/SelectLayoutSet.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { StudioNativeSelect } from '@studio/components';
-import { useTranslation } from 'react-i18next';
-import classes from './SelectLayoutSet.module.css';
-import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
-import { SubformUtilsImpl } from '../../../../../../classes/SubformUtils';
-
-type SelectLayoutSetProps = {
-  setSelectedSubform: (layoutSetId: string) => void;
-  selectedSubform: string;
-};
-
-export const SelectLayoutSet = ({ setSelectedSubform, selectedSubform }: SelectLayoutSetProps) => {
-  const { t } = useTranslation();
-  const { org, app } = useStudioEnvironmentParams();
-  const { data: layoutSets } = useLayoutSetsQuery(org, app);
-  const subformUtils = new SubformUtilsImpl(layoutSets.sets);
-
-  return (
-    <StudioNativeSelect
-      className={classes.layoutSetsOption}
-      size='small'
-      onChange={(e) => setSelectedSubform(e.target.value)}
-      label={t('ux_editor.component_properties.subform.choose_layout_set_label')}
-      value={selectedSubform}
-    >
-      <option value=''>{t('ux_editor.component_properties.subform.choose_layout_set')}</option>
-      {subformUtils.subformLayoutSetsIds.map((option) => (
-        <option key={option} value={option}>
-          {option}
-        </option>
-      ))}
-    </StudioNativeSelect>
-  );
-};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css
similarity index 73%
rename from frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css
rename to frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css
index 08758ec752e..01a46b16998 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/EditLayoutSet.module.css
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.module.css
@@ -1,3 +1,8 @@
+.layoutSetsOption {
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
 .createSubformLinkButton {
   padding-left: var(--fds-spacing-1);
   border-radius: var(--fds-sizing-1);
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx
new file mode 100644
index 00000000000..e58ee619695
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { SelectSubformSection } from './SelectSubformSection';
+import { render, screen } from '@testing-library/react';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import userEvent from '@testing-library/user-event';
+
+const subform1 = 'subformLayoutSetId';
+const subform2 = 'subformLayoutSetId2';
+const subformLayoutSetsIds = [subform1, subform2];
+const onComponentUpdate = jest.fn();
+
+describe('SelectLayoutSet', () => {
+  afterEach(jest.clearAllMocks);
+
+  const selectSubform = async () => {
+    const user = userEvent.setup();
+    const subformSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.component_properties.subform.choose_layout_set_label'),
+    });
+    await user.selectOptions(subformSelector, subform1);
+  };
+
+  it('should render subform selector with 3 options (1 dummy)', () => {
+    renderSelectSubformSection();
+
+    const selectLayoutSet = screen.getByRole('combobox');
+    expect(selectLayoutSet).toBeInTheDocument();
+
+    const dummyOption = screen.getByRole('option', {
+      name: textMock('ux_editor.component_properties.subform.choose_layout_set'),
+    });
+    const options = screen.getAllByRole('option');
+
+    expect(options).toHaveLength(3);
+    expect(options[0]).toBe(dummyOption);
+  });
+
+  it('should call onComponentUpdate when selecting a subform and click save', async () => {
+    const user = userEvent.setup();
+    renderSelectSubformSection();
+
+    await selectSubform();
+    await user.click(screen.getByRole('button', { name: textMock('general.save') }));
+    expect(onComponentUpdate).toHaveBeenCalledTimes(1);
+    expect(onComponentUpdate).toHaveBeenCalledWith(subform1);
+  });
+
+  it('should disable save button until user has selected a subform', async () => {
+    renderSelectSubformSection();
+
+    const saveButton = screen.getByRole('button', { name: textMock('general.save') });
+    expect(saveButton).toBeDisabled();
+    await selectSubform();
+    expect(saveButton).not.toBeDisabled();
+  });
+});
+
+const renderSelectSubformSection = () => {
+  render(
+    <SelectSubformSection
+      recommendedNextActionText={{ title: 'title', description: 'description' }}
+      onComponentUpdate={onComponentUpdate}
+      setShowCreateSubformCard={jest.fn()}
+      subformLayoutSetsIds={subformLayoutSetsIds}
+    />,
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx
new file mode 100644
index 00000000000..d37c570c163
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSet/SelectSubformSection/SelectSubformSection.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import {
+  StudioNativeSelect,
+  StudioRecommendedNextAction,
+  StudioProperty,
+  StudioButton,
+} from '@studio/components';
+import { CheckmarkIcon, PlusIcon } from '@studio/icons';
+import { useTranslation } from 'react-i18next';
+import classes from './SelectSubformSection.module.css';
+
+type SelectSubformSectionProps = {
+  setShowCreateSubformCard: (showCreateSubformCard: boolean) => void;
+  onComponentUpdate: (subform: string) => void;
+  recommendedNextActionText: {
+    title: string;
+    description: string;
+  };
+  subformLayoutSetsIds: string[];
+};
+
+export const SelectSubformSection = ({
+  setShowCreateSubformCard,
+  onComponentUpdate,
+  recommendedNextActionText: { title, description },
+  subformLayoutSetsIds,
+}: SelectSubformSectionProps) => {
+  const [selectedSubform, setSelectedSubform] = useState<string>(undefined);
+  const { t } = useTranslation();
+
+  const handleSelectSubformSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    const formData: FormData = new FormData(e.currentTarget);
+    const subform = formData.get('subform') as string;
+    onComponentUpdate(subform);
+  };
+
+  return (
+    <StudioRecommendedNextAction
+      title={t(title)}
+      description={t(description)}
+      hideSaveButton={true}
+      hideSkipButton={true}
+      onSave={handleSelectSubformSubmit}
+    >
+      <StudioNativeSelect
+        name='subform'
+        className={classes.layoutSetsOption}
+        size='small'
+        onChange={(e) => setSelectedSubform(e.target.value)}
+        label={t('ux_editor.component_properties.subform.choose_layout_set_label')}
+        value={selectedSubform}
+      >
+        <option value=''>{t('ux_editor.component_properties.subform.choose_layout_set')}</option>
+        {subformLayoutSetsIds.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </StudioNativeSelect>
+      <StudioProperty.Button
+        className={classes.createSubformLinkButton}
+        property={t('ux_editor.component_properties.subform.create_layout_set_button')}
+        icon={<PlusIcon />}
+        onClick={() => setShowCreateSubformCard(true)}
+      />
+      <StudioButton
+        className={classes.saveSubformButton}
+        icon={<CheckmarkIcon />}
+        type='submit'
+        title={t('general.save')}
+        disabled={!selectedSubform}
+        variant='secondary'
+        color='success'
+      />
+    </StudioRecommendedNextAction>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx
index a01c5c83402..db8672d1628 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { EditLayoutSet } from './EditLayoutSet';
 import type { ComponentType } from 'app-shared/types/ComponentType';
 import type { IGenericEditComponent } from '../../../../components/config/componentConfig';
-import { DefinedLayoutSet } from './EditLayoutSet/DefinedLayoutSet/DefinedLayoutSet';
+import { DefinedLayoutSet } from './DefinedLayoutSet/DefinedLayoutSet';
 import { StudioButton } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { PencilIcon } from '@studio/icons';
diff --git a/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts b/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts
index 3f5f5be7a08..81c4bc51a47 100644
--- a/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts
+++ b/frontend/packages/ux-editor/src/hooks/useCreateSubform.test.ts
@@ -1,7 +1,14 @@
+import { renderHookWithProviders } from '../testing/mocks';
 import { useCreateSubform } from './useCreateSubform';
-import { renderHook } from '@testing-library/react';
 
 const addLayoutSetMock = jest.fn();
+const createDataModelMock = jest.fn();
+
+jest.mock('app-development/hooks/mutations/useCreateDataModelMutation', () => ({
+  useCreateDataModelMutation: jest.fn(() => ({
+    mutate: createDataModelMock,
+  })),
+}));
 
 jest.mock('app-development/hooks/mutations/useAddLayoutSetMutation', () => ({
   useAddLayoutSetMutation: jest.fn(() => ({
@@ -15,7 +22,7 @@ describe('useCreateSubform', () => {
   });
 
   it('should call addLayoutSet with correct parameters', () => {
-    const { createSubform } = renderHook(() => useCreateSubform()).result.current;
+    const { createSubform } = renderHookWithProviders(() => useCreateSubform()).result.current;
     const subformName = 'underskjema';
     const onSubformCreated = jest.fn();
 
@@ -35,4 +42,27 @@ describe('useCreateSubform', () => {
       },
     );
   });
+
+  it('should call createDataModel with correct parameters when newDataModel is true', () => {
+    const { createSubform } = renderHookWithProviders(() => useCreateSubform()).result.current;
+    const subformName = 'underskjema';
+    const onSubformCreated = jest.fn();
+
+    createSubform({
+      layoutSetName: subformName,
+      onSubformCreated,
+      dataType: 'dataModel1',
+      newDataModel: true,
+    });
+
+    expect(createDataModelMock).toHaveBeenCalledWith(
+      {
+        name: 'dataModel1',
+        relativePath: '',
+      },
+      {
+        onSuccess: expect.any(Function),
+      },
+    );
+  });
 });
diff --git a/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts b/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts
index 19d33225104..4c5825e0ace 100644
--- a/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts
+++ b/frontend/packages/ux-editor/src/hooks/useCreateSubform.ts
@@ -1,15 +1,18 @@
+import { useCreateDataModelMutation } from 'app-development/hooks/mutations';
 import { useAddLayoutSetMutation } from 'app-development/hooks/mutations/useAddLayoutSetMutation';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { useAppContext } from './useAppContext';
 
 type CreateSubformProps = {
   layoutSetName: string;
   onSubformCreated: (layoutSetName: string) => void;
   dataType: string;
+  newDataModel?: boolean;
 };
 
 type UseCreateSubformReturn = {
   createSubform: (props: CreateSubformProps) => void;
-  isPendingLayoutSetMutation: boolean;
+  isPendingNewSubformMutation: boolean;
 };
 
 export const useCreateSubform = (): UseCreateSubformReturn => {
@@ -18,24 +21,51 @@ export const useCreateSubform = (): UseCreateSubformReturn => {
     org,
     app,
   );
+  const { mutate: createDataModel, isPending: isPendinDataModelMutation } =
+    useCreateDataModelMutation();
+  const { updateLayoutSetsForPreview } = useAppContext();
 
-  const createSubform = ({ layoutSetName, onSubformCreated, dataType }: CreateSubformProps) => {
-    addLayoutSet(
-      {
-        layoutSetIdToUpdate: layoutSetName,
-        layoutSetConfig: {
-          id: layoutSetName,
-          type: 'subform',
-          dataType,
+  const createSubform = ({
+    layoutSetName,
+    onSubformCreated,
+    dataType,
+    newDataModel = false,
+  }: CreateSubformProps) => {
+    const handleAddLayoutSet = () => {
+      addLayoutSet(
+        {
+          layoutSetIdToUpdate: layoutSetName,
+          layoutSetConfig: {
+            id: layoutSetName,
+            type: 'subform',
+            dataType,
+          },
         },
-      },
-      {
-        onSuccess: () => {
-          onSubformCreated(layoutSetName);
+        {
+          onSuccess: async () => {
+            await updateLayoutSetsForPreview();
+            onSubformCreated(layoutSetName);
+          },
         },
-      },
-    );
+      );
+    };
+
+    if (newDataModel) {
+      createDataModel(
+        {
+          name: dataType,
+          relativePath: '',
+        },
+        {
+          onSuccess: handleAddLayoutSet,
+        },
+      );
+    } else {
+      handleAddLayoutSet();
+    }
   };
 
-  return { createSubform, isPendingLayoutSetMutation };
+  const isPendingNewSubformMutation = isPendingLayoutSetMutation || isPendinDataModelMutation;
+
+  return { createSubform, isPendingNewSubformMutation };
 };
diff --git a/frontend/packages/ux-editor/src/testing/appContextMock.ts b/frontend/packages/ux-editor/src/testing/appContextMock.ts
index 3bca2fbf221..8224645d412 100644
--- a/frontend/packages/ux-editor/src/testing/appContextMock.ts
+++ b/frontend/packages/ux-editor/src/testing/appContextMock.ts
@@ -13,6 +13,7 @@ export const appContextMock: AppContextProps = {
   setSelectedFormLayoutSetName: jest.fn(),
   selectedFormLayoutName: layout1NameMock,
   setSelectedFormLayoutName: jest.fn(),
+  updateLayoutSetsForPreview: jest.fn(),
   updateLayoutsForPreview: jest.fn(),
   updateLayoutSettingsForPreview: jest.fn(),
   updateTextsForPreview: jest.fn(),