diff --git a/web/src/components/DateRangeSelector.tsx b/web/src/components/DateRangeSelector.tsx
index b3030dbcd..2098fd1ed 100644
--- a/web/src/components/DateRangeSelector.tsx
+++ b/web/src/components/DateRangeSelector.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, IconButton, InputAdornment, TextField } from '@mui/material'
+import { Button, Dialog, Icon, InputAdornment, TextField } from '@mui/material'
 import * as materialIcons from '@mui/icons-material'
 import DateRangePickerWrapper from 'components/dateRangePicker/DateRangePickerWrapper'
 import { DateRange } from 'components/dateRangePicker/types'
@@ -50,9 +50,9 @@ const DateRangeSelector = ({ dateRange, dateDisplayFormat, size, label, setDateR
           InputProps={{
             startAdornment: (
               <InputAdornment position="start">
-                <IconButton edge="end" size="large">
+                <Icon>
                   <materialIcons.DateRange />
-                </IconButton>
+                </Icon>
               </InputAdornment>
             )
           }}
diff --git a/web/src/features/moreCast2/components/ColumnDefBuilder.tsx b/web/src/features/moreCast2/components/ColumnDefBuilder.tsx
index fae87fed3..de1824a07 100644
--- a/web/src/features/moreCast2/components/ColumnDefBuilder.tsx
+++ b/web/src/features/moreCast2/components/ColumnDefBuilder.tsx
@@ -14,7 +14,6 @@ export const DEFAULT_FORECAST_COLUMN_WIDTH = 120
 
 // Defines the order in which weather models display in the datagrid.
 export const ORDERED_COLUMN_HEADERS: WeatherDeterminateType[] = [
-  WeatherDeterminate.ACTUAL,
   WeatherDeterminate.HRDPS,
   WeatherDeterminate.HRDPS_BIAS,
   WeatherDeterminate.RDPS,
@@ -120,8 +119,8 @@ export class ColumnDefBuilder implements ColDefGenerator, ForecastColDefGenerato
       valueFormatter: (params: Pick<GridValueFormatterParams, 'value'>) => {
         return this.valueFormatterWith(params, precision)
       },
-      valueGetter: (params: Pick<GridValueGetterParams, 'value'>) =>
-        this.gridComponentRenderer.predictionItemValueGetter(params, precision),
+      valueGetter: (params: Pick<GridValueGetterParams, 'row' | 'value'>) =>
+        this.gridComponentRenderer.valueGetter(params, precision, field),
       valueSetter: (params: Pick<GridValueSetterParams, 'row' | 'value'>) =>
         this.valueSetterWith(params, field, precision)
     }
@@ -131,8 +130,8 @@ export class ColumnDefBuilder implements ColDefGenerator, ForecastColDefGenerato
     this.gridComponentRenderer.predictionItemValueFormatter(params, precision)
   public valueGetterWith = (params: Pick<GridValueGetterParams, 'value'>, precision: number) =>
     this.gridComponentRenderer.cellValueGetter(params, precision)
-  public predictionitemValueGetterWith = (params: Pick<GridValueGetterParams, 'value'>, precision: number) =>
-    this.gridComponentRenderer.predictionItemValueGetter(params, precision)
+  public valueGetter = (params: Pick<GridValueGetterParams, 'row' | 'value'>, field: string, precision: number) =>
+    this.gridComponentRenderer.valueGetter(params, precision, field)
   public valueSetterWith = (params: Pick<GridValueSetterParams, 'row' | 'value'>, field: string, precision: number) =>
     this.gridComponentRenderer.predictionItemValueSetter(params, field, precision)
 }
diff --git a/web/src/features/moreCast2/components/ForecastDataGrid.tsx b/web/src/features/moreCast2/components/ForecastDataGrid.tsx
index 036dd1cea..636455d0f 100644
--- a/web/src/features/moreCast2/components/ForecastDataGrid.tsx
+++ b/web/src/features/moreCast2/components/ForecastDataGrid.tsx
@@ -71,8 +71,8 @@ const ForecastDataGrid = ({
         onColumnVisibilityModelChange={newModel => setColumnVisibilityModel(newModel)}
         columnGroupingModel={columnGroupingModel}
         experimentalFeatures={{ columnGrouping: true }}
-        components={{
-          LoadingOverlay: LinearProgress
+        slots={{
+          loadingOverlay: LinearProgress
         }}
         onColumnHeaderClick={handleColumnHeaderClick}
         onCellDoubleClick={onCellDoubleClickHandler}
diff --git a/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx b/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx
index 7587d501c..3e135b6b4 100644
--- a/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx
+++ b/web/src/features/moreCast2/components/ForecastSummaryDataGrid.tsx
@@ -45,8 +45,8 @@ const ForecastSummaryDataGrid = ({
   return (
     <Root className={classes.root} data-testid={`morecast2-data-grid`}>
       <DataGrid
-        components={{
-          LoadingOverlay: LinearProgress
+        slots={{
+          loadingOverlay: LinearProgress
         }}
         initialState={{
           sorting: {
diff --git a/web/src/features/moreCast2/components/GridComponentRenderer.tsx b/web/src/features/moreCast2/components/GridComponentRenderer.tsx
index 592244a4c..4fa1fe444 100644
--- a/web/src/features/moreCast2/components/GridComponentRenderer.tsx
+++ b/web/src/features/moreCast2/components/GridComponentRenderer.tsx
@@ -8,7 +8,7 @@ import {
   GridValueSetterParams
 } from '@mui/x-data-grid'
 import { ModelChoice } from 'api/moreCast2API'
-import { createWeatherModelLabel } from 'features/moreCast2/util'
+import { createLabel } from 'features/moreCast2/util'
 
 const NOT_AVAILABLE = 'N/A'
 
@@ -34,19 +34,44 @@ export class GridComponentRenderer {
     <TextField disabled={true} size="small" value={params.formattedValue}></TextField>
   )
 
-  public renderForecastCellWith = (params: Pick<GridRenderCellParams, 'row' | 'formattedValue'>, field: string) => {
-    // The value of field will be precipForecast, rhForecast, tempForecast, etc.
-    // We need the prefix to help us grab the correct 'actual' field (eg. tempACTUAL, precipACTUAL, etc.)
+  public getActualField = (field: string) => {
     const index = field.indexOf('Forecast')
     const prefix = field.slice(0, index)
     const actualField = `${prefix}Actual`
+    return actualField
+  }
+
+  public valueGetter = (
+    params: Pick<GridValueGetterParams, 'row' | 'value'>,
+    precision: number,
+    field: string
+  ): string => {
+    const actualField = this.getActualField(field)
+    const actual = params.row[actualField]
+
+    if (!isNaN(actual)) {
+      return Number(actual).toFixed(precision)
+    }
+
+    const value = params?.value?.value
+
+    if (isNaN(value)) {
+      return 'NaN'
+    }
+    return Number(value).toFixed(precision)
+  }
 
-    const disabled = !isNaN(params.row[actualField])
+  public renderForecastCellWith = (params: Pick<GridRenderCellParams, 'row' | 'formattedValue'>, field: string) => {
+    // The value of field will be precipForecast, rhForecast, tempForecast, etc.
+    // We need the prefix to help us grab the correct 'actual' field (eg. tempACTUAL, precipACTUAL, etc.)
+    const actualField = this.getActualField(field)
+
+    const isActual = !isNaN(params.row[actualField])
     return (
       <TextField
-        disabled={disabled}
+        disabled={isActual}
         size="small"
-        label={createWeatherModelLabel(params.row[field].choice)}
+        label={createLabel(isActual, params.row[field].choice)}
         value={params.formattedValue}
       ></TextField>
     )
@@ -81,12 +106,4 @@ export class GridComponentRenderer {
   public cellValueGetter = (params: Pick<GridValueGetterParams, 'value'>, precision: number) => {
     return isNaN(params?.value) ? 'NaN' : params.value.toFixed(precision)
   }
-
-  public predictionItemValueGetter = (params: Pick<GridValueGetterParams, 'value'>, precision: number) => {
-    const value = params?.value?.value
-    if (isNaN(value)) {
-      return 'NaN'
-    }
-    return Number(value).toFixed(precision)
-  }
 }
diff --git a/web/src/features/moreCast2/components/colDefBuilder.test.tsx b/web/src/features/moreCast2/components/colDefBuilder.test.tsx
index 652a43a17..53b329e3e 100644
--- a/web/src/features/moreCast2/components/colDefBuilder.test.tsx
+++ b/web/src/features/moreCast2/components/colDefBuilder.test.tsx
@@ -155,7 +155,12 @@ describe('ColDefBuilder', () => {
         })
       ).toEqual(<TextField disabled={false} label={ModelChoice.GDPS} size="small" value={1} />)
       expect(forecastColDef.valueFormatter({ value: 1.11 })).toEqual('1.1')
-      expect(forecastColDef.valueGetter({ value: { choice: ModelChoice.GDPS, value: 1.11 } })).toEqual('1.1')
+      expect(
+        forecastColDef.valueGetter({
+          row: { testField: { choice: ModelChoice.GDPS, value: 1 } },
+          value: { choice: ModelChoice.GDPS, value: 1.11 }
+        })
+      ).toEqual('1.1')
       expect(
         forecastColDef.valueSetter({ row: { testField: { choice: ModelChoice.GDPS, value: 1 } }, value: 2 })
       ).toEqual({ testField: { choice: ModelChoice.MANUAL, value: 2 } })
@@ -182,7 +187,14 @@ describe('ColDefBuilder', () => {
       expect(colDefBuilder.valueFormatterWith({ value: 1.11 }, 1)).toEqual('1.1')
       expect(colDefBuilder.valueGetterWith({ value: 1.11 }, 1)).toEqual('1.1')
       expect(
-        colDefBuilder.predictionitemValueGetterWith({ value: { choice: ModelChoice.GDPS, value: 1.11 } }, 1)
+        colDefBuilder.valueGetter(
+          {
+            row: { testField: { choice: ModelChoice.GDPS, value: 1.11 } },
+            value: { choice: ModelChoice.GDPS, value: 1.11 }
+          },
+          'testField',
+          1
+        )
       ).toEqual('1.1')
       expect(
         colDefBuilder.valueSetterWith(
diff --git a/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx b/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx
index 39b23bd1f..1a100d9b9 100644
--- a/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx
+++ b/web/src/features/moreCast2/components/gridComponentRenderer.test.tsx
@@ -97,10 +97,34 @@ describe('GridComponentRenderer', () => {
   })
 
   it('should return an existent prediction item value correctly', () => {
-    const itemValue = gridComponentRenderer.predictionItemValueGetter(
-      { value: { choice: ModelChoice.GDPS, value: 1.11 } },
-      1
+    const itemValue = gridComponentRenderer.valueGetter(
+      {
+        row: { testField: { choice: ModelChoice.GDPS, value: 1.11 } },
+        value: { choice: ModelChoice.GDPS, value: 1.11 }
+      },
+      1,
+      'testField'
     )
     expect(itemValue).toEqual('1.1')
   })
+
+  it('should return an actual field', () => {
+    const actualField = gridComponentRenderer.getActualField('testForecast')
+    expect(actualField).toEqual('testActual')
+  })
+
+  it('should return an actual over a prediction if it exists', () => {
+    const itemValue = gridComponentRenderer.valueGetter(
+      {
+        row: {
+          testForecast: { choice: ModelChoice.GDPS, value: 1.11 },
+          testActual: 2.22
+        },
+        value: { choice: ModelChoice.GDPS, value: 1.11 }
+      },
+      1,
+      'testForecast'
+    )
+    expect(itemValue).toEqual('2.2')
+  })
 })
diff --git a/web/src/features/moreCast2/util.ts b/web/src/features/moreCast2/util.ts
index 3a93d73f0..77e63882a 100644
--- a/web/src/features/moreCast2/util.ts
+++ b/web/src/features/moreCast2/util.ts
@@ -71,3 +71,11 @@ export const createWeatherModelLabel = (label: string) => {
 
   return label === ModelChoice.NULL ? '' : label
 }
+
+export const createLabel = (isActual: boolean, label: string) => {
+  if (isActual) {
+    return ModelChoice.ACTUAL
+  }
+
+  return createWeatherModelLabel(label)
+}