diff --git a/http/budget.go b/http/budget.go
index 39c38b6..6129ec4 100644
--- a/http/budget.go
+++ b/http/budget.go
@@ -1,6 +1,7 @@
 package http
 
 import (
+	"fmt"
 	"net/http"
 
 	"git.javil.eu/jacob1123/budgeteer"
@@ -48,17 +49,29 @@ func (h *Handler) allAccounts(c *gin.Context) {
 	c.HTML(http.StatusOK, "account.html", d)
 }
 
+type newBudgetInformation struct {
+	Name string `json:"name"`
+}
+
 func (h *Handler) newBudget(c *gin.Context) {
-	budgetName, succ := c.GetPostForm("name")
-	if !succ {
-		c.AbortWithStatus(http.StatusNotAcceptable)
+	var newBudget newBudgetInformation
+	err := c.BindJSON(&newBudget)
+	if err != nil {
+		c.AbortWithError(http.StatusNotAcceptable, err)
+		return
+	}
+
+	if newBudget.Name == "" {
+		c.AbortWithError(http.StatusNotAcceptable, fmt.Errorf("Budget name is needed"))
 		return
 	}
 
 	userID := c.MustGet("token").(budgeteer.Token).GetID()
-	_, err := h.Service.NewBudget(c.Request.Context(), budgetName, userID)
+	budget, err := h.Service.NewBudget(c.Request.Context(), newBudget.Name, userID)
 	if err != nil {
 		c.AbortWithError(http.StatusInternalServerError, err)
 		return
 	}
+
+	c.JSON(http.StatusOK, budget)
 }
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index 90d232a..5fc8ade 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -1,18 +1,20 @@
 <script>
+import NewBudget from '@/dialogs/NewBudget.vue';
+
 export default {
-    mounted () {
+    mounted() {
         this.$store.dispatch("fetchDashboard");
-    }
+    },
+    components: { NewBudget }
 }
 </script>
 
 <template>
-    <div v-for="budget in $store.getters.Budgets" class="budget-item">
-        <router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}</router-link>
-        <span class="time"></span>
-    </div>
-    <div class="budget-item">
-        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newbudgetmodal">New Budget</button>
-        <span class="time"></span>
-    </div>
+    <v-card cols="12" md="6" v-for="budget in $store.getters.Budgets" class="budget-item">
+        <v-card-title class="text-h5 grey lighten-2">
+            <router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}</router-link>
+        </v-card-title>
+        <v-card-text><span class="time"></span></v-card-text>
+    </v-card>
+    <NewBudget />
 </template>
\ No newline at end of file
diff --git a/web/src/store/budget/index.js b/web/src/store/budget/index.js
index 95f6e90..aaca938 100644
--- a/web/src/store/budget/index.js
+++ b/web/src/store/budget/index.js
@@ -32,7 +32,7 @@ const budget = {
             })
                 .then(x => x.json())
                 .then(x => commit("setAccounts", x.Accounts));
-        }
+        },
     }
 }
 
diff --git a/web/src/store/dashboard/index.js b/web/src/store/dashboard/index.js
index cc9ffb8..6c4ffe6 100644
--- a/web/src/store/dashboard/index.js
+++ b/web/src/store/dashboard/index.js
@@ -7,7 +7,10 @@ const dashboard = {
     },
     mutations: {
         setBudgets (state, budgets) {
-                state.Budgets = budgets;
+            state.Budgets = budgets;
+        },
+        addBudget(state, budget) {
+            state.Budgets.push(budget);
         }
     },
     getters: {
@@ -24,6 +27,17 @@ const dashboard = {
             })
                 .then(x => x.json())
                 .then(x => commit("setBudgets", x.Budgets));
+        },
+        newBudget ({state, commit, rootState}, budgetName) {
+            fetch("/api/v1/budget/new", {
+                method: "POST",
+                body: JSON.stringify({name: budgetName}),
+                headers: {
+                    'Authorization': 'Bearer ' + rootState.Session.Token
+                }
+            })
+                .then(x => x.json())
+                .then(x => commit("addBudget", x.Budget));
         }
     }
 }