diff --git a/frontend/src/features/appbar/AppBarView.tsx b/frontend/src/features/appbar/AppBarView.tsx
index f3aab3d..4f89e4b 100644
--- a/frontend/src/features/appbar/AppBarView.tsx
+++ b/frontend/src/features/appbar/AppBarView.tsx
@@ -18,17 +18,17 @@ import { openOverrideView } from '../overrides/overrideSlice';
 export default function AppBarView(){
   const info = fetchinfo();
   const excludeNoise = useAppSelector((state) => state.selections.noiseCancellationIsOn);
-  const [start, end] = useAppSelector((state) => state.selections.dateTimeRange).map(x => new Date(x));
+  const {start, end} = useAppSelector((state) => state.selections.dateTimeRange);
   const dispatch = useAppDispatch();
   return <AppBar position='static'>
     <Toolbar>
       <Typography variant="h6" color="inherit" sx={{ flexGrow: 1 }}>{info.name}</Typography>
           <DateTimeRangePicker 
             onChange={(range) => {
-              const [s,e] = Array.isArray(range) && range[1] ? range : [Date.now() - 24*3600*1000, Date.now()];
-              dispatch(setDateTimeRange([s, e]));
+              const [s, e] = Array.isArray(range) && range[1] ? range : [Date.now() - 24*3600*1000, Date.now()];
+              dispatch(setDateTimeRange({start: s.getTime(), end: e.getTime()}));
             }}
-            value={[start, end]}
+            value={[new Date(start), new Date(end)]}
             disableClock={true}
           />
       <Tooltip title={excludeNoise?"Show Noise":"Hide Noise"}>
diff --git a/frontend/src/features/differences/DifferencesView.tsx b/frontend/src/features/differences/DifferencesView.tsx
index f1579d6..3836baf 100644
--- a/frontend/src/features/differences/DifferencesView.tsx
+++ b/frontend/src/features/differences/DifferencesView.tsx
@@ -11,7 +11,7 @@ export function DifferencesView(){
   const excludeNoise = useAppSelector((state) => state.selections.noiseCancellationIsOn);
   const selectedEndpoint = useAppSelector((state) => state.selections.endpointName) || 'unknown';
   const selectedFieldPrefix = useAppSelector((state) => state.selections.fieldPrefix) || 'unknown';
-  const [start, end] = useAppSelector((state) => state.selections.dateTimeRange);
+  const {start, end} = useAppSelector((state) => state.selections.dateTimeRange);
   const differenceResults = useFetchDifferencesQuery({excludeNoise, selectedEndpoint, selectedFieldPrefix, includeWeights:true, start, end}).data || {endpoint:'undefined', path:'undefined', requests:[]};
   if(!differenceResults.requests.length) {
     return <List subheader={<ListSubheader>Differences</ListSubheader>}>
diff --git a/frontend/src/features/endpoints/EndpointsView.tsx b/frontend/src/features/endpoints/EndpointsView.tsx
index e2d66da..ef8d982 100644
--- a/frontend/src/features/endpoints/EndpointsView.tsx
+++ b/frontend/src/features/endpoints/EndpointsView.tsx
@@ -9,7 +9,7 @@ export default function EndpointsView() {
   const dispatch = useAppDispatch();
   const excludeNoise = useAppSelector((state) => state.selections.noiseCancellationIsOn);
   const selectedEndpoint = useAppSelector((state) => state.selections.endpointName) || 'undefined';
-  const [start, end] = useAppSelector((state) => state.selections.dateTimeRange);
+  const {start, end} = useAppSelector((state) => state.selections.dateTimeRange);
   const noisyFields = useFetchNoiseQuery(selectedEndpoint).data || [];
   const endpoints: Map<string, EndpointMeta> = useFetchEndpointsQuery({excludeNoise, start, end}).data || new Map<string, EndpointMeta>();  
   const entries = Object.entries(endpoints);
diff --git a/frontend/src/features/fields/FieldsView.tsx b/frontend/src/features/fields/FieldsView.tsx
index 15a59e2..e308090 100644
--- a/frontend/src/features/fields/FieldsView.tsx
+++ b/frontend/src/features/fields/FieldsView.tsx
@@ -15,7 +15,7 @@ export function FieldsView(){
     const dispatch = useAppDispatch();
     const excludeNoise = useAppSelector((state) => state.selections.noiseCancellationIsOn);
     const selectedEndpoint = useAppSelector((state) => state.selections.endpointName) || 'unknown';
-    const [start, end] = useAppSelector((state) => state.selections.dateTimeRange);
+    const {start, end} = useAppSelector((state) => state.selections.dateTimeRange);
     const endpoint = useFetchFieldsQuery({selectedEndpoint, excludeNoise, includeWeights: true, start, end}).data || {fields: new Map<string, Metric>()};
     const noisyPrefixes = useFetchNoiseQuery(selectedEndpoint).data || [];
     const [updateNoise, { isLoading: isUpdating }] = usePostNoiseMutation();
diff --git a/frontend/src/features/selections/selectionsSlice.ts b/frontend/src/features/selections/selectionsSlice.ts
index d8724a8..d248d73 100644
--- a/frontend/src/features/selections/selectionsSlice.ts
+++ b/frontend/src/features/selections/selectionsSlice.ts
@@ -8,7 +8,7 @@ interface Selections {
     endpointName: string|undefined, // Selected endpoint from EnpointsView
     fieldPrefix: string|undefined, // Selected field prefix from FieldsView
     requestId: string|undefined, // Selected request id from DifferencesView
-    dateTimeRange: Range<number>,
+    dateTimeRange: {start: number, end: number},
 }
 const initialState: Selections = {
     noiseCancellationIsOn: false,
@@ -18,7 +18,7 @@ const initialState: Selections = {
     infoIsOpen: false,
     deleteRequestAlertIsOpen: false,
     requestIsOpen: false,
-    dateTimeRange: [Date.now() - 24*3600*1000, Date.now()]
+    dateTimeRange: {start: Date.now() - 24*3600*1000, end: Date.now()}
 };
 const slice = createSlice({
     name: 'selections',