diff --git a/packages/curve-ui-kit/src/features/candle-chart/CandleChart.tsx b/packages/curve-ui-kit/src/features/candle-chart/CandleChart.tsx
index b599e959d..8d6114ef2 100644
--- a/packages/curve-ui-kit/src/features/candle-chart/CandleChart.tsx
+++ b/packages/curve-ui-kit/src/features/candle-chart/CandleChart.tsx
@@ -1,19 +1,19 @@
-import type { IChartApi, Time, ISeriesApi, LineWidth } from 'lightweight-charts'
-import {
-  createChart,
-  ColorType,
-  CrosshairMode,
-  LineStyle,
-  AreaSeries,
-  CandlestickSeries,
-  LineSeries,
-} from 'lightweight-charts'
+import type { IChartApi, Time, ISeriesApi, LineWidth, IPriceLine, CustomSeriesWhitespaceData } from 'lightweight-charts'
+import { createChart, ColorType, CrosshairMode, LineStyle, CandlestickSeries, LineSeries } from 'lightweight-charts'
 import lodash from 'lodash'
-import { useEffect, useRef, useState, useCallback, useMemo } from 'react'
+import { useEffect, useRef, useState, useCallback, useMemo, type RefObject } from 'react'
 import { styled } from 'styled-components'
 import { formatNumber } from '@ui-kit/utils/'
+import { createLiquidationRangeSeries } from './custom-series/liquidationRangeSeries'
+import type { LiquidationRangePoint, LiquidationRangeSeriesOptions } from './custom-series/liquidationRangeSeries'
 import type { ChartColors } from './hooks/useChartPalette'
-import type { LpPriceOhlcDataFormatted, ChartHeight, OraclePriceData, LiquidationRanges } from './types'
+import type {
+  LpPriceOhlcDataFormatted,
+  ChartHeight,
+  OraclePriceData,
+  LiquidationRanges,
+  LlammaLiquididationRange,
+} from './types'
 import { calculateRobustPriceRange } from './utils'
 
 const createPriceFormatter = () => ({
@@ -25,16 +25,57 @@ const createPriceFormatter = () => ({
     }),
 })
 
-/**
- * Shared configuration for liquidation range area series
- */
-const SL_RANGE_AREA_SERIES_DEFAULTS = {
-  lineStyle: 3,
-  crosshairMarkerVisible: false,
-  pointMarkersVisible: false,
-  lineVisible: false,
-  priceLineStyle: 3,
-} as const
+type RangeValueAccumulator = {
+  upper?: number
+  lower?: number
+}
+
+const normalizeLiquidationRangePoints = (range?: LlammaLiquididationRange | null): LiquidationRangePoint[] => {
+  if (!range) return []
+
+  const pointMap = new Map<number, RangeValueAccumulator>()
+
+  const assignPoint = (time: number, key: keyof RangeValueAccumulator, value: number) => {
+    const entry = pointMap.get(time) ?? {}
+    entry[key] = value
+    pointMap.set(time, entry)
+  }
+
+  range.price1?.forEach(({ time, value }) => assignPoint(time, 'upper', value))
+  range.price2?.forEach(({ time, value }) => assignPoint(time, 'lower', value))
+
+  const orderedEntries = Array.from(pointMap.entries())
+    .filter(([, values]) => typeof values.upper === 'number' && typeof values.lower === 'number')
+    .sort((a, b) => a[0] - b[0])
+
+  if (!orderedEntries.length) {
+    return []
+  }
+
+  const fallbackStart = orderedEntries[0][0] as Time
+  const fallbackEnd = orderedEntries[orderedEntries.length - 1][0] as Time
+  const rangeStartTime = (range.startTime ?? fallbackStart) as Time
+  const rangeEndTime = (range.endTime ?? fallbackEnd) as Time
+
+  return orderedEntries.map(([time, values]) => {
+    const upper = values.upper as number
+    const lower = values.lower as number
+    return {
+      time: time as Time,
+      upper: Math.max(upper, lower),
+      lower: Math.min(upper, lower),
+      rangeStartTime,
+      rangeEndTime,
+    }
+  })
+}
+
+type LiquidationRangeSeriesApi = ISeriesApi<
+  'Custom',
+  Time,
+  LiquidationRangePoint | CustomSeriesWhitespaceData<Time>,
+  LiquidationRangeSeriesOptions
+>
 
 type Props = {
   /**
@@ -81,10 +122,17 @@ const CandleChart = ({
   const chartContainerRef = useRef(null)
   const chartRef = useRef<IChartApi>(null)
 
-  const newAreaSeriesRef = useRef<ISeriesApi<'Area'> | null>(null)
-  const newAreaBgSeriesRef = useRef<ISeriesApi<'Area'> | null>(null)
-  const currentAreaSeriesRef = useRef<ISeriesApi<'Area'> | null>(null)
-  const currentAreaBgSeriesRef = useRef<ISeriesApi<'Area'> | null>(null)
+  const newRangeSeriesRef = useRef<LiquidationRangeSeriesApi | null>(null)
+  const currentRangeSeriesRef = useRef<LiquidationRangeSeriesApi | null>(null)
+  const currentRangePriceLinesRef = useRef<{ top: IPriceLine | null; bottom: IPriceLine | null }>({
+    top: null,
+    bottom: null,
+  })
+  const newRangePriceLinesRef = useRef<{ top: IPriceLine | null; bottom: IPriceLine | null }>({
+    top: null,
+    bottom: null,
+  })
+  const historicalRangeSeriesRefs = useRef<LiquidationRangeSeriesApi[]>([])
   const candlestickSeriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null)
   const oraclePriceSeriesRef = useRef<ISeriesApi<'Line'> | null>(null)
   const lastFetchEndTimeRef = useRef(lastFetchEndTime)
@@ -100,6 +148,66 @@ const CandleChart = ({
   // Memoize colors to prevent unnecessary re-renders
   const memoizedColors = useMemo(() => colors, [colors])
 
+  // Central palette helper so every series gets the right colors immediately
+  const getSeriesAppearance = useCallback(
+    (variant: 'current' | 'new' | 'historical') => {
+      if (variant === 'current') {
+        return {
+          seriesOptions: {
+            fillColor: memoizedColors.rangeBackground,
+            fillOpacity: 0.5,
+            topLineColor: memoizedColors.rangeLineTop,
+            bottomLineColor: memoizedColors.rangeLineBottom,
+            lineWidth: 2,
+            lineStyle: LineStyle.LargeDashed,
+            showTopLine: false,
+            showBottomLine: false,
+          },
+          priceLineColorTop: memoizedColors.rangeLineTop,
+          priceLineColorBottom: memoizedColors.rangeLineBottom,
+        }
+      }
+
+      if (variant === 'new') {
+        return {
+          seriesOptions: {
+            fillColor: memoizedColors.rangeBackgroundFuture,
+            fillOpacity: 0.35,
+            topLineColor: memoizedColors.rangeLineFutureTop,
+            bottomLineColor: memoizedColors.rangeLineFutureBottom,
+            lineWidth: 2,
+            lineStyle: LineStyle.Dashed,
+            showTopLine: false,
+            showBottomLine: false,
+          },
+          priceLineColorTop: memoizedColors.rangeLineFutureTop,
+          priceLineColorBottom: memoizedColors.rangeLineFutureBottom,
+        }
+      }
+
+      return {
+        seriesOptions: {
+          fillColor: memoizedColors.rangeBackground,
+          fillOpacity: 0.2,
+          topLineColor: memoizedColors.rangeLineBottom,
+          bottomLineColor: memoizedColors.rangeLineBottom,
+          lineWidth: 1,
+          lineStyle: LineStyle.Solid,
+          showTopLine: true,
+          showBottomLine: true,
+        },
+      }
+    },
+    [
+      memoizedColors.rangeBackground,
+      memoizedColors.rangeBackgroundFuture,
+      memoizedColors.rangeLineBottom,
+      memoizedColors.rangeLineFutureBottom,
+      memoizedColors.rangeLineFutureTop,
+      memoizedColors.rangeLineTop,
+    ],
+  )
+
   const priceFormat = useMemo(() => createPriceFormatter(), [])
 
   // Debounced update of wrapper dimensions
@@ -170,12 +278,7 @@ const CandleChart = ({
     if (!chartContainerRef.current) return
 
     chartRef.current = createChart(chartContainerRef.current, {
-      layout: {
-        background: { type: ColorType.Solid, color: '#ffffff' },
-        textColor: '#000000',
-      },
       timeScale: {
-        timeVisible: true, // Default, will be updated by separate effect
         borderVisible: false,
       },
       rightPriceScale: {
@@ -187,25 +290,6 @@ const CandleChart = ({
           bottom: 0.1,
         },
       },
-      grid: {
-        vertLines: {
-          visible: true,
-          color: '#C3BCDB44',
-        },
-        horzLines: {
-          visible: true,
-          color: '#C3BCDB44',
-        },
-      },
-      crosshair: {
-        mode: CrosshairMode.Normal,
-        vertLine: {
-          width: 4 as LineWidth,
-          color: '#C3BCDB44',
-          style: LineStyle.Solid,
-          labelBackgroundColor: '#9B7DFF', // Default, will be updated by separate effect
-        },
-      },
     })
     chartRef.current.timeScale()
     isMounted.current = true
@@ -299,39 +383,80 @@ const CandleChart = ({
   useEffect(() => {
     if (!chartRef.current) return
 
-    const seriesConfigs = [
-      { ref: currentAreaSeriesRef, visible: liqRangeCurrentVisible },
-      { ref: currentAreaBgSeriesRef, visible: liqRangeCurrentVisible },
-      { ref: newAreaSeriesRef, visible: liqRangeNewVisible },
-      { ref: newAreaBgSeriesRef, visible: liqRangeNewVisible },
+    const configs = [
+      { ref: currentRangeSeriesRef, priceLinesRef: currentRangePriceLinesRef, visible: liqRangeCurrentVisible },
+      { ref: newRangeSeriesRef, priceLinesRef: newRangePriceLinesRef, visible: liqRangeNewVisible },
     ]
 
-    // Clean up existing series
-    seriesConfigs.forEach(({ ref }) => {
-      if (ref.current && chartRef.current) {
-        chartRef.current.removeSeries(ref.current)
-        ref.current = null
+    const removePrimarySeries = () => {
+      configs.forEach(({ ref, priceLinesRef }) => {
+        if (ref.current) {
+          chartRef.current?.removeSeries(ref.current)
+          ref.current = null
+        }
+        priceLinesRef.current = { top: null, bottom: null }
+      })
+    }
+
+    const removeHistoricalSeries = () => {
+      historicalRangeSeriesRefs.current.forEach((series) => {
+        if (series) {
+          chartRef.current?.removeSeries(series)
+        }
+      })
+      historicalRangeSeriesRefs.current = []
+    }
+
+    removePrimarySeries()
+    removeHistoricalSeries()
+
+    configs.forEach(({ ref, priceLinesRef, visible }, index) => {
+      if (!visible || !chartRef.current) return
+
+      const series = chartRef.current.addCustomSeries(createLiquidationRangeSeries(), {
+        lineWidth: 2,
+        lineStyle: LineStyle.Solid,
+      })
+
+      ref.current = series
+      const variant = index === 0 ? 'current' : 'new'
+      const appearance = getSeriesAppearance(variant)
+      series.applyOptions(appearance.seriesOptions)
+      priceLinesRef.current = {
+        top: series.createPriceLine({
+          price: 0,
+          color: appearance.priceLineColorTop,
+          lineWidth: 1,
+          lineStyle: LineStyle.LargeDashed,
+          axisLabelVisible: true,
+        }),
+        bottom: series.createPriceLine({
+          price: 0,
+          color: appearance.priceLineColorBottom,
+          lineWidth: 1,
+          lineStyle: LineStyle.LargeDashed,
+          axisLabelVisible: true,
+        }),
       }
     })
 
-    // Create series only if visible
-    seriesConfigs.forEach(({ ref, visible }) => {
-      if (visible && chartRef.current) {
-        ref.current = chartRef.current.addSeries(AreaSeries, {
-          ...SL_RANGE_AREA_SERIES_DEFAULTS,
-        })
-      }
+    // create passive bands for historical ranges if provided
+    const historicalRanges = liquidationRange?.historical ?? []
+    historicalRanges.forEach(() => {
+      if (!chartRef.current) return
+      const series = chartRef.current.addCustomSeries(createLiquidationRangeSeries(), {
+        lineWidth: 1,
+        lineStyle: LineStyle.Solid,
+      })
+      series.applyOptions(getSeriesAppearance('historical').seriesOptions)
+      historicalRangeSeriesRefs.current.push(series)
     })
 
     return () => {
-      seriesConfigs.forEach(({ ref }) => {
-        if (ref.current) {
-          chartRef.current?.removeSeries(ref.current)
-          ref.current = null
-        }
-      })
+      removePrimarySeries()
+      removeHistoricalSeries()
     }
-  }, [liqRangeCurrentVisible, liqRangeNewVisible])
+  }, [liqRangeCurrentVisible, liqRangeNewVisible, liquidationRange, getSeriesAppearance])
 
   // OHLC series effect - only create once when chart is ready
   useEffect(() => {
@@ -477,112 +602,99 @@ const CandleChart = ({
 
   // Update liquidation range data when it changes
   useEffect(() => {
-    const setSeriesData = (series: ISeriesApi<'Area'> | null, data: any) => {
-      if (series) series.setData(data)
+    const applyRangeData = (
+      seriesRef: RefObject<LiquidationRangeSeriesApi | null>,
+      priceLinesRef: RefObject<{ top: IPriceLine | null; bottom: IPriceLine | null }> | null,
+      data: LiquidationRangePoint[],
+    ) => {
+      if (!seriesRef.current) return
+
+      seriesRef.current.setData(data)
+      if (!priceLinesRef) return
+
+      const latestPoint = data[data.length - 1]
+      if (!latestPoint) return
+
+      priceLinesRef.current.top?.applyOptions({ price: latestPoint.upper })
+      priceLinesRef.current.bottom?.applyOptions({ price: latestPoint.lower })
     }
 
-    // Clear all series if liquidationRange is undefined or has no data
-    if (!liquidationRange || (!liquidationRange.current && !liquidationRange.new)) {
-      setSeriesData(currentAreaSeriesRef.current, [])
-      setSeriesData(currentAreaBgSeriesRef.current, [])
-      setSeriesData(newAreaSeriesRef.current, [])
-      setSeriesData(newAreaBgSeriesRef.current, [])
+    if (!liquidationRange || (!liquidationRange.current && !liquidationRange.new && !liquidationRange.historical)) {
+      currentRangeSeriesRef.current?.setData([])
+      newRangeSeriesRef.current?.setData([])
+      historicalRangeSeriesRefs.current.forEach((series) => series?.setData([]))
       return
     }
 
-    const ranges = []
-    if (liquidationRange.current && liquidationRange.new) {
-      ranges.push(
-        { series: newAreaSeriesRef.current, bgSeries: newAreaBgSeriesRef.current, data: liquidationRange.new },
-        {
-          series: currentAreaSeriesRef.current,
-          bgSeries: currentAreaBgSeriesRef.current,
-          data: liquidationRange.current,
-        },
+    if (liquidationRange.current) {
+      applyRangeData(
+        currentRangeSeriesRef,
+        currentRangePriceLinesRef,
+        normalizeLiquidationRangePoints(liquidationRange.current),
       )
-    } else if (liquidationRange.new) {
-      // Clear current series since it's not being used
-      setSeriesData(currentAreaSeriesRef.current, [])
-      setSeriesData(currentAreaBgSeriesRef.current, [])
-      ranges.push({
-        series: newAreaSeriesRef.current,
-        bgSeries: newAreaBgSeriesRef.current,
-        data: liquidationRange.new,
-      })
-    } else if (liquidationRange.current) {
-      // Clear new series since it's not being used
-      setSeriesData(newAreaSeriesRef.current, [])
-      setSeriesData(newAreaBgSeriesRef.current, [])
-      ranges.push({
-        series: currentAreaSeriesRef.current,
-        bgSeries: currentAreaBgSeriesRef.current,
-        data: liquidationRange.current,
-      })
+    } else {
+      currentRangeSeriesRef.current?.setData([])
+    }
+
+    if (liquidationRange.new) {
+      applyRangeData(newRangeSeriesRef, newRangePriceLinesRef, normalizeLiquidationRangePoints(liquidationRange.new))
+    } else {
+      newRangeSeriesRef.current?.setData([])
     }
 
-    // Set data for all ranges
-    ranges.forEach(({ series, bgSeries, data }) => {
-      setSeriesData(series, data.price1)
-      setSeriesData(bgSeries, data.price2)
+    // keep historical series in sync with normalized data snapshots
+    const historicalRanges = liquidationRange.historical ?? []
+    historicalRangeSeriesRefs.current.forEach((series, index) => {
+      if (!series) return
+      const normalized = historicalRanges[index] ? normalizeLiquidationRangePoints(historicalRanges[index]) : []
+      series.setData(normalized)
     })
-  }, [liquidationRange])
+  }, [liquidationRange, liquidationRange?.historical, liqRangeCurrentVisible, liqRangeNewVisible])
 
-  // Update liquidation range series colors when they change
+  // Update liquidation range series colors and price line styling
   useEffect(() => {
     const applySeriesOptions = (
-      series: ISeriesApi<'Area'> | null,
-      colors: { top: string; bottom: string; line: string },
+      series: LiquidationRangeSeriesApi | null,
+      options: Partial<LiquidationRangeSeriesOptions>,
     ) => {
       if (series) {
-        series.applyOptions({
-          topColor: colors.top,
-          bottomColor: colors.bottom,
-          lineColor: colors.line,
-        })
+        series.applyOptions(options)
       }
     }
 
-    const currentColors = {
-      top: memoizedColors.rangeBackground,
-      bottom: memoizedColors.rangeBackground,
-      line: memoizedColors.rangeLineTop,
-    }
-
-    // Update current range series
     if (liqRangeCurrentVisible) {
-      applySeriesOptions(currentAreaSeriesRef.current, currentColors)
-      applySeriesOptions(currentAreaBgSeriesRef.current, {
-        top: memoizedColors.backgroundColor,
-        bottom: memoizedColors.backgroundColor,
-        line: memoizedColors.rangeLineBottom,
+      const appearance = getSeriesAppearance('current')
+      applySeriesOptions(currentRangeSeriesRef.current, appearance.seriesOptions)
+
+      currentRangePriceLinesRef.current.top?.applyOptions({
+        color: appearance.priceLineColorTop,
+        lineStyle: LineStyle.LargeDashed,
+      })
+      currentRangePriceLinesRef.current.bottom?.applyOptions({
+        color: appearance.priceLineColorBottom,
+        lineStyle: LineStyle.LargeDashed,
       })
     }
 
-    // Update new range series
     if (liqRangeNewVisible) {
-      applySeriesOptions(newAreaSeriesRef.current, {
-        top: memoizedColors.rangeBackgroundFuture,
-        bottom: memoizedColors.rangeBackgroundFuture,
-        line: memoizedColors.rangeLineFutureTop,
+      const appearance = getSeriesAppearance('new')
+      applySeriesOptions(newRangeSeriesRef.current, appearance.seriesOptions)
+
+      newRangePriceLinesRef.current.top?.applyOptions({
+        color: appearance.priceLineColorTop,
+        lineStyle: LineStyle.LargeDashed,
       })
-      applySeriesOptions(newAreaBgSeriesRef.current, {
-        top: memoizedColors.backgroundColor,
-        bottom: memoizedColors.backgroundColor,
-        line: memoizedColors.rangeLineFutureBottom,
+      newRangePriceLinesRef.current.bottom?.applyOptions({
+        color: appearance.priceLineColorBottom,
+        lineStyle: LineStyle.LargeDashed,
       })
     }
-  }, [
-    liqRangeCurrentVisible,
-    liqRangeNewVisible,
-    memoizedColors.rangeLineTop,
-    memoizedColors.rangeBackground,
-    memoizedColors.backgroundColor,
-    liquidationRange,
-    memoizedColors.rangeLineBottom,
-    memoizedColors.rangeBackgroundFuture,
-    memoizedColors.rangeLineFutureTop,
-    memoizedColors.rangeLineFutureBottom,
-  ])
+
+    const historicalAppearance = getSeriesAppearance('historical')
+    historicalRangeSeriesRefs.current.forEach((series) => {
+      applySeriesOptions(series, historicalAppearance.seriesOptions)
+    })
+  }, [liqRangeCurrentVisible, liqRangeNewVisible, getSeriesAppearance, liquidationRange?.historical])
 
   // Update timescale when lastTimescale changes
   useEffect(() => {
@@ -617,38 +729,23 @@ const CandleChart = ({
     // Define series refs and their order based on liquidation range logic
     const getLiquidationRangeSeries = () => {
       if (!liquidationRange || !liquidationRange.current || !liquidationRange.new) {
-        // Only one range or no ranges - use default order
-        return [
-          currentAreaSeriesRef.current,
-          currentAreaBgSeriesRef.current,
-          newAreaSeriesRef.current,
-          newAreaBgSeriesRef.current,
-        ]
+        return [currentRangeSeriesRef.current, newRangeSeriesRef.current]
       }
 
-      const addNewFirst = liquidationRange.new.price2[0].value > liquidationRange.current.price2[0].value
-
-      if (addNewFirst) {
-        // New range first
-        return [
-          newAreaSeriesRef.current,
-          newAreaBgSeriesRef.current,
-          currentAreaSeriesRef.current,
-          currentAreaBgSeriesRef.current,
-        ]
-      } else {
-        // Current range first
-        return [
-          currentAreaSeriesRef.current,
-          currentAreaBgSeriesRef.current,
-          newAreaSeriesRef.current,
-          newAreaBgSeriesRef.current,
-        ]
-      }
+      const currentBottom =
+        liquidationRange.current.price2?.[0]?.value ?? liquidationRange.current.price1?.[0]?.value ?? 0
+      const newBottom = liquidationRange.new.price2?.[0]?.value ?? liquidationRange.new.price1?.[0]?.value ?? 0
+
+      const addNewFirst = newBottom > currentBottom
+
+      return addNewFirst
+        ? [newRangeSeriesRef.current, currentRangeSeriesRef.current]
+        : [currentRangeSeriesRef.current, newRangeSeriesRef.current]
     }
 
     // Define all series in order: liquidation ranges, volume, OHLC, oracle price
     const allSeries = [
+      ...historicalRangeSeriesRefs.current,
       ...getLiquidationRangeSeries(),
       // volumeSeriesRef.current,
       candlestickSeriesRef.current,
@@ -661,7 +758,7 @@ const CandleChart = ({
         series.setSeriesOrder(order++)
       }
     })
-  }, [liquidationRange])
+  }, [liquidationRange, liquidationRange?.historical, liqRangeCurrentVisible, liqRangeNewVisible])
 
   useEffect(() => {
     wrapperRef.current = new ResizeObserver((entries: ResizeObserverEntry[]) => {
diff --git a/packages/curve-ui-kit/src/features/candle-chart/custom-series/liquidationRangeSeries.ts b/packages/curve-ui-kit/src/features/candle-chart/custom-series/liquidationRangeSeries.ts
new file mode 100644
index 000000000..c85716acc
--- /dev/null
+++ b/packages/curve-ui-kit/src/features/candle-chart/custom-series/liquidationRangeSeries.ts
@@ -0,0 +1,270 @@
+import type { CanvasRenderingTarget2D } from 'fancy-canvas'
+import {
+  customSeriesDefaultOptions,
+  LineStyle,
+  type CustomData,
+  type CustomSeriesOptions,
+  type CustomSeriesPricePlotValues,
+  type CustomSeriesWhitespaceData,
+  type ICustomSeriesPaneRenderer,
+  type ICustomSeriesPaneView,
+  type PaneRendererCustomData,
+  type PriceToCoordinateConverter,
+  type Time,
+} from 'lightweight-charts'
+
+type Coordinate = number
+
+export type LiquidationRangePoint = CustomData<Time> & {
+  upper: number
+  lower: number
+  rangeStartTime?: Time
+  rangeEndTime?: Time
+}
+
+export type LiquidationRangeSeriesOptions = CustomSeriesOptions & {
+  fillColor: string
+  fillOpacity: number
+  topLineColor: string
+  bottomLineColor: string
+  lineWidth: number
+  lineStyle: LineStyle
+  showTopLine?: boolean
+  showBottomLine?: boolean
+}
+
+const DEFAULT_OPTIONS: LiquidationRangeSeriesOptions = {
+  ...customSeriesDefaultOptions,
+  color: '#000000',
+  lastValueVisible: false,
+  priceLineVisible: false,
+  fillColor: 'rgba(0, 0, 0, 0.15)',
+  fillOpacity: 1,
+  topLineColor: '#000000',
+  bottomLineColor: '#000000',
+  lineWidth: 1,
+  lineStyle: LineStyle.Solid,
+  showTopLine: true,
+  showBottomLine: true,
+}
+
+type PreparedPoint = {
+  x: number
+  upper: Coordinate
+  lower: Coordinate
+}
+
+type RendererPayload = {
+  data: PaneRendererCustomData<Time, LiquidationRangePoint> | null
+  options: LiquidationRangeSeriesOptions
+}
+
+// Tiny factory that keeps payload state outside the renderer object LW charts consumes.
+const createRenderer = () => {
+  const payload: RendererPayload = {
+    data: null,
+    options: DEFAULT_OPTIONS,
+  }
+
+  const renderer: ICustomSeriesPaneRenderer = {
+    draw(target, priceConverter) {
+      drawSeries(payload, target, priceConverter)
+    },
+  }
+
+  return {
+    renderer,
+    setPayload(data: PaneRendererCustomData<Time, LiquidationRangePoint>, options: LiquidationRangeSeriesOptions) {
+      payload.data = data
+      payload.options = options
+    },
+  }
+}
+
+// Entry point invoked by LW charts whenever the pane needs repainting.
+const drawSeries = (
+  payload: RendererPayload,
+  target: CanvasRenderingTarget2D,
+  priceConverter: PriceToCoordinateConverter,
+) => {
+  if (!payload.data || !payload.data.bars.length) return
+
+  const points = collectVisiblePoints(payload, priceConverter)
+  if (!points.length) return
+
+  target.useBitmapCoordinateSpace((scope) => {
+    const ctx = scope.context
+    ctx.save()
+    ctx.scale(scope.horizontalPixelRatio, scope.verticalPixelRatio)
+
+    fillBand(ctx, points, payload.options)
+    drawBoundary(ctx, points, 'upper', payload.options)
+    drawBoundary(ctx, points, 'lower', payload.options)
+
+    ctx.restore()
+  })
+}
+
+// Converts the currently visible bars into screen coordinates, filtering missing values.
+const collectVisiblePoints = (
+  payload: RendererPayload,
+  priceConverter: PriceToCoordinateConverter,
+): PreparedPoint[] => {
+  const { data } = payload
+  if (!data) return []
+
+  const { bars, visibleRange } = data
+  if (!bars.length) return []
+
+  const rangeStart = visibleRange ? Math.max(0, Math.floor(visibleRange.from)) : 0
+  const rangeEnd = visibleRange ? Math.min(bars.length - 1, Math.ceil(visibleRange.to)) : bars.length - 1
+
+  const points: PreparedPoint[] = []
+  for (let i = rangeStart; i <= rangeEnd; i += 1) {
+    const bar = bars[i]
+    const { upper, lower } = bar.originalData
+
+    if (upper == null || lower == null) continue
+    if (!isWithinTimeWindow(bar.originalData)) continue
+
+    const upperCoord = priceConverter(upper)
+    const lowerCoord = priceConverter(lower)
+
+    if (upperCoord === null || lowerCoord === null) continue
+
+    points.push({
+      x: bar.x,
+      upper: upperCoord,
+      lower: lowerCoord,
+    })
+  }
+
+  return points
+}
+
+const fillBand = (ctx: CanvasRenderingContext2D, points: PreparedPoint[], options: LiquidationRangeSeriesOptions) => {
+  const { fillColor, fillOpacity } = options
+  if (fillOpacity <= 0) return
+
+  ctx.beginPath()
+  ctx.moveTo(points[0].x, points[0].upper)
+
+  points.forEach((point) => {
+    ctx.lineTo(point.x, point.upper)
+  })
+
+  for (let i = points.length - 1; i >= 0; i -= 1) {
+    const point = points[i]
+    ctx.lineTo(point.x, point.lower)
+  }
+
+  ctx.closePath()
+
+  const previousAlpha = ctx.globalAlpha
+  ctx.globalAlpha = fillOpacity
+  ctx.fillStyle = fillColor
+  ctx.fill()
+  ctx.globalAlpha = previousAlpha
+}
+
+const drawBoundary = (
+  ctx: CanvasRenderingContext2D,
+  points: PreparedPoint[],
+  key: keyof Pick<PreparedPoint, 'upper' | 'lower'>,
+  options: LiquidationRangeSeriesOptions,
+) => {
+  const shouldShow = key === 'upper' ? options.showTopLine !== false : options.showBottomLine !== false
+  if (!shouldShow) return
+
+  const colorKey = key === 'upper' ? 'topLineColor' : 'bottomLineColor'
+  const color = options[colorKey]
+
+  const { lineWidth, lineStyle } = options
+  if (!color || lineWidth <= 0) return
+
+  ctx.beginPath()
+  ctx.lineWidth = lineWidth
+  ctx.strokeStyle = color
+
+  if (lineStyle === LineStyle.Dashed || lineStyle === LineStyle.LargeDashed) {
+    ctx.setLineDash(lineStyle === LineStyle.Dashed ? [6, 6] : [12, 6])
+  } else if (lineStyle === LineStyle.Dotted) {
+    ctx.setLineDash([2, 4])
+  } else if (lineStyle === LineStyle.SparseDotted) {
+    ctx.setLineDash([2, 8])
+  } else {
+    ctx.setLineDash([])
+  }
+
+  ctx.moveTo(points[0].x, points[0][key])
+  points.forEach((point) => ctx.lineTo(point.x, point[key]))
+  ctx.stroke()
+}
+
+const isWithinTimeWindow = (point: LiquidationRangePoint): boolean => {
+  const pointTimestamp = toTimestamp(point.time)
+  const startTimestamp = toTimestamp(point.rangeStartTime)
+  const endTimestamp = toTimestamp(point.rangeEndTime)
+
+  return (
+    pointTimestamp == null ||
+    startTimestamp == null ||
+    endTimestamp == null ||
+    (pointTimestamp >= startTimestamp && pointTimestamp <= endTimestamp)
+  )
+}
+
+const toTimestamp = (time?: Time): number | undefined => {
+  if (time == null) {
+    return undefined
+  }
+
+  if (typeof time === 'number') {
+    return time
+  }
+
+  if (typeof time === 'string') {
+    const parsed = Date.parse(time)
+    return Number.isNaN(parsed) ? undefined : Math.floor(parsed / 1000)
+  }
+
+  if ('year' in time && 'month' in time && 'day' in time) {
+    return Math.floor(Date.UTC(time.year, time.month - 1, time.day) / 1000)
+  }
+
+  return undefined
+}
+
+const priceValueBuilder = (plotRow: LiquidationRangePoint): CustomSeriesPricePlotValues => [
+  plotRow.upper,
+  plotRow.lower,
+]
+
+const isWhitespacePoint = (
+  data: LiquidationRangePoint | CustomSeriesWhitespaceData<Time>,
+): data is CustomSeriesWhitespaceData<Time> =>
+  !('upper' in data && 'lower' in data) ||
+  data.upper == null ||
+  data.lower == null ||
+  Number.isNaN(data.upper) ||
+  Number.isNaN(data.lower)
+
+const createLiquidationRangePaneView = (): ICustomSeriesPaneView<
+  Time,
+  LiquidationRangePoint,
+  LiquidationRangeSeriesOptions
+> => {
+  const { renderer, setPayload } = createRenderer()
+
+  return {
+    renderer: () => renderer,
+    update(data, options) {
+      setPayload(data, options)
+    },
+    priceValueBuilder,
+    isWhitespace: isWhitespacePoint,
+    defaultOptions: () => ({ ...DEFAULT_OPTIONS }),
+  }
+}
+
+export const createLiquidationRangeSeries = () => createLiquidationRangePaneView()
diff --git a/packages/curve-ui-kit/src/features/candle-chart/types.ts b/packages/curve-ui-kit/src/features/candle-chart/types.ts
index d5ca64971..13cf7bd08 100644
--- a/packages/curve-ui-kit/src/features/candle-chart/types.ts
+++ b/packages/curve-ui-kit/src/features/candle-chart/types.ts
@@ -81,11 +81,14 @@ export type LiquidationRange = { value: number; time: UTCTimestamp }
 export type LlammaLiquididationRange = {
   price1: LiquidationRange[]
   price2: LiquidationRange[]
+  startTime?: UTCTimestamp
+  endTime?: UTCTimestamp
 }
 
 export type LiquidationRanges = {
   new: LlammaLiquididationRange | null
   current: LlammaLiquididationRange | null
+  historical?: LlammaLiquididationRange[] | null
 }
 
 export interface LpTradesData {