diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss
index 8e886f22a2558e..0a3e78351e9ee7 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula.scss
@@ -108,19 +108,23 @@
 }
 
 .lnsFormula__docsSidebar {
-  height: 100%;
+  background: $euiColorLightestShade;
+}
+
+.lnsFormula__docsSidebarInner {
+  min-height: 0;
+
+  & > * + * {
+    border-top: $euiBorderThin;
+  }
 }
 
 .lnsFormula__docsSearch {
-  border: none;
-  border-bottom: $euiBorderThin;
-  box-shadow: none;
-  border-radius: 0;
+  padding: $euiSizeS;
 }
 
 .lnsFormula__docsNav {
   @include euiYScroll;
-  background: $euiColorLightestShade;
 }
 
 .lnsFormula__docsNavGroup {
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx
index 0ee81e7f381614..cfcd6b24f3f3da 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/formula/editor/formula_help.tsx
@@ -15,12 +15,12 @@ import {
   EuiText,
   EuiListGroupItem,
   EuiListGroup,
-  EuiMarkdownFormat,
   EuiTitle,
   EuiButtonIcon,
   EuiFieldSearch,
   EuiHighlight,
 } from '@elastic/eui';
+import { Markdown } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { IndexPattern } from '../../../../types';
 import { tinymathFunctions } from '../util';
 import { getPossibleFunctions } from './math_completion';
@@ -56,7 +56,7 @@ function FormulaHelp({
 
   const helpGroups: Array<{
     label: string;
-    description?: JSX.Element;
+    description?: string;
     items: Array<{ label: string; description?: JSX.Element }>;
   }> = [];
 
@@ -71,14 +71,10 @@ function FormulaHelp({
     label: i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSection', {
       defaultMessage: 'Elasticsearch',
     }),
-    description: (
-      <EuiText size="s">
-        {i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSectionDescription', {
-          defaultMessage:
-            'These functions will be executed on the raw documents for each row of the resulting table, aggregating all documents matching the break down dimensions into a single value.',
-        })}
-      </EuiText>
-    ),
+    description: i18n.translate('xpack.lens.formulaDocumentation.elasticsearchSectionDescription', {
+      defaultMessage:
+        'These functions will be executed on the raw documents for each row of the resulting table, aggregating all documents matching the break down dimensions into a single value.',
+    }),
     items: [],
   });
 
@@ -97,15 +93,12 @@ function FormulaHelp({
         label: key,
         description: (
           <>
-            <EuiTitle size="s">
-              <h3>
-                {key}({operationDefinitionMap[key].documentation?.signature})
-              </h3>
-            </EuiTitle>
+            <h3>
+              {key}({operationDefinitionMap[key].documentation?.signature})
+            </h3>
+
             {operationDefinitionMap[key].documentation?.description ? (
-              <EuiMarkdownFormat>
-                {operationDefinitionMap[key].documentation!.description}
-              </EuiMarkdownFormat>
+              <Markdown markdown={operationDefinitionMap[key].documentation!.description} />
             ) : null}
           </>
         ),
@@ -116,13 +109,12 @@ function FormulaHelp({
     label: i18n.translate('xpack.lens.formulaDocumentation.columnCalculationSection', {
       defaultMessage: 'Column-wise calculation',
     }),
-    description: (
-      <EuiText size="s">
-        {i18n.translate('xpack.lens.formulaDocumentation.columnCalculationSectionDescription', {
-          defaultMessage:
-            'These functions will be executed for reach row of the resulting table, using data from cells from other rows as well as the current value.',
-        })}
-      </EuiText>
+    description: i18n.translate(
+      'xpack.lens.formulaDocumentation.columnCalculationSectionDescription',
+      {
+        defaultMessage:
+          'These functions will be executed for reach row of the resulting table, using data from cells from other rows as well as the current value.',
+      }
     ),
     items: [],
   });
@@ -140,15 +132,12 @@ function FormulaHelp({
         label: key,
         description: (
           <>
-            <EuiTitle size="s">
-              <h3>
-                {key}({operationDefinitionMap[key].documentation?.signature})
-              </h3>
-            </EuiTitle>
+            <h3>
+              {key}({operationDefinitionMap[key].documentation?.signature})
+            </h3>
+
             {operationDefinitionMap[key].documentation?.description ? (
-              <EuiMarkdownFormat>
-                {operationDefinitionMap[key].documentation!.description}
-              </EuiMarkdownFormat>
+              <Markdown markdown={operationDefinitionMap[key].documentation!.description} />
             ) : null}
           </>
         ),
@@ -163,14 +152,10 @@ function FormulaHelp({
     label: i18n.translate('xpack.lens.formulaDocumentation.mathSection', {
       defaultMessage: 'Math',
     }),
-    description: (
-      <EuiText size="s">
-        {i18n.translate('xpack.lens.formulaDocumentation.mathSectionDescription', {
-          defaultMessage:
-            'These functions will be executed for reach row of the resulting table using single values from the same row calculated using other functions.',
-        })}
-      </EuiText>
-    ),
+    description: i18n.translate('xpack.lens.formulaDocumentation.mathSectionDescription', {
+      defaultMessage:
+        'These functions will be executed for reach row of the resulting table using single values from the same row calculated using other functions.',
+    }),
     items: [],
   });
 
@@ -194,10 +179,9 @@ function FormulaHelp({
         label,
         description: (
           <>
-            <EuiTitle size="s">
-              <h3>{getFunctionSignatureLabel(label, operationDefinitionMap)}</h3>
-            </EuiTitle>
-            <EuiMarkdownFormat>{`${description}${examples}`}</EuiMarkdownFormat>
+            <h3>{getFunctionSignatureLabel(label, operationDefinitionMap)}</h3>
+
+            <Markdown markdown={`${description}${examples}`} />
           </>
         ),
       };
@@ -238,16 +222,14 @@ function FormulaHelp({
         responsive={false}
         alignItems="stretch"
       >
-        <EuiFlexItem grow={1}>
+        <EuiFlexItem className="lnsFormula__docsSidebar" grow={1}>
           <EuiFlexGroup
+            className="lnsFormula__docsSidebarInner"
             direction="column"
             gutterSize="none"
-            responsive={false}
-            className="lnsFormula__docsSidebar"
           >
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem className="lnsFormula__docsSearch" grow={false}>
               <EuiFieldSearch
-                className="lnsFormula__docsSearch"
                 value={searchText}
                 onChange={(e) => {
                   setSearchText(e.target.value);
@@ -257,7 +239,8 @@ function FormulaHelp({
                 })}
               />
             </EuiFlexItem>
-            <EuiFlexItem className="lnsFormula__docsNav" grow={true}>
+
+            <EuiFlexItem className="lnsFormula__docsNav">
               {helpGroups.map((helpGroup, index) => {
                 return (
                   <nav className="lnsFormula__docsNavGroup" key={helpGroup.label}>
@@ -303,16 +286,18 @@ function FormulaHelp({
         </EuiFlexItem>
 
         <EuiFlexItem className="lnsFormula__docsText" grow={2}>
-          <section
-            ref={(el) => {
-              if (el) {
-                scrollTargets.current[helpGroups[0].label] = el;
-              }
-            }}
-          >
-            <EuiMarkdownFormat>
-              {i18n.translate('xpack.lens.formulaDocumentation', {
-                defaultMessage: `
+          <EuiText size="s">
+            <section
+              className="lnsFormula__docsTextIntro"
+              ref={(el) => {
+                if (el) {
+                  scrollTargets.current[helpGroups[0].label] = el;
+                }
+              }}
+            >
+              <Markdown
+                markdown={i18n.translate('xpack.lens.formulaDocumentation', {
+                  defaultMessage: `
 ## How it works
 
 Lens formulas let you do math using a combination of Elasticsearch aggregations and
@@ -345,47 +330,46 @@ Math functions can take positional arguments, like pow(count(), 3) is the same a
 
 Use the symbols +, -, /, and * to perform basic math.
                   `,
-                description:
-                  'Text is in markdown. Do not translate function names or field names like sum(bytes)',
-              })}
-            </EuiMarkdownFormat>
-          </section>
-
-          {helpGroups.slice(1).map((helpGroup, index) => {
-            return (
-              <section
-                className="lnsFormula__docsTextGroup"
-                key={helpGroup.label}
-                ref={(el) => {
-                  if (el) {
-                    scrollTargets.current[helpGroup.label] = el;
-                  }
-                }}
-              >
-                <EuiTitle size="xxs">
-                  <h2>{helpGroup.label}</h2>
-                </EuiTitle>
-
-                {helpGroup.description}
-
-                {helpGroups[index + 1].items.map((helpItem) => {
-                  return (
-                    <article
-                      className="lnsFormula__docsTextItem"
-                      key={helpItem.label}
-                      ref={(el) => {
-                        if (el) {
-                          scrollTargets.current[helpItem.label] = el;
-                        }
-                      }}
-                    >
-                      {helpItem.description}
-                    </article>
-                  );
+                  description:
+                    'Text is in markdown. Do not translate function names or field names like sum(bytes)',
                 })}
-              </section>
-            );
-          })}
+              />
+            </section>
+
+            {helpGroups.slice(1).map((helpGroup, index) => {
+              return (
+                <section
+                  className="lnsFormula__docsTextGroup"
+                  key={helpGroup.label}
+                  ref={(el) => {
+                    if (el) {
+                      scrollTargets.current[helpGroup.label] = el;
+                    }
+                  }}
+                >
+                  <h2>{helpGroup.label}</h2>
+
+                  <p>{helpGroup.description}</p>
+
+                  {helpGroups[index + 1].items.map((helpItem) => {
+                    return (
+                      <article
+                        className="lnsFormula__docsTextItem"
+                        key={helpItem.label}
+                        ref={(el) => {
+                          if (el) {
+                            scrollTargets.current[helpItem.label] = el;
+                          }
+                        }}
+                      >
+                        {helpItem.description}
+                      </article>
+                    );
+                  })}
+                </section>
+              );
+            })}
+          </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>