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
index 9c7e3e1efbe4a..a390232cd81c5 100644
--- 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
@@ -13,24 +13,23 @@ import {
 } 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 { IndexDetailsSection } from '../../../common/constants';
+import { IndexDetailsPage } from '../../../public/application/sections/home/index_list/details_page';
 import { WithAppDependencies } from '../helpers';
 import { testIndexName } from './mocks';
 
 let routerMock: typeof reactRouterMock;
-const testBedConfig: AsyncTestBedConfig = {
+const getTestBedConfig = (initialEntry?: string): AsyncTestBedConfig => ({
   memoryRouter: {
-    initialEntries: [`/indices/${testIndexName}`],
-    componentRoutePath: `/indices/:indexName/:indexDetailsSection?`,
+    initialEntries: [initialEntry ?? `/indices/index_details?indexName=${testIndexName}`],
+    componentRoutePath: `/indices/index_details`,
     onRouter: (router) => {
       routerMock = router;
     },
   },
   doMountAsync: true,
-};
+});
 
 export interface IndexDetailsPageTestBed extends TestBed {
   routerMock: typeof reactRouterMock;
@@ -67,6 +66,7 @@ export interface IndexDetailsPageTestBed extends TestBed {
     errorSection: {
       isDisplayed: () => boolean;
       clickReloadButton: () => Promise<void>;
+      noIndexNameMessageIsDisplayed: () => boolean;
     };
     stats: {
       getCodeBlockContent: () => string;
@@ -85,13 +85,18 @@ export interface IndexDetailsPageTestBed extends TestBed {
   };
 }
 
-export const setup = async (
-  httpSetup: HttpSetup,
-  overridingDependencies: any = {}
-): Promise<IndexDetailsPageTestBed> => {
+export const setup = async ({
+  httpSetup,
+  dependencies = {},
+  initialEntry,
+}: {
+  httpSetup: HttpSetup;
+  dependencies?: any;
+  initialEntry?: string;
+}): Promise<IndexDetailsPageTestBed> => {
   const initTestBed = registerTestBed(
-    WithAppDependencies(IndexDetailsPage, httpSetup, overridingDependencies),
-    testBedConfig
+    WithAppDependencies(IndexDetailsPage, httpSetup, dependencies),
+    getTestBedConfig(initialEntry)
   );
   const testBed = await initTestBed();
   const { find, component, exists } = testBed;
@@ -106,6 +111,9 @@ export const setup = async (
       });
       component.update();
     },
+    noIndexNameMessageIsDisplayed: () => {
+      return exists('indexDetailsNoIndexNameError');
+    },
   };
   const getHeader = () => {
     return component.find('[data-test-subj="indexDetailsHeader"] h1').text();
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx
index 99ec128d9cc67..6d9f2bc7daac7 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_details_page/index_details_page.test.tsx
@@ -8,11 +8,14 @@
 import { setupEnvironment } from '../helpers';
 import { IndexDetailsPageTestBed, setup } from './index_details_page.helpers';
 import { act } from 'react-dom/test-utils';
+
+import React from 'react';
+import { IndexDetailsSection } from '../../../common/constants';
+import { API_BASE_PATH, INTERNAL_API_BASE_PATH } from '../../../common';
 import {
   breadcrumbService,
   IndexManagementBreadcrumb,
 } from '../../../public/application/services/breadcrumbs';
-import { IndexDetailsSection } from '../../../public/application/sections/home/index_list/details_page';
 import {
   testIndexEditableSettings,
   testIndexMappings,
@@ -21,8 +24,6 @@ import {
   testIndexSettings,
   testIndexStats,
 } from './mocks';
-import { API_BASE_PATH, INTERNAL_API_BASE_PATH } from '../../../common';
-import React from 'react';
 
 jest.mock('@kbn/kibana-react-plugin/public', () => {
   const original = jest.requireActual('@kbn/kibana-react-plugin/public');
@@ -57,10 +58,13 @@ describe('<IndexDetailsPage />', () => {
     httpRequestsMockHelpers.setLoadIndexSettingsResponse(testIndexName, testIndexSettings);
 
     await act(async () => {
-      testBed = await setup(httpSetup, {
-        url: {
-          locators: {
-            get: () => ({ navigate: jest.fn() }),
+      testBed = await setup({
+        httpSetup,
+        dependencies: {
+          url: {
+            locators: {
+              get: () => ({ navigate: jest.fn() }),
+            },
           },
         },
       });
@@ -75,7 +79,7 @@ describe('<IndexDetailsPage />', () => {
         message: `Data for index ${testIndexName} was not found`,
       });
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
 
       testBed.component.update();
@@ -91,6 +95,19 @@ describe('<IndexDetailsPage />', () => {
       await testBed.actions.errorSection.clickReloadButton();
       expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests + 1);
     });
+
+    it('renders an error section when no index name is provided', async () => {
+      // already sent 2 requests while setting up the component
+      const numberOfRequests = 2;
+      expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests);
+      await act(async () => {
+        testBed = await setup({ httpSetup, initialEntry: '/indices/index_details' });
+      });
+      testBed.component.update();
+      expect(testBed.actions.errorSection.noIndexNameMessageIsDisplayed()).toBe(true);
+      // no extra http request was sent
+      expect(httpSetup.get).toHaveBeenCalledTimes(numberOfRequests);
+    });
   });
 
   describe('Stats tab', () => {
@@ -138,7 +155,7 @@ describe('<IndexDetailsPage />', () => {
       );
 
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
       testBed.component.update();
 
@@ -148,8 +165,11 @@ describe('<IndexDetailsPage />', () => {
 
     it('hides index stats tab if enableIndexStats===false', async () => {
       await act(async () => {
-        testBed = await setup(httpSetup, {
-          config: { enableIndexStats: false },
+        testBed = await setup({
+          httpSetup,
+          dependencies: {
+            config: { enableIndexStats: false },
+          },
         });
       });
       testBed.component.update();
@@ -164,7 +184,7 @@ describe('<IndexDetailsPage />', () => {
           message: 'Error',
         });
         await act(async () => {
-          testBed = await setup(httpSetup);
+          testBed = await setup({ httpSetup });
         });
 
         testBed.component.update();
@@ -213,8 +233,11 @@ describe('<IndexDetailsPage />', () => {
 
     it('hides index stats from detail panels if enableIndexStats===false', async () => {
       await act(async () => {
-        testBed = await setup(httpSetup, {
-          config: { enableIndexStats: false },
+        testBed = await setup({
+          httpSetup,
+          dependencies: {
+            config: { enableIndexStats: false },
+          },
         });
       });
       testBed.component.update();
@@ -226,10 +249,13 @@ describe('<IndexDetailsPage />', () => {
     describe('extension service summary', () => {
       it('renders all summaries added to the extension service', async () => {
         await act(async () => {
-          testBed = await setup(httpSetup, {
-            services: {
-              extensionsService: {
-                summaries: [() => <span>test</span>, () => <span>test2</span>],
+          testBed = await setup({
+            httpSetup,
+            dependencies: {
+              services: {
+                extensionsService: {
+                  summaries: [() => <span>test</span>, () => <span>test2</span>],
+                },
               },
             },
           });
@@ -241,10 +267,13 @@ describe('<IndexDetailsPage />', () => {
 
       it(`doesn't render empty panels if the summary renders null`, async () => {
         await act(async () => {
-          testBed = await setup(httpSetup, {
-            services: {
-              extensionsService: {
-                summaries: [() => null],
+          testBed = await setup({
+            httpSetup,
+            dependencies: {
+              services: {
+                extensionsService: {
+                  summaries: [() => null],
+                },
               },
             },
           });
@@ -255,10 +284,13 @@ describe('<IndexDetailsPage />', () => {
 
       it(`doesn't render anything when no summaries added to the extension service`, async () => {
         await act(async () => {
-          testBed = await setup(httpSetup, {
-            services: {
-              extensionsService: {
-                summaries: [],
+          testBed = await setup({
+            httpSetup,
+            dependencies: {
+              services: {
+                extensionsService: {
+                  summaries: [],
+                },
               },
             },
           });
@@ -269,12 +301,6 @@ describe('<IndexDetailsPage />', () => {
     });
   });
 
-  it('documents tab', async () => {
-    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Documents);
-    const tabContent = testBed.actions.getActiveTabContent();
-    expect(tabContent).toEqual('Documents');
-  });
-
   describe('Mappings tab', () => {
     it('updates the breadcrumbs to index details mappings', async () => {
       await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Mappings);
@@ -315,7 +341,7 @@ describe('<IndexDetailsPage />', () => {
           message: `Was not able to load mappings`,
         });
         await act(async () => {
-          testBed = await setup(httpSetup);
+          testBed = await setup({ httpSetup });
         });
 
         testBed.component.update();
@@ -377,7 +403,7 @@ describe('<IndexDetailsPage />', () => {
           message: `Was not able to load settings`,
         });
         await act(async () => {
-          testBed = await setup(httpSetup);
+          testBed = await setup({ httpSetup });
         });
 
         testBed.component.update();
@@ -451,12 +477,6 @@ describe('<IndexDetailsPage />', () => {
     });
   });
 
-  it('pipelines tab', async () => {
-    await testBed.actions.clickIndexDetailsTab(IndexDetailsSection.Pipelines);
-    const tabContent = testBed.actions.getActiveTabContent();
-    expect(tabContent).toEqual('Pipelines');
-  });
-
   it('navigates back to indices', async () => {
     jest.spyOn(testBed.routerMock.history, 'push');
     await testBed.actions.clickBackToIndicesButton();
@@ -496,7 +516,7 @@ describe('<IndexDetailsPage />', () => {
       });
 
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
       testBed.component.update();
 
@@ -589,7 +609,7 @@ describe('<IndexDetailsPage />', () => {
       });
 
       await act(async () => {
-        testBed = await setup(httpSetup);
+        testBed = await setup({ httpSetup });
       });
       testBed.component.update();
 
diff --git a/x-pack/plugins/index_management/common/constants/home_sections.ts b/x-pack/plugins/index_management/common/constants/home_sections.ts
new file mode 100644
index 0000000000000..c4bb72691dcde
--- /dev/null
+++ b/x-pack/plugins/index_management/common/constants/home_sections.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 enum Section {
+  Indices = 'indices',
+  DataStreams = 'data_streams',
+  IndexTemplates = 'templates',
+  ComponentTemplates = 'component_templates',
+  EnrichPolicies = 'enrich_policies',
+}
+
+export enum IndexDetailsSection {
+  Overview = 'overview',
+  Mappings = 'mappings',
+  Settings = 'settings',
+  Stats = 'stats',
+}
diff --git a/x-pack/plugins/index_management/common/constants/index.ts b/x-pack/plugins/index_management/common/constants/index.ts
index 786dad4a5e375..16972f187707a 100644
--- a/x-pack/plugins/index_management/common/constants/index.ts
+++ b/x-pack/plugins/index_management/common/constants/index.ts
@@ -53,3 +53,5 @@ export {
 } from './ui_metric';
 
 export { MAJOR_VERSION } from './plugin';
+
+export { Section, IndexDetailsSection } from './home_sections';
diff --git a/x-pack/plugins/index_management/public/application/app.tsx b/x-pack/plugins/index_management/public/application/app.tsx
index 163af333e7247..1fc9dd26e4cde 100644
--- a/x-pack/plugins/index_management/public/application/app.tsx
+++ b/x-pack/plugins/index_management/public/application/app.tsx
@@ -12,8 +12,8 @@ import { Redirect } from 'react-router-dom';
 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, Section } from './sections/home';
+import { UIM_APP_LOAD, Section } from '../../common/constants';
+import { IndexManagementHome, homeSections } from './sections/home';
 import { TemplateCreate } from './sections/template_create';
 import { TemplateClone } from './sections/template_clone';
 import { TemplateEdit } from './sections/template_edit';
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
index 140fb2a4282ee..04a5a4a20f491 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
@@ -32,11 +32,11 @@ import {
   APP_WRAPPER_CLASS,
   useExecutionContext,
 } from '../../../../shared_imports';
+import { Section } from '../../../../../common/constants';
 import { useAppContext } from '../../../app_context';
 import { useLoadDataStreams } from '../../../services/api';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../services/breadcrumbs';
 import { documentationService } from '../../../services/documentation';
-import { Section } from '../home';
 import { DataStreamTable } from './data_stream_table';
 import { DataStreamDetailPanel } from './data_stream_detail_panel';
 import { filterDataStreams, isSelectedDataStreamHidden } from '../../../lib/data_streams';
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 15717a6acb7e3..f5e6cf85002fe 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,6 +10,8 @@ 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 { Section } from '../../../../common/constants';
 import { documentationService } from '../../services/documentation';
 import { useAppContext } from '../../app_context';
 import { ComponentTemplateList } from '../../components/component_templates';
@@ -19,14 +21,6 @@ import { IndexDetailsPage } from './index_list/details_page';
 import { DataStreamList } from './data_stream_list';
 import { TemplateList } from './template_list';
 
-export enum Section {
-  Indices = 'indices',
-  DataStreams = 'data_streams',
-  IndexTemplates = 'templates',
-  ComponentTemplates = 'component_templates',
-  EnrichPolicies = 'enrich_policies',
-}
-
 export const homeSections = [
   Section.Indices,
   Section.DataStreams,
@@ -157,10 +151,7 @@ export const IndexManagementHome: React.FunctionComponent<RouteComponentProps<Ma
     return (
       <>
         <Routes>
-          <Route
-            path={`/${Section.Indices}/:indexName/:indexDetailsSection?`}
-            component={IndexDetailsPage}
-          />
+          <Route path={`/${Section.Indices}/index_details`} component={IndexDetailsPage} />
           <Route render={() => indexManagementTabs} />
         </Routes>
       </>
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index.ts b/x-pack/plugins/index_management/public/application/sections/home/index.ts
index 4ea8ac7906f97..db6dd2942bfe8 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index.ts
+++ b/x-pack/plugins/index_management/public/application/sections/home/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { IndexManagementHome, Section, homeSections } from './home';
+export { IndexManagementHome, homeSections } from './home';
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
index 33378fc138c04..d59aeab60bff0 100644
--- 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
@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, FunctionComponent } from 'react';
 import { css } from '@emotion/react';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
-import { Route, Routes } from '@kbn/shared-ux-router';
+import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiPageHeader,
@@ -16,16 +15,20 @@ import {
   EuiPageHeaderProps,
   EuiPageSection,
   EuiButton,
+  EuiPageTemplate,
+  EuiText,
+  EuiCode,
 } from '@elastic/eui';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 
+import { Section, IndexDetailsSection } from '../../../../../../common/constants';
+import { getIndexDetailsLink } from '../../../../services/routing';
 import { Index } from '../../../../../../common';
 import { INDEX_OPEN } from '../../../../../../common/constants';
 import { Error } from '../../../../../shared_imports';
 import { loadIndex } from '../../../../services';
 import { useAppContext } from '../../../../app_context';
 import { DiscoverLink } from '../../../../lib/discover_link';
-import { Section } from '../../home';
 import { DetailsPageError } from './details_page_error';
 import { ManageIndexButton } from './manage_index_button';
 import { DetailsPageStats } from './details_page_stats';
@@ -33,14 +36,6 @@ import { DetailsPageMappings } from './details_page_mappings';
 import { DetailsPageOverview } from './details_page_overview';
 import { DetailsPageSettings } from './details_page_settings';
 
-export enum IndexDetailsSection {
-  Overview = 'overview',
-  Documents = 'documents',
-  Mappings = 'mappings',
-  Settings = 'settings',
-  Pipelines = 'pipelines',
-  Stats = 'stats',
-}
 const defaultTabs = [
   {
     id: IndexDetailsSection.Overview,
@@ -48,12 +43,6 @@ const defaultTabs = [
       <FormattedMessage id="xpack.idxMgmt.indexDetails.overviewTitle" defaultMessage="Overview" />
     ),
   },
-  {
-    id: IndexDetailsSection.Documents,
-    name: (
-      <FormattedMessage id="xpack.idxMgmt.indexDetails.documentsTitle" defaultMessage="Documents" />
-    ),
-  },
   {
     id: IndexDetailsSection.Mappings,
     name: (
@@ -66,12 +55,6 @@ const defaultTabs = [
       <FormattedMessage id="xpack.idxMgmt.indexDetails.settingsTitle" defaultMessage="Settings" />
     ),
   },
-  {
-    id: IndexDetailsSection.Pipelines,
-    name: (
-      <FormattedMessage id="xpack.idxMgmt.indexDetails.pipelinesTitle" defaultMessage="Pipelines" />
-    ),
-  },
 ];
 
 const statsTab = {
@@ -79,29 +62,64 @@ const statsTab = {
   name: <FormattedMessage id="xpack.idxMgmt.indexDetails.statsTitle" defaultMessage="Stats" />,
 };
 
-export const DetailsPage: React.FunctionComponent<
-  RouteComponentProps<{ indexName: string; indexDetailsSection: IndexDetailsSection }>
-> = ({
-  match: {
-    params: { indexName, indexDetailsSection },
-  },
-  history,
+const getSelectedTabContent = ({
+  tab,
+  index,
+  indexName,
+}: {
+  tab: IndexDetailsSection;
+  index?: Index | null;
+  indexName: string;
 }) => {
+  // if there is no index data, the tab content won't be rendered, so it's safe to return null here
+  if (!index) {
+    return null;
+  }
+  switch (tab) {
+    case IndexDetailsSection.Overview:
+      return <DetailsPageOverview indexDetails={index} />;
+    case IndexDetailsSection.Mappings:
+      return <DetailsPageMappings indexName={indexName} />;
+    case IndexDetailsSection.Settings:
+      return (
+        <DetailsPageSettings indexName={indexName} isIndexOpen={index.status === INDEX_OPEN} />
+      );
+    case IndexDetailsSection.Stats:
+      return <DetailsPageStats indexName={indexName} isIndexOpen={index.status === INDEX_OPEN} />;
+    default:
+      return <DetailsPageOverview indexDetails={index} />;
+  }
+};
+export const DetailsPage: FunctionComponent<
+  RouteComponentProps<{ indexName: string; indexDetailsSection: IndexDetailsSection }>
+> = ({ location: { search }, history }) => {
   const { config } = useAppContext();
+  const queryParams = useMemo(() => new URLSearchParams(search), [search]);
+  const indexName = queryParams.get('indexName') ?? '';
+  const tab = queryParams.get('tab') ?? IndexDetailsSection.Overview;
+  let indexDetailsSection = IndexDetailsSection.Overview;
+  if (Object.values(IndexDetailsSection).includes(tab as IndexDetailsSection)) {
+    indexDetailsSection = tab as IndexDetailsSection;
+  }
+
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
   const [index, setIndex] = useState<Index | null>();
-
+  const selectedTabContent = useMemo(() => {
+    return getSelectedTabContent({ tab: indexDetailsSection, index, indexName });
+  }, [index, indexDetailsSection, indexName]);
   const fetchIndexDetails = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const { data, error: loadingError } = await loadIndex(indexName);
-      setIsLoading(false);
-      setError(loadingError);
-      setIndex(data);
-    } catch (e) {
-      setIsLoading(false);
-      setError(e);
+    if (indexName) {
+      setIsLoading(true);
+      try {
+        const { data, error: loadingError } = await loadIndex(indexName);
+        setIsLoading(false);
+        setError(loadingError);
+        setIndex(data);
+      } catch (e) {
+        setIsLoading(false);
+        setError(e);
+      }
     }
   }, [indexName]);
 
@@ -111,7 +129,7 @@ export const DetailsPage: React.FunctionComponent<
 
   const onSectionChange = useCallback(
     (newSection: IndexDetailsSection) => {
-      return history.push(encodeURI(`/indices/${indexName}/${newSection}`));
+      return history.push(getIndexDetailsLink(indexName, newSection));
     },
     [history, indexName]
   );
@@ -123,15 +141,43 @@ export const DetailsPage: React.FunctionComponent<
   const headerTabs = useMemo<EuiPageHeaderProps['tabs']>(() => {
     const visibleTabs = config.enableIndexStats ? [...defaultTabs, statsTab] : defaultTabs;
 
-    return visibleTabs.map((tab) => ({
-      onClick: () => onSectionChange(tab.id),
-      isSelected: tab.id === indexDetailsSection,
-      key: tab.id,
-      'data-test-subj': `indexDetailsTab-${tab.id}`,
-      label: tab.name,
+    return visibleTabs.map((visibleTab) => ({
+      onClick: () => onSectionChange(visibleTab.id),
+      isSelected: visibleTab.id === indexDetailsSection,
+      key: visibleTab.id,
+      'data-test-subj': `indexDetailsTab-${visibleTab.id}`,
+      label: visibleTab.name,
     }));
   }, [indexDetailsSection, onSectionChange, config]);
 
+  if (!indexName) {
+    return (
+      <EuiPageTemplate.EmptyPrompt
+        data-test-subj="indexDetailsNoIndexNameError"
+        color="danger"
+        iconType="warning"
+        title={
+          <h2>
+            <FormattedMessage
+              id="xpack.idxMgmt.indexDetails.noIndexNameErrorTitle"
+              defaultMessage="Unable to load index details"
+            />
+          </h2>
+        }
+        body={
+          <EuiText color="subdued">
+            <FormattedMessage
+              id="xpack.idxMgmt.indexDetails.noIndexNameErrorDescription"
+              defaultMessage="An index name is required for this page. Add a query parameter {queryParam} followed by an index name to the url."
+              values={{
+                queryParam: <EuiCode>indexName</EuiCode>,
+              }}
+            />
+          </EuiText>
+        }
+      />
+    );
+  }
   if (isLoading && !index) {
     return (
       <SectionLoading>
@@ -187,42 +233,7 @@ export const DetailsPage: React.FunctionComponent<
           height: 100%;
         `}
       >
-        <Routes>
-          <Route
-            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Overview}`}
-            render={() => <DetailsPageOverview indexDetails={index} />}
-          />
-          <Route
-            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Documents}`}
-            render={() => <div>Documents</div>}
-          />
-          <Route
-            path={`/${Section.Indices}/:indexName/${IndexDetailsSection.Mappings}`}
-            component={DetailsPageMappings}
-          />
-          <Route
-            path={`/${Section.Indices}/:indexName/${IndexDetailsSection.Settings}`}
-            render={(props: RouteComponentProps<{ indexName: string }>) => (
-              <DetailsPageSettings {...props} isIndexOpen={index.status === INDEX_OPEN} />
-            )}
-          />
-          <Route
-            path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Pipelines}`}
-            render={() => <div>Pipelines</div>}
-          />
-          {config.enableIndexStats && (
-            <Route
-              path={`/${Section.Indices}/:indexName/${IndexDetailsSection.Stats}`}
-              render={(routerProps: RouteComponentProps<{ indexName: string }>) => (
-                <DetailsPageStats {...routerProps} isIndexOpen={index.status === INDEX_OPEN} />
-              )}
-            />
-          )}
-          <Redirect
-            from={`/${Section.Indices}/${indexName}`}
-            to={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Overview}`}
-          />
-        </Routes>
+        {selectedTabContent}
       </div>
     </>
   );
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings.tsx
index 146524e35de04..8bd7b8639a962 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings.tsx
@@ -20,17 +20,12 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 import { useLoadIndexMappings, documentationService } from '../../../../services';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 
-export const DetailsPageMappings: FunctionComponent<RouteComponentProps<{ indexName: string }>> = ({
-  match: {
-    params: { indexName },
-  },
-}) => {
+export const DetailsPageMappings: FunctionComponent<{ indexName: string }> = ({ indexName }) => {
   const { isLoading, data, error, resendRequest } = useLoadIndexMappings(indexName);
 
   useEffect(() => {
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_settings.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_settings.tsx
index ef7e59f43e6a3..08e210cf1683c 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_settings.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_settings.tsx
@@ -6,7 +6,6 @@
  */
 
 import React, { FunctionComponent, useEffect } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import { EuiButton, EuiPageTemplate, EuiSpacer, EuiText } from '@elastic/eui';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -15,14 +14,10 @@ import { useLoadIndexSettings } from '../../../../services';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 import { DetailsPageSettingsContent } from './details_page_settings_content';
 
-export const DetailsPageSettings: FunctionComponent<
-  RouteComponentProps<{ indexName: string }> & { isIndexOpen: boolean }
-> = ({
-  match: {
-    params: { indexName },
-  },
-  isIndexOpen,
-}) => {
+export const DetailsPageSettings: FunctionComponent<{
+  indexName: string;
+  isIndexOpen: boolean;
+}> = ({ indexName, isIndexOpen }) => {
   const { isLoading, data, error, resendRequest } = useLoadIndexSettings(indexName);
 
   useEffect(() => {
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_stats.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_stats.tsx
index 4c18804b0aee5..b8551eee25a3d 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_stats.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_stats.tsx
@@ -6,7 +6,6 @@
  */
 
 import React, { FunctionComponent, useState, useCallback, useEffect } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiSpacer,
@@ -29,16 +28,8 @@ import { SectionLoading, Error } from '../../../../../shared_imports';
 import { loadIndexStatistics, documentationService } from '../../../../services';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 
-interface Props {
-  isIndexOpen: boolean;
-}
-
-export const DetailsPageStats: FunctionComponent<
-  RouteComponentProps<{ indexName: string }> & Props
-> = ({
-  match: {
-    params: { indexName },
-  },
+export const DetailsPageStats: FunctionComponent<{ indexName: string; isIndexOpen: boolean }> = ({
+  indexName,
   isIndexOpen,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
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
index dd87a626cc90e..b80f65823d030 100644
--- 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
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { DetailsPage as IndexDetailsPage, IndexDetailsSection } from './details_page';
+export { DetailsPage as IndexDetailsPage } 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 48f5436eafedf..4bd4c02b2e98c 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
@@ -9,6 +9,7 @@ import React, { useCallback, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
 import { ScopedHistory } from '@kbn/core/public';
+import { getIndexDetailsLink } from '../../../services/routing';
 import { APP_WRAPPER_CLASS, useExecutionContext } from '../../../../shared_imports';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../services/breadcrumbs';
 import { useAppContext } from '../../../app_context';
@@ -32,7 +33,7 @@ export const IndexList: React.FunctionComponent<RouteComponentProps> = ({ histor
 
   const openDetailPanel = useCallback(
     (indexName: string) => {
-      return history.push(encodeURI(`/indices/${indexName}`));
+      return history.push(getIndexDetailsLink(indexName));
     },
     [history]
   );
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 3eb8dc74155d6..3fd5664424075 100644
--- a/x-pack/plugins/index_management/public/application/services/routing.ts
+++ b/x-pack/plugins/index_management/public/application/services/routing.ts
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { Section, IndexDetailsSection } from '../../../common/constants';
+
 export const getTemplateListLink = () => `/templates`;
 
 export const getTemplateDetailsLink = (name: string, isLegacy?: boolean) => {
@@ -54,3 +56,11 @@ export const getIndexListUri = (filter?: string, includeHiddenIndices?: boolean)
 export const getDataStreamDetailsLink = (name: string) => {
   return encodeURI(`/data_streams/${encodeURIComponent(name)}`);
 };
+
+export const getIndexDetailsLink = (indexName: string, tab?: IndexDetailsSection) => {
+  let link = `/${Section.Indices}/index_details?indexName=${encodeURIComponent(indexName)}`;
+  if (tab) {
+    link = `${link}&tab=${tab}`;
+  }
+  return link;
+};
diff --git a/x-pack/plugins/searchprofiler/public/application/_app.scss b/x-pack/plugins/searchprofiler/public/application/_app.scss
index 3c163fa8fefec..1b7b44e28bc62 100644
--- a/x-pack/plugins/searchprofiler/public/application/_app.scss
+++ b/x-pack/plugins/searchprofiler/public/application/_app.scss
@@ -17,10 +17,6 @@
     height: 100%;
   }
 
-  &__pageBodyContentBody {
-    height: 100%;
-  }
-
   &__pageContentBodyContent {
     height: 100%;
   }
diff --git a/x-pack/plugins/searchprofiler/public/application/app.tsx b/x-pack/plugins/searchprofiler/public/application/app.tsx
index c48ce018e2cdb..321b2a167a38c 100644
--- a/x-pack/plugins/searchprofiler/public/application/app.tsx
+++ b/x-pack/plugins/searchprofiler/public/application/app.tsx
@@ -8,15 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import React, { useCallback } from 'react';
 
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPanel } from '@elastic/eui';
 
 import {
   SearchProfilerTabs,
@@ -95,39 +87,37 @@ export const App = () => {
       <EuiPage className="prfDevTool__page appRoot">
         <EuiPageBody className="prfDevTool__page__pageBody">
           {renderLicenseWarning()}
-          <EuiPageContent className="prfDevTool__page__pageBodyContent">
-            <EuiPageContentBody className="prfDevTool__page__pageBodyContentBody">
-              <EuiFlexGroup
-                responsive={false}
-                gutterSize="s"
-                direction="row"
-                className="prfDevTool__page__bodyGroup"
-              >
-                <EuiFlexItem>
-                  <ProfileQueryEditor />
-                </EuiFlexItem>
-                <EuiFlexItem grow={3}>
-                  <EuiFlexGroup className="prfDevTool__main" gutterSize="none" direction="column">
-                    <SearchProfilerTabs
-                      activeTab={activeTab}
-                      activateTab={setActiveTab}
-                      has={{
-                        aggregations: Boolean(currentResponse && hasAggregations(currentResponse)),
-                        searches: Boolean(currentResponse && hasSearch(currentResponse)),
-                      }}
-                    />
-                    {renderProfileTreeArea()}
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              {highlightDetails ? (
-                <HighlightDetailsFlyout
-                  {...highlightDetails}
-                  onClose={() => dispatch({ type: 'setHighlightDetails', value: null })}
-                />
-              ) : null}
-            </EuiPageContentBody>
-          </EuiPageContent>
+          <EuiPanel className="prfDevTool__page__pageBodyContent">
+            <EuiFlexGroup
+              responsive={false}
+              gutterSize="s"
+              direction="row"
+              className="prfDevTool__page__bodyGroup"
+            >
+              <EuiFlexItem>
+                <ProfileQueryEditor />
+              </EuiFlexItem>
+              <EuiFlexItem grow={3}>
+                <EuiFlexGroup className="prfDevTool__main" gutterSize="none" direction="column">
+                  <SearchProfilerTabs
+                    activeTab={activeTab}
+                    activateTab={setActiveTab}
+                    has={{
+                      aggregations: Boolean(currentResponse && hasAggregations(currentResponse)),
+                      searches: Boolean(currentResponse && hasSearch(currentResponse)),
+                    }}
+                  />
+                  {renderProfileTreeArea()}
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            {highlightDetails ? (
+              <HighlightDetailsFlyout
+                {...highlightDetails}
+                onClose={() => dispatch({ type: 'setHighlightDetails', value: null })}
+              />
+            ) : null}
+          </EuiPanel>
         </EuiPageBody>
       </EuiPage>
     </>