diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_Default.png b/.loki/reference/chrome_iphone7_shared_Avatar_Default.png
new file mode 100644
index 000000000..f139bab5c
Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_Default.png differ
diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_With_Border.png b/.loki/reference/chrome_iphone7_shared_Avatar_With_Border.png
new file mode 100644
index 000000000..07779c53c
Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_With_Border.png differ
diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_With_Border_And_Image.png b/.loki/reference/chrome_iphone7_shared_Avatar_With_Border_And_Image.png
new file mode 100644
index 000000000..61760acf1
Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_With_Border_And_Image.png differ
diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_With_Image.png b/.loki/reference/chrome_iphone7_shared_Avatar_With_Image.png
new file mode 100644
index 000000000..27904724b
Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_With_Image.png differ
diff --git a/.loki/reference/chrome_iphone7_shared_Avatar_Without_Image.png b/.loki/reference/chrome_iphone7_shared_Avatar_Without_Image.png
new file mode 100644
index 000000000..f139bab5c
Binary files /dev/null and b/.loki/reference/chrome_iphone7_shared_Avatar_Without_Image.png differ
diff --git a/src/shared/ui/Avatar/Avatar.stories.tsx b/src/shared/ui/Avatar/Avatar.stories.tsx
new file mode 100644
index 000000000..4b4fd7063
--- /dev/null
+++ b/src/shared/ui/Avatar/Avatar.stories.tsx
@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { mockAvatar } from '@/shared/assets';
+
+import { Avatar } from './Avatar';
+
+type StoryArgs = {
+	image?: string;
+	size?: number;
+	borderRadius?: number;
+	withBorder?: boolean;
+	className?: string;
+};
+
+const meta: Meta<StoryArgs> = {
+	title: 'shared/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	parameters: {
+		layout: 'centered',
+	},
+	argTypes: {
+		image: {
+			control: 'text',
+			description: 'Avatar image url',
+		},
+		size: {
+			description: 'Avatar size (width & height)',
+		},
+		borderRadius: {
+			description: 'Border radius',
+		},
+		withBorder: {
+			description: 'Show border around avatar',
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+const Template: Story = {
+	render: (args) => <Avatar {...args} />,
+};
+
+export const Default: Story = {
+	...Template,
+	args: {
+		size: 50,
+		borderRadius: 25,
+		withBorder: false,
+	},
+};
+
+export const WithoutImage: Story = {
+	...Template,
+	args: {
+		size: 50,
+	},
+};
+
+export const WithBorder: Story = {
+	...Template,
+	args: {
+		borderRadius: 25,
+		withBorder: true,
+	},
+};
+
+export const WithImage: Story = {
+	...Template,
+	args: {
+		image: mockAvatar,
+		size: 50,
+	},
+};
+
+export const WithBorderAndImage: Story = {
+	...Template,
+	args: {
+		image: mockAvatar,
+		withBorder: true,
+	},
+};