diff --git a/landing/src/components/modules/bridge-in.tsx b/landing/src/components/modules/bridge-in.tsx
index fa6ca99a4..d536786c6 100644
--- a/landing/src/components/modules/bridge-in.tsx
+++ b/landing/src/components/modules/bridge-in.tsx
@@ -166,7 +166,7 @@ export const BridgeIn = () => {
 
   return (
     <>
-      <div className="max-w-md flex flex-col gap-3 relative max-h-[calc(75vh-100px)] overflow-y-auto p-3">
+      <div className="max-w-md flex flex-col bg-background gap-3 relative max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
           Bridge resources and lords from your Starknet wallet into the Eternum game. You will have to complete the
           claim on your Realm in the{" "}
@@ -185,7 +185,7 @@ export const BridgeIn = () => {
             <div className="text-xs text-slate-500 uppercase mb-1">To Realm</div>
 
             <Select onValueChange={(value) => setRealmEntityId(Number(value))}>
-              <SelectTrigger className="w-full bg-dark-brown [background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] border border-transparent animate-border">
+              <SelectTrigger className="w-full dark:[background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] light:[background:linear-gradient(45deg,#ffffff,#ffffff)_padding-box,conic-gradient(from_var(--border-angle),#b08c4f_80%,_#daa520_86%,_#ffd700_90%,_#daa520_94%,_#b08c4f)_border-box] border border-transparent animate-border">
                 <SelectValue placeholder="Select Realm To Transfer" />
               </SelectTrigger>
               <SelectContent>
@@ -340,8 +340,8 @@ const ResourceInputRow = ({
         : "0";
 
   return (
-    <div key={id} className="rounded-lg p-3 border border-gold/15 shadow-lg bg-dark-brown flex gap-3 items-center">
-      <div className="relative  w-full">
+    <div key={id} className="rounded-lg p-3 border border-gold/15 shadow-lg bg-background flex gap-3 items-center">
+      <div className="relative w-full">
         <Input
           type="text"
           placeholder="0.0"
@@ -352,7 +352,7 @@ const ResourceInputRow = ({
               [id]: Number(e.target.value),
             });
           }}
-          className="bg-dark-brown text-2xl  outline-none h-10 border-none"
+          className="bg-background text-2xl  outline-none h-10 border-none"
         />
         <div className="flex items-center gap-2 text-xxs absolute right-1 bottom-1">
           <span className="text-muted-foreground hover:text-gold text-xs">{fetchedBalance} </span>
@@ -397,7 +397,7 @@ const ResourceInputRow = ({
                   disabled={Object.keys(selectedResourceAmounts).includes(res?.id.toString() ?? "")}
                   value={res?.id.toString() ?? ""}
                 >
-                  <div className="flex items-center gap-2">
+                  <div className="flex bg-background items-center gap-2">
                     {res?.trait && <ResourceIcon resource={res?.trait} size="md" />}
                     {res?.trait ?? ""}
                     <span className="text-muted-foreground text-xs">
diff --git a/landing/src/components/modules/bridge-out-step-1.tsx b/landing/src/components/modules/bridge-out-step-1.tsx
index 7ad062653..5902f543f 100644
--- a/landing/src/components/modules/bridge-out-step-1.tsx
+++ b/landing/src/components/modules/bridge-out-step-1.tsx
@@ -151,7 +151,7 @@ export const BridgeOutStep1 = () => {
 
   return (
     <>
-      <div className="max-w-md flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
+      <div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
           Bridge resources from your Realms balance in game to tradeable ERC20 assets in your Starknet wallet. This will
           require a second step to send the resources to your wallet once the donkeys have arrived at the bank.
@@ -161,7 +161,7 @@ export const BridgeOutStep1 = () => {
           <div className="flex flex-col min-w-40">
             <div className="text-xs uppercase mb-1 ">From Realm</div>
             <Select onValueChange={(value) => setRealmEntityId(value)}>
-              <SelectTrigger className="w-full bg-dark-brown [background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] border border-transparent animate-border">
+              <SelectTrigger className="w-full bg-background dark:[background:linear-gradient(45deg,#1a1311,#1a1311)_padding-box,conic-gradient(from_var(--border-angle),#8b7355_80%,_#c6a366_86%,_#e5c088_90%,_#c6a366_94%,_#8b7355)_border-box] light:[background:linear-gradient(45deg,#ffffff,#ffffff)_padding-box,conic-gradient(from_var(--border-angle),#d4b17d_80%,_#e8c088_86%,_#f5d4a3_90%,_#e8c088_94%,_#d4b17d)_border-box] border border-transparent animate-border">
                 <SelectValue placeholder="Select Settled Realm" />
               </SelectTrigger>
               <SelectContent>
diff --git a/landing/src/components/modules/bridge-out-step-2.tsx b/landing/src/components/modules/bridge-out-step-2.tsx
index 1b0c87640..0d8489fdc 100644
--- a/landing/src/components/modules/bridge-out-step-2.tsx
+++ b/landing/src/components/modules/bridge-out-step-2.tsx
@@ -134,7 +134,7 @@ export const BridgeOutStep2 = () => {
 
   return (
     <>
-      <div className="max-w-md flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
+      <div className="max-w-md bg-background flex flex-col gap-3 max-h-[calc(75vh-100px)] overflow-y-auto p-3">
         <TypeP>
           Finalise the withdrawal of resources from your Realm in Eternum to your Starknet wallet. The bridge will close
           and you will be unable to withdraw 1 hour after the Season is won