diff --git a/app.vue b/app.vue
index 9ce1dc5d..cb40de99 100644
--- a/app.vue
+++ b/app.vue
@@ -23,6 +23,7 @@ import { useSettingsStore } from "@/store/settings"
 import { useEnumStore } from "@/store/enums"
 import { useLegalStore } from "@/store/legal"
 import { useNotificationsStore } from "@/store/notifications"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
@@ -30,6 +31,7 @@ const settingsStore = useSettingsStore()
 const enumStore = useEnumStore()
 const legalStore = useLegalStore()
 const notificationsStore = useNotificationsStore()
+const rollupsRankingStore = useRollupsRankingStore()
 
 bookmarksStore.$subscribe((mutation, state) => {
 	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
@@ -40,6 +42,9 @@ settingsStore.$subscribe((mutation, state) => {
 legalStore.$subscribe((mutation, state) => {
 	localStorage.setItem("legal", JSON.stringify(state.legal))
 })
+rollupsRankingStore.$subscribe((mutation, state) => {
+	localStorage.setItem("rollups_ranking", JSON.stringify(state.rollups_ranking))
+})
 
 onMounted(async () => {
 	if (localStorage.bookmarks) {
@@ -51,6 +56,7 @@ onMounted(async () => {
 	}
 
 	settingsStore.init()
+	rollupsRankingStore.init()
 
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
diff --git a/assets/icons.json b/assets/icons.json
index 4ea1806e..269524e9 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -141,6 +141,7 @@
 	"time": "M 16.764 13.35 C 18.836 15.422 20 18.233 20 21.163 C 20 22.178 19.178 23 18.163 23 L 5.837 23 C 4.823 23 4 22.177 4 21.163 C 4 18.233 5.164 15.422 7.236 13.35 L 8.586 12 L 7.236 10.65 C 5.164 8.578 4 5.767 4 2.837 C 4 1.822 4.822 1 5.837 1 L 18.163 1 C 19.178 1 20 1.822 20 2.837 C 20 5.767 18.836 8.578 16.764 10.65 L 15.414 12 Z M 13 10.999 C 13.176 10.999 13.264 10.999 13.353 10.983 C 13.488 10.958 13.627 10.9 13.74 10.823 C 13.815 10.771 13.877 10.709 14 10.586 L 15.35 9.236 C 16.612 7.974 17.472 6.367 17.823 4.617 C 17.915 4.159 17.961 3.93 17.873 3.673 C 17.787 3.452 17.633 3.265 17.433 3.138 C 17.2 3 16.923 3 16.37 3 L 7.63 3 C 7.078 3 6.801 3 6.567 3.138 C 6.367 3.265 6.213 3.452 6.127 3.673 C 6.039 3.93 6.085 4.159 6.177 4.617 C 6.528 6.367 7.388 7.975 8.65 9.237 L 10 10.585 C 10.122 10.707 10.183 10.768 10.257 10.819 C 10.371 10.898 10.511 10.956 10.647 10.981 C 10.736 10.997 10.823 10.997 10.997 10.997 L 13 10.998 Z",
 	"lumina": "M2 12C2 9.29789 3.07174 6.84606 4.81332 5.04646C5.00725 4.84607 5.33334 4.98908 5.33334 5.26794V14.8925C5.33334 15.1359 5.53072 15.3333 5.7742 15.3333H8.16668C8.33331 15.3472 8.66669 15.4667 8.66669 15.8333V18.2258C8.66669 18.4693 8.86403 18.6667 9.10753 18.6667H14.8925C15.136 18.6667 15.3333 18.4693 15.3333 18.2258V15.8333C15.3333 15.4667 15.6667 15.3472 15.8333 15.3333H18.2258C18.4693 15.3333 18.6667 15.1359 18.6667 14.8925V12.4408C18.6667 12.1974 18.4693 12 18.2258 12H15.7742C15.5307 12 15.3333 12.1974 15.3333 12.4408V14.8336C15.3332 15.2001 14.9999 15.3194 14.8334 15.3333H9.16669C9.00006 15.3194 8.6668 15.2001 8.66669 14.8336V2.97849C8.66669 2.72917 8.79042 2.52083 9.13543 2.41667C9.13984 2.41534 9.18748 2.40094 9.18748 2.40094C10.0796 2.13997 11.0235 2 12 2C17.5229 2 22 6.47716 22 12C22 17.5228 17.5229 22 12 22C6.47715 22 2 17.5228 2 12Z",
 	"clock-forward": "M 10 2 C 6.274 2 3.042 4.573 2.205 8.203 C 1.368 11.834 3.149 15.562 6.499 17.193 C 9.849 18.824 13.881 17.926 16.223 15.028 C 16.575 14.615 17.192 14.558 17.613 14.899 C 18.035 15.241 18.108 15.856 17.777 16.286 C 15.88 18.637 13.021 20.002 10 20 C 4.477 20 0 15.523 0 10 C 0 4.477 4.477 0 10 0 C 15.134 0 19.365 3.87 19.935 8.851 L 19.993 8.793 C 20.385 8.414 21.009 8.419 21.395 8.805 C 21.781 9.191 21.786 9.815 21.407 10.207 L 19.407 12.207 C 19.017 12.597 18.384 12.597 17.994 12.207 L 15.993 10.207 C 15.614 9.815 15.619 9.191 16.005 8.805 C 16.391 8.419 17.015 8.414 17.407 8.793 L 17.975 9.361 C 17.975 9.361 14.171 2 10 2 Z M 11 9.465 L 13.555 11.168 C 14.015 11.475 14.139 12.095 13.832 12.555 C 13.525 13.015 12.905 13.139 12.445 12.832 L 9.445 10.832 C 9.167 10.646 9 10.334 9 10 L 9 5 C 9 4.448 9.448 4 10 4 C 10.552 4 11 4.448 11 5 Z",
+	"clock-forward-2": "M21,10.12H14.22L16.96,7.3C14.23,4.6 9.81,4.5 7.08,7.2C4.35,9.91 4.35,14.28 7.08,17C9.81,19.7 14.23,19.7 16.96,17C18.32,15.65 19,14.08 19,12.1H21C21,14.08 20.12,16.65 18.36,18.39C14.85,21.87 9.15,21.87 5.64,18.39C2.14,14.92 2.11,9.28 5.62,5.81C9.13,2.34 14.76,2.34 18.27,5.81L21,3V10.12M12.5,8V12.25L16,14.33L15.28,15.54L11,13V8H12.5Z",
 	"calendar-date": "M 15 2.001 C 15.476 2.003 15.891 2.013 16.252 2.043 C 16.814 2.089 17.331 2.188 17.816 2.435 C 18.569 2.818 19.181 3.43 19.564 4.183 C 19.811 4.668 19.91 5.185 19.956 5.748 C 20 6.288 20 6.953 20 7.758 L 20 16.242 C 20 17.046 20 17.711 19.956 18.252 C 19.91 18.814 19.811 19.331 19.564 19.816 C 19.181 20.569 18.569 21.181 17.816 21.564 C 17.331 21.811 16.814 21.91 16.251 21.956 C 15.711 22 15.046 22 14.241 22 L 5.758 22 C 4.954 22 4.29 22 3.748 21.956 C 3.186 21.91 2.669 21.811 2.184 21.564 C 1.431 21.181 0.819 20.569 0.436 19.816 C 0.189 19.331 0.09 18.814 0.044 18.251 C 0 17.711 0 17.046 0 16.241 L 0 7.758 C 0 6.954 0 6.29 0.044 5.748 C 0.09 5.186 0.189 4.669 0.436 4.184 C 0.819 3.431 1.431 2.819 2.184 2.436 C 2.669 2.189 3.186 2.09 3.748 2.044 C 4.109 2.015 4.525 2.005 5 2.002 L 5 1 C 5 0.448 5.448 0 6 0 C 6.552 0 7 0.448 7 1 L 7 2 L 13 2 L 13 1 C 13 0.448 13.448 0 14 0 C 14.552 0 15 0.448 15 1 Z M 5 5 L 5 4.002 C 4.554 4.005 4.205 4.014 3.911 4.038 C 3.473 4.073 3.248 4.138 3.092 4.218 C 2.716 4.41 2.41 4.716 2.218 5.092 C 2.138 5.248 2.073 5.472 2.038 5.911 C 2 6.361 2 6.943 2 7.8 L 2 8 L 18 8 L 18 7.8 C 18 6.943 18 6.361 17.962 5.911 C 17.927 5.473 17.862 5.248 17.782 5.092 C 17.59 4.716 17.284 4.41 16.908 4.218 C 16.752 4.138 16.528 4.073 16.089 4.038 C 15.727 4.013 15.363 4.001 15 4.002 L 15 5 C 15 5.552 14.552 6 14 6 C 13.448 6 13 5.552 13 5 L 13 4 L 7 4 L 7 5 C 7 5.552 6.552 6 6 6 C 5.448 6 5 5.552 5 5 Z M 9.445 11.168 L 7.945 12.168 C 7.495 12.467 7.364 13.07 7.649 13.529 C 7.934 13.988 8.533 14.137 9 13.866 L 9 16 L 8.75 16 C 8.198 16 7.75 16.448 7.75 17 C 7.75 17.552 8.198 18 8.75 18 L 11.25 18 C 11.802 18 12.25 17.552 12.25 17 C 12.25 16.448 11.802 16 11.25 16 L 11 16 L 11 12 C 11 11.631 10.797 11.292 10.472 11.118 C 10.147 10.944 9.752 10.963 9.445 11.168 Z",
 	"merge": "M7.04652 9.86171C8.74809 9.4017 10 7.84705 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 7.86384 3.27477 9.42994 5 9.87398V21C5 21.5523 5.44772 22 6 22C6.55228 22 7 21.5523 7 21V15.0001C7.28228 15.3764 7.59237 15.7345 7.92893 16.0711C9.59483 17.737 11.788 18.7544 14.1162 18.9609C14.5465 20.7059 16.1221 22 18 22C20.2091 22 22 20.2091 22 18C22 15.7909 20.2091 14 18 14C16.153 14 14.5983 15.2519 14.1383 16.9535C12.3334 16.758 10.6389 15.9526 9.34315 14.6569C8.04737 13.3611 7.24201 11.6666 7.04652 9.86171Z",
 	"eye": "M 5.077 6.707 C 6.805 5.265 9.138 4 12 4 C 14.862 4 17.195 5.265 18.923 6.707 C 20.649 8.148 21.833 9.814 22.426 10.753 L 22.45 10.791 C 22.568 10.976 22.72 11.217 22.797 11.553 C 22.859 11.848 22.859 12.152 22.797 12.447 C 22.72 12.783 22.567 13.024 22.45 13.209 L 22.426 13.247 C 21.833 14.186 20.649 15.852 18.923 17.293 C 17.195 18.735 14.862 20 12 20 C 9.138 20 6.805 18.735 5.077 17.293 C 3.35 15.852 2.167 14.186 1.574 13.247 L 1.55 13.209 C 1.389 12.978 1.272 12.72 1.203 12.447 C 1.141 12.152 1.141 11.848 1.203 11.553 C 1.28 11.216 1.433 10.976 1.55 10.791 L 1.574 10.753 C 2.167 9.814 3.35 8.148 5.077 6.707 Z M 12 16 C 14.209 16 16 14.209 16 12 C 16 9.791 14.209 8 12 8 C 9.791 8 8 9.791 8 12 C 8 14.209 9.791 16 12 16 Z M 14 12 C 14 13.105 13.105 14 12 14 C 10.895 14 10 13.105 10 12 C 10 10.895 10.895 10 12 10 C 13.105 10 14 10.895 14 12 Z",
@@ -205,5 +206,7 @@
 	"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"
+	"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",
+	"commit": "M17,12C17,14.42 15.28,16.44 13,16.9V21H11V16.9C8.72,16.44 7,14.42 7,12C7,9.58 8.72,7.56 11,7.1V3H13V7.1C15.28,7.56 17,9.58 17,12M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z",
+	"laurel": "M16.956 2.057c.355.124.829.375 1.303.796a3.77 3.77 0 0 1 1.246 2.204c.173.989-.047 1.894-.519 2.683l-.123.194q-.097.147-.196.272q.066.234.117.471q.26-.178.545-.307c.851-.389 1.727-.442 2.527-.306q.226.04.346.076a1 1 0 0 1 .689.712l.029.13q.015.08.03.18a4.45 4.45 0 0 1-.324 2.496a3.94 3.94 0 0 1-1.71 1.85l-.242.12a4.23 4.23 0 0 1-2.234.349A9 9 0 0 1 17.997 15c.37.016.748.093 1.128.24c.732.28 1.299.758 1.711 1.367a3.95 3.95 0 0 1 .654 1.613a1 1 0 0 1-.356.917a3.8 3.8 0 0 1-.716.443c-.933.455-1.978.588-3.043.179l-.032-.015l-.205-.086a3.6 3.6 0 0 1-1.33-1.069l-.143-.197a4 4 0 0 1-.26-.433a6 6 0 0 1-.927.511q.18.262.337.56a7.4 7.4 0 0 1 .66 1.747a1 1 0 0 1-1.95.444l-.028-.11a6 6 0 0 0-.449-1.143C12.706 19.323 12.338 19 12 19s-.706.323-1.048.969a5.6 5.6 0 0 0-.367.874l-.082.269l-.028.11a1 1 0 0 1-1.95-.444a7.3 7.3 0 0 1 .66-1.747q.158-.298.337-.561a6.4 6.4 0 0 1-.93-.508a4 4 0 0 1-.256.43c-.366.541-.855.98-1.473 1.267l-.238.1c-.994.382-1.97.292-2.855-.091l-.188-.087a3.8 3.8 0 0 1-.716-.443a1 1 0 0 1-.356-.917a3.95 3.95 0 0 1 .654-1.613a3.6 3.6 0 0 1 1.71-1.368c.38-.146.758-.223 1.13-.24a9 9 0 0 1-.445-1.023a4.23 4.23 0 0 1-2.233-.348a4 4 0 0 1-.916-.587l-.207-.191a4 4 0 0 1-.724-.977l-.105-.216a4.45 4.45 0 0 1-.265-2.806a1 1 0 0 1 .69-.712q.119-.036.345-.076c.801-.135 1.678-.082 2.53.308q.283.129.545.304q.048-.235.112-.47a5 5 0 0 1-.194-.272c-.556-.832-.83-1.806-.642-2.877l.05-.242a3.75 3.75 0 0 1 1.027-1.803l.169-.159a4 4 0 0 1 1.303-.796a1 1 0 0 1 .975.178c.2.168.462.446.719.83c.556.833.83 1.807.642 2.878a3.77 3.77 0 0 1-1.246 2.204c-.303.27-.607.47-.879.61A7.5 7.5 0 0 0 7 10.728C7 14.23 9.285 17 12 17s5-2.77 5-6.276a7.6 7.6 0 0 0-.253-1.967a4.3 4.3 0 0 1-.881-.61a3.77 3.77 0 0 1-1.246-2.204c-.188-1.07.086-2.045.642-2.877c.257-.385.52-.663.72-.831a1 1 0 0 1 .974-.178"
 }
diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index 4c4a465a..2f12f539 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -45,6 +45,9 @@ $grayscale: (
 	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
+	--legendary: #ff5a17;
+	--epic: #7448E7;
+	--rare: #007AFF;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -116,6 +119,9 @@ $grayscale: (
 	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
+	--legendary: #ff5a17;
+	--epic: #7448E7;
+	--rare: #007AFF;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -178,6 +184,9 @@ $grayscale: (
 	--mint: #18d2a5;
 	--neutral-mint: #109373;
 	--dark-mint: #c4f9eb;
+	--legendary: #ff5a17;
+	--epic: #7448E7;
+	--rare: #007AFF;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
diff --git a/assets/styles/text.scss b/assets/styles/text.scss
index 28652bd7..fd23115f 100644
--- a/assets/styles/text.scss
+++ b/assets/styles/text.scss
@@ -66,6 +66,9 @@ $textColors: (
 	"red": "--red",
 	"yellow": "--yellow",
 	"purple": "--purple",
+	"legendary": "--legendary",
+	"epic": "--epic",
+	"rare": "--rare",
 );
 
 @each $key, $value in $textColors {
diff --git a/components/Connection.vue b/components/Connection.vue
index 7d092d9c..0c0c7e0f 100644
--- a/components/Connection.vue
+++ b/components/Connection.vue
@@ -30,13 +30,20 @@ switch (hostname) {
 	case "mocha-4.celenium.io":
 		appStore.network = mocha
 		break
+	
+	case "mammoth.celenium.io":
+		appStore.network = mammoth
+		break
 
 	case "mammoth.celenium.io":
  		appStore.network = mammoth
  		break
 
 	// case "arabica.celenium.io":
-	// case "localhost":
+	case "localhost":
+		appStore.network = arabica
+		break
+	
 	default:
 		appStore.network = arabica
 		break
diff --git a/components/Feed.vue b/components/Feed.vue
index 6c28169a..d2a0cafd 100644
--- a/components/Feed.vue
+++ b/components/Feed.vue
@@ -3,7 +3,8 @@
 import { DateTime } from "luxon"
 
 /** Services */
-import { comma, formatBytes, abbreviate } from "@/services/utils"
+import { abbreviate, comma, formatBytes, isMainnet, roundTo } from "@/services/utils"
+import { getRankCategory } from "@/services/constants/rollups"
 
 /** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
@@ -13,7 +14,9 @@ import { fetchPriceSeries } from "@/services/api/stats"
 
 /** Store */
 import { useAppStore } from "@/store/app"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
 const appStore = useAppStore()
+const rollupRankingStore = useRollupsRankingStore()
 
 const head = computed(() => appStore.lastHead)
 const currentPrice = computed(() => appStore.currentPrice)
@@ -22,6 +25,18 @@ const totalSupply = computed(() => head.value.total_supply / 1_000_000)
 const totalSupplyUSD = computed(() => totalSupply.value * currentPrice.value?.close)
 const totalFees = computed(() => head.value.total_fee / 1_000_000)
 const totalFeesUSD = computed(() => totalFees.value * currentPrice.value?.close)
+const topRollup = computed(() => {
+	let rankCategory = getRankCategory(roundTo(rollupRankingStore?.rollups_ranking?.top_rollup?.rank / 10, 0))
+	return {
+		slug: rollupRankingStore?.rollups_ranking?.top_rollup?.slug,
+		name: rollupRankingStore?.rollups_ranking?.top_rollup?.name,
+		rank: {
+			name: rankCategory?.name,
+			score: rollupRankingStore?.rollups_ranking?.top_rollup?.rank,
+			color: rankCategory?.color,
+		}
+	}
+})
 
 const series = ref([])
 const price = reactive({
@@ -49,14 +64,46 @@ onMounted(async () => {
 <template>
 	<Flex tag="section" justify="center" wide :class="$style.wrapper">
 		<Flex align="center" justify="between" gap="24" wide :class="$style.container">
-			<Flex align="center" gap="20" :class="$style.stats">
+			<Flex align="center" gap="8" :class="$style.stats">
+				<template v-if="isMainnet()">
+					<NuxtLink :to="`/rollup/rank/${topRollup?.slug}`">
+						<Tooltip>
+							<Flex align="center" gap="6" :class="$style.stat">
+								<Icon v-if="topRollup?.name" name="laurel" size="14" :color="topRollup?.rank?.color" :style="{marginTop: '1px'}" />
+								<Icon v-else name="laurel" size="14" color="tertiary" :class="$style.icon" :style="{marginTop: '1px'}" />
+								<Flex align="center" gap="4">
+									<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Top Rollup:</Text>
+
+									<Text v-if="topRollup?.name" size="12" weight="600" color="secondary" noWrap :class="$style.value"> {{ topRollup?.name }} </Text>
+									<Skeleton v-else w="40" h="12" />
+								</Flex>
+							</Flex>
+
+							<template #content>
+								<Flex direction="column" gap="8">
+									<Flex align="center" justify="between" gap="8">
+										<Text size="12" weight="500" color="tertiary">Rank:</Text>
+										<Text size="12" weight="600" :color="topRollup?.rank?.color"> {{ topRollup?.rank?.name }} </Text>
+									</Flex>
+									<Flex align="center" justify="between" gap="8">
+										<Text size="12" weight="500" color="tertiary">Score:</Text>
+										<Text size="12" weight="600" color="secondary"> {{ topRollup?.rank?.score }}% </Text>
+									</Flex>
+								</Flex>
+							</template>
+						</Tooltip>
+					</NuxtLink>
+
+					<div :class="$style.dot" />
+				</template>
+
 				<Tooltip>
 					<Flex align="center" gap="6" :class="$style.stat">
 						<Icon name="tx" size="12" color="secondary" :class="$style.icon" />
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Txs:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(head.total_tx) }}</Text>
+							<Text v-if="head.total_tx" size="12" weight="600" noWrap :class="$style.value">{{ abbreviate(head.total_tx) }}</Text>
 							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
@@ -74,10 +121,10 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Supply:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">
+							<Text v-if="head.total_supply" size="12" weight="600" noWrap :class="$style.value">
 								{{ abbreviate(totalSupply, 2) }} TIA
 							</Text>
-							<Skeleton v-else w="55" h="12" />
+							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
@@ -92,10 +139,10 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Blobs Size:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">{{
+							<Text v-if="head.total_blobs_size" size="12" weight="600" noWrap :class="$style.value">{{
 								formatBytes(head.total_blobs_size)
 							}}</Text>
-							<Skeleton v-else w="60" h="12" />
+							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
@@ -110,10 +157,10 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Total Fees:</Text>
 
-							<Text v-if="head" size="12" weight="600" noWrap :class="$style.value">
+							<Text v-if="head.total_fee" size="12" weight="600" noWrap :class="$style.value">
 								{{ abbreviate(parseInt(totalFees)) }} TIA
 							</Text>
-							<Skeleton v-else w="55" h="12" />
+							<Skeleton v-else w="40" h="12" />
 						</Flex>
 					</Flex>
 
@@ -132,7 +179,7 @@ onMounted(async () => {
 						<Skeleton v-else w="36" h="12" />
 					</Flex>
 
-					<Flex v-if="!isNaN(price.diff)" align="center" gap="4">
+					<Flex v-if="price.diff" align="center" gap="4">
 						<Icon v-if="price.side === 'rise'" name="arrow-circle-right-up" size="12" color="neutral-green" />
 						<Icon v-else-if="price.side === 'fall'" name="arrow-circle-right-down" size="12" color="red" />
 
@@ -167,18 +214,20 @@ onMounted(async () => {
 <style module>
 .wrapper {
 	height: 32px;
+	max-width: var(--base-width);
 
 	border-top: 1px solid var(--op-5);
 	border-bottom: 1px solid var(--op-5);
-
 	background: var(--feed-background);
 }
 
 .container {
 	max-width: var(--base-width);
 	height: 100%;
+	overflow: hidden;
+	overflow-x: scroll;
 
-	margin: 0 24px;
+	margin: 0 12px;
 
 	&::-webkit-scrollbar {
 		display: none;
@@ -199,7 +248,7 @@ onMounted(async () => {
 }
 
 .value {
-	color: var(--op-40);
+	color: var(--txt-secondary);
 }
 
 .stat:hover {
@@ -212,7 +261,7 @@ onMounted(async () => {
 	}
 
 	.value {
-		color: var(--txt-secondary);
+		color: var(--txt-primary);
 	}
 }
 
diff --git a/components/Icon.vue b/components/Icon.vue
index d871f674..06ba82e6 100644
--- a/components/Icon.vue
+++ b/components/Icon.vue
@@ -9,14 +9,25 @@ const props = defineProps({
 	color: { type: String, default: null },
 	rotate: { type: [String, Number], default: 0 },
 	fill: { type: Boolean, default: false },
+	scale: { type: [String, Number], default: 1 },
+	loading: { type: Boolean, default: false },
 })
 
 const styles = computed(() => {
-	return {
-		minWidth: `${props.size}px`,
-		minHeight: `${props.size}px`,
-		transform: props.rotate ? `rotate(${props.rotate}deg)` : null,
+	const s = {
+		minWidth:     `${props.size}px`,
+		minHeight:    `${props.size}px`,
+		transformBox: "view-box",
+		transformOrigin: "center center",
+		transform: "",
 	}
+
+	const ops = []
+	if (props.rotate) ops.push(`rotate(${props.rotate}deg)`)
+	if (props.scale != 1) ops.push(`scale(${props.scale})`)
+	if (ops.length)  s.transform = ops.join(" ")
+
+	return s
 })
 
 const classes = computed(() => {
@@ -37,7 +48,7 @@ const isSplitted = () => {
 </script>
 
 <template>
-	<svg viewBox="0 0 24 24" :width="size" :height="size" :style="styles" :class="classes" role="img">
+	<svg viewBox="0 0 24 24" :width="size" :height="size" :style="styles" :class="[classes, loading && $style.loading]" role="img">
 		<path v-if="!isSplitted(name)" :d="getIcon(name)" />
 		<template v-else>
 			<path v-if="!Array.isArray(getIcon(name))" :d="getIcon(name)" :style="{ opacity: path.opacity }" />
@@ -53,3 +64,23 @@ const isSplitted = () => {
 		</template>
 	</svg>
 </template>
+
+<style module>
+.loading {
+	animation: skeleton 1s ease-in-out infinite;
+}
+
+@keyframes skeleton {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index f33389bf..4b6f398b 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -96,6 +96,7 @@ const mainLinks = reactive([
 				path: "/stats?tab=ecosystem",
 				queryParam: {tab: "ecosystem"},
 				show: false,
+				// show: isMainnet(),
 			},
 		],
 	},
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index ae8f4211..ee8c8c3d 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -18,7 +18,7 @@ import FeeCalculator from "./custom/FeeCalculator.vue"
 
 /** Services */
 import amp from "@/services/amp"
-import { isMac, isPrefersDarkScheme } from "@/services/utils/general"
+import { isMac, isPrefersDarkScheme, getNetworkName } from "@/services/utils/general"
 import { capitilize } from "@/services/utils/strings"
 
 /** API */
@@ -39,6 +39,7 @@ const notificationsStore = useNotificationsStore()
 const appConfig = useAppConfig()
 
 const theme = useCookie("theme", { default: () => "dark" })
+const showPromoBackground = useCookie("showPromoBackground", { default: () => true })
 
 const route = useRoute()
 const router = useRouter()
@@ -766,23 +767,6 @@ const rawDeveloperActions = [
 			})
 		},
 	},
-	{
-		type: "callback",
-		icon: "settings",
-		title: "Toggle Search Scoring",
-		subtitle: "Command",
-		runText: "Reset",
-		callback: () => {
-			notificationsStore.create({
-				notification: {
-					type: "info",
-					icon: "info",
-					title: `Search scoring is not available`,
-					autoDestroy: true,
-				},
-			})
-		},
-	},
 	{
 		type: "callback",
 		icon: "stars",
@@ -817,6 +801,36 @@ const developerGroup = computed(() => {
 })
 
 const rawOtherActions = [
+	{
+		type: "callback",
+		icon: "settings",
+		title: "Toggle Promo Background",
+		subtitle: "Command",
+		runText: "Toggle",
+		callback: () => {
+			if (getNetworkName() !== "Mammoth") {
+				notificationsStore.create({
+					notification: {
+						type: "info",
+						icon: "info",
+						title: `Available for the mammoth network only`,
+						autoDestroy: true,
+					},
+				})
+				return
+			}
+
+			showPromoBackground.value = !showPromoBackground.value
+			notificationsStore.create({
+				notification: {
+					type: "info",
+					icon: "info",
+					title: `Promo background ${showPromoBackground.value ? "enabled" : "disabled"}`,
+					autoDestroy: true,
+				},
+			})
+		},
+	},
 	{
 		type: "callback",
 		icon: "terminal",
diff --git a/components/modals/BlobModal.vue b/components/modals/BlobModal.vue
index 7d8a7450..a2af80d5 100644
--- a/components/modals/BlobModal.vue
+++ b/components/modals/BlobModal.vue
@@ -165,7 +165,7 @@ const handlePreviewContent = () => {
 	} else {
 		if (!showPreviewText.value) {
 			showPreviewText.value = true
-			contentPreviewText.value = atob(blob.value.data)
+			contentPreviewText.value = blob.value.data
 		} else {
 			showPreviewText.value = false
 			contentPreviewText.value = ""
diff --git a/components/modals/ChartModal.vue b/components/modals/ChartModal.vue
index 1fdd28b1..0085afff 100644
--- a/components/modals/ChartModal.vue
+++ b/components/modals/ChartModal.vue
@@ -11,7 +11,7 @@ import Modal from "@/components/ui/Modal.vue"
 /** Stats Components/Constants */
 import BarChart from "@/components/modules/stats/BarChart.vue"
 import LineChart from "@/components/modules/stats/LineChart.vue"
-import SquareSizeChart from "@/components/modules/stats/SquareSizeChart.vue"
+import BarplotStakedChart from "@/components/modules/stats/BarplotStakedChart.vue"
 
 /** Store */
 import { useCacheStore } from "@/store/cache"
@@ -43,6 +43,7 @@ watch(
 	<Modal :show="show" @onClose="emit('onClose')" fullscreen disable-trap>
         <LineChart v-if="chartView === 'line'" :series="series" />
 		<BarChart v-else-if="chartView === 'bar'" :series="series" />
+		<BarplotStakedChart v-else-if="chartView === 'barplot-stacked'" :series="series" />
 	</Modal>
 </template>
 
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index 17cc7236..7c9cecf1 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -20,6 +20,7 @@ import APIModal from "./APIModal.vue"
 import LightNodeModal from "./LightNodeModal.vue"
 import LightNodeSettingsModal from "./LightNodeSettingsModal.vue"
 import ConnectModal from "./ConnectModal.vue"
+import RollupRankModal from "./RollupRankModal.vue"
 
 /** Store */
 import { useModalsStore } from "@/store/modals"
@@ -48,4 +49,5 @@ const modalsStore = useModalsStore()
 	<LightNodeSettingsModal :show="modalsStore.modals.lightNodeSettings" @onClose="modalsStore.close('lightNodeSettings')" />
 	<ConnectModal :show="modalsStore.modals.connect" @onClose="modalsStore.close('connect')" />
 	<ChartModal :show="modalsStore.modals.chart" @onClose="modalsStore.close('chart')" />
+	<RollupRankModal :show="modalsStore.modals.rollupRank" @onClose="modalsStore.close('rollupRank')" />
 </template>
diff --git a/components/modals/ODSModal.vue b/components/modals/ODSModal.vue
index 552729d1..3ac7e798 100644
--- a/components/modals/ODSModal.vue
+++ b/components/modals/ODSModal.vue
@@ -8,7 +8,7 @@ import Spinner from "@/components/ui/Spinner.vue"
 
 /** Services */
 import amp from "@/services/amp"
-import { capitalizeAndReplaceUnderscore, comma, getNamespaceIDFromBase64, shortHex } from "@/services/utils";
+import { capitalizeAndReplace, comma, getNamespaceIDFromBase64, shortHex } from "@/services/utils";
 
 /** Store */
 import { useCacheStore } from "@/store/cache"
@@ -248,7 +248,7 @@ watch(
 						<Flex align="start" justify="start" direction="column" gap="4" wide>
 							<Text size="12" weight="600" color="primary">{{ getNamespaceName(item) }}</Text>
 
-							<Text size="11" weight="500" color="tertiary">{{ capitalizeAndReplaceUnderscore(item.type) }}</Text>
+							<Text size="11" weight="500" color="tertiary">{{ capitalizeAndReplace(item.type, "_") }}</Text>
 						</Flex>
 					</Flex>
 				</Flex>
diff --git a/components/modals/RollupRankModal.vue b/components/modals/RollupRankModal.vue
new file mode 100644
index 00000000..ff663f0a
--- /dev/null
+++ b/components/modals/RollupRankModal.vue
@@ -0,0 +1,453 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+
+/** Services */
+import { roundTo } from "@/services/utils"
+
+/** Store */
+import { useCacheStore } from "@/store/cache"
+const cacheStore = useCacheStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const rank = ref({})
+const rollup = ref({})
+const metrics = ref([
+	{
+		key: "day_blobs_count",
+		name: "Blobs count",
+		coefficient: 0.2,
+		type: "Quantitative",
+	},
+	{
+		key: "avg_pfb_size",
+		name: "Avg PFB Size",
+		coefficient: 0.3,
+		type: "Quantitative",
+	},
+	{
+		key: "last_message_time",
+		name: "Last activity time",
+		coefficient: 0.3,
+		type: "Time-Based",
+	},
+	{
+		key: "commits_weekly",
+		name: "Weekly commits",
+		coefficient: 0.2,
+		type: "Quantitative",
+	},
+	{
+		key: "last_pushed_at",
+		name: "Last pushed",
+		coefficient: 0.2,
+		type: "Time-Based",
+	},
+])
+
+const getMetricValue = (key) => {
+	const coefficient = metrics.value.find(m => m.key === key)?.coefficient
+	const metricValue = +rank.value?.ranking[key]?.score / +coefficient
+
+	return roundTo(metricValue, 2)
+}
+watch(
+	() => props.show,
+	() => {
+		if (props.show) {
+			rank.value = cacheStore.selectedRollupRank
+			rollup.value = cacheStore.selectedRollup
+
+			metrics.value = metrics.value.map(m => {
+				return {
+					...m,
+					metricValue: getMetricValue(m.key),
+				}
+			})
+		} else {
+			rank.value = null
+			rollup.value = null
+		}
+	},
+)
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="550" disable-trap>
+		<Flex direction="column" gap="24" wide>
+			<Text size="14" weight="600" color="primary">Rollups Activity Rank Calculation</Text>
+
+			<Flex direction="column" gap="16" wide :class="$style.wrapper">
+				<Text size="12" color="secondary" :style="{ lineHeight: '1.4' }">
+					This score reflects a rollup’s overall activity by aggregating its key performance indicators.
+				</Text>
+
+				<Flex direction="column" gap="8">
+					<Text size="13" weight="600" color="secondary">Main Rating Formula</Text>
+
+					<Flex align="center" justify="center" :class="$style.formula_wrapper">
+						<Flex align="center" justify="center">
+							<Icon name="laurel" size="18" color="tertiary" :style="{ paddingBottom: '2px' }" />
+							<math>
+								<mrow>
+									<mo>=</mo>
+									<msub><mi>M</mi><mn>1</mn></msub>
+									<mo>⋅</mo>
+									<msub><mi>K</mi><mn>1</mn></msub>
+									<mo>+</mo>
+									<msub><mi>M</mi><mn>2</mn></msub>
+									<mo>⋅</mo>
+									<msub><mi>K</mi><mn>2</mn></msub>
+									<mo>+</mo>
+									<mo>⋯</mo>
+									<mo>+</mo>
+									<msub><mi>M</mi><mi>N</mi></msub>
+									<mo>⋅</mo>
+									<msub><mi>K</mi><mi>n</mi></msub>
+								</mrow>
+							</math>
+						</Flex>
+					</Flex>
+
+					<Text size="12" color="secondary" :style="{ lineHeight: '1.4' }">
+						In this equation:
+						<ul>
+							<li>
+								<Text size="13" weight="600" color="secondary">M</Text>
+								is a normalized metric value between 0 and 100.
+							</li>
+							<li>
+								<Text size="13" weight="600" color="secondary">K</Text>
+								is the weight assigned to that metric; the sum of all 
+								<Text size="13" weight="600" color="secondary">K</Text>
+								equals 1.
+							</li>
+						</ul>
+					</Text>					
+				</Flex>
+
+				<Text size="12" color="secondary" :style="{ lineHeight: '1.4' }">
+					We use two metric categories: Quantitative Metrics and Time-Based Metrics
+				</Text>
+
+				<Flex direction="column" gap="8" wide>
+					<Text size="13" weight="600" color="secondary">Here are the formulas for each metric type.</Text>
+
+					<Flex align="center" justify="center" direction="column" gap="16" wide :class="$style.formula_wrapper">
+						<Flex align="center" justify="center" :class="$style.quantitative_metric">
+							<Flex :class="$style.part_1">
+								<math>
+									<mrow>
+										<mi>quantitative</mi>
+										<mo>(</mo>
+										<mi>value</mi><mo>,</mo><mi>maxValue</mi>
+										<mo>)</mo>
+									</mrow>
+								</math>
+							</Flex>
+							<Flex :class="$style.part_2">
+								<math>
+									<mrow>
+										<mo>=</mo>
+										<mi>min</mi>
+										<mo>(</mo>
+										<mfrac>
+											<mi>value</mi>
+											<mi>maxValue</mi>
+										</mfrac>
+										<mo>,</mo><mn>1</mn>
+										<mo>)</mo>
+									</mrow>
+								</math>
+							</Flex>
+						</Flex>
+
+						<div :class="$style.divider" />
+
+						<Flex align="center" justify="center" :class="$style.time_based_metric">
+							<Flex :class="$style.part_1">
+								<math>
+									<mrow>
+										<mi>timeBased</mi>
+										<mo>(</mo>
+										<mi>maxTime</mi><mo>,</mo><mi>lastTime</mi><mo>,</mo><mi>t</mi><mo>,</mo><mi>timeframe</mi>
+										<mo>)</mo>
+									</mrow>
+								</math>
+							</Flex>
+							<Flex :class="$style.part_2">
+								<math>
+									<mrow>
+										<mo>=</mo>
+										<mi>exp</mi>
+										<mo>(</mo>
+										<mo>−</mo>
+										<mfrac>
+											<mi>diff</mi>
+											<mi>t</mi>
+										</mfrac>
+										<mo>)</mo>
+									</mrow>
+								</math>
+							</Flex>
+						</Flex>
+					</Flex>
+
+					<Text size="12" color="secondary" :style="{ lineHeight: '1.4' }">
+						Where:
+						<ul>
+							<li>
+								<div :class="$style.inline_formula_wrapper">
+										<mi>diff</mi>
+										<mo>=</mo>
+										<mi>maxTime</mi>
+										<mo>-</mo>
+										<mi>lastTime</mi>
+								</div>
+								in the chosen <mi :class="$style.inline_formula_wrapper">timeframe</mi>.
+							</li>
+							<li>
+								<mi :class="$style.inline_formula_wrapper" :style="{ padding: '1px 4px' }">t</mi>
+								 is the <strong>decay period</strong> (time constant) that controls how quickly the metric fades: 
+								 after a time span of 
+								 <mi :class="$style.inline_formula_wrapper" :style="{ padding: '1px 4px' }">t</mi>
+								 , the value drops to 
+								 <msup :class="$style.inline_formula_wrapper"><mi>e</mi><mo>−1</mo></msup>
+							</li>
+						</ul>
+					</Text>
+				</Flex>
+
+				<table :class="$style.table_metric">
+					<thead>
+						<tr>
+							<th>
+								<Text size="12" color="tertiary"> Metric </Text>
+							</th>
+							<th>
+								<Text size="12" color="tertiary"> Coefficient (K) </Text>
+							</th>
+							<th>
+								<Text size="12" color="tertiary"> Type </Text>
+							</th>
+							<th>
+								<Flex align="center" gap="8">
+									<Flex align="center" justify="center" :class="$style.avatar_container">
+										<img :src="rollup.logo" :class="$style.avatar_image" />
+									</Flex>
+									<Text size="12" color="tertiary"> Metric value (M)</Text>
+								</Flex>
+							</th>
+						</tr>
+					</thead>
+
+					<tbody>
+						<tr v-for="m in metrics">
+							<td>
+								<Flex align="center" justify="start">
+									<Text size="12" color="primary">
+										{{ m.name }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" justify="center">
+									<Text size="12" color="primary">
+										{{ m.coefficient }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" justify="center">
+									<Text size="12" color="primary">
+										{{ m.type }}
+									</Text>
+								</Flex>
+							</td>
+							<td>
+								<Flex align="center" justify="center">
+									<Text size="12" color="primary">
+										{{ m.metricValue }}
+									</Text>
+								</Flex>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+
+				<Flex align="center" justify="center" :class="$style.formula_wrapper">
+					<Flex align="center" justify="center" :class="$style.rank_calculation">
+						<Flex :class="$style.part_1">
+							<math>
+								<mrow>
+									<template v-for="(m, i) in metrics.slice(0, 4)" :key="m.key">
+										<mn> {{ m.metricValue }} </mn>
+										<mo>⋅</mo>
+										<mn> {{ m.coefficient }} </mn>
+										<mo v-if="i < metrics.slice(0, 4).length - 1">+</mo>
+									</template>
+								</mrow>
+							</math>
+						</Flex>
+						<Flex align="center" gap="6" :class="$style.part_2">
+							<math>
+								<mrow>
+									<template v-for="(m, i) in metrics.slice(4)" :key="m.key">
+										<mo>+ </mo>
+										<mn> {{ m.metricValue }} </mn>
+										<mo>⋅</mo>
+										<mn> {{ m.coefficient }} </mn>
+									</template>
+									<mo>=</mo>
+									<mn :style="{ color: `var(--${rank.ranking.rank.category.color})`, fontWeight: '800'}"> {{ rank.ranking.rank.score }} </mn>
+								</mrow>
+							</math>
+							<Icon name="laurel" size="20" :color="rank.ranking.rank.category.color" />
+						</Flex>
+					</Flex>
+				</Flex>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.formula_wrapper{
+	padding: 10px;
+	background-color: var(--op-5);
+	border-radius: 6px;
+}
+
+.inline_formula_wrapper {
+	display: inline-block;
+	padding: 4px;
+	background-color: var(--op-5);
+	border-radius: 6px;
+	color: var(--txt-secondary);
+}
+
+math {
+	display: block;
+	color: var(--txt-tertiary);
+}
+
+.divider {
+	width: 100%;
+	height: 1px;
+
+	background: var(--op-5);
+
+	margin: -12px;
+	opacity: 0;
+}
+
+.table_metric {
+	width: 100%;
+	border-collapse: collapse;
+
+	& th,
+	& td {
+		border: none;
+		padding: 10px 12px;
+	}
+
+	& tbody tr + tr th,
+	& tbody tr + tr td {
+		border-top: 1px solid var(--op-5);
+	}
+
+	& th + th,
+	& td + td {
+		border-left: 1px solid var(--op-5);
+	}
+
+	& thead {
+		border-bottom: 1px solid var(--op-5);
+	}
+	& thead th {
+		text-align: center;
+		padding-bottom: 8px;
+	}
+
+	& tbody td:first-child {
+		padding-left: 16px;
+	}
+}
+
+.avatar_container {
+	position: relative;
+	min-width: 20px;
+	min-height: 20px;
+	width: 20px;
+	height: 20px;
+	overflow: hidden;
+	border-radius: 50%;
+}
+
+.avatar_image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+@media (max-width: 550px) {
+	.rank_calculation {
+		width: 100%;
+		flex-direction: column;
+		align-items: start;
+		gap: 8px;
+
+		& .part_1 {
+			width: 100%;
+			justify-items: start;
+		}
+		& .part_2 {
+			width: 100%;
+			align-items: center;
+			justify-content: end;
+		}
+	}
+}
+
+@media (max-width: 520px) {
+	.time_based_metric {
+		width: 100%;
+		flex-direction: column;
+		gap: 8px;
+
+		& .part_1 {
+			width: 100%;
+			justify-items: start;
+		}
+		& .part_2 {
+			width: 100%;
+			justify-content: end;
+		}
+	}
+
+	.divider {
+		margin: -4px;
+		opacity: 1;
+	}
+}
+@media (max-width: 450px) {
+	.quantitative_metric {
+		width: 100%;
+		flex-direction: column;
+		gap: 8px;
+
+		& .part_1 {
+			width: 100%;
+			justify-items: start;
+		}
+		& .part_2 {
+			width: 100%;
+			justify-content: end;
+		}
+	}
+}
+</style>
diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index c2ee0a30..d822e2f7 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -584,7 +584,6 @@ watch(
 		}
 	},
 )
-
 watch(
 	() => page.value,
 	() => {
@@ -627,7 +626,12 @@ watch(
 		}
 	},
 )
-
+watch(
+	() => msgTypes.value,
+	() => {
+		filters.message_type = msgTypes.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
 watch(
 	() => showEnded.value,
 	() => {
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index e44fb9b9..2de7fc25 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -15,8 +15,9 @@ import BlobsTable from "./tables/BlobsTable.vue"
 import NamespacesTable from "./tables/NamespacesTable.vue"
 
 /** Services */
-import { capitilize, comma, formatBytes, truncateDecimalPart } from "@/services/utils"
+import { capitilize, comma, formatBytes, isMainnet, roundTo, truncateDecimalPart } from "@/services/utils"
 import { exportToCSV } from "@/services/utils/export"
+import { getRankCategory } from "@/services/constants/rollups"
 
 /** API */
 import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "@/services/api/rollup"
@@ -24,9 +25,10 @@ import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "
 /** Store */
 import { useCacheStore } from "@/store/cache"
 import { useNotificationsStore } from "@/store/notifications"
-import { capitalize } from "vue"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
 const cacheStore = useCacheStore()
 const notificationsStore = useNotificationsStore()
+const rollupRankingStore = useRollupsRankingStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -55,36 +57,53 @@ const isRefetching = ref(false)
 const namespaces = ref([])
 const blobs = ref([])
 
-const tagNames = ref(['stack', 'type', 'vm', 'provider', 'category'])
-const tags = computed(() => tagNames.value.reduce((res, tagName) => {
-	if (props.rollup[tagName]) {
-		let tag = {}
-		tag.name = tagName === 'vm' ? 'VM' : capitilize(tagName)
-		switch (tagName) {
-			case 'vm':
-				tag.value = props.rollup[tagName].toUpperCase()
-				break
-			case 'category':
-				tag.value = getCategoryDisplayName(props.rollup[tagName])
-				break
-			default:
-				tag.value = capitalize(props.rollup[tagName])
-				break
-		}
-
-		res.push(tag)
+const rollupRanking = computed(() => {
+	if (!rollupRankingStore?.initialized || !isMainnet()) return null
+	
+	let rollup_ranking = rollupRankingStore?.rollups_ranking?.ranking[Object.keys(rollupRankingStore?.rollups_ranking?.ranking).find(key => key === props.rollup.slug)]
+	rollup_ranking.rank = {
+		category: getRankCategory(roundTo(rollup_ranking?.ranking?.rank / 10, 0)),
+		score: rollup_ranking?.ranking?.rank,
 	}
 
-	return res
-}, []))
+	return rollup_ranking
+})
+
+const rollupColor = ref()
+const rollupColorAlpha = ref()
+
+const tagNames = ref(["stack", "type", "vm", "provider", "category"])
+const tags = computed(() =>
+	tagNames.value.reduce((res, tagName) => {
+		if (props.rollup[tagName]) {
+			let tag = {}
+			tag.name = tagName === "vm" ? "VM" : capitilize(tagName)
+			switch (tagName) {
+				case "vm":
+					tag.value = props.rollup[tagName].toUpperCase()
+					break
+				case "category":
+					tag.value = getCategoryDisplayName(props.rollup[tagName])
+					break
+				default:
+					tag.value = capitilize(props.rollup[tagName])
+					break
+			}
+
+			res.push(tag)
+		}
+
+		return res
+	}, []),
+)
 
 const getCategoryDisplayName = (category) => {
 	switch (category) {
-		case 'nft':
-			return 'NFT'
+		case "nft":
+			return "NFT"
 
-		case 'uncategorized':
-			return 'Other'
+		case "uncategorized":
+			return "Other"
 
 		default:
 			return capitilize(category)
@@ -116,7 +135,7 @@ const getBlobs = async () => {
 		id: props.rollup.id,
 		offset: (page.value - 1) * 10,
 		limit: 10,
-		sort_by: 'time',
+		sort_by: "time",
 	})
 
 	if (data.value?.length) {
@@ -147,12 +166,25 @@ const getNamespaces = async () => {
 if (activeTab.value === "Blobs") await getBlobs()
 if (activeTab.value === "Namespaces") await getNamespaces()
 
-onMounted(() => {
+onMounted(async () => {
 	router.replace({
 		query: {
 			tab: activeTab.value,
 		},
 	})
+
+	/** Rollup Primary Color */
+	const image = new Image()
+	image.crossOrigin = "anonymous"
+	image.onload = () => {
+		const context = document.createElement("canvas").getContext("2d")
+		context.drawImage(image, 0, 0, 1, 1)
+		const i = context.getImageData(0, 0, 1, 1).data
+
+		rollupColor.value = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`
+		rollupColorAlpha.value = `rgba(${i[0]},${i[1]},${i[2]},0)`
+	}
+	image.src = `${props.rollup.logo}?query=bg`
 })
 
 /** Refetch Blobs/Messages on new page */
@@ -256,6 +288,12 @@ const handleCSVDownload = async (value) => {
 			</Flex>
 
 			<Flex align="center" gap="12">
+				<Button v-if="isMainnet()" :link="`/rollup/rank/${rollup.slug}`" type="secondary" size="mini">
+					<Icon name="laurel" size="12" color="secondary" />
+
+					<Text>Activity Rank</Text>
+				</Button>
+
 				<Button link="/stats?tab=rollups&section=daily_stats" type="secondary" size="mini">
 					<Icon name="line-chart" size="12" color="secondary" />
 
@@ -287,60 +325,85 @@ const handleCSVDownload = async (value) => {
 		<Flex gap="4" :class="$style.content">
 			<Flex direction="column" :class="$style.data">
 				<Flex direction="column" gap="24" :class="$style.main">
-					<Flex align="center" gap="12" :class="$style.key_value">
-						<Flex v-if="rollup.logo" align="center" justify="center" :class="$style.avatar_container">
-							<img :src="rollup.logo" :class="$style.avatar_image" />
+					<div
+						:style="{ background: `linear-gradient(90deg, ${rollupColorAlpha}, ${rollupColor}, ${rollupColorAlpha})` }"
+						:class="$style.line"
+					/>
+					<div :style="{ background: `linear-gradient(${rollupColor}, ${rollupColorAlpha})` }" :class="$style.bg" />
+
+					<Flex direction="column" gap="20" :class="$style.key_value">
+						<Flex align="center" justify="between" gap=24 wide>
+							<Flex v-if="rollup.logo" align="center" justify="center" :class="$style.logo_container">
+								<img id="logo" :src="rollup.logo" :class="$style.rollup_logo" />
+							</Flex>
+
+							<Flex v-if="!!rollupRanking" align="start" :style="{ height: '100%' }">
+								<Tooltip position="end" :disabled="!rollupRanking?.rank?.category?.color">
+									<Icon name="laurel" size="24" :color="rollupRanking?.rank?.category?.color || 'tertiary'" :loading="!rollupRanking?.rank?.category?.color" />
+									<template #content>
+										<Flex direction="column" gap="8">
+											<Flex align="center" justify="between" gap="8">
+												<Text size="12" weight="500" color="tertiary">Activity Rank:</Text>
+												<Text size="12" weight="600" :color="rollupRanking?.rank?.category?.color"> {{ rollupRanking?.rank?.category?.name }} </Text>
+											</Flex>
+											<Flex align="center" justify="between" gap="8">
+												<Text size="12" weight="500" color="tertiary">Score:</Text>
+												<Text size="12" weight="600" color="secondary"> {{ rollupRanking?.rank?.score }}% </Text>
+											</Flex>
+										</Flex>
+									</template>
+								</Tooltip>
+							</Flex>
 						</Flex>
 
-						<Flex direction="column" gap="8" :class="$style.key_value">
-							<Text size="12" weight="600" color="secondary">Rollup</Text>
+						<Flex direction="column" gap="16" :class="$style.key_value">
+							<Flex direction="column" gap="8">
+								<Text size="14" weight="600" color="primary">{{ rollup.name }} </Text>
 
-							<Flex align="center" gap="10">
-								<Text size="13" weight="600" color="primary">{{ rollup.name }} </Text>
+								<Tooltip position="start" textAlign="start" delay="300">
+									<Text size="12" weight="500" color="tertiary" height="140" :class="$style.description">
+										{{ rollup.description }}
+									</Text>
 
-								<CopyButton :text="rollup.name" />
+									<template #content>
+										<div style="max-width: 340px">
+											<Text height="140">
+												{{ rollup.description }}
+											</Text>
+										</div>
+									</template>
+								</Tooltip>
 							</Flex>
-						</Flex>
-					</Flex>
-					<Flex align="center" gap="6">
-						<Tooltip v-for="(t, i) in tags" :style="{cursor: 'default'}">
-							<Flex align="center" gap="6">
-								<Text size="12" color="tertiary"> {{ t.value }} </Text>
 
-								<div v-if="i !== tags.length - 1" :class="$style.dot" />
+							<Flex align="center" gap="6" wrap="wrap">
+								<Flex v-for="(t, i) in tags" align="center" gap="6" :class="$style.tag_badge">
+									<Text size="12" weight="600" color="tertiary"> {{ t.name }}</Text>
+									<Text size="12" weight="600" color="secondary">{{ t.value }} </Text>
+								</Flex>
 							</Flex>
-
-							<template #content>
-								<Text size="12" color="tertiary"> {{ t.name }} </Text>
-							</template>
-						</Tooltip>
-					</Flex>
-					<Flex direction="column" gap="6">
-						<Text size="12" weight="600" color="secondary">Description</Text>
-
-						<Flex align="center" gap="6">
-							<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.memo">
-								{{ rollup.description }}
-							</Text>
 						</Flex>
 					</Flex>
-					<Flex v-if="relatedLinks.length" direction="column" gap="6">
-						<Text size="12" weight="600" color="secondary">Related Links</Text>
 
-						<Flex align="center" direction="column" gap="2">
-							<Flex v-for="link in relatedLinks" align="center" justify="start" wide>
-								<a :href="link" target="_blank">
-									<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.link">
-										{{ link }}
-									</Text>
-								</a>
-							</Flex>
-						</Flex>
+					<Flex v-if="rollup.provider || rollup.settled_on" gap="24" style="margin-bottom: 16px">
+						<img
+							v-if="rollup.settled_on"
+							:src="`/img/badges/settled/${rollup.settled_on.toLowerCase()}.png`"
+							alt="Rollup badge"
+							:class="$style.badge"
+						/>
+
+						<img
+							v-if="rollup.provider"
+							:src="`/img/badges/provider/${rollup.provider.toLowerCase()}.png`"
+							alt="Rollup badge"
+							:class="$style.badge"
+						/>
 					</Flex>
-					<Flex align="center" justify="start" gap="12">
-						<Tooltip v-if="rollup.website" position="start" delay="500">
+
+					<Flex align="center" justify="start" gap="16" wrap="wrap">
+						<Tooltip v-if="rollup.website" position="start" delay="300">
 							<a :href="rollup.website" target="_blank">
-								<Icon name="globe" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="globe" size="14" color="secondary" />
 							</a>
 
 							<template #content>
@@ -348,9 +411,9 @@ const handleCSVDownload = async (value) => {
 							</template>
 						</Tooltip>
 
-						<Tooltip v-if="rollup.twitter" position="start" delay="500">
+						<Tooltip v-if="rollup.twitter" position="start" delay="300">
 							<a :href="rollup.twitter" target="_blank">
-								<Icon name="twitter" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="twitter" size="14" color="secondary" />
 							</a>
 
 							<template #content>
@@ -358,9 +421,9 @@ const handleCSVDownload = async (value) => {
 							</template>
 						</Tooltip>
 
-						<Tooltip v-if="rollup.github" position="start" delay="500">
+						<Tooltip v-if="rollup.github" position="start" delay="300">
 							<a :href="rollup.github" target="_blank">
-								<Icon name="github" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="github" size="14" color="secondary" />
 							</a>
 
 							<template #content>
@@ -368,9 +431,9 @@ const handleCSVDownload = async (value) => {
 							</template>
 						</Tooltip>
 
-						<Tooltip v-if="rollup.defi_lama" position="start" delay="500">
+						<Tooltip v-if="rollup.defi_lama" position="start" delay="300">
 							<a :href="`https://defillama.com/chain/${rollup.defi_lama}`" target="_blank">
-								<Icon name="lama" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="lama" size="14" color="secondary" />
 							</a>
 
 							<template #content>
@@ -378,9 +441,9 @@ const handleCSVDownload = async (value) => {
 							</template>
 						</Tooltip>
 
-						<Tooltip v-if="rollup.l2_beat" position="start" delay="500">
+						<Tooltip v-if="rollup.l2_beat" position="start" delay="300">
 							<a :href="rollup.l2_beat" target="_blank">
-								<Icon name="l2beat" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="l2beat" size="14" color="secondary" />
 							</a>
 
 							<template #content>
@@ -388,9 +451,9 @@ const handleCSVDownload = async (value) => {
 							</template>
 						</Tooltip>
 
-						<Tooltip v-if="rollup.explorer" position="start" delay="500">
+						<Tooltip v-if="rollup.explorer" position="start" delay="300">
 							<a :href="rollup.explorer" target="_blank">
-								<Icon name="search" size="14" color="secondary" :class="$style.btn" />
+								<Icon name="search" size="14" color="secondary" />
 							</a>
 
 							<template #content>
@@ -399,6 +462,20 @@ const handleCSVDownload = async (value) => {
 						</Tooltip>
 					</Flex>
 
+					<Flex v-if="relatedLinks.length" direction="column" gap="6">
+						<Text size="12" weight="600" color="secondary">Related Links</Text>
+
+						<Flex align="center" direction="column" gap="2">
+							<Flex v-for="link in relatedLinks" align="center" justify="start" wide>
+								<a :href="link" target="_blank">
+									<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.link">
+										{{ link }}
+									</Text>
+								</a>
+							</Flex>
+						</Flex>
+					</Flex>
+
 					<Flex direction="column" gap="16">
 						<Text size="12" weight="600" color="secondary">Details</Text>
 
@@ -409,14 +486,18 @@ const handleCSVDownload = async (value) => {
 								<Flex align="center" gap="4">
 									<Text size="12" weight="600" color="secondary"> {{ formatBytes(rollup.size) }} </Text>
 
-									<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)` }}</Text>
+									<Text size="12" weight="600" color="tertiary">{{
+										`(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)`
+									}}</Text>
 								</Flex>
 
 								<template #content>
 									<Flex align="end" gap="8">
 										<Text size="12" weight="600" color="tertiary">Share of total size</Text>
 
-										<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)` }}</Text>
+										<Text size="12" weight="600" color="primary">{{
+											`(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)`
+										}}</Text>
 									</Flex>
 								</template>
 							</Tooltip>
@@ -429,14 +510,18 @@ const handleCSVDownload = async (value) => {
 								<Flex align="center" gap="4">
 									<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
 
-									<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)` }}</Text>
+									<Text size="12" weight="600" color="tertiary">{{
+										`(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)`
+									}}</Text>
 								</Flex>
 
 								<template #content>
 									<Flex align="end" gap="8">
 										<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
 
-										<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)` }}</Text>
+										<Text size="12" weight="600" color="primary">{{
+											`(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)`
+										}}</Text>
 									</Flex>
 								</template>
 							</Tooltip>
@@ -452,14 +537,18 @@ const handleCSVDownload = async (value) => {
 										:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
 									/>
 
-									<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)` }}</Text>
+									<Text size="12" weight="600" color="tertiary">{{
+										`(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)`
+									}}</Text>
 								</Flex>
 
 								<template #content>
 									<Flex align="end" gap="8">
 										<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
 
-										<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)` }}</Text>
+										<Text size="12" weight="600" color="primary">{{
+											`(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)`
+										}}</Text>
 									</Flex>
 								</template>
 							</Tooltip>
@@ -595,30 +684,82 @@ const handleCSVDownload = async (value) => {
 	background: var(--card-background);
 
 	.main {
+		position: relative;
+
+		overflow: hidden;
+
 		padding: 16px;
 
 		& .key_value {
 			max-width: 100%;
 		}
 	}
-	.avatar_container {
+
+	.line {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 1px;
+
+		opacity: 0.8;
+	}
+
+	.bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 80px;
+		transform: translateY(-50%);
+
+		opacity: 0.4;
+		border-radius: 50%;
+		filter: blur(20px);
+	}
+
+	.logo_container {
 		position: relative;
-		width: 50px;
-		height: 50px;
+		min-width: 40px;
+		width: 40px;
+		min-height: 40px;
+		height: 40px;
+
 		overflow: hidden;
 		border-radius: 50%;
 	}
 
-	.avatar_image {
+	.rollup_logo {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
+
+		user-select: none;
+		-webkit-user-drag: none;
 	}
 
-	.memo {
-		max-width: 352px;
+	.description {
+		display: -webkit-box;
+		max-width: 320px;
+
 		text-overflow: ellipsis;
 		overflow: hidden;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+	}
+
+	.badge {
+		width: 60px;
+
+		user-select: none;
+		-webkit-user-drag: none;
+	}
+
+	.tag_badge {
+		border-radius: 6px;
+		background: var(--op-5);
+
+		padding: 6px;
 	}
 
 	.link {
@@ -631,16 +772,12 @@ const handleCSVDownload = async (value) => {
 		color: var(--txt-secondary);
 	}
 
-	.btn:hover {
-		fill: var(--txt-primary);
-	}
-
 	.dot {
 		width: 4px;
 		height: 4px;
 
 		border-radius: 50%;
-		background: var(--op-10);
+		background: var(--op-15);
 	}
 }
 
diff --git a/components/modules/stats/BarplotChartCard.vue b/components/modules/stats/BarplotChartCard.vue
index 7da2f42b..6dc28d88 100644
--- a/components/modules/stats/BarplotChartCard.vue
+++ b/components/modules/stats/BarplotChartCard.vue
@@ -1,16 +1,6 @@
 <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: {
diff --git a/components/modules/stats/BarplotStakedChart.vue b/components/modules/stats/BarplotStakedChart.vue
new file mode 100644
index 00000000..5b652816
--- /dev/null
+++ b/components/modules/stats/BarplotStakedChart.vue
@@ -0,0 +1,420 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+import { DateTime } from "luxon"
+
+/** Services */
+import { abbreviate, comma, formatBytes, isMobile, sortArrayOfObjects, tia, truncateDecimalPart } from "@/services/utils"
+
+const props = defineProps({
+	series: {
+		type: Object,
+		required: true,
+	},
+})
+
+const chartEl = ref()
+const tooltipEl = ref()
+const tooltip = ref({
+	data: [],
+	color: "",
+	show: false,
+})
+
+const rollupNames = computed(() => {
+	let namesSet = new Set(
+		sortArrayOfObjects(props.series?.data[0]?.items, props.series?.metric, false)
+		.map(item => item.name)
+	)
+	props.series?.data?.slice(1).forEach(d => {
+		d.items.forEach(item => namesSet.add(item.name))
+	})
+
+	return [...namesSet]
+})
+
+const buildChart = (chart, data) => {
+	const { width, height } = chart.getBoundingClientRect()
+	const minStackHeight = 4
+	const margin = {
+		top: minStackHeight * (props.series.itemsCount > 0 ? props.series.itemsCount : rollupNames.value.length),
+		right: 30,
+		bottom: 20,
+		left: 50,
+		axisX: 44
+	}
+	const maxValue = d3.max(data, d => d3.sum(rollupNames.value, key => d[key]))
+
+	/** Scales */
+	const x = d3.scaleBand()
+		.domain(data.map(d => d.time).reverse())
+		.range([margin.left, width - margin.right])
+		.padding(0.1)
+
+	const y = d3.scaleLinear(
+		[0, maxValue],
+		[height - margin.axisX, margin.top]
+	)
+	let correctionY = data.reduce((acc, { time }) => {
+		acc[time] = 0
+		return acc
+	}, {})
+	
+	// const colorPalette = [
+	// 	"#18d2a5", "#379bff", "#eb5757", "#592121", "#ff5a17",
+	// 	"#ff8351", "#e6c525", "#0ade71", "#33a853", "#5856de",
+	// 	"#109373", "#1e473d", "#a88132", "#8c52ff", "#ff3377",
+	// 	"#007acc", "#b22222", "#2e8b57", "#666666", "#004d40"
+	// ]
+	// const colorPalette = [
+	// 	"#00c78f", "#0077ff", "#ff2d2d", "#8b0000", "#ff4500",
+	// 	"#ff6f33", "#ffd700", "#00d455", "#228b22", "#4b32ff",
+	// 	"#008066", "#003d29", "#c48c18", "#6a0dad", "#ff0055",
+	// 	"#005bb5", "#a40000", "#007a3d", "#333333", "#002b26"
+	// ]
+	// const colorPalette = [
+	// 	"#159f80", "#2f7bbf", "#d43f3f", "#7a2c2c", "#d45920",
+	// 	"#d47740", "#c9a320", "#17a65c", "#2a7037", "#4946b3",
+	// 	"#1b6a5b", "#0e3d31", "#9b7321", "#5a2c88", "#bf3050",
+	// 	"#28558f", "#7a1a1a", "#206645", "#444444", "#1f3330"
+	// ]
+	// const colorPalette = [
+	// 	"#18d2a5", "#379bff", "#eb5757", "#592121", "#ff5a17",
+	// 	"#ff8351", "#e6c525", "#0ade71", "#33a853", "#5856de",
+	// 	"#18d2a5", "#109373", "#1e473d"
+	// ]
+	const colorPalette = [
+		// "#f4a261", "#2a9d8f", "#e9c46a", "#264653", "#e76f51",
+		// "#588157", "#003049",
+		// "#005f73",
+		// "#005f73", "#0a9396", "#94d2bd", "#e9d8a6", "#ee9b00",
+		// "#ca6702", "#bb3e03", "#ae2012", "#9b2226",
+		// "#265077", "#022140", "#494B68", "#1E4258", "#2D5F5D",
+		"#18d2a5", "#2F6AA0", "#033366", "#5A5D87", "#25647A", "#3A7A78",
+		"#2A6B55", "#02402A", "#4A6B52", "#1E5A45", "#2D7A5F",
+		// "#", "#", "#", "#", "#",
+	]
+	// const colorPalette = [
+	// 	"#3A9B8F", "#5C6F5F", "#9C8A56", "#B4C575", "#76C7B7", 
+	// 	"#F36D3C", "#556C77", "#F1A7A7", "#6B7566", "#8C9A3B", 
+	// 	"#D84C64", "#8B4A6A", "#5E3B8C", "#3A8F6C", "#A4AAB0", 
+	// 	"#5F5F5F", "#C49C7D", "#FF9F1C", "#88D4D6", "#D1D4D8"
+	// ]
+	const color = d3.scaleOrdinal()
+		.domain(rollupNames.value)
+		// .range(colorPalette)
+		.range(d3.schemeSet2)
+
+	const stackedData = d3.stack()
+		.keys(rollupNames.value)
+		(data)
+	
+	function formatDate(date) {
+		if (props.series.timeframe === 'day') {
+			return DateTime.fromJSDate(date).toFormat("LLL dd, HH:mm")
+		}
+
+		return DateTime.fromJSDate(date).toFormat("LLL dd, yyyy")
+	}
+
+	function formatValue(value, decimals) {
+		switch (props.series.units) {
+			case 'bytes':
+				return formatBytes(value, decimals)
+			case 'utia':
+				return `${tia(value, 2)} TIA`
+			case 'seconds':
+				return `${truncateDecimalPart(value / 1_000, 3)}s`
+			case 'usd':
+				return `${abbreviate(value)} $`
+			default:
+				return comma(value)
+		}
+	}
+
+	function formatScaleValue(value) {
+		if (props.series.units) {
+			return formatValue(value, -1)
+		}
+
+		return abbreviate(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%;")
+		.attr("id", "chart")
+		.style("-webkit-tap-highlight-color", "transparent")
+		.on("pointerleave", onPointerLeft)
+
+	/** Add axes */
+	svg.append("g")
+		.attr("transform", `translate(0,0)`)
+		.attr("color", "var(--op-20)")
+		.call(d3.axisRight(y)
+			.ticks(4)
+			.tickSize(width)
+			.tickFormat(formatScaleValue))
+		.call(g => g.select(".domain")
+			.remove())
+		.call(g => g.selectAll(".tick line")
+			.attr("stroke-opacity", 0.7)
+			.attr("stroke-dasharray", "10, 10"))
+		.call(g => g.selectAll(".tick text")
+			.attr("x", 4)
+			.attr("dy", -4))
+
+	svg.append("g")
+		.attr("transform", `translate(0, ${height - margin.axisX} )`)
+		.attr("color", "#ffffff33")
+		.call(d3.axisBottom(x).tickFormat(d3.timeFormat(
+			props.series.timeframe === 'day'
+				? "%H:%M"
+				: props.series.timeframe === 'month'
+					? "%b %d"
+					: "%b"
+		)))
+		.selectAll("text")
+			.each(function(d) {
+				const text = d3.select(this)
+				if (!isMobile()) {
+					text.attr("transform", "rotate(-45)")
+						.attr("x", -10)
+						.attr("y", 10)
+						.style("text-anchor", "end")
+				} else {
+					text.attr("transform", "rotate(-90)")
+						.attr("x", -10)
+						.attr("y", -5)
+						.style("text-anchor", "end")
+				}
+			})
+
+	function onPointerLeft() {
+		d3.selectAll("[class^='rect_']").style("opacity", 0.8)
+		tooltip.value.show = false
+	}
+
+	function mouseover(event, d) {
+		const name = d3.select(this.parentNode).datum().key;
+		d3.selectAll("[class^='rect_']").style("opacity", 0.2)
+		d3.selectAll(`[class='rect_${name}']`).style("opacity", 1)
+		let selectedRollup = null
+		for (let dr of props.series.data) {
+			selectedRollup = dr.items.find(item => item.name === name)
+			if (selectedRollup) {
+				break;
+			}
+		}
+		nextTick(() => {
+			tooltip.value.data = {
+				name: name,
+				value: formatValue(d.data[name]),
+				date: formatDate(d.data.time),
+				logo: selectedRollup?.logo,
+				color: color(name),
+			}
+			nextTick(() => {
+				let tooltipWidth = tooltipEl.value?.wrapper ? tooltipEl.value?.wrapper?.getBoundingClientRect()?.width : 100
+				let tooltipHeight = tooltipEl.value?.wrapper ? tooltipEl.value?.wrapper?.getBoundingClientRect()?.height : 40
+				let xPosition = x(d.data.time)
+				tooltip.value.x = (xPosition + tooltipWidth) > width - margin.right ? xPosition - tooltipWidth: xPosition + 25
+				tooltip.value.y = event.offsetY - tooltipHeight - 10
+			})
+		})
+		tooltip.value.show = true
+	}
+
+	/** Draw bars */
+	svg.append("g")
+		.selectAll("g")
+		.data(stackedData)
+		.enter().append("g")
+			.attr("fill", d => color(d.key))
+			.attr("class", d => "rect_" + d.key)
+			.selectAll("rect")
+			.data(d => d)
+			.enter().append("rect")
+				.attr("x", d => x(d.data?.time))
+				.attr("y", height)
+				.attr("height", 0)
+				.attr("width", x.bandwidth())
+			.on("mouseover", mouseover)
+			.transition()
+			.duration(800)
+			.ease(d3.easeCubicOut)
+			.attr("y", d => {
+				let height = y(d[0]) - y(d[1])
+				if (height > 0 && height < minStackHeight) {
+					correctionY[d.data?.time] += minStackHeight - height
+				}
+				return y(d[1]) - correctionY[d.data.time]
+			})
+			.attr("height", d => {
+				let height = y(d[0]) - y(d[1])
+				if (height > 0 && height < minStackHeight) {
+					return minStackHeight
+				}
+				return height
+			})
+
+	if (chart.children[0]) chart.children[0].remove()
+	chart.append(svg.node())
+}
+
+const drawChart = () => {
+	let data = JSON.parse(JSON.stringify(props.series.data))
+	data.forEach(d => {
+		d.time = new Date(d.time)
+		let items = sortArrayOfObjects(d.items, props.series.metric, false)
+		d.items = items.slice(0, Math.min(items.length, props.series.itemsCount > 0 ? props.series.itemsCount : items.length))
+	})
+	
+	let formattedData = data.map(d => {
+		const obj = { time: d.time }
+		rollupNames.value.forEach(name => {
+			let item = d.items.find(item => item.name === name)
+			obj[name] = item ? item[props.series.metric] : 0
+		})
+
+		return obj
+	})
+
+	buildChart(
+		chartEl.value.wrapper,
+		formattedData,
+	)
+}
+
+watch(
+	() => [props.series.data, props.series.metric, props.series.itemsCount],
+	() => {
+		if (chartEl?.value?.wrapper) {
+			drawChart()
+		}
+	},
+)
+
+onMounted(async () => {
+	if (chartEl?.value?.wrapper) {
+		drawChart()
+	}
+})
+</script>
+
+<template>
+    <Flex direction="column" justify="between" gap="16" wide :class="$style.wrapper">
+        <Flex :class="$style.chart_wrapper">
+			<Transition name="fastfade">
+				<div v-if="tooltip.show" :class="$style.tooltip_wrapper">
+					<Flex
+						ref="tooltipEl"
+						align="center"
+						direction="column"
+						:style="{ transform: `translate(${tooltip.x}px, ${tooltip.y}px)` }"
+						gap="6"
+						:class="$style.tooltip"
+					>
+						<Flex align="center" jsutify="between" gap="8" wide>
+							<Flex align="center" gap="8">
+								<div v-if="tooltip.data?.logo" :class="$style.avatar_container">
+									<img :src="tooltip.data?.logo" :class="$style.avatar_image" />
+								</div>
+
+								<Text size="12" weight="500" color="secondary"> {{ tooltip.data.name }} </Text>
+							</Flex>
+
+							<Text size="12" weight="500" color="primary"> {{ tooltip.data.value }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="end" wide :class="$style.date">
+							<Text size="11" weight="500" color="tertiary"> {{ tooltip.data.date }} </Text>
+						</Flex>
+
+						<div
+							:class="$style.horizontal_divider"
+							:style="{background: `linear-gradient(90deg, rgba(10, 222, 113, 0%) 0%, ${tooltip.data.color}, rgba(10, 222, 113, 0%) 100%)`}"
+						/>
+					</Flex>
+				</div>
+			</Transition>
+
+            <Flex ref="chartEl" wide :class="$style.chart" />
+        </Flex>
+    </Flex>
+</template>
+
+<style module>
+.wrapper {
+	height: 800px;
+
+	border-radius: 12px;
+
+	padding: 16px;
+}
+
+.chart_wrapper {
+	position: relative;
+
+	height: 800px;
+}
+
+.chart {
+	height: 100%;
+	position: absolute;
+
+	overflow: hidden;
+
+	& svg {
+		overflow: visible;
+	}
+}
+
+.tooltip_wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	& .tooltip {
+		min-width: 100px;
+		min-height: 40px;
+		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: 10px 10px 0 10px;
+
+		transition: all 0.2s ease;
+	}
+
+	& .horizontal_divider {
+		width: 100%;
+		height: 2px;
+	}
+}
+
+.avatar_container {
+	position: relative;
+	width: 16px;
+	height: 16px;
+	overflow: hidden;
+	border-radius: 50%;
+}
+
+.avatar_image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+</style>
\ No newline at end of file
diff --git a/components/modules/stats/BlocksFeed.vue b/components/modules/stats/BlocksFeed.vue
index c0c0f76b..d0795345 100644
--- a/components/modules/stats/BlocksFeed.vue
+++ b/components/modules/stats/BlocksFeed.vue
@@ -3,7 +3,6 @@
 import { DateTime } from "luxon"
 
 /** UI */
-// import Button from "@/components/ui/Button.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Services */
diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue
index 96d020e9..b6bf668d 100644
--- a/components/modules/stats/ChartCardPreview.vue
+++ b/components/modules/stats/ChartCardPreview.vue
@@ -49,6 +49,11 @@ const getSeries = async () => {
 		baseTime.minus({
 			days: props.period.timeframe === "day" ? props.period.value * 2 + 1 : 0,
 			hours: props.period.timeframe === "hour" ? props.period.value * 2 + 1 : 0,
+			months: props.period.timeframe === "month"
+				? props.period.value * 2
+				: props.period.timeframe === "year"
+					? props.period.value * 24
+					: 0,
 		}).ts / 1_000
 	)
 	let to = parseInt(
@@ -76,20 +81,45 @@ const getSeries = async () => {
 	} else {
 		data = (await fetchSeries({
 			table: props.series.name,
-			period: props.period.timeframe,
+			period: props.period.timeframe === "year" ? "month" : props.period.timeframe,
 			from: from,
 			to: to,
 		})).reverse()
 	}
 	
+	const parseData = (slice) =>
+		slice.map((s) => ({
+		date: DateTime.fromISO(s.time).toJSDate(),
+		value: parseFloat(s.value),
+	}))
+
+	const dataLength = data.length
+	let prev = []
+	let current = []
+	const periodLength = props.period.timeframe === "year" ? 12 : props.period.value
+	const timeframe = props.period.timeframe
+
 	if (props.series.aggregate === 'cumulative') {
-		prevData.value = data.slice(0, 30).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
-		currentData.value = data.slice(30, data.length).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
+		current = parseData(data.slice(-30))
+		prev = parseData(data.slice(0, dataLength - 30))
 	} else {
-		prevData.value = data.slice(0, props.period.value).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
-		currentData.value = data.slice(props.period.value, data.length).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
+		current = parseData(data.slice(-periodLength))
+		prev = parseData(data.slice(0, dataLength - periodLength))
+
+		if (prev.length < current.length) {
+			const missing = current.length - prev.length
+			const extra = current.slice(0, missing).map((d) => ({
+				date: DateTime.fromJSDate(d.date).minus({ [`${timeframe}s`]: periodLength }).toJSDate(),
+				value: 0,
+			}))
+
+			prev = [...extra, ...prev]
+		}
 	}
 
+	currentData.value = current
+	prevData.value = prev
+
 	if (props.series.name === 'block_time') {
 		prevData.value = prevData.value
 			.map(el => {
@@ -481,8 +511,12 @@ watch(
 	padding: 16px;
 }
 
-.link:hover {
-	fill: var(--txt-secondary)
+.link {
+    transition: fill 0.3s ease;
+
+    &:hover {
+        fill: var(--txt-secondary)
+    }
 }
 
 .header {
diff --git a/components/modules/stats/DiffChip.vue b/components/modules/stats/DiffChip.vue
index 64b3e258..40080756 100644
--- a/components/modules/stats/DiffChip.vue
+++ b/components/modules/stats/DiffChip.vue
@@ -10,6 +10,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    tooltip: {
+        type: String,
+        default: "Difference between current and previous equal period",
+    },
 })
 
 const styles = computed(() => {
@@ -67,9 +71,9 @@ const styles = computed(() => {
             </Flex>
 
             <template #content>
-                <Text color="secondary" size="12">
-                    Difference between current and previous equal period
-                </Text>
+                <Flex align="center"  :class="$style.tooltip">
+                    <Text color="secondary" size="12"> {{ tooltip }} </Text>
+                </Flex>
             </template>
         </Tooltip>
     </Flex>
@@ -85,4 +89,10 @@ const styles = computed(() => {
 .content {
     padding: 2px 6px 2px 4px;
 }
+
+.tooltip {
+    max-width: 170px;
+    text-align: start;
+    line-height: 1.5;
+}
 </style>
\ No newline at end of file
diff --git a/components/modules/stats/HighlightCard.vue b/components/modules/stats/HighlightCard.vue
index ed904d71..a91aa892 100644
--- a/components/modules/stats/HighlightCard.vue
+++ b/components/modules/stats/HighlightCard.vue
@@ -12,8 +12,6 @@ const props = defineProps({
 	},
 })
 
-const isLoading = ref(false)
-
 const value = computed(() => {
 	if (props.highlight.name === 'blocks') return comma(props.highlight.value)
 	
@@ -49,7 +47,7 @@ const value = computed(() => {
             <Flex align="start">
                 <Icon v-if="highlight.name === 'blocks'" name="block" size="20" color="tertiary" />
 
-				<DiffChip v-else :value="highlight.diff.toFixed(1)" />
+				<DiffChip v-else :value="highlight.diff.toFixed(1)" tooltip="Difference between the last and the previous 24 hours" />
             </Flex>
         </Flex>
     </Flex>
diff --git a/components/modules/stats/LineChart.vue b/components/modules/stats/LineChart.vue
index 8da82f9e..0d0b287f 100644
--- a/components/modules/stats/LineChart.vue
+++ b/components/modules/stats/LineChart.vue
@@ -11,6 +11,10 @@ const props = defineProps({
 		type: Object,
 		required: true,
 	},
+	disableTooltip: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 // TO DO: Fetch data if series.currentData is null
diff --git a/components/modules/stats/ParallelCoordinatesChart.vue b/components/modules/stats/ParallelCoordinatesChart.vue
index a0ebe42a..f420eb82 100644
--- a/components/modules/stats/ParallelCoordinatesChart.vue
+++ b/components/modules/stats/ParallelCoordinatesChart.vue
@@ -348,7 +348,6 @@ watch(
                     </Flex>
                 </template>
             </Tooltip>
-            
         </div>
 
         <div :class="$style.horizontal_divider" />
diff --git a/components/modules/stats/PieChartCard.vue b/components/modules/stats/PieChartCard.vue
index fbf3d454..ce6f2617 100644
--- a/components/modules/stats/PieChartCard.vue
+++ b/components/modules/stats/PieChartCard.vue
@@ -1,17 +1,10 @@
 <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,
@@ -52,12 +45,12 @@ const prepareRollupsData = () => {
     let totalShare = 0
     resData.value.forEach((el, i) => {
         let share = +(el.value / total.value * 100).toFixed(0)
-        totalShare += share
         if (i < length - 1 || length === 1) {
             el.share = share
         } else {
             el.share = 100 - totalShare
         }
+        totalShare += share
     })
 
     let startlength = resData.value.length
@@ -79,12 +72,7 @@ const color = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#55c9ab", "#1
         .domain([0, 5])
 
 const buildChart = (chart, data) => {
-	const height = chart.getBoundingClientRect().height
-	const width = chart.getBoundingClientRect().width
-	const marginTop = 6
-	const marginRight = 12
-	const marginBottom = 24
-	const marginLeft = 12
+	const { width, height } = chart.getBoundingClientRect()
     radius.value = Math.min(width, height) / 2
     innerRadius.value = props.dounut ? radius.value * 0.6 : 0
 
@@ -160,48 +148,52 @@ const buildChart = (chart, data) => {
 }
 
 const init = () => {
-    prepareRollupsData()
-
-    buildChart(chartEl.value.wrapper, resData.value)
-
-    /** Add listeners for legend items */
-    nextTick(() => {
-        const legend = d3.selectAll(`.legend-item-${props.series.name}`)
-        legend._groups[0].forEach((item, index) => {
-            item.addEventListener('pointerenter', () => {
-                const arc = d3.arc()
-                    .outerRadius(radius.value - 10)
-                    .innerRadius(innerRadius.value)
-                const arcEl = d3.select(`.arc-${props.series.name}-${index} path`)
-                arcEl.classed("dimmed", false)
-                    .transition()
-                    .duration(200)
-                    .attr("d", d3.arc()
-                        .outerRadius(radius.value - 5)
-                        .innerRadius(innerRadius.value))
-                    .attr("transform", d => {
-                        const [x, y] = arc.centroid(d);
-                        const dist = 0.05
-                        return `translate(${x * dist}, ${y * dist})`
-                    })
-
-                d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", true)
-                item.classList.remove("dimmed")
-            })
+    if (props.data?.length) {
+        prepareRollupsData()
+
+        nextTick(() => {
+            buildChart(chartEl.value.wrapper, resData.value)
+        })
 
-            item.addEventListener('pointerleave', () => {
-                const arc = d3.select(`.arc-${props.series.name}-${index} path`)
-                arc.transition()
-                    .duration(200)
-                    .attr("d", d3.arc()
+        /** Add listeners for legend items */
+        nextTick(() => {
+            const legend = d3.selectAll(`.legend-item-${props.series.name}`)
+            legend._groups[0].forEach((item, index) => {
+                item.addEventListener('pointerenter', () => {
+                    const arc = d3.arc()
                         .outerRadius(radius.value - 10)
-                        .innerRadius(innerRadius.value))
-                    .attr("transform", "translate(0, 0)")
-                
-                d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", false)
+                        .innerRadius(innerRadius.value)
+                    const arcEl = d3.select(`.arc-${props.series.name}-${index} path`)
+                    arcEl.classed("dimmed", false)
+                        .transition()
+                        .duration(200)
+                        .attr("d", d3.arc()
+                            .outerRadius(radius.value - 5)
+                            .innerRadius(innerRadius.value))
+                        .attr("transform", d => {
+                            const [x, y] = arc.centroid(d);
+                            const dist = 0.05
+                            return `translate(${x * dist}, ${y * dist})`
+                        })
+
+                    d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", true)
+                    item.classList.remove("dimmed")
+                })
+
+                item.addEventListener('pointerleave', () => {
+                    const arc = d3.select(`.arc-${props.series.name}-${index} path`)
+                    arc.transition()
+                        .duration(200)
+                        .attr("d", d3.arc()
+                            .outerRadius(radius.value - 10)
+                            .innerRadius(innerRadius.value))
+                        .attr("transform", "translate(0, 0)")
+                    
+                    d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", false)
+                })
             })
         })
-    })
+    }
 }
 
 const handleNavigate = (el) => {
@@ -223,9 +215,15 @@ watch(
 </script>
 
 <template>
-	<Flex direction="column" justify="start" gap="8" wide :class="$style.wrapper">
-        <Flex align="center" justify="start" wide>
+	<Flex v-if="props.data?.length" direction="column" justify="start" gap="8" wide :class="$style.wrapper">
+        <Flex align="center" justify="between" wide>
             <Text size="14" weight="600" color="secondary"> {{ `By ${series.title}` }} </Text>
+
+            <NuxtLink v-if="series.page" :to="`/stats/${series.page}${series.aggregate ? '?aggregate=' + series.aggregate : ''}`">
+                <Flex align="center">
+                    <Icon name="bar-chart" size="16" color="tertiary" :class="$style.link" />
+                </Flex>
+            </NuxtLink>
         </Flex>
 
 		<Flex align="center" justify="between" wide>
@@ -280,6 +278,11 @@ watch(
             </Flex>
 		</Flex>
 	</Flex>
+    <Flex v-else wide :class="$style.wrapper">
+        <Flex align="center" justify="center" direction="column" gap="8" wide :class="$style.wrapper">
+            <Text size="13" weight="600" color="secondary" align="center"> No data to display </Text>
+        </Flex>
+    </Flex>
 </template>
 
 <style module>
@@ -293,6 +296,14 @@ watch(
 	padding: 16px;
 }
 
+.link {
+    transition: fill 0.3s ease;
+
+    &:hover {
+        fill: var(--txt-secondary)
+    }
+}
+
 .legend_wrapper {
     max-width: 55%;
 }
diff --git a/components/modules/stats/RollupsActivity.vue b/components/modules/stats/RollupsActivity.vue
index 73bcd25f..ee8ada08 100644
--- a/components/modules/stats/RollupsActivity.vue
+++ b/components/modules/stats/RollupsActivity.vue
@@ -4,11 +4,16 @@ import RollupsActivityGraph from "~/components/modules/stats/RollupsActivityGrap
 import RollupsActivityTable from "~/components/modules/stats/RollupsActivityTable.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
+const emit = defineEmits(['clearFilters'])
 const props = defineProps({
     rollups: {
         type: Array,
         required: true,
     },
+    isFilterActive: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const processedRollups = computed(() => {
@@ -67,8 +72,8 @@ const handleSelectView = () => {
             </Tooltip>
         </Flex>
         <Transition name="fastfade" mode="out-in">
-            <RollupsActivityTable v-if="selectedView === 'table'" :rollups="processedRollups" />
-            <RollupsActivityGraph v-else-if="selectedView === 'graph'" :rollups="processedRollups" />
+            <RollupsActivityTable v-if="selectedView === 'table'" @clearFilters="emit('clearFilters')" :rollups="processedRollups" :isFilterActive="isFilterActive" />
+            <RollupsActivityGraph v-else-if="selectedView === 'graph'" @clearFilters="emit('clearFilters')" :rollups="processedRollups" :isFilterActive="isFilterActive" />
         </Transition>
     </Flex>
 </template>
diff --git a/components/modules/stats/RollupsActivityGraph.vue b/components/modules/stats/RollupsActivityGraph.vue
index edb5a248..0f16a872 100644
--- a/components/modules/stats/RollupsActivityGraph.vue
+++ b/components/modules/stats/RollupsActivityGraph.vue
@@ -2,11 +2,16 @@
 /** Components */
 import ParallelCoordinatesChart from "@/components/modules/stats/ParallelCoordinatesChart.vue"
 
+const emit = defineEmits(['clearFilters'])
 const props = defineProps({
     rollups: {
         type: Array,
         required: true,
     },
+    isFilterActive: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const metrics = ref([
@@ -24,9 +29,12 @@ const metrics = ref([
     </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">
+        <Text v-if="!isFilterActive" size="12" weight="500" height="160" color="tertiary" align="center">
             There has been no rollup activity in the last 24 hours
         </Text>
+        <Text v-else size="12" weight="500" height="160" color="tertiary" align="center">
+            Try to change the filters or <Text @click="emit('clearFilters')" size="12" color="secondary" :style="{cursor: 'pointer', textDecoration: 'underline'}">clear</Text> them
+        </Text>
     </Flex>
 </template>
 
diff --git a/components/modules/stats/RollupsActivityTable.vue b/components/modules/stats/RollupsActivityTable.vue
index 629e12dd..18dcb8a2 100644
--- a/components/modules/stats/RollupsActivityTable.vue
+++ b/components/modules/stats/RollupsActivityTable.vue
@@ -5,11 +5,16 @@ import { abbreviate, formatBytes, comma, sortArrayOfObjects } from "@/services/u
 /** Components */
 import Tooltip from "@/components/ui/Tooltip.vue"
 
+const emit = defineEmits(['clearFilters'])
 const props = defineProps({
     rollups: {
         type: Array,
         required: true,
     },
+    isFilterActive: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const sort = reactive({
@@ -27,13 +32,12 @@ const handleSort = (by) => {
 
 		case "asc":
 			sort.dir = "desc"
-
 			break
 	}
 
 	sort.by = by
 
-	sortedRollups.value = sortArrayOfObjects(sortedRollups.value, by, sort.dir === 'desc' ? false : true)
+    sortedRollups.value = sortArrayOfObjects(sortedRollups.value, by, sort.dir === 'desc' ? false : true)
 }
 </script>
 
@@ -225,9 +229,12 @@ const handleSort = (by) => {
 
         <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">
+            <Text v-if="!isFilterActive" size="12" weight="500" height="160" color="tertiary" align="center">
                 There has been no rollup activity in the last 24 hours
             </Text>
+            <Text v-else size="12" weight="500" height="160" color="tertiary" align="center">
+                Try to change the filters or <Text @click="emit('clearFilters')" size="12" color="secondary" :style="{cursor: 'pointer', textDecoration: 'underline'}">clear</Text> them
+            </Text>
         </Flex>
     </Flex>
 </template>
diff --git a/components/modules/stats/RollupsBubbleChart.vue b/components/modules/stats/RollupsBubbleChart.vue
index 465d705a..c0653bec 100644
--- a/components/modules/stats/RollupsBubbleChart.vue
+++ b/components/modules/stats/RollupsBubbleChart.vue
@@ -1,7 +1,6 @@
 <script setup>
 /** Vendor */
 import * as d3 from "d3"
-import { DateTime } from "luxon"
 
 /** Services */
 import { abbreviate, formatBytes } from "@/services/utils"
@@ -9,6 +8,7 @@ import { abbreviate, formatBytes } from "@/services/utils"
 /** API */
 import { fetchRollups } from "@/services/api/rollup.js"
 
+const emit = defineEmits(["clearFilters"])
 const props = defineProps({
 	data: {
 		type: Array,
@@ -344,7 +344,11 @@ onMounted(async () => {
         rollups.value = prepareRollupsData(props.data)
     }
 
-	buildChart(chartEl.value.wrapper, rollups.value)
+    if (rollups.value?.length) {
+        nextTick(() => {
+            buildChart(chartEl.value.wrapper, rollups.value)
+        })
+    }
 })
 
 watch(
@@ -352,7 +356,11 @@ watch(
 	() => {
         rollups.value = prepareRollupsData(props.data)
 
-        buildChart(chartEl.value.wrapper, rollups.value)
+        if (rollups.value.length) {
+            nextTick(() => {
+                buildChart(chartEl.value.wrapper, rollups.value)
+            })
+        }
 	}
 )
 
@@ -399,7 +407,13 @@ watch(
             </div>
         </Transition>
         
-        <Flex ref="chartEl" :class="$style.chart" />
+        <Flex v-if="rollups?.length" ref="chartEl" :class="$style.chart" />
+        <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 rollups to display </Text>
+            <Text size="12" weight="500" height="160" color="tertiary" align="center">
+                Try to change the filters or <Text @click="emit('clearFilters')" size="12" color="secondary" :style="{cursor: 'pointer', textDecoration: 'underline'}">clear</Text> them
+            </Text>
+        </Flex>
     </Flex>
 </template>
 
@@ -451,6 +465,13 @@ watch(
 	}
 }
 
+.empty {
+    width: 992px;
+    height: 400px;
+
+    margin-top: 24px;
+}
+
 @media (max-width: 1050px) {
     .chart {
         width: 100%;
diff --git a/components/modules/stats/tabs/RollupsTab.vue b/components/modules/stats/tabs/RollupsTab.vue
index c2c21d04..b5ecabf5 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, isMainnet } from "@/services/utils"
+import { capitilize, capitalizeAndReplace, isMainnet } from "@/services/utils"
 
 /** API */
 import { fetchRollups, fetchRollupsDailyStats } from "@/services/api/rollup.js"
@@ -65,15 +65,34 @@ const getRollupsDailyStats = async () => {
 
 const categories = computed(() => {
 	let res = []
-	if (enumStore.enums.rollupCategories.length) {
+	if (enumStore.enums?.rollupCategories?.length) {
 		res = enumStore.enums.rollupCategories.slice(1)
 		res.push('other')
 	}
 	
 	return res	
 })
-const getCategoryDisplayName = (category) => {
-	switch (category) {
+const types = computed(() => {
+	let res = []
+	if (enumStore.enums?.rollupTypes?.length) {
+		res = enumStore.enums.rollupTypes
+	}
+	
+	return res	
+})
+const tags = computed(() => {
+	let res = []
+	if (enumStore.enums?.rollupTags?.length) {
+		res = enumStore.enums.rollupTags
+	}
+	
+	return res
+})
+const providers = ref([])
+const stacks = ref([])
+
+const getDisplayName = (name) => {
+	switch (name) {
 		case 'nft':
 			return 'NFT'
 
@@ -81,52 +100,105 @@ const getCategoryDisplayName = (category) => {
 			return 'Other'
 
 		default:
-			return capitilize(category)
+			return capitilize(name)
 	}
 }
 
+const popovers = reactive({
+	categories: false,
+	types: false,
+	providers: false,
+	stacks: false,
+	tags: false,
+})
+const keyMap = {
+	categories: 'category',
+	types: 'type',
+	providers: 'provider',
+	stacks: 'stack',
+	tags: 'tags',
+}
+
 const filters = reactive({
 	categories: categories.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	types: types.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	providers: {},
+	stacks: {},
+	tags: tags.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
+})
+const isFilterActive = computed(() => {
+	return Object.values(filters).some((f) => Object.values(f).some((v) => v))
 })
-const filterRollupByCategories = () => {
-	let categories = Object.entries(filters.categories)
-						.filter(([key, value]) => value === true)
-						.map(([key]) => key === 'other' ? 'uncategorized' : key)
-	
-	filteredRollups.value = categories.length > 0 ? series.value?.data.filter(el => categories.includes(el.category)) : series.value?.data
-	filteredRollupsDailyStats.value = categories.length > 0 ? rollupsDailyStats.value?.filter(el => categories.includes(el.category)) : rollupsDailyStats.value
-}
 const savedFiltersBeforeChanges = ref(null)
-const isCategoriesPopoverOpen = ref(false)
-const handleOpenCategoriesPopover = () => {
-	isCategoriesPopoverOpen.value = true
+const filterRollups = () => {
+    const activeFilters = Object.entries(filters).reduce((acc, [filterName, filterValues]) => {
+        const activeKeys = Object.entries(filterValues)
+            .filter(([_, value]) => value === true)
+            .map(([key]) => (key === 'other' ? 'uncategorized' : key))
+
+        if (activeKeys.length > 0) {
+            acc[filterName] = activeKeys
+        }
+        return acc
+    }, {})
+
+    const applyFilters = (data) => {
+        if (Object.keys(activeFilters).length === 0) return data
+
+        return data.filter((el) =>
+            Object.entries(activeFilters).every(([filterName, values]) => {
+				const elValue = el[keyMap[filterName]];
+
+				if (Array.isArray(elValue)) {
+					return values.some(value => elValue.includes(value));
+				} else {
+					return values.includes(elValue);
+				}
+			})
+        )
+    }
 
-	if (Object.keys(filters.categories).find((f) => filters.categories[f])) {
-		savedFiltersBeforeChanges.value = { ...filters.categories }
-	}
+    filteredRollups.value = applyFilters(series.value?.data || [])
+    filteredRollupsDailyStats.value = applyFilters(rollupsDailyStats.value || [])
 }
-const onCategoriesPopoverClose = () => {
-	isCategoriesPopoverOpen.value = false
 
+const handleOpenPopover = (name) => {
+	popovers[name] = true
+
+	if (Object.keys(filters[name]).find((f) => filters[name][f])) {
+		savedFiltersBeforeChanges.value = { ...filters[name] }
+	}
+}
+const onPopoverClose = (name) => {
+	popovers[name] = false
+	
 	if (savedFiltersBeforeChanges.value) {
-		filters.categories = savedFiltersBeforeChanges.value
+		filters[name] = savedFiltersBeforeChanges.value
 		savedFiltersBeforeChanges.value = null
 	} else {
-		resetFilters("categories")
+		resetFilters(name)
 	}
 }
-const handleApplyCategoriesFilters = () => {
+const handleApplyFilters = (name) => {
 	savedFiltersBeforeChanges.value = null
-	isCategoriesPopoverOpen.value = false
+	popovers[name] = false
 
-	filterRollupByCategories()
+	filterRollups()
 }
-const resetFilters = (target) => {
-	Object.keys(filters[target]).forEach((f) => {
-		filters[target][f] = false
-	})
+const resetFilters = (name) => {
+	if (name) {
+		Object.keys(filters[name]).forEach((f) => {
+			filters[name][f] = false
+		})
+	} else {
+		Object.keys(filters).forEach((f) => {
+			Object.keys(filters[f]).forEach((k) => {
+				filters[f][k] = false
+			})
+		})
+	}
 
-	filterRollupByCategories()
+	filterRollups()
 }
 
 const route = useRoute()
@@ -145,10 +217,10 @@ onMounted(async () => {
 	switch (activeSection.value) {
 		case 'overview':
 			await getRollups()
-			filterRollupByCategories()
 
 			break
 		case 'daily_stats':
+			await getRollups()
 			await getRollupsDailyStats()
 
 			break
@@ -166,12 +238,14 @@ watch(
 			case 'overview':
 				if (!series.value?.data?.length && !isLoading.value) {
 					await getRollups()
+					filterRollups()
 				}
 
 				break
 			case 'daily_stats':
 				if (!rollupsDailyStats.value.length && !isLoading.value) {
 					await getRollupsDailyStats()
+					filterRollups()
 				}
 
 				break
@@ -181,18 +255,51 @@ watch(
 	}
 )
 
+watch(
+	() => series.value?.data?.length,
+	() => {
+		if (series.value?.data?.length) {
+			series.value.data.forEach((d) => {
+				if (d.stack) {
+					stacks.value.push(d.stack)
+				}
+				if (d.provider) {
+					providers.value.push(d.provider)
+				}
+			})
+			stacks.value = [...new Set(stacks.value)]
+			providers.value = [...new Set(providers.value)]
+
+			filters.stacks = stacks.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+			filters.providers = providers.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+		}
+	}
+)
 watch(
 	() => categories.value,
 	() => {
 		filters.categories = categories.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
 	}
 )
+watch(
+	() => types.value,
+	() => {
+		filters.types = types.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
+watch(
+	() => tags.value,
+	() => {
+		filters.tags = tags.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
+
 </script>
 
 <template>
     <Flex align="center" direction="column" gap="12" wide :class="$style.wrapper">
-		<Flex align="center" justify="between" wide :class="$style.segment">
-			<Flex align="center" gap="12">
+		<Flex align="start" justify="between" wide :class="$style.segment">
+			<Flex align="center" gap="12" :style="{minWidth: '200px'}">
 				<Text
 					v-for="s in sections"
 					@click="activeSection = s"
@@ -200,47 +307,58 @@ watch(
 					weight="600"
 					:class="[$style.section, s === activeSection && $style.active]"
 				>
-					{{ capitalizeAndReplaceUnderscore(s) }}
+					{{ capitalizeAndReplace(s, "_") }}
 				</Text>
 			</Flex>
 
-			<Flex align="center" gap="12">
-				<Popover :open="isCategoriesPopoverOpen" @on-close="onCategoriesPopoverClose" width="200">
-					<Button @click="handleOpenCategoriesPopover" type="secondary" size="mini">
-						<Icon name="plus-circle" size="12" color="tertiary" />
-						<Text color="secondary">Category</Text>
-
-						<template v-if="Object.keys(filters.categories).find((c) => filters.categories[c])">
-							<div :class="$style.vertical_divider" />
+			<Flex align="center" justify="end" wide gap="12" wrap="wrap">
+				<Popover
+					v-for="p in Object.keys(popovers)"
+					:open="popovers[p]"
+					@on-close="onPopoverClose(p)"
+					width="200"
+				>
+					<Button @click="handleOpenPopover(p)" type="secondary" size="mini">
+						<template v-if="!Object.keys(filters[p]).find((item) => filters[p][item])">
+							<Icon name="plus-circle" size="12" color="tertiary" />
+							<Text color="secondary"> {{ capitilize(keyMap[p]) }} </Text>
+						</template>
 
-							<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
-								{{ Object.keys(filters.categories)
-									.filter((c) => filters.categories[c])
-									.map(c => getCategoryDisplayName(c))
-									.join(", ")
+						<template v-else>
+							<Text size="12" weight="600" color="primary">
+								{{ Object.keys(filters[p]).filter((item) => filters[p][item]).length < 3
+									? Object.keys(filters[p])
+										.filter((item) => filters[p][item])
+										.map(item => getDisplayName(item))
+										.join(", ")
+									: `${Object.keys(filters[p])
+										.filter((item) => filters[p][item])
+										.slice(0, 2)
+										.map(item => getDisplayName(item))
+										.join(", ")} and ${Object.keys(filters[p]).filter((item) => filters[p][item]).length - 2} more`
 								}}
 							</Text>
 
-							<Icon @click.stop="resetFilters('categories', true)" name="close-circle" size="12" color="secondary" />
+							<Icon @click.stop="resetFilters(p)" name="close-circle" size="12" color="secondary" />
 						</template>
 					</Button>
 
 					<template #content>
 						<Flex direction="column" gap="12">
-							<Text size="12" weight="500" color="secondary">Filter by Category</Text>
+							<Text size="12" weight="500" color="secondary"> {{ `Filter by ${capitilize(keyMap[p])}` }} </Text>
 
 							<Flex direction="column" gap="8" :class="$style.filters_list">
 								<Checkbox
-									v-for="c in Object.keys(filters.categories)"
-									v-model="filters.categories[c]"
+									v-for="item in Object.keys(filters[p])"
+									v-model="filters[p][item]"
 								>
 									<Text size="12" weight="500" color="primary">
-										{{ getCategoryDisplayName(c) }}
+										{{ getDisplayName(item) }}
 									</Text>
 								</Checkbox>
 							</Flex>
 
-							<Button @click="handleApplyCategoriesFilters" type="secondary" size="mini" wide>Apply</Button>
+							<Button @click="handleApplyFilters(p)" type="secondary" size="mini" wide>Apply</Button>
 						</Flex>
 					</template>
 				</Popover>
@@ -248,7 +366,7 @@ watch(
 		</Flex>
 
 		<Flex v-if="activeSection === 'overview'" align="center" direction="column" gap="12" wide>
-			<RollupsBubbleChart v-if="!isLoading" :data="filteredRollups" />
+			<RollupsBubbleChart v-if="!isLoading" @clearFilters="resetFilters" :data="filteredRollups" />
 
 			<template v-if="!isLoading">
 				<Flex align="center" justify="between" wide :class="$style.segment">
@@ -281,7 +399,7 @@ watch(
 			</template>
 		</Flex>
 
-		<RollupsActivity v-else-if="activeSection === 'daily_stats' && !isLoading" :rollups="filteredRollupsDailyStats" />
+		<RollupsActivity v-else-if="activeSection === 'daily_stats' && !isLoading" @clearFilters="resetFilters" :rollups="filteredRollupsDailyStats" :isFilterActive="isFilterActive" />
     </Flex>
 </template>
 
@@ -311,7 +429,7 @@ watch(
 
 .chart_card {
 	max-width: 480px;
-	max-height: 200px;
+	height: 200px;
 }
 
 @media (max-width: 900px) {
diff --git a/components/widgets/BlobsWidget.vue b/components/widgets/BlobsWidget.vue
index 9946d832..74f0ccc8 100644
--- a/components/widgets/BlobsWidget.vue
+++ b/components/widgets/BlobsWidget.vue
@@ -62,8 +62,7 @@ onMounted(async () => {
 	while (weeks.value.length > 24) {
 		weeks.value.shift()
 	}
-
-	// totalSize.time = DateTime.fromISO(weeks.value[0][0].time)
+	
 	totalSize.time = Object.values(weeks.value[0]).find(Boolean).time
 })
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 44a9914e..bdb13490 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,12 +4,14 @@ import AdvBanner from "@/components/shared/AdvBanner.vue"
 
 /** Services */
 import { getNetworkName } from "@/services/utils/general"
+
+const showPromoBackground = useCookie("showPromoBackground", { default: () => true })
 </script>
 
 <template>
 	<Flex direction="column">
 		<Flex justify="center" :class="$style.wrapper">
-			<img v-if="getNetworkName() === 'Mammoth'" src="/img/mammoth.jpeg" :class="$style.mammoth_bg" />
+			<img v-if="getNetworkName() === 'Mammoth' && showPromoBackground" src="/img/mammoth.jpeg" :class="$style.mammoth_bg" />
 
 			<LeftSidebar :class="$style.sidebar" />
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 69d0558e..6187dfc1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -149,4 +149,4 @@ export default defineNuxtConfig({
 	},
 
 	compatibilityDate: "2025-04-02",
-})
+})
\ No newline at end of file
diff --git a/pages/blocks.vue b/pages/blocks.vue
index c9d3357f..705f22ed 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -8,7 +8,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import AmountInCurrency from "@/components/AmountInCurrency.vue"
 
 /** Services */
-import { tia, comma, space, formatBytes } from "@/services/utils"
+import { comma, space, formatBytes } from "@/services/utils"
 
 /** API */
 import { fetchBlocks, fetchBlocksCount } from "@/services/api/block"
diff --git a/pages/faucet.vue b/pages/faucet.vue
index 10905830..1af05704 100644
--- a/pages/faucet.vue
+++ b/pages/faucet.vue
@@ -3,7 +3,7 @@
 import { executeFaucet, faucetAddress, fetchBalance } from "@/services/api/faucet"
 
 /** Services */
-import { capitilize, comma, splitAddress, tia } from "@/services/utils"
+import { capitilize, comma, getNetworkName, splitAddress, tia } from "@/services/utils"
 import { Server, useServerURL } from "@/services/config"
 
 /** UI */
@@ -71,7 +71,8 @@ useHead({
 const isLoading = ref(false)
 const address = ref("")
 const account = ref()
-const network = ref("mocha")
+const networks = ["Mocha", "Arabica", "Mammoth"]
+const network = ref(networks.find(n => n === getNetworkName()) || networks[0].toLowerCase())
 
 const isNetworkSelectorOpen = ref(false)
 const fetchAccount = async() => {
@@ -233,7 +234,7 @@ watch(
 
 await refreshFaucetBalance()
 onMounted(() => {
-	if ((useServerURL().includes('mocha') || useServerURL().includes('arabica')) && appStore.address) {
+	if ((useServerURL().includes('mocha') || useServerURL().includes('arabica') || useServerURL().includes('mammoth')) && appStore.address) {
 		address.value = appStore.address
 	}
 
@@ -293,9 +294,12 @@ onMounted(() => {
 							</Flex>
 
 							<template #popup>
-								<DropdownItem @click="handleChangeNetwork('mocha')">Mocha</DropdownItem>
-								<DropdownItem @click="handleChangeNetwork('arabica')">Arabica</DropdownItem>
-								<DropdownItem @click="handleChangeNetwork('mammoth')">Mammoth</DropdownItem>
+								<DropdownItem
+									v-for="net in networks"
+									@click="handleChangeNetwork(net.toLowerCase())"
+								>
+									{{ net }}
+								</DropdownItem>
 							</template>
 						</Dropdown>
 					</Flex>
diff --git a/pages/namespaces/treemap/index.vue b/pages/namespaces/treemap/index.vue
index 731aa21b..59ac417d 100644
--- a/pages/namespaces/treemap/index.vue
+++ b/pages/namespaces/treemap/index.vue
@@ -138,7 +138,7 @@ const handleSelectFilter = (target) => {
 
 <template>
 	<Flex direction="column" wide :class="$style.wrapper">
-		<Flex align="end" justify="between" :class="$style.breadcrumbs">
+		<Flex align="start" justify="between" :class="$style.breadcrumbs">
 			<Breadcrumbs
 				:items="[
 					{ link: '/', name: 'Explore' },
@@ -175,7 +175,7 @@ const handleSelectFilter = (target) => {
 }
 
 .breadcrumbs {
-	margin-bottom: 32px;
+	margin-bottom: 16px;
 }
 
 .gNode {
diff --git a/pages/rollup/rank/[slug].vue b/pages/rollup/rank/[slug].vue
new file mode 100644
index 00000000..34e33707
--- /dev/null
+++ b/pages/rollup/rank/[slug].vue
@@ -0,0 +1,754 @@
+<script setup>
+/** Vendor */
+import * as d3 from "d3"
+import { DateTime } from "luxon"
+
+/** API */
+import { fetchRollupBySlug, fetchRollupOrgBySlug, fetchRollupOrgCommitsBySlug, fetchRollupOrgReposBySlug } from "@/services/api/rollup"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Services */
+import { comma, isMainnet, roundTo, sortArrayOfObjects } from "@/services/utils"
+import { getMetricCategory, getRankCategory } from "@/services/constants/rollups"
+
+/** Stores */
+import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
+const cacheStore = useCacheStore()
+const modalsStore = useModalsStore()
+const rollupRankingStore = useRollupsRankingStore()
+
+const route = useRoute()
+const router = useRouter()
+
+if (!isMainnet()) {
+	router.push("/")
+}
+
+// Pagination
+const limit = 10
+const page = ref(1)
+const pages = computed(() => Math.ceil(org.value?.repos / limit))
+const handlePrev = () => {
+	if (page.value === 1) return
+	page.value -= 1
+}
+const handleNext = () => {
+	if (page.value === pages.value) return
+	page.value += 1
+}
+
+// Fetch data
+const isRefetching = ref(false)
+const org = ref({})
+const rollup = ref({})
+const repos = ref([])
+const commits = ref([])
+const totalCommits = computed(() => commits.value?.reduce((acc, c) => acc + c.amount, 0))
+const rollupRanking = computed(() => {
+	if (!rollupRankingStore?.initialized) return null
+
+	const rollupRaw = rollupRankingStore?.rollups_ranking?.ranking?.[route.params.slug]
+	if (!rollupRaw) return null
+
+	const rawRanking = rollupRaw.ranking
+	const ranking = {}
+	let description = []
+
+	for (const [key, value] of Object.entries(rawRanking)) {
+		if (key === "rank") continue
+
+		const category = getMetricCategory(key, value / 100)
+		ranking[key] = { category, score: value }
+
+		description.push({
+			text: getMetricDescription(key),
+			category,
+			score: value,
+		})
+	}
+
+	ranking.rank = {
+		category: getRankCategory(roundTo(rawRanking.rank / 10, 0)),
+		score: rawRanking.rank,
+	}
+
+	description = sortArrayOfObjects(description, "category.rank", false).slice(0, 3)
+	description[0].text += ", "
+	description[1].text += " and "
+	description[2].text += "."
+
+	return {
+		...rollupRaw,
+		ranking,
+		description,
+		updated: rollupRankingStore?.rollups_ranking?.last_update,
+	}
+})
+const getMetricDescription = (metric) => {
+	switch (metric) {
+		case "avg_pfb_size":
+			return "average blob size rate"
+		case "commits_weekly":
+			return "commit rate"
+		case "day_blobs_count":
+			return "blob sending rate"
+		case "last_message_time":
+			return "last message period"
+		case "last_pushed_at":
+			return "last commit period"
+		default:
+			return ""
+	}
+}
+const chartEl = ref(null)
+
+const getRollupRepos = async (slug) => {
+	const data = await fetchRollupOrgReposBySlug({
+		slug: slug,
+		limit: limit,
+		offset: (page.value - 1) * limit,
+		// sort: sort.dir,
+		// sort_by: sort.by,
+	})
+	
+	return data
+}
+const fetchData = async () => {
+	isRefetching.value = true
+
+	const slug = route.params.slug
+	const [rollupData, summaryData, reposData, commitsData] = await Promise.all([
+		fetchRollupBySlug(slug),
+		fetchRollupOrgBySlug(slug),
+		getRollupRepos(slug),
+		fetchRollupOrgCommitsBySlug({ slug }),
+	])
+
+	org.value = summaryData
+	rollup.value = rollupData?.data?.value
+	repos.value = reposData
+	commits.value = commitsData
+
+	isRefetching.value = false
+}
+await fetchData()
+
+defineOgImage({
+	title: "Rollup",
+	rollup: rollup.value,
+	component: "RollupImage",
+	cacheKey: `${rollup.value?.name}`,
+})
+
+useHead({
+	title: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+	link: [
+		{
+			rel: "canonical",
+			href: `https://celenium.io${route.path}`,
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: `Rollup ${rollup.value?.name} blobs, namespaces, metadata, social links, contacts and other data.`,
+		},
+		{
+			property: "og:title",
+			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+		},
+		{
+			property: "og:description",
+			content: `Rollup ${rollup.value?.name} blobs, namespaces, metadata, social links, contacts and other data.`,
+		},
+		{
+			property: "og:url",
+			content: `https://celenium.io${route.path}`,
+		},
+		{
+			property: "og:image",
+			content: `https://celenium.io${route.path}__og_image__/og.png`,
+		},
+		{
+			name: "twitter:title",
+			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+		},
+		{
+			name: "twitter:description",
+			content: `Rollup ${rollup.value?.name} blobs, namespaces, metadata, social links, contacts and other data.`,
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+	],
+})
+
+const buildChart = (chart, data) => {
+	const { width, height } = chart.getBoundingClientRect()
+	const margin = { top: 4, bottom: 4 }
+
+	const MAX_VALUE = d3.max(data?.map(d => d.amount))
+	
+	/** Scales */
+	const x = d3.scaleUtc(
+		d3.extent(data, (d => new Date(d.time))),
+		[0, width],
+	)
+	const y = d3.scaleLinear([0, MAX_VALUE], [height - margin.bottom, margin.top])
+
+	const line = d3
+		.line()
+		.x(d => x(new Date(d.time)))
+		.y(d => y(d.amount))
+		.curve(d3.curveCatmullRom)
+
+	/** 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%;")
+		.attr("id", "chart")
+		.style("-webkit-tap-highlight-color", "transparent")
+
+	/** Chart Lines */
+	const cPath = 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(data))
+
+	if (chart.children[0]) chart.children[0].remove()
+	chart.append(svg.node())
+
+	const cTotalLength = cPath.node().getTotalLength();
+
+	cPath.attr("stroke-dasharray", `${cTotalLength} ${cTotalLength}`)
+		.attr("stroke-dashoffset", cTotalLength)
+		.transition()
+		.duration(1_000)
+		.ease(d3.easeLinear)
+		.attr("stroke-dashoffset", 0);
+}
+
+const handleHowItWorksClick = () => {
+	cacheStore.selectedRollupRank = rollupRanking.value
+	cacheStore.selectedRollup = rollup.value
+	modalsStore.open("rollupRank")
+}
+
+watch(
+	() => page.value,
+	async () => {
+		repos.value = await getRollupRepos(rollup.value.slug)
+	},
+)
+
+onMounted(() => {
+	if (chartEl.value && commits.value?.length) {
+		buildChart(chartEl.value?.wrapper, commits.value.reverse())
+	}
+})
+</script>
+
+<template>
+	<Flex direction="column" gap="32" wide :class="$style.wrapper">
+		<Flex v-if="rollup"  direction="column" gap="16">
+			<Flex justify="between" :class="$style.breadcrumbs">
+				<Breadcrumbs
+					:items="[
+						{ link: '/', name: 'Explore' },
+						{ link: '/rollups', name: 'Rollups Leaderboard' },
+						{ link: route.fullPath, name: rollup.name },
+					]"
+				/>
+
+				<Button link="https://forms.gle/nimJyQJG4Lb4BTcG7" target="_blank" type="secondary" size="mini">
+					<Icon name="rollup-plus" size="12" color="secondary" /> Register rollup
+				</Button>
+			</Flex>
+
+			<Flex align="start" justify="between" gap="32" :class="$style.area">
+				<Flex direction="column" gap="32" :class="$style.left">
+					<Flex direction="column" gap="16">
+						<Flex align="start" justify="between" gap="16" wide :class="$style.card">
+							<Flex gap="16">
+								<Flex v-if="rollup.logo" :class="$style.avatar_container">
+									<img :src="rollup.logo" :class="$style.avatar_image" />
+								</Flex>
+								<Flex direction="column" gap="8">
+									<Text size="13" color="primary"> {{ rollup?.name }} </Text>
+									<Text size="12" color="tertiary" :style="{ lineHeight: '1.2' }"> {{ org?.description || rollup?.description }} </Text>
+								</Flex>
+							</Flex>
+
+							<Button :link="`/rollup/${rollup.slug}`" type="secondary" size="mini">
+								More about {{ rollup.name }}
+								<Icon name="arrow-narrow-up-right" size="12" color="secondary" />
+							</Button>
+						</Flex>
+
+						<Flex align="center" justify="between" gap="16">
+							<Flex direction="column" gap="16" :class="$style.card">
+								<Text size="13" color="secondary"> Total Blobs </Text>
+								<Flex align="center" gap="8">
+									<Icon name="blob" size="18" color="secondary" />
+									<Text size="18" weight="600" color="primary"> {{ comma(rollup.blobs_count) }} </Text>
+								</Flex>
+							</Flex>
+							<Flex align="center" gap="12" :class="$style.card" wide>
+								<Flex direction="column" gap="16" :class="$style.overlay">
+									<Text size="13" color="secondary"> Total Commits  </Text>
+									<Flex align="center" gap="6">
+										<Icon name="commit" size="18" color="secondary" />
+										<Text size="18" weight="600" color="primary"> {{ comma(totalCommits) }} </Text>
+									</Flex>
+								</Flex>
+								<Flex ref="chartEl" :class="$style.chart" wide />
+							</Flex>
+						</Flex>
+
+						<Flex wide direction="column" gap="4">
+							<Flex justify="between" :class="$style.header">
+								<Flex align="center" gap="8">
+									<Icon name="github" size="16" color="secondary" />
+									<Text size="14" weight="600" color="primary"> {{ `Repositories - ${org?.repos || 0}` }} </Text>
+								</Flex>
+
+								<Flex align="center" gap="6">
+									<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
+										<Icon name="arrow-left-stop" size="12" color="primary" />
+									</Button>
+									<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
+										<Icon name="arrow-left" size="12" color="primary" />
+									</Button>
+
+									<Button type="secondary" size="mini" disabled>
+										<Text size="12" weight="600" color="primary">Page {{ page }} </Text>
+									</Button>
+
+									<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages || repos?.length === 0">
+										<Icon name="arrow-right" size="12" color="primary" />
+									</Button>
+								</Flex>
+							</Flex>
+
+							<Flex direction="column" gap="16" wide :class="[$style.table, isRefetching && $style.disabled]">
+								<div v-if="repos?.length" :class="$style.table_scroller">
+									<table>
+										<thead>
+											<tr>
+												<th><Text size="12" weight="600" color="tertiary" noWrap>Repository</Text></th>
+												<th><Text size="12" weight="600" color="tertiary" noWrap>Stars</Text></th>
+												<th><Text size="12" weight="600" color="tertiary" noWrap>Commits</Text></th>
+												<th><Text size="12" weight="600" color="tertiary" noWrap>Latest Push</Text></th>
+											</tr>
+										</thead>
+
+										<tbody>
+											<tr v-for="r in repos">
+												<td>
+													<NuxtLink :to="r.url" target="_blank">
+														<Flex align="start" justify="center" direction="column" gap="4">
+															<Text size="13" weight="600" color="primary"> {{ r.name }} </Text>
+
+															<Text size="12" weight="600" color="tertiary" :class="$style.description"> {{ r.description || 'No description' }} </Text>
+														</Flex>
+													</NuxtLink>
+												</td>
+												<td>
+													<NuxtLink :to="r.url" target="_blank">
+														<Flex align="center">
+															<Text size="13" weight="600" color="primary"> {{ comma(r.stargazers) }} </Text>
+														</Flex>
+													</NuxtLink>
+												</td>
+												<td>
+													<NuxtLink :to="r.url" target="_blank">
+														<Tooltip side="top">
+															<Flex align="start" justify="center" direction="column" gap="4">
+																<Text size="13" weight="600" color="primary"> {{ comma(r.commits) }} </Text>
+
+																<Text v-if="r.commits_weekly" size="12" weight="600" color="tertiary"> {{ `+${comma(r.commits_weekly)}` }} </Text>
+															</Flex>
+
+															<template #content>
+																<Text size="12" weight="600" color="secondary"> {{ comma(r.commits_weekly) }} </Text>
+																<Text size="12" color="secondary"> {{ `${r.commits_weekly === 1 ? ' commit' : ' commits'} in the last week` }} </Text>
+															</template>
+														</Tooltip>
+													</NuxtLink>
+												</td>
+												<td>
+													<NuxtLink :to="r.url" target="_blank">
+														<Flex align="center" gap="4">
+															<Icon name="clock-forward-2" size="13" color="secondary" />
+															<Text size="13" weight="600" color="primary">
+																{{ DateTime.fromISO(r.last_pushed_at).toRelative({ locale: "en", style: "short" }) }}
+															</Text>
+														</Flex>
+													</NuxtLink>
+												</td>
+											</tr>
+										</tbody>
+									</table>
+								</div>
+								<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 repositories found </Text>
+									<Text size="12" weight="500" height="160" color="tertiary" align="center">
+										This rollup probably doesn't have an associated github account
+									</Text>
+								</Flex>
+							</Flex>
+						</Flex>
+					</Flex>
+				</Flex>
+
+				<Flex direction="column" gap="32" :class="$style.right" wide>
+					<Flex v-if="rollupRanking?.ranking?.rank?.category?.name" direction="column" gap="12" :class="$style.card">
+						<Text size="12" color="secondary" weight="600"> Activity Rank </Text>
+						<Flex direction="column" gap="12" :class="$style.rank_description">
+							<Flex direction="column" gap="12" :style="{ flex: 1 }">
+								<Icon name="laurel" size="32" :color="rollupRanking?.ranking?.rank?.category?.color" />
+								<Flex direction="column" gap="6">
+									<Text size="16" weight="600" :class="[$style.summary_rate, $style[rollupRanking?.ranking?.rank?.category?.name?.toLowerCase()]]" :style="{ textWrap: 'nowrap' }">
+										{{ `${roundTo(rollupRanking?.ranking?.rank?.score / 10, 0)} ${rollupRanking?.ranking?.rank?.category?.name}` }}
+									</Text>
+									<Text size="12" color="tertiary"> {{ rollupRanking?.ranking?.rank?.score }}% </Text>
+								</Flex>
+							</Flex>
+
+							<Text size="13" color="primary" weight="600" :style="{ lineHeight: '1.4' }">
+								{{ rollup.name }}
+								<Text weight="500" color="secondary">shows the </Text>
+								<span v-for="d in rollupRanking?.description">
+									<Text :class="[$style.summary_rate, $style[d.category.name.toLowerCase()]]">
+										{{ d.category.name.toLowerCase() + ' ' }}
+									</Text>
+									<Text weight="500" color="secondary"> {{ d.text }} </Text>
+								</span>
+							</Text>
+						</Flex>
+						<div :class="$style.divider" />
+
+						<Flex align="center" justify="between" gap="2" wide>
+							<Flex align="center" gap="4">
+								<Icon name="clock-forward-2" size="12" color="secondary" />
+								<Text size="12" color="tertiary">
+									Updated
+									<Text color="secondary" weight="600"> {{ DateTime.fromMillis(rollupRanking?.updated).toRelative({ locale: "en", style: "short" }) }} </Text>
+								</Text>
+							</Flex>
+
+							<Flex @click="handleHowItWorksClick" align="center" gap="4" :class="$style.how_it_works">
+								<Icon name="info" size="12" color="blue" />
+								<Text size="12" color="secondary" weight="600">How it works?</Text>
+							</Flex>
+						</Flex>
+					</Flex>
+					<Flex v-else direction="column" gap="12" :class="$style.card" :style="{ height: '220px' }">
+						<Text size="12" color="secondary" weight="600"> Activity Rank </Text>
+						<Icon name="laurel" size="32" color="tertiary" loading />
+						<Flex direction="column" gap="6" :style="{ flex: 1 }">
+							<Skeleton w="60" h="12" :style="{ marginTop: '4px' }" />
+							<Skeleton w="80" h="10" :style="{ marginTop: '4px' }" />
+
+							<Flex align="center" justify="center" direction="column" gap="8" :style="{ marginTop: '12px' }">
+								<Flex align="center" gap="12">
+									<Skeleton w="100" h="6" />
+									<Skeleton w="80" h="6" />
+									<Skeleton w="60" h="6" />
+								</Flex>
+
+								<Flex align="center" gap="12">
+									<Skeleton w="80" h="6" />
+									<Skeleton w="60" h="6" />
+									<Skeleton w="100" h="6" />
+								</Flex>
+							</Flex>
+						</Flex>
+					</Flex>
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 20px 24px 60px 24px;
+}
+
+.left {
+	min-width: 650px;
+	max-width: 650px;
+}
+
+.right {
+	min-width: 300px;
+	max-width: 300px;
+}
+
+.card {
+	position: relative;
+	border-radius: 6px;
+	background: var(--card-background);
+	padding: 16px;
+}
+
+.avatar_container {
+	position: relative;
+	width: 36px;
+	min-width: 36px;
+	height: 36px;
+	min-height: 36px;
+	overflow: hidden;
+	border-radius: 20%;
+}
+
+.avatar_image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.overlay {
+	position: absolute;
+	top: -2;
+	left: 0;
+	width: 50%;
+	min-height: 79px;
+	height: 100%;
+	border-radius: 6px;
+	background: linear-gradient(to right, var(--card-background), transparent);
+	padding: 16px;
+	z-index: 2;
+}
+
+.chart {
+	position: absolute;
+	top: 0;
+	left: 0;
+	position: relative;
+	flex: 1;
+	min-height: 47px;
+	width: 100%;
+}
+
+.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.header {
+	height: 46px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 16px;
+}
+
+.table_scroller {
+	overflow-x: auto;
+}
+
+.table {
+	border-radius: 4px 4px 4px 4px;
+	background: var(--card-background);
+
+	transition: all 0.2s ease;
+
+	& table {
+		width: 100%;
+		height: fit-content;
+
+		border-spacing: 0px;
+
+		padding-bottom: 12px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			& span {
+				display: flex;
+			}
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			&.sortable {
+				cursor: pointer;
+			}
+
+			&.sortable:hover {
+				& span {
+					color: var(--txt-secondary);
+				}
+			}
+		}
+
+		& tr td {
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding: 0 24px 0 16px;
+				/* width: 300px; */
+				
+				/* span {
+					&:last-child {
+						width: 300px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+				} */
+			}
+
+			& > a {
+				display: flex;
+
+				min-height: 44px;
+
+				/* padding-right: 24px; */
+			}
+		}
+	}
+}
+
+.description {
+	width: 300px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.empty {
+	padding: 16px 0;
+}
+
+.summary_rate {
+    color: transparent;
+    background-clip: text;
+}
+.legendary {
+	background-image: linear-gradient(var(--light-orange), var(--legendary));
+}
+.epic {
+	background-image: linear-gradient(var(--purple), var(--epic));
+}
+.good {
+	background-image: linear-gradient(var(--blue), var(--rare));
+}
+.poor {
+	background-image: linear-gradient(var(--txt-primary), var(--txt-tertiary));
+}
+.bad {
+	background-image: linear-gradient(var(--txt-tertiary), var(--txt-tertiary));
+}
+
+.laurel_loading {
+	animation: skeleton 1s ease infinite;
+	background: var(--op-10);
+}
+
+@keyframes skeleton {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+.divider {
+	width: 100%;
+	height: 2px;
+
+	background: var(--op-5);
+	border-radius: 50px;
+}
+
+.how_it_works {
+	cursor: pointer;
+
+	&:hover * {
+		color: var(--txt-primary);
+	}
+}
+
+@media (max-width: 1000px) {
+	.area {
+		flex-direction: column-reverse;
+	}
+
+	.left {
+		min-width: initial;
+		max-width: initial;
+	}
+
+	.right {
+		min-width: initial;
+		max-width: initial;
+	}
+
+	.rank_description {
+		flex-direction: row;
+		gap: 48px;
+	}
+}
+
+@media (max-width: 600px) {
+	.description {
+		max-width: 200px;
+	}
+}
+@media (max-width: 540px) {
+	.description {
+		max-width: 180px;
+	}
+}
+@media (max-width: 500px) {
+	.description {
+		max-width: 160px;
+	}
+}
+</style>
diff --git a/pages/rollups.vue b/pages/rollups.vue
deleted file mode 100644
index dc7b5758..00000000
--- a/pages/rollups.vue
+++ /dev/null
@@ -1,740 +0,0 @@
-<script setup>
-/** Vendor */
-import { DateTime } from "luxon"
-
-/** UI */
-import Button from "@/components/ui/Button.vue"
-import Checkbox from "@/components/ui/Checkbox.vue"
-import Popover from "@/components/ui/Popover.vue"
-import Tooltip from "@/components/ui/Tooltip.vue"
-
-/** Components */
-import AmountInCurrency from "@/components/AmountInCurrency.vue"
-
-/** Services */
-import { formatBytes, comma, truncateDecimalPart, capitilize } from "@/services/utils"
-
-/** API */
-import { fetchRollups, fetchRollupsCount } from "@/services/api/rollup"
-
-/** Stores */
-import { useEnumStore } from "@/store/enums"
-const enumStore = useEnumStore()
-
-useHead({
-	title: "Rollups - Celestia Explorer",
-	link: [
-		{
-			rel: "canonical",
-			href: "https://celenium.io/rollups",
-		},
-	],
-	meta: [
-		{
-			name: "description",
-			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
-		},
-		{
-			property: "og:title",
-			content: "Rollups Leaderboard - Celestia Explorer",
-		},
-		{
-			property: "og:description",
-			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
-		},
-		{
-			property: "og:url",
-			content: `https://celenium.io/rollups`,
-		},
-		{
-			property: "og:image",
-			content: "/img/seo/rollups.png",
-		},
-		{
-			name: "twitter:title",
-			content: "Rollups Leaderboard - Celestia Explorer",
-		},
-		{
-			name: "twitter:description",
-			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
-		},
-		{
-			name: "twitter:card",
-			content: "summary_large_image",
-		},
-		{
-			name: "twitter:image",
-			content: "https://celenium.io/img/seo/rollups.png",
-		},
-	],
-})
-
-const route = useRoute()
-const router = useRouter()
-
-const isRefetching = ref(false)
-const rollups = ref([])
-const count = ref(0)
-
-const utiaPerMB = (rollup) => {
-	let totalRollupMB = rollup.size / (1024 * 1024)
-
-	return rollup.fee / totalRollupMB
-}
-
-const sort = reactive({
-	by: "size",
-	dir: "desc",
-})
-const categories = computed(() => {
-	let res = []
-	if (enumStore.enums.rollupCategories.length) {
-		res = enumStore.enums.rollupCategories.slice(1)
-		res.push('other')
-	}
-	
-	return res	
-})
-const getCategoryDisplayName = (category) => {
-	switch (category) {
-		case 'nft':
-			return 'NFT'
-
-		case 'uncategorized':
-			return 'Other'
-
-		default:
-			return capitilize(category)
-	}
-}
-
-const filters = reactive({
-	categories: categories.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
-})
-const savedFiltersBeforeChanges = ref(null)
-
-const isCategoriesPopoverOpen = ref(false)
-const handleOpenCategoriesPopover = () => {
-	isCategoriesPopoverOpen.value = true
-
-	if (Object.keys(filters.categories).find((f) => filters.categories[f])) {
-		savedFiltersBeforeChanges.value = { ...filters.categories }
-	}
-}
-const onCategoriesPopoverClose = () => {
-	isCategoriesPopoverOpen.value = false
-
-	if (savedFiltersBeforeChanges.value) {
-		filters.categories = savedFiltersBeforeChanges.value
-		savedFiltersBeforeChanges.value = null
-	} else {
-		resetFilters("categories")
-	}
-}
-const handleApplyCategoriesFilters = () => {
-	savedFiltersBeforeChanges.value = null
-	isCategoriesPopoverOpen.value = false
-
-	if (page.value !== 1) {
-		page.value = 1
-	} else {
-		getRollups()
-	}
-}
-
-const resetFilters = (target) => {
-	Object.keys(filters[target]).forEach((f) => {
-		filters[target][f] = false
-	})
-
-	if (page.value !== 1) {
-		page.value = 1
-	} else {
-		getRollups()
-	}
-}
-
-const getRollupsCount = async () => {
-	const { data: rollupsCount } = await fetchRollupsCount()
-	count.value = rollupsCount.value
-}
-
-await getRollupsCount()
-
-const page = ref(route.query.page ? parseInt(route.query.page) : 1)
-const pages = computed(() => Math.ceil(count.value / 20))
-
-const getRollups = async () => {
-	isRefetching.value = true
-
-	const data = await fetchRollups({
-		categories:
-			Object.keys(filters.categories).find((f) => filters.categories[f]) &&
-			Object.keys(filters.categories)
-				.filter((f) => filters.categories[f])
-				.map(c => c === 'other' ? 'uncategorized' : c)
-				.join(","),
-		limit: 20,
-		offset: (page.value - 1) * 20,
-		sort: sort.dir,
-		sort_by: sort.by,
-	})
-	rollups.value = data.map((r, i) => ({...r, index: ((page.value - 1) * 20) + i + 1}))
-
-	isRefetching.value = false
-}
-
-getRollups()
-
-const handleSort = (by) => {
-	switch (sort.dir) {
-		case "desc":
-			if (sort.by == by) sort.dir = "asc"
-			break
-
-		case "asc":
-			sort.dir = "desc"
-
-			break
-	}
-
-	sort.by = by
-	if (page.value !== 1) {
-		page.value = 1
-	} else {
-		getRollups()
-	}
-}
-
-const handlePrev = () => {
-	if (page.value === 1) return
-
-	page.value -= 1
-}
-
-const handleNext = () => {
-	if (page.value === pages.value) return
-
-	page.value += 1
-}
-
-watch(
-	() => categories.value,
-	() => {
-		filters.categories = categories.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
-	}
-)
-
-watch(
-	() => page.value,
-	async () => {
-		getRollups()
-
-		router.replace({ query: { page: page.value } })
-	},
-)
-</script>
-
-<template>
-	<Flex direction="column" wide :class="$style.wrapper">
-		<Flex align="start" justify="between" :class="$style.breadcrumbs">
-			<Breadcrumbs
-				:items="[
-					{ link: '/', name: 'Explore' },
-					{ link: '/rollups', name: `Rollups Leaderboard` },
-				]"
-			/>
-
-			<Button link="https://forms.gle/nimJyQJG4Lb4BTcG7" target="_blank" type="secondary" size="mini">
-				<Icon name="rollup-plus" size="12" color="secondary" /> Register rollup
-			</Button>
-		</Flex>
-
-		<Flex wide direction="column" gap="4">
-			<Flex justify="between" :class="$style.header">
-				<Flex align="center" gap="8">
-					<Icon name="rollup" size="16" color="secondary" />
-					<Text size="14" weight="600" color="primary">Rollups Leaderboard</Text>
-				</Flex>
-
-				<!-- Pagination -->
-				<Flex v-if="pages" align="center" gap="6">
-					<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
-						<Icon name="arrow-left-stop" size="12" color="primary" />
-					</Button>
-					<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
-						<Icon name="arrow-left" size="12" color="primary" />
-					</Button>
-
-					<Button type="secondary" size="mini" disabled>
-						<Text size="12" weight="600" color="primary"> {{ page }} of {{ pages }} </Text>
-					</Button>
-
-					<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
-						<Icon name="arrow-right" size="12" color="primary" />
-					</Button>
-					<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
-						<Icon name="arrow-right-stop" size="12" color="primary" />
-					</Button>
-				</Flex>
-			</Flex>
-
-			<Flex align="center" justify="between" wrap="wrap" gap="8" :class="$style.settings">
-				<Flex wrap="wrap" align="center" gap="8">
-					<Popover :open="isCategoriesPopoverOpen" @on-close="onCategoriesPopoverClose" width="200">
-						<Button @click="handleOpenCategoriesPopover" type="secondary" size="mini">
-							<Icon name="plus-circle" size="12" color="tertiary" />
-							<Text color="secondary">Category</Text>
-
-							<template v-if="Object.keys(filters.categories).find((c) => filters.categories[c])">
-								<div :class="$style.vertical_divider" />
-
-								<Text size="12" weight="600" color="primary" style="text-transform: capitalize">
-									{{ Object.keys(filters.categories)
-										.filter((c) => filters.categories[c])
-										.map(c => getCategoryDisplayName(c))
-										.join(", ")
-									}}
-								</Text>
-
-								<Icon @click.stop="resetFilters('categories', true)" name="close-circle" size="12" color="secondary" />
-							</template>
-						</Button>
-
-						<template #content>
-							<Flex direction="column" gap="12">
-								<Text size="12" weight="500" color="secondary">Filter by Category</Text>
-
-								<Flex direction="column" gap="8" :class="$style.filters_list">
-									<Checkbox
-										v-for="c in Object.keys(filters.categories)"
-										v-model="filters.categories[c]"
-									>
-										<Text size="12" weight="500" color="primary">
-											{{ getCategoryDisplayName(c) }}
-										</Text>
-									</Checkbox>
-								</Flex>
-
-								<Button @click="handleApplyCategoriesFilters" type="secondary" size="mini" wide>Apply</Button>
-							</Flex>
-						</template>
-					</Popover>
-				</Flex>
-			</Flex>
-
-			<Flex direction="column" gap="16" wide :class="[$style.table, isRefetching && $style.disabled]">
-				<div v-if="rollups?.length" :class="$style.table_scroller">
-					<table>
-						<thead>
-							<tr>
-								<th><Text size="12" weight="600" color="tertiary" noWrap>#</Text></th>
-								<th><Text size="12" weight="600" color="tertiary" noWrap>Rollup</Text></th>
-								<th>
-									<Flex align="center" gap="6">
-										<Text size="12" weight="600" color="tertiary" noWrap>Category</Text>
-									</Flex>
-								</th>
-								<th @click="handleSort('size')" :class="$style.sortable">
-									<Flex align="center" gap="6">
-										<Text size="12" weight="600" color="tertiary" noWrap>Size</Text>
-										<Icon
-											v-if="sort.by === 'size'"
-											name="chevron"
-											size="12"
-											color="secondary"
-											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
-										/>
-									</Flex>
-								</th>
-								<th @click="handleSort('blobs_count')" :class="$style.sortable">
-									<Flex align="center" gap="6">
-										<Text size="12" weight="600" color="tertiary" noWrap>Blobs</Text>
-										<Icon
-											v-if="sort.by === 'blobs_count'"
-											name="chevron"
-											size="12"
-											color="secondary"
-											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
-										/>
-									</Flex>
-								</th>
-								<th @click="handleSort('fee')" :class="$style.sortable">
-									<Flex align="center" gap="6">
-										<Text size="12" weight="600" color="tertiary" noWrap>Blob Fees Paid</Text>
-										<Icon
-											v-if="sort.by === 'fee'"
-											name="chevron"
-											size="12"
-											color="secondary"
-											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
-										/>
-									</Flex>
-								</th>
-								<th><Text size="12" weight="600" color="tertiary" noWrap>Paid per MB</Text></th>
-							</tr>
-						</thead>
-
-						<tbody>
-							<tr v-for="r in rollups">
-								<td>
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="center">
-											<Text size="13" weight="600" color="primary">{{ r.index }}</Text>
-										</Flex>
-									</NuxtLink>
-								</td>
-								<td style="width: 1px">
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="center" gap="8">
-											<Flex v-if="r.logo" align="center" :class="$style.avatar_wrapper">
-												<div :class="$style.avatar_container">
-													<img :src="r.logo" :class="$style.avatar_image" />
-												</div>
-
-												<Tooltip :class="$style.status_dot_wrapper">
-													<div
-														:class="$style.status_dot"
-														:style="{
-															background: `${Math.abs(DateTime.fromISO(r.last_message_time).diffNow('days').days) < 1
-																			? ''
-																			: Math.abs(DateTime.fromISO(r.last_message_time).diffNow('days').days) < 7
-																				? 'var(--light-orange)'
-																				: 'var(--red)'
-																		}`
-														}"
-													/>
-
-													<template #content>
-														<Flex align="end" gap="8">
-															<Text size="12" weight="600" color="tertiary"> {{
-																`Was active 
-																${Math.abs(DateTime.fromISO(r.last_message_time).diffNow('days').days) < 1
-																	? 'less than a day ago'
-																	: Math.abs(DateTime.fromISO(r.last_message_time).diffNow('days').days) < 7
-																		? 'more than a day ago'
-																		: 'more than a week ago'
-																}`
-															}} </Text>
-														</Flex>
-													</template>
-												</Tooltip>
-											</Flex>
-											
-											<Text size="12" weight="600" color="primary" mono>
-												{{ r.name }}
-											</Text>
-										</Flex>
-									</NuxtLink>
-								</td>
-								<td>
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="center">
-											<Text size="13" weight="600" color="primary"> {{ getCategoryDisplayName(r.category) }} </Text>
-										</Flex>
-									</NuxtLink>
-								</td>
-								<td>
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="start" justify="center" direction="column" gap="4">
-											<Tooltip position="start" delay="400">
-												<Flex direction="column" gap="4">
-													<Text size="13" weight="600" color="primary">{{ formatBytes(r.size) }}</Text>
-
-													<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.size_pct * 100, 2) }}%</Text>
-												</Flex>
-
-												<template #content>
-													<Flex align="end" gap="8">
-														<Text size="12" weight="600" color="tertiary">Share of total size</Text>
-
-														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.size_pct * 100, 2) }}%</Text>
-													</Flex>
-												</template>
-											</Tooltip>
-										</Flex>
-									</NuxtLink>
-								</td>
-								<td>
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="start" justify="center" direction="column" gap="4">
-											<Tooltip position="start" delay="400">
-												<Flex direction="column" gap="4">
-													<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
-
-													<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
-												</Flex>
-
-												<template #content>
-													<Flex align="end" gap="8">
-														<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
-
-														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
-													</Flex>
-												</template>
-											</Tooltip>
-										</Flex>
-									</NuxtLink>
-								</td>
-								<td>
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="start" justify="center" direction="column" gap="4">
-											<AmountInCurrency :amount="{ value: r.fee }" />
-
-											<Tooltip position="start" delay="400">
-												<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
-
-												<template #content>
-													<Flex align="end" gap="8">
-														<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
-
-														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
-													</Flex>
-												</template>
-											</Tooltip>
-										</Flex>
-									</NuxtLink>
-								</td>
-								<td>
-									<NuxtLink :to="`/rollup/${r.slug}`">
-										<Flex align="center">
-											<AmountInCurrency :amount="{ value: utiaPerMB(r) }" />
-										</Flex>
-									</NuxtLink>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-
-				<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 rollups found </Text>
-					<Text size="12" weight="500" height="160" color="tertiary" align="center">
-						This network does not contain any rollups
-					</Text>
-				</Flex>
-			</Flex>
-			<Flex justify="end" :class="$style.footer">
-				<!-- Pagination -->
-				<Flex v-if="pages" align="center" gap="6">
-					<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
-						<Icon name="arrow-left-stop" size="12" color="primary" />
-					</Button>
-					<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
-						<Icon name="arrow-left" size="12" color="primary" />
-					</Button>
-
-					<Button type="secondary" size="mini" disabled>
-						<Text size="12" weight="600" color="primary"> {{ page }} of {{ pages }} </Text>
-					</Button>
-
-					<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
-						<Icon name="arrow-right" size="12" color="primary" />
-					</Button>
-					<Button @click="page = pages" type="secondary" size="mini" :disabled="page === pages">
-						<Icon name="arrow-right-stop" size="12" color="primary" />
-					</Button>
-				</Flex>
-			</Flex>
-		</Flex>
-	</Flex>
-</template>
-
-<style module>
-.wrapper {
-	padding: 20px 24px 60px 24px;
-}
-
-.breadcrumbs {
-	margin-bottom: 16px;
-}
-
-.header {
-	height: 46px;
-
-	border-radius: 8px 8px 4px 4px;
-	background: var(--card-background);
-
-	padding: 0 16px;
-}
-
-.footer {
-	height: 46px;
-
-	border-radius: 4px 4px 8px 8px;
-	background: var(--card-background);
-
-	padding: 0 16px;
-}
-
-.settings {
-	border-radius: 4px;
-	background: var(--card-background);
-
-	padding: 8px 16px;
-}
-
-.vertical_divider {
-	min-width: 2px;
-	height: 12px;
-	background: var(--op-10);
-}
-
-.filters_list {
-	height: auto;
-}
-
-.table_scroller {
-	overflow-x: auto;
-}
-
-.table {
-	border-radius: 4px 4px 4px 4px;
-	background: var(--card-background);
-
-	transition: all 0.2s ease;
-
-	& table {
-		width: 100%;
-		height: fit-content;
-
-		border-spacing: 0px;
-
-		padding-bottom: 12px;
-
-		& tbody {
-			& tr {
-				cursor: pointer;
-
-				transition: all 0.05s ease;
-
-				&:hover {
-					background: var(--op-5);
-				}
-
-				&:active {
-					background: var(--op-8);
-				}
-			}
-		}
-
-		& tr th {
-			text-align: left;
-
-			padding: 0;
-			padding-right: 16px;
-			padding-top: 16px;
-			padding-bottom: 8px;
-
-			& span {
-				display: flex;
-			}
-
-			&:first-child {
-				padding-left: 16px;
-				width: 16px;
-			}
-
-			&.sortable {
-				cursor: pointer;
-			}
-
-			&.sortable:hover {
-				& span {
-					color: var(--txt-secondary);
-				}
-			}
-		}
-
-		& tr td {
-			padding: 0;
-
-			white-space: nowrap;
-
-			&:first-child {
-				padding-left: 16px;
-			}
-
-			& > a {
-				display: flex;
-
-				min-height: 44px;
-
-				padding-right: 24px;
-			}
-		}
-	}
-}
-
-.avatar_wrapper {
-  position: relative;
-  width: 25px;
-  height: 25px;
-}
-
-.avatar_container {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	border-radius: 50%;
-}
-
-.avatar_image {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
-.status_dot_wrapper {
-	position: absolute;
-	bottom: 0px;
-	right: 0px;
-	z-index: 1;
-}
-
-.status_dot {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	background: var(--brand);
-	border: 1px solid var(--card-background);
-}
-
-.table.disabled {
-	opacity: 0.5;
-	pointer-events: none;
-}
-
-.message_type {
-	max-width: 100px;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.badge {
-	border-radius: 5px;
-	background: var(--op-5);
-	box-shadow: inset 0 0 0 1px var(--op-10);
-
-	padding: 4px 6px;
-}
-
-.empty {
-	padding: 16px 0;
-}
-
-@media (max-width: 500px) {
-	.wrapper {
-		padding: 32px 12px;
-	}
-
-	.header {
-		gap: 16px;
-
-		height: initial;
-
-		padding: 16px;
-	}
-}
-</style>
diff --git a/pages/rollups/index.vue b/pages/rollups/index.vue
new file mode 100644
index 00000000..c37e94d9
--- /dev/null
+++ b/pages/rollups/index.vue
@@ -0,0 +1,968 @@
+<script setup>
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import Checkbox from "@/components/ui/Checkbox.vue"
+import DiffChip from "@/components/modules/stats/DiffChip.vue"
+import Popover from "@/components/ui/Popover.vue"
+import Spinner from "@/components/ui/Spinner.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+
+/** Components */
+import AmountInCurrency from "@/components/AmountInCurrency.vue"
+
+/** Services */
+import { capitalizeAndReplace, capitilize, comma, formatBytes, isMainnet, roundTo, sortArrayOfObjects, truncateDecimalPart } from "@/services/utils"
+import { getLastActivityCategory, getRankCategory } from "@/services/constants/rollups"
+
+/** API */
+import { fetchRollups } from "@/services/api/rollup"
+
+/** Stores */
+import { useEnumStore } from "@/store/enums"
+import { useRollupsRankingStore } from "@/store/rollupsrank"
+const enumStore = useEnumStore()
+const rollupRankingStore = useRollupsRankingStore()
+
+useHead({
+	title: "Rollups - Celestia Explorer",
+	link: [
+		{
+			rel: "canonical",
+			href: "https://celenium.io/rollups",
+		},
+	],
+	meta: [
+		{
+			name: "description",
+			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+		},
+		{
+			property: "og:title",
+			content: "Rollups Leaderboard - Celestia Explorer",
+		},
+		{
+			property: "og:description",
+			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+		},
+		{
+			property: "og:url",
+			content: `https://celenium.io/rollups`,
+		},
+		{
+			property: "og:image",
+			content: "/img/seo/rollups.png",
+		},
+		{
+			name: "twitter:title",
+			content: "Rollups Leaderboard - Celestia Explorer",
+		},
+		{
+			name: "twitter:description",
+			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+		},
+		{
+			name: "twitter:card",
+			content: "summary_large_image",
+		},
+		{
+			name: "twitter:image",
+			content: "https://celenium.io/img/seo/rollups.png",
+		},
+	],
+})
+
+const route = useRoute()
+const router = useRouter()
+
+const isRefetching = ref(true)
+const rollups = ref([])
+const filteredRollups = ref([])
+const processedRollups = ref([])
+const rollupsRanking = computed(() => rollupRankingStore?.rollups_ranking?.ranking)
+
+const utiaPerMB = (rollup) => {
+	let totalRollupMB = rollup.size / (1024 * 1024)
+
+	return rollup.fee / totalRollupMB
+}
+
+const isConfigurePopoverOpen = ref(false)
+const config = reactive({
+	columns: {
+		...(isMainnet()
+			? {
+				activity: {
+						show: true,
+						sortPath: "stats.ranking.rank",
+					}
+			}
+			: {}
+		),
+		da_change: {
+			show: true,
+		},
+		size: {
+			show: true,
+			sortPath: "size",
+		},
+		blobs: {
+			show: true,
+			sortPath: "blobs_count",
+		},
+		blobs_fee_paid: {
+			show: true,
+			sortPath: "fee",
+		},
+		paid_per_mb: {
+			show: true,
+		},
+		today_blobs: {
+			show: false,
+			sortPath: "stats.day_blobs_count",
+		},
+		...(isMainnet()
+			? {
+				commits: {
+					show: false,
+					sortPath: "stats.commits_weekly",
+				},
+			}
+			: {}
+		),
+		avg_pfb_size: {
+			show: false,
+			sortPath: "stats.avg_pfb_size",
+		},
+		latest_activity: {
+			show: true,
+			sortPath: "last_message_time",
+		},
+	},
+})
+
+const getColumnName = (name) => {
+	switch (name) {
+		case "activity":
+			return "Activity Rank"
+		case "da_change":
+			return "DA Change"
+		case "paid_per_mb":
+			return "Paid per MB"
+		case "avg_pfb_size":
+			return "Avg PFB Size"
+		default:
+			return capitalizeAndReplace(name, '_')
+	}
+}
+
+const sort = reactive({
+	by: isMainnet() ? "stats.ranking.rank" : "size",
+	dir: "desc",
+})
+
+const categories = computed(() => {
+	let res = []
+	if (enumStore.enums.rollupCategories.length) {
+		res = enumStore.enums.rollupCategories
+	}
+	
+	return res	
+})
+const types = computed(() => {
+	let res = []
+	if (enumStore.enums.rollupTypes.length) {
+		res = enumStore.enums.rollupTypes
+	}
+	
+	return res	
+})
+const tags = computed(() => {
+	let res = []
+	if (enumStore.enums?.rollupTags?.length) {
+		res = enumStore.enums.rollupTags
+	}
+	
+	return res
+})
+
+const providers = ref([])
+const stacks = ref([])
+const getDisplayName = (name) => {
+	switch (name) {
+		case 'nft':
+			return 'NFT'
+
+		case 'uncategorized':
+			return 'Other'
+
+		default:
+			return capitilize(name)
+	}
+}
+const popovers = reactive({
+	categories: false,
+	types: false,
+	tags: false,
+	// providers: false,
+	// stacks: false,
+})
+const keyMap = {
+	categories: 'category',
+	types: 'type',
+	tags: 'tag',
+	// providers: 'provider',
+	// stacks: 'stack',
+}
+const filters = reactive({
+	categories: categories.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	types: types.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	tags: tags.value?.reduce((a, b) => ({ ...a, [b]: false }), {}),
+	// providers: {},
+	// stacks: {},
+})
+const savedFiltersBeforeChanges = ref(null)
+const handleOpenPopover = (name) => {
+	popovers[name] = true
+
+	if (Object.keys(filters[name]).find((f) => filters[name][f])) {
+		savedFiltersBeforeChanges.value = { ...filters[name] }
+	}
+}
+const onPopoverClose = (name) => {
+	popovers[name] = false
+	
+	if (savedFiltersBeforeChanges.value) {
+		filters[name] = savedFiltersBeforeChanges.value
+		savedFiltersBeforeChanges.value = null
+	} else {
+		resetFilters(name)
+	}
+}
+const handleApplyFilters = (name) => {
+	savedFiltersBeforeChanges.value = null
+	popovers[name] = false
+
+	if (page.value !== 1) {
+		page.value = 1
+	} else {
+		processRollups()
+	}
+}
+const resetFilters = (name) => {
+	if (name) {
+		Object.keys(filters[name]).forEach((f) => {
+			filters[name][f] = false
+		})
+	} else {
+		Object.keys(filters).forEach((f) => {
+			Object.keys(filters[f]).forEach((k) => {
+				filters[f][k] = false
+			})
+		})
+	}
+
+	if (page.value !== 1) {
+		page.value = 1
+	} else {
+		processRollups()
+	}
+}
+
+const pages = ref(1)
+const page = ref(route.query.page > 0 ? parseInt(route.query.page) : 1)
+const itemsPerPage = 20
+const limit = ref(100)
+
+const getRollups = async () => {
+	const data = await fetchRollups({
+		limit: limit.value,
+		// offset: (page.value - 1) * 20,
+		// sort: sort.dir,
+		// sort_by: sort.by,
+	})
+
+	rollups.value = isMainnet()
+		? data
+			.map(r => ({
+				...r,
+				stats: rollupsRanking.value[r.slug],
+				rounded_rank: roundTo(rollupsRanking.value[r.slug]?.ranking?.rank / 10, 0),
+				rank_category: getRankCategory(roundTo(rollupsRanking.value[r.slug]?.ranking?.rank / 10, 0))
+			}))
+		: data
+	
+	pages.value = roundTo(rollups.value?.length / itemsPerPage, 0, "ceil")
+	if (page.value > pages.value) {
+		page.value = pages.value
+		router.replace({ query: { page: page.value } })
+	}
+}
+const processRollups = () => {
+	isRefetching.value = true
+
+	const selected = Object.keys(filters).reduce((acc, key) => {
+        acc[key] = Object.keys(filters[key]).filter(k => filters[key][k])
+        return acc
+    }, {})
+
+    filteredRollups.value = rollups.value.filter(r => {
+        return Object.keys(selected).every(key => {
+            if (selected[key].length === 0) return true
+            
+            if (Array.isArray(r[key])) {
+                return r[key].some(item => selected[key].includes(item))
+            } else {
+                return selected[key].includes(r[keyMap[key]])
+            }
+        })
+    })
+
+	filteredRollups.value = sortArrayOfObjects(filteredRollups.value, sort.by, sort.dir === "asc")
+		.map((r, i) => ({ ...r, index: i + 1 }))
+
+	pages.value = roundTo(filteredRollups.value?.length / itemsPerPage, 0, "ceil")
+	processedRollups.value = filteredRollups.value.slice((page.value - 1) * itemsPerPage, Math.min((page.value) * itemsPerPage, rollups.value?.length))
+
+	isRefetching.value = false
+}
+if (rollupRankingStore.initialized) {
+	await getRollups()
+	processRollups()
+}
+
+const handleSort = (by) => {
+	if (!by) return
+	
+	switch (sort.dir) {
+		case "desc":
+			if (sort.by == by) sort.dir = "asc"
+			break
+
+		case "asc":
+			sort.dir = "desc"
+
+			break
+	}
+
+	sort.by = by
+	if (page.value !== 1) {
+		page.value = 1
+	} else {
+		processRollups()
+	}
+}
+
+const handlePrev = () => {
+	if (page.value === 1) return
+
+	page.value -= 1
+}
+
+const handleNext = () => {
+	page.value += 1
+}
+
+watch(
+	() => categories.value,
+	() => {
+		filters.categories = categories.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
+watch(
+	() => types.value,
+	() => {
+		filters.types = types.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
+watch(
+	() => tags.value,
+	() => {
+		filters.tags = tags.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
+	}
+)
+
+watch(
+	() => page.value,
+	() => {
+		processRollups()
+		router.replace({ query: { page: page.value } })
+	},
+)
+watch(
+	() => rollupRankingStore.initialized,
+	async () => {
+		if (rollupRankingStore.initialized) {
+			await getRollups()
+			processRollups()
+		}
+	},
+)
+watch(
+	() => config,
+	() => {
+		localStorage.setItem("page:rollups:config:columns", JSON.stringify(config.columns))
+	},
+	{
+		deep: true,
+	},
+)
+
+onBeforeMount(() => {
+	if (localStorage.getItem("page:rollups:config:columns")) {
+		config.columns = JSON.parse(localStorage.getItem("page:rollups:config:columns"))
+	}
+})
+</script>
+
+<template>
+	<Flex direction="column" wide :class="$style.wrapper">
+		<Flex align="start" justify="between" :class="$style.breadcrumbs">
+			<Breadcrumbs
+				:items="[
+					{ link: '/', name: 'Explore' },
+					{ link: '/rollups', name: 'Rollups Leaderboard' },
+				]"
+			/>
+
+			<Button link="https://forms.gle/nimJyQJG4Lb4BTcG7" target="_blank" type="secondary" size="mini">
+				<Icon name="rollup-plus" size="12" color="secondary" /> Register rollup
+			</Button>
+		</Flex>
+
+		<Flex wide direction="column" gap="4">
+			<Flex justify="between" :class="$style.header">
+				<Flex align="center" gap="8">
+					<Icon name="rollup" size="16" color="secondary" />
+					<Text size="14" weight="600" color="primary">Rollups Leaderboard</Text>
+				</Flex>
+
+				<!-- Pagination -->
+				<Flex align="center" gap="6">
+					<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
+						<Icon name="arrow-left-stop" size="12" color="primary" />
+					</Button>
+					<Button type="secondary" @click="handlePrev" size="mini" :disabled="page === 1">
+						<Icon name="arrow-left" size="12" color="primary" />
+					</Button>
+
+					<Button type="secondary" size="mini" disabled>
+						<Text size="12" weight="600" color="primary">Page {{ comma(page) }} </Text>
+					</Button>
+
+					<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages">
+						<Icon name="arrow-right" size="12" color="primary" />
+					</Button>
+				</Flex>
+			</Flex>
+
+			<Flex align="center" justify="between" wrap="wrap" gap="8" :class="$style.settings">
+				<Flex wrap="wrap" align="center" gap="8">
+					<Popover
+						v-for="p in Object.keys(popovers)"
+						:open="popovers[p]"
+						@on-close="onPopoverClose(p)"
+						width="200"
+					>
+						<Button @click="handleOpenPopover(p)" type="secondary" size="mini">
+							<Icon name="plus-circle" size="12" color="tertiary" />
+							<Text color="secondary"> {{ capitilize(keyMap[p]) }} </Text>
+
+							<template v-if="Object.keys(filters[p]).find((item) => filters[p][item])">
+								<div :class="$style.vertical_divider" />
+
+								<Text size="12" weight="600" color="primary">
+									{{ Object.keys(filters[p]).filter((item) => filters[p][item]).length < 3
+										? Object.keys(filters[p])
+											.filter((item) => filters[p][item])
+											.map(item => getDisplayName(item))
+											.join(", ")
+										: `${Object.keys(filters[p])
+											.filter((item) => filters[p][item])
+											.slice(0, 2)
+											.map(item => getDisplayName(item))
+											.join(", ")} and ${Object.keys(filters[p]).filter((item) => filters[p][item]).length - 2} more`
+									}}
+								</Text>
+
+								<Icon @click.stop="resetFilters(p)" name="close-circle" size="12" color="secondary" />
+							</template>
+						</Button>
+
+						<template #content>
+							<Flex direction="column" gap="12">
+								<Text size="12" weight="500" color="secondary"> {{ `Filter by ${capitilize(keyMap[p])}` }} </Text>
+
+								<Flex direction="column" gap="8" :class="$style.filters_list">
+									<Checkbox
+										v-for="item in Object.keys(filters[p])"
+										v-model="filters[p][item]"
+									>
+										<Text size="12" weight="500" color="primary">
+											{{ getDisplayName(item) }}
+										</Text>
+									</Checkbox>
+								</Flex>
+
+								<Button @click="handleApplyFilters(p)" type="secondary" size="mini" wide>Apply</Button>
+							</Flex>
+						</template>
+					</Popover>
+				</Flex>
+
+				<Popover :open="isConfigurePopoverOpen" @on-close="isConfigurePopoverOpen = false" width="150" side="right">
+					<Button @click="isConfigurePopoverOpen = true" type="secondary" size="mini">
+						<Icon name="settings" size="12" color="tertiary" />
+						Configure
+					</Button>
+
+					<template #content>
+						<Flex direction="column" gap="12">
+							<Text size="12" weight="500" color="secondary">Fixed columns</Text>
+
+							<Flex direction="column" gap="8">
+								<Checkbox :checked="true" :disabled="true">
+									<Text size="12" weight="500" color="primary">Rollup</Text>
+								</Checkbox>
+							</Flex>
+
+							<div :class="$style.horizontal_divider" />
+
+							<Text size="12" weight="500" color="secondary">Editable columns</Text>
+
+							<Flex direction="column" gap="8">
+								<Checkbox v-for="key in Object.keys(config.columns)" v-model="config.columns[key].show">
+									<Text size="12" weight="500" color="primary"> {{ getColumnName(key) }} </Text>
+								</Checkbox>
+							</Flex>
+						</Flex>
+					</template>
+				</Popover>
+			</Flex>
+
+			<Flex direction="column" gap="16" wide :class="[$style.table, isRefetching && $style.disabled]">
+				<div v-if="processedRollups?.length" :class="$style.table_scroller">
+					<table>
+						<thead>
+							<tr>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>#</Text></th>
+								<th><Text size="12" weight="600" color="tertiary" noWrap>Rollup</Text></th>
+								<th
+									v-for="column in Object.keys(config.columns).filter((c) => config.columns[c].show)"
+									@click="handleSort(config.columns[column].sortPath)"
+									:class="config.columns[column].sortPath && $style.sortable"
+								>
+									<Flex v-if="config.columns[column].sortPath" align="center" gap="6">
+										<Icon v-if="column === 'activity'" name="laurel" size="12" color="tertiary" />
+										<Text size="12" weight="600" color="tertiary" noWrap>
+											{{ getColumnName(column) }}
+										</Text>
+										<Icon
+											v-if="sort.by === config.columns[column].sortPath"
+											name="chevron"
+											size="12"
+											color="secondary"
+											:style="{ transform: `rotate(${sort.dir === 'asc' ? '180' : '0'}deg)` }"
+										/>
+									</Flex>
+									<Text v-else size="12" weight="600" color="tertiary" noWrap>
+										{{ getColumnName(column) }}
+									</Text>
+								</th>
+							</tr>
+						</thead>
+
+						<tbody>
+							<tr v-for="r in processedRollups">
+								<td>
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ r.index }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td style="width: 1px">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="center" gap="8">
+											<Flex v-if="r?.logo" align="center" :class="$style.avatar_wrapper">
+												<div :class="$style.avatar_container">
+													<img :src="r?.logo" :class="$style.avatar_image" />
+												</div>
+											</Flex>
+											
+											<Flex direction="column" gap="4">
+												<Text size="12" weight="600" color="primary" mono>
+													{{ r?.name }}
+												</Text>
+												<Text size="12" weight="600" color="tertiary">
+													{{ getDisplayName(r?.category) }}
+												</Text>
+											</Flex>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.activity?.show">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex justify="center" direction="column" gap="4">
+											<Text size="12" weight="600" :color="r?.rank_category?.color" mono>
+												{{ r?.rank_category?.name }}
+											</Text>
+											<Flex align="center" gap="4">
+												<Text size="12" weight="600" color="secondary">
+													{{ `${r?.rounded_rank}/10` }}
+												</Text>
+												<Text size="12" weight="600" color="tertiary">
+													{{ `${r?.stats?.ranking?.rank}%` }}
+												</Text>
+											</Flex>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.da_change.show">
+									<NuxtLink :to="`/rollup/${r.slug}`">
+										<Flex align="center">
+											<DiffChip
+												:value="r.da_pct.toFixed(2)"
+												tooltip="Difference between current and previous week"
+											/>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.size.show">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="start" justify="center" direction="column" gap="4">
+											<Tooltip position="start" delay="400">
+												<Flex direction="column" gap="4">
+													<Text size="13" weight="600" color="primary">{{ formatBytes(r?.size) }}</Text>
+
+													<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r?.size_pct * 100, 2) }}%</Text>
+												</Flex>
+
+												<template #content>
+													<Flex align="end" gap="8">
+														<Text size="12" weight="600" color="tertiary">Share of total size</Text>
+
+														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r?.size_pct * 100, 2) }}%</Text>
+													</Flex>
+												</template>
+											</Tooltip>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.blobs.show">
+									<NuxtLink :to="`/rollup/${r.slug}`">
+										<Flex align="start" justify="center" direction="column" gap="4">
+											<Tooltip position="start" delay="400">
+												<Flex direction="column" gap="4">
+													<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
+
+													<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
+												</Flex>
+
+												<template #content>
+													<Flex align="end" gap="8">
+														<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
+
+														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
+													</Flex>
+												</template>
+											</Tooltip>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.blobs_fee_paid.show">
+									<NuxtLink :to="`/rollup/${r.slug}`">
+										<Flex align="start" justify="center" direction="column" gap="4">
+											<AmountInCurrency :amount="{ value: r.fee }" />
+
+											<Tooltip position="start" delay="400">
+												<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
+
+												<template #content>
+													<Flex align="end" gap="8">
+														<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
+
+														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
+													</Flex>
+												</template>
+											</Tooltip>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.paid_per_mb.show">
+									<NuxtLink :to="`/rollup/${r.slug}`">
+										<Flex align="center">
+											<AmountInCurrency :amount="{ value: utiaPerMB(r) }" />
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.today_blobs.show">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ comma(r?.stats?.day_blobs_count) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.commits?.show">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="start" justify="center" direction="column" gap="4">
+											<Tooltip position="start" delay="400" :disabled="true">
+												<Flex direction="column" gap="4">
+													<Text size="13" weight="600" color="primary">{{ comma(r?.stats?.commits_weekly) }}</Text>
+												</Flex>
+
+												<template #content>
+													<Flex align="end" gap="8">
+														<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
+
+														<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
+													</Flex>
+												</template>
+											</Tooltip>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.avg_pfb_size.show">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="center">
+											<Text size="13" weight="600" color="primary">{{ formatBytes(r?.stats?.avg_pfb_size) }}</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+								<td v-if="config.columns.latest_activity.show">
+									<NuxtLink :to="`/rollup/${r?.slug}`">
+										<Flex align="center" gap="4">
+											<Icon name="clock-forward-2" size="13" :color="getLastActivityCategory(DateTime.fromISO(r?.last_message_time))" />
+											<Text size="13" weight="600" color="primary">
+												{{ DateTime.fromISO(r?.last_message_time).toRelative({ locale: "en", style: "short" }) }}
+											</Text>
+										</Flex>
+									</NuxtLink>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<Flex v-else-if="isRefetching" align="center" justify="center" gap="8" wide :class="$style.empty">
+					<Spinner size="14" />
+					<Text size="13" weight="500" color="secondary"> Loading rollups.. </Text>
+				</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 rollups found </Text>
+					<Text size="12" weight="500" height="160" color="tertiary" align="center">
+						This network does not contain any rollups
+					</Text>
+				</Flex>
+			</Flex>
+		</Flex>
+	</Flex>
+</template>
+
+<style module>
+.wrapper {
+	padding: 20px 24px 60px 24px;
+}
+
+.breadcrumbs {
+	margin-bottom: 16px;
+}
+
+.header {
+	height: 46px;
+
+	border-radius: 8px 8px 4px 4px;
+	background: var(--card-background);
+
+	padding: 0 16px;
+}
+
+.footer {
+	height: 46px;
+
+	border-radius: 4px 4px 8px 8px;
+	background: var(--card-background);
+
+	padding: 0 16px;
+}
+
+.settings {
+	border-radius: 4px;
+	background: var(--card-background);
+
+	padding: 8px 16px;
+}
+
+.vertical_divider {
+	min-width: 2px;
+	height: 12px;
+	background: var(--op-10);
+}
+
+.filters_list {
+	height: auto;
+}
+
+.table_scroller {
+	overflow-x: auto;
+}
+
+.table {
+	border-radius: 4px 4px 4px 4px;
+	background: var(--card-background);
+
+	transition: all 0.2s ease;
+
+	& table {
+		width: 100%;
+		height: fit-content;
+
+		border-spacing: 0px;
+
+		padding-bottom: 12px;
+
+		& tbody {
+			& tr {
+				cursor: pointer;
+
+				transition: all 0.05s ease;
+
+				&:hover {
+					background: var(--op-5);
+				}
+
+				&:active {
+					background: var(--op-8);
+				}
+			}
+		}
+
+		& tr th {
+			text-align: left;
+
+			padding: 0;
+			padding-right: 16px;
+			padding-top: 16px;
+			padding-bottom: 8px;
+
+			& span {
+				display: flex;
+			}
+
+			&:first-child {
+				padding-left: 16px;
+				width: 16px;
+			}
+
+			&.sortable {
+				cursor: pointer;
+			}
+
+			&.sortable:hover {
+				& span {
+					color: var(--txt-secondary);
+				}
+			}
+		}
+
+		& tr td {
+			padding: 0;
+
+			white-space: nowrap;
+
+			&:first-child {
+				padding-left: 16px;
+			}
+
+			& > a {
+				display: flex;
+
+				min-height: 44px;
+
+				padding-right: 24px;
+			}
+		}
+	}
+}
+
+.avatar_wrapper {
+  position: relative;
+  width: 25px;
+  height: 25px;
+}
+
+.avatar_container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	border-radius: 50%;
+}
+
+.avatar_image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.status_dot_wrapper {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	z-index: 1;
+}
+
+.status_dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background: var(--brand);
+	border: 1px solid var(--card-background);
+}
+
+.table.disabled {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+.message_type {
+	max-width: 100px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.badge {
+	border-radius: 5px;
+	background: var(--op-5);
+	box-shadow: inset 0 0 0 1px var(--op-10);
+
+	padding: 4px 6px;
+}
+
+.horizontal_divider {
+	width: 100%;
+	height: 1px;
+	background: var(--op-5);
+}
+
+.empty {
+	padding: 16px 0;
+}
+
+@media (max-width: 500px) {
+	.wrapper {
+		padding: 32px 12px;
+	}
+
+	.header {
+		gap: 16px;
+
+		height: initial;
+
+		padding: 16px;
+	}
+}
+</style>
diff --git a/pages/stats/[metric].vue b/pages/stats/[metric].vue
index 16110e52..133e078a 100644
--- a/pages/stats/[metric].vue
+++ b/pages/stats/[metric].vue
@@ -5,6 +5,7 @@ import { DateTime } from "luxon"
 /** Stats Components/Constants */
 import { getSeriesByPage, STATS_PERIODS, STATS_TIMEFRAMES } from "@/services/constants/stats.js"
 import BarChart from "@/components/modules/stats/BarChart.vue"
+import BarplotStakedChart from "@/components/modules/stats/BarplotStakedChart.vue"
 import LineChart from "@/components/modules/stats/LineChart.vue"
 import SquareSizeChart from "@/components/modules/stats/SquareSizeChart.vue"
 import TimelineSlider from "@/components/modules/stats/TimelineSlider.vue"
@@ -12,10 +13,10 @@ import TimelineSlider from "@/components/modules/stats/TimelineSlider.vue"
 /** Services */
 import { getStartChainDate } from "@/services/config"
 import { exportSVGToPNG, exportToCSV } from "@/services/utils/export"
-import { capitalizeAndReplaceUnderscore } from "@/services/utils"
+import { capitilize, capitalizeAndReplace } from "@/services/utils"
 
 /** API */
-import { fetchSeries, fetchSeriesCumulative, fetchTVS } from "@/services/api/stats"
+import { fetchSeries, fetchRollupsSeries, fetchSeriesCumulative, fetchTVS } from "@/services/api/stats"
 
 /** UI */
 import Button from "@/components/ui/Button.vue"
@@ -37,16 +38,23 @@ const route = useRoute()
 const router = useRouter()
 
 const series = ref(getSeriesByPage(route.params.metric, route.query.aggregate))
-
-if (!series.value.page) {
+const metricName = ref('')
+if (!series.value?.page) {
 	router.push("/stats")
+} else {
+	switch (series.value?.page) {
+		case "tvs":
+			metricName.value = series.value?.title
+			break;
+		case "rollups":
+			metricName.value = "Rollup Distribution"
+			break;
+		default:
+			metricName.value = capitalizeAndReplace(series.value?.page, "_")
+			break;
+	}
 }
 
-const metricName = computed(() => {
-	if (series.value?.page === "tvs") return series.value.title
-	return capitalizeAndReplaceUnderscore(series.value?.page)
-})
-
 defineOgImage({
 	title: "Statistics",
 	series: series.value,
@@ -104,8 +112,8 @@ const selectedTimeframe = ref(STATS_TIMEFRAMES.find((tf) => tf.timeframe === "da
 const timeframes = computed(() => {
 	let res = [...STATS_TIMEFRAMES]
 
-	if (series.value.name === "tvs") {
-		res = res.filter((tf) => tf.timeframe === "day" || tf.timeframe === "month")
+	if (series.value?.name === "tvs") {
+		res = res.filter(tf => tf.timeframe === "day" || tf.timeframe === "month")
 	}
 
 	return res
@@ -123,6 +131,54 @@ const timeframesStyles = computed(() => {
 		background: `linear-gradient(to right, transparent ${start}%, var(--op-5) ${start}%, var(--op-5) ${end}%, transparent ${end}%)`,
 	}
 })
+const rollupsSetting = ref([
+	{
+		name: "grouped_by",
+		title: "Group by",
+		items: ["blobs_count", "fee", "size"],
+		selected: "blobs_count",
+	},
+	{
+		name: "top",
+		title: "Top",
+		items: ["5", "10", "20", "all"],
+		selected: "10",
+	},
+	{
+		name: "period",
+		title: "Last",
+		items: ["day", "month", "year"],
+		selected: "month",
+	},
+])
+const handleRollupSettingsSelect = async (setting, value) => {
+	setting.selected = value
+	switch (setting.name) {
+		case "grouped_by":
+			series.value.metric = value
+			switch (value) {
+				case "fee":
+					series.value.units = "utia"
+					break;
+				case "size":
+					series.value.units = "bytes"
+					break;
+				default:
+					series.value.units = ""
+					break;
+			}
+			break;
+		case "top":
+			series.value.itemsCount = value
+			break;
+		case "period":
+			series.value.timeframe = value
+			await getData()
+			break;
+		default:
+			break;
+	}
+}
 
 const currentData = ref([])
 
@@ -140,6 +196,27 @@ const updateUserSettings = () => {
 }
 
 const filters = reactive({})
+const setDefaultFilters = () => {
+	filters.timeframe = selectedPeriod.value.timeframe
+	filters.periodValue = selectedPeriod.value.value
+	filters.from = parseInt(DateTime.now().startOf('day').minus({
+		days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - 1 : 0,
+		hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+	}).ts  / 1_000)
+	filters.to = parseInt(DateTime.now().endOf('day').ts  / 1_000)
+
+	if (series.value.page === "rollups") {
+		if (route.query.aggregate && rollupsSetting.value[0].items.includes(route.query.aggregate)) {
+			series.value.metric = route.query.aggregate
+			rollupsSetting.value[0].selected = route.query.aggregate
+		} else {
+			series.value.metric = rollupsSetting.value[0].selected
+		}
+		series.value.itemsCount = rollupsSetting.value[1].selected
+		series.value.timeframe = rollupsSetting.value[2].selected
+	}
+}
+setDefaultFilters()
 
 const handleChangeChartView = () => {
 	if (chartView.value === "line") {
@@ -163,6 +240,14 @@ const fetchData = async () => {
 		).map((v) => {
 			return { time: v.time, value: v.close }
 		})
+	} else if (series.value.page === "rollups") {
+		data = (await fetchRollupsSeries({
+			timeframe: series.value.timeframe === "day"
+				? "hour"
+				: series.value.timeframe === "month"
+					? "day"
+					: "month",
+		}))
 	} else if (series.value.aggregate !== "cumulative") {
 		let to = filters?.to ? DateTime.fromSeconds(+filters?.to) : DateTime.now()
 		data = await fetchSeries({
@@ -196,38 +281,49 @@ const getData = async (fetch = true) => {
 
 	let data = []
 
-	const isSameRequest = currentChartName.value === series.value.name && loadedAllData.value && allData.value.length > 0
-
 	if (fetch) {
 		await fetchData()
 	}
 	
-	data = allData.value
+	if (series.value.page !== "rollups"){
+		data = allData.value
 
-	if (data.length > 0 && !filters.from && !filters.to) {
-		const firstDate = new Date(data[data.length - 1].time)
-		const lastDate = new Date(data[0].time)
+		if (data.length > 0 && !filters.from && !filters.to) {
+			const firstDate = new Date(data[data.length - 1].time)
+			const lastDate = new Date(data[0].time)
 
-		filters.from = Math.floor(firstDate.getTime() / 1000)
-		filters.to = Math.floor(lastDate.getTime() / 1000)
-	}
+			filters.from = Math.floor(firstDate.getTime() / 1000)
+			filters.to = Math.floor(lastDate.getTime() / 1000)
+		}
 
-	currentData.value = data
-		.filter((d) => {
-			const time = new Date(d.time).getTime() / 1_000
-			return time >= filters.from && time <= filters.to
-		})
-		.map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
-		.reverse()
+		currentData.value = data
+			.filter((d) => {
+				const time = new Date(d.time).getTime() / 1_000
+				return time >= filters.from && time <= filters.to
+			})
+			.map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
+			.reverse()
 
-	series.value.currentData = [...currentData.value]
+		series.value.currentData = [...currentData.value]
+
+		filters.timeframe = selectedTimeframe.value
+		series.value.timeframe = filters.timeframe
+	} else {
+		data = allData.value
+		
+		series.value.data = data.map(d => ({
+			...d, 
+			items: d.items.map(item => ({
+				...item, 
+				fee: parseFloat(item.fee)
+			}))
+		}))
+	}
 
-	filters.timeframe = selectedTimeframe.value
-	series.value.timeframe = filters.timeframe
 	isLoading.value = false
 }
 
-if (series.value.name !== "square_size") {
+if (series.value.name !== 'square_size') {
 	await getData()
 }
 
@@ -291,10 +387,24 @@ const handleTimeframeUpdate = (tf) => {
 }
 
 const handleCSVDownload = async () => {
-	let data = [...series.value.currentData]
-
-	let csvHeaders = "timestamp,value\n"
-	let csvRow = data.map((el) => `${DateTime.fromJSDate(el.date).ts},${el.value}`).join("\n")
+	let data = []
+	let csvHeaders = ""
+	let csvRow = ""
+	if (series.value.page === "rollups") {
+		data = [...series.value.data]
+		csvHeaders = "timestamp,rollup,value\n"
+		let csvData = []
+		data.forEach(d => {
+			d.items.forEach(item => {
+				csvData.push(`${DateTime.fromISO(d.time).ts},${item.name},${item[rollupsSetting.value[0].selected]}`)
+			})
+		})
+		csvRow = csvData.join("\n")
+	} else {
+		data = loadPrevData.value ? [...series.value.currentData, ...series.value.prevData] : [...series.value.currentData]
+		csvHeaders = "timestamp,value\n"
+		csvRow = data.map(d => `${DateTime.fromJSDate(d.date).ts},${d.value}`).join("\n")
+	}
 
 	await exportToCSV(csvHeaders + csvRow, `${series.value.name}-${filters.from}-${filters.to}`)
 
@@ -325,7 +435,7 @@ const handlePNGDownload = async () => {
 
 const handleOpenChartModal = () => {
 	cacheStore.chart.series = series.value
-	cacheStore.chart.view = chartView.value
+	cacheStore.chart.view = series.value.page === "rollups" ? "barplot-stacked" : chartView.value
 
 	modalsStore.open("chart")
 }
@@ -349,6 +459,28 @@ watch(
 	},
 )
 
+watch(
+	() => rollupsSetting.value[0].selected,
+	() => {
+		router.replace({
+			query: {
+				aggregate: rollupsSetting.value[0].selected,
+			},
+		})
+	}
+)
+
+watch(
+	() => rollupsSetting.value[0].selected,
+	() => {
+		router.replace({
+			query: {
+				aggregate: rollupsSetting.value[0].selected,
+			},
+		})
+	}
+)
+
 onBeforeMount(() => {
 	const settings = JSON.parse(localStorage.getItem("settings"))
 	chartView.value = settings?.chart?.view || "line"
@@ -360,7 +492,7 @@ onBeforeMount(() => {
 		<Flex direction="column" gap="16">
 			<Flex align="end" justify="between" :class="$style.breadcrumbs">
 				<Breadcrumbs
-					v-if="series"
+					v-if="series?.page"
 					:items="[
 						{ link: '/', name: 'Explore' },
 						{ link: '/stats', name: 'Statistics' },
@@ -369,73 +501,110 @@ onBeforeMount(() => {
 				/>
 			</Flex>
 
-			<Flex align="center" justify="between" wide :class="$style.header">
+			<Flex v-if="series?.name" align="center" justify="between" wide :class="$style.header">
 				<Text size="16" weight="600" color="primary" justify="start"> {{ `${metricName} Chart` }} </Text>
 
-				<Flex align="center" gap="8" :class="series.name === 'square_size' && $style.disabled">
-					<DatePicker
-						@on-update="handleDatePickerUpdate"
-						:period="selectedPeriod"
-						:from="filters.from"
-						:to="filters.to"
-						:minDate="getStartChainDate()"
-						:showTitle="false"
-					/>
-
-					<Popover :open="isOpen" @on-close="handleClose" width="200" side="right">
-						<Button @click="handleOpen" type="secondary" size="mini">
-							<Icon name="settings" size="12" color="tertiary" />
-						</Button>
+				<Flex v-if="series?.name !== 'square_size'" align="center" gap="8" :class="$style.settings">
+					<Flex v-if="series?.page !== 'rollups'" align="center" gap="8">
+						<DatePicker
+							@on-update="handleDatePickerUpdate"
+							:period="selectedPeriod"
+							:from="filters?.from"
+							:to="filters?.to"
+							:minDate="getStartChainDate()"
+							:showTitle="false"
+						/>
+
+						<Popover :open="isOpen" @on-close="handleClose" width="200" side="right">
+							<Button @click="handleOpen" type="secondary" size="mini">
+								<Icon name="settings" size="12" color="tertiary" />
+							</Button>
+
+							<template #content>
+								<Flex direction="column" gap="12">
+									<Flex align="center" justify="between" gap="6" :class="$style.setting_item">
+										<Text size="12" color="secondary">Chart view</Text>
+
+										<Flex
+											@click="handleChangeChartView"
+											align="center"
+											gap="12"
+											:class="$style.chart_selector"
+											:style="{
+												background: `linear-gradient(to ${chartView === 'line' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+											}"
+										>
+											<Icon
+												name="line-chart"
+												size="14"
+												:style="{ fill: `${chartView === 'line' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
+											/>
+
+											<Icon
+												name="bar-chart"
+												size="14"
+												:style="{ fill: `${chartView === 'bar' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
+											/>
+										</Flex>
+									</Flex>
 
-						<template #content>
-							<Flex direction="column" gap="12">
-								<Flex align="center" justify="between" gap="6" :class="$style.setting_item">
-									<Text size="12" color="secondary">Chart view</Text>
-
-									<Flex
-										@click="handleChangeChartView"
-										align="center"
-										gap="12"
-										:class="$style.chart_selector"
-										:style="{
-											background: `linear-gradient(to ${
-												chartView === 'line' ? 'right' : 'left'
-											}, var(--op-5) 50%, transparent 50%)`,
-										}"
-									>
-										<Icon
-											name="line-chart"
-											size="14"
-											:style="{ fill: `${chartView === 'line' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
-										/>
-
-										<Icon
-											name="bar-chart"
-											size="14"
-											:style="{ fill: `${chartView === 'bar' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
-										/>
+									<Flex align="center" justify="between" gap="6" :class="$style.setting_item">
+										<Text size="12" :color="loadPrevData ? 'secondary' : 'tertiary'">Previous period</Text>
+										<Toggle v-model="loadPrevData" color="var(--neutral-mint)" />
+									</Flex>
+
+									<Flex align="center" justify="between" gap="6" :class="$style.setting_item">
+										<Text size="12" :color="loadLastValue ? 'secondary' : 'tertiary'">Show last value</Text>
+										<Toggle v-model="loadLastValue" color="var(--neutral-mint)" />
 									</Flex>
-								</Flex>
 
-								<Flex align="center" justify="between" gap="6" :class="$style.setting_item">
-									<Text size="12" color="secondary">Group by</Text>
-
-									<Flex align="center" gap="12" :class="$style.groupping_selector" :style="timeframesStyles">
-										<Text
-											v-for="tf in timeframes"
-											@click="handleTimeframeUpdate(tf)"
-											size="10"
-											weight="600"
-											:color="selectedTimeframe.timeframe === tf.timeframe ? 'brand' : 'secondary'"
-											:class="$style.item"
+									<Flex align="center" justify="between" gap="6" :class="$style.setting_item">
+										<Text size="12" color="secondary">Group by</Text>
+
+										<Flex
+											align="center"
+											gap="12"
+											:class="$style.groupping_selector"
+											:style="timeframesStyles"
 										>
-											{{ tf.shortTitle }}
-										</Text>
+											<Text
+												v-for="tf in timeframes"
+												@click="handleTimeframeUpdate(tf)"
+												size="10"
+												weight="600"
+												:color="selectedTimeframe?.timeframe === tf?.timeframe ? 'brand' : 'secondary'"
+												:class="$style.item"
+											>
+												{{ tf?.shortTitle }}
+											</Text>
+										</Flex>
 									</Flex>
 								</Flex>
-							</Flex>
-						</template>
-					</Popover>
+							</template>
+						</Popover>
+					</Flex>
+					<Flex v-else align="center" gap="8">
+						<Dropdown v-for="rs in rollupsSetting">
+							<Button type="secondary" size="mini">
+								<Flex align="center" justify="between" gap="6">
+									<Text size="12" color="secondary"> {{ rs.title }} </Text>
+									<Text size="12" color="primary"> {{ capitilize(rs.selected.replace('_', ' ')) }} </Text>
+								</Flex>
+							</Button>
+
+							<template #popup>
+								<DropdownItem v-for="item in rs.items" @click="handleRollupSettingsSelect(rs, item)" :style="{minWidth: '50px'}">
+									<Flex align="center" justify="between" gap="12" wide>
+										<Icon :name="item === rs.selected ? 'check' : ''" size="12" color="brand" />
+										<Flex align="center" justify="start" wide>
+											{{ capitilize(item.replace('_', ' ')) }}
+										</Flex>
+									</Flex>
+								</DropdownItem>
+							</template>
+						</Dropdown>
+					</Flex>
+
 
 					<Button @click="handleOpenChartModal" type="secondary" size="mini">
 						<Icon name="expand" size="12" color="tertiary" />
@@ -459,12 +628,15 @@ onBeforeMount(() => {
 			</Flex>
 		</Flex>
 
-		<SquareSizeChart v-if="series.name === 'square_size'" />
-		<LineChart v-else-if="chartView === 'line'" :series="series" />
-		<BarChart v-else-if="chartView === 'bar'" :series="series" />
+		<template v-if="series?.page">
+			<BarplotStakedChart v-if="series?.page === 'rollups'" :series="series" />
+			<SquareSizeChart v-else-if="series?.name === 'square_size'" />
+			<LineChart v-else-if="chartView === 'line'" :series="series" />
+			<BarChart v-else-if="chartView === 'bar'" :series="series" />
+		</template>
 
 		<TimelineSlider
-			v-if="series.name !== 'square_size'"
+			v-if="series?.name !== 'square_size' && series?.page !== 'rollups'"
 			:allData="allData"
 			:chartView="chartView"
 			:from="filters.from"
@@ -512,6 +684,19 @@ onBeforeMount(() => {
 	cursor: default;
 }
 
+@media (max-width: 650px) {
+	.header {
+		flex-direction: column;
+		align-items: start;
+		gap: 12px;
+		
+		& .settings {
+			width: 100%;
+			justify-content: end;
+		}
+	}
+}
+
 @media (max-width: 500px) {
 	.wrapper {
 		padding: 32px 12px;
diff --git a/pages/stats/index.vue b/pages/stats/index.vue
index d8bae933..0473c9fd 100644
--- a/pages/stats/index.vue
+++ b/pages/stats/index.vue
@@ -78,6 +78,7 @@ const tabs = ref([
 	{
 		name: "ecosystem",
 		visible: false,
+		// 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)
diff --git a/public/img/badges/provider/bvm.network.png b/public/img/badges/provider/bvm.network.png
new file mode 100644
index 00000000..b7b60436
Binary files /dev/null and b/public/img/badges/provider/bvm.network.png differ
diff --git a/public/img/badges/provider/caldera.png b/public/img/badges/provider/caldera.png
new file mode 100644
index 00000000..d32f70fe
Binary files /dev/null and b/public/img/badges/provider/caldera.png differ
diff --git a/public/img/badges/provider/conduit.png b/public/img/badges/provider/conduit.png
new file mode 100644
index 00000000..b27cfb3e
Binary files /dev/null and b/public/img/badges/provider/conduit.png differ
diff --git a/public/img/badges/provider/dymension.png b/public/img/badges/provider/dymension.png
new file mode 100644
index 00000000..6ba0f71d
Binary files /dev/null and b/public/img/badges/provider/dymension.png differ
diff --git a/public/img/badges/provider/gelato.png b/public/img/badges/provider/gelato.png
new file mode 100644
index 00000000..8fac4f58
Binary files /dev/null and b/public/img/badges/provider/gelato.png differ
diff --git a/public/img/badges/provider/initia.png b/public/img/badges/provider/initia.png
new file mode 100644
index 00000000..c201d549
Binary files /dev/null and b/public/img/badges/provider/initia.png differ
diff --git a/public/img/badges/provider/movement.png b/public/img/badges/provider/movement.png
new file mode 100644
index 00000000..f25ac654
Binary files /dev/null and b/public/img/badges/provider/movement.png differ
diff --git a/public/img/badges/settled/arbitrum.png b/public/img/badges/settled/arbitrum.png
new file mode 100644
index 00000000..a39e527a
Binary files /dev/null and b/public/img/badges/settled/arbitrum.png differ
diff --git a/public/img/badges/settled/base.png b/public/img/badges/settled/base.png
new file mode 100644
index 00000000..eaefe988
Binary files /dev/null and b/public/img/badges/settled/base.png differ
diff --git a/public/img/badges/settled/ethereum.png b/public/img/badges/settled/ethereum.png
new file mode 100644
index 00000000..3edcf3c0
Binary files /dev/null and b/public/img/badges/settled/ethereum.png differ
diff --git a/services/api/rollup.js b/services/api/rollup.js
index 0eafa1b9..9e47c2d1 100644
--- a/services/api/rollup.js
+++ b/services/api/rollup.js
@@ -1,11 +1,13 @@
 /** Services */
-import { tvlServiceURL, useServerURL } from "@/services/config"
+import { githubServiceURL, tvlServiceURL, useServerURL } from "@/services/config"
 
-export const fetchRollups = async ({ categories, limit, offset, sort, sort_by }) => {
+export const fetchRollups = async ({ categories, type, tags, limit, offset, sort, sort_by }) => {
 	try {
 		const url = new URL(`${useServerURL()}/rollup`)
 
 		if (categories) url.searchParams.append("category", categories)
+		if (type) url.searchParams.append("type", type)
+		if (tags) url.searchParams.append("tags", tags)
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
 		if (sort) url.searchParams.append("sort", sort)
@@ -207,3 +209,72 @@ export const fetchRollupTVL = async ({ slug, period, from, to }) => {
 		console.error(error)
 	}
 }
+
+export const fetchRollupOrgs = async ({ limit, offset }) => {
+	try {
+		const url = new URL(`${githubServiceURL}/org`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+	
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchRollupOrgsState = async () => {
+	try {
+		const url = new URL(`${githubServiceURL}/state`)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+	}
+}
+
+export const fetchRollupOrgBySlug = async (slug) => {
+	try {
+		const url = new URL(`${githubServiceURL}/org/${slug}`)
+
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+		return []
+	}
+}
+
+export const fetchRollupOrgReposBySlug = async ({ slug, limit, offset, sort_by, sort }) => {
+	try {
+		const url = new URL(`${githubServiceURL}/org/${slug}/repos`)
+
+		if (limit) url.searchParams.append("limit", limit)
+		if (offset) url.searchParams.append("offset", offset)
+		if (sort_by) url.searchParams.append("sort_by", sort_by)
+		if (sort) url.searchParams.append("sort", sort)
+		
+		const data = await $fetch(url.href)
+		return data
+	} catch (error) {
+		console.error(error)
+		return []
+	}
+}
+
+export const fetchRollupOrgCommitsBySlug = async ({ slug, timeframe = 'week', from, to }) => {
+	try {
+		const url = new URL(`${githubServiceURL}/org/${slug}/commits/${timeframe}`)
+
+		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)
+		return []
+	}
+}
diff --git a/services/api/stats.js b/services/api/stats.js
index b3e57667..228238b4 100644
--- a/services/api/stats.js
+++ b/services/api/stats.js
@@ -149,6 +149,20 @@ export const fetchNamespaceSeries = async ({ id, name, timeframe, from }) => {
 	}
 }
 
+export const fetchRollupsSeries = async ({ timeframe, from, to }) => {
+	try {
+		const url = new URL(`${useServerURL()}/rollup/stats/series/${timeframe}`)
+
+		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)
+	}
+}
+
 export const fetchRollupSeries = async ({ id, name, timeframe, from, to }) => {
 	try {
 		const url = new URL(`${useServerURL()}/rollup/${id}/stats/${name}/${timeframe}`)
diff --git a/services/config.js b/services/config.js
index ce508c18..d67df3e3 100644
--- a/services/config.js
+++ b/services/config.js
@@ -111,7 +111,7 @@ export const getStartChainDate = () => {
 			return "2024-01-02T12:18:46.936662Z"
 
 		case "mammoth.celenium.io":
-			return "2025-03-20T12:00:00.936662Z"
+			return "2025-04-09T14:16:23.868211567Z"
 
 		case "dev.celenium.io":
 			return "2024-01-02T12:18:46.936662Z"
@@ -124,6 +124,7 @@ 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 tvlServiceURL = "https://tvl.celenium.io/v1"
+export const githubServiceURL = "https://github.celenium.io/v1"
 export const quoteServiceURL = "https://quote.celenium.io/v1"
 export const faucetURL = {
 	mocha: "https://api-faucet.celenium.io/v1",
diff --git a/services/constants/enums.js b/services/constants/enums.js
index 31430445..25c698a1 100644
--- a/services/constants/enums.js
+++ b/services/constants/enums.js
@@ -146,5 +146,18 @@ export const defaultEnums = {
 		"gaming",
 		"nft",
 		"social"
+	],
+	rollup_type: [
+		"sovereign",
+		"settled"
+	],
+	tags: [
+		"ZK",
+		"AI"
+	],
+	celestials_statuses: [
+		"NOT_VERIFIED",
+		"VERIFIED",
+		"PRIMARY"
 	]
 }
diff --git a/services/constants/rollups.js b/services/constants/rollups.js
new file mode 100644
index 00000000..3f5e2b62
--- /dev/null
+++ b/services/constants/rollups.js
@@ -0,0 +1,47 @@
+/** Vendor */
+import { DateTime } from "luxon"
+
+/** Services */
+import { roundTo } from "@/services/utils"
+
+export const rankCoefficients = {
+	day_blobs_count: 0.2,
+	avg_pfb_size: 0.3,
+	last_message_time: 0.3,
+	commits_weekly: 0.2,
+	last_pushed_at: 0.2,
+}
+
+export const rankCategories = [
+	{ min: 9, max: 10, name: "Legendary", color: "legendary" },
+	{ min: 6, max: 8, name: "Epic", color: "epic" },
+	{ min: 3, max: 5, name: "Good", color: "rare" },
+	{ min: 1, max: 2, name: "Poor", color: "primary" },
+	{ min: 0, max: 1, name: "Bad", color: "tertiary" },
+]
+
+export const getRankCategory = (rank) => {
+	const category = rankCategories.find(({ min, max }) => rank >= min && rank <= max) || { name: "Unknown", color: "tertiary" }
+
+	return { name: category.name, color: category.color }
+}
+
+export const getMetricCategory = (metric, score) => {
+	const metricValue = rankCoefficients[metric]
+	let rank = roundTo(score / metricValue * 10, 0)
+
+	return {...getRankCategory(rank), rank: score / metricValue}
+}
+
+export const lastActivityCategories = [
+	{ min: 0, max: 1, color: "brand" },
+	{ min: 2, max: 11, color: "light-orange" },
+	{ min: 12, max: 23, color: "red" },
+	{ min: 24, max: Infinity, color: "tertiary" },
+]
+
+export const getLastActivityCategory = (date) => {
+	const diff = roundTo(DateTime.now().diff(date, "hours").hours, 0, "floor")
+
+	return lastActivityCategories.find(({ min, max }) => diff >= min && diff <= max).color
+}
diff --git a/services/constants/stats.js b/services/constants/stats.js
index e21ae4d7..9d58b584 100644
--- a/services/constants/stats.js
+++ b/services/constants/stats.js
@@ -98,18 +98,24 @@ export const STATS_SERIES = [
 				subGroup: 'top',
 				name: 'size',
 				title: 'size',
+				page: 'rollups',
 				units: 'bytes',
+				aggregate: 'size',
 			},
 			{
 				subGroup: 'top',
 				name: 'blobs_count',
 				title: 'blobs count',
+				page: 'rollups',
+				aggregate: 'blobs_count',
 			},
 			{
 				subGroup: 'top',
 				name: 'fee',
 				title: 'fee paid',
+				page: 'rollups',
 				units: 'utia',
+				aggregate: 'fee',
 			},
 			{
 				subGroup: 'economy',
diff --git a/services/utils/amounts.js b/services/utils/amounts.js
index 4824fdec..a0186e9d 100644
--- a/services/utils/amounts.js
+++ b/services/utils/amounts.js
@@ -97,6 +97,11 @@ export const amountToString = (amount, decimal = 2) => {
 		: truncateDecimalPart(amount, decimal).toLocaleString("en-US", { maximumFractionDigits: decimal })
 }
 
+export const roundTo = (num, decimal = 2, method = "round") => {
+	const factor = Math.pow(10, decimal)
+	return Math[method](num * factor) / factor
+}
+
 export const abbreviate = (n, h = 1) => {
 	if (n < 1e3) return n
 	if (n >= 1e3 && n < 1e6) return +(n / 1e3).toFixed(h) + "K"
diff --git a/services/utils/general.js b/services/utils/general.js
index 4e86b29e..eb1b3b42 100644
--- a/services/utils/general.js
+++ b/services/utils/general.js
@@ -132,7 +132,8 @@ export const getNetworkName = () => {
 }
 
 export const isMainnet = () => {
-	return getNetworkName() === "Mainnet"
+	return true
+	// return getNetworkName() === "Mainnet"
 }
 
 export const isMac = () => {
@@ -166,16 +167,43 @@ export function base64ToHex(base64) {
 	return hex
 }
 
-export function sortArrayOfObjects(arr, param, asc = true) {
+// export function sortArrayOfObjects(arr, param, asc = true) {
+// 	if (!arr || !arr?.length) return []
+
+// 	return arr.sort((a, b) => {
+// 		if (a[param] > b[param]) {
+// 			return asc ? 1 : -1
+// 		} else if (a[param] < b[param]) {
+// 			return asc ? -1 : 1
+// 		}
+
+// 		return 0
+// 	})
+// }
+
+export function sortArrayOfObjects(arr, path, asc = true) {
 	if (!arr || !arr?.length) return []
 
 	return arr.sort((a, b) => {
-		if (a[param] > b[param]) {
-			return asc ? 1 : -1
-		} else if (a[param] < b[param]) {
-			return asc ? -1 : 1
+		const getValue = (obj, path) => path.split('.').reduce((o, key) => o?.[key], obj) ?? 0
+
+		let valueA = getValue(a, path)
+		let valueB = getValue(b, path)
+
+		const dateA = Date.parse(valueA)
+		const dateB = Date.parse(valueB)
+
+		const bothAreDates =
+			typeof valueA === "string" &&
+			typeof valueB === "string" &&
+			!isNaN(dateA) &&
+			!isNaN(dateB)
+
+		if (bothAreDates) {
+			valueA = dateA
+			valueB = dateB
 		}
 
-		return 0
+		return asc ? valueA - valueB : valueB - valueA
 	})
 }
diff --git a/services/utils/strings.js b/services/utils/strings.js
index 739db9be..14557a60 100644
--- a/services/utils/strings.js
+++ b/services/utils/strings.js
@@ -9,11 +9,9 @@ export const capitilize = (s) => {
 	return s.charAt(0).toUpperCase() + s.slice(1)
 }
 
-export function capitalizeAndReplaceUnderscore(s) {
-    if (!s) return ""
-
-    let words = s.split('_')
-    let capitalizedWords = words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+export function capitalizeAndReplace(s, symbol) {
+    let words = s.split(symbol);
+    let capitalizedWords = words.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
     
     return capitalizedWords.join(' ')
 }
diff --git a/store/cache.js b/store/cache.js
index fddff285..8fe5f974 100644
--- a/store/cache.js
+++ b/store/cache.js
@@ -7,6 +7,8 @@ import { defineStore, acceptHMRUpdate } from "pinia"
 export const useCacheStore = defineStore("cache", () => {
 	const selectedBlob = ref(null)
 	const selectedCommitment = ref(null)
+	const selectedRollupRank = ref(null)
+	const selectedRollup = ref (null)
 
 	const qr = reactive({
 		data: null,
@@ -61,7 +63,7 @@ export const useCacheStore = defineStore("cache", () => {
 		ts: null,
 	})
 
-	return { chart, current, qr, selectedBlob, selectedCommitment, tx }
+	return { chart, current, qr, selectedBlob, selectedCommitment, selectedRollupRank, selectedRollup, tx }
 })
 
 if (import.meta.hot) {
diff --git a/store/enums.js b/store/enums.js
index 54de4da0..3fb144e3 100644
--- a/store/enums.js
+++ b/store/enums.js
@@ -11,6 +11,8 @@ export const useEnumStore = defineStore("enums", () => {
 	const enums = ref({
 		messageTypes: defaultEnums.message_type,
 		rollupCategories: defaultEnums.categories,
+		rollupTypes: defaultEnums.rollup_type,
+		rollupTags: defaultEnums.tags,
 	})
 
 	const init = async () => {
@@ -19,6 +21,8 @@ export const useEnumStore = defineStore("enums", () => {
 		if (data) {
 			enums.value.messageTypes = data.message_type
 			enums.value.rollupCategories = data.categories
+			enums.value.rollupTypes = data.rollup_type
+			enums.value.rollupTags = data.tags?.filter(t => t)
 		}
 	}
 
diff --git a/store/legal.js b/store/legal.js
index 5e188f16..8f8282a2 100644
--- a/store/legal.js
+++ b/store/legal.js
@@ -30,7 +30,7 @@ export const useLegalStore = defineStore("legal", () => {
 		legal.value.accepted = true
 	}
 
-	return { acceptLegal, init, isAccepted, legal }
+	return { legal, acceptLegal, init, isAccepted }
 })
 
 if (import.meta.hot) {
diff --git a/store/modals.js b/store/modals.js
index 4322b315..c799802a 100644
--- a/store/modals.js
+++ b/store/modals.js
@@ -30,6 +30,7 @@ export const useModalsStore = defineStore("modals", () => {
 		lightNodeSettings: false,
 		connect: false,
 		chart: false,
+		rollupRank: false,
 	})
 
 	const open = (target) => {
diff --git a/store/rollupsrank.js b/store/rollupsrank.js
new file mode 100644
index 00000000..fd50fd2a
--- /dev/null
+++ b/store/rollupsrank.js
@@ -0,0 +1,142 @@
+/** Vendor */
+import { defineStore, acceptHMRUpdate } from "pinia"
+import { DateTime } from "luxon"
+
+/** Services */
+import { capitalizeAndReplace, isMainnet, roundTo, sortArrayOfObjects } from "@/services/utils"
+import { rankCoefficients } from "@/services/constants/rollups"
+
+/** API */
+import { fetchRollupOrgs, fetchRollupOrgsState, fetchRollupOrgReposBySlug, fetchRollups, fetchRollupsDailyStats } from "@/services/api/rollup"
+
+export const useRollupsRankingStore = defineStore("rollups_ranking", () => {
+	const rollups_ranking = ref({
+		ranking: {},
+		top_rollup: {},
+		last_update: 1743264808,
+	})
+	const rollupsRanking = ref({})
+	const initialized = ref(false)
+
+	const init = async () => {
+		if (!isMainnet()) {
+			initialized.value = true
+			return
+		}
+
+		const savedRanking = JSON.parse(localStorage.getItem("rollups_ranking"))
+		if (DateTime.now().diff(DateTime.fromMillis(savedRanking?.last_update || rollups_ranking.value.last_update), "hours").hours < 1) {
+			rollups_ranking.value = savedRanking
+			initialized.value = true
+			return
+		}
+		
+		const limit = 100
+		const params = { limit }
+		const [rollupsData, orgsData, dailyStatsData, orgsState] = await Promise.all([
+			fetchRollups(params),
+			fetchRollupOrgs(params),
+			fetchRollupsDailyStats(params),
+			fetchRollupOrgsState(params)
+		])
+		let maxDailyBlobsCount = 0
+		let maxAvgPfbSize = 0
+		let maxWeeklyCommits = 0
+		rollupsRanking.value = dailyStatsData.reduce((acc, ds) => {
+			let avg_pfb_size = ds.avg_size * ds.blobs_per_pfb
+			maxAvgPfbSize = Math.max(maxAvgPfbSize, avg_pfb_size)
+			maxDailyBlobsCount = Math.max(maxDailyBlobsCount, ds.blobs_count)
+			acc[ds.slug] = {
+				day_blobs_count: ds.blobs_count,
+				avg_pfb_size: avg_pfb_size,
+				pfb_hour_count: Math.round(ds.pfb_count / 24),
+			}
+			return acc
+		}, {})
+
+		for (const od of orgsData) {
+			let slug = od.rollup?.slug
+			if (!slug) continue
+
+			maxWeeklyCommits = Math.max(maxWeeklyCommits, od.commits_weekly)
+			if (!rollupsRanking.value[slug]) {
+				rollupsRanking.value[slug] = {}
+			}
+			rollupsRanking.value[slug].last_pushed_at = od.last_pushed_at
+			rollupsRanking.value[slug].commits_weekly = od.commits_weekly
+		}
+
+		rollupsData.forEach(r => {
+			let slug = r.slug
+			if (!rollupsRanking.value[slug]) {
+				rollupsRanking.value[slug] = {}
+			}
+			rollupsRanking.value[slug].last_message_time = r.last_message_time
+
+		})
+		
+		const quantitative = (value, maxValue) => {
+			return Math.min(value / maxValue, 1)
+		}
+		const timeBased = (maxTime, lastTime, t, timeframe) => {
+			const diff = maxTime.diff(lastTime, timeframe)[timeframe]
+			return Math.exp(-( diff / t ))
+		}
+		const calculateRanking = (r) => {
+			let ranking = {
+				rank: 0,
+				day_blobs_count: 0,
+				avg_pfb_size: 0,
+				last_message_time: 0,
+				commits_weekly: 0,
+				last_pushed_at: 0,
+			}
+			if (r.commits_weekly) {
+				ranking.commits_weekly = roundTo(quantitative(r.commits_weekly, maxWeeklyCommits) * rankCoefficients.commits_weekly * 100)
+			}
+			if (r.day_blobs_count) {
+				ranking.day_blobs_count = roundTo(quantitative(r.day_blobs_count, maxDailyBlobsCount) * rankCoefficients.day_blobs_count * 100)
+			}
+			if (r.avg_pfb_size) {
+				ranking.avg_pfb_size = roundTo(quantitative(r.avg_pfb_size, maxAvgPfbSize) * rankCoefficients.avg_pfb_size * 100)
+			}
+			if (r.last_message_time) {
+				ranking.last_message_time = roundTo(timeBased(DateTime.now(), DateTime.fromISO(r.last_message_time), 12, "hours")  * rankCoefficients.last_message_time * 100)
+			}
+			if (r.last_pushed_at) {
+				ranking.last_pushed_at = roundTo(timeBased(DateTime.fromISO(orgsState), DateTime.fromISO(r.last_pushed_at), 4, "weeks")  * rankCoefficients.last_pushed_at * 100)
+			}
+
+			ranking.rank = roundTo(Object.values(ranking).reduce((acc, val) => acc + val, 0))
+			return ranking
+		}
+
+		Object.keys(rollupsRanking.value).forEach(r => {
+			rollupsRanking.value[r].ranking = calculateRanking(rollupsRanking.value[r])
+		})
+
+		const maxRankEntry = Object.entries(rollupsRanking.value).reduce((maxEntry, [key, value]) => {
+			return value.ranking.rank > maxEntry.rank
+				? { slug: key, rank: value.ranking.rank }
+				: maxEntry
+		}, { slug: null, rank: 0 })
+
+		rollups_ranking.value = {
+			ranking: rollupsRanking.value,
+			top_rollup: {
+				slug: maxRankEntry.slug,
+				name: capitalizeAndReplace(maxRankEntry.slug, "-"),
+				rank: maxRankEntry.rank
+			},
+			last_update: DateTime.now().ts,
+		}
+
+		initialized.value = true
+	}
+
+	return { initialized, rollups_ranking, init }
+})
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useRollupsRankingStore, import.meta.hot))
+}