diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 8c4fc19..af123f5 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -4,46 +4,51 @@ import { FETCH_MONTH_BUDGET } from "../store/action-types";
 import { TITLE } from "../store/mutation-types";
 import Currency from "../components/Currency.vue";
 
+interface Date {
+    Year:Number, 
+    Month:Number,
+}
+
 export default defineComponent({
     mounted() {
         this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
-        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
+        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
     },
     watch: {
         year() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
+            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
         },
         month() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.$data.Year, month: this.$data.Month });
+            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
         },
     },
     props: ["budgetid", "year", "month"],
-    data() {
-        return {
-            Year: (this.year || new Date().getFullYear()) as number,
-            Month: (this.month || new Date().getMonth()) as number
-        };
-    },
     computed: {
         Categories() {
-            return this.$store.getters.Categories(this.$data.Year, this.$data.Month);
+            return this.$store.getters.Categories(this.year, this.month);
         },
-        previous() {
+        previous() : Date {
             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(),
+                Year: new Date(this.year, this.month - 1, 1).getFullYear(),
+                Month: new Date(this.year, this.month - 1, 1).getMonth(),
             };
         },
-        current() {
+        current() : Date {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
             };
         },
-        next() {
+        selected() : Date {
             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(),
+                Year: this.year,
+                Month: Number(this.month) + 1
+            }
+        },
+        next() : Date {
+            return {
+                Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
+                Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
             };
         }
     },
@@ -57,7 +62,7 @@ export default defineComponent({
 
 <template>
     <h1>
-        Budget for {{Month}}/{{Year}}
+        Budget for {{selected.Month}}/{{selected.Year}}
     </h1>
     <div>
         <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 8d3aa52..9504a8a 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,5 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import DashboardCard from '../components/Card.vue';
+import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-router'
 import Dashboard from '../pages/Dashboard.vue';
 import Login from '../pages/Login.vue';
 import Index from '../pages/Index.vue';
@@ -14,7 +13,9 @@ const routes = [
   { 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", name: "Budget", redirect: (to : RouteLocationNormalized) => 
+    '/budget/' + to.params.budgetid + '/' + new Date().getFullYear() + '/' + new Date().getMonth() 
+  },
   { path: "/budget/:budgetid/:year/:month", name: "Budget with date", 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 },