diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx
index 7268ae92ad..b9a2ff0c3f 100644
--- a/src/internal/svg/baseNameSvg.tsx
+++ b/src/internal/svg/baseNameSvg.tsx
@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const baseNameSvg = (
   <svg
     data-testid="ockbaseNameSvg"
@@ -12,11 +14,11 @@ export const baseNameSvg = (
   >
     <path
       d="M11.75 3.75C11.75 5.82107 10.0711 7.5 8 7.5C5.92893 7.5 4.25 5.82107 4.25 3.75C4.25 1.67893 5.92893 0 8 0C10.0711 0 11.75 1.67893 11.75 3.75Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
     <path
       d="M10.99 8.01001C12.21 8.04001 13.3 8.80001 13.73 9.95001L16 16H0L2.27 9.95001C2.7 8.80001 3.79 8.03001 5.01 8.01001C5.05 8.04001 6.37 9.00001 8 9.00001C9.63 9.00001 10.95 8.04001 10.99 8.01001Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
   </svg>
 );
diff --git a/src/internal/svg/closeSvg.tsx b/src/internal/svg/closeSvg.tsx
index 6f7c8844b7..29d3cce10b 100644
--- a/src/internal/svg/closeSvg.tsx
+++ b/src/internal/svg/closeSvg.tsx
@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const closeSvg = (
   <svg
     width="16"
@@ -9,7 +11,7 @@ export const closeSvg = (
     <title>Close SVG</title>
     <path
       d="M2.14921 1L1 2.1492L6.8508 8L1 13.8508L2.1492 15L8 9.1492L13.8508 15L15 13.8508L9.14921 8L15 2.1492L13.8508 1L8 6.8508L2.14921 1Z"
-      fill="#030712"
+      className={fill.defaultReverse}
     />
   </svg>
 );
diff --git a/src/internal/svg/defaultAvatarSVG.tsx b/src/internal/svg/defaultAvatarSVG.tsx
index 9368202dbc..05a4ef09dd 100644
--- a/src/internal/svg/defaultAvatarSVG.tsx
+++ b/src/internal/svg/defaultAvatarSVG.tsx
@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const defaultAvatarSVG = (
   <svg
     data-testid="ockAvatarDefaultSvg"
@@ -12,7 +14,7 @@ export const defaultAvatarSVG = (
   >
     <path
       d="M20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40ZM25.6641 13.9974C25.6641 10.8692 23.1282 8.33333 20.0001 8.33333C16.8719 8.33333 14.336 10.8692 14.336 13.9974C14.336 17.1256 16.8719 19.6615 20.0001 19.6615C23.1282 19.6615 25.6641 17.1256 25.6641 13.9974ZM11.3453 23.362L9.53476 28.1875C12.2141 30.8475 15.9019 32.493 19.974 32.5H20.026C24.0981 32.493 27.7859 30.8475 30.4653 28.1874L28.6547 23.362C28.0052 21.625 26.3589 20.4771 24.5162 20.4318C24.4557 20.4771 22.462 21.9271 20 21.9271C17.538 21.9271 15.5443 20.4771 15.4839 20.4318C13.6412 20.462 11.9948 21.625 11.3453 23.362Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
   </svg>
 );
diff --git a/src/internal/svg/disconnectSvg.tsx b/src/internal/svg/disconnectSvg.tsx
index 49d2c7ce96..9899ba7532 100644
--- a/src/internal/svg/disconnectSvg.tsx
+++ b/src/internal/svg/disconnectSvg.tsx
@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const disconnectSvg = (
   <svg
     role="img"
@@ -10,11 +12,11 @@ export const disconnectSvg = (
   >
     <path
       d="M10.9735 2.69696L10.9735 4.52272L5.49622 4.52272L5.49622 15.4773L10.9735 15.4773L10.9735 17.303L3.67046 17.303L3.67046 2.69696L10.9735 2.69696Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
     <path
       d="M13.4614 13.5207L16.7804 10.0235L13.4783 6.34848L12.1202 7.56872L13.4931 9.09667L7.32216 9.09667L7.32216 10.9224L13.4102 10.9224L12.1371 12.2639L13.4614 13.5207Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
   </svg>
 );
diff --git a/src/internal/svg/walletSvg.tsx b/src/internal/svg/walletSvg.tsx
index 20610b095e..5852e05ec4 100644
--- a/src/internal/svg/walletSvg.tsx
+++ b/src/internal/svg/walletSvg.tsx
@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const walletSvg = (
   <svg
     role="img"
@@ -12,7 +14,7 @@ export const walletSvg = (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M0 10C0 15.5222 4.47778 20 10 20C15.5222 20 20 15.5222 20 10C20 4.47778 15.5222 0 10 0C4.47778 0 0 4.47778 0 10ZM7.44444 6.77778C7.075 6.77778 6.77778 7.075 6.77778 7.44444V12.5556C6.77778 12.925 7.075 13.2222 7.44444 13.2222H12.5556C12.925 13.2222 13.2222 12.925 13.2222 12.5556V7.44444C13.2222 7.075 12.925 6.77778 12.5556 6.77778H7.44444Z"
-      fill="#030712"
+      className={fill.defaultReverse}
     />
   </svg>
 );
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index ac50c10e4d..8f2601cff9 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -74,7 +74,7 @@ export function SwapAmountInput({
       className={cn(
         background.alternate,
         'box-border flex w-full flex-col items-start',
-        'rounded-md border-b border-solid p-4',
+        'rounded-md p-4',
         className,
       )}
       data-testid="ockSwapAmountInput_Container"
diff --git a/src/swap/components/SwapToggleButton.tsx b/src/swap/components/SwapToggleButton.tsx
index 0ea2ed4132..d85d38ede1 100644
--- a/src/swap/components/SwapToggleButton.tsx
+++ b/src/swap/components/SwapToggleButton.tsx
@@ -1,4 +1,4 @@
-import { cn, pressable } from '../../styles/theme';
+import { border, cn, fill, pressable } from '../../styles/theme';
 import type { SwapToggleButtonReact } from '../types';
 import { useSwapContext } from './SwapProvider';
 
@@ -16,7 +16,7 @@ const toggleIcon = (
     <g clipPath="url(#clip0_2077_4627)">
       <path
         d="M14.5659 4.93434L13.4345 6.06571L11.8002 4.43139L11.8002 10.75L10.2002 10.75L10.2002 4.43139L8.56592 6.06571L7.43455 4.93434L11.0002 1.36865L14.5659 4.93434ZM8.56592 12.0657L5.00023 15.6314L1.43455 12.0657L2.56592 10.9343L4.20023 12.5687L4.20023 6.25002L5.80023 6.25002L5.80023 12.5687L7.43455 10.9343L8.56592 12.0657Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </g>
     <defs>
@@ -40,9 +40,10 @@ export function SwapToggleButton({ className }: SwapToggleButtonReact) {
       type="button"
       className={cn(
         pressable.alternate,
+        border.default,
         '-translate-x-2/4 -translate-y-2/4 absolute top-2/4 left-2/4',
         'flex h-12 w-12 items-center justify-center',
-        'rounded-lg border-4 border-gray-100 border-solid',
+        'rounded-lg border-4 border-solid',
         className,
       )}
       data-testid="SwapTokensButton"
diff --git a/src/token/components/SearchIcon.tsx b/src/token/components/SearchIcon.tsx
index 9c0d23eb44..189b074a63 100644
--- a/src/token/components/SearchIcon.tsx
+++ b/src/token/components/SearchIcon.tsx
@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export function SearchIcon() {
   return (
     <svg
@@ -11,7 +13,7 @@ export function SearchIcon() {
     >
       <path
         d="M16 14.23L11.89 10.12C12.59 9.09 13 7.84 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C7.84 13 9.09 12.59 10.13 11.89L14.23 16L16 14.23ZM6.5 10.5C4.29 10.5 2.5 8.71 2.5 6.5C2.5 4.29 4.29 2.5 6.5 2.5C8.71 2.5 10.5 4.29 10.5 6.5C10.5 8.71 8.71 10.5 6.5 10.5Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </svg>
   );
diff --git a/src/token/components/TokenSelectButton.tsx b/src/token/components/TokenSelectButton.tsx
index 5b85ef177c..5e87903d05 100644
--- a/src/token/components/TokenSelectButton.tsx
+++ b/src/token/components/TokenSelectButton.tsx
@@ -1,5 +1,5 @@
 import { type ForwardedRef, forwardRef } from 'react';
-import { cn, pressable, text } from '../../styles/theme';
+import { cn, fill, pressable, text } from '../../styles/theme';
 import type { TokenSelectButtonReact } from '../types';
 import { TokenImage } from './TokenImage';
 
@@ -17,7 +17,7 @@ function CaretUp() {
     >
       <path
         d="M3.05329 10.9866L7.99996 6.03997L12.9466 10.9866L14.1266 9.80663L7.99996 3.67997L1.87329 9.80663L3.05329 10.9866Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </svg>
   );
@@ -37,7 +37,7 @@ function CaretDown() {
     >
       <path
         d="M12.95 4.85999L8.00001 9.80999L3.05001 4.85999L1.64001 6.27999L8.00001 12.64L14.36 6.27999L12.95 4.85999Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </svg>
   );
diff --git a/src/transaction/components/TransactionButton.tsx b/src/transaction/components/TransactionButton.tsx
index 2f71579de1..0ea65b44b4 100644
--- a/src/transaction/components/TransactionButton.tsx
+++ b/src/transaction/components/TransactionButton.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Spinner } from '../../internal/components/Spinner';
 import { checkmarkSvg } from '../../internal/svg/checkmarkSvg';
-import { background, cn, pressable, text } from '../../styles/theme';
+import { background, cn, color, pressable, text } from '../../styles/theme';
 import type { TransactionButtonReact } from '../types';
 import { isSpinnerDisplayed } from '../utils';
 import { useTransactionContext } from './TransactionProvider';
@@ -72,7 +72,9 @@ export function TransactionButton({
       {displaySpinner ? (
         <Spinner />
       ) : (
-        <span className={cn(text.headline, 'flex justify-center text-inverse')}>
+        <span
+          className={cn(text.headline, color.inverse, 'flex justify-center')}
+        >
           {buttonContent}
         </span>
       )}