diff --git a/packages/shared/package.json b/packages/shared/package.json
index 43bba295ba..17d9e16196 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.20",
+        "@bloomwalletio/ui": "0.20.21",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",
diff --git a/packages/shared/src/components/avatars/NetworkAvatar.svelte b/packages/shared/src/components/avatars/NetworkAvatar.svelte
index a490e99c9d..62c839bbbb 100644
--- a/packages/shared/src/components/avatars/NetworkAvatar.svelte
+++ b/packages/shared/src/components/avatars/NetworkAvatar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { DEFAULT_NETWORK_ICON } from '@auxiliary/icon'
     import { Avatar, IconName, Tooltip } from '@bloomwalletio/ui'
+    import { darkMode } from '@core/app/stores'
     import { NetworkId, SupportedNetworkId, getNameFromNetworkId } from '@core/network'
 
     export let networkId: NetworkId
@@ -9,22 +10,24 @@
     export let size: 'xxs' | 'xs' | 'sm' | 'base' | 'md' = 'base'
     export let shape: 'circle' | 'square' | 'squircle' = 'circle'
 
+    $: darkMode
+
     const AVATAR_BACKGROUND_COLOR: { [id in NetworkId]?: string } = {
-        [SupportedNetworkId.Iota]: '#000000',
+        [SupportedNetworkId.Iota]: 'iota-background',
         [SupportedNetworkId.Shimmer]: 'shimmer-background',
         [SupportedNetworkId.Testnet]: 'shimmer-background',
-        [SupportedNetworkId.IotaEvm]: '#0A0FB0',
-        [SupportedNetworkId.ShimmerEvm]: 'shimmer-background',
-        [SupportedNetworkId.TestnetEvm]: 'text-secondary',
+        [SupportedNetworkId.IotaEvm]: 'iota-evm-background',
+        [SupportedNetworkId.ShimmerEvm]: 'shimmer-evm-background',
+        [SupportedNetworkId.TestnetEvm]: 'shimmer-evm-background',
     }
 
     const AVATAR_TEXT_COLOR: { [id in NetworkId]?: string } = {
-        [SupportedNetworkId.Iota]: '#FFFFFF',
+        [SupportedNetworkId.Iota]: 'iota',
         [SupportedNetworkId.Shimmer]: 'shimmer',
-        [SupportedNetworkId.Testnet]: 'text-secondary',
-        [SupportedNetworkId.IotaEvm]: '#FFFFFF',
-        [SupportedNetworkId.ShimmerEvm]: 'text-invert',
-        [SupportedNetworkId.TestnetEvm]: 'shimmer-background',
+        [SupportedNetworkId.Testnet]: 'shimmer',
+        [SupportedNetworkId.IotaEvm]: 'iota-evm',
+        [SupportedNetworkId.ShimmerEvm]: 'shimmer-evm',
+        [SupportedNetworkId.TestnetEvm]: 'shimmer-evm',
     }
 
     let anchor: HTMLElement
diff --git a/packages/shared/src/components/avatars/TokenAvatar.svelte b/packages/shared/src/components/avatars/TokenAvatar.svelte
index cc3a2f499a..084371e337 100644
--- a/packages/shared/src/components/avatars/TokenAvatar.svelte
+++ b/packages/shared/src/components/avatars/TokenAvatar.svelte
@@ -15,43 +15,43 @@
 
     const AVATAR_BACKGROUND_COLOR: { [networkId: string]: { [tokenId: string]: string } } = {
         [SupportedNetworkId.Iota]: {
-            [BASE_TOKEN_ID]: '#000000',
+            [BASE_TOKEN_ID]: 'iota-background',
         },
         [SupportedNetworkId.Shimmer]: {
-            [BASE_TOKEN_ID]: 'shimmer',
+            [BASE_TOKEN_ID]: 'shimmer-background',
         },
         [SupportedNetworkId.Testnet]: {
-            [BASE_TOKEN_ID]: 'shimmer',
+            [BASE_TOKEN_ID]: 'shimmer-background',
         },
         [SupportedNetworkId.IotaEvm]: {
-            [BASE_TOKEN_ID]: '#000000',
+            [BASE_TOKEN_ID]: 'iota-background',
         },
         [SupportedNetworkId.ShimmerEvm]: {
-            [BASE_TOKEN_ID]: 'shimmer',
+            [BASE_TOKEN_ID]: 'shimmer-background',
         },
         [SupportedNetworkId.TestnetEvm]: {
-            [BASE_TOKEN_ID]: 'shimmer',
+            [BASE_TOKEN_ID]: 'shimmer-background',
         },
     }
 
     const AVATAR_TEXT_COLOR: { [networkId: string]: { [tokenId: string]: string } } = {
         [SupportedNetworkId.Iota]: {
-            [BASE_TOKEN_ID]: '#FFFFFF',
+            [BASE_TOKEN_ID]: 'iota',
         },
         [SupportedNetworkId.Shimmer]: {
-            [BASE_TOKEN_ID]: 'shimmer-background',
+            [BASE_TOKEN_ID]: 'shimmer',
         },
         [SupportedNetworkId.Testnet]: {
-            [BASE_TOKEN_ID]: 'shimmer-background',
+            [BASE_TOKEN_ID]: 'shimmer',
         },
         [SupportedNetworkId.IotaEvm]: {
-            [BASE_TOKEN_ID]: '#FFFFFF',
+            [BASE_TOKEN_ID]: 'iota',
         },
         [SupportedNetworkId.ShimmerEvm]: {
-            [BASE_TOKEN_ID]: 'shimmer-background',
+            [BASE_TOKEN_ID]: 'shimmer',
         },
         [SupportedNetworkId.TestnetEvm]: {
-            [BASE_TOKEN_ID]: 'shimmer-background',
+            [BASE_TOKEN_ID]: 'shimmer',
         },
     }
 
diff --git a/yarn.lock b/yarn.lock
index 9ae4e062cd..071d240a40 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.20.20":
-  version "0.20.20"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.20/f4ba590700ba79731875944c94cb73e20083e361#f4ba590700ba79731875944c94cb73e20083e361"
-  integrity sha512-Ki8Mw3sD1ZHXTg4EObv58nxxQmUdUlwCBES6wdPre5oEreL5Hmj6H15KAaS+kiWh8VL2ERjDlkgGJxo5G9pXCQ==
+"@bloomwalletio/ui@0.20.21":
+  version "0.20.21"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.21/ddbf6507eaeffd2d44b8c2564686c0d3d69715a9#ddbf6507eaeffd2d44b8c2564686c0d3d69715a9"
+  integrity sha512-XZLAZ5a7UN8g91OPC/VP2lz8+nDl6UvtBkjWPyryDLw8oaaEi0anWrMecKsULc9SLPblMbKOMRj2FfjCkiEdJA==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"
@@ -12211,15 +12211,6 @@ wildcard@^2.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"