diff --git a/web/src/components/TransactionInputRow.vue b/web/src/components/TransactionInputRow.vue
index 9eb3da8..1a1d8e8 100644
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@@ -3,6 +3,7 @@ import { computed, ref } from "vue";
 import Autocomplete from '../components/Autocomplete.vue'
 import { Transaction, useTransactionsStore } from "../stores/transactions";
 import DateInput from "./DateInput.vue";
+import Button from "./Button.vue";
 
 const props = defineProps<{
     budgetid: string
@@ -51,28 +52,27 @@ function saveTransaction(e: MouseEvent) {
 
 <template>
     <tr>
-        <td style="width: 90px;" class="text-sm">
+        <td class="text-sm">
             <DateInput class="border-b-2 border-black" v-model="TX.Date" />
         </td>
-        <td style="max-width: 150px;">
+        <td>
             <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
         </td>
-        <td style="max-width: 200px;">
+        <td>
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
         <td>
             <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
-        <td style="width: 80px;" class="text-right">
+        <td class="text-right">
             <input
                 class="text-right block w-full border-b-2 border-black"
                 type="currency"
                 v-model="TX.Amount"
             />
         </td>
-        <td style="width: 20px;">
-            <input type="submit" @click="saveTransaction" value="Save" />
+        <td>
+            <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
         </td>
-        <td style="width: 20px;"></td>
     </tr>
 </template>
\ No newline at end of file