diff --git a/src/app/groups/[groupId]/balances/balances-and-reimbursements.tsx b/src/app/groups/[groupId]/balances/balances-and-reimbursements.tsx
new file mode 100644
index 00000000..691c4781
--- /dev/null
+++ b/src/app/groups/[groupId]/balances/balances-and-reimbursements.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { BalancesList } from '@/app/groups/[groupId]/balances-list'
+import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { getGroup } from '@/lib/api'
+import { trpc } from '@/trpc/client'
+import { useTranslations } from 'next-intl'
+import { useEffect } from 'react'
+
+export default function BalancesAndReimbursements({
+  group,
+}: {
+  group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
+}) {
+  const utils = trpc.useUtils()
+
+  useEffect(() => {
+    // Until we use tRPC more widely and can invalidate the cache on expense
+    // update, it's easier and safer to invalidate the cache on page load.
+    utils.groups.balances.invalidate()
+  }, [utils])
+
+  const t = useTranslations('Balances')
+
+  const { data, isLoading } = trpc.groups.balances.list.useQuery({
+    groupId: group.id,
+  })
+
+  return (
+    <>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading || !data ? (
+            <p className="text-muted-foreground text-sm">Loading…</p>
+          ) : (
+            <BalancesList
+              balances={data.balances}
+              participants={group.participants}
+              currency={group.currency}
+            />
+          )}
+        </CardContent>
+      </Card>
+      <Card className="mb-4">
+        <CardHeader>
+          <CardTitle>{t('Reimbursements.title')}</CardTitle>
+          <CardDescription>{t('Reimbursements.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading || !data ? (
+            <p className="text-muted-foreground text-sm">Loading…</p>
+          ) : (
+            <ReimbursementList
+              reimbursements={data.reimbursements}
+              participants={group.participants}
+              currency={group.currency}
+              groupId={group.id}
+            />
+          )}
+        </CardContent>
+      </Card>
+    </>
+  )
+}
diff --git a/src/app/groups/[groupId]/balances/page.tsx b/src/app/groups/[groupId]/balances/page.tsx
index 615f033c..0a403aa4 100644
--- a/src/app/groups/[groupId]/balances/page.tsx
+++ b/src/app/groups/[groupId]/balances/page.tsx
@@ -1,21 +1,6 @@
 import { cached } from '@/app/cached-functions'
-import { BalancesList } from '@/app/groups/[groupId]/balances-list'
-import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { getGroupExpenses } from '@/lib/api'
-import {
-  getBalances,
-  getPublicBalances,
-  getSuggestedReimbursements,
-} from '@/lib/balances'
+import BalancesAndReimbursements from '@/app/groups/[groupId]/balances/balances-and-reimbursements'
 import { Metadata } from 'next'
-import { getTranslations } from 'next-intl/server'
 import { notFound } from 'next/navigation'
 
 export const metadata: Metadata = {
@@ -27,44 +12,8 @@ export default async function GroupPage({
 }: {
   params: { groupId: string }
 }) {
-  const t = await getTranslations('Balances')
   const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
-  const expenses = await getGroupExpenses(groupId)
-  const balances = getBalances(expenses)
-  const reimbursements = getSuggestedReimbursements(balances)
-  const publicBalances = getPublicBalances(reimbursements)
-
-  return (
-    <>
-      <Card className="mb-4">
-        <CardHeader>
-          <CardTitle>{t('title')}</CardTitle>
-          <CardDescription>{t('description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <BalancesList
-            balances={publicBalances}
-            participants={group.participants}
-            currency={group.currency}
-          />
-        </CardContent>
-      </Card>
-      <Card className="mb-4">
-        <CardHeader>
-          <CardTitle>{t('Reimbursements.title')}</CardTitle>
-          <CardDescription>{t('Reimbursements.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="p-0">
-          <ReimbursementList
-            reimbursements={reimbursements}
-            participants={group.participants}
-            currency={group.currency}
-            groupId={groupId}
-          />
-        </CardContent>
-      </Card>
-    </>
-  )
+  return <BalancesAndReimbursements group={group} />
 }
diff --git a/src/app/groups/[groupId]/reimbursement-list.tsx b/src/app/groups/[groupId]/reimbursement-list.tsx
index 43bf4f61..6a7ca529 100644
--- a/src/app/groups/[groupId]/reimbursement-list.tsx
+++ b/src/app/groups/[groupId]/reimbursement-list.tsx
@@ -28,7 +28,7 @@ export function ReimbursementList({
   return (
     <div className="text-sm">
       {reimbursements.map((reimbursement, index) => (
-        <div className="border-t px-6 py-4 flex justify-between" key={index}>
+        <div className="py-4 flex justify-between" key={index}>
           <div className="flex flex-col gap-1 items-start sm:flex-row sm:items-baseline sm:gap-4">
             <div>
               {t.rich('owes', {
diff --git a/src/trpc/routers/groups/balances/index.ts b/src/trpc/routers/groups/balances/index.ts
new file mode 100644
index 00000000..626ed64e
--- /dev/null
+++ b/src/trpc/routers/groups/balances/index.ts
@@ -0,0 +1,6 @@
+import { createTRPCRouter } from '@/trpc/init'
+import { listGroupBalancesProcedure } from '@/trpc/routers/groups/balances/list.procedure'
+
+export const groupBalancesRouter = createTRPCRouter({
+  list: listGroupBalancesProcedure,
+})
diff --git a/src/trpc/routers/groups/balances/list.procedure.ts b/src/trpc/routers/groups/balances/list.procedure.ts
new file mode 100644
index 00000000..b851a1af
--- /dev/null
+++ b/src/trpc/routers/groups/balances/list.procedure.ts
@@ -0,0 +1,19 @@
+import { getGroupExpenses } from '@/lib/api'
+import {
+  getBalances,
+  getPublicBalances,
+  getSuggestedReimbursements,
+} from '@/lib/balances'
+import { baseProcedure } from '@/trpc/init'
+import { z } from 'zod'
+
+export const listGroupBalancesProcedure = baseProcedure
+  .input(z.object({ groupId: z.string().min(1) }))
+  .query(async ({ input: { groupId } }) => {
+    const expenses = await getGroupExpenses(groupId)
+    const balances = getBalances(expenses)
+    const reimbursements = getSuggestedReimbursements(balances)
+    const publicBalances = getPublicBalances(reimbursements)
+
+    return { balances: publicBalances, reimbursements }
+  })
diff --git a/src/trpc/routers/groups/index.ts b/src/trpc/routers/groups/index.ts
index 29024178..9f2ec1e5 100644
--- a/src/trpc/routers/groups/index.ts
+++ b/src/trpc/routers/groups/index.ts
@@ -1,6 +1,8 @@
 import { createTRPCRouter } from '@/trpc/init'
+import { groupBalancesRouter } from '@/trpc/routers/groups/balances'
 import { groupExpensesRouter } from '@/trpc/routers/groups/expenses'
 
 export const groupsRouter = createTRPCRouter({
   expenses: groupExpensesRouter,
+  balances: groupBalancesRouter,
 })