diff --git a/frontend/src/app/NEW-course-library-page/page.tsx b/frontend/src/app/NEW-course-library-page/page.tsx
new file mode 100644
index 000000000..ec4c8eaf1
--- /dev/null
+++ b/frontend/src/app/NEW-course-library-page/page.tsx
@@ -0,0 +1,35 @@
+// "use client";
+import Image from "next/image";
+import LandingPageContent from "@/components/LandingPageContent/LandingPageContent";
+import navbar from "@/assets/navbar.svg";
+import Sponsorships from "@/components/SponsorshipsSection/Sponsorships";
+import { Metadata } from "next";
+import { ItemList, WithContext } from "schema-dts";
+import { get } from "@/utils/request";
+import { Course, Courses } from "@/types/api";
+import SearchBar from "@/components/SearchBar/SearchBar";
+
+export default async function CourseLibraryPage() {
+  const { courses: initialCourses } = (await get(
+    "/courses?offset=0",
+  )) as Courses;
+
+
+  return (
+    <div>
+      {/* TOP OF PAGE */}
+      {/* Title here */}
+      <div className='flex flex-col w-full gap-3'>
+        <h1 className='justify-center font-bold text-unilectives-blue text-5xl sm:text-5xl mt-32 ml-[6.25rem] tracking-wide font-sans'>
+          Search Your Courses
+        </h1>
+      </div>
+
+      {/* Course cards */}
+      <div className="flex flex-col justify-center items-center mt-10">
+        <LandingPageContent initialCourses={initialCourses} />
+      </div>
+      {/* BOTTOM OF PAGE */}
+    </div>
+  );
+}
diff --git a/frontend/src/app/NEW-landing-page/Features.tsx b/frontend/src/app/NEW-landing-page/Features.tsx
new file mode 100644
index 000000000..23d12c93e
--- /dev/null
+++ b/frontend/src/app/NEW-landing-page/Features.tsx
@@ -0,0 +1,7 @@
+export default function Features() {
+  return (
+    <div>
+      <p>Featuress</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/NEW-landing-page/Header.tsx b/frontend/src/app/NEW-landing-page/Header.tsx
new file mode 100644
index 000000000..e1590acde
--- /dev/null
+++ b/frontend/src/app/NEW-landing-page/Header.tsx
@@ -0,0 +1,7 @@
+export default function Header() {
+  return (
+    <div>
+      <p>Header!</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/NEW-landing-page/Sponsors.tsx b/frontend/src/app/NEW-landing-page/Sponsors.tsx
new file mode 100644
index 000000000..734ed01d6
--- /dev/null
+++ b/frontend/src/app/NEW-landing-page/Sponsors.tsx
@@ -0,0 +1,7 @@
+export default function Sponsors() {
+  return (
+    <div>
+      <p>Sponsors...</p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/NEW-landing-page/page.tsx b/frontend/src/app/NEW-landing-page/page.tsx
new file mode 100644
index 000000000..b3fcb602c
--- /dev/null
+++ b/frontend/src/app/NEW-landing-page/page.tsx
@@ -0,0 +1,86 @@
+import Image from "next/image";
+import LandingPageContent from "@/components/LandingPageContent/LandingPageContent";
+import navbar from "@/assets/navbar.svg";
+import OldSponsorships from "@/components/SponsorshipsSection/Sponsorships";
+import { Metadata } from "next";
+import { ItemList, WithContext } from "schema-dts";
+import { get } from "@/utils/request";
+import { Course, Courses } from "@/types/api";
+import NewSponsorships from "@/components/SponsorshipsSection/NewSponsorships";
+
+// Metadata to assist SEO - provies metadata for HTML head section
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Home | Unilectives - UNSW Course Reviews`,
+    description: `UNSW course reviews, ratings, and study tips. Unilectives is your one-stop shop for making informed course choices at UNSW.`,
+  };
+}
+
+export default async function LandingPage() {
+  // GET request for all courses
+  const { courses: initialCourses } = (await get(
+    "/courses?offset=0",
+  )) as Courses;
+
+  // Generate metadata to help with SEO (inject via script in return)
+  const metaLD: WithContext<ItemList> = {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    itemListElement: initialCourses.map((course: Course, index: number) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      item: {
+        "@type": "Course",
+        url: `//www.handbook.unsw.edu.au/undergraduate/courses/${new Date().getFullYear()}/${
+          course.courseCode
+        }`,
+        name: course.title,
+        description: course.description,
+        provider: {
+          "@type": "CollegeOrUniversity",
+          name: "University of New South Wales",
+          sameAs: "https://www.unsw.edu.au/",
+        },
+        aggregateRating: {
+          "@type": "AggregateRating",
+          ratingCount: course.reviewCount,
+          ratingValue: course.reviewCount === 0 ? 0 : course.overallRating,
+          bestRating: 5,
+        },
+        offers: [
+          {
+            "@type": "Offer",
+            category: "Paid",
+          },
+        ],
+        hasCourseInstance: course.terms.map((term: number) => ({
+          "@type": "CourseInstance",
+          courseMode: "Blended",
+          courseSchedule: {
+            "@type": "Schedule",
+            repeatCount: term === 0 ? 5 : 10,
+            repeatFrequency: "Weekly",
+          },
+        })),
+      },
+    })),
+  };
+
+  return (
+    <div>
+      {/* SCRIPT FOR SEO - do not touch*/}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(metaLD) }}
+      />
+      {/* SECTION 1 - HEADER */}
+      <p> Header section below</p>
+      {/* SECTION 2 - "OUR FEATURES" */}
+      <p> Features section below</p>
+      {/* SECTION 3 - "PROUDLY SPONSORED BY" */}
+      <p> Sponsors section below</p>
+      <NewSponsorships />
+      {/* BOTTOM OF PAGE */}
+    </div>
+  );
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index d083dd32c..6b8317a1a 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -14,7 +14,7 @@ export default async function RootLayout({
   const session = await getServerSession(authOptions);
 
   return (
-    <html lang='en' className='font-custom '>
+    <html lang="en" className="font-custom">
       <head>
         {/* Only used in Safari - Change Navbar to slate-800 colors when dark mode */}
         <meta name="theme-color" content="#ffffff" />
@@ -34,20 +34,24 @@ export default async function RootLayout({
               `,
           }}
         />
-      <script defer data-domain="unilectives.devsoc.app" src="https://plausible.unilectives.com/js/script.outbound-links.tagged-events.js"></script>
+        <script
+          defer
+          data-domain="unilectives.devsoc.app"
+          src="https://plausible.unilectives.com/js/script.outbound-links.tagged-events.js"
+        ></script>
       </head>
       <body className="bg-white dark:bg-slate-800 dark:text-gray-200">
         <Provider session={session}>
           <AlertProvider>
             <ThemeProviderComponent>
               <Navbar userZid={session?.user?.id} />
-              <div className='ml-20 xs:ml-15'>
+              <div className="pt-16 xs:pt-15">
                 {children}
               </div>
             </ThemeProviderComponent>
           </AlertProvider>
         </Provider>
       </body>
-    </html >
+    </html>
   );
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index fb459b892..a14a5165b 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import LandingPageContent from "@/components/LandingPageContent/LandingPageContent";
 import navbar from "@/assets/navbar.svg";
-import Sponsorships from "@/components/SponsorshipsSection/Sponsorships"
+import Sponsorships from "@/components/SponsorshipsSection/Sponsorships";
 import { Metadata } from "next";
 import { ItemList, WithContext } from "schema-dts";
 import { get } from "@/utils/request";
@@ -16,7 +16,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function Home() {
   const { courses: initialCourses } = (await get(
-    "/courses?offset=0"
+    "/courses?offset=0",
   )) as Courses;
 
   const metaLD: WithContext<ItemList> = {
@@ -27,8 +27,9 @@ export default async function Home() {
       position: index + 1,
       item: {
         "@type": "Course",
-        url: `//www.handbook.unsw.edu.au/undergraduate/courses/${new Date().getFullYear()}/${course.courseCode
-          }`,
+        url: `//www.handbook.unsw.edu.au/undergraduate/courses/${new Date().getFullYear()}/${
+          course.courseCode
+        }`,
         name: course.title,
         description: course.description,
         provider: {
@@ -42,10 +43,12 @@ export default async function Home() {
           ratingValue: course.reviewCount === 0 ? 0 : course.overallRating,
           bestRating: 5,
         },
-        offers: [{
-          "@type": "Offer",
-          category: "Paid"
-        }],
+        offers: [
+          {
+            "@type": "Offer",
+            category: "Paid",
+          },
+        ],
         hasCourseInstance: course.terms.map((term: number) => ({
           "@type": "CourseInstance",
           courseMode: "Blended",
@@ -53,51 +56,72 @@ export default async function Home() {
             "@type": "Schedule",
             repeatCount: term === 0 ? 5 : 10,
             repeatFrequency: "Weekly",
-          }
-        }))
-      }
+          },
+        })),
+      },
     })),
   };
 
   return (
-    <div className='mb-20 bg-white dark:bg-slate-800 transition-color duration-150'>
+    <div className="mb-20 bg-white dark:bg-slate-800 transition-color duration-150">
       {/* Landing page graphic */}
       <Image
         src={navbar}
         width={1000}
         height={500}
-        alt='landing page graphic'
-        layout='responsive'
+        alt="landing page graphic"
+        layout="responsive"
         priority
       />
+      <a href="/NEW-landing-page">
+        <div
+          style={{
+            border: "solid 1px blue",
+            marginBottom: "10px",
+            fontSize: "30px"
+          }}
+        >
+          FOR DEVELOPMENT: To NEW landing page
+        </div>
+      </a>
+      <a href="/NEW-course-library-page">
+        <div
+          style={{
+            border: "solid 1px green",
+            marginBottom: "10px",
+            fontSize: "30px"
+          }}
+        >
+          FOR DEVELOPMENT: To NEW course library page
+        </div>
+      </a>
+
       {/* Hero Section */}
       <script
-        type='application/ld+json'
+        type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(metaLD) }}
       />
-      <div className='flex flex-row w-full justify-center items-center mt-10'>
-        <div className='flex flex-row w-5/6 space-y-0 justify-between items-left md:space-y-4 md:flex-col md:items-center'>
-          <div className='flex flex-col w-full gap-3'>
-            <p className='drop-shadow-md text-base sm:text-xs'>
+      <div className="flex flex-row w-full justify-center items-center mt-10">
+        <div className="flex flex-row w-5/6 space-y-0 justify-between items-left md:space-y-4 md:flex-col md:items-center">
+          <div className="flex flex-col w-full gap-3">
+            <p className="drop-shadow-md text-base sm:text-xs">
               DevSoc presents
             </p>
-            <h1 className='justify-center font-bold text-unilectives-blue text-7xl sm:text-4xl'>
+            <h1 className="justify-center font-bold text-unilectives-blue text-7xl sm:text-4xl">
               unilectives
             </h1>
-            <p className='justify-center font-semibold text-base sm:text-xs'>
+            <p className="justify-center font-semibold text-base sm:text-xs">
               Your one-stop shop for UNSW course and elective reviews.
             </p>
             {/* Sponsors Section */}
-            <Sponsorships/>
+            <Sponsorships />
           </div>
         </div>
       </div>
       {/* Course Section */}
-      <div className='flex flex-col justify-center items-center mt-10'>
+      <div className="flex flex-col justify-center items-center mt-10">
         <LandingPageContent initialCourses={initialCourses} />
       </div>
     </div>
   );
 }
-
-
diff --git a/frontend/src/assets/SafetyCultureLight.png b/frontend/src/assets/SafetyCultureLight.png
new file mode 100644
index 000000000..c5c12cd25
Binary files /dev/null and b/frontend/src/assets/SafetyCultureLight.png differ
diff --git a/frontend/src/assets/the-trade-desk-dark.svg b/frontend/src/assets/the-trade-desk-dark.svg
new file mode 100644
index 000000000..caecfaad6
--- /dev/null
+++ b/frontend/src/assets/the-trade-desk-dark.svg
@@ -0,0 +1,25 @@
+<svg width="414" height="53" viewBox="0 0 414 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_336_697)">
+<path d="M76.5808 46.113C70.3561 46.113 67.2727 42.561 67.2727 36.6343V20.9877H61.6396V14.8805H67.2727V7.06135L74.6855 5.22266V14.8805H82.4545V20.9877H74.6853V35.9788C74.6853 38.3521 75.7526 39.3604 78.1221 39.3604C79.6643 39.3604 80.9114 39.3004 82.9284 39.0617V45.287C80.8519 45.8182 78.7772 46.113 76.5808 46.113Z" fill="black"/>
+<path d="M105.1 45.7012V26.6763C105.1 23.122 103.916 20.9288 100.004 20.9288C95.5505 20.9288 93.6575 25.6691 93.6575 29.462V45.7012H86.2461V2.91455H93.6575V18.1417C95.4383 15.5339 98.8745 14.1114 102.074 14.1114C108.658 14.1114 112.514 18.7936 112.514 25.1383V45.7012H105.1Z" fill="black"/>
+<path d="M144.349 32.6036H123.717C123.66 34.9725 124.487 37.2256 125.966 38.6466C127.032 39.6548 128.517 40.5465 130.534 40.5465C132.668 40.5465 133.971 40.1302 135.044 39.061C135.69 38.4099 136.227 37.5819 136.523 36.454H143.636C143.458 38.2942 142.215 40.7254 141.027 42.1458C138.424 45.2255 134.565 46.4698 130.656 46.4698C126.445 46.4698 123.357 44.9901 120.929 42.676C117.847 39.7146 116.186 35.3879 116.186 30.3537C116.186 25.43 117.667 21.0488 120.633 18.0217C122.945 15.6548 126.263 14.1123 130.473 14.1123C135.044 14.1123 139.191 15.9502 141.737 19.8006C143.993 23.1792 144.526 26.6762 144.409 30.5289C144.409 30.5289 144.349 31.9545 144.349 32.6036ZM135.101 21.8195C134.091 20.7506 132.549 20.0387 130.413 20.0387C128.16 20.0387 126.327 20.987 125.254 22.4115C124.193 23.7728 123.717 25.1966 123.66 27.209H136.997C136.941 24.9 136.285 23.1211 135.101 21.8195Z" fill="black"/>
+<path d="M159.942 10.7924V45.7005H152.294V10.7924H139.844V3.68164H172.391V10.7924H159.942Z" fill="black"/>
+<path d="M185.071 21.4598C179.858 21.4598 177.128 25.1949 177.128 30.1736V45.7006H169.662V14.8805H175.944L176.595 19.5055C178.017 15.9503 181.692 14.4697 185.312 14.4697C186.081 14.4697 186.854 14.5288 187.624 14.6461V21.7572C186.794 21.5789 185.905 21.4598 185.071 21.4598Z" fill="black"/>
+<path d="M212.7 46.1738C209.5 46.1738 207.722 44.1582 207.483 41.8498C206.06 44.3366 202.503 46.4698 198.116 46.4698C190.767 46.4698 186.969 41.8499 186.969 36.8104C186.969 30.9435 191.535 27.5678 197.403 27.1536L206.479 26.4962V24.6028C206.479 21.697 205.466 19.7454 201.257 19.7454C197.818 19.7454 195.803 21.2834 195.625 24.1283H188.452C188.864 17.1894 194.379 14.1123 201.258 14.1123C206.537 14.1123 211.043 15.7728 212.819 20.3942C213.589 22.3514 213.711 24.5439 213.711 26.6172V38.0551C213.711 39.4769 214.184 40.0122 215.431 40.0122C215.902 40.0122 216.379 39.8919 216.379 39.8919V45.3426C215.132 45.8797 214.481 46.1738 212.7 46.1738ZM206.479 32.0088L198.649 32.6032C196.396 32.7807 194.204 34.1459 194.204 36.6338C194.204 39.0033 196.278 40.4843 198.589 40.4843C203.216 40.4843 206.479 37.9963 206.479 33.4324V32.0088Z" fill="black"/>
+<path d="M239.856 45.7008L239.384 42.3237C237.542 45.1679 234.104 46.4116 230.726 46.4116C227.641 46.4116 225.093 45.3398 223.196 43.8067C219.517 40.7822 217.74 36.159 217.74 30.3532C217.74 24.3049 219.577 19.6258 223.253 16.5997C225.151 15.0617 227.641 14.1118 230.785 14.1118C234.7 14.1118 237.542 15.4162 238.849 17.0139V2.91309H246.257V45.7008H239.856ZM232.209 20.3374C229.899 20.3374 228.293 21.3999 227.229 22.7646C225.686 24.7807 225.273 27.5677 225.273 30.237C225.273 32.8987 225.686 35.7423 227.229 37.7579C228.293 39.1186 229.899 40.1874 232.209 40.1874C238.018 40.1874 239.205 34.6744 239.205 30.237C239.205 25.785 238.018 20.3374 232.209 20.3374Z" fill="black"/>
+<path d="M278.572 32.6031H257.939C257.88 34.972 258.71 37.2251 260.193 38.6461C261.255 39.6543 262.74 40.546 264.755 40.546C266.891 40.546 268.193 40.1297 269.263 39.0605C269.913 38.4095 270.449 37.5814 270.742 36.4536H277.861C277.68 38.2937 276.434 40.7249 275.253 42.1453C272.644 45.2251 268.79 46.4693 264.874 46.4693C260.666 46.4693 257.583 44.9896 255.151 42.6756C252.067 39.7141 250.409 35.3874 250.409 30.3533C250.409 25.4296 251.888 21.0483 254.856 18.0212C257.168 15.6543 260.487 14.1118 264.696 14.1118C269.264 14.1118 273.414 15.9497 275.962 19.8001C278.216 23.1787 278.747 26.6757 278.63 30.5284C278.63 30.5284 278.572 31.9541 278.572 32.6031ZM269.324 21.819C268.314 20.7501 266.773 20.0382 264.635 20.0382C262.384 20.0382 260.547 20.9865 259.481 22.411C258.412 23.7723 257.939 25.1962 257.88 27.2085H271.218C271.158 24.8996 270.507 23.1206 269.324 21.819Z" fill="black"/>
+<path d="M311.06 41.1959C308.273 44.1019 304.064 45.6989 299.26 45.6989H282.898V3.68311H299.26C304.064 3.68311 308.273 5.28004 311.06 8.18607C315.385 12.6311 315.982 18.8556 315.982 24.664C315.982 30.4715 315.386 36.749 311.06 41.1959ZM305.189 12.9263C303.769 11.5049 301.692 10.555 299.26 10.555H290.546V38.8244H299.26C301.692 38.8244 303.769 37.8779 305.189 36.4534C308.154 33.4901 308.213 28.5142 308.213 24.6638C308.213 20.8072 308.154 15.8878 305.189 12.9263Z" fill="black"/>
+<path d="M346.216 32.6031H325.582C325.523 34.972 326.352 37.2251 327.838 38.6461C328.905 39.6543 330.383 40.546 332.402 40.546C334.537 40.546 335.84 40.1297 336.909 39.0605C337.562 38.4095 338.091 37.5814 338.391 36.4536H345.504C345.327 38.2937 344.081 40.7249 342.894 42.1453C340.287 45.2251 336.433 46.4693 332.518 46.4693C328.307 46.4693 325.227 44.9896 322.792 42.6756C319.711 39.7141 318.052 35.3874 318.052 30.3533C318.052 25.4296 319.535 21.0483 322.497 18.0212C324.81 15.6543 328.133 14.1118 332.34 14.1118C336.908 14.1118 341.056 15.9497 343.608 19.8001C345.858 23.1787 346.394 26.6757 346.275 30.5284C346.275 30.5284 346.216 31.9541 346.216 32.6031ZM336.969 21.819C335.959 20.7501 334.416 20.0382 332.285 20.0382C330.031 20.0382 328.19 20.9865 327.124 22.411C326.057 23.7723 325.582 25.1962 325.523 27.2085H338.863C338.806 24.8996 338.151 23.1206 336.969 21.819Z" fill="black"/>
+<path d="M378.172 2.91455V45.7012H385.582V37.5833L390.503 32.2511L399.158 45.7012H407.755L395.543 26.7978L406.57 14.8805H397.264L385.582 27.3891V2.91455H378.172Z" fill="black"/>
+<path d="M365.78 27.4463C362.754 26.9734 361.983 26.9151 359.197 26.5553C357.535 26.3199 355.64 25.669 355.64 23.4795C355.64 21.8744 356.709 20.7506 358.012 20.2135C359.141 19.7454 360.148 19.7454 361.211 19.7454C362.754 19.7454 364.359 20.2762 365.244 21.1669C365.958 21.9376 366.491 22.8865 366.491 24.07H373.543C373.543 21.8196 372.482 19.5063 370.818 17.7245C368.567 15.2977 364.83 14.1113 361.154 14.1113C357.301 14.1113 354.04 15.2404 351.788 17.1892C349.949 18.7953 348.648 20.9871 348.648 24.1302C348.648 28.0395 351.491 31.4776 355.703 32.3682C358.427 32.9602 361.508 33.1371 364.236 33.5519C366.139 33.8497 367.323 35.0369 367.323 36.8094C367.323 40.1865 363.527 40.7255 361.036 40.7255C358.904 40.7255 357.536 40.3035 356.354 39.3603C355.559 38.717 354.962 37.575 354.773 36.4239H347.797C348.01 39.0405 349.376 41.3309 351.016 42.9148C353.566 45.3401 357.064 46.4699 360.98 46.4699C365.189 46.4699 369.04 45.4076 371.531 42.9148C373.131 41.316 374.199 39.119 374.199 36.1595C374.199 31.2994 370.645 28.2177 365.78 27.4463Z" fill="black"/>
+<path d="M12.1489 0.948242V8.91088H20.2964V29.6922H28.1381V8.78633V0.948242H12.1489Z" fill="#0099FA"/>
+<path d="M7.845 27.8439C7.845 21.6451 11.2912 16.2512 16.373 13.474L4.73694 13.4731C1.76103 17.492 0 22.4603 0 27.8439C0 38.5256 6.92298 47.5888 16.5268 50.8023V42.295C11.3613 39.541 7.845 34.1046 7.845 27.8439Z" fill="#0099FA"/>
+<path d="M32.0636 4.94141V13.4724C37.1464 16.251 40.5967 21.6442 40.5967 27.8451C40.5967 36.8819 33.2622 44.2111 24.2184 44.2111C22.8695 44.2111 21.559 44.047 20.3052 43.7403V51.7359C21.58 51.9412 22.8856 52.0519 24.2184 52.0519C37.5934 52.0519 48.4376 41.2138 48.4376 27.8454C48.4374 17.2191 41.5882 8.19948 32.0636 4.94141Z" fill="#0099FA"/>
+<path d="M411.146 16.7385C409.51 16.7385 408.292 15.4586 408.292 13.8388C408.292 12.2191 409.51 10.9312 411.146 10.9312C412.782 10.9312 414 12.2113 414 13.8309C414 15.4508 412.782 16.7385 411.146 16.7385ZM411.146 11.4369C409.747 11.4369 408.822 12.4559 408.822 13.8388C408.822 15.2215 409.746 16.2328 411.146 16.2328C412.545 16.2328 413.47 15.2138 413.47 13.8309C413.47 12.4484 412.545 11.4369 411.146 11.4369ZM411.786 15.3006L411.28 14.1866H410.687V15.3006H410.158V12.2747H411.272C411.849 12.2747 412.347 12.6064 412.347 13.2228C412.347 13.6178 412.173 13.934 411.802 14.0997L412.363 15.3008L411.786 15.3006ZM411.272 12.7641H410.68V13.6967H411.272C411.589 13.6967 411.794 13.5544 411.794 13.2226C411.794 12.9144 411.557 12.7641 411.272 12.7641Z" fill="#231F20"/>
+</g>
+<defs>
+<clipPath id="clip0_336_697">
+<rect width="414" height="53" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/components/CourseCard/CourseCard.tsx b/frontend/src/components/CourseCard/CourseCard.tsx
index 1711a594b..0ce79b1d0 100644
--- a/frontend/src/components/CourseCard/CourseCard.tsx
+++ b/frontend/src/components/CourseCard/CourseCard.tsx
@@ -19,10 +19,10 @@ export default function CourseCard({
   terms,
 }: CourseCardProps) {
   return (
-    <div className='box-border px-6 py-7 bg-unilectives-card dark:bg-slate-700/40 hover:bg-gray-100 dark:hover:bg-slate-700/10 shadow-lg rounded-xl space-y-2 cursor-pointer duration-150'>
+    <div className='box-border px-6 py-7 bg-unilectives-card dark:bg-slate-700/40 hover:bg-[#eff0f2] dark:hover:bg-slate-700/10 shadow-lg rounded-xl space-y-2 cursor-pointer duration-150'>
       {/* Course courseCode + Ratings */}
       <div className='flex flex-wrap justify-between text-2xl gap-x-4'>
-        <h2 className='font-bold w-[8ch] text-black dark:text-white'>
+        <h2 className='font-normal w-[8ch] text-black dark:text-white'>
           {courseCode}
         </h2>
         <div className='text-left'>
diff --git a/frontend/src/components/CoursesList/CoursesList.tsx b/frontend/src/components/CoursesList/CoursesList.tsx
index ccf8599bd..e10f8ebdb 100644
--- a/frontend/src/components/CoursesList/CoursesList.tsx
+++ b/frontend/src/components/CoursesList/CoursesList.tsx
@@ -11,9 +11,11 @@ import FilterModal from "../FilterModal/FilterModal";
 export default function CoursesList({
   initialCourses,
   searchTerm,
+  filters,
 }: {
   initialCourses: Course[];
   searchTerm: string;
+  filters: { faculties: string[]; terms: string[] };
 }) {
   const courseFinishedRef = useRef(false);
   const indexRef = useRef(initialCourses.length);
@@ -24,13 +26,6 @@ export default function CoursesList({
     useState<Course[]>(initialCourses);
   const [initialLoading, setInitialLoading] = useState(true);
   const [selected, setSelected] = useState("");
-  const [filters, setFilters] = useState<{
-    faculties: string[];
-    terms: string[];
-  }>({
-    faculties: [],
-    terms: [],
-  });
   const paginationOffset = 25;
 
   const loadMore = async (index: number) => {
@@ -60,10 +55,16 @@ export default function CoursesList({
       return fetchedCourses;
     };
 
-    if (window.innerHeight + window.pageYOffset < document.body.offsetHeight) {
+    const scrollBuffer = 150; // pixels before the bottom to trigger loading
+    if (
+      window.innerHeight + window.pageYOffset <
+      document.body.offsetHeight - scrollBuffer
+    ) {
+      console.log("NOT REACHED BOTTOM. NOT LOADING MORE");
       return;
     }
     if (courseFinishedRef.current) {
+      console.log("UNKNOWN ERROR");
       return;
     }
 
@@ -127,12 +128,22 @@ export default function CoursesList({
     };
 
     const loadOnScroll = () => {
+      // if (
+      //   window.innerHeight + window.pageYOffset >= document.body.offsetHeight &&
+      //   !courseFinishedRef.current
+      // ) {
+      //
+      //   loadMore(indexRef.current);
+      //   indexRef.current += paginationOffset;
+      // }
+      const scrollPosition = window.innerHeight + window.pageYOffset;
+      const threshold = 100;
       if (
-        window.innerHeight + window.pageYOffset >= document.body.offsetHeight &&
+        scrollPosition + threshold >= document.body.offsetHeight &&
         !courseFinishedRef.current
       ) {
+        console.log("LOADING MORE");
         loadMore(indexRef.current);
-        indexRef.current += paginationOffset;
       }
     };
 
@@ -145,12 +156,11 @@ export default function CoursesList({
 
   return (
     <>
-      {/* SortDropdown Bar and Filter Buttion*/}
-      <div className="flex justify-end w-5/6 gap-4 xs:flex-col xs:gap-1">
+      {/* SortDropdown Bar*/}
+      <div className="flex justify-start w-5/6 gap-4 xs:flex-col xs:gap-1">
         <SortDropdown selected={selected} setSelected={setSelected} />
-        <FilterModal filters={filters} setFilters={setFilters} />
       </div>
-      <div className="grid grid-rows-3 grid-cols-3 lg:grid-rows-1 lg:grid-cols-1 gap-12 mt-10 w-5/6 items-center">
+      <div className="grid grid-rows-3 grid-cols-3 lg:grid-rows-1 lg:grid-cols-1 gap-8 mt-8 w-5/6 items-center">
         {sortCourses(displayCourses, selected).map(
           (c: Course, index: number) => (
             <a href={`/course/${c.courseCode}`} key={index}>
diff --git a/frontend/src/components/Dropdown/Dropdown.tsx b/frontend/src/components/Dropdown/Dropdown.tsx
index 5b4c15b00..21f286be4 100644
--- a/frontend/src/components/Dropdown/Dropdown.tsx
+++ b/frontend/src/components/Dropdown/Dropdown.tsx
@@ -41,7 +41,7 @@ export default function Dropdown({
     <Listbox value={selected} onChange={handleOnChange}>
       <div className='relative'>
         {/* Dropdown when not expanded */}
-        <Listbox.Button className='relative flex items-center justify-between gap-2 w-full cursor-pointer bg-white dark:bg-slate-900 py-2 px-4 text-left border border-unilectives-subheadings rounded-md shadow-review-card aria-expanded:border-b-transparent aria-expanded:rounded-b-none duration-150'>
+        <Listbox.Button className='relative flex items-center justify-between gap-2 w-full cursor-pointer bg-slate-100 dark:bg-slate-900 py-2 px-4 text-left rounded-md shadow-none aria-expanded:border-b-transparent aria-expanded:rounded-b-none duration-150'>
           <span className='block truncate'>
             {selected ? (
               <span>{selected}</span>
@@ -56,7 +56,7 @@ export default function Dropdown({
           </span>
         </Listbox.Button>
         {/* Dropdown options */}
-        <Listbox.Options className='absolute z-10 max-h-[10.05rem] text-left w-full overflow-auto border border-unilectives-subheadings rounded-md bg-white dark:bg-slate-900 shadow-dropdown border-t-0 rounded-t-none'>
+        <Listbox.Options className='absolute z-10 max-h-[10.05rem] text-left w-full overflow-auto rounded-md bg-slate-100 dark:bg-slate-900 shadow-dropdown border-t-0 rounded-t-none'>
           {options.length === 0 ? (
             <Listbox.Option
               value=''
diff --git a/frontend/src/components/FilterModal/FilterModal.tsx b/frontend/src/components/FilterModal/FilterModal.tsx
index ce40b02b2..ce8e4c274 100644
--- a/frontend/src/components/FilterModal/FilterModal.tsx
+++ b/frontend/src/components/FilterModal/FilterModal.tsx
@@ -10,11 +10,15 @@ import { Course } from "@/types/api";
 export default function FilterModal({
   filters,
   setFilters,
+  open,
+  onClose,
 }: {
   filters: { terms: string[]; faculties: string[] };
   setFilters: React.Dispatch<
     React.SetStateAction<{ faculties: string[]; terms: string[] }>
   >;
+  open: boolean;
+  onClose: () => void;
 }) {
   const faculties = [
     "Arts",
@@ -54,14 +58,12 @@ export default function FilterModal({
     new Array(terms.length).fill(false),
   );
 
-  const [open, setOpen] = useState(false);
-
   const handleClose = () => {
     // if no filters were applied then clear all
     if (filters.terms.length === 0 && filters.faculties.length === 0) {
       handleClearAll();
     }
-    setOpen(false);
+    onClose();
   };
 
   const handleClearAll = () => {
@@ -116,7 +118,8 @@ export default function FilterModal({
 
     setFilters({ faculties: selectedFaculties, terms: selectedTerms });
 
-    setOpen(false);
+    // setOpen(false);
+    onClose();
   };
 
   const handleTagOnClick = (type: string, position: number) => {
@@ -157,21 +160,8 @@ export default function FilterModal({
 
   return (
     <>
-      {/* filter button */}
-      <div className="mt-4 min-w-[140px] xs:min-w-1/2">
-        <button
-          className="relative flex items-center dark:text-white dark:bg-gray-900 justify-between gap-2 w-full cursor-pointer py-2 px-4 text-left text-[#989898] border border-unilectives-subheadings rounded-md shadow-review-card aria-expanded:border-b-transparent aria-expanded:rounded-b-none"
-          onClick={() => {
-            setOpen(true);
-          }}
-        >
-          Filter
-          <AdjustmentsHorizontalIcon className="w-4 h-4 rounded-full dark:text-white text-black" />
-        </button>
-      </div>
-
       {/* filter dialog */}
-      <Dialog open={open} onClose={handleClose}>
+      <Dialog open={open} onClose={onClose}>
         {/* the blurred backdrop */}
         <div
           className="fixed inset-0 bg-black/30 backdrop-blur-sm z-10"
@@ -182,7 +172,7 @@ export default function FilterModal({
         <div className="fixed inset-0 flex w-screen items-center justify-center pl-20 z-10 ">
           {/* The actual dialog panel  */}
           <Dialog.Panel className="mx-auto max-w-sm p-8 rounded dark:bg-gray-900 bg-white flex flex-col xs:w-full">
-            <button className="w-6 h-6 place-self-end" onClick={handleClose}>
+            <button className="w-6 h-6 place-self-end" onClick={onClose}>
               <XMarkIcon />
             </button>
             <Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
diff --git a/frontend/src/components/LandingPageContent/LandingPageContent.tsx b/frontend/src/components/LandingPageContent/LandingPageContent.tsx
index 3aaf7f7b3..45ae8ed5a 100644
--- a/frontend/src/components/LandingPageContent/LandingPageContent.tsx
+++ b/frontend/src/components/LandingPageContent/LandingPageContent.tsx
@@ -4,6 +4,7 @@ import SearchBar from "@/components/SearchBar/SearchBar";
 import CoursesList from "../CoursesList/CoursesList";
 import { useState } from "react";
 import { Course } from "@/types/api";
+import FilterModal from "../FilterModal/FilterModal";
 
 export default function LandingPageContent({
   initialCourses,
@@ -11,6 +12,11 @@ export default function LandingPageContent({
   initialCourses: Course[];
 }) {
   const [searchTerm, setSearchTerm] = useState<string>("");
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [filters, setFilters] = useState<{ faculties: string[]; terms: string[] }>({
+    faculties: [],
+    terms: [],
+  });
 
   const handleStateChange = (newSearchTerm: string) => {
     setSearchTerm(newSearchTerm);
@@ -18,8 +24,24 @@ export default function LandingPageContent({
 
   return (
     <div className='flex flex-col justify-center items-center w-full duration-150'>
-      <SearchBar onSearchChange={handleStateChange} />
-      <CoursesList initialCourses={initialCourses} searchTerm={searchTerm} />
+      <SearchBar 
+        onSearchChange={handleStateChange} 
+        onFilterClick={() => setIsFilterOpen(true)}
+      />
+      {isFilterOpen && (
+        <FilterModal
+          filters={filters}
+          setFilters={setFilters}
+          onClose={() => setIsFilterOpen(false)} // close modal
+          open={isFilterOpen}
+        />
+      )}
+
+      <CoursesList
+        initialCourses={initialCourses}
+        searchTerm={searchTerm}
+        filters={filters} // pass filters down to CoursesList
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
index aa4860d6a..c8abd8d53 100644
--- a/frontend/src/components/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -63,19 +63,25 @@ export default function Navbar({ userZid }: NavbarProps) {
 
   return (
     // Enlarged (non-collapsed) View
+    // <div
+    //   ref={ref}
+    //   className={
+    //     collapsed
+    //       ? "fixed flex flex-row items-center w-20 h-screen gap-4 p-4 duration-150 bg-gray-100 dark:bg-slate-700 z-50 xs:p-2 xs:w-15 xs:gap-2"
+    //       : "fixed flex flex-col w-72 h-screen gap-4 p-4 bg-gray-50 dark:bg-slate-700 z-40 duration-150"
+    //   }
+    // >
     <div
       ref={ref}
-      className={
-        collapsed
-          ? "fixed flex flex-col items-center w-20 h-screen gap-4 p-4 duration-150 bg-gray-50 dark:bg-slate-700 z-50 xs:p-2 xs:w-15 xs:gap-2"
-          : "fixed flex flex-col w-72 h-screen gap-4 p-4 bg-gray-50 dark:bg-slate-700 z-40 duration-150"
-      }
+      className={`fixed top-0 left-0 w-full h-16 flex items-center gap-4 px-6 bg-white backdrop-blur-md z-50 duration-150 ${
+        collapsed ? "justify-center" : "justify-between"
+      }`}
     >
       {/* Logo */}
-      <div className='flex flex-row items-center justify-between h-10 p-2'>
+      <div className="flex flex-row items-center justify-between h-10 p-2">
         <Tooltip tooltip={collapsed ? "" : ""}>
-          <a href='/'>
-            <Image src={logo} width={33} height={33} alt='logo' priority />
+          <a href="/">
+            <Image src={logo} width={33} height={33} alt="logo" priority />
           </a>
         </Tooltip>
         <p
@@ -95,11 +101,12 @@ export default function Navbar({ userZid }: NavbarProps) {
         />
       </div>
       {/* Navbar Container */}
-      <div className='flex flex-col h-full w-full justify-between border-t-2 border-gray-200 dark:border-slate-500'>
+      <div className="flex flex-row h-full w-full justify-between border-t-2 border-gray-200 dark:border-slate-500">
         {/* Review Options */}
         <div
-          className={`flex flex-col gap-3 py-3 ${collapsed ? "items-center" : "items-left"
-            }`}
+          className={`flex flex-row gap-3 py-3 ${
+            collapsed ? "items-center" : "items-left"
+          }`}
         >
           <a
             className={
@@ -107,10 +114,13 @@ export default function Navbar({ userZid }: NavbarProps) {
                 ? "flex"
                 : "flex flex-row items-center hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl"
             }
-            href='/'
+            href="/NEW-course-library-page"
           >
-            <Tooltip tooltip={collapsed ? "Browse Courses" : ""}>
-              <BookOpenIcon className='w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl' />
+            <Tooltip
+              tooltip={collapsed ? "Browse Courses" : ""}
+              position="bottom"
+            >
+              <BookOpenIcon className="w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl" />
             </Tooltip>
             <span className={collapsed ? "hidden" : "whitespace-nowrap"}>
               Browse Courses
@@ -129,7 +139,7 @@ export default function Navbar({ userZid }: NavbarProps) {
               }}
             >
               <Tooltip tooltip={collapsed ? "My Reviews" : ""}>
-                <PencilSquareIcon className='w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl' />
+                <PencilSquareIcon className="w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl" />
               </Tooltip>
               <span className={collapsed ? "hidden" : "whitespace-nowrap"}>
                 My Reviews
@@ -142,10 +152,10 @@ export default function Navbar({ userZid }: NavbarProps) {
                 ? "flex"
                 : "flex flex-row items-center hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl"
             }
-            href='/terms-and-conditions'
+            href="/terms-and-conditions"
           >
             <Tooltip tooltip={collapsed ? "Terms and Conditions" : ""}>
-              <ShieldCheckIcon className='w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl' />
+              <ShieldCheckIcon className="w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl" />
             </Tooltip>
             <span className={collapsed ? "hidden" : "whitespace-nowrap"}>
               Terms and Conditions
@@ -154,17 +164,18 @@ export default function Navbar({ userZid }: NavbarProps) {
         </div>
         {/* Account Options */}
         <div
-          className={`flex flex-col gap-4 py-2 ${collapsed ? "items-center" : "items-left"
-            }`}
+          className={`flex flex-row gap-4 py-2 ${
+            collapsed ? "items-center" : "items-left"
+          }`}
         >
           <div
             className={
               collapsed
-                ? "flex flex-col gap-3 cursor-pointer"
+                ? "flex flex-row gap-3 cursor-pointer"
                 : "flex flex-row justify-between gap-2 cursor-pointer"
             }
           >
-            <Tooltip tooltip={"Expand"}>
+            {/* <Tooltip tooltip={"Expand"}>
               <BarsArrowUpIcon
                 onClick={() => setCollapsed(false)}
                 className={
@@ -173,7 +184,7 @@ export default function Navbar({ userZid }: NavbarProps) {
                     : "hidden"
                 }
               />
-            </Tooltip>
+            </Tooltip> */}
             {collapsed ? (
               <Tooltip tooltip={zid ? `${zid}` : "My Account"}>
                 <a
@@ -182,19 +193,19 @@ export default function Navbar({ userZid }: NavbarProps) {
                     if (!zid) signIn("csesoc");
                   }}
                 >
-                  <UserCircleIcon className='w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl cursor-pointer' />
+                  <UserCircleIcon className="w-12 h-12 p-3 hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl cursor-pointer" />
                 </a>
               </Tooltip>
             ) : (
               <a
-                className='flex flex-row w-full items-center hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl cursor-pointer'
+                className="flex flex-row w-full items-center hover:bg-slate-200 dark:hover:bg-slate-800 rounded-xl cursor-pointer"
                 href={zid && `/user/${zid}`}
                 onClick={() => {
                   if (!zid) signIn("csesoc");
                 }}
               >
-                <UserCircleIcon className='w-12 h-12 p-3' />
-                <span className='whitespace-nowrap'>
+                <UserCircleIcon className="w-12 h-12 p-3" />
+                <span className="whitespace-nowrap">
                   {zid ? zid : "My Account"}
                 </span>
               </a>
@@ -207,26 +218,28 @@ export default function Navbar({ userZid }: NavbarProps) {
                 <button
                   onClick={(e) => handleLogout(e)}
                   onMouseLeave={() => setLogout(false)}
-                  className={`bg-blue-200 dark:bg-blue-800 flex flex-row items-center justify-center rounded-xl gap-2 ${logout
-                    ? "hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-100"
-                    : "hover:bg-slate-200 dark:hover:bg-slate-800"
-                    }`}
+                  className={`w-12 h-12 border-2 bg-blue-200 dark:bg-blue-800 flex flex-row items-center justify-center rounded-xl gap-2 ${
+                    logout
+                      ? "hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-100"
+                      : "hover:bg-slate-200 dark:hover:bg-slate-800"
+                  }`}
                 >
-                  <ArrowRightOnRectangleIcon className='w-12 h-12 p-3' />
+                  <ArrowRightOnRectangleIcon className="w-12 h-12 p-3" />
                 </button>
               </Tooltip>
             ) : (
               <button
                 onClick={(e) => handleLogout(e)}
                 onMouseLeave={() => setLogout(false)}
-                className={`flex flex-row items-center justify-center rounded-xl gap-2 ${logout
-                  ? "hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-100"
-                  : "hover:bg-slate-200 dark:hover:bg-slate-800"
-                  }`}
+                className={`flex flex-row items-center justify-center w-12 h-12 border-2 rounded-xl gap-2 ${
+                  logout
+                    ? "hover:text-red-600 hover:bg-red-100 dark:hover:bg-red-100"
+                    : "hover:bg-slate-200 dark:hover:bg-slate-800"
+                }`}
               >
-                <ArrowRightOnRectangleIcon className='w-6 h-12 py-3' />
+                <ArrowRightOnRectangleIcon className="w-6 h-12 py-3" />
                 {!logout ? (
-                  <span className='whitespace-nowrap'>Logout</span>
+                  <span className="whitespace-nowrap">Logout</span>
                 ) : (
                   <span>Are you sure?</span>
                 )}
@@ -236,27 +249,27 @@ export default function Navbar({ userZid }: NavbarProps) {
             <Tooltip tooltip={"Login"}>
               <button
                 onClick={() => signIn("csesoc")}
-                className='flex flex-row items-center justify-center rounded-xl gap-2 hover:bg-slate-200 dark:hover:bg-slate-800'
+                className="flex flex-row items-center justify-center rounded-xl gap-2 hover:bg-slate-200 dark:hover:bg-slate-800"
               >
-                <ArrowLeftOnRectangleIcon className='w-12 h-12 rotate-180 p-3' />
+                <ArrowLeftOnRectangleIcon className="w-12 h-12 rotate-180 p-3" />
               </button>
             </Tooltip>
           ) : (
             <button
               onClick={() => signIn("csesoc")}
-              className='flex flex-row items-center justify-center rounded-xl gap-2 hover:bg-slate-200 dark:hover:bg-slate-800'
+              className="flex flex-row items-center justify-center rounded-xl gap-2 hover:bg-slate-200 dark:hover:bg-slate-800"
             >
-              <ArrowLeftOnRectangleIcon className='w-6 h-12 rotate-180 py-3' />
+              <ArrowLeftOnRectangleIcon className="w-6 h-12 rotate-180 py-3" />
               <span>Login</span>
             </button>
           )}
 
-          <div className='flex flex-col gap-3 max-h-20'>
+          <div className="flex flex-row gap-3 max-h-20">
             <span className={collapsed ? "hidden" : "text-xs"}>
               By using this site, you agree to the{" "}
               <a
-                href='/terms-and-conditions'
-                className='inline text-blue-500 hover:underline'
+                href="/terms-and-conditions"
+                className="inline text-blue-500 hover:underline"
               >
                 terms and conditions
               </a>
@@ -266,6 +279,7 @@ export default function Navbar({ userZid }: NavbarProps) {
               © DevSoc {new Date().getFullYear()}, v1.0.0
             </span>
           </div>
+          <div className="fixed top-16 left-0 w-full h-1 bg-blue-500 z-50" />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/ReviewCard/ReviewCard.tsx b/frontend/src/components/ReviewCard/ReviewCard.tsx
index 8cd966f7d..5b40c653d 100644
--- a/frontend/src/components/ReviewCard/ReviewCard.tsx
+++ b/frontend/src/components/ReviewCard/ReviewCard.tsx
@@ -88,7 +88,7 @@ export default function ReviewCard({
   };
 
   return (
-    <div className='px-10 py-5 space-y-2 shadow-review-card rounded-md bg-white dark:bg-slate-800 dark:shadow-slate-700/90 duration-150 isolate'>
+    <div className='px-10 py-5 space-y-2 shadow-review-card rounded-md bg-[#fafafa] dark:bg-[#273346] dark:shadow-slate-700/90 duration-150 isolate'>
       {/* Title + Date */}
       <div className='flex items-center gap-2 flex-wrap justify-between'>
         <h2 className='font-bold'>{review.title ? review.title : "-"}</h2>
diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx
index 4bbb448c4..b07d80c43 100644
--- a/frontend/src/components/SearchBar/SearchBar.tsx
+++ b/frontend/src/components/SearchBar/SearchBar.tsx
@@ -1,25 +1,30 @@
 "use client";
 
 import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
+import { AdjustmentsVerticalIcon } from "@heroicons/react/24/solid";
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
 import debounce from "lodash/debounce";
 
 export default function SearchBar({
   onSearchChange,
+  onFilterClick,
 }: {
   onSearchChange: (newSearchTerm: string) => void;
+  onFilterClick?: () => void;
 }) {
   const [initialLoading, setInitialLoading] = useState(true);
 
   const handleOnChange = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       // Check if user entered the secret phrase
-      if (event.target.value.trim().toLowerCase() === "i'm looking for a flag!") {
+      if (
+        event.target.value.trim().toLowerCase() === "i'm looking for a flag!"
+      ) {
         alert("Congrats! You found the flag: RCR{leave_a_review}!");
       }
       onSearchChange(event.target.value.trim().replaceAll(" ", "%20"));
     }, 300),
-    []
+    [],
   );
 
   useEffect(() => {
@@ -29,17 +34,21 @@ export default function SearchBar({
   }, []);
 
   return (
-    <div className='flex w-5/6 items-center bg-white dark:bg-gray-900 rounded border-2 border-unilectives-search duration-150'>
-      <MagnifyingGlassIcon className='w-6 h-6 text-unilectives-search mx-2 bg-white dark:bg-gray-900 duration-150' />
+    <div className="flex w-5/6 items-center bg-white dark:bg-gray-900 rounded-lg border-2 border-unilectives-search duration-150">
+      <MagnifyingGlassIcon className="w-6 h-6 text-unilectives-search ml-4 mr-0 mx-2 bg-white dark:bg-gray-900 duration-150" />
       <input
-        type='text'
-        name='query'
-        className='w-full py-2 px-3 text-sm bg-white dark:bg-gray-900 text-unilectives-search focus:outline-none placeholder-unilectives-search font-medium duration-150'
-        placeholder='Search for a course e.g. COMP1511'
-        autoComplete='off'
+        type="text"
+        name="query"
+        className="w-full py-3 px-3 text-md bg-white dark:bg-gray-900 text-unilectives-search focus:outline-none placeholder-unilectives-search font-normal duration-150"
+        placeholder="Search for a course e.g. COMP1511"
+        autoComplete="off"
         onChange={handleOnChange}
         disabled={initialLoading}
       />
+      <AdjustmentsVerticalIcon
+        className="w-6 h-6 text-unilectives-search mr-6 mx-2 cursor-pointer"
+        onClick={onFilterClick}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/SortDropdown/SortDropdown.tsx b/frontend/src/components/SortDropdown/SortDropdown.tsx
index 69743d123..ed15f9c7c 100644
--- a/frontend/src/components/SortDropdown/SortDropdown.tsx
+++ b/frontend/src/components/SortDropdown/SortDropdown.tsx
@@ -23,7 +23,7 @@ export default function SortDropdownBar({
           ]}
           defaultValue={selected}
           onChange={setSelected}
-          placeholder="Sort by"
+          placeholder="Select..."
         />
       </div>
     </div>
diff --git a/frontend/src/components/SponsorshipsSection/NewSponsorships.tsx b/frontend/src/components/SponsorshipsSection/NewSponsorships.tsx
new file mode 100644
index 000000000..d7fb54363
--- /dev/null
+++ b/frontend/src/components/SponsorshipsSection/NewSponsorships.tsx
@@ -0,0 +1,88 @@
+import JaneStreetLogo from "@/assets/janestreet.svg";
+import SafetyCultureLogo from "@/assets/sc.png";
+import SafetyCultureLogoLight from "@/assets/SafetyCultureLight.png";
+import AristaLogo from "@/assets/arista.png";
+import TheTradeDeskLogo from "@/assets/thetradedesk.png";
+import TheTradeDeskLogoDark from "@/assets/the-trade-desk-dark.svg";
+import Image from "next/image";
+
+export default function NewSponsorships() {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <p className="text-4xl font-medium">Proudly Sponsored By</p>
+      {/* Sponsor Tiers */}
+      <div className="pt-7">
+        <p>Platinum Tier Sponsors</p>
+        <hr className="border-black dark:border-white"/>
+
+        {/* Platinum Sponsors Links */}
+        <div className="flex flex-row justify-center items-center sm:space-x-4 md:space-x-6 lg:space-x-10 space-x-10 mt-8 mb-8 z-5 px-3">
+          <a href="https://www.arista.com" target="_blank" rel="noopener noreferrer" className="w-48 relative md:w-36 sm:w-24 hover:transform hover:translate-y-[-5px] transition-transform duration-300" aria-label="Arista">
+            <Image
+              src={AristaLogo}
+              alt="Arista Logo"
+              layout="intrinsic"
+              objectFit="contain"
+              className="invert dark:invert-0"
+            />
+          </a>
+          <a href="https://www.thetradedesk.com" target="_blank" rel="noopener noreferrer" className="w-60 relative md:w-36 sm:w-24 hover:transform hover:translate-y-[-5px] transition-transform duration-300" aria-label="The Trade Desk">
+            {/* Dark Mode Logo */}
+            <Image
+              src={TheTradeDeskLogo}
+              alt="The Trade Desk Logo"
+              layout="intrinsic"
+              objectFit="contain"
+              className="hidden dark:block"
+            />
+            {/* Light Mode Logo */}
+            <Image
+              src={TheTradeDeskLogoDark}
+              alt="The Trade Desk Logo"
+              layout="intrinsic"
+              objectFit="contain"
+              className="dark:hidden"
+            />
+          </a>
+        </div>
+
+        {/* Gold Tier Sponsors */}
+        <div>
+          <p>Gold Tier Sponsors</p>
+          <hr className="border-black dark:border-white"/>
+
+          {/* Gold Sponsors Links */}
+          <div className="flex flex-row justify-center items-center space-x-8 mt-7 mb-5 z-5">
+            <a href="https://www.janestreet.com" target="_blank" rel="noopener noreferrer" className="w-40 relative md:w-36 sm:w-20 hover:transform hover:translate-y-[-5px] transition-transform duration-300" aria-label="Jane Street">
+              <Image
+                src={JaneStreetLogo}
+                alt="Jane Street Logo"
+                layout="intrinsic"
+                objectFit="contain"
+                className="invert dark:invert-0"
+              />
+            </a>
+            <a href="https://www.safetyculture.com" target="_blank" rel="noopener noreferrer" className="w-40 relative md:w-36 sm:w-20 hover:transform hover:translate-y-[-5px] transition-transform duration-300" aria-label="Safety Culture">
+              {/* Dark Mode Logo */}
+              <Image
+                src={SafetyCultureLogo}
+                alt="SafetyCulture Logo"
+                layout="intrinsic"
+                objectFit="contain"
+                className="hidden dark:block"
+              />
+              {/* Light Mode Logo */}
+              <Image
+                src={SafetyCultureLogoLight}
+                alt="SafetyCulture Logo"
+                layout="intrinsic"
+                objectFit="contain"
+                className="dark:hidden"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Tooltip/Tooltip.tsx b/frontend/src/components/Tooltip/Tooltip.tsx
index eed774048..429e7619d 100644
--- a/frontend/src/components/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/Tooltip/Tooltip.tsx
@@ -3,9 +3,29 @@ import { ReactNode } from "react";
 type TooltipProps = {
   children: ReactNode;
   tooltip?: string;
+  position?: "top" | "right" | "bottom" | "left";
 };
 
-export default function Tooltip({ children, tooltip }: TooltipProps) {
+export default function Tooltip({ children, tooltip, position = "right" }: TooltipProps) {
+  let containerClasses = "";
+  let arrowClasses = "";
+
+  switch (position) {
+    case "bottom":
+      containerClasses =
+        "absolute left-1/2 top-full transform -translate-x-1/2 mt-1";
+      arrowClasses =
+        "absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-full border-l-4 border-l-transparent border-r-4 border-r-transparent border-b-8 border-b-white dark:border-b-slate-800";
+      break;
+    case "right":
+      default:
+        containerClasses =
+          "absolute left-full top-1/2 transform -translate-y-1/2 ml-1";
+        arrowClasses =
+          "absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-full border-t-4 border-t-transparent border-b-4 border-b-transparent border-l-8 border-l-white dark:border-l-slate-800";
+        break;
+  }
+
   return (
     <div className='group relative inline-block'>
       {children}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ee037cf01..83718bcf9 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -25,7 +25,7 @@ module.exports = {
         "unilectives-subheadings": "#989898",
         "unilectives-placeholder": "#606060",
         "unilectives-tags": "#CCEBF6",
-        "unilectives-card": "#FAFAFA",
+        "unilectives-card": "#f6f6f6",
         "unilectives-light-blue": "#84CEE7",
         "unilectives-purple": "#B789E5",
         "unilectives-indigo": "#9BADE8",