diff --git a/src/lib/chart/TimeBucketSelector.svelte b/src/lib/chart/TimeBucketSelector.svelte
deleted file mode 100644
index 962bac873..000000000
--- a/src/lib/chart/TimeBucketSelector.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-@component
-Used for selecting a time bucket for chart data feeds.default
-
-#### Usage:
-```tsx
-  <TimeBucketSelector active="4h" />
-```
--->
-<script lang="ts">
-	export let active: string;
-	const buckets = ['1m', '5m', '15m', '1h', '4h', '1d', '7d', '30d'];
-</script>
-
-<div>
-	{#each buckets as bucket}
-		<a href="#{bucket}" class:active={bucket === active}>
-			{bucket}
-		</a>
-	{/each}
-</div>
-
-<style lang="postcss">
-	div {
-		display: flex;
-		font: var(--f-ui-body-medium);
-	}
-
-	a {
-		flex: 1;
-		padding: var(--space-ss) min(var(--space-lg), 2vw);
-		border: 2px solid var(--c-border-2-v1);
-		font-weight: 500;
-		color: var(--c-text-3-v1);
-		text-align: center;
-
-		@media (--viewport-md-up) {
-		}
-
-		&:not(:first-child) {
-			border-left-width: 1px;
-		}
-
-		&:not(:last-child) {
-			border-right-width: 1px;
-		}
-
-		&:hover,
-		&.active {
-			background: var(--c-background-3-v1);
-			color: var(--c-text-6-v1);
-		}
-	}
-</style>
diff --git a/src/lib/chart/index.ts b/src/lib/chart/index.ts
index ba417b31b..5ca09651f 100644
--- a/src/lib/chart/index.ts
+++ b/src/lib/chart/index.ts
@@ -8,4 +8,3 @@ export { default as HudMetric } from './HudMetric.svelte';
 export { default as Marker } from './Marker.svelte';
 export { default as PairCandleChart } from './PairCandleChart.svelte';
 export { default as ReserveInterestChart } from './ReserveInterestChart.svelte';
-export { default as TimeBucketSelector } from './TimeBucketSelector.svelte';
diff --git a/src/lib/components/SegmentedControl.svelte b/src/lib/components/SegmentedControl.svelte
index c0585c21c..fbe61ec8d 100644
--- a/src/lib/components/SegmentedControl.svelte
+++ b/src/lib/components/SegmentedControl.svelte
@@ -17,7 +17,7 @@ button-like control with a segement for each possible value.
 	{#each options as option}
 		<label class:selected={option === selected}>
 			<span>{option}</span>
-			<input type="radio" bind:group={selected} value={option} />
+			<input type="radio" bind:group={selected} value={option} on:change />
 		</label>
 	{/each}
 </div>
diff --git a/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte b/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte
index 3d8101780..ebfba8301 100644
--- a/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte
+++ b/src/routes/trading-view/[chain]/[exchange]/[pair]/ChartSection.svelte
@@ -16,10 +16,11 @@ for the same hovered date. Also displays a time-bucket selector.
 -->
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import type { TimeBucket } from '$lib/chart';
 	import { type Candle, quoteFeed, candleToQuote } from '$lib/chart';
-	import { ChartLinker, HudRow, HudMetric, PairCandleChart, TimeBucketSelector } from '$lib/chart';
-	import { Alert } from '$lib/components';
+	import { ChartLinker, HudRow, HudMetric, PairCandleChart } from '$lib/chart';
+	import { Alert, SegmentedControl } from '$lib/components';
 
 	export let pairId: number | string;
 	export let pairSymbol: string;
@@ -39,7 +40,11 @@ for the same hovered date. Also displays a time-bucket selector.
 
 <div class="chart-header">
 	<h2>{pairSymbol} charts</h2>
-	<TimeBucketSelector active={timeBucket} />
+	<SegmentedControl
+		options={['1m', '5m', '15m', '1h', '4h', '1d', '7d', '30d']}
+		selected={timeBucket}
+		on:change={({ target }) => goto(`#${target.value}`, { replaceState: true, noScroll: true })}
+	/>
 </div>
 
 <div class="chart-wrapper">
@@ -127,13 +132,11 @@ for the same hovered date. Also displays a time-bucket selector.
 <style lang="postcss">
 	.chart-header {
 		display: flex;
-		gap: var(--space-md);
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-sm) var(--space-lg);
 		margin-bottom: 1em;
 
-		@media (--viewport-md-down) {
-			flex-direction: column;
-		}
-
 		h2 {
 			flex: 1;
 			font: var(--f-h2-medium);
diff --git a/src/routes/trading-view/[chain]/lending/[protocol]/[reserve]/+page.svelte b/src/routes/trading-view/[chain]/lending/[protocol]/[reserve]/+page.svelte
index 0162cdf41..a8f62cb08 100644
--- a/src/routes/trading-view/[chain]/lending/[protocol]/[reserve]/+page.svelte
+++ b/src/routes/trading-view/[chain]/lending/[protocol]/[reserve]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
 	import type { LendingReserve } from '$lib/explorer/lending-reserve-client';
 	import type { RateType } from '$lib/chart/ReserveInterestChart.svelte';
 	import { type TimeBucket, ReserveInterestChart } from '$lib/chart';
@@ -29,7 +31,7 @@
 	$: borrowable = isBorrowable(reserve);
 	$: showChart = borrowable && !isGhoToken;
 
-	let timeBucket: TimeBucket = '1d';
+	$: timeBucket = ($page.url.hash.slice(1) || '1d') as TimeBucket;
 
 	function getSecondaryRates({ additional_details: details }: LendingReserve) {
 		const rates: RateType[] = ['supply_apr'];
@@ -80,7 +82,11 @@
 	<Section padding="md">
 		<div class="chart-header">
 			<h3>Interest rates</h3>
-			<SegmentedControl options={['1h', '4h', '1d', '7d', '30d']} bind:selected={timeBucket} />
+			<SegmentedControl
+				options={['1h', '4h', '1d', '7d', '30d']}
+				selected={timeBucket}
+				on:change={({ target }) => goto(`#${target.value}`, { replaceState: true, noScroll: true })}
+			/>
 		</div>
 		<ReserveInterestChart
 			{reserve}