diff --git a/docs/member.md b/docs/member.md
deleted file mode 100644
index 13100db..0000000
--- a/docs/member.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-sidebar_position: 3
----
-
-# 成员列表
\ No newline at end of file
diff --git a/docs/member.mdx b/docs/member.mdx
new file mode 100644
index 0000000..51bc703
--- /dev/null
+++ b/docs/member.mdx
@@ -0,0 +1,8 @@
+---
+sidebar_position: 3
+---
+
+# 成员列表
+import Member from '@site/src/components/Member';
+
+<Member></Member>
diff --git a/src/components/Member/index.tsx b/src/components/Member/index.tsx
new file mode 100644
index 0000000..48efec8
--- /dev/null
+++ b/src/components/Member/index.tsx
@@ -0,0 +1,32 @@
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import { memberData } from "@/components/Member/memberData";
+
+export default function Component() {
+  const data = memberData
+  return (
+    <div className="container mx-auto py-12 px-4 md:px-6">
+      {Object.keys(data).map((year) => (
+        <div key={year} className="mb-12">
+          <h2 className="text-2xl font-bold mb-6">{year}</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {data[year].map((member, index) => (
+              <div
+                key={index}
+                className="flex flex-col items-center gap-2 bg-white dark:bg-gray-950 p-4 rounded-lg shadow-md"
+              >
+                <Avatar>
+                  <img src="/placeholder.svg" alt={member.name} />
+                  <AvatarFallback>{member.name.split(" ").map((word) => word[0])}</AvatarFallback>
+                </Avatar>
+                <div className="text-center">
+                  <h3 className="font-semibold">{member.name}</h3>
+                  <p className="text-gray-500 dark:text-gray-400 text-sm">{member.profession}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/Member/memberData.ts b/src/components/Member/memberData.ts
new file mode 100644
index 0000000..25cbf6a
--- /dev/null
+++ b/src/components/Member/memberData.ts
@@ -0,0 +1,26 @@
+type MemberData = Record<string, {
+  avatar: string;
+  name: string;
+  profession: string;
+}[]>
+
+export const memberData: MemberData = {
+  "2023": [
+    { avatar: "/placeholder-avatar.jpg", name: "John Doe", profession: "Software Engineer" },
+    { avatar: "/placeholder-avatar.jpg", name: "Jane Smith", profession: "Product Manager" },
+    { avatar: "/placeholder-avatar.jpg", name: "Michael Johnson", profession: "UI/UX Designer" },
+    { avatar: "/placeholder-avatar.jpg", name: "Emily Davis", profession: "Data Analyst" },
+  ],
+  "2022": [
+    { avatar: "/placeholder-avatar.jpg", name: "David Lee", profession: "Backend Developer" },
+    { avatar: "/placeholder-avatar.jpg", name: "Sarah Kim", profession: "Frontend Developer" },
+    { avatar: "/placeholder-avatar.jpg", name: "Tom Wilson", profession: "Project Manager" },
+    { avatar: "/placeholder-avatar.jpg", name: "Olivia Chen", profession: "QA Engineer" },
+  ],
+  "2021": [
+    { avatar: "/placeholder-avatar.jpg", name: "Alex Park", profession: "DevOps Engineer" },
+    { avatar: "/placeholder-avatar.jpg", name: "Sophia Nguyen", profession: "Business Analyst" },
+    { avatar: "/placeholder-avatar.jpg", name: "Ryan Gonzalez", profession: "Mobile Developer" },
+    { avatar: "/placeholder-avatar.jpg", name: "Isabella Ramirez", profession: "Content Writer" },
+  ],
+}
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..14bcc11
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }