diff --git a/web/src/components/BudgetingSummary.vue b/web/src/components/BudgetingSummary.vue
new file mode 100644
index 0000000..b5ea93d
--- /dev/null
+++ b/web/src/components/BudgetingSummary.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useAccountStore } from '../stores/budget-account';
+import Currency from './Currency.vue';
+
+const props = defineProps<{
+  year:number,
+  month:number
+}>();
+
+const accountStore = useAccountStore();
+const budgeted = computed(() => accountStore.GetBudgeted(props.year, props.month))
+</script>
+
+<template>
+  <h1>Budget for {{ month + 1 }}/{{ year }}</h1>
+  <table class="inline-block">
+    <tr>
+      <td>
+        Available last month:
+      </td>
+      <td class="text-right">
+        <Currency :value="accountStore.Available-accountStore.OverspentLastMonth+budgeted.Assigned+budgeted.Deassigned" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Overspent last month:
+      </td>
+      <td class="text-right">
+        <Currency :value="accountStore.OverspentLastMonth" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Budgeted this month:
+      </td>
+      <td class="text-right">
+        <Currency :value="budgeted.Assigned+budgeted.Deassigned" />
+      </td>
+      <td class="text-sm pl-2">
+        = <Currency :value="budgeted.Assigned" /> - <Currency :value="-budgeted.Deassigned" />
+      </td>
+    </tr>
+    <tr class="font-bold">
+      <td class="py-2">
+        Available balance:
+      </td>
+      <td class="text-right">
+        <Currency :value="accountStore.Available" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Activity:
+      </td>
+      <td class="text-right">
+        <Currency :value="budgeted.Income + budgeted.Spent" />
+      </td>
+      <td class="text-sm pl-2">
+        = <Currency :value="budgeted.Income" /> - <Currency :value="-1 * budgeted.Spent" />
+      </td>
+    </tr>
+  </table>
+</template>
\ No newline at end of file
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 29b1da9..419daed 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -7,6 +7,7 @@ import { useSessionStore } from "../stores/session";
 import Input from "../components/Input.vue";
 import { POST } from "../api";
 import CreateCategory from "../dialogs/CreateCategory.vue";
+import BudgetingSummary from "../components/BudgetingSummary.vue";
 
 const props = defineProps<{
     budgetid: string,
@@ -72,60 +73,10 @@ function assignedChanged(e : Event, category : Category){
     POST("/budget/"+CurrentBudgetID.value+"/category/" + category.ID + "/" + selected.value.Year + "/" + (selected.value.Month+1),
     JSON.stringify({Assigned: category.Assigned}));
 }
-
-const budgeted = computed(() => accountStore.GetBudgeted(selected.value.Year, selected.value.Month))
 </script>
 
 <template>
-  <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
-  <table class="inline-block">
-    <tr>
-      <td>
-        Available last month:
-      </td>
-      <td class="text-right">
-        <Currency :value="accountStore.Available-accountStore.OverspentLastMonth+budgeted.Assigned+budgeted.Deassigned" />
-      </td>
-    </tr>
-    <tr>
-      <td>
-        Overspent last month:
-      </td>
-      <td class="text-right">
-        <Currency :value="accountStore.OverspentLastMonth" />
-      </td>
-    </tr>
-    <tr>
-      <td>
-        Budgeted this month:
-      </td>
-      <td class="text-right">
-        <Currency :value="budgeted.Assigned+budgeted.Deassigned" />
-      </td>
-      <td class="text-sm pl-2">
-        = <Currency :value="budgeted.Assigned" /> - <Currency :value="-budgeted.Deassigned" />
-      </td>
-    </tr>
-    <tr class="font-bold">
-      <td class="py-2">
-        Available balance:
-      </td>
-      <td class="text-right">
-        <Currency :value="accountStore.Available" />
-      </td>
-    </tr>
-    <tr>
-      <td>
-        Activity:
-      </td>
-      <td class="text-right">
-        <Currency :value="budgeted.Income + budgeted.Spent" />
-      </td>
-      <td class="text-sm pl-2">
-        = <Currency :value="budgeted.Income" /> - <Currency :value="-1 * budgeted.Spent" />
-      </td>
-    </tr>
-  </table>
+  <BudgetingSummary :year="selected.Year" :month="selected.Month" />
   <div>
     <router-link
       :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"