From 23fb29d80026507dd4cb69baa92f25240507963b Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Tue, 6 Jun 2023 08:22:29 +0200
Subject: [PATCH] chore(bridge-ui): minor styling changes (#13883)

Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com>
---
 .../src/components/AddressDropdown.svelte     |   5 +-
 .../components/BridgeForm/BridgeForm.svelte   |   2 +-
 .../BridgeForm/ProcessingFee.svelte           |   2 +-
 .../src/components/ChainDropdown.svelte       |   4 +-
 .../src/components/ConnectWallet.svelte       |   2 +-
 .../bridge-ui/src/components/Navbar.svelte    |  11 +-
 .../src/components/Tabs/TabList.svelte        |   2 +-
 .../src/components/Tabs/TabPanel.svelte       |   8 +-
 .../Transactions/Transaction.svelte           |   6 +-
 .../Transactions/Transactions.svelte          |   2 +-
 .../src/components/icons/Bull.svelte          | 103 +--
 .../src/components/icons/Horse.svelte         | 689 +-----------------
 packages/bridge-ui/src/pages/home/Home.svelte |  20 +-
 packages/bridge-ui/tailwind.config.cjs        |  11 +-
 14 files changed, 75 insertions(+), 792 deletions(-)

diff --git a/packages/bridge-ui/src/components/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
index 3a4919b410d..b84717c4aa2 100644
--- a/packages/bridge-ui/src/components/AddressDropdown.svelte
+++ b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -79,8 +79,7 @@
 <!-- Makes no sense to render anything here without signer  -->
 {#if $signer}
   <div class="dropdown dropdown-bottom dropdown-end">
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label role="button" tabindex="0" class="btn btn-md justify-around">
+    <button class="btn justify-around">
       <span class="font-normal flex-1 text-left flex items-center">
         {#if pendingTx}
           <div class="inline-block ml-2">
@@ -100,7 +99,7 @@
         {/if}
       </span>
       <ChevronDown size="20" />
-    </label>
+    </button>
     <ul
       role="listbox"
       tabindex="0"
diff --git a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
index b43a49fe32c..13725b0f783 100644
--- a/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type Address,fetchFeeData } from '@wagmi/core';
+  import { type Address, fetchFeeData } from '@wagmi/core';
   import { BigNumber, Contract, ethers, type Signer } from 'ethers';
   import { _ } from 'svelte-i18n';
 
diff --git a/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte b/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
index b3d639edeff..bd060b3b59d 100644
--- a/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
@@ -3,7 +3,7 @@
 
   import { ProcessingFeeMethod } from '../../domain/fee';
   import { processingFees } from '../../fee/processingFees';
-  import { destChain,srcChain } from '../../store/chain';
+  import { destChain, srcChain } from '../../store/chain';
   import { signer } from '../../store/signer';
   import { token } from '../../store/token';
   import { recommendProcessingFee } from '../../utils/recommendProcessingFee';
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
index 94cc573478e..4ec10756cc8 100644
--- a/packages/bridge-ui/src/components/ChainDropdown.svelte
+++ b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -43,9 +43,7 @@
 </script>
 
 <div class="dropdown dropdown-end mr-4">
-  <button
-    class="btn btn-md justify-around md:w-[194px]"
-    disabled={cannotSwitch}>
+  <button class="btn justify-around md:w-[194px]" disabled={cannotSwitch}>
     <span class="font-normal flex-1 text-left mr-2">
       {#if $srcChain}
         <svelte:component this={$srcChain.icon} />
diff --git a/packages/bridge-ui/src/components/ConnectWallet.svelte b/packages/bridge-ui/src/components/ConnectWallet.svelte
index 4b1b09c9c77..333876a8519 100644
--- a/packages/bridge-ui/src/components/ConnectWallet.svelte
+++ b/packages/bridge-ui/src/components/ConnectWallet.svelte
@@ -54,7 +54,7 @@
   };
 </script>
 
-<button class="btn btn-md" on:click={() => (isConnectWalletModalOpen = true)}>
+<button class="btn" on:click={() => (isConnectWalletModalOpen = true)}>
   {$_('nav.connect')}
 </button>
 
diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
index 7b552f48397..6b9f88d909a 100644
--- a/packages/bridge-ui/src/components/Navbar.svelte
+++ b/packages/bridge-ui/src/components/Navbar.svelte
@@ -43,7 +43,16 @@
       <Tko width={50} />
     </span>
     <a
-      class="pl-4 font-medium hover:text-[#E81899]"
+      class="
+        hidden 
+        text-sm 
+        leading-none
+        md:inline-block 
+        md:pl-4 
+        md:font-medium 
+        md:text-lg 
+        hover:text-[#E81899]
+      "
       href="https://taiko.xyz/docs/guides/use-the-bridge"
       target="_blank"
       rel="noreferrer">Guide ↗</a>
diff --git a/packages/bridge-ui/src/components/Tabs/TabList.svelte b/packages/bridge-ui/src/components/Tabs/TabList.svelte
index f4ee3e9e0c9..7de82d69039 100644
--- a/packages/bridge-ui/src/components/Tabs/TabList.svelte
+++ b/packages/bridge-ui/src/components/Tabs/TabList.svelte
@@ -1,3 +1,3 @@
-<div role="tablist" class="tabs {$$restProps.class || ''}">
+<div role="tablist" class={$$restProps.class || ''}>
   <slot />
 </div>
diff --git a/packages/bridge-ui/src/components/Tabs/TabPanel.svelte b/packages/bridge-ui/src/components/Tabs/TabPanel.svelte
index 3a42f9d4b12..c2d2cac68a6 100644
--- a/packages/bridge-ui/src/components/Tabs/TabPanel.svelte
+++ b/packages/bridge-ui/src/components/Tabs/TabPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
-  
+
   import { key } from './Tabs.svelte';
 
   export let tab: string = '';
@@ -15,3 +15,9 @@
 <div role="tabpanel" aria-expanded={selected} class={classes}>
   <slot />
 </div>
+
+<style lang="postcss">
+  [role='tabpanel'] {
+    @apply w-full;
+  }
+</style>
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 569e38d180c..2553c4e94f0 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { UserRejectedRequestError } from '@wagmi/core';
-  import { Contract, errors, type Transaction,utils } from 'ethers';
+  import { Contract, errors, type Transaction, utils } from 'ethers';
   import { createEventDispatcher } from 'svelte';
   import { onDestroy, onMount } from 'svelte';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
   import { _ } from 'svelte-i18n';
-  
+
   import { bridges } from '../../bridge/bridges';
   import { chains } from '../../chain/chains';
   import { bridgeABI } from '../../constants/abi';
@@ -360,7 +360,7 @@
   });
 </script>
 
-<tr class="text-transaction-table">
+<tr>
   <td>
     <svelte:component this={txFromChain.icon} height={18} width={18} />
     <span class="ml-2 hidden md:inline-block">{txFromChain.name}</span>
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 0102ed45348..0a7521b7de4 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -47,7 +47,7 @@
   {#if transactionsToShow.length}
     <table class="table-auto my-4">
       <thead>
-        <tr class="text-transaction-table">
+        <tr>
           <th>From</th>
           <th>To</th>
           <th>Amount</th>
diff --git a/packages/bridge-ui/src/components/icons/Bull.svelte b/packages/bridge-ui/src/components/icons/Bull.svelte
index 1c3a37a0d14..73fdee2b6ed 100644
--- a/packages/bridge-ui/src/components/icons/Bull.svelte
+++ b/packages/bridge-ui/src/components/icons/Bull.svelte
@@ -3,90 +3,21 @@
   export let width: number = 30;
 </script>
 
-<svg {width} {height} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #748a95;
-      }
-      .cls-2 {
-        fill: #617880;
-      }
-      .cls-3 {
-        fill: #d9387c;
-      }
-      .cls-4 {
-        fill: #e0e9ee;
-      }
-      .cls-5 {
-        fill: #d0e1e8;
-      }
-      .cls-6 {
-        fill: #dd5891;
-      }
-      .cls-7 {
-        fill: #f0f4f7;
-      }
-      .cls-8 {
-        fill: #172335;
-      }
-    </style>
-  </defs>
-  <g id="Minotaur">
-    <path
-      class="cls-1"
-      d="M19.06,33.15S16.11,35.41,8.6,35.47c-1-3.34,1.61-11,6.49-15.43l7.19-.77,2.27,5.87Z"
-      id="path208793-0" />
-    <path
-      class="cls-2"
-      d="M21.87,29l-5,.32A11.79,11.79,0,0,0,8.6,35.47c7.51-.06,10.46-2.32,10.46-2.32Z"
-      id="path208793-0-2" />
-    <path
-      class="cls-3"
-      d="M24.35,40.14s-8.51,2.49-12.23,5.22c-2.81,2.07-3.51,4.85-3.42,7.8A3.15,3.15,0,0,0,11.85,56h40.3a3.15,3.15,0,0,0,3.15-2.84c.09-2.95-.61-5.73-3.42-7.8-3.72-2.73-12.23-5.22-12.23-5.22Z"
-      id="path211966-6" />
-    <path
-      class="cls-1"
-      d="M44.94,33.15s3,2.26,10.46,2.32c1-3.34-1.61-11-6.49-15.43l-7.19-.77-2.27,5.87Z"
-      id="path48906" />
-    <path
-      class="cls-2"
-      d="M42.13,29l5,.32a11.79,11.79,0,0,1,8.26,6.11c-7.51-.06-10.46-2.32-10.46-2.32Z"
-      id="path48908" />
-    <path
-      class="cls-4"
-      d="M25.92,17.43c-3.7-5.84-4.9-7.34-10.6-7.36a7.1,7.1,0,0,1-3.89-1c-2-1.28-3.15-1.76-3.31.64a13.16,13.16,0,0,0,.39,4.14c1.22,4.78,6.6,3.81,8.35,9.07L23.5,22Z"
-      id="path222881-2" />
-    <path
-      class="cls-4"
-      d="M38.08,17.43c3.7-5.84,4.9-7.34,10.6-7.36a7.1,7.1,0,0,0,3.89-1c2-1.28,3.15-1.76,3.31.64a13.16,13.16,0,0,1-.39,4.14c-1.22,4.78-6.6,3.81-8.35,9.07L40.5,22Z"
-      id="path208425-7" />
-    <path
-      class="cls-5"
-      d="M54.9,8a5.06,5.06,0,0,0-2.33,1.06,6.08,6.08,0,0,1-.92.47c0,.06,0,.11,0,.17a13.16,13.16,0,0,1-.39,4.14c-1.17,4.6-6.19,3.88-8.13,8.5l4,.57c1.75-5.26,7.13-4.29,8.35-9.07a13.16,13.16,0,0,0,.39-4.14C55.8,8.5,55.47,8,54.9,8Z"
-      id="path66289" />
-    <path
-      class="cls-5"
-      d="M9.1,8c-.54,0-.86.46-1,1.53a7.92,7.92,0,0,0,3,.54c5.7,0,6.9,1.52,10.6,7.36L19.29,22l-2.65.37c.08.19.15.37.22.57L23.5,22l2.42-4.54c-3.7-5.84-4.9-7.34-10.6-7.36a7.1,7.1,0,0,1-3.89-1A5.06,5.06,0,0,0,9.1,8Z"
-      id="path57507" />
-    <path
-      class="cls-6"
-      d="M20.84,18.43a8.75,8.75,0,0,0-4.59,7.71,9.77,9.77,0,0,0,.06,1.08c.53,4.28,4.56,8,7.15,11.24A5.93,5.93,0,0,1,24,44.63a3.2,3.2,0,0,0,2.88,4.6H37.11A3.2,3.2,0,0,0,40,44.63a5.93,5.93,0,0,1,.55-6.17c2.59-3.26,6.62-7,7.15-11.24a9.77,9.77,0,0,0,.06-1.08,8.75,8.75,0,0,0-4.59-7.71L32,20.86Z"
-      id="path37166" />
-    <path
-      class="cls-3"
-      d="M43.16,18.43,40,19.12a8.72,8.72,0,0,1,3.52,7,9.77,9.77,0,0,1-.06,1.08c-.53,4.28-4.56,8-7.15,11.24a5.93,5.93,0,0,0-.55,6.17,3.2,3.2,0,0,1-2.88,4.6h4.21A3.2,3.2,0,0,0,40,44.63a5.93,5.93,0,0,1,.55-6.17c2.59-3.26,6.62-7,7.15-11.24a9.77,9.77,0,0,0,.06-1.08A8.75,8.75,0,0,0,43.16,18.43Z"
-      id="path66413" />
-    <path
-      class="cls-7"
-      d="M25,17.38a8.73,8.73,0,0,0-4.16,1.05c.84,3.41,5.58,5.93,11.16,5.93s10.32-2.52,11.16-5.93A8.73,8.73,0,0,0,39,17.38a8.59,8.59,0,0,0-2.21.29,19.11,19.11,0,0,1-9.56,0A8.74,8.74,0,0,0,25,17.38Z"
-      id="path211371-0" />
-    <path
-      class="cls-4"
-      d="M39,17.38a9.13,9.13,0,0,0-2.09.26,9,9,0,0,1,2,.79,8.81,8.81,0,0,1,2.82,2.43,5.62,5.62,0,0,0,1.39-2.43A8.73,8.73,0,0,0,39,17.38Z"
-      id="path66415" />
-    <path
-      class="cls-8"
-      d="M56.41,14.08a13.88,13.88,0,0,0,.42-4.44,2.72,2.72,0,0,0-1.17-2.41c-1-.53-2.26.15-3.6,1a6.18,6.18,0,0,1-3.38.86c-6,0-7.6,1.82-11.18,7.45-.32.05-.64.1-1,.18a18.13,18.13,0,0,1-9.08,0c-.32-.08-.65-.14-1-.19-3.58-5.62-5.13-7.42-11.18-7.44a6.18,6.18,0,0,1-3.38-.86c-1.34-.87-2.55-1.55-3.6-1A2.72,2.72,0,0,0,7.17,9.64a13.88,13.88,0,0,0,.42,4.44C8.29,16.83,10.23,18,12,19c.6.36,1.19.71,1.73,1.11C9,24.91,6.6,32.26,7.69,35.75a1,1,0,0,0,.91.67c.11,0,6.13.11,10.22-2,.7.89,1.43,1.75,2.14,2.58s1.22,1.4,1.75,2.08a4,4,0,0,1,.34.5c-2.42.76-8.43,2.8-11.49,5.05-2.68,2-3.93,4.78-3.81,8.59A4.08,4.08,0,0,0,11.85,57h40.3a4.08,4.08,0,0,0,4.1-3.76c.12-3.81-1.13-6.62-3.81-8.59-3.06-2.25-9.07-4.29-11.49-5.05a4,4,0,0,1,.34-.5c.53-.68,1.13-1.37,1.75-2.08s1.44-1.69,2.14-2.58c3.73,2,10.11,2,10.22,2a1,1,0,0,0,.91-.67c1.09-3.49-1.3-10.84-6-15.66.54-.4,1.13-.75,1.73-1.11C53.77,18,55.71,16.83,56.41,14.08ZM37,18.59a7.65,7.65,0,0,1,2-.26,7.75,7.75,0,0,1,3,.59c-1.21,2.61-5.29,4.49-10,4.49s-8.76-1.88-10-4.49a7.75,7.75,0,0,1,3-.59,7.88,7.88,0,0,1,2,.26A20.12,20.12,0,0,0,37,18.59Zm-27.61-5a11.92,11.92,0,0,1-.36-3.85A2.67,2.67,0,0,1,9.21,9a5.66,5.66,0,0,1,1.7.89A8,8,0,0,0,15.32,11c4.75,0,6,1,8.86,5.45a9.69,9.69,0,0,0-7.27,4.33,10.6,10.6,0,0,0-4-3.45C11.25,16.37,9.93,15.59,9.43,13.61ZM15,21.43a6.16,6.16,0,0,1,.82,1.51,9.69,9.69,0,0,0-.55,3.2,9.39,9.39,0,0,0,.07,1.19,10.23,10.23,0,0,0,.26,1.34,12.46,12.46,0,0,0-6.22,3.92A21.24,21.24,0,0,1,15,21.43Zm-4.67,13a10.74,10.74,0,0,1,6-4,17.14,17.14,0,0,0,1.36,2.38A19.92,19.92,0,0,1,10.36,34.45ZM9.65,53.12c-.1-3.22.83-5.37,3-7,2.81-2.07,8.63-4,10.94-4.77a5.43,5.43,0,0,1-.47,2.85A4.08,4.08,0,0,0,22.74,46a4.15,4.15,0,0,0,3.37,4.07A6.54,6.54,0,0,0,26,51a5.92,5.92,0,0,0,1.61,4.06H25a6.13,6.13,0,0,0-4.54-3.18l-4.19-.59A.95.95,0,0,0,16,53.16l4.19.59a4.23,4.23,0,0,1,2.5,1.3H11.85A2.21,2.21,0,0,1,9.65,53.12ZM36.06,51a4.06,4.06,0,0,1-8.12,0,4.28,4.28,0,0,1,.08-.81h8A4.28,4.28,0,0,1,36.06,51Zm15.25-4.86c2.21,1.62,3.14,3.77,3,7a2.21,2.21,0,0,1-2.2,1.93H41.34a4.2,4.2,0,0,1,2.49-1.3L48,53.16a.95.95,0,0,0-.27-1.88l-4.19.59A6.13,6.13,0,0,0,39,55.05H36.35A5.92,5.92,0,0,0,38,51a6.54,6.54,0,0,0-.07-.89A4.15,4.15,0,0,0,41.26,46a4.08,4.08,0,0,0-.42-1.82,5.43,5.43,0,0,1-.47-2.85C42.68,42.09,48.5,44.06,51.31,46.13ZM41.6,35.72c-.64.74-1.25,1.45-1.8,2.15A7,7,0,0,0,39.13,45a2.24,2.24,0,0,1-1.83,3.22,6,6,0,0,0-1.08-1.49,1,1,0,0,0-1.35,1.35.7.7,0,0,1,.13.16H29a.7.7,0,0,1,.13-.16,1,1,0,0,0-1.35-1.35,6,6,0,0,0-1.08,1.49A2.24,2.24,0,0,1,24.87,45a7,7,0,0,0-.67-7.17c-.55-.7-1.16-1.41-1.8-2.14-2.23-2.6-4.77-5.53-5.15-8.63,0-.31-.05-.63-.05-1a7.77,7.77,0,0,1,3.18-6.27C22,23.08,26.6,25.31,32,25.31s10-2.23,11.62-5.44a7.77,7.77,0,0,1,3.18,6.27c0,.33,0,.65,0,1C46.37,30.2,43.83,33.13,41.6,35.72Zm6.08-5.26a10.62,10.62,0,0,1,6,4,20,20,0,0,1-7.33-1.62A17.14,17.14,0,0,0,47.68,30.46Zm6.91,2.13a12.46,12.46,0,0,0-6.22-3.92,8.58,8.58,0,0,0,.26-1.34,9.39,9.39,0,0,0,.07-1.19,9.69,9.69,0,0,0-.55-3.2A6.16,6.16,0,0,1,49,21.43,21.24,21.24,0,0,1,54.59,32.59ZM47.09,20.8a9.71,9.71,0,0,0-7.27-4.33C42.7,12,43.93,11,48.68,11a8,8,0,0,0,4.41-1.17A5.66,5.66,0,0,1,54.79,9a2.67,2.67,0,0,1,.14.8,11.92,11.92,0,0,1-.36,3.85c-.5,2-1.82,2.76-3.48,3.74A10.5,10.5,0,0,0,47.09,20.8Z" />
-  </g>
+<svg
+  {width}
+  {height}
+  viewBox="0 0 32 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="16" fill="#772D5A" />
+  <path
+    d="M23.8628 17.3257L25.5703 23.7313H23.4532L22.6535 20.7817H16.2659V23.7313H14.2176V20.7817L11.3417 18.7104C10.1536 20.1082 8.40517 21.2733 7.04835 21.2733V16.5211L5 15.8657V14.8825H9.39494L13.0377 12.2966C13.372 12.0688 13.7784 11.9328 14.2192 11.9328C14.5076 11.9328 14.7813 11.9918 15.0304 12.0951L23.0746 15.8657H23.6777C24.2758 15.8657 24.9739 15.6084 24.9739 14.8825C24.9739 14.1565 24.2758 13.8992 23.6777 13.8992C22.0816 13.8992 20.8772 12.6309 20.8772 10.9496V8H21.9013L23.4384 10.9496H22.4142C22.4142 11.8034 22.9468 12.4244 23.6777 12.4244C25.3196 12.4244 26.5109 13.4584 26.5109 14.8825C26.5109 16.3065 25.4065 17.2487 23.8661 17.3257H23.8628Z"
+    fill="#FF715B" />
+  <path
+    d="M20.8755 8H21.8997L23.4367 10.9496H20.8771V8H20.8755Z"
+    fill="#DA4933" />
+  <path
+    opacity="0.3"
+    d="M9.0967 15.8655C9.0967 16.4079 8.63787 16.8487 8.07252 16.8487L5 15.8655V14.8823H8.07252C8.63787 14.8823 9.0967 15.3231 9.0967 15.8655Z"
+    fill="white" />
 </svg>
diff --git a/packages/bridge-ui/src/components/icons/Horse.svelte b/packages/bridge-ui/src/components/icons/Horse.svelte
index 1727c30a513..002faf78a96 100644
--- a/packages/bridge-ui/src/components/icons/Horse.svelte
+++ b/packages/bridge-ui/src/components/icons/Horse.svelte
@@ -6,683 +6,14 @@
 <svg
   {width}
   {height}
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  x="0px"
-  y="0px"
-  viewBox="0 0 48 48"
-  style="enable-background:new 0 0 48 48;"
-  xml:space="preserve">
-  <style type="text/css">
-    .st0 {
-      opacity: 0.15;
-      fill: #45413c;
-    }
-    .st1 {
-      fill: #ff6196;
-    }
-    .st2 {
-      fill: #ff87af;
-    }
-    .st3 {
-      fill: none;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st4 {
-      fill: #ffe500;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st5 {
-      fill: #ffe500;
-    }
-    .st6 {
-      fill: #ebcb00;
-    }
-    .st7 {
-      fill: #ebcb00;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st8 {
-      fill: #fff48c;
-    }
-    .st9 {
-      fill: #ffccdd;
-      stroke: #ffb0ca;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st10 {
-      fill: #ffb0ca;
-      stroke: #ff87af;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st11 {
-      opacity: 0.7;
-      fill: #ffe5ee;
-    }
-    .st12 {
-      fill: #009fd9;
-    }
-    .st13 {
-      fill: #00b8f0;
-    }
-    .st14 {
-      fill: #656769;
-    }
-    .st15 {
-      fill: #87898c;
-    }
-    .st16 {
-      fill: #ff6242;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st17 {
-      fill: #4aeff7;
-    }
-    .st18 {
-      fill: #00dfeb;
-    }
-    .st19 {
-      fill: #a6fbff;
-    }
-    .st20 {
-      fill: #ffffff;
-    }
-    .st21 {
-      fill: #e5f8ff;
-    }
-    .st22 {
-      fill: #e5f8ff;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st23 {
-      fill: #ffe500;
-      stroke: #ebcb00;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st24 {
-      fill: #bdbec0;
-    }
-    .st25 {
-      fill: #4acfff;
-    }
-    .st26 {
-      fill: #e8f4fa;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st27 {
-      fill: #80ddff;
-    }
-    .st28 {
-      fill: #009fd9;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st29 {
-      fill: #b8ecff;
-    }
-    .st30 {
-      fill: #4acfff;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st31 {
-      fill: #b8ecff;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st32 {
-      fill: #fffacf;
-    }
-    .st33 {
-      fill: #fff48c;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st34 {
-      fill: #bf8256;
-    }
-    .st35 {
-      fill: #dea47a;
-    }
-    .st36 {
-      fill: #656769;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st37 {
-      fill: #ff8a14;
-    }
-    .st38 {
-      fill: #ffaa54;
-    }
-    .st39 {
-      fill: #eb6d00;
-    }
-    .st40 {
-      fill: #627b8c;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st41 {
-      fill: #ffffff;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st42 {
-      fill: #e0366f;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st43 {
-      fill: #ff87af;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st44 {
-      fill: #e0366f;
-    }
-    .st45 {
-      fill: #ff6196;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st46 {
-      fill: #525252;
-    }
-    .st47 {
-      fill: #debb7e;
-    }
-    .st48 {
-      fill: #f0d5a8;
-    }
-    .st49 {
-      fill: #daedf7;
-    }
-    .st50 {
-      fill: #f7e5c6;
-    }
-    .st51 {
-      fill: #debb7e;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st52 {
-      fill: #fff5e3;
-    }
-    .st53 {
-      fill: #00f5bc;
-    }
-    .st54 {
-      fill: #ffb0ca;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st55 {
-      fill: #8cffe4;
-    }
-    .st56 {
-      fill: #00dba8;
-    }
-    .st57 {
-      fill: #87898c;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st58 {
-      fill: #ff6242;
-    }
-    .st59 {
-      fill: #ff866e;
-    }
-    .st60 {
-      fill: #f0f0f0;
-    }
-    .st61 {
-      fill: #bdbec0;
-      stroke: #45413c;
-      stroke-width: 1.0064;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st62 {
-      fill: #947746;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st63 {
-      fill: #b89558;
-    }
-    .st64 {
-      fill: #e04122;
-    }
-    .st65 {
-      fill: #c0dceb;
-    }
-    .st66 {
-      fill: #e8f4fa;
-    }
-    .st67 {
-      fill: #00b8f0;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st68 {
-      fill: #80ddff;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st69 {
-      fill: #9ceb60;
-    }
-    .st70 {
-      fill: #c8ffa1;
-    }
-    .st71 {
-      fill: #ffb0ca;
-    }
-    .st72 {
-      fill: #ffccdd;
-    }
-    .st73 {
-      fill: #ffe5ee;
-    }
-    .st74 {
-      fill: #45413c;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st75 {
-      fill: #ffcabf;
-    }
-    .st76 {
-      fill: #ffa694;
-    }
-    .st77 {
-      fill: #ffa694;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st78 {
-      fill: #ffcc99;
-    }
-    .st79 {
-      fill: #8ca4b8;
-    }
-    .st80 {
-      fill: #adc4d9;
-    }
-    .st81 {
-      fill: #f0d5a8;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st82 {
-      fill: #bdbec0;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st83 {
-      fill: #e0e0e0;
-    }
-    .st84 {
-      fill: #45413c;
-    }
-    .st85 {
-      fill: #e5feff;
-    }
-    .st86 {
-      fill: #fffce5;
-    }
-    .st87 {
-      fill: #ffaa54;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st88 {
-      fill: #6dd627;
-    }
-    .st89 {
-      fill: #46b000;
-    }
-    .st90 {
-      fill: #ffe8e0;
-    }
-    .st91 {
-      fill: #ffcebf;
-    }
-    .st92 {
-      fill: #ffe8d1;
-    }
-    .st93 {
-      fill: #fff48c;
-      stroke: #4f4b45;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st94 {
-      fill: #ffdcd1;
-      stroke: #4f4b45;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st95 {
-      fill: none;
-      stroke: #4f4b45;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st96 {
-      fill: none;
-      stroke: #4f4b45;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st97 {
-      fill: #656769;
-      stroke: #4f4b45;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st98 {
-      fill: #87898c;
-      stroke: #4f4b45;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st99 {
-      fill: #c0dceb;
-      stroke: #4f4b45;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st100 {
-      fill: #ffa694;
-      stroke: #4f4b45;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st101 {
-      fill: #e04122;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st102 {
-      fill: #fffce5;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st103 {
-      fill: #915e3a;
-    }
-    .st104 {
-      fill: none;
-      stroke: #915e3a;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st105 {
-      fill: #915e3a;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st106 {
-      fill: #ff866e;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st107 {
-      fill: #fff5e3;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st108 {
-      fill: #ffdcd1;
-    }
-    .st109 {
-      fill: #ffdcd1;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st110 {
-      fill: #f0c2a1;
-    }
-    .st111 {
-      fill: #ffe3cf;
-    }
-    .st112 {
-      fill: #fffacf;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st113 {
-      fill: #dea47a;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st114 {
-      fill: #f0c2a1;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st115 {
-      fill: #eb6d00;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st116 {
-      fill: #ff8a14;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st117 {
-      fill: #d9fdff;
-    }
-    .st118 {
-      fill: #c8ffa1;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st119 {
-      fill: #e4ffd1;
-    }
-    .st120 {
-      fill: #e0e0e0;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st121 {
-      fill: #ffccdd;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st122 {
-      fill: #bf8256;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-    .st123 {
-      fill: #c0dceb;
-      stroke: #45413c;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-miterlimit: 10;
-    }
-  </style>
-  <g>
-    <ellipse
-      id="XMLID_12112_"
-      class="st0"
-      cx="24"
-      cy="45.5"
-      rx="12.5"
-      ry="1.5" />
-    <path
-      id="XMLID_12474_"
-      class="st47"
-      d="M22.3,28.8c1.2,6.7,2.6,11.3,6.9,16c0.8,0.9,2.2,1,3.1,0.2l0,0
-		c6.6-5.5,10.4-13.6,10.3-22.2l0,0l-11.8-9.2c-1.7-1.3-3.5-2.5-5.5-3.4l0,0C22,8.4,18,8.4,14.7,10.1l0,0c-2.5,1.3-4.5,3.5-5.6,6.1
-		L4.7,27.1C3.1,31,6,35.4,10.3,35.3c2.7-0.1,5-1.2,6.6-3l2.8-3.2L22.3,28.8z" />
-    <path
-      class="st41"
-      d="M9.1,16.2L4.7,27.1C3.1,31,6,35.4,10.3,35.3c1.8,0,3.3-0.5,4.7-1.4c0.1-0.5,0.2-1.1,0.2-1.8
-		c0-1.4-0.7-2.6-1.7-3.6c-2.7-2.7-3.8-7-1.5-11c2.1-3.7,5.9-4.4,3.2-7.7c-0.2,0.1-0.3,0.2-0.5,0.2C12.1,11.4,10.2,13.6,9.1,16.2z" />
-    <path
-      id="XMLID_12111_"
-      class="st3"
-      d="M22.3,28.8c1.8-0.7,2.9-1.5,4-2.7c1-1.2,1.9-3,2.1-5" />
-    <path
-      id="XMLID_12110_"
-      class="st3"
-      d="M22.3,28.8c1.2,6.7,2.6,11.3,6.9,16c0.8,0.9,2.2,1,3.1,0.2l0,0c6.6-5.5,10.4-13.6,10.3-22.2
-		l0,0l-11.8-9.2c-1.7-1.3-3.5-2.5-5.5-3.4l0,0C22,8.4,18,8.4,14.7,10.1l0,0c-2.5,1.3-4.5,3.5-5.6,6.1L4.7,27.1
-		C3.1,31,6,35.4,10.3,35.3c2.7-0.1,5-1.2,6.6-3l2.8-3.2L22.3,28.8z" />
-    <circle id="XMLID_12109_" class="st74" cx="16.8" cy="18.6" r="1" />
-    <ellipse
-      id="XMLID_12108_"
-      class="st78"
-      cx="21.5"
-      cy="22.9"
-      rx="1.1"
-      ry="0.8" />
-    <path id="XMLID_12107_" class="st3" d="M7.6,31c0,0-0.4-1.1,0.6-1.6" />
-    <path
-      id="XMLID_12106_"
-      class="st34"
-      d="M18.1,11.3C17.3,12.6,16,14,14.1,15c-2.7,1.4-5.3,1.7-6.8,1.8c-0.3,0-0.5-0.4-0.3-0.6
-		c0.5-0.5,1.2-1.4,1.7-3c1.2-3.5,4.6-8.6,10.7-8.6c8.6,0,10,3.9,10,3.9s4-0.4,8.6,2.1c3.6,2,5.1,4.6,5.6,7.4c0.5,3-0.4,5.3-1.3,7.2
-		c-1.8,2.9-4.7,4.1-5.9,4.5c-0.3,0.1-0.5-0.1-0.5-0.4c0.2-1.3,0.5-4.9-0.4-8c-0.9-3.1-4.1-5.9-5.5-7c-0.3-0.3-0.8-0.2-1,0.2
-		l-1.2,1.8c-0.2,0.3-0.6,0.2-0.6-0.1c-0.2-1-0.7-2.8-2-4.1c-1.4-1.5-4.1-2.9-6.1-3.7l0,0C18.9,9.4,18.6,10.5,18.1,11.3z" />
-    <path
-      id="XMLID_12105_"
-      class="st35"
-      d="M7.2,16.8c0.4,0,0.9-0.1,1.5-0.1c0,0,0,0,0-0.1C9.9,13.1,13.4,8,19.4,8
-		c8.6,0,10,3.9,10,3.9s4-0.4,8.6,2.1c3.6,2,5.1,4.6,5.6,7.4c0,0,0,0,0,0c0.2-1,0.2-2.1,0-3.4c-0.5-2.9-2-5.4-5.6-7.4
-		c-4.5-2.5-8.6-2.1-8.6-2.1s-1.4-3.9-10-3.9c-6.1,0-9.5,5.1-10.7,8.6c-0.5,1.6-1.2,2.5-1.7,3C6.7,16.4,6.9,16.8,7.2,16.8z" />
-    <path
-      id="XMLID_12104_"
-      class="st3"
-      d="M18.1,11.3C17.3,12.6,16,14,14.1,15c-2.7,1.4-5.3,1.7-6.8,1.8c-0.3,0-0.5-0.4-0.3-0.6
-		c0.5-0.5,1.2-1.4,1.7-3c1.2-3.5,4.6-8.6,10.7-8.6c8.6,0,10,3.9,10,3.9s4-0.4,8.6,2.1c3.6,2,5.1,4.6,5.6,7.4c0.5,3-0.4,5.3-1.3,7.2
-		c-1.8,2.9-4.7,4.1-5.9,4.5c-0.3,0.1-0.5-0.1-0.5-0.4c0.2-1.3,0.5-4.9-0.4-8c-0.9-3.1-4.1-5.9-5.5-7c-0.3-0.3-0.8-0.2-1,0.2
-		l-1.2,1.8c-0.2,0.3-0.6,0.2-0.6-0.1c-0.2-1-0.7-2.8-2-4.1c-1.4-1.5-4.1-2.9-6.1-3.7l0,0C18.9,9.4,18.6,10.5,18.1,11.3z" />
-    <path
-      id="XMLID_12103_"
-      class="st47"
-      d="M22.4,10.8c1.8-1.7,2.2-4.2,0.8-6.3l-1.1-1.7c-0.4-0.6-1.3-0.8-1.9-0.4
-		c-0.3,0.2-0.5,0.5-0.5,0.9l-0.2,3c0,0-0.1,3.3-1.2,5.1L22.4,10.8z" />
-    <path
-      id="XMLID_12102_"
-      class="st48"
-      d="M19.4,5.6c0-0.3,0.4-0.7,0.7-0.9c0.6-0.4,1.5-0.2,1.9,0.4l1.1,1.7c0.3,0.5,0.5,1,0.7,1.5
-		c0.3-1.3,0.1-2.7-0.7-3.9l-1.1-1.7c-0.4-0.6-1.3-0.8-1.9-0.4c-0.3,0.2-0.5,0.5-0.5,0.9L19.4,5.6z" />
-    <path
-      id="XMLID_12101_"
-      class="st3"
-      d="M22.4,10.8c1.8-1.7,2.2-4.2,0.8-6.3l-1.1-1.7c-0.4-0.6-1.3-0.8-1.9-0.4
-		c-0.3,0.2-0.5,0.5-0.5,0.9l-0.2,3c0,0-0.1,3.3-1.2,5.1" />
-    <path id="XMLID_12100_" class="st122" d="M29.4,8.6c0,0,0.5,0.7,0.7,3.2" />
-  </g>
+  viewBox="0 0 32 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="16" fill="#34328B" />
+  <path
+    d="M7.80116 9.19912L7 8H10.1486C12.1372 8 13.7481 9.60168 13.7481 11.5788V12.0256H18.9212C19.3261 12.0256 19.7123 12.1055 20.0454 12.2583C20.4417 11.9542 20.8997 11.7401 21.3505 11.6502C22.0612 11.5074 22.9342 11.5788 23.7439 12.1241C24.5451 12.6694 24.9672 13.663 24.9945 14.4238C25.039 15.2018 24.805 15.8642 24.6169 16.321L24.1402 17.3317C24.0411 17.5729 23.978 17.8413 24.0325 18.1725C24.0684 18.5208 24.2393 18.8977 24.4101 19.3174L23.7798 19.944C23.3304 19.7114 22.9069 19.4073 22.5207 18.9691C22.1431 18.5308 21.8458 17.8684 21.81 17.2246C21.7468 16.5808 21.8458 15.9984 21.8731 15.6058C21.9004 15.3189 21.8817 15.1233 21.8458 14.9891C21.8186 16.0541 21.2155 16.9748 20.334 17.4673L21.2514 19.0861C21.395 19.3188 21.4223 19.5872 21.395 19.8555L20.4948 24.1053H18.2191L19.0834 19.8199L18.0755 18.0212L14.0812 18.6835C13.9017 18.7107 13.7122 18.7378 13.5227 18.7378H13.2973V24.1053H11.0474V17.6457C10.499 17.0462 10.1472 16.2596 10.1472 15.3831V12.1783C10.1472 11.9542 9.85 11.8743 9.7337 12.0627L8.34819 14.264L7 13.8143V10.6837C7 10.067 7.31443 9.52031 7.80116 9.19912Z"
+    fill="#FFC6E9" />
+  <path
+    d="M21.3505 11.6503C20.8997 11.7402 20.4417 11.9543 20.0454 12.2584C20.6994 12.4984 21.9751 13.3806 21.8459 14.9893C21.8818 15.1234 21.9004 15.319 21.8731 15.6059C21.8459 15.9985 21.7468 16.5809 21.81 17.2247C21.8459 17.8686 22.1431 18.5309 22.5207 18.9692C22.9069 19.4074 23.3304 19.7115 23.7798 19.9442L24.4101 19.3175C24.2393 18.8978 24.0684 18.5209 24.0325 18.1726C23.978 17.8414 24.0412 17.5731 24.1402 17.3318L24.6169 16.3211C24.805 15.8643 25.039 15.202 24.9945 14.424C24.9672 13.6631 24.5451 12.6695 23.744 12.1242C22.9342 11.5789 22.0612 11.5075 21.3505 11.6503Z"
+    fill="#E283BE" />
 </svg>
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index cec90b28fce..526c3d85937 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -26,13 +26,25 @@
 
 <div class="container mx-auto text-center my-10">
   <Tabs
-    class="rounded-3xl md:border-2 border-bridge-form border-solid p-2 md:p-6 md:inline-block min-h-[650px]"
+    class="
+      tabs 
+      md:bg-tabs 
+      md:border-2 
+      md:dark:border-1 
+      md:border-gray-200 
+      md:dark:border-gray-800 
+      md:shadow-md 
+      md:rounded-3xl 
+      md:p-6 
+      md:inline-block 
+      md:min-h-[650px]
+      p-2"
     bind:activeTab>
     {@const tab1 = tabsRoute[0]}
     {@const tab2 = tabsRoute[1]}
     {@const tab3 = tabsRoute[2]}
 
-    <TabList class="block mb-4">
+    <TabList class="block mb-4 w-full">
       <Tab name={tab1.name} href={tab1.href}>Bridge</Tab>
       <Tab name={tab2.name} href={tab2.href}>
         <span>Transactions</span>
@@ -49,7 +61,7 @@
       <div class="rounded-lg py-4 flex flex-col items-center justify-center">
         <SelectChain />
       </div>
-      <div class="px-4 md:w-[440px]">
+      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
         <BridgeForm />
       </div>
     </TabPanel>
@@ -61,7 +73,7 @@
     </TabPanel>
 
     <TabPanel tab={tab3.name}>
-      <div class="px-4 md:w-[440px]">
+      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
         <Faucet />
       </div>
     </TabPanel>
diff --git a/packages/bridge-ui/tailwind.config.cjs b/packages/bridge-ui/tailwind.config.cjs
index d66f8053fe1..82038ca7bfb 100644
--- a/packages/bridge-ui/tailwind.config.cjs
+++ b/packages/bridge-ui/tailwind.config.cjs
@@ -1,7 +1,7 @@
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   plugins: [require('daisyui')],
-  darkMode: ['[data-theme="dark"]'],
+  darkMode: ['class', '[data-theme="dark"]'],
   theme: {
     extend: {
       colors: {
@@ -11,8 +11,7 @@ module.exports = {
         'dark-4': 'var(--color-dark-4)',
         'dark-5': 'var(--color-dark-5)',
         'dark-6': 'var(--color-dark-6)',
-        'transaction-table': 'var(--color-transaction-table)',
-        'bridge-form': 'var(--color-bridge-form)',
+        tabs: 'var(--tabs)',
       },
       keyframes: {
         rise: {
@@ -55,11 +54,10 @@ module.exports = {
           '--color-dark-4': '#242424',
           '--color-dark-5': '#373737',
           '--color-dark-6': '#4F4F4F',
-          '--color-bridge-form': '#27272A',
-          '--color-transaction-table': '#FFFFFF',
           '--rounded-btn': '.5rem',
           '--rounded-box': '.5rem',
           '--btn-text-case': 'capitalize',
+          '--tabs': '#1E2026',
         },
         light: {
           ...require('daisyui/colors/themes')['[data-theme=light]'],
@@ -81,11 +79,10 @@ module.exports = {
           '--color-dark-4': '#242424',
           '--color-dark-5': '#CDCDCD',
           '--color-dark-6': '#4F4F4F',
-          '--color-bridge-form': '#E4E4E7',
-          '--color-transaction-table': '#1F2937',
           '--rounded-btn': '.5rem',
           '--rounded-box': '.5rem',
           '--btn-text-case': 'capitalize',
+          '--tabs': '#F3F3F3',
         },
       },
     ],