diff --git a/web/src/main.ts b/web/src/main.ts
index bd28323..5e0c9c5 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
-import router from './router/routes.js'
-import { store, key } from './store/index.js'
+import router from './router'
+import { store, key } from './store'
 import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
 
 const app = createApp(App)
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
new file mode 100644
index 0000000..fed5239
--- /dev/null
+++ b/web/src/pages/Budgeting.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { TITLE } from "../store/mutation-types";
+
+export default defineComponent({
+    mounted() {
+        this.$store.dispatch(TITLE, "Budget for " + this.month + " " + this.year)
+    },
+    props: ["budgetid", "year", "month"],
+    data() {
+        return {
+            Year: this.year || new Date().getFullYear(),
+            Month: this.month || new Date().getMonth()
+        }
+    },
+    computed: {
+        previous() {
+            return {
+                Year: new Date(this.$data.Year, this.$data.Month - 1, 1).getFullYear(),
+                Month: new Date(this.$data.Year, this.$data.Month - 1, 1).getMonth(),
+            }
+        },
+        current() {
+            return {
+                Year: new Date().getFullYear(),
+                Month: new Date().getMonth(),
+            }
+        },
+        next() {
+            return {
+                Year: new Date(this.$data.Year, this.$data.Month + 1, 1).getFullYear(),
+                Month: new Date(this.$data.Year, this.$data.Month + 1, 1).getMonth(),
+            }
+        }
+    }
+})
+
+/*{{define "title"}}
+    {{printf "Budget for %s %d" .Date.Month .Date.Year}}
+{{end}}*/
+</script>
+
+<template>
+    <div>
+        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
+        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + current.Year + '/' + current.Month">Current Month</router-link> - 
+        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + next.Year + '/' + next.Month">Next Month</router-link>
+    </div>
+    <table class="container col-lg-12" id="content">
+        <tr>
+            <th>Group</th>
+            <th>Category</th>
+            <th></th>
+            <th></th>
+            <th>Leftover</th>
+            <th>Assigned</th>
+            <th>Activity</th>
+            <th>Available</th>
+        </tr>
+        <tr v-for="category in $store.state.Categories">
+            <td>{{category.Group}}</td>
+            <td>{{category.Name}}</td>
+            <td>
+            </td>
+            <td>
+            </td>
+            <td>{{category.AvailableLastMonth}}</td>
+            <td>{{category.Assigned}}</td>
+            <td>{{category.Activity}}</td>
+            <td>{{category.Available}}</td>
+        </tr>
+    </table>
+</template>
\ No newline at end of file
diff --git a/web/src/plugins/vuetify.js b/web/src/plugins/vuetify.js
deleted file mode 100644
index e48c127..0000000
--- a/web/src/plugins/vuetify.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
-
-// Vuetify
-import { createVuetify } from 'vuetify'
-
-export default createVuetify(
-  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-)
diff --git a/web/src/plugins/webfontloader.js b/web/src/plugins/webfontloader.js
deleted file mode 100644
index e6abbe7..0000000
--- a/web/src/plugins/webfontloader.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * plugins/webfontloader.js
- *
- * webfontloader documentation: https://github.com/typekit/webfontloader
- */
-
-export async function loadFonts () {
-  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
-
-  webFontLoader.load({
-    google: {
-      families: ['Roboto:100,300,400,500,700,900&display=swap'],
-    },
-  })
-}
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 64e2aa1..b8e4b0a 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -10,14 +10,14 @@ import Budgeting from '../pages/Budgeting.vue';
 import BudgetSidebar from '../pages/BudgetSidebar.vue';
 
 const routes = [
-  { path: '/', name: 'Index', component: Index },
-  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
-  { path: '/login', name: 'Login', component: Login },
-  { path: '/register', name: 'Register', component: Register },
-  { path: '/budget/:budgetid', name: 'Budget', components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
-  { path: '/budget/:budgetid/:year/:month', name: 'Budget', components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
-  { path: '/budget/:budgetid/Settings', name: 'Budget Settings', components: { default: Settings, sidebar: BudgetSidebar }, props: true },
-  { path: '/budget/:budgetid/account/:accountid', name: 'Account', components: { default: Account, sidebar: BudgetSidebar }, props: true },
+  { path: "/", name: "Index", component: Index },
+  { path: "/dashboard", name: "Dashboard", component: Dashboard },
+  { path: "/login", name: "Login", component: Login },
+  { path: "/register", name: "Register", component: Register },
+  { path: "/budget/:budgetid", name: "Budget", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/:year/:month", name: "Budget", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/Settings", name: "Budget Settings", components: { default: Settings, sidebar: BudgetSidebar }, props: true },
+  { path: "/budget/:budgetid/account/:accountid", name: "Account", components: { default: Account, sidebar: BudgetSidebar }, props: true },
 ]
 
 const router = createRouter({
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index fe50897..4552a49 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -13,7 +13,7 @@ export interface State {
     CurrentBudgetID?: string,
     Accounts: Map<string, Account>,
     CurrentAccountID?: string,
-    Categories: [],
+    Categories: Array<Category>,
     Transactions: [],
     Assignments: []
 }
@@ -21,6 +21,7 @@ export interface State {
 export interface Budget {
     ID: string
     Name: string
+    AvailableBalance: number
 }
 
 export interface Account {
@@ -28,6 +29,15 @@ export interface Account {
     OnBudget: boolean
 }
 
+export interface Category {
+    Group: string
+    Name: string
+    AvailableLastMonth: number
+    Assigned: number
+    Activity: number
+    Available: number
+}
+
 export const key: InjectionKey<Store<State>> = Symbol()
 
 export const store = createStore<State>({