diff --git a/assets/package.json b/assets/package.json
index 9ac1b81b2..ab2a5fb1f 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -42,12 +42,13 @@
     "@graphql-codegen/named-operations-object": "3.0.0",
     "@jumpn/utils-graphql": "0.6.0",
     "@markdoc/markdoc": "0.4.0",
-    "@nivo/core": "0.87.0",
-    "@nivo/geo": "0.87.0",
-    "@nivo/line": "0.87.0",
-    "@nivo/pie": "0.87.0",
-    "@nivo/radial-bar": "0.87.0",
-    "@nivo/tooltip": "0.87.0",
+    "@nivo/core": "0.88.0",
+    "@nivo/geo": "0.88.0",
+    "@nivo/line": "0.88.0",
+    "@nivo/pie": "0.88.0",
+    "@nivo/radial-bar": "0.88.0",
+    "@nivo/tooltip": "0.88.0",
+    "@nivo/treemap": "0.88.0",
     "@pluralsh/design-system": "4.3.0",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
diff --git a/assets/src/components/cost-management/CostManagement.tsx b/assets/src/components/cost-management/CostManagement.tsx
index fce82d4a2..ea585d48c 100644
--- a/assets/src/components/cost-management/CostManagement.tsx
+++ b/assets/src/components/cost-management/CostManagement.tsx
@@ -34,6 +34,13 @@ import {
   ColMemoryCost,
   ColMemoryEfficiency,
 } from './ClusterUsagesTableCols'
+import {
+  CostManagementTreeMap,
+  cpuCostByCluster,
+  memoryCostByCluster,
+} from './CostManagementTreeMap'
+
+export const CM_TREE_MAP_CARD_HEIGHT = 300
 
 export function CostManagement() {
   const theme = useTheme()
@@ -82,7 +89,10 @@ export function CostManagement() {
       </Flex>
       <Flex gap="large">
         <Card
-          css={{ padding: theme.spacing.large }}
+          css={{
+            padding: theme.spacing.large,
+            height: CM_TREE_MAP_CARD_HEIGHT,
+          }}
           header={{
             outerProps: { style: { flex: 1 } },
             content: (
@@ -93,10 +103,13 @@ export function CostManagement() {
             ),
           }}
         >
-          Graph goes here
+          <CostManagementTreeMap data={cpuCostByCluster(usages)} />
         </Card>
         <Card
-          css={{ padding: theme.spacing.large }}
+          css={{
+            padding: theme.spacing.large,
+            height: CM_TREE_MAP_CARD_HEIGHT,
+          }}
           header={{
             outerProps: { style: { flex: 1 } },
             content: (
@@ -107,7 +120,7 @@ export function CostManagement() {
             ),
           }}
         >
-          Graph goes here
+          <CostManagementTreeMap data={memoryCostByCluster(usages)} />
         </Card>
       </Flex>
       <Card
diff --git a/assets/src/components/cost-management/CostManagementTreeMap.tsx b/assets/src/components/cost-management/CostManagementTreeMap.tsx
new file mode 100644
index 000000000..8bef8d49a
--- /dev/null
+++ b/assets/src/components/cost-management/CostManagementTreeMap.tsx
@@ -0,0 +1,91 @@
+import { ResponsiveTreeMapHtml } from '@nivo/treemap'
+import { useThemeColorMode } from '@pluralsh/design-system'
+import {
+  ClusterNamespaceUsageFragment,
+  ClusterUsageTinyFragment,
+} from 'generated/graphql'
+
+type TreeMapData = {
+  name: string
+  color: string
+  amount?: number
+  children?: TreeMapData[]
+}
+
+export function CostManagementTreeMap({ data }: { data: TreeMapData }) {
+  const colorMode = useThemeColorMode()
+  return (
+    <ResponsiveTreeMapHtml
+      data={data}
+      identity="name"
+      value="amount"
+      valueFormat=" >-$.3s"
+      innerPadding={2}
+      label={(e) => e.id + ' (' + e.formattedValue + ')'}
+      labelSkipSize={12}
+      labelTextColor={{
+        from: 'color',
+        modifiers: [[colorMode === 'dark' ? 'brighter' : 'darker', 2]],
+      }}
+      enableParentLabel={false}
+      parentLabelTextColor={{
+        from: 'color',
+        modifiers: [[colorMode === 'dark' ? 'brighter' : 'darker', 3]],
+      }}
+      colors={{ scheme: 'blues' }}
+      nodeOpacity={0.45}
+      borderColor={{
+        from: 'color',
+        modifiers: [[colorMode === 'dark' ? 'brighter' : 'darker', 0.1]],
+      }}
+    />
+  )
+}
+
+export function cpuCostByCluster(usages: ClusterUsageTinyFragment[]) {
+  return {
+    name: 'cpu cost by cluster',
+    color: 'blue',
+    children: usages.map((usage) => ({
+      name: usage.cluster?.name ?? usage.id,
+      color: 'blue',
+      amount: usage.cpuCost ?? 0,
+    })),
+  }
+}
+
+export function memoryCostByCluster(usages: ClusterUsageTinyFragment[]) {
+  return {
+    name: 'memory cost by cluster',
+    color: 'blue',
+    children: usages.map((usage) => ({
+      name: usage.cluster?.name ?? usage.id,
+      color: 'blue',
+      amount: usage.memoryCost ?? 0,
+    })),
+  }
+}
+
+export function cpuCostByNamespace(usages: ClusterNamespaceUsageFragment[]) {
+  return {
+    name: 'cpu cost by namespace',
+    color: 'blue',
+    children: usages.map((usage) => ({
+      name: usage.namespace ?? usage.id,
+      color: 'blue',
+      amount: usage.cpuCost ?? 0,
+    })),
+  }
+}
+
+export function memoryCostByNamespace(usages: ClusterNamespaceUsageFragment[]) {
+  return {
+    name: 'memory cost by namespace',
+    color: 'blue',
+    children: usages.map((usage) => ({
+      name: usage.namespace ?? usage.id,
+      color: 'blue',
+      amount: usage.memoryCost ?? 0,
+    })),
+  }
+}
diff --git a/assets/src/components/cost-management/details/CostManagementDetailsNamespaces.tsx b/assets/src/components/cost-management/details/CostManagementDetailsNamespaces.tsx
index db53d0cbf..9cb66ec8e 100644
--- a/assets/src/components/cost-management/details/CostManagementDetailsNamespaces.tsx
+++ b/assets/src/components/cost-management/details/CostManagementDetailsNamespaces.tsx
@@ -27,6 +27,12 @@ import {
   ColActions,
   ColNamespace,
 } from '../ClusterUsagesTableCols'
+import { CM_TREE_MAP_CARD_HEIGHT } from '../CostManagement'
+import {
+  CostManagementTreeMap,
+  cpuCostByNamespace,
+  memoryCostByNamespace,
+} from '../CostManagementTreeMap'
 
 export function CostManagementDetailsNamespaces() {
   const theme = useTheme()
@@ -51,7 +57,10 @@ export function CostManagementDetailsNamespaces() {
     >
       <Flex gap="large">
         <Card
-          css={{ padding: theme.spacing.large }}
+          css={{
+            padding: theme.spacing.large,
+            height: CM_TREE_MAP_CARD_HEIGHT,
+          }}
           header={{
             outerProps: { style: { flex: 1 } },
             content: (
@@ -62,10 +71,13 @@ export function CostManagementDetailsNamespaces() {
             ),
           }}
         >
-          Graph goes here
+          <CostManagementTreeMap data={cpuCostByNamespace(usages)} />
         </Card>
         <Card
-          css={{ padding: theme.spacing.large }}
+          css={{
+            padding: theme.spacing.large,
+            height: CM_TREE_MAP_CARD_HEIGHT,
+          }}
           header={{
             outerProps: { style: { flex: 1 } },
             content: (
@@ -76,7 +88,7 @@ export function CostManagementDetailsNamespaces() {
             ),
           }}
         >
-          Graph goes here
+          <CostManagementTreeMap data={memoryCostByNamespace(usages)} />
         </Card>
       </Flex>
       <Flex
diff --git a/assets/src/routes/costManagementRoutes.tsx b/assets/src/routes/costManagementRoutes.tsx
index 3d9bff9be..049c021e3 100644
--- a/assets/src/routes/costManagementRoutes.tsx
+++ b/assets/src/routes/costManagementRoutes.tsx
@@ -22,7 +22,12 @@ export const costManagementRoutes = [
   >
     <Route
       index
-      element={<Navigate to={CM_NAMESPACES_REL_PATH} />}
+      element={
+        <Navigate
+          replace
+          to={CM_NAMESPACES_REL_PATH}
+        />
+      }
     />
     <Route
       path={CM_NAMESPACES_REL_PATH}