diff --git a/app/account/components/MyAccount/MiniEvents.js b/app/account/components/MyAccount/MiniEvents.js
index c7473cf..4ee9dd3 100644
--- a/app/account/components/MyAccount/MiniEvents.js
+++ b/app/account/components/MyAccount/MiniEvents.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-const API_URL_PROD =
-  "https://api.ethicalspectacle.com/";
+const API_URL_PROD = "https://api.ethicalspectacle.com/";
 
 function MiniEvents() {
   const [events, setEvents] = useState([]);
@@ -38,37 +37,48 @@ function MiniEvents() {
   };
   return (
     <div className="bg-white p-5 py-10">
-      <h2 className="text-3xl font-bold text-gray-800 mb-6">Upcoming Events 📅</h2>
+      <h2 className="text-3xl font-bold text-gray-800 mb-6">
+        Upcoming Events 📅
+      </h2>
       {events.length > 0 ? (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {events.map((event, index) => (
-            <div key={index} className="border border-gray-300 rounded-lg p-4 flex flex-col">
-
-              <div className="flex justify-between items-apart"> 
-                <div className="block font-semibold text-xl text-left">{event.name}</div>
+            <div
+              key={index}
+              className="border border-gray-300 rounded-lg p-4 flex flex-col"
+            >
+              <div className="flex justify-between items-apart">
+                <div className="block font-semibold text-xl text-left">
+                  {event.name}
+                </div>
                 {event.url && (
-                  <a href={event.url} target="_blank" rel="noopener noreferrer" className="bg-white rounded-lg py-2 px-3 font-semibold mt-1 border border-black border-5">Sign Up :)</a>
+                  <a
+                    href={event.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-white rounded-lg py-2 px-3 font-semibold mt-1 border border-black border-5"
+                  >
+                    Sign Up :)
+                  </a>
                 )}
               </div>
 
-              <div className="text-sm text-gray-500 mt-2">{formatDate(event.date)}</div>
-              <div className="text-sm text-gray-500">{event.address}</div>
-
-              <div className="text-gray-600 mt-2">
-                {event.description}
+              <div className="text-sm text-gray-500 mt-2">
+                {formatDate(event.date)}
               </div>
+              <div className="text-sm text-gray-500">{event.address}</div>
 
-
-
+              <div className="text-gray-600 mt-2">{event.description}</div>
             </div>
           ))}
         </div>
       ) : (
-        <div className="text-gray-500">We'll post some events soon, miss you too😢</div>
+        <div className="text-gray-500">
+          We'll post some events soon, miss you too😢
+        </div>
       )}
     </div>
   );
-  
 }
 
 export default MiniEvents;
diff --git a/app/brand/page.jsx b/app/brand/page.jsx
new file mode 100644
index 0000000..3311a82
--- /dev/null
+++ b/app/brand/page.jsx
@@ -0,0 +1,131 @@
+import Image from "next/image";
+import whitelogo from "../assets/whitelogo.svg";
+
+function PrivacyPolicy() {
+  // Get the current date
+  const currentDate = new Date();
+
+  return (
+    <div className="bg-black h-[100vh] pt-40 px-10 grid grid-cols-2 max-md:grid-cols-1 gap-2 max-md:pt-10 max-md:px-5">
+      <div className="p-5 max-md:col-span-2 max-md:justify-self-center">
+        {/* <Image
+          src={whitelogo}
+          alt="Ethical Spectacle Research"
+          width={100}
+          height={100}
+          className="m-10"
+        /> */}
+        <h1 className="text-white mb-5 max-md:text-center">Privacy Policy</h1>
+        <h4 className="text-white max-md:text-center">Updated on {Date()}</h4>
+      </div>
+      <div
+        className="border-2 border-white p-5 overflow-auto"
+        style={{ maxHeight: "80vh" }}
+      >
+        <PrivacyPolicyText />
+      </div>
+    </div>
+  );
+}
+
+export default PrivacyPolicy;
+
+import React from "react";
+
+const PrivacyPolicyText = () => {
+  return (
+    <div className="text-white">
+      <p className="mb-4 text-white">
+        At Ethical Spectacle Research, we take your privacy seriously. This
+        privacy policy explains what personal data we collect, how we use and
+        protect it, and the rights you have concerning your personal
+        information.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2">Information We Collect</h2>
+      <p className="mb-4 text-white">
+        We may collect personal information directly from you, such as your
+        name, email address, and other contact details when you interact with
+        us. We may also collect usage data automatically through technologies
+        like cookies when you visit our website.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">
+        How We Use Your Information
+      </h2>
+      <p className="mb-2 text-white">
+        We use the information we collect for legitimate business purposes, such
+        as:
+      </p>
+      <ul className="list-disc pl-5 mb-4 text-white">
+        <li>
+          <p className="text-white">
+            Communicating with you about our research activities and findings
+          </p>
+        </li>
+        <li>
+          <p className="text-white">Improving our website and services</p>
+        </li>
+        <li>
+          <p className="text-white">
+            Analyzing usage trends to better understand our audience
+          </p>
+        </li>
+        <li>
+          <p className="text-white">Complying with legal obligations</p>
+        </li>
+      </ul>
+      <p className="mb-4 text-white">
+        We will only process your personal data if we have a lawful basis for
+        doing so, such as your consent, contractual necessity, or our legitimate
+        interests.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">
+        Data Sharing and Retention
+      </h2>
+      <p className="mb-4 text-white">
+        We do not sell your personal data to third parties. We may share your
+        information with trusted service providers who perform services on our
+        behalf, under strict confidentiality obligations. We retain your data
+        for only as long as necessary for our legitimate business purposes.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">Data Security</h2>
+      <p className="mb-4 text-white">
+        We implement reasonable technical, administrative, and physical
+        safeguards to protect your personal information from unauthorized
+        access, use, or disclosure. However, no method of transmission over the
+        internet or data storage is 100% secure.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">Your Rights</h2>
+      <p className="mb-4 text-white">
+        You may have certain rights regarding your personal data, such as the
+        rights of access, rectification, erasure, restriction of processing,
+        data portability, and objection to processing. Contact us to exercise
+        these rights.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">
+        Changes to this Policy
+      </h2>
+      <p className="mb-4 text-white">
+        We may update this privacy policy from time to time by posting a new
+        version on our website. You should check this page occasionally to
+        ensure you agree with any changes.
+      </p>
+
+      <h2 className="text-xl font-bold mb-2 text-white">Contact Us</h2>
+      <p className="mb-4 text-white">
+        If you have any questions about this privacy policy or our data
+        practices, please contact us at maximus@ethicalspectacle.com.
+      </p>
+
+      <p className="text-white">
+        By using our website and services, you consent to the terms of this
+        privacy policy.
+      </p>
+    </div>
+  );
+};
diff --git a/app/components/Footer.js b/app/components/Footer.js
index fd2331f..13890e6 100644
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -8,9 +8,9 @@ import Link from "next/link";
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col w-full">
-      <div className="bg-black grid md:grid-cols-5 p-10 max-md:p-5 gap-5 grid-cols-2 ">
-        <div className="p-5 max-md:col-span-2 max-md:justify-self-center">
+    <footer className=" flex flex-col w-full ">
+      <div className="bg-black grid md:grid-cols-4 px-10 pt-10 max-md:p-5 gap-5 grid-cols-1 ">
+        <div className="p-10 max-md:col-span-2 max-md:justify-self-center">
           <Image
             src={whitelogo}
             alt="Ethical Spectacle Research"
@@ -18,25 +18,31 @@ export default function Footer() {
             height={70}
           />
         </div>
-        
+
         <div>
           <h3 className="text-white text-xl my-2">Legals</h3>
-          <Link href="/">
+          <Link href="/brand">
             <p className="text-sm text-gray-400">Privacy Policy</p>
           </Link>
-          <Link href="/">
+          <Link href="/brand">
             <p className="text-sm text-gray-400">Terms & Conditions</p>
           </Link>
+          <Link href="/brand">
+            <p className="text-sm text-gray-400">Manifesto</p>
+          </Link>
         </div>
 
-        <p className="text-sm text-white max-md:col-span-2">
-          maximus@ethicalspectacle.com              
-        </p>
+        <div className="max-md:col-span-2">
+          <h3 className="text-white text-xl my-2">Contact</h3>
+          <p className="text-sm text-gray-400 max-md:col-span-2">
+            maximus@ethicalspectacle.com
+          </p>
+        </div>
 
         <div className="p-5 max-md:col-span-2 max-md:justify-self-center max-md:p-2">
           <h3 className="text-white text-xl my-2 max-md:hidden">Socials</h3>
           <div className="flex gap-5">
-            <Link href="/">
+            <Link href="https://www.linkedin.com/company/ethicalspectacle/">
               <Image
                 src={linkedinplain}
                 width={30}
@@ -45,7 +51,7 @@ export default function Footer() {
                 className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="/">
+            <Link href="https://www.instagram.com/ethical_spectacle/">
               <Image
                 src={instagramlogo}
                 width={30}
@@ -54,7 +60,7 @@ export default function Footer() {
                 className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="/">
+            <Link href="https://huggingface.co/ethical-spectacle">
               <Image
                 src={huggingfacelogo}
                 width={30}
@@ -63,7 +69,7 @@ export default function Footer() {
                 className="text-gray-400"
               ></Image>
             </Link>
-            <Link href="/">
+            <Link href="https://www.meetup.com/ethical-spectacle-research/">
               <Image
                 src={meetuplogo}
                 width={30}
@@ -76,13 +82,11 @@ export default function Footer() {
         </div>
       </div>
       <div className="block text-center items-center bg-black text-gray-400 py-5">
-          <p className="max-md:text-sm text-gray-400">
-            © 2024 Ethical Spectacle Research.
-          </p>
-          <p className="max-md:text-sm text-gray-400">
-            All rights reserved.
-          </p>
-        </div>
+        <p className="max-md:text-sm text-gray-400">
+          © 2024 Ethical Spectacle Research.
+        </p>
+        <p className="max-md:text-sm text-gray-400">All rights reserved.</p>
+      </div>
     </footer>
   );
 }
diff --git a/app/components/Home/BlackHorizontalLine.jsx b/app/components/Home/BlackHorizontalLine.jsx
new file mode 100644
index 0000000..1c4c366
--- /dev/null
+++ b/app/components/Home/BlackHorizontalLine.jsx
@@ -0,0 +1,7 @@
+function BlackHorizontalLine() {
+  return (
+    <div className="flex flex-row justify-start overflow-hidden h-15 items-center bg-black py-5"></div>
+  );
+}
+
+export default BlackHorizontalLine;
diff --git a/app/components/Home/Hero.js b/app/components/Home/Hero.js
index 1a10486..db53e76 100644
--- a/app/components/Home/Hero.js
+++ b/app/components/Home/Hero.js
@@ -4,44 +4,54 @@ import { IoMdArrowForward } from "react-icons/io";
 
 const Hero = () => {
   return (
-    <div className="bg-white">
+    <div className="bg-white sm:bg-black">
       <div className="scroll-container hide-scrollbar">
         <div className="h-72 w-full scroll-item md:px-20">
-          <h1 className="inline-block border border-black border-4 p-3 py-2 m-2 ml-10 mt-6 text-5xl whitespace-nowrap md:ml-20 md:mt-10">Ethical Spectacle Research ;)</h1>
-          <p className="text-black text-2xl p-5 pb-0 m-2 mt-5 leading-snug md:ml-10">Developers that write *clean* code.</p>
-          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden"><PiHandSwipeLeftDuotone className="mt-1 text-5xl"/>Swipe</h2>
-          <h2 className="flex flex-row justify-end pr-5 mr-10 text-xl md:flex hidden"><PiHandSwipeLeftDuotone className="mt-1 text-5xl"/>Scroll</h2>
+          <h1 className="inline-block border-black border-4 p-3 py-2 m-2 ml-10 mt-6 text-5xl whitespace-nowrap md:ml-20 md:mt-10 sm:text-pink-300 sm:border-white text-pink-300">
+            Ethical Spectacle Research ;)
+          </h1>
+          <p className="text-black text-2xl p-5 pb-0 m-2 mt-5 leading-snug md:ml-10 sm:text-white">
+            Developers that write *clean* code.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden hidden">
+            <PiHandSwipeLeftDuotone className="mt-1 text-5xl" />
+            Swipe
+          </h2>
+          <h2 className="flex flex-row justify-end pt-5 pr-5 mr-10 text-xl md:flex">
+            <PiHandSwipeLeftDuotone className="mt-1 text-5xl" />
+            Scroll
+          </h2>
         </div>
         <div className="h-72 w-full md:w-1/2 scroll-item flex flex-col justify-end p-3 py-2">
-          <p className="text-2xl font-semibold mb-2">Research.</p>
-          <p className="mb-5">
+          <p className="text-2xl font-semibold mb-2 sm:text-white">Research.</p>
+          <p className="mb-5 sm:text-white">
             We do AI/ML research in nuanced contexts, publishing research papers
             and open source tools for developers.
           </p>
         </div>
         <div className="h-72 w-full md:w-1/2 scroll-item flex flex-col justify-end pl-5 p-3 py-2 md:px-20">
           {/* can someone add something here, fill the space, top right aligned */}
-          <p className="text-2xl font-semibold mb-2 mt-2">Community.</p>
-          <p className="mb-2">
+          <p className="text-2xl font-semibold mb-2 mt-2 sm:text-white">
+            Community.
+          </p>
+          <p className="mb-2 sm:text-white">
             We run events for the developers and entrepreneurs of Phoenix.
           </p>
-          <p className="mb-5">
+          <p className="mb-5 sm:text-white">
             Climb our leaderboard by attending events, winning hackathons,
             taking leadership roles, etc.
           </p>
         </div>
-        <a href="/account" className="h-72 w-full md:w-1/2 scroll-item p-3 py-2 bg-black flex">
-          <h1 className="text-5xl font-semibold mb-2 mt-2 text-white flex-col justify-end md:ml-5">Become a Member.</h1>
-          <div className="flex flex-col justify-end text-white text-8xl md:ml-32"><IoMdArrowForward /></div>
-        </a>
-      </div>
-
-      {/* Developer Leaderboard Banner */}
-      <div className="flex flex-row justify-start overflow-hidden h-15 items-center bg-black py-3">
-        <a href="/leaderboard">
-          <h1 className="whitespace-nowrap text-white text-lg py-3 px-2 ml-5 text-right">
-            🤖 check our leaderboard —&gt;
+        <a
+          href="/account"
+          className="h-72 w-full md:w-1/2 scroll-item p-3 py-2 bg-black flex"
+        >
+          <h1 className="text-5xl font-semibold mb-2 mt-2 text-white flex-col justify-end md:ml-5">
+            Become a Member.
           </h1>
+          <div className="flex flex-col justify-end text-white text-8xl md:ml-32">
+            <IoMdArrowForward />
+          </div>
         </a>
       </div>
     </div>
diff --git a/app/components/Home/LeaderBoardCheckOut.js b/app/components/Home/LeaderBoardCheckOut.js
new file mode 100644
index 0000000..606e7cd
--- /dev/null
+++ b/app/components/Home/LeaderBoardCheckOut.js
@@ -0,0 +1,13 @@
+function LeaderBoardCheckOut() {
+  return (
+    <div className="flex flex-row justify-start overflow-hidden h-15 items-center bg-black py-3">
+      <a href="/leaderboard">
+        <h1 className="whitespace-nowrap text-white text-lg py-3 px-10 ml-5 text-right hover:text-pink-300">
+          🤖 check our leaderboard —&gt;
+        </h1>
+      </a>
+    </div>
+  );
+}
+
+export default LeaderBoardCheckOut;
diff --git a/app/components/Home/Partners.js b/app/components/Home/Partners.js
index 5e6d118..309991f 100644
--- a/app/components/Home/Partners.js
+++ b/app/components/Home/Partners.js
@@ -1,51 +1,50 @@
 import React from "react";
 import { PiHandSwipeLeftDuotone } from "react-icons/pi";
+import { IoMdArrowForward } from "react-icons/io";
 
 const Partners = () => {
   return (
     <div className="bg-white">
-      <div className="scroll-container hide-scrollbar flex md:justify-center justify-start">
-
+      <div className="scroll-container hide-scrollbar flex flex-row justify-start">
         {/* Title slide */}
-        <div className="w-96 scroll-item bg-black">
+        <div className="w-full pl-48 bg-black">
           <div className="flex flex-col h-full justify-end">
-            <h1 className="mt-5 pb-5 text-5xl font-semibold text-white text-right pr-5 pb-5 mb-5">
+            <h1 className="mt-5 text-5xl font-semibold text-white text-right pr-5 pb-5 mb-5">
               Partners.❤️
             </h1>
+            <h2 className="flex flex-row justify-end pr-5 mr-10 text-xl md:flex ">
+              <PiHandSwipeLeftDuotone className="my-3 text-5xl text-white sm:hidden" />
+              Scroll
+            </h2>
           </div>
         </div>
 
-        {/* Slide for AZVC */}
-        <div className="w-96 scroll-item border border-black">
-          <div className="px-5 pt-5">
-            <img
-              src="/assets/AZVC_Transparent.png"
-              alt="AZVC Logo"
-              className="h-32 mx-auto"
-            />
-            <h2 className="text-center mt-5 text-xl font-semibold">AZVC</h2>
-            <p className="text-center mt-1">
-              The largest venture capital fund in Arizona.
-            </p>
+        {comapnyPartners.map((partner) => (
+          <div
+            key={partner.name}
+            className="scroll-item border border-black p-3"
+          >
+            <div className="px-5 pt-5">
+              <img
+                src={partner.imageSource}
+                alt={partner.alt}
+                className="h-32 mx-auto"
+              />
+              <h2 className="text-center mt-5 text-xl font-semibold">
+                {partner.name}
+              </h2>
+              <p className="text-center mt-1">{partner.description}</p>
+            </div>
           </div>
-        </div>
+        ))}
 
-        {/* Slide for Global Career Network */}
-        <div className="w-96 scroll-item border border-black border-r-2">
-          <div className="p-5">
-            <img
-              src="/assets/global_career_network.png"
-              alt="Global Career Network Logo"
-              className="h-32 mx-auto"
-            />
-            <h2 className="text-center mt-5 text-xl font-semibold">
-              Global Career Network
-            </h2>
-            <p className="text-center mt-1">
-              The second largest student organization at ASU.
-            </p>
-            <h2 className="flex flex-row justify-end pr-5 text-xl"></h2>
-          </div>
+        <div className="w-full bg-black flex flex-row justify-between items-center p-5">
+          <h1 className="text-4xl font-semibold text-white">
+            Partner with Us.
+          </h1>
+          <a href="/account" className="flex items-center">
+            <IoMdArrowForward className="text-white text-8xl" />
+          </a>
         </div>
       </div>
     </div>
@@ -53,3 +52,18 @@ const Partners = () => {
 };
 
 export default Partners;
+
+const comapnyPartners = [
+  {
+    name: "AZVC",
+    description: "The largest venture capital fund in Arizona.",
+    imageSource: "/assets/AZVC_Transparent.png",
+    alt: "AZVC Logo",
+  },
+  {
+    name: "Global Career Network",
+    description: "The second largest student organization at ASU.",
+    imageSource: "/assets/global_career_network.png",
+    alt: "Global Career Network Logo",
+  },
+];
diff --git a/app/components/Home/ResearchProjectAgents.js b/app/components/Home/ResearchProjectAgents.js
index 3f9783b..b0af148 100644
--- a/app/components/Home/ResearchProjectAgents.js
+++ b/app/components/Home/ResearchProjectAgents.js
@@ -3,31 +3,37 @@ import { PiHandSwipeLeftDuotone } from "react-icons/pi";
 
 const AgentsProjectCarousel = () => {
   return (
-    <div className="bg-white">
+    <div className="bg-white sm:bg-black sm:py-10">
       <div className="scroll-container hide-scrollbar flex md:justify-center justify-start">
-        <div className="w-96 scroll-item border border-black border-l-2 px-5 pt-5">
-          <h1 className="mt-2 font-bold">Project 002</h1>
+        <div className="w-96 scroll-item border border-black sm:border-white border-l-2 px-5 pt-5 sm:text-white">
+          <h1 className="mt-2">Project 002</h1>
           <h2 className="mt-3">Agent Network Effects</h2>
-          <p className="pl-5 mt-2">We're studying the ability of LLM agents to police network effects.</p>
-          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden"><PiHandSwipeLeftDuotone className="mt-5 text-4xl"/></h2>
+          <p className="pl-5 mt-2 sm:text-white">
+            We're studying the ability of LLM agents to police network effects.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden">
+            <PiHandSwipeLeftDuotone className="mt-5 text-4xl" />
+          </h2>
         </div>
 
-        <div className="w-96 scroll-item border border-black  p-5">
-          <p className="text-2xl font-semibold mb-2">Research.</p>
-          <p className="mb-5">
+        <div className="w-96 scroll-item border border-black sm:border-white sm:text-white p-5">
+          <p className="text-2xl font-semibold mb-2 sm:text-white">Research.</p>
+          <p className="mb-5 sm:text-white">
             Platform: Environment for LLM agents to interact with eachother at
             scale, spreading ideas.
           </p>
-          <p className="mb-5">
+          <p className="mb-5 sm:text-white">
             Paper: Can a network of LLM agents effectively filter out toxic
             ideas, while promoting good ones?
           </p>
         </div>
 
-        <div className="w-96 scroll-item border border-black border-r-2 p-5">
+        <div className="w-96 scroll-item border border-black sm:border-white sm:text-white border-r-2 p-5">
           {/* can someone add something here, fill the space, top right aligned */}
-          <p className="text-2xl font-semibold mb-2">Hackathon.</p>
-          <p className="mb-5">
+          <p className="text-2xl font-semibold mb-2 sm:text-white">
+            Hackathon.
+          </p>
+          <p className="mb-5 sm:text-white">
             Scheduled for Oct. 2024, participants get 48 hours to build a
             front-end application that interacts with our API, designing the
             logic for when/which agents interact. A demo of the applicaiton will
diff --git a/app/components/Home/ResearchProjectBias.js b/app/components/Home/ResearchProjectBias.js
index 1566956..cf28ad5 100644
--- a/app/components/Home/ResearchProjectBias.js
+++ b/app/components/Home/ResearchProjectBias.js
@@ -4,28 +4,35 @@ import { PiHandSwipeLeftDuotone } from "react-icons/pi";
 
 const BiasProjectCarousel = () => {
   return (
-    <div className="bg-white">
+    <div className="bg-white sm:bg-black sm:py-10">
       <div className="scroll-container hide-scrollbar flex md:justify-center justify-start">
-        <div className="w-full md:w-96 md:h-80 scroll-item border border-black border-l-2 px-5 pt-5">
+        <div className="w-full md:w-96 md:h-80 scroll-item border sm:border-white border-black sm:text-white border-l-2 px-5 pt-5">
           <h1 className="mt-2 md:mt-5">Project 001</h1>
           <h2 className="mt-3">Bias Detection</h2>
-          <p className="pl-5 mt-2">A text classification model trained to detect generalizations, unfairness, and stereotypes in text.</p>
-          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden"><PiHandSwipeLeftDuotone className="mt-3 text-4xl"/></h2>
+          <p className="pl-5 mt-2 sm:text-white">
+            A text classification model trained to detect generalizations,
+            unfairness, and stereotypes in text.
+          </p>
+          <h2 className="flex flex-row justify-end pr-5 text-xl md:hidden">
+            <PiHandSwipeLeftDuotone className="mt-3 text-4xl" />
+          </h2>
         </div>
-        <div className="w-full md:w-96 md:h-80 scroll-item border border-black  p-5">
-          <p className="text-2xl font-semibold mb-2">Research.</p>
-          <p className="mb-5">
+        <div className="w-full md:w-96 md:h-80 scroll-item sm:border-white border border-black  p-5">
+          <p className="text-2xl font-semibold mb-2 sm:text-white">Research.</p>
+          <p className="mb-5 sm:text-white">
             Model: Open source bias/fairness text classification model.
           </p>
-          <p className="mb-5">
+          <p className="mb-5 sm:text-white">
             Paper: Model architecture documentation and preformance benchmarks
             relative to existing models.
           </p>
         </div>
-        <div className="w-full md:w-96 md:h-80 scroll-item border border-black border-r-2 p-5">
+        <div className="w-full md:w-96 md:h-80 scroll-item sm:border-white border  border-black border-r-2 p-5">
           {/* can someone add something here, fill the space, top right aligned */}
-          <p className="text-2xl font-semibold mb-2">Hackathon.</p>
-          <p className="mb-5">
+          <p className="text-2xl font-semibold mb-2 sm:text-white">
+            Hackathon.
+          </p>
+          <p className="mb-5 sm:text-white">
             Scheduled for Sept. 2024, hackers will have 48 hours to implement
             the bias detection model in a user-ready demo, to be pitched to a
             panel of industry leader judges.
diff --git a/app/components/NavBar.js b/app/components/NavBar.js
index fc4bac3..9466589 100644
--- a/app/components/NavBar.js
+++ b/app/components/NavBar.js
@@ -25,8 +25,8 @@ const Navbar = () => {
 
   return (
     <nav
-      className={`bg-black sticky top-0 z-50 ${
-        position === 0 && `drop-shadow-xl`
+      className={`bg-black sticky w-screen top-0 z-20 border-b-2 ${
+        position === 0 && ``
       }`}
     >
       <div className="w-full">
@@ -41,7 +41,7 @@ const Navbar = () => {
           </Link>
 
           {/* Primary Navigation - Hidden on mobile */}
-          <div className="hidden md:flex items-center space-x-10 text-white gap-10 mr-10">
+          <div className="hidden md:flex items-center space-x-10 text-white gap-2 mr-10">
             <a href="/" className="text-xl hover:text-pink-300">
               Home
             </a>
@@ -51,12 +51,27 @@ const Navbar = () => {
             <a href="/events" className="text-xl hover:text-pink-300">
               Events
             </a>
-            <a href="/account" className="text-xl">Profile</a>
+            <a href="/account" className="text-xl hover:text-pink-300">
+              Profile
+            </a>
+            <a href="/sponsors" className="text-xl hover:text-pink-300">
+              Sponsors
+            </a>
             {/* <a href="/about" className="text-xl">About Us</a> */}
             {isLoggedIn ? (
-              <button onClick={handleLogoutNav} className="bg-white py-1 px-3 mr-5 rounded text-black hover:bg-pink-300">Sign Out</button>
+              <button
+                onClick={handleLogoutNav}
+                className="bg-white py-1 px-3 mr-5 rounded text-black hover:bg-pink-300"
+              >
+                Sign Out
+              </button>
             ) : (
-              <Link href="/account" className="bg-white py-1 px-3 mr-5 rounded text-black hover:bg-pink-300">Join :P</Link>
+              <Link
+                href="/account"
+                className="bg-white py-1 px-3 mr-5 rounded text-black hover:bg-pink-300"
+              >
+                Join :P
+              </Link>
             )}
           </div>
           {/* primary nav with active underline, cant get it to build but it works in dev */}
@@ -86,7 +101,11 @@ const Navbar = () => {
               </Link>
             )}
             <button onClick={() => setIsOpen(!isOpen)} className="mr-5 z-50">
-              {isOpen ? <AiOutlineClose className="h-8 w-8 text-black" /> : <AiOutlineMenu className="h-8 w-8 text-white" />}
+              {isOpen ? (
+                <AiOutlineClose className="h-8 w-8 text-black" />
+              ) : (
+                <AiOutlineMenu className="h-8 w-8 text-white" />
+              )}
             </button>
           </div>
         </div>
@@ -94,8 +113,14 @@ const Navbar = () => {
 
       {/* Mobile Menu Overlay */}
       {isOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50" onClick={() => setIsOpen(false)}>
-          <div className="absolute right-0 top-0 h-full w-3/4 bg-white flex flex-col z-50" onClick={(e) => e.stopPropagation()}>
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50"
+          onClick={() => setIsOpen(false)}
+        >
+          <div
+            className="absolute right-0 top-0 h-full w-3/4 bg-white flex flex-col z-50"
+            onClick={(e) => e.stopPropagation()}
+          >
             <h1 className="text-4xl font-semibold p-4 h-18 mt-3 mb-1">Menu</h1>
 
             {/* Navigation Links */}
diff --git a/app/globals.css b/app/globals.css
index 65e1b6e..c7dd88d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -79,7 +79,7 @@ p {
 }
 
 .scroll-item {
-  flex: 0 0 auto;  
+  flex: 0 0 auto;
 }
 
 /* Hides scrollbar but allows scrolling */
diff --git a/app/layout.js b/app/layout.js
index b75054e..4509a8f 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,36 +1,34 @@
 import "./globals.css";
 import NavBar from "./components/NavBar";
 import Footer from "./components/Footer";
-import { AuthProvider } from './context/AuthContext';
+import { AuthProvider } from "./context/AuthContext";
 import { Rethink_Sans } from "next/font/google";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 
-const rethink_sans = Rethink_Sans({  
+const rethink_sans = Rethink_Sans({
   weights: [400, 600, 700],
-  subsets: ["latin"]  
+  subsets: ["latin"],
 });
 
 export const metadata = {
   title: "Ethical Spectacle Research",
-  description: "A community of researchers, developers, and entrepreneurs coming together at events to further tech ethics.",
+  description:
+    "A community of researchers, developers, and entrepreneurs coming together at events to further tech ethics.",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={rethink_sans.className}>
-          <AuthProvider >
-              <div className="z-40">
-                <NavBar />
-              </div>
-                {children}
-              <Footer />
-          </AuthProvider >
-          <Analytics/>
-          <SpeedInsights/>
+        <AuthProvider>
+          <NavBar />
+          {children}
+          <Footer />
+        </AuthProvider>
+        <Analytics />
+        <SpeedInsights />
       </body>
     </html>
   );
 }
-
diff --git a/app/leaderboard/page.js b/app/leaderboard/page.js
index cf957f4..d4f647e 100644
--- a/app/leaderboard/page.js
+++ b/app/leaderboard/page.js
@@ -1,8 +1,8 @@
-'use client';
-import React, { useState, useEffect } from 'react';
-import { FaGlobe, FaGithub, FaLinkedin } from 'react-icons/fa';
-import Tippy from '@tippyjs/react';
-import 'tippy.js/dist/tippy.css';
+"use client";
+import React, { useState, useEffect } from "react";
+import { FaGlobe, FaGithub, FaLinkedin } from "react-icons/fa";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
 
 export default function Rankings() {
   const [rankings, setRankings] = useState([]);
@@ -10,32 +10,84 @@ export default function Rankings() {
   const [error, setError] = useState(null);
   const API_URL_PROD = "https://api.ethicalspectacle.com/";
   const badgeDetails = {
-    // basic 
+    // basic
     developer: { emoji: "💻", description: "Developer" },
     entrepreneur: { emoji: "🚀", description: "Entrepreneur" },
 
     // internal team
-    director: { emoji: "🤖", description: "Director: One of our core team members!!!" },
-    "event host": { emoji: "🎤", description: "Event Host: This member invested in all of you by hosting an event. Want to host? Suggest an event on your profile page." },
-    researcher: { emoji: "🔬", description: "Researcher: Joined one of our research projects. Apply on your profile page." },
+    director: {
+      emoji: "🤖",
+      description: "Director: One of our core team members!!!",
+    },
+    "event host": {
+      emoji: "🎤",
+      description:
+        "Event Host: This member invested in all of you by hosting an event. Want to host? Suggest an event on your profile page.",
+    },
+    researcher: {
+      emoji: "🔬",
+      description:
+        "Researcher: Joined one of our research projects. Apply on your profile page.",
+    },
 
     // community team
-    volunteer: { emoji: "🤝", description: "Volunteer: Badge given for each volunteer opportunity seized." },
-    mentor: { emoji: "🧠", description: "Mentor: Guided the next generation of geniuses at our first hackathon" },
-    speaker: { emoji: "🗣️", description: "Speaker: Shared knowledge at one of our events." },
-    judge: { emoji: "⚖️", description: "Judge: Expert in their field, this leader evaluated the team demos at a hackathon." },
-    sponsor: { emoji: "🌟", description: "Sponsor: Helped support our events." },
+    volunteer: {
+      emoji: "🤝",
+      description:
+        "Volunteer: Badge given for each volunteer opportunity seized.",
+    },
+    mentor: {
+      emoji: "🧠",
+      description:
+        "Mentor: Guided the next generation of geniuses at our first hackathon",
+    },
+    speaker: {
+      emoji: "🗣️",
+      description: "Speaker: Shared knowledge at one of our events.",
+    },
+    judge: {
+      emoji: "⚖️",
+      description:
+        "Judge: Expert in their field, this leader evaluated the team demos at a hackathon.",
+    },
+    sponsor: {
+      emoji: "🌟",
+      description: "Sponsor: Helped support our events.",
+    },
 
     // sustainability hackathon ones
-    ecohacker: { emoji: "🌱", description: "Ecohacker: Participated in our inaugural hackathon!! It's the sustainability for me. April 5-7, 2024." },
-    eco_first_place: { emoji: "🥇", description: "FIRST PLACE!! Won 1st place at our sustainability hackathon." },
-    eco_second_place: { emoji: "🥈", description: "Second Place!! Won 2nd place at our sustainability hackathon." },
-    eco_third_place: { emoji: "🥉", description: "Third Place! Won 3rd place at our sustainability hackathon." },
-    eco_creative: { emoji: "🎨", description: "Most Creative: Won the most-creative award at our sustainability hackathon." },
+    ecohacker: {
+      emoji: "🌱",
+      description:
+        "Ecohacker: Participated in our inaugural hackathon!! It's the sustainability for me. April 5-7, 2024.",
+    },
+    eco_first_place: {
+      emoji: "🥇",
+      description:
+        "FIRST PLACE!! Won 1st place at our sustainability hackathon.",
+    },
+    eco_second_place: {
+      emoji: "🥈",
+      description:
+        "Second Place!! Won 2nd place at our sustainability hackathon.",
+    },
+    eco_third_place: {
+      emoji: "🥉",
+      description:
+        "Third Place! Won 3rd place at our sustainability hackathon.",
+    },
+    eco_creative: {
+      emoji: "🎨",
+      description:
+        "Most Creative: Won the most-creative award at our sustainability hackathon.",
+    },
 
     // random event ones
-    attendee: { emoji: "👥", description: "Attendee: Attended one of our events." },
-    winner: { emoji: "🏆", description: "Winner: Won a hackathon!!!" }
+    attendee: {
+      emoji: "👥",
+      description: "Attendee: Attended one of our events.",
+    },
+    winner: { emoji: "🏆", description: "Winner: Won a hackathon!!!" },
   };
 
   useEffect(() => {
@@ -43,7 +95,7 @@ export default function Rankings() {
       try {
         const response = await fetch(`${API_URL_PROD}/get_rankings`);
         if (!response.ok) {
-          throw new Error('Failed to fetch rankings');
+          throw new Error("Failed to fetch rankings");
         }
         const data = await response.json();
         const rankingsData = JSON.parse(data);
@@ -58,19 +110,35 @@ export default function Rankings() {
     fetchRankings();
   }, []);
 
-  if (loading) return <div className="text-center text-gray-600">Loading...</div>;
-  if (error) return <div className="text-center text-red-500">Error: {error}</div>;
-  
+  if (loading)
+    return (
+      <div className="flex w-screen justify-center items-center min-h-screen content-center">
+        <svg
+          class="animate-spin h-10 w-10 mr-5 pt-10 bg-black"
+          viewBox="0 0 24 24"
+        ></svg>
+        <h2 className="font-lg">Loading ...</h2>
+      </div>
+    );
+  if (error)
+    return <div className="text-center text-red-500">Error: {error}</div>;
+
   return (
     <div className="min-h-screen">
       <div className="px-5 py-10 md:px-48">
         <h1 className="text-4xl font-bold text-black">Leaderboard 🧠</h1>
-        <p className="mt-3 text-gray-500 text-md">Our top developers get invites to exclusive events, free shwag, and recruited through our network.</p>
+        <p className="mt-3 text-gray-500 text-md">
+          Our top developers get invites to exclusive events, free shwag, and
+          recruited through our network.
+        </p>
       </div>
-      
+
       <div className="w-full">
         {rankings.map((ranking, index) => (
-          <div key={index} className="bg-white py-6 px-8 md:px-48 border border-black border-3 border-b-0">
+          <div
+            key={index}
+            className="bg-white py-6 px-8 md:px-48 border border-black border-3 border-b-0"
+          >
             <div className="flex justify-between items-center">
               <span>
                 <span className="text-gray-500 text-lg">{`#${index + 1}`}</span>
@@ -80,21 +148,45 @@ export default function Rankings() {
             </div>
             <div className="flex justify-between items-center mt-2">
               <div className="flex space-x-2">
-                {ranking.badges.split(', ').map((badge, badgeIndex) => {
+                {ranking.badges.split(", ").map((badge, badgeIndex) => {
                   const badgeInfo = badgeDetails[badge];
                   return badgeInfo ? (
                     <Tippy key={badgeIndex} content={badgeInfo.description}>
                       <span className="text-2xl">{badgeInfo.emoji}</span>
                     </Tippy>
                   ) : (
-                    <span key={badgeIndex} className="text-xs text-gray-600"></span> // if it's not in the badgeDetails object, just don't show it
+                    <span
+                      key={badgeIndex}
+                      className="text-xs text-gray-600"
+                    ></span> // if it's not in the badgeDetails object, just don't show it
                   );
                 })}
               </div>
               <div className="flex space-x-2">
-                {ranking.website && <a href={ranking.website} className="text-xl text-gray-500 hover:text-pink-400"><FaGlobe /></a>}
-                {ranking.github && <a href={ranking.github} className="text-xl text-gray-500 hover:text-gray-700"><FaGithub /></a>}
-                {ranking.linkedin && <a href={ranking.linkedin} className="text-xl text-gray-500 hover:text-gray-700"><FaLinkedin /></a>}
+                {ranking.website && (
+                  <a
+                    href={ranking.website}
+                    className="text-xl text-gray-500 hover:text-pink-400"
+                  >
+                    <FaGlobe />
+                  </a>
+                )}
+                {ranking.github && (
+                  <a
+                    href={ranking.github}
+                    className="text-xl text-gray-500 hover:text-gray-700"
+                  >
+                    <FaGithub />
+                  </a>
+                )}
+                {ranking.linkedin && (
+                  <a
+                    href={ranking.linkedin}
+                    className="text-xl text-gray-500 hover:text-gray-700"
+                  >
+                    <FaLinkedin />
+                  </a>
+                )}
               </div>
             </div>
           </div>
@@ -102,4 +194,4 @@ export default function Rankings() {
       </div>
     </div>
   );
-};
\ No newline at end of file
+}
diff --git a/app/page.js b/app/page.js
index d98e9d0..dcc5dac 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,16 +1,20 @@
-'use client';
-import React from 'react';
-import Hero from './components/Home/Hero';
-import PicsCarousel from './components/Home/PicsCarousel';
-import BiasProjectCarousel from './components/Home/ResearchProjectBias';
-import AgentsProjectCarousel from './components/Home/ResearchProjectAgents';
-import Partners from './components/Home/Partners';
+"use client";
+import React from "react";
+import Hero from "./components/Home/Hero";
+import PicsCarousel from "./components/Home/PicsCarousel";
+import BiasProjectCarousel from "./components/Home/ResearchProjectBias";
+import AgentsProjectCarousel from "./components/Home/ResearchProjectAgents";
+import Partners from "./components/Home/Partners";
+import LeaderBoardCheckOut from "./components/Home/LeaderBoardCheckOut";
+import BlackHorizontalLine from "./components/Home/BlackHorizontalLine";
 
 const Home = () => {
   return (
     <div>
       <Hero />
+      <LeaderBoardCheckOut />
       <PicsCarousel />
+      <BlackHorizontalLine />
       <BiasProjectCarousel />
       <AgentsProjectCarousel />
       <Partners />
diff --git a/app/sponsors/page.jsx b/app/sponsors/page.jsx
new file mode 100644
index 0000000..30197ed
--- /dev/null
+++ b/app/sponsors/page.jsx
@@ -0,0 +1,87 @@
+import { IoMdArrowForward } from "react-icons/io";
+import { FaCheck } from "react-icons/fa";
+
+export default function Sponsors() {
+  return (
+    <div className="flex flex-col bg-black min-h-screen justify-center items-center pt-10">
+      <h1 className="text-white text-center p-5">Sponsorship Packages 💰</h1>
+
+      <h4 className="text-white text-center">
+        Unlock instant access to our special products and perks
+      </h4>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-20 max-md:mx-5 mx-16">
+        {packages.map((el, index) => (
+          <SponsorshipPackage
+            key={index}
+            name={el.name}
+            description={el.description}
+            access={el.access}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SponsorshipPackage({ name, description, access }) {
+  const accessPoints = access.split(",").map((item, index) => item.trim());
+
+  return (
+    <div className="flex flex-col bg-white text-center p-4 relative h-full">
+      <div className="bg-black w-full mb-5">
+        <h2 className="p-5 text-white">{name}</h2>
+      </div>
+      <h3 className="mt-15 py-5 text-[22px] text-pink-500">{description}</h3>
+
+      <hr className="bg-black-800 h-1 w-full my-2"></hr>
+
+      <div className="flex flex-col flex-grow">
+        <p className="mt-5 text-left text-[18px]">You will have access to:</p>
+        <ul className="text-left mt-5 list-disc list-inside">
+          {accessPoints.map((point, index) => (
+            <li key={index} className="flex items-start text-[16px] py-2">
+              <FaCheck className="text-green-500 mr-2 mt-1" />{" "}
+              {/* Custom marker */}
+              <span>{point}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <a
+        href="/"
+        className="flex flex-row items-center bg-black p-2 mt-3 justify-center"
+      >
+        <p className="mr-2 text-white">Learn More</p>
+        <IoMdArrowForward className="text-2xl text-white" />
+      </a>
+    </div>
+  );
+}
+
+const packages = [
+  {
+    name: "Titanium 💎",
+    description: "$1M+ Donated",
+    access:
+      "Brand Recognition: Extensive, Logo on all material, Branded hackathon challenges, Recruitment Access: Premium, Access to all resume and profile, Dedicated recruitment booth, Thought leadership and Engagement: Full, Keynote speaking slot, Speaking slot during sessions, Access during the hackathon, Networking opportunities: VIP, VIP networking events, Participant networking sessions, Market intelligence and insights: Comprehensive, Detailed data and insights, Early access to prototypes and solutions, Customized sponsorship packages, CSR Impact and Community Engagement",
+  },
+  {
+    name: "Platinum 🏆",
+    description: "$100,000+ Donated",
+    access:
+      "Brand Recognition: Significant, Logo on all material, Branded hackathon challenges, Recruitment Access: Enhanced, Access to all resume and profile, Dedicated recruitment booth, Thought leadership and Engagement: Major, Speaking slot during sessions, Access during the hackathon, Networking opportunities: High, VIP networking events, Participant networking sessions, Market intelligence and insights, Early access to prototypes and solutions, Customized sponsorship packages, CSR Impact and Community Engagement",
+  },
+  {
+    name: "Gold 🏅",
+    description: "$10,000+ Donated",
+    access:
+      "Brand Recognition: Visible, Logo on all material, Recruitment Access: Standard, Access to all resume and profile, Thought leadership and Engagement: Moderate, Access during the hackathon, Networking opportunities: Standard, Participant networking sessions, Market intelligence and insights, Customized sponsorship packages, CSR Impact and Community Engagement",
+  },
+  {
+    name: "Silver 🪙",
+    description: "$1,000+ Donated",
+    access:
+      "Brand Recognition: Basic, Logo on all material, Recruitment Access: Basic, Access to all resume and profile (Summary Only), Thought leadership and Engagement: Basic,  Networking opportunities: Basic, Participant networking sessions, Market intelligence and insights, Customized sponsorship packages, CSR Impact and Community Engagement",
+  },
+];
diff --git a/public/HomePagePics/manifesto.png b/public/HomePagePics/manifesto.png
new file mode 100644
index 0000000..c23b36b
Binary files /dev/null and b/public/HomePagePics/manifesto.png differ