diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
index 55c9cc7958346..e23f7d30412b6 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -237,6 +237,27 @@ export const Library: React.FC = () => {
           />
           <EuiSpacer />
 
+          <EuiTitle size="s">
+            <h3>With a document position</h3>
+          </EuiTitle>
+          <EuiSpacer />
+          <Result
+            {...{
+              ...props,
+              showResultPosition: true,
+              resultPosition: 3,
+              result: {
+                ...props.result,
+                _meta: {
+                  id: '1',
+                  score: 100,
+                  engine: 'my-engine',
+                },
+              },
+            }}
+          />
+          <EuiSpacer />
+
           <EuiTitle size="s">
             <h3>With an id and a score and an engine</h3>
           </EuiTitle>
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
index 9be9afa051351..557e50e639994 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx
@@ -28,6 +28,8 @@ interface Props {
   result: ResultType;
   isMetaEngine: boolean;
   showScore?: boolean;
+  showResultPosition?: boolean;
+  resultPosition?: number;
   shouldLinkToDetailPage?: boolean;
   schemaForTypeHighlights?: Schema;
   actions?: ResultAction[];
@@ -44,6 +46,8 @@ export const Result: React.FC<Props> = ({
   schemaForTypeHighlights,
   actions = [],
   dragHandleProps,
+  showResultPosition,
+  resultPosition,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -100,6 +104,8 @@ export const Result: React.FC<Props> = ({
           isMetaEngine={isMetaEngine}
           documentLink={documentLink}
           actions={actions}
+          showResultPosition
+          resultPosition={resultPosition || undefined}
         />
         {resultFields
           .slice(0, isOpen ? resultFields.length : RESULT_CUTOFF)
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
index f577b481b39cf..eb540df110a4e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result_header.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { ResultActions } from './result_actions';
 import { ResultHeaderItem } from './result_header_item';
@@ -21,14 +21,18 @@ interface Props {
   resultMeta: ResultMeta;
   actions: ResultAction[];
   documentLink?: string;
+  showResultPosition?: boolean;
+  resultPosition?: number;
 }
 
 export const ResultHeader: React.FC<Props> = ({
+  showResultPosition,
   showScore,
   resultMeta,
   isMetaEngine,
   actions,
   documentLink,
+  resultPosition,
 }) => {
   return (
     <header className="appSearchResultHeader">
@@ -39,6 +43,11 @@ export const ResultHeader: React.FC<Props> = ({
         responsive={false}
         wrap
       >
+        {showResultPosition && resultPosition && (
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="hollow">#{resultPosition}</EuiBadge>
+          </EuiFlexItem>
+        )}
         <EuiFlexItem grow>
           <ResultHeaderItem
             href={documentLink}