diff --git a/libs/deal-ticket/src/deal-ticket.spec.tsx b/libs/deal-ticket/src/deal-ticket.spec.tsx
index 902e9e80e..16b84a6f5 100644
--- a/libs/deal-ticket/src/deal-ticket.spec.tsx
+++ b/libs/deal-ticket/src/deal-ticket.spec.tsx
@@ -46,7 +46,7 @@ const transactionStatus = 'default';
 
 function generateJsx() {
   return (
-    <VegaWalletContext.Provider value={{} as any}>
+    <VegaWalletContext.Provider value={{} as never}>
       <DealTicket
         defaultOrder={order}
         market={market}
diff --git a/libs/network-stats/src/components/good-threshold-indicator/good-threshold-indicator.tsx b/libs/network-stats/src/components/good-threshold-indicator/good-threshold-indicator.tsx
deleted file mode 100644
index 0e7d517c2..000000000
--- a/libs/network-stats/src/components/good-threshold-indicator/good-threshold-indicator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { value, goodThreshold } from '../../config/types';
-
-interface GoodThresholdIndicatorProps {
-  goodThreshold: goodThreshold | undefined;
-  value: value;
-}
-
-export const GoodThresholdIndicator = ({
-  goodThreshold,
-  value,
-}: GoodThresholdIndicatorProps) => {
-  return (
-    <div
-      className={`inline-block w-8 h-8 mb-[0.15rem] mr-8 rounded ${
-        (goodThreshold &&
-          (goodThreshold(value) ? 'bg-intent-success' : 'bg-intent-danger')) ||
-        'bg-current'
-      }`}
-    />
-  );
-};
diff --git a/libs/network-stats/src/components/good-threshold-indicator/index.ts b/libs/network-stats/src/components/good-threshold-indicator/index.ts
deleted file mode 100644
index 6ffd483b7..000000000
--- a/libs/network-stats/src/components/good-threshold-indicator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { GoodThresholdIndicator } from './good-threshold-indicator';
diff --git a/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx b/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx
index 8e1fe15b4..e7559eff3 100644
--- a/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx
+++ b/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx
@@ -1,7 +1,8 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
 import { defaultFieldFormatter } from '../table-row';
-import { GoodThresholdIndicator } from '../good-threshold-indicator';
+import { Card, Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
+import { useMemo } from 'react';
 
 export const PromotedStatsItem = ({
   title,
@@ -10,17 +11,26 @@ export const PromotedStatsItem = ({
   value,
   description,
 }: StatFields) => {
+  const variant = useMemo(
+    () =>
+      goodThreshold
+        ? goodThreshold(value)
+          ? TailwindIntents.Success
+          : TailwindIntents.Danger
+        : TailwindIntents.Highlight,
+    [goodThreshold, value]
+  );
   return (
     <Tooltip description={description} align="start">
-      <div className="px-24 py-16 pr-64 border items-center">
+      <Card>
         <div className="uppercase text-[0.9375rem]">
-          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
+          <Indicator variant={variant} />
           <span>{title}</span>
         </div>
         <div className="mt-4 text-h4 leading-none">
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </div>
-      </div>
+      </Card>
     </Tooltip>
   );
 };
diff --git a/libs/network-stats/src/components/table-row/table-row.tsx b/libs/network-stats/src/components/table-row/table-row.tsx
index 249ff4e79..be26cf334 100644
--- a/libs/network-stats/src/components/table-row/table-row.tsx
+++ b/libs/network-stats/src/components/table-row/table-row.tsx
@@ -1,6 +1,7 @@
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { StatFields } from '../../config/types';
-import { GoodThresholdIndicator } from '../good-threshold-indicator';
+import { useMemo } from 'react';
+import { Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
 
 export const defaultFieldFormatter = (field: unknown) =>
   field === undefined ? 'no data' : field;
@@ -12,6 +13,15 @@ export const TableRow = ({
   value,
   description,
 }: StatFields) => {
+  const variant = useMemo(
+    () =>
+      goodThreshold
+        ? goodThreshold(value)
+          ? TailwindIntents.Success
+          : TailwindIntents.Danger
+        : TailwindIntents.Highlight,
+    [goodThreshold, value]
+  );
   return (
     <Tooltip description={description} align="start">
       <tr className="border">
@@ -20,7 +30,7 @@ export const TableRow = ({
           {formatter ? formatter(value) : defaultFieldFormatter(value)}
         </td>
         <td className="py-4 px-8">
-          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
+          <Indicator variant={variant} />
         </td>
       </tr>
     </Tooltip>
diff --git a/libs/positions/src/lib/positions-table.tsx b/libs/positions/src/lib/positions-table.tsx
index 3e99ed905..ec6d4cfef 100644
--- a/libs/positions/src/lib/positions-table.tsx
+++ b/libs/positions/src/lib/positions-table.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import type { ValueFormatterParams } from 'ag-grid-community';
 import {
   PriceCell,
diff --git a/libs/ui-toolkit/src/components/card/card.stories.tsx b/libs/ui-toolkit/src/components/card/card.stories.tsx
new file mode 100644
index 000000000..f42fd8996
--- /dev/null
+++ b/libs/ui-toolkit/src/components/card/card.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Card } from './card';
+
+export default {
+  title: 'Card',
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => {
+  return <Card>Test</Card>;
+};
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/libs/ui-toolkit/src/components/card/card.tsx b/libs/ui-toolkit/src/components/card/card.tsx
new file mode 100644
index 000000000..0b3986ef1
--- /dev/null
+++ b/libs/ui-toolkit/src/components/card/card.tsx
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+interface CardProps {
+  children: ReactNode;
+}
+
+export function Card({ children }: CardProps) {
+  return (
+    <div className="px-24 py-16 pr-64 border items-center">{children}</div>
+  );
+}
diff --git a/libs/ui-toolkit/src/components/card/index.tsx b/libs/ui-toolkit/src/components/card/index.tsx
new file mode 100644
index 000000000..cb5809fed
--- /dev/null
+++ b/libs/ui-toolkit/src/components/card/index.tsx
@@ -0,0 +1 @@
+export * from './card';
diff --git a/libs/ui-toolkit/src/components/indicator/index.tsx b/libs/ui-toolkit/src/components/indicator/index.tsx
new file mode 100644
index 000000000..ef086afd6
--- /dev/null
+++ b/libs/ui-toolkit/src/components/indicator/index.tsx
@@ -0,0 +1 @@
+export * from './indicator';
diff --git a/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx b/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
new file mode 100644
index 000000000..248fedaa5
--- /dev/null
+++ b/libs/ui-toolkit/src/components/indicator/indicator.stories.tsx
@@ -0,0 +1,31 @@
+import type { Story, Meta } from '@storybook/react';
+import { Indicator } from './indicator';
+
+export default {
+  component: Indicator,
+  title: 'Indicator',
+} as Meta;
+
+const Template: Story = (args) => <Indicator {...args} />;
+
+export const Default = Template.bind({});
+
+export const Highlight = Template.bind({});
+Highlight.args = {
+  variant: 'highlight',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  variant: 'success',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: 'warning',
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  variant: 'danger',
+};
diff --git a/libs/ui-toolkit/src/components/indicator/indicator.tsx b/libs/ui-toolkit/src/components/indicator/indicator.tsx
new file mode 100644
index 000000000..11354686e
--- /dev/null
+++ b/libs/ui-toolkit/src/components/indicator/indicator.tsx
@@ -0,0 +1,11 @@
+import classNames from 'classnames';
+import type { TailwindIntents } from '../../utils/intent';
+import { getVariantBackground } from '../../utils/intent';
+
+export const Indicator = ({ variant }: { variant?: TailwindIntents }) => {
+  const names = classNames(
+    'inline-block w-8 h-8 mb-2 mr-8 rounded',
+    getVariantBackground(variant)
+  );
+  return <div className={names} />;
+};
diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx
index 54c3d25fa..ba5b72efd 100644
--- a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx
+++ b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx
@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
+import { getVariantBackground } from '../../utils/intent';
+import type { TailwindIntents } from '../../utils/intent';
 
 interface LozengeProps {
   children: ReactNode;
-  variant?: 'success' | 'warning' | 'danger' | 'highlight';
+  variant?: TailwindIntents;
   className?: string;
   details?: string;
 }
@@ -13,13 +15,10 @@ const getWrapperClasses = (className: LozengeProps['className']) => {
 };
 
 const getLozengeClasses = (variant: LozengeProps['variant']) => {
-  return classNames(['rounded-md', 'font-mono', 'leading-none', 'p-4'], {
-    'bg-intent-success text-black': variant === 'success',
-    'bg-intent-danger text-white': variant === 'danger',
-    'bg-intent-warning text-black': variant === 'warning',
-    'bg-intent-highlight text-black': variant === 'highlight',
-    'bg-intent-help text-white': !variant,
-  });
+  return classNames(
+    ['rounded-md', 'font-mono', 'leading-none', 'p-4'],
+    getVariantBackground(variant)
+  );
 };
 
 export const Lozenge = ({
diff --git a/libs/ui-toolkit/src/index.ts b/libs/ui-toolkit/src/index.ts
index bbf33fbc5..80fdf8ff3 100644
--- a/libs/ui-toolkit/src/index.ts
+++ b/libs/ui-toolkit/src/index.ts
@@ -21,6 +21,8 @@ export { ThemeSwitcher } from './components/theme-switcher';
 export { Dialog } from './components/dialog/dialog';
 export { VegaLogo } from './components/vega-logo';
 export { Tooltip } from './components/tooltip';
+export { Indicator } from './components/indicator';
+export { Card } from './components/card';
 
 // Utils
 export * from './utils/intent';
diff --git a/libs/ui-toolkit/src/utils/intent.ts b/libs/ui-toolkit/src/utils/intent.ts
deleted file mode 100644
index f63ca4385..000000000
--- a/libs/ui-toolkit/src/utils/intent.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-
-export enum Intent {
-  Danger = 'danger',
-  Warning = 'warning',
-  Prompt = 'prompt',
-  Progress = 'progress',
-  Success = 'success',
-  Help = 'help',
-}
-
-export const getIntentShadow = (intent?: Intent) => {
-  return classNames('shadow-callout', {
-    'shadow-intent-danger': intent === Intent.Danger,
-    'shadow-intent-warning': intent === Intent.Warning,
-    'shadow-intent-prompt': intent === Intent.Prompt,
-    'shadow-black dark:shadow-white': intent === Intent.Progress,
-    'shadow-intent-success': intent === Intent.Success,
-    'shadow-intent-help': intent === Intent.Help,
-  });
-};
diff --git a/libs/ui-toolkit/src/utils/intent.tsx b/libs/ui-toolkit/src/utils/intent.tsx
new file mode 100644
index 000000000..c5618ef0a
--- /dev/null
+++ b/libs/ui-toolkit/src/utils/intent.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+
+export enum Intent {
+  Danger = 'danger',
+  Warning = 'warning',
+  Prompt = 'prompt',
+  Progress = 'progress',
+  Success = 'success',
+  Help = 'help',
+}
+
+export enum TailwindIntents {
+  Danger = 'danger',
+  Warning = 'warning',
+  Prompt = 'prompt',
+  Success = 'success',
+  Help = 'help',
+  Highlight = 'highlight',
+}
+
+export const getIntentShadow = (intent?: Intent) => {
+  return classNames('shadow-callout', {
+    'shadow-intent-danger': intent === Intent.Danger,
+    'shadow-intent-warning': intent === Intent.Warning,
+    'shadow-intent-prompt': intent === Intent.Prompt,
+    'shadow-black dark:shadow-white': intent === Intent.Progress,
+    'shadow-intent-success': intent === Intent.Success,
+    'shadow-intent-help': intent === Intent.Help,
+  });
+};
+
+export const getVariantBackground = (variant?: TailwindIntents) => {
+  return {
+    'bg-intent-danger text-white': variant === TailwindIntents.Danger,
+    'bg-intent-warning text-black': variant === TailwindIntents.Warning,
+    'bg-intent-prompt text-black': variant === TailwindIntents.Prompt,
+    'bg-intent-success text-black': variant === TailwindIntents.Success,
+    'bg-intent-help text-white': variant === TailwindIntents.Help,
+    'bg-intent-highlight text-black': variant === TailwindIntents.Highlight,
+  };
+};