diff --git a/frontend/components/global/Avatar.vue b/frontend/components/global/Avatar.vue
new file mode 100644
index 0000000..1b2111e
--- /dev/null
+++ b/frontend/components/global/Avatar.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    src: string;
+    alt: string;
+};
+
+// props
+
+defineProps<Props>();
+</script>
+
+<template>
+    <AvatarRoot
+        class="bg-black inline-flex size-[45px] select-none items-center justify-center overflow-hidden rounded-full align-middle"
+    >
+        <AvatarImage
+            class="h-full w-full rounded-[inherit] object-cover"
+            :src="src"
+            :alt="alt"
+        />
+        <AvatarFallback
+            class="text-slate-300 leading-1 flex h-full w-full items-center justify-center bg-white text-sm font-medium"
+            :delay-ms="600"
+        >
+            {{ alt }}
+        </AvatarFallback>
+    </AvatarRoot>
+</template>