diff --git a/components/account/AccountButton.tsx b/components/account/AccountButton.tsx
index 4c5504ff5..a7bfc442d 100644
--- a/components/account/AccountButton.tsx
+++ b/components/account/AccountButton.tsx
@@ -143,7 +143,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
           <Menu.Button className="w-full md:w-full md:shrink-0">
             <div className="relative z-[110] flex h-full w-full min-w-0 cursor-pointer items-center rounded-full md:w-full md:shrink-0">
               <div
-                className={`flex h-full w-full min-w-0 items-center justify-center gap-2 rounded-full border-2 bg-white/10 px-3 py-2 text-white shadow-md backdrop-blur-lg transition-all hover:border-white/30 hover:bg-white/15 hover:shadow-lg md:min-w-0 md:shrink-0 md:gap-2.5 md:px-3 md:py-2 ${
+                className={`flex h-full w-full min-w-0 items-center justify-center gap-2 rounded-full border-2 bg-white/10 px-3 py-2 text-white/90 shadow-md backdrop-blur-lg transition-all hover:border-white/30 hover:bg-white/15 hover:shadow-lg md:min-w-0 md:shrink-0 md:gap-2.5 md:px-3 md:py-2 ${
                   open
                     ? "border-ztg-green-500/60 bg-white/15 shadow-lg shadow-ztg-green-500/10 ring-2 ring-ztg-green-500/20"
                     : "border-white/20"
@@ -163,7 +163,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                 </div>
                 <span
                   className={`flex min-w-0 flex-1 items-center justify-center overflow-hidden text-center text-sm font-semibold transition-all md:min-w-0 md:whitespace-nowrap md:text-center md:text-sm ${
-                    open ? "text-ztg-green-400" : "text-white"
+                    open ? "text-ztg-green-500" : "text-white/90"
                   }`}
                   title={
                     (() => {
@@ -199,7 +199,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                     size={20}
                     className={`h-5 w-5 transition-all duration-200 md:h-4 md:w-4 ${
                       open
-                        ? "rotate-180 text-ztg-green-400"
+                        ? "rotate-180 text-ztg-green-500"
                         : "text-white/90"
                     }`}
                   />
@@ -240,7 +240,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                                 Account is acting proxy for:
                               </label>
                               <div className="flex items-center gap-1">
-                                <div className="text-sm text-white">
+                                <div className="text-sm text-white/90">
                                   {realAddress &&
                                     shortenAddress(
                                       realAddress,
@@ -299,12 +299,12 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
             {/* Close button for mobile */}
             {isMobile && (
               <div className="mb-4 flex shrink-0 items-center justify-between border-b-2 border-white/10 px-4 pb-3">
-                <span className="text-base font-semibold text-white">
+                <span className="text-base font-semibold text-white/90">
                   Account
                 </span>
                 <button
                   onClick={close}
-                  className="flex h-11 w-11 touch-manipulation items-center justify-center rounded-lg bg-white/10 text-white transition-all hover:bg-white/20 active:scale-95"
+                  className="flex h-11 w-11 touch-manipulation items-center justify-center rounded-lg bg-white/10 text-white/90 transition-all hover:bg-white/20 active:scale-95"
                 >
                   <X size={20} />
                 </button>
@@ -326,13 +326,6 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                     balance={usdcAssetHubBalance}
                     className="text-[10px] md:text-xs"
                   />
-                  {/* DISABLED: USDC.wh temporarily disabled */}
-                  {/* <BalanceRow
-                            imgPath="/currencies/usdc.svg"
-                            units="USDC.wh"
-                            balance={usdcMoonbeamBalance}
-                            className="text-[10px] md:text-xs"
-                          /> */}
                   <BalanceRow
                     imgPath="/currencies/dot.png"
                     units="DOT"
@@ -358,7 +351,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                         </span>
                         <ArrowRight
                           size={20}
-                          className="h-5 w-5 text-ztg-green-400 transition-transform group-hover:translate-x-1 md:h-4 md:w-4"
+                          className="h-5 w-5 text-ztg-green-500 transition-transform group-hover:translate-x-1 md:h-4 md:w-4"
                         />
                       </div>
                     </Link>
@@ -400,7 +393,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                     >
                       <div className="relative">
                         <Bell
-                          className="text-ztg-green-400 transition-colors"
+                          className="text-ztg-green-500 transition-colors"
                           size={20}
                         />
                         {hasNotifications && (
@@ -411,7 +404,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                         Notifications
                       </span>
                       {hasNotifications && (
-                        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ztg-green-500/20 text-xs font-semibold text-ztg-green-400 md:h-8 md:w-8 md:text-xs">
+                        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ztg-green-500/20 text-xs font-semibold text-ztg-green-500 md:h-8 md:w-8 md:text-xs">
                           {alerts.length}
                         </span>
                       )}
@@ -436,7 +429,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                         }}
                       >
                         <User
-                          className="text-ztg-green-400 transition-colors"
+                          className="text-ztg-green-500 transition-colors"
                           size={20}
                         />
                         <span className="text-sm font-medium md:text-sm">
@@ -457,7 +450,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                         }`}
                       >
                         <BarChart
-                          className="text-ztg-green-400 transition-colors"
+                          className="text-ztg-green-500 transition-colors"
                           size={20}
                         />
                         <span className="text-sm font-medium md:text-sm">
@@ -481,7 +474,7 @@ const AccountMenuContent: FC<AccountMenuContentProps> = ({
                       }}
                     >
                       <Settings
-                        className="text-ztg-green-400 transition-colors"
+                        className="text-ztg-green-500 transition-colors"
                         size={20}
                       />
                       <span className="text-sm font-medium md:text-sm">
@@ -530,7 +523,7 @@ const HeaderActionButton: FC<
 > = ({ onClick, disabled, children }) => {
   return (
     <button
-      className={`flex w-[185px] cursor-pointer items-center justify-center rounded-full border-2 border-white/20 bg-white/10 px-6 font-semibold leading-[40px] text-white shadow-md backdrop-blur-lg transition-all hover:border-white/30 hover:bg-white/15 hover:shadow-lg hover:shadow-ztg-green-500/10 disabled:cursor-default disabled:opacity-30 disabled:hover:border-white/20 disabled:hover:bg-white/10 disabled:hover:shadow-md`}
+      className={`flex w-[185px] cursor-pointer items-center justify-center rounded-full border-2 border-white/20 bg-white/10 px-6 font-semibold leading-[40px] text-white/90 shadow-md backdrop-blur-lg transition-all hover:border-white/30 hover:bg-white/15 hover:shadow-lg hover:shadow-ztg-green-500/10 disabled:cursor-default disabled:opacity-30 disabled:hover:border-white/20 disabled:hover:bg-white/10 disabled:hover:shadow-md`}
       onClick={onClick}
       disabled={disabled}
     >
@@ -578,9 +571,6 @@ const AccountButton: FC<{
   const { data: usdcAssetHubBalance } = useBalance(activeAccount?.address, {
     ForeignAsset: 4,
   });
-  const { data: usdcMoonbeamBalance } = useBalance(activeAccount?.address, {
-    ForeignAsset: 1,
-  });
 
   const { data: constants } = useChainConstants();
 
diff --git a/components/account/AccountModalHead.tsx b/components/account/AccountModalHead.tsx
index 8d3ed5c87..0523d8535 100644
--- a/components/account/AccountModalHead.tsx
+++ b/components/account/AccountModalHead.tsx
@@ -10,7 +10,7 @@ const AccountModalHead = () => {
 
   return (
     <div className="flex flex-row items-center justify-between">
-      <h3 className="text-lg font-bold text-white">Account</h3>
+      <h3 className="text-lg font-bold text-white/90">Account</h3>
       <button
         className="cursor-pointer rounded-md border-2 border-white/10 bg-white/10 px-3 py-1.5 text-xs font-medium text-white/90 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/20"
         onClick={() => {
diff --git a/components/account/NotificationsPanel.tsx b/components/account/NotificationsPanel.tsx
index 7728ece91..84e2359e1 100644
--- a/components/account/NotificationsPanel.tsx
+++ b/components/account/NotificationsPanel.tsx
@@ -117,21 +117,21 @@ export const NotificationsPanel = ({
         >
           {/* Header */}
           <div className="mb-6 flex items-center justify-between border-b-2 border-white/10 pb-4">
-            <h2 className="text-xl font-bold text-white md:text-2xl">
+            <h2 className="text-xl font-bold text-white/90 md:text-2xl">
               Notifications
             </h2>
             <div className="flex items-center gap-2">
               {alerts.length > 0 && (
                 <button
                   onClick={clearAll}
-                  className="touch-manipulation rounded-lg bg-white/10 px-3 py-2 text-sm font-medium text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white active:scale-95"
+                  className="touch-manipulation rounded-lg bg-white/10 px-3 py-2 text-sm font-medium text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white/90 active:scale-95"
                 >
                   Clear All
                 </button>
               )}
               <button
                 onClick={onClose}
-                className="flex h-10 w-10 touch-manipulation items-center justify-center rounded-lg bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white active:scale-95"
+                className="flex h-10 w-10 touch-manipulation items-center justify-center rounded-lg bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white/90 active:scale-95"
               >
                 <X size={20} />
               </button>
@@ -208,15 +208,15 @@ const CourtCaseReadyToSettleItem = ({
     >
       <div className="mb-2">
         <div className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-blue-500/30 to-blue-600/40 px-2.5 py-1 text-xs font-semibold backdrop-blur-sm">
-          <LuClipboardCheck size={14} className="text-white" />
-          <span className="text-white">Ready to Settle</span>
+          <LuClipboardCheck size={14} className="text-white/90" />
+          <span className="text-white/90">Ready to Settle</span>
         </div>
       </div>
       <div>
-        <h3 className="mb-1 text-sm font-semibold text-white">
+        <h3 className="mb-1 text-sm font-semibold text-white/90">
           {market?.question}
         </h3>
-        <p className="text-xs text-white/75">
+        <p className="text-xs text-white/90/75">
           This court case can now be settled.
         </p>
       </div>
@@ -245,15 +245,15 @@ const CourtCaseReadyForVoteAlertItem = ({
     >
       <div className="mb-2">
         <div className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500/30 to-purple-600/40 px-2.5 py-1 text-xs font-semibold backdrop-blur-sm">
-          <LuVote size={14} className="text-white" />
-          <span className="text-white">Ready for Vote</span>
+          <LuVote size={14} className="text-white/90" />
+          <span className="text-white/90">Ready for Vote</span>
         </div>
       </div>
       <div>
-        <h3 className="mb-1 text-sm font-semibold text-white">
+        <h3 className="mb-1 text-sm font-semibold text-white/90">
           {market?.question}
         </h3>
-        <p className="text-xs text-white/75">
+        <p className="text-xs text-white/90/75">
           You have been drawn as juror for this market and can now vote.
         </p>
       </div>
@@ -282,15 +282,15 @@ const CourtCaseReadyForRevealAlertItem = ({
     >
       <div className="mb-2">
         <div className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-green-500/30 to-purple-600/40 px-2.5 py-1 text-xs font-semibold backdrop-blur-sm">
-          <AiOutlineEye size={14} className="text-white" />
-          <span className="text-white">Ready to Reveal</span>
+          <AiOutlineEye size={14} className="text-white/90" />
+          <span className="text-white/90">Ready to Reveal</span>
         </div>
       </div>
       <div>
-        <h3 className="mb-1 text-sm font-semibold text-white">
+        <h3 className="mb-1 text-sm font-semibold text-white/90">
           {market?.question}
         </h3>
-        <p className="text-xs text-white/75">
+        <p className="text-xs text-white/90/75">
           You are required to reveal your vote for this court case.
         </p>
       </div>
@@ -317,12 +317,12 @@ const ReadyToReportMarketAlertItem = ({
     >
       <div className="mb-2">
         <div className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-yellow-500/30 to-pink-600/40 px-2.5 py-1 text-xs font-semibold backdrop-blur-sm">
-          <AiOutlineFileAdd size={14} className="text-white" />
-          <span className="text-white">Submit Report</span>
+          <AiOutlineFileAdd size={14} className="text-white/90" />
+          <span className="text-white/90">Submit Report</span>
         </div>
       </div>
       <div>
-        <h3 className="text-sm font-semibold text-white">
+        <h3 className="text-sm font-semibold text-white/90">
           {alert.market.question}
         </h3>
       </div>
@@ -350,12 +350,12 @@ const RedeemableMarketAlertItem = ({
     >
       <div className="mb-2">
         <div className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-ztg-green-500/30 to-blue-600/40 px-2.5 py-1 text-xs font-semibold backdrop-blur-sm">
-          <BiMoneyWithdraw size={14} className="text-white" />
-          <span className="text-white">Redeemable Tokens</span>
+          <BiMoneyWithdraw size={14} className="text-white/90" />
+          <span className="text-white/90">Redeemable Tokens</span>
         </div>
       </div>
       <div>
-        <h3 className="text-sm font-semibold text-white">
+        <h3 className="text-sm font-semibold text-white/90">
           You have {alert.markets.length} redeemable markets
         </h3>
       </div>
@@ -382,14 +382,14 @@ const RelevantMarketDisputeItem = ({
     >
       <div className="mb-2">
         <div className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-red-500/30 to-orange-600/40 px-2.5 py-1 text-xs font-semibold backdrop-blur-sm">
-          <span className="text-white">Market Dispute</span>
+          <span className="text-white/90">Market Dispute</span>
         </div>
       </div>
       <div>
-        <h3 className="mb-1 text-sm font-semibold text-white">
+        <h3 className="mb-1 text-sm font-semibold text-white/90">
           {alert.market.question}
         </h3>
-        <p className="text-xs text-white/75">
+        <p className="text-xs text-white/90/75">
           A market you're involved in is disputed
         </p>
       </div>
diff --git a/components/account/OnboardingModal.tsx b/components/account/OnboardingModal.tsx
index 68514bab4..ba162b279 100644
--- a/components/account/OnboardingModal.tsx
+++ b/components/account/OnboardingModal.tsx
@@ -40,7 +40,7 @@ const exchangeList = [
     className: "",
     title: "Banxa (Fiat)",
     icon: (
-      <span className="rounded bg-green-600 px-2 py-1 text-xs text-white">
+      <span className="rounded bg-green-600 px-2 py-1 text-xs text-white/90">
         NEW
       </span>
     ),
@@ -140,7 +140,7 @@ const TextSection = ({
           )}
           {rightButton && (
             <button
-              className={`w-full rounded-[100px] bg-ztg-green-600/80 text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md ${
+              className={`w-full rounded-[100px] bg-ztg-green-600/80 text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md ${
                 rightButton.disabled === true ? "cursor-default opacity-50" : ""
               }`}
               onClick={rightButton.onClick}
diff --git a/components/account/WalletSelect.tsx b/components/account/WalletSelect.tsx
index f26aa645b..0f1848712 100644
--- a/components/account/WalletSelect.tsx
+++ b/components/account/WalletSelect.tsx
@@ -85,7 +85,7 @@ const WalletSelect = () => {
 
   return (
     <div className="flex flex-col">
-      <h3 className="mb-5 text-lg font-bold text-white">Connect Wallet</h3>
+      <h3 className="mb-5 text-lg font-bold text-white/90">Connect Wallet</h3>
 
       {/* Social Login Section */}
       {/* <div className="mb-6">
@@ -98,7 +98,7 @@ const WalletSelect = () => {
       {/* Divider */}
       {/* <div className="relative mb-6 flex items-center">
         <div className="h-px flex-1 bg-white/10"></div>
-        <span className="px-3 text-xs font-medium text-white/60">or</span>
+        <span className="px-3 text-xs font-medium text-white/90/60">or</span>
         <div className="h-px flex-1 bg-white/10"></div>
       </div> */}
 
@@ -125,7 +125,7 @@ const WalletSelect = () => {
                 <div className="text-sm font-semibold text-white/90">
                   Nova Wallet
                 </div>
-                <div className="text-xs text-white/60">Mobile wallet</div>
+                <div className="text-xs text-white/90/60">Mobile wallet</div>
               </div>
             </Link>
             <div className="rounded-lg border-2 border-white/10 bg-white/10 p-4 backdrop-blur-sm">
@@ -134,7 +134,7 @@ const WalletSelect = () => {
                   Quick Start
                 </span>
               </div>
-              <ol className="space-y-2 text-xs leading-relaxed text-white/80">
+              <ol className="space-y-2 text-xs leading-relaxed text-white/90">
                 <li className="flex items-start gap-2">
                   <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/10 text-[10px] font-bold text-white/70">
                     1
diff --git a/components/assets/AssetActionButtons/DisputeButton.tsx b/components/assets/AssetActionButtons/DisputeButton.tsx
index 7dd098fa9..2fd549213 100644
--- a/components/assets/AssetActionButtons/DisputeButton.tsx
+++ b/components/assets/AssetActionButtons/DisputeButton.tsx
@@ -66,12 +66,12 @@ const DisputeButton = ({
       <Modal open={isOpen} onClose={() => setOpen(false)}>
         <ModalPanel size="md" className="bg-ztg-primary-900/85 border-ztg-primary-200/20">
           <div className="relative flex-shrink-0 border-b-2 border-white/10 px-6 pt-6 pb-3">
-            <h2 className="text-center text-lg font-bold text-white md:text-xl">
+            <h2 className="text-center text-lg font-bold text-white/90 md:text-xl">
               Dispute Outcome
             </h2>
             <button
               onClick={() => setOpen(false)}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg border-2 border-white/10 bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white"
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg border-2 border-white/10 bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white/90"
               aria-label="Close"
             >
               <MdClose size={20} />
diff --git a/components/assets/AssetActionButtons/RedeemButton.tsx b/components/assets/AssetActionButtons/RedeemButton.tsx
index eac64a057..89d0a3916 100644
--- a/components/assets/AssetActionButtons/RedeemButton.tsx
+++ b/components/assets/AssetActionButtons/RedeemButton.tsx
@@ -403,7 +403,7 @@ const RedeemButtonByValue = ({
       {isSuccess ? (
         <div className="flex items-center justify-center gap-2 rounded-lg border border-ztg-green-400/40 bg-ztg-green-500/20 px-3 py-1.5 shadow-md backdrop-blur-sm">
           <div className="h-2 w-2 rounded-full bg-ztg-green-400"></div>
-          <span className="text-sm font-semibold text-ztg-green-400">
+          <span className="text-sm font-semibold text-ztg-green-500">
             Redeemed Tokens!
           </span>
         </div>
diff --git a/components/assets/AssetActionButtons/ReportButton.tsx b/components/assets/AssetActionButtons/ReportButton.tsx
index 6d41f8689..5cc0df0a0 100644
--- a/components/assets/AssetActionButtons/ReportButton.tsx
+++ b/components/assets/AssetActionButtons/ReportButton.tsx
@@ -124,12 +124,12 @@ const ReportButton = ({
       >
         <ModalPanel size="md" className="bg-ztg-primary-900/85 border-ztg-primary-200/20">
           <div className="relative flex-shrink-0 border-b-2 border-white/10 px-6 pt-6 pb-3">
-            <h2 className="text-center text-lg font-bold text-white md:text-xl">
+            <h2 className="text-center text-lg font-bold text-white/90 md:text-xl">
               Report Outcome
             </h2>
             <button
               onClick={() => setScalarReportBoxOpen(false)}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg border-2 border-white/10 bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white"
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg border-2 border-white/10 bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white/90"
               aria-label="Close"
             >
               <MdClose size={20} />
diff --git a/components/confirmation/ConfirmationProvider.tsx b/components/confirmation/ConfirmationProvider.tsx
index b45f2fdc6..7f5b0a6bb 100644
--- a/components/confirmation/ConfirmationProvider.tsx
+++ b/components/confirmation/ConfirmationProvider.tsx
@@ -10,10 +10,10 @@ export const ConfirmationProvider = () => {
         <Modal key={id} open={value.open} onClose={() => dismiss(id)}>
           <ModalPanel size="sm">
             <ModalBody>
-              <h2 className="mb-3 text-lg md:text-xl font-semibold text-white">
+              <h2 className="mb-3 text-lg md:text-xl font-semibold text-white/90">
                 {value.title}
               </h2>
-              <p className="mb-6 text-sm md:text-base text-white/80">{value.description}</p>
+              <p className="mb-6 text-sm md:text-base text-white/90">{value.description}</p>
               <div className="flex items-center justify-end gap-3">
                 <button
                   className="rounded-md bg-white/10 px-4 py-2 text-sm md:text-base font-medium text-white/90 backdrop-blur-sm transition-all hover:bg-white/20"
@@ -22,7 +22,7 @@ export const ConfirmationProvider = () => {
                   {value.cancelLabel ?? "Cancel"}
                 </button>
                 <button
-                  className="rounded-md bg-ztg-green-600/80 px-4 py-2 text-sm md:text-base text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
+                  className="rounded-md bg-ztg-green-600/80 px-4 py-2 text-sm md:text-base text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
                   onClick={() => confirm(id)}
                 >
                   {value.confirmLabel ?? "Confirm"}
diff --git a/components/court/CourtCasesTable.tsx b/components/court/CourtCasesTable.tsx
index d84e4ca0e..03d4a2441 100644
--- a/components/court/CourtCasesTable.tsx
+++ b/components/court/CourtCasesTable.tsx
@@ -301,9 +301,9 @@ const CaseActions = ({
           center relative line-clamp-1 gap-3 self-end overflow-visible rounded-full border-2 border-gray-300 px-5 py-1.5 text-xs hover:border-gray-400 disabled:opacity-50 md:min-w-[220px]
             ${
               (canVote || canSettle) &&
-              "bg-ztg-green-600/80 text-white shadow-sm backdrop-blur-sm hover:bg-ztg-green-600 hover:shadow-md"
+              "bg-ztg-green-600/80 text-white/90 shadow-sm backdrop-blur-sm hover:bg-ztg-green-600 hover:shadow-md"
             }
-            ${canReveal && "border-purple-500 bg-purple-500 text-white"}
+            ${canReveal && "border-purple-500 bg-purple-500 text-white/90"}
           `}
         >
           {canVote ? (
diff --git a/components/court/CourtExitButton.tsx b/components/court/CourtExitButton.tsx
index 9976bce44..28eb32302 100644
--- a/components/court/CourtExitButton.tsx
+++ b/components/court/CourtExitButton.tsx
@@ -72,7 +72,7 @@ const CourtExitButton = ({ className }: { className?: string }) => {
       <button
         className={`rounded-md ${
           canExit ? "bg-[#670031]" : "bg-gray-400"
-        }  px-4 py-2 text-white ${className}`}
+        }  px-4 py-2 text-white/90 ${className}`}
         onClick={() => setIsOpen(true)}
         disabled={!canExit}
       >
diff --git a/components/court/CourtUnstakeButton.tsx b/components/court/CourtUnstakeButton.tsx
index ec6c6babf..3ed2328c5 100644
--- a/components/court/CourtUnstakeButton.tsx
+++ b/components/court/CourtUnstakeButton.tsx
@@ -46,7 +46,7 @@ const CourtUnstakeButton = ({ className }: { className?: string }) => {
   return (
     <>
       <button
-        className={`rounded-md bg-[#670031] px-4 py-2 text-white ${className}`}
+        className={`rounded-md bg-[#670031] px-4 py-2 text-white/90 ${className}`}
         onClick={() => setIsOpen(true)}
       >
         Unstake
diff --git a/components/court/CourtVoteForm.tsx b/components/court/CourtVoteForm.tsx
index 4bd64dfbd..82c29b44b 100644
--- a/components/court/CourtVoteForm.tsx
+++ b/components/court/CourtVoteForm.tsx
@@ -79,7 +79,7 @@ export const CourtVoteForm: React.FC<CourtVoteFormProps> = ({
   return (
     <div className="overflow-hidden rounded-xl bg-white/10 shadow-lg backdrop-blur-md">
       <div className="center flex bg-white/10 py-3 backdrop-blur-sm">
-        <h3 className="text-white">Vote</h3>
+        <h3 className="text-white/90">Vote</h3>
       </div>
       <div className="px-2 py-6 text-center">
         <div className="mb-8 mt-6">
@@ -112,7 +112,7 @@ export const CourtVoteForm: React.FC<CourtVoteFormProps> = ({
 
           <div className="center mb-2">
             <button
-              className="center gap-3 rounded-md bg-purple-500 px-4 py-2 text-white"
+              className="center gap-3 rounded-md bg-purple-500 px-4 py-2 text-white/90"
               onClick={onClickDownloadSeed}
             >
               Download Salt Seed Backup
@@ -129,13 +129,13 @@ export const CourtVoteForm: React.FC<CourtVoteFormProps> = ({
           <Modal open={showDetails} onClose={() => setShowDetails(false)}>
             <Dialog.Panel className="relative w-full max-w-[762px] overflow-hidden rounded-[10px] bg-white/10 backdrop-blur-lg">
               <div className="p-6">
-                <h3 className="mb-2 text-white">Commitment Hash</h3>
-                <p className="mb-4 text-sm text-white/80">
+                <h3 className="mb-2 text-white/90">Commitment Hash</h3>
+                <p className="mb-4 text-sm text-white/90">
                   The commitment hash is calculated using a combination of your
                   account, the outcome you are voting for and a salt generated
                   from the secret phrase.
                 </p>
-                <p className="mb-4 text-sm text-white/80">
+                <p className="mb-4 text-sm text-white/90">
                   This is supplied to the chain instead of the direct outcome
                   when voting, so that the vote is not known to other
                   participants. Yet ensures that when its revealed it can be
@@ -165,10 +165,10 @@ export const CourtVoteForm: React.FC<CourtVoteFormProps> = ({
                   <FaArrowRight size={12} />
                   {commitmentHash && u8aToHex(commitmentHash)}
                 </div>
-                <h3 className="mb-2 text-base text-white">
+                <h3 className="mb-2 text-base text-white/90">
                   Salt Seed Backup
                 </h3>
-                <p className="mb-3 text-sm text-white/80">
+                <p className="mb-3 text-sm text-white/90">
                   This is the content of the downloadable backup file, and the
                   data used to generate the commitment hash.
                 </p>
diff --git a/components/court/JoinCourtAsJurorButton.tsx b/components/court/JoinCourtAsJurorButton.tsx
index bb9086f7c..9095c3ea8 100644
--- a/components/court/JoinCourtAsJurorButton.tsx
+++ b/components/court/JoinCourtAsJurorButton.tsx
@@ -100,7 +100,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
       <div className="relative">
         <button
           disabled={isLoading}
-          className={`rounded-md bg-[#DC056C] px-4 py-2 text-white transition-all  ${
+          className={`rounded-md bg-[#DC056C] px-4 py-2 text-white/90 transition-all  ${
             connectedParticipant?.type === "Delegator" &&
             "ring-2 ring-orange-500"
           } ${className}`}
@@ -116,7 +116,7 @@ const JoinCourtAsJurorButton = ({ className }: { className?: string }) => {
               overlay={false}
               position="top-end"
               popoverCss="-ml-12"
-              icon={<IoIosInformation className="text-white" />}
+              icon={<IoIosInformation className="text-white/90" />}
             >
               You are currently delegating to other jurors. If you join the
               court as a juror, your delegations will be removed and delegated
diff --git a/components/court/ManageDelegationButton.tsx b/components/court/ManageDelegationButton.tsx
index cd0dd1832..1f419b3da 100644
--- a/components/court/ManageDelegationButton.tsx
+++ b/components/court/ManageDelegationButton.tsx
@@ -14,7 +14,7 @@ const ManageDelegationButton = ({ className }: { className?: string }) => {
     <>
       <div className="relative">
         <button
-          className={`rounded-md bg-[#DC056C] px-4 py-2 text-white transition-all  ${
+          className={`rounded-md bg-[#DC056C] px-4 py-2 text-white/90 transition-all  ${
             connectedParticipant?.type === "Juror" && "ring-2 ring-orange-500"
           } ${className}`}
           onClick={() => setIsOpen(true)}
@@ -31,7 +31,7 @@ const ManageDelegationButton = ({ className }: { className?: string }) => {
               overlay={false}
               position="top-end"
               popoverCss="-ml-12"
-              icon={<IoIosInformation className="text-white" />}
+              icon={<IoIosInformation className="text-white/90" />}
             >
               You are currently a juror. If you delegate to other jurors your
               stake will be removed from your personal stake and delegated
diff --git a/components/court/learn/CourtDocsArticle.tsx b/components/court/learn/CourtDocsArticle.tsx
index a56fa6351..003d2f629 100644
--- a/components/court/learn/CourtDocsArticle.tsx
+++ b/components/court/learn/CourtDocsArticle.tsx
@@ -25,9 +25,9 @@ export const CourtDocsArticle = ({
           }}
         />
       </div>
-      <div className="relative z-20 text-white">
+      <div className="relative z-20 text-white/90">
         <div className="mb-2">
-          <h3 className="text-white drop-shadow-lg">Decentralized Court</h3>
+          <h3 className="text-white/90 drop-shadow-lg">Decentralized Court</h3>
         </div>
         <p className="mb-6 drop-shadow-lg">
           Zeitgeist implements a decentralized court to handle disputes that may
@@ -37,7 +37,7 @@ export const CourtDocsArticle = ({
           <Link
             href="https://docs.zeitgeist.pm/docs/learn/court"
             target="_blank"
-            className="center relative z-20 cursor-pointer gap-2 rounded-md bg-purple-400 bg-opacity-90 px-6 py-2 text-white"
+            className="center relative z-20 cursor-pointer gap-2 rounded-md bg-purple-400 bg-opacity-90 px-6 py-2 text-white/90"
           >
             <PiBooks />
             Learn More
diff --git a/components/create/editor/ComboEditor.tsx b/components/create/editor/ComboEditor.tsx
index 4bada3366..755d58188 100644
--- a/components/create/editor/ComboEditor.tsx
+++ b/components/create/editor/ComboEditor.tsx
@@ -90,10 +90,10 @@ const MarketSelect: React.FC<MarketSelectProps> = ({
     Option: ({ children, ...props }: any) => (
       <components.Option {...props}>
         <div>
-          <div className="text-sm font-medium text-white">
+          <div className="text-sm font-medium text-white/90">
             {children}
           </div>
-          <div className="mt-1 text-xs text-white/80">
+          <div className="mt-1 text-xs text-white/90">
             {props.data.description}
           </div>
         </div>
@@ -105,7 +105,7 @@ const MarketSelect: React.FC<MarketSelectProps> = ({
       </div>
     ),
     NoOptionsMessage: ({ inputValue }: any) => (
-      <div className="p-3 text-center text-sm text-white/80">
+      <div className="p-3 text-center text-sm text-white/90">
         {inputValue ? "No markets found" : "No active markets available"}
       </div>
     ),
@@ -194,7 +194,7 @@ const MarketSelect: React.FC<MarketSelectProps> = ({
 
   return (
     <div className="mb-4" ref={controlRef}>
-      <label className="mb-2 block text-sm font-semibold text-white md:text-base">
+      <label className="mb-2 block text-sm font-semibold text-white/90 md:text-base">
         Select Market {selectedCount + 1} ({selectedCount}/{maxSelections})
       </label>
       <Select<MarketOption>
@@ -553,7 +553,7 @@ const ComboMarketEditor: React.FC = () => {
   return (
     <div className="pb-4 md:pb-6">
       <div className="mb-6">
-        <h1 className="mb-3 text-center text-2xl font-bold text-white md:text-3xl">
+        <h1 className="mb-3 text-center text-2xl font-bold text-white/90 md:text-3xl">
           Create Combinatorial Market
         </h1>
 
@@ -564,8 +564,8 @@ const ComboMarketEditor: React.FC = () => {
               <div className="rounded-lg border border-white/20 bg-white/10 p-3 shadow-lg backdrop-blur-lg md:p-4">
                 <Disclosure.Button className="flex w-full items-center justify-between text-left">
                   <div className="flex items-center gap-2">
-                    <Info size={18} className="text-ztg-green-400" />
-                    <h3 className="text-sm font-semibold text-white md:text-base">
+                    <Info size={18} className="text-ztg-green-500" />
+                    <h3 className="text-sm font-semibold text-white/90 md:text-base">
                       How Combinatorial Markets Work
                     </h3>
                   </div>
@@ -581,34 +581,34 @@ const ComboMarketEditor: React.FC = () => {
                     in one market given an outcome in another.{" "}
                     <strong className="text-blue-300">Market 1 ("Assume")</strong>{" "}
                     is the condition, and{" "}
-                    <strong className="text-ztg-green-400">Market 2 ("Then")</strong>{" "}
+                    <strong className="text-ztg-green-500">Market 2 ("Then")</strong>{" "}
                     is the consequence.
                   </p>
                   <div className="grid gap-2 md:grid-cols-2">
                     <div className="rounded-md bg-white/5 p-2.5 shadow-sm backdrop-blur-sm">
-                      <div className="mb-1 text-xs font-semibold text-white/80">
+                      <div className="mb-1 text-xs font-semibold text-white/90">
                         Example 1:
                       </div>
-                      <p className="text-xs leading-relaxed text-white/75">
+                      <p className="text-xs leading-relaxed text-white/90/75">
                         <strong className="text-blue-300">Assume:</strong>{" "}
                         "Referendum #1764 passes",{" "}
                         <strong className="text-blue-300">No</strong> <br />
-                        <strong className="text-ztg-green-400">THEN:</strong>{" "}
+                        <strong className="text-ztg-green-500">THEN:</strong>{" "}
                         "Ecosystem gains 100k new users",{" "}
-                        <strong className="text-ztg-green-400">Short</strong>
+                        <strong className="text-ztg-green-500">Short</strong>
                       </p>
                     </div>
                     <div className="rounded-md bg-white/5 p-2.5 shadow-sm backdrop-blur-sm">
-                      <div className="mb-1 text-xs font-semibold text-white/80">
+                      <div className="mb-1 text-xs font-semibold text-white/90">
                         Example 2:
                       </div>
-                      <p className="text-xs leading-relaxed text-white/75">
+                      <p className="text-xs leading-relaxed text-white/90/75">
                         <strong className="text-blue-300">Assume:</strong>{" "}
                         "Lakers win championship",{" "}
                         <strong className="text-blue-300">Yes</strong> <br />
-                        <strong className="text-ztg-green-400">THEN:</strong>{" "}
+                        <strong className="text-ztg-green-500">THEN:</strong>{" "}
                         "Bitcoin reaches $100k",{" "}
-                        <strong className="text-ztg-green-400">Long</strong>
+                        <strong className="text-ztg-green-500">Long</strong>
                       </p>
                     </div>
                   </div>
@@ -621,7 +621,7 @@ const ComboMarketEditor: React.FC = () => {
 
       {/* Market Selection */}
       <div className="mb-6 rounded-lg border border-white/20 bg-white/10 p-4 shadow-lg backdrop-blur-lg md:p-5">
-        <h2 className="mb-4 flex items-center gap-2 text-base font-semibold text-white md:text-lg">
+        <h2 className="mb-4 flex items-center gap-2 text-base font-semibold text-white/90 md:text-lg">
           <span className="h-1 w-8 rounded-full bg-ztg-green-500"></span>
           Step 1: Select Markets
         </h2>
@@ -646,18 +646,18 @@ const ComboMarketEditor: React.FC = () => {
                           className={`text-xs font-semibold ${
                             index === 0
                               ? "text-blue-300"
-                              : "text-ztg-green-400"
+                              : "text-ztg-green-500"
                           }`}
                         >
                           {marketRole}
                         </span>
                       </div>
-                      <h3 className="mb-1 text-sm font-medium text-white line-clamp-2">
+                      <h3 className="mb-1 text-sm font-medium text-white/90 line-clamp-2">
                         {market.question}
                       </h3>
                       <p className="text-xs text-white/70">
                         {market.categories?.length} Outcomes:{" "}
-                        <span className="text-white/80">
+                        <span className="text-white/90">
                           {market.categories
                             ?.slice(0, 2)
                             .map((cat) => cat.name)
@@ -670,7 +670,7 @@ const ComboMarketEditor: React.FC = () => {
                     </div>
                     <button
                       onClick={() => removeMarket(market.marketId)}
-                      className="flex-shrink-0 rounded p-1 text-white/60 transition-all hover:bg-white/10 hover:text-white active:scale-95"
+                      className="flex-shrink-0 rounded p-1 text-white/90/60 transition-all hover:bg-white/10 hover:text-white/90 active:scale-95"
                       title="Remove market"
                     >
                       <AiOutlineClose size={16} />
@@ -701,7 +701,7 @@ const ComboMarketEditor: React.FC = () => {
                 size={16}
               />
               <div className="flex-1">
-                <p className="text-xs font-semibold text-white md:text-sm">
+                <p className="text-xs font-semibold text-white/90 md:text-sm">
                   Duplicate Markets Detected
                 </p>
                 <p className="mt-1 text-xs text-white/90 md:text-sm">
@@ -710,7 +710,7 @@ const ComboMarketEditor: React.FC = () => {
                     href={`/multi-market/${duplicatePool.poolId}`}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="font-semibold text-ztg-green-400 underline transition-colors hover:text-ztg-green-300"
+                    className="font-semibold text-ztg-green-500 underline transition-colors hover:text-ztg-green-500"
                   >
                     Combo Pool #{duplicatePool.poolId}
                   </a>
@@ -759,7 +759,7 @@ const ComboMarketEditor: React.FC = () => {
       {outcomeCombinations.length > 0 && form.selectedMarkets.length === 2 && (
         <div className="mb-6 rounded-lg border border-white/20 bg-white/10 p-4 shadow-lg backdrop-blur-lg md:p-5">
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="flex items-center gap-2 text-base font-semibold text-white md:text-lg">
+            <h2 className="flex items-center gap-2 text-base font-semibold text-white/90 md:text-lg">
               <span className="h-1 w-8 rounded-full bg-ztg-green-500"></span>
               Step 2: Set Initial Prices ({outcomeCombinations.length} Outcomes)
             </h2>
@@ -776,7 +776,7 @@ const ComboMarketEditor: React.FC = () => {
                         return sum + (isNaN(numPrice) ? 0 : numPrice);
                       }, 0) - 100,
                     ) < 0.01
-                      ? "text-ztg-green-400"
+                      ? "text-ztg-green-500"
                       : "text-ztg-red-400"
                   }`}
                 >
@@ -808,13 +808,13 @@ const ComboMarketEditor: React.FC = () => {
                 >
                   {/* Outcome Name - Compact */}
                   <div className="flex-1 min-w-0">
-                    <div className="mb-1 text-xs font-semibold text-white">
+                    <div className="mb-1 text-xs font-semibold text-white/90">
                       {combination.name}
                     </div>
                     <div className="text-xs text-white/70">
                       <span className="text-blue-300">Assume:</span>{" "}
                       {combination.market1Outcome} •{" "}
-                      <span className="text-ztg-green-400">Then:</span>{" "}
+                      <span className="text-ztg-green-500">Then:</span>{" "}
                       {combination.market2Outcome}
                     </div>
                   </div>
@@ -822,10 +822,10 @@ const ComboMarketEditor: React.FC = () => {
                   {/* Pricing - Compact */}
                   <div className="flex items-center gap-2">
                     <div className="text-right">
-                      <div className="text-sm font-semibold text-white">
+                      <div className="text-sm font-semibold text-white/90">
                         ${spotPrice}
                       </div>
-                      <div className="text-xxs text-white/60">price</div>
+                      <div className="text-xxs text-white/90/60">price</div>
                     </div>
                     <div className="flex items-center gap-1">
                       <Input
@@ -834,7 +834,7 @@ const ComboMarketEditor: React.FC = () => {
                         onChange={(e) =>
                           updateSpotPrice(index, e.target.value)
                         }
-                        className="w-20 bg-white/10 px-3 py-2 text-right text-sm text-white backdrop-blur-sm"
+                        className="w-20 bg-white/10 px-3 py-2 text-right text-sm text-white/90 backdrop-blur-sm"
                         step="0.1"
                         min="0"
                         max="95"
@@ -864,14 +864,14 @@ const ComboMarketEditor: React.FC = () => {
       {form.selectedMarkets.length === 2 && (
         <div className="mb-6 rounded-lg border border-white/20 bg-white/10 p-4 shadow-lg backdrop-blur-lg md:p-5">
           <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-            <label className="flex items-center gap-2 text-sm font-semibold text-white md:text-base">
+            <label className="flex items-center gap-2 text-sm font-semibold text-white/90 md:text-base">
               <span className="h-1 w-8 rounded-full bg-ztg-green-500"></span>
               Step 3: Initial Liquidity
             </label>
             <div className="flex items-center gap-3">
               <Input
                 type="number"
-                className="w-28 bg-white/10 px-3 py-2 text-sm text-white backdrop-blur-sm"
+                className="w-28 bg-white/10 px-3 py-2 text-sm text-white/90 backdrop-blur-sm"
                 value={form.liquidityAmount}
                 onChange={(e) => updateLiquidityAmount(e.target.value)}
                 onKeyDown={handleKeyDown}
@@ -882,7 +882,7 @@ const ComboMarketEditor: React.FC = () => {
                 {form.selectedMarkets[0]?.baseAsset.toLocaleUpperCase() ||
                   "ZTG"}
               </span>
-              <span className="text-xs text-white/60">(min: 200)</span>
+              <span className="text-xs text-white/90/60">(min: 200)</span>
             </div>
           </div>
           {errors.liquidityAmount && (
@@ -919,9 +919,9 @@ const ComboMarketEditor: React.FC = () => {
             </div>
 
             {fee && !duplicatePool && (
-              <p className="text-center text-xs text-white/80 md:text-sm">
+              <p className="text-center text-xs text-white/90 md:text-sm">
                 Estimated fee:{" "}
-                <span className="font-semibold text-white">
+                <span className="font-semibold text-white/90">
                   {formatNumberCompact(fee.amount.div(ZTG).toNumber())}{" "}
                   {fee.symbol}
                 </span>
@@ -929,19 +929,19 @@ const ComboMarketEditor: React.FC = () => {
             )}
 
             {!wallet.activeAccount && (
-              <div className="rounded-md border-2 border-orange-500/60 bg-white/10 px-3 py-2 text-center text-xs text-white backdrop-blur-lg md:text-sm">
+              <div className="rounded-md border-2 border-orange-500/60 bg-white/10 px-3 py-2 text-center text-xs text-white/90 backdrop-blur-lg md:text-sm">
                 Please connect your wallet to deploy the pool
               </div>
             )}
 
             {duplicatePool && (
-              <div className="rounded-md border-2 border-orange-500/60 bg-white/10 px-3 py-2 text-center text-xs text-white backdrop-blur-lg md:text-sm">
+              <div className="rounded-md border-2 border-orange-500/60 bg-white/10 px-3 py-2 text-center text-xs text-white/90 backdrop-blur-lg md:text-sm">
                 Cannot deploy: A combo with these markets already exists as{" "}
                 <a
                   href={`/multi-market/${duplicatePool.poolId}`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="font-semibold text-ztg-green-400 underline transition-colors hover:text-ztg-green-300"
+                  className="font-semibold text-ztg-green-500 underline transition-colors hover:text-ztg-green-500"
                 >
                   Combo Pool #{duplicatePool.poolId}
                 </a>
diff --git a/components/create/editor/CostCalculator.tsx b/components/create/editor/CostCalculator.tsx
index 822e9820b..e85e032f8 100644
--- a/components/create/editor/CostCalculator.tsx
+++ b/components/create/editor/CostCalculator.tsx
@@ -23,6 +23,7 @@ import { timelineAsBlocks } from "lib/state/market-creation/types/timeline";
 import { shortenAddress } from "lib/util";
 import momentTz from "moment-timezone";
 import dynamic from "next/dynamic";
+import { minBaseLiquidity } from "lib/state/market-creation/constants/currency";
 
 const QuillViewer = dynamic(() => import("components/ui/QuillViewer"), {
   ssr: false,
@@ -100,15 +101,30 @@ export const CostCalculator = ({
     ? feeDetails?.amount
     : new Decimal(0);
 
+  // Calculate liquidity cost: use minimum if deploying permissionless market with ZTG
+  // and amount is below minimum or empty
+  const liquidityAmount = useMemo(() => {
+    if (
+      editor.form.moderation === "Permissionless" &&
+      editor.form.liquidity?.deploy &&
+      editor.form.currency === "ZTG"
+    ) {
+      const enteredAmount = new Decimal(editor.form.liquidity.amount || 0).toNumber();
+      const minimum = minBaseLiquidity[editor.form.currency] ?? 0;
+      // Use minimum if amount is 0, empty, or below minimum
+      return Math.max(enteredAmount, minimum);
+    }
+    return 0;
+  }, [
+    editor.form.moderation,
+    editor.form.liquidity?.deploy,
+    editor.form.liquidity?.amount,
+    editor.form.currency,
+  ]);
+
   const ztgCost = new Decimal(bondCost ?? 0)
     .plus(oracleBond ?? 0)
-    .plus(
-      editor.form.moderation === "Permissionless" &&
-        editor.form.liquidity?.deploy &&
-        editor.form.currency === "ZTG"
-        ? new Decimal(editor.form.liquidity.amount || 0).toNumber()
-        : 0,
-    )
+    .plus(liquidityAmount)
     .plus(ztgTransactionFee ?? 0);
 
   const baseAssetTransactionFee = assetsAreEqual(
@@ -174,19 +190,19 @@ export const CostCalculator = ({
                 <div className="flex items-baseline gap-2">
                   {shouldShowBreakdown ? (
                     <>
-                      <span className="text-lg font-bold text-white md:text-xl">
+                      <span className="text-lg font-bold text-white/90 md:text-xl">
                         {ztgCost.toFixed(3)} ZTG
                       </span>
-                      <span className="text-lg font-bold text-white md:text-xl">
+                      <span className="text-lg font-bold text-white/90 md:text-xl">
                         +
                       </span>
-                      <span className="text-lg font-bold text-white md:text-xl">
+                      <span className="text-lg font-bold text-white/90 md:text-xl">
                         {foreignCurrencyCost.toNumber().toFixed(1)}{" "}
                         {editor.form.currency}
                       </span>
                     </>
                   ) : (
-                    <span className="text-lg font-bold text-white md:text-xl">
+                    <span className="text-lg font-bold text-white/90 md:text-xl">
                       {ztgCost.toFixed(3)} ZTG
                     </span>
                   )}
@@ -195,13 +211,13 @@ export const CostCalculator = ({
               <div className="flex items-center gap-2">
                 <button
                   onClick={() => setResetConfirmOpen(true)}
-                  className="rounded-lg border-2 border-white/20 bg-white/5 px-4 py-2 text-xs font-semibold text-white/80 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/10 active:scale-95 md:px-5 md:py-2.5 md:text-sm"
+                  className="rounded-lg border-2 border-white/20 bg-white/5 px-4 py-2 text-xs font-semibold text-white/90 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/10 active:scale-95 md:px-5 md:py-2.5 md:text-sm"
                 >
                   Reset
                 </button>
                 <button
                   onClick={() => setDetailsOpen(true)}
-                  className="rounded-lg bg-white/10 px-4 py-2 text-xs font-semibold text-white backdrop-blur-sm transition-all hover:bg-white/20 active:scale-95 md:px-5 md:py-2.5 md:text-sm"
+                  className="rounded-lg bg-white/10 px-4 py-2 text-xs font-semibold text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 active:scale-95 md:px-5 md:py-2.5 md:text-sm"
                 >
                   View Summary
                 </button>
@@ -218,6 +234,7 @@ export const CostCalculator = ({
           oracleBond={oracleBond}
           feeDetails={feeDetails}
           ztgCost={ztgCost}
+          liquidityAmount={liquidityAmount}
           foreignCurrencyCost={foreignCurrencyCost}
           foreignCurrencyCostUsd={foreignCurrencyCostUsd}
           baseCurrency={baseCurrency}
@@ -251,17 +268,17 @@ export const CostCalculator = ({
             <div className="flex items-baseline gap-2">
               {shouldShowBreakdown ? (
                 <>
-                  <span className="text-xl font-bold text-white">
+                  <span className="text-xl font-bold text-white/90">
                     {ztgCost.toFixed(3)} ZTG
                   </span>
-                  <span className="text-xl font-bold text-white">+</span>
-                  <span className="text-xl font-bold text-white">
+                  <span className="text-xl font-bold text-white/90">+</span>
+                  <span className="text-xl font-bold text-white/90">
                     {foreignCurrencyCost.toNumber().toFixed(1)}{" "}
                     {editor.form.currency}
                   </span>
                 </>
               ) : (
-                <span className="text-xl font-bold text-white">
+                <span className="text-xl font-bold text-white/90">
                   {ztgCost.toFixed(3)} ZTG
                 </span>
               )}
@@ -295,7 +312,7 @@ export const CostCalculator = ({
               editor.form.currency === "ZTG" && (
                 <CostBreakdownItem
                   label="Liquidity"
-                  value={`${editor.form.liquidity.amount || 0} ${editor.form.currency}`}
+                  value={`${liquidityAmount} ${editor.form.currency}`}
                   description="Can be withdrawn at any time"
                 />
               )}
@@ -345,10 +362,10 @@ const CostBreakdownItem = ({
   return (
     <div className="flex items-start justify-between gap-4">
       <div className="flex-1">
-        <div className="text-xs font-semibold text-white">{label}</div>
+        <div className="text-xs font-semibold text-white/90">{label}</div>
         <div className="mt-0.5 text-xs text-white/70">{description}</div>
       </div>
-      <div className="text-sm font-semibold text-white">{value}</div>
+      <div className="text-sm font-semibold text-white/90">{value}</div>
     </div>
   );
 };
@@ -362,6 +379,7 @@ const CostDetailsModal = ({
   oracleBond,
   feeDetails,
   ztgCost,
+  liquidityAmount,
   foreignCurrencyCost,
   foreignCurrencyCostUsd,
   baseCurrency,
@@ -378,6 +396,7 @@ const CostDetailsModal = ({
   oracleBond?: number;
   feeDetails?: any;
   ztgCost: Decimal;
+  liquidityAmount: number;
   foreignCurrencyCost: Decimal | null;
   foreignCurrencyCostUsd: Decimal | null;
   baseCurrency: any;
@@ -429,8 +448,8 @@ const CostDetailsModal = ({
                     className={({ selected }) =>
                       `border-b-2 px-3 pb-2 text-sm font-semibold transition-colors ${
                         selected
-                          ? "border-ztg-green-500 text-white"
-                          : "border-transparent text-white/60 hover:text-white/80"
+                          ? "border-ztg-green-500 text-white/90"
+                          : "border-transparent text-white/90/60 hover:text-white/90"
                       }`
                     }
                   >
@@ -448,7 +467,7 @@ const CostDetailsModal = ({
                       <label className="text-xs font-semibold text-white/70">
                         Market Question
                       </label>
-                      <p className="text-sm font-medium text-white">
+                      <p className="text-sm font-medium text-white/90">
                         {form?.question || (
                           <span className="text-orange-400">
                             No question given
@@ -474,7 +493,7 @@ const CostDetailsModal = ({
                                   key={idx}
                                   className="rounded border border-white/20 bg-white/5 px-2 py-1.5"
                                 >
-                                  <div className="text-xs font-medium uppercase text-white">
+                                  <div className="text-xs font-medium uppercase text-white/90">
                                     {answer}
                                   </div>
                                 </div>
@@ -488,7 +507,7 @@ const CostDetailsModal = ({
                               <div className="text-xs text-white/70">
                                 Short (Lower)
                               </div>
-                              <div className="text-xs font-medium text-white">
+                              <div className="text-xs font-medium text-white/90">
                                 {form.answers.numberType === "date"
                                   ? new Date(
                                       (form.answers.answers as number[])[0],
@@ -500,7 +519,7 @@ const CostDetailsModal = ({
                               <div className="text-xs text-white/70">
                                 Long (Upper)
                               </div>
-                              <div className="text-xs font-medium text-white">
+                              <div className="text-xs font-medium text-white/90">
                                 {form.answers.numberType === "date"
                                   ? new Date(
                                       (form.answers.answers as number[])[1],
@@ -513,12 +532,12 @@ const CostDetailsModal = ({
                         {form.answers.type === "yes/no" && (
                           <div className="grid gap-2 sm:grid-cols-2">
                             <div className="rounded border border-white/20 bg-white/5 px-2 py-1.5">
-                              <div className="text-xs font-medium uppercase text-white">
+                              <div className="text-xs font-medium uppercase text-white/90">
                                 Yes
                               </div>
                             </div>
                             <div className="rounded border border-white/20 bg-white/5 px-2 py-1.5">
-                              <div className="text-xs font-medium uppercase text-white">
+                              <div className="text-xs font-medium uppercase text-white/90">
                                 No
                               </div>
                             </div>
@@ -536,19 +555,19 @@ const CostDetailsModal = ({
                         <div className="space-y-1.5 text-xs">
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Currency:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {form.currency || "--"}
                             </span>
                           </div>
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Type:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {form.moderation || "--"}
                             </span>
                           </div>
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Creator Fee:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {form.creatorFee?.value || "0"}%
                             </span>
                           </div>
@@ -562,7 +581,7 @@ const CostDetailsModal = ({
                         <div className="space-y-1.5 text-xs">
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">End Date:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {form.endDate
                                 ? momentTz
                                     .tz(form.endDate, form.timeZone || "UTC")
@@ -572,7 +591,7 @@ const CostDetailsModal = ({
                           </div>
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Reporting:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {timeline?.report?.period
                                 ? blocksAsDuration(
                                     timeline.report.period,
@@ -582,7 +601,7 @@ const CostDetailsModal = ({
                           </div>
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Dispute:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {timeline?.dispute?.period
                                 ? blocksAsDuration(
                                     timeline.dispute.period,
@@ -600,7 +619,7 @@ const CostDetailsModal = ({
                         <label className="text-xs font-semibold text-white/70">
                           Oracle Account
                         </label>
-                        <p className="font-mono text-xs font-medium text-white">
+                        <p className="font-mono text-xs font-medium text-white/90">
                           {form?.oracle
                             ? shortenAddress(form.oracle, 8, 8)
                             : "--"}
@@ -616,13 +635,13 @@ const CostDetailsModal = ({
                           <div className="space-y-1 text-xs">
                             <div className="flex items-center justify-between">
                               <span className="text-white/70">Amount:</span>
-                              <span className="font-medium text-white">
+                              <span className="font-medium text-white/90">
                                 {form.liquidity.amount} {form.currency}
                               </span>
                             </div>
                             <div className="flex items-center justify-between">
                               <span className="text-white/70">Swap Fee:</span>
-                              <span className="font-medium text-white">
+                              <span className="font-medium text-white/90">
                                 {form.liquidity.swapFee?.value || "--"}%
                               </span>
                             </div>
@@ -675,7 +694,7 @@ const CostDetailsModal = ({
                       editor.form.liquidity?.deploy && (
                         <CostBreakdownItem
                           label="Liquidity"
-                          value={`${new Decimal(editor.form.liquidity.amount || 0).toFixed(1)} ${editor.form.currency}`}
+                          value={`${liquidityAmount.toFixed(1)} ${editor.form.currency}`}
                           description="Can be withdrawn at any time, will collect fees but subject to impermanent loss."
                         />
                       )}
@@ -687,7 +706,7 @@ const CostDetailsModal = ({
                     <div className="border-t-2 border-white/20 pt-4">
                       <div className="flex items-center justify-between">
                         <div>
-                          <div className="text-sm font-semibold text-white">
+                          <div className="text-sm font-semibold text-white/90">
                             Total
                           </div>
                           <div className="mt-0.5 text-xs text-white/70">
@@ -697,16 +716,16 @@ const CostDetailsModal = ({
                         <div className="text-right">
                           {shouldShowBreakdown ? (
                             <>
-                              <div className="text-lg font-bold text-white">
+                              <div className="text-lg font-bold text-white/90">
                                 {ztgCost.toFixed(3)} ZTG
                               </div>
-                              <div className="text-sm font-semibold text-white">
+                              <div className="text-sm font-semibold text-white/90">
                                 + {foreignCurrencyCost.toNumber().toFixed(1)}{" "}
                                 {editor.form.currency}
                               </div>
                             </>
                           ) : (
-                            <div className="text-lg font-bold text-white">
+                            <div className="text-lg font-bold text-white/90">
                               {ztgCost.toFixed(3)} ZTG
                             </div>
                           )}
@@ -757,7 +776,7 @@ const ResetConfirmationModal = ({
   return (
     <Modal open={open} onClose={onClose}>
       <ModalPanel size="sm" className="p-6 md:p-8">
-        <h2 className="mb-4 text-lg font-bold text-white md:text-xl">
+        <h2 className="mb-4 text-lg font-bold text-white/90 md:text-xl">
           Reset Form
         </h2>
         <p className="mb-6 text-sm text-white/70">
@@ -767,13 +786,13 @@ const ResetConfirmationModal = ({
         <div className="flex items-center justify-end gap-3">
           <button
             onClick={onClose}
-            className="rounded-lg border-2 border-white/20 bg-white/5 px-4 py-2 text-sm font-semibold text-white/80 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/10 active:scale-95 md:px-5 md:py-2.5"
+            className="rounded-lg border-2 border-white/20 bg-white/5 px-4 py-2 text-sm font-semibold text-white/90 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/10 active:scale-95 md:px-5 md:py-2.5"
           >
             Cancel
           </button>
           <button
             onClick={onConfirm}
-            className="rounded-lg border-2 border-ztg-red-500/60 bg-ztg-red-500/90 px-4 py-2 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:border-ztg-red-400 hover:bg-ztg-red-500 active:scale-95 md:px-5 md:py-2.5"
+            className="rounded-lg border-2 border-ztg-red-500/60 bg-ztg-red-500/90 px-4 py-2 text-sm font-semibold text-white/90 backdrop-blur-sm transition-all hover:border-ztg-red-400 hover:bg-ztg-red-500 active:scale-95 md:px-5 md:py-2.5"
           >
             Reset
           </button>
diff --git a/components/create/editor/Editor.tsx b/components/create/editor/Editor.tsx
index 30f95b11f..fbf5343dc 100644
--- a/components/create/editor/Editor.tsx
+++ b/components/create/editor/Editor.tsx
@@ -276,7 +276,7 @@ export const MarketEditor = () => {
                     Outcomes will create a categorical market from the options
                     you specify.{" "}
                     <a
-                      className="text-ztg-blue"
+                      className="text-ztg-green-500"
                       href="https://docs.zeitgeist.pm/docs/learn/prediction-markets#categorical-prediction-markets"
                       target="_blank"
                     >
@@ -290,7 +290,7 @@ export const MarketEditor = () => {
                     upper(
                     <b>long</b>) bound.{" "}
                     <a
-                      className="text-ztg-blue"
+                      className="text-ztg-green-500"
                       href="https://docs.zeitgeist.pm/docs/learn/prediction-markets#scalar-prediction-markets"
                       target="_blank"
                     >
diff --git a/components/create/editor/EditorCompact.tsx b/components/create/editor/EditorCompact.tsx
index edde4b169..7598ebc3f 100644
--- a/components/create/editor/EditorCompact.tsx
+++ b/components/create/editor/EditorCompact.tsx
@@ -160,7 +160,7 @@ export const MarketEditorCompact = () => {
                 <div className="flex shrink-0 items-center gap-2">
                   {prevStepFrom(steps, currentStep) && (
                     <button
-                      className="h-8 rounded-lg bg-white/10 px-4 text-xs font-semibold text-white backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 active:scale-95 sm:h-10 sm:px-5 sm:text-sm"
+                      className="h-8 rounded-lg bg-white/10 px-4 text-xs font-semibold text-white/90 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 active:scale-95 sm:h-10 sm:px-5 sm:text-sm"
                       onClick={back}
                       type="button"
                     >
@@ -205,8 +205,8 @@ export const MarketEditorCompact = () => {
                             !fieldsState.moderation.isValid ||
                             !fieldsState.liquidity.isValid ||
                             !fieldsState.answers.isValid))
-                          ? "cursor-not-allowed border-white/20 bg-white/5 text-white/40"
-                          : "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+                          ? "cursor-not-allowed border-white/20 bg-white/5 text-white/90/40"
+                          : "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
                       }`}
                       type="button"
                       onClick={next}
@@ -235,7 +235,7 @@ export const MarketEditorCompact = () => {
               <div className="space-y-6">
                 {/* Step Header with Description */}
                 <div className="mb-4">
-                  <h2 className="mb-1 text-lg font-bold text-white md:text-xl">
+                  <h2 className="mb-1 text-lg font-bold text-white/90 md:text-xl">
                     Start with Your Question
                   </h2>
                   <p className="text-sm text-white/70">
@@ -256,13 +256,13 @@ export const MarketEditorCompact = () => {
                         : "border-transparent"
                   }`}
                 >
-                  <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                  <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                     Market Question <span className="text-ztg-red-400">*</span>
                     <Tooltip content="Make it specific with a clear timeframe and resolution criteria. Example: 'Will Bitcoin reach $100k by Dec 31, 2024?'" />
                   </label>
                   <Input
                     autoComplete="off"
-                    className="h-12 w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 text-sm text-white backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
+                    className="h-12 w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
                     placeholder="e.g., Will Bitcoin reach $100k by Dec 31, 2024?"
                     {...input("question", { type: "text" })}
                   />
@@ -289,7 +289,7 @@ export const MarketEditorCompact = () => {
                           : "border-transparent"
                     }`}
                   >
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Outcome Selection{" "}
                       <span className="text-ztg-red-400">*</span>
                       <Tooltip content="Categorical: Multiple choice options | Scalar: Number or date range | Yes/No: Simple binary question" />
@@ -320,7 +320,7 @@ export const MarketEditorCompact = () => {
                           : "border-transparent"
                     }`}
                   >
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Categories <span className="text-ztg-red-400">*</span>
                       <Tooltip content="Select one or more categories to help traders find your market" />
                     </label>
@@ -343,14 +343,14 @@ export const MarketEditorCompact = () => {
                   {({ open }) => (
                     <div className="rounded-lg bg-white/10 backdrop-blur-sm">
                       <Disclosure.Button className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-white/5">
-                        <span className="text-sm font-semibold text-white">
+                        <span className="text-sm font-semibold text-white/90">
                           Description{" "}
-                          <span className="font-normal text-white/60">
+                          <span className="font-normal text-white/90/60">
                             (Optional)
                           </span>
                         </span>
                         <LuChevronDown
-                          className={`h-4 w-4 text-white transition-transform ${
+                          className={`h-4 w-4 text-white/90 transition-transform ${
                             open ? "rotate-180" : ""
                           }`}
                         />
@@ -384,7 +384,7 @@ export const MarketEditorCompact = () => {
               <div className="space-y-6">
                 {/* Step Header */}
                 <div className="mb-4">
-                  <h2 className="mb-1 text-lg font-bold text-white md:text-xl">
+                  <h2 className="mb-1 text-lg font-bold text-white/90 md:text-xl">
                     Set the Timeline
                   </h2>
                   <p className="text-sm text-white/70">
@@ -406,7 +406,7 @@ export const MarketEditorCompact = () => {
                           : "border-transparent"
                     }`}
                   >
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Market End Date{" "}
                       <span className="text-ztg-red-400">*</span>
                       <Tooltip content="When trading stops and the market closes. Oracle must report outcome after this date." />
@@ -458,7 +458,7 @@ export const MarketEditorCompact = () => {
                     }`}
                   >
                     <div className="mb-2">
-                      <h3 className="text-sm font-semibold text-white">
+                      <h3 className="text-sm font-semibold text-white/90">
                         Resolution Timeline
                       </h3>
                       <p className="mt-1 text-xs text-white/70">
@@ -469,7 +469,7 @@ export const MarketEditorCompact = () => {
                     <div className="grid gap-4 md:grid-cols-2">
                       {/* Reporting Period */}
                       <div className="space-y-2">
-                        <label className="flex items-center gap-2 text-xs font-semibold text-white">
+                        <label className="flex items-center gap-2 text-xs font-semibold text-white/90">
                           Reporting Window{" "}
                           <span className="text-ztg-red-400">*</span>
                           <Tooltip content="How long the oracle has to submit the outcome after the market ends. Recommended: 1-2 weeks for most markets." />
@@ -495,7 +495,7 @@ export const MarketEditorCompact = () => {
                           )}
                         {fieldsState.endDate.isValid &&
                           !fieldsState.reportingPeriod.isTouched && (
-                            <p className="text-xs text-white/60">
+                            <p className="text-xs text-white/90/60">
                               💡 Tip: Give your oracle enough time to gather
                               data and report accurately
                             </p>
@@ -504,7 +504,7 @@ export const MarketEditorCompact = () => {
 
                       {/* Dispute Period */}
                       <div className="space-y-2">
-                        <label className="flex items-center gap-2 text-xs font-semibold text-white">
+                        <label className="flex items-center gap-2 text-xs font-semibold text-white/90">
                           Dispute Window{" "}
                           <span className="text-ztg-red-400">*</span>
                           <Tooltip content="How long outcomes can be disputed before finalization. Recommended: 3-7 days to allow for corrections." />
@@ -528,7 +528,7 @@ export const MarketEditorCompact = () => {
                           )}
                         {fieldsState.endDate.isValid &&
                           !fieldsState.disputePeriod.isTouched && (
-                            <p className="text-xs text-white/60">
+                            <p className="text-xs text-white/90/60">
                               💡 Tip: A dispute period protects against
                               incorrect outcomes
                             </p>
@@ -549,7 +549,7 @@ export const MarketEditorCompact = () => {
                         : "border-transparent"
                   }`}
                 >
-                  <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                  <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                     Oracle Account <span className="text-ztg-red-400">*</span>
                     <Tooltip
                       content={`This account will report the market outcome. Requires ${constants?.markets.oracleBond} ZTG bond (returned if reported on time).`}
@@ -564,7 +564,7 @@ export const MarketEditorCompact = () => {
                       </div>
                     )}
                   {wallet.realAddress && !form.oracle && (
-                    <p className="text-xs text-white/60">
+                    <p className="text-xs text-white/90/60">
                       💡 Tip: Click "Use connected" to quickly set your account
                       as the oracle
                     </p>
@@ -589,7 +589,7 @@ export const MarketEditorCompact = () => {
               <div className="space-y-6">
                 {/* Step Header */}
                 <div className="mb-4">
-                  <h2 className="mb-1 text-lg font-bold text-white md:text-xl">
+                  <h2 className="mb-1 text-lg font-bold text-white/90 md:text-xl">
                     Configure Pricing
                   </h2>
                   <p className="text-sm text-white/70">
@@ -611,7 +611,7 @@ export const MarketEditorCompact = () => {
                           : "border-transparent"
                     }`}
                   >
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Currency <span className="text-ztg-red-400">*</span>
                       <Tooltip content="The token used for trading in this market" />
                     </label>
@@ -645,7 +645,7 @@ export const MarketEditorCompact = () => {
                           : "border-transparent"
                     }`}
                   >
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Market Type <span className="text-ztg-red-400">*</span>
                       <Tooltip content="Permissionless: Goes live immediately | Advised: Requires committee approval" />
                     </label>
@@ -687,7 +687,7 @@ export const MarketEditorCompact = () => {
                           : "border-transparent"
                     }`}
                   >
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Creator Fee <span className="text-ztg-red-400">*</span>
                       <Tooltip content="Percentage fee you earn from all trading volume. Set to 0% if you don't want fees." />
                     </label>
@@ -722,7 +722,7 @@ export const MarketEditorCompact = () => {
                       className="mt-0.5 shrink-0 text-orange-400"
                     />
                     <div className="flex-1">
-                      <p className="text-sm font-semibold text-white">
+                      <p className="text-sm font-semibold text-white/90">
                         Requires Approval
                       </p>
                       <p className="mt-1 text-xs leading-relaxed text-white/90">
@@ -753,7 +753,7 @@ export const MarketEditorCompact = () => {
                     <div className="flex items-start justify-between gap-3">
                       <div className="flex-1">
                         <div className="flex items-center gap-2">
-                          <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                          <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                             Liquidity Pool
                             <Tooltip content="Add initial liquidity to enable immediate trading. You can add this later if you skip now." />
                           </label>
@@ -817,7 +817,7 @@ export const MarketEditorCompact = () => {
                     <div className="flex items-start gap-2.5 rounded-lg bg-white/5 p-4">
                       <span className="text-lg">💡</span>
                       <div className="flex-1">
-                        <p className="text-sm font-semibold text-white">
+                        <p className="text-sm font-semibold text-white/90">
                           Liquidity can be added later
                         </p>
                         <p className="mt-1 text-xs leading-relaxed text-white/70">
@@ -839,7 +839,7 @@ export const MarketEditorCompact = () => {
               <div className="space-y-6">
                 {/* Step Header */}
                 <div className="mb-4">
-                  <h2 className="mb-1 text-lg font-bold text-white md:text-xl">
+                  <h2 className="mb-1 text-lg font-bold text-white/90 md:text-xl">
                     Review & Launch
                   </h2>
                   <p className="text-sm text-white/70">
@@ -851,10 +851,10 @@ export const MarketEditorCompact = () => {
                 <div className="space-y-4">
                   {/* Question */}
                   <div className="space-y-3 rounded-lg bg-white/5 p-4">
-                    <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                    <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                       Market Question
                     </label>
-                    <p className="text-sm font-medium text-white">
+                    <p className="text-sm font-medium text-white/90">
                       {form?.question || (
                         <span className="text-orange-400">
                           No question given
@@ -866,7 +866,7 @@ export const MarketEditorCompact = () => {
                   {/* Answers - Compact Grid */}
                   {form.answers && (
                     <div className="space-y-3 rounded-lg bg-white/5 p-4">
-                      <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                      <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                         Answer Options
                         {form.answers.type === "categorical" &&
                           ` (${form.answers.answers.length})`}
@@ -895,7 +895,7 @@ export const MarketEditorCompact = () => {
                             <div className="text-xs text-white/70">
                               Short (Lower)
                             </div>
-                            <div className="text-xs font-medium text-white">
+                            <div className="text-xs font-medium text-white/90">
                               {(form.answers.answers as number[])[0]}
                             </div>
                           </div>
@@ -903,7 +903,7 @@ export const MarketEditorCompact = () => {
                             <div className="text-xs text-white/70">
                               Long (Upper)
                             </div>
-                            <div className="text-xs font-medium text-white">
+                            <div className="text-xs font-medium text-white/90">
                               {(form.answers.answers as number[])[1]}
                             </div>
                           </div>
@@ -912,12 +912,12 @@ export const MarketEditorCompact = () => {
                       {form.answers.type === "yes/no" && (
                         <div className="grid gap-3 sm:grid-cols-2">
                           <div className="rounded-lg border-2 border-white/20 bg-white/5 px-3 py-2">
-                            <div className="text-xs font-medium uppercase text-white">
+                            <div className="text-xs font-medium uppercase text-white/90">
                               Yes
                             </div>
                           </div>
                           <div className="rounded-lg border-2 border-white/20 bg-white/5 px-3 py-2">
-                            <div className="text-xs font-medium uppercase text-white">
+                            <div className="text-xs font-medium uppercase text-white/90">
                               No
                             </div>
                           </div>
@@ -930,25 +930,25 @@ export const MarketEditorCompact = () => {
                   <div className="grid gap-4 lg:grid-cols-2">
                     {/* Currency & Moderation */}
                     <div className="space-y-3 rounded-lg bg-white/5 p-4">
-                      <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                      <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                         Currency & Type
                       </label>
                       <div className="space-y-2 text-sm">
                         <div className="flex items-center justify-between">
                           <span className="text-white/70">Currency:</span>
-                          <span className="font-medium text-white">
+                          <span className="font-medium text-white/90">
                             {form.currency || "--"}
                           </span>
                         </div>
                         <div className="flex items-center justify-between">
                           <span className="text-white/70">Type:</span>
-                          <span className="font-medium text-white">
+                          <span className="font-medium text-white/90">
                             {form.moderation || "--"}
                           </span>
                         </div>
                         <div className="flex items-center justify-between">
                           <span className="text-white/70">Creator Fee:</span>
-                          <span className="font-medium text-white">
+                          <span className="font-medium text-white/90">
                             {form.creatorFee?.value || "0"}%
                           </span>
                         </div>
@@ -957,13 +957,13 @@ export const MarketEditorCompact = () => {
 
                     {/* Timeline - Compact */}
                     <div className="space-y-3 rounded-lg bg-white/5 p-4">
-                      <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                      <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                         Timeline
                       </label>
                       <div className="space-y-2 text-xs">
                         <div className="flex items-center justify-between">
                           <span className="text-white/70">End Date:</span>
-                          <span className="font-medium text-white">
+                          <span className="font-medium text-white/90">
                             {form.endDate
                               ? momentTz
                                   .tz(form.endDate, form.timeZone || "UTC")
@@ -973,7 +973,7 @@ export const MarketEditorCompact = () => {
                         </div>
                         <div className="flex items-center justify-between">
                           <span className="text-white/70">Reporting:</span>
-                          <span className="font-medium text-white">
+                          <span className="font-medium text-white/90">
                             {timeline?.report?.period
                               ? blocksAsDuration(
                                   timeline.report.period,
@@ -983,7 +983,7 @@ export const MarketEditorCompact = () => {
                         </div>
                         <div className="flex items-center justify-between">
                           <span className="text-white/70">Dispute:</span>
-                          <span className="font-medium text-white">
+                          <span className="font-medium text-white/90">
                             {timeline?.dispute?.period
                               ? blocksAsDuration(
                                   timeline.dispute.period,
@@ -999,10 +999,10 @@ export const MarketEditorCompact = () => {
                   <div className="grid gap-4 lg:grid-cols-2">
                     {/* Oracle */}
                     <div className="space-y-3 rounded-lg bg-white/5 p-4">
-                      <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                      <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                         Oracle Account
                       </label>
-                      <p className="font-mono text-xs font-medium text-white">
+                      <p className="font-mono text-xs font-medium text-white/90">
                         {form?.oracle
                           ? shortenAddress(form.oracle, 8, 8)
                           : "--"}
@@ -1011,7 +1011,7 @@ export const MarketEditorCompact = () => {
 
                     {/* Liquidity Status */}
                     <div className="space-y-3 rounded-lg bg-white/5 p-4">
-                      <label className="flex items-center gap-2 text-sm font-semibold text-white">
+                      <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
                         Liquidity Pool
                       </label>
                       {form?.liquidity?.deploy &&
@@ -1019,13 +1019,13 @@ export const MarketEditorCompact = () => {
                         <div className="space-y-1 text-xs">
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Amount:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {form.liquidity.amount} {form.currency}
                             </span>
                           </div>
                           <div className="flex items-center justify-between">
                             <span className="text-white/70">Swap Fee:</span>
-                            <span className="font-medium text-white">
+                            <span className="font-medium text-white/90">
                               {form.liquidity.swapFee?.value || "--"}%
                             </span>
                           </div>
@@ -1046,14 +1046,14 @@ export const MarketEditorCompact = () => {
                       {({ open }) => (
                         <div className="rounded-lg bg-white/5 backdrop-blur-sm">
                           <Disclosure.Button className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-white/5">
-                            <span className="text-sm font-semibold text-white">
+                            <span className="text-sm font-semibold text-white/90">
                               Description{" "}
-                              <span className="font-normal text-white/60">
+                              <span className="font-normal text-white/90/60">
                                 (Click to view)
                               </span>
                             </span>
                             <LuChevronDown
-                              className={`h-4 w-4 text-white transition-transform ${
+                              className={`h-4 w-4 text-white/90 transition-transform ${
                                 open ? "rotate-180" : ""
                               }`}
                             />
diff --git a/components/create/editor/ProgressBar.tsx b/components/create/editor/ProgressBar.tsx
index da7fd0e6c..5cd882a3a 100644
--- a/components/create/editor/ProgressBar.tsx
+++ b/components/create/editor/ProgressBar.tsx
@@ -18,18 +18,18 @@ export const ProgressBar = <T extends WizardStep<any>>({
     <div className="inline-block w-full">
       <div className="relative h-8 w-full overflow-hidden rounded-lg bg-white/10 shadow-md backdrop-blur-sm sm:h-10">
         <div
-          className="h-full rounded-lg bg-gradient-to-r from-ztg-green-500/80 to-ztg-green-600/80 transition-all"
+          className="h-full rounded-lg bg-gradient-to-r from-ztg-primary-300/85 to-ztg-primary-200/95 transition-all"
           style={{ width: `${progress}%` }}
         />
         <div className="absolute inset-0 flex items-center justify-between px-2.5 sm:px-4">
           <div className="flex flex-wrap items-center gap-1 text-xs sm:gap-1.5 sm:text-sm">
-            <span className="font-bold text-white">
+            <span className="font-bold text-white/90">
               Step {stepNumber} of {totalSteps}:
             </span>
-            <span className="font-medium text-white/80">{current.label}</span>
+            <span className="font-medium text-white/90">{current.label}</span>
           </div>
           <div className="flex items-center gap-2 text-xs sm:gap-3 sm:text-sm">
-            <span className="font-bold text-white">
+            <span className="font-bold text-white/90">
               {Math.round(progress)}%
             </span>
           </div>
diff --git a/components/create/editor/Publishing.tsx b/components/create/editor/Publishing.tsx
index 1e64ddb93..e2324f635 100644
--- a/components/create/editor/Publishing.tsx
+++ b/components/create/editor/Publishing.tsx
@@ -31,10 +31,11 @@ import { assetsAreEqual } from "lib/util/assets-are-equal";
 import { formatNumberCompact } from "lib/util/format-compact";
 import { isArray } from "lodash-es";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { LuFileWarning } from "react-icons/lu";
 import { RiSendPlaneLine } from "react-icons/ri";
 import { GraphQLClient } from "graphql-request";
+import { minBaseLiquidity } from "lib/state/market-creation/constants/currency";
 
 export type PublishingProps = {
   editor: MarketDraftEditor;
@@ -106,15 +107,30 @@ export const Publishing = ({
     ? feeDetails?.amount
     : new Decimal(0);
 
+  // Calculate liquidity cost: use minimum if deploying permissionless market with ZTG
+  // and amount is below minimum or empty
+  const liquidityAmount = useMemo(() => {
+    if (
+      editor.form.moderation === "Permissionless" &&
+      editor.form.liquidity?.deploy &&
+      editor.form.currency === "ZTG"
+    ) {
+      const enteredAmount = new Decimal(editor.form.liquidity.amount || 0).toNumber();
+      const minimum = minBaseLiquidity[editor.form.currency] ?? 0;
+      // Use minimum if amount is 0, empty, or below minimum
+      return Math.max(enteredAmount, minimum);
+    }
+    return 0;
+  }, [
+    editor.form.moderation,
+    editor.form.liquidity?.deploy,
+    editor.form.liquidity?.amount,
+    editor.form.currency,
+  ]);
+
   const ztgCost = new Decimal(bondCost ?? 0)
     .plus(oracleBond ?? 0)
-    .plus(
-      editor.form.moderation === "Permissionless" &&
-        editor.form.liquidity?.deploy &&
-        editor.form.currency === "ZTG"
-        ? new Decimal(editor.form.liquidity.amount || 0).toNumber()
-        : 0,
-    )
+    .plus(liquidityAmount)
     .plus(ztgTransactionFee ?? 0);
 
   const baseCurrencyMetadata =
@@ -327,7 +343,7 @@ export const Publishing = ({
       >
         {!compact && (
           <div className="mb-6">
-            <h2 className="mb-2 text-lg font-bold text-white md:text-xl">
+            <h2 className="mb-2 text-lg font-bold text-white/90 md:text-xl">
               Ready to Publish
             </h2>
             <p className="text-sm text-white/70">
diff --git a/components/create/editor/Summary.tsx b/components/create/editor/Summary.tsx
index 590c98844..431903d9b 100644
--- a/components/create/editor/Summary.tsx
+++ b/components/create/editor/Summary.tsx
@@ -57,8 +57,8 @@ export const MarketSummary = ({
     <div className="space-y-4">
       {/* Question */}
       <div className="rounded-lg bg-white/10 p-5 backdrop-blur-md">
-        <Label className="mb-2 text-white">Market Question</Label>
-        <p className="text-base font-semibold text-white">
+        <Label className="mb-2 text-white/90">Market Question</Label>
+        <p className="text-base font-semibold text-white/90">
           {form?.question ? (
             form?.question
           ) : (
@@ -160,7 +160,7 @@ export const MarketSummary = ({
             <div className="text-center">
               <button
                 type="button"
-                className="rounded-md border-2 border-ztg-primary-600/50 bg-ztg-primary-600/90 px-3 py-1.5 text-xs text-white backdrop-blur-md transition-all hover:bg-ztg-primary-600 active:scale-95"
+                className="rounded-md border-2 border-ztg-primary-600/50 bg-ztg-primary-600/90 px-3 py-1.5 text-xs text-white/90 backdrop-blur-md transition-all hover:bg-ztg-primary-600 active:scale-95"
                 onClick={() => {
                   editor.mergeFormData({
                     liquidity: {
@@ -179,8 +179,8 @@ export const MarketSummary = ({
 
       {/* Moderation */}
       <div className="rounded-lg bg-white/10 p-5 backdrop-blur-md">
-        <Label className="mb-2 text-white">Moderation</Label>
-        <p className="text-sm font-medium text-white">{form.moderation}</p>
+        <Label className="mb-2 text-white/90">Moderation</Label>
+        <p className="text-sm font-medium text-white/90">{form.moderation}</p>
         {creationParams?.disputeMechanism && (
           <div className="mt-3 rounded-md border-2 border-purple-400/30 bg-purple-50/50 p-2.5 backdrop-blur-sm">
             <Label className="mb-1 text-purple-900">Dispute Mechanism</Label>
@@ -193,11 +193,11 @@ export const MarketSummary = ({
 
       {/* Oracle */}
       <div className="rounded-lg bg-white/10 p-5 backdrop-blur-md">
-        <Label className="mb-2 text-white">Oracle</Label>
-        <p className="hidden text-sm font-medium text-white md:block">
+        <Label className="mb-2 text-white/90">Oracle</Label>
+        <p className="hidden text-sm font-medium text-white/90 md:block">
           {form?.oracle ? form?.oracle : "--"}
         </p>
-        <p className="block text-sm font-medium text-white md:hidden">
+        <p className="block text-sm font-medium text-white/90 md:hidden">
           {form?.oracle ? shortenAddress(form?.oracle, 6, 6) : "--"}
         </p>
       </div>
diff --git a/components/create/editor/inputs/BlockPeriod.tsx b/components/create/editor/inputs/BlockPeriod.tsx
index b166c8b1e..7c2196ccf 100644
--- a/components/create/editor/inputs/BlockPeriod.tsx
+++ b/components/create/editor/inputs/BlockPeriod.tsx
@@ -128,8 +128,8 @@ export const BlockPeriodPicker: React.FC<BlockPeriodPickerProps> = ({
           type="button"
           className={`shrink-0 rounded-lg border-2 px-4 py-3 text-sm font-semibold backdrop-blur-sm transition-all active:scale-95 ${
             value?.type === "duration" && value?.preset === option.preset
-              ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
-              : "border-white/20 bg-white/10 text-white hover:border-white/30 hover:bg-white/20"
+              ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+              : "border-white/20 bg-white/10 text-white/90 hover:border-white/30 hover:bg-white/20"
           }`}
           onClick={() => handleOnClickOption(option)}
         >
@@ -156,7 +156,7 @@ export const BlockPeriodPicker: React.FC<BlockPeriodPickerProps> = ({
           <DateTimePicker
             timezone={timezone}
             name={name}
-            className={`w-full border-ztg-green-600/80 !bg-ztg-green-600/90 !text-white shadow-md`}
+            className={`w-full border-ztg-green-600/80 !bg-ztg-green-600/90 !text-white/90 shadow-md`}
             placeholder="Custom Date"
             isValid={value?.type === "date" && isValid}
             value={chainTime && value?.type === "date" ? value.date : undefined}
@@ -240,10 +240,10 @@ const DurationInput = ({
       >
         <Input
           type="number"
-          className={`w-full border-0 bg-transparent px-4 py-3 text-left text-sm text-white outline-none placeholder:text-white/50 ${
+          className={`w-full border-0 bg-transparent px-4 py-3 text-left text-sm text-white/90 outline-none placeholder:text-white/50 ${
             isSelected
-              ? "text-white placeholder:text-white/60"
-              : "text-white placeholder:text-white/50"
+              ? "text-white/90 placeholder:text-white/90/60"
+              : "text-white/90 placeholder:text-white/50"
           }`}
           value={value?.value}
           onChange={handleValueChange}
@@ -258,8 +258,8 @@ const DurationInput = ({
           }`}
         >
           <select
-            className={`min-w-[70px] bg-transparent text-sm text-white outline-none ${
-              isSelected ? "text-white" : "text-white"
+            className={`min-w-[70px] bg-transparent text-sm text-white/90 outline-none ${
+              isSelected ? "text-white/90" : "text-white/90"
             }`}
             onChange={handleUnitChange}
             value={value?.unit}
@@ -267,7 +267,7 @@ const DurationInput = ({
             {["days", "hours"].map((unit) => (
               <option
                 key={unit}
-                className="bg-ztg-primary-600 text-white"
+                className="bg-ztg-primary-600 text-white/90"
                 value={unit}
               >
                 {value && value?.value <= 1 ? unit.replace("s", "") : unit}
diff --git a/components/create/editor/inputs/Category.tsx b/components/create/editor/inputs/Category.tsx
index 71675e60b..152096c74 100644
--- a/components/create/editor/inputs/Category.tsx
+++ b/components/create/editor/inputs/Category.tsx
@@ -41,8 +41,8 @@ export const CategorySelect = forwardRef(
                 transition-all duration-200 ease-in-out active:scale-95
                 ${
                   isSelected
-                    ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
-                    : "border-white/20 bg-white/10 text-white hover:border-white/30 hover:bg-white/20"
+                    ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+                    : "border-white/20 bg-white/10 text-white/90 hover:border-white/30 hover:bg-white/20"
                 }
               `}
               onClick={handleSelect(tag)}
diff --git a/components/create/editor/inputs/Currency.tsx b/components/create/editor/inputs/Currency.tsx
index b5c133ef0..72b7e9074 100644
--- a/components/create/editor/inputs/Currency.tsx
+++ b/components/create/editor/inputs/Currency.tsx
@@ -27,7 +27,7 @@ export const CurrencySelect: React.FC<CurrencySelectProps> = ({
     <div className="flex h-12 w-full items-center rounded-lg border-2 border-white/20 bg-white/10 backdrop-blur-sm transition-all hover:border-white/30">
       <select
         value={value || ""}
-        className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white outline-none placeholder:text-white/50"
+        className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white/90 outline-none placeholder:text-white/50"
         onChange={(e) => {
           const selectedValue = e.target.value || undefined;
           onChange({
@@ -46,14 +46,14 @@ export const CurrencySelect: React.FC<CurrencySelectProps> = ({
           });
         }}
       >
-        <option value="" className="bg-ztg-primary-600 text-white">
+        <option value="" className="bg-ztg-primary-600 text-white/90">
           Select currency
         </option>
         {availableCurrencies.map((currency) => (
           <option
             key={currency.name}
             value={currency.name}
-            className="bg-ztg-primary-600 text-white"
+            className="bg-ztg-primary-600 text-white/90"
           >
             {currency.name}
           </option>
diff --git a/components/create/editor/inputs/DateTime.tsx b/components/create/editor/inputs/DateTime.tsx
index f60fbb57b..1d1afccf9 100644
--- a/components/create/editor/inputs/DateTime.tsx
+++ b/components/create/editor/inputs/DateTime.tsx
@@ -63,7 +63,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
           className={`flex h-12 w-full items-center overflow-hidden rounded-lg border-2 border-white/20 bg-white/10 backdrop-blur-sm transition-all hover:border-white/30 ${className}`}
         >
           <Input
-            className="h-full w-full rounded-lg bg-transparent px-4 py-3 text-sm text-white outline-none placeholder:text-white/50"
+            className="h-full w-full rounded-lg bg-transparent px-4 py-3 text-sm text-white/90 outline-none placeholder:text-white/50"
             ref={inputRef}
             name={name}
             type="datetime-local"
@@ -86,7 +86,7 @@ export const DateTimePicker: React.FC<DateTimePickerProps> = ({
           }}
         >
           <div className="relative w-full text-left">
-            <div className="text-sm placeholder:text-white text-white">
+            <div className="text-sm placeholder:text-white/90 text-white/90">
               {!value
                 ? (placeholder ?? "Select end date and time")
                 : momentFn(value).format("MMM D, YYYY, h:mm A")}
diff --git a/components/create/editor/inputs/FeeSelect.tsx b/components/create/editor/inputs/FeeSelect.tsx
index 8f9a7abf4..321caa0b3 100644
--- a/components/create/editor/inputs/FeeSelect.tsx
+++ b/components/create/editor/inputs/FeeSelect.tsx
@@ -111,22 +111,22 @@ const FeeSelect = ({
       >
         <select
           value={displayValue}
-          className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white outline-none placeholder:text-white/50"
+          className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white/90 outline-none placeholder:text-white/50"
           onChange={handleSelectChange}
         >
-          <option value="" className="bg-ztg-primary-600 text-white">
+          <option value="" className="bg-ztg-primary-600 text-white/90">
             Select fee
           </option>
           {presets.map((preset, index) => (
             <option
               key={index}
               value={preset.value.toString()}
-              className="bg-ztg-primary-600 text-white"
+              className="bg-ztg-primary-600 text-white/90"
             >
               {preset.value}%
             </option>
           ))}
-          <option value="custom" className="bg-ztg-primary-600 text-white">
+          <option value="custom" className="bg-ztg-primary-600 text-white/90">
             Custom
           </option>
         </select>
@@ -137,7 +137,7 @@ const FeeSelect = ({
             type="number"
             min={0}
             step={0.1}
-            className="w-full border-0 bg-transparent px-4 text-right text-sm text-white outline-none placeholder:text-white/50"
+            className="w-full border-0 bg-transparent px-4 text-right text-sm text-white/90 outline-none placeholder:text-white/50"
             value={
               value?.value != null && !isNaN(value.value)
                 ? String(value.value)
diff --git a/components/create/editor/inputs/LiquidityModeToggle.tsx b/components/create/editor/inputs/LiquidityModeToggle.tsx
index 5afffd545..e83c797b1 100644
--- a/components/create/editor/inputs/LiquidityModeToggle.tsx
+++ b/components/create/editor/inputs/LiquidityModeToggle.tsx
@@ -61,7 +61,7 @@ export const LiquidityModeToggle = ({
           <div className="flex items-center gap-2 rounded-lg bg-white/10 px-2 py-1">
             <span
               className={`text-xs font-medium transition-colors ${
-                isSimple ? "text-white" : "text-white/60"
+                isSimple ? "text-white/90" : "text-white/90/60"
               }`}
             >
               Simple
@@ -73,7 +73,7 @@ export const LiquidityModeToggle = ({
             />
             <span
               className={`text-xs font-medium transition-colors ${
-                !isSimple ? "text-white" : "text-white/60"
+                !isSimple ? "text-white/90" : "text-white/90/60"
               }`}
             >
               Advanced
@@ -81,7 +81,7 @@ export const LiquidityModeToggle = ({
           </div>
         </div>
         {isSimple && (
-          <p className="text-xs text-white/60">
+          <p className="text-xs text-white/90/60">
             💡 Simple mode automatically distributes liquidity evenly
           </p>
         )}
@@ -105,7 +105,7 @@ export const LiquidityModeToggle = ({
             currency={currency}
             fieldState={fieldsState}
           />
-          <p className="mt-2 text-xs text-white/60">
+          <p className="mt-2 text-xs text-white/90/60">
             💡 Advanced mode lets you set custom prices and amounts for each
             outcome
           </p>
diff --git a/components/create/editor/inputs/LiquiditySimple.tsx b/components/create/editor/inputs/LiquiditySimple.tsx
index ac573cbc9..1c6396f9a 100644
--- a/components/create/editor/inputs/LiquiditySimple.tsx
+++ b/components/create/editor/inputs/LiquiditySimple.tsx
@@ -26,9 +26,7 @@ export const LiquiditySimple = ({
   const { data: rawAssetPrice } = useAssetUsdPrice(currencyMetadata?.assetId);
 
   // Hardcode stablecoins to $1 USD
-  // DISABLED: USDC.wh temporarily disabled
-  // const isStablecoin = currency === "USDC.wh";
-  const isStablecoin = false; // currency === "USDC.wh";
+  const isStablecoin = false;
   const baseAssetPrice = isStablecoin
     ? new Decimal(1)
     : rawAssetPrice
@@ -106,7 +104,7 @@ export const LiquiditySimple = ({
     <div className="space-y-4">
       <div className="space-y-3">
         <div className="space-y-2">
-          <label className="block text-xs font-semibold text-white">
+          <label className="block text-xs font-semibold text-white/90">
             Total Liquidity Amount <span className="text-ztg-red-400">*</span>
           </label>
           <Input
@@ -114,22 +112,22 @@ export const LiquiditySimple = ({
             inputMode="decimal"
             value={value?.amount || ""}
             onChange={(e) => handleAmountChange(e.target.value)}
-            className="h-11 w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 text-sm text-white backdrop-blur-sm transition-all placeholder:text-white/50"
+            className="h-11 w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/50"
             placeholder={`e.g., ${defaultAmount}`}
           />
           {totalValue && totalValue.gt(0) && (
-            <p className="text-xs text-white/60">
+            <p className="text-xs text-white/90/60">
               ≈ ${totalValue.toFixed(2)} USD
             </p>
           )}
-          <p className="text-xs text-white/60">
+          <p className="text-xs text-white/90/60">
             💡 This amount will be evenly distributed across all {numOutcomes}{" "}
             outcomes
           </p>
         </div>
 
         <div className="space-y-2">
-          <label className="block text-xs font-semibold text-white">
+          <label className="block text-xs font-semibold text-white/90">
             Swap Fee <span className="text-ztg-red-400">*</span>
           </label>
           <FeeSelect
@@ -140,14 +138,14 @@ export const LiquiditySimple = ({
             isValid={true}
             label="% Swap Fee"
           />
-          <p className="text-xs text-white/60">
+          <p className="text-xs text-white/90/60">
             💡 Fee earned on each trade. 1% is a common default.
           </p>
         </div>
 
         {numOutcomes >= 2 && (
           <div className="rounded-lg bg-white/5 p-3">
-            <p className="mb-2 text-xs font-semibold text-white">
+            <p className="mb-2 text-xs font-semibold text-white/90">
               Distribution Preview
             </p>
             <div className="grid grid-cols-2 gap-2 md:grid-cols-3">
@@ -165,7 +163,7 @@ export const LiquiditySimple = ({
                   : "0";
                 return (
                   <div key={idx} className="rounded-lg bg-white/5 p-2">
-                    <p className="mb-1 truncate text-xs font-medium text-white">
+                    <p className="mb-1 truncate text-xs font-medium text-white/90">
                       {outcomeName}
                     </p>
                     <p className="text-xs text-white/70">
diff --git a/components/create/editor/inputs/LiquidityUnified.tsx b/components/create/editor/inputs/LiquidityUnified.tsx
index deaeae5a2..63fea3c9d 100644
--- a/components/create/editor/inputs/LiquidityUnified.tsx
+++ b/components/create/editor/inputs/LiquidityUnified.tsx
@@ -41,9 +41,7 @@ export const LiquidityUnified = ({
   const { data: rawAssetPrice } = useAssetUsdPrice(currencyMetadata?.assetId);
 
   // Hardcode stablecoins to $1 USD
-  // DISABLED: USDC.wh temporarily disabled
-  // const isStablecoin = currency === "USDC.wh";
-  const isStablecoin = false; // currency === "USDC.wh";
+  const isStablecoin = false;
   const baseAssetPrice = isStablecoin ? new Decimal(1) : rawAssetPrice;
 
   const numOutcomes =
@@ -125,7 +123,7 @@ export const LiquidityUnified = ({
       <div className="grid gap-6 lg:grid-cols-2">
         {/* Total Liquidity Input */}
         <div className="space-y-2">
-          <label className="flex items-center gap-2 text-sm font-semibold text-white">
+          <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
             Total Liquidity Amount <span className="text-ztg-red-400">*</span>
           </label>
           <Input
@@ -179,15 +177,15 @@ export const LiquidityUnified = ({
                 },
               });
             }}
-            className="h-12 w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 text-sm text-white backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30 focus:border-white/40"
+            className="h-12 w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30 focus:border-white/40"
             placeholder="e.g., 1000"
           />
           {totalValue && totalValue.gt(0) && (
-            <p className="text-xs text-white/60">
+            <p className="text-xs text-white/90/60">
               ≈ ${totalValue.toFixed(2)} USD
             </p>
           )}
-          <p className="text-xs text-white/60">
+          <p className="text-xs text-white/90/60">
             💡 This amount will be evenly distributed across all {numOutcomes}{" "}
             outcomes
           </p>
@@ -195,7 +193,7 @@ export const LiquidityUnified = ({
 
         {/* Swap Fee */}
         <div className="space-y-2">
-          <label className="flex items-center gap-2 text-sm font-semibold text-white">
+          <label className="flex items-center gap-2 text-sm font-semibold text-white/90">
             Swap Fee <span className="text-ztg-red-400">*</span>
           </label>
           <FeeSelect
@@ -206,7 +204,7 @@ export const LiquidityUnified = ({
             isValid={fieldsState.isValid}
             label="% Swap Fee"
           />
-          <p className="text-xs text-white/60">
+          <p className="text-xs text-white/90/60">
             💡 Fee earned on each trade. 1% is a common default.
           </p>
         </div>
@@ -219,10 +217,10 @@ export const LiquidityUnified = ({
             <Disclosure.Button className="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-white/5">
               <div className="flex items-center gap-2">
                 <LuSettings size={16} className="text-white/70" />
-                <span className="text-sm font-semibold text-white">
+                <span className="text-sm font-semibold text-white/90">
                   Fine-tune Distribution
                   {isCustomized && (
-                    <span className="ml-2 text-xs font-normal text-white/60">
+                    <span className="ml-2 text-xs font-normal text-white/90/60">
                       (Customized)
                     </span>
                   )}
diff --git a/components/create/editor/inputs/Moderation.tsx b/components/create/editor/inputs/Moderation.tsx
index 4ebc75691..a03179e98 100644
--- a/components/create/editor/inputs/Moderation.tsx
+++ b/components/create/editor/inputs/Moderation.tsx
@@ -35,7 +35,7 @@ export const ModerationModeSelect: React.FC<ModerationModeSelectProps> = ({
     <div className="flex h-12 w-full items-center rounded-lg border-2 border-white/20 bg-white/10 backdrop-blur-sm transition-all hover:border-white/30">
       <select
         value={value || ""}
-        className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white outline-none placeholder:text-white/50"
+        className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white/90 outline-none placeholder:text-white/50"
         onChange={(e) => {
           const selectedValue = e.target.value || undefined;
           onChange({
@@ -48,14 +48,14 @@ export const ModerationModeSelect: React.FC<ModerationModeSelectProps> = ({
           });
         }}
       >
-        <option value="" className="bg-ztg-primary-600 text-white">
+        <option value="" className="bg-ztg-primary-600 text-white/90">
           Select market type
         </option>
         {options.map((option, index) => (
           <option
             key={index}
             value={option.mode}
-            className="bg-ztg-primary-600 text-white"
+            className="bg-ztg-primary-600 text-white/90"
           >
             {option.mode} - {option.description} (
             {option.mode === "Permissionless"
diff --git a/components/create/editor/inputs/Oracle.tsx b/components/create/editor/inputs/Oracle.tsx
index 8d877f8a6..813961e82 100644
--- a/components/create/editor/inputs/Oracle.tsx
+++ b/components/create/editor/inputs/Oracle.tsx
@@ -82,7 +82,7 @@ export const OracleInput = forwardRef(
           <Input
             value={value}
             spellCheck={false}
-            className="w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 py-3 text-left text-sm text-white backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
+            className="w-full rounded-lg border-2 border-white/20 bg-white/10 px-4 py-3 text-left text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
             placeholder="0x..."
             onChange={handleChange}
             onBlur={handleBlur}
@@ -96,7 +96,7 @@ export const OracleInput = forwardRef(
               className={`flex w-full items-center justify-center gap-2 rounded-lg border-2 px-4 py-3 text-sm font-semibold backdrop-blur-sm transition-all active:scale-95 ${
                 !isSelectedAccount
                   ? "border-orange-500/60 bg-orange-500/10 text-orange-400 hover:border-orange-500/80 hover:bg-orange-500/20"
-                  : "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+                  : "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
               }`}
             >
               {wallet.realAddress && (
@@ -123,7 +123,7 @@ export const OracleInput = forwardRef(
             <button
               type="button"
               onClick={() => accountModals.openWalletSelect()}
-              className="flex w-full items-center justify-center gap-2 rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 active:scale-95"
+              className="flex w-full items-center justify-center gap-2 rounded-lg border border-white/20 bg-white/10 px-4 py-3 text-sm font-semibold text-white/90 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 active:scale-95"
             >
               Connect Wallet
             </button>
diff --git a/components/create/editor/inputs/TimezoneSelect.tsx b/components/create/editor/inputs/TimezoneSelect.tsx
index 17ef295ba..0390368bc 100644
--- a/components/create/editor/inputs/TimezoneSelect.tsx
+++ b/components/create/editor/inputs/TimezoneSelect.tsx
@@ -19,7 +19,7 @@ const TimezoneSelect: React.FC<TimezoneSelectProps> = (props) => {
       <select
         defaultValue={defaultTimezone}
         value={props.value}
-        className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white outline-none placeholder:text-white/50"
+        className="h-full w-full bg-transparent px-4 py-3 text-left text-sm text-white/90 outline-none placeholder:text-white/50"
         onChange={(e) => {
           const value = e.target.value;
           props.onChange({
diff --git a/components/create/editor/inputs/answers/Categorical.tsx b/components/create/editor/inputs/answers/Categorical.tsx
index 2d553d5bb..cb117bb43 100644
--- a/components/create/editor/inputs/answers/Categorical.tsx
+++ b/components/create/editor/inputs/answers/Categorical.tsx
@@ -166,7 +166,7 @@ export const CategoricalAnswersInput = ({
           {!disabled && (
             <button
               type="button"
-              className="rounded-lg bg-white/10 px-4 py-3 text-sm font-semibold text-white backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 active:scale-95"
+              className="rounded-lg bg-white/10 px-4 py-3 text-sm font-semibold text-white/90 backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 active:scale-95"
               onClick={handleAddOptionClick}
             >
               + Add Option
@@ -218,7 +218,7 @@ const AnswerInput = ({
     return (
       <div
         style={style}
-        className="rounded-lg bg-white/10 px-4 py-3 text-sm font-semibold text-white shadow-sm backdrop-blur-sm"
+        className="rounded-lg bg-white/10 px-4 py-3 text-sm font-semibold text-white/90 shadow-sm backdrop-blur-sm"
       >
         {value}
       </div>
@@ -232,7 +232,7 @@ const AnswerInput = ({
     >
       <Input
         disabled={disabled}
-        className="!m-0 h-full flex-1 bg-transparent !p-0 pr-16 text-sm text-white outline-none placeholder:text-white/50"
+        className="!m-0 h-full flex-1 bg-transparent !p-0 pr-16 text-sm text-white/90 outline-none placeholder:text-white/50"
         value={value}
         onChange={(event) => onChange(event.target.value)}
         onBlur={(event) => onBlur(event.target.value)}
@@ -253,7 +253,7 @@ const AnswerInput = ({
         </div>
       )}
       <div
-        className={`absolute right-2 top-[50%] z-10 flex translate-y-[-50%] gap-2 text-white/60 transition-opacity duration-300 ${
+        className={`absolute right-2 top-[50%] z-10 flex translate-y-[-50%] gap-2 text-white/90/60 transition-opacity duration-300 ${
           draggingDisabled && "cursor-not-allowed opacity-25"
         }`}
         ref={setNodeRef}
diff --git a/components/create/editor/inputs/answers/Scalar.tsx b/components/create/editor/inputs/answers/Scalar.tsx
index fc6f9d263..dfdcc538a 100644
--- a/components/create/editor/inputs/answers/Scalar.tsx
+++ b/components/create/editor/inputs/answers/Scalar.tsx
@@ -91,13 +91,13 @@ export const ScalarAnswersInput = ({
       <div className="flex items-center gap-2">
         <span className="text-xs font-medium text-white/70">Type:</span>
         <div className="flex items-center gap-1.5 rounded-lg bg-white/10 px-3 py-2 backdrop-blur-sm">
-          <span className="text-xs font-medium text-white">Numbers</span>
+          <span className="text-xs font-medium text-white/90">Numbers</span>
           <Toggle
             checked={value?.numberType === "date"}
             activeClassName="bg-ztg-green-600"
             onChange={handleNumberTypeChange}
           />
-          <span className="text-xs font-medium text-white">Dates</span>
+          <span className="text-xs font-medium text-white/90">Dates</span>
         </div>
       </div>
 
@@ -121,7 +121,7 @@ export const ScalarAnswersInput = ({
             <Input
               type="number"
               inputMode="numeric"
-              className="flex-1 rounded-lg bg-white/10 px-4 py-3 text-sm text-white outline-none backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
+              className="flex-1 rounded-lg bg-white/10 px-4 py-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
               value={value?.answers[0]}
               onChange={handleNumberChange(0, onChange)}
               onBlur={handleNumberChange(0, onBlur)}
@@ -147,7 +147,7 @@ export const ScalarAnswersInput = ({
             <Input
               type="number"
               inputMode="numeric"
-              className="flex-1 rounded-lg bg-white/10 px-4 py-3 text-sm text-white outline-none backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
+              className="flex-1 rounded-lg bg-white/10 px-4 py-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/50 hover:border-white/30"
               value={value?.answers[1]}
               onChange={handleNumberChange(1, onChange)}
               onBlur={handleNumberChange(1, onBlur)}
diff --git a/components/create/editor/inputs/answers/index.tsx b/components/create/editor/inputs/answers/index.tsx
index 3f6a2a40b..92f582a57 100644
--- a/components/create/editor/inputs/answers/index.tsx
+++ b/components/create/editor/inputs/answers/index.tsx
@@ -47,8 +47,8 @@ export const AnswersInput = ({
             type="button"
             className={`rounded-lg border-2 px-4 py-3 text-sm font-semibold backdrop-blur-sm transition-all active:scale-95 ${
               value?.type === "yes/no"
-                ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
-                : "border-white/20 bg-white/10 text-white hover:border-white/30 hover:bg-white/20"
+                ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+                : "border-white/20 bg-white/10 text-white/90 hover:border-white/30 hover:bg-white/20"
             }`}
             onClick={handleSelectType("yes/no")}
           >
@@ -59,8 +59,8 @@ export const AnswersInput = ({
             type="button"
             className={`rounded-lg border-2 px-4 py-3 text-sm font-semibold backdrop-blur-sm transition-all active:scale-95 ${
               value?.type === "categorical"
-                ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
-                : "border-white/20 bg-white/10 text-white hover:border-white/30 hover:bg-white/20"
+                ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+                : "border-white/20 bg-white/10 text-white/90 hover:border-white/30 hover:bg-white/20"
             }`}
             onClick={handleSelectType("categorical")}
           >
@@ -71,8 +71,8 @@ export const AnswersInput = ({
             type="button"
             className={`rounded-lg border-2 px-4 py-3 text-sm font-semibold backdrop-blur-sm transition-all active:scale-95 ${
               value?.type === "scalar"
-                ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
-                : "border-white/20 bg-white/10 text-white hover:border-white/30 hover:bg-white/20"
+                ? "border-ztg-green-600/80 bg-ztg-green-600/90 text-white/90 shadow-md hover:border-ztg-green-500 hover:bg-ztg-green-600"
+                : "border-white/20 bg-white/10 text-white/90 hover:border-white/30 hover:bg-white/20"
             }`}
             onClick={handleSelectType("scalar")}
           >
@@ -105,7 +105,7 @@ export const AnswersInput = ({
                       .map((answer, idx) => (
                         <div
                           key={idx}
-                          className="rounded-lg bg-white/10 px-3 py-2 text-xs font-medium text-white backdrop-blur-sm"
+                          className="rounded-lg bg-white/10 px-3 py-2 text-xs font-medium text-white/90 backdrop-blur-sm"
                         >
                           {answer}
                         </div>
@@ -130,13 +130,13 @@ export const AnswersInput = ({
                   Preview: Range
                 </p>
                 <div className="flex items-center gap-2 text-sm">
-                  <span className="rounded-lg bg-white/10 px-3 py-2 font-medium text-white backdrop-blur-sm">
+                  <span className="rounded-lg bg-white/10 px-3 py-2 font-medium text-white/90 backdrop-blur-sm">
                     {value.numberType === "date"
                       ? new Date(value.answers[0]).toLocaleDateString()
                       : value.answers[0]}
                   </span>
                   <span className="text-white/70">→</span>
-                  <span className="rounded-lg bg-white/10 px-3 py-2 font-medium text-white backdrop-blur-sm">
+                  <span className="rounded-lg bg-white/10 px-3 py-2 font-medium text-white/90 backdrop-blur-sm">
                     {value.numberType === "date"
                       ? new Date(value.answers[1]).toLocaleDateString()
                       : value.answers[1]}
@@ -158,7 +158,7 @@ export const AnswersInput = ({
                   value.answers.map((answer, idx) => (
                     <div
                       key={idx}
-                      className="rounded-lg bg-white/10 px-3 py-2 text-xs font-medium text-white backdrop-blur-sm"
+                      className="rounded-lg bg-white/10 px-3 py-2 text-xs font-medium text-white/90 backdrop-blur-sm"
                     >
                       {answer}
                     </div>
diff --git a/components/front-page/HeroBanner.tsx b/components/front-page/HeroBanner.tsx
index 30e52dbba..806d68326 100644
--- a/components/front-page/HeroBanner.tsx
+++ b/components/front-page/HeroBanner.tsx
@@ -27,7 +27,7 @@ export const HeroBanner = ({
     <div className="main-container md:mt-18 z-2 relative mb-14 mt-12">
       <div className="relative flex flex-col-reverse md:flex-row md:gap-8">
         <div className="md:w-[890px] md:pt-8 lg:w-[690px]">
-          <h1 className="mb-8 text-5xl leading-tight text-white">
+          <h1 className="mb-8 text-5xl leading-tight text-white/90">
             Welcome to the Future of Betting
           </h1>
           <h2 className="mb-8 text-xl leading-6 text-white/90">
@@ -37,7 +37,7 @@ export const HeroBanner = ({
             <Link
               href="https://zeitgeist.pm/"
               target="_blank"
-              className="flex-1 rounded-md bg-ztg-green-600 px-6 py-3 text-white transition-all hover:bg-ztg-green-500 sm:flex-none"
+              className="flex-1 rounded-md bg-ztg-green-600 px-6 py-3 text-white/90 transition-all hover:bg-ztg-green-500 sm:flex-none"
             >
               Learn More
             </Link>
diff --git a/components/front-page/LatestTrades.tsx b/components/front-page/LatestTrades.tsx
index d2e7326b7..00f359970 100644
--- a/components/front-page/LatestTrades.tsx
+++ b/components/front-page/LatestTrades.tsx
@@ -95,7 +95,7 @@ const LatestTrades = ({
       outcome: trade.outcomeName,
       trade:
         trade.type === "buy" ? (
-          <span className="font-semibold text-ztg-green-400">Buy</span>
+          <span className="font-semibold text-ztg-green-500">Buy</span>
         ) : (
           <span className="font-semibold text-red-400">Sell</span>
         ),
diff --git a/components/front-page/LatestTradesCompact.tsx b/components/front-page/LatestTradesCompact.tsx
index 47c639507..d226a6146 100644
--- a/components/front-page/LatestTradesCompact.tsx
+++ b/components/front-page/LatestTradesCompact.tsx
@@ -72,7 +72,7 @@ const LatestTradeRow = ({ trade }: { trade: TradeItem }) => {
         <div className="line-clamp-1 overflow-ellipsis text-sm">
           {cmsMetadata?.question ?? trade.question}
         </div>
-        <div className="flex items-center gap-x-1 text-sm text-ztg-blue">
+        <div className="flex items-center gap-x-1 text-sm text-ztg-green-500">
           <Avatar size={15} address={trade.traderAddress} />
           {trade.type === "buy" ? "Bought" : "Sold"}
           <span className="font-bold">{trade.outcomeName}</span>
diff --git a/components/front-page/TrendingMarketsCompact.tsx b/components/front-page/TrendingMarketsCompact.tsx
index e81c9633d..f292c1b24 100644
--- a/components/front-page/TrendingMarketsCompact.tsx
+++ b/components/front-page/TrendingMarketsCompact.tsx
@@ -64,7 +64,7 @@ const TrendingMarketRow = ({ market }: { market: FullMarketFragment }) => {
       </div>
       <div className="flex flex-col justify-center">
         <div className="text-sm">{cmsMetadata?.question ?? question}</div>
-        <div className="flex text-sm text-ztg-blue">
+        <div className="flex text-sm text-ztg-green-500">
           <div>
             {prediction.name != null && prediction.name !== ""
               ? market.marketType.categorical
diff --git a/components/front-page/WatchHow.tsx b/components/front-page/WatchHow.tsx
index 640f4dcb5..0d8854d04 100644
--- a/components/front-page/WatchHow.tsx
+++ b/components/front-page/WatchHow.tsx
@@ -80,7 +80,7 @@ const WatchHow = () => {
           href="https://docs.zeitgeist.pm/docs/category/learn"
           target="_blank"
           rel="noreferrer"
-          className={`center relative z-10 ml-auto flex cursor-pointer gap-2 rounded-md bg-ztg-pink px-[20px] py-[10px] text-white opacity-70 ${
+          className={`center relative z-10 ml-auto flex cursor-pointer gap-2 rounded-md bg-ztg-pink px-[20px] py-[10px] text-white/90 opacity-70 ${
             animationState === "finished" && "animate-pop-in"
           }`}
         >
diff --git a/components/hero-slider/HeroControls.tsx b/components/hero-slider/HeroControls.tsx
index 68a7e6f6d..6a83f0f40 100644
--- a/components/hero-slider/HeroControls.tsx
+++ b/components/hero-slider/HeroControls.tsx
@@ -17,16 +17,16 @@ export const HeroControls: FC<HeroControlsProps> = ({ slides, slider }) => {
         }}
         className={`flex h-[40px] w-[40px] items-center justify-center rounded-full border-2 border-white bg-black`}
       >
-        <ChevronLeft className="relative right-[1px] text-white" />
+        <ChevronLeft className="relative right-[1px] text-white/90" />
       </button>
-      <div className="text-white">
+      <div className="text-white/90">
         {slides.map((slide, index) => (
           <span
             onClick={() => {
               slider.goto(index, true);
             }}
             className={`cursor-pointer px-1 text-[48px] ${
-              index === slider.currentSlide ? "text-white" : "opacity-50"
+              index === slider.currentSlide ? "text-white/90" : "opacity-50"
             }`}
             key={index}
           >
@@ -40,7 +40,7 @@ export const HeroControls: FC<HeroControlsProps> = ({ slides, slider }) => {
         }}
         className={`ztg-transition flex h-[40px] w-[40px] items-center justify-center rounded-full border-2 border-white bg-black`}
       >
-        <ChevronRight className="relative left-[1px] text-white" />
+        <ChevronRight className="relative left-[1px] text-white/90" />
       </button>
     </div>
   );
diff --git a/components/hero-slider/HeroSlide.tsx b/components/hero-slider/HeroSlide.tsx
index caa90c1b1..1ad51da7c 100644
--- a/components/hero-slider/HeroSlide.tsx
+++ b/components/hero-slider/HeroSlide.tsx
@@ -38,13 +38,13 @@ export const HeroSlide: FC<HeroSlideProps> = ({ banner, style, className }) => {
   //   >
   //     <div className="w-full pb-8">
   //       <h2
-  //         className={`mb-4 text-center font-sans text-5xl font-extrabold text-white sm:text-left sm:text-7xl md:whitespace-pre lg:text-8xl`}
+  //         className={`mb-4 text-center font-sans text-5xl font-extrabold text-white/90 sm:text-left sm:text-7xl md:whitespace-pre lg:text-8xl`}
   //       >
   //         {banner.title}
   //       </h2>
   //       <p
   //         className={
-  //           "mb-6 whitespace-pre text-center font-sans text-3xl font-extrabold text-white sm:text-start md:text-4xl"
+  //           "mb-6 whitespace-pre text-center font-sans text-3xl font-extrabold text-white/90 sm:text-start md:text-4xl"
   //         }
   //       >
   //         {banner.subtitle}
diff --git a/components/liquidity/ExitPoolFormAmm2.tsx b/components/liquidity/ExitPoolFormAmm2.tsx
index be04ceb5f..26e7b04b5 100644
--- a/components/liquidity/ExitPoolFormAmm2.tsx
+++ b/components/liquidity/ExitPoolFormAmm2.tsx
@@ -215,7 +215,7 @@ const ExitPoolForm = ({
                     {assetName}
                   </div>
                   <Input
-                    className={`h-ztg-40 w-full rounded-lg border-2 px-3 py-0 text-right text-xs leading-none font-medium text-white shadow-sm backdrop-blur-sm transition-all focus:shadow-md focus:outline-none
+                    className={`h-ztg-40 w-full rounded-lg border-2 px-3 py-0 text-right text-xs leading-none font-medium text-white/90 shadow-sm backdrop-blur-sm transition-all focus:shadow-md focus:outline-none
               ${
                 hasError
                   ? "border-ztg-red-500/60 bg-ztg-red-900/30 text-ztg-red-400 focus:border-ztg-red-500/80"
diff --git a/components/liquidity/JoinPoolFormAmm2.tsx b/components/liquidity/JoinPoolFormAmm2.tsx
index f877143af..f216da20d 100644
--- a/components/liquidity/JoinPoolFormAmm2.tsx
+++ b/components/liquidity/JoinPoolFormAmm2.tsx
@@ -286,7 +286,7 @@ const JoinPoolForm = ({
                     {assetName}
                   </div>
                   <Input
-                    className={`h-ztg-40 w-full rounded-lg border-2 px-3 py-0 text-right text-xs leading-none font-medium text-white shadow-sm backdrop-blur-sm transition-all focus:shadow-md focus:outline-none
+                    className={`h-ztg-40 w-full rounded-lg border-2 px-3 py-0 text-right text-xs leading-none font-medium text-white/90 shadow-sm backdrop-blur-sm transition-all focus:shadow-md focus:outline-none
                             ${
                               hasError
                                 ? "border-ztg-red-500/60 bg-ztg-red-900/30 text-ztg-red-400 focus:border-ztg-red-500/80"
@@ -356,7 +356,7 @@ const JoinPoolForm = ({
         <label className="text-xs font-semibold text-white/90">
           Expected Pool Ownership
         </label>
-        <span className="text-xs font-bold text-white">
+        <span className="text-xs font-bold text-white/90">
           {prctSharesToReceive?.toFixed(1) ?? "0.0"}%
         </span>
       </div>
diff --git a/components/liquidity/LiquidityModalAmm2.tsx b/components/liquidity/LiquidityModalAmm2.tsx
index 8cd231f75..ff290de07 100644
--- a/components/liquidity/LiquidityModalAmm2.tsx
+++ b/components/liquidity/LiquidityModalAmm2.tsx
@@ -60,10 +60,10 @@ const LiquidityModalAmm2 = ({
           <ModalTabs
             tabs={
               <Tab.List className="flex h-full">
-                <Tab className="flex-1 px-3 py-2 text-sm font-medium transition-all border-r border-white/10 bg-white/5 text-white/70 hover:bg-white/10 hover:text-white ui-selected:bg-white/10 ui-selected:text-white ui-selected:font-semibold">
+                <Tab className="flex-1 px-3 py-2 text-sm font-medium transition-all border-r border-white/10 bg-white/5 text-white/70 hover:bg-white/10 hover:text-white/90 ui-selected:bg-white/10 ui-selected:text-white/90 ui-selected:font-semibold">
                   Join Pool
                 </Tab>
-                <Tab className="flex-1 px-3 py-2 text-sm font-medium transition-all bg-white/5 text-white/70 hover:bg-white/10 hover:text-white ui-selected:bg-white/10 ui-selected:text-white ui-selected:font-semibold">
+                <Tab className="flex-1 px-3 py-2 text-sm font-medium transition-all bg-white/5 text-white/70 hover:bg-white/10 hover:text-white/90 ui-selected:bg-white/10 ui-selected:text-white/90 ui-selected:font-semibold">
                   Exit Pool
                 </Tab>
               </Tab.List>
diff --git a/components/liquidity/MarketLiquiditySection.tsx b/components/liquidity/MarketLiquiditySection.tsx
index 9aa240454..eb4a2fe38 100644
--- a/components/liquidity/MarketLiquiditySection.tsx
+++ b/components/liquidity/MarketLiquiditySection.tsx
@@ -156,7 +156,7 @@ const LiquidityHeader = ({
                 <AiOutlineInfoCircle className="h-3.5 w-3.5" />
               </div>
               <div className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 z-10 mb-1 w-64 whitespace-normal opacity-0 transition-opacity group-hover:opacity-100">
-                <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white shadow-lg">
+                <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white/90 shadow-lg">
                   <div className="mb-1 font-medium">Swap Fees</div>
                   <div className="flex items-center justify-between gap-2">
                     <span>Creator fee:</span>
@@ -182,7 +182,7 @@ const LiquidityHeader = ({
             <LiquidityHeaderButtonItem className="lg:-ml-14">
               <button
                 onClick={() => setManageLiquidityOpen(true)}
-                className="max-w-[200px] rounded-lg bg-ztg-green-600/80 px-6 py-2.5 font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg focus:outline-none md:ml-auto md:mr-0"
+                className="max-w-[200px] rounded-lg bg-ztg-primary-300 px-6 py-2.5 font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg focus:outline-none md:ml-auto md:mr-0"
               >
                 Manage Liquidity
               </button>
diff --git a/components/liquidity/PoolFeesSelect.tsx b/components/liquidity/PoolFeesSelect.tsx
index 54aacf734..9fa6ea3b6 100644
--- a/components/liquidity/PoolFeesSelect.tsx
+++ b/components/liquidity/PoolFeesSelect.tsx
@@ -24,7 +24,7 @@ const PoolFeeOption = ({
       className={`flex h-[40px] w-[100px] items-center justify-center rounded-full border-2 shadow-sm backdrop-blur-sm transition-all hover:shadow-md
           ${
             selected
-              ? "border-ztg-primary-600 bg-gradient-to-r from-ztg-primary-500/80 to-ztg-primary-600/80 font-semibold text-white"
+              ? "border-ztg-primary-600 bg-gradient-to-r from-ztg-primary-500/80 to-ztg-primary-600/80 font-semibold text-white/90"
               : "border-ztg-primary-200/30 bg-white/60 text-ztg-primary-700 hover:bg-white/80"
           }
         `}
@@ -117,7 +117,7 @@ const PoolFeesSelect = ({
           step={0.1}
           className={`text-center text-sm font-semibold outline-none ${
             inputSelected
-              ? "bg-transparent text-white placeholder:text-white/60"
+              ? "bg-transparent text-white/90 placeholder:text-white/90/60"
               : "bg-transparent text-ztg-primary-700 placeholder:text-ztg-primary-400"
           }`}
           onChange={(e) => handleInputFeeChange(e.target.value)}
diff --git a/components/liquidity/PoolSettingsAMM2.tsx b/components/liquidity/PoolSettingsAMM2.tsx
index 1fb07a002..608b7944d 100644
--- a/components/liquidity/PoolSettingsAMM2.tsx
+++ b/components/liquidity/PoolSettingsAMM2.tsx
@@ -88,7 +88,7 @@ const PoolSettingsAmm2: FC<{
           <div className="relative inline-block">
             <Input
               type="number"
-              className="font-base w-64 rounded-md bg-white/10 py-4 pl-5 pr-28 text-right text-base text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/60 focus:bg-white/15"
+              className="font-base w-64 rounded-md bg-white/10 py-4 pl-5 pr-28 text-right text-base text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15"
               value={`${parseFloat(baseAssetAmount ?? "0")}`}
               onChange={(event) => {
                 const value = parseFloat(event.target.value);
diff --git a/components/markets/ComboMarketHeader.tsx b/components/markets/ComboMarketHeader.tsx
index 398f1a838..cb58d1a41 100644
--- a/components/markets/ComboMarketHeader.tsx
+++ b/components/markets/ComboMarketHeader.tsx
@@ -41,7 +41,7 @@ const OutcomeBalance = ({
         )}
         <span className="font-medium text-white/90">{outcomeName}</span>
       </div>
-      <span className="font-bold text-white">{balanceDisplay}</span>
+      <span className="font-bold text-white/90">{balanceDisplay}</span>
     </div>
   );
 };
@@ -58,8 +58,8 @@ const ComboMarketHeader: FC<ComboMarketHeaderProps> = ({
         const roleLabel = index === 0 ? "Assume" : "Then";
         const pillColor =
           index === 0
-            ? "bg-blue-500/80 text-white border-blue-400/40"
-            : "bg-ztg-green-500/80 text-white border-ztg-green-400/40";
+            ? "bg-blue-500/80 text-white/90 border-blue-400/40"
+            : "bg-ztg-green-500/80 text-white/90 border-ztg-green-400/40";
         const borderColor =
           index === 0 ? "border-blue-500/40" : "border-ztg-green-500/40";
         const roleDescription =
@@ -80,7 +80,7 @@ const ComboMarketHeader: FC<ComboMarketHeaderProps> = ({
                 <span>{roleLabel}</span>
                 <div className="group relative">
                   <Info size={14} className="cursor-help text-white/90" />
-                  <div className="pointer-events-none absolute bottom-full left-0 z-10 mb-2 w-64 rounded-lg border border-white/20 bg-ztg-primary-900/95 px-3 py-2 text-xs text-white opacity-0 shadow-xl backdrop-blur-lg transition-opacity group-hover:opacity-100">
+                  <div className="pointer-events-none absolute bottom-full left-0 z-10 mb-2 w-64 rounded-lg border border-white/20 bg-ztg-primary-900/95 px-3 py-2 text-xs text-white/90 opacity-0 shadow-xl backdrop-blur-lg transition-opacity group-hover:opacity-100">
                     {roleDescription}
                     <div className="absolute left-2 top-full">
                       <div className="h-2 w-2 rotate-45 border-l border-t border-white/20 bg-ztg-primary-900/95"></div>
@@ -88,12 +88,12 @@ const ComboMarketHeader: FC<ComboMarketHeaderProps> = ({
                   </div>
                 </div>
               </div>
-              <span className="text-xs font-medium text-white/80">
+              <span className="text-xs font-medium text-white/90">
                 {item.market?.status}
               </span>
               <Link
                 href={`/markets/${item.market?.marketId}`}
-                className={`ml-auto flex items-center rounded-lg border border-white/10 bg-white/10 px-3 py-1.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-md ${
+                className={`ml-auto flex items-center rounded-lg border border-white/10 bg-white/10 px-3 py-1.5 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-md ${
                   index === 0
                     ? "hover:border-blue-400/40"
                     : "hover:border-ztg-green-400/40"
@@ -104,7 +104,7 @@ const ComboMarketHeader: FC<ComboMarketHeaderProps> = ({
             </div>
 
             {/* Question */}
-            <h3 className="mb-2 line-clamp-2 min-h-10 text-base font-semibold leading-snug text-white sm:text-lg">
+            <h3 className="mb-2 line-clamp-2 min-h-10 text-base font-semibold leading-snug text-white/90 sm:text-lg">
               {item.market?.question}
             </h3>
 
@@ -124,9 +124,9 @@ const ComboMarketHeader: FC<ComboMarketHeaderProps> = ({
                 >
                   <span>Outcome Balances</span>
                   {showBalances ? (
-                    <ChevronUp size={14} className="text-white/80" />
+                    <ChevronUp size={14} className="text-white/90" />
                   ) : (
-                    <ChevronDown size={14} className="text-white/80" />
+                    <ChevronDown size={14} className="text-white/90" />
                   )}
                 </button>
                 {showBalances && (
diff --git a/components/markets/ComboMarketHeaderUnified.tsx b/components/markets/ComboMarketHeaderUnified.tsx
index d5afa6e12..497736fc3 100644
--- a/components/markets/ComboMarketHeaderUnified.tsx
+++ b/components/markets/ComboMarketHeaderUnified.tsx
@@ -52,7 +52,7 @@ const OutcomeBalance = ({
         )}
         <span className="font-medium text-white/90">{outcomeName}</span>
       </div>
-      <span className="font-bold text-white">{balanceDisplay}</span>
+      <span className="font-bold text-white/90">{balanceDisplay}</span>
     </div>
   );
 };
@@ -72,8 +72,8 @@ const SourceMarketCard = ({
 
   const pillColor =
     roleLabel === "Assume"
-      ? "bg-blue-500/80 text-white border-blue-400/40"
-      : "bg-ztg-green-500/80 text-white border-ztg-green-400/40";
+      ? "bg-blue-500/80 text-white/90 border-blue-400/40"
+      : "bg-ztg-green-500/80 text-white/90 border-ztg-green-400/40";
   const borderColor =
     roleLabel === "Assume" ? "border-blue-500/40" : "border-ztg-green-500/40";
   const hoverBorderColor =
@@ -96,20 +96,20 @@ const SourceMarketCard = ({
               </div>
 
               <div className="min-w-0 flex-1">
-                <h3 className="line-clamp-2 text-xs font-semibold leading-snug text-white sm:text-sm">
+                <h3 className="line-clamp-2 text-xs font-semibold leading-snug text-white/90 sm:text-sm">
                   {market.question}
                 </h3>
               </div>
 
               <ChevronDown
                 size={16}
-                className={`flex-shrink-0 text-white/60 transition-transform duration-200 sm:hidden ${
+                className={`flex-shrink-0 text-white/90/60 transition-transform duration-200 sm:hidden ${
                   open ? "rotate-180" : ""
                 }`}
               />
               <ChevronDown
                 size={18}
-                className={`hidden flex-shrink-0 text-white/60 transition-transform duration-200 sm:block ${
+                className={`hidden flex-shrink-0 text-white/90/60 transition-transform duration-200 sm:block ${
                   open ? "rotate-180" : ""
                 }`}
               />
@@ -128,12 +128,12 @@ const SourceMarketCard = ({
               <div className="space-y-2 border-t border-white/10 pt-2 sm:space-y-2.5 sm:pt-2.5">
                 {/* Status and Trade Button Row */}
                 <div className="flex items-center justify-between gap-2">
-                  <span className="rounded-lg border border-white/10 bg-white/5 px-2 py-0.5 text-xs font-medium text-white/80">
+                  <span className="rounded-lg border border-white/10 bg-white/5 px-2 py-0.5 text-xs font-medium text-white/90">
                     {market.status}
                   </span>
                   <Link
                     href={`/markets/${market.marketId}`}
-                    className={`flex items-center rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-white/10 hover:text-white ${
+                    className={`flex items-center rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-white/10 hover:text-white/90 ${
                       roleLabel === "Assume"
                         ? "hover:border-blue-400/40"
                         : "hover:border-ztg-green-400/40"
@@ -161,9 +161,9 @@ const SourceMarketCard = ({
                     >
                       <span>Outcome Balances</span>
                       {showBalances ? (
-                        <ChevronUp size={12} className="text-white/80" />
+                        <ChevronUp size={12} className="text-white/90" />
                       ) : (
-                        <ChevronDown size={12} className="text-white/80" />
+                        <ChevronDown size={12} className="text-white/90" />
                       )}
                     </button>
                     {showBalances && (
@@ -315,7 +315,7 @@ const ComboMarketHeaderUnified: FC<ComboMarketHeaderUnifiedProps> = ({
 
         {/* Arrow indicator */}
         <div className="flex h-5 w-5 items-center justify-center self-center rounded-full bg-white/10 shadow-md backdrop-blur-sm">
-          <span className="text-xs font-medium leading-none text-white/60">
+          <span className="text-xs font-medium leading-none text-white/90/60">
             →
           </span>
         </div>
diff --git a/components/markets/DisputeResult.tsx b/components/markets/DisputeResult.tsx
index 336db2d15..5206675ae 100644
--- a/components/markets/DisputeResult.tsx
+++ b/components/markets/DisputeResult.tsx
@@ -19,7 +19,7 @@ export const DisputeResult = ({ market }: { market: FullMarketFragment }) => {
       <div className="flex h-16 w-16 items-center justify-center rounded-full border-2 border-orange-400/50 bg-orange-500/30 backdrop-blur-md">
         <AiOutlineFileDone size={32} className="text-orange-400" />
       </div>
-      <p className="text-lg font-semibold text-white">Successfully disputed!</p>
+      <p className="text-lg font-semibold text-white/90">Successfully disputed!</p>
 
       <a
         target="_blank"
diff --git a/components/markets/MarketAddresses.tsx b/components/markets/MarketAddresses.tsx
index b8258c827..131c58813 100644
--- a/components/markets/MarketAddresses.tsx
+++ b/components/markets/MarketAddresses.tsx
@@ -29,12 +29,12 @@ const AddressInspectContent = ({
   return (
     <div>
       <div className="flex w-full border-b-1 border-t-1 border-ztg-primary-600 py-ztg-15">
-        <div className="mr-auto flex w-[90%] items-center pr-ztg-10 text-white">
+        <div className="mr-auto flex w-[90%] items-center pr-ztg-10 text-white/90">
           <div className="mr-ztg-10 h-ztg-30 w-ztg-30 rounded-full bg-white">
             <Avatar address={address} />
           </div>
           <div
-            className="ml-ztg-10 overflow-hidden font-mono text-ztg-12-150 text-black dark:text-white"
+            className="ml-ztg-10 overflow-hidden font-mono text-ztg-12-150 text-black dark:text-white/90"
             data-test="addressDetails"
           >
             {address}
diff --git a/components/markets/MarketContextActionOutcomeSelector.tsx b/components/markets/MarketContextActionOutcomeSelector.tsx
index 4d1fda360..9006e963f 100644
--- a/components/markets/MarketContextActionOutcomeSelector.tsx
+++ b/components/markets/MarketContextActionOutcomeSelector.tsx
@@ -266,7 +266,7 @@ const MarketContextActionOutcomeSelector = ({
                       type="text"
                       ref={inputRef}
                       placeholder="Search Assets"
-                      className="h-[44px] w-full rounded-lg bg-white/10 px-4 text-sm text-white/90 shadow-md backdrop-blur-sm placeholder:text-white/60 focus:bg-white/15 focus:shadow-lg"
+                      className="h-[44px] w-full rounded-lg bg-white/10 px-4 text-sm text-white/90 shadow-md backdrop-blur-sm placeholder:text-white/90/60 focus:bg-white/15 focus:shadow-lg"
                       value={search ?? ""}
                       onChange={(event) => {
                         setSearch(event.target.value);
@@ -282,7 +282,7 @@ const MarketContextActionOutcomeSelector = ({
                     type="text"
                     ref={inputRef}
                     placeholder="Search outcomes..."
-                    className="h-[40px] w-full rounded-lg bg-white/10 px-3 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/60 focus:bg-white/15 focus:shadow-md focus:ring-2 focus:ring-ztg-green-500/30"
+                    className="h-[40px] w-full rounded-lg bg-white/10 px-3 text-sm text-white/90 backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 focus:shadow-md focus:ring-2 focus:ring-ztg-green-500/30"
                     value={search ?? ""}
                     onChange={(event) => {
                       setSearch(event.target.value);
@@ -305,9 +305,9 @@ const MarketContextActionOutcomeSelector = ({
                         <div
                           className={`group flex items-center gap-3 rounded-lg px-4 py-3 transition-all duration-150 ease-in-out ${
                             selected
-                              ? "bg-ztg-green-500/20 text-white shadow-sm ring-2 ring-ztg-green-500/30"
+                              ? "bg-ztg-green-500/20 text-white/90 shadow-sm ring-2 ring-ztg-green-500/30"
                               : active
-                                ? "bg-white/20 text-white shadow-sm"
+                                ? "bg-white/20 text-white/90 shadow-sm"
                                 : "bg-white/10 text-white/90 hover:bg-white/20 hover:shadow-sm"
                           }`}
                         >
@@ -318,8 +318,8 @@ const MarketContextActionOutcomeSelector = ({
                           <span
                             className={`text-sm font-medium transition-colors ${
                               selected
-                                ? "text-ztg-green-400"
-                                : "text-white/90 group-hover:text-white"
+                                ? "text-ztg-green-500"
+                                : "text-white/90 group-hover:text-white/90"
                             }`}
                           >
                             {option.category?.name || option.assetIndex}
diff --git a/components/markets/MarketDescription.tsx b/components/markets/MarketDescription.tsx
index 1e31a385f..b739c791a 100644
--- a/components/markets/MarketDescription.tsx
+++ b/components/markets/MarketDescription.tsx
@@ -21,7 +21,7 @@ export const MarketDescription = ({
     <>
       {isArray(description) && description.length ? (
         <div className="rounded-lg bg-white/15 shadow-lg backdrop-blur-md">
-          <h3 className="mb-4 p-6 pb-3 text-xl font-bold text-white md:p-8">
+          <h3 className="mb-4 p-6 pb-3 text-xl font-bold text-white/90 md:p-8">
             About Market
           </h3>
           <div className="px-6 pb-6 text-base leading-relaxed text-white/90 md:px-8 md:pb-8">
@@ -32,7 +32,7 @@ export const MarketDescription = ({
         isString(description) &&
         description?.length > 0 && (
           <div className="rounded-lg bg-white/15 shadow-lg backdrop-blur-md">
-            <h3 className="mb-4 p-4 pb-2 text-lg font-semibold text-white">
+            <h3 className="mb-4 p-4 pb-2 text-lg font-semibold text-white/90">
               About Market
             </h3>
             <div className="px-4 pb-4 text-white/90">
diff --git a/components/markets/MarketFavoriteToggle.tsx b/components/markets/MarketFavoriteToggle.tsx
index b5f65dd8c..d6b6a86ca 100644
--- a/components/markets/MarketFavoriteToggle.tsx
+++ b/components/markets/MarketFavoriteToggle.tsx
@@ -32,7 +32,7 @@ export const MarketFavoriteToggle = ({
         )}
       </div>
       <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 -translate-x-1/2 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100">
-        <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white shadow-lg">
+        <div className="rounded-md bg-gray-900 px-2 py-1 text-xs text-white/90 shadow-lg">
           {favorited ? "Remove from favorites" : "Add to favorites"}
         </div>
       </div>
diff --git a/components/markets/MarketHeader.tsx b/components/markets/MarketHeader.tsx
index 083eba851..e55662555 100644
--- a/components/markets/MarketHeader.tsx
+++ b/components/markets/MarketHeader.tsx
@@ -143,7 +143,7 @@ const MarketHeader: FC<{
           {/* Title + Badges */}
           <div className="flex min-h-[56px] flex-1 flex-col justify-between sm:min-h-[60px]">
             <div className="flex-[2]">
-              <h1 className="text-xl font-bold leading-tight text-white sm:text-2xl md:text-4xl">
+              <h1 className="text-xl font-bold leading-tight text-white/90 sm:text-2xl md:text-4xl">
                 {market.question}
               </h1>
               {rejectReason && rejectReason.length > 0 && (
diff --git a/components/markets/MarketHeaderUtils.tsx b/components/markets/MarketHeaderUtils.tsx
index 1fbe60452..1341ca7d1 100644
--- a/components/markets/MarketHeaderUtils.tsx
+++ b/components/markets/MarketHeaderUtils.tsx
@@ -55,7 +55,7 @@ export const CompactCreatorBadge: FC<{ address: string }> = ({ address }) => {
         </div>
       </Link>
       <div className="pointer-events-none absolute bottom-full left-0 z-10 mb-1 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100">
-        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 text-xs text-white shadow-lg backdrop-blur-md">
+        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 text-xs text-white/90 shadow-lg backdrop-blur-md">
           <div className="mb-0.5 font-medium">Creator</div>
           <div className="font-mono text-xxs">{address}</div>
         </div>
@@ -77,7 +77,7 @@ export const CompactAddress: FC<{ address: string }> = ({ address }) => {
         <Avatar address={address} copy={false} size={18} />
         <span className="text-xs font-medium text-gray-800">{displayName}</span>
         <div className="absolute bottom-full left-1/2 z-10 mb-1 -translate-x-1/2 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100">
-          <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 font-mono text-xs text-white shadow-lg backdrop-blur-md">
+          <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 font-mono text-xs text-white/90 shadow-lg backdrop-blur-md">
             {address}
           </div>
         </div>
diff --git a/components/markets/MarketHero.tsx b/components/markets/MarketHero.tsx
index 237e9c84e..6e79321b5 100644
--- a/components/markets/MarketHero.tsx
+++ b/components/markets/MarketHero.tsx
@@ -47,7 +47,7 @@ export const MarketHero: FC<MarketHeroProps> = ({
         <div className="flex min-h-[60px] flex-1 flex-col justify-between">
           {/* Title section - takes up 2/3 */}
           <div className="flex-[2]">
-            <h1 className="text-2xl font-bold leading-tight text-white md:text-4xl">
+            <h1 className="text-2xl font-bold leading-tight text-white/90 md:text-4xl">
               {question}
             </h1>
             {rejectReason && rejectReason.length > 0 && (
diff --git a/components/markets/MarketHistoryModal.tsx b/components/markets/MarketHistoryModal.tsx
index 112825d07..09b522912 100644
--- a/components/markets/MarketHistoryModal.tsx
+++ b/components/markets/MarketHistoryModal.tsx
@@ -70,12 +70,12 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
       <div className="relative flex max-h-[85vh] w-full min-w-0 flex-shrink-0 flex-grow-0 flex-col overflow-hidden rounded-xl border-2 border-white/10 bg-white/10 shadow-2xl ring-2 ring-white/5 backdrop-blur-xl sm:w-[min(560px,90vw)] sm:max-w-[600px] md:max-h-[80vh]">
         {/* Header */}
         <div className="relative flex-shrink-0 border-b-2 border-white/10 px-6 pt-6 pb-3">
-          <h3 className="text-center text-lg font-bold text-white md:text-xl">
+          <h3 className="text-center text-lg font-bold text-white/90 md:text-xl">
             Market History
           </h3>
           <button
             onClick={() => setShowMarketHistory(false)}
-            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg border-2 border-white/10 bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white"
+            className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg border-2 border-white/10 bg-white/10 text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white/90"
             aria-label="Close"
           >
             <MdClose size={20} />
@@ -97,13 +97,13 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                 />
               </div>
               <div className="flex-1">
-                <div className="mb-1 font-semibold text-white">
+                <div className="mb-1 font-semibold text-white/90">
                   Market Opened
                 </div>
-                <div className="text-sm text-white/80">
+                <div className="text-sm text-white/90">
                   {marketStart}
                   {marketHistory?.start?.blockNumber > 0 && (
-                    <span className="ml-2 text-xs text-white/60">
+                    <span className="ml-2 text-xs text-white/90/60">
                       Block #{marketHistory.start.blockNumber}
                     </span>
                   )}
@@ -117,13 +117,13 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                 <MdOutlineStop className="text-white/90" size={14} />
               </div>
               <div className="flex-1">
-                <div className="mb-1 font-semibold text-white">
+                <div className="mb-1 font-semibold text-white/90">
                   Market Closed
                 </div>
-                <div className="text-sm text-white/80">
+                <div className="text-sm text-white/90">
                   {marketClosed}
                   {marketHistory?.end?.blockNumber > 0 && (
-                    <span className="ml-2 text-xs text-white/60">
+                    <span className="ml-2 text-xs text-white/90/60">
                       Block #{marketHistory.end.blockNumber}
                     </span>
                   )}
@@ -159,12 +159,12 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                         <span className="text-white/70">Unknown</span>
                       )}{" "}
                       reported{" "}
-                      <span className="font-bold text-white">
+                      <span className="font-bold text-white/90">
                         {getOutcome(marketHistory.reported.outcome)}
                       </span>
                     </div>
                   </div>
-                  <div className="text-xs text-white/60">
+                  <div className="text-xs text-white/90/60">
                     {marketHistory.reported.timestamp &&
                       new Intl.DateTimeFormat("default", {
                         dateStyle: "medium",
@@ -209,7 +209,7 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
                         disputed the reported outcome
                       </div>
                     </div>
-                    <div className="text-xs text-white/60">
+                    <div className="text-xs text-white/90/60">
                       {dispute.timestamp &&
                         new Intl.DateTimeFormat("default", {
                           dateStyle: "medium",
@@ -230,23 +230,23 @@ export const MarketHistoryModal: FC<MarketHistoryModalProps> = ({
               <div className="relative flex gap-4">
                 <div className="absolute -left-8 flex h-6 w-6 items-center justify-center rounded-full border-2 border-ztg-green-400/40 bg-ztg-green-500/20 shadow-sm backdrop-blur-sm">
                   <MdOutlineCheckCircle
-                    className="text-ztg-green-400"
+                    className="text-ztg-green-500"
                     size={14}
                   />
                 </div>
                 <div className="flex-1 rounded-lg border-2 border-ztg-green-400/30 bg-ztg-green-500/10 p-3 backdrop-blur-sm">
                   <div className="mb-2">
-                    <div className="mb-1 inline-block rounded-md bg-ztg-green-400/20 px-2 py-0.5 text-xs font-semibold text-ztg-green-300">
+                    <div className="mb-1 inline-block rounded-md bg-ztg-green-400/20 px-2 py-0.5 text-xs font-semibold text-ztg-green-500">
                       Resolved
                     </div>
                     <div className="text-sm font-medium text-white/90">
                       Market resolved to{" "}
-                      <span className="font-bold text-white">
+                      <span className="font-bold text-white/90">
                         {getOutcome(marketHistory.resolved.outcome)}
                       </span>
                     </div>
                   </div>
-                  <div className="text-xs text-white/60">
+                  <div className="text-xs text-white/90/60">
                     {marketHistory.resolved.timestamp &&
                       new Intl.DateTimeFormat("default", {
                         dateStyle: "medium",
diff --git a/components/markets/MarketMetadataBadges.tsx b/components/markets/MarketMetadataBadges.tsx
index ac5d0cd27..6a7461596 100644
--- a/components/markets/MarketMetadataBadges.tsx
+++ b/components/markets/MarketMetadataBadges.tsx
@@ -37,7 +37,7 @@ const IconBadge: FC<{
       <div
         className={`pointer-events-none absolute bottom-full z-10 mb-1 whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100 ${tooltipPositionClasses[tooltipAlign]}`}
       >
-        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 text-xs text-white shadow-lg backdrop-blur-md">
+        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-2 py-1 text-xs text-white/90 shadow-lg backdrop-blur-md">
           {label ? (
             <>
               <div className="mb-0.5 font-medium">{label}</div>
@@ -151,8 +151,8 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
             }
           >
             <div className="text-left">
-              <h4 className="mb-2 text-sm font-bold text-white">Trusted Market</h4>
-              <div className="mb-3 text-xs text-white/80">
+              <h4 className="mb-2 text-sm font-bold text-white/90">Trusted Market</h4>
+              <div className="mb-3 text-xs text-white/90">
                 {getDisputeMechanismDescription(market.disputeMechanism)}
               </div>
               <div className="flex flex-col gap-2">
@@ -186,8 +186,8 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
             }
           >
             <div className="text-left">
-              <h4 className="mb-1 text-sm font-bold text-white">Market Edited</h4>
-              <p className="mb-3 text-xs text-white/80">
+              <h4 className="mb-1 text-sm font-bold text-white/90">Market Edited</h4>
+              <p className="mb-3 text-xs text-white/90">
                 Edited in CMS. Original immutable metadata shown below.
               </p>
 
@@ -196,7 +196,7 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
                   <label className="mb-1 text-xs font-semibold text-white/90">
                     Original Question:
                   </label>
-                  <div className="text-xs text-white/80">
+                  <div className="text-xs text-white/90">
                     {market.originalMetadata.question}
                   </div>
                 </div>
@@ -207,7 +207,7 @@ export const MarketMetadataBadges: FC<MarketMetadataBadgesProps> = ({
                   <label className="mb-1 text-xs font-semibold text-white/90">
                     Original Description:
                   </label>
-                  <div className="text-xs text-white/80">
+                  <div className="text-xs text-white/90">
                     <QuillViewer value={market.originalMetadata.description} />
                   </div>
                 </div>
diff --git a/components/markets/MarketOutcomeDisplay.tsx b/components/markets/MarketOutcomeDisplay.tsx
index 15bfa6302..4aac57185 100644
--- a/components/markets/MarketOutcomeDisplay.tsx
+++ b/components/markets/MarketOutcomeDisplay.tsx
@@ -25,7 +25,7 @@ const StatusConfig = {
     label: "Final Outcome",
     gradient: "from-ztg-green-400/80 to-ztg-green-500/80",
     borderColor: "border-ztg-green-400/40",
-    iconColor: "text-ztg-green-400",
+    iconColor: "text-ztg-green-500",
     bgColor: "bg-ztg-green-500/10",
   },
   Reported: {
@@ -97,7 +97,7 @@ export const MarketOutcomeDisplay: FC<MarketOutcomeDisplayProps> = ({
             </span>
             <Link
               href={`/portfolio/${by}`}
-              className="font-medium text-white/90 transition-all hover:text-ztg-green-400"
+              className="font-medium text-white/90 transition-all hover:text-ztg-green-500"
             >
               <UserIdentity user={by} />
             </Link>
@@ -114,7 +114,7 @@ export const MarketOutcomeDisplay: FC<MarketOutcomeDisplayProps> = ({
             className="ml-auto flex items-center gap-1.5 rounded-md bg-white/10 px-3 py-1.5 text-xs font-medium text-white/90 backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-sm"
             aria-label="View market history"
           >
-            <MdOutlineHistory size={16} className="text-ztg-green-400" />
+            <MdOutlineHistory size={16} className="text-ztg-green-500" />
             <span className="hidden sm:inline">History</span>
           </button>
         ) : (
diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index b4c1c2fcb..c30445a08 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -84,7 +84,7 @@ const MarketSearch = () => {
 
           <input
             ref={inputRef}
-            className={`h-11 w-full touch-manipulation overflow-hidden text-ellipsis rounded-lg bg-white/10 pl-4 pr-4 text-base text-white outline-none ring-2 ring-transparent backdrop-blur-sm transition-all placeholder:text-white/60 focus:bg-white/15 focus:shadow-lg focus:ring-2 focus:ring-ztg-green-500/30 md:text-base`}
+            className={`h-11 w-full touch-manipulation overflow-hidden text-ellipsis rounded-lg bg-white/10 pl-4 pr-4 text-base text-white/90 outline-none ring-2 ring-transparent backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 focus:shadow-lg focus:ring-2 focus:ring-ztg-green-500/30 md:text-base`}
             value={searchTerm}
             placeholder="Search markets..."
             onChange={(event) => {
@@ -138,7 +138,7 @@ const MarketSearch = () => {
         leaveTo="transform opacity-0 scale-95"
         show={Boolean(showResults && showSearch && markets)}
       >
-        <div className="absolute left-1/2 top-[42px] z-50 max-h-[420px] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 flex-col rounded-lg border-2 border-white/10 bg-ztg-primary-700/95 px-2 py-4 shadow-xl ring-2 ring-white/5 backdrop-blur-lg md:max-w-xl">
+        <div className="absolute overflow-auto left-1/2 top-[42px] z-50 max-h-[420px] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 flex-col rounded-lg border-2 border-white/10 bg-ztg-primary-700/95 px-2 py-4 shadow-xl ring-2 ring-white/5 backdrop-blur-lg md:max-w-xl">
           <div className="subtle-scroll-bar overflow-y-scroll">
             {markets?.length ? (
               markets?.map((market, index) => (
@@ -158,7 +158,7 @@ const MarketSearch = () => {
                     {market.question}
                   </div>
                   <div
-                    className={`w-16 rounded-md px-2 py-1 text-center text-xs text-white ${
+                    className={`w-16 rounded-md px-2 py-1 text-center text-xs text-white/90 ${
                       market.status === MarketStatus.Active
                         ? "bg-ztg-green-500"
                         : "bg-gray-500"
diff --git a/components/markets/MarketTimer.tsx b/components/markets/MarketTimer.tsx
index 64f465b0a..b9cacc330 100644
--- a/components/markets/MarketTimer.tsx
+++ b/components/markets/MarketTimer.tsx
@@ -30,10 +30,10 @@ export const MarketTimer = ({ stage }: MarketTimerProps) => {
           />
           <div className="absolute inset-0 flex items-center justify-between px-2.5 sm:px-4">
             <div className="flex flex-wrap items-center gap-1 text-xs sm:gap-1.5 sm:text-sm">
-              <span className="font-bold text-white">
+              <span className="font-bold text-white/90">
                 {copy[stage.type].title}:
               </span>
-              <span className="font-medium lowercase text-white/80">
+              <span className="font-medium lowercase text-white/90">
                 {copy[stage.type].description}
               </span>
               {!isInfinite(stage) && (
@@ -43,7 +43,7 @@ export const MarketTimer = ({ stage }: MarketTimerProps) => {
               )}
             </div>
             <div className="flex items-center gap-2 text-xs sm:gap-3 sm:text-sm">
-              <span className="font-bold text-white">
+              <span className="font-bold text-white/90">
                 {percentage.toFixed(0)}%
               </span>
             </div>
@@ -57,10 +57,10 @@ export const MarketTimer = ({ stage }: MarketTimerProps) => {
           />
           <div className="absolute inset-0 flex items-center justify-between px-2.5 sm:px-4">
             <div className="flex flex-wrap items-center gap-1 text-xs sm:gap-2 sm:text-sm">
-              <span className="font-bold text-white">
+              <span className="font-bold text-white/90">
                 {copy[stage.type].title}:
               </span>
-              <span className="font-medium lowercase text-white/80">
+              <span className="font-medium lowercase text-white/90">
                 {copy[stage.type].description}
               </span>
             </div>
@@ -103,17 +103,17 @@ const copy: Record<
   Trading: {
     title: "Live",
     description: "Trading",
-    color: "bg-gradient-to-r from-ztg-green-500/80 to-ztg-green-600/80",
+    color: "bg-gradient-to-r from-ztg-primary-300/85 to-ztg-primary-200/95",
   },
   GracePeriod: {
     title: "Grace Period",
     description: "Pre-reporting",
-    color: "bg-gradient-to-r from-ztg-green-500/80 to-ztg-green-600/80",
+    color: "bg-gradient-to-r from-ztg-primary-300/85 to-ztg-primary-200/95",
   },
   OracleReportingPeriod: {
     title: "Ended",
     description: "Oracle pending",
-    color: "bg-gradient-to-r from-ztg-green-500/80 to-ztg-green-600/80",
+    color: "bg-gradient-to-r from-ztg-primary-300/85 to-ztg-primary-200/95",
   },
   OpenReportingPeriod: {
     title: "Oracle Failed",
diff --git a/components/markets/PoolDeployer.tsx b/components/markets/PoolDeployer.tsx
index ae4d74882..aaf1840c3 100644
--- a/components/markets/PoolDeployer.tsx
+++ b/components/markets/PoolDeployer.tsx
@@ -205,7 +205,7 @@ const PoolDeployer = ({
         liquidity ? (
           <div className="space-y-6 py-6">
             <div>
-              <h4 className="mb-2 text-lg font-bold text-white md:text-xl">
+              <h4 className="mb-2 text-lg font-bold text-white/90 md:text-xl">
                 Deploy Pool
               </h4>
               <p className="text-sm text-white/70">
@@ -236,7 +236,7 @@ const PoolDeployer = ({
             </div>
             <div className="flex flex-col items-center gap-4">
               <TransactionButton
-                className="w-full rounded-lg bg-white/10 px-6 py-3 text-sm font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-lg active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 md:w-auto md:px-8 md:py-3 md:text-base"
+                className="w-full rounded-lg bg-white/10 px-6 py-3 text-sm font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white/20 hover:shadow-lg active:scale-95 disabled:cursor-not-allowed disabled:opacity-50 md:w-auto md:px-8 md:py-3 md:text-base"
                 onClick={() => deployAmm2Pool()}
                 disabled={!fieldState.isValid || isLoading}
               >
@@ -247,7 +247,7 @@ const PoolDeployer = ({
                 <span className="text-xs font-medium text-white/70">
                   Total Cost:{" "}
                 </span>
-                <span className="text-sm font-semibold text-white">
+                <span className="text-sm font-semibold text-white/90">
                   {poolCost}{" "}
                   {currencyMetadata?.name || constants?.tokenSymbol || "ZTG"}
                 </span>
@@ -259,7 +259,7 @@ const PoolDeployer = ({
             {market?.status === "Active" && (
               <div className="flex items-center justify-center py-6">
                 <button
-                  className="rounded-lg border-2 border-white/20 bg-white/10 px-6 py-3 text-sm font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 hover:shadow-lg active:scale-95 md:px-8 md:py-3 md:text-base"
+                  className="rounded-lg border-2 border-white/20 bg-white/10 px-6 py-3 text-sm font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:border-white/30 hover:bg-white/20 hover:shadow-lg active:scale-95 md:px-8 md:py-3 md:text-base"
                   data-test="deployLiquidityButton"
                   onClick={handleDeployClick}
                 >
diff --git a/components/markets/PromotionCallout.tsx b/components/markets/PromotionCallout.tsx
index ac9403ffb..595708c1b 100644
--- a/components/markets/PromotionCallout.tsx
+++ b/components/markets/PromotionCallout.tsx
@@ -92,7 +92,7 @@ export const MarketPromotionCallout = (props: {
                 <button
                   onClick={() => toggle(false)}
                   className={`ztg-transition mb-4 h-ztg-56 w-full rounded-full bg-ztg-green-600/80 
-        text-ztg-16-150 font-bold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md focus:outline-none disabled:cursor-default disabled:opacity-20 lg:mb-8`}
+        text-ztg-16-150 font-bold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md focus:outline-none disabled:cursor-default disabled:opacity-20 lg:mb-8`}
                 >
                   Got it!
                 </button>
diff --git a/components/markets/ReportResult.tsx b/components/markets/ReportResult.tsx
index bf524a6ef..6e14aa53c 100644
--- a/components/markets/ReportResult.tsx
+++ b/components/markets/ReportResult.tsx
@@ -25,7 +25,7 @@ export const ReportResult = ({
   const tweetUrl = `${twitterBaseUrl}I just reported the outcome of %40ZeitgeistPM market: "${market.question}" to be ${outcomeName}%0A%0ACheck out the market here%3A%0A&url=${marketUrl}`;
 
   return (
-    <div className="flex flex-col items-center gap-3 text-white">
+    <div className="flex flex-col items-center gap-3 text-white/90">
       <div>
         <AiOutlineFileDone size={64} />
       </div>
diff --git a/components/markets/ScalarPriceRange.tsx b/components/markets/ScalarPriceRange.tsx
index 7292d3665..700cd4b69 100644
--- a/components/markets/ScalarPriceRange.tsx
+++ b/components/markets/ScalarPriceRange.tsx
@@ -74,9 +74,9 @@ const ScalarPriceRange = ({
             style={{
               width: `${averagePosition != null ? averagePosition : 0}px`,
             }}
-            className="absolute bottom-0 left-0 h-full bg-gradient-to-r from-ztg-green-500/60 to-ztg-green-400/70 transition-all"
+            className="absolute bottom-0 left-0 h-full bg-gradient-to-r from-ztg-primary-300/80 to-ztg-primary-200/90 transition-all"
           ></div>
-          <span className="relative z-10 px-2.5 text-xs font-semibold text-white sm:text-sm">
+          <span className="relative z-10 px-2.5 text-xs font-semibold text-white/90 sm:text-sm">
             Prediction: {positionDisplay}
           </span>
         </>
diff --git a/components/markets/TradeResult.tsx b/components/markets/TradeResult.tsx
index 960b672cf..69bd21f4b 100644
--- a/components/markets/TradeResult.tsx
+++ b/components/markets/TradeResult.tsx
@@ -67,7 +67,7 @@ const TradeResult = ({
       <div className="text-ztg-primary-100 text-sm">
         You've just {type === "buy" ? "bought" : "sold"}
       </div>
-      <div className="text-5xl text-white font-bold">
+      <div className="text-5xl text-white/90 font-bold">
         {amount?.toFixed(2)}
       </div>
       <div className="text-center text-ztg-primary-200">
@@ -82,7 +82,7 @@ const TradeResult = ({
 
       <button
         onClick={onContinueClick}
-        className="rounded-md px-4 font-bold text-ztg-green-400 transition-all hover:bg-ztg-primary-700/30 active:scale-95"
+        className="rounded-md px-4 font-bold text-ztg-green-500 transition-all hover:bg-ztg-primary-700/30 active:scale-95"
       >
         Continue Trading
       </button>
@@ -90,7 +90,7 @@ const TradeResult = ({
         target="_blank"
         rel="noopener noreferrer"
         href={tweetUrl}
-        className="mb-2 text-sm transition-all hover:opacity-80 text-white flex items-center gap-2"
+        className="mb-2 text-sm transition-all hover:opacity-80 text-white/90 flex items-center gap-2"
       >
         Share on
         <BsTwitterX color="white" size={18}/>
diff --git a/components/markets/market-card/MarketOrComboCard.tsx b/components/markets/market-card/MarketOrComboCard.tsx
index 76877e341..fb39f3f1f 100644
--- a/components/markets/market-card/MarketOrComboCard.tsx
+++ b/components/markets/market-card/MarketOrComboCard.tsx
@@ -50,13 +50,13 @@ const ComboMarketRow = ({
       <span
         className={`inline-flex shrink-0 items-center rounded-md px-2 py-0.5 text-xs font-semibold ${
           isAssume
-            ? "bg-blue-500/80 text-white"
-            : "bg-ztg-green-500/80 text-white"
+            ? "bg-blue-500/80 text-white/90"
+            : "bg-ztg-green-500/80 text-white/90"
         }`}
       >
         {roleLabel}
       </span>
-      <span className="line-clamp-1 flex-1 text-xs font-medium leading-tight text-white/90">
+      <span className="line-clamp-1 flex-1 text-xs font-medium leading-tight text-white/90 group-hover:text-ztg-green-500 transition-colors">
         {market.question}
       </span>
     </div>
@@ -94,13 +94,13 @@ const ComboMarketRowInline = ({
       <span
         className={`inline-flex shrink-0 items-center rounded-md px-2 py-0.5 text-xs font-semibold ${
           isAssume
-            ? "bg-blue-500/80 text-white"
-            : "bg-ztg-green-500/80 text-white"
+            ? "bg-blue-500/80 text-white/90"
+            : "bg-ztg-green-500/80 text-white/90"
         }`}
       >
         {roleLabel}
       </span>
-      <span className="line-clamp-1 flex-1 text-xs font-medium leading-tight text-white/90">
+      <span className="line-clamp-1 flex-1 text-xs font-medium leading-tight text-white/90 group-hover:text-ztg-green-500 transition-colors">
         {market.question}
       </span>
     </div>
@@ -196,7 +196,7 @@ const ComboPoolCard = ({
     <div
       data-testid={`comboPoolCard-${pool.poolId}`}
       className={`ztg-transition group relative flex min-w-full flex-col
-      rounded-lg bg-white/10 p-4 shadow-md backdrop-blur-md transition-all hover:shadow-lg md:min-w-[calc(50%-8px)] md:hover:scale-[1.01] lg:min-w-[calc(100%/3-9.67px)] ${className}`}
+      rounded-lg bg-white/10 p-4 shadow-md backdrop-blur-md transition-all hover:shadow-lg md:min-w-[calc(50%-8px)] lg:min-w-[calc(100%/3-9.67px)] ${className}`}
     >
       <Link
         href={item.link}
@@ -229,7 +229,7 @@ const ComboPoolCard = ({
                   <div className="relative my-1.5 flex items-center justify-center">
                     <div className="h-px w-full bg-white/10" />
                     <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 p-0.5 backdrop-blur-sm">
-                      <ArrowDown size={10} className="text-white/60" />
+                      <ArrowDown size={10} className="text-white/90/60" />
                     </div>
                   </div>
                 )}
@@ -261,7 +261,7 @@ const ComboPoolCard = ({
                 Ends Soon
               </span>
             )}
-            <span className="ml-1 border-l-1 border-l-ztg-green-500/40 pl-1">
+            <span className="ml-1 border-l-1 border-l-white/50 pl-1">
               {totalOutcomes} outcomes{" "}
             </span>
           </div>
@@ -382,7 +382,7 @@ const ComboPoolPredictionBar = ({
         </span>
       </div>
       <div
-        className={`h-full bg-gradient-to-r from-ztg-green-500/60 to-ztg-green-400/70`}
+        className={`h-full bg-gradient-to-r from-ztg-primary-300/80 to-ztg-primary-200/90`}
         style={{
           width: `${isNaN(highestPercentage) ? 0 : highestPercentage}%`,
         }}
diff --git a/components/markets/market-card/index.tsx b/components/markets/market-card/index.tsx
index ac2a80136..eccb4aa13 100644
--- a/components/markets/market-card/index.tsx
+++ b/components/markets/market-card/index.tsx
@@ -104,7 +104,7 @@ export const MarketCard = ({
       <div
         data-testid={`marketCard-${marketId}`}
         className={`ztg-transition group relative flex min-w-full flex-col
-        rounded-lg bg-white/10 p-4 shadow-md backdrop-blur-md transition-all hover:shadow-lg md:min-w-[calc(50%-8px)] md:hover:scale-[1.01] lg:min-w-[calc(100%/3-9.67px)] ${className}`}
+        rounded-lg bg-white/10 p-4 shadow-md backdrop-blur-md transition-all hover:shadow-lg md:min-w-[calc(50%-8px)] lg:min-w-[calc(100%/3-9.67px)] ${className}`}
       >
         <Link
           href={`/markets/${marketId}`}
@@ -131,14 +131,14 @@ export const MarketCard = ({
                 }}
               />
             </div>
-            <h5 className="line-clamp-2 h-12 w-full pr-4 text-base text-white/90 duration-200">
+            <h5 className="line-clamp-2 h-12 w-full pr-4 text-base text-white/90 duration-200 group-hover:text-ztg-green-500 transition-colors">
               {cmsMetadata?.question ?? question}
             </h5>
           </div>
 
           <div className="w-full">
             {status === "Resolved" && resolvedOutcome ? (
-              <span className="text-xs text-ztg-blue">
+              <span className="text-xs text-ztg-green-500">
                 Resolved:{" "}
                 <span className="font-semibold">
                   {marketType?.categorical
@@ -200,15 +200,15 @@ const MarketCardPredictionBar = ({
         className={`relative h-6 w-full overflow-hidden rounded-lg bg-white/10 shadow-md backdrop-blur-sm transition-all sm:h-[30px]`}
       >
         <div className="absolute flex h-full w-full items-center justify-between px-3 text-sm">
-          <span className="line-clamp-1 font-semibold text-white/90">
+          <span className="line-clamp-1 text-white/90">
             {name}
           </span>
-          <span className="font-bold text-white/90 transition-all">
+          <span className="font-semibold text-white/90 transition-all">
             {impliedPercentage}%
           </span>
         </div>
         <div
-          className={`h-full bg-gradient-to-r from-ztg-green-500/60 to-ztg-green-400/70`}
+          className={`h-full bg-gradient-to-r from-ztg-primary-300/80 to-ztg-primary-200/90`}
           style={{
             width: `${isNaN(impliedPercentage) ? 0 : impliedPercentage}%`,
           }}
@@ -252,7 +252,7 @@ const MarketCardDetails = ({
   const imagePath = lookupAssetImagePath(assetId);
 
   return (
-    <div className="flex items-center text-xs text-white/90">
+    <div className="flex items-center text-xs text-white/50">
       <div>
         <span className="font-semibold">
           {period.end &&
@@ -266,8 +266,8 @@ const MarketCardDetails = ({
         {isEnding() && (
           <span className="ml-1 font-semibold text-ztg-red-400">Ends Soon</span>
         )}
-        <span className="ml-1 border-l-1 border-l-ztg-green-500/40 pl-1">
-          {outcomeAssets.length} outcomes{" "}
+        <span className="pl-1">
+        • {outcomeAssets.length} outcomes{" "}
         </span>
       </div>
       <div className="ml-auto flex items-center justify-center gap-1.5">
@@ -285,7 +285,10 @@ const MarketCardDetails = ({
             {formatNumberCompact(new Decimal(volume).div(ZTG).toNumber(), 2)}
           </span>
         </div>
-        {liquidity != undefined && baseAsset ? (
+        {liquidity != undefined &&
+        baseAsset &&
+        liquidity !== "" &&
+        !isNaN(Number(liquidity)) ? (
           <div className="flex items-center gap-1">
             <Droplet size={12} className="text-white/90" />
             <span>
diff --git a/components/markets/market-filter/ClearAllButton.tsx b/components/markets/market-filter/ClearAllButton.tsx
index ba64bfd28..b2cce4819 100644
--- a/components/markets/market-filter/ClearAllButton.tsx
+++ b/components/markets/market-filter/ClearAllButton.tsx
@@ -1,7 +1,7 @@
 const ClearAllButton = ({ clear }) => {
   return (
     <button
-      className="flex items-center rounded-md bg-white/15 px-2 py-1 text-sm font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white/20"
+      className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-white/15 px-2 py-2 text-xs font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white/20 active:scale-95 sm:px-2.5 sm:text-sm md:px-3"
       onClick={clear}
     >
       Clear All
diff --git a/components/markets/market-filter/DropDownSelect.tsx b/components/markets/market-filter/DropDownSelect.tsx
index 76f03ba29..33c57ba68 100644
--- a/components/markets/market-filter/DropDownSelect.tsx
+++ b/components/markets/market-filter/DropDownSelect.tsx
@@ -44,12 +44,12 @@ const Control = ({ children, ...props }: ControlProps<MarketFilter, false>) => {
     <components.Control {...props}>
       <div
         className={
-          "flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 " +
+          "flex h-9 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 " +
           (menuIsOpen
-            ? "bg-white/15 text-white"
+            ? "bg-white/15 text-white/90"
             : hasActiveFilters
-              ? "bg-white/15 text-ztg-green-400 hover:bg-white/20 hover:text-white"
-              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white")
+              ? "bg-white/15 text-ztg-green-500 hover:bg-white/20 hover:text-white/90"
+              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90")
         }
         onClick={onClick}
       >
@@ -79,10 +79,10 @@ const Option = ({ children, ...props }: OptionProps<MarketFilter, false>) => {
         className={
           "center h-full cursor-pointer rounded-md px-2 py-1.5 transition-all " +
           (isActive
-            ? "bg-ztg-green-500/20 text-ztg-green-400"
+            ? "bg-ztg-green-500/20 text-ztg-green-500"
             : isFocused
-              ? "bg-white/10 text-white"
-              : "text-white/90 hover:bg-white/10 hover:text-white")
+              ? "bg-white/10 text-white/90"
+              : "text-white/90 hover:bg-white/10 hover:text-white/90")
         }
       >
         {data.imageUrl && (
@@ -104,7 +104,7 @@ const Option = ({ children, ...props }: OptionProps<MarketFilter, false>) => {
           <div
             className={
               "px-1 text-xs font-medium " +
-              (isActive ? "text-ztg-green-400" : "inherit")
+              (isActive ? "text-ztg-green-500" : "inherit")
             }
           >
             {children}
diff --git a/components/markets/market-filter/MarketActiveFilters.tsx b/components/markets/market-filter/MarketActiveFilters.tsx
index 533bc72bb..d409b57e4 100644
--- a/components/markets/market-filter/MarketActiveFilters.tsx
+++ b/components/markets/market-filter/MarketActiveFilters.tsx
@@ -13,7 +13,7 @@ export const MarketActiveFilterItem = ({
   onRemove,
 }: MarketActiveFilterItemProps) => {
   return (
-    <div className="flex items-center gap-1 rounded-md bg-white/15 px-2 py-1 text-sm font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white/20">
+    <div className="flex h-9 items-center justify-center gap-1 rounded-lg bg-white/15 px-2 py-2 text-xs font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white/20 active:scale-95 sm:px-2.5 sm:text-sm md:px-3">
       <span>{filter.label}</span>
       <button
         onClick={() => onRemove(filter)}
diff --git a/components/markets/market-filter/MarketFiltersCheckboxes.tsx b/components/markets/market-filter/MarketFiltersCheckboxes.tsx
index cc747e624..0483a3e00 100644
--- a/components/markets/market-filter/MarketFiltersCheckboxes.tsx
+++ b/components/markets/market-filter/MarketFiltersCheckboxes.tsx
@@ -13,7 +13,7 @@ const MarketFiltersCheckboxes: React.FC<MarketFiltersCheckboxesProps> = ({
   return withLiquidityOnly != null ? (
     <label
       className={
-        "flex cursor-pointer items-center text-sm font-semibold text-white/90 transition-colors hover:text-white " +
+        "flex cursor-pointer items-center text-sm font-semibold text-white/90 transition-colors hover:text-white/90 " +
         className
       }
     >
diff --git a/components/markets/market-filter/MarketFiltersDropdowns.tsx b/components/markets/market-filter/MarketFiltersDropdowns.tsx
index 4ddafcf3d..e6df1bdd8 100644
--- a/components/markets/market-filter/MarketFiltersDropdowns.tsx
+++ b/components/markets/market-filter/MarketFiltersDropdowns.tsx
@@ -20,6 +20,7 @@ const MarketFiltersDropdowns = ({
     addActiveFilter,
     removeActiveFilter,
     activeFilters,
+    setSelectedMenu,
   } = useMarketFiltersContext();
 
   const updateFilters = (marketFilter: MarketFilter) => {
@@ -30,6 +31,9 @@ const MarketFiltersDropdowns = ({
     isFilterActive
       ? removeActiveFilter(marketFilter)
       : addActiveFilter(marketFilter);
+    
+    // Close the menu after selection
+    setSelectedMenu("None");
   };
   return (
     <div className={className}>
diff --git a/components/markets/market-filter/MarketFiltersSort.tsx b/components/markets/market-filter/MarketFiltersSort.tsx
index 8ae64ce40..78bbd11ca 100644
--- a/components/markets/market-filter/MarketFiltersSort.tsx
+++ b/components/markets/market-filter/MarketFiltersSort.tsx
@@ -66,12 +66,12 @@ const Control = ({
     <components.Control {...props}>
       <div
         className={
-          "flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 " +
+          "flex h-9 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 " +
           (menuIsOpen
-            ? "bg-white/15 text-white"
+            ? "bg-white/15 text-white/90"
             : selectedOption
-              ? "bg-white/15 text-ztg-green-400 hover:bg-white/20 hover:text-white"
-              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white")
+              ? "bg-white/15 text-ztg-green-500 hover:bg-white/20 hover:text-white/90"
+              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90")
         }
         onClick={onClick}
       >
@@ -124,13 +124,13 @@ const Option = ({
         className={
           "center h-full cursor-pointer rounded-md px-2 py-1.5 transition-all " +
           (isSelected
-            ? "bg-ztg-green-500/20 text-ztg-green-400"
+            ? "bg-ztg-green-500/20 text-ztg-green-500"
             : isFocused
-              ? "bg-white/10 text-white"
-              : "text-white/90 hover:bg-white/10 hover:text-white")
+              ? "bg-white/10 text-white/90"
+              : "text-white/90 hover:bg-white/10 hover:text-white/90")
         }
       >
-        <Icon size={13} className={isSelected ? "text-ztg-green-400" : ""} />
+        <Icon size={13} className={isSelected ? "text-ztg-green-500" : ""} />
         <div className="flex items-center gap-1.5">
           {isSelected && (
             <div className="h-1.5 w-1.5 rounded-full bg-ztg-green-400"></div>
@@ -138,7 +138,7 @@ const Option = ({
           <div
             className={
               "px-1 text-xs font-medium " +
-              (isSelected ? "text-ztg-green-400" : "inherit")
+              (isSelected ? "text-ztg-green-500" : "inherit")
             }
           >
             {isVolumeBased ? "Volume" : children}
diff --git a/components/markets/market-filter/MarketTypeToggle.tsx b/components/markets/market-filter/MarketTypeToggle.tsx
index cf70d9c6d..e8a5779ce 100644
--- a/components/markets/market-filter/MarketTypeToggle.tsx
+++ b/components/markets/market-filter/MarketTypeToggle.tsx
@@ -49,12 +49,12 @@ const Control = ({
     <components.Control {...props}>
       <div
         className={
-          "flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 " +
+          "flex h-9 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 " +
           (menuIsOpen
-            ? "bg-white/15 text-white"
+            ? "bg-white/15 text-white/90"
             : selectedOption
-              ? "bg-white/15 text-ztg-green-400 hover:bg-white/20 hover:text-white"
-              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white")
+              ? "bg-white/15 text-ztg-green-500 hover:bg-white/20 hover:text-white/90"
+              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90")
         }
         onClick={onClick}
       >
@@ -87,13 +87,13 @@ const Option = ({
         className={
           "center h-full cursor-pointer rounded-md px-2 py-1.5 transition-all " +
           (isSelected
-            ? "bg-ztg-green-500/20 text-ztg-green-400"
+            ? "bg-ztg-green-500/20 text-ztg-green-500"
             : isFocused
-              ? "bg-white/10 text-white"
-              : "text-white/90 hover:bg-white/10 hover:text-white")
+              ? "bg-white/10 text-white/90"
+              : "text-white/90 hover:bg-white/10 hover:text-white/90")
         }
       >
-        <Icon size={13} className={isSelected ? "text-ztg-green-400" : ""} />
+        <Icon size={13} className={isSelected ? "text-ztg-green-500" : ""} />
         <div className="flex items-center gap-1.5">
           {isSelected && (
             <div className="h-1.5 w-1.5 rounded-full bg-ztg-green-400"></div>
@@ -101,7 +101,7 @@ const Option = ({
           <div
             className={
               "px-1 text-xs font-medium " +
-              (isSelected ? "text-ztg-green-400" : "inherit")
+              (isSelected ? "text-ztg-green-500" : "inherit")
             }
           >
             {data.label} Market
diff --git a/components/markets/market-filter/index.tsx b/components/markets/market-filter/index.tsx
index 3231a8ef8..4517df3a5 100644
--- a/components/markets/market-filter/index.tsx
+++ b/components/markets/market-filter/index.tsx
@@ -233,15 +233,21 @@ const MarketFilterSelection = ({
                   <Menu as="div" className="relative shrink-0">
                     {({ open }) => (
                       <>
-                        <Menu.Button className="flex min-h-[44px] items-center gap-1.5 rounded-md bg-ztg-green-600/80 px-2 py-2 text-sm font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg sm:min-h-0 sm:px-3 sm:py-1.5 sm:text-sm">
+                        <Menu.Button
+                          className={`flex h-9 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 ${
+                            open
+                              ? "bg-white/15 text-white/90"
+                              : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90"
+                          }`}
+                        >
                           <FiPlusSquare
-                            size={16}
-                            className="hidden sm:inline sm:h-3.5 sm:w-3.5"
+                            size={14}
+                            className="hidden text-ztg-green-500 sm:inline sm:h-4 sm:w-4"
                           />
                           <span>Create Market</span>
                           <ChevronDown
-                            size={16}
-                            className={`ml-0.5 transition-transform sm:h-3.5 sm:w-3.5 ${open ? "rotate-180" : ""}`}
+                            size={14}
+                            className={`ml-0.5 transition-transform sm:h-4 sm:w-4 ${open ? "rotate-180" : ""}`}
                           />
                         </Menu.Button>
 
@@ -254,7 +260,7 @@ const MarketFilterSelection = ({
                           leaveFrom="transform opacity-100 scale-100"
                           leaveTo="transform opacity-0 scale-95"
                         >
-                          <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right rounded-lg bg-ztg-primary-700/85 shadow-xl backdrop-blur-lg focus:outline-none">
+                          <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right rounded-lg bg-ztg-primary-500/90 shadow-md backdrop-blur-md border-2 border-white/10">
                             <div className="p-1">
                               <Menu.Item>
                                 {({ active }) => (
@@ -266,7 +272,7 @@ const MarketFilterSelection = ({
                                     >
                                       <MdShowChart
                                         size={18}
-                                        className="text-ztg-green-400"
+                                        className="text-ztg-green-500"
                                       />
                                       <div className="flex flex-col items-start">
                                         <span className="font-semibold text-white/90">
@@ -288,7 +294,7 @@ const MarketFilterSelection = ({
                                     >
                                       <MdStackedLineChart
                                         size={18}
-                                        className="text-ztg-green-400"
+                                        className="text-ztg-green-500"
                                       />
                                       <div className="flex flex-col items-start">
                                         <span className="font-semibold text-white/90">
@@ -315,7 +321,7 @@ const MarketFilterSelection = ({
             <Skeleton width="80%" height="38px" className="py-2"></Skeleton>
           )}
           <div
-            className="hidden md:block"
+            className="w-content max-w-7xl hidden md:block absolute top-14 left-15 bg-ztg-primary-500/80 shadow-md backdrop-blur-md"
             id="marketsFiltersMenuPortal"
             ref={portalRef}
           ></div>
diff --git a/components/markets/market-filter/mobile-dialog/FilterDetails.tsx b/components/markets/market-filter/mobile-dialog/FilterDetails.tsx
index 4b6b7cbbc..7e023e047 100644
--- a/components/markets/market-filter/mobile-dialog/FilterDetails.tsx
+++ b/components/markets/market-filter/mobile-dialog/FilterDetails.tsx
@@ -32,8 +32,8 @@ const FilterToggle = ({ option }: { option: MarketFilter }) => {
       onClick={toggle}
       className={`mb-3 mr-3 flex touch-manipulation items-center gap-2 rounded-lg px-4 py-3 text-base font-semibold shadow-md backdrop-blur-sm transition-all active:scale-[0.98] ${
         isActive
-          ? "bg-ztg-green-600/80 text-white"
-          : "bg-white/15 text-white hover:bg-white/20 hover:shadow-lg"
+          ? "bg-ztg-green-600/80 text-white/90"
+          : "bg-white/15 text-white/90 hover:bg-white/20 hover:shadow-lg"
       }`}
     >
       <span>{option.label}</span>
@@ -46,13 +46,13 @@ const FilterDetails = ({ back, menu }: FilterDetailsProps) => {
   return (
     <>
       <button
-        className="mb-5 flex touch-manipulation items-center gap-2 text-base font-semibold text-ztg-green-400 transition-all hover:text-ztg-green-300 active:scale-95"
+        className="mb-5 flex touch-manipulation items-center gap-2 text-base font-semibold text-ztg-green-500 transition-all hover:text-ztg-green-500 active:scale-95"
         onClick={back}
       >
         <ChevronLeft size={18} />
         <span>Back</span>
       </button>
-      <h3 className="mb-5 text-lg font-semibold text-white">{menu}</h3>
+      <h3 className="mb-5 text-lg font-semibold text-white/90">{menu}</h3>
       <div className="flex flex-wrap pb-4">
         {
           {
@@ -81,7 +81,7 @@ const FilterDetails = ({ back, menu }: FilterDetailsProps) => {
         }
       </div>
       <button
-        className="sticky bottom-0 mt-auto min-h-[48px] touch-manipulation rounded-lg bg-ztg-green-600/80 px-4 py-3 text-base font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 active:scale-[0.98]"
+        className="sticky bottom-0 mt-auto min-h-[48px] touch-manipulation rounded-lg bg-ztg-green-600/80 px-4 py-3 text-base font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 active:scale-[0.98]"
         onClick={back}
       >
         Apply Filters
diff --git a/components/markets/market-filter/mobile-dialog/FiltersList.tsx b/components/markets/market-filter/mobile-dialog/FiltersList.tsx
index d1eb78c3a..c35c98678 100644
--- a/components/markets/market-filter/mobile-dialog/FiltersList.tsx
+++ b/components/markets/market-filter/mobile-dialog/FiltersList.tsx
@@ -56,7 +56,7 @@ const MobileSortSelect = ({
     <div className="relative w-full">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex min-h-[48px] w-full touch-manipulation items-center justify-between rounded-lg bg-white/15 px-4 py-3 text-base font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-white/20 active:scale-[0.98]"
+        className="flex min-h-[48px] w-full touch-manipulation items-center justify-between rounded-lg bg-white/15 px-4 py-3 text-base font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-white/20 active:scale-[0.98]"
       >
         <div className="flex items-center gap-3">
           <Icon size={20} className="text-white/70" />
@@ -109,13 +109,13 @@ const MobileSortSelect = ({
                     }}
                     className={`flex min-h-[44px] touch-manipulation items-center gap-3 rounded-lg px-4 py-3 text-base font-semibold shadow-md backdrop-blur-sm transition-all active:scale-[0.98] ${
                       isSelected
-                        ? "bg-ztg-green-600/80 text-white ring-2 ring-ztg-green-500/50"
-                        : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white hover:shadow-lg"
+                        ? "bg-ztg-green-600/80 text-white/90 ring-2 ring-ztg-green-500/50"
+                        : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90 hover:shadow-lg"
                     }`}
                   >
                     <OptionIcon
                       size={18}
-                      className={isSelected ? "text-white" : "text-white/70"}
+                      className={isSelected ? "text-white/90" : "text-white/70"}
                     />
                     <span>{isVolumeBasedOption ? "Volume" : option.label}</span>
                   </button>
@@ -149,9 +149,9 @@ const FilterButton = ({
       }
       onClick={onClick}
     >
-      <div className="text-base font-semibold text-white">{children}</div>
+      <div className="text-base font-semibold text-white/90">{children}</div>
       {RightIcon && (
-        <RightIcon className="ml-auto text-ztg-green-400" size={20} />
+        <RightIcon className="ml-auto text-ztg-green-500" size={20} />
       )}
     </button>
   );
@@ -189,13 +189,13 @@ const MobileMarketTypeToggle = ({
             onClick={() => onChange(option.value)}
             className={`flex min-h-[48px] flex-1 touch-manipulation items-center justify-center gap-3 rounded-lg px-4 py-3 text-base font-semibold shadow-md backdrop-blur-sm transition-all active:scale-[0.98] ${
               isSelected
-                ? "bg-ztg-green-600/80 text-white ring-2 ring-ztg-green-500/50"
-                : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white hover:shadow-lg"
+                ? "bg-ztg-green-600/80 text-white/90 ring-2 ring-ztg-green-500/50"
+                : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90 hover:shadow-lg"
             }`}
           >
             <Icon
               size={20}
-              className={isSelected ? "text-white" : "text-white/70"}
+              className={isSelected ? "text-white/90" : "text-white/70"}
             />
             <span>{option.label}</span>
           </button>
@@ -281,7 +281,7 @@ const FiltersList = ({
 
       {/* Show Markets Button */}
       <button
-        className="sticky bottom-0 mt-auto min-h-[48px] touch-manipulation rounded-lg bg-ztg-green-600/80 px-4 py-3 text-base font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 active:scale-[0.98]"
+        className="sticky bottom-0 mt-auto min-h-[48px] touch-manipulation rounded-lg bg-ztg-green-600/80 px-4 py-3 text-base font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 active:scale-[0.98]"
         onClick={close}
       >
         Show Markets
diff --git a/components/markets/market-filter/mobile-dialog/index.tsx b/components/markets/market-filter/mobile-dialog/index.tsx
index 343b5bd09..b336c3521 100644
--- a/components/markets/market-filter/mobile-dialog/index.tsx
+++ b/components/markets/market-filter/mobile-dialog/index.tsx
@@ -69,11 +69,11 @@ const MobileDialog = ({
       >
         <Dialog.Panel className="h-full w-full bg-ztg-primary-500">
           <div className="flex h-14 items-center justify-between border-b-2 border-white/10 bg-white/15 px-4 py-3 shadow-md backdrop-blur-md">
-            <div className="text-base font-semibold text-white">Filters</div>
+            <div className="text-base font-semibold text-white/90">Filters</div>
             <button
               onClick={close}
               tabIndex={1}
-              className="flex h-9 w-9 touch-manipulation items-center justify-center rounded-lg text-white/70 transition-all hover:bg-white/20 hover:text-white active:scale-95"
+              className="flex h-9 w-9 touch-manipulation items-center justify-center rounded-lg text-white/70 transition-all hover:bg-white/20 hover:text-white/90 active:scale-95"
             >
               <X size={20} />
             </button>
diff --git a/components/onboarding/DisclaimerModal.tsx b/components/onboarding/DisclaimerModal.tsx
index fc9c4697d..2a9429eda 100644
--- a/components/onboarding/DisclaimerModal.tsx
+++ b/components/onboarding/DisclaimerModal.tsx
@@ -29,7 +29,7 @@ export const DisclaimerModal = () => {
         <ModalBody>
           <div
             ref={scrollableElementRef}
-            className="max-h-[400px] overflow-y-auto modal-scrollable text-sm md:text-base text-white/80 mb-6"
+            className="max-h-[400px] overflow-y-auto modal-scrollable text-sm md:text-base text-white/90 mb-6"
           >
             <DisclaimerTerms />
           </div>
@@ -41,7 +41,7 @@ export const DisclaimerModal = () => {
               Decline
             </button>
             <button
-              className="rounded-md bg-ztg-green-600/80 px-4 py-2 text-sm md:text-base text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
+              className="rounded-md bg-ztg-green-600/80 px-4 py-2 text-sm md:text-base text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
               onClick={() => {
                 hideDisclaimer();
                 setDisclaimerAccepted();
diff --git a/components/outcomes/CategoricalDisputeBox.tsx b/components/outcomes/CategoricalDisputeBox.tsx
index 1ae0b8eab..ebb401eee 100644
--- a/components/outcomes/CategoricalDisputeBox.tsx
+++ b/components/outcomes/CategoricalDisputeBox.tsx
@@ -119,7 +119,7 @@ const CategoricalDisputeBox = ({
       
       <div className="mb-4 flex w-full flex-col items-center justify-center gap-3 rounded-lg border-2 border-orange-400/40 bg-orange-500/20 p-4 text-center backdrop-blur-md">
         <div className="text-sm text-white/90">
-          Bond cost: <span className="font-semibold text-white">{disputeBond} {tokenSymbol}</span>
+          Bond cost: <span className="font-semibold text-white/90">{disputeBond} {tokenSymbol}</span>
         </div>
         <div className="text-sm font-semibold text-white/90">
           Bonds will be slashed if the reported outcome is deemed to be incorrect
@@ -130,7 +130,7 @@ const CategoricalDisputeBox = ({
         <span className="text-sm text-white/70">
           Previous Report:
         </span>
-        <span className="mt-1 font-semibold text-white">{getPreviousReportName()}</span>
+        <span className="mt-1 font-semibold text-white/90">{getPreviousReportName()}</span>
       </div>
       
       {bondAmount !== disputeBond && bondAmount !== undefined && (
@@ -138,7 +138,7 @@ const CategoricalDisputeBox = ({
           <span className="text-sm text-white/70">
             Previous Bond:
           </span>
-          <span className="mt-1 font-semibold text-white">{bondAmount}</span>
+          <span className="mt-1 font-semibold text-white/90">{bondAmount}</span>
         </div>
       )}
       
diff --git a/components/outcomes/ScalarDisputeBox.tsx b/components/outcomes/ScalarDisputeBox.tsx
index 6c6fdee02..32450879d 100644
--- a/components/outcomes/ScalarDisputeBox.tsx
+++ b/components/outcomes/ScalarDisputeBox.tsx
@@ -57,7 +57,7 @@ const ScalarDisputeBox = ({
       
       <div className="mb-4 flex w-full flex-col items-center justify-center gap-3 rounded-lg border-2 border-orange-400/40 bg-orange-500/20 p-4 text-center backdrop-blur-md">
         <div className="text-sm text-white/90">
-          Bond cost: <span className="font-semibold text-white">{disputeBond} {tokenSymbol}</span>
+          Bond cost: <span className="font-semibold text-white/90">{disputeBond} {tokenSymbol}</span>
         </div>
         <div className="text-sm font-semibold text-white/90">
           Bonds will be slashed if the reported outcome is deemed to be incorrect
@@ -69,7 +69,7 @@ const ScalarDisputeBox = ({
           <span className="text-sm text-white/70">
             Previous Bond:
           </span>
-          <span className="mt-1 font-semibold text-white">{bondAmount}</span>
+          <span className="mt-1 font-semibold text-white/90">{bondAmount}</span>
         </div>
       )}
       
diff --git a/components/outcomes/ScalarReportBox.tsx b/components/outcomes/ScalarReportBox.tsx
index 3d96dc273..6e9c7a45e 100644
--- a/components/outcomes/ScalarReportBox.tsx
+++ b/components/outcomes/ScalarReportBox.tsx
@@ -148,7 +148,7 @@ const ScalarReportBox = ({
                 minWidth: expandedInfoToggled ? digits * 18 : digits * 12,
               }}
             >
-              <div className="flex flex-1 self-start text-white/80 sm:hidden md:flex lg:hidden">
+              <div className="flex flex-1 self-start text-white/90 sm:hidden md:flex lg:hidden">
                 Scalar range:
               </div>
               <div className="whitespace-nowrap">
diff --git a/components/portfolio/AccountPoolsTable.tsx b/components/portfolio/AccountPoolsTable.tsx
index b1722b1f5..5429cb092 100644
--- a/components/portfolio/AccountPoolsTable.tsx
+++ b/components/portfolio/AccountPoolsTable.tsx
@@ -60,7 +60,7 @@ const AccountPoolsTable = ({ pools, isLoading }: AccountPoolsTableProps) => {
       question: (
         <Link
           href={href}
-          className="line-clamp-1 text-sm font-medium text-white transition-colors hover:text-ztg-green-400"
+          className="line-clamp-1 text-sm font-medium text-white/90 transition-colors hover:text-ztg-green-500"
         >
           {pool.question}
         </Link>
@@ -103,7 +103,7 @@ const AccountPoolsTable = ({ pools, isLoading }: AccountPoolsTableProps) => {
         <div className="rounded-lg border border-ztg-primary-200/30 bg-white/10 shadow-lg backdrop-blur-md">
           <div className="mb-4 flex items-center gap-2 border-b border-ztg-primary-200/20 p-4 pb-3">
             <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
-            <h2 className="text-base font-semibold text-white">
+            <h2 className="text-base font-semibold text-white/90">
               Liquidity Positions
             </h2>
           </div>
diff --git a/components/portfolio/Breakdown.tsx b/components/portfolio/Breakdown.tsx
index 9c5e7ef19..33cd6c455 100644
--- a/components/portfolio/Breakdown.tsx
+++ b/components/portfolio/Breakdown.tsx
@@ -126,20 +126,20 @@ export const BreakdownSlot = ({
 }: BreakdownSlotProps) => {
   return (
     <>
-      <h4 className="mb-0.5 text-xxs font-medium uppercase tracking-wide text-white/80">
+      <h4 className="mb-0.5 text-xxs font-medium uppercase tracking-wide text-white/90">
         {title}
       </h4>
       <div className="mb-0.5 flex items-center font-mono">
-        <div className="text-sm font-bold text-white sm:w-2/3">
+        <div className="text-sm font-bold text-white/90 sm:w-2/3">
           {formatNumberLocalized(value.div(ZTG).toNumber())} ZTG
         </div>
         <div
           className={`hidden w-1/3 flex-1 text-xs sm:block ${
             changePercentage < 0.01
-              ? "text-white"
+              ? "text-white/90"
               : changePercentage < 0
                 ? "text-red-400"
-                : "text-ztg-green-400"
+                : "text-ztg-green-500"
           }`}
         >
           {Math.abs(changePercentage).toFixed(1)}%
diff --git a/components/portfolio/CourtRewardsTable.tsx b/components/portfolio/CourtRewardsTable.tsx
index af12b14f9..0e649032e 100644
--- a/components/portfolio/CourtRewardsTable.tsx
+++ b/components/portfolio/CourtRewardsTable.tsx
@@ -134,7 +134,7 @@ const CourtRewardsTable = ({ address }: { address: string }) => {
         <div className="rounded-lg border border-ztg-primary-200/30 bg-white/10 shadow-lg backdrop-blur-md">
           <div className="mb-4 flex items-center gap-2 border-b border-ztg-primary-200/20 px-4 pb-3 pt-4">
             <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
-            <h2 className="text-base font-semibold text-white">
+            <h2 className="text-base font-semibold text-white/90">
               Court Rewards
             </h2>
           </div>
diff --git a/components/portfolio/CurrenciesTable.tsx b/components/portfolio/CurrenciesTable.tsx
index 39d14e3b0..991cd54bc 100644
--- a/components/portfolio/CurrenciesTable.tsx
+++ b/components/portfolio/CurrenciesTable.tsx
@@ -223,7 +223,7 @@ const CurrenciesTable = ({ address }: { address: string }) => {
     <div className="rounded-lg border border-ztg-primary-200/30 bg-white/10 shadow-lg backdrop-blur-md">
       <div className="mb-4 flex items-center gap-2 border-b border-ztg-primary-200/20 p-4 pb-3">
         <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
-        <h2 className="text-base font-semibold text-white">
+        <h2 className="text-base font-semibold text-white/90">
           Cross-Chain Balances
         </h2>
       </div>
diff --git a/components/portfolio/EmptyPortfolio.tsx b/components/portfolio/EmptyPortfolio.tsx
index 9ec9c3c0e..024fbe5aa 100644
--- a/components/portfolio/EmptyPortfolio.tsx
+++ b/components/portfolio/EmptyPortfolio.tsx
@@ -15,16 +15,16 @@ const EmptyPortfolio = ({
   return (
     <div className="my-16 flex flex-col items-center justify-center gap-6 rounded-lg border border-ztg-primary-200/30 bg-white/10 p-12 shadow-lg backdrop-blur-md">
       <div className="flex h-20 w-20 items-center justify-center rounded-full border border-ztg-primary-200/20 bg-ztg-primary-900/30 backdrop-blur-sm">
-        <Inbox className="text-white/60" size={40} strokeWidth={1.5} />
+        <Inbox className="text-white/90/60" size={40} strokeWidth={1.5} />
       </div>
       <div className="text-center">
-        <h3 className="mb-2 text-xl font-semibold text-white">{headerText}</h3>
+        <h3 className="mb-2 text-xl font-semibold text-white/90">{headerText}</h3>
         <p className="text-sm text-white/70">{bodyText}</p>
       </div>
       {buttonText && buttonLink && (
         <Link
           href={buttonLink}
-          className="rounded-md bg-ztg-green-600/80 px-6 py-2.5 text-sm font-semibold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
+          className="rounded-md bg-ztg-green-600/80 px-6 py-2.5 text-sm font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
         >
           {buttonText}
         </Link>
diff --git a/components/portfolio/MarketPositionHeader.tsx b/components/portfolio/MarketPositionHeader.tsx
index 49db15c0a..87d58cb02 100644
--- a/components/portfolio/MarketPositionHeader.tsx
+++ b/components/portfolio/MarketPositionHeader.tsx
@@ -51,11 +51,11 @@ const MarketPositionHeader = ({
               alt="Currency token logo"
               className="h-4 w-4 rounded-full"
             />
-            <span className="text-xs font-semibold text-ztg-green-400">
+            <span className="text-xs font-semibold text-ztg-green-500">
               Multi-Market Position
             </span>
           </div>
-          <span className="text-xs font-medium text-ztg-green-400 transition-all group-hover:text-ztg-green-300">
+          <span className="text-xs font-medium text-ztg-green-500 transition-all group-hover:text-ztg-green-500">
             View Details →
           </span>
         </div>
@@ -64,20 +64,20 @@ const MarketPositionHeader = ({
         <div className="flex flex-col gap-2">
           {/* Assume market */}
           <div className="flex items-start gap-2 rounded-md bg-ztg-primary-600/60 p-2.5 backdrop-blur-sm">
-            <span className="inline-flex shrink-0 items-center rounded bg-blue-600 px-2 py-0.5 text-xs font-semibold text-white">
+            <span className="inline-flex shrink-0 items-center rounded bg-blue-600 px-2 py-0.5 text-xs font-semibold text-white/90">
               Assume
             </span>
-            <span className="flex-1 text-sm font-medium leading-tight text-white">
+            <span className="flex-1 text-sm font-medium leading-tight text-white/90">
               {market1.question}
             </span>
           </div>
 
           {/* Then market */}
           <div className="flex items-start gap-2 rounded-md bg-ztg-primary-600/60 p-2.5 backdrop-blur-sm">
-            <span className="inline-flex shrink-0 items-center rounded bg-ztg-green-600 px-2 py-0.5 text-xs font-semibold text-white">
+            <span className="inline-flex shrink-0 items-center rounded bg-ztg-green-600 px-2 py-0.5 text-xs font-semibold text-white/90">
               Then
             </span>
-            <span className="flex-1 text-sm font-medium leading-tight text-white">
+            <span className="flex-1 text-sm font-medium leading-tight text-white/90">
               {market2.question}
             </span>
           </div>
@@ -100,11 +100,11 @@ const MarketPositionHeader = ({
           alt="Currency token logo"
           className="h-4 w-4 shrink-0 rounded-full"
         />
-        <h3 className="truncate text-base font-semibold text-white transition-colors group-hover:text-ztg-green-300">
+        <h3 className="truncate text-base font-semibold text-white/90 transition-colors group-hover:text-ztg-green-500">
           {question}
         </h3>
       </div>
-      <span className="shrink-0 text-xs font-medium text-ztg-green-400 transition-all group-hover:text-ztg-green-300">
+      <span className="shrink-0 text-xs font-medium text-ztg-green-500 transition-all group-hover:text-ztg-green-500">
         View →
       </span>
     </Link>
diff --git a/components/portfolio/PortfolioHeader.tsx b/components/portfolio/PortfolioHeader.tsx
index 781de439f..e2da614de 100644
--- a/components/portfolio/PortfolioHeader.tsx
+++ b/components/portfolio/PortfolioHeader.tsx
@@ -72,23 +72,23 @@ const PortfolioHeader = (props: PortfolioHeaderProps) => {
             <div className="flex flex-col gap-1.5 sm:flex-row sm:items-start sm:justify-between">
               <div className="flex-1">
                 {isOwned && !hasIdentity && (
-                  <div className="mb-0.5 text-xs font-semibold uppercase tracking-wide text-ztg-green-400">
+                  <div className="mb-0.5 text-xs font-semibold uppercase tracking-wide text-ztg-green-500">
                     Wallet Name
                   </div>
                 )}
                 {isOwned && hasIdentity && (
-                  <div className="mb-0.5 text-xs font-semibold uppercase tracking-wide text-ztg-green-400">
+                  <div className="mb-0.5 text-xs font-semibold uppercase tracking-wide text-ztg-green-500">
                     On-Chain Identity
                   </div>
                 )}
-                <h1 className="text-xl font-bold text-white sm:text-2xl">
+                <h1 className="text-xl font-bold text-white/90 sm:text-2xl">
                   {name}
                 </h1>
               </div>
 
               {isOwned && !hasIdentity && (
                 <button
-                  className="flex items-center gap-1.5 rounded-md bg-ztg-green-600/80 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
+                  className="flex items-center gap-1.5 rounded-md bg-ztg-primary-300 px-2.5 py-1.5 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
                   onClick={() => setShowSettingsModal(true)}
                 >
                   <FaUserCheck size={14} />
@@ -114,7 +114,7 @@ const PortfolioHeader = (props: PortfolioHeaderProps) => {
             <div className="flex flex-wrap gap-1.5">
               {identity?.twitter && (
                 <a
-                  className="flex items-center gap-1 rounded-md bg-twitter px-2 py-1 text-xs font-semibold text-white shadow-sm transition-all hover:shadow-md"
+                  className="flex items-center gap-1 rounded-md bg-twitter px-2 py-1 text-xs font-semibold text-white/90 shadow-sm transition-all hover:shadow-md"
                   href={`https://twitter.com/${identity.twitter}`}
                   target="_blank"
                   rel="noreferrer"
@@ -124,7 +124,7 @@ const PortfolioHeader = (props: PortfolioHeaderProps) => {
                 </a>
               )}
               {identity?.discord && (
-                <div className="flex items-center gap-1 rounded-md bg-discord px-2 py-1 text-xs font-semibold text-white shadow-sm">
+                <div className="flex items-center gap-1 rounded-md bg-discord px-2 py-1 text-xs font-semibold text-white/90 shadow-sm">
                   <DiscordIcon fill="white" />
                   <span>{identity.discord}</span>
                 </div>
@@ -138,7 +138,7 @@ const PortfolioHeader = (props: PortfolioHeaderProps) => {
                 leaveTo="opacity-0"
                 show={isProxying}
               >
-                <div className="flex items-center gap-1 rounded-md bg-purple-600 px-2 py-1 text-xs font-semibold text-white shadow-sm">
+                <div className="flex items-center gap-1 rounded-md bg-purple-600 px-2 py-1 text-xs font-semibold text-white/90 shadow-sm">
                   <FaNetworkWired size={14} />
                   <span>Proxy</span>
                 </div>
@@ -225,11 +225,11 @@ const StatCard = ({
 
   return (
     <div className="rounded-lg border border-ztg-primary-200/20 bg-ztg-primary-900/50 p-3 backdrop-blur-sm transition-all hover:border-ztg-green-500/40 hover:bg-ztg-primary-900/70 hover:shadow-md">
-      <h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-white/80">
+      <h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-white/90">
         {title}
       </h3>
       <div className="mb-0.5 flex items-baseline gap-1.5">
-        <div className="text-base font-bold text-white sm:text-lg">
+        <div className="text-base font-bold text-white/90 sm:text-lg">
           {formatNumberLocalized(displayValue)}
         </div>
         <div className="text-xs font-semibold text-white/90">ZTG</div>
@@ -246,7 +246,7 @@ const StatCard = ({
         {/* {changePercentage !== 0 && (
           <div
             className={`text-xs font-semibold ${
-              changePercentage < 0 ? "text-ztg-red-400" : "text-ztg-green-400"
+              changePercentage < 0 ? "text-ztg-red-400" : "text-ztg-green-500"
             }`}
           >
             {changePercentage > 0 ? "+" : ""}
diff --git a/components/portfolio/PortfolioIdentity.tsx b/components/portfolio/PortfolioIdentity.tsx
index 3aa3cd906..f6b58f5d6 100644
--- a/components/portfolio/PortfolioIdentity.tsx
+++ b/components/portfolio/PortfolioIdentity.tsx
@@ -48,16 +48,16 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
               <div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                 <div>
                   {isOwned && !hasIdentity && (
-                    <div className="mb-0.5 text-xxs font-semibold uppercase tracking-wide text-ztg-green-400">
+                    <div className="mb-0.5 text-xxs font-semibold uppercase tracking-wide text-ztg-green-500">
                       Wallet Name
                     </div>
                   )}
                   {isOwned && hasIdentity && (
-                    <div className="mb-0.5 text-xxs font-semibold uppercase tracking-wide text-ztg-green-400">
+                    <div className="mb-0.5 text-xxs font-semibold uppercase tracking-wide text-ztg-green-500">
                       On-Chain Identity
                     </div>
                   )}
-                  <div className="text-xl font-bold text-white sm:text-2xl">
+                  <div className="text-xl font-bold text-white/90 sm:text-2xl">
                     {name}
                   </div>
                 </div>
@@ -65,7 +65,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
                 {isOwned && !hasIdentity && (
                   <div className="flex items-center">
                     <button
-                      className="flex items-center gap-1.5 rounded-md bg-ztg-green-600/80 px-3 py-1.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600"
+                      className="flex items-center gap-1.5 rounded-md bg-ztg-green-600/80 px-3 py-1.5 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600"
                       onClick={() => setShowSettingsModal(true)}
                     >
                       <FaUserCheck size={14} />
@@ -105,7 +105,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
               <div className="flex flex-wrap gap-1.5">
                 {identity?.twitter && (
                   <a
-                    className="flex items-center gap-1.5 rounded-md bg-twitter px-2.5 py-1.5 text-xs font-medium text-white shadow-sm transition-all hover:shadow-md"
+                    className="flex items-center gap-1.5 rounded-md bg-twitter px-2.5 py-1.5 text-xs font-medium text-white/90 shadow-sm transition-all hover:shadow-md"
                     href={`https://twitter.com/${identity.twitter}`}
                     target="_blank"
                     rel="noreferrer"
@@ -115,7 +115,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
                   </a>
                 )}
                 {identity?.discord && (
-                  <div className="flex items-center gap-1.5 rounded-md bg-discord px-2.5 py-1.5 text-xs font-medium text-white shadow-sm">
+                  <div className="flex items-center gap-1.5 rounded-md bg-discord px-2.5 py-1.5 text-xs font-medium text-white/90 shadow-sm">
                     <DiscordIcon fill="white" />
                     <span>{identity.discord}</span>
                   </div>
@@ -129,7 +129,7 @@ const PortfolioIdentity = ({ address }: { address: string }) => {
                   leaveTo="opacity-0"
                   show={isProxying}
                 >
-                  <div className="flex items-center gap-1.5 rounded-md bg-purple-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm">
+                  <div className="flex items-center gap-1.5 rounded-md bg-purple-600 px-2.5 py-1.5 text-xs font-medium text-white/90 shadow-sm">
                     <FaNetworkWired size={14} />
                     <span>Proxy</span>
                   </div>
diff --git a/components/portfolio/TradeHistoryTable.tsx b/components/portfolio/TradeHistoryTable.tsx
index 36cbec36b..50ec23a3d 100644
--- a/components/portfolio/TradeHistoryTable.tsx
+++ b/components/portfolio/TradeHistoryTable.tsx
@@ -48,7 +48,7 @@ const TradeHistoryTable = ({ address }: { address: string }) => {
       question: (
         <Link
           href={`/markets/${trade?.marketId}`}
-          className="line-clamp-1 text-[14px] text-white transition-colors hover:text-ztg-green-400"
+          className="line-clamp-1 text-[14px] text-white/90 transition-colors hover:text-ztg-green-500"
         >
           {trade?.question}
         </Link>
@@ -96,7 +96,7 @@ const TradeHistoryTable = ({ address }: { address: string }) => {
         <div className="rounded-lg border border-ztg-primary-200/30 bg-white/10 shadow-lg backdrop-blur-md">
           <div className="mb-4 flex items-center gap-2 border-b border-ztg-primary-200/20 px-4 pb-3 pt-4">
             <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
-            <h2 className="text-base font-semibold text-white">
+            <h2 className="text-base font-semibold text-white/90">
               Trade History
             </h2>
           </div>
diff --git a/components/portfolio/TransactionHistoryTable.tsx b/components/portfolio/TransactionHistoryTable.tsx
index 1006cc07a..5affea656 100644
--- a/components/portfolio/TransactionHistoryTable.tsx
+++ b/components/portfolio/TransactionHistoryTable.tsx
@@ -56,7 +56,7 @@ const TransactionHistoryTable = ({ address }: { address: string }) => {
         question: (
           <Link
             href={`/markets/${transaction.marketId}`}
-            className="text-[14px] text-white transition-colors hover:text-ztg-green-400"
+            className="text-[14px] text-white/90 transition-colors hover:text-ztg-green-500"
           >
             {transaction.question}
           </Link>
@@ -96,7 +96,7 @@ const TransactionHistoryTable = ({ address }: { address: string }) => {
         <div className="rounded-lg border border-ztg-primary-200/30 bg-white/10 shadow-lg backdrop-blur-md">
           <div className="mb-4 flex items-center gap-2 border-b border-ztg-primary-200/20 px-4 pb-3 pt-4">
             <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
-            <h2 className="text-base font-semibold text-white">
+            <h2 className="text-base font-semibold text-white/90">
               Transaction History
             </h2>
           </div>
diff --git a/components/portfolio/TransferButton.tsx b/components/portfolio/TransferButton.tsx
index 071421f03..959d81293 100644
--- a/components/portfolio/TransferButton.tsx
+++ b/components/portfolio/TransferButton.tsx
@@ -233,11 +233,11 @@ const TransferModal = ({
       <ModalHeader title="Transfer" />
       <ModalBody>
         <form className="flex flex-col" onSubmit={handleSubmit(submit)}>
-          <div className="mb-3 flex justify-between text-sm font-semibold text-white">
+          <div className="mb-3 flex justify-between text-sm font-semibold text-white/90">
             <div>Select Asset and Amount</div>
             {balance && (
               <div
-                className="cursor-pointer text-white/80 hover:text-white transition-colors"
+                className="cursor-pointer text-white/90 hover:text-white/90 transition-colors"
                 onClick={() => {
                   if (!maxAmount) return;
                   setValue(
@@ -291,7 +291,7 @@ const TransferModal = ({
                 );
               }}
             />
-          <div className="mb-3 mt-4 text-sm font-semibold text-white">
+          <div className="mb-3 mt-4 text-sm font-semibold text-white/90">
             To Address
           </div>
           <Controller
diff --git a/components/portfolio/WithdrawButton.tsx b/components/portfolio/WithdrawButton.tsx
index af6847d14..c0db0c1b3 100644
--- a/components/portfolio/WithdrawButton.tsx
+++ b/components/portfolio/WithdrawButton.tsx
@@ -237,8 +237,8 @@ const WithdrawModal = ({
 
   return (
     <Dialog.Panel className="w-full max-w-[564px] rounded-xl border-2 border-white/10 bg-white/10 backdrop-blur-xl shadow-2xl ring-2 ring-white/5 p-[30px]">
-      <h3 className="mb-8 text-center text-white">Withdraw</h3>
-      <div className="mt-[20px] flex w-full flex-col items-center gap-8 text-ztg-18-150 font-semibold text-white">
+      <h3 className="mb-8 text-center text-white/90">Withdraw</h3>
+      <div className="mt-[20px] flex w-full flex-col items-center gap-8 text-ztg-18-150 font-semibold text-white/90">
         <Transfer destinationChain={toChain} sourceChain="Zeitgeist" />
         <form
           onSubmit={handleSubmit(onSubmit)}
@@ -251,7 +251,7 @@ const WithdrawModal = ({
                   <Input
                     {...field}
                     type="number"
-                    className="!w-full !bg-transparent !rounded-none !border-0 !backdrop-blur-none !text-center !outline-none !text-white !shadow-none !p-0 h-full"
+                    className="!w-full !bg-transparent !rounded-none !border-0 !backdrop-blur-none !text-center !outline-none !text-white/90 !shadow-none !p-0 h-full"
                     step="any"
                     value={
                       countDecimals(field.value ? Number(field.value) : 0) > 3
diff --git a/components/settings/AccountSettingsForm.tsx b/components/settings/AccountSettingsForm.tsx
index 9bad24cca..f58e42c5b 100644
--- a/components/settings/AccountSettingsForm.tsx
+++ b/components/settings/AccountSettingsForm.tsx
@@ -119,7 +119,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
           id="displayName"
           {...register("displayName", { required: true })}
           className={
-            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/60 focus:bg-white/15 " +
+            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 " +
             (errors?.displayName
               ? "bg-red-500/20"
               : "bg-white/10 hover:bg-white/15")
@@ -139,7 +139,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
           id="discord"
           {...register("discord")}
           className={
-            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/60 focus:bg-white/15 " +
+            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 " +
             (errors?.discord ? "bg-red-500/20" : "bg-white/10 hover:bg-white/15")
           }
         />
@@ -157,13 +157,13 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
           id="twitter"
           {...register("twitter")}
           className={
-            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/60 focus:bg-white/15 " +
+            "h-10 rounded-md px-3 text-sm text-white/90 outline-none backdrop-blur-sm transition-all placeholder:text-white/90/60 focus:bg-white/15 " +
             (errors?.twitter ? "bg-red-500/20" : "bg-white/10 hover:bg-white/15")
           }
         />
       </div>
 
-      <div className="rounded-md bg-white/10 p-3 text-xs text-white/80 backdrop-blur-md">
+      <div className="rounded-md bg-white/10 p-3 text-xs text-white/90 backdrop-blur-md">
         Setting an identity requires a deposit of up to {indetityCost}{" "}
         {constants?.tokenSymbol}. This deposit can be retrieved by clearing your
         identity.
@@ -178,7 +178,7 @@ const AcccountSettingsForm: React.FC<AcccountSettingsFormProps> = ({
       </FormTransactionButton>
       <button
         type="button"
-        className="mt-2 text-sm text-white/90 transition-colors hover:text-ztg-green-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="mt-2 text-sm text-white/90 transition-colors hover:text-ztg-green-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         disabled={isUpdating || isClearing || isCleared}
         onClick={() => clearIdentity()}
       >
diff --git a/components/settings/SettingsModal.tsx b/components/settings/SettingsModal.tsx
index 9a93fe4d4..47be69f77 100644
--- a/components/settings/SettingsModal.tsx
+++ b/components/settings/SettingsModal.tsx
@@ -22,15 +22,15 @@ enum TabSelection {
 const tabClass = ({ selected }: { selected: boolean }) =>
   `flex-1 px-3 py-2 text-sm font-medium transition-all border-r border-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-ztg-primary-500 ${
     selected
-      ? "bg-white/10 text-white font-semibold"
-      : "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white"
+      ? "bg-white/10 text-white/90 font-semibold"
+      : "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white/90"
   }`;
 
 const tabClassLast = ({ selected }: { selected: boolean }) =>
   `flex-1 px-3 py-2 text-sm font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-ztg-primary-500 ${
     selected
-      ? "bg-white/10 text-white font-semibold"
-      : "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white"
+      ? "bg-white/10 text-white/90 font-semibold"
+      : "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white/90"
   }`;
 
 const SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
diff --git a/components/top-bar/Alerts.tsx b/components/top-bar/Alerts.tsx
index 514ace397..e886a5f86 100644
--- a/components/top-bar/Alerts.tsx
+++ b/components/top-bar/Alerts.tsx
@@ -67,7 +67,7 @@ export const Alerts = () => {
                 <div
                   className={`transition-all ${
                     hasNotifications
-                      ? "cursor-pointer text-white"
+                      ? "cursor-pointer text-white/90"
                       : "text-white/50"
                   }`}
                 >
diff --git a/components/top-bar/MenuItem.tsx b/components/top-bar/MenuItem.tsx
index 7f70980c1..6712af201 100644
--- a/components/top-bar/MenuItem.tsx
+++ b/components/top-bar/MenuItem.tsx
@@ -34,13 +34,13 @@ export const MenuItem: FC<PropsWithChildren<MenuItemProps>> = ({
   return (
     <WrapComponent href={href}>
       <button
-        className={`border-b-2lack group flex w-[68px] rounded-full border-2 bg-black p-5 text-white transition-all duration-300 hover:border-sunglow-2 hover:bg-black hover:text-sunglow-2 focus:border-ztg-blue focus:bg-ztg-blue focus:text-white ${
+        className={`border-b-2lack group flex w-[68px] rounded-full border-2 bg-black p-5 text-white/90 transition-all duration-300 hover:border-sunglow-2 hover:bg-black hover:text-sunglow-2 focus:border-ztg-blue focus:bg-ztg-blue focus:text-white/90 ${
           active && "border-ztg-blue bg-ztg-blue"
         }`}
       >
         <div className="center relative">
           <IconComponent size={24} />
-          <div className="invisible absolute left-14 whitespace-nowrap rounded bg-sunglow-2 px-2.5 py-1 text-lg text-black opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100 group-focus:bg-ztg-blue group-focus:text-white">
+          <div className="invisible absolute left-14 whitespace-nowrap rounded bg-sunglow-2 px-2.5 py-1 text-lg text-black opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100 group-focus:bg-ztg-blue group-focus:text-white/90">
             {textLabel}
           </div>
         </div>
diff --git a/components/top-bar/MenuLogo.tsx b/components/top-bar/MenuLogo.tsx
index 73efde756..d03ee2831 100644
--- a/components/top-bar/MenuLogo.tsx
+++ b/components/top-bar/MenuLogo.tsx
@@ -10,7 +10,7 @@ const MenuLogo: FC<{}> = () => {
           <Logo variant={"light"} />
         </div>
         <div className="hidden flex-col md:flex">
-          <h1 className="whitespace-nowrap font-kanit text-2xl font-semibold text-white transition-colors duration-300 group-hover:text-ztg-green-500">
+          <h1 className="whitespace-nowrap font-kanit text-2xl font-semibold text-white/90 transition-colors duration-300 group-hover:text-ztg-green-500">
             Zeitgeist
           </h1>
         </div>
diff --git a/components/top-bar/index.tsx b/components/top-bar/index.tsx
index ed7f937d1..27fa1569c 100644
--- a/components/top-bar/index.tsx
+++ b/components/top-bar/index.tsx
@@ -64,7 +64,7 @@ const AccountButton = dynamic(
     ssr: false,
     loading: () => (
       <div
-        className="center flex h-[44px] w-[76px] rounded-full border-2 border-white bg-black py-1 pl-1.5 text-white transition-all md:w-[186px] md:py-0"
+        className="center flex h-[44px] w-[76px] rounded-full border-2 border-white bg-black py-1 pl-1.5 text-white/90 transition-all md:w-[186px] md:py-0"
         // height={"44px"}
         // width={"186px"}
       >
@@ -137,9 +137,6 @@ const MobileAccountView = ({
   const { data: usdcAssetHubBalance } = useBalance(activeAccount?.address, {
     ForeignAsset: 4,
   });
-  const { data: usdcMoonbeamBalance } = useBalance(activeAccount?.address, {
-    ForeignAsset: 1,
-  });
   const { data: constants } = useChainConstants();
   const { alerts } = useAlerts(realAddress);
   const hasNotifications = alerts.length > 0;
@@ -170,7 +167,7 @@ const MobileAccountView = ({
             <Avatar zoomed address={activeAccount.address} />
           )}
           <div className="min-w-0 flex-1">
-            <div className="text-lg font-semibold text-white">
+            <div className="text-lg font-semibold text-white/90">
               {displayName}
             </div>
             <div className="mt-1 flex items-center gap-2">
@@ -197,13 +194,6 @@ const MobileAccountView = ({
             balance={usdcAssetHubBalance}
             className="text-sm"
           />
-          {/* DISABLED: USDC.wh temporarily disabled */}
-          {/* <BalanceRow
-            imgPath="/currencies/usdc.svg"
-            units="USDC.wh"
-            balance={usdcMoonbeamBalance}
-            className="text-sm"
-          /> */}
           <BalanceRow
             imgPath="/currencies/dot.png"
             units="DOT"
@@ -221,7 +211,7 @@ const MobileAccountView = ({
             </span>
             <ArrowRight
               size={18}
-              className="text-ztg-green-400 transition-transform group-hover:translate-x-1"
+              className="text-ztg-green-500 transition-transform group-hover:translate-x-1"
             />
           </div>
         </Link>
@@ -238,14 +228,14 @@ const MobileAccountView = ({
           className="group flex min-h-[48px] cursor-pointer items-center gap-3 rounded-lg bg-white/10 px-4 py-3 text-left transition-all hover:bg-white/20"
         >
           <div className="relative">
-            <Bell className="text-ztg-green-400 transition-colors" size={20} />
+            <Bell className="text-ztg-green-500 transition-colors" size={20} />
             {hasNotifications && (
               <div className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-ztg-green-500"></div>
             )}
           </div>
           <span className="flex-1 text-base font-medium">Notifications</span>
           {hasNotifications && (
-            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ztg-green-500/20 text-base font-semibold text-ztg-green-400">
+            <span className="flex h-8 w-8 items-center justify-center rounded-full bg-ztg-green-500/20 text-base font-semibold text-ztg-green-500">
               {alerts.length}
             </span>
           )}
@@ -262,7 +252,7 @@ const MobileAccountView = ({
             }}
             className="group flex min-h-[48px] cursor-pointer items-center gap-3 rounded-lg bg-white/10 px-4 py-3 text-left transition-all hover:bg-white/20"
           >
-            <User className="text-ztg-green-400 transition-colors" size={20} />
+            <User className="text-ztg-green-500 transition-colors" size={20} />
             <span className="flex-1 text-base font-medium">Select Account</span>
           </button>
         )}
@@ -271,7 +261,7 @@ const MobileAccountView = ({
         <Link href={`/portfolio/${realAddress}`} onClick={onNavigate}>
           <div className="group flex min-h-[48px] cursor-pointer items-center gap-3 rounded-lg bg-white/10 px-4 py-3 transition-all hover:bg-white/20">
             <BarChart
-              className="text-ztg-green-400 transition-colors"
+              className="text-ztg-green-500 transition-colors"
               size={20}
             />
             <span className="flex-1 text-base font-medium">Portfolio</span>
@@ -287,7 +277,7 @@ const MobileAccountView = ({
           className="group flex min-h-[48px] cursor-pointer items-center gap-3 rounded-lg bg-white/10 px-4 py-3 text-left transition-all hover:bg-white/20"
         >
           <Settings
-            className="text-ztg-green-400 transition-colors"
+            className="text-ztg-green-500 transition-colors"
             size={20}
           />
           <span className="flex-1 text-base font-medium">Settings</span>
@@ -457,7 +447,7 @@ const TopBar = () => {
                         aria-haspopup="true"
                       >
                         {open ? (
-                          <XIcon className="h-5 w-5 text-white transition-transform" />
+                          <XIcon className="h-5 w-5 text-white/90 transition-transform" />
                         ) : (
                           <MenuIcon className="h-5 w-5 text-white/90 transition-transform" />
                         )}
@@ -472,7 +462,7 @@ const TopBar = () => {
                         leaveTo="transform opacity-0 translate-y-2 md:translate-y-0 md:scale-95"
                       >
                         <Menu.Items
-                          className="fixed left-0 right-0 z-[60] w-screen origin-top-right overflow-y-auto border-t-2 border-white/10 px-4 py-4 text-white shadow-2xl backdrop-blur-lg focus:outline-none md:absolute md:inset-auto md:left-auto md:right-0 md:top-auto md:mt-2 md:h-auto md:w-80 md:rounded-lg md:border-2 md:border-white/10 md:bg-ztg-primary-700/95 md:px-5 md:py-3 md:ring-2 md:ring-white/5"
+                          className="fixed left-0 right-0 z-[60] w-screen origin-top-right overflow-y-auto border-t-2 border-white/10 px-4 py-4 text-white/90 shadow-2xl backdrop-blur-lg focus:outline-none md:absolute md:inset-auto md:left-auto md:right-0 md:top-auto md:mt-2 md:h-auto md:w-80 md:rounded-lg md:border-2 md:border-white/10 md:bg-ztg-primary-700/95 md:px-5 md:py-3 md:ring-2 md:ring-white/5"
                           style={{
                             top: "var(--top-bar-height, 50px)",
                             height:
@@ -493,7 +483,7 @@ const TopBar = () => {
                               onClick={() => setMobileMenuView("navigation")}
                               className={`min-h-[48px] flex-1 rounded-lg px-4 py-3 text-base font-semibold transition-all ${
                                 mobileMenuView === "navigation"
-                                  ? "bg-ztg-green-600 text-white"
+                                  ? "bg-ztg-green-600 text-white/90"
                                   : "bg-white/10 text-white/70 hover:bg-white/20"
                               }`}
                               role="tab"
@@ -507,7 +497,7 @@ const TopBar = () => {
                               onClick={() => setMobileMenuView("account")}
                               className={`min-h-[48px] flex-1 rounded-lg px-4 py-3 text-base font-semibold transition-all ${
                                 mobileMenuView === "account"
-                                  ? "bg-ztg-green-600 text-white"
+                                  ? "bg-ztg-green-600 text-white/90"
                                   : "bg-white/10 text-white/70 hover:bg-white/20"
                               }`}
                               role="tab"
@@ -533,14 +523,14 @@ const TopBar = () => {
                                   onClick={close}
                                 >
                                   <button
-                                    className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
+                                    className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
                                       active ? "bg-white/20" : ""
                                     }`}
                                   >
-                                    <div className="relative h-5 w-5 shrink-0 text-ztg-green-400 md:h-5 md:w-5">
+                                    <div className="relative h-5 w-5 shrink-0 text-ztg-green-500 md:h-5 md:w-5">
                                       <FiGrid size={"100%"} />
                                     </div>
-                                    <h3 className="text-base font-semibold text-white md:text-sm">
+                                    <h3 className="text-base font-semibold text-white/90 md:text-sm">
                                       All Markets
                                     </h3>
                                   </button>
@@ -561,14 +551,14 @@ const TopBar = () => {
                                   onClick={close}
                                 >
                                   <button
-                                    className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
+                                    className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
                                       active ? "bg-white/20" : ""
                                     }`}
                                   >
-                                    <div className="relative h-5 w-5 shrink-0 text-ztg-green-400 md:h-5 md:w-5">
+                                    <div className="relative h-5 w-5 shrink-0 text-ztg-green-500 md:h-5 md:w-5">
                                       <FiStar size={"100%"} />
                                     </div>
-                                    <h3 className="text-base font-semibold text-white md:text-sm">
+                                    <h3 className="text-base font-semibold text-white/90 md:text-sm">
                                       Popular Markets
                                     </h3>
                                   </button>
@@ -587,14 +577,14 @@ const TopBar = () => {
                                   {({ active }) => (
                                     <Link href="/court" onClick={close}>
                                       <button
-                                        className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
+                                        className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
                                           active ? "bg-white/20" : ""
                                         }`}
                                       >
-                                        <div className="relative h-5 w-5 shrink-0 text-ztg-green-400 md:h-5 md:w-5">
+                                        <div className="relative h-5 w-5 shrink-0 text-ztg-green-500 md:h-5 md:w-5">
                                           <Users size={"100%"} />
                                         </div>
-                                        <h3 className="text-base font-semibold text-white md:text-sm">
+                                        <h3 className="text-base font-semibold text-white/90 md:text-sm">
                                           Court
                                         </h3>
                                       </button>
@@ -625,7 +615,7 @@ const TopBar = () => {
             {/* Create Market Button - Removed (now in QuickNav) */}
 
             {/* <Link
-            className="md:center relative hidden gap-2 font-light text-white md:flex"
+            className="md:center relative hidden gap-2 font-light text-white/90 md:flex"
             href="/leaderboard/year"
           >
             <div className="relative hidden flex-col items-center md:flex">
@@ -657,16 +647,16 @@ const TopBar = () => {
                 href="/markets"
                 className={`group flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-3 sm:text-sm md:px-4 ${
                   router.pathname === "/markets" && !router.query.status
-                    ? "bg-white/20 text-white ring-2 ring-ztg-green-500/50"
-                    : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white"
+                    ? "bg-white/20 text-white/90 ring-2 ring-ztg-green-500/50"
+                    : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white/90"
                 }`}
               >
                 <FiGrid
                   size={14}
                   className={`shrink-0 transition-colors sm:h-4 sm:w-4 ${
                     router.pathname === "/markets" && !router.query.status
-                      ? "text-ztg-green-400"
-                      : "text-ztg-green-400/80 group-hover:text-ztg-green-400"
+                      ? "text-ztg-green-500"
+                      : "text-ztg-green-500/80 group-hover:text-ztg-green-500"
                   }`}
                 />
                 <span className="whitespace-nowrap">All Markets</span>
@@ -676,8 +666,8 @@ const TopBar = () => {
                 className={`group flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-3 sm:text-sm md:px-4 ${
                   router.query.status === "Active" &&
                   router.query.ordering === "Newest"
-                    ? "bg-white/20 text-white ring-2 ring-ztg-green-500/50"
-                    : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white"
+                    ? "bg-white/20 text-white/90 ring-2 ring-ztg-green-500/50"
+                    : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white/90"
                 }`}
               >
                 <TrendingUp
@@ -685,8 +675,8 @@ const TopBar = () => {
                   className={`shrink-0 transition-colors sm:h-4 sm:w-4 ${
                     router.query.status === "Active" &&
                     router.query.ordering === "Newest"
-                      ? "text-ztg-green-400"
-                      : "text-ztg-green-400/80 group-hover:text-ztg-green-400"
+                      ? "text-ztg-green-500"
+                      : "text-ztg-green-500/80 group-hover:text-ztg-green-500"
                   }`}
                 />
                 <span className="whitespace-nowrap">Active</span>
@@ -696,8 +686,8 @@ const TopBar = () => {
                 className={`group flex shrink-0 items-center gap-1.5 rounded-lg px-2.5 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-3 sm:text-sm md:px-4 ${
                   router.query.status === "Active" &&
                   router.query.ordering === "Most Volume"
-                    ? "bg-white/20 text-white ring-2 ring-ztg-green-500/50"
-                    : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white"
+                    ? "bg-white/20 text-white/90 ring-2 ring-ztg-green-500/50"
+                    : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white/90"
                 }`}
               >
                 <FiStar
@@ -705,8 +695,8 @@ const TopBar = () => {
                   className={`shrink-0 transition-colors sm:h-4 sm:w-4 ${
                     router.query.status === "Active" &&
                     router.query.ordering === "Most Volume"
-                      ? "text-ztg-green-400"
-                      : "text-ztg-green-400/80 group-hover:text-ztg-green-400"
+                      ? "text-ztg-green-500"
+                      : "text-ztg-green-500/80 group-hover:text-ztg-green-500"
                   }`}
                 />
                 <span className="whitespace-nowrap">Trending</span>
@@ -715,7 +705,7 @@ const TopBar = () => {
                 <Menu as="div" className="relative">
                   {({ open }) => (
                     <>
-                      <Menu.Button className="group flex shrink-0 items-center gap-1.5 rounded-lg bg-ztg-green-600/90 px-2.5 py-2 text-xs font-bold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg active:scale-95 sm:gap-2 sm:px-3 sm:text-sm">
+                      <Menu.Button className="group flex shrink-0 items-center gap-1.5 rounded-lg bg-ztg-green-600/90 px-2.5 py-2 text-xs font-bold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg active:scale-95 sm:gap-2 sm:px-3 sm:text-sm">
                         <FiPlusSquare
                           size={14}
                           className="hidden shrink-0 sm:inline sm:h-4 sm:w-4"
@@ -738,7 +728,7 @@ const TopBar = () => {
                         leaveFrom="transform opacity-100 scale-100"
                         leaveTo="transform opacity-0 scale-95"
                       >
-                        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg border-2 border-white/10 bg-ztg-primary-700/95 shadow-xl ring-2 ring-white/5 backdrop-blur-lg focus:outline-none">
+                        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg border-2 border-white/10 bg-ztg-primary-500/80 shadow-xl ring-2 ring-white/5 backdrop-blur-lg focus:outline-none">
                           <div className="p-1">
                             <Menu.Item>
                               {({ active }) => (
@@ -746,13 +736,13 @@ const TopBar = () => {
                                   <button
                                     className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/90 transition-all ${
                                       active
-                                        ? "bg-white/20 text-white shadow-sm"
+                                        ? "bg-white/20 text-white/90 shadow-sm"
                                         : ""
                                     }`}
                                   >
                                     <MdShowChart
                                       size={18}
-                                      className="text-ztg-green-400"
+                                      className="text-ztg-green-500"
                                     />
                                     <div className="flex flex-col items-start">
                                       <span className="font-semibold">
@@ -770,13 +760,13 @@ const TopBar = () => {
                                   <button
                                     className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/90 transition-all ${
                                       active
-                                        ? "bg-white/20 text-white shadow-sm"
+                                        ? "bg-white/20 text-white/90 shadow-sm"
                                         : ""
                                     }`}
                                   >
                                     <MdStackedLineChart
                                       size={18}
-                                      className="text-ztg-green-400"
+                                      className="text-ztg-green-500"
                                     />
                                     <div className="flex flex-col items-start">
                                       <span className="font-semibold">
@@ -803,17 +793,21 @@ const TopBar = () => {
               <Menu as="div" className="relative">
                 {({ open }) => (
                   <>
-                    <Menu.Button className="group flex shrink-0 items-center gap-1.5 rounded-lg bg-ztg-green-600/90 px-2.5 py-2 text-xs font-bold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg active:scale-95 sm:gap-2 sm:px-3 sm:text-sm md:px-4">
+                    <Menu.Button
+                      className={`group flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 ${
+                        open
+                          ? "bg-white/15 text-white/90"
+                          : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90"
+                      }`}
+                    >
                       <FiPlusSquare
                         size={14}
-                        className="hidden shrink-0 sm:inline sm:h-4 sm:w-4"
+                        className="hidden shrink-0 text-ztg-green-500 sm:inline sm:h-4 sm:w-4"
                       />
-                      <span className="whitespace-nowrap font-bold">
-                        Create Market
-                      </span>
+                      <span className="whitespace-nowrap">Create Market</span>
                       <ChevronDown
-                        size={12}
-                        className={`ml-0.5 shrink-0 transition-transform sm:h-3.5 sm:w-3.5 ${open ? "rotate-180" : ""}`}
+                        size={14}
+                        className={`ml-0.5 shrink-0 transition-transform sm:h-4 sm:w-4 ${open ? "rotate-180" : ""}`}
                       />
                     </Menu.Button>
 
@@ -826,7 +820,7 @@ const TopBar = () => {
                       leaveFrom="transform opacity-100 scale-100"
                       leaveTo="transform opacity-0 scale-95"
                     >
-                      <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg border-2 border-white/10 bg-ztg-primary-700/95 shadow-xl ring-2 ring-white/5 backdrop-blur-lg focus:outline-none">
+                      <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-lg border-2 border-white/10 bg-ztg-primary-500/80 shadow-xl ring-2 ring-white/5 backdrop-blur-lg focus:outline-none">
                         <div className="p-1">
                           <Menu.Item>
                             {({ active }) => (
@@ -834,13 +828,13 @@ const TopBar = () => {
                                 <button
                                   className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/90 transition-all ${
                                     active
-                                      ? "bg-white/20 text-white shadow-sm"
+                                      ? "bg-white/20 text-white/90 shadow-sm"
                                       : ""
                                   }`}
                                 >
                                   <MdShowChart
                                     size={18}
-                                    className="text-ztg-green-400"
+                                    className="text-ztg-green-500"
                                   />
                                   <div className="flex flex-col items-start">
                                     <span className="font-semibold">
@@ -858,13 +852,13 @@ const TopBar = () => {
                                 <button
                                   className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white/90 transition-all ${
                                     active
-                                      ? "bg-white/20 text-white shadow-sm"
+                                      ? "bg-white/20 text-white/90 shadow-sm"
                                       : ""
                                   }`}
                                 >
                                   <MdStackedLineChart
                                     size={18}
-                                    className="text-ztg-green-400"
+                                    className="text-ztg-green-500"
                                   />
                                   <div className="flex flex-col items-start">
                                     <span className="font-semibold">
@@ -948,7 +942,7 @@ const GetTokensButton = () => {
             }}
           />
           {/* <div className="relative z-20 block h-full sm:w-[125px] ">
-            <button className="center h-full w-full rounded-md bg-black text-white">
+            <button className="center h-full w-full rounded-md bg-black text-white/90">
               Get Tokens
             </button>
           </div> */}
@@ -982,7 +976,7 @@ const AirdropButton = () => {
           }}
         />
         {/* <div className="relative z-20 block h-full sm:w-[100px] ">
-          <button className="center h-full w-full rounded-md bg-black text-white">
+          <button className="center h-full w-full rounded-md bg-black text-white/90">
             Airdrop!
           </button>
         </div> */}
@@ -1008,7 +1002,7 @@ const CategoriesMenu = ({ onSelect }: { onSelect: () => void }) => {
           key={index}
           onClick={onSelect}
           href={`/markets?status=Active&tag=${category.name}&ordering=Newest&liquidityOnly=true`}
-          className="flex min-h-[48px] items-center gap-3 rounded-lg px-4 py-3 text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:pb-0"
+          className="flex min-h-[48px] items-center gap-3 rounded-lg px-4 py-3 text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:pb-0"
         >
           <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full ring-2 ring-white/10 md:h-10 md:w-10">
             <Image
@@ -1019,10 +1013,10 @@ const CategoriesMenu = ({ onSelect }: { onSelect: () => void }) => {
             />
           </div>
           <div className="flex flex-col">
-            <div className="text-base font-semibold text-white md:text-sm">
+            <div className="text-base font-semibold text-white/90 md:text-sm">
               {category.name}
             </div>
-            <div className="h-[18px] text-sm font-light text-white/80 md:h-[16px] md:text-xs">
+            <div className="h-[18px] text-sm font-light text-white/90 md:h-[16px] md:text-xs">
               {category.count}
             </div>
           </div>
@@ -1038,13 +1032,13 @@ const CreateMarketMenu = ({ onSelect }: { onSelect: () => void }) => {
       <Link
         onClick={onSelect}
         href="/create"
-        className="flex min-h-[48px] items-center gap-3 rounded-lg px-4 py-3 text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5"
+        className="flex min-h-[48px] items-center gap-3 rounded-lg px-4 py-3 text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5"
       >
-        <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-ztg-green-400 md:h-10 md:w-10">
+        <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-ztg-green-500 md:h-10 md:w-10">
           <MdShowChart size={20} className="md:h-5 md:w-5" />
         </div>
         <div className="flex flex-col">
-          <div className="text-base font-semibold text-white md:text-sm">
+          <div className="text-base font-semibold text-white/90 md:text-sm">
             Single Market
           </div>
         </div>
@@ -1053,16 +1047,16 @@ const CreateMarketMenu = ({ onSelect }: { onSelect: () => void }) => {
       <Link
         onClick={onSelect}
         href="/create-combo"
-        className="flex min-h-[48px] items-center gap-3 rounded-lg px-4 py-3 text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5"
+        className="flex min-h-[48px] items-center gap-3 rounded-lg px-4 py-3 text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5"
       >
-        <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-ztg-green-400 md:h-10 md:w-10">
+        <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/10 text-ztg-green-500 md:h-10 md:w-10">
           <MdStackedLineChart size={20} className="md:h-5 md:w-5" />
         </div>
         <div className="flex flex-col">
-          <div className="text-base font-semibold text-white md:text-sm">
+          <div className="text-base font-semibold text-white/90 md:text-sm">
             Combinatorial Market
           </div>
-          <div className="text-sm font-light text-white/80 md:text-xs">
+          <div className="text-sm font-light text-white/90 md:text-xs">
             Create a complex multi-outcome market
           </div>
         </div>
@@ -1092,7 +1086,7 @@ const CategoriesMenuItem = ({ onSelect }: { onSelect: () => void }) => {
       <Menu.Item>
         {({ active }) => (
           <button
-            className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
+            className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
               active ? "bg-white/20" : ""
             }`}
             onClick={(event) => {
@@ -1101,15 +1095,15 @@ const CategoriesMenuItem = ({ onSelect }: { onSelect: () => void }) => {
               setCategoriesOpen(!categoriesOpen);
             }}
           >
-            <div className="relative h-5 w-5 shrink-0 text-ztg-green-400 md:h-5 md:w-5">
+            <div className="relative h-5 w-5 shrink-0 text-ztg-green-500 md:h-5 md:w-5">
               <FiList size={"100%"} />
             </div>
-            <h3 className="flex-1 text-left text-base font-semibold text-white md:text-sm">
+            <h3 className="flex-1 text-left text-base font-semibold text-white/90 md:text-sm">
               Categories
             </h3>
             <FiArrowRight
               size={20}
-              className="shrink-0 text-white md:h-[18px] md:w-[18px]"
+              className="shrink-0 text-white/90 md:h-[18px] md:w-[18px]"
             />
           </button>
         )}
@@ -1142,8 +1136,8 @@ const CategoriesMenuItem = ({ onSelect }: { onSelect: () => void }) => {
             className="mb-3 flex min-h-[48px] cursor-pointer items-center gap-3 rounded-lg px-4 py-3 transition-all hover:bg-white/20 md:hidden"
             onClick={() => setCategoriesOpen(false)}
           >
-            <FiArrowLeft size={20} className="text-white" />
-            <span className="text-base font-semibold text-white">
+            <FiArrowLeft size={20} className="text-white/90" />
+            <span className="text-base font-semibold text-white/90">
               Back to Menu
             </span>
           </div>
@@ -1175,7 +1169,7 @@ const CreateMarketMenuItem = ({ onSelect }: { onSelect: () => void }) => {
       <Menu.Item>
         {({ active }) => (
           <button
-            className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
+            className={`group flex min-h-[48px] w-full items-center gap-3 rounded-lg px-4 py-3 text-base text-white/90 transition-all hover:bg-white/20 md:min-h-0 md:gap-3 md:px-3 md:py-2.5 md:text-sm ${
               active ? "bg-white/20" : ""
             }`}
             onClick={(event) => {
@@ -1184,15 +1178,15 @@ const CreateMarketMenuItem = ({ onSelect }: { onSelect: () => void }) => {
               setCreateMarketOpen(!createMarketOpen);
             }}
           >
-            <div className="relative h-5 w-5 shrink-0 text-ztg-green-400 md:h-5 md:w-5">
+            <div className="relative h-5 w-5 shrink-0 text-ztg-green-500 md:h-5 md:w-5">
               <FiPlusSquare size={"100%"} />
             </div>
-            <h3 className="flex-1 text-left text-base font-semibold text-white md:text-sm">
+            <h3 className="flex-1 text-left text-base font-semibold text-white/90 md:text-sm">
               Create Market
             </h3>
             <FiArrowRight
               size={20}
-              className="shrink-0 text-white md:h-[18px] md:w-[18px]"
+              className="shrink-0 text-white/90 md:h-[18px] md:w-[18px]"
             />
           </button>
         )}
@@ -1225,8 +1219,8 @@ const CreateMarketMenuItem = ({ onSelect }: { onSelect: () => void }) => {
             className="mb-3 flex min-h-[48px] cursor-pointer items-center gap-3 rounded-lg px-4 py-3 transition-all hover:bg-white/20 md:hidden"
             onClick={() => setCreateMarketOpen(false)}
           >
-            <FiArrowLeft size={20} className="text-white" />
-            <span className="text-base font-semibold text-white">
+            <FiArrowLeft size={20} className="text-white/90" />
+            <span className="text-base font-semibold text-white/90">
               Back to Menu
             </span>
           </div>
diff --git a/components/trade-form/BuyForm.tsx b/components/trade-form/BuyForm.tsx
index af5c28835..1f17037c9 100644
--- a/components/trade-form/BuyForm.tsx
+++ b/components/trade-form/BuyForm.tsx
@@ -402,7 +402,7 @@ const BuyForm = ({
   };
 
   return (
-    <div className="flex w-full flex-col items-center gap-6 px-2 text-ztg-18-150 font-semibold text-white md:px-0">
+    <div className="flex w-full flex-col items-center gap-6 px-2 text-ztg-18-150 font-semibold text-white/90 md:px-0">
       <form
         onSubmit={handleSubmit(onSubmit)}
         className="flex w-full flex-col items-center gap-y-4"
@@ -422,14 +422,14 @@ const BuyForm = ({
               />
             </div>
           )}
-          <div className="flex h-[56px] flex-1 items-center justify-center rounded-lg border border-white/10 bg-white/10 px-4 text-xl font-bold text-white shadow-lg shadow-black/20 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/15">
+          <div className="flex h-[56px] flex-1 items-center justify-center rounded-lg border border-white/10 bg-white/10 px-4 text-xl font-bold text-white/90 shadow-lg shadow-black/20 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/15">
             {amountOut.div(ZTG).abs().toFixed(3)}
           </div>
         </div>
         <div className="relative w-full">
           <Input
             type="number"
-            className="h-[56px] w-full rounded-lg border border-white/10 bg-white/10 px-4 text-center text-xl font-bold text-white shadow-lg shadow-black/20 backdrop-blur-sm transition-all placeholder:text-white/50 focus:border-ztg-green-500/40 focus:bg-white/15 focus:shadow-lg focus:shadow-ztg-green-500/10 focus:outline-none"
+            className="h-[56px] w-full rounded-lg border border-white/10 bg-white/10 px-4 text-center text-xl font-bold text-white/90 shadow-lg shadow-black/20 backdrop-blur-sm transition-all placeholder:text-white/50 focus:border-ztg-green-500/40 focus:bg-white/15 focus:shadow-lg focus:shadow-ztg-green-500/10 focus:outline-none"
             step="any"
             {...register("amount", {
               required: {
@@ -473,20 +473,20 @@ const BuyForm = ({
             {formState.errors["amount"]?.message?.toString()}
           </div>
           <div className="flex w-full justify-between">
-            <div className="text-white/80">Max profit:</div>
-            <div className="font-semibold text-white">
+            <div className="text-white/90">Max profit:</div>
+            <div className="font-semibold text-white/90">
               {maxProfit.div(ZTG).toFixed(2)} {baseSymbol}
             </div>
           </div>
           <div className="flex w-full justify-between">
-            <div className="text-white/80">Price after trade:</div>
-            <div className="font-semibold text-white">
+            <div className="text-white/90">Price after trade:</div>
+            <div className="font-semibold text-white/90">
               {newSpotPrice?.toFixed(2)} ({priceImpact?.toFixed(2)}%)
             </div>
           </div>
           <div className="flex w-full justify-between">
-            <div className="text-white/80">Current shares:</div>
-            <div className="font-semibold text-white">
+            <div className="text-white/90">Current shares:</div>
+            <div className="font-semibold text-white/90">
               {selectedAssetBalance?.div(ZTG).toFixed(3, Decimal.ROUND_DOWN) ??
                 "0.000"}
             </div>
diff --git a/components/trade-form/SellForm.tsx b/components/trade-form/SellForm.tsx
index e59db490c..658b3fdbb 100644
--- a/components/trade-form/SellForm.tsx
+++ b/components/trade-form/SellForm.tsx
@@ -365,7 +365,7 @@ const SellForm = ({
     send();
   };
   return (
-    <div className="flex w-full flex-col items-center gap-6 px-2 text-ztg-18-150 font-semibold text-white md:px-0">
+    <div className="flex w-full flex-col items-center gap-6 px-2 text-ztg-18-150 font-semibold text-white/90 md:px-0">
       <form
         onSubmit={handleSubmit(onSubmit)}
         className="flex w-full flex-col items-center gap-y-4"
@@ -385,14 +385,14 @@ const SellForm = ({
               />
             </div>
           )}
-          <div className="flex h-[56px] flex-1 items-center justify-center rounded-lg border border-white/10 bg-white/10 px-4 text-xl font-bold text-white shadow-lg shadow-black/20 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/15">
+          <div className="flex h-[56px] flex-1 items-center justify-center rounded-lg border border-white/10 bg-white/10 px-4 text-xl font-bold text-white/90 shadow-lg shadow-black/20 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/15">
             {amountOut.div(ZTG).abs().toFixed(3)} {baseSymbol}
           </div>
         </div>
         <div className="relative w-full">
           <Input
             type="number"
-            className="h-[56px] w-full rounded-lg border border-white/10 bg-white/10 px-4 text-center text-xl font-bold text-white shadow-lg shadow-black/20 backdrop-blur-sm transition-all placeholder:text-white/50 focus:border-ztg-green-500/40 focus:bg-white/15 focus:shadow-lg focus:shadow-ztg-green-500/10 focus:outline-none"
+            className="h-[56px] w-full rounded-lg border border-white/10 bg-white/10 px-4 text-center text-xl font-bold text-white/90 shadow-lg shadow-black/20 backdrop-blur-sm transition-all placeholder:text-white/50 focus:border-ztg-green-500/40 focus:bg-white/15 focus:shadow-lg focus:shadow-ztg-green-500/10 focus:outline-none"
             step="any"
             {...register("amount", {
               required: {
@@ -433,14 +433,14 @@ const SellForm = ({
             {formState.errors["amount"]?.message?.toString()}
           </div>
           <div className="flex w-full justify-between">
-            <div className="text-white/80">Price after trade:</div>
-            <div className="font-semibold text-white">
+            <div className="text-white/90">Price after trade:</div>
+            <div className="font-semibold text-white/90">
               {newSpotPrice?.toFixed(2)} ({priceImpact?.toFixed(2)}%)
             </div>
           </div>
           <div className="flex w-full justify-between">
-            <div className="text-white/80">Current shares:</div>
-            <div className="font-semibold text-white">
+            <div className="text-white/90">Current shares:</div>
+            <div className="font-semibold text-white/90">
               {selectedAssetBalance?.div(ZTG).toFixed(3, Decimal.ROUND_DOWN) ??
                 "0.000"}
             </div>
diff --git a/components/trade-form/TradeTab.tsx b/components/trade-form/TradeTab.tsx
index ee9c8006a..6e56c7bdb 100644
--- a/components/trade-form/TradeTab.tsx
+++ b/components/trade-form/TradeTab.tsx
@@ -16,11 +16,11 @@ const TradeTab: FC<
     } ${
       selected
         ? isSellTab
-          ? "bg-ztg-red-600/90 font-bold text-white shadow-lg shadow-black/20 backdrop-blur-sm"
-          : "bg-ztg-green-600/90 font-bold text-white shadow-lg shadow-black/20 backdrop-blur-sm"
+          ? "bg-ztg-red-600/90 font-bold text-white/90 shadow-lg shadow-black/20 backdrop-blur-sm"
+          : "bg-ztg-green-600/90 font-bold text-white/90 shadow-lg shadow-black/20 backdrop-blur-sm"
         : isSellTab
-          ? "text-white/80 bg-white/5 hover:bg-white/10"
-          : "text-white/80 bg-white/5 hover:bg-white/10"
+          ? "text-white/90 bg-white/5 hover:bg-white/10"
+          : "text-white/90 bg-white/5 hover:bg-white/10"
     }`;
     return (
       <div ref={ref} className={classes} {...rest}>
diff --git a/components/ui/AddressInput.tsx b/components/ui/AddressInput.tsx
index dc4fd0777..01e9031ba 100644
--- a/components/ui/AddressInput.tsx
+++ b/components/ui/AddressInput.tsx
@@ -31,7 +31,7 @@ const Control = ({ children, ...rest }: ControlProps<AddressOption, false>) => {
   return (
     <components.Control
       {...rest}
-      className="flex h-full items-center justify-between pl-4 text-white"
+      className="flex h-full items-center justify-between pl-4 text-white/90"
     >
       {children}
     </components.Control>
@@ -57,7 +57,7 @@ const ClearIndicator = (props: ClearIndicatorProps<AddressOption, false>) => {
   return (
     <components.ClearIndicator
       {...omit(props, "children")}
-      className="cursor-pointer text-white/70 hover:text-white transition-colors"
+      className="cursor-pointer text-white/70 hover:text-white/90 transition-colors"
     >
       <X size={16} />
     </components.ClearIndicator>
@@ -130,7 +130,7 @@ const SingleValue = ({
   return (
     <components.SingleValue
       {...rest}
-      className="flex items-center font-medium text-white"
+      className="flex items-center font-medium text-white/90"
     >
       {isValidAddress && (
         <div
@@ -142,7 +142,7 @@ const SingleValue = ({
         </div>
       )}
       <div
-        className={`flex flex-col transition-opacity text-white ${
+        className={`flex flex-col transition-opacity text-white/90 ${
           rest.selectProps.menuIsOpen && "opacity-50"
         }`}
       >
@@ -161,10 +161,10 @@ const Option = ({ children, ...rest }: OptionProps<AddressOption, false>) => {
       {...rest}
       className={`mb-2 !flex h-14 w-full !cursor-pointer items-center rounded-md px-4 transition-all last:mb-0 ${
         isSelected
-          ? "bg-ztg-green-500/20 text-ztg-green-400"
+          ? "bg-ztg-green-500/20 text-ztg-green-500"
           : isFocused
-            ? "bg-white/15 text-white"
-            : "bg-white/5 text-white/90 hover:bg-white/15 hover:text-white"
+            ? "bg-white/15 text-white/90"
+            : "bg-white/5 text-white/90 hover:bg-white/15 hover:text-white/90"
       }`}
     >
       {isValidPolkadotAddress(address) && (
@@ -184,7 +184,7 @@ const Input = (props: InputProps<AddressOption, false>) => {
   return (
     <components.Input
       {...props}
-      className="absolute left-0 w-full text-white placeholder:text-white/50"
+      className="absolute left-0 w-full text-white/90 placeholder:text-white/50"
     />
   );
 };
diff --git a/components/ui/AssetInput.tsx b/components/ui/AssetInput.tsx
index 713743b6a..81b03e00e 100644
--- a/components/ui/AssetInput.tsx
+++ b/components/ui/AssetInput.tsx
@@ -43,7 +43,7 @@ const AssetInput: React.FC<AssetInputProps> = ({
         onChange={(e) => {
           onAmountChange?.(e.target.value);
         }}
-        className="absolute right-4 top-[50%] translate-y-[-50%] bg-transparent !px-3 text-right text-lg text-white placeholder:text-white/50"
+        className="absolute right-4 top-[50%] translate-y-[-50%] bg-transparent !px-3 text-right text-lg text-white/90 placeholder:text-white/50"
       />
       {error && (
         <div className="text-right text-sm text-ztg-red-400 mt-1">{error}</div>
diff --git a/components/ui/AssetSelect.tsx b/components/ui/AssetSelect.tsx
index 14b3779ef..a900b8d5e 100644
--- a/components/ui/AssetSelect.tsx
+++ b/components/ui/AssetSelect.tsx
@@ -70,7 +70,7 @@ const IndicatorSeparator = () => null;
 const SingleValue = (props: SingleValueProps<AssetOption, false>) => {
   const { label, image, value } = props.data;
   return (
-    <div className="flex items-center text-xs font-semibold text-white">
+    <div className="flex items-center text-xs font-semibold text-white/90">
       {image ? (
         <Image
           src={image}
@@ -105,10 +105,10 @@ const Option = (props: OptionProps<AssetOption, false>) => {
       {...props}
       className={`mb-1 !flex h-10 w-full !cursor-pointer items-center rounded-md px-3 text-xs font-medium transition-all last:mb-0 ${
         isSelected
-          ? "bg-ztg-green-500/20 text-ztg-green-400"
+          ? "bg-ztg-green-500/20 text-ztg-green-500"
           : isFocused
-            ? "bg-white/15 text-white"
-            : "bg-white/10 text-white/90 hover:bg-white/15 hover:text-white"
+            ? "bg-white/15 text-white/90"
+            : "bg-white/10 text-white/90 hover:bg-white/15 hover:text-white/90"
       }`}
     >
       {image ? (
diff --git a/components/ui/CopyIcon.tsx b/components/ui/CopyIcon.tsx
index d3e640f9c..6f994e2b3 100644
--- a/components/ui/CopyIcon.tsx
+++ b/components/ui/CopyIcon.tsx
@@ -57,7 +57,7 @@ const CopyIcon: FC<CopyIconProps> = ({
         leaveTo="transform opacity-0 :scale-95"
       >
         <div className="absolute right-0 top-[50%] translate-x-[100%] translate-y-[-50%] pl-2">
-          <div className="rounded-md bg-black p-1 text-sm text-white">
+          <div className="rounded-md bg-black p-1 text-sm text-white/90">
             Copied!
           </div>
         </div>
diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
index 7c921f93a..4525b9599 100644
--- a/components/ui/Footer.tsx
+++ b/components/ui/Footer.tsx
@@ -33,21 +33,21 @@ const FooterNewsletterSub: FC<{ title: string }> = ({ title }) => {
 
   return (
     <form className="flex w-full flex-col" onSubmit={handleSubmit(subscribe)}>
-      <h6 className="mb-[26px] flex items-center gap-2 font-semibold text-white">
+      <h6 className="mb-[26px] flex items-center gap-2 font-semibold text-white/90">
         <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
         {title}
       </h6>
       <div className="mb-auto flex h-10 w-full items-center gap-3">
         <Input
           {...register("email", { required: true, pattern: /^\S+@\S+$/i })}
-          className={`h-full grow rounded-md bg-white/10 p-2 text-ztg-12-120 text-white/90 backdrop-blur-sm placeholder:text-white/60 focus:bg-white/15 focus:outline-none ${
+          className={`h-full grow rounded-md bg-white/10 p-2 text-ztg-12-120 text-white/90 backdrop-blur-sm placeholder:text-white/90/60 focus:bg-white/15 focus:outline-none ${
             invalid ? "border-r-2ed-500/60" : ""
           }`}
           type="email"
         />
         <button
           type="submit"
-          className={`center h-full flex-shrink rounded-full bg-ztg-green-600/80 px-5 text-ztg-16-150 text-white backdrop-blur-sm transition-all hover:bg-ztg-green-600 ${
+          className={`center h-full flex-shrink rounded-full bg-ztg-green-600/80 px-5 text-ztg-16-150 text-white/90 backdrop-blur-sm transition-all hover:bg-ztg-green-600 ${
             invalid ? "cursor-default opacity-60" : "cursor-pointer"
           } disabled:opacity-60`}
           disabled={invalid}
@@ -68,7 +68,7 @@ interface FooterMenuProps {
 const FooterMenu: FC<FooterMenuProps> = ({ title, links, className = "" }) => {
   return (
     <div className={`${className}`}>
-      <h6 className="mb-3 flex items-center gap-2 font-semibold text-white">
+      <h6 className="mb-3 flex items-center gap-2 font-semibold text-white/90">
         <span className="h-1 w-6 rounded-full bg-ztg-green-500"></span>
         {title}
       </h6>
@@ -79,7 +79,7 @@ const FooterMenu: FC<FooterMenuProps> = ({ title, links, className = "" }) => {
               href={href}
               key={`footerMenuLink${idx}`}
               target="_blank"
-              className="mb-0.5 transition-colors hover:text-ztg-green-400"
+              className="mb-0.5 transition-colors hover:text-ztg-green-500"
             >
               <span>{text}</span>
             </Link>
@@ -137,7 +137,7 @@ const Footer = () => {
                 href={link.href}
                 target={link.external ? "_blank" : undefined}
                 rel={link.external ? "noopener noreferrer" : undefined}
-                className="text-white/70 transition-colors hover:text-ztg-green-400 hover:underline"
+                className="text-white/70 transition-colors hover:text-ztg-green-500 hover:underline"
               >
                 {link.text}
               </Link>
diff --git a/components/ui/HorizontalScroll.tsx b/components/ui/HorizontalScroll.tsx
index 599395d2e..1d58fc077 100644
--- a/components/ui/HorizontalScroll.tsx
+++ b/components/ui/HorizontalScroll.tsx
@@ -39,7 +39,7 @@ const HorizontalScroll: FC<HorizontalScrollProps> = ({
         className={`ztg-transition ml-[12px] mr-[8px] hidden h-[40px] w-[40px] items-center justify-center rounded-full sm:flex ${
           leftDisabled
             ? "bg-ztg-primary-600 text-pastel-blue opacity-30"
-            : "bg-pastel-blue text-white"
+            : "bg-pastel-blue text-white/90"
         }`}
         disabled={leftDisabled}
       >
@@ -50,7 +50,7 @@ const HorizontalScroll: FC<HorizontalScrollProps> = ({
         className={`ztg-transition hidden h-[40px] w-[40px] items-center justify-center rounded-full sm:flex  ${
           rightDisabled
             ? "bg-ztg-primary-600 text-pastel-blue opacity-30"
-            : "bg-pastel-blue text-white"
+            : "bg-pastel-blue text-white/90"
         }`}
         disabled={rightDisabled}
       >
diff --git a/components/ui/InfoPopover.tsx b/components/ui/InfoPopover.tsx
index 66bbcff0d..4193d51f2 100644
--- a/components/ui/InfoPopover.tsx
+++ b/components/ui/InfoPopover.tsx
@@ -89,7 +89,7 @@ export const InfoPopover: React.FC<InfoPopoverProps> = ({
               <Popover.Panel
                 className={`absolute z-[100] ${positionCss} w-screen max-w-[calc(100vw-2rem)] rounded-md lg:w-[564px] ${popoverCss}`}
               >
-                <div className="shadow-lg overflow-hidden rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-3 py-2 text-left text-sm font-medium text-white backdrop-blur-md">
+                <div className="shadow-lg overflow-hidden rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-3 py-2 text-left text-sm font-medium text-white/90 backdrop-blur-md">
                   {children}
                 </div>
               </Popover.Panel>
diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
index 7ef2da930..6ef302174 100644
--- a/components/ui/Input.tsx
+++ b/components/ui/Input.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 type InputProps = {} & React.InputHTMLAttributes<HTMLInputElement>;
 
 const defaultClassName =
-  "rounded-lg outline-none items-center text-white/90 placeholder:text-white/60 backdrop-blur-sm transition-all";
+  "rounded-lg outline-none items-center text-white/90 placeholder:text-white/90/60 backdrop-blur-sm transition-all";
 
 const Input = React.forwardRef<HTMLInputElement | null, InputProps>(
   (props, ref) => {
diff --git a/components/ui/ModalPanel.tsx b/components/ui/ModalPanel.tsx
index a3c5737c7..d1b67a6e1 100644
--- a/components/ui/ModalPanel.tsx
+++ b/components/ui/ModalPanel.tsx
@@ -80,7 +80,7 @@ export const ModalHeader = ({
 }) => (
   <div className={`flex-shrink-0 px-4 pt-4 pb-2 md:px-6 md:pt-6 md:pb-3 ${className}`}>
     {title && (
-      <h2 className="text-lg md:text-xl font-bold text-white text-center mb-0">
+      <h2 className="text-lg md:text-xl font-bold text-white/90 text-center mb-0">
         {title}
       </h2>
     )}
@@ -137,5 +137,5 @@ export const ModalTabs = ({
 export const modalTabStyles = {
   base: "flex-1 px-3 py-2 text-sm font-medium transition-all",
   inactive: "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white/90",
-  active: "bg-white/10 text-white font-semibold shadow-sm",
+  active: "bg-white/10 text-white/90 font-semibold shadow-sm",
 };
diff --git a/components/ui/PercentageChange.tsx b/components/ui/PercentageChange.tsx
index 811453ad8..38ad2691c 100644
--- a/components/ui/PercentageChange.tsx
+++ b/components/ui/PercentageChange.tsx
@@ -30,7 +30,7 @@ const PercentageChange = ({ change }: { change: string }) => {
         <></>
       )}
 
-      <span className="ml-ztg-4 text-center font-mono text-ztg-14-150 dark:text-white">
+      <span className="ml-ztg-4 text-center font-mono text-ztg-14-150 dark:text-white/90">
         {change}%
       </span>
     </div>
diff --git a/components/ui/PrimaryTabsList.tsx b/components/ui/PrimaryTabsList.tsx
index 391be44f1..0cdaeb89e 100644
--- a/components/ui/PrimaryTabsList.tsx
+++ b/components/ui/PrimaryTabsList.tsx
@@ -9,8 +9,8 @@ const PrimaryTabsList = ({ titles }: { titles: string[] }) => {
           className={({ selected }) =>
             `whitespace-nowrap rounded-md px-4 py-2.5 text-sm font-semibold transition-all focus:outline-none sm:px-6 sm:text-base ${
               selected
-                ? "bg-ztg-green-600/80 text-white shadow-md"
-                : "text-white/70 hover:bg-white/20 hover:text-white"
+                ? "bg-ztg-green-600/80 text-white/90 shadow-md"
+                : "text-white/70 hover:bg-white/20 hover:text-white/90"
             }`
           }
         >
diff --git a/components/ui/QuickNav.tsx b/components/ui/QuickNav.tsx
index b73de24cd..68f326411 100644
--- a/components/ui/QuickNav.tsx
+++ b/components/ui/QuickNav.tsx
@@ -51,21 +51,21 @@ const QuickNav = () => {
             <Link
               key={index}
               href={item.href}
-              className={`group flex min-h-[44px] items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:min-h-0 sm:gap-2 sm:px-3 sm:py-1.5 sm:text-sm ${
+              className={`group flex h-9 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 ${
                 item.isActive
-                  ? "bg-white/20 text-white ring-2 ring-ztg-green-500/50"
-                  : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white"
+                  ? "bg-white/20 text-white/90 ring-2 ring-ztg-green-500/50"
+                  : "bg-white/10 text-white/90 hover:bg-white/20 hover:text-white/90"
               }`}
             >
               <span
-                className={`hidden sm:inline sm:h-3.5 sm:w-3.5 ${
+                className={`hidden text-ztg-green-500 sm:inline sm:h-4 sm:w-4 ${
                   item.isActive
-                    ? "text-ztg-green-400"
-                    : "text-ztg-green-400/80 group-hover:text-ztg-green-400"
+                    ? "text-ztg-green-500"
+                    : "text-ztg-green-500/80 group-hover:text-ztg-green-500"
                 }`}
               >
                 {React.cloneElement(item.icon as React.ReactElement, {
-                  size: 16,
+                  size: 14,
                 })}
               </span>
               <span className="whitespace-nowrap">{item.label}</span>
@@ -75,15 +75,21 @@ const QuickNav = () => {
             <Menu as="div" className="relative">
               {({ open }) => (
                 <>
-                  <Menu.Button className="flex min-h-[44px] items-center gap-1.5 rounded-md bg-ztg-primary-600 px-2 py-2 text-sm font-semibold text-white shadow-md transition-all hover:bg-ztg-primary-700 hover:shadow-lg sm:min-h-0 sm:px-3 sm:py-1.5 sm:text-sm">
+                  <Menu.Button
+                    className={`flex h-9 items-center justify-center gap-1.5 rounded-lg px-2 py-2 text-xs font-semibold shadow-md backdrop-blur-sm transition-all active:scale-95 sm:gap-2 sm:px-2.5 sm:text-sm md:px-3 ${
+                      open
+                        ? "bg-white/15 text-white/90"
+                        : "bg-white/15 text-white/90 hover:bg-white/20 hover:text-white/90"
+                    }`}
+                  >
                     <FiPlusSquare
-                      size={16}
-                      className="hidden sm:inline sm:h-3.5 sm:w-3.5"
+                      size={14}
+                      className="hidden text-ztg-green-500 sm:inline sm:h-4 sm:w-4"
                     />
                     <span>Create Market</span>
                     <ChevronDown
-                      size={16}
-                      className={`ml-0.5 transition-transform sm:h-3.5 sm:w-3.5 ${open ? "rotate-180" : ""}`}
+                      size={14}
+                      className={`ml-0.5 transition-transform sm:h-4 sm:w-4 ${open ? "rotate-180" : ""}`}
                     />
                   </Menu.Button>
 
diff --git a/components/ui/SubTabsList.tsx b/components/ui/SubTabsList.tsx
index 84dfdc4f8..a289043de 100644
--- a/components/ui/SubTabsList.tsx
+++ b/components/ui/SubTabsList.tsx
@@ -9,8 +9,8 @@ const SubTabsList = ({ titles }: { titles: string[] }) => {
           className={({ selected }) =>
             `flex-1 rounded-md px-3 py-2 text-sm font-medium transition-all focus:outline-none ${
               selected
-                ? "bg-ztg-green-600/80 text-white shadow-sm"
-                : "text-white/70 hover:bg-white/20 hover:text-white"
+                ? "bg-ztg-green-600/80 text-white/90 shadow-sm"
+                : "text-white/70 hover:bg-white/20 hover:text-white/90"
             }`
           }
         >
diff --git a/components/ui/Table.tsx b/components/ui/Table.tsx
index 6cbe58582..8aaf14b66 100644
--- a/components/ui/Table.tsx
+++ b/components/ui/Table.tsx
@@ -128,7 +128,7 @@ const Cell = ({
     isLoadingError: ztgIsLoadingError,
   } = useZtgPrice();
 
-  const base = `text-white px-4 h-16 ${
+  const base = `text-white/90 px-4 h-16 ${
     onClick ? "cursor-pointer" : ""
   } ${className}`;
   const style = { height: `${rowHeight}px` };
@@ -222,7 +222,7 @@ const Cell = ({
             </div>
             {/* USD price display - enabled for Balances section, disabled in other portfolio components via usdValue */}
             {value.usdValue !== undefined && (
-              <div className="text-xs font-light text-white">
+              <div className="text-xs font-light text-white/90">
                 $
                 {(
                   value.usdValue ?? (ztgPrice?.toNumber() ?? 0) * value.value
@@ -267,7 +267,7 @@ const Cell = ({
                 src={value.url}
                 loading="lazy"
               />
-              <span className="text-xxs font-semibold uppercase text-white">
+              <span className="text-xxs font-semibold uppercase text-white/90">
                 {value.label}
               </span>
             </div>
@@ -450,7 +450,7 @@ const Table = ({
                       )}
                       {column.infobox && (
                         <InfoPopover
-                        className="text-white"
+                        className="text-white/90"
                           position={
                             index === 0
                               ? "bottom-end"
@@ -459,7 +459,7 @@ const Table = ({
                                 : "bottom"
                           }
                           title={
-                            <h3 className="mb-4 flex items-center justify-center gap-2 text-white">
+                            <h3 className="mb-4 flex items-center justify-center gap-2 text-white/90">
                               <AiOutlineInfoCircle />
                               {column.header}
                             </h3>
@@ -532,9 +532,9 @@ const Table = ({
           {!loadingMore && rows.length === 0 ? (
             <div className="flex w-full flex-col items-center justify-center py-12">
               <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full border border-ztg-primary-200/20 bg-ztg-primary-900/30 backdrop-blur-sm">
-                <Inbox className="text-white/60" size={24} strokeWidth={1.5} />
+                <Inbox className="text-white/90/60" size={24} strokeWidth={1.5} />
               </div>
-              <div className="text-sm font-medium text-white/80">
+              <div className="text-sm font-medium text-white/90">
                 {noDataMessage}
               </div>
             </div>
@@ -547,7 +547,7 @@ const Table = ({
           {onLoadMore && !hideLoadMore && (
             <div className="mb-5 mt-4 flex justify-center">
               <div
-                className="cursor-pointer rounded-full bg-ztg-green-600/80 px-4 py-2 text-xs font-bold uppercase text-white backdrop-blur-sm transition-colors hover:bg-ztg-green-600"
+                className="cursor-pointer rounded-full bg-ztg-green-600/80 px-4 py-2 text-xs font-bold uppercase text-white/90 backdrop-blur-sm transition-colors hover:bg-ztg-green-600"
                 role="button"
                 onClick={handleLoadMore}
               >
diff --git a/components/ui/TimeFilters.tsx b/components/ui/TimeFilters.tsx
index 20ff79b01..dd35bcd48 100644
--- a/components/ui/TimeFilters.tsx
+++ b/components/ui/TimeFilters.tsx
@@ -51,8 +51,8 @@ const TimeFilters = ({
           key={index}
           className={`flex flex-1 items-center justify-center rounded-md px-2 py-1.5 text-xs font-semibold transition-all active:scale-95 sm:px-3 sm:py-2 sm:text-sm ${
             filter.label === value.label
-              ? "bg-ztg-green-600/90 text-white shadow-md backdrop-blur-sm"
-              : "text-white/70 hover:bg-white/20 hover:text-white"
+              ? "bg-ztg-primary-200 text-white/90 shadow-md backdrop-blur-sm"
+              : "text-white/70 hover:bg-white/20 hover:text-white/90"
           }`}
           onClick={() => onClick(filter)}
         >
diff --git a/components/ui/TimeSeriesChart.tsx b/components/ui/TimeSeriesChart.tsx
index 255f36f44..01deb5b6c 100644
--- a/components/ui/TimeSeriesChart.tsx
+++ b/components/ui/TimeSeriesChart.tsx
@@ -60,7 +60,7 @@ const ChartToolTip = (props) => {
             <div
               className={`mb-1.5 flex items-center gap-1.5 border-b border-white/20 ${isMobile ? "pb-1.5" : "mb-2 gap-2 pb-2"}`}
             >
-              <span className="font-semibold text-white">
+              <span className="font-semibold text-white/90">
                 {new Intl.DateTimeFormat("default", {
                   dateStyle: "short",
                 }).format(new Date(props.label))}
@@ -86,13 +86,13 @@ const ChartToolTip = (props) => {
                       style={{ backgroundColor: item.color }}
                     ></div>
                     <div
-                      className={`font-semibold capitalize text-white ${isMobile ? "text-[10px]" : ""}`}
+                      className={`font-semibold capitalize text-white/90 ${isMobile ? "text-[10px]" : ""}`}
                     >
                       {item.label}
                     </div>
                   </div>
                   <div
-                    className={`font-bold text-white ${isMobile ? "text-[10px]" : ""}`}
+                    className={`font-bold text-white/90 ${isMobile ? "text-[10px]" : ""}`}
                   >{`${item.value.toFixed(isMobile ? 2 : 3)} ${props.yUnits}`}</div>
                 </div>
               ))}
diff --git a/components/ui/Tooltip.tsx b/components/ui/Tooltip.tsx
index 013995eb7..33a32071b 100644
--- a/components/ui/Tooltip.tsx
+++ b/components/ui/Tooltip.tsx
@@ -29,7 +29,7 @@ export const Tooltip: FC<TooltipProps> = ({
         className={`pointer-events-none absolute z-50 w-64 opacity-0 transition-opacity duration-200 group-hover:opacity-100 ${positionClasses[position]}`}
         style={{ maxWidth: "calc(100vw - 2rem)" }}
       >
-        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-3 py-2 text-xs leading-snug text-white shadow-lg backdrop-blur-md">
+        <div className="rounded-md border-2 border-ztg-primary-200/30 bg-ztg-primary-900/95 px-3 py-2 text-xs leading-snug text-white/90 shadow-lg backdrop-blur-md">
           {content}
         </div>
       </div>
diff --git a/components/ui/TransactionButton.tsx b/components/ui/TransactionButton.tsx
index d92f5a87e..333125aee 100644
--- a/components/ui/TransactionButton.tsx
+++ b/components/ui/TransactionButton.tsx
@@ -106,7 +106,7 @@ const TransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
     const baseColor =
       variant === "red"
         ? "bg-ztg-red-600/80 hover:bg-ztg-red-600"
-        : "bg-ztg-green-600/80 hover:bg-ztg-green-600 backdrop-blur-sm";
+        : "bg-ztg-green-600/90 hover:bg-ztg-green-600 backdrop-blur-sm";
 
     // During SSR, use safe default color
     if (!mounted) {
@@ -170,7 +170,7 @@ const TransactionButton: FC<PropsWithChildren<TransactionButtonProps>> = ({
   return (
     <button
       type={type}
-      className={`ztg-transition h-[56px] w-full rounded-full font-bold text-white shadow-lg
+      className={`ztg-transition h-14 w-full rounded-full font-bold text-white/90 shadow-lg
         transition-all duration-200 focus:outline-none disabled:cursor-default ${
           !isDisabled && "hover:shadow-xl active:scale-[0.97]"
         } ${colorClass} ${className} disabled:!bg-ztg-primary-300`}
diff --git a/components/ui/inputs.tsx b/components/ui/inputs.tsx
index 91fe65985..f7e8cb461 100644
--- a/components/ui/inputs.tsx
+++ b/components/ui/inputs.tsx
@@ -21,7 +21,7 @@ interface InputProps {
 }
 
 const inputClasses =
-  "bg-white/10 text-ztg-14-150 w-full rounded-lg h-ztg-40 p-ztg-8 focus:outline-none text-white/90 placeholder:text-white/60 backdrop-blur-sm transition-all focus:bg-white/15";
+  "bg-white/10 text-ztg-14-150 w-full rounded-lg h-ztg-40 p-ztg-8 focus:outline-none text-white/90 placeholder:text-white/90/60 backdrop-blur-sm transition-all focus:bg-white/15";
 const invalidClasses = "!border-ztg-red-500 !text-ztg-red-400";
 
 const Input: any = React.forwardRef<
diff --git a/components/web3wallet/index.tsx b/components/web3wallet/index.tsx
index c93264853..eb117bd35 100644
--- a/components/web3wallet/index.tsx
+++ b/components/web3wallet/index.tsx
@@ -37,12 +37,12 @@ const Web3wallet = () => {
           <input
             type="text"
             placeholder="Enter email"
-            className="col-span-3 h-11 rounded-lg border-2 border-white/10 bg-white/10 px-3 py-2 text-sm text-white/90 shadow-sm backdrop-blur-sm transition-all placeholder:text-sm placeholder:text-white/60 focus:border-white/20 focus:bg-white/15 focus:outline-none sm:col-span-2"
+            className="col-span-3 h-11 rounded-lg border-2 border-white/10 bg-white/10 px-3 py-2 text-sm text-white/90 shadow-sm backdrop-blur-sm transition-all placeholder:text-sm placeholder:text-white/90/60 focus:border-white/20 focus:bg-white/15 focus:outline-none sm:col-span-2"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
           <button
-            className="col-span-3 h-11 rounded-lg bg-ztg-green-600/80 px-3 py-2 text-sm font-semibold text-white shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg sm:col-span-1"
+            className="col-span-3 h-11 rounded-lg bg-ztg-green-600/80 px-3 py-2 text-sm font-semibold text-white/90 shadow-md backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-lg sm:col-span-1"
             onClick={() => loginEmail(email)}
           >
             Submit
diff --git a/components/wizard/WizardStepper.tsx b/components/wizard/WizardStepper.tsx
index f1639ba4d..2f4ab7e76 100644
--- a/components/wizard/WizardStepper.tsx
+++ b/components/wizard/WizardStepper.tsx
@@ -88,11 +88,11 @@ export const WizardStepper = <T extends WizardStep<any>>({
                   group-active:scale-95
                   ${
                     canNavigate || index === visibleStepIndex
-                      ? "bg-ztg-primary-600 text-white"
+                      ? "bg-ztg-primary-600 text-white/90"
                       : "bg-ztg-primary-300/60 text-ztg-primary-700"
                   }
-                  ${showError && "bg-red-500 text-white"}
-                  ${showCompleted && "bg-emerald-500 text-white"}
+                  ${showError && "bg-red-500 text-white/90"}
+                  ${showCompleted && "bg-emerald-500 text-white/90"}
                   ${
                     index === visibleStepIndex &&
                     "ring-2 ring-ztg-primary-400 ring-offset-1"
diff --git a/lib/constants/foreign-asset.ts b/lib/constants/foreign-asset.ts
index 6ec40f7b1..02e20963b 100644
--- a/lib/constants/foreign-asset.ts
+++ b/lib/constants/foreign-asset.ts
@@ -80,25 +80,6 @@ export const FOREIGN_ASSET_MULTILOCATION = {
   0: {
     parents: 1
   },
-  1: {
-    parents: 1,
-    interior: {
-      X3: [
-        {
-          Parachain: 2004,
-        },
-        {
-          PalletInstance: 110,
-        },
-        {
-          AccountKey20: {
-            network: null,
-            key: hexToU8a('0x931715fee2d06333043d11f658c8ce934ac61d0c'),
-          }
-        },
-      ],
-    },
-  },
   4: {
     parents: 1,
     interior: {
@@ -126,15 +107,6 @@ const PROD_FOREIGN_ASSET_METADATA: ForeignAssetMetadata = {
     tokenSymbol: "DOT",
     subsquidId: "DOT",
   },
-  1: {
-    originChain: "Moonbeam",
-    image: "/currencies/usdc.svg",
-    withdrawSupported: false,
-    coinGeckoId: "usd",
-    tokenSymbol: "USDC",
-    subsquidId: "USDC",
-    parachainId: 2004,
-  },
   4: {
     originChain: "AssetHub",
     image: "/currencies/usdc.svg",
diff --git a/lib/constants/market-filter.ts b/lib/constants/market-filter.ts
index 34f304435..9282488c9 100644
--- a/lib/constants/market-filter.ts
+++ b/lib/constants/market-filter.ts
@@ -47,10 +47,6 @@ export const marketTagFilterOptions: MarketTagFilter[] = defaultTags.map(
 const createCurrencyFilters = () => {
   const filters: MarketCurrencyFilter[] = [];
   for (const [id, asset] of Object.entries(FOREIGN_ASSET_METADATA)) {
-    // Exclude Moonbeam/Wormhole USDC (ID 1) from currency filters
-    if (Number(id) === 1) {
-      continue;
-    }
     filters.push({
       type: "currency",
       value: `{"foreignAsset":${id}}`,
diff --git a/lib/constants/supported-currencies.ts b/lib/constants/supported-currencies.ts
index 1426a5d7d..bc0547f9c 100644
--- a/lib/constants/supported-currencies.ts
+++ b/lib/constants/supported-currencies.ts
@@ -26,14 +26,6 @@ export const supportedCurrencies = [
     twColor: "polkadot",
     assetId: { ForeignAsset: 0 } as const,
   } satisfies CurrencyMetadata,
-  // DISABLED: USDC.wh temporarily disabled
-  // {
-  //   name: "USDC.wh" as const,
-  //   description: "Create market with Moonbeam USDC.wh as the base asset.",
-  //   image: "/currencies/usdc.svg",
-  //   twColor: "usdc",
-  //   assetId: { ForeignAsset: 1 } as const,
-  // } satisfies CurrencyMetadata,
 ] as const;
 
 export type SupportedCurrencyTag = Unpacked<
diff --git a/lib/state/market-creation/constants/currency.ts b/lib/state/market-creation/constants/currency.ts
index 928b04ec4..bf0b2cca8 100644
--- a/lib/state/market-creation/constants/currency.ts
+++ b/lib/state/market-creation/constants/currency.ts
@@ -8,6 +8,4 @@ import { SupportedCurrencyTag } from "lib/constants/supported-currencies";
 export const minBaseLiquidity: Record<SupportedCurrencyTag, number> = {
   ZTG: 200,
   DOT: 10,
-  // DISABLED: USDC.wh temporarily disabled
-  // "USDC.wh": 50,
 };
diff --git a/pages/404.tsx b/pages/404.tsx
index 787145514..8182c5c21 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -23,11 +23,11 @@ const NotFoundPage = ({
     <div className="flex min-h-[60vh] items-center justify-center py-16">
       <div className="flex w-full max-w-2xl flex-col items-center justify-center gap-6 rounded-lg border border-ztg-primary-200/30 bg-white/10 p-12 shadow-lg backdrop-blur-md">
         <div className="flex h-24 w-24 items-center justify-center rounded-full border border-ztg-primary-200/20 bg-ztg-primary-900/30 backdrop-blur-sm">
-          <AlertCircle className="text-white/60" size={48} strokeWidth={1.5} />
+          <AlertCircle className="text-white/90/60" size={48} strokeWidth={1.5} />
         </div>
         <div className="text-center">
-          <h1 className="mb-3 text-4xl font-bold text-white">404</h1>
-          <h2 className="mb-3 text-2xl font-semibold text-white">
+          <h1 className="mb-3 text-4xl font-bold text-white/90">404</h1>
+          <h2 className="mb-3 text-2xl font-semibold text-white/90">
             Page Not Found
           </h2>
           <p className="text-sm text-white/70">
@@ -38,21 +38,21 @@ const NotFoundPage = ({
           {backText && backLink ? (
             <button
               onClick={handleClick}
-              className="rounded-md bg-ztg-green-600/80 px-6 py-2.5 text-sm font-semibold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
+              className="rounded-md bg-ztg-green-600/80 px-6 py-2.5 text-sm font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
             >
               {backText}
             </button>
           ) : (
             <Link
               href="/"
-              className="rounded-md bg-ztg-green-600/80 px-6 py-2.5 text-center text-sm font-semibold text-white shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
+              className="rounded-md bg-ztg-green-600/80 px-6 py-2.5 text-center text-sm font-semibold text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-ztg-green-600 hover:shadow-md"
             >
               Go Home
             </Link>
           )}
           <button
             onClick={() => router.back()}
-            className="rounded-md border border-ztg-primary-200/30 bg-white/5 px-6 py-2.5 text-sm font-semibold text-white/90 backdrop-blur-sm transition-all hover:bg-white/10 hover:text-white"
+            className="rounded-md border border-ztg-primary-200/30 bg-white/5 px-6 py-2.5 text-sm font-semibold text-white/90 backdrop-blur-sm transition-all hover:bg-white/10 hover:text-white/90"
           >
             Go Back
           </button>
diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx
index 37804b263..490cb7a4c 100644
--- a/pages/api/og/generate.tsx
+++ b/pages/api/og/generate.tsx
@@ -74,7 +74,7 @@ export default async function GenerateOgImage(request: NextRequest) {
 
   const image = (
     <div
-      tw="px-16 pt-16 pb-24 text-white"
+      tw="px-16 pt-16 pb-24 text-white/90"
       style={{
         width: "100%",
         height: "100%",
diff --git a/pages/avatar/[address].tsx b/pages/avatar/[address].tsx
index aefe96af7..1a6787c2f 100644
--- a/pages/avatar/[address].tsx
+++ b/pages/avatar/[address].tsx
@@ -504,7 +504,7 @@
 //             <div className="flex justify-center">
 //               <button
 //                 disabled={isClaiming || !hasEnoughBalance}
-//                 className={`rounded-3xl text-black py-3 px-5 mb-2 text-white ${
+//                 className={`rounded-3xl text-black py-3 px-5 mb-2 text-white/90 ${
 //                   isClaiming || !hasEnoughBalance
 //                     ? "bg-blue-300 text-gray-600 cursor-not-allowed"
 //                     : "bg-blue-700 cursor-pointer"
diff --git a/pages/claim.tsx b/pages/claim.tsx
index 4df702d72..af83213df 100644
--- a/pages/claim.tsx
+++ b/pages/claim.tsx
@@ -79,7 +79,7 @@ const ClaimPage: NextPage = () => {
               </div>
 
               <button
-                className="h-[40px] w-full rounded-md bg-[#2468E2] text-white disabled:opacity-50 sm:w-[200px]"
+                className="h-[40px] w-full rounded-md bg-[#2468E2] text-white/90 disabled:opacity-50 sm:w-[200px]"
                 onClick={() => {
                   setShowEligibility(true);
                 }}
@@ -210,7 +210,7 @@ const Eligibility = ({
                   )}
               </div>
               <button
-                className="h-[40px] w-full rounded-md bg-[#2468E2] text-white disabled:opacity-50 sm:w-[200px]"
+                className="h-[40px] w-full rounded-md bg-[#2468E2] text-white/90 disabled:opacity-50 sm:w-[200px]"
                 disabled={
                   claimAddress === null ||
                   isValid === false ||
@@ -244,7 +244,7 @@ const Eligibility = ({
       )}
       <div className="flex w-full">
         <button
-          className="h-[40px] w-[200px] rounded-md bg-[#2468E2] text-white"
+          className="h-[40px] w-[200px] rounded-md bg-[#2468E2] text-white/90"
           onClick={() => onCheckAgain()}
         >
           Check another address
diff --git a/pages/court/[caseid].tsx b/pages/court/[caseid].tsx
index 7496d9f81..d8f944572 100644
--- a/pages/court/[caseid].tsx
+++ b/pages/court/[caseid].tsx
@@ -265,7 +265,7 @@ const CasePage: NextPage = ({
                   back to this page.
                 </p>
                 <button
-                  className="center gap-3 rounded-md bg-blue-500 px-4 py-2 text-white"
+                  className="center gap-3 rounded-md bg-blue-500 px-4 py-2 text-white/90"
                   onClick={onClickRecastVote}
                 >
                   Recast Vote
@@ -437,8 +437,8 @@ const CasePage: NextPage = ({
               </div>
             </div>
             {stage?.type === "reassigned" && market.resolvedOutcome && (
-              <div className="inline-block min-w-[200px] rounded-lg bg-blue-500 px-5 py-3 text-white">
-                <h3 className="mb-3 text-white">Outcome</h3>
+              <div className="inline-block min-w-[200px] rounded-lg bg-blue-500 px-5 py-3 text-white/90">
+                <h3 className="mb-3 text-white/90">Outcome</h3>
                 {market.categories?.[market.resolvedOutcome].name}
               </div>
             )}
@@ -545,7 +545,7 @@ const Votes = ({
             }`}
           >
             {showLeaderIndicator && isRevealed && index === 0 && (
-              <div className="absolute right-3 top-0 translate-y-[-50%] rounded-xl bg-green-400 px-2 text-xxs text-white">
+              <div className="absolute right-3 top-0 translate-y-[-50%] rounded-xl bg-green-400 px-2 text-xxs text-white/90">
                 Leading
               </div>
             )}
diff --git a/pages/court/index.tsx b/pages/court/index.tsx
index d83b6fac4..db806e75d 100644
--- a/pages/court/index.tsx
+++ b/pages/court/index.tsx
@@ -124,10 +124,10 @@ const CourtPage: NextPage = ({
             />
           </div>
           <div className="relative z-20">
-            <div className="mb-2 text-3xl font-bold text-white drop-shadow-lg">
+            <div className="mb-2 text-3xl font-bold text-white/90 drop-shadow-lg">
               Court
             </div>
-            <p className="mb-4 font-light text-white drop-shadow-lg md:max-w-[940px]">
+            <p className="mb-4 font-light text-white/90 drop-shadow-lg md:max-w-[940px]">
               Anyone can participate by joining the court system as a juror or
               delegator. As a juror, you are responsible for supplying the
               truthful outcome of a prediction market by voting and revealing
@@ -330,7 +330,7 @@ const CourtPage: NextPage = ({
 
       <Modal open={showPayoutsModal} onClose={() => setShowPayoutsModal(false)}>
         <Dialog.Panel className="mt-8 w-full max-w-[590px] overflow-hidden rounded-ztg-10 bg-white">
-          <div className=" bg-[#DC056C] px-4 py-6 text-white">
+          <div className=" bg-[#DC056C] px-4 py-6 text-white/90">
             <h2 className="mb-1 text-purple-950">Court Reward Payouts</h2>
             <p className="text-sm text-gray-200/80">
               All payouts made to{" "}
@@ -476,7 +476,7 @@ const Stats = () => {
             <label className="font text-sm text-purple-900">Cases</label>
             <div className="text-md font-mono font-semibold">
               {courtCases?.length} /{" "}
-              <span className="text-sm font-medium text-white">
+              <span className="text-sm font-medium text-white/90">
                 {activeCaseCount} active
               </span>
             </div>
diff --git a/pages/deposit.tsx b/pages/deposit.tsx
index 095d909b4..66279b414 100644
--- a/pages/deposit.tsx
+++ b/pages/deposit.tsx
@@ -275,7 +275,7 @@ const DotDeposit = ({ address }: { address: string }) => {
       </div>
       <FormTransactionButton
         loading={isLoading}
-        className="w-full rounded-none !bg-white !text-black disabled:bg-white disabled:text-white"
+        className="w-full rounded-none !bg-white !text-black disabled:bg-white disabled:text-white/90"
         disabled={isValid === false || isLoading}
         disableFeeCheck={true}
       >
diff --git a/pages/liquidity/[poolid].tsx b/pages/liquidity/[poolid].tsx
index 55012dbb0..57efc641c 100644
--- a/pages/liquidity/[poolid].tsx
+++ b/pages/liquidity/[poolid].tsx
@@ -53,7 +53,7 @@ const PoolDetail = ({
                   className="ml-ztg-10 inline cursor-pointer"
                 />
                 {hoveringInfo === true ? (
-                  <div className="absolute bottom-ztg-20 left-ztg-50 w-ztg-164 rounded-ztg-5 bg-ztg-primary-200 px-ztg-8 py-ztg-14 text-ztg-12-150 text-black  dark:bg-border-dark dark:text-white">
+                  <div className="absolute bottom-ztg-20 left-ztg-50 w-ztg-164 rounded-ztg-5 bg-ztg-primary-200 px-ztg-8 py-ztg-14 text-ztg-12-150 text-black  dark:bg-border-dark dark:text-white/90">
                     <div className="border-b-1 border-ztg-primary-600 pb-ztg-7 font-bold">
                       Total APR
                     </div>
diff --git a/pages/markets/[marketid].tsx b/pages/markets/[marketid].tsx
index ede5e130b..3674aa540 100644
--- a/pages/markets/[marketid].tsx
+++ b/pages/markets/[marketid].tsx
@@ -538,14 +538,14 @@ const Market: NextPage<MarketPageProps> = ({
               >
                 <Tab
                   key="chart"
-                  className="rounded-md bg-white/10 px-2 py-1 text-xs text-white/70 shadow-md backdrop-blur-sm ui-selected:bg-ztg-green-600/80 ui-selected:text-white sm:text-sm"
+                  className="rounded-md bg-white/10 px-2 py-1 text-xs text-white/70 shadow-md backdrop-blur-sm ui-selected:bg-ztg-green-600/80 ui-selected:text-white/90 sm:text-sm"
                 >
                   Chart
                 </Tab>
 
                 <Tab
                   key="twitch"
-                  className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 text-xs text-white/70 shadow-md backdrop-blur-sm ui-selected:bg-ztg-green-600/80 ui-selected:text-white sm:gap-2 sm:text-sm"
+                  className="flex items-center gap-1.5 rounded-md bg-white/10 px-2 py-1 text-xs text-white/70 shadow-md backdrop-blur-sm ui-selected:bg-ztg-green-600/80 ui-selected:text-white/90 sm:gap-2 sm:text-sm"
                 >
                   <FaTwitch size={14} className="sm:h-4 sm:w-4" />
                   <span className="whitespace-nowrap">Twitch Stream</span>
@@ -571,7 +571,7 @@ const Market: NextPage<MarketPageProps> = ({
                     <BsFillChatSquareTextFill
                       size={18}
                       className={
-                        showTwitchChat ? "text-ztg-green-400" : "text-white/50"
+                        showTwitchChat ? "text-ztg-green-500" : "text-white/50"
                       }
                     />
                   </div>
@@ -631,7 +631,7 @@ const Market: NextPage<MarketPageProps> = ({
             isOrdersLoading === false &&
             (orders?.length ?? 0) > 0 && (
               <div className="mt-8 rounded-lg bg-white/15 p-4 shadow-lg backdrop-blur-md">
-                <h3 className="mb-4 text-lg font-semibold text-white">
+                <h3 className="mb-4 text-lg font-semibold text-white/90">
                   My Orders
                 </h3>
                 <div className="overflow-hidden rounded-lg">
@@ -693,7 +693,7 @@ const Market: NextPage<MarketPageProps> = ({
 
           {marketHasPool === true && (
             <div className="mt-8 rounded-lg bg-white/15 p-3 shadow-lg backdrop-blur-md sm:p-4">
-                <h3 className="mb-3 text-base font-semibold text-white sm:mb-4 sm:text-lg">
+                <h3 className="mb-3 text-base font-semibold text-white/90 sm:mb-4 sm:text-lg">
                   Latest Trades
                 </h3>
                 <div className="pb-3 sm:pb-4">
@@ -993,7 +993,7 @@ const MobileContextButtons = ({
                   <div
                     className={`center h-full flex-1 border-r-2 border-white/10 transition-all ${
                       tradeItem?.action === "buy"
-                        ? "bg-ztg-green-600/90 text-white shadow-md backdrop-blur-md"
+                        ? "bg-ztg-green-600/90 text-white/90 shadow-md backdrop-blur-md"
                         : "bg-white/10 text-white/90 shadow-md backdrop-blur-md hover:bg-white/15"
                     } `}
                     onClick={() => {
@@ -1018,7 +1018,7 @@ const MobileContextButtons = ({
                   <div
                     className={`center h-full flex-1 transition-all ${
                       tradeItem?.action === "sell"
-                        ? "bg-red-600/90 text-white shadow-md backdrop-blur-md"
+                        ? "bg-red-600/90 text-white/90 shadow-md backdrop-blur-md"
                         : "bg-white/10 text-white/90 shadow-md backdrop-blur-md hover:bg-white/15"
                     }`}
                     onClick={() => {
@@ -1042,7 +1042,7 @@ const MobileContextButtons = ({
                   </div>
                 </>
               ) : (
-                <div className="center h-full w-full bg-white/10 text-white/60 shadow-md backdrop-blur-md">
+                <div className="center h-full w-full bg-white/10 text-white/90/60 shadow-md backdrop-blur-md">
                   Trading unavailable - No liquidity pool
                 </div>
               )
@@ -1051,7 +1051,7 @@ const MobileContextButtons = ({
                 <div
                   className={`center h-full flex-1 transition-all ${
                     !open
-                      ? "bg-ztg-green-600/90 text-white shadow-md backdrop-blur-md"
+                      ? "bg-ztg-green-600/90 text-white/90 shadow-md backdrop-blur-md"
                       : "bg-white/10 text-white/90 backdrop-blur-md hover:bg-white/15"
                   }`}
                   onClick={() => setOpen(!open)}
@@ -1063,7 +1063,7 @@ const MobileContextButtons = ({
               <div
                 className={`center h-full flex-1 transition-all ${
                   !open
-                    ? "bg-orange-600/90 text-white shadow-md backdrop-blur-md"
+                    ? "bg-orange-600/90 text-white/90 shadow-md backdrop-blur-md"
                     : "bg-white/10 text-white/90 shadow-md backdrop-blur-md hover:bg-white/15"
                 }`}
                 onClick={() => setOpen(!open)}
@@ -1096,23 +1096,23 @@ const DisputeForm = ({ market }: { market: FullMarketFragment }) => {
               <Disclosure.Button
                 className={`relative z-20 flex w-full items-center rounded-lg px-5 py-3 transition-all ${
                   !open
-                    ? "bg-gradient-to-r from-orange-400/80 to-orange-500/80 text-white shadow-md backdrop-blur-md"
-                    : "border-2 border-ztg-primary-200/30 bg-white/20 text-ztg-primary-800 shadow-md backdrop-blur-md text-white"
+                    ? "bg-gradient-to-r from-orange-400/80 to-orange-500/80 text-white/90 shadow-md backdrop-blur-md"
+                    : "border-2 border-ztg-primary-200/30 bg-white/20 text-ztg-primary-800 shadow-md backdrop-blur-md text-white/90"
                 }`}
               >
                 <h3
                   className={`flex-1 text-left text-base font-semibold ${
-                    open ? "text-white" : "text-white"
+                    open ? "text-white/90" : "text-white/90"
                   }`}
                 >
                   {open ? "Close" : "Market can be disputed"}
                 </h3>
                 {open ? (
-                  <X className="text-white" size={18} />
+                  <X className="text-white/90" size={18} />
                 ) : (
                   <FaChevronUp
                     size={18}
-                    className="rotate-180 justify-end text-white"
+                    className="rotate-180 justify-end text-white/90"
                   />
                 )}
               </Disclosure.Button>
@@ -1171,7 +1171,7 @@ const ReportForm = ({ market }: { market: FullMarketFragment }) => {
         <ReportResult market={market} outcome={reportedOutcome} />
       ) : (
         <>
-          <h4 className="mb-4 flex items-center gap-2 text-white">
+          <h4 className="mb-4 flex items-center gap-2 text-white/90">
             <AiOutlineFileAdd size={20} />
             <span className="font-semibold">Report Market Outcome</span>
           </h4>
@@ -1182,7 +1182,7 @@ const ReportForm = ({ market }: { market: FullMarketFragment }) => {
 
           {stage?.type === "OpenReportingPeriod" && (
             <>
-              <p className="-mt-3 mb-6 text-sm italic text-white/80">
+              <p className="-mt-3 mb-6 text-sm italic text-white/90">
                 Oracle failed to report. Reporting is now open to all.
               </p>
               <p className="mb-6 text-sm text-white/90">
@@ -1216,7 +1216,7 @@ const CourtCaseContext = ({ market }: { market: FullMarketFragment }) => {
 
   return (
     <div className="p-3 sm:p-4 md:p-5">
-      <h4 className="mb-3 flex items-center gap-2 font-semibold text-white">
+      <h4 className="mb-3 flex items-center gap-2 font-semibold text-white/90">
         <Image width={22} height={22} src="/icons/court.svg" alt="court" />
         <span>Market Court Case</span>
       </h4>
@@ -1229,7 +1229,7 @@ const CourtCaseContext = ({ market }: { market: FullMarketFragment }) => {
         disabled={!isFetched}
         onClick={() => router.push(`/court/${caseId}`)}
         onMouseEnter={() => router.prefetch(`/court/${caseId}`)}
-        className={`ztg-transition h-[56px] w-full rounded-full bg-gradient-to-r from-orange-400/80 to-orange-500/80 text-white shadow-md backdrop-blur-md transition-all hover:from-orange-500/80 hover:to-orange-600/80 hover:shadow-lg focus:outline-none disabled:cursor-default disabled:bg-ztg-primary-200/60 disabled:backdrop-blur-sm`}
+        className={`ztg-transition h-[56px] w-full rounded-full bg-gradient-to-r from-orange-400/80 to-orange-500/80 text-white/90 shadow-md backdrop-blur-md transition-all hover:from-orange-500/80 hover:to-orange-600/80 hover:shadow-lg focus:outline-none disabled:cursor-default disabled:bg-ztg-primary-200/60 disabled:backdrop-blur-sm`}
       >
         View Case
       </button>
diff --git a/pages/multi-market/[poolid].tsx b/pages/multi-market/[poolid].tsx
index 0af4a5fbe..35fa0c9ff 100644
--- a/pages/multi-market/[poolid].tsx
+++ b/pages/multi-market/[poolid].tsx
@@ -150,16 +150,16 @@ const ComboAssetDetails = ({
               style={{ backgroundColor: combination.color }}
             />
             <div className="flex flex-col gap-1">
-              <span className="font-semibold text-white">{combination.name}</span>
-              <div className="text-xxs leading-relaxed text-white/80">
+              <span className="font-semibold text-white/90">{combination.name}</span>
+              <div className="text-xxs leading-relaxed text-white/90">
                 <div>
                   <span className="font-semibold text-blue-400">Assume:</span>{" "}
                   <span className="font-bold text-blue-400">{market1Outcome}</span>,{" "}
                   {sourceMarkets[0].question}
                 </div>
                 <div>
-                  <span className="font-semibold text-ztg-green-400">Then:</span>{" "}
-                  <span className="font-bold text-ztg-green-400">{market2Outcome}</span>,{" "}
+                  <span className="font-semibold text-ztg-green-500">Then:</span>{" "}
+                  <span className="font-bold text-ztg-green-500">{market2Outcome}</span>,{" "}
                   {sourceMarkets[1].question}
                 </div>
               </div>
@@ -222,7 +222,7 @@ const CombinatorialTooltip = ({ children }: { children: React.ReactNode }) => {
   const tooltipContent = isHovered && mounted ? (
     createPortal(
       <div
-        className="pointer-events-none fixed z-[9999] w-80 rounded-lg border border-white/20 bg-ztg-primary-900/95 px-4 py-3 text-xs text-white shadow-xl backdrop-blur-lg"
+        className="pointer-events-none fixed z-[9999] w-80 rounded-lg border border-white/20 bg-ztg-primary-900/95 px-4 py-3 text-xs text-white/90 shadow-xl backdrop-blur-lg"
         style={{
           top: `${position.top}px`,
           left: `${position.left}px`,
@@ -230,7 +230,7 @@ const CombinatorialTooltip = ({ children }: { children: React.ReactNode }) => {
         }}
       >
         <div className="space-y-2">
-          <p className="font-semibold text-white">
+          <p className="font-semibold text-white/90">
             How Combinatorial Markets Work:
           </p>
           <p className="text-white/90">
@@ -239,7 +239,7 @@ const CombinatorialTooltip = ({ children }: { children: React.ReactNode }) => {
             combinations like: "Assuming outcome X happens in Market 1,
             THEN what happens in Market 2?"
           </p>
-          <p className="text-ztg-green-400">
+          <p className="text-ztg-green-500">
             Example: Assume "Trump wins" → Then "Bitcoin reaches $100k"
           </p>
         </div>
@@ -512,7 +512,7 @@ const MobileContextButtons = ({
           />
         ) : comboMarketIsResolved && virtualMarket ? (
           <div className="p-4 sm:p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">Redeem Your Tokens</h3>
+            <h3 className="mb-4 text-lg font-semibold text-white/90">Redeem Your Tokens</h3>
             <p className="mb-6 text-sm text-white/90">
               Both source markets have been resolved. Redeem your outcome tokens
               below.
@@ -554,7 +554,7 @@ const MobileContextButtons = ({
                         className="h-3 w-3 rounded-full flex-none"
                         style={{ backgroundColor: combo.color }}
                       />
-                      <span className="font-medium text-white">{combo.name}</span>
+                      <span className="font-medium text-white/90">{combo.name}</span>
                     </div>
                     <RedeemButton
                       market={virtualMarket}
@@ -567,7 +567,7 @@ const MobileContextButtons = ({
                   </div>
                 ))}
               <div className="mt-6 rounded-lg border border-white/10 bg-white/10 p-4 shadow-md backdrop-blur-sm">
-                <h4 className="mb-2 text-sm font-semibold text-white">
+                <h4 className="mb-2 text-sm font-semibold text-white/90">
                   To Get Your Collateral Back:
                 </h4>
                 <ol className="mb-3 ml-4 list-decimal space-y-1 text-sm text-white/90">
@@ -580,7 +580,7 @@ const MobileContextButtons = ({
                     → receive your collateral
                   </li>
                 </ol>
-                <p className="text-xs text-white/80">
+                <p className="text-xs text-white/90">
                   💡 <strong>Tip:</strong> Redeeming here is only the first
                   step. Visit Market 1 (the "Assume" market) to complete your
                   redemption and recover your collateral.
@@ -616,15 +616,15 @@ const MobileContextButtons = ({
         {childMarketResolved && virtualMarket && (
           <div className="p-4 sm:p-6">
             <div className="mb-3 flex items-center gap-2">
-              <div className="rounded-lg border border-ztg-green-400/40 bg-ztg-green-500/80 px-2 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm">
+              <div className="rounded-lg border border-ztg-green-400/40 bg-ztg-green-500/80 px-2 py-0.5 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm">
                 Partial Redemption
               </div>
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-lg font-semibold text-white/90">
                 Available
               </h3>
             </div>
             <p className="mb-4 text-sm leading-relaxed text-white/90">
-              <span className="font-semibold text-ztg-green-400">Market 2 ("Then" market)</span> has resolved. You can redeem tokens for{" "}
+              <span className="font-semibold text-ztg-green-500">Market 2 ("Then" market)</span> has resolved. You can redeem tokens for{" "}
               <span className="font-semibold text-blue-400">Market 1 ("Assume" market)</span> tokens and use those for trading.
             </p>
             <div className="space-y-3">
@@ -669,7 +669,7 @@ const MobileContextButtons = ({
                         className="h-3 w-3 rounded-full flex-none"
                         style={{ backgroundColor: combo.color }}
                       />
-                      <span className="text-sm font-medium text-white">{combo.name}</span>
+                      <span className="text-sm font-medium text-white/90">{combo.name}</span>
                     </div>
                     <RedeemButton
                       market={virtualMarket}
@@ -691,7 +691,7 @@ const MobileContextButtons = ({
             <div
               className={`center h-full flex-1 border-r-2 border-white/10 transition-all ${
                 currentAction === "buy"
-                  ? "bg-ztg-green-600/90 text-white shadow-md backdrop-blur-md"
+                  ? "bg-ztg-green-600/90 text-white/90 shadow-md backdrop-blur-md"
                   : "bg-white/10 text-white/90 shadow-md backdrop-blur-md hover:bg-white/15"
               }`}
               onClick={() => {
@@ -716,7 +716,7 @@ const MobileContextButtons = ({
             <div
               className={`center h-full flex-1 transition-all ${
                 currentAction === "sell"
-                  ? "bg-red-600/90 text-white shadow-md backdrop-blur-md"
+                  ? "bg-red-600/90 text-white/90 shadow-md backdrop-blur-md"
                   : "bg-white/10 text-white/90 shadow-md backdrop-blur-md hover:bg-white/15"
               }`}
               onClick={() => {
@@ -742,7 +742,7 @@ const MobileContextButtons = ({
         ) : comboMarketIsResolved ? (
           <div className="flex h-14 cursor-pointer text-base font-semibold sm:text-lg">
             <div
-              className="center h-full w-full bg-ztg-green-600/90 text-white shadow-md backdrop-blur-md transition-all"
+              className="center h-full w-full bg-ztg-green-600/90 text-white/90 shadow-md backdrop-blur-md transition-all"
               onClick={() => setOpen(!open)}
             >
               {open ? <X className="h-5 w-5" /> : "Redeem Tokens"}
@@ -751,7 +751,7 @@ const MobileContextButtons = ({
         ) : childMarketResolved ? (
           <div className="flex h-14 cursor-pointer text-base font-semibold sm:text-lg">
             <div
-              className="center h-full w-full bg-ztg-green-600/90 text-white shadow-md backdrop-blur-md transition-all"
+              className="center h-full w-full bg-ztg-green-600/90 text-white/90 shadow-md backdrop-blur-md transition-all"
               onClick={() => setShowPartialRedeem(!showPartialRedeem)}
             >
               {showPartialRedeem ? <X className="h-5 w-5" /> : "Redeem Tokens (Partial)"}
@@ -891,15 +891,15 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
               <div className="mb-6 flex items-center gap-2">
                 <Link
                   href="/markets?status=Active&ordering=Newest&liquidityOnly=true&marketType=multi"
-                  className="flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/10 px-2 py-1 text-sm font-medium text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white"
+                  className="flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/10 px-2 py-1 text-sm font-medium text-white/90 shadow-sm backdrop-blur-sm transition-all hover:bg-white/20 hover:text-white/90"
                 >
                   <ArrowLeft size={14} />
                   <span className="hidden sm:inline">Back</span>
                 </Link>
-                <div className="relative flex items-center gap-1.5 rounded-lg bg-ztg-primary-800/40 px-3 py-1 text-sm font-semibold text-white shadow-md backdrop-blur-sm">
+                <div className="relative flex items-center gap-1.5 rounded-lg bg-ztg-primary-800/40 px-3 py-1 text-sm font-semibold text-white/90 shadow-md backdrop-blur-sm">
                   <span className="font-bold">Combinatorial</span>
                   <CombinatorialTooltip>
-                    <Info size={14} className="cursor-help text-white/80" />
+                    <Info size={14} className="cursor-help text-white/90" />
                   </CombinatorialTooltip>
                 </div>
               </div>
@@ -945,7 +945,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
             isOrdersLoading === false &&
             (orders?.length ?? 0) > 0 && (
               <div className="mt-8 rounded-lg bg-white/15 p-4 shadow-lg backdrop-blur-md">
-                <h3 className="mb-4 text-lg font-semibold text-white">
+                <h3 className="mb-4 text-lg font-semibold text-white/90">
                   My Orders
                 </h3>
                 <div className="overflow-hidden rounded-lg">
@@ -996,7 +996,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
           {/* Latest Trades */}
           {marketHasPool && (
             <div className="mt-8 rounded-lg bg-white/15 p-3 shadow-lg backdrop-blur-md sm:p-4">
-              <h3 className="mb-3 text-base font-semibold text-white sm:mb-4 sm:text-lg">
+              <h3 className="mb-3 text-base font-semibold text-white/90 sm:mb-4 sm:text-lg">
                 Latest Trades
               </h3>
               <div className="pb-3 sm:pb-4">
@@ -1072,7 +1072,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
               </div>
             ) : comboMarketIsResolved ? (
               <div className="mb-12 rounded-lg bg-white/15 p-3 shadow-lg backdrop-blur-md sm:p-4 md:p-5">
-                <h3 className="mb-4 text-lg font-semibold text-white">
+                <h3 className="mb-4 text-lg font-semibold text-white/90">
                   Redeem Your Tokens
                 </h3>
                 <p className="mb-6 text-sm text-white/90">
@@ -1120,7 +1120,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
                             className="h-3 w-3 rounded-full flex-none"
                             style={{ backgroundColor: combo.color }}
                           />
-                          <span className="font-medium text-white">{combo.name}</span>
+                          <span className="font-medium text-white/90">{combo.name}</span>
                         </div>
                         <RedeemButton
                           market={virtualMarket}
@@ -1133,7 +1133,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
                       </div>
                     ))}
                   <div className="mt-6 rounded-lg border border-white/10 bg-white/10 p-4 shadow-md backdrop-blur-sm">
-                    <h4 className="mb-2 text-sm font-semibold text-white">
+                    <h4 className="mb-2 text-sm font-semibold text-white/90">
                       To Get Your Collateral Back:
                     </h4>
                     <ol className="mb-3 ml-4 list-decimal space-y-1 text-sm text-white/90">
@@ -1146,7 +1146,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
                         page → receive your collateral
                       </li>
                     </ol>
-                    <p className="text-xs text-white/80">
+                    <p className="text-xs text-white/90">
                       💡 <strong>Tip:</strong> Redeeming here is only the first
                       step. Visit Market 1 (the "Assume" market) to complete
                       your redemption and recover your collateral.
@@ -1157,15 +1157,15 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
             ) : childMarketResolved ? (
               <div className="mb-12 rounded-lg border-l-4 border-ztg-green-500/40 bg-white/15 p-3 shadow-lg backdrop-blur-md sm:p-4 md:p-5">
                 <div className="mb-3 flex items-center gap-2">
-                  <div className="rounded-lg border border-ztg-green-400/40 bg-ztg-green-500/80 px-2 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm">
+                  <div className="rounded-lg border border-ztg-green-400/40 bg-ztg-green-500/80 px-2 py-0.5 text-xs font-semibold text-white/90 shadow-sm backdrop-blur-sm">
                     Partial Redemption
                   </div>
-                  <h3 className="text-lg font-semibold text-white">
+                  <h3 className="text-lg font-semibold text-white/90">
                     Available
                   </h3>
                 </div>
                 <p className="mb-4 text-sm leading-relaxed text-white/90">
-                  <span className="font-semibold text-ztg-green-400">Market 2 ("Then" market)</span> has resolved. You can redeem tokens for{" "}
+                  <span className="font-semibold text-ztg-green-500">Market 2 ("Then" market)</span> has resolved. You can redeem tokens for{" "}
                   <span className="font-semibold text-blue-400">Market 1 ("Assume" market)</span> tokens and use those for trading.
                 </p>
                 <div className="space-y-3">
@@ -1210,7 +1210,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
                             className="h-3 w-3 rounded-full flex-none"
                             style={{ backgroundColor: combo.color }}
                           />
-                          <span className="text-sm font-medium text-white">
+                          <span className="text-sm font-medium text-white/90">
                             {combo.name}
                           </span>
                         </div>
@@ -1231,7 +1231,7 @@ const ComboMarket: NextPage<ComboMarketPageProps> = ({
                   className="mx-auto mb-3 text-orange-400"
                   size={32}
                 />
-                <h3 className="mb-2 text-lg font-semibold text-white">Trading Closed</h3>
+                <h3 className="mb-2 text-lg font-semibold text-white/90">Trading Closed</h3>
                 <p className="text-sm text-orange-400">
                   This combinatorial market is closed because one or more source
                   markets have ended.
diff --git a/pages/referendum-signal/widget/[refId].tsx b/pages/referendum-signal/widget/[refId].tsx
index 9cff46e90..4d876fa02 100644
--- a/pages/referendum-signal/widget/[refId].tsx
+++ b/pages/referendum-signal/widget/[refId].tsx
@@ -97,18 +97,18 @@ const ReferendumSignalWidget = () => {
         {/* Compact Header */}
         <div className="mb-3 flex items-center justify-between">
           <div className="flex items-center gap-1.5">
-            <h3 className="text-sm font-semibold text-white">
+            <h3 className="text-sm font-semibold text-white/90">
               Ref #{data.referendumId}
             </h3>
-            <div className="rounded bg-ztg-primary-800/40 px-1.5 py-0.5 text-xxs font-semibold text-white backdrop-blur-sm">
+            <div className="rounded bg-ztg-primary-800/40 px-1.5 py-0.5 text-xxs font-semibold text-white/90 backdrop-blur-sm">
               Futarchy
             </div>
           </div>
           {/* Volume in top right */}
           {combinatorial_market.volume && (
-            <div className="flex items-center gap-1 text-xxs text-white/80">
+            <div className="flex items-center gap-1 text-xxs text-white/90">
               <BarChart2 size={12} className="text-white/70" />
-              <span className="font-medium text-white">
+              <span className="font-medium text-white/90">
                 {parseFloat(combinatorial_market.volume).toFixed(0)} - ZTG
               </span>
             </div>
@@ -116,7 +116,7 @@ const ReferendumSignalWidget = () => {
         </div>
 
         {/* Compact Market Info - Inline */}
-        <div className="mb-3 space-y-1.5 text-xxs text-white/80">
+        <div className="mb-3 space-y-1.5 text-xxs text-white/90">
           <div className="flex items-start gap-1.5">
             <span className="font-semibold text-blue-300">Assume:</span>
             <a
@@ -129,12 +129,12 @@ const ReferendumSignalWidget = () => {
             </a>
           </div>
           <div className="flex items-start gap-1.5">
-            <span className="font-semibold text-ztg-green-400">Then:</span>
+            <span className="font-semibold text-ztg-green-500">Then:</span>
             <a
               href={`${process.env.NEXT_PUBLIC_SITE_URL || "https://app.zeitgeist.pm"}/markets/${combinatorial_market.market_2.marketId}`}
               target="_blank"
               rel="noopener noreferrer"
-              className="line-clamp-1 flex-1 transition-colors hover:text-ztg-green-300 hover:underline"
+              className="line-clamp-1 flex-1 transition-colors hover:text-ztg-green-500 hover:underline"
             >
               {combinatorial_market.market_2.question}
             </a>
@@ -145,10 +145,10 @@ const ReferendumSignalWidget = () => {
         {futarchy_signal.recommendation && (
           <div className="mb-3 rounded-lg border border-ztg-green-500/30 bg-white/10 p-2 shadow-sm backdrop-blur-sm">
             <div className="mb-1 flex items-center gap-1.5">
-              <Info size={12} className="text-ztg-green-400" />
-              <span className="text-xxs font-semibold text-white">Signal</span>
+              <Info size={12} className="text-ztg-green-500" />
+              <span className="text-xxs font-semibold text-white/90">Signal</span>
             </div>
-            <div className="text-xs font-bold text-ztg-green-400">
+            <div className="text-xs font-bold text-ztg-green-500">
               {futarchy_signal.recommendation}
             </div>
             {futarchy_signal.confidence && (
@@ -172,10 +172,10 @@ const ReferendumSignalWidget = () => {
                 style={{ borderLeftColor: color }}
               >
                 <div className="mb-1 flex items-center justify-between">
-                  <span className="text-xxs font-medium text-white line-clamp-1">
+                  <span className="text-xxs font-medium text-white/90 line-clamp-1">
                     {outcome.combination}
                   </span>
-                  <span className="ml-2 text-xs font-bold text-white">
+                  <span className="ml-2 text-xs font-bold text-white/90">
                     {probabilityPercent}%
                   </span>
                 </div>
@@ -197,7 +197,7 @@ const ReferendumSignalWidget = () => {
         {sortedOutcomes.length > 1 && (
           <button
             onClick={() => setShowAllOutcomes(!showAllOutcomes)}
-            className="mb-2 flex w-full items-center justify-center gap-1 rounded bg-white/10 px-2 py-1 text-xxs font-medium text-white/80 transition-all hover:bg-white/15 hover:text-white"
+            className="mb-2 flex w-full items-center justify-center gap-1 rounded bg-white/10 px-2 py-1 text-xxs font-medium text-white/90 transition-all hover:bg-white/15 hover:text-white/90"
           >
             {showAllOutcomes ? (
               <>
@@ -217,7 +217,7 @@ const ReferendumSignalWidget = () => {
             href={combinatorial_market.pool_url}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex w-full items-center justify-center gap-1.5 rounded-lg bg-ztg-green-600/90 px-3 py-1.5 text-xxs font-semibold text-white transition-all hover:bg-ztg-green-600 shadow-sm backdrop-blur-sm"
+            className="inline-flex w-full items-center justify-center gap-1.5 rounded-lg bg-ztg-green-600/90 px-3 py-1.5 text-xxs font-semibold text-white/90 transition-all hover:bg-ztg-green-600 shadow-sm backdrop-blur-sm"
           >
             Trade on Zeitgeist
             <ExternalLink size={11} />
@@ -232,7 +232,7 @@ const ReferendumSignalWidget = () => {
     return (
       <div className="w-full max-w-md rounded-lg border border-white/20 bg-white/10 p-3 shadow-lg backdrop-blur-lg">
         <div className="mb-3">
-          <h3 className="text-sm font-semibold text-white">
+          <h3 className="text-sm font-semibold text-white/90">
             Ref #{data.referendumId} Markets
           </h3>
         </div>
@@ -248,7 +248,7 @@ const ReferendumSignalWidget = () => {
             >
               <div className="flex items-start justify-between gap-2">
                 <div className="flex-1 min-w-0">
-                  <div className="line-clamp-2 text-xxs font-medium text-white">
+                  <div className="line-clamp-2 text-xxs font-medium text-white/90">
                     {market.question}
                   </div>
                   <div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-xxs text-white/70">
@@ -261,7 +261,7 @@ const ReferendumSignalWidget = () => {
                 </div>
                 <ExternalLink
                   size={12}
-                  className="flex-shrink-0 text-white/60 transition-colors hover:text-white"
+                  className="flex-shrink-0 text-white/90/60 transition-colors hover:text-white/90"
                 />
               </div>
             </a>
@@ -275,7 +275,7 @@ const ReferendumSignalWidget = () => {
               href="https://app.zeitgeist.pm"
               target="_blank"
               rel="noopener noreferrer"
-              className="font-semibold text-ztg-green-400 transition-colors hover:text-ztg-green-300"
+              className="font-semibold text-ztg-green-500 transition-colors hover:text-ztg-green-500"
             >
               Zeitgeist
             </a>
diff --git a/pages/search.tsx b/pages/search.tsx
index eb9392c78..7a41c0b38 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -55,7 +55,7 @@ const SearchPage: NextPage = () => {
                   {market.question}
                 </div>
                 <div
-                  className={`ml-auto w-16 rounded-md px-2 py-1 text-center text-xs text-white ${
+                  className={`ml-auto w-16 rounded-md px-2 py-1 text-center text-xs text-white/90 ${
                     market.status === MarketStatus.Active
                       ? "bg-green-400"
                       : "bg-gray-400"
diff --git a/styles/index.css b/styles/index.css
index 4c8c99cc1..256b19f68 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -134,7 +134,7 @@ input[type="number"] {
 
 /* Write your own custom component styles here */
 .btn-blue {
-  @apply rounded bg-blue-500 px-4 py-2 font-bold text-white;
+  @apply rounded bg-blue-500 px-4 py-2 font-bold text-white/90;
 }
 
 /* Start purging... */
@@ -244,7 +244,7 @@ h6 {
 
 .status-color-all {
   @apply bg-black;
-  @apply text-white;
+  @apply text-white/90;
 }
 
 .status-color-proposed {
@@ -280,7 +280,7 @@ h6 {
 .card .card-status {
   font-size: 0.625rem;
   line-height: 1.5;
-  @apply text-white;
+  @apply text-white/90;
 }
 
 .card .card-title {
diff --git a/wsx-build.sh b/wsx-build.sh
deleted file mode 100644
index 485d92e43..000000000
--- a/wsx-build.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
-
-if [[ "$VERCEL_GIT_COMMIT_REF" == "wsx" || "$VERCEL_GIT_COMMIT_REF" == "wsx-staging"  ]] ; then
-  # Proceed with the build
-  echo "✅ - Build can proceed"
-  exit 1;
-
-else
-  # Don't build
-  echo "🛑 - Build cancelled"
-  exit 0;
-fi
\ No newline at end of file
diff --git a/ztg-build.sh b/ztg-build.sh
deleted file mode 100644
index 362b461c9..000000000
--- a/ztg-build.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
-
-if [[ "$VERCEL_GIT_COMMIT_REF" == "wsx" || "$VERCEL_GIT_COMMIT_REF" == "wsx-staging"  ]] ; then
-  # Don't build
-  echo "🛑 - Build cancelled"
-  exit 0;
-
-else
-  # Proceed with the build
-  echo "✅ - Build can proceed"
-  exit 1;
-fi
\ No newline at end of file