diff --git a/frontend/components/displayOpenBalances.vue b/frontend/components/displayOpenBalances.vue
index 829c607..a1ca265 100644
--- a/frontend/components/displayOpenBalances.vue
+++ b/frontend/components/displayOpenBalances.vue
@@ -2,8 +2,6 @@
 
 import dayjs from "dayjs";
 
-const profileStore = useProfileStore();
-
 let unpaidInvoicesSum = ref(0)
 let unpaidInvoicesCount = ref(0)
 let unpaidOverdueInvoicesSum = ref(0)
@@ -50,43 +48,91 @@ setupPage()
 </script>
 
 <template>
-  <table>
-    <tr>
-      <td class="break-all">Offene Rechnungen:</td>
-      <td
-          v-if="unpaidInvoicesSum > 0"
-          class="text-orange-500 font-bold text-nowrap"
-      >{{unpaidInvoicesCount}} Stk /<br> {{useCurrency(unpaidInvoicesSum)}}</td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
-    </tr>
-    <tr>
-      <td class="break-all">Überfällige Rechnungen:</td>
-      <td
-          v-if="unpaidOverdueInvoicesSum !== 0"
-          class="text-rose-600 font-bold text-nowrap"
-      >{{unpaidOverdueInvoicesCount}} Stk /<br> {{useCurrency(unpaidOverdueInvoicesSum)}}</td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
-    </tr>
-    <tr>
-      <td class="break-all">Angelegte Rechnungsentwürfe:</td>
-      <td
-          v-if="draftInvoicesSum > 0"
-          class="text-orange-500 font-bold text-nowrap"
-      >{{draftInvoicesCount}} Stk /<br> {{useCurrency(draftInvoicesSum)}}</td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk / 0,00€</td>
-    </tr>
-    <tr>
-      <td class="break-all">Vorbereitete Eingangsrechnungen:</td>
-      <td
-          v-if="countPreparedOpenIncomingInvoices > 0"
-          class="text-orange-500 font-bold text-wrap"
-      >{{countPreparedOpenIncomingInvoices}} Stk </td>
-      <td v-else class="text-primary-500 font-bold text-no-wrap">0 Stk</td>
-    </tr>
-  </table>
+  <div class="space-y-3">
+    <div class="balance-row">
+      <p class="balance-label">Offene Rechnungen</p>
+      <div
+        v-if="unpaidInvoicesSum > 0"
+        class="balance-value text-orange-500"
+      >
+        <span>{{ unpaidInvoicesCount }} Stk</span>
+        <span>{{ useCurrency(unpaidInvoicesSum) }}</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+        <span>0,00€</span>
+      </div>
+    </div>
 
+    <div class="balance-row">
+      <p class="balance-label">Überfällige Rechnungen</p>
+      <div
+        v-if="unpaidOverdueInvoicesSum !== 0"
+        class="balance-value text-rose-600"
+      >
+        <span>{{ unpaidOverdueInvoicesCount }} Stk</span>
+        <span>{{ useCurrency(unpaidOverdueInvoicesSum) }}</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+        <span>0,00€</span>
+      </div>
+    </div>
+
+    <div class="balance-row">
+      <p class="balance-label">Angelegte Rechnungsentwürfe</p>
+      <div
+        v-if="draftInvoicesSum > 0"
+        class="balance-value text-orange-500"
+      >
+        <span>{{ draftInvoicesCount }} Stk</span>
+        <span>{{ useCurrency(draftInvoicesSum) }}</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+        <span>0,00€</span>
+      </div>
+    </div>
+
+    <div class="balance-row">
+      <p class="balance-label">Vorbereitete Eingangsrechnungen</p>
+      <div
+        v-if="countPreparedOpenIncomingInvoices > 0"
+        class="balance-value text-orange-500"
+      >
+        <span>{{ countPreparedOpenIncomingInvoices }} Stk</span>
+      </div>
+      <div v-else class="balance-value text-primary-500">
+        <span>0 Stk</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.balance-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+}
 
-</style>
\ No newline at end of file
+.balance-label {
+  margin: 0;
+  line-height: 1.35;
+  color: rgb(55 65 81);
+}
+
+.balance-value {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+:deep(.dark) .balance-label {
+  color: rgb(209 213 219);
+}
+</style>