diff --git a/static/app/views/dashboards/widgets/widget/widget.tsx b/static/app/views/dashboards/widgets/widget/widget.tsx
index 6de7cfb57dc78d..ae04ea6d5d063a 100644
--- a/static/app/views/dashboards/widgets/widget/widget.tsx
+++ b/static/app/views/dashboards/widgets/widget/widget.tsx
@@ -129,7 +129,7 @@ const TitleHoverItems = styled('div')`
   transition: opacity 0.1s;
 `;
 
-const Frame = styled('div')<{
+export const Frame = styled('div')<{
   borderless?: boolean;
   height?: number;
   revealActions?: 'always' | 'hover';
diff --git a/static/app/views/insights/common/components/miniChartPanel.tsx b/static/app/views/insights/common/components/miniChartPanel.tsx
index ace145a68bea98..5d9afb0200adf9 100644
--- a/static/app/views/insights/common/components/miniChartPanel.tsx
+++ b/static/app/views/insights/common/components/miniChartPanel.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
-import Panel from 'sentry/components/panels/panel';
 import {space} from 'sentry/styles/space';
 import textStyles from 'sentry/styles/text';
+import {Frame} from 'sentry/views/dashboards/widgets/widget/widget';
 
 type Props = {
   children: React.ReactNode;
@@ -13,7 +13,7 @@ type Props = {
 
 export default function MiniChartPanel({title, children, button, subtitle}: Props) {
   return (
-    <Panel>
+    <StyledFrame>
       <PanelBody>
         {(title || button || subtitle) && (
           <HeaderContainer>
@@ -26,10 +26,14 @@ export default function MiniChartPanel({title, children, button, subtitle}: Prop
         )}
         {children}
       </PanelBody>
-    </Panel>
+    </StyledFrame>
   );
 }
 
+const StyledFrame = styled(Frame)`
+  height: 100%;
+`;
+
 const ChartLabel = styled('p')`
   /* @TODO(jonasbadalic) This should be a title component and not a p */
   font-size: 1rem;
diff --git a/static/app/views/insights/mobile/appStarts/components/widgets.tsx b/static/app/views/insights/mobile/appStarts/components/widgets.tsx
index 674663c17f95c7..9d4678fe9e03a0 100644
--- a/static/app/views/insights/mobile/appStarts/components/widgets.tsx
+++ b/static/app/views/insights/mobile/appStarts/components/widgets.tsx
@@ -14,7 +14,7 @@ function SummaryWidgets({additionalFilters}: any) {
       <div style={{gridArea: '1 / 2'}}>
         <DeviceClassBreakdownBarChart
           additionalFilters={additionalFilters}
-          chartHeight={140}
+          chartHeight={150}
         />
       </div>
     </WidgetLayout>
diff --git a/static/app/views/insights/mobile/screenload/components/charts/screenCharts.tsx b/static/app/views/insights/mobile/screenload/components/charts/screenCharts.tsx
index 73ae3ccf2e4b5c..fd3deee3f33644 100644
--- a/static/app/views/insights/mobile/screenload/components/charts/screenCharts.tsx
+++ b/static/app/views/insights/mobile/screenload/components/charts/screenCharts.tsx
@@ -9,12 +9,14 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Series} from 'sentry/types/echarts';
 import {defined} from 'sentry/utils';
-import {tooltipFormatterUsingAggregateOutputType} from 'sentry/utils/discover/charts';
+import {type EventsMetaType} from 'sentry/utils/discover/eventView';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
-import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
-import MiniChartPanel from 'sentry/views/insights/common/components/miniChartPanel';
+// TODO(release-drawer): Only used in mobile/screenload/components/
+// eslint-disable-next-line no-restricted-imports
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import {useMetrics} from 'sentry/views/insights/common/queries/useDiscover';
+import {type DiscoverSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {useReleaseSelection} from 'sentry/views/insights/common/queries/useReleases';
 import {useTopNMetricsMultiSeries} from 'sentry/views/insights/common/queries/useTopNDiscoverMultiSeries';
 import {formatVersionAndCenterTruncate} from 'sentry/views/insights/common/utils/centerTruncate';
@@ -24,7 +26,6 @@ import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries
 import {ScreensBarChart} from 'sentry/views/insights/mobile/screenload/components/charts/screenBarChart';
 import {
   CHART_TITLES,
-  OUTPUT_TYPE,
   YAXIS_COLUMNS,
 } from 'sentry/views/insights/mobile/screenload/constants';
 import {transformDeviceClassEvents} from 'sentry/views/insights/mobile/screenload/utils';
@@ -88,6 +89,8 @@ export function ScreenCharts({additionalFilters}: Props) {
     useEap,
   ]);
 
+  const search = new MutableSearch(queryString);
+
   const {
     data: releaseSeriesArray,
     isPending: isSeriesLoading,
@@ -101,7 +104,7 @@ export function ScreenCharts({additionalFilters}: Props) {
         'avg(measurements.time_to_full_display)',
         'count()',
       ],
-      search: queryString,
+      search,
     },
     'api.starfish.mobile-screen-series'
   );
@@ -118,9 +121,22 @@ export function ScreenCharts({additionalFilters}: Props) {
     transformedReleaseSeries[YAXIS_COLUMNS[val]] = {};
   });
 
-  const ttidSeries: Series[] = [];
-  const ttfdSeries: Series[] = [];
-  const countSeries: Series[] = [];
+  const seriesMap: Record<
+    | 'avg(measurements.time_to_initial_display)'
+    | 'avg(measurements.time_to_full_display)'
+    | 'count()',
+    DiscoverSeries[]
+  > = {
+    'avg(measurements.time_to_initial_display)': [],
+    'avg(measurements.time_to_full_display)': [],
+    'count()': [],
+  };
+
+  let chartAliases = {};
+  const meta: EventsMetaType = {
+    fields: {},
+    units: {},
+  };
 
   if (defined(releaseSeriesArray)) {
     releaseSeriesArray.forEach(release => {
@@ -128,20 +144,36 @@ export function ScreenCharts({additionalFilters}: Props) {
       const isPrimary = releaseName === primaryRelease;
       const colors = theme.chart.getColorPalette(3);
       const color = isPrimary ? colors[0] : colors[1];
-      ttidSeries.push({
-        ...release.data['avg(measurements.time_to_initial_display)'],
-        color,
-        seriesName: formatVersion(releaseName, true),
-      });
-      ttfdSeries.push({
-        ...release.data['avg(measurements.time_to_full_display)'],
-        color,
-        seriesName: formatVersion(releaseName, true),
-      });
-      countSeries.push({
-        ...release.data['count()'],
-        color,
-        seriesName: formatVersion(releaseName, true),
+      const version = formatVersion(releaseName, true);
+
+      const seriesNames = [
+        'avg(measurements.time_to_initial_display)',
+        'avg(measurements.time_to_full_display)',
+        'count()',
+      ] as const;
+
+      seriesNames.forEach(seriesName => {
+        const releaseSeries = release.data[seriesName];
+        const newSeriesName = `${seriesName} ${version}`;
+        chartAliases = {
+          ...chartAliases,
+          [newSeriesName]: version,
+        };
+
+        if (releaseSeries.meta?.fields[seriesName]) {
+          meta.fields[newSeriesName] = releaseSeries.meta?.fields[seriesName];
+        }
+
+        if (releaseSeries.meta?.units[seriesName]) {
+          meta.units[newSeriesName] = releaseSeries.meta?.units[seriesName];
+        }
+
+        seriesMap[seriesName].push({
+          data: releaseSeries.data,
+          meta,
+          color,
+          seriesName: newSeriesName,
+        });
       });
     });
   }
@@ -181,146 +213,15 @@ export function ScreenCharts({additionalFilters}: Props) {
   function renderCharts() {
     return (
       <Fragment>
-        <Container>
-          <div>
-            <StyledRow>
-              <ChartsContainerItem key="deviceClass">
-                <ScreensBarChart
-                  chartOptions={[
-                    {
-                      title: t('TTID by Device Class'),
-                      yAxis: YAXIS_COLUMNS[yAxes[0]!],
-                      series: Object.values(transformedEvents[YAXIS_COLUMNS[yAxes[0]!]]!),
-                      xAxisLabel: ['high', 'medium', 'low', 'Unknown'],
-                      subtitle: primaryRelease
-                        ? t(
-                            '%s v. %s',
-                            formatVersionAndCenterTruncate(primaryRelease, 12),
-                            secondaryRelease
-                              ? formatVersionAndCenterTruncate(secondaryRelease, 12)
-                              : ''
-                          )
-                        : '',
-                    },
-                  ]}
-                  chartKey="spansChart"
-                  chartHeight={80}
-                  isLoading={isDeviceClassEventsLoading}
-                />
-              </ChartsContainerItem>
-              <ChartsContainerItem key="xyz">
-                <MiniChartPanel
-                  title={t('Average TTID')}
-                  subtitle={
-                    primaryRelease
-                      ? t(
-                          '%s v. %s',
-                          formatVersionAndCenterTruncate(primaryRelease, 12),
-                          secondaryRelease
-                            ? formatVersionAndCenterTruncate(secondaryRelease, 12)
-                            : ''
-                        )
-                      : ''
-                  }
-                >
-                  <Chart
-                    height={80}
-                    data={ttidSeries}
-                    loading={isSeriesLoading}
-                    grid={{
-                      left: '0',
-                      right: '0',
-                      top: '8px',
-                      bottom: '0',
-                    }}
-                    showLegend
-                    definedAxisTicks={2}
-                    type={ChartType.LINE}
-                    aggregateOutputFormat={OUTPUT_TYPE[YAxis.TTID]}
-                    tooltipFormatterOptions={{
-                      valueFormatter: value =>
-                        tooltipFormatterUsingAggregateOutputType(
-                          value,
-                          OUTPUT_TYPE[YAxis.TTID]
-                        ),
-                    }}
-                    error={seriesError}
-                  />
-                </MiniChartPanel>
-              </ChartsContainerItem>
-            </StyledRow>
-            <StyledRow>
-              <ChartsContainerItem key="deviceClass">
-                <ScreensBarChart
-                  chartOptions={[
-                    {
-                      title: t('TTFD by Device Class'),
-                      yAxis: YAXIS_COLUMNS[yAxes[1]!],
-                      series: Object.values(transformedEvents[YAXIS_COLUMNS[yAxes[1]!]]!),
-                      xAxisLabel: ['high', 'medium', 'low', 'Unknown'],
-                      subtitle: primaryRelease
-                        ? t(
-                            '%s v. %s',
-                            formatVersionAndCenterTruncate(primaryRelease, 12),
-                            secondaryRelease
-                              ? formatVersionAndCenterTruncate(secondaryRelease, 12)
-                              : ''
-                          )
-                        : '',
-                    },
-                  ]}
-                  chartKey="spansChart"
-                  chartHeight={80}
-                  isLoading={isDeviceClassEventsLoading}
-                />
-              </ChartsContainerItem>
-              <ChartsContainerItem key="xyz">
-                <MiniChartPanel
-                  title={t('Average TTFD')}
-                  subtitle={
-                    primaryRelease
-                      ? t(
-                          '%s v. %s',
-                          formatVersionAndCenterTruncate(primaryRelease, 12),
-                          secondaryRelease
-                            ? formatVersionAndCenterTruncate(secondaryRelease, 12)
-                            : ''
-                        )
-                      : ''
-                  }
-                >
-                  <Chart
-                    height={80}
-                    data={ttfdSeries}
-                    loading={isSeriesLoading}
-                    grid={{
-                      left: '0',
-                      right: '0',
-                      top: '8px',
-                      bottom: '0',
-                    }}
-                    showLegend
-                    definedAxisTicks={2}
-                    type={ChartType.LINE}
-                    aggregateOutputFormat={OUTPUT_TYPE[YAxis.TTFD]}
-                    tooltipFormatterOptions={{
-                      valueFormatter: value =>
-                        tooltipFormatterUsingAggregateOutputType(
-                          value,
-                          OUTPUT_TYPE[YAxis.TTFD]
-                        ),
-                    }}
-                    error={seriesError}
-                  />
-                </MiniChartPanel>
-              </ChartsContainerItem>
-            </StyledRow>
-          </div>
-          <ChartsContainerItem key="xyz">
-            <MiniChartPanel
-              title={CHART_TITLES[YAxis.COUNT]}
-              subtitle={
-                primaryRelease
+        <ChartContainer>
+          <ScreensBarChart
+            chartOptions={[
+              {
+                title: t('TTID by Device Class'),
+                yAxis: YAXIS_COLUMNS[yAxes[0]!],
+                series: Object.values(transformedEvents[YAXIS_COLUMNS[yAxes[0]!]]!),
+                xAxisLabel: ['high', 'medium', 'low', 'Unknown'],
+                subtitle: primaryRelease
                   ? t(
                       '%s v. %s',
                       formatVersionAndCenterTruncate(primaryRelease, 12),
@@ -328,35 +229,69 @@ export function ScreenCharts({additionalFilters}: Props) {
                         ? formatVersionAndCenterTruncate(secondaryRelease, 12)
                         : ''
                     )
-                  : ''
-              }
-            >
-              <Chart
-                data={countSeries}
-                height={245}
-                loading={isSeriesLoading}
-                grid={{
-                  left: '0',
-                  right: '0',
-                  top: '8px',
-                  bottom: '0',
-                }}
-                showLegend
-                definedAxisTicks={2}
-                type={ChartType.LINE}
-                aggregateOutputFormat={OUTPUT_TYPE[YAxis.COUNT]}
-                tooltipFormatterOptions={{
-                  valueFormatter: value =>
-                    tooltipFormatterUsingAggregateOutputType(
-                      value,
-                      OUTPUT_TYPE[YAxis.COUNT]
-                    ),
-                }}
-                error={seriesError}
-              />
-            </MiniChartPanel>
-          </ChartsContainerItem>
-        </Container>
+                  : '',
+              },
+            ]}
+            chartKey="spansChart"
+            chartHeight={150}
+            isLoading={isDeviceClassEventsLoading}
+          />
+          <InsightsLineChartWidget
+            search={search}
+            title={t('Average TTID')}
+            series={seriesMap['avg(measurements.time_to_initial_display)']}
+            isLoading={isSeriesLoading}
+            error={seriesError}
+            aliases={chartAliases}
+            showReleaseAs="none"
+            showLegend="always"
+            height={'100%'}
+          />
+          <InsightsLineChartWidget
+            search={search}
+            title={CHART_TITLES[YAxis.COUNT]}
+            series={seriesMap['count()']}
+            isLoading={isSeriesLoading}
+            error={seriesError}
+            aliases={chartAliases}
+            showReleaseAs="none"
+            showLegend="always"
+            height={'100%'}
+          />
+          <ScreensBarChart
+            chartOptions={[
+              {
+                title: t('TTFD by Device Class'),
+                yAxis: YAXIS_COLUMNS[yAxes[1]!],
+                series: Object.values(transformedEvents[YAXIS_COLUMNS[yAxes[1]!]]!),
+                xAxisLabel: ['high', 'medium', 'low', 'Unknown'],
+                subtitle: primaryRelease
+                  ? t(
+                      '%s v. %s',
+                      formatVersionAndCenterTruncate(primaryRelease, 12),
+                      secondaryRelease
+                        ? formatVersionAndCenterTruncate(secondaryRelease, 12)
+                        : ''
+                    )
+                  : '',
+              },
+            ]}
+            chartKey="spansChart"
+            chartHeight={150}
+            isLoading={isDeviceClassEventsLoading}
+          />
+          <InsightsLineChartWidget
+            search={search}
+            title={t('Average TTFD')}
+            series={seriesMap['avg(measurements.time_to_full_display)']}
+            isLoading={isSeriesLoading}
+            error={seriesError}
+            aliases={chartAliases}
+            showReleaseAs="none"
+            showLegend="always"
+            height={'100%'}
+          />
+        </ChartContainer>
       </Fragment>
     );
   }
@@ -364,18 +299,9 @@ export function ScreenCharts({additionalFilters}: Props) {
   return <div data-test-id="starfish-mobile-view">{renderCharts()}</div>;
 }
 
-const StyledRow = styled('div')`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: ${space(2)};
-`;
-
-const ChartsContainerItem = styled('div')`
-  flex: 1;
-`;
-
-const Container = styled('div')`
+const ChartContainer = styled('div')`
   display: grid;
-  grid-template-columns: 2fr 1fr;
-  grid-column-gap: ${space(2)};
+  grid-template-columns: repeat(3, 1fr);
+  gap: ${space(2)};
+  padding-bottom: ${space(2)};
 `;
diff --git a/static/app/views/insights/mobile/screenload/constants.ts b/static/app/views/insights/mobile/screenload/constants.ts
index 9e527f111a367b..61b34e8d381cfd 100644
--- a/static/app/views/insights/mobile/screenload/constants.ts
+++ b/static/app/views/insights/mobile/screenload/constants.ts
@@ -1,5 +1,4 @@
 import {t} from 'sentry/locale';
-import type {AggregationOutputType} from 'sentry/utils/discover/fields';
 import type {MetricsProperty, SpanMetricsProperty} from 'sentry/views/insights/types';
 
 export enum MobileCursors {
@@ -59,17 +58,3 @@ export const CHART_TITLES: Readonly<Record<YAxis, string>> = {
   [YAxis.FROZEN_FRAMES]: t('Frozen Frames'),
   [YAxis.FRAMES_DELAY]: t('Frames Delay'),
 };
-
-export const OUTPUT_TYPE: Readonly<Record<YAxis, AggregationOutputType>> = {
-  [YAxis.WARM_START]: 'duration',
-  [YAxis.COLD_START]: 'duration',
-  [YAxis.TTID]: 'duration',
-  [YAxis.TTFD]: 'duration',
-  [YAxis.SLOW_FRAME_RATE]: 'percentage',
-  [YAxis.FROZEN_FRAME_RATE]: 'percentage',
-  [YAxis.THROUGHPUT]: 'number',
-  [YAxis.COUNT]: 'number',
-  [YAxis.SLOW_FRAMES]: 'number',
-  [YAxis.FROZEN_FRAMES]: 'number',
-  [YAxis.FRAMES_DELAY]: 'duration',
-};