diff --git a/assets/css/kaverti.css b/assets/css/kaverti.css
new file mode 100644
index 0000000..71e8b88
--- /dev/null
+++ b/assets/css/kaverti.css
@@ -0,0 +1,3 @@
+.large-icon {
+    font-size: 60px;
+}
\ No newline at end of file
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
index c048941..6a17c9a 100644
--- a/assets/css/sidebar.css
+++ b/assets/css/sidebar.css
@@ -1,242 +1,3 @@
-body {
-    padding-bottom: 30px!important;
-    position: relative!important;
-    min-height: 100%!important;
-}
-
-a {
-    transition: background 0.2s, color 0.2s!important;
-}
-a:hover,
-a:focus {
-    text-decoration: none!important;
-}
-
-#wrapper {
-    padding-left: 0!important;
-    transition: all 0.5s ease!important;
-    position: relative!important;
-}
-
-#sidebar-wrapper {
-    z-index: 1000!important;
-    position: fixed!important;
-    left: 250px!important;
-    width: 0!important;
-    height: 100%!important;
-    margin-left: -250px!important;
-    overflow-y: auto!important;
-    overflow-x: hidden!important;
-    background: #222!important;
-    transition: all 0.5s ease!important;
-}
-
-#wrapper.toggled #sidebar-wrapper {
-    width: 250px!important;
-}
-
-.sidebar-brand {
-    position: absolute!important;
-    top: 0!important;
-    width: 250px!important;
-    text-align: center!important;
-    padding: 20px 0!important;
-}
-.sidebar-brand h2 {
-    margin: 0!important;
-    font-weight: 600!important;
-    font-size: 24px!important;
-    color: #fff!important;
-}
-
-.sidebar-nav {
-    position: absolute!important;
-    top: 75px!important;
-    width: 250px!important;
-    margin: 0!important;
-    padding: 0!important;
-    list-style: none!important;
-}
-.sidebar-nav > li {
-    text-indent: 10px!important;
-    line-height: 42px!important;
-}
-.sidebar-nav > li a {
-    display: block!important;
-    text-decoration: none!important;
-    color: #757575!important;
-    font-weight: 600!important;
-    font-size: 18px!important;
-}
-.sidebar-nav > li > a:hover,
-.sidebar-nav > li.active > a {
-    text-decoration: none!important;
-    color: #fff!important;
-    background: #F8BE12!important;
-}
-.sidebar-nav > li > a i.fa {
-    font-size: 24px!important;
-    width: 60px!important;
-}
-
-#navbar-wrapper {
-    width: 100%!important;
-    position: absolute!important;
-    z-index: 2!important;
-}
-#wrapper.toggled #navbar-wrapper {
-    position: absolute!important;
-    margin-right: -250px!important;
-}
-#navbar-wrapper .navbar {
-    border-width: 0 0 0 0!important;
-    background-color: #eee!important;
-    font-size: 24px!important;
-    margin-bottom: 0!important;
-    border-radius: 0!important;
-}
-#navbar-wrapper .navbar a {
-    color: #757575!important;
-}
-#navbar-wrapper .navbar a:hover {
-    color: #F8BE12!important;
-}
-
-#content-wrapper {
-    width: 100%!important;
-    position: absolute!important;
-    padding: 15px!important;
-    top: 100px!important;
-}
-#wrapper.toggled #content-wrapper {
-    position: absolute!important;
-    margin-right: -250px!important;
-}
-
-@media (min-width: 992px) {
-    #wrapper {
-        padding-left: 250px!important;
-    }
-
-    #wrapper.toggled {
-        padding-left: 60px!important;
-    }
-
-    #sidebar-wrapper {
-        width: 250px!important;
-    }
-
-    #wrapper.toggled #sidebar-wrapper {
-        width: 60px!important;
-    }
-
-    #wrapper.toggled #navbar-wrapper {
-        position: absolute!important;
-        margin-right: -190px!important;
-    }
-
-    #wrapper.toggled #content-wrapper {
-        position: absolute!important;
-        margin-right: -190px!important;
-    }
-
-    #navbar-wrapper {
-        position: relative!important;
-    }
-
-    #wrapper.toggled {
-        padding-left: 60px!important;
-    }
-
-    #content-wrapper {
-        position: relative!important;
-        top: 0!important;
-    }
-
-    #wrapper.toggled #navbar-wrapper,
-    #wrapper.toggled #content-wrapper {
-        position: relative!important;
-        margin-right: 60px!important;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-    #wrapper {
-        padding-left: 60px!important;
-    }
-
-    #sidebar-wrapper {
-        width: 60px!important;
-    }
-
-    #wrapper.toggled #navbar-wrapper {
-        position: absolute!important;
-        margin-right: -250px!important;
-    }
-
-    #wrapper.toggled #content-wrapper {
-        position: absolute!important;
-        margin-right: -250px!important;
-    }
-
-    #navbar-wrapper {
-        position: relative!important;
-    }
-
-    #wrapper.toggled {
-        padding-left: 250px!important;
-    }
-
-    #content-wrapper {
-        position: relative!important;
-        top: 0!important;
-    }
-
-    #wrapper.toggled #navbar-wrapper,
-    #wrapper.toggled #content-wrapper {
-        position: relative!important;
-        margin-right: 250px!important;
-    }
-}
-
-@media (max-width: 767px) {
-    #wrapper {
-        padding-left: 0!important;
-    }
-
-    #sidebar-wrapper {
-        width: 0!important;
-    }
-
-    #wrapper.toggled #sidebar-wrapper {
-        width: 250px!important;
-    }
-    #wrapper.toggled #navbar-wrapper {
-        position: absolute!important;
-        margin-right: -250px!important;
-    }
-
-    #wrapper.toggled #content-wrapper {
-        position: absolute!important;
-        margin-right: -250px!important;
-    }
-
-    #navbar-wrapper {
-        position: relative!important;
-    }
-
-    #wrapper.toggled {
-        padding-left: 250px!important;
-    }
-
-    #content-wrapper {
-        position: relative!important;
-        top: 0!important;
-    }
-
-    #wrapper.toggled #navbar-wrapper,
-    #wrapper.toggled #content-wrapper {
-        position: relative!important;
-        margin-right: 250px!important;
-    }
-}
\ No newline at end of file
+/*
+Soon
+ */
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 697f879..3680c94 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,9 +3,7 @@
 </style>
 <style>
 @import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
-.large-icon {
-  font-size: 60px;
-}
+@import '../assets/css/kaverti.css';
 </style>
 <template>
   <div id="app">
@@ -54,6 +52,8 @@ export default {
           this.$store.commit('setKoins', res.data.koins)
           this.$store.commit('setID', res.data.id)
           this.$store.commit('setBot', res.data.bot)
+          this.$store.commit('setDescription', res.data.description)
+          this.$store.commit('setExecutive', res.data.executive)
         }).catch(() => {
       this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-warning'})
     })
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d68a535..30bf446 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -96,7 +96,7 @@
                   <b-button
                       class='button is-info'
                       :loading='settings.general.description.loading'
-                      @click='fakeUser()'
+                      @click='saveDesc()'
                   >
                     {{$t('settings.general.saveDesc')}}
                   </b-button>
@@ -107,7 +107,7 @@
                   <b-button
                       class='button is-info'
                       :loading='settings.general.preferences.loading'
-                      @click='fakeUser()'
+                      @click='savePref()'
                   >
                     {{$t('settings.general.savePref')}}
                   </b-button>
@@ -447,6 +447,46 @@ export default {
     },
   },
   methods: {
+    savePref() {
+      this.preferences.error = ''
+      this.preferences.loading = true
+
+      this.axios
+          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
+            developerMode: this.preferences.developerMode
+          })
+          .then(() => {
+            this.preferences.loading = false
+            this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
+                .then(res => {
+                  this.$store.commit('setUsername', res.data.username)
+                  this.$store.commit('setEmail', res.data.email)
+                  this.$store.commit('setEmailVerified', res.data.emailVerified)
+                  this.$store.commit('setAdmin', res.data.admin)
+                  this.$store.commit('setDevMode', res.data.developerMode)
+                })
+          })
+          .catch(e => {
+            this.preferences.loading = false
+            AjaxErrorHandler(this.$store)(e)
+          })
+    },
+    saveDesc() {
+      this.description.error = ''
+      this.description.loading = true
+
+      this.axios
+          .put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/preferences', {
+            description: this.description.value
+          })
+          .then(() => {
+            this.description.loading = false
+          })
+          .catch(e => {
+            this.description.loading = false
+            AjaxErrorHandler(this.$store)(e)
+          })
+    },
     getBannerId() {
       if(localStorage.getItem(this.$store.state.client.bannerId)) {
         this.showBanner = false
@@ -469,13 +509,10 @@ export default {
         agree: this.register.agree
       }).then((res) => {
         this.register.loading = false
-        this.$store.commit('setUsername', res.data.username)
-        this.$store.commit('setAvatar', res.data.avatar)
-        this.$store.commit('setID', res.data.id)
-        this.$store.commit('setEmailVerified', res.data.emailVerified)
-        this.$store.commit('setEmail', res.data.email)
-        this.$store.commit('setAdmin', res.data.admin)
+        this.registerModal = false
         this.$store.commit('setToken', res.data.token)
+        localStorage.setItem('token', JSON.stringify(res.data.token));
+        this.getInfo()
         this.$buefy.snackbar.open({message:this.$t('errors.registered'), type: 'is-info'})
       }).catch(e => {
         this.register.loading = false
@@ -566,13 +603,43 @@ export default {
       this.$store.commit('fakeUser')
       this.$buefy.snackbar.open(`WARNING: You have fake authenticated, you do not have authenticated API access. Use for debug purposes only.`)
       Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
+    },
+    getInfo() {
+      Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
+      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
+          .then(res => {
+            this.$store.commit('setSettings', res.data)
+            this.$store.commit('setVersion', res.data.latestCanaryVersion)
+            this.$store.commit('setAPIVersion', res.data.latestAPIVersion)
+          }).catch(() => {
+        this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-info'})
+      })
+      this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'userinfo')
+          .then(res => {
+            this.$store.commit('setUsername', res.data.username)
+            this.$store.commit('setEmail', res.data.email)
+            this.$store.commit('setEmailVerified', res.data.emailVerified)
+            this.$store.commit('setAdmin', res.data.admin)
+            this.$store.commit('setKoins', res.data.koins)
+            this.$store.commit('setID', res.data.id)
+            this.$store.commit('setBot', res.data.bot)
+            this.$store.commit('setDescription', res.data.description)
+            this.$store.commit('setExecutive', res.data.executive)
+            this.settings.general.description.value = res.data.description
+            this.loading = false
+          }).catch(() => {
+        this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
+        this.loading = false
+      })
     }
   },
   mounted() {
+    Object.assign(axios.defaults, {headers: {Authorization: this.$store.state.user.token}})
     this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/state')
         .then(res => {
           this.$store.commit('setSettings', res.data)
           this.$store.commit('setVersion', res.data.latestCanaryVersion)
+          this.$store.commit('setAPIVersion', res.data.latestAPIVersion)
         }).catch(() => {
       this.$buefy.snackbar.open({message:this.$t('errors.down'), type: 'is-info'})
     })
@@ -585,12 +652,9 @@ export default {
           this.$store.commit('setKoins', res.data.koins)
           this.$store.commit('setID', res.data.id)
           this.$store.commit('setBot', res.data.bot)
-          if(localStorage.getItem('usernameCache')) {
-            localStorage.removeItem('usernameCache')
-            localStorage.setItem('usernameCache', JSON.stringify(res.data.username));
-          } else {
-            localStorage.setItem('usernameCache', JSON.stringify(res.data.username));
-          }
+          this.$store.commit('setDescription', res.data.description)
+          this.$store.commit('setExecutive', res.data.executive)
+          this.settings.general.description.value = res.data.description
           this.loading = false
         }).catch(() => {
       this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
diff --git a/src/components/NoItems.vue b/src/components/NoItems.vue
index 6cd6861..7ca570b 100644
--- a/src/components/NoItems.vue
+++ b/src/components/NoItems.vue
@@ -2,7 +2,7 @@
   <div class="is-vcentered has-text-centered columns">
     <div class="column is-vcentered has-text-centered" v-if="!connection">
       <i class="far fa-times-square large-icon"></i>
-      <h1 class="subtitle">{{$t('generic.noItemsStart')}} {{type}} {{$t('generic.noItemsEnd')}}</h1>
+      <h1 class="subtitle is-centered">{{$t('generic.noItemsStart')}} {{type}} {{$t('generic.noItemsEnd')}}</h1>
     </div>
     <div class="column is-vcentered" v-if="connection">
       <i class="far fa-times-square large-icon"></i>
diff --git a/src/router/index.js b/src/router/index.js
index 57b8764..0582ba5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -63,6 +63,12 @@ const routes = [
   },
   {
     path: '/forums',
+    redirect: '/forums/ALL',
+    name: 'Forums',
+    component: route('Forums')
+  },
+  {
+    path: '/forums/:category',
     name: 'Forums',
     component: route('Forums')
   },
diff --git a/src/store/index.js b/src/store/index.js
index ef066ea..00a8af1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -31,6 +31,14 @@ export default new Vuex.Store({
       errors: null,
       modal: false
     },
+    banned: {
+      banned: false,
+      message: "Not banned",
+      readOnlyMode: false,
+      ipBanned: false,
+      disableLogin: false,
+      expiry: "2020-01-01T00:00:00.000Z"
+    },
     user: {
       id: 0,
       username: '',
@@ -44,7 +52,8 @@ export default new Vuex.Store({
       emailVerified: false,
       modeler: false,
       developerMode: false,
-      executive: false
+      executive: false,
+      description: ''
     }
   },
   mutations: {
@@ -59,6 +68,9 @@ export default new Vuex.Store({
     setVersion(state, value) {
       state.client.latestClientVersion = value
     },
+    setAPIVersion(state, value) {
+      state.client.latestAPIVersion = value
+    },
     turnOffDebug(state) {
       state.debug = false
     },
@@ -86,6 +98,14 @@ export default new Vuex.Store({
     setToken (state, value) {
       state.user.token = value
     },
+    setBanned (state, value) {
+      state.banned.message = value
+      state.banned.banned = value
+      state.banned.readOnlyMode = value
+      state.banned.disableLogin = value
+      state.banned.ipBanned = value
+      state.banned.expiry = value
+    },
     setAvatar (state, value) {
       state.user.avatar = value
     },
@@ -109,6 +129,12 @@ export default new Vuex.Store({
     },
     setAdmin (state, value) {
       state.user.admin = value
+    },
+    setExecutive (state, value) {
+      state.user.executive = value
+    },
+    setDescription (state, value) {
+      state.user.description = value
     }
   },
   actions: {
diff --git a/src/views/AdminCreateItem.vue b/src/views/AdminCreateItem.vue
index d806867..e3632e8 100644
--- a/src/views/AdminCreateItem.vue
+++ b/src/views/AdminCreateItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <main>
-    <div>
+  <main class="columns">
+    <div class="column is-5">
       <h1 class="title" v-if="createType === 0">
         Uploading a hat
       </h1>
@@ -52,10 +52,18 @@
           </a>
         </b-upload>
       </b-field>
-      <b-button v-if="createType === 0" @click="submitItem" :loading="loading">Submit</b-button>
-      <b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
-      <b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
-      <b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
+      <div class="buttons">
+        <b-button v-if="createType === 0" @click="submitItem" :loading="loading">Submit</b-button>
+        <b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
+        <b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
+        <b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
+        <b-button v-if="createType === 0" @click="previewItem" :loading="loadingPreview">Preview</b-button>
+      </div>
+    </div>
+    <div class="column is-5">
+      <h1 class="title">Preview Image</h1>
+      <img :src="'https://cdn.kaverti.com/marketplace/previews/' + preview" v-if="preview">
+      <h1 class="subtitle" v-if="!preview">Press preview to preview the hat as if it were uploaded on the Marketplace.</h1>
     </div>
   </main>
 </template>
@@ -70,6 +78,8 @@ export default {
       createType: 0,
       stage: 1,
       loading: false,
+      loadingPreview: false,
+      preview: '',
       item: {
         file: '',
         fileObj: '',
@@ -86,6 +96,21 @@ export default {
     }
   },
   methods: {
+    previewItem() {
+      this.loadingPreview = true
+      const data = new FormData();
+
+      data.append('image', this.item.file);
+      data.append('fileObj', this.item.fileObj);
+      this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/preview/' + this.createType, data)
+          .then((res) => {
+            this.loadingPreview = false
+            this.preview = res.data.image
+          }).catch((e) => {
+        this.loadingPreview = false
+        AjaxErrorHandler(this.$store)(e)
+      })
+    },
     submitItem() {
       this.loading = true
       const data = new FormData();
@@ -100,8 +125,9 @@ export default {
       data.append('limited', this.item.limited);
       data.append('quantityAllowed', this.item.quantity);
       this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/upload/' + this.createType, data)
-          .then(() => {
+          .then((res) => {
             this.loading = false
+            this.axios.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/rerender/' + res.data.id)
           }).catch((e) => {
         this.loading = false
         AjaxErrorHandler(this.$store)(e)
diff --git a/src/views/Forums.vue b/src/views/Forums.vue
index a333130..5a77f82 100644
--- a/src/views/Forums.vue
+++ b/src/views/Forums.vue
@@ -1,5 +1,153 @@
 <template>
-  <main>
-
+  <main class="section">
+    <div class="columns is-multiline has-text-centered">
+      <div class="column is-2" v-if="!loadingCategory && categories.length">
+        <b-button class="is-info">Create thread</b-button>
+        <br><br>
+        <div class="box">
+          <router-link
+              :to='"/forums/ALL"'
+          >
+            <p class="subtitle is-link">All</p>
+          </router-link>
+          <router-link
+              v-for='(category, $index) in categories'
+              :key='"category-link-" + $index'
+              :to='"/forums/" + category.value'
+          >
+            <p class="subtitle is-link">{{category.name}}</p>
+          </router-link>
+        </div>
+      </div>
+      <div class="column is-2" v-if="loadingCategory">
+        <div class="box">
+          <p><b-skeleton></b-skeleton></p>
+          <p><b-skeleton></b-skeleton></p>
+          <p><b-skeleton></b-skeleton></p>
+          <p><b-skeleton></b-skeleton></p>
+        </div>
+      </div>
+      <div class="column is-2" v-if="!loadingCategory && !categories.length">
+        <div class="box">
+          <NoItems connection="true"></NoItems>
+        </div>
+      </div>
+      <div class="column box" v-if="!threads.length && !loadingThreads">
+        <NoItems type="forum threads"></NoItems>
+      </div>
+      <div class="column column is-9">
+        <div class="box content">
+          <article class="media" v-for='(thread) in threads' :key='"thread-" + thread.id'>
+            <figure class="media-left">
+              <p class="image is-64x64">
+                <img :src="'https://cdn.kaverti.com/user/avatars/headshot/' + thread.User.picture + '.png'">
+              </p>
+              By
+              {{thread.User.username}}
+            </figure>
+            <div class="media-content">
+              <div class="content">
+                <p>
+                  <strong>{{thread.name}}</strong>
+                  <br>
+                  {{thread.Posts[0].plainText}}
+                </p>
+              </div>
+              <nav class="level is-mobile">
+                <div class="level-left">
+                  <p>Created at:</p>
+                </div>
+              </nav>
+            </div>
+            <div class="media-right">
+              <button class="delete"></button>
+            </div>
+          </article>
+        </div>
+      </div>
+    </div>
   </main>
-</template>
\ No newline at end of file
+</template>
+<script>
+import AjaxErrorHandler from "../../assets/js/errorHandler";
+import NoItems from "../components/NoItems"
+export default {
+  name: 'Forums',
+  props: ['username'],
+  components: {
+    NoItems
+  },
+  data() {
+    return {
+      categories: [],
+      loadingCategory: true,
+      loadingThreads: true,
+      threads: [],
+      selectedCategory: 'ALL'
+    }
+  },
+  methods: {
+    getThreads (initial) {
+      if(this.nextURL === null && !initial) return
+
+      let URL = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'forums/category/' + this.selectedCategory
+      if(!initial) {
+        URL = this.nextURL || URL
+      }
+
+      this.loadingThreads = true
+
+      this.axios
+          .get(URL)
+          .then(res => {
+            this.loadingThreads = false
+
+            if(initial) {
+              this.threads = res.data.Threads
+            } else {
+              this.threads.push(...res.data.Threads)
+            }
+
+            this.nextURL = res.data.meta.nextURL
+            this.nextThreadsCount = res.data.meta.nextThreadsCount
+          })
+          .catch((e) => {
+            this.loadingThreads = false
+
+            AjaxErrorHandler(this.$store)(e)
+          })
+    },
+  },
+  watch: {
+    selectedCategory (newValue) {
+      this.$router.push('/forums/' + newValue.toLowerCase());
+    },
+    $route () {
+      this.selectedCategory = this.$route.path.split('/')[2].toUpperCase()
+      this.newThreads = 0
+      this.getThreads(true)
+    }
+  },
+  mounted() {
+    this.axios
+        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + 'forums/category')
+        .then(res => {
+          this.categories = res.data
+          this.loadingCategory = false
+        })
+        .catch(e => {
+          this.loadingCategory = false
+          let invalidId = e.response.data.errors.find(error => {
+            return error.name === 'accountDoesNotExist'
+          })
+
+          if (invalidId) {
+            this.$store.commit('set404Page', true)
+          } else {
+            AjaxErrorHandler(this.$store)(e)
+          }
+        })
+    this.getThreads(true)
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/UserAwards.vue b/src/views/UserAwards.vue
index 33547a2..f0b02c2 100644
--- a/src/views/UserAwards.vue
+++ b/src/views/UserAwards.vue
@@ -1,8 +1,11 @@
 <template>
   <main>
     <div class="columns">
+      <div class="column" v-if="!awards.length">
+        <NoItems type="awards"></NoItems>
+      </div>
       <div class="column is-4" v-for='(award) in awards' :key='"award-" + award.id'>
-        <div class="box">
+        <div class="box" v-if="awards.length">
           <b-tag v-if="award.Award.rarity === 'Common'">{{award.Award.rarity}}</b-tag>
           <b-tag v-if="award.Award.rarity === 'Uncommon'">{{award.Award.rarity}}</b-tag>
           <b-tag v-if="award.Award.rarity === 'Rare'" class="is-warning">{{award.Award.rarity}}</b-tag>
@@ -17,10 +20,13 @@
 </template>
 <script>
 import AjaxErrorHandler from "../../assets/js/errorHandler";
-
+import NoItems from "../components/NoItems"
 export default {
   name: 'UserAwards',
   props: ['username'],
+  components: {
+    NoItems
+  },
   data() {
     return {
       awards: []
diff --git a/src/views/UserInventory.vue b/src/views/UserInventory.vue
index 50c034c..ff5ceda 100644
--- a/src/views/UserInventory.vue
+++ b/src/views/UserInventory.vue
@@ -2,8 +2,7 @@
   <main>
     <div class="columns is-multiline">
       <div class="column" v-if="!inventory.length">
-        <i class="far fa-times-square large-icon"></i>
-        <h1 class="subtitle">{{$t('user.inventoryTab.noItems')}}</h1>
+        <NoItems type="inventory items"></NoItems>
       </div>
       <div class="column is-4" v-for='(item) in inventory' :key='"item-" + item.id'>
         <h1 class="subtitle">{{item.Item.name}}</h1>
@@ -19,10 +18,14 @@
 </template>
 <script>
 import AjaxErrorHandler from "../../assets/js/errorHandler";
+import NoItems from "../components/NoItems"
 
 export default {
   name: 'UserInventory',
   props: ['username'],
+  components: {
+    NoItems
+  },
   data() {
     return {
       inventory: []