diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
index 970b1488010c0..62ac53004a773 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
@@ -11,11 +11,11 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiButtonIcon, EuiPanel, EuiTextColor, EuiTitle } from '@elastic/eui';
+import { EuiButtonEmpty, EuiPanel, EuiText, EuiTitle } from '@elastic/eui';
 
 import { InferencePipeline, TrainedModelState } from '../../../../../../common/types/pipelines';
 
-import { InferencePipelineCard } from './inference_pipeline_card';
+import { InferencePipelineCard, TrainedModelHealthPopover } from './inference_pipeline_card';
 import { MLModelTypeBadge } from './ml_model_type_badge';
 
 export const DEFAULT_VALUES: InferencePipeline = {
@@ -40,7 +40,7 @@ describe('InferencePipelineCard', () => {
   it('renders pipeline as title', () => {
     const wrapper = shallow(<InferencePipelineCard {...mockValues} />);
     expect(wrapper.find(EuiTitle)).toHaveLength(1);
-    const title = wrapper.find(EuiTitle).dive();
+    const title = wrapper.find(EuiTitle).at(0).children();
     expect(title.text()).toBe(DEFAULT_VALUES.pipelineName);
   });
   it('renders pipeline as title with unknown model type', () => {
@@ -51,14 +51,14 @@ describe('InferencePipelineCard', () => {
     const wrapper = shallow(<InferencePipelineCard {...values} />);
     expect(wrapper.find(EuiTitle)).toHaveLength(1);
     // does not render subtitle
-    expect(wrapper.find(EuiTextColor)).toHaveLength(0);
-    const title = wrapper.find(EuiTitle).dive();
+    expect(wrapper.find(EuiText)).toHaveLength(0);
+    const title = wrapper.find(EuiTitle).at(0).children();
     expect(title.text()).toBe(DEFAULT_VALUES.pipelineName);
   });
   it('renders model ID as subtitle', () => {
     const wrapper = shallow(<InferencePipelineCard {...mockValues} />);
-    expect(wrapper.find(EuiTextColor)).toHaveLength(1);
-    const subtitle = wrapper.find(EuiTextColor).dive();
+    expect(wrapper.find(EuiText)).toHaveLength(1);
+    const subtitle = wrapper.find(EuiText).at(0).children();
     expect(subtitle.text()).toBe(DEFAULT_VALUES.modelId);
   });
   it('renders model type as badge', () => {
@@ -67,20 +67,28 @@ describe('InferencePipelineCard', () => {
     const badge = wrapper.find(MLModelTypeBadge).render();
     expect(badge.text()).toBe('ner');
   });
-  it('renders fix button when model not deployed', () => {
+});
+
+describe('TrainedModelHealthPopover', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues(mockValues);
+  });
+  it('popover renders fix button when model not deployed', () => {
     const values = {
       ...DEFAULT_VALUES,
       modelState: TrainedModelState.NotDeployed,
     };
-    const wrapper = shallow(<InferencePipelineCard {...values} />);
-    expect(wrapper.find(EuiButtonIcon)).toHaveLength(1);
+    const wrapper = shallow(<TrainedModelHealthPopover {...values} />);
+    expect(wrapper.find(EuiButtonEmpty)).toHaveLength(3);
 
-    const fixButton = wrapper.find(EuiButtonIcon);
+    const fixButton = wrapper.find(EuiButtonEmpty).at(0);
     expect(fixButton.prop('iconType')).toBe('wrench');
     expect(fixButton.prop('href')).toBe('/app/ml/trained_models');
+    expect(fixButton.children().text()).toBe('Fix issue in Trained Models');
   });
-  it('does not render fix button when model deployed', () => {
-    const wrapper = shallow(<InferencePipelineCard {...mockValues} />);
-    expect(wrapper.find(EuiButtonIcon)).toHaveLength(0);
+  it('popover does not render fix button when model deployed', () => {
+    const wrapper = shallow(<TrainedModelHealthPopover {...mockValues} />);
+    expect(wrapper.find(EuiButtonEmpty)).toHaveLength(2);
   });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
index dcc4b2a0cad8f..342d05c398878 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
@@ -11,16 +11,14 @@ import { useActions, useValues } from 'kea';
 
 import {
   EuiButtonEmpty,
-  EuiButtonIcon,
   EuiConfirmModal,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
   EuiPopover,
   EuiText,
-  EuiTextColor,
   EuiTitle,
-  EuiToolTip,
+  useIsWithinMaxBreakpoint,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -39,20 +37,18 @@ import { TrainedModelHealth } from './ml_model_health';
 import { MLModelTypeBadge } from './ml_model_type_badge';
 import { PipelinesLogic } from './pipelines_logic';
 
-export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) => {
+export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline) => {
   const { http } = useValues(HttpLogic);
   const { indexName } = useValues(IndexNameLogic);
   const { ingestionMethod } = useValues(IndexViewLogic);
+
+  const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic);
+
   const [isPopOverOpen, setIsPopOverOpen] = useState(false);
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const { deleteMlPipeline, detachMlPipeline } = useActions(PipelinesLogic);
-  const showConfirmDeleteModal = () => {
-    setShowConfirmDelete(true);
-    setIsPopOverOpen(false);
-  };
-  const { modelId, pipelineName, types: modelTypes } = pipeline;
-  const modelType = getMLType(modelTypes);
-  const modelTitle = getModelDisplayTitle(modelType);
+
+  const { pipelineName } = pipeline;
+
   const actionButton = (
     <EuiButtonEmpty
       iconSide="right"
@@ -67,119 +63,88 @@ export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) =>
     </EuiButtonEmpty>
   );
 
+  const showConfirmDeleteModal = () => {
+    setShowConfirmDelete(true);
+    setIsPopOverOpen(false);
+  };
+
   return (
-    <EuiPanel color="subdued">
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiFlexGroup direction="column" gutterSize="xs">
+    <>
+      <EuiPopover
+        button={actionButton}
+        isOpen={isPopOverOpen}
+        closePopover={() => setIsPopOverOpen(false)}
+      >
+        <EuiFlexGroup direction="column" gutterSize="none">
+          {pipeline.modelState === TrainedModelState.NotDeployed && (
             <EuiFlexItem>
-              <EuiFlexGroup alignItems="center">
-                <EuiFlexItem>
-                  <EuiTitle size="xs">
-                    <h4>{pipelineName ?? modelTitle}</h4>
-                  </EuiTitle>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false} />
-              </EuiFlexGroup>
-            </EuiFlexItem>
-            {modelTitle && (
-              <EuiFlexItem>
-                <EuiFlexGroup gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiTextColor color="subdued">{modelId}</EuiTextColor>
-                  </EuiFlexItem>
-                  <EuiFlexItem>
-                    <span>
-                      <MLModelTypeBadge type={modelType} />
-                    </span>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiPopover
-            button={actionButton}
-            isOpen={isPopOverOpen}
-            closePopover={() => setIsPopOverOpen(false)}
-          >
-            {pipeline.modelState === TrainedModelState.NotDeployed && (
-              <EuiFlexItem grow={false} style={{ paddingRight: '1rem' }}>
-                <EuiToolTip
-                  position="top"
-                  content={i18n.translate(
+              <span>
+                <EuiButtonEmpty
+                  data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-fixIssueInTrainedModels`}
+                  size="s"
+                  flush="both"
+                  iconType="wrench"
+                  color="text"
+                  href={http.basePath.prepend(ML_MANAGE_TRAINED_MODELS_PATH)}
+                >
+                  {i18n.translate(
                     'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink',
-                    { defaultMessage: 'Fix issue in Trained Models' }
+                    {
+                      defaultMessage: 'Fix issue in Trained Models',
+                    }
                   )}
-                >
-                  <EuiButtonIcon
-                    aria-label={i18n.translate(
-                      'xpack.enterpriseSearch.inferencePipelineCard.modelState.notDeployed.fixLink',
-                      {
-                        defaultMessage: 'Fix issue in Trained Models',
-                      }
-                    )}
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-fixIssueInTrainedModels`}
-                    href={http.basePath.prepend(ML_MANAGE_TRAINED_MODELS_PATH)}
-                    display="base"
-                    size="xs"
-                    iconType="wrench"
-                  />
-                </EuiToolTip>
-              </EuiFlexItem>
-            )}
-            <EuiFlexGroup direction="column" gutterSize="none">
-              <EuiFlexItem>
-                <div>
-                  <EuiButtonEmpty
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-stackManagement`}
-                    size="s"
-                    flush="both"
-                    iconType="eye"
-                    color="text"
-                    href={http.basePath.prepend(
-                      `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}`
-                    )}
-                  >
-                    {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', {
-                      defaultMessage: 'View in Stack Management',
-                    })}
-                  </EuiButtonEmpty>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <div>
-                  <EuiButtonEmpty
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-detachPipeline`}
-                    size="s"
-                    flush="both"
-                    iconType="unlink"
-                    color="text"
-                    onClick={() => {
-                      detachMlPipeline({ indexName, pipelineName });
-                      setIsPopOverOpen(false);
-                    }}
-                  >
-                    {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.detach', {
-                      defaultMessage: 'Detach pipeline',
-                    })}
-                  </EuiButtonEmpty>
-                </div>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <div>
-                  <DeleteInferencePipelineButton
-                    data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-deletePipeline`}
-                    onClick={showConfirmDeleteModal}
-                    pipeline={pipeline}
-                  />
-                </div>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPopover>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+                </EuiButtonEmpty>
+              </span>
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem>
+            <span>
+              <EuiButtonEmpty
+                data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-stackManagement`}
+                size="s"
+                flush="both"
+                iconType="eye"
+                color="text"
+                href={http.basePath.prepend(
+                  `/app/management/ingest/ingest_pipelines/?pipeline=${pipelineName}`
+                )}
+              >
+                {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.view', {
+                  defaultMessage: 'View in Stack Management',
+                })}
+              </EuiButtonEmpty>
+            </span>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <span>
+              <EuiButtonEmpty
+                data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-detachPipeline`}
+                size="s"
+                flush="both"
+                iconType="unlink"
+                color="text"
+                onClick={() => {
+                  detachMlPipeline({ indexName, pipelineName });
+                  setIsPopOverOpen(false);
+                }}
+              >
+                {i18n.translate('xpack.enterpriseSearch.inferencePipelineCard.action.detach', {
+                  defaultMessage: 'Detach pipeline',
+                })}
+              </EuiButtonEmpty>
+            </span>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <span>
+              <DeleteInferencePipelineButton
+                data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-deletePipeline`}
+                onClick={showConfirmDeleteModal}
+                pipeline={pipeline}
+              />
+            </span>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopover>
 
       {showConfirmDelete && (
         <EuiConfirmModal
@@ -217,6 +182,48 @@ export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) =>
           </EuiText>
         </EuiConfirmModal>
       )}
+    </>
+  );
+};
+
+export const InferencePipelineCard: React.FC<InferencePipeline> = (pipeline) => {
+  const { modelId, pipelineName, types: modelTypes } = pipeline;
+  const modelType = getMLType(modelTypes);
+  const modelTitle = getModelDisplayTitle(modelType);
+  const isSmallScreen = useIsWithinMaxBreakpoint('s');
+
+  return (
+    <EuiPanel color="subdued">
+      <EuiFlexGroup alignItems="center" gutterSize={isSmallScreen ? 'xs' : undefined}>
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column" gutterSize="xs">
+            <EuiFlexItem>
+              <EuiTitle size="xs">
+                <h4>{pipelineName ?? modelTitle}</h4>
+              </EuiTitle>
+            </EuiFlexItem>
+            {modelTitle && (
+              <EuiFlexItem>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiText size="s" color="subdued">
+                      {modelId}
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <span>
+                      <MLModelTypeBadge type={modelType} />
+                    </span>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <TrainedModelHealthPopover {...pipeline} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
index deea940cfe68d..49e00f30c12d4 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/pipeline_select_option.tsx
@@ -45,21 +45,21 @@ export const PipelineSelectOption: React.FC<PipelineSelectOptionProps> = ({ pipe
     // TODO: Add model state & pipeline info link. Make sure to check mobile rendering when doing this!
     <EuiFlexGroup direction="column" gutterSize="xs">
       <EuiFlexItem>
-        <EuiTitle size="xxs">
-          <h5>{pipeline.pipelineName}</h5>
+        <EuiTitle size="xs">
+          <h4>{pipeline.pipelineName}</h4>
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" justifyContent="flexStart">
+        <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
           <EuiFlexItem grow={pipeline.modelType.length === 0}>
             <EuiText size="s">{modelIdDisplay}</EuiText>
           </EuiFlexItem>
           {pipeline.modelType.length > 0 && (
             <EuiFlexItem>
-              {/* Wrap in a div to prevent the badge from growing to a whole row on mobile*/}
-              <div>
+              {/* Wrap in a span to prevent the badge from growing to a whole row on mobile*/}
+              <span>
                 <MLModelTypeBadge type={pipeline.modelType} />
-              </div>
+              </span>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>