diff --git a/view/src/lib/consts.ts b/view/src/lib/consts.ts
index 306b9f8..33206f8 100644
--- a/view/src/lib/consts.ts
+++ b/view/src/lib/consts.ts
@@ -1,2 +1,84 @@
 export const DAY = 24 * 60 * 60 * 1000;
 export const HOUR = 60 * 60 * 1000;
+
+type RelativeTimeRangeOption = {
+	key: string;
+	label: string;
+	type: 'relative';
+	duration: number;
+};
+
+type FixedTimeRangeOption = {
+	key: string;
+	label: string;
+	type: 'fixed';
+	startAt: string;
+	endAt: string;
+};
+
+export type TimeRangeOption = RelativeTimeRangeOption | FixedTimeRangeOption;
+
+export const DEFAULT_TIME_RANGE_KEY = '12h';
+
+export const TIME_RANGE_OPTIONS: TimeRangeOption[] = [
+	{ key: '3h', label: '3 hours', type: 'relative', duration: 3 * HOUR },
+	{ key: '6h', label: '6 hours', type: 'relative', duration: 6 * HOUR },
+	{ key: '12h', label: '12 hours', type: 'relative', duration: 12 * HOUR },
+	{ key: '1d', label: '1 day', type: 'relative', duration: 1 * DAY },
+	{ key: '3d', label: '3 days', type: 'relative', duration: 3 * DAY },
+	{ key: '6d', label: '6 days', type: 'relative', duration: 6 * DAY },
+	{
+		key: 'kf75',
+		label: 'kf75',
+		type: 'fixed',
+		startAt: '2024-11-22T00:00:00+09:00',
+		endAt: '2024-11-25T00:00:00+09:00'
+	},
+	{
+		key: 'kf76',
+		label: 'kf76',
+		type: 'fixed',
+		startAt: '2025-11-22T00:00:00+09:00',
+		endAt: '2025-11-25T00:00:00+09:00'
+	},
+	{
+		key: 'mf98',
+		label: 'mf98',
+		type: 'fixed',
+		startAt: '2025-05-24T00:00:00+09:00',
+		endAt: '2025-05-26T00:00:00+09:00'
+	},
+	{
+		key: 'mf99',
+		label: 'mf99',
+		type: 'fixed',
+		startAt: '2026-05-16T00:00:00+09:00',
+		endAt: '2026-05-18T00:00:00+09:00'
+	}
+];
+
+export function resolveTimeRangeByKey(
+	key: string,
+	now: Date
+): {
+	start: Date;
+	end: Date;
+	duration: number;
+} | null {
+	const option = TIME_RANGE_OPTIONS.find((item) => item.key === key);
+	if (!option) return null;
+	if (option.type === 'relative') {
+		return {
+			start: new Date(now.getTime() - option.duration),
+			end: now,
+			duration: option.duration
+		};
+	}
+	const start = new Date(option.startAt);
+	const end = new Date(option.endAt);
+	return {
+		start,
+		end,
+		duration: end.getTime() - start.getTime()
+	};
+}
diff --git a/view/src/routes/+page.svelte b/view/src/routes/+page.svelte
index 8fcb93e..d3a4db3 100644
--- a/view/src/routes/+page.svelte
+++ b/view/src/routes/+page.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-	import { HOUR, DAY } from '~/lib/consts';
+	import {
+		DEFAULT_TIME_RANGE_KEY,
+		HOUR,
+		resolveTimeRangeByKey,
+		TIME_RANGE_OPTIONS
+	} from '~/lib/consts';
 	import * as v from 'valibot';
 	import Dashboard from '~/pages/Dashboard.svelte';
 	import { type Kind, visit } from '~/share/schema';
@@ -7,11 +12,14 @@
 	let visits: Promise<Visit[]> = $state(new Promise(() => {}));
 
 	let kind: Kind | 'all' = $state('all');
+	let rangeKey: string = $state(DEFAULT_TIME_RANGE_KEY);
 	let duration: number = $state(12 * HOUR);
 	let lastFetch: Date = $state(new Date());
 
 	$effect(() => {
-		visits = fetch(`/visits?kind=${kind}&duration=${duration}`)
+		const range = resolveTimeRangeByKey(rangeKey, new Date());
+		if (!range) return;
+		visits = fetch(`/visits?kind=${kind}&range=${rangeKey}`)
 			.then((res) => res.json())
 			.then((val) => {
 				const parsed = v.safeParse(v.array(visit), val);
@@ -22,20 +30,18 @@
 				return parsed.output;
 			})
 			.then((val) => {
-				lastFetch = new Date();
+				duration = range.duration;
+				lastFetch = range.end;
 				return val;
 			});
 	});
 </script>
 
 <header>
-	<select name="duration" bind:value={duration} class="select select-bordered w-full max-w-sm">
-		<option value={3 * HOUR}>3 hours</option>
-		<option value={6 * HOUR}>6 hours</option>
-		<option selected value={12 * HOUR}>12 hours</option>
-		<option value={1 * DAY}>1 day</option>
-		<option value={3 * DAY}>3 days</option>
-		<option value={6 * DAY}>6 days</option>
+	<select name="range" bind:value={rangeKey} class="select select-bordered w-full max-w-sm">
+		{#each TIME_RANGE_OPTIONS as option}
+			<option value={option.key}>{option.label}</option>
+		{/each}
 	</select>
 	<select name="kind" bind:value={kind} class="select select-bordered w-full max-w-sm">
 		<option value="all">All</option>
diff --git a/view/src/routes/visits/+server.ts b/view/src/routes/visits/+server.ts
index b720100..6f4cbc5 100644
--- a/view/src/routes/visits/+server.ts
+++ b/view/src/routes/visits/+server.ts
@@ -1,15 +1,15 @@
 import type { ServerLoad } from '@sveltejs/kit';
-import { and, eq, gte } from 'drizzle-orm';
+import { and, eq, gte, lt } from 'drizzle-orm';
 import { drizzle } from 'drizzle-orm/d1';
 import { visitsTable } from '~/db/schema';
+import { resolveTimeRangeByKey } from '~/lib/consts';
 
 export const GET: ServerLoad = async ({ url, platform }) => {
-	const duration = Number.parseInt(url.searchParams.get('duration') ?? '');
-	if (!duration)
-		return new Response(
-			`{"error": "failed to parse ${url.searchParams.get('duration')} to number"}`
-		);
-	const threshold = new Date(new Date().getTime() - duration);
+	const now = new Date();
+	const rangeKey = url.searchParams.get('range');
+	if (!rangeKey) return new Response('{"error":"range is required"}', { status: 400 });
+	const range = resolveTimeRangeByKey(rangeKey, now);
+	if (!range) return new Response(`{"error":"invalid range: ${rangeKey}"}`, { status: 400 });
 	const kind = url.searchParams.get('kind') ?? 'all';
 
 	if (!platform) return new Response('platform not found');
@@ -20,7 +20,8 @@ export const GET: ServerLoad = async ({ url, platform }) => {
 		.where(
 			and(
 				eq(visitsTable.kind, kind !== 'all' ? kind : visitsTable.kind),
-				gte(visitsTable.at, threshold)
+				gte(visitsTable.at, range.start),
+				lt(visitsTable.at, range.end)
 			)
 		)
 		.all();