diff --git a/app/about/page.tsx b/app/about/page.tsx
index 264d9e7..96a0f52 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -13,6 +13,7 @@ interface member {
     imgSrc: string;
     socials: {
         linkedin: string;
+        github?: string;
     };
 }
 
@@ -53,21 +54,63 @@ const LinkedinIcon = () => (
     </svg>
 );
 
+const GitHubIcon = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        width='24'
+        height='24'
+        viewBox='0 0 16 16'
+        fill='currentColor'
+    >
+        <path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8' />
+    </svg>
+);
+
 // Team data organized for easier management
 const teamLeads: member[] = [
     {
-        name: 'Jenny Fan',
+        name: 'Zhao Song Zhou',
         role: 'Team Lead',
-        year: '2025 - 2026',
-        imgSrc: 'https://i.imgur.com/zDqurNZ.jpeg',
+        year: '2026 - 2027',
+        imgSrc: 'https://i.imgur.com/JeUh9dc.jpeg',
         socials: {
-            linkedin: 'https://www.linkedin.com/in/jennyfan04/',
+            linkedin: 'https://www.linkedin.com/in/zhao-song-zhou/',
+            github: 'https://github.com/ZhaoSongZh7',
+        },
+    },
+    {
+        name: 'Alvin Sze',
+        role: 'Team Lead',
+        year: '2026 - 2027',
+        imgSrc: 'https://i.imgur.com/mZy9kzp.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/alvinsze/',
+            github: 'https://github.com/asze17',
         },
     },
 ];
 
 const teamMembers: member[] = [
-    // Add your name, role, and image here!
+    {
+        name: 'Allison Lee',
+        role: 'Product Manager',
+        year: '2026 - 2027',
+        imgSrc: 'https://i.imgur.com/3SPqM7z.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/allisonelee/',
+            github: 'https://github.com/allisonelee',
+        },
+    },
+    {
+        name: 'Christal Chen',
+        role: 'Software Engineer',
+        year: '2026 - 2027',
+        imgSrc: 'https://i.imgur.com/ZshQ3Fj.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/christalchen/',
+            github: 'https://github.com/12chenec',
+        },
+    },
 ];
 
 const pastLeadership: member[] = [
@@ -78,10 +121,56 @@ const pastLeadership: member[] = [
         imgSrc: 'https://i.imgur.com/kUbzXL9.png',
         socials: {
             linkedin: 'https://www.linkedin.com/in/spencer-doyle3/',
+            github: 'https://github.com/Spencer04Hire',
+        },
+    },
+    {
+        name: 'Jenny Fan',
+        role: 'Team Lead',
+        year: '2025 - 2026',
+        imgSrc: 'https://i.imgur.com/zDqurNZ.jpeg',
+        socials: {
+            linkedin: 'https://www.linkedin.com/in/jennyfan04/',
+            github: 'https://github.com/jfmath04',
         },
     },
 ];
 
+// Small pill-style badge used to display role + year together with proper spacing
+const MemberBadges = ({
+    role,
+    year,
+    align = 'left',
+}: {
+    role: string;
+    year: string;
+    align?: 'left' | 'center';
+}) => {
+    const theme = useTheme();
+    return (
+        <div
+            className={`flex flex-wrap gap-2 mt-1 mb-3 ${
+                align === 'center'
+                    ? 'justify-center'
+                    : 'justify-center sm:justify-start'
+            }`}
+        >
+            <span
+                className='inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold tracking-wide'
+                style={{
+                    backgroundColor: theme.colors.blue50 ?? '#EBF5FF',
+                    color: theme.colors.blue600 ?? theme.colors.blue500,
+                }}
+            >
+                {role}
+            </span>
+            <span className='inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold tracking-wide bg-slate-100 text-slate-500'>
+                {year}
+            </span>
+        </div>
+    );
+};
+
 /**
  * Modern "Meet the Team" page component.
  * Features a clean, professional design with interactive cards.
@@ -170,15 +259,18 @@ export function App() {
                                         <h3 className='text-2xl font-bold text-slate-900'>
                                             {lead.name}
                                         </h3>
-                                        <p
-                                            className='text-md font-semibold mb-2'
-                                            style={{
-                                                color: theme.colors.blue500,
-                                            }}
-                                        >
-                                            {lead.role}
-                                        </p>
+                                        <MemberBadges
+                                            role={lead.role}
+                                            year={lead.year}
+                                        />
                                         <div className='flex justify-center sm:justify-start space-x-4'>
+                                            {lead.socials.github ? (
+                                                <SocialIcon
+                                                    href={lead.socials.github}
+                                                >
+                                                    <GitHubIcon />
+                                                </SocialIcon>
+                                            ) : null}
                                             <SocialIcon
                                                 href={lead.socials.linkedin}
                                             >
@@ -214,13 +306,19 @@ export function App() {
                                 <h4 className='font-bold text-slate-800 text-lg'>
                                     {member.name}
                                 </h4>
-                                <p
-                                    className='!text-sm'
-                                    style={{ color: theme.colors.blue500 }}
-                                >
-                                    {member.role}
-                                </p>
-                                <div className='flex mx-auto w-min mt-2 justify-center sm:justify-start space-x-4'>
+                                <MemberBadges
+                                    role={member.role}
+                                    year={member.year}
+                                    align='center'
+                                />
+                                <div className='flex mx-auto w-min justify-center sm:justify-start space-x-4'>
+                                    {member.socials.github ? (
+                                        <SocialIcon
+                                            href={member.socials.github}
+                                        >
+                                            <GitHubIcon />
+                                        </SocialIcon>
+                                    ) : null}
                                     <SocialIcon href={member.socials.linkedin}>
                                         <LinkedinIcon />
                                     </SocialIcon>
@@ -267,15 +365,18 @@ export function App() {
                                         <h3 className='text-2xl font-bold text-slate-900'>
                                             {lead.name}
                                         </h3>
-                                        <p
-                                            className='text-md font-semibold mb-2'
-                                            style={{
-                                                color: theme.colors.blue500,
-                                            }}
-                                        >
-                                            {lead.year}
-                                        </p>
+                                        <MemberBadges
+                                            role={lead.role}
+                                            year={lead.year}
+                                        />
                                         <div className='flex justify-center sm:justify-start space-x-4'>
+                                            {lead.socials.github ? (
+                                                <SocialIcon
+                                                    href={lead.socials.github}
+                                                >
+                                                    <GitHubIcon />
+                                                </SocialIcon>
+                                            ) : null}
                                             <SocialIcon
                                                 href={lead.socials.linkedin}
                                             >