diff --git a/frontend/next.config.js b/frontend/next.config.js
index b148ad8..b4f690d 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -26,7 +26,12 @@ const nextConfig = {
       {
         protocol: "https",
         hostname: "via.placeholder.com"
-      }
+      },
+      {
+        protocol: "https",
+        hostname: "api3.langaracs.tech",
+        pathname: "/executives/image/**"
+      },
     ]
   }
 }
diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
index 8b072a7..7595bbf 100644
--- a/frontend/src/app/ExecProfiles.tsx
+++ b/frontend/src/app/ExecProfiles.tsx
@@ -6,7 +6,8 @@ import { selectProfile, ExecProfileObject } from './slices/execProfileSlice';
 export default function ExecProfiles() {
     const profiles = useAppSelector(selectProfile);
 
-    const profilesSorted = [...profiles].sort((a, b) => (a.Position.ID - b.Position.ID)).slice(0, 12);
+    // TODO: don't hardcode the value of 1000
+    const profilesSorted = [...profiles].sort((a, b) => (a.Position.ID - b.Position.ID)).slice(0, 1000);
     
     const [profileSections, setProfileSections] = useState<ExecProfileObject[][]>([]);
 
@@ -68,7 +69,7 @@ export default function ExecProfiles() {
         <div className="flex flex-col gap-5">
             {
                 profileSections.map(profiles => (
-                    <div className={"flex flex-row gap-32 max-[800px]:gap-10"} key={profileSections.indexOf(profiles)}>
+                    <div className={"flex flex-row gap-32 max-[800px]:gap-10 justify-around"} key={profileSections.indexOf(profiles)}>
                         {
                             profiles.map(profile => (
                                 <ExecProfile
@@ -76,7 +77,7 @@ export default function ExecProfiles() {
                                     Position={profile.Position.Title}
                                     ID={profile.ID}
                                     Name={profile.Name}
-                                    ImageBuffer={`https://${process.env.APIURL}/${profile.ImageBuffer}`}
+                                    ImageBuffer= {(profile.ImageBuffer != null) ? `https://api3.langaracs.tech/executives/image/${profile.ImageBuffer}` : "https://via.placeholder.com/200x200"}
                                     Description={profile.Description} />
                             ))
                         }
diff --git a/frontend/src/app/thunks/ProfileThunks.ts b/frontend/src/app/thunks/ProfileThunks.ts
index 97a50f3..2109ba8 100644
--- a/frontend/src/app/thunks/ProfileThunks.ts
+++ b/frontend/src/app/thunks/ProfileThunks.ts
@@ -3,20 +3,22 @@ import { AppDispatch, RootState } from "../stores/store";
 import { ExecProfileObject } from "../slices/execProfileSlice";
 
 export const loadProfilesAsync = () => async (state: RootState, dispatch: AppDispatch): Promise<ExecProfileObject[]> => {
-    const response = (await (await fetch(`https://${process.env.APIURL}/Exec/Profile/Active?image=true&complete=true`, {
+    const response = (await (await fetch(`https://api3.langaracs.tech/executives/active`, {
         method: "GET",
         headers: {
             "apikey": `${process.env.APIKEY}`
         }
-    })).json())["Payload"];
+    })).json());
+
+    // console.log(response)
     
     return response.map((element: any) => {
             const execProfile: ExecProfileObject = {
-                ID: element.ID,
-                Name: `${element.Name.FirstName} ${element.Name.LastName}`,
-                ImageBuffer: element.Image,
-                Position: element.Position,
-                Description: element.Description
+                ID: element.student_id,
+                Name: element.name,
+                ImageBuffer: element.profile_picture,
+                Position: element.roles,
+                Description: element.bio
             };
 
             return execProfile;