diff --git a/src/components/projects/AP.astro b/src/components/projects/AP.astro
index 174eff3..0c55be7 100644
--- a/src/components/projects/AP.astro
+++ b/src/components/projects/AP.astro
@@ -3,29 +3,52 @@ import { LiaDotCircle } from "react-icons/lia";
 import ProjectSection from "./ProjectSection.astro";
 ---
 
-
 <div class="text-white md:mt-[15%] mt-[25%] mb-[30%] mx-[10%] relative">
-    <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
-        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-        <p>
-            Annual Projects
-        </p>
-    </div>
+  <div class="flex items-center md:text-[2.7vw] text-[4.5vw] mb-[7%]">
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]" />
+    <p>Annual Projects</p>
+  </div>
 
-    <p class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] font-light">
-        Join in the fray of internationally-recognized competition through Robocup, Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD! Participate in an intensive collaborative environment that challenges hard skills of hardware and software. 
+  <p
+    class="md:text-[1.2vw] text-[2vw] mt-[5%] mb-[3%] md:ml-[10%] ml-[5%] font-light"
+  >
+    Join in the fray of internationally-recognized competition through Robocup,
+    Signal Processing, Supercomputing, and Micromouse at IEEE @ UCSD!
+    Participate in an intensive collaborative environment that challenges hard
+    skills of hardware and software.
+  </p>
+
+  <div
+    class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]"
+  >
+    <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]" />
+    <p class="md:text-[2vw] text-[3vw] mr-[2vw]">Skills & Requirements</p>
+    <p class="w-3/5">
+      IEEE @ UCSD's annual projects are intended for students with intermediate
+      experience with hardware or software. Participation on teams assemble an
+      array of skills and talents of soft and hard skills.
     </p>
+  </div>
 
-    <div class="flex items-center md:text-[1.2vw] text-[2vw] font-light mb-[7%] justify-between md:ml-[10%]">
-        <LiaDotCircle className="md:text-[2vw] text-[3vw] pt-[0.5%]"/>
-        <p class="md:text-[2vw] text-[3vw] mr-[2vw]">
-            Skills & Requirements
-        </p>
-        <p class="w-3/5">
-            IEEE @ UCSD’s annual projects are intended for students with intermediate experience with hardware or software. Participation on teams assemble an array of skills and talents of soft and hard skills. 
-        </p>
-    </div>
-
+  <div class="project-section-container">
     <ProjectSection />
-    
-</div>
\ No newline at end of file
+  </div>
+</div>
+
+<style>
+  /* iOS-specific fixes */
+  @supports (-webkit-touch-callout: none) {
+    .project-section-container {
+      width: 100%;
+      overflow-x: hidden;
+      padding-bottom: 10vw;
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    .project-section-container {
+      width: 100%;
+      margin-left: -5%;
+    }
+  }
+</style>
diff --git a/src/components/projects/ProjectSection.astro b/src/components/projects/ProjectSection.astro
index a0b50d0..1db468f 100644
--- a/src/components/projects/ProjectSection.astro
+++ b/src/components/projects/ProjectSection.astro
@@ -7,152 +7,174 @@ import { Image } from "astro:assets";
 ---
 
 <div
-    class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0"
+  class="md:flex md:gap-[1.5vw] md:h-[30vw] md:w-auto w-[70vw] mt-[20%] md:mt-0 ml-[5%] md:ml-0"
 >
-    {
-        Object.entries(annualProjects).map(([title, project], index) => (
-            <a
-                href={project.url || "#"}
-                class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
-                data-project={index + 1}
-                target={title === "Supercomputing" ? "_blank" : "_self"}
-            >
-                <div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
-                <Image
-                    src={project.image}
-                    alt={`${title} Project`}
-                    width={668}
-                    height={990}
-                    class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
-                />
-                <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
-                    <div class="md:w-full w-[70vw]">
-                        <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
-                            {title}
-                        </p>
-                        <p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
-                            {project.description}
-                        </p>
-                        <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
-                            <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
-                                more details
-                                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
-                            </div>
-                        </div>
-                    </div>
-                    <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
-                </div>
+  {
+    Object.entries(annualProjects).map(([title, project], index) => (
+      <a
+        href={project.url || "#"}
+        class={`project-card group relative flex-1 rounded-[1.5vw] overflow-hidden transition-all duration-500 ease-in-out md:hover:flex-[2] cursor-pointer ${index === 0 ? "expanded" : ""}`}
+        data-project={index + 1}
+        target={title === "Supercomputing" ? "_blank" : "_self"}
+      >
+        <div class="skeleton absolute inset-0 rounded-[1.5vw] z-0" />
+        <Image
+          src={project.image}
+          alt={`${title} Project`}
+          width={668}
+          height={990}
+          class="opacity-70 w-full md:h-full h-[30vw] object-cover rounded-[1.5vw] aspect-[2/3] transition-transform duration-500 ease-in-out md:group-hover:scale-110 my-[2vw] md:my-0"
+        />
+        <div class="absolute flex items-end bottom-0 left-0 px-[5%] pb-[5%] md:pt-[17%] bg-gradient-to-b from-transparent to-black via-black rounded-b-[1.5vw] text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:pb-[5%]">
+          <div class="md:w-full w-[70vw]">
+            <p class="py-[1.5%] px-[8%] w-fit border-[0.1vw] border-white rounded-full text-nowrap md:text-[1.2vw] text-[2vw] font-light mb-[5%]">
+              {title}
+            </p>
+            <p class="text-[2vw] md:text-[1.3vw] md:hidden md:[.expanded_&]:contents transition-all duration-300 overflow-hidden">
+              {project.description}
+            </p>
+            <div class="w-full flex justify-end md:invisible visible md:[.expanded_&]:visible h-0 md:[.expanded_&]:h-auto">
+              <div class="flex items-center md:text-[1.3vw] text-[2vw] md:[.expanded_&]:mt-[5%]">
+                more details
+                <IoIosArrowDroprightCircle className="ml-[0.5vw] text-[1.4vw]" />
+              </div>
+            </div>
+          </div>
+          <GoArrowDownRight className="text-[3.2vw] [.expanded_&]:text-[0px] pt-[2%]" />
+        </div>
 
-                <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
-                    <FaGear
-                        data-inview
-                        className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
-                    />
-                </div>
-            </a>
-        ))
-    }
+        <div class="bg-white w-fit rounded-full aspect-square p-[0.5vw] text-ieee-black md:text-[2vw] text-[3vw] absolute top-[3%] right-[5%]">
+          <FaGear
+            data-inview
+            className="in-view:rotate-[500deg] duration-[3000ms] group-hover:rotate-[750deg]"
+          />
+        </div>
+      </a>
+    ))
+  }
 </div>
 
 <style>
+  .project-card {
+    background-size: cover;
+    background-position: center;
+  }
+
+  .project-card img {
+    transition: transform 0.3s ease-in-out;
+  }
+
+  /* iOS-specific fixes */
+  @supports (-webkit-touch-callout: none) {
     .project-card {
-        background-size: cover;
-        background-position: center;
+      height: auto;
+      min-height: 30vw;
     }
 
     .project-card img {
-        transition: transform 0.3s ease-in-out;
+      height: auto;
+      min-height: 30vw;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .project-card.expanded {
+      flex: 2;
     }
 
-    @media (min-width: 768px) {
-        .project-card.expanded {
-            flex: 2;
-        }
-
-        .project-card.expanded img {
-            transform: scale(1.1);
-        }
-
-        .project-card.expanded p {
-            opacity: 1;
-        }
+    .project-card.expanded img {
+      transform: scale(1.1);
     }
+
+    .project-card.expanded p {
+      opacity: 1;
+    }
+  }
+
+  /* Fix for iOS Safari */
+  @media screen and (max-width: 767px) {
+    .project-card {
+      width: 100%;
+      margin-bottom: 5vw;
+    }
+  }
 </style>
 
 <script>
-    function initializeProjectCards() {
-        const projectCards = document.querySelectorAll(".project-card");
-        const STORAGE_KEY = "lastExpandedCardIndex";
+  function initializeProjectCards() {
+    const projectCards = document.querySelectorAll(".project-card");
+    const STORAGE_KEY = "lastExpandedCardIndex";
 
-        // Function to remove expanded class from all cards
-        function removeExpandedFromAll() {
-            projectCards.forEach((card) => {
-                card.classList.remove("expanded");
-            });
-        }
-
-        // Function to expand a card by index
-        function expandCard(index: number) {
-            if (window.innerWidth >= 768) {
-                removeExpandedFromAll();
-                projectCards[index]?.classList.add("expanded");
-                localStorage.setItem(STORAGE_KEY, index.toString());
-            }
-        }
-
-        // Get the last expanded card index from localStorage
-        // Prevents bug where the expanded card breaks upon page reload
-        const lastExpandedIndex = parseInt(
-            localStorage.getItem(STORAGE_KEY) || "0"
-        );
-        expandCard(lastExpandedIndex);
-
-        // Add hover listeners to each card
-        projectCards.forEach((card, index) => {
-            card.addEventListener("mouseenter", () => {
-                expandCard(index);
-            });
-        });
-
-        // Handle window resize
-        window.addEventListener("resize", () => {
-            const currentIndex = parseInt(
-                localStorage.getItem(STORAGE_KEY) || "0"
-            );
-            expandCard(currentIndex);
-        });
+    // Function to remove expanded class from all cards
+    function removeExpandedFromAll() {
+      projectCards.forEach((card) => {
+        card.classList.remove("expanded");
+      });
     }
 
-    initializeProjectCards();
-
-    document.addEventListener("astro:page-load", initializeProjectCards);
-
-    // Image loading handler
-    function handleImageLoading() {
-        const projectImages = document.querySelectorAll(".project-card img");
-
-        projectImages.forEach((image, index) => {
-            // Ensure the image is fully loaded, even if it's already in cache
-            if (image.complete) {
-                image.style.opacity = "1";
-                const skeleton = image.previousElementSibling;
-                if (skeleton && skeleton.classList.contains("skeleton")) {
-                    skeleton.style.display = "none";
-                }
-            } else {
-                image.addEventListener("load", () => {
-                    image.style.opacity = "1";
-                    const skeleton = image.previousElementSibling;
-                    if (skeleton && skeleton.classList.contains("skeleton")) {
-                        skeleton.style.display = "none";
-                    }
-                });
-            }
-        });
+    // Function to expand a card by index
+    function expandCard(index: number) {
+      if (window.innerWidth >= 768) {
+        removeExpandedFromAll();
+        projectCards[index]?.classList.add("expanded");
+        localStorage.setItem(STORAGE_KEY, index.toString());
+      }
     }
 
-    // Ensure images are loaded after a short delay
-    setTimeout(handleImageLoading, 100);
-    handleImageLoading();
-    document.addEventListener("astro:page-load", handleImageLoading);
+    // Get the last expanded card index from localStorage
+    // Prevents bug where the expanded card breaks upon page reload
+    const lastExpandedIndex = parseInt(
+      localStorage.getItem(STORAGE_KEY) || "0",
+    );
+    expandCard(lastExpandedIndex);
+
+    // Add hover listeners to each card
+    projectCards.forEach((card, index) => {
+      card.addEventListener("mouseenter", () => {
+        expandCard(index);
+      });
+    });
+
+    // Handle window resize
+    window.addEventListener("resize", () => {
+      const currentIndex = parseInt(localStorage.getItem(STORAGE_KEY) || "0");
+      expandCard(currentIndex);
+    });
+  }
+
+  initializeProjectCards();
+
+  document.addEventListener("astro:page-load", initializeProjectCards);
+
+  // Image loading handler
+  function handleImageLoading() {
+    const projectImages = document.querySelectorAll(".project-card img");
+
+    projectImages.forEach((img) => {
+      // Type assertion to fix TypeScript errors
+      const image = img as HTMLImageElement;
+
+      // Ensure the image is fully loaded, even if it's already in cache
+      if (image.complete) {
+        image.style.opacity = "1";
+        const skeleton = image.previousElementSibling as HTMLElement;
+        if (skeleton && skeleton.classList.contains("skeleton")) {
+          skeleton.style.display = "none";
+        }
+      } else {
+        image.addEventListener("load", () => {
+          image.style.opacity = "1";
+          const skeleton = image.previousElementSibling as HTMLElement;
+          if (skeleton && skeleton.classList.contains("skeleton")) {
+            skeleton.style.display = "none";
+          }
+        });
+      }
+    });
+  }
+
+  // Ensure images are loaded after a short delay
+  setTimeout(handleImageLoading, 100);
+  handleImageLoading();
+  document.addEventListener("astro:page-load", handleImageLoading);
 </script>