diff --git a/frontend/public/data/execs.ts b/frontend/public/data/execs.ts
new file mode 100644
index 0000000..c235fc9
--- /dev/null
+++ b/frontend/public/data/execs.ts
@@ -0,0 +1,45 @@
+// TODO: Combine with portfolios.ts
+
+export type Exec = {
+  name: string,
+  role: string,
+};
+
+export const EXECS: Exec[] = [
+  {
+    name: "Elizabeth Zhu Chan",
+    role: "Co-President",
+  },
+  {
+    name: "Lesley Lu",
+    role: "Co-President",
+  },
+  {
+    name: "Ivan Chan",
+    role: "Secretary",
+  },
+  {
+    name: "Justin Son",
+    role: "Treasurer",
+  },
+  {
+    name: "Sophie Khov",
+    role: "Arc Delegate",
+  },
+  {
+    name: "Catherine Kim",
+    role: "Grievance, Equity, Diversity and Inclusion Officer",
+  },
+  {
+    name: "Amy Liu",
+    role: "Vice President (Internals)",
+  },
+  {
+    name: "Nicole Jiang",
+    role: "Vice President (Externals)",
+  },
+  {
+    name: "Matthew Lim",
+    role: "Vice President (Technicals)",
+  },
+];
\ No newline at end of file
diff --git a/frontend/public/data/portfolios.ts b/frontend/public/data/portfolios.ts
new file mode 100644
index 0000000..e46e89d
--- /dev/null
+++ b/frontend/public/data/portfolios.ts
@@ -0,0 +1,256 @@
+export type PortfolioData = {
+    name: string,
+    description: string,
+    members: PortfolioMember[],
+};
+
+export type PortfolioMember = {
+    name: string,
+    role: PortfolioRole,
+    imageUrl: string;
+}
+
+export enum PortfolioRole {
+    DIRECTOR = "Director",
+    SUBCOM = "Subcommittee",
+}
+
+export const PORTFOLIOS: PortfolioData[] = [
+    {
+        name: "Careers",
+        description: "Facilitates industry sponsor relations, as well as creating events focused on interpersonal development and networking.",
+        members: [
+            {
+                name: "Eric Kang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jasmine Xian",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Max Lee",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Competitions",
+        description: "Organises a variety of contests to empower students beyond coursework and allow them meet others.",
+        members: [
+            {
+                name: "Aliff Azlan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Haibing Wang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Diego Untalan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Creative",
+        description: "Lays the groundwork for CSESoc's aesthetic branding, providing an outlet for creative expression.",
+        members: [
+            {
+                name: "Anna Wang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jordan Djamaan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Shabinda Sarkaria",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Education",
+        description: "Teaches interesting technical skills to the community, whether that's through workshops, articles, or programs.",
+        members: [
+            {
+                name: "Alina Jin",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "JJ Roberts-White",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Liam Smith",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Events",
+        description: "Plans a diverse range of large-scale activities while focusing on creating an enjoyable and fun experiences for all participants!",
+        members: [
+            {
+                name: "Emma Nguyen",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jalaj Jain",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jenny Lee",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "HR",
+        description: "Fosters the internal culture of the internal/external team - bringing people together, encouraging a supportive environment and most of all - memories.",
+        members: [
+            {
+                name: "Aryan Chauhan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Edwin Tang",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jasmine Guan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "IT",
+        description: "Oversees the development of the CSESoc's internal projects and plays an active role in the technical aspects of our society.",
+        members: [
+            {
+                name: "Derek Xu",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Dominic Cheung",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Marketing",
+        description: "Promotes CSESoc on our social media as well as creating supplementary marketing material to engage our audience.",
+        members: [
+            {
+                name: "Aaron Lee",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Lisa Lin",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Zitian Qin",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Media",
+        description: "Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.",
+        members: [
+            {
+                name: "Dylan Hu",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Gloria Xi",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Leo Ng Maisnam",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Online",
+        description: "Expands CSESoc's vibrant community into the virtual world, running online events and managing our online spaces to make sure everyone feels welcomed in our community.",
+        members: [
+            {
+                name: "Amy Tian",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Brandon Tan",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Outreach",
+        description: "Creates inclusive and approachable events targeted towards overlooked and underrepresented students.",
+        members: [
+            {
+                name: "Joyce He",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Sapphire Wildie",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+    {
+        name: "Socials",
+        description: "Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!",
+        members: [
+            {
+                name: "Davis Lim",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Jennifer Yu",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+            {
+                name: "Susie Xia",
+                role: PortfolioRole.DIRECTOR,
+                imageUrl: "/images/members/blank-pfp.png",
+            },
+        ],
+    },
+];
\ No newline at end of file
diff --git a/frontend/public/images/members/blank-pfp.png b/frontend/public/images/members/blank-pfp.png
new file mode 100644
index 0000000..b743738
Binary files /dev/null and b/frontend/public/images/members/blank-pfp.png differ
diff --git a/frontend/src/components/About/PortfolioCard.tsx b/frontend/src/components/About/PortfolioCard.tsx
new file mode 100644
index 0000000..7160a1b
--- /dev/null
+++ b/frontend/src/components/About/PortfolioCard.tsx
@@ -0,0 +1,37 @@
+// import Image from 'next/image';
+import { PortfolioData } from "@/../public/data/portfolios";
+
+interface PortfolioCardProps {
+  portfolio: PortfolioData,
+}
+
+// NOTE: Profile pictures can be added in the future
+const PortfolioCard = ({ portfolio }: PortfolioCardProps) => {
+  return (
+    <div>
+      <p className="text-lg my-6">
+        {portfolio.description}
+      </p>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {portfolio.members.map(member => (
+          <div>
+            {/* <Image
+              src={member.imageUrl}
+              alt={`${member.name} portrait`}
+              width={150}
+              height={150}
+            /> */}
+            
+            <div>
+              <p>{member.name}</p>
+              <p className="text-gray-500">{member.role}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PortfolioCard;
\ No newline at end of file
diff --git a/frontend/src/components/About/PortfolioDisplay.tsx b/frontend/src/components/About/PortfolioDisplay.tsx
new file mode 100644
index 0000000..d5f05bd
--- /dev/null
+++ b/frontend/src/components/About/PortfolioDisplay.tsx
@@ -0,0 +1,29 @@
+import { useState } from "react";
+import PortfolioCard from "./PortfolioCard";
+import { PORTFOLIOS } from "@/../public/data/portfolios";
+
+const PortfolioDisplay = () => {
+  const [selectedPortfolio, setSelectedPortfolio] = useState("Careers");
+  
+  const names = PORTFOLIOS.map(port => port.name);
+
+  return (
+    <div>
+      <div className="flex justify-between max-w-full h-10 my-6 snap-x snap-mandatory overflow-auto hide-scrollbar">
+        {names.map((name) => (
+          <button 
+            className={`grow text-center border border-white ${name === selectedPortfolio ? "bg-[#3977F9]" : ""} p-2`} 
+            key={`btn-${name}`}
+            onClick={() => setSelectedPortfolio(name)}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+      
+      <PortfolioCard portfolio={PORTFOLIOS.find(port => port.name === selectedPortfolio) ?? PORTFOLIOS[0]} />
+    </div>
+  )
+}
+
+export default PortfolioDisplay;
\ No newline at end of file
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 961e173..5c75fb0 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -5,7 +5,7 @@ import { socialLinks } from '@/../public/data/socialInfos';
 const Footer = () => {
   return (
     <section>
-      <div className="sm:flex justify-between pb-10">
+      <div className="sm:flex justify-between py-10">
         <div className="flex flex-col gap-10">
           <div className="flex items-center">
             <Link href="/" className="flex">
diff --git a/frontend/src/pages/about/execs-directors-subcoms.tsx b/frontend/src/pages/about/execs-directors-subcoms.tsx
index d769da6..2123dfb 100644
--- a/frontend/src/pages/about/execs-directors-subcoms.tsx
+++ b/frontend/src/pages/about/execs-directors-subcoms.tsx
@@ -1,6 +1,8 @@
+import PortfolioDisplay from "@/components/About/PortfolioDisplay";
 import Layout from "@/components/Layout";
 import PageBody from "@/components/PageBody";
 import PageTitle from "@/components/PageTitle";
+import { EXECS } from "@/../public/data/execs";
 
 const ExecsDirectorsSubcommitteesPage = () => {
   return (
@@ -14,237 +16,44 @@ const ExecsDirectorsSubcommitteesPage = () => {
             Execs are elected annually by CSE students at the end of the preceding year and Directors are selected by Execs.
           </p>
           <p className="text-xl my-5">
-            The CSESoc Executive and Director team for 2024 is:
+            The CSESoc Executive and Director team for 2024:
           </p>
           <div className="flex justify-center items-center">
             <img src="/images/csesoc-team-2024.jpeg" alt="CSESoc Team 2024" width={700} height={700} />
           </div>
         </div>
 
-        <div className="my-5 text-center">
-            <h2 className="text-xl font-bold mb-2">Execs</h2>
-            <div className="flex justify-center">
-                <ul className="mx-4">
-                    <li>Elizabeth Zhu Chan - Co-President</li>
-                    <li>Lesley Lu - Co-President</li>
-                    <li>Ivan Chan - Secretary</li>
-                    <li>Justin Son - Treasurer</li>
-                    <li>Sophie Khov - Arc Delegate</li>
-                    <li>Catherine Kim - Grievance, Equity, Diversity and Inclusion Officer</li>
-                    <li>Amy Liu - Vice President (Internals)</li>
-                    <li>Nicole Jiang - Vice President (Externals)</li>
-                    <li>Matthew Lim - Vice President (Technicals)</li>
-                </ul>
-            </div>
-        </div>
-
-        <div className="grid grid-cols-2 gap-6">
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Careers</h2>
-                <ul className="space-y-1">
-                    <li>Eric Kang</li>
-                    <li>Jasmine Xian</li>
-                    <li>Max Lee</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Competitions</h2>
-                <ul>
-                    <li>Aliff Azlan</li>
-                    <li>Haibing Wang</li>
-                    <li>Diego Untalan</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Creative</h2>
-                <ul>
-                    <li>Anna Wang</li>
-                    <li>Jordan Djamaan</li>
-                    <li>Shabinda Sarkaria</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Education</h2>
-                <ul>
-                    <li>Alina Jin</li>
-                    <li>JJ Roberts-White</li>
-                    <li>Liam Smith</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Events</h2>
-                <ul>
-                    <li>Emma Nguyen</li>
-                    <li>Jalaj Jain</li>
-                    <li>Jenny Lee</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">HR</h2>
-                <ul>
-                    <li>Aryan Chauhan</li>
-                    <li>Edwin Tang</li>
-                    <li>Jasmine Guan</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">IT</h2>
-                <ul>
-                    <li>Derek Xu</li>
-                    <li>Dominic Cheung</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Marketing</h2>
-                <ul>
-                    <li>Aaron Lee</li>
-                    <li>Lisa Lin</li>
-                    <li>Zitian Qin</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Media</h2>
-                <ul>
-                    <li>Dylan Hu</li>
-                    <li>Gloria Xi</li>
-                    <li>Leo Ng Maisnam</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Online</h2>
-                <ul>
-                    <li>Amy Tian</li>
-                    <li>Brandon Tan</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Outreach</h2>
-                <ul>
-                    <li>Joyce He</li>
-                    <li>Sapphire Wildie</li>
-                </ul>
-            </div>
-
-            <div className="my-5 flex flex-col justify-center items-center text-center">
-                <h2 className="text-xl font-bold mb-2">Socials</h2>
-                <ul>
-                    <li>Davis Lim</li>
-                    <li>Jennifer Yu</li>
-                    <li>Susie Xia</li>
-                </ul>
-            </div>
-
-            <p className="text-xl bold my-5">
-              Get to know them better <a href="https://media.csesoc.org.au/fyg24-meet-csesoc/" className="text-blue-500 hover:underline">here</a>!
-            </p>
+        {/* EXECS */}
+        <div className="my-5">
+          <h2 className="text-xl font-bold mb-2">Execs</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {EXECS.map(exec => (
+              <div>
+                <div>
+                  <p>{exec.name}</p>
+                  <p className="text-gray-500">{exec.role}</p>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
 
-
-        <div className="border-t border-gray-300 my-5"></div>
+        <div className="border-t border-gray-300 my-10"></div>
 
         {/* PORTFOLIOS */}
         <div className="space-y-6">
           <div>
-            <h2 className="text-xl font-semibold mb-2">Subcommitees</h2>
+            <h2 className="text-xl font-semibold mb-2">Directors & Subcommitees</h2>
             <p className="text-lg">
-              Subcommittees are the teams that run CSESoc and its events to the benefit of all UNSW Computing students.
+              Subcommittees are the teams led by Directors that run CSESoc and its events to the benefit of all UNSW Computing students. Click to see the directors of each team!
             </p>
-            </div>
-          <div>
-            <h2 className="text-xl font-semibold mb-2">Careers</h2>
-            <p className="text-lg">
-              Facilitates industry sponsor relations, as well as creating events focused on interpersonal
-              development and networking.
-            </p>
-          </div>
-
-          <div>
-            <h2 className="text-xl font-semibold mb-2">Competitions</h2>
-            <p className="text-lg">
-              Organises a variety of contests to empower students beyond coursework and allow them meet
-              others.
-            </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Creative</h2>
-              <p className="text-lg">
-                  Lays the groundwork for CSESoc’s aesthetic branding, providing an outlet for creative expression.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Education</h2>
-              <p className="text-lg">
-                  Teaches interesting technical skills to the community, whether that's through workshops, articles or programs.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Events</h2>
-              <p className="text-lg">
-                  Plan a diverse range of large-scale activities while focusing on creating an enjoyable and fun experiences for all participants!
-              </p>
           </div>
 
-          <div>
-              <h2 className="text-xl font-semibold mb-2">HR</h2>
-              <p className="text-lg">
-                  Fosters the internal culture of the internal/external team - bringing people together, encouraging a supportive environment and most of all - memories.
-              </p>
-          </div>
+          <PortfolioDisplay />
 
-          <div>
-              <h2 className="text-xl font-semibold mb-2">IT</h2>
-              <p className="text-lg">
-                  Oversees the development of the CSESoc’s internal projects and infrastructure. Plays an active role in the technical aspects of our society.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Marketing</h2>
-              <p className="text-lg">
-                  Promotes CSESoc on our social media as well as create supplementary marketing material to engage our audience.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Media</h2>
-              <p className="text-lg">
-                  Focuses on creating content for our CSESoc community and beyond to capture our diverse student voice.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Online</h2>
-              <p className="text-lg">
-                  Expands CSESoc’s vibrant community into the virtual world. Includes running events online and managing our online spaces to make sure everyone feels welcomed in our community.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Outreach</h2>
-              <p className="text-lg">
-                  Creates inclusive and approachable events targeted towards overlooked and underrepresented students.
-              </p>
-          </div>
-
-          <div>
-              <h2 className="text-xl font-semibold mb-2">Socials</h2>
-              <p className="text-lg">
-                  Organises approachable events targeted towards building an inclusive and welcoming community, to help build long-lasting friendships!
-              </p>
-          </div>
+          <p className="text-xl bold my-5">
+            Get to know them better <a href="https://media.csesoc.org.au/fyg24-meet-csesoc/" className="text-blue-500 hover:underline">here</a>!
+          </p>
         </div>
       </PageBody>
     </Layout>