diff --git a/ui/src/assets/user_avatar.png b/ui/src/assets/user_avatar.png
new file mode 100644
index 0000000..26440a9
Binary files /dev/null and b/ui/src/assets/user_avatar.png differ
diff --git a/ui/src/components/GAvatar.vue b/ui/src/components/GAvatar.vue
new file mode 100644
index 0000000..e30f0da
--- /dev/null
+++ b/ui/src/components/GAvatar.vue
@@ -0,0 +1,30 @@
+<template>
+  <img :src="link" alt="avatar">
+</template>
+
+<script>
+  import axios from 'axios'
+  import avatarPlaceholder from '../assets/user_avatar.png'
+
+  export default {
+    name: 'GAvatar',
+    props: ['email'],
+    data: () => ({link: avatarPlaceholder}),
+    methods: {
+      setLink () {
+        if (this.email) {
+          axios.get(`https://picasaweb.google.com/data/entry/api/user/${this.email}?alt=json`).then(response => {
+            this.link = response.data.entry.gphoto$thumbnail.$t
+          })
+        }
+      }
+    },
+    mounted () {
+      this.setLink()
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>