diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx
index 5667220881df2c..39b91a2e20b53f 100644
--- a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx
+++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx
@@ -23,7 +23,7 @@ import { WithMultiContent, useMultiContentContext, HookProps } from '../multi_co
 
 export interface Props<T extends object> {
   onSave: (data: T) => void | Promise<void>;
-  children: JSX.Element | JSX.Element[];
+  children: JSX.Element | Array<JSX.Element | null | false>;
   isEditing?: boolean;
   defaultActiveStep?: number;
   defaultValue?: HookProps<T>['defaultValue'];
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx
index 5fbe3d2bbbdd4c..210b0cedccd06a 100644
--- a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx
@@ -54,7 +54,7 @@ export function useMultiContentContext<T extends object = { [key: string]: any }
  *
  * @param contentId The content id to be added to the "contents" map
  */
-export function useContent<T extends object = { [key: string]: any }>(contentId: keyof T) {
+export function useContent<T extends object, K extends keyof T>(contentId: K) {
   const { updateContentAt, saveSnapshotAndRemoveContent, getData } = useMultiContentContext<T>();
 
   const updateContent = useCallback(
@@ -71,8 +71,11 @@ export function useContent<T extends object = { [key: string]: any }>(contentId:
     };
   }, [contentId, saveSnapshotAndRemoveContent]);
 
+  const data = getData();
+  const defaultValue = data[contentId];
+
   return {
-    defaultValue: getData()[contentId]!,
+    defaultValue,
     updateContent,
     getData,
   };
diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts
index 0a2c7bb6519593..adc68a39a4a5b6 100644
--- a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts
+++ b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts
@@ -150,6 +150,10 @@ export function useMultiContent<T extends object>({
    * Validate the multi-content active content(s) in the DOM
    */
   const validate = useCallback(async () => {
+    if (Object.keys(contents.current).length === 0) {
+      return Boolean(validation.isValid);
+    }
+
     const updatedValidation = {} as { [key in keyof T]?: boolean | undefined };
 
     for (const [id, _content] of Object.entries(contents.current)) {
diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts
index 28baa3d8372f0d..67c1ee3c7d6779 100644
--- a/src/plugins/es_ui_shared/public/index.ts
+++ b/src/plugins/es_ui_shared/public/index.ts
@@ -22,6 +22,7 @@
  * In the future, each top level folder should be exported like that to avoid naming collision
  */
 import * as Forms from './forms';
+import * as Monaco from './monaco';
 
 export { JsonEditor, OnJsonEditorUpdateHandler } from './components/json_editor';
 
@@ -53,10 +54,6 @@ export {
   expandLiteralStrings,
 } from './console_lang';
 
-import * as Monaco from './monaco';
-
-export { Monaco };
-
 export {
   AuthorizationContext,
   AuthorizationProvider,
@@ -69,7 +66,7 @@ export {
   useAuthorizationContext,
 } from './authorization';
 
-export { Forms };
+export { Monaco, Forms };
 
 /** dummy plugin, we just want esUiShared to have its own bundle */
 export function plugin() {
diff --git a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts
index dc8321aa07004a..019a0e8053d0db 100644
--- a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts
+++ b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts
@@ -21,12 +21,13 @@ import { ValidationFunc } from '../../hook_form_lib';
 import { isJSON } from '../../../validators/string';
 import { ERROR_CODE } from './types';
 
-export const isJsonField = (message: string) => (
-  ...args: Parameters<ValidationFunc>
-): ReturnType<ValidationFunc<any, ERROR_CODE>> => {
+export const isJsonField = (
+  message: string,
+  { allowEmptyString = false }: { allowEmptyString?: boolean } = {}
+) => (...args: Parameters<ValidationFunc>): ReturnType<ValidationFunc<any, ERROR_CODE>> => {
   const [{ value }] = args;
 
-  if (typeof value !== 'string') {
+  if (typeof value !== 'string' || (allowEmptyString && value.trim() === '')) {
     return;
   }
 
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts
index 98bd3077670a75..5eb4eaf6e2ca1b 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
 import {
@@ -13,44 +12,21 @@ import {
   TestBedConfig,
   findTestSubject,
 } from '../../../../../test_utils';
-// NOTE: We have to use the Home component instead of the TemplateList component because we depend
-// upon react router to provide the name of the template to load in the detail panel.
-import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
-import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
+import { TemplateList } from '../../../public/application/sections/home/template_list'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { TemplateDeserialized } from '../../../common';
-import { WithAppDependencies, services, TestSubjects } from '../helpers';
+import { WithAppDependencies, TestSubjects } from '../helpers';
 
 const testBedConfig: TestBedConfig = {
-  store: () => indexManagementStore(services as any),
   memoryRouter: {
-    initialEntries: [`/indices`],
-    componentRoutePath: `/:section(indices|templates)`,
+    initialEntries: [`/templates`],
+    componentRoutePath: `/templates/:templateName?`,
   },
   doMountAsync: true,
 };
 
-const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig);
-
-export interface IndexTemplatesTabTestBed extends TestBed<TestSubjects> {
-  findAction: (action: 'edit' | 'clone' | 'delete') => ReactWrapper;
-  actions: {
-    goToTemplatesList: () => void;
-    selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void;
-    clickReloadButton: () => void;
-    clickTemplateAction: (
-      name: TemplateDeserialized['name'],
-      action: 'edit' | 'clone' | 'delete'
-    ) => void;
-    clickTemplateAt: (index: number) => void;
-    clickCloseDetailsButton: () => void;
-    clickActionMenu: (name: TemplateDeserialized['name']) => void;
-    toggleViewItem: (view: 'composable' | 'system') => void;
-  };
-}
-
-export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
-  const testBed = await initTestBed();
+const initTestBed = registerTestBed<TestSubjects>(WithAppDependencies(TemplateList), testBedConfig);
 
+const createActions = (testBed: TestBed<TestSubjects>) => {
   /**
    * Additional helpers
    */
@@ -64,11 +40,6 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
   /**
    * User Actions
    */
-
-  const goToTemplatesList = () => {
-    testBed.find('templatesTab').simulate('click');
-  };
-
   const selectDetailsTab = (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => {
     const tabs = ['summary', 'settings', 'mappings', 'aliases'];
 
@@ -136,10 +107,8 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
   };
 
   return {
-    ...testBed,
     findAction,
     actions: {
-      goToTemplatesList,
       selectDetailsTab,
       clickReloadButton,
       clickTemplateAction,
@@ -150,3 +119,14 @@ export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
     },
   };
 };
+
+export const setup = async (): Promise<IndexTemplatesTabTestBed> => {
+  const testBed = await initTestBed();
+
+  return {
+    ...testBed,
+    ...createActions(testBed),
+  };
+};
+
+export type IndexTemplatesTabTestBed = TestBed<TestSubjects> & ReturnType<typeof createActions>;
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
index 2ff3743cd866c6..fb3e16e5345cb6 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts
@@ -30,28 +30,15 @@ describe('Index Templates tab', () => {
     server.restore();
   });
 
-  beforeEach(async () => {
-    httpRequestsMockHelpers.setLoadIndicesResponse([]);
-
-    await act(async () => {
-      testBed = await setup();
-    });
-  });
-
   describe('when there are no index templates', () => {
-    beforeEach(async () => {
-      const { actions, component } = testBed;
-
+    test('should display an empty prompt', async () => {
       httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] });
 
       await act(async () => {
-        actions.goToTemplatesList();
+        testBed = await setup();
       });
+      const { exists, component } = testBed;
       component.update();
-    });
-
-    test('should display an empty prompt', async () => {
-      const { exists } = testBed;
 
       expect(exists('sectionLoading')).toBe(false);
       expect(exists('emptyPrompt')).toBe(true);
@@ -119,14 +106,12 @@ describe('Index Templates tab', () => {
     const legacyTemplates = [template4, template5, template6];
 
     beforeEach(async () => {
-      const { actions, component } = testBed;
-
       httpRequestsMockHelpers.setLoadTemplatesResponse({ templates, legacyTemplates });
 
       await act(async () => {
-        actions.goToTemplatesList();
+        testBed = await setup();
       });
-      component.update();
+      testBed.component.update();
     });
 
     test('should list them in the table', async () => {
@@ -151,6 +136,7 @@ describe('Index Templates tab', () => {
           composedOfString,
           priorityFormatted,
           'M S A', // Mappings Settings Aliases badges
+          '', // Column of actions
         ]);
       });
 
@@ -192,8 +178,10 @@ describe('Index Templates tab', () => {
       );
     });
 
-    test('should have a button to create a new template', () => {
+    test('should have a button to create a template', () => {
       const { exists } = testBed;
+      // Both composable and legacy templates
+      expect(exists('createTemplateButton')).toBe(true);
       expect(exists('createLegacyTemplateButton')).toBe(true);
     });
 
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
index 07a27e2414aed2..69d7a13edfcfbe 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
@@ -7,7 +7,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../common';
 import { setupEnvironment, nextTick } from '../helpers';
 
 import {
@@ -369,7 +368,7 @@ describe.skip('<TemplateCreate />', () => {
           aliases: ALIASES,
         },
         _kbnMeta: {
-          isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT,
+          isLegacy: false,
           isManaged: false,
         },
       };
diff --git a/x-pack/plugins/index_management/common/constants/index.ts b/x-pack/plugins/index_management/common/constants/index.ts
index 526b9fede2a679..d1700f0e611c05 100644
--- a/x-pack/plugins/index_management/common/constants/index.ts
+++ b/x-pack/plugins/index_management/common/constants/index.ts
@@ -9,7 +9,6 @@ export { BASE_PATH } from './base_path';
 export { API_BASE_PATH } from './api_base_path';
 export { INVALID_INDEX_PATTERN_CHARS, INVALID_TEMPLATE_NAME_CHARS } from './invalid_characters';
 export * from './index_statuses';
-export { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from './index_templates';
 
 export {
   UIM_APP_NAME,
diff --git a/x-pack/plugins/index_management/common/constants/index_templates.ts b/x-pack/plugins/index_management/common/constants/index_templates.ts
deleted file mode 100644
index 7696b3832c51e7..00000000000000
--- a/x-pack/plugins/index_management/common/constants/index_templates.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-/**
- * Up until the end of the 8.x release cycle we need to support both
- * legacy and composable index template formats. This constant keeps track of whether
- * we create legacy index template format by default in the UI.
- */
-export const CREATE_LEGACY_TEMPLATE_BY_DEFAULT = true;
diff --git a/x-pack/plugins/index_management/common/index.ts b/x-pack/plugins/index_management/common/index.ts
index 4ad428744deab7..119d4e0c54edde 100644
--- a/x-pack/plugins/index_management/common/index.ts
+++ b/x-pack/plugins/index_management/common/index.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { PLUGIN, API_BASE_PATH, CREATE_LEGACY_TEMPLATE_BY_DEFAULT, BASE_PATH } from './constants';
+export { PLUGIN, API_BASE_PATH, BASE_PATH } from './constants';
 
 export { getTemplateParameter } from './lib';
 
diff --git a/x-pack/plugins/index_management/common/lib/index.ts b/x-pack/plugins/index_management/common/lib/index.ts
index 4e76a40ced5240..6b1005b4faa05d 100644
--- a/x-pack/plugins/index_management/common/lib/index.ts
+++ b/x-pack/plugins/index_management/common/lib/index.ts
@@ -7,9 +7,11 @@
 export { deserializeDataStream, deserializeDataStreamList } from './data_stream_serialization';
 
 export {
-  deserializeLegacyTemplateList,
+  deserializeTemplate,
   deserializeTemplateList,
   deserializeLegacyTemplate,
+  deserializeLegacyTemplateList,
+  serializeTemplate,
   serializeLegacyTemplate,
 } from './template_serialization';
 
diff --git a/x-pack/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts
index 249881f668d9f6..608a8b8aca294f 100644
--- a/x-pack/plugins/index_management/common/lib/template_serialization.ts
+++ b/x-pack/plugins/index_management/common/lib/template_serialization.ts
@@ -13,7 +13,7 @@ import {
 const hasEntries = (data: object = {}) => Object.entries(data).length > 0;
 
 export function serializeTemplate(templateDeserialized: TemplateDeserialized): TemplateSerialized {
-  const { version, priority, indexPatterns, template, composedOf } = templateDeserialized;
+  const { version, priority, indexPatterns, template, composedOf, _meta } = templateDeserialized;
 
   return {
     version,
@@ -21,6 +21,7 @@ export function serializeTemplate(templateDeserialized: TemplateDeserialized): T
     template,
     index_patterns: indexPatterns,
     composed_of: composedOf,
+    _meta,
   };
 }
 
@@ -34,6 +35,7 @@ export function deserializeTemplate(
     index_patterns: indexPatterns,
     template = {},
     priority,
+    _meta,
     composed_of: composedOf,
   } = templateEs;
   const { settings } = template;
@@ -46,6 +48,7 @@ export function deserializeTemplate(
     template,
     ilmPolicy: settings?.index?.lifecycle,
     composedOf,
+    _meta,
     _kbnMeta: {
       isManaged: Boolean(managedTemplatePrefix && name.startsWith(managedTemplatePrefix)),
     },
diff --git a/x-pack/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts
index 006a2d9dea8f23..14318b5fa2a8d5 100644
--- a/x-pack/plugins/index_management/common/types/templates.ts
+++ b/x-pack/plugins/index_management/common/types/templates.ts
@@ -21,6 +21,7 @@ export interface TemplateSerialized {
   composed_of?: string[];
   version?: number;
   priority?: number;
+  _meta?: { [key: string]: any };
 }
 
 /**
@@ -43,6 +44,7 @@ export interface TemplateDeserialized {
   ilmPolicy?: {
     name: string;
   };
+  _meta?: { [key: string]: any };
   _kbnMeta: {
     isManaged: boolean;
     isLegacy?: boolean;
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
new file mode 100644
index 00000000000000..51e8a829e81b16
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss
@@ -0,0 +1,34 @@
+
+
+/**
+ * [1] Will center vertically the empty search result
+ */
+
+$heightHeader: $euiSizeL * 2;
+
+.componentTemplates {
+  @include euiBottomShadowFlat;
+  height: 100%;
+
+  &__header {
+    height: $heightHeader;
+
+    .euiFormControlLayout {
+      max-width: initial;
+    }
+  }
+
+  &__searchBox {
+    border-bottom: $euiBorderThin;
+    box-shadow: none;
+    max-width: initial;
+  }
+
+  &__listWrapper {
+    height: calc(100% - #{$heightHeader});
+
+    &--is-empty {
+      display: flex; // [1]
+    }
+  }
+}
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx
new file mode 100644
index 00000000000000..64c7cd400ba0d6
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx
@@ -0,0 +1,169 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import classNames from 'classnames';
+import React, { useState, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+
+import { ComponentTemplateListItem } from '../../../../../common';
+import { FilterListButton } from './components';
+import { ComponentTemplatesList } from './component_templates_list';
+import { Props as ComponentTemplatesListItemProps } from './component_templates_list_item';
+
+import './component_templates.scss';
+
+interface Props {
+  isLoading: boolean;
+  components: ComponentTemplateListItem[];
+  listItemProps: Omit<ComponentTemplatesListItemProps, 'component'>;
+}
+
+interface Filters {
+  [key: string]: { name: string; checked: 'on' | 'off' };
+}
+
+function fuzzyMatch(searchValue: string, text: string) {
+  const pattern = `.*${searchValue.split('').join('.*')}.*`;
+  const regex = new RegExp(pattern);
+  return regex.test(text);
+}
+
+const i18nTexts = {
+  filters: {
+    settings: i18n.translate(
+      'xpack.idxMgmt.componentTemplatesSelector.filters.indexSettingsLabel',
+      { defaultMessage: 'Index settings' }
+    ),
+    mappings: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.filters.mappingsLabel', {
+      defaultMessage: 'Mappings',
+    }),
+    aliases: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.filters.aliasesLabel', {
+      defaultMessage: 'Aliases',
+    }),
+  },
+  searchBoxPlaceholder: i18n.translate(
+    'xpack.idxMgmt.componentTemplatesSelector.searchBox.placeholder',
+    {
+      defaultMessage: 'Search components',
+    }
+  ),
+};
+
+const getInitialFilters = (): Filters => ({
+  settings: {
+    name: i18nTexts.filters.settings,
+    checked: 'off',
+  },
+  mappings: {
+    name: i18nTexts.filters.mappings,
+    checked: 'off',
+  },
+  aliases: {
+    name: i18nTexts.filters.aliases,
+    checked: 'off',
+  },
+});
+
+export const ComponentTemplates = ({ isLoading, components, listItemProps }: Props) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const [filters, setFilters] = useState(getInitialFilters);
+
+  const filteredComponents = useMemo<ComponentTemplateListItem[]>(() => {
+    if (isLoading) {
+      return [];
+    }
+
+    return components.filter((component) => {
+      if (filters.settings.checked === 'on' && !component.hasSettings) {
+        return false;
+      }
+      if (filters.mappings.checked === 'on' && !component.hasMappings) {
+        return false;
+      }
+      if (filters.aliases.checked === 'on' && !component.hasAliases) {
+        return false;
+      }
+
+      if (searchValue.trim() === '') {
+        return true;
+      }
+
+      const match = fuzzyMatch(searchValue, component.name);
+      return match;
+    });
+  }, [isLoading, components, searchValue, filters]);
+
+  const isSearchResultEmpty = filteredComponents.length === 0 && components.length > 0;
+
+  if (isLoading) {
+    return null;
+  }
+
+  const clearSearch = () => {
+    setSearchValue('');
+    setFilters(getInitialFilters());
+  };
+
+  const renderEmptyResult = () => {
+    return (
+      <EuiEmptyPrompt
+        iconType="search"
+        title={
+          <h3>
+            <FormattedMessage
+              id="xpack.idxMgmt.componentTemplatesSelector.searchResult.emptyPromptTitle"
+              defaultMessage="No components match your search"
+            />
+          </h3>
+        }
+        actions={
+          <EuiButton onClick={clearSearch}>
+            <FormattedMessage
+              id="xpack.idxMgmt.componentTemplatesSelector.searchResult.emptyPrompt.clearSearchButtonLabel"
+              defaultMessage="Clear search"
+            />
+          </EuiButton>
+        }
+      />
+    );
+  };
+
+  return (
+    <div className="componentTemplates">
+      <div className="componentTemplates__header">
+        <EuiFlexGroup gutterSize="none">
+          <EuiFlexItem>
+            <EuiFieldSearch
+              placeholder={i18nTexts.searchBoxPlaceholder}
+              value={searchValue}
+              onChange={(e) => {
+                setSearchValue(e.target.value);
+              }}
+              aria-label={i18nTexts.searchBoxPlaceholder}
+              className="componentTemplates__searchBox"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <FilterListButton filters={filters} onChange={setFilters} />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+      <div
+        className={classNames('eui-yScrollWithShadows componentTemplates__listWrapper', {
+          'componentTemplates__listWrapper--is-empty': isSearchResultEmpty,
+        })}
+      >
+        {isSearchResultEmpty ? (
+          renderEmptyResult()
+        ) : (
+          <ComponentTemplatesList components={filteredComponents} listItemProps={listItemProps} />
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx
new file mode 100644
index 00000000000000..0c64c38c8963f7
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+import { ComponentTemplateListItem } from '../../../../../common';
+import {
+  ComponentTemplatesListItem,
+  Props as ComponentTemplatesListItemProps,
+} from './component_templates_list_item';
+
+interface Props {
+  components: ComponentTemplateListItem[];
+  listItemProps: Omit<ComponentTemplatesListItemProps, 'component'>;
+}
+
+export const ComponentTemplatesList = ({ components, listItemProps }: Props) => {
+  return (
+    <>
+      {components.map((component) => (
+        <ComponentTemplatesListItem key={component.name} component={component} {...listItemProps} />
+      ))}
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss
new file mode 100644
index 00000000000000..b454d8697c5fce
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss
@@ -0,0 +1,31 @@
+.componentTemplatesListItem {
+  background-color: white;
+  padding: $euiSizeM;
+  border-bottom: $euiBorderThin;
+  position: relative;
+  height: $euiSizeL * 2;
+
+  &--selected {
+    &::before {
+      content: '';
+      background-color: rgba(255, 255, 255, 0.7);
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 1;
+    }
+  }
+
+  &__contentIndicator {
+    flex-direction: row;
+  }
+
+  &__checkIcon {
+    position: absolute;
+    right: $euiSize;
+    top: $euiSize;
+    z-index: 2;
+  }
+}
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx
new file mode 100644
index 00000000000000..ad75c8dcbcc543
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx
@@ -0,0 +1,103 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import classNames from 'classnames';
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiLink,
+  EuiIcon,
+  EuiToolTip,
+} from '@elastic/eui';
+
+import { ComponentTemplateListItem } from '../../../../../common';
+import { TemplateContentIndicator } from '../../shared';
+
+import './component_templates_list_item.scss';
+
+interface Action {
+  label: string;
+  icon: string;
+  handler: (component: ComponentTemplateListItem) => void;
+}
+export interface Props {
+  component: ComponentTemplateListItem;
+  isSelected?: boolean | ((component: ComponentTemplateListItem) => boolean);
+  onViewDetail: (component: ComponentTemplateListItem) => void;
+  actions?: Action[];
+  dragHandleProps?: { [key: string]: any };
+}
+
+export const ComponentTemplatesListItem = ({
+  component,
+  onViewDetail,
+  actions,
+  isSelected = false,
+  dragHandleProps,
+}: Props) => {
+  const hasActions = actions && actions.length > 0;
+  const isSelectedValue = typeof isSelected === 'function' ? isSelected(component) : isSelected;
+  const isDraggable = Boolean(dragHandleProps);
+
+  return (
+    <div
+      className={classNames('componentTemplatesListItem', {
+        'componentTemplatesListItem--selected': isSelectedValue,
+      })}
+    >
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center">
+            {isDraggable && (
+              <EuiFlexItem>
+                <div {...dragHandleProps}>
+                  <EuiIcon type="grab" />
+                </div>
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false}>
+              {/* <EuiText>{component.name}</EuiText> */}
+              <EuiLink onClick={() => onViewDetail(component)}>{component.name}</EuiLink>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="componentTemplatesListItem__contentIndicator">
+              <TemplateContentIndicator
+                settings={component.hasSettings}
+                mappings={component.hasMappings}
+                aliases={component.hasAliases}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        {/* Actions */}
+        {hasActions && !isSelectedValue && (
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="xs">
+              {actions!.map((action, i) => (
+                <EuiFlexItem key={i}>
+                  <EuiToolTip content={action.label}>
+                    <EuiButtonIcon
+                      iconType={action.icon}
+                      onClick={() => action.handler(component)}
+                      data-test-subj="addPropertyButton"
+                      aria-label={action.label}
+                    />
+                  </EuiToolTip>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+
+      {/* Check icon when selected */}
+      {isSelectedValue && (
+        <EuiIcon className="componentTemplatesListItem__checkIcon" type="check" color="secondary" />
+      )}
+    </div>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx
new file mode 100644
index 00000000000000..0a305eec191801
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '@elastic/eui';
+
+import { ComponentTemplateListItem } from '../../../../../common';
+import {
+  ComponentTemplatesListItem,
+  Props as ComponentTemplatesListItemProps,
+} from './component_templates_list_item';
+
+interface DraggableLocation {
+  droppableId: string;
+  index: number;
+}
+
+interface Props {
+  components: ComponentTemplateListItem[];
+  onReorder: (components: ComponentTemplateListItem[]) => void;
+  listItemProps: Omit<ComponentTemplatesListItemProps, 'component'>;
+}
+
+export const ComponentTemplatesSelection = ({ components, onReorder, listItemProps }: Props) => {
+  const onDragEnd = ({
+    source,
+    destination,
+  }: {
+    source?: DraggableLocation;
+    destination?: DraggableLocation;
+  }) => {
+    if (source && destination) {
+      const items = euiDragDropReorder(components, source.index, destination.index);
+      onReorder(items);
+    }
+  };
+
+  return (
+    <EuiDragDropContext onDragEnd={onDragEnd}>
+      <EuiDroppable droppableId="componentTemplates" spacing="none">
+        {components.map((component, idx) => (
+          <EuiDraggable
+            spacing="none"
+            key={component.name}
+            index={idx}
+            draggableId={component.name}
+            customDragHandle={true}
+          >
+            {(provided) => (
+              <ComponentTemplatesListItem
+                component={component}
+                dragHandleProps={provided.dragHandleProps}
+                {...listItemProps}
+              />
+            )}
+          </EuiDraggable>
+        ))}
+      </EuiDroppable>
+    </EuiDragDropContext>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss
new file mode 100644
index 00000000000000..6abbbe65790e73
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss
@@ -0,0 +1,36 @@
+/*
+[1] Height to align left and right column headers
+*/
+
+.componentTemplatesSelector {
+  height: 480px;
+
+  &__selection {
+    @include euiBottomShadowFlat;
+
+   padding: 0 $euiSize $euiSize;
+   color: $euiColorDarkShade;
+
+   &--is-empty {
+     align-items: center;
+     justify-content: center;
+   }
+
+   &__header {
+    background-color: $euiColorLightestShade;
+    border-bottom: $euiBorderThin;
+    color: $euiColorInk;
+    height: $euiSizeXXL; // [1]
+    line-height: $euiSizeXXL; // [1]
+    font-size: $euiSizeM;
+    margin-bottom: $euiSizeS;
+    margin-left: $euiSize * -1;
+    margin-right: $euiSize * -1;
+    padding-left: $euiSize;
+
+    &__count {
+      font-weight: 600;
+    }
+   }
+  }
+}
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx
new file mode 100644
index 00000000000000..af48c3c79379ad
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx
@@ -0,0 +1,263 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import classNames from 'classnames';
+import React, { useState, useEffect, useRef } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
+import { ComponentTemplateListItem } from '../../../../../common';
+import { SectionError, SectionLoading } from '../shared_imports';
+import { ComponentTemplateDetailsFlyout } from '../component_template_details';
+import { CreateButtonPopOver } from './components';
+import { ComponentTemplates } from './component_templates';
+import { ComponentTemplatesSelection } from './component_templates_selection';
+import { useApi } from '../component_templates_context';
+
+import './component_templates_selector.scss';
+
+interface Props {
+  onChange: (components: string[]) => void;
+  onComponentsLoaded: (components: ComponentTemplateListItem[]) => void;
+  defaultValue: string[];
+  docUri: string;
+  emptyPrompt?: {
+    text?: string | JSX.Element;
+    showCreateButton?: boolean;
+  };
+}
+
+const i18nTexts = {
+  icons: {
+    view: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.viewItemIconLabel', {
+      defaultMessage: 'View',
+    }),
+    select: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.selectItemIconLabel', {
+      defaultMessage: 'Select',
+    }),
+    remove: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.removeItemIconLabel', {
+      defaultMessage: 'Remove',
+    }),
+  },
+};
+
+export const ComponentTemplatesSelector = ({
+  onChange,
+  defaultValue,
+  onComponentsLoaded,
+  docUri,
+  emptyPrompt: { text, showCreateButton } = {},
+}: Props) => {
+  const { data: components, isLoading, error } = useApi().useLoadComponentTemplates();
+  const [selectedComponent, setSelectedComponent] = useState<string | null>(null);
+  const [componentsSelected, setComponentsSelected] = useState<ComponentTemplateListItem[]>([]);
+  const isInitialized = useRef(false);
+
+  const hasSelection = Object.keys(componentsSelected).length > 0;
+  const hasComponents = components && components.length > 0 ? true : false;
+
+  useEffect(() => {
+    if (components) {
+      if (
+        defaultValue.length > 0 &&
+        componentsSelected.length === 0 &&
+        isInitialized.current === false
+      ) {
+        // Once the components are loaded we check the ones selected
+        // from the defaultValue provided
+        const nextComponentsSelected = defaultValue
+          .map((name) => components.find((comp) => comp.name === name))
+          .filter(Boolean) as ComponentTemplateListItem[];
+
+        setComponentsSelected(nextComponentsSelected);
+        onChange(nextComponentsSelected.map(({ name }) => name));
+        isInitialized.current = true;
+      } else {
+        onChange(componentsSelected.map(({ name }) => name));
+      }
+    }
+  }, [defaultValue, components, componentsSelected, onChange]);
+
+  useEffect(() => {
+    if (!isLoading && !error) {
+      onComponentsLoaded(components ?? []);
+    }
+  }, [isLoading, error, components, onComponentsLoaded]);
+
+  const onSelectionReorder = (reorderedComponents: ComponentTemplateListItem[]) => {
+    setComponentsSelected(reorderedComponents);
+  };
+
+  const renderLoading = () => (
+    <SectionLoading>
+      <FormattedMessage
+        id="xpack.idxMgmt.componentTemplatesSelector.loadingComponentsDescription"
+        defaultMessage="Loading components…"
+      />
+    </SectionLoading>
+  );
+
+  const renderError = () => (
+    <SectionError
+      title={
+        <FormattedMessage
+          id="xpack.idxMgmt.componentTemplatesSelector.loadingComponentsErrorMessage"
+          defaultMessage="Error loading components"
+        />
+      }
+      error={error!}
+    />
+  );
+
+  const renderSelector = () => (
+    <EuiFlexGroup className="componentTemplatesSelector">
+      {/* Selection */}
+      <EuiFlexItem
+        className={classNames('componentTemplatesSelector__selection', {
+          'componentTemplatesSelector__selection--is-empty': !hasSelection,
+        })}
+      >
+        {hasSelection ? (
+          <>
+            <div className="componentTemplatesSelector__selection__header">
+              <FormattedMessage
+                id="xpack.idxMgmt.componentTemplatesSelector.selectionHeader.componentsSelectedLabel"
+                defaultMessage="Components selected: {count}"
+                values={{
+                  count: (
+                    <span className="componentTemplatesSelector__selection__header__count">
+                      {componentsSelected.length}
+                    </span>
+                  ),
+                }}
+              />
+            </div>
+            <div className="eui-yScrollWithShadows">
+              <ComponentTemplatesSelection
+                components={componentsSelected}
+                onReorder={onSelectionReorder}
+                listItemProps={{
+                  onViewDetail: (component: ComponentTemplateListItem) => {
+                    setSelectedComponent(component.name);
+                  },
+                  actions: [
+                    {
+                      label: i18nTexts.icons.remove,
+                      icon: 'minusInCircle',
+                      handler: (component: ComponentTemplateListItem) => {
+                        setComponentsSelected((prev) => {
+                          return prev.filter(({ name }) => component.name !== name);
+                        });
+                      },
+                    },
+                  ],
+                }}
+              />
+            </div>
+          </>
+        ) : (
+          <div>
+            <FormattedMessage
+              id="xpack.idxMgmt.componentTemplatesSelector.noComponentSelectedLabel"
+              defaultMessage="No component selected."
+            />
+          </div>
+        )}
+      </EuiFlexItem>
+
+      {/* List of components */}
+      <EuiFlexItem>
+        <ComponentTemplates
+          isLoading={isLoading}
+          components={components ?? []}
+          listItemProps={{
+            onViewDetail: (component: ComponentTemplateListItem) => {
+              setSelectedComponent(component.name);
+            },
+            actions: [
+              {
+                label: i18nTexts.icons.select,
+                icon: 'plusInCircle',
+                handler: (component: ComponentTemplateListItem) => {
+                  setComponentsSelected((prev) => {
+                    return [...prev, component];
+                  });
+                },
+              },
+            ],
+            isSelected: (component: ComponentTemplateListItem) => {
+              return componentsSelected.find(({ name }) => component.name === name) !== undefined;
+            },
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const renderComponentDetails = () => {
+    if (!selectedComponent) {
+      return null;
+    }
+
+    return (
+      <ComponentTemplateDetailsFlyout
+        onClose={() => setSelectedComponent(null)}
+        componentTemplateName={selectedComponent}
+      />
+    );
+  };
+
+  if (isLoading) {
+    return renderLoading();
+  } else if (error) {
+    return renderError();
+  } else if (hasComponents) {
+    return (
+      <>
+        {renderSelector()}
+        {renderComponentDetails()}
+      </>
+    );
+  }
+
+  // No components: render empty prompt
+  const emptyPromptBody = (
+    <EuiText color="subdued">
+      <p>
+        {text ?? (
+          <FormattedMessage
+            id="xpack.idxMgmt.componentTemplatesSelector.emptyPromptDescription"
+            defaultMessage="Components templates let you save index settings, mappings and aliases and inherit from them in index templates."
+          />
+        )}
+        <br />
+        <EuiLink href={docUri} target="_blank" external>
+          <FormattedMessage
+            id="xpack.idxMgmt.componentTemplatesSelector.emptyPromptLearnMoreLinkText"
+            defaultMessage="Learn more."
+          />
+        </EuiLink>
+      </p>
+    </EuiText>
+  );
+  return (
+    <EuiEmptyPrompt
+      iconType="managementApp"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.idxMgmt.componentTemplatesSelector.emptyPromptTitle"
+            defaultMessage="You don’t have any components yet"
+          />
+        </h2>
+      }
+      body={emptyPromptBody}
+      actions={showCreateButton ? <CreateButtonPopOver anchorPosition="downCenter" /> : undefined}
+      data-test-subj="emptyPrompt"
+    />
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx
new file mode 100644
index 00000000000000..941e8ec362de25
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+
+import { EuiPopover, EuiButton, EuiContextMenu } from '@elastic/eui';
+
+interface Props {
+  anchorPosition?: 'upCenter' | 'downCenter';
+}
+
+export const CreateButtonPopOver = ({ anchorPosition = 'upCenter' }: Props) => {
+  const [isPopoverOpen, setIsPopOverOpen] = useState<boolean>(false);
+
+  return (
+    <EuiPopover
+      id="createComponentTemplatePanel"
+      button={
+        <EuiButton
+          fill
+          data-test-subj="manageTemplateButton"
+          iconType="arrowDown"
+          iconSide="right"
+          onClick={() => setIsPopOverOpen((prev) => !prev)}
+        >
+          <FormattedMessage
+            id="xpack.idxMgmt.componentTemplatesFlyout.manageButtonLabel"
+            defaultMessage="Create"
+          />
+        </EuiButton>
+      }
+      isOpen={isPopoverOpen}
+      closePopover={() => setIsPopOverOpen(false)}
+      panelPaddingSize="none"
+      withTitle
+      anchorPosition={anchorPosition}
+      repositionOnScroll
+    >
+      <EuiContextMenu
+        initialPanelId={0}
+        panels={[
+          {
+            id: 0,
+            title: i18n.translate(
+              'xpack.idxMgmt.componentTemplatesFlyout.createContextMenuPanelTitle',
+              {
+                defaultMessage: 'New component template',
+              }
+            ),
+            items: [
+              {
+                name: i18n.translate(
+                  'xpack.idxMgmt.componentTemplatesFlyout.createComponentTemplateFromScratchButtonLabel',
+                  {
+                    defaultMessage: 'From scratch',
+                  }
+                ),
+                icon: 'plusInCircle',
+                onClick: () => {
+                  // console.log('Create component template...');
+                },
+              },
+              {
+                name: i18n.translate(
+                  'xpack.idxMgmt.componentTemplatesFlyout.createComponentTemplateFromExistingButtonLabel',
+                  {
+                    defaultMessage: 'From existing index template',
+                  }
+                ),
+                icon: 'symlink',
+                onClick: () => {
+                  // console.log('Create component template from index template...');
+                },
+              },
+            ],
+          },
+        ]}
+      />
+    </EuiPopover>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx
new file mode 100644
index 00000000000000..7236a385a704e0
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFilterButton, EuiPopover, EuiFilterSelectItem } from '@elastic/eui';
+
+interface Filter {
+  name: string;
+  checked: 'on' | 'off';
+}
+
+interface Props {
+  filters: Filters;
+  onChange(filters: Filters): void;
+}
+
+export interface Filters {
+  [key: string]: Filter;
+}
+
+export function FilterListButton({ onChange, filters }: Props) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on');
+
+  const onButtonClick = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  const closePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  const toggleFilter = (filter: string) => {
+    const previousValue = filters[filter].checked;
+    const nextValue = previousValue === 'on' ? 'off' : 'on';
+
+    onChange({
+      ...filters,
+      [filter]: {
+        ...filters[filter],
+        checked: nextValue,
+      },
+    });
+  };
+
+  const button = (
+    <EuiFilterButton
+      iconType="arrowDown"
+      onClick={onButtonClick}
+      isSelected={isPopoverOpen}
+      numFilters={Object.keys(filters).length}
+      hasActiveFilters={activeFilters.length > 0}
+      numActiveFilters={activeFilters.length}
+      data-test-subj="viewButton"
+    >
+      <FormattedMessage
+        id="xpack.idxMgmt.indexTemplatesList.filterButtonLabel"
+        defaultMessage="Filter"
+      />
+    </EuiFilterButton>
+  );
+
+  return (
+    <EuiPopover
+      ownFocus
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      data-test-subj="filterList"
+    >
+      <div className="euiFilterSelect__items">
+        {Object.entries(filters).map(([filter, item], index) => (
+          <EuiFilterSelectItem
+            checked={(item as Filter).checked}
+            key={index}
+            onClick={() => toggleFilter(filter)}
+            data-test-subj="filterItem"
+          >
+            {(item as Filter).name}
+          </EuiFilterSelectItem>
+        ))}
+      </div>
+    </EuiPopover>
+  );
+}
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts
new file mode 100644
index 00000000000000..999b2e64cf133a
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './create_button_popover';
+export * from './filter_list_button';
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts
new file mode 100644
index 00000000000000..261a3d50d4626e
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ComponentTemplatesSelector } from './component_templates_selector';
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx
index c78d24f126e297..bfea8d39e1203a 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx
@@ -61,3 +61,5 @@ export const useComponentTemplatesContext = () => {
   }
   return ctx;
 };
+
+export const useApi = () => useComponentTemplatesContext().api;
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/index.ts
index 72e79a57ae4136..52235502e33dfc 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/index.ts
@@ -9,3 +9,5 @@ export { ComponentTemplatesProvider } from './component_templates_context';
 export { ComponentTemplateList } from './component_template_list';
 
 export { ComponentTemplateDetailsFlyout } from './component_template_details';
+
+export * from './component_template_selector';
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts b/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts
index 4a8cf965adfb92..63fe127c6b2d7f 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { ComponentTemplateListItem, ComponentTemplateDeserialized } from '../shared_imports';
+import { ComponentTemplateListItem, ComponentTemplateDeserialized, Error } from '../shared_imports';
 import { UIM_COMPONENT_TEMPLATE_DELETE_MANY, UIM_COMPONENT_TEMPLATE_DELETE } from '../constants';
 import { UseRequestHook, SendRequestHook } from './request';
 
@@ -15,7 +15,7 @@ export const getApi = (
   trackMetric: (type: 'loaded' | 'click' | 'count', eventName: string) => void
 ) => {
   function useLoadComponentTemplates() {
-    return useRequest<ComponentTemplateListItem[]>({
+    return useRequest<ComponentTemplateListItem[], Error>({
       path: `${apiBasePath}/component_templates`,
       method: 'get',
     });
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts b/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts
index 97ffa4d875ecbb..27ee2bb81caf19 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts
@@ -15,13 +15,15 @@ import {
   useRequest as _useRequest,
 } from '../shared_imports';
 
-export type UseRequestHook = <T = any>(config: UseRequestConfig) => UseRequestResponse<T>;
+export type UseRequestHook = <T = any, E = Error>(
+  config: UseRequestConfig
+) => UseRequestResponse<T, E>;
 export type SendRequestHook = (config: SendRequestConfig) => Promise<SendRequestResponse>;
 
-export const getUseRequest = (httpClient: HttpSetup): UseRequestHook => <T = any>(
+export const getUseRequest = (httpClient: HttpSetup): UseRequestHook => <T = any, E = Error>(
   config: UseRequestConfig
 ) => {
-  return _useRequest<T>(httpClient, config);
+  return _useRequest<T, E>(httpClient, config);
 };
 
 export const getSendRequest = (httpClient: HttpSetup): SendRequestHook => <T = any>(
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts b/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts
index 4e56f4a8c98189..bd19c2004894ce 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts
@@ -18,6 +18,7 @@ export {
   Error,
   useAuthorizationContext,
   NotAuthorizedSection,
+  Forms,
 } from '../../../../../../../src/plugins/es_ui_shared/public';
 
 export { TabMappings, TabSettings, TabAliases } from '../shared';
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/index.ts b/x-pack/plugins/index_management/public/application/components/shared/components/index.ts
index b67a9c355e723d..b0a76b828449cf 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/index.ts
@@ -12,3 +12,5 @@ export {
   StepSettingsContainer,
   CommonWizardSteps,
 } from './wizard_steps';
+
+export { TemplateContentIndicator } from './template_content_indicator';
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/template_content_indicator.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx
similarity index 100%
rename from x-pack/plugins/index_management/public/application/sections/home/template_list/components/template_content_indicator.tsx
rename to x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
index 0d28ec4b50c9ab..d71d72d873c8e5 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
@@ -23,13 +23,13 @@ import { Forms } from '../../../../../shared_imports';
 import { useJsonStep } from './use_json_step';
 
 interface Props {
-  defaultValue: { [key: string]: any };
+  defaultValue?: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
   esDocsBase: string;
 }
 
 export const StepAliases: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, onChange, esDocsBase }) => {
+  ({ defaultValue = {}, onChange, esDocsBase }) => {
     const { jsonContent, setJsonContent, error } = useJsonStep({
       defaultValue,
       onChange,
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx
index a5953ea00a1063..c8297e6f298b6c 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx
@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const StepAliasesContainer: React.FunctionComponent<Props> = ({ esDocsBase }) => {
-  const { defaultValue, updateContent } = Forms.useContent<CommonWizardSteps>('aliases');
+  const { defaultValue, updateContent } = Forms.useContent<CommonWizardSteps, 'aliases'>('aliases');
 
   return (
     <StepAliases defaultValue={defaultValue} onChange={updateContent} esDocsBase={esDocsBase} />
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx
index 2b9b689e17cb92..bbf7a04080a28a 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx
@@ -24,14 +24,14 @@ import {
 } from '../../../mappings_editor';
 
 interface Props {
-  defaultValue: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
-  indexSettings?: IndexSettings;
   esDocsBase: string;
+  defaultValue?: { [key: string]: any };
+  indexSettings?: IndexSettings;
 }
 
 export const StepMappings: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, onChange, indexSettings, esDocsBase }) => {
+  ({ defaultValue = {}, onChange, indexSettings, esDocsBase }) => {
     const [mappings, setMappings] = useState(defaultValue);
 
     const onMappingsEditorUpdate = useCallback<OnUpdateHandler>(
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx
index 34e05d88c651d7..38c4a85bbe0ff2 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx
@@ -14,7 +14,9 @@ interface Props {
 }
 
 export const StepMappingsContainer: React.FunctionComponent<Props> = ({ esDocsBase }) => {
-  const { defaultValue, updateContent, getData } = Forms.useContent<CommonWizardSteps>('mappings');
+  const { defaultValue, updateContent, getData } = Forms.useContent<CommonWizardSteps, 'mappings'>(
+    'mappings'
+  );
 
   return (
     <StepMappings
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
index 4eafcee0ef519c..dfe5ade9322651 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
@@ -23,13 +23,13 @@ import { Forms } from '../../../../../shared_imports';
 import { useJsonStep } from './use_json_step';
 
 interface Props {
-  defaultValue: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
   esDocsBase: string;
+  defaultValue?: { [key: string]: any };
 }
 
 export const StepSettings: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, onChange, esDocsBase }) => {
+  ({ defaultValue = {}, onChange, esDocsBase }) => {
     const { jsonContent, setJsonContent, error } = useJsonStep({
       defaultValue,
       onChange,
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx
index c540ddceb95c2f..42be2c4b28c106 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx
@@ -14,7 +14,9 @@ interface Props {
 }
 
 export const StepSettingsContainer = React.memo(({ esDocsBase }: Props) => {
-  const { defaultValue, updateContent } = Forms.useContent<CommonWizardSteps>('settings');
+  const { defaultValue, updateContent } = Forms.useContent<CommonWizardSteps, 'settings'>(
+    'settings'
+  );
 
   return (
     <StepSettings defaultValue={defaultValue} onChange={updateContent} esDocsBase={esDocsBase} />
diff --git a/x-pack/plugins/index_management/public/application/components/shared/index.ts b/x-pack/plugins/index_management/public/application/components/shared/index.ts
index 897e86c99eca0b..9b0eeb7d18f6e7 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/shared/index.ts
@@ -12,4 +12,5 @@ export {
   StepMappingsContainer,
   StepSettingsContainer,
   CommonWizardSteps,
+  TemplateContentIndicator,
 } from './components';
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
index b7e3e36e61814d..d8baca2db78a09 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
@@ -5,4 +5,5 @@
  */
 
 export { StepLogisticsContainer } from './step_logistics_container';
+export { StepComponentContainer } from './step_components_container';
 export { StepReviewContainer } from './step_review_container';
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx
new file mode 100644
index 00000000000000..01771f40f89eaf
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx
@@ -0,0 +1,112 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { useState, useCallback } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiTitle,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { ComponentTemplateListItem } from '../../../../../common';
+import { Forms } from '../../../../shared_imports';
+import { ComponentTemplatesSelector } from '../../component_templates';
+
+interface Props {
+  esDocsBase: string;
+  onChange: (content: Forms.Content) => void;
+  defaultValue?: string[];
+}
+
+const i18nTexts = {
+  description: (
+    <FormattedMessage
+      id="xpack.idxMgmt.formWizard.stepComponents.componentsDescription"
+      defaultMessage="Components templates let you save index settings, mappings and aliases and inherit from them in index templates."
+    />
+  ),
+};
+
+export const StepComponents = ({ defaultValue = [], onChange, esDocsBase }: Props) => {
+  const [state, setState] = useState<{
+    isLoadingComponents: boolean;
+    components: ComponentTemplateListItem[];
+  }>({ isLoadingComponents: true, components: [] });
+
+  const onComponentsLoaded = useCallback((components: ComponentTemplateListItem[]) => {
+    setState({ isLoadingComponents: false, components });
+  }, []);
+
+  const onComponentSelectionChange = useCallback(
+    (components: string[]) => {
+      onChange({ isValid: true, validate: async () => true, getData: () => components });
+    },
+    [onChange]
+  );
+
+  const showHeader = state.isLoadingComponents === true || state.components.length > 0;
+  const docUri = `${esDocsBase}/indices-component-template.html`;
+
+  const renderHeader = () => {
+    if (!showHeader) {
+      return null;
+    }
+
+    return (
+      <>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h2 data-test-subj="stepTitle">
+                <FormattedMessage
+                  id="xpack.idxMgmt.formWizard.stepComponents.stepTitle"
+                  defaultMessage="Components (optional)"
+                />
+              </h2>
+            </EuiTitle>
+
+            <EuiSpacer size="s" />
+
+            <EuiText>
+              <p>{i18nTexts.description}</p>
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty size="s" flush="right" href={docUri} target="_blank" iconType="help">
+              <FormattedMessage
+                id="xpack.idxMgmt.formWizard.stepComponents.docsButtonLabel"
+                defaultMessage="Component templates docs"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiSpacer size="l" />
+      </>
+    );
+  };
+
+  return (
+    <div data-test-subj="stepComponents">
+      {renderHeader()}
+
+      <ComponentTemplatesSelector
+        defaultValue={defaultValue}
+        onChange={onComponentSelectionChange}
+        onComponentsLoaded={onComponentsLoaded}
+        docUri={docUri}
+        emptyPrompt={{
+          text: i18nTexts.description,
+          showCreateButton: false,
+        }}
+      />
+    </div>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx
new file mode 100644
index 00000000000000..b9b09bf0e3d9ae
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+
+import { Forms } from '../../../../shared_imports';
+import { documentationService } from '../../../services/documentation';
+import { WizardContent } from '../template_form';
+import { StepComponents } from './step_components';
+
+export const StepComponentContainer = () => {
+  const { defaultValue, updateContent } = Forms.useContent<WizardContent, 'components'>(
+    'components'
+  );
+
+  return (
+    <StepComponents
+      defaultValue={defaultValue}
+      onChange={updateContent}
+      esDocsBase={documentationService.getEsDocsBase()}
+    />
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
index d011b4b06546aa..44ec4db0873f38 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
@@ -8,7 +8,15 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonEmpty, EuiSpacer } from '
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import { useForm, Form, getUseField, getFormRow, Field, Forms } from '../../../../shared_imports';
+import {
+  useForm,
+  Form,
+  getUseField,
+  getFormRow,
+  Field,
+  Forms,
+  JsonEditorField,
+} from '../../../../shared_imports';
 import { documentationService } from '../../../services/documentation';
 import { schemas, nameConfig, nameConfigWithoutValidations } from '../template_form_schemas';
 
@@ -47,6 +55,15 @@ const fieldsMeta = {
     }),
     testSubject: 'orderField',
   },
+  priority: {
+    title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityTitle', {
+      defaultMessage: 'Merge priority',
+    }),
+    description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityDescription', {
+      defaultMessage: 'The merge priority when multiple templates match an index.',
+    }),
+    testSubject: 'priorityField',
+  },
   version: {
     title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.versionTitle', {
       defaultMessage: 'Version',
@@ -62,20 +79,26 @@ interface Props {
   defaultValue: { [key: string]: any };
   onChange: (content: Forms.Content) => void;
   isEditing?: boolean;
+  isLegacy?: boolean;
 }
 
 export const StepLogistics: React.FunctionComponent<Props> = React.memo(
-  ({ defaultValue, isEditing, onChange }) => {
+  ({ defaultValue, isEditing = false, onChange, isLegacy = false }) => {
     const { form } = useForm({
       schema: schemas.logistics,
       defaultValue,
       options: { stripEmptyFields: false },
     });
 
+    /**
+     * When the consumer call validate() on this step, we submit the form so it enters the "isSubmitted" state
+     * and we can display the form errors on top of the forms if there are any.
+     */
+    const validate = async () => {
+      return (await form.submit()).isValid;
+    };
+
     useEffect(() => {
-      const validate = async () => {
-        return (await form.submit()).isValid;
-      };
       onChange({
         isValid: form.isValid,
         validate,
@@ -83,10 +106,22 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
       });
     }, [form.isValid, onChange]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const { name, indexPatterns, order, version } = fieldsMeta;
+    useEffect(() => {
+      const subscription = form.subscribe(({ data, isValid }) => {
+        onChange({
+          isValid,
+          validate,
+          getData: data.format,
+        });
+      });
+      return subscription.unsubscribe;
+    }, [onChange]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const { name, indexPatterns, order, priority, version } = fieldsMeta;
 
     return (
-      <Form form={form} data-test-subj="stepLogistics">
+      <>
+        {/* Header */}
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle>
@@ -114,46 +149,106 @@ export const StepLogistics: React.FunctionComponent<Props> = React.memo(
             </EuiButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
+
         <EuiSpacer size="l" />
-        {/* Name */}
-        <FormRow title={name.title} description={name.description}>
-          <UseField
-            path="name"
-            componentProps={{
-              ['data-test-subj']: name.testSubject,
-              euiFieldProps: { disabled: isEditing },
-            }}
-            config={isEditing ? nameConfigWithoutValidations : nameConfig}
-          />
-        </FormRow>
-        {/* Index patterns */}
-        <FormRow title={indexPatterns.title} description={indexPatterns.description}>
-          <UseField
-            path="indexPatterns"
-            componentProps={{
-              ['data-test-subj']: indexPatterns.testSubject,
-            }}
-          />
-        </FormRow>
-        {/* Order */}
-        <FormRow title={order.title} description={order.description}>
-          <UseField
-            path="order"
-            componentProps={{
-              ['data-test-subj']: order.testSubject,
-            }}
-          />
-        </FormRow>
-        {/* Version */}
-        <FormRow title={version.title} description={version.description}>
-          <UseField
-            path="version"
-            componentProps={{
-              ['data-test-subj']: version.testSubject,
-            }}
-          />
-        </FormRow>
-      </Form>
+
+        <Form
+          form={form}
+          isInvalid={form.isSubmitted && !form.isValid}
+          error={form.getErrors()}
+          data-test-subj="stepLogistics"
+        >
+          {/* Name */}
+          <FormRow title={name.title} description={name.description}>
+            <UseField
+              path="name"
+              componentProps={{
+                ['data-test-subj']: name.testSubject,
+                euiFieldProps: { disabled: isEditing },
+              }}
+              config={isEditing ? nameConfigWithoutValidations : nameConfig}
+            />
+          </FormRow>
+
+          {/* Index patterns */}
+          <FormRow title={indexPatterns.title} description={indexPatterns.description}>
+            <UseField
+              path="indexPatterns"
+              componentProps={{
+                ['data-test-subj']: indexPatterns.testSubject,
+              }}
+            />
+          </FormRow>
+
+          {/* Order */}
+          {isLegacy && (
+            <FormRow title={order.title} description={order.description}>
+              <UseField
+                path="order"
+                componentProps={{
+                  ['data-test-subj']: order.testSubject,
+                }}
+              />
+            </FormRow>
+          )}
+
+          {/* Priority */}
+          {isLegacy === false && (
+            <FormRow title={priority.title} description={priority.description}>
+              <UseField
+                path="priority"
+                componentProps={{
+                  ['data-test-subj']: priority.testSubject,
+                }}
+              />
+            </FormRow>
+          )}
+
+          {/* Version */}
+          <FormRow title={version.title} description={version.description}>
+            <UseField
+              path="version"
+              componentProps={{
+                ['data-test-subj']: version.testSubject,
+              }}
+            />
+          </FormRow>
+
+          {/* _meta */}
+          {isLegacy === false && (
+            <FormRow
+              title={i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldTitle', {
+                defaultMessage: '_meta field',
+              })}
+              description={
+                <>
+                  <FormattedMessage
+                    id="xpack.idxMgmt.templateForm.stepLogistics.metaFieldDescription"
+                    defaultMessage="Use the _meta field to store any metadata you want."
+                  />
+                </>
+              }
+            >
+              <UseField
+                path="_meta"
+                component={JsonEditorField}
+                componentProps={{
+                  euiCodeEditorProps: {
+                    height: '280px',
+                    'aria-label': i18n.translate(
+                      'xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorAriaLabel',
+                      {
+                        defaultMessage: '_meta field data editor',
+                      }
+                    ),
+                    'data-test-subj': 'metaField',
+                  },
+                }}
+              />
+            </FormRow>
+          )}
+        </Form>
+      </>
     );
   }
 );
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx
index 867ecff799858d..68a3419499088b 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx
@@ -10,13 +10,19 @@ import { WizardContent } from '../template_form';
 import { StepLogistics } from './step_logistics';
 
 interface Props {
+  isLegacy?: boolean;
   isEditing?: boolean;
 }
 
-export const StepLogisticsContainer = ({ isEditing = false }: Props) => {
-  const { defaultValue, updateContent } = Forms.useContent<WizardContent>('logistics');
+export const StepLogisticsContainer = ({ isEditing, isLegacy }: Props) => {
+  const { defaultValue, updateContent } = Forms.useContent<WizardContent, 'logistics'>('logistics');
 
   return (
-    <StepLogistics defaultValue={defaultValue} onChange={updateContent} isEditing={isEditing} />
+    <StepLogistics
+      defaultValue={defaultValue}
+      onChange={updateContent}
+      isEditing={isEditing}
+      isLegacy={isLegacy}
+    />
   );
 };
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
index ab49736d8c0bb3..5d0eab93c4f02b 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
@@ -22,10 +22,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { serializers } from '../../../../shared_imports';
 
-import {
-  serializeLegacyTemplate,
-  serializeTemplate,
-} from '../../../../../common/lib/template_serialization';
+import { serializeLegacyTemplate, serializeTemplate } from '../../../../../common/lib';
 import { TemplateDeserialized, getTemplateParameter } from '../../../../../common';
 import { doMappingsHaveType } from '../../mappings_editor/lib';
 import { WizardSection } from '../template_form';
@@ -67,6 +64,9 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
       indexPatterns,
       version,
       order,
+      priority,
+      composedOf,
+      _meta,
       _kbnMeta: { isLegacy },
     } = template!;
 
@@ -97,6 +97,7 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiDescriptionList textStyle="reverse">
+              {/* Index patterns */}
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.idxMgmt.templateForm.stepReview.summaryTab.indexPatternsLabel"
@@ -124,16 +125,34 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
                 )}
               </EuiDescriptionListDescription>
 
-              <EuiDescriptionListTitle>
-                <FormattedMessage
-                  id="xpack.idxMgmt.templateForm.stepReview.summaryTab.orderLabel"
-                  defaultMessage="Order"
-                />
-              </EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                {order ? order : <NoneDescriptionText />}
-              </EuiDescriptionListDescription>
+              {/* Priority / Order */}
+              {isLegacy ? (
+                <>
+                  <EuiDescriptionListTitle>
+                    <FormattedMessage
+                      id="xpack.idxMgmt.templateForm.stepReview.summaryTab.orderLabel"
+                      defaultMessage="Order"
+                    />
+                  </EuiDescriptionListTitle>
+                  <EuiDescriptionListDescription>
+                    {order ? order : <NoneDescriptionText />}
+                  </EuiDescriptionListDescription>
+                </>
+              ) : (
+                <>
+                  <EuiDescriptionListTitle>
+                    <FormattedMessage
+                      id="xpack.idxMgmt.templateForm.stepReview.summaryTab.priorityLabel"
+                      defaultMessage="Priority"
+                    />
+                  </EuiDescriptionListTitle>
+                  <EuiDescriptionListDescription>
+                    {priority ? priority : <NoneDescriptionText />}
+                  </EuiDescriptionListDescription>
+                </>
+              )}
 
+              {/* Version */}
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.idxMgmt.templateForm.stepReview.summaryTab.versionLabel"
@@ -143,11 +162,47 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
               <EuiDescriptionListDescription>
                 {version ? version : <NoneDescriptionText />}
               </EuiDescriptionListDescription>
+
+              {/* components */}
+              {isLegacy !== true && (
+                <>
+                  <EuiDescriptionListTitle>
+                    <FormattedMessage
+                      id="xpack.idxMgmt.templateForm.stepReview.summaryTab.componentsLabel"
+                      defaultMessage="Components"
+                    />
+                  </EuiDescriptionListTitle>
+                  <EuiDescriptionListDescription>
+                    {composedOf && composedOf.length > 0 ? (
+                      composedOf.length > 1 ? (
+                        <EuiText>
+                          <ul>
+                            {composedOf.map((component: string, i: number) => {
+                              return (
+                                <li key={`${component}-${i}`}>
+                                  <EuiTitle size="xs">
+                                    <span>{component}</span>
+                                  </EuiTitle>
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        </EuiText>
+                      ) : (
+                        composedOf.toString()
+                      )
+                    ) : (
+                      <NoneDescriptionText />
+                    )}
+                  </EuiDescriptionListDescription>
+                </>
+              )}
             </EuiDescriptionList>
           </EuiFlexItem>
 
           <EuiFlexItem>
             <EuiDescriptionList textStyle="reverse">
+              {/* Index settings */}
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.idxMgmt.templateForm.stepReview.summaryTab.settingsLabel"
@@ -157,6 +212,8 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
               <EuiDescriptionListDescription>
                 {getDescriptionText(serializedSettings)}
               </EuiDescriptionListDescription>
+
+              {/* Mappings */}
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.idxMgmt.templateForm.stepReview.summaryTab.mappingLabel"
@@ -166,6 +223,8 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
               <EuiDescriptionListDescription>
                 {getDescriptionText(serializedMappings)}
               </EuiDescriptionListDescription>
+
+              {/* Aliases */}
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.idxMgmt.templateForm.stepReview.summaryTab.aliasesLabel"
@@ -175,6 +234,21 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
               <EuiDescriptionListDescription>
                 {getDescriptionText(serializedAliases)}
               </EuiDescriptionListDescription>
+
+              {/* Metadata (optional) */}
+              {isLegacy !== true && _meta && (
+                <>
+                  <EuiDescriptionListTitle data-test-subj="metaTitle">
+                    <FormattedMessage
+                      id="xpack.idxMgmt.templateForm.stepReview.summaryTab.metaLabel"
+                      defaultMessage="Metadata"
+                    />
+                  </EuiDescriptionListTitle>
+                  <EuiDescriptionListDescription>
+                    <EuiCodeBlock lang="json">{JSON.stringify(_meta, null, 2)}</EuiCodeBlock>
+                  </EuiDescriptionListDescription>
+                </>
+              )}
             </EuiDescriptionList>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -183,7 +257,8 @@ export const StepReview: React.FunctionComponent<Props> = React.memo(
 
     const RequestTab = () => {
       const includeTypeName = doMappingsHaveType(template!.template.mappings);
-      const endpoint = `PUT _template/${name || '<templateName>'}${
+      const esApiEndpoint = isLegacy ? '_template' : '_index_template';
+      const endpoint = `PUT ${esApiEndpoint}/${name || '<templateName>'}${
         includeTypeName ? '?include_type_name' : ''
       }`;
       const templateString = JSON.stringify(serializedTemplate, null, 2);
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
index 8a2c991aea8d07..269ad942510746 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
@@ -8,10 +8,10 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSpacer } from '@elastic/eui';
 
-import { TemplateDeserialized, CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../../common';
+import { TemplateDeserialized } from '../../../../common';
 import { serializers, Forms } from '../../../shared_imports';
 import { SectionError } from '../section_error';
-import { StepLogisticsContainer, StepReviewContainer } from './steps';
+import { StepLogisticsContainer, StepComponentContainer, StepReviewContainer } from './steps';
 import {
   CommonWizardSteps,
   StepSettingsContainer,
@@ -28,12 +28,14 @@ interface Props {
   clearSaveError: () => void;
   isSaving: boolean;
   saveError: any;
+  isLegacy?: boolean;
   defaultValue?: TemplateDeserialized;
   isEditing?: boolean;
 }
 
 export interface WizardContent extends CommonWizardSteps {
   logistics: Omit<TemplateDeserialized, '_kbnMeta' | 'template'>;
+  components: TemplateDeserialized['composedOf'];
 }
 
 export type WizardSection = keyof WizardContent | 'review';
@@ -45,6 +47,12 @@ const wizardSections: { [id: string]: { id: WizardSection; label: string } } = {
       defaultMessage: 'Logistics',
     }),
   },
+  components: {
+    id: 'components',
+    label: i18n.translate('xpack.idxMgmt.templateForm.steps.componentsStepName', {
+      defaultMessage: 'Components',
+    }),
+  },
   settings: {
     id: 'settings',
     label: i18n.translate('xpack.idxMgmt.templateForm.steps.settingsStepName', {
@@ -72,9 +80,18 @@ const wizardSections: { [id: string]: { id: WizardSection; label: string } } = {
 };
 
 export const TemplateForm = ({
-  defaultValue = {
+  defaultValue,
+  isEditing,
+  isSaving,
+  isLegacy = false,
+  saveError,
+  clearSaveError,
+  onSave,
+}: Props) => {
+  const indexTemplate = defaultValue ?? {
     name: '',
     indexPatterns: [],
+    composedOf: [],
     template: {
       settings: {},
       mappings: {},
@@ -82,26 +99,23 @@ export const TemplateForm = ({
     },
     _kbnMeta: {
       isManaged: false,
-      isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT,
+      isLegacy,
     },
-  },
-  isEditing,
-  isSaving,
-  saveError,
-  clearSaveError,
-  onSave,
-}: Props) => {
+  };
+
   const {
     template: { settings, mappings, aliases },
+    composedOf,
     _kbnMeta,
     ...logistics
-  } = defaultValue;
+  } = indexTemplate;
 
   const wizardDefaultValue: WizardContent = {
     logistics,
     settings,
     mappings,
     aliases,
+    components: indexTemplate.composedOf,
   };
 
   const i18nTexts = {
@@ -139,6 +153,7 @@ export const TemplateForm = ({
   ): TemplateDeserialized => ({
     ...initialTemplate,
     ...wizardData.logistics,
+    composedOf: wizardData.components,
     template: {
       settings: wizardData.settings,
       mappings: wizardData.mappings,
@@ -148,7 +163,7 @@ export const TemplateForm = ({
 
   const onSaveTemplate = useCallback(
     async (wizardData: WizardContent) => {
-      const template = buildTemplateObject(defaultValue)(wizardData);
+      const template = buildTemplateObject(indexTemplate)(wizardData);
 
       // We need to strip empty string, otherwise if the "order" or "version"
       // are not set, they will be empty string and ES expect a number for those parameters.
@@ -160,7 +175,7 @@ export const TemplateForm = ({
 
       clearSaveError();
     },
-    [defaultValue, onSave, clearSaveError]
+    [indexTemplate, onSave, clearSaveError]
   );
 
   return (
@@ -177,9 +192,15 @@ export const TemplateForm = ({
         label={wizardSections.logistics.label}
         isRequired
       >
-        <StepLogisticsContainer isEditing={isEditing} />
+        <StepLogisticsContainer isEditing={isEditing} isLegacy={indexTemplate._kbnMeta.isLegacy} />
       </FormWizardStep>
 
+      {indexTemplate._kbnMeta.isLegacy !== true && (
+        <FormWizardStep id={wizardSections.components.id} label={wizardSections.components.label}>
+          <StepComponentContainer />
+        </FormWizardStep>
+      )}
+
       <FormWizardStep id={wizardSections.settings.id} label={wizardSections.settings.label}>
         <StepSettingsContainer esDocsBase={documentationService.getEsDocsBase()} />
       </FormWizardStep>
@@ -193,7 +214,7 @@ export const TemplateForm = ({
       </FormWizardStep>
 
       <FormWizardStep id={wizardSections.review.id} label={wizardSections.review.label}>
-        <StepReviewContainer getTemplateData={buildTemplateObject(defaultValue)} />
+        <StepReviewContainer getTemplateData={buildTemplateObject(indexTemplate)} />
       </FormWizardStep>
     </FormWizard>
   );
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
index 9ff73b71adf50d..5af3b4dd00c4ff 100644
--- a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCode } from '@elastic/eui';
 
 import {
   FormSchema,
@@ -28,6 +29,7 @@ const {
   startsWithField,
   indexPatternField,
   lowerCaseStringField,
+  isJsonField,
 } = fieldValidators;
 const { toInt } = fieldFormatters;
 const indexPatternInvalidCharacters = INVALID_INDEX_PATTERN_CHARS.join(' ');
@@ -133,6 +135,13 @@ export const schemas: Record<string, FormSchema> = {
       }),
       formatters: [toInt],
     },
+    priority: {
+      type: FIELD_TYPES.NUMBER,
+      label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.fieldPriorityLabel', {
+        defaultMessage: 'Priority (optional)',
+      }),
+      formatters: [toInt],
+    },
     version: {
       type: FIELD_TYPES.NUMBER,
       label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.fieldVersionLabel', {
@@ -140,5 +149,43 @@ export const schemas: Record<string, FormSchema> = {
       }),
       formatters: [toInt],
     },
+    _meta: {
+      label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorLabel', {
+        defaultMessage: '_meta field data (optional)',
+      }),
+      helpText: (
+        <FormattedMessage
+          id="xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorHelpText"
+          defaultMessage="Use JSON format: {code}"
+          values={{
+            code: <EuiCode>{JSON.stringify({ arbitrary_data: 'anything_goes' })}</EuiCode>,
+          }}
+        />
+      ),
+      validations: [
+        {
+          validator: isJsonField(
+            i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorJsonError', {
+              defaultMessage: 'The _meta field JSON is not valid.',
+            }),
+            { allowEmptyString: true }
+          ),
+        },
+      ],
+      deserializer: (value: any) => {
+        if (value === '') {
+          return value;
+        }
+        return JSON.stringify(value, null, 2);
+      },
+      serializer: (value: string) => {
+        try {
+          return JSON.parse(value);
+        } catch (error) {
+          // swallow error and return non-parsed value;
+          return value;
+        }
+      },
+    },
   },
 };
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts
index dcaba319bb21a8..156d792c26f1db 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts
@@ -5,4 +5,3 @@
  */
 
 export * from './filter_list_button';
-export * from './template_content_indicator';
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx
index ab4ce6a61a9b64..f85b14ea0d2d58 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx
@@ -46,7 +46,7 @@ import { TabSummary } from '../../template_details/tabs';
 interface Props {
   template: { name: string; isLegacy?: boolean };
   onClose: () => void;
-  editTemplate: (name: string, isLegacy?: boolean) => void;
+  editTemplate: (name: string, isLegacy: boolean) => void;
   cloneTemplate: (name: string, isLegacy?: boolean) => void;
   reload: () => Promise<SendRequestResponse>;
 }
@@ -290,7 +290,7 @@ export const LegacyTemplateDetails: React.FunctionComponent<Props> = ({
                               }
                             ),
                             icon: 'pencil',
-                            onClick: () => editTemplate(templateName, isLegacy),
+                            onClick: () => editTemplate(templateName, true),
                             disabled: isManaged,
                           },
                           {
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx
index edce05018ce395..99915c2b70e2ad 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx
@@ -19,7 +19,7 @@ import { useServices } from '../../../../../app_context';
 interface Props {
   templates: TemplateListItem[];
   reload: () => Promise<SendRequestResponse>;
-  editTemplate: (name: string, isLegacy?: boolean) => void;
+  editTemplate: (name: string, isLegacy: boolean) => void;
   cloneTemplate: (name: string, isLegacy?: boolean) => void;
   history: ScopedHistory;
 }
@@ -150,8 +150,8 @@ export const LegacyTemplateTable: React.FunctionComponent<Props> = ({
           ),
           icon: 'pencil',
           type: 'icon',
-          onClick: ({ name, _kbnMeta: { isLegacy } }: TemplateListItem) => {
-            editTemplate(name, isLegacy);
+          onClick: ({ name }: TemplateListItem) => {
+            editTemplate(name, true);
           },
           enabled: ({ _kbnMeta: { isManaged } }: TemplateListItem) => !isManaged,
         },
@@ -252,7 +252,10 @@ export const LegacyTemplateTable: React.FunctionComponent<Props> = ({
         iconType="plusInCircle"
         data-test-subj="createLegacyTemplateButton"
         key="createTemplateButton"
-        {...reactRouterNavigate(history, '/create_template')}
+        {...reactRouterNavigate(history, {
+          pathname: '/create_template',
+          search: 'legacy=true',
+        })}
       >
         <FormattedMessage
           id="xpack.idxMgmt.templateList.legacyTable.createLegacyTemplatesButtonLabel"
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
index fc3d5125e30667..956b0481dceedc 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
@@ -142,7 +142,12 @@ export const TemplateList: React.FunctionComponent<RouteComponentProps<MatchPara
     showComposableTemplateTable ? (
       <>
         <EuiSpacer size="l" />
-        <TemplateTable templates={filteredTemplates.templates} reload={reload} />
+        <TemplateTable
+          templates={filteredTemplates.templates}
+          reload={reload}
+          editTemplate={editTemplate}
+          history={history as ScopedHistory}
+        />
       </>
     ) : null;
 
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
index 7c3f8c07a7e048..6a5328f76fb069 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
@@ -7,18 +7,27 @@
 import React, { useState, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiInMemoryTable, EuiBasicTableColumn } from '@elastic/eui';
+import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton } from '@elastic/eui';
+import { ScopedHistory } from 'kibana/public';
+
 import { TemplateListItem } from '../../../../../../common';
 import { TemplateDeleteModal } from '../../../../components';
-import { SendRequestResponse } from '../../../../../shared_imports';
-import { TemplateContentIndicator } from '../components';
+import { SendRequestResponse, reactRouterNavigate } from '../../../../../shared_imports';
+import { TemplateContentIndicator } from '../../../../components/shared';
 
 interface Props {
   templates: TemplateListItem[];
   reload: () => Promise<SendRequestResponse>;
+  editTemplate: (name: string) => void;
+  history: ScopedHistory;
 }
 
-export const TemplateTable: React.FunctionComponent<Props> = ({ templates, reload }) => {
+export const TemplateTable: React.FunctionComponent<Props> = ({
+  templates,
+  reload,
+  history,
+  editTemplate,
+}) => {
   const [templatesToDelete, setTemplatesToDelete] = useState<
     Array<{ name: string; isLegacy?: boolean }>
   >([]);
@@ -80,13 +89,11 @@ export const TemplateTable: React.FunctionComponent<Props> = ({ templates, reloa
       sortable: true,
     },
     {
-      field: 'hasMappings',
       name: i18n.translate('xpack.idxMgmt.templateList.table.overridesColumnTitle', {
         defaultMessage: 'Overrides',
       }),
       truncateText: true,
-      sortable: false,
-      render: (_, item) => (
+      render: (item: TemplateListItem) => (
         <TemplateContentIndicator
           mappings={item.hasMappings}
           settings={item.hasSettings}
@@ -94,6 +101,28 @@ export const TemplateTable: React.FunctionComponent<Props> = ({ templates, reloa
         />
       ),
     },
+    {
+      name: i18n.translate('xpack.idxMgmt.templateList.table.actionColumnTitle', {
+        defaultMessage: 'Actions',
+      }),
+      actions: [
+        {
+          name: i18n.translate('xpack.idxMgmt.templateList.table.actionEditText', {
+            defaultMessage: 'Edit',
+          }),
+          isPrimary: true,
+          description: i18n.translate('xpack.idxMgmt.templateList.table.actionEditDecription', {
+            defaultMessage: 'Edit this template',
+          }),
+          icon: 'pencil',
+          type: 'icon',
+          onClick: ({ name }: TemplateListItem) => {
+            editTemplate(name);
+          },
+          enabled: ({ _kbnMeta: { isManaged } }: TemplateListItem) => !isManaged,
+        },
+      ],
+    },
   ];
 
   const pagination = {
@@ -112,6 +141,20 @@ export const TemplateTable: React.FunctionComponent<Props> = ({ templates, reloa
     box: {
       incremental: true,
     },
+    toolsRight: [
+      <EuiButton
+        iconType="plusInCircle"
+        data-test-subj="createTemplateButton"
+        key="createTemplateButton"
+        fill
+        {...reactRouterNavigate(history, '/create_template')}
+      >
+        <FormattedMessage
+          id="xpack.idxMgmt.templateList.table.createTemplatesButtonLabel"
+          defaultMessage="Create template"
+        />
+      </EuiButton>,
+    ],
   };
 
   return (
diff --git a/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx
index f567b9835d53df..fb82f52968eb4b 100644
--- a/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx
@@ -7,6 +7,8 @@ import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { useLocation } from 'react-router-dom';
+import { parse } from 'query-string';
 
 import { TemplateForm } from '../../components';
 import { breadcrumbService } from '../../services/breadcrumbs';
@@ -17,6 +19,8 @@ import { getTemplateDetailsLink } from '../../services/routing';
 export const TemplateCreate: React.FunctionComponent<RouteComponentProps> = ({ history }) => {
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [saveError, setSaveError] = useState<any>(null);
+  const search = parse(useLocation().search.substring(1));
+  const isLegacy = Boolean(search.legacy);
 
   const onSave = async (template: TemplateDeserialized) => {
     const { name } = template;
@@ -49,10 +53,17 @@ export const TemplateCreate: React.FunctionComponent<RouteComponentProps> = ({ h
       <EuiPageContent>
         <EuiTitle size="l">
           <h1 data-test-subj="pageTitle">
-            <FormattedMessage
-              id="xpack.idxMgmt.createTemplate.createTemplatePageTitle"
-              defaultMessage="Create template"
-            />
+            {isLegacy ? (
+              <FormattedMessage
+                id="xpack.idxMgmt.createTemplate.createLegacyTemplatePageTitle"
+                defaultMessage="Create legacy template"
+              />
+            ) : (
+              <FormattedMessage
+                id="xpack.idxMgmt.createTemplate.createTemplatePageTitle"
+                defaultMessage="Create template"
+              />
+            )}
           </h1>
         </EuiTitle>
         <EuiSpacer size="l" />
@@ -61,6 +72,7 @@ export const TemplateCreate: React.FunctionComponent<RouteComponentProps> = ({ h
           isSaving={isSaving}
           saveError={saveError}
           clearSaveError={clearSaveError}
+          isLegacy={isLegacy}
         />
       </EuiPageContent>
     </EuiPageBody>
diff --git a/x-pack/plugins/index_management/public/application/services/routing.ts b/x-pack/plugins/index_management/public/application/services/routing.ts
index 2a895196189d09..8831fa2368f471 100644
--- a/x-pack/plugins/index_management/public/application/services/routing.ts
+++ b/x-pack/plugins/index_management/public/application/services/routing.ts
@@ -16,11 +16,19 @@ export const getTemplateDetailsLink = (name: string, isLegacy?: boolean, withHas
 };
 
 export const getTemplateEditLink = (name: string, isLegacy?: boolean) => {
-  return encodeURI(`/edit_template/${encodePathForReactRouter(name)}?legacy=${isLegacy === true}`);
+  let url = `/edit_template/${encodePathForReactRouter(name)}`;
+  if (isLegacy) {
+    url = `${url}?legacy=true`;
+  }
+  return encodeURI(url);
 };
 
 export const getTemplateCloneLink = (name: string, isLegacy?: boolean) => {
-  return encodeURI(`/clone_template/${encodePathForReactRouter(name)}?legacy=${isLegacy === true}`);
+  let url = `/clone_template/${encodePathForReactRouter(name)}`;
+  if (isLegacy) {
+    url = `${url}?legacy=true`;
+  }
+  return encodeURI(url);
 };
 
 export const decodePathFromReactRouter = (pathname: string): string => {
diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts
index 69cd07ba6dba01..ad221ae73fecf5 100644
--- a/x-pack/plugins/index_management/public/shared_imports.ts
+++ b/x-pack/plugins/index_management/public/shared_imports.ts
@@ -29,7 +29,11 @@ export {
   serializers,
 } from '../../../../src/plugins/es_ui_shared/static/forms/helpers';
 
-export { getFormRow, Field } from '../../../../src/plugins/es_ui_shared/static/forms/components';
+export {
+  getFormRow,
+  Field,
+  JsonEditorField,
+} from '../../../../src/plugins/es_ui_shared/static/forms/components';
 
 export { isJSON } from '../../../../src/plugins/es_ui_shared/static/validators/string';
 
diff --git a/x-pack/plugins/index_management/server/client/elasticsearch.ts b/x-pack/plugins/index_management/server/client/elasticsearch.ts
index 6c0fbe3dd6a652..9f8bce241ae69b 100644
--- a/x-pack/plugins/index_management/server/client/elasticsearch.ts
+++ b/x-pack/plugins/index_management/server/client/elasticsearch.ts
@@ -126,6 +126,20 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any)
     method: 'GET',
   });
 
+  dataManagement.getComposableIndexTemplate = ca({
+    urls: [
+      {
+        fmt: '/_index_template/<%=name%>',
+        req: {
+          name: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    method: 'GET',
+  });
+
   dataManagement.saveComposableIndexTemplate = ca({
     urls: [
       {
@@ -154,4 +168,18 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any)
     ],
     method: 'DELETE',
   });
+
+  dataManagement.existsTemplate = ca({
+    urls: [
+      {
+        fmt: '/_index_template/<%=name%>',
+        req: {
+          name: {
+            type: 'string',
+          },
+        },
+      },
+    ],
+    method: 'HEAD',
+  });
 };
diff --git a/x-pack/plugins/index_management/server/routes/api/templates/lib.ts b/x-pack/plugins/index_management/server/routes/api/templates/lib.ts
new file mode 100644
index 00000000000000..aae04269c5eb44
--- /dev/null
+++ b/x-pack/plugins/index_management/server/routes/api/templates/lib.ts
@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { serializeTemplate, serializeLegacyTemplate } from '../../../../common/lib';
+import { TemplateDeserialized, LegacyTemplateSerialized } from '../../../../common';
+import { CallAsCurrentUser } from '../../../types';
+
+export const doesTemplateExist = async ({
+  name,
+  callAsCurrentUser,
+  isLegacy,
+}: {
+  name: string;
+  callAsCurrentUser: CallAsCurrentUser;
+  isLegacy?: boolean;
+}) => {
+  if (isLegacy) {
+    return await callAsCurrentUser('indices.existsTemplate', { name });
+  }
+  return await callAsCurrentUser('dataManagement.existsTemplate', { name });
+};
+
+export const saveTemplate = async ({
+  template,
+  callAsCurrentUser,
+  isLegacy,
+  include_type_name,
+}: {
+  template: TemplateDeserialized;
+  callAsCurrentUser: CallAsCurrentUser;
+  isLegacy?: boolean;
+  include_type_name?: string;
+}) => {
+  const serializedTemplate = isLegacy
+    ? serializeLegacyTemplate(template)
+    : serializeTemplate(template);
+
+  if (isLegacy) {
+    const {
+      order,
+      index_patterns,
+      version,
+      settings,
+      mappings,
+      aliases,
+    } = serializedTemplate as LegacyTemplateSerialized;
+
+    return await callAsCurrentUser('indices.putTemplate', {
+      name: template.name,
+      order,
+      include_type_name,
+      body: {
+        index_patterns,
+        version,
+        settings,
+        mappings,
+        aliases,
+      },
+    });
+  }
+
+  return await callAsCurrentUser('dataManagement.saveComposableIndexTemplate', {
+    name: template.name,
+    body: serializedTemplate,
+  });
+};
diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts
index 89460ff89aacf2..f9fcc9bf3a9c90 100644
--- a/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts
+++ b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts
@@ -8,10 +8,10 @@ import { i18n } from '@kbn/i18n';
 import { schema, TypeOf } from '@kbn/config-schema';
 
 import { TemplateDeserialized } from '../../../../common';
-import { serializeLegacyTemplate } from '../../../../common/lib';
 import { RouteDependencies } from '../../../types';
 import { addBasePath } from '../index';
 import { templateSchema } from './validate_schemas';
+import { saveTemplate, doesTemplateExist } from './lib';
 
 const bodySchema = templateSchema;
 const querySchema = schema.object({
@@ -22,23 +22,18 @@ export function registerCreateRoute({ router, license, lib }: RouteDependencies)
   router.post(
     { path: addBasePath('/index_templates'), validate: { body: bodySchema, query: querySchema } },
     license.guardApiRoute(async (ctx, req, res) => {
-      const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client;
+      const { callAsCurrentUser } = ctx.dataManagement!.client;
       const { include_type_name } = req.query as TypeOf<typeof querySchema>;
       const template = req.body as TemplateDeserialized;
       const {
         _kbnMeta: { isLegacy },
       } = template;
 
-      if (!isLegacy) {
-        return res.badRequest({ body: 'Only legacy index templates can be created.' });
-      }
-
-      const serializedTemplate = serializeLegacyTemplate(template);
-      const { order, index_patterns, version, settings, mappings, aliases } = serializedTemplate;
-
       // Check that template with the same name doesn't already exist
-      const templateExists = await callAsCurrentUser('indices.existsTemplate', {
+      const templateExists = await doesTemplateExist({
         name: template.name,
+        callAsCurrentUser,
+        isLegacy,
       });
 
       if (templateExists) {
@@ -56,17 +51,11 @@ export function registerCreateRoute({ router, license, lib }: RouteDependencies)
 
       try {
         // Otherwise create new index template
-        const response = await callAsCurrentUser('indices.putTemplate', {
-          name: template.name,
-          order,
+        const response = await saveTemplate({
+          template,
+          callAsCurrentUser,
+          isLegacy,
           include_type_name,
-          body: {
-            index_patterns,
-            version,
-            settings,
-            mappings,
-            aliases,
-          },
         });
 
         return res.ok({ body: response });
diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts
index af6c139bcd416c..23c8635740c7e6 100644
--- a/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts
+++ b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts
@@ -6,9 +6,10 @@
 import { schema, TypeOf } from '@kbn/config-schema';
 
 import {
+  deserializeTemplate,
+  deserializeTemplateList,
   deserializeLegacyTemplate,
   deserializeLegacyTemplateList,
-  deserializeTemplateList,
 } from '../../../../common/lib';
 import { getManagedTemplatePrefix } from '../../../lib/get_managed_templates';
 import { RouteDependencies } from '../../../types';
@@ -18,22 +19,21 @@ export function registerGetAllRoute({ router, license }: RouteDependencies) {
   router.get(
     { path: addBasePath('/index_templates'), validate: false },
     license.guardApiRoute(async (ctx, req, res) => {
-      const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client;
+      const { callAsCurrentUser } = ctx.dataManagement!.client;
       const managedTemplatePrefix = await getManagedTemplatePrefix(callAsCurrentUser);
 
-      const _legacyTemplates = await callAsCurrentUser('indices.getTemplate', {
+      const legacyTemplatesEs = await callAsCurrentUser('indices.getTemplate', {
         include_type_name: true,
       });
-      const { index_templates: _templates } = await callAsCurrentUser('transport.request', {
-        path: '_index_template',
-        method: 'GET',
-      });
+      const { index_templates: templatesEs } = await callAsCurrentUser(
+        'dataManagement.getComposableIndexTemplates'
+      );
 
       const legacyTemplates = deserializeLegacyTemplateList(
-        _legacyTemplates,
+        legacyTemplatesEs,
         managedTemplatePrefix
       );
-      const templates = deserializeTemplateList(_templates, managedTemplatePrefix);
+      const templates = deserializeTemplateList(templatesEs, managedTemplatePrefix);
 
       const body = {
         templates,
@@ -51,7 +51,7 @@ const paramsSchema = schema.object({
 
 // Require the template format version (V1 or V2) to be provided as Query param
 const querySchema = schema.object({
-  legacy: schema.maybe(schema.boolean()),
+  legacy: schema.maybe(schema.oneOf([schema.literal('true'), schema.literal('false')])),
 });
 
 export function registerGetOneRoute({ router, license, lib }: RouteDependencies) {
@@ -62,28 +62,40 @@ export function registerGetOneRoute({ router, license, lib }: RouteDependencies)
     },
     license.guardApiRoute(async (ctx, req, res) => {
       const { name } = req.params as TypeOf<typeof paramsSchema>;
-      const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client;
+      const { callAsCurrentUser } = ctx.dataManagement!.client;
 
-      const { legacy } = req.query as TypeOf<typeof querySchema>;
-
-      if (!legacy) {
-        return res.badRequest({ body: 'Only index template version 1 can be fetched.' });
-      }
+      const isLegacy = (req.query as TypeOf<typeof querySchema>).legacy === 'true';
 
       try {
         const managedTemplatePrefix = await getManagedTemplatePrefix(callAsCurrentUser);
-        const indexTemplateByName = await callAsCurrentUser('indices.getTemplate', {
-          name,
-          include_type_name: true,
-        });
 
-        if (indexTemplateByName[name]) {
-          return res.ok({
-            body: deserializeLegacyTemplate(
-              { ...indexTemplateByName[name], name },
-              managedTemplatePrefix
-            ),
+        if (isLegacy) {
+          const indexTemplateByName = await callAsCurrentUser('indices.getTemplate', {
+            name,
+            include_type_name: true,
           });
+
+          if (indexTemplateByName[name]) {
+            return res.ok({
+              body: deserializeLegacyTemplate(
+                { ...indexTemplateByName[name], name },
+                managedTemplatePrefix
+              ),
+            });
+          }
+        } else {
+          const {
+            index_templates: indexTemplates,
+          } = await callAsCurrentUser('dataManagement.getComposableIndexTemplate', { name });
+
+          if (indexTemplates.length > 0) {
+            return res.ok({
+              body: deserializeTemplate(
+                { ...indexTemplates[0].index_template, name },
+                managedTemplatePrefix
+              ),
+            });
+          }
         }
 
         return res.notFound();
diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts
index 27cd03d80b84bc..1458b8709fd273 100644
--- a/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts
+++ b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts
@@ -6,10 +6,10 @@
 import { schema, TypeOf } from '@kbn/config-schema';
 
 import { TemplateDeserialized } from '../../../../common';
-import { serializeLegacyTemplate } from '../../../../common/lib';
 import { RouteDependencies } from '../../../types';
 import { addBasePath } from '../index';
 import { templateSchema } from './validate_schemas';
+import { saveTemplate, doesTemplateExist } from './lib';
 
 const bodySchema = templateSchema;
 const paramsSchema = schema.object({
@@ -26,7 +26,7 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies)
       validate: { body: bodySchema, params: paramsSchema, query: querySchema },
     },
     license.guardApiRoute(async (ctx, req, res) => {
-      const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client;
+      const { callAsCurrentUser } = ctx.dataManagement!.client;
       const { name } = req.params as typeof paramsSchema.type;
       const { include_type_name } = req.query as TypeOf<typeof querySchema>;
       const template = req.body as TemplateDeserialized;
@@ -34,16 +34,8 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies)
         _kbnMeta: { isLegacy },
       } = template;
 
-      if (!isLegacy) {
-        return res.badRequest({ body: 'Only legacy index template can be edited.' });
-      }
-
-      const serializedTemplate = serializeLegacyTemplate(template);
-
-      const { order, index_patterns, version, settings, mappings, aliases } = serializedTemplate;
-
       // Verify the template exists (ES will throw 404 if not)
-      const doesExist = await callAsCurrentUser('indices.existsTemplate', { name });
+      const doesExist = await doesTemplateExist({ name, callAsCurrentUser, isLegacy });
 
       if (!doesExist) {
         return res.notFound();
@@ -51,17 +43,11 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies)
 
       try {
         // Next, update index template
-        const response = await callAsCurrentUser('indices.putTemplate', {
-          name,
-          order,
+        const response = await saveTemplate({
+          template,
+          callAsCurrentUser,
+          isLegacy,
           include_type_name,
-          body: {
-            index_patterns,
-            version,
-            settings,
-            mappings,
-            aliases,
-          },
         });
 
         return res.ok({ body: response });
diff --git a/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts
index 6ab28e90211237..f82ea8f3cf1527 100644
--- a/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts
+++ b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts
@@ -11,6 +11,7 @@ export const templateSchema = schema.object({
   indexPatterns: schema.arrayOf(schema.string()),
   version: schema.maybe(schema.number()),
   order: schema.maybe(schema.number()),
+  priority: schema.maybe(schema.number()),
   template: schema.maybe(
     schema.object({
       settings: schema.maybe(schema.object({}, { unknowns: 'allow' })),
@@ -18,6 +19,8 @@ export const templateSchema = schema.object({
       mappings: schema.maybe(schema.object({}, { unknowns: 'allow' })),
     })
   ),
+  composedOf: schema.maybe(schema.arrayOf(schema.string())),
+  _meta: schema.maybe(schema.object({}, { unknowns: 'allow' })),
   ilmPolicy: schema.maybe(
     schema.object({
       name: schema.maybe(schema.string()),
diff --git a/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js b/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js
index 292aabad85054d..a563b956df3445 100644
--- a/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js
+++ b/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js
@@ -7,50 +7,63 @@
 import { API_BASE_PATH, INDEX_PATTERNS } from './constants';
 
 export const registerHelpers = ({ supertest }) => {
+  let templatesCreated = [];
+
   const getAllTemplates = () => supertest.get(`${API_BASE_PATH}/index_templates`);
 
-  const getOneTemplate = (name, isLegacy = true) =>
+  const getOneTemplate = (name, isLegacy = false) =>
     supertest.get(`${API_BASE_PATH}/index_templates/${name}?legacy=${isLegacy}`);
 
-  const getTemplatePayload = (name, isLegacy = true) => ({
-    name,
-    order: 1,
-    indexPatterns: INDEX_PATTERNS,
-    version: 1,
-    template: {
-      settings: {
-        number_of_shards: 1,
-        index: {
-          lifecycle: {
-            name: 'my_policy',
+  const getTemplatePayload = (name, indexPatterns = INDEX_PATTERNS, isLegacy = false) => {
+    const baseTemplate = {
+      name,
+      indexPatterns,
+      version: 1,
+      template: {
+        settings: {
+          number_of_shards: 1,
+          index: {
+            lifecycle: {
+              name: 'my_policy',
+            },
           },
         },
-      },
-      mappings: {
-        _source: {
-          enabled: false,
-        },
-        properties: {
-          host_name: {
-            type: 'keyword',
+        mappings: {
+          _source: {
+            enabled: false,
           },
-          created_at: {
-            type: 'date',
-            format: 'EEE MMM dd HH:mm:ss Z yyyy',
+          properties: {
+            host_name: {
+              type: 'keyword',
+            },
+            created_at: {
+              type: 'date',
+              format: 'EEE MMM dd HH:mm:ss Z yyyy',
+            },
           },
         },
+        aliases: {
+          alias1: {},
+        },
       },
-      aliases: {
-        alias1: {},
+      _kbnMeta: {
+        isLegacy,
       },
-    },
-    _kbnMeta: {
-      isLegacy,
-    },
-  });
+    };
+
+    if (isLegacy) {
+      baseTemplate.order = 1;
+    } else {
+      baseTemplate.priority = 1;
+    }
 
-  const createTemplate = (payload) =>
-    supertest.post(`${API_BASE_PATH}/index_templates`).set('kbn-xsrf', 'xxx').send(payload);
+    return baseTemplate;
+  };
+
+  const createTemplate = (template) => {
+    templatesCreated.push({ name: template.name, isLegacy: template._kbnMeta.isLegacy });
+    return supertest.post(`${API_BASE_PATH}/index_templates`).set('kbn-xsrf', 'xxx').send(template);
+  };
 
   const deleteTemplates = (templates) =>
     supertest
@@ -64,6 +77,16 @@ export const registerHelpers = ({ supertest }) => {
       .set('kbn-xsrf', 'xxx')
       .send(payload);
 
+  // Delete all templates created during tests
+  const cleanUpTemplates = async () => {
+    try {
+      await deleteTemplates(templatesCreated);
+      templatesCreated = [];
+    } catch (e) {
+      // Silently swallow errors
+    }
+  };
+
   return {
     getAllTemplates,
     getOneTemplate,
@@ -71,5 +94,6 @@ export const registerHelpers = ({ supertest }) => {
     createTemplate,
     updateTemplate,
     deleteTemplates,
+    cleanUpTemplates,
   };
 };
diff --git a/x-pack/test/api_integration/apis/management/index_management/templates.js b/x-pack/test/api_integration/apis/management/index_management/templates.js
index fcee8ed6a183fc..3a3d73ab68412b 100644
--- a/x-pack/test/api_integration/apis/management/index_management/templates.js
+++ b/x-pack/test/api_integration/apis/management/index_management/templates.js
@@ -22,33 +22,78 @@ export default function ({ getService }) {
     getTemplatePayload,
     deleteTemplates,
     updateTemplate,
+    cleanUpTemplates,
   } = registerHelpers({ supertest });
 
   describe('index templates', () => {
-    after(() => Promise.all([cleanUpEsResources()]));
+    after(() => Promise.all([cleanUpEsResources(), cleanUpTemplates()]));
 
     describe('get all', () => {
       const templateName = `template-${getRandomString()}`;
-      const payload = getTemplatePayload(templateName);
+      const indexTemplate = getTemplatePayload(templateName, [getRandomString()]);
+      const legacyTemplate = getTemplatePayload(templateName, [getRandomString()], true);
 
       beforeEach(async () => {
-        await createTemplate(payload).expect(200);
+        const res1 = await createTemplate(indexTemplate);
+        if (res1.status !== 200) {
+          throw new Error(res1.body.message);
+        }
+
+        const res2 = await createTemplate(legacyTemplate);
+        if (res2.status !== 200) {
+          throw new Error(res2.body.message);
+        }
       });
 
-      // TODO: When the "Create" API handler is added for V2 template,
-      // update this test to list composable templates.
       it('should list all the index templates with the expected parameters', async () => {
         const { body: allTemplates } = await getAllTemplates().expect(200);
 
-        // Composable index templates may have been created by other apps, e.g. Ingest Manager,
-        // so we don't make any assertion about these contents.
-        expect(allTemplates.templates).to.be.an('array');
-
-        // Legacy templates
-        const legacyTemplate = allTemplates.legacyTemplates.find(
-          (template) => template.name === payload.name
+        // Index templates (composable)
+        const indexTemplateFound = allTemplates.templates.find(
+          (template) => template.name === indexTemplate.name
         );
+
+        if (!indexTemplateFound) {
+          throw new Error(
+            `Index template "${indexTemplate.name}" not found in ${JSON.stringify(
+              allTemplates.templates,
+              null,
+              2
+            )}`
+          );
+        }
+
         const expectedKeys = [
+          'name',
+          'indexPatterns',
+          'hasSettings',
+          'hasAliases',
+          'hasMappings',
+          'ilmPolicy',
+          'priority',
+          'composedOf',
+          'version',
+          '_kbnMeta',
+        ].sort();
+
+        expect(Object.keys(indexTemplateFound).sort()).to.eql(expectedKeys);
+
+        // Legacy index templates
+        const legacyTemplateFound = allTemplates.legacyTemplates.find(
+          (template) => template.name === legacyTemplate.name
+        );
+
+        if (!legacyTemplateFound) {
+          throw new Error(
+            `Legacy template "${legacyTemplate.name}" not found in ${JSON.stringify(
+              allTemplates.legacyTemplates,
+              null,
+              2
+            )}`
+          );
+        }
+
+        const expectedLegacyKeys = [
           'name',
           'indexPatterns',
           'hasSettings',
@@ -60,20 +105,40 @@ export default function ({ getService }) {
           '_kbnMeta',
         ].sort();
 
-        expect(Object.keys(legacyTemplate).sort()).to.eql(expectedKeys);
+        expect(Object.keys(legacyTemplateFound).sort()).to.eql(expectedLegacyKeys);
       });
     });
 
     describe('get one', () => {
       const templateName = `template-${getRandomString()}`;
-      const payload = getTemplatePayload(templateName);
 
-      beforeEach(async () => {
-        await createTemplate(payload).expect(200);
-      });
+      it('should return an index template with the expected parameters', async () => {
+        const template = getTemplatePayload(templateName, [getRandomString()]);
+        await createTemplate(template).expect(200);
 
-      it('should return the index template with the expected parameters', async () => {
         const { body } = await getOneTemplate(templateName).expect(200);
+        const expectedKeys = [
+          'name',
+          'indexPatterns',
+          'template',
+          'composedOf',
+          'ilmPolicy',
+          'priority',
+          'version',
+          '_kbnMeta',
+        ].sort();
+        const expectedTemplateKeys = ['aliases', 'mappings', 'settings'].sort();
+
+        expect(body.name).to.equal(templateName);
+        expect(Object.keys(body).sort()).to.eql(expectedKeys);
+        expect(Object.keys(body.template).sort()).to.eql(expectedTemplateKeys);
+      });
+
+      it('should return a legacy index template with the expected parameters', async () => {
+        const legacyTemplate = getTemplatePayload(templateName, [getRandomString()], true);
+        await createTemplate(legacyTemplate).expect(200);
+
+        const { body } = await getOneTemplate(templateName, true).expect(200);
         const expectedKeys = [
           'name',
           'indexPatterns',
@@ -94,14 +159,21 @@ export default function ({ getService }) {
     describe('create', () => {
       it('should create an index template', async () => {
         const templateName = `template-${getRandomString()}`;
-        const payload = getTemplatePayload(templateName);
+        const payload = getTemplatePayload(templateName, [getRandomString()]);
+
+        await createTemplate(payload).expect(200);
+      });
+
+      it('should create a legacy index template', async () => {
+        const templateName = `template-${getRandomString()}`;
+        const payload = getTemplatePayload(templateName, [getRandomString()], true);
 
         await createTemplate(payload).expect(200);
       });
 
       it('should throw a 409 conflict when trying to create 2 templates with the same name', async () => {
         const templateName = `template-${getRandomString()}`;
-        const payload = getTemplatePayload(templateName);
+        const payload = getTemplatePayload(templateName, [getRandomString()], true);
 
         await createTemplate(payload);
 
@@ -110,7 +182,7 @@ export default function ({ getService }) {
 
       it('should validate the request payload', async () => {
         const templateName = `template-${getRandomString()}`;
-        const payload = getTemplatePayload(templateName);
+        const payload = getTemplatePayload(templateName, [getRandomString()], true);
 
         delete payload.indexPatterns; // index patterns are required
 
@@ -124,13 +196,40 @@ export default function ({ getService }) {
     describe('update', () => {
       it('should update an index template', async () => {
         const templateName = `template-${getRandomString()}`;
-        const payload = getTemplatePayload(templateName);
+        const indexTemplate = getTemplatePayload(templateName, [getRandomString()]);
 
-        await createTemplate(payload).expect(200);
+        await createTemplate(indexTemplate).expect(200);
+
+        let catTemplateResponse = await catTemplate(templateName);
+
+        const { name, version } = indexTemplate;
+
+        expect(
+          catTemplateResponse.find(({ name: templateName }) => templateName === name).version
+        ).to.equal(version.toString());
+
+        // Update template with new version
+        const updatedVersion = 2;
+        await updateTemplate({ ...indexTemplate, version: updatedVersion }, templateName).expect(
+          200
+        );
+
+        catTemplateResponse = await catTemplate(templateName);
+
+        expect(
+          catTemplateResponse.find(({ name: templateName }) => templateName === name).version
+        ).to.equal(updatedVersion.toString());
+      });
+
+      it('should update a legacy index template', async () => {
+        const templateName = `template-${getRandomString()}`;
+        const legacyIndexTemplate = getTemplatePayload(templateName, [getRandomString()], true);
+
+        await createTemplate(legacyIndexTemplate).expect(200);
 
         let catTemplateResponse = await catTemplate(templateName);
 
-        const { name, version } = payload;
+        const { name, version } = legacyIndexTemplate;
 
         expect(
           catTemplateResponse.find(({ name: templateName }) => templateName === name).version
@@ -138,7 +237,10 @@ export default function ({ getService }) {
 
         // Update template with new version
         const updatedVersion = 2;
-        await updateTemplate({ ...payload, version: updatedVersion }, templateName).expect(200);
+        await updateTemplate(
+          { ...legacyIndexTemplate, version: updatedVersion },
+          templateName
+        ).expect(200);
 
         catTemplateResponse = await catTemplate(templateName);
 
@@ -151,7 +253,7 @@ export default function ({ getService }) {
     describe('delete', () => {
       it('should delete an index template', async () => {
         const templateName = `template-${getRandomString()}`;
-        const payload = getTemplatePayload(templateName);
+        const payload = getTemplatePayload(templateName, [getRandomString()], true);
 
         await createTemplate(payload).expect(200);
 
diff --git a/x-pack/test_utils/router_helpers.tsx b/x-pack/test_utils/router_helpers.tsx
index 76c1e2259545b1..f2099e1eb7c913 100644
--- a/x-pack/test_utils/router_helpers.tsx
+++ b/x-pack/test_utils/router_helpers.tsx
@@ -16,9 +16,10 @@ export const WithMemoryRouter = (initialEntries: string[] = ['/'], initialIndex:
   </MemoryRouter>
 );
 
-export const WithRoute = (componentRoutePath = '/', onRouter = (router: any) => {}) => (
-  WrappedComponent: ComponentType
-) => {
+export const WithRoute = (
+  componentRoutePath: string | string[] = '/',
+  onRouter = (router: any) => {}
+) => (WrappedComponent: ComponentType) => {
   // Create a class component that will catch the router
   // and forward it to our "onRouter()" handler.
   const CatchRouter = withRouter(
diff --git a/x-pack/test_utils/testbed/types.ts b/x-pack/test_utils/testbed/types.ts
index 4975e073eea1f1..e2b6693ce77aa9 100644
--- a/x-pack/test_utils/testbed/types.ts
+++ b/x-pack/test_utils/testbed/types.ts
@@ -163,7 +163,7 @@ export interface MemoryRouterConfig {
   /** The React Router **initial index** setting ([see documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)) */
   initialIndex?: number;
   /** The route **path** for the mounted component (defaults to `"/"`) */
-  componentRoutePath?: string;
+  componentRoutePath?: string | string[];
   /** A callBack that will be called with the React Router instance once mounted  */
   onRouter?: (router: any) => void;
 }