diff --git a/package.json b/package.json
index 2dacd46..93f101c 100644
--- a/package.json
+++ b/package.json
@@ -31,13 +31,13 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@reactive-dot/core": "^0.9.0",
-    "@reactive-dot/react": "^0.9.0",
+    "@reactive-dot/core": "^0.10.0",
+    "@reactive-dot/react": "^0.10.0",
     "@tanstack/react-table": "^8.20.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
-    "dot-connect": "^0.5.0",
+    "dot-connect": "^0.6.0",
     "lucide-react": "^0.437.0",
     "next-themes": "^0.3.0",
     "polkadot-api": "^1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e68562c..02c6ec5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,10 +10,10 @@ importers:
     dependencies:
       '@polkadot-api/descriptors':
         specifier: file:.papi/descriptors
-        version: file:.papi/descriptors(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))
+        version: file:.papi/descriptors(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))
       '@polkadot-ui/react':
         specifier: 0.0.1-alpha.15
-        version: 0.0.1-alpha.15(@noble/hashes@1.4.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.0.1-alpha.15(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@polkadot-ui/utils':
         specifier: 0.0.1-alpha.5
         version: 0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2)
@@ -51,11 +51,11 @@ importers:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@reactive-dot/core':
-        specifier: ^0.9.0
-        version: 0.9.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))
+        specifier: ^0.10.0
+        version: 0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))
       '@reactive-dot/react':
-        specifier: ^0.9.0
-        version: 0.9.0(@types/react@18.3.5)(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))(react@18.3.1)
+        specifier: ^0.10.0
+        version: 0.10.0(@types/react@18.3.5)(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react@18.3.1)
       '@tanstack/react-table':
         specifier: ^8.20.5
         version: 8.20.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -69,8 +69,8 @@ importers:
         specifier: ^3.3.3
         version: 3.3.3
       dot-connect:
-        specifier: ^0.5.0
-        version: 0.5.0(@reactive-dot/core@0.9.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0)))
+        specifier: ^0.6.0
+        version: 0.6.0(@reactive-dot/core@0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)))(@types/react@18.3.5)(react@18.3.1)
       lucide-react:
         specifier: ^0.437.0
         version: 0.437.0(react@18.3.1)
@@ -79,7 +79,7 @@ importers:
         version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       polkadot-api:
         specifier: ^1.1.0
-        version: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0)
+        version: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -627,16 +627,26 @@ packages:
   '@lit-labs/ssr-dom-shim@1.2.1':
     resolution: {integrity: sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==}
 
+  '@lit/react@1.0.5':
+    resolution: {integrity: sha512-RSHhrcuSMa4vzhqiTenzXvtQ6QDq3hSPsnHHO3jaPmmvVFeoNNm4DHoQ0zLdKAUvY3wP3tTENSUf7xpyVfrDEA==}
+    peerDependencies:
+      '@types/react': 17 || 18
+
   '@lit/reactive-element@2.0.4':
     resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}
 
-  '@noble/curves@1.5.0':
-    resolution: {integrity: sha512-J5EKamIHnKPyClwVrzmaf5wSdQXgdHcPZIZLu3bwnbeCx8/7NPK5q2ZBWF+5FvYGByjiQQsJYX6jfgB2wDPn3A==}
+  '@noble/curves@1.6.0':
+    resolution: {integrity: sha512-TlaHRXDehJuRNR9TfZDNQ45mMEd5dwUwmicsafcIX4SsNiqnCHKjE/1alYPd/lDRVhxdhUAlv8uEhMCI5zjIJQ==}
+    engines: {node: ^14.21.3 || >=16}
 
   '@noble/hashes@1.4.0':
     resolution: {integrity: sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==}
     engines: {node: '>= 16'}
 
+  '@noble/hashes@1.5.0':
+    resolution: {integrity: sha512-1j6kQFb7QRru7eKN3ZDvRcP13rugwdxZqCjbiAVZfIJwgj2A65UmT4TgARXGlXgnRkORLTDTrO19ZErt7+QXgA==}
+    engines: {node: ^14.21.3 || >=16}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1236,8 +1246,8 @@ packages:
   '@radix-ui/rect@1.1.0':
     resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
 
-  '@reactive-dot/core@0.9.0':
-    resolution: {integrity: sha512-VipDtNHuLMMMxMVDEdNVa4fo4HRjpTiSahR2t3wHuzU1Z/Ubrw0LLcGfSxwHGTht9/0UZFVoR5ACQPPU6exRwA==}
+  '@reactive-dot/core@0.10.0':
+    resolution: {integrity: sha512-CC19qv3ETZI3/H+BNy202dRcVccjyXZgFG9g88NKAoBMTbvibXEBnIoI1/IvGHgDqACnmchk9OuyTJhFhRnYEg==}
     peerDependencies:
       '@walletconnect/modal': 2.x
       '@walletconnect/universal-provider': 2.x
@@ -1248,8 +1258,8 @@ packages:
       '@walletconnect/universal-provider':
         optional: true
 
-  '@reactive-dot/react@0.9.0':
-    resolution: {integrity: sha512-ci2MPL4n1UY/PQmRACnFAczYCx+ZHx48vA8p7jWkWAzJpQUQ0zcAOzwdfdT34Tf5UXPDLJ8iOVZ1t9UMzONtww==}
+  '@reactive-dot/react@0.10.0':
+    resolution: {integrity: sha512-9u0GuyQ2sqTZUnpYZLsqZ31AwZyIl6T24m2bTnJ5t6uq657ufNvnN0YmIa0md3UyvAyxnGxtzhohh+XCODYxyQ==}
     peerDependencies:
       react: 18.x
 
@@ -1352,6 +1362,9 @@ packages:
   '@scure/base@1.1.7':
     resolution: {integrity: sha512-PPNYBslrLNNUQ/Yad37MHYsNQtK67EhWb6WtSvNLLPo7SdVZgkUjD6Dg+5On7zNwmskf8OX7I7Nx5oN+MIWE0g==}
 
+  '@scure/base@1.1.8':
+    resolution: {integrity: sha512-6CyAclxj3Nb0XT7GHK6K4zK6k2xJm6E4Ft0Ohjt4WgegiFUHEtFb2CGzmPmGBwoIhrLsqNLYfLr04Y1GePrzZg==}
+
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
@@ -1465,6 +1478,9 @@ packages:
   '@types/node@22.5.1':
     resolution: {integrity: sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==}
 
+  '@types/node@22.5.3':
+    resolution: {integrity: sha512-njripolh85IA9SQGTAqbmnNZTdxv7X/4OYGPz8tgy5JDr8MP+uDBa921GpYEoDDnwm0Hmn5ZPeJgiiSTPoOzkQ==}
+
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
@@ -1825,10 +1841,14 @@ packages:
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
 
-  dot-connect@0.5.0:
-    resolution: {integrity: sha512-vO9Wg+MmuMLxhqNqIldLg89qH0BGdK7tlxGTKMau5cM9Qb1Lu/O4Bjy/voazaR5KvyMu5X3PG6C0mHJO+p6MJw==}
+  dot-connect@0.6.0:
+    resolution: {integrity: sha512-eFZsPjnRBLwhERBNRGTx0h2tHMfZSV5LTpoQIHcsaJVyjGbKRl1KEhALnaBILgZUwYeD7nrpXeQAtcwPBbLupQ==}
     peerDependencies:
       '@reactive-dot/core': '*'
+      react: '>= 18'
+    peerDependenciesMeta:
+      react:
+        optional: true
 
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
@@ -3180,6 +3200,11 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yaml@2.5.1:
+    resolution: {integrity: sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -3559,16 +3584,22 @@ snapshots:
 
   '@lit-labs/ssr-dom-shim@1.2.1': {}
 
+  '@lit/react@1.0.5(@types/react@18.3.5)':
+    dependencies:
+      '@types/react': 18.3.5
+
   '@lit/reactive-element@2.0.4':
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.2.1
 
-  '@noble/curves@1.5.0':
+  '@noble/curves@1.6.0':
     dependencies:
-      '@noble/hashes': 1.4.0
+      '@noble/hashes': 1.5.0
 
   '@noble/hashes@1.4.0': {}
 
+  '@noble/hashes@1.5.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -3584,7 +3615,7 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@polkadot-api/cli@0.8.0(jiti@1.21.6)(postcss@8.4.42)(smoldot@2.0.30)(yaml@2.5.0)':
+  '@polkadot-api/cli@0.8.0(jiti@1.21.6)(postcss@8.4.42)(smoldot@2.0.30)(yaml@2.5.1)':
     dependencies:
       '@commander-js/extra-typings': 12.1.0(commander@12.1.0)
       '@polkadot-api/codegen': 0.9.0
@@ -3608,7 +3639,7 @@ snapshots:
       read-pkg: 9.0.1
       rxjs: 7.8.1
       tsc-prog: 2.3.0(typescript@5.5.4)
-      tsup: 8.2.4(jiti@1.21.6)(postcss@8.4.42)(typescript@5.5.4)(yaml@2.5.0)
+      tsup: 8.2.4(jiti@1.21.6)(postcss@8.4.42)(typescript@5.5.4)(yaml@2.5.1)
       typescript: 5.5.4
       write-package: 7.1.0
     transitivePeerDependencies:
@@ -3630,9 +3661,9 @@ snapshots:
       '@polkadot-api/substrate-bindings': 0.6.3
       '@polkadot-api/utils': 0.1.1
 
-  '@polkadot-api/descriptors@file:.papi/descriptors(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))':
+  '@polkadot-api/descriptors@file:.papi/descriptors(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))':
     dependencies:
-      polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0)
+      polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)
 
   '@polkadot-api/json-rpc-provider-proxy@0.2.0': {}
 
@@ -3726,14 +3757,14 @@ snapshots:
 
   '@polkadot-ui/core@0.0.1-alpha.2': {}
 
-  '@polkadot-ui/react@0.0.1-alpha.15(@noble/hashes@1.4.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@polkadot-ui/react@0.0.1-alpha.15(@noble/hashes@1.5.0)(@polkadot-api/substrate-bindings@0.6.3)(@polkadot-ui/assets@0.0.1-alpha.2)(@polkadot-ui/core@0.0.1-alpha.2)(@polkadot-ui/utils@0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@noble/hashes': 1.4.0
+      '@noble/hashes': 1.5.0
       '@polkadot-api/substrate-bindings': 0.6.3
       '@polkadot-ui/assets': 0.0.1-alpha.2
       '@polkadot-ui/core': 0.0.1-alpha.2
       '@polkadot-ui/utils': 0.0.1-alpha.5(@polkadot/keyring@13.0.2(@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2))(@polkadot/util@13.0.2))(@polkadot/util@13.0.2)
-      polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0)
+      polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -3756,15 +3787,15 @@ snapshots:
 
   '@polkadot/util-crypto@13.0.2(@polkadot/util@13.0.2)':
     dependencies:
-      '@noble/curves': 1.5.0
-      '@noble/hashes': 1.4.0
+      '@noble/curves': 1.6.0
+      '@noble/hashes': 1.5.0
       '@polkadot/networks': 13.0.2
       '@polkadot/util': 13.0.2
       '@polkadot/wasm-crypto': 7.3.2(@polkadot/util@13.0.2)(@polkadot/x-randomvalues@13.0.2(@polkadot/util@13.0.2)(@polkadot/wasm-util@7.3.2(@polkadot/util@13.0.2)))
       '@polkadot/wasm-util': 7.3.2(@polkadot/util@13.0.2)
       '@polkadot/x-bigint': 13.0.2
       '@polkadot/x-randomvalues': 13.0.2(@polkadot/util@13.0.2)(@polkadot/wasm-util@7.3.2(@polkadot/util@13.0.2))
-      '@scure/base': 1.1.7
+      '@scure/base': 1.1.8
       tslib: 2.7.0
 
   '@polkadot/util@13.0.2':
@@ -4264,14 +4295,14 @@ snapshots:
 
   '@radix-ui/rect@1.1.0': {}
 
-  '@reactive-dot/core@0.9.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))':
+  '@reactive-dot/core@0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))':
     dependencies:
       '@reactive-dot/utils': 0.8.0
-      polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0)
+      polkadot-api: 1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)
 
-  '@reactive-dot/react@0.9.0(@types/react@18.3.5)(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))(react@18.3.1)':
+  '@reactive-dot/react@0.10.0(@types/react@18.3.5)(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))(react@18.3.1)':
     dependencies:
-      '@reactive-dot/core': 0.9.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))
+      '@reactive-dot/core': 0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))
       jotai: 2.9.3(@types/react@18.3.5)(react@18.3.1)
       jotai-scope: 0.7.2(jotai@2.9.3(@types/react@18.3.5)(react@18.3.1))(react@18.3.1)
       react: 18.3.1
@@ -4343,6 +4374,8 @@ snapshots:
 
   '@scure/base@1.1.7': {}
 
+  '@scure/base@1.1.8': {}
+
   '@sec-ant/readable-stream@0.4.1': {}
 
   '@sindresorhus/merge-streams@4.0.0': {}
@@ -4450,7 +4483,7 @@ snapshots:
 
   '@types/bn.js@5.1.5':
     dependencies:
-      '@types/node': 22.5.1
+      '@types/node': 22.5.3
 
   '@types/estree@1.0.5': {}
 
@@ -4460,6 +4493,10 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/node@22.5.3':
+    dependencies:
+      undici-types: 6.19.8
+
   '@types/normalize-package-data@2.4.4': {}
 
   '@types/prop-types@15.7.12': {}
@@ -4812,12 +4849,17 @@ snapshots:
       no-case: 3.0.4
       tslib: 2.7.0
 
-  dot-connect@0.5.0(@reactive-dot/core@0.9.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))):
+  dot-connect@0.6.0(@reactive-dot/core@0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1)))(@types/react@18.3.5)(react@18.3.1):
     dependencies:
       '@lit-labs/preact-signals': 1.0.2
-      '@reactive-dot/core': 0.9.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0))
+      '@lit/react': 1.0.5(@types/react@18.3.5)
+      '@reactive-dot/core': 0.10.0(polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1))
       lit: 3.2.0
       qrcode: 1.5.4
+    optionalDependencies:
+      react: 18.3.1
+    transitivePeerDependencies:
+      - '@types/react'
 
   eastasianwidth@0.2.0: {}
 
@@ -5539,9 +5581,9 @@ snapshots:
 
   pngjs@5.0.0: {}
 
-  polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.0):
+  polkadot-api@1.1.0(jiti@1.21.6)(postcss@8.4.42)(rxjs@7.8.1)(smoldot@2.0.30)(yaml@2.5.1):
     dependencies:
-      '@polkadot-api/cli': 0.8.0(jiti@1.21.6)(postcss@8.4.42)(smoldot@2.0.30)(yaml@2.5.0)
+      '@polkadot-api/cli': 0.8.0(jiti@1.21.6)(postcss@8.4.42)(smoldot@2.0.30)(yaml@2.5.1)
       '@polkadot-api/json-rpc-provider': 0.0.3
       '@polkadot-api/known-chains': 0.5.0
       '@polkadot-api/logs-provider': 0.0.4
@@ -5590,13 +5632,13 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.42
 
-  postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.42)(yaml@2.5.0):
+  postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.42)(yaml@2.5.1):
     dependencies:
       lilconfig: 3.1.2
     optionalDependencies:
       jiti: 1.21.6
       postcss: 8.4.42
-      yaml: 2.5.0
+      yaml: 2.5.1
 
   postcss-nested@6.2.0(postcss@8.4.42):
     dependencies:
@@ -5963,7 +6005,7 @@ snapshots:
 
   tslib@2.7.0: {}
 
-  tsup@8.2.4(jiti@1.21.6)(postcss@8.4.42)(typescript@5.5.4)(yaml@2.5.0):
+  tsup@8.2.4(jiti@1.21.6)(postcss@8.4.42)(typescript@5.5.4)(yaml@2.5.1):
     dependencies:
       bundle-require: 5.0.0(esbuild@0.23.1)
       cac: 6.7.14
@@ -5975,7 +6017,7 @@ snapshots:
       globby: 11.1.0
       joycon: 3.1.1
       picocolors: 1.0.1
-      postcss-load-config: 6.0.1(jiti@1.21.6)(postcss@8.4.42)(yaml@2.5.0)
+      postcss-load-config: 6.0.1(jiti@1.21.6)(postcss@8.4.42)(yaml@2.5.1)
       resolve-from: 5.0.0
       rollup: 4.21.2
       source-map: 0.8.0-beta.0
@@ -6127,6 +6169,9 @@ snapshots:
 
   yaml@2.5.0: {}
 
+  yaml@2.5.1:
+    optional: true
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
diff --git a/src/header.tsx b/src/header.tsx
index 79057b8..345e3f2 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -10,7 +10,8 @@ import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
 import { Button } from '@/components/ui/button'
 import { routes } from '@/lib/utils'
 import { useWalletDisconnector } from '@reactive-dot/react'
-import { PanelLeft } from 'lucide-react'
+import { ChevronDown, PanelLeft } from 'lucide-react'
+import { ConnectionDialog } from 'dot-connect/react.js'
 
 // import {
 //   Menubar,
@@ -22,7 +23,7 @@ import { PanelLeft } from 'lucide-react'
 //   MenubarTrigger,
 // } from '@/components/ui/menubar'
 import { useAccounts } from './contexts/AccountsContext'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { SupportedNetworkNames, useNetwork } from './contexts/NetworkContext'
 
 interface NetworkDisplay {
@@ -47,6 +48,7 @@ export const Header = () => {
   const { network, setNetwork } = useNetwork()
   const { accounts, selectAccount, selectedAccount } = useAccounts()
   const [, disconnectAll] = useWalletDisconnector()
+  const [isConnectionDialiogOpen, setIsConnectionDialiogOpen] = useState(false)
 
   useEffect(() => {
     if (!selectedAccount?.address && accounts.length > 0) {
@@ -55,32 +57,33 @@ export const Header = () => {
   }, [accounts, selectAccount, selectedAccount?.address])
 
   return (
-    <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:sticky sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button size="icon" variant="outline" className="sm:hidden">
-            <PanelLeft className="h-5 w-5" />
-            <span className="sr-only">Toggle Menu</span>
-          </Button>
-        </SheetTrigger>
-        <SheetContent side="left" className="sm:max-w-xs">
-          <nav className="grid gap-6 text-lg font-medium">
-            {routes.map((r) => (
-              <a
-                key={r.name}
-                href={`/${r.link || ''}`}
-                className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
-              >
-                <r.icon className="h-5 w-5" />
-                {r.name}
-              </a>
-            ))}
-          </nav>
-        </SheetContent>
-      </Sheet>
-      <div className="flex w-full justify-between">
-        <div>
-          {/* TODO: split submenu based on routes 
+    <>
+      <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:sticky sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button size="icon" variant="outline" className="sm:hidden">
+              <PanelLeft className="h-5 w-5" />
+              <span className="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="sm:max-w-xs">
+            <nav className="grid gap-6 text-lg font-medium">
+              {routes.map((r) => (
+                <a
+                  key={r.name}
+                  href={`/${r.link || ''}`}
+                  className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+                >
+                  <r.icon className="h-5 w-5" />
+                  {r.name}
+                </a>
+              ))}
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <div className="flex w-full justify-between">
+          <div>
+            {/* TODO: split submenu based on routes 
           <Menubar>
             <MenubarMenu>
               <MenubarTrigger>File</MenubarTrigger>
@@ -96,80 +99,95 @@ export const Header = () => {
               </MenubarContent>
             </MenubarMenu>
           </Menubar>*/}
-        </div>
-        <div className="flex">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="default" className="mx-2 cursor-pointer">
-                {network.charAt(0).toUpperCase() + network.slice(1)}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              {networkList.map(({ name, display }) => (
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  key={name}
-                  onClick={() => setNetwork(name)}
-                >
-                  {display}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          {!accounts.length && (
-            <dc-connection-button>Connect</dc-connection-button>
-          )}
-          {!!accounts.length && (
+          </div>
+          <div className="flex">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  variant="outline"
                   size="default"
-                  className="cursor-pointer overflow-hidden"
+                  variant={'outline'}
+                  className="mx-2 cursor-pointer capitalize"
                 >
-                  <Polkicon
-                    size={36}
-                    address={selectedAccount?.address || ''}
-                    className="mr-2"
-                    outerColor="transparent"
-                  />
-                  {selectedAccount?.name}
+                  {network}
+                  <ChevronDown className="ml-2 h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                {accounts.map((account, index) => (
-                  <>
-                    <DropdownMenuItem
-                      className="cursor-pointer"
-                      key={account.address}
-                      onClick={() => selectAccount(account)}
-                    >
-                      <Polkicon
-                        size={28}
-                        address={account.address || ''}
-                        className="mr-2"
-                        outerColor="transparent"
-                      />
-                      {account.name}
-                    </DropdownMenuItem>
-                    {index !== accounts.length - 1 && <DropdownMenuSeparator />}
-                  </>
+                {networkList.map(({ name, display }) => (
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    key={name}
+                    onClick={() => setNetwork(name)}
+                  >
+                    {display}
+                  </DropdownMenuItem>
                 ))}
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  key={'logout'}
-                  onClick={() => {
-                    disconnectAll()
-                    selectAccount(undefined)
-                  }}
-                >
-                  Logout
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
-          )}
+            {!accounts.length && (
+              <Button onClick={() => setIsConnectionDialiogOpen(true)}>
+                Connect
+              </Button>
+            )}
+            {!!accounts.length && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="default"
+                    className="cursor-pointer overflow-hidden"
+                  >
+                    <Polkicon
+                      size={36}
+                      address={selectedAccount?.address || ''}
+                      className="mr-2"
+                      outerColor="transparent"
+                    />
+                    {selectedAccount?.name}
+                    <ChevronDown className="ml-2 h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  {accounts.map((account, index) => (
+                    <>
+                      <DropdownMenuItem
+                        className="cursor-pointer"
+                        key={account.address}
+                        onClick={() => selectAccount(account)}
+                      >
+                        <Polkicon
+                          size={28}
+                          address={account.address || ''}
+                          className="mr-2"
+                          outerColor="transparent"
+                        />
+                        {account.name}
+                      </DropdownMenuItem>
+                      {index !== accounts.length - 1 && (
+                        <DropdownMenuSeparator />
+                      )}
+                    </>
+                  ))}
+                  <DropdownMenuItem
+                    className="cursor-pointer"
+                    key={'logout'}
+                    onClick={() => {
+                      disconnectAll()
+                      selectAccount(undefined)
+                    }}
+                  >
+                    Logout
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
+      <ConnectionDialog
+        open={isConnectionDialiogOpen}
+        onClose={() => setIsConnectionDialiogOpen(false)}
+      />
+    </>
   )
 }