From cad623b09f0646c6142c1bfecd39615caa3d3b6a Mon Sep 17 00:00:00 2001
From: artemis prime <artemisprimedev@gmail.com>
Date: Sun, 7 Jan 2024 12:29:41 -0800
Subject: [PATCH] app styled (initial view)

---
 app/components/BridgeMenu/Menu.tsx            |  12 +-
 app/components/BridgeMenu/index.tsx           |   8 +-
 .../Campaigns/Details/Leaderboard.tsx         |  30 +--
 app/components/Campaigns/Details/Rewards.tsx  |  16 +-
 app/components/Campaigns/Details/index.tsx    |   2 +-
 app/components/Campaigns/index.tsx            |   8 +-
 app/components/ConnectNetwork.tsx             |   4 +-
 app/components/ConnectedWallets.tsx           |  22 +-
 .../FeeDetails/Campaign.tsx                   |   2 +-
 .../FeeDetails/DetailedEstimates.tsx          |   6 +-
 .../FeeDetails/ReceiveAmounts.tsx             |  70 ++++---
 .../DisclosureComponents/FeeDetails/index.tsx |   4 +-
 app/components/ErrorFallback.tsx              |   4 +-
 app/components/Input/Address.tsx              |  36 ++--
 app/components/Input/Amount.tsx               |  82 ++++----
 app/components/Input/CurrencyFormField.tsx    | 107 +++++-----
 app/components/Input/EnhancedAmount.tsx       | 198 +++++++++---------
 app/components/Input/NetworkFormField.tsx     |   2 +-
 app/components/Input/NumericInput.tsx         | 176 ++++++++--------
 app/components/LoadingCard.tsx                |   4 +-
 app/components/MessageComponent.tsx           |   4 +-
 app/components/NoCookies.tsx                  |  10 +-
 app/components/OptionToggle.tsx               |   8 +-
 app/components/ReserveGasNote.tsx             |   4 +-
 app/components/Sceletons.tsx                  |  32 +--
 .../Select/Command/commandSelect.tsx          |   2 +-
 .../Select/Popover/PopoverSelect.tsx          |  26 +--
 .../Select/Popover/PopoverSelectWrapper.tsx   |   6 +-
 app/components/Select/Shared/SelectItem.tsx   |   2 +-
 app/components/SendEmail.tsx                  |  30 +--
 app/components/Swap/Form/Form.tsx             | 190 +++++++++--------
 app/components/Swap/Form/index.tsx            |  12 +-
 app/components/Swap/NotFound.tsx              |   2 +-
 app/components/Swap/Step.tsx                  |   6 +-
 app/components/Swap/Summary/Summary.tsx       |  20 +-
 .../Swap/Withdraw/Coinbase/Authorize.tsx      |  10 +-
 .../Swap/Withdraw/Coinbase/Coinbase2FA.tsx    |  10 +-
 .../Withdraw/Coinbase/ConnectGuideScreens.tsx |  10 +-
 .../Swap/Withdraw/Coinbase/index.tsx          |   4 +-
 app/components/Swap/Withdraw/External.tsx     |   6 +-
 app/components/Swap/Withdraw/Failed.tsx       |  14 +-
 app/components/Swap/Withdraw/FiatTransfer.tsx |   2 +-
 .../Swap/Withdraw/ManualTransfer.tsx          |  20 +-
 .../Swap/Withdraw/Processing/Processing.tsx   |  18 +-
 app/components/Swap/Withdraw/Success.tsx      |   2 +-
 .../Wallet/ImtblxWalletWithdrawStep.tsx       |   2 +-
 .../Wallet/StarknetWalletWithdraw.tsx         |   6 +-
 .../WalletTransfer/TransferNativeToken.tsx    |   6 +-
 .../Wallet/WalletTransfer/buttons.tsx         |   2 +-
 .../Wallet/WalletTransfer/message.tsx         |  12 +-
 .../Withdraw/Wallet/ZKsyncWalletWithdraw.tsx  |   2 +-
 app/components/Swap/Withdraw/Wallet/index.tsx |   2 +-
 app/components/Swap/Withdraw/index.tsx        |  12 +-
 app/components/Swap/index.tsx                 |   8 +-
 app/components/SwapGuide.tsx                  |  16 +-
 .../SwapHistory/SwapDetailsComponent.tsx      |  26 +--
 app/components/SwapHistory/index.tsx          |  24 +--
 app/components/Tabs/Header.tsx                |   6 +-
 app/components/Tooltips/ClickTooltip.tsx      |   2 +-
 app/components/VerifyEmailCode.tsx            |  20 +-
 app/components/WarningMessage.tsx             |  12 +-
 app/components/Widget/Footer.tsx              |   6 +-
 app/components/Wizard/Wizard.tsx              |   4 +-
 app/components/backgroundField.tsx            |  17 +-
 app/components/banner.tsx                     |   4 +-
 app/components/buttons/connectButton.tsx      |  10 +-
 app/components/buttons/iconButton.tsx         |   2 +-
 app/components/buttons/secondaryButton.tsx    |  82 ++++----
 app/components/buttons/submitButton.tsx       |  53 +++--
 app/components/buttons/toggleButton.tsx       |   4 +-
 app/components/cardContainer.tsx              |   4 +-
 app/components/gasDetails.tsx                 |  10 +-
 app/components/globalFooter.tsx               |   6 +-
 app/components/guestCard.tsx                  |   2 +-
 app/components/maintanance/maintanance.tsx    |  10 +-
 app/components/sendFeedback.tsx               |   6 +-
 app/components/shadcn/command.tsx             |  12 +-
 app/components/shadcn/dialog._tsx_            |   8 +-
 app/components/shadcn/popover.tsx             |   2 +-
 app/components/shadcn/select.tsx              |   6 +-
 app/components/shadcn/tooltip.tsx             |   2 +-
 app/components/swapComponent.tsx              |   2 +-
 app/components/utils/GoHome.tsx               |   2 +-
 app/next.config.js                            |   8 +-
 app/pages/404.tsx                             |   4 +-
 app/pages/nocookies.tsx                       |   2 +-
 app/pages/salon.tsx                           |   4 +-
 app/styles/globals.css                        |   6 +-
 shared-ui/style/colors.tailwind.js            |   2 +
 89 files changed, 876 insertions(+), 805 deletions(-)

diff --git a/app/components/BridgeMenu/Menu.tsx b/app/components/BridgeMenu/Menu.tsx
index 6eaca8c3..fabd59d9 100644
--- a/app/components/BridgeMenu/Menu.tsx
+++ b/app/components/BridgeMenu/Menu.tsx
@@ -15,7 +15,7 @@ const Menu = ({
 const Group = ({ children }: PropsWithChildren) => {
     return (
         <div>
-            <div className="divide-y divide-secondary-500 rounded-md bg-secondary-700 overflow-hidden">
+            <div className="divide-y divide-secondary-500 rounded-md bg-level-3 darker-2-class overflow-hidden">
                 {children}
             </div>
         </div>
@@ -26,11 +26,11 @@ const Item = (function Item({ children, pathname, onClick, icon, target = '_self
 
     return (
         pathname ?
-            <LinkWrapper href={pathname} target={target} className="gap-4 flex relative cursor-pointer hover:bg-secondary-600 select-none w-full items-center px-4 py-3 outline-none text-primary-text">
+            <LinkWrapper href={pathname} target={target} className="gap-4 flex relative cursor-pointer hover:bg-level-4 darker-3-class select-none w-full items-center px-4 py-3 outline-none text-muted text-muted-primary-text">
                 <div>
                     {icon}
                 </div>
-                <p className="text-primary-text">{children}</p>
+                <p className="text-muted text-muted-primary-text">{children}</p>
                 {
                     target === '_self' ?
                         <ChevronRight className="h-4 w-4 absolute right-3" />
@@ -42,12 +42,12 @@ const Item = (function Item({ children, pathname, onClick, icon, target = '_self
             <button
                 type="button"
                 onClick={onClick}
-                className={`gap-4 flex relative cursor-pointer hover:bg-secondary-600 select-none items-center px-4 py-3 outline-none w-full text-primary-text`}
+                className={`gap-4 flex relative cursor-pointer hover:bg-level-4 darker-3-class select-none items-center px-4 py-3 outline-none w-full text-muted text-muted-primary-text`}
             >
                 <div>
                     {icon}
                 </div>
-                <p className="text-primary-text">{children}</p>
+                <p className="text-muted text-muted-primary-text">{children}</p>
                 <ChevronRight className="h-4 w-4 absolute right-3" />
             </button>
     )
@@ -70,7 +70,7 @@ type MenuIemProps = {
 
 const Footer = ({ children }: PropsWithChildren) => {
     return (
-        <div className={`text-primary-text text-base border-t border-secondary-500 fixed inset-x-0 bottom-0 z-30 bg-secondary-900 shadow-widget-footer px-6 py-4 w-full `}>
+        <div className={`text-muted text-muted-primary-text text-base border-t border-secondary-500 fixed inset-x-0 bottom-0 z-30 bg-level-1 darkest-class shadow-widget-footer px-6 py-4 w-full `}>
             {children}
         </div>
     )
diff --git a/app/components/BridgeMenu/index.tsx b/app/components/BridgeMenu/index.tsx
index 407b914c..c7ababff 100644
--- a/app/components/BridgeMenu/index.tsx
+++ b/app/components/BridgeMenu/index.tsx
@@ -99,7 +99,7 @@ export default function BridgeMenu() {
     }
 
     return <>
-        <span className="text-secondary-text cursor-pointer relative">
+        <span className="text-foreground text-foreground-new cursor-pointer relative">
             {
 
                 <>
@@ -186,12 +186,12 @@ export default function BridgeMenu() {
 
                                 <div className="space-y-3 w-full">
                                     <hr className="border-secondary-500" />
-                                    <p className="text-primary-text-muted flex justify-center my-3">Media links & suggestions:</p>
+                                    <p className="text-muted text-muted-primary-text-muted flex justify-center my-3">Media links & suggestions:</p>
                                 </div>
 
                                 <div className="grid grid-cols-2 gap-2 justify-center">
                                     {navigation.social.map(({name, Icon, href, className}, index) => (
-                                        <Link key={index} target="_blank" href={href} className={`flex relative bg-secondary-700 hover:bg-secondary-600 rounded-md cursor-pointer select-none items-center outline-none text-primary-text ${className}`}>
+                                        <Link key={index} target="_blank" href={href} className={`flex relative bg-level-3 darker-2-class hover:bg-level-4 darker-3-class rounded-md cursor-pointer select-none items-center outline-none text-muted text-muted-primary-text ${className}`}>
                                             <div className="p-2 w-full flex justify-center gap-1">
                                                 <Icon className="h-5 w-5" ariaHidden="true" />
                                                 <p>{name}</p>
@@ -207,7 +207,7 @@ export default function BridgeMenu() {
                                                 userType == UserType.AuthenticatedUser ?
                                                     <div>
                                                         <div
-                                                            className={`gap-4 flex justify-between items-center relative select-none px-4 py-3 outline-none w-full text-primary-text`}
+                                                            className={`gap-4 flex justify-between items-center relative select-none px-4 py-3 outline-none w-full text-muted text-muted-primary-text`}
                                                         >
                                                             <div className="font-normal flex gap-2 items-center">
                                                                 <UserCircle2 className="h-5 w-5" />
diff --git a/app/components/Campaigns/Details/Leaderboard.tsx b/app/components/Campaigns/Details/Leaderboard.tsx
index d98d3ead..c1d3ddf3 100644
--- a/app/components/Campaigns/Details/Leaderboard.tsx
+++ b/app/components/Campaigns/Details/Leaderboard.tsx
@@ -60,24 +60,24 @@ const Component: FC<Props> = ({ campaign }) => {
                     Top 10
                 </button>
             </div>}
-        <p className="text-sm text-primary-text">Users who earn the most throughout the program will be featured here.</p>
-        <div className="bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
+        <p className="text-sm text-muted text-muted-primary-text">Users who earn the most throughout the program will be featured here.</p>
+        <div className="bg-level-3 darker-2-class border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
             <div className="p-3">
                 {leaderboard?.leaderboard?.length > 0 ? <div className="space-y-6">
                     {
                         leaderboard?.leaderboard?.filter(u => u.position < 4).map(user => (
                             <div key={user.position} className="items-center flex justify-between">
                                 <div className="flex items-center">
-                                    <p className="text-xl font-medium text-primary-text w-fit mr-1">{user.position}.</p>
+                                    <p className="text-xl font-medium text-muted text-muted-primary-text w-fit mr-1">{user.position}.</p>
                                     <div className="cols-start-2 flex items-center space-x-2">
                                         <AddressIcon address={user.address} size={25} />
                                         <div>
-                                            <div className="text-sm font-bold text-primary-text leading-3">
+                                            <div className="text-sm font-bold text-muted text-muted-primary-text leading-3">
                                                 {user?.address && network?.account_explorer_template && <Link target="_blank" className="hover:opacity-80" href={network?.account_explorer_template?.replace("{0}", user?.address)}>
                                                     {user?.position === rewards?.user_reward?.position ? <span className="text-primary">You</span> : shortenAddress(user?.address)}
                                                 </Link>}
                                             </div>
-                                            <p className="mt-1 text-sm font-medium text-secondary-text leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
+                                            <p className="mt-1 text-sm font-medium text-foreground text-foreground-new leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
                                         </div>
                                     </div >
                                 </div >
@@ -99,7 +99,7 @@ const Component: FC<Props> = ({ campaign }) => {
                                                     <span>{leaderboardRewards[user.position - 1]} {campaign?.asset}</span>
                                                 </p>
                                             </div>}>
-                                            <div className='text-primary-text hover:cursor-pointer hover:text-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
+                                            <div className='text-muted text-muted-primary-text hover:cursor-pointer hover:text-muted text-muted-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
                                                 <Trophy className="h-4 w-4" aria-hidden="true" />
                                             </div>
                                         </ClickTooltip>
@@ -112,21 +112,21 @@ const Component: FC<Props> = ({ campaign }) => {
                     {
                         position >= 4 && address && rewards?.user_reward &&
                         <div className={position > 4 ? "!mt-0 !pt-0" : ""}>
-                            {position > 4 && < div className="text-2xl text-center leading-3 text-secondary-text my-3">
+                            {position > 4 && < div className="text-2xl text-center leading-3 text-foreground text-foreground-new my-3">
                                 ...
                             </div>}
                             <div key={position} className="items-center flex justify-between">
                                 <div className="flex items-center">
-                                    <p className="text-xl font-medium text-primary-text w-fit mr-1">{position}.</p>
+                                    <p className="text-xl font-medium text-muted text-muted-primary-text w-fit mr-1">{position}.</p>
                                     <div className="cols-start-2 flex items-center space-x-2">
                                         <AddressIcon address={address} size={25} />
                                         <div>
-                                            <div className="text-sm font-bold text-primary-text leading-3">
+                                            <div className="text-sm font-bold text-muted text-muted-primary-text leading-3">
                                                 {network?.account_explorer_template && <Link target="_blank" className="hover:opacity-80" href={network?.account_explorer_template?.replace("{0}", address)}>
                                                     <span className="text-primary">You</span>
                                                 </Link>}
                                             </div>
-                                            <p className="mt-1 text-sm font-medium text-secondary-text leading-3">{truncateDecimals(rewards.user_reward.total_amount, campaignAsset?.precision)} {campaign?.asset}</p>
+                                            <p className="mt-1 text-sm font-medium text-foreground text-foreground-new leading-3">{truncateDecimals(rewards.user_reward.total_amount, campaignAsset?.precision)} {campaign?.asset}</p>
                                         </div>
                                     </div >
                                 </div >
@@ -142,23 +142,23 @@ const Component: FC<Props> = ({ campaign }) => {
             </div >
         </div >
         <Modal height="full" header='Leaderboard' show={openTopModal} setShow={setOpenTopModal} >
-            <div className="bg-secondary-700 border border-secondary-700 mt-2 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg text-secondary-text">
+            <div className="bg-level-3 darker-2-class border border-secondary-700 mt-2 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg text-foreground text-foreground-new">
                 <div className="p-3">
                     <div className="space-y-6">
                         {
                             leaderboard?.leaderboard?.map(user => (
                                 <div key={user.position} className="items-center flex justify-between">
                                     <div className="flex items-center">
-                                        <p className="text-xl font-medium text-primary-text w-fit mr-1">{user.position}.</p>
+                                        <p className="text-xl font-medium text-muted text-muted-primary-text w-fit mr-1">{user.position}.</p>
                                         <div className="cols-start-2 flex items-center space-x-2">
                                             <AddressIcon address={user.address} size={25} />
                                             <div>
-                                                <div className="text-sm font-bold text-primary-text leading-3">
+                                                <div className="text-sm font-bold text-muted text-muted-primary-text leading-3">
                                                     {user?.address && network?.account_explorer_template && <Link target="_blank" className="hover:opacity-80" href={network?.account_explorer_template?.replace("{0}", user?.address)}>
                                                         {user.position === rewards?.user_reward?.position ? <span className="text-primary">You</span> : shortenAddress(user.address)}
                                                     </Link>}
                                                 </div>
-                                                <p className="mt-1 text-sm font-medium text-secondary-text leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
+                                                <p className="mt-1 text-sm font-medium text-foreground text-foreground-new leading-3">{truncateDecimals(user.amount, campaignAsset?.precision)} {campaign?.asset}</p>
                                             </div>
                                         </div >
                                     </div >
@@ -182,7 +182,7 @@ const Component: FC<Props> = ({ campaign }) => {
                                                     </p>
                                                 </div>
                                             }>
-                                                <div className='text-secondary-text hover:cursor-pointer hover:text-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
+                                                <div className='text-foreground text-foreground-new hover:cursor-pointer hover:text-muted text-muted-primary-text ml-0.5 hover:bg-secondary-200 active:ring-2 active:ring-gray-200 active:bg-secondary-400 focus:outline-none cursor-default p-1 rounded'>
                                                     <Trophy className="h-4 w-4" aria-hidden="true" />
                                                 </div>
                                             </ClickTooltip>
diff --git a/app/components/Campaigns/Details/Rewards.tsx b/app/components/Campaigns/Details/Rewards.tsx
index 61a773af..86451d10 100644
--- a/app/components/Campaigns/Details/Rewards.tsx
+++ b/app/components/Campaigns/Details/Rewards.tsx
@@ -55,17 +55,17 @@ const Rewards: FC<Props> = ({ campaign }) => {
 
     return <>
         <div className="space-y-4">
-            <p className="text-primary-text">
+            <p className="text-muted text-muted-primary-text">
                 <span>
                     <span>Onboarding incentives that are earned by transferring to&nbsp;</span>{network?.display_name}<span>.&nbsp;</span>
                     <a
                         target='_blank'
                         href="https://docs.bridge.lux.network/user-docs/bridge-campaigns/usdop-rewards"
-                        className="text-primary-text underline hover:no-underline decoration-white cursor-pointer"
+                        className="text-muted text-muted-primary-text underline hover:no-underline decoration-white cursor-pointer"
                     >Learn more</a>
                 </span>
             </p>
-            <div className="bg-secondary-700 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
+            <div className="bg-level-3 darker-2-class divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
                 {!campaignIsEnded &&
                     <BackgroundField header={<span className="flex justify-between"><span className="flex items-center"><span>Pending Earnings&nbsp;</span><ClickTooltip text={`${campaign?.asset} tokens that will be airdropped periodically.`} /> </span><span>Next Airdrop</span></span>} withoutBorder>
                         <div className="flex justify-between w-full text-2xl">
@@ -116,7 +116,7 @@ const Rewards: FC<Props> = ({ campaign }) => {
             </div>
 
         </div>
-        <div className="bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
+        <div className="bg-level-3 darker-2-class rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
             <BackgroundField header={
                 <>
                     <p className="flex items-center"><span>{campaign?.asset} pool</span>
@@ -127,7 +127,7 @@ const Rewards: FC<Props> = ({ campaign }) => {
                 <div className="flex flex-col w-full gap-2">
                     <Progress value={DistributedAmount === Infinity ? 0 : DistributedAmount} />
                     <div className="flex justify-between w-full font-semibold text-sm ">
-                        <div className="text-primary"><span className="text-primary-text">{campaign?.distributed_amount.toFixed(0)}</span> <span>/</span> {totalBudget} {campaign?.asset}</div>
+                        <div className="text-primary"><span className="text-muted text-muted-primary-text">{campaign?.distributed_amount.toFixed(0)}</span> <span>/</span> {totalBudget} {campaign?.asset}</div>
                     </div>
                 </div>
             </BackgroundField>
@@ -136,11 +136,11 @@ const Rewards: FC<Props> = ({ campaign }) => {
             payouts.length > 0 &&
             <div className="space-y-1">
                 <p className="font-bold text-lg text-left">Payouts</p>
-                <div className=" bg-secondary-700 divide-y divide-secondary-300 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
+                <div className=" bg-level-3 darker-2-class divide-y divide-secondary-300 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
                     <div className="inline-block min-w-full align-middle">
                         <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
                             <table className="min-w-full divide-y divide-secondary-500">
-                                <thead className="bg-secondary-800/70">
+                                <thead className="bg-level-2 darker-class/70">
                                     <tr>
                                         <th scope="col" className="py-3.5 pl-4 text-left text-sm font-semibold  sm:pl-6">
                                             Tx Id
@@ -156,7 +156,7 @@ const Rewards: FC<Props> = ({ campaign }) => {
                                 <tbody className="divide-y divide-secondary-600">
                                     {payouts.map((payout) => (
                                         <tr key={payout.transaction_id}>
-                                            <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-primary-text sm:pl-6 underline hover:no-underline">
+                                            <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-muted text-muted-primary-text sm:pl-6 underline hover:no-underline">
                                                 <a target={"_blank"} href={network?.transaction_explorer_template?.replace("{0}", payout.transaction_id)}>{shortenAddress(payout.transaction_id)}</a>
                                             </td>
                                             <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-100">{payout.amount}</td>
diff --git a/app/components/Campaigns/Details/index.tsx b/app/components/Campaigns/Details/index.tsx
index 1ad518f0..94ff647e 100644
--- a/app/components/Campaigns/Details/index.tsx
+++ b/app/components/Campaigns/Details/index.tsx
@@ -94,7 +94,7 @@ type BriefInformationProps = {
     network?: CryptoNetwork
 }
 const BriefInformation: FC<BriefInformationProps> = ({ campaign, network }) =>
-    <p className="text-secondary-text text-base">
+    <p className="text-foreground text-foreground-new text-base">
         <span>You can earn $</span>
         <span>{campaign?.asset}</span>
         <span>&nbsp;tokens by transferring assets to&nbsp;</span>
diff --git a/app/components/Campaigns/index.tsx b/app/components/Campaigns/index.tsx
index f157b0df..62a9e162 100644
--- a/app/components/Campaigns/index.tsx
+++ b/app/components/Campaigns/index.tsx
@@ -25,10 +25,10 @@ const Rewards = () => {
         <Widget className="min-h-[520px]">
             <Widget.Content>
                 {!isLoading ?
-                    <div className="space-y-5 h-full text-primary-text">
+                    <div className="space-y-5 h-full text-muted text-muted-primary-text">
                         <div className="space-y-2">
                             <p className="font-bold text-left leading-5">Campaigns</p>
-                            <div className="bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
+                            <div className="bg-level-3 darker-2-class border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
                                 <div className="p-3 space-y-4">
                                     {
                                         activeCampaigns.length > 0 ?
@@ -52,7 +52,7 @@ const Rewards = () => {
                             inactiveCampaigns.length > 0 &&
                             <div className="space-y-2">
                                 <p className="font-bold text-left leading-5">Old campaigns</p>
-                                <div className="bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
+                                <div className="bg-level-3 darker-2-class border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg shadow-lg">
                                     <div className="p-3 dpsv flex flex-col space-y-4">
                                         {inactiveCampaigns.map(c =>
                                             <CampaignItem
@@ -102,7 +102,7 @@ const CampaignItem: FC<CampaignProps> = ({ campaign, layers, resolveImgSrc }) =>
         </span>
         {
             campaignIsActive &&
-            <span className="text-primary-text-muted text-right text-sm">
+            <span className="text-muted text-muted-primary-text-muted text-right text-sm">
                 {campaignDaysLeft} days left
             </span>
         }
diff --git a/app/components/ConnectNetwork.tsx b/app/components/ConnectNetwork.tsx
index 44df28c0..2fe513e2 100644
--- a/app/components/ConnectNetwork.tsx
+++ b/app/components/ConnectNetwork.tsx
@@ -13,13 +13,13 @@ const ConnectNetwork: FC<Props> = ({ NetworkDisplayName, AppURL }) => {
     return (
         <div className="relative inset-0 flex flex-col overflow-y-auto styled-scroll">
             <div className="relative min-h-full items-center justify-center pt-0 text-center">
-                <h3 className='mb-4 pt-2 text-xl text-center md:text-left font-roboto text-secondary-text font-semibold'>
+                <h3 className='mb-4 pt-2 text-xl text-center md:text-left font-roboto text-foreground text-foreground-new font-semibold'>
                     <p className='mb-10 pt-2 text-base text-center md:text-left font-roboto text-pink-primary-300 font-light'>
                         {NetworkDisplayName} account with the provided address does not exist. To create one, go to {NetworkDisplayName} and connect your wallet.
                     </p>
                 </h3>
 
-                <div className="mt-3 sm:mt-6 text-primary-text text-sm">
+                <div className="mt-3 sm:mt-6 text-muted text-muted-primary-text text-sm">
                     <SubmitButton icon={connectButtonIcon} isDisabled={false} isSubmitting={false} onClick={() => window.open(AppURL, '_blank')}>
                         Connect
                     </SubmitButton>
diff --git a/app/components/ConnectedWallets.tsx b/app/components/ConnectedWallets.tsx
index 588e8aee..f9bbdfb0 100644
--- a/app/components/ConnectedWallets.tsx
+++ b/app/components/ConnectedWallets.tsx
@@ -25,7 +25,7 @@ export const WalletsHeader = () => {
     if (wallets.length > 0) {
         return (
             <>
-                <button type="button" aria-label="Connected wallets" onClick={() => setOpenDialog(true)} className="-mx-2 p-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-none inline-flex rounded-lg items-center">
+                <button type="button" aria-label="Connected wallets" onClick={() => setOpenDialog(true)} className="-mx-2 p-1.5 justify-self-start text-foreground text-foreground-new hover:bg-level-4 darker-hover-class hover:text-muted text-muted-primary-text focus:outline-none inline-flex rounded-lg items-center">
                     <WalletsIcons wallets={wallets} />
                 </button>
                 <ConnectedWalletsDialog openDialog={openDialog} setOpenDialog={setOpenDialog} />
@@ -35,7 +35,7 @@ export const WalletsHeader = () => {
 
     return (
         <ConnectButton>
-            <div className="-mx-2 p-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-none inline-flex rounded-lg items-center">
+            <div className="-mx-2 p-1.5 justify-self-start text-foreground text-foreground-new hover:bg-level-4 darker-hover-class hover:text-muted text-muted-primary-text focus:outline-none inline-flex rounded-lg items-center">
                 <WalletIcon className="h-6 w-6 mx-0.5" strokeWidth="2" />
             </div>
         </ConnectButton>
@@ -50,15 +50,15 @@ const WalletsIcons = ({ wallets }: { wallets: Wallet[] }) => {
         <div className="-space-x-2 flex">
             {
                 firstWallet?.connector &&
-                <firstWallet.icon className="rounded-full border-2 border-secondary-600 bg-secondary-700 flex-shrink-0 h-6 w-6" />
+                <firstWallet.icon className="rounded-full border-2 border-secondary-600 bg-level-3 darker-2-class flex-shrink-0 h-6 w-6" />
             }
             {
                 secondWallet?.connector &&
-                <secondWallet.icon className="rounded-full border-2 border-secondary-600 bg-secondary-700 flex-shrink-0 h-6 w-6" />
+                <secondWallet.icon className="rounded-full border-2 border-secondary-600 bg-level-3 darker-2-class flex-shrink-0 h-6 w-6" />
             }
             {
                 wallets.length > 2 &&
-                <div className="h-6 w-6 flex-shrink-0 rounded-full justify-center p-1 bg-secondary-600 text-primary-text overlfow-hidden text-xs">
+                <div className="h-6 w-6 flex-shrink-0 rounded-full justify-center p-1 bg-level-4 darker-3-class text-muted text-muted-primary-text overlfow-hidden text-xs">
                     <span><span>+</span>{wallets.length - 2}</span>
                 </div>
             }
@@ -73,14 +73,14 @@ export const WalletsMenu = () => {
     if (wallets.length > 0) {
         return (
             <>
-                <button onClick={() => setOpenDialog(true)} type="button" className="py-3 px-4 bg-secondary-700 flex items-center w-full rounded-md space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative font-semibold transform border border-secondary-500 hover:bg-secondary-600 transition duration-200 ease-in-out">
+                <button onClick={() => setOpenDialog(true)} type="button" className="py-3 px-4 bg-level-3 darker-2-class flex items-center w-full rounded-md space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative font-semibold transform border border-secondary-500 hover:bg-level-4 darker-3-class transition duration-200 ease-in-out">
                     {
                         wallets.length === 1 ?
                             <div className="flex gap-4 items-start">
                                 <div className="inline-flex items-center relative">
                                     <AddressIcon address={wallet.address} size={20} />
                                     {
-                                        wallet.connector && <span className="absolute -bottom-1 -right-2 ml-1 text-[10px] leading-4 font-semibold text-primary-text">
+                                        wallet.connector && <span className="absolute -bottom-1 -right-2 ml-1 text-[10px] leading-4 font-semibold text-muted text-muted-primary-text">
                                             <wallet.icon className="w-4 h-4 border-2 border-secondary-600 rounded-full bg-primary-text" />
                                         </span>
                                     }
@@ -133,17 +133,17 @@ const ConnectedWalletsDialog = ({ openDialog, setOpenDialog }: { openDialog: boo
                 <div className="flex flex-col justify-start space-y-2">
                     {
                         wallets.map((wallet, index) => (
-                            <div key={index} className="w-full relative items-center justify-between gap-2 flex rounded-md outline-none bg-secondary-700 text-primary-text p-3 border border-secondary-500 ">
+                            <div key={index} className="w-full relative items-center justify-between gap-2 flex rounded-md outline-none bg-level-3 darker-2-class text-muted text-muted-primary-text p-3 border border-secondary-500 ">
                                 <div className="flex space-x-4 items-center">
                                     {
                                         wallet.connector &&
                                         <div className="inline-flex items-center relative">
-                                            <wallet.icon className="w-8 h-8 p-0.5 rounded-full bg-secondary-800 border border-secondary-400" />
+                                            <wallet.icon className="w-8 h-8 p-0.5 rounded-full bg-level-2 darker-class border border-secondary-400" />
                                         </div>
                                     }
                                     <p>{shortenAddress(wallet.address)}</p>
                                 </div>
-                                <button onClick={() => { disconnectWallet(wallet.providerName); wallets.length === 1 && setOpenDialog(false) }} className="p-1 hover:bg-secondary-700 text-xs text-secondary-text hover:opacity-75">
+                                <button onClick={() => { disconnectWallet(wallet.providerName); wallets.length === 1 && setOpenDialog(false) }} className="p-1 hover:bg-level-3 darker-2-class text-xs text-foreground text-foreground-new hover:opacity-75">
                                     Disconnect
                                 </button>
                             </div>
@@ -152,7 +152,7 @@ const ConnectedWalletsDialog = ({ openDialog, setOpenDialog }: { openDialog: boo
                 </div>
                 <DialogFooter>
                     <ConnectButton onClose={() => setOpenDialog(false)}>
-                        <div className="text-secondary-text hover:text-secondary-text/80 flex items-center gap-1 justify-end w-fit">
+                        <div className="text-foreground text-foreground-new hover:text-foreground text-foreground-new/80 flex items-center gap-1 justify-end w-fit">
                             <Plus className="h-4 w-4" />
                             <span className="text-sm">
                                 Link a new wallet
diff --git a/app/components/DisclosureComponents/FeeDetails/Campaign.tsx b/app/components/DisclosureComponents/FeeDetails/Campaign.tsx
index a2616080..d9e05672 100644
--- a/app/components/DisclosureComponents/FeeDetails/Campaign.tsx
+++ b/app/components/DisclosureComponents/FeeDetails/Campaign.tsx
@@ -62,7 +62,7 @@ const CampaignDisplay: FC<CampaignDisplayProps> = ({ campaign, fee, selected_cur
             y: "-100%",
             transition: { duration: 0.4, ease: [0.36, 0.66, 0.04, 1] },
         }}
-        className='w-full flex items-center justify-between rounded-b-lg bg-secondary-700  relative bottom-2 z-0 pt-4 pb-2 px-3.5 text-right'>
+        className='w-full flex items-center justify-between rounded-b-lg bg-level-3 darker-2-class  relative bottom-2 z-0 pt-4 pb-2 px-3.5 text-right'>
         <div className='flex items-center'>
             <p>Est. {campaignAsset?.asset} Reward</p>
             <ClickTooltip text={<span><span>The amount of onboarding reward that you’ll earn.&nbsp;</span><a target='_blank' href='/campaigns' className='text-primary underline hover:no-underline decoration-primary cursor-pointer'>Learn more</a></span>} />
diff --git a/app/components/DisclosureComponents/FeeDetails/DetailedEstimates.tsx b/app/components/DisclosureComponents/FeeDetails/DetailedEstimates.tsx
index 3f130205..2793e1a4 100644
--- a/app/components/DisclosureComponents/FeeDetails/DetailedEstimates.tsx
+++ b/app/components/DisclosureComponents/FeeDetails/DetailedEstimates.tsx
@@ -27,7 +27,7 @@ const DetailedEstimates: FC<EstimatesProps> = ({
 
     return <>
         <div className="mt-2 flex flex-row items-baseline justify-between">
-            <label className="inline-flex items-center text-left text-primary-text-placeholder">
+            <label className="inline-flex items-center text-left text-muted text-muted-primary-text-placeholder">
                 Bridge fee
             </label>
             <div className="text-right">
@@ -64,7 +64,7 @@ const NetworkGas: FC<NetworkGasProps> = ({ selected_currency, network, currencie
         : truncateDecimals(networkGas, selected_currency?.precision)
 
     return <div className="mt-2 flex flex-row items-baseline justify-between">
-        <label className="inline-flex items-center text-left text-primary-text-placeholder">
+        <label className="inline-flex items-center text-left text-muted text-muted-primary-text-placeholder">
             Estimated gas
         </label>
         <div className="text-right flex items-center gap-1">
@@ -81,7 +81,7 @@ const EstimatedArrival: FC<EstimatedArrivalProps> = ({ currency, destination })
     const destinationNetwork = GetDefaultNetwork(destination, currency?.asset)
 
     return <div className="mt-2 flex flex-row items-baseline justify-between">
-        <label className="block text-left text-primary-text-placeholder">
+        <label className="block text-left text-muted text-muted-primary-text-placeholder">
             Estimated arrival
         </label>
         <span className="text-right">
diff --git a/app/components/DisclosureComponents/FeeDetails/ReceiveAmounts.tsx b/app/components/DisclosureComponents/FeeDetails/ReceiveAmounts.tsx
index 123fae97..a6ca69c1 100644
--- a/app/components/DisclosureComponents/FeeDetails/ReceiveAmounts.tsx
+++ b/app/components/DisclosureComponents/FeeDetails/ReceiveAmounts.tsx
@@ -12,39 +12,47 @@ type WillReceiveProps = {
     currencies: Currency[];
     refuel: boolean
 }
-export const ReceiveAmounts: FC<WillReceiveProps> = ({ receive_amount, currency, to, currencies, refuel }) => {
-    const parsedReceiveAmount = parseFloat(receive_amount?.toFixed(currency?.precision) || "")
-    const destinationNetworkCurrency = (to && currency) ? GetNetworkCurrency(to, currency.asset) : null
+export const ReceiveAmounts: FC<WillReceiveProps> = ({ 
+  receive_amount, 
+  currency, 
+  to, 
+  currencies, 
+  refuel 
+}) => {
 
-    return <>
-        <span className="md:font-semibold text-sm md:text-base text-secondary-text leading-8 md:leading-8 flex-1">
-            You will receive
+  const parsedReceiveAmount = parseFloat(receive_amount?.toFixed(currency?.precision) || "")
+  const destinationNetworkCurrency = (to && currency) ? GetNetworkCurrency(to, currency.asset) : null
+
+  return (<>
+    <span className="md:font-semibold text-sm md:text-base text-foreground text-foreground-new leading-8 md:leading-8 flex-1">
+        You will receive
+    </span>
+    <div className='flex items-center space-x-2'>
+        <span className="text-sm md:text-base">
+            {
+                parsedReceiveAmount > 0 ?
+                    <div className="font-semibold md:font-bold text-right leading-4">
+                        <p>
+                            <>{parsedReceiveAmount}</>
+                            &nbsp;
+                            <span>
+                                {destinationNetworkCurrency?.name}
+                            </span>
+                        </p>
+                        {refuel && <Refuel
+                            currencies={currencies}
+                            currency={currency}
+                            to={to}
+                            refuel={refuel}
+                        />}
+                    </div>
+                    : '-'
+            }
         </span>
-        <div className='flex items-center space-x-2'>
-            <span className="text-sm md:text-base">
-                {
-                    parsedReceiveAmount > 0 ?
-                        <div className="font-semibold md:font-bold text-right leading-4">
-                            <p>
-                                <>{parsedReceiveAmount}</>
-                                &nbsp;
-                                <span>
-                                    {destinationNetworkCurrency?.name}
-                                </span>
-                            </p>
-                            {refuel && <Refuel
-                                currencies={currencies}
-                                currency={currency}
-                                to={to}
-                                refuel={refuel}
-                            />}
-                        </div>
-                        : '-'
-                }
-            </span>
-        </div>
-    </>
+    </div>
+  </>)
 }
+
 type RefuelProps = {
     currency?: Currency | null;
     to?: Layer | null;
@@ -65,7 +73,7 @@ export const Refuel: FC<RefuelProps> = ({ to, currency, currencies, refuel }) =>
 
     return <>
         {
-            truncated_refuel > 0 ? <p className='text-[12px] text-secondary-text/50'>
+            truncated_refuel > 0 ? <p className='text-[12px] text-foreground text-foreground-new/50'>
                 <>+</> <span>{truncated_refuel} {destination_native_asset}</span>
             </p>
                 : null
diff --git a/app/components/DisclosureComponents/FeeDetails/index.tsx b/app/components/DisclosureComponents/FeeDetails/index.tsx
index 974762ac..f0ea5d5c 100644
--- a/app/components/DisclosureComponents/FeeDetails/index.tsx
+++ b/app/components/DisclosureComponents/FeeDetails/index.tsx
@@ -15,7 +15,7 @@ export default function FeeDetails({ values }: { values: SwapFormValues }) {
     let receive_amount = CalculateReceiveAmount(values, networks, currencies);
     return (
         <>
-            <div className="mx-auto relative w-full rounded-lg border border-secondary-500 hover:border-secondary-300 bg-secondary-700 px-3.5 py-3 z-[1] transition-all duration-200">
+            <div className="mx-auto relative w-full rounded-lg bg-level-2 border border-level-3 hover:border-level-4 px-3.5 py-3 z-[1] transition-all duration-200">
                     {/* @ts-ignore */}
                 <Accordion type="single" collapsible>
                     {/* @ts-ignore */}
@@ -31,7 +31,7 @@ export default function FeeDetails({ values }: { values: SwapFormValues }) {
                             />
                         </AccordionTrigger>
                     {/* @ts-ignore */}
-                    <AccordionContent className="text-sm text-secondary-text font-normal">
+                    <AccordionContent className="text-sm text-foreground text-foreground-new font-normal">
                             <DetailedEstimates
                                 currencies={currencies}
                                 networks={networks}
diff --git a/app/components/ErrorFallback.tsx b/app/components/ErrorFallback.tsx
index 3c28f7ae..0fde6758 100644
--- a/app/components/ErrorFallback.tsx
+++ b/app/components/ErrorFallback.tsx
@@ -18,7 +18,7 @@ export default function ErrorFallback({ error, resetErrorBoundary}: FallbackProp
             <main className="styled-scroll">
                 <div className="min-h-screen overflow-hidden relative font-robo">
                     <Navbar />
-                    <div className="mx-auto max-w-xl bg-secondary-900 shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]">
+                    <div className="mx-auto max-w-xl bg-level-1 darkest-class shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]">
                         <MessageComponent>
                             <MessageComponent.Content icon="red">
                                 <MessageComponent.Header>
@@ -47,7 +47,7 @@ export default function ErrorFallback({ error, resetErrorBoundary}: FallbackProp
                                 </MessageComponent.Description>
                             </MessageComponent.Content>
                             <MessageComponent.Buttons>
-                                <div className="flex flex-row text-primary-text text-xs sm:text-base space-x-2">
+                                <div className="flex flex-row text-muted text-muted-primary-text text-xs sm:text-base space-x-2">
                                     <div className='basis-1/3'>
                                         {
                                             <GoHomeButton>
diff --git a/app/components/Input/Address.tsx b/app/components/Input/Address.tsx
index 1a52eef9..05b2d67c 100644
--- a/app/components/Input/Address.tsx
+++ b/app/components/Input/Address.tsx
@@ -128,14 +128,14 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
     const destinationChainId = destinationAsset?.network?.chain_id
 
     return (<>
-        <div className='w-full flex flex-col justify-between h-full text-primary-text'>
+        <div className='w-full flex flex-col justify-between h-full text-muted text-muted-primary-text'>
             <div className='flex flex-col self-center grow w-full'>
                 <div className={`flex flex-col self-center grow w-full space-y-3`}>
                     <div className="text-left">
                         <label htmlFor={name}>Address</label>
                         {isPartnerWallet && partner && <span className='truncate text-sm text-indigo-200'> ({partner?.display_name})</span>}
                         <div className="flex flex-wrap flex-col md:flex-row">
-                            <div className="relative flex grow rounded-lg shadow-sm mt-1.5 bg-secondary-700 border-secondary-500 border focus-within:ring-0 focus-within:ring-primary focus-within:border-primary">
+                            <div className="relative flex grow rounded-lg shadow-sm mt-1.5 bg-level-3 darker-2-class border-secondary-500 border focus-within:ring-0 focus-within:ring-primary focus-within:border-primary">
                                 {isPartnerWallet &&
                                     <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                         {
@@ -150,17 +150,17 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                                     placeholder={placeholder}
                                     autoCorrect="off"
                                     type={"text"}
-                                    disabled={disabled || !!(connectedWallet && values.destination_address)}
+                                    disabled={disabled || !!(connectedWallet && values.destination_address) }
                                     name={name}
                                     id={name}
                                     ref={inputReference}
                                     tabIndex={0}
-                                    className={`${isPartnerWallet ? 'pl-11' : ''} disabled:cursor-not-allowed grow h-12 border-none leading-4  block font-semibold w-full bg-secondary-700 rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-none`}
+                                    className={`${isPartnerWallet ? 'pl-11' : ''} disabled:cursor-not-allowed grow h-12 border-none leading-4  block font-semibold w-full bg-level-2 darker-2-class rounded-lg truncate hover:overflow-x-scroll focus:ring-0 focus:outline-none`}
                                 />
                                 {
                                     inputValue && !disabled &&
                                     <span className="inline-flex items-center mr-2">
-                                        <div className="text-xs flex items-center space-x-2 md:ml-5 bg-secondary-500 rounded-md border border-secondary-500">
+                                        <div className="text-xs flex items-center space-x-2 md:ml-5 bg-level-4 darker-hover-class rounded-md border border-secondary-500">
                                             <button
                                                 type="button"
                                                 className="p-0.5 duration-200 transition  hover:bg-secondary-400  rounded-md border border-secondary-500 hover:border-secondary-200"
@@ -192,8 +192,8 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                     </div>
                     {
                         validInputAddress &&
-                        <div onClick={handleSetNewAddress} className={`text-left min-h-12 cursor-pointer space-x-2 border border-secondary-300 bg-secondary-600 shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-secondary-500 transition duration-200 px-2 py-2 hover:border-secondary-500 hover:shadow-xl`}>
-                            <div className='flex text-primary-text bg-secondary-400 flex-row items-left rounded-md p-2'>
+                        <div onClick={handleSetNewAddress} className={`text-left min-h-12 cursor-pointer space-x-2 border border-secondary-300 bg-level-4 darker-3-class shadow-xl flex text-sm rounded-md items-center w-full transform hover:bg-level-4 darker-hover-class transition duration-200 px-2 py-2 hover:border-secondary-500 hover:shadow-xl`}>
+                            <div className='flex text-muted text-muted-primary-text bg-secondary-400 flex-row items-left rounded-md p-2'>
                                 {
                                     destinationIsStarknet && connectedWallet ?
                                         <connectedWallet.icon className='rounded-md' alt={connectedWallet?.address} width={25} height={25} />
@@ -202,11 +202,11 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                                 }
                             </div>
                             <div className="flex flex-col grow">
-                                <div className="block text-md font-medium text-primary-text">
+                                <div className="block text-md font-medium text-muted text-muted-primary-text">
                                     {shortenAddress(validInputAddress)}
                                 </div>
                             </div>
-                            <div className='flex text-primary-text flex-row items-left px-2 py-1 rounded-md'>
+                            <div className='flex text-muted text-muted-primary-text flex-row items-left px-2 py-1 rounded-md'>
                                 Select
                             </div>
                         </div>
@@ -219,9 +219,9 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                         && destinationNetwork
                         && provider
                         && !connectedWallet &&
-                        <div onClick={() => { connectWallet(provider.name) }} className={`min-h-12 text-left cursor-pointer space-x-2 border border-secondary-500 bg-secondary-700/70  flex text-sm rounded-md items-center w-full transform transition duration-200 px-2 py-1.5 hover:border-secondary-500 hover:bg-secondary-700 hover:shadow-xl`}>
-                            <div className='flex text-primary-text flex-row items-left bg-secondary-400 px-2 py-1 rounded-md'>
-                                <WalletIcon className="w-6 h-6 text-primary-text" />
+                        <div onClick={() => { connectWallet(provider.name) }} className={`min-h-12 text-left cursor-pointer space-x-2 border border-secondary-500 bg-level-3 darker-2-class/70  flex text-sm rounded-md items-center w-full transform transition duration-200 px-2 py-1.5 hover:border-secondary-500 hover:bg-level-3 darker-2-class hover:shadow-xl`}>
+                            <div className='flex text-muted text-muted-primary-text flex-row items-left bg-secondary-400 px-2 py-1 rounded-md'>
+                                <WalletIcon className="w-6 h-6 text-muted text-muted-primary-text" />
                             </div>
                             <div className="flex flex-col">
                                 <div className="block text-sm font-medium">
@@ -239,12 +239,12 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                         && values.currency
                         && destinationNetwork
                         &&
-                        <div className='text-left p-4 bg-secondary-800 text-primary-text rounded-lg border border-secondary-500'>
+                        <div className='text-left p-4 bg-level-2 darker-class text-muted text-muted-primary-text rounded-lg border border-secondary-500'>
                             <div className="flex items-center">
                                 <Info className='h-5 w-5 text-primary-600 mr-3' />
                                 <label className="block text-sm md:text-base font-medium leading-6">How to find your {destination?.display_name} deposit address</label>
                             </div>
-                            <ul className="list-disc font-light space-y-1 text-xs md:text-sm mt-2 ml-8 text-primary-text">
+                            <ul className="list-disc font-light space-y-1 text-xs md:text-sm mt-2 ml-8 text-muted text-muted-primary-text">
                                 <li>Go to the Deposits page</li>
                                 <li>
                                     <span>Select</span>
@@ -256,7 +256,7 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                                                 width="15"
                                                 className='rounded-sm'
                                             />
-                                            <span className="text-primary-text">{values.currency.asset}</span>
+                                            <span className="text-muted text-muted-primary-text">{values.currency.asset}</span>
                                         </span>
                                     </span>
                                     <span>as asset</span>
@@ -271,7 +271,7 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                                                 width="15"
                                                 className='rounded-sm'
                                             />
-                                            <span className="text-primary-text">{destinationNetwork?.display_name}</span>
+                                            <span className="text-muted text-muted-primary-text">{destinationNetwork?.display_name}</span>
                                         </span>
                                     </span>
                                     <span>as network</span>
@@ -302,9 +302,9 @@ const Address: FC<Input> = forwardRef<HTMLInputElement, Input>(function Address
                                                 return (
                                                     <RadioGroup.Description
                                                         as="span"
-                                                        className={`space-x-2 flex text-sm rounded-md items-center w-full transform transition duration-200 px-2 py-1.5 border border-secondary-900 hover:border-secondary-500 hover:bg-secondary-700/70 hover:shadow-xl ${checked && 'border-secondary-700'}`}
+                                                        className={`space-x-2 flex text-sm rounded-md items-center w-full transform transition duration-200 px-2 py-1.5 border border-secondary-900 hover:border-secondary-500 hover:bg-level-3 darker-2-class/70 hover:shadow-xl ${checked && 'border-secondary-700'}`}
                                                     >
-                                                        <div className='flex bg-secondary-400 text-primary-text flex-row items-left  rounded-md p-2'>
+                                                        <div className='flex bg-secondary-400 text-muted text-muted-primary-text flex-row items-left  rounded-md p-2'>
                                                             <AddressIcon address={a.address} size={20} />
                                                         </div>
                                                         <div className="flex flex-col">
diff --git a/app/components/Input/Amount.tsx b/app/components/Input/Amount.tsx
index 28208561..16f6a88f 100644
--- a/app/components/Input/Amount.tsx
+++ b/app/components/Input/Amount.tsx
@@ -1,46 +1,52 @@
-import { useFormikContext } from "formik";
-import { forwardRef } from "react";
-import { SwapFormValues } from "../DTOs/SwapFormValues";
-import NumericInput from "./NumericInput";
-import dynamic from "next/dynamic";
+import { useFormikContext } from "formik"
+import { forwardRef } from "react"
+import { SwapFormValues } from "../DTOs/SwapFormValues"
+import NumericInput from "./NumericInput"
+import dynamic from "next/dynamic"
+
+const Label: React.FC<{
+  label: string
+  htmlFor: string
+}> = ({
+  label,
+  htmlFor
+}) => (
+  <div className="w-full flex flex-row items-center space-x-2 pb-2">
+    <label className='block font-semibold text-foreground text-sm' htmlFor={htmlFor}>{label}</label>
+  </div>
+)
 
 const EnhancedAmountField = dynamic(() => import("./EnhancedAmount"), {
-    loading: () => <NumericInput
-        label={<div className="flex items-center w-full justify-between">
-            <div className="flex items-center space-x-2">
-                <p>Amount</p>
-            </div>
-        </div>}
-        disabled={true}
-        placeholder='0.01234'
-        name="amount"
-        className="rounded-r-none text-primary-text"
-    >
-    </NumericInput>
-});
+  loading: () => (
+    <NumericInput
+      label={<Label label='Amount' htmlFor='amount' />}
+      disabled={true}
+      placeholder='0.01234'
+      name="amount"
+      className='rounded-r-none text-foreground py-3 '
+    />
+  )
+})
 
 const AmountField = forwardRef(function AmountField(_, ref: any) {
 
-    const { values } = useFormikContext<SwapFormValues>();
-    const { from, to } = values
-    const name = "amount"
-
-    if (!from || !to)
-        return <NumericInput
-            label={<div className="flex items-center w-full justify-between">
-                <div className="flex items-center space-x-2">
-                    <p>Amount</p>
-                </div>
-            </div>}
-            disabled={true}
-            placeholder='0.01234'
-            name={name}
-            className="rounded-r-none text-primary-text"
-        >
-        </NumericInput>
-
-    return <EnhancedAmountField />
-});
+  const { values } = useFormikContext<SwapFormValues>()
+  const { from, to } = values
+  const name = "amount"
+
+  if (!from || !to) {
+    return (
+      <NumericInput
+        label={<Label label='Amount' htmlFor='amount' />}
+        disabled={true}
+        placeholder='0.01234'
+        name={name}
+      />
+    )
+  }
+
+  return <EnhancedAmountField />
+})
 
 
 export default AmountField
\ No newline at end of file
diff --git a/app/components/Input/CurrencyFormField.tsx b/app/components/Input/CurrencyFormField.tsx
index e1e40e92..69aebf87 100644
--- a/app/components/Input/CurrencyFormField.tsx
+++ b/app/components/Input/CurrencyFormField.tsx
@@ -16,54 +16,63 @@ import { useQueryState } from "../../context/query";
 import useWallet from "../../hooks/useWallet";
 import { Balance } from "../../Models/Balance";
 
-const CurrencyFormField: FC = () => {
-    const {
-        values: { to, currency, from },
-        setFieldValue,
-    } = useFormikContext<SwapFormValues>();
-
-    const { resolveImgSrc, currencies } = useSettingsState();
-    const name = "currency"
-    const query = useQueryState()
-    const { balances } = useBalancesState()
-    const { getAutofillProvider: getProvider } = useWallet()
-    const provider = useMemo(() => {
-        return from && getProvider(from)
-    }, [from, getProvider])
-
-    const wallet = provider?.getConnectedWallet()
-    const lockedCurrency = query?.lockAsset ? currencies?.find(c => c?.asset?.toUpperCase() === (query?.asset as string)?.toUpperCase()) : undefined
-
-    const filteredCurrencies = lockedCurrency ? [lockedCurrency] : FilterCurrencies(currencies, from, to)
-    const currencyMenuItems = from ? GenerateCurrencyMenuItems(
-        filteredCurrencies,
-        from,
-        resolveImgSrc,
-        lockedCurrency,
-        balances[wallet?.address || '']
-    ) : []
-
-    useEffect(() => {
-        const currencyIsAvailable = currency && currencyMenuItems.some(c => c?.baseObject.asset === currency?.asset)
-        if (currencyIsAvailable) return
-
-        const default_currency = currencyMenuItems.find(c => c.baseObject?.asset?.toUpperCase() === (query?.asset as string)?.toUpperCase()) || currencyMenuItems?.[0]
-
-        if (default_currency) {
-            setFieldValue(name, default_currency.baseObject)
-        }
-        else if (currency) {
-            setFieldValue(name, null)
-        }
-    }, [from, to, currencies, currency, query])
+const name = "currency"
 
-    const value = currencyMenuItems.find(x => x.id == currency?.asset);
-    const handleSelect = useCallback((item: SelectMenuItem<Currency>) => {
-        setFieldValue(name, item.baseObject, true)
-    }, [name])
+const CurrencyFormField: FC = () => {
 
-    return <PopoverSelectWrapper<Currency> values={currencyMenuItems} value={value} setValue={handleSelect} disabled={!value?.isAvailable?.value} />;
-};
+  const {
+    values: { to, currency, from },
+    setFieldValue,
+  } = useFormikContext<SwapFormValues>();
+
+  const { resolveImgSrc, currencies } = useSettingsState();
+  const query = useQueryState()
+  const { balances } = useBalancesState()
+  const { getAutofillProvider: getProvider } = useWallet()
+  const provider = useMemo(() => (
+    from && getProvider(from)
+  ), [from, getProvider])
+
+  const wallet = provider?.getConnectedWallet()
+  const lockedCurrency = query?.lockAsset ? currencies?.find(c => c?.asset?.toUpperCase() === (query?.asset as string)?.toUpperCase()) : undefined
+
+  const filteredCurrencies = lockedCurrency ? [lockedCurrency] : FilterCurrencies(currencies, from, to)
+  const currencyMenuItems = from ? GenerateCurrencyMenuItems(
+    filteredCurrencies,
+    from,
+    resolveImgSrc,
+    lockedCurrency,
+    balances[wallet?.address || '']
+  ) : []
+
+  useEffect(() => {
+    const currencyIsAvailable = currency && currencyMenuItems.some(c => c?.baseObject.asset === currency?.asset)
+    if (currencyIsAvailable) return
+
+    const default_currency = currencyMenuItems.find(c => c.baseObject?.asset?.toUpperCase() === (query?.asset as string)?.toUpperCase()) || currencyMenuItems?.[0]
+
+    if (default_currency) {
+      setFieldValue(name, default_currency.baseObject)
+    }
+    else if (currency) {
+      setFieldValue(name, null)
+    }
+  }, [from, to, currencies, currency, query])
+
+  const value = currencyMenuItems.find(x => x.id == currency?.asset);
+  const handleSelect = useCallback((item: SelectMenuItem<Currency>) => {
+    setFieldValue(name, item.baseObject, true)
+  }, [name])
+
+  return (
+    <PopoverSelectWrapper<Currency> 
+      values={currencyMenuItems} 
+      value={value} 
+      setValue={handleSelect} 
+      disabled={!value?.isAvailable?.value} 
+    />
+  )
+}
 
 export function GenerateCurrencyMenuItems(currencies: Currency[], source: Layer, resolveImgSrc: (item: Layer | Currency) => string, lockedCurrency?: Currency, balances?: Balance[]): SelectMenuItem<Currency>[] {
 
@@ -96,8 +105,8 @@ export function GenerateCurrencyMenuItems(currencies: Currency[], source: Layer,
 }
 
 export enum CurrencyDisabledReason {
-    LockAssetIsTrue = '',
-    InsufficientLiquidity = 'Temporarily disabled. Please check later.'
+  LockAssetIsTrue = '',
+  InsufficientLiquidity = 'Temporarily disabled. Please check later.'
 }
 
-export default CurrencyFormField
\ No newline at end of file
+export default CurrencyFormField
diff --git a/app/components/Input/EnhancedAmount.tsx b/app/components/Input/EnhancedAmount.tsx
index 903175c6..55463905 100644
--- a/app/components/Input/EnhancedAmount.tsx
+++ b/app/components/Input/EnhancedAmount.tsx
@@ -12,86 +12,88 @@ import { truncateDecimals } from "../utils/RoundDecimals";
 import useWallet from "../../hooks/useWallet";
 import useBalance from "../../hooks/useBalance";
 
+const name = "amount"
+
+
 const EnhancedAmountField = forwardRef(function EnhancedAmountField(_, ref: any) {
 
-    const { values, setFieldValue } = useFormikContext<SwapFormValues>();
-    const { networks, currencies } = useSettingsState()
-    const query = useQueryState()
-    const { currency, from, to, amount, destination_address } = values
-
-    const { balances, isBalanceLoading, gases, isGasLoading } = useBalancesState()
-    const { getAutofillProvider: getProvider } = useWallet()
-    const provider = useMemo(() => {
-        return values.from && getProvider(values.from)
-    }, [values.from, getProvider])
-
-    const wallet = provider?.getConnectedWallet()
-    const gasAmount = gases[from?.internal_name || '']?.find(g => g?.token === currency?.asset)?.gas || 0
-    const { fetchBalance, fetchGas } = useBalance()
-    const name = "amount"
-    const walletBalance = wallet && balances[wallet.address]?.find(b => b?.network === from?.internal_name && b?.token === currency?.asset)
-    const walletBalanceAmount = walletBalance?.amount && truncateDecimals(walletBalance?.amount, currency?.precision)
-
-    const minAllowedAmount = CalculateMinAllowedAmount(values, networks, currencies);
-    const maxAllowedAmount = CalculateMaxAllowedAmount(values, query.balances as string, walletBalance?.amount, gasAmount, minAllowedAmount)
-    const maxAllowedDisplayAmont = truncateDecimals(maxAllowedAmount, currency?.precision)
-
-    const placeholder = (currency && from && to && !isBalanceLoading && !isGasLoading) ? `${minAllowedAmount} - ${maxAllowedDisplayAmont}` : '0.01234'
-    const step = 1 / Math.pow(10, currency?.precision || 1)
-    const amountRef = useRef(ref)
-
-    const handleSetMinAmount = () => {
-        setFieldValue(name, minAllowedAmount)
-    }
+  const { values, setFieldValue } = useFormikContext<SwapFormValues>();
+  const { networks, currencies } = useSettingsState()
+  const query = useQueryState()
+  const { currency, from, to, amount, destination_address } = values
+
+  const { balances, isBalanceLoading, gases, isGasLoading } = useBalancesState()
+  const { getAutofillProvider: getProvider } = useWallet()
+  const provider = useMemo(() => (
+    values.from && getProvider(values.from)
+  ), [values.from, getProvider])
+
+  const wallet = provider?.getConnectedWallet()
+  const gasAmount = gases[from?.internal_name || '']?.find(g => g?.token === currency?.asset)?.gas || 0
+  const { fetchBalance, fetchGas } = useBalance()
+  const walletBalance = wallet && balances[wallet.address]?.find(b => b?.network === from?.internal_name && b?.token === currency?.asset)
+  const walletBalanceAmount = walletBalance?.amount && truncateDecimals(walletBalance?.amount, currency?.precision)
+
+  const minAllowedAmount = CalculateMinAllowedAmount(values, networks, currencies);
+  const maxAllowedAmount = CalculateMaxAllowedAmount(values, query.balances as string, walletBalance?.amount, gasAmount, minAllowedAmount)
+  const maxAllowedDisplayAmont = truncateDecimals(maxAllowedAmount, currency?.precision)
+
+  const placeholder = (currency && from && to && !isBalanceLoading && !isGasLoading) ? `${minAllowedAmount} - ${maxAllowedDisplayAmont}` : '0.01234'
+  const step = 1 / Math.pow(10, currency?.precision || 1)
+  const amountRef = useRef(ref)
+
+  const handleSetMinAmount = () => {
+    setFieldValue(name, minAllowedAmount)
+  }
 
-    const handleSetMaxAmount = useCallback(() => {
-        setFieldValue(name, maxAllowedAmount);
-        from && fetchBalance(from);
-        from && currency && fetchGas(from, currency, destination_address || "");
-    }, [from, currency, destination_address, maxAllowedAmount])
-
-    useEffect(() => {
-        values.from && fetchBalance(values.from)
-    }, [values.from, values.destination_address, wallet?.address])
-    
-    const contract_address = values.from?.isExchange == false ? values.from.assets.find(a => a.asset === values?.currency?.asset)?.contract_address : null
-    useEffect(() => {
-        wallet?.address && values.from && values.currency && fetchGas(values.from, values.currency, values.destination_address || wallet.address)
-    }, [contract_address, values.from, values.currency, wallet?.address])
-
-    return (<>
-        <NumericInput
-            label={<AmountLabel detailsAvailable={!!(from && to && amount)}
-                maxAllowedAmount={maxAllowedDisplayAmont}
-                minAllowedAmount={minAllowedAmount}
-                isBalanceLoading={(isBalanceLoading || isGasLoading)}
-                walletBalance={walletBalanceAmount}
-            />}
-            disabled={!currency}
-            placeholder={placeholder}
-            min={minAllowedAmount}
-            max={maxAllowedAmount}
-            step={isNaN(step) ? 0.01 : step}
-            name={name}
-            ref={amountRef}
-            precision={currency?.precision}
-            className="rounded-r-none text-primary-text"
-        >
-            {
-                from && to && currency ? <div className="text-xs flex items-center space-x-1 md:space-x-2 ml-2 md:ml-5">
-                    <SecondaryButton onClick={handleSetMinAmount} size="xs">
-                        MIN
-                    </SecondaryButton>
-                    <SecondaryButton onClick={handleSetMaxAmount} size="xs">
-                        MAX
-                    </SecondaryButton>
-                </div>
-                    : <></>
-            }
-            <CurrencyFormField />
-        </NumericInput>
-    </>)
-});
+  const handleSetMaxAmount = useCallback(() => {
+    setFieldValue(name, maxAllowedAmount)
+    from && fetchBalance(from)
+    from && currency && fetchGas(from, currency, destination_address || "")
+  }, [from, currency, destination_address, maxAllowedAmount])
+
+  useEffect(() => {
+      values.from && fetchBalance(values.from)
+  }, [values.from, values.destination_address, wallet?.address])
+  
+  const contract_address = values.from?.isExchange == false ? values.from.assets.find(a => a.asset === values?.currency?.asset)?.contract_address : null
+  useEffect(() => {
+    wallet?.address && values.from && values.currency && fetchGas(values.from, values.currency, values.destination_address || wallet.address)
+  }, [contract_address, values.from, values.currency, wallet?.address])
+
+  return (
+    <NumericInput
+      label={<AmountLabel detailsAvailable={!!(from && to && amount)}
+        maxAllowedAmount={maxAllowedDisplayAmont}
+        minAllowedAmount={minAllowedAmount}
+        isBalanceLoading={(isBalanceLoading || isGasLoading)}
+        walletBalance={walletBalanceAmount}
+      />}
+      disabled={!currency}
+      placeholder={placeholder}
+      min={minAllowedAmount}
+      max={maxAllowedAmount}
+      step={isNaN(step) ? 0.01 : step}
+      name={name}
+      ref={amountRef}
+      precision={currency?.precision}
+      className="rounded-r-none text-muted text-muted-primary-text"
+    >
+      {from && to && currency && (
+
+        <div className="text-xs flex items-center ">
+          <SecondaryButton onClick={handleSetMinAmount} size="xs" className='mr-1'>
+            MIN
+          </SecondaryButton>
+          <SecondaryButton onClick={handleSetMaxAmount} size="xs">
+            MAX
+          </SecondaryButton>
+          <CurrencyFormField />
+        </div>
+      )}
+    </NumericInput>
+  )
+})
 
 
 
@@ -108,29 +110,27 @@ const AmountLabel = ({
     maxAllowedAmount,
     isBalanceLoading,
     walletBalance,
-}: AmountLabelProps) => {
-    return <div className="flex items-center w-full justify-between">
-        <div className="flex items-center space-x-2">
-            <p>Amount</p>
-            {
-                detailsAvailable &&
-                <div className="text-xs hidden md:flex text-secondary-text items-center">
-                    <span>(Min:&nbsp;</span>{minAllowedAmount}<span>&nbsp;-&nbsp;Max:&nbsp;</span>{isBalanceLoading ? <span className="ml-1 h-3 w-6 rounded-sm bg-gray-500 animate-pulse" /> : <span>{maxAllowedAmount}</span>}<span>)</span>
-                </div>
-            }
-        </div>
-        {
-            walletBalance != undefined && !isNaN(walletBalance) &&
-            <div
-                className="border-primary-text text-xs text-primary-text flex items-center space-x-1">
-                <span>Balance:</span>
-                {isBalanceLoading ?
-                    <span className="ml-1 h-3 w-6 rounded-sm bg-gray-500 animate-pulse" />
-                    :
-                    <span>{walletBalance}</span>}
-            </div>
+}: AmountLabelProps) => (
+
+  <div className="w-full flex flex-row items-center p-2">
+    <label htmlFor={name} >Amount</label>
+    {
+      detailsAvailable &&
+      <div className="text-xs hidden md:flex items-center pl-1.5">
+        <span>(Min:&nbsp;</span>{minAllowedAmount}<span>&nbsp;-&nbsp;Max:&nbsp;</span>{isBalanceLoading ? <span className="ml-1 h-3 w-6 rounded-sm bg-gray-500 animate-pulse" /> : <span>{maxAllowedAmount}</span>}<span>)</span>
+      </div>
+    }
+    {walletBalance != undefined && !isNaN(walletBalance) && (
+      <div className="border-primary-text text-xs text-muted text-muted-primary-text flex items-center space-x-1">
+        <span>Balance:</span>
+        {isBalanceLoading ?
+          (<span className="ml-1 h-3 w-6 rounded-sm bg-gray-500 animate-pulse" />)
+          :
+          (<span>{walletBalance}</span>)
         }
+      </div>
+    )}
     </div>
-}
+)
 
 export default EnhancedAmountField
\ No newline at end of file
diff --git a/app/components/Input/NetworkFormField.tsx b/app/components/Input/NetworkFormField.tsx
index 5dffd9fc..b8f9fd26 100644
--- a/app/components/Input/NetworkFormField.tsx
+++ b/app/components/Input/NetworkFormField.tsx
@@ -92,7 +92,7 @@ const NetworkFormField = forwardRef(function NetworkFormField({ direction, label
         setFieldValue(name, item.baseObject, true)
     }, [name])
 
-    return (<div className="rounded-xl p-3 bg-level-2">
+    return (<div className="rounded-xl p-3 bg-level-2 border border-level-3">
         <label htmlFor={name} className="block font-semibold text-foreground text-sm">
             {label}
         </label>
diff --git a/app/components/Input/NumericInput.tsx b/app/components/Input/NumericInput.tsx
index d88b1993..b32dc555 100644
--- a/app/components/Input/NumericInput.tsx
+++ b/app/components/Input/NumericInput.tsx
@@ -1,117 +1,117 @@
-import { useField, useFormikContext } from "formik";
-import { ChangeEvent, FC, forwardRef } from "react";
-import { SwapFormValues } from "../DTOs/SwapFormValues";
+import { useField, useFormikContext } from "formik"
+import { ChangeEvent, FC, forwardRef } from "react"
+import { SwapFormValues } from "../DTOs/SwapFormValues"
 import { classNames } from '../utils/classNames'
 
 type Input = {
-    label?: JSX.Element | JSX.Element[]
-    pattern?: string;
-    disabled?: boolean;
-    placeholder: string;
-    min?: number;
-    max?: number;
-    minLength?: number;
-    maxLength?: number;
-    precision?: number;
-    step?: number;
-    name: string;
-    className?: string;
-    children?: JSX.Element | JSX.Element[];
-    ref?: any;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    label?: React.ReactNode
+    pattern?: string
+    disabled?: boolean
+    placeholder: string
+    min?: number
+    max?: number
+    minLength?: number
+    maxLength?: number
+    precision?: number
+    step?: number
+    name: string
+    className?: string
+    children?: React.ReactNode
+    ref?: any
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
 const onInput = (event: React.ChangeEvent<HTMLInputElement>, precision: number) => { 
-  replaceComma(event); 
+  replaceComma(event) 
   limitDecimalPlaces(event, precision) 
 }
 
 
 // Use with Formik
 const NumericInput: FC<Input> = forwardRef<HTMLInputElement, Input>(
+  (
+    { 
+      label, 
+      pattern, 
+      disabled, 
+      placeholder, 
+      min, 
+      max, 
+      minLength, 
+      maxLength, 
+      precision, 
+      step, 
+      name, 
+      className, 
+      children, 
+      onChange 
+    }, 
+    ref
+  ) => {
 
-    function NumericInput(
-      { 
-        label, 
-        pattern, 
-        disabled, 
-        placeholder, 
-        min, 
-        max, 
-        minLength, 
-        maxLength, 
-        precision, 
-        step, 
-        name, 
-        className, 
-        children, 
-        onChange 
-      }, 
-      ref
-    ) {
-        const { handleChange } = useFormikContext<SwapFormValues>();
-        const [field] = useField(name)
+    const { handleChange } = useFormikContext<SwapFormValues>()
+    const [field] = useField(name)
 
-        return <>
-            {label &&
-                <label htmlFor={name} className="block font-semibold text-secondary-text text-sm mb-1.5 w-full">
-                    {label}
-                </label>
-            }
-            <div className="flex rounded-lg shadow-sm bg-secondary-700 border-secondary-500 border ">
-                <input
-                    {...field}
-                    pattern={pattern ? pattern : "^[0-9]*[.,]?[0-9]*$"}
-                    inputMode="decimal"
-                    autoComplete="off"
-                    disabled={disabled}
-                    placeholder={placeholder}
-                    autoCorrect="off"
-                    min={min}
-                    max={max}
-                    minLength={minLength}
-                    maxLength={maxLength}
-                    onInput={(event: React.ChangeEvent<HTMLInputElement>) => { onInput(event, precision as number) }}
-                    type="text"
-                    step={step}
-                    name={name}
-                    id={name}
-                    ref={ref}
-                    className={classNames(
-                        'disabled:cursor-not-allowed h-12 leading-4 placeholder:text-primary-text-placeholder bg-secondary-700 focus:ring-primary focus:border-primary flex-grow block w-full min-w-0 rounded-lg font-semibold border-0',
-                        className
-                    )}
-                    onChange={onChange ? onChange : e => {
-                        /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
-                    }}
-                />
-                {children &&
-                    <span className="inline-flex items-center">
-                        {children}
-                    </span>
-                }
-            </div>
-        </>;
-    });
+    return (
+      <div className="flex flex-col">
+        {label}
+        <input
+          {...field}
+          pattern={pattern ? pattern : "^[0-9]*[.,]?[0-9]*$"}
+          inputMode="decimal"
+          autoComplete="off"
+          disabled={disabled}
+          placeholder={placeholder}
+          autoCorrect="off"
+          min={min}
+          max={max}
+          minLength={minLength}
+          maxLength={maxLength}
+          onInput={(event: React.ChangeEvent<HTMLInputElement>) => { onInput(event, precision as number) }}
+          type="text"
+          step={step}
+          name={name}
+          id={name}
+          ref={ref}
+          className={classNames(
+              'disabled:cursor-not-allowed h-12 leading-4 ' + 
+              'text-muted placeholder:text-muted-2 bg-level-2 focus:ring-accent focus:border-accent ' +
+              'border border-level-3 ' + 
+              'flex-grow block w-full min-w-0 rounded-lg font-semibold ',
+              className ?? ''
+          )}
+          onChange={onChange ? onChange : (e) => {
+              /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e)
+          }}
+        />
+        {children && (
+          <span className="inline-flex items-center">
+            {children}
+          </span>
+        )}
+      </div>
+    )
+  }
+)
 
 function limitDecimalPlaces(e: React.ChangeEvent<HTMLInputElement>, count: number) {
-    if (e.target.value.indexOf('.') == -1) { return; }
+    if (e.target.value.indexOf('.') == -1) { return }
     if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
         e.target.value = ParseFloat(e.target.value, count).toString()
     }
 }
 
 function ParseFloat(str: string, val: number): number {
-    str = str.toString();
-    str = str.slice(0, (str.indexOf(".")) + val + 1);
-    return Number(str);
+    str = str.toString()
+    str = str.slice(0, (str.indexOf(".")) + val + 1)
+    return Number(str)
 }
 
 function replaceComma(e: React.ChangeEvent<HTMLInputElement>) {
-    var val = e.target.value;
+    var val = e.target.value
     if (val.match(/\,/)) {
-        val = val.replace(/\,/g, '.');
-        e.target.value = val;
+        val = val.replace(/\,/g, '.')
+        e.target.value = val
     }
 }
 
diff --git a/app/components/LoadingCard.tsx b/app/components/LoadingCard.tsx
index b4fa5c82..f1b9a138 100644
--- a/app/components/LoadingCard.tsx
+++ b/app/components/LoadingCard.tsx
@@ -6,14 +6,14 @@ type Props = {
 }
 const LoadingCard: FC<Props> = ({ name }) => {
     return <div
-        className={`bg-secondary-900 md:shadow-card rounded-lg w-full sm:overflow-hidden relative`}
+        className={`bg-level-1 darkest-class md:shadow-card rounded-lg w-full sm:overflow-hidden relative`}
     >
         <div className='text-center text-xl text-secondary-100'>
         </div>
         <div className="relative px-6">
             <div className="flex items-start">
                 <div className={`flex flex-nowrap grow`}>
-                    <div className="w-full pb-6 flex flex-col justify-between space-y-5 text-secondary-text h-full">
+                    <div className="w-full pb-6 flex flex-col justify-between space-y-5 text-foreground text-foreground-new h-full">
                         <div className="sm:min-h-[504px] flex flex-col justify-between">
                             <div className="relative m-auto origin-center">
                             </div>
diff --git a/app/components/MessageComponent.tsx b/app/components/MessageComponent.tsx
index a1773288..471a78f8 100644
--- a/app/components/MessageComponent.tsx
+++ b/app/components/MessageComponent.tsx
@@ -62,7 +62,7 @@ const Content: React.FC<MessageComponentProps> = ({ children, icon, center }) =>
 const Header: React.FC<PropsWithChildren> = ({ 
   children 
 }) => (
-  <div className='md:text-3xl text-lg font-bold text-primary-text leading-6 text-center'>
+  <div className='md:text-3xl text-lg font-bold text-muted text-muted-primary-text leading-6 text-center'>
     {children}
   </div>
 )
@@ -70,7 +70,7 @@ const Header: React.FC<PropsWithChildren> = ({
 const Description: React.FC<PropsWithChildren> = ({ 
   children 
 }) => (
-  <div className="text-base font-medium space-y-6 text-secondary-text text-center mb-6">
+  <div className="text-base font-medium space-y-6 text-foreground text-foreground-new text-center mb-6">
     {children}
   </div>
 )
diff --git a/app/components/NoCookies.tsx b/app/components/NoCookies.tsx
index c8f81cc7..223eb636 100644
--- a/app/components/NoCookies.tsx
+++ b/app/components/NoCookies.tsx
@@ -13,24 +13,24 @@ const NoCookies: React.FC = () => {
     return (
         <div className="styled-scroll">
             <div className="min-h-screen overflow-hidden relative font-robo">
-                <div className="mx-auto max-w-xl bg-secondary-900 shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]">
+                <div className="mx-auto max-w-xl bg-level-1 darkest-class shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]">
                     <MessageComponent>
                         <MessageComponent.Content icon="red">
                             <MessageComponent.Header>
                                 Sorry
                             </MessageComponent.Header>
                             <MessageComponent.Description>
-                                <div className="text-secondary-text space-y-5 text-left">
+                                <div className="text-foreground text-foreground-new space-y-5 text-left">
                                     <div className="space-y-2">
-                                        <p className="text-primary-text">
+                                        <p className="text-muted text-muted-primary-text">
                                             It seems like you’ve either:
                                         </p>
-                                        <ul className="text-secondary-text list-disc ml-4 mt-0 ">
+                                        <ul className="text-foreground text-foreground-new list-disc ml-4 mt-0 ">
                                             <li>Disabled cookies</li>
                                             <li>Or using Bridge in a partner’s page in Incognito mode</li>
                                         </ul>
                                     </div>
-                                    <p className="text-secondary-text">Unforunately, we can’t run in those conditions 🙁</p>
+                                    <p className="text-foreground text-foreground-new">Unforunately, we can’t run in those conditions 🙁</p>
                                 </div>
                                 {
                                     embedded &&
diff --git a/app/components/OptionToggle.tsx b/app/components/OptionToggle.tsx
index 5b08b026..a3e5c337 100644
--- a/app/components/OptionToggle.tsx
+++ b/app/components/OptionToggle.tsx
@@ -26,8 +26,8 @@ const OptionToggle: FC<NavRadioProps> = ({ value, items, setSelected, label, dis
 
     return (
         <RadioGroup value={items.find(i => i.value === value)} disabled={disabled} onChange={onchange} className="mt-2 w-full my-4">
-            <RadioGroup.Label className="font-normal text-secondary-text text-sm">{label}</RadioGroup.Label>
-            <div className={`grid grid-cols-${items?.length} gap-1 md:gap-2 p-0.5 md:p-2 rounded-lg bg-secondary-700 border-secondary-500 border`}>
+            <RadioGroup.Label className="font-normal text-foreground text-foreground-new text-sm">{label}</RadioGroup.Label>
+            <div className={`grid grid-cols-${items?.length} gap-1 md:gap-2 p-0.5 md:p-2 rounded-lg bg-level-3 darker-2-class border-secondary-500 border`}>
                 {items.map((option) => (
                     <RadioGroup.Option
                         key={option.value}
@@ -36,7 +36,7 @@ const OptionToggle: FC<NavRadioProps> = ({ value, items, setSelected, label, dis
                             classNames(
                                 option.isEnabled ? 'cursor-pointer focus:outline-none' : 'opacity-25 cursor-not-allowed',
                                 checked
-                                    ? 'bg-secondary-500 border-transparent text-primary-text'
+                                    ? 'bg-level-4 darker-hover-class border-transparent text-muted text-muted-primary-text'
                                     : 'bg-transparent border-transparent text-gray-400 hover:text-gray-200',
                                 `border rounded-md p-1 flex items-center justify-center text-sm font-medium sm:flex-1 relative`
                             )
@@ -60,7 +60,7 @@ const OptionToggle: FC<NavRadioProps> = ({ value, items, setSelected, label, dis
                                 <span className="flex items-center space-x-1 md:p-0 p-1.5 text-xs md:text-base">
                                     Cross-Chain
                                 </span>
-                                <span className="absolute ml-1 -top-1 -right-2 shadow-sm rounded bg-primary px-2 text-[10px] leading-4 font-semibold text-primary-text"> New </span>
+                                <span className="absolute ml-1 -top-1 -right-2 shadow-sm rounded bg-primary px-2 text-[10px] leading-4 font-semibold text-muted text-muted-primary-text"> New </span>
                             </div>
 
                         }
diff --git a/app/components/ReserveGasNote.tsx b/app/components/ReserveGasNote.tsx
index 4fc4877f..8d4a10ef 100644
--- a/app/components/ReserveGasNote.tsx
+++ b/app/components/ReserveGasNote.tsx
@@ -38,11 +38,11 @@ const ReserveGasNote = ({ onSubmit }: { onSubmit: (walletBalance: Balance, netwo
     return (
         mightBeAutOfGas && gasToReserveFormatted > 0 &&
         <WarningMessage messageType="warning" className="mt-4">
-            <div className="font-normal text-primary-text">
+            <div className="font-normal text-muted text-muted-primary-text">
                 <div>
                     You might not be able to complete the transaction.
                 </div>
-                <div onClick={() => onSubmit(walletBalance, networkGas)} className="cursor-pointer border-b border-dotted border-primary-text w-fit hover:text-primary hover:border-primary text-primary-text">
+                <div onClick={() => onSubmit(walletBalance, networkGas)} className="cursor-pointer border-b border-dotted border-primary-text w-fit hover:text-primary hover:border-primary text-muted text-muted-primary-text">
                     <span>Reserve</span> <span>{gasToReserveFormatted}</span> <span>{values?.currency?.asset}</span> <span>for gas.</span>
                 </div>
             </div>
diff --git a/app/components/Sceletons.tsx b/app/components/Sceletons.tsx
index b754ccc5..c1669d26 100644
--- a/app/components/Sceletons.tsx
+++ b/app/components/Sceletons.tsx
@@ -77,17 +77,17 @@ export const SwapHistoryComponentSceleton = () => {
                     'relative py-4 pl-4 sm:pl-6 pr-3 text-sm'
                   )}
                 >
-                  <div className="text-primary-text hidden lg:block">
+                  <div className="text-muted text-muted-primary-text hidden lg:block">
                     <div className="grid grid-cols-1 gap-4">
                       <div className="h-2 w-16 bg-slate-700 rounded col-span-1"></div>
                     </div>
                   </div>
-                  {index !== 0 ? <div className="absolute right-0 left-6 -top-px h-px bg-secondary-500" /> : null}
+                  {index !== 0 ? <div className="absolute right-0 left-6 -top-px h-px bg-level-4 darker-hover-class" /> : null}
                 </td>
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'hidden px-3 py-3.5 text-sm text-primary-text lg:table-cell'
+                    'hidden px-3 py-3.5 text-sm text-muted text-muted-primary-text lg:table-cell'
                   )}
                 >
                   <div className="flex space-x-2">
@@ -101,7 +101,7 @@ export const SwapHistoryComponentSceleton = () => {
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'px-3 py-3.5 text-sm text-primary-text table-cell'
+                    'px-3 py-3.5 text-sm text-muted text-muted-primary-text table-cell'
                   )}
                 >
                   <div className="flex space-x-2">
@@ -114,7 +114,7 @@ export const SwapHistoryComponentSceleton = () => {
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'hidden px-3 py-3.5 text-sm text-primary-text lg:table-cell'
+                    'hidden px-3 py-3.5 text-sm text-muted text-muted-primary-text lg:table-cell'
                   )}
                 >
                   <div className="grid grid-cols-1 gap-4">
@@ -124,7 +124,7 @@ export const SwapHistoryComponentSceleton = () => {
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'relative px-3 py-3.5 text-sm text-primary-text'
+                    'relative px-3 py-3.5 text-sm text-muted text-muted-primary-text'
                   )}
                 >
                   <div className="grid grid-cols-1 gap-4">
@@ -134,7 +134,7 @@ export const SwapHistoryComponentSceleton = () => {
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'px-3 py-3.5 text-sm text-primary-text  hidden lg:table-cell'
+                    'px-3 py-3.5 text-sm text-muted text-muted-primary-text  hidden lg:table-cell'
                   )}
                 >
                   <div className="flex space-x-2">
@@ -147,7 +147,7 @@ export const SwapHistoryComponentSceleton = () => {
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'px-3 py-3.5 text-sm text-primary-text  hidden lg:table-cell'
+                    'px-3 py-3.5 text-sm text-muted text-muted-primary-text  hidden lg:table-cell'
                   )}
                 >
                   <div className="grid grid-cols-2 gap-4">
@@ -158,7 +158,7 @@ export const SwapHistoryComponentSceleton = () => {
                 <td
                   className={classNames(
                     index === 0 ? '' : 'border-t border-secondary-500',
-                    'px-3 py-3.5 text-sm text-primary-text  hidden lg:table-cell'
+                    'px-3 py-3.5 text-sm text-muted text-muted-primary-text  hidden lg:table-cell'
                   )}
                 >
                   <div className="grid grid-cols-1 gap-4">
@@ -178,8 +178,8 @@ export const SwapHistoryComponentSceleton = () => {
 
 export const SwapDetailsComponentSceleton = () => {
   return <div className="animate-pulse"><div className="w-full grid grid-flow-row">
-    <div className="rounded-md bg-secondary-900 w-full grid grid-flow-row">
-      <div className="items-center block text-base font-lighter leading-6 text-secondary-text">
+    <div className="rounded-md bg-level-1 darkest-class w-full grid grid-flow-row">
+      <div className="items-center block text-base font-lighter leading-6 text-foreground text-foreground-new">
         <div className="flex justify-between items-baseline">
           <div className="h-2 m-2 w-1/4 bg-slate-400 rounded col-span-1"></div>
           <div className="h-2 m-2 w-1/4 bg-slate-700 rounded col-span-1"></div>
@@ -228,7 +228,7 @@ export const ExchangesComponentSceleton = () => {
     {[...Array(12)]?.map((item, index) =>
       <div
         key={index}
-        className="animate-pulse bg-secondary-700 select-none rounded-lg py-5 px-3">
+        className="animate-pulse bg-level-3 darker-2-class select-none rounded-lg py-5 px-3">
         <div className="flex justify-between space-x-4 md:space-x-16 px-3">
           <div className="flex space-x-2">
             <div className="rounded-md bg-slate-700 h-8 w-8"></div>
@@ -252,7 +252,7 @@ export const RewardsComponentSceleton = () => {
         <div className="flex justify-start">
           <div className="rounded-md w-48 bg-gray-500 h-[28px] animate-pulse" />
         </div>
-        <div className=" bg-secondary-700 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
+        <div className=" bg-level-3 darker-2-class divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
           <BackgroundField header={<span className="flex justify-between"><span>Pending Earnings</span><span>Next Airdrop</span></span>} withoutBorder>
             <div className="flex justify-between w-full text-2xl">
               <div className="flex items-center space-x-1">
@@ -273,7 +273,7 @@ export const RewardsComponentSceleton = () => {
             </div>
           </BackgroundField>
         </div>
-        <div className="bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
+        <div className="bg-level-3 darker-2-class rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
           <BackgroundField header='Daily Reward Claimed' withoutBorder>
             <div className="flex flex-col w-full gap-2">
               <div className="rounded-full h-4 bg-gray-500 w-full animate-pulse" />
@@ -289,7 +289,7 @@ export const RewardsComponentSceleton = () => {
         <div className="flex justify-start">
           <div className="rounded-md w-48 bg-gray-500 h-5 animate-pulse" />
         </div>
-        <div className=" bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
+        <div className=" bg-level-3 darker-2-class rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200">
           <div className="p-3">
             <div className="space-y-6">
               {[...Array(4)]?.map((user, index) => (
@@ -312,7 +312,7 @@ export const RewardsComponentLeaderboardSceleton = () => {
       <div className="flex justify-start">
         <div className="rounded-md w-48 bg-gray-500 h-5 animate-pulse" />
       </div>
-      <div className="bg-secondary-700 border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg">
+      <div className="bg-level-3 darker-2-class border border-secondary-700 hover:border-secondary-500 transition duration-200 rounded-lg">
         <div className="p-3">
           <div className="space-y-6">
             {[...Array(4)]?.map((user, index) => (
diff --git a/app/components/Select/Command/commandSelect.tsx b/app/components/Select/Command/commandSelect.tsx
index 2c80051f..5b25eac1 100644
--- a/app/components/Select/Command/commandSelect.tsx
+++ b/app/components/Select/Command/commandSelect.tsx
@@ -49,7 +49,7 @@ export default function CommandSelect<T>({
                     <CommandInput autoFocus={isDesktop} placeholder={searchHint} />
                     {
                         values.some(v => v.isAvailable.value === false && v.isAvailable.disabledReason === LayerDisabledReason.LockNetworkIsTrue) &&
-                        <div className='text-xs text-left text-secondary-text mb-2'>
+                        <div className='text-xs text-left text-foreground text-foreground-new mb-2'>
                             <Info className='h-3 w-3 inline-block mb-0.5' /><span>&nbsp;You&apos;re accessing Bridge from a partner&apos;s page. In case you want to transact with other networks, please open bridge.lux.network in a separate tab.</span>
                         </div>
                     }
diff --git a/app/components/Select/Popover/PopoverSelect.tsx b/app/components/Select/Popover/PopoverSelect.tsx
index c367036c..88f12adc 100644
--- a/app/components/Select/Popover/PopoverSelect.tsx
+++ b/app/components/Select/Popover/PopoverSelect.tsx
@@ -4,19 +4,19 @@ import SelectItem from '../Shared/SelectItem';
 
 export default function PopoverSelect<T>({ values, value, setValue }: SelectProps<T>) {
 
-    return (
-        <CommandWrapper>
-            <CommandList>
-                {values.map(item =>
-                    <CommandItem disabled={!item.isAvailable.value} value={item.id} key={item.id} onSelect={() => {
-                        setValue(item)
-                    }}>
-                        <SelectItem<T> item={item} />
-                    </CommandItem>)
-                }
-            </CommandList>
-        </CommandWrapper>
-    )
+  return (
+    <CommandWrapper>
+      <CommandList>
+        {values.map(item =>
+          <CommandItem disabled={!item.isAvailable.value} value={item.id} key={item.id} onSelect={() => {
+            setValue(item)
+          }}>
+            <SelectItem<T> item={item} />
+          </CommandItem>)
+        }
+      </CommandList>
+    </CommandWrapper>
+  )
 }
 
 export enum LayerDisabledReason {
diff --git a/app/components/Select/Popover/PopoverSelectWrapper.tsx b/app/components/Select/Popover/PopoverSelectWrapper.tsx
index 3d1cf872..6e85cd8a 100644
--- a/app/components/Select/Popover/PopoverSelectWrapper.tsx
+++ b/app/components/Select/Popover/PopoverSelectWrapper.tsx
@@ -46,7 +46,7 @@ export default function PopoverSelectWrapper<T>({
                             }
 
                         </div>
-                        <span className="ml-3 block truncate text-primary-text">{value?.name}</span>
+                        <span className="ml-3 block truncate text-muted text-muted-primary-text">{value?.name}</span>
                     </span>
                 </div>
             </div>
@@ -72,10 +72,10 @@ export default function PopoverSelectWrapper<T>({
                                         }
 
                                     </div>
-                                    <span className="ml-3 block truncate text-primary-text">{value.name}</span>
+                                    <span className="ml-3 block truncate text-muted text-muted-primary-text">{value.name}</span>
                                 </span>
 
-                                <span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none text-primary-text">
+                                <span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none text-muted text-muted-primary-text">
                                     <ChevronDown className="h-4 w-4" aria-hidden="true" />
                                 </span>
                             </button>
diff --git a/app/components/Select/Shared/SelectItem.tsx b/app/components/Select/Shared/SelectItem.tsx
index 7acf9c73..2987366d 100644
--- a/app/components/Select/Shared/SelectItem.tsx
+++ b/app/components/Select/Shared/SelectItem.tsx
@@ -18,7 +18,7 @@ export default function SelectItem<T>({ item }: { item: SelectMenuItem<T> }) {
             </p>
             {
                 item.details &&
-                <p className="text-primary-text-muted">
+                <p className="text-muted">
                     {item.details}
                 </p>
             }
diff --git a/app/components/SendEmail.tsx b/app/components/SendEmail.tsx
index c83b825f..a8dd0e7d 100644
--- a/app/components/SendEmail.tsx
+++ b/app/components/SendEmail.tsx
@@ -85,21 +85,21 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                             <>
                                                 <Disclosure.Button className="w-full text-left text-base font-light">
                                                     <div className='flex items-center justify-between'>
-                                                        <p className='text-xl text-primary-text'>
+                                                        <p className='text-xl text-muted text-muted-primary-text'>
                                                             Sign in with email
                                                         </p>
-                                                        <div className='bg-secondary-500 hover:bg-secondary-500 p-0.5 rounded-md duration-200 transition'>
+                                                        <div className='bg-level-4 darker-hover-class hover:bg-level-4 darker-hover-class p-0.5 rounded-md duration-200 transition'>
                                                             <ChevronDown
                                                                 className={`${open ? 'rotate-180 transform' : ''
-                                                                    } h-5 text-secondary-text`}
+                                                                    } h-5 text-foreground text-foreground-new`}
                                                             />
                                                         </div>
                                                     </div>
-                                                    <p className='mt-2 text-left text-secondary-text'>
+                                                    <p className='mt-2 text-left text-foreground text-foreground-new'>
                                                         Securely store your exchange accounts, access your full transfer history and more.
                                                     </p>
                                                 </Disclosure.Button>
-                                                <Disclosure.Panel className="text-sm text-secondary-text font-normal mt-4">
+                                                <Disclosure.Panel className="text-sm text-foreground text-foreground-new font-normal mt-4">
                                                     <div className='grid gap-4 grid-cols-5  items-center'>
                                                         <div className="relative rounded-md shadow-sm col-span-3">
                                                             <Field name="email">
@@ -110,8 +110,8 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                                                         placeholder="john@example.com"
                                                                         autoComplete="email"
                                                                         type="email"
-                                                                        className="h-12 pb-1 pt-0 text-primary-text  focus:ring-primary focus:border-primary border-secondary-500 pr-42 block
-                                                   placeholder:text-secondary-text placeholder:text-sm placeholder:font-normal placeholder:opacity-50 bg-secondary-700 w-full font-semibold rounded-md"
+                                                                        className="h-12 pb-1 pt-0 text-muted text-muted-primary-text  focus:ring-primary focus:border-primary border-secondary-500 pr-42 block
+                                                   placeholder:text-foreground text-foreground-new placeholder:text-sm placeholder:font-normal placeholder:opacity-50 bg-level-3 darker-2-class w-full font-semibold rounded-md"
                                                                     />
                                                                 )}
                                                             </Field>
@@ -132,7 +132,7 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                     <Widget.Content center={true}>
                                         <User className='w-16 h-16 text-primary self-center mt-auto' />
                                         <div>
-                                            <p className='mb-6 mt-2 pt-2 text-2xl font-bold text-primary-text leading-6 text-center font-roboto'>
+                                            <p className='mb-6 mt-2 pt-2 text-2xl font-bold text-muted text-muted-primary-text leading-6 text-center font-roboto'>
                                                 What&apos;s your email?
                                             </p>
                                         </div>
@@ -145,14 +145,14 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                                         placeholder="john@example.com"
                                                         autoComplete="email"
                                                         type="email"
-                                                        className="h-12 pb-1 pt-0 text-primary-text  focus:ring-primary focus:border-primary border-secondary-500 pr-42 block
-                                                   placeholder:text-secondary-text placeholder:text-sm placeholder:font-normal placeholder:opacity-50 bg-secondary-700 w-full font-semibold rounded-md"
+                                                        className="h-12 pb-1 pt-0 text-muted text-muted-primary-text  focus:ring-primary focus:border-primary border-secondary-500 pr-42 block
+                                                   placeholder:text-foreground text-foreground-new placeholder:text-sm placeholder:font-normal placeholder:opacity-50 bg-level-3 darker-2-class w-full font-semibold rounded-md"
                                                     />
                                                 )}
                                             </Field>
                                         </div>
-                                        <div className='px-3 text-primary-text mt-6'>
-                                            <p className='text-left text-sm mb-3 text-secondary-text font-semibold'>
+                                        <div className='px-3 text-muted text-muted-primary-text mt-6'>
+                                            <p className='text-left text-sm mb-3 text-foreground text-foreground-new font-semibold'>
                                                 By signing in you get
                                             </p>
                                             <ul className='space-y-3'>
@@ -162,7 +162,7 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                                     </div>
                                                     <div>
                                                         <p className='font-semibold'>History</p>
-                                                        <p className='text-secondary-text text-sm'>
+                                                        <p className='text-foreground text-foreground-new text-sm'>
                                                             Access your entire transaction history
                                                         </p>
                                                     </div>
@@ -173,7 +173,7 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                                     </div>
                                                     <div>
                                                         <p className='font-semibold'>Email updates</p>
-                                                        <p className='text-secondary-text text-sm'>
+                                                        <p className='text-foreground text-foreground-new text-sm'>
                                                             Get a notification upon transfer completion
                                                         </p>
                                                     </div>
@@ -184,7 +184,7 @@ const SendEmail: FC<Props> = ({ onSend, disclosureLogin }) => {
                                                     </div>
                                                     <div>
                                                         <p className='font-semibold'>Dedicated deposit address</p>
-                                                        <p className='text-secondary-text text-sm'>
+                                                        <p className='text-foreground text-foreground-new text-sm'>
                                                             Get deposit addresses that stay the same and can be whitelisted in CEXes
                                                         </p>
                                                     </div>
diff --git a/app/components/Swap/Form/Form.tsx b/app/components/Swap/Form/Form.tsx
index 1eb0ccc7..3c5d3f26 100644
--- a/app/components/Swap/Form/Form.tsx
+++ b/app/components/Swap/Form/Form.tsx
@@ -180,70 +180,82 @@ const SwapForm: FC<Props> = ({ partner, isPartnerWallet }) => {
             setFieldValue('amount', walletBalance?.amount - networkGas?.gas)
     }, [values.amount])
 
-    return <>
+  const SwapToAndFromButton: React.FC = () => (
+    <button type="button"
+      aria-label="Reverse the source and destination"
+      disabled={valuesSwapperDisabled}
+      onClick={valuesSwapper}
+      className={'absolute right-[calc(50%-16px)] top-[74px] z-10 border-2 border-muted hover:border-accent bg-level-2 ' + 
+        'rounded-full disabled:cursor-not-allowed text-muted hover:text-accent disabled:text-foreground ' + 
+        'text-foreground-new duration-200 transition'
+      }
+    >
+      <motion.div
+          animate={animate}
+          transition={{ duration: 0.3 }}
+          onTap={() => !valuesSwapperDisabled && cycle()}
+      >
+        <ArrowUpDown className={classNames(valuesSwapperDisabled && 'opacity-50', "w-8 h-auto p-1 bg-level-3 border-2 border-level-3 rounded-full disabled:opacity-30")} />
+      </motion.div>
+    </button>
+  )
+
+    return (<>
         <Widget className="sm:min-h-[504px]">
             <Form className={`h-full ${(isSubmitting) ? 'pointer-events-none' : 'pointer-events-auto'}`} >
                 <Widget.Content>
                     <div className='flex-col relative flex justify-between w-full space-y-4 mb-3.5 leading-4'>
-                        {!(query?.hideFrom && values?.from) && <div className="flex flex-col w-full">
-                            <NetworkFormField direction="from" label="From" />
-                        </div>}
-                        {!query?.hideFrom && !query?.hideTo &&
-                            <button type="button"
-                                aria-label="Reverse the source and destination"
-                                disabled={valuesSwapperDisabled}
-                                onClick={valuesSwapper}
-                                className='absolute right-[calc(50%-16px)] top-[74px] z-10 border-2 border-muted hover:border-accent bg-level-2 rounded-full disabled:cursor-not-allowed text-muted hover:text-accent disabled:text-secondary-text duration-200 transition'>
-                                <motion.div
-                                    animate={animate}
-                                    transition={{ duration: 0.3 }}
-                                    onTap={() => !valuesSwapperDisabled && cycle()}
-                                >
-                                    <ArrowUpDown className={classNames(valuesSwapperDisabled && 'opacity-50', "w-8 h-auto p-1 bg-level-3 border-2 border-level-3 rounded-full disabled:opacity-30")} />
-                                </motion.div>
-                            </button>}
-                        {!(query?.hideTo && values?.to) && <div className="flex flex-col w-full">
-                            <NetworkFormField direction="to" label="To" />
-                        </div>}
+                        {!(query?.hideFrom && values?.from) && (
+                          <div className="flex flex-col w-full">
+                              <NetworkFormField direction="from" label="From" />
+                          </div>)
+                        }
+                        {!query?.hideFrom && !query?.hideTo && (
+                          <SwapToAndFromButton />
+                        )}
+                        {!(query?.hideTo && values?.to) && (
+                          <div className="flex flex-col w-full">
+                              <NetworkFormField direction="to" label="To" />
+                          </div>
+                        )}
                     </div>
                     <div className="mb-6 leading-4">
                         <AmountField />
                     </div>
-                    {
-                        !hideAddress ?
-                            <div className="w-full mb-3.5 leading-4">
-                                <label htmlFor="destination_address" className="block font-semibold text-secondary-text text-sm">
-                                    {`To ${values?.to?.display_name || ''} address`}
-                                </label>
-                                <AddressButton
-                                    disabled={!values.to || !values.from}
-                                    isPartnerWallet={!!isPartnerWallet}
-                                    openAddressModal={() => setShowAddressModal(true)}
-                                    partnerImage={partnerImage}
-                                    values={values} />
-                                <Modal
-                                    header={`To ${values?.to?.display_name || ''} address`}
-                                    height="fit"
-                                    show={showAddressModal} setShow={setShowAddressModal}
-                                    className="min-h-[70%]"
-                                >
-                                    <Address
-                                        close={() => setShowAddressModal(false)}
-                                        disabled={lockAddress || (!values.to || !values.from)}
-                                        name={"destination_address"}
-                                        partnerImage={partnerImage}
-                                        isPartnerWallet={!!isPartnerWallet}
-                                        partner={partner}
-                                        address_book={address_book?.data}
-                                    />
-                                </Modal>
-                            </div>
-                            : <></>
-                    }
+                    {!hideAddress ? (
+                      <div className="w-full mb-3.5 leading-4">
+                          <label htmlFor="destination_address" className="block font-semibold text-foreground text-sm">
+                              {`To ${values?.to?.display_name || ''} address`}
+                          </label>
+                          <AddressButton
+                            disabled={false /* !values.to || !values.from */}
+                            isPartnerWallet={!!isPartnerWallet}
+                            openAddressModal={() => setShowAddressModal(true)}
+                            partnerImage={partnerImage}
+                            values={values} 
+                          />
+                          <Modal
+                            header={`To ${values?.to?.display_name || ''} address`}
+                            height="fit"
+                            show={showAddressModal} setShow={setShowAddressModal}
+                            className="min-h-[70%]"
+                          >
+                            <Address
+                              close={() => setShowAddressModal(false)}
+                              disabled={lockAddress || (!values.to || !values.from)}
+                              name={"destination_address"}
+                              partnerImage={partnerImage}
+                              isPartnerWallet={!!isPartnerWallet}
+                              partner={partner}
+                              address_book={address_book?.data}
+                            />
+                          </Modal>
+                      </div>
+                    ) : (<></>)}
                     <div className="w-full">
                         {
                             destination && asset && !destination.isExchange && GetNetworkCurrency(destination, asset)?.is_refuel_enabled && !query?.hideRefuel &&
-                            <div className="flex items-center justify-between px-3.5 py-3 bg-secondary-700 border border-secondary-500 rounded-lg mb-4">
+                            <div className="flex items-center justify-between px-3.5 py-3 bg-level-3 darker-2-class border border-secondary-500 rounded-lg mb-4">
                                 <div className="flex items-center space-x-2">
                                     <Fuel className='h-8 w-8 text-primary' />
                                     <div>
@@ -284,19 +296,19 @@ const SwapForm: FC<Props> = ({ partner, isPartnerWallet }) => {
                         className="plausible-event-name=Swap+initiated"
                         type='submit'
                         isDisabled={!isValid}
-                        isSubmitting={isSubmitting}>
+                        isSubmitting={isSubmitting}
+                      >
                         {ActionText(errors, actionDisplayName as string)}
                     </SwapButton>
                 </Widget.Footer>
             </Form >
         </Widget>
-        {
-            process.env.NEXT_PUBLIC_SHOW_GAS_DETAILS === 'true'
-            && values.from
-            && values.currency &&
+        {process.env.NEXT_PUBLIC_SHOW_GAS_DETAILS === 'true'
+          && values.from
+          && values.currency && (
             <GasDetails network={values.from} currency={values.currency} />
-        }
-    </>
+        )}
+    </>)
 }
 
 function ActionText(errors: FormikErrors<SwapFormValues>, actionDisplayName: string): string {
@@ -309,7 +321,7 @@ function ActionText(errors: FormikErrors<SwapFormValues>, actionDisplayName: str
 
 const TruncatedAdrress = ({ address }: { address: string }) => {
     const shortAddress = shortenAddress(address)
-    return <div className="tracking-wider text-primary-text">{shortAddress}</div>
+    return <div className="tracking-wider text-muted text-muted-primary-text">{shortAddress}</div>
 }
 
 type AddressButtonProps = {
@@ -319,33 +331,37 @@ type AddressButtonProps = {
     partnerImage?: string;
     disabled: boolean;
 }
-const AddressButton: FC<AddressButtonProps> = ({ openAddressModal, isPartnerWallet, values, partnerImage, disabled }) => {
-    const destination = values?.to
-    return <button type="button" disabled={disabled} onClick={openAddressModal} className="flex rounded-lg space-x-3 items-center cursor-pointer shadow-sm mt-1.5 text-primary-text-placeholder bg-secondary-700 border-secondary-500 border disabled:cursor-not-allowed h-12 leading-4 focus:ring-primary focus:border-primary font-semibold w-full px-3.5 py-3">
-        {isPartnerWallet && !destination?.isExchange &&
-            <div className="shrink-0 flex items-center pointer-events-none">
-                {
-                    partnerImage &&
-                    <Image
-                        alt="Partner logo"
-                        className='rounded-md object-contain'
-                        src={partnerImage}
-                        width="24"
-                        height="24"></Image>
-                }
-            </div>
-        }
-        <div className="truncate">
-            {values.destination_address ?
-                <TruncatedAdrress address={values.destination_address} />
-                :
-                <span>Enter your address here</span>
-            }
-        </div>
-    </button>
-}
-
 
 
+const AddressButton: FC<AddressButtonProps> = ({ 
+  openAddressModal, 
+  isPartnerWallet, 
+  values, 
+  partnerImage, 
+  disabled 
+}) => ( 
+  <button type="button" disabled={disabled} onClick={openAddressModal} className="flex rounded-lg space-x-3 items-center cursor-pointer shadow-sm mt-1.5 text-muted placeholder:text-muted-2 bg-level-2 border-level-3 border disabled:cursor-not-allowed h-12 leading-4 focus:ring-primary focus:border-primary font-semibold w-full px-3.5 py-3">
+    {isPartnerWallet && !values.to?.isExchange &&
+      <div className="shrink-0 flex items-center pointer-events-none">
+      {partnerImage && (
+        <Image
+            alt="Partner logo"
+            className='rounded-md object-contain'
+            src={partnerImage}
+            width="24"
+            height="24"
+        />
+      )}
+      </div>
+    }
+    <div className="truncate">
+    {values.destination_address ?
+      <TruncatedAdrress address={values.destination_address} />
+      :
+      <span>Enter your address here</span>
+    }
+    </div>
+  </button>
+)
 
 export default SwapForm
diff --git a/app/components/Swap/Form/index.tsx b/app/components/Swap/Form/index.tsx
index 1f455376..9d6b828e 100644
--- a/app/components/Swap/Form/index.tsx
+++ b/app/components/Swap/Form/index.tsx
@@ -37,9 +37,9 @@ const SwapDetails = dynamic(() => import(".."), {
     loading: () => <div className="w-full h-[450px]">
         <div className="animate-pulse flex space-x-4">
             <div className="flex-1 space-y-6 py-1">
-                <div className="h-32 bg-secondary-700 rounded-lg"></div>
-                <div className="h-40 bg-secondary-700 rounded-lg"></div>
-                <div className="h-12 bg-secondary-700 rounded-lg"></div>
+                <div className="h-32 bg-level-3 darker-2-class rounded-lg"></div>
+                <div className="h-40 bg-level-3 darker-2-class rounded-lg"></div>
+                <div className="h-12 bg-level-3 darker-2-class rounded-lg"></div>
             </div>
         </div>
     </div>
@@ -212,11 +212,11 @@ const PendingSwap = ({ onClick }: { onClick: () => void }) => {
         <motion.div
             onClick={onClick}
             initial="rest" whileHover="hover" animate="rest"
-            className="relative bg-secondary-600 rounded-r-lg">
+            className="relative bg-level-4 darker-3-class rounded-r-lg">
             <motion.div
                 variants={textMotion}
-                className="flex items-center bg-secondary-600 rounded-r-lg">
-                <div className="text-primary-text flex px-3 p-2 items-center space-x-2">
+                className="flex items-center bg-level-4 darker-3-class rounded-r-lg">
+                <div className="text-muted text-muted-primary-text flex px-3 p-2 items-center space-x-2">
                     <span className="flex items-center">
                         {swap && <StatusIcon swap={swap} short={true} />}
                     </span>
diff --git a/app/components/Swap/NotFound.tsx b/app/components/Swap/NotFound.tsx
index 8572063b..7eb9345a 100644
--- a/app/components/Swap/NotFound.tsx
+++ b/app/components/Swap/NotFound.tsx
@@ -43,7 +43,7 @@ const NotFound: FC = () => {
         </MessageComponent.Content>
         <MessageComponent.Buttons>
             <MessageComponent.Buttons>
-                <div className="flex flex-row text-primary-text text-base space-x-2">
+                <div className="flex flex-row text-muted text-muted-primary-text text-base space-x-2">
                     <div className='basis-1/3'>
                         <SubmitButton text_align='left' onClick={startIntercom} isDisabled={false} isSubmitting={false} buttonStyle='outline' icon={<MessageSquare className="h-5 w-5" aria-hidden="true" />}>
                             <DoubleLineText
diff --git a/app/components/Swap/Step.tsx b/app/components/Swap/Step.tsx
index 6ad476f6..3cbe04bf 100644
--- a/app/components/Swap/Step.tsx
+++ b/app/components/Swap/Step.tsx
@@ -47,13 +47,13 @@ function Step({ step, isLastStep }: { step: StatusStep, isLastStep: boolean }) {
                     <div className={`absolute top-1/2 left-4 -ml-px mt-0.5 h-[40%] w-0.5 ${step.status === "complete" ? "bg-primary" : "bg-primary/20"} `} aria-hidden="true" />
                 )}
                 <div className={`group relative flex ${step?.description ? "items-start" : "items-center"}`}>
-                    <span className="flex h-9 items-center text-primary-text" aria-hidden="true">
+                    <span className="flex h-9 items-center text-muted text-muted-primary-text" aria-hidden="true">
                         {renderStepIcon(step)}
                     </span>
                     <span className="ml-3 flex min-w-0 flex-col">
-                        <span className={`text-sm font-medium ${step.status === "current" ? "text-primary" : step.status === "upcoming" ? "text-secondary-text/70" : "text-primary-text"}`}>{step.name}</span>
+                        <span className={`text-sm font-medium ${step.status === "current" ? "text-primary" : step.status === "upcoming" ? "text-foreground text-foreground-new/70" : "text-muted text-muted-primary-text"}`}>{step.name}</span>
                         {step?.description &&
-                            <span className="text-sm text-secondary-text">{step?.description}</span>}
+                            <span className="text-sm text-foreground text-foreground-new">{step?.description}</span>}
                     </span>
                 </div>
             </div>
diff --git a/app/components/Swap/Summary/Summary.tsx b/app/components/Swap/Summary/Summary.tsx
index 4e9ea305..4455d8ac 100644
--- a/app/components/Swap/Summary/Summary.tsx
+++ b/app/components/Swap/Summary/Summary.tsx
@@ -92,31 +92,31 @@ const Summary: FC<SwapInfoProps> = ({ currency, source: from, destination: to, r
                     <div className="flex items-center gap-3">
                         {source && <Image src={resolveImgSrc(source)} alt={source.display_name} width={32} height={32} className="rounded-full" />}
                         <div>
-                            <p className="text-primary-text text-sm leading-5">{source?.display_name}</p>
+                            <p className="text-muted text-muted-primary-text text-sm leading-5">{source?.display_name}</p>
                             {
                                 sourceAccountAddress &&
-                                <p className="text-sm text-secondary-text">{sourceAccountAddress}</p>
+                                <p className="text-sm text-foreground text-foreground-new">{sourceAccountAddress}</p>
                             }
                         </div>
                     </div>
                     <div className="flex flex-col">
-                        <p className="text-primary-text text-sm">{truncateDecimals(requestedAmount, currency.precision)} {sourceCurrencyName}</p>
-                        <p className="text-secondary-text text-sm flex justify-end">${requestedAmountInUsd}</p>
+                        <p className="text-muted text-muted-primary-text text-sm">{truncateDecimals(requestedAmount, currency.precision)} {sourceCurrencyName}</p>
+                        <p className="text-foreground text-foreground-new text-sm flex justify-end">${requestedAmountInUsd}</p>
                     </div>
                 </div>
                 <div className="flex items-center justify-between  w-full ">
                     <div className="flex items-center gap-3">
                         {destination && <Image src={resolveImgSrc(destination)} alt={destination.display_name} width={32} height={32} className="rounded-full" />}
                         <div>
-                            <p className="text-primary-text text-sm leading-5">{destination?.display_name}</p>
-                            <p className="text-sm text-secondary-text">{shortenAddress(destAddress as string)}</p>
+                            <p className="text-muted text-muted-primary-text text-sm leading-5">{destination?.display_name}</p>
+                            <p className="text-sm text-foreground text-foreground-new">{shortenAddress(destAddress as string)}</p>
                         </div>
                     </div>
                     {
                         fee != undefined && receiveAmount != undefined && fee >= 0 ?
                             <div className="flex flex-col justify-end">
-                                <p className="text-primary-text text-sm">{truncateDecimals(receiveAmount, currency.precision)} {destCurrencyName}</p>
-                                <p className="text-secondary-text text-sm flex justify-end">${receiveAmountInUsd}</p>
+                                <p className="text-muted text-muted-primary-text text-sm">{truncateDecimals(receiveAmount, currency.precision)} {destCurrencyName}</p>
+                                <p className="text-foreground text-foreground-new text-sm flex justify-end">${receiveAmountInUsd}</p>
                             </div>
                             :
                             <div className="flex flex-col justify-end">
@@ -136,8 +136,8 @@ const Summary: FC<SwapInfoProps> = ({ currency, source: from, destination: to, r
                             <p>Refuel</p>
                         </div>
                         <div className="flex flex-col">
-                            <p className="text-primary-text text-sm">{truncatedRefuelAmount} {nativeCurrency?.asset}</p>
-                            <p className="text-secondary-text text-sm flex justify-end">${refuelAmountInUsd}</p>
+                            <p className="text-muted text-muted-primary-text text-sm">{truncatedRefuelAmount} {nativeCurrency?.asset}</p>
+                            <p className="text-foreground text-foreground-new text-sm flex justify-end">${refuelAmountInUsd}</p>
                         </div>
                     </div>
                 }
diff --git a/app/components/Swap/Withdraw/Coinbase/Authorize.tsx b/app/components/Swap/Withdraw/Coinbase/Authorize.tsx
index c629abc3..fc45e46f 100644
--- a/app/components/Swap/Withdraw/Coinbase/Authorize.tsx
+++ b/app/components/Swap/Withdraw/Coinbase/Authorize.tsx
@@ -120,7 +120,7 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
             <Widget.Content>
                 {
                     !hideHeader ?
-                        <h3 className='md:mb-4 pt-2 text-lg sm:text-xl text-left font-roboto text-primary-text font-semibold'>
+                        <h3 className='md:mb-4 pt-2 text-lg sm:text-xl text-left font-roboto text-muted text-muted-primary-text font-semibold'>
                             Please connect your {exchange_name} account
                         </h3>
                         : <></>
@@ -155,11 +155,11 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
                                 name="alreadyFamiliar"
                                 id='alreadyFamiliar'
                                 type="checkbox"
-                                className="h-4 w-4 bg-secondary-600 cursor-pointer rounded border-secondary-400 text-priamry"
+                                className="h-4 w-4 bg-level-4 darker-3-class cursor-pointer rounded border-secondary-400 text-priamry"
                                 onChange={handleToggleChange}
                                 checked={alreadyFamiliar}
                             />
-                            <label htmlFor="alreadyFamiliar" className="ml-2 cursor-pointer block text-sm text-primary-text">
+                            <label htmlFor="alreadyFamiliar" className="ml-2 cursor-pointer block text-sm text-muted text-muted-primary-text">
                                 I&apos;m already familiar with the process.
                             </label>
                         </div>
@@ -182,10 +182,10 @@ const Authorize: FC<Props> = ({ onAuthorized, stickyFooter, onDoNotConnect, hide
                             </SubmitButton>
                         </div>
                     }
-                    <div className="pt-2 font-normal text-xs text-secondary-text">
+                    <div className="pt-2 font-normal text-xs text-foreground text-foreground-new">
                         <p className="block font-lighter text-left">
                             <span>Even after authorization Bridge can&apos;t initiate a withdrawal without your explicit confirmation.&nbsp;</span>
-                            <a target='_blank' href='https://docs.bridge.lux.network/user-docs/connect-a-coinbase-account' className='text-primary-text underline hover:no-underline decoration-white cursor-pointer'>Learn more</a></p>
+                            <a target='_blank' href='https://docs.bridge.lux.network/user-docs/connect-a-coinbase-account' className='text-muted text-muted-primary-text underline hover:no-underline decoration-white cursor-pointer'>Learn more</a></p>
                     </div>
                 </div>
             </Widget.Footer>
diff --git a/app/components/Swap/Withdraw/Coinbase/Coinbase2FA.tsx b/app/components/Swap/Withdraw/Coinbase/Coinbase2FA.tsx
index a59e11b6..b93c3308 100644
--- a/app/components/Swap/Withdraw/Coinbase/Coinbase2FA.tsx
+++ b/app/components/Swap/Withdraw/Coinbase/Coinbase2FA.tsx
@@ -148,12 +148,12 @@ const Coinbase2FA: FC<Props> = ({ onSuccess, footerStickiness = true }) => {
             onSubmit={handleSubmit}
         >
             {({ isValid, isSubmitting, errors, handleChange }) => (
-                <Form className='flex flex-col jutsify-center text-secondary-text h-full '>
+                <Form className='flex flex-col jutsify-center text-foreground text-foreground-new h-full '>
                     <Widget.Content center>
                         <div className="w-full flex-col justify-between flex h-full">
                             <ScanFace className='w-12 h-12 md:w-16 md:h-16 mt-auto text-primary self-center' />
                             <div className='text-center md:mt-5 md:mb-8'>
-                                <p className='mb-2 md:mb-6 mt-2 pt-2 text-2xl font-bold text-primary-text leading-6 text-center font-roboto'>
+                                <p className='mb-2 md:mb-6 mt-2 pt-2 text-2xl font-bold text-muted text-muted-primary-text leading-6 text-center font-roboto'>
                                     Coinbase 2FA
                                 </p>
                                 <p className='text-center text-base px-2'>
@@ -169,8 +169,8 @@ const Coinbase2FA: FC<Props> = ({ onSuccess, footerStickiness = true }) => {
                                     onChange={e => {
                                         /^[0-9]*$/.test(e.target.value) && handleChange(e)
                                     }}
-                                    className="leading-none h-12 text-2xl pl-5 text-primary-text  focus:ring-primary text-center focus:border-primary border-secondary-500 block
-                                placeholder:text-2xl placeholder:text-center tracking-widest placeholder:font-normal placeholder:opacity-50 bg-secondary-700  w-full font-semibold rounded-md placeholder-primary-text"
+                                    className="leading-none h-12 text-2xl pl-5 text-muted text-muted-primary-text  focus:ring-primary text-center focus:border-primary border-secondary-500 block
+                                placeholder:text-2xl placeholder:text-center tracking-widest placeholder:font-normal placeholder:opacity-50 bg-level-3 darker-2-class  w-full font-semibold rounded-md placeholder-primary-text"
                                 />
                             </div>
                             <span className="flex text-sm leading-6 items-center mt-1.5">
@@ -189,7 +189,7 @@ const Coinbase2FA: FC<Props> = ({ onSuccess, footerStickiness = true }) => {
                                         : <SpinIcon className="animate-spin h-5 w-5" />}
                                 </TimerWithContext>
                             </span>
-                            <div className='p-4 bg-secondary-700 text-secondary-text rounded-lg border border-secondary-500 my-4'>
+                            <div className='p-4 bg-level-3 darker-2-class text-foreground text-foreground-new rounded-lg border border-secondary-500 my-4'>
                                 <div className="flex items-center">
                                     <Info className='h-5 w-5 text-primary-600 mr-3' />
                                     <label className="block text-sm md:text-base font-medium leading-6">To obtain the 2 step verification code, check:</label>
diff --git a/app/components/Swap/Withdraw/Coinbase/ConnectGuideScreens.tsx b/app/components/Swap/Withdraw/Coinbase/ConnectGuideScreens.tsx
index d4c9b1d1..22e42e9f 100644
--- a/app/components/Swap/Withdraw/Coinbase/ConnectGuideScreens.tsx
+++ b/app/components/Swap/Withdraw/Coinbase/ConnectGuideScreens.tsx
@@ -6,7 +6,7 @@ export const FirstScreen: React.FC<{
   name 
 }) => {
     return <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-        <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.01</span><span>&nbsp;After this guide you&apos;ll be redirected to </span>{name}<span></span></div>
+        <div className='whitespace-normal text-muted text-muted-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.01</span><span>&nbsp;After this guide you&apos;ll be redirected to </span>{name}<span></span></div>
         <div className="w-1/2 m-auto">
             <FirstScreenImage />
         </div>
@@ -15,7 +15,7 @@ export const FirstScreen: React.FC<{
 
 export const SecondScreen: React.FC = () => {
     return <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-        <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.02</span><span>&nbsp;When in Coinbase, click&nbsp;</span><span className='strong-highlight font-medium'>Change this amount</span></div>
+        <div className='whitespace-normal text-muted text-muted-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.02</span><span>&nbsp;When in Coinbase, click&nbsp;</span><span className='strong-highlight font-medium'>Change this amount</span></div>
         <div className="w-1/2 m-auto">
             <SecondScreenImage />
         </div>
@@ -28,7 +28,7 @@ export const ThirdScreen: React.FC<{
   minimalAuthorizeAmount 
 }) => (
   <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-    <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.03</span><span>&nbsp;Change the existing 1.0 value to&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click Save</span></div>
+    <div className='whitespace-normal text-muted text-muted-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.03</span><span>&nbsp;Change the existing 1.0 value to&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click Save</span></div>
     <div className="w-1/2  m-auto">
       <ThirdScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
     </div>
@@ -41,7 +41,7 @@ export const FourthScreen: React.FC<{
   minimalAuthorizeAmount 
 }) => (
   <div className="inline-flex flex-col relative top-0 left-0 grow w-full">
-    <div className='whitespace-normal text-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.04</span><span>&nbsp;Make sure that the amount is&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click&nbsp;</span><span className='strong-highlight font-medium'>Authorize</span></div>
+    <div className='whitespace-normal text-muted text-muted-primary-text grow text-md font-normal pb-2'><span className='font-medium text-primary'>.04</span><span>&nbsp;Make sure that the amount is&nbsp;</span><span className='strong-highlight font-medium'>{minimalAuthorizeAmount}</span><span>&nbsp;and click&nbsp;</span><span className='strong-highlight font-medium'>Authorize</span></div>
     <div className="w-1/2  m-auto">
       <FourthScreenImage minimalAuthorizeAmount={minimalAuthorizeAmount} />
     </div>
@@ -58,7 +58,7 @@ export const LastScreen: React.FC<{
   number
 }) => (
   <div className="inline-flex flex-col left-0 l relative top-0 grow w-full">
-    <div className='text-primary-text text-md font-normal grow w-full pb-2 '>
+    <div className='text-muted text-muted-primary-text text-md font-normal grow w-full pb-2 '>
       {number && (<span className='font-medium text-primary'>.05</span>) }
       <span>&nbsp;Make sure to change the allowed amount to&nbsp;</span>
       <span className='strong-highlight'>{minimalAuthorizeAmount}</span>
diff --git a/app/components/Swap/Withdraw/Coinbase/index.tsx b/app/components/Swap/Withdraw/Coinbase/index.tsx
index 1d89ef13..4695200d 100644
--- a/app/components/Swap/Withdraw/Coinbase/index.tsx
+++ b/app/components/Swap/Withdraw/Coinbase/index.tsx
@@ -117,9 +117,9 @@ const TransferElements: FC = () => {
                     footerStickiness={false}
                 />
             </Modal>
-            <div className="w-full space-y-5 flex flex-col justify-between h-full text-secondary-text">
+            <div className="w-full space-y-5 flex flex-col justify-between h-full text-foreground text-foreground-new">
                 <div className='space-y-4'>
-                    <div className='border-secondary-500 rounded-md border bg-secondary-700 p-3'>
+                    <div className='border-secondary-500 rounded-md border bg-level-3 darker-2-class p-3'>
                         {
                             swap?.exchange_account_connected ?
                                 <SubmitButton
diff --git a/app/components/Swap/Withdraw/External.tsx b/app/components/Swap/Withdraw/External.tsx
index 60bb4ffa..ba32dc01 100644
--- a/app/components/Swap/Withdraw/External.tsx
+++ b/app/components/Swap/Withdraw/External.tsx
@@ -8,7 +8,7 @@ const External: FC = () => {
     return (
         <Widget.Content>
             <div className="w-full py-12 grid grid-flow-row">
-                <div className='md:text-3xl text-lg font-bold text-primary-text leading-6 text-center'>
+                <div className='md:text-3xl text-lg font-bold text-muted text-muted-primary-text leading-6 text-center'>
                     Withdrawal pending
                 </div>
                 <div className='flex place-content-center mt-20 mb-16 md:mb-8'>
@@ -18,8 +18,8 @@ const External: FC = () => {
                         <div className='relative top-0 left-0 w-12 h-12 scale-75 bg bg-primary-800 rounded-full'></div>
                     </div>
                 </div>
-                <div className="flex flex-col text-center place-content-center mt-1 text-lg font-lighter text-secondary-text">
-                    <p className="text-base font-medium space-y-6 text-secondary-text text-center">
+                <div className="flex flex-col text-center place-content-center mt-1 text-lg font-lighter text-foreground text-foreground-new">
+                    <p className="text-base font-medium space-y-6 text-foreground text-foreground-new text-center">
                         The withdrawal has been initiated, please don&apos;t close this screen.
                     </p>
                 </div>
diff --git a/app/components/Swap/Withdraw/Failed.tsx b/app/components/Swap/Withdraw/Failed.tsx
index 65c55389..3802a7f6 100644
--- a/app/components/Swap/Withdraw/Failed.tsx
+++ b/app/components/Swap/Withdraw/Failed.tsx
@@ -31,9 +31,9 @@ const Failed: FC = () => {
                     <span className="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
                         <QuestionIcon className="h-7 w-7 text-primary" aria-hidden="true" />
                     </span>
-                    <label className="block text-sm md:text-base text-primary-text font-medium">What&apos;s happening?</label>
+                    <label className="block text-sm md:text-base text-muted text-muted-primary-text font-medium">What&apos;s happening?</label>
                 </div>
-                <div className='mt-4 text-xs md:text-sm text-primary-text'>
+                <div className='mt-4 text-xs md:text-sm text-muted text-muted-primary-text'>
                     {
                         swap?.status == SwapStatus.Cancelled &&
                         <Canceled onGetHelp={startIntercom} swap={swap} />
@@ -60,8 +60,8 @@ type Props = {
 const Expired = ({ onGetHelp }: Props) => {
     return (
         <div>
-            <span className='text-md text-left text-xs md:text-sm text-primary-text'>The transfer wasn&apos;t completed during the allocated timeframe.</span>
-            <span className='text-secondary-text'><span> If you&apos;ve already sent crypto for this swap, your funds are safe, </span><a className='underline hover:cursor-pointer' onClick={() => onGetHelp()}>please contact our support.</a></span>
+            <span className='text-md text-left text-xs md:text-sm text-muted text-muted-primary-text'>The transfer wasn&apos;t completed during the allocated timeframe.</span>
+            <span className='text-foreground text-foreground-new'><span> If you&apos;ve already sent crypto for this swap, your funds are safe, </span><a className='underline hover:cursor-pointer' onClick={() => onGetHelp()}>please contact our support.</a></span>
         </div>
     )
 }
@@ -71,7 +71,7 @@ const Delay: FC = () => {
             <p className='text-md '><span>This usually means that the exchange needs additional verification.</span>
                 <Link target='_blank' href="https://docs.bridge.lux.network/user-docs/why-is-coinbase-transfer-taking-so-long"
                     className='disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed ml-1 underline hover:no-underline cursor-pointer'>Learn More</Link></p>
-            <ul className="list-inside list-decimal font-light space-y-1 mt-2 text-left text-primary-text ">
+            <ul className="list-inside list-decimal font-light space-y-1 mt-2 text-left text-muted text-muted-primary-text ">
                 <li>Check your email for details from Coinbase</li>
                 <li>Check your Coinbase account&apos;s transfer history</li>
             </ul>
@@ -82,8 +82,8 @@ const Delay: FC = () => {
 const Canceled = ({ onGetHelp }: Props) => {
     return (
         <div>
-            <p className='text-md text-left text-primary-text'><span>The transaction was cancelled by your request.</span>
-                <span className='text-secondary-text'><span> If you&apos;ve already sent crypto for this swap, your funds are safe,</span><a className='underline hover:cursor-pointer' onClick={() => onGetHelp()}> please contact our support.</a></span>
+            <p className='text-md text-left text-muted text-muted-primary-text'><span>The transaction was cancelled by your request.</span>
+                <span className='text-foreground text-foreground-new'><span> If you&apos;ve already sent crypto for this swap, your funds are safe,</span><a className='underline hover:cursor-pointer' onClick={() => onGetHelp()}> please contact our support.</a></span>
             </p>
         </div>
     )
diff --git a/app/components/Swap/Withdraw/FiatTransfer.tsx b/app/components/Swap/Withdraw/FiatTransfer.tsx
index 23081b4c..467e37cf 100644
--- a/app/components/Swap/Withdraw/FiatTransfer.tsx
+++ b/app/components/Swap/Withdraw/FiatTransfer.tsx
@@ -22,7 +22,7 @@ const FiatTransfer: FC = () => {
         setEmbedded(inIframe())
     }, [])
 
-    return <div className='rounded-xl bg-secondary-700 border border-secondary-500 divide-y divide-secondary-500'>
+    return <div className='rounded-xl bg-level-3 darker-2-class border border-secondary-500 divide-y divide-secondary-500'>
         {
             embedded ?
                 <SubmitButton onClick={() => window.open(swap?.fiat_redirect_url, '_blank')} icon={<ExternalLink className='h-5 w-5' strokeWidth={2} />} isDisabled={!swap} isSubmitting={false}>
diff --git a/app/components/Swap/Withdraw/ManualTransfer.tsx b/app/components/Swap/Withdraw/ManualTransfer.tsx
index 66637844..28d06c0b 100644
--- a/app/components/Swap/Withdraw/ManualTransfer.tsx
+++ b/app/components/Swap/Withdraw/ManualTransfer.tsx
@@ -44,14 +44,14 @@ const ManualTransfer: FC = () => {
     }, [swap, hintsStore])
 
     return (
-        <div className='rounded-md bg-secondary-700 border border-secondary-500 w-full h-full items-center relative'>
+        <div className='rounded-md bg-level-3 darker-2-class border border-secondary-500 w-full h-full items-center relative'>
             <div className={!hintClicked ? "absolute w-full h-full flex flex-col items-center px-3 pb-3 text-center" : "hidden"}>
                 <div className="flex flex-col items-center justify-center h-full pb-2">
                     <div className="max-w-xs">
-                        <p className="text-base text-primary-text">
+                        <p className="text-base text-muted text-muted-primary-text">
                             About manual transfers
                         </p>
-                        <p className="text-xs text-secondary-text">
+                        <p className="text-xs text-foreground text-foreground-new">
                             Transfer assets to Bridge’s deposit address to complete the swap.
                         </p>
                     </div>
@@ -110,8 +110,8 @@ const TransferInvoice: FC<{ address?: string, shouldGenerateAddress: boolean }>
         setSelectedAssetNetwork(n)
     }, [])
 
-    return <div className='divide-y divide-secondary-500 text-primary-text h-full'>
-        {source_exchange && <div className={`w-full relative rounded-md px-3 py-3 shadow-sm border-secondary-700 border bg-secondary-700 flex flex-col items-center justify-center gap-2`}>
+    return <div className='divide-y divide-secondary-500 text-muted text-muted-primary-text h-full'>
+        {source_exchange && <div className={`w-full relative rounded-md px-3 py-3 shadow-sm border-secondary-700 border bg-level-3 darker-2-class flex flex-col items-center justify-center gap-2`}>
             <ExchangeNetworkPicker onChange={handleChangeSelectedNetwork} />
         </div>
         }
@@ -128,7 +128,7 @@ const TransferInvoice: FC<{ address?: string, shouldGenerateAddress: boolean }>
                     }
                     {
                         (source_network_internal_name === KnownInternalNames.Networks.LoopringMainnet || source_network_internal_name === KnownInternalNames.Networks.LoopringGoerli) &&
-                        <div className='flex text-xs items-center py-1 mt-1 border-2 border-secondary-300 rounded border-dashed text-secondary-text'>
+                        <div className='flex text-xs items-center py-1 mt-1 border-2 border-secondary-300 rounded border-dashed text-foreground text-foreground-new'>
                             <p>
                                 This address might not be activated. You can ignore it.
                             </p>
@@ -183,7 +183,7 @@ const TransferInvoice: FC<{ address?: string, shouldGenerateAddress: boolean }>
                             {asset?.name}
                         </span>
                         {asset?.contract_address && isValidAddress(asset.contract_address, selectedAssetNetwork?.network) &&
-                            <span className="text-xs text-secondary-text flex items-center leading-3">
+                            <span className="text-xs text-foreground text-foreground-new flex items-center leading-3">
                                 {shortenAddress(asset?.contract_address)}
                             </span>
                         }
@@ -215,13 +215,13 @@ const ExchangeNetworkPicker: FC<{ onChange: (network: BaseL2Asset) => void }> =
     return <div className='flex items-center gap-1 text-sm my-2'>
         <span>Network:</span>
         {exchangeAssets?.length === 1 ?
-            <div className='flex space-x-1 items-center w-fit font-semibold text-primary-text'>
+            <div className='flex space-x-1 items-center w-fit font-semibold text-muted text-muted-primary-text'>
                 <Image alt="chainLogo" height='20' width='20' className='h-5 w-5 rounded-md ring-2 ring-secondary-600' src={resolveImgSrc(exchangeAssets?.[0])}></Image>
                 <span>{defaultSourceNetwork?.network?.display_name}</span>
             </div>
             :
             <Select onValueChange={handleChangeSelectedNetwork} defaultValue={defaultSourceNetwork?.network_internal_name}>
-                <SelectTrigger className="w-fit border-none !text-primary-text !font-semibold !h-fit !p-0">
+                <SelectTrigger className="w-fit border-none !text-muted text-muted-primary-text !font-semibold !h-fit !p-0">
                     <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -255,7 +255,7 @@ const ExchangeNetworkPicker: FC<{ onChange: (network: BaseL2Asset) => void }> =
 
 
 const Sceleton = () => {
-    return <div className="animate-pulse rounded-lg p-4 flex items-center text-center bg-secondary-700 border border-secondary-500">
+    return <div className="animate-pulse rounded-lg p-4 flex items-center text-center bg-level-3 darker-2-class border border-secondary-500">
         <div className="flex-1 space-y-6 py-1 p-8 pt-4 items-center">
             <div className="h-2 bg-secondary-text rounded self-center w-16 m-auto"></div>
             <div className="space-y-3">
diff --git a/app/components/Swap/Withdraw/Processing/Processing.tsx b/app/components/Swap/Withdraw/Processing/Processing.tsx
index 6bba0286..1db01e38 100644
--- a/app/components/Swap/Withdraw/Processing/Processing.tsx
+++ b/app/components/Swap/Withdraw/Processing/Processing.tsx
@@ -52,7 +52,7 @@ const Processing: FC<Props> = ({ settings, swap }) => {
 
     const outputPendingDetails = <div className='flex items-center space-x-1'>
         <span>Estimated arrival after confirmation:</span>
-        <div className='text-primary-text'>
+        <div className='text-muted text-muted-primary-text'>
             {
                 destinationNetworkCurrency?.status == 'insufficient_liquidity' ?
                     <span>Up to 2 hours (delayed)</span>
@@ -74,7 +74,7 @@ const Processing: FC<Props> = ({ settings, swap }) => {
                     <span>
                         <span>Waiting for confirmations</span>
                         {swapInputTransaction && swapInputTransaction?.confirmations && (
-                            <span className="text-primary-text ml-1">
+                            <span className="text-muted text-muted-primary-text ml-1">
                                 <span>{swapInputTransaction?.confirmations >= swapInputTransaction?.max_confirmations
                                     ? swapInputTransaction?.max_confirmations
                                     : swapInputTransaction?.confirmations}</span>
@@ -98,7 +98,7 @@ const Processing: FC<Props> = ({ settings, swap }) => {
                 name: `The transfer failed`,
                 description: <div className='flex space-x-1'>
                     <span>Error: </span>
-                    <div className='space-x-1 text-primary-text'>
+                    <div className='space-x-1 text-muted text-muted-primary-text'>
                         {swap?.fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ?
                             "Your deposit is higher than the max limit. We'll review and approve your transaction in up to 2 hours."
                             :
@@ -139,7 +139,7 @@ const Processing: FC<Props> = ({ settings, swap }) => {
             failed: {
                 name: swap?.fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ? `The transfer is on hold` : "The transfer has failed",
                 description: <div className='flex space-x-1'>
-                    <div className='space-x-1 text-secondary-text'>
+                    <div className='space-x-1 text-foreground text-foreground-new'>
                         {swap?.fail_reason == SwapFailReasons.RECEIVED_MORE_THAN_VALID_RANGE ?
                             "Your deposit is higher than the max limit. We'll review and approve your transaction in up to 2 hours."
                             :
@@ -211,24 +211,24 @@ const Processing: FC<Props> = ({ settings, swap }) => {
     if (!swap) return <></>
     return (
         <Widget.Content>
-            <div className={`w-full min-h-[422px] space-y-5 flex flex-col justify-between text-primary-text`}>
+            <div className={`w-full min-h-[422px] space-y-5 flex flex-col justify-between text-muted text-muted-primary-text`}>
                 <div className='space-y-5'>
                     <div className="w-full flex flex-col h-full space-y-5">
-                        <div className="bg-secondary-700 font-normal px-3 py-4 rounded-lg flex flex-col border border-secondary-500 w-full relative z-10">
+                        <div className="bg-level-3 darker-2-class font-normal px-3 py-4 rounded-lg flex flex-col border border-secondary-500 w-full relative z-10">
                             <SwapSummary></SwapSummary>
                         </div>
                     </div>
-                    <div className="bg-secondary-700 font-normal px-3 py-6 rounded-lg flex flex-col border border-secondary-500 w-full relative z-10 divide-y-2 divide-secondary-500 divide-dashed">
+                    <div className="bg-level-3 darker-2-class font-normal px-3 py-6 rounded-lg flex flex-col border border-secondary-500 w-full relative z-10 divide-y-2 divide-secondary-500 divide-dashed">
                         <div className='pb-4'>
                             <div className='flex flex-col gap-2 items-center'>
                                 <div className='flex items-center'>
                                     <Gauge value={stepsProgressPercentage} size="small" showCheckmark={swap?.status === SwapStatus.Completed} />
                                 </div>
                                 <div className="flex-col text-center ">
-                                    <span className="font-medium text-primary-text">
+                                    <span className="font-medium text-muted text-muted-primary-text">
                                         {progressStatuses.generalStatus.title}
                                     </span>
-                                    <span className='text-sm block space-x-1 text-secondary-text'>
+                                    <span className='text-sm block space-x-1 text-foreground text-foreground-new'>
                                         <span>{progressStatuses.generalStatus.subTitle ?? outputPendingDetails}</span>
                                     </span>
                                 </div>
diff --git a/app/components/Swap/Withdraw/Success.tsx b/app/components/Swap/Withdraw/Success.tsx
index 749d6290..dfbf793e 100644
--- a/app/components/Swap/Withdraw/Success.tsx
+++ b/app/components/Swap/Withdraw/Success.tsx
@@ -32,7 +32,7 @@ const Success: FC = () => {
         <>
             <Widget.Footer>
                 <MessageComponent.Buttons>
-                    <div className="flex flex-row text-primary-text text-base space-x-2">
+                    <div className="flex flex-row text-muted text-muted-primary-text text-base space-x-2">
                         {!externalId &&
                             ((transaction_explorer_template && swapOutputTransaction?.transaction_id) ?
                                 <>
diff --git a/app/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx b/app/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx
index 4ce3f31e..cc35d4aa 100644
--- a/app/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx
+++ b/app/components/Swap/Withdraw/Wallet/ImtblxWalletWithdrawStep.tsx
@@ -74,7 +74,7 @@ const ImtblxWalletWithdrawStep: FC<Props> = ({ depositAddress }) => {
 
     return (
         <>
-            <div className="w-full space-y-5 flex flex-col justify-between h-full text-secondary-text">
+            <div className="w-full space-y-5 flex flex-col justify-between h-full text-foreground text-foreground-new">
                 <div className='space-y-4'>
                     <WarningMessage messageType='informing'>
                         <span className='flex-none'>
diff --git a/app/components/Swap/Withdraw/Wallet/StarknetWalletWithdraw.tsx b/app/components/Swap/Withdraw/Wallet/StarknetWalletWithdraw.tsx
index 289e3018..98479c1c 100644
--- a/app/components/Swap/Withdraw/Wallet/StarknetWalletWithdraw.tsx
+++ b/app/components/Swap/Withdraw/Wallet/StarknetWalletWithdraw.tsx
@@ -149,7 +149,7 @@ const StarknetWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
 
     return (
         <>
-            <div className="w-full space-y-5 flex flex-col justify-between h-full text-secondary-text">
+            <div className="w-full space-y-5 flex flex-col justify-between h-full text-foreground text-foreground-new">
                 <div className='space-y-4'>
                     {
 
@@ -167,7 +167,7 @@ const StarknetWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
                     {
                         !wallet &&
                         <div className="flex flex-row
-                         text-primary-text text-base space-x-2">
+                         text-muted text-muted-primary-text text-base space-x-2">
                             <SubmitButton
                                 isDisabled={loading}
                                 isSubmitting={loading}
@@ -187,7 +187,7 @@ const StarknetWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
                         && depositAddress
                         && !isWrongNetwork
                         && <div className="flex flex-row
-                        text-primary-text text-base space-x-2">
+                        text-muted text-muted-primary-text text-base space-x-2">
                             <SubmitButton
                                 isDisabled={!!(loading || transferDone)}
                                 isSubmitting={!!(loading || transferDone)}
diff --git a/app/components/Swap/Withdraw/Wallet/WalletTransfer/TransferNativeToken.tsx b/app/components/Swap/Withdraw/Wallet/WalletTransfer/TransferNativeToken.tsx
index 0c52e42c..50da06ee 100644
--- a/app/components/Swap/Withdraw/Wallet/WalletTransfer/TransferNativeToken.tsx
+++ b/app/components/Swap/Withdraw/Wallet/WalletTransfer/TransferNativeToken.tsx
@@ -151,10 +151,10 @@ const TransferNativeTokenButton: FC<TransferNativeTokenButtonProps> = ({
         >
             <MessageComponent>
                 <div className="space-y-4">
-                    <div className='md:text-2xl text-lg font-bold text-primary-text leading-6 text-center'>
+                    <div className='md:text-2xl text-lg font-bold text-muted text-muted-primary-text leading-6 text-center'>
                         Insufficient funds for gas
                     </div>
-                    <div className="text-base font-medium space-y-6 text-primary-text text-center">
+                    <div className="text-base font-medium space-y-6 text-muted text-muted-primary-text text-center">
                         This transfer can&apos;t be processed because you don&apos;t have enough gas.
                     </div>
                 </div>
@@ -162,7 +162,7 @@ const TransferNativeTokenButton: FC<TransferNativeTokenButtonProps> = ({
                     You have requested swap with {amount}
                 </div>
                 <MessageComponent.Buttons>
-                    <div className="flex flex-row text-primary-text text-base space-x-2">
+                    <div className="flex flex-row text-muted text-muted-primary-text text-base space-x-2">
                         <div className='basis-1/3'>
                             <SubmitButton onClick={() => { setOpenChangeAmount(false); clickHandler() }} text_align='left' isDisabled={false} isSubmitting={false} buttonStyle='filled' >
                                 Transfer
diff --git a/app/components/Swap/Withdraw/Wallet/WalletTransfer/buttons.tsx b/app/components/Swap/Withdraw/Wallet/WalletTransfer/buttons.tsx
index b114ec09..f33fab6f 100644
--- a/app/components/Swap/Withdraw/Wallet/WalletTransfer/buttons.tsx
+++ b/app/components/Swap/Withdraw/Wallet/WalletTransfer/buttons.tsx
@@ -96,7 +96,7 @@ export const ButtonWrapper: FC<ButtonWrapperProps> = ({
     children
 }) => {
     return <div>
-        <div className="flex flex-row text-primary-text text-base space-x-2">
+        <div className="flex flex-row text-muted text-muted-primary-text text-base space-x-2">
             <SubmitButton icon={icon}
                 text_align='center'
                 isDisabled={!!disabled}
diff --git a/app/components/Swap/Withdraw/Wallet/WalletTransfer/message.tsx b/app/components/Swap/Withdraw/Wallet/WalletTransfer/message.tsx
index b4ed8a78..198b8cd0 100644
--- a/app/components/Swap/Withdraw/Wallet/WalletTransfer/message.tsx
+++ b/app/components/Swap/Withdraw/Wallet/WalletTransfer/message.tsx
@@ -29,18 +29,18 @@ const WalletMessage: FC<WalletMessageProps> = ({ header, details, status, showIn
             showInModal ?
                 <div className="text-left space-y-1 w-full max-w-2xl">
                     <button onClick={() => setShowErrorModal(true)} className="flex justify-between w-full">
-                        <p className="text-md font-semibold self-center text-primary-text">
+                        <p className="text-md font-semibold self-center text-muted text-muted-primary-text">
                             {header}
                         </p>
-                       {showErrorModal? <ChevronDown className="text-primary-text" />: <ChevronUp className="text-primary-text" />}
+                       {showErrorModal? <ChevronDown className="text-muted text-muted-primary-text" />: <ChevronUp className="text-muted text-muted-primary-text" />}
                     </button>
                     {/* TODO handle overflow */}
                     <Modal height="fit" show={showErrorModal} setShow={setShowErrorModal}>
                         <div className="text-left space-y-1">
-                            <p className="text-md font-semibold self-center text-primary-text">
+                            <p className="text-md font-semibold self-center text-muted text-muted-primary-text">
                                 {header}x
                             </p>
-                            <p className="text-sm text-secondary-text break-all whitespace-pre-wrap">
+                            <p className="text-sm text-foreground text-foreground-new break-all whitespace-pre-wrap">
                                 {details}
                             </p>
                         </div>
@@ -48,10 +48,10 @@ const WalletMessage: FC<WalletMessageProps> = ({ header, details, status, showIn
                 </div>
                 :
                 <div className="text-left space-y-1">
-                    <p className="text-md font-semibold self-center text-primary-text">
+                    <p className="text-md font-semibold self-center text-muted text-muted-primary-text">
                         {header}
                     </p>
-                    <p className="text-sm text-secondary-text break-all">
+                    <p className="text-sm text-foreground text-foreground-new break-all">
                         {details}
                     </p>
                 </div>
diff --git a/app/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx b/app/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx
index 4c507923..48b5711d 100644
--- a/app/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx
+++ b/app/components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx
@@ -118,7 +118,7 @@ const ZkSyncWalletWithdrawStep: FC<Props> = ({ depositAddress, amount }) => {
 
     return (
         <>
-            <div className="w-full space-y-5 flex flex-col justify-between h-full text-primary-text">
+            <div className="w-full space-y-5 flex flex-col justify-between h-full text-muted text-muted-primary-text">
                 <div className='space-y-4'>
                     {
                         !syncWallet &&
diff --git a/app/components/Swap/Withdraw/Wallet/index.tsx b/app/components/Swap/Withdraw/Wallet/index.tsx
index 2559acaa..77b67334 100644
--- a/app/components/Swap/Withdraw/Wallet/index.tsx
+++ b/app/components/Swap/Withdraw/Wallet/index.tsx
@@ -88,7 +88,7 @@ const WalletTransfer: FC = () => {
 }
 
 const Wrapper: FC<PropsWithChildren> = ({ children }) => {
-    return <div className='border-secondary-500 rounded-md border bg-secondary-700 p-3'>
+    return <div className='border-secondary-500 rounded-md border bg-level-3 darker-2-class p-3'>
         {children}
     </div>
 }
diff --git a/app/components/Swap/Withdraw/index.tsx b/app/components/Swap/Withdraw/index.tsx
index bfc950c6..17fe4a30 100644
--- a/app/components/Swap/Withdraw/index.tsx
+++ b/app/components/Swap/Withdraw/index.tsx
@@ -123,11 +123,11 @@ const Withdraw: FC = () => {
     return (
         <>
             <Widget.Content>
-                <div className="w-full flex flex-col justify-between  text-secondary-text">
+                <div className="w-full flex flex-col justify-between  text-foreground text-foreground-new">
                     <div className='grid grid-cols-1 gap-4 '>
                         {
                             !isFiat &&
-                            <div className="bg-secondary-700 rounded-lg px-3 py-4 border border-secondary-500 w-full relative z-10 space-y-4">
+                            <div className="bg-level-3 darker-2-class rounded-lg px-3 py-4 border border-secondary-500 w-full relative z-10 space-y-4">
                                 <SwapSummary />
                             </div>
                         }
@@ -227,8 +227,8 @@ const WalletTransferContent: FC = () => {
             <span className='mb-1 ml-1 text-sm'>{swap?.source_exchange ? "Connected account" : "Connected wallet"}</span>
         }
 
-        <div onClick={handleOpenAccount} className={`${canOpenAccount ? 'cursor-pointer' : 'cursor-auto'} text-left min-h-12  space-x-2 border border-secondary-600 bg-secondary-700/70 flex text-sm rounded-md items-center w-full pl-4 pr-2 py-1.5`}>
-            <div className='flex text-secondary-text bg-secondary-400 flex-row items-left rounded-md p-1'>
+        <div onClick={handleOpenAccount} className={`${canOpenAccount ? 'cursor-pointer' : 'cursor-auto'} text-left min-h-12  space-x-2 border border-secondary-600 bg-level-3 darker-2-class/70 flex text-sm rounded-md items-center w-full pl-4 pr-2 py-1.5`}>
+            <div className='flex text-foreground text-foreground-new bg-secondary-400 flex-row items-left rounded-md p-1'>
                 {
                     !swap?.source_exchange
                     && wallet?.connector
@@ -247,7 +247,7 @@ const WalletTransferContent: FC = () => {
                 }
             </div>
             <div className="flex flex-col grow">
-                <div className="block text-md font-medium text-primary-text">
+                <div className="block text-md font-medium text-muted text-muted-primary-text">
                     {!swap?.source_exchange && <span>
                         {shortenAddress(accountAddress)}
                     </span>}
@@ -256,7 +256,7 @@ const WalletTransferContent: FC = () => {
                     </span>}
                 </div>
             </div>
-            <div onClick={handleDisconnect} className='cursor-pointer flex text-secondary-text flex-row items-left p-2 rounded-md transform hover:bg-secondary-500 transition duration-200 hover:border-secondary-500 hover:shadow-xl'>
+            <div onClick={handleDisconnect} className='cursor-pointer flex text-foreground text-foreground-new flex-row items-left p-2 rounded-md transform hover:bg-level-4 darker-hover-class transition duration-200 hover:border-secondary-500 hover:shadow-xl'>
                 {isLoading ? <SpinIcon className="animate-spin h-5 w-5" /> : <X className='h-5' />}
             </div>
         </div>
diff --git a/app/components/Swap/index.tsx b/app/components/Swap/index.tsx
index 04a59e8c..3ede8f68 100644
--- a/app/components/Swap/index.tsx
+++ b/app/components/Swap/index.tsx
@@ -29,9 +29,9 @@ const SwapDetails: FC<Props> = ({ type }) => {
         <div className="w-full h-[430px]">
             <div className="animate-pulse flex space-x-4">
                 <div className="flex-1 space-y-6 py-1">
-                    <div className="h-32 bg-secondary-700 rounded-lg"></div>
-                    <div className="h-40 bg-secondary-700 rounded-lg"></div>
-                    <div className="h-12 bg-secondary-700 rounded-lg"></div>
+                    <div className="h-32 bg-level-3 darker-2-class rounded-lg"></div>
+                    <div className="h-40 bg-level-3 darker-2-class rounded-lg"></div>
+                    <div className="h-12 bg-level-3 darker-2-class rounded-lg"></div>
                 </div>
             </div>
         </div>
@@ -62,7 +62,7 @@ const Container = ({ type, children }: Props & {
     if (type === "widget")
         return <Widget>{children}</Widget>
     else
-        return <div className="w-full flex flex-col justify-between h-full space-y-5 text-secondary-text">
+        return <div className="w-full flex flex-col justify-between h-full space-y-5 text-foreground text-foreground-new">
             {children}
         </div>
 
diff --git a/app/components/SwapGuide.tsx b/app/components/SwapGuide.tsx
index 5bdbe0ab..576afaf5 100644
--- a/app/components/SwapGuide.tsx
+++ b/app/components/SwapGuide.tsx
@@ -7,26 +7,26 @@ import { SwapItem } from '../lib/BridgeApiClient'
 
 const SwapGuide = ({ swap }: { swap: SwapItem }) => {
     return (
-        <div className='rounded-md w-full flex flex-col items-left justify-center space-y-4 text-left text-secondary-text'>
-            <p className='text-secondary-text'><span>To complete the swap,&nbsp;</span><strong>manually send</strong><span>&nbsp;assets from your wallet, to the&nbsp;</span><strong>Deposit Address</strong><span>&nbsp;generated by Bridge.</span></p>
+        <div className='rounded-md w-full flex flex-col items-left justify-center space-y-4 text-left text-foreground text-foreground-new'>
+            <p className='text-foreground text-foreground-new'><span>To complete the swap,&nbsp;</span><strong>manually send</strong><span>&nbsp;assets from your wallet, to the&nbsp;</span><strong>Deposit Address</strong><span>&nbsp;generated by Bridge.</span></p>
             <div className='space-y-3'>
-                <p className='text-base font-semibold text-primary-text'>🪜 Steps</p>
-                <div className='space-y-5 text-base text-secondary-text'>
+                <p className='text-base font-semibold text-muted text-muted-primary-text'>🪜 Steps</p>
+                <div className='space-y-5 text-base text-foreground text-foreground-new'>
                     <div className='space-y-3'>
                         <p><span className='text-primary'>.01</span><span>&nbsp;Copy the Deposit Address, or scan the QR code</span></p>
-                        <div className='border-2 border-secondary-400 rounded-xl p-2 bg-secondary-500'>
+                        <div className='border-2 border-secondary-400 rounded-xl p-2 bg-level-4 darker-hover-class'>
                             <Image src={firstGuidePic} className='w-full rounded-xl' alt={''} />
                         </div>
                     </div>
                     <div className='space-y-3'>
-                        <p><span className='text-primary'>.02</span><span>&nbsp;Send&nbsp;</span><span className='text-primary-text'>{swap?.destination_network_asset}</span><span>&nbsp;to that address from your&nbsp;</span><span>{swap?.source_exchange ? 'exchange account' : 'wallet'}</span></p>
-                        <div className='border-2 border-secondary-400 rounded-xl p-2 bg-secondary-500'>
+                        <p><span className='text-primary'>.02</span><span>&nbsp;Send&nbsp;</span><span className='text-muted text-muted-primary-text'>{swap?.destination_network_asset}</span><span>&nbsp;to that address from your&nbsp;</span><span>{swap?.source_exchange ? 'exchange account' : 'wallet'}</span></p>
+                        <div className='border-2 border-secondary-400 rounded-xl p-2 bg-level-4 darker-hover-class'>
                             <Image src={swap?.source_exchange ? secondExchangeGuideGuidePic : secondNetworkGuidePic} className='w-full rounded-xl' alt={''} />
                         </div>
                     </div>
                     {swap?.source_exchange && <div className='space-y-3'>
                         <p><span className='text-primary'>.03</span><span>&nbsp;Make sure to send via one of the supported networks</span></p>
-                        <div className='border-2 border-secondary-400 rounded-xl p-2 bg-secondary-500'>
+                        <div className='border-2 border-secondary-400 rounded-xl p-2 bg-level-4 darker-hover-class'>
                             <Image src={thirdGuidePic} className='w-full rounded-xl' alt={''} />
                         </div>
                     </div>}
diff --git a/app/components/SwapHistory/SwapDetailsComponent.tsx b/app/components/SwapHistory/SwapDetailsComponent.tsx
index 1a8cf0ba..e3e14105 100644
--- a/app/components/SwapHistory/SwapDetailsComponent.tsx
+++ b/app/components/SwapHistory/SwapDetailsComponent.tsx
@@ -72,10 +72,10 @@ const SwapDetails: FC<Props> = ({ id }) => {
         <>
             <div className="w-full grid grid-flow-row animate-fade-in">
                 <div className="rounded-md w-full grid grid-flow-row">
-                    <div className="items-center space-y-1.5 block text-base font-lighter leading-6 text-secondary-text">
+                    <div className="items-center space-y-1.5 block text-base font-lighter leading-6 text-foreground text-foreground-new">
                         <div className="flex justify-between p items-baseline">
                             <span className="text-left">Id </span>
-                            <span className="text-primary-text">
+                            <span className="text-muted text-muted-primary-text">
                                 <div className='inline-flex items-center'>
                                     {
                                         swap && <CopyButton toCopy={swap?.id} iconClassName="text-gray-500">
@@ -88,14 +88,14 @@ const SwapDetails: FC<Props> = ({ id }) => {
                         <hr className='horizontal-gradient' />
                         <div className="flex justify-between p items-baseline">
                             <span className="text-left">Status </span>
-                            <span className="text-primary-text">
+                            <span className="text-muted text-muted-primary-text">
                                 {swap && <StatusIcon swap={swap} />}
                             </span>
                         </div>
                         <hr className='horizontal-gradient' />
                         <div className="flex justify-between items-baseline">
                             <span className="text-left">Date </span>
-                            {swap && <span className='text-primary-text font-normal'>{(new Date(swap.created_date)).toLocaleString()}</span>}
+                            {swap && <span className='text-muted text-muted-primary-text font-normal'>{(new Date(swap.created_date)).toLocaleString()}</span>}
                         </div>
                         <hr className='horizontal-gradient' />
                         <div className="flex justify-between items-baseline">
@@ -115,7 +115,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                         }
 
                                     </div>
-                                    <div className="mx-1 text-primary-text">{source?.display_name}</div>
+                                    <div className="mx-1 text-muted text-muted-primary-text">{source?.display_name}</div>
                                 </div>
                             }
                         </div>
@@ -136,14 +136,14 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                             />
                                         }
                                     </div>
-                                    <div className="mx-1 text-primary-text">{destination?.display_name}</div>
+                                    <div className="mx-1 text-muted text-muted-primary-text">{destination?.display_name}</div>
                                 </div>
                             }
                         </div>
                         <hr className='horizontal-gradient' />
                         <div className="flex justify-between items-baseline">
                             <span className="text-left">Address </span>
-                            <span className="text-primary-text">
+                            <span className="text-muted text-muted-primary-text">
                                 <div className='inline-flex items-center'>
                                     {swap && <CopyButton toCopy={swap.destination_address} iconClassName="text-gray-500">
                                         {swap?.destination_address.slice(0, 8) + "..." + swap?.destination_address.slice(swap?.destination_address.length - 5, swap?.destination_address.length)}
@@ -156,7 +156,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                 <hr className='horizontal-gradient' />
                                 <div className="flex justify-between items-baseline">
                                     <span className="text-left">Source Tx </span>
-                                    <span className="text-primary-text">
+                                    <span className="text-muted text-muted-primary-text">
                                         <div className='inline-flex items-center'>
                                             <div className='underline hover:no-underline flex items-center space-x-1'>
                                                 <a target={"_blank"} href={input_tx_id?.replace("{0}", swapInputTransaction.transaction_id)}>{shortenAddress(swapInputTransaction.transaction_id)}</a>
@@ -172,7 +172,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                 <hr className='horizontal-gradient' />
                                 <div className="flex justify-between items-baseline">
                                     <span className="text-left">Destination Tx </span>
-                                    <span className="text-primary-text">
+                                    <span className="text-muted text-muted-primary-text">
                                         <div className='inline-flex items-center'>
                                             <div className="">
                                                 {(swapOutputTransaction?.transaction_id && swap?.destination_exchange === KnownInternalNames.Exchanges.Coinbase && (isGuid(swapOutputTransaction?.transaction_id))) ?
@@ -192,7 +192,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                         <hr className='horizontal-gradient' />
                         <div className="flex justify-between items-baseline">
                             <span className="text-left">Requested amount</span>
-                            <span className='text-primary-text font-normal flex'>
+                            <span className='text-muted text-muted-primary-text font-normal flex'>
                                 {swap?.requested_amount} {swap?.destination_network_asset}
                             </span>
                         </div>
@@ -202,7 +202,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                 <hr className='horizontal-gradient' />
                                 <div className="flex justify-between items-baseline">
                                     <span className="text-left">Transfered amount</span>
-                                    <span className='text-primary-text font-normal flex'>
+                                    <span className='text-muted text-muted-primary-text font-normal flex'>
                                         {swapInputTransaction?.amount} {swap?.destination_network_asset}
                                     </span>
                                 </div>
@@ -214,7 +214,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                 <hr className='horizontal-gradient' />
                                 <div className="flex justify-between items-baseline">
                                     <span className="text-left">Bridge Fee </span>
-                                    <span className='text-primary-text font-normal'>{swap?.fee} {currency?.asset}</span>
+                                    <span className='text-muted text-muted-primary-text font-normal'>{swap?.fee} {currency?.asset}</span>
                                 </div>
                             </>
                         }
@@ -224,7 +224,7 @@ const SwapDetails: FC<Props> = ({ id }) => {
                                 <hr className='horizontal-gradient' />
                                 <div className="flex justify-between items-baseline">
                                     <span className="text-left">Amount You Received</span>
-                                    <span className='text-primary-text font-normal flex'>
+                                    <span className='text-muted text-muted-primary-text font-normal flex'>
                                         {swapOutputTransaction?.amount} {currency?.asset}
                                     </span>
                                 </div>
diff --git a/app/components/SwapHistory/index.tsx b/app/components/SwapHistory/index.tsx
index 6fdf7516..358aa283 100644
--- a/app/components/SwapHistory/index.tsx
+++ b/app/components/SwapHistory/index.tsx
@@ -140,7 +140,7 @@ function TransactionsHistory() {
   }
 
   return (
-    <div className='bg-secondary-900 sm:shadow-card rounded-lg mb-6 w-full text-primary-text overflow-hidden relative min-h-[620px]'>
+    <div className='bg-level-1 darkest-class sm:shadow-card rounded-lg mb-6 w-full text-muted text-muted-primary-text overflow-hidden relative min-h-[620px]'>
       <HeaderWithMenu goBack={goBack} />
       {
         page == 0 && loading ?
@@ -148,7 +148,7 @@ function TransactionsHistory() {
           : <>
             {
               Number(swaps?.length) > 0 ?
-                <div className="w-full flex flex-col justify-between h-full px-6 space-y-5 text-secondary-text">
+                <div className="w-full flex flex-col justify-between h-full px-6 space-y-5 text-foreground text-foreground-new">
                   <div className="mt-4">
                     {showToggleButton && <div className="flex justify-end mb-2">
                       <div className='flex space-x-2'>
@@ -160,7 +160,7 @@ function TransactionsHistory() {
                     </div>}
                     <div className="max-h-[450px] styled-scroll overflow-y-auto ">
                       <table className="w-full divide-y divide-secondary-500">
-                        <thead className="text-secondary-text">
+                        <thead className="text-foreground text-foreground-new">
                           <tr>
                             <th scope="col" className="text-left text-sm font-semibold">
                               <div className="block">
@@ -201,10 +201,10 @@ function TransactionsHistory() {
                               <td
                                 className={classNames(
                                   index === 0 ? '' : 'border-t border-secondary-500',
-                                  'relative text-sm text-primary-text table-cell'
+                                  'relative text-sm text-muted text-muted-primary-text table-cell'
                                 )}
                               >
-                                <div className="text-primary-text flex items-center">
+                                <div className="text-muted text-muted-primary-text flex items-center">
                                   <div className="flex-shrink-0 h-5 w-5 relative">
                                     {source &&
                                       <Image
@@ -229,7 +229,7 @@ function TransactionsHistory() {
                                     }
                                   </div>
                                 </div>
-                                {index !== 0 ? <div className="absolute right-0 left-6 -top-px h-px bg-secondary-500" /> : null}
+                                {index !== 0 ? <div className="absolute right-0 left-6 -top-px h-px bg-level-4 darker-hover-class" /> : null}
 
                               </td>
                               <td className={classNames(
@@ -243,7 +243,7 @@ function TransactionsHistory() {
                               <td
                                 className={classNames(
                                   index === 0 ? '' : 'border-t border-secondary-500',
-                                  'px-3 py-3.5 text-sm text-primary-text table-cell'
+                                  'px-3 py-3.5 text-sm text-muted text-muted-primary-text table-cell'
                                 )}
                               >
                                 <div className="flex justify-between items-center cursor-pointer" onClick={(e) => { handleopenSwapDetails(swap); e.preventDefault() }}>
@@ -269,7 +269,7 @@ function TransactionsHistory() {
                       </table>
                     </div>
                   </div>
-                  <div className="text-primary-text text-sm flex justify-center">
+                  <div className="text-muted text-muted-primary-text text-sm flex justify-center">
                     {
                       !isLastPage &&
                       <button
@@ -296,8 +296,8 @@ function TransactionsHistory() {
                       }
                       {
                         selectedSwap &&
-                        <div className="text-primary-text text-sm mt-6 space-y-3">
-                          <div className="flex flex-row text-primary-text text-base space-x-2">
+                        <div className="text-muted text-muted-primary-text text-sm mt-6 space-y-3">
+                          <div className="flex flex-row text-muted text-muted-primary-text text-base space-x-2">
                             <SubmitButton
                               text_align="center"
                               onClick={() => router.push({
@@ -323,8 +323,8 @@ function TransactionsHistory() {
                 <div className="absolute top-1/4 right-0 text-center w-full">
                   <Scroll className='h-40 w-40 text-secondary-700 mx-auto' />
                   <p className="my-2 text-xl">It&apos;s empty here</p>
-                  <p className="px-14 text-primary-text">You can find all your transactions by searching with address in</p>
-                  <Link target="_blank" href={AppSettings.ExplorerURl} className="underline hover:no-underline cursor-pointer hover:text-secondary-text text-primary-text font-light">
+                  <p className="px-14 text-muted text-muted-primary-text">You can find all your transactions by searching with address in</p>
+                  <Link target="_blank" href={AppSettings.ExplorerURl} className="underline hover:no-underline cursor-pointer hover:text-foreground text-foreground-new text-muted text-muted-primary-text font-light">
                     <span>Bridge Explorer</span>
                   </Link>
                 </div>
diff --git a/app/components/Tabs/Header.tsx b/app/components/Tabs/Header.tsx
index 7d011d77..3f830a45 100644
--- a/app/components/Tabs/Header.tsx
+++ b/app/components/Tabs/Header.tsx
@@ -15,8 +15,8 @@ const Header: FC<HeaderProps> = ({ tab, onCLick, activeTabId }) => {
         type="button"
         key={tab.id}
         onClick={() => onCLick(tab.id)}
-        className={`${activeTabId === tab.id ? "text-secondary-text" : "text-secondary-text/50 hover:text-secondary-text"
-            } grow rounded-md text-left relative py-3 px-5 text-sm transition bg-secondary-800`}
+        className={`${activeTabId === tab.id ? "text-foreground text-foreground-new" : "text-foreground text-foreground-new/50 hover:text-foreground text-foreground-new"
+            } grow rounded-md text-left relative py-3 px-5 text-sm transition bg-level-2 darker-class`}
         style={{
             WebkitTapHighlightColor: "transparent",
         }}
@@ -26,7 +26,7 @@ const Header: FC<HeaderProps> = ({ tab, onCLick, activeTabId }) => {
             {activeTabId === tab.id && (
                 <motion.span
                     layoutId="bubble"
-                    className="absolute inset-0 z-29 bg-secondary-700/40  border-2 border-secondary-600"
+                    className="absolute inset-0 z-29 bg-level-3 darker-2-class/40  border-2 border-secondary-600"
                     style={{ borderRadius: '6px' }}
                     transition={{ type: "spring", bounce: 0.1, duration: 0.3 }}
                 />
diff --git a/app/components/Tooltips/ClickTooltip.tsx b/app/components/Tooltips/ClickTooltip.tsx
index 5ee22e22..8627a71d 100644
--- a/app/components/Tooltips/ClickTooltip.tsx
+++ b/app/components/Tooltips/ClickTooltip.tsx
@@ -12,7 +12,7 @@ const ClickTooltip: FC<Props> = (({ children, text, moreClassNames }) => {
     return (
         <Popover>
             <PopoverTrigger>
-                <Info className="h-4 hover:text-primary-text" aria-hidden="true" strokeWidth={2.5} />
+                <Info className="h-4 hover:text-muted text-muted-primary-text" aria-hidden="true" strokeWidth={2.5} />
             </PopoverTrigger>
             <PopoverContent className='text-sm'>{text}</PopoverContent>
         </Popover>
diff --git a/app/components/VerifyEmailCode.tsx b/app/components/VerifyEmailCode.tsx
index b694f556..bc1e8038 100644
--- a/app/components/VerifyEmailCode.tsx
+++ b/app/components/VerifyEmailCode.tsx
@@ -109,21 +109,21 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
             }}
         >
             {({ isValid, isSubmitting, errors, handleChange }) => (
-                <Form className='h-full w-full text-secondary-text'>
+                <Form className='h-full w-full text-foreground text-foreground-new'>
                     {
                         disclosureLogin ?
                             <div className='mt-2'>
                                 <div className="w-full text-left text-base font-light">
                                     <div className='flex items-center justify-start'>
-                                        <p className='text-xl text-primary-text'>
+                                        <p className='text-xl text-muted text-muted-primary-text'>
                                             Sign in with email
                                         </p>
                                     </div>
                                     <p className='mt-2 text-left'>
-                                        <span>Please enter the 6 digit code sent to </span><span className='font-medium text-primary-text'>{tempEmail}</span>
+                                        <span>Please enter the 6 digit code sent to </span><span className='font-medium text-muted text-muted-primary-text'>{tempEmail}</span>
                                     </p>
                                 </div>
-                                <div className="text-sm text-secondary-text font-normal mt-5">
+                                <div className="text-sm text-foreground text-foreground-new font-normal mt-5">
                                     <div className='grid gap-4 grid-cols-5  items-center'>
                                         <div className="relative rounded-md shadow-sm col-span-3">
                                             <NumericInput
@@ -134,8 +134,8 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
                                                 onChange={e => {
                                                     /^[0-9]*$/.test(e.target.value) && handleChange(e)
                                                 }}
-                                                className="leading-none h-12 text-2xl pl-5 text-primary-text  focus:ring-primary text-center focus:border-primary border-secondary-500 block
-                                    placeholder:text-2xl placeholder:text-center tracking-widest placeholder:font-normal placeholder:opacity-50 bg-secondary-700  w-full font-semibold rounded-md placeholder-primary-text"
+                                                className="leading-none h-12 text-2xl pl-5 text-muted text-muted-primary-text  focus:ring-primary text-center focus:border-primary border-secondary-500 block
+                                    placeholder:text-2xl placeholder:text-center tracking-widest placeholder:font-normal placeholder:opacity-50 bg-level-3 darker-2-class  w-full font-semibold rounded-md placeholder-primary-text"
                                             />
                                         </div>
                                         <div className='col-start-4 col-span-2'>
@@ -171,7 +171,7 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
                                 <Widget.Content center={true}>
                                     <MailOpen className='w-16 h-16 mt-auto text-primary self-center' />
                                     <div className='text-center mt-5'>
-                                        <p className='text-lg'><span>Please enter the 6 digit code sent to&nbsp;</span><span className='font-medium text-primary-text'>{tempEmail}</span></p>
+                                        <p className='text-lg'><span>Please enter the 6 digit code sent to&nbsp;</span><span className='font-medium text-muted text-muted-primary-text'>{tempEmail}</span></p>
                                     </div>
                                     <div className="relative rounded-md shadow-sm mt-5">
                                         <NumericInput
@@ -182,8 +182,8 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
                                             onChange={e => {
                                                 /^[0-9]*$/.test(e.target.value) && handleChange(e)
                                             }}
-                                            className="leading-none h-12 text-2xl pl-5 text-primary-text  focus:ring-primary text-center focus:border-primary border-secondary-500 block
-                                    placeholder:text-2xl placeholder:text-center tracking-widest placeholder:font-normal placeholder:opacity-50 bg-secondary-700  w-full font-semibold rounded-md placeholder-primary-text"
+                                            className="leading-none h-12 text-2xl pl-5 text-muted text-muted-primary-text  focus:ring-primary text-center focus:border-primary border-secondary-500 block
+                                    placeholder:text-2xl placeholder:text-center tracking-widest placeholder:font-normal placeholder:opacity-50 bg-level-3 darker-2-class  w-full font-semibold rounded-md placeholder-primary-text"
                                         />
                                         <span className="flex text-sm leading-6 items-center mt-1.5">
                                             <TimerWithContext isStarted={started} seconds={timerCountdown} waitingComponent={(remainingTime) => (
@@ -202,7 +202,7 @@ const VerifyEmailCode: FC<VerifyEmailCodeProps> = ({ onSuccessfullVerify, disclo
                                     </div>
                                 </Widget.Content>
                                 <Widget.Footer>
-                                    <p className='text-secondary-text text-xs sm:text-sm mb-3 md:mb-5'>
+                                    <p className='text-foreground text-foreground-new text-xs sm:text-sm mb-3 md:mb-5'>
                                         <span>By clicking Confirm you agree to Bridge&apos;s&nbsp;</span><span
                                             onClick={handleOpenTerms}
                                             className='decoration decoration-primary underline-offset-1 underline hover:no-underline cursor-pointer'> Terms of Service
diff --git a/app/components/WarningMessage.tsx b/app/components/WarningMessage.tsx
index 2785a1e2..e984098d 100644
--- a/app/components/WarningMessage.tsx
+++ b/app/components/WarningMessage.tsx
@@ -15,10 +15,10 @@ function constructIcons(messageType: messageType) {
 
     switch (messageType) {
         case 'warning':
-            iconStyle = <AlertOctagon className="sm:h-5 h-4 text-primary-text inline sm:block" />;
+            iconStyle = <AlertOctagon className="sm:h-5 h-4 text-muted text-muted-primary-text inline sm:block" />;
             break;
         case 'informing':
-            iconStyle = <Scroll className="sm:h-5 h-4 text-primary-text inline sm:block" />;
+            iconStyle = <Scroll className="sm:h-5 h-4 text-muted text-muted-primary-text inline sm:block" />;
             break;
     }
     return iconStyle
@@ -26,13 +26,13 @@ function constructIcons(messageType: messageType) {
 
 const WarningMessage: FC<Props> = (({ children, className, messageType = 'warning' }) => {
     return (
-        <div className={`flex-col w-full rounded-md bg-secondary-700 border border-secondary-500 shadow-lg px-3.5 py-3 ${className}`}>
+        <div className={`flex-col w-full rounded-md bg-level-3 darker-2-class border border-secondary-500 shadow-lg px-3.5 py-3 ${className}`}>
             <div className='flex items-center'>
-                <div className={`mr-2 hidden sm:inline p-2 rounded-lg bg-secondary-400 text-primary-text`}>
+                <div className={`mr-2 hidden sm:inline p-2 rounded-lg bg-secondary-400 text-muted text-muted-primary-text`}>
                     {constructIcons(messageType)}
                 </div>
-                <div className={`text-xs sm:text-sm leading-5 ${messageType == 'warning' ? 'font-semibold' : " text-primary-text font-normal"}`}>
-                    <span className={`sm:hidden mr-1 pb-1.5 pt-1 px-1 rounded-md bg-secondary-400 text-primary-text"}`}>
+                <div className={`text-xs sm:text-sm leading-5 ${messageType == 'warning' ? 'font-semibold' : " text-muted text-muted-primary-text font-normal"}`}>
+                    <span className={`sm:hidden mr-1 pb-1.5 pt-1 px-1 rounded-md bg-secondary-400 text-muted text-muted-primary-text"}`}>
                         {constructIcons(messageType)}
                     </span>
                     <span>{children}</span>
diff --git a/app/components/Widget/Footer.tsx b/app/components/Widget/Footer.tsx
index 2e4de55a..19a355a0 100644
--- a/app/components/Widget/Footer.tsx
+++ b/app/components/Widget/Footer.tsx
@@ -48,12 +48,12 @@ const Footer = ({ children, hidden, sticky = true }: FooterProps) => {
                     }}
                     custom={{ direction: "back" ? -1 : 1, width: 100 }}
                     variants={variants}
-                    className={`text-primary-text text-base mt-3        
+                    className={`text-muted text-muted-primary-text text-base mt-3        
                         max-sm:fixed
                         max-sm:inset-x-0
                         max-sm:bottom-0 
                         max-sm:z-30
-                        max-sm:bg-secondary-900 
+                        max-sm:bg-level-1 darkest-class 
                         max-sm:shadow-widget-footer 
                         max-sm:p-4 
                         max-sm:px-6 
@@ -62,7 +62,7 @@ const Footer = ({ children, hidden, sticky = true }: FooterProps) => {
                 </motion.div>
                 
                 <div style={{ height: `${height}px` }}
-                    className={`text-primary-text text-base mt-3        
+                    className={`text-muted text-muted-primary-text text-base mt-3        
                              max-sm:inset-x-0
                              max-sm:bottom-0 
                              max-sm:p-4 max-sm:w-full invisible sm:hidden`}>
diff --git a/app/components/Wizard/Wizard.tsx b/app/components/Wizard/Wizard.tsx
index fcd4011c..41d0f531 100644
--- a/app/components/Wizard/Wizard.tsx
+++ b/app/components/Wizard/Wizard.tsx
@@ -24,9 +24,9 @@ const Wizard: FC<PropsWithChildren> = ({ children }) => {
 
    const width = positionPercent || 0
    return <>
-      <div className={noToolBar ? `` : ` bg-secondary-900 md:shadow-card rounded-lg w-full sm:overflow-hidden relative`}>
+      <div className={noToolBar ? `` : ` bg-level-1 darkest-class md:shadow-card rounded-lg w-full sm:overflow-hidden relative`}>
          <div className="relative">
-            {!noToolBar && <div className="overflow-hidden h-1 flex rounded-t-lg bg-secondary-500">
+            {!noToolBar && <div className="overflow-hidden h-1 flex rounded-t-lg bg-level-4 darker-hover-class">
                <div style={{ width: `${width}%`, transition: 'width 1s' }} className="shadow-none flex flex-col whitespace-nowrap justify-center bg-primary"></div>
             </div>}
          </div>
diff --git a/app/components/backgroundField.tsx b/app/components/backgroundField.tsx
index 6eff9510..d2f3d309 100644
--- a/app/components/backgroundField.tsx
+++ b/app/components/backgroundField.tsx
@@ -27,9 +27,16 @@ const BackgroundField: FC<Props> = (({ Copiable, toCopy, header, children, QRabl
                     <div className="animate-pulse w-full h-full mx-auto rotate-180 opacity-30 blur-lg filter" style={{ background: 'linear-gradient(90deg, #E42575 -0.55%, #A6335E 22.86%, #E42575 48.36%, #ED6EA3 73.33%, #E42575 99.34%)' }}></div>
                 </div>
             }
-            <div className={`w-full relative px-3 py-3 shadow-sm ${withoutBorder ? 'border-secondary-700' : 'border-secondary-500 rounded-md border bg-secondary-700'}`}>
+            <div className={
+              'w-full relative px-3 py-3 shadow-sm ' + 
+                withoutBorder ? 
+                  'border-secondary-700' 
+                  : 
+                  'border-secondary-500 rounded-md border bg-level-3 darker-2-class'
+              }
+            >
                 {
-                    header && <p className="block font-semibold text-sm text-secondary-text">
+                    header && <p className="block font-semibold text-sm text-foreground text-foreground-new">
                         {header}
                     </p>
                 }
@@ -38,15 +45,15 @@ const BackgroundField: FC<Props> = (({ Copiable, toCopy, header, children, QRabl
                     <div className="space-x-2 flex self-start">
                         {
                             QRable && toCopy &&
-                            <QRCodeModal qrUrl={toCopy?.toLocaleString()} iconSize={isMobile ? 20 : 16} className=' text-secondary-text bg-secondary-text/10 p-1.5 hover:text-primary-text rounded' />
+                            <QRCodeModal qrUrl={toCopy?.toLocaleString()} iconSize={isMobile ? 20 : 16} className=' text-foreground text-foreground-new bg-secondary-text/10 p-1.5 hover:text-muted text-muted-primary-text rounded' />
                         }
                         {
                             Copiable && toCopy &&
-                            <CopyButton iconSize={isMobile ? 20 : 16} toCopy={toCopy} className=' text-secondary-text bg-secondary-text/10 p-1.5 hover:text-primary-text rounded' />
+                            <CopyButton iconSize={isMobile ? 20 : 16} toCopy={toCopy} className=' text-foreground text-foreground-new bg-secondary-text/10 p-1.5 hover:text-muted text-muted-primary-text rounded' />
                         }
                         {
                             Explorable && toExplore &&
-                            <ExploreButton href={toExplore} target="_blank" iconSize={isMobile ? 20 : 16} className=' text-secondary-text bg-secondary-text/10 p-1.5 hover:text-primary-text rounded' />
+                            <ExploreButton href={toExplore} target="_blank" iconSize={isMobile ? 20 : 16} className=' text-foreground text-foreground-new bg-secondary-text/10 p-1.5 hover:text-muted text-muted-primary-text rounded' />
                         }
                     </div>
                 </div>
diff --git a/app/components/banner.tsx b/app/components/banner.tsx
index 92c7f39f..2959d00d 100644
--- a/app/components/banner.tsx
+++ b/app/components/banner.tsx
@@ -27,7 +27,7 @@ const Banner: FC<BannerProps> = ({ localStorageId, desktopMessage, mobileMessage
                         <span className="flex p-1 text-lg rounded-lg bg-primary-900">
                             🥳
                         </span>
-                        <p className="ml-3 font-medium text-primary-text truncate">
+                        <p className="ml-3 font-medium text-muted text-muted-primary-text truncate">
                             <span className="md:hidden">{mobileMessage}</span>
                             <span className="hidden md:inline">{desktopMessage}</span>
                         </p>
@@ -39,7 +39,7 @@ const Banner: FC<BannerProps> = ({ localStorageId, desktopMessage, mobileMessage
                             className="-mr-1 flex p-2 rounded-md hover:bg-primary-400 focus:outline-none focus:ring-2 focus:ring-white"
                         >
                             <span className="sr-only">Dismiss</span>
-                            <X className="h-4 w-5 text-primary-text" aria-hidden="true" />
+                            <X className="h-4 w-5 text-muted text-muted-primary-text" aria-hidden="true" />
                         </button>
                     </div>
                 </div>
diff --git a/app/components/buttons/connectButton.tsx b/app/components/buttons/connectButton.tsx
index dbd52b54..5c9eb27d 100644
--- a/app/components/buttons/connectButton.tsx
+++ b/app/components/buttons/connectButton.tsx
@@ -69,7 +69,7 @@ const ConnectButton = ({
     return isMobile ? (
         <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger aria-label="Connect wallet">{children}</DialogTrigger>
-            <DialogContent className="sm:max-w-[425px] text-primary-text">
+            <DialogContent className="sm:max-w-[425px] text-muted text-muted-primary-text">
                 <DialogHeader>
                     <DialogTitle className="text-center">
                         Link a new wallet
@@ -80,7 +80,7 @@ const ConnectButton = ({
                         <button
                             type="button"
                             key={index}
-                            className="w-full h-fit bg-secondary-700 border border-secondary-500 rounded py-2 px-3"
+                            className="w-full h-fit bg-level-3 darker-2-class border border-secondary-500 rounded py-2 px-3"
                             onClick={() => {
                                 connectWallet(connector.id);
                                 setOpen(false);
@@ -92,7 +92,7 @@ const ConnectButton = ({
                                     <div className="inline-flex items-center relative">
                                         <ResolveConnectorIcon
                                             connector={connector.id}
-                                            className="w-7 h-7 p-0.5 rounded-full bg-secondary-800 border border-secondary-400"
+                                            className="w-7 h-7 p-0.5 rounded-full bg-level-2 darker-class border border-secondary-400"
                                         />
                                     </div>
                                 )}
@@ -117,7 +117,7 @@ const ConnectButton = ({
                     <button
                         type="button"
                         key={index}
-                        className="w-full h-full hover:bg-secondary-600 rounded py-2 px-3"
+                        className="w-full h-full hover:bg-level-4 darker-3-class rounded py-2 px-3"
                         onClick={() => {
                             connectWallet(connector.id);
                             setOpen(false);
@@ -129,7 +129,7 @@ const ConnectButton = ({
                                 <div className="inline-flex items-center relative">
                                     <ResolveConnectorIcon
                                         connector={connector.id}
-                                        className="w-7 h-7 p-0.5 rounded-full bg-secondary-800 border border-secondary-400"
+                                        className="w-7 h-7 p-0.5 rounded-full bg-level-2 darker-class border border-secondary-400"
                                     />
                                 </div>
                             )}
diff --git a/app/components/buttons/iconButton.tsx b/app/components/buttons/iconButton.tsx
index 97ee4779..7412a9e3 100644
--- a/app/components/buttons/iconButton.tsx
+++ b/app/components/buttons/iconButton.tsx
@@ -9,7 +9,7 @@ const IconButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, IconButtonP
     const theirProps = props as object;
 
     return (
-        <button {...theirProps} type="button" className={classNames("-mx-2 py-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-none inline-flex rounded-lg items-center", className)}>
+        <button {...theirProps} type="button" className={classNames("-mx-2 py-1.5 justify-self-start text-foreground text-foreground-new hover:bg-level-4 darker-hover-class hover:text-muted text-muted-primary-text focus:outline-none inline-flex rounded-lg items-center", className)}>
             <div className='mx-2'>
                 <div>
                     {icon}
diff --git a/app/components/buttons/secondaryButton.tsx b/app/components/buttons/secondaryButton.tsx
index 716c53de..09dc031c 100644
--- a/app/components/buttons/secondaryButton.tsx
+++ b/app/components/buttons/secondaryButton.tsx
@@ -1,47 +1,53 @@
-import { FC, MouseEventHandler } from "react"
+import type { FC, MouseEventHandler } from 'react'
 
 type buttonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
-type SecondaryButtonProps = {
-    size?: buttonSize
-    onClick?: MouseEventHandler<HTMLButtonElement>
-    className?: string,
-    disabled?: boolean
-    children?: React.ReactNode
-}
-
-const SecondaryButton: FC<SecondaryButtonProps> = ({ size = 'md', onClick, children, className, disabled }) => {
+const SecondaryButton: FC<{
+  size?: buttonSize
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  className?: string
+  disabled?: boolean
+  children?: React.ReactNode
+}> = ({ 
+  size = 'md', 
+  onClick, 
+  children, 
+  className, 
+  disabled 
+}) => {
 
-    let defaultStyle = 'rounded-md duration-200 break-keep transition bg-secondary-500 hover:bg-secondary-400 border border-secondary-400 hover:border-secondary-200 font-semibold text-primary-text shadow-sm cursor-pointer ' + className
+  let defaultStyle = 'rounded-md duration-200 break-keep transition bg-level-2 hover:bg-level-3' +
+    ' font-semibold text-foreground shadow-sm cursor-pointer ' + 
+      className
 
-    switch (size) {
-        case 'xs':
-            defaultStyle += " px-2 py-1 text-xs";
-            break;
-        case 'sm':
-            defaultStyle += " px-2 py-1 text-sm";
-            break;
-        case 'md':
-            defaultStyle += " px-2.5 py-1.5 text-sm";
-            break;
-        case 'lg':
-            defaultStyle += " px-3 py-2 text-sm";
-            break;
-        case 'xl':
-            defaultStyle += " px-3.5 py-2.5 text-sm";
-            break;
-    }
+  switch (size) {
+    case 'xs':
+      defaultStyle += ' px-2 py-1 text-xs'
+      break
+    case 'sm':
+      defaultStyle += ' px-2 py-1 text-sm'
+      break
+    case 'md':
+      defaultStyle += ' px-2.5 py-1.5 text-sm'
+      break
+    case 'lg':
+      defaultStyle += ' px-3 py-2 text-sm'
+      break
+    case 'xl':
+      defaultStyle += ' px-3.5 py-2.5 text-sm'
+      break
+  }
 
-    return (
-        <button
-            type="button"
-            className={defaultStyle}
-            onClick={onClick}
-            disabled={disabled}
-        >
-            {children}
-        </button>
-    )
+  return (
+    <button
+      type='button'
+      className={defaultStyle}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  )
 }
 
 export default SecondaryButton
diff --git a/app/components/buttons/submitButton.tsx b/app/components/buttons/submitButton.tsx
index fa36d102..e7ea8089 100644
--- a/app/components/buttons/submitButton.tsx
+++ b/app/components/buttons/submitButton.tsx
@@ -21,8 +21,10 @@ export class SubmitButtonProps {
 }
 
 function constructClassNames(size: buttonSize, buttonStyle: buttonStyle) {
-    let defaultStyle = ' border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out'
-    defaultStyle += buttonStyle == 'filled' ? " bg-primary text-primary-buttonTextColor" : " text-primary";
+    //let defaultStyle = ' border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out'
+    let defaultStyle  = "bg-primary-lux text-primary-fg hover:bg-primary-hover disable:hover:bg-primary-lux whitespace-nowrap " + 
+    'disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform transition duration-200 ease-in-out'
+    //defaultStyle += (buttonStyle == 'filled') ? " bg-primary text-primary-buttonTextColor" : " text-primary"
 
     switch (size) {
         case 'large':
@@ -39,24 +41,35 @@ function constructClassNames(size: buttonSize, buttonStyle: buttonStyle) {
     return defaultStyle;
 }
 
-const SubmitButton: FC<SubmitButtonProps> = ({ isDisabled, isSubmitting, icon, children, type, onClick, buttonStyle = 'filled', size = 'medium', text_align = 'center', button_align = 'left', className }) => {
-    return (
-        <button
-            disabled={isDisabled || isSubmitting}
-            type={type}
-            onClick={onClick}
-            className={`${constructClassNames(size, buttonStyle)} ${className}`}
-        >
-            <span className={`${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`}>
-                {(!isDisabled && !isSubmitting) && icon}
-                {isSubmitting ?
-                    <SpinIcon className="animate-spin h-5 w-5" />
-                    : null}
-            </span>
-            <span className={`grow ${text_align === 'left' ? 'text-left' : 'text-center'}`}>{children}</span>
-        </button>
-    );
-}
+const SubmitButton: FC<SubmitButtonProps> = ({ 
+  isDisabled, 
+  isSubmitting, 
+  icon, 
+  children, 
+  type, 
+  onClick, 
+  buttonStyle = 'filled', 
+  size = 'medium', 
+  text_align = 'center', 
+  button_align = 'left', 
+  className 
+}) => (
+  <button
+      disabled={isDisabled || isSubmitting}
+      type={type}
+      onClick={onClick}
+      className={`${constructClassNames(size, buttonStyle)} ${className}`}
+  >
+    <span className={`${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`}>
+        {(!isDisabled && !isSubmitting) && icon}
+        {isSubmitting ?
+            <SpinIcon className="animate-spin h-5 w-5" />
+            : null}
+    </span>
+    <span className={`grow ${text_align === 'left' ? 'text-left' : 'text-center'}`}>{children}</span>
+  </button>
+)
+
 
 
 type DoubleLineTextProps = {
diff --git a/app/components/buttons/toggleButton.tsx b/app/components/buttons/toggleButton.tsx
index 94ed0bdb..5938346e 100644
--- a/app/components/buttons/toggleButton.tsx
+++ b/app/components/buttons/toggleButton.tsx
@@ -15,7 +15,7 @@ const ToggleButton: FC<ToggleButtonProps> = ({ name, onChange, value }) => {
             checked={value}
             onChange={onChange}
             className={classNames(
-                value ? 'bg-primary' : 'bg-secondary-500',
+                value ? 'bg-primary' : 'bg-level-4 darker-hover-class',
                 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none'
             )}
         >
@@ -33,7 +33,7 @@ const ToggleButton: FC<ToggleButtonProps> = ({ name, onChange, value }) => {
                     )}
                     aria-hidden="true"
                 >
-                    <svg className="h-3 w-3 text-primary-text" fill="none" viewBox="0 0 12 12">
+                    <svg className="h-3 w-3 text-muted text-muted-primary-text" fill="none" viewBox="0 0 12 12">
                         <path
                             d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
                             stroke="currentColor"
diff --git a/app/components/cardContainer.tsx b/app/components/cardContainer.tsx
index 5f3b584b..56bbb6ac 100644
--- a/app/components/cardContainer.tsx
+++ b/app/components/cardContainer.tsx
@@ -1,7 +1,7 @@
 export default function CardContainer(props :  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
     return (<div {...props}>
-        <div className="bg-secondary-900 shadow-card rounded-lg w-full mt-10 overflow-hidden relative">
-            <div className="relative overflow-hidden h-1 flex rounded-t-lg bg-secondary-500"></div>
+        <div className="bg-level-1 darkest-class shadow-card rounded-lg w-full mt-10 overflow-hidden relative">
+            <div className="relative overflow-hidden h-1 flex rounded-t-lg bg-level-4 darker-hover-class"></div>
             <div className="p-2">
                 {props.children}
             </div>
diff --git a/app/components/gasDetails.tsx b/app/components/gasDetails.tsx
index 6790392e..30d00824 100644
--- a/app/components/gasDetails.tsx
+++ b/app/components/gasDetails.tsx
@@ -10,9 +10,9 @@ const GasDetails = ({ network, currency }: { network: Layer, currency: Currency
     if (!networkGas?.gasDetails) return
 
     return (
-        <div className='grid grid-cols-1 gap-2 px-3 py-2 rounded-lg border-2 border-secondary-500 bg-secondary-800 mt-2 w-[350px] fixed top-0 left-2'>
+        <div className='grid grid-cols-1 gap-2 px-3 py-2 rounded-lg border-2 border-secondary-500 bg-level-2 darker-class mt-2 w-[350px] fixed top-0 left-2'>
             <div className="flex flex-row items-baseline justify-between">
-                <label className="block text-left text-primary-text-placeholder">
+                <label className="block text-left text-muted text-muted-primary-text-placeholder">
                     Gas limit
                 </label>
                 <span className="text-right">
@@ -22,7 +22,7 @@ const GasDetails = ({ network, currency }: { network: Layer, currency: Currency
                 </span>
             </div>
             <div className="flex flex-row items-baseline justify-between">
-                <label className="block text-left text-primary-text-placeholder">
+                <label className="block text-left text-muted text-muted-primary-text-placeholder">
                     Gas price
                 </label>
                 <span className="text-right">
@@ -32,7 +32,7 @@ const GasDetails = ({ network, currency }: { network: Layer, currency: Currency
                 </span>
             </div>
             <div className="flex flex-row items-baseline justify-between">
-                <label className="block text-left text-primary-text-placeholder">
+                <label className="block text-left text-muted text-muted-primary-text-placeholder">
                     Max fee per gas
                 </label>
                 <span className="text-right">
@@ -42,7 +42,7 @@ const GasDetails = ({ network, currency }: { network: Layer, currency: Currency
                 </span>
             </div>
             <div className="flex flex-row items-baseline justify-between">
-                <label className="block text-left text-primary-text-placeholder">
+                <label className="block text-left text-muted text-muted-primary-text-placeholder">
                     Max priority fee per gas
                 </label>
                 <span className="text-right">
diff --git a/app/components/globalFooter.tsx b/app/components/globalFooter.tsx
index 8a8fffe7..6c081286 100644
--- a/app/components/globalFooter.tsx
+++ b/app/components/globalFooter.tsx
@@ -51,14 +51,14 @@ const GLobalFooter = () => {
         <footer className="z-0 hidden md:flex fixed bottom-0 py-4 justify-between items-center w-full px-6 lg:px-8 mt-auto">
             <div>
                 <div className="flex mt-3 md:mt-0 gap-6">
-                    <Link target="_blank" href="https://lux.partners/privacy" className="text-xs leading-6 text-primary-text-muted underline hover:no-underline hover:text-opacity-70 duration-200 transition-all">
+                    <Link target="_blank" href="https://lux.partners/privacy" className="text-xs leading-6 text-muted text-muted-primary-text-muted underline hover:no-underline hover:text-opacity-70 duration-200 transition-all">
                         Privacy Policy
                     </Link>
-                    <Link target="_blank" href="https://lux.partners/terms" className="text-xs leading-6 text-primary-text-muted underline hover:no-underline hover:text-opacity-70 duration-200 transition-all">
+                    <Link target="_blank" href="https://lux.partners/terms" className="text-xs leading-6 text-muted text-muted-primary-text-muted underline hover:no-underline hover:text-opacity-70 duration-200 transition-all">
                         Terms of Services
                     </Link>
                 </div>
-                <p className="text-center text-xs text-primary-text-muted leading-6">
+                <p className="text-center text-xs text-muted text-muted-primary-text-muted leading-6">
                     &copy; {new Date().getFullYear()} Lux Partners Limited. All rights reserved.
                 </p>
             </div>
diff --git a/app/components/guestCard.tsx b/app/components/guestCard.tsx
index ac4e9ab3..b6981a9b 100644
--- a/app/components/guestCard.tsx
+++ b/app/components/guestCard.tsx
@@ -30,7 +30,7 @@ function GuestCard() {
                     <div className={noToolBar ? `p-6 border border-secondary-500 rounded-md` : "pt-6"}>
                         {
                             goBack &&
-                            <button type='button' onClick={goBack} className="justify-self-start text-xs text-secondary-text flex items-center hover:text-secondary-text/70 cursor-pointer space-x-1" style={{ visibility: false ? 'hidden' : 'visible' }}>
+                            <button type='button' onClick={goBack} className="justify-self-start text-xs text-foreground text-foreground-new flex items-center hover:text-foreground text-foreground-new/70 cursor-pointer space-x-1" style={{ visibility: false ? 'hidden' : 'visible' }}>
                                 <ArrowLeft className='h-3' />
                                 <span>Edit email</span>
                             </button>
diff --git a/app/components/maintanance/maintanance.tsx b/app/components/maintanance/maintanance.tsx
index ea3abd51..7007d455 100644
--- a/app/components/maintanance/maintanance.tsx
+++ b/app/components/maintanance/maintanance.tsx
@@ -16,18 +16,18 @@ function MaintananceContent(props: React.DetailedHTMLProps<React.HTMLAttributes<
         updateWithProps()
     })
     
-    const twitterLogo = <TwitterLogo className="text-primary-text h-6 w-6" />
+    const twitterLogo = <TwitterLogo className="text-muted text-muted-primary-text h-6 w-6" />
     return (
         <div className="flex items-stretch flex-col">
-            <BridgeLogo className="block md:hidden h-8 w-auto text-primary-text mt-5"></BridgeLogo>
+            <BridgeLogo className="block md:hidden h-8 w-auto text-muted text-muted-primary-text mt-5"></BridgeLogo>
             <CardContainer {...props} >
-                <div className="flex flex-col justify-center space-y-12 p-10 text-primary-text md:min-h-fit min-h-[400px]">
+                <div className="flex flex-col justify-center space-y-12 p-10 text-muted text-muted-primary-text md:min-h-fit min-h-[400px]">
                     <h1 className="text-xl tracking-tight text-gray-200">
-                        <p className="mb-4 text-primary-text">
+                        <p className="mb-4 text-muted text-muted-primary-text">
                             We&apos;re upgrading our systems and infrastructure to give you the best experience yet. 
                         </p>
                         <span className="block font-bold text-3xl xl:inline">We&apos;ll be back at 15:00 UTC</span>
-                        <p className="mt-4 text-primary-text">
+                        <p className="mt-4 text-muted text-muted-primary-text">
                             Any pending swaps will be completed after maintenance.
                         </p>
                     </h1>
diff --git a/app/components/sendFeedback.tsx b/app/components/sendFeedback.tsx
index 93b7b9a1..9f1602f2 100644
--- a/app/components/sendFeedback.tsx
+++ b/app/components/sendFeedback.tsx
@@ -57,18 +57,18 @@ const SendFeedback: FC<Props> = ({ onSend }) => {
             {({ handleChange, isValid, isSubmitting }) => (
                 <Form className='flex flex-col justify-between'>
                     <div className='space-y-4 h-full mt-2'>
-                        <p className='text-base text-left font-roboto text-secondary-text font-light'>
+                        <p className='text-base text-left font-roboto text-foreground text-foreground-new font-light'>
                             Please help us shape the product, catch bugs, and prioritize features. Your feedback will go directly into our Telegram channel.
                         </p>
                     </div>
-                    <div className="text-primary-text text-sm space-y-4 flex flex-col pt-8">
+                    <div className="text-muted text-muted-primary-text text-sm space-y-4 flex flex-col pt-8">
                         <textarea
                             id='Feedback'
                             name='Feedback'
                             onChange={e => {
                                 handleChange(e)
                             }}
-                            className="h-40 max-h-60 appearance-none block bg-secondary-700 text-primary-text border border-secondary-500 rounded-md py-3 px-4 mb-3 leading-tight focus:ring-0 focus:bg-secondary-500 focus:border-secondary-100 "
+                            className="h-40 max-h-60 appearance-none block bg-level-3 darker-2-class text-muted text-muted-primary-text border border-secondary-500 rounded-md py-3 px-4 mb-3 leading-tight focus:ring-0 focus:bg-level-4 darker-hover-class focus:border-secondary-100 "
                         />
                         <button
                             type="button"
diff --git a/app/components/shadcn/command.tsx b/app/components/shadcn/command.tsx
index 71ee8b31..fce09026 100644
--- a/app/components/shadcn/command.tsx
+++ b/app/components/shadcn/command.tsx
@@ -24,7 +24,7 @@ const CommandWrapper = React.forwardRef<
   React.ElementRef<typeof Command>,
   React.ComponentPropsWithoutRef<typeof Command>
 >(({ className, children, ...props }, ref) => (
-  <Command {...props} className="bg-level-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-secondary-text [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+  <Command {...props} className="bg-level-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-foreground text-foreground-new [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
     {children}
   </Command>
 ))
@@ -40,7 +40,7 @@ const CommandInput = React.forwardRef<
         className
       )} />
     <span className="absolute left-1 font-thin animate-none peer-placeholder-shown/draft:animate-blinking text-lg peer-focus/draft:invisible invisible peer-placeholder-shown/draft:visible">|</span>
-    <label htmlFor={props.id} className="absolute text-lg text-secondary-text duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-placeholder-shown/draft:scale-100 peer-placeholder-shown/draft:translate-y-0 peer-placeholder-shown/draft:text-secondary-text-muted">
+    <label htmlFor={props.id} className="absolute text-lg text-foreground text-foreground-new duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-placeholder-shown/draft:scale-100 peer-placeholder-shown/draft:translate-y-0 peer-placeholder-shown/draft:text-foreground text-foreground-new-muted">
       {props.placeholder}
     </label>
   </div>
@@ -81,7 +81,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={classNames(
-      "overflow-hidden p-1 py-1.5 text-primary-text [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-secondary-text",
+      "overflow-hidden p-1 py-1.5 text-muted text-muted-primary-text [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-foreground text-foreground-new",
       className
     )}
     {...props}
@@ -96,7 +96,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={classNames("-mx-1 h-px bg-secondary-500", className)}
+    className={classNames("-mx-1 h-px bg-level-4 darker-hover-class", className)}
     {...props}
   />
 ))
@@ -109,7 +109,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={classNames(
-      "relative cursor-pointer flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-secondary-700 aria-selected:text-primary-text",
+      "relative cursor-pointer flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-level-3 darker-2-class aria-selected:text-muted text-muted-primary-text",
       className,
       props.disabled && "opacity-30 cursor-not-allowed",
     )}
@@ -126,7 +126,7 @@ const CommandShortcut = ({
   return (
     <span
       className={classNames(
-        "ml-auto text-xs tracking-widest text-secondary-text-muted",
+        "ml-auto text-xs tracking-widest text-foreground text-foreground-new-muted",
         className
       )}
       {...props}
diff --git a/app/components/shadcn/dialog._tsx_ b/app/components/shadcn/dialog._tsx_
index 0b209dcf..c081f25e 100644
--- a/app/components/shadcn/dialog._tsx_
+++ b/app/components/shadcn/dialog._tsx_
@@ -44,13 +44,13 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={classNames(
-                "fixed z-50 grid w-full gap-4 rounded-t-lg bg-secondary-800 p-4 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-sm sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+                "fixed z-50 grid w-full gap-4 rounded-t-lg bg-level-2 darker-class p-4 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-sm sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
                 className
             )}
             {...props}
         >
             {children}
-            <DialogPrimitive.Close className="absolute text-secondary-text right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duartion-100 ring-1 ring-secondary-400 transition bg-secondary-500 hover:text-primary-text focus:outline-none rounded-full items-center">
+            <DialogPrimitive.Close className="absolute text-foreground text-foreground-new right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duartion-100 ring-1 ring-secondary-400 transition bg-level-4 darker-hover-class hover:text-muted text-muted-primary-text focus:outline-none rounded-full items-center">
                 <X className="h-4 w-4" />
                 <span className="sr-only">Close</span>
             </DialogPrimitive.Close>
@@ -94,7 +94,7 @@ const DialogTitle = React.forwardRef<
     <DialogPrimitive.Title
         ref={ref}
         className={classNames(
-            "text-lg font-semibold leading-none tracking-tight text-primary-text",
+            "text-lg font-semibold leading-none tracking-tight text-muted text-muted-primary-text",
             className
         )}
         {...props}
@@ -108,7 +108,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}
-        className={classNames("text-sm text-secondary-text", className)}
+        className={classNames("text-sm text-foreground text-foreground-new", className)}
         {...props}
     />
 ))
diff --git a/app/components/shadcn/popover.tsx b/app/components/shadcn/popover.tsx
index cc306ff0..2edece8f 100644
--- a/app/components/shadcn/popover.tsx
+++ b/app/components/shadcn/popover.tsx
@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={classNames(
-        "z-50 w-72 rounded-md border border-secondary-600 bg-secondary-800 p-2 text-secondary-text shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border border-secondary-600 bg-level-2 darker-class p-2 text-foreground text-foreground-new shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/app/components/shadcn/select.tsx b/app/components/shadcn/select.tsx
index 56406e9e..f7b4c40b 100644
--- a/app/components/shadcn/select.tsx
+++ b/app/components/shadcn/select.tsx
@@ -19,13 +19,13 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         className={classNames(
-            "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-secondary-text focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-primary-text",
+            "flex h-10 w-full items-center justify-between rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-foreground text-foreground-new focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-muted text-muted-primary-text",
             className
         )}
         {...props}
     >
         {children}
-        <ChevronRight className="h-4 w-4 text-primary-text" />
+        <ChevronRight className="h-4 w-4 text-muted text-muted-primary-text" />
     </SelectPrimitive.Trigger>
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
@@ -38,7 +38,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={classNames(
-                "animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md shadow-md ring-1 ring-secondary-500 bg-secondary-700 text-secondary-text",
+                "animate-in fade-in-80 relative z-50 min-w-[8rem] overflow-hidden rounded-md shadow-md ring-1 ring-secondary-500 bg-level-3 darker-2-class text-foreground text-foreground-new",
                 className
             )}
             {...props}
diff --git a/app/components/shadcn/tooltip.tsx b/app/components/shadcn/tooltip.tsx
index 3d8e18b8..0990262b 100644
--- a/app/components/shadcn/tooltip.tsx
+++ b/app/components/shadcn/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={classNames(
-      "z-50 overflow-hidden rounded-md border border-secondary-600 bg-secondary-800 px-3 py-1.5 text-xs text-secondary-text animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 overflow-hidden rounded-md border border-secondary-600 bg-level-2 darker-class px-3 py-1.5 text-xs text-foreground text-foreground-new animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
diff --git a/app/components/swapComponent.tsx b/app/components/swapComponent.tsx
index dccd624f..f1da635e 100644
--- a/app/components/swapComponent.tsx
+++ b/app/components/swapComponent.tsx
@@ -6,7 +6,7 @@ import { BalancesDataProvider } from '../context/balances';
 
 const Swap: FC = () => {
   return (
-    <div className="text-primary-text">
+    <div className="text-muted text-muted-primary-text">
       <SwapDataProvider >
         <TimerProvider>
           <BalancesDataProvider>
diff --git a/app/components/utils/GoHome.tsx b/app/components/utils/GoHome.tsx
index b8e8af8e..bac83897 100644
--- a/app/components/utils/GoHome.tsx
+++ b/app/components/utils/GoHome.tsx
@@ -25,7 +25,7 @@ const GoHomeButton: FC<Props> = (({ className, children }) => {
                         <ContextMenuPrimitive.Trigger>
                             <BridgeLogo className={className ?? "h-8 w-auto text-primary-logoColor fill-primary-text"} />
                         </ContextMenuPrimitive.Trigger>
-                        <ContextMenuPrimitive.Content className="dialog-overlay absolute z-40 border h-fit text-secondary-text border-secondary-100 mt-2 w-fit rounded-md shadow-lg bg-secondary-900 ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <ContextMenuPrimitive.Content className="dialog-overlay absolute z-40 border h-fit text-foreground text-foreground-new border-secondary-100 mt-2 w-fit rounded-md shadow-lg bg-level-1 darkest-class ring-1 ring-black ring-opacity-5 focus:outline-none">
                             <ContextMenuPrimitive.ContextMenuItem className="dialog-content px-4 py-2 text-sm text-left w-full rounded-t hover:bg-secondary-400 whitespace-nowrap">
                                 <CopyButton toCopy={renderToString(<BridgeLogo />)}>Copy logo as SVG</CopyButton>
                             </ContextMenuPrimitive.ContextMenuItem >
diff --git a/app/next.config.js b/app/next.config.js
index eb3b4afc..80c54f67 100644
--- a/app/next.config.js
+++ b/app/next.config.js
@@ -21,8 +21,12 @@ module.exports = (phase, { defaultConfig }) => {
       defaultLocale: "en",
     },
     images: {
-      domains: ["stagelslayerswapbridgesa.blob.core.windows.net", "bransferstorage.blob.core.windows.net", "devlslayerswapbridgesa.blob.core.windows.net", "prodlslayerswapbridgesa.blob.core.windows.net"],
-
+      domains: [
+        "stagelslayerswapbridgesa.blob.core.windows.net", 
+        "bransferstorage.blob.core.windows.net", 
+        "devlslayerswapbridgesa.blob.core.windows.net", 
+        "prodlslayerswapbridgesa.blob.core.windows.net"
+      ],
     },
     compiler: {
       removeConsole: false,
diff --git a/app/pages/404.tsx b/app/pages/404.tsx
index 2f5c02bc..9b6685d4 100644
--- a/app/pages/404.tsx
+++ b/app/pages/404.tsx
@@ -21,8 +21,8 @@ export default function Custom404() {
                             <MessageComponent.Content icon="red">
                                 <div className="text-center">
                                     <p className="text-base font-semibold text-primary">404</p>
-                                    <h1 className="mt-2 text-4xl font-bold tracking-tight text-primary-text sm:text-5xl">Page not found.</h1>
-                                    <p className="mt-2 text-base text-secondary-text">Sorry, we couldn&apos;t find the page you&apos;re looking for.</p>
+                                    <h1 className="mt-2 text-4xl font-bold tracking-tight text-muted text-muted-primary-text sm:text-5xl">Page not found.</h1>
+                                    <p className="mt-2 text-base text-foreground text-foreground-new">Sorry, we couldn&apos;t find the page you&apos;re looking for.</p>
                                 </div>
                             </MessageComponent.Content>
                             <MessageComponent.Buttons>
diff --git a/app/pages/nocookies.tsx b/app/pages/nocookies.tsx
index 9b91d02d..9ead9c13 100644
--- a/app/pages/nocookies.tsx
+++ b/app/pages/nocookies.tsx
@@ -12,7 +12,7 @@ export default function Salon({ settings }: InferGetServerSidePropsType<typeof g
         <div className={`flex flex-col items-center min-h-screen overflow-hidden relative font-robo`}>
             <div className="w-full max-w-lg z-[1]">
                 <div className="flex content-center items-center justify-center space-y-5 flex-col container mx-auto sm:px-6 max-w-lg">
-                    <div className="flex flex-col w-full text-primary-text">
+                    <div className="flex flex-col w-full text-muted text-muted-primary-text">
                         <NoCookies />
                     </div>
                 </div>
diff --git a/app/pages/salon.tsx b/app/pages/salon.tsx
index d01ed03b..e782e305 100644
--- a/app/pages/salon.tsx
+++ b/app/pages/salon.tsx
@@ -34,7 +34,7 @@ export default function Salon({ settings }: InferGetServerSidePropsType<typeof g
 
     return (
         <Layout hideFooter={true} settings={appSettings}>
-            <div className="h-full min-h-screen flex flex-col justify-center text-secondary-text text-md font-lighter leading-6">
+            <div className="h-full min-h-screen flex flex-col justify-center text-foreground text-foreground-new text-md font-lighter leading-6">
                 <div className='flex place-content-center mb-4'>
                     <svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 116 116" fill="none">
                         <circle cx="58" cy="58" r="58" fill="#55B585" fillOpacity="0.1" />
@@ -44,7 +44,7 @@ export default function Salon({ settings }: InferGetServerSidePropsType<typeof g
                     </svg>
                 </div>
                 <div className="flex flex-col text-center place-content-center space-y-2">
-                    <p className="block text-primary-text font-bold text-lg"> Exchange account successfully connected </p>
+                    <p className="block text-muted text-muted-primary-text font-bold text-lg"> Exchange account successfully connected </p>
                     <p className="block"> You can close this window now</p>
                 </div>
             </div>
diff --git a/app/styles/globals.css b/app/styles/globals.css
index 04b69c67..7f07b53c 100644
--- a/app/styles/globals.css
+++ b/app/styles/globals.css
@@ -16,9 +16,11 @@
     -moz-appearance: textfield;
   }
   
+  /*
   .styled-scroll {
-    @apply scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-secondary-500  scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300  scrollbar-thumb:!bg-slate-500/50;
+    @apply scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-level-4 darker-hover-class  scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300  scrollbar-thumb:!bg-slate-500/50;
   }
+  */
   
 }
 
@@ -354,8 +356,6 @@ input:disabled,
 textarea:disabled,
 input:disabled::placeholder,
 textarea:disabled::placeholder {
-  -webkit-text-fill-color: theme('colors.primary.text-placeholder');
-  /* 1. sets text fill to 'primary-text': '#a4afc8' */
   opacity: 1;
   /* 2. correct opacity on iOS */
 }
diff --git a/shared-ui/style/colors.tailwind.js b/shared-ui/style/colors.tailwind.js
index faef0bc2..b74a16bc 100644
--- a/shared-ui/style/colors.tailwind.js
+++ b/shared-ui/style/colors.tailwind.js
@@ -24,11 +24,13 @@ module.exports = ({ colors }) => ({
   }, 
   primary: {
     DEFAULT: "var(--primary)",
+    lux: "var(--primary)",
     hover: "var(--primary-hover)",
     fg: "var(--primary-fg)",
   },
   secondary: {
     DEFAULT: "var(--secondary)",
+    lux: "var(--secondary)",
     hover: "var(--secondary-hover)",
     fg: "var(--secondary-fg)",
   },