diff --git a/components/AboutEvent/Index.jsx b/components/AboutEvent/Index.jsx
index 71bc3aa..1d319cc 100644
--- a/components/AboutEvent/Index.jsx
+++ b/components/AboutEvent/Index.jsx
@@ -9,7 +9,7 @@ import computer from "../../images/shapes/computer.png";
 
 const AboutEvent = () => {
     return (
-    <section id="about-event" className="section-container pt-12 lg:pt-24"> 
+    <section id="about-event" className="px-4 bg-qiskit-black/95 lg:px-11 2xl:px-16 pt-12 lg:pt-24"> 
       <div className="relative">
         <div className="absolute right-0 top-0 sm:right-[596px] sm:top-0 w-[28px] h-[30px]  lg:w-[47px] lg:h-[50px] 2xl:w-[70px] 2xl:h-[70px]">
           <Image 
@@ -59,14 +59,14 @@ const AboutEvent = () => {
         <div className= "gap-8 row-2 lg:columns-2 mt-[50px]">
           <div><Image src={Map} alt="" /></div>
           <div className="gap-8 rows-2 p-4 sm:p-10">
-            <p className="text-xl 2xl:text-3xl lg:text-2xl"><b>The Qiskit Fall Fest</b> is a collection of quantum computing events on college campuses around the world, with support from the entire IBM Quantum team. This year <b>WTM Algiers</b> is one of the 34 communities which are hosting the Qiskit Fall Fest event.</p>
+            <p className="text-xl 2xl:text-3xl lg:text-2xl text-qiskit-white"><b>The Qiskit Fall Fest</b> is a collection of quantum computing events on college campuses around the world, with support from the entire IBM Quantum team. This year <b>WTM Algiers</b> is one of the 34 communities which are hosting the Qiskit Fall Fest event.</p>
             <div className="gap-4 columns-2 2xl:text-4xl lg:text-3xl text-xl font-bold mt-[15px] pr-2">
-              <div className="flex-row">
+              <div className="flex-row text-qiskit-white">
                 <p className="2xl:text-7xl lg:text-6xl text-2xl">1ST</p>
                 <p className="2xl:text-4xl lg:text-3xl sm:text-xl text-base">In Africa and</p>
                 <p className="2xl:text-4xl lg:text-3xl sm:text-xl text-base">MENA Region</p>
               </div>
-              <div className="flex items-start gap-2 ">
+              <div className="flex items-start gap-2 text-qiskit-white">
                 <p className="2xl:text-7xl lg:text-6xl text-2xl">+8</p>
                 <p className="2xl:text-4xl lg:text-3xl sm:text-xl text-base mt-[25px]">Talks Workshops Challenges</p>
               </div>
diff --git a/components/AboutUs/Index.jsx b/components/AboutUs/Index.jsx
index 461ad3b..8912075 100644
--- a/components/AboutUs/Index.jsx
+++ b/components/AboutUs/Index.jsx
@@ -10,7 +10,7 @@ const AboutUs = () => {
     <section id="about-us">
       {/* <div className=" z-0 h-[100px] max-w-[100%] bg-gradient-to-t from-[#3177ab] to-qiskit-white"></div> */}
 
-      <div className="relative about-bg py-16">
+      <div className="relative bg-qiskit-black/95 py-16">
         <div className="absolute top-1/4 right-4 lg:w-[55px] h-[32px] w-[32px] lg:h-[55px] 2xl:w-[82px] 2xl:h-[82px]">
           <Image src={globe} layout="fill" />
         </div>
@@ -24,11 +24,9 @@ const AboutUs = () => {
         </div>
         <div className="w-10/12 mx-auto flex flex-col gap-8">
           <SectionTitle isWhite={true} title={"About us"} />
-          <div className="flex flex-col gap-12 lg:gap-28">
+          <div className="flex flex-col gap-12 lg:gap-28 text-qiskit-white">
             <ParagSection
-              keyword1={"WTM Algiers "}
-              paragraph1={`also known as the "Women Techmakers Algiers" program, was created to increase visibility, community, and resources for women in technology and also spread learning and build role models globally. It's located at`}
-              keyword2={" the National Higher School of Computer science "}
+              paragraph1={`WTA also known as the "Women Techmakers Algiers" program, was created to increase visibility, community, and resources for women in technology and also spread learning and build role models globally. It's located at  the National Higher School of Computer science`}
               paragraph2={`and dedicated to anyone who's passionate and motivated about the tech field.`}
               img={WTM}
               reverse={false}
diff --git a/components/Agenda/Index.jsx b/components/Agenda/Index.jsx
index 4f42a2d..168b5e9 100644
--- a/components/Agenda/Index.jsx
+++ b/components/Agenda/Index.jsx
@@ -9,7 +9,7 @@ import YellowButton from "../shared/YellowButton";
 
 const Agenda = () => {
   return (
-    <section id="agenda" className="relative section-container">
+    <section id="agenda" className="px-4 lg:px-11 2xl:px-16 bg-qiskit-black/95 relative ">
       <SectionTitle title={"Agenda"}> </SectionTitle>
       <div className="md:hidden visible absolute left-0 top-0 z-25 sm:w-[80px] sm:h-[80px] w-[50px] h-[50px]">
         <Image src={atom} alt="maqam chahid" layout="fill" />
@@ -29,7 +29,7 @@ const Agenda = () => {
 
         <div className="col-span-4 flex flex-col justify-center mt-[20px]">
           <YellowButton title={"Saturday, October 22nd"} />
-          <div className=" bg-qiskit-blue-lighter  bg-opacity-40 justify-center w-full md:pl-[50px] pl-[10px] mb-20 pr-[10px] md:pr-[30px] lg:py-[80px] md:py[70px] py-8 border-4 md:border-8 md:mt-[-30px] mt-[-10px]">
+          <div className=" bg-qiskit-blue-normal bg-opacity-90 justify-center w-full md:pl-[50px] pl-[10px] mb-20 pr-[10px] md:pr-[30px] lg:py-[80px] md:py[70px] py-8 border-4 md:border-8 md:mt-[-30px] mt-[-10px]">
             <div className="">
               <div className=" sm:text-xl font-medium md:font-semibold text-xs md:px[10px] ">
                 <div className="flew flex-row">
diff --git a/components/Footer/Index.jsx b/components/Footer/Index.jsx
index 84d20c0..d22f1cc 100644
--- a/components/Footer/Index.jsx
+++ b/components/Footer/Index.jsx
@@ -10,14 +10,14 @@ import Tilt from "react-parallax-tilt";
 
 const Footer = () => {
   return (
-    <footer className="mt-32 footer-bg text-qiskit-white flex flex-col gap-6 relative">
+    <footer className="bg-qiskit-blue-normal text-qiskit-white flex flex-col gap-6 relative">
       <div className="hidden lg:block absolute top-4 left-[33rem]">
         <Image src={GlobeShape} height={42} width={42} />
       </div>
       <div className="flex flex-col items-center lg:items-start lg:flex-row">
         <div className="cursor-pointer -mt-16 order-first lg:order-last ">
           <Tilt>
-            <Image src={Qiskit} alt="Qiskit Fall Fest Algiers" />
+            {/* <Image src={Qiskit} alt="Qiskit Fall Fest Algiers" /> */}
           </Tilt>
         </div>
         <div className="pt-14 pl-4 pr-4 lg:pl-11 lg:pr-0 2xl:pl-16">
diff --git a/components/Hero/Index.jsx b/components/Hero/Index.jsx
index 2abdc4c..945a749 100644
--- a/components/Hero/Index.jsx
+++ b/components/Hero/Index.jsx
@@ -13,10 +13,10 @@ import Tilt from "react-parallax-tilt";
 import Typewriter from "typewriter-effect";
 const Hero = () => {
   return (
-    <section id="home" className="min-h-screen hero-bg">
-      <div className="section-container pb-24 md:pb-0">
+    <section  className="min-h-screen hero-bg bg-qiskit-black/95">
+      <div className="section-container md:pb-0 md:h-[1000px] lg:h-[700px]">
         <Navbar />
-        <div className="flex flex-col gap-16 lg:gap-0 relative">
+        <div className="flex flex-col gap-16  lg:mt-28 lg:gap-0 relative">
           <div className="w-12 h-12 absolute top-1/4 left-4 lg:top-4 lg:left-4">
             <Image src={Atom} />
           </div>
@@ -40,7 +40,7 @@ const Hero = () => {
               <p className="font-medium text-center lg:text-left leading-[2rem] lg:text-2xl 2xl:text-4xl 2xl:leading-[2.875rem]">
                 Your chance to showcase your skills!
               </p>
-              <div className="flex items-end">
+              <div className="flex items-end lg:mt-20">
                 <div className="relative h-[67px] bounce w-[67px] 2xl:w-[101px] 2xl:h-[114px] 2xl:mb-[70px]">
                   <Image src={Arrow} layout="fill" />
                 </div>
@@ -52,7 +52,7 @@ const Hero = () => {
 
             <div className="flex-1 pt-20 lg:pt-0 order-first lg:order-last">
               <Tilt>
-                <Image src={Qiskit} />
+                {/* <Image src={Qiskit} /> */}
               </Tilt>
             </div>
           </div>
diff --git a/components/Hero/Navbar.jsx b/components/Hero/Navbar.jsx
index 412bf8e..6ce28a4 100644
--- a/components/Hero/Navbar.jsx
+++ b/components/Hero/Navbar.jsx
@@ -7,7 +7,7 @@ import Bluebutton from "../shared/Bluebutton";
 const Navbar = () => {
   const [isNavToggled, setIsNavToggled] = useState(false);
   return (
-    <header className="pt-8 lg:pt-1 flex flex-col gap-8">
+    <header className=" lg:pt-1 flex flex-col gap-8">
       {/* Desktop menu */}
       <div>
         <div className="flex justify-between items-center">
diff --git a/components/OurPartners/Index.jsx b/components/OurPartners/Index.jsx
index ae900db..9380b1b 100644
--- a/components/OurPartners/Index.jsx
+++ b/components/OurPartners/Index.jsx
@@ -18,7 +18,7 @@ const OurPartners = () => {
     }
   ];
   return (
-    <section id="our-partners" className="section-container pt-12 lg:pt-24">
+    <section id="our-partners" className="px-4 lg:px-11 2xl:px-16 bg-qiskit-black/95 pt-12 lg:pt-24">
       <SectionTitle title={"Our Partners"} />
       <div className="flex flex-row">
         <div className=" w-1/12 ml-6">
@@ -33,7 +33,7 @@ const OurPartners = () => {
           </div>
         </div>
         <div className="w-10/12">
-          <div className="flex flex-wrap items-center justify-center">
+          <div className="flex flex-wrap items-center justify-center text-qiskit-white">
             {partners.map((partner, index) => (
               <div
                 key={index}
diff --git a/components/OurSpeakers/Index.jsx b/components/OurSpeakers/Index.jsx
index fdbe34c..ad7a656 100644
--- a/components/OurSpeakers/Index.jsx
+++ b/components/OurSpeakers/Index.jsx
@@ -16,7 +16,7 @@ const OurSpeakers = () => {
   const swiperRef = useRef(null);
 
   return (
-    <section id="speakers" className="relative section-container">
+    <section id="speakers" className="relative bg-qiskit-black/95 px-4 lg:px-11 2xl:px-16">
       <div className="mb-12 lg:mb-0">
         <SectionTitle title={"Our Speakers"} /> 
       </div>
diff --git a/components/TheyTrustedUs/Index.jsx b/components/TheyTrustedUs/Index.jsx
index 22d6665..5f8e557 100644
--- a/components/TheyTrustedUs/Index.jsx
+++ b/components/TheyTrustedUs/Index.jsx
@@ -11,7 +11,7 @@ import Sonatrach from "../../images/logos/Sonatrach.png";
 
 const TheyTrustedUs = () => {
   return (
-    <section id="our-sponsors" className="section-container lg:pt-16">
+    <section id="our-sponsors" className="px-4 lg:px-11 2xl:px-16 bg-qiskit-black/95 lg:pt-16">
       <div className="relative">
         <div className="mt-24 lg:mt-7 2xl:mt-12 ">
           <SectionTitle title={"They trusted us"} />
@@ -33,7 +33,7 @@ const TheyTrustedUs = () => {
 
         <div className="flex flex-col justify-center gap-9 2xl:ml-52 lg:ml-40 lg:flex-row lg:mt-20 lg:gap-28 w-3/4 mx-auto  2xl:flex-row 2xl:mt-32 2xl:gap-40">
           <div className="mt-8 h-16 w-44 lg:w-[22rem] lg:h-36 2xl:h-44 2xl:w-[33rem]">
-            <Image src={qBraid} alt="qbraid logo" />
+            <Image src={qBraid} alt="qbraid logo" className=" text-qiskit-white border-4 border-qiskit-white" />
           </div>
 
           {/* <div className="lg:mt-10">
diff --git a/images/hero/Hero_image.jpg b/images/hero/Hero_image.jpg
new file mode 100644
index 0000000..39105fa
Binary files /dev/null and b/images/hero/Hero_image.jpg differ
diff --git a/styles/globals.css b/styles/globals.css
index 7c8385c..057a2c3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,6 +4,10 @@
 
 .section-container {
   @apply px-4 lg:px-11 2xl:px-16;
+  background-image: url('../images/hero/Hero_image.jpg');
+  background-repeat: no-repeat;
+  background-position: 50% 10%;
+  background-size: 120% auto; /* Adjust size of the background */
 }
 
 .about-bg {
@@ -22,7 +26,7 @@
 .burger-line {
   @apply h-1 w-11 bg-qiskit-white rounded;
 }
-.hero-bg {
+/* .hero-bg {
   background: radial-gradient(
     137.29% 137.29% at 50% 50%,
     #82cfff 0%,
@@ -32,7 +36,7 @@
     #093256 80.54%,
     #00264a 91.18%
   );
-}
+} */
 .footer-bg {
   background: radial-gradient(
     137.29% 137.29% at 50% 50%,
diff --git a/yarn.lock b/yarn.lock
index 97d211e..77edf5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -68,15 +68,10 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-linux-x64-gnu@12.3.1":
+"@next/swc-win32-x64-msvc@12.3.1":
   version "12.3.1"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz"
-  integrity sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==
-
-"@next/swc-linux-x64-musl@12.3.1":
-  version "12.3.1"
-  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz"
-  integrity sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz"
+  integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"