diff --git a/src/components/dashboard/OrderbookDepth.tsx b/src/components/dashboard/OrderbookDepth.tsx
index 7c5ba9d..10a83fb 100644
--- a/src/components/dashboard/OrderbookDepth.tsx
+++ b/src/components/dashboard/OrderbookDepth.tsx
@@ -20,15 +20,11 @@ import { useMiners } from '../../api';
 import { FONTS } from '../../theme';
 import { OrderbookDepthSkeleton } from './Skeletons';
 
-const OrderbookDepth: React.FC = () => {
+const BtcIcon: React.FC<{ size?: number }> = ({ size = 16 }) => {
   const theme = useTheme();
-
-  const TAO_COLOR = theme.palette.asset.tao;
-  const BTC_COLOR = theme.palette.asset.btc;
-
-  const BtcIcon = ({ size = 16 }: { size?: number }) => (
+  return (
     <svg viewBox="0 0 32 32" width={size} height={size}>
-      <circle cx="16" cy="16" r="16" fill={BTC_COLOR} />
+      <circle cx="16" cy="16" r="16" fill={theme.palette.asset.btc} />
       <path
         fill={theme.palette.common.white}
         fillRule="evenodd"
@@ -36,52 +32,61 @@ const OrderbookDepth: React.FC = () => {
       />
     </svg>
   );
+};
 
-  const TaoIcon = ({ size = 16, color }: { size?: number; color?: string }) => (
+const TaoIcon: React.FC<{ size?: number; color?: string }> = ({
+  size = 16,
+  color,
+}) => {
+  const theme = useTheme();
+  const fill = color ?? theme.palette.asset.tao;
+  return (
     <svg viewBox="0 0 21.6 23.1" width={size} height={size}>
       <path
-        fill={color || TAO_COLOR}
+        fill={fill}
         d="M13.1,17.7V8.3c0-2.4-1.9-4.3-4.3-4.3v15.1c0,2.2,1.7,4,3.9,4c0.1,0,0.1,0,0.2,0c1,0.1,2.1-0.2,2.9-0.9C13.3,22,13.1,20.5,13.1,17.7L13.1,17.7z"
       />
       <path
-        fill={color || TAO_COLOR}
+        fill={fill}
         d="M3.9,0C1.8,0,0,1.8,0,4h17.6c2.2,0,3.9-1.8,3.9-4C21.6,0,3.9,0,3.9,0z"
       />
     </svg>
   );
+};
 
-  const AssetIcon = ({
-    asset,
-    size = 16,
-  }: {
-    asset: string;
-    size?: number;
-  }) => {
-    if (asset.toUpperCase() === 'BTC') return <BtcIcon size={size} />;
-    return (
-      <Box
+const AssetIcon: React.FC<{ asset: string; size?: number }> = ({
+  asset,
+  size = 16,
+}) => {
+  const theme = useTheme();
+  if (asset.toUpperCase() === 'BTC') return <BtcIcon size={size} />;
+  return (
+    <Box
+      sx={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        backgroundColor: theme.palette.text.secondary,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography
         sx={{
-          width: size,
-          height: size,
-          borderRadius: '50%',
-          backgroundColor: theme.palette.text.secondary,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          fontSize: size * 0.6,
+          color: theme.palette.background.paper,
+          fontWeight: 'bold',
         }}
       >
-        <Typography
-          sx={{
-            fontSize: size * 0.6,
-            color: theme.palette.background.paper,
-            fontWeight: 'bold',
-          }}
-        >
-          {asset[0]?.toUpperCase()}
-        </Typography>
-      </Box>
-    );
-  };
+        {asset[0]?.toUpperCase()}
+      </Typography>
+    </Box>
+  );
+};
+
+const OrderbookDepth: React.FC = () => {
+  const theme = useTheme();
 
   const headerSx = {
     fontFamily: FONTS.mono,
@@ -370,9 +375,9 @@ const OrderbookDepth: React.FC = () => {
               };
 
               const assetThemeColor = isBtc
-                ? BTC_COLOR
+                ? theme.palette.asset.btc
                 : theme.palette.primary.main;
-              const taoThemeColor = TAO_COLOR;
+              const taoThemeColor = theme.palette.asset.tao;
 
               const leftGradColor = hexToRgba(assetThemeColor, 0.1);
               const rightGradColor =