diff --git a/apps/main/src/app/(landing)/Sections/About.tsx b/apps/main/src/app/(landing)/Sections/About.tsx
index 807ae523..a9fbafce 100644
--- a/apps/main/src/app/(landing)/Sections/About.tsx
+++ b/apps/main/src/app/(landing)/Sections/About.tsx
@@ -11,7 +11,7 @@ import Dart from "../../lib/Assets/AboutLandingAssets/dart";
 import useDevice from "@util/hooks/useDevice";
 
 export default function About(): React.ReactNode {
-  const { isMobile} = useDevice();
+  const { isMobile } = useDevice();
   return (
     <div
       className={`relative w-full z-10 ${
diff --git a/apps/main/src/app/projects/components/Project.tsx b/apps/main/src/app/projects/components/Project.tsx
index dc051c93..1d7cb5e4 100644
--- a/apps/main/src/app/projects/components/Project.tsx
+++ b/apps/main/src/app/projects/components/Project.tsx
@@ -93,18 +93,18 @@ function Project({
 
   const expandedSize = isDescExpanded
     ? isDesktop
-      ? "h-[60vh] w-[50vw]"
+      ? "h-[45vh] w-[50vw]"
       : isTablet
         ? "h-[95vh] w-[70vw]"
         : "h-[105%] w-[70vw]"
     : baseSize;
 
   const projectCardStylesBG = clsx(
-    "absolute bg-starlightBlue rounded-xl shadow-[inset_-15px_15px_0_rgba(0,0,0,0.25)]",
+    "absolute top-0 bg-starlightBlue rounded-xl shadow-[inset_-15px_15px_0_rgba(0,0,0,0.25)]",
     expandedSize,
   );
   const projectCardStylesBorder = clsx(
-    "absolute outline outline-[15px] outline-firecrackerRedLight outline-solid rounded-xl drop-shadow-[8px_8px_0_#CC322D]",
+    "absolute top-0 outline outline-[15px] outline-firecrackerRedLight outline-solid rounded-xl drop-shadow-[8px_8px_0_#CC322D]",
     expandedSize,
   );
 
diff --git a/apps/main/src/app/projects/components/ProjectName.tsx b/apps/main/src/app/projects/components/ProjectName.tsx
new file mode 100644
index 00000000..7aeac476
--- /dev/null
+++ b/apps/main/src/app/projects/components/ProjectName.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+
+type ProjectNameProps = {
+  projectName: string;
+};
+
+const ProjectName: React.FC<ProjectNameProps> = ({ projectName }) => {
+  return (
+    <svg
+      x="690"
+      y="265"
+      width="597"
+      height="93"
+      viewBox="0 0 597 93"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.28232 37.9013C1.18703 35.1304 3.22915 32.1273 6.20871 32.1273H85.2844C87.6162 32.1273 89.5064 34.0176 89.5064 36.3493V86.7721C89.5064 89.1038 87.6162 90.9941 85.2844 90.9941H6.37191C3.34895 90.9941 1.30549 87.9101 2.4839 85.1263L11.3592 64.1598C11.7908 63.1401 11.8046 61.9917 11.3976 60.9619L2.28232 37.9013Z"
+        fill="#94181A"
+      />
+      <path
+        d="M84.58 90.648L54.3562 82.2767C49.955 81.0576 50.3538 74.6904 54.8728 74.0302L85.0966 69.6146C87.6443 69.2424 89.929 71.2175 89.929 73.7922V86.5792C89.929 89.37 87.2696 91.393 84.58 90.648Z"
+        fill="#68090B"
+      />
+      <path
+        d="M594.187 37.9482C595.283 35.1773 593.241 32.1742 590.261 32.1742H511.185C508.854 32.1742 506.963 34.0644 506.963 36.3962V86.819C506.963 89.1507 508.854 91.041 511.185 91.041H590.098C593.121 91.041 595.164 87.957 593.986 85.1731L585.111 64.2066C584.679 63.187 584.665 62.0385 585.072 61.0088L594.187 37.9482Z"
+        fill="#94181A"
+      />
+      <path
+        d="M512.312 90.6949L542.535 82.3236C546.937 81.1045 546.538 74.7373 542.019 74.0771L511.795 69.6614C509.247 69.2892 506.963 71.2644 506.963 73.8391V86.6261C506.963 89.4169 509.622 91.4398 512.312 90.6949Z"
+        fill="#68090B"
+      />
+      <path
+        d="M50.9629 13.8682C50.9629 11.643 52.6716 9.80167 54.8925 9.66178C79.1867 8.13148 210.753 0.106227 298.318 0.0882568C386.36 0.0701892 518.656 8.12855 543.031 9.66192C545.252 9.80164 546.963 11.6432 546.963 13.8685V77.6659C546.963 80.0744 545.013 81.9985 542.607 81.8908C517.15 80.7508 385.733 75.0623 298.318 75.0711C211.381 75.0799 80.6955 80.7511 55.3176 81.8903C52.9113 81.9984 50.9629 80.0741 50.9629 77.6654V13.8682Z"
+        fill="#CC322D"
+      />
+      <text
+        x="50%"
+        y="50%"
+        fill="#F2E06F"
+        fontSize="43"
+        fontFamily="NeulisNeue-Bold"
+        fontWeight="bold"
+        letterSpacing="0.05em"
+        textAnchor="middle"
+        dominantBaseline="middle"
+      >
+        {projectName}
+      </text>
+    </svg>
+  );
+};
+export default ProjectName;
diff --git a/apps/main/src/app/projects/page.tsx b/apps/main/src/app/projects/page.tsx
index d2964563..20fc4fe2 100644
--- a/apps/main/src/app/projects/page.tsx
+++ b/apps/main/src/app/projects/page.tsx
@@ -2,7 +2,6 @@
 
 import React from "react";
 import Project from "./components/Project";
-import RibbonTitle from "@repo/ui/RibbonTitle";
 import ProjectBackground from "./components/background";
 import useDevice from "@util/hooks/useDevice";
 import PinkFirework from "./components/pinkFirework";
@@ -10,6 +9,7 @@ import OrangeFirework from "./components/orangeFirework";
 import YellowFirework from "./components/yellowFirework";
 import Button from "@repo/ui/Button";
 import { Footer, NavBar } from "../lib/Components";
+import ProjectName from "./components/ProjectName";
 
 const projectData = [
   {
@@ -18,7 +18,7 @@ const projectData = [
     award: "Best Social Impact",
     members: "Kaleb Cole, Yaroslav Petrashko, Shrey Agarwal, Aditya",
     description:
-      "Memora is a mobile app that acts as a personalized road map through memories, designed for individuals in the early to moderate stages of dementia and their families. Using personal family photos – snapshots from life's journey – Memora stimulates memory recall through engaging quizzes and a user-friendly interface.",
+      "Memora acts as a personalized road map through memories, designed for individuals in the early to moderate stages of dementia and their families. Using personal family photos, Memora stimulates memory recall through engaging quizzes and a user-friendly interface.",
     link: "https://devpost.com/software/memora-bmi4zw",
   },
   {
@@ -70,20 +70,26 @@ const projectData = [
 
 export default function Page() {
   const { isMobile, isTablet, isDesktop } = useDevice();
+
   return (
-    <div className="flex flex-col items-center min-h-screen relative overflow-x-hidden overflow-y-visible">
+    <div className="flex flex-col items-center min-h-screen relative overflow-x-hidden overflow-y-hidden">
       <NavBar />
+
+      {/* Background */}
       <div
-        className={`absolute inset-0 -z-10 ${isMobile ? "scale-125" : ""} ${isTablet ? "scale-125" : ""} ${isDesktop ? "scale-125" : ""}`}
+        className={`absolute inset-0 -z-10 ${
+          isMobile || isTablet || isDesktop ? "scale-125" : ""
+        }`}
       >
         <ProjectBackground className={`${isMobile ? "w-full h-full" : ""}`} />
       </div>
 
-      <div className="relative z-10 max-w-screen flex flex-col items-center pt-14">
+      {/* Projects Section */}
+      <div className="relative z-10 max-w-screen-lg w-full flex flex-col items-center pt-14">
         <div
           className="self-stretch text-center justify-center text-firecrackerRedDark 
-        font-Sancreek-Regular text-heading leading-[96px] 
-        text-shadow [text-stroke:2px_#F2E06F] [-webkit-text-stroke:2px_#F2E06F]"
+          font-Sancreek-Regular text-heading leading-[96px] 
+          text-shadow [text-stroke:2px_#F2E06F] [-webkit-text-stroke:2px_#F2E06F]"
         >
           2025 PROJECTS
         </div>
@@ -91,11 +97,15 @@ export default function Page() {
         {projectData.map((project, index) => (
           <div
             key={index}
-            className={` ${isMobile ? "pt-10 mb-10" : ""} ${isTablet ? "pt-10" : ""} ${isDesktop ? "pt-10" : ""}`}
+            className={`${isMobile ? "pt-2 mb-2" : "pt-10"} w-full flex flex-col items-center`}
           >
-            <RibbonTitle text={project.award.toUpperCase()} />
             <div
-              className={`${isMobile ? "mb-5" : ""} ${isTablet ? "" : ""} ${isDesktop ? "" : ""}`}
+              className={`${isMobile ? "scale-[0.85]" : ""} w-full flex justify-center`}
+            >
+              <ProjectName projectName={project.award.toUpperCase()} />
+            </div>
+            <div
+              className={`${isMobile ? "mb-2" : "mb-3"} w-full scale-[0.85]`}
             >
               <Project
                 projectImage={project.projectImage}
@@ -107,59 +117,56 @@ export default function Page() {
             </div>
           </div>
         ))}
+      </div>
 
-        <div
-          className={`
-        ${isMobile ? "scale-[0.3] top-[98.5%] -left-[125px]" : ""}
-        ${isTablet ? "scale-[0.7] top-[101%] -left-[150px]" : ""}
-        ${isDesktop ? "top-[100%] -left-[200px]" : ""}
-        absolute`}
-        >
-          <PinkFirework />
-        </div>
-        <div
-          className={`
-      ${isMobile ? "scale-[0.3] top-[98.5%] -left-[120px]" : ""}
-      ${isTablet ? "scale-[0.7] top-[103%] -left-[60px]" : ""}
-      ${isDesktop ? "top-[104%] -left-[85px]" : ""}
-      absolute`}
-        >
-          <YellowFirework />
-        </div>
-        <div
-          className={`
-    ${isMobile ? "scale-[0.3] top-[96%] -left-[30px]" : ""}
-    ${isTablet ? "scale-[0.65] top-[100%] left-[200px]" : ""}
-    ${isDesktop ? "top-[101%] left-[485px]" : ""}
-    absolute
-  `}
-        >
-          <OrangeFirework />
+      {/* Fireworks + Archive Section */}
+      <div className="relative flex flex-col items-center w-full mb-20 overflow-visible mobile:mt-[27rem] tablet:mt-[39rem] desktop:mt-[39rem]">
+        {/* Fireworks Layer */}
+        <div className="absolute inset-0 flex justify-center items-center">
+          <div
+            className="absolute mobile:-left-[19%] mobile:-top-[255%] mobile:scale-[0.4]
+          tablet:left-[10%] tablet:-top-[395%] tablet:scale-100
+          desktop:left-[10%] desktop:-top-[395%] desktopscale-100"
+          >
+            <PinkFirework />
+          </div>
+          <div
+            className="absolute mobile:right-[20%] mobile:-top-[225%] mobile:scale-[0.35]
+          tablet:right-[60%] tablet:-top-[315%] tablet:scale-90
+          desktop:right-[60%] desktop:-top-[315%] desktop:scale-90"
+          >
+            <YellowFirework />
+          </div>
+          <div
+            className="absolute mobile:left-[40%] mobile:-top-[300%] mobile:scale-[0.3]
+          tablet:right-[15%] tablet:-top-[440%] tablet:scale-100
+          desktop:right-[15%] desktop:-top-[440%] desktop:scale-100"
+          >
+            <OrangeFirework />
+          </div>
         </div>
 
-        <div
-          className={`absolute flex flex-col items-center ${isMobile ? "top-[106.5%]" : ""} ${isTablet ? "top-[112%]" : ""} ${isDesktop ? "top-[118%]" : ""}`}
-        >
-          <div className="self-stretch text-center justify-center text-carouselCreamLight text-3xl font-['NeulisNeue-Regular'] leading-10 mb-5">
+        {/* Archive CTA */}
+        <div className="flex flex-col items-center text-center z-10 px-4">
+          <div className="text-carouselCreamLight text-3xl font-['NeulisNeue-Regular'] leading-10 mb-5">
             Interested in seeing more past hacker projects?
           </div>
-          <div className="self-stretch text-center justify-center text-carouselCreamLight text-md font-normal font-['NeulisNeue-Regular'] leading-tight mb-5">
+          <div className="text-carouselCreamLight text-md font-['NeulisNeue-Regular'] leading-tight mb-5">
             Check out the HackBeanpot Archive!
           </div>
 
-          <div className="text-center justify-center">
-            <Button
-              text="View Archive"
-              textColor="white"
-              color="starlightBlue"
-              size="medium"
-              onClick={() =>
-                window.open("https://archive.hackbeanpot.com/", "_blank")
-              }
-            ></Button>
-          </div>
+          <Button
+            text="View Archive"
+            textColor="white"
+            color="starlightBlue"
+            size="medium"
+            onClick={() =>
+              window.open("https://archive.hackbeanpot.com/", "_blank")
+            }
+          />
         </div>
       </div>
+
       <Footer />
     </div>
   );