diff --git a/backend/src/middleware/validation/index.js b/backend/src/middleware/validation/index.js
index ded509b44..5bc8fd02d 100644
--- a/backend/src/middleware/validation/index.js
+++ b/backend/src/middleware/validation/index.js
@@ -3,7 +3,7 @@ import { UserInputError } from 'apollo-server'
 const USERNAME_MIN_LENGTH = 3
 
 const validateUsername = async (resolve, root, args, context, info) => {
-  if (!('name' in args) || args.name && args.name.length >= USERNAME_MIN_LENGTH) {
+  if (!('name' in args) || (args.name && args.name.length >= USERNAME_MIN_LENGTH)) {
     /* eslint-disable-next-line no-return-await */
     return await resolve(root, args, context, info)
   } else {
diff --git a/backend/src/resolvers/users.js b/backend/src/resolvers/users.js
index 33ba8c36b..646a2f48c 100644
--- a/backend/src/resolvers/users.js
+++ b/backend/src/resolvers/users.js
@@ -1,14 +1,13 @@
 import { neo4jgraphql } from 'neo4j-graphql-js'
 import { createWriteStream } from 'fs'
 
-
-const storeUpload = ({ stream, fileLocation}) =>
+const storeUpload = ({ stream, fileLocation }) =>
   new Promise((resolve, reject) =>
     stream
-    .pipe(createWriteStream(`public${fileLocation}`))
-    .on("finish", () => resolve())
-    .on("error", reject)
-  );
+      .pipe(createWriteStream(`public${fileLocation}`))
+      .on('finish', resolve)
+      .on('error', reject)
+  )
 
 export default {
   Mutation: {
@@ -16,14 +15,14 @@ export default {
       const { avatarUpload } = params
 
       if (avatarUpload) {
-        const { stream, filename } = await avatarUpload ;
+        const { stream, filename } = await avatarUpload
         const fileLocation = `/uploads/${filename}`
-        await storeUpload({ stream, fileLocation });
+        await storeUpload({ stream, fileLocation })
         delete params.avatarUpload
 
         params.avatar = fileLocation
       }
-      return await neo4jgraphql(object, params, context, resolveInfo, false)
+      return neo4jgraphql(object, params, context, resolveInfo, false)
     }
-  },
-};
+  }
+}
diff --git a/webapp/components/Empty.vue b/webapp/components/Empty.vue
index 082d18f83..8755a11bd 100644
--- a/webapp/components/Empty.vue
+++ b/webapp/components/Empty.vue
@@ -11,7 +11,7 @@
         class="hc-empty-icon"
         style="margin-bottom: 5px"
         alt="Empty"
-      /><br>
+      ><br>
       <ds-text
         v-show="message"
         class="hc-empty-message"
diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index a7c2111f6..971ccb6b8 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -8,7 +8,6 @@
       :style="backgroundImage"
       @vdropzone-thumbnail="thumbnail"
       @vdropzone-drop="vddrop"
-      @vdropzone-success="vsuccess"
     />
   </div>
 </template>
@@ -37,7 +36,7 @@ export default {
     backgroundImage() {
       const { avatar } = this.user || {}
       return {
-        backgroundImage: `url(${avatar})`
+        backgroundImage: `url(/api/${avatar})`
       }
     }
   },
@@ -84,27 +83,25 @@ export default {
         )
       }
     },
-    vsuccess(file, response) {
-      console.log('file', file.upload.filename, 'response', response)
-    },
     vddrop([file]) {
-      this.dDrop = true
-      console.log('this is a file', file)
-      const uploadFileMutation = gql`
-        mutation($file: Upload!) {
-          uploadFile(file: $file)
-        }
-      `
       this.$apollo
-        .mutate({ mutation: uploadFileMutation, variables: { file } })
-        .then(reponse => {
-          console.log(response)
-          this.$toast.success('Upload successful')
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!, $avatarUpload: Upload) {
+              UpdateUser(id: $id, avatarUpload: $avatarUpload) {
+                id
+              }
+            }
+          `,
+          variables: {
+            avatarUpload: file,
+            id: this.user.id
+          }
+        })
+        .then(response => {
+          this.$toast.success(this.$t('user.avatar.submitted'))
         })
         .catch(error => this.$toast.error(error.message))
-    },
-    verror(file) {
-      console.log(file)
     }
   }
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 186b31d41..c4d21b6e4 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -247,5 +247,10 @@
   },
   "shoutButton": {
     "shouted": "shouted"
+  },
+  "user": {
+    "avatar": {
+      "submitted": "Upload successful"
+    }
   }
 }
\ No newline at end of file
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 5f7df20ac..6887eece2 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -14,14 +14,7 @@
           :class="{'disabled-content': user.disabled}"
           style="position: relative; height: auto;"
         >
-          <hc-upload :user="user">
-            <ds-avatar
-              :image="user.avatar"
-              :name="userName"
-              class="profile-avatar"
-              size="x-large"
-            />
-          </hc-upload>
+          <hc-upload :user="user" />
           <no-ssr>
             <content-menu
               placement="bottom-end"