diff --git a/frontend/src/app/about/ExecProfile.tsx b/frontend/src/app/about/ExecProfile.tsx
index ef3e64d..360be19 100644
--- a/frontend/src/app/about/ExecProfile.tsx
+++ b/frontend/src/app/about/ExecProfile.tsx
@@ -1,54 +1,70 @@
 import * as Dialog from "@radix-ui/react-dialog";
+import { SocialIcon } from "react-social-icons";
 import Image from "next/image";
+
+
 import ProfileModal from "./ProfileModal";
+import { Executive } from "./ExecProfiles";
+
+
+export default function ExecProfile(exec: Executive) {
 
 
-interface ExecProfileProps
-{
-    ID: string;
-    
-    Name: string;
-    
-    ImageBuffer: string;
-    
-    Position: Array<string>;
-
-    Description: string;
-}
- 
-export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
-{ 
-        
+
+    /*
+    Anderson's thoughts:
+
+    This entire component is black magic.
+    */
     return (
         <div className="flex flex-col items-center gap-3 max-w-[200px]">
             <div className="flex flex-col items-center text-center">
-                <div className="flex" style={{ justifyContent: "center"}}>
+                <div className="flex" style={{ justifyContent: "center" }}>
                     <div>
                         <Dialog.Root>
-                            <Dialog.Trigger className='font-bold flex flex-col items-center'>
-                                
-                                <Image src={ImageBuffer} width={200} height={200} alt={Name} style={{ borderRadius: "100%", height: 200, width: 200 }} className={`w-[${200}px] h-[${200}px] aspect-square rounded-2xl object-cover transition duration-300 ease-in-out hover:scale-105 `}/>
-                                <div>{Name}</div>
-                                
+                            <Dialog.Trigger className="flex flex-col items-center">
+                                <Image
+                                    src={exec.profile_picture ? `https://${exec.profile_picture}` : "/blank_profile.jpg"}
+                                    width={200}
+                                    height={200}
+                                    alt={exec.name}
+                                    style={{ borderRadius: "100%", height: 200, width: 200 }}
+                                    className="w-[200px] h-[200px] aspect-square rounded-2xl object-cover transition duration-500 ease-in-out hover:scale-105 hover:border-4 border-dashed border-0 border-lang-orange"
+                                />
+
+                                <div className="font-bold">{exec.name}</div>
+                                <p className="text-gray-300">{exec.roles.join(" & ")}</p>
+
+                                <div className="flex gap-2">
+                                    {Object.entries(exec.social_media_links).map(([platform, url]) => (
+                                        <SocialIcon
+                                            key={url}
+                                            url={url}
+                                            fgColor="white"
+                                            bgColor="#171717"
+                                            style={{ height: 40, width: 40 }}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="transition duration-300 transform hover:scale-125"
+                                        />
+                                    ))}
+                                </div>
                             </Dialog.Trigger>
                             <Dialog.Portal>
                                 <Dialog.Overlay className="fixed inset-0 bg-black/60">
-                                    <Dialog.Content className="fixed top-1/4 left-1/2 -translate-x-1/2 p-8" style={{ border: "2px solid #F15A22", backgroundColor: "#171717" }}>
-                                        <ProfileModal
-                                            ID={ID}
-                                            Name={Name}
-                                            Position={Position.join(" & ")}
-                                            ImageBuffer={ImageBuffer}
-                                            Description={Description}
-                                            imageWidth={200} />
+                                {/* FRANKLY THIS IS AWFUL */}
+                                    <Dialog.Content
+                                        className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] md:w-fit p-2 md:p-8 overflow-scroll"
+                                        style={{ border: "2px solid #F15A22", backgroundColor: "#171717" }}
+                                    >
+                                        <ProfileModal {...exec} />
                                     </Dialog.Content>
                                 </Dialog.Overlay>
                             </Dialog.Portal>
                         </Dialog.Root>
-                        <p>{Position.join(" & ")}</p>
                     </div>
                 </div>
             </div>
-        </div>);
-}
- 
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/about/ExecProfiles.tsx b/frontend/src/app/about/ExecProfiles.tsx
index 9d961a8..1f6d80d 100644
--- a/frontend/src/app/about/ExecProfiles.tsx
+++ b/frontend/src/app/about/ExecProfiles.tsx
@@ -1,13 +1,17 @@
 import ExecProfile from './ExecProfile';
 
-interface Executive {
+export interface Executive {
   id: string;
   roles: string[];
   name: string;
+  pronouns: string;
   profile_picture: string | null;
   current_status: string;
   bio: string;
+  first_term: string;
   last_term: string;
+  social_media_links: { [key: string]: string }
+
 }
 
 async function getExecutives() {
@@ -55,21 +59,10 @@ export default async function ExecProfiles() {
       {/* Block for current executives grouped by year */}
       {Object.keys(groupedCurrentExecutives).map(year => (
         <div key={year} className="flex-row gap-5">
-          <h2 className="text-3xl font-semibold pb-5">Current Executives:</h2>
+          <h2 className="text-3xl pb-5">Current Executives:</h2>
           <div className=" flex flex-wrap flex-row gap-5 justify-center">
             {groupedCurrentExecutives[year].map((exec) => (
-              <ExecProfile
-                key={exec.id}
-                ID={exec.id}
-                Position={exec.roles}
-                Name={exec.name}
-                ImageBuffer={
-                  exec.profile_picture
-                    ? `https://${exec.profile_picture}`
-                    : '/blank_profile.jpg'
-                }
-                Description={exec.bio || ''}
-              />
+              <ExecProfile {...exec}/>
             ))}
           </div>
         </div>
@@ -78,21 +71,10 @@ export default async function ExecProfiles() {
       {/* Block for retired executives grouped by year */}
       {sortedRetiredYears.map(year => (
         <div key={year} className="mt-40">
-          <h2 className="text-2xl font-semibold pb-5">Retired Executives - {year}:</h2>
+          <h2 className="text-2xl pb-5">Retired Executives - {year}:</h2>
           <div className="flex flex-wrap flex-row gap-5 justify-center">
             {groupedRetiredExecutives[year].map((exec) => (
-              <ExecProfile
-                key={exec.id}
-                ID={exec.id}
-                Position={exec.roles}
-                Name={exec.name}
-                ImageBuffer={
-                  exec.profile_picture
-                    ? `https://${exec.profile_picture}`
-                    : '/blank_profile.jpg'
-                }
-                Description={exec.bio || ''}
-              />
+              <ExecProfile {...exec}/>
             ))}
           </div>
         </div>
diff --git a/frontend/src/app/about/ProfileModal.tsx b/frontend/src/app/about/ProfileModal.tsx
index 7dc72fd..ac4a788 100644
--- a/frontend/src/app/about/ProfileModal.tsx
+++ b/frontend/src/app/about/ProfileModal.tsx
@@ -2,49 +2,51 @@ import * as Dialog from "@radix-ui/react-dialog";
 import Image from "next/image";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { SocialIcon } from "react-social-icons";
 
-interface ProfileModalProps {
-    ID: String;
+import { Executive } from "./ExecProfiles";
 
-    Name: string;
-
-    Position: string;
-
-    Description: string;
-
-    ImageBuffer: string;
-
-    imageWidth: number;
-}
-
-export default function ProfileModal({Name, Position, ImageBuffer, Description, imageWidth}: ProfileModalProps) {
+export default function ProfileModal({ id, roles, name, pronouns, profile_picture, current_status, bio, first_term, last_term, social_media_links }: Executive) {
     return (
         // TODO: FIX modal description text doesn't scroll
-        <Dialog.Content className="relative max-w-[90vw] md:max-w-[80vw] max-h-[90vh] md:max-h-[70vh] overflow-y-scroll p-5">
+        <Dialog.Content className="relative max-w-full md:max-w-[80vw] max-h-[90vh] md:max-h-[70vh] overflow-y-scroll p-2 md:p-5">
             <VisuallyHidden>
-                <DialogTitle>{Name}</DialogTitle>
+                <DialogTitle>{name}</DialogTitle>
             </VisuallyHidden>
-            
+
             <div className="flex flex-col md:flex-row gap-5">
                 {/* Profile Image and Info Section */}
-                <div className="flex flex-col items-center gap-3">
-                    <Image 
-                        src={ImageBuffer} 
-                        width={imageWidth} 
-                        height={imageWidth} 
-                        alt={`Profile photo of ${Name}`}
-                        className="rounded-full aspect-square object-cover w-[20vw] h-[20vw] min-w-[200px] min-h-[200px]"
+                <div className="flex flex-col items-center gap-3 w-fit">
+                    <Image
+                        src={profile_picture ? `https://${profile_picture}` : '/blank_profile.jpg'}
+                        width={100}
+                        height={100}
+                        alt={`Profile photo of ${name}`}
+                        className="rounded-full aspect-square object-cover w-[100px] h-[100px] md:w-[200px] md:h-[200px] border-4 border-white"
                     />
                     <div className="text-center">
-                        <h2 className="font-bold text-xl">{Name}</h2>
-                        <p className="text-gray-600">{Position}</p>
+                        <h2 className="font-bold text-xl">{name}</h2>
+                        <p className="text-gray-200">{roles.join(" & ")}</p>
                     </div>
-                </div> 
+                    {Object.entries(social_media_links).map(([platform, url]) => (
+                        <SocialIcon
+                            key={url}
+                            url={url}
+                            fgColor="white"
+                            bgColor="#171717"
+                            style={{ height: 40, width: 40 }}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="transition duration-300 transform hover:scale-125"
+                        />
+                    ))}
+                </div>
+
 
                 {/* Description Section */}
-                <div className="flex flex-col flex-1 w-[30vw]">
-                    <h3 className="font-bold text-lg mb-2  min-w-36">Description</h3>
-                    <p className="text-white">{Description}</p>
+                <div className="flex flex-col flex-1 md:w-[30vw]">
+                    <h3 className="font-bold text-lg mb-2 min-w-36">About:</h3>
+                    <p className="text-white">{bio ? bio : "Nothing here. :("}</p>
                 </div>
 
                 {/* Close Button */}