diff --git a/src/components/AboutUsHeroBanner.tsx b/src/components/AboutUsHeroBanner.tsx
index 114287b..d839a90 100644
--- a/src/components/AboutUsHeroBanner.tsx
+++ b/src/components/AboutUsHeroBanner.tsx
@@ -1,20 +1,15 @@
-import Image from "next/image";
-import AboutUsHeroBannerBackground from "../../public/images/ABOUT-hero.jpg";
+
+
 
 export default function AboutUsHeroBanner() {
   return (
-    <section className="relative w-full h-dvh min-h-max flex flex-col items-center">
-      <Image
-        className="absolute inset-0 -z-10 w-full h-full object-cover object-center"
-        src={AboutUsHeroBannerBackground}
-        alt="About us hero banner"
-      />
+    <section className="relative w-full h-[400px] min-h-max flex flex-col items-center">
       <div className="absolute -z-10 w-full h-full" />
       <div className="flex flex-col gap-5 py-10 px-10 w-full max-w-[320px] justify-center min-h-full md:px-28 xl:px-56 md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]">
-        <h1 className="font-instrument-sans font-bold text-yellow3 text-4xl md:text-7xl">
+        <h1 className="font-instrument-sans font-bold text-blue3 text-4xl md:text-7xl">
           About Us
         </h1>
-        <p className="font-instrument-sans text-white text-justify text-sm md:text-xl lg:max-w-[500px]">
+        <p className="font-instrument-sans text-blue3 text-justify text-sm md:text-xl lg:max-w-[500px]">
           SYSDEV develops tech solutions for SAMAHAN and the AdDU community&#44; driven by student
           collaboration and innovation&#46;
         </p>
diff --git a/src/components/ui/ServiceHeroBanner.tsx b/src/components/ui/ServiceHeroBanner.tsx
index 4745e5d..25b9700 100644
--- a/src/components/ui/ServiceHeroBanner.tsx
+++ b/src/components/ui/ServiceHeroBanner.tsx
@@ -6,21 +6,13 @@ const ServiceHeroBanner = () => {
         <section>
         <div className="relative w-full h-min overflow-hidden">
             {/* Placeholder for blue gradient bg */}         
-            <Image
-                src={withBasePath("/images/SERVICES-hero.jpg")}
-                alt="Service Hero Banner Background"
-                fill
-                className="object-cover"
-                priority
-                quality={95}
-            />
-
+           
             <div className="relative flex flex-col justify-between text-center">
                 <div className="flex-1 flex flex-col items-center justify-center px-4 pt-8  md:pt-12 lg:pt-16 xl:pt-20">
-                    <h1 className="font-instrument-sans font-bold text-2xl  md:text-4xl lg:text-6xl xl:text-7xl text-white leading-tight">
+                    <h1 className="font-instrument-sans font-bold text-2xl  md:text-4xl lg:text-6xl xl:text-7xl text-blue3 leading-tight">
                         Services
                     </h1>
-                    <p className="text-white mt-1 md:mt-3 lg:mt-4 text-sm md:text-xl lg:text-2xl max-w-[220px] md:max-w-md lg:max-w-lg xl:max-w-3xl leading-relaxed">
+                    <p className="text-blue3 mt-1 md:mt-3 lg:mt-4 text-sm md:text-xl lg:text-2xl max-w-[220px] md:max-w-md lg:max-w-lg xl:max-w-3xl leading-relaxed">
                         See how <span className="font-instrument-sans text-yellow4 underline">SYSDEV</span> empowers the community through technology.
                     </p>
                 </div>