diff --git a/changelog/unreleased/issue-17746.toml b/changelog/unreleased/issue-17746.toml
new file mode 100644
index 000000000000..637bbabc90ef
--- /dev/null
+++ b/changelog/unreleased/issue-17746.toml
@@ -0,0 +1,12 @@
+type = "a"
+message = "Add index set field type profiles overview and edit page"
+
+pulls = ["17775"]
+issues=["17746"]
+
+details.user = """
+Before this change, it was possible to create and manage custom field type mappings
+of existing index sets. For every new index set that is created,
+these steps have to be repeated though. This change gives an option to bundle up
+custom field types into profiles.
+"""
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfile.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfile.test.tsx
new file mode 100644
index 000000000000..4aea0ac4fefe
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfile.test.tsx
@@ -0,0 +1,124 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { render, screen, fireEvent, act, waitFor } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
+
+import asMock from 'helpers/mocking/AsMock';
+import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
+import useFieldTypes from 'views/logic/fieldtypes/useFieldTypes';
+import CreateProfile from 'components/indices/IndexSetFieldTypeProfiles/CreateProfile';
+import useProfileMutations from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations';
+import { simpleFields } from 'fixtures/fields';
+
+const renderCreateNewProfile = () => render(
+  <CreateProfile />,
+);
+
+jest.mock('components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations', () => jest.fn());
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
+
+jest.mock('views/logic/fieldtypes/useFieldTypes', () => jest.fn());
+
+const selectItem = async (select: HTMLElement, option: string | RegExp) => {
+  selectEvent.openMenu(select);
+
+  return selectEvent.select(select, option);
+};
+
+describe('IndexSetFieldTypesList', () => {
+  const createMock = jest.fn(() => Promise.resolve());
+  const editMock = jest.fn(() => Promise.resolve());
+
+  beforeAll(loadViewsPlugin);
+
+  afterAll(unloadViewsPlugin);
+
+  beforeEach(() => {
+    asMock(useFieldTypesForMappings).mockReturnValue({
+      data: {
+        fieldTypes: {
+          string: 'String type',
+          int: 'Number(int)',
+          bool: 'Boolean',
+          ip: 'IP',
+          date: 'Date',
+        },
+      },
+      isLoading: false,
+    });
+
+    asMock(useProfileMutations).mockReturnValue(({
+      editProfile: editMock,
+      isEditLoading: false,
+      createProfile: createMock,
+      isCreateLoading: false,
+      isLoading: false,
+    }));
+
+    asMock(useFieldTypes).mockImplementation(() => (
+      { data: simpleFields().toArray(), refetch: jest.fn() }
+    ));
+  });
+
+  it('Run createProfile with form data', async () => {
+    renderCreateNewProfile();
+
+    const name = await screen.findByRole('textbox', {
+      name: /name/i,
+      hidden: true,
+    });
+    const description = await screen.findByRole('textbox', {
+      name: /description/i,
+      hidden: true,
+    });
+    const addMappingButton = await screen.findByRole('button', { name: /add mapping/i });
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      fireEvent.click(addMappingButton);
+    });
+
+    const fieldFirst = await screen.findByLabelText(/select customFieldMappings.0.field/i);
+    const typeFirst = await screen.findByLabelText(/select customFieldMappings.0.type/i);
+    const fieldSecond = await screen.findByLabelText(/select customFieldMappings.1.field/i);
+    const typeSecond = await screen.findByLabelText(/select customFieldMappings.1.type/i);
+    const submitButton = await screen.findByTitle(/create profile/i);
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      fireEvent.change(name, { target: { value: 'Profile new' } });
+      fireEvent.change(description, { target: { value: 'Profile description' } });
+      await selectItem(fieldFirst, 'date');
+      await selectItem(typeFirst, 'String type');
+      await selectItem(fieldSecond, 'http_method');
+      await selectItem(typeSecond, 'String type');
+      await waitFor(() => expect(submitButton.hasAttribute('disabled')).toBe(false));
+      fireEvent.click(submitButton);
+    });
+
+    expect(createMock).toHaveBeenCalledWith({
+      name: 'Profile new',
+      description: 'Profile description',
+      customFieldMappings: [
+        { field: 'date', type: 'string' },
+        { field: 'http_method', type: 'string' },
+      ],
+    });
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfile.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfile.tsx
new file mode 100644
index 000000000000..3a2a2f8d9e76
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfile.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
+import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
+import { getPathnameWithoutId } from 'util/URLUtils';
+import useLocation from 'routing/useLocation';
+import ProfileForm from 'components/indices/IndexSetFieldTypeProfiles/ProfileForm';
+import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import useProfileMutations from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations';
+import Routes from 'routing/Routes';
+
+const CreateProfile = () => {
+  const sendTelemetry = useSendTelemetry();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const { createProfile } = useProfileMutations();
+  const telemetryPathName = useMemo(() => getPathnameWithoutId(pathname), [pathname]);
+
+  const onSubmit = useCallback((profile: IndexSetFieldTypeProfile) => {
+    createProfile(profile).then(() => {
+      sendTelemetry(TELEMETRY_EVENT_TYPE.INDEX_SET_FIELD_TYPE_PROFILE.CREATED, {
+        app_pathname: telemetryPathName,
+        app_action_value: { mappingsQuantity: profile?.customFieldMappings?.length },
+      });
+
+      navigate(Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.OVERVIEW);
+    });
+  }, [createProfile, navigate, sendTelemetry, telemetryPathName]);
+
+  useEffect(() => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.INDEX_SET_FIELD_TYPE_PROFILE.NEW_OPENED, { app_pathname: telemetryPathName, app_action_value: 'create-new-index-set-field-type-profile-opened' });
+  }, [sendTelemetry, telemetryPathName]);
+
+  const onCancel = useCallback(() => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.INDEX_SET_FIELD_TYPE_PROFILE.NEW_CANCELED, { app_pathname: telemetryPathName, app_action_value: 'create-new-index-set-field-type-profile-canceled' });
+    navigate(Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.OVERVIEW);
+  }, [navigate, sendTelemetry, telemetryPathName]);
+
+  return (
+    <ProfileForm onCancel={onCancel} submitButtonText="Create profile" submitLoadingText="Creating profile..." onSubmit={onSubmit} />
+  );
+};
+
+export default CreateProfile;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfileButton.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfileButton.tsx
new file mode 100644
index 000000000000..d87dc4012f3a
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CreateProfileButton.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import * as React from 'react';
+
+import { Button } from 'components/bootstrap';
+import Routes from 'routing/Routes';
+import { LinkContainer } from 'components/common/router';
+
+const CreateProfileButton = () => (
+  <LinkContainer to={Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.CREATE}>
+    <Button bsStyle="success">Create profile</Button>
+  </LinkContainer>
+);
+
+export default CreateProfileButton;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CustomFieldTypesList.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CustomFieldTypesList.tsx
new file mode 100644
index 000000000000..d8dd05353130
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/CustomFieldTypesList.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+import { styled } from 'styled-components';
+
+import type { CustomFieldMapping } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import type { FieldTypes } from 'views/logic/fieldactions/ChangeFieldType/types';
+
+const Item = styled.div`
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+`;
+
+const List = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1em;
+`;
+const CustomFieldTypesList = ({ list, fieldTypes }: { list: Array<CustomFieldMapping>, fieldTypes: FieldTypes }) => (
+  <List>
+    {list.map(({ field, type }) => (
+      <Item key={field}>
+        <b>{field}:</b><i>{fieldTypes[type]}</i>
+      </Item>
+    ))}
+  </List>
+);
+
+export default CustomFieldTypesList;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/EditProfile.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/EditProfile.test.tsx
new file mode 100644
index 000000000000..2add6b87ad3b
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/EditProfile.test.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { render, screen, fireEvent, act, waitFor } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
+
+import asMock from 'helpers/mocking/AsMock';
+import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
+import useFieldTypes from 'views/logic/fieldtypes/useFieldTypes';
+import EditProfile from 'components/indices/IndexSetFieldTypeProfiles/EditProfile';
+import useProfileMutations from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations';
+import { simpleFields } from 'fixtures/fields';
+import { profile1 } from 'fixtures/indexSetFieldTypeProfiles';
+
+const renderEditProfile = () => render(
+  <EditProfile profile={profile1} />,
+);
+
+jest.mock('components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations', () => jest.fn());
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
+
+jest.mock('views/logic/fieldtypes/useFieldTypes', () => jest.fn());
+
+const selectItem = async (select: HTMLElement, option: string | RegExp) => {
+  selectEvent.openMenu(select);
+
+  return selectEvent.select(select, option);
+};
+
+describe('IndexSetFieldTypesList', () => {
+  const createMock = jest.fn(() => Promise.resolve());
+  const editMock = jest.fn(() => Promise.resolve());
+
+  beforeAll(loadViewsPlugin);
+
+  afterAll(unloadViewsPlugin);
+
+  beforeEach(() => {
+    asMock(useFieldTypesForMappings).mockReturnValue({
+      data: {
+        fieldTypes: {
+          string: 'String type',
+          int: 'Number(int)',
+          bool: 'Boolean',
+          ip: 'IP',
+        },
+      },
+      isLoading: false,
+    });
+
+    asMock(useProfileMutations).mockReturnValue(({
+      editProfile: editMock,
+      isEditLoading: false,
+      createProfile: createMock,
+      isCreateLoading: false,
+      isLoading: false,
+    }));
+
+    asMock(useFieldTypes).mockImplementation(() => (
+      { data: simpleFields().toArray(), refetch: jest.fn() }
+    ));
+  });
+
+  it('Run editProfile with changed form data', async () => {
+    renderEditProfile();
+
+    const name = await screen.findByRole('textbox', {
+      name: /name/i,
+      hidden: true,
+    });
+
+    const fieldFirst = await screen.findByLabelText(/select customFieldMappings.0.field/i);
+    const typeFirst = await screen.findByLabelText(/select customFieldMappings.0.type/i);
+    const submitButton = await screen.findByTitle(/update profile/i);
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      fireEvent.change(name, { target: { value: 'Profile 1 new name' } });
+      await selectItem(fieldFirst, 'date');
+      await selectItem(typeFirst, 'String type');
+      fireEvent.click(submitButton);
+    });
+
+    expect(editMock).toHaveBeenCalledWith({
+      name: 'Profile 1 new name',
+      description: 'Description 1',
+      id: '111',
+      customFieldMappings: [
+        { field: 'date', type: 'string' },
+        { field: 'user_ip', type: 'ip' },
+      ],
+    });
+  });
+
+  it('Run editProfile with added form data', async () => {
+    renderEditProfile();
+
+    const addMappingButton = await screen.findByRole('button', { name: /add mapping/i });
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      fireEvent.click(addMappingButton);
+    });
+
+    const fieldThird = await screen.findByLabelText(/select customFieldMappings.2.field/i);
+    const typeThird = await screen.findByLabelText(/select customFieldMappings.2.type/i);
+    const submitButton = await screen.findByTitle(/update profile/i);
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await selectItem(fieldThird, 'date');
+      await selectItem(typeThird, 'String type');
+      await waitFor(() => expect(submitButton.hasAttribute('disabled')).toBe(false));
+      fireEvent.click(submitButton);
+    });
+
+    expect(editMock).toHaveBeenCalledWith({
+      name: 'Profile 1',
+      description: 'Description 1',
+      id: '111',
+      customFieldMappings: [
+        { field: 'http_method', type: 'string' },
+        { field: 'user_ip', type: 'ip' },
+        { field: 'date', type: 'string' },
+      ],
+    });
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/EditProfile.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/EditProfile.tsx
new file mode 100644
index 000000000000..511dd730d013
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/EditProfile.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
+import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
+import { getPathnameWithoutId } from 'util/URLUtils';
+import useLocation from 'routing/useLocation';
+import ProfileForm from 'components/indices/IndexSetFieldTypeProfiles/ProfileForm';
+import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import useProfileMutations from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations';
+import Routes from 'routing/Routes';
+
+type Props = {
+  profile: IndexSetFieldTypeProfile,
+}
+
+const EditProfile = ({
+  profile,
+}: Props) => {
+  const sendTelemetry = useSendTelemetry();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const { editProfile } = useProfileMutations();
+  const telemetryPathName = useMemo(() => getPathnameWithoutId(pathname), [pathname]);
+
+  const onSubmit = useCallback((newProfile: IndexSetFieldTypeProfile) => {
+    editProfile(newProfile).then(() => {
+      sendTelemetry(TELEMETRY_EVENT_TYPE.INDEX_SET_FIELD_TYPE_PROFILE.EDIT, {
+        app_pathname: telemetryPathName,
+        app_action_value: { mappingsQuantity: newProfile?.customFieldMappings?.length },
+      });
+
+      navigate(Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.OVERVIEW);
+    });
+  }, [editProfile, navigate, sendTelemetry, telemetryPathName]);
+
+  useEffect(() => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.INDEX_SET_FIELD_TYPE_PROFILE.EDIT_OPENED, { app_pathname: telemetryPathName, app_action_value: 'create-new-index-set-field-type-profile-opened' });
+  }, [sendTelemetry, telemetryPathName]);
+
+  const onCancel = useCallback(() => {
+    sendTelemetry(TELEMETRY_EVENT_TYPE.INDEX_SET_FIELD_TYPE_PROFILE.EDIT_CANCELED, { app_pathname: telemetryPathName, app_action_value: 'create-new-index-set-field-type-profile-canceled' });
+    navigate(Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.OVERVIEW);
+  }, [navigate, sendTelemetry, telemetryPathName]);
+
+  return (
+    <ProfileForm onCancel={onCancel} submitButtonText="Update profile" submitLoadingText="Updating profile..." onSubmit={onSubmit} initialValues={profile} />
+  );
+};
+
+export default EditProfile;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ExpandedCustomFieldTypes.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ExpandedCustomFieldTypes.tsx
new file mode 100644
index 000000000000..376399bfa553
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ExpandedCustomFieldTypes.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+
+import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import CustomFieldTypesList from 'components/indices/IndexSetFieldTypeProfiles/CustomFieldTypesList';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
+
+type Props = {
+  customFieldMappings: IndexSetFieldTypeProfile['customFieldMappings'],
+}
+
+const ExpandedCustomFieldTypes = ({ customFieldMappings }: Props) => {
+  const { data: { fieldTypes } } = useFieldTypesForMappings();
+
+  return (
+    <CustomFieldTypesList list={customFieldMappings}
+                          fieldTypes={fieldTypes} />
+  );
+};
+
+export default ExpandedCustomFieldTypes;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ExpandedSectionsRenderer.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ExpandedSectionsRenderer.tsx
new file mode 100644
index 000000000000..ac6302789fd9
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ExpandedSectionsRenderer.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+
+import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import ExpandedCustomFieldTypes from 'components/indices/IndexSetFieldTypeProfiles/ExpandedCustomFieldTypes';
+
+const useExpandedSectionsRenderer = () => ({
+  customFieldMapping: {
+    title: 'Custom Field Mappings',
+    content: ({ customFieldMappings }: IndexSetFieldTypeProfile) => (
+      <ExpandedCustomFieldTypes customFieldMappings={customFieldMappings} />
+    ),
+  },
+});
+
+export default useExpandedSectionsRenderer;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileActions.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileActions.tsx
new file mode 100644
index 000000000000..b2373e95d10b
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileActions.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+
+import { Button, ButtonToolbar } from 'components/bootstrap';
+import Routes from 'routing/Routes';
+import { LinkContainer } from 'components/common/router';
+
+const ProfileActions = ({ profileId }: { profileId: string }) => (
+  <ButtonToolbar>
+    <LinkContainer to={Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.edit(profileId)}>
+      <Button bsSize="xs">
+        Edit
+      </Button>
+    </LinkContainer>
+  </ButtonToolbar>
+);
+
+export default ProfileActions;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileForm.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileForm.test.tsx
new file mode 100644
index 000000000000..6d900619024f
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileForm.test.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { render, screen, fireEvent, act } from 'wrappedTestingLibrary';
+import selectEvent from 'react-select-event';
+
+import asMock from 'helpers/mocking/AsMock';
+import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
+import useFieldTypes from 'views/logic/fieldtypes/useFieldTypes';
+import ProfileForm from 'components/indices/IndexSetFieldTypeProfiles/ProfileForm';
+import { simpleFields } from 'fixtures/fields';
+import { profile1 } from 'fixtures/indexSetFieldTypeProfiles';
+
+const mockSubmit = jest.fn();
+const mockCancel = jest.fn();
+const renderProfileForm = ({ initialValues }) => render(
+  <ProfileForm onCancel={mockCancel} onSubmit={mockSubmit} submitLoadingText="Submitting..." submitButtonText="Submit" initialValues={initialValues} />,
+);
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
+
+jest.mock('views/logic/fieldtypes/useFieldTypes', () => jest.fn());
+
+const selectItem = async (select: HTMLElement, option: string | RegExp) => {
+  selectEvent.openMenu(select);
+
+  return selectEvent.select(select, option);
+};
+
+describe('IndexSetFieldTypesList', () => {
+  beforeAll(loadViewsPlugin);
+
+  afterAll(unloadViewsPlugin);
+
+  beforeEach(() => {
+    asMock(useFieldTypesForMappings).mockReturnValue({
+      data: {
+        fieldTypes: {
+          string: 'String type',
+          int: 'Number(int)',
+          bool: 'Boolean',
+          ip: 'IP',
+          date: 'Date',
+        },
+      },
+      isLoading: false,
+    });
+
+    asMock(useFieldTypes).mockImplementation(() => (
+      { data: simpleFields().toArray(), refetch: jest.fn() }
+    ));
+  });
+
+  it('Do not run onSubmit when has empty name', async () => {
+    renderProfileForm({
+      initialValues: {
+        ...profile1,
+        name: '',
+      },
+    });
+
+    const submitButton = await screen.findByLabelText('Submit');
+    fireEvent.click(submitButton);
+
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it('Do not run onSubmit when has empty customFieldMapping', async () => {
+    renderProfileForm({
+      initialValues: {
+        ...profile1,
+        customFieldMappings: [
+          { field: 'http_method', type: 'string' },
+        ],
+      },
+    });
+
+    const addMappingButton = await screen.findByRole('button', { name: /add mapping/i });
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      fireEvent.click(addMappingButton);
+    });
+
+    const typeSecond = await screen.findByLabelText(/select customFieldMappings.1.type/i);
+    const submitButton = await screen.findByLabelText('Submit');
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await selectItem(typeSecond, 'String type');
+
+      fireEvent.click(submitButton);
+    });
+
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+
+  it('Do not run onSubmit when has same fields in customFieldMapping', async () => {
+    renderProfileForm({
+      initialValues: {
+        ...profile1,
+        customFieldMappings: [
+          { field: 'http_method', type: 'string' },
+        ],
+      },
+    });
+
+    const addMappingButton = await screen.findByRole('button', { name: /add mapping/i });
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      fireEvent.click(addMappingButton);
+    });
+
+    const fieldSecond = await screen.findByLabelText(/select customFieldMappings.1.field/i);
+    const typeSecond = await screen.findByLabelText(/select customFieldMappings.1.type/i);
+    const submitButton = await screen.findByLabelText('Submit');
+
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    await act(async () => {
+      await selectItem(typeSecond, 'String type');
+      await selectItem(fieldSecond, 'http_method');
+
+      fireEvent.click(submitButton);
+    });
+
+    expect(mockSubmit).not.toHaveBeenCalled();
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileForm.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileForm.tsx
new file mode 100644
index 000000000000..f285f9b84da9
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfileForm.tsx
@@ -0,0 +1,218 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import { styled } from 'styled-components';
+import React, { useMemo } from 'react';
+import { Formik, Form, FieldArray, Field } from 'formik';
+import countBy from 'lodash/countBy';
+
+import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import { FormikInput, IconButton, Select, FormSubmit, Spinner, InputOptionalInfo } from 'components/common';
+import { Button, Col, HelpBlock, Input } from 'components/bootstrap';
+import useFieldTypes from 'views/logic/fieldtypes/useFieldTypes';
+import useFieldTypesForMapping from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
+import { defaultCompare } from 'logic/DefaultCompare';
+
+const SelectContainer = styled.div`
+  flex-basis: 100%;
+`;
+
+const SelectGroup = styled.div`
+  flex-grow: 1;
+  display: flex;
+  gap: 5px;
+`;
+const List = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledLabel = styled.h5`
+  font-weight: bold;
+  margin-bottom: 5px;
+`;
+
+const Item = styled.div`
+  display: flex;
+  gap: 5px;
+`;
+
+const StyledFormSubmit = styled(FormSubmit)`
+  margin-top: 30px;
+`;
+type Props = {
+  initialValues?: IndexSetFieldTypeProfile,
+  submitButtonText: string,
+  submitLoadingText: string,
+  onCancel: () => void,
+  onSubmit: (profile: IndexSetFieldTypeProfile) => void
+}
+
+const getFieldError = (field: string, occurrences: number) => {
+  if (!field) return 'Filed is required';
+  if (occurrences > 1) return 'This field occurs several times';
+
+  return undefined;
+};
+
+const validate = (formValues: IndexSetFieldTypeProfile) => {
+  const errors: { name?: string, customFieldMappings?: Array<{ field?: string, type?: string }>} = {};
+
+  if (!formValues.name) {
+    errors.name = 'Profile name is required';
+  }
+
+  const fieldsOccurrences = countBy(formValues.customFieldMappings, 'field');
+
+  const customFieldMappings: Array<{ field: string, type: string }> = formValues
+    .customFieldMappings
+    .map(({ field, type }) => {
+      if (field && type && (fieldsOccurrences[field] === 1)) return undefined;
+
+      return ({
+        field: getFieldError(field, fieldsOccurrences[field]),
+        type: !type ? 'Type is required' : undefined,
+      });
+    });
+
+  if (customFieldMappings.filter((item) => item).length > 0) {
+    errors.customFieldMappings = customFieldMappings;
+  }
+
+  return errors;
+};
+
+type ProfileFormSelectProps = {
+  onChange: (param: { target: { value: string, name: string } }) => void,
+  options: Array<{ value: string, label: string, disabled?: boolean }>,
+  error: string,
+  name: string,
+  value: string | undefined | null,
+  placeholder: string,
+  allowCreate: boolean,
+}
+
+const ProfileFormSelect = ({ onChange, options, error, name, value, placeholder, allowCreate }: ProfileFormSelectProps) => (
+  <SelectContainer>
+    <Input error={error} name={name} id={name}>
+      <Select options={options}
+              value={value}
+              inputId={name}
+              onChange={(newVal) => {
+                onChange({ target: { value: newVal, name } });
+              }}
+              inputProps={{ 'aria-label': `Select ${name}` }}
+              placeholder={placeholder}
+              allowCreate={allowCreate} />
+    </Input>
+  </SelectContainer>
+);
+
+const ProfileForm = ({ initialValues, submitButtonText, submitLoadingText, onCancel, onSubmit }: Props) => {
+  const { data, isLoading } = useFieldTypes(undefined, undefined);
+  const { data: { fieldTypes }, isLoading: isLoadingFieldTypes } = useFieldTypesForMapping();
+  const fieldTypeOptions = useMemo(() => Object.entries(fieldTypes)
+    .sort(([, label1], [, label2]) => defaultCompare(label1, label2))
+    .map(([value, label]) => ({
+      value,
+      label,
+    })), [fieldTypes]);
+  const fields = useMemo(() => (isLoading ? [] : data.map(({ value: { name } }) => ({ value: name, label: name }))), [data, isLoading]);
+
+  const _onSubmit = (profile: IndexSetFieldTypeProfile) => {
+    onSubmit(profile);
+  };
+
+  return (
+    <Col lg={8}>
+      <Formik<IndexSetFieldTypeProfile> initialValues={initialValues}
+                                        onSubmit={_onSubmit}
+                                        validate={validate}
+                                        validateOnChange>
+        {({ isSubmitting, isValid, isValidating, values: { customFieldMappings } }) => (
+          <Form>
+            <FormikInput name="name"
+                         label="Profile name"
+                         id="index-set-field-type-profile-name"
+                         placeholder="Type a profile name"
+                         help="A descriptive name of the new profile"
+                         required />
+            <FormikInput name="description"
+                         id="index-set-field-type-profile-description"
+                         placeholder="Type a profile description"
+                         label={<>Description <InputOptionalInfo /></>}
+                         type="textarea"
+                         help="Longer description for profile"
+                         rows={6} />
+            <FieldArray name="customFieldMappings"
+                        render={({ remove, push }) => (
+                          <>
+                            <StyledLabel>Set up mappings</StyledLabel>
+                            <HelpBlock>
+                              Here you can set up type mapping to any field.
+                            </HelpBlock>
+                            <List>
+                              {(isLoading || isLoadingFieldTypes) ? <Spinner /> : customFieldMappings.map((_, index) => (
+                                // eslint-disable-next-line react/no-array-index-key
+                                <Item key={index}>
+                                  <SelectGroup>
+                                    <Field name={`customFieldMappings.${index}.field`} required>
+                                      {({ field: { name, value, onChange }, meta: { error } }) => (
+                                        <ProfileFormSelect value={value}
+                                                           onChange={onChange}
+                                                           options={fields}
+                                                           name={name}
+                                                           error={error}
+                                                           placeholder="Select or type field name"
+                                                           allowCreate />
+                                      )}
+                                    </Field>
+                                    <Field name={`customFieldMappings.${index}.type`} required>
+                                      {({ field: { name, value, onChange }, meta: { error } }) => (
+                                        <ProfileFormSelect value={value}
+                                                           onChange={onChange}
+                                                           options={fieldTypeOptions}
+                                                           name={name}
+                                                           error={error}
+                                                           placeholder="Select field type"
+                                                           allowCreate={false} />
+                                      )}
+                                    </Field>
+                                  </SelectGroup>
+                                  {(customFieldMappings.length > 1) && <IconButton name="trash-alt" onClick={() => (remove(index))} title="Remove mapping" />}
+                                </Item>
+                              ))}
+                            </List>
+                            <Button bsSize="xs" onClick={() => push({})} name="plus" title="Add mapping">Add mapping</Button>
+                          </>
+                        )} />
+            <StyledFormSubmit submitButtonText={submitButtonText}
+                              onCancel={onCancel}
+                              disabledSubmit={isValidating || !isValid}
+                              isSubmitting={isSubmitting}
+                              submitLoadingText={submitLoadingText} />
+          </Form>
+        )}
+      </Formik>
+    </Col>
+  );
+};
+
+ProfileForm.defaultProps = {
+  initialValues: { name: '', description: '', customFieldMappings: [{ type: '', field: '' }] },
+};
+
+export default ProfileForm;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx
new file mode 100644
index 000000000000..758fd203f366
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.test.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { render, screen, fireEvent, within } from 'wrappedTestingLibrary';
+import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+
+import asMock from 'helpers/mocking/AsMock';
+import useUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUserLayoutPreferences';
+import { layoutPreferences } from 'fixtures/entityListLayoutPreferences';
+import TestStoreProvider from 'views/test/TestStoreProvider';
+import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
+import { profile1, attributes, profile2 } from 'fixtures/indexSetFieldTypeProfiles';
+import ProfilesList from 'components/indices/IndexSetFieldTypeProfiles/ProfilesList';
+import useProfiles from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles';
+
+const getData = (list = [profile1]) => (
+  {
+    list,
+    pagination: {
+      total: 1,
+    },
+    attributes,
+  }
+);
+
+const renderIndexSetFieldTypeProfilesList = () => render(
+  <QueryParamProvider adapter={ReactRouter6Adapter}>
+    <TestStoreProvider>
+      <ProfilesList />
+    </TestStoreProvider>,
+  </QueryParamProvider>,
+);
+
+jest.mock('routing/useParams', () => jest.fn());
+
+jest.mock('components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles', () => jest.fn());
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
+
+jest.mock('components/common/EntityDataTable/hooks/useUserLayoutPreferences');
+
+describe('IndexSetFieldTypesList', () => {
+  beforeAll(loadViewsPlugin);
+
+  afterAll(unloadViewsPlugin);
+
+  beforeEach(() => {
+    asMock(useUserLayoutPreferences).mockReturnValue({
+      data: {
+        ...layoutPreferences,
+        displayedAttributes: ['name',
+          'description',
+          'type',
+          'custom_field_mappings'],
+      },
+      isInitialLoading: false,
+    });
+
+    asMock(useFieldTypesForMappings).mockReturnValue({
+      data: {
+        fieldTypes: {
+          string: 'String type',
+          int: 'Number(int)',
+          bool: 'Boolean',
+          ip: 'IP',
+        },
+      },
+      isLoading: false,
+    });
+  });
+
+  it('Shows list of field type profiles with correct data', async () => {
+    asMock(useProfiles).mockReturnValue({
+      isLoading: false,
+      refetch: () => {},
+      data: getData([profile1, profile2]),
+    });
+
+    renderIndexSetFieldTypeProfilesList();
+    const tableRow1 = await screen.findByTestId('table-row-111');
+
+    await within(tableRow1).findByText('Profile 1');
+    await within(tableRow1).findByText('Description 1');
+    await within(tableRow1).findByText('2');
+    await within(tableRow1).findByText('Edit');
+
+    const tableRow2 = await screen.findByTestId('table-row-222');
+
+    await within(tableRow2).findByText('Profile 2');
+    await within(tableRow2).findByText('Description 2');
+    await within(tableRow2).findByText('3');
+    await within(tableRow2).findByText('Edit');
+  });
+
+  it('Shows list of Custom Field Mappings for profile', async () => {
+    asMock(useProfiles).mockReturnValue({
+      isLoading: false,
+      refetch: () => {},
+      data: getData([profile1, profile2]),
+    });
+
+    renderIndexSetFieldTypeProfilesList();
+
+    const tableRow2 = await screen.findByTestId('table-row-222');
+
+    const customFieldTypeMappingAmount = await within(tableRow2).findByText('3');
+
+    fireEvent.click(customFieldTypeMappingAmount);
+
+    expect(tableRow2.textContent).toContain('Custom Field Mappings');
+    expect(tableRow2.textContent).toContain('user_name:String type');
+    expect(tableRow2.textContent).toContain('logged_in:Boolean');
+    expect(tableRow2.textContent).toContain('sum:Number(int)');
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.tsx
new file mode 100644
index 000000000000..83bf7bd913e7
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/ProfilesList.tsx
@@ -0,0 +1,144 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useCallback, useMemo } from 'react';
+import { useQueryParam, StringParam } from 'use-query-params';
+
+import {
+  NoEntitiesExist,
+  PaginatedList, SearchForm,
+  Spinner,
+} from 'components/common';
+import EntityDataTable from 'components/common/EntityDataTable';
+import useTableLayout from 'components/common/EntityDataTable/hooks/useTableLayout';
+import type { Sort } from 'stores/PaginationTypes';
+import useUpdateUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUpdateUserLayoutPreferences';
+import EntityFilters from 'components/common/EntityFilters';
+import useUrlQueryFilters from 'components/common/EntityFilters/hooks/useUrlQueryFilters';
+import type { UrlQueryFilters } from 'components/common/EntityFilters/types';
+import usePaginationQueryParameter from 'hooks/usePaginationQueryParameter';
+import type {
+  IndexSetFieldTypeProfile,
+} from 'components/indices/IndexSetFieldTypeProfiles/types';
+import useProfiles
+  from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles';
+import useExpandedSectionsRenderer from 'components/indices/IndexSetFieldTypeProfiles/ExpandedSectionsRenderer';
+import customColumnRenderers from 'components/indices/IndexSetFieldTypeProfiles/helpers/customColumnRenderers';
+import profileActions from 'components/indices/IndexSetFieldTypeProfiles/helpers/profileActions';
+
+export const ENTITY_TABLE_ID = 'index-set-field-type-profiles';
+export const DEFAULT_LAYOUT = {
+  pageSize: 20,
+  sort: { attributeId: 'name', direction: 'asc' } as Sort,
+  displayedColumns: ['name', 'description', 'custom_field_mappings'],
+  columnsOrder: ['name', 'description', 'custom_field_mappings'],
+};
+
+const ProfilesList = () => {
+  const [urlQueryFilters, setUrlQueryFilters] = useUrlQueryFilters();
+  const [query, setQuery] = useQueryParam('query', StringParam);
+  const { layoutConfig, isInitialLoading: isLoadingLayoutPreferences } = useTableLayout({
+    entityTableId: ENTITY_TABLE_ID,
+    defaultPageSize: DEFAULT_LAYOUT.pageSize,
+    defaultDisplayedAttributes: DEFAULT_LAYOUT.displayedColumns,
+    defaultSort: DEFAULT_LAYOUT.sort,
+  });
+  const paginationQueryParameter = usePaginationQueryParameter(undefined, layoutConfig.pageSize, false);
+  const searchParams = useMemo(() => ({
+    query,
+    page: paginationQueryParameter.page,
+    pageSize: layoutConfig.pageSize,
+    sort: layoutConfig.sort,
+    filters: urlQueryFilters,
+  }), [paginationQueryParameter.page, layoutConfig.pageSize, layoutConfig.sort, query, urlQueryFilters]);
+  const { mutate: updateTableLayout } = useUpdateUserLayoutPreferences(ENTITY_TABLE_ID);
+
+  const onPageSizeChange = useCallback((newPageSize: number) => {
+    paginationQueryParameter.resetPage();
+    updateTableLayout({ perPage: newPageSize });
+  }, [paginationQueryParameter, updateTableLayout]);
+
+  const onSortChange = useCallback((newSort: Sort) => {
+    paginationQueryParameter.resetPage();
+    updateTableLayout({ sort: newSort });
+  }, [paginationQueryParameter, updateTableLayout]);
+
+  const onColumnsChange = useCallback((displayedAttributes: Array<string>) => {
+    updateTableLayout({ displayedAttributes });
+  }, [updateTableLayout]);
+  const {
+    isLoading,
+    data: { list, pagination, attributes },
+  } = useProfiles(
+    searchParams,
+    { enabled: !isLoadingLayoutPreferences },
+  );
+
+  const onSearch = useCallback((val: string) => {
+    paginationQueryParameter.resetPage();
+    setQuery(val);
+  }, [paginationQueryParameter, setQuery]);
+  const onSearchReset = useCallback(() => setQuery(''), [setQuery]);
+  const onChangeFilters = useCallback((newUrlQueryFilters: UrlQueryFilters) => {
+    paginationQueryParameter.resetPage();
+    setUrlQueryFilters(newUrlQueryFilters);
+  }, [paginationQueryParameter, setUrlQueryFilters]);
+
+  const expandedSectionsRenderer = useExpandedSectionsRenderer();
+
+  if (isLoadingLayoutPreferences || isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <PaginatedList totalItems={pagination?.total}
+                   pageSize={layoutConfig.pageSize}
+                   showPageSizeSelect={false}>
+      <div style={{ marginBottom: 5 }}>
+        <SearchForm onSearch={onSearch}
+                    onReset={onSearchReset}
+                    query={query}
+                    placeholder="Search for profile name...">
+          <EntityFilters attributes={attributes}
+                         urlQueryFilters={urlQueryFilters}
+                         setUrlQueryFilters={onChangeFilters} />
+        </SearchForm>
+      </div>
+      {pagination?.total === 0 && (
+        <NoEntitiesExist>
+          No field type profiles have been found.
+        </NoEntitiesExist>
+      )}
+      {!!list?.length && (
+        <EntityDataTable<IndexSetFieldTypeProfile> data={list}
+                                                   visibleColumns={layoutConfig.displayedAttributes}
+                                                   columnsOrder={DEFAULT_LAYOUT.columnsOrder}
+                                                   onColumnsChange={onColumnsChange}
+                                                   onSortChange={onSortChange}
+                                                   activeSort={layoutConfig.sort}
+                                                   pageSize={searchParams.pageSize}
+                                                   onPageSizeChange={onPageSizeChange}
+                                                   actionsCellWidth={120}
+                                                   columnRenderers={customColumnRenderers}
+                                                   columnDefinitions={attributes}
+                                                   expandedSectionsRenderer={expandedSectionsRenderer}
+                                                   rowActions={profileActions} />
+      )}
+    </PaginatedList>
+  );
+};
+
+export default ProfilesList;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/cells/CustomFieldMappingsCell.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/cells/CustomFieldMappingsCell.tsx
new file mode 100644
index 000000000000..58ecb2a940a2
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/cells/CustomFieldMappingsCell.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+import { styled } from 'styled-components';
+
+import type { CustomFieldMapping, IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections';
+import { CountBadge } from 'components/common';
+
+const StyledCountBadge = styled(CountBadge)`
+  cursor: pointer;
+`;
+
+const CustomFieldMappingsCell = ({ customFieldTypes, profile }: { customFieldTypes : Array<CustomFieldMapping>, profile: IndexSetFieldTypeProfile }) => {
+  const { toggleSection } = useExpandedSections();
+
+  return (
+    <StyledCountBadge onClick={() => toggleSection(profile.id, 'customFieldMapping')}>{customFieldTypes.length}</StyledCountBadge>
+  );
+};
+
+export default CustomFieldMappingsCell;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/helpers/customColumnRenderers.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/helpers/customColumnRenderers.tsx
new file mode 100644
index 000000000000..d958d907fad2
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/helpers/customColumnRenderers.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+
+import type { CustomFieldMapping, IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import CustomFieldMappingsCell from 'components/indices/IndexSetFieldTypeProfiles/cells/CustomFieldMappingsCell';
+
+const customColumnRenderers = ({
+  attributes: {
+    custom_field_mappings: {
+      renderCell: (customFieldTypes: Array<CustomFieldMapping>, profile: IndexSetFieldTypeProfile) => (
+        <CustomFieldMappingsCell profile={profile}
+                                 customFieldTypes={customFieldTypes} />
+      ),
+      staticWidth: 200,
+    },
+  },
+});
+
+export default customColumnRenderers;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/helpers/profileActions.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/helpers/profileActions.tsx
new file mode 100644
index 000000000000..920bf23f98fa
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/helpers/profileActions.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React from 'react';
+
+import type { IndexSetFieldTypeProfile } from 'components/indices/IndexSetFieldTypeProfiles/types';
+import ProfileActions from 'components/indices/IndexSetFieldTypeProfiles/ProfileActions';
+
+const profileActions = ({ id }: IndexSetFieldTypeProfile) => <ProfileActions profileId={id} />;
+
+export default profileActions;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfile.test.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfile.test.ts
new file mode 100644
index 000000000000..3acb68a69189
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfile.test.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import { renderHook } from 'wrappedTestingLibrary/hooks';
+
+import asMock from 'helpers/mocking/AsMock';
+import UserNotification from 'util/UserNotification';
+import suppressConsole from 'helpers/suppressConsole';
+import useProfile from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfile';
+import fetch from 'logic/rest/FetchProvider';
+import { qualifyUrl } from 'util/URLUtils';
+import { profile1JSON, profile1 } from 'fixtures/indexSetFieldTypeProfiles';
+
+const mockData = profile1JSON;
+
+const expectedState = profile1;
+jest.mock('util/UserNotification', () => ({ error: jest.fn() }));
+jest.mock('logic/rest/FetchProvider', () => jest.fn(() => Promise.resolve()));
+
+jest.mock('@graylog/server-api', () => ({
+  SystemFieldTypes: {
+    getAllFieldTypes: jest.fn(() => Promise.resolve()),
+  },
+}));
+
+const renderUseProfilesHook = () => renderHook(() => useProfile('111'));
+
+describe('useProfiles custom hook', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Test return initial data and take from fetch', async () => {
+    asMock(fetch).mockImplementation(() => Promise.resolve(mockData));
+    const { result, waitFor } = renderUseProfilesHook();
+
+    await waitFor(() => !result.current.isFetched);
+    await waitFor(() => result.current.isFetched);
+
+    expect(fetch).toHaveBeenCalledWith('GET', qualifyUrl('/system/indices/index_sets/profiles/111'));
+
+    expect(result.current.data).toEqual(expectedState);
+  });
+
+  it('Test trigger notification on fail', async () => {
+    asMock(fetch).mockImplementation(() => Promise.reject(new Error('Error')));
+
+    const { result, waitFor } = renderUseProfilesHook();
+
+    await suppressConsole(async () => {
+      await waitFor(() => !result.current.isFetched);
+      await waitFor(() => result.current.isFetched);
+    });
+
+    expect(UserNotification.error).toHaveBeenCalledWith(
+      'Loading index field type profile failed with status: Error: Error',
+      'Could not load index field type profile');
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfile.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfile.ts
new file mode 100644
index 000000000000..83e4f365e59f
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfile.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { useQuery } from '@tanstack/react-query';
+
+import UserNotification from 'util/UserNotification';
+import fetch from 'logic/rest/FetchProvider';
+import { qualifyUrl } from 'util/URLUtils';
+import type {
+  IndexSetFieldTypeProfileJson,
+  IndexSetFieldTypeProfile,
+} from 'components/indices/IndexSetFieldTypeProfiles/types';
+
+const INITIAL_DATA = null;
+
+const fetchIndexSetFieldTypeProfile = async (id: string) => {
+  const url = qualifyUrl(`/system/indices/index_sets/profiles/${id}`);
+
+  return fetch('GET', url).then((profile: IndexSetFieldTypeProfileJson) => ({
+    id: profile.id,
+    name: profile.name,
+    description: profile.description,
+    customFieldMappings: profile.custom_field_mappings,
+  }));
+};
+
+const useProfile = (id: string): {
+  data: IndexSetFieldTypeProfile,
+  isFetched: boolean,
+  refetch: () => void,
+} => {
+  const { data, isFetched, refetch } = useQuery(
+    ['indexSetFieldTypeProfile', id],
+    () => fetchIndexSetFieldTypeProfile(id),
+    {
+      onError: (errorThrown) => {
+        UserNotification.error(`Loading index field type profile failed with status: ${errorThrown}`,
+          'Could not load index field type profile');
+      },
+      keepPreviousData: true,
+      enabled: !!id,
+    },
+  );
+
+  return ({
+    data: data ?? INITIAL_DATA,
+    isFetched,
+    refetch,
+  });
+};
+
+export default useProfile;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations.test.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations.test.ts
new file mode 100644
index 000000000000..9cd8e9dbd8a7
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations.test.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { renderHook, act } from 'wrappedTestingLibrary/hooks';
+import omit from 'lodash/omit';
+
+import asMock from 'helpers/mocking/AsMock';
+import fetch from 'logic/rest/FetchProvider';
+import UserNotification from 'util/UserNotification';
+import { qualifyUrl } from 'util/URLUtils';
+import useProfileMutations from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations';
+import { profile1JSON, profile1 } from 'fixtures/indexSetFieldTypeProfiles';
+
+const urlPrefix = '/system/indices/index_sets/profiles';
+
+const logger = {
+  // eslint-disable-next-line no-console
+  log: console.log,
+  // eslint-disable-next-line no-console
+  warn: console.warn,
+  error: () => {},
+};
+jest.mock('logic/rest/FetchProvider', () => jest.fn(() => Promise.resolve()));
+
+jest.mock('util/UserNotification', () => ({
+  error: jest.fn(),
+  success: jest.fn(),
+}));
+
+describe('useProfileMutations', () => {
+  describe('editProfile', () => {
+    const putUrl = qualifyUrl(`${urlPrefix}`);
+    const requestBody = profile1;
+
+    const requestBodyJSON = profile1JSON;
+
+    it('should run fetch and display UserNotification', async () => {
+      asMock(fetch).mockImplementation(() => Promise.resolve({}));
+
+      const { result, waitFor } = renderHook(() => useProfileMutations(), { queryClientOptions: { logger } });
+
+      act(() => {
+        result.current.editProfile(requestBody);
+      });
+
+      await waitFor(() => expect(fetch).toHaveBeenCalledWith('PUT', putUrl, requestBodyJSON));
+
+      await waitFor(() => expect(UserNotification.success).toHaveBeenCalledWith('Index set field type profile has been successfully updated.', 'Success!'));
+    });
+
+    it('should display notification on fail', async () => {
+      asMock(fetch).mockImplementation(() => Promise.reject(new Error('Error')));
+
+      const { result, waitFor } = renderHook(() => useProfileMutations(), { queryClientOptions: { logger } });
+
+      act(() => {
+        result.current.editProfile(requestBody).catch(() => {});
+      });
+
+      await waitFor(() => expect(UserNotification.error).toHaveBeenCalledWith(
+        'Updating index set field type profile failed with status: Error: Error',
+        'Could not update index set field type profile'));
+    });
+  });
+
+  describe('createProfile', () => {
+    const postUrl = qualifyUrl(`${urlPrefix}`);
+    const requestBody = profile1;
+
+    const requestBodyJSON = omit(profile1JSON, ['id']);
+
+    it('should run fetch and display UserNotification', async () => {
+      asMock(fetch).mockImplementation(() => Promise.resolve({}));
+
+      const { result, waitFor } = renderHook(() => useProfileMutations(), { queryClientOptions: { logger } });
+
+      act(() => {
+        result.current.createProfile(requestBody);
+      });
+
+      await waitFor(() => expect(fetch).toHaveBeenCalledWith('POST', postUrl, requestBodyJSON));
+
+      await waitFor(() => expect(UserNotification.success).toHaveBeenCalledWith('Index set field type profile has been successfully created.', 'Success!'));
+    });
+
+    it('should display notification on fail', async () => {
+      asMock(fetch).mockImplementation(() => Promise.reject(new Error('Error')));
+
+      const { result, waitFor } = renderHook(() => useProfileMutations(), { queryClientOptions: { logger } });
+
+      act(() => {
+        result.current.createProfile(requestBody).catch(() => {});
+      });
+
+      await waitFor(() => expect(UserNotification.error).toHaveBeenCalledWith(
+        'Creating index set field type profile failed with status: Error: Error',
+        'Could not create index set field type profile'));
+    });
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations.ts
new file mode 100644
index 000000000000..876d1ee7b7bb
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfileMutations.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { qualifyUrl } from 'util/URLUtils';
+import fetch from 'logic/rest/FetchProvider';
+import UserNotification from 'util/UserNotification';
+import type {
+  IndexSetFieldTypeProfile,
+  IndexSetFieldTypeProfileJson,
+} from 'components/indices/IndexSetFieldTypeProfiles/types';
+
+export const urlPrefix = '/system/indices/index_sets/profiles';
+
+const putProfile = async (profile: IndexSetFieldTypeProfile) => {
+  const url = qualifyUrl(urlPrefix);
+  const body: IndexSetFieldTypeProfileJson = {
+    id: profile.id,
+    name: profile.name,
+    description: profile.description,
+    custom_field_mappings: profile.customFieldMappings,
+  };
+
+  return fetch('PUT', url, body);
+};
+
+const postProfile = async (profile: IndexSetFieldTypeProfile) => {
+  const url = qualifyUrl(urlPrefix);
+  const body: IndexSetFieldTypeProfileJson = {
+    name: profile.name,
+    description: profile.description,
+    custom_field_mappings: profile.customFieldMappings,
+  };
+
+  return fetch('POST', url, body);
+};
+
+const useProfileMutation = () => {
+  const queryClient = useQueryClient();
+
+  const post = useMutation(postProfile, {
+    onError: (errorThrown) => {
+      UserNotification.error(`Creating index set field type profile failed with status: ${errorThrown}`,
+        'Could not create index set field type profile');
+    },
+    onSuccess: () => {
+      UserNotification.success('Index set field type profile has been successfully created.', 'Success!');
+
+      return queryClient.refetchQueries({ queryKey: ['indexSetFieldTypeProfiles'], type: 'active' });
+    },
+  });
+  const put = useMutation(putProfile, {
+    onError: (errorThrown) => {
+      UserNotification.error(`Updating index set field type profile failed with status: ${errorThrown}`,
+        'Could not update index set field type profile');
+    },
+    onSuccess: () => {
+      UserNotification.success('Index set field type profile has been successfully updated.', 'Success!');
+
+      return queryClient.refetchQueries({ queryKey: ['indexSetFieldTypeProfiles'], type: 'active' });
+    },
+  });
+
+  return ({
+    editProfile: put.mutateAsync,
+    isEditLoading: put.isLoading,
+    createProfile: post.mutateAsync,
+    isCreateLoading: post.isLoading,
+    isLoading: post.mutateAsync || post.isLoading,
+  });
+};
+
+export default useProfileMutation;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.test.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.test.ts
new file mode 100644
index 000000000000..ff8a780e503b
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.test.ts
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+import { renderHook } from 'wrappedTestingLibrary/hooks';
+
+import asMock from 'helpers/mocking/AsMock';
+import UserNotification from 'util/UserNotification';
+import suppressConsole from 'helpers/suppressConsole';
+import useProfiles from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles';
+import fetch from 'logic/rest/FetchProvider';
+import { qualifyUrl } from 'util/URLUtils';
+import { profile1JSON, profile2JSON, profile1, profile2 } from 'fixtures/indexSetFieldTypeProfiles';
+
+const mockData = {
+  attributes: [],
+  query: '',
+  pagination: {
+    total: 1,
+    count: 1,
+    page: 1,
+    per_page: 10,
+  },
+  defaults: {
+    sort: {
+      id: 'name',
+      direction: 'ASC',
+    } as { id: string, direction: 'ASC' | 'DESC'},
+  },
+  total: 1,
+  sort: 'name',
+  order: 'desc',
+  elements: [profile1JSON, profile2JSON],
+};
+
+const expectedState = {
+  attributes: [],
+  list: [profile1, profile2],
+  pagination: {
+    total: 1,
+  },
+};
+jest.mock('util/UserNotification', () => ({ error: jest.fn() }));
+jest.mock('logic/rest/FetchProvider', () => jest.fn(() => Promise.resolve()));
+
+jest.mock('@graylog/server-api', () => ({
+  SystemFieldTypes: {
+    getAllFieldTypes: jest.fn(() => Promise.resolve()),
+  },
+}));
+
+const renderUseProfilesHook = () => renderHook(() => useProfiles({ page: 1, query: '', pageSize: 10, sort: { attributeId: 'name', direction: 'asc' } }, { enabled: true }));
+
+describe('useProfiles custom hook', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Test return initial data and take from fetch', async () => {
+    asMock(fetch).mockImplementation(() => Promise.resolve(mockData));
+    const { result, waitFor } = renderUseProfilesHook();
+
+    await waitFor(() => result.current.isLoading);
+    await waitFor(() => !result.current.isLoading);
+
+    expect(fetch).toHaveBeenCalledWith('GET', qualifyUrl('/system/indices/index_sets/profiles/paginated?page=1&per_page=10&sort=name&order=asc'));
+
+    expect(result.current.data).toEqual(expectedState);
+  });
+
+  it('Test trigger notification on fail', async () => {
+    asMock(fetch).mockImplementation(() => Promise.reject(new Error('Error')));
+
+    const { result, waitFor } = renderUseProfilesHook();
+
+    await suppressConsole(async () => {
+      await waitFor(() => result.current.isLoading);
+      await waitFor(() => !result.current.isLoading);
+    });
+
+    expect(UserNotification.error).toHaveBeenCalledWith(
+      'Loading index field type profiles failed with status: Error: Error',
+      'Could not load index field type profiles');
+  });
+});
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.ts
new file mode 100644
index 000000000000..7990e1606cbe
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/hooks/useProfiles.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import { useQuery } from '@tanstack/react-query';
+
+import UserNotification from 'util/UserNotification';
+import fetch from 'logic/rest/FetchProvider';
+import { qualifyUrl } from 'util/URLUtils';
+import type { Attribute, SearchParams } from 'stores/PaginationTypes';
+import PaginationURL from 'util/PaginationURL';
+import FiltersForQueryParams from 'components/common/EntityFilters/FiltersForQueryParams';
+import type {
+  IndexSetFieldTypeProfileJson,
+  IndexSetFieldTypeProfile,
+} from 'components/indices/IndexSetFieldTypeProfiles/types';
+
+const INITIAL_DATA = {
+  pagination: { total: 0 },
+  list: [],
+  attributes: [],
+};
+
+const fetchIndexSetFieldTypeProfiles = async (searchParams: SearchParams) => {
+  const indexSetFieldTypeUrl = qualifyUrl('/system/indices/index_sets/profiles/paginated');
+  const url = PaginationURL(
+    indexSetFieldTypeUrl,
+    searchParams.page,
+    searchParams.pageSize,
+    searchParams.query,
+    { filters: FiltersForQueryParams(searchParams.filters), sort: searchParams.sort.attributeId, order: searchParams.sort.direction });
+
+  return fetch('GET', url).then(
+    ({ elements, total, attributes }) => ({
+      list: elements.map((profile: IndexSetFieldTypeProfileJson) => ({
+        id: profile.id,
+        name: profile.name,
+        description: profile.description,
+        customFieldMappings: profile.custom_field_mappings,
+      })),
+      pagination: { total },
+      attributes,
+    }));
+};
+
+const useProfiles = (searchParams: SearchParams, { enabled }): {
+  data: {
+    list: Readonly<Array<IndexSetFieldTypeProfile>>,
+    pagination: { total: number },
+    attributes: Array<Attribute>
+  },
+  isLoading: boolean,
+  refetch: () => void,
+} => {
+  const { data, isLoading, refetch } = useQuery(
+    ['indexSetFieldTypeProfiles', searchParams],
+    () => fetchIndexSetFieldTypeProfiles(searchParams),
+    {
+      onError: (errorThrown) => {
+        UserNotification.error(`Loading index field type profiles failed with status: ${errorThrown}`,
+          'Could not load index field type profiles');
+      },
+      keepPreviousData: true,
+      enabled,
+    },
+  );
+
+  return ({
+    data: data ?? INITIAL_DATA,
+    isLoading,
+    refetch,
+  });
+};
+
+export default useProfiles;
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/types.ts b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/types.ts
new file mode 100644
index 000000000000..16b92c0511fe
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypeProfiles/types.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+export type CustomFieldMapping = {
+  field: string,
+  type: string,
+}
+export type IndexSetFieldTypeProfileJson = {
+  id?: string,
+  name: string,
+  description: string,
+  custom_field_mappings: Array<CustomFieldMapping>,
+}
+
+export type IndexSetFieldTypeProfile = {
+  id: string,
+  name: string,
+  description: string,
+  customFieldMappings: Array<CustomFieldMapping>,
+}
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx
index 67a5b3882cb2..80f113ceb1b2 100644
--- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.test.tsx
@@ -28,7 +28,7 @@ import { layoutPreferences } from 'fixtures/entityListLayoutPreferences';
 import TestStoreProvider from 'views/test/TestStoreProvider';
 import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
 import IndexSetFieldTypesList from 'components/indices/IndexSetFieldTypes/IndexSetFieldTypesList';
-import useFieldTypes from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 import { customField, defaultField, reservedField, attributes } from 'fixtures/indexSetFieldTypes';
 
 const getData = (list = [defaultField]) => (
@@ -61,7 +61,7 @@ jest.mock('stores/indices/IndexSetsStore', () => ({
 }));
 
 jest.mock('routing/useParams', () => jest.fn());
-jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes', () => jest.fn());
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
 jest.mock('components/indices/IndexSetFieldTypes/hooks/useIndexSetFieldType', () => jest.fn());
 
 jest.mock('components/common/EntityDataTable/hooks/useUserLayoutPreferences');
@@ -92,7 +92,7 @@ describe('IndexSetFieldTypesList', () => {
       isInitialLoading: false,
     });
 
-    asMock(useFieldTypes).mockReturnValue({
+    asMock(useFieldTypesForMappings).mockReturnValue({
       data: {
         fieldTypes: {
           string: 'String type',
diff --git a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.tsx b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.tsx
index 0b4a71ff4ffb..3b02c47aafce 100644
--- a/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.tsx
+++ b/graylog2-web-interface/src/components/indices/IndexSetFieldTypes/IndexSetFieldTypesList.tsx
@@ -31,7 +31,7 @@ import EntityDataTable from 'components/common/EntityDataTable';
 import useTableLayout from 'components/common/EntityDataTable/hooks/useTableLayout';
 import type { Sort } from 'stores/PaginationTypes';
 import useUpdateUserLayoutPreferences from 'components/common/EntityDataTable/hooks/useUpdateUserLayoutPreferences';
-import useFieldTypes from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 import EntityFilters from 'components/common/EntityFilters';
 import useUrlQueryFilters from 'components/common/EntityFilters/hooks/useUrlQueryFilters';
 import type { UrlQueryFilters } from 'components/common/EntityFilters/types';
@@ -72,7 +72,7 @@ const IndexSetFieldTypesList = () => {
   const { indexSetId } = useParams();
   const [urlQueryFilters, setUrlQueryFilters] = useUrlQueryFilters();
   const [query, setQuery] = useQueryParam('query', StringParam);
-  const { data: { fieldTypes } } = useFieldTypes();
+  const { data: { fieldTypes } } = useFieldTypesForMappings();
   const { layoutConfig, isInitialLoading: isLoadingLayoutPreferences } = useTableLayout({
     entityTableId: ENTITY_TABLE_ID,
     defaultPageSize: DEFAULT_LAYOUT.pageSize,
diff --git a/graylog2-web-interface/src/components/indices/IndicesConfigurationDropdown.tsx b/graylog2-web-interface/src/components/indices/IndicesConfigurationDropdown.tsx
new file mode 100644
index 000000000000..db19cfd19f95
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndicesConfigurationDropdown.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useCallback } from 'react';
+
+import useHistory from 'routing/useHistory';
+import { ButtonGroup, DropdownButton, MenuItem } from 'components/bootstrap';
+import Routes from 'routing/Routes';
+import useHasTypeMappingPermission from 'hooks/useHasTypeMappingPermission';
+
+const IndicesConfigurationDropdown = ({ indexSetId }: { indexSetId: string }) => {
+  const hasMappingPermission = useHasTypeMappingPermission();
+  const history = useHistory();
+  const onShowFieldTypes = useCallback(() => {
+    history.push(Routes.SYSTEM.INDEX_SETS.FIELD_TYPES(indexSetId));
+  }, [history, indexSetId]);
+
+  if (!hasMappingPermission) return null;
+
+  return (
+    <ButtonGroup>
+      <DropdownButton bsStyle="info" title="Configuration" id="indices-configuration-actions" pullRight>
+        {hasMappingPermission && <MenuItem onClick={onShowFieldTypes}>Configure index field types</MenuItem>}
+      </DropdownButton>
+    </ButtonGroup>
+  );
+};
+
+export default IndicesConfigurationDropdown;
diff --git a/graylog2-web-interface/src/components/indices/IndicesMaintenanceDropdown.tsx b/graylog2-web-interface/src/components/indices/IndicesMaintenanceDropdown.tsx
index e1792d32f4c6..1df851fa4b66 100644
--- a/graylog2-web-interface/src/components/indices/IndicesMaintenanceDropdown.tsx
+++ b/graylog2-web-interface/src/components/indices/IndicesMaintenanceDropdown.tsx
@@ -22,9 +22,6 @@ import { ButtonGroup, DropdownButton, MenuItem } from 'components/bootstrap';
 import { DeflectorActions } from 'stores/indices/DeflectorStore';
 import { IndexRangesActions } from 'stores/indices/IndexRangesStore';
 import type { IndexSet } from 'stores/indices/IndexSetsStore';
-import useHistory from 'routing/useHistory';
-import Routes from 'routing/Routes';
-import useCurrentUser from 'hooks/useCurrentUser';
 
 const _onRecalculateIndexRange = (indexSetId: string) => {
   // eslint-disable-next-line no-alert
@@ -48,22 +45,14 @@ type Props = {
 };
 
 const IndicesMaintenanceDropdown = ({ indexSet, indexSetId }: Props) => {
-  const currentUser = useCurrentUser();
-  const history = useHistory();
   const onCycleDeflector = useCallback(() => _onCycleDeflector(indexSetId), [indexSetId]);
   const onRecalculateIndexRange = useCallback(() => _onRecalculateIndexRange(indexSetId), [indexSetId]);
   const cycleButton = useMemo(() => (indexSet?.writable ? <MenuItem eventKey="2" onClick={onCycleDeflector}>Rotate active write index</MenuItem> : null), [indexSet?.writable, onCycleDeflector]);
-  const onShowFieldTypes = useCallback(() => {
-    history.push(Routes.SYSTEM.INDEX_SETS.FIELD_TYPES(indexSetId));
-  }, [history, indexSetId]);
-
-  const hasMappingPermission = currentUser.permissions.includes('typemappings:edit') || currentUser.permissions.includes('*');
 
   return (
     <ButtonGroup>
       <DropdownButton bsStyle="info" title="Maintenance" id="indices-maintenance-actions" pullRight>
         <MenuItem eventKey="1" onClick={onRecalculateIndexRange}>Recalculate index ranges</MenuItem>
-        {hasMappingPermission && <MenuItem eventKey="1" onClick={onShowFieldTypes}>Show index field types</MenuItem>}
         {cycleButton}
       </DropdownButton>
     </ButtonGroup>
diff --git a/graylog2-web-interface/src/components/indices/IndicesPageNavigation.tsx b/graylog2-web-interface/src/components/indices/IndicesPageNavigation.tsx
new file mode 100644
index 000000000000..3cd8c44a7998
--- /dev/null
+++ b/graylog2-web-interface/src/components/indices/IndicesPageNavigation.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+
+import PageNavigation from 'components/common/PageNavigation';
+import Routes from 'routing/Routes';
+import { Row } from 'components/bootstrap';
+
+const NAV_ITEMS = [
+  { title: 'Indices & Index Sets', path: Routes.SYSTEM.INDICES.LIST, exactPathMatch: true },
+  { title: 'Field Type Profiles', path: Routes.SYSTEM.INDICES.FIELD_TYPE_PROFILES.OVERVIEW, exactPathMatch: false },
+];
+
+const IndicesPageNavigation = () => (
+  <Row>
+    <PageNavigation items={NAV_ITEMS} />
+  </Row>
+);
+
+export default IndicesPageNavigation;
diff --git a/graylog2-web-interface/src/components/indices/index.tsx b/graylog2-web-interface/src/components/indices/index.tsx
index 5d78921372f3..2bd0116d28be 100644
--- a/graylog2-web-interface/src/components/indices/index.tsx
+++ b/graylog2-web-interface/src/components/indices/index.tsx
@@ -17,6 +17,7 @@
 export { default as ClosedIndexDetails } from './ClosedIndexDetails';
 export { default as IndexDetails } from './IndexDetails';
 export { default as IndexRangeSummary } from './IndexRangeSummary';
+export { default as IndicesConfigurationDropdown } from './IndicesConfigurationDropdown';
 export { default as IndexSetConfigurationForm } from './IndexSetConfigurationForm';
 export { default as IndexSetDeletionForm } from './IndexSetDeletionForm';
 export { default as IndexSetDetails } from './IndexSetDetails';
@@ -26,6 +27,7 @@ export { default as IndexSizeSummary } from './IndexSizeSummary';
 export { default as IndicesMaintenanceDropdown } from './IndicesMaintenanceDropdown';
 export { default as IndicesOverview } from './IndicesOverview';
 export { default as IndicesConfiguration } from './IndicesConfiguration';
+export { default as IndicesPageNavigation } from './IndicesPageNavigation';
 export { default as ShardMeter } from './ShardMeter';
 export { default as ShardRouting } from './ShardRouting';
 export { default as ShardRoutingOverview } from './ShardRoutingOverview';
diff --git a/graylog2-web-interface/src/hooks/useHasTypeMappingPermission.ts b/graylog2-web-interface/src/hooks/useHasTypeMappingPermission.ts
new file mode 100644
index 000000000000..fae0275e2bcf
--- /dev/null
+++ b/graylog2-web-interface/src/hooks/useHasTypeMappingPermission.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import useCurrentUser from 'hooks/useCurrentUser';
+import { isPermitted } from 'util/PermissionsMixin';
+
+const useHasTypeMappingPermission = () => {
+  const currentUser = useCurrentUser();
+
+  return isPermitted(currentUser.permissions, 'typemappings:edit');
+};
+
+export default useHasTypeMappingPermission;
diff --git a/graylog2-web-interface/src/logic/telemetry/Constants.ts b/graylog2-web-interface/src/logic/telemetry/Constants.ts
index 136cddb3d825..21884fb3019b 100644
--- a/graylog2-web-interface/src/logic/telemetry/Constants.ts
+++ b/graylog2-web-interface/src/logic/telemetry/Constants.ts
@@ -460,6 +460,14 @@ export const TELEMETRY_EVENT_TYPE = {
     UNASSIGNED: 'Team Unassigned',
     DELETED: 'Team Deleted',
   },
+  INDEX_SET_FIELD_TYPE_PROFILE: {
+    NEW_OPENED: 'Index Set Field Type Profile Creating New Opened',
+    NEW_CANCELED: 'Index Set Field Type Profile Creating New Canceled',
+    CREATED: 'Index Set Field Type Profile Created',
+    EDIT_OPENED: 'Index Set Field Type Profile Edit Opened',
+    EDIT_CANCELED: 'Index Set Field Type Profile Edit Canceled',
+    EDIT: 'Index Set Field Type Profile Edited',
+  },
 } as const;
 
 type ExtractObjectValues<T extends object> = {
diff --git a/graylog2-web-interface/src/pages/IndexSetConfigurationPage.tsx b/graylog2-web-interface/src/pages/IndexSetConfigurationPage.tsx
index 44704e07da14..4966b751194c 100644
--- a/graylog2-web-interface/src/pages/IndexSetConfigurationPage.tsx
+++ b/graylog2-web-interface/src/pages/IndexSetConfigurationPage.tsx
@@ -17,10 +17,9 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 
-import { LinkContainer } from 'components/common/router';
-import { Row, Col, Button } from 'components/bootstrap';
+import { Row, Col } from 'components/bootstrap';
 import { DocumentTitle, PageHeader, Spinner } from 'components/common';
-import { IndexSetConfigurationForm } from 'components/indices';
+import { IndexSetConfigurationForm, IndicesPageNavigation } from 'components/indices';
 import { useStore } from 'stores/connect';
 import DocsHelper from 'util/DocsHelper';
 import Routes from 'routing/Routes';
@@ -81,17 +80,13 @@ const IndexSetConfigurationPage = () => {
 
   return (
     <DocumentTitle title="Configure Index Set">
+      <IndicesPageNavigation />
       <div>
         <PageHeader title="Configure Index Set"
                     documentationLink={{
                       title: 'Index model documentation',
                       path: DocsHelper.PAGES.INDEX_MODEL,
-                    }}
-                    topActions={(
-                      <LinkContainer to={Routes.SYSTEM.INDICES.LIST}>
-                        <Button bsStyle="info">Index sets overview</Button>
-                      </LinkContainer>
-                    )}>
+                    }}>
           <span>
             Modify the current configuration for this index set, allowing you to customize the retention, sharding,
             and replication of messages coming from one or more streams.
diff --git a/graylog2-web-interface/src/pages/IndexSetCreationPage.tsx b/graylog2-web-interface/src/pages/IndexSetCreationPage.tsx
index 12d8671fb1a0..10327ca58fa9 100644
--- a/graylog2-web-interface/src/pages/IndexSetCreationPage.tsx
+++ b/graylog2-web-interface/src/pages/IndexSetCreationPage.tsx
@@ -18,10 +18,9 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 
-import { LinkContainer } from 'components/common/router';
-import { Row, Col, Button } from 'components/bootstrap';
+import { Row, Col } from 'components/bootstrap';
 import { DocumentTitle, PageHeader, Spinner } from 'components/common';
-import { IndexSetConfigurationForm } from 'components/indices';
+import { IndexSetConfigurationForm, IndicesPageNavigation } from 'components/indices';
 import DocsHelper from 'util/DocsHelper';
 import Routes from 'routing/Routes';
 import connect from 'stores/connect';
@@ -100,17 +99,13 @@ const IndexSetCreationPage = ({ retentionStrategies, rotationStrategies, retenti
 
   return (
     <DocumentTitle title="Create Index Set">
+      <IndicesPageNavigation />
       <div>
         <PageHeader title="Create Index Set"
                     documentationLink={{
                       title: 'Index model documentation',
                       path: DocsHelper.PAGES.INDEX_MODEL,
-                    }}
-                    topActions={(
-                      <LinkContainer to={Routes.SYSTEM.INDICES.LIST}>
-                        <Button bsStyle="info">Index sets overview</Button>
-                      </LinkContainer>
-                    )}>
+                    }}>
           <span>
             Create a new index set that will let you configure the retention, sharding, and replication of messages
             coming from one or more streams.
diff --git a/graylog2-web-interface/src/pages/IndexSetFieldTypeProfileCreatePage.tsx b/graylog2-web-interface/src/pages/IndexSetFieldTypeProfileCreatePage.tsx
new file mode 100644
index 000000000000..5dd90c5d1aec
--- /dev/null
+++ b/graylog2-web-interface/src/pages/IndexSetFieldTypeProfileCreatePage.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { DocumentTitle, PageHeader } from 'components/common';
+import DocsHelper from 'util/DocsHelper';
+import Routes from 'routing/Routes';
+import { Col, Row } from 'components/bootstrap';
+import CreateProfile from 'components/indices/IndexSetFieldTypeProfiles/CreateProfile';
+import useHasTypeMappingPermission from 'hooks/useHasTypeMappingPermission';
+import { IndicesPageNavigation } from 'components/indices';
+
+const IndexSetFieldTypeProfileCreatePage = () => {
+  const navigate = useNavigate();
+  const hasMappingPermission = useHasTypeMappingPermission();
+
+  useEffect(() => {
+    if (!hasMappingPermission) {
+      navigate(Routes.NOTFOUND);
+    }
+  }, [hasMappingPermission, navigate]);
+
+  return (
+    <DocumentTitle title="Create Index Set Field Type Profile">
+      <IndicesPageNavigation />
+      <PageHeader title="Create Index Set Field Type Profile"
+                  documentationLink={{
+                    title: 'Index model documentation',
+                    path: DocsHelper.PAGES.INDEX_MODEL,
+                  }}>
+        <span>
+          With index set field type profiles you can bundle up custom field types into profiles.
+          Then you can assign this profile to any index set.
+          On this page you can create a new profile.
+        </span>
+      </PageHeader>
+      <Row className="content">
+        <Col md={12}>
+          <CreateProfile />
+        </Col>
+      </Row>
+    </DocumentTitle>
+  );
+};
+
+export default IndexSetFieldTypeProfileCreatePage;
diff --git a/graylog2-web-interface/src/pages/IndexSetFieldTypeProfileEditPage.tsx b/graylog2-web-interface/src/pages/IndexSetFieldTypeProfileEditPage.tsx
new file mode 100644
index 000000000000..5985e6a4fce1
--- /dev/null
+++ b/graylog2-web-interface/src/pages/IndexSetFieldTypeProfileEditPage.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { DocumentTitle, PageHeader, Spinner } from 'components/common';
+import DocsHelper from 'util/DocsHelper';
+import Routes from 'routing/Routes';
+import { Col, Row } from 'components/bootstrap';
+import useProfile from 'components/indices/IndexSetFieldTypeProfiles/hooks/useProfile';
+import useParams from 'routing/useParams';
+import EditProfile from 'components/indices/IndexSetFieldTypeProfiles/EditProfile';
+import useHasTypeMappingPermission from 'hooks/useHasTypeMappingPermission';
+import { IndicesPageNavigation } from 'components/indices';
+
+const IndexSetFieldTypeProfileEditPage = () => {
+  const { profileId } = useParams();
+  const { data, isFetched } = useProfile(profileId);
+  const navigate = useNavigate();
+  const hasMappingPermission = useHasTypeMappingPermission();
+
+  useEffect(() => {
+    if (!hasMappingPermission) {
+      navigate(Routes.NOTFOUND);
+    }
+  }, [hasMappingPermission, navigate]);
+
+  return (
+    <DocumentTitle title="Edit Index Set Field Type Profile">
+      <IndicesPageNavigation />
+      <PageHeader title={`Edit  "${data?.name}" Index Set Field Type Profile`}
+                  documentationLink={{
+                    title: 'Index model documentation',
+                    path: DocsHelper.PAGES.INDEX_MODEL,
+                  }}>
+        <span>
+          With index set field type profiles you can bundle up custom field types into profiles.
+          Then you can assign this profile to any index set.
+          On this page you can modify the &quot;{data?.name}&quot; field type profile configuration.
+        </span>
+      </PageHeader>
+      <Row className="content">
+        <Col md={12}>
+          {isFetched ? <EditProfile profile={data} /> : <Spinner />}
+        </Col>
+      </Row>
+    </DocumentTitle>
+  );
+};
+
+export default IndexSetFieldTypeProfileEditPage;
diff --git a/graylog2-web-interface/src/pages/IndexSetFieldTypeProfilesPage.tsx b/graylog2-web-interface/src/pages/IndexSetFieldTypeProfilesPage.tsx
new file mode 100644
index 000000000000..e3a08e94bfc9
--- /dev/null
+++ b/graylog2-web-interface/src/pages/IndexSetFieldTypeProfilesPage.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { DocumentTitle, PageHeader } from 'components/common';
+import { Row, Col } from 'components/bootstrap';
+import DocsHelper from 'util/DocsHelper';
+import Routes from 'routing/Routes';
+import ProfilesList from 'components/indices/IndexSetFieldTypeProfiles/ProfilesList';
+import CreateProfileButton from 'components/indices/IndexSetFieldTypeProfiles/CreateProfileButton';
+import { IndicesPageNavigation } from 'components/indices';
+import useHasTypeMappingPermission from 'hooks/useHasTypeMappingPermission';
+
+const IndexSetFieldTypeProfilesPage = () => {
+  const navigate = useNavigate();
+  const hasMappingPermission = useHasTypeMappingPermission();
+
+  useEffect(() => {
+    if (!hasMappingPermission) {
+      navigate(Routes.NOTFOUND);
+    }
+  }, [hasMappingPermission, navigate]);
+
+  return (
+    <DocumentTitle title="Index Set Field Type Profiles">
+      <IndicesPageNavigation />
+      <PageHeader title="Index Set Field Type Profiles"
+                  documentationLink={{
+                    title: 'Index model documentation',
+                    path: DocsHelper.PAGES.INDEX_MODEL,
+                  }}
+                  actions={<CreateProfileButton />}>
+        <span>
+          With index set field type profiles you can bundle up custom field types into profiles.
+          Then you can assign this profile to any index set.
+          You can view and edit existing profiles or create new ones.
+        </span>
+      </PageHeader>
+
+      <Row className="content">
+        <Col md={12}>
+          <ProfilesList />
+        </Col>
+      </Row>
+    </DocumentTitle>
+  );
+};
+
+export default IndexSetFieldTypeProfilesPage;
diff --git a/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx b/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx
index 0c51b5c35256..f7076e78e934 100644
--- a/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx
+++ b/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.test.tsx
@@ -26,7 +26,7 @@ import { layoutPreferences } from 'fixtures/entityListLayoutPreferences';
 import TestStoreProvider from 'views/test/TestStoreProvider';
 import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
 import IndexSetFieldTypesPage from 'pages/IndexSetFieldTypesPage';
-import useFieldTypes from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 import { customField, defaultField, attributes } from 'fixtures/indexSetFieldTypes';
 
 const getData = (list = [defaultField]) => (
@@ -47,7 +47,7 @@ const renderIndexSetFieldTypesPage = () => render(
   </QueryParamProvider>,
 );
 
-jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes', () => jest.fn());
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
 jest.mock('components/indices/IndexSetFieldTypes/hooks/useIndexSetFieldType', () => jest.fn());
 
 jest.mock('components/common/EntityDataTable/hooks/useUserLayoutPreferences');
@@ -74,7 +74,7 @@ describe('IndexSetFieldTypesList', () => {
       isInitialLoading: false,
     });
 
-    asMock(useFieldTypes).mockReturnValue({
+    asMock(useFieldTypesForMappings).mockReturnValue({
       data: {
         fieldTypes: {
           string: 'String type',
diff --git a/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.tsx b/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.tsx
index d63389041a10..6d8a164da0bf 100644
--- a/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.tsx
+++ b/graylog2-web-interface/src/pages/IndexSetFieldTypesPage.tsx
@@ -26,24 +26,22 @@ import DocsHelper from 'util/DocsHelper';
 import { LinkContainer } from 'components/common/router';
 import Routes from 'routing/Routes';
 import IndexSetFieldTypesList from 'components/indices/IndexSetFieldTypes/IndexSetFieldTypesList';
-import useCurrentUser from 'hooks/useCurrentUser';
 import ChangeFieldTypeButton from 'components/indices/IndexSetFieldTypes/ChangeFieldTypeButton';
+import useHasTypeMappingPermission from 'hooks/useHasTypeMappingPermission';
 
 const IndexSetFieldTypesPage = () => {
   const { indexSetId } = useParams();
   const navigate = useNavigate();
   const { indexSet } = useStore(IndexSetsStore);
-  const currentUser = useCurrentUser();
+  const hasMappingPermission = useHasTypeMappingPermission();
 
   useEffect(() => {
-    const hasMappingPermission = currentUser.permissions.includes('typemappings:edit') || currentUser.permissions.includes('*');
-
     if (!hasMappingPermission) {
       navigate(Routes.NOTFOUND);
     } else {
       IndexSetsActions.get(indexSetId);
     }
-  }, [currentUser.permissions, indexSetId, navigate]);
+  }, [hasMappingPermission, indexSetId, navigate]);
 
   return (
     <DocumentTitle title={`Index Set - ${indexSet ? indexSet.title : ''}`}>
diff --git a/graylog2-web-interface/src/pages/IndexSetPage.tsx b/graylog2-web-interface/src/pages/IndexSetPage.tsx
index e3b6d7ed2b14..8817adb93495 100644
--- a/graylog2-web-interface/src/pages/IndexSetPage.tsx
+++ b/graylog2-web-interface/src/pages/IndexSetPage.tsx
@@ -22,7 +22,13 @@ import HideOnCloud from 'util/conditional/HideOnCloud';
 import { LinkContainer } from 'components/common/router';
 import { Alert, Row, Col, Panel, Button, ButtonToolbar } from 'components/bootstrap';
 import { DocumentTitle, PageHeader, Spinner, Icon } from 'components/common';
-import { IndicesMaintenanceDropdown, IndicesOverview, IndexSetDetails } from 'components/indices';
+import {
+  IndicesConfigurationDropdown,
+  IndicesMaintenanceDropdown,
+  IndicesOverview,
+  IndexSetDetails,
+  IndicesPageNavigation,
+} from 'components/indices';
 import { IndexerClusterHealthSummary } from 'components/indexers';
 import DocsHelper from 'util/DocsHelper';
 import Routes from 'routing/Routes';
@@ -144,11 +150,6 @@ class IndexSetPage extends React.Component<Props, State> {
 
     const pageHeader = indexSet && (
       <PageHeader title={`Index Set: ${indexSet.title}`}
-                  topActions={(
-                    <LinkContainer to={Routes.SYSTEM.INDICES.LIST}>
-                      <Button bsStyle="info">Index sets overview</Button>
-                    </LinkContainer>
-                  )}
                   documentationLink={{
                     title: 'Index model documentation',
                     path: DocsHelper.PAGES.INDEX_MODEL,
@@ -159,6 +160,7 @@ class IndexSetPage extends React.Component<Props, State> {
                         <Button bsStyle="info">Edit Index Set</Button>
                       </LinkContainer>
                       <IndicesMaintenanceDropdown indexSetId={indexSetId} indexSet={indexSet} />
+                      <IndicesConfigurationDropdown indexSetId={indexSetId} />
                     </ButtonToolbar>
                   )}>
         <span>
@@ -208,6 +210,7 @@ class IndexSetPage extends React.Component<Props, State> {
 
     return (
       <DocumentTitle title={`Index Set - ${indexSet ? indexSet.title : ''}`}>
+        <IndicesPageNavigation />
         <div>
           {pageHeader}
 
diff --git a/graylog2-web-interface/src/pages/IndicesPage.tsx b/graylog2-web-interface/src/pages/IndicesPage.tsx
index be8077fe7f0b..8fe5d945d753 100644
--- a/graylog2-web-interface/src/pages/IndicesPage.tsx
+++ b/graylog2-web-interface/src/pages/IndicesPage.tsx
@@ -22,12 +22,13 @@ import { Col, Row, Button, ButtonToolbar } from 'components/bootstrap';
 import HideOnCloud from 'util/conditional/HideOnCloud';
 import DocsHelper from 'util/DocsHelper';
 import { DocumentTitle, PageHeader } from 'components/common';
-import { IndexSetsComponent } from 'components/indices';
+import { IndexSetsComponent, IndicesPageNavigation } from 'components/indices';
 import { IndexerClusterHealth } from 'components/indexers';
 import AllIndicesMaintenanceDropdown from 'components/indices/AllIndicesMaintenanceDropdown';
 
 const IndicesPage = () => (
   <DocumentTitle title="Indices and Index Sets">
+    <IndicesPageNavigation />
     <PageHeader title="Indices & Index Sets"
                 actions={(
                   <ButtonToolbar>
diff --git a/graylog2-web-interface/src/pages/index.jsx b/graylog2-web-interface/src/pages/index.jsx
index 322c8d1f1381..74a19e8fec25 100644
--- a/graylog2-web-interface/src/pages/index.jsx
+++ b/graylog2-web-interface/src/pages/index.jsx
@@ -50,7 +50,12 @@ const ImportExtractorsPage = loadAsync(() => import('./ImportExtractorsPage'));
 const IndexerFailuresPage = loadAsync(() => import('./IndexerFailuresPage'));
 const IndexSetConfigurationPage = loadAsync(() => import('./IndexSetConfigurationPage'));
 const IndexSetCreationPage = loadAsync(() => import('./IndexSetCreationPage'));
+
+const IndexSetFieldTypesPage = loadAsync(() => import('./IndexSetFieldTypesPage'));
 const IndexSetPage = loadAsync(() => import('./IndexSetPage'));
+const IndexSetFieldTypeProfileCreatePage = loadAsync(() => import('./IndexSetFieldTypeProfileCreatePage'));
+const IndexSetFieldTypeProfileEditPage = loadAsync(() => import('./IndexSetFieldTypeProfileEditPage'));
+const IndexSetFieldTypeProfilesPage = loadAsync(() => import('./IndexSetFieldTypeProfilesPage'));
 const IndicesPage = loadAsync(() => import('./IndicesPage'));
 const InputsPage = loadAsync(() => import('./InputsPage'));
 const KeyboardShortcutsPage = loadAsync(() => import('./KeyboardShortcutsPage'));
@@ -101,8 +106,6 @@ const UserTokensEditPage = loadAsync(() => import('./UserTokensEditPage'));
 const UsersOverviewPage = loadAsync(() => import('./UsersOverviewPage'));
 const ViewEventDefinitionPage = loadAsync(() => import('./ViewEventDefinitionPage'));
 
-const IndexSetFieldTypesPage = loadAsync(() => import('./IndexSetFieldTypesPage'));
-
 export {
   AuthenticationCreatePage,
   AuthenticationPage,
@@ -140,6 +143,9 @@ export {
   IndexSetCreationPage,
   IndexSetFieldTypesPage,
   IndexSetPage,
+  IndexSetFieldTypeProfileCreatePage,
+  IndexSetFieldTypeProfileEditPage,
+  IndexSetFieldTypeProfilesPage,
   IndicesPage,
   InputsPage,
   KeyboardShortcutsPage,
diff --git a/graylog2-web-interface/src/routing/AppRouter.tsx b/graylog2-web-interface/src/routing/AppRouter.tsx
index 6eb9e129eace..d3fe8b088245 100644
--- a/graylog2-web-interface/src/routing/AppRouter.tsx
+++ b/graylog2-web-interface/src/routing/AppRouter.tsx
@@ -54,6 +54,9 @@ import {
   IndexSetConfigurationPage,
   IndexSetCreationPage,
   IndexSetPage,
+  IndexSetFieldTypeProfileEditPage,
+  IndexSetFieldTypeProfileCreatePage,
+  IndexSetFieldTypeProfilesPage,
   IndicesPage,
   InputsPage,
   KeyboardShortcutsPage,
@@ -306,6 +309,9 @@ const AppRouter = () => {
             { path: RoutePaths.SYSTEM.SIDECARS.NEW_COLLECTOR, element: <SidecarNewCollectorPage /> },
             { path: RoutePaths.SYSTEM.SIDECARS.EDIT_COLLECTOR(':collectorId'), element: <SidecarEditCollectorPage /> },
             { path: RoutePaths.KEYBOARD_SHORTCUTS, element: <KeyboardShortcutsPage /> },
+            { path: RoutePaths.SYSTEM.INDICES.FIELD_TYPE_PROFILES.OVERVIEW, element: <IndexSetFieldTypeProfilesPage /> },
+            { path: RoutePaths.SYSTEM.INDICES.FIELD_TYPE_PROFILES.edit(':profileId'), element: <IndexSetFieldTypeProfileEditPage /> },
+            { path: RoutePaths.SYSTEM.INDICES.FIELD_TYPE_PROFILES.CREATE, element: <IndexSetFieldTypeProfileCreatePage /> },
             ...standardPluginRoutes,
             { path: '*', element: <NotFoundPage displayPageLayout={false} /> },
           ].filter((route) => !!route),
diff --git a/graylog2-web-interface/src/routing/Routes.ts b/graylog2-web-interface/src/routing/Routes.ts
index 273232fd477b..3a751cc85825 100644
--- a/graylog2-web-interface/src/routing/Routes.ts
+++ b/graylog2-web-interface/src/routing/Routes.ts
@@ -91,6 +91,11 @@ const Routes = {
     INDICES: {
       LIST: '/system/indices',
       FAILURES: '/system/indices/failures',
+      FIELD_TYPE_PROFILES: {
+        OVERVIEW: '/system/indices/field-type-profiles',
+        edit: (profileId: string) => `/system/indices/field-type-profiles/${profileId}`,
+        CREATE: '/system/indices/field-type-profiles/create',
+      },
     },
     INDEX_SETS: {
       CONFIGURATION: (indexSetId: string, from?: string) => {
diff --git a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldType.tsx b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldType.tsx
index 5d9e072d06e2..c4466edb0e8b 100644
--- a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldType.tsx
+++ b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldType.tsx
@@ -23,6 +23,7 @@ import type User from 'logic/users/User';
 import AppConfig from 'util/AppConfig';
 import isReservedField from 'views/logic/IsReservedField';
 import useInitialSelection from 'views/logic/fieldactions/ChangeFieldType/hooks/useInitialSelection';
+import { isPermitted } from 'util/PermissionsMixin';
 
 const ChangeFieldType = ({
   field,
@@ -44,7 +45,7 @@ const ChangeFieldType = ({
   ) : null;
 };
 
-const hasMappingPermission = (currentUser: User) => currentUser.permissions.includes('typemappings:edit') || currentUser.permissions.includes('*');
+const hasMappingPermission = (currentUser: User) => isPermitted(currentUser, 'typemappings:edit');
 
 export const isChangeFieldTypeEnabled = ({ field, type, contexts }: ActionHandlerArguments) => {
   const { currentUser } = contexts;
diff --git a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.test.tsx b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.test.tsx
index c215cd1302fa..74572a73484f 100644
--- a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.test.tsx
+++ b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.test.tsx
@@ -28,7 +28,7 @@ import { loadViewsPlugin, unloadViewsPlugin } from 'views/test/testViewsPlugin';
 import ChangeFieldTypeModal from 'views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal';
 import type { Attributes } from 'stores/PaginationTypes';
 import suppressConsole from 'helpers/suppressConsole';
-import useFieldTypes from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 
 const onCloseMock = jest.fn();
 const renderChangeFieldTypeModal = ({
@@ -111,7 +111,7 @@ const paginatedFieldUsage = ({
 
 jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypeMutation', () => jest.fn());
 jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypeUsages', () => jest.fn());
-jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes', () => jest.fn());
+jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings', () => jest.fn());
 jest.mock('views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypeMutation', () => jest.fn());
 
 jest.mock('components/common/EntityDataTable/hooks/useUserLayoutPreferences');
@@ -124,7 +124,7 @@ describe('ChangeFieldTypeModal', () => {
   afterAll(unloadViewsPlugin);
 
   beforeEach(() => {
-    asMock(useFieldTypes).mockReturnValue({
+    asMock(useFieldTypesForMappings).mockReturnValue({
       isLoading: false,
       data: {
         fieldTypes: {
diff --git a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.tsx b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.tsx
index 6acc04ff18af..5ca423a15f7a 100644
--- a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.tsx
+++ b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/ChangeFieldTypeModal.tsx
@@ -31,7 +31,7 @@ import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 import { getPathnameWithoutId } from 'util/URLUtils';
 import useLocation from 'routing/useLocation';
 import FieldSelect from 'views/logic/fieldactions/ChangeFieldType/FieldSelect';
-import useFieldTypes from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 
 const StyledSelect = styled(Select)`
   width: 400px;
@@ -74,7 +74,7 @@ const ChangeFieldTypeModal = ({
   initialData,
 }: Props) => {
   const [{ fieldName, type }, setModalData] = useState<{ fieldName?: string, type?: string }>(initialData);
-  const { data: { fieldTypes }, isLoading: isLoadingFieldTypes } = useFieldTypes();
+  const { data: { fieldTypes }, isLoading: isLoadingFieldTypes } = useFieldTypesForMappings();
   const sendTelemetry = useSendTelemetry();
   const [rotated, setRotated] = useState(true);
   const fieldTypeOptions = useMemo(() => Object.entries(fieldTypes)
diff --git a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.test.ts b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.test.ts
index 4c62d28a3ac3..1f07e08c5973 100644
--- a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.test.ts
+++ b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.test.ts
@@ -20,7 +20,7 @@ import { renderHook } from 'wrappedTestingLibrary/hooks';
 import asMock from 'helpers/mocking/AsMock';
 import UserNotification from 'util/UserNotification';
 import suppressConsole from 'helpers/suppressConsole';
-import useFieldTypes from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes';
+import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 import { SystemFieldTypes } from '@graylog/server-api';
 
 const mockFieldType = {
@@ -42,7 +42,7 @@ jest.mock('@graylog/server-api', () => ({
   },
 }));
 
-const renderUseFieldTypeHook = () => renderHook(() => useFieldTypes());
+const renderUseFieldTypeHook = () => renderHook(() => useFieldTypesForMappings());
 
 describe('useFieldType custom hook', () => {
   afterEach(() => {
diff --git a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.ts b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings.ts
similarity index 95%
rename from graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.ts
rename to graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings.ts
index 179817aadf64..bf2357936a23 100644
--- a/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypes.ts
+++ b/graylog2-web-interface/src/views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings.ts
@@ -30,7 +30,7 @@ const fetchFieldTypes = async () => {
   return ({ fieldTypes });
 };
 
-const useFieldTypeOptions = (): {
+const useFieldTypesForMappings = (): {
   data: { fieldTypes: FieldTypes },
   isLoading: boolean,
 } => {
@@ -52,4 +52,4 @@ const useFieldTypeOptions = (): {
   });
 };
 
-export default useFieldTypeOptions;
+export default useFieldTypesForMappings;
diff --git a/graylog2-web-interface/src/views/logic/fieldtypes/useFieldTypes.ts b/graylog2-web-interface/src/views/logic/fieldtypes/useFieldTypes.ts
index 90506bbeced5..7f3435d8f7e7 100644
--- a/graylog2-web-interface/src/views/logic/fieldtypes/useFieldTypes.ts
+++ b/graylog2-web-interface/src/views/logic/fieldtypes/useFieldTypes.ts
@@ -69,7 +69,7 @@ const normalizeTimeRange = (timerange: TimeRange, userTz: string): TimeRange =>
   }
 };
 
-const useFieldTypes = (streams: Array<string>, timerange: TimeRange): { data: FieldTypeMapping[], refetch: () => void } => {
+const useFieldTypes = (streams: Array<string>, timerange: TimeRange): { data: FieldTypeMapping[], refetch: () => void, isLoading?: boolean } => {
   const { userTimezone } = useUserDateTime();
   const _timerange = useMemo(() => normalizeTimeRange(timerange, userTimezone), [timerange, userTimezone]);
 
diff --git a/graylog2-web-interface/test/fixtures/indexSetFieldTypeProfiles.ts b/graylog2-web-interface/test/fixtures/indexSetFieldTypeProfiles.ts
new file mode 100644
index 000000000000..0dbf736c25a3
--- /dev/null
+++ b/graylog2-web-interface/test/fixtures/indexSetFieldTypeProfiles.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import type { Attributes } from 'stores/PaginationTypes';
+
+export const profile1JSON = {
+  custom_field_mappings: [{ field: 'http_method', type: 'string' }, { field: 'user_ip', type: 'ip' }],
+  name: 'Profile 1',
+  description: 'Description 1',
+  id: '111',
+};
+export const profile2JSON = {
+  custom_field_mappings: [{ field: 'user_name', type: 'string' }, { field: 'logged_in', type: 'bool' }, { field: 'sum', type: 'int' }],
+  name: 'Profile 2',
+  description: 'Description 2',
+  id: '222',
+};
+
+export const profile1 = {
+  customFieldMappings: [{ field: 'http_method', type: 'string' }, { field: 'user_ip', type: 'ip' }],
+  name: 'Profile 1',
+  description: 'Description 1',
+  id: '111',
+};
+export const profile2 = {
+  customFieldMappings: [
+    { field: 'user_name', type: 'string' },
+    { field: 'logged_in', type: 'bool' },
+    { field: 'sum', type: 'int' },
+  ],
+  name: 'Profile 2',
+  description: 'Description 2',
+  id: '222',
+};
+
+export const attributes: Attributes = [
+  {
+    id: 'id',
+    title: 'Profile Id',
+    type: 'STRING',
+    sortable: true,
+    hidden: true,
+  },
+  {
+    id: 'name',
+    title: 'Profile Name',
+    type: 'STRING',
+    sortable: true,
+    filterable: true,
+    searchable: true,
+  },
+  {
+    id: 'description',
+    title: 'Profile Description',
+    type: 'STRING',
+    sortable: false,
+    filterable: true,
+    searchable: true,
+  },
+  {
+    id: 'custom_field_mappings',
+    title: 'Custom Field Mappings',
+    type: 'STRING',
+    sortable: false,
+  },
+];
diff --git a/graylog2-web-interface/test/helpers/getRandomString.ts b/graylog2-web-interface/test/helpers/getRandomString.ts
new file mode 100644
index 000000000000..d0ee232e9cc2
--- /dev/null
+++ b/graylog2-web-interface/test/helpers/getRandomString.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+
+const randomNumber = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
+const getRandomString = (minLength: number, maxLength: number) => [...Array(randomNumber(minLength, maxLength))].map(() => Math.random().toString(36)[2]).join('');
+
+export default getRandomString;