diff --git a/src/features/workspaces/components/workspace-avatar.tsx b/src/features/workspaces/components/workspace-avatar.tsx
new file mode 100644
index 0000000..708676a
--- /dev/null
+++ b/src/features/workspaces/components/workspace-avatar.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+interface WorkspaceAvatarProps {
+  image?: string;
+  name: string;
+  className?: string;
+}
+
+export const WorkspaceAvatar = ({
+  image,
+  name,
+  className,
+}: WorkspaceAvatarProps) => {
+  if (image) {
+    return (
+      <div
+        className={cn("size-10 relative rounded-md overflow-hidden", className)}
+      >
+        <Image src={image} alt={name} fill className="object-cover" />
+      </div>
+    );
+  }
+
+  return (
+    <Avatar className={cn("size-10 rounded-md", className)}>
+      <AvatarFallback className="border bg-background text-foreground font-semibold text-lg uppercase rounded-md">
+        {name[0]}
+      </AvatarFallback>
+    </Avatar>
+  );
+};