diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 7ccba8c..2e970b9 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -20,17 +20,23 @@ export default defineComponent({
       <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
     </span>
     <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
-      On-Budget Accounts
-      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
+      <div class="flex flex-row justify-between font-bold">
+        <span>On-Budget Accounts</span>
+        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OnBudgetAccountsBalance" />
+      </div>
+      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency v-if="$store.state.ExpandMenu" :value="account.Balance" />
+        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
-      Off-Budget Accounts
-      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
+      <div class="flex flex-row justify-between font-bold">
+        <span>Off-Budget Accounts</span>
+        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OffBudgetAccountsBalance" />
+      </div>
+      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency v-if="$store.state.ExpandMenu" :value="account.Balance" />
+        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
diff --git a/web/src/store/budget/index.ts b/web/src/store/budget/index.ts
index a10a560..ddbb2af 100644
--- a/web/src/store/budget/index.ts
+++ b/web/src/store/budget/index.ts
@@ -98,9 +98,15 @@ export const budgetStore : Module<BudgetState, any> = {
         OnBudgetAccounts(state) {
             return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
         },
+        OnBudgetAccountsBalance(state, getters){
+            return getters.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
+        },
         OffBudgetAccounts(state) {
             return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
         },
+        OffBudgetAccountsBalance(state, getters){
+            return getters.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
+        },
         Transactions(state) {
             return (state.Transactions || []);
         }