diff --git a/public/img/about/avatar.png b/public/img/about/avatar.png
new file mode 100644
index 0000000..041410f
Binary files /dev/null and b/public/img/about/avatar.png differ
diff --git a/src/app/about/components/contributor-card.tsx b/src/app/about/components/contributor-card.tsx
new file mode 100644
index 0000000..33a64e6
--- /dev/null
+++ b/src/app/about/components/contributor-card.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image';
+
+import { ContributorCardType } from '../page';
+
+export default function ContributorCard({ nickname, avatarUrl, occupation }: ContributorCardType) {
+  return (
+    <div className="col-span-1 w-[178px] h-[260px] mt-[26px] pt-[36px] pb-[44px] rounded-[6px] flex flex-col bg-[#fff]">
+      <div className="w-[92px] h-[92px] mx-auto rounded-[50%] bg-[#fff] overflow-hidden">
+        {/* <Image width={92} height={92} src={avatarUrl} alt={`${nickname}-avatar`} /> */}
+        <Image width={130} height={130} unoptimized src={avatarUrl} alt="wechat qrCode"></Image>
+      </div>
+      <p className="mt-[31px] mb-[13px] text-[18px] leading-[25px] text-[rgba(0,0,0,0.95)] text-center">{nickname}</p>
+      <p className="text-[15px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">{occupation}</p>
+    </div>
+  );
+}
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 522a264..68aaaca 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,6 +1,96 @@
 import Image from 'next/image';
 
 import styles from './about.module.css';
+import ContributorCard from './components/contributor-card';
+
+export interface ContributorCardType {
+  nickname: string;
+  avatarUrl: string;
+  occupation: string;
+}
+
+const contributorList: ContributorCardType[] = [
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+  {
+    nickname: 'Blaksder',
+    avatarUrl: '/img/about/avatar.png',
+    occupation: '前端工程师',
+  },
+];
 
 export default function Download() {
   return (
@@ -60,6 +150,12 @@ export default function Download() {
             <p className="text-right">- 雀乐团队</p>
           </div>
 
+          <div className="grid grid-cols-6 gap-6 mt-[26px]">
+            {contributorList.map((card) => (
+              <ContributorCard key={card.nickname} {...card} />
+            ))}
+          </div>
+
           {/* contributor wall */}
         </div>
 
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index cf8a0f2..97e5223 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -33,7 +33,7 @@ export default function Header() {
             {menuList.map(({ name, path }) => (
               <li
                 key={path}
-                className={`text-[18px] leading-[25.2px]  hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
+                className={`text-[18px] leading-[25.2px] hover:text-[rgba(0,0,0,0.95)] ${pathName === path ? 'text-[rgba(0,0,0,0.95)]' : 'text-[rgba(0,0,0,0.4)]'}`}
               >
                 <Link href={path}>{name}</Link>
               </li>