diff --git a/.nvmrc b/.nvmrc
index eb95d542..209e3ef4 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-24.5.0
\ No newline at end of file
+20
diff --git a/apps/live/src/app/(landing)/EventSchedule/EventScheduleTabs.tsx b/apps/live/src/app/(landing)/EventSchedule/EventScheduleTabs.tsx
index c7617d65..cee06912 100644
--- a/apps/live/src/app/(landing)/EventSchedule/EventScheduleTabs.tsx
+++ b/apps/live/src/app/(landing)/EventSchedule/EventScheduleTabs.tsx
@@ -195,7 +195,7 @@ const EventScheduleTabs = () => {
                       const dateB = new Date(b.fields.start_time);
                       return dateA.getTime() - dateB.getTime();
                     })
-                    .map((events) => {
+                    .map((events, i) => {
                       const { fields } = events;
                       const {
                         end_time,
@@ -237,7 +237,7 @@ const EventScheduleTabs = () => {
                       );
                       return (
                         <EventDropdown
-                          key={JSON.stringify(fields)}
+                          key={JSON.stringify(fields) + i}
                           dropdownQuestion={dropdownQuestion}
                           dropdownAnswer={description}
                           iconType="Symbol"
diff --git a/apps/live/src/app/(landing)/Mentors/MentorsTable.tsx b/apps/live/src/app/(landing)/Mentors/MentorsTable.tsx
index 53ab811a..faa2436e 100644
--- a/apps/live/src/app/(landing)/Mentors/MentorsTable.tsx
+++ b/apps/live/src/app/(landing)/Mentors/MentorsTable.tsx
@@ -1,213 +1,210 @@
-// "use client";
-
-// // import isTimeRange from "@util/functions/isTimeRange";
-// import React, { useEffect, useState } from "react";
-// // import Checkmark from "../../lib/Assets/SVG/Checkmark";
-// // import clsx from "clsx";
-// import { AirtableData } from ".";
-// // import Link from "next/link";
-// // import Image from "next/image";
-
-// // const date = new Date();
-
-// export type Filters = {
-//   skills: Set<string>;
-//   avalibility: boolean;
-//   virtual: boolean;
-// };
-
-// // type MentorTableProps = {
-// //   data: AirtableData;
-// // };
-
-// // TODO: Add { data }: MentorTableProps back in
-// const MentorsTable = () => {
-//   const [skillsFilter] = useState<string[]>([]);
-//   const [availabilityFilter] = useState<boolean>(false);
-//   const [virtualFilter] = useState<boolean>(false);
-//   const [, setHasFilter] = useState<boolean>(false);
-
-//   // TODO: Add back in these original consts
-//   // const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
-//   // const [availabilityFilter, setAvailabilityFilter] = useState<boolean>(false);
-//   // const [virtualFilter, setVirtualFilter] = useState<boolean>(false);
-//   // const [hasFilter, setHasFilter] = useState<boolean>(false);
-//   // const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
-
-//   // checking if current filter is default or not. if default it means dont have to do any filtering logic.
-//   useEffect(() => {
-//     setHasFilter(
-//       availabilityFilter || virtualFilter || skillsFilter.length !== 0,
-//     );
-//   }, [virtualFilter, availabilityFilter, skillsFilter]);
-
-//   // const { records } = data;
-
-//   // const recordsExist = records != null && records != undefined;
-
-//   // const uniqueSkills = new Set<string>(
-//   //   records
-//   //     ?.map((record) => record.fields.Expertise)
-//   //     .flat()
-//   //     .map((skill) => skill.trim().toUpperCase()),
-//   // );
-
-//   // TODO in MentorsTable: Add this table back in once there is data in the airtable
-//   return (
-//     <div>
-//       {/* <div className="flex flex-row gap-4 font-GT-Walsheim-Regular py-4">
-//         <div className="relative inline-block text-left">
-//           <div
-//             className="rounded-xl h-8 px-2 inline-flex w-full justify-center gap-x-1.5 bg-white ring-1 shadow-xs ring-gray-300 hover:bg-gray-50 cursor-pointer transition-transform hover:scale-105 items-center"
-//             onClick={() => {
-//               setDropdownOpen((prev) => !prev);
-//             }}
-//           >
-//             <div className="max-w-[50vw] truncate" id="menu-button">
-//               Expertise:{" "}
-//               {skillsFilter.length === 0 ? "All" : skillsFilter.join(", ")}
-//             </div>
-
-//             <svg
-//               className="-mr-1 size-5 text-gray-400"
-//               viewBox="0 0 20 20"
-//               fill="currentColor"
-//               aria-hidden="true"
-//               data-slot="icon"
-//             >
-//               <path
-//                 fillRule="evenodd"
-//                 d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
-//                 clipRule="evenodd"
-//               />
-//             </svg>
-//           </div>
-
-//           {dropdownOpen && (
-//             <div
-//               autoFocus
-//               className="origin-top-right z-50 absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-//               role="menu"
-//               aria-orientation="vertical"
-//               aria-labelledby="menu-button"
-//               tabIndex={-1}
-//             >
-//               <div className="py-1" role="none">
-//                 <button
-//                   className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex items-center justify-between"
-//                   role="menuitem"
-//                   tabIndex={-1}
-//                   onClick={() => setSkillsFilter([])}
-//                 >
-//                   All
-//                   {!skillsFilter.length && <Checkmark />}
-//                 </button>
-//                 {[...uniqueSkills].map((skill) => (
-//                   <div key={`${skill}-dropdown-option`}>
-//                     <button
-//                       className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 flex items-center justify-between"
-//                       role="menuitem"
-//                       tabIndex={-1}
-//                       onClick={() => {
-//                         let newSkills = [...skillsFilter];
-//                         if (newSkills.includes(skill)) {
-//                           newSkills = newSkills.filter(
-//                             (item) => item !== skill,
-//                           );
-//                         } else {
-//                           newSkills.push(skill);
-//                         }
-//                         setSkillsFilter(newSkills);
-//                       }}
-//                     >
-//                       {skill}
-//                       {skillsFilter.includes(skill) && <Checkmark />}
-//                     </button>
-//                   </div>
-//                 ))}
-//               </div>
-//             </div>
-//           )}
-//         </div>
-//         <button
-//           className={clsx(
-//             "rounded-xl h-8 px-2 w-32 border-[#5062A5] border-[1px] transition-transform duration-300 transform scale-100 hover:scale-[102%]",
-//             availabilityFilter
-//               ? "bg-[#647ACE] text-text-light"
-//               : "bg-[#ffff] text-text-dark",
-//           )}
-//           onClick={() => setAvailabilityFilter((prev) => !prev)}
-//         >
-//           Available
-//         </button>
-
-//         <button
-//           className={clsx(
-//             "rounded-xl h-8 px-2 w-32 border-[#5062A5] border-[1px] transition-transform duration-300 transform scale-100 hover:scale-[102%]",
-//             virtualFilter
-//               ? "bg-[#647ACE] text-text-light"
-//               : "bg-[#ffff] text-text-dark",
-//           )}
-//           onClick={() => {
-//             setVirtualFilter((prev) => !prev);
-//           }}
-//         >
-//           Virtual
-//         </button>
-//       </div>
-
-//       <div className="grid grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-3  py-5">
-//         {records
-//           .filter((filtered) => {
-//             if (!hasFilter) {
-//               return true;
-//             }
-
-//             let virtual = !virtualFilter;
-//             let hasSkills = !skillsFilter.length;
-//             let isAvailable = !availabilityFilter;
-//             for (let i = 0; i < filtered.fields["Time Slots"].length; i++) {
-//               isAvailable =
-//                 isTimeRange(filtered.fields["Time Slots"][i], date) ||
-//                 isAvailable;
-//             }
-
-//             for (let i = 0; i < filtered.fields.Expertise.length; i++) {
-//               const cleanedSkill = filtered.fields.Expertise[i]
-//                 .trim()
-//                 .toUpperCase();
-
-//               hasSkills = skillsFilter.includes(cleanedSkill) || hasSkills;
-//             }
-
-//             virtual = filtered.fields.IsVirtual === "True" || virtual;
-
-//             return hasSkills && isAvailable && virtual;
-//           })
-
-//           .map((record, index) => (
-//             <Link
-//               key={index}
-//               className="aspect-square flex flex-col items-center justify-center p-2 rounded-lg hover:scale-105 transition-transform"
-//               href={record.fields.LinkedIn}
-//               target="_blank"
-//             >
-//               <div className="w-full pb-[100%] relative overflow-hidden rounded-lg">
-//                 <Image
-//                   src={record.fields.Image[0].url}
-//                   alt={record.id}
-//                   fill
-//                   className="absolute inset-0 w-full h-full object-cover rounded-lg"
-//                 />
-//               </div>
-//               <a className="mt-2 text-sm font-medium truncate w-full">
-//                 {record.fields.Name}
-//               </a>
-//             </Link>
-//           ))}
-//       </div> */}
-//     </div>
-//   );
-// };
-
-// export default MentorsTable;
+"use client";
+
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import Icon from "@repo/ui/Icons/MemberIcon";
+import clsx from "clsx";
+import isTimeRange from "@util/functions/isTimeRange";
+import useDevice from "@util/hooks/useDevice";
+import { AirtableData, MentorData } from ".";
+import IconPopup from "@repo/ui/Icons/IconPopup";
+import { ModalContext } from "../providers";
+
+type MentorTableProps = {
+  data: AirtableData;
+};
+
+const MentorsTable = ({ data }: MentorTableProps) => {
+  const { isDesktop, isTablet, isMobile } = useDevice();
+  const records = useMemo(() => data?.records ?? [], [data]);
+  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);
+  const [availabilityFilter, setAvailabilityFilter] = useState<boolean>(false);
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+  const [selectedMentor, setSelectedMentor] = useState<MentorData | null>();
+  const { setModal } = useContext(ModalContext);
+  const gridStyles = clsx(
+    "flex flex-wrap justify-center items-center mx-auto gap-6",
+    isDesktop && "w-3/4",
+    isMobile && "grid grid-cols-2",
+    isTablet && "grid grid-cols-3",
+  );
+
+  const date = useMemo(() => new Date(), []);
+
+  const uniqueSkills = useMemo(() => {
+    const skills = new Set<string>();
+    records.forEach((r) => {
+      r.fields.Expertise?.forEach((s) => skills.add(s.trim()));
+    });
+    return Array.from(skills).sort();
+  }, [records]);
+
+  const hasFilter = availabilityFilter || skillsFilter.length !== 0;
+
+  const toggleSkill = (skill: string) => {
+    setSkillsFilter((prev) => {
+      if (prev.includes(skill)) return prev.filter((s) => s !== skill);
+      return [...prev, skill];
+    });
+  };
+
+  const filtered = useMemo(() => {
+    if (!records.length) return [];
+    return records.filter((rec) => {
+      if (!hasFilter) return true;
+
+      const expertise = new Set(
+        rec.fields.Expertise?.map((s) => s.trim()) ?? [],
+      );
+      const hasSkills =
+        skillsFilter.length === 0 ||
+        skillsFilter.every((skill) => expertise.has(skill));
+
+      let availableOk = true;
+      if (availabilityFilter) {
+        availableOk = false;
+        const slots = rec.fields["Time Slots"] || [];
+        for (let i = 0; i < slots.length; i++) {
+          if (isTimeRange(slots[i], date)) {
+            availableOk = true;
+            break;
+          }
+        }
+      }
+
+      return hasSkills && availableOk;
+    });
+  }, [records, skillsFilter, availabilityFilter, hasFilter, date]);
+
+  useEffect(() => {
+    if (selectedMentor) {
+      setModal(
+        <IconPopup
+          iconSrc={selectedMentor.fields.Image[0].url}
+          iconAltText={selectedMentor.fields.Name}
+          iconTitle={selectedMentor.fields.Name}
+          discord={selectedMentor.fields.discord}
+          expertise={selectedMentor.fields.Expertise}
+          onClose={() => {
+            setSelectedMentor(null);
+            setModal(null);
+          }}
+        />,
+      );
+    }
+  }, [selectedMentor]);
+
+  if (!records.length) {
+    return <div className="py-6">No mentors available right now.</div>;
+  }
+
+  return (
+    <div className="w-full">
+      <div
+        className={clsx(
+          "flex flex-row gap-4 font-GT-Walsheim-Regular py-4 items-center flex-wrap justify-center",
+          isMobile && "px-4",
+        )}
+      >
+        <div className="relative inline-block text-left">
+          <button
+            className="py-2 px-4 min-w-[140px] transition-transform duration-300 transform scale-100 hover:scale-[102%] rounded-xl font-NeulisNeue-Bold text-[20px] bg-[#2E5B9A] text-white flex items-center justify-between gap-2"
+            onClick={() => setDropdownOpen((p) => !p)}
+            aria-expanded={dropdownOpen}
+          >
+            <span>Expertise</span>
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 7L10 12L15 7"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+
+          {dropdownOpen && (
+            <div className="absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
+              <div className="py-2">
+                <button
+                  className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  onClick={() => setSkillsFilter([])}
+                >
+                  All
+                </button>
+                {uniqueSkills.map((skill) => (
+                  <button
+                    key={skill}
+                    className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 flex items-center justify-between ${
+                      skillsFilter.includes(skill) ? "bg-gray-100" : ""
+                    }`}
+                    onClick={() => toggleSkill(skill)}
+                  >
+                    <span>{skill}</span>
+                    {skillsFilter.includes(skill) && (
+                      <span className="text-green-600">✓</span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <button
+          className={`relative py-2 pl-6 pr-3 transition-transform duration-300 transform scale-100 hover:scale-[102%] rounded-xl font-NeulisNeue-Bold text-[20px] ${
+            availabilityFilter
+              ? "bg-firecrackerRed text-white"
+              : "bg-white border border-firecrackerRed text-firecrackerRed"
+          }`}
+          onClick={() => setAvailabilityFilter((p) => !p)}
+        >
+          <span
+            className={`absolute left-3 top-1/2 -translate-y-1/2 inline-block w-2 h-2 rounded-full ${
+              availabilityFilter ? "bg-lime-400" : "bg-firecrackerRed"
+            }`}
+          />
+          <span className="block w-full text-center">Active</span>
+        </button>
+      </div>
+
+      <div className={clsx(gridStyles, "w-full pb-12")}>
+        {(hasFilter ? filtered : records).map((record) => {
+          const slots = record.fields["Time Slots"] || [];
+          let isAvailable = false;
+          for (let i = 0; i < slots.length; i++) {
+            if (isTimeRange(slots[i], date)) {
+              isAvailable = true;
+              break;
+            }
+          }
+
+          const imageUrl =
+            record.fields.Image?.[0]?.url || "/headshots/placeholder.png";
+
+          return (
+            <div key={record.id} className="flex flex-col items-center">
+              <Icon
+                src={imageUrl}
+                name={record.fields.Name}
+                isLive={true}
+                isActive={isAvailable}
+                textColor="black"
+                showLinkedInIcon={true}
+                onClick={() => setSelectedMentor(record)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MentorsTable;
diff --git a/apps/live/src/app/(landing)/Mentors/index.tsx b/apps/live/src/app/(landing)/Mentors/index.tsx
index 0b8d6efd..1fa8bc2c 100644
--- a/apps/live/src/app/(landing)/Mentors/index.tsx
+++ b/apps/live/src/app/(landing)/Mentors/index.tsx
@@ -3,7 +3,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Section from "@repo/ui/Section";
-// import MentorsTable from "./MentorsTable";
+import RibbonTitle from "@repo/ui/RibbonTitle";
+import MentorsTable from "./MentorsTable";
 import useContentHeight from "@util/hooks/useContentHeight";
 import useWindowSize from "@util/hooks/useWindowSize";
 
@@ -14,24 +15,20 @@ export type AirtableImage = {
   url: string;
 };
 
-export type AirtableRecord = {
+export type MentorData = {
   id: string;
   createdTime: string;
   fields: {
-    Availability: string;
-    Email: string;
     "Time Slots": Array<string>;
     Name: string;
-    Image: Array<{ url: string }>;
+    Image: Array<AirtableImage>;
     Expertise: Array<string>;
-    Certification: string;
-    LinkedIn: string;
-    IsVirtual: "True" | "False";
+    discord: string;
   };
 };
 
 export type AirtableData = {
-  records: AirtableRecord[];
+  records: MentorData[];
 };
 
 const MentorSection = () => {
@@ -42,7 +39,7 @@ const MentorSection = () => {
 
   useEffect(() => {
     async function fetchData() {
-      const res = await fetch("/api/mentors");
+      const res = await fetch(`/api/mentors`);
       const jsonData: AirtableData = await res.json();
       setData(jsonData);
     }
@@ -66,18 +63,23 @@ const MentorSection = () => {
 
   const MentorSectionContent = React.forwardRef<HTMLDivElement>((_, ref) => {
     return (
-      <div className="py-24 px-48" ref={ref}>
-        <p className="text-[clamp(3rem,7vw,7rem)] text-[#546ECD] font-bold font-Wilden drop-shadow-lg">
-          Our Mentors
-        </p>
-        <p className="font-GT-Walsheim-Regular text-[#333333]">
-          Need expert advice? Our mentors are here to help! Filter by shift,
-          virtual status, expertise, or company to find the right support.
-          Connect on our hackathon platform and get insights to take your
-          project to the next level!
-        </p>
-        {/* TODO: Add MentorsTable back in when there is data */}
-        {/* <MentorsTable data={data} /> */}
+      <div className="py-24 px-48 flex flex-col items-center gap-10" ref={ref}>
+        <div className="scale-100">
+          <RibbonTitle text="OUR MENTORS" />
+        </div>
+        <div className="flex flex-col bg-carouselCreamLight rounded-3xl gap-2 drop-shadow-[0_6px_0px_rgba(0,0,0,0.25)] p-8 max-w-4xl w-full">
+          <h1 className="font-NeulisNeue-Bold text-firecrackerRed text-[24px]">
+            Need expert advice?
+          </h1>
+          <p className="font-DM-Sans-Regular text-[#333333]">
+            Our mentors are here to help! Filter by shift, virtual status,
+            expertise, or company to find the right support. Connect on our
+            hackathon platform and get insights to take your project to the next
+            level!
+          </p>
+        </div>
+        {/* Mentor listing (renders when Airtable data available) */}
+        <MentorsTable data={data} />
       </div>
     );
   });
diff --git a/apps/live/src/app/(landing)/OurTeam/OurTeamGrid.tsx b/apps/live/src/app/(landing)/OurTeam/OurTeamGrid.tsx
index 4149f33b..e7ec21cd 100644
--- a/apps/live/src/app/(landing)/OurTeam/OurTeamGrid.tsx
+++ b/apps/live/src/app/(landing)/OurTeam/OurTeamGrid.tsx
@@ -217,9 +217,9 @@ const TeamTable = () => {
   return (
     <div className="relative text-white flex flex-col gap-8">
       <div className="flex flex-row gap-4 flex-wrap items-center justify-center">
-        {Object.entries(teams).map(([teamName, team]) => (
+        {Object.entries(teams).map(([teamName]) => (
           <button
-            key={team.toString()}
+            key={teamName + "-section"}
             onClick={() => changeTeam(teamName as keyof typeof teams)}
             className={`py-2 px-3 transition-transform duration-300 transform scale-100 hover:scale-[102%] rounded-xl font-NeulisNeue-Bold text-[20px] ${
               currTeam === teamName
@@ -232,20 +232,16 @@ const TeamTable = () => {
         ))}
       </div>
       <div className={iconGridStyles}>
-        {teams[currTeam].map((member, index) => (
-          <a
-            key={index}
-            href={member.url}
-            className="transition-transform scale-100 hover:scale-105"
-          >
-            <Icon
-              src={member.src}
-              name={member.name}
-              isLive={false}
-              isActive={false}
-              textColor="white"
-            />
-          </a>
+        {teams[currTeam].map(({ url, src, name }, index) => (
+          <Icon
+            key={name + "-icon-" + index}
+            url={url}
+            src={src}
+            name={name}
+            isLive={false}
+            isActive={false}
+            textColor="white"
+          />
         ))}
       </div>
     </div>
diff --git a/apps/live/src/app/(landing)/providers.tsx b/apps/live/src/app/(landing)/providers.tsx
index 118beb8b..aa50a9b8 100644
--- a/apps/live/src/app/(landing)/providers.tsx
+++ b/apps/live/src/app/(landing)/providers.tsx
@@ -1,16 +1,50 @@
 "use client";
 
 import useIsMobile from "@repo/util/hooks/useIsMobile";
-import React, { createContext } from "react";
+import React, { createContext, ReactElement, useState } from "react";
+
+export type ModalContextProps = {
+  modal: ReactElement | null;
+  setModal: (component: ReactElement | null) => void;
+};
 
 export const MobileContext = createContext({ isMobile: false });
+export const ModalContext = createContext<ModalContextProps>({
+  modal: null,
+  setModal: () => {},
+});
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const isMobile = useIsMobile();
+  const [modalComponent, setModalComponent] = useState<ReactElement | null>(
+    null,
+  );
 
+  console.log(modalComponent);
   return (
     <MobileContext.Provider value={{ isMobile }}>
-      {children}
+      <ModalContext.Provider
+        value={{ modal: modalComponent, setModal: setModalComponent }}
+      >
+        <div>
+          {!!modalComponent && (
+            <div className="flex sticky top-0 justify-center items-center w-full h-full z-50">
+              <div
+                className="w-[100vw] h-[100vh]"
+                autoFocus
+                onBlur={() => {
+                  setModalComponent(null);
+                  console.log("blurred");
+                }}
+              >
+                {modalComponent}
+              </div>
+            </div>
+          )}
+
+          {children}
+        </div>
+      </ModalContext.Provider>
     </MobileContext.Provider>
   );
 }
diff --git a/apps/live/src/app/api/mentors/route.ts b/apps/live/src/app/api/mentors/route.ts
index 2c575c41..52e7e5ec 100644
--- a/apps/live/src/app/api/mentors/route.ts
+++ b/apps/live/src/app/api/mentors/route.ts
@@ -1,13 +1,193 @@
-import { NextResponse, NextRequest } from "next/server";
+import { NextResponse } from "next/server";
 
 const BASE_URL = "https://api.airtable.com/v0";
-const TABLE_NAME = "2025mentors";
+const TABLE_NAME = "mentors";
+
+const USE_SAMPLE_DATA = false;
+
+const test = {
+  records: [
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Web"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["00:00-23:59"],
+        IsVirtual: "True",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["ML", "Data"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["08:00-20:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Mobile"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["12:00-12:30"],
+        IsVirtual: "True",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Design"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["09:30-10:30"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["DevOps"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["00:00-23:59"],
+        IsVirtual: "True",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Security"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["22:00-02:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Product"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["07:00-09:00"],
+        IsVirtual: "True",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Web", "Design"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["00:00-23:59"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["AI", "ML"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["16:00-18:00"],
+        IsVirtual: "True",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Cloud"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["10:00-12:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["VR"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["00:00-23:59"],
+        IsVirtual: "True",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Frontend", "Accessibility"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["13:00-15:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Frontend", "Accessibility"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["13:00-15:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Frontend", "Accessibility"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["13:00-15:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Frontend", "Accessibility"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["13:00-15:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Frontend", "Accessibility"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["13:00-15:00"],
+        IsVirtual: "False",
+      },
+    },
+    {
+      fields: {
+        Name: "Emma",
+        Image: [{ url: "/headshots/directors/Emma.jpg" }],
+        Expertise: ["Frontend", "Accessibility"],
+        LinkedIn: "https://www.linkedin.com/in/emma-von/",
+        "Time Slots": ["13:00-15:00"],
+        IsVirtual: "False",
+      },
+    },
+  ],
+};
+
+export async function GET() {
+  if (USE_SAMPLE_DATA) {
+    return NextResponse.json(test);
+  }
 
-export async function GET(req: NextRequest) {
-  const { searchParams } = new URL(req.url);
-  const isDev = searchParams.get("isDev") === "true";
   const MENTOR_BASE_ID = process.env.MENTOR_BASE_ID;
-  const airtableUrl = `${BASE_URL}/${MENTOR_BASE_ID}/${TABLE_NAME}${isDev ? "?isDev=true" : ""}`;
+  const airtableUrl = `${BASE_URL}/${MENTOR_BASE_ID}/${TABLE_NAME}`;
+
   try {
     const response = await fetch(`${airtableUrl}`, {
       headers: {
@@ -17,12 +197,17 @@ export async function GET(req: NextRequest) {
     });
 
     if (!response.ok) {
-      throw new Error("API request failed");
+      const body = await response.json().catch(() => null);
+      return NextResponse.json(
+        { error: body?.error?.message || "Airtable API request failed" },
+        { status: response.status },
+      );
     }
 
     const data = await response.json();
     return NextResponse.json(data);
   } catch (err) {
+    console.error("Mentors API error:", err);
     return NextResponse.json(
       { error: `Request to get airtable data failed ${err}` },
       { status: 500 },
diff --git a/packages/ui/src/Icons/IconPopup.tsx b/packages/ui/src/Icons/IconPopup.tsx
index 044dcc4e..23bbc568 100644
--- a/packages/ui/src/Icons/IconPopup.tsx
+++ b/packages/ui/src/Icons/IconPopup.tsx
@@ -7,20 +7,41 @@ import CloseIcon from "./CloseIcon";
 import useDevice from "@repo/util/hooks/useDevice";
 import React from "react";
 
-const IconPopup = () => {
+type IconPopupProps = {
+  iconSrc: string;
+  iconAltText: string;
+  iconTitle: string;
+  discord: string;
+  expertise: string[];
+  onClose: () => void;
+};
+
+const IconPopup = ({
+  iconSrc,
+  iconAltText,
+  iconTitle,
+  expertise,
+  onClose,
+}: IconPopupProps) => {
   const { isDesktop } = useDevice();
 
   return (
-    <div className="absolute inset-0 flex justify-center items-center z-50">
+    <div className="absolute inset-0 flex justify-center items-center z-50 bg-black/80 ">
       <div
         className={`
           relative
           bg-[#F4E3C9]
           rounded-2xl
+          h-fit
+          max-h-[80vh]
+          overflow-auto
           ${isDesktop ? "w-[850px] h-[490px]" : "w-full mx-4"}
         `}
       >
-        <div className="absolute top-4 left-4 z-20 cursor-pointer">
+        <div
+          className="sticky top-4 ml-4 z-20 cursor-pointer"
+          onClick={onClose}
+        >
           <CloseIcon />
         </div>
 
@@ -37,8 +58,8 @@ const IconPopup = () => {
           <div className="flex flex-col items-center text-center">
             <div className="relative">
               <Image
-                src="/headshots/directors/Emma.jpg"
-                alt="Emma Voneulow"
+                src={iconSrc}
+                alt={iconAltText}
                 width={190}
                 height={190}
                 className="object-cover rounded-full border-6 border-firecrackerRed"
@@ -48,11 +69,11 @@ const IconPopup = () => {
               </div>
             </div>
 
-            <h1 className="font-bold mt-2">Emma Voneulow</h1>
+            <h1 className="font-bold mt-2">{iconTitle}</h1>
 
             <div className="flex items-center gap-2">
               <DiscordIcon />
-              <p>emmavonbeulow</p>
+              <p>{iconAltText}</p>
             </div>
           </div>
 
@@ -62,7 +83,7 @@ const IconPopup = () => {
               <h1 className="font-bold">Expertise</h1>
             </div>
 
-            <p>React, Typescript, Next.js, Tailwind CSS, Python</p>
+            <p>{expertise.join(", ")}</p>
 
             <hr className="border border-carouselCream my-5" />
 
diff --git a/packages/ui/src/Icons/MemberIcon.tsx b/packages/ui/src/Icons/MemberIcon.tsx
index 45e3843e..ceb97576 100644
--- a/packages/ui/src/Icons/MemberIcon.tsx
+++ b/packages/ui/src/Icons/MemberIcon.tsx
@@ -12,6 +12,8 @@ type IconProps = {
   isLive: boolean;
   isActive: boolean;
   textColor?: string;
+  showLinkedInIcon?: boolean;
+  onClick?: () => void;
 };
 
 const Icon: React.FC<IconProps> = ({
@@ -21,9 +23,11 @@ const Icon: React.FC<IconProps> = ({
   isLive = false,
   isActive = false,
   textColor = "charcoalFog",
+  showLinkedInIcon = false,
+  onClick,
 }) => {
   return (
-    <div className="flex flex-col items-center relative">
+    <div className="flex flex-col items-center relative" onClick={onClick}>
       <div className="relative inline-block rounded-full overflow-hidden group w-40 h-40 hover:scale-105 transition-transform duration-200 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32">
         <Image
           src={src}
@@ -47,7 +51,7 @@ const Icon: React.FC<IconProps> = ({
               opacity-0 group-hover:opacity-100
               transition-opacity duration-300F"
         >
-          {isLive ? <ExpandIcon /> : <LinkedinLogo />}
+          {isLive && !showLinkedInIcon ? <ExpandIcon /> : <LinkedinLogo />}
         </a>
       </div>
 
diff --git a/packages/util/src/functions/isTimeRange.ts b/packages/util/src/functions/isTimeRange.ts
index 76b3371c..2b1b9cd0 100644
--- a/packages/util/src/functions/isTimeRange.ts
+++ b/packages/util/src/functions/isTimeRange.ts
@@ -17,4 +17,27 @@ export default function isTimeRange(range: string, currentTime: Date) {
 
     return currentTime >= startTime && currentTime <= endTime;
   }
+
+  const simpleMatch = range.match(
+    /^(\d{1,2}):(\d{2})\s*-\s*(\d{1,2}):(\d{2})$/,
+  );
+  if (simpleMatch) {
+    const startHour = Number(simpleMatch[1]);
+    const startMinute = Number(simpleMatch[2]);
+    const endHour = Number(simpleMatch[3]);
+    const endMinute = Number(simpleMatch[4]);
+
+    const start = new Date(currentTime);
+    start.setHours(startHour, startMinute, 0, 0);
+    const end = new Date(currentTime);
+    end.setHours(endHour, endMinute, 0, 0);
+
+    if (end < start) {
+      return currentTime >= start || currentTime <= end;
+    }
+
+    return currentTime >= start && currentTime <= end;
+  }
+
+  return false;
 }