diff --git a/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts b/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
new file mode 100644
index 00000000..01cd0fdc
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
@@ -0,0 +1,43 @@
+import type { ComponentProps } from "svelte";
+import Avatar from "./Avatar.svelte";
+
+export default {
+    title: "UI/Avatar",
+    component: Avatar,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: Avatar;
+        props: ComponentProps<typeof Avatar>;
+    }) => ({
+        Component: Avatar,
+        props: args,
+    }),
+};
+
+export const Large = {
+    args: {
+        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        size: "lg",
+    },
+};
+
+export const Medium = {
+    args: {
+        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        size: "md",
+    },
+};
+
+export const Small = {
+    args: {
+        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        size: "sm",
+    },
+};
+
+export const ExtraSmall = {
+    args: {
+        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        size: "xs",
+    },
+};
diff --git a/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte b/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
new file mode 100644
index 00000000..2d82b1df
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { HTMLImgAttributes } from "svelte/elements";
+
+interface IAvatarProps extends HTMLImgAttributes {
+    src: string;
+    alt?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+}
+
+const {
+    src,
+    alt = "User Avatar",
+    size = "md",
+    ...restProps
+}: IAvatarProps = $props();
+
+const sizeVariant = {
+    xs: "w-6 h-6",
+    sm: "w-10 h-10",
+    md: "w-12 h-12",
+    lg: "w-30 h-30",
+};
+
+const classes = $derived({
+    common: cn("rounded-full"),
+    size: sizeVariant[size] || sizeVariant.md,
+});
+</script>
+
+<img
+	{...restProps}
+	{src}
+	{alt}
+	class={cn([classes.common, classes.size, restProps.class].join(' '))}
+/>
+
+<!--
+@component
+@name Avatar
+@description Avatar component for displaying user profile pictures or icons.
+@props
+    - src: The source URL of the image.
+    - alt: The alternative text for the image.
+    - size: The size of the avatar. Can be 'xs', 'sm', 'md', or 'lg'. Default is 'md'.
+@usage
+    <script>
+        import { Avatar } from "$lib/ui";
+    </script>
+
+    <Avatar src="https://example.com/avatar.jpg" alt="User Avatar" size="lg" />
+-->
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index c04c65db..5ba2df02 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1 +1,2 @@
-export { default as Button } from './Button/Button.svelte';
+export { default as Button } from "./Button/Button.svelte";
+export { default as Avatar } from "./Avatar/Avatar.svelte";