diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index b2d9a8b4..1a991ac8 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -78,7 +78,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
-	--validator-active: #85f891;
+	--validator-active: #18d2a5;
 	--validator-inactive: #1ca7ed;
 	--validator-jailed: #f8774a;
 	--supply: #1ca7ed;
diff --git a/components/modules/address/AddressCharts.vue b/components/modules/address/AddressCharts.vue
index 233053bb..c1c102e5 100644
--- a/components/modules/address/AddressCharts.vue
+++ b/components/modules/address/AddressCharts.vue
@@ -1,17 +1,20 @@
 <script setup>
 /** Vendor */
-import * as d3 from "d3"
 import { DateTime } from "luxon"
-import { useDebounceFn } from "@vueuse/core"
 
 /** UI */
 import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Popover from "@/components/ui/Popover.vue"
 import Toggle from "@/components/ui/Toggle.vue"
+import ChartOnEntityPage from "~/components/shared/ChartOnEntityPage.vue"
+import Icon from "@/components/Icon.vue"
+import Text from "@/components/Text.vue"
+import Flex from "@/components/Flex.vue"
 
 /** Services */
 import { abbreviate, tia } from "@/services/utils"
+import { createDataMap, generateSeriesData, PERIODS as periods } from "@/services/utils/entityCharts"
 
 /** API */
 import { fetchAddressSeries } from "@/services/api/stats"
@@ -29,29 +32,7 @@ const props = defineProps({
 
 /** Chart settings */
 const selectedPeriodIdx = ref(2)
-const periods = ref([
-	{
-		title: "Last 24 hours",
-		value: 24,
-		timeframe: "hour",
-	},
-	{
-		title: "Last 7 days",
-		value: 7,
-		timeframe: "day",
-	},
-	{
-		title: "Last 31 days",
-		value: 30,
-		timeframe: "day",
-	},
-	{
-		title: "Last 12 months",
-		value: 12,
-		timeframe: "month",
-	},
-])
-const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+const selectedPeriod = computed(() => periods[selectedPeriodIdx.value])
 const chartView = ref("line")
 const loadLastValue = ref(true)
 
@@ -63,14 +44,6 @@ const handleClose = () => {
 	isOpen.value = false
 }
 
-const handleChangeChartView = () => {
-	if (chartView.value === "line") {
-		chartView.value = "bar"
-	} else {
-		chartView.value = "line"
-	}
-}
-
 const updateUserSettings = () => {
 	settingsStore.chart = {
 		...settingsStore.chart,
@@ -79,348 +52,36 @@ const updateUserSettings = () => {
 	}
 }
 
-/** Charts */
-const chartWrapperEl = useTemplateRef("chartWrapperEl")
-const txSeriesChartEl = useTemplateRef("txSeriesChartEl")
-const feeSeriesChartEl = useTemplateRef("feeSeriesChartEl")
-
 /** Data */
 const isLoading = ref(false)
 const txSeries = ref([])
 const feeSeries = ref([])
 
-/** Tooltip */
-const showTxTooltip = ref(false)
-const showFeeTooltip = ref(false)
-const tooltipEl = ref()
-const tooltipXOffset = ref(0)
-const tooltipYOffset = ref(0)
-const tooltipYDataOffset = ref(0)
-const tooltipDynamicXPosition = ref(0)
-const tooltipText = ref("")
-
-const badgeEl = ref()
-const badgeText = ref("")
-const badgeOffset = ref(0)
-
-const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
-	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
-	const height = 180
-	const marginTop = 0
-	const marginRight = 0
-	const marginBottom = 24
-	const marginLeft = 52
-
-	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
-
-	/** Scale */
-	const x = d3.scaleUtc(
-		d3.extent(data, (d) => d.date),
-		[marginLeft, width - marginRight],
-	)
-	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom - 6, marginTop])
-	const line = d3
-		.line()
-		.x((d) => x(d.date))
-		.y((d) => y(d.value))
-
-	/** Tooltip */
-	const bisect = d3.bisector((d) => d.date).center
-	const onPointermoved = (event) => {
-		onEnter()
-
-		const idx = bisect(data, x.invert(d3.pointer(event)[0]))
-
-		tooltipXOffset.value = x(data[idx].date)
-		tooltipYDataOffset.value = y(data[idx].value)
-		tooltipYOffset.value = event.layerY
-		tooltipText.value = data[idx].value
-
-		if (tooltipEl.value) {
-			if (idx > parseInt(selectedPeriod.value.value / 2)) {
-				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
-			} else {
-				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
-			}
-		}
-
-		let tf = selectedPeriod.value.timeframe
-		if (metric === "tvl" && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
-			tf = "day"
-		}
-		badgeText.value =
-			tf === "month"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
-				: tf === "day"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
-
-		if (!badgeEl.value) return
-		const badgeWidth = badgeEl.value.getBoundingClientRect().width
-		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
-			badgeOffset.value = 0
-		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
-		} else {
-			badgeOffset.value = badgeWidth / 2
-		}
-	}
-	const onPointerleft = () => {
-		onLeave()
-		badgeText.value = ""
-	}
-
-	/** SVG Container */
-	const svg = d3
-		.create("svg")
-		.attr("width", width)
-		.attr("height", height)
-		.attr("viewBox", [0, 0, width, height])
-		.attr("preserveAspectRatio", "none")
-		.attr("style", "max-width: 100%;  height: intrinsic;")
-		.style("-webkit-tap-highlight-color", "transparent")
-		.on("pointerenter pointermove", onPointermoved)
-		.on("pointerleave", onPointerleft)
-		.on("touchstart", (event) => event.preventDefault())
-
-	/** Vertical Lines */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
-
-	/** Default Horizontal Line  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
-	/** Chart Line */
-	let path1 = null
-	let path2 = null
-	path1 = svg
-		.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--brand)")
-		.attr("stroke-width", 2)
-		.attr("stroke-linecap", "round")
-		.attr("stroke-linejoin", "round")
-		.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
-
-	if (loadLastValue.value) {
-		// Create pattern
-		const defs = svg.append("defs")
-		const pattern = defs
-			.append("pattern")
-			.attr("id", "dashedPattern")
-			.attr("width", 8)
-			.attr("height", 2)
-			.attr("patternUnits", "userSpaceOnUse")
-		pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", "var(--brand)")
-		pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
-
-		// Last dash segment
-		path2 = svg
-			.append("path")
-			.attr("fill", "none")
-			.attr("stroke", "url(#dashedPattern)")
-			.attr("stroke-width", 2)
-			.attr("stroke-linecap", "round")
-			.attr("stroke-linejoin", "round")
-			.attr("d", line(data.slice(data.length - 2, data.length)))
-	}
-
-	const totalDuration = 1_000
-	const path1Duration = loadLastValue.value ? (totalDuration / data.length) * (data.length - 1) : totalDuration
-	const path1Length = path1.node().getTotalLength()
-
-	path1
-		.attr("stroke-dasharray", path1Length)
-		.attr("stroke-dashoffset", path1Length)
-		.transition()
-		.duration(path1Duration)
-		.ease(d3.easeLinear)
-		.attr("stroke-dashoffset", 0)
-
-	if (loadLastValue.value) {
-		const path2Duration = totalDuration / data.length
-		const path2Length = path2.node().getTotalLength() + 1
-
-		path2
-			.attr("stroke-dasharray", path2Length)
-			.attr("stroke-dashoffset", path2Length)
-			.transition()
-			.duration(path2Duration)
-			.ease(d3.easeLinear)
-			.delay(path1Duration)
-			.attr("stroke-dashoffset", 0)
-	}
-
-	const point = svg
-		.append("circle")
-		.attr("cx", x(data[data.length - 1].date))
-		.attr("cy", y(data[data.length - 1].value))
-		.attr("fill", "var(--brand)")
-		.attr("r", 3)
-		.attr("opacity", 0)
-
-	point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
-
-	if (chartEl.children[0]) chartEl.children[0].remove()
-	chartEl.append(svg.node())
-}
-
-const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
-	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
-	const height = 180
-	const marginTop = 0
-	const marginRight = 2
-	const marginBottom = 24
-	const marginLeft = 52
-
-	const barWidth = Math.max(Math.round((width - marginLeft - marginRight) / data.length - (data.length > 7 ? 4 : 8)), 4)
-
-	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
-
-	/** Scale */
-	const x = d3.scaleUtc(
-		d3.extent(data, (d) => d.date),
-		[marginLeft, width - marginRight - barWidth],
-	)
-	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom, marginTop])
-
-	/** Tooltip */
-	const bisect = d3.bisector((d) => d.date).center
-	const onPointermoved = (event) => {
-		onEnter()
-
-		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
-
-		const elements = document.querySelectorAll(`[metric="${metric}"]`)
-		elements.forEach((el) => {
-			if (+el.getAttribute("data-index") === idx) {
-				el.style.filter = "brightness(1.2)"
-			} else {
-				el.style.filter = "brightness(0.6)"
-			}
-		})
-
-		tooltipXOffset.value = x(data[idx].date)
-		tooltipYDataOffset.value = y(data[idx].value)
-		tooltipYOffset.value = event.layerY
-		tooltipText.value = data[idx].value
-
-		if (tooltipEl.value) {
-			if (idx > parseInt(selectedPeriod.value.value / 2)) {
-				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
-			} else {
-				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
-			}
-		}
-
-		let tf = selectedPeriod.value.timeframe
-		if (metric === "tvl" && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
-			tf = "day"
-		}
-		badgeText.value =
-			tf === "month"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
-				: tf === "day"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
-
-		if (!badgeEl.value) return
-		const badgeWidth = badgeEl.value.getBoundingClientRect().width
-		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
-			badgeOffset.value = 0
-		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
-		} else {
-			badgeOffset.value = (badgeWidth - barWidth) / 2
-		}
-	}
-	const onPointerleft = () => {
-		onLeave()
-
-		const elements = document.querySelectorAll("[data-index]")
-		elements.forEach((el) => {
-			el.style.filter = ""
-		})
-		badgeText.value = ""
-	}
+/** Series config */
+const seriesConfig = [
+	{
+		name: "tx_count",
+		metric: "tx",
+		series: txSeries,
+		title: "Txs",
+		tooltipLabel: "Txs",
+		yAxisFormatter: abbreviate,
+		tooltipValueFormatter: abbreviate,
+		unit: null,
+	},
+	{
+		name: "fee",
+		metric: "fee",
+		series: feeSeries,
+		title: "Fee Spent",
+		tooltipLabel: "Spent",
+		yAxisFormatter: (val) => (tia(val, 0) > 1 ? tia(val, 0) : tia(val, 2)),
+		tooltipValueFormatter: (val) => tia(val),
+	},
+]
 
-	/** SVG Container */
-	const svg = d3
-		.create("svg")
-		.attr("width", width)
-		.attr("height", height)
-		.attr("viewBox", [0, 0, width, height])
-		.attr("preserveAspectRatio", "none")
-		.attr("style", "max-width: 100%;  height: intrinsic;")
-		.style("-webkit-tap-highlight-color", "transparent")
-		.on("pointerenter pointermove", onPointermoved)
-		.on("pointerleave", onPointerleft)
-		.on("touchstart", (event) => event.preventDefault())
-
-	/** Vertical Lines */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
-
-	/** Default Horizontal Line  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
-	/** Chart Bars */
-	svg.append("defs")
-		.append("pattern")
-		.attr("id", "diagonal-stripe")
-		.attr("width", 6)
-		.attr("height", 6)
-		.attr("patternUnits", "userSpaceOnUse")
-		.attr("patternTransform", "rotate(45)")
-		.append("rect")
-		.attr("width", 2)
-		.attr("height", 6)
-		.attr("transform", "translate(0,0)")
-		.attr("fill", "var(--brand)")
-
-	svg.append("g")
-		.selectAll("g")
-		.data(data)
-		.enter()
-		.append("rect")
-		.attr("class", "bar")
-		.attr("data-index", (d, i) => i)
-		.attr("metric", metric)
-		.attr("x", (d) => x(new Date(d.date)))
-		.attr("y", (d) => y(d.value))
-		.attr("width", barWidth)
-		.attr("fill", (d, i) => (loadLastValue.value && i === data.length - 1 ? `url(#diagonal-stripe)` : "var(--brand)"))
-		.transition()
-		.duration(1_000)
-		.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
-
-	if (chartEl.children[0]) chartEl.children[0].remove()
-	chartEl.append(svg.node())
-}
+const txConfig = computed(() => seriesConfig.find((config) => config.metric === "tx"))
+const feeConfig = computed(() => seriesConfig.find((config) => config.metric === "fee"))
 
 const fetchData = async (metric) => {
 	const data = await fetchAddressSeries({
@@ -438,137 +99,45 @@ const fetchData = async (metric) => {
 
 	return data
 }
-const getTxSeries = async () => {
-	txSeries.value = []
-
-	const txSeriesRawData = await fetchData("tx_count")
-
-	const txSeriesMap = {}
-	txSeriesRawData.forEach((item) => {
-		txSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
 
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		txSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(txSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
-				0,
-		})
-	}
-}
-
-const getFeeSeries = async () => {
-	feeSeries.value = []
-
-	const feeSeriesRawData = await fetchData("fee")
+const generateSeries = async (configs) => {
+	isLoading.value = true
 
-	const feeSeriesMap = {}
-	feeSeriesRawData.forEach((item) => {
-		feeSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
+	await Promise.all(
+		configs.map(async (config) => {
+			const rawData = await fetchData(config.name)
+			const dataMap = createDataMap(rawData, selectedPeriod.value.timeframe)
+			generateSeriesData(selectedPeriod.value, dataMap, config.series)
+		}),
+	)
 
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		feeSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(feeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
-				0,
-		})
-	}
+	isLoading.value = false
 }
 
-const buildCharts = async (loadData = true) => {
-	isLoading.value = true
-	if (loadData) {
-		await getTxSeries()
-		await getFeeSeries()
-	}
-
+const handleChangeChartView = () => {
 	if (chartView.value === "line") {
-		buildLineChart(
-			txSeriesChartEl.value.wrapper,
-			loadLastValue.value ? txSeries.value : txSeries.value.slice(0, txSeries.value.length - 1),
-			() => (showTxTooltip.value = true),
-			() => (showTxTooltip.value = false),
-		)
-		buildLineChart(
-			feeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? feeSeries.value : feeSeries.value.slice(0, feeSeries.value.length - 1),
-			() => (showFeeTooltip.value = true),
-			() => (showFeeTooltip.value = false),
-		)
+		chartView.value = "bar"
 	} else {
-		buildBarChart(
-			txSeriesChartEl.value.wrapper,
-			loadLastValue.value ? txSeries.value : txSeries.value.slice(0, txSeries.value.length - 1),
-			() => (showTxTooltip.value = true),
-			() => (showTxTooltip.value = false),
-			"tx_count",
-		)
-		buildBarChart(
-			feeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? feeSeries.value : feeSeries.value.slice(0, feeSeries.value.length - 1),
-			() => (showFeeTooltip.value = true),
-			() => (showFeeTooltip.value = false),
-			"fee",
-		)
+		chartView.value = "line"
 	}
+}
 
-	isLoading.value = false
+const fetchAllData = async () => {
+	await generateSeries(seriesConfig)
 }
 
 watch(
 	() => selectedPeriodIdx.value,
-	() => {
-		buildCharts()
-	},
+	() => fetchAllData(),
 )
 
 watch(
 	() => [chartView.value, loadLastValue.value],
 	() => {
 		updateUserSettings()
-		if (!isLoading.value) {
-			buildCharts(false)
-		}
 	},
 )
 
-const debouncedRedraw = useDebounceFn((e) => {
-	buildCharts()
-}, 500)
-
 onBeforeMount(() => {
 	isLoading.value = true
 	const settings = JSON.parse(localStorage.getItem("settings"))
@@ -577,13 +146,7 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
-	window.addEventListener("resize", debouncedRedraw)
-
-	buildCharts()
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener("resize", debouncedRedraw)
+	await fetchAllData()
 })
 </script>
 
@@ -659,207 +222,23 @@ onBeforeUnmount(() => {
 
 		<Flex direction="column">
 			<Flex justify="between" gap="32" :class="[$style.data, $style.top]">
-				<Flex direction="column" gap="20" wide>
-					<Text size="13" weight="600" color="primary">Txs</Text>
-
-					<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
-						<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-							<Text
-								v-if="txSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{ opacity: Math.max(...txSeries.map((d) => d.value)) ? 1 : 0 }"
-							>
-								{{ abbreviate(Math.max(...txSeries.map((d) => d.value)), 0) }}
-							</Text>
-							<Skeleton v-else-if="!txSeries.length" w="32" h="12" />
-
-							<Text
-								v-if="txSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{
-									opacity:
-										Math.round(Math.max(...txSeries.map((d) => d.value)) / 2) !==
-										Math.max(...txSeries.map((d) => d.value))
-											? 1
-											: 0,
-								}"
-							>
-								{{ abbreviate(Math.round(Math.max(...txSeries.map((d) => d.value)) / 2), 0) }}
-							</Text>
-							<Skeleton v-else-if="!txSeries.length" w="24" h="12" />
-
-							<Text v-if="txSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-							<Skeleton v-else-if="!txSeries.length" w="16" h="12" />
-						</Flex>
-
-						<Flex :class="[$style.axis, $style.x]">
-							<Flex align="end" justify="between" wide>
-								<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
-									{{
-										DateTime.now()
-											.minus({ days: selectedPeriod.value - 1 })
-											.toFormat("LLL dd")
-									}}
-								</Text>
-								<Text v-else size="12" weight="600" color="tertiary">
-									{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
-								</Text>
-
-								<Text size="12" weight="600" color="tertiary">{{
-									selectedPeriod.timeframe === "day" ? "Today" : "Now"
-								}}</Text>
-							</Flex>
-						</Flex>
-
-						<Transition name="fastfade">
-							<div v-if="showTxTooltip" :class="$style.tooltip_wrapper">
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-									:class="$style.dot"
-								/>
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-									:class="$style.line"
-								/>
-								<div
-									ref="badgeEl"
-									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-									:class="$style.badge"
-								>
-									<Text size="12" weight="600" color="secondary">
-										{{ badgeText }}
-									</Text>
-								</div>
-								<Flex
-									ref="tooltipEl"
-									:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-									direction="column"
-									gap="8"
-									:class="$style.tooltip"
-								>
-									<Flex align="center" gap="16">
-										<Text size="12" weight="600" color="secondary">Txs</Text>
-										<Text size="12" weight="600" color="primary"> {{ tooltipText }} </Text>
-									</Flex>
-								</Flex>
-							</div>
-						</Transition>
-
-						<Flex ref="txSeriesChartEl" :class="$style.chart" />
-					</Flex>
-				</Flex>
-
-				<Flex direction="column" gap="20" wide>
-					<Text size="13" weight="600" color="primary">Fee Spent</Text>
-
-					<Flex direction="column" :class="$style.chart_wrapper_single">
-						<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-							<Text
-								v-if="feeSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{ opacity: Math.max(...feeSeries.map((d) => d.value)) ? 1 : 0 }"
-							>
-								{{
-									tia(Math.max(...feeSeries.map((d) => d.value)), 0) > 1
-										? tia(Math.max(...feeSeries.map((d) => d.value)), 0)
-										: tia(Math.max(...feeSeries.map((d) => d.value)), 2)
-								}}
-								TIA
-							</Text>
-							<Skeleton v-else-if="!feeSeries.length" w="32" h="12" />
-
-							<Text
-								v-if="feeSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{
-									opacity:
-										Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2) !=
-										Math.max(...feeSeries.map((d) => d.value))
-											? 1
-											: 0,
-								}"
-							>
-								{{
-									tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0) > 1
-										? tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0)
-										: tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 2)
-								}}
-								TIA
-							</Text>
-							<Skeleton v-else-if="!feeSeries.length" w="24" h="12" />
-
-							<Text v-if="feeSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-							<Skeleton v-else-if="!feeSeries.length" w="16" h="12" />
-						</Flex>
-
-						<Flex :class="[$style.axis, $style.x]">
-							<Flex align="end" justify="between" wide>
-								<Text v-if="selectedPeriod.timeframe === 'day'" size="12" weight="600" color="tertiary">
-									{{
-										DateTime.now()
-											.minus({ days: selectedPeriod.value - 1 })
-											.toFormat("LLL dd")
-									}}
-								</Text>
-								<Text v-else size="12" weight="600" color="tertiary">
-									{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
-								</Text>
-
-								<Text size="12" weight="600" color="tertiary">{{
-									selectedPeriod.timeframe === "day" ? "Today" : "Now"
-								}}</Text>
-							</Flex>
-						</Flex>
-
-						<Transition name="fastfade">
-							<div v-if="showFeeTooltip" :class="$style.tooltip_wrapper">
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-									:class="$style.dot"
-								/>
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-									:class="$style.line"
-								/>
-								<div
-									ref="badgeEl"
-									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-									:class="$style.badge"
-								>
-									<Text size="12" weight="600" color="secondary">
-										{{ badgeText }}
-									</Text>
-								</div>
-								<Flex
-									ref="tooltipEl"
-									:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-									direction="column"
-									gap="8"
-									:class="$style.tooltip"
-								>
-									<Flex align="center" gap="16">
-										<Text size="12" weight="600" color="secondary">Spent</Text>
-										<Text size="12" weight="600" color="primary"> {{ tia(tooltipText) }} TIA</Text>
-									</Flex>
-								</Flex>
-							</div>
-						</Transition>
-
-						<Flex ref="feeSeriesChartEl" :class="$style.chart" />
-					</Flex>
-				</Flex>
+				<ChartOnEntityPage
+					v-if="txSeries.length"
+					:series-config="txConfig"
+					:chart-view="chartView"
+					:load-last-value="loadLastValue"
+					:selected-period="selectedPeriod"
+					:isLoading="isLoading"
+				/>
+
+				<ChartOnEntityPage
+					v-if="feeSeries.length"
+					:series-config="feeConfig"
+					:chart-view="chartView"
+					:load-last-value="loadLastValue"
+					:selected-period="selectedPeriod"
+					:isLoading="isLoading"
+				/>
 			</Flex>
 		</Flex>
 	</Flex>
diff --git a/components/modules/namespace/NamespaceCharts.vue b/components/modules/namespace/NamespaceCharts.vue
index 56d838bd..ea8cd7e8 100644
--- a/components/modules/namespace/NamespaceCharts.vue
+++ b/components/modules/namespace/NamespaceCharts.vue
@@ -9,9 +9,14 @@ import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Popover from "@/components/ui/Popover.vue"
 import Toggle from "@/components/ui/Toggle.vue"
+import ChartOnEntityPage from "~/components/shared/ChartOnEntityPage.vue"
+import Icon from "@/components/Icon.vue"
+import Text from "@/components/Text.vue"
+import Flex from "@/components/Flex.vue"
 
 /** Services */
 import { abbreviate, formatBytes } from "@/services/utils"
+import { createDataMap, generateDateForPeriod, generateSeriesData, PERIODS as periods } from "@/services/utils/entityCharts"
 
 /** API */
 import { fetchNamespaceSeries } from "@/services/api/stats"
@@ -29,29 +34,7 @@ const props = defineProps({
 
 /** Chart settings */
 const selectedPeriodIdx = ref(2)
-const periods = ref([
-	{
-		title: "Last 24 hours",
-		value: 24,
-		timeframe: "hour",
-	},
-	{
-		title: "Last 7 days",
-		value: 7,
-		timeframe: "day",
-	},
-	{
-		title: "Last 31 days",
-		value: 30,
-		timeframe: "day",
-	},
-	{
-		title: "Last 12 months",
-		value: 12,
-		timeframe: "month",
-	},
-])
-const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+const selectedPeriod = computed(() => periods[selectedPeriodIdx.value])
 const chartView = ref("line")
 const loadLastValue = ref(true)
 
@@ -63,14 +46,6 @@ const handleClose = () => {
 	isOpen.value = false
 }
 
-const handleChangeChartView = () => {
-	if (chartView.value === "line") {
-		chartView.value = "bar"
-	} else {
-		chartView.value = "line"
-	}
-}
-
 const updateUserSettings = () => {
 	settingsStore.chart = {
 		...settingsStore.chart,
@@ -79,523 +54,91 @@ const updateUserSettings = () => {
 	}
 }
 
-/** Charts */
-const chartWrapperEl = ref()
-const sizeSeriesChartEl = ref()
-const pfbSeriesChartEl = ref()
-
 /** Data */
 const isLoading = ref(false)
 const sizeSeries = ref([])
 const pfbSeries = ref([])
 
-/** Tooltip */
-const showSeriesTooltip = ref(false)
-const showPfbTooltip = ref(false)
-const tooltipEl = ref()
-const tooltipXOffset = ref(0)
-const tooltipYOffset = ref(0)
-const tooltipYDataOffset = ref(0)
-const tooltipDynamicXPosition = ref(0)
-const tooltipText = ref("")
-
-const badgeEl = ref()
-const badgeText = ref("")
-const badgeOffset = ref(0)
-
-const xAxisLabels = computed(() => {
-	let labels = {
-		firstDate: "",
-		lastDate: "",
-	}
-
-	switch (selectedPeriod.value.timeframe) {
-		case "month":
-			labels.firstDate = DateTime.now()
-				.minus({ months: selectedPeriod.value.value - 1 })
-				.toFormat("LLL y")
-			labels.lastDate = loadLastValue.value ? DateTime.now().toFormat("LLL") : DateTime.now().minus({ months: 1 }).toFormat("LLL")
-			break
-		case "day":
-			labels.firstDate = DateTime.now()
-				.minus({ days: selectedPeriod.value.value - 1 })
-				.toFormat("LLL dd")
-			labels.lastDate = loadLastValue.value ? "Today" : DateTime.now().minus({ days: 1 }).toFormat("LLL dd")
-			break
-		default:
-			labels.firstDate = DateTime.now()
-				.minus({ hours: selectedPeriod.value.value - 1 })
-				.set({ minutes: 0 })
-				.toFormat("hh:mm a")
-			labels.lastDate = loadLastValue.value ? "Now" : DateTime.now().minus({ hours: 1 }).set({ minutes: 0 }).toFormat("hh:mm a")
-			break
-	}
-
-	return labels
-})
-
-const buildLineChart = (chartEl, data, onEnter, onLeave) => {
-	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
-	const height = 180
-	const marginTop = 0
-	const marginRight = 0
-	const marginBottom = 24
-	const marginLeft = 52
-
-	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
-
-	/** Scale */
-	const x = d3.scaleUtc(
-		d3.extent(data, (d) => d.date),
-		[marginLeft, width - marginRight],
-	)
-	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom - 6, marginTop])
-	const line = d3
-		.line()
-		.x((d) => x(d.date))
-		.y((d) => y(d.value))
-
-	/** Tooltip */
-	const bisect = d3.bisector((d) => d.date).center
-	const onPointermoved = (event) => {
-		onEnter()
-
-		const idx = bisect(data, x.invert(d3.pointer(event)[0]))
-
-		tooltipXOffset.value = x(data[idx].date)
-		tooltipYDataOffset.value = y(data[idx].value)
-		tooltipYOffset.value = event.layerY
-		tooltipText.value = data[idx].value
-
-		if (tooltipEl.value) {
-			if (idx > parseInt(selectedPeriod.value.value / 2)) {
-				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
-			} else {
-				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
-			}
-		}
-
-		badgeText.value =
-			selectedPeriod.value.timeframe === "month"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
-				: selectedPeriod.value.timeframe === "day"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
-
-		if (!badgeEl.value) return
-		const badgeWidth = badgeEl.value.getBoundingClientRect().width
-		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
-			badgeOffset.value = 0
-		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
-		} else {
-			badgeOffset.value = badgeWidth / 2
-		}
-	}
-	const onPointerleft = () => {
-		onLeave()
-		badgeText.value = ""
-	}
-
-	/** SVG Container */
-	const svg = d3
-		.create("svg")
-		.attr("width", width)
-		.attr("height", height)
-		.attr("viewBox", [0, 0, width, height])
-		.attr("preserveAspectRatio", "none")
-		.attr("style", "max-width: 100%;  height: intrinsic;")
-		.style("-webkit-tap-highlight-color", "transparent")
-		.on("pointerenter pointermove", onPointermoved)
-		.on("pointerleave", onPointerleft)
-		.on("touchstart", (event) => event.preventDefault())
-
-	/** Vertical Lines */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
-
-	/** Default Horizontal Line  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
-	/** Chart Line */
-	let path1 = null
-	let path2 = null
-	path1 = svg
-		.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--brand)")
-		.attr("stroke-width", 2)
-		.attr("stroke-linecap", "round")
-		.attr("stroke-linejoin", "round")
-		.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
-
-	if (loadLastValue.value) {
-		// Create pattern
-		const defs = svg.append("defs")
-		const pattern = defs
-			.append("pattern")
-			.attr("id", "dashedPattern")
-			.attr("width", 8)
-			.attr("height", 2)
-			.attr("patternUnits", "userSpaceOnUse")
-		pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", "var(--brand)")
-		pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
-
-		// Last dash segment
-		path2 = svg
-			.append("path")
-			.attr("fill", "none")
-			.attr("stroke", "url(#dashedPattern)")
-			.attr("stroke-width", 2)
-			.attr("stroke-linecap", "round")
-			.attr("stroke-linejoin", "round")
-			.attr("d", line(data.slice(data.length - 2, data.length)))
-	}
-
-	const totalDuration = 1_000
-	const path1Duration = loadLastValue.value ? (totalDuration / data.length) * (data.length - 1) : totalDuration
-	const path1Length = path1.node().getTotalLength()
-
-	path1
-		.attr("stroke-dasharray", path1Length)
-		.attr("stroke-dashoffset", path1Length)
-		.transition()
-		.duration(path1Duration)
-		.ease(d3.easeLinear)
-		.attr("stroke-dashoffset", 0)
-
-	if (loadLastValue.value) {
-		const path2Duration = totalDuration / data.length
-		const path2Length = path2.node().getTotalLength() + 1
-
-		path2
-			.attr("stroke-dasharray", path2Length)
-			.attr("stroke-dashoffset", path2Length)
-			.transition()
-			.duration(path2Duration)
-			.ease(d3.easeLinear)
-			.delay(path1Duration)
-			.attr("stroke-dashoffset", 0)
-	}
-
-	const point = svg
-		.append("circle")
-		.attr("cx", x(data[data.length - 1].date))
-		.attr("cy", y(data[data.length - 1].value))
-		.attr("fill", "var(--brand)")
-		.attr("r", 3)
-		.attr("opacity", 0)
-
-	point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
-
-	if (chartEl.children[0]) chartEl.children[0].remove()
-	chartEl.append(svg.node())
-}
-
-const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
-	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
-	const height = 180
-	const marginTop = 0
-	const marginRight = 2
-	const marginBottom = 24
-	const marginLeft = 52
-
-	const barWidth = Math.max(Math.round((width - marginLeft - marginRight) / data.length - (data.length > 7 ? 4 : 8)), 4)
-
-	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
-
-	/** Scale */
-	const x = d3.scaleUtc(
-		d3.extent(data, (d) => d.date),
-		[marginLeft, width - marginRight - barWidth],
-	)
-	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom, marginTop])
-
-	/** Tooltip */
-	const bisect = d3.bisector((d) => d.date).center
-	const onPointermoved = (event) => {
-		onEnter()
-
-		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
-
-		const elements = document.querySelectorAll(`[metric="${metric}"]`)
-		elements.forEach((el) => {
-			if (+el.getAttribute("data-index") === idx) {
-				el.style.filter = "brightness(1.2)"
-			} else {
-				el.style.filter = "brightness(0.6)"
-			}
-		})
-
-		tooltipXOffset.value = x(data[idx].date)
-		tooltipYDataOffset.value = y(data[idx].value)
-		tooltipYOffset.value = event.layerY
-		tooltipText.value = data[idx].value
-
-		if (tooltipEl.value) {
-			if (idx > parseInt(selectedPeriod.value.value / 2)) {
-				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
-			} else {
-				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
-			}
-		}
-
-		badgeText.value =
-			selectedPeriod.value.timeframe === "month"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
-				: selectedPeriod.value.timeframe === "day"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
-
-		if (!badgeEl.value) return
-		const badgeWidth = badgeEl.value.getBoundingClientRect().width
-		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
-			badgeOffset.value = 0
-		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
-		} else {
-			badgeOffset.value = (badgeWidth - barWidth) / 2
-		}
-	}
-	const onPointerleft = () => {
-		onLeave()
-
-		const elements = document.querySelectorAll("[data-index]")
-		elements.forEach((el) => {
-			el.style.filter = ""
-		})
-		badgeText.value = ""
-	}
+/** Series config */
+const seriesConfig = [
+	{
+		name: "size",
+		metric: "size",
+		series: sizeSeries,
+		title: "DA Usage",
+		tooltipLabel: "Usage",
+		yAxisFormatter: (value) => formatBytes(value, 0),
+		tooltipValueFormatter: formatBytes,
+		unit: null,
+	},
+	{
+		name: "pfb_count",
+		metric: "pfb",
+		series: pfbSeries,
+		title: "Pay For Blobs Count",
+		tooltipLabel: "Count",
+		yAxisFormatter: abbreviate,
+		tooltipValueFormatter: abbreviate,
+		unit: null,
+	},
+]
 
-	/** SVG Container */
-	const svg = d3
-		.create("svg")
-		.attr("width", width)
-		.attr("height", height)
-		.attr("viewBox", [0, 0, width, height])
-		.attr("preserveAspectRatio", "none")
-		.attr("style", "max-width: 100%;  height: intrinsic;")
-		.style("-webkit-tap-highlight-color", "transparent")
-		.on("pointerenter pointermove", onPointermoved)
-		.on("pointerleave", onPointerleft)
-		.on("touchstart", (event) => event.preventDefault())
-
-	/** Vertical Lines */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
-
-	/** Default Horizontal Line  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
-	/** Chart Bars */
-	svg.append("defs")
-		.append("pattern")
-		.attr("id", "diagonal-stripe")
-		.attr("width", 6)
-		.attr("height", 6)
-		.attr("patternUnits", "userSpaceOnUse")
-		.attr("patternTransform", "rotate(45)")
-		.append("rect")
-		.attr("width", 2)
-		.attr("height", 6)
-		.attr("transform", "translate(0,0)")
-		.attr("fill", "var(--brand)")
-
-	svg.append("g")
-		.selectAll("g")
-		.data(data)
-		.enter()
-		.append("rect")
-		.attr("class", "bar")
-		.attr("data-index", (d, i) => i)
-		.attr("metric", metric)
-		.attr("x", (d) => x(new Date(d.date)))
-		.attr("y", (d) => y(d.value))
-		.attr("width", barWidth)
-		.attr("fill", (d, i) => (loadLastValue.value && i === data.length - 1 ? `url(#diagonal-stripe)` : "var(--brand)"))
-		.transition()
-		.duration(1_000)
-		.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
-
-	if (chartEl.children[0]) chartEl.children[0].remove()
-	chartEl.append(svg.node())
-}
+const sizeConfig = computed(() => seriesConfig.find((config) => config.metric === "size"))
+const pfbConfig = computed(() => seriesConfig.find((config) => config.metric === "pfb"))
 
-const fetchData = async (metric, from) => {
-	const data = await fetchNamespaceSeries({
+const fetchData = async (metric) => {
+	return await fetchNamespaceSeries({
 		id: props.id,
 		name: metric,
 		timeframe: selectedPeriod.value.timeframe,
-		from: from
-			? from
-			: parseInt(
-					DateTime.now().minus({
-						days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
-						hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
-						months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
-					}).ts / 1_000,
-			  ),
+		from: parseInt(
+			DateTime.now().minus({
+				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
+			}).ts / 1_000,
+		),
 	})
-
-	return data
-}
-const getSizeSeries = async () => {
-	sizeSeries.value = []
-
-	const sizeSeriesRawData = await fetchData("size")
-
-	const sizeSeriesMap = {}
-	sizeSeriesRawData.forEach((item) => {
-		sizeSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
-
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		sizeSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(
-					sizeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")],
-				) || 0,
-		})
-	}
 }
 
-const getPfbSeries = async () => {
-	pfbSeries.value = []
-
-	const pfbSeriesRawData = await fetchData("pfb_count")
+const generateSeries = async (configs) => {
+	isLoading.value = true
 
-	const pfbSeriesMap = {}
-	pfbSeriesRawData.forEach((item) => {
-		pfbSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
+	await Promise.all(
+		configs.map(async (config) => {
+			const rawData = await fetchData(config.name)
+			const dataMap = createDataMap(rawData, selectedPeriod.value.timeframe)
+			generateSeriesData(selectedPeriod.value, dataMap, config.series)
+		}),
+	)
 
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		pfbSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(pfbSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
-				0,
-		})
-	}
+	isLoading.value = false
 }
 
-const buildNamespaceCharts = async (loadData = true) => {
-	isLoading.value = true
-
-	if (loadData) {
-		await getSizeSeries()
-		await getPfbSeries()
-	}
-
+const handleChangeChartView = () => {
 	if (chartView.value === "line") {
-		buildLineChart(
-			sizeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? sizeSeries.value : sizeSeries.value.slice(0, sizeSeries.value.length - 1),
-			() => (showSeriesTooltip.value = true),
-			() => (showSeriesTooltip.value = false),
-		)
-		buildLineChart(
-			pfbSeriesChartEl.value.wrapper,
-			loadLastValue.value ? pfbSeries.value : pfbSeries.value.slice(0, pfbSeries.value.length - 1),
-			() => (showPfbTooltip.value = true),
-			() => (showPfbTooltip.value = false),
-		)
+		chartView.value = "bar"
 	} else {
-		buildBarChart(
-			sizeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? sizeSeries.value : sizeSeries.value.slice(0, sizeSeries.value.length - 1),
-			() => (showSeriesTooltip.value = true),
-			() => (showSeriesTooltip.value = false),
-			"size",
-		)
-		buildBarChart(
-			pfbSeriesChartEl.value.wrapper,
-			loadLastValue.value ? pfbSeries.value : pfbSeries.value.slice(0, pfbSeries.value.length - 1),
-			() => (showPfbTooltip.value = true),
-			() => (showPfbTooltip.value = false),
-			"pfb",
-		)
+		chartView.value = "line"
 	}
+}
 
-	isLoading.value = false
+const fetchAllData = async () => {
+	await generateSeries(seriesConfig)
 }
 
 watch(
 	() => selectedPeriodIdx.value,
-	() => {
-		buildNamespaceCharts()
-	},
+	() => fetchAllData(),
 )
 
 watch(
 	() => [chartView.value, loadLastValue.value],
 	() => {
 		updateUserSettings()
-		if (!isLoading.value) {
-			buildNamespaceCharts(false)
-		}
 	},
 )
 
-const debouncedRedraw = useDebounceFn((e) => {
-	buildNamespaceCharts()
-}, 500)
-
 onBeforeMount(() => {
 	isLoading.value = true
 	const settings = JSON.parse(localStorage.getItem("settings"))
@@ -604,13 +147,7 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
-	window.addEventListener("resize", debouncedRedraw)
-
-	buildNamespaceCharts()
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener("resize", debouncedRedraw)
+	await fetchAllData()
 })
 </script>
 
@@ -685,182 +222,23 @@ onBeforeUnmount(() => {
 		</Flex>
 
 		<Flex justify="between" gap="32" :class="$style.data">
-			<Flex direction="column" gap="20" wide>
-				<Text size="13" weight="600" color="primary">DA Usage</Text>
-
-				<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
-					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-						<Text
-							v-if="sizeSeries.length"
-							size="12"
-							weight="600"
-							color="tertiary"
-							:style="{ opacity: Math.max(...sizeSeries.map((d) => d.value)) ? 1 : 0 }"
-						>
-							{{ formatBytes(Math.max(...sizeSeries.map((d) => d.value)), 0) }}
-						</Text>
-						<Skeleton v-else-if="!sizeSeries.length" w="32" h="12" />
-
-						<Text
-							v-if="sizeSeries.length"
-							size="12"
-							weight="600"
-							color="tertiary"
-							:style="{
-								opacity:
-									Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2) !==
-									Math.max(...sizeSeries.map((d) => d.value))
-										? 1
-										: 0,
-							}"
-						>
-							{{ formatBytes(Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2), 0) }}
-						</Text>
-						<Skeleton v-else-if="!sizeSeries.length" w="24" h="12" />
-
-						<Text v-if="sizeSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-						<Skeleton v-else-if="!sizeSeries.length" w="16" h="12" />
-					</Flex>
-
-					<Flex :class="[$style.axis, $style.x]">
-						<Flex align="end" justify="between" wide>
-							<Text size="12" weight="600" color="tertiary">
-								{{ xAxisLabels.firstDate }}
-							</Text>
-
-							<Text size="12" weight="600" color="tertiary">
-								{{ xAxisLabels.lastDate }}
-							</Text>
-						</Flex>
-					</Flex>
-
-					<Transition name="fastfade">
-						<div v-if="showSeriesTooltip" :class="$style.tooltip_wrapper">
-							<div
-								v-if="chartView === 'line'"
-								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-								:class="$style.dot"
-							/>
-							<div
-								v-if="chartView === 'line'"
-								:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-								:class="$style.line"
-							/>
-							<div
-								ref="badgeEl"
-								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-								:class="$style.badge"
-							>
-								<Text size="12" weight="600" color="secondary">
-									{{ badgeText }}
-								</Text>
-							</div>
-							<Flex
-								ref="tooltipEl"
-								:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-								direction="column"
-								gap="8"
-								:class="$style.tooltip"
-							>
-								<Flex align="center" gap="16">
-									<Text size="12" weight="600" color="secondary">Usage</Text>
-									<Text size="12" weight="600" color="primary"> {{ formatBytes(tooltipText) }} </Text>
-								</Flex>
-							</Flex>
-						</div>
-					</Transition>
-
-					<Flex ref="sizeSeriesChartEl" :class="$style.chart" />
-				</Flex>
-			</Flex>
-
-			<Flex direction="column" gap="16" wide>
-				<Text size="13" weight="600" color="primary">Pay For Blobs Count</Text>
-
-				<Flex direction="column" :class="$style.chart_wrapper">
-					<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-						<Text
-							v-if="pfbSeries.length"
-							size="12"
-							weight="600"
-							color="tertiary"
-							:style="{ opacity: Math.max(...pfbSeries.map((d) => d.value)) ? 1 : 0 }"
-						>
-							{{ abbreviate(Math.max(...pfbSeries.map((d) => d.value)), 0) }}
-						</Text>
-						<Skeleton v-else-if="!pfbSeries.length" w="32" h="12" />
-
-						<Text
-							v-if="pfbSeries.length"
-							size="12"
-							weight="600"
-							color="tertiary"
-							:style="{
-								opacity:
-									Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2) != Math.max(...pfbSeries.map((d) => d.value))
-										? 1
-										: 0,
-							}"
-						>
-							{{ abbreviate(Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2), 0) }}
-						</Text>
-						<Skeleton v-else-if="!pfbSeries.length" w="24" h="12" />
-
-						<Text v-if="pfbSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-						<Skeleton v-else-if="!pfbSeries.length" w="16" h="12" />
-					</Flex>
-
-					<Flex :class="[$style.axis, $style.x]">
-						<Flex align="end" justify="between" wide>
-							<Text size="12" weight="600" color="tertiary">
-								{{ xAxisLabels.firstDate }}
-							</Text>
-
-							<Text size="12" weight="600" color="tertiary">
-								{{ xAxisLabels.lastDate }}
-							</Text>
-						</Flex>
-					</Flex>
-
-					<Transition name="fastfade">
-						<div v-if="showPfbTooltip" :class="$style.tooltip_wrapper">
-							<div
-								v-if="chartView === 'line'"
-								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-								:class="$style.dot"
-							/>
-							<div
-								v-if="chartView === 'line'"
-								:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-								:class="$style.line"
-							/>
-							<div
-								ref="badgeEl"
-								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-								:class="$style.badge"
-							>
-								<Text size="12" weight="600" color="secondary">
-									{{ badgeText }}
-								</Text>
-							</div>
-							<Flex
-								ref="tooltipEl"
-								:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-								direction="column"
-								gap="8"
-								:class="$style.tooltip"
-							>
-								<Flex align="center" gap="16">
-									<Text size="12" weight="600" color="secondary">Count</Text>
-									<Text size="12" weight="600" color="primary"> {{ abbreviate(tooltipText) }} </Text>
-								</Flex>
-							</Flex>
-						</div>
-					</Transition>
-
-					<Flex ref="pfbSeriesChartEl" :class="$style.chart" />
-				</Flex>
-			</Flex>
+			<ChartOnEntityPage
+				v-if="sizeSeries.length"
+				:series-config="sizeConfig"
+				:chart-view="chartView"
+				:load-last-value="loadLastValue"
+				:selected-period="selectedPeriod"
+				:isLoading="isLoading"
+			/>
+
+			<ChartOnEntityPage
+				v-if="pfbSeries.length"
+				:series-config="pfbConfig"
+				:chart-view="chartView"
+				:load-last-value="loadLastValue"
+				:selected-period="selectedPeriod"
+				:isLoading="isLoading"
+			/>
 		</Flex>
 	</Flex>
 </template>
diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
index a131ea59..b8d90618 100644
--- a/components/modules/rollup/RollupCharts.vue
+++ b/components/modules/rollup/RollupCharts.vue
@@ -1,8 +1,6 @@
 <script setup>
 /** Vendor */
-import * as d3 from "d3"
 import { DateTime } from "luxon"
-import { useDebounceFn } from "@vueuse/core"
 
 /** UI */
 import Button from "@/components/ui/Button.vue"
@@ -11,9 +9,14 @@ import Input from "@/components/ui/Input.vue"
 import Popover from "@/components/ui/Popover.vue"
 import Toggle from "@/components/ui/Toggle.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
+import ChartOnEntityPage from "~/components/shared/ChartOnEntityPage.vue"
+import Icon from "@/components/Icon.vue"
+import Text from "@/components/Text.vue"
+import Flex from "@/components/Flex.vue"
 
 /** Services */
-import { abbreviate, formatBytes, sortArrayOfObjects, spaces, tia } from "@/services/utils"
+import { abbreviate, formatBytes, hexToRgba, sortArrayOfObjects, spaces, tia } from "@/services/utils"
+import { getFormatKey, createDataMap, generateDateForPeriod, generateSeriesData, PERIODS as periods } from "@/services/utils/entityCharts"
 
 /** API */
 import { fetchRollupSeries } from "@/services/api/stats"
@@ -30,31 +33,12 @@ const props = defineProps({
 	},
 })
 
+const rollupColor = ref(hexToRgba(props.rollup.color, 1))
+
 /** Chart settings */
 const selectedPeriodIdx = ref(2)
-const periods = ref([
-	{
-		title: "Last 24 hours",
-		value: 24,
-		timeframe: "hour",
-	},
-	{
-		title: "Last 7 days",
-		value: 7,
-		timeframe: "day",
-	},
-	{
-		title: "Last 31 days",
-		value: 30,
-		timeframe: "day",
-	},
-	{
-		title: "Last 12 months",
-		value: 12,
-		timeframe: "month",
-	},
-])
-const selectedPeriod = computed(() => periods.value[selectedPeriodIdx.value])
+
+const selectedPeriod = computed(() => periods[selectedPeriodIdx.value])
 const chartView = ref("line")
 const loadLastValue = ref(true)
 
@@ -66,14 +50,6 @@ const handleClose = () => {
 	isOpen.value = false
 }
 
-const handleChangeChartView = () => {
-	if (chartView.value === "line") {
-		chartView.value = "bar"
-	} else {
-		chartView.value = "line"
-	}
-}
-
 const updateUserSettings = () => {
 	settingsStore.chart = {
 		...settingsStore.chart,
@@ -83,11 +59,6 @@ const updateUserSettings = () => {
 }
 
 /** Charts */
-const chartWrapperEl = ref()
-const sizeSeriesChartEl = ref()
-const pfbSeriesChartEl = ref()
-const feeSeriesChartEl = ref()
-const tvlSeriesChartEl = ref()
 const comparisonChartEl = ref()
 const comparisonBarWidth = ref(0)
 
@@ -103,413 +74,55 @@ const rollupsList = ref()
 const comparisonData = ref([])
 const selectedRollup = ref()
 
-/** Tooltip */
-const showSeriesTooltip = ref(false)
-const showPfbTooltip = ref(false)
-const showFeeTooltip = ref(false)
-const showTVLTooltip = ref(false)
-const tooltipEl = ref()
-const tooltipXOffset = ref(0)
-const tooltipYOffset = ref(0)
-const tooltipYDataOffset = ref(0)
-const tooltipDynamicXPosition = ref(0)
-const tooltipText = ref("")
-
-const badgeEl = ref()
-const badgeText = ref("")
-const badgeOffset = ref(0)
-
-const getXAxisLabels = (start, tvl = false) => {
-	let res = ""
-
-	let tf = selectedPeriod.value.timeframe
-	let periodValue = selectedPeriod.value.value
-	if (tvl && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
-		tf = "day"
-		periodValue = 30
-	}
-
-	switch (tf) {
-		case "month":
-			start
-				? (res = DateTime.now()
-						.minus({ months: periodValue - 1 })
-						.toFormat("LLL y"))
-				: (res = loadLastValue.value ? DateTime.now().toFormat("LLL") : DateTime.now().minus({ months: 1 }).toFormat("LLL"))
-			break
-		case "day":
-			start
-				? (res = DateTime.now()
-						.minus({ days: periodValue - 1 })
-						.toFormat("LLL dd"))
-				: (res = loadLastValue.value ? "Today" : DateTime.now().minus({ days: 1 }).toFormat("LLL dd"))
-			break
-		default:
-			start
-				? (res = DateTime.now()
-						.minus({ hours: periodValue - 1 })
-						.set({ minutes: 0 })
-						.toFormat("hh:mm a"))
-				: (res = loadLastValue.value ? "Now" : DateTime.now().minus({ hours: 1 }).set({ minutes: 0 }).toFormat("hh:mm a"))
-			break
-	}
-
-	return res
-}
-
-const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
-	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
-	const height = 180
-	const marginTop = 0
-	const marginRight = 0
-	const marginBottom = 24
-	const marginLeft = 52
-
-	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
-
-	/** Scale */
-	const x = d3.scaleUtc(
-		d3.extent(data, (d) => d.date),
-		[marginLeft, width - marginRight],
-	)
-	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom - 6, marginTop])
-	const line = d3
-		.line()
-		.x((d) => x(d.date))
-		.y((d) => y(d.value))
-
-	/** Tooltip */
-	const bisect = d3.bisector((d) => d.date).center
-	const onPointermoved = (event) => {
-		if (!data.length) return
-
-		onEnter()
-
-		const idx = bisect(data, x.invert(d3.pointer(event)[0]))
-
-		tooltipXOffset.value = x(data[idx].date)
-		tooltipYDataOffset.value = y(data[idx].value)
-		tooltipYOffset.value = event.layerY
-		tooltipText.value = data[idx].value
-
-		if (tooltipEl.value) {
-			if (idx > parseInt(selectedPeriod.value.value / 2)) {
-				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
-			} else {
-				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
-			}
-		}
-
-		let tf = selectedPeriod.value.timeframe
-		if (metric === "tvl" && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
-			tf = "day"
-		}
-		badgeText.value =
-			tf === "month"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
-				: tf === "day"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
-
-		if (!badgeEl.value) return
-		const badgeWidth = badgeEl.value.getBoundingClientRect().width
-		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
-			badgeOffset.value = 0
-		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
-		} else {
-			badgeOffset.value = badgeWidth / 2
-		}
-	}
-	const onPointerleft = () => {
-		if (!data.length) return
-
-		onLeave()
-		badgeText.value = ""
-	}
-
-	/** SVG Container */
-	const svg = d3
-		.create("svg")
-		.attr("width", width)
-		.attr("height", height)
-		.attr("viewBox", [0, 0, width, height])
-		.attr("preserveAspectRatio", "none")
-		.attr("style", "max-width: 100%;  height: intrinsic;")
-		.style("-webkit-tap-highlight-color", "transparent")
-		.on("pointerenter pointermove", onPointermoved)
-		.on("pointerleave", onPointerleft)
-		.on("touchstart", (event) => event.preventDefault())
-
-	/** Vertical Lines */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
-
-	/** Default Horizontal Line  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
-	if (data.length) {
-		/** Chart Line */
-		let path1 = null
-		let path2 = null
-		path1 = svg
-			.append("path")
-			.attr("fill", "none")
-			.attr("stroke", "var(--brand)")
-			.attr("stroke-width", 2)
-			.attr("stroke-linecap", "round")
-			.attr("stroke-linejoin", "round")
-			.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
-
-		if (loadLastValue.value) {
-			// Create pattern
-			const defs = svg.append("defs")
-			const pattern = defs
-				.append("pattern")
-				.attr("id", "dashedPattern")
-				.attr("width", 8)
-				.attr("height", 2)
-				.attr("patternUnits", "userSpaceOnUse")
-			pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", "var(--brand)")
-			pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
-
-			// Last dash segment
-			path2 = svg
-				.append("path")
-				.attr("fill", "none")
-				.attr("stroke", "url(#dashedPattern)")
-				.attr("stroke-width", 2)
-				.attr("stroke-linecap", "round")
-				.attr("stroke-linejoin", "round")
-				.attr("d", line(data.slice(data.length - 2, data.length)))
-		}
-
-		const totalDuration = 1_000
-		const path1Duration = loadLastValue.value ? (totalDuration / data.length) * (data.length - 1) : totalDuration
-		const path1Length = path1.node().getTotalLength()
-
-		path1
-			.attr("stroke-dasharray", path1Length)
-			.attr("stroke-dashoffset", path1Length)
-			.transition()
-			.duration(path1Duration)
-			.ease(d3.easeLinear)
-			.attr("stroke-dashoffset", 0)
-
-		if (loadLastValue.value) {
-			const path2Duration = totalDuration / data.length
-			const path2Length = path2.node().getTotalLength() + 1
-
-			path2
-				.attr("stroke-dasharray", path2Length)
-				.attr("stroke-dashoffset", path2Length)
-				.transition()
-				.duration(path2Duration)
-				.ease(d3.easeLinear)
-				.delay(path1Duration)
-				.attr("stroke-dashoffset", 0)
-		}
-
-		const point = svg
-			.append("circle")
-			.attr("cx", x(data[data.length - 1].date))
-			.attr("cy", y(data[data.length - 1].value))
-			.attr("fill", "var(--brand)")
-			.attr("r", 3)
-			.attr("opacity", 0)
-
-		point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
-	} else {
-		svg.append("text")
-			.attr("x", width / 2)
-			.attr("y", height * 0.3)
-			.attr("text-anchor", "middle")
-			.attr("fill", "var(--op-20)")
-			.style("font-size", "14px")
-			.text("No data available for this rollup")
-	}
-
-	if (chartEl.children[0]) chartEl.children[0].remove()
-	chartEl.append(svg.node())
-}
-
-const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
-	const width = chartWrapperEl.value.wrapper.getBoundingClientRect().width
-	const height = 180
-	const marginTop = 0
-	const marginRight = 2
-	const marginBottom = 24
-	const marginLeft = 52
-
-	const barWidth = Math.max(Math.round((width - marginLeft - marginRight) / data.length - (data.length > 7 ? 4 : 8)), 4)
-
-	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
-
-	/** Scale */
-	const x = d3
-		.scaleBand()
-		.domain(data.map(d => d.date))
-		.range([marginLeft, width - marginRight])
-		.padding(0.1)
-
-	const scaleX = d3.scaleUtc(
-		d3.extent(data, (d) => d.date),
-		[marginLeft, width - marginRight - barWidth],
-	)
-
-	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom, marginTop])
-
-	/** Tooltip */
-	const bisect = d3.bisector((d) => d.date).center
-	const onPointermoved = (event) => {
-		if (!data.length) return
-
-		onEnter()
-
-		const idx = bisect(data, scaleX.invert(d3.pointer(event)[0] - barWidth / 2))
-
-		const elements = document.querySelectorAll(`[metric="${metric}"]`)
-		elements.forEach((el) => {
-			if (+el.getAttribute("data-index") === idx) {
-				el.style.filter = "brightness(1.2)"
-			} else {
-				el.style.filter = "brightness(0.6)"
-			}
-		})
-
-		tooltipXOffset.value = scaleX(data[idx].date)
-		tooltipYDataOffset.value = y(data[idx].value)
-		tooltipYOffset.value = event.layerY
-		tooltipText.value = data[idx].value
-
-		if (tooltipEl.value) {
-			if (idx > parseInt(selectedPeriod.value.value / 2)) {
-				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
-			} else {
-				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
-			}
-		}
-
-		let tf = selectedPeriod.value.timeframe
-		if (metric === "tvl" && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
-			tf = "day"
-		}
-		badgeText.value =
-			tf === "month"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
-				: tf === "day"
-				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
-
-		if (!badgeEl.value) return
-		const badgeWidth = badgeEl.value.getBoundingClientRect().width
-		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
-			badgeOffset.value = 0
-		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
-		} else {
-			badgeOffset.value = (badgeWidth - barWidth) / 2
-		}
-	}
-	const onPointerleft = () => {
-		if (!data.length) return
+const seriesConfig = [
+	{
+		name: "size",
+		metric: "size",
+		series: sizeSeries,
+		title: "DA Usage",
+		tooltipLabel: "Usage",
+		yAxisFormatter: (value) => formatBytes(value, 0),
+		tooltipValueFormatter: formatBytes,
+		unit: null,
+	},
+	{
+		name: "blobs_count",
+		metric: "pfb",
+		series: pfbSeries,
+		title: "Blobs Count",
+		tooltipLabel: "Count",
+		yAxisFormatter: (value) => abbreviate(value, 0),
+		tooltipValueFormatter: abbreviate,
+		unit: null,
+	},
+	{
+		name: "fee",
+		metric: "fee",
+		series: feeSeries,
+		title: "Fee spent",
+		tooltipLabel: "Spent",
+		yAxisFormatter: (val) => tia(val, 0),
+		tooltipValueFormatter: tia,
+	},
+	{
+		name: "tvl",
+		metric: "tvl",
+		series: tvlSeries,
+		title: "TVL",
+		tooltipLabel: "TVL",
+		yAxisFormatter: abbreviate,
+		tooltipValueFormatter: abbreviate,
+		unit: "$",
+	},
+]
 
-		onLeave()
+const sizeConfig = computed(() => seriesConfig.find((config) => config.metric === "size"))
 
-		const elements = document.querySelectorAll("[data-index]")
-		elements.forEach((el) => {
-			el.style.filter = ""
-		})
-		badgeText.value = ""
-	}
+const pfbConfig = computed(() => seriesConfig.find((config) => config.metric === "pfb"))
 
-	/** SVG Container */
-	const svg = d3
-		.create("svg")
-		.attr("width", width)
-		.attr("height", height)
-		.attr("viewBox", [0, 0, width, height])
-		.attr("preserveAspectRatio", "none")
-		.attr("style", "max-width: 100%;  height: intrinsic;")
-		.style("-webkit-tap-highlight-color", "transparent")
-		.on("pointerenter pointermove", onPointermoved)
-		.on("pointerleave", onPointerleft)
-		.on("touchstart", (event) => event.preventDefault())
-
-	/** Vertical Lines */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
-
-	/** Default Horizontal Line  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-10)")
-		.attr("stroke-width", 2)
-		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
-	if (data.length) {
-		/** Chart Bars */
-		svg.append("defs")
-			.append("pattern")
-			.attr("id", "diagonal-stripe")
-			.attr("width", 6)
-			.attr("height", 6)
-			.attr("patternUnits", "userSpaceOnUse")
-			.attr("patternTransform", "rotate(45)")
-			.append("rect")
-			.attr("width", 2)
-			.attr("height", 6)
-			.attr("transform", "translate(0,0)")
-			.attr("fill", "var(--brand)")
-
-		svg.append("g")
-			.selectAll("g")
-			.data(data)
-			.enter()
-			.append("rect")
-			.attr("class", "bar")
-			.attr("data-index", (d, i) => i)
-			.attr("metric", metric)
-			.attr("x", (d) => x(new Date(d.date)))
-			.attr("y", (d) => y(d.value))
-			.attr("width", x.bandwidth())
-			.attr("fill", (d, i) => (loadLastValue.value && i === data.length - 1 ? `url(#diagonal-stripe)` : "var(--brand)"))
-			.transition()
-			.duration(1_000)
-			.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
-	} else {
-		svg.append("text")
-			.attr("x", width / 2)
-			.attr("y", height * 0.3)
-			.attr("text-anchor", "middle")
-			.attr("fill", "var(--op-20)")
-			.style("font-size", "14px")
-			.text("No data available for this rollup")
-	}
+const feeConfig = computed(() => seriesConfig.find((config) => config.metric === "fee"))
 
-	if (chartEl.children[0]) chartEl.children[0].remove()
-	chartEl.append(svg.node())
-}
+const tvlConfig = computed(() => seriesConfig.find((config) => config.metric === "tvl"))
 
 const getRollupsList = async () => {
 	const data = await fetchRollups({
@@ -519,190 +132,106 @@ const getRollupsList = async () => {
 	rollupsList.value = sortArrayOfObjects(data, "slug").filter((r) => r.id !== props.rollup.id)
 }
 
-const fetchData = async (rollup, metric, from, timeframe) => {
-	const data = await fetchRollupSeries({
-		id: rollup.id,
-		name: metric,
-		timeframe: timeframe ? timeframe : selectedPeriod.value.timeframe,
-		from: from
-			? from
-			: parseInt(
-					DateTime.now().minus({
-						days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
-						hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
-						months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
-					}).ts / 1_000,
-			  ),
-	})
-
-	return data
-}
-const getSizeSeries = async () => {
-	sizeSeries.value = []
-
-	const sizeSeriesRawData = await fetchData(props.rollup, "size")
-
-	const sizeSeriesMap = {}
-	sizeSeriesRawData.forEach((item) => {
-		sizeSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
-
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		sizeSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(
-					sizeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")],
-				) || 0,
-		})
-	}
-}
-
-const getPfbSeries = async () => {
-	pfbSeries.value = []
-
-	const blobsSeriesRawData = await fetchData(props.rollup, "blobs_count")
-
-	const blobsSeriesMap = {}
-	blobsSeriesRawData.forEach((item) => {
-		blobsSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
-
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		pfbSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(
-					blobsSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")],
-				) || 0,
-		})
-	}
-}
-
-const getFeeSeries = async () => {
-	feeSeries.value = []
-
-	const feeSeriesRawData = await fetchData(props.rollup, "fee")
-
-	const feeSeriesMap = {}
-	feeSeriesRawData.forEach((item) => {
-		feeSeriesMap[
-			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
-		] = item.value
-	})
-
-	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
-		let dt
-		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value - i : 0,
-			})
-		}
-		feeSeries.value.push({
-			date: dt.toJSDate(),
-			value:
-				parseInt(feeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
-				0,
-		})
-	}
-}
-
-const getTVLSeries = async () => {
-	tvlSeries.value = []
-	if (!selectedTvlDataSource.value?.name) return
+const fetchTVLData = async () => {
+	if (!selectedTvlDataSource.value) return []
 
-	isLoading.value = true
 	let from = ""
 	let tf = selectedPeriod.value.timeframe
 	let periodValue = selectedPeriod.value.value
-	if (["hour", "week"].includes(selectedPeriod.value.timeframe)) {
+
+	if (["hour", "week"].includes(tf)) {
 		from = parseInt(DateTime.now().minus({ days: 30 }).ts / 1_000)
 		tf = "day"
 		periodValue = 30
 	}
 
-	const tvlSeriesRawData = await fetchRollupTVL({
+	return await fetchRollupTVL({
 		dataSource: selectedTvlDataSource.value?.name,
 		slug: props.rollup.slug,
 		period: tf,
 		from,
 	})
+}
 
-	const tvlSeriesMap = {}
-	tvlSeriesRawData.forEach((item) => {
-		tvlSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(tf) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+const fetchData = async (rollup, metric) => {
+	return await fetchRollupSeries({
+		id: rollup.id,
+		name: metric,
+		timeframe: selectedPeriod.value.timeframe,
+		from: parseInt(
+			DateTime.now().minus({
+				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
+			}).ts / 1_000,
+		),
 	})
+}
+
+const generateSeries = async (configs) => {
+	await Promise.all(
+		configs.map(async (config) => {
+			const rawData = await fetchData(props.rollup, config.name)
+			const dataMap = createDataMap(rawData, selectedPeriod.value.timeframe)
+
+			generateSeriesData(selectedPeriod.value, dataMap, config.series)
+		}),
+	)
+}
+
+const generateTVLSeriesData = (period, dataMap, series) => {
+	series.value = []
+
+	let tf = period.timeframe
+	let periodValue = period.value
+
+	if (["hour", "week"].includes(period.timeframe)) {
+		tf = "day"
+		periodValue = 30
+	}
 
 	for (let i = 1; i < periodValue + 1; i++) {
-		let dt
-		if (tf === "month") {
-			dt = DateTime.now()
-				.startOf("month")
-				.minus({
-					months: tf === "month" ? periodValue - i : 0,
-				})
-		} else {
-			dt = DateTime.now().minus({
-				days: tf === "day" ? periodValue - i : 0,
-				hours: tf === "hour" ? periodValue - i : 0,
-			})
-		}
-		tvlSeries.value.push({
+		const dt = generateDateForPeriod({ timeframe: tf, value: periodValue }, i)
+		const formatKey = getFormatKey(tf)
+		const key = dt.toFormat(formatKey)
+
+		series.value.push({
 			date: dt.toJSDate(),
-			value: parseFloat(tvlSeriesMap[dt.toFormat(["day", "month"].includes(tf) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value: parseFloat(dataMap[key]) || 0,
 		})
 	}
+}
 
-	isLoading.value = false
+const generateTVLSeries = async (configs) => {
+	await Promise.all(
+		configs.map(async (config) => {
+			const rawData = await fetchTVLData()
+			const dataMap = createDataMap(rawData, selectedPeriod.value.timeframe)
+
+			generateTVLSeriesData(selectedPeriod.value, dataMap, config.series)
+		}),
+	)
 }
+
 const isTvlDataSourcePopoverOpen = ref(false)
+
 const handleTvlDataSourcePopoverClose = () => {
 	isTvlDataSourcePopoverOpen.value = false
 }
+
 const handleSelectTvlDataSource = (ds) => {
 	selectedTvlDataSource.value = ds
 	isTvlDataSourcePopoverOpen.value = false
 }
 
-const prepareComparisonData = async () => {
-	isLoading.value = true
+const prepareComparisonData = async (fetchFunction) => {
+	comparisonData.value[1] = {}
+
+	comparisonBarWidth.value = comparisonChartEl.value.wrapper.getBoundingClientRect().width
+	await getRollupsList()
+	if (!selectedRollup.value) {
+		selectedRollup.value = rollupsList.value[0]
+	}
 
 	if (!comparisonData.value[0]?.fee) {
 		comparisonData.value[0] = {
@@ -726,12 +255,11 @@ const prepareComparisonData = async () => {
 
 	let firstRollup = comparisonData.value[0]
 	let secondRollup = comparisonData.value[1]
+
 	Object.keys(firstRollup).forEach((el) => {
 		let sum = firstRollup[el] + secondRollup[el]
 		firstRollup[el + "_graph"] = Math.max(Math.round((firstRollup[el] / sum) * 100, 2), 1)
 	})
-
-	isLoading.value = false
 }
 
 const isRollupPopoverOpen = ref(false)
@@ -750,101 +278,36 @@ const filteredRollupsList = computed(() => {
 	return rollupsList.value.filter((r) => r.name.toLowerCase().includes(searchTerm.value.trim().toLowerCase()))
 })
 
-const buildRollupCharts = async (loadData = true) => {
-	isLoading.value = true
-
-	if (loadData) {
-		await getRollupsList()
-		if (!selectedRollup.value) {
-			selectedRollup.value = rollupsList.value[0]
-		}
-
-		comparisonBarWidth.value = comparisonChartEl.value.wrapper.getBoundingClientRect().width
-
-		await getSizeSeries()
-		await getPfbSeries()
-		await getFeeSeries()
-		await getTVLSeries()
-	}
-
+const handleChangeChartView = () => {
 	if (chartView.value === "line") {
-		buildLineChart(
-			sizeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? sizeSeries.value : sizeSeries.value.slice(0, sizeSeries.value.length - 1),
-			() => (showSeriesTooltip.value = true),
-			() => (showSeriesTooltip.value = false),
-		)
-		buildLineChart(
-			pfbSeriesChartEl.value.wrapper,
-			loadLastValue.value ? pfbSeries.value : pfbSeries.value.slice(0, pfbSeries.value.length - 1),
-			() => (showPfbTooltip.value = true),
-			() => (showPfbTooltip.value = false),
-		)
-		buildLineChart(
-			feeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? feeSeries.value : feeSeries.value.slice(0, feeSeries.value.length - 1),
-			() => (showFeeTooltip.value = true),
-			() => (showFeeTooltip.value = false),
-		)
-		buildLineChart(
-			tvlSeriesChartEl.value.wrapper,
-			loadLastValue.value ? tvlSeries.value : tvlSeries.value.slice(0, tvlSeries.value.length - 1),
-			() => (showTVLTooltip.value = true),
-			() => (showTVLTooltip.value = false),
-			"tvl",
-		)
+		chartView.value = "bar"
 	} else {
-		buildBarChart(
-			sizeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? sizeSeries.value : sizeSeries.value.slice(0, sizeSeries.value.length - 1),
-			() => (showSeriesTooltip.value = true),
-			() => (showSeriesTooltip.value = false),
-			"size",
-		)
-		buildBarChart(
-			pfbSeriesChartEl.value.wrapper,
-			loadLastValue.value ? pfbSeries.value : pfbSeries.value.slice(0, pfbSeries.value.length - 1),
-			() => (showPfbTooltip.value = true),
-			() => (showPfbTooltip.value = false),
-			"pfb",
-		)
-		buildBarChart(
-			feeSeriesChartEl.value.wrapper,
-			loadLastValue.value ? feeSeries.value : feeSeries.value.slice(0, feeSeries.value.length - 1),
-			() => (showFeeTooltip.value = true),
-			() => (showFeeTooltip.value = false),
-			"fee",
-		)
-		buildBarChart(
-			tvlSeriesChartEl.value.wrapper,
-			loadLastValue.value ? tvlSeries.value : tvlSeries.value.slice(0, tvlSeries.value.length - 1),
-			() => (showTVLTooltip.value = true),
-			() => (showTVLTooltip.value = false),
-			"tvl",
-		)
+		chartView.value = "line"
 	}
+}
+
+const fetchAllData = async () => {
+	isLoading.value = true
 
-	await prepareComparisonData()
+	comparisonData.value[0] = {}
+	comparisonData.value[1] = {}
+
+	await generateSeries(seriesConfig.filter((el) => el.metric !== "tvl"))
+	await generateTVLSeries(seriesConfig.filter((el) => el.metric === "tvl"))
+	await prepareComparisonData(fetchRollupSeries)
 
 	isLoading.value = false
 }
 
 watch(
 	() => selectedPeriodIdx.value,
-	() => {
-		comparisonData.value[0] = {}
-		comparisonData.value[1] = {}
-		buildRollupCharts()
-	},
+	() => fetchAllData(),
 )
 
 watch(
 	() => [chartView.value, loadLastValue.value],
 	() => {
 		updateUserSettings()
-		if (!isLoading.value) {
-			buildRollupCharts(false)
-		}
 	},
 )
 
@@ -853,41 +316,25 @@ watch(
 	() => {
 		if (!isLoading.value) {
 			comparisonData.value[1] = {}
-			prepareComparisonData()
+			prepareComparisonData(fetchRollupSeries)
 		}
 	},
 )
 
 watch(
 	() => selectedTvlDataSource.value,
-	async () => {
-		if (!isLoading.value) {
-			await getTVLSeries()
-			if (chartView.value === "line") {
-				buildLineChart(
-					tvlSeriesChartEl.value.wrapper,
-					loadLastValue.value ? tvlSeries.value : tvlSeries.value.slice(0, tvlSeries.value.length - 1),
-					() => (showTVLTooltip.value = true),
-					() => (showTVLTooltip.value = false),
-					"tvl",
-				)
-			} else {
-				buildBarChart(
-					tvlSeriesChartEl.value.wrapper,
-					loadLastValue.value ? tvlSeries.value : tvlSeries.value.slice(0, tvlSeries.value.length - 1),
-					() => (showTVLTooltip.value = true),
-					() => (showTVLTooltip.value = false),
-					"tvl",
-				)
-			}
+	async (newDataSource, oldDataSource) => {
+		isLoading.value = true
+
+		if (oldDataSource && newDataSource?.name !== oldDataSource?.name) {
+			await generateTVLSeries([seriesConfig.find((el) => el.metric === "tvl")])
 		}
+
+		isLoading.value = false
 	},
+	{ deep: true },
 )
 
-const debouncedRedraw = useDebounceFn((e) => {
-	buildRollupCharts()
-}, 500)
-
 onBeforeMount(() => {
 	isLoading.value = true
 	const settings = JSON.parse(localStorage.getItem("settings"))
@@ -896,26 +343,21 @@ onBeforeMount(() => {
 })
 
 onMounted(async () => {
-	window.addEventListener("resize", debouncedRedraw)
-
 	if (props.rollup["l2_beat"]) {
-		tvlDataSources.value.push({ name: "l2beat", title: "L2Beat"})
+		tvlDataSources.value.push({ name: "l2beat", title: "L2Beat" })
 	}
 	if (props.rollup["defi_lama"]) {
-		tvlDataSources.value.push({ name: "llama", title: "Defi Llama"})
+		tvlDataSources.value.push({ name: "llama", title: "Defi Llama" })
 	}
 	selectedTvlDataSource.value = tvlDataSources.value[0]
 
-	buildRollupCharts()
-})
-
-onBeforeUnmount(() => {
-	window.removeEventListener("resize", debouncedRedraw)
+	await fetchAllData()
 })
 </script>
 
 <template>
 	<Flex direction="column" gap="4">
+		<!-- Header -->
 		<Flex align="center" justify="between" :class="$style.header">
 			<Flex align="center" gap="8">
 				<Icon name="chart" size="14" color="primary" />
@@ -986,292 +428,58 @@ onBeforeUnmount(() => {
 
 		<Flex direction="column">
 			<Flex justify="between" gap="32" :class="[$style.data, $style.top]">
-				<Flex direction="column" gap="20" wide>
-					<Text size="13" weight="600" color="primary">DA Usage</Text>
-
-					<Flex ref="chartWrapperEl" direction="column" :class="$style.chart_wrapper">
-						<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-							<Text
-								v-if="sizeSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{ opacity: Math.max(...sizeSeries.map((d) => d.value)) ? 1 : 0 }"
-							>
-								{{ formatBytes(Math.max(...sizeSeries.map((d) => d.value)), 0) }}
-							</Text>
-							<Skeleton v-else-if="!sizeSeries.length" w="32" h="12" />
-
-							<Text
-								v-if="sizeSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{
-									opacity:
-										Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2) !==
-										Math.max(...sizeSeries.map((d) => d.value))
-											? 1
-											: 0,
-								}"
-							>
-								{{ formatBytes(Math.round(Math.max(...sizeSeries.map((d) => d.value)) / 2), 0) }}
-							</Text>
-							<Skeleton v-else-if="!sizeSeries.length" w="24" h="12" />
-
-							<Text v-if="sizeSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-							<Skeleton v-else-if="!sizeSeries.length" w="16" h="12" />
-						</Flex>
-
-						<Flex :class="[$style.axis, $style.x]">
-							<Flex align="end" justify="between" wide>
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(true) }}
-								</Text>
-
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(false) }}
-								</Text>
-							</Flex>
-						</Flex>
-
-						<Transition name="fastfade">
-							<div v-if="showSeriesTooltip" :class="$style.tooltip_wrapper">
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-									:class="$style.dot"
-								/>
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-									:class="$style.line"
-								/>
-								<div
-									ref="badgeEl"
-									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-									:class="$style.badge"
-								>
-									<Text size="12" weight="600" color="secondary">
-										{{ badgeText }}
-									</Text>
-								</div>
-								<Flex
-									ref="tooltipEl"
-									:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-									direction="column"
-									gap="8"
-									:class="$style.tooltip"
-								>
-									<Flex align="center" gap="16">
-										<Text size="12" weight="600" color="secondary">Usage</Text>
-										<Text size="12" weight="600" color="primary"> {{ formatBytes(tooltipText) }} </Text>
-									</Flex>
-								</Flex>
-							</div>
-						</Transition>
-
-						<Flex ref="sizeSeriesChartEl" :class="$style.chart" />
-					</Flex>
-				</Flex>
-
-				<Flex direction="column" gap="20" wide>
-					<Text size="13" weight="600" color="primary">Blobs Count</Text>
-
-					<Flex direction="column" :class="$style.chart_wrapper">
-						<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-							<Text
-								v-if="pfbSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{ opacity: Math.max(...pfbSeries.map((d) => d.value)) ? 1 : 0 }"
-							>
-								{{ abbreviate(Math.max(...pfbSeries.map((d) => d.value)), 0) }}
-							</Text>
-							<Skeleton v-else-if="!pfbSeries.length" w="32" h="12" />
-
-							<Text
-								v-if="pfbSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{
-									opacity:
-										Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2) !=
-										Math.max(...pfbSeries.map((d) => d.value))
-											? 1
-											: 0,
-								}"
-							>
-								{{ abbreviate(Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2), 0) }}
-							</Text>
-							<Skeleton v-else-if="!pfbSeries.length" w="24" h="12" />
-
-							<Text v-if="pfbSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-							<Skeleton v-else-if="!pfbSeries.length" w="16" h="12" />
-						</Flex>
-
-						<Flex :class="[$style.axis, $style.x]">
-							<Flex align="end" justify="between" wide>
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(true) }}
-								</Text>
-
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(false) }}
-								</Text>
-							</Flex>
-						</Flex>
-
-						<Transition name="fastfade">
-							<div v-if="showPfbTooltip" :class="$style.tooltip_wrapper">
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-									:class="$style.dot"
-								/>
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-									:class="$style.line"
-								/>
-								<div
-									ref="badgeEl"
-									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-									:class="$style.badge"
-								>
-									<Text size="12" weight="600" color="secondary">
-										{{ badgeText }}
-									</Text>
-								</div>
-								<Flex
-									ref="tooltipEl"
-									:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-									direction="column"
-									gap="8"
-									:class="$style.tooltip"
-								>
-									<Flex align="center" gap="16">
-										<Text size="12" weight="600" color="secondary">Count</Text>
-										<Text size="12" weight="600" color="primary"> {{ abbreviate(tooltipText) }} </Text>
-									</Flex>
-								</Flex>
-							</div>
-						</Transition>
-
-						<Flex ref="pfbSeriesChartEl" :class="$style.chart" />
-					</Flex>
-				</Flex>
+				<ChartOnEntityPage
+					v-if="sizeSeries.length"
+					:series-config="sizeConfig"
+					:chart-view="chartView"
+					:color="rollupColor"
+					:load-last-value="loadLastValue"
+					:selected-period="selectedPeriod"
+					:isLoading="isLoading"
+				/>
+
+				<ChartOnEntityPage
+					v-if="pfbSeries.length"
+					:series-config="pfbConfig"
+					:chart-view="chartView"
+					:color="rollupColor"
+					:load-last-value="loadLastValue"
+					:selected-period="selectedPeriod"
+					:isLoading="isLoading"
+				/>
 			</Flex>
 
 			<Flex justify="between" gap="32" :class="$style.data">
-				<Flex direction="column" gap="20" wide>
-					<Text size="13" weight="600" color="primary">Fee Spent</Text>
-
-					<Flex direction="column" :class="$style.chart_wrapper">
-						<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-							<Text
-								v-if="feeSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{ opacity: Math.max(...feeSeries.map((d) => d.value)) ? 1 : 0 }"
-							>
-								{{
-									tia(Math.max(...feeSeries.map((d) => d.value)), 0) > 1
-										? tia(Math.max(...feeSeries.map((d) => d.value)), 0)
-										: tia(Math.max(...feeSeries.map((d) => d.value)), 2)
-								}}
-								TIA
-							</Text>
-							<Skeleton v-else-if="!feeSeries.length" w="32" h="12" />
-
-							<Text
-								v-if="feeSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{
-									opacity:
-										Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2) !=
-										Math.max(...feeSeries.map((d) => d.value))
-											? 1
-											: 0,
-								}"
-							>
-								{{
-									tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0) > 1
-										? tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0)
-										: tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 2)
-								}}
-								TIA
-							</Text>
-							<Skeleton v-else-if="!feeSeries.length" w="24" h="12" />
-
-							<Text v-if="feeSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-							<Skeleton v-else-if="!feeSeries.length" w="16" h="12" />
-						</Flex>
-
-						<Flex :class="[$style.axis, $style.x]">
-							<Flex align="end" justify="between" wide>
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(true) }}
-								</Text>
-
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(false) }}
-								</Text>
-							</Flex>
-						</Flex>
-
-						<Transition name="fastfade">
-							<div v-if="showFeeTooltip" :class="$style.tooltip_wrapper">
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-									:class="$style.dot"
-								/>
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-									:class="$style.line"
-								/>
-								<div
-									ref="badgeEl"
-									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-									:class="$style.badge"
-								>
-									<Text size="12" weight="600" color="secondary">
-										{{ badgeText }}
-									</Text>
-								</div>
-								<Flex
-									ref="tooltipEl"
-									:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-									direction="column"
-									gap="8"
-									:class="$style.tooltip"
-								>
-									<Flex align="center" gap="16">
-										<Text size="12" weight="600" color="secondary">Spent</Text>
-										<Text size="12" weight="600" color="primary"> {{ tia(tooltipText) }} TIA</Text>
-									</Flex>
-								</Flex>
-							</div>
-						</Transition>
-
-						<Flex ref="feeSeriesChartEl" :class="$style.chart" />
-					</Flex>
-				</Flex>
-
-				<Flex direction="column" :gap="tvlSeries.length ? 12 : 20" wide>
-					<Flex align="center" justify="between">
+				<ChartOnEntityPage
+					v-if="feeSeries.length"
+					:series-config="feeConfig"
+					:chart-view="chartView"
+					:color="rollupColor"
+					:load-last-value="loadLastValue"
+					:selected-period="selectedPeriod"
+					:isLoading="isLoading"
+				/>
+
+				<ChartOnEntityPage
+					v-if="tvlSeries.length"
+					:series-config="tvlConfig"
+					:chart-view="chartView"
+					:color="rollupColor"
+					:load-last-value="loadLastValue"
+					:selected-period="selectedPeriod"
+					:isLoading="isLoading"
+				>
+					<template #header-content>
 						<Flex align="center" gap="8">
-							<Text size="13" weight="600" color="primary">TVL</Text>
-
 							<Text v-if="tvlSeries.length" size="13" weight="600" color="brand">
-								{{ `${abbreviate(tvlSeries[tvlSeries.length - 1].value ? tvlSeries[tvlSeries.length - 1].value : tvlSeries[tvlSeries.length - 2].value, 2)} USD` }}
+								{{
+									`${abbreviate(
+										tvlSeries[tvlSeries.length - 1].value
+											? tvlSeries[tvlSeries.length - 1].value
+											: tvlSeries[tvlSeries.length - 2].value,
+										2,
+									)} USD`
+								}}
 							</Text>
 
 							<Tooltip v-if="tvlSeries.length" position="end">
@@ -1279,158 +487,76 @@ onBeforeUnmount(() => {
 
 								<template #content>
 									<Flex align="center" :style="{ width: '160px' }">
-										<Text size="12" color="secondary" :style="{ lineHeight: '1.2' }"> Grouping by day or month is only available for this chart. </Text>
+										<Text size="12" color="secondary" :style="{ lineHeight: '1.2' }">
+											Grouping by day or month is only available for this chart.
+										</Text>
 									</Flex>
 								</template>
 							</Tooltip>
 						</Flex>
-
-						<Popover v-if="selectedTvlDataSource" :open="isTvlDataSourcePopoverOpen" @on-close="handleTvlDataSourcePopoverClose" side="right" width="180">
-							<Flex
-								@click="isTvlDataSourcePopoverOpen = true"
-								align="center"
-								justify="between"
-								gap="12"
-								:class="[$style.popover_header, isTvlDataSourcePopoverOpen && $style.popover_header_active]"
+					</template>
+					<template #header-actions>
+						<Flex align="center" gap="8">
+							<Popover
+								v-if="selectedTvlDataSource"
+								:open="isTvlDataSourcePopoverOpen"
+								@on-close="handleTvlDataSourcePopoverClose"
+								side="right"
+								width="180"
 							>
-								<Flex align="center" gap="8">
-									<Icon :name="selectedTvlDataSource?.name" size="13" color="brand" />
+								<Flex
+									@click="isTvlDataSourcePopoverOpen = true"
+									align="center"
+									justify="between"
+									gap="12"
+									:class="[$style.popover_header, isTvlDataSourcePopoverOpen && $style.popover_header_active]"
+								>
+									<Flex align="center" gap="8">
+										<Icon :name="selectedTvlDataSource?.name" size="13" color="brand" />
+
+										<Text size="13" color="primary"> {{ selectedTvlDataSource?.title }} </Text>
+									</Flex>
 
-									<Text size="13" color="primary"> {{ selectedTvlDataSource?.title }} </Text>
+									<Icon
+										name="chevron"
+										size="14"
+										color="secondary"
+										:style="{
+											transform: `rotate(${isTvlDataSourcePopoverOpen ? '180' : '0'}deg)`,
+											transition: 'all 0.25s ease',
+										}"
+									/>
 								</Flex>
 
-								<Icon
-									name="chevron"
-									size="14"
-									color="secondary"
-									:style="{ transform: `rotate(${isTvlDataSourcePopoverOpen ? '180' : '0'}deg)`, transition: 'all 0.25s ease' }"
-								/>
-							</Flex>
+								<template #content>
+									<Flex direction="column" justify="center" gap="12">
+										<Text size="12" weight="600" color="secondary">Select TVL Data Source</Text>
 
-							<template #content>
-								<Flex direction="column" justify="center" gap="12">
-									<Text size="12" weight="600" color="secondary">Select TVL Data Source</Text>
+										<Flex direction="column" gap="4" :class="$style.popover_list">
+											<Flex
+												v-for="ds in tvlDataSources"
+												@click="handleSelectTvlDataSource(ds)"
+												align="center"
+												justify="between"
+												gap="4"
+												:class="$style.popover_list_item"
+											>
+												<Flex align="center" gap="8">
+													<Icon :name="ds.name" size="13" color="secondary" />
 
-									<Flex direction="column" gap="4" :class="$style.popover_list">
-										<Flex
-											v-for="ds in tvlDataSources"
-											@click="handleSelectTvlDataSource(ds)"
-											align="center"
-											justify="between"
-											gap="4"
-											:class="$style.popover_list_item"
-										>
-											<Flex align="center" gap="8">
-												<Icon :name="ds.name" size="13" color="secondary" />
-
-												<Text size="12" color="primary"> {{ ds.title }} </Text>
-											</Flex>
+													<Text size="12" color="primary"> {{ ds.title }} </Text>
+												</Flex>
 
-											<Icon v-if="selectedTvlDataSource.name === ds.name" name="check" size="14" color="brand" />
+												<Icon v-if="selectedTvlDataSource.name === ds.name" name="check" size="14" color="brand" />
+											</Flex>
 										</Flex>
 									</Flex>
-								</Flex>
-							</template>
-						</Popover>
-					</Flex>
-
-					<Flex direction="column" :class="$style.chart_wrapper">
-						<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
-							<Text
-								v-if="tvlSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{ opacity: Math.max(...tvlSeries.map((d) => d.value)) ? 1 : 0 }"
-							>
-								{{
-									Math.max(...tvlSeries.map((d) => d.value)) < 1_000_000
-										? abbreviate(Math.max(...tvlSeries.map((d) => d.value)), 0)
-										: abbreviate(Math.max(...tvlSeries.map((d) => d.value)))
-								}}
-								$
-							</Text>
-							<Skeleton v-else-if="!tvlSeries.length && isLoading" w="32" h="12" />
-
-							<Text
-								v-if="tvlSeries.length"
-								size="12"
-								weight="600"
-								color="tertiary"
-								:style="{
-									opacity:
-										Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2) !=
-										Math.max(...tvlSeries.map((d) => d.value))
-											? 1
-											: 0,
-								}"
-							>
-								{{
-									Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2) < 1_000_000
-										? abbreviate(Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2), 0)
-										: abbreviate(Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2))
-								}}
-								$
-							</Text>
-							<Skeleton v-else-if="!tvlSeries.length && isLoading" w="24" h="12" />
-
-							<Text v-if="tvlSeries.length" size="12" weight="600" color="tertiary"> 0 </Text>
-							<Skeleton v-else-if="!tvlSeries.length && isLoading" w="16" h="12" />
-						</Flex>
-
-						<Flex :class="[$style.axis, $style.x]">
-							<Flex align="end" justify="between" wide>
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(true, true) }}
-								</Text>
-
-								<Text size="12" weight="600" color="tertiary">
-									{{ getXAxisLabels(false, true) }}
-								</Text>
-							</Flex>
+								</template>
+							</Popover>
 						</Flex>
-
-						<Transition name="fastfade">
-							<div v-if="showTVLTooltip" :class="$style.tooltip_wrapper">
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
-									:class="$style.dot"
-								/>
-								<div
-									v-if="chartView === 'line'"
-									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
-									:class="$style.line"
-								/>
-								<div
-									ref="badgeEl"
-									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
-									:class="$style.badge"
-								>
-									<Text size="12" weight="600" color="secondary">
-										{{ badgeText }}
-									</Text>
-								</div>
-								<Flex
-									ref="tooltipEl"
-									:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYDataOffset - 40}px)` }"
-									direction="column"
-									gap="8"
-									:class="$style.tooltip"
-								>
-									<Flex align="center" gap="16">
-										<!-- <Text size="12" weight="600" color="secondary">Spent</Text> -->
-										<Text size="12" weight="600" color="primary"> {{ abbreviate(tooltipText) }} $</Text>
-									</Flex>
-								</Flex>
-							</div>
-						</Transition>
-
-						<Flex ref="tvlSeriesChartEl" :class="$style.chart" />
-					</Flex>
-				</Flex>
+					</template>
+				</ChartOnEntityPage>
 			</Flex>
-
 			<Flex justify="between" gap="32" :class="[$style.data, $style.bottom]">
 				<Flex ref="comparisonChartEl" direction="column" gap="12" :style="{ minHeight: '207px' }">
 					<Flex align="center" justify="between">
@@ -1505,7 +631,7 @@ onBeforeUnmount(() => {
 									:class="$style.graph_bar"
 									:style="{
 										width: `${comparisonData[0]?.size_graph}%`,
-										background: 'var(--mint)',
+										background: rollupColor,
 										marginRight: '4px',
 									}"
 								></div>
@@ -1533,7 +659,7 @@ onBeforeUnmount(() => {
 									:class="$style.graph_bar"
 									:style="{
 										width: `${comparisonData[0]?.pfb_graph}%`,
-										background: 'var(--mint)',
+										background: rollupColor,
 										marginRight: '4px',
 									}"
 								></div>
@@ -1561,7 +687,7 @@ onBeforeUnmount(() => {
 									:class="$style.graph_bar"
 									:style="{
 										width: `${comparisonData[0]?.fee_graph}%`,
-										background: 'var(--mint)',
+										background: rollupColor,
 										marginRight: '4px',
 									}"
 								></div>
@@ -1599,7 +725,7 @@ onBeforeUnmount(() => {
 	</Flex>
 </template>
 
-<style module>
+<style module lang="scss">
 .header {
 	height: 40px;
 
@@ -1609,10 +735,6 @@ onBeforeUnmount(() => {
 	padding: 0 12px;
 }
 
-.setting_item {
-	min-height: 24px;
-}
-
 .chart_selector {
 	padding: 4px 6px 4px 6px;
 	box-shadow: inset 0 0 0 1px var(--op-10);
@@ -1621,20 +743,6 @@ onBeforeUnmount(() => {
 	transition: all 1s ease-in-out;
 }
 
-.data {
-	background: var(--card-background);
-
-	padding: 16px;
-}
-
-.top {
-	border-radius: 4px 4px 0px 0px;
-}
-
-.bottom {
-	border-radius: 0px 0px 8px 8px;
-}
-
 .chart_wrapper {
 	position: relative;
 
@@ -1647,82 +755,6 @@ onBeforeUnmount(() => {
 	width: 464px;
 }
 
-.chart {
-	position: absolute;
-
-	& svg {
-		overflow: visible;
-	}
-}
-
-.axis {
-	position: absolute;
-	top: 0;
-	right: 0;
-
-	&.x {
-		bottom: 6px;
-		left: 52px;
-	}
-
-	&.y {
-		bottom: 34px;
-		left: 0;
-	}
-}
-
-.tooltip_wrapper {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-
-	& .dot {
-		width: 6px;
-		height: 6px;
-		border-radius: 50px;
-		background: var(--brand);
-
-		box-shadow: 0 0 0 4px var(--dark-mint);
-
-		transition: all 0.15s ease;
-	}
-
-	& .line {
-		position: absolute;
-		top: 0;
-		bottom: 32px;
-
-		border-left: 1px dashed var(--op-10);
-
-		transition: all 0.15s ease;
-	}
-
-	& .badge {
-		position: absolute;
-		bottom: 4px;
-
-		background: var(--card-background);
-
-		transition: all 0.15s ease;
-	}
-
-	& .tooltip {
-		pointer-events: none;
-		position: absolute;
-		z-index: 10;
-
-		background: var(--card-background);
-		border-radius: 6px;
-		box-shadow: inset 0 0 0 1px var(--op-5), 0 14px 34px rgba(0, 0, 0, 15%), 0 4px 14px rgba(0, 0, 0, 5%);
-
-		padding: 8px;
-
-		transition: all 0.2s ease;
-	}
-}
-
 .graph_bar {
 	height: 4px;
 
@@ -1767,7 +799,6 @@ onBeforeUnmount(() => {
 		background-color: var(--op-5);
 	}
 }
-
 .avatar_container {
 	position: relative;
 	width: 16px;
@@ -1782,6 +813,19 @@ onBeforeUnmount(() => {
 	object-fit: cover;
 }
 
+.data {
+	background: var(--card-background);
+	padding: 16px;
+}
+
+.top {
+	border-radius: 4px 4px 0px 0px;
+}
+
+.bottom {
+	border-radius: 0px 0px 8px 8px;
+}
+
 @media (max-width: 800px) {
 	.data {
 		flex-direction: column;
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 60454db3..5e0d1d5a 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -22,6 +22,9 @@ import { getRankCategory } from "@/services/constants/rollups"
 /** API */
 import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "@/services/api/rollup"
 
+/** Data */
+import badges from "@data/badges.json"
+
 /** Store */
 import { useCacheStore } from "@/store/cache.store"
 import { useNotificationsStore } from "@/store/notifications.store"
@@ -100,10 +103,9 @@ const tags = computed(() =>
 	}, []),
 )
 
-const { data: badges } = await useFetch('/api/badges')
 const showBadges = computed(() => {
-	const showSettled = props.rollup?.settled_on && badges.value?.settled?.includes(props.rollup?.settled_on?.toLowerCase())
-	const showProvider = props.rollup?.provider && badges.value?.providers?.includes(props.rollup?.provider?.toLowerCase())
+	const showSettled = props.rollup?.settled_on && badges?.settled?.includes(props.rollup?.settled_on?.toLowerCase())
+	const showProvider = props.rollup?.provider && badges?.provider?.includes(props.rollup?.provider?.toLowerCase())
 	
 	return {
 		show: showSettled || showProvider,
@@ -416,7 +418,7 @@ const handleCSVDownload = async (value) => {
 						/>
 					</Flex>
 
-					<Flex align="center" justify="start" gap="16" wrap="wrap" :style="{ marginTop: showBadges.show ? '0px' : '-24px' }">
+					<Flex align="center" justify="start" gap="16" wrap="wrap" :style="{ marginTop: showBadges.show ? '0px' : '-20px' }">
 						<Tooltip v-if="rollup.website" position="start" delay="300">
 							<a :href="rollup.website" target="_blank">
 								<Icon name="globe" size="14" color="secondary" />
diff --git a/components/modules/validator/ValidatorOverview.vue b/components/modules/validator/ValidatorOverview.vue
index 1083af57..94fa8fec 100644
--- a/components/modules/validator/ValidatorOverview.vue
+++ b/components/modules/validator/ValidatorOverview.vue
@@ -406,7 +406,7 @@ const handleDelegate = () => {
 								<Flex
 									:class="$style.uptime"
 									:style="{
-										background: t.signed ? 'rgb(10, 219, 111)' : 'red',
+										background: t.signed ? 'var(--brand)' : 'var(--red)',
 									}"
 								/>
 
diff --git a/components/shared/ChartOnEntityPage.vue b/components/shared/ChartOnEntityPage.vue
new file mode 100644
index 00000000..e694968c
--- /dev/null
+++ b/components/shared/ChartOnEntityPage.vue
@@ -0,0 +1,354 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+import { useDebounceFn } from "@vueuse/core"
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue"
+
+/** UI */
+import Text from "@/components/Text.vue"
+import Skeleton from "@/components/Skeleton.vue"
+import Flex from "@/components/Flex.vue"
+
+/** Services */
+import { buildLineChart, buildBarChart } from "@/services/utils/entityCharts"
+
+/** Props */
+const props = defineProps({
+	seriesConfig: {
+		type: Object,
+		required: true,
+	},
+
+	chartView: { type: String, default: "line" },
+	color: { type: String, required: false },
+	loadLastValue: { type: Boolean, default: true },
+	selectedPeriod: { type: Object, required: true },
+	isLoading: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(["update:chartView", "update:loadLastValue"])
+
+const data = computed(() => {
+	return props.seriesConfig?.series?.value || props.seriesConfig?.series || []
+})
+
+const {
+	metric,
+	title,
+	tooltipLabel,
+	yAxisFormatter,
+	tooltipValueFormatter,
+	unit,
+} = props.seriesConfig || {}
+
+// Tooltip variables
+const showTooltip = ref(false)
+const tooltipEl = ref()
+const tooltipXOffset = ref(0)
+const tooltipYOffset = ref(0)
+const tooltipYDataOffset = ref(0)
+const tooltipDynamicXPosition = ref(0)
+const tooltipText = ref("")
+const badgeEl = ref()
+const badgeText = ref("")
+const badgeOffset = ref(0)
+
+const chartEl = ref()
+
+const tooltipConfig = computed(() => ({
+	tooltipXOffset,
+	tooltipYDataOffset,
+	tooltipYOffset,
+	tooltipText,
+	tooltipDynamicXPosition,
+	badgeText,
+	badgeOffset,
+	tooltipEl,
+	badgeEl,
+	selectedPeriod: props.selectedPeriod,
+	loadLastValue: props.loadLastValue,
+}))
+
+const buildChart = () => {
+	const domElement = chartEl.value?.$el
+
+	if (!domElement || !data.value.length) return
+
+	if (props.chartView === "line") {
+		buildLineChart(
+			domElement,
+			props.loadLastValue ? data.value : data.value.slice(0, data.value.length - 1),
+			() => (showTooltip.value = true),
+			() => (showTooltip.value = false),
+			metric,
+			tooltipConfig.value,
+			props.color,
+		)
+	} else {
+		buildBarChart(
+			domElement,
+			props.loadLastValue ? data.value : data.value.slice(0, data.value.length - 1),
+			() => (showTooltip.value = true),
+			() => (showTooltip.value = false),
+			metric,
+			tooltipConfig.value,
+			props.color,
+		)
+	}
+}
+
+const getXAxisLabels = (start, tvl = false) => {
+	let res = ""
+	let tf = props.selectedPeriod.timeframe
+
+	let periodValue = props.selectedPeriod.value
+
+	if (tvl && ["hour", "week"].includes(props.selectedPeriod.timeframe)) {
+		tf = "day"
+		periodValue = 30
+	}
+
+	switch (tf) {
+		case "month":
+			start
+				? (res = DateTime.now()
+						.minus({ months: periodValue - 1 })
+						.toFormat("LLL y"))
+				: (res = props.loadLastValue ? DateTime.now().toFormat("LLL") : DateTime.now().minus({ months: 1 }).toFormat("LLL"))
+			break
+		case "day":
+			start
+				? (res = DateTime.now()
+						.minus({ days: periodValue - 1 })
+						.toFormat("LLL dd"))
+				: (res = props.loadLastValue ? "Today" : DateTime.now().minus({ days: 1 }).toFormat("LLL dd"))
+			break
+		default:
+			start
+				? (res = DateTime.now()
+						.minus({ hours: periodValue - 1 })
+						.set({ minutes: 0 })
+						.toFormat("hh:mm a"))
+				: (res = props.loadLastValue ? "Now" : DateTime.now().minus({ hours: 1 }).set({ minutes: 0 }).toFormat("hh:mm a"))
+			break
+	}
+
+	return res
+}
+
+watch(
+	() => [data.value, props.chartView, props.loadLastValue],
+	async () => {
+		await nextTick()
+
+		setTimeout(() => {
+			if (chartEl.value) {
+				debouncedRedraw()
+			}
+		}, 200)
+	},
+	{ immediate: true },
+)
+
+const debouncedRedraw = useDebounceFn(async () => {
+	buildChart()
+}, 200)
+
+onMounted(() => {
+	window.addEventListener("resize", debouncedRedraw)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener("resize", debouncedRedraw)
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="20" wide>
+		<Flex align="center" justify="between">
+			<Flex align="center" gap="8">
+				<Text size="13" weight="600" color="primary">{{ title }}</Text>
+				<slot name="header-content" />
+			</Flex>
+			<slot name="header-actions" />
+		</Flex>
+
+		<Flex direction="column" :class="$style.chart_wrapper">
+			<Flex direction="column" justify="between" :class="[$style.axis, $style.y]">
+				<Text
+					v-if="data.length"
+					size="12"
+					weight="600"
+					color="tertiary"
+					:style="{ opacity: Math.max(...data.map((d) => d.value)) ? 1 : 0 }"
+				>
+					{{ yAxisFormatter(Math.max(...data.map((d) => d.value))) }}
+				</Text>
+				<Skeleton v-else w="32" h="12" />
+
+				<Text
+					v-if="data.length"
+					size="12"
+					weight="600"
+					color="tertiary"
+					:style="{
+						opacity: Math.round(Math.max(...data.map((d) => d.value)) / 2) !== Math.max(...data.map((d) => d.value)) ? 1 : 0,
+					}"
+				>
+					{{ yAxisFormatter(Math.round(Math.max(...data.map((d) => d.value)) / 2)) }}
+				</Text>
+				<Skeleton v-else w="24" h="12" />
+
+				<Text v-if="data.length" size="12" weight="600" color="tertiary">0</Text>
+				<Skeleton v-else w="16" h="12" />
+			</Flex>
+
+			<!-- Axis X -->
+			<Flex :class="[$style.axis, $style.x]">
+				<Flex align="end" justify="between" wide>
+					<Text size="12" weight="600" color="tertiary">
+						{{ getXAxisLabels(true) }}
+					</Text>
+					<Text size="12" weight="600" color="tertiary">
+						{{ getXAxisLabels(false) }}
+					</Text>
+				</Flex>
+			</Flex>
+
+			<!-- Tooltip -->
+			<Transition name="fastfade">
+				<div v-if="showTooltip" :class="$style.tooltip_wrapper">
+					<div
+						v-if="chartView === 'line'"
+						:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
+						:class="$style.dot"
+					/>
+					<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+					<div ref="badgeEl" :style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }" :class="$style.badge">
+						<Text size="12" weight="600" color="secondary">
+							{{ badgeText }}
+						</Text>
+					</div>
+					<Flex
+						ref="tooltipEl"
+						:style="{ transform: `translate(${tooltipDynamicXPosition}px, ${tooltipYOffset - 40}px)` }"
+						direction="column"
+						gap="8"
+						:class="$style.tooltip"
+					>
+						<Flex align="center" gap="16">
+							<Text size="12" weight="600" color="secondary">{{ tooltipLabel }}</Text>
+							<Text size="12" weight="600" color="primary"> {{ tooltipValueFormatter(tooltipText) }} {{ unit }} </Text>
+						</Flex>
+					</Flex>
+				</div>
+			</Transition>
+
+			<Flex ref="chartEl" :class="[$style.chart, isLoading && $style.loading]" />
+		</Flex>
+	</Flex>
+</template>
+
+<style module lang="scss">
+.setting_item {
+	min-height: 24px;
+}
+
+.chart_selector {
+	padding: 4px 6px 4px 6px;
+	box-shadow: inset 0 0 0 1px var(--op-10);
+	border-radius: 5px;
+	cursor: pointer;
+	transition: all 1s ease-in-out;
+}
+
+.chart_wrapper {
+	position: relative;
+	height: 180px;
+}
+
+.chart {
+	position: absolute;
+
+	& svg {
+		overflow: visible;
+	}
+}
+
+.loading {
+	animation: skeleton 1s ease infinite;
+	pointer-events: none;
+}
+@keyframes skeleton {
+	0% {
+		opacity: 0.7;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 0.7;
+	}
+}
+
+.axis {
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	&.x {
+		bottom: 6px;
+		left: 52px;
+	}
+
+	&.y {
+		bottom: 34px;
+		left: 0;
+	}
+}
+
+.tooltip_wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	& .dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 50px;
+		background: var(--brand);
+		box-shadow: 0 0 0 4px var(--dark-mint);
+		transition: all 0.15s ease;
+	}
+
+	& .line {
+		position: absolute;
+		top: 0;
+		bottom: 32px;
+		border-left: 1px dashed var(--op-10);
+		transition: all 0.15s ease;
+	}
+
+	& .badge {
+		position: absolute;
+		bottom: 4px;
+		background: var(--card-background);
+		transition: all 0.15s ease;
+	}
+
+	& .tooltip {
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+		background: var(--card-background);
+		border-radius: 6px;
+		box-shadow: inset 0 0 0 1px var(--op-5), 0 14px 34px rgba(0, 0, 0, 15%), 0 4px 14px rgba(0, 0, 0, 5%);
+		padding: 8px;
+		transition: all 0.2s ease;
+	}
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 75d265bd..2be8311f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -143,6 +143,7 @@ export default defineNuxtConfig({
 		resolve: {
 			alias: {
 				"unenv/runtime/node/buffer/index/": path.resolve(__dirname, "./node_modules/buffer/index"),
+				"@data": path.resolve(__dirname, "src/data"),
 			},
 		},
 		plugins: [wasm(), topLevelAwait(), nodePolyfills()],
diff --git a/package.json b/package.json
index 22de3353..a5785fe6 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,10 @@
 	"license": "MIT",
 	"type": "module",
 	"scripts": {
-		"build": "nuxt build",
-		"dev": "cross-env PORT=9090 nuxt dev",
+		"build": "npm run generate-badges && nuxt build",
+		"dev": "npm run generate-badges && cross-env PORT=9090 nuxt dev",
 		"generate": "nuxt generate",
+		"generate-badges": "node scripts/generateBadgesList.js",
 		"preview": "nuxt preview",
 		"postinstall": "nuxt prepare",
 		"lint": "oxlint"
diff --git a/scripts/generateBadgesList.js b/scripts/generateBadgesList.js
new file mode 100644
index 00000000..7be2c442
--- /dev/null
+++ b/scripts/generateBadgesList.js
@@ -0,0 +1,25 @@
+import fs from "fs"
+import path from "path"
+
+const folders = ["provider", "settled"]
+const publicPath = path.resolve("public/img/badges")
+
+let result = {}
+
+for (const folder of folders) {
+    const folderPath = path.join(publicPath, folder)
+    const files = fs.readdirSync(folderPath)
+        .filter(file => !file.startsWith("."))
+        .map(file => path.parse(file).name)
+    
+    result[folder] = files
+}
+
+const outputDir = path.resolve("src/data");
+fs.mkdirSync(outputDir, { recursive: true });
+
+const outputPath = path.join(outputDir, "badges.json");
+fs.writeFileSync(
+    outputPath,
+    JSON.stringify(result, null, 2)
+)
diff --git a/server/api/badges.get.js b/server/api/badges.get.js
index bb0c9a32..6b27faff 100644
--- a/server/api/badges.get.js
+++ b/server/api/badges.get.js
@@ -12,7 +12,7 @@ export default defineEventHandler(() => {
     }
 
     return {
-        providers: getFiles('provider'),
+        provider: getFiles('provider'),
         settled: getFiles('settled')
     }
 })
diff --git a/services/config.js b/services/config.js
index d67df3e3..8854c104 100644
--- a/services/config.js
+++ b/services/config.js
@@ -39,7 +39,7 @@ export const useServerURL = () => {
 			return Server.API.mammoth
 
 		case "dev.celenium.io":
-			return Server.API.dev
+			return Server.API.mainnet
 
 		default:
 			return Server.API.mainnet
@@ -66,7 +66,7 @@ export const useSocketURL = () => {
 			return Server.WSS.mammoth
 
 		case "dev.celenium.io":
-			return Server.WSS.dev
+			return Server.WSS.mainnet
 
 		default:
 			return Server.WSS.mainnet
diff --git a/services/utils/amounts.js b/services/utils/amounts.js
index a0186e9d..d344c6fc 100644
--- a/services/utils/amounts.js
+++ b/services/utils/amounts.js
@@ -57,7 +57,7 @@ export const truncate = (num) => {
 export const tia = (amount, decimal = 6) => {
 	if (!amount || !parseInt(amount)) return 0
 
-	return truncateDecimalPart(parseInt(amount) / 1_000_000, decimal)
+	return truncateDecimalPart(parseInt(amount) / 1_000_000, decimal) + " TIA"
 }
 
 export const utia = (amount) => {
diff --git a/services/utils/entityCharts.js b/services/utils/entityCharts.js
new file mode 100644
index 00000000..f81260b8
--- /dev/null
+++ b/services/utils/entityCharts.js
@@ -0,0 +1,522 @@
+import * as d3 from "d3"
+import { DateTime } from "luxon"
+
+/**
+ * Periods for the charts
+ * @type {Array}
+ */
+export const PERIODS = [
+	{
+		title: "Last 24 hours",
+		value: 24,
+		timeframe: "hour",
+	},
+	{
+		title: "Last 7 days",
+		value: 7,
+		timeframe: "day",
+	},
+	{
+		title: "Last 31 days",
+		value: 30,
+		timeframe: "day",
+	},
+	{
+		title: "Last 12 months",
+		value: 12,
+		timeframe: "month",
+	},
+]
+
+export const generateDateForPeriod = (period, index) => {
+	const { timeframe, value } = period
+
+	if (timeframe === "month") {
+		return DateTime.now()
+			.startOf("month")
+			.minus({ months: value - index })
+	} else {
+		return DateTime.now().minus({
+			[timeframe === "day" ? "days" : "hours"]: value - index,
+		})
+	}
+}
+
+/**
+ * Get the format key for the timeframe
+ * @param {string} timeframe - The timeframe
+ * @returns {string} - The format key
+ */
+export const getFormatKey = (timeframe) => {
+	return ["day", "month"].includes(timeframe) ? "y-LL-dd" : "y-LL-dd-HH"
+}
+
+
+export const createDataMap = (rawData, timeframe) => {
+	const dataMap = {}
+	const formatKey = getFormatKey(timeframe)
+
+	rawData.forEach((item) => {
+		dataMap[DateTime.fromISO(item.time).toFormat(formatKey)] = item.value
+	})
+
+	return dataMap
+}
+
+export const generateSeriesData = (period, dataMap, series) => {
+	series.value = []
+
+	for (let i = 1; i < period.value + 1; i++) {
+		const dt = generateDateForPeriod(period, i)
+		const formatKey = getFormatKey(period.timeframe)
+		const key = dt.toFormat(formatKey)
+
+		series.value.push({
+			date: dt.toJSDate(),
+			value: parseInt(dataMap[key]) || 0,
+		})
+	}
+}
+
+/**
+ * Builds a line chart using D3.js
+ * @param {HTMLElement} chartEl - DOM element for chart placement
+ * @param {Array} data - Data for the chart [{date, value}]
+ * @param {Function} onEnter - Callback on hover
+ * @param {Function} onLeave - Callback on cursor leave
+ * @param {string} metric - Metric (optional, for special TVL logic)
+ */
+export const buildLineChart = (chartEl, data, onEnter, onLeave, metric, tooltipConfig, color = "var(--brand)") => {
+	const width = chartEl.parentElement.getBoundingClientRect().width
+	const height = 180
+	const marginTop = 0
+	const marginRight = 0
+	const marginBottom = 24
+	const marginLeft = 52
+
+	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
+	const showChart = metric === "tvl" ? MAX_VALUE > 1 : data.length
+
+	/** Scale */
+	const x = d3.scaleUtc(
+		d3.extent(data, (d) => d.date),
+		[marginLeft, width - marginRight],
+	)
+	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom - 6, marginTop])
+	const line = d3
+		.line()
+		.x((d) => x(d.date))
+		.y((d) => y(d.value))
+
+	/** Tooltip */
+	const bisect = d3.bisector((d) => d.date).center
+	const onPointermoved = (event) => {
+		if (!showChart) return
+
+		onEnter()
+
+		const idx = bisect(data, x.invert(d3.pointer(event)[0]))
+
+		const {
+			tooltipXOffset,
+			tooltipYDataOffset,
+			tooltipYOffset,
+			tooltipText,
+			tooltipDynamicXPosition,
+			badgeText,
+			badgeOffset,
+			tooltipEl,
+			badgeEl,
+			selectedPeriod,
+		} = tooltipConfig
+
+		if (tooltipXOffset) tooltipXOffset.value = x(data[idx].date)
+		if (tooltipYDataOffset) tooltipYDataOffset.value = y(data[idx].value)
+		if (tooltipYOffset) tooltipYOffset.value = event.layerY
+		if (tooltipText) tooltipText.value = data[idx].value
+
+		if (tooltipEl && tooltipEl.value) {
+			if (idx > parseInt(selectedPeriod?.value / 2)) {
+				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
+			} else {
+				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
+			}
+		}
+
+		let tf = selectedPeriod?.timeframe
+		if (metric === "tvl" && ["hour", "week"].includes(selectedPeriod?.timeframe)) {
+			tf = "day"
+		}
+
+		if (badgeText) {
+			badgeText.value =
+				tf === "month"
+					? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
+					: tf === "day"
+					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+		}
+
+		if (badgeEl && badgeEl.value) {
+			const badgeWidth = badgeEl.value.getBoundingClientRect().width
+			if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
+				badgeOffset.value = 0
+			} else if (badgeWidth + tooltipXOffset.value > width) {
+				badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
+			} else {
+				badgeOffset.value = badgeWidth / 2
+			}
+		}
+	}
+
+	const onPointerleft = () => {
+		if (!showChart) return
+
+		onLeave()
+
+		const { badgeText } = tooltipConfig
+		if (badgeText) badgeText.value = ""
+	}
+
+	/** SVG Container */
+	const svg = d3
+		.create("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [0, 0, width, height])
+		.attr("preserveAspectRatio", "none")
+		.attr("style", "max-width: 100%;  height: intrinsic;")
+		.style("-webkit-tap-highlight-color", "transparent")
+		.on("pointerenter pointermove", onPointermoved)
+		.on("pointerleave", onPointerleft)
+		.on("touchstart", (event) => event.preventDefault())
+
+	/** Vertical Lines */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
+
+	/** Default Horizontal Line  */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
+
+	if (showChart) {
+		/** Chart Line */
+		const { loadLastValue } = tooltipConfig
+		let path1 = null
+		let path2 = null
+
+		const area = d3.area()
+			.x(d => x(d.date))
+			.y0(y(0))
+			.y1(d => y(d.value))
+		
+		const clipId = `clip-${metric}-${Date.now()}`
+		const clipPath = svg.append("clipPath")
+			.attr("id", clipId)
+		const clipRect = clipPath.append("rect")
+			.attr("x", marginLeft)
+			.attr("y", 0)
+			.attr("width", 0)
+			.attr("height", height)
+
+		svg.append("path")
+			.datum(data)
+			.attr("fill", color)
+			.attr("fill-opacity", 0.1)
+			.attr("stroke", "none")
+			.attr("clip-path", `url(#${clipId})`)
+			.attr("d", area)
+		
+		path1 = svg
+			.append("path")
+			.attr("fill", "none")
+			.attr("stroke", color)
+			.attr("stroke-width", 3)
+			.attr("stroke-linecap", "round")
+			.attr("stroke-linejoin", "round")
+			.attr("d", line(loadLastValue ? data.slice(0, data.length - 1) : data))
+
+		if (loadLastValue) {
+			// Create pattern
+			const defs = svg.append("defs")
+			const pattern = defs
+				.append("pattern")
+				.attr("id", `dashedPattern-${metric}`)
+				.attr("width", 8)
+				.attr("height", 2)
+				.attr("patternUnits", "userSpaceOnUse")
+			pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", color)
+			pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
+
+			// Last dash segment
+			path2 = svg
+				.append("path")
+				.attr("fill", "none")
+				.attr("stroke", `url(#dashedPattern-${metric})`)
+				.attr("stroke-width", 3)
+				.attr("stroke-linecap", "round")
+				.attr("stroke-linejoin", "round")
+				.attr("d", line(data.slice(data.length - 2, data.length)))
+		}
+
+		const totalDuration = 1_000
+		const path1Duration = loadLastValue ? (totalDuration / data.length) * (data.length - 1) : totalDuration
+		const path1Length = path1.node().getTotalLength()
+
+		path1
+			.attr("stroke-dasharray", path1Length)
+			.attr("stroke-dashoffset", path1Length)
+			.transition()
+			.duration(path1Duration)
+			.ease(d3.easeLinear)
+			.attr("stroke-dashoffset", 0)
+
+		if (loadLastValue) {
+			const path2Duration = totalDuration / data.length
+			const path2Length = path2.node().getTotalLength() + 1
+
+			path2
+				.attr("stroke-dasharray", path2Length)
+				.attr("stroke-dashoffset", path2Length)
+				.transition()
+				.duration(path2Duration)
+				.ease(d3.easeLinear)
+				.delay(path1Duration)
+				.attr("stroke-dashoffset", 0)
+		}
+
+		const point = svg
+			.append("circle")
+			.attr("cx", x(data[data.length - 1].date))
+			.attr("cy", y(data[data.length - 1].value))
+			.attr("fill", color)
+			.attr("r", 3)
+			.attr("opacity", 0)
+
+		clipRect.transition()
+			.duration(totalDuration)
+			.ease(d3.easeLinear)
+			.attr("width", width - marginLeft)
+		
+		point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
+	} else {
+		svg.append("text")
+			.attr("x", width / 2)
+			.attr("y", height * 0.3)
+			.attr("text-anchor", "middle")
+			.attr("fill", "var(--op-30)")
+			.style("font-size", "14px")
+			.text("No data available")
+	}
+
+	if (chartEl.children[0]) chartEl.children[0].remove()
+	chartEl.append(svg.node())
+}
+
+/**
+ * Builds a bar chart using D3.js
+ * @param {HTMLElement} chartEl - DOM element for chart placement
+ * @param {Array} data - Data for the chart [{date, value}]
+ * @param {Function} onEnter - Callback on hover
+ * @param {Function} onLeave - Callback on cursor leave
+ * @param {string} metric - Metric for chart identification
+ */
+export const buildBarChart = (chartEl, data, onEnter, onLeave, metric, tooltipConfig, color = "var(--brand)") => {
+	const width = chartEl.parentElement.getBoundingClientRect().width
+	const height = 180
+	const marginTop = 0
+	const marginRight = 2
+	const marginBottom = 24
+	const marginLeft = 52
+
+	const barWidth = Math.max(Math.round((width - marginLeft - marginRight) / data.length - (data.length > 7 ? 2 : 8)), 3)
+
+	const MAX_VALUE = d3.max(data, (d) => d.value) ? d3.max(data, (d) => d.value) : 1
+	const showChart = metric === "tvl" ? MAX_VALUE > 1 : data.length
+
+	/** Scale */
+	const xBand = d3
+		.scaleBand()
+		.domain(data.map((d) => new Date(d.date)))
+		.range([marginLeft, width - marginRight])
+		.padding(0.1)
+
+	const x = d3.scaleUtc(
+		d3.extent(data, (d) => d.date),
+		[marginLeft, width - marginRight - barWidth],
+	)
+	const y = d3.scaleLinear([0, MAX_VALUE], [height - marginBottom, marginTop])
+
+	/** Tooltip */
+	const bisect = d3.bisector((d) => d.date).center
+	const onPointermoved = (event) => {
+		if (!showChart) return
+
+		onEnter()
+
+		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
+
+		const elements = document.querySelectorAll(`[metric="${metric}"]`)
+		elements.forEach((el) => {
+			if (+el.getAttribute("data-index") === idx) {
+				el.style.filter = "brightness(1.2)"
+			} else {
+				el.style.filter = "brightness(0.6)"
+			}
+		})
+
+		const {
+			tooltipXOffset,
+			tooltipYDataOffset,
+			tooltipYOffset,
+			tooltipText,
+			tooltipDynamicXPosition,
+			badgeText,
+			badgeOffset,
+			tooltipEl,
+			badgeEl,
+			selectedPeriod,
+		} = tooltipConfig
+
+		if (tooltipXOffset) tooltipXOffset.value = x(data[idx].date)
+		if (tooltipYDataOffset) tooltipYDataOffset.value = y(data[idx].value)
+		if (tooltipYOffset) tooltipYOffset.value = event.layerY
+		if (tooltipText) tooltipText.value = data[idx].value
+
+		if (tooltipEl && tooltipEl.value) {
+			const tooltipDomElement = tooltipEl.value.$el || tooltipEl.value
+
+			if (idx > parseInt(selectedPeriod?.value / 2)) {
+				tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipDomElement.getBoundingClientRect().width - 16
+			} else {
+				tooltipDynamicXPosition.value = tooltipXOffset.value + 16
+			}
+		}
+
+		let tf = selectedPeriod?.timeframe
+		if (metric === "tvl" && ["hour", "week"].includes(selectedPeriod?.timeframe)) {
+			tf = "day"
+		}
+
+		if (badgeText) {
+			badgeText.value =
+				tf === "month"
+					? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
+					: tf === "day"
+						? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+						: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+		}
+
+		if (badgeEl && badgeEl.value) {
+			const badgeWidth = badgeEl.value.getBoundingClientRect().width
+			if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
+				badgeOffset.value = 0
+			} else if (badgeWidth + tooltipXOffset.value > width) {
+				badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
+			} else {
+				badgeOffset.value = (badgeWidth - barWidth) / 2
+			}
+		}
+	}
+
+	const onPointerleft = () => {
+		if (!showChart) return
+
+		onLeave()
+
+		const elements = document.querySelectorAll("[data-index]")
+		elements.forEach((el) => {
+			el.style.filter = ""
+		})
+
+		const { badgeText } = tooltipConfig
+		if (badgeText) badgeText.value = ""
+	}
+
+	/** SVG Container */
+	const svg = d3
+		.create("svg")
+		.attr("width", width)
+		.attr("height", height)
+		.attr("viewBox", [0, 0, width, height])
+		.attr("preserveAspectRatio", "none")
+		.attr("style", "max-width: 100%;  height: intrinsic;")
+		.style("-webkit-tap-highlight-color", "transparent")
+		.on("pointerenter pointermove", onPointermoved)
+		.on("pointerleave", onPointerleft)
+		.on("touchstart", (event) => event.preventDefault())
+
+	/** Vertical Lines */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${marginLeft},${height - marginBottom + 2} L${marginLeft},${height - marginBottom - 5}`)
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${width - 1},${height - marginBottom + 2} L${width - 1},${height - marginBottom - 5}`)
+
+	/** Default Horizontal Line  */
+	svg.append("path")
+		.attr("fill", "none")
+		.attr("stroke", "var(--op-10)")
+		.attr("stroke-width", 2)
+		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
+
+	if (showChart) {
+		const { loadLastValue } = tooltipConfig
+		/** Chart Bars */
+		svg.append("defs")
+			.append("pattern")
+			.attr("id", `diagonal-stripe-${metric}`)
+			.attr("width", 6)
+			.attr("height", 6)
+			.attr("patternUnits", "userSpaceOnUse")
+			.attr("patternTransform", "rotate(45)")
+			.append("rect")
+			.attr("width", 2)
+			.attr("height", 6)
+			.attr("transform", "translate(0,0)")
+			.attr("fill", color)
+
+		svg.append("g")
+			.selectAll("g")
+			.data(data)
+			.enter()
+			.append("rect")
+			.attr("class", "bar")
+			.attr("data-index", (d, i) => i)
+			.attr("metric", metric)
+			.attr("x", (d) => xBand(new Date(d.date)))
+			.attr("y", (d) => y(d.value))
+			.attr("width", xBand.bandwidth())
+			.attr("fill", (d, i) => (loadLastValue && i === data.length - 1 ? `url(#diagonal-stripe-${metric})` : color))
+			.transition()
+			.duration(1_000)
+			.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
+	} else {
+		svg.append("text")
+			.attr("x", width / 2)
+			.attr("y", height * 0.3)
+			.attr("text-anchor", "middle")
+			.attr("fill", "var(--op-30)")
+			.style("font-size", "14px")
+			.text("No data available")
+	}
+
+	if (chartEl.children[0]) chartEl.children[0].remove()
+	chartEl.append(svg.node())
+}
diff --git a/services/utils/index.js b/services/utils/index.js
index 0b9284c7..5f226fe2 100644
--- a/services/utils/index.js
+++ b/services/utils/index.js
@@ -2,3 +2,4 @@ export * from "./general"
 export * from "./amounts"
 export * from "./strings"
 export * from "./d3"
+export * from "./entityCharts"
diff --git a/src/data/badges.json b/src/data/badges.json
new file mode 100644
index 00000000..8c9331d7
--- /dev/null
+++ b/src/data/badges.json
@@ -0,0 +1,16 @@
+{
+  "provider": [
+    "bvm.network",
+    "caldera",
+    "conduit",
+    "dymension",
+    "gelato",
+    "initia",
+    "movement"
+  ],
+  "settled": [
+    "arbitrum",
+    "base",
+    "ethereum"
+  ]
+}
\ No newline at end of file