diff --git a/site/src/components/UserAvatar/UserAvatar.stories.tsx b/site/src/components/UserAvatar/UserAvatar.stories.tsx
new file mode 100644
index 0000000000..41ad9ca87b
--- /dev/null
+++ b/site/src/components/UserAvatar/UserAvatar.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UserAvatar } from "./UserAvatar";
+
+const meta: Meta<typeof UserAvatar> = {
+  title: "components/UserAvatar",
+  component: UserAvatar,
+};
+
+export default meta;
+type Story = StoryObj<typeof UserAvatar>;
+
+export const Jon: Story = {
+  args: {
+    username: "sreya",
+    avatarURL: "https://github.com/sreya.png",
+  },
+};
+
+export const Jonjon: Story = {
+  args: {
+    username: "ジョンジョン",
+    avatarURL: "https://github.com/sreya.png",
+  },
+};