diff --git a/client/src/components/main/MemberProfile.tsx b/client/src/components/main/MemberProfile.tsx
index 13e9e434..859d4b6b 100644
--- a/client/src/components/main/MemberProfile.tsx
+++ b/client/src/components/main/MemberProfile.tsx
@@ -20,6 +20,7 @@ export type MemberProfileData = {
     link: string;
     socialMediaUserName: string;
   }[];
+  pk: number;
 };
 
 type MemberProfileProps = {
diff --git a/client/src/hooks/useCommittee.ts b/client/src/hooks/useCommittee.ts
index 69c6fb8a..5759947d 100644
--- a/client/src/hooks/useCommittee.ts
+++ b/client/src/hooks/useCommittee.ts
@@ -8,6 +8,11 @@ export type ApiMember = {
   profile_picture: string;
   pronouns: string;
   about: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
+  pk: number;
 };
 
 export function useCommittee() {
diff --git a/client/src/hooks/useMember.ts b/client/src/hooks/useMember.ts
index c564657e..0d1f0581 100644
--- a/client/src/hooks/useMember.ts
+++ b/client/src/hooks/useMember.ts
@@ -11,6 +11,7 @@ type ApiMember = {
     link: string;
     socialMediaUserName: string;
   }[];
+  pk: number;
 };
 
 // return api member, import id number from router, is not enabled if not a number type
diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
index c64544aa..00383324 100644
--- a/client/src/pages/about.tsx
+++ b/client/src/pages/about.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 import { ApiMember, useCommittee } from "@/hooks/useCommittee";
 
@@ -61,6 +62,18 @@ export default function AboutPage() {
     </>
   );
 
+  function committeeImage(profilePic: string) {
+    return (
+      <Image
+        src={profilePic === null ? "/landing_placeholder.png" : profilePic}
+        alt="/landing_placeholder.png"
+        width={134}
+        height={144}
+        className="h-[9rem] w-[8.4rem]"
+      />
+    );
+  }
+
   if (isPending) {
     for (let i = 0; i < 8; i++) {
       if (i < 4) {
@@ -69,6 +82,7 @@ export default function AboutPage() {
           pronouns: "",
           profile_picture: "/landing_placeholder.png",
           about: "",
+          pk: 0,
         });
       } else {
         bottomRow.push({
@@ -76,6 +90,7 @@ export default function AboutPage() {
           pronouns: "",
           profile_picture: "/landing_placeholder.png",
           about: "",
+          pk: 0,
         });
       }
     }
@@ -109,7 +124,7 @@ export default function AboutPage() {
     <main className="min-h-screen bg-background">
       {about}
       {/* Portraits Section - DARK - Full Width */}
-      <section className="w-full bg-background px-6 py-10 pt-16 md:px-10">
+      <section className="w-full bg-background px-6 py-10 pb-20 pt-16 md:px-10">
         <div className="mx-auto max-w-6xl">
           {/* Top row - 4 Presidents */}
           <div className="flex flex-wrap justify-center gap-6 md:gap-10">
@@ -118,22 +133,23 @@ export default function AboutPage() {
                 key={`top-${idx}`}
                 className="flex flex-col items-start gap-0"
               >
-                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
-                  <Image
-                    src={
-                      member.profile_picture === null
-                        ? "/landing_placeholder.png"
-                        : member.profile_picture
-                    }
-                    alt="/landing_placeholder.png"
-                    width={108}
-                    height={108}
-                    className="h-[7.25rem] w-[6.75rem]"
-                  />
+                <div className="relative flex h-56 w-56 items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
+                  {member.pk === 0 ? (
+                    committeeImage(member.profile_picture)
+                  ) : (
+                    <Link href={`/members/${member.pk}`}>
+                      {committeeImage(member.profile_picture)}
+                    </Link>
+                  )}
                 </div>
-                <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
+                <div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
                   <p className="inline-block bg-card px-2 py-1 text-white">
-                    {member.name} {member.pronouns}
+                    {member.pk === 0 ? (
+                      <>{member.name}</>
+                    ) : (
+                      <Link href={`/members/${member.pk}`}>{member.name}</Link>
+                    )}
+                    {member.pronouns}
                   </p>
                   <p className="inline-block bg-card px-2 py-1 text-primary">
                     {roleOrder[idx]}
@@ -150,22 +166,23 @@ export default function AboutPage() {
                 key={`bottom-${idx}`}
                 className="flex flex-col items-start gap-0"
               >
-                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
-                  <Image
-                    src={
-                      member.profile_picture === null
-                        ? "/landing_placeholder.png"
-                        : member.profile_picture
-                    }
-                    alt="/landing_placeholder.png"
-                    width={108}
-                    height={108}
-                    className="h-[7.25rem] w-[6.75rem]"
-                  />
+                <div className="relative flex h-56 w-56 items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
+                  {member.pk === 0 ? (
+                    committeeImage(member.profile_picture)
+                  ) : (
+                    <Link href={`/members/${member.pk}`}>
+                      {committeeImage(member.profile_picture)}
+                    </Link>
+                  )}
                 </div>
-                <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
+                <div className="w-56 pl-3 text-left font-firaCode text-sm leading-tight">
                   <p className="inline-block bg-card px-2 py-1 text-white">
-                    {member.name} {member.pronouns}
+                    {member.pk === 0 ? (
+                      <>{member.name}</>
+                    ) : (
+                      <Link href={`/members/${member.pk}`}>{member.name}</Link>
+                    )}
+                    {member.pronouns}
                   </p>
                   <p className="inline-block bg-card px-2 py-1 text-primary">
                     {roleOrder[4 + idx]}
diff --git a/server/game_dev/serializers.py b/server/game_dev/serializers.py
index 4d278157..386ea930 100644
--- a/server/game_dev/serializers.py
+++ b/server/game_dev/serializers.py
@@ -103,4 +103,5 @@ class Meta:
             "about",
             "pronouns",
             "social_media",
+            "pk"
         ]
diff --git a/server/game_dev/views.py b/server/game_dev/views.py
index 40ea5457..086119cf 100644
--- a/server/game_dev/views.py
+++ b/server/game_dev/views.py
@@ -85,7 +85,7 @@ def get_queryset(self):
         outputList = []
         roleOrder = ("P", "VP", "SEC", "TRE", "MARK", "EVE", "PRO", "FRE")
         placeholderMember = {"name": "Position not filled", "profile_picture": "url('/landing_placeholder.png')",
-                             "about": "", "pronouns": ""}
+                             "about": "", "pronouns": "", "pk": 0}
         for i in roleOrder:
             try:
                 cur = Committee.objects.get(role=i).id