diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts
index b5386dec34205..313ebefb85301 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts
@@ -51,4 +51,5 @@ export type TestSubjects =
   | 'templateList'
   | 'templatesTab'
   | 'templateTable'
+  | 'title'
   | 'viewButton';
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
index 6bf6c11a37bb4..ab796767487b5 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
@@ -30,6 +30,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
     clickDeleteActionAt: (index: number) => void;
     clickConfirmDelete: () => void;
     clickDeleteDataStreamButton: () => void;
+    clickDetailPanelIndexTemplateLink: () => void;
   };
   findDeleteActionAt: (index: number) => ReactWrapper;
   findDeleteConfirmationModal: () => ReactWrapper;
@@ -38,6 +39,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   findEmptyPromptIndexTemplateLink: () => ReactWrapper;
   findDetailPanelIlmPolicyLink: () => ReactWrapper;
   findDetailPanelIlmPolicyName: () => ReactWrapper;
+  findDetailPanelIndexTemplateLink: () => ReactWrapper;
 }
 
 export const setup = async (overridingDependencies: any = {}): Promise<DataStreamsTabTestBed> => {
@@ -143,6 +145,17 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     find('deleteDataStreamButton').simulate('click');
   };
 
+  const clickDetailPanelIndexTemplateLink = async () => {
+    const { component, router, find } = testBed;
+    const indexTemplateLink = find('indexTemplateLink');
+
+    await act(async () => {
+      router.navigateTo(indexTemplateLink.props().href!);
+    });
+
+    component.update();
+  };
+
   const findDetailPanel = () => {
     const { find } = testBed;
     return find('dataStreamDetailPanel');
@@ -158,6 +171,11 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     return find('ilmPolicyLink');
   };
 
+  const findDetailPanelIndexTemplateLink = () => {
+    const { find } = testBed;
+    return find('indexTemplateLink');
+  };
+
   const findDetailPanelIlmPolicyName = () => {
     const descriptionList = testBed.component.find(EuiDescriptionListDescription);
     // ilm policy is the last in the details list
@@ -176,6 +194,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
       clickDeleteActionAt,
       clickConfirmDelete,
       clickDeleteDataStreamButton,
+      clickDetailPanelIndexTemplateLink,
     },
     findDeleteActionAt,
     findDeleteConfirmationModal,
@@ -184,6 +203,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     findEmptyPromptIndexTemplateLink,
     findDetailPanelIlmPolicyLink,
     findDetailPanelIlmPolicyName,
+    findDetailPanelIndexTemplateLink,
   };
 };
 
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
index d3460e627bb32..633184c9afecc 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
@@ -8,6 +8,7 @@ import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 
 import { API_BASE_PATH } from '../../../common/constants';
+import * as fixtures from '../../../test/fixtures';
 import { setupEnvironment } from '../helpers';
 
 import {
@@ -89,6 +90,8 @@ describe('Data Streams tab', () => {
         setLoadIndicesResponse,
         setLoadDataStreamsResponse,
         setLoadDataStreamResponse,
+        setLoadTemplateResponse,
+        setLoadTemplatesResponse,
       } = httpRequestsMockHelpers;
 
       setLoadIndicesResponse([
@@ -103,6 +106,10 @@ describe('Data Streams tab', () => {
       ]);
       setLoadDataStreamResponse(dataStreamForDetailPanel);
 
+      const indexTemplate = fixtures.getTemplate({ name: 'indexTemplate' });
+      setLoadTemplatesResponse({ templates: [indexTemplate], legacyTemplates: [] });
+      setLoadTemplateResponse(indexTemplate);
+
       testBed = await setup({ history: createMemoryHistory() });
       await act(async () => {
         testBed.actions.goToDataStreamsList();
@@ -244,6 +251,26 @@ describe('Data Streams tab', () => {
           dataStreams: ['dataStream1'],
         });
       });
+
+      test('clicking index template name navigates to the index template details', async () => {
+        const {
+          actions: { clickNameAt, clickDetailPanelIndexTemplateLink },
+          findDetailPanelIndexTemplateLink,
+          component,
+          find,
+        } = testBed;
+
+        await clickNameAt(0);
+
+        const indexTemplateLink = findDetailPanelIndexTemplateLink();
+        expect(indexTemplateLink.text()).toBe('indexTemplate');
+
+        await clickDetailPanelIndexTemplateLink();
+
+        component.update();
+        expect(find('summaryTab').exists()).toBeTruthy();
+        expect(find('title').text().trim()).toBe('indexTemplate');
+      });
     });
   });
 
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
index 9ec6993717435..05d7e97745b9e 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
@@ -29,9 +29,9 @@ import { useLoadDataStream } from '../../../../services/api';
 import { DeleteDataStreamConfirmationModal } from '../delete_data_stream_confirmation_modal';
 import { humanizeTimeStamp } from '../humanize_time_stamp';
 import { useUrlGenerator } from '../../../../services/use_url_generator';
+import { getIndexListUri, getTemplateDetailsLink } from '../../../../services/routing';
 import { ILM_PAGES_POLICY_EDIT, ILM_URL_GENERATOR_ID } from '../../../../constants';
 import { useAppContext } from '../../../../app_context';
-import { getIndexListUri } from '../../../../..';
 
 interface DetailsListProps {
   details: Array<{
@@ -207,7 +207,14 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
           defaultMessage:
             'The index template that configured the data stream and configures its backing indices',
         }),
-        content: indexTemplateName,
+        content: (
+          <EuiLink
+            data-test-subj={'indexTemplateLink'}
+            {...reactRouterNavigate(history, getTemplateDetailsLink(indexTemplateName))}
+          >
+            {indexTemplateName}
+          </EuiLink>
+        ),
       },
       {
         name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.ilmPolicyTitle', {
@@ -218,10 +225,7 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
         }),
         content:
           ilmPolicyName && ilmPolicyLink ? (
-            <EuiLink
-              data-test-subj={'ilmPolicyLink'}
-              {...reactRouterNavigate(history, ilmPolicyLink)}
-            >
+            <EuiLink data-test-subj={'ilmPolicyLink'} href={ilmPolicyLink}>
               {ilmPolicyName}
             </EuiLink>
           ) : (