From 198dee5aec5b6b002b0fe86b6837a7a182690946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernard=20Stojanovi=C4=87?= <bero4net@gmail.com>
Date: Tue, 17 Sep 2024 17:14:06 +0200
Subject: [PATCH] chore: recolor POC (#43)

---
 web/sprinter.theme.ts                         | 101 ++++++++++
 web/src/app.html                              |   4 +-
 web/src/lib/assets/sprinter-logo-white.svg    | 118 ++++++++++++
 web/src/lib/assets/sprinter-logo.svg          | 173 ++++++++++++++++++
 web/src/lib/components/Account.svelte         |  10 +-
 web/src/lib/components/DrawerManager.svelte   |   2 +-
 web/src/lib/components/Header.svelte          |  10 +-
 web/src/lib/components/Portfolio.svelte       |  69 +++----
 .../lib/components/SendTokensDrawer.svelte    |  12 +-
 .../lib/components/SubmitTokensDrawer.svelte  |   4 +-
 web/src/lib/components/TokenModal.svelte      |   4 +-
 web/src/lib/components/TransactionCard.svelte |   6 +-
 web/src/lib/components/UpdateNameModal.svelte |   5 +-
 web/src/lib/formatters.ts                     |  13 +-
 web/static/favicon.png                        | Bin 15086 -> 0 bytes
 web/static/sprinter.ico                       | Bin 0 -> 15406 bytes
 web/tailwind.config.ts                        |   2 +
 17 files changed, 474 insertions(+), 59 deletions(-)
 create mode 100644 web/sprinter.theme.ts
 create mode 100644 web/src/lib/assets/sprinter-logo-white.svg
 create mode 100644 web/src/lib/assets/sprinter-logo.svg
 delete mode 100644 web/static/favicon.png
 create mode 100644 web/static/sprinter.ico

diff --git a/web/sprinter.theme.ts b/web/sprinter.theme.ts
new file mode 100644
index 0000000..dd64ccf
--- /dev/null
+++ b/web/sprinter.theme.ts
@@ -0,0 +1,101 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const sprinterTheme: CustomThemeConfig = {
+	name: 'sprinter-theme',
+	properties: {
+		// =~= Theme Properties =~=
+		'--theme-font-family-base': `system-ui`,
+		'--theme-font-family-heading': `system-ui`,
+		'--theme-font-color-base': '0 0 0',
+		'--theme-font-color-dark': '255 255 255',
+		'--theme-rounded-base': '9999px',
+		'--theme-rounded-container': '8px',
+		'--theme-border-base': '1px',
+		// =~= Theme On-X Colors =~=
+		'--on-primary': '255 255 255',
+		'--on-secondary': '255 255 255',
+		'--on-tertiary': '0 0 0',
+		'--on-success': '0 0 0',
+		'--on-warning': '0 0 0',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		// =~= Theme Colors  =~=
+		// primary | #F2541B
+		'--color-primary-50': '253 229 221', // #fde5dd
+		'--color-primary-100': '252 221 209', // #fcddd1
+		'--color-primary-200': '252 212 198', // #fcd4c6
+		'--color-primary-300': '250 187 164', // #fabba4
+		'--color-primary-400': '246 135 95', // #f6875f
+		'--color-primary-500': '242 84 27', // #F2541B
+		'--color-primary-600': '218 76 24', // #da4c18
+		'--color-primary-700': '182 63 20', // #b63f14
+		'--color-primary-800': '145 50 16', // #913210
+		'--color-primary-900': '119 41 13', // #77290d
+		// secondary | #263AA7
+		'--color-secondary-50': '222 225 242', // #dee1f2
+		'--color-secondary-100': '212 216 237', // #d4d8ed
+		'--color-secondary-200': '201 206 233', // #c9cee9
+		'--color-secondary-300': '168 176 220', // #a8b0dc
+		'--color-secondary-400': '103 117 193', // #6775c1
+		'--color-secondary-500': '38 58 167', // #263AA7
+		'--color-secondary-600': '34 52 150', // #223496
+		'--color-secondary-700': '29 44 125', // #1d2c7d
+		'--color-secondary-800': '23 35 100', // #172364
+		'--color-secondary-900': '19 28 82', // #131c52
+		// tertiary | #52A927
+		'--color-tertiary-50': '229 242 223', // #e5f2df
+		'--color-tertiary-100': '220 238 212', // #dceed4
+		'--color-tertiary-200': '212 234 201', // #d4eac9
+		'--color-tertiary-300': '186 221 169', // #badda9
+		'--color-tertiary-400': '134 195 104', // #86c368
+		'--color-tertiary-500': '82 169 39', // #52A927
+		'--color-tertiary-600': '74 152 35', // #4a9823
+		'--color-tertiary-700': '62 127 29', // #3e7f1d
+		'--color-tertiary-800': '49 101 23', // #316517
+		'--color-tertiary-900': '40 83 19', // #285313
+		// success | #84cc16
+		'--color-success-50': '237 247 220', // #edf7dc
+		'--color-success-100': '230 245 208', // #e6f5d0
+		'--color-success-200': '224 242 197', // #e0f2c5
+		'--color-success-300': '206 235 162', // #ceeba2
+		'--color-success-400': '169 219 92', // #a9db5c
+		'--color-success-500': '132 204 22', // #84cc16
+		'--color-success-600': '119 184 20', // #77b814
+		'--color-success-700': '99 153 17', // #639911
+		'--color-success-800': '79 122 13', // #4f7a0d
+		'--color-success-900': '65 100 11', // #41640b
+		// warning | #EAB308
+		'--color-warning-50': '252 244 218', // #fcf4da
+		'--color-warning-100': '251 240 206', // #fbf0ce
+		'--color-warning-200': '250 236 193', // #faecc1
+		'--color-warning-300': '247 225 156', // #f7e19c
+		'--color-warning-400': '240 202 82', // #f0ca52
+		'--color-warning-500': '234 179 8', // #EAB308
+		'--color-warning-600': '211 161 7', // #d3a107
+		'--color-warning-700': '176 134 6', // #b08606
+		'--color-warning-800': '140 107 5', // #8c6b05
+		'--color-warning-900': '115 88 4', // #735804
+		// error | #D41976
+		'--color-error-50': '249 221 234', // #f9ddea
+		'--color-error-100': '246 209 228', // #f6d1e4
+		'--color-error-200': '244 198 221', // #f4c6dd
+		'--color-error-300': '238 163 200', // #eea3c8
+		'--color-error-400': '225 94 159', // #e15e9f
+		'--color-error-500': '212 25 118', // #D41976
+		'--color-error-600': '191 23 106', // #bf176a
+		'--color-error-700': '159 19 89', // #9f1359
+		'--color-error-800': '127 15 71', // #7f0f47
+		'--color-error-900': '104 12 58', // #680c3a
+		// surface | #495a8f
+		'--color-surface-50': '228 230 238', // #e4e6ee
+		'--color-surface-100': '219 222 233', // #dbdee9
+		'--color-surface-200': '210 214 227', // #d2d6e3
+		'--color-surface-300': '182 189 210', // #b6bdd2
+		'--color-surface-400': '128 140 177', // #808cb1
+		'--color-surface-500': '73 90 143', // #495a8f
+		'--color-surface-600': '66 81 129', // #425181
+		'--color-surface-700': '55 68 107', // #37446b
+		'--color-surface-800': '44 54 86', // #2c3656
+		'--color-surface-900': '36 44 70' // #242c46
+	}
+};
diff --git a/web/src/app.html b/web/src/app.html
index 5d04ca1..e38d533 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -2,11 +2,11 @@
 <html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/sprinter.ico" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="skeleton">
+	<body data-sveltekit-preload-data="hover" data-theme="sprinter-theme">
 		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/web/src/lib/assets/sprinter-logo-white.svg b/web/src/lib/assets/sprinter-logo-white.svg
new file mode 100644
index 0000000..b67b1ee
--- /dev/null
+++ b/web/src/lib/assets/sprinter-logo-white.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1667.000000pt" height="1667.000000pt" viewBox="0 0 1667.000000 1667.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1667.000000) scale(0.100000,-0.100000)"
+fill="#FFFFFF" stroke="none">
+<path d="M7935 12093 l-28 -36 -64 -1196 -63 -1196 -28 -55 c-33 -66 -86 -106
+-162 -121 -52 -10 -134 3 -1375 219 -1458 254 -1357 242 -1371 167 -8 -46 12
+-76 75 -110 29 -16 52 -36 55 -49 3 -12 27 -34 57 -51 28 -17 57 -42 65 -58 8
+-15 39 -41 69 -58 30 -17 55 -36 55 -43 0 -17 36 -48 87 -76 24 -13 44 -33 47
+-46 4 -14 27 -34 59 -53 28 -16 59 -43 68 -58 12 -21 146 -103 502 -311 441
+-257 486 -286 477 -303 -6 -10 -27 -27 -48 -37 -20 -10 -597 -193 -1282 -407
+-685 -213 -1253 -395 -1262 -403 -27 -23 -24 -83 5 -110 13 -12 30 -22 38 -22
+21 -1 54 -32 73 -68 11 -22 26 -35 47 -39 27 -5 48 -25 92 -87 10 -14 26 -26
+36 -26 23 0 71 -37 71 -54 0 -17 43 -56 61 -56 17 0 63 -46 72 -73 4 -10 26
+-26 51 -36 29 -13 53 -34 73 -63 27 -41 31 -43 83 -46 30 -1 150 4 265 11 116
+8 211 14 212 13 1 -1 -575 -369 -1280 -819 -706 -449 -1288 -822 -1295 -829
+-31 -31 -15 -49 268 -293 63 -54 117 -102 120 -105 3 -3 69 -61 148 -128 118
+-101 147 -122 165 -116 12 4 355 171 762 372 929 457 1048 514 1039 499 -4 -6
+-93 -131 -197 -276 -140 -195 -190 -271 -190 -292 0 -29 27 -69 46 -69 11 0
+102 -80 190 -166 29 -28 58 -53 66 -55 13 -5 91 -73 180 -160 26 -25 64 -55
+84 -68 20 -12 50 -40 68 -62 28 -36 36 -40 70 -37 34 3 96 52 614 493 317 270
+580 492 586 493 5 2 9 -5 9 -15 0 -31 30 -64 76 -84 26 -11 48 -28 53 -41 11
+-29 36 -51 81 -72 21 -9 43 -31 55 -53 14 -27 31 -41 55 -49 23 -7 45 -26 64
+-54 19 -27 44 -48 72 -61 24 -10 44 -23 44 -28 0 -19 62 -81 81 -81 10 0 26
+-12 36 -26 45 -66 70 -84 117 -84 33 0 52 6 70 23 13 12 208 305 432 650 224
+345 411 624 415 620 4 -4 73 -195 153 -423 81 -228 154 -426 164 -440 11 -14
+38 -32 60 -40 23 -8 42 -20 42 -26 0 -23 44 -67 87 -85 23 -10 43 -24 43 -32
+0 -20 51 -65 87 -78 18 -6 35 -19 38 -29 12 -37 47 -70 86 -80 21 -6 39 -17
+39 -25 0 -23 49 -73 83 -84 21 -7 40 -25 54 -50 17 -29 34 -44 68 -57 45 -17
+48 -16 93 2 84 35 74 -45 136 1107 61 1139 54 1074 131 1152 52 52 107 75 180
+75 35 0 556 -86 1214 -200 634 -110 1168 -200 1188 -200 28 0 44 8 74 38 45
+46 57 83 38 122 -8 15 -158 153 -334 306 l-321 279 -401 235 c-390 227 -402
+235 -385 254 9 10 35 27 57 37 22 9 598 191 1280 404 682 213 1252 394 1268
+402 15 7 27 20 27 27 0 7 7 19 15 26 26 22 17 54 -27 96 -70 67 -581 509 -608
+526 -23 15 -49 15 -314 -3 -160 -10 -291 -17 -292 -16 -1 1 212 139 473 307
+1583 1014 1502 961 1534 1016 49 86 89 43 -573 617 -62 53 -85 67 -111 67 -23
+0 -220 -92 -641 -300 -335 -165 -610 -299 -611 -298 -2 2 72 107 164 235 181
+250 211 306 189 347 -7 14 -158 152 -336 306 -253 219 -329 280 -350 280 -15
+0 -45 -12 -67 -27 -21 -14 -279 -230 -572 -480 -292 -249 -534 -453 -536 -453
+-2 0 13 47 34 105 41 109 48 160 27 187 -7 8 -156 140 -331 292 -353 306 -351
+305 -412 246 -18 -17 -245 -359 -506 -760 -268 -413 -477 -724 -480 -717 -4 7
+-98 271 -209 587 -111 316 -208 585 -215 596 -23 36 -647 574 -665 574 -10 0
+-30 -16 -45 -37z m519 -1150 c191 -541 346 -989 346 -997 0 -57 -33 19 -143
+332 -69 196 -227 646 -351 1000 -200 568 -238 688 -205 655 4 -4 163 -450 353
+-990z m94 -15 c273 -778 329 -952 293 -912 -9 10 -631 1776 -631 1793 0 6 6
+11 13 11 7 0 137 -355 325 -892z m3478 847 c4 -8 -2 -27 -12 -43 -45 -69
+-1158 -1608 -1168 -1615 -41 -28 -96 -8 -96 35 0 14 976 1381 1063 1488 7 8
+47 46 90 83 77 66 112 81 123 52z m-3382 -869 c188 -537 273 -793 267 -799 -6
+-6 -12 -9 -14 -6 -12 12 -557 1581 -557 1600 0 20 2 21 13 9 8 -8 138 -370
+291 -804z m1606 768 c0 -2 -133 -356 -295 -787 -268 -709 -299 -785 -331 -815
+-38 -36 -76 -40 -82 -10 -3 16 502 1368 535 1431 19 38 102 168 121 189 11 13
+19 15 33 7 11 -5 19 -12 19 -15z m1904 -10 c4 -9 3 -22 -2 -28 -5 -6 -228
+-315 -495 -686 l-487 -675 -105 -53 c-58 -28 -105 -50 -105 -48 0 2 220 309
+490 682 446 618 497 685 572 751 83 72 120 88 132 57z m-3425 -754 c123 -350
+241 -693 241 -702 0 -9 -4 -19 -8 -22 -6 -3 -264 717 -477 1332 -23 67 -25
+107 -5 85 5 -4 117 -316 249 -693z m1641 651 c0 -9 -104 -294 -232 -634 l-233
+-619 -82 -69 c-46 -38 -80 -64 -78 -57 3 7 106 279 229 605 204 540 229 600
+286 690 35 54 68 101 73 105 15 10 37 -2 37 -21z m1905 -18 c0 -14 -154 -236
+-392 -565 l-392 -543 -106 -53 c-72 -36 -103 -47 -96 -35 6 10 183 257 394
+548 348 481 391 537 468 603 88 76 124 89 124 45z m-3450 -656 c133 -377 241
+-595 200 -605 -6 -15 -7 -15 -15 -1 -18 31 -420 1184 -420 1203 0 58 45 -57
+235 -597z m1667 572 c7 -10 -45 -158 -166 -478 -97 -255 -177 -465 -178 -466
+-2 -1 -36 -30 -76 -65 -40 -34 -75 -60 -76 -59 -2 2 72 202 163 444 153 401
+173 449 235 543 64 100 79 112 98 81z m1916 -20 c1 -9 -133 -204 -300 -433
+l-303 -418 -103 -48 -102 -49 29 42 c16 23 150 209 297 414 227 313 281 382
+349 442 59 52 87 70 105 68 14 -1 26 -9 28 -18z m-3425 -754 c123 -350 241
+-693 241 -702 0 -9 -4 -19 -8 -22 -6 -3 -264 717 -477 1332 -23 67 -25 107 -5
+85 5 -4 117 -316 249 -693z m1641 651 c0 -9 -104 -294 -232 -634 l-233 -619
+-82 -69 c-46 -38 -80 -64 -78 -57 3 7 106 279 229 605 204 540 229 600 286
+690 35 54 68 101 73 105 15 10 37 -2 37 -21z m1905 -18 c0 -14 -154 -236 -392
+-565 l-392 -543 -106 -53 c-72 -36 -103 -47 -96 -35 6 10 183 257 394 548 348
+481 391 537 468 603 88 76 124 89 124 45z m-3450 -656 c133 -377 241 -595 200
+-605 -6 -15 -7 -15 -15 -1 -18 31 -420 1184 -420 1203 0 58 45 -57 235 -597z
+m1667 572 c7 -10 -45 -158 -166 -478 -97 -255 -177 -465 -178 -466 -2 -1 -36
+-30 -76 -65 -40 -34 -75 -60 -76 -59 -2 2 72 202 163 444 153 401 173 449 235
+543 64 100 79 112 98 81z m1916 -20 c1 -9 -133 -204 -300 -433 l-303 -418
+-103 -48 -102 -49 29 42 c16 23 150 209 297 414 227 313 281 382 349 442 59
+52 87 70 105 68 14 -1 26 -9 28 -18z m-1798 -34 c-38 -12 -80 -56 -137 -137
+-47 -67 -61 -94 -58 -115 1 -10 -32 -71 -74 -134 -42 -63 -78 -117 -81 -120
+-2 -2 -140 65 -308 150 -222 112 -304 151 -309 144 -4 -7 112 -188 257 -402
+l266 -389 319 -126 c311 -123 319 -127 350 -186 18 -33 18 -54 -1 -137 -34
+-146 -111 -253 -264 -359 -98 -67 -144 -87 -170 -71 -8 5 -15 17 -15 26 0 25
+-65 73 -104 76 -24 2 -50 0 -58 -4 -8 -4 -14 1 -14 10 0 8 -28 19 -69 27 -38 6
+-71 18 -74 25 -4 7 -31 19 -60 26 -29 7 -58 16 -64 21 -6 5 -23 7 -39 4 -16 -3
+-53 3 -84 14 -30 11 -63 17 -73 14 -9 -3 -16 -2 -16 2 0 13 -35 27 -60 23 -12
+-2 -47 5 -78 17 -64 23 -103 27 -103 9 0 -8 4 -9 8 -3 7 11 92 -7 110 -22 7 -5
+35 -15 62 -21 28 -6 61 -16 75 -21 15 -5 44 -6 66 -3 22 3 55 -3 72 -12 16 -9
+53 -21 83 -26 29 -6 56 -15 60 -21 3 -5 31 -18 61 -27 30 -9 57 -20 59 -25 1 -5
+10 -12 19 -14 9 -3 54 -20 100 -37 46 -18 106 -36 133 -41 28 -5 54 -13 60 -19
+5 -6 22 -11 38 -11 17 0 34 -7 39 -14 5 -8 40 -24 78 -36 73 -21 125 -44 175
+-77 21 -15 49 -34 63 -43 13 -9 47 -25 75 -34 29 -8 53 -21 55 -28 3 -8 14 -14
+24 -14 11 0 24 -5 31 -12 6 -7 42 -24 78 -38 37 -13 67 -32 67 -41 0 -9 7 -19
+15 -22 8 -4 15 -18 15 -33 0 -14 7 -29 15 -34 8 -4 15 -12 15 -17 0 -6 24 -10
+53 -10 31 0 78 2 106 4 27 3 59 7 70 9 10 2 71 -27 137 -65 133 -73 134 -74
+149 -46 7 13 37 38 65 56 56 33 143 97 196 144 40 35 98 82 167 127 23 15 42
+28 42 29 0 1 49 36 109 79 61 42 158 115 217 161 60 46 134 103 166 127 32 25
+83 63 114 86 31 24 95 77 142 118 74 67 95 76 108 51 5 -11 22 -19 38 -19 20
+0 28 6 33 23 8 28 8 121 -1 149 -6 21 -9 23 -57 23 -28 0 -54 3 -59 8 -11 11
+-6 104 6 104 5 0 23 -16 40 -35 22 -25 39 -34 53 -30 12 4 27 10 32 14 5 4 52
+0 103 -10 51 -10 95 -14 98 -10 4 4 9 1 13 -5 5 -9 51 -17 99 -19 67 -2 91 -7
+104 -18 10 -8 50 -14 94 -14 70 0 84 -5 84 -32 0 -7 30 -14 68 -15 39 -1 83
+-7 98 -14 15 -6 48 -12 74 -14 50 -4 86 -13 125 -31 21 -10 26 -17 20 -28 -5
+-10 -4 -11 5 -3 9 7 20 5 36 -5 23 -14 105 -9 118 7 7 7 53 22 102 33 48 12 89
+27 91 34 4 10 6 10 5 1 -1 -7 2 -7 6 2 4 8 42 20 85 27 62 9 75 8 89 -8 13 -14
+44 -19 75 -12 29 7 56 3 63 -8 7 -12 23 -15 49 -12 21 2 42 7 46 10 3 4 29 -8
+58 -25 28 -17 68 -33 87 -36 19 -4 40 -10 47 -15 7 -5 41 -10 76 -11 34 -1 66
+-8 71 -15 6 -8 23 -14 39 -14 17 0 34 -6 39 -12 5 -7 30 -14 56 -16 38 -2 45 0
+50 17 5 16 7 16 20 -1 8 -9 19 -17 24 -17 5 0 24 -10 41 -23 27 -20 43 -22 120
+-22 64 1 91 -3 120 -18 32 -17 44 -17 82 -8 32 8 40 7 51 -4 9 -10 43 -22 75
+-26 33 -5 59 -12 59 -17 0 -4 22 -15 49 -24 28 -8 68 -23 90 -33 22 -11 54 -23
+72 -28 23 -6 38 -20 45 -41 9 -28 16 -30 56 -20 28 7 47 7 47 -1 0 -7 6 -10 13
+-7 6 3 14 -6 17 -19 6 -24 59 -20 81 6 12 14 21 20 21 14z"/>
+</g>
+</svg>
diff --git a/web/src/lib/assets/sprinter-logo.svg b/web/src/lib/assets/sprinter-logo.svg
new file mode 100644
index 0000000..e8efddc
--- /dev/null
+++ b/web/src/lib/assets/sprinter-logo.svg
@@ -0,0 +1,173 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1667.000000pt" height="1667.000000pt" viewBox="0 0 1667.000000 1667.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,1667.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M7935 12093 l-28 -36 -64 -1196 -63 -1196 -28 -55 c-33 -66 -86 -106
+-162 -121 -52 -10 -134 3 -1375 219 -1458 254 -1357 242 -1371 167 -8 -46 12
+-76 75 -110 29 -16 52 -36 55 -49 3 -12 27 -34 57 -51 28 -17 57 -42 65 -58 8
+-15 39 -41 69 -58 30 -17 55 -36 55 -43 0 -17 36 -48 87 -76 24 -13 44 -33 47
+-46 4 -14 27 -34 59 -53 28 -16 59 -43 68 -58 12 -21 146 -103 502 -311 441
+-257 486 -286 477 -303 -6 -10 -27 -27 -48 -37 -20 -10 -597 -193 -1282 -407
+-685 -213 -1253 -395 -1262 -403 -27 -23 -24 -83 5 -110 13 -12 30 -22 38 -22
+21 -1 54 -32 73 -68 11 -22 26 -35 47 -39 27 -5 48 -25 92 -87 10 -14 26 -26
+36 -26 23 0 71 -37 71 -54 0 -17 43 -56 61 -56 17 0 63 -46 72 -73 4 -10 26
+-26 51 -36 29 -13 53 -34 73 -63 27 -41 31 -43 83 -46 30 -1 150 4 265 11 116
+8 211 14 212 13 1 -1 -575 -369 -1280 -819 -706 -449 -1288 -822 -1295 -829
+-31 -31 -15 -49 268 -293 63 -54 117 -102 120 -105 3 -3 69 -61 148 -128 118
+-101 147 -122 165 -116 12 4 355 171 762 372 929 457 1048 514 1039 499 -4 -6
+-93 -131 -197 -276 -140 -195 -190 -271 -190 -292 0 -29 27 -69 46 -69 11 0
+102 -80 190 -166 29 -28 58 -53 66 -55 13 -5 91 -73 180 -160 26 -25 64 -55
+84 -68 20 -12 50 -40 68 -62 28 -36 36 -40 70 -37 34 3 96 52 614 493 317 270
+580 492 586 493 5 2 9 -5 9 -15 0 -31 30 -64 76 -84 26 -11 48 -28 53 -41 11
+-29 36 -51 81 -72 21 -9 43 -31 55 -53 14 -27 31 -41 55 -49 23 -7 45 -26 64
+-54 19 -27 44 -48 72 -61 24 -10 44 -23 44 -28 0 -19 62 -81 81 -81 10 0 26
+-12 36 -26 45 -66 70 -84 117 -84 33 0 52 6 70 23 13 12 208 305 432 650 224
+345 411 624 415 620 4 -4 73 -195 153 -423 81 -228 154 -426 164 -440 11 -14
+38 -32 60 -40 23 -8 42 -20 42 -26 0 -23 44 -67 87 -85 23 -10 43 -24 43 -32
+0 -20 51 -65 87 -78 18 -6 35 -19 38 -29 12 -37 47 -70 86 -80 21 -6 39 -17
+39 -25 0 -23 49 -73 83 -84 21 -7 40 -25 54 -50 17 -29 34 -44 68 -57 45 -17
+48 -16 93 2 84 35 74 -45 136 1107 61 1139 54 1074 131 1152 52 52 107 75 180
+75 35 0 556 -86 1214 -200 634 -110 1168 -200 1188 -200 28 0 44 8 74 38 45
+46 57 83 38 122 -8 15 -158 153 -334 306 l-321 279 -401 235 c-390 227 -402
+235 -385 254 9 10 35 27 57 37 22 9 598 191 1280 404 682 213 1252 394 1268
+402 15 7 27 20 27 27 0 7 7 19 15 26 26 22 17 54 -27 96 -70 67 -581 509 -608
+526 -23 15 -49 15 -314 -3 -160 -10 -291 -17 -292 -16 -1 1 212 139 473 307
+1583 1014 1502 961 1534 1016 49 86 89 43 -573 617 -62 53 -85 67 -111 67 -23
+0 -220 -92 -641 -300 -335 -165 -610 -299 -611 -298 -2 2 72 107 164 235 181
+250 211 306 189 347 -7 14 -158 152 -336 306 -253 219 -329 280 -350 280 -15
+0 -45 -12 -67 -27 -21 -14 -279 -230 -572 -480 -292 -249 -534 -453 -536 -453
+-2 0 13 47 34 105 41 109 48 160 27 187 -7 8 -156 140 -331 292 -353 306 -351
+305 -412 246 -18 -17 -245 -359 -506 -760 -268 -413 -477 -724 -480 -717 -4 7
+-98 271 -209 587 -111 316 -208 585 -215 596 -23 36 -647 574 -665 574 -10 0
+-30 -16 -45 -37z m519 -1150 c191 -541 346 -989 346 -997 0 -57 -33 19 -143
+332 -69 196 -227 646 -351 1000 -200 568 -238 688 -205 655 4 -4 163 -450 353
+-990z m94 -15 c273 -778 329 -952 293 -912 -9 10 -631 1776 -631 1793 0 6 6
+11 13 11 7 0 137 -355 325 -892z m3478 847 c4 -8 -2 -27 -12 -43 -45 -69
+-1158 -1608 -1168 -1615 -41 -28 -96 -8 -96 35 0 14 976 1381 1063 1488 7 8
+47 46 90 83 77 66 112 81 123 52z m-3382 -869 c188 -537 273 -793 267 -799 -6
+-6 -12 -9 -14 -6 -12 12 -557 1581 -557 1600 0 20 2 21 13 9 8 -8 138 -370
+291 -804z m1606 768 c0 -2 -133 -356 -295 -787 -268 -709 -299 -785 -331 -815
+-38 -36 -76 -40 -82 -10 -3 16 502 1368 535 1431 19 38 102 168 121 189 11 13
+19 15 33 7 11 -5 19 -12 19 -15z m1904 -10 c4 -9 3 -22 -2 -28 -5 -6 -228
+-315 -495 -686 l-487 -675 -105 -53 c-58 -28 -105 -50 -105 -48 0 2 220 309
+490 682 446 618 497 685 572 751 83 72 120 88 132 57z m-3425 -754 c133 -377
+241 -693 241 -702 0 -9 -4 -19 -8 -22 -6 -3 -264 717 -477 1332 -23 67 -25
+107 -5 85 5 -4 117 -316 249 -693z m1641 651 c0 -9 -104 -294 -232 -634 l-233
+-619 -82 -69 c-46 -38 -80 -64 -78 -57 3 7 106 279 229 605 204 540 229 600
+286 690 35 54 68 101 73 105 15 10 37 -2 37 -21z m1905 -18 c0 -14 -154 -236
+-392 -565 l-392 -543 -106 -53 c-72 -36 -103 -47 -96 -35 6 10 183 257 394
+548 348 481 391 537 468 603 88 76 124 89 124 45z m-3450 -656 c123 -350 204
+-595 200 -605 -6 -15 -7 -15 -15 -1 -18 31 -420 1184 -420 1203 0 58 45 -57
+235 -597z m1667 572 c7 -10 -45 -158 -166 -478 -97 -255 -177 -465 -178 -466
+-2 -1 -36 -30 -76 -65 -40 -34 -75 -60 -76 -59 -2 2 72 202 163 444 153 401
+173 449 235 543 64 100 79 112 98 81z m1916 -20 c1 -9 -133 -204 -300 -433
+l-303 -418 -103 -48 -102 -49 29 42 c16 23 150 209 297 414 227 313 281 382
+349 442 59 52 87 70 105 68 14 -1 26 -9 28 -18z m-1778 -93 c0 -7 -222 -590
+-231 -608 -10 -18 -150 -140 -156 -135 -1 2 45 128 103 281 82 215 118 297
+161 364 74 117 81 124 104 111 11 -5 19 -11 19 -13z m1899 -9 c13 -17 12 -19
+-222 -342 l-173 -240 -103 -53 c-56 -30 -104 -52 -106 -50 -2 2 84 125 190
+273 164 228 208 282 282 348 87 77 111 89 132 64z m-1795 -83 c24 -9 20 -27
+-35 -174 -54 -142 -54 -143 -172 -242 l-48 -40 19 48 c11 27 32 83 47 124 23
+60 158 290 170 290 2 0 10 -3 19 -6z m2871 -48 c8 -13 13 -30 10 -37 -3 -8
+-623 -411 -1378 -895 -1296 -831 -1373 -882 -1392 -922 -11 -22 -23 -41 -27
+-42 -4 0 -19 11 -35 24 -35 30 -39 95 -8 124 11 11 604 394 1318 851 1161 744
+1443 919 1484 921 7 0 19 -11 28 -24z m123 -98 c17 -17 15 -53 -5 -70 -18 -15
+-2586 -1663 -2646 -1698 -22 -13 -57 -19 -114 -22 -46 -2 -83 -1 -83 3 0 3 10
+15 23 26 36 35 2594 1673 2692 1725 95 50 114 55 133 36z m127 -114 c9 -9 15
+-26 13 -37 -2 -16 -317 -223 -1245 -818 l-1241 -796 -104 -5 c-57 -3 -104 -5
+-105 -4 -6 5 2477 1590 2551 1628 103 53 108 54 131 32z m130 -118 c8 -13 13
+-29 10 -37 -3 -8 -516 -342 -1141 -743 l-1136 -729 -107 -7 c-58 -5 -107 -7
+-108 -6 -5 5 2251 1447 2336 1493 53 29 104 53 113 53 10 0 24 -11 33 -24z
+m125 -100 c35 -43 46 -35 -1029 -725 l-1035 -663 -105 -7 c-59 -4 -107 -7
+-108 -6 -7 4 2067 1328 2142 1367 97 51 116 56 135 34z m-1260 -1532 c0 -8
+-26 -21 -62 -33 -584 -181 -2340 -731 -2419 -757 -79 -26 -113 -43 -137 -67
+-36 -38 -62 -94 -62 -137 0 -37 -12 -38 -39 -4 -51 65 -45 161 14 213 40 35
+-86 -7 1315 431 1119 350 1158 362 1260 369 115 7 130 6 130 -15z m118 -119
+c-7 -7 -584 -190 -1282 -408 -743 -232 -1283 -406 -1302 -419 -39 -27 -84 -94
+-84 -125 0 -30 -24 -30 -55 2 -16 15 -25 36 -25 54 0 46 29 109 61 132 15 11
+574 191 1241 400 1192 373 1215 380 1323 387 113 8 150 1 123 -23z m130 -98
+c2 -12 -19 -23 -90 -45 -51 -17 -622 -195 -1268 -397 -646 -202 -1192 -376
+-1213 -387 -37 -19 -97 -89 -97 -115 0 -17 -2 -16 -45 4 -30 14 -35 21 -35 52
+0 42 28 93 65 117 14 9 571 187 1238 396 1165 365 1216 380 1317 387 123 9
+124 9 128 -12z m129 -110 c-2 -6 -10 -14 -18 -19 -8 -5 -582 -186 -1277 -403
+-694 -217 -1271 -399 -1281 -404 -21 -12 -77 -73 -83 -93 -7 -18 -82 24 -87
+49 -4 23 24 73 54 95 13 10 572 189 1241 399 1187 371 1221 381 1324 388 111
+7 133 5 127 -12z m121 -110 c2 -12 -19 -23 -90 -45 -51 -17 -622 -195 -1268
+-397 -646 -202 -1191 -376 -1212 -386 -20 -10 -46 -31 -58 -46 l-21 -27 -45
+23 c-24 13 -44 28 -44 34 0 24 53 76 92 91 24 9 576 183 1228 386 1134 355
+1190 371 1290 379 123 9 124 9 128 -12z m-7541 -1041 c15 -13 26 -27 23 -30
+-12 -11 -1782 -118 -1793 -107 -18 18 0 38 45 49 36 10 1487 107 1645 111 42
+1 57 -4 80 -23z m23 -95 c0 -5 -13 -21 -30 -34 -22 -19 -46 -27 -92 -31 -71
+-7 -1491 -96 -1526 -96 -19 0 -23 5 -20 23 2 16 14 25 43 34 22 7 389 34 815
+61 426 27 783 50 793 51 9 0 17 -3 17 -8z m4441 -251 c635 -110 1171 -200
+1192 -200 31 0 46 7 74 35 19 19 38 35 43 35 4 0 19 -9 34 -21 43 -34 28 -109
+-23 -109 -9 0 -550 93 -1201 206 -911 158 -1195 204 -1230 199 -120 -17 -225
+-103 -265 -214 -11 -31 -28 -290 -65 -994 -60 -1137 -56 -1093 -81 -1118 -26
+-26 -83 -25 -109 1 -26 26 -25 44 3 57 53 25 52 8 110 1101 l55 1022 26 55
+c45 91 130 144 233 145 28 0 570 -90 1204 -200z m-4611 126 c0 -2 -23 -19 -51
+-36 l-52 -32 -630 -40 c-426 -27 -633 -36 -639 -30 -20 20 1 40 54 52 29 6
+323 28 653 49 674 43 665 43 665 37z m4741 -236 c634 -110 1168 -200 1187
+-200 43 0 69 14 91 50 l17 29 37 -25 c27 -18 37 -32 37 -51 0 -31 -26 -63 -51
+-63 -10 0 -551 92 -1201 205 -885 154 -1194 204 -1228 200 -64 -8 -162 -59
+-201 -102 -17 -21 -43 -61 -57 -91 -24 -54 -25 -65 -79 -1076 -60 -1138 -52
+-1068 -127 -1074 -39 -3 -76 18 -76 44 0 6 15 27 34 46 21 21 37 48 40 69 3
+19 28 477 56 1019 35 666 56 1001 65 1035 29 104 136 185 246 185 31 0 576
+-90 1210 -200z m-4990 75 c-30 -19 -72 -36 -95 -39 -132 -17 -889 -57 -898
+-48 -19 19 -1 39 44 50 33 9 815 66 973 71 28 0 27 -1 -24 -34z m5118 -185
+c634 -110 1170 -200 1190 -200 39 0 72 21 90 57 l11 22 35 -20 c19 -12 38 -31
+41 -44 8 -30 -11 -63 -39 -70 -13 -4 -557 87 -1211 200 -949 165 -1197 205
+-1234 199 -149 -22 -264 -141 -279 -288 -3 -28 -28 -494 -57 -1035 l-52 -984
+-23 -18 c-35 -29 -85 -25 -111 8 l-21 27 29 26 c17 14 35 35 42 48 7 14 31
+398 66 1045 54 1003 55 1023 79 1072 28 59 39 73 85 107 47 34 85 46 150 47
+31 1 575 -89 1209 -199z m-5279 86 c0 -2 -23 -19 -51 -36 l-50 -33 -301 -19
+c-247 -16 -303 -17 -309 -6 -27 42 38 55 386 77 160 10 298 19 308 20 9 0 17
+-1 17 -3z m5405 -196 c634 -110 1169 -200 1190 -200 29 0 45 8 72 35 19 19 38
+35 43 35 21 0 60 -44 60 -67 0 -30 -26 -63 -49 -63 -9 0 -550 93 -1201 206
+-906 157 -1196 204 -1230 199 -114 -16 -222 -100 -260 -201 -19 -51 -25 -145
+-75 -1074 -30 -559 -57 -1025 -61 -1034 -15 -39 -91 -49 -124 -16 -27 27 -26
+35 16 73 28 26 37 42 41 77 2 25 28 491 57 1035 48 901 55 994 73 1035 45 102
+131 160 236 160 32 0 577 -90 1212 -200z m125 -110 c634 -110 1169 -200 1187
+-200 44 0 70 14 92 50 l17 29 32 -21 c18 -11 35 -31 38 -44 8 -30 -19 -74 -45
+-74 -11 0 -538 90 -1173 200 -634 110 -1174 203 -1200 206 -34 5 -66 0 -119
+-16 -61 -18 -81 -30 -130 -79 -96 -97 -89 -40 -149 -1196 -58 -1118 -49 -1047
+-127 -1053 -34 -3 -44 1 -61 23 l-21 27 38 36 c35 34 39 43 45 102 3 36 29
+495 56 1020 28 525 53 969 56 985 24 115 135 204 255 205 31 0 575 -90 1209
+-200z m-2946 110 l18 -35 -68 -104 c-38 -58 -283 -433 -544 -835 -426 -656
+-478 -731 -503 -734 -16 -2 -35 2 -43 9 -27 22 -15 64 49 165 153 240 1001
+1541 1015 1557 23 26 54 17 76 -23z m-1954 -65 c10 -12 8 -22 -13 -54 -15 -22
+-37 -47 -49 -56 -31 -22 -3147 -1555 -3161 -1555 -23 0 24 32 318 220 279 177
+331 206 745 411 1435 708 2126 1048 2136 1048 6 1 17 -6 24 -14z m1124 -31
+c43 -42 71 -16 -1086 -1001 -606 -516 -1110 -942 -1120 -947 -12 -6 -22 -6
+-29 1 -15 15 149 241 221 304 30 27 480 411 1000 853 982 837 974 830 1014
+790z m893 -75 l23 -62 -516 -793 c-477 -733 -518 -794 -543 -794 -16 0 -36 9
+-46 21 -16 16 -17 25 -8 48 11 30 1055 1641 1063 1641 3 0 15 -28 27 -61z
+m-2205 -190 l-59 -82 -1419 -698 c-780 -385 -1422 -699 -1426 -699 -26 0 24
+35 312 218 l320 204 1163 572 c639 315 1164 572 1166 570 2 -2 -24 -40 -57
+-85z m1240 -18 l-37 -103 -983 -836 c-540 -461 -990 -837 -999 -837 -9 0 -18
+5 -20 10 -2 6 37 66 85 133 l88 122 950 808 c522 445 950 808 951 807 2 -1
+-14 -48 -35 -104z m1035 9 l22 -61 -476 -732 c-261 -403 -482 -740 -491 -749
+-33 -39 -97 -9 -90 41 4 25 995 1561 1007 1561 3 0 16 -27 28 -60z m71 -201
+l21 -56 -458 -704 c-430 -661 -459 -704 -488 -707 -38 -4 -64 27 -54 64 9 34
+944 1473 952 1465 4 -3 16 -31 27 -62z m-2487 14 c-6 -10 -34 -49 -63 -87
+l-53 -69 -1259 -619 c-692 -341 -1261 -617 -1264 -613 -9 8 -6 10 320 217 275
+175 345 214 685 381 208 103 659 326 1003 496 344 170 629 310 633 310 4 1 3
+-7 -2 -16z m1259 -143 c-22 -57 -48 -112 -57 -121 -96 -90 -1707 -1449 -1718
+-1449 -30 0 -12 38 73 154 l87 118 825 703 c454 386 826 701 827 700 2 0 -15
+-48 -37 -105z m1298 -70 l20 -55 -427 -657 c-437 -674 -447 -688 -489 -661
+-33 20 -37 40 -17 82 36 71 880 1360 886 1353 4 -4 16 -32 27 -62z m-2744 -42
+c-4 -7 -32 -47 -61 -88 l-54 -76 -1095 -539 c-603 -297 -1103 -541 -1112 -543
+-32 -5 25 34 323 224 l295 189 853 422 c468 231 853 421 855 422 2 1 0 -5 -4
+-11z m1323 -212 l-42 -107 -730 -620 c-401 -342 -736 -624 -743 -626 -7 -3
+-18 -1 -24 5 -8 8 13 44 72 126 45 63 98 129 116 147 46 44 1388 1187 1391
+1184 2 -1 -16 -50 -40 -109z m-1514 -58 c-6 -7 -35 -47 -65 -88 l-56 -75 -931
+-458 c-512 -252 -938 -460 -947 -464 -59 -22 28 40 291 208 300 192 300 192
+1005 541 388 191 706 348 709 348 2 0 -1 -6 -6 -12z m1406 -230 c-17 -46 -35
+-94 -40 -108 -9 -25 -1217 -1062 -1245 -1068 -37 -9 -19 34 63 147 l88 122
+580 494 c319 272 581 494 582 495 1 0 -11 -37 -28 -82z"/>
+</g>
+</svg>
diff --git a/web/src/lib/components/Account.svelte b/web/src/lib/components/Account.svelte
index c3727a7..755e19f 100644
--- a/web/src/lib/components/Account.svelte
+++ b/web/src/lib/components/Account.svelte
@@ -53,7 +53,7 @@
 
 <div class="w-[1024px] h-full py-[15px] flex-col justify-start items-center gap-2.5 inline-flex">
 	<div
-		class="self-stretch h-[152px] px-[22px] py-[23px] bg-gray-200 dark:bg-gray-700 rounded-xl flex-col justify-start items-center gap-[34px] flex"
+		class="self-stretch h-[152px] px-[22px] py-[23px] bg-surface-200 dark:bg-gray-700 rounded-xl flex-col justify-start items-center gap-[34px] flex"
 	>
 		<div class="self-stretch justify-start items-start gap-2.5 inline-flex">
 			<div class="text-black dark:text-white text-xl font-medium font-['Inter'] leading-7">
@@ -69,22 +69,22 @@
 		</div>
 		<div class="self-stretch justify-end items-start gap-2 inline-flex">
 			<div
-				class="p-2.5 bg-black dark:bg-gray-200 rounded-full justify-center items-center gap-2 flex"
+				class="p-3 px-4 bg-primary-400 dark:bg-primary-500 rounded-full justify-center items-center gap-2 flex"
 			>
 				<button
 					type="button"
-					class="text-white dark:text-black text-base font-medium font-['Inter'] leading-normal"
+					class="text-black text-base font-medium font-['Inter'] leading-normal"
 					on:click={openSendDrawer}
 				>
 					Send
 				</button>
 			</div>
 			<div
-				class="p-2.5 bg-black dark:bg-gray-200 rounded-full justify-center items-center gap-2 flex"
+				class="p-3 px-4 bg-primary-400 dark:bg-primary-500 rounded-full justify-center items-center gap-2 flex"
 			>
 				<button
 					type="button"
-					class="text-white dark:text-black text-base font-medium font-['Inter'] leading-normal"
+					class="text-black text-base font-medium font-['Inter'] leading-normal"
 					on:click={openUpdateNameModal}
 				>
 					Change Display Name
diff --git a/web/src/lib/components/DrawerManager.svelte b/web/src/lib/components/DrawerManager.svelte
index ae3aa4a..0e0ee80 100644
--- a/web/src/lib/components/DrawerManager.svelte
+++ b/web/src/lib/components/DrawerManager.svelte
@@ -11,7 +11,7 @@
 
 <Drawer>
 	<div
-		class="w-full h-full bg-white dark:bg-gray-800 rounded-xl shadow border border-gray-300 dark:border-gray-600 flex-col justify-start items-start inline-flex"
+		class="w-full h-full bg-white dark:bg-gray-800 rounded-xl shadow flex-col justify-start items-start inline-flex"
 	>
 		<div
 			class="w-full h-16 p-5 bg-white dark:bg-gray-700 justify-start items-center gap-3 inline-flex"
diff --git a/web/src/lib/components/Header.svelte b/web/src/lib/components/Header.svelte
index 7302308..6cbc270 100644
--- a/web/src/lib/components/Header.svelte
+++ b/web/src/lib/components/Header.svelte
@@ -1,12 +1,14 @@
 <script>
-	import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
+	import { AppBar, LightSwitch, modeCurrent } from '@skeletonlabs/skeleton';
+	import logoDark from '$lib/assets/sprinter-logo.svg';
+	import logoLight from '$lib/assets/sprinter-logo-white.svg';
 </script>
 
-<AppBar class="bg-white dark:bg-gray-800">
+<AppBar class="bg-surface-200 dark:bg-gray-800">
 	<svelte:fragment slot="lead">
 		<div class="h-10 px-2.5 justify-start items-center gap-2.5 flex">
-			<div class="w-10 h-10 relative bg-slate-200 dark:bg-slate-700 overflow-hidden bg-transparent">
-				<img src="https://s12.gifyu.com/images/StEyL.gif" alt="Joke Logo" />
+			<div class="w-10 h-10 relative overflow-hidden bg-transparent">
+				<img src={$modeCurrent ? logoDark : logoLight} alt="SprinterLogo" />
 			</div>
 			<div class="text-black dark:text-white text-xl font-medium font-['Inter'] leading-7">
 				Sprinter Demo
diff --git a/web/src/lib/components/Portfolio.svelte b/web/src/lib/components/Portfolio.svelte
index 4979dc8..c31cec1 100644
--- a/web/src/lib/components/Portfolio.svelte
+++ b/web/src/lib/components/Portfolio.svelte
@@ -6,6 +6,7 @@
 	import { sprinter } from '$lib/stores/sprinter';
 	import { selectedAccount } from '$lib/stores/wallet';
 	import type { Address } from '@chainsafe/sprinter-sdk';
+	import { formatWei } from '$lib/formatters';
 
 	const modalStore = getModalStore();
 
@@ -64,44 +65,50 @@
 	}
 </script>
 
-<div class="w-[1024px] bg-gray-200 dark:bg-gray-800 flex flex-col items-center gap-4 rounded-xl">
+<div class="w-[1024px] bg-surface-200 dark:bg-gray-700 flex flex-col items-center gap-4 rounded-xl">
 	<!-- Balance Section -->
-	<div class="w-full p-6 rounded-xl flex justify-between items-center relative py-9">
-		<div>
-			<div class="text-slate-800 dark:text-slate-200 text-lg font-normal text-left">Balance</div>
-			<div class="text-slate-800 dark:text-slate-200 text-4xl font-semibold justify-start">
-				{#await totalTokens}
-					<div class="placeholder h-11 w-40" />
-				{:then result}
-					${result.toFixed(2)}
-				{:catch error}
-					- {JSON.stringify(error)}
-				{/await}
-			</div>
-			<div class="text-slate-800 dark:text-slate-200 text-4xl font-semibold justify-start pt-1">
-				{#await totalNative}
-					<div class="placeholder h-11 w-40" />
-				{:then result}
-					{result.toFixed(2)} ETH
-				{:catch error}
-					- {JSON.stringify(error)}
-				{/await}
-			</div>
-		</div>
-		<div
-			class="absolute right-0 top-0 bottom-0 w-[80%] bg-gradient-to-r from-transparent via-indigo-600 to-fuchsia-800 rounded-xl"
-		></div>
-	</div>
+
 	<!-- Portfolio Section -->
 	<div class="w-full flex flex-col gap-4 p-6 pt-3">
-		<div class="text-slate-800 dark:text-slate-200 text-2xl font-semibold text-left">Portfolio</div>
+		<div class="text-slate-800 pt-1 dark:text-slate-200 text-2xl font-semibold text-left">
+			Portfolio
+		</div>
+		<div class="w-full pt-0 pb-2 flex justify-between items-center relative py-9">
+			<div>
+				<div class="text-slate-800 dark:text-slate-200 text-lg font-normal text-left">
+					Total Balance
+				</div>
+				<div class="flex row-auto">
+					<div class="text-slate-800 dark:text-slate-200 text-4xl font-semibold justify-start">
+						{#await totalTokens}
+							<div class="placeholder h-10 w-40" />
+						{:then result}
+							${result.toFixed(2)}
+						{:catch error}
+							- {JSON.stringify(error)}
+						{/await}
+					</div>
+					<div
+						class="text-slate-800 dark:text-slate-200 text-4xl font-semibold justify-start pl-10"
+					>
+						{#await totalNative}
+							<div class="placeholder h-10 w-40" />
+						{:then result}
+							{result.toFixed(2)} ETH
+						{:catch error}
+							- {JSON.stringify(error)}
+						{/await}
+					</div>
+				</div>
+			</div>
+		</div>
 		<div class="table-container">
 			<!-- Native Table Element -->
 			<table
 				class="table table-hover bg-white dark:bg-gray-800 text-slate-800 dark:text-slate-200 rounded-lg overflow-hidden"
 			>
 				<thead>
-					<tr class="bg-gray-100 dark:bg-gray-700 font-medium">
+					<tr class="bg-gray-100 dark:bg-gray-800 font-medium">
 						<th class="p-2">ASSET</th>
 						<th class="p-2">BALANCE</th>
 						<th class="p-2">DISTRIBUTION</th>
@@ -133,7 +140,7 @@
 								</div>
 							</td>
 							<td class="text-slate-700 dark:text-slate-300 text-base text-left">
-								{fromWei(balances['ETH'].total, 18)} ETH
+								{formatWei(balances['ETH'].total, 18)} ETH
 							</td>
 							<td class="text-slate-700 dark:text-slate-300 text-base">
 								<Facepile balances={balances['ETH'].balances} networks={chains} />
@@ -155,7 +162,7 @@
 									</div>
 								</td>
 								<td class="text-slate-700 dark:text-slate-300 text-base text-left">
-									{fromWei(balances[token.symbol].total, token.decimals)}
+									{formatWei(balances[token.symbol].total, token.decimals)}
 									{token.symbol}
 								</td>
 								<td class="text-slate-700 dark:text-slate-300 text-base">
diff --git a/web/src/lib/components/SendTokensDrawer.svelte b/web/src/lib/components/SendTokensDrawer.svelte
index f23db26..7445b2f 100644
--- a/web/src/lib/components/SendTokensDrawer.svelte
+++ b/web/src/lib/components/SendTokensDrawer.svelte
@@ -10,12 +10,13 @@
 		type DrawerSettings
 	} from '@skeletonlabs/skeleton';
 	import { onMount } from 'svelte';
-	import { fromWei, toWei } from 'web3-utils';
+	import { toWei } from 'web3-utils';
 	import { sprinter } from '$lib/stores/sprinter';
 	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
 	import { type FungibleToken, type FungibleTokenBalance } from '@chainsafe/sprinter-sdk';
 	import { selectedAccount } from '$lib/stores/wallet';
 	import type { Address } from '@chainsafe/sprinter-sdk';
+	import { formatWei } from '$lib/formatters';
 
 	const tokens = $sprinter.getAvailableTokens($selectedAccount as Address).then((tokens) => [
 		...tokens,
@@ -228,6 +229,7 @@
 									{#each balances as balance}
 										{@const network = getNetworkByChainId(networks, balance.chainId)}
 										<ListBoxItem
+											active="bg-primary-400 dark:bg-primary-500 hover:dark:bg-primary-700 text-black"
 											bind:group={whitelisted}
 											name={getNetworkByChainId(networks, balance.chainId).name}
 											value={String(balance.chainId)}
@@ -237,7 +239,7 @@
 											</svelte:fragment>
 											{network.name}
 											<svelte:fragment slot="trail">
-												{fromWei(balance.balance, tokenInfo.decimals)}
+												{formatWei(balance.balance, tokenInfo.decimals)}
 											</svelte:fragment>
 										</ListBoxItem>
 									{/each}
@@ -257,12 +259,10 @@
 	<div class="grow shrink basis-0 flex-col justify-center items-center gap-4 inline-flex">
 		<button
 			on:click={requestQuota}
-			class="self-stretch h-[60px] p-2.5 bg-indigo-600 dark:bg-indigo-500 rounded-[10px] shadow border border-zinc-200 dark:border-gray-600 justify-center items-center gap-1 inline-flex"
+			class="self-stretch h-[60px] p-2.5 bg-primary-400 dark:bg-primary-500 rounded-[10px] shadow border border-zinc-200 dark:border-gray-600 justify-center items-center gap-1 inline-flex"
 		>
 			<div class="px-1 justify-center items-center flex">
-				<div
-					class="text-white dark:text-gray-200 text-base font-semibold font-['Inter'] leading-normal"
-				>
+				<div class="text-black text-base font-semibold font-['Inter'] leading-normal">
 					Get Quota
 				</div>
 			</div>
diff --git a/web/src/lib/components/SubmitTokensDrawer.svelte b/web/src/lib/components/SubmitTokensDrawer.svelte
index 5c8bfe6..ae83354 100644
--- a/web/src/lib/components/SubmitTokensDrawer.svelte
+++ b/web/src/lib/components/SubmitTokensDrawer.svelte
@@ -4,7 +4,7 @@
 	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
 	import SkullCrossbonesSolid from '$lib/icons/SkullCrossbonesSolid.svelte';
 	import TransactionCard from '$lib/components/TransactionCard.svelte';
-	import { fromWei } from 'web3-utils';
+	import { formatWei } from '$lib/formatters';
 
 	const drawerStore = getDrawerStore();
 	$: quota = $sprinter.getSolution($drawerStore.meta.quota);
@@ -48,7 +48,7 @@
 						{data}
 						chain={network}
 						{token}
-						balance={fromWei(balance.balance, token.decimals)}
+						balance={formatWei(balance.balance, token.decimals)}
 					/>
 				{/each}
 			{/if}
diff --git a/web/src/lib/components/TokenModal.svelte b/web/src/lib/components/TokenModal.svelte
index 710beaa..85f2069 100644
--- a/web/src/lib/components/TokenModal.svelte
+++ b/web/src/lib/components/TokenModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { SvelteComponent } from 'svelte';
 	import { getModalStore } from '@skeletonlabs/skeleton';
-	import { fromWei } from 'web3-utils';
 	import { getNetworkByChainId } from '$lib/utils';
+	import { formatWei } from '$lib/formatters';
 
 	// Props
 	/** Exposes parent props to this component. */
@@ -42,7 +42,7 @@
 							<tr>
 								<td><img class="size-7" src={network.logoURI} alt="{network.name}-logo" /></td>
 								<td>{network.name}</td>
-								<td>{fromWei(balance.balance, $modalStore[0].meta.decimals)}</td>
+								<td>{formatWei(balance.balance, $modalStore[0].meta.decimals)}</td>
 							</tr>
 						{/each}
 					</tbody>
diff --git a/web/src/lib/components/TransactionCard.svelte b/web/src/lib/components/TransactionCard.svelte
index c15077d..c91290b 100644
--- a/web/src/lib/components/TransactionCard.svelte
+++ b/web/src/lib/components/TransactionCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { fromWei, toHex } from 'web3-utils';
-	import { formatDuration } from '$lib/formatters.js';
+	import { toHex } from 'web3-utils';
+	import { formatDuration, formatWei } from '$lib/formatters.js';
 	import { type Chain, type FungibleToken, type Solution } from '@chainsafe/sprinter-sdk';
 	import { selectedProvider } from '$lib/stores/wallet';
 	import { type NonPayableCallOptions, Web3 } from 'web3';
@@ -95,7 +95,7 @@
 		<img src={chain.logoURI} alt="Source Chain Icon" class="w-8 h-8 mr-2" />
 		<div>
 			<p class="text-lg font-semibold text-black dark:text-white">
-				{fromWei(data.amount, token.decimals)}
+				{formatWei(data.amount, token.decimals)}
 				{token.name} on {chain.name}
 			</p>
 			<p class="text-sm text-gray-600 dark:text-gray-400">
diff --git a/web/src/lib/components/UpdateNameModal.svelte b/web/src/lib/components/UpdateNameModal.svelte
index f925744..dac8880 100644
--- a/web/src/lib/components/UpdateNameModal.svelte
+++ b/web/src/lib/components/UpdateNameModal.svelte
@@ -3,7 +3,7 @@
 	import { getModalStore } from '@skeletonlabs/skeleton';
 	import { type Solution } from '@chainsafe/sprinter-sdk';
 	import { Contract } from 'web3';
-	import { fromWei, toWei } from 'web3-utils';
+	import { toWei } from 'web3-utils';
 	import { sprinter, SPRINTER_SEPOLIA_ADDRESS } from '$lib/stores/sprinter';
 	import TransactionCard from '$lib/components/TransactionCard.svelte';
 	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
@@ -11,6 +11,7 @@
 	import { sprinterNameServiceAbi } from '$lib/sprinterNameService.abi';
 	import { selectedAccount } from '$lib/stores/wallet';
 	import type { Address } from '@chainsafe/sprinter-sdk';
+	import { formatWei } from '$lib/formatters';
 
 	// Props
 	/** Exposes parent props to this component. */
@@ -90,7 +91,7 @@
 								{data}
 								chain={network}
 								token={_token}
-								balance={fromWei((balance || { balance: '0' }).balance, _token.decimals)}
+								balance={formatWei((balance || { balance: '0' }).balance, _token.decimals)}
 							/>
 						{/each}
 					</ul>
diff --git a/web/src/lib/formatters.ts b/web/src/lib/formatters.ts
index 6033df6..faf72e3 100644
--- a/web/src/lib/formatters.ts
+++ b/web/src/lib/formatters.ts
@@ -1,5 +1,16 @@
 import { intlFormatDistance } from 'date-fns';
+import { type Numbers } from 'web3-types';
+import { fromWei } from 'web3-utils';
 
 export function formatDuration(value: number): string {
-	return intlFormatDistance(value * 1000, 0);
+	return intlFormatDistance(value, 0);
+}
+
+export function formatWei(number: Numbers, unit: number, fractionDigits: number = 4): string {
+	const value = fromWei(number, unit);
+	const [integerPart, fractionalValue = ''] = value.split('.');
+
+	return (
+		integerPart + '.' + fractionalValue.padEnd(fractionDigits, '0').substring(0, fractionDigits)
+	);
 }
diff --git a/web/static/favicon.png b/web/static/favicon.png
deleted file mode 100644
index c4e3735c58901acc906145296267c98399e77e61..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15086
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

diff --git a/web/static/sprinter.ico b/web/static/sprinter.ico
new file mode 100644
index 0000000000000000000000000000000000000000..24b9f8c7ea0f2dc0dc09b796a197d006263f68ad
GIT binary patch
literal 15406
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

literal 0
HcmV?d00001

diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 5db5bd0..8af8a39 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
 import { skeleton } from '@skeletonlabs/tw-plugin';
+import { sprinterTheme } from './sprinter.theme';
 
 export default {
 	darkMode: 'class',
@@ -18,6 +19,7 @@ export default {
 		typography,
 		skeleton({
 			themes: {
+				custom: [sprinterTheme],
 				preset: [
 					{
 						name: 'skeleton',