From 74c229e38ba8b498d940d9a360cb5062e9446bf3 Mon Sep 17 00:00:00 2001
From: Mikita <sunlight@MacBook-Pro-Mikita.local>
Date: Fri, 24 Oct 2025 19:37:35 +0200
Subject: [PATCH] wip

---
 app.vue                             |  47 ++++++-
 components/ActionBar.vue            |  10 ++
 components/Auth.vue                 |  41 ++++++
 components/Connection.vue           |   3 +-
 components/LeftSidebar.vue          |  42 ++++--
 components/TheFooter.vue            |  85 ++++--------
 components/cmd/CommandMenu.vue      |  90 +++---------
 components/modals/LoginModal.vue    |  68 +++++++++
 components/modals/ModalsManager.vue |  16 ++-
 components/modals/SettingsModal.vue | 194 ++++++++++++++++++++++++++
 components/modals/SignupModal.vue   | 201 +++++++++++++++++++++++++++
 components/shared/AdvBanner.vue     |  29 ++--
 package.json                        |   3 +-
 pages/auth/callback.vue             |  19 +++
 pnpm-lock.yaml                      |   7 +
 services/auth.js                    |  20 +++
 services/config.js                  |  12 ++
 services/constants/settings.js      |  18 +++
 store/auth.store.js                 | 205 ++++++++++++++++++++++++++++
 19 files changed, 956 insertions(+), 154 deletions(-)
 create mode 100644 components/Auth.vue
 create mode 100644 components/modals/LoginModal.vue
 create mode 100644 components/modals/SettingsModal.vue
 create mode 100644 components/modals/SignupModal.vue
 create mode 100644 pages/auth/callback.vue
 create mode 100644 services/auth.js
 create mode 100644 services/constants/settings.js
 create mode 100644 store/auth.store.js

diff --git a/app.vue b/app.vue
index 70e5174e..32ff0cd4 100644
--- a/app.vue
+++ b/app.vue
@@ -3,6 +3,8 @@
 import Socket from "@/services/api/socket"
 import amp from "@/services/amp"
 import { watchForUpdate } from "@/services/version"
+import { DEFAULT_SETTINGS } from "@/services/constants/settings.js"
+import { isPrefersDarkScheme } from "@/services/utils"
 
 /** Components */
 import ModalsManager from "@/components/modals/ModalsManager.vue"
@@ -21,6 +23,7 @@ import { useSettingsStore } from "@/store/settings.store"
 import { useEnumStore } from "@/store/enums.store"
 import { useLegalStore } from "@/store/legal.store"
 import { useNotificationsStore } from "@/store/notifications.store"
+
 const nodeStore = useNodeStore()
 const appStore = useAppStore()
 const bookmarksStore = useBookmarksStore()
@@ -43,7 +46,47 @@ appStore.initConstants()
 
 let watchInterval = null
 
+const settings = useCookie("localSettings", {
+	default: () => {
+		return DEFAULT_SETTINGS
+	},
+})
+
+switch (settings.value.appearance.general.theme) {
+	case "dark":
+	case "dimmed":
+	case "light":
+		appStore.theme = settings.value.appearance.general.theme
+
+		break
+
+	case "system":
+		appStore.theme = "system"
+
+		break
+}
+
+watch(() => settings.value.appearance.general.theme, () => {
+	let root = document.querySelector("html")
+	
+	if (appStore.theme === "system") {
+		window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+			root.setAttribute("theme", isPrefersDarkScheme() ? "dark" : "light")
+		})
+	} else {
+		root.setAttribute("theme", settings.value.appearance.general.theme)
+	}
+}, { deep: true })
+
 onMounted(async () => {
+	let root = document.querySelector("html")
+
+	if (appStore.theme === "system") {
+		root.setAttribute("theme", isPrefersDarkScheme() ? "dark" : "light")
+	} else {
+		root.setAttribute("theme", appStore.theme)
+	}
+
 	/**
 	 * Watch for package.json->version and notify users about the new version
 	 */
@@ -92,7 +135,7 @@ onMounted(async () => {
 	settingsStore.init()
 
 	appStore.initGlobalUpdates()
-	
+
 	const runtimeConfig = useRuntimeConfig()
 	amp.init(runtimeConfig.public.AMP)
 
@@ -132,7 +175,7 @@ onMounted(async () => {
 		})
 	}
 
-	window.onbeforeunload = function () {
+	window.onbeforeunload = function() {
 		Socket.close()
 	}
 })
diff --git a/components/ActionBar.vue b/components/ActionBar.vue
index e1c78678..7550453c 100644
--- a/components/ActionBar.vue
+++ b/components/ActionBar.vue
@@ -12,7 +12,13 @@ import { isMobile } from "@/services/utils"
 
 /** Store */
 import { useAppStore } from "@/store/app.store"
+import { useAuthStore } from "@/store/auth.store.js"
+import { useModalsStore } from "@/store/modals.store.js"
+
 const appStore = useAppStore()
+const authStore = useAuthStore()
+const modalsStore = useModalsStore()
+
 </script>
 
 <template>
@@ -32,6 +38,9 @@ const appStore = useAppStore()
 		</Flex>
 
 		<Flex align="center" gap="12">
+			<Button v-if="authStore.isAuthenticated" @click="modalsStore.open('settings')" type="secondary" size="mini">
+				<Icon name="settings" size="14" color="secondary" />
+			</Button>
 			<Button @click="appStore.showCmd = true" type="secondary" size="mini">
 				<Icon name="terminal_square" size="16" color="secondary" />
 			</Button>
@@ -39,6 +48,7 @@ const appStore = useAppStore()
 			<div style="width: 2px; height: 16px; background: var(--op-10)" />
 
 			<Connection :class="$style.connection_btn" />
+			<Auth />
 		</Flex>
 	</Flex>
 </template>
diff --git a/components/Auth.vue b/components/Auth.vue
new file mode 100644
index 00000000..aac94205
--- /dev/null
+++ b/components/Auth.vue
@@ -0,0 +1,41 @@
+<script setup>
+/** UI */
+import Button from "@/components/ui/Button.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
+
+/** Store */
+import { useAuthStore } from "@/store/auth.store.js"
+
+const authStore = useAuthStore()
+
+const login = () => {
+	authStore.login()
+}
+
+const logout = async () => {
+	await authStore.revokeToken()
+	authStore.logout()
+}
+
+onMounted(() => {
+	authStore.initialize()
+})
+</script>
+
+<template>
+	<Dropdown v-if="authStore.isAuthenticated">
+		<Button type="secondary" size="mini">
+			<Icon name="address" size="14" color="secondary" />
+			<span>{{ authStore.user?.username }}</span>
+		</Button>
+
+		<template #popup>
+			<DropdownItem @click="logout">
+				Logout
+			</DropdownItem>
+		</template>
+	</Dropdown>
+
+	<Button v-else @click="login" type="white" size="mini">Login</Button>
+</template>
+>
\ No newline at end of file
diff --git a/components/Connection.vue b/components/Connection.vue
index 062c580a..3d014a64 100644
--- a/components/Connection.vue
+++ b/components/Connection.vue
@@ -12,6 +12,7 @@ import { arabica, mainnet, mammoth, mocha } from "@/services/chains"
 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()
@@ -84,7 +85,7 @@ const handleDisconnect = () => {
 </script>
 
 <template>
-	<Button v-if="!appStore.address" @click="handleConnect" type="white" size="mini"> Connect </Button>
+	<Button v-if="!appStore.address" @click="handleConnect" type="secondary" size="mini"> Connect Wallet</Button>
 
 	<Dropdown v-else>
 		<Button type="secondary" size="mini">
diff --git a/components/LeftSidebar.vue b/components/LeftSidebar.vue
index 78a824f8..a8413fb5 100644
--- a/components/LeftSidebar.vue
+++ b/components/LeftSidebar.vue
@@ -13,15 +13,24 @@ import { StatusMap } from "@/services/constants/node"
 import { isMainnet, isMobile } from "@/services/utils"
 import { nodeStatsURL } from "@/services/config"
 import { isSelfhosted } from "@/services/config.js"
+import { DEFAULT_SETTINGS } from "@/services/constants/settings.js"
 
 /** Store */
 import { useAppStore } from "@/store/app.store"
+import { useAuthStore } from "~/store/auth.store.js"
 import { useNodeStore } from "@/store/node.store"
 import { useModalsStore } from "@/store/modals.store"
+
 const appStore = useAppStore()
 const nodeStore = useNodeStore()
 const modalsStore = useModalsStore()
 
+const settings = useCookie("localSettings", {
+	default: () => {
+		return DEFAULT_SETTINGS
+	},
+})
+
 const head = computed(() => appStore.lastHead)
 
 const mainLinks = reactive([
@@ -233,10 +242,12 @@ const handleOnClose = () => {
 			<Flex justify="between" align="center">
 				<NuxtLink to="/" :class="$style.logo">
 					<Flex align="center" gap="8">
-						<Icon v-if="getNetworkName() !== 'Mammoth'" name="logo" size="16" color="tertiary" :class="$style.logo_symbol" />
+						<Icon v-if="getNetworkName() !== 'Mammoth'" name="logo" size="16" color="tertiary"
+							  :class="$style.logo_symbol" />
 						<Text v-else size="16" style="filter: grayscale(1)">🦣</Text>
 
-						<svg width="86" height="14" viewBox="0 0 96 16" xmlns="http://www.w3.org/2000/svg" :class="$style.logo_name">
+						<svg width="86" height="14" 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"
 							/>
@@ -260,7 +271,8 @@ const handleOnClose = () => {
 			</Flex>
 
 			<Flex direction="column" gap="2">
-				<Flex @click="isModularLinksCollapsed = !isModularLinksCollapsed" align="center" gap="4" :class="$style.group_title">
+				<Flex @click="isModularLinksCollapsed = !isModularLinksCollapsed" align="center" gap="4"
+					  :class="$style.group_title">
 					<Text size="12" weight="500" color="tertiary">Modular</Text>
 					<Icon
 						name="alt-arrow-down"
@@ -271,12 +283,14 @@ const handleOnClose = () => {
 				</Flex>
 
 				<Flex v-if="!isModularLinksCollapsed" direction="column" gap="2">
-					<NavLink v-for="link in modularLinks.filter((l) => !l.hide)" :link="link" @onClose="handleOnClose" />
+					<NavLink v-for="link in modularLinks.filter((l) => !l.hide)" :link="link"
+							 @onClose="handleOnClose" />
 				</Flex>
 			</Flex>
 
 			<Flex direction="column" gap="2">
-				<Flex @click="isToolsLinkCollapsed = !isToolsLinkCollapsed" align="center" gap="4" :class="$style.group_title">
+				<Flex @click="isToolsLinkCollapsed = !isToolsLinkCollapsed" align="center" gap="4"
+					  :class="$style.group_title">
 					<Text size="12" weight="500" color="tertiary">Tools</Text>
 					<Icon
 						name="alt-arrow-down"
@@ -295,7 +309,10 @@ const handleOnClose = () => {
 		</Flex>
 
 		<Flex direction="column" gap="16" style="margin-right: 20px">
-			<Flex @click="modalsStore.open('lightNode')" align="center" gap="8" justify="between" :class="$style.light_node_btn">
+			<Flex v-if="settings.sidebar.footer.showLightNode"
+				  @click="modalsStore.open('lightNode')"
+				  align="center" gap="8" justify="between"
+				  :class="$style.light_node_btn">
 				<Flex align="center" gap="8">
 					<Icon
 						v-if="nodeStore.status === StatusMap.Started"
@@ -306,15 +323,18 @@ const handleOnClose = () => {
 					/>
 					<Icon v-else name="lumina" size="14" color="secondary" />
 
-					<Text v-if="nodeStore.status === StatusMap.Started" size="13" weight="600" color="primary">Running</Text>
+					<Text v-if="nodeStore.status === StatusMap.Started" size="13" weight="600" color="primary">Running
+					</Text>
 					<Text size="13" weight="600" color="secondary">Node</Text>
 				</Flex>
 
-				<Icon v-if="nodeStore.status !== StatusMap.Started" name="arrow-narrow-right" size="14" color="secondary" />
+				<Icon v-if="nodeStore.status !== StatusMap.Started" name="arrow-narrow-right" size="14"
+					  color="secondary" />
 				<Text v-else size="12" weight="600" color="tertiary">{{ nodeStore.percentage.toFixed(0) }}%</Text>
 			</Flex>
 
-			<Dropdown position="end" fullWidth :disabled="isSelfhosted()">
+			<Dropdown v-if="settings.sidebar.footer.showNetworkSelector" position="end" fullWidth
+					  :disabled="isSelfhosted()">
 				<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
 					<Flex align="center" gap="8">
 						<Icon name="globe" size="14" :color="head.synced ? 'brand' : 'red'" />
@@ -331,14 +351,14 @@ const handleOnClose = () => {
 						<Flex v-if="head.synced" gap="8">
 							<Icon name="check" size="12" color="brand" />
 							<Flex direction="column" gap="6">
-								<Text color="secondary">Head Synced </Text>
+								<Text color="secondary">Head Synced</Text>
 								<Text color="tertiary">{{ head.chain_id }}</Text>
 							</Flex>
 						</Flex>
 						<Flex v-else gap="8">
 							<Icon name="close" size="12" color="red" />
 							<Flex direction="column" gap="6">
-								<Text color="secondary">Head not Synced </Text>
+								<Text color="secondary">Head not Synced</Text>
 								<Text color="tertiary">{{ head.chain_id }}</Text>
 							</Flex>
 						</Flex>
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 1d1a5fe1..aa0d29c0 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -2,48 +2,10 @@
 /** UI */
 import { Dropdown, DropdownItem, DropdownTitle } from "@/components/ui/Dropdown"
 
-/** Services */
-import { isPrefersDarkScheme } from "@/services/utils"
-
 /** Store */
 import { useAppStore } from "@/store/app.store"
-const appStore = useAppStore()
-
-const theme = useCookie("theme", { default: () => "dark" })
-switch (theme.value) {
-	case "dark":
-	case "dimmed":
-	case "light":
-		appStore.theme = theme.value
-
-		break
-
-	case "system":
-		appStore.theme = "system"
 
-		break
-}
-
-onMounted(() => {
-	let root = document.querySelector("html")
-
-	if (appStore.theme === "system") {
-		root.setAttribute("theme", isPrefersDarkScheme() ? "dark" : "light")
-	} else {
-		root.setAttribute("theme", appStore.theme)
-	}
-})
-
-watch(
-	() => appStore.theme,
-	() => {
-		if (appStore.theme === "system") {
-			window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-				root.setAttribute("theme", isPrefersDarkScheme() ? "dark" : "light")
-			})
-		}
-	},
-)
+const appStore = useAppStore()
 
 const handleChangeTheme = (target) => {
 	const root = document.querySelector("html")
@@ -85,7 +47,8 @@ const handleChangeTheme = (target) => {
 							<a href="/celenium-io" target="_blank">
 								<Icon name="github" size="14" color="tertiary" />
 							</a>
-							<a href="https://discord.com/channels/846362414039695391/1168936555302355005" target="_blank">
+							<a href="https://discord.com/channels/846362414039695391/1168936555302355005"
+							   target="_blank">
 								<Icon name="discord" size="14" color="tertiary" />
 							</a>
 							<a
@@ -104,13 +67,15 @@ const handleChangeTheme = (target) => {
 								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Browse</Text>
 							</NuxtLink>
 							<NuxtLink to="/txs">
-								<Text size="13" weight="500" color="secondary" :class="$style.link_text">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" :class="$style.link_text">Blocks</Text>
 							</NuxtLink>
 							<NuxtLink to="/addresses">
-								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Addresses</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Addresses
+								</Text>
 							</NuxtLink>
 						</Flex>
 
@@ -120,10 +85,12 @@ const handleChangeTheme = (target) => {
 								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Networks</Text>
 							</NuxtLink>
 							<NuxtLink to="/namespaces">
-								<Text size="13" weight="500" color="secondary" :class="$style.link_text">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" :class="$style.link_text">Validators</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Validators
+								</Text>
 							</NuxtLink>
 						</Flex>
 
@@ -131,7 +98,8 @@ const handleChangeTheme = (target) => {
 							<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>
+									<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>
@@ -139,16 +107,20 @@ const handleChangeTheme = (target) => {
 								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Faucet</Text>
 							</NuxtLink>
 							<NuxtLink to="/blobstream">
-								<Text size="13" weight="500" color="secondary" :class="$style.link_text">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" :class="$style.link_text">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" :class="$style.link_text">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" :class="$style.link_text">Bookmarks</Text>
+								<Text size="13" weight="500" color="secondary" :class="$style.link_text">Bookmarks
+								</Text>
 							</NuxtLink>
 						</Flex>
 
@@ -158,7 +130,8 @@ const handleChangeTheme = (target) => {
 								<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" :class="$style.link_text">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" :class="$style.link_text">Hubble</Text>
@@ -169,12 +142,14 @@ const handleChangeTheme = (target) => {
 
 				<Flex align="center" gap="12" style="height: fit-content">
 					<Flex align="center" gap="6" :class="$style.btn">
-						<Text size="12" weight="600" color="tertiary"> Donate </Text>
-						<a href="https://celenium.io/address/celestia1avr0gh0v6errxr8g8rjkscxf3jqx4k6ypkh2rl" target="_blank">
-							<Text size="12" weight="600" color="secondary"> TIA </Text>
+						<Text size="12" weight="600" color="tertiary"> Donate</Text>
+						<a href="https://celenium.io/address/celestia1avr0gh0v6errxr8g8rjkscxf3jqx4k6ypkh2rl"
+						   target="_blank">
+							<Text size="12" weight="600" color="secondary"> TIA</Text>
 						</a>
-						<a href="https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761" target="_blank">
-							<Text size="12" weight="600" color="secondary"> ETH </Text>
+						<a href="https://etherscan.io/address/0x9FfB1cb28c55735e77B352eE918b4F0c3595a761"
+						   target="_blank">
+							<Text size="12" weight="600" color="secondary"> ETH</Text>
 						</a>
 					</Flex>
 
diff --git a/components/cmd/CommandMenu.vue b/components/cmd/CommandMenu.vue
index 465fd241..264d7bd9 100644
--- a/components/cmd/CommandMenu.vue
+++ b/components/cmd/CommandMenu.vue
@@ -30,6 +30,7 @@ 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()
@@ -39,7 +40,6 @@ const notificationsStore = useNotificationsStore()
 const appConfig = useAppConfig()
 
 const developerMode = useCookie("developerMode", { default: () => false })
-const theme = useCookie("theme", { default: () => "dark" })
 const showPromoBackground = useCookie("showPromoBackground", { default: () => true })
 
 const route = useRoute()
@@ -517,70 +517,6 @@ const quickCommandsGroup = computed(() => {
 })
 
 const rawSettingsActions = [
-	{
-		type: "command:nested",
-		icon: "moon",
-		title: "Switch Theme",
-		subtitle: "Command",
-		placeholder: "Choose Theme...",
-		runText: "Switch Theme",
-		nestedTitle: "Theme",
-
-		actions: [
-			{
-				id: id(),
-				type: "callback",
-				icon: "moon",
-				title: "Dark Theme",
-				subtitle: "Theme",
-				runText: "Switch to Dark Theme",
-				callback: () => {
-					root.setAttribute("theme", "dark")
-					appStore.theme = "dark"
-					theme.value = "dark"
-				},
-			},
-			{
-				id: id(),
-				type: "callback",
-				icon: "sun",
-				title: "Light Theme",
-				subtitle: "Theme",
-				runText: "Switch to Light Theme",
-				callback: () => {
-					root.setAttribute("theme", "light")
-					appStore.theme = "light"
-					theme.value = "light"
-				},
-			},
-			{
-				id: id(),
-				type: "callback",
-				icon: "moon",
-				title: "Dimmed Theme",
-				subtitle: "Theme",
-				runText: "Switch to Dimmed Theme",
-				callback: () => {
-					root.setAttribute("theme", "dimmed")
-					appStore.theme = "dimmed"
-					theme.value = "dimmed"
-				},
-			},
-			{
-				id: id(),
-				type: "callback",
-				icon: "settings",
-				title: "System Preferences",
-				subtitle: "Theme",
-				runText: "Switch to System",
-				callback: () => {
-					root.setAttribute("theme", isPrefersDarkScheme() ? "dark" : "light")
-					appStore.theme = "system"
-					theme.value = "system"
-				},
-			},
-		],
-	},
 	{
 		type: "command:nested",
 		icon: "globe",
@@ -1408,11 +1344,13 @@ const runBounce = () => {
 <template>
 	<Transition name="fastpopup">
 		<div v-if="appStore.showCmd" :class="$style.wrapper">
-			<Flex @click.stop="handleFocus" ref="popupEl" direction="column" :class="[$style.popup, bounce && $style.bounce]">
+			<Flex @click.stop="handleFocus" ref="popupEl" direction="column"
+				  :class="[$style.popup, bounce && $style.bounce]">
 				<!-- Input Field -->
 				<Flex direction="column" :class="$style.header">
 					<Flex v-if="isCommandMode" align="center" gap="8" :class="$style.breadcrumbs">
-						<Icon @click="exitCommandMode" name="arrow-narrow-left" size="12" color="secondary" :class="$style.back_btn" />
+						<Icon @click="exitCommandMode" name="arrow-narrow-left" size="12" color="secondary"
+							  :class="$style.back_btn" />
 
 						<Flex align="center" gap="6">
 							<Text size="12" weight="600" color="tertiary">Quick Actions</Text>
@@ -1441,7 +1379,9 @@ const runBounce = () => {
 				<Flex v-if="!mode" ref="listEl" direction="column" :class="$style.list">
 					<template v-for="group in groups">
 						<Flex v-if="group.value.actions.length" direction="column" :class="$style.group">
-							<Text size="12" weight="500" color="tertiary" :class="$style.label">{{ group.value.title }}</Text>
+							<Text size="12" weight="500" color="tertiary" :class="$style.label">{{ group.value.title
+								}}
+							</Text>
 
 							<Flex direction="column" :class="$style.actions">
 								<Item
@@ -1460,7 +1400,8 @@ const runBounce = () => {
 				<!-- Command Mode -->
 				<Flex v-else-if="isCommandMode" direction="column" :class="$style.list">
 					<Flex direction="column" :class="$style.group">
-						<Text v-if="commandMetadata.action.nestedTitle" size="12" weight="500" color="tertiary" :class="$style.label">
+						<Text v-if="commandMetadata.action.nestedTitle" size="12" weight="500" color="tertiary"
+							  :class="$style.label">
 							{{ commandMetadata.action.nestedTitle }}
 						</Text>
 
@@ -1485,7 +1426,8 @@ const runBounce = () => {
 				<Flex align="center" justify="between" :class="$style.footer">
 					<Icon name="logo" size="14" color="tertiary" />
 
-					<Flex v-if="runText.length" @click="handleExecute(getActionById())" align="center" gap="8" :class="$style.button">
+					<Flex v-if="runText.length" @click="handleExecute(getActionById())" align="center" gap="8"
+						  :class="$style.button">
 						<Text size="13" weight="600" color="secondary">{{ runText }}</Text>
 						<Kbd>
 							<Icon name="return" size="12" color="secondary" />
@@ -1493,8 +1435,12 @@ const runBounce = () => {
 					</Flex>
 					<Flex v-else align="center" gap="8">
 						<Text size="13" weight="600" color="tertiary">Navigate</Text>
-						<Kbd><Text size="12" weight="600" color="primary">↓</Text></Kbd>
-						<Kbd><Text size="12" weight="600" color="primary">↑</Text></Kbd>
+						<Kbd>
+							<Text size="12" weight="600" color="primary">↓</Text>
+						</Kbd>
+						<Kbd>
+							<Text size="12" weight="600" color="primary">↑</Text>
+						</Kbd>
 					</Flex>
 				</Flex>
 			</Flex>
diff --git a/components/modals/LoginModal.vue b/components/modals/LoginModal.vue
new file mode 100644
index 00000000..44bcafc8
--- /dev/null
+++ b/components/modals/LoginModal.vue
@@ -0,0 +1,68 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Input from "@/components/ui/Input.vue"
+import Button from "~/components/ui/Button.vue"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store.js"
+
+const modalsStore = useModalsStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const username = ref()
+const password = ref()
+
+const handleSignup = () => {
+	modalsStore.closeAll()
+	modalsStore.open("signup")
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="400" disable-trap>
+		<Flex align="center" direction="column" gap="20">
+			<Flex wide>
+				<Text size="14" weight="600" color="primary">Celenium Login</Text>
+			</Flex>
+
+			<Input v-model="username" label="Username" placeholder="Account username" wide />
+			<Input v-model="password" label="Password" placeholder="Your password" wide />
+
+			<Button type="white" size="small" wide>Login</Button>
+
+			<Flex wide justify="center" gap="4">
+				<Text size="12" weight="600" color="tertiary">Don't have an account?</Text>
+				<Text @click="handleSignup" size="12" weight="600" color="blue" align="center"
+					  class="clickable">
+					Sign up
+				</Text>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.tab {
+	border-radius: 6px;
+	background: var(--op-5);
+	cursor: pointer;
+	user-select: none;
+
+	padding: 6px 8px;
+
+	transition: all .2s ease;
+
+	&.selected {
+		background: var(--op-10);
+	}
+
+	&:hover {
+		background: var(--op-10);
+	}
+}
+</style>
diff --git a/components/modals/ModalsManager.vue b/components/modals/ModalsManager.vue
index abf31798..800c1ebc 100644
--- a/components/modals/ModalsManager.vue
+++ b/components/modals/ModalsManager.vue
@@ -13,6 +13,7 @@ import QRCodeModal from "./QRCodeModal.vue"
 import RawDataModal from "./RawDataModal.vue"
 import SendModal from "./SendModal.vue"
 import StakingModal from "./StakingModal.vue"
+import SettingsModal from "~/components/modals/SettingsModal.vue"
 import VestingDetailsModal from "./VestingDetailsModal.vue"
 import HexSettingsModal from "./HexSettingsModal.vue"
 import APIModal from "./APIModal.vue"
@@ -25,9 +26,12 @@ import HyperlaneTokenModal from "./HyperlaneTokenModal.vue"
 import HyperlaneMailboxModal from "./HyperlaneMailboxModal.vue"
 import IBCTransferModal from "./IBCTransferModal.vue"
 import IBCClientModal from "./IBCClientModal.vue"
+import LoginModal from "~/components/modals/LoginModal.vue"
+import SignupModal from "~/components/modals/SignupModal.vue"
 
 /** Store */
 import { useModalsStore } from "@/store/modals.store"
+
 const modalsStore = useModalsStore()
 </script>
 
@@ -46,16 +50,22 @@ const modalsStore = useModalsStore()
 	<SendModal :show="modalsStore.modals.send" @onClose="modalsStore.close('send')" />
 	<VestingDetailsModal :show="modalsStore.modals.vestingDetails" @onClose="modalsStore.close('vestingDetails')" />
 	<StakingModal :show="modalsStore.modals.staking" @onClose="modalsStore.close('staking')" />
+	<SettingsModal :show="modalsStore.modals.settings" @onClose="modalsStore.close('settings')" />
 	<HexSettingsModal :show="modalsStore.modals.hexSettings" @onClose="modalsStore.close('hexSettings')" />
 	<APIModal :show="modalsStore.modals.api" @onClose="modalsStore.close('api')" />
 	<LightNodeModal :show="modalsStore.modals.lightNode" @onClose="modalsStore.close('lightNode')" />
-	<LightNodeSettingsModal :show="modalsStore.modals.lightNodeSettings" @onClose="modalsStore.close('lightNodeSettings')" />
+	<LightNodeSettingsModal :show="modalsStore.modals.lightNodeSettings"
+							@onClose="modalsStore.close('lightNodeSettings')" />
 	<ConnectModal :show="modalsStore.modals.connect" @onClose="modalsStore.close('connect')" />
 	<ChartModal :show="modalsStore.modals.chart" @onClose="modalsStore.close('chart')" />
 	<RollupRankModal :show="modalsStore.modals.rollupRank" @onClose="modalsStore.close('rollupRank')" />
-	<HyperlaneTransferModal :show="modalsStore.modals.hyperlaneTransfer" @onClose="modalsStore.close('hyperlaneTransfer')" />
+	<HyperlaneTransferModal :show="modalsStore.modals.hyperlaneTransfer"
+							@onClose="modalsStore.close('hyperlaneTransfer')" />
 	<HyperlaneTokenModal :show="modalsStore.modals.hyperlaneToken" @onClose="modalsStore.close('hyperlaneToken')" />
-	<HyperlaneMailboxModal :show="modalsStore.modals.hyperlaneMailbox" @onClose="modalsStore.close('hyperlaneMailbox')" />
+	<HyperlaneMailboxModal :show="modalsStore.modals.hyperlaneMailbox"
+						   @onClose="modalsStore.close('hyperlaneMailbox')" />
 	<IBCTransferModal :show="modalsStore.modals.ibcTransfer" @onClose="modalsStore.close('ibcTransfer')" />
 	<IBCClientModal :show="modalsStore.modals.ibcClient" @onClose="modalsStore.close('ibcClient')" />
+	<LoginModal :show="modalsStore.modals.login" @onClose="modalsStore.close('login')" />
+	<SignupModal :show="modalsStore.modals.signup" @onClose="modalsStore.close('signup')" />
 </template>
diff --git a/components/modals/SettingsModal.vue b/components/modals/SettingsModal.vue
new file mode 100644
index 00000000..68aef39e
--- /dev/null
+++ b/components/modals/SettingsModal.vue
@@ -0,0 +1,194 @@
+<script setup>
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Toggle from "@/components/ui/Toggle.vue"
+import { Dropdown, DropdownItem } from "@/components/ui/Dropdown/index.js"
+import Button from "~/components/ui/Button.vue"
+
+/** Services */
+import { DEFAULT_SETTINGS } from "@/services/constants/settings.js"
+
+/** Store */
+import { useAuthStore } from "@/store/auth.store.js"
+
+const authStore = useAuthStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const tabs = [
+	{
+		name: "Appearance",
+		key: "appearance",
+	},
+	{
+		name: "Sidebar",
+		key: "sidebar",
+	},
+	{
+		name: "Advanced",
+		key: "advanced",
+	},
+]
+const selectedTab = ref(tabs[0].key)
+
+const settings = useCookie("localSettings", {
+	default: () => {
+		return DEFAULT_SETTINGS
+	},
+})
+
+const handleClick = ({ selectedTab, sectionKey, setting, value }) => {
+	if (selectedTab) {
+		settings.value[selectedTab][sectionKey][setting] = value
+	}
+
+	authStore.saveSettings(settings.value)
+}
+
+const SettingsUIMap = {
+	appearance: {
+		general: {
+			_title: "General",
+			items: {
+				theme: {
+					title: "Interface theme",
+					description: "Interface theme description",
+					type: "selector",
+					values: ["dark", "light", "dimmed", "system"],
+				},
+			},
+		},
+	},
+	sidebar: {
+		footer: {
+			_title: "Footer",
+			items: {
+				showLightNode: {
+					title: "Show light node",
+					description: "Show light node button",
+					type: "toggle",
+				},
+				showNetworkSelector: {
+					title: "Show network selector",
+					description: "Show network selector button",
+					type: "toggle",
+				},
+			},
+		},
+	},
+	advanced: {
+		other: {
+			_title: "Other",
+			items: {
+				showAds: {
+					title: "Show advertisements",
+					description: "Show advertisements description",
+					type: "toggle",
+				},
+			},
+		},
+	},
+}
+
+watch(() => props.show, () => {
+	if (!props.show) {
+		selectedTab.value = tabs[0].key
+	}
+})
+
+watch(() => authStore.isAuthenticated, () => {
+	if (authStore.isAuthenticated && Object.keys(authStore.user.settings).length) {
+		settings.value = JSON.parse(JSON.stringify(authStore.user.settings))
+	}
+})
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="500" disable-trap :closeOutside="false">
+		<Flex direction="column" gap="20">
+			<Text size="14" weight="600" color="primary">Settings</Text>
+
+			<Flex align="center" gap="6">
+				<Text v-for="tab in tabs" @click="selectedTab = tab.key" size="13" weight="600"
+					  :color="selectedTab === tab.key ? 'primary' : 'secondary'"
+					  :class="[$style.tab, selectedTab === tab.key && $style.selected]">
+					{{ tab.name }}
+				</Text>
+			</Flex>
+
+			<Flex direction="column" gap="24">
+				<Flex v-for="(section, sectionKey) in settings[selectedTab]" direction="column" gap="16">
+					<Text size="13" weight="600" color="secondary">
+						{{ SettingsUIMap[selectedTab][sectionKey]._title }}
+					</Text>
+
+					<Flex v-for="setting in Object.keys(section)" justify="between">
+						<Flex direction="column" gap="6">
+							<Text size="13" weight="600" color="primary">
+								{{ SettingsUIMap[selectedTab][sectionKey].items[setting].title }}
+							</Text>
+							<Text size="12" weight="500" color="tertiary">
+								{{ SettingsUIMap[selectedTab][sectionKey].items[setting].description }}
+							</Text>
+						</Flex>
+
+						<template v-if="SettingsUIMap[selectedTab][sectionKey].items[setting].type === 'selector'">
+							<Dropdown>
+								<Button size="mini" type="secondary">
+									<Icon name="sun" size="12" color="primary" />
+									<Text color="primary">{{ settings[selectedTab][sectionKey][setting] }}
+									</Text>
+									<Icon name="chevron" size="12" color="secondary" />
+								</Button>
+
+								<template #popup>
+									<DropdownItem
+										v-for="value in SettingsUIMap[selectedTab][sectionKey].items[setting].values"
+										@click="handleClick({selectedTab, sectionKey, setting, value})"
+									>
+										<Flex align="center" gap="8">
+											<Icon
+												:name="settings[selectedTab][sectionKey][setting] === value ? 'check' : ''"
+												size="12"
+												color="secondary"
+											/>
+											{{ value }}
+										</Flex>
+									</DropdownItem>
+								</template>
+							</Dropdown>
+						</template>
+						<template v-else-if="SettingsUIMap[selectedTab][sectionKey].items[setting].type === 'toggle'">
+							<Toggle v-model="settings[selectedTab][sectionKey][setting]" @click="handleClick" />
+						</template>
+					</Flex>
+				</Flex>
+			</Flex>
+
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.tab {
+	border-radius: 6px;
+	background: var(--op-5);
+	cursor: pointer;
+	user-select: none;
+
+	padding: 6px 8px;
+
+	transition: all .2s ease;
+
+	&.selected {
+		background: var(--op-10);
+	}
+
+	&:hover {
+		background: var(--op-10);
+	}
+}
+</style>
diff --git a/components/modals/SignupModal.vue b/components/modals/SignupModal.vue
new file mode 100644
index 00000000..5b32172b
--- /dev/null
+++ b/components/modals/SignupModal.vue
@@ -0,0 +1,201 @@
+<script setup>
+/** Vendor */
+import * as z from "zod"
+
+/** UI */
+import Modal from "@/components/ui/Modal.vue"
+import Input from "@/components/ui/Input.vue"
+import Button from "~/components/ui/Button.vue"
+
+/** Store */
+import { useModalsStore } from "@/store/modals.store.js"
+
+const modalsStore = useModalsStore()
+
+const emit = defineEmits(["onClose"])
+const props = defineProps({
+	show: Boolean,
+})
+
+const username = ref()
+const usernameValidation = z
+	.string()
+	.min(3, "Minimum 3 characters long")
+	.max(150, "Maximum 150 characters long")
+	.trim()
+const usernameError = ref()
+
+const email = ref()
+const emailValidation = z.email()
+const emailError = ref()
+
+const password = ref()
+const passwordValidation = z.string().min(8, "Minimum 8 characters long")
+const passwordError = ref()
+
+const repeatPassword = ref()
+const repeatPasswordError = ref()
+
+const handleCreateAccount = () => {
+	if (!username.value) {
+		usernameError.value = "Username is required"
+		return
+	}
+	const { error: usernameErr } = usernameValidation.safeParse(username.value)
+	if (usernameErr) {
+		const issue = JSON.parse(usernameErr)[0]
+		usernameError.value = issue.message
+		return
+	}
+
+	if (!email.value) {
+		emailError.value = "Email is required"
+		return
+	}
+	const { error: emailErr } = (emailValidation.safeParse(email.value))
+	if (emailErr) {
+		const issue = JSON.parse(emailErr)[0]
+		emailError.value = issue.message
+		return
+	}
+
+	if (!password.value) {
+		passwordError.value = "Password is required"
+		return
+	}
+	const { error: passwordErr } = (passwordValidation.safeParse(password.value))
+	if (passwordErr) {
+		const issue = JSON.parse(passwordErr)[0]
+		passwordError.value = issue.message
+		return
+	}
+
+	if (!repeatPassword.value) {
+		passwordError.value = "Repeated password is required"
+		return
+	}
+	const { error: repeatPasswordErr } = (passwordValidation.safeParse(repeatPassword.value))
+	if (repeatPasswordErr) {
+		const issue = JSON.parse(repeatPasswordErr)[0]
+		repeatPasswordError.value = issue.message
+		return
+	}
+
+	if (password.value !== repeatPassword.value) {
+		repeatPasswordError.value = "Wrong repeated password"
+		return
+	}
+
+	try {
+		const data = $fetch("https://auth.celenium.io/accounts/register")
+		console.log(data)
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+const handleLogin = () => {
+	modalsStore.closeAll()
+	modalsStore.open("login")
+}
+</script>
+
+<template>
+	<Modal :show="show" @onClose="emit('onClose')" width="400" disable-trap>
+		<Flex align="center" direction="column" gap="20">
+			<Flex wide justify="start">
+				<Text size="14" weight="600" color="primary">Celenium Signup</Text>
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Input v-model="username" @click="usernameError = null" label="Username" placeholder="" wide>
+					<template v-if="usernameError" #rightText>
+						<Text size="12" weight="600" color="red">
+							{{ usernameError }}
+						</Text>
+					</template>
+				</Input>
+				<Text size="12" weight="500" color="tertiary">
+					150 characters or fewer. Letters, digits and @/./+/-/_ only.
+				</Text>
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Input v-model="email" @click="emailError = null" label="Email" placeholder="" wide>
+					<template v-if="emailError" #rightText>
+						<Text size="12" weight="600" color="red">
+							{{ emailError }}
+						</Text>
+					</template>
+				</Input>
+				<Text size="12" weight="500" color="tertiary">
+					Enter a valid email address.
+				</Text>
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Input v-model="password" @click="passwordError = null" type="password" label="Password"
+					   placeholder="Your password" wide>
+					<template v-if="passwordError" #rightText>
+						<Text size="12" weight="600" color="red">
+							{{ passwordError }}
+						</Text>
+					</template>
+				</Input>
+				<Text size="12" weight="500" height="150" color="tertiary">
+
+					- Your password can’t be too similar to your other personal information.<br />
+					- Your password must contain at least 8 characters. <br />
+					- Your password can’t be a commonly used password. <br />
+					- Your password can’t be entirely numeric.
+				</Text>
+			</Flex>
+
+			<Flex wide direction="column" gap="8">
+				<Input v-model="repeatPassword" @click="repeatPasswordError = null" type="password"
+					   label="Confirm Password"
+					   placeholder="Repeat password">
+					<template v-if="repeatPasswordError" #rightText>
+						<Text size="12" weight="600" color="red">
+							{{ repeatPasswordError }}
+						</Text>
+					</template>
+				</Input>
+				<Text size="12" weight="500" color="tertiary">
+					Enter the same password as before, for verification.
+				</Text>
+			</Flex>
+
+			<Button @click="handleCreateAccount" type="white" size="small" wide>Create Account</Button>
+
+			<Flex wide align="center" justify="center" gap="4">
+				<Text size="12" weight="600" color="tertiary">Already have an account?</Text>
+				<Text @click="handleLogin" size="12" weight="600" color="blue" align="center"
+					  class="clickable">
+					Login
+				</Text>
+			</Flex>
+		</Flex>
+	</Modal>
+</template>
+
+<style module>
+.tab {
+	border-radius: 6px;
+	background: var(--op-5);
+	cursor: pointer;
+	user-select: none;
+
+	padding: 6px 8px;
+
+	transition: all .2s ease;
+
+	&.selected {
+		background: var(--op-10);
+	}
+
+	&:hover {
+		background: var(--op-10);
+	}
+}
+</style>
diff --git a/components/shared/AdvBanner.vue b/components/shared/AdvBanner.vue
index 619e98b8..5a365a6a 100644
--- a/components/shared/AdvBanner.vue
+++ b/components/shared/AdvBanner.vue
@@ -1,9 +1,11 @@
 <script setup>
 /** Services */
 import { getAdvByName, getRandomAdv } from "@/services/constants/advertising"
+import { DEFAULT_SETTINGS } from "~/services/constants/settings.js"
 
 /** Store */
 import { useModalsStore } from "@/store/modals.store"
+
 const modalsStore = useModalsStore()
 
 const props = defineProps({
@@ -19,6 +21,12 @@ const props = defineProps({
 
 const router = useRouter()
 
+const settings = useCookie("localSettings", {
+	default: () => {
+		return DEFAULT_SETTINGS
+	},
+})
+
 const adv = ref({})
 const isDisplayed = ref(true)
 
@@ -43,7 +51,7 @@ onMounted(() => {
 
 <template>
 	<Flex
-		v-if="adv.name"
+		v-if="adv.name && settings.advanced.other.showAds"
 		@click="handleClick()"
 		:class="[$style.wrapper, orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]"
 	>
@@ -52,28 +60,30 @@ onMounted(() => {
 				<Icon v-if="adv.icon" :name="adv.icon" size="24" color="brand" />
 
 				<Flex direction="column" gap="8">
-					<Text size="13" weight="600" color="primary"> {{ adv.header }} </Text>
-					<Text size="13" weight="500" color="tertiary" height="150"> {{ adv.body }} </Text>
+					<Text size="13" weight="600" color="primary"> {{ adv.header }}</Text>
+					<Text size="13" weight="500" color="tertiary" height="150"> {{ adv.body }}</Text>
 				</Flex>
 			</Flex>
 
 			<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" />
+				<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 align="center" gap="8">
 				<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
-				<Text size="13" weight="600" color="primary" :class="$style.text"> {{ adv.header }} </Text>
+				<Text size="13" weight="600" color="primary" :class="$style.text"> {{ adv.header }}</Text>
 			</Flex>
 
-			<Text size="13" weight="600" color="tertiary" height="140" :class="$style.text"> {{ adv.body }} </Text>
+			<Text size="13" weight="600" color="tertiary" height="140" :class="$style.text"> {{ adv.body }}</Text>
 
 			<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" />
+				<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>
 	</Flex>
@@ -117,6 +127,7 @@ onMounted(() => {
 	& .footer {
 		padding: 2px;
 	}
+
 	& .close_icon {
 		display: none;
 		padding: 2px;
diff --git a/package.json b/package.json
index a438250b..c1bf27df 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
 		"protobufjs": "^7.2.6",
 		"qrcode": "^1.5.3",
 		"uuid": "9.0.1",
-		"vite-plugin-node-polyfills": "^0.21.0"
+		"vite-plugin-node-polyfills": "^0.21.0",
+		"zod": "^4.1.12"
 	}
 }
diff --git a/pages/auth/callback.vue b/pages/auth/callback.vue
new file mode 100644
index 00000000..cb10ea6f
--- /dev/null
+++ b/pages/auth/callback.vue
@@ -0,0 +1,19 @@
+<script setup>
+/** Store */
+import { useAuthStore } from "@/store/auth.store.js"
+
+const authStore = useAuthStore()
+
+const router = useRouter()
+
+onMounted(async () => {
+	const urlParams = new URLSearchParams(window.location.search)
+	const code = urlParams.get("code")
+
+	if (code) {
+		await authStore.getTokenByCode(code)
+	}
+
+	router.push("/")
+})
+</script>
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc6c81f7..59826774 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ dependencies:
   vite-plugin-node-polyfills:
     specifier: ^0.21.0
     version: 0.21.0(rollup@4.50.0)(vite@6.3.5)
+  zod:
+    specifier: ^4.1.12
+    version: 4.1.12
 
 devDependencies:
   '@nuxt/devtools':
@@ -9422,3 +9425,7 @@ packages:
       archiver-utils: 5.0.2
       compress-commons: 6.0.2
       readable-stream: 4.7.0
+
+  /zod@4.1.12:
+    resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}
+    dev: false
diff --git a/services/auth.js b/services/auth.js
new file mode 100644
index 00000000..ee6b709d
--- /dev/null
+++ b/services/auth.js
@@ -0,0 +1,20 @@
+export const generateRandomString = (length) => {
+	const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~"
+	let text = ""
+	for (let i = 0; i < length; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length))
+	}
+	return text
+}
+
+export const generateCodeChallenge = async (codeVerifier) => {
+	const encoder = new TextEncoder()
+	const data = encoder.encode(codeVerifier)
+	const hashBuffer = await crypto.subtle.digest("SHA-256", data)
+	const hashArray = Array.from(new Uint8Array(hashBuffer))
+	const hashBase64 = btoa(String.fromCharCode.apply(null, hashArray))
+	return hashBase64
+		.replace(/\+/g, "-")
+		.replace(/\//g, "_")
+		.replace(/=+$/, "")
+}
\ No newline at end of file
diff --git a/services/config.js b/services/config.js
index 4189ad46..b4e6b02c 100644
--- a/services/config.js
+++ b/services/config.js
@@ -129,3 +129,15 @@ export const rollupRankingServiceURL = () => useRuntimeConfig().public.ROLLUP_RA
 export const tvlServiceURL = () => useRuntimeConfig().public.TVL
 
 export const isSelfhosted = () => useRuntimeConfig().public.SELFHOSTED
+
+export const Auth = {
+	clientId: "5tgdN5oPVVbNFh5qUcbgvkASQDeYP3Wez2SdSKpw",
+	scope: "read",
+	baseUrl: "https://auth.celenium.io",
+	authorizeUrl: "/oauth/authorize/",
+	getTokenUrl: "/oauth/token/",
+	revokeTokenUrl: "/oauth/revoke_token/",
+	getCurrentUserUrl: "/api/user/get/",
+	saveSettingsUrl: "/api/user/settings/",
+	redirectPath: "/auth/callback",
+}
diff --git a/services/constants/settings.js b/services/constants/settings.js
new file mode 100644
index 00000000..39e7eaaf
--- /dev/null
+++ b/services/constants/settings.js
@@ -0,0 +1,18 @@
+export const DEFAULT_SETTINGS = {
+	appearance: {
+		general: {
+			theme: "dark",
+		},
+	},
+	sidebar: {
+		footer: {
+			showLightNode: true,
+			showNetworkSelector: true,
+		},
+	},
+	advanced: {
+		other: {
+			showAds: true,
+		},
+	},
+}
\ No newline at end of file
diff --git a/store/auth.store.js b/store/auth.store.js
new file mode 100644
index 00000000..064e0bb4
--- /dev/null
+++ b/store/auth.store.js
@@ -0,0 +1,205 @@
+/** Services */
+import { generateRandomString, generateCodeChallenge } from "@/services/auth"
+
+/** Config */
+import { Auth } from "@/services/config"
+
+export const useAuthStore = defineStore("auth", {
+	state: () => ({
+		user: null,
+		isAuthenticated: false,
+	}),
+
+	getters: {
+		getUser: (state) => state.user,
+		getIsAuthenticated: (state) => state.isAuthenticated,
+	},
+
+	actions: {
+		async initialize() {
+			const authToken = localStorage.getItem("access_token")
+			if (authToken) {
+				await this.fetchUserData()
+			}
+		},
+
+		async login() {
+			try {
+				const codeVerifier = generateRandomString(128)
+				localStorage.setItem("code_verifier", codeVerifier)
+				const codeChallenge = await generateCodeChallenge(codeVerifier)
+
+				const queryParams = new URLSearchParams({
+					client_id: Auth.clientId,
+					redirect_uri: `${window.location.origin}${Auth.redirectPath}`,
+					response_type: "code",
+					scope: Auth.scope,
+					code_challenge: codeChallenge,
+					code_challenge_method: "S256",
+				})
+
+				window.location.href = `${Auth.baseUrl}${Auth.authorizeUrl}?${queryParams.toString()}`
+			} catch (error) {
+				console.error("Login error:", error)
+			}
+		},
+
+		async getTokenByCode(code) {
+			try {
+				const codeVerifier = localStorage.getItem("code_verifier")
+				if (!codeVerifier) {
+					throw new Error("сode verifier not found")
+				}
+
+				const response = await fetch(`${Auth.baseUrl}${Auth.getTokenUrl}`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/x-www-form-urlencoded",
+					},
+					body: new URLSearchParams({
+						grant_type: "authorization_code",
+						client_id: Auth.clientId,
+						redirect_uri: `${window.location.origin}${Auth.redirectPath}`,
+						code,
+						code_verifier: codeVerifier,
+					}),
+				})
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! Status: ${response.status}`)
+				}
+
+				const data = await response.json()
+
+				localStorage.removeItem("code_verifier")
+				localStorage.setItem("access_token", data.access_token)
+				localStorage.setItem("refresh_token", data.refresh_token)
+
+				await this.fetchUserData()
+			} catch (error) {
+				console.error("Get token error:", error)
+			}
+		},
+
+		async fetchUserData() {
+			try {
+				const token = localStorage.getItem("access_token")
+				if (!token) {
+					throw new Error("No access token")
+				}
+
+				const response = await fetch(`${Auth.baseUrl}${Auth.getCurrentUserUrl}`, {
+					headers: {
+						"Authorization": `Bearer ${token}`,
+					},
+				})
+
+				if (!response.ok) {
+					if (response.status === 401) {
+						const refreshToken = localStorage.getItem("refresh_token")
+						const refreshed = await this.refreshToken(refreshToken)
+
+						if (refreshed) {
+							return await this.fetchUserData()
+						} else {
+							throw new Error("refresh token expired")
+						}
+					}
+					throw new Error(`HTTP error! Status: ${response.status}`)
+				}
+
+				const userData = await response.json()
+				this.user = userData
+				this.isAuthenticated = true
+			} catch (error) {
+				console.error(error)
+				this.logout()
+			}
+		},
+
+		async refreshToken(refreshToken) {
+			try {
+				const response = await fetch(`${Auth.baseUrl}${Auth.getTokenUrl}`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/x-www-form-urlencoded",
+					},
+					body: new URLSearchParams({
+						grant_type: "refresh_token",
+						client_id: Auth.clientId,
+						refresh_token: refreshToken,
+					}),
+				})
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! Status: ${response.status}`)
+				}
+
+				const data = await response.json()
+
+				localStorage.setItem("access_token", data.access_token)
+				localStorage.setItem("refresh_token", data.refresh_token)
+				return true
+			} catch (error) {
+				console.error("Error refreshing token:", error)
+				return false
+			}
+		},
+
+		async revokeToken() {
+			try {
+				const refreshToken = localStorage.getItem("refresh_token")
+				const response = await fetch(`${Auth.baseUrl}${Auth.revokeTokenUrl}`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/x-www-form-urlencoded",
+					},
+					body: new URLSearchParams({
+						token: refreshToken,
+						client_id: Auth.clientId,
+					}),
+				})
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! Status: ${response.status}`)
+				}
+			} catch (error) {
+				console.error("Error revoking token:", error)
+				this.logout()
+			}
+		},
+
+		async saveSettings(settings) {
+			try {
+				const token = localStorage.getItem("access_token")
+				if (!token) {
+					throw new Error("No access token")
+				}
+
+				const response = await fetch(`${Auth.baseUrl}${Auth.saveSettingsUrl}`, {
+						method: "POST",
+						headers: {
+							"Accept": "application/json",
+							"Authorization": `Bearer ${token}`,
+							"Content-Type": "application/json",
+						},
+						body: JSON.stringify({ settings }),
+					},
+				)
+
+				return (response.ok)
+			} catch (error) {
+				console.error("Error saving settings:", error)
+
+			}
+		},
+
+		logout() {
+			localStorage.removeItem("access_token")
+			localStorage.removeItem("refresh_token")
+			this.user = null
+			this.isAuthenticated = false
+			this.error = null
+		},
+	},
+})
\ No newline at end of file