diff --git a/webui/src/common/components/Avatar/Avatar.jsx b/webui/src/common/components/Avatar/Avatar.jsx
new file mode 100644
index 0000000..076a622
--- /dev/null
+++ b/webui/src/common/components/Avatar/Avatar.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import './styles.sass';
+
+export const Avatar = ({
+  children,
+  size = 'md',
+  variant = 'default',
+  className = '',
+  ...rest
+}) => {
+  const avatarClasses = [
+    'avatar',
+    `avatar--${size}`,
+    `avatar--${variant}`,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={avatarClasses} {...rest}>
+      {children}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/webui/src/common/components/Avatar/index.js b/webui/src/common/components/Avatar/index.js
new file mode 100644
index 0000000..d35a1fa
--- /dev/null
+++ b/webui/src/common/components/Avatar/index.js
@@ -0,0 +1 @@
+export { Avatar as default } from './Avatar.jsx';
\ No newline at end of file
diff --git a/webui/src/common/components/Avatar/styles.sass b/webui/src/common/components/Avatar/styles.sass
new file mode 100644
index 0000000..e2dcad5
--- /dev/null
+++ b/webui/src/common/components/Avatar/styles.sass
@@ -0,0 +1,35 @@
+.avatar
+  background: var(--bg-elev)
+  border: 1px solid var(--border)
+  border-radius: 50%
+  display: flex
+  align-items: center
+  justify-content: center
+  color: var(--text-dim)
+  flex-shrink: 0
+  
+  &--sm
+    width: 32px
+    height: 32px
+  
+  &--md
+    width: 48px
+    height: 48px
+  
+  &--lg
+    width: 64px
+    height: 64px
+  
+  &--xl
+    width: 80px
+    height: 80px
+  
+  &--primary
+    background: var(--accent)
+    color: white
+    border-color: var(--accent)
+  
+  &--success
+    background: #16a34a
+    color: white
+    border-color: #16a34a
\ No newline at end of file