diff --git a/app/about/page.tsx b/app/about/page.tsx
index 7f654726a..db10f7783 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -2,18 +2,18 @@ import type { Metadata } from "next";
 import Image from "next/image";
 import React from "react";
 import { FlipWordsDemo } from "../components/FlipWords";
-import {HeroSection} from "../components/heroSection";
+import { HeroSection } from "../components/heroSection";
 
 export const metadata: Metadata = {
   title: "nee - Portfolio | passionate Programmer in Delhi",
-  description: "I'm an SEO freelancer based in Delhi, helping businesses achieve top search engine rankings by optimizing websites for organic traffic and conversions",
+  description:
+    "I'm an SEO freelancer based in Delhi, helping businesses achieve top search engine rankings by optimizing websites for organic traffic and conversions",
 };
-
-
-export default function About() {
-  return (
-    <main className="bgrid2">
-      <HeroSection />
-    </main>
-  );
-}
+
+export default function About() {
+  return (
+    <main className="bg-primary">
+      <HeroSection />
+    </main>
+  );
+}
diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
index e900a3eb6..ab4b80417 100644
--- a/app/components/StickyRelativeDemo.tsx
+++ b/app/components/StickyRelativeDemo.tsx
@@ -114,7 +114,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
       </div>
-      <div className="relative  m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
+      {/* <div className="relative  m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
         <div className="relative visible  top-0 flex min-h-full basis-1/2 flex-col justify-between  border-rose-500 sm:gap-10">
           <div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center  border-green-500">
             <div className="flex flex-wrap border-yellow-400">
@@ -125,7 +125,7 @@ const StickyRelativeDemo: NextPage = () => {
             <div className="sm:pr-10 backdrop-blur-sm">
               <div className="max-w-2xl text-four ">
                 <h2 className="text-3xl text-five py-3 pb-3 font-semibold ">
-                  Well Is - Secure Password Generator
+                  EscapeStron - Secure Password Generator
                 </h2>
                 <div>
                   <p className="text-base ">
@@ -210,7 +210,7 @@ const StickyRelativeDemo: NextPage = () => {
             />
           </div>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };
diff --git a/app/components/VisionSection.tsx b/app/components/VisionSection.tsx
index 5643f2600..8dd004f4b 100644
--- a/app/components/VisionSection.tsx
+++ b/app/components/VisionSection.tsx
@@ -334,10 +334,7 @@ export const VisionSection: React.FC = () => {
                   </span>
                 </div>
                 <ul className="flex flex-wrap md:grid md:grid-flow-row-dense md:grid-cols-3 md:grid-rows-3  text-four rounded-lg m-2 h-auto ">
-                  <motion.li
-                    initial={{}}
-                    className="col-span-2 flex items-center justify-center h-28 md:h-auto w-full md:w-auto p-1 m-2 bg-seven rounded-2xl bg-sevenh-28 md:h-auto w-full md:w-auto p-1 m-2  "
-                  >
+                  <motion.li className="col-span-2 flex items-center justify-center h-28 md:h-auto w-full md:w-auto p-1 m-2 bg-seven rounded-2xl bg-sevenh-28 md:h-auto w-full md:w-auto p-1 m-2  ">
                     <p className="basis-2/2 md:basis-1/2 md:text-3xl p-2">
                       online activity on smartphones 3hrs and 50min avg.{" "}
                     </p>
diff --git a/app/components/heroSection.tsx b/app/components/heroSection.tsx
index 6953b824d..dc90a989c 100644
--- a/app/components/heroSection.tsx
+++ b/app/components/heroSection.tsx
@@ -51,7 +51,7 @@ export function HeroSection() {
   return (
     <>
       <ShootingStarsAndStarsBackgroundDemo />
-      <section className=" bgrid2 text-four  min-h-screen">
+      <section className="bg-primary bgrid2 text-four  min-h-screen">
         <div className=" max-w-6xl m-auto">
           <div className=" bgrid2 z-10 md:flex justify-center md:text-3xl pt-16 font-bold ">
             <motion.h2
diff --git a/components/Accordion.tsx b/components/Accordion.tsx
index 8697ebdb1..bde68f70e 100644
--- a/components/Accordion.tsx
+++ b/components/Accordion.tsx
@@ -76,7 +76,7 @@ export function AccordionDemo() {
           </Accordion>
         </div>
       </div>
-      <div className="py-12  md:min-h-screen m-auto bg-primary bg-custom-radial-lg text-five border-seven flex flex-col justify-center items-center">
+      <div className="py-12  md:min-h-screen bg-primary bg-custom-radial-lg m-auto border-seven text-secondary flex flex-col justify-center items-center">
         <h6 className="py-3 text-2xl  md:text-4xl text-center">
           Didn&apos;t find an answer?
         </h6>