diff --git a/ts/components/Avatar.vue b/ts/components/Avatar.vue
new file mode 100644
index 00000000..7dcfd33e
--- /dev/null
+++ b/ts/components/Avatar.vue
@@ -0,0 +1,31 @@
+<style scoped>
+.avatar {
+	width: 48px;
+	height: 48px;
+	object-fit: cover;
+}
+.bi-avatar {
+	height: 48px;
+	width: 48px;
+}
+</style>
+<template>
+	<img
+		v-if="user.avatar"
+		:src="user.avatar"
+		:alt="user.display_name"
+		class="rounded-circle me-2 avatar"
+		width="32"
+		height="32"
+	/>
+	<i v-else class="bi bi-avatar"></i>
+</template>
+
+<script setup lang="ts">
+import { User } from "@/types";
+
+interface Props {
+	user: User;
+}
+const props = defineProps<Props>();
+</script>
diff --git a/ts/components/UserSelector.vue b/ts/components/UserSelector.vue
index 18d7dfbe..07aa826f 100644
--- a/ts/components/UserSelector.vue
+++ b/ts/components/UserSelector.vue
@@ -23,15 +23,7 @@
 				class="dropdown-item d-flex align-items-center"
 				@mousedown.prevent="selectUser(user)"
 			>
-				<img
-					v-if="user.avatar"
-					:src="user.avatar"
-					:alt="user.display_name"
-					class="rounded-circle me-2"
-					width="32"
-					height="32"
-				/>
-				<span v-else class="badge bg-secondary me-2">{{ user.initials }}</span>
+				<Avatar :user="user" />
 
 				<div class="flex-grow-1">
 					<div v-html="highlightMatch(user.display_name)"></div>
@@ -58,6 +50,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue";
+import Avatar from "@/components/Avatar.vue";
 import { useUserStore } from "@/store/user";
 import type { User } from "@/types";