diff --git a/assets/icons.json b/assets/icons.json
index 93d7aa61..9c18c3c5 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -202,6 +202,8 @@
 	"bar-chart": "M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z",
 	"gantt-chart": "M2,5H10V2H12V22H10V18H6V15H10V13H4V10H10V8H2V5M14,5H17V8H14V5M14,10H19V13H14V10M14,15H22V18H14V15Z",
 	"crown": "M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z",
+	"earth": "M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+	"city": "M15,23H13V21H15V23M19,21H17V23H19V21M15,17H13V19H15V17M7,21H5V23H7V21M7,17H5V19H7V17M19,17H17V19H19V17M15,13H13V15H15V13M19,13H17V15H19V13M21,9A2,2 0 0,1 23,11V23H21V11H11V23H9V15H3V23H1V15A2,2 0 0,1 3,13H9V11A2,2 0 0,1 11,9V7A2,2 0 0,1 13,5H15V1H17V5H19A2,2 0 0,1 21,7V9M19,9V7H13V9H19Z"
 	"drop": "M12 18C12 18.7 12.12 19.36 12.34 20C12.23 20 12.12 20 12 20C8.69 20 6 17.31 6 14C6 10 12 3.25 12 3.25S16.31 8.1 17.62 12C16.93 12.06 16.28 12.22 15.67 12.47C15 10.68 13.5 8.33 12 6.39C10 8.96 8 12.23 8 14C8 16.21 9.79 18 12 18M19 17V14H17V17H14V19H17V22H19V19H22V17H19Z",
 	"faucet": "M21 21H3C3 19.9 3.9 19 5 19H19C20.11 19 21 19.89 21 21M19 7C19 5.39 17.93 3 15 3S11 5.39 11 7V18H13V7C13 6.54 13.17 5 15 5S17 6.54 17 7H16.5V9H19.5V7H19M7 12C6.45 12 6 12.45 6 13V14H3V15H6V18H8V13C8 12.45 7.55 12 7 12M21 14H18V13C18 12.45 17.55 12 17 12S16 12.45 16 13V18H18V15H21V14Z"
 }
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 8151e013..4c4a465a 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -78,6 +78,7 @@ $grayscale: (
 	// --supply: #65c7f8;
 	--supply: #1ca7ed;
 	--staking: #85f891;
+	--geo-map: #8B8C8D;
 }
 
 [theme="dimmed"] {
@@ -139,6 +140,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
+	--geo-map: #8B8C8D;
 }
 
 [theme="light"] {
@@ -200,6 +202,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
+	--geo-map: #8B8C8D;
 }
 
 @font-face {
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index 19b8d3a5..035119e3 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -85,6 +85,11 @@ const mainLinks = reactive([
 				path: "/stats?tab=rollups",
 				queryParam: {tab: "rollups"},
 			},
+			{
+				name: "Ecosystem",
+				path: "/stats?tab=ecosystem",
+				queryParam: {tab: "ecosystem"},
+			},
 		],
 	},
 ])
diff --git a/components/modules/stats/BarplotChartCard.vue b/components/modules/stats/BarplotChartCard.vue
new file mode 100644
index 00000000..7da2f42b
--- /dev/null
+++ b/components/modules/stats/BarplotChartCard.vue
@@ -0,0 +1,290 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+import { DateTime } from "luxon"
+
+/** Stats Components */
+import DiffChip from "@/components/modules/stats/DiffChip.vue"
+
+/** Services */
+import { abbreviate, capitilize, comma, formatBytes } from "@/services/utils"
+
+/** API */
+import { fetchSeries, fetchSeriesCumulative } from "@/services/api/stats"
+
+const props = defineProps({
+	series: {
+		type: Object,
+		required: true,
+	},
+    data: {
+        type: Array,
+        required: true,
+    },
+})
+
+const chartEl = ref()
+const tooltipEl = ref()
+const tooltip = ref({
+    show: false,
+})
+const labels = ref(props.data.map(d => d.name))
+
+const buildChart = (chart) => {
+	const { height, width } = chart.getBoundingClientRect()
+    const margin = { top: 6, right: 12, bottom: 42, left: 12 }
+    const chartWidth = width - margin.left - margin.right
+    const chartHeight = height - margin.top - margin.bottom
+    const maxAmount = d3.max(props.data.map(d => d.amount))    
+
+    const x = d3.scaleBand()
+        .range([ 0, chartWidth ])
+        .domain(labels.value)
+        .padding(0.3)
+
+    const y = d3.scaleLinear()
+        .domain([0, maxAmount])
+        .range([ chartHeight, 0])
+    
+    const onPointerMoved = function (event) {
+        tooltip.value.show = true
+
+        const index = Math.round((d3.pointer(event)[0] - x.step() / 2) / x.step());
+        const idx = Math.max(0, Math.min(index, labels.value.length - 1));
+
+        const elements = document.querySelectorAll(`[metric=${props.series.name}]`)
+		elements.forEach(el => {
+			if (+el.getAttribute('id') === idx) {
+				el.style.filter = "brightness(1.2)"
+			} else {
+				el.style.filter = "brightness(0.6)"
+			}
+		})
+
+        const value = props.data[idx]
+        let xPos = x(value.name) + x.bandwidth() / 2
+        let yPos = y(value.amount) - 5
+        if (tooltipEl.value) {
+            if (xPos + tooltipEl.value.wrapper.getBoundingClientRect().width > chartWidth) {
+                xPos = x(value.name) - tooltipEl.value.wrapper.getBoundingClientRect().width + x.bandwidth() / 2
+            }
+
+            yPos = y(value.amount) - tooltipEl.value.wrapper.getBoundingClientRect().height - 5
+        }
+		tooltip.value.x = xPos
+		tooltip.value.y = yPos
+        tooltip.value.amount = value.amount
+    }
+
+    const onPointerLeft = function (event, d) {
+        const elements = document.querySelectorAll(`[metric=${props.series.name}]`)
+		elements.forEach(el => {
+            el.style.filter = "brightness(1)"
+		})
+
+        tooltip.value.show = false
+    }
+
+	/** SVG Container */
+    const svg = d3
+		.create("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("viewBox", [0, 0, width, height])
+            .on("pointerenter pointermove", onPointerMoved)
+            .on("pointerleave", onPointerLeft)
+            .on("touchstart", (event) => event.preventDefault())
+
+    // Add axises        
+    svg.append("g")
+        .attr("transform", "translate(0," + chartHeight + ")")
+        .attr("color", "var(--op-20)")
+        .call(d3.axisBottom(x))
+        .selectAll("text")
+            .attr("id", (d, i) => i)
+            .attr("metric", props.series.name)
+            .attr("color", "var(--txt-primary)")
+            .attr("font-size", "12")
+            .attr("transform", "translate(-10, 4) rotate(-60)")
+            .style("text-anchor", "end")
+            .style("transition", "all 0.3s ease-in-out")
+    
+    svg.append("g")
+        .attr("color", "var(--op-20)")
+        .call(d3.axisLeft(y))
+
+    // Bars
+    svg.selectAll("bar")
+        .data(props.data)
+        .enter()
+        .append("rect")
+            .attr("id", (d, i) => i)
+            .attr("metric", props.series.name)
+            .attr("x", d => x(d.name))
+            .attr("width", x.bandwidth())
+            .attr("fill", "var(--brand)")
+            .attr("height", d => chartHeight - y(0))
+            .attr("y", d => y(0))
+
+    svg.selectAll("rect")
+        .transition()
+        .duration(800)
+        .attr("y", d => y(d.amount))
+        .attr("height", d => chartHeight - y(d.amount))
+        .delay((d, i) => i * 100)
+        .on("end", () => d3.select(this).style("transition", "all 0.3s ease-in-out"))
+
+	if (chart.children[0]) chart.children[0].remove()
+	chart.append(svg.node())
+}
+
+onMounted(() => {
+    buildChart(chartEl.value.wrapper)
+})
+</script>
+
+<template>
+	<Flex direction="column" justify="start" gap="8" wide :class="$style.wrapper">
+        <Flex align="center" justify="start" wide>
+            <Text size="14" weight="600" color="secondary"> {{ `By ${series.title}` }} </Text>
+        </Flex>
+
+        <Flex align="center" :class="$style.chart_wrapper">
+            <Transition name="fastfade">
+				<div v-if="tooltip.show" :class="$style.tooltip_wrapper">
+					<Flex
+                        ref="tooltipEl"
+						align="center"
+						justify="between"
+						:style="{ transform: `translate(${tooltip.x}px, ${tooltip.y}px)` }"
+						gap="8"
+						:class="$style.tooltip"
+					>
+                        <Text size="12" weight="500" color="secondary"> Amount: </Text>
+                        <Text size="12" weight="600" color="primary"> {{ tooltip.amount }} </Text>
+                    </Flex>
+				</div>
+			</Transition>
+
+            <Flex ref="chartEl" :class="$style.chart" />
+        </Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+    width: 100%;
+	height: 100%;
+
+	background: var(--card-background);
+	border-radius: 12px;
+
+	padding: 16px;
+}
+
+.legend_wrapper {
+    max-width: 55%;
+}
+
+.legend_item {
+    transition: all 0.6s ease;
+}
+
+.legend {
+	width: 10px;
+	height: 10px;
+
+	border-radius: 5px;
+	cursor: pointer;
+
+	margin-right: 6px;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.chart_wrapper {
+    width: 100%;
+	height: 100%;
+
+	position: relative;
+}
+
+.chart {
+    width: 100%;
+	height: 100%;
+	position: absolute;
+
+	overflow: hidden;
+
+	& svg {
+		overflow: visible;
+	}
+}
+
+.fadein {
+    opacity: 0;
+    animation-name: fadeIn;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+}
+
+.loading {
+	animation: loading 1s ease infinite;
+}
+
+.tooltip_wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	& .tooltip {
+		min-width: 50px;
+        height: 22px;
+		pointer-events: none;
+		position: absolute;
+		z-index: 10;
+
+		background: var(--card-background);
+		border-radius: 4px;
+		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: 0 6px;
+
+		transition: all 0.2s ease;
+	}
+}
+
+@keyframes loading {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1000px) {
+	.wrapper {
+		max-width: initial;
+		width: 100%;
+	}
+}
+</style>
diff --git a/components/modules/stats/GeoMap.vue b/components/modules/stats/GeoMap.vue
new file mode 100644
index 00000000..e5635186
--- /dev/null
+++ b/components/modules/stats/GeoMap.vue
@@ -0,0 +1,632 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+
+/** UI */
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { isMobile, sortArrayOfObjects } from "@/services/utils"
+
+/** Constants */
+import { convertCountryCode, getCountryByCity, getCountryCentroid, getRandomLoaderPath } from "@/services/constants/stats"
+
+/** API */
+import { fetchNodeStats } from "@/services/api/stats"
+
+const isLoading = ref(true)
+const loaderPath = ref(getRandomLoaderPath())
+const geoMap = ref()
+const nodeCityData = ref([])
+const chartView = ref("countries")
+const handleChangeChartView = () => {
+	if (chartView.value === "countries") {
+		chartView.value = "cities"
+	} else {
+		chartView.value = "countries"
+	}
+}
+
+const getNodeStats = async (name) => {
+    const data = await fetchNodeStats({ name })
+
+    if (!data?.length) return []
+
+    return sortArrayOfObjects(data, "amount")
+}
+
+function getCountryByCoordinatesOrCityName(name, lat, lon, geoJSON) {
+    const point = [lon, lat]
+
+    for (const feature of geoJSON.features) {
+        if (!Number(feature.id) && d3.geoContains(feature, point)) {
+            return feature.id
+        }
+    }
+
+    return getCountryByCity(name)
+}
+
+const chartEl = ref()
+
+const buildChart = async (chart) => {
+	const { height, width } = chart.getBoundingClientRect()
+    const margin = { top: 6, right: 12, bottom: 12, left: 12 }
+
+    // Map and projection
+    const projection = d3.geoMercator()
+        .center([0, 40]) // GPS of location to zoom on
+        .scale(150) // This is like the zoom
+        .translate([ width / 2, height / 2 ])
+    
+    const countryMaxAmount = d3.max(geoMap.value, (d) => +d.amount)
+    const countryColor = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#1e473d", "#18d2a5"]))
+        .domain([1, countryMaxAmount])
+    
+    const size = d3.scaleSqrt()
+        .domain(d3.extent(nodeCityData.value, d => +d.amount))
+        .range([4, 20])
+    
+    const path =  d3.geoPath().projection(projection)
+    let zoomScale = 1
+
+	/** SVG Container */
+	const svg = d3
+		.create("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("viewBox", [0, 0, width, height])
+        // .attr("transform", `translate(${width / 2}, ${height / 2 + 10})`)
+
+    // Tooltip | We wrap the SVG with a container that has the html element above it
+    const container = document.createElement("div")
+    container.innerHTML = `
+        <style>
+            .tooltip {
+                font-size: 13px;
+                background: var(--card-background);
+                pointer-events: none;
+                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: 4px 8px 4px 8px;
+                position: absolute;
+                top: 10px;
+                left: 10px;
+                z-index: 1;
+                display: none;
+            }
+        </style>
+        <div class="tooltip"></div>
+    `
+    container.appendChild(svg.node())
+    document.body.appendChild(container)
+
+    // Three function that change the tooltip when user hover / move / leave a cell
+    const tooltip = container.querySelector(".tooltip")
+    const mouseover = function(d) {
+        tooltip.style.opacity = 1
+    }
+    const mousemove = function(event, d) {
+        const { pageX, pageY } = event
+        tooltip.style.display = "block";
+        tooltip.style.left = `${pageX + 10}px`
+        tooltip.style.top = `${pageY - 20}px`
+
+        if (chartView.value === "countries") {
+            tooltip.innerHTML = `
+                <div class="flex items-center gap--8">
+                    <span style="color: var(--txt-secondary);">${d.properties.name}:</span>
+                    <span style="color: var(--txt-primary);">${d.amount}</span>
+                </div>
+            `
+        } else if (chartView.value === "cities") {
+            let hoverCities = []
+            if (zoomScale > 4) {
+                const { x, y } = d
+                const r = size(+d.amount) / (zoomScale * 1.1)
+
+                cities.each(c => {
+                    const x1 = c.x
+                    const y1 = c.y
+                    const r1 = size(+c.amount) / (zoomScale * 1.1)
+
+                    const distance = Math.sqrt((x - x1) ** 2 + (y - y1) ** 2)
+                    
+                    if (distance < r + r1) {
+                        hoverCities.push(c)
+                    }
+                })
+            } else {
+                hoverCities.push(d)
+            }
+            
+            let tooltipContent = sortArrayOfObjects(hoverCities, "amount", false).map(c => {
+                return `
+                    <div class="flex items-center gap--8">
+                        <span style="color: var(--txt-secondary);">${c.name}:</span>
+                        <span style="color: var(--txt-primary);">${c.amount}</span>
+                    </div>
+                `
+            }).join('')
+            tooltip.innerHTML = tooltipContent
+        }
+    }
+    const mouseleave = function(event, d) {
+        tooltip.style.opacity = 0
+    }
+
+    // Main container
+    const g = svg.append("g")
+
+    // Draw the map
+    const map = g.append("g")
+        .selectAll("path")
+        .data(geoMap.value)
+        .enter()
+        .append("path")
+        .attr("stroke", "var(--geo-map)")
+        .attr("stroke-width", 1)
+        .attr("fill", "transparent")
+        .attr("d", d3.geoPath()
+            .projection(projection)
+        )
+
+    let cities
+    if (chartView.value === "countries") {
+        map
+            .on("mouseover", function(event, d) {
+                d3.select(this)
+                    .transition()
+                    .duration(200)
+                    .attr("stroke", "var(--brand)")
+                    .attr("stroke-width", 2 / zoomScale)
+                d3.select(this).raise()
+                mouseover(event, d)
+            })
+            .on("mousemove", mousemove)
+            .on("mouseleave", function(event, d) {
+                d3.select(this)
+                    .transition()
+                    .duration(200)
+                    .attr("stroke", "var(--geo-map)")
+                    .attr("stroke-width", 1 / zoomScale)
+                d3.select(this).lower()
+                mouseleave(event, d)
+            })
+        
+        map
+            .transition()
+            .duration(700)
+            .attr("fill", d => chartView.value === "countries"
+                ? d.amount
+                    ? countryColor(+d.amount)
+                    : "transparent"
+                : "transparent")
+    } else if (chartView.value === "cities") {
+        const lostCities = geoMap.value
+            .filter(c => c.amountLostCities > 0)
+            .map(c => {
+                const centroid = getCountryCentroid(c.id)
+                let coords
+                if (centroid) {
+                    coords = projection([+centroid[0], +centroid[1]])
+                } else {
+                    coords = path.centroid(c.geometry)
+                }
+                return {
+                    name: `Somewhere in ${c.properties.name}`,
+                    amount: c.amountLostCities,
+                    x: coords[0],
+                    y: coords[1],
+                }
+            })
+        nodeCityData.value = nodeCityData.value.map(c => {
+            const coords = projection([+c.latitude, +c.longitude])
+            return {
+                ...c,
+                x: coords[0],
+                y: coords[1],
+            }
+        })
+        const citiesData = [...nodeCityData.value, ...lostCities]
+
+        cities = g.append("g")
+            .selectAll("cities")
+            .data(citiesData)
+            .enter()
+            .append("circle")
+                .attr("transform", d => `translate(${d.x}, ${d.y})`)
+                // .attr("r", d => size(d.amount))
+                .attr("r", 0)
+                .style("fill", "var(--brand)")
+                .attr("fill-opacity", 0)
+                .on("mouseover", mouseover)
+                .on("mousemove", mousemove)
+                .on("mouseleave", mouseleave)
+        cities.transition()
+            .delay((d, i) => i * 3)
+            .duration(500)
+            .attr("r", d => size(+d.amount))
+            .attr("fill-opacity", 0.7)
+    }
+
+    // Legend
+    const legend = {
+        width: 220,
+        height: 10,
+        marginBottom: 40,
+        marginRight: 150,
+        marginLeft: 40,
+    }
+    
+    function legendCitiesX(i) {
+        let x = legend.marginLeft
+
+        if (!i) return x
+        
+        for (let ind = 0; ind < i; ind++) {
+            x = x + size(legendValues[ind]) * 2 + 30
+        }
+        x = x - size(legendValues[0]) + size(legendValues[i])
+
+        return x
+    }
+
+    let legendValues = []
+    let legendGroup, legendCitiesMarkers, legendCitiesLabels
+    if (!isMobile()) {
+        if (chartView.value === "countries") {
+            legendGroup = svg
+                .append("g")
+                .attr("transform", `translate(${legend.marginLeft}, ${height - legend.marginBottom})`)
+                .style("opacity", 0)
+            const defs = svg.append("defs")
+            const linearGradient = defs.append("linearGradient")
+                .attr("id", "legend-gradient")
+                .attr("x1", "0%")
+                .attr("x2", "100%")
+                .attr("y1", "0%")
+                .attr("y2", "0%")
+            
+            legendValues = [1, 25, 50, 100, countryMaxAmount]
+            legendValues.forEach((d, i, arr) => {
+                linearGradient.append("stop")
+                    .attr("offset", `${(i / (arr.length - 1)) * 100}%`)
+                    .attr("stop-color", countryColor(d))
+            })
+            
+            legendGroup.append("rect")
+                .attr("x", 0)
+                .attr("y", 10)
+                .attr("width", legend.width)
+                .attr("height", legend.height)
+                .style("fill", "url(#legend-gradient)")
+            
+            const legendScale = d3.scaleLinear()
+                .domain([1, countryMaxAmount])
+                .range([1, legend.width])
+
+            const legendAxis = d3.axisBottom(legendScale)
+                .tickValues(legendValues)
+                .tickFormat(d3.format("d"))
+
+            legendGroup.append("g")
+                .attr("transform", `translate(0, ${legend.marginBottom - 20})`)
+                .call(legendAxis)
+                .attr("color", "var(--txt-tertiary)")
+            
+            legendGroup
+                .transition()
+                .duration(1_000)
+                .style("opacity", 1)
+                
+        } else if (chartView.value === "cities") {
+            legendValues = [1, 25, 100]
+            legendCitiesMarkers = svg.append("g")
+                .selectAll("legendCircles")
+                .data(legendValues)
+                .enter()
+                .append("circle")
+                    .attr("cx", (d, i) => legendCitiesX(i))
+                    .attr("cy", d => height - legend.marginBottom + 20 - size(+d))
+                    .attr("r", d => size(+d))
+                    .style("fill", "var(--brand)")
+                    .attr("fill-opacity", 0)
+            legendCitiesMarkers
+                .transition()
+                .duration(1_000)
+                .attr("fill-opacity", 0.7)
+
+            legendCitiesLabels = svg.append("g")
+                .selectAll("legendLabels")
+                .data(legendValues)
+                .enter()
+                .append("text")
+                    .attr('x', (d, i) => legendCitiesX(i))
+                    .attr('y', height - legend.marginBottom + 15 + size(legendValues.pop()))
+                    .text(d => d)
+                    .style("font-size", 12)
+                    // .style("fill", "var(--txt-secondary)")
+                    .style("fill", "var(--txt-tertiary)")
+                    .attr('text-anchor', 'middle')
+                    .attr("fill-opacity", 0)
+            legendCitiesLabels
+                .transition()
+                .duration(1_000)
+                .attr("fill-opacity", 1)
+        }
+    }
+
+    // Add zoom functionality
+    const bounds = d3.geoPath().projection(projection).bounds({ type: "FeatureCollection", features: geoMap.value })
+    const [[x0, y0], [x1, y1]] = bounds
+    const zoom = d3.zoom()
+        .scaleExtent([1, 20])
+        .translateExtent([[x0, y0], [x1, y1]])
+        .on("zoom", (event) => {
+            zoomScale = event.transform.k
+            g.attr("transform", event.transform)
+            map.attr("stroke-width", 1 / zoomScale)
+            if (chartView.value === "countries" && legendValues.length) {
+                if (zoomScale > 3) {
+                    legendGroup
+                        .transition()
+                        .duration(1_000)
+                        .style("opacity", 0)
+                } else {
+                    legendGroup
+                        .transition()
+                        .duration(1_000)
+                        .style("opacity", 1)
+                }
+            } else if (chartView.value === "cities") {
+                if (zoomScale > 1) {
+                    cities.attr("r", d => size(+d.amount) / (zoomScale * 1.1))
+                    if (legendValues.length) {
+                        if (zoomScale > 3) {
+                            legendCitiesMarkers
+                                .transition()
+                                .duration(1_000)
+                                .attr("fill-opacity", 0)
+                            legendCitiesLabels
+                                .transition()
+                                .duration(1_000)
+                                .attr("fill-opacity", 0)
+                        } else {
+                            legendCitiesMarkers
+                                .transition()
+                                .duration(1_000)
+                                .attr("fill-opacity", 0.7)
+                            legendCitiesLabels
+                                .transition()
+                                .duration(1_000)
+                                .attr("fill-opacity", 1)
+                        }
+                    }
+                } else {
+                    cities.attr("r", d => size(+d.amount))
+                }
+            }
+        })
+
+    svg.call(zoom);
+
+    svg.on("wheel", (event) => event.preventDefault(), { passive: false })
+
+	if (chart.children[0]) chart.children[0].remove()
+	chart.append(svg.node())
+}
+
+onMounted( async () => {
+    isLoading.value = true
+    try {
+        const geoData = await d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
+        // const geoData = await d3.json("https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson")
+        if (geoData?.features.length) {
+            geoMap.value = geoData.features.filter(d => d.properties.name !== "Antarctica")
+            const countryData = await getNodeStats("country")
+            const cityData = (await getNodeStats("city")).filter(el => el.latitude)
+
+            nodeCityData.value = Object.values(cityData.reduce((acc, obj) => {
+                if (!acc[obj.name]) {
+                    acc[obj.name] = { ...obj }
+                } else {
+                    acc[obj.name].amount += obj.amount
+                }
+                return acc
+            }, {}))
+
+            nodeCityData.value.forEach(c => {
+                c.country = getCountryByCoordinatesOrCityName(c.name, c.latitude, c.longitude, geoData)
+            })        
+
+            const amountCityMap = nodeCityData.value.reduce((acc, { country, amount }) => {
+                if (acc[country]) {
+                    acc[country] += amount;
+                } else {
+                    acc[country] = amount;
+                }
+
+                return acc
+                }, {})
+            
+            const amountCountryMap = Object.fromEntries(
+                countryData.map(d => {
+                    const name = convertCountryCode(d.name)
+                    return name ? [name, d.amount] : null
+                })
+                .filter(Boolean)
+            )
+            
+            geoMap.value = geoMap.value.map(feature => ({
+                ...feature,
+                amount: amountCountryMap[feature.id] || 0,
+                amountLostCities: (amountCountryMap[feature.id] || 0) - (amountCityMap[feature.id] || 0),
+            }))
+            
+            
+            await buildChart(chartEl.value.wrapper)
+        }
+    } finally {
+        isLoading.value = false
+    }
+})
+
+watch(
+    () => chartView.value,
+    async () => {
+        await buildChart(chartEl.value.wrapper)
+    }
+)
+</script>
+
+<template>
+	<Flex direction="column" justify="start" gap="8" wide :class="$style.wrapper">
+        <Flex
+            @click="handleChangeChartView"
+            align="center"
+            gap="12"
+            :class="$style.chart_selector"
+            :style="{
+                background: `linear-gradient(to ${chartView === 'countries' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+            }"
+        >
+            <Icon
+                name="earth"
+                size="14"
+                :style="{ fill: `${chartView === 'countries' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
+            />
+
+            <Icon
+                name="city"
+                size="14"
+                :style="{ fill: `${chartView === 'cities' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
+            />
+        </Flex>
+
+        <Tooltip v-if="chartView === 'cities'" position="start" :class="$style.chart_info">
+            <Icon name="info" size="16" color="yellow" />
+
+            <template #content>
+                <Flex align="center" gap="2" :style="{ width: '200px' }">
+                    <Text size="12" weight="600" color="secondary">
+                        Somewhere in..
+                        <Text size="12" weight="400" color="secondary">
+                            means that it was not possible to determine the exact location.
+                        </Text>
+                    </Text>
+                    
+                </Flex>
+            </template>
+        </Tooltip>
+        
+        <Flex ref="chartEl" :class="$style.chart" />
+
+        <Flex v-if="isLoading" align="center" direction="column" gap="8" :class="$style.loader">
+            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 512 512">
+                <path id="france-path" fill="transparent" :d="loaderPath"/>
+            </svg>
+
+            <Text size="12" color="secondary">Loading map..</Text>
+        </Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+    width: 100%;
+	height: 100%;
+
+    position: relative;
+}
+
+.chart {
+    width: 100%;
+	height: 100%;
+
+	overflow: hidden;
+
+	& svg {
+		overflow: visible;
+        /* display: block; */
+	}
+}
+
+.chart_selector {
+    width: 52px;
+    position: absolute;
+    top: 8px;
+	right: 8px;
+
+	padding: 4px 6px;
+	box-shadow: inset 0 0 0 1px var(--op-10);
+	border-radius: 5px;
+	cursor: pointer;
+	transition: all 1s ease-in-out;
+}
+
+.chart_info {
+    position: absolute;
+    top: 8px;
+	left: 8px;
+}
+
+.loader{
+    position: absolute;
+    top: 30%;
+    right: 50%;
+    animation: blink 1s ease-in-out infinite;
+
+    path {
+        stroke: var(--txt-secondary);
+        stroke-width: 5;
+        stroke-dasharray: 1800;
+        stroke-dashoffset: 1800;
+        animation: drawPath 2s linear infinite;
+    }
+}
+
+/* .france_icon circle {
+    fill: var(--brand);
+    box-shadow: 0 0 0 4px var(--dark-mint);
+    animation: movePoint 2s linear infinite, blink 1s ease-in-out infinite;
+    offset-path: path('M283.4 19.83c-3.2 0-31.2 5.09-31.2 5.09c-1.3 41.61-30.4 78.48-90.3 84.88l-12.8-23.07l-25.1 2.48l11.3 60.09l-113.79-4.9l12.2 41.5C156.3 225.4 150.7 338.4 124 439.4c47 53 141.8 47.8 186 43.1c3.1-62.2 52.4-64.5 135.9-32.2c11.3-17.6 18.8-36 44.6-50.7l-46.6-139.5l-27.5 6.2c11-21.1 32.2-49.9 50.4-63.4l15.6-86.9c-88.6-6.3-146.4-46.36-199-96.17');
+    offset-distance: 103%;
+} */
+
+@keyframes drawPath {
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+/* @keyframes movePoint {
+    0% {
+        offset-distance: 0%;
+        transform: translate(0, 0);
+    }
+    100% {
+        offset-distance: 103%;
+        transform: translate(0, 0);
+    }
+} */
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.4;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1000px) {
+	.wrapper {
+		max-width: initial;
+		width: 100%;
+	}
+}
+</style>
diff --git a/components/modules/stats/InsightCard.vue b/components/modules/stats/InsightCard.vue
index 1108a0b5..277e205e 100644
--- a/components/modules/stats/InsightCard.vue
+++ b/components/modules/stats/InsightCard.vue
@@ -10,7 +10,7 @@ import DiffChip from "@/components/modules/stats/DiffChip.vue"
 import { abbreviate, capitilize, comma, formatBytes, shareOfTotal, shareOfTotalString } from "@/services/utils"
 
 /** API */
-import { fetch24hDiffs, fetchSummary } from "@/services/api/stats"
+import { fetchGeneralStats, fetchSummary } from "@/services/api/stats"
 
 const props = defineProps({
 	series: {
@@ -67,7 +67,7 @@ const getSeries = async () => {
 			},
 		]
 	} else {
-		data = await fetch24hDiffs({ name: props.series.name })	
+		data = await fetchGeneralStats({ name: props.series.name })	
 	}
 	
 	switch (props.series.name) {
diff --git a/components/modules/stats/RollupsActivityGraph.vue b/components/modules/stats/RollupsActivityGraph.vue
index ad4b5b72..edb5a248 100644
--- a/components/modules/stats/RollupsActivityGraph.vue
+++ b/components/modules/stats/RollupsActivityGraph.vue
@@ -19,9 +19,15 @@ const metrics = ref([
 </script>
 
 <template>
-    <Flex align="center" justify="between" wide :class="$style.chart_wrapper">
+    <Flex v-if="rollups?.length" align="center" justify="between" wide :class="$style.chart_wrapper">
         <ParallelCoordinatesChart :data="rollups" :metrics="metrics" />
     </Flex>
+    <Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
+        <Text size="13" weight="600" color="secondary" align="center"> No activity </Text>
+        <Text size="12" weight="500" height="160" color="tertiary" align="center">
+            There has been no rollup activity in the last 24 hours
+        </Text>
+    </Flex>
 </template>
 
 <style module>
@@ -36,4 +42,10 @@ const metrics = ref([
 	max-width: 300px;
 	max-height: 250px;
 }
+
+.empty {
+    width: 100%;
+    background: var(--card-background);
+	padding: 16px 0;
+}
 </style>
\ No newline at end of file
diff --git a/components/modules/stats/tabs/EcosystemTab.vue b/components/modules/stats/tabs/EcosystemTab.vue
new file mode 100644
index 00000000..fe0feba9
--- /dev/null
+++ b/components/modules/stats/tabs/EcosystemTab.vue
@@ -0,0 +1,146 @@
+<script setup>
+/** Stats Components */
+import GeoMap from "@/components/modules/stats/GeoMap.vue"
+import BarplotChartCard from "@/components/modules/stats/BarplotChartCard.vue";
+// import PieChartCard from "@/components/modules/stats/PieChartCard.vue"
+
+/** Constants */
+import { getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js"
+
+/** Services */
+import { capitilize, isMobile, sortArrayOfObjects } from "@/services/utils"
+
+/** API */
+import { fetchNodeStats } from "@/services/api/stats"
+
+const isLoading = ref(true)
+const series = computed(() => getSeriesByGroupAndType('Ecosystem'))
+
+const getNodeStats = async (name) => {
+	const data = await fetchNodeStats({ name })
+
+	if (!data.length) return []
+
+	return sortArrayOfObjects(data, "amount")
+}
+
+const prepareData = async () => {
+	isLoading.value = true
+
+	for (const s of series.value) {
+		const data = await getNodeStats(s.name)
+
+		let otherEntry = null
+		if (s.name === "nodetype") {
+			s.data = data.reduce((acc, d) => {
+				let name = d.name === "celestia-celestia" ? "Celestia" : capitilize(d.name);
+
+				if (name === "Unknown" || name === "Other") {
+					if (!otherEntry) {
+						otherEntry = { ...d, name: "Other" }
+						acc.push(otherEntry)
+					} else {
+						otherEntry.amount += d.amount
+					}
+				} else {
+					acc.push({ ...d, name })
+				}
+
+				return acc
+			}, [])
+
+			s.data = sortArrayOfObjects(s.data, "amount")
+		} else if (s.name === "version") {
+			s.data = data.sort((a, b) => {
+				const parseVersion = (version) => version.split('.').map(Number)
+				const [aMajor, aMinor, aPatch] = parseVersion(a.name)
+				const [bMajor, bMinor, bPatch] = parseVersion(b.name)
+
+				return aMajor - bMajor || aMinor - bMinor || aPatch - bPatch
+			})
+		}
+	}
+}
+
+onMounted(async () => {
+	await prepareData()
+
+	isLoading.value = false
+})
+</script>
+
+<template>
+    <Flex align="center" direction="column" gap="16" wide :class="$style.wrapper">
+        <Flex align="start" direction="column" gap="32" wide :class="$style.section">
+			<Text size="16" weight="600" color="primary" justify="start">Light Node Distribution</Text>
+
+			<GeoMap :class="$style.chart" />
+
+			<Flex v-if="!isLoading" align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
+				<BarplotChartCard
+					v-for="s in series"
+					:series="s"
+					:data="s.data"
+					:class="$style.chart_card"
+				/>
+			</Flex>
+		</Flex>
+    </Flex>
+</template>
+
+<style module>
+.wrapper {
+	max-width: calc(var(--base-width) + 48px);
+}
+
+.section {
+	margin-top: 20px;
+	max-width: 100%;
+}
+
+.charts_wrapper {
+	flex-wrap: wrap;
+}
+
+.chart {
+	width: 100%;
+	max-width: 1000px;
+	aspect-ratio: 16 / 10;
+	/* height: 640px; */
+}
+
+.chart_card {
+	width: 480px;
+	max-width: 480px;
+	max-height: 240px;
+	height: 240px;
+}
+
+@media (max-width: 1050px) {
+	.chart {
+		/* width: 700px; */
+		/* height: 280px; */
+	}
+}
+
+@media (max-width: 900px) {
+	.chart {
+		/* flex: 1; */
+		/* max-width: 500px; */
+		/* height: 280px; */
+	}
+}
+
+@media (max-width: 420px) {
+	.wrapper {
+		padding: 32px 0px;
+	}
+
+	.chart {
+		/* flex: 1; */
+		/* max-width: 340px; */
+		/* height: 380px; */
+		aspect-ratio: 4 / 5;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components/modules/stats/tabs/GeneralTab.vue b/components/modules/stats/tabs/GeneralTab.vue
index a15ba6a7..6c5508bc 100644
--- a/components/modules/stats/tabs/GeneralTab.vue
+++ b/components/modules/stats/tabs/GeneralTab.vue
@@ -14,7 +14,7 @@ import InsightCard from "@/components/modules/stats/InsightCard.vue"
 import { getInsightsByGroup, getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js"
 
 /** API */
-import { fetch24hDiffs } from "@/services/api/stats.js"
+import { fetchGeneralStats } from "@/services/api/stats.js"
 
 /** Store */
 import { useAppStore } from "@/store/app"
@@ -62,7 +62,7 @@ const insights = computed(() => getInsightsByGroup('General'))
 const get24hDiffs = async () => {
     isLoading.value = true
 
-	const data = await fetch24hDiffs({ name: 'changes_24h' })
+	const data = await fetchGeneralStats({ name: 'changes_24h' })
 	diffs24h.value = data
 
     isLoading.value = false
diff --git a/components/modules/stats/tabs/RollupsTab.vue b/components/modules/stats/tabs/RollupsTab.vue
index 5a8c99fa..c2c21d04 100644
--- a/components/modules/stats/tabs/RollupsTab.vue
+++ b/components/modules/stats/tabs/RollupsTab.vue
@@ -17,7 +17,7 @@ import Popover from "@/components/ui/Popover.vue"
 import { getSeriesByGroupAndType } from "@/services/constants/stats.js"
 
 /** Services */
-import { capitilize, capitalizeAndReplaceUnderscore } from "@/services/utils"
+import { capitilize, capitalizeAndReplaceUnderscore, isMainnet } from "@/services/utils"
 
 /** API */
 import { fetchRollups, fetchRollupsDailyStats } from "@/services/api/rollup.js"
@@ -266,7 +266,7 @@ watch(
 				</Flex>
 			</template>
 
-			<template v-if="!isLoading">
+			<template v-if="!isLoading && isMainnet()">
 				<Flex align="center" justify="between" wide :class="$style.segment">
 					<Text size="16" weight="600" color="primary" justify="start">Economics</Text>
 				</Flex>
diff --git a/package.json b/package.json
index 127f34db..c25ede42 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"codemirror": "^6.0.1",
 		"crypto-js": "^4.2.0",
 		"d3": "^7.8.5",
+		"d3-geo": "^3.1.1",
 		"d3-hierarchy": "^3.1.2",
 		"focus-trap": "7.5.2",
 		"iconv-lite": "^0.6.3",
diff --git a/pages/stats/index.vue b/pages/stats/index.vue
index e37841ce..ab47e717 100644
--- a/pages/stats/index.vue
+++ b/pages/stats/index.vue
@@ -5,10 +5,11 @@ import Button from "@/components/ui/Button.vue"
 /** Stats Tabs */
 import BlocksTab from "@/components/modules/stats/tabs/BlocksTab.vue"
 import GeneralTab from "@/components/modules/stats/tabs/GeneralTab.vue"
+import EcosystemTab from "@/components/modules/stats/tabs/EcosystemTab.vue"
 import RollupsTab from "@/components/modules/stats/tabs/RollupsTab.vue"
 
 /** Services */
-import { capitilize } from "@/services/utils"
+import { capitilize, isMainnet } from "@/services/utils"
 
 useHead({
 	title: "Statistics - Celestia Explorer",
@@ -61,8 +62,25 @@ useHead({
 const route = useRoute()
 const router = useRouter()
 
-const tabs = ref(['general', 'blocks', 'rollups'])
-const activeTab = ref(route.query.tab && tabs.value.includes(route.query.tab) ? route.query.tab : tabs.value[0])
+const tabs = ref([
+	{
+		name: "general",
+		visible: true,
+	},
+	{
+		name: "blocks",
+		visible: true,
+	},
+	{
+		name: "rollups",
+		visible: true,
+	},
+	{
+		name: "ecosystem",
+		visible: isMainnet(),
+	},
+])
+const activeTab = ref(route.query.tab && tabs.value.filter(t => t.visible).map(t => t.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name)
 
 const updateRouteQuery = () => {
 	router.replace({
@@ -117,8 +135,8 @@ watch(
 
 		<Flex align="center" justify="between" wide :class="$style.tabs_wrapper">
 			<Flex align="center" gap="16">
-				<Text v-for="t in tabs" @click="activeTab = t" size="14" color="tertiary" :class="[$style.tab, activeTab === t && $style.tab_active]">
-					{{ capitilize(t) }}
+				<Text v-for="t in tabs.filter(t => t.visible)" @click="activeTab = t.name" size="14" color="tertiary" :class="[$style.tab, activeTab === t.name && $style.tab_active]">
+					{{ capitilize(t.name) }}
 				</Text>
 			</Flex>
 
@@ -133,6 +151,7 @@ watch(
 		<GeneralTab v-if="activeTab === 'general'" />
 		<BlocksTab v-if="activeTab === 'blocks'" />
 		<RollupsTab v-if="activeTab === 'rollups'" @onUpdateSection="handleSectionUpdate" />
+		<EcosystemTab v-if="activeTab === 'ecosystem'" />
 	</Flex>
 </template>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 166bbc19..7d3711f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -78,6 +78,116 @@ dependencies:
     specifier: ^0.21.0
     version: 0.21.0(vite@5.4.14)
 
+<<<<<<< HEAD
+  .:
+    dependencies:
+      '@amplitude/analytics-browser':
+        specifier: ^2.3.3
+        version: 2.6.1
+      '@codemirror/lang-json':
+        specifier: ^6.0.1
+        version: 6.0.1
+      '@keplr-wallet/cosmos':
+        specifier: ^0.12.70
+        version: 0.12.76
+      '@openzeppelin/merkle-tree':
+        specifier: ^1.0.6
+        version: 1.0.6
+      '@pinia/nuxt':
+        specifier: 0.4.11
+        version: 0.4.11(rollup@4.21.0)(vue@3.4.38)
+      '@sentry/vue':
+        specifier: ^8.50.0
+        version: 8.50.0(pinia@2.1.6(vue@3.4.38))(vue@3.4.38)
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.9.0(vue@3.4.38)
+      buffer:
+        specifier: ^6.0.3
+        version: 6.0.3
+      codemirror:
+        specifier: ^6.0.1
+        version: 6.0.1(@lezer/common@1.2.1)
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
+      d3:
+        specifier: ^7.8.5
+        version: 7.9.0
+      d3-geo:
+        specifier: ^3.1.1
+        version: 3.1.1
+      d3-hierarchy:
+        specifier: ^3.1.2
+        version: 3.1.2
+      focus-trap:
+        specifier: 7.5.2
+        version: 7.5.2
+      iconv-lite:
+        specifier: ^0.6.3
+        version: 0.6.3
+      js-sha256:
+        specifier: ^0.11.0
+        version: 0.11.0
+      lean-qr:
+        specifier: ^2.3.2
+        version: 2.3.4
+      long:
+        specifier: ^5.2.3
+        version: 5.2.3
+      luxon:
+        specifier: 3.4.3
+        version: 3.4.3
+      nuxt-site-config:
+        specifier: ^2.1.2
+        version: 2.2.11(@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3))(@unocss/webpack@0.58.9(rollup@4.21.0)(webpack@5.91.0))(@vue/compiler-core@3.4.38)(magicast@0.3.5)(nuxt@3.12.4(@parcel/watcher@2.4.1)(@types/node@20.12.2)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(sass@1.66.1)(terser@5.30.1)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(webpack-sources@3.2.3))(postcss@8.4.41)(qrcode@1.5.3)(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3)(webpack@5.91.0)
+      pinia:
+        specifier: 2.1.6
+        version: 2.1.6(vue@3.4.38)
+      protobufjs:
+        specifier: ^7.2.6
+        version: 7.2.6
+      qrcode:
+        specifier: ^1.5.3
+        version: 1.5.3
+      uuid:
+        specifier: 9.0.1
+        version: 9.0.1
+      vite-plugin-node-polyfills:
+        specifier: ^0.21.0
+        version: 0.21.0(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))
+    devDependencies:
+      '@nuxt/devtools':
+        specifier: latest
+        version: 1.6.0(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3)
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      nuxt:
+        specifier: 3.12.4
+        version: 3.12.4(@parcel/watcher@2.4.1)(@types/node@20.12.2)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(sass@1.66.1)(terser@5.30.1)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(webpack-sources@3.2.3)
+      nuxt-og-image:
+        specifier: 3.0.0-rc.52
+        version: 3.0.0-rc.52(@lezer/common@1.2.1)(@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3))(@unocss/webpack@0.58.9(rollup@4.21.0)(webpack@5.91.0))(@vue/compiler-core@3.4.38)(magicast@0.3.5)(nuxt@3.12.4(@parcel/watcher@2.4.1)(@types/node@20.12.2)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(sass@1.66.1)(terser@5.30.1)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(webpack-sources@3.2.3))(postcss@8.4.41)(qrcode@1.5.3)(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3)(webpack@5.91.0)
+      nuxt-simple-sitemap:
+        specifier: ^4.2.0
+        version: 4.4.1(@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3))(@unocss/webpack@0.58.9(rollup@4.21.0)(webpack@5.91.0))(@vue/compiler-core@3.4.38)(h3@1.12.0)(magicast@0.3.5)(nuxt@3.12.4(@parcel/watcher@2.4.1)(@types/node@20.12.2)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(sass@1.66.1)(terser@5.30.1)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(webpack-sources@3.2.3))(postcss@8.4.41)(qrcode@1.5.3)(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))(vue@3.4.38)(webpack-sources@3.2.3)(webpack@5.91.0)
+      sass:
+        specifier: 1.66.1
+        version: 1.66.1
+      sass-loader:
+        specifier: 13.3.2
+        version: 13.3.2(sass@1.66.1)(webpack@5.91.0)
+      unenv:
+        specifier: ^1.9.0
+        version: 1.9.0
+      vite-plugin-top-level-await:
+        specifier: ^1.4.4
+        version: 1.4.4(rollup@4.21.0)(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))
+      vite-plugin-wasm:
+        specifier: ^3.3.0
+        version: 3.3.0(vite@5.4.2(@types/node@20.12.2)(sass@1.66.1)(terser@5.30.1))
+=======
 devDependencies:
   '@nuxt/devtools':
     specifier: latest
@@ -109,6 +219,7 @@ devDependencies:
   vite-plugin-wasm:
     specifier: ^3.3.0
     version: 3.4.1(vite@5.4.14)
+>>>>>>> dev
 
 packages:
 
diff --git a/services/api/stats.js b/services/api/stats.js
index db99538e..8e184c77 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -1,7 +1,7 @@
 /** Services */
-import { tvlServiceURL, useServerURL } from "@/services/config"
+import { nodeStatsURL, tvlServiceURL, useServerURL } from "@/services/config"
 
-export const fetch24hDiffs = async ({ name }) => {
+export const fetchGeneralStats = async ({ name }) => {
 	try {
 		const data = await $fetch(`${useServerURL()}/stats/${name}`)
 		return data
@@ -175,3 +175,17 @@ export const fetchSquareSize = async (from) => {
 		console.error(error)
 	}
 }
+
+export const fetchNodeStats = async ({ name, from, to }) => {
+	try {
+		const url = new URL(`${nodeStatsURL}/stats/${name}`)
+
+		if (from) url.searchParams.append("from", from)
+		if (to) url.searchParams.append("to", to)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
\ No newline at end of file
diff --git a/services/config.js b/services/config.js
index 97280b7e..feadefd8 100644
--- a/services/config.js
+++ b/services/config.js
@@ -108,5 +108,6 @@ export const getStartChainDate = () => {
 }
 
 export const blockscoutURL = "https://celestia-l2-router.k8s-dev.blockscout.com/api/v1/celestia/l2BatchMetadata"
+export const nodeStatsURL = "https://node-stats.celenium.io/v1"
 export const faucetURL = "https://api-faucet.celenium.io/v1"
 export const tvlServiceURL = "https://tvl.celenium.io/v1"
diff --git a/services/constants/stats.js b/services/constants/stats.js
index 0b0cf214..4a0f06d4 100644
--- a/services/constants/stats.js
+++ b/services/constants/stats.js
@@ -120,7 +120,19 @@ export const STATS_SERIES = [
 			},
 		],
 	},
-]
+	{
+		group: 'Ecosystem',
+		series: [
+			{
+				name: 'nodetype',
+				title: 'node type',
+			},
+			{
+				name: 'version',
+				title: 'version',
+			},
+		],
+	},]
 
 // TO DO: Replace forEach with for
 export function getSeriesByGroupAndType(group, type) {
@@ -223,3 +235,316 @@ export const STATS_TIMEFRAMES = [
 		timeframe: 'month',
 	},
 ]
+
+const countryCodesMap = {
+	AF: 'AFG',
+	AL: 'ALB',
+	DZ: 'DZA',
+	AS: 'ASM',
+	AD: 'AND',
+	AO: 'AGO',
+	AI: 'AIA',
+	AQ: 'ATA',
+	AG: 'ATG',
+	AR: 'ARG',
+	AM: 'ARM',
+	AW: 'ABW',
+	AU: 'AUS',
+	AT: 'AUT',
+	AZ: 'AZE',
+	BS: 'BHS',
+	BH: 'BHR',
+	BD: 'BGD',
+	BB: 'BRB',
+	BY: 'BLR',
+	BE: 'BEL',
+	BZ: 'BLZ',
+	BJ: 'BEN',
+	BM: 'BMU',
+	BT: 'BTN',
+	BO: 'BOL',
+	BA: 'BIH',
+	BW: 'BWA',
+	BV: 'BVT',
+	BR: 'BRA',
+	IO: 'IOT',
+	BN: 'BRN',
+	BG: 'BGR',
+	BF: 'BFA',
+	BI: 'BDI',
+	KH: 'KHM',
+	CM: 'CMR',
+	CA: 'CAN',
+	CV: 'CPV',
+	KY: 'CYM',
+	CF: 'CAF',
+	TD: 'TCD',
+	CL: 'CHL',
+	CN: 'CHN',
+	CX: 'CXR',
+	CC: 'CCK',
+	CO: 'COL',
+	KM: 'COM',
+	CG: 'COG',
+	CD: 'COD',
+	CK: 'COK',
+	CR: 'CRI',
+	CI: 'CIV',
+	HR: 'HRV',
+	CU: 'CUB',
+	CY: 'CYP',
+	CZ: 'CZE',
+	DK: 'DNK',
+	DJ: 'DJI',
+	DM: 'DMA',
+	DO: 'DOM',
+	EC: 'ECU',
+	EG: 'EGY',
+	SV: 'SLV',
+	GQ: 'GNQ',
+	ER: 'ERI',
+	EE: 'EST',
+	ET: 'ETH',
+	FK: 'FLK',
+	FO: 'FRO',
+	FJ: 'FJI',
+	FI: 'FIN',
+	FR: 'FRA',
+	GF: 'GUF',
+	PF: 'PYF',
+	TF: 'ATF',
+	GA: 'GAB',
+	GM: 'GMB',
+	GE: 'GEO',
+	DE: 'DEU',
+	GH: 'GHA',
+	GI: 'GIB',
+	GR: 'GRC',
+	GL: 'GRL',
+	GD: 'GRD',
+	GP: 'GLP',
+	GU: 'GUM',
+	GT: 'GTM',
+	GN: 'GIN',
+	GW: 'GNB',
+	GY: 'GUY',
+	HT: 'HTI',
+	HM: 'HMD',
+	VA: 'VAT',
+	HN: 'HND',
+	HK: 'HKG',
+	HU: 'HUN',
+	IS: 'ISL',
+	IN: 'IND',
+	ID: 'IDN',
+	IR: 'IRN',
+	IQ: 'IRQ',
+	IE: 'IRL',
+	IL: 'ISR',
+	IT: 'ITA',
+	JM: 'JAM',
+	JP: 'JPN',
+	JO: 'JOR',
+	KZ: 'KAZ',
+	KE: 'KEN',
+	KI: 'KIR',
+	KP: 'PRK',
+	KR: 'KOR',
+	KW: 'KWT',
+	KG: 'KGZ',
+	LA: 'LAO',
+	LV: 'LVA',
+	LB: 'LBN',
+	LS: 'LSO',
+	LR: 'LBR',
+	LY: 'LBY',
+	LI: 'LIE',
+	LT: 'LTU',
+	LU: 'LUX',
+	MO: 'MAC',
+	MG: 'MDG',
+	MW: 'MWI',
+	MY: 'MYS',
+	MV: 'MDV',
+	ML: 'MLI',
+	MT: 'MLT',
+	MH: 'MHL',
+	MQ: 'MTQ',
+	MR: 'MRT',
+	MU: 'MUS',
+	YT: 'MYT',
+	MX: 'MEX',
+	FM: 'FSM',
+	MD: 'MDA',
+	MC: 'MCO',
+	MN: 'MNG',
+	MS: 'MSR',
+	MA: 'MAR',
+	MZ: 'MOZ',
+	MM: 'MMR',
+	NA: 'NAM',
+	NR: 'NRU',
+	NP: 'NPL',
+	NL: 'NLD',
+	NC: 'NCL',
+	NZ: 'NZL',
+	NI: 'NIC',
+	NE: 'NER',
+	NG: 'NGA',
+	NU: 'NIU',
+	NF: 'NFK',
+	MP: 'MNP',
+	MK: 'MKD',
+	NO: 'NOR',
+	OM: 'OMN',
+	PK: 'PAK',
+	PW: 'PLW',
+	PS: 'PSE',
+	PA: 'PAN',
+	PG: 'PNG',
+	PY: 'PRY',
+	PE: 'PER',
+	PH: 'PHL',
+	PN: 'PCN',
+	PL: 'POL',
+	PT: 'PRT',
+	PR: 'PRI',
+	QA: 'QAT',
+	RE: 'REU',
+	RO: 'ROU',
+	RU: 'RUS',
+	RW: 'RWA',
+	SH: 'SHN',
+	KN: 'KNA',
+	LC: 'LCA',
+	PM: 'SPM',
+	VC: 'VCT',
+	WS: 'WSM',
+	SM: 'SMR',
+	ST: 'STP',
+	SA: 'SAU',
+	SN: 'SEN',
+	SC: 'SYC',
+	SL: 'SLE',
+	SG: 'SGP',
+	SK: 'SVK',
+	SI: 'SVN',
+	SB: 'SLB',
+	SO: 'SOM',
+	ZA: 'ZAF',
+	GS: 'SGS',
+	ES: 'ESP',
+	LK: 'LKA',
+	SD: 'SDN',
+	SR: 'SUR',
+	SJ: 'SJM',
+	SZ: 'SWZ',
+	SE: 'SWE',
+	CH: 'CHE',
+	SY: 'SYR',
+	TW: 'TWN',
+	TJ: 'TJK',
+	TZ: 'TZA',
+	TH: 'THA',
+	TL: 'TLS',
+	TG: 'TGO',
+	TK: 'TKL',
+	TO: 'TON',
+	TT: 'TTO',
+	TN: 'TUN',
+	TR: 'TUR',
+	TM: 'TKM',
+	TC: 'TCA',
+	TV: 'TUV',
+	UG: 'UGA',
+	UA: 'UKR',
+	AE: 'ARE',
+	GB: 'GBR',
+	US: 'USA',
+	UM: 'UMI',
+	UY: 'URY',
+	UZ: 'UZB',
+	VU: 'VUT',
+	VE: 'VEN',
+	VN: 'VNM',
+	VG: 'VGB',
+	VI: 'VIR',
+	WF: 'WLF',
+	EH: 'ESH',
+	YE: 'YEM',
+	ZM: 'ZMB',
+	ZW: 'ZWE',
+	AX: 'ALA',
+	BQ: 'BES',
+	CW: 'CUW',
+	GG: 'GGY',
+	IM: 'IMN',
+	JE: 'JEY',
+	ME: 'MNE',
+	BL: 'BLM',
+	MF: 'MAF',
+	RS: 'SRB',
+	SX: 'SXM',
+	XK: 'XKK'
+}
+export const convertCountryCode = (alpha2) => countryCodesMap[alpha2.toUpperCase()]
+
+const countryCentroidMap = {
+	CAN: [-110, 60],
+	USA: [-100, 41],
+	FRA: [2.5, 47],
+	GBR: [-1.8, 53],
+	IDN: [114, -1],
+	// NOR: [12, 63],
+	NZL: [172.3, -42.5],
+}
+export const getCountryCentroid = (name) => countryCentroidMap[name]
+
+const cityCountryMap = {
+	sakaiminato: "JPN",
+	istanbul: "TUR",
+	imperia: "ITA",
+	ko_samui: "THA",
+	fatih: "TUR",
+	nicosia: "CYP",
+}
+export const getCountryByCity = (city) => cityCountryMap[city.toLowerCase().replace(" ", "_")]
+
+const loaderPathes = [
+	{
+		name: "France",
+		path: "M283.4 19.83c-3.2 0-31.2 5.09-31.2 5.09c-1.3 41.61-30.4 78.48-90.3 84.88l-12.8-23.07l-25.1 2.48l11.3 60.09l-113.79-4.9l12.2 41.5C156.3 225.4 150.7 338.4 124 439.4c47 53 141.8 47.8 186 43.1c3.1-62.2 52.4-64.5 135.9-32.2c11.3-17.6 18.8-36 44.6-50.7l-46.6-139.5l-27.5 6.2c11-21.1 32.2-49.9 50.4-63.4l15.6-86.9c-88.6-6.3-146.4-46.36-199-96.17",
+		weight: 0.2,
+	},
+	{
+		name: "Africa",
+		path: "m201.56 19.495l-87.79 9.131l-73.745 94.814v52.676l56.186 61.805l64.615-13.344l49.164 9.832l-10.535 37.926l33.711 61.103l-16.855 42.842l39.79 116.225l53.62-8.768l49.164-55.484l4.213-38.629l31.605-23.879l-6.322-69.531l83.594-106.994l-51.989 7.263l-79.363-138.359l-125.016-8.428z",
+		weight: 0.2,
+	},
+	{
+		name: "Mongolia",
+		path: "m18.83 183.4l73.19-29.3L165.6 185c6.3-17 8.6-42.6 26.3-44.3c22.3-2.1 42.9 15.1 47.1 39.9l54-1.6l54.5 22.8l55-35.2l32.3 7.9s-20.3 32.6-9.7 42.4c9.1 8.5 35.5-10.9 35.5-10.9l32.6 22.1l-87.1 62.7c-6.7-4.7-16.4-13.5-27.1-5c-9.9 7.9-6 21.9 1 33.8c-32.9 31-71 43-109.8 51.7l-127.8-30l-92.59-70c9.92-34.7-14.36-61-30.98-87.9",
+		weight: 0.2,
+	},
+	{
+		name: "Brazil",
+		path: "M292.8 41.71c16.1 58.89 125.3 78.19 197.9 116.19c1.6 35.2-14.4 72.6-56.7 102.3c2.9 70.2-41.8 110.2-114.3 132.4c-.3 33.2-12.7 64-47.3 90.3l-59-36.4l47.4-34.2c-1.8-25.6-9.6-52.3-55-67.3l-26.3-93.2c-54.5-10.4-51.9-31.3-56.3-50.9l-64.93 20.4c-49.154-31-51.902-75.4 6.26-83.4l6.99-72.78l51.18 9.12L133 37.03l49.6-7.9l20.7 37.33z",
+		weight: 0.2,
+	},
+	{
+		name: "Australia",
+		path: "m380.37 28.839l-27.24 100.215l-64-48l17.405-34.46l-83.863 8.079l-13.541 42.38l-35.512-25.482l-67.16 85.62l-83.008 48.593l34.81 156.752l38.87 6.518l112-64l74.38 52.082l21.62-28.094l32 72.012L424 415.452l64.549-126.398l-6.014-64.703l-65.404-79.297l-36.762-116.215z",
+		weight: 0.2,
+	}
+]
+export function getRandomLoaderPath() {
+	const randomNum = Math.random()
+
+	let cumWeight = 0
+	for (let p of loaderPathes.filter(el => el.weight <= 1)) {
+		cumWeight += p.weight
+		if (randomNum <= cumWeight) {
+			return p.path
+		}
+	}
+}
\ No newline at end of file