diff --git a/package-lock.json b/package-lock.json
index f68b6fc..3452a2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3455,6 +3455,16 @@
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -6868,6 +6878,13 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -16249,6 +16266,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1",
             "node-pre-gyp": "*"
           },
@@ -17541,6 +17559,7 @@
           "dev": true,
           "optional": true,
           "requires": {
+            "bindings": "^1.5.0",
             "nan": "^2.12.1",
             "node-pre-gyp": "*"
           },
diff --git a/src/components/EditUser.vue b/src/components/EditUser.vue
index f220b29..69f83a3 100644
--- a/src/components/EditUser.vue
+++ b/src/components/EditUser.vue
@@ -1,27 +1,20 @@
 <template>
         <div class="userdetails fit" style="background: #fcfcfc;">
-          <q-form @submit="onSubmit" class="fit">
-        <div class="popup-header">
-          <div class="text-h6">User</div>
-          <div class="actions">
-            <q-btn type="submit" flat>
-              <q-icon name="save" />
-              Save
-            </q-btn>
-            <q-btn flat @click="closeCreate">
-              <q-icon name="block" />
-              Cancel
-            </q-btn>
-          </div>
-        </div>
+          <q-form @submit="onSubmit" class="fit userform">
         <q-scroll-area
-            style="height: calc(100% - 150px);"
+            style="height: 100%;"
           >
 
         <q-card-section class="q-pt-none">
 
             <div id="create" class="create">
 
+              <q-file outlined v-model="avatar">
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+
               <div class="input">
                 <q-input
                   outlined
@@ -56,9 +49,7 @@
 
         </q-card-section>
         </q-scroll-area>
-        <div class="popup-header">
-          <div class="text-h6"></div>
-          <div class="actions">
+        <div class="useractions" :class="{ active: actions }">
             <q-btn type="submit" flat>
               <q-icon name="save" />
               Save
@@ -67,7 +58,7 @@
               <q-icon name="block" />
               Cancel
             </q-btn>
-          </div>
+
         </div>
           </q-form>
       </div>
@@ -86,18 +77,22 @@ export default {
   computed: {
     user () {
       return this.$store.state.users.edit
+    },
+    create () {
+      return this.$store.state.users.create
     }
   },
 
   data () {
     return {
       id: null,
-      icon: null,
+      avatar: null,
       email: null,
       username: null,
       password: '',
       totp: null,
-      isPwd: true
+      isPwd: true,
+      actions: false
     }
   },
 
@@ -105,25 +100,35 @@ export default {
     user: function (newdata, olddata) {
       // console.log(newdata)
       this.id = newdata.id
-      this.icon = newdata.icon
+      this.avatar = newdata.avatar
       this.email = newdata.email
       this.username = newdata.username
       this.password = newdata.password
       this.totp = newdata.totp
+    },
+    create: function (newdata, olddata) {
+      if (newdata === true) {
+        setTimeout(function () {
+          this.actions = true
+        }.bind(this), 350)
+      } else {
+        this.actions = false
+      }
     }
   },
 
   methods: {
     async onSubmit (evt) {
-      /* const formData = new FormData()
+      const formData = new FormData()
       formData.append('email', this.email)
       formData.append('username', this.username)
-      formData.append('password', this.password) */
-      const formData = {
+      formData.append('password', this.password)
+      formData.append('avatar', this.avatar)
+      /* const formData = {
         email: this.email,
         username: this.username,
         password: this.password
-      }
+      } */
       const data = {
         id: this.id,
         user: formData
@@ -165,6 +170,37 @@ export default {
 }
 </script>
 <style lang="scss">
+  .useractions {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 80px;
+    background: #724c7a;
+    transform: translateX(80px);
+    transition: all 0.3s;
+    color: white;
+    padding: 10px 0;
+    &.active {
+      transform: translateX(0);
+    }
+    button {
+      padding: 10px 0;
+      .q-btn__content {
+        font-size: 11px;
+        i {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+  .userform {
+    padding: 0 80px 0 0;
+    overflow: hidden;
+  }
+  .create {
+    padding: 30px 0;
+  }
   .userdetails {
     position: absolute;
     top: 0;
diff --git a/src/components/User.vue b/src/components/User.vue
index e9aa5b3..3bcaaa0 100644
--- a/src/components/User.vue
+++ b/src/components/User.vue
@@ -8,7 +8,9 @@
     <div class="details">
       <div class="name">{{ this.user.username }}</div>
       <span class="email">{{ this.user.email }}</span>
-      <span>2FA</span>
+      <div class="extra">
+        <span class="mfa"><span>2FA</span><q-icon class="mfaicon" :name="mfaicon"></q-icon></span>
+      </div>
     </div>
     <div class="actions">
       <q-btn size="12px" unelevated icon="more_vert" @click="showBack()"></q-btn>
@@ -30,7 +32,9 @@ export default {
     return {
       edit: false,
       showback: false,
-      icon: 'https://apps.heimdall.site/img/heimdall-logo-white.svg'
+      icon: 'https://apps.heimdall.site/img/heimdall-logo-white.svg',
+      // mfaicon: 'check_box_outline_blank'
+      mfaicon: 'check_box'
     }
   },
   methods: {
@@ -56,6 +60,8 @@ export default {
       padding: 20px;
       box-shadow: 0 0 10px #0000000f;
       border-radius: 4px;
+      border-top: 1px solid #fdfdfd;
+      border-bottom: 1px solid #d2d2d2;
       .icon {
         margin-right: 20px;
         img {
@@ -78,8 +84,26 @@ export default {
           padding: 0 15px 0 0;
           font-weight: bold;
       }
+      .extra {
+        margin-top: 5px;
+      }
+      .mfa {
+        background: #86658d;
+        padding: 1px 5px;
+        border-radius: 4px;
+        color: #f3f4f4;
+        display: inline-flex;
+        align-items: center;
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+      .mfaicon {
+        font-size: 17px;
+        margin-left: 4px;
+      }
       .email {
         font-size: 12px;
+        color: #9c9c9c;
       }
     }
 
diff --git a/src/css/app.scss b/src/css/app.scss
index 3173d6e..5198308 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -2,6 +2,7 @@
 
 $grey1: #e6e8e8;
 $darkborder: #cbccce;
+$brand: #5e3267;
 
 .text-brand {
     color: #5e3267;
@@ -9,6 +10,12 @@ $darkborder: #cbccce;
 .bg-brand {
     background: #5e3267;
 }
+.text-brand2 {
+    color: #724c7a;
+}
+.bg-brand2 {
+    background: #724c7a;
+}
 
 body {
   color: #585858;
@@ -23,7 +30,7 @@ h1 {
     background-image: url('../statics/bg1.jpg');
     background-repeat: no-repeat;
     background-size: cover;
-    background-position: bottom;
+    background-position: center;
 }
 .q-layout__section--marginal {
     background: #19465073;
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 6b2247d..ac986c1 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -9,6 +9,7 @@ export default {
   username_yes: 'Yes (Select from list of users)',
   username_no: 'No (Username must by typed)',
   select_user: 'Select user',
+  email: 'Email',
   username: 'Username',
   password: 'Password',
   failed: 'Action failed',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 86899b1..1dc828f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -42,7 +42,7 @@
       <menu-list></menu-list>
     </q-drawer>
 
-    <q-page-container id="app">
+    <q-page-container :style="background" id="app">
       <router-view :filter="filter" />
     </q-page-container>
   </q-layout>
@@ -72,7 +72,9 @@ export default {
     return {
       leftDrawerOpen: false,
       version: version,
-      filter: null
+      filter: null,
+      // background: '',
+      background: 'background-image: url(statics/bg/bg11.jpg)'
     }
   },
 
diff --git a/src/layouts/User.vue b/src/layouts/User.vue
index 1aeb5c6..cf032b9 100644
--- a/src/layouts/User.vue
+++ b/src/layouts/User.vue
@@ -15,7 +15,7 @@
           User Management
         </q-toolbar-title>
 
-        <q-btn size="15px" style="margin-left: 20px;" unelevated color="brand" @click="createNew">Add New</q-btn>
+        <q-btn size="15px" style="margin-left: 20px;" unelevated color="brand2" @click="createNew">Add New</q-btn>
         <div class="searchbox">
         <q-select
           borderless
diff --git a/src/pages/application/Index.vue b/src/pages/application/Index.vue
index cc1daba..740ddff 100644
--- a/src/pages/application/Index.vue
+++ b/src/pages/application/Index.vue
@@ -10,7 +10,7 @@
       <div class="list-items">
         <div class="no-items" v-if="applications.length < 1">
           {{ this.$t('no_apps') }}
-          <q-btn style="margin-top:30px;" @click="create = true" unelevated color="cyan-8">Add New</q-btn>
+          <q-btn style="margin-top:30px;" @click="create = true" unelevated color="brand">Add New</q-btn>
         </div>
         <app-item
           v-else
diff --git a/src/statics/bg/bg11.jpg b/src/statics/bg/bg11.jpg
new file mode 100644
index 0000000..cf91ddf
Binary files /dev/null and b/src/statics/bg/bg11.jpg differ
diff --git a/src/store/users/actions.js b/src/store/users/actions.js
index dc3110c..ac16563 100644
--- a/src/store/users/actions.js
+++ b/src/store/users/actions.js
@@ -27,16 +27,16 @@ export function save (context, data) {
     console.log(data)
     return axios
       .post(process.env.BACKEND_LOCATION + 'users', data.user, {
-        /* headers: {
+        headers: {
           'Content-Type': 'multipart/form-data'
-        } */
+        }
       })
   } else {
     return axios
       .put(process.env.BACKEND_LOCATION + 'users', data.user, {
-        /* headers: {
+        headers: {
           'Content-Type': 'multipart/form-data'
-        } */
+        }
       })
   }
 }