diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
index 491272492b..fa8fe6531d 100644
--- a/packages/bridge-ui/src/app.css
+++ b/packages/bridge-ui/src/app.css
@@ -86,6 +86,12 @@ input[type=number] {
   display: none;
 }
 
+[data-theme="light"] .toggle-chain.btn[disabled] {
+  color: #1f2937;
+  background-color: #d4d4d4;
+  opacity: 0.4;
+}
+
 @media screen and (max-width: 768px) {
   [data-theme="dark"] .taiko-logo {
     display: none;
diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
index 6ccc547b8a..0ceb87df1e 100644
--- a/packages/bridge-ui/src/components/form/SelectChain.svelte
+++ b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -43,7 +43,7 @@
 
   <button
     on:click={toggleChains}
-    class="btn btn-square btn-sm"
+    class="btn btn-square btn-sm toggle-chain"
     disabled={!$signer}><ArrowRight size="16" /></button
   >
   <div class="flex items-center w-2/5 justify-center">