diff --git a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx
index 0534be891b..23636b2716 100644
--- a/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx
+++ b/apps/hubble-stats/components/KeyMetricItem/KeyMetricItem.tsx
@@ -12,7 +12,13 @@ const KeyMetricItem: FC<MetricItemProps> = ({
   changeRate,
 }) => {
   return (
-    <div className="table-cell px-4 py-2 space-y-2 w-1/4 border-x border-mono-40 dark:border-mono-160 first-of-type:border-l-0 last-of-type:border-r-0">
+    <div
+      className={cx(
+        'w-1/4 table-cell px-4 py-2 space-y-2',
+        'border-x border-mono-40 dark:border-mono-160',
+        'first-of-type:border-l-0 last-of-type:border-r-0'
+      )}
+    >
       <Typography variant="body1" className="text-mono-140 dark:text-mono-40">
         {title}
       </Typography>
diff --git a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts
index 8c87782da1..e1db285fc8 100644
--- a/apps/hubble-stats/components/ShieldedPoolsTable/types.ts
+++ b/apps/hubble-stats/components/ShieldedPoolsTable/types.ts
@@ -7,7 +7,7 @@ export interface ShieldedPoolType {
   token: number;
   deposits24h: number;
   tvl: number;
-  typedChainIds: string[];
+  typedChainIds: number[];
 }
 
 export interface ShieldedPoolsTableProps {
diff --git a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
index e8023e8ef6..de097005c9 100644
--- a/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
+++ b/apps/hubble-stats/containers/KeyMetricsTableContainer/KeyMetricsTableContainer.tsx
@@ -1,10 +1,17 @@
 import { FC } from 'react';
+import cx from 'classnames';
 
 import { KeyMetricItem } from '../../components';
 
 const KeyMetricsTableContainer: FC = () => {
   return (
-    <div className="w-full rounded-lg overflow-hidden border-2 border-mono-0 dark:border-mono-160 bg-glass dark:bg-glass_dark">
+    <div
+      className={cx(
+        'w-full rounded-lg overflow-hidden',
+        'bg-glass dark:bg-glass_dark',
+        'border-2 border-mono-0 dark:border-mono-160'
+      )}
+    >
       {/* Tablet and Desktop */}
       <div className="w-full hidden md:table table-fixed border-collapse">
         <KeyMetricItem title="Total Transactions" />
diff --git a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx
index 95d4708f58..307b1e316c 100644
--- a/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx
+++ b/apps/hubble-stats/containers/PoolOverviewContainer/PoolOverviewContainer.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import cx from 'classnames';
 import { Typography } from '@webb-tools/webb-ui-components';
 import { shortenHex } from '@webb-tools/webb-ui-components/utils';
 import {
@@ -25,7 +26,13 @@ const PoolOverviewContainer: FC<{ poolOverviewData?: PoolOverviewType }> = ({
   poolOverviewData = undefined,
 }) => {
   return (
-    <div className="w-full space-y-4 p-6 rounded-lg border-2 border-mono-0 dark:border-mono-160 bg-glass dark:bg-glass_dark">
+    <div
+      className={cx(
+        'w-full space-y-4 p-6 rounded-lg',
+        'bg-glass dark:bg-glass_dark',
+        'border-2 border-mono-0 dark:border-mono-160'
+      )}
+    >
       <div className="flex flex-col items-center gap-1">
         {/* Icon */}
         <ShieldedAssetLight