diff --git a/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx b/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx
index d8f019d6..aae86931 100644
--- a/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx
+++ b/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx
@@ -424,7 +424,7 @@ export function AnySpendDeposit({
                   key={i}
                   className={
                     depositClasses?.skeletonItem ||
-                    "border-border-primary flex items-center justify-between rounded-xl border p-4"
+                    "border-border-secondary flex items-center justify-between rounded-xl border p-4"
                   }
                 >
                   <div className="flex items-center gap-3">
@@ -449,7 +449,7 @@ export function AnySpendDeposit({
                   onClick={() => handleSelectChain(chain.id)}
                   className={
                     depositClasses?.chainButton ||
-                    "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                    "anyspend-deposit-chain-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
                   }
                 >
                   <div className={depositClasses?.chainContent || "anyspend-deposit-chain-content"}>
@@ -489,7 +489,7 @@ export function AnySpendDeposit({
               onClick={handleSelectCrypto}
               className={
                 depositClasses?.cryptoButton ||
-                "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
               }
             >
               <div className={depositClasses?.optionContent || "anyspend-deposit-option-content"}>
@@ -531,7 +531,7 @@ export function AnySpendDeposit({
               onClick={handleSelectQrDeposit}
               className={
                 depositClasses?.qrButton ||
-                "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
               }
             >
               <div
@@ -566,7 +566,7 @@ export function AnySpendDeposit({
               onClick={handleSelectFiat}
               className={
                 depositClasses?.fiatButton ||
-                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
+                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
               }
             >
               <div
diff --git a/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx b/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
index a72f1756..3db08cde 100644
--- a/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
+++ b/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
@@ -19,7 +19,7 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
 
   return (
     <>
-      <ModalHeader title="Order History" showCloseButton={false} handleBack={onBack} className="w-full">
+      <ModalHeader title="Order History" showCloseButton={false} handleBack={onBack} className="w-full bg-transparent">
         <Button
           variant="ghost"
           size="icon"
diff --git a/packages/sdk/src/styles/index.css b/packages/sdk/src/styles/index.css
index 68194a68..27c72f0c 100644
--- a/packages/sdk/src/styles/index.css
+++ b/packages/sdk/src/styles/index.css
@@ -179,8 +179,10 @@
   --fg-quaternary: #a0a0ab;
 }
 
+html.dark .b3-root,
 html[data-theme="dark"] .b3-root,
-.b3-root[data-theme="dark"] {
+.b3-root[data-theme="dark"],
+.b3-root.dark {
   /* Dark theme variables */
   --b3-react-background: 0 0% 10%;
   --b3-react-foreground: 0 0% 90%;