diff --git a/.buildkite/ftr_configs.yml b/.buildkite/ftr_configs.yml
index 2e19b903cc8d3..720e9c0eb6234 100644
--- a/.buildkite/ftr_configs.yml
+++ b/.buildkite/ftr_configs.yml
@@ -277,6 +277,7 @@ enabled:
   - x-pack/test/functional/apps/home/config.ts
   - x-pack/test/functional/apps/index_lifecycle_management/config.ts
   - x-pack/test/functional/apps/index_management/config.ts
+  - x-pack/test/functional/apps/index_management/index_details_page/config.ts
   - x-pack/test/functional/apps/infra/config.ts
   - x-pack/test/functional/apps/ingest_pipelines/config.ts
   - x-pack/test/functional/apps/lens/group1/config.ts
diff --git a/test/plugin_functional/test_suites/core_plugins/rendering.ts b/test/plugin_functional/test_suites/core_plugins/rendering.ts
index c0573c10c10b1..f19cf47d37bf8 100644
--- a/test/plugin_functional/test_suites/core_plugins/rendering.ts
+++ b/test/plugin_functional/test_suites/core_plugins/rendering.ts
@@ -241,6 +241,7 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
         'xpack.index_management.ui.enabled (boolean)',
         'xpack.index_management.enableIndexActions (any)',
         'xpack.index_management.enableLegacyTemplates (any)',
+        'xpack.index_management.dev.enableIndexDetailsPage (boolean)',
         'xpack.infra.sources.default.fields.message (array)',
         /**
          * xpack.infra.logs is conditional and will resolve to an object of properties
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.ts
new file mode 100644
index 0000000000000..d6edefb6d724c
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.helpers.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { AsyncTestBedConfig, registerTestBed, TestBed } from '@kbn/test-jest-helpers';
+import { HttpSetup } from '@kbn/core/public';
+import { act } from 'react-dom/test-utils';
+import {
+  IndexDetailsPage,
+  IndexDetailsSection,
+} from '../../../public/application/sections/home/index_list/details_page';
+import { WithAppDependencies } from '../helpers';
+
+const testBedConfig: AsyncTestBedConfig = {
+  memoryRouter: {
+    initialEntries: [`/indices/test_index`],
+    componentRoutePath: `/indices/:indexName/:indexDetailsSection?`,
+  },
+  doMountAsync: true,
+};
+
+export interface IndexDetailsPageTestBed extends TestBed {
+  actions: {
+    getHeader: () => string;
+    clickIndexDetailsTab: (tab: IndexDetailsSection) => Promise<void>;
+    getActiveTabContent: () => string;
+  };
+}
+
+export const setup = async (
+  httpSetup: HttpSetup,
+  overridingDependencies: any = {}
+): Promise<IndexDetailsPageTestBed> => {
+  const initTestBed = registerTestBed(
+    WithAppDependencies(IndexDetailsPage, httpSetup, overridingDependencies),
+    testBedConfig
+  );
+  const testBed = await initTestBed();
+
+  const getHeader = () => {
+    return testBed.component.find('[data-test-subj="indexDetailsHeader"] h1').text();
+  };
+
+  const clickIndexDetailsTab = async (tab: IndexDetailsSection) => {
+    const { find, component } = testBed;
+
+    await act(async () => {
+      find(`indexDetailsTab-${tab}`).simulate('click');
+    });
+    component.update();
+  };
+
+  const getActiveTabContent = () => {
+    return testBed.find('indexDetailsContent').text();
+  };
+
+  return {
+    ...testBed,
+    actions: {
+      getHeader,
+      clickIndexDetailsTab,
+      getActiveTabContent,
+    },
+  };
+};
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.ts
new file mode 100644
index 0000000000000..2863560469287
--- /dev/null
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { setupEnvironment } from '../helpers';
+import { IndexDetailsPageTestBed, setup } from './index_details_page.helpers';
+import { act } from 'react-dom/test-utils';
+import { httpServiceMock } from '@kbn/core/public/mocks';
+import { IndexDetailsSection } from '../../../public/application/sections/home/index_list/details_page';
+
+describe('<IndexDetailsPage />', () => {
+  let testBed: IndexDetailsPageTestBed;
+  let httpSetup: ReturnType<typeof setupEnvironment>['httpSetup'];
+
+  beforeEach(async () => {
+    httpSetup = httpServiceMock.createSetupContract();
+
+    await act(async () => {
+      testBed = await setup(httpSetup);
+    });
+    testBed.component.update();
+  });
+
+  it('displays index name in the header', () => {
+    const header = testBed.actions.getHeader();
+    // test_index is configured in initialEntries of the memory router
+    expect(header).toEqual('test_index');
+  });
+
+  it('defaults to overview tab', () => {
+    const tabContent = testBed.actions.getActiveTabContent();
+    expect(tabContent).toEqual('Overview');
+  });
+
+  it('documents tab', async () => {
+    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Documents);
+    const tabContent = testBed.actions.getActiveTabContent();
+    expect(tabContent).toEqual('Documents');
+  });
+
+  it('mappings tab', async () => {
+    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Mappings);
+    const tabContent = testBed.actions.getActiveTabContent();
+    expect(tabContent).toEqual('Mappings');
+  });
+
+  it('settings tab', async () => {
+    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Settings);
+    const tabContent = testBed.actions.getActiveTabContent();
+    expect(tabContent).toEqual('Settings');
+  });
+
+  it('pipelines tab', async () => {
+    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Pipelines);
+    const tabContent = testBed.actions.getActiveTabContent();
+    expect(tabContent).toEqual('Pipelines');
+  });
+});
diff --git a/x-pack/plugins/index_management/public/application/app.tsx b/x-pack/plugins/index_management/public/application/app.tsx
index 96e5864cf820b..66a6c45cc4a35 100644
--- a/x-pack/plugins/index_management/public/application/app.tsx
+++ b/x-pack/plugins/index_management/public/application/app.tsx
@@ -13,7 +13,7 @@ import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { ScopedHistory } from '@kbn/core/public';
 
 import { UIM_APP_LOAD } from '../../common/constants';
-import { IndexManagementHome, homeSections } from './sections/home';
+import { IndexManagementHome, homeSections, Section } from './sections/home';
 import { TemplateCreate } from './sections/template_create';
 import { TemplateClone } from './sections/template_clone';
 import { TemplateEdit } from './sections/template_edit';
@@ -52,6 +52,6 @@ export const AppWithoutRouter = () => (
     />
     <Route exact path="/edit_component_template/:name*" component={ComponentTemplateEdit} />
     <Route path={`/:section(${homeSections.join('|')})`} component={IndexManagementHome} />
-    <Redirect from={`/`} to={`/indices`} />
+    <Redirect from={`/`} to={`/${Section.Indices}`} />
   </Routes>
 );
diff --git a/x-pack/plugins/index_management/public/application/app_context.tsx b/x-pack/plugins/index_management/public/application/app_context.tsx
index eb52f50d62ecf..f0b8598cfd04f 100644
--- a/x-pack/plugins/index_management/public/application/app_context.tsx
+++ b/x-pack/plugins/index_management/public/application/app_context.tsx
@@ -47,6 +47,7 @@ export interface AppDependencies {
   config: {
     enableIndexActions: boolean;
     enableLegacyTemplates: boolean;
+    enableIndexDetailsPage: boolean;
   };
   history: ScopedHistory;
   setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
diff --git a/x-pack/plugins/index_management/public/application/mount_management_section.ts b/x-pack/plugins/index_management/public/application/mount_management_section.ts
index 997568a2eb69a..9215b077c0bc3 100644
--- a/x-pack/plugins/index_management/public/application/mount_management_section.ts
+++ b/x-pack/plugins/index_management/public/application/mount_management_section.ts
@@ -46,16 +46,27 @@ function initSetup({
   return { uiMetricService };
 }
 
-export async function mountManagementSection(
-  coreSetup: CoreSetup<StartDependencies>,
-  usageCollection: UsageCollectionSetup,
-  params: ManagementAppMountParams,
-  extensionsService: ExtensionsService,
-  isFleetEnabled: boolean,
-  kibanaVersion: SemVer,
-  enableIndexActions: boolean = true,
-  enableLegacyTemplates: boolean = true
-) {
+export async function mountManagementSection({
+  coreSetup,
+  usageCollection,
+  params,
+  extensionsService,
+  isFleetEnabled,
+  kibanaVersion,
+  enableIndexActions = true,
+  enableLegacyTemplates = true,
+  enableIndexDetailsPage = false,
+}: {
+  coreSetup: CoreSetup<StartDependencies>;
+  usageCollection: UsageCollectionSetup;
+  params: ManagementAppMountParams;
+  extensionsService: ExtensionsService;
+  isFleetEnabled: boolean;
+  kibanaVersion: SemVer;
+  enableIndexActions?: boolean;
+  enableLegacyTemplates?: boolean;
+  enableIndexDetailsPage?: boolean;
+}) {
   const { element, setBreadcrumbs, history, theme$ } = params;
   const [core, startDependencies] = await coreSetup.getStartServices();
   const {
@@ -99,6 +110,7 @@ export async function mountManagementSection(
     config: {
       enableIndexActions,
       enableLegacyTemplates,
+      enableIndexDetailsPage,
     },
     history,
     setBreadcrumbs,
diff --git a/x-pack/plugins/index_management/public/application/sections/home/home.tsx b/x-pack/plugins/index_management/public/application/sections/home/home.tsx
index bfb04048f4173..27e68920c5612 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/home.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/home.tsx
@@ -10,12 +10,14 @@ import { RouteComponentProps } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { breadcrumbService } from '../../services/breadcrumbs';
 import { documentationService } from '../../services/documentation';
-import { DataStreamList } from './data_stream_list';
+import { useAppContext } from '../../app_context';
+import { ComponentTemplateList } from '../../components/component_templates';
 import { IndexList } from './index_list';
+import { IndexDetailsPage } from './index_list/details_page';
+import { DataStreamList } from './data_stream_list';
 import { TemplateList } from './template_list';
-import { ComponentTemplateList } from '../../components/component_templates';
-import { breadcrumbService } from '../../services/breadcrumbs';
 
 export enum Section {
   Indices = 'indices',
@@ -41,6 +43,9 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
   },
   history,
 }) => {
+  const {
+    config: { enableIndexDetailsPage },
+  } = useAppContext();
   const tabs = [
     {
       id: Section.Indices,
@@ -83,7 +88,7 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
     breadcrumbService.setBreadcrumbs('home');
   }, []);
 
-  return (
+  const indexManagementTabs = (
     <>
       <EuiPageHeader
         data-test-subj="indexManagementHeaderContent"
@@ -140,4 +145,18 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
       </Routes>
     </>
   );
+  if (enableIndexDetailsPage) {
+    return (
+      <>
+        <Routes>
+          <Route
+            path={`/${Section.Indices}/:indexName/:indexDetailsSection?`}
+            component={IndexDetailsPage}
+          />
+          <Route render={() => indexManagementTabs} />
+        </Routes>
+      </>
+    );
+  }
+  return indexManagementTabs;
 };
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
new file mode 100644
index 0000000000000..80ba8cd4281d9
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { Route, Routes } from '@kbn/shared-ux-router';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiPageHeader, EuiSpacer, EuiPageHeaderProps } from '@elastic/eui';
+import { Section } from '../../home';
+
+export enum IndexDetailsSection {
+  Overview = 'overview',
+  Documents = 'documents',
+  Mappings = 'mappings',
+  Settings = 'settings',
+  Pipelines = 'pipelines',
+}
+const tabs = [
+  {
+    id: IndexDetailsSection.Overview,
+    name: (
+      <FormattedMessage id="xpack.idxMgmt.indexDetails.overviewTitle" defaultMessage="Overview" />
+    ),
+  },
+  {
+    id: IndexDetailsSection.Documents,
+    name: (
+      <FormattedMessage id="xpack.idxMgmt.indexDetails.documentsTitle" defaultMessage="Documents" />
+    ),
+  },
+  {
+    id: IndexDetailsSection.Mappings,
+    name: (
+      <FormattedMessage id="xpack.idxMgmt.indexDetails.mappingsTitle" defaultMessage="Mappings" />
+    ),
+  },
+  {
+    id: IndexDetailsSection.Settings,
+    name: (
+      <FormattedMessage id="xpack.idxMgmt.indexDetails.settingsTitle" defaultMessage="Settings" />
+    ),
+  },
+  {
+    id: IndexDetailsSection.Pipelines,
+    name: (
+      <FormattedMessage id="xpack.idxMgmt.indexDetails.pipelinesTitle" defaultMessage="Pipelines" />
+    ),
+  },
+];
+export const DetailsPage: React.FunctionComponent<
+  RouteComponentProps<{ indexName: string; indexDetailsSection: IndexDetailsSection }>
+> = ({
+  match: {
+    params: { indexName, indexDetailsSection },
+  },
+  history,
+}) => {
+  const onSectionChange = useCallback(
+    (newSection: IndexDetailsSection) => {
+      return history.push(encodeURI(`/indices/${indexName}/${newSection}`));
+    },
+    [history, indexName]
+  );
+
+  const headerTabs = useMemo<EuiPageHeaderProps['tabs']>(() => {
+    return tabs.map((tab) => ({
+      onClick: () => onSectionChange(tab.id),
+      isSelected: tab.id === indexDetailsSection,
+      key: tab.id,
+      'data-test-subj': `indexDetailsTab-${tab.id}`,
+      label: tab.name,
+    }));
+  }, [indexDetailsSection, onSectionChange]);
+
+  return (
+    <>
+      <EuiPageHeader
+        data-test-subj="indexDetailsHeader"
+        pageTitle={indexName}
+        bottomBorder
+        rightSideItems={[]}
+        tabs={headerTabs}
+      />
+
+      <EuiSpacer size="l" />
+
+      <div data-test-subj={`indexDetailsContent`}>
+        <Routes>
+          <Route
+            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Overview}`}
+            render={() => <div>Overview</div>}
+          />
+          <Route
+            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Documents}`}
+            render={() => <div>Documents</div>}
+          />
+          <Route
+            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Mappings}`}
+            render={() => <div>Mappings</div>}
+          />
+          <Route
+            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Settings}`}
+            render={() => <div>Settings</div>}
+          />
+          <Route
+            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Pipelines}`}
+            render={() => <div>Pipelines</div>}
+          />
+          <Redirect
+            from={`/${Section.Indices}/${indexName}`}
+            to={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Overview}`}
+          />
+        </Routes>
+      </div>
+    </>
+  );
+};
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index.ts b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index.ts
new file mode 100644
index 0000000000000..dd87a626cc90e
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { DetailsPage as IndexDetailsPage, IndexDetailsSection } from './details_page';
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.tsx
index 648c4028b6735..14bbd94adc2fd 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
+import { ScopedHistory } from '@kbn/core/public';
 import { APP_WRAPPER_CLASS, useExecutionContext } from '../../../../shared_imports';
 import { useAppContext } from '../../../app_context';
 import { DetailPanel } from './detail_panel';
@@ -16,6 +17,7 @@ import { IndexTable } from './index_table';
 export const IndexList: React.FunctionComponent<RouteComponentProps> = ({ history }) => {
   const {
     core: { executionContext },
+    config: { enableIndexDetailsPage },
   } = useAppContext();
 
   useExecutionContext(executionContext, {
@@ -23,10 +25,19 @@ export const IndexList: React.FunctionComponent<RouteComponentProps> = ({ histor
     page: 'indexManagementIndicesTab',
   });
 
+  const openDetailPanel = useCallback(
+    (indexName: string) => {
+      return history.push(encodeURI(`/indices/${indexName}`));
+    },
+    [history]
+  );
   return (
     <div className={`${APP_WRAPPER_CLASS} im-snapshotTestSubject`} data-test-subj="indicesList">
-      <IndexTable history={history} />
-      <DetailPanel />
+      <IndexTable
+        history={history as ScopedHistory}
+        openDetailPanel={enableIndexDetailsPage ? openDetailPanel : undefined}
+      />
+      {!enableIndexDetailsPage && <DetailPanel />}
     </div>
   );
 };
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.d.ts b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.d.ts
index 4a978014aca47..3b73ca1abed1e 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.d.ts
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.d.ts
@@ -4,5 +4,12 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import React from 'react';
+import { ScopedHistory } from '@kbn/core/public';
 
-export declare function IndexTable(props: any): any;
+interface IndexTableProps {
+  history: ScopedHistory;
+  openDetailPanel?: (indexName: string) => void;
+}
+
+export declare const IndexTable: React.FunctionComponent<IndexTableProps>;
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
index 93ad0e0dc3be5..33e2a70431597 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
@@ -82,6 +82,15 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  return {
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+    openDetailPanel: ownProps.openDetailPanel ?? dispatchProps.openDetailPanel,
+  };
+};
+
 export const IndexTable = withRouter(
-  connect(mapStateToProps, mapDispatchToProps)(PresentationComponent)
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)(PresentationComponent)
 );
diff --git a/x-pack/plugins/index_management/public/plugin.ts b/x-pack/plugins/index_management/public/plugin.ts
index 0771e254fd6aa..67d39fafd8757 100644
--- a/x-pack/plugins/index_management/public/plugin.ts
+++ b/x-pack/plugins/index_management/public/plugin.ts
@@ -40,6 +40,7 @@ export class IndexMgmtUIPlugin {
       ui: { enabled: isIndexManagementUiEnabled },
       enableIndexActions,
       enableLegacyTemplates,
+      dev: { enableIndexDetailsPage },
     } = this.ctx.config.get<ClientConfigType>();
 
     if (isIndexManagementUiEnabled) {
@@ -51,16 +52,17 @@ export class IndexMgmtUIPlugin {
         order: 0,
         mount: async (params) => {
           const { mountManagementSection } = await import('./application/mount_management_section');
-          return mountManagementSection(
+          return mountManagementSection({
             coreSetup,
             usageCollection,
             params,
-            this.extensionsService,
-            Boolean(fleet),
+            extensionsService: this.extensionsService,
+            isFleetEnabled: Boolean(fleet),
             kibanaVersion,
             enableIndexActions,
-            enableLegacyTemplates
-          );
+            enableLegacyTemplates,
+            enableIndexDetailsPage,
+          });
         },
       });
     }
diff --git a/x-pack/plugins/index_management/public/types.ts b/x-pack/plugins/index_management/public/types.ts
index b3e479b081fb4..00b954148573a 100644
--- a/x-pack/plugins/index_management/public/types.ts
+++ b/x-pack/plugins/index_management/public/types.ts
@@ -31,4 +31,7 @@ export interface ClientConfigType {
   };
   enableIndexActions?: boolean;
   enableLegacyTemplates?: boolean;
+  dev: {
+    enableIndexDetailsPage?: boolean;
+  };
 }
diff --git a/x-pack/plugins/index_management/server/config.ts b/x-pack/plugins/index_management/server/config.ts
index f480c7747ca8d..1ffbab8b43103 100644
--- a/x-pack/plugins/index_management/server/config.ts
+++ b/x-pack/plugins/index_management/server/config.ts
@@ -38,6 +38,7 @@ const schemaLatest = schema.object(
       schema.boolean({ defaultValue: true }),
       schema.never()
     ),
+    dev: schema.object({ enableIndexDetailsPage: schema.boolean({ defaultValue: false }) }),
   },
   { defaultValue: undefined }
 );
@@ -47,6 +48,9 @@ const configLatest: PluginConfigDescriptor<IndexManagementConfig> = {
     ui: true,
     enableIndexActions: true,
     enableLegacyTemplates: true,
+    dev: {
+      enableIndexDetailsPage: true,
+    },
   },
   schema: schemaLatest,
   deprecations: () => [],
diff --git a/x-pack/test/accessibility/apps/management.ts b/x-pack/test/accessibility/apps/management.ts
index 9dd3ff4346cfa..b70973f1bfa9d 100644
--- a/x-pack/test/accessibility/apps/management.ts
+++ b/x-pack/test/accessibility/apps/management.ts
@@ -51,7 +51,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           describe('index panel', async () => {
             it('index panel - summary', async () => {
               await PageObjects.settings.clickIndexManagement();
-              await PageObjects.indexManagement.clickIndiceAt(0);
+              await PageObjects.indexManagement.clickIndexAt(0);
               await a11y.testAppSnapshot();
             });
 
diff --git a/x-pack/test/functional/apps/index_management/index_details_page/config.ts b/x-pack/test/functional/apps/index_management/index_details_page/config.ts
new file mode 100644
index 0000000000000..dde646c885221
--- /dev/null
+++ b/x-pack/test/functional/apps/index_management/index_details_page/config.ts
@@ -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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrConfigProviderContext } from '@kbn/test';
+
+export default async function ({ readConfigFile }: FtrConfigProviderContext) {
+  const functionalConfig = await readConfigFile(require.resolve('../config.ts'));
+
+  return {
+    ...functionalConfig.getAll(),
+    testFiles: [require.resolve('.')],
+    kbnTestServer: {
+      ...functionalConfig.get('kbnTestServer'),
+      serverArgs: [
+        ...functionalConfig.get('kbnTestServer.serverArgs'),
+        // setting the feature flag to enable details page
+        `--xpack.index_management.dev.enableIndexDetailsPage=true`,
+      ],
+    },
+  };
+}
diff --git a/x-pack/test/functional/apps/index_management/index_details_page/index.ts b/x-pack/test/functional/apps/index_management/index_details_page/index.ts
new file mode 100644
index 0000000000000..20915ab416e31
--- /dev/null
+++ b/x-pack/test/functional/apps/index_management/index_details_page/index.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default ({ loadTestFile }: FtrProviderContext) => {
+  describe('Index Management: index details page', function () {
+    loadTestFile(require.resolve('./index_details_page'));
+  });
+};
diff --git a/x-pack/test/functional/apps/index_management/index_details_page/index_details_page.ts b/x-pack/test/functional/apps/index_management/index_details_page/index_details_page.ts
new file mode 100644
index 0000000000000..58eae49837882
--- /dev/null
+++ b/x-pack/test/functional/apps/index_management/index_details_page/index_details_page.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default ({ getPageObjects, getService }: FtrProviderContext) => {
+  const pageObjects = getPageObjects(['common', 'indexManagement', 'header']);
+  const log = getService('log');
+  const security = getService('security');
+
+  describe('Index details page', function () {
+    before(async () => {
+      await security.testUser.setRoles(['index_management_user']);
+      await pageObjects.common.navigateToApp('indexManagement');
+    });
+
+    it('Navigates to the index details page from the home page', async () => {
+      await log.debug('Navigating to the index details page');
+
+      // display hidden indices to have some rows in the indices table
+      await pageObjects.indexManagement.toggleHiddenIndices();
+      // click the first index in the table and wait for the index details page
+      await pageObjects.indexManagement.indexDetailsPage.openIndexDetailsPage(0);
+    });
+  });
+};
diff --git a/x-pack/test/functional/apps/remote_clusters/ccs/remote_clusters_index_management_flow.ts b/x-pack/test/functional/apps/remote_clusters/ccs/remote_clusters_index_management_flow.ts
index 99b943e95f75a..bfa08c8b70547 100644
--- a/x-pack/test/functional/apps/remote_clusters/ccs/remote_clusters_index_management_flow.ts
+++ b/x-pack/test/functional/apps/remote_clusters/ccs/remote_clusters_index_management_flow.ts
@@ -87,7 +87,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         });
       });
       it('Verify that the follower index is duplicating from the remote.', async () => {
-        await pageObjects.indexManagement.clickIndiceAt(0);
+        await pageObjects.indexManagement.clickIndexAt(0);
         await pageObjects.indexManagement.performIndexActionInDetailPanel('flush');
         await testSubjects.click('euiFlyoutCloseButton');
         await pageObjects.common.navigateToApp('indexManagement');
diff --git a/x-pack/test/functional/page_objects/index_management_page.ts b/x-pack/test/functional/page_objects/index_management_page.ts
index ceee3c2d0d9a7..729df5fe85c06 100644
--- a/x-pack/test/functional/page_objects/index_management_page.ts
+++ b/x-pack/test/functional/page_objects/index_management_page.ts
@@ -26,6 +26,9 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
     async toggleRollupIndices() {
       await testSubjects.click('checkboxToggles-rollupToggle');
     },
+    async toggleHiddenIndices() {
+      await testSubjects.click('indexTableIncludeHiddenIndicesToggle');
+    },
 
     async clickDetailPanelTabAt(indexOfTab: number): Promise<void> {
       const tabList = await testSubjects.findAll('detailPanelTab');
@@ -33,7 +36,7 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
       await tabList[indexOfTab].click();
     },
 
-    async clickIndiceAt(indexOfRow: number): Promise<void> {
+    async clickIndexAt(indexOfRow: number): Promise<void> {
       const indexList = await testSubjects.findAll('indexTableIndexNameLink');
       await indexList[indexOfRow].click();
       await retry.waitFor('detail panel title to show up', async () => {
@@ -92,5 +95,14 @@ export function IndexManagementPageProvider({ getService }: FtrProviderContext)
     async clickNextButton() {
       await testSubjects.click('nextButton');
     },
+    indexDetailsPage: {
+      async openIndexDetailsPage(indexOfRow: number) {
+        const indexList = await testSubjects.findAll('indexTableIndexNameLink');
+        await indexList[indexOfRow].click();
+        await retry.waitFor('index details page title to show up', async () => {
+          return (await testSubjects.isDisplayed('indexDetailsHeader')) === true;
+        });
+      },
+    },
   };
 }