diff --git a/.DS_Store b/.DS_Store
index 8de36d7..0980c60 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/keepr.client/index.html b/keepr.client/index.html
index 55d92f8..b8a5140 100644
--- a/keepr.client/index.html
+++ b/keepr.client/index.html
@@ -5,15 +5,15 @@
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <link rel="icon" href="https://bcw.blob.core.windows.net/public/img/9977764104160066" />
+  <link rel="icon" href="src/assets/img/letter-k.png" />
   <title>
-    keepr.client
+    Keepr
   </title>
 </head>
 
 <body>
   <noscript>
-    <strong>We're sorry but keepr.client doesn't work properly without JavaScript
+    <strong>We're sorry but Keepr doesn't work properly without JavaScript
       enabled. Please enable it to continue.</strong>
   </noscript>
   <div id="app"></div>
diff --git a/keepr.client/src/App.vue b/keepr.client/src/App.vue
index 0b1eee4..2da5bf2 100644
--- a/keepr.client/src/App.vue
+++ b/keepr.client/src/App.vue
@@ -6,8 +6,8 @@
     <router-view />
   </main>
   <footer>
-    <div class="bg-dark text-light text-center p-4">
-      Made with 💖 by CodeWorks
+    <div class="bg-dark text-light p-4">
+      An <a href="https://github.com/annikyet">Annika</a> project.
     </div>
   </footer>
 </template>
diff --git a/keepr.client/src/assets/img/letter-k.png b/keepr.client/src/assets/img/letter-k.png
new file mode 100644
index 0000000..62ba051
Binary files /dev/null and b/keepr.client/src/assets/img/letter-k.png differ
diff --git a/keepr.client/src/components/Attribution.vue b/keepr.client/src/components/Attribution.vue
index 206a28b..e117ace 100644
--- a/keepr.client/src/components/Attribution.vue
+++ b/keepr.client/src/components/Attribution.vue
@@ -1 +1,2 @@
-<!-- <a href="https://www.freepik.com/vectors/404">404 vector created by freepik - www.freepik.com</a> -->
\ No newline at end of file
+<!-- <a href="https://www.freepik.com/vectors/404">404 vector created by freepik - www.freepik.com</a> -->
+<!-- <a href="https://www.flaticon.com/free-icons/k" title="k icons">K icons created by Icon.doit - Flaticon</a> -->
\ No newline at end of file
diff --git a/keepr.client/src/components/KeepTile.vue b/keepr.client/src/components/KeepTile.vue
index da9ba67..c6d9c60 100644
--- a/keepr.client/src/components/KeepTile.vue
+++ b/keepr.client/src/components/KeepTile.vue
@@ -1,8 +1,8 @@
 <template>
   <div @click="viewKeep()" class="component">
-    <div class="card bg-dark text-white">
+    <div class="card bg-dark text-white border-0 rounded-3">
       <!-- TODO check if keep.img is a valid image -->
-      <img :src="keep.img" class="card-img" :alt="keep.name">
+      <img :src="keep.img" class="card-img rounded-3" :alt="keep.name">
       <div class="card-img-overlay d-flex justify-content-between align-items-end">
         <h5 class="card-title">{{ keep.name }}</h5>
         <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid profile-pic">
diff --git a/keepr.client/src/components/NewKeepModal.vue b/keepr.client/src/components/NewKeepModal.vue
new file mode 100644
index 0000000..15eb566
--- /dev/null
+++ b/keepr.client/src/components/NewKeepModal.vue
@@ -0,0 +1,75 @@
+ <template>
+  <div class="component">
+    <div class="modal fade" id="newKeepModal" tabindex="-1" aria-labelledby="newKeepModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="cardp p-3">
+            <div class="d-flex justify-content-end">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <h3 class="card-title">New Keep</h3>
+            <!-- <form> -->
+            <div class="mb-1">
+              <label for="keepTitle" class="form-label">Title</label>
+              <input type="text" id="keepTitle" name="keepTitle" v-model="name" placeholder="Title..."
+                class="form-control">
+            </div>
+            <div class="mb-1">
+              <label for="keepImg" class="form-label">Image URL</label>
+              <input type="text" id="keepImg" name="keepImg" v-model="img" placeholder="URL..." class="form-control">
+            </div>
+            <div class="mb-1">
+              <label for="vaultIsPrivate" class="form-check-label">Description</label>
+              <textarea name="keepDescription" id="keepDescription" v-model="description"
+                placeholder="Keep Description..." rows="5" class="form-control"></textarea>
+            </div>
+            <div class="mb-1">
+              <label for="keepTags" class="form-label">Tags</label>
+              <input type="text" id="keepTags" name="keepTags" v-model="img" placeholder="Tags..." class="form-control">
+            </div>
+            <button @click="createKeep()" class="btn btn-primary">Create</button>
+            <!-- </form> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+ 
+ <script>
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+import { vaultsService } from '../services/VaultsService'
+import { keepsService } from '../services/KeepsService'
+export default {
+  setup() {
+    return {
+      name: "",
+      img: "",
+      description: "",
+      tags: "",
+
+      async createKeep() {
+        let newKeep = {
+          name: this.name,
+          img: this.img,
+          description: this.description
+          // ,tags: this.tags
+        }
+        await keepsService.create(newKeep)
+
+        // reload vaults
+        // close modal
+      }
+    }
+  }
+}
+</script>
+ 
+ 
+ <style lang="scss" scoped>
+ </style>
\ No newline at end of file
diff --git a/keepr.client/src/components/NewVaultModal.vue b/keepr.client/src/components/NewVaultModal.vue
new file mode 100644
index 0000000..c67e164
--- /dev/null
+++ b/keepr.client/src/components/NewVaultModal.vue
@@ -0,0 +1,78 @@
+ <template>
+  <div class="component">
+    <div class="modal fade" id="newVaultModal" tabindex="-1" aria-labelledby="newVaultModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="cardp p-3">
+            <div class="d-flex justify-content-end">
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <h3 class="card-title">New Vault</h3>
+            <!-- <form> -->
+              <div class="mb-1">
+                <label for="vaultTitle" class="form-label">Title</label>
+                <input type="text" id="vaultText" name="vaultText" v-model="name" placeholder="Title..." class="form-control">
+              </div>
+              <div class="mb-1">
+                <label for="vaultImg" class="form-label">Image URL</label>
+                <input type="text" id="vaultImg" name="vaultImg" v-model="img" placeholder="URL..." class="form-control">
+              </div>
+              <div class="mb-1">
+                <input type="checkbox" id="vaultIsPrivate" name="vaultIsPrivate" v-model="isPrivate" class="form-check-input">
+                <label for="vaultIsPrivate" class="form-check-label">Private?</label>
+                <p id="vaultIsPrivateInline" class="form-text">Private Vaults can only be seen by you</p>
+              </div>
+              <button @click="createVault()" class="btn btn-primary">Create</button>
+            <!-- </form> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+ 
+ <script>
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+import { vaultsService } from '../services/VaultsService'
+export default {
+  setup() {
+    return {
+        name: "",
+        img: "",
+        isPrivate: false,
+
+      async createVault() {
+        let newVault = {}
+        // assign default if img not specified
+        // if (this.img == "") {
+        //   newVault = {
+        //     name: this.name,
+        //     isPrivate: this.isPrivate
+        //   }
+        // } else {
+          newVault = {
+            name: this.name,
+            img: this.img,
+            isPrivate: this.isPrivate
+          }
+        // }
+
+        await vaultsService.createVault(this.newVault)
+
+        // reload vaults
+        // close modal
+      }
+    }
+  }
+}
+</script>
+ 
+ 
+ <style lang="scss" scoped>
+ 
+ </style>
\ No newline at end of file
diff --git a/keepr.client/src/components/ProfileKeepTile.vue b/keepr.client/src/components/ProfileKeepTile.vue
index 8af628d..b7bbd94 100644
--- a/keepr.client/src/components/ProfileKeepTile.vue
+++ b/keepr.client/src/components/ProfileKeepTile.vue
@@ -1,8 +1,8 @@
 <template>
   <div @click="viewKeep()" class="component">
-    <div class="card bg-dark text-white">
+    <div class="card bg-dark text-white border-0 rounded-3">
       <!-- TODO check if keep.img is a valid image -->
-      <img :src="keep.img" class="card-img" :alt="keep.name">
+      <img :src="keep.img" class="card-img rounded-3" :alt="keep.name">
       <div class="card-img-overlay d-flex justify-content-between align-items-end">
         <h5 class="card-title">{{ keep.name }}</h5>
       </div>
diff --git a/keepr.client/src/components/VaultKeepModal.vue b/keepr.client/src/components/VaultKeepModal.vue
new file mode 100644
index 0000000..f4c4030
--- /dev/null
+++ b/keepr.client/src/components/VaultKeepModal.vue
@@ -0,0 +1,105 @@
+ <template>
+  <div class="component">
+    <div class="modal fade" id="keepModal" tabindex="-1" aria-labelledby="keepModalLabel" aria-hidden="true">
+      <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content">
+          <div class="card">
+            <div class="row">
+              <div class="col-6">
+                <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
+              </div>
+              <div class="col-6">
+                <div class="card-body">
+                  <div class="d-flex flex-column justify-content-between">
+                    <div>
+                      <div class="d-flex justify-content-end">
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                      </div>
+                      <div class="d-flex justify-content-center">
+                        <p>social medi</p>
+                        <p>social medi</p>
+                        <p>social medi</p>
+                      </div>
+                      <h5 class="card-title text-center">{{ keep?.name }}</h5>
+                      <p class="card-text">{{ keep?.description }}</p>
+                    </div>
+                    <hr>
+                    <div class="d-flex justify-content-between">
+                      <button class="btn btn-primary">add to vault</button>
+                      <!-- account is empty... -->
+                      <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
+                      <div @click="viewProfile(keep?.creator)">
+                        <img :src="keep?.creator?.picture" :alt="keep?.creator?.name">
+                        <p>{{ keep?.creator?.name }}</p>
+                      </div>  
+                    </div>
+                  </div>
+                  <!-- tags -->
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+
+
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+ 
+ 
+ <script>
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+export default {
+  props: {
+    keep: {
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      views: Number,
+      kept: Number,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
+    }
+  },
+  setup(props) {
+    // console.log(AppState.account)
+    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}})
+      }
+    }
+  }
+}
+</script>
+ 
+ 
+ <style lang="scss" scoped>
+ .modal-content {
+   // width: 84vw;
+   // height: calc(100vh - 16vw);
+   // margin: 8vw;
+ }
+ 
+ .img-fluid {
+   width: 100%;
+ }
+ </style>
\ No newline at end of file
diff --git a/keepr.client/src/components/VaultTile.vue b/keepr.client/src/components/VaultTile.vue
index 0a4fc98..0c289be 100644
--- a/keepr.client/src/components/VaultTile.vue
+++ b/keepr.client/src/components/VaultTile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="component">
-    <div class="card text-white">
-      <img :src="vault.img" :alt="vault.name" class="vault-img">
+    <div class="card text-white rounded-3 border-0">
+      <img :src="vault.img" :alt="vault.name" class="vault-img rounded-3">
       <div class="card-img-overlay d-flex align-items-end">
         <h5 class="card-title">{{vault.name}}</h5>
       </div>
diff --git a/keepr.client/src/pages/HomePage.vue b/keepr.client/src/pages/HomePage.vue
index b118048..e9a6877 100644
--- a/keepr.client/src/pages/HomePage.vue
+++ b/keepr.client/src/pages/HomePage.vue
@@ -2,7 +2,7 @@
   <!-- TODO add masonry later -->
   <div class="container-fluid px-md-5 pt-4">
     <div class="masonry-frame">
-      <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="p-2">
+      <div v-for="k in keeps" :key="k.id" @click="viewKeep(k)" class="py-2">
       <!-- <img src="../assets/img/404.svg" alt=""> TODO use this as default img in DB-->
         <KeepTile :keep="k" />
       </div>
diff --git a/keepr.client/src/pages/ProfilePage.vue b/keepr.client/src/pages/ProfilePage.vue
index 668b6bf..5e28957 100644
--- a/keepr.client/src/pages/ProfilePage.vue
+++ b/keepr.client/src/pages/ProfilePage.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="component">
     <div class="container">
-      <div class="row">
+      <div class="row mt-5">
         <div class="d-flex">
-          <img :src="profile?.picture" :alt="profile?.name" class="profile-pic">
-          <div class="d-flex flex-column">
-            <h3>{{profile?.name}}</h3>
-            <h5>Vaults: {{vaults?.length}}</h5>
-            <h5>Keeps: {{keeps?.length}}</h5>
+          <img :src="profile?.picture" :alt="profile?.name" class="profile-pic rounded-3">
+          <div class="d-flex flex-column ps-4">
+            <h3 class="profile-name">{{profile?.name}}</h3>
+            <h5 class="profile-stats">Vaults: {{vaults?.length}}</h5>
+            <h5 class="profile-stats">Keeps: {{keeps?.length}}</h5>
           </div>
         </div>
       </div>
       
-      <div class="row">
-        <h4>
+      <div class="row mt-5">
+        <h4 class="profile-heading">
           Vaults
-          <i class="mdi mdi-plus"></i>
+          <i @click="newVault()" class="mdi mdi-plus"></i>
         </h4>
         <div class="col-12">
           <div class="row">
@@ -26,10 +26,10 @@
         </div>
       </div>
 
-      <div class="row">
-        <h4>
+      <div class="row mt-5">
+        <h4 class="profile-heading">
           Keeps
-          <i class="mdi mdi-plus"></i>
+          <i @click="newKeep()" class="mdi mdi-plus"></i>
         </h4>
       </div>
   <!-- masonry goes here -->
@@ -38,6 +38,8 @@
       </div>
     </div>
     <KeepModal :keep="activeKeep" />
+    <NewVaultModal />
+    <NewKeepModal />
   </div>
 </template>
 
@@ -51,6 +53,8 @@ import { useRouter, useRoute } from 'vue-router'
 import { Modal } from 'bootstrap'
 import { keepsService } from '../services/KeepsService';
 import VaultTile from '../components/VaultTile.vue';
+import NewVaultModal from '../components/NewVaultModal.vue';
+import NewKeepModal from '../components/NewKeepModal.vue';
 export default {
     setup() {
         const router = useRouter();
@@ -80,18 +84,26 @@ export default {
 
             async viewVault(vault) {
               router.push({name: 'Vault', params: {id: vault.id}})
+            },
+
+            newVault() {
+              Modal.getOrCreateInstance(document.getElementById('newVaultModal')).show()
+            },
+
+            newKeep() {
+              Modal.getOrCreateInstance(document.getElementById('newKeepModal')).show()
             }
         };
     },
-    components: { VaultTile }
+    components: { VaultTile, NewVaultModal, NewKeepModal }
 }
 </script>
 
 
 <style lang="scss" scoped>
 .profile-pic {
-  height: 200px;
-  width: 200px;
+  height: 192px;
+  width: 192px;
   object-fit: contain;
 }
 
@@ -115,4 +127,23 @@ export default {
   }
 }
 
+.profile-name {
+  font-size: 56px;
+  font-weight: 300;
+}
+
+.profile-stats {
+  font-size: 32px;
+  font-weight: 400;
+}
+
+.profile-heading {
+  font-size: 40px;
+  font-weight: 400;;
+}
+
+.mdi {
+  // color plus buttons here
+}
+
 </style>
\ No newline at end of file
diff --git a/keepr.client/src/services/KeepsService.js b/keepr.client/src/services/KeepsService.js
index 92e26a3..76d8b3b 100644
--- a/keepr.client/src/services/KeepsService.js
+++ b/keepr.client/src/services/KeepsService.js
@@ -20,6 +20,15 @@ class KeepsService {
       logger.error(error)
     }
   }
+
+  async create(newKeep) {
+    try {
+      const res = await api.post('api/keeps', newKeep)
+      logger.log(res.data)
+    } catch (error) {
+      logger.error(error)
+    }
+  }
 }
 
 export const keepsService = new KeepsService()
\ No newline at end of file
diff --git a/keepr.client/src/services/VaultsService.js b/keepr.client/src/services/VaultsService.js
index e7b7f45..1e64092 100644
--- a/keepr.client/src/services/VaultsService.js
+++ b/keepr.client/src/services/VaultsService.js
@@ -20,6 +20,15 @@ class VaultsService {
       logger.error(error)
     }
   }
+
+  async createVault(vaultData) {
+    try {
+      const res = await api.post('api/vaults', vaultData)
+      logger.log(res.data)
+    } catch (error) {
+      logger.error(error)
+    }
+  }
 }
 
 export const vaultsService = new VaultsService()
\ No newline at end of file
