diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 38337e95..560ad946 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -58,8 +58,8 @@
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=17469545c5b6a16c3bbf",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=0dd0a5efe0e3cb511c48",
     "/chunks/plans.js": "/chunks/plans.js?id=e93cd9c42177eadc8825",
-    "/chunks/platform.js": "/chunks/platform.js?id=25745a7eec7af5492710",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=b3b4e8501b1539c9b6f0",
+    "/chunks/platform.js": "/chunks/platform.js?id=15eb730a9b8f96858604",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=cc0341290cdc4226c74b",
     "/chunks/profile.js": "/chunks/profile.js?id=658aa03af778cc2cc100",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e8597a21a38c153e3c88",
@@ -542,5 +542,26 @@
     "/chunks/platform~chunks/shared.bf74ec4c9fbffb5b26f2.hot-update.js": "/chunks/platform~chunks/shared.bf74ec4c9fbffb5b26f2.hot-update.js",
     "/chunks/platform~chunks/shared.7e8439e720d955c0b3a1.hot-update.js": "/chunks/platform~chunks/shared.7e8439e720d955c0b3a1.hot-update.js",
     "/chunks/platform~chunks/shared.dcad6d4b43db4b25528e.hot-update.js": "/chunks/platform~chunks/shared.dcad6d4b43db4b25528e.hot-update.js",
-    "/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js": "/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js"
+    "/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js": "/chunks/platform~chunks/shared.541f03fb233348cf16a8.hot-update.js",
+    "/chunks/platform~chunks/shared.596beae69bce316e9812.hot-update.js": "/chunks/platform~chunks/shared.596beae69bce316e9812.hot-update.js",
+    "/chunks/platform~chunks/shared.b517582446cc88a5d795.hot-update.js": "/chunks/platform~chunks/shared.b517582446cc88a5d795.hot-update.js",
+    "/chunks/platform~chunks/shared.b2589e16f143853fc6ab.hot-update.js": "/chunks/platform~chunks/shared.b2589e16f143853fc6ab.hot-update.js",
+    "/chunks/platform~chunks/shared.f742b84011a0e12f4835.hot-update.js": "/chunks/platform~chunks/shared.f742b84011a0e12f4835.hot-update.js",
+    "/chunks/platform~chunks/shared.1d540f5bd105725081cf.hot-update.js": "/chunks/platform~chunks/shared.1d540f5bd105725081cf.hot-update.js",
+    "/chunks/platform~chunks/shared.8a501fd48026fbf46d55.hot-update.js": "/chunks/platform~chunks/shared.8a501fd48026fbf46d55.hot-update.js",
+    "/chunks/platform~chunks/shared.b95e97773b9d0ea94fc0.hot-update.js": "/chunks/platform~chunks/shared.b95e97773b9d0ea94fc0.hot-update.js",
+    "/chunks/platform~chunks/shared.b8f501e0039aae1e5df8.hot-update.js": "/chunks/platform~chunks/shared.b8f501e0039aae1e5df8.hot-update.js",
+    "/chunks/platform~chunks/shared.65240d64d1d81b14205b.hot-update.js": "/chunks/platform~chunks/shared.65240d64d1d81b14205b.hot-update.js",
+    "/chunks/platform~chunks/shared.995ebb770614e4543b51.hot-update.js": "/chunks/platform~chunks/shared.995ebb770614e4543b51.hot-update.js",
+    "/chunks/platform~chunks/shared.7f6ab782d89413db28c6.hot-update.js": "/chunks/platform~chunks/shared.7f6ab782d89413db28c6.hot-update.js",
+    "/chunks/platform~chunks/shared.d6d476355fe903a6d29d.hot-update.js": "/chunks/platform~chunks/shared.d6d476355fe903a6d29d.hot-update.js",
+    "/chunks/platform.6002f275d3d9a08a34df.hot-update.js": "/chunks/platform.6002f275d3d9a08a34df.hot-update.js",
+    "/chunks/platform.17a41d3eceeaca954950.hot-update.js": "/chunks/platform.17a41d3eceeaca954950.hot-update.js",
+    "/chunks/platform.2200b0e2593bcd5ed8fd.hot-update.js": "/chunks/platform.2200b0e2593bcd5ed8fd.hot-update.js",
+    "/chunks/platform.02c5f0d493657eff27bd.hot-update.js": "/chunks/platform.02c5f0d493657eff27bd.hot-update.js",
+    "/chunks/platform.07dbd82c60bf4aab88f5.hot-update.js": "/chunks/platform.07dbd82c60bf4aab88f5.hot-update.js",
+    "/chunks/platform~chunks/shared.2be04ab2777489f93b55.hot-update.js": "/chunks/platform~chunks/shared.2be04ab2777489f93b55.hot-update.js",
+    "/chunks/platform~chunks/shared.e94c8175e7bc649f984c.hot-update.js": "/chunks/platform~chunks/shared.e94c8175e7bc649f984c.hot-update.js",
+    "/chunks/platform~chunks/shared.01e3eec778bcc00565b7.hot-update.js": "/chunks/platform~chunks/shared.01e3eec778bcc00565b7.hot-update.js",
+    "/chunks/platform~chunks/shared.d414e8d2ab8cbc2576ce.hot-update.js": "/chunks/platform~chunks/shared.d414e8d2ab8cbc2576ce.hot-update.js"
 }
diff --git a/resources/js/components/Others/TypedAvatar.vue b/resources/js/components/Others/TypedAvatar.vue
new file mode 100644
index 00000000..9394889d
--- /dev/null
+++ b/resources/js/components/Others/TypedAvatar.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px'}">
+		<span class="letter">{{ letter }}</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TypedAvatar",
+	props: [
+		'letter',
+		'size',
+	]
+}
+</script>
+
+<style scoped lang="scss">
+	@import "resources/sass/vuefilemanager/_variables";
+	@import "resources/sass/vuefilemanager/_mixins";
+
+	.typed-avatar {
+		user-select: none;
+		display: flex;
+		background: #9ad2bf;
+		border-radius: 10px;
+		align-items: center;
+		justify-content: center;
+		border: 2px solid white;
+
+		.letter {
+			font-weight: 800;
+			text-transform: uppercase;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/Teams/Components/TeamFolderPreview.vue b/resources/js/components/Teams/Components/TeamFolderPreview.vue
index 01dedcf0..fbf8ae83 100644
--- a/resources/js/components/Teams/Components/TeamFolderPreview.vue
+++ b/resources/js/components/Teams/Components/TeamFolderPreview.vue
@@ -3,7 +3,7 @@
 		<div class="info">
 			<b class="title">The Team Project</b>
 			<span class="subtitle">Last update a week ago</span>
-			<TeamMembersPreview :folder="clipboard[0]" class="members" />
+			<TeamMembersPreview :folder="clipboard[0]" :avatar-size="32" class="members" />
 		</div>
 	</div>
 </template>
diff --git a/resources/js/components/Teams/Components/TeamList.vue b/resources/js/components/Teams/Components/TeamList.vue
index 45ece1f2..89fa7b21 100644
--- a/resources/js/components/Teams/Components/TeamList.vue
+++ b/resources/js/components/Teams/Components/TeamList.vue
@@ -6,7 +6,8 @@
 			</div>
 			<div class="member-preview">
 				<div class="avatar">
-					<img :src="entry.type === 'member' ? entry.avatar : '/assets/images/default-avatar.png'" alt="avatar">
+					<img v-if="entry.avatar" :src="entry.avatar" alt="avatar">
+					<TypedAvatar v-else :size="38" :letter="entry.email.substr(0, 1)" />
 				</div>
 				<div v-if="entry.type === 'member'" class="info">
 					<b class="title">{{ entry.name }}</b>
@@ -25,7 +26,8 @@
 </template>
 
 <script>
-	import PermissionToggleButton from "./PermissionToggleButton";
+	import PermissionToggleButton from "./PermissionToggleButton"
+	import TypedAvatar from "../../Others/TypedAvatar"
 	import {XIcon} from 'vue-feather-icons'
 
 	export default {
@@ -35,6 +37,7 @@
 		],
 		components: {
 			PermissionToggleButton,
+			TypedAvatar,
 			XIcon,
 		},
 		data() {
diff --git a/resources/js/components/Teams/Components/TeamMembersButton.vue b/resources/js/components/Teams/Components/TeamMembersButton.vue
index 7cd91ad5..74ad01ec 100644
--- a/resources/js/components/Teams/Components/TeamMembersButton.vue
+++ b/resources/js/components/Teams/Components/TeamMembersButton.vue
@@ -3,7 +3,7 @@
 		<div v-if="! clipboard[0]" class="empty-state">
 			<span>Not selected</span>
 		</div>
-		<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" class="widget" />
+		<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" :avatar-size="32" class="widget" />
 	</div>
 </template>
 
diff --git a/resources/js/components/Teams/Components/TeamMembersPreview.vue b/resources/js/components/Teams/Components/TeamMembersPreview.vue
index 91da7516..18eea7f2 100644
--- a/resources/js/components/Teams/Components/TeamMembersPreview.vue
+++ b/resources/js/components/Teams/Components/TeamMembersPreview.vue
@@ -4,21 +4,26 @@
 			{{ membersCount > 3 ? '3+' : membersCount }}
 		</span>
 		<div class="members">
-			<div v-for="member in members" class="member-preview">
+			<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview">
 				<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
-				<img v-else src="/assets/images/default-avatar.png" class="member" alt="avatar">
+				<TypedAvatar v-else :size="avatarSize" :letter="member.data.attributes.email.substr(0, 1)" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-export default {
+	import TypedAvatar from "../../Others/TypedAvatar";
+	export default {
 		name: "TeamMembersPreview",
 		props: [
 			'folder',
 			'limit',
+			'avatarSize'
 		],
+		components: {
+			TypedAvatar,
+		},
 		computed: {
 			membersCount() {
 				return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length