diff --git a/app/(pages)/_components/Footer/Footer.tsx b/app/(pages)/_components/Footer/Footer.tsx
index 53cbd90..84374e1 100644
--- a/app/(pages)/_components/Footer/Footer.tsx
+++ b/app/(pages)/_components/Footer/Footer.tsx
@@ -24,15 +24,16 @@ export default function Footer({ variant = 'about-us' }: FooterProps) {
   const logoStyles =
     'h-6 text-white transition hover:text-gray-300 break-400:h-7 md:h-8 lg:h-8 xl:h-10 2xl:h-15';
 
-  const bgColor = variant === 'index' ? 'bg-[#080022] z-[-1]' : 'bg-[#080022]';
+  const isIndex = variant === 'index';
+  const bgColor = isIndex ? 'bg-[#080022]' : 'bg-[#11043F]';
 
   return (
-    <footer className={`relative z-10 flex w-full h-70 flex-col ${bgColor}`}>
+    <footer className={`relative flex w-full h-70 flex-col z-10 ${bgColor}`}>
       {/* Content Container */}
       <div className="mx-auto mt-[20%] flex w-3/4 flex-col items-center justify-around gap-8 break-400:mt-[7%] break-625:gap-12 md:mt-[7%] lg:relative lg:my-[5%] lg:flex-row lg:justify-between lg:gap-0 lg:px-0">
         {/* HackDavis Logo */}
         <div
-          className={`flex w-full flex-row items-center justify-center gap-4 lg:w-1/3 ${bgColor}`}
+          className={`flex w-full flex-row items-center justify-center gap-4 lg:w-1/3 z-10 ${bgColor}`}
         >
           <Image
             src="/Footer/hdLogoWhite.svg"
diff --git a/app/(pages)/about-us/_components/Hero/Hero.tsx b/app/(pages)/about-us/_components/Hero/Hero.tsx
index 0040a21..c21d793 100644
--- a/app/(pages)/about-us/_components/Hero/Hero.tsx
+++ b/app/(pages)/about-us/_components/Hero/Hero.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 
 export default function Hero() {
   return (
-    <div className="font-[var(--font-metropolis)] relative isolate w-full pb-20 md:pb-5 bg-white">
+    <div className="font-[var(--font-metropolis)] relative isolate w-full pb-20 md:pb-5">
       <div className="relative w-full">
         <div className="absolute inset-0 overflow-hidden z-0">
           <div className="absolute inset-0 bg-[linear-gradient(225deg,_#3E3A95_0%,_#24175F_8%,_#11043F_20%)] bg-[length:100%_100%] bg-[position:100%_0%] bg-no-repeat [clip-path:polygon(0_0,100%_0,100%_70%,0_95%)]" />
diff --git a/app/(pages)/about-us/page.tsx b/app/(pages)/about-us/page.tsx
index 4d2b54d..9b97ee5 100644
--- a/app/(pages)/about-us/page.tsx
+++ b/app/(pages)/about-us/page.tsx
@@ -8,7 +8,7 @@ import CelebratePast from './_components/CelebratePast/celebratePast';
 
 export default function AboutUs() {
   return (
-    <div className="relative">
+    <div className="relative bg-[#F9FBFC]">
       <Header />
 
       <section id="about-hero" data-header-theme="dark">
diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx
index 64f6151..44e0d35 100644
--- a/app/(pages)/layout.tsx
+++ b/app/(pages)/layout.tsx
@@ -3,9 +3,9 @@ import '@globals/styles/globals.scss';
 import metadataJSON from '@app/(pages)/_globals/metadata.json';
 import fonts from './_globals/fonts';
 import Header from './_components/Header/Header';
-import Footer from '@app/(pages)/_components/Footer/Footer';
+// import Footer from '@app/(pages)/_components/Footer/Footer';
 import { Analytics } from '@vercel/analytics/next';
-// import FooterWrapper from './_components/FooterWrapper';
+import FooterWrapper from './_components/FooterWrapper';
 
 export const metadata: Metadata = metadataJSON;
 
@@ -20,8 +20,8 @@ export default function RootLayout({
         <Header />
         {children}
         <Analytics />
-        <Footer />
-        {/* <FooterWrapper /> */}
+        {/* <Footer /> */}
+        <FooterWrapper />
       </body>
     </html>
   );