diff --git a/server/reconcile.go b/server/reconcile.go
index d60d575..d2c44bf 100644
--- a/server/reconcile.go
+++ b/server/reconcile.go
@@ -13,8 +13,8 @@ import (
 )
 
 type ReconcileTransactionsRequest struct {
-	TransactionIDs                 []uuid.UUID     `json:"transactionIds"`
-	ReconcilationTransactionAmount numeric.Numeric `json:"reconciliationTransactionAmount"`
+	TransactionIDs                 []uuid.UUID `json:"transactionIds"`
+	ReconcilationTransactionAmount string      `json:"reconciliationTransactionAmount"`
 }
 
 type ReconcileTransactionsResponse struct {
@@ -37,6 +37,13 @@ func (h *Handler) reconcileTransactions(c *gin.Context) {
 		return
 	}
 
+	var amount numeric.Numeric
+	err = amount.Set(request.ReconcilationTransactionAmount)
+	if err != nil {
+		c.AbortWithError(http.StatusBadRequest, fmt.Errorf("parse request: %w", err))
+		return
+	}
+
 	tx, err := h.Service.BeginTx(c.Request.Context(), &sql.TxOptions{})
 	if err != nil {
 		c.AbortWithError(http.StatusInternalServerError, fmt.Errorf("begin tx: %w", err))
@@ -52,7 +59,7 @@ func (h *Handler) reconcileTransactions(c *gin.Context) {
 		}
 	}
 
-	reconciliationTransaction, err := h.CreateReconcilationTransaction(request, accountUUID, db, c)
+	reconciliationTransaction, err := h.CreateReconcilationTransaction(amount, accountUUID, db, c)
 	if err != nil {
 		c.AbortWithError(http.StatusInternalServerError, fmt.Errorf("insert new transaction: %w", err))
 		return
@@ -70,15 +77,15 @@ func (h *Handler) reconcileTransactions(c *gin.Context) {
 	})
 }
 
-func (*Handler) CreateReconcilationTransaction(request ReconcileTransactionsRequest, accountUUID uuid.UUID, db *postgres.Queries, c *gin.Context) (*postgres.DisplayTransaction, error) {
-	if request.ReconcilationTransactionAmount.IsZero() {
+func (*Handler) CreateReconcilationTransaction(amount numeric.Numeric, accountUUID uuid.UUID, db *postgres.Queries, c *gin.Context) (*postgres.DisplayTransaction, error) {
+	if amount.IsZero() {
 		return nil, nil //nolint: nilnil
 	}
 
 	createTransaction := postgres.CreateTransactionParams{
 		Date:      time.Now(),
 		Memo:      "Reconciliation Transaction",
-		Amount:    request.ReconcilationTransactionAmount,
+		Amount:    amount,
 		AccountID: accountUUID,
 		Status:    "Reconciled",
 	}
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index a54d4d5..9f65aa8 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -31,7 +31,7 @@ function submitReconcilation() {
 }
 
 function createReconcilationTransaction() {
-    const diff = accounts.ReconcilingBalance - TargetReconcilingBalance.value;
+    const diff = TargetReconcilingBalance.value - accounts.ReconcilingBalance ;
     accounts.SubmitReconcilation(diff);
     accounts.Reconciling = false;
 }
@@ -91,7 +91,7 @@ function createReconcilationTransaction() {
         </tr>
         <TransactionInputRow :budgetid="budgetid" :accountid="accountid" />
         <TransactionRow
-            v-for="(transaction, index) in accounts.TransactionsList"
+            v-for="(transaction, index) in accounts.TransactionsList" :key="transaction.ID"
             :transaction="transaction"
             :index="index"
         />
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index aca3a72..c79dc10 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -135,13 +135,16 @@ export const useAccountStore = defineStore("budget/account", {
             useSessionStore().setTitle(account.Name);
             await this.FetchAccount(account);
         },
+        AddTransaction(account: Account, transaction: any) {
+            transaction.Date = new Date(transaction.Date);
+            this.Transactions.set(transaction.ID, transaction);
+        },
         async FetchAccount(account: Account) {
             const result = await GET("/account/" + account.ID + "/transactions");
             const response = await result.json();
             account.Transactions = [];
             for (const transaction of response.Transactions) {
-                transaction.Date = new Date(transaction.Date);
-                this.Transactions.set(transaction.ID, transaction);
+                this.AddTransaction(account, transaction);
                 account.Transactions.push(transaction.ID);
             }
         },
@@ -177,7 +180,7 @@ export const useAccountStore = defineStore("budget/account", {
                 transaction.Reconciled = value;
             }
         },
-        async SubmitReconcilation(reconciliationTransactionAmount : number) {
+        async SubmitReconcilation(reconciliationTransactionAmount: number) {
             const account = this.CurrentAccount!;
             const reconciledTransactions = this.TransactionsList.filter(x => x.Reconciled);
             for (const transaction of reconciledTransactions) {
@@ -187,9 +190,14 @@ export const useAccountStore = defineStore("budget/account", {
             }
             const result = await POST("/account/" + this.CurrentAccountID + "/reconcile", JSON.stringify({
                 transactionIDs: reconciledTransactions.map(x => x.ID),
-                reconciliationTransactionAmount: reconciliationTransactionAmount,
+                reconciliationTransactionAmount: reconciliationTransactionAmount.toString(),
             }));
             const response = await result.json();
+            const recTrans = response.ReconciliationTransaction;
+            if (recTrans) {
+                this.AddTransaction(account, recTrans);
+                account.Transactions.unshift(recTrans.ID);
+            }
             console.log("Reconcile: " + response.message);
         },
         logout() {