diff --git a/budgit.client/src/components/AddTransaction.vue b/budgit.client/src/components/AddTransaction.vue
index c2ad728..4c7a5ef 100644
--- a/budgit.client/src/components/AddTransaction.vue
+++ b/budgit.client/src/components/AddTransaction.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-800 mb-2">
+  <form class="component flex flex-wrap md:flex-nowrap justify-between bg-stone-700 mb-2" @submit.prevent="create">
     <div class="pr-4">
-      <input type="date" v-model="transData.date" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
+      <input type="date" v-model="transData.date" class="text-slate-50 bg-stone-700 w-32 hover:bg-green-200 hover:text-stone-900">
     </div>
     <div class="pr-4">
       <!-- TODO this is bad! don't manipulate the prop -->
@@ -9,29 +9,29 @@
       <!-- use editable object -->
       <span class="flex">
         $
-        <input type="number" v-model="transData.amount" :placeholder="transData.amount" class="w-24 bg-stone-800 text-slate-50 hover:bg-green-300 hover:text-stone-900">
+        <input type="number" v-model="transData.amount" placeholder="Amount" class="w-24 bg-stone-700 text-slate-50 hover:bg-green-200 hover:text-stone-900">
       </span>
     </div>
     <div class="pr-4">
-        <input type="text" v-model="transData.payee" :placeholder="transData.payee" class="text-slate-50 bg-stone-800 w-32 hover:bg-green-300 hover:text-stone-900">
+        <input type="text" v-model="transData.payee" placeholder="Payee" class="text-slate-50 bg-stone-700 w-32 hover:bg-green-200 hover:text-stone-900">
     </div>
     <div class="pr-4">
-      <select v-model="transData.categoryId" class="text-slate-50 bg-stone-800 w-36 hover:bg-green-300 hover:text-stone-900">
-        <option :value="transData.categoryId" selected>{{categories.find((c) => c._id == transData.categoryId)?.name}}</option>
+      <select v-model="transData.categoryId" class="text-slate-50 bg-stone-700 w-36 hover:bg-green-200 hover:text-stone-900">
+        <option value="" disabled selected>Category</option>
         <!-- cat?.name - null coalescence - returns value iff object is valid -->
         <!-- TODO there's an error here but it works??? -->
         <option v-for="c in categories" :value="c._id">{{c.name}}</option>
       </select>
     </div>
-    <div class="pr-4">
-      <input type="text" v-model="transData.comment" :placeholder="transData.comment" class="text-slate-50 bg-stone-800 w-48 hover:bg-green-300 hover:text-stone-900">
+    <div class="w-full pr-4">
+      <input type="text" v-model="transData.comment" placeholder="Comment" class="text-slate-50 bg-stone-700 w-full hover:bg-green-200 hover:text-stone-900">
     </div>
     <div>
-      <button class="text-slate-50 bg-stone-800 w-16 hover:bg-green-300 hover:text-stone-900" @click="update">
-        Save
+      <button class="text-slate-50 bg-stone-700 px-2 hover:bg-green-200 hover:text-stone-900" action="submit">
+        Add
       </button>
     </div>
-  </div>
+  </form>
 </template>
 
 
@@ -44,31 +44,51 @@ import { computed, reactive, onMounted, ref, watchEffect } from "vue";
 export default {
   // TODO there's probably something wrong with this...
   props: {
-    transaction: {
-      type: Object,
-      required: true
-    },
     categories: {
       type: Object,
       required: true
     }
   },
   setup(props){
-    // create editable object and use watchEffect
-    const transData = ref({})
-    watchEffect(() => {
-      transData.value = props.transaction
-      // whatever this doesn't work because WHYNOT
-      // transData.dollars = props.transaction.amount / 100
-    })
+    // // create editable object and use watchEffect
+    // const transData = ref({})
+    // watchEffect(() => {
+    //   transData.value = props.transaction
+    //   // whatever this doesn't work because WHYNOT
+    //   // transData.dollars = props.transaction.amount / 100
+    // })
     return {
-      transData,
-      async update() {
-        // console.log(props.transaction)
-        // send off request to update transaction
+      transData: {
+        date: new Date().toISOString().slice(0,10),
+        amount: 0,
+        payee: '',
+        categoryId: '',
+        comment: ''
+      },
+      // async update() {
+      //   // console.log(props.transaction)
+      //   // send off request to update transaction
+      //   try {
+      //     // use the editable object instead
+      //     await transactionsService.update(transData.value)
+      //   } catch (error) {
+      //     console.log(error)
+      //   }
+      // }
+      async create() {
+        console.log('create triggered')
         try {
-          // use the editable object instead
-          await transactionsService.update(transData.value)
+          // TODO WHY is it creating twice? (FIXED)
+          // TODO certain requests are 400 errors - sanitize
+          await transactionsService.create(this.transData)
+          // TODO empty after creation (not working)
+          this.transData = {
+            date: new Date().toISOString().slice(0,10),
+            amount: 0,
+            payee: '',
+            categoryId: '',
+            comment: ''
+          }
         } catch (error) {
           console.log(error)
         }
diff --git a/budgit.client/src/components/Transaction.vue b/budgit.client/src/components/Transaction.vue
index 327692f..4017f00 100644
--- a/budgit.client/src/components/Transaction.vue
+++ b/budgit.client/src/components/Transaction.vue
@@ -81,6 +81,11 @@ export default {
       async remove() {
         // TODO need to write CRUD method for this
         // probably good to write an Are-you-sure Modal too...
+        try {
+          await transactionsService.remove(props.transaction._id)
+        } catch (error) {
+          console.log(error)
+        }
       }
     }
   }
diff --git a/budgit.client/src/pages/TransactionsPage.vue b/budgit.client/src/pages/TransactionsPage.vue
index 3c96416..a577e41 100644
--- a/budgit.client/src/pages/TransactionsPage.vue
+++ b/budgit.client/src/pages/TransactionsPage.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="component">
     <div class="flex mt-6 md:mx-40 flex-col">
+      <AddTransaction :categories="categories" />
       <Transaction v-for="t in transactions" :key="t._id" :transaction="t" :categories="categories" />
     </div>
   </div>
@@ -13,22 +14,25 @@ import { AppState } from '../AppState'
 import { categoriesService } from '../services/CategoriesService'
 import { transactionsService } from '../services/TransactionsService'
 import { logger } from '../utils/Logger'
+import AddTransaction from '../components/AddTransaction.vue'
 
 export default {
-  setup(){
-    onMounted(async () => {
-      try {
-        await categoriesService.getAll()
-        await transactionsService.getAll()
-      } catch (error) {
-        logger.log(error)
-      }
-    })
-    return {
-      transactions: computed(() => AppState.transactions),
-      categories: computed(() => AppState.categories)
-    }
-  }
+    setup() {
+        onMounted(async () => {
+            try {
+                await categoriesService.getAll();
+                await transactionsService.getAll();
+            }
+            catch (error) {
+                logger.log(error);
+            }
+        });
+        return {
+            transactions: computed(() => AppState.transactions),
+            categories: computed(() => AppState.categories)
+        };
+    },
+    components: { AddTransaction }
 }
 </script>
 
diff --git a/budgit.client/src/services/TransactionsService.js b/budgit.client/src/services/TransactionsService.js
index b69ff43..2cdbe0f 100644
--- a/budgit.client/src/services/TransactionsService.js
+++ b/budgit.client/src/services/TransactionsService.js
@@ -27,6 +27,21 @@ class TransactionsService {
     // console.log('transactionUpdate: ' + res.data)
     // AppState.transactions.find((t) => t._id == transactionId) = res.data
   }
+
+  async create(transaction) {
+    const res = await api.post('api/transactions/', transaction)
+    // console.log(res.data)
+    AppState.transactions.push(res.data)
+  }
+
+  // TODO fix bug when deleting multiple sometimes gives 400 error
+  // accountId DNE? maybe bad data?
+  // i think it's just the button clicking before updated response?
+  async remove(id) {
+    const res = await api.delete('api/transactions/' + id)
+    // console.log(res.data)
+    AppState.transactions = res.data
+  }
 }
 
 export const transactionsService = new TransactionsService()
\ No newline at end of file
diff --git a/budgit/server/controllers/TransactionsController.js b/budgit/server/controllers/TransactionsController.js
index 0ccd706..e6e5d4a 100644
--- a/budgit/server/controllers/TransactionsController.js
+++ b/budgit/server/controllers/TransactionsController.js
@@ -25,6 +25,7 @@ export class TransactionsController extends BaseController {
       .post('', this.create)
       .get('', this.getAll)
       .put('/:id', this.update)
+      .delete('/:id', this.remove)
   }
 
   async create(req, res, next) {
@@ -50,7 +51,7 @@ export class TransactionsController extends BaseController {
   async update(req, res, next) {
     try {
       // I'm tired of losing the people I love...
-      logger.log(req)
+      // logger.log(req)
       const updatedTransaction = await transactionsService.update(req.userInfo.id, req.params.id, req.body)
       // I'm tired of not being enough...
       return res.send(updatedTransaction)
@@ -59,4 +60,13 @@ export class TransactionsController extends BaseController {
       next(error)
     }
   }
+
+  async remove(req, res, next) {
+    try {
+      const transList = await transactionsService.remove(req.userInfo.id, req.params.id)
+      return res.send(transList)
+    } catch (error) {
+      next(error)
+    }
+  }
 }
\ No newline at end of file
diff --git a/budgit/server/services/TransactionsService.js b/budgit/server/services/TransactionsService.js
index 4836b65..1c14064 100644
--- a/budgit/server/services/TransactionsService.js
+++ b/budgit/server/services/TransactionsService.js
@@ -25,11 +25,14 @@ async update(accountId, transactionId, update) {
     throw new BadRequest('Bad transaction id')
   }
   let original = await dbContext.Transactions.findById(transactionId)
+  if (!update) {
+    throw new BadRequest('Transcaction DNE')
+  }
   if (accountId != original.accountId) {
     throw new BadRequest('Das nacho transaction')
   }
-  logger.log('original: ' + original)
-  logger.log('update: ' + update)
+  // logger.log('original: ' + original)
+  // logger.log('update: ' + update)
   original.categoryId = update.categoryId || original.categoryId
   original.amount = update.amount || original.amount
   original.date = update.date || original.date
@@ -39,6 +42,21 @@ async update(accountId, transactionId, update) {
   return update
 }
 
+async remove(accountId, transactionId) {
+  if (!transactionId) {
+    throw new BadRequest('Bad transaction id')
+  }
+  const original = await dbContext.Transactions.findById(transactionId)
+  if (!original) {
+    throw new BadRequest('Transaction DNE')
+  }
+  if (original.accountId != accountId) {
+    throw new BadRequest('Das nacho transaction')
+  }
+  await dbContext.Transactions.findByIdAndRemove(transactionId)
+  return await this.getAll(accountId)
+}
+
 
 }