diff --git a/src/components/MemberCard.astro b/src/components/MemberCard.astro
index 144eed5..83a846d 100644
--- a/src/components/MemberCard.astro
+++ b/src/components/MemberCard.astro
@@ -1,9 +1,9 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import type { Member } from "../store/member"
+import type { PublicMember } from "../store/member"
 import "../styles/global.css"
-const { member } = Astro.props as { member: Member }
+const { member } = Astro.props as { member: PublicMember }
 const avatar = member.avatar;
 ---
 
@@ -19,32 +19,32 @@ const avatar = member.avatar;
           class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
         >
           {
-          avatar
-            ? (
-                typeof avatar !== "string"
-                  ? (
-                    <img
-                      class="object-cover h-full navigate"
-                      src={(await avatar)?.default?.src}
-                      alt=""
-                    />
-                    )
-                  : (
-                    <img
-                      class="object-cover h-full navigate"
-                      src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
-                      alt=""
-                    />
-                    )
-              )
-            : (
-              <img
-                class="object-cover h-3/4 navigate"
-                src="https://oss.nbtca.space/CA-logo.svg"
-                alt=""
-              />
-              )
-        }
+            avatar
+              ? (
+                  typeof avatar !== "string"
+                    ? (
+                        <img
+                          class="object-cover h-full navigate"
+                          src={(await avatar)?.default?.src}
+                          alt=""
+                        />
+                      )
+                    : (
+                        <img
+                          class="object-cover h-full navigate"
+                          src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
+                          alt=""
+                        />
+                      )
+                )
+              : (
+                  <img
+                    class="object-cover h-3/4 navigate"
+                    src="https://oss.nbtca.space/CA-logo.svg"
+                    alt=""
+                  />
+                )
+          }
         </div>
       </div>
       <div class="h-16">
diff --git a/src/pages/members/index.astro b/src/pages/members/index.astro
new file mode 100644
index 0000000..6a809e2
--- /dev/null
+++ b/src/pages/members/index.astro
@@ -0,0 +1,61 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro"
+import { computed } from "vue"
+import MemberCard from "../../components/MemberCard.astro"
+import type { PublicMember } from "../../store/member.ts"
+import { saturdayClient } from "../../utils/client"
+
+const { data: members } = await saturdayClient.GET("/members", { params: {} })
+
+// memberId is like "3232323233", the second and third number is the year of the member
+const memberGroupByYear = computed(() => {
+  const group = members
+    // TODO delete the test member
+    .filter(
+      member =>
+        member.memberId != "0000000000" && member.memberId != "2333333333",
+    )
+    .reduce(
+      (acc, cur) => {
+        const year = parseInt("20" + cur.memberId.slice(1, 3))
+        if (!acc[year]) {
+          acc[year] = []
+        }
+        acc[year].push(cur)
+        return acc
+      },
+      {} as Record<string, PublicMember[]>,
+    )
+  return group
+});
+---
+
+  <BaseLayout primaryTitle="关于">
+    <section class="pb-20 bg-[#f5f5f7]">
+      <div class="section-content">
+        <div
+          class="text-2xl lg:text-3xl leading-[1.125] font-bold pt-6 pb-4 lg:pb-6"
+        >
+          协会成员
+        </div>
+        <div>
+          {
+            Object.keys(memberGroupByYear.value)
+              .sort((a, b) => parseInt(b) - parseInt(a))
+              .map((year) => {
+                return (
+                  <div class="py-4 first:pt-2">
+                    <div class="text-lg lg:text-2xl font-bold pb-2">{year}</div>
+                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
+                      {memberGroupByYear.value[year].map(member => (
+                        <MemberCard member={member} />
+                      ))}
+                    </div>
+                  </div>
+                )
+              })
+          }
+        </div>
+      </div>
+    </section>
+  </BaseLayout>