diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts
index 1b1973e35ec525..a8d63137fa0a92 100644
--- a/packages/kbn-doc-links/src/get_doc_links.ts
+++ b/packages/kbn-doc-links/src/get_doc_links.ts
@@ -622,6 +622,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
     },
     apis: {
       bulkIndexAlias: `${ELASTICSEARCH_DOCS}indices-aliases.html`,
+      indexStats: `${ELASTICSEARCH_DOCS}indices-stats.html`,
       byteSizeUnits: `${ELASTICSEARCH_DOCS}api-conventions.html#byte-units`,
       createAutoFollowPattern: `${ELASTICSEARCH_DOCS}ccr-put-auto-follow-pattern.html`,
       createFollower: `${ELASTICSEARCH_DOCS}ccr-put-follow.html`,
diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts
index b29017f71d7391..428ef86267dd1d 100644
--- a/packages/kbn-doc-links/src/types.ts
+++ b/packages/kbn-doc-links/src/types.ts
@@ -361,6 +361,7 @@ export interface DocLinks {
   readonly visualize: Record<string, string>;
   readonly apis: Readonly<{
     bulkIndexAlias: string;
+    indexStats: string;
     byteSizeUnits: string;
     createAutoFollowPattern: string;
     createFollower: string;
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 a9d7a6674f16f2..c581d84cb9fe1f 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
@@ -6,6 +6,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { css } from '@emotion/react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
 import { Route, Routes } from '@kbn/shared-ux-router';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -25,7 +26,7 @@ import { DiscoverLink } from '../../../../lib/discover_link';
 import { Section } from '../../home';
 import { DetailsPageError } from './details_page_error';
 import { ManageIndexButton } from './manage_index_button';
-import { StatsTab } from './tabs';
+import { DetailsPageStats } from './tabs';
 
 export enum IndexDetailsSection {
   Overview = 'overview',
@@ -139,7 +140,6 @@ export const DetailsPage: React.FunctionComponent<
   if (error || !index) {
     return <DetailsPageError indexName={indexName} resendRequest={fetchIndexDetails} />;
   }
-
   return (
     <>
       <EuiPageSection paddingSize="none">
@@ -176,7 +176,12 @@ export const DetailsPage: React.FunctionComponent<
 
       <EuiSpacer size="l" />
 
-      <div data-test-subj={`indexDetailsContent`}>
+      <div
+        data-test-subj={`indexDetailsContent`}
+        css={css`
+          height: 100%;
+        `}
+      >
         <Routes>
           <Route
             path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Overview}`}
@@ -200,8 +205,8 @@ export const DetailsPage: React.FunctionComponent<
           />
           {config.enableIndexStats && (
             <Route
-              path={`/${Section.Indices}/${indexName}/${IndexDetailsSection.Stats}`}
-              render={() => <StatsTab indexName={indexName} />}
+              path={`/${Section.Indices}/:indexName/${IndexDetailsSection.Stats}`}
+              component={DetailsPageStats}
             />
           )}
           <Redirect
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/index.ts b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/index.ts
index 4ac354f666d7af..1f2a5cd8704531 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/index.ts
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { StatsTab } from './stats';
+export { DetailsPageStats } from './stats';
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/stats.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/stats.tsx
index 690d509d94cc7d..ac48ace6b85df5 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/stats.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/tabs/stats.tsx
@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { FunctionComponent } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
   EuiSpacer,
@@ -19,23 +20,25 @@ import {
   EuiIcon,
   EuiButton,
   EuiPageTemplate,
+  EuiLink,
 } from '@elastic/eui';
 
+import { css } from '@emotion/react';
 import { SectionLoading } from '../../../../../../shared_imports';
-import { useLoadIndexStats } from '../../../../../services';
+import { useLoadIndexStats, documentationService } from '../../../../../services';
 
-interface Props {
-  indexName: string;
-}
-
-export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
+export const DetailsPageStats: FunctionComponent<RouteComponentProps<{ indexName: string }>> = ({
+  match: {
+    params: { indexName },
+  },
+}) => {
   const { data: indexStats, isLoading, error, resendRequest } = useLoadIndexStats(indexName);
 
   if (isLoading) {
     return (
       <SectionLoading>
         <FormattedMessage
-          id="xpack.idxMgmt.indexDetails.indexStatsTab.loadingIndexStats"
+          id="xpack.idxMgmt.indexDetails.stats.loadingIndexStats"
           defaultMessage="Loading index stats…"
         />
       </SectionLoading>
@@ -51,7 +54,7 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
         title={
           <h2>
             <FormattedMessage
-              id="xpack.idxMgmt.indexDetails.indexStatsTab.errorTitle"
+              id="xpack.idxMgmt.indexDetails.stats.errorTitle"
               defaultMessage="Unable to load index stats"
             />
           </h2>
@@ -60,7 +63,7 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
           <>
             <EuiText color="subdued">
               <FormattedMessage
-                id="xpack.idxMgmt.indexDetails.indexStatsTab.errorDescription"
+                id="xpack.idxMgmt.indexDetails.stats.errorDescription"
                 defaultMessage="There was an error loading stats for index {indexName}."
                 values={{
                   indexName,
@@ -76,7 +79,7 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
               data-test-subj="reloadIndexStatsButton"
             >
               <FormattedMessage
-                id="xpack.idxMgmt.indexDetails.indexStatsTab.reloadButtonLabel"
+                id="xpack.idxMgmt.indexDetails.stats.reloadButtonLabel"
                 defaultMessage="Reload"
               />
             </EuiButton>
@@ -87,18 +90,23 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
   }
 
   if (indexStats) {
+    // using "rowReverse" to keep docs links on the top of the stats code block on smaller screen
     return (
-      <EuiFlexGroup alignItems="flexStart" data-test-subj="statsTabContent">
-        <EuiFlexItem grow={7}>
-          <EuiPanel>
-            <EuiCodeBlock isCopyable language="json" fontSize="m" paddingSize="m">
-              {JSON.stringify(indexStats, null, 2)}
-            </EuiCodeBlock>
-          </EuiPanel>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={3}>
-          <EuiPanel>
+      <EuiFlexGroup
+        wrap
+        direction="rowReverse"
+        css={css`
+          height: 100%;
+        `}
+        data-test-subj="statsTabContent"
+      >
+        <EuiFlexItem
+          grow={1}
+          css={css`
+            min-width: 400px;
+          `}
+        >
+          <EuiPanel grow={false} paddingSize="l">
             <EuiFlexGroup alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
                 <EuiIcon type="iInCircle" />
@@ -108,7 +116,7 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
                 <EuiTitle size="xs">
                   <h2>
                     <FormattedMessage
-                      id="xpack.idxMgmt.indexDetails.indexStatsTab.indexStatsTitle"
+                      id="xpack.idxMgmt.indexDetails.stats.indexStatsTitle"
                       defaultMessage="About index stats"
                     />
                   </h2>
@@ -116,10 +124,12 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
               </EuiFlexItem>
             </EuiFlexGroup>
 
+            <EuiSpacer size="s" />
+
             <EuiText>
               <p>
                 <FormattedMessage
-                  id="xpack.idxMgmt.indexDetails.indexStatsTab.indexStatsDescription"
+                  id="xpack.idxMgmt.indexDetails.stats.indexStatsDescription"
                   defaultMessage="Index stats contain high-level aggregation and statistics for an index. The {primariesField} field represents the values for only primary shards, while the {totalField} field contains the accumulated values for both primary and replica shards."
                   values={{
                     primariesField: <EuiCode>primaries</EuiCode>,
@@ -128,6 +138,39 @@ export const StatsTab: React.FunctionComponent<Props> = ({ indexName }) => {
                 />
               </p>
             </EuiText>
+
+            <EuiSpacer size="m" />
+            <EuiLink
+              data-test-subj="indexDetailsStatsDocsLink"
+              href={documentationService.getIndexStats()}
+              target="_blank"
+              external
+            >
+              <FormattedMessage
+                id="xpack.idxMgmt.indexDetails.stats.learnMoreLink"
+                defaultMessage="Learn more"
+              />
+            </EuiLink>
+          </EuiPanel>
+        </EuiFlexItem>
+
+        <EuiFlexItem
+          grow={3}
+          css={css`
+            min-width: 600px;
+          `}
+        >
+          <EuiPanel>
+            <EuiCodeBlock
+              isCopyable
+              language="json"
+              paddingSize="m"
+              css={css`
+                height: 100%;
+              `}
+            >
+              {JSON.stringify(indexStats, null, 2)}
+            </EuiCodeBlock>
           </EuiPanel>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/x-pack/plugins/index_management/public/application/services/documentation.ts b/x-pack/plugins/index_management/public/application/services/documentation.ts
index 0eb9f62fffd099..3fc34477cacae8 100644
--- a/x-pack/plugins/index_management/public/application/services/documentation.ts
+++ b/x-pack/plugins/index_management/public/application/services/documentation.ts
@@ -59,6 +59,7 @@ class DocumentationService {
   private runtimeFields: string = '';
   private indicesComponentTemplate: string = '';
   private bulkIndexAlias: string = '';
+  private indexStats: string = '';
 
   public setup(docLinks: DocLinksStart): void {
     const { links } = docLinks;
@@ -111,6 +112,7 @@ class DocumentationService {
     this.runtimeFields = links.runtimeFields.overview;
     this.indicesComponentTemplate = links.apis.putComponentTemplate;
     this.bulkIndexAlias = links.apis.bulkIndexAlias;
+    this.indexStats = links.apis.indexStats;
   }
 
   public getEsDocsBase() {
@@ -311,6 +313,10 @@ class DocumentationService {
     return this.bulkIndexAlias;
   }
 
+  public getIndexStats() {
+    return this.indexStats;
+  }
+
   public getWellKnownTextLink() {
     return 'http://docs.opengeospatial.org/is/12-063r5/12-063r5.html';
   }
diff --git a/x-pack/plugins/index_management/public/application/services/index.ts b/x-pack/plugins/index_management/public/application/services/index.ts
index 53fabecdd80807..7375cf27db653e 100644
--- a/x-pack/plugins/index_management/public/application/services/index.ts
+++ b/x-pack/plugins/index_management/public/application/services/index.ts
@@ -33,3 +33,4 @@ export { sortTable } from './sort_table';
 export { UiMetricService } from './ui_metric';
 export { HttpService } from './http';
 export { NotificationService } from './notification';
+export { documentationService } from './documentation';