diff --git a/src/sentry/static/sentry/app/views/performance/landing/content.tsx b/src/sentry/static/sentry/app/views/performance/landing/content.tsx
index 0aa80afb766a5f..bcfea11514c254 100644
--- a/src/sentry/static/sentry/app/views/performance/landing/content.tsx
+++ b/src/sentry/static/sentry/app/views/performance/landing/content.tsx
@@ -26,7 +26,7 @@ import {
   LANDING_DISPLAYS,
   LandingDisplayField,
 } from './utils';
-import VitalsCards from './vitalsCards';
+import {FrontendCards} from './vitalsCards';
 
 type Props = {
   organization: Organization;
@@ -133,11 +133,11 @@ class LandingContent extends React.Component<Props, State> {
                       </DropdownControl>
                     </ProjectTypeDropdown>
                   </SearchContainer>
-                  <VitalsCards
+                  <FrontendCards
                     eventView={frontendEventView}
                     organization={organization}
                     location={location}
-                    isAlwaysShown
+                    projects={projects}
                   />
                   {currentLandingDisplay.field === LandingDisplayField.FRONTEND && (
                     <FrontendDisplay
@@ -173,10 +173,12 @@ class LandingContent extends React.Component<Props, State> {
                   onSearch={handleSearch}
                 />
                 <Feature features={['performance-vitals-overview']}>
-                  <VitalsCards
+                  <FrontendCards
                     eventView={eventView}
                     organization={organization}
                     location={location}
+                    projects={projects}
+                    frontendOnly
                   />
                 </Feature>
                 <Charts
diff --git a/src/sentry/static/sentry/app/views/performance/landing/vitalsCards.tsx b/src/sentry/static/sentry/app/views/performance/landing/vitalsCards.tsx
index 493acbde1a8026..11b5f8dd77ff3d 100644
--- a/src/sentry/static/sentry/app/views/performance/landing/vitalsCards.tsx
+++ b/src/sentry/static/sentry/app/views/performance/landing/vitalsCards.tsx
@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import Card from 'app/components/card';
+import EmptyStateWarning from 'app/components/emptyStateWarning';
 import Link from 'app/components/links/link';
+import Placeholder from 'app/components/placeholder';
 import QuestionTooltip from 'app/components/questionTooltip';
 import {t} from 'app/locale';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
@@ -12,7 +14,6 @@ import {Organization, Project} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
 import {getAggregateAlias, WebVital} from 'app/utils/discover/fields';
 import {decodeList} from 'app/utils/queryString';
-import withProjects from 'app/utils/withProjects';
 import VitalsCardsDiscoverQuery from 'app/views/performance/vitalDetail/vitalsCardsDiscoverQuery';
 
 import {HeaderTitle} from '../styles';
@@ -31,17 +32,6 @@ import {
 } from '../vitalDetail/utils';
 import VitalPercents from '../vitalDetail/vitalPercents';
 
-type Props = {
-  eventView: EventView;
-  organization: Organization;
-  location: Location;
-  showVitalPercentNames?: boolean;
-  showDurationDetail?: boolean;
-  hasCondensedVitals?: boolean;
-  projects: Project[];
-  isAlwaysShown?: boolean; // Temporary while platform list still exists.
-};
-
 // Temporary list of platforms to only show web vitals for.
 const VITALS_PLATFORMS = [
   'javascript',
@@ -54,56 +44,77 @@ const VITALS_PLATFORMS = [
   'javascript-vue',
 ];
 
-function VitalsCards(props: Props) {
-  const {eventView, organization, location, projects} = props;
-  const vitalsView = eventView.clone();
+type VitalsCardsProps = {
+  eventView: EventView;
+  location: Location;
+  organization: Organization;
+  projects: Project[];
+  frontendOnly?: boolean;
+};
 
-  const showVitalsCard = vitalsView.project.some(projectId =>
-    VITALS_PLATFORMS.includes(
-      projects.find(project => project.id === `${projectId}`)?.platform || ''
-    )
-  );
+export function FrontendCards(props: VitalsCardsProps) {
+  const {eventView, location, organization, projects, frontendOnly = false} = props;
 
-  if (!showVitalsCard && !props.isAlwaysShown) {
-    return null;
+  if (frontendOnly) {
+    const isFrontend = eventView.project.some(projectId =>
+      VITALS_PLATFORMS.includes(
+        projects.find(project => project.id === `${projectId}`)?.platform || ''
+      )
+    );
+
+    if (!isFrontend) {
+      return null;
+    }
   }
 
-  const shownVitals = [WebVital.FCP, WebVital.LCP, WebVital.FID, WebVital.CLS];
+  const vitals = [WebVital.FCP, WebVital.LCP, WebVital.FID, WebVital.CLS];
 
   return (
     <VitalsCardsDiscoverQuery
-      eventView={vitalsView}
-      orgSlug={organization.slug}
+      eventView={eventView}
       location={location}
+      orgSlug={organization.slug}
+      vitals={vitals}
     >
-      {({isLoading, tableData}) => (
-        <VitalsContainer>
-          {props.hasCondensedVitals ? (
-            <CondensedVitalsCard
-              tableData={tableData}
-              isLoading={isLoading}
-              {...props}
-              condensedVitals={shownVitals}
-            />
-          ) : (
-            shownVitals.map(vitalName => (
-              <LinkedVitalsCard
-                key={vitalName}
-                vitalName={vitalName}
-                tableData={tableData}
-                isLoading={isLoading}
-                {...props}
-              />
-            ))
-          )}
-        </VitalsContainer>
-      )}
+      {({isLoading, tableData}) => {
+        const result = tableData?.data?.[0];
+        return (
+          <VitalsContainer>
+            {vitals.map(vital => {
+              const target = vitalDetailRouteWithQuery({
+                orgSlug: organization.slug,
+                query: eventView.generateQueryStringObject(),
+                vitalName: vital,
+                projectID: decodeList(location.query.project),
+              });
+
+              const value = isLoading ? '\u2014' : getP75(result, vital);
+              const chart = (
+                <VitalBar isLoading={isLoading} vital={vital} result={result} />
+              );
+
+              return (
+                <Link
+                  key={vital}
+                  to={target}
+                  data-test-id={`vitals-linked-card-${vitalAbbreviations[vital]}`}
+                >
+                  <VitalCard
+                    title={vitalMap[vital] ?? ''}
+                    tooltip={vitalDescription[vital] ?? ''}
+                    value={isLoading ? '\u2014' : value}
+                    chart={chart}
+                  />
+                </Link>
+              );
+            })}
+          </VitalsContainer>
+        );
+      }}
     </VitalsCardsDiscoverQuery>
   );
 }
 
-export default withProjects(VitalsCards);
-
 const VitalsContainer = styled('div')`
   display: grid;
   grid-template-columns: 1fr;
@@ -118,18 +129,104 @@ const VitalsContainer = styled('div')`
   }
 `;
 
-type CardProps = Omit<Props, 'projects'> & {
-  vitalName: WebVital;
-  tableData: any;
-  isLoading?: boolean;
-  noBorder?: boolean;
-  hideBar?: boolean;
-  hideEmptyState?: boolean;
+type VitalBarProps = {
+  isLoading: boolean;
+  result: any;
+  vital: WebVital | WebVital[];
+  value?: string;
+  showBar?: boolean;
+  showStates?: boolean;
+  showDurationDetail?: boolean;
+  showVitalPercentNames?: boolean;
 };
 
-const NonPanel = styled('div')``;
+export function VitalBar(props: VitalBarProps) {
+  const {
+    isLoading,
+    result,
+    vital,
+    value,
+    showBar = true,
+    showStates = false,
+    showDurationDetail = false,
+    showVitalPercentNames = false,
+  } = props;
+
+  if (isLoading) {
+    return showStates ? <Placeholder height="48px" /> : null;
+  }
+
+  const emptyState = showStates ? (
+    <EmptyStateWarning small>{t('No data available')}</EmptyStateWarning>
+  ) : null;
 
-const VitalCard = styled(Card)`
+  if (!result) {
+    return emptyState;
+  }
+
+  const counts: Counts = {
+    poorCount: 0,
+    mehCount: 0,
+    goodCount: 0,
+    baseCount: 0,
+  };
+  const vitals = Array.isArray(vital) ? vital : [vital];
+  vitals.forEach(vitalName => {
+    const c = getCounts(result, vitalName);
+    Object.keys(counts).forEach(countKey => (counts[countKey] += c[countKey]));
+  });
+
+  if (!counts.baseCount) {
+    return emptyState;
+  }
+
+  const p75: React.ReactNode = Array.isArray(vital)
+    ? null
+    : value ?? getP75(result, vital);
+  const percents = getPercentsFromCounts(counts);
+  const colorStops = getColorStopsFromPercents(percents);
+
+  return (
+    <React.Fragment>
+      {showBar && <ColorBar colorStops={colorStops} />}
+      <BarDetail>
+        {showDurationDetail && p75 && (
+          <div>
+            {t('The p75 for all transactions is ')}
+            <strong>{p75}</strong>
+          </div>
+        )}
+        <VitalPercents
+          percents={percents}
+          showVitalPercentNames={showVitalPercentNames}
+        />
+      </BarDetail>
+    </React.Fragment>
+  );
+}
+
+type VitalCardProps = {
+  title: string;
+  tooltip: string;
+  value: string;
+  chart: React.ReactNode;
+};
+
+function VitalCard(props: VitalCardProps) {
+  const {chart, title, tooltip, value} = props;
+  return (
+    <StyledCard interactive>
+      <HeaderTitle>
+        <OverflowEllipsis>{t(title)}</OverflowEllipsis>
+        <QuestionTooltip size="sm" position="top" title={tooltip} />
+      </HeaderTitle>
+      <CardValue>{value}</CardValue>
+      {chart}
+    </StyledCard>
+  );
+}
+
+const StyledCard = styled(Card)`
   color: ${p => p.theme.textColor};
   padding: ${space(2)} ${space(3)};
   align-items: flex-start;
@@ -137,13 +234,13 @@ const VitalCard = styled(Card)`
   margin-bottom: ${space(2)};
 `;
 
-export function LinkedVitalsCard(props: CardProps) {
-  const {vitalName} = props;
-  return (
-    <VitalLink {...props} vitalName={vitalName}>
-      <VitalsCard {...props} />
-    </VitalLink>
-  );
+function getP75(result: any, vitalName: WebVital): string {
+  const p75 = result?.[getAggregateAlias(vitalsP75Fields[vitalName])] ?? null;
+  if (p75 === null) {
+    return '\u2014';
+  } else {
+    return vitalName === WebVital.CLS ? p75.toFixed(2) : `${p75.toFixed(0)}ms`;
+  }
 }
 
 type Counts = {
@@ -160,7 +257,7 @@ function getCounts(result: any, vitalName: WebVital): Counts {
   const mehTotal: number =
     parseFloat(result[getAggregateAlias(vitalsMehFields[vitalName])]) || 0;
   const mehCount = mehTotal - poorCount;
-  const baseCount: number = parseFloat(base) || Number.MIN_VALUE;
+  const baseCount: number = parseFloat(base) || 0;
 
   const goodCount: number = baseCount - mehCount - poorCount;
 
@@ -207,207 +304,6 @@ function getColorStopsFromPercents(percents: Percent[]) {
   }));
 }
 
-export function VitalsCard(props: CardProps) {
-  const {isLoading, tableData, vitalName, noBorder, hideBar, hideEmptyState} = props;
-
-  const measurement = vitalMap[vitalName];
-
-  if (isLoading || !tableData || !tableData.data || !tableData.data[0]) {
-    return (
-      <BlankCard
-        noBorder={noBorder}
-        measurement={measurement}
-        titleDescription={vitalName ? vitalDescription[vitalName] || '' : ''}
-        hideEmptyState={hideEmptyState}
-      />
-    );
-  }
-
-  const result = tableData.data[0];
-  const base = result[getAggregateAlias(vitalsBaseFields[vitalName])];
-
-  if (!base) {
-    return (
-      <BlankCard
-        noBorder={noBorder}
-        measurement={measurement}
-        titleDescription={vitalName ? vitalDescription[vitalName] || '' : ''}
-        hideEmptyState={hideEmptyState}
-      />
-    );
-  }
-
-  const percents = getPercentsFromCounts(getCounts(result, vitalName));
-  const p75: number =
-    parseFloat(result[getAggregateAlias(vitalsP75Fields[vitalName])]) || 0;
-  const value = vitalName === WebVital.CLS ? p75.toFixed(2) : p75.toFixed(0);
-
-  return (
-    <VitalsCardContent
-      percents={percents}
-      showVitalPercentNames={props.showVitalPercentNames}
-      showDurationDetail={props.showDurationDetail}
-      title={measurement}
-      titleDescription={vitalName ? vitalDescription[vitalName] || '' : ''}
-      value={`${value}${vitalName === WebVital.CLS ? '' : t('ms')}`}
-      noBorder={noBorder}
-      hideBar={hideBar}
-    />
-  );
-}
-
-type CondensedCardProps = Props & {
-  tableData: any;
-  isLoading?: boolean;
-  condensedVitals: WebVital[];
-};
-
-/**
- * To aggregate and visualize all vital counts in returned data.
- */
-function CondensedVitalsCard(props: CondensedCardProps) {
-  const {isLoading, tableData} = props;
-
-  if (isLoading || !tableData || !tableData.data || !tableData.data[0]) {
-    return <BlankCard noBorder />;
-  }
-
-  const result = tableData.data[0];
-
-  const vitals = props.condensedVitals;
-
-  const allCounts: Counts = {
-    poorCount: 0,
-    mehCount: 0,
-    goodCount: 0,
-    baseCount: 0,
-  };
-  vitals.forEach(vitalName => {
-    const counts = getCounts(result, vitalName);
-    Object.keys(counts).forEach(countKey => (allCounts[countKey] += counts[countKey]));
-  });
-
-  if (!allCounts.baseCount) {
-    return <BlankCard noBorder />;
-  }
-
-  const percents = getPercentsFromCounts(allCounts);
-
-  return (
-    <VitalsCardContent
-      noBorder
-      percents={percents}
-      showVitalPercentNames={props.showVitalPercentNames}
-      showDurationDetail={props.showDurationDetail}
-    />
-  );
-}
-
-type CardContentProps = {
-  percents: Percent[];
-  title?: string;
-  titleDescription?: string;
-  value?: string;
-  noBorder?: boolean;
-  showVitalPercentNames?: boolean;
-  showDurationDetail?: boolean;
-  hideBar?: boolean;
-};
-
-function VitalsCardContent(props: CardContentProps) {
-  const {
-    percents,
-    noBorder,
-    title,
-    titleDescription,
-    value,
-    showVitalPercentNames,
-    showDurationDetail,
-    hideBar,
-  } = props;
-  const Container = noBorder ? NonPanel : VitalCard;
-  const colorStops = getColorStopsFromPercents(percents);
-
-  return (
-    <Container interactive>
-      {noBorder || (
-        <HeaderTitle>
-          <OverflowEllipsis>{t(`${title}`)}</OverflowEllipsis>
-          <QuestionTooltip size="sm" position="top" title={titleDescription} />
-        </HeaderTitle>
-      )}
-      {noBorder || <CardValue>{value}</CardValue>}
-      {!hideBar && <ColorBar colorStops={colorStops} />}
-      <BarDetail>
-        {showDurationDetail && (
-          <div>
-            {t('The p75 for all transactions is ')}
-            <strong>{value}</strong>
-          </div>
-        )}
-        <VitalPercents
-          percents={percents}
-          showVitalPercentNames={showVitalPercentNames}
-        />
-      </BarDetail>
-    </Container>
-  );
-}
-
-type BlankCardProps = {
-  noBorder?: boolean;
-  measurement?: string;
-  titleDescription?: string;
-  hideEmptyState?: boolean;
-};
-
-const BlankCard = (props: BlankCardProps) => {
-  const Container = props.noBorder ? NonPanel : VitalCard;
-
-  if (props.hideEmptyState) {
-    return null;
-  }
-
-  return (
-    <Container interactive>
-      {props.noBorder || (
-        <HeaderTitle>
-          <OverflowEllipsis>{t(`${props.measurement}`)}</OverflowEllipsis>
-          <QuestionTooltip size="sm" position="top" title={props.titleDescription} />
-        </HeaderTitle>
-      )}
-      <CardValue>{'\u2014'}</CardValue>
-    </Container>
-  );
-};
-
-type VitalLinkProps = Omit<Props, 'projects'> & {
-  vitalName: WebVital;
-  children: React.ReactNode;
-};
-
-const VitalLink = (props: VitalLinkProps) => {
-  const {organization, eventView, vitalName, children, location} = props;
-
-  const view = eventView.clone();
-
-  const target = vitalDetailRouteWithQuery({
-    orgSlug: organization.slug,
-    query: view.generateQueryStringObject(),
-    vitalName,
-    projectID: decodeList(location.query.project),
-  });
-
-  return (
-    <Link
-      to={target}
-      data-test-id={`vitals-linked-card-${vitalAbbreviations[vitalName]}`}
-    >
-      {children}
-    </Link>
-  );
-};
-
 const BarDetail = styled('div')`
   font-size: ${p => p.theme.fontSizeMedium};
 
diff --git a/src/sentry/static/sentry/app/views/performance/transactionSummary/userStats.tsx b/src/sentry/static/sentry/app/views/performance/transactionSummary/userStats.tsx
index f7587a587151d7..369a533422235b 100644
--- a/src/sentry/static/sentry/app/views/performance/transactionSummary/userStats.tsx
+++ b/src/sentry/static/sentry/app/views/performance/transactionSummary/userStats.tsx
@@ -13,7 +13,7 @@ import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
 import {getFieldRenderer} from 'app/utils/discover/fieldRenderers';
-import {getAggregateAlias} from 'app/utils/discover/fields';
+import {getAggregateAlias, WebVital} from 'app/utils/discover/fields';
 import {decodeScalar} from 'app/utils/queryString';
 import {getTermHelp} from 'app/views/performance/data';
 import {
@@ -23,7 +23,7 @@ import {
 } from 'app/views/performance/transactionVitals/constants';
 import {vitalsRouteWithQuery} from 'app/views/performance/transactionVitals/utils';
 
-import VitalsCards from '../landing/vitalsCards';
+import VitalInfo from '../vitalDetail/vitalInfo';
 
 type Props = {
   eventView: EventView;
@@ -125,11 +125,13 @@ function UserStats({eventView, totals, location, organization, transactionName}:
                     <IconOpen />
                   </Link>
                 </VitalsHeading>
-                <VitalsCards
+                <VitalInfo
                   eventView={eventView}
                   organization={organization}
                   location={location}
-                  hasCondensedVitals
+                  vital={[WebVital.FCP, WebVital.LCP, WebVital.FID, WebVital.CLS]}
+                  hideVitalPercentNames
+                  hideDurationDetail
                 />
               </SidebarWrapper>
             );
diff --git a/src/sentry/static/sentry/app/views/performance/transactionVitals/vitalCard.tsx b/src/sentry/static/sentry/app/views/performance/transactionVitals/vitalCard.tsx
index 63acf3eaa26d65..f1fa200250fd46 100644
--- a/src/sentry/static/sentry/app/views/performance/transactionVitals/vitalCard.tsx
+++ b/src/sentry/static/sentry/app/views/performance/transactionVitals/vitalCard.tsx
@@ -303,11 +303,11 @@ class VitalCard extends React.Component<Props, State> {
                   eventView={eventView}
                   organization={organization}
                   location={location}
-                  vitalName={vital}
+                  vital={vital}
                   hideBar
+                  hideStates
                   hideVitalPercentNames
                   hideDurationDetail
-                  hideEmptyState
                 />
               </PercentContainer>
             </Feature>
diff --git a/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalDetailContent.tsx b/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalDetailContent.tsx
index 2ef68004df4224..75e98e185bb7a0 100644
--- a/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalDetailContent.tsx
+++ b/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalDetailContent.tsx
@@ -184,7 +184,7 @@ class VitalDetailContent extends React.Component<Props, State> {
                 eventView={eventView}
                 organization={organization}
                 location={location}
-                vitalName={vital}
+                vital={vital}
               />
             </StyledVitalInfo>
             <Table
diff --git a/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalInfo.tsx b/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalInfo.tsx
index 0dac04e712b07d..7544ab15cfc1cc 100644
--- a/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalInfo.tsx
+++ b/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalInfo.tsx
@@ -6,25 +6,27 @@ import EventView from 'app/utils/discover/eventView';
 import {WebVital} from 'app/utils/discover/fields';
 import VitalsCardDiscoverQuery from 'app/views/performance/vitalDetail/vitalsCardsDiscoverQuery';
 
-import {VitalsCard} from '../landing/vitalsCards';
+import {VitalBar} from '../landing/vitalsCards';
 
 type Props = {
   eventView: EventView;
   organization: Organization;
   location: Location;
-  vitalName: WebVital;
+  vital: WebVital | WebVital[];
   hideBar?: boolean;
-  hideEmptyState?: boolean;
+  hideStates?: boolean;
   hideVitalPercentNames?: boolean;
   hideDurationDetail?: boolean;
 };
 
 export default function vitalInfo(props: Props) {
   const {
-    vitalName,
+    vital,
     eventView,
     organization,
     location,
+    hideBar,
+    hideStates,
     hideVitalPercentNames,
     hideDurationDetail,
   } = props;
@@ -33,19 +35,18 @@ export default function vitalInfo(props: Props) {
       eventView={eventView}
       orgSlug={organization.slug}
       location={location}
-      onlyVital={vitalName}
+      vitals={Array.isArray(vital) ? vital : [vital]}
     >
       {({isLoading, tableData}) => (
-        <React.Fragment>
-          <VitalsCard
-            tableData={tableData}
-            isLoading={isLoading}
-            {...props}
-            noBorder
-            showVitalPercentNames={!hideVitalPercentNames}
-            showDurationDetail={!hideDurationDetail}
-          />
-        </React.Fragment>
+        <VitalBar
+          isLoading={isLoading}
+          result={tableData?.data?.[0]}
+          vital={vital}
+          showBar={!hideBar}
+          showStates={!hideStates}
+          showVitalPercentNames={!hideVitalPercentNames}
+          showDurationDetail={!hideDurationDetail}
+        />
       )}
     </VitalsCardDiscoverQuery>
   );
diff --git a/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalsCardsDiscoverQuery.tsx b/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalsCardsDiscoverQuery.tsx
index 2d638ab7c492d5..d773180a949d10 100644
--- a/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalsCardsDiscoverQuery.tsx
+++ b/src/sentry/static/sentry/app/views/performance/vitalDetail/vitalsCardsDiscoverQuery.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {MetaType} from 'app/utils/discover/eventView';
+import {WebVital} from 'app/utils/discover/fields';
 import GenericDiscoverQuery, {
   DiscoverQueryProps,
 } from 'app/utils/discover/genericDiscoverQuery';
@@ -23,25 +24,22 @@ export type TableData = {
 };
 
 type Props = DiscoverQueryProps & {
-  onlyVital?: string;
+  vitals: WebVital[];
 };
 
 function getRequestPayload(props: Props) {
-  const {eventView, onlyVital} = props;
+  const {eventView, vitals} = props;
   const apiPayload = eventView?.getEventsAPIPayload(props.location);
-  const vitalFields = onlyVital
-    ? [
-        vitalsPoorFields[onlyVital],
-        vitalsBaseFields[onlyVital],
-        vitalsMehFields[onlyVital],
-        vitalsP75Fields[onlyVital],
-      ]
-    : [
-        ...Object.values(vitalsPoorFields),
-        ...Object.values(vitalsMehFields),
-        ...Object.values(vitalsBaseFields),
-        ...Object.values(vitalsP75Fields),
-      ];
+  const vitalFields: string[] = vitals
+    .map(vital =>
+      [
+        vitalsPoorFields[vital],
+        vitalsBaseFields[vital],
+        vitalsMehFields[vital],
+        vitalsP75Fields[vital],
+      ].filter(Boolean)
+    )
+    .reduce((fields, fs) => fields.concat(fs), []);
   apiPayload.field = [...vitalFields];
   delete apiPayload.sort;
   return apiPayload;
@@ -49,7 +47,7 @@ function getRequestPayload(props: Props) {
 
 function VitalsCardDiscoverQuery(props: Props) {
   return (
-    <GenericDiscoverQuery<TableData, {}>
+    <GenericDiscoverQuery<TableData, Props>
       getRequestPayload={getRequestPayload}
       route="eventsv2"
       noPagination