diff --git a/client/src/ui/components/trading/MarketModal.tsx b/client/src/ui/components/trading/MarketModal.tsx
index 09d174118..bd24a8b03 100644
--- a/client/src/ui/components/trading/MarketModal.tsx
+++ b/client/src/ui/components/trading/MarketModal.tsx
@@ -1,3 +1,4 @@
+import { useGetBanks } from "@/hooks/helpers/useBanks";
 import { useEntities } from "@/hooks/helpers/useEntities";
 import { useSetMarket } from "@/hooks/helpers/useTrade";
 import useMarketStore from "@/hooks/store/useMarketStore";
@@ -14,7 +15,6 @@ import { HintModal } from "../hints/HintModal";
 import { ModalContainer } from "../ModalContainer";
 import { MarketOrderPanel, MarketResource } from "./MarketOrderPanel";
 import { MarketTradingHistory } from "./MarketTradingHistory";
-import { useGetBanks } from "@/hooks/helpers/useBanks";
 import { TransferBetweenEntities } from "./TransferBetweenEntities";
 
 export const MarketModal = () => {
@@ -86,14 +86,14 @@ export const MarketModal = () => {
 
   return (
     <ModalContainer>
-      <div className="container border mx-auto  grid grid-cols-12 bg-brown border-gold/30 clip-angled h-full row-span-12 ">
+      <div className="container border mx-auto  grid grid-cols-12 bg-black/90 bg-hex-bg border-gold/30 clip-angled h-full row-span-12 ">
         <div className="col-span-12  p-2 flex justify-between row-span-2">
           <div className="self-center text-xl">
             <Select value={realmEntityId.toString()} onValueChange={(trait) => setRealmEntityId(BigInt(trait))}>
               <SelectTrigger className="w-[180px]">
                 <SelectValue placeholder="Select Realm" />
               </SelectTrigger>
-              <SelectContent className="bg-brown ">
+              <SelectContent className="bg-black/90 bg-hex-bg">
                 {playerRealms().map((realm, index) => (
                   <SelectItem key={index} value={realm.entity_id?.toString() || ""}>
                     {realm.name}
diff --git a/client/src/ui/modules/military/battle-view/TopScreenView.tsx b/client/src/ui/modules/military/battle-view/TopScreenView.tsx
index 50877d754..71c360044 100644
--- a/client/src/ui/modules/military/battle-view/TopScreenView.tsx
+++ b/client/src/ui/modules/military/battle-view/TopScreenView.tsx
@@ -16,9 +16,11 @@ export const TopScreenView = () => {
       animate="visible"
       exit="hidden"
     >
-      <div className="mx-auto bg-brown text-gold text-2xl  p-4 flex flex-col w-72 text-center clip-angled ">
+      <div className="mx-auto bg-black/80 bg-hex-bg text-gold text-2xl p-4 flex flex-col w-72 text-center clip-angled ">
         <div className="mb-4">Battle!</div>
-        <Button onClick={() => setBattleView(null)}>exit battle view</Button>
+        <Button className="bg-gold/20 text-white" onClick={() => setBattleView(null)}>
+          exit battle view
+        </Button>
       </div>
     </motion.div>
   );