diff --git a/apps/ui-playground/content/design/components/avatar.mdx b/apps/ui-playground/content/design/components/avatar.mdx
index fe8b701693..fa843d6c80 100644
--- a/apps/ui-playground/content/design/components/avatar.mdx
+++ b/apps/ui-playground/content/design/components/avatar.mdx
@@ -10,6 +10,7 @@ import { ImageExample } from "./avatar.image"
 import { TooltipExample } from "./avatar.tooltip"
 import { LinkExample } from "./avatar.link"
 import { IndicatorExample } from "./avatar.indicator"
+import { ShapeExample } from "./avatar.shape"
 
 ## Size Variations
 
@@ -17,6 +18,12 @@ Avatars come in different sizes to suit various use cases.
 
 <SizesExample/>
 
+## Shape Variations
+
+Avatars can be displayed in either circular or square shapes.
+
+<ShapeExample/>
+
 ## With and Without Image
 
 Avatars can display either an image or a fallback placeholder.
@@ -40,3 +47,57 @@ Avatars can be made clickable by providing an href.
 Avatars can include status indicators or badges.
 
 <IndicatorExample/>
+
+## Usage Example
+
+Here's a complete example showing how to use the Avatar component with all its props:
+
+```tsx
+import { Avatar } from "@calcom/ui/components/avatar";
+
+function Example() {
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Basic Avatar */}
+      <Avatar
+        alt="User Name"
+        title="User Name"
+        size="md"
+        shape="circle"
+        imageSrc="https://example.com/avatar.jpg"
+      />
+
+      {/* Avatar with Link */}
+      <Avatar
+        alt="User Name"
+        title="User Name"
+        size="lg"
+        shape="square"
+        imageSrc="https://example.com/avatar.jpg"
+        href="/profile"
+      />
+
+      {/* Avatar with Tooltip and Indicator */}
+      <Avatar
+        alt="User Name"
+        title="User Name"
+        size="md"
+        shape="circle"
+        imageSrc="https://example.com/avatar.jpg"
+        indicator={<div className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500" />}
+      />
+
+      {/* Avatar with Fallback */}
+      <Avatar
+        alt="User Name"
+        title="User Name"
+        size="md"
+        shape="circle"
+        fallback={<span>UN</span>}
+      />
+    </div>
+  );
+}
+```
+
+
diff --git a/apps/ui-playground/content/design/components/avatar.shape.tsx b/apps/ui-playground/content/design/components/avatar.shape.tsx
new file mode 100644
index 0000000000..105f16875d
--- /dev/null
+++ b/apps/ui-playground/content/design/components/avatar.shape.tsx
@@ -0,0 +1,24 @@
+import { Avatar } from "@calcom/ui/components/avatar";
+
+export function ShapeExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-4">
+        <Avatar
+          alt="Circle Avatar"
+          title="Circle Avatar"
+          size="lg"
+          shape="circle"
+          imageSrc="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+        />
+        <Avatar
+          alt="Square Avatar"
+          title="Square Avatar"
+          size="lg"
+          shape="square"
+          imageSrc="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7de9b7b549..507346fb87 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -73,6 +73,7 @@
   "dependencies": {
     "@calcom/lib": "*",
     "@formkit/auto-animate": "1.0.0-beta.5",
+    "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-popover": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index 7930369780..bcbcbf2cc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3938,6 +3938,7 @@ __metadata:
     "@calcom/lib": "*"
     "@calcom/tsconfig": "*"
     "@formkit/auto-animate": 1.0.0-beta.5
+    "@radix-ui/react-avatar": ^1.1.3
     "@radix-ui/react-checkbox": ^1.0.4
     "@radix-ui/react-dialog": ^1.0.4
     "@radix-ui/react-popover": ^1.0.2
@@ -11927,6 +11928,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-avatar@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "@radix-ui/react-avatar@npm:1.1.3"
+  dependencies:
+    "@radix-ui/react-context": 1.1.1
+    "@radix-ui/react-primitive": 2.0.2
+    "@radix-ui/react-use-callback-ref": 1.1.0
+    "@radix-ui/react-use-layout-effect": 1.1.0
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: e2bb1e65c19d1224cccb7554cfd7de73c62256c0b13ce695a71c106f2495356984ad40f0d8ad91a4d23efbf4da3e9e58851346aec767c002859fe64ca1a6d20e
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-checkbox@npm:^1.0.4":
   version: 1.0.4
   resolution: "@radix-ui/react-checkbox@npm:1.0.4"