diff --git a/web/src/components/DurationDropdown.tsx b/web/src/components/DurationDropdown.tsx
deleted file mode 100644
index 279deea..0000000
--- a/web/src/components/DurationDropdown.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { Form, FormGroup } from '@patternfly/react-core';
-import { useTranslation } from 'react-i18next';
-import { DurationString } from '@perses-dev/core';
-import { ControlledSimpleSelect } from './ControlledSelects';
-
-type DurationDropDownProps = {
-  duration: DurationString;
-  setDuration: (timeRange: DurationString) => void;
-};
-
-export const DEFAULT_DURATION = '30m';
-
-// Keep this list in sync with timeRangeSelectOptions below
-// (due to the translation we can't move TimeRangeSelectOption[] outside of the component)
-export const DurationValues = ['5m', '15m', '30m', '1h', '6h', '12h', '1d', '7d'];
-
-export const DurationDropdown = ({ duration, setDuration }: DurationDropDownProps) => {
-  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
-
-  // The time range selection mirrors the options on the Metrics Page
-  // Keep this list in sync with DurationValues above
-  const timeRangeSelectOptions = [
-    {
-      content: t('Last 5 minutes'),
-      value: '5m',
-    },
-    {
-      content: t('Last 15 minutes'),
-      value: '15m',
-    },
-    {
-      content: t('Last 30 minutes'),
-      value: '30m',
-    },
-    {
-      content: t('Last 1 hour'),
-      value: '1h',
-    },
-    {
-      content: t('Last 6 hours'),
-      value: '6h',
-    },
-    {
-      content: t('Last 12 hours'),
-      value: '12h',
-    },
-    {
-      content: t('Last 1 day'),
-      value: '1d',
-    },
-    {
-      content: t('Last 7 days'),
-      value: '7d',
-    },
-  ];
-
-  return (
-    <Form>
-      <FormGroup fieldId="duration-dropdown" label={t('Time range')}>
-        <ControlledSimpleSelect
-          id="duration-dropdown"
-          toggleWidth="12em"
-          placeholder={t('Select a time range')}
-          options={timeRangeSelectOptions}
-          value={duration}
-          setValue={(value) => setDuration(value as DurationString)}
-        />
-      </FormGroup>
-    </Form>
-  );
-};
diff --git a/web/src/components/PersesWrapper.tsx b/web/src/components/PersesWrapper.tsx
index 5a23cee..7c59b0e 100644
--- a/web/src/components/PersesWrapper.tsx
+++ b/web/src/components/PersesWrapper.tsx
@@ -15,15 +15,15 @@ import {
   PanelProps,
   PluginRegistry,
   RouterProvider,
-  TimeRangeProvider,
+  TimeRangeProviderWithQueryParams,
   useDataQueriesContext,
+  useInitialTimeRange,
 } from '@perses-dev/plugin-system';
 import {
   DatasourceResource,
   Definition,
   DurationString,
   GlobalDatasourceResource,
-  TimeRangeValue,
   TraceData,
   UnknownSpec,
 } from '@perses-dev/core';
@@ -137,23 +137,20 @@ export function PersesWrapper({ children }: PersesWrapperProps) {
 }
 
 interface PersesDashboardWrapperProps {
-  timeRange?: TimeRangeValue;
-  setTimeRange?: (value: TimeRangeValue) => void;
   children?: React.ReactNode;
 }
 
 /**
  * PersesDashboardWrapper initializes the dashboard time range and variable providers.
  */
-export function PersesDashboardWrapper({
-  timeRange = { pastDuration: '0s' },
-  setTimeRange,
-  children,
-}: PersesDashboardWrapperProps) {
+export function PersesDashboardWrapper({ children }: PersesDashboardWrapperProps) {
+  const DEFAULT_DASHBOARD_DURATION = '30m';
+  const initialTimeRange = useInitialTimeRange(DEFAULT_DASHBOARD_DURATION);
+
   return (
-    <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>
+    <TimeRangeProviderWithQueryParams initialTimeRange={initialTimeRange}>
       <VariableProvider>{children}</VariableProvider>
-    </TimeRangeProvider>
+    </TimeRangeProviderWithQueryParams>
   );
 }
 
diff --git a/web/src/components/TimeRangeSelect.css b/web/src/components/TimeRangeSelect.css
new file mode 100644
index 0000000..f1b09c4
--- /dev/null
+++ b/web/src/components/TimeRangeSelect.css
@@ -0,0 +1,4 @@
+.dt-plugin-time-range-select .MuiSelect-select {
+    /** override hardcoded padding https://github.com/perses/perses/blob/601768a329985efeaaf8c43c3ba1b8f7b26cb08c/ui/components/src/TimeRangeSelector/TimeRangeSelector.tsx#L130 */
+    padding: 2px 38px 2px 16px !important;
+}
diff --git a/web/src/components/TimeRangeSelect.tsx b/web/src/components/TimeRangeSelect.tsx
new file mode 100644
index 0000000..b024906
--- /dev/null
+++ b/web/src/components/TimeRangeSelect.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Form, FormGroup } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
+import './TimeRangeSelect.css';
+
+export const TimeRangeSelect = () => {
+  const { t } = useTranslation('plugin__distributed-tracing-console-plugin');
+
+  return (
+    <Form className="dt-plugin-time-range-select">
+      <FormGroup label={t('Time range')}>
+        <TimeRangeControls
+          showRefreshInterval={false}
+          showRefreshButton={false}
+          showZoomButtons={false}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/web/src/pages/TracesPage/QueryBrowser.tsx b/web/src/pages/TracesPage/QueryBrowser.tsx
index ff87d8e..3b63c72 100644
--- a/web/src/pages/TracesPage/QueryBrowser.tsx
+++ b/web/src/pages/TracesPage/QueryBrowser.tsx
@@ -1,11 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Divider, PageSection, Split, SplitItem, Stack, Title } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import {
-  DEFAULT_DURATION,
-  DurationDropdown,
-  DurationValues,
-} from '../../components/DurationDropdown';
+import { TimeRangeSelect } from '../../components/TimeRangeSelect';
 import { ScatterPlot } from './ScatterPlot';
 import { TraceTable } from './TraceTable';
 import {
@@ -13,41 +9,16 @@ import {
   PersesTempoDatasourceWrapper,
   PersesWrapper,
 } from '../../components/PersesWrapper';
-import { DurationString, RelativeTimeRange, TimeRangeValue } from '@perses-dev/core';
-import {
-  createEnumParam,
-  NumberParam,
-  StringParam,
-  useQueryParam,
-  withDefault,
-} from 'use-query-params';
+import { NumberParam, StringParam, useQueryParam, withDefault } from 'use-query-params';
 import { useTempoInstance } from '../../hooks/useTempoInstance';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { FilterToolbar } from './Toolbar/FilterToolbar';
 import { DEFAULT_LIMIT, LimitSelect } from './LimitSelect';
 
-const durationQueryParam = withDefault(createEnumParam(DurationValues), DEFAULT_DURATION);
-
 export function QueryBrowser() {
-  const [duration, setDuration] = useQueryParam('duration', durationQueryParam, {
-    updateType: 'replaceIn',
-  });
-  const timeRange = useMemo(() => {
-    return { pastDuration: duration as DurationString };
-  }, [duration]);
-  const setTimeRange = useCallback(
-    (value: TimeRangeValue) => {
-      const pastDuration = (value as RelativeTimeRange).pastDuration;
-      if (pastDuration) {
-        setDuration(pastDuration);
-      }
-    },
-    [setDuration],
-  );
-
   return (
     <PersesWrapper>
-      <PersesDashboardWrapper timeRange={timeRange} setTimeRange={setTimeRange}>
+      <PersesDashboardWrapper>
         <QueryBrowserBody />
       </PersesDashboardWrapper>
     </PersesWrapper>
@@ -59,7 +30,7 @@ export function QueryBrowserBody() {
   const [tempo, setTempo] = useTempoInstance();
   const [query, setQuery] = useQueryParam('q', withDefault(StringParam, '{}'));
   const [limit, setLimit] = useQueryParam('limit', withDefault(NumberParam, DEFAULT_LIMIT));
-  const { timeRange, setTimeRange, refresh } = useTimeRange();
+  const { refresh } = useTimeRange();
 
   // Refresh query if Tempo instance or tenant changes.
   // The Perses data source is selected via a mock DatasourceApiImpl implementation in <PersesWrapper>,
@@ -83,10 +54,7 @@ export function QueryBrowserBody() {
           <SplitItem isFilled>
             <Title headingLevel="h1">{t('Traces')}</Title>
           </SplitItem>
-          <DurationDropdown
-            duration={(timeRange as RelativeTimeRange).pastDuration}
-            setDuration={(value) => setTimeRange({ pastDuration: value })}
-          />
+          <TimeRangeSelect />
           <LimitSelect limit={limit} setLimit={setLimit} />
         </Split>
         <Divider className="pf-v6-u-mt-md" />