diff --git a/frontend/package.json b/frontend/package.json
index f5bac086c..f01544187 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,6 @@
     "@babel/core": "^7.13.13",
     "@babel/node": "^7.13.13",
     "@babel/preset-env": "^7.13.12",
-    "@ogerlys/vue-avatar": "^2.3.4",
     "@vue/cli-plugin-unit-jest": "^4.5.12",
     "@vue/test-utils": "^1.1.3",
     "apollo-boost": "^0.4.9",
@@ -54,6 +53,7 @@
     "vee-validate": "^3.4.5",
     "vue": "2.6.12",
     "vue-apollo": "^3.0.7",
+    "vue-avatar": "^2.3.3",
     "vue-flatpickr-component": "^8.1.2",
     "vue-focus": "^2.1.0",
     "vue-i18n": "^8.22.4",
diff --git a/frontend/src/components/Avatar/avatar.vue b/frontend/src/components/Avatar/avatar.vue
deleted file mode 100644
index 4fb46808f..000000000
--- a/frontend/src/components/Avatar/avatar.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-  <div class="vue-avatar--wrapper" :style="[style, customStyle]" aria-hidden="true">
-    <!-- this img is not displayed; it is used to detect failure-to-load of div background image -->
-    <img v-if="this.isImage" style="display: none" :src="this.src" @error="onImgError" />
-    <span v-show="!this.isImage">{{ userInitial }}</span>
-  </div>
-</template>
-
-<script>
-const getInitials = (username, initialsCount) => {
-  const parts = username.split(/[ -]/)
-  let initials = ''
-  const initialsCount = initialsCount
-
-  for (let i = 0; i < parts.length; i++) {
-    initials += parts[i].charAt(0)
-  }
-
-  if (initials.length > 3 && initials.search(/[A-Z]/) !== -1) {
-    initials = initials.replace(/[a-z]+/g, '')
-  }
-
-  initials = initials.substr(0, initialsCount).toUpperCase()
-
-  return initials
-}
-
-export default {
-  name: 'avatar',
-  props: {
-    username: {
-      type: String,
-    },
-    initials: {
-      type: String,
-    },
-    initialsCount: {
-      type: Number,
-      default: 3,
-    },
-    backgroundColor: {
-      type: String,
-    },
-    color: {
-      type: String,
-    },
-    customStyle: {
-      type: Object,
-    },
-    inline: {
-      type: Boolean,
-    },
-    size: {
-      type: Number,
-      default: 50,
-    },
-    src: {
-      type: String,
-    },
-    rounded: {
-      type: Boolean,
-      default: true,
-    },
-    lighten: {
-      type: Number,
-      default: 80,
-    },
-    parser: {
-      type: Function,
-      default: getInitials,
-      validator: (parser) => typeof parser('John', getInitials) === 'string',
-    },
-  },
-
-  data() {
-    return {
-      backgroundColors: [
-        '#F44336',
-        '#FF4081',
-        '#9C27B0',
-        '#673AB7',
-        '#3F51B5',
-        '#2196F3',
-        '#03A9F4',
-        '#00BCD4',
-        '#009688',
-        '#4CAF50',
-        '#8BC34A',
-        '#CDDC39',
-        /* '#FFEB3B' , */ '#FFC107',
-        '#FF9800',
-        '#FF5722',
-        '#795548',
-        '#9E9E9E',
-        '#607D8B',
-      ],
-      imgError: false,
-    }
-  },
-
-  mounted() {
-    if (!this.isImage) {
-      this.$emit('avatar-initials', this.username, this.userInitial)
-    }
-  },
-
-  computed: {
-    background() {
-      if (!this.isImage) {
-        return (
-          this.backgroundColor ||
-          this.randomBackgroundColor(this.username.length, this.backgroundColors)
-        )
-      }
-    },
-
-    fontColor() {
-      if (!this.isImage) {
-        return this.color || this.lightenColor(this.background, this.lighten)
-      }
-    },
-
-    isImage() {
-      return !this.imgError && Boolean(this.src)
-    },
-
-    style() {
-      const style = {
-        display: this.inline ? 'inline-flex' : 'flex',
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        borderRadius: this.rounded ? '50%' : 0,
-        lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
-        fontWeight: 'bold',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        userSelect: 'none',
-      }
-
-      const imgBackgroundAndFontStyle = {
-        background: `transparent url('${this.src}') no-repeat scroll 0% 0% / ${this.size}px ${this.size}px content-box border-box`,
-      }
-
-      const initialBackgroundAndFontStyle = {
-        backgroundColor: this.background,
-        font: `${Math.floor(this.size / 2.5)}px/${this.size}px Helvetica, Arial, sans-serif`,
-        color: this.fontColor,
-      }
-
-      const backgroundAndFontStyle = this.isImage
-        ? imgBackgroundAndFontStyle
-        : initialBackgroundAndFontStyle
-
-      Object.assign(style, backgroundAndFontStyle)
-
-      return style
-    },
-
-    userInitial() {
-      if (!this.isImage) {
-        const initials = this.initials || this.parser(this.username, getInitials)
-        return initials
-      }
-      return ''
-    },
-  },
-
-  methods: {
-    initial: getInitials,
-
-    onImgError(evt) {
-      this.imgError = true
-    },
-
-    randomBackgroundColor(seed, colors) {
-      return colors[seed % colors.length]
-    },
-
-    lightenColor(hex, amt) {
-      // From https://css-tricks.com/snippets/javascript/lighten-darken-color/
-      let usePound = false
-
-      if (hex[0] === '#') {
-        hex = hex.slice(1)
-        usePound = true
-      }
-
-      const num = parseInt(hex, 16)
-      let r = (num >> 16) + amt
-
-      if (r > 255) r = 255
-      else if (r < 0) r = 0
-
-      let b = ((num >> 8) & 0x00ff) + amt
-
-      if (b > 255) b = 255
-      else if (b < 0) b = 0
-
-      let g = (num & 0x0000ff) + amt
-
-      if (g > 255) g = 255
-      else if (g < 0) g = 0
-
-      return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16)
-    },
-  },
-}
-</script>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index f5dab6604..946a78a3e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2437,11 +2437,6 @@
     consola "^2.15.0"
     node-fetch "^2.6.1"
 
-"@ogerlys/vue-avatar@^2.3.4":
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@ogerlys/vue-avatar/-/vue-avatar-2.3.4.tgz#b627baced39f908a397630c1141d9c931f4f36f4"
-  integrity sha512-Mjx0lTJzXHC57FUAiBPCPhoB2x6NfXVIh4+AxcmKmY0nE3C2pidPHb3mkpfS3DL2NPJO8qry6TC5j4d1TpeGNw==
-
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -14196,6 +14191,11 @@ vue-apollo@^3.0.7:
     serialize-javascript "^4.0.0"
     throttle-debounce "^2.1.0"
 
+vue-avatar@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/vue-avatar/-/vue-avatar-2.3.3.tgz#e125bf4f4a6f4f9480da0c522020266a8609d2a8"
+  integrity sha512-Z57ILRTkFIAuCH9JiFBxX74C5zua5ub/jRDM/KZ+QKXNfscvmUOgWBs3kA2+wrpZMowIvfLHIT0gvQu1z+zpLg==
+
 vue-cli-plugin-i18n@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"