diff --git a/keepr.client/src/components/KeepModalButtons.vue b/keepr.client/src/components/KeepModalButtons.vue
index 7c24452..5b4937b 100644
--- a/keepr.client/src/components/KeepModalButtons.vue
+++ b/keepr.client/src/components/KeepModalButtons.vue
@@ -13,7 +13,7 @@
 
       <!-- account is empty... -->
 
-      <i v-show="account.id == keep.creatorId" class="mdi mdi-delete-outline text-secondary" title="Delete"></i>
+      <i v-show="account.id == keep.creatorId" @click="deleteKeep()" class="mdi mdi-delete-outline text-secondary" title="Delete"></i>
 
     </div>
 
@@ -31,6 +31,7 @@ import { computed } from 'vue'
 import { Modal } from 'bootstrap'
 import { logger } from '../utils/Logger.js'
 import { useRouter } from 'vue-router'
+import { keepsService } from '../services/KeepsService'
 export default {
   props: {
     keep: {
@@ -52,12 +53,19 @@ export default {
     const router = useRouter()
     return {
       account: computed(() => AppState.account ),
+
       viewProfile() {
         // console.log(user.name)
         // AppState.activeProfile = props.keep.creator
         Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
         // logger.log(props.keep.creator.id)
         router.push({ name: "Profile", params: { id: props.keep.creator.id } });
+      },
+
+      async deleteKeep() {
+        await keepsService.delete(props.keep.id)
+        Modal.getOrCreateInstance(document.getElementById("keepModal")).hide();
+        // do more things
       }
     }
   }
diff --git a/keepr.client/src/components/NewKeepModal.vue b/keepr.client/src/components/NewKeepModal.vue
index 15eb566..6564707 100644
--- a/keepr.client/src/components/NewKeepModal.vue
+++ b/keepr.client/src/components/NewKeepModal.vue
@@ -61,6 +61,7 @@ export default {
           // ,tags: this.tags
         }
         await keepsService.create(newKeep)
+        Modal.getOrCreateInstance(document.getElementById("newKeepModal")).hide();
 
         // reload vaults
         // close modal
diff --git a/keepr.client/src/components/NewVaultModal.vue b/keepr.client/src/components/NewVaultModal.vue
index c67e164..f75296d 100644
--- a/keepr.client/src/components/NewVaultModal.vue
+++ b/keepr.client/src/components/NewVaultModal.vue
@@ -47,25 +47,14 @@ export default {
         isPrivate: false,
 
       async createVault() {
-        let newVault = {}
-        // assign default if img not specified
-        // if (this.img == "") {
-        //   newVault = {
-        //     name: this.name,
-        //     isPrivate: this.isPrivate
-        //   }
-        // } else {
-          newVault = {
+        let newVault = {
             name: this.name,
             img: this.img,
             isPrivate: this.isPrivate
           }
-        // }
 
-        await vaultsService.createVault(this.newVault)
-
-        // reload vaults
-        // close modal
+        await vaultsService.createVault(newVault)
+        Modal.getOrCreateInstance(document.getElementById("newVaultModal")).hide();
       }
     }
   }
diff --git a/keepr.client/src/pages/ProfilePage.vue b/keepr.client/src/pages/ProfilePage.vue
index 5e28957..b9b3dd6 100644
--- a/keepr.client/src/pages/ProfilePage.vue
+++ b/keepr.client/src/pages/ProfilePage.vue
@@ -37,7 +37,9 @@
         <ProfileKeepTile v-for="k in keeps" :key="k.id" :keep="k" @click="viewKeep(k)" class="py-2" />
       </div>
     </div>
-    <KeepModal :keep="activeKeep" />
+    <KeepModal :keep="activeKeep">
+      <KeepModalButtons :keep="activeKeep" />
+    </KeepModal>
     <NewVaultModal />
     <NewKeepModal />
   </div>
@@ -55,6 +57,7 @@ import { keepsService } from '../services/KeepsService';
 import VaultTile from '../components/VaultTile.vue';
 import NewVaultModal from '../components/NewVaultModal.vue';
 import NewKeepModal from '../components/NewKeepModal.vue';
+import KeepModalButtons from '../components/KeepModalButtons.vue';
 export default {
     setup() {
         const router = useRouter();
@@ -95,7 +98,7 @@ export default {
             }
         };
     },
-    components: { VaultTile, NewVaultModal, NewKeepModal }
+    components: { VaultTile, NewVaultModal, NewKeepModal, KeepModalButtons }
 }
 </script>
 
diff --git a/keepr.client/src/services/KeepsService.js b/keepr.client/src/services/KeepsService.js
index 76d8b3b..d481ced 100644
--- a/keepr.client/src/services/KeepsService.js
+++ b/keepr.client/src/services/KeepsService.js
@@ -1,6 +1,7 @@
 import { AppState } from '../AppState'
 import { logger } from '../utils/Logger'
 import { api } from './AxiosService'
+import Pop from '../utils/Pop'
 
 class KeepsService {
   async getAll() {
@@ -9,6 +10,7 @@ class KeepsService {
       AppState.keeps = res.data
     } catch (error) {
       logger.error(error)
+      Pop.error(error)
     }
   }
 
@@ -18,15 +20,33 @@ class KeepsService {
       AppState.keeps = res.data
     } catch (error) {
       logger.error(error)
+      Pop.error(error)
     }
   }
 
   async create(newKeep) {
     try {
       const res = await api.post('api/keeps', newKeep)
-      logger.log(res.data)
+      // logger.log(res.data)
+      AppState.profileKeeps.push(res.data)
+      AppState.keeps.push(res.data)
+      // this.getAll()
     } catch (error) {
       logger.error(error)
+      Pop.error(error)
+    }
+  }
+
+  async delete(keepId) {
+    try {
+      const res = await api.delete('api/keeps/' + keepId)
+      // logger.log(res.data)
+      // AppState.keeps.filter((k) => k.id != res.data)
+      // AppState.keeps.filter((k) => k.id != keepId)
+      this.getAll()
+    } catch (error) {
+      logger.error(error)
+      Pop.error(error)
     }
   }
 }
diff --git a/keepr.client/src/services/VaultsService.js b/keepr.client/src/services/VaultsService.js
index 1e64092..6ae15d5 100644
--- a/keepr.client/src/services/VaultsService.js
+++ b/keepr.client/src/services/VaultsService.js
@@ -24,7 +24,8 @@ class VaultsService {
   async createVault(vaultData) {
     try {
       const res = await api.post('api/vaults', vaultData)
-      logger.log(res.data)
+      // logger.log(res.data)
+      AppState.profileVaults.push(res.data)
     } catch (error) {
       logger.error(error)
     }