diff --git a/package-lock.json b/package-lock.json
index 82e3eefc..dc6d747c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@visx/axis": "^3.10.1",
         "@visx/curve": "^3.3.0",
         "@visx/event": "^3.3.0",
+        "@visx/gradient": "^3.3.0",
         "@visx/grid": "^3.5.0",
         "@visx/group": "^3.3.0",
         "@visx/hierarchy": "^3.3.0",
@@ -4621,6 +4622,18 @@
         "@visx/point": "3.3.0"
       }
     },
+    "node_modules/@visx/gradient": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@visx/gradient/-/gradient-3.3.0.tgz",
+      "integrity": "sha512-t3vqukahDQsJ64/fcm85woFm2XPpSPMBz92gFvaY4J8EJY3e6rFOg382v5Dm17fgNsLRKJA0Vqo7mUtDe2pWOw==",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
     "node_modules/@visx/grid": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.5.0.tgz",
diff --git a/package.json b/package.json
index 6691d892..fc54de85 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@visx/axis": "^3.10.1",
     "@visx/curve": "^3.3.0",
     "@visx/event": "^3.3.0",
+    "@visx/gradient": "^3.3.0",
     "@visx/grid": "^3.5.0",
     "@visx/group": "^3.3.0",
     "@visx/hierarchy": "^3.3.0",
diff --git a/src/avs/charts/OperatorsTabLineChart.jsx b/src/avs/charts/OperatorsTabLineChart.jsx
index 9ec6ee98..83341e5b 100644
--- a/src/avs/charts/OperatorsTabLineChart.jsx
+++ b/src/avs/charts/OperatorsTabLineChart.jsx
@@ -1,5 +1,5 @@
+import { AreaClosed, Circle, LinePath } from '@visx/shape';
 import { AxisBottom, AxisRight } from '@visx/axis';
-import { Circle, LinePath } from '@visx/shape';
 import { getGrowthPercentage, reduceState } from '../../shared/helpers';
 import { scaleLinear, scaleUtc } from '@visx/scale';
 import { Tab, Tabs } from '@nextui-org/react';
@@ -10,6 +10,7 @@ import { curveMonotoneX } from '@visx/curve';
 import { formatNumber } from '../../shared/formatters';
 import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
+import { LinearGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { tabs } from '../../shared/slots';
 import { useMutativeReducer } from 'use-mutative';
@@ -163,6 +164,13 @@ export default function OperatorsTabLineChart({ points, height, width }) {
         ref={containerRef}
         width={width}
       >
+        <LinearGradient
+          from="hsl(var(--app-chart-9))"
+          fromOpacity={0.5}
+          id="area-gradient"
+          to="hsl(var(--app-chart-9))"
+          toOpacity={0}
+        />
         <Group left={margin.left} top={margin.top}>
           <GridRows
             className="opacity-25 [&_line]:stroke-foreground-2"
@@ -171,6 +179,22 @@ export default function OperatorsTabLineChart({ points, height, width }) {
             scale={scaleValue}
             width={state.maxX - margin.right}
           />
+          <AreaClosed
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            fill="url(#area-gradient)"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+            yScale={scaleValue}
+          />
+          <LinePath
+            className="stroke-chart-9 stroke-2"
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            strokeLinecap="butt"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+          />
           <AxisRight
             axisLineClassName="stroke-foreground-2"
             left={state.maxX - margin.right}
@@ -199,14 +223,6 @@ export default function OperatorsTabLineChart({ points, height, width }) {
             }}
             top={state.maxY}
           />
-          <LinePath
-            className="stroke-chart-9 stroke-2"
-            curve={curveMonotoneX}
-            data={state.filteredPoints}
-            x={d => scaleDate(getDate(d)) ?? 0}
-            y={d => scaleValue(getValue(d)) ?? 0}
-          />
-
           {tooltipOpen && (
             <Circle
               className="cursor-pointer fill-chart-9 stroke-2 dark:stroke-white"
diff --git a/src/avs/charts/TVLTabLineChart.jsx b/src/avs/charts/TVLTabLineChart.jsx
index 2d5f928e..20000e1b 100644
--- a/src/avs/charts/TVLTabLineChart.jsx
+++ b/src/avs/charts/TVLTabLineChart.jsx
@@ -1,5 +1,5 @@
+import { AreaClosed, Circle, LinePath } from '@visx/shape';
 import { AxisBottom, AxisRight } from '@visx/axis';
-import { Circle, LinePath } from '@visx/shape';
 import { formatETH, formatNumber, formatUSD } from '../../shared/formatters';
 import { getGrowthPercentage, reduceState } from '../../shared/helpers';
 import { scaleLinear, scaleUtc } from '@visx/scale';
@@ -10,6 +10,7 @@ import { bisector } from '@visx/vendor/d3-array';
 import { curveMonotoneX } from '@visx/curve';
 import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
+import { LinearGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { tabs } from '../../shared/slots';
 import { useMutativeReducer } from 'use-mutative';
@@ -186,6 +187,13 @@ export default function TVLTabLineChart({ points, height, width }) {
         ref={containerRef}
         width={width}
       >
+        <LinearGradient
+          from="hsl(var(--app-chart-9))"
+          fromOpacity={0.5}
+          id="area-gradient"
+          to="hsl(var(--app-chart-9))"
+          toOpacity={0}
+        />
         <Group left={margin.left} top={margin.top}>
           <GridRows
             className="opacity-25 [&_line]:stroke-foreground-2"
@@ -194,6 +202,22 @@ export default function TVLTabLineChart({ points, height, width }) {
             scale={scaleValue}
             width={state.maxX - margin.right}
           />
+          <AreaClosed
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            fill="url(#area-gradient)"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+            yScale={scaleValue}
+          />
+          <LinePath
+            className="stroke-chart-9 stroke-2"
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            strokeLinecap="butt"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+          />
           <AxisRight
             axisLineClassName="stroke-foreground-2"
             left={state.maxX - margin.right}
@@ -222,14 +246,6 @@ export default function TVLTabLineChart({ points, height, width }) {
             }}
             top={state.maxY}
           />
-          <LinePath
-            className="stroke-chart-9 stroke-2"
-            curve={curveMonotoneX}
-            data={state.filteredPoints}
-            x={d => scaleDate(getDate(d)) ?? 0}
-            y={d => scaleValue(getValue(d)) ?? 0}
-          />
-
           {tooltipOpen && (
             <Circle
               className="cursor-pointer fill-chart-9 stroke-2 dark:stroke-white"
diff --git a/src/operators/charts/OperatorRestakersLineChart.jsx b/src/operators/charts/OperatorRestakersLineChart.jsx
index 66dc2445..2c97d138 100644
--- a/src/operators/charts/OperatorRestakersLineChart.jsx
+++ b/src/operators/charts/OperatorRestakersLineChart.jsx
@@ -1,5 +1,5 @@
+import { AreaClosed, Circle, LinePath } from '@visx/shape';
 import { AxisBottom, AxisRight } from '@visx/axis';
-import { Circle, LinePath } from '@visx/shape';
 import {
   getGrowthPercentage,
   handleServiceError,
@@ -15,6 +15,7 @@ import ErrorMessage from '../../shared/ErrorMessage';
 import { formatNumber } from '../../shared/formatters';
 import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
+import { LinearGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { ParentSize } from '@visx/responsive';
 import { tabs } from '../../shared/slots';
@@ -243,6 +244,13 @@ function LineChart({ points, height, width }) {
         ref={containerRef}
         width={width}
       >
+        <LinearGradient
+          from="hsl(var(--app-chart-9))"
+          fromOpacity={0.5}
+          id="area-gradient"
+          to="hsl(var(--app-chart-9))"
+          toOpacity={0}
+        />
         <Group left={margin.left} top={margin.top}>
           <GridRows
             className="opacity-25 [&_line]:stroke-foreground-2"
@@ -251,6 +259,22 @@ function LineChart({ points, height, width }) {
             scale={scaleValue}
             width={state.maxX - margin.right}
           />
+          <AreaClosed
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            fill="url(#area-gradient)"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+            yScale={scaleValue}
+          />
+          <LinePath
+            className="stroke-chart-9 stroke-2"
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            strokeLinecap="butt"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+          />
           <AxisRight
             axisLineClassName="stroke-foreground-2"
             left={state.maxX - margin.right}
@@ -279,13 +303,6 @@ function LineChart({ points, height, width }) {
             }}
             top={state.maxY}
           />
-          <LinePath
-            className="stroke-chart-9 stroke-2"
-            curve={curveMonotoneX}
-            data={state.filteredPoints}
-            x={d => scaleDate(getDate(d)) ?? 0}
-            y={d => scaleValue(getValue(d)) ?? 0}
-          />
           {tooltipOpen && (
             <Circle
               className="cursor-pointer fill-chart-9 stroke-2 dark:stroke-foreground"
diff --git a/src/operators/charts/OperatorTVLLineChart.jsx b/src/operators/charts/OperatorTVLLineChart.jsx
index 3b85b3bd..189f5edd 100644
--- a/src/operators/charts/OperatorTVLLineChart.jsx
+++ b/src/operators/charts/OperatorTVLLineChart.jsx
@@ -1,5 +1,5 @@
+import { AreaClosed, Circle, LinePath } from '@visx/shape';
 import { AxisBottom, AxisRight } from '@visx/axis';
-import { Circle, LinePath } from '@visx/shape';
 import { formatETH, formatNumber, formatUSD } from '../../shared/formatters';
 import {
   getGrowthPercentage,
@@ -15,6 +15,7 @@ import { curveMonotoneX } from '@visx/curve';
 import ErrorMessage from '../../shared/ErrorMessage';
 import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
+import { LinearGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { ParentSize } from '@visx/responsive';
 import { tabs } from '../../shared/slots';
@@ -268,6 +269,13 @@ function LineChart({ points, height, width }) {
         ref={containerRef}
         width={width}
       >
+        <LinearGradient
+          from="hsl(var(--app-chart-9))"
+          fromOpacity={0.5}
+          id="area-gradient"
+          to="hsl(var(--app-chart-9))"
+          toOpacity={0}
+        />
         <Group left={margin.left} top={margin.top}>
           <GridRows
             className="opacity-25 [&_line]:stroke-foreground-2"
@@ -276,6 +284,22 @@ function LineChart({ points, height, width }) {
             scale={scaleValue}
             width={state.maxX - margin.right}
           />
+          <AreaClosed
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            fill="url(#area-gradient)"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+            yScale={scaleValue}
+          />
+          <LinePath
+            className="stroke-chart-9 stroke-2"
+            curve={curveMonotoneX}
+            data={state.filteredPoints}
+            strokeLinecap="butt"
+            x={d => scaleDate(getDate(d)) ?? 0}
+            y={d => scaleValue(getValue(d)) ?? 0}
+          />
           <AxisRight
             axisLineClassName="stroke-foreground-2"
             left={state.maxX - margin.right}
@@ -304,14 +328,6 @@ function LineChart({ points, height, width }) {
             }}
             top={state.maxY}
           />
-          <LinePath
-            className="stroke-chart-9 stroke-2"
-            curve={curveMonotoneX}
-            data={state.filteredPoints}
-            x={d => scaleDate(getDate(d)) ?? 0}
-            y={d => scaleValue(getValue(d)) ?? 0}
-          />
-
           {tooltipOpen && (
             <Circle
               className="cursor-pointer fill-chart-9 stroke-2 dark:stroke-foreground"