diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 00000000..80b0645f
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,6 @@
+{
+	"rules": {
+		"no-async-promise-executor": "off"
+	},
+	"ignorePatterns": ["services/lumina-node-wasm/**", "services/utils/blob.js", "services/utils/blobtx.js"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..c2ee5e31
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"oxc.enable": true
+}
diff --git a/app.vue b/app.vue
index cb40de99..3d966245 100644
--- a/app.vue
+++ b/app.vue
@@ -5,6 +5,7 @@ import * as Sentry from "@sentry/vue"
 /** Services */
 import Socket from "@/services/api/socket"
 import amp from "@/services/amp"
+import { watchForUpdate } from "@/services/version"
 
 /** Components */
 import ModalsManager from "@/components/modals/ModalsManager.vue"
@@ -16,14 +17,14 @@ import { fetchHead } from "@/services/api/main"
 import { fetchLatestBlocks } from "@/services/api/block"
 
 /** Store */
-import { useNodeStore } from "@/store/node"
-import { useAppStore } from "@/store/app"
-import { useBookmarksStore } from "@/store/bookmarks"
-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"
+import { useNodeStore } from "@/store/node.store"
+import { useAppStore } from "@/store/app.store"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useSettingsStore } from "@/store/settings.store"
+import { useEnumStore } from "@/store/enums.store"
+import { useLegalStore } from "@/store/legal.store"
+import { useNotificationsStore } from "@/store/notifications.store"
+import { useActivityStore } from "@/store/activity.store"
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
@@ -31,7 +32,7 @@ const settingsStore = useSettingsStore()
 const enumStore = useEnumStore()
 const legalStore = useLegalStore()
 const notificationsStore = useNotificationsStore()
-const rollupsRankingStore = useRollupsRankingStore()
+const activityStore = useActivityStore()
 
 bookmarksStore.$subscribe((mutation, state) => {
 	localStorage.setItem("bookmarks", JSON.stringify(state.bookmarks))
@@ -42,11 +43,50 @@ settingsStore.$subscribe((mutation, state) => {
 legalStore.$subscribe((mutation, state) => {
 	localStorage.setItem("legal", JSON.stringify(state.legal))
 })
-rollupsRankingStore.$subscribe((mutation, state) => {
+activityStore.$subscribe((mutation, state) => {
 	localStorage.setItem("rollups_ranking", JSON.stringify(state.rollups_ranking))
 })
 
+let watchInterval = null
+
 onMounted(async () => {
+	/**
+	 * Watch for package.json->version and notify users about the new version
+	 */
+	appStore.version = (await $fetch("/api/version")).version
+	if (!import.meta.dev)
+		watchInterval = watchForUpdate(appStore.version, (newVersion) => {
+			clearInterval(watchInterval)
+			notificationsStore.create({
+				notification: {
+					type: "success",
+					icon: "info",
+					title: "New update is available",
+					description: "Refresh the page to get the latest update with new features & bug fixes.",
+					autoDestroy: false,
+					irremovable: true,
+					actions: [
+						{
+							name: "Refresh",
+							icon: "refresh",
+							callback: () => {
+								location.reload()
+							},
+						},
+						{
+							name: "Changelog",
+							icon: "menu",
+							callback: () => {
+								window
+									.open(`https://github.com/celenium-io/celenium-interface/releases/tag/v${newVersion}`, "_blank")
+									.focus()
+							},
+						},
+					],
+				},
+			})
+		})
+
 	if (localStorage.bookmarks) {
 		bookmarksStore.bookmarks = JSON.parse(localStorage.bookmarks)
 	}
@@ -56,7 +96,7 @@ onMounted(async () => {
 	}
 
 	settingsStore.init()
-	rollupsRankingStore.init()
+	activityStore.init()
 
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
@@ -117,6 +157,10 @@ onMounted(async () => {
 		Socket.close()
 	}
 })
+
+onBeforeUnmount(() => {
+	clearInterval(watchInterval)
+})
 </script>
 
 <template>
@@ -127,9 +171,9 @@ onMounted(async () => {
 		<NuxtPage />
 
 		<div id="tooltip" />
-		<div id="modal" />
 		<div id="dropdown" />
 		<div id="popover" />
+		<div id="modal" />
 
 		<ModalsManager />
 		<Notifications />
diff --git a/assets/icons.json b/assets/icons.json
index 269524e9..835a6a89 100644
--- a/assets/icons.json
+++ b/assets/icons.json
@@ -1,4 +1,5 @@
 {
+	"explorable": "M8.393 2.67C7.883 3.172 7.423 3.76 7.026 4.401C5.795 6.381 5 9.067 5 12.001C5 14.946 5.847 17.633 7.1 19.607C7.50413 20.2519 7.98276 20.847 8.526 21.38C6.61034 20.6703 4.95799 19.3909 3.79127 17.7139C2.62455 16.037 1.99942 14.0429 2 12C2 7.75 4.653 4.117 8.393 2.67ZM11 3.236V20.735C10.29 20.381 9.505 19.665 8.788 18.535C7.745 16.892 7 14.578 7 12C7 9.41 7.705 7.096 8.724 5.457C9.385 4.394 10.121 3.693 10.824 3.322L11 3.236ZM15.607 2.67C17.4898 3.39815 19.1082 4.67909 20.2492 6.34437C21.3903 8.00965 22.0006 9.98129 22 12C22 16.251 19.347 19.883 15.607 21.33C16.117 20.828 16.577 20.24 16.974 19.6C18.205 17.618 19 14.932 19 12C19 9.068 18.205 6.381 16.974 4.401C16.5878 3.7727 16.129 3.19104 15.607 2.67ZM13 3.236C13.755 3.579 14.56 4.306 15.276 5.457C16.295 7.097 17 9.411 17 12C17 14.589 16.295 16.904 15.276 18.543C14.615 19.606 13.879 20.307 13.176 20.679L13 20.765V3.235V3.236Z",
 	"zap": "M 13.398 1.083 C 13.805 1.26 14.047 1.684 13.992 2.124 L 13.132 9 L 19.328 9 C 19.568 9 19.813 9 20.012 9.018 C 20.201 9.035 20.562 9.08 20.875 9.333 C 21.234 9.623 21.439 10.062 21.432 10.523 C 21.426 10.925 21.23 11.232 21.122 11.387 C 21.008 11.552 20.852 11.74 20.698 11.925 L 11.768 22.64 C 11.484 22.98 11.009 23.093 10.602 22.916 C 10.195 22.74 9.953 22.316 10.008 21.876 L 10.868 15 L 4.671 15 C 4.431 15 4.186 15 3.987 14.982 C 3.798 14.965 3.437 14.92 3.124 14.667 C 2.765 14.377 2.56 13.938 2.567 13.477 C 2.573 13.075 2.769 12.768 2.877 12.613 C 2.991 12.448 3.147 12.26 3.301 12.075 L 3.324 12.048 L 12.232 1.36 C 12.516 1.019 12.991 0.906 13.398 1.083 Z",
 	"moon": "M9.06693 2.41209C9.23841 2.03292 9.15714 1.58718 8.86288 1.29292C8.56862 0.998664 8.12289 0.917397 7.74371 1.08887C3.76893 2.88642 1 6.88764 1 11.5377C1 17.8682 6.13185 23 12.4623 23C17.1124 23 21.1136 20.2311 22.9112 16.2563C23.0826 15.8771 23.0014 15.4314 22.7071 15.1371C22.4128 14.8429 21.9671 14.7616 21.5879 14.9331C20.4015 15.4697 19.0838 15.7689 17.6935 15.7689C12.4676 15.7689 8.23116 11.5325 8.23116 6.30656C8.23116 4.91628 8.53036 3.59857 9.06693 2.41209Z",
 	"sun": "M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V4C11 4.55228 11.4477 5 12 5C12.5523 5 13 4.55228 13 4V2ZM13 20C13 19.4477 12.5523 19 12 19C11.4477 19 11 19.4477 11 20V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V20ZM2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H4C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11H2ZM5.60701 4.1928C5.21649 3.80227 4.58332 3.80227 4.1928 4.1928C3.80227 4.58332 3.80227 5.21649 4.1928 5.60701L5.60701 7.02122C5.99753 7.41175 6.6307 7.41175 7.02122 7.02122C7.41175 6.6307 7.41175 5.99753 7.02122 5.60701L5.60701 4.1928ZM19.8073 5.60701C20.1979 5.21649 20.1979 4.58332 19.8073 4.1928C19.4168 3.80227 18.7836 3.80227 18.3931 4.1928L16.9789 5.60701C16.5884 5.99753 16.5884 6.6307 16.9789 7.02122C17.3694 7.41175 18.0026 7.41175 18.3931 7.02122L19.8073 5.60701ZM7.02122 18.397C7.41175 18.0065 7.41175 17.3734 7.02122 16.9828C6.6307 16.5923 5.99753 16.5923 5.60701 16.9828L4.1928 18.397C3.80227 18.7876 3.80227 19.4207 4.1928 19.8113C4.58332 20.2018 5.21649 20.2018 5.60701 19.8113L7.02122 18.397ZM18.3931 16.9828C18.0026 16.5923 17.3694 16.5923 16.9789 16.9828C16.5884 17.3734 16.5884 18.0065 16.9789 18.397L18.3931 19.8113C18.7836 20.2018 19.4168 20.2018 19.8073 19.8113C20.1979 19.4207 20.1979 18.7876 19.8073 18.397L18.3931 16.9828ZM20 11C19.4477 11 19 11.4477 19 12C19 12.5523 19.4477 13 20 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12Z",
@@ -34,6 +35,7 @@
 	"burn": "m19.676 10.993c-0.3035-0.39661-0.67297-0.74034-1.0161-1.0841-0.8841-0.79323-1.887-1.3617-2.7315-2.1946-1.9661-1.9302-2.4016-5.1163-1.148-7.5621-1.2536 0.30407-2.3488 0.99153-3.2857 1.7451-3.4176 2.7498-4.7636 7.6017-3.1537 11.766 0.052783 0.1322 0.10556 0.26441 0.10556 0.43627 0 0.29085-0.19793 0.55526-0.46184 0.66102-0.3035 0.1322-0.62019 0.052888-0.87091-0.15864-0.079173-0.066108-0.13196-0.1322-0.18474-0.22475-1.4911-1.8905-1.7286-4.6007-0.72575-6.7689-2.2037 1.798-3.4044 4.8387-3.2329 7.7075 0.079174 0.66102 0.15835 1.322 0.38267 1.9831 0.18474 0.79323 0.54102 1.5865 0.93688 2.2871 1.4251 2.2871 3.8927 3.9265 6.545 4.257 2.8238 0.35695 5.8456-0.15864 8.0097-2.1153 2.4148-2.1946 3.2593-5.7112 2.0189-8.7255l-0.17154-0.34373c-0.27711-0.60814-1.0161-1.6658-1.0161-1.6658m-4.1698 8.3289c-0.36948 0.31729-0.97647 0.66102-1.4515 0.79323-1.4779 0.52882-2.9558-0.21153-3.8267-1.0841 1.5703-0.37017 2.5072-1.5336 2.7843-2.7102 0.22432-1.0576-0.19793-1.9302-0.36948-2.9482-0.15835-0.97831-0.13196-1.8112 0.22432-2.7234 0.25072 0.50238 0.51463 1.0048 0.83132 1.4014 1.0161 1.322 2.6127 1.9037 2.9558 3.7017 0.05278 0.18509 0.07917 0.37017 0.07917 0.56848 0.03958 1.0841-0.43545 2.2739-1.2272 3.001z",
 	"unlock": "m3.998 6.07c3.608-2.084 8.211-1.05 10.582 2.377 2.37 3.427 1.713 8.099-1.511 10.739-3.224 2.641-7.934 2.364-10.827-0.635s-2.999-7.716-0.244-10.843v-1.708c0-2.582 1.652-4.875 4.102-5.692 2.45-0.816 5.148 0.026 6.698 2.092 0.331 0.442 0.242 1.069-0.2 1.4-0.442 0.332-1.069 0.242-1.4-0.2-1.033-1.377-2.832-1.939-4.465-1.394-1.634 0.544-2.735 2.073-2.735 3.794zm5 5.93c0-0.552-0.448-1-1-1-0.553 0-1 0.448-1 1v2c0 0.553 0.447 1 1 1 0.552 0 1-0.447 1-1z",
 	"self-delegation": "m12 1c-6.0751 0-11 4.9249-11 11 0 6.0751 4.9249 11 11 11 6.0751 0 11-4.9249 11-11 0-6.0751-4.9249-11-11-11zm-9 11c0-4.9706 4.0294-9 9-9 4.9706 0 9 4.0294 9 9 0 2.2211-0.8046 4.2543-2.1382 5.824-0.9161-1.1126-2.3054-1.824-3.8618-1.824h-6c-1.5564 0-2.9457 0.7114-3.8618 1.8241-1.3336-1.5698-2.1382-3.603-2.1382-5.8241zm4-2.5c0-2.7614 2.2386-5 5-5 2.7614 0 5 2.2386 5 5 0 2.7614-2.2386 5-5 5-2.7614 0-5-2.2386-5-5z",
+	"refresh": "M10.1702 3.18887C13.523 2.49067 16.918 3.74107 19.0003 6.30704V4.0004C19.0003 3.44811 19.448 3.0004 20.0003 3.0004C20.5525 3.00055 21.0003 3.44821 21.0003 4.0004V9.0004C21.0001 9.55241 20.5523 10.0002 20.0003 10.0004H15.0003C14.4481 10.0004 14.0005 9.5525 14.0003 9.0004C14.0003 8.44811 14.448 8.0004 15.0003 8.0004H17.7708C16.1416 5.63557 13.1619 4.47732 10.2571 5.22208V5.2211C9.0266 5.53767 7.90556 6.18399 7.01397 7.08927C6.12234 7.99464 5.49333 9.1254 5.19561 10.3607C4.89791 11.5961 4.94218 12.8898 5.32354 14.102C5.70491 15.3139 6.40943 16.3993 7.36065 17.2416C8.31201 18.0839 9.47559 18.6514 10.7249 18.8832C11.9741 19.1148 13.2634 19.002 14.4534 18.557C15.6434 18.1119 16.6902 17.3514 17.4808 16.3568C18.2714 15.3623 18.7764 14.1712 18.9417 12.9115C19.0135 12.3639 19.5162 11.9774 20.0638 12.0492C20.611 12.1214 20.9969 12.6239 20.9251 13.1713C20.7126 14.7911 20.0628 16.3231 19.0462 17.602C18.0296 18.8806 16.6837 19.8588 15.1536 20.4311C13.6235 21.0032 11.9659 21.1479 10.3597 20.85C8.7534 20.552 7.25863 19.8216 6.03546 18.7387C4.81228 17.6556 3.90665 16.26 3.41632 14.7016C2.92605 13.1431 2.86853 11.4803 3.25128 9.892C3.63407 8.30375 4.44282 6.84996 5.58917 5.68595C6.73552 4.522 8.17693 3.69158 9.75909 3.28458H9.76007L10.1702 3.18887Z",
 	"redelegate": "m8 9c-3.866 0-7 3.134-7 7s3.134 7 7 7c3.866 0 7-3.134 7-7s-3.134-7-7-7zm1.0625-1.938c0.45832-3.4225 3.3898-6.062 6.9377-6.062 3.866 0 7 3.134 7 7 0 3.5479-2.6395 6.4794-6.062 6.9377-0.4847-4.1215-3.7542-7.391-7.8757-7.8757zm9.6446 10.231c0.3905 0.3905 0.3905 1.0237 0 1.4142l-0.2598 0.2598c1.4447-0.216 2.5527-1.4621 2.5527-2.9669 0-0.5523 0.4477-1 1-1s1 0.4477 1 1c0 2.6273-2.0264 4.7813-4.6014 4.9843l0.3085 0.3086c0.3905 0.3905 0.3905 1.0237 0 1.4142s-1.0237 0.3905-1.4142 0l-2-2c-0.1875-0.1875-0.2929-0.4419-0.2929-0.7071s0.1054-0.5196 0.2929-0.7071l2-2c0.3905-0.3905 1.0237-0.3905 1.4142 0zm-13.414-16c0.39053-0.39052 1.0237-0.39052 1.4142 0l2 2c0.39052 0.39053 0.39052 1.0237 0 1.4142l-2 2c-0.39053 0.39052-1.0237 0.39052-1.4142 0-0.39052-0.39053-0.39052-1.0237 0-1.4142l0.25977-0.25976c-1.4447 0.21598-2.5527 1.462-2.5527 2.9669 0 0.55228-0.44772 1-1 1s-1-0.44772-1-1c0-2.6273 2.0264-4.7813 4.6014-4.9844l-0.30855-0.30854c-0.39052-0.39053-0.39052-1.0237 0-1.4142z",
 	"granters": "M 11.181 12.164 C 11.463 12.308 11.693 12.537 11.836 12.819 C 11.99 13.119 12 13.448 12 13.777 L 12 18.223 C 12 18.343 12 18.485 11.99 18.61 C 11.977 18.809 11.925 19.003 11.836 19.181 C 11.693 19.463 11.463 19.692 11.181 19.836 C 11.003 19.925 10.809 19.977 10.61 19.99 C 10.485 20 10.342 20 10.223 20 L 1.777 20 C 1.657 20 1.515 20 1.389 19.99 C 1.19 19.977 0.996 19.925 0.817 19.836 C 0.534 19.691 0.305 19.46 0.161 19.176 C 0.074 18.997 0.023 18.803 0.01 18.605 C 0.002 18.476 -0.001 18.347 0 18.218 C 0.005 17.179 -0.026 16.065 0.38 15.087 C 0.888 13.862 1.861 12.888 3.086 12.381 C 3.596 12.169 4.134 12.081 4.742 12.041 C 5.335 12 6.063 12 6.964 12 L 10.224 12 C 10.552 12 10.881 12.01 11.181 12.164 Z M 21.707 13.293 C 22.098 13.683 22.098 14.316 21.707 14.707 L 17.707 18.707 C 17.317 19.097 16.684 19.097 16.293 18.707 L 14.293 16.707 C 13.914 16.315 13.92 15.691 14.306 15.305 C 14.691 14.919 15.315 14.914 15.707 15.293 L 17 16.586 L 20.293 13.293 C 20.684 12.903 21.317 12.903 21.707 13.293 Z M 13.573 0.916 C 13.781 0.404 14.364 0.157 14.875 0.364 C 16.765 1.128 18.001 2.962 18.001 5 C 18.001 7.038 16.765 8.872 14.875 9.636 C 14.365 9.839 13.786 9.591 13.58 9.081 C 13.374 8.572 13.617 7.992 14.125 7.782 C 15.259 7.323 16.001 6.223 16.001 5 C 16.001 3.777 15.259 2.677 14.125 2.218 C 13.614 2.011 13.366 1.428 13.573 0.916 Z M 3.5 5 C 3.5 2.239 5.739 0 8.5 0 C 11.262 0 13.5 2.239 13.5 5 C 13.5 7.761 11.262 10 8.5 10 C 5.739 10 3.5 7.761 3.5 5 Z",
 	"grid": "m8 2c0.55228 0 1 0.44772 1 1v4h6v-4c0-0.55228 0.4477-1 1-1s1 0.44772 1 1v4h3c0.5523 0 1 0.44772 1 1s-0.4477 1-1 1h-3v6h3c0.5523 0 1 0.4477 1 1s-0.4477 1-1 1h-3v4c0 0.5523-0.4477 1-1 1s-1-0.4477-1-1v-4h-6v4c0 0.5523-0.44772 1-1 1s-1-0.4477-1-1v-4h-3c-0.55228 0-1-0.4477-1-1s0.44772-1 1-1h3v-6h-3c-0.55228 0-1-0.44772-1-1s0.44772-1 1-1h3v-4c0-0.55228 0.44772-1 1-1zm7 13v-6h-6v6h6z",
@@ -121,6 +123,7 @@
 	],
 	"calc": "M 16.241 2 C 17.046 2 17.711 2 18.251 2.044 C 18.814 2.09 19.331 2.189 19.816 2.436 C 20.569 2.819 21.181 3.431 21.564 4.184 C 21.811 4.669 21.91 5.186 21.956 5.748 C 22 6.29 22 6.954 22 7.758 L 22 16.241 C 22 17.046 22 17.711 21.956 18.251 C 21.91 18.814 21.811 19.331 21.564 19.816 C 21.181 20.569 20.569 21.181 19.816 21.564 C 19.331 21.811 18.814 21.91 18.252 21.956 C 17.711 22 17.046 22 16.242 22 L 7.758 22 C 6.953 22 6.288 22 5.748 21.956 C 5.185 21.91 4.668 21.811 4.183 21.564 C 3.43 21.181 2.818 20.569 2.435 19.816 C 2.188 19.331 2.089 18.814 2.043 18.252 C 2 17.71 2 17.046 2 16.242 L 2 7.758 C 2 6.953 2 6.288 2.044 5.748 C 2.09 5.185 2.189 4.668 2.436 4.183 C 2.819 3.43 3.431 2.818 4.184 2.435 C 4.669 2.188 5.186 2.089 5.748 2.043 C 6.29 2 6.954 2 7.758 2 Z M 7.207 18.207 L 18.207 7.207 C 18.586 6.815 18.581 6.191 18.195 5.805 C 17.809 5.419 17.185 5.414 16.793 5.793 L 5.793 16.793 C 5.533 17.044 5.429 17.416 5.52 17.766 C 5.612 18.115 5.885 18.388 6.234 18.48 C 6.584 18.571 6.956 18.467 7.207 18.207 Z M 9.5 6.5 C 9.5 5.948 9.052 5.5 8.5 5.5 C 7.948 5.5 7.5 5.948 7.5 6.5 L 7.5 7.5 L 6.5 7.5 C 5.948 7.5 5.5 7.948 5.5 8.5 C 5.5 9.052 5.948 9.5 6.5 9.5 L 7.5 9.5 L 7.5 10.5 C 7.5 11.052 7.948 11.5 8.5 11.5 C 9.052 11.5 9.5 11.052 9.5 10.5 L 9.5 9.5 L 10.5 9.5 C 11.052 9.5 11.5 9.052 11.5 8.5 C 11.5 7.948 11.052 7.5 10.5 7.5 L 9.5 7.5 Z M 13.5 16.5 L 17.5 16.5 C 18.052 16.5 18.5 16.052 18.5 15.5 C 18.5 14.948 18.052 14.5 17.5 14.5 L 13.5 14.5 C 12.948 14.5 12.5 14.948 12.5 15.5 C 12.5 16.052 12.948 16.5 13.5 16.5 Z",
 	"calculator": "M 12 22 C 7.286 22 4.929 22 3.464 20.535 C 2 19.072 2 16.714 2 12 C 2 7.286 2 4.929 3.464 3.464 C 4.93 2 7.286 2 12 2 C 16.714 2 19.071 2 20.535 3.464 C 22 4.93 22 7.286 22 12 C 22 16.714 22 19.071 20.535 20.535 C 19.072 22 16.714 22 12 22 Z M 8.75 6.5 C 8.75 6.086 8.414 5.75 8 5.75 C 7.586 5.75 7.25 6.086 7.25 6.5 L 7.25 7.75 L 6 7.75 C 5.586 7.75 5.25 8.086 5.25 8.5 C 5.25 8.914 5.586 9.25 6 9.25 L 7.25 9.25 L 7.25 10.5 C 7.25 10.914 7.586 11.25 8 11.25 C 8.414 11.25 8.75 10.914 8.75 10.5 L 8.75 9.25 L 10 9.25 C 10.414 9.25 10.75 8.914 10.75 8.5 C 10.75 8.086 10.414 7.75 10 7.75 L 8.75 7.75 Z M 14 7.75 C 13.586 7.75 13.25 8.086 13.25 8.5 C 13.25 8.914 13.586 9.25 14 9.25 L 18 9.25 C 18.414 9.25 18.75 8.914 18.75 8.5 C 18.75 8.086 18.414 7.75 18 7.75 Z M 14 13.75 C 13.586 13.75 13.25 14.086 13.25 14.5 C 13.25 14.914 13.586 15.25 14 15.25 L 18 15.25 C 18.414 15.25 18.75 14.914 18.75 14.5 C 18.75 14.086 18.414 13.75 18 13.75 Z M 7.03 13.97 C 6.734 13.695 6.274 13.703 5.988 13.988 C 5.703 14.274 5.695 14.734 5.97 15.03 L 6.94 16 L 5.97 16.97 C 5.769 17.157 5.687 17.439 5.755 17.704 C 5.822 17.97 6.03 18.178 6.296 18.245 C 6.561 18.313 6.843 18.231 7.03 18.03 L 8 17.06 L 8.97 18.03 C 9.157 18.231 9.439 18.313 9.704 18.245 C 9.97 18.178 10.178 17.97 10.245 17.704 C 10.313 17.439 10.231 17.157 10.03 16.97 L 9.06 16 L 10.03 15.03 C 10.231 14.843 10.313 14.561 10.245 14.296 C 10.178 14.03 9.97 13.822 9.704 13.755 C 9.439 13.687 9.157 13.769 8.97 13.97 L 8 14.94 Z M 14 16.75 C 13.586 16.75 13.25 17.086 13.25 17.5 C 13.25 17.914 13.586 18.25 14 18.25 L 18 18.25 C 18.414 18.25 18.75 17.914 18.75 17.5 C 18.75 17.086 18.414 16.75 18 16.75 Z",
+	"sidebar": "M18 3C18.7652 2.99996 19.5015 3.29233 20.0583 3.81728C20.615 4.34224 20.9501 5.06011 20.995 5.824L21 6V18C21 18.7652 20.7077 19.5015 20.1827 20.0583C19.6578 20.615 18.9399 20.9501 18.176 20.995L18 21H6C5.23479 21 4.49849 20.7077 3.94174 20.1827C3.38499 19.6578 3.04989 18.9399 3.005 18.176L3 18V6C2.99996 5.23479 3.29233 4.49849 3.81728 3.94174C4.34224 3.38499 5.06011 3.04989 5.824 3.005L6 3H18ZM18 5H9V19H18C18.2449 19 18.4813 18.91 18.6644 18.7473C18.8474 18.5845 18.9643 18.3603 18.993 18.117L19 18V6C19 5.75507 18.91 5.51866 18.7473 5.33563C18.5845 5.15259 18.3603 5.03566 18.117 5.007L18 5ZM13.613 9.21L13.707 9.293L15.707 11.293C15.8792 11.4652 15.9826 11.6943 15.9979 11.9373C16.0132 12.1803 15.9393 12.4206 15.79 12.613L15.707 12.707L13.707 14.707C13.527 14.8863 13.2856 14.9905 13.0316 14.9982C12.7777 15.006 12.5303 14.9168 12.3397 14.7488C12.1492 14.5807 12.0297 14.3464 12.0056 14.0935C11.9815 13.8406 12.0546 13.588 12.21 13.387L12.293 13.293L13.585 12L12.293 10.707C12.1208 10.5348 12.0174 10.3057 12.0021 10.0627C11.9868 9.81966 12.0607 9.5794 12.21 9.387L12.293 9.293C12.4652 9.12082 12.6943 9.01739 12.9373 9.00211C13.1803 8.98683 13.4206 9.06075 13.613 9.21Z",
 	"stop-circle": "M 2 12 C 2 6.477 6.477 2 12 2 C 17.523 2 22 6.477 22 12 C 22 17.523 17.523 22 12 22 C 6.477 22 2 17.523 2 12 Z M 8.586 8.586 C 8 9.172 8 10.114 8 12 C 8 13.886 8 14.828 8.586 15.414 C 9.172 16 10.114 16 12 16 C 13.886 16 14.828 16 15.414 15.414 C 16 14.828 16 13.886 16 12 C 16 10.114 16 9.172 15.414 8.586 C 14.828 8 13.886 8 12 8 C 10.114 8 9.172 8 8.586 8.586 Z",
 	"play-circle": "M 2 12 C 2 6.477 6.477 2 12 2 C 17.523 2 22 6.477 22 12 C 22 17.523 17.523 22 12 22 C 6.477 22 2 17.523 2 12 Z M 10.694 15.846 L 15.414 13.059 C 16.195 12.597 16.195 11.403 15.414 10.941 L 10.694 8.154 C 9.934 7.706 9 8.29 9 9.214 L 9 14.787 C 9 15.71 9.934 16.294 10.694 15.846 Z",
 	"alt-arrow-down": "M12.3698 15.835L18.7998 9.205C19.2008 8.79 18.9578 8 18.4298 8H5.56982C5.04182 8 4.79882 8.79 5.19982 9.205L11.6298 15.835C11.8428 16.055 12.1568 16.055 12.3698 15.835Z",
@@ -148,6 +151,7 @@
 	"edit": "M16.2927 2.29295C17.7878 0.797857 20.2118 0.797859 21.7069 2.29295C23.202 3.78805 23.202 6.21207 21.7069 7.70717L20.5454 8.86869L20.5454 8.86873C20.1494 9.26471 19.9514 9.46271 19.723 9.5369C19.5222 9.60216 19.3058 9.60216 19.105 9.5369C18.8768 9.46274 18.6789 9.26484 18.2831 8.86911L18.2826 8.86869L15.1312 5.71722L15.1305 5.71645C14.735 5.32094 14.5371 5.12304 14.463 4.89486C14.3977 4.69402 14.3977 4.47767 14.463 4.27683C14.5371 4.04865 14.735 3.85075 15.1305 3.45524L15.1312 3.45447L16.2927 2.29295ZM16.8694 12.5448L16.8686 12.5456L8.451 20.9633C8.2061 21.2086 7.99008 21.4249 7.7334 21.5942C7.50774 21.743 7.26301 21.8606 7.00584 21.9439C6.71345 22.0385 6.40966 22.0721 6.0653 22.11L6.06494 22.1101L2.61044 22.4939C2.30851 22.5274 2.00771 22.4219 1.7929 22.2071C1.57809 21.9923 1.47258 21.6915 1.50612 21.3896L1.88992 17.9351L1.88992 17.9351C1.92792 17.5906 1.96144 17.2867 2.05613 16.9942C2.13938 16.737 2.25701 16.4923 2.40582 16.2666C2.57502 16.01 2.79132 15.794 3.03652 15.5492L3.03673 15.549L11.4544 7.13134C11.8504 6.73532 12.0484 6.53732 12.2768 6.46313C12.4776 6.39787 12.694 6.39787 12.8948 6.46313C13.123 6.53729 13.321 6.73519 13.7168 7.13091L13.7172 7.13134L16.8686 10.2828L16.8698 10.2839C17.265 10.6793 17.4628 10.8771 17.5368 11.1052C17.6021 11.306 17.6021 11.5224 17.5368 11.7232C17.4628 11.9514 17.2649 12.1493 16.8694 12.5448Z",
 	"equals": "M5 8C4.44772 8 4 8.44772 4 9C4 9.55228 4.44772 10 5 10H19C19.5523 10 20 9.55228 20 9C20 8.44772 19.5523 8 19 8H5ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16H19C19.5523 16 20 15.5523 20 15C20 14.4477 19.5523 14 19 14H5Z",
 	"arrow-narrow-up-right": "M10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7H15.5858L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L17 8.41421V14C17 14.5523 17.4477 15 18 15C18.5523 15 19 14.5523 19 14V6C19 5.44772 18.5523 5 18 5H10Z",
+	"arrow-narrow-up-right-circle": "M17 3.33989C18.5083 4.21075 19.7629 5.46042 20.6398 6.96519C21.5167 8.46997 21.9854 10.1777 21.9994 11.9192C22.0135 13.6608 21.5725 15.3758 20.72 16.8946C19.8676 18.4133 18.6332 19.6831 17.1392 20.5782C15.6452 21.4733 13.9434 21.9627 12.2021 21.998C10.4608 22.0332 8.74055 21.6131 7.21156 20.7791C5.68256 19.9452 4.39787 18.7264 3.48467 17.2434C2.57146 15.7604 2.06141 14.0646 2.005 12.3239L2 11.9999L2.005 11.6759C2.061 9.94888 2.56355 8.26585 3.46364 6.79089C4.36373 5.31592 5.63065 4.09934 7.14089 3.25977C8.65113 2.42021 10.3531 1.98629 12.081 2.00033C13.8089 2.01437 15.5036 2.47589 17 3.33989ZM15 7.99989H9L8.883 8.00689C8.63975 8.03555 8.41548 8.15249 8.25272 8.33552C8.08996 8.51856 8.00003 8.75496 8 8.99989L8.007 9.11689C8.03566 9.36014 8.15259 9.58442 8.33563 9.74718C8.51866 9.90994 8.75507 9.99986 9 9.99989H12.584L8.293 14.2929L8.21 14.3869C8.05459 14.5879 7.98151 14.8405 8.0056 15.0934C8.0297 15.3463 8.14916 15.5806 8.33972 15.7486C8.53029 15.9167 8.77767 16.0059 9.03162 15.9981C9.28557 15.9904 9.52704 15.8862 9.707 15.7069L14 11.4139V14.9999L14.007 15.1169C14.0371 15.37 14.1627 15.602 14.3582 15.7656C14.5536 15.9292 14.8042 16.012 15.0586 15.9971C15.313 15.9821 15.5522 15.8706 15.7272 15.6853C15.9021 15.4999 15.9997 15.2548 16 14.9999V8.99989L15.993 8.88289L15.964 8.73389L15.929 8.62889L15.875 8.51589L15.804 8.40489C15.7745 8.36521 15.7421 8.32778 15.707 8.29289L15.617 8.21289L15.521 8.14589L15.423 8.09389L15.313 8.04989L15.201 8.01989L15.075 8.00289L15 7.99989Z",
 	"github": "M12 1.5C6.20156 1.5 1.5 6.32344 1.5 12.2672C1.5 17.025 4.50937 21.0562 8.68125 22.4812C8.73977 22.494 8.79949 22.5002 8.85938 22.5C9.24844 22.5 9.39844 22.2141 9.39844 21.9656C9.39844 21.7078 9.38906 21.0328 9.38437 20.1328C9.03705 20.2142 8.68173 20.2567 8.325 20.2594C6.30469 20.2594 5.84531 18.6891 5.84531 18.6891C5.36719 17.4469 4.67813 17.1141 4.67813 17.1141C3.76406 16.4719 4.67344 16.4531 4.74375 16.4531H4.74844C5.80313 16.5469 6.35625 17.5687 6.35625 17.5687C6.88125 18.4875 7.58437 18.7453 8.2125 18.7453C8.62783 18.737 9.03673 18.6412 9.4125 18.4641C9.50625 17.7703 9.77812 17.2969 10.0781 17.025C7.74844 16.7531 5.29688 15.8297 5.29688 11.7047C5.29688 10.5281 5.70469 9.56719 6.375 8.81719C6.26719 8.54531 5.90625 7.44844 6.47812 5.96719C6.55483 5.94883 6.63368 5.94095 6.7125 5.94375C7.09219 5.94375 7.95 6.08906 9.36563 7.07344C11.0857 6.59218 12.9049 6.59218 14.625 7.07344C16.0406 6.08906 16.8984 5.94375 17.2781 5.94375C17.3569 5.94095 17.4358 5.94883 17.5125 5.96719C18.0844 7.44844 17.7234 8.54531 17.6156 8.81719C18.2859 9.57187 18.6937 10.5328 18.6937 11.7047C18.6937 15.8391 16.2375 16.7484 13.8984 17.0156C14.2734 17.3484 14.6109 18.0047 14.6109 19.0078C14.6109 20.4469 14.5969 21.6094 14.5969 21.9609C14.5969 22.2141 14.7422 22.5 15.1312 22.5C15.1942 22.5003 15.2571 22.494 15.3187 22.4812C19.4953 21.0562 22.5 17.0203 22.5 12.2672C22.5 6.32344 17.7984 1.5 12 1.5Z",
 	"discord": "M21.0576 1.47735C21.4953 1.91187 21.7441 2.5014 21.75 3.11812V23.25L16.6406 18.5625L17.25 20.625H4.57687C3.29437 20.625 2.25 19.6547 2.25 18.375V3.07125C2.25161 2.45514 2.49746 1.8648 2.93365 1.42967C3.36983 0.994542 3.96076 0.750122 4.57687 0.75L19.4119 0.796875C20.0286 0.798327 20.6199 1.04282 21.0576 1.47735ZM14.468 14.5542C14.8092 14.9728 15.218 15.4598 15.218 15.4598C17.584 15.3851 18.567 13.9302 18.6708 13.7765C18.6771 13.7672 18.6802 13.7627 18.6802 13.7634C18.6802 10.1512 17.0456 7.21875 17.0456 7.21875C15.4219 6.00516 13.867 6.03937 13.867 6.03937L13.7081 6.22031C15.638 6.79688 16.5347 7.64766 16.5347 7.64766C15.4748 7.07453 14.315 6.70938 13.118 6.57187C12.3556 6.48813 11.5859 6.49568 10.8253 6.59437C10.7604 6.59644 10.6958 6.60413 10.6322 6.61734C10.2338 6.66234 9.26859 6.79828 8.05406 7.33031C7.63406 7.51172 7.38469 7.64766 7.38469 7.64766C7.38469 7.64766 8.31516 6.75328 10.3584 6.17578L10.245 6.03984C10.245 6.03984 8.70141 6.00563 7.06687 7.21734C7.06687 7.21734 5.43234 10.1498 5.43234 13.762C5.43234 13.762 6.38578 15.3923 8.89406 15.4716C8.89406 15.4716 9.31406 14.9733 9.65484 14.543C8.21297 14.1131 7.66828 13.2183 7.66828 13.2183C7.66828 13.2183 7.78172 13.2975 7.98609 13.4109C7.99408 13.4109 8.00151 13.4154 8.01168 13.4216C8.01762 13.4251 8.0245 13.4293 8.03297 13.4334C8.05044 13.4452 8.06778 13.4538 8.08513 13.4625C8.10176 13.4708 8.1184 13.4791 8.13516 13.4902C8.40223 13.6373 8.67914 13.7659 8.96391 13.875C9.50221 14.0931 10.0611 14.2564 10.6322 14.3625C11.603 14.5485 12.6 14.5523 13.5722 14.3738C14.1364 14.27 14.6881 14.1067 15.218 13.8867C15.6769 13.7139 16.1148 13.4898 16.5234 13.2188C16.5234 13.2188 15.9558 14.1352 14.468 14.5542ZM8.78203 11.4642C8.78203 10.7738 9.29297 10.2188 9.93984 10.2188C10.5867 10.2188 11.1094 10.7723 11.0977 11.4642C11.0977 12.1552 10.5867 12.7097 9.93984 12.7097C9.30422 12.7097 8.78203 12.1547 8.78203 11.4642ZM12.9248 11.4642C12.9248 10.7738 13.4358 10.2188 14.0827 10.2188C14.7187 10.2188 15.2405 10.7733 15.2405 11.4642C15.2405 12.1552 14.73 12.7097 14.0827 12.7097C13.447 12.7097 12.9248 12.1547 12.9248 11.4642Z",
 	"twitter": "M23.25 5.13282C22.406 5.49955 21.513 5.74116 20.5992 5.85001C21.5595 5.28769 22.2817 4.39434 22.6303 3.33751C21.7224 3.86841 20.7307 4.24092 19.6978 4.43907C19.2629 3.98323 18.7397 3.62059 18.1603 3.3732C17.5808 3.12581 16.9571 2.99884 16.327 3.00001C13.7761 3.00001 11.7117 5.03438 11.7117 7.5422C11.7099 7.89102 11.7499 8.23881 11.8308 8.57813C10.0016 8.49238 8.2104 8.02575 6.57187 7.2081C4.93333 6.39044 3.48351 5.23977 2.31516 3.8297C1.90527 4.52069 1.6885 5.30909 1.6875 6.11251C1.6875 7.68751 2.50922 9.0797 3.75 9.89532C3.01487 9.87787 2.29481 9.68331 1.65094 9.32813V9.38438C1.65094 11.5875 3.24469 13.4203 5.35406 13.8375C4.9574 13.9433 4.54864 13.9968 4.13812 13.9969C3.84683 13.9974 3.5562 13.9691 3.27047 13.9125C3.85687 15.7172 5.56359 17.0297 7.58531 17.0672C5.94252 18.3333 3.9256 19.0175 1.85156 19.0125C1.48341 19.012 1.11561 18.9901 0.75 18.9469C2.85993 20.2942 5.31255 21.0068 7.81594 21C16.3172 21 20.9616 14.0766 20.9616 8.07188C20.9616 7.87501 20.9564 7.67813 20.947 7.48595C21.8485 6.84472 22.6283 6.04787 23.25 5.13282Z",
@@ -205,7 +209,7 @@
 	"crown": "M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z",
 	"earth": "M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
 	"city": "M15,23H13V21H15V23M19,21H17V23H19V21M15,17H13V19H15V17M7,21H5V23H7V21M7,17H5V19H7V17M19,17H17V19H19V17M15,13H13V15H15V13M19,13H17V15H19V13M21,9A2,2 0 0,1 23,11V23H21V11H11V23H9V15H3V23H1V15A2,2 0 0,1 3,13H9V11A2,2 0 0,1 11,9V7A2,2 0 0,1 13,5H15V1H17V5H19A2,2 0 0,1 21,7V9M19,9V7H13V9H19Z",
-	"drop": "M12 18C12 18.7 12.12 19.36 12.34 20C12.23 20 12.12 20 12 20C8.69 20 6 17.31 6 14C6 10 12 3.25 12 3.25S16.31 8.1 17.62 12C16.93 12.06 16.28 12.22 15.67 12.47C15 10.68 13.5 8.33 12 6.39C10 8.96 8 12.23 8 14C8 16.21 9.79 18 12 18M19 17V14H17V17H14V19H17V22H19V19H22V17H19Z",
+	"drop": "M17 3.33989C18.5202 4.21758 19.7826 5.47997 20.6603 7.00017C21.538 8.52038 22 10.2448 22 12.0002C22 13.7556 21.5379 15.48 20.6602 17.0002C19.7825 18.5204 18.5201 19.7828 16.9999 20.6605C15.4797 21.5381 13.7552 22.0002 11.9998 22.0001C10.2445 22.0001 8.52002 21.538 6.99984 20.6603C5.47965 19.7826 4.21729 18.5202 3.33963 17C2.46198 15.4797 1.99996 13.7553 2 11.9999L2.005 11.6759C2.061 9.94888 2.56355 8.26585 3.46364 6.79089C4.36373 5.31592 5.63065 4.09934 7.14089 3.25977C8.65113 2.42021 10.3531 1.98629 12.081 2.00033C13.8089 2.01437 15.5036 2.47589 17 3.33989ZM12.823 7.43189C12.731 7.29865 12.6081 7.18973 12.4647 7.11448C12.3214 7.03924 12.1619 6.99993 12 6.99993C11.8381 6.99993 11.6786 7.03924 11.5353 7.11448C11.3919 7.18973 11.269 7.29865 11.177 7.43189L8.575 11.1959C7.553 12.8659 7.941 14.9319 9.45 16.1249C10.178 16.6923 11.0745 17.0004 11.9975 17.0004C12.9205 17.0004 13.817 16.6923 14.545 16.1249C16.055 14.9339 16.442 12.8649 15.449 11.2429L12.823 7.43189Z",
 	"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 2f12f539..48dec60a 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -46,8 +46,8 @@ $grayscale: (
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 	--legendary: #ff5a17;
-	--epic: #7448E7;
-	--rare: #007AFF;
+	--epic: #7448e7;
+	--rare: #007aff;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -78,10 +78,9 @@ $grayscale: (
 	--validator-active: #85f891;
 	--validator-inactive: #1ca7ed;
 	--validator-jailed: #f8774a;
-	// --supply: #65c7f8;
 	--supply: #1ca7ed;
 	--staking: #85f891;
-	--geo-map: #8B8C8D;
+	--geo-map: #8b8c8d;
 }
 
 [theme="dimmed"] {
@@ -105,7 +104,6 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	// --brand: #18d2a5;
 	--brand: #33a853;
 	--blue: #0b84fe;
 	--red: #eb5757;
@@ -120,8 +118,8 @@ $grayscale: (
 	--neutral-mint: #109373;
 	--dark-mint: #1e473d;
 	--legendary: #ff5a17;
-	--epic: #7448E7;
-	--rare: #007AFF;
+	--epic: #7448e7;
+	--rare: #007aff;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -146,7 +144,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
-	--geo-map: #8B8C8D;
+	--geo-map: #8b8c8d;
 }
 
 [theme="light"] {
@@ -170,7 +168,6 @@ $grayscale: (
 	--txt-white: rgba(255, 255, 255, 95%);
 
 	/* General */
-	// --brand: #18d2a5;
 	--brand: #0ade71;
 	--blue: #0b84fe;
 	--red: #eb5757;
@@ -185,8 +182,8 @@ $grayscale: (
 	--neutral-mint: #109373;
 	--dark-mint: #c4f9eb;
 	--legendary: #ff5a17;
-	--epic: #7448E7;
-	--rare: #007AFF;
+	--epic: #7448e7;
+	--rare: #007aff;
 
 	/* Grayscale */
 	@each $gray, $value in $grayscale {
@@ -211,7 +208,7 @@ $grayscale: (
 	--block-progress-fill-background: #33a853;
 	--logo-name: var(--txt-primary);
 	--bar-fill: rgb(243, 147, 45);
-	--geo-map: #8B8C8D;
+	--geo-map: #8b8c8d;
 }
 
 @font-face {
@@ -273,7 +270,7 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	
+
 	user-select: text;
 }
 
diff --git a/components/ActionBar.vue b/components/ActionBar.vue
index 6b4c75f1..e1c78678 100644
--- a/components/ActionBar.vue
+++ b/components/ActionBar.vue
@@ -11,14 +11,20 @@ import Search from "@/components/modules/navigation/Search.vue"
 import { isMobile } from "@/services/utils"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 </script>
 
 <template>
 	<Flex wide align="center" justify="between" gap="24" :class="$style.wrapper">
 		<Flex wide align="center" gap="12">
-			<Button v-if="isMobile()" @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="medium" :class="$style.menu_btn">
+			<Button
+				v-if="isMobile()"
+				@click="appStore.showSidebar = !appStore.showSidebar"
+				type="secondary"
+				size="medium"
+				:class="$style.menu_btn"
+			>
 				<Icon name="menu" size="16" color="primary" />
 			</Button>
 
diff --git a/components/AmountInCurrency.vue b/components/AmountInCurrency.vue
index 96157464..88243249 100644
--- a/components/AmountInCurrency.vue
+++ b/components/AmountInCurrency.vue
@@ -6,7 +6,7 @@ import { amountToString } from "@/services/utils"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const currentPrice = computed(() => appStore.currentPrice)
@@ -74,12 +74,12 @@ const calculatedAmount = computed(() => {
 				...defaultCurrencyStyle,
 				...props.styles.currency,
 			},
-		}
+		},
 	}
 
 	let tiaDisplay
 	let tiaExchange
-	if (finalAmount.amount.unit === 'utia') {
+	if (finalAmount.amount.unit === "utia") {
 		tiaExchange = finalAmount.amount.value / 1_000_000
 
 		if (finalAmount.amount.currency === "TIA") {
diff --git a/components/BadgeValue.vue b/components/BadgeValue.vue
index 9d25ed26..9afed49c 100644
--- a/components/BadgeValue.vue
+++ b/components/BadgeValue.vue
@@ -5,7 +5,7 @@
 import { space } from "@/services/utils"
 
 /** Store */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 const notificationsStore = useNotificationsStore()
 
 const props = defineProps({
diff --git a/components/BookmarkButton.vue b/components/BookmarkButton.vue
index 12cf1f54..cc3a211f 100644
--- a/components/BookmarkButton.vue
+++ b/components/BookmarkButton.vue
@@ -3,13 +3,13 @@
 import Button from "@/components/ui/Button.vue"
 
 /** Services */
-import { capitilize } from "~/services/utils"
+import { capitilize } from "@/services/utils"
 
 /** Store */
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const bookmarksStore = useBookmarksStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
@@ -39,7 +39,6 @@ const bookmarkText = computed(() => {
 
 const handleBookmark = () => {
 	if (!isBookmarked.value) {
-
 		let newBookmark = {
 			id: props.id,
 			type: capitilize(props.type),
@@ -70,7 +69,6 @@ const handleBookmark = () => {
 			cacheStore.current.bookmark = newBookmark
 			modalsStore.open("edit_alias")
 		}
-
 	} else {
 		let notification = {}
 
@@ -101,7 +99,6 @@ const handleBookmark = () => {
 onMounted(() => {
 	isBookmarked.value = bookmarksStore.getBookmark(props.type, props.id) ? true : false
 })
-
 </script>
 
 <template>
diff --git a/components/Connection.vue b/components/Connection.vue
index 0c0c7e0f..062c580a 100644
--- a/components/Connection.vue
+++ b/components/Connection.vue
@@ -5,13 +5,13 @@ import { Dropdown, DropdownTitle, DropdownItem, DropdownDivider } from "@/compon
 
 /** Services */
 import amp from "@/services/amp"
-import { disconnect } from "~/services/wallet"
+import { disconnect } from "@/services/wallet"
 import { arabica, mainnet, mammoth, mocha } from "@/services/chains"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const notificationsStore = useNotificationsStore()
@@ -22,7 +22,6 @@ const { hostname } = useRequestURL()
 
 switch (hostname) {
 	case "celenium.io":
-		// case "dev.celenium.io":
 		appStore.network = mainnet
 		break
 
@@ -30,20 +29,15 @@ 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":
 		appStore.network = arabica
 		break
-	
+
 	default:
 		appStore.network = arabica
 		break
diff --git a/components/CopyButton.vue b/components/CopyButton.vue
index 647fb12d..ec625635 100644
--- a/components/CopyButton.vue
+++ b/components/CopyButton.vue
@@ -1,6 +1,6 @@
 <script setup>
 /** Store */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 const notificationsStore = useNotificationsStore()
 
 const props = defineProps({
diff --git a/components/Feed.vue b/components/Feed.vue
index 97fce880..7f3e6acb 100644
--- a/components/Feed.vue
+++ b/components/Feed.vue
@@ -13,10 +13,10 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { fetchPriceSeries } from "@/services/api/stats"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useRollupsRankingStore } from "@/store/rollupsrank"
+import { useAppStore } from "@/store/app.store"
+import { useActivityStore } from "@/store/activity.store"
 const appStore = useAppStore()
-const rollupRankingStore = useRollupsRankingStore()
+const activityStore = useActivityStore()
 
 const head = computed(() => appStore.lastHead)
 const currentPrice = computed(() => appStore.currentPrice)
@@ -26,15 +26,15 @@ const totalSupplyUSD = computed(() => totalSupply.value * currentPrice.value?.cl
 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))
+	let rankCategory = getRankCategory(roundTo(activityStore?.rollups_ranking?.top_rollup?.rank / 10, 0))
 	return {
-		slug: rollupRankingStore?.rollups_ranking?.top_rollup?.slug,
-		name: rollupRankingStore?.rollups_ranking?.top_rollup?.name,
+		slug: activityStore?.rollups_ranking?.top_rollup?.slug,
+		name: activityStore?.rollups_ranking?.top_rollup?.name,
 		rank: {
 			name: rankCategory?.name,
-			score: rollupRankingStore?.rollups_ranking?.top_rollup?.rank,
+			score: activityStore?.rollups_ranking?.top_rollup?.rank,
 			color: rankCategory?.color,
-		}
+		},
 	}
 })
 
@@ -46,16 +46,16 @@ const price = reactive({
 })
 
 onMounted(async () => {
-	const dataSeries = await fetchPriceSeries( {from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000)})
+	const dataSeries = await fetchPriceSeries({ from: parseInt(DateTime.now().minus({ days: 3 }).ts / 1_000) })
 	series.value = dataSeries
 	appStore.currentPrice = series.value[0]
 	price.value = parseFloat(series.value[0].close)
 
 	const prevDayClosePrice = parseFloat(series.value[1].close)
 	price.diff = (Math.abs(prevDayClosePrice - price.value) / ((prevDayClosePrice + price.value) / 2)) * 100
-	let side = 'stay'
+	let side = "stay"
 	if (price.value - prevDayClosePrice !== 0) {
-		side = price.value - prevDayClosePrice > 0 ? 'rise' : 'fall'
+		side = price.value - prevDayClosePrice > 0 ? "rise" : "fall"
 	}
 	price.side = side
 })
@@ -69,12 +69,20 @@ onMounted(async () => {
 					<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'}" />
+								<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>
+									<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>
@@ -103,7 +111,9 @@ onMounted(async () => {
 						<Flex align="center" gap="4">
 							<Text size="12" weight="500" color="tertiary" noWrap :class="$style.key">Txs:</Text>
 
-							<Text v-if="head.total_tx" 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>
@@ -231,6 +241,7 @@ onMounted(async () => {
 
 <style module>
 .wrapper {
+	min-height: 32px;
 	height: 32px;
 	max-width: var(--base-width);
 
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index 61c43a6e..214e19cd 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -13,9 +13,9 @@ import { StatusMap } from "@/services/constants/node"
 import { isMainnet, isMobile } from "@/services/utils"
 
 /** Store */
-import { useAppStore } from "~/store/app"
-import { useNodeStore } from "~/store/node"
-import { useModalsStore } from "~/store/modals"
+import { useAppStore } from "@/store/app.store"
+import { useNodeStore } from "@/store/node.store"
+import { useModalsStore } from "@/store/modals.store"
 const appStore = useAppStore()
 const nodeStore = useNodeStore()
 const modalsStore = useModalsStore()
@@ -142,6 +142,13 @@ const modularLinks = reactive([
 
 const isToolsLinkCollapsed = ref(false)
 const toolsLinks = reactive([
+	{
+		icon: "explorable",
+		name: "Terminal",
+		path: "https://terminal.celenium.io",
+		external: true,
+		new: true,
+	},
 	{
 		icon: "drop",
 		name: "Faucet",
@@ -171,16 +178,6 @@ const toolsLinks = reactive([
 	},
 ])
 
-const newLinks = reactive([
-	{
-		icon: "tag",
-		name: "Celenium API",
-		callback: () => {
-			modalsStore.open("api")
-		},
-	},
-])
-
 const handleNavigate = (url) => {
 	window.location.replace(url)
 }
@@ -238,7 +235,7 @@ const handleOnClose = () => {
 				</Flex>
 			</Flex>
 
-			<Flex direction="column" gap="8">
+			<Flex direction="column" gap="2">
 				<Flex @click="isToolsLinkCollapsed = !isToolsLinkCollapsed" align="center" gap="4" :class="$style.group_title">
 					<Text size="12" weight="500" color="tertiary">Tools</Text>
 					<Icon
@@ -254,17 +251,6 @@ const handleOnClose = () => {
 				</Flex>
 			</Flex>
 
-			<!-- <Flex direction="column" gap="8">
-				<Flex align="center" gap="8" style="padding: 0 8px">
-					<Icon name="stars" size="12" color="tertiary" />
-					<Text size="12" weight="500" color="tertiary">New things</Text>
-				</Flex>
-
-				<Flex direction="column" gap="2">
-					<NavLink v-for="link in newLinks" :link="link" @onClose="appStore.showSidebar = false" />
-				</Flex>
-			</Flex> -->
-
 			<AdvBanner />
 		</Flex>
 
diff --git a/components/LoadingHolder.vue b/components/LoadingHolder.vue
deleted file mode 100644
index 8d218c13..00000000
--- a/components/LoadingHolder.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup>
-import Spinner from "@/components/ui/Spinner.vue"
-const props = defineProps({
-	title: {
-		type: String,
-		required: true,
-	},
-	subtitle: {
-		type: String,
-		required: false,
-	},
-})
-</script>
-
-<template>
-	<ClientOnly>
-		<Transition name="fade">
-			<Flex direction="column" align="center" gap="16" :class="$style.loading">
-				<Spinner size="16" />
-
-				<Flex direction="column" align="center" gap="8">
-					<Text size="14" weight="500" color="primary"> {{ title }} </Text>
-					<Text v-if="subtitle" size="13" weight="500" color="tertiary"> {{ subtitle }} </Text>
-				</Flex>
-			</Flex>
-		</Transition>
-	</ClientOnly>
-</template>
-
-<style module>
-.loading {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-</style>
diff --git a/components/Notifications.vue b/components/Notifications.vue
index 4ee25f25..f1a8e684 100644
--- a/components/Notifications.vue
+++ b/components/Notifications.vue
@@ -1,8 +1,11 @@
 <script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+
 /**
  * Store
  */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 const notificationsStore = useNotificationsStore()
 
 const handleActionCallback = (callback, notification) => {
@@ -37,13 +40,9 @@ const handleActionCallback = (callback, notification) => {
 						<div v-if="notification.description" :class="$style.description">
 							<Text v-if="notification.description === 'privacy'">
 								Here's our
-								<NuxtLink to="/privacy-policy" :class="$style.link">
-									Privacy Policy
-								</NuxtLink>
-								and 
-								<NuxtLink to="/terms-of-use" :class="$style.link">
-									Terms of Use
-								</NuxtLink>
+								<NuxtLink to="/privacy-policy" :class="$style.link"> Privacy Policy </NuxtLink>
+								and
+								<NuxtLink to="/terms-of-use" :class="$style.link"> Terms of Use </NuxtLink>
 							</Text>
 							<Text v-else>
 								{{ notification.description }}
@@ -65,17 +64,16 @@ const handleActionCallback = (callback, notification) => {
 						</div>
 
 						<Flex v-if="notification.actions" align="center" gap="6" :class="$style.actions">
-							<Flex
-								v-for="(action, aIndex) in notification.actions"
-								:key="aIndex"
+							<Button
+								v-for="(action, actionIdx) in notification.actions"
+								:key="actionIdx"
 								@click="handleActionCallback(action.callback, notification)"
-								align="center"
-								gap="6"
-								:class="$style.action"
+								type="secondary"
+								size="mini"
 							>
-								<Icon v-if="action.icon" :name="action.icon" color="tertiary" size="12" />
-								<Text size="12" weight="600" color="secondary">{{ action.name }}</Text>
-							</Flex>
+								<Icon v-if="action.icon" :name="action.icon" color="tertiary" size="14" />
+								<Text size="12" weight="600" color="primary">{{ action.name }}</Text>
+							</Button>
 						</Flex>
 					</Flex>
 
@@ -137,7 +135,7 @@ const handleActionCallback = (callback, notification) => {
 }
 
 .general_icon.success {
-	fill: var(--green);
+	fill: var(--brand);
 }
 
 .general_icon.warning {
diff --git a/components/Text.vue b/components/Text.vue
index 3d79986c..4743f0af 100644
--- a/components/Text.vue
+++ b/components/Text.vue
@@ -2,6 +2,10 @@
 import { computed } from "vue"
 
 const props = defineProps({
+	as: {
+		type: String,
+		default: "span",
+	},
 	size: {
 		type: String,
 	},
@@ -71,7 +75,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-	<span :class="classes">
+	<component :is="as" :class="classes">
 		<slot />
-	</span>
+	</component>
 </template>
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 444216b8..721f7f75 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -6,7 +6,7 @@ import { Dropdown, DropdownItem, DropdownTitle } from "@/components/ui/Dropdown"
 import { isPrefersDarkScheme } from "@/services/utils"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const theme = useCookie("theme", { default: () => "dark" })
@@ -101,58 +101,67 @@ const handleChangeTheme = (target) => {
 						<Flex direction="column" gap="12">
 							<Text size="13" weight="500" color="tertiary">General</Text>
 							<NuxtLink to="/">
-								<Text size="13" weight="500" color="secondary">Browse</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Browse</Text>
 							</NuxtLink>
 							<NuxtLink to="/txs">
-								<Text size="13" weight="500" color="secondary">Transactions</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Transactions</Text>
 							</NuxtLink>
 							<NuxtLink to="/blocks">
-								<Text size="13" weight="500" color="secondary">Blocks</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Blocks</Text>
 							</NuxtLink>
 							<NuxtLink to="/addresses">
-								<Text size="13" weight="500" color="secondary">Addresses</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Addresses</Text>
 							</NuxtLink>
 						</Flex>
 
 						<Flex direction="column" gap="12">
 							<Text size="13" weight="500" color="tertiary">Modular</Text>
 							<NuxtLink to="/rollups">
-								<Text size="13" weight="500" color="secondary">Rollups</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Rollups</Text>
 							</NuxtLink>
 							<NuxtLink to="/namespaces">
-								<Text size="13" weight="500" color="secondary">Namespaces</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Namespaces</Text>
 							</NuxtLink>
 							<NuxtLink to="/validators">
-								<Text size="13" weight="500" color="secondary">Validators</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Validators</Text>
 							</NuxtLink>
 						</Flex>
 
 						<Flex direction="column" gap="12">
 							<Text size="13" weight="500" color="tertiary">Tools</Text>
+							<NuxtLink to="https://terminal.celenium.io">
+								<Flex align="center" gap="6">
+									<Text size="13" weight="500" color="secondary" :class="$style.link_text">Terminal</Text>
+									<Icon name="arrow-narrow-up-right-circle" size="12" color="tertiary" />
+								</Flex>
+							</NuxtLink>
+							<NuxtLink to="/faucet">
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Faucet</Text>
+							</NuxtLink>
 							<NuxtLink to="/blobstream">
-								<Text size="13" weight="500" color="secondary">Blobstream</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Blobstream</Text>
 							</NuxtLink>
 							<NuxtLink to="/calculators/savings">
-								<Text size="13" weight="500" color="secondary">Cost Savings</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Cost Savings</Text>
 							</NuxtLink>
 							<NuxtLink to="/gas">
-								<Text size="13" weight="500" color="secondary">Gas Tracker</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Gas Tracker</Text>
 							</NuxtLink>
 							<NuxtLink to="/bookmarks">
-								<Text size="13" weight="500" color="secondary">Bookmarks</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Bookmarks</Text>
 							</NuxtLink>
 						</Flex>
 
 						<Flex direction="column" gap="12">
 							<Text size="13" weight="500" color="tertiary">Resources</Text>
 							<NuxtLink to="https://api-plans.celenium.io" target="_blank">
-								<Text size="13" weight="500" color="secondary">API</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">API</Text>
 							</NuxtLink>
 							<NuxtLink to="https://docs.celenium.io" target="_blank">
-								<Text size="13" weight="500" color="secondary">Documentation</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Documentation</Text>
 							</NuxtLink>
 							<NuxtLink to="https://hubble.celenium.io" target="_blank">
-								<Text size="13" weight="500" color="secondary">Hubble</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Hubble</Text>
 							</NuxtLink>
 						</Flex>
 					</Flex>
@@ -300,6 +309,14 @@ const handleChangeTheme = (target) => {
 	padding: 0 20px;
 }
 
+.link_text {
+	transition: all 0.2s ease;
+
+	&:hover {
+		color: var(--txt-primary);
+	}
+}
+
 @media (max-width: 1300px) {
 	.container {
 		max-width: 1030px;
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
deleted file mode 100644
index aadf51fb..00000000
--- a/components/TheHeader.vue
+++ /dev/null
@@ -1,382 +0,0 @@
-<script setup>
-/**
- * Composable
- */
-import { useOutside } from "@/composables/outside"
-
-/** Services */
-import { isMac, getNetworkName } from "@/services/utils/general"
-
-/** UI */
-import { Dropdown, DropdownItem, DropdownTitle } from "@/components/ui/Dropdown"
-import Tooltip from "@/components/ui/Tooltip.vue"
-import Button from "@/components/ui/Button.vue"
-import Kbd from "@/components/ui/Kbd.vue"
-
-/** Store */
-import { useAppStore } from "@/store/app"
-const appStore = useAppStore()
-
-const route = useRoute()
-
-let removeOutside = null
-const headerEl = ref(null)
-const showPopup = ref(false)
-
-const head = computed(() => appStore.lastHead)
-
-watch(
-	() => showPopup.value,
-	() => {
-		if (showPopup.value === true) {
-			nextTick(() => {
-				removeOutside = useOutside(headerEl.value.wrapper, () => {
-					showPopup.value = false
-				})
-			})
-		} else {
-			removeOutside()
-		}
-	},
-)
-
-const isActive = (link) => {
-	const splittedPath = route.path.split("/").filter(Boolean)
-
-	switch (link) {
-		case "index":
-			return route.path === "/"
-
-		case "txs":
-			return splittedPath.includes("tx") || splittedPath.includes("txs")
-
-		case "blocks":
-			return splittedPath.includes("block") || splittedPath.includes("blocks")
-
-		case "namespaces":
-			return splittedPath.includes("namespace") || splittedPath.includes("namespaces")
-
-		case "rollups":
-			return splittedPath.includes("rollup") || splittedPath.includes("rollups")
-
-		case "validators":
-			return splittedPath.includes("validator") || splittedPath.includes("validators")
-
-		default:
-			break
-	}
-}
-
-const handleNavigate = (url) => {
-	window.location.replace(url)
-}
-</script>
-
-<template>
-	<Flex tag="header" ref="headerEl" justify="center" wide :class="$style.wrapper">
-		<Flex align="center" justify="between" wide :class="$style.container">
-			<Flex align="center" gap="8">
-				<Flex @click="showPopup = !showPopup" align="center" gap="8" :class="[$style.button, $style.menu]">
-					<Icon :name="!showPopup ? 'menu' : 'close'" size="16" color="secondary" />
-				</Flex>
-
-				<NuxtLink to="/">
-					<Flex align="center" gap="12">
-						<Icon name="logo" size="18" color="white" :class="$style.logo" />
-
-						<svg width="96" height="16" viewBox="0 0 96 16" xmlns="http://www.w3.org/2000/svg" :class="$style.logo_name">
-							<path
-								d="M14.22 10.46C14.0867 11.46 13.7333 12.32 13.16 13.04C12.5867 13.7467 11.82 14.2933 10.86 14.68C9.91333 15.0533 8.80667 15.24 7.54 15.24C6.44667 15.24 5.44 15.0933 4.52 14.8C3.61333 14.5067 2.82 14.08 2.14 13.52C1.47333 12.9467 0.953333 12.2467 0.58 11.42C0.22 10.58 0.04 9.62 0.04 8.54C0.04 7.44667 0.22 6.48667 0.58 5.66C0.953333 4.83333 1.47333 4.13333 2.14 3.56C2.82 2.97333 3.61333 2.53333 4.52 2.24C5.44 1.94667 6.44667 1.8 7.54 1.8C8.82 1.8 9.93333 1.99333 10.88 2.38C11.84 2.76667 12.6067 3.32 13.18 4.04C13.7533 4.76 14.1 5.62667 14.22 6.64H12.02C11.8333 6.04 11.54 5.53333 11.14 5.12C10.74 4.69333 10.2333 4.36667 9.62 4.14C9.02 3.91333 8.32667 3.8 7.54 3.8C6.55333 3.8 5.66667 3.98667 4.88 4.36C4.09333 4.72 3.47333 5.25333 3.02 5.96C2.58 6.65333 2.36 7.51333 2.36 8.54C2.36 9.55333 2.58 10.4133 3.02 11.12C3.47333 11.8133 4.09333 12.34 4.88 12.7C5.66667 13.06 6.55333 13.24 7.54 13.24C8.32667 13.24 9.02 13.1333 9.62 12.92C10.22 12.6933 10.72 12.3733 11.12 11.96C11.52 11.5333 11.8133 11.0333 12 10.46H14.22ZM24.8295 11.72H26.9695C26.8629 12.4 26.5962 13.0067 26.1695 13.54C25.7562 14.06 25.1895 14.4733 24.4695 14.78C23.7495 15.0733 22.8895 15.22 21.8895 15.22C20.7562 15.22 19.7429 15.0133 18.8495 14.6C17.9562 14.1733 17.2562 13.5733 16.7495 12.8C16.2429 12.0267 15.9895 11.1067 15.9895 10.04C15.9895 8.98667 16.2362 8.06667 16.7295 7.28C17.2229 6.49333 17.9029 5.88667 18.7695 5.46C19.6495 5.03333 20.6629 4.82 21.8095 4.82C22.9962 4.82 23.9829 5.03333 24.7695 5.46C25.5695 5.87333 26.1629 6.5 26.5495 7.34C26.9362 8.16667 27.0962 9.21333 27.0295 10.48H18.2495C18.3162 11.04 18.4962 11.5467 18.7895 12C19.0962 12.44 19.5095 12.7867 20.0295 13.04C20.5495 13.28 21.1562 13.4 21.8495 13.4C22.6229 13.4 23.2695 13.2467 23.7895 12.94C24.3229 12.6333 24.6695 12.2267 24.8295 11.72ZM21.7495 6.62C20.8429 6.62 20.0962 6.84667 19.5095 7.3C18.9229 7.74 18.5429 8.30667 18.3695 9H24.7895C24.7362 8.25333 24.4362 7.67333 23.8895 7.26C23.3429 6.83333 22.6295 6.62 21.7495 6.62ZM29.2095 1.04H31.4295V15H29.2095V1.04ZM42.4467 11.72H44.5867C44.4801 12.4 44.2134 13.0067 43.7867 13.54C43.3734 14.06 42.8067 14.4733 42.0867 14.78C41.3667 15.0733 40.5067 15.22 39.5067 15.22C38.3734 15.22 37.3601 15.0133 36.4667 14.6C35.5734 14.1733 34.8734 13.5733 34.3667 12.8C33.8601 12.0267 33.6067 11.1067 33.6067 10.04C33.6067 8.98667 33.8534 8.06667 34.3467 7.28C34.8401 6.49333 35.5201 5.88667 36.3867 5.46C37.2667 5.03333 38.2801 4.82 39.4267 4.82C40.6134 4.82 41.6001 5.03333 42.3867 5.46C43.1867 5.87333 43.7801 6.5 44.1667 7.34C44.5534 8.16667 44.7134 9.21333 44.6467 10.48H35.8667C35.9334 11.04 36.1134 11.5467 36.4067 12C36.7134 12.44 37.1267 12.7867 37.6467 13.04C38.1667 13.28 38.7734 13.4 39.4667 13.4C40.2401 13.4 40.8867 13.2467 41.4067 12.94C41.9401 12.6333 42.2867 12.2267 42.4467 11.72ZM39.3667 6.62C38.4601 6.62 37.7134 6.84667 37.1267 7.3C36.5401 7.74 36.1601 8.30667 35.9867 9H42.4067C42.3534 8.25333 42.0534 7.67333 41.5067 7.26C40.9601 6.83333 40.2467 6.62 39.3667 6.62ZM46.6267 5.04H48.8467V15H46.6267V5.04ZM53.0467 4.82C53.6201 4.82 54.1467 4.9 54.6267 5.06C55.1201 5.22 55.5401 5.46667 55.8867 5.8C56.2467 6.12 56.5201 6.52 56.7067 7C56.9067 7.48 57.0067 8.04667 57.0067 8.7V15H54.7867V9.14C54.7867 8.32667 54.5867 7.72667 54.1867 7.34C53.8001 6.94 53.1867 6.74 52.3467 6.74C51.7067 6.74 51.1201 6.88 50.5867 7.16C50.0667 7.42667 49.6401 7.78 49.3067 8.22C48.9734 8.64667 48.7801 9.12 48.7267 9.64L48.7067 8.56C48.7734 8.06667 48.9201 7.6 49.1467 7.16C49.3734 6.70667 49.6734 6.30667 50.0467 5.96C50.4201 5.6 50.8601 5.32 51.3667 5.12C51.8734 4.92 52.4334 4.82 53.0467 4.82ZM62.0588 0.819999V2.96H59.3988V0.819999H62.0588ZM59.5988 5.04H61.8388V15H59.5988V5.04ZM74.8778 15H72.6578V5.04H74.8778V15ZM72.7778 10.26L72.7978 10.9C72.7711 11.0733 72.7111 11.3333 72.6178 11.68C72.5378 12.0267 72.3978 12.4067 72.1978 12.82C72.0111 13.22 71.7578 13.6067 71.4378 13.98C71.1311 14.34 70.7445 14.64 70.2778 14.88C69.8111 15.1067 69.2445 15.22 68.5778 15.22C68.0978 15.22 67.6111 15.1533 67.1178 15.02C66.6378 14.9 66.1978 14.6933 65.7978 14.4C65.4111 14.1067 65.0978 13.7067 64.8578 13.2C64.6178 12.6933 64.4978 12.0533 64.4978 11.28V5.04H66.7178V10.86C66.7178 11.4867 66.8178 11.98 67.0178 12.34C67.2311 12.6867 67.5245 12.9333 67.8978 13.08C68.2711 13.2267 68.7045 13.3 69.1978 13.3C69.9045 13.3 70.5045 13.14 70.9978 12.82C71.4911 12.5 71.8845 12.1067 72.1778 11.64C72.4845 11.16 72.6845 10.7 72.7778 10.26ZM77.3298 5.04H79.5498V15H77.3298V5.04ZM83.7498 4.82C84.3232 4.82 84.8498 4.9 85.3298 5.06C85.8232 5.22 86.2432 5.46667 86.5898 5.8C86.9498 6.12 87.2232 6.52 87.4098 7C87.6098 7.48 87.7098 8.04667 87.7098 8.7V15H85.4898V9.14C85.4898 8.32667 85.2898 7.72667 84.8898 7.34C84.5032 6.94 83.8898 6.74 83.0498 6.74C82.4098 6.74 81.8232 6.88 81.2898 7.16C80.7698 7.42667 80.3432 7.78 80.0098 8.22C79.6765 8.64667 79.4832 9.12 79.4298 9.64L79.4098 8.56C79.4765 8.06667 79.6232 7.6 79.8498 7.16C80.0765 6.70667 80.3765 6.30667 80.7498 5.96C81.1232 5.6 81.5632 5.32 82.0698 5.12C82.5765 4.92 83.1365 4.82 83.7498 4.82ZM91.6898 4.82C92.2765 4.82 92.8098 4.9 93.2898 5.06C93.7698 5.22 94.1832 5.46667 94.5298 5.8C94.8898 6.12 95.1698 6.52 95.3698 7C95.5698 7.48 95.6698 8.04667 95.6698 8.7V15H93.4298V9.14C93.4298 8.32667 93.2298 7.72667 92.8298 7.34C92.4432 6.94 91.8298 6.74 90.9898 6.74C90.3498 6.74 89.7632 6.88 89.2298 7.16C88.7098 7.42667 88.2832 7.78 87.9498 8.22C87.6298 8.64667 87.4432 9.12 87.3898 9.64L87.3498 8.52C87.4165 8.04 87.5698 7.58 87.8098 7.14C88.0498 6.68667 88.3565 6.28667 88.7298 5.94C89.1032 5.59333 89.5365 5.32 90.0298 5.12C90.5365 4.92 91.0898 4.82 91.6898 4.82Z"
-							/>
-						</svg>
-					</Flex>
-				</NuxtLink>
-			</Flex>
-
-			<Flex justify="center" align="center" wrap="wrap" gap="8" :class="$style.links">
-				<NuxtLink to="/" :class="[$style.link, isActive('index') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Explore</Text>
-				</NuxtLink>
-
-				<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Rollups</Text>
-				</NuxtLink>
-
-				<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Transactions</Text>
-				</NuxtLink>
-
-				<NuxtLink to="/blocks" :class="[$style.link, isActive('blocks') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Blocks</Text>
-				</NuxtLink>
-
-				<NuxtLink to="/validators" :class="[$style.link, isActive('validators') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Validators</Text>
-				</NuxtLink>
-
-				<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
-					<Text size="13" weight="600" color="tertiary">Namespaces</Text>
-				</NuxtLink>
-			</Flex>
-
-			<Flex align="center" gap="8">
-				<Dropdown>
-					<Tooltip v-if="head" position="end">
-						<Flex align="center" gap="8" :class="[$style.network]">
-							<div :class="[$style.status, head.synced ? $style.green : $style.red]" />
-							<Text size="12" weight="600" color="secondary" :class="$style.name"> {{ getNetworkName() }} </Text>
-						</Flex>
-
-						<template #content>
-							<Flex align="center" direction="column" gap="4">
-								<Flex align="center" justify="start" wide>
-									<Text size="12" color="primary"> {{ head.synced ? "Synced" : "Not Synced" }} </Text>
-								</Flex>
-
-								<Text size="12" color="tertiary"> {{ head.chain_id }} </Text>
-							</Flex>
-						</template>
-					</Tooltip>
-
-					<template #popup>
-						<DropdownTitle>Network</DropdownTitle>
-						<DropdownItem @click="handleNavigate('https://celenium.io')">Mainnet</DropdownItem>
-						<DropdownItem @click="handleNavigate('https://mocha-4.celenium.io')">Mocha-4</DropdownItem>
-						<DropdownItem @click="handleNavigate('https://arabica.celenium.io')">Arabica</DropdownItem>
-					</template>
-				</Dropdown>
-
-				<Tooltip position="end" delay="250">
-					<Button @click="appStore.showCmd = true" type="secondary" size="small">
-						<Icon name="search" size="16" color="secondary" />
-					</Button>
-
-					<template #content>
-						<Flex align="center" gap="8">
-							Explore Celestia Blockchain
-							<Flex align="center" gap="4">
-								<Kbd>{{ isMac ? "Cmd" : "Ctrl" }}</Kbd>
-								<Kbd>K</Kbd>
-							</Flex>
-						</Flex>
-					</template>
-				</Tooltip>
-
-				<Tooltip position="end" delay="250">
-					<NuxtLink to="/bookmarks">
-						<Button type="secondary" size="mini">
-							<Icon name="bookmark" size="16" color="secondary" />
-						</Button>
-					</NuxtLink>
-
-					<template #content>
-						<Flex align="center" gap="8"> Open My Bookmarks </Flex>
-					</template>
-				</Tooltip>
-
-				<Connection :class="$style.connection_btn" />
-			</Flex>
-		</Flex>
-
-		<Flex v-if="showPopup" @click="showPopup = false" direction="column" gap="8" :class="$style.menu_popup">
-			<NuxtLink to="/" :class="[$style.link, isActive('index') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Explore</Text>
-			</NuxtLink>
-
-			<NuxtLink to="/rollups" :class="[$style.link, isActive('rollups') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Rollups</Text>
-			</NuxtLink>
-
-			<NuxtLink to="/txs" :class="[$style.link, isActive('txs') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Transactions</Text>
-			</NuxtLink>
-
-			<NuxtLink to="/blocks" :class="[$style.link, isActive('blocks') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Blocks</Text>
-			</NuxtLink>
-
-			<NuxtLink to="/validators" :class="[$style.link, isActive('validators') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Validators</Text>
-			</NuxtLink>
-
-			<NuxtLink to="/namespaces" :class="[$style.link, isActive('namespaces') && $style.active]">
-				<Text size="13" weight="600" color="tertiary">Namespaces</Text>
-			</NuxtLink>
-		</Flex>
-	</Flex>
-</template>
-
-<style module>
-.wrapper {
-	position: relative;
-
-	height: 52px;
-}
-
-.container {
-	max-width: var(--base-width);
-
-	margin: 0 24px;
-}
-
-.logo {
-	box-sizing: content-box;
-	background: linear-gradient(225deg, #1e804d, #093a21);
-	box-shadow: inset 0 0 0 1px var(--op-10);
-	cursor: pointer;
-	border-radius: 8px;
-
-	padding: 6px;
-}
-
-.logo_name {
-	fill: var(--logo-name);
-}
-
-.link {
-	display: flex;
-	align-items: center;
-
-	height: 26px;
-
-	background: transparent;
-	border-radius: 50px;
-
-	padding: 0 10px;
-
-	transition: all 0.1s ease;
-
-	&:hover {
-		background: var(--op-5);
-
-		& span {
-			color: var(--txt-secondary);
-		}
-	}
-
-	& span {
-		transition: all 0.1s ease;
-	}
-
-	&.active {
-		background: rgba(255, 255, 255, 90%);
-
-		&:hover {
-			background: rgba(255, 255, 255, 90%);
-
-			& span {
-				color: var(--txt-black);
-			}
-		}
-
-		& span {
-			color: var(--txt-black);
-		}
-	}
-}
-
-.menu_popup {
-	position: absolute;
-	top: 52px;
-	left: 0;
-	right: 0;
-
-	display: none;
-
-	background: var(--app-background);
-	border-top: 2px solid var(--op-5);
-	border-bottom: 2px solid var(--op-5);
-
-	padding: 16px;
-
-	z-index: 100;
-}
-
-.button {
-	height: 28px;
-
-	border-radius: 6px;
-	background: var(--op-8);
-	cursor: pointer;
-
-	padding: 0 8px;
-
-	transition: all 0.2s ease;
-
-	&:hover {
-		background: var(--op-8);
-	}
-
-	&:active {
-		background: var(--op-10);
-	}
-
-	&.menu {
-		display: none;
-	}
-}
-
-.status {
-	width: 5px;
-	height: 5px;
-	border-radius: 50px;
-
-	&.green {
-		background: var(--green);
-
-		box-shadow: 0 0 6px var(--green);
-	}
-
-	&.red {
-		background: var(--red);
-
-		box-shadow: 0 0 6px var(--red);
-	}
-}
-
-.network {
-	height: 28px;
-
-	border-radius: 8px;
-	background: var(--op-5);
-	box-shadow: inset 0 0 0 1px var(--op-5);
-
-	padding: 0 12px;
-
-	&:hover {
-		.name {
-			color: var(--txt-primary);
-		}
-	}
-}
-
-@media (max-width: 850px) {
-	.links {
-		display: none;
-	}
-
-	.button.menu {
-		display: flex;
-	}
-
-	.menu_popup {
-		display: flex;
-	}
-}
-
-@media (max-width: 500px) {
-	.container {
-		margin: 0 12px;
-	}
-
-	.connection_btn {
-		display: none;
-	}
-}
-
-@media (max-width: 400px) {
-	.logo_name {
-		display: none;
-	}
-}
-</style>
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index ee8c8c3d..31fb1411 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -25,11 +25,11 @@ import { capitilize } from "@/services/utils/strings"
 import { search } from "@/services/api/search"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
@@ -292,6 +292,15 @@ const rawNavigationActions = [
 			router.push("/calculators/savings")
 		},
 	},
+	{
+		type: "callback",
+		icon: "arrow-narrow-right",
+		title: "Go to Terminal",
+		runText: "Open Terminal",
+		callback: () => {
+			location.href = "https://terminal.celenium.io"
+		},
+	},
 	{
 		type: "callback",
 		icon: "arrow-narrow-right",
diff --git a/components/cmd/actions.js b/components/cmd/actions.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/components/cmd/custom/FeeCalculator.vue b/components/cmd/custom/FeeCalculator.vue
index 8564c4da..75f42e12 100644
--- a/components/cmd/custom/FeeCalculator.vue
+++ b/components/cmd/custom/FeeCalculator.vue
@@ -3,7 +3,7 @@
 import { comma } from "@/services/utils"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const props = defineProps({
diff --git a/components/data/BlocksTimeline/BlocksTimelineTable.vue b/components/data/BlocksTimeline/BlocksTimelineTable.vue
index b7a1ba1c..87b44de5 100644
--- a/components/data/BlocksTimeline/BlocksTimelineTable.vue
+++ b/components/data/BlocksTimeline/BlocksTimelineTable.vue
@@ -8,15 +8,15 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import AmountInCurrency from "@/components/AmountInCurrency.vue"
 
 /** Services */
-import { comma, formatBytes, getNamespaceID, shortHex, space, tia } from "@/services/utils"
+import { comma, formatBytes, shortHex, space } from "@/services/utils"
 
 /** API */
 import { fetchBlockBlobs } from "@/services/api/block"
 import { fetchTransactionsByBlock } from "@/services/api/tx"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const notificationsStore = useNotificationsStore()
 
@@ -62,6 +62,9 @@ const handlePause = () => {
 	isPaused.value = !isPaused.value
 }
 
+const showSidebar = ref(false)
+const handleToggleSidebar = () => (showSidebar.value = !showSidebar.value)
+
 watch(
 	() => isPaused.value,
 	() => {
@@ -106,9 +109,8 @@ if (Object.keys(lastHead.value).length !== 0 && !lastHead?.value.synced) {
 watch(
 	() => preview.block,
 	async () => {
-		if (preview.block.stats.tx_count) {
+		if (preview.block.stats.tx_count && showSidebar.value) {
 			if (preview.block.stats.blobs_size) preview.isLoadingNamespaces = true
-
 			getTransactionsByBlock()
 		}
 	},
@@ -123,13 +125,6 @@ watch(
 		}
 
 		const data = await fetchBlockBlobs({ height: preview.block.height, limit: 3 })
-		// let namespaces = []
-
-		// data.forEach(blob => {
-		// 	namespaces.push(blob.namespace)
-		// });
-
-		// preview.namespaces = Array.from(new Map(namespaces.map(item => [item.id, item])).values());
 
 		preview.blobs = data
 		preview.isLoadingNamespaces = false
@@ -193,6 +188,14 @@ watch(
 						</Flex>
 					</template>
 				</Tooltip>
+
+				<Tooltip position="end">
+					<Button @click="handleToggleSidebar" type="tertiary" size="mini">
+						<Icon name="sidebar" size="14" color="secondary" :class="[$style.sidebar_icon, showSidebar && $style.rotate]" />
+					</Button>
+
+					<template #content> {{ showSidebar ? "Hide" : "Show" }} sidebar </template>
+				</Tooltip>
 			</Flex>
 		</Flex>
 
@@ -253,7 +256,13 @@ watch(
 									<Tooltip delay="500">
 										<template #default>
 											<Flex direction="column" gap="4">
-												<Text size="12" height="120" weight="600" color="primary" :class="$style.proposer_moniker">
+												<Text
+													size="12"
+													height="120"
+													weight="600"
+													color="primary"
+													:class="[$style.proposer_moniker, showSidebar && $style.fixed]"
+												>
 													{{ block.proposer.moniker }}
 												</Text>
 
@@ -308,7 +317,10 @@ watch(
 								</td>
 								<td>
 									<Flex align="center" gap="4">
-										<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 2 }" :styles="{ amount: { size: '13' } }" />
+										<AmountInCurrency
+											:amount="{ value: block.stats.fee, decimal: 2 }"
+											:styles="{ amount: { size: '13' } }"
+										/>
 									</Flex>
 								</td>
 							</tr>
@@ -322,7 +334,7 @@ watch(
 				</Button>
 			</Flex>
 
-			<Flex direction="column" :class="[$style.preview]">
+			<Flex v-if="showSidebar" direction="column" :class="[$style.preview]">
 				<Flex wide direction="column" gap="12" :class="$style.top">
 					<Flex align="center" justify="between" wide>
 						<Flex align="center" gap="6">
@@ -377,9 +389,7 @@ watch(
 								</NuxtLink>
 
 								<Flex align="center" gap="6">
-									<Text size="12" weight="600" color="tertiary">{{
-										shortHex(preview.block.proposer.cons_address)
-									}}</Text>
+									<Text size="12" weight="600" color="tertiary">{{ shortHex(preview.block.proposer.cons_address) }}</Text>
 
 									<CopyButton :text="preview.block.proposer.cons_address" size="10" />
 								</Flex>
@@ -460,7 +470,6 @@ watch(
 						</Text>
 					</Flex>
 
-
 					<Flex direction="column" gap="12">
 						<Flex align="center" justify="between">
 							<Text size="12" weight="600" color="tertiary">Blobs</Text>
@@ -480,13 +489,24 @@ watch(
 							Loading blobs..
 						</Text>
 						<Flex v-else-if="preview.block.stats.blobs_count" direction="column" gap="8">
-							<NuxtLink v-for="b in preview.blobs" :to="`/blob?commitment=${b.commitment}&hash=${b.namespace.hash}&height=${b.height}`" target="_blank">
+							<NuxtLink
+								v-for="b in preview.blobs"
+								:to="`/blob?commitment=${b.commitment}&hash=${b.namespace.hash}&height=${b.height}`"
+								target="_blank"
+							>
 								<Outline wide height="32" padding="8" radius="6">
 									<Flex align="center" justify="between" wide>
 										<Flex align="center" gap="8">
 											<Icon name="blob" size="12" color="secondary" />
 
-											<Text size="13" weight="600" color="primary" mono class="overflow_ellipsis" style="max-width: 250px">
+											<Text
+												size="13"
+												weight="600"
+												color="primary"
+												mono
+												class="overflow_ellipsis"
+												style="max-width: 250px"
+											>
 												{{ shortHex(b.commitment) }}
 											</Text>
 										</Flex>
@@ -496,9 +516,7 @@ watch(
 								</Outline>
 							</NuxtLink>
 						</Flex>
-						<Text v-else size="12" weight="600" color="tertiary" align="center" :class="$style.empty_state">
-							No blobs
-						</Text>
+						<Text v-else size="12" weight="600" color="tertiary" align="center" :class="$style.empty_state"> No blobs </Text>
 					</Flex>
 
 					<!-- <Flex direction="column" gap="12">
@@ -558,7 +576,10 @@ watch(
 						</Flex>
 						<Flex align="center" justify="between">
 							<Text size="12" weight="600" color="tertiary"> Total Fees </Text>
-							<AmountInCurrency :amount="{ value: preview.block.stats.fee, decimal: 6 }" :styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }" />
+							<AmountInCurrency
+								:amount="{ value: preview.block.stats.fee, decimal: 6 }"
+								:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
+							/>
 						</Flex>
 					</Flex>
 				</Flex>
@@ -621,9 +642,11 @@ watch(
 }
 
 .table {
+	width: 100%;
+	min-width: 0;
+
 	border-radius: 4px 4px 4px 8px;
 	background: var(--card-background);
-	max-width: 604px;
 
 	& table {
 		width: 100%;
@@ -679,7 +702,7 @@ watch(
 
 			white-space: nowrap;
 			overflow: hidden;
-      		text-overflow: ellipsis;
+			text-overflow: ellipsis;
 
 			border-right: 2px solid transparent;
 
@@ -746,10 +769,12 @@ watch(
 }
 
 .proposer_moniker {
-	max-width: 150px;
-
 	text-overflow: ellipsis;
 	overflow: hidden;
+
+	&.fixed {
+		max-width: 150px;
+	}
 }
 
 .empty_state {
@@ -772,6 +797,14 @@ watch(
 	padding: 4px 6px;
 }
 
+.sidebar_icon {
+	transform: rotate(180deg);
+
+	&.rotate {
+		transform: rotate(0deg);
+	}
+}
+
 @media (max-width: 1024px) {
 	.content {
 		flex-direction: column-reverse;
@@ -789,6 +822,14 @@ watch(
 		flex: 1;
 		border-radius: 4px 4px 8px 8px;
 	}
+
+	.sidebar_icon {
+		transform: rotate(90deg);
+
+		&.rotate {
+			transform: rotate(270deg);
+		}
+	}
 }
 
 @media (max-width: 500px) {
diff --git a/components/data/LatestPFBTable.vue b/components/data/LatestPFBTable.vue
index 5abae02d..73aa1441 100644
--- a/components/data/LatestPFBTable.vue
+++ b/components/data/LatestPFBTable.vue
@@ -1,7 +1,4 @@
 <script setup>
-/** Vendor */
-import { DateTime } from "luxon"
-
 /** UI */
 import Button from "@/components/ui/Button.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
@@ -9,8 +6,7 @@ import Spinner from "@/components/ui/Spinner.vue"
 import AmountInCurrency from "@/components/AmountInCurrency.vue"
 
 /** Services */
-import { useServerURL } from "@/services/config"
-import { comma, space, splitAddress, tia } from "@/services/utils"
+import { comma, space } from "@/services/utils"
 
 /** API */
 import { fetchLatestPFBs } from "@/services/api/tx"
@@ -23,7 +19,6 @@ const pfbs = ref([])
 const { data } = await fetchLatestPFBs()
 pfbs.value = data.value
 isLoading.value = false
-
 </script>
 
 <template>
@@ -108,7 +103,7 @@ isLoading.value = false
 								<NuxtLink :to="`/tx/${pfb.hash}`">
 									<Flex align="center" justify="center">
 										<Text size="12" weight="600" color="primary" class="table_column_alias">
-											{{ $getDisplayName('addresses', pfb.signers[0].hash) }}
+											{{ $getDisplayName("addresses", pfb.signers ? pfb.signers[0].hash : "") }}
 										</Text>
 									</Flex>
 								</NuxtLink>
@@ -155,7 +150,6 @@ isLoading.value = false
 }
 
 .pfb_body {
-	max-width: 500px;
 	border-radius: 4px 4px 8px 8px;
 	background: var(--card-background);
 
diff --git a/components/data/RecentNamespacesTable.vue b/components/data/RecentNamespacesTable.vue
index 88f92f7a..cb0939ed 100644
--- a/components/data/RecentNamespacesTable.vue
+++ b/components/data/RecentNamespacesTable.vue
@@ -8,7 +8,6 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import Spinner from "@/components/ui/Spinner.vue"
 
 /** Services */
-import { useServerURL } from "@/services/config"
 import { comma, space, formatBytes, getNamespaceID } from "@/services/utils"
 
 /** API */
@@ -103,7 +102,7 @@ const handleSort = async (by) => {
 											<Flex direction="column" gap="4">
 												<Flex align="center" gap="8">
 													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-														{{ $getDisplayName('namespaces', ns.namespace_id) }}
+														{{ $getDisplayName("namespaces", ns.namespace_id) }}
 													</Text>
 
 													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
diff --git a/components/modals/AwaitingModal.vue b/components/modals/AwaitingModal.vue
index b8546ea1..c9548049 100644
--- a/components/modals/AwaitingModal.vue
+++ b/components/modals/AwaitingModal.vue
@@ -19,9 +19,9 @@ import { fetchTxByHash } from "@/services/api/tx"
 /**
  * Store
  */
-import { useAppStore } from "@/store/app"
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const appStore = useAppStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
@@ -39,34 +39,34 @@ const tx = ref()
 const details = computed(() => {
 	let detailsRes = []
 	switch (cacheStore.tx.type) {
-		case 'send':
-			detailsRes.processing = 'Sending...'
-			detailsRes.success = 'Successfuly sent'
-			detailsRes.destination = 'Destination Wallet'
-			detailsRes.icon = 'address'
+		case "send":
+			detailsRes.processing = "Sending..."
+			detailsRes.success = "Successfuly sent"
+			detailsRes.destination = "Destination Wallet"
+			detailsRes.icon = "address"
 
 			return detailsRes
-	
-		case 'pfb':
-			detailsRes.processing = 'Submiting Blob...'
-			detailsRes.success = 'Successfuly submited'
-			detailsRes.destination = 'Namespace'
-			detailsRes.icon = 'namespace'
+
+		case "pfb":
+			detailsRes.processing = "Submiting Blob..."
+			detailsRes.success = "Successfuly submited"
+			detailsRes.destination = "Namespace"
+			detailsRes.icon = "namespace"
 
 			return detailsRes
 
-		case 'staking':
-			detailsRes.processing = 'Sending...'
-			detailsRes.success = 'Successfuly delegated'
-			detailsRes.destination = 'Validator'
-			detailsRes.icon = 'validator'
+		case "staking":
+			detailsRes.processing = "Sending..."
+			detailsRes.success = "Successfuly delegated"
+			detailsRes.destination = "Validator"
+			detailsRes.icon = "validator"
 
 			return detailsRes
 
 		default:
-			detailsRes.processing = 'Processing...'
-			detailsRes.success = 'Successfuly executed tx'
-			detailsRes.destination = 'Destination address'
+			detailsRes.processing = "Processing..."
+			detailsRes.success = "Successfuly executed tx"
+			detailsRes.destination = "Destination address"
 
 			return detailsRes
 	}
diff --git a/components/modals/BlobModal.vue b/components/modals/BlobModal.vue
index 7a5fc620..1cf392be 100644
--- a/components/modals/BlobModal.vue
+++ b/components/modals/BlobModal.vue
@@ -11,7 +11,7 @@ import { comma, formatBytes, getNamespaceID, shortHash, space, strToHex } from "
 import { fetchBlobBlockscoutData, fetchBlobByMetadata } from "@/services/api/namespace"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
@@ -73,8 +73,6 @@ const getBlobMetadata = async () => {
 	} else {
 		notFound.value = true
 	}
-
-	// isLoading.value = false
 }
 
 watch(
@@ -88,7 +86,6 @@ watch(
 
 			await getBlobMetadata()
 
-			
 			const { data } = await fetchBlobBlockscoutData({
 				height: cacheStore.selectedBlob.height,
 				namespace: cacheStore.selectedBlob.hash,
@@ -381,7 +378,6 @@ const handlePreviewContent = () => {
 						<Icon name="arrow-narrow-up-right" size="12" color="tertiary" />
 					</Button>
 
-
 					<Button @click="handleDownload" type="secondary" size="small" :disabled="isLoading">
 						<Icon name="download" size="14" color="secondary" />
 
diff --git a/components/modals/ChangeBlobModal.vue b/components/modals/ChangeBlobModal.vue
index a99c2b37..0b4cc4b4 100644
--- a/components/modals/ChangeBlobModal.vue
+++ b/components/modals/ChangeBlobModal.vue
@@ -5,7 +5,7 @@ import Input from "@/components/ui/Input.vue"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
diff --git a/components/modals/ChartModal.vue b/components/modals/ChartModal.vue
index 0085afff..fe8c4a14 100644
--- a/components/modals/ChartModal.vue
+++ b/components/modals/ChartModal.vue
@@ -14,7 +14,7 @@ import LineChart from "@/components/modules/stats/LineChart.vue"
 import BarplotStakedChart from "@/components/modules/stats/BarplotStakedChart.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
@@ -41,7 +41,7 @@ watch(
 
 <template>
 	<Modal :show="show" @onClose="emit('onClose')" fullscreen disable-trap>
-        <LineChart v-if="chartView === 'line'" :series="series" />
+		<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>
diff --git a/components/modals/CommitmentModal.vue b/components/modals/CommitmentModal.vue
index d40c60bd..dca1a4d0 100644
--- a/components/modals/CommitmentModal.vue
+++ b/components/modals/CommitmentModal.vue
@@ -11,7 +11,7 @@ import Spinner from "@/components/ui/Spinner.vue"
 import { capitilize, comma, shortHex } from "@/services/utils"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
@@ -29,7 +29,6 @@ watch(
 		}
 	},
 )
-
 </script>
 
 <template>
@@ -87,7 +86,7 @@ watch(
 
 			<Flex align="center">
 				<Text size="12" weight="600" color="secondary"> {{ capitilize(commitment.contract.network) }} </Text>
-			</Flex> 
+			</Flex>
 
 			<Flex direction="column" align="center" gap="12">
 				<Flex align="center" justify="between" wide :class="$style.metadata">
@@ -241,7 +240,6 @@ watch(
 	margin: 0 -16px;
 }
 
-
 @media (max-width: 550px) {
 	.metadata {
 		flex-direction: column;
diff --git a/components/modals/ConfirmationModal.vue b/components/modals/ConfirmationModal.vue
index b1963ec2..1b14d3e9 100644
--- a/components/modals/ConfirmationModal.vue
+++ b/components/modals/ConfirmationModal.vue
@@ -8,7 +8,7 @@ import Modal from "@/components/ui/Modal.vue"
 /**
  * Store
  */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 defineProps({
diff --git a/components/modals/ConnectModal.vue b/components/modals/ConnectModal.vue
index 6c255820..ebe02ddf 100644
--- a/components/modals/ConnectModal.vue
+++ b/components/modals/ConnectModal.vue
@@ -5,13 +5,13 @@ import Button from "@/components/ui/Button.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Utils */
-import { connect, syncBalance, getAccounts, disconnect } from "~/services/wallet"
+import { connect, syncBalance, getAccounts } from "@/services/wallet"
 import { getNetworkName, isMainnet } from "@/services/utils/general"
 import amp from "@/services/amp"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const notificationsStore = useNotificationsStore()
 
@@ -93,7 +93,7 @@ const handleConnect = async (target) => {
 					<NuxtLink to="/terms-of-use" target="_blank">
 						<Text color="secondary">Terms of Use</Text>
 					</NuxtLink>
-					 and 
+					and
 					<NuxtLink to="/privacy-policy" target="_blank">
 						<Text color="secondary">Privacy Policy</Text>
 					</NuxtLink>
@@ -128,7 +128,13 @@ const handleConnect = async (target) => {
 					</Tooltip>
 
 					<Tooltip wide>
-						<Flex @click="handleConnect('leap')" wide align="center" justify="between" :class="[$style.wallet, !isMainnet() && $style.disabled]">
+						<Flex
+							@click="handleConnect('leap')"
+							wide
+							align="center"
+							justify="between"
+							:class="[$style.wallet, !isMainnet() && $style.disabled]"
+						>
 							<Flex align="center" gap="12">
 								<img src="@/assets/logos/leap.png" />
 								<Text size="14" weight="600" color="primary">Leap Wallet</Text>
@@ -146,8 +152,8 @@ const handleConnect = async (target) => {
 								!isMainnet()
 									? "Temporarily unavailable for test networks."
 									: hasLeap
-										? "Leap is found in your extensions and ready to connect."
-										: "Leap is not found in your extensions, install it."
+									? "Leap is found in your extensions and ready to connect."
+									: "Leap is not found in your extensions, install it."
 							}}
 						</template>
 					</Tooltip>
diff --git a/components/modals/ConstantsModal.vue b/components/modals/ConstantsModal.vue
index cbb9e5f6..5a47bf46 100644
--- a/components/modals/ConstantsModal.vue
+++ b/components/modals/ConstantsModal.vue
@@ -7,7 +7,7 @@ import Input from "@/components/ui/Input.vue"
 import { fetchConstants } from "@/services/api/main"
 
 /** Store */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 const notificationsStore = useNotificationsStore()
 
 const emit = defineEmits(["onClose"])
@@ -143,7 +143,14 @@ const handleCopy = (target) => {
 								<Text size="12" height="140" weight="500" color="tertiary"> {{ DescriptionMap[constant.name] }} </Text>
 							</Flex>
 
-							<Text @click="handleCopy(constant.value)" size="13" weight="600" color="secondary" class="copyable">
+							<Text
+								@click="handleCopy(constant.value)"
+								size="13"
+								weight="600"
+								color="secondary"
+								class="copyable"
+								:class="constant.name === 'allow_messages' && $style.overflow"
+							>
 								{{ constant.value }}
 							</Text>
 						</Flex>
@@ -185,6 +192,12 @@ const handleCopy = (target) => {
 	}
 }
 
+.overflow {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .name.finded {
 	color: var(--green);
 }
diff --git a/components/modals/EditBookmarkAliasModal.vue b/components/modals/EditBookmarkAliasModal.vue
index 3cf13cd8..abb02a5c 100644
--- a/components/modals/EditBookmarkAliasModal.vue
+++ b/components/modals/EditBookmarkAliasModal.vue
@@ -5,9 +5,9 @@ import Input from "@/components/ui/Input.vue"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
+import { useCacheStore } from "@/store/cache.store"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const cacheStore = useCacheStore()
 const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
diff --git a/components/modals/HexSettingsModal.vue b/components/modals/HexSettingsModal.vue
index 04cdd165..51816434 100644
--- a/components/modals/HexSettingsModal.vue
+++ b/components/modals/HexSettingsModal.vue
@@ -6,7 +6,7 @@ import Checkbox from "@/components/ui/Checkbox.vue"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useSettingsStore } from "@/store/settings"
+import { useSettingsStore } from "@/store/settings.store"
 const settingsStore = useSettingsStore()
 
 const emit = defineEmits(["onClose"])
diff --git a/components/modals/ImportBookmarksModal.vue b/components/modals/ImportBookmarksModal.vue
index fea34061..782bce38 100644
--- a/components/modals/ImportBookmarksModal.vue
+++ b/components/modals/ImportBookmarksModal.vue
@@ -5,8 +5,8 @@ import Toggle from "@/components/ui/Toggle.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Store */
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const bookmarksStore = useBookmarksStore()
 const notificationsStore = useNotificationsStore()
 
diff --git a/components/modals/LightNodeModal.vue b/components/modals/LightNodeModal.vue
index 2ce69b82..793c5e0a 100644
--- a/components/modals/LightNodeModal.vue
+++ b/components/modals/LightNodeModal.vue
@@ -16,10 +16,10 @@ import amp from "@/services/amp"
 import { comma, isMobile } from "@/services/utils"
 
 /** Stores */
-import { useAppStore } from "@/store/app.js"
-import { useNodeStore } from "@/store/node.js"
-import { useModalsStore } from "@/store/modals.js"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useNodeStore } from "@/store/node.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const nodeStore = useNodeStore()
 const modalsStore = useModalsStore()
diff --git a/components/modals/LightNodeSettingsModal.vue b/components/modals/LightNodeSettingsModal.vue
index 2d900a87..e2a9c1bb 100644
--- a/components/modals/LightNodeSettingsModal.vue
+++ b/components/modals/LightNodeSettingsModal.vue
@@ -11,8 +11,8 @@ import amp from "@/services/amp"
 import { StatusMap } from "@/services/constants/node.js"
 
 /** Stores */
-import { useNodeStore } from "@/store/node"
-import { useNotificationsStore } from "@/store/notifications"
+import { useNodeStore } from "@/store/node.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const nodeStore = useNodeStore()
 const notificationsStore = useNotificationsStore()
 
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index 7c9cecf1..7f052a04 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -23,7 +23,7 @@ import ConnectModal from "./ConnectModal.vue"
 import RollupRankModal from "./RollupRankModal.vue"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
+import { useModalsStore } from "@/store/modals.store"
 const modalsStore = useModalsStore()
 </script>
 
diff --git a/components/modals/ODSModal.vue b/components/modals/ODSModal.vue
index 3ac7e798..cf47d0b1 100644
--- a/components/modals/ODSModal.vue
+++ b/components/modals/ODSModal.vue
@@ -8,10 +8,10 @@ import Spinner from "@/components/ui/Spinner.vue"
 
 /** Services */
 import amp from "@/services/amp"
-import { capitalizeAndReplace, comma, getNamespaceIDFromBase64, shortHex } from "@/services/utils";
+import { capitalizeAndReplace, comma, getNamespaceIDFromBase64, shortHex } from "@/services/utils"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
@@ -44,67 +44,67 @@ const cellSize = computed(() => {
 			return 4
 	}
 })
-const svgWidth = computed(() => blockODS.value?.width ? cellSize.value * blockODS.value?.width : 0)
-const modalWidth = computed(() => svgWidth.value ? svgWidth.value + 250 : 350)
+const svgWidth = computed(() => (blockODS.value?.width ? cellSize.value * blockODS.value?.width : 0))
+const modalWidth = computed(() => (svgWidth.value ? svgWidth.value + 250 : 350))
 
 function generateCells(item, width) {
-    const cells = []
-
-    for (let y = item.from[0]; y <= item.to[0]; y++) {
-        if (y === item.from[0] && y === item.to[0]) {
-            for (let x = item.from[1]; x <= item.to[1]; x++) {
-                cells.push({ x, y })
-            }
-        } else if (y === item.from[0] && y !== item.to[0]) {
-            for (let x = item.from[1]; x <= width - 1; x++) {
-                cells.push({ x, y })
-            }
-        } else if (y !== item.to[0]) {
-            for (let x = 0; x <= width - 1; x++) {
-                cells.push({ x, y })
-            }
-        } else {
-            for (let x = 0; x <= item.to[1]; x++) {
-                cells.push({ x, y })
-            }
-        }
-    }
-
-    return cells;
+	const cells = []
+
+	for (let y = item.from[0]; y <= item.to[0]; y++) {
+		if (y === item.from[0] && y === item.to[0]) {
+			for (let x = item.from[1]; x <= item.to[1]; x++) {
+				cells.push({ x, y })
+			}
+		} else if (y === item.from[0] && y !== item.to[0]) {
+			for (let x = item.from[1]; x <= width - 1; x++) {
+				cells.push({ x, y })
+			}
+		} else if (y !== item.to[0]) {
+			for (let x = 0; x <= width - 1; x++) {
+				cells.push({ x, y })
+			}
+		} else {
+			for (let x = 0; x <= item.to[1]; x++) {
+				cells.push({ x, y })
+			}
+		}
+	}
+
+	return cells
 }
 
 function getColor(item) {
 	switch (item.type) {
-		case 'pay_for_blob':
-			return 'var(--blue)'
-		case 'tx':
-			return 'var(--neutral-green)'
-		case 'parity_shares':
-			return 'var(--purple)'
-		case 'primary_reserved_padding':
-			return 'var(--light-orange)'
-		case 'tail_padding':
-			return 'var(--txt-secondary)'
-		case 'namespace':
+		case "pay_for_blob":
+			return "var(--blue)"
+		case "tx":
+			return "var(--neutral-green)"
+		case "parity_shares":
+			return "var(--purple)"
+		case "primary_reserved_padding":
+			return "var(--light-orange)"
+		case "tail_padding":
+			return "var(--txt-secondary)"
+		case "namespace":
 			let hash = 0
 			let str = item.namespace
 			for (let i = 0; i < str.length; i++) {
 				hash = str.charCodeAt(i) + ((hash << 5) - hash)
 			}
 
-			let color = '#'
+			let color = "#"
 			for (let i = 0; i < 3; i++) {
-				const value = (hash >> (i * 8)) & 0xFF
-				color += ('00' + value.toString(16)).slice(-2)
+				const value = (hash >> (i * 8)) & 0xff
+				color += ("00" + value.toString(16)).slice(-2)
 			}
 
-			return color;
+			return color
 	}
 }
 
 const data = computed(() => {
 	if (blockODS.value.items) {
-		blockODS.value.items.forEach(item => {
+		blockODS.value.items.forEach((item) => {
 			item.cells = generateCells(item, blockODS.value.width)
 			item.color = getColor(item)
 		})
@@ -123,10 +123,10 @@ const drawSVG = () => {
 		const group = document.createElementNS(svgNS, "g")
 		group.setAttribute("class", "ods_group")
 		group.setAttribute("data-index", index)
-		if (item.type === 'namespace') {
+		if (item.type === "namespace") {
 			group.setAttribute("cursor", "pointer")
 		}
-		item.cells.forEach(cell => {
+		item.cells.forEach((cell) => {
 			const rect = document.createElementNS(svgNS, "rect")
 			rect.setAttribute("x", cell.x * cellSize.value)
 			rect.setAttribute("y", cell.y * cellSize.value)
@@ -138,13 +138,12 @@ const drawSVG = () => {
 			group.appendChild(rect)
 		})
 
-		group.addEventListener('click', () => handleGroupClick(item))
-		group.addEventListener('mouseover', () => highlight(index))
-		group.addEventListener('mouseout', () => unhighlight(index))
+		group.addEventListener("click", () => handleGroupClick(item))
+		group.addEventListener("mouseover", () => highlight(index))
+		group.addEventListener("mouseout", () => unhighlight(index))
 
 		svg.appendChild(group)
-	});
-
+	})
 
 	svgEl.value.wrapper.appendChild(svg)
 
@@ -153,7 +152,7 @@ const drawSVG = () => {
 
 function highlight(index) {
 	const elements = document.querySelectorAll(`.ods_group[data-index="${index}"]`)
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		el.style.filter = "brightness(1.2)"
 	})
 	dimOthers(index)
@@ -161,40 +160,40 @@ function highlight(index) {
 
 function unhighlight(index) {
 	const elements = document.querySelectorAll(`.ods_group[data-index="${index}"]`)
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		el.style.filter = ""
 	})
 	restoreOthers()
 }
 
 function dimOthers(index) {
-	const elements = document.querySelectorAll('.ods_group')
-	elements.forEach(el => {
-		if (el.getAttribute('data-index') !== index.toString()) {
+	const elements = document.querySelectorAll(".ods_group")
+	elements.forEach((el) => {
+		if (el.getAttribute("data-index") !== index.toString()) {
 			el.style.filter = "brightness(0.5)"
 		}
 	})
 }
 
 function restoreOthers() {
-	const elements = document.querySelectorAll('.ods_group')
-	elements.forEach(el => {
+	const elements = document.querySelectorAll(".ods_group")
+	elements.forEach((el) => {
 		el.style.filter = ""
 	})
 }
 
 function handleGroupClick(item) {
-	if (item.type === 'namespace') {
-		window.open(`/namespace/${getNamespaceIDFromBase64(item.namespace)}`, '_blank')
+	if (item.type === "namespace") {
+		window.open(`/namespace/${getNamespaceIDFromBase64(item.namespace)}`, "_blank")
 	}
 }
 
 function getNamespaceName(item) {
 	switch (item.type) {
-		case 'namespace':
+		case "namespace":
 			const { $getDisplayName } = useNuxtApp()
 
-			return $getDisplayName('namespaces', getNamespaceIDFromBase64(item.namespace))
+			return $getDisplayName("namespaces", getNamespaceIDFromBase64(item.namespace))
 		default:
 			return shortHex(item.namespace)
 	}
@@ -234,7 +233,8 @@ watch(
 
 			<Flex align="start" justify="between" wide>
 				<Flex align="start" direction="column" gap="12">
-					<Flex v-for="(item, index) in data?.items"
+					<Flex
+						v-for="(item, index) in data?.items"
 						@click="handleGroupClick(item)"
 						@mouseover="highlight(index)"
 						@mouseout="unhighlight(index)"
@@ -272,7 +272,7 @@ watch(
 
 .legend {
 	width: 250px;
-	
+
 	cursor: pointer;
 }
 
diff --git a/components/modals/PayForBlobModal.vue b/components/modals/PayForBlobModal.vue
index b3d4a627..df78735d 100644
--- a/components/modals/PayForBlobModal.vue
+++ b/components/modals/PayForBlobModal.vue
@@ -10,14 +10,14 @@ import { fetchEstimatedGas } from "@/services/api/gas"
 /** Services */
 import amp from "@/services/amp"
 import { getNamespaceID } from "@/services/utils"
-import { sendPayForBlob } from "~/services/wallet"
+import { sendPayForBlob } from "@/services/wallet"
 import { prepareBlob } from "@/services/utils/encode"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
@@ -171,7 +171,7 @@ const handleContinue = async () => {
 					type: "warning",
 					icon: "danger",
 					title: `Looks like your account is fresh`,
-					description: 'Top up your balance to submit the blob',
+					description: "Top up your balance to submit the blob",
 					autoDestroy: true,
 				},
 			})
diff --git a/components/modals/QRCodeModal.vue b/components/modals/QRCodeModal.vue
index 0a7ac48d..e3b57191 100644
--- a/components/modals/QRCodeModal.vue
+++ b/components/modals/QRCodeModal.vue
@@ -6,7 +6,7 @@ import { generate } from "lean-qr"
 import Modal from "@/components/ui/Modal.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
diff --git a/components/modals/RawDataModal.vue b/components/modals/RawDataModal.vue
index 01764282..ce3059f2 100644
--- a/components/modals/RawDataModal.vue
+++ b/components/modals/RawDataModal.vue
@@ -16,8 +16,8 @@ import Modal from "@/components/ui/Modal.vue"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useNotificationsStore } from "@/store/notifications"
+import { useCacheStore } from "@/store/cache.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const cacheStore = useCacheStore()
 const notificationsStore = useNotificationsStore()
 
diff --git a/components/modals/RollupRankModal.vue b/components/modals/RollupRankModal.vue
index 78eb945e..c284909e 100644
--- a/components/modals/RollupRankModal.vue
+++ b/components/modals/RollupRankModal.vue
@@ -6,7 +6,7 @@ import Modal from "@/components/ui/Modal.vue"
 import { roundTo } from "@/services/utils"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
@@ -50,7 +50,7 @@ const metrics = ref([
 ])
 
 const getMetricValue = (key) => {
-	const coefficient = metrics.value.find(m => m.key === key)?.coefficient
+	const coefficient = metrics.value.find((m) => m.key === key)?.coefficient
 	const metricValue = +rank.value?.ranking[key]?.score / +coefficient
 
 	return roundTo(metricValue, 2)
@@ -62,7 +62,7 @@ watch(
 			rank.value = cacheStore.selectedRollupRank
 			rollup.value = cacheStore.selectedRollup
 
-			metrics.value = metrics.value.map(m => {
+			metrics.value = metrics.value.map((m) => {
 				return {
 					...m,
 					metricValue: getMetricValue(m.key),
@@ -122,12 +122,12 @@ watch(
 							</li>
 							<li>
 								<Text size="13" weight="600" color="secondary">K</Text>
-								is the weight assigned to that metric; the sum of all 
+								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>					
+					</Text>
 				</Flex>
 
 				<Text size="12" color="secondary" :style="{ lineHeight: '1.4' }">
@@ -202,21 +202,21 @@ watch(
 						<ul>
 							<li>
 								<div :class="$style.inline_formula_wrapper">
-										<mi>diff</mi>
-										<mo>=</mo>
-										<mi>maxTime</mi>
-										<mo>-</mo>
-										<mi>lastTime</mi>
+									<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>
+								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>
@@ -303,7 +303,9 @@ watch(
 										<mn> {{ m.coefficient }} </mn>
 									</template>
 									<mo>=</mo>
-									<mn :style="{ color: `var(--${rank.ranking.rank.category.color})`, fontWeight: '800'}"> {{ rank.ranking.rank.score }} </mn>
+									<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" />
@@ -316,7 +318,7 @@ watch(
 </template>
 
 <style module>
-.formula_wrapper{
+.formula_wrapper {
 	padding: 10px;
 	background-color: var(--op-5);
 	border-radius: 6px;
diff --git a/components/modals/SendModal.vue b/components/modals/SendModal.vue
index 367f575c..1b71acd7 100644
--- a/components/modals/SendModal.vue
+++ b/components/modals/SendModal.vue
@@ -14,14 +14,14 @@ import { search } from "@/services/api/search"
 /** Services */
 import amp from "@/services/amp"
 import { normalizeAmount, purgeNumber, comma } from "@/services/utils/amounts"
-import { SIMULATE_ADDRESS_FROM, SIMULATE_ADDRESS_TO, simulateMsgs, sendMsgs } from "~/services/wallet"
+import { SIMULATE_ADDRESS_FROM, SIMULATE_ADDRESS_TO, simulateMsgs, sendMsgs } from "@/services/wallet"
 import { MsgSend } from "@/services/proto/gen/msg_send"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
@@ -162,7 +162,12 @@ watch(
 
 const calcGasFee = (target) => {
 	const gasLimit = typeof estimatedGasLimit.value === "number" ? estimatedGasLimit.value : estimatedGasLimit.value.replaceAll(" ", "")
-	return comma(((selectedGasLimit.value === 'Custom' ? Number.parseInt(customGasLimit.value.toString().replaceAll(" ", "")) : gasLimit) * appStore.gas[target.toLowerCase()]).toFixed(2))
+	return comma(
+		(
+			(selectedGasLimit.value === "Custom" ? Number.parseInt(customGasLimit.value.toString().replaceAll(" ", "")) : gasLimit) *
+			appStore.gas[target.toLowerCase()]
+		).toFixed(2),
+	)
 }
 
 const runGasLimitEstimation = async () => {
@@ -186,7 +191,7 @@ const runGasLimitEstimation = async () => {
 		[protoMsgs],
 		[{ denom: "utia", amount: "1" }],
 	)
-	
+
 	estimatedGasLimit.value = parseInt(gasUsed)
 }
 
@@ -702,4 +707,3 @@ const handleContinue = async () => {
 	padding: 0 16px;
 }
 </style>
-~/services/proto/gen/msg_send
diff --git a/components/modals/StakingModal.vue b/components/modals/StakingModal.vue
index b6cd3217..d09fae42 100644
--- a/components/modals/StakingModal.vue
+++ b/components/modals/StakingModal.vue
@@ -14,14 +14,14 @@ import { search } from "@/services/api/search"
 /** Services */
 import amp from "@/services/amp"
 import { normalizeAmount, purgeNumber, comma } from "@/services/utils/amounts"
-import { SIMULATE_ADDRESS_FROM, SIMULATE_VALIDATOR, simulateMsgs, sendMsgs } from "~/services/wallet"
+import { SIMULATE_ADDRESS_FROM, SIMULATE_VALIDATOR, simulateMsgs, sendMsgs } from "@/services/wallet"
 import { MsgDelegate } from "@/services/proto/gen/staking"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
@@ -698,4 +698,3 @@ const handleContinue = async () => {
 	padding: 0 16px;
 }
 </style>
-~/services/proto/gen/msg_send
diff --git a/components/modals/VestingDetailsModal.vue b/components/modals/VestingDetailsModal.vue
index 592fee54..8f429d0a 100644
--- a/components/modals/VestingDetailsModal.vue
+++ b/components/modals/VestingDetailsModal.vue
@@ -1,6 +1,6 @@
 <script setup>
 /** Vendor */
-import { DateTime } from "luxon";
+import { DateTime } from "luxon"
 
 /** API */
 import { fetchVestingPeriods } from "@/services/api/address"
@@ -8,14 +8,13 @@ import { fetchVestingPeriods } from "@/services/api/address"
 /** UI */
 import Button from "@/components/ui/Button.vue"
 import Modal from "@/components/ui/Modal.vue"
-import Spinner from "@/components/ui/Spinner.vue"
-import Tooltip from "@/components/ui/Tooltip.vue";
+import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Services */
-import { capitilize, comma } from "@/services/utils";
+import { capitilize } from "@/services/utils"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const emit = defineEmits(["onClose"])
@@ -55,14 +54,12 @@ const getVestingPeriods = async () => {
 	isLoading.value = false
 }
 
-
 watch(
 	() => props.show,
 	async () => {
 		if (props.show) {
 			vesting.value = cacheStore.current.vesting
 			nextTick(async () => {
-				// vesting.value = cacheStore.current.vesting
 				getVestingPeriods()
 			})
 		}
@@ -73,7 +70,7 @@ watch(
 	() => page.value,
 	() => {
 		getVestingPeriods()
-	}
+	},
 )
 </script>
 
@@ -81,7 +78,7 @@ watch(
 	<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap>
 		<Flex direction="column" gap="24">
 			<Text size="16" weight="600" color="primary">Releasing Schedule</Text>
-			
+
 			<Flex align="center" justify="between" wide>
 				<Flex align="center" direction="column" gap="12" :class="$style.value">
 					<Flex align="center" gap="4">
@@ -91,7 +88,10 @@ watch(
 
 					<Flex align="center" justify="start" gap="4" wide>
 						<Text size="12" weight="500" color="tertiary">Total Amount:</Text>
-						<AmountInCurrency :amount="{ value: vesting.amount, decimal: 6 }" :styles="{ amount: { size: '13' }, currency: { size: '13', color: 'primary' }}" />
+						<AmountInCurrency
+							:amount="{ value: vesting.amount, decimal: 6 }"
+							:styles="{ amount: { size: '13' }, currency: { size: '13', color: 'primary' } }"
+						/>
 					</Flex>
 				</Flex>
 
@@ -127,41 +127,40 @@ watch(
 						<tr v-for="vp in vestingPeriods">
 							<td>
 								<Flex align="center" justify="start" gap="4">
-										<Text size="12" weight="600" color="primary">
-											{{ DateTime.fromISO(vp.time).setLocale("en").toFormat("yyyy LLL d, t") }}
-										</Text>
+									<Text size="12" weight="600" color="primary">
+										{{ DateTime.fromISO(vp.time).setLocale("en").toFormat("yyyy LLL d, t") }}
+									</Text>
 
-										<Text size="11" weight="500" color="tertiary">
-											({{ DateTime.fromISO(vp.time).toRelative({ locale: "en", style: "short" }) }})
-										</Text>
+									<Text size="11" weight="500" color="tertiary">
+										({{ DateTime.fromISO(vp.time).toRelative({ locale: "en", style: "short" }) }})
+									</Text>
 								</Flex>
 							</td>
 							<td>
-								<AmountInCurrency :amount="{ value: vp.amount, decimal: 6 }" :styles="{ amount: { size: '13' }, currency: { size: '13' }}" />
+								<AmountInCurrency
+									:amount="{ value: vp.amount, decimal: 6 }"
+									:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
+								/>
 							</td>
 							<td>
 								<Flex align="center" justify="center">
 									<Tooltip v-if="DateTime.fromISO(vp.time).ts <= DateTime.now().ts" position="start" delay="500">
 										<Icon name="check" size="16" color="neutral-green" />
 
-										<template #content>
-											Released
-										</template>
+										<template #content> Released </template>
 									</Tooltip>
 
 									<Tooltip v-else position="start" delay="500">
 										<Icon name="clock-forward" size="16" color="secondary" />
 
-										<template #content>
-											Waiting
-										</template>
+										<template #content> Waiting </template>
 									</Tooltip>
 								</Flex>
 							</td>
 						</tr>
 					</tbody>
 				</table>
-				
+
 				<!-- Pagination -->
 				<Flex align="center" justify="end" gap="6" :class="$style.pagination">
 					<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
@@ -275,5 +274,4 @@ watch(
 	height: 1px;
 	background: var(--op-5);
 }
-
 </style>
diff --git a/components/modules/address/AddressCharts.vue b/components/modules/address/AddressCharts.vue
index 2c622325..ef507aa8 100644
--- a/components/modules/address/AddressCharts.vue
+++ b/components/modules/address/AddressCharts.vue
@@ -11,13 +11,13 @@ import Popover from "@/components/ui/Popover.vue"
 import Toggle from "@/components/ui/Toggle.vue"
 
 /** Services */
-import { abbreviate, formatBytes, tia } from "@/services/utils"
+import { abbreviate, tia } from "@/services/utils"
 
 /** API */
 import { fetchAddressSeries } from "@/services/api/stats"
 
 /** Store */
-import { useSettingsStore } from "@/store/settings"
+import { useSettingsStore } from "@/store/settings.store"
 const settingsStore = useSettingsStore()
 
 const props = defineProps({
@@ -64,10 +64,10 @@ const handleClose = () => {
 }
 
 const handleChangeChartView = () => {
-	if (chartView.value === 'line') {
-		chartView.value = 'bar'
+	if (chartView.value === "line") {
+		chartView.value = "bar"
 	} else {
-		chartView.value = 'line'
+		chartView.value = "line"
 	}
 }
 
@@ -152,15 +152,15 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 			tf === "month"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
 				: tf === "day"
-					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		const badgeWidth = badgeEl.value.getBoundingClientRect().width
 		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
 			badgeOffset.value = 0
 		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + ((data.length - 1 - idx) * 2)
+			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
 		} else {
 			badgeOffset.value = badgeWidth / 2
 		}
@@ -207,44 +207,38 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 	let path2 = null
 	path1 = svg
 		.append("path")
-			.attr("fill", "none")
-			.attr("stroke", "var(--brand)")
-			.attr("stroke-width", 2)
-			.attr("stroke-linecap", "round")
-			.attr("stroke-linejoin", "round")
-			.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
+		.attr("fill", "none")
+		.attr("stroke", "var(--brand)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
 
 	if (loadLastValue.value) {
 		// Create pattern
 		const defs = svg.append("defs")
-		const pattern = defs.append("pattern")
+		const pattern = defs
+			.append("pattern")
 			.attr("id", "dashedPattern")
 			.attr("width", 8)
 			.attr("height", 2)
 			.attr("patternUnits", "userSpaceOnUse")
-		pattern.append("rect")
-			.attr("width", 4)
-			.attr("height", 2)
-			.attr("fill", "var(--brand)")
-		pattern.append("rect")
-			.attr("x", 8)
-			.attr("width", 4)
-			.attr("height", 2)
-			.attr("fill", "transparent")
-		
+		pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", "var(--brand)")
+		pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
+
 		// Last dash segment
 		path2 = svg
 			.append("path")
-				.attr("fill", "none")
-				.attr("stroke", "url(#dashedPattern)")
-				.attr("stroke-width", 2)
-				.attr("stroke-linecap", "round")
-				.attr("stroke-linejoin", "round")
-				.attr("d", line(data.slice(data.length - 2, data.length)))
+			.attr("fill", "none")
+			.attr("stroke", "url(#dashedPattern)")
+			.attr("stroke-width", 2)
+			.attr("stroke-linecap", "round")
+			.attr("stroke-linejoin", "round")
+			.attr("d", line(data.slice(data.length - 2, data.length)))
 	}
-	
+
 	const totalDuration = 1_000
-	const path1Duration = loadLastValue.value ? totalDuration / data.length * (data.length - 1) : totalDuration
+	const path1Duration = loadLastValue.value ? (totalDuration / data.length) * (data.length - 1) : totalDuration
 	const path1Length = path1.node().getTotalLength()
 
 	path1
@@ -254,11 +248,11 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 		.duration(path1Duration)
 		.ease(d3.easeLinear)
 		.attr("stroke-dashoffset", 0)
-	
+
 	if (loadLastValue.value) {
 		const path2Duration = totalDuration / data.length
 		const path2Length = path2.node().getTotalLength() + 1
-		
+
 		path2
 			.attr("stroke-dasharray", path2Length)
 			.attr("stroke-dashoffset", path2Length)
@@ -269,17 +263,15 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 			.attr("stroke-dashoffset", 0)
 	}
 
-	const point = svg.append("circle")
+	const point = svg
+		.append("circle")
 		.attr("cx", x(data[data.length - 1].date))
 		.attr("cy", y(data[data.length - 1].value))
 		.attr("fill", "var(--brand)")
 		.attr("r", 3)
 		.attr("opacity", 0)
-	
-	point.transition()
-		.delay(totalDuration)
-		.duration(200)
-		.attr("opacity", 1)
+
+	point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
 
 	if (chartEl.children[0]) chartEl.children[0].remove()
 	chartEl.append(svg.node())
@@ -310,15 +302,14 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 		onEnter()
 
 		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
-		
+
 		const elements = document.querySelectorAll(`[metric="${metric}"]`)
-		elements.forEach(el => {
-			if (+el.getAttribute('data-index') === idx) {
+		elements.forEach((el) => {
+			if (+el.getAttribute("data-index") === idx) {
 				el.style.filter = "brightness(1.2)"
 			} else {
 				el.style.filter = "brightness(0.6)"
 			}
-			
 		})
 
 		tooltipXOffset.value = x(data[idx].date)
@@ -342,15 +333,15 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 			tf === "month"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
 				: tf === "day"
-					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		const badgeWidth = badgeEl.value.getBoundingClientRect().width
 		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
 			badgeOffset.value = 0
 		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + ((data.length - 1 - idx) * 2)
+			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
 		} else {
 			badgeOffset.value = (badgeWidth - barWidth) / 2
 		}
@@ -358,8 +349,8 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 	const onPointerleft = () => {
 		onLeave()
 
-		const elements = document.querySelectorAll('[data-index]')
-		elements.forEach(el => {
+		const elements = document.querySelectorAll("[data-index]")
+		elements.forEach((el) => {
 			el.style.filter = ""
 		})
 		badgeText.value = ""
@@ -406,25 +397,26 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 		.attr("patternUnits", "userSpaceOnUse")
 		.attr("patternTransform", "rotate(45)")
 		.append("rect")
-			.attr("width", 2)
-			.attr("height", 6)
-			.attr("transform", "translate(0,0)")
-			.attr("fill", "var(--brand)")
+		.attr("width", 2)
+		.attr("height", 6)
+		.attr("transform", "translate(0,0)")
+		.attr("fill", "var(--brand)")
 
-	svg.append('g')
+	svg.append("g")
 		.selectAll("g")
 		.data(data)
-		.enter().append("rect")
+		.enter()
+		.append("rect")
 		.attr("class", "bar")
-		.attr('data-index', (d, i) => i)
-		.attr('metric', metric)
-		.attr("x", d => x(new Date(d.date)))
-		.attr('y', d => y(d.value))
+		.attr("data-index", (d, i) => i)
+		.attr("metric", metric)
+		.attr("x", (d) => x(new Date(d.date)))
+		.attr("y", (d) => y(d.value))
 		.attr("width", barWidth)
-		.attr('fill', (d, i) => (loadLastValue.value && i === data.length - 1) ? `url(#diagonal-stripe)` : "var(--brand)")
+		.attr("fill", (d, i) => (loadLastValue.value && i === data.length - 1 ? `url(#diagonal-stripe)` : "var(--brand)"))
 		.transition()
 		.duration(1_000)
-		.attr('height', d => Math.max(height - marginBottom - 6 - y(d.value), 0))
+		.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
 
 	if (chartEl.children[0]) chartEl.children[0].remove()
 	chartEl.append(svg.node())
@@ -453,15 +445,19 @@ const getTxSeries = async () => {
 
 	const txSeriesMap = {}
 	txSeriesRawData.forEach((item) => {
-		txSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		txSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -470,7 +466,9 @@ const getTxSeries = async () => {
 		}
 		txSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(txSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(txSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
+				0,
 		})
 	}
 }
@@ -482,15 +480,19 @@ const getFeeSeries = async () => {
 
 	const feeSeriesMap = {}
 	feeSeriesRawData.forEach((item) => {
-		feeSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		feeSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -499,7 +501,9 @@ const getFeeSeries = async () => {
 		}
 		feeSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(feeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(feeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
+				0,
 		})
 	}
 }
@@ -557,8 +561,8 @@ watch(
 		updateUserSettings()
 		if (!isLoading.value) {
 			buildCharts(false)
-		}		
-	}
+		}
+	},
 )
 
 const debouncedRedraw = useDebounceFn((e) => {
@@ -624,7 +628,9 @@ onBeforeUnmount(() => {
 									gap="12"
 									:class="$style.chart_selector"
 									:style="{
-										background: `linear-gradient(to ${chartView === 'line' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+										background: `linear-gradient(to ${
+											chartView === 'line' ? 'right' : 'left'
+										}, var(--op-5) 50%, transparent 50%)`,
 									}"
 								>
 									<Icon
@@ -703,17 +709,24 @@ onBeforeUnmount(() => {
 									{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
 								</Text>
 
-								<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+								<Text size="12" weight="600" color="tertiary">{{
+									selectedPeriod.timeframe === "day" ? "Today" : "Now"
+								}}</Text>
 							</Flex>
 						</Flex>
 
 						<Transition name="fastfade">
 							<div v-if="showTxTooltip" :class="$style.tooltip_wrapper">
-								<div v-if="chartView === 'line'"
+								<div
+									v-if="chartView === 'line'"
 									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 									:class="$style.dot"
 								/>
-								<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+								<div
+									v-if="chartView === 'line'"
+									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+									:class="$style.line"
+								/>
 								<div
 									ref="badgeEl"
 									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
@@ -754,9 +767,12 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{ opacity: Math.max(...feeSeries.map((d) => d.value)) ? 1 : 0 }"
 							>
-								{{ tia(Math.max(...feeSeries.map((d) => d.value)), 0) > 1
-									? tia(Math.max(...feeSeries.map((d) => d.value)), 0)
-									: tia(Math.max(...feeSeries.map((d) => d.value)), 2) }} TIA
+								{{
+									tia(Math.max(...feeSeries.map((d) => d.value)), 0) > 1
+										? tia(Math.max(...feeSeries.map((d) => d.value)), 0)
+										: tia(Math.max(...feeSeries.map((d) => d.value)), 2)
+								}}
+								TIA
 							</Text>
 							<Skeleton v-else-if="!feeSeries.length" w="32" h="12" />
 
@@ -767,14 +783,18 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{
 									opacity:
-										Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2) != Math.max(...feeSeries.map((d) => d.value))
+										Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2) !=
+										Math.max(...feeSeries.map((d) => d.value))
 											? 1
 											: 0,
 								}"
 							>
-								{{ tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0) > 1
-									? tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0)
-									: tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 2) }} TIA
+								{{
+									tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0) > 1
+										? tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0)
+										: tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 2)
+								}}
+								TIA
 							</Text>
 							<Skeleton v-else-if="!feeSeries.length" w="24" h="12" />
 
@@ -795,17 +815,24 @@ onBeforeUnmount(() => {
 									{{ DateTime.now().minus({ hours: selectedPeriod.value }).set({ minutes: 0 }).toFormat("hh:mm a") }}
 								</Text>
 
-								<Text size="12" weight="600" color="tertiary">{{ selectedPeriod.timeframe === "day" ? "Today" : "Now" }}</Text>
+								<Text size="12" weight="600" color="tertiary">{{
+									selectedPeriod.timeframe === "day" ? "Today" : "Now"
+								}}</Text>
 							</Flex>
 						</Flex>
 
 						<Transition name="fastfade">
 							<div v-if="showFeeTooltip" :class="$style.tooltip_wrapper">
-								<div v-if="chartView === 'line'"
+								<div
+									v-if="chartView === 'line'"
 									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 									:class="$style.dot"
 								/>
-								<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+								<div
+									v-if="chartView === 'line'"
+									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+									:class="$style.line"
+								/>
 								<div
 									ref="badgeEl"
 									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
diff --git a/components/modules/address/AddressOverview.vue b/components/modules/address/AddressOverview.vue
index d822e2f7..deb192a2 100644
--- a/components/modules/address/AddressOverview.vue
+++ b/components/modules/address/AddressOverview.vue
@@ -17,8 +17,8 @@ import DelegationsTable from "./tables/DelegationsTable.vue"
 import RedelegationsTable from "./tables/RedelegationsTable.vue"
 import UndelegationsTable from "./tables/UndelegationsTable.vue"
 import GrantsTable from "./tables/GrantsTable.vue"
-import GrantersTable from "./tables/GrantersTable.vue";
-import VestingsTable from "./tables/VestingsTable.vue";
+import GrantersTable from "./tables/GrantersTable.vue"
+import VestingsTable from "./tables/VestingsTable.vue"
 
 /** Services */
 import { comma, splitAddress } from "@/services/utils"
@@ -38,9 +38,9 @@ import {
 } from "@/services/api/address"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useEnumStore } from "@/store/enums"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useEnumStore } from "@/store/enums.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const enumStore = useEnumStore()
 const modalsStore = useModalsStore()
@@ -569,11 +569,11 @@ watch(
 			case "undelegations":
 				getUndelegations()
 				break
-			
+
 			case "grants":
 				getGrants()
 				break
-			
+
 			case "granters":
 				getGranters()
 				break
@@ -611,15 +611,15 @@ watch(
 			case "undelegations":
 				getUndelegations()
 				break
-			
+
 			case "grants":
 				getGrants()
 				break
-			
+
 			case "granters":
 				getGranters()
 				break
-			
+
 			case "vestings":
 				getVestings()
 				break
@@ -630,7 +630,7 @@ watch(
 	() => msgTypes.value,
 	() => {
 		filters.message_type = msgTypes.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
-	}
+	},
 )
 watch(
 	() => showEnded.value,
@@ -652,11 +652,6 @@ const handleViewRawAddress = () => {
 	modalsStore.open("rawData")
 }
 
-const handleViewRawTransactions = () => {
-	cacheStore.current._target = "transactions"
-	modalsStore.open("rawData")
-}
-
 const handleOpenQRModal = () => {
 	cacheStore.qr.data = props.address.hash
 	cacheStore.qr.description = "Scan QR code to get this address"
@@ -671,7 +666,10 @@ const handleOpenQRModal = () => {
 		<Flex align="center" justify="between" :class="$style.header">
 			<Flex align="center" gap="8">
 				<Icon name="address" size="14" color="primary" />
-				<Text size="13" weight="600" color="primary">Address</Text>
+				<Text as="h1" size="13" weight="600" color="primary">
+					Address <Text color="secondary">{{ splitAddress(address.hash) }}</Text>
+				</Text>
+				<CopyButton :text="address.hash" size="12" />
 			</Flex>
 
 			<Flex align="center" gap="12">
@@ -681,10 +679,7 @@ const handleOpenQRModal = () => {
 						Send
 					</Button>
 
-					<BookmarkButton
-						type="address"
-						:id="address.hash"
-					/>
+					<BookmarkButton type="address" :id="address.hash" />
 				</Flex>
 
 				<div class="divider_v"></div>
@@ -721,9 +716,7 @@ const handleOpenQRModal = () => {
 						</Flex>
 
 						<Flex direction="column" gap="8" :class="$style.key_value">
-							<Text size="14" weight="600" color="secondary">
-								{{ $getDisplayName('addresses', '', address) }}
-							</Text>
+							<Text size="14" weight="600" color="secondary"> {{ $getDisplayName("addresses", "", address) }}</Text>
 
 							<Flex align="center" gap="10">
 								<Text size="12" weight="600" color="secondary"> {{ splitAddress(address.hash) }} </Text>
@@ -735,11 +728,7 @@ const handleOpenQRModal = () => {
 					<Flex v-else direction="column" gap="8" :class="$style.key_value">
 						<Text size="12" weight="600" color="secondary">Address</Text>
 
-						<Flex align="center" gap="10">
-							<Text size="12" weight="600" color="secondary"> {{ splitAddress(address.hash) }} </Text>
-
-							<CopyButton :text="address.hash" />
-						</Flex>
+						<Text size="13" weight="600" color="primary"> {{ address.hash }} </Text>
 					</Flex>
 
 					<Flex direction="column" gap="16" :class="$style.key_value">
@@ -805,7 +794,12 @@ const handleOpenQRModal = () => {
 						</Flex>
 
 						<Flex v-if="!collapseCelestials" direction="column" gap="12" :class="$style.key_value">
-							<NuxtLink v-for="c in celestials" :to="`https://celestials.id/id/${c.name}?utm_source=celenium_address_page`" target="_blank" :class="$style.link">
+							<NuxtLink
+								v-for="c in celestials"
+								:to="`https://celestials.id/id/${c.name}?utm_source=celenium_address_page`"
+								target="_blank"
+								:class="$style.link"
+							>
 								<Flex align="center" gap="8">
 									<Flex v-if="c.image_url" align="center" justify="center" :class="$style.cel_image_container">
 										<img :src="c.image_url" :class="$style.cel_image" />
@@ -1309,7 +1303,7 @@ const handleOpenQRModal = () => {
 		}
 
 		img {
-			filter: brightness(1.2)
+			filter: brightness(1.2);
 		}
 	}
 }
@@ -1330,6 +1324,16 @@ const handleOpenQRModal = () => {
 	}
 }
 
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
 @media (max-width: 400px) {
 	.tabs_wrapper {
 		overflow-x: auto;
diff --git a/components/modules/address/tables/GrantersTable.vue b/components/modules/address/tables/GrantersTable.vue
index bda02503..24088b7f 100644
--- a/components/modules/address/tables/GrantersTable.vue
+++ b/components/modules/address/tables/GrantersTable.vue
@@ -10,8 +10,8 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { comma } from "@/services/utils"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
@@ -73,7 +73,7 @@ const handleViewRawGrants = (g) => {
 					<td @click="handleViewRawGrants(g)">
 						<Flex align="center">
 							<Text size="12" weight="600" color="primary" class="table_column_alias">
-								{{ $getDisplayName('addresses', g.granter.hash) }}
+								{{ $getDisplayName("addresses", g.granter.hash) }}
 							</Text>
 						</Flex>
 					</td>
@@ -99,13 +99,9 @@ const handleViewRawGrants = (g) => {
 							</Tooltip>
 
 							<Tooltip v-else="g.expiration" position="start" delay="500">
-								<Text size="12" weight="600" color="primary">
-									— —
-								</Text>
+								<Text size="12" weight="600" color="primary"> — — </Text>
 
-								<template #content>
-									This grant is permanent until the user revokes it
-								</template>
+								<template #content> This grant is permanent until the user revokes it </template>
 							</Tooltip>
 						</Flex>
 					</td>
diff --git a/components/modules/address/tables/GrantsTable.vue b/components/modules/address/tables/GrantsTable.vue
index f02e1bfa..26b6b554 100644
--- a/components/modules/address/tables/GrantsTable.vue
+++ b/components/modules/address/tables/GrantsTable.vue
@@ -10,8 +10,8 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { comma } from "@/services/utils"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
@@ -73,7 +73,7 @@ const handleViewRawGrants = (g) => {
 					<td @click="handleViewRawGrants(g)">
 						<Flex align="center">
 							<Text size="12" weight="600" color="primary" class="table_column_alias">
-								{{ $getDisplayName('addresses', g.grantee.hash) }}
+								{{ $getDisplayName("addresses", g.grantee.hash) }}
 							</Text>
 						</Flex>
 					</td>
@@ -99,13 +99,9 @@ const handleViewRawGrants = (g) => {
 							</Tooltip>
 
 							<Tooltip v-else="g.expiration" position="start" delay="500">
-								<Text size="12" weight="600" color="primary">
-									— —
-								</Text>
+								<Text size="12" weight="600" color="primary"> — — </Text>
 
-								<template #content>
-									This grant is permanent until the user revokes it
-								</template>
+								<template #content> This grant is permanent until the user revokes it </template>
 							</Tooltip>
 						</Flex>
 					</td>
diff --git a/components/modules/address/tables/VestingsTable.vue b/components/modules/address/tables/VestingsTable.vue
index 78f4ca72..44fd9f65 100644
--- a/components/modules/address/tables/VestingsTable.vue
+++ b/components/modules/address/tables/VestingsTable.vue
@@ -10,12 +10,11 @@ import AmountInCurrency from "@/components/AmountInCurrency.vue"
 import { capitilize, comma } from "@/services/utils"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
-
 const router = useRouter()
 
 const props = defineProps({
@@ -31,25 +30,25 @@ const vestingTime = (v, tooltip) => {
 
 	if (!tooltip) {
 		switch (v.type) {
-			case 'periodic':
-			case 'continuous':
+			case "periodic":
+			case "continuous":
 				if (startTime.year === endTime.year) {
-					return `${startTime.toFormat('dd LLL')} - ${endTime.toFormat('dd LLL')}`
+					return `${startTime.toFormat("dd LLL")} - ${endTime.toFormat("dd LLL")}`
 				} else {
-					return `${startTime.toFormat('dd LLL yyyy')} - ${endTime.toFormat('dd LLL yyyy')}`
+					return `${startTime.toFormat("dd LLL yyyy")} - ${endTime.toFormat("dd LLL yyyy")}`
 				}
-			case 'permanent':
-				return '— —'
+			case "permanent":
+				return "— —"
 			default:
-				return DateTime.now().year === endTime.year ? endTime.toFormat('dd LLL') : endTime.toFormat('dd LLL yyyy')
+				return DateTime.now().year === endTime.year ? endTime.toFormat("dd LLL") : endTime.toFormat("dd LLL yyyy")
 		}
 	} else {
 		switch (v.type) {
-			case 'periodic':
-			case 'continuous':
+			case "periodic":
+			case "continuous":
 				return `${startTime.toFormat("yyyy LLL d, t")} - ${endTime.toFormat("yyyy LLL d, t")}`
-			case 'permanent':
-				return 'Permanent vesting has no start or end date'
+			case "permanent":
+				return "Permanent vesting has no start or end date"
 			default:
 				return `Vesting till ${endTime.toFormat("yyyy LLL d, t")}`
 		}
@@ -63,19 +62,18 @@ const handleViewVestingDetails = (v) => {
 
 const vestingTypeDescription = (v) => {
 	switch (v.type) {
-		case 'periodic':
-			return 'Periodic vesting, where coins begin to vest at start time and vest periodically according to number of periods and the vesting amount per period. The number of periods, length per period, and amount per period are configurable.'
-		case 'continuous':
-			return 'Continuous vesting, where coins begin to vest at start time and vest linearly with respect to time until end time is reached.'
-		case 'permanent':
-			return 'Permanent locked vesting, where coins are locked forever. Coins in this account can still be used for delegating and for governance votes even while locked.'
-		case 'delayed':
-			return 'Delayed vesting, where all coins are vested once end time is reached.'
+		case "periodic":
+			return "Periodic vesting, where coins begin to vest at start time and vest periodically according to number of periods and the vesting amount per period. The number of periods, length per period, and amount per period are configurable."
+		case "continuous":
+			return "Continuous vesting, where coins begin to vest at start time and vest linearly with respect to time until end time is reached."
+		case "permanent":
+			return "Permanent locked vesting, where coins are locked forever. Coins in this account can still be used for delegating and for governance votes even while locked."
+		case "delayed":
+			return "Delayed vesting, where all coins are vested once end time is reached."
 		default:
-			return 'Unknown vesting type'
+			return "Unknown vesting type"
 	}
 }
-
 </script>
 
 <template>
@@ -148,7 +146,10 @@ const vestingTypeDescription = (v) => {
 						</Flex>
 					</td>
 					<td>
-						<AmountInCurrency :amount="{ value: v.amount, decimal: 2 }" :styles="{ amount: { size: '13' }, currency: { size: '13' }}" />
+						<AmountInCurrency
+							:amount="{ value: v.amount, decimal: 2 }"
+							:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
+						/>
 					</td>
 
 					<td v-if="v.type === 'periodic'">
@@ -158,13 +159,10 @@ const vestingTypeDescription = (v) => {
 							</Flex>
 
 							<template #content>
-								<Text size="12" weight="500" color="secondary">
-									View releasing schedule
-								</Text>
+								<Text size="12" weight="500" color="secondary"> View releasing schedule </Text>
 							</template>
 						</Tooltip>
 					</td>
-
 				</tr>
 			</tbody>
 		</table>
@@ -235,7 +233,6 @@ const vestingTypeDescription = (v) => {
 		&:last-child {
 			padding-right: 8px;
 		}
-
 	}
 }
 
diff --git a/components/modules/blob/DataInspector.vue b/components/modules/blob/DataInspector.vue
index eaf984b8..6cbe2f28 100644
--- a/components/modules/blob/DataInspector.vue
+++ b/components/modules/blob/DataInspector.vue
@@ -3,7 +3,7 @@
 import { DateTime } from "luxon"
 
 /** Store */
-import { useSettingsStore } from "@/store/settings"
+import { useSettingsStore } from "@/store/settings.store"
 const settingsStore = useSettingsStore()
 
 const props = defineProps({
diff --git a/components/modules/blob/HexViewer.vue b/components/modules/blob/HexViewer.vue
index 9afa82d3..23087d63 100644
--- a/components/modules/blob/HexViewer.vue
+++ b/components/modules/blob/HexViewer.vue
@@ -1,8 +1,4 @@
 <script setup>
-/** Store */
-import { useSettingsStore } from "@/store/settings"
-const settingsStore = useSettingsStore()
-
 const props = defineProps({
 	blob: {
 		type: Object,
diff --git a/components/modules/block/BlobsTable.vue b/components/modules/block/BlobsTable.vue
index 99eb90c1..3d097466 100644
--- a/components/modules/block/BlobsTable.vue
+++ b/components/modules/block/BlobsTable.vue
@@ -12,8 +12,8 @@ import { fetchTxBlobs, fetchTxBlobsCount } from "@/services/api/tx"
 import { fetchBlockBlobs } from "@/services/api/block"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 
@@ -187,7 +187,7 @@ const handlePrev = () => {
 										<Flex direction="column" gap="4">
 											<Flex align="center" gap="8">
 												<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-													{{ $getDisplayName('namespaces', blob.namespace.namespace_id) }}
+													{{ $getDisplayName("namespaces", blob.namespace.namespace_id) }}
 												</Text>
 
 												<CopyButton :text="getNamespaceID(blob.namespace.namespace_id)" />
@@ -234,12 +234,7 @@ const handlePrev = () => {
 										</Flex>
 
 										<Text size="13" weight="600" color="primary">
-											{{
-												blob.commitment.slice(
-													blob.commitment.length - 4,
-													blob.commitment.length,
-												)
-											}}
+											{{ blob.commitment.slice(blob.commitment.length - 4, blob.commitment.length) }}
 										</Text>
 
 										<CopyButton :text="blob.commitment" />
diff --git a/components/modules/block/BlockOverview.vue b/components/modules/block/BlockOverview.vue
index 3f75625c..1f5898bd 100644
--- a/components/modules/block/BlockOverview.vue
+++ b/components/modules/block/BlockOverview.vue
@@ -18,15 +18,15 @@ import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 import Events from "@/components/shared/tables/Events.vue"
 
 /** Services */
-import { comma, formatBytes, reverseMapping, space, shortHex, tia } from "@/services/utils"
+import { comma, formatBytes, space, shortHex } from "@/services/utils"
 
 /** API */
 import { fetchTransactionsByBlock } from "@/services/api/tx"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useAppStore } from "@/store/app.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
@@ -53,7 +53,6 @@ const isLoading = ref(false)
 const transactions = ref([])
 
 const page = ref(1)
-const pages = computed(() => 1)
 const handleNext = () => {
 	page.value += 1
 }
@@ -183,7 +182,11 @@ const handleApplyMessageTypeFilters = () => {
 	savedFiltersBeforeChanges.value = null
 	isMessageTypePopoverOpen.value = false
 
-	getTransactions()
+	if (page.value > 1) {
+		page.value = 1
+	} else {
+		getTransactions()
+	}
 
 	updateRouteQuery()
 }
@@ -281,28 +284,12 @@ const handleViewRawTransactions = () => {
 <template>
 	<Flex direction="column" gap="4">
 		<Flex align="center" justify="between" :class="$style.header">
-			<Flex align="center" gap="12">
-				<Flex align="center" gap="8">
-					<Icon name="block" size="14" color="primary" />
-					<Text size="13" weight="600" color="primary">Block </Text>
-				</Flex>
-
-				<Flex align="center" gap="8">
-					<Button @click="router.push(`/block/${block.height - 1}`)" type="secondary" size="mini" :disabled="block.height === 0">
-						<Icon name="arrow-redo-right" size="16" color="secondary" :style="{ transform: 'scaleX(-1)' }" />
-						<Text :class="$style.block_nav__txt">Prev</Text>
-					</Button>
-
-					<Button
-						@click="router.push(`/block/${block.height + 1}`)"
-						type="secondary"
-						size="mini"
-						:disabled="block.height === lastBlock?.height"
-					>
-						<Text :class="$style.block_nav__txt">Next</Text>
-						<Icon name="arrow-redo-right" size="16" color="secondary" />
-					</Button>
-				</Flex>
+			<Flex align="center" gap="8">
+				<Icon name="block" size="14" color="primary" />
+				<Text as="h1" size="13" weight="600" color="primary">
+					Block <Text color="secondary">{{ comma(block.height) }} </Text>
+				</Text>
+				<CopyButton :text="block.height" size="12" />
 			</Flex>
 
 			<Flex align="center" gap="12">
@@ -330,18 +317,9 @@ const handleViewRawTransactions = () => {
 
 		<Flex gap="4" :class="$style.content">
 			<Flex direction="column" :class="$style.data">
-				<Flex wide direction="column" gap="12" :class="$style.top">
+				<Flex wide direction="column" gap="8" :class="$style.top">
 					<Flex align="center" justify="between" wide>
-						<Flex align="center" gap="6">
-							<Icon name="block" size="14" color="secondary" />
-
-							<Flex tag="h1" align="center" gap="6">
-								<Text size="12" weight="600" color="secondary"> Height </Text>
-								<Text size="12" weight="600" color="primary">{{ comma(block.height) }}</Text>
-								<CopyButton :text="block.height" size="10" />
-							</Flex>
-						</Flex>
-
+						<Text size="12" weight="600" color="secondary"> Timeline </Text>
 						<Text size="12" weight="600" color="tertiary">
 							{{ DateTime.fromISO(block.time).setLocale("en").toFormat("ff") }}
 						</Text>
@@ -430,6 +408,30 @@ const handleViewRawTransactions = () => {
 							<Text size="12" weight="600" color="secondary"> {{ block.stats.square_size }}</Text>
 						</Flex>
 					</Flex>
+
+					<Flex align="center" gap="8">
+						<Button
+							@click="router.push(`/block/${block.height - 1}`)"
+							wide
+							type="secondary"
+							size="mini"
+							:disabled="block.height === 0"
+						>
+							<Icon name="arrow-redo-right" size="16" color="tertiary" :style="{ transform: 'scaleX(-1)' }" />
+							<Text :class="$style.block_nav__txt"><Text color="secondary">Go to</Text> {{ comma(block.height - 1) }}</Text>
+						</Button>
+
+						<Button
+							@click="router.push(`/block/${block.height + 1}`)"
+							wide
+							type="secondary"
+							size="mini"
+							:disabled="block.height === lastBlock?.height"
+						>
+							<Text :class="$style.block_nav__txt"><Text color="secondary">Go to </Text>{{ comma(block.height + 1) }}</Text>
+							<Icon name="arrow-redo-right" size="16" color="tertiary" />
+						</Button>
+					</Flex>
 				</Flex>
 			</Flex>
 
@@ -1026,6 +1028,16 @@ const handleViewRawTransactions = () => {
 	}
 }
 
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
 @media (max-width: 400px) {
 	.tabs_wrapper {
 		overflow-x: auto;
diff --git a/components/modules/bookmarks/BookmarkItem.vue b/components/modules/bookmarks/BookmarkItem.vue
index e0f4fd0f..8bd389ca 100644
--- a/components/modules/bookmarks/BookmarkItem.vue
+++ b/components/modules/bookmarks/BookmarkItem.vue
@@ -6,8 +6,8 @@ import { DateTime } from "luxon"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 
diff --git a/components/modules/gas/GasFeeCalculator.vue b/components/modules/gas/GasFeeCalculator.vue
index 039b0a38..28b4f801 100644
--- a/components/modules/gas/GasFeeCalculator.vue
+++ b/components/modules/gas/GasFeeCalculator.vue
@@ -6,7 +6,7 @@ import { comma } from "@/services/utils"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const inputEl = ref()
diff --git a/components/modules/namespace/NamespaceCharts.vue b/components/modules/namespace/NamespaceCharts.vue
index 1c452cb8..56d838bd 100644
--- a/components/modules/namespace/NamespaceCharts.vue
+++ b/components/modules/namespace/NamespaceCharts.vue
@@ -17,7 +17,7 @@ import { abbreviate, formatBytes } from "@/services/utils"
 import { fetchNamespaceSeries } from "@/services/api/stats"
 
 /** Store */
-import { useSettingsStore } from "@/store/settings"
+import { useSettingsStore } from "@/store/settings.store"
 const settingsStore = useSettingsStore()
 
 const props = defineProps({
@@ -64,10 +64,10 @@ const handleClose = () => {
 }
 
 const handleChangeChartView = () => {
-	if (chartView.value === 'line') {
-		chartView.value = 'bar'
+	if (chartView.value === "line") {
+		chartView.value = "bar"
 	} else {
-		chartView.value = 'line'
+		chartView.value = "line"
 	}
 }
 
@@ -111,17 +111,24 @@ const xAxisLabels = computed(() => {
 
 	switch (selectedPeriod.value.timeframe) {
 		case "month":
-			labels.firstDate = DateTime.now().minus({ months: selectedPeriod.value.value - 1 }).toFormat("LLL y")
+			labels.firstDate = DateTime.now()
+				.minus({ months: selectedPeriod.value.value - 1 })
+				.toFormat("LLL y")
 			labels.lastDate = loadLastValue.value ? DateTime.now().toFormat("LLL") : DateTime.now().minus({ months: 1 }).toFormat("LLL")
-			break;
+			break
 		case "day":
-			labels.firstDate = DateTime.now().minus({ days: selectedPeriod.value.value - 1 }).toFormat("LLL dd")
+			labels.firstDate = DateTime.now()
+				.minus({ days: selectedPeriod.value.value - 1 })
+				.toFormat("LLL dd")
 			labels.lastDate = loadLastValue.value ? "Today" : DateTime.now().minus({ days: 1 }).toFormat("LLL dd")
-			break;
+			break
 		default:
-			labels.firstDate = DateTime.now().minus({ hours: selectedPeriod.value.value - 1 }).set({ minutes: 0 }).toFormat("hh:mm a")
+			labels.firstDate = DateTime.now()
+				.minus({ hours: selectedPeriod.value.value - 1 })
+				.set({ minutes: 0 })
+				.toFormat("hh:mm a")
 			labels.lastDate = loadLastValue.value ? "Now" : DateTime.now().minus({ hours: 1 }).set({ minutes: 0 }).toFormat("hh:mm a")
-			break;
+			break
 	}
 
 	return labels
@@ -172,15 +179,15 @@ const buildLineChart = (chartEl, data, onEnter, onLeave) => {
 			selectedPeriod.value.timeframe === "month"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
 				: selectedPeriod.value.timeframe === "day"
-					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		const badgeWidth = badgeEl.value.getBoundingClientRect().width
 		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
 			badgeOffset.value = 0
 		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + ((data.length - 1 - idx) * 2)
+			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
 		} else {
 			badgeOffset.value = badgeWidth / 2
 		}
@@ -227,44 +234,38 @@ const buildLineChart = (chartEl, data, onEnter, onLeave) => {
 	let path2 = null
 	path1 = svg
 		.append("path")
-			.attr("fill", "none")
-			.attr("stroke", "var(--brand)")
-			.attr("stroke-width", 2)
-			.attr("stroke-linecap", "round")
-			.attr("stroke-linejoin", "round")
-			.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
+		.attr("fill", "none")
+		.attr("stroke", "var(--brand)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
 
 	if (loadLastValue.value) {
 		// Create pattern
 		const defs = svg.append("defs")
-		const pattern = defs.append("pattern")
+		const pattern = defs
+			.append("pattern")
 			.attr("id", "dashedPattern")
 			.attr("width", 8)
 			.attr("height", 2)
 			.attr("patternUnits", "userSpaceOnUse")
-		pattern.append("rect")
-			.attr("width", 4)
-			.attr("height", 2)
-			.attr("fill", "var(--brand)")
-		pattern.append("rect")
-			.attr("x", 8)
-			.attr("width", 4)
-			.attr("height", 2)
-			.attr("fill", "transparent")
-		
+		pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", "var(--brand)")
+		pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
+
 		// Last dash segment
 		path2 = svg
 			.append("path")
-				.attr("fill", "none")
-				.attr("stroke", "url(#dashedPattern)")
-				.attr("stroke-width", 2)
-				.attr("stroke-linecap", "round")
-				.attr("stroke-linejoin", "round")
-				.attr("d", line(data.slice(data.length - 2, data.length)))
+			.attr("fill", "none")
+			.attr("stroke", "url(#dashedPattern)")
+			.attr("stroke-width", 2)
+			.attr("stroke-linecap", "round")
+			.attr("stroke-linejoin", "round")
+			.attr("d", line(data.slice(data.length - 2, data.length)))
 	}
-	
+
 	const totalDuration = 1_000
-	const path1Duration = loadLastValue.value ? totalDuration / data.length * (data.length - 1) : totalDuration
+	const path1Duration = loadLastValue.value ? (totalDuration / data.length) * (data.length - 1) : totalDuration
 	const path1Length = path1.node().getTotalLength()
 
 	path1
@@ -274,11 +275,11 @@ const buildLineChart = (chartEl, data, onEnter, onLeave) => {
 		.duration(path1Duration)
 		.ease(d3.easeLinear)
 		.attr("stroke-dashoffset", 0)
-	
+
 	if (loadLastValue.value) {
 		const path2Duration = totalDuration / data.length
 		const path2Length = path2.node().getTotalLength() + 1
-		
+
 		path2
 			.attr("stroke-dasharray", path2Length)
 			.attr("stroke-dashoffset", path2Length)
@@ -289,17 +290,15 @@ const buildLineChart = (chartEl, data, onEnter, onLeave) => {
 			.attr("stroke-dashoffset", 0)
 	}
 
-	const point = svg.append("circle")
+	const point = svg
+		.append("circle")
 		.attr("cx", x(data[data.length - 1].date))
 		.attr("cy", y(data[data.length - 1].value))
 		.attr("fill", "var(--brand)")
 		.attr("r", 3)
 		.attr("opacity", 0)
-	
-	point.transition()
-		.delay(totalDuration)
-		.duration(200)
-		.attr("opacity", 1)
+
+	point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
 
 	if (chartEl.children[0]) chartEl.children[0].remove()
 	chartEl.append(svg.node())
@@ -329,17 +328,15 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 	const onPointermoved = (event) => {
 		onEnter()
 
-		// const idx = bisect(data, x.invert(d3.pointer(event)[0]))
 		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
-		
+
 		const elements = document.querySelectorAll(`[metric="${metric}"]`)
-		elements.forEach(el => {
-			if (+el.getAttribute('data-index') === idx) {
+		elements.forEach((el) => {
+			if (+el.getAttribute("data-index") === idx) {
 				el.style.filter = "brightness(1.2)"
 			} else {
 				el.style.filter = "brightness(0.6)"
 			}
-			
 		})
 
 		tooltipXOffset.value = x(data[idx].date)
@@ -359,15 +356,15 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 			selectedPeriod.value.timeframe === "month"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
 				: selectedPeriod.value.timeframe === "day"
-					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		const badgeWidth = badgeEl.value.getBoundingClientRect().width
 		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
 			badgeOffset.value = 0
 		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + ((data.length - 1 - idx) * 2)
+			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
 		} else {
 			badgeOffset.value = (badgeWidth - barWidth) / 2
 		}
@@ -375,8 +372,8 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 	const onPointerleft = () => {
 		onLeave()
 
-		const elements = document.querySelectorAll('[data-index]')
-		elements.forEach(el => {
+		const elements = document.querySelectorAll("[data-index]")
+		elements.forEach((el) => {
 			el.style.filter = ""
 		})
 		badgeText.value = ""
@@ -423,25 +420,26 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 		.attr("patternUnits", "userSpaceOnUse")
 		.attr("patternTransform", "rotate(45)")
 		.append("rect")
-			.attr("width", 2)
-			.attr("height", 6)
-			.attr("transform", "translate(0,0)")
-			.attr("fill", "var(--brand)")
+		.attr("width", 2)
+		.attr("height", 6)
+		.attr("transform", "translate(0,0)")
+		.attr("fill", "var(--brand)")
 
-	svg.append('g')
+	svg.append("g")
 		.selectAll("g")
 		.data(data)
-		.enter().append("rect")
+		.enter()
+		.append("rect")
 		.attr("class", "bar")
-		.attr('data-index', (d, i) => i)
-		.attr('metric', metric)
-		.attr("x", d => x(new Date(d.date)))
-		.attr('y', d => y(d.value))
+		.attr("data-index", (d, i) => i)
+		.attr("metric", metric)
+		.attr("x", (d) => x(new Date(d.date)))
+		.attr("y", (d) => y(d.value))
 		.attr("width", barWidth)
-		.attr('fill', (d, i) => (loadLastValue.value && i === data.length - 1) ? `url(#diagonal-stripe)` : "var(--brand)")
+		.attr("fill", (d, i) => (loadLastValue.value && i === data.length - 1 ? `url(#diagonal-stripe)` : "var(--brand)"))
 		.transition()
 		.duration(1_000)
-		.attr('height', d => Math.max(height - marginBottom - 6 - y(d.value), 0))
+		.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
 
 	if (chartEl.children[0]) chartEl.children[0].remove()
 	chartEl.append(svg.node())
@@ -452,13 +450,15 @@ const fetchData = async (metric, from) => {
 		id: props.id,
 		name: metric,
 		timeframe: selectedPeriod.value.timeframe,
-		from: from ? from : parseInt(
-			DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
-			}).ts / 1_000,
-		),
+		from: from
+			? from
+			: parseInt(
+					DateTime.now().minus({
+						days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+						hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+						months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
+					}).ts / 1_000,
+			  ),
 	})
 
 	return data
@@ -470,15 +470,19 @@ const getSizeSeries = async () => {
 
 	const sizeSeriesMap = {}
 	sizeSeriesRawData.forEach((item) => {
-		sizeSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		sizeSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -487,9 +491,13 @@ const getSizeSeries = async () => {
 		}
 		sizeSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(sizeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(
+					sizeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")],
+				) || 0,
 		})
-	}}
+	}
+}
 
 const getPfbSeries = async () => {
 	pfbSeries.value = []
@@ -498,15 +506,19 @@ const getPfbSeries = async () => {
 
 	const pfbSeriesMap = {}
 	pfbSeriesRawData.forEach((item) => {
-		pfbSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		pfbSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -515,7 +527,9 @@ const getPfbSeries = async () => {
 		}
 		pfbSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(pfbSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(pfbSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
+				0,
 		})
 	}
 }
@@ -574,8 +588,8 @@ watch(
 		updateUserSettings()
 		if (!isLoading.value) {
 			buildNamespaceCharts(false)
-		}		
-	}
+		}
+	},
 )
 
 const debouncedRedraw = useDebounceFn((e) => {
@@ -641,7 +655,9 @@ onBeforeUnmount(() => {
 									gap="12"
 									:class="$style.chart_selector"
 									:style="{
-										background: `linear-gradient(to ${chartView === 'line' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+										background: `linear-gradient(to ${
+											chartView === 'line' ? 'right' : 'left'
+										}, var(--op-5) 50%, transparent 50%)`,
 									}"
 								>
 									<Icon
@@ -720,11 +736,16 @@ onBeforeUnmount(() => {
 
 					<Transition name="fastfade">
 						<div v-if="showSeriesTooltip" :class="$style.tooltip_wrapper">
-							<div v-if="chartView === 'line'"
+							<div
+								v-if="chartView === 'line'"
 								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 								:class="$style.dot"
 							/>
-							<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+							<div
+								v-if="chartView === 'line'"
+								:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+								:class="$style.line"
+							/>
 							<div
 								ref="badgeEl"
 								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
@@ -803,11 +824,16 @@ onBeforeUnmount(() => {
 
 					<Transition name="fastfade">
 						<div v-if="showPfbTooltip" :class="$style.tooltip_wrapper">
-							<div v-if="chartView === 'line'"
+							<div
+								v-if="chartView === 'line'"
 								:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 								:class="$style.dot"
 							/>
-							<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+							<div
+								v-if="chartView === 'line'"
+								:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+								:class="$style.line"
+							/>
 							<div
 								ref="badgeEl"
 								:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
diff --git a/components/modules/namespace/NamespaceOverview.vue b/components/modules/namespace/NamespaceOverview.vue
index d4b4afcd..54f1e144 100644
--- a/components/modules/namespace/NamespaceOverview.vue
+++ b/components/modules/namespace/NamespaceOverview.vue
@@ -1,9 +1,8 @@
-import { getNamespaceID } from '~/services/utils';
 <script setup>
 /** UI */
 import Button from "@/components/ui/Button.vue"
 import BookmarkButton from "@/components/BookmarkButton.vue"
-import { Dropdown, DropdownItem, DropdownDivider } from "@/components/ui/Dropdown"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Tables */
@@ -11,14 +10,14 @@ import BlobsTable from "./tables/BlobsTable.vue"
 import MessagesTable from "./tables/MessagesTable.vue"
 
 /** Services */
-import { comma, formatBytes, getNamespaceID, shortHex, midHex, space } from "@/services/utils"
+import { comma, formatBytes, getNamespaceID, shortHex, space } from "@/services/utils"
 
 /** API */
 import { fetchNamespaceBlobs, fetchNamespaceMessagesById, fetchNamespaceRollups } from "@/services/api/namespace"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
@@ -192,10 +191,7 @@ const handleViewRawMessages = () => {
 						Submit Blob
 					</Button>
 
-					<BookmarkButton
-						type="namespace"
-						:id="namespace.namespace_id"
-					/>
+					<BookmarkButton type="namespace" :id="namespace.namespace_id" />
 				</Flex>
 
 				<div class="divider_v" />
@@ -504,6 +500,16 @@ const handleViewRawMessages = () => {
 	}
 }
 
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
 @media (max-width: 400px) {
 	.tabs_wrapper {
 		overflow-x: auto;
diff --git a/components/modules/namespace/tables/BlobsTable.vue b/components/modules/namespace/tables/BlobsTable.vue
index 9a73aa1d..24f309cc 100644
--- a/components/modules/namespace/tables/BlobsTable.vue
+++ b/components/modules/namespace/tables/BlobsTable.vue
@@ -9,8 +9,8 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { formatBytes, getNamespaceID, space } from "@/services/utils"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 
@@ -26,7 +26,7 @@ const props = defineProps({
 	source: {
 		type: String,
 		required: false,
-	}
+	},
 })
 
 const handleViewBlob = (blob) => {
@@ -47,7 +47,9 @@ const handleViewBlob = (blob) => {
 		<table :class="$style.table">
 			<thead>
 				<tr>
-					<th><Text size="12" weight="600" color="tertiary"> {{ source === "account" ? "Namespace" : "Signer" }} </Text></th>
+					<th>
+						<Text size="12" weight="600" color="tertiary"> {{ source === "account" ? "Namespace" : "Signer" }} </Text>
+					</th>
 					<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
 					<th><Text size="12" weight="600" color="tertiary">Share Commitments</Text></th>
 					<th><Text size="12" weight="600" color="tertiary">Size</Text></th>
@@ -61,7 +63,7 @@ const handleViewBlob = (blob) => {
 							<Flex direction="column" gap="4">
 								<Flex align="center" gap="8">
 									<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-										{{ $getDisplayName('namespaces', blob.namespace.namespace_id) }}
+										{{ $getDisplayName("namespaces", blob.namespace.namespace_id) }}
 									</Text>
 
 									<CopyButton :text="getNamespaceID(blob.namespace.namespace_id)" />
@@ -80,7 +82,7 @@ const handleViewBlob = (blob) => {
 							<template #content>
 								{{ space(getNamespaceID(blob.namespace.namespace_id)) }}
 							</template>
-						</Tooltip>					
+						</Tooltip>
 					</td>
 					<td v-else>
 						<Tooltip v-if="blob.signer.hash" position="start" delay="500">
@@ -103,7 +105,7 @@ const handleViewBlob = (blob) => {
 							<Text size="12" weight="600" color="primary">
 								{{ DateTime.fromISO(blob.time).toRelative({ locale: "en", style: "short" }) }}
 							</Text>
-							
+
 							<Text size="12" weight="500" color="tertiary">
 								{{ DateTime.fromISO(blob.time).setLocale("en").toFormat("LLL d, t") }}
 							</Text>
diff --git a/components/modules/navigation/NavLink.vue b/components/modules/navigation/NavLink.vue
index 6d51d22a..dfb5028d 100644
--- a/components/modules/navigation/NavLink.vue
+++ b/components/modules/navigation/NavLink.vue
@@ -8,22 +8,22 @@ const props = defineProps({
 	link: Object,
 })
 
-const isExpanded = ref(props.link.children?.some((l) => l.path === route.path) ? true : (props.link.name === 'Rollups' ? true : false))
+const isExpanded = ref(props.link.children?.some((l) => l.path === route.path))
 
 const isSubRouteActive = (link) => {
 	let res = false
 	if (link.queryParam) {
-		const queryString = route.fullPath.split('?')[1]
+		const queryString = route.fullPath.split("?")[1]
 		const params = new URLSearchParams(queryString)
-		
+
 		for (const [key, value] of params.entries()) {
 			if (link.queryParam[key] === value) {
 				res = true
-				break;
+				break
 			}
 		}
 	}
-	
+
 	return res
 }
 
@@ -34,7 +34,7 @@ const isAnyChildrenActive = computed(() => {
 		for (const link of props.link.children) {
 			if (isSubRouteActive(link)) {
 				res = true
-				break;
+				break
 			}
 		}
 	}
@@ -58,7 +58,7 @@ const isActive = computed(() => {
 			res = route.path === props.link.path
 		}
 	}
-	
+
 	return res
 })
 
@@ -74,29 +74,30 @@ const handleClick = () => {
 			align="center"
 			justify="between"
 			gap="8"
-			:class="[$style.link, (isActive && (!isAnyChildrenActive || !isExpanded)) && $style.active, (isAnyChildrenActive && isExpanded) && $style.parentActive]"
+			:class="[
+				$style.link,
+				isActive && (!isAnyChildrenActive || !isExpanded) && $style.active,
+				isAnyChildrenActive && isExpanded && $style.parentActive,
+			]"
 		>
 			<Flex align="center" gap="8">
-				<Icon :name="link.icon" size="14" color="secondary" :class="$style.link_icon" />
+				<Icon :name="link.icon" size="14" :color="!link.new ? 'secondary' : 'blue'" :class="$style.link_icon" />
 				<Text size="13" weight="600" color="secondary">{{ link.name }}</Text>
-				<Icon v-if="link.external" name="arrow-narrow-up-right" size="14" color="tertiary" />
 			</Flex>
 
-			<Flex @click.prevent.stop="isExpanded = !isExpanded" :class="$style.chevron_icon">
-				<Icon
-					v-if="link.children"
-					name="chevron"
-					size="14"
-					color="secondary"
-					:style="{ transform: `rotate(${isExpanded ? '0deg' : '-90deg'})` }"
-				/>
+			<Flex v-if="link.children" @click.prevent.stop="isExpanded = !isExpanded" :class="[$style.icon, $style.chevron]">
+				<Icon name="chevron" size="14" color="tertiary" :style="{ transform: `rotate(${isExpanded ? '0deg' : '-90deg'})` }" />
+			</Flex>
+
+			<Flex v-if="link.external" :class="$style.icon">
+				<Icon name="arrow-narrow-up-right-circle" size="14" color="tertiary" />
 			</Flex>
 		</Flex>
 	</NuxtLink>
 
 	<template v-if="isExpanded">
 		<Flex direction="column" gap="2">
-			<NavLink v-for="l in link.children?.filter(l => l.show)" :link="l" @onClose="handleClick" />
+			<NavLink v-for="l in link.children?.filter((l) => l.show)" :link="l" @onClose="handleClick" />
 		</Flex>
 	</template>
 </template>
@@ -139,20 +140,30 @@ const handleClick = () => {
 	}
 }
 
-.chevron_icon {
+.icon {
 	box-sizing: content-box;
-	border-radius: 5px;
 
 	padding: 4px;
 
-	transition: all 0.2s ease;
+	&.chevron {
+		box-sizing: content-box;
+		border-radius: 5px;
 
-	&:hover {
-		background: var(--op-10);
-	}
+		padding: 4px;
 
-	& svg {
 		transition: all 0.2s ease;
+
+		&:hover {
+			background: var(--op-10);
+
+			& svg {
+				fill: var(--txt-primary);
+			}
+		}
+
+		& svg {
+			transition: all 0.2s ease;
+		}
 	}
 }
 </style>
diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
index def91420..f1b1c25d 100644
--- a/components/modules/rollup/RollupCharts.vue
+++ b/components/modules/rollup/RollupCharts.vue
@@ -20,7 +20,7 @@ import { fetchRollupSeries } from "@/services/api/stats"
 import { fetchRollups, fetchRollupTVL } from "@/services/api/rollup"
 
 /** Store */
-import { useSettingsStore } from "@/store/settings"
+import { useSettingsStore } from "@/store/settings.store"
 const settingsStore = useSettingsStore()
 
 const props = defineProps({
@@ -67,10 +67,10 @@ const handleClose = () => {
 }
 
 const handleChangeChartView = () => {
-	if (chartView.value === 'line') {
-		chartView.value = 'bar'
+	if (chartView.value === "line") {
+		chartView.value = "bar"
 	} else {
-		chartView.value = 'line'
+		chartView.value = "line"
 	}
 }
 
@@ -122,7 +122,7 @@ const getXAxisLabels = (start, tvl = false) => {
 
 	let tf = selectedPeriod.value.timeframe
 	let periodValue = selectedPeriod.value.value
-	if ( tvl && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
+	if (tvl && ["hour", "week"].includes(selectedPeriod.value.timeframe)) {
 		tf = "day"
 		periodValue = 30
 	}
@@ -130,19 +130,26 @@ const getXAxisLabels = (start, tvl = false) => {
 	switch (tf) {
 		case "month":
 			start
-				? res = DateTime.now().minus({ months: periodValue - 1 }).toFormat("LLL y")
-				: res = loadLastValue.value ? DateTime.now().toFormat("LLL") : DateTime.now().minus({ months: 1 }).toFormat("LLL")
-			break;
+				? (res = DateTime.now()
+						.minus({ months: periodValue - 1 })
+						.toFormat("LLL y"))
+				: (res = loadLastValue.value ? DateTime.now().toFormat("LLL") : DateTime.now().minus({ months: 1 }).toFormat("LLL"))
+			break
 		case "day":
 			start
-				? res = DateTime.now().minus({ days: periodValue - 1 }).toFormat("LLL dd")
-				: res = loadLastValue.value ? "Today" : DateTime.now().minus({ days: 1 }).toFormat("LLL dd")
-			break;
+				? (res = DateTime.now()
+						.minus({ days: periodValue - 1 })
+						.toFormat("LLL dd"))
+				: (res = loadLastValue.value ? "Today" : DateTime.now().minus({ days: 1 }).toFormat("LLL dd"))
+			break
 		default:
 			start
-				? res = DateTime.now().minus({ hours: periodValue - 1 }).set({ minutes: 0 }).toFormat("hh:mm a")
-				: res = loadLastValue.value ? "Now" : DateTime.now().minus({ hours: 1 }).set({ minutes: 0 }).toFormat("hh:mm a")
-			break;
+				? (res = DateTime.now()
+						.minus({ hours: periodValue - 1 })
+						.set({ minutes: 0 })
+						.toFormat("hh:mm a"))
+				: (res = loadLastValue.value ? "Now" : DateTime.now().minus({ hours: 1 }).set({ minutes: 0 }).toFormat("hh:mm a"))
+			break
 	}
 
 	return res
@@ -197,15 +204,15 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 			tf === "month"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
 				: tf === "day"
-					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		const badgeWidth = badgeEl.value.getBoundingClientRect().width
 		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
 			badgeOffset.value = 0
 		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + ((data.length - 1 - idx) * 2)
+			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
 		} else {
 			badgeOffset.value = badgeWidth / 2
 		}
@@ -252,44 +259,38 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 	let path2 = null
 	path1 = svg
 		.append("path")
-			.attr("fill", "none")
-			.attr("stroke", "var(--brand)")
-			.attr("stroke-width", 2)
-			.attr("stroke-linecap", "round")
-			.attr("stroke-linejoin", "round")
-			.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
+		.attr("fill", "none")
+		.attr("stroke", "var(--brand)")
+		.attr("stroke-width", 2)
+		.attr("stroke-linecap", "round")
+		.attr("stroke-linejoin", "round")
+		.attr("d", line(loadLastValue.value ? data.slice(0, data.length - 1) : data))
 
 	if (loadLastValue.value) {
 		// Create pattern
 		const defs = svg.append("defs")
-		const pattern = defs.append("pattern")
+		const pattern = defs
+			.append("pattern")
 			.attr("id", "dashedPattern")
 			.attr("width", 8)
 			.attr("height", 2)
 			.attr("patternUnits", "userSpaceOnUse")
-		pattern.append("rect")
-			.attr("width", 4)
-			.attr("height", 2)
-			.attr("fill", "var(--brand)")
-		pattern.append("rect")
-			.attr("x", 8)
-			.attr("width", 4)
-			.attr("height", 2)
-			.attr("fill", "transparent")
-		
+		pattern.append("rect").attr("width", 4).attr("height", 2).attr("fill", "var(--brand)")
+		pattern.append("rect").attr("x", 8).attr("width", 4).attr("height", 2).attr("fill", "transparent")
+
 		// Last dash segment
 		path2 = svg
 			.append("path")
-				.attr("fill", "none")
-				.attr("stroke", "url(#dashedPattern)")
-				.attr("stroke-width", 2)
-				.attr("stroke-linecap", "round")
-				.attr("stroke-linejoin", "round")
-				.attr("d", line(data.slice(data.length - 2, data.length)))
+			.attr("fill", "none")
+			.attr("stroke", "url(#dashedPattern)")
+			.attr("stroke-width", 2)
+			.attr("stroke-linecap", "round")
+			.attr("stroke-linejoin", "round")
+			.attr("d", line(data.slice(data.length - 2, data.length)))
 	}
-	
+
 	const totalDuration = 1_000
-	const path1Duration = loadLastValue.value ? totalDuration / data.length * (data.length - 1) : totalDuration
+	const path1Duration = loadLastValue.value ? (totalDuration / data.length) * (data.length - 1) : totalDuration
 	const path1Length = path1.node().getTotalLength()
 
 	path1
@@ -299,11 +300,11 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 		.duration(path1Duration)
 		.ease(d3.easeLinear)
 		.attr("stroke-dashoffset", 0)
-	
+
 	if (loadLastValue.value) {
 		const path2Duration = totalDuration / data.length
 		const path2Length = path2.node().getTotalLength() + 1
-		
+
 		path2
 			.attr("stroke-dasharray", path2Length)
 			.attr("stroke-dashoffset", path2Length)
@@ -314,17 +315,15 @@ const buildLineChart = (chartEl, data, onEnter, onLeave, metric) => {
 			.attr("stroke-dashoffset", 0)
 	}
 
-	const point = svg.append("circle")
+	const point = svg
+		.append("circle")
 		.attr("cx", x(data[data.length - 1].date))
 		.attr("cy", y(data[data.length - 1].value))
 		.attr("fill", "var(--brand)")
 		.attr("r", 3)
 		.attr("opacity", 0)
-	
-	point.transition()
-		.delay(totalDuration)
-		.duration(200)
-		.attr("opacity", 1)
+
+	point.transition().delay(totalDuration).duration(200).attr("opacity", 1)
 
 	if (chartEl.children[0]) chartEl.children[0].remove()
 	chartEl.append(svg.node())
@@ -355,15 +354,14 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 		onEnter()
 
 		const idx = bisect(data, x.invert(d3.pointer(event)[0] - barWidth / 2))
-		
+
 		const elements = document.querySelectorAll(`[metric="${metric}"]`)
-		elements.forEach(el => {
-			if (+el.getAttribute('data-index') === idx) {
+		elements.forEach((el) => {
+			if (+el.getAttribute("data-index") === idx) {
 				el.style.filter = "brightness(1.2)"
 			} else {
 				el.style.filter = "brightness(0.6)"
 			}
-			
 		})
 
 		tooltipXOffset.value = x(data[idx].date)
@@ -387,15 +385,15 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 			tf === "month"
 				? DateTime.fromJSDate(data[idx].date).toFormat("LLL")
 				: tf === "day"
-					? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
-					: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
+				? DateTime.fromJSDate(data[idx].date).toFormat("LLL dd")
+				: DateTime.fromJSDate(data[idx].date).set({ minutes: 0 }).toFormat("hh:mm a")
 
 		if (!badgeEl.value) return
 		const badgeWidth = badgeEl.value.getBoundingClientRect().width
 		if (tooltipXOffset.value - marginLeft < badgeWidth / 2) {
 			badgeOffset.value = 0
 		} else if (badgeWidth + tooltipXOffset.value > width) {
-			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + ((data.length - 1 - idx) * 2)
+			badgeOffset.value = Math.abs(width - (badgeWidth + tooltipXOffset.value)) + (data.length - 1 - idx) * 2
 		} else {
 			badgeOffset.value = (badgeWidth - barWidth) / 2
 		}
@@ -403,8 +401,8 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 	const onPointerleft = () => {
 		onLeave()
 
-		const elements = document.querySelectorAll('[data-index]')
-		elements.forEach(el => {
+		const elements = document.querySelectorAll("[data-index]")
+		elements.forEach((el) => {
 			el.style.filter = ""
 		})
 		badgeText.value = ""
@@ -451,25 +449,26 @@ const buildBarChart = (chartEl, data, onEnter, onLeave, metric) => {
 		.attr("patternUnits", "userSpaceOnUse")
 		.attr("patternTransform", "rotate(45)")
 		.append("rect")
-			.attr("width", 2)
-			.attr("height", 6)
-			.attr("transform", "translate(0,0)")
-			.attr("fill", "var(--brand)")
+		.attr("width", 2)
+		.attr("height", 6)
+		.attr("transform", "translate(0,0)")
+		.attr("fill", "var(--brand)")
 
-	svg.append('g')
+	svg.append("g")
 		.selectAll("g")
 		.data(data)
-		.enter().append("rect")
+		.enter()
+		.append("rect")
 		.attr("class", "bar")
-		.attr('data-index', (d, i) => i)
-		.attr('metric', metric)
-		.attr("x", d => x(new Date(d.date)))
-		.attr('y', d => y(d.value))
+		.attr("data-index", (d, i) => i)
+		.attr("metric", metric)
+		.attr("x", (d) => x(new Date(d.date)))
+		.attr("y", (d) => y(d.value))
 		.attr("width", barWidth)
-		.attr('fill', (d, i) => (loadLastValue.value && i === data.length - 1) ? `url(#diagonal-stripe)` : "var(--brand)")
+		.attr("fill", (d, i) => (loadLastValue.value && i === data.length - 1 ? `url(#diagonal-stripe)` : "var(--brand)"))
 		.transition()
 		.duration(1_000)
-		.attr('height', d => Math.max(height - marginBottom - 6 - y(d.value), 0))
+		.attr("height", (d) => Math.max(height - marginBottom - 6 - y(d.value), 0))
 
 	if (chartEl.children[0]) chartEl.children[0].remove()
 	chartEl.append(svg.node())
@@ -480,7 +479,7 @@ const getRollupsList = async () => {
 		limit: 30,
 	})
 
-	rollupsList.value = sortArrayOfObjects(data, 'slug').filter(r => r.id !== props.rollup.id)
+	rollupsList.value = sortArrayOfObjects(data, "slug").filter((r) => r.id !== props.rollup.id)
 }
 
 const fetchData = async (rollup, metric, from, timeframe) => {
@@ -488,13 +487,15 @@ const fetchData = async (rollup, metric, from, timeframe) => {
 		id: rollup.id,
 		name: metric,
 		timeframe: timeframe ? timeframe : selectedPeriod.value.timeframe,
-		from: from ? from : parseInt(
-			DateTime.now().minus({
-				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
-				hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
-			}).ts / 1_000,
-		),
+		from: from
+			? from
+			: parseInt(
+					DateTime.now().minus({
+						days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
+						hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
+						months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value : 0,
+					}).ts / 1_000,
+			  ),
 	})
 
 	return data
@@ -502,19 +503,23 @@ const fetchData = async (rollup, metric, from, timeframe) => {
 const getSizeSeries = async () => {
 	sizeSeries.value = []
 
-	const sizeSeriesRawData = await fetchData(props.rollup, 'size')
+	const sizeSeriesRawData = await fetchData(props.rollup, "size")
 
 	const sizeSeriesMap = {}
 	sizeSeriesRawData.forEach((item) => {
-		sizeSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		sizeSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -523,7 +528,10 @@ const getSizeSeries = async () => {
 		}
 		sizeSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(sizeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(
+					sizeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")],
+				) || 0,
 		})
 	}
 }
@@ -531,19 +539,23 @@ const getSizeSeries = async () => {
 const getPfbSeries = async () => {
 	pfbSeries.value = []
 
-	const blobsSeriesRawData = await fetchData(props.rollup, 'blobs_count')
+	const blobsSeriesRawData = await fetchData(props.rollup, "blobs_count")
 
 	const blobsSeriesMap = {}
 	blobsSeriesRawData.forEach((item) => {
-		blobsSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		blobsSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -552,7 +564,10 @@ const getPfbSeries = async () => {
 		}
 		pfbSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(blobsSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(
+					blobsSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")],
+				) || 0,
 		})
 	}
 }
@@ -560,19 +575,23 @@ const getPfbSeries = async () => {
 const getFeeSeries = async () => {
 	feeSeries.value = []
 
-	const feeSeriesRawData = await fetchData(props.rollup, 'fee')
+	const feeSeriesRawData = await fetchData(props.rollup, "fee")
 
 	const feeSeriesMap = {}
 	feeSeriesRawData.forEach((item) => {
-		feeSeriesMap[DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
+		feeSeriesMap[
+			DateTime.fromISO(item.time).toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")
+		] = item.value
 	})
 
 	for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
 		let dt
 		if (selectedPeriod.value.timeframe === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: selectedPeriod.value.timeframe === "month" ? selectedPeriod.value.value - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value - i : 0,
@@ -581,7 +600,9 @@ const getFeeSeries = async () => {
 		}
 		feeSeries.value.push({
 			date: dt.toJSDate(),
-			value: parseInt(feeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+			value:
+				parseInt(feeSeriesMap[dt.toFormat(["day", "month"].includes(selectedPeriod.value.timeframe) ? "y-LL-dd" : "y-LL-dd-HH")]) ||
+				0,
 		})
 	}
 }
@@ -612,9 +633,11 @@ const getTVLSeries = async () => {
 	for (let i = 1; i < periodValue + 1; i++) {
 		let dt
 		if (tf === "month") {
-			dt = DateTime.now().startOf('month').minus({
-				months: tf === "month" ? periodValue - i : 0,
-			})
+			dt = DateTime.now()
+				.startOf("month")
+				.minus({
+					months: tf === "month" ? periodValue - i : 0,
+				})
 		} else {
 			dt = DateTime.now().minus({
 				days: tf === "day" ? periodValue - i : 0,
@@ -632,18 +655,18 @@ const prepareComparisonData = async () => {
 	isLoading.value = true
 
 	if (!comparisonData.value[0]?.fee) {
-			comparisonData.value[0] = {
-				fee: feeSeries.value.reduce((sum, el) => sum + el.value, 0),
-				pfb: pfbSeries.value.reduce((sum, el) => sum + el.value, 0),
-				size: sizeSeries.value.reduce((sum, el) => sum + el.value, 0),
+		comparisonData.value[0] = {
+			fee: feeSeries.value.reduce((sum, el) => sum + el.value, 0),
+			pfb: pfbSeries.value.reduce((sum, el) => sum + el.value, 0),
+			size: sizeSeries.value.reduce((sum, el) => sum + el.value, 0),
 		}
 	}
 
 	if (!comparisonData.value[1]?.fee) {
-		let feeData = await fetchData(selectedRollup.value, 'fee')
-		let pfbData = await fetchData(selectedRollup.value, 'blobs_count')
-		let sizeData = await fetchData(selectedRollup.value, 'size')
-		
+		let feeData = await fetchData(selectedRollup.value, "fee")
+		let pfbData = await fetchData(selectedRollup.value, "blobs_count")
+		let sizeData = await fetchData(selectedRollup.value, "size")
+
 		comparisonData.value[1] = {
 			fee: feeData.reduce((sum, el) => sum + +el.value, 0),
 			pfb: pfbData.reduce((sum, el) => sum + +el.value, 0),
@@ -653,9 +676,9 @@ const prepareComparisonData = async () => {
 
 	let firstRollup = comparisonData.value[0]
 	let secondRollup = comparisonData.value[1]
-	Object.keys(firstRollup).forEach(el => {
+	Object.keys(firstRollup).forEach((el) => {
 		let sum = firstRollup[el] + secondRollup[el]
-		firstRollup[el + '_graph'] = Math.max(Math.round(firstRollup[el] / sum * 100, 2), 1)
+		firstRollup[el + "_graph"] = Math.max(Math.round((firstRollup[el] / sum) * 100, 2), 1)
 	})
 
 	isLoading.value = false
@@ -771,8 +794,8 @@ watch(
 		updateUserSettings()
 		if (!isLoading.value) {
 			buildRollupCharts(false)
-		}		
-	}
+		}
+	},
 )
 
 watch(
@@ -848,7 +871,9 @@ onBeforeUnmount(() => {
 									gap="12"
 									:class="$style.chart_selector"
 									:style="{
-										background: `linear-gradient(to ${chartView === 'line' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+										background: `linear-gradient(to ${
+											chartView === 'line' ? 'right' : 'left'
+										}, var(--op-5) 50%, transparent 50%)`,
 									}"
 								>
 									<Icon
@@ -928,11 +953,16 @@ onBeforeUnmount(() => {
 
 						<Transition name="fastfade">
 							<div v-if="showSeriesTooltip" :class="$style.tooltip_wrapper">
-								<div v-if="chartView === 'line'"
+								<div
+									v-if="chartView === 'line'"
 									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 									:class="$style.dot"
 								/>
-								<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+								<div
+									v-if="chartView === 'line'"
+									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+									:class="$style.line"
+								/>
 								<div
 									ref="badgeEl"
 									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
@@ -984,7 +1014,8 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{
 									opacity:
-										Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2) != Math.max(...pfbSeries.map((d) => d.value))
+										Math.round(Math.max(...pfbSeries.map((d) => d.value)) / 2) !=
+										Math.max(...pfbSeries.map((d) => d.value))
 											? 1
 											: 0,
 								}"
@@ -1011,11 +1042,16 @@ onBeforeUnmount(() => {
 
 						<Transition name="fastfade">
 							<div v-if="showPfbTooltip" :class="$style.tooltip_wrapper">
-								<div v-if="chartView === 'line'"
+								<div
+									v-if="chartView === 'line'"
 									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 									:class="$style.dot"
 								/>
-								<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+								<div
+									v-if="chartView === 'line'"
+									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+									:class="$style.line"
+								/>
 								<div
 									ref="badgeEl"
 									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
@@ -1058,9 +1094,12 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{ opacity: Math.max(...feeSeries.map((d) => d.value)) ? 1 : 0 }"
 							>
-								{{ tia(Math.max(...feeSeries.map((d) => d.value)), 0) > 1
-									? tia(Math.max(...feeSeries.map((d) => d.value)), 0)
-									: tia(Math.max(...feeSeries.map((d) => d.value)), 2) }} TIA
+								{{
+									tia(Math.max(...feeSeries.map((d) => d.value)), 0) > 1
+										? tia(Math.max(...feeSeries.map((d) => d.value)), 0)
+										: tia(Math.max(...feeSeries.map((d) => d.value)), 2)
+								}}
+								TIA
 							</Text>
 							<Skeleton v-else-if="!feeSeries.length" w="32" h="12" />
 
@@ -1071,14 +1110,18 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{
 									opacity:
-										Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2) != Math.max(...feeSeries.map((d) => d.value))
+										Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2) !=
+										Math.max(...feeSeries.map((d) => d.value))
 											? 1
 											: 0,
 								}"
 							>
-								{{ tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0) > 1
-									? tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0)
-									: tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 2) }} TIA
+								{{
+									tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0) > 1
+										? tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 0)
+										: tia(Math.round(Math.max(...feeSeries.map((d) => d.value)) / 2), 2)
+								}}
+								TIA
 							</Text>
 							<Skeleton v-else-if="!feeSeries.length" w="24" h="12" />
 
@@ -1100,11 +1143,16 @@ onBeforeUnmount(() => {
 
 						<Transition name="fastfade">
 							<div v-if="showFeeTooltip" :class="$style.tooltip_wrapper">
-								<div v-if="chartView === 'line'"
+								<div
+									v-if="chartView === 'line'"
 									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 									:class="$style.dot"
 								/>
-								<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+								<div
+									v-if="chartView === 'line'"
+									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+									:class="$style.line"
+								/>
 								<div
 									ref="badgeEl"
 									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
@@ -1142,9 +1190,7 @@ onBeforeUnmount(() => {
 
 							<template #content>
 								<Flex align="center" :style="{ width: '160px' }">
-									<Text size="12" color="secondary">
-										Grouping by day or month is only available for this chart.
-									</Text>
+									<Text size="12" color="secondary"> Grouping by day or month is only available for this chart. </Text>
 								</Flex>
 							</template>
 						</Tooltip>
@@ -1159,9 +1205,12 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{ opacity: Math.max(...tvlSeries.map((d) => d.value)) ? 1 : 0 }"
 							>
-								{{ Math.max(...tvlSeries.map((d) => d.value)) < 1_000_000
-									? abbreviate(Math.max(...tvlSeries.map((d) => d.value)), 0)
-									: abbreviate(Math.max(...tvlSeries.map((d) => d.value))) }} $
+								{{
+									Math.max(...tvlSeries.map((d) => d.value)) < 1_000_000
+										? abbreviate(Math.max(...tvlSeries.map((d) => d.value)), 0)
+										: abbreviate(Math.max(...tvlSeries.map((d) => d.value)))
+								}}
+								$
 							</Text>
 							<Skeleton v-else-if="!tvlSeries.length" w="32" h="12" />
 
@@ -1172,14 +1221,18 @@ onBeforeUnmount(() => {
 								color="tertiary"
 								:style="{
 									opacity:
-										Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2) != Math.max(...tvlSeries.map((d) => d.value))
+										Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2) !=
+										Math.max(...tvlSeries.map((d) => d.value))
 											? 1
 											: 0,
 								}"
 							>
-								{{ Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2) < 1_000_000
-									? abbreviate(Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2), 0)
-									: abbreviate(Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2)) }} $
+								{{
+									Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2) < 1_000_000
+										? abbreviate(Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2), 0)
+										: abbreviate(Math.round(Math.max(...tvlSeries.map((d) => d.value)) / 2))
+								}}
+								$
 							</Text>
 							<Skeleton v-else-if="!tvlSeries.length" w="24" h="12" />
 
@@ -1201,11 +1254,16 @@ onBeforeUnmount(() => {
 
 						<Transition name="fastfade">
 							<div v-if="showTVLTooltip" :class="$style.tooltip_wrapper">
-								<div v-if="chartView === 'line'"
+								<div
+									v-if="chartView === 'line'"
 									:style="{ transform: `translate(${tooltipXOffset - 3}px, ${tooltipYDataOffset - 4}px)` }"
 									:class="$style.dot"
 								/>
-								<div v-if="chartView === 'line'" :style="{ transform: `translateX(${tooltipXOffset}px)` }" :class="$style.line" />
+								<div
+									v-if="chartView === 'line'"
+									:style="{ transform: `translateX(${tooltipXOffset}px)` }"
+									:class="$style.line"
+								/>
 								<div
 									ref="badgeEl"
 									:style="{ transform: `translateX(${tooltipXOffset - badgeOffset}px)` }"
@@ -1236,7 +1294,7 @@ onBeforeUnmount(() => {
 			</Flex>
 
 			<Flex justify="between" gap="32" :class="[$style.data, $style.bottom]">
-				<Flex ref="comparisonChartEl" direction="column" gap="12" :style="{minHeight: '207px'}">
+				<Flex ref="comparisonChartEl" direction="column" gap="12" :style="{ minHeight: '207px' }">
 					<Flex align="center" justify="between">
 						<Text size="13" weight="600" color="primary">Rollups Comparison</Text>
 
@@ -1255,7 +1313,7 @@ onBeforeUnmount(() => {
 
 									<Text size="13" color="primary"> {{ selectedRollup?.name }} </Text>
 								</Flex>
-								
+
 								<Icon
 									name="chevron"
 									size="14"
@@ -1278,7 +1336,7 @@ onBeforeUnmount(() => {
 												align="center"
 												justify="between"
 												gap="4"
-												 :class="$style.popover_list_item"
+												:class="$style.popover_list_item"
 											>
 												<Flex align="center" gap="6">
 													<div :class="$style.avatar_container">
@@ -1291,7 +1349,7 @@ onBeforeUnmount(() => {
 												<Icon v-if="selectedRollup.slug === r.slug" name="check" size="14" color="brand" />
 											</Flex>
 										</template>
-										<Flex v-else justify="center" :style="{paddingTop: '10px'}">
+										<Flex v-else justify="center" :style="{ paddingTop: '10px' }">
 											<Text size="12" weight="500" color="tertiary">Nothing was found</Text>
 										</Flex>
 									</Flex>
@@ -1300,8 +1358,7 @@ onBeforeUnmount(() => {
 						</Popover>
 					</Flex>
 
-
-					<Flex v-if="comparisonData[0]?.size_graph" direction="column" gap="12" :class=$style.chart_wrapper_single>
+					<Flex v-if="comparisonData[0]?.size_graph" direction="column" gap="12" :class="$style.chart_wrapper_single">
 						<Flex direction="column" gap="12">
 							<Text size="13" weight="500" color="secondary">Size</Text>
 
@@ -1323,7 +1380,7 @@ onBeforeUnmount(() => {
 								></div>
 							</Flex>
 
-							<Flex align="center" justify="between" :style="{marginTop: '-8px'}">
+							<Flex align="center" justify="between" :style="{ marginTop: '-8px' }">
 								<Text size="12" color="tertiary"> {{ formatBytes(comparisonData[0]?.size) }} </Text>
 
 								<Text size="12" color="tertiary"> {{ formatBytes(comparisonData[1]?.size) }} </Text>
@@ -1351,7 +1408,7 @@ onBeforeUnmount(() => {
 								></div>
 							</Flex>
 
-							<Flex align="center" justify="between" :style="{marginTop: '-8px'}">
+							<Flex align="center" justify="between" :style="{ marginTop: '-8px' }">
 								<Text size="12" color="tertiary"> {{ spaces(comparisonData[0]?.pfb) }} </Text>
 
 								<Text size="12" color="tertiary"> {{ spaces(comparisonData[1]?.pfb) }} </Text>
@@ -1379,7 +1436,7 @@ onBeforeUnmount(() => {
 								></div>
 							</Flex>
 
-							<Flex align="center" justify="between" :style="{marginTop: '-8px'}">
+							<Flex align="center" justify="between" :style="{ marginTop: '-8px' }">
 								<Text size="12" color="tertiary"> {{ tia(comparisonData[0]?.fee) }} TIA </Text>
 
 								<Text size="12" color="tertiary"> {{ tia(comparisonData[1]?.fee) }} TIA</Text>
@@ -1392,8 +1449,8 @@ onBeforeUnmount(() => {
 						justify="center"
 						direction="column"
 						gap="4"
-						:class=$style.chart_wrapper_single
-						:style="{height: '100%', paddingBottom: '24px'}"
+						:class="$style.chart_wrapper_single"
+						:style="{ height: '100%', paddingBottom: '24px' }"
 					>
 						<Text size="12" color="secondary" weight="600">No data for comparison</Text>
 						<Text size="12" color="tertiary">Try to select a different rollup or period</Text>
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index b27f7ed4..f1f9700c 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -23,12 +23,12 @@ import { getRankCategory } from "@/services/constants/rollups"
 import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "@/services/api/rollup"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useNotificationsStore } from "@/store/notifications"
-import { useRollupsRankingStore } from "@/store/rollupsrank"
+import { useCacheStore } from "@/store/cache.store"
+import { useNotificationsStore } from "@/store/notifications.store"
+import { useActivityStore } from "@/store/activity.store"
 const cacheStore = useCacheStore()
 const notificationsStore = useNotificationsStore()
-const rollupRankingStore = useRollupsRankingStore()
+const activityStore = useActivityStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -58,9 +58,12 @@ const namespaces = ref([])
 const blobs = ref([])
 
 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)]
+	if (!activityStore?.initialized || !isMainnet()) return null
+
+	let rollup_ranking =
+		activityStore?.rollups_ranking?.ranking[
+			Object.keys(activityStore?.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,
@@ -274,7 +277,9 @@ const handleCSVDownload = async (value) => {
 			<Flex align="center" gap="8">
 				<Icon name="rollup" size="14" color="primary" />
 
-				<Text size="13" weight="600" color="primary">Rollup</Text>
+				<Text as="h1" size="13" weight="600" color="primary">
+					Rollup <Text color="secondary">{{ rollup.name }}</Text>
+				</Text>
 			</Flex>
 
 			<Flex align="center" gap="12">
@@ -322,19 +327,26 @@ const handleCSVDownload = async (value) => {
 					<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 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" />
+									<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>
+												<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>
@@ -856,6 +868,16 @@ const handleCSVDownload = async (value) => {
 	}
 }
 
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
 @media (max-width: 400px) {
 	.tabs_wrapper {
 		overflow-x: auto;
diff --git a/components/modules/rollup/tables/BlobsTable.vue b/components/modules/rollup/tables/BlobsTable.vue
index b437cc11..eec7ba00 100644
--- a/components/modules/rollup/tables/BlobsTable.vue
+++ b/components/modules/rollup/tables/BlobsTable.vue
@@ -9,8 +9,8 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { formatBytes } from "@/services/utils"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 
diff --git a/components/modules/rollup/tables/NamespacesTable.vue b/components/modules/rollup/tables/NamespacesTable.vue
index 04fde43e..744e9738 100644
--- a/components/modules/rollup/tables/NamespacesTable.vue
+++ b/components/modules/rollup/tables/NamespacesTable.vue
@@ -8,8 +8,6 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 /** Services */
 import { comma, formatBytes, space, getNamespaceID } from "@/services/utils"
 
-const router = useRouter()
-
 const props = defineProps({
 	namespaces: {
 		type: Array,
@@ -42,7 +40,7 @@ const props = defineProps({
 											<Flex direction="column" gap="4">
 												<Flex align="center" gap="8">
 													<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-														{{ $getDisplayName('namespaces', ns.namespace_id) }}
+														{{ $getDisplayName("namespaces", ns.namespace_id) }}
 													</Text>
 
 													<CopyButton :text="getNamespaceID(ns.namespace_id)" />
diff --git a/components/modules/stats/BarChart.vue b/components/modules/stats/BarChart.vue
index 9467f7b5..abc77023 100644
--- a/components/modules/stats/BarChart.vue
+++ b/components/modules/stats/BarChart.vue
@@ -31,8 +31,8 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 	const marginLeft = 36
 	const marginAxisX = 24
 
-	const MIN_VALUE = d3.min([...cData.data.map((s) => s.value)])
-	const MAX_VALUE = d3.max([...cData.data.map((s) => s.value)])
+	const MIN_VALUE = d3.min(cData.data.map((s) => s.value))
+	const MAX_VALUE = d3.max(cData.data.map((s) => s.value))
 
 	/** Scales */
 	const xBand = d3
@@ -113,7 +113,7 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 			d3
 				.axisBottom(scaleX)
 				.ticks(Math.min(cData.data.length, 6))
-				.tickFormat(d3.timeFormat(["hour", "day"].includes(props.series.timeframe.timeframe) ? "%b %d" : "%b"))
+				.tickFormat(d3.timeFormat(["hour", "day"].includes(props.series.timeframe.timeframe) ? "%b %d" : "%b")),
 		)
 		.selectAll(".tick line")
 		.filter(function (d) {
diff --git a/components/modules/stats/BarplotStakedChart.vue b/components/modules/stats/BarplotStakedChart.vue
index 5b652816..3229da40 100644
--- a/components/modules/stats/BarplotStakedChart.vue
+++ b/components/modules/stats/BarplotStakedChart.vue
@@ -22,12 +22,9 @@ const tooltip = ref({
 })
 
 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))
+	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]
@@ -41,76 +38,43 @@ const buildChart = (chart, data) => {
 		right: 30,
 		bottom: 20,
 		left: 50,
-		axisX: 44
+		axisX: 44,
 	}
-	const maxValue = d3.max(data, d => d3.sum(rollupNames.value, key => d[key]))
+	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())
+	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]
-	)
+	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",
-		// "#", "#", "#", "#", "#",
+		"#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)
-	
+
+	const color = d3.scaleOrdinal().domain(rollupNames.value).range(d3.schemeSet2)
+
+	const stackedData = d3.stack().keys(rollupNames.value)(data)
+
 	function formatDate(date) {
-		if (props.series.timeframe === 'day') {
+		if (props.series.timeframe === "day") {
 			return DateTime.fromJSDate(date).toFormat("LLL dd, HH:mm")
 		}
 
@@ -119,13 +83,13 @@ const buildChart = (chart, data) => {
 
 	function formatValue(value, decimals) {
 		switch (props.series.units) {
-			case 'bytes':
+			case "bytes":
 				return formatBytes(value, decimals)
-			case 'utia':
+			case "utia":
 				return `${tia(value, 2)} TIA`
-			case 'seconds':
+			case "seconds":
 				return `${truncateDecimalPart(value / 1_000, 3)}s`
-			case 'usd':
+			case "usd":
 				return `${abbreviate(value)} $`
 			default:
 				return comma(value)
@@ -156,44 +120,30 @@ const buildChart = (chart, data) => {
 	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))
+		.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"
-		)))
+		.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")
-				}
-			})
+		.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)
@@ -201,14 +151,14 @@ const buildChart = (chart, data) => {
 	}
 
 	function mouseover(event, d) {
-		const name = d3.select(this.parentNode).datum().key;
+		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)
+			selectedRollup = dr.items.find((item) => item.name === name)
 			if (selectedRollup) {
-				break;
+				break
 			}
 		}
 		nextTick(() => {
@@ -223,7 +173,7 @@ const buildChart = (chart, data) => {
 				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.x = xPosition + tooltipWidth > width - margin.right ? xPosition - tooltipWidth : xPosition + 25
 				tooltip.value.y = event.offsetY - tooltipHeight - 10
 			})
 		})
@@ -234,34 +184,36 @@ const buildChart = (chart, data) => {
 	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
-			})
+		.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())
@@ -269,26 +221,23 @@ const buildChart = (chart, data) => {
 
 const drawChart = () => {
 	let data = JSON.parse(JSON.stringify(props.series.data))
-	data.forEach(d => {
+	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 => {
+
+	let formattedData = data.map((d) => {
 		const obj = { time: d.time }
-		rollupNames.value.forEach(name => {
-			let item = d.items.find(item => item.name === name)
+		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,
-	)
+	buildChart(chartEl.value.wrapper, formattedData)
 }
 
 watch(
@@ -308,8 +257,8 @@ onMounted(async () => {
 </script>
 
 <template>
-    <Flex direction="column" justify="between" gap="16" wide :class="$style.wrapper">
-        <Flex :class="$style.chart_wrapper">
+	<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
@@ -338,15 +287,17 @@ onMounted(async () => {
 
 						<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%)`}"
+							: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>
+			<Flex ref="chartEl" wide :class="$style.chart" />
+		</Flex>
+	</Flex>
 </template>
 
 <style module>
@@ -417,4 +368,4 @@ onMounted(async () => {
 	height: 100%;
 	object-fit: cover;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modules/stats/BlocksFeed.vue b/components/modules/stats/BlocksFeed.vue
index d0795345..a54fa62d 100644
--- a/components/modules/stats/BlocksFeed.vue
+++ b/components/modules/stats/BlocksFeed.vue
@@ -12,7 +12,7 @@ import { comma, formatBytes } from "@/services/utils"
 import { fetchAvgBlockTime } from "@/services/api/block"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const props = defineProps({
@@ -47,12 +47,15 @@ const timeline = computed(() => {
 	return time
 })
 
-const maxSize = computed(() => Math.max(...blocks.value?.map((b) => b.stats.bytes_in_block)))
+const maxSize = computed(() => {
+	if (!blocks.value) return 0
+	return Math.max(...blocks.value.map((b) => b.stats.bytes_in_block))
+})
 const avgBlockTime = ref(0)
 
 const calculateHeight = (size) => {
 	if (!size) return 2
-	
+
 	return Math.max((size / maxSize.value) * 100, 2)
 }
 
diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue
index b6bf668d..c2197f10 100644
--- a/components/modules/stats/ChartCardPreview.vue
+++ b/components/modules/stats/ChartCardPreview.vue
@@ -31,7 +31,7 @@ const dataLoaded = ref(false)
 const diff = computed(() => {
 	if (!dataLoaded.value) return undefined
 
-	const res = prevTotal.value ? ((currentTotal.value - prevTotal.value) / prevTotal.value) : 1
+	const res = prevTotal.value ? (currentTotal.value - prevTotal.value) / prevTotal.value : 1
 	return (res * 100).toFixed(1)
 })
 const chartEl = ref()
@@ -49,49 +49,59 @@ 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"
+			months:
+				props.period.timeframe === "month"
+					? props.period.value * 2
+					: props.period.timeframe === "year"
 					? props.period.value * 24
 					: 0,
-		}).ts / 1_000
+		}).ts / 1_000,
 	)
 	let to = parseInt(
 		baseTime.minus({
 			days: props.period.timeframe === "day" ? 1 : 0,
 			hours: props.period.timeframe === "hour" ? 1 : 0,
-		}).ts / 1_000
+		}).ts / 1_000,
 	)
-	
-	if (props.series.aggregate === 'cumulative') {
+
+	if (props.series.aggregate === "cumulative") {
 		data = await fetchSeriesCumulative({
 			name: props.series.name,
-			period: 'day',
+			period: "day",
 			from: parseInt(
 				baseTime.minus({
 					days: 60,
-				}).ts / 1_000)
+				}).ts / 1_000,
+			),
 		})
 	} else if (props.series.name === "tvs") {
-		data = (await fetchTVS({
-			period: props.period.timeframe,
-			from: from,
-			to: to,
-		})).map(v => { return { time: v.time, value: v.close } }).reverse()
+		data = (
+			await fetchTVS({
+				period: props.period.timeframe,
+				from: from,
+				to: to,
+			})
+		)
+			.map((v) => {
+				return { time: v.time, value: v.close }
+			})
+			.reverse()
 	} else {
-		data = (await fetchSeries({
-			table: props.series.name,
-			period: props.period.timeframe === "year" ? "month" : props.period.timeframe,
-			from: from,
-			to: to,
-		})).reverse()
+		data = (
+			await fetchSeries({
+				table: props.series.name,
+				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),
-	}))
+			date: DateTime.fromISO(s.time).toJSDate(),
+			value: parseFloat(s.value),
+		}))
 
 	const dataLength = data.length
 	let prev = []
@@ -99,7 +109,7 @@ const getSeries = async () => {
 	const periodLength = props.period.timeframe === "year" ? 12 : props.period.value
 	const timeframe = props.period.timeframe
 
-	if (props.series.aggregate === 'cumulative') {
+	if (props.series.aggregate === "cumulative") {
 		current = parseData(data.slice(-30))
 		prev = parseData(data.slice(0, dataLength - 30))
 	} else {
@@ -109,7 +119,9 @@ const getSeries = async () => {
 		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(),
+				date: DateTime.fromJSDate(d.date)
+					.minus({ [`${timeframe}s`]: periodLength })
+					.toJSDate(),
 				value: 0,
 			}))
 
@@ -120,40 +132,38 @@ const getSeries = async () => {
 	currentData.value = current
 	prevData.value = prev
 
-	if (props.series.name === 'block_time') {
-		prevData.value = prevData.value
-			.map(el => {
-				return {
-					...el,
-					value: (el.value / 1_000).toFixed(2)
-				}
-			})
-		currentData.value = currentData.value
-			.map(el => {
-				return {
-					...el,
-					value: (el.value / 1_000).toFixed(2)
-				}
-			})
+	if (props.series.name === "block_time") {
+		prevData.value = prevData.value.map((el) => {
+			return {
+				...el,
+				value: (el.value / 1_000).toFixed(2),
+			}
+		})
+		currentData.value = currentData.value.map((el) => {
+			return {
+				...el,
+				value: (el.value / 1_000).toFixed(2),
+			}
+		})
 	}
 
-	if (props.series.name === 'tvs') {
+	if (props.series.name === "tvs") {
 		currentTotal.value = currentData.value[currentData.value.length - 1].value
 		prevTotal.value = prevData.value[prevData.value.length - 1].value
-	} else if (props.series.aggregate !== 'cumulative') {
+	} else if (props.series.aggregate !== "cumulative") {
 		currentTotal.value = currentData.value.reduce((sum, el) => {
-			return sum + +el.value;
-		}, 0);
+			return sum + +el.value
+		}, 0)
 
 		prevTotal.value = prevData.value.reduce((sum, el) => {
-			return sum + +el.value;
-		}, 0);		
+			return sum + +el.value
+		}, 0)
 	} else {
 		currentTotal.value = currentData.value.slice(-1)[0].value
 		prevTotal.value = prevData.value.slice(-1)[0].value
 	}
 
-	if (props.series.aggregate === 'avg') {
+	if (props.series.aggregate === "avg") {
 		prevTotal.value = prevTotal.value / prevData.value.length
 		currentTotal.value = currentTotal.value / currentData.value.length
 	}
@@ -182,7 +192,7 @@ const buildChart = (chart, data, color) => {
 	const MIN_VALUE = Math.min(Math.min(...prevData.value.map((s) => s.value)), Math.min(...currentData.value.map((s) => s.value)))
 
 	function formatDate(date) {
-		if (props.period.timeframe === 'hour' && props.series.aggregate !== 'cumulative') {
+		if (props.period.timeframe === "hour" && props.series.aggregate !== "cumulative") {
 			return DateTime.fromJSDate(date).toFormat("HH:mm, LLL dd")
 		}
 
@@ -191,17 +201,17 @@ const buildChart = (chart, data, color) => {
 
 	function formatValue(value) {
 		switch (props.series.units) {
-			case 'bytes':
+			case "bytes":
 				return formatBytes(value)
-			case 'utia':
-				if (props.series.name === 'gas_price') {
+			case "utia":
+				if (props.series.name === "gas_price") {
 					return `${truncateDecimalPart(value, 4)} UTIA`
 				}
 
 				return `${tia(value, 2)} TIA`
-			case 'seconds':
+			case "seconds":
 				return `${truncateDecimalPart(value / 1_000, 3)}s`
-			case 'usd':
+			case "usd":
 				return `${abbreviate(value)} $`
 			default:
 				return comma(value)
@@ -232,57 +242,53 @@ const buildChart = (chart, data, color) => {
 		.on("pointerenter pointermove", onPointerMoved)
 		.on("pointerleave", onPointerleft)
 		.on("touchstart", (event) => event.preventDefault())
-	
+
 	// This allows to find the closest X index of the mouse:
-	const bisect = d3.bisector(function(d) { return d.date; }).center
+	const bisect = d3.bisector(function (d) {
+		return d.date
+	}).center
 
 	const cFocus = svg
-		.append('g')
-		.append('circle')
-			.style("fill", "var(--brand)")
-			.attr('r', 4)
-			.style("opacity", 0)
-			.style("transition", "all 0.2s ease" )
+		.append("g")
+		.append("circle")
+		.style("fill", "var(--brand)")
+		.attr("r", 4)
+		.style("opacity", 0)
+		.style("transition", "all 0.2s ease")
 
 	const pFocus = svg
-		.append('g')
-		.append('circle')
-			.style("fill", "var(--txt-tertiary)")
-			.attr('r', 4)
-			.style("opacity", 0)
-			.style("transition", "all 0.2s ease" )
+		.append("g")
+		.append("circle")
+		.style("fill", "var(--txt-tertiary)")
+		.attr("r", 4)
+		.style("opacity", 0)
+		.style("transition", "all 0.2s ease")
 
 	const focusLine = svg
-		.append('g')
-		.append('line')
-			.style("stroke-width", 2)
-			.style("stroke", "var(--op-15)")
-			.style("fill", "none")
-			.style("opacity", 0)
+		.append("g")
+		.append("line")
+		.style("stroke-width", 2)
+		.style("stroke", "var(--op-15)")
+		.style("fill", "none")
+		.style("opacity", 0)
 
 	function onPointerMoved(event) {
 		tooltip.value.show = true
-		
+
 		cFocus.style("opacity", 1)
 		focusLine.style("opacity", 1)
 
 		// Recover coordinate we need
 		let idx = bisect(currentData.value, x.invert(d3.pointer(event)[0]))
 		let selectedCData = currentData.value[idx]
-		cFocus
-			.attr("cx", x(selectedCData.date))
-			.attr("cy", y(selectedCData.value))
-		focusLine
-			.attr("x1", x(selectedCData.date))
-			.attr("y1", 0)
-			.attr("x2", x(selectedCData.date))
-			.attr("y2", height)
-		
+		cFocus.attr("cx", x(selectedCData.date)).attr("cy", y(selectedCData.value))
+		focusLine.attr("x1", x(selectedCData.date)).attr("y1", 0).attr("x2", x(selectedCData.date)).attr("y2", height)
+
 		let tooltipWidth = tooltipEl.value?.wrapper ? tooltipEl.value?.wrapper?.getBoundingClientRect()?.width : 100
 		let xPosition = x(selectedCData.date)
-		tooltip.value.x = (xPosition + tooltipWidth) > width + 5 ? xPosition - tooltipWidth - 15 : xPosition + 15
+		tooltip.value.x = xPosition + tooltipWidth > width + 5 ? xPosition - tooltipWidth - 15 : xPosition + 15
 		tooltip.value.y = Math.min(y(selectedCData.value), height - 100)
-		
+
 		tooltip.value.data[0] = {
 			date: formatDate(selectedCData.date),
 			value: formatValue(selectedCData.value),
@@ -292,18 +298,14 @@ const buildChart = (chart, data, color) => {
 		if (prevData.value.length) {
 			let selectedPData = prevData.value[idx]
 
-			pFocus
-				.attr("cx", x(selectedPData.date))
-				.attr("cy", y(selectedPData.value))
-				.style("opacity", 1)
-			
+			pFocus.attr("cx", x(selectedPData.date)).attr("cy", y(selectedPData.value)).style("opacity", 1)
+
 			tooltip.value.data[1] = {
 				date: formatDate(selectedPData.realDate),
 				value: formatValue(selectedPData.value),
 				color: "var(--txt-tertiary)",
 			}
 		}
-
 	}
 
 	function onPointerleft() {
@@ -314,12 +316,8 @@ const buildChart = (chart, data, color) => {
 	}
 
 	/** Default Horizontal Lines  */
-	svg.append("path")
-		.attr("fill", "none")
-		.attr("stroke", "var(--op-5)")
-		.attr("stroke-width", 1)
-		.attr("d", `M${0},${0} L${width},${0}`)
-	
+	svg.append("path").attr("fill", "none").attr("stroke", "var(--op-5)").attr("stroke-width", 1).attr("d", `M${0},${0} L${width},${0}`)
+
 	svg.append("path")
 		.attr("fill", "none")
 		.attr("stroke", "var(--op-5)")
@@ -331,9 +329,10 @@ const buildChart = (chart, data, color) => {
 		.attr("stroke", "var(--op-5)")
 		.attr("stroke-width", 1)
 		.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-	
+
 	/** Chart Lines */
-	const path = svg.append("path")
+	const path = svg
+		.append("path")
 		.attr("fill", "none")
 		.attr("stroke", color)
 		.attr("stroke-width", 2)
@@ -341,25 +340,17 @@ const buildChart = (chart, data, color) => {
 		.attr("stroke-linejoin", "round")
 		.attr("d", line(data.filter((item) => item.value !== null)))
 
-	// svg.append("path")
-	// 	.attr("fill", "none")
-	// 	.attr("stroke", "transparent")
-	// 	.attr("stroke-width", 2)
-	// 	.attr("stroke-linecap", "round")
-	// 	.attr("stroke-linejoin", "round")
-	// 	.attr("d", line(data.filter((item) => item.value === null).map((item) => ({ ...item, value: 0 }))))
-
 	if (chart.children[0]) chart.children[0].remove()
 	chart.append(svg.node())
 
-	const totalLength = path.node().getTotalLength();
+	const totalLength = path.node().getTotalLength()
 
 	path.attr("stroke-dasharray", `${totalLength} ${totalLength}`)
 		.attr("stroke-dashoffset", totalLength)
 		.transition()
 		.duration(1_000)
 		.ease(d3.easeLinear)
-		.attr("stroke-dashoffset", 0);
+		.attr("stroke-dashoffset", 0)
 }
 
 const drawChart = async () => {
@@ -396,39 +387,41 @@ watch(
 					</Flex>
 				</NuxtLink>
 			</Flex>
-			
+
 			<Flex v-if="series.units === 'seconds'" align="end" gap="10" justify="start" wide>
 				<Text size="16" weight="600" color="primary"> {{ `~${Math.round(currentTotal)}s` }} </Text>
-				<Text size="14" weight="600" color="tertiary"> {{ `~${Math.round(prevTotal)}s previous ${period.title.replace('Last ', '')}` }} </Text>
+				<Text size="14" weight="600" color="tertiary">
+					{{ `~${Math.round(prevTotal)}s previous ${period.title.replace("Last ", "")}` }}
+				</Text>
 			</Flex>
 			<Flex v-else-if="series.units === 'utia'" align="end" gap="10" justify="start" wide>
-				<Text size="16" weight="600" color="primary"> {{ series.name === 'gas_price' ? `${currentTotal.toFixed(4)} UTIA` : `${tia(currentTotal, 2)} TIA` }} </Text>
-				<Text size="14" weight="600" color="tertiary"> {{ series.name === 'gas_price' ? `${prevTotal.toFixed(4)} UTIA` : `${tia(prevTotal, 2)} TIA` }} </Text>
+				<Text size="16" weight="600" color="primary">
+					{{ series.name === "gas_price" ? `${currentTotal.toFixed(4)} UTIA` : `${tia(currentTotal, 2)} TIA` }}
+				</Text>
+				<Text size="14" weight="600" color="tertiary">
+					{{ series.name === "gas_price" ? `${prevTotal.toFixed(4)} UTIA` : `${tia(prevTotal, 2)} TIA` }}
+				</Text>
 			</Flex>
 			<Flex v-else-if="series.units === 'usd'" align="end" gap="10" justify="start" wide>
 				<Text size="16" weight="600" color="primary"> {{ `${abbreviate(currentTotal)} $` }} </Text>
 				<Text size="14" weight="600" color="tertiary"> {{ `${abbreviate(prevTotal)} $` }} </Text>
 			</Flex>
 			<Flex v-else align="end" gap="10" justify="start" wide>
-				<Text size="16" weight="600" color="primary"> {{ series.units === 'bytes' ? formatBytes(currentTotal) : comma(currentTotal) }} </Text>
-
-				<Text
-					v-if="series.aggregate === 'cumulative'"
-					size="14"
-					weight="600"
-					color="tertiary"
-				>
+				<Text size="16" weight="600" color="primary">
+					{{ series.units === "bytes" ? formatBytes(currentTotal) : comma(currentTotal) }}
+				</Text>
+
+				<Text v-if="series.aggregate === 'cumulative'" size="14" weight="600" color="tertiary">
 					{{ `${formatBytes(prevTotal)} previous month` }}
 				</Text>
-				<Text
-					v-else
-					size="14"
-					weight="600"
-					color="tertiary"
-				>
-					{{ `${series.units === 'bytes' ? formatBytes(prevTotal) : abbreviate(prevTotal)} previous ${period.title.replace('Last ', '')}` }}
+				<Text v-else size="14" weight="600" color="tertiary">
+					{{
+						`${series.units === "bytes" ? formatBytes(prevTotal) : abbreviate(prevTotal)} previous ${period.title.replace(
+							"Last ",
+							"",
+						)}`
+					}}
 				</Text>
-				
 			</Flex>
 		</Flex>
 
@@ -443,16 +436,9 @@ watch(
 						gap="12"
 						:class="$style.tooltip"
 					>
-						<Flex
-							v-for="(d, index) in tooltip.data"
-							align="start"
-							direction="column"
-							wide
-							gap="8"
-						>
+						<Flex v-for="(d, index) in tooltip.data" align="start" direction="column" wide gap="8">
 							<Flex align="center" justify="between" gap="12" wide>
 								<Text size="12" weight="600" color="primary"> {{ d.value }} </Text>
-									
 
 								<Flex align="center" justify="end" gap="6">
 									<Text size="12" weight="500" color="tertiary">
@@ -462,7 +448,7 @@ watch(
 									<div
 										:class="$style.legend"
 										:style="{
-											background: d.color
+											background: d.color,
 										}"
 									/>
 								</Flex>
@@ -482,18 +468,24 @@ watch(
 					{{ DateTime.fromJSDate(currentData[0]?.date).toFormat("LLL dd") }}
 				</Text>
 				<Text v-else size="11" weight="600" color="tertiary">
-					{{ DateTime.now().minus({
-							days: period.timeframe === "day" ? period.value : 0,
-							hours: period.timeframe === "hour" ? period.value : 0,
-						}).toFormat("LLL dd")
+					{{
+						DateTime.now()
+							.minus({
+								days: period.timeframe === "day" ? period.value : 0,
+								hours: period.timeframe === "hour" ? period.value : 0,
+							})
+							.toFormat("LLL dd")
 					}}
 				</Text>
 
 				<Text size="11" weight="600" color="tertiary">
-					{{ DateTime.now().minus({
-							days: period.timeframe === "day" ? 1 : 0,
-							hours: period.timeframe === "hour" ? 1 : 0,
-						}).toFormat("LLL dd")
+					{{
+						DateTime.now()
+							.minus({
+								days: period.timeframe === "day" ? 1 : 0,
+								hours: period.timeframe === "hour" ? 1 : 0,
+							})
+							.toFormat("LLL dd")
 					}}
 				</Text>
 			</Flex>
@@ -512,15 +504,14 @@ watch(
 }
 
 .link {
-    transition: fill 0.3s ease;
+	transition: fill 0.3s ease;
 
-    &:hover {
-        fill: var(--txt-secondary)
-    }
+	&:hover {
+		fill: var(--txt-secondary);
+	}
 }
 
 .header {
-
 }
 
 .chart_wrapper {
diff --git a/components/modules/stats/GeoMap.vue b/components/modules/stats/GeoMap.vue
index 1c6e3353..a3653709 100644
--- a/components/modules/stats/GeoMap.vue
+++ b/components/modules/stats/GeoMap.vue
@@ -28,58 +28,55 @@ const handleChangeChartView = () => {
 }
 
 const getNodeStats = async (name) => {
-    const data = await fetchNodeStats({ name })
+	const data = await fetchNodeStats({ name })
 
-    if (!data?.length) return []
+	if (!data?.length) return []
 
-    return sortArrayOfObjects(data, "amount")
+	return sortArrayOfObjects(data, "amount")
 }
 
 function getCountryByCoordinatesOrCityName(name, lat, lon, geoJSON) {
-    const point = [lon, lat]
+	const point = [lon, lat]
 
-    for (const feature of geoJSON.features) {
-        if (!Number(feature.id) && d3.geoContains(feature, point)) {
-            return feature.id
-        }
-    }
+	for (const feature of geoJSON.features) {
+		if (!Number(feature.id) && d3.geoContains(feature, point)) {
+			return feature.id
+		}
+	}
 
-    return getCountryByCity(name)
+	return getCountryByCity(name)
 }
 
 const chartEl = ref()
 
 const buildChart = async (chart) => {
 	const { height, width } = chart.getBoundingClientRect()
-    const margin = { top: 6, right: 12, bottom: 12, left: 12 }
-
-    // Map and projection
-    const projection = d3.geoMercator()
-        .center([0, 40]) // GPS of location to zoom on
-        .scale(width * 0.15) // This is like the zoom
-        .translate([ width / 2, height / 2 ])
-    
-    const countryMaxAmount = d3.max(geoMap.value, (d) => +d.amount)
-    const countryColor = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#1e473d", "#18d2a5"]))
-        .domain([1, countryMaxAmount])
-    
-    const size = d3.scaleSqrt()
-        .domain(d3.extent(nodeCityData.value, d => +d.amount))
-        .range([4, 20])
-    
-    const path =  d3.geoPath().projection(projection)
-    let zoomScale = 1
+	const margin = { top: 6, right: 12, bottom: 12, left: 12 }
+
+	// Map and projection
+	const projection = d3
+		.geoMercator()
+		.center([0, 40]) // GPS of location to zoom on
+		.scale(width * 0.15) // This is like the zoom
+		.translate([width / 2, height / 2])
+
+	const countryMaxAmount = d3.max(geoMap.value, (d) => +d.amount)
+	const countryColor = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#1e473d", "#18d2a5"])).domain([1, countryMaxAmount])
+
+	const size = d3
+		.scaleSqrt()
+		.domain(d3.extent(nodeCityData.value, (d) => +d.amount))
+		.range([4, 20])
+
+	const path = d3.geoPath().projection(projection)
+	let zoomScale = 1
 
 	/** SVG Container */
-	const svg = d3
-		.create("svg")
-            .attr("width", width)
-            .attr("height", height)
-            .attr("viewBox", [0, 0, width, height])
-
-    // Tooltip | We wrap the SVG with a container that has the html element above it
-    const container = document.createElement("div")
-    container.innerHTML = `
+	const svg = d3.create("svg").attr("width", width).attr("height", height).attr("viewBox", [0, 0, width, height])
+
+	// Tooltip | We wrap the SVG with a container that has the html element above it
+	const container = document.createElement("div")
+	container.innerHTML = `
         <style>
             .tooltip {
                 font-size: 13px;
@@ -97,386 +94,362 @@ const buildChart = async (chart) => {
         </style>
         <div class="tooltip"></div>
     `
-    container.appendChild(svg.node())
-    document.body.appendChild(container)
+	container.appendChild(svg.node())
+	document.body.appendChild(container)
 
-    // Three function that change the tooltip when user hover / move / leave a cell
-    const tooltip = container.querySelector(".tooltip")
-    const mouseover = function(d) {
-        tooltip.style.opacity = 1
-    }
-    const mousemove = function(event, d) {
-        const { pageX, pageY } = event
-        tooltip.style.display = "block";
-        tooltip.style.left = `${pageX + 10}px`
-        tooltip.style.top = `${pageY - 20}px`
-
-        if (chartView.value === "countries") {
-            tooltip.innerHTML = `
+	// Three function that change the tooltip when user hover / move / leave a cell
+	const tooltip = container.querySelector(".tooltip")
+	const mouseover = function (d) {
+		tooltip.style.opacity = 1
+	}
+	const mousemove = function (event, d) {
+		const { pageX, pageY } = event
+		tooltip.style.display = "block"
+		tooltip.style.left = `${pageX + 10}px`
+		tooltip.style.top = `${pageY - 20}px`
+
+		if (chartView.value === "countries") {
+			tooltip.innerHTML = `
                 <div class="flex items-center gap--8">
                     <span style="color: var(--txt-secondary);">${d.properties.name}:</span>
                     <span style="color: var(--txt-primary);">${d.amount}</span>
                 </div>
             `
-        } else if (chartView.value === "cities") {
-            let hoverCities = []
-            if (zoomScale > 2) {
-                const { x, y } = d
-                const r = size(+d.amount) / (zoomScale * 1.1)
-
-                cities.each(c => {
-                    const x1 = c.x
-                    const y1 = c.y
-                    const r1 = size(+c.amount) / (zoomScale * 1.1)
-
-                    const distance = Math.sqrt((x - x1) ** 2 + (y - y1) ** 2)
-                    
-                    if (distance < r + r1) {
-                        hoverCities.push(c)
-                    }
-                })
-            } else {
-                hoverCities.push(d)
-            }
-            
-            let tooltipContent = sortArrayOfObjects(hoverCities, "amount", false).map(c => {
-                return `
+		} else if (chartView.value === "cities") {
+			let hoverCities = []
+			if (zoomScale > 2) {
+				const { x, y } = d
+				const r = size(+d.amount) / (zoomScale * 1.1)
+
+				cities.each((c) => {
+					const x1 = c.x
+					const y1 = c.y
+					const r1 = size(+c.amount) / (zoomScale * 1.1)
+
+					const distance = Math.sqrt((x - x1) ** 2 + (y - y1) ** 2)
+
+					if (distance < r + r1) {
+						hoverCities.push(c)
+					}
+				})
+			} else {
+				hoverCities.push(d)
+			}
+
+			let tooltipContent = sortArrayOfObjects(hoverCities, "amount", false)
+				.map((c) => {
+					return `
                     <div class="flex items-center gap--8">
                         <span style="color: var(--txt-secondary);">${c.name}:</span>
                         <span style="color: var(--txt-primary);">${c.amount}</span>
                     </div>
                 `
-            }).join('')
-            tooltip.innerHTML = tooltipContent
-        }
-    }
-    const mouseleave = function(event, d) {
-        tooltip.style.opacity = 0
-    }
+				})
+				.join("")
+			tooltip.innerHTML = tooltipContent
+		}
+	}
+	const mouseleave = function (event, d) {
+		tooltip.style.opacity = 0
+	}
 
-    // Main container
-    const g = svg.append("g")
-
-    // Draw the map
-    const map = g.append("g")
-        .selectAll("path")
-        .data(geoMap.value)
-        .enter()
-        .append("path")
-        .attr("stroke", "var(--geo-map)")
-        .attr("stroke-width", 1)
-        .attr("fill", "transparent")
-        .attr("d", d3.geoPath()
-            .projection(projection)
-        )
-
-    let cities
-    if (chartView.value === "countries") {
-        map
-            .on("mouseover", function(event, d) {
-                d3.select(this)
-                    .transition()
-                    .duration(200)
-                    .attr("stroke", "var(--brand)")
-                    .attr("stroke-width", 2 / zoomScale)
-                d3.select(this).raise()
-                mouseover(event, d)
-            })
-            .on("mousemove", mousemove)
-            .on("mouseleave", function(event, d) {
-                d3.select(this)
-                    .transition()
-                    .duration(200)
-                    .attr("stroke", "var(--geo-map)")
-                    .attr("stroke-width", 1 / zoomScale)
-                d3.select(this).lower()
-                mouseleave(event, d)
-            })
-        
-        map
-            .transition()
-            .duration(700)
-            .attr("fill", d => chartView.value === "countries"
-                ? d.amount
-                    ? countryColor(+d.amount)
-                    : "transparent"
-                : "transparent")
-    } else if (chartView.value === "cities") {
-        const lostCities = geoMap.value
-            .filter(c => c.amountLostCities > 0)
-            .map(c => {
-                const centroid = getCountryCentroid(c.id)
-                let coords
-                if (centroid) {
-                    coords = projection([+centroid[0], +centroid[1]])
-                } else {
-                    coords = path.centroid(c.geometry)
-                }
-                return {
-                    name: `Somewhere in ${c.properties.name}`,
-                    amount: c.amountLostCities,
-                    x: coords[0],
-                    y: coords[1],
-                }
-            })
-        nodeCityData.value = nodeCityData.value.map(c => {
-            const coords = projection([+c.longitude, +c.latitude])
-            return {
-                ...c,
-                x: coords[0],
-                y: coords[1],
-            }
-        })
-        const citiesData = [...nodeCityData.value, ...lostCities]
-
-        cities = g.append("g")
-            .selectAll("cities")
-            .data(citiesData)
-            .enter()
-            .append("circle")
-                .attr("transform", d => `translate(${d.x}, ${d.y})`)
-                // .attr("r", d => size(d.amount))
-                .attr("r", 0)
-                .style("fill", "var(--brand)")
-                .attr("fill-opacity", 0)
-                .on("mouseover", mouseover)
-                .on("mousemove", mousemove)
-                .on("mouseleave", mouseleave)
-        cities.transition()
-            .delay((d, i) => i * 3)
-            .duration(500)
-            .attr("r", d => size(+d.amount))
-            .attr("fill-opacity", 0.7)
-    }
+	// Main container
+	const g = svg.append("g")
+
+	// Draw the map
+	const map = g
+		.append("g")
+		.selectAll("path")
+		.data(geoMap.value)
+		.enter()
+		.append("path")
+		.attr("stroke", "var(--geo-map)")
+		.attr("stroke-width", 1)
+		.attr("fill", "transparent")
+		.attr("d", d3.geoPath().projection(projection))
+
+	let cities
+	if (chartView.value === "countries") {
+		map.on("mouseover", function (event, d) {
+			d3.select(this)
+				.transition()
+				.duration(200)
+				.attr("stroke", "var(--brand)")
+				.attr("stroke-width", 2 / zoomScale)
+			d3.select(this).raise()
+			mouseover(event, d)
+		})
+			.on("mousemove", mousemove)
+			.on("mouseleave", function (event, d) {
+				d3.select(this)
+					.transition()
+					.duration(200)
+					.attr("stroke", "var(--geo-map)")
+					.attr("stroke-width", 1 / zoomScale)
+				d3.select(this).lower()
+				mouseleave(event, d)
+			})
+
+		map.transition()
+			.duration(700)
+			.attr("fill", (d) => (chartView.value === "countries" ? (d.amount ? countryColor(+d.amount) : "transparent") : "transparent"))
+	} else if (chartView.value === "cities") {
+		const lostCities = geoMap.value
+			.filter((c) => c.amountLostCities > 0)
+			.map((c) => {
+				const centroid = getCountryCentroid(c.id)
+				let coords
+				if (centroid) {
+					coords = projection([+centroid[0], +centroid[1]])
+				} else {
+					coords = path.centroid(c.geometry)
+				}
+				return {
+					name: `Somewhere in ${c.properties.name}`,
+					amount: c.amountLostCities,
+					x: coords[0],
+					y: coords[1],
+				}
+			})
+		nodeCityData.value = nodeCityData.value.map((c) => {
+			const coords = projection([+c.longitude, +c.latitude])
+			return {
+				...c,
+				x: coords[0],
+				y: coords[1],
+			}
+		})
+		const citiesData = [...nodeCityData.value, ...lostCities]
+
+		cities = g
+			.append("g")
+			.selectAll("cities")
+			.data(citiesData)
+			.enter()
+			.append("circle")
+			.attr("transform", (d) => `translate(${d.x}, ${d.y})`)
+			// .attr("r", d => size(d.amount))
+			.attr("r", 0)
+			.style("fill", "var(--brand)")
+			.attr("fill-opacity", 0)
+			.on("mouseover", mouseover)
+			.on("mousemove", mousemove)
+			.on("mouseleave", mouseleave)
+		cities
+			.transition()
+			.delay((d, i) => i * 3)
+			.duration(500)
+			.attr("r", (d) => size(+d.amount))
+			.attr("fill-opacity", 0.7)
+	}
 
-    // Legend
-    const legend = {
-        width: 220,
-        height: 10,
-        marginBottom: 40,
-        marginRight: 150,
-        marginLeft: 40,
-    }
-    
-    function legendCitiesX(i) {
-        let x = legend.marginLeft
+	// Legend
+	const legend = {
+		width: 220,
+		height: 10,
+		marginBottom: 40,
+		marginRight: 150,
+		marginLeft: 40,
+	}
 
-        if (!i) return x
-        
-        for (let ind = 0; ind < i; ind++) {
-            x = x + size(legendValues[ind]) * 2 + 30
-        }
-        x = x - size(legendValues[0]) + size(legendValues[i])
+	function legendCitiesX(i) {
+		let x = legend.marginLeft
 
-        return x
-    }
+		if (!i) return x
 
-    let legendValues = []
-    let legendGroup, legendCitiesMarkers, legendCitiesLabels
-    if (!isMobile()) {
-        if (chartView.value === "countries") {
-            legendGroup = svg
-                .append("g")
-                .attr("transform", `translate(${legend.marginLeft}, ${height - legend.marginBottom})`)
-                .style("opacity", 0)
-            const defs = svg.append("defs")
-            const linearGradient = defs.append("linearGradient")
-                .attr("id", "legend-gradient")
-                .attr("x1", "0%")
-                .attr("x2", "100%")
-                .attr("y1", "0%")
-                .attr("y2", "0%")
-            
-            legendValues = [1, 25, 50, 100, countryMaxAmount]
-            legendValues.forEach((d, i, arr) => {
-                linearGradient.append("stop")
-                    .attr("offset", `${(i / (arr.length - 1)) * 100}%`)
-                    .attr("stop-color", countryColor(d))
-            })
-            
-            legendGroup.append("rect")
-                .attr("x", 0)
-                .attr("y", 10)
-                .attr("width", legend.width)
-                .attr("height", legend.height)
-                .style("fill", "url(#legend-gradient)")
-            
-            const legendScale = d3.scaleLinear()
-                .domain([1, countryMaxAmount])
-                .range([1, legend.width])
-
-            const legendAxis = d3.axisBottom(legendScale)
-                .tickValues(legendValues)
-                .tickFormat(d3.format("d"))
-
-            legendGroup.append("g")
-                .attr("transform", `translate(0, ${legend.marginBottom - 20})`)
-                .call(legendAxis)
-                .attr("color", "var(--txt-tertiary)")
-            
-            legendGroup
-                .transition()
-                .duration(1_000)
-                .style("opacity", 1)
-                
-        } else if (chartView.value === "cities") {
-            legendValues = [1, 25, 100]
-            legendCitiesMarkers = svg.append("g")
-                .selectAll("legendCircles")
-                .data(legendValues)
-                .enter()
-                .append("circle")
-                    .attr("cx", (d, i) => legendCitiesX(i))
-                    .attr("cy", d => height - legend.marginBottom + 20 - size(+d))
-                    .attr("r", d => size(+d))
-                    .style("fill", "var(--brand)")
-                    .attr("fill-opacity", 0)
-            legendCitiesMarkers
-                .transition()
-                .duration(1_000)
-                .attr("fill-opacity", 0.7)
-
-            legendCitiesLabels = svg.append("g")
-                .selectAll("legendLabels")
-                .data(legendValues)
-                .enter()
-                .append("text")
-                    .attr('x', (d, i) => legendCitiesX(i))
-                    .attr('y', height - legend.marginBottom + 15 + size(legendValues.pop()))
-                    .text(d => d)
-                    .style("font-size", 12)
-                    // .style("fill", "var(--txt-secondary)")
-                    .style("fill", "var(--txt-tertiary)")
-                    .attr('text-anchor', 'middle')
-                    .attr("fill-opacity", 0)
-            legendCitiesLabels
-                .transition()
-                .duration(1_000)
-                .attr("fill-opacity", 1)
-        }
-    }
+		for (let ind = 0; ind < i; ind++) {
+			x = x + size(legendValues[ind]) * 2 + 30
+		}
+		x = x - size(legendValues[0]) + size(legendValues[i])
 
-    // Add zoom functionality
-    const bounds = d3.geoPath().projection(projection).bounds({ type: "FeatureCollection", features: geoMap.value })
-    const [[x0, y0], [x1, y1]] = bounds
-    const zoom = d3.zoom()
-        .scaleExtent([1, 20])
-        .translateExtent([[x0, y0], [x1, y1]])
-        .on("zoom", (event) => {
-            tooltip.style.opacity = 0
-            zoomScale = event.transform.k
-            g.attr("transform", event.transform)
-            map.attr("stroke-width", 1 / zoomScale)
-            if (chartView.value === "countries" && legendValues.length) {
-                if (zoomScale > 3) {
-                    legendGroup
-                        .transition()
-                        .duration(1_000)
-                        .style("opacity", 0)
-                } else {
-                    legendGroup
-                        .transition()
-                        .duration(1_000)
-                        .style("opacity", 1)
-                }
-            } else if (chartView.value === "cities") {
-                if (zoomScale > 1) {
-                    cities.attr("r", d => size(+d.amount) / (zoomScale * 1.1))
-                    if (legendValues.length) {
-                        if (zoomScale > 3) {
-                            legendCitiesMarkers
-                                .transition()
-                                .duration(1_000)
-                                .attr("fill-opacity", 0)
-                            legendCitiesLabels
-                                .transition()
-                                .duration(1_000)
-                                .attr("fill-opacity", 0)
-                        } else {
-                            legendCitiesMarkers
-                                .transition()
-                                .duration(1_000)
-                                .attr("fill-opacity", 0.7)
-                            legendCitiesLabels
-                                .transition()
-                                .duration(1_000)
-                                .attr("fill-opacity", 1)
-                        }
-                    }
-                } else {
-                    cities.attr("r", d => size(+d.amount))
-                }
-            }
-        })
+		return x
+	}
 
-    svg.call(zoom);
+	let legendValues = []
+	let legendGroup, legendCitiesMarkers, legendCitiesLabels
+	if (!isMobile()) {
+		if (chartView.value === "countries") {
+			legendGroup = svg
+				.append("g")
+				.attr("transform", `translate(${legend.marginLeft}, ${height - legend.marginBottom})`)
+				.style("opacity", 0)
+			const defs = svg.append("defs")
+			const linearGradient = defs
+				.append("linearGradient")
+				.attr("id", "legend-gradient")
+				.attr("x1", "0%")
+				.attr("x2", "100%")
+				.attr("y1", "0%")
+				.attr("y2", "0%")
+
+			legendValues = [1, 25, 50, 100, countryMaxAmount]
+			legendValues.forEach((d, i, arr) => {
+				linearGradient
+					.append("stop")
+					.attr("offset", `${(i / (arr.length - 1)) * 100}%`)
+					.attr("stop-color", countryColor(d))
+			})
+
+			legendGroup
+				.append("rect")
+				.attr("x", 0)
+				.attr("y", 10)
+				.attr("width", legend.width)
+				.attr("height", legend.height)
+				.style("fill", "url(#legend-gradient)")
+
+			const legendScale = d3.scaleLinear().domain([1, countryMaxAmount]).range([1, legend.width])
+
+			const legendAxis = d3.axisBottom(legendScale).tickValues(legendValues).tickFormat(d3.format("d"))
+
+			legendGroup
+				.append("g")
+				.attr("transform", `translate(0, ${legend.marginBottom - 20})`)
+				.call(legendAxis)
+				.attr("color", "var(--txt-tertiary)")
+
+			legendGroup.transition().duration(1_000).style("opacity", 1)
+		} else if (chartView.value === "cities") {
+			legendValues = [1, 25, 100]
+			legendCitiesMarkers = svg
+				.append("g")
+				.selectAll("legendCircles")
+				.data(legendValues)
+				.enter()
+				.append("circle")
+				.attr("cx", (d, i) => legendCitiesX(i))
+				.attr("cy", (d) => height - legend.marginBottom + 20 - size(+d))
+				.attr("r", (d) => size(+d))
+				.style("fill", "var(--brand)")
+				.attr("fill-opacity", 0)
+			legendCitiesMarkers.transition().duration(1_000).attr("fill-opacity", 0.7)
+
+			legendCitiesLabels = svg
+				.append("g")
+				.selectAll("legendLabels")
+				.data(legendValues)
+				.enter()
+				.append("text")
+				.attr("x", (d, i) => legendCitiesX(i))
+				.attr("y", height - legend.marginBottom + 15 + size(legendValues.pop()))
+				.text((d) => d)
+				.style("font-size", 12)
+				.style("fill", "var(--txt-tertiary)")
+				.attr("text-anchor", "middle")
+				.attr("fill-opacity", 0)
+			legendCitiesLabels.transition().duration(1_000).attr("fill-opacity", 1)
+		}
+	}
 
-    svg.on("wheel", (event) => event.preventDefault(), { passive: false })
+	// Add zoom functionality
+	const bounds = d3.geoPath().projection(projection).bounds({ type: "FeatureCollection", features: geoMap.value })
+	const [[x0, y0], [x1, y1]] = bounds
+	const zoom = d3
+		.zoom()
+		.scaleExtent([1, 20])
+		.translateExtent([
+			[x0, y0],
+			[x1, y1],
+		])
+		.on("zoom", (event) => {
+			tooltip.style.opacity = 0
+			zoomScale = event.transform.k
+			g.attr("transform", event.transform)
+			map.attr("stroke-width", 1 / zoomScale)
+			if (chartView.value === "countries" && legendValues.length) {
+				if (zoomScale > 3) {
+					legendGroup.transition().duration(1_000).style("opacity", 0)
+				} else {
+					legendGroup.transition().duration(1_000).style("opacity", 1)
+				}
+			} else if (chartView.value === "cities") {
+				if (zoomScale > 1) {
+					cities.attr("r", (d) => size(+d.amount) / (zoomScale * 1.1))
+					if (legendValues.length) {
+						if (zoomScale > 3) {
+							legendCitiesMarkers.transition().duration(1_000).attr("fill-opacity", 0)
+							legendCitiesLabels.transition().duration(1_000).attr("fill-opacity", 0)
+						} else {
+							legendCitiesMarkers.transition().duration(1_000).attr("fill-opacity", 0.7)
+							legendCitiesLabels.transition().duration(1_000).attr("fill-opacity", 1)
+						}
+					}
+				} else {
+					cities.attr("r", (d) => size(+d.amount))
+				}
+			}
+		})
+
+	svg.call(zoom)
+
+	svg.on("wheel", (event) => event.preventDefault(), { passive: false })
 
 	if (chart.children[0]) chart.children[0].remove()
 	chart.append(svg.node())
 }
 
-onMounted( async () => {
-    isLoading.value = true
-    try {
-        const geoData = await d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
-        // const geoData = await d3.json("https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson")
-        if (geoData?.features.length) {
-            geoMap.value = geoData.features.filter(d => d.properties.name !== "Antarctica")
-            const countryData = await getNodeStats("country")
-            const cityData = (await getNodeStats("city")).filter(el => el.latitude)
-
-            nodeCityData.value = Object.values(cityData.reduce((acc, obj) => {
-                if (!acc[obj.name]) {
-                    acc[obj.name] = { ...obj }
-                } else {
-                    acc[obj.name].amount += obj.amount
-                }
-                return acc
-            }, {}))
-
-            nodeCityData.value.forEach(c => {
-                c.country = getCountryByCoordinatesOrCityName(c.name, c.latitude, c.longitude, geoData)
-            })        
-
-            const amountCityMap = nodeCityData.value.reduce((acc, { country, amount }) => {
-                if (acc[country]) {
-                    acc[country] += amount;
-                } else {
-                    acc[country] = amount;
-                }
-
-                return acc
-                }, {})
-            
-            const amountCountryMap = Object.fromEntries(
-                countryData.map(d => {
-                    const name = convertCountryCode(d.name)
-                    return name ? [name, d.amount] : null
-                })
-                .filter(Boolean)
-            )
-            
-            geoMap.value = geoMap.value.map(feature => ({
-                ...feature,
-                amount: amountCountryMap[feature.id] || 0,
-                amountLostCities: (amountCountryMap[feature.id] || 0) - (amountCityMap[feature.id] || 0),
-            }))
-            
-            
-            await buildChart(chartEl.value.wrapper)
-        }
-    } finally {
-        isLoading.value = false
-    }
+onMounted(async () => {
+	isLoading.value = true
+	try {
+		const geoData = await d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
+		// const geoData = await d3.json("https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/master/countries.geojson")
+		if (geoData?.features.length) {
+			geoMap.value = geoData.features.filter((d) => d.properties.name !== "Antarctica")
+			const countryData = await getNodeStats("country")
+			const cityData = (await getNodeStats("city")).filter((el) => el.latitude)
+
+			nodeCityData.value = Object.values(
+				cityData.reduce((acc, obj) => {
+					if (!acc[obj.name]) {
+						acc[obj.name] = { ...obj }
+					} else {
+						acc[obj.name].amount += obj.amount
+					}
+					return acc
+				}, {}),
+			)
+
+			nodeCityData.value.forEach((c) => {
+				c.country = getCountryByCoordinatesOrCityName(c.name, c.latitude, c.longitude, geoData)
+			})
+
+			const amountCityMap = nodeCityData.value.reduce((acc, { country, amount }) => {
+				if (acc[country]) {
+					acc[country] += amount
+				} else {
+					acc[country] = amount
+				}
+
+				return acc
+			}, {})
+
+			const amountCountryMap = Object.fromEntries(
+				countryData
+					.map((d) => {
+						const name = convertCountryCode(d.name)
+						return name ? [name, d.amount] : null
+					})
+					.filter(Boolean),
+			)
+
+			geoMap.value = geoMap.value.map((feature) => ({
+				...feature,
+				amount: amountCountryMap[feature.id] || 0,
+				amountLostCities: (amountCountryMap[feature.id] || 0) - (amountCityMap[feature.id] || 0),
+			}))
+
+			await buildChart(chartEl.value.wrapper)
+		}
+	} finally {
+		isLoading.value = false
+	}
 })
 
 watch(
-    () => chartView.value,
-    async () => {
-        await buildChart(chartEl.value.wrapper)
-    }
+	() => chartView.value,
+	async () => {
+		await buildChart(chartEl.value.wrapper)
+	},
 )
 </script>
 
@@ -534,28 +507,28 @@ watch(
 
 <style module>
 .wrapper {
-    width: 100%;
+	width: 100%;
 	height: 100%;
 
-    position: relative;
+	position: relative;
 }
 
 .chart {
-    width: 100%;
+	width: 100%;
 	height: 100%;
 
 	overflow: hidden;
 
 	& svg {
 		overflow: visible;
-        /* display: block; */
+		/* display: block; */
 	}
 }
 
 .chart_selector {
-    width: 52px;
-    position: absolute;
-    top: 8px;
+	width: 52px;
+	position: absolute;
+	top: 8px;
 	right: 8px;
 
 	padding: 4px 6px;
@@ -566,24 +539,24 @@ watch(
 }
 
 .chart_info {
-    position: absolute;
-    top: 8px;
+	position: absolute;
+	top: 8px;
 	left: 8px;
 }
 
-.loader{
-    position: absolute;
-    top: 30%;
-    right: 50%;
-    animation: blink 1s ease-in-out infinite;
-
-    path {
-        stroke: var(--txt-secondary);
-        stroke-width: 5;
-        stroke-dasharray: 1800;
-        stroke-dashoffset: 1800;
-        animation: drawPath 2s linear infinite;
-    }
+.loader {
+	position: absolute;
+	top: 30%;
+	right: 50%;
+	animation: blink 1s ease-in-out infinite;
+
+	path {
+		stroke: var(--txt-secondary);
+		stroke-width: 5;
+		stroke-dasharray: 1800;
+		stroke-dashoffset: 1800;
+		animation: drawPath 2s linear infinite;
+	}
 }
 
 /* .france_icon circle {
@@ -595,9 +568,9 @@ watch(
 } */
 
 @keyframes drawPath {
-    to {
-        stroke-dashoffset: 0;
-    }
+	to {
+		stroke-dashoffset: 0;
+	}
 }
 
 /* @keyframes movePoint {
@@ -612,15 +585,15 @@ watch(
 } */
 
 @keyframes blink {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.4;
-    }
-    100% {
-        opacity: 1;
-    }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.4;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 @media (max-width: 1000px) {
diff --git a/components/modules/stats/InsightCard.vue b/components/modules/stats/InsightCard.vue
index 277e205e..c3e0b79b 100644
--- a/components/modules/stats/InsightCard.vue
+++ b/components/modules/stats/InsightCard.vue
@@ -1,13 +1,9 @@
 <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, shareOfTotal, shareOfTotalString } from "@/services/utils"
+import { abbreviate, capitilize, comma, formatBytes, shareOfTotal } from "@/services/utils"
 
 /** API */
 import { fetchGeneralStats, fetchSummary } from "@/services/api/stats"
@@ -29,74 +25,73 @@ const isLoading = ref(false)
 
 const getSeries = async () => {
 	isLoading.value = true
-	
+
 	let data = []
-	if (props.series.name === 'gas') {
+	if (props.series.name === "gas") {
 		const gasUsed = await fetchSummary({
-			table: 'tx',
-			func: 'sum',
-			column: 'gas_used',
+			table: "tx",
+			func: "sum",
+			column: "gas_used",
 			from: parseInt(DateTime.now().minus({ hours: 24 }).ts / 1_000),
 		})
 
 		const gasWanted = await fetchSummary({
-			table: 'tx',
-			func: 'sum',
-			column: 'gas_wanted',
+			table: "tx",
+			func: "sum",
+			column: "gas_wanted",
 			from: parseInt(DateTime.now().minus({ hours: 24 }).ts / 1_000),
 		})
 
-		let efficiency = (gasUsed / gasWanted * 100).toFixed(0)
+		let efficiency = ((gasUsed / gasWanted) * 100).toFixed(0)
 		data = [
 			{
-				name: 'efficiency',
+				name: "efficiency",
 				value: `${efficiency}%`,
 				share: efficiency,
-				color: colors[props.series.color ? props.series.color : 'mint'][0]
+				color: colors[props.series.color ? props.series.color : "mint"][0],
 			},
 			{
-				name: 'limit',
+				name: "limit",
 				value: abbreviate(gasWanted),
 				share: 100 - efficiency,
-				color: colors[props.series.color ? props.series.color : 'mint'][4]
+				color: colors[props.series.color ? props.series.color : "mint"][4],
 			},
 			{
-				name: 'used',
+				name: "used",
 				value: abbreviate(gasUsed),
-				color: colors[props.series.color ? props.series.color : 'mint'][4]
+				color: colors[props.series.color ? props.series.color : "mint"][4],
 			},
 		]
 	} else {
-		data = await fetchGeneralStats({ name: props.series.name })	
+		data = await fetchGeneralStats({ name: props.series.name })
 	}
-	
+
 	switch (props.series.name) {
-		case 'rollup_stats_24h':
+		case "rollup_stats_24h":
 			resData.value = data
-				.filter(item => item.id !== undefined && item.id !== null)
-				.map(item => {
+				.filter((item) => item.id !== undefined && item.id !== null)
+				.map((item) => {
 					const { blobs_count, ...rest } = item
 					return {
 						...rest,
-						value: blobs_count
+						value: blobs_count,
 					}
 				})
 			break
-		case 'messages_count_24h':
-			resData.value = data
-				.map(item => {
-					return {
-						...item,
-						name: item.name.replace('Msg', '')
-					}
-				})
+		case "messages_count_24h":
+			resData.value = data.map((item) => {
+				return {
+					...item,
+					name: item.name.replace("Msg", ""),
+				}
+			})
 			break
 		default:
 			resData.value = data
 			break
 	}
 
-	if (props.series.name === 'gas') {
+	if (props.series.name === "gas") {
 		total.value = resData.value[0].value
 	} else {
 		total.value = resData.value.reduce((sum, el) => {
@@ -108,7 +103,7 @@ const getSeries = async () => {
 
 		let totalOther = total.value
 		let sumShares = 0
-		resData.value.forEach(item => {
+		resData.value.forEach((item) => {
 			let share = shareOfTotal(item.value, total.value, 2)
 			totalOther -= item.value
 			sumShares += share ? share : 0
@@ -125,8 +120,8 @@ const getSeries = async () => {
 		}
 
 		resData.value.forEach((item, index) => {
-			item.color = colors[props.series.color ? props.series.color : 'mint'][index]
-		})		
+			item.color = colors[props.series.color ? props.series.color : "mint"][index]
+		})
 	}
 
 	isLoading.value = false
@@ -135,14 +130,13 @@ const getSeries = async () => {
 const barWrapperEl = ref(null)
 const barWrapperWidth = ref(0)
 const colors = {
-	// mint: ["var(--mint)", "#46a78e", "var(--dark-mint)", "var(--op-10)"],
 	mint: ["var(--mint)", "#50bfa3", "#327766", "var(--dark-mint)", "var(--op-10)"],
 	white: ["var(--txt-primary)", "var(--txt-secondary)", "var(--txt-tertiary)", "var(--op-10)", "var(--op-5)"],
 }
 
 const handleHoverEnter = (index) => {
 	const elements = document.querySelectorAll(`[class*='insight-item-${props.series.name}']`)
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		if (+el.id === index) {
 			el.style.filter = "brightness(100%)"
 		} else {
@@ -153,7 +147,7 @@ const handleHoverEnter = (index) => {
 
 const handleHoverLeave = () => {
 	const elements = document.querySelectorAll(`[class*='insight-item-${props.series.name}']`)
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		el.style.filter = "brightness(100%)"
 	})
 }
@@ -163,14 +157,6 @@ onMounted(async () => {
 
 	await getSeries()
 })
-
-// watch(
-// 	() => props.period,
-// 	async () => {
-// 		await drawChart()
-// 	},
-// )
-
 </script>
 
 <template>
@@ -179,9 +165,9 @@ onMounted(async () => {
 			<Flex align="center" gap="10" justify="start" wide>
 				<Text size="14" weight="600" color="secondary"> {{ series.title }} </Text>
 			</Flex>
-			
+
 			<Flex v-if="series.name !== 'gas'" align="end" gap="10" justify="start" wide>
-				<Text size="20" weight="600" color="primary"> {{ series.units === 'bytes' ? formatBytes(total) : comma(total) }} </Text>
+				<Text size="20" weight="600" color="primary"> {{ series.units === "bytes" ? formatBytes(total) : comma(total) }} </Text>
 				<Text size="14" weight="600" color="tertiary"> new today </Text>
 			</Flex>
 			<Flex v-else align="end" gap="10" justify="start" wide>
@@ -200,7 +186,7 @@ onMounted(async () => {
 					{
 						[$style.bar]: true,
 						[$style.fadein]: true,
-					}
+					},
 				]"
 				:style="{
 					transition: 'all 0.5s ease',
@@ -219,7 +205,7 @@ onMounted(async () => {
 					{
 						[$style.bar]: true,
 						[$style.fadein]: true,
-					}
+					},
 				]"
 				:style="{
 					transition: 'all 0.5s ease',
@@ -231,22 +217,24 @@ onMounted(async () => {
 		</Flex>
 
 		<Flex v-if="series.name !== 'gas'" @pointerleave="handleHoverLeave()" align="center" direction="column" gap="12" wide>
-			<Flex 
+			<Flex
 				@pointerenter="handleHoverEnter(index)"
 				v-for="(item, index) in resData"
 				justify="between"
-				gap="4" wide
+				gap="4"
+				wide
 				:id="index"
 				:class="[
 					`insight-item-${series.name}`,
 					{
 						[$style.fadein]: true,
-					}
+					},
 				]"
 				:style="{ transition: 'all 0.5s ease', animationDelay: `${index * 0.15}s` }"
 			>
 				<Flex align="center" justify="start" gap="6">
-					<Icon v-if="series.name === 'rollup_stats_24h' && index === 0"
+					<Icon
+						v-if="series.name === 'rollup_stats_24h' && index === 0"
 						name="crown"
 						size="14"
 						:style="{
@@ -255,7 +243,8 @@ onMounted(async () => {
 							fill: 'var(--mint)',
 						}"
 					/>
-					<div v-else
+					<div
+						v-else
 						:class="$style.legend"
 						:style="{
 							background: item.color,
@@ -268,7 +257,9 @@ onMounted(async () => {
 				<Flex align="center" gap="6">
 					<Text size="12" weight="500" color="tertiary"> {{ comma(item.value) }} </Text>
 
-					<Text size="12" weight="500" color="secondary"> {{ `${item.share > 99 && resData.length > 1 ? 99 : item.share < 1 ? '<1' : item.share.toFixed(0)}%` }} </Text>
+					<Text size="12" weight="500" color="secondary">
+						{{ `${item.share > 99 && resData.length > 1 ? 99 : item.share < 1 ? "<1" : item.share.toFixed(0)}%` }}
+					</Text>
 				</Flex>
 			</Flex>
 		</Flex>
@@ -278,13 +269,14 @@ onMounted(async () => {
 				@pointerenter="handleHoverEnter(index)"
 				v-for="(item, index) in resData"
 				justify="between"
-				gap="4" wide
+				gap="4"
+				wide
 				:id="index"
 				:class="[
 					`insight-item-${series.name}`,
 					{
 						[$style.fadein]: true,
-					}
+					},
 				]"
 				:style="{ transition: 'all 0.5s ease', animationDelay: `${index * 0.15}s` }"
 			>
@@ -341,23 +333,22 @@ onMounted(async () => {
 }
 
 .header {
-
 }
 
 .fadein {
-    opacity: 0;
-    animation-name: fadeIn;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
+	opacity: 0;
+	animation-name: fadeIn;
+	animation-duration: 1s;
+	animation-fill-mode: forwards;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
 
 @media (max-width: 1000px) {
diff --git a/components/modules/stats/LineChart.vue b/components/modules/stats/LineChart.vue
index 0d0b287f..e45856ad 100644
--- a/components/modules/stats/LineChart.vue
+++ b/components/modules/stats/LineChart.vue
@@ -22,7 +22,6 @@ const currentData = computed(() => {
 	return { data: props.series.currentData }
 })
 
-
 const chartEl = ref()
 const tooltip = ref({
 	data: [],
@@ -37,8 +36,8 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 	const marginLeft = 36
 	const marginAxisX = 20
 
-	const MIN_VALUE = d3.min([...cData.data?.map((s) => s.value)])
-	const MAX_VALUE = d3.max([...cData.data?.map((s) => s.value)])
+	const MIN_VALUE = d3.min(cData.data?.map((s) => s.value))
+	const MAX_VALUE = d3.max(cData.data?.map((s) => s.value))
 
 	/** Scales */
 	const x = d3.scaleUtc(
@@ -109,7 +108,7 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 			d3
 				.axisBottom(x)
 				.ticks(Math.min(cData.data.length, 6))
-				.tickFormat(d3.timeFormat(["hour", "day"].includes(props.series.timeframe.timeframe) ? "%b %d" : "%b"))
+				.tickFormat(d3.timeFormat(["hour", "day"].includes(props.series.timeframe.timeframe) ? "%b %d" : "%b")),
 		)
 
 	svg.append("g")
diff --git a/components/modules/stats/PieChartCard.vue b/components/modules/stats/PieChartCard.vue
index ce6f2617..e16b631e 100644
--- a/components/modules/stats/PieChartCard.vue
+++ b/components/modules/stats/PieChartCard.vue
@@ -3,21 +3,21 @@
 import * as d3 from "d3"
 
 /** Services */
-import { abbreviate, capitilize, comma, formatBytes } from "@/services/utils"
+import { abbreviate, capitilize, formatBytes } from "@/services/utils"
 
 const props = defineProps({
 	series: {
 		type: Object,
 		required: true,
 	},
-    data: {
-        type: Array,
-        required: true,
-    },
-    dounut: {
-        type: Boolean,
-        default: false,
-    },
+	data: {
+		type: Array,
+		required: true,
+	},
+	dounut: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const router = useRouter()
@@ -26,55 +26,52 @@ const resData = ref([])
 const total = ref(0)
 
 const prepareRollupsData = () => {
-    resData.value = []
-    let key = props.series.name
-    props.data?.forEach(el => {
-        resData.value.push(
-            {
-                name: el.name,
-                slug: el.slug,
-                value: props.series.units === 'utia' ? Math.round(el[key], 2) : el[key],
-            }
-        )
-    })
-
-    resData.value.sort((a, b) => b.value - a.value)
-
-    total.value = resData.value.reduce((sum, el) => sum + +el.value, 0)
-    let length = resData.value.length
-    let totalShare = 0
-    resData.value.forEach((el, i) => {
-        let share = +(el.value / total.value * 100).toFixed(0)
-        if (i < length - 1 || length === 1) {
-            el.share = share
-        } else {
-            el.share = 100 - totalShare
-        }
-        totalShare += share
-    })
-
-    let startlength = resData.value.length
-    resData.value = resData.value.slice(0, Math.min(startlength, 4))
-
-    if (startlength > 4) {
-        resData.value.push({
-            name: "Other",
-            value: total.value - resData.value.reduce((sum, el) => sum + el.value, 0),
-            share: 100 - resData.value.reduce((sum, el) => sum + el.share, 0),
-        })
-    }
+	resData.value = []
+	let key = props.series.name
+	props.data?.forEach((el) => {
+		resData.value.push({
+			name: el.name,
+			slug: el.slug,
+			value: props.series.units === "utia" ? Math.round(el[key], 2) : el[key],
+		})
+	})
+
+	resData.value.sort((a, b) => b.value - a.value)
+
+	total.value = resData.value.reduce((sum, el) => sum + +el.value, 0)
+	let length = resData.value.length
+	let totalShare = 0
+	resData.value.forEach((el, i) => {
+		let share = +((el.value / total.value) * 100).toFixed(0)
+		if (i < length - 1 || length === 1) {
+			el.share = share
+		} else {
+			el.share = 100 - totalShare
+		}
+		totalShare += share
+	})
+
+	let startlength = resData.value.length
+	resData.value = resData.value.slice(0, Math.min(startlength, 4))
+
+	if (startlength > 4) {
+		resData.value.push({
+			name: "Other",
+			value: total.value - resData.value.reduce((sum, el) => sum + el.value, 0),
+			share: 100 - resData.value.reduce((sum, el) => sum + el.share, 0),
+		})
+	}
 }
 
 const chartEl = ref()
 const radius = ref(0)
 const innerRadius = ref(0)
-const color = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#55c9ab", "#142f28"]))
-        .domain([0, 5])
+const color = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#55c9ab", "#142f28"])).domain([0, 5])
 
 const buildChart = (chart, data) => {
 	const { width, height } = chart.getBoundingClientRect()
-    radius.value = Math.min(width, height) / 2
-    innerRadius.value = props.dounut ? radius.value * 0.6 : 0
+	radius.value = Math.min(width, height) / 2
+	innerRadius.value = props.dounut ? radius.value * 0.6 : 0
 
 	/** SVG Container */
 	const svg = d3
@@ -84,210 +81,233 @@ const buildChart = (chart, data) => {
 		.attr("viewBox", [0, 0, width, height])
 		.attr("preserveAspectRatio", "none")
 		.attr("style", "max-width: 100%;")
-        .attr("transform", `translate(${width / 2}, ${height / 2})`)
+		.attr("transform", `translate(${width / 2}, ${height / 2})`)
 		.style("-webkit-tap-highlight-color", "transparent")
 		.on("touchstart", (event) => event.preventDefault())
 
-    /** Pie chart */
-    const pie = d3.pie()
-        .sort(null)
-        .value(d => d.value)
-
-    const arc = d3.arc()
-        .outerRadius(radius.value - 10)
-        .innerRadius(innerRadius.value)
-    
-    const arcOver = d3.arc()
-        .outerRadius(radius.value - 5)
-        .innerRadius(innerRadius.value)
-
-    const g = svg.selectAll(".arc")
-        .data(pie(data))
-        .enter().append("g")
-        .attr("class", (d, index) => `arc-${props.series.name}-${index}`)
-
-    g.append("path")
-        .style("fill", (d, i) => color(i))
-        .transition()
-            .duration(1000)
-            .attrTween("d", function(d) {
-                const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
-                return function(t) {
-                    return arc(i(t))
-                }
-            })
-    
-    /** Events */
-    g.on("pointerenter", function(event, d) {
-        d3.select(this).select("path")
-            .transition()
-            .duration(200)
-            .attr("d", arcOver)
-            .attr("transform", d => {
-                const [x, y] = arc.centroid(d)
-                const dist = 0.05
-                return `translate(${x * dist}, ${y * dist})`
-            })
-        
-        const index = d.index
-        d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", true)
-        d3.select(`.legend-item-${props.series.name}-${index}`).classed("dimmed", false)
-    })
-    .on("pointerleave", function(event, d) {
-        d3.select(this).select("path")
-            .transition()
-            .duration(200)
-            .attr("d", arc)
-            .attr("transform", "translate(0, 0)")
-        
-        d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", false)
-    })
+	/** Pie chart */
+	const pie = d3
+		.pie()
+		.sort(null)
+		.value((d) => d.value)
+
+	const arc = d3
+		.arc()
+		.outerRadius(radius.value - 10)
+		.innerRadius(innerRadius.value)
+
+	const arcOver = d3
+		.arc()
+		.outerRadius(radius.value - 5)
+		.innerRadius(innerRadius.value)
+
+	const g = svg
+		.selectAll(".arc")
+		.data(pie(data))
+		.enter()
+		.append("g")
+		.attr("class", (d, index) => `arc-${props.series.name}-${index}`)
+
+	g.append("path")
+		.style("fill", (d, i) => color(i))
+		.transition()
+		.duration(1000)
+		.attrTween("d", function (d) {
+			const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
+			return function (t) {
+				return arc(i(t))
+			}
+		})
+
+	/** Events */
+	g.on("pointerenter", function (event, d) {
+		d3.select(this)
+			.select("path")
+			.transition()
+			.duration(200)
+			.attr("d", arcOver)
+			.attr("transform", (d) => {
+				const [x, y] = arc.centroid(d)
+				const dist = 0.05
+				return `translate(${x * dist}, ${y * dist})`
+			})
+
+		const index = d.index
+		d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", true)
+		d3.select(`.legend-item-${props.series.name}-${index}`).classed("dimmed", false)
+	}).on("pointerleave", function (event, d) {
+		d3.select(this).select("path").transition().duration(200).attr("d", arc).attr("transform", "translate(0, 0)")
+
+		d3.selectAll(`.legend-item-${props.series.name}`).classed("dimmed", false)
+	})
 
 	if (chart.children[0]) chart.children[0].remove()
 	chart.append(svg.node())
 }
 
 const init = () => {
-    if (props.data?.length) {
-        prepareRollupsData()
-
-        nextTick(() => {
-            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")
-                })
-
-                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)
-                })
-            })
-        })
-    }
+	if (props.data?.length) {
+		prepareRollupsData()
+
+		nextTick(() => {
+			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")
+				})
+
+				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) => {
-    if (el.slug) {
-        router.push(`/rollup/${el.slug}`)
-    }
+	if (el.slug) {
+		router.push(`/rollup/${el.slug}`)
+	}
 }
 
 onMounted(() => {
-    init()
+	init()
 })
 
 watch(
 	() => props.data,
 	() => {
 		init()
-	}
+	},
 )
 </script>
 
 <template>
 	<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>
+		<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>
+			<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>
-            <Flex align="center" direction="column" gap="16" wide :class="$style.legend_wrapper">
-                <Flex v-for="(el, index) in resData"
-                    @click="handleNavigate(el)"
-                    align="center"
-                    justify="between" wide
-                    :style="{ animationDelay: `${index * 0.1}s` }"
-                    :class="[
-                        `legend-item-${series.name}`,
-                        `legend-item-${series.name}-${index}`,
-                        { 
-                            [$style.legend_item]: true,
-                            [$style.fadein]: true,
-                            [$style.clickable]: el.name !== 'Other',
-                         }
-                    ]"
-                >
-                    <Flex align="center" justify="start" gap="6">
-                        <Icon v-if="index === 0"
-                            name="crown"
-                            size="12"
-                            :style="{
-                                marginLeft: '-2px',
-                                marginRight: '4px',
-                                fill: color(index),
-                            }"
-                        />
-                        <div v-else
-                            :class="$style.legend"
-                            :style="{
-                                background: color(index),
-                            }"
-                        />
-
-                        <Text size="12" weight="600" color="primary"> {{ capitilize(el.name) }} </Text>
-                    </Flex>
-
-                    <Flex align="center" gap="6">
-                        <Text size="12" weight="500" color="tertiary">
-                            {{ series.units === 'bytes' ? formatBytes(el.value) : series.units === 'utia' ? abbreviate(el.value) + ' TIA' : abbreviate(el.value) }}
-                        </Text>
-
-                        <Text size="12" weight="500" color="secondary"> {{ `${el.share > 99 && resData.length > 1 ? 99 : el.share < 1 ? '<1' : el.share.toFixed(0)}%` }} </Text>
-                    </Flex>
-                </Flex>
-            </Flex>
-
-            <Flex align="center" :class="$style.chart_wrapper">
-                <Flex ref="chartEl" :class="$style.chart" />
-            </Flex>
+			<Flex align="center" direction="column" gap="16" wide :class="$style.legend_wrapper">
+				<Flex
+					v-for="(el, index) in resData"
+					@click="handleNavigate(el)"
+					align="center"
+					justify="between"
+					wide
+					:style="{ animationDelay: `${index * 0.1}s` }"
+					:class="[
+						`legend-item-${series.name}`,
+						`legend-item-${series.name}-${index}`,
+						{
+							[$style.legend_item]: true,
+							[$style.fadein]: true,
+							[$style.clickable]: el.name !== 'Other',
+						},
+					]"
+				>
+					<Flex align="center" justify="start" gap="6">
+						<Icon
+							v-if="index === 0"
+							name="crown"
+							size="12"
+							:style="{
+								marginLeft: '-2px',
+								marginRight: '4px',
+								fill: color(index),
+							}"
+						/>
+						<div
+							v-else
+							:class="$style.legend"
+							:style="{
+								background: color(index),
+							}"
+						/>
+
+						<Text size="12" weight="600" color="primary"> {{ capitilize(el.name) }} </Text>
+					</Flex>
+
+					<Flex align="center" gap="6">
+						<Text size="12" weight="500" color="tertiary">
+							{{
+								series.units === "bytes"
+									? formatBytes(el.value)
+									: series.units === "utia"
+									? abbreviate(el.value) + " TIA"
+									: abbreviate(el.value)
+							}}
+						</Text>
+
+						<Text size="12" weight="500" color="secondary">
+							{{ `${el.share > 99 && resData.length > 1 ? 99 : el.share < 1 ? "<1" : el.share.toFixed(0)}%` }}
+						</Text>
+					</Flex>
+				</Flex>
+			</Flex>
+
+			<Flex align="center" :class="$style.chart_wrapper">
+				<Flex ref="chartEl" :class="$style.chart" />
+			</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>
-    <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>
 .wrapper {
-    width: 100%;
+	width: 100%;
 	height: 100%;
 
 	background: var(--card-background);
@@ -297,19 +317,19 @@ watch(
 }
 
 .link {
-    transition: fill 0.3s ease;
+	transition: fill 0.3s ease;
 
-    &:hover {
-        fill: var(--txt-secondary)
-    }
+	&:hover {
+		fill: var(--txt-secondary);
+	}
 }
 
 .legend_wrapper {
-    max-width: 55%;
+	max-width: 55%;
 }
 
 .legend_item {
-    transition: all 0.6s ease;
+	transition: all 0.6s ease;
 }
 
 .legend {
@@ -323,18 +343,18 @@ watch(
 }
 
 .clickable {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .chart_wrapper {
-    width: 155px;
+	width: 155px;
 	height: 155px;
 
 	position: relative;
 }
 
 .chart {
-    width: 100%;
+	width: 100%;
 	height: 100%;
 	position: absolute;
 
@@ -346,10 +366,10 @@ watch(
 }
 
 .fadein {
-    opacity: 0;
-    animation-name: fadeIn;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
+	opacity: 0;
+	animation-name: fadeIn;
+	animation-duration: 1s;
+	animation-fill-mode: forwards;
 }
 
 .loading {
@@ -371,12 +391,12 @@ watch(
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
 
 @media (max-width: 1000px) {
diff --git a/components/modules/stats/RollupsActivity.vue b/components/modules/stats/RollupsActivity.vue
index ee8ada08..a95d41c2 100644
--- a/components/modules/stats/RollupsActivity.vue
+++ b/components/modules/stats/RollupsActivity.vue
@@ -1,81 +1,87 @@
 <script setup>
-/** Components */
-import RollupsActivityGraph from "~/components/modules/stats/RollupsActivityGraph.vue"
-import RollupsActivityTable from "~/components/modules/stats/RollupsActivityTable.vue"
+/** UI */
 import Tooltip from "@/components/ui/Tooltip.vue"
 
-const emit = defineEmits(['clearFilters'])
+/** Components */
+import RollupsActivityGraph from "@/components/modules/stats/RollupsActivityGraph.vue"
+import RollupsActivityTable from "@/components/modules/stats/RollupsActivityTable.vue"
+
+const emit = defineEmits(["clearFilters"])
 const props = defineProps({
-    rollups: {
-        type: Array,
-        required: true,
-    },
-    isFilterActive: {
-        type: Boolean,
-        default: false,
-    },
+	rollups: {
+		type: Array,
+		required: true,
+	},
+	isFilterActive: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const processedRollups = computed(() => {
-    const arr = [...props.rollups]
-    arr.forEach(r => {
-        r.avg_pfb_size = r.avg_size * r.blobs_per_pfb
-        r.pfb_hour_count = Math.round(r.pfb_count / 24)
-    })
+	const arr = [...props.rollups]
+	arr.forEach((r) => {
+		r.avg_pfb_size = r.avg_size * r.blobs_per_pfb
+		r.pfb_hour_count = Math.round(r.pfb_count / 24)
+	})
 
-    return arr
+	return arr
 })
 
-const selectedView = ref('graph')
+const selectedView = ref("graph")
 const handleSelectView = () => {
-    selectedView.value === 'graph' ? selectedView.value = 'table' : selectedView.value = 'graph'
+	selectedView.value === "graph" ? (selectedView.value = "table") : (selectedView.value = "graph")
 }
 </script>
 
 <template>
-    <Flex wide direction="column" gap="4">
-        <Flex align="center" 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 Activity</Text>
-                <Text size="13" color="tertiary">(last 24h)</Text>
-            </Flex>
+	<Flex wide direction="column" gap="4">
+		<Flex align="center" 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 Activity</Text>
+				<Text size="13" color="tertiary">(last 24h)</Text>
+			</Flex>
 
-            <Tooltip side="top">
-                <Flex
-                    @click="handleSelectView"
-                    align="center"
-                    gap="12"
-                    :class="$style.view_selector"
-                    :style="{
-                        background: `linear-gradient(to ${selectedView === 'table' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
-                    }"
-                >
-                    <Icon
-                        name="table"
-                        size="16"
-                        :style="{ fill: `${selectedView === 'table' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
-                    />
+			<Tooltip side="top">
+				<Flex
+					@click="handleSelectView"
+					align="center"
+					gap="12"
+					:class="$style.view_selector"
+					:style="{
+						background: `linear-gradient(to ${selectedView === 'table' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+					}"
+				>
+					<Icon name="table" size="16" :style="{ fill: `${selectedView === 'table' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }" />
 
-                    <Icon
-                        name="gantt-chart"
-                        size="16"
-                        :style="{ fill: `${selectedView === 'graph' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
-                    />
-                </Flex>
+					<Icon
+						name="gantt-chart"
+						size="16"
+						:style="{ fill: `${selectedView === 'graph' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
+					/>
+				</Flex>
 
-                <template #content>
-                    <Text size="12" color="tertiary">
-                        Changing data display view
-                    </Text>
-                </template>
-            </Tooltip>
-        </Flex>
-        <Transition name="fastfade" mode="out-in">
-            <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 #content>
+					<Text size="12" color="tertiary"> Changing data display view </Text>
+				</template>
+			</Tooltip>
+		</Flex>
+		<Transition name="fastfade" mode="out-in">
+			<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>
 
 <style module>
@@ -89,11 +95,11 @@ const handleSelectView = () => {
 }
 
 .view_selector {
-    max-height: 24px;
+	max-height: 24px;
 	padding: 4px 6px 4px 6px;
 	box-shadow: inset 0 0 0 1px var(--op-10);
 	border-radius: 5px;
 	cursor: pointer;
 	transition: all 1s ease-in-out;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modules/stats/RollupsBubbleChart.vue b/components/modules/stats/RollupsBubbleChart.vue
index c0653bec..48521b8e 100644
--- a/components/modules/stats/RollupsBubbleChart.vue
+++ b/components/modules/stats/RollupsBubbleChart.vue
@@ -29,22 +29,22 @@ const getRollups = async () => {
 	isLoading.value = true
 
 	const data = await fetchRollups({
-        limit: 30,
-    })
+		limit: 30,
+	})
 
-    rollups.value = prepareRollupsData(data)
+	rollups.value = prepareRollupsData(data)
 
-    isLoading.value = false
+	isLoading.value = false
 }
 
 const prepareRollupsData = (data) => {
-    data.forEach(r => {
-        if (!r.feeUpdated) {
-            r.feeUpdated = +(r.fee / 1_000_000).toFixed(2)
-        }
-    })
+	data.forEach((r) => {
+		if (!r.feeUpdated) {
+			r.feeUpdated = +(r.fee / 1_000_000).toFixed(2)
+		}
+	})
 
-    return data
+	return data
 }
 
 const buildChart = (chart, data) => {
@@ -55,15 +55,15 @@ const buildChart = (chart, data) => {
 	const marginBottom = 24
 	const marginLeft = 32
 
-    const minBlobsCount = d3.min(data, d => d.blobs_count)
-    const maxBlobsCount = d3.max(data, d => d.blobs_count)
-    const minFee = d3.min(data, d => d.feeUpdated)
-    const maxFee = d3.max(data, d => d.feeUpdated)
-    const maxSize = d3.max(data, d => d.size)
-    const minSize = d3.min(data, d => d.size)
-    const midSize = maxSize / 2
+	const minBlobsCount = d3.min(data, (d) => d.blobs_count)
+	const maxBlobsCount = d3.max(data, (d) => d.blobs_count)
+	const minFee = d3.min(data, (d) => d.feeUpdated)
+	const maxFee = d3.max(data, (d) => d.feeUpdated)
+	const maxSize = d3.max(data, (d) => d.size)
+	const minSize = d3.min(data, (d) => d.size)
+	const midSize = maxSize / 2
 
-    /** SVG Container */
+	/** SVG Container */
 	const svg = d3
 		.create("svg")
 		.attr("width", width)
@@ -73,348 +73,347 @@ const buildChart = (chart, data) => {
 		.attr("style", "max-width: 100%;")
 		.style("-webkit-tap-highlight-color", "transparent")
 
-    const z = d3.scaleLinear()
-        .domain([minSize, maxSize])
-        .range([ 15, 70 ]);
-    
-    const x = d3.scaleLog()
-        .domain([minBlobsCount, maxBlobsCount + maxBlobsCount * 0.1])
-        .range([marginLeft, width -  z(maxSize) / 2 - 5])
-        .base(10)
-        .nice()
-    
-    const yDomain = [1, maxFee + maxFee * 0.3]
-    const y = d3.scaleLog()
-        .domain(yDomain)
-        .range([height + 5, z(maxSize) / 2])
-        .base(10)
-        .nice()
-    
-    function generateAxisData(axis, startExp) {
-        let data = []
-        let exponent = startExp
-
-        while (true) {
-            let value = Math.pow(10, exponent)
-            
-
-            if (axis === 'x') {
-                if (x(value) < width) {
-                    data.push(value)
-                    exponent = exponent + 2
-                } else {
-                    break
-                }
-            } else if (axis === 'y') {
-                data.push(value)
-                if (y(value) > 0) {
-                    exponent++
-                } else {
-                    break
-                }
-            } else {
-                break
-            }
-        }
-
-        return data
-    }
-    const yAxisData = generateAxisData('y', 1)
-    const xAxisData = generateAxisData('x', Math.floor(Math.log10(minBlobsCount)))
-
-    // Add axes:
-    // svg.append("g")
-    //     .attr("transform", "translate(0," + (height - 20) + ")")
-    //     .attr("color", "var(--op-20)")
-    //     .call(d3.axisBottom(x).ticks(2).tickFormat(d3.format(".2s")))
-    svg.append("line")
-            .attr("x1", marginLeft - 0.5)
-            .attr("x2", width - 0.5)
-            .attr("y1", height - 15)
-            .attr("y2", height - 15)
-            .attr("stroke", "var(--op-20)")
-
-    xAxisData.forEach((xValue) => {
-        let xPos = x(xValue)
-
-        svg.append("line")
-            .attr("x1", xPos)
-            .attr("x2", xPos)
-            .attr("y1", height - 14.5)
-            .attr("y2", height - 10)
-            .attr("stroke", "var(--op-20)")
-        
-        svg.append("text")
-            .attr("x", xPos)
-            .attr("y", height)
-            .attr("fill", "var(--op-20)")
-            .attr("font-size", "10px")
-            .attr("text-anchor", "middle")
-            .text(abbreviate(xValue))
-    })
-
-    svg.append("line")
-            .attr("x1", width - 1)
-            .attr("x2", width - 1)
-            .attr("y1", height - 14.5)
-            .attr("y2", height - 10)
-            .attr("stroke", "var(--op-20)")
-
-
-    
-    yAxisData.forEach((yValue) => {
-        let yPos = y(yValue)
-
-        svg.append("line")
-            .attr("x1", marginLeft)
-            .attr("x2", width)
-            .attr("y1", yPos)
-            .attr("y2", yPos)
-            .attr("stroke", "var(--op-20)")
-            .attr("stroke-dasharray", "10 10")
-        
-        svg.append("text")
-            .attr("x", marginLeft)
-            .attr("y", yPos - 5)
-            .attr("fill", "var(--op-20)")
-            .attr("font-size", "10px")
-            .attr("text-anchor", "start")
-            .text(abbreviate(yValue))
-    })
-
-    // Add axis labels:
-    svg.append("text")
-        .attr("fill", "var(--op-20)")
-        .attr("font-size", "14px")
-        .attr("text-anchor", "end")
-        .attr("x", 130)
-        .attr("y", height)
-        .text("Blobs count");
-
-    svg.append("text")
-        .attr("fill", "var(--op-20)")
-        .attr("font-size", "14px")
-        .attr("text-anchor", "end")
-        .attr("transform", "rotate(-90)")
-        .attr("x", -275)
-        .attr("y", 27)
-        .text("Fee paid (TIA)")
-
-    // Size legend
-    let legendValues = data.length === 1
-        ? [ maxSize ]
-        : data.length === 2
-            ? [ minSize, maxSize ]
-            : [ minSize, midSize * 0.5, maxSize / 2 ]
-    let xCircle = width - z(maxSize)
-    let xLabel = width - z(maxSize) - 100
-    let yCircle = height - 20
-    svg
-        .selectAll("legend")
-        .data(legendValues)
-        .enter()
-        .append("circle")
-            .attr("cx", xCircle)
-            .attr("cy", function(d){ return yCircle - z(d) } )
-            .attr("r", function(d){ return z(d) })
-            .style("fill", "none")
-            .attr("stroke", "var(--op-20)")
-
-    svg
-        .selectAll("legend")
-        .data(legendValues)
-        .enter()
-        .append("line")
-            .attr("x1", function(d){ return xCircle - z(d) } )
-            .attr("x2", xLabel)
-            .attr("y1", function(d, i){ return yCircle - z(d) + (i === 0 ? 5 : i === 2 ? -7 : 0) } )
-            .attr("y2", function(d, i){ return yCircle - z(d) + (i === 0 ? 5 : i === 2 ? -7 : 0) } )
-            .attr("stroke", "var(--op-20)")
-            .style("stroke-dasharray", ("2, 2"))
-
-    svg.selectAll("legend")
-        .data(legendValues)
-        .enter()
-        .append("text")
-            .attr('x', xLabel)
-            .attr('y', function(d, i){ return yCircle - z(d) - 5 + (i === 0 ? 5 : i === 2 ? -7 : 0) } )
-            .text( function(d, i){ return formatBytes(d, 0) } )
-            .style("font-size", 10)
-            .style("fill", "var(--op-20)")
-            .attr('alignment-baseline', 'middle')
-    
-    // Tooltip
-    function onPointerEnter(event, rollup) {
-        const element = document.getElementById(event.target.id)
-        element.style.filter = "brightness(100%)"
-
-        if (!tooltip.value.data.length) {
-            tooltip.value.x = x(rollup.blobs_count)
-            tooltip.value.y = y(rollup.feeUpdated)
-            tooltip.value.r = z(rollup.size)
-            tooltip.value.data.push(rollup)
-            tooltip.value.show = true
-        }
-    }
-
-    function onPointerLeave() {
-        const element = document.getElementById(event.target.id)
-        element.style.filter = "brightness(60%)"
-
-        tooltip.value.data = []
-        tooltip.value.show = false
-    }
-
-    const calculateY = (d) => {
-        let cy = y(d.feeUpdated)                
-        if (cy > height - 30) {
-            return height - 30 - 1
-        }
-
-        return cy
-    }
-    // Draw chart
-    const defs = svg.append("defs")
-    data.forEach((d, i) => {
-        defs.append("clipPath")
-            .attr("id", `clip-${i}`)
-        .append("circle")
-            .attr("cx", x(d.blobs_count))
-            .attr("cy", calculateY(d))
-            .attr("r", 0)
-            .transition()
-            .duration(1_500)
-            .attr("r", z(d.size))
-        })
-    
-    const circles = svg.append('g')
-        .selectAll("circle")
-        .data(data)
-        .enter()
-        .append("circle")
-            .attr("cx", d => x(d.blobs_count))
-            .attr("cy", d => {
-                let cy = y(d.feeUpdated)                
-                if (cy > height - 30) {
-                    return height - 30 - 1
-                }
-
-                return cy
-            })
-            .attr("r", 0)
-            .attr("stroke", "var(--op-20)")
-            .attr("stroke-width", 1)
-            .attr("fill", "none")
-            .transition()
-            .duration(1_500)
-            .attr("r", d => z(d.size))
-
-    svg.append('g')
-        .selectAll("image")
-        .data(data)
-        .enter()
-        .append("image")
-            .attr("xlink:href", d => d.logo)
-            .attr("id", d => d.id)
-            .attr("width", d => z(d.size) * 2)
-            .attr("height", d => z(d.size) * 2)
-            .attr("x", d => x(d.blobs_count) - z(d.size))
-            .attr("y", d => {
-                let cy = y(d.feeUpdated)
-                if (cy > height - 30) {
-                    return height - 30 - z(d.size) - 1
-                }
-
-                return cy - z(d.size)
-            })
-            .attr("clip-path", (d, i) => `url(#clip-${i})`)
-            .style("filter", "brightness(60%)")
-            .attr("class", "transition_all")
-            .on("pointerenter", (d, rollup) => onPointerEnter(d, rollup))
-            .on("pointerleave", onPointerLeave)
+	const z = d3.scaleLinear().domain([minSize, maxSize]).range([15, 70])
+
+	const x = d3
+		.scaleLog()
+		.domain([minBlobsCount, maxBlobsCount + maxBlobsCount * 0.1])
+		.range([marginLeft, width - z(maxSize) / 2 - 5])
+		.base(10)
+		.nice()
+
+	const yDomain = [1, maxFee + maxFee * 0.3]
+	const y = d3
+		.scaleLog()
+		.domain(yDomain)
+		.range([height + 5, z(maxSize) / 2])
+		.base(10)
+		.nice()
+
+	function generateAxisData(axis, startExp) {
+		let data = []
+		let exponent = startExp
+
+		while (true) {
+			let value = Math.pow(10, exponent)
+
+			if (axis === "x") {
+				if (x(value) < width) {
+					data.push(value)
+					exponent = exponent + 2
+				} else {
+					break
+				}
+			} else if (axis === "y") {
+				data.push(value)
+				if (y(value) > 0) {
+					exponent++
+				} else {
+					break
+				}
+			} else {
+				break
+			}
+		}
+
+		return data
+	}
+	const yAxisData = generateAxisData("y", 1)
+	const xAxisData = generateAxisData("x", Math.floor(Math.log10(minBlobsCount)))
+
+	// Add axes:
+	svg.append("line")
+		.attr("x1", marginLeft - 0.5)
+		.attr("x2", width - 0.5)
+		.attr("y1", height - 15)
+		.attr("y2", height - 15)
+		.attr("stroke", "var(--op-20)")
+
+	xAxisData.forEach((xValue) => {
+		let xPos = x(xValue)
+
+		svg.append("line")
+			.attr("x1", xPos)
+			.attr("x2", xPos)
+			.attr("y1", height - 14.5)
+			.attr("y2", height - 10)
+			.attr("stroke", "var(--op-20)")
+
+		svg.append("text")
+			.attr("x", xPos)
+			.attr("y", height)
+			.attr("fill", "var(--op-20)")
+			.attr("font-size", "10px")
+			.attr("text-anchor", "middle")
+			.text(abbreviate(xValue))
+	})
+
+	svg.append("line")
+		.attr("x1", width - 1)
+		.attr("x2", width - 1)
+		.attr("y1", height - 14.5)
+		.attr("y2", height - 10)
+		.attr("stroke", "var(--op-20)")
+
+	yAxisData.forEach((yValue) => {
+		let yPos = y(yValue)
+
+		svg.append("line")
+			.attr("x1", marginLeft)
+			.attr("x2", width)
+			.attr("y1", yPos)
+			.attr("y2", yPos)
+			.attr("stroke", "var(--op-20)")
+			.attr("stroke-dasharray", "10 10")
+
+		svg.append("text")
+			.attr("x", marginLeft)
+			.attr("y", yPos - 5)
+			.attr("fill", "var(--op-20)")
+			.attr("font-size", "10px")
+			.attr("text-anchor", "start")
+			.text(abbreviate(yValue))
+	})
+
+	// Add axis labels:
+	svg.append("text")
+		.attr("fill", "var(--op-20)")
+		.attr("font-size", "14px")
+		.attr("text-anchor", "end")
+		.attr("x", 130)
+		.attr("y", height)
+		.text("Blobs count")
+
+	svg.append("text")
+		.attr("fill", "var(--op-20)")
+		.attr("font-size", "14px")
+		.attr("text-anchor", "end")
+		.attr("transform", "rotate(-90)")
+		.attr("x", -275)
+		.attr("y", 27)
+		.text("Fee paid (TIA)")
+
+	// Size legend
+	let legendValues = data.length === 1 ? [maxSize] : data.length === 2 ? [minSize, maxSize] : [minSize, midSize * 0.5, maxSize / 2]
+	let xCircle = width - z(maxSize)
+	let xLabel = width - z(maxSize) - 100
+	let yCircle = height - 20
+	svg.selectAll("legend")
+		.data(legendValues)
+		.enter()
+		.append("circle")
+		.attr("cx", xCircle)
+		.attr("cy", function (d) {
+			return yCircle - z(d)
+		})
+		.attr("r", function (d) {
+			return z(d)
+		})
+		.style("fill", "none")
+		.attr("stroke", "var(--op-20)")
+
+	svg.selectAll("legend")
+		.data(legendValues)
+		.enter()
+		.append("line")
+		.attr("x1", function (d) {
+			return xCircle - z(d)
+		})
+		.attr("x2", xLabel)
+		.attr("y1", function (d, i) {
+			return yCircle - z(d) + (i === 0 ? 5 : i === 2 ? -7 : 0)
+		})
+		.attr("y2", function (d, i) {
+			return yCircle - z(d) + (i === 0 ? 5 : i === 2 ? -7 : 0)
+		})
+		.attr("stroke", "var(--op-20)")
+		.style("stroke-dasharray", "2, 2")
+
+	svg.selectAll("legend")
+		.data(legendValues)
+		.enter()
+		.append("text")
+		.attr("x", xLabel)
+		.attr("y", function (d, i) {
+			return yCircle - z(d) - 5 + (i === 0 ? 5 : i === 2 ? -7 : 0)
+		})
+		.text(function (d, i) {
+			return formatBytes(d, 0)
+		})
+		.style("font-size", 10)
+		.style("fill", "var(--op-20)")
+		.attr("alignment-baseline", "middle")
+
+	// Tooltip
+	function onPointerEnter(event, rollup) {
+		const element = document.getElementById(event.target.id)
+		element.style.filter = "brightness(100%)"
+
+		if (!tooltip.value.data.length) {
+			tooltip.value.x = x(rollup.blobs_count)
+			tooltip.value.y = y(rollup.feeUpdated)
+			tooltip.value.r = z(rollup.size)
+			tooltip.value.data.push(rollup)
+			tooltip.value.show = true
+		}
+	}
+
+	function onPointerLeave() {
+		const element = document.getElementById(event.target.id)
+		element.style.filter = "brightness(60%)"
+
+		tooltip.value.data = []
+		tooltip.value.show = false
+	}
+
+	const calculateY = (d) => {
+		let cy = y(d.feeUpdated)
+		if (cy > height - 30) {
+			return height - 30 - 1
+		}
+
+		return cy
+	}
+	// Draw chart
+	const defs = svg.append("defs")
+	data.forEach((d, i) => {
+		defs.append("clipPath")
+			.attr("id", `clip-${i}`)
+			.append("circle")
+			.attr("cx", x(d.blobs_count))
+			.attr("cy", calculateY(d))
+			.attr("r", 0)
+			.transition()
+			.duration(1_500)
+			.attr("r", z(d.size))
+	})
+
+	const circles = svg
+		.append("g")
+		.selectAll("circle")
+		.data(data)
+		.enter()
+		.append("circle")
+		.attr("cx", (d) => x(d.blobs_count))
+		.attr("cy", (d) => {
+			let cy = y(d.feeUpdated)
+			if (cy > height - 30) {
+				return height - 30 - 1
+			}
+
+			return cy
+		})
+		.attr("r", 0)
+		.attr("stroke", "var(--op-20)")
+		.attr("stroke-width", 1)
+		.attr("fill", "none")
+		.transition()
+		.duration(1_500)
+		.attr("r", (d) => z(d.size))
+
+	svg.append("g")
+		.selectAll("image")
+		.data(data)
+		.enter()
+		.append("image")
+		.attr("xlink:href", (d) => d.logo)
+		.attr("id", (d) => d.id)
+		.attr("width", (d) => z(d.size) * 2)
+		.attr("height", (d) => z(d.size) * 2)
+		.attr("x", (d) => x(d.blobs_count) - z(d.size))
+		.attr("y", (d) => {
+			let cy = y(d.feeUpdated)
+			if (cy > height - 30) {
+				return height - 30 - z(d.size) - 1
+			}
+
+			return cy - z(d.size)
+		})
+		.attr("clip-path", (d, i) => `url(#clip-${i})`)
+		.style("filter", "brightness(60%)")
+		.attr("class", "transition_all")
+		.on("pointerenter", (d, rollup) => onPointerEnter(d, rollup))
+		.on("pointerleave", onPointerLeave)
 
 	if (chart.children[0]) chart.children[0].remove()
 	chart.append(svg.node())
 }
 
 onMounted(async () => {
-    if (!props.data) {
-        await getRollups()
-    } else {
-        rollups.value = prepareRollupsData(props.data)
-    }
-
-    if (rollups.value?.length) {
-        nextTick(() => {
-            buildChart(chartEl.value.wrapper, rollups.value)
-        })
-    }
+	if (!props.data) {
+		await getRollups()
+	} else {
+		rollups.value = prepareRollupsData(props.data)
+	}
+
+	if (rollups.value?.length) {
+		nextTick(() => {
+			buildChart(chartEl.value.wrapper, rollups.value)
+		})
+	}
 })
 
 watch(
 	() => props.data,
 	() => {
-        rollups.value = prepareRollupsData(props.data)
+		rollups.value = prepareRollupsData(props.data)
 
-        if (rollups.value.length) {
-            nextTick(() => {
-                buildChart(chartEl.value.wrapper, rollups.value)
-            })
-        }
-	}
+		if (rollups.value.length) {
+			nextTick(() => {
+				buildChart(chartEl.value.wrapper, rollups.value)
+			})
+		}
+	},
 )
-
 </script>
 
 <template>
-    <Flex align="center" direction="column" gap="16" wide :class="$style.wrapper">
-        <Transition name="fastfade">
-            <div v-if="tooltip.show" :class="$style.tooltip_wrapper">
-                <Flex
-                    align="center"
-                    direction="column"
-                    :style="{ transform: `translate(${tooltip.x + 24 + (0.5 * tooltip.r)}px, ${tooltip.y + 150 - tooltip.r}px)` }"
-                    gap="12"
-                    :class="$style.tooltip"
-                >
-                    <Flex
-                        v-for="(d, index) in tooltip.data"
-                        align="center"
-                        direction="column"
-                        wide
-                        gap="12"
-                    >
-                        <Flex align="center" justify="start" wide>
-                            <Text size="12" weight="600" color="primary"> {{ d.name }} </Text>
-                        </Flex>
-
-                        <Flex align="center" justify="between" wide gap="12">
-                            <Text size="12" color="tertiary"> Size </Text>
-                            <Text size="12" color="secondary"> {{ formatBytes(d.size) }} </Text>
-                        </Flex>
-
-                        <Flex align="center" justify="between" wide gap="12">
-                            <Text size="12" color="tertiary"> Blobs </Text>
-                            <Text size="12" color="secondary"> {{ abbreviate(d.blobs_count) }} </Text>
-                        </Flex>
-
-                        <Flex align="center" justify="between" wide gap="12">
-                            <Text size="12" color="tertiary"> Fee Paid </Text>
-                            <Text size="12" color="secondary"> {{ `${abbreviate(d.feeUpdated)} TIA` }} </Text>
-                        </Flex>
-                    </Flex>
-                </Flex>
-            </div>
-        </Transition>
-        
-        <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>
+	<Flex align="center" direction="column" gap="16" wide :class="$style.wrapper">
+		<Transition name="fastfade">
+			<div v-if="tooltip.show" :class="$style.tooltip_wrapper">
+				<Flex
+					align="center"
+					direction="column"
+					:style="{ transform: `translate(${tooltip.x + 24 + 0.5 * tooltip.r}px, ${tooltip.y + 150 - tooltip.r}px)` }"
+					gap="12"
+					:class="$style.tooltip"
+				>
+					<Flex v-for="(d, index) in tooltip.data" align="center" direction="column" wide gap="12">
+						<Flex align="center" justify="start" wide>
+							<Text size="12" weight="600" color="primary"> {{ d.name }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between" wide gap="12">
+							<Text size="12" color="tertiary"> Size </Text>
+							<Text size="12" color="secondary"> {{ formatBytes(d.size) }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between" wide gap="12">
+							<Text size="12" color="tertiary"> Blobs </Text>
+							<Text size="12" color="secondary"> {{ abbreviate(d.blobs_count) }} </Text>
+						</Flex>
+
+						<Flex align="center" justify="between" wide gap="12">
+							<Text size="12" color="tertiary"> Fee Paid </Text>
+							<Text size="12" color="secondary"> {{ `${abbreviate(d.feeUpdated)} TIA` }} </Text>
+						</Flex>
+					</Flex>
+				</Flex>
+			</div>
+		</Transition>
+
+		<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>
 
 <style module>
@@ -423,10 +422,10 @@ watch(
 }
 
 .chart {
-    width: 992px;
-    height: 400px;
+	width: 992px;
+	height: 400px;
 
-    margin-top: 24px;
+	margin-top: 24px;
 }
 
 .tooltip_wrapper {
@@ -435,7 +434,7 @@ watch(
 	left: 0;
 	right: 0;
 	bottom: 0;
-    pointer-events: none;
+	pointer-events: none;
 
 	& .tooltip {
 		min-width: 150px;
@@ -466,19 +465,18 @@ watch(
 }
 
 .empty {
-    width: 992px;
-    height: 400px;
+	width: 992px;
+	height: 400px;
 
-    margin-top: 24px;
+	margin-top: 24px;
 }
 
 @media (max-width: 1050px) {
-    .chart {
-        width: 100%;
-        height: 400px;
+	.chart {
+		width: 100%;
+		height: 400px;
 
-        margin-top: 24px;
-    }
+		margin-top: 24px;
+	}
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modules/stats/SquareSizeCard.vue b/components/modules/stats/SquareSizeCard.vue
index a50b3040..96a48763 100644
--- a/components/modules/stats/SquareSizeCard.vue
+++ b/components/modules/stats/SquareSizeCard.vue
@@ -3,11 +3,8 @@
 import * as d3 from "d3"
 import { DateTime } from "luxon"
 
-/** Stats Components */
-import DiffChip from "@/components/modules/stats/DiffChip.vue"
-
 /** Services */
-import { abbreviate, comma, formatBytes } from "@/services/utils"
+import { comma } from "@/services/utils"
 
 /** API */
 import { fetchSquareSize } from "@/services/api/stats"
@@ -25,13 +22,15 @@ const total = ref(0)
 
 const getSquareSizes = async () => {
 	const data = await fetchSquareSize(
-		parseInt(DateTime.now().minus({
-			days: props.period.timeframe === "day" ? props.period.value : 0,
-			hours: props.period.timeframe === "hour" ? props.period.value + 1 : 0,
-		}).ts / 1_000)
+		parseInt(
+			DateTime.now().minus({
+				days: props.period.timeframe === "day" ? props.period.value : 0,
+				hours: props.period.timeframe === "hour" ? props.period.value + 1 : 0,
+			}).ts / 1_000,
+		),
 	)
-	
-    Object.keys(data).forEach(key => {
+
+	Object.keys(data).forEach((key) => {
 		squareSize.value.push({
 			size: key,
 			value: data[key][0].value,
@@ -40,14 +39,13 @@ const getSquareSizes = async () => {
 		total.value += +data[key][0].value
 	})
 
-	const color = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#65efcc", "#142f28"]))
-        .domain([0, squareSize.value.length])
+	const color = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#65efcc", "#142f28"])).domain([0, squareSize.value.length])
 
 	let totalSquares = 0
 	squareSize.value.forEach((item, index) => {
 		item.color = color(index)
 
-		let share = Math.round((item.value / total.value * 100))
+		let share = Math.round((item.value / total.value) * 100)
 		totalSquares += Math.max(share, 1)
 		item.share = share
 		item.squares = Math.max(share, 1)
@@ -55,17 +53,17 @@ const getSquareSizes = async () => {
 
 	if (totalSquares !== 100) {
 		let maxSquaresIndex = squareSize.value.reduce((maxIndex, current, index, array) => {
-			return (current.squares > array[maxIndex].squares) ? index : maxIndex
+			return current.squares > array[maxIndex].squares ? index : maxIndex
 		}, 0)
-		
+
 		if (totalSquares > 100) {
 			squareSize.value[maxSquaresIndex].squares = squareSize.value[maxSquaresIndex].squares - (totalSquares - 100)
 		} else {
 			squareSize.value[maxSquaresIndex].squares = squareSize.value[maxSquaresIndex].squares + (100 - totalSquares)
 		}
 	}
-	
-	squareSize.value.forEach(item => {
+
+	squareSize.value.forEach((item) => {
 		for (let i = 0; i < item.squares; i++) {
 			squareSizeGraph.value.push({
 				size: item.size,
@@ -81,7 +79,7 @@ const squareWidth = computed(() => Math.floor((squareSizeWidth.value - 19) / 20)
 
 const handleHoverEnter = (index) => {
 	const elements = document.querySelectorAll(`[class*='suqare-group-']`)
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		if (el.id === index) {
 			el.style.filter = "brightness(120%)"
 		} else {
@@ -92,7 +90,7 @@ const handleHoverEnter = (index) => {
 
 const handleHoverLeave = () => {
 	const elements = document.querySelectorAll(`[class*='suqare-group-']`)
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		el.style.filter = "brightness(100%)"
 	})
 }
@@ -130,7 +128,7 @@ onMounted(async () => {
 					{
 						[$style.square_size]: true,
 						[$style.fadein]: true,
-					}
+					},
 				]"
 				:style="{
 					transition: 'all 0.4s ease',
@@ -150,12 +148,13 @@ onMounted(async () => {
 				@pointerenter="handleHoverEnter(s.size)"
 				:id="s.size"
 				align="center"
-				justify="between" wide
+				justify="between"
+				wide
 				:class="[
 					`suqare-group-${s.size}`,
 					{
 						[$style.fadein]: true,
-					}
+					},
 				]"
 				:style="{ transition: 'all 0.4s ease' }"
 			>
@@ -166,11 +165,13 @@ onMounted(async () => {
 							background: s.color,
 						}"
 					/>
-					
+
 					<Text size="12" weight="600" color="primary"> {{ `${s.size} x ${s.size}` }} </Text>
 				</Flex>
 
-				<Text size="12" weight="600" color="tertiary" style="text-align: right; flex: 1"> {{ `${s.share <= 1 ? '<1' : s.share}%` }} </Text>
+				<Text size="12" weight="600" color="tertiary" style="text-align: right; flex: 1">
+					{{ `${s.share <= 1 ? "<1" : s.share}%` }}
+				</Text>
 				<Text size="12" weight="600" color="primary" style="text-align: right; flex: 1"> {{ comma(s.value) }} </Text>
 			</Flex>
 		</Flex>
@@ -249,23 +250,23 @@ onMounted(async () => {
 }
 
 .fadein {
-    opacity: 0;
-    animation-name: fadeIn;
-    animation-duration: 2s;
-    animation-fill-mode: forwards;
+	opacity: 0;
+	animation-name: fadeIn;
+	animation-duration: 2s;
+	animation-fill-mode: forwards;
 }
 
 .link:hover {
-	fill: var(--txt-secondary)
+	fill: var(--txt-secondary);
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
 
 @media (max-width: 1000px) {
diff --git a/components/modules/stats/TimelineSlider.vue b/components/modules/stats/TimelineSlider.vue
index a81635d3..72de30eb 100644
--- a/components/modules/stats/TimelineSlider.vue
+++ b/components/modules/stats/TimelineSlider.vue
@@ -221,7 +221,6 @@ const brushed = ({ selection, sourceEvent }) => {
 			fixedX0 = xBand(new Date(currentData[currentIndex].time).toISOString()) - padding
 			setStartEndFromIndex(currentData, currentIndex, fixedX1Index)
 		} else if (fixedX0Index - currentIndex < 0) {
-
 			fixedX1 = xBand(new Date(currentData[currentIndex].time).toISOString()) - padding + xBand.step()
 			setStartEndFromIndex(currentData, fixedX0Index, currentIndex)
 		} else {
@@ -364,7 +363,6 @@ const updateHandlePosition = (selection) => {
 
 			const dotsWidth = 12
 			const dotsX = (handleWidth - dotsWidth) / 2
-			// handle.select(".dots-container").attr("transform", `translate(${dotsX}, ${margin.top - 12.5})`)
 
 			leftHandle.attr("transform", `translate(${x0}, 0)`)
 			rightHandle.attr("transform", `translate(${x1 - 5}, 0)`)
@@ -737,14 +735,6 @@ watch(
 	{ deep: true },
 )
 
-// watch([() => props.from, () => props.to], ([newFrom, newTo], [oldFrom, oldTo]) => {
-// 	if (newFrom === oldFrom && newTo === oldTo) return
-// 	if (!props.allData?.length) return
-// 	if (isInternalUpdate.value) return
-
-// 	createChart()
-// })
-
 onMounted(() => {
 	createChart()
 })
diff --git a/components/modules/stats/tabs/BlocksTab.vue b/components/modules/stats/tabs/BlocksTab.vue
index e6abfdcc..d81fd3fd 100644
--- a/components/modules/stats/tabs/BlocksTab.vue
+++ b/components/modules/stats/tabs/BlocksTab.vue
@@ -3,19 +3,18 @@
 import BlocksFeed from "@/components/modules/stats/BlocksFeed.vue"
 import ChartCardPreview from "@/components/modules/stats/ChartCardPreview.vue"
 import SquareSizeCard from "@/components/modules/stats/SquareSizeCard.vue"
-import SquareSizeChart from "~/components/modules/stats/SquareSizeChart.vue"
 
 /** Constants */
 import { getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js"
 
-const series = computed(() => getSeriesByGroupAndType('Blocks'))
+const series = computed(() => getSeriesByGroupAndType("Blocks"))
 const periods = ref(STATS_PERIODS)
 const selectedPeriod = ref(periods.value[0])
 </script>
 
 <template>
-    <Flex align="center" direction="column" gap="16" wide :class="$style.wrapper">
-        <BlocksFeed />
+	<Flex align="center" direction="column" gap="16" wide :class="$style.wrapper">
+		<BlocksFeed />
 
 		<Flex align="center" direction="column" gap="12" wide>
 			<Flex align="center" justify="between" wide :class="$style.section">
@@ -23,19 +22,17 @@ const selectedPeriod = ref(periods.value[0])
 			</Flex>
 
 			<Flex align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
-                <ChartCardPreview v-for="s in series.filter(s => s.name !== 'square_size')"
-                    :series="s"
-                    :period="selectedPeriod"
-                    :class="$style.chart_card"
-                />
-
-                <SquareSizeCard
-                    :period="selectedPeriod"
-                    :class="$style.square_size_chart_card"
-                />
-            </Flex>
+				<ChartCardPreview
+					v-for="s in series.filter((s) => s.name !== 'square_size')"
+					:series="s"
+					:period="selectedPeriod"
+					:class="$style.chart_card"
+				/>
+
+				<SquareSizeCard :period="selectedPeriod" :class="$style.square_size_chart_card" />
+			</Flex>
 		</Flex>
-    </Flex>
+	</Flex>
 </template>
 
 <style module>
@@ -104,4 +101,4 @@ const selectedPeriod = ref(periods.value[0])
 		height: 380px;
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modules/stats/tabs/EcosystemTab.vue b/components/modules/stats/tabs/EcosystemTab.vue
index c543d578..13c345fd 100644
--- a/components/modules/stats/tabs/EcosystemTab.vue
+++ b/components/modules/stats/tabs/EcosystemTab.vue
@@ -1,20 +1,19 @@
 <script setup>
 /** Stats Components */
 import GeoMap from "@/components/modules/stats/GeoMap.vue"
-import BarplotChartCard from "@/components/modules/stats/BarplotChartCard.vue";
-// import PieChartCard from "@/components/modules/stats/PieChartCard.vue"
+import BarplotChartCard from "@/components/modules/stats/BarplotChartCard.vue"
 
 /** Constants */
-import { getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js"
+import { getSeriesByGroupAndType } from "@/services/constants/stats.js"
 
 /** Services */
-import { capitilize, isMobile, sortArrayOfObjects } from "@/services/utils"
+import { capitilize, sortArrayOfObjects } from "@/services/utils"
 
 /** API */
 import { fetchNodeStats } from "@/services/api/stats"
 
 const isLoading = ref(true)
-const series = computed(() => getSeriesByGroupAndType('Ecosystem'))
+const series = computed(() => getSeriesByGroupAndType("Ecosystem"))
 
 const getNodeStats = async (name) => {
 	const data = await fetchNodeStats({ name })
@@ -33,7 +32,7 @@ const prepareData = async () => {
 		let otherEntry = null
 		if (s.name === "nodetype") {
 			s.data = data.reduce((acc, d) => {
-				let name = d.name === "celestia-celestia" ? "Celestia" : capitilize(d.name);
+				let name = d.name === "celestia-celestia" ? "Celestia" : capitilize(d.name)
 
 				if (name === "Unknown" || name === "Other") {
 					if (!otherEntry) {
@@ -52,7 +51,7 @@ const prepareData = async () => {
 			s.data = sortArrayOfObjects(s.data, "amount")
 		} else if (s.name === "version") {
 			s.data = data.sort((a, b) => {
-				const parseVersion = (version) => version.split('.').map(Number)
+				const parseVersion = (version) => version.split(".").map(Number)
 				const [aMajor, aMinor, aPatch] = parseVersion(a.name)
 				const [bMajor, bMinor, bPatch] = parseVersion(b.name)
 
@@ -77,12 +76,7 @@ onMounted(async () => {
 			<GeoMap :class="$style.chart" />
 
 			<Flex v-if="!isLoading" align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
-				<BarplotChartCard
-					v-for="s in series"
-					:series="s"
-					:data="s.data"
-					:class="$style.chart_card"
-				/>
+				<BarplotChartCard v-for="s in series" :series="s" :data="s.data" :class="$style.chart_card" />
 			</Flex>
 
 			<Flex align="center" justify="end" wide>
@@ -92,7 +86,7 @@ onMounted(async () => {
 				</Text>
 			</Flex>
 		</Flex>
-    </Flex>
+	</Flex>
 </template>
 
 <style module>
@@ -155,4 +149,4 @@ onMounted(async () => {
 		aspect-ratio: 4 / 5;
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modules/stats/tabs/GeneralTab.vue b/components/modules/stats/tabs/GeneralTab.vue
index 6c5508bc..5c06e4fe 100644
--- a/components/modules/stats/tabs/GeneralTab.vue
+++ b/components/modules/stats/tabs/GeneralTab.vue
@@ -3,7 +3,6 @@
 import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 
-
 /** Stats Components */
 import BlocksFeed from "@/components/modules/stats/BlocksFeed.vue"
 import ChartCardPreview from "@/components/modules/stats/ChartCardPreview.vue"
@@ -17,7 +16,7 @@ import { getInsightsByGroup, getSeriesByGroupAndType, STATS_PERIODS } from "@/se
 import { fetchGeneralStats } from "@/services/api/stats.js"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const isLoading = ref(false)
@@ -26,27 +25,27 @@ const diffs24h = ref({})
 const highlights = computed(() => {
 	return [
 		{
-			name: 'blocks',
-			title: 'Blocks',
+			name: "blocks",
+			title: "Blocks",
 			value: lastHead.value.last_height,
 		},
 		{
-			name: 'txs',
-			title: 'Transactions',
+			name: "txs",
+			title: "Transactions",
 			value: lastHead.value.total_tx,
 			diff: diffs24h.value.tx_count_24h * 100,
 		},
 		{
-			name: 'blobs_size',
-			title: 'Blobs Size',
-			units: 'bytes',
+			name: "blobs_size",
+			title: "Blobs Size",
+			units: "bytes",
 			value: lastHead.value.total_blobs_size,
 			diff: diffs24h.value.blobs_size_24h * 100,
 		},
 		{
-			name: 'fee',
-			title: 'Total Fees',
-			units: 'utia',
+			name: "fee",
+			title: "Total Fees",
+			units: "utia",
 			value: lastHead.value.total_fee,
 			diff: diffs24h.value.fee_24h * 100,
 		},
@@ -56,16 +55,16 @@ const highlights = computed(() => {
 const periods = ref(STATS_PERIODS)
 const selectedPeriod = ref(periods.value[1])
 
-const series = computed(() => getSeriesByGroupAndType('General'))
-const insights = computed(() => getInsightsByGroup('General'))
+const series = computed(() => getSeriesByGroupAndType("General"))
+const insights = computed(() => getInsightsByGroup("General"))
 
 const get24hDiffs = async () => {
-    isLoading.value = true
+	isLoading.value = true
 
-	const data = await fetchGeneralStats({ name: 'changes_24h' })
+	const data = await fetchGeneralStats({ name: "changes_24h" })
 	diffs24h.value = data
 
-    isLoading.value = false
+	isLoading.value = false
 }
 
 await get24hDiffs()
@@ -75,10 +74,7 @@ await get24hDiffs()
 	<Flex direction="column" gap="24" wide :class="$style.wrapper">
 		<Flex align="center" direction="column" gap="10">
 			<Flex justify="between" wide :class="$style.highlights_wrapper">
-				<HighlightCard
-					v-for="h in highlights"
-					:highlight="h"
-				/>
+				<HighlightCard v-for="h in highlights" :highlight="h" />
 			</Flex>
 
 			<Flex align="center" justify="start" wide>
@@ -91,12 +87,8 @@ await get24hDiffs()
 				<Text size="16" weight="600" color="primary" justify="start">Daily Insights</Text>
 			</Flex>
 
-			
 			<Flex align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
-				<InsightCard v-for="i in insights"
-					:series="i"
-					:class="$style.chart_card"
-				/>
+				<InsightCard v-for="i in insights" :series="i" :class="$style.chart_card" />
 			</Flex>
 		</Flex>
 
@@ -122,11 +114,7 @@ await get24hDiffs()
 			</Flex>
 
 			<Flex align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
-				<ChartCardPreview v-for="s in series"
-					:series="s"
-					:period="selectedPeriod"
-					:class="$style.chart_card"
-				/>
+				<ChartCardPreview v-for="s in series" :series="s" :period="selectedPeriod" :class="$style.chart_card" />
 			</Flex>
 		</Flex>
 	</Flex>
diff --git a/components/modules/stats/tabs/RollupsTab.vue b/components/modules/stats/tabs/RollupsTab.vue
index b5ecabf5..f625204a 100644
--- a/components/modules/stats/tabs/RollupsTab.vue
+++ b/components/modules/stats/tabs/RollupsTab.vue
@@ -3,7 +3,7 @@
 import ChartCardPreview from "@/components/modules/stats/ChartCardPreview.vue"
 import PieChartCard from "@/components/modules/stats/PieChartCard.vue"
 import RollupsBubbleChart from "@/components/modules/stats/RollupsBubbleChart.vue"
-import RollupsActivity from "~/components/modules/stats/RollupsActivity.vue"
+import RollupsActivity from "@/components/modules/stats/RollupsActivity.vue"
 
 /** Stats Constants */
 import { STATS_PERIODS } from "@/services/constants/stats.js"
@@ -23,7 +23,7 @@ import { capitilize, capitalizeAndReplace, isMainnet } from "@/services/utils"
 import { fetchRollups, fetchRollupsDailyStats } from "@/services/api/rollup.js"
 
 /** Stores */
-import { useEnumStore } from "@/store/enums"
+import { useEnumStore } from "@/store/enums.store"
 const enumStore = useEnumStore()
 
 const emit = defineEmits(["onUpdateSection"])
@@ -37,17 +37,16 @@ const filteredRollupsDailyStats = ref([])
 const getRollups = async () => {
 	isLoading.value = true
 
-	series.value = getSeriesByGroupAndType('Rollups')
+	series.value = getSeriesByGroupAndType("Rollups")
 
 	fetchRollups({ limit: 100 })
-	.then((res) => {
-		series.value.data = res
-		filteredRollups.value = res
-	})
-	.finally(() => {
-		isLoading.value = false
-	})
-
+		.then((res) => {
+			series.value.data = res
+			filteredRollups.value = res
+		})
+		.finally(() => {
+			isLoading.value = false
+		})
 }
 
 const getRollupsDailyStats = async () => {
@@ -56,36 +55,36 @@ const getRollupsDailyStats = async () => {
 	const data = await fetchRollupsDailyStats({
 		limit: 100,
 	})
-	
+
 	rollupsDailyStats.value = data
 	filteredRollupsDailyStats.value = data
 
-    isLoading.value = false
+	isLoading.value = false
 }
 
 const categories = computed(() => {
 	let res = []
 	if (enumStore.enums?.rollupCategories?.length) {
 		res = enumStore.enums.rollupCategories.slice(1)
-		res.push('other')
+		res.push("other")
 	}
-	
-	return res	
+
+	return res
 })
 const types = computed(() => {
 	let res = []
 	if (enumStore.enums?.rollupTypes?.length) {
 		res = enumStore.enums.rollupTypes
 	}
-	
-	return res	
+
+	return res
 })
 const tags = computed(() => {
 	let res = []
 	if (enumStore.enums?.rollupTags?.length) {
 		res = enumStore.enums.rollupTags
 	}
-	
+
 	return res
 })
 const providers = ref([])
@@ -93,11 +92,11 @@ const stacks = ref([])
 
 const getDisplayName = (name) => {
 	switch (name) {
-		case 'nft':
-			return 'NFT'
+		case "nft":
+			return "NFT"
 
-		case 'uncategorized':
-			return 'Other'
+		case "uncategorized":
+			return "Other"
 
 		default:
 			return capitilize(name)
@@ -112,11 +111,11 @@ const popovers = reactive({
 	tags: false,
 })
 const keyMap = {
-	categories: 'category',
-	types: 'type',
-	providers: 'provider',
-	stacks: 'stack',
-	tags: 'tags',
+	categories: "category",
+	types: "type",
+	providers: "provider",
+	stacks: "stack",
+	tags: "tags",
 }
 
 const filters = reactive({
@@ -131,35 +130,35 @@ const isFilterActive = computed(() => {
 })
 const savedFiltersBeforeChanges = ref(null)
 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))
+	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
-    }, {})
+		if (activeKeys.length > 0) {
+			acc[filterName] = activeKeys
+		}
+		return acc
+	}, {})
 
-    const applyFilters = (data) => {
-        if (Object.keys(activeFilters).length === 0) return data
+	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]];
+		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));
+					return values.some((value) => elValue.includes(value))
 				} else {
-					return values.includes(elValue);
+					return values.includes(elValue)
 				}
-			})
-        )
-    }
+			}),
+		)
+	}
 
-    filteredRollups.value = applyFilters(series.value?.data || [])
-    filteredRollupsDailyStats.value = applyFilters(rollupsDailyStats.value || [])
+	filteredRollups.value = applyFilters(series.value?.data || [])
+	filteredRollupsDailyStats.value = applyFilters(rollupsDailyStats.value || [])
 }
 
 const handleOpenPopover = (name) => {
@@ -171,7 +170,7 @@ const handleOpenPopover = (name) => {
 }
 const onPopoverClose = (name) => {
 	popovers[name] = false
-	
+
 	if (savedFiltersBeforeChanges.value) {
 		filters[name] = savedFiltersBeforeChanges.value
 		savedFiltersBeforeChanges.value = null
@@ -203,23 +202,23 @@ const resetFilters = (name) => {
 
 const route = useRoute()
 
-const sections = ref(['overview', 'daily_stats'])
-const activeSection = ref('')
+const sections = ref(["overview", "daily_stats"])
+const activeSection = ref("")
 
 const updateSection = (section) => {
 	activeSection.value = section
-    emit('onUpdateSection', section)
+	emit("onUpdateSection", section)
 }
 
 onMounted(async () => {
 	activeSection.value = route.query.section && sections.value.includes(route.query.section) ? route.query.section : sections.value[0]
 
 	switch (activeSection.value) {
-		case 'overview':
+		case "overview":
 			await getRollups()
 
 			break
-		case 'daily_stats':
+		case "daily_stats":
 			await getRollups()
 			await getRollupsDailyStats()
 
@@ -235,14 +234,14 @@ watch(
 		updateSection(activeSection.value)
 
 		switch (activeSection.value) {
-			case 'overview':
+			case "overview":
 				if (!series.value?.data?.length && !isLoading.value) {
 					await getRollups()
 					filterRollups()
 				}
 
 				break
-			case 'daily_stats':
+			case "daily_stats":
 				if (!rollupsDailyStats.value.length && !isLoading.value) {
 					await getRollupsDailyStats()
 					filterRollups()
@@ -252,7 +251,7 @@ watch(
 			default:
 				break
 		}
-	}
+	},
 )
 
 watch(
@@ -273,33 +272,32 @@ watch(
 			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" direction="column" gap="12" wide :class="$style.wrapper">
 		<Flex align="start" justify="between" wide :class="$style.segment">
-			<Flex align="center" gap="12" :style="{minWidth: '200px'}">
+			<Flex align="center" gap="12" :style="{ minWidth: '200px' }">
 				<Text
 					v-for="s in sections"
 					@click="activeSection = s"
@@ -312,12 +310,7 @@ watch(
 			</Flex>
 
 			<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"
-				>
+				<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" />
@@ -326,16 +319,19 @@ watch(
 
 						<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`
+								{{
+									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>
 
@@ -348,10 +344,7 @@ watch(
 							<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]"
-								>
+								<Checkbox v-for="item in Object.keys(filters[p])" v-model="filters[p][item]">
 									<Text size="12" weight="500" color="primary">
 										{{ getDisplayName(item) }}
 									</Text>
@@ -375,7 +368,7 @@ watch(
 
 				<Flex align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
 					<PieChartCard
-						v-for="s in series.filter(s => s.subGroup === 'top')"
+						v-for="s in series.filter((s) => s.subGroup === 'top')"
 						:series="s"
 						:data="filteredRollups"
 						dounut
@@ -390,7 +383,8 @@ watch(
 				</Flex>
 
 				<Flex align="center" justify="between" gap="16" wide :class="$style.charts_wrapper">
-					<ChartCardPreview v-for="s in series.filter(s => s.subGroup === 'economy')"
+					<ChartCardPreview
+						v-for="s in series.filter((s) => s.subGroup === 'economy')"
 						:series="s"
 						:period="STATS_PERIODS[2]"
 						:class="$style.chart_card"
@@ -399,8 +393,13 @@ watch(
 			</template>
 		</Flex>
 
-		<RollupsActivity v-else-if="activeSection === 'daily_stats' && !isLoading" @clearFilters="resetFilters" :rollups="filteredRollupsDailyStats" :isFilterActive="isFilterActive" />
-    </Flex>
+		<RollupsActivity
+			v-else-if="activeSection === 'daily_stats' && !isLoading"
+			@clearFilters="resetFilters"
+			:rollups="filteredRollupsDailyStats"
+			:isFilterActive="isFilterActive"
+		/>
+	</Flex>
 </template>
 
 <style module>
diff --git a/components/modules/tx/MessagesTable.vue b/components/modules/tx/MessagesTable.vue
index 7af4fc1f..59231ba8 100644
--- a/components/modules/tx/MessagesTable.vue
+++ b/components/modules/tx/MessagesTable.vue
@@ -3,7 +3,7 @@
 import { DateTime } from "luxon"
 
 /** UI */
-import Button from "~/components/ui/Button.vue"
+import Button from "@/components/ui/Button.vue"
 
 /** Shared Components */
 import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
@@ -12,8 +12,8 @@ import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
 import { comma, formatBytes } from "@/services/utils"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
@@ -37,9 +37,9 @@ const page = ref(1)
 const itemsPerPage = 10
 const pages = computed(() => Math.ceil(props.messages.length / itemsPerPage))
 const messagesToShow = computed(() => {
-	let start = (page.value - 1) * itemsPerPage;
-	let end = start + itemsPerPage;
-	return props.messages.slice(start, end); 
+	let start = (page.value - 1) * itemsPerPage
+	let end = start + itemsPerPage
+	return props.messages.slice(start, end)
 })
 const handleNext = () => {
 	if (page.value === pages.value) return
@@ -199,4 +199,4 @@ const handlePrev = () => {
 .pagination {
 	padding: 0 16px 16px 16px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/modules/tx/TxOverview.vue b/components/modules/tx/TxOverview.vue
index 0c2acb2a..f2e8c164 100644
--- a/components/modules/tx/TxOverview.vue
+++ b/components/modules/tx/TxOverview.vue
@@ -5,7 +5,7 @@ import { DateTime } from "luxon"
 /** UI */
 import AmountInCurrency from "@/components/AmountInCurrency.vue"
 import BookmarkButton from "@/components/BookmarkButton.vue"
-import Button from "~/components/ui/Button.vue"
+import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Events from "@/components/shared/tables/Events.vue"
 
@@ -20,8 +20,8 @@ import { comma } from "@/services/utils"
 import { fetchTxMessages } from "@/services/api/tx"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
@@ -40,7 +40,7 @@ const activeTab = ref(preselectedTab)
 const messages = ref([])
 
 const gasBarColor = computed(() => {
-	let percent = props.tx.gas_used * 100 / props.tx.gas_wanted
+	let percent = (props.tx.gas_used * 100) / props.tx.gas_wanted
 
 	if (percent > 100) {
 		return "var(--red)"
@@ -85,14 +85,14 @@ const handleViewRawTransaction = () => {
 		<Flex align="center" justify="between" :class="$style.header">
 			<Flex align="center" gap="8">
 				<Icon name="tx" size="14" color="primary" />
-				<Text size="13" weight="600" color="primary">Transaction</Text>
+				<Text as="h1" size="13" weight="600" color="primary">
+					Transaction <Text color="secondary">{{ tx.hash.slice(0, 4) }} ••• {{ tx.hash.slice(-4) }}</Text>
+				</Text>
+				<CopyButton :text="tx.hash" size="12" />
 			</Flex>
 
 			<Flex align="center" gap="12">
-				<BookmarkButton
-					type="transaction"
-					:id="tx.hash"
-				/>
+				<BookmarkButton type="transaction" :id="tx.hash" />
 
 				<div class="divider_v" />
 
@@ -170,14 +170,14 @@ const handleViewRawTransaction = () => {
 					</Flex>
 
 					<Flex v-if="tx.memo" direction="column" gap="6">
-						<Text size="12" weight="600" color="secondary">Memo</Text>
-
 						<Flex align="center" gap="6">
+							<Text size="12" weight="600" color="secondary">Memo</Text>
 							<CopyButton :text="tx.memo" />
-							<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.memo">
-								{{ tx.memo }}
-							</Text>
 						</Flex>
+
+						<Text size="12" height="140" weight="600" color="tertiary" mono selectable :class="$style.memo">
+							{{ tx.memo }}
+						</Text>
 					</Flex>
 
 					<Flex direction="column" gap="10">
@@ -188,7 +188,7 @@ const handleViewRawTransaction = () => {
 								:style="{
 									width: `${(tx.gas_used * 100) / tx.gas_wanted > 100 ? 100 : (tx.gas_used * 100) / tx.gas_wanted}%`,
 									background: gasBarColor,
-									boxShadow: `0 0 6px ${gasBarColor}`
+									boxShadow: `0 0 6px ${gasBarColor}`,
 								}"
 								:class="$style.gas_used"
 							/>
@@ -205,7 +205,7 @@ const handleViewRawTransaction = () => {
 
 						<Flex align="center" justify="between">
 							<Text size="12" weight="600" color="tertiary"> Signer</Text>
-							<Flex align="center" gap="6">
+							<Flex v-if="tx.signers" align="center" gap="6">
 								<AddressBadge :account="tx.signers[0]" color="secondary" />
 
 								<CopyButton :text="tx.signers[0].hash" />
@@ -478,6 +478,16 @@ const handleViewRawTransaction = () => {
 	}
 }
 
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
 @media (max-width: 500px) {
 	.data {
 		.main {
diff --git a/components/modules/validator/ValidatorOverview.vue b/components/modules/validator/ValidatorOverview.vue
index c4001db3..1083af57 100644
--- a/components/modules/validator/ValidatorOverview.vue
+++ b/components/modules/validator/ValidatorOverview.vue
@@ -16,8 +16,8 @@ import { comma, numToPercent, shortHex, splitAddress } from "@/services/utils"
 import { fetchValidatorBlocks, fetchValidatorDelegators, fetchValidatorJails, fetchValidatorUptime } from "@/services/api/validator"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 
@@ -239,7 +239,6 @@ watch(
 const handleDelegate = () => {
 	modalsStore.open("staking")
 }
-
 </script>
 
 <template>
@@ -247,7 +246,9 @@ const handleDelegate = () => {
 		<Flex align="center" justify="between" :class="$style.header">
 			<Flex align="center" gap="8">
 				<Icon name="validator" size="14" color="primary" />
-				<Text size="13" weight="600" color="primary">Validator</Text>
+				<Text as="h1" size="13" weight="600" color="primary">
+					Validator <Text color="secondary">{{ validator.moniker }}</Text>
+				</Text>
 			</Flex>
 
 			<Flex align="center" gap="12">
@@ -256,7 +257,7 @@ const handleDelegate = () => {
 					Delegate
 				</Button>
 			</Flex>
-		</Flex>		
+		</Flex>
 
 		<Flex gap="4" :class="$style.content">
 			<Flex direction="column" :class="$style.data">
@@ -640,6 +641,16 @@ const handleDelegate = () => {
 	}
 }
 
+@media (max-width: 550px) {
+	.header {
+		height: initial;
+		flex-direction: column;
+		gap: 12px;
+
+		padding: 12px 0;
+	}
+}
+
 @media (max-width: 400px) {
 	.tabs_wrapper {
 		overflow-x: auto;
diff --git a/components/shared/AdvBanner.vue b/components/shared/AdvBanner.vue
index fa816677..3398e9cd 100644
--- a/components/shared/AdvBanner.vue
+++ b/components/shared/AdvBanner.vue
@@ -3,7 +3,7 @@
 import { getAdvByName, getRandomAdv } from "@/services/constants/advertising"
 
 /** Store */
-import { useModalsStore } from "~/store/modals"
+import { useModalsStore } from "@/store/modals.store"
 const modalsStore = useModalsStore()
 
 const props = defineProps({
@@ -13,7 +13,7 @@ const props = defineProps({
 	},
 	orientation: {
 		type: String,
-		default: 'vertical',
+		default: "vertical",
 	},
 })
 
@@ -26,7 +26,7 @@ const handleClick = () => {
 	if (adv.value.internalLink) {
 		router.push(adv.value.internalLink)
 	} else if (adv.value.link) {
-		window.open(adv.value.link, '_blank')
+		window.open(adv.value.link, "_blank")
 	} else if (adv.value.modal) {
 		modalsStore.open(adv.value.modal)
 	}
@@ -42,7 +42,11 @@ onMounted(() => {
 </script>
 
 <template>
-	<Flex v-if="adv.name" @click="handleClick()" :class="[$style.wrapper, orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]">
+	<Flex
+		v-if="adv.name"
+		@click="handleClick()"
+		:class="[$style.wrapper, orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]"
+	>
 		<Flex v-if="orientation === 'vertical'" direction="column" gap="12" :class="$style.ad_vertical">
 			<Flex direction="column" gap="8">
 				<Flex align="center" gap="6">
@@ -55,18 +59,12 @@ onMounted(() => {
 
 			<Flex align="center" justify="between">
 				<Text size="13" weight="600" color="brand" :class="$style.footer"> {{ adv.footer }} </Text>
-				
+
 				<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
 			</Flex>
 		</Flex>
 
-		<Flex
-			v-else-if="orientation === 'horizontal'"
-			align="center"
-			gap="12"
-			wide
-			:class="$style.ad_horizontal"
-		>
+		<Flex v-else-if="orientation === 'horizontal'" align="center" gap="12" wide :class="$style.ad_horizontal">
 			<Flex align="center" gap="8">
 				<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
 
@@ -77,7 +75,7 @@ onMounted(() => {
 
 			<Flex align="center" gap="8" :class="$style.footer">
 				<Text size="13" weight="600" color="brand" :class="$style.text"> {{ adv.footer }} </Text>
-				
+
 				<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
 			</Flex>
 		</Flex>
@@ -87,7 +85,7 @@ onMounted(() => {
 <style module>
 .wrapper {
 	width: 100%;
-	
+
 	cursor: pointer;
 }
 
diff --git a/components/shared/tables/Events.vue b/components/shared/tables/Events.vue
index 08e868fc..c1787a9e 100644
--- a/components/shared/tables/Events.vue
+++ b/components/shared/tables/Events.vue
@@ -3,8 +3,8 @@
 import { DateTime } from "luxon"
 
 /** UI */
-import Tooltip from "~/components/ui/Tooltip.vue"
-import Button from "~/components/ui/Button.vue"
+import Tooltip from "@/components/ui/Tooltip.vue"
+import Button from "@/components/ui/Button.vue"
 
 /** Services */
 import { tia, splitAddress } from "@/services/utils"
@@ -14,13 +14,11 @@ import { fetchTxEvents } from "@/services/api/tx"
 import { fetchBlockEvents } from "@/services/api/block"
 
 /** Store */
-import { useModalsStore } from "@/store/modals"
-import { useCacheStore } from "@/store/cache"
+import { useModalsStore } from "@/store/modals.store"
+import { useCacheStore } from "@/store/cache.store"
 const modalsStore = useModalsStore()
 const cacheStore = useCacheStore()
 
-const router = useRouter()
-
 const props = defineProps({
 	block: {
 		type: Object,
@@ -60,11 +58,11 @@ const getEvents = async () => {
 	isLoading.value = true
 
 	if (props.block) {
-		events.value = await fetchBlockEvents({ 
+		events.value = await fetchBlockEvents({
 			height: props.block.height,
 			limit: 10,
 			offset: (page.value - 1) * 10,
-		}) 
+		})
 	} else if (props.tx) {
 		events.value = await fetchTxEvents({
 			hash: props.tx.hash,
@@ -78,19 +76,19 @@ const getEvents = async () => {
 
 const handlingEventType = (type) => {
 	switch (type) {
-		case 'cosmos.authz.v1beta1.EventGrant':
-			return 'grant'
+		case "cosmos.authz.v1beta1.EventGrant":
+			return "grant"
+
+		case "cosmos.authz.v1beta1.EventRevoke":
+			return "revoke"
 
-		case 'cosmos.authz.v1beta1.EventRevoke':
-			return 'revoke'
-	
 		default:
 			return type
 	}
 }
 
 const handlingEventActionType = (type) => {
-	return type.split('.').slice(-1)[0].replace('\"','')
+	return type.split(".").slice(-1)[0].replace('"', "")
 }
 
 const handleViewRawEvent = (event) => {
@@ -100,11 +98,7 @@ const handleViewRawEvent = (event) => {
 }
 
 const page = ref(1)
-const pages = computed(() => (
-	props.block
-		? Math.ceil(props.block.stats.events_count / 10)
-		: Math.ceil(props.tx.events_count / 10))
-)
+const pages = computed(() => (props.block ? Math.ceil(props.block.stats.events_count / 10) : Math.ceil(props.tx.events_count / 10)))
 const handleNext = () => {
 	if (page.value === pages.value) return
 	page.value += 1
@@ -115,7 +109,7 @@ const handlePrev = () => {
 }
 
 onMounted(() => {
-	getEvents();
+	getEvents()
 })
 
 /** Refetch events */
@@ -130,7 +124,14 @@ watch(
 <template>
 	<Flex direction="column" justify="between" :class="$style.data">
 		<Flex direction="column" :class="[$style.inner, $style.events]">
-			<Flex v-if="events.length" v-for="(event, idx) in events" @click="handleViewRawEvent(event)" align="center" gap="12" :class="$style.event">
+			<Flex
+				v-if="events.length"
+				v-for="(event, idx) in events"
+				@click="handleViewRawEvent(event)"
+				align="center"
+				gap="12"
+				:class="$style.event"
+			>
 				<Flex
 					direction="column"
 					align="center"
@@ -338,17 +339,12 @@ watch(
 						</template>
 					</Flex>
 					<!-- Event: withdraw_rewards -->
-					<Flex
-						v-else-if="event.type === 'withdraw_rewards'"
-						align="center"
-						gap="4"
-						color="secondary"
-						:class="$style.text"
-					>
+					<Flex v-else-if="event.type === 'withdraw_rewards'" align="center" gap="4" color="secondary" :class="$style.text">
 						<Text size="12" weight="500" color="secondary">Withdrawal</Text>
 
 						<Text size="12" weight="500" color="primary" mono no-wrap>
-							{{ tia(event.data.amount.replace("utia", "")) }} TIA</Text>
+							{{ tia(event.data.amount.replace("utia", "")) }} TIA</Text
+						>
 
 						<Text size="12" weight="500" color="secondary">from</Text>
 
@@ -365,13 +361,7 @@ watch(
 						</Tooltip>
 					</Flex>
 					<!-- Event: withdraw_commission -->
-					<Flex
-						v-else-if="event.type === 'withdraw_commission'"
-						align="center"
-						gap="4"
-						color="secondary"
-						:class="$style.text"
-					>
+					<Flex v-else-if="event.type === 'withdraw_commission'" align="center" gap="4" color="secondary" :class="$style.text">
 						<Text size="12" weight="500" color="secondary">Commission</Text>
 
 						<Text size="12" weight="500" color="primary" mono no-wrap>
@@ -641,9 +631,9 @@ watch(
 						<Text size="12" weight="500" color="secondary">was jailed for</Text>
 
 						<Tooltip :class="$style.tooltip">
-								<Text size="12" weight="500" color="primary" mono>
-									{{ event.data.reason }}
-								</Text>
+							<Text size="12" weight="500" color="primary" mono>
+								{{ event.data.reason }}
+							</Text>
 
 							<template #content>
 								{{ event.data.reason }}
@@ -651,7 +641,13 @@ watch(
 						</Tooltip>
 					</Flex>
 					<!-- Event: cancel_unbonding_delegation -->
-					<Flex v-else-if="event.type === 'cancel_unbonding_delegation'" align="center" gap="4" color="secondary" :class="$style.text">
+					<Flex
+						v-else-if="event.type === 'cancel_unbonding_delegation'"
+						align="center"
+						gap="4"
+						color="secondary"
+						:class="$style.text"
+					>
 						<Text size="12" weight="500" color="secondary">Unbonding</Text>
 
 						<Text size="12" weight="500" color="primary" mono no-wrap>
@@ -675,16 +671,22 @@ watch(
 						<Text size="12" weight="500" color="secondary">was canceled</Text>
 					</Flex>
 					<!-- Event: cosmos.authz.v1beta1.EventGrant -->
-					<Flex v-else-if="event.type === 'cosmos.authz.v1beta1.EventGrant'" align="center" gap="4" color="secondary" :class="$style.text">
+					<Flex
+						v-else-if="event.type === 'cosmos.authz.v1beta1.EventGrant'"
+						align="center"
+						gap="4"
+						color="secondary"
+						:class="$style.text"
+					>
 						<Tooltip :class="$style.tooltip">
 							<NuxtLink :to="`/address/${event.data.granter.hash}`" @click.stop>
 								<Text size="12" weight="500" color="primary" mono>
-									{{ splitAddress(event.data.granter.hash.replace(/"/g,'')) }}
+									{{ splitAddress(event.data.granter.hash.replace(/"/g, "")) }}
 								</Text>
 							</NuxtLink>
 
 							<template #content>
-								{{ event.data.granter.hash.replace(/"/g,'') }}
+								{{ event.data.granter.hash.replace(/"/g, "") }}
 							</template>
 						</Tooltip>
 
@@ -699,26 +701,32 @@ watch(
 						<Tooltip :class="$style.tooltip">
 							<NuxtLink :to="`/address/${event.data.grantee.hash}`" @click.stop>
 								<Text size="12" weight="500" color="primary" mono>
-									{{ splitAddress(event.data.grantee.hash.replace(/"/g,'')) }}
+									{{ splitAddress(event.data.grantee.hash.replace(/"/g, "")) }}
 								</Text>
 							</NuxtLink>
 
 							<template #content>
-								{{ event.data.grantee.hash.replace(/"/g,'') }}
+								{{ event.data.grantee.hash.replace(/"/g, "") }}
 							</template>
 						</Tooltip>
 					</Flex>
 					<!-- Event: cosmos.authz.v1beta1.EventRevoke -->
-					<Flex v-else-if="event.type === 'cosmos.authz.v1beta1.EventRevoke'" align="center" gap="4" color="secondary" :class="$style.text">
+					<Flex
+						v-else-if="event.type === 'cosmos.authz.v1beta1.EventRevoke'"
+						align="center"
+						gap="4"
+						color="secondary"
+						:class="$style.text"
+					>
 						<Tooltip :class="$style.tooltip">
 							<NuxtLink :to="`/address/${event.data.granter.hash}`" @click.stop>
 								<Text size="12" weight="500" color="primary" mono>
-									{{ splitAddress(event.data.granter.replace(/"/g,'')) }}
+									{{ splitAddress(event.data.granter.replace(/"/g, "")) }}
 								</Text>
 							</NuxtLink>
 
 							<template #content>
-								{{ event.data.granter.hash.replace(/"/g,'') }}
+								{{ event.data.granter.hash.replace(/"/g, "") }}
 							</template>
 						</Tooltip>
 
@@ -733,12 +741,12 @@ watch(
 						<Tooltip :class="$style.tooltip">
 							<NuxtLink :to="`/address/${event.data.grantee.hash}`" @click.stop>
 								<Text size="12" weight="500" color="primary" mono>
-									{{ splitAddress(event.data.grantee.hash.replace(/"/g,'')) }}
+									{{ splitAddress(event.data.grantee.hash.replace(/"/g, "")) }}
 								</Text>
 							</NuxtLink>
 
 							<template #content>
-								{{ event.data.grantee.hash.replace(/"/g,'') }}
+								{{ event.data.grantee.hash.replace(/"/g, "") }}
 							</template>
 						</Tooltip>
 					</Flex>
@@ -786,9 +794,7 @@ watch(
 
 						<Text size="12" weight="500" color="secondary">missed</Text>
 
-						<Text size="12" weight="500" color="primary" mono no-wrap>
-							{{ event.data.missed_blocks }}</Text
-						>
+						<Text size="12" weight="500" color="primary" mono no-wrap> {{ event.data.missed_blocks }}</Text>
 
 						<Text size="12" weight="500" color="secondary">blocks</Text>
 					</Flex>
diff --git a/components/ui/Input.vue b/components/ui/Input.vue
index 1390b185..14bf09fb 100644
--- a/components/ui/Input.vue
+++ b/components/ui/Input.vue
@@ -68,7 +68,7 @@ watch(
 )
 
 const getInputType = computed(() => {
-	if (!!props.type) return props.type
+	if (props.type) return props.type
 	return "text"
 })
 
diff --git a/components/ui/Modal.vue b/components/ui/Modal.vue
index 684e3883..91a0c0b2 100644
--- a/components/ui/Modal.vue
+++ b/components/ui/Modal.vue
@@ -8,7 +8,6 @@ import * as focusTrap from "focus-trap"
  * Composable
  */
 import { useOutside } from "@/composables/outside"
-import Height from "~/pages/block/[height].vue";
 
 const emit = defineEmits(["onClose"])
 const props = defineProps({
@@ -66,8 +65,6 @@ watch(
 	() => props.show,
 	() => {
 		if (!props.show) {
-			document.body.style.overflow = null
-
 			document.removeEventListener("keydown", onKeydown)
 
 			if (!props.disableTrap) trap.value.deactivate()
@@ -76,8 +73,6 @@ watch(
 				removeOutside()
 			}
 		} else {
-			document.body.style.overflow = "hidden"
-
 			document.addEventListener("keydown", onKeydown)
 
 			nextTick(() => {
@@ -98,8 +93,8 @@ watch(
 
 const calcModalStyles = computed(() => {
 	const styles = {
-		width: props.fullscreen ? 'calc(100vw - 40px)' : props.width ? `${props.width}px` : `400px`,
-		height: props.fullscreen ? '900px' : '',
+		width: props.fullscreen ? "calc(100vw - 40px)" : props.width ? `${props.width}px` : `400px`,
+		height: props.fullscreen ? "900px" : "",
 	}
 
 	props.new && (styles.padding = "0")
diff --git a/components/ui/Popover.vue b/components/ui/Popover.vue
index 63c0f87c..afd13883 100644
--- a/components/ui/Popover.vue
+++ b/components/ui/Popover.vue
@@ -57,8 +57,6 @@ watch(
 					break
 			}
 
-			// popoverStyles[props.side] = `${props.side === "left" ? triggerRect.x : window.innerWidth - triggerRect.x - triggerRect.width}px`
-
 			document.addEventListener("scroll", onClose)
 			document.addEventListener("keydown", onKeydown)
 
diff --git a/components/widgets/BlobsWidget.vue b/components/widgets/BlobsWidget.vue
index 74f0ccc8..e1e0240f 100644
--- a/components/widgets/BlobsWidget.vue
+++ b/components/widgets/BlobsWidget.vue
@@ -39,7 +39,7 @@ onMounted(async () => {
 
 	const firstDayDt = DateTime.fromISO(days.value[0].time)
 	if (firstDayDt.weekday !== 1) {
-		days.value.unshift(...new Array(firstDayDt.weekday - 1))
+		days.value.unshift(...Array.from({ length: firstDayDt.weekday - 1 }))
 	}
 
 	/** days -> weeks */
@@ -55,14 +55,14 @@ onMounted(async () => {
 
 	/** fill empty weeks */
 	while (weeks.value.length < 24) {
-		weeks.value.push(new Array(7))
+		weeks.value.push(Array.from({ length: 7 }))
 	}
 
 	/** remove first weeks */
 	while (weeks.value.length > 24) {
 		weeks.value.shift()
 	}
-	
+
 	totalSize.time = Object.values(weeks.value[0]).find(Boolean).time
 })
 
@@ -77,8 +77,8 @@ const calculateOpacity = (val) => {
 }
 
 const selectDay = (d) => {
-	let from = parseInt(DateTime.fromISO(d.time).startOf('day').ts / 1_000)
-	let to = parseInt(DateTime.fromISO(d.time).endOf('day').ts / 1_000)
+	let from = parseInt(DateTime.fromISO(d.time).startOf("day").ts / 1_000)
+	let to = parseInt(DateTime.fromISO(d.time).endOf("day").ts / 1_000)
 	router.push(`/txs?message_type=MsgPayForBlobs&from=${from}&to=${to}`)
 }
 </script>
diff --git a/components/widgets/BlockWidget.vue b/components/widgets/BlockWidget.vue
index 95d879dd..25af3a71 100644
--- a/components/widgets/BlockWidget.vue
+++ b/components/widgets/BlockWidget.vue
@@ -12,7 +12,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
 import { fetchAvgBlockTime } from "@/services/api/block"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const lastBlock = computed(() => appStore.latestBlocks[0])
diff --git a/components/widgets/GasWidget.vue b/components/widgets/GasWidget.vue
index 04dbe238..88a0659a 100644
--- a/components/widgets/GasWidget.vue
+++ b/components/widgets/GasWidget.vue
@@ -3,7 +3,7 @@
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const gasPrice = computed(() => appStore.gas)
diff --git a/components/widgets/NetworkWidget.vue b/components/widgets/NetworkWidget.vue
deleted file mode 100644
index 5894c7cc..00000000
--- a/components/widgets/NetworkWidget.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup>
-/** UI */
-import Tooltip from "@/components/ui/Tooltip.vue"
-
-/** API */
-import { fetchTPS } from "@/services/api/stats"
-
-const displayTpm = ref(0)
-const tpm = ref(0)
-
-const diff = ref(0)
-
-const high = ref(0)
-const low = ref(0)
-
-const displayPos = ref(0)
-const pos = ref(0)
-
-onMounted(async () => {
-	const data = await fetchTPS()
-
-	tpm.value = data.current * 60
-
-	const tpmInterval = setInterval(() => {
-		if (displayTpm.value >= tpm.value) {
-			clearInterval(tpmInterval)
-			return
-		}
-
-		displayTpm.value += 0.1
-	}, 10)
-
-	diff.value = data.change_last_hour_pct
-
-	high.value = data.high * 60
-	low.value = data.low * 60
-
-	pos.value = (100 * (tpm.value - low.value)) / (high.value - low.value)
-	const posInterval = setInterval(() => {
-		if (displayPos.value >= pos.value) {
-			clearInterval(posInterval)
-			return
-		}
-
-		displayPos.value += 1
-	}, 15)
-})
-</script>
-
-<template>
-	<Flex direction="column" wide :class="$style.wrapper">
-		<Flex direction="column" gap="20" :class="$style.top">
-			<Text size="16" weight="600" color="primary"> Network </Text>
-
-			<Flex direction="column" gap="16">
-				<Tooltip position="start" text-align="left">
-					<Flex align="start" gap="16">
-						<Flex direction="column" gap="6">
-							<Text size="40" weight="600" color="primary" :class="[$style.ds_font, $style.tpm_num]">
-								{{ displayTpm.toFixed(1) }}
-							</Text>
-							<Text size="16" weight="700" color="tertiary" :class="$style.ds_font">TXS/M</Text>
-						</Flex>
-
-						<Text size="20" weight="600" :class="$style.ds_font" :color="diff > 0 ? 'green' : 'red'">
-							{{ diff.toFixed(diff < 1 ? 2 : 0) }}%
-						</Text>
-					</Flex>
-
-					<template #content>
-						<Flex direction="column" gap="6">
-							<Text>Transactions per minute</Text>
-							<Text color="tertiary">Calculated based on the last 24 hours</Text>
-						</Flex>
-					</template>
-				</Tooltip>
-			</Flex>
-		</Flex>
-
-		<Flex direction="column" justify="between" gap="16" :class="$style.bottom">
-			<Flex align="center" gap="6">
-				<Icon name="level" size="12" color="secondary" />
-				<Text size="13" weight="600" height="110" color="secondary">TPM Level</Text>
-			</Flex>
-
-			<Flex direction="column" gap="8">
-				<Tooltip position="start" wide>
-					<Flex gap="2" :class="$style.bars">
-						<div v-for="item in 10" :class="[$style.bar, displayPos >= item * 10 && $style.active]" />
-					</Flex>
-
-					<template #content>
-						<Flex align="start" direction="column" gap="6">
-							<Text color="secondary">
-								High: <Text color="primary">{{ high.toFixed(4) }} <Text color="secondary">TPM</Text></Text>
-							</Text>
-
-							<Text color="secondary">
-								Current: <Text color="primary">{{ tpm.toFixed(4) }} <Text color="secondary">TPM</Text></Text>
-							</Text>
-
-							<Text color="secondary">
-								Low: <Text color="primary">{{ low.toFixed(4) }} <Text color="secondary">TPM</Text></Text>
-							</Text>
-
-							<Text color="tertiary"> Based on the last 7 days </Text>
-						</Flex>
-					</template>
-				</Tooltip>
-			</Flex>
-
-			<Flex align="center" justify="between">
-				<Text v-if="!isNaN(pos)" size="16" weight="600" color="tertiary" :class="$style.ds_font"> {{ pos.toFixed(2) }}% </Text>
-				<Text v-else size="16" weight="600" color="tertiary" :class="$style.ds_font">0%</Text>
-
-				<Text size="12" weight="600" color="support"> Throughput level </Text>
-			</Flex>
-		</Flex>
-	</Flex>
-</template>
-
-<style module>
-.wrapper {
-	background: var(--card-background);
-	border-radius: 12px;
-	overflow: hidden;
-}
-
-.top {
-	padding: 16px 16px 20px 16px;
-}
-
-.tpm_num {
-	background: -webkit-linear-gradient(var(--txt-primary), var(--txt-tertiary));
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-}
-
-.ds_font {
-	font-family: "DS";
-}
-
-.bottom {
-	height: 100%;
-
-	background: var(--network-widget-background);
-	border-top: 2px solid var(--op-5);
-
-	padding: 20px 16px;
-}
-
-.bars {
-	width: fit-content;
-	height: 20px;
-
-	border-radius: 5px;
-	border: 1px solid var(--txt-secondary);
-
-	padding: 2px;
-
-	.bar {
-		width: 16px;
-		height: 14px;
-
-		background: linear-gradient(var(--txt-primary), var(--txt-support));
-		border-radius: 2px;
-		opacity: 0.2;
-
-		transition: all 0.5s ease;
-
-		&.active {
-			background: linear-gradient(var(--txt-primary), var(--txt-support));
-			opacity: 1;
-		}
-	}
-}
-
-@media (max-width: 1100px) {
-	.wrapper {
-		flex-direction: row;
-	}
-
-	.top {
-		flex: 1;
-	}
-
-	.bottom {
-		height: auto;
-
-		border-top: initial;
-		border-left: 2px solid var(--op-5);
-	}
-}
-
-@media (max-width: 420px) {
-	.wrapper {
-		flex-direction: column;
-	}
-
-	.top {
-		flex: initial;
-	}
-
-	.bottom {
-		border-top: 2px solid var(--op-5);
-		border-left: initial;
-	}
-}
-</style>
diff --git a/components/widgets/StakingWidget.vue b/components/widgets/StakingWidget.vue
index 34439c49..de280ec8 100644
--- a/components/widgets/StakingWidget.vue
+++ b/components/widgets/StakingWidget.vue
@@ -3,14 +3,13 @@
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Services */
-import { useServerURL } from "@/services/config"
 import { abbreviate, capitilize, numToPercent, shareOfTotal } from "@/services/utils"
 
 /** API */
 import { fetchValidatorsCount } from "@/services/api/validator"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const currentPrice = computed(() => appStore.currentPrice)
@@ -74,7 +73,7 @@ const getValidatorsStats = async () => {
 
 await getValidatorsStats()
 
-onMounted( async () => {
+onMounted(async () => {
 	wrapperWidth.value = wrapperEl.value.wrapper.offsetWidth
 })
 </script>
diff --git a/components/widgets/TransactionsWidget.vue b/components/widgets/TransactionsWidget.vue
index ba589c80..707d2f8e 100644
--- a/components/widgets/TransactionsWidget.vue
+++ b/components/widgets/TransactionsWidget.vue
@@ -24,6 +24,7 @@ const hoursMap = [
 const min = ref(0)
 const max = ref(0)
 const roundedMax = ref(0)
+const isLoading = ref(true)
 
 const getHistogram = async (sectorOffset) => {
 	const data = await fetchSeries({
@@ -74,7 +75,9 @@ const buildHistogram = async () => {
 }
 
 onMounted(async () => {
-	buildHistogram()
+	isLoading.value = true
+	await buildHistogram()
+	isLoading.value = false
 })
 
 const txCounter = computed(() => {
@@ -96,7 +99,9 @@ const getSectorName = (item) => {
 			<Flex align="center" gap="6">
 				<Icon name="tx" size="16" color="primary" />
 				<Flex gap="4" align="end">
-					<Tooltip v-if="txCounter">
+					<Skeleton v-if="isLoading" w="36" h="16" />
+
+					<Tooltip v-else>
 						<Flex gap="4" align="end">
 							<Text size="16" weight="600" color="primary">{{ abbreviate(txCounter) }}</Text>
 
@@ -109,8 +114,6 @@ const getSectorName = (item) => {
 							</Flex>
 						</template>
 					</Tooltip>
-					
-					<Skeleton v-else w="36" h="16" />
 				</Flex>
 			</Flex>
 
@@ -120,18 +123,17 @@ const getSectorName = (item) => {
 		<!-- Chart -->
 		<Flex gap="16" :class="$style.chart">
 			<Flex direction="column" justify="between" :class="$style.yAxis">
-				<Skeleton w="35" h="12" v-if="!roundedMax" />
-				<Text v-else size="12" weight="600" color="tertiary">{{ abbreviate(roundedMax) }}</Text>
+				<Skeleton v-if="isLoading" w="35" h="12" />
+				<Text v-else-if="roundedMax" size="12" weight="600" color="tertiary">{{ abbreviate(roundedMax) }}</Text>
 
-				<Skeleton w="15" h="12" v-if="!roundedMax" />
-				<Text v-else size="12" weight="600" color="tertiary">{{ comma(min) }}</Text>
+				<Skeleton v-if="isLoading" w="15" h="12" />
+				<Text v-else-if="min" size="12" weight="600" color="tertiary">{{ comma(min) }}</Text>
 			</Flex>
 
 			<Flex v-if="!sectors[0].length" wide :class="$style.sectors">
 				<Flex v-for="i in 4" direction="column" gap="8" wide :class="$style.sector">
 					<Flex justify="between" wide :class="$style.hours">
 						<Flex v-for="j in 6" direction="column" justify="end" gap="6" :class="$style.hour">
-							<Skeleton w="4" :style="{ height: `${Math.random(20, 80) * 100}%` }" />
 							<div :class="$style.dot" />
 						</Flex>
 					</Flex>
diff --git a/error.vue b/error.vue
index 9557f62d..a422d294 100644
--- a/error.vue
+++ b/error.vue
@@ -11,7 +11,7 @@ import CommandMenu from "@/components/cmd/CommandMenu.vue"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const router = useRouter()
diff --git a/layouts/default.vue b/layouts/default.vue
index bdb13490..5869934d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -54,7 +54,6 @@ const showPromoBackground = useCookie("showPromoBackground", { default: () => tr
 }
 
 .content {
-	/* max-width: 100%; */
 	max-width: 1040px;
 	min-width: 1040px;
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6996d7c3..2aaf27d6 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,9 +16,6 @@ export default defineNuxtConfig({
 	},
 
 	routeRules: {
-		"/node": {
-			ssr: false,
-		},
 		"/": {
 			sitemap: {
 				changefreq: "daily",
@@ -66,6 +63,7 @@ export default defineNuxtConfig({
 	runtimeConfig: {
 		public: {
 			AMP: process.env.AMP,
+			version: "1.16.0",
 		},
 	},
 
@@ -129,7 +127,7 @@ export default defineNuxtConfig({
 	},
 
 	devtools: {
-		enabled: false,
+		enabled: true,
 	},
 
 	vite: {
diff --git a/package.json b/package.json
index fdff152f..bea98cf2 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
 		"dev": "cross-env PORT=9090 nuxt dev",
 		"generate": "nuxt generate",
 		"preview": "nuxt preview",
-		"postinstall": "nuxt prepare"
+		"postinstall": "nuxt prepare",
+		"lint": "oxlint"
 	},
 	"devDependencies": {
 		"@nuxt/devtools": "latest",
@@ -19,6 +20,7 @@
 		"cross-env": "^7.0.3",
 		"nuxt": "3.16.2",
 		"nuxt-og-image": "5.1.3",
+		"oxlint": "^1.0.0",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"unenv": "^1.9.0",
diff --git a/pages/address/[hash].vue b/pages/address/[hash].vue
index ead89376..46a20dd2 100644
--- a/pages/address/[hash].vue
+++ b/pages/address/[hash].vue
@@ -7,7 +7,7 @@ import AddressCharts from "@/components/modules/address/AddressCharts.vue"
 import { fetchAddressByHash } from "@/services/api/address"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 
 const cacheStore = useCacheStore()
 
@@ -33,7 +33,7 @@ defineOgImageComponent("AddressImage", {
 })
 
 useHead({
-	title: `Address ${address.value?.hash} - Celestia Explorer`,
+	title: `Address ${address.value?.hash} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -47,7 +47,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Address ${address.value?.hash} - Celestia Explorer`,
+			content: `Address ${address.value?.hash} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -59,7 +59,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Address ${address.value?.hash} - Celestia Explorer`,
+			content: `Address ${address.value?.hash} - Celenium`,
 		},
 		{
 			name: "twitter:description",
@@ -78,7 +78,6 @@ onBeforeRouteLeave(() => {
 
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
-
 	return $getDisplayName("address", address.value.hash)
 })
 </script>
diff --git a/pages/addresses.vue b/pages/addresses.vue
index 1c27779e..afabc5b2 100644
--- a/pages/addresses.vue
+++ b/pages/addresses.vue
@@ -21,7 +21,7 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Addresses in the Celestia Blockchain. Hash, balance, first height, last height are shown.",
+			content: "View all addresses in the Celestia Blockchain. Hash, balance, first height, last height are shown.",
 		},
 		{
 			property: "og:title",
@@ -29,7 +29,7 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Addresses in the Celestia Blockchain. Hash, balance, first height, last height are shown.",
+			content: "View all addresses in the Celestia Blockchain. Hash, balance, first height, last height are shown.",
 		},
 		{
 			property: "og:url",
@@ -45,7 +45,7 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Addresses in the Celestia Blockchain. Hash, balance, first height, last height are shown.",
+			content: "View all addresses in the Celestia Blockchain. Hash, balance, first height, last height are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -156,7 +156,7 @@ const handleLast = async () => {
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
 					<Icon name="address" size="16" color="secondary" />
-					<Text size="14" weight="600" color="primary">Addresses</Text>
+					<Text as="h1" size="14" weight="600" color="primary">Addresses</Text>
 				</Flex>
 
 				<Flex align="center" gap="6">
diff --git a/pages/blob.vue b/pages/blob.vue
index e6a35dda..384eea49 100644
--- a/pages/blob.vue
+++ b/pages/blob.vue
@@ -16,9 +16,9 @@ import Tooltip from "@/components/ui/Tooltip"
 import { space, formatBytes, comma, strToHex } from "@/services/utils"
 
 /** Stores */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 const notificationsStore = useNotificationsStore()
diff --git a/pages/blobstream.vue b/pages/blobstream.vue
index ba92093f..b399695b 100644
--- a/pages/blobstream.vue
+++ b/pages/blobstream.vue
@@ -13,8 +13,8 @@ import { capitilize, comma, shortHex } from "@/services/utils"
 import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 
@@ -227,15 +227,17 @@ await getCommitments()
 							<Icon name="info" size="12" color="yellow" />
 							<template #content>
 								<Text size="12" weight="600" color="secondary">
-									No activity in the last 
+									No activity in the last
 									{{ DateTime.fromISO(n.time).diffNow().negate().toFormat("h") }}
 									hours
 								</Text>
 							</template>
 						</Tooltip>
-					</Flex>					
+					</Flex>
 
-					<Text size="12" weight="600" color="secondary"> {{ DateTime.fromISO(n.time).setLocale("en").toFormat("LLL d, t") }} </Text>
+					<Text size="12" weight="600" color="secondary">
+						{{ DateTime.fromISO(n.time).setLocale("en").toFormat("LLL d, t") }}
+					</Text>
 				</Flex>
 			</Flex>
 		</Flex>
diff --git a/pages/block/[height].vue b/pages/block/[height].vue
index 741267e9..2f5c0eaf 100644
--- a/pages/block/[height].vue
+++ b/pages/block/[height].vue
@@ -10,7 +10,7 @@ import { comma } from "@/services/utils"
 import { fetchBlockByHeight } from "@/services/api/block"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
@@ -39,7 +39,7 @@ defineOgImageComponent("BlockImage", {
 })
 
 useHead({
-	title: `Block ${comma(block.value?.height)} - Celestia Explorer`,
+	title: `Block ${comma(block.value?.height)} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -53,7 +53,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Block ${comma(block.value?.height)} - Celestia Explorer`,
+			content: `Block ${comma(block.value?.height)} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -65,7 +65,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Block ${comma(block.value?.height)} - Celestia Explorer`,
+			content: `Block ${comma(block.value?.height)} - Celenium`,
 		},
 		{
 			name: "twitter:description",
@@ -80,7 +80,6 @@ useHead({
 
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
-
 	return $getDisplayName("block", block.value?.height)
 })
 </script>
@@ -107,7 +106,7 @@ const displayName = computed(() => {
 
 <style module>
 .wrapper {
-	padding: 40px 24px 60px 24px;
+	padding: 20px 24px 60px 24px;
 }
 
 .breadcrumbs {
diff --git a/pages/blocks.vue b/pages/blocks.vue
index 705f22ed..b6bad2e1 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -24,7 +24,8 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Blocks in the Celestia Blockchain. Hash, proposer, transactions count, events, blobs size and fee are shown.",
+			content:
+				"View all blocks in the Celestia Blockchain. Hash, proposer, transactions count, events, blobs size and fee are shown.",
 		},
 		{
 			property: "og:title",
@@ -32,7 +33,8 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Blocks in the Celestia Blockchain. Hash, proposer, transactions count, events, blobs size and fee are shown.",
+			content:
+				"View all blocks in the Celestia Blockchain. Hash, proposer, transactions count, events, blobs size and fee are shown.",
 		},
 		{
 			property: "og:url",
@@ -48,7 +50,8 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Blocks in the Celestia Blockchain. Hash, proposer, transactions count, events, blobs size and fee are shown.",
+			content:
+				"View all blocks in the Celestia Blockchain. Hash, proposer, transactions count, events, blobs size and fee are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -131,7 +134,7 @@ const handleLast = async () => {
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
 					<Icon name="block" size="16" color="secondary" />
-					<Text size="14" weight="600" color="primary">Blocks</Text>
+					<Text as="h1" size="14" weight="600" color="primary">Blocks</Text>
 				</Flex>
 
 				<Flex align="center" gap="6">
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index ed21700f..ba85dbff 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -7,10 +7,10 @@ import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem, DropdownDivider } from "@/components/ui/Dropdown"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useModalsStore } from "@/store/modals"
-import { useBookmarksStore } from "@/store/bookmarks"
-import { useNotificationsStore } from "@/store/notifications"
+import { useAppStore } from "@/store/app.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useBookmarksStore } from "@/store/bookmarks.store"
+import { useNotificationsStore } from "@/store/notifications.store"
 const appStore = useAppStore()
 const modalsStore = useModalsStore()
 const bookmarksStore = useBookmarksStore()
diff --git a/pages/calculators/savings.vue b/pages/calculators/savings.vue
index 3a776a37..9906c7a5 100644
--- a/pages/calculators/savings.vue
+++ b/pages/calculators/savings.vue
@@ -6,7 +6,7 @@ import { formatBytes, comma, abbreviate, purgeNumber } from "@/services/utils"
 import Tooltip from "@/components/ui/Tooltip"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const route = useRoute()
@@ -520,8 +520,8 @@ useHead({
 					<div :class="$style.divider" />
 
 					<Text size="13" weight="600" color="support" height="160" style="max-width: 500px">
-						This estimation assumes a constant <Text color="tertiary">$TIA</Text> price. It should only be used as an estimation and
-						reference to compare what-if scenarios.
+						This estimation assumes a constant <Text color="tertiary">$TIA</Text> price. It should only be used as an estimation
+						and reference to compare what-if scenarios.
 					</Text>
 				</Flex>
 			</Flex>
diff --git a/pages/faucet.vue b/pages/faucet.vue
index 9580c1f2..20b15a61 100644
--- a/pages/faucet.vue
+++ b/pages/faucet.vue
@@ -13,9 +13,9 @@ import Input from "@/components/ui/Input.vue"
 import Tooltip from "@/components/ui/Tooltip.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
+import { useAppStore } from "@/store/app.store"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
 const appStore = useAppStore()
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
@@ -31,7 +31,8 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Get free testnet TIA for the Celestia Testnets using the Celenium Faucet. Developers can claim tokens to test dApps, validators, and blockchain tools. Start testing Celestia today!",
+			content:
+				"Get free testnet TIA for the Celestia Testnets using the Celenium Faucet. Developers can claim tokens to test dApps, validators, and blockchain tools. Start testing Celestia today!",
 		},
 		{
 			property: "og:title",
@@ -39,7 +40,8 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Get free testnet TIA for the Celestia Testnets using the Celenium Faucet. Developers can claim tokens to test dApps, validators, and blockchain tools. Start testing Celestia today!",
+			content:
+				"Get free testnet TIA for the Celestia Testnets using the Celenium Faucet. Developers can claim tokens to test dApps, validators, and blockchain tools. Start testing Celestia today!",
 		},
 		{
 			property: "og:url",
@@ -55,7 +57,8 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Get free testnet TIA for the Celestia Testnets using the Celenium Faucet. Developers can claim tokens to test dApps, validators, and blockchain tools. Start testing Celestia today!",
+			content:
+				"Get free testnet TIA for the Celestia Testnets using the Celenium Faucet. Developers can claim tokens to test dApps, validators, and blockchain tools. Start testing Celestia today!",
 		},
 		{
 			name: "twitter:card",
@@ -72,10 +75,10 @@ const isLoading = ref(false)
 const address = ref("")
 const account = ref()
 const networks = ["Mocha", "Arabica", "Mammoth"]
-const network = ref((networks.find(n => n === getNetworkName()) || networks[0]).toLowerCase())
+const network = ref((networks.find((n) => n === getNetworkName()) || networks[0]).toLowerCase())
 
 const isNetworkSelectorOpen = ref(false)
-const fetchAccount = async() => {
+const fetchAccount = async () => {
 	try {
 		account.value = null
 		const url = new URL(`${Server.API[network.value]}/address/${address.value}`)
@@ -84,7 +87,7 @@ const fetchAccount = async() => {
 			fillValidation("error", "Invalid address")
 			return
 		}
-		
+
 		if (!data.value) {
 			fillValidation("warning", "Address not found, make sure it is correct")
 			return
@@ -141,20 +144,19 @@ const handleExecute = async () => {
 		const { data, error } = await executeFaucet(network.value, address.value)
 
 		if (error?.value?.data) {
-			fillExecutionResult("error",
-				error.value.statusCode === 429
-					? 'Request limit exceeded'
-					: error.value?.data?.message || "Unexpected error"
+			fillExecutionResult(
+				"error",
+				error.value.statusCode === 429 ? "Request limit exceeded" : error.value?.data?.message || "Unexpected error",
 			)
 		} else if (data.value) {
-			if (data.value?.status === 'success') {
+			if (data.value?.status === "success") {
 				await refreshFaucetBalance()
 				await fetchAccount()
 			}
 
 			fillExecutionResult(data.value?.status, data.value?.hash)
 		}
-	} catch(error) {
+	} catch (error) {
 		fillExecutionResult("error", error || "Unexpected error")
 	} finally {
 		isLoading.value = false
@@ -163,9 +165,9 @@ const handleExecute = async () => {
 
 const handleReturnTokensClick = () => {
 	if (
-		(useServerURL().includes("mocha") && network.value === "mocha")
-		|| (useServerURL().includes("arabica") && network.value === "arabica")
-		|| (useServerURL().includes("mammoth") && network.value === "mammoth")
+		(useServerURL().includes("mocha") && network.value === "mocha") ||
+		(useServerURL().includes("arabica") && network.value === "arabica") ||
+		(useServerURL().includes("mammoth") && network.value === "mammoth")
 	) {
 		cacheStore.current.address = { hash: faucetAddress }
 		modalsStore.open("send")
@@ -181,7 +183,7 @@ const handleChangeNetwork = (net) => {
 const openedQuestion = ref(0)
 const handleOpenQuestion = (idx) => {
 	const elements = document.querySelectorAll("[class*=answer]")
-	elements.forEach(el => {
+	elements.forEach((el) => {
 		el.style.height = "0px"
 		el.style.marginBottom = "0px"
 	})
@@ -221,7 +223,7 @@ watch(
 		clearTimeout(timeout)
 		timeout = setTimeout(async () => {
 			await fetchAccount()
-		}, 500);
+		}, 500)
 	},
 )
 watch(
@@ -229,17 +231,20 @@ watch(
 	async () => {
 		address.value = ""
 		await refreshFaucetBalance()
-	}
+	},
 )
 
 await refreshFaucetBalance()
 onMounted(() => {
-	if ((useServerURL().includes('mocha') || useServerURL().includes('arabica') || useServerURL().includes('mammoth')) && appStore.address) {
+	if (
+		(useServerURL().includes("mocha") || useServerURL().includes("arabica") || useServerURL().includes("mammoth")) &&
+		appStore.address
+	) {
 		address.value = appStore.address
 	}
 
 	const transferEl = document.getElementById("transferWindow")
-	document.documentElement.style.setProperty('--runner-distance', `${transferEl.clientWidth}px`)
+	document.documentElement.style.setProperty("--runner-distance", `${transferEl.clientWidth}px`)
 })
 </script>
 
@@ -264,7 +269,7 @@ onMounted(() => {
 			</Text>
 		</Flex>
 
-		<Flex direction="column" justify="between" gap="24" wide :style="{maxWidth: '650px', marginTop: '24px'}">
+		<Flex direction="column" justify="between" gap="24" wide :style="{ maxWidth: '650px', marginTop: '24px' }">
 			<Flex direction="column" gap="48" wide>
 				<Flex direction="column" gap="16" wide>
 					<Flex align="center" justify="start" gap="16" wide>
@@ -288,16 +293,13 @@ onMounted(() => {
 									color="secondary"
 									:style="{
 										transform: `rotate(${isNetworkSelectorOpen ? '180' : '0'}deg)`,
-										transition: 'all 0.2s ease'
+										transition: 'all 0.2s ease',
 									}"
 								/>
 							</Flex>
 
 							<template #popup>
-								<DropdownItem
-									v-for="net in networks"
-									@click="handleChangeNetwork(net.toLowerCase())"
-								>
+								<DropdownItem v-for="net in networks" @click="handleChangeNetwork(net.toLowerCase())">
 									{{ net }}
 								</DropdownItem>
 							</template>
@@ -336,26 +338,27 @@ onMounted(() => {
 							:loading="isLoading"
 							:disabled="validation.type === 'error' || !address"
 						>
-							{{ `Recieve ${network === 'mammoth' ? 100 : 1} TIA` }}
+							{{ `Recieve ${network === "mammoth" ? 100 : 1} TIA` }}
 						</Button>
 					</Flex>
 				</Flex>
-				
+
 				<Flex direction="column" gap="4">
-					<Flex id="transferWindow" align="center" gap="12" :class="[$style.transfer, !(address && validation.type !== 'error') && $style.disabled]">
+					<Flex
+						id="transferWindow"
+						align="center"
+						gap="12"
+						:class="[$style.transfer, !(address && validation.type !== 'error') && $style.disabled]"
+					>
 						<Flex align="center" justify="between" wide>
 							<Flex align="center" gap="12">
 								<Icon name="faucet" size="16" color="secondary" :class="$style.icon" />
 
 								<Flex direction="column" gap="6" :class="$style.metadata" wide>
 									<Flex align="center" gap="6">
-										<Text size="14" weight="500" color="secondary">
-											Faucet
-										</Text>
+										<Text size="14" weight="500" color="secondary"> Faucet </Text>
 
-										<Text size="13" weight="400" color="secondary">
-											{{ comma(tia(faucetBalance, 2)) }} TIA
-										</Text>
+										<Text size="13" weight="400" color="secondary"> {{ comma(tia(faucetBalance, 2)) }} TIA </Text>
 									</Flex>
 
 									<Flex align="center" gap="6">
@@ -364,7 +367,7 @@ onMounted(() => {
 										</Text>
 
 										<CopyButton size="11" :text="faucetAddress" />
-									</Flex>									
+									</Flex>
 								</Flex>
 							</Flex>
 
@@ -372,11 +375,12 @@ onMounted(() => {
 								<Flex direction="column" align="end" gap="6" :class="$style.metadata" wide>
 									<Flex align="center" gap="6">
 										<Text size="14" weight="500" color="secondary">
-											{{ account?.hash
-												? $getDisplayName("addresses", "", account) === splitAddress(account?.hash)
-													? 'Address'
-													: $getDisplayName("addresses", "", account)
-												: 'Address'
+											{{
+												account?.hash
+													? $getDisplayName("addresses", "", account) === splitAddress(account?.hash)
+														? "Address"
+														: $getDisplayName("addresses", "", account)
+													: "Address"
 											}}
 										</Text>
 
@@ -386,9 +390,10 @@ onMounted(() => {
 									</Flex>
 
 									<Text size="12" weight="500" color="tertiary">
-										{{ (account?.hash || (address && validation.type !== 'error'))
-											? splitAddress(account?.hash || address)
-											: 'celestia ••• celestia'
+										{{
+											account?.hash || (address && validation.type !== "error")
+												? splitAddress(account?.hash || address)
+												: "celestia ••• celestia"
 										}}
 									</Text>
 								</Flex>
@@ -409,8 +414,19 @@ onMounted(() => {
 						</Flex>
 					</Flex>
 
-					<Flex v-if="executionResult?.status" align="center" justify="end" gap="6" wide :style="{padding: '0 8px', opacity: '0.7'}">
-						<a v-if="executionResult.status === 'success'" :href="`https://${network}.celenium.io/tx/${executionResult.message}`" target="_blank">
+					<Flex
+						v-if="executionResult?.status"
+						align="center"
+						justify="end"
+						gap="6"
+						wide
+						:style="{ padding: '0 8px', opacity: '0.7' }"
+					>
+						<a
+							v-if="executionResult.status === 'success'"
+							:href="`https://${network}.celenium.io/tx/${executionResult.message}`"
+							target="_blank"
+						>
 							<Flex align="center" gap="4">
 								<Text size="12" color="green">View Tx</Text>
 								<Icon name="arrow-narrow-up-right" size="12" color="green" />
@@ -434,7 +450,7 @@ onMounted(() => {
 					</Text>
 				</Flex>
 			</Flex>
-			
+
 			<Flex direction="column" gap="20" :class="$style.qa_wrapper">
 				<Text size="20" weight="500" color="primary" :class="$style.title">Frequently asked questions</Text>
 
@@ -449,14 +465,16 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 1 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="1" :class="[$style.answer, openedQuestion === 1 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								The Celestia testnet faucet is a service that provides free testnet tokens for developers and users who want to interact with the Celestia blockchain without spending real assets. These tokens have no monetary value and are solely for testing purposes.
+								The Celestia testnet faucet is a service that provides free testnet tokens for developers and users who want
+								to interact with the Celestia blockchain without spending real assets. These tokens have no monetary value
+								and are solely for testing purposes.
 							</Text>
 						</Flex>
 
@@ -469,14 +487,18 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 2 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="2" :class="[$style.answer, openedQuestion === 2 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								{{ `You can request testnet tokens by entering your Celestia testnet address, and clicking the "Receive ${network === 'mammoth' ? 100 : 1} TIA" button. Tokens will be sent to your wallet within a few moments.` }}
+								{{
+									`You can request testnet tokens by entering your Celestia testnet address, and clicking the "Receive ${
+										network === "mammoth" ? 100 : 1
+									} TIA" button. Tokens will be sent to your wallet within a few moments.`
+								}}
 							</Text>
 						</Flex>
 
@@ -489,16 +511,18 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 3 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="3" :class="[$style.answer, openedQuestion === 3 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								To ensure fair distribution and prevent abuse, the faucet has the following limitations:<br>
-								&nbsp;&nbsp;• You can receive <b>100 TIA for Mammoth network and 1 TIA for other testnets per request</b>.<br>
-								&nbsp;&nbsp;• You can request tokens <b>only once per hour</b> per <b>IP address or wallet address</b>.<br>
+								To ensure fair distribution and prevent abuse, the faucet has the following limitations:<br />
+								&nbsp;&nbsp;• You can receive
+								<b>100 TIA for Mammoth network and 1 TIA for other testnets per request</b>.<br />
+								&nbsp;&nbsp;• You can request tokens <b>only once per hour</b> per
+								<b>IP address or wallet address</b>.<br />
 								&nbsp;&nbsp;• If you reach the limit, you will need to wait before requesting again.
 							</Text>
 						</Flex>
@@ -512,16 +536,16 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 4 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="4" :class="[$style.answer, openedQuestion === 4 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								If you haven't received your tokens:<br>
-								&nbsp;&nbsp;• Double-check that you entered <b>the correct Celestia address</b>.<br>
-								&nbsp;&nbsp;• Ensure you are using <b>one of supported networks</b>.<br>
+								If you haven't received your tokens:<br />
+								&nbsp;&nbsp;• Double-check that you entered <b>the correct Celestia address</b>.<br />
+								&nbsp;&nbsp;• Ensure you are using <b>one of supported networks</b>.<br />
 								&nbsp;&nbsp;• If the issue persists, contact support.
 							</Text>
 						</Flex>
@@ -535,14 +559,15 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 5 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="5" :class="[$style.answer, openedQuestion === 5 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								No, testnet tokens are only for testing on the Celestia testnets. They cannot be transferred or used on the Celestia mainnet.
+								No, testnet tokens are only for testing on the Celestia testnets. They cannot be transferred or used on the
+								Celestia mainnet.
 							</Text>
 						</Flex>
 
@@ -555,14 +580,15 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 6 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="6" :class="[$style.answer, openedQuestion === 6 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								If you run out of testnet tokens, you can request more from the faucet (subject to request limits). You may also check community channels for alternative ways to obtain test tokens.
+								If you run out of testnet tokens, you can request more from the faucet (subject to request limits). You may
+								also check community channels for alternative ways to obtain test tokens.
 							</Text>
 						</Flex>
 
@@ -575,18 +601,17 @@ onMounted(() => {
 								color="tertiary"
 								:style="{
 									transform: `rotate(${openedQuestion === 7 ? '180deg' : '0deg'})`,
-									transition: 'all 0.2s ease'
+									transition: 'all 0.2s ease',
 								}"
 							/>
 						</Flex>
 
 						<Flex id="7" :class="[$style.answer, openedQuestion === 7 && $style.answer_extended]">
 							<Text size="13" weight="500" color="tertiary" height="160">
-								If you no longer need the testnet tokens, please return them to the faucet so that other developers and testers can use them. You can send them back to the
-								<a @click="handleReturnTokensClick" :class="$style.return_tokens">
-									faucet
-								</a>
-								.<br>
+								If you no longer need the testnet tokens, please return them to the faucet so that other developers and
+								testers can use them. You can send them back to the
+								<a @click="handleReturnTokensClick" :class="$style.return_tokens"> faucet </a>
+								.<br />
 								Your contribution helps keep the testnet accessible for everyone!
 							</Text>
 						</Flex>
@@ -731,7 +756,7 @@ onMounted(() => {
 		padding-left: 5px;
 		padding-right: 5px;
 		font-size: small;
-		font-family: 'Courier New', Courier, monospace;
+		font-family: "Courier New", Courier, monospace;
 		background-color: #2d2d2d;
 		border-radius: 4px;
 	}
diff --git a/pages/gas.vue b/pages/gas.vue
index d8ba2341..39cdb6bc 100644
--- a/pages/gas.vue
+++ b/pages/gas.vue
@@ -10,7 +10,7 @@ import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const route = useRoute()
diff --git a/pages/index.vue b/pages/index.vue
index 6003a730..75597da5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,7 +9,7 @@ import BlocksTimelineTable from "@/components/data/BlocksTimeline/BlocksTimeline
 import { parseRedirectQueryError } from "@/services/notifications"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 const route = useRoute()
@@ -83,10 +83,10 @@ onBeforeMount(async () => {
 		<Widgets :class="$style.widgets" />
 
 		<Flex direction="column" gap="40" :class="$style.main">
-			<Flex gap="20" :class="$style.small_tables">
+			<div :class="$style.tables">
 				<RecentNamespacesTable />
 				<LatestPFBTable />
-			</Flex>
+			</div>
 
 			<BlocksTimelineTable v-if="appStore.lastHead && appStore.latestBlocks.length" />
 		</Flex>
@@ -109,20 +109,17 @@ onBeforeMount(async () => {
 	margin-top: 40px;
 }
 
-.small_tables {
+.tables {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(486px, 1fr));
+	gap: 20px;
+
 	max-width: 100%;
 }
 
-/* 
-@media (max-width: 1100px) {
-	.widgets {
-		display: none;
-	}
-} */
-
 @media (max-width: 1024px) {
-	.small_tables {
-		flex-direction: column;
+	.tables {
+		grid-template-columns: 100%;
 	}
 }
 
diff --git a/pages/namespace/[id].vue b/pages/namespace/[id].vue
index 4109a2ea..2e9aac86 100644
--- a/pages/namespace/[id].vue
+++ b/pages/namespace/[id].vue
@@ -10,7 +10,7 @@ import { getNamespaceID } from "@/services/utils"
 import { fetchNamespaceByID } from "@/services/api/namespace"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
@@ -33,7 +33,7 @@ defineOgImageComponent("NamespaceImage", {
 })
 
 useHead({
-	title: `Namespace ${getNamespaceID(namespace.value?.namespace_id)} - Celestia Explorer`,
+	title: `Namespace ${getNamespaceID(namespace.value?.namespace_id)} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -47,7 +47,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Namespace ${getNamespaceID(namespace.value?.namespace_id)} - Celestia Explorer`,
+			content: `Namespace ${getNamespaceID(namespace.value?.namespace_id)} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -59,7 +59,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Namespace ${getNamespaceID(namespace.value?.namespace_id)} - Celestia Explorer`,
+			content: `Namespace ${getNamespaceID(namespace.value?.namespace_id)} - Celenium`,
 		},
 		{
 			name: "twitter:description",
@@ -75,12 +75,6 @@ useHead({
 onBeforeRouteLeave(() => {
 	cacheStore.current.namespace = null
 })
-
-const displayName = computed(() => {
-	const { $getDisplayName } = useNuxtApp()
-
-	return $getDisplayName("namespace", namespace.value.namespace_id)
-})
 </script>
 
 <template>
@@ -91,7 +85,7 @@ const displayName = computed(() => {
 				:items="[
 					{ link: '/', name: 'Explore' },
 					{ link: '/namespaces', name: 'Namespaces' },
-					{ link: route.fullPath, name: `${displayName}` },
+					{ link: route.fullPath, name: `${getNamespaceID(namespace.namespace_id)}` },
 				]"
 			/>
 
diff --git a/pages/namespaces/index.vue b/pages/namespaces/index.vue
index bbb6b32b..ae8169c4 100644
--- a/pages/namespaces/index.vue
+++ b/pages/namespaces/index.vue
@@ -13,7 +13,7 @@ import { space, formatBytes, comma, getNamespaceID } from "@/services/utils"
 import { fetchNamespaces } from "@/services/api/namespace"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 useHead({
@@ -27,7 +27,7 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Namespaces in the Celestia Blockchain. Namespace ID, size, version, pay for blobs are shown.",
+			content: "View all namespaces in the Celestia Blockchain. Namespace ID, size, version, pay for blobs are shown.",
 		},
 		{
 			property: "og:title",
@@ -35,7 +35,7 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Namespaces in the Celestia Blockchain. Namespace ID, size, version, pay for blobs are shown.",
+			content: "View all namespaces in the Celestia Blockchain. Namespace ID, size, version, pay for blobs are shown.",
 		},
 		{
 			property: "og:url",
@@ -51,7 +51,7 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Namespaces in the Celestia Blockchain. Namespace ID, size, version, pay for blobs are shown.",
+			content: "View all namespaces in the Celestia Blockchain. Namespace ID, size, version, pay for blobs are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -158,7 +158,7 @@ const handleLast = async () => {
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
 					<Icon name="namespace" size="16" color="secondary" />
-					<Text size="14" weight="600" color="primary">Namespaces</Text>
+					<Text as="h1" size="14" weight="600" color="primary">Namespaces</Text>
 				</Flex>
 
 				<Flex align="center" gap="6">
diff --git a/pages/rollup/[slug].vue b/pages/rollup/[slug].vue
index 02ac6240..878c37c0 100644
--- a/pages/rollup/[slug].vue
+++ b/pages/rollup/[slug].vue
@@ -10,7 +10,7 @@ import { fetchRollupBySlug } from "@/services/api/rollup"
 import Button from "@/components/ui/Button.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
@@ -33,7 +33,7 @@ defineOgImageComponent("RollupImage", {
 })
 
 useHead({
-	title: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+	title: `Rollup ${rollup.value?.name} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -47,7 +47,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+			content: `Rollup ${rollup.value?.name} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -59,7 +59,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+			content: `Rollup ${rollup.value?.name} - Celenium`,
 		},
 		{
 			name: "twitter:description",
diff --git a/pages/rollup/rank/[slug].vue b/pages/rollup/rank/[slug].vue
index 17f54dfa..1a23ccca 100644
--- a/pages/rollup/rank/[slug].vue
+++ b/pages/rollup/rank/[slug].vue
@@ -15,12 +15,12 @@ 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"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useActivityStore } from "@/store/activity.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
-const rollupRankingStore = useRollupsRankingStore()
+const activityStore = useActivityStore()
 
 const route = useRoute()
 const router = useRouter()
@@ -50,9 +50,9 @@ 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
+	if (!activityStore?.initialized) return null
 
-	const rollupRaw = rollupRankingStore?.rollups_ranking?.ranking?.[route.params.slug]
+	const rollupRaw = activityStore?.rollups_ranking?.ranking?.[route.params.slug]
 	if (!rollupRaw) return null
 
 	const rawRanking = rollupRaw.ranking
@@ -92,12 +92,12 @@ const rollupRanking = computed(() => {
 			description[0].text += "."
 		}
 	}
-	
+
 	return {
 		...rollupRaw,
 		ranking,
 		description,
-		updated: rollupRankingStore?.rollups_ranking?.last_update,
+		updated: activityStore?.rollups_ranking?.last_update,
 	}
 })
 const getMetricDescription = (metric) => {
@@ -123,10 +123,8 @@ const getRollupRepos = async (slug) => {
 		slug: slug,
 		limit: limit,
 		offset: (page.value - 1) * limit,
-		// sort: sort.dir,
-		// sort_by: sort.by,
 	})
-	
+
 	return data
 }
 const fetchData = async () => {
@@ -156,7 +154,7 @@ defineOgImageComponent("RollupImage", {
 })
 
 useHead({
-	title: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+	title: `Rollup ${rollup.value?.name} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -170,7 +168,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+			content: `Rollup ${rollup.value?.name} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -182,7 +180,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Rollup ${rollup.value?.name} - Celestia Explorer`,
+			content: `Rollup ${rollup.value?.name} - Celenium`,
 		},
 		{
 			name: "twitter:description",
@@ -199,19 +197,19 @@ 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))
-	
+	const MAX_VALUE = d3.max(data?.map((d) => d.amount))
+
 	/** Scales */
 	const x = d3.scaleUtc(
-		d3.extent(data, (d => new Date(d.time))),
+		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))
+		.x((d) => x(new Date(d.time)))
+		.y((d) => y(d.amount))
 		.curve(d3.curveCatmullRom)
 
 	/** SVG Container */
@@ -226,7 +224,8 @@ const buildChart = (chart, data) => {
 		.style("-webkit-tap-highlight-color", "transparent")
 
 	/** Chart Lines */
-	const cPath = svg.append("path")
+	const cPath = svg
+		.append("path")
 		.attr("fill", "none")
 		.attr("stroke", "var(--brand)")
 		.attr("stroke-width", 2)
@@ -237,14 +236,15 @@ const buildChart = (chart, data) => {
 	if (chart.children[0]) chart.children[0].remove()
 	chart.append(svg.node())
 
-	const cTotalLength = cPath.node().getTotalLength();
+	const cTotalLength = cPath.node().getTotalLength()
 
-	cPath.attr("stroke-dasharray", `${cTotalLength} ${cTotalLength}`)
+	cPath
+		.attr("stroke-dasharray", `${cTotalLength} ${cTotalLength}`)
 		.attr("stroke-dashoffset", cTotalLength)
 		.transition()
 		.duration(1_000)
 		.ease(d3.easeLinear)
-		.attr("stroke-dashoffset", 0);
+		.attr("stroke-dashoffset", 0)
 }
 
 const handleHowItWorksClick = () => {
@@ -269,7 +269,7 @@ onMounted(() => {
 
 <template>
 	<Flex direction="column" gap="32" wide :class="$style.wrapper">
-		<Flex v-if="rollup"  direction="column" gap="16">
+		<Flex v-if="rollup" direction="column" gap="16">
 			<Flex justify="between" :class="$style.breadcrumbs">
 				<Breadcrumbs
 					:items="[
@@ -294,7 +294,9 @@ onMounted(() => {
 								</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>
+									<Text size="12" color="tertiary" :style="{ lineHeight: '1.2' }">
+										{{ org?.description || rollup?.description }}
+									</Text>
 								</Flex>
 							</Flex>
 
@@ -314,7 +316,7 @@ onMounted(() => {
 							</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>
+									<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>
@@ -343,7 +345,12 @@ onMounted(() => {
 										<Text size="12" weight="600" color="primary">Page {{ page }} </Text>
 									</Button>
 
-									<Button @click="handleNext" type="secondary" size="mini" :disabled="page === pages || repos?.length === 0">
+									<Button
+										@click="handleNext"
+										type="secondary"
+										size="mini"
+										:disabled="page === pages || repos?.length === 0"
+									>
 										<Icon name="arrow-right" size="12" color="primary" />
 									</Button>
 								</Flex>
@@ -368,7 +375,9 @@ onMounted(() => {
 														<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>
+															<Text size="12" weight="600" color="tertiary" :class="$style.description">
+																{{ r.description || "No description" }}
+															</Text>
 														</Flex>
 													</NuxtLink>
 												</td>
@@ -385,12 +394,22 @@ onMounted(() => {
 															<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>
+																<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>
+																<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>
@@ -400,7 +419,12 @@ onMounted(() => {
 														<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" }) }}
+																{{
+																	DateTime.fromISO(r.last_pushed_at).toRelative({
+																		locale: "en",
+																		style: "short",
+																	})
+																}}
 															</Text>
 														</Flex>
 													</NuxtLink>
@@ -427,19 +451,34 @@ onMounted(() => {
 							<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
+										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 v-if="rollupRanking?.description.length" size="13" color="primary" weight="600" :style="{ lineHeight: '1.4' }">
+							<Text
+								v-if="rollupRanking?.description.length"
+								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() + ' ' }}
+										{{ d.category.name.toLowerCase() + " " }}
 									</Text>
 									<Text weight="500" color="secondary"> {{ d.text }} </Text>
 								</span>
@@ -456,7 +495,9 @@ onMounted(() => {
 								<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 color="secondary" weight="600">
+										{{ DateTime.fromMillis(rollupRanking?.updated).toRelative({ locale: "en", style: "short" }) }}
+									</Text>
 								</Text>
 							</Flex>
 
@@ -638,7 +679,7 @@ onMounted(() => {
 			&:first-child {
 				padding: 0 24px 0 16px;
 				/* width: 300px; */
-				
+
 				/* span {
 					&:last-child {
 						width: 300px;
@@ -671,8 +712,8 @@ onMounted(() => {
 }
 
 .summary_rate {
-    color: transparent;
-    background-clip: text;
+	color: transparent;
+	background-clip: text;
 }
 .legendary {
 	background-image: linear-gradient(var(--light-orange), var(--legendary));
diff --git a/pages/rollups/index.vue b/pages/rollups/index.vue
index 3052c314..0180d355 100644
--- a/pages/rollups/index.vue
+++ b/pages/rollups/index.vue
@@ -5,26 +5,35 @@ 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"
+import DiffChip from "@/components/modules/stats/DiffChip.vue"
 
 /** Services */
-import { capitalizeAndReplace, capitilize, comma, formatBytes, isMainnet, roundTo, sortArrayOfObjects, truncateDecimalPart } from "@/services/utils"
+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"
+import { useEnumStore } from "@/store/enums.store"
+import { useActivityStore } from "@/store/activity.store"
 const enumStore = useEnumStore()
-const rollupRankingStore = useRollupsRankingStore()
+const activityStore = useActivityStore()
 
 useHead({
 	title: "Rollups - Celestia Explorer",
@@ -37,7 +46,8 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+			content:
+				"View all rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
 		},
 		{
 			property: "og:title",
@@ -45,7 +55,8 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+			content:
+				"View all rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
 		},
 		{
 			property: "og:url",
@@ -61,7 +72,8 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
+			content:
+				"View all rollups in the Celestia Blockchain. Rollup name, description, size, blobs, social links, contacts are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -81,7 +93,7 @@ const isRefetching = ref(true)
 const rollups = ref([])
 const filteredRollups = ref([])
 const processedRollups = ref([])
-const rollupsRanking = computed(() => rollupRankingStore?.rollups_ranking?.ranking)
+const rollupsRanking = computed(() => activityStore?.rollups_ranking?.ranking)
 
 const utiaPerMB = (rollup) => {
 	let totalRollupMB = rollup.size / (1024 * 1024)
@@ -94,13 +106,12 @@ const config = reactive({
 	columns: {
 		...(isMainnet()
 			? {
-				activity: {
+					activity: {
 						show: true,
 						sortPath: "stats.ranking.rank",
-					}
-			}
-			: {}
-		),
+					},
+			  }
+			: {}),
 		da_change: {
 			show: false,
 		},
@@ -125,13 +136,12 @@ const config = reactive({
 		},
 		...(isMainnet()
 			? {
-				commits: {
-					show: false,
-					sortPath: "stats.commits_weekly",
-				},
-			}
-			: {}
-		),
+					commits: {
+						show: false,
+						sortPath: "stats.commits_weekly",
+					},
+			  }
+			: {}),
 		avg_pfb_size: {
 			show: false,
 			sortPath: "stats.avg_pfb_size",
@@ -154,7 +164,7 @@ const getColumnName = (name) => {
 		case "avg_pfb_size":
 			return "Avg PFB Size"
 		default:
-			return capitalizeAndReplace(name, '_')
+			return capitalizeAndReplace(name, "_")
 	}
 }
 
@@ -168,23 +178,23 @@ const categories = computed(() => {
 	if (enumStore.enums.rollupCategories.length) {
 		res = enumStore.enums.rollupCategories
 	}
-	
-	return res	
+
+	return res
 })
 const types = computed(() => {
 	let res = []
 	if (enumStore.enums.rollupTypes.length) {
 		res = enumStore.enums.rollupTypes
 	}
-	
-	return res	
+
+	return res
 })
 const tags = computed(() => {
 	let res = []
 	if (enumStore.enums?.rollupTags?.length) {
 		res = enumStore.enums.rollupTags
 	}
-	
+
 	return res
 })
 
@@ -192,11 +202,11 @@ const providers = ref([])
 const stacks = ref([])
 const getDisplayName = (name) => {
 	switch (name) {
-		case 'nft':
-			return 'NFT'
+		case "nft":
+			return "NFT"
 
-		case 'uncategorized':
-			return 'Other'
+		case "uncategorized":
+			return "Other"
 
 		default:
 			return capitilize(name)
@@ -206,22 +216,16 @@ 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',
+	categories: "category",
+	types: "type",
+	tags: "tag",
 }
 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) => {
@@ -233,7 +237,7 @@ const handleOpenPopover = (name) => {
 }
 const onPopoverClose = (name) => {
 	popovers[name] = false
-	
+
 	if (savedFiltersBeforeChanges.value) {
 		filters[name] = savedFiltersBeforeChanges.value
 		savedFiltersBeforeChanges.value = null
@@ -279,21 +283,17 @@ 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 => ({
+		? 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))
-			}))
+				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
@@ -304,38 +304,40 @@ 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 }))
+		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))
+	processedRollups.value = filteredRollups.value.slice(
+		(page.value - 1) * itemsPerPage,
+		Math.min(page.value * itemsPerPage, rollups.value?.length),
+	)
 
 	isRefetching.value = false
 }
-if (rollupRankingStore.initialized) {
+if (activityStore.initialized) {
 	await getRollups()
 	processRollups()
 }
 
 const handleSort = (by) => {
 	if (!by) return
-	
+
 	switch (sort.dir) {
 		case "desc":
 			if (sort.by == by) sort.dir = "asc"
@@ -369,19 +371,19 @@ 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(
@@ -392,9 +394,9 @@ watch(
 	},
 )
 watch(
-	() => rollupRankingStore.initialized,
+	() => activityStore.initialized,
 	async () => {
-		if (rollupRankingStore.initialized) {
+		if (activityStore.initialized) {
 			await getRollups()
 			processRollups()
 		}
@@ -436,7 +438,7 @@ onBeforeMount(() => {
 			<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>
+					<Text as="h1" size="14" weight="600" color="primary">Rollups Leaderboard</Text>
 				</Flex>
 
 				<!-- Pagination -->
@@ -460,12 +462,7 @@ onBeforeMount(() => {
 
 			<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"
-					>
+					<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>
@@ -474,16 +471,19 @@ onBeforeMount(() => {
 								<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`
+									{{
+										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>
 
@@ -496,10 +496,7 @@ onBeforeMount(() => {
 								<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]"
-									>
+									<Checkbox v-for="item in Object.keys(filters[p])" v-model="filters[p][item]">
 										<Text size="12" weight="500" color="primary">
 											{{ getDisplayName(item) }}
 										</Text>
@@ -591,7 +588,7 @@ onBeforeMount(() => {
 													<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 }}
@@ -623,10 +620,7 @@ onBeforeMount(() => {
 								<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"
-											/>
+											<DiffChip :value="r.da_pct.toFixed(2)" tooltip="Difference between current and previous week" />
 										</Flex>
 									</NuxtLink>
 								</td>
@@ -637,14 +631,18 @@ onBeforeMount(() => {
 												<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>
+													<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>
+														<Text size="12" weight="600" color="primary"
+															>{{ truncateDecimalPart(r?.size_pct * 100, 2) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
@@ -658,14 +656,18 @@ onBeforeMount(() => {
 												<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>
+													<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>
+														<Text size="12" weight="600" color="primary"
+															>{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
@@ -678,13 +680,17 @@ onBeforeMount(() => {
 											<AmountInCurrency :amount="{ value: r.fee }" />
 
 											<Tooltip position="start" delay="400">
-												<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
+												<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>
+														<Text size="12" weight="600" color="primary"
+															>{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
@@ -710,14 +716,18 @@ onBeforeMount(() => {
 										<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>
+													<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>
+														<Text size="12" weight="600" color="primary"
+															>{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text
+														>
 													</Flex>
 												</template>
 											</Tooltip>
@@ -734,7 +744,11 @@ onBeforeMount(() => {
 								<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))" />
+											<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>
@@ -889,9 +903,9 @@ onBeforeMount(() => {
 }
 
 .avatar_wrapper {
-  position: relative;
-  width: 25px;
-  height: 25px;
+	position: relative;
+	width: 25px;
+	height: 25px;
 }
 
 .avatar_container {
diff --git a/pages/stats/[metric].vue b/pages/stats/[metric].vue
index dc2c70ea..84a4f2ec 100644
--- a/pages/stats/[metric].vue
+++ b/pages/stats/[metric].vue
@@ -22,13 +22,12 @@ import { fetchSeries, fetchRollupsSeries, fetchSeriesCumulative, fetchTVS } from
 import Button from "@/components/ui/Button.vue"
 import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
 import Popover from "@/components/ui/Popover.vue"
-import Toggle from "@/components/ui/Toggle.vue"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
-import { useModalsStore } from "@/store/modals"
-import { useNotificationsStore } from "@/store/notifications"
-import { useSettingsStore } from "@/store/settings"
+import { useCacheStore } from "@/store/cache.store"
+import { useModalsStore } from "@/store/modals.store"
+import { useNotificationsStore } from "@/store/notifications.store"
+import { useSettingsStore } from "@/store/settings.store"
 const cacheStore = useCacheStore()
 const modalsStore = useModalsStore()
 const notificationsStore = useNotificationsStore()
@@ -38,20 +37,20 @@ const route = useRoute()
 const router = useRouter()
 
 const series = ref(getSeriesByPage(route.params.metric, route.query.aggregate))
-const metricName = ref('')
+const metricName = ref("")
 if (!series.value?.page) {
 	router.push("/stats")
 } else {
 	switch (series.value?.page) {
 		case "tvs":
 			metricName.value = series.value?.title
-			break;
+			break
 		case "rollups":
 			metricName.value = "Rollup Distribution"
-			break;
+			break
 		default:
 			metricName.value = capitalizeAndReplace(series.value?.page, "_")
-			break;
+			break
 	}
 }
 
@@ -110,7 +109,7 @@ const timeframes = computed(() => {
 	let res = [...STATS_TIMEFRAMES]
 
 	if (series.value?.name === "tvs") {
-		res = res.filter(tf => tf.timeframe === "day" || tf.timeframe === "month")
+		res = res.filter((tf) => tf.timeframe === "day" || tf.timeframe === "month")
 	}
 
 	return res
@@ -156,24 +155,24 @@ const handleRollupSettingsSelect = async (setting, value) => {
 			switch (value) {
 				case "fee":
 					series.value.units = "utia"
-					break;
+					break
 				case "size":
 					series.value.units = "bytes"
-					break;
+					break
 				default:
 					series.value.units = ""
-					break;
+					break
 			}
-			break;
+			break
 		case "top":
 			series.value.itemsCount = value
-			break;
+			break
 		case "period":
 			series.value.timeframe = value
 			await getData()
-			break;
+			break
 		default:
-			break;
+			break
 	}
 }
 
@@ -230,24 +229,16 @@ const fetchData = async () => {
 			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",
-		}))
+		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({
 			table: series.value.name,
 			period: selectedTimeframe.value.timeframe,
-			from: selectedTimeframe.value.timeframe === "hour"
-				? parseInt(to.minus({ days: 7 }).ts / 1_000)
-				: null,
-			to: selectedTimeframe.value.timeframe === "hour"
-				? parseInt(to.ts / 1_000)
-				: null,
+			from: selectedTimeframe.value.timeframe === "hour" ? parseInt(to.minus({ days: 7 }).ts / 1_000) : null,
+			to: selectedTimeframe.value.timeframe === "hour" ? parseInt(to.ts / 1_000) : null,
 		})
 	} else {
 		data = (
@@ -273,8 +264,8 @@ const getData = async (fetch = true) => {
 	if (fetch) {
 		await fetchData()
 	}
-	
-	if (series.value.page !== "rollups"){
+
+	if (series.value.page !== "rollups") {
 		data = allData.value
 
 		if (data.length > 0 && !filters.from && !filters.to) {
@@ -299,20 +290,20 @@ const getData = async (fetch = true) => {
 		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)
-			}))
+
+		series.value.data = data.map((d) => ({
+			...d,
+			items: d.items.map((item) => ({
+				...item,
+				fee: parseFloat(item.fee),
+			})),
 		}))
 	}
 
 	isLoading.value = false
 }
 
-if (series.value.name !== 'square_size') {
+if (series.value.name !== "square_size") {
 	await getData()
 }
 
@@ -332,7 +323,6 @@ const handleDatePickerUpdate = async (event) => {
 
 const handleTimelineUpdate = async (event) => {
 	await handleUpdateDate(event)
-	// selectedPeriod.value = {}
 }
 
 const handleUpdateDate = async (event) => {
@@ -354,9 +344,9 @@ const handleUpdateDate = async (event) => {
 
 		filters.from = from
 		filters.to = to
-		
-		if (event.source !== 'timeline') {
-			if (Math.abs(DateTime.fromSeconds(from).diff(DateTime.fromSeconds(to), 'days').days) < 8) {
+
+		if (event.source !== "timeline") {
+			if (Math.abs(DateTime.fromSeconds(from).diff(DateTime.fromSeconds(to), "days").days) < 8) {
 				selectedTimeframe.value = STATS_TIMEFRAMES.find((tf) => tf.timeframe === "hour")
 			}
 
@@ -383,8 +373,8 @@ const handleCSVDownload = async () => {
 		data = [...series.value.data]
 		csvHeaders = "timestamp,rollup,value\n"
 		let csvData = []
-		data.forEach(d => {
-			d.items.forEach(item => {
+		data.forEach((d) => {
+			d.items.forEach((item) => {
 				csvData.push(`${DateTime.fromISO(d.time).ts},${item.name},${item[rollupsSetting.value[0].selected]}`)
 			})
 		})
@@ -392,7 +382,7 @@ const handleCSVDownload = async () => {
 	} else {
 		data = [...series.value.currentData]
 		csvHeaders = "timestamp,value\n"
-		csvRow = data.map(d => `${DateTime.fromJSDate(d.date).ts},${d.value}`).join("\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}`)
@@ -456,7 +446,7 @@ watch(
 				aggregate: rollupsSetting.value[0].selected,
 			},
 		})
-	}
+	},
 )
 
 onBeforeMount(() => {
@@ -509,7 +499,9 @@ onBeforeMount(() => {
 											gap="12"
 											:class="$style.chart_selector"
 											:style="{
-												background: `linear-gradient(to ${chartView === 'line' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
+												background: `linear-gradient(to ${
+													chartView === 'line' ? 'right' : 'left'
+												}, var(--op-5) 50%, transparent 50%)`,
 											}"
 										>
 											<Icon
@@ -529,12 +521,7 @@ onBeforeMount(() => {
 									<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"
-										>
+										<Flex align="center" gap="12" :class="$style.groupping_selector" :style="timeframesStyles">
 											<Text
 												v-for="tf in timeframes"
 												@click="handleTimeframeUpdate(tf)"
@@ -556,16 +543,20 @@ onBeforeMount(() => {
 							<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>
+									<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'}">
+								<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('_', ' ')) }}
+											{{ capitilize(item.replace("_", " ")) }}
 										</Flex>
 									</Flex>
 								</DropdownItem>
@@ -573,7 +564,6 @@ onBeforeMount(() => {
 						</Dropdown>
 					</Flex>
 
-
 					<Button @click="handleOpenChartModal" type="secondary" size="mini">
 						<Icon name="expand" size="12" color="tertiary" />
 					</Button>
@@ -609,7 +599,7 @@ onBeforeMount(() => {
 			:chartView="chartView"
 			:from="filters.from"
 			:to="filters.to"
-			:selectedTimeframe="selectedTimeframe" 
+			:selectedTimeframe="selectedTimeframe"
 			@onUpdate="handleTimelineUpdate"
 		/>
 	</Flex>
@@ -657,7 +647,7 @@ onBeforeMount(() => {
 		flex-direction: column;
 		align-items: start;
 		gap: 12px;
-		
+
 		& .settings {
 			width: 100%;
 			justify-content: end;
diff --git a/pages/stats/index.vue b/pages/stats/index.vue
index 20e00bf3..dac9f7bb 100644
--- a/pages/stats/index.vue
+++ b/pages/stats/index.vue
@@ -9,7 +9,7 @@ import EcosystemTab from "@/components/modules/stats/tabs/EcosystemTab.vue"
 import RollupsTab from "@/components/modules/stats/tabs/RollupsTab.vue"
 
 /** Services */
-import { capitilize, isMainnet } from "@/services/utils"
+import { capitilize } from "@/services/utils"
 
 useHead({
 	title: "Statistics - Celestia Explorer",
@@ -80,7 +80,15 @@ const tabs = ref([
 		visible: isMainnet(),
 	},
 ])
-const activeTab = ref(route.query.tab && tabs.value.filter(t => t.visible).map(t => t.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name)
+const activeTab = ref(
+	route.query.tab &&
+		tabs.value
+			.filter((t) => t.visible)
+			.map((t) => t.name)
+			.includes(route.query.tab)
+		? route.query.tab
+		: tabs.value[0].name,
+)
 
 const updateRouteQuery = () => {
 	router.replace({
@@ -107,7 +115,7 @@ watch(
 	() => activeTab.value,
 	() => {
 		updateRouteQuery()
-	}
+	},
 )
 
 watch(
@@ -135,7 +143,13 @@ watch(
 
 		<Flex align="center" justify="between" wide :class="$style.tabs_wrapper">
 			<Flex align="center" gap="16">
-				<Text v-for="t in tabs.filter(t => t.visible)" @click="activeTab = t.name" size="14" color="tertiary" :class="[$style.tab, activeTab === t.name && $style.tab_active]">
+				<Text
+					v-for="t in tabs.filter((t) => t.visible)"
+					@click="activeTab = t.name"
+					size="14"
+					color="tertiary"
+					:class="[$style.tab, activeTab === t.name && $style.tab_active]"
+				>
 					{{ capitilize(t.name) }}
 				</Text>
 			</Flex>
@@ -175,7 +189,7 @@ watch(
 }
 
 .tabs_wrapper::after {
-	content: '';
+	content: "";
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -186,7 +200,7 @@ watch(
 
 .tab {
 	padding-bottom: 12px;
-	
+
 	cursor: pointer;
 }
 
diff --git a/pages/tx/[hash].vue b/pages/tx/[hash].vue
index fd162401..87ed6154 100644
--- a/pages/tx/[hash].vue
+++ b/pages/tx/[hash].vue
@@ -7,7 +7,7 @@ import BlobsTable from "@/components/modules/block/BlobsTable.vue"
 import { fetchTxByHash } from "@/services/api/tx"
 
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
@@ -29,7 +29,7 @@ defineOgImageComponent("TxImage", {
 })
 
 useHead({
-	title: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash.toUpperCase().slice(-4)} - Celestia Explorer`,
+	title: `Transaction ${tx.value?.hash.toUpperCase()} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -45,9 +45,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash
-				.toUpperCase()
-				.slice(-4)} - Celestia Explorer`,
+			content: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash.toUpperCase().slice(-4)} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -61,9 +59,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash
-				.toUpperCase()
-				.slice(-4)} - Celestia Explorer`,
+			content: `Transaction ${tx.value?.hash.toUpperCase().slice(0, 4)} ••• ${tx.value?.hash.toUpperCase().slice(-4)} - Celenium`,
 		},
 		{
 			name: "twitter:description",
@@ -80,7 +76,6 @@ useHead({
 
 const displayName = computed(() => {
 	const { $getDisplayName } = useNuxtApp()
-
 	return $getDisplayName("tx", tx.value?.hash)
 })
 </script>
diff --git a/pages/txs.vue b/pages/txs.vue
index 9523ef87..8ebc427c 100644
--- a/pages/txs.vue
+++ b/pages/txs.vue
@@ -22,7 +22,7 @@ import { getStartChainDate } from "@/services/config"
 import { fetchTransactions } from "@/services/api/tx"
 
 /** Stores */
-import { useEnumStore } from "@/store/enums"
+import { useEnumStore } from "@/store/enums.store"
 const enumStore = useEnumStore()
 
 useHead({
@@ -36,7 +36,8 @@ useHead({
 	meta: [
 		{
 			name: "description",
-			content: "Transactions in the Celestia Blockchain. Hash, messages, timestamp, block height, gas usage, events count are shown.",
+			content:
+				"View all transactions in the Celestia Blockchain. Hash, messages, timestamp, block height, gas usage, events count are shown.",
 		},
 		{
 			property: "og:title",
@@ -44,7 +45,8 @@ useHead({
 		},
 		{
 			property: "og:description",
-			content: "Transactions in the Celestia Blockchain. Hash, messages, timestamp, block height, gas usage, events count are shown.",
+			content:
+				"View all transactions in the Celestia Blockchain. Hash, messages, timestamp, block height, gas usage, events count are shown.",
 		},
 		{
 			property: "og:url",
@@ -60,7 +62,8 @@ useHead({
 		},
 		{
 			name: "twitter:description",
-			content: "Transactions in the Celestia Blockchain. Hash, messages, timestamp, block height, gas usage, events count are shown.",
+			content:
+				"View all transactions in the Celestia Blockchain. Hash, messages, timestamp, block height, gas usage, events count are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -283,7 +286,7 @@ const sort = reactive({
 	dir: "desc",
 })
 
-const page = ref(route.query.page ? parseInt(route.query.page) < 1 ? 1 : parseInt(route.query.page) : 1)
+const page = ref(route.query.page ? (parseInt(route.query.page) < 1 ? 1 : parseInt(route.query.page)) : 1)
 const limit = ref(20)
 const handleNextCondition = ref(false)
 
@@ -310,7 +313,7 @@ const getTransactions = async () => {
 		from: filters.from,
 		to: filters.to,
 	})
-	
+
 	transactions.value = data.value
 
 	handleNextCondition.value = transactions.value?.length < limit.value
@@ -336,7 +339,7 @@ watch(
 			} else {
 				resetFilters()
 			}
-			
+
 			await getTransactions()
 		}
 	},
@@ -360,7 +363,7 @@ watch(
 	() => msgTypes.value,
 	() => {
 		filters.message_type = msgTypes.value?.reduce((a, b) => ({ ...a, [b]: false }), {})
-	}
+	},
 )
 
 const handleSort = async (by) => {
@@ -412,7 +415,7 @@ const handleNext = () => {
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
 					<Icon name="tx" size="16" color="secondary" />
-					<Text size="14" weight="600" color="primary">Transactions</Text>
+					<Text as="h1" size="14" weight="600" color="primary">Transactions</Text>
 				</Flex>
 
 				<Flex align="center" gap="6">
@@ -707,7 +710,7 @@ const handleNext = () => {
 									<NuxtLink :to="`/tx/${tx.hash}`">
 										<Flex align="center">
 											<Text size="12" weight="600" color="primary" mono class="table_column_alias">
-												{{ $getDisplayName("addresses", "", tx.signers[0]) }}
+												{{ $getDisplayName("addresses", "", tx.signers ? tx.signers[0] : "") }}
 											</Text>
 										</Flex>
 									</NuxtLink>
diff --git a/pages/validator/[id].vue b/pages/validator/[id].vue
index 895a81bf..3a2927b3 100644
--- a/pages/validator/[id].vue
+++ b/pages/validator/[id].vue
@@ -5,11 +5,8 @@ import ValidatorOverview from "@/components/modules/validator/ValidatorOverview.
 /** API */
 import { fetchValidatorByID } from "@/services/api/validator"
 
-/** UI */
-import Button from "@/components/ui/Button.vue"
-
 /** Store */
-import { useCacheStore } from "@/store/cache"
+import { useCacheStore } from "@/store/cache.store"
 const cacheStore = useCacheStore()
 
 const route = useRoute()
@@ -32,7 +29,7 @@ defineOgImageComponent("ValidatorImage", {
 })
 
 useHead({
-	title: `Validator ${validator.value?.moniker} - Celestia Explorer`,
+	title: `Validator ${validator.value?.moniker} - Celenium`,
 	link: [
 		{
 			rel: "canonical",
@@ -46,7 +43,7 @@ useHead({
 		},
 		{
 			property: "og:title",
-			content: `Validator ${validator.value?.moniker} - Celestia Explorer`,
+			content: `Validator ${validator.value?.moniker} - Celenium`,
 		},
 		{
 			property: "og:description",
@@ -58,7 +55,7 @@ useHead({
 		},
 		{
 			name: "twitter:title",
-			content: `Validator ${validator.value?.moniker} - Celestia Explorer`,
+			content: `Validator ${validator.value?.moniker} - Celenium`,
 		},
 		{
 			name: "twitter:description",
@@ -81,7 +78,7 @@ useHead({
 					:items="[
 						{ link: '/', name: 'Explore' },
 						{ link: '/validators', name: 'Validators' },
-						{ link: route.fullPath, name: validator.moniker ? validator.moniker : validator.address },
+						{ link: route.fullPath, name: validator.address.hash },
 					]"
 				/>
 			</Flex>
diff --git a/pages/validators.vue b/pages/validators.vue
index 69f94c63..6935eb8d 100644
--- a/pages/validators.vue
+++ b/pages/validators.vue
@@ -12,7 +12,7 @@ import { capitilize, comma, numToPercent, shareOfTotalString, splitAddress } fro
 import { fetchValidators, fetchValidatorsCount } from "@/services/api/validator"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 const appStore = useAppStore()
 
 useHead({
@@ -27,7 +27,7 @@ useHead({
 		{
 			name: "description",
 			content:
-				"Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+				"View all validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
 		},
 		{
 			property: "og:title",
@@ -36,7 +36,7 @@ useHead({
 		{
 			property: "og:description",
 			content:
-				"Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+				"View all validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
 		},
 		{
 			property: "og:url",
@@ -53,7 +53,7 @@ useHead({
 		{
 			name: "twitter:description",
 			content:
-				"Validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
+				"View all validators in the Celestia Blockchain. Validators name, description, rates, blocks, uptime, social links, contacts are shown.",
 		},
 		{
 			name: "twitter:card",
@@ -211,7 +211,7 @@ onMounted(() => {
 			<Flex justify="between" :class="$style.header">
 				<Flex align="center" gap="8">
 					<Icon name="validator" size="16" color="secondary" />
-					<Text size="14" weight="600" color="primary">Validators</Text>
+					<Text as="h1" size="14" weight="600" color="primary">Validators</Text>
 				</Flex>
 
 				<Flex align="center" gap="6">
diff --git a/pages/widgets/rollups.vue b/pages/widgets/rollups.vue
index c415aa05..c18e6de6 100644
--- a/pages/widgets/rollups.vue
+++ b/pages/widgets/rollups.vue
@@ -13,7 +13,7 @@ import { formatBytes, comma, abbreviate, capitilize } from "@/services/utils"
 import { fetchRollups } from "@/services/api/rollup"
 
 /** Stores */
-import { useEnumStore } from "@/store/enums"
+import { useEnumStore } from "@/store/enums.store"
 const enumStore = useEnumStore()
 
 useHead({
@@ -84,20 +84,20 @@ const categories = computed(() => {
 	let res = []
 	if (enumStore.enums.rollupCategories.length) {
 		res = enumStore.enums.rollupCategories.slice(1)
-		res.push('other')
+		res.push("other")
 	}
-	
-	return res	
+
+	return res
 })
 const selectedCategories = ref([])
 
 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)
@@ -106,7 +106,7 @@ const getCategoryDisplayName = (category) => {
 
 const handleSelectCategory = (category) => {
 	if (selectedCategories.value.includes(category)) {
-		selectedCategories.value = selectedCategories.value.filter(c => c !== category)
+		selectedCategories.value = selectedCategories.value.filter((c) => c !== category)
 	} else {
 		selectedCategories.value.push(category)
 	}
@@ -120,7 +120,7 @@ const getRollups = async () => {
 	isLoading.value = true
 
 	const data = await fetchRollups({
-		categories: selectedCategories.value.map(c => c === 'other' ? 'uncategorized' : c).join(','),
+		categories: selectedCategories.value.map((c) => (c === "other" ? "uncategorized" : c)).join(","),
 		limit: limit.value,
 		offset: (page.value - 1) * limit.value,
 		sort: sort.dir,
@@ -129,7 +129,7 @@ const getRollups = async () => {
 
 	rollups.value = data
 
-	rollups.value?.forEach(r => {
+	rollups.value?.forEach((r) => {
 		r.size_graph = Math.max(Math.round(r.size_pct * 100, 2), 1)
 		r.blobs_count_graph = Math.max(Math.round(r.blobs_count_pct * 100, 2), 1)
 		r.fee_graph = Math.max(Math.round(r.fee_pct * 100, 2), 1)
@@ -170,7 +170,7 @@ const handleSort = async (by) => {
 }
 
 const handleOpenLink = (link) => {
-	window.open(link, '_blank')
+	window.open(link, "_blank")
 }
 
 const handlePrev = () => {
@@ -221,7 +221,7 @@ watch(
 		} else {
 			await getRollups()
 		}
-	}
+	},
 )
 </script>
 
@@ -242,7 +242,12 @@ watch(
 						<DropdownItem @click="handleSort('size')">
 							<Flex align="center" justify="between" gap="16" wide>
 								<Flex align="center" gap="8">
-									<Icon name="check" size="12" color="brand" :class="[sort.by === 'size' && $style.show, sort.by !== 'size' && $style.hide]" />
+									<Icon
+										name="check"
+										size="12"
+										color="brand"
+										:class="[sort.by === 'size' && $style.show, sort.by !== 'size' && $style.hide]"
+									/>
 
 									<Text size="12" color="primary">Size</Text>
 								</Flex>
@@ -254,7 +259,12 @@ watch(
 						<DropdownItem @click="handleSort('blobs_count')">
 							<Flex align="center" justify="between" gap="16" wide>
 								<Flex align="center" gap="8">
-									<Icon name="check" size="12" color="brand" :class="[sort.by === 'blobs_count' && $style.show, sort.by !== 'blobs_count' && $style.hide]" />
+									<Icon
+										name="check"
+										size="12"
+										color="brand"
+										:class="[sort.by === 'blobs_count' && $style.show, sort.by !== 'blobs_count' && $style.hide]"
+									/>
 
 									<Text size="12" color="primary">Blobs</Text>
 								</Flex>
@@ -266,7 +276,12 @@ watch(
 						<DropdownItem @click="handleSort('fee')">
 							<Flex align="center" justify="between" gap="16" wide>
 								<Flex align="center" gap="8">
-									<Icon name="check" size="12" color="brand" :class="[sort.by === 'fee' && $style.show, sort.by !== 'fee' && $style.hide]" />
+									<Icon
+										name="check"
+										size="12"
+										color="brand"
+										:class="[sort.by === 'fee' && $style.show, sort.by !== 'fee' && $style.hide]"
+									/>
 
 									<Text size="12" color="primary">Fee</Text>
 								</Flex>
@@ -286,14 +301,13 @@ watch(
 						<Text size="12" weight="600" color="primary">Page {{ page }}</Text>
 					</Button>
 
-
 					<Button @click="handleNext" type="secondary" size="mini" :disabled="rollups.length < limit">
 						<Icon name="arrow-right" size="12" color="primary" />
 					</Button>
 				</Flex>
 			</Flex>
 
-			<Flex align="center" justify="start" gap="6" wide :style="{flexWrap: 'wrap'}">
+			<Flex align="center" justify="start" gap="6" wide :style="{ flexWrap: 'wrap' }">
 				<Flex
 					v-if="categories.length"
 					v-for="c in categories"
@@ -307,12 +321,7 @@ watch(
 					</Flex>
 				</Flex>
 
-				<Skeleton
-					v-else
-					v-for="i in 3"
-					w="60"
-					h="22"
-				/>
+				<Skeleton v-else v-for="i in 3" w="60" h="22" />
 			</Flex>
 		</Flex>
 
@@ -334,12 +343,13 @@ watch(
 						<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)'
-											}`
+								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)'
+								}`,
 							}"
 						/>
 					</Flex>
@@ -373,21 +383,59 @@ watch(
 									<div :class="$style.dot" />
 
 									<Text size="13" weight="500" color="tertiary">Fee</Text>
-									<Text size="13" weight="600" color="primary">{{ `${abbreviate(Math.round(r.fee / 1_000_000))} TIA` }}</Text>
+									<Text size="13" weight="600" color="primary">{{
+										`${abbreviate(Math.round(r.fee / 1_000_000))} TIA`
+									}}</Text>
 								</Flex>
 
 								<Flex v-else align="center" gap="12">
-									<Icon v-if="r.website" @click.prevent.stop=handleOpenLink(r.website) name="globe" size="13" color="secondary" />
-
-									<Icon v-if="r.twitter" @click.prevent.stop=handleOpenLink(r.twitter) name="twitter" size="13" color="secondary" />
-
-									<Icon v-if="r.github" @click.prevent.stop=handleOpenLink(r.github) name="github" size="13" color="secondary" />
-
-									<Icon v-if="r.defi_lama" @click.prevent.stop="handleOpenLink(`https://defillama.com/chain/${r.defi_lama}`)" name="lama" size="13" color="secondary" />
-
-									<Icon v-if="r.l2_beat" @click.prevent.stop=handleOpenLink(r.l2_beat) name="l2beat" size="13" color="secondary" />
-
-									<Icon v-if="r.explorer" @click.prevent.stop=handleOpenLink(r.explorer) name="search" size="13" color="secondary" />
+									<Icon
+										v-if="r.website"
+										@click.prevent.stop="handleOpenLink(r.website)"
+										name="globe"
+										size="13"
+										color="secondary"
+									/>
+
+									<Icon
+										v-if="r.twitter"
+										@click.prevent.stop="handleOpenLink(r.twitter)"
+										name="twitter"
+										size="13"
+										color="secondary"
+									/>
+
+									<Icon
+										v-if="r.github"
+										@click.prevent.stop="handleOpenLink(r.github)"
+										name="github"
+										size="13"
+										color="secondary"
+									/>
+
+									<Icon
+										v-if="r.defi_lama"
+										@click.prevent.stop="handleOpenLink(`https://defillama.com/chain/${r.defi_lama}`)"
+										name="lama"
+										size="13"
+										color="secondary"
+									/>
+
+									<Icon
+										v-if="r.l2_beat"
+										@click.prevent.stop="handleOpenLink(r.l2_beat)"
+										name="l2beat"
+										size="13"
+										color="secondary"
+									/>
+
+									<Icon
+										v-if="r.explorer"
+										@click.prevent.stop="handleOpenLink(r.explorer)"
+										name="search"
+										size="13"
+										color="secondary"
+									/>
 								</Flex>
 							</Transition>
 						</Flex>
@@ -509,11 +557,11 @@ watch(
 		</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">
-                {{ `There are no ${page > 1 ? 'more' : ''} rollups to display` }}
-            </Text>
-        </Flex>
+			<Text size="13" weight="600" color="secondary" align="center"> No rollups found </Text>
+			<Text size="12" weight="500" height="160" color="tertiary" align="center">
+				{{ `There are no ${page > 1 ? "more" : ""} rollups to display` }}
+			</Text>
+		</Flex>
 	</Flex>
 </template>
 
@@ -529,7 +577,7 @@ watch(
 	border-top: 1px solid var(--op-5);
 
 	cursor: pointer;
-	
+
 	overflow: hidden;
 	transition: all 0.5s ease;
 }
@@ -549,9 +597,9 @@ watch(
 }
 
 .avatar_wrapper {
-  position: relative;
-  width: 40px;
-  height: 40px;
+	position: relative;
+	width: 40px;
+	height: 40px;
 }
 
 .avatar_container {
@@ -613,8 +661,8 @@ watch(
 }
 
 .chip {
-    box-shadow: inset 0 0 0 1px var(--op-15);
-    border-radius: 10px;
+	box-shadow: inset 0 0 0 1px var(--op-15);
+	border-radius: 10px;
 	cursor: pointer;
 
 	transition: all 0.2s ease;
@@ -630,7 +678,7 @@ watch(
 }
 
 .content {
-    padding: 6px 10px;
+	padding: 6px 10px;
 }
 
 .show {
@@ -652,7 +700,7 @@ a {
 
 		& svg:first-of-type {
 			fill: var(--txt-secondary);
-		}		
+		}
 	}
 }
 
diff --git a/plugins/globalFunctions.js b/plugins/globalFunctions.js
index b692e7c3..d0da73c5 100644
--- a/plugins/globalFunctions.js
+++ b/plugins/globalFunctions.js
@@ -2,10 +2,9 @@
 import { comma, getShortNamespaceID, shortHash, splitAddress } from "@/services/utils"
 
 /** Store */
-import { useBookmarksStore } from "@/store/bookmarks"
+import { useBookmarksStore } from "@/store/bookmarks.store"
 
 export default defineNuxtPlugin((nuxtApp) => {
-
 	const getDisplayName = (type, id, entity) => {
 		if (entity?.hash) {
 			id = entity.hash
@@ -16,23 +15,26 @@ export default defineNuxtPlugin((nuxtApp) => {
 		if (name !== id) {
 			return name
 		}
-	
+
 		switch (type) {
-			case 'addresses':
+			case "addresses":
+			case "address":
 				if (entity?.celestials?.name) {
 					return entity.celestials.name
 				}
 				return splitAddress(id)
-			case 'blocks':
+			case "blocks":
 				return comma(id)
-			case 'namespaces':
+			case "namespaces":
+			case "namespace":
 				return getShortNamespaceID(id)
-			case 'txs':
+			case "txs":
+			case "tx":
 				return shortHash(id)
 			default:
 				return id
 		}
 	}
 
-	nuxtApp.provide('getDisplayName', getDisplayName)
+	nuxtApp.provide("getDisplayName", getDisplayName)
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a0d3674..001627cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,7 +81,7 @@ dependencies:
 devDependencies:
   '@nuxt/devtools':
     specifier: latest
-    version: 2.4.1(vite@6.2.6)(vue@3.5.13)
+    version: 2.5.0(vite@6.2.6)(vue@3.5.13)
   '@nuxtjs/sitemap':
     specifier: 7.2.10
     version: 7.2.10(h3@1.15.1)(vite@6.2.6)(vue@3.5.13)
@@ -97,6 +97,9 @@ devDependencies:
   nuxt-og-image:
     specifier: 5.1.3
     version: 5.1.3(@unhead/vue@2.0.5)(unstorage@1.15.0)(vite@6.2.6)(vue@3.5.13)
+  oxlint:
+    specifier: ^1.0.0
+    version: 1.0.0
   sass:
     specifier: 1.66.1
     version: 1.66.1
@@ -1161,12 +1164,12 @@ packages:
       - magicast
     dev: true
 
-  /@nuxt/devtools-kit@2.4.1(magicast@0.3.5)(vite@6.2.6):
+  /@nuxt/devtools-kit@2.4.1(vite@6.2.6):
     resolution: {integrity: sha512-taA2Nm03JiV3I+SEYS/u1AfjvLm3V9PO8lh0xLsUk/2mlUnL6GZ9xLXrp8VRg11HHt7EPXERGQh8h4iSPU2bSQ==}
     peerDependencies:
       vite: '>=6.0'
     dependencies:
-      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/kit': 3.17.3
       '@nuxt/schema': 3.17.3
       execa: 8.0.1
       vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
@@ -1174,12 +1177,25 @@ packages:
       - magicast
     dev: true
 
-  /@nuxt/devtools-wizard@2.4.1:
-    resolution: {integrity: sha512-2BaryhfribzQ95UxR7vLLV17Pk1Otxg9ryqH71M1Yp0mybBFs6Z3b0v+RXfCb4BwA10s/tXBhfF13DHSSJF1+A==}
+  /@nuxt/devtools-kit@2.5.0(magicast@0.3.5)(vite@6.2.6):
+    resolution: {integrity: sha512-0EJ984cSSxrXxeVVUK+2NW+u2fbor/waxq/J/MJBc/q2oF/4KW2MQ18luxfmZ4A5PKSzLimCoMIOLlZkXcW9aA==}
+    peerDependencies:
+      vite: '>=6.0'
+    dependencies:
+      '@nuxt/kit': 3.17.5(magicast@0.3.5)
+      '@nuxt/schema': 3.17.5
+      execa: 8.0.1
+      vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
+  /@nuxt/devtools-wizard@2.5.0:
+    resolution: {integrity: sha512-ldS+lIvYzKw7IitNsedXEz9/DYB4rOaSHcg3OhQvSU+Yz4n0AFAqGEZIexG5YjbGKM5O96mLdqT2b8kt1OPcXw==}
     hasBin: true
     dependencies:
       consola: 3.4.2
-      diff: 7.0.0
+      diff: 8.0.2
       execa: 8.0.1
       magicast: 0.3.5
       pathe: 2.0.3
@@ -1188,15 +1204,15 @@ packages:
       semver: 7.7.2
     dev: true
 
-  /@nuxt/devtools@2.4.1(vite@6.2.6)(vue@3.5.13):
-    resolution: {integrity: sha512-2gwjUF1J1Bp/V9ZTsYJe8sS9O3eg80gdf01fT8aEBcilR3wf0PSIxjEyYk+YENtrHPLXcnnUko89jHGq23MHPQ==}
+  /@nuxt/devtools@2.5.0(vite@6.2.6)(vue@3.5.13):
+    resolution: {integrity: sha512-ZeLMliVvBoPR4qmFFHsti+YhSFxcVfYv+SsHVfPMEomWQN7IUKJjLQHutFxixG2r0tDzvSeOyDN9J1KJmSLPfw==}
     hasBin: true
     peerDependencies:
       vite: '>=6.0'
     dependencies:
-      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.2.6)
-      '@nuxt/devtools-wizard': 2.4.1
-      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/devtools-kit': 2.5.0(magicast@0.3.5)(vite@6.2.6)
+      '@nuxt/devtools-wizard': 2.5.0
+      '@nuxt/kit': 3.17.5(magicast@0.3.5)
       '@vue/devtools-core': 7.7.6(vite@6.2.6)(vue@3.5.13)
       '@vue/devtools-kit': 7.7.6
       birpc: 2.3.0
@@ -1204,7 +1220,7 @@ packages:
       destr: 2.0.5
       error-stack-parser-es: 1.0.5
       execa: 8.0.1
-      fast-npm-meta: 0.4.2
+      fast-npm-meta: 0.4.3
       get-port-please: 3.1.2
       hookable: 5.5.3
       image-meta: 0.2.1
@@ -1221,10 +1237,10 @@ packages:
       simple-git: 3.27.0
       sirv: 3.0.1
       structured-clone-es: 1.0.0
-      tinyglobby: 0.2.13
+      tinyglobby: 0.2.14
       vite: 6.2.6(jiti@2.4.2)(sass@1.66.1)
-      vite-plugin-inspect: 11.0.1(@nuxt/kit@3.17.3)(vite@6.2.6)
-      vite-plugin-vue-tracer: 0.1.3(vite@6.2.6)(vue@3.5.13)
+      vite-plugin-inspect: 11.1.0(@nuxt/kit@3.17.5)(vite@6.2.6)
+      vite-plugin-vue-tracer: 0.1.4(vite@6.2.6)(vue@3.5.13)
       which: 5.0.0
       ws: 8.18.2
     transitivePeerDependencies:
@@ -1263,7 +1279,7 @@ packages:
     transitivePeerDependencies:
       - magicast
 
-  /@nuxt/kit@3.17.3(magicast@0.3.5):
+  /@nuxt/kit@3.17.3:
     resolution: {integrity: sha512-aw6u6mT3TnM/MmcCRDMv3i9Sbm5/ZMSJgDl+N+WsrWNDIQ2sWmsqdDkjb/HyXF20SNwc2891hRBkaQr3hG2mhA==}
     engines: {node: '>=18.12.0'}
     dependencies:
@@ -1292,6 +1308,36 @@ packages:
     transitivePeerDependencies:
       - magicast
 
+  /@nuxt/kit@3.17.5(magicast@0.3.5):
+    resolution: {integrity: sha512-NdCepmA+S/SzgcaL3oYUeSlXGYO6BXGr9K/m1D0t0O9rApF8CSq/QQ+ja5KYaYMO1kZAEWH4s2XVcE3uPrrAVg==}
+    engines: {node: '>=18.12.0'}
+    dependencies:
+      c12: 3.0.4(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.5
+      ignore: 7.0.5
+      jiti: 2.4.2
+      klona: 2.0.6
+      knitwork: 1.2.0
+      mlly: 1.7.4
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.1.0
+      scule: 1.3.0
+      semver: 7.7.2
+      std-env: 3.9.0
+      tinyglobby: 0.2.14
+      ufo: 1.6.1
+      unctx: 2.4.1
+      unimport: 5.0.1
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+    dev: true
+
   /@nuxt/schema@3.16.2:
     resolution: {integrity: sha512-2HZPM372kuI/uw9VU/hOoYuzv803oZAtyoEKC5dQCQTKAQ293AjypF3WljMXUSReFS/hcbBSgGzYUPHr3Qo+pg==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1313,6 +1359,17 @@ packages:
       std-env: 3.9.0
     dev: true
 
+  /@nuxt/schema@3.17.5:
+    resolution: {integrity: sha512-A1DSQk2uXqRHXlgLWDeFCyZk/yPo9oMBMb9OsbVko9NLv9du2DO2cs9RQ68Amvdk8O2nG7/FxAMNnkMdQ8OexA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dependencies:
+      '@vue/shared': 3.5.16
+      consola: 3.4.2
+      defu: 6.1.4
+      pathe: 2.0.3
+      std-env: 3.9.0
+    dev: true
+
   /@nuxt/telemetry@2.6.6:
     resolution: {integrity: sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==}
     engines: {node: '>=18.12.0'}
@@ -1538,6 +1595,70 @@ packages:
     resolution: {integrity: sha512-prhfNnb3ATFHOCv7mzKFfwLij5RzoUz6Y1n525ZhCEqfq5wreCXL+DyVoq3ShukPo7q45ZjYIdjFUgjj+WKzng==}
     dev: true
 
+  /@oxlint/darwin-arm64@1.0.0:
+    resolution: {integrity: sha512-Ei8wLh65Th/si5EY6mfQIXVpdXbJWOoh56FaxxPgVxTeJaj3NHUIlxICHkvTZ5dz8bnOFcbS/+9MaW8Qkzfm9g==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/darwin-x64@1.0.0:
+    resolution: {integrity: sha512-dbdtQ+rJTUb4jFKTzV+j08yYcR8lZssLF10n7MggK/jI7pBtoQN04cupzYdkxOWSy6uDXjDmWYFDIqlTqV7zOg==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/linux-arm64-gnu@1.0.0:
+    resolution: {integrity: sha512-71wy9zMxsAeRhCFQjUkDLT8N5tm10L5FxNxsUcEsezgM187X9tPGP1gwlFpYig7F+bg2X1dijFuTA/FSe0YpKg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/linux-arm64-musl@1.0.0:
+    resolution: {integrity: sha512-UbD4+2k7aGZOFtKK/yeESX7Fv0w9gQbcjrjr1HGY7QOYg7XlFlqzycZdPS6XbAuKA5oOXFpafaYOD4AyX3p2AA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/linux-x64-gnu@1.0.0:
+    resolution: {integrity: sha512-0NXWqsm65I3VaLgADW4y9r7Pwurqgs2fr1lqoTyTIlidD18LQ3UMAWp8NzBPMCYzw8c/rTgOzsFf0gLtxzMtwg==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/linux-x64-musl@1.0.0:
+    resolution: {integrity: sha512-AY1NLnVQI+tBeuaB8KCriWfiD6O1zZFAQHphRDcZiqSz4mauNq9FFuffW0N9RSR9hYttGr0UVdQ6eK72RhzOYg==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/win32-arm64@1.0.0:
+    resolution: {integrity: sha512-X9y2KAdoqT/jy/sITGDZNMJHJAmhDhofItBnCf2DWS1HPakdtCAKGX9KMx6SivTbtPn1+JpZgfHn4Y7rNMvujQ==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxlint/win32-x64@1.0.0:
+    resolution: {integrity: sha512-x2eQwZCfRUi6GG0lhRuC54O6TK2uW7UbIvERh83vPi0ftd+rtGUuJauNdyC+pPx+iwFToFVet43/5MBMu4bMWg==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@parcel/watcher-android-arm64@2.5.1:
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -2794,6 +2915,10 @@ packages:
   /@vue/shared@3.5.13:
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  /@vue/shared@3.5.16:
+    resolution: {integrity: sha512-c/0fWy3Jw6Z8L9FmTyYfkpM5zklnqqa9+a6dz3DvONRKW2NEbh46BP0FHuLFSWi2TnQEtp91Z6zOWNrU6QiyPg==}
+    dev: true
+
   /@vueuse/core@10.11.1(vue@3.5.13):
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
     dependencies:
@@ -3417,6 +3542,29 @@ packages:
       pkg-types: 2.1.0
       rc9: 2.1.2
 
+  /c12@3.0.4(magicast@0.3.5):
+    resolution: {integrity: sha512-t5FaZTYbbCtvxuZq9xxIruYydrAGsJ+8UdP0pZzMiK2xl/gNiSOy0OxhLzHUEEb0m1QXYqfzfvyIFEmz/g9lqg==}
+    peerDependencies:
+      magicast: ^0.3.5
+    peerDependenciesMeta:
+      magicast:
+        optional: true
+    dependencies:
+      chokidar: 4.0.3
+      confbox: 0.2.2
+      defu: 6.1.4
+      dotenv: 16.5.0
+      exsolve: 1.0.5
+      giget: 2.0.0
+      jiti: 2.4.2
+      magicast: 0.3.5
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.1.0
+      rc9: 2.1.2
+    dev: true
+
   /cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -4203,6 +4351,18 @@ packages:
     dependencies:
       ms: 2.1.3
 
+  /debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
   /decamelize@1.2.0:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
@@ -4303,8 +4463,8 @@ packages:
     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
     dev: true
 
-  /diff@7.0.0:
-    resolution: {integrity: sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==}
+  /diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
     engines: {node: '>=0.3.1'}
     dev: true
 
@@ -4660,8 +4820,8 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.8
 
-  /fast-npm-meta@0.4.2:
-    resolution: {integrity: sha512-BDN/yv8MN3fjh504wa7/niZojPtf/brWBsLKlw7Fv+Xh8Df+6ZEAFpp3zaal4etgDxxav1CuzKX5H0YVM9urEQ==}
+  /fast-npm-meta@0.4.3:
+    resolution: {integrity: sha512-eUzR/uVx61fqlHBjG/eQx5mQs7SQObehMTTdq8FAkdCB4KuZSQ6DiZMIrAq4kcibB3WFLQ9c4dT26Vwkix1RKg==}
     dev: true
 
   /fast-uri@3.0.6:
@@ -5077,6 +5237,11 @@ packages:
     resolution: {integrity: sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==}
     engines: {node: '>= 4'}
 
+  /ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /image-meta@0.2.1:
     resolution: {integrity: sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==}
     dev: true
@@ -5986,8 +6151,8 @@ packages:
       '@unhead/vue': ^2.0.5
       unstorage: ^1.15.0
     dependencies:
-      '@nuxt/devtools-kit': 2.4.1(magicast@0.3.5)(vite@6.2.6)
-      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/devtools-kit': 2.4.1(vite@6.2.6)
+      '@nuxt/kit': 3.17.3
       '@resvg/resvg-js': 2.6.2
       '@resvg/resvg-wasm': 2.6.2
       '@unhead/vue': 2.0.5(vue@3.5.13)
@@ -6028,7 +6193,7 @@ packages:
   /nuxt-site-config-kit@3.1.9(vue@3.5.13):
     resolution: {integrity: sha512-bcmpajYJgkNzA0jTq6CmmhKF2wHZUUKeVx/CIGI8lwWuAD81EBUZN0T4iKvVDo54g9UBrUUl8/5GhD65YBBG0A==}
     dependencies:
-      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/kit': 3.17.3
       pkg-types: 2.1.0
       site-config-stack: 3.1.9(vue@3.5.13)
       std-env: 3.9.0
@@ -6040,7 +6205,7 @@ packages:
   /nuxt-site-config@3.1.9(vue@3.5.13):
     resolution: {integrity: sha512-YB69GX0st8drv1d5xypweseiEWeR22tfGdyVH3U4R+mpUSz8paBx48ArKC6MgV22DKItoQm51LVoapF5pl5bEQ==}
     dependencies:
-      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/kit': 3.17.3
       nuxt-site-config-kit: 3.1.9(vue@3.5.13)
       pathe: 2.0.3
       pkg-types: 2.1.0
@@ -6066,7 +6231,7 @@ packages:
     dependencies:
       '@nuxt/cli': 3.24.1
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 2.4.1(vite@6.2.6)(vue@3.5.13)
+      '@nuxt/devtools': 2.5.0(vite@6.2.6)(vue@3.5.13)
       '@nuxt/kit': 3.16.2
       '@nuxt/schema': 3.16.2
       '@nuxt/telemetry': 2.6.6
@@ -6252,8 +6417,8 @@ packages:
       mimic-fn: 4.0.0
     dev: true
 
-  /open@10.1.0:
-    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+  /open@10.1.2:
+    resolution: {integrity: sha512-cxN6aIDPz6rm8hbebcP7vrQNhvRcveZoJU72Y7vskh4oIm+BZwBECnx5nTmrlres1Qapvx27Qo1Auukpf8PKXw==}
     engines: {node: '>=18'}
     dependencies:
       default-browser: 5.2.1
@@ -6293,6 +6458,21 @@ packages:
       '@oxc-parser/binding-win32-x64-msvc': 0.56.5
     dev: true
 
+  /oxlint@1.0.0:
+    resolution: {integrity: sha512-yyeryHnd21wPBLBEF4Uf8hvzJlftrIGHxyUaqFaP2JYiZ9cbiColygZhrezvv/Z/aThCmYu3j6iJMxlVPxNt6g==}
+    engines: {node: '>=8.*'}
+    hasBin: true
+    optionalDependencies:
+      '@oxlint/darwin-arm64': 1.0.0
+      '@oxlint/darwin-x64': 1.0.0
+      '@oxlint/linux-arm64-gnu': 1.0.0
+      '@oxlint/linux-arm64-musl': 1.0.0
+      '@oxlint/linux-x64-gnu': 1.0.0
+      '@oxlint/linux-x64-musl': 1.0.0
+      '@oxlint/win32-arm64': 1.0.0
+      '@oxlint/win32-x64': 1.0.0
+    dev: true
+
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -7759,6 +7939,14 @@ packages:
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
 
+  /tinyglobby@0.2.14:
+    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.4.4(picomatch@4.0.2)
+      picomatch: 4.0.2
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -8239,8 +8427,8 @@ packages:
       vscode-uri: 3.1.0
     dev: true
 
-  /vite-plugin-inspect@11.0.1(@nuxt/kit@3.17.3)(vite@6.2.6):
-    resolution: {integrity: sha512-aABw7eGTr9Cmbn9RAs76e0BztVUFDl6a2R+/IJXpoUZxjx5YHB0P+Em3ZTWzpIPZzuRj28tAMblvcUyhgJc4aQ==}
+  /vite-plugin-inspect@11.1.0(@nuxt/kit@3.17.5)(vite@6.2.6):
+    resolution: {integrity: sha512-r3Nx8xGQ08bSoNu7gJGfP5H/wNOROHtv0z3tWspplyHZJlABwNoPOdFEmcVh+lVMDyk/Be4yt8oS596ZHoYhOg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
@@ -8249,12 +8437,12 @@ packages:
       '@nuxt/kit':
         optional: true
     dependencies:
-      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/kit': 3.17.5(magicast@0.3.5)
       ansis: 3.17.0
-      debug: 4.4.0
+      debug: 4.4.1
       error-stack-parser-es: 1.0.5
       ohash: 2.0.11
-      open: 10.1.0
+      open: 10.1.2
       perfect-debounce: 1.0.0
       sirv: 3.0.1
       unplugin-utils: 0.2.4
@@ -8290,8 +8478,8 @@ packages:
       - rollup
     dev: true
 
-  /vite-plugin-vue-tracer@0.1.3(vite@6.2.6)(vue@3.5.13):
-    resolution: {integrity: sha512-+fN6oo0//dwZP9Ax9gRKeUroCqpQ43P57qlWgL0ljCIxAs+Rpqn/L4anIPZPgjDPga5dZH+ZJsshbF0PNJbm3Q==}
+  /vite-plugin-vue-tracer@0.1.4(vite@6.2.6)(vue@3.5.13):
+    resolution: {integrity: sha512-o6tzfvwreQWg/S42vIPmSjXHj939p+a1gnl6VICpWgMtWqoVn21YlK4X63nZvQV/D0mmJe5CCtV/h0zaNdAL6g==}
     peerDependencies:
       vite: ^6.0.0
       vue: ^3.5.0
diff --git a/server/api/version.js b/server/api/version.js
new file mode 100644
index 00000000..0db9cc1e
--- /dev/null
+++ b/server/api/version.js
@@ -0,0 +1,6 @@
+export default defineEventHandler(() => {
+	const config = useRuntimeConfig()
+	return {
+		version: config.public.version,
+	}
+})
diff --git a/services/amp.js b/services/amp.js
index 1df3999e..5887bc3f 100644
--- a/services/amp.js
+++ b/services/amp.js
@@ -1,6 +1,7 @@
 import * as amp from "@amplitude/analytics-browser"
 
 const init = (t) => {
+	if (!t) return
 	amp.init(t, { defaultTracking: true })
 }
 
diff --git a/services/api/address.js b/services/api/address.js
index 3fc6d0bd..af9352ac 100644
--- a/services/api/address.js
+++ b/services/api/address.js
@@ -1,193 +1,6 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-// export const fetchAddresses = async ({ limit, offset, sort, sort_by }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-// 		if (sort_by) url.searchParams.append("sort_by", sort_by)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressesCount = async () => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/count`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressByHash = async (hash) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchTxsByAddressHash = async ({ limit, offset, sort, hash, status, msg_type }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/txs`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-// 		if (msg_type) url.searchParams.append("msg_type", msg_type)
-// 		if (status) url.searchParams.append("status", status)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchMessagesByAddressHash = async ({ limit, offset, sort, hash, msg_type }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/messages`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-// 		if (msg_type) url.searchParams.append("msg_type", msg_type)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchBlobsByAddressHash = async ({ limit, offset, sort, hash }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/blobs`)
-
-// 		url.searchParams.append("sort_by", 'time')
-		
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressDelegations = async ({ hash, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/delegations`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressRedelegations = async ({ hash, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/redelegations`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressUndelegations = async ({ hash, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/undelegations`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressGrants = async ({ hash, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/grants`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressGranters = async ({ hash, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/granters`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchAddressVestings = async ({ hash, showEnded, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/address/${hash}/vestings`)
-
-// 		url.searchParams.append("show_ended", showEnded)
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchVestingPeriods = async ({ id, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/vesting/${id}/periods`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchAddresses = ({ limit, offset, sort, sort_by }) => {
 	try {
 		const url = new URL(`${useServerURL()}/address`)
@@ -268,8 +81,8 @@ export const fetchBlobsByAddressHash = ({ limit, offset, sort, hash }) => {
 	try {
 		const url = new URL(`${useServerURL()}/address/${hash}/blobs`)
 
-		url.searchParams.append("sort_by", 'time')
-		
+		url.searchParams.append("sort_by", "time")
+
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
 		if (sort) url.searchParams.append("sort", sort)
diff --git a/services/api/blobstream.js b/services/api/blobstream.js
index 59c3771a..db6d5a9b 100644
--- a/services/api/blobstream.js
+++ b/services/api/blobstream.js
@@ -1,60 +1,6 @@
 /** Services */
 import { useBlobstreamURL } from "@/services/config"
 
-// export const fetchNetworks = async () => {
-// 	try {
-// 		const url = new URL(`${useBlobstreamURL()}/network`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchCommitments = async ({ limit, offset, sort }) => {
-// 	try {
-// 		const url = new URL(`${useBlobstreamURL()}/commitments`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchCommitmentsByNetwork = async ({ network, limit, offset, sort }) => {
-// 	try {
-// 		const url = new URL(`${useBlobstreamURL()}/network/${network}/commitments`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchContracts = async (address) => {
-// 	try {
-// 		const url = new URL(`${useBlobstreamURL()}/contracts`)
-
-// 		if (address) url + `/${address}`
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchNetworks = () => {
 	try {
 		const url = new URL(`${useBlobstreamURL()}/network`)
diff --git a/services/api/block.js b/services/api/block.js
index 4fcacae8..7f4a2fb9 100644
--- a/services/api/block.js
+++ b/services/api/block.js
@@ -1,34 +1,6 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-// export const fetchBlocks = async ({ limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/block`)
-
-// 		url.searchParams.append("stats", true)
-// 		url.searchParams.append("sort", "desc")
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchBlocksCount = async () => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/block/count`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchBlocks = ({ limit, offset }) => {
 	try {
 		const url = new URL(`${useServerURL()}/block`)
@@ -74,28 +46,6 @@ export const fetchLatestBlocks = async ({ limit }) => {
 	}
 }
 
-// export const fetchAvgBlockTime = async ({ from }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/stats/summary/block_stats/avg?column=block_time`)
-
-// 		url.searchParams.append("from", from)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchBlockByHeight = async (height) => {
-// 	try {
-// 		const data = await useFetch(`${useServerURL()}/block/${height}?stats=true`)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchAvgBlockTime = async ({ from }) => {
 	try {
 		const url = new URL(`${useServerURL()}/stats/summary/block_stats/avg?column=block_time`)
@@ -148,8 +98,8 @@ export const fetchBlockBlobs = async ({ height, limit, offset, sort }) => {
 	try {
 		const url = new URL(`${useServerURL()}/block/${height}/blobs`)
 
-		url.searchParams.append("sort_by", 'time')
-		
+		url.searchParams.append("sort_by", "time")
+
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
 		if (sort) url.searchParams.append("sort", sort)
diff --git a/services/api/rollup.js b/services/api/rollup.js
index 9e47c2d1..0ab1c90a 100644
--- a/services/api/rollup.js
+++ b/services/api/rollup.js
@@ -20,83 +20,6 @@ export const fetchRollups = async ({ categories, type, tags, limit, offset, sort
 	}
 }
 
-// export const fetchRollupsCount = async () => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/rollup/count`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchRollupByID = async (id) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/rollup/${id}`)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchRollupBySlug = async (slug) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/rollup/slug/${slug}`)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchRollupBlobs = async ({ id, limit, offset, sort, sort_by }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/rollup/${id}/blobs`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-// 		if (sort_by) url.searchParams.append("sort_by", sort_by)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchRollupNamespaces = async ({ id, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/rollup/${id}/namespaces`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchRollupExportData = async ({ id, from, to }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/rollup/${id}/export`)
-
-// 		url.searchParams.append("from", from)
-// 		url.searchParams.append("to", to)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchRollupsCount = () => {
 	try {
 		const url = new URL(`${useServerURL()}/rollup/count`)
@@ -202,7 +125,7 @@ export const fetchRollupTVL = async ({ slug, period, from, to }) => {
 
 		if (from) url.searchParams.append("from", from)
 		if (to) url.searchParams.append("to", to)
-		
+
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
@@ -216,7 +139,7 @@ export const fetchRollupOrgs = async ({ limit, offset }) => {
 
 		if (limit) url.searchParams.append("limit", limit)
 		if (offset) url.searchParams.append("offset", offset)
-	
+
 		const data = await $fetch(url.href)
 		return data
 	} catch (error) {
@@ -255,7 +178,7 @@ export const fetchRollupOrgReposBySlug = async ({ slug, limit, offset, sort_by,
 		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) {
@@ -264,13 +187,13 @@ export const fetchRollupOrgReposBySlug = async ({ slug, limit, offset, sort_by,
 	}
 }
 
-export const fetchRollupOrgCommitsBySlug = async ({ slug, timeframe = 'week', from, to }) => {
+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) {
diff --git a/services/api/socket.js b/services/api/socket.js
index c27a7a62..ebebeef4 100644
--- a/services/api/socket.js
+++ b/services/api/socket.js
@@ -2,7 +2,7 @@
 import { useSocketURL } from "../config"
 
 /** Store */
-import { useAppStore } from "@/store/app"
+import { useAppStore } from "@/store/app.store"
 
 export let socket = null
 
@@ -10,10 +10,9 @@ export const init = () => {
 	const appStore = useAppStore()
 
 	const startWs = () => {
-
 		socket = new WebSocket(useSocketURL())
 
-		socket.addEventListener("open", (e) => {
+		socket.addEventListener("open", () => {
 			/** Head Subscription */
 			socket.send(
 				JSON.stringify({
@@ -37,13 +36,13 @@ export const init = () => {
 
 		socket.addEventListener("message", (e) => {
 			const data = JSON.parse(e.data)
-			if (data.channel === 'head') {
-				appStore.lastHead = data.body;
-			} else if (data.channel === 'blocks') {
-				appStore.latestBlocks.unshift(data.body);
+			if (data.channel === "head") {
+				appStore.lastHead = data.body
+			} else if (data.channel === "blocks") {
+				appStore.latestBlocks.unshift(data.body)
 				setTimeout(() => {
-					appStore.latestBlocks.pop();
-				}, 1000);
+					appStore.latestBlocks.pop()
+				}, 1000)
 			}
 		})
 
diff --git a/services/api/tx.js b/services/api/tx.js
index 82c89a6c..c5519786 100644
--- a/services/api/tx.js
+++ b/services/api/tx.js
@@ -1,26 +1,6 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-// export const fetchTransactions = async ({ msg_type, status, from, to, limit, offset, sort_by, sort }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/tx`)
-
-// 		if (msg_type) url.searchParams.append("msg_type", msg_type)
-// 		if (status) url.searchParams.append("status", status)
-// 		if (from) url.searchParams.append("from", from)
-// 		if (to) url.searchParams.append("to", to)
-// 		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 useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchTransactions = ({ msg_type, status, from, to, limit, offset, sort_by, sort }) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx`)
@@ -34,7 +14,6 @@ export const fetchTransactions = ({ msg_type, status, from, to, limit, offset, s
 		if (sort_by) url.searchParams.append("sort_by", sort_by)
 		if (sort) url.searchParams.append("sort", sort)
 
-		// const data = await 
 		return useFetch(url.href, {
 			key: "transactions",
 		})
@@ -43,17 +22,6 @@ export const fetchTransactions = ({ msg_type, status, from, to, limit, offset, s
 	}
 }
 
-// export const fetchTxsCount = async () => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/tx/count`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchTxsCount = () => {
 	try {
 		const url = new URL(`${useServerURL()}/tx/count`)
@@ -66,17 +34,6 @@ export const fetchTxsCount = () => {
 	}
 }
 
-// export const fetchTxByHash = async (hash) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/tx/${hash}`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchTxByHash = (hash) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx/${hash}`)
@@ -166,16 +123,6 @@ export const fetchTxBlobsCount = async (hash) => {
 	}
 }
 
-/** Latest PayForBlobs */
-// export const fetchLatestPFBs = async (height) => {
-// 	try {
-// 		const data = await useFetch(`${useServerURL()}/tx?msg_type=MsgPayForBlobs&sort=desc&limit=5`)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchLatestPFBs = () => {
 	try {
 		return useFetch(`${useServerURL()}/tx?msg_type=MsgPayForBlobs&sort=desc&limit=5`, {
@@ -186,27 +133,6 @@ export const fetchLatestPFBs = () => {
 	}
 }
 
-// export const fetchTransactionsByBlock = async ({ limit, offset, sort, height, from, to, status, type, excluded_types }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/tx`)
-
-// 		url.searchParams.append("height", height)
-// 		if (from) url.searchParams.append("from", from)
-// 		if (to) url.searchParams.append("to", to)
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (sort) url.searchParams.append("sort", sort)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (status) url.searchParams.append("status", status)
-// 		if (type) url.searchParams.append("msg_type", type)
-// 		if (excluded_types) url.searchParams.append("excluded_msg_type", excluded_types)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchTransactionsByBlock = ({ limit, offset, sort, height, from, to, status, type, excluded_types }) => {
 	try {
 		const url = new URL(`${useServerURL()}/tx`)
diff --git a/services/api/validator.js b/services/api/validator.js
index e97870c7..d4b6ab81 100644
--- a/services/api/validator.js
+++ b/services/api/validator.js
@@ -1,99 +1,6 @@
 /** Services */
 import { useServerURL } from "@/services/config"
 
-// export const fetchValidators = async ({ jailed = false, limit, offset, sort }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators`)
-
-// 		url.searchParams.append("jailed", jailed)
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-// 		if (sort) url.searchParams.append("sort", sort)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchValidatorsCount = async () => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators/count`)
-
-// 		const data = await useFetch(url.href)
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchValidatorByID = async (id) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators/${id}`)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchValidatorBlocks = async ({ id, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators/${id}/blocks`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchValidatorDelegators = async ({ id, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators/${id}/delegators`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchValidatorJails = async ({ id, limit, offset }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators/${id}/jails`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-// 		if (offset) url.searchParams.append("offset", offset)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
-// export const fetchValidatorUptime = async ({ id, limit }) => {
-// 	try {
-// 		const url = new URL(`${useServerURL()}/validators/${id}/uptime`)
-
-// 		if (limit) url.searchParams.append("limit", limit)
-
-// 		const data = await useFetch(encodeURI(url.href))
-// 		return data
-// 	} catch (error) {
-// 		console.error(error)
-// 	}
-// }
-
 export const fetchValidators = ({ jailed = false, limit, offset, sort }) => {
 	try {
 		const url = new URL(`${useServerURL()}/validators`)
diff --git a/services/constants/rollups.js b/services/constants/rollups.js
index 1fe0c159..609e8408 100644
--- a/services/constants/rollups.js
+++ b/services/constants/rollups.js
@@ -28,9 +28,9 @@ export const getRankCategory = (rank) => {
 
 export const getMetricCategory = (metric, score) => {
 	const metricValue = rankCoefficients[metric]
-	let rank = roundTo(score / metricValue * 10, 0)
+	let rank = roundTo((score / metricValue) * 10, 0)
 
-	return {...getRankCategory(rank), rank: score / metricValue}
+	return { ...getRankCategory(rank), rank: score / metricValue }
 }
 
 export const lastActivityCategories = [
diff --git a/services/notifications.js b/services/notifications.js
index 314d7929..e8f1b3c6 100644
--- a/services/notifications.js
+++ b/services/notifications.js
@@ -1,5 +1,5 @@
 /** Store */
-import { useNotificationsStore } from "@/store/notifications"
+import { useNotificationsStore } from "@/store/notifications.store"
 
 export const parseRedirectQueryError = (query) => {
 	const notificationsStore = useNotificationsStore()
diff --git a/services/utils/export.js b/services/utils/export.js
index eb228bf5..92be0f8d 100644
--- a/services/utils/export.js
+++ b/services/utils/export.js
@@ -7,7 +7,7 @@ export async function exportToCSV(data, fileName) {
 	const blob = new Blob([data], { type: "text/csv;charset=utf-8;" })
 	const link = document.createElement("a")
 
-    link.href = URL.createObjectURL(blob)
+	link.href = URL.createObjectURL(blob)
 	link.download = `${fileName}.csv`
 
 	link.style.visibility = "hidden"
@@ -15,8 +15,8 @@ export async function exportToCSV(data, fileName) {
 
 	setTimeout(() => {
 		link.click()
-	}, 100);
-    
+	}, 100)
+
 	document.body.removeChild(link)
 }
 
@@ -25,29 +25,30 @@ export async function exportSVGToPNG(svgElement, fileName, width = 1920, height
 
 	// Load SVG styles
 	const styleSheets = Array.from(document.styleSheets)
-		.filter(style => style.href === null)
-		.map(sheet => {
+		.filter((style) => style.href === null)
+		.map((sheet) => {
 			try {
 				return Array.from(sheet.cssRules)
-					.map(rule => rule.cssText)
-					.join('\n')
+					.map((rule) => rule.cssText)
+					.join("\n")
 			} catch (e) {
-				console.warn('Failed to read styles from', sheet.href)
-				
-				return ''
+				console.warn("Failed to read styles from", sheet.href, e)
+
+				return ""
 			}
-		}).join('\n')
+		})
+		.join("\n")
 
 	// Create clone and <style> element and add to SVG
-	const svgStyle = document.createElement('style')
+	const svgStyle = document.createElement("style")
 	svgStyle.textContent = styleSheets
-	
+
 	let svgClone = svgElement.cloneNode(true)
 	svgClone.prepend(svgStyle)
-	
+
 	// Set SVG size
-    svgClone.setAttribute('width', width);
-    svgClone.setAttribute('height', height);
+	svgClone.setAttribute("width", width)
+	svgClone.setAttribute("height", height)
 
 	// Convert SVG to string
 	const serializer = new XMLSerializer()
@@ -55,23 +56,23 @@ export async function exportSVGToPNG(svgElement, fileName, width = 1920, height
 
 	// Convert and export SVG
 	const img = new Image()
-	const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' })
+	const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" })
 	const url = URL.createObjectURL(svgBlob)
 
-	img.onload = function() {
-		const canvas = document.createElement('canvas')
+	img.onload = function () {
+		const canvas = document.createElement("canvas")
 		canvas.width = width
 		canvas.height = height
-		const ctx = canvas.getContext('2d')
+		const ctx = canvas.getContext("2d")
 		ctx.drawImage(img, 0, 0, width, height)
-		const png = canvas.toDataURL('image/png')
+		const png = canvas.toDataURL("image/png")
 
 		// Create link for download
-		const link = document.createElement('a')
+		const link = document.createElement("a")
 		link.href = png
 		link.download = `${fileName}.png`
 		document.body.appendChild(link)
-		link.click();
+		link.click()
 		document.body.removeChild(link)
 
 		URL.revokeObjectURL(url)
diff --git a/services/utils/general.js b/services/utils/general.js
index d2c9c1d6..7d20647b 100644
--- a/services/utils/general.js
+++ b/services/utils/general.js
@@ -166,25 +166,11 @@ export function base64ToHex(base64) {
 	return hex
 }
 
-// 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) => {
-		const getValue = (obj, path) => path.split('.').reduce((o, key) => o?.[key], obj) ?? 0
+		const getValue = (obj, path) => path.split(".").reduce((o, key) => o?.[key], obj) ?? 0
 
 		let valueA = getValue(a, path)
 		let valueB = getValue(b, path)
@@ -192,11 +178,7 @@ export function sortArrayOfObjects(arr, path, asc = true) {
 		const dateA = Date.parse(valueA)
 		const dateB = Date.parse(valueB)
 
-		const bothAreDates =
-			typeof valueA === "string" &&
-			typeof valueB === "string" &&
-			!isNaN(dateA) &&
-			!isNaN(dateB)
+		const bothAreDates = typeof valueA === "string" && typeof valueB === "string" && !isNaN(dateA) && !isNaN(dateB)
 
 		if (bothAreDates) {
 			valueA = dateA
@@ -208,10 +190,13 @@ export function sortArrayOfObjects(arr, path, asc = true) {
 }
 
 export function hexToRgba(hex, alpha = 255) {
-	let h = hex.replace(/^#/, '')
+	let h = hex.replace(/^#/, "")
 
 	if (h.length === 3) {
-		h = h.split('').map(c => c + c).join('')
+		h = h
+			.split("")
+			.map((c) => c + c)
+			.join("")
 	}
 
 	const int = parseInt(h, 16)
diff --git a/services/version.js b/services/version.js
new file mode 100644
index 00000000..67285f76
--- /dev/null
+++ b/services/version.js
@@ -0,0 +1,10 @@
+export const watchForUpdate = (currentVersion, callback) => {
+	return setInterval(async () => {
+		try {
+			const { version } = await $fetch("/api/version")
+			if (currentVersion !== version) callback(version)
+		} catch (error) {
+			console.error(`Error watchForUpdate: `, error)
+		}
+	}, 60_000)
+}
diff --git a/services/wallet.js b/services/wallet.js
index 40c45dbd..12faf869 100644
--- a/services/wallet.js
+++ b/services/wallet.js
@@ -248,6 +248,7 @@ export const fetchAccountInfo = async (network, address) => {
 		const response = await $fetch(uri)
 		return response.account
 	} catch (e) {
+		console.error(e)
 		return undefined
 	}
 }
diff --git a/store/rollupsrank.js b/store/activity.store.js
similarity index 73%
rename from store/rollupsrank.js
rename to store/activity.store.js
index fd50fd2a..46cce52a 100644
--- a/store/rollupsrank.js
+++ b/store/activity.store.js
@@ -3,13 +3,13 @@ import { defineStore, acceptHMRUpdate } from "pinia"
 import { DateTime } from "luxon"
 
 /** Services */
-import { capitalizeAndReplace, isMainnet, roundTo, sortArrayOfObjects } from "@/services/utils"
+import { capitalizeAndReplace, isMainnet, roundTo } from "@/services/utils"
 import { rankCoefficients } from "@/services/constants/rollups"
 
 /** API */
-import { fetchRollupOrgs, fetchRollupOrgsState, fetchRollupOrgReposBySlug, fetchRollups, fetchRollupsDailyStats } from "@/services/api/rollup"
+import { fetchRollupOrgs, fetchRollupOrgsState, fetchRollups, fetchRollupsDailyStats } from "@/services/api/rollup"
 
-export const useRollupsRankingStore = defineStore("rollups_ranking", () => {
+export const useActivityStore = defineStore("activity", () => {
 	const rollups_ranking = ref({
 		ranking: {},
 		top_rollup: {},
@@ -30,14 +30,14 @@ export const useRollupsRankingStore = defineStore("rollups_ranking", () => {
 			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)
+			fetchRollupOrgsState(params),
 		])
 		let maxDailyBlobsCount = 0
 		let maxAvgPfbSize = 0
@@ -66,21 +66,20 @@ export const useRollupsRankingStore = defineStore("rollups_ranking", () => {
 			rollupsRanking.value[slug].commits_weekly = od.commits_weekly
 		}
 
-		rollupsData.forEach(r => {
+		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 ))
+			return Math.exp(-(diff / t))
 		}
 		const calculateRanking = (r) => {
 			let ranking = {
@@ -95,38 +94,49 @@ export const useRollupsRankingStore = defineStore("rollups_ranking", () => {
 				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)
+				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)
+				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.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 => {
+		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 })
+		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
+				rank: maxRankEntry.rank,
 			},
 			last_update: DateTime.now().ts,
 		}
@@ -138,5 +148,5 @@ export const useRollupsRankingStore = defineStore("rollups_ranking", () => {
 })
 
 if (import.meta.hot) {
-	import.meta.hot.accept(acceptHMRUpdate(useRollupsRankingStore, import.meta.hot))
+	import.meta.hot.accept(acceptHMRUpdate(useActivityStore, import.meta.hot))
 }
diff --git a/store/app.js b/store/app.store.js
similarity index 93%
rename from store/app.js
rename to store/app.store.js
index f9495e90..3b458f09 100644
--- a/store/app.js
+++ b/store/app.store.js
@@ -1,6 +1,8 @@
-import { useModalsStore } from "./modals"
+import { useModalsStore } from "./modals.store"
 
 export const useAppStore = defineStore("app", () => {
+	const version = ref()
+
 	const modalsStore = useModalsStore()
 
 	const network = ref()
@@ -45,6 +47,7 @@ export const useAppStore = defineStore("app", () => {
 	}
 
 	return {
+		version,
 		network,
 		head,
 		gas,
diff --git a/store/bookmarks.js b/store/bookmarks.store.js
similarity index 100%
rename from store/bookmarks.js
rename to store/bookmarks.store.js
diff --git a/store/cache.js b/store/cache.store.js
similarity index 100%
rename from store/cache.js
rename to store/cache.store.js
diff --git a/store/enums.js b/store/enums.store.js
similarity index 100%
rename from store/enums.js
rename to store/enums.store.js
diff --git a/store/legal.js b/store/legal.store.js
similarity index 100%
rename from store/legal.js
rename to store/legal.store.js
diff --git a/store/modals.js b/store/modals.store.js
similarity index 100%
rename from store/modals.js
rename to store/modals.store.js
diff --git a/store/node.js b/store/node.store.js
similarity index 100%
rename from store/node.js
rename to store/node.store.js
diff --git a/store/notifications.js b/store/notifications.store.js
similarity index 100%
rename from store/notifications.js
rename to store/notifications.store.js
diff --git a/store/settings.js b/store/settings.store.js
similarity index 95%
rename from store/settings.js
rename to store/settings.store.js
index 0c655365..b96edd25 100644
--- a/store/settings.js
+++ b/store/settings.store.js
@@ -1,5 +1,4 @@
 /** Vendor */
-import { reactive } from "vue"
 import { defineStore, acceptHMRUpdate } from "pinia"
 
 export const useSettingsStore = defineStore("settings", () => {