diff --git a/server/transaction.go b/server/transaction.go
index 072f8ad..05b0595 100644
--- a/server/transaction.go
+++ b/server/transaction.go
@@ -35,8 +35,6 @@ func (h *Handler) newTransaction(c *gin.Context) {
 		return
 	}
 
-	fmt.Printf("%v\n", payload)
-
 	amount := postgres.Numeric{}
 	err = amount.Set(payload.Amount)
 	if err != nil {
@@ -44,17 +42,37 @@ func (h *Handler) newTransaction(c *gin.Context) {
 		return
 	}
 
+	payeeID := payload.Payee.ID
+	if !payeeID.Valid && payload.Payee.Name != "" {
+		newPayee := postgres.CreatePayeeParams{
+			Name:     payload.Payee.Name,
+			BudgetID: payload.BudgetID,
+		}
+		payee, err := h.Service.CreatePayee(c.Request.Context(), newPayee)
+		if err != nil {
+			c.AbortWithError(http.StatusInternalServerError, fmt.Errorf("create payee: %w", err))
+		}
+
+		payeeID = uuid.NullUUID{
+			UUID:  payee.ID,
+			Valid: true,
+		}
+	}
+
 	newTransaction := postgres.CreateTransactionParams{
 		Memo:       payload.Memo,
 		Date:       time.Time(payload.Date),
 		Amount:     amount,
 		AccountID:  payload.AccountID,
-		PayeeID:    payload.Payee.ID,
+		PayeeID:    payeeID,
 		CategoryID: payload.Category.ID,
 		Status:     postgres.TransactionStatus(payload.State),
 	}
-	_, err = h.Service.CreateTransaction(c.Request.Context(), newTransaction)
+	transaction, err := h.Service.CreateTransaction(c.Request.Context(), newTransaction)
 	if err != nil {
 		c.AbortWithError(http.StatusInternalServerError, fmt.Errorf("create transaction: %w", err))
+		return
 	}
+
+	c.JSON(http.StatusOK, transaction)
 }
diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
new file mode 100644
index 0000000..d493689
--- /dev/null
+++ b/web/src/components/TransactionInputRow.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
+import { useAccountStore } from '../stores/budget-account'
+
+const props = defineProps<{
+    budgetid: string
+    accountid: string
+}>()
+
+const TransactionDate = ref(new Date().toISOString().substring(0, 10));
+const Payee = ref<Suggestion | undefined>(undefined);
+const Category = ref<Suggestion | undefined>(undefined);
+const Memo = ref("");
+const Amount = ref("0");
+
+const payload = computed(() => JSON.stringify({
+    budget_id: props.budgetid,
+    account_id: props.accountid,
+    date: TransactionDate.value,
+    payee: Payee.value,
+    category: Category.value,
+    memo: Memo.value,
+    amount: Amount.value,
+    state: "Uncleared"
+}));
+
+const accountStore = useAccountStore();
+function saveTransaction(e: MouseEvent) {
+    e.preventDefault();
+    accountStore.saveTransaction(payload.value);
+}
+</script>
+
+<template>
+    <tr>
+        <td style="width: 90px;" class="text-sm">
+            <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
+        </td>
+        <td style="max-width: 150px;">
+            <Autocomplete v-model="Payee" type="payees" />
+        </td>
+        <td style="max-width: 200px;">
+            <Autocomplete v-model="Category" type="categories" />
+        </td>
+        <td>
+            <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
+        </td>
+        <td style="width: 80px;" class="text-right">
+            <input
+                class="text-right block w-full border-b-2 border-black"
+                type="currency"
+                v-model="Amount"
+            />
+        </td>
+        <td style="width: 20px;">
+            <input type="submit" @click="saveTransaction" value="Save" />
+        </td>
+        <td style="width: 20px;"></td>
+    </tr>
+</template>
\ No newline at end of file
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index dcc7905..af169bf 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue"
-import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
-import { POST } from "../api";
+import TransactionInputRow from "../components/TransactionInputRow.vue";
 import { useAccountStore } from "../stores/budget-account";
 
 const props = defineProps<{
@@ -11,27 +10,6 @@ const props = defineProps<{
   accountid: string
 }>()
 
-const TransactionDate = ref(new Date().toISOString().substring(0, 10));
-const Payee = ref<Suggestion | undefined>(undefined);
-const Category = ref<Suggestion | undefined>(undefined);
-const Memo = ref("");
-const Amount = ref(0);
-
-function saveTransaction(e: MouseEvent) {
-    e.preventDefault();
-    POST("/transaction/new", JSON.stringify({
-        budget_id: props.budgetid,
-        account_id: props.accountid,
-        date: TransactionDate.value,
-        payee: Payee.value,
-        category: Category.value,
-        memo: Memo.value,
-        amount: Amount,
-        state: "Uncleared"
-    }))
-        .then(x => x.json());
-}
-
 const accountStore = useAccountStore();
 const CurrentAccount = computed(() => accountStore.CurrentAccount);
 const TransactionsList = computed(() => accountStore.TransactionsList);
@@ -53,31 +31,7 @@ const TransactionsList = computed(() => accountStore.TransactionsList);
             <td style="width: 20px;"></td>
             <td style="width: 20px;"></td>
         </tr>
-        <tr>
-            <td style="width: 90px;" class="text-sm">
-                <input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
-            </td>
-            <td style="max-width: 150px;">
-                <Autocomplete v-model="Payee" type="payees" />
-            </td>
-            <td style="max-width: 200px;">
-                <Autocomplete v-model="Category" type="categories" />
-            </td>
-            <td>
-                <input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
-            </td>
-            <td style="width: 80px;" class="text-right">
-                <input
-                    class="text-right block w-full border-b-2 border-black"
-                    type="currency"
-                    v-model="Amount"
-                />
-            </td>
-            <td style="width: 20px;">
-                <input type="submit" @click="saveTransaction" value="Save" />
-            </td>
-            <td style="width: 20px;"></td>
-        </tr>
+        <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
             v-for="(transaction, index) in TransactionsList"
             :transaction="transaction"
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index a56f0fc..d0903fe 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import { GET } from "../api";
+import { GET, POST } from "../api";
 import { useSessionStore } from "./session";
 
 interface State {
@@ -7,7 +7,7 @@ interface State {
     CurrentAccountID: string | null,
     Categories: Map<string, Category>,
     Months: Map<number, Map<number, Map<string, Category>>>,
-    Transactions: [],
+    Transactions: any[],
     Assignments: []
 }
 
@@ -16,7 +16,7 @@ export interface Transaction {
     Date: string,
     TransferAccount: string,
     CategoryGroup: string,
-    Category:string,
+    Category: string,
     Memo: string,
     Status: string,
     GroupID: string,
@@ -69,13 +69,13 @@ export const useAccountStore = defineStore("budget/account", {
         OnBudgetAccounts(state) {
             return [...state.Accounts.values()].filter(x => x.OnBudget);
         },
-        OnBudgetAccountsBalance(state) : number {
+        OnBudgetAccountsBalance(state): number {
             return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
         },
         OffBudgetAccounts(state) {
             return [...state.Accounts.values()].filter(x => !x.OnBudget);
         },
-        OffBudgetAccountsBalance(state) : number {
+        OffBudgetAccountsBalance(state): number {
             return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
         },
         TransactionsList(state) {
@@ -119,6 +119,11 @@ export const useAccountStore = defineStore("budget/account", {
         logout() {
             this.$reset()
         },
+        async saveTransaction(payload: string) {
+            const result = await POST("/transaction/new", payload);
+            const response = await result.json();
+            this.Transactions.unshift(response);
+        }
     }
 
 })