diff --git a/apps/insights/src/app/historical-prices/route.ts b/apps/insights/src/app/historical-prices/route.ts
index b989d7360d..868eb58517 100644
--- a/apps/insights/src/app/historical-prices/route.ts
+++ b/apps/insights/src/app/historical-prices/route.ts
@@ -1,17 +1,84 @@
 import type { NextRequest } from "next/server";
+import { z } from "zod";
 
 import { getHistoricalPrices } from "../../services/clickhouse";
 
+const queryParamsSchema = z.object({
+  symbol: z.string().transform(decodeURIComponent),
+  publisher: z
+    .string()
+    .nullable()
+    .transform((value) => value ?? undefined),
+  from: z.string().transform(Number),
+  to: z.string().transform(Number),
+  resolution: z.enum(["1s", "1m", "5m", "1H", "1D"]).transform((value) => {
+    switch (value) {
+      case "1s": {
+        return "1 SECOND";
+      }
+      case "1m": {
+        return "1 MINUTE";
+      }
+      case "5m": {
+        return "5 MINUTE";
+      }
+      case "1H": {
+        return "1 HOUR";
+      }
+      case "1D": {
+        return "1 DAY";
+      }
+    }
+  }),
+});
+
 export async function GET(req: NextRequest) {
-  const symbol = req.nextUrl.searchParams.get("symbol");
-  const until = req.nextUrl.searchParams.get("until");
-  if (symbol && until) {
-    const res = await getHistoricalPrices({
-      symbol: decodeURIComponent(symbol),
-      until,
+  const parsed = queryParamsSchema.safeParse(
+    Object.fromEntries(
+      Object.keys(queryParamsSchema.shape).map((key) => [
+        key,
+        req.nextUrl.searchParams.get(key),
+      ]),
+    ),
+  );
+  if (!parsed.success) {
+    return new Response(`Invalid params: ${parsed.error.message}`, {
+      status: 400,
+    });
+  }
+
+  const { symbol, publisher, from, to, resolution } = parsed.data;
+
+  if (getNumDataPoints(to, from, resolution) > MAX_DATA_POINTS) {
+    return new Response("Unsupported resolution for date range", {
+      status: 400,
     });
-    return Response.json(res);
-  } else {
-    return new Response("Must provide `symbol` and `until`", { status: 400 });
   }
+
+  const res = await getHistoricalPrices({
+    symbol,
+    from,
+    to,
+    publisher,
+    resolution,
+  });
+
+  return Response.json(res);
 }
+
+const MAX_DATA_POINTS = 3000;
+
+type Resolution = "1 SECOND" | "1 MINUTE" | "5 MINUTE" | "1 HOUR" | "1 DAY";
+const ONE_MINUTE_IN_SECONDS = 60;
+const ONE_HOUR_IN_SECONDS = 60 * ONE_MINUTE_IN_SECONDS;
+
+const SECONDS_IN_ONE_PERIOD: Record<Resolution, number> = {
+  "1 SECOND": 1,
+  "1 MINUTE": ONE_MINUTE_IN_SECONDS,
+  "5 MINUTE": 5 * ONE_MINUTE_IN_SECONDS,
+  "1 HOUR": ONE_HOUR_IN_SECONDS,
+  "1 DAY": 24 * ONE_HOUR_IN_SECONDS,
+};
+
+const getNumDataPoints = (from: number, to: number, resolution: Resolution) =>
+  (to - from) / SECONDS_IN_ONE_PERIOD[resolution];
diff --git a/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts b/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts
index a1085ea612..62f0c87e75 100644
--- a/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts
+++ b/apps/insights/src/app/price-feeds/[slug]/(main)/loading.ts
@@ -1 +1 @@
-export { ChartPageLoading as default } from "../../../../components/PriceFeed/chart-page";
+export { ChartPageLoading as default } from "../../../../components/PriceFeed/Chart/chart-page";
diff --git a/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts b/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts
index 165ad5abcd..10e4cc3c72 100644
--- a/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts
+++ b/apps/insights/src/app/price-feeds/[slug]/(main)/page.ts
@@ -1,3 +1,3 @@
-export { ChartPage as default } from "../../../../components/PriceFeed/chart-page";
+export { ChartPage as default } from "../../../../components/PriceFeed/Chart/chart-page";
 
 export const revalidate = 3600;
diff --git a/apps/insights/src/components/PriceFeed/chart-page.module.scss b/apps/insights/src/components/PriceFeed/Chart/chart-page.module.scss
similarity index 100%
rename from apps/insights/src/components/PriceFeed/chart-page.module.scss
rename to apps/insights/src/components/PriceFeed/Chart/chart-page.module.scss
diff --git a/apps/insights/src/components/PriceFeed/chart-page.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
similarity index 93%
rename from apps/insights/src/components/PriceFeed/chart-page.tsx
rename to apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
index aa2797827d..a60cfe9506 100644
--- a/apps/insights/src/components/PriceFeed/chart-page.tsx
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-page.tsx
@@ -5,7 +5,8 @@ import { Spinner } from "@pythnetwork/component-library/Spinner";
 
 import { Chart } from "./chart";
 import styles from "./chart-page.module.scss";
-import { getFeed } from "./get-feed";
+import { getFeed } from "../get-feed";
+import { ChartToolbar } from "./chart-toolbar";
 
 type Props = {
   params: Promise<{
@@ -26,7 +27,7 @@ type ChartPageImplProps =
     });
 
 const ChartPageImpl = (props: ChartPageImplProps) => (
-  <Card title="Chart" className={styles.chartCard}>
+  <Card title="Chart" className={styles.chartCard} toolbar={<ChartToolbar />}>
     <div className={styles.chart}>
       {props.isLoading ? (
         <div className={styles.spinnerContainer}>
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
new file mode 100644
index 0000000000..deb7e64efc
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/chart-toolbar.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { Select } from "@pythnetwork/component-library/Select";
+import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup";
+import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useCallback } from "react";
+import type { Key } from "react-aria";
+
+import type { QuickSelectWindow, Resolution } from "./use-chart-toolbar";
+import {
+  QUICK_SELECT_WINDOW_TO_RESOLUTION,
+  QUICK_SELECT_WINDOWS,
+  RESOLUTION_TO_QUICK_SELECT_WINDOW,
+  RESOLUTIONS,
+  useChartQuickSelectWindow,
+  useChartResolution,
+} from "./use-chart-toolbar";
+
+const ENABLE_RESOLUTION_SELECTOR = false;
+
+export const ChartToolbar = () => {
+  const logger = useLogger();
+  const [quickSelectWindow, setQuickSelectWindow] = useChartQuickSelectWindow();
+  const [resolution, setResolution] = useChartResolution();
+
+  const handleResolutionChanged = useCallback(
+    (resolution: Resolution) => {
+      setResolution(resolution).catch((error: unknown) => {
+        logger.error("Failed to update resolution", error);
+      });
+      setQuickSelectWindow(RESOLUTION_TO_QUICK_SELECT_WINDOW[resolution]).catch(
+        (error: unknown) => {
+          logger.error("Failed to update quick select window", error);
+        },
+      );
+    },
+    [logger, setResolution, setQuickSelectWindow],
+  );
+
+  const handleQuickSelectWindowChange = useCallback(
+    (quickSelectWindow: Key) => {
+      if (!isQuickSelectWindow(quickSelectWindow)) {
+        throw new TypeError("Invalid quick select window");
+      }
+      setQuickSelectWindow(quickSelectWindow).catch((error: unknown) => {
+        logger.error("Failed to update quick select window", error);
+      });
+      setResolution(QUICK_SELECT_WINDOW_TO_RESOLUTION[quickSelectWindow]).catch(
+        (error: unknown) => {
+          logger.error("Failed to update resolution", error);
+        },
+      );
+    },
+    [logger, setQuickSelectWindow, setResolution],
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!ENABLE_RESOLUTION_SELECTOR) {
+    return;
+  }
+
+  return (
+    <>
+      <Select
+        label="Resolution"
+        hideLabel={true}
+        options={RESOLUTIONS.map((resolution) => ({
+          id: resolution,
+          label: resolution,
+        }))}
+        selectedKey={resolution}
+        onSelectionChange={handleResolutionChanged}
+        size="sm"
+        variant="outline"
+      />
+      <SingleToggleGroup
+        selectedKey={quickSelectWindow}
+        onSelectionChange={handleQuickSelectWindowChange}
+        rounded
+        items={QUICK_SELECT_WINDOWS.map((quickSelectWindow) => ({
+          id: quickSelectWindow,
+          children: quickSelectWindow,
+        }))}
+      />
+    </>
+  );
+};
+
+function isQuickSelectWindow(value: Key): value is QuickSelectWindow {
+  return QUICK_SELECT_WINDOWS.includes(value as QuickSelectWindow);
+}
diff --git a/apps/insights/src/components/PriceFeed/chart.module.scss b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
similarity index 54%
rename from apps/insights/src/components/PriceFeed/chart.module.scss
rename to apps/insights/src/components/PriceFeed/Chart/chart.module.scss
index c68b370cc0..fd5496f5cb 100644
--- a/apps/insights/src/components/PriceFeed/chart.module.scss
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.module.scss
@@ -1,12 +1,16 @@
 @use "@pythnetwork/component-library/theme";
 
 .chart {
-  --border-light: #{theme.pallette-color("stone", 300)};
-  --border-dark: #{theme.pallette-color("steel", 600)};
+  --chart-background-light: #{theme.pallette-color("white")};
+  --chart-background-dark: #{theme.pallette-color("steel", 950)};
+  --border-light: #{theme.pallette-color("stone", 100)};
+  --border-dark: #{theme.pallette-color("steel", 900)};
   --muted-light: #{theme.pallette-color("stone", 700)};
   --muted-dark: #{theme.pallette-color("steel", 300)};
   --chart-series-primary-light: #{theme.pallette-color("violet", 500)};
   --chart-series-primary-dark: #{theme.pallette-color("violet", 400)};
   --chart-series-neutral-light: #{theme.pallette-color("stone", 500)};
   --chart-series-neutral-dark: #{theme.pallette-color("steel", 300)};
+  --chart-series-muted-light: #{theme.pallette-color("violet", 100)};
+  --chart-series-muted-dark: #{theme.pallette-color("violet", 950)};
 }
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.test.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.test.tsx
new file mode 100644
index 0000000000..96022e37cd
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.test.tsx
@@ -0,0 +1,156 @@
+import type { LineData, UTCTimestamp } from "lightweight-charts";
+
+import { mergeData, startOfResolution } from "./chart";
+
+describe("mergeData", () => {
+  it("merges two arrays with no overlap", () => {
+    const a: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+    const b: LineData[] = [
+      { time: 3000 as UTCTimestamp, value: 30 },
+      { time: 4000 as UTCTimestamp, value: 40 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+      { time: 3000, value: 30 },
+      { time: 4000, value: 40 },
+    ]);
+  });
+
+  it("deduplicates by time, keeping the second value", () => {
+    const a: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+    const b: LineData[] = [
+      { time: 2000 as UTCTimestamp, value: 99 },
+      { time: 3000 as UTCTimestamp, value: 30 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 99 }, // second value overwrites first
+      { time: 3000, value: 30 },
+    ]);
+  });
+
+  it("sorts the merged array by time", () => {
+    const a: LineData[] = [
+      { time: 3000 as UTCTimestamp, value: 30 },
+      { time: 1000 as UTCTimestamp, value: 10 },
+    ];
+    const b: LineData[] = [
+      { time: 4000 as UTCTimestamp, value: 40 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+      { time: 3000, value: 30 },
+      { time: 4000, value: 40 },
+    ]);
+  });
+
+  it("handles empty first array", () => {
+    const a: LineData[] = [];
+    const b: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+    ]);
+  });
+
+  it("handles empty second array", () => {
+    const a: LineData[] = [
+      { time: 1000 as UTCTimestamp, value: 10 },
+      { time: 2000 as UTCTimestamp, value: 20 },
+    ];
+    const b: LineData[] = [];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([
+      { time: 1000, value: 10 },
+      { time: 2000, value: 20 },
+    ]);
+  });
+
+  it("handles both arrays empty", () => {
+    const a: LineData[] = [];
+    const b: LineData[] = [];
+
+    const result = mergeData(a, b);
+
+    expect(result).toEqual([]);
+  });
+});
+
+describe("startOfResolution", () => {
+  it("returns start of second for 1s resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1s");
+
+    expect(result).toBe(new Date("2024-01-15T10:30:45.000Z").getTime());
+  });
+
+  it("returns start of minute for 1m resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1m");
+
+    expect(result).toBe(new Date("2024-01-15T10:30:00.000Z").getTime());
+  });
+
+  it("returns start of minute for 5m resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "5m");
+
+    expect(result).toBe(new Date("2024-01-15T10:30:00.000Z").getTime());
+  });
+
+  it("returns start of hour for 1H resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1H");
+
+    expect(result).toBe(new Date("2024-01-15T10:00:00.000Z").getTime());
+  });
+
+  it("returns start of day for 1D resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+    const result = startOfResolution(date, "1D");
+
+    expect(result).toBe(new Date("2024-01-15T00:00:00.000Z").getTime());
+  });
+
+  it("throws error for unknown resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+
+    expect(() => startOfResolution(date, "15m")).toThrow(
+      "Unknown resolution: 15m",
+    );
+  });
+
+  it("throws error for invalid resolution", () => {
+    const date = new Date("2024-01-15T10:30:45.678Z");
+
+    expect(() => startOfResolution(date, "invalid")).toThrow(
+      "Unknown resolution: invalid",
+    );
+  });
+});
diff --git a/apps/insights/src/components/PriceFeed/Chart/chart.tsx b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
new file mode 100644
index 0000000000..3e85671b86
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/chart.tsx
@@ -0,0 +1,490 @@
+"use client";
+
+import { useLogger } from "@pythnetwork/component-library/useLogger";
+import { useResizeObserver, useMountEffect } from "@react-hookz/web";
+import {
+  startOfMinute,
+  startOfHour,
+  startOfDay,
+  startOfSecond,
+} from "date-fns";
+import type {
+  IChartApi,
+  ISeriesApi,
+  LineData,
+  UTCTimestamp,
+} from "lightweight-charts";
+import {
+  AreaSeries,
+  LineSeries,
+  LineStyle,
+  createChart,
+} from "lightweight-charts";
+import { useTheme } from "next-themes";
+import type { RefObject } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { z } from "zod";
+
+import styles from "./chart.module.scss";
+import {
+  quickSelectWindowToMilliseconds,
+  useChartQuickSelectWindow,
+  useChartResolution,
+} from "./use-chart-toolbar";
+import { useLivePriceData } from "../../../hooks/use-live-price-data";
+import { usePriceFormatter } from "../../../hooks/use-price-formatter";
+import { Cluster } from "../../../services/pyth";
+
+type Props = {
+  symbol: string;
+  feedId: string;
+};
+
+export const Chart = ({ symbol, feedId }: Props) => {
+  const chartContainerRef = useChart(symbol, feedId);
+
+  return (
+    <div
+      style={{ width: "100%", height: "100%" }}
+      className={styles.chart}
+      ref={chartContainerRef}
+    />
+  );
+};
+
+const useChart = (symbol: string, feedId: string) => {
+  const { chartContainerRef, chartRef } = useChartElem(symbol, feedId);
+  useChartResize(chartContainerRef, chartRef);
+  useChartColors(chartContainerRef, chartRef);
+  return chartContainerRef;
+};
+
+const useChartElem = (symbol: string, feedId: string) => {
+  const logger = useLogger();
+  const [quickSelectWindow] = useChartQuickSelectWindow();
+  const [resolution] = useChartResolution();
+  const chartContainerRef = useRef<HTMLDivElement | null>(null);
+  const chartRef = useRef<ChartRefContents | undefined>(undefined);
+  const isBackfilling = useRef(false);
+  const priceFormatter = usePriceFormatter();
+  const abortControllerRef = useRef<AbortController | undefined>(undefined);
+
+  const { current: livePriceData } = useLivePriceData(Cluster.Pythnet, feedId);
+
+  const didResetVisibleRange = useRef(false);
+  const didLoadInitialData = useRef(false);
+
+  // Update the chart with the historical and live price data
+  useEffect(() => {
+    // Historical
+    if (!chartRef.current || !didLoadInitialData.current || !livePriceData) {
+      return;
+    }
+
+    // Update last data point
+    const { price, confidence } = livePriceData.aggregate;
+    const timestampMs = startOfResolution(
+      new Date(Number(livePriceData.timestamp) * 1000),
+      resolution,
+    );
+
+    const time = (timestampMs / 1000) as UTCTimestamp;
+
+    const priceData: LineData = { time, value: price };
+    const confidenceHighData: LineData = { time, value: price + confidence };
+    const confidenceLowData: LineData = { time, value: price - confidence };
+
+    const lastDataPoint = chartRef.current.price.data().at(-1);
+
+    if (lastDataPoint && lastDataPoint.time > priceData.time) {
+      return;
+    }
+
+    chartRef.current.confidenceHigh.update(confidenceHighData);
+    chartRef.current.confidenceLow.update(confidenceLowData);
+    chartRef.current.price.update(priceData);
+  }, [livePriceData, resolution]);
+
+  function maybeResetVisibleRange() {
+    if (chartRef.current === undefined || didResetVisibleRange.current) {
+      return;
+    }
+    const data = chartRef.current.price.data();
+    const first = data.at(0);
+    const last = data.at(-1);
+    if (!first || !last) {
+      return;
+    }
+    chartRef.current.chart
+      .timeScale()
+      .setVisibleRange({ from: first.time, to: last.time });
+    didResetVisibleRange.current = true;
+  }
+
+  const fetchHistoricalData = useCallback(
+    function fetchHistoricalData({
+      from,
+      to,
+      resolution,
+    }: {
+      from: number;
+      to: number;
+      resolution: string;
+    }) {
+      if (isBackfilling.current) {
+        return;
+      }
+      isBackfilling.current = true;
+      const url = new URL("/historical-prices", globalThis.location.origin);
+      url.searchParams.set("symbol", symbol);
+      url.searchParams.set("from", from.toString());
+      url.searchParams.set("to", to.toString());
+      url.searchParams.set("resolution", resolution);
+      url.searchParams.set("cluster", "pythnet");
+
+      abortControllerRef.current = new AbortController();
+      abortControllerRef.current.signal.addEventListener("abort", () => {
+        isBackfilling.current = false;
+      });
+
+      fetch(url, { signal: abortControllerRef.current.signal })
+        .then((rawData) => rawData.json())
+        .then((jsonData) => {
+          if (!chartRef.current) {
+            return;
+          }
+
+          const data = historicalDataSchema.parse(jsonData);
+
+          // Get the current historical price data
+          // Note that .data() returns (WhitespaceData | LineData)[], hence the type cast.
+          // We never populate the chart with WhitespaceData, so the type cast is safe.
+          const currentHistoricalPriceData =
+            chartRef.current.price.data() as LineData[];
+          const currentHistoricalConfidenceHighData =
+            chartRef.current.confidenceHigh.data() as LineData[];
+          const currentHistoricalConfidenceLowData =
+            chartRef.current.confidenceLow.data() as LineData[];
+
+          const newHistoricalPriceData = data.map((d) => ({
+            time: d.time,
+            value: d.price,
+          }));
+          const newHistoricalConfidenceHighData = data.map((d) => ({
+            time: d.time,
+            value: d.price + d.confidence,
+          }));
+          const newHistoricalConfidenceLowData = data.map((d) => ({
+            time: d.time,
+            value: d.price - d.confidence,
+          }));
+
+          // Combine the current and new historical price data
+          const mergedPriceData = mergeData(
+            currentHistoricalPriceData,
+            newHistoricalPriceData,
+          );
+          const mergedConfidenceHighData = mergeData(
+            currentHistoricalConfidenceHighData,
+            newHistoricalConfidenceHighData,
+          );
+          const mergedConfidenceLowData = mergeData(
+            currentHistoricalConfidenceLowData,
+            newHistoricalConfidenceLowData,
+          );
+
+          // Set the new historical price data and (maybe) reset the visible range
+          chartRef.current.price.setData(mergedPriceData);
+          chartRef.current.confidenceHigh.setData(mergedConfidenceHighData);
+          chartRef.current.confidenceLow.setData(mergedConfidenceLowData);
+          maybeResetVisibleRange();
+          didLoadInitialData.current = true;
+        })
+        .catch((error: unknown) => {
+          if (error instanceof Error && error.name === "AbortError") {
+            return;
+          }
+          logger.error("Error fetching historical prices", error);
+        })
+        .finally(() => {
+          isBackfilling.current = false;
+        });
+    },
+    [symbol, chartRef, logger],
+  );
+
+  useMountEffect(() => {
+    const chartElem = chartContainerRef.current;
+    if (chartElem === null) {
+      throw new Error("Chart element was null on mount");
+    }
+    if (chartRef.current) {
+      chartRef.current.chart.remove();
+    }
+    const chart = createChart(chartElem, {
+      layout: {
+        attributionLogo: false,
+        background: { color: "transparent" },
+      },
+      grid: {
+        horzLines: {
+          color: "transparent",
+        },
+        vertLines: {
+          color: "transparent",
+        },
+      },
+      timeScale: {
+        timeVisible: true,
+        secondsVisible: true,
+      },
+      localization: {
+        priceFormatter: priceFormatter.format,
+      },
+    });
+
+    const confidenceHigh = chart.addSeries(AreaSeries, confidenceConfig);
+    const confidenceLow = chart.addSeries(AreaSeries, confidenceConfig);
+    const price = chart.addSeries(LineSeries, { priceFormat });
+
+    chart.timeScale().subscribeVisibleTimeRangeChange((range) => {
+      if (!range || !didLoadInitialData.current) {
+        return;
+      }
+      const { from, to } = range;
+      const first = chartRef.current?.price.data().at(0);
+
+      if (!from || !to || !first) {
+        return;
+      }
+
+      const fromMs = Number(from) * 1000;
+      const toMs = Number(to) * 1000;
+      const firstMs = Number(first.time) * 1000;
+
+      const visibleRangeMs = toMs - fromMs;
+
+      const remainingDataMs = fromMs - firstMs;
+      const threshold = visibleRangeMs * 0.1;
+
+      const newToMs = firstMs;
+      const newFromMs = startOfResolution(
+        new Date(newToMs - visibleRangeMs),
+        resolution,
+      );
+
+      // When we're getting close to the earliest data, we need to backfill more
+      if (remainingDataMs <= threshold) {
+        fetchHistoricalData({
+          from: newFromMs / 1000,
+          to: newToMs / 1000,
+          resolution,
+        });
+      }
+    });
+
+    chartRef.current = {
+      chart,
+      confidenceHigh,
+      confidenceLow,
+      price,
+    };
+
+    return () => {
+      chart.remove();
+    };
+  });
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return;
+    }
+
+    const now = new Date();
+    const to = startOfResolution(now, resolution);
+    const from = startOfResolution(
+      new Date(
+        now.getTime() - quickSelectWindowToMilliseconds(quickSelectWindow),
+      ),
+      resolution,
+    );
+
+    didResetVisibleRange.current = false;
+    didLoadInitialData.current = false;
+    chartRef.current.price.setData([]);
+    chartRef.current.confidenceHigh.setData([]);
+    chartRef.current.confidenceLow.setData([]);
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort("Reset visible range");
+      abortControllerRef.current = undefined;
+    }
+
+    fetchHistoricalData({
+      from: from / 1000,
+      to: to / 1000,
+      resolution,
+    });
+  }, [quickSelectWindow, resolution, fetchHistoricalData]);
+
+  return { chartRef, chartContainerRef };
+};
+
+type ChartRefContents = {
+  chart: IChartApi;
+} & {
+  confidenceHigh: ISeriesApi<"Area">;
+  confidenceLow: ISeriesApi<"Area">;
+  price: ISeriesApi<"Line">;
+};
+
+const historicalDataSchema = z.array(
+  z
+    .strictObject({
+      timestamp: z.number(),
+      price: z.number(),
+      confidence: z.number(),
+    })
+    .transform((d) => ({
+      time: Number(d.timestamp) as UTCTimestamp,
+      price: d.price,
+      confidence: d.confidence,
+    })),
+);
+const priceFormat = {
+  type: "price",
+  precision: 5,
+  minMove: 0.000_01,
+} as const;
+
+const confidenceConfig = {
+  priceFormat,
+  lineStyle: LineStyle.Dashed,
+  lineWidth: 1,
+} as const;
+
+const useChartResize = (
+  chartContainerRef: RefObject<HTMLDivElement | null>,
+  chartRef: RefObject<ChartRefContents | undefined>,
+) => {
+  useResizeObserver(chartContainerRef.current, ({ contentRect }) => {
+    const { chart } = chartRef.current ?? {};
+    if (chart) {
+      chart.applyOptions({ width: contentRect.width });
+    }
+  });
+};
+
+const useChartColors = (
+  chartContainerRef: RefObject<HTMLDivElement | null>,
+  chartRef: RefObject<ChartRefContents | undefined>,
+) => {
+  const { resolvedTheme } = useTheme();
+  useEffect(() => {
+    if (chartRef.current && chartContainerRef.current && resolvedTheme) {
+      applyColors(chartRef.current, chartContainerRef.current, resolvedTheme);
+    }
+  }, [resolvedTheme, chartRef, chartContainerRef]);
+};
+
+const applyColors = (
+  { chart, ...series }: ChartRefContents,
+  container: HTMLDivElement,
+  theme: string,
+) => {
+  const colors = getColors(container, theme);
+  chart.applyOptions({
+    grid: {
+      horzLines: {
+        visible: false,
+      },
+      vertLines: {
+        visible: false,
+      },
+    },
+    layout: {
+      textColor: colors.muted,
+    },
+    timeScale: {
+      borderColor: colors.border,
+    },
+    rightPriceScale: {
+      borderColor: colors.border,
+    },
+  });
+  series.confidenceHigh.applyOptions({
+    lineColor: colors.chartConfidence,
+    priceLineColor: colors.chartConfidence,
+    topColor: colors.chartConfidence,
+    bottomColor: colors.chartConfidence,
+  });
+  series.confidenceLow.applyOptions({
+    lineColor: colors.chartConfidence,
+    priceLineColor: colors.chartConfidence,
+    topColor: colors.background,
+    bottomColor: colors.background,
+  });
+  series.price.applyOptions({
+    color: colors.chartPrimary,
+  });
+};
+
+const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
+  const style = getComputedStyle(container);
+
+  return {
+    background: style.getPropertyValue(`--chart-background-${resolvedTheme}`),
+    border: style.getPropertyValue(`--border-${resolvedTheme}`),
+    muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
+    chartNeutral: style.getPropertyValue(
+      `--chart-series-neutral-${resolvedTheme}`,
+    ),
+    chartPrimary: style.getPropertyValue(
+      `--chart-series-primary-${resolvedTheme}`,
+    ),
+    chartConfidence: style.getPropertyValue(
+      `--chart-series-muted-${resolvedTheme}`,
+    ),
+  };
+};
+
+/**
+ * Merge (and sort) two arrays of line data, deduplicating by time
+ */
+export function mergeData(as: LineData[], bs: LineData[]) {
+  const unique = new Map<number, LineData>();
+
+  for (const a of as) {
+    unique.set(a.time as number, a);
+  }
+  for (const b of bs) {
+    unique.set(b.time as number, b);
+  }
+  return [...unique.values()].sort(
+    (a, b) => (a.time as number) - (b.time as number),
+  );
+}
+
+/**
+ * Convert a date to the start of the given resolution, i.e. 1s = startOfSecond, 1m = startOfMinute, etc.
+ */
+export function startOfResolution(date: Date, resolution: string) {
+  switch (resolution) {
+    case "1s": {
+      return startOfSecond(date).getTime();
+    }
+    case "1m":
+    case "5m": {
+      return startOfMinute(date).getTime();
+    }
+    case "1H": {
+      return startOfHour(date).getTime();
+    }
+    case "1D": {
+      return startOfDay(date).getTime();
+    }
+    default: {
+      throw new Error(`Unknown resolution: ${resolution}`);
+    }
+  }
+}
diff --git a/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
new file mode 100644
index 0000000000..1dc063b888
--- /dev/null
+++ b/apps/insights/src/components/PriceFeed/Chart/use-chart-toolbar.tsx
@@ -0,0 +1,68 @@
+import { parseAsStringLiteral, useQueryState } from "nuqs";
+
+export const RESOLUTIONS = ["1s", "1m", "5m", "1H", "1D"] as const;
+export type Resolution = (typeof RESOLUTIONS)[number];
+
+export const QUICK_SELECT_WINDOWS = ["1m", "1H", "1D", "1W", "1M"] as const;
+export type QuickSelectWindow = (typeof QUICK_SELECT_WINDOWS)[number];
+
+export function useChartQuickSelectWindow() {
+  return useQueryState(
+    "quickSelectWindow",
+    parseAsStringLiteral(QUICK_SELECT_WINDOWS).withDefault("1m"),
+  );
+}
+
+export function useChartResolution() {
+  return useQueryState(
+    "resolution",
+    parseAsStringLiteral(RESOLUTIONS).withDefault("1s"),
+  );
+}
+
+const ONE_SECOND_IN_MS = 1000;
+const ONE_MINUTE_IN_MS = 60 * ONE_SECOND_IN_MS;
+const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
+const ONE_DAY_IN_MS = 24 * ONE_HOUR_IN_MS;
+const ONE_WEEK_IN_MS = 7 * ONE_DAY_IN_MS;
+const ONE_MONTH_IN_MS = 30 * ONE_DAY_IN_MS;
+
+const QUICK_SELECT_WINDOW_TO_MS: Record<QuickSelectWindow, number> = {
+  "1m": ONE_MINUTE_IN_MS,
+  "1H": ONE_HOUR_IN_MS,
+  "1D": ONE_DAY_IN_MS,
+  "1W": ONE_WEEK_IN_MS,
+  "1M": ONE_MONTH_IN_MS,
+};
+
+/**
+ * Converts a quick select window string (e.g., "1m", "1H", "1D") to its equivalent duration in milliseconds.
+ * Used to determine the time range for chart data based on user selection.
+ */
+export function quickSelectWindowToMilliseconds(
+  quickSelectWindow: QuickSelectWindow,
+): number {
+  return QUICK_SELECT_WINDOW_TO_MS[quickSelectWindow];
+}
+
+export const RESOLUTION_TO_QUICK_SELECT_WINDOW: Record<
+  Resolution,
+  QuickSelectWindow
+> = {
+  "1s": "1m",
+  "1m": "1H",
+  "5m": "1D",
+  "1H": "1W",
+  "1D": "1M",
+};
+
+export const QUICK_SELECT_WINDOW_TO_RESOLUTION: Record<
+  QuickSelectWindow,
+  Resolution
+> = {
+  "1m": "1s",
+  "1H": "1m",
+  "1D": "5m",
+  "1W": "1H",
+  "1M": "1H",
+};
diff --git a/apps/insights/src/components/PriceFeed/chart.tsx b/apps/insights/src/components/PriceFeed/chart.tsx
deleted file mode 100644
index 478d1172cd..0000000000
--- a/apps/insights/src/components/PriceFeed/chart.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-"use client";
-
-import { useLogger } from "@pythnetwork/component-library/useLogger";
-import { useResizeObserver, useMountEffect } from "@react-hookz/web";
-import type { IChartApi, ISeriesApi, UTCTimestamp } from "lightweight-charts";
-import { LineSeries, LineStyle, createChart } from "lightweight-charts";
-import { useTheme } from "next-themes";
-import type { RefObject } from "react";
-import { useEffect, useRef, useCallback } from "react";
-import { z } from "zod";
-
-import styles from "./chart.module.scss";
-import { useLivePriceData } from "../../hooks/use-live-price-data";
-import { usePriceFormatter } from "../../hooks/use-price-formatter";
-import { Cluster } from "../../services/pyth";
-
-type Props = {
-  symbol: string;
-  feedId: string;
-};
-
-export const Chart = ({ symbol, feedId }: Props) => {
-  const chartContainerRef = useChart(symbol, feedId);
-
-  return (
-    <div
-      style={{ width: "100%", height: "100%" }}
-      className={styles.chart}
-      ref={chartContainerRef}
-    />
-  );
-};
-
-const useChart = (symbol: string, feedId: string) => {
-  const { chartContainerRef, chartRef } = useChartElem(symbol, feedId);
-  useChartResize(chartContainerRef, chartRef);
-  useChartColors(chartContainerRef, chartRef);
-  return chartContainerRef;
-};
-
-const useChartElem = (symbol: string, feedId: string) => {
-  const logger = useLogger();
-  const { current } = useLivePriceData(Cluster.Pythnet, feedId);
-  const chartContainerRef = useRef<HTMLDivElement | null>(null);
-  const chartRef = useRef<ChartRefContents | undefined>(undefined);
-  const earliestDateRef = useRef<bigint | undefined>(undefined);
-  const isBackfilling = useRef(false);
-  const priceFormatter = usePriceFormatter();
-
-  const backfillData = useCallback(() => {
-    if (!isBackfilling.current && earliestDateRef.current) {
-      isBackfilling.current = true;
-      const url = new URL("/historical-prices", globalThis.location.origin);
-      url.searchParams.set("symbol", symbol);
-      url.searchParams.set("until", earliestDateRef.current.toString());
-      fetch(url)
-        .then(async (data) => historicalDataSchema.parse(await data.json()))
-        .then((data) => {
-          const firstPoint = data[0];
-          if (firstPoint) {
-            earliestDateRef.current = BigInt(firstPoint.timestamp);
-          }
-          if (
-            chartRef.current &&
-            chartRef.current.resolution === Resolution.Tick
-          ) {
-            const convertedData = data.map(
-              ({ timestamp, price, confidence }) => ({
-                time: getLocalTimestamp(new Date(timestamp * 1000)),
-                price,
-                confidence,
-              }),
-            );
-            chartRef.current.price.setData([
-              ...convertedData.map(({ time, price }) => ({
-                time,
-                value: price,
-              })),
-              ...chartRef.current.price.data(),
-            ]);
-            chartRef.current.confidenceHigh.setData([
-              ...convertedData.map(({ time, price, confidence }) => ({
-                time,
-                value: price + confidence,
-              })),
-              ...chartRef.current.confidenceHigh.data(),
-            ]);
-            chartRef.current.confidenceLow.setData([
-              ...convertedData.map(({ time, price, confidence }) => ({
-                time,
-                value: price - confidence,
-              })),
-              ...chartRef.current.confidenceLow.data(),
-            ]);
-          }
-          isBackfilling.current = false;
-        })
-        .catch((error: unknown) => {
-          logger.error("Error fetching historical prices", error);
-        });
-    }
-  }, [logger, symbol]);
-
-  useMountEffect(() => {
-    const chartElem = chartContainerRef.current;
-    if (chartElem === null) {
-      throw new Error("Chart element was null on mount");
-    } else {
-      const chart = createChart(chartElem, {
-        layout: {
-          attributionLogo: false,
-          background: { color: "transparent" },
-        },
-        timeScale: {
-          timeVisible: true,
-          secondsVisible: true,
-        },
-        localization: {
-          priceFormatter: priceFormatter.format,
-        },
-      });
-
-      const price = chart.addSeries(LineSeries, { priceFormat });
-
-      chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {
-        if (
-          range && // if (range.to - range.from > 1000) {
-          //   console.log("DECREASE RESOLUTION");
-          // } else if (range.to - range.from < 100) {
-          //   console.log("INCREASE RESOLUTION");
-          // } else if (range.from < 10) {
-          range.from < 10
-        ) {
-          backfillData();
-        }
-      });
-
-      chartRef.current = {
-        resolution: Resolution.Tick,
-        chart,
-        confidenceHigh: chart.addSeries(LineSeries, confidenceConfig),
-        confidenceLow: chart.addSeries(LineSeries, confidenceConfig),
-        price,
-      };
-      return () => {
-        chart.remove();
-      };
-    }
-  });
-
-  useEffect(() => {
-    if (current && chartRef.current) {
-      earliestDateRef.current ??= current.timestamp;
-      const { price, confidence } = current.aggregate;
-      const time = getLocalTimestamp(
-        new Date(Number(current.timestamp * 1000n)),
-      );
-      if (chartRef.current.resolution === Resolution.Tick) {
-        chartRef.current.price.update({ time, value: price });
-        chartRef.current.confidenceHigh.update({
-          time,
-          value: price + confidence,
-        });
-        chartRef.current.confidenceLow.update({
-          time,
-          value: price - confidence,
-        });
-      }
-    }
-  }, [current]);
-
-  return { chartRef, chartContainerRef };
-};
-
-enum Resolution {
-  Tick,
-  Minute,
-  Hour,
-  Day,
-}
-
-type ChartRefContents = {
-  chart: IChartApi;
-} & (
-  | {
-      resolution: Resolution.Tick;
-      confidenceHigh: ISeriesApi<"Line">;
-      confidenceLow: ISeriesApi<"Line">;
-      price: ISeriesApi<"Line">;
-    }
-  | {
-      resolution: Exclude<Resolution, Resolution.Tick>;
-      series: ISeriesApi<"Candlestick">;
-    }
-);
-
-const historicalDataSchema = z.array(
-  z.strictObject({
-    timestamp: z.number(),
-    price: z.number(),
-    confidence: z.number(),
-  }),
-);
-
-const priceFormat = {
-  type: "price",
-  precision: 5,
-  minMove: 0.000_01,
-} as const;
-
-const confidenceConfig = {
-  priceFormat,
-  lineStyle: LineStyle.Dashed,
-  lineWidth: 1,
-} as const;
-
-const useChartResize = (
-  chartContainerRef: RefObject<HTMLDivElement | null>,
-  chartRef: RefObject<ChartRefContents | undefined>,
-) => {
-  useResizeObserver(chartContainerRef.current, ({ contentRect }) => {
-    const { chart } = chartRef.current ?? {};
-    if (chart) {
-      chart.applyOptions({ width: contentRect.width });
-    }
-  });
-};
-
-const useChartColors = (
-  chartContainerRef: RefObject<HTMLDivElement | null>,
-  chartRef: RefObject<ChartRefContents | undefined>,
-) => {
-  const { resolvedTheme } = useTheme();
-  useEffect(() => {
-    if (chartRef.current && chartContainerRef.current && resolvedTheme) {
-      applyColors(chartRef.current, chartContainerRef.current, resolvedTheme);
-    }
-  }, [resolvedTheme, chartRef, chartContainerRef]);
-};
-
-const applyColors = (
-  { chart, ...series }: ChartRefContents,
-  container: HTMLDivElement,
-  theme: string,
-) => {
-  const colors = getColors(container, theme);
-  chart.applyOptions({
-    grid: {
-      horzLines: {
-        color: colors.border,
-      },
-      vertLines: {
-        color: colors.border,
-      },
-    },
-    layout: {
-      textColor: colors.muted,
-    },
-    timeScale: {
-      borderColor: colors.muted,
-    },
-    rightPriceScale: {
-      borderColor: colors.muted,
-    },
-  });
-  if (series.resolution === Resolution.Tick) {
-    series.confidenceHigh.applyOptions({
-      color: colors.chartNeutral,
-    });
-    series.confidenceLow.applyOptions({
-      color: colors.chartNeutral,
-    });
-    series.price.applyOptions({
-      color: colors.chartPrimary,
-    });
-  }
-};
-
-const getColors = (container: HTMLDivElement, resolvedTheme: string) => {
-  const style = getComputedStyle(container);
-
-  return {
-    border: style.getPropertyValue(`--border-${resolvedTheme}`),
-    muted: style.getPropertyValue(`--muted-${resolvedTheme}`),
-    chartNeutral: style.getPropertyValue(
-      `--chart-series-neutral-${resolvedTheme}`,
-    ),
-    chartPrimary: style.getPropertyValue(
-      `--chart-series-primary-${resolvedTheme}`,
-    ),
-  };
-};
-
-const getLocalTimestamp = (date: Date): UTCTimestamp =>
-  (Date.UTC(
-    date.getFullYear(),
-    date.getMonth(),
-    date.getDate(),
-    date.getHours(),
-    date.getMinutes(),
-    date.getSeconds(),
-    date.getMilliseconds(),
-  ) / 1000) as UTCTimestamp;
diff --git a/apps/insights/src/services/clickhouse.ts b/apps/insights/src/services/clickhouse.ts
index c0b3b2521a..f2834a6a90 100644
--- a/apps/insights/src/services/clickhouse.ts
+++ b/apps/insights/src/services/clickhouse.ts
@@ -336,15 +336,31 @@ export const _getPublisherAverageScoreHistory = async ({
     },
   );
 
-// note that this is not cached as the `until` param is a unix timestamp
+type ResolutionUnit = "SECOND" | "MINUTE" | "HOUR" | "DAY";
+type Resolution = `${number} ${ResolutionUnit}`;
+// note that this is not cached as `from` and `to` params are unix timestamps
 export const getHistoricalPrices = async ({
   symbol,
-  until,
+  from,
+  to,
+  publisher = "",
+  resolution = "1 MINUTE",
 }: {
   symbol: string;
-  until: string;
-}) =>
-  safeQuery(
+  from: number;
+  to: number;
+  publisher: string | undefined;
+  resolution?: Resolution;
+}) => {
+  const queryParams: Record<string, number | string | string[]> = {
+    symbol,
+    from,
+    to,
+    publisher,
+    cluster: "pythnet",
+  };
+
+  return safeQuery(
     z.array(
       z.strictObject({
         timestamp: z.number(),
@@ -354,20 +370,23 @@ export const getHistoricalPrices = async ({
     ),
     {
       query: `
-          SELECT toUnixTimestamp(time) AS timestamp, avg(price) AS price, avg(confidence) AS confidence
+          SELECT toUnixTimestamp(toStartOfInterval(publishTime, INTERVAL ${resolution})) AS timestamp, avg(price) AS price, avg(confidence) AS confidence
           FROM prices
-          WHERE cluster = 'pythnet'
-          AND symbol = {symbol: String}
-          AND version = 2
-          AND time > fromUnixTimestamp(toInt64({until: String})) - INTERVAL 5 MINUTE
-          AND time < fromUnixTimestamp(toInt64({until: String}))
-          AND publisher = ''
-          GROUP BY time
-          ORDER BY time ASC
+          PREWHERE
+            cluster = {cluster: String}
+            AND publisher = {publisher: String}
+            AND symbol = {symbol: String}
+            AND version = 2
+          WHERE
+            publishTime >= toDateTime({from: UInt32})
+            AND publishTime < toDateTime({to: UInt32})
+          GROUP BY timestamp
+          ORDER BY timestamp ASC
         `,
-      query_params: { symbol, until },
+      query_params: queryParams,
     },
   );
+};
 
 const safeQuery = async <Output, Def extends ZodTypeDef, Input>(
   schema: ZodSchema<Output, Def, Input>,