diff --git a/src/lib/components/SummaryCard.svelte b/src/lib/components/SummaryCard.svelte
new file mode 100644
index 00000000..db585e13
--- /dev/null
+++ b/src/lib/components/SummaryCard.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { HelpText } from '@nais/ds-svelte-community';
+	import type { Snippet } from 'svelte';
+
+	const colors = {
+		green: '#91dc75',
+		blue: '#83bff6'
+	};
+
+	interface Props {
+		helpText?: string;
+		title: string;
+		icon: Snippet<[{ color: string }]>;
+		children: Snippet;
+		color: keyof typeof colors;
+		styled?: boolean;
+	}
+
+	let { helpText, title, icon, children, color: colorName, styled = true }: Props = $props();
+	let color = $derived(colors[colorName]);
+	const helpTextTitle = 'Hjelpetekst';
+</script>
+
+<div class="summaryCard">
+	<div
+		class="summaryIcon"
+		class:withBorder={styled}
+		class:withBackground={styled}
+		style:--bg-color={color}
+	>
+		{@render icon({ color })}
+	</div>
+	<div class="summary">
+		<h4>
+			{title}
+			{#if helpText}
+				<HelpText title={helpTextTitle}>{helpText}</HelpText>
+			{/if}
+		</h4>
+		<p class="metric">
+			{@render children()}
+		</p>
+	</div>
+</div>
+
+<style>
+	.summaryCard {
+		display: grid;
+		grid-template-columns: 50px 1fr;
+		align-items: center;
+		gap: 20px;
+	}
+	.summaryIcon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 50px;
+		height: 50px;
+	}
+	.withBorder {
+		border: 2px solid var(--bg-color);
+		border-radius: 5px;
+	}
+	.withBackground {
+		background-color: color-mix(in srgb, var(--bg-color) 10%, white);
+	}
+	.summary {
+		width: 100%;
+	}
+	.summary > h4 {
+		display: flex;
+		justify-content: space-between;
+		margin: 0;
+		font-size: 1rem;
+		color: var(--color-text-secondary);
+	}
+	.metric {
+		font-size: 1.5rem;
+		margin: 0;
+	}
+</style>
diff --git a/src/routes/team/[team]/(teamPages)/postgres/+page.svelte b/src/routes/team/[team]/(teamPages)/postgres/+page.svelte
index ff8aa7ce..0a6c71e2 100644
--- a/src/routes/team/[team]/(teamPages)/postgres/+page.svelte
+++ b/src/routes/team/[team]/(teamPages)/postgres/+page.svelte
@@ -2,7 +2,6 @@
 	import { page } from '$app/stores';
 	import { PendingValue, SqlInstanceOrderField } from '$houdini';
 	import Card from '$lib/Card.svelte';
-	import CostIcon from '$lib/icons/CostIcon.svelte';
 	import {
 		Button,
 		HelpText,
@@ -25,7 +24,9 @@
 
 	import CircleProgressBar from '$lib/components/CircleProgressBar.svelte';
 	import Cost from '$lib/components/Cost.svelte';
+	import SummaryCard from '$lib/components/SummaryCard.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
+	import CostIcon from '$lib/icons/CostIcon.svelte';
 	import { changeParams } from '$lib/utils/searchparams';
 	import prettyBytes from 'pretty-bytes';
 	import type { PageData } from './$houdini';
@@ -69,57 +70,52 @@
 
 	<div class="summary-grid">
 		<Card columns={3}>
-			<div class="summaryCard">
-				<div class="summaryIcon" style="--bg-color: #91dc75">
-					<CostIcon size="32" color="#91dc75" />
-				</div>
-				<div class="summary">
-					<h4>
-						Cost
-						<HelpText title="">Total SQL instance cost for the last 30 days.</HelpText>
-					</h4>
-					<p class="metric">
-						{#if cost !== PendingValue}
-							<Cost cost={cost.daily.sum} />
-						{:else}
-							<Skeleton variant="text" />
-						{/if}
-					</p>
-				</div>
-			</div>
+			<!-- TODO: alle de andre i morgen -->
+			<SummaryCard
+				title="Cost"
+				helpText="Total SQL instance cost for the last 30 days"
+				color="blue"
+			>
+				{#snippet icon({ color })}
+					<CostIcon size="32" {color} />
+				{/snippet}
+				{#if cost !== PendingValue}
+					<Cost cost={cost.daily.sum} />
+				{:else}
+					<Skeleton variant="text" />
+				{/if}
+			</SummaryCard>
 		</Card>
 		<Card columns={3}>
-			<div class="summaryCard">
-				<div>
+			<SummaryCard
+				title="CPU utilization"
+				helpText="Current CPU utilization"
+				color="blue"
+				styled={false}
+			>
+				{#snippet icon()}
 					{#if utilization.sqlInstances !== PendingValue}
 						<CircleProgressBar progress={utilization.sqlInstances.cpu.utilization} />
 					{:else}
 						<Skeleton height="50px" width="50px" variant="circle" />
 					{/if}
-				</div>
-				<div class="summary">
-					<h4>
-						CPU utilization
-						<HelpText title="Current CPU utilization">
-							CPU utilization for the last elapsed hour.
-						</HelpText>
-					</h4>
+				{/snippet}
+
+				{#if utilization.sqlInstances !== PendingValue}
 					<p class="metric">
-						{#if utilization.sqlInstances !== PendingValue}
-							{(utilization.sqlInstances.cpu.utilization * 100).toFixed(1)}% of
-							{utilization.sqlInstances.cpu.requested.toFixed(0)} core{utilization.sqlInstances.cpu
-								.requested > 1
-								? 's'
-								: ''}
-						{:else}
-							<Skeleton variant="text" />
-						{/if}
+						{(utilization.sqlInstances.cpu.utilization * 100).toFixed(1)}% of
+						{utilization.sqlInstances.cpu.requested.toFixed(0)} core{utilization.sqlInstances.cpu
+							.requested > 1
+							? 's'
+							: ''}
 					</p>
-				</div>
-			</div>
+				{:else}
+					<Skeleton variant="text" />
+				{/if}
+			</SummaryCard>
 		</Card>
 		<Card columns={3}>
-			<div class="summaryCard">
+			<!--div class="summaryCard">
 				<div>
 					{#if utilization.sqlInstances !== PendingValue}
 						<CircleProgressBar progress={utilization.sqlInstances.memory.utilization} />
@@ -143,7 +139,30 @@
 						{/if}
 					</p>
 				</div>
-			</div>
+			</div-->
+			<SummaryCard
+				title="Memory utilization"
+				helpText="Memory utilization for the last elapsed hour."
+				color="blue"
+				styled={false}
+			>
+				{#snippet icon()}
+					{#if utilization.sqlInstances !== PendingValue}
+						<CircleProgressBar progress={utilization.sqlInstances.memory.utilization} />
+					{:else}
+						<Skeleton height="50px" width="50px" variant="circle" />
+					{/if}
+				{/snippet}
+
+				{#if utilization.sqlInstances !== PendingValue}
+					<p class="metric">
+						{(utilization.sqlInstances.memory.utilization * 100).toFixed(1)}% of
+						{prettyBytes(utilization.sqlInstances.memory.requested)}
+					</p>
+				{:else}
+					<Skeleton variant="text" />
+				{/if}
+			</SummaryCard>
 		</Card>
 		<Card columns={3}>
 			<div class="summaryCard">
@@ -363,16 +382,6 @@
 		margin-bottom: 1rem;
 	}
 
-	.summaryIcon {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 50px;
-		height: 50px;
-		border: 1px solid var(--bg-color);
-		border-radius: 5px;
-	}
-
 	.summary {
 		width: 100%;
 	}