diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
index 8deab7c66..a211dc5c9 100644
--- a/app/components/StickyRelativeDemo.tsx
+++ b/app/components/StickyRelativeDemo.tsx
@@ -13,7 +13,7 @@ const source_Code_Pro = Source_Code_Pro({
 const StickyRelativeDemo: NextPage = () => {
   return (
     <div className="m-auto scroll-smooth text-secondary justify-between p-2 max-h-fit max-w-6xl">
-      <div className="justify-start flex items-center gap-2 sm:gap-1 py-10 text-2xl  font-semibold visible sm:text-4xl">
+      <div className="justify-start flex text-secondary items-center gap-2 sm:gap-1 py-10 text-2xl  font-semibold visible sm:text-4xl">
         <div className="text-4xl text-third sm:text-5xl sm:mx-2">
           &#8226;
         </div>
@@ -23,7 +23,7 @@ const StickyRelativeDemo: NextPage = () => {
         <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">
-              <div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
+              <div className="mb-4 max-w-fit rounded-full border bg-seven border-four font-semibold text-five border-five  px-3 py-1 antialiased text-sm">
                 2024
               </div>
             </div>
@@ -43,20 +43,20 @@ const StickyRelativeDemo: NextPage = () => {
                 </div>
               </div>
               <div className="text-sm text-four pt-12 ">
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
-                  <li className="text-thirdText font-normal">Role</li>
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder text-secodary">
+                  <li className="text-four font-normal">Role</li>
                   <li>Digital Marketing</li>
                 </ul>
                 <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
-                  <li className="text-thirdText font-normal">Deliverables</li>
+                  <li className="text-four font-normal">Deliverables</li>
                   <li>Survey checks</li>
                 </ul>
                 <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder ">
-                  <li className="text-thirdText  font-normal">Company</li>
+                  <li className="text-four  font-normal">Company</li>
                   <li>VMR</li>
                 </ul>
                 <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
-                  <li className="text-thirdText  font-normal">Visit Site</li>
+                  <li className="text-four font-normal">Visit Site</li>
                   <li className="px-2">
                     <Link href="https://veecrew.com" className="">
                       <svg
@@ -77,94 +77,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
         <div className="relative basis-1/2 pt-10 overflow-hidden  border-rose-500">
-          <div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
-            Showcase
-          </div>
-          <div className="grid gap-4 p-2 pt-4 sm:gap-10">
-            <Image
-              src={"/projects/mypro.png"}
-              alt={"My Profile Picture"}
-              width={300}
-              height={300}
-              className="min-w-full min-h-full rounded-2xl "
-            />
-
-            <Image
-              src={"/projects/mypro.png"}
-              alt={"My Profile Picture"}
-              width={300}
-              height={300}
-              className="min-w-full min-h-full rounded-2xl "
-            />
-            <Image
-              src={"/projects/mypro.png"}
-              alt={"My Profile Picture"}
-              width={300}
-              height={300}
-              className="min-w-full min-h-full rounded-2xl "
-            />
-          </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 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">
-              <div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
-                2024
-              </div>
-            </div>
-            <div className="border-yellow-400 sm:pr-10">
-              <div className="max-w-2xl">
-                <h2 className="text-2xl text-secodary py-3 pb-3 font-semibold ">
-                  Craft &amp; Code: Building the Future, One Line at a Time
-                </h2>
-                <div>
-                  <p className="text-four text-base">
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
-                    Repudiandae quo natus accusantium eius molestiae expedita
-                    possimus accusamus, aspernatur, quia quae asperiores
-                    inventore. Quod, officia vel aliquam exercitationem est
-                    inventore porro?
-                  </p>
-                </div>
-              </div>
-              <div className="text-sm text-four pt-12 ">
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
-                  <li className="text-thirdText font-normal">Role</li>
-                  <li>Digital Marketing</li>
-                </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
-                  <li className="text-thirdText font-normal">Deliverables</li>
-                  <li>Survey checks</li>
-                </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder ">
-                  <li className="text-thirdText  font-normal">Company</li>
-                  <li>VMR</li>
-                </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
-                  <li className="text-thirdText  font-normal">Visit Site</li>
-                  <li className="px-2">
-                    <Link href="https://veecrew.com" className="">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="hover:fill-third"
-                        height="24px"
-                        viewBox="0 -960 960 960"
-                        width="24px"
-                        fill="--priamryText"
-                      >
-                        <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
-                      </svg>
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="relative basis-1/2 pt-10 overflow-hidden  border-rose-500">
-          <div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
+          <div className="mb-4 max-w-fit rounded-full border bg-seven border-four font-semibold text-five border-five  px-3 py-1 antialiased text-sm">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">
@@ -193,6 +106,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
       </div>
+      
   
       
     </div>
diff --git a/app/components/infiniteCard.tsx b/app/components/infiniteCard.tsx
index 95bd8070a..ef8de21c3 100644
--- a/app/components/infiniteCard.tsx
+++ b/app/components/infiniteCard.tsx
@@ -5,7 +5,7 @@ import { InfiniteMovingCards } from "./ui/infinite-moving-cards";
 
 export function InfiniteMovingCardsDemo() {
   return (
-    <div className="flex flex-col antialiased bg-white items-center justify-center relative overflow-hidden">
+    <div className="flex flex-col antialiased  items-center justify-center relative overflow-hidden">
       <InfiniteMovingCards
         items={testimonials}
         direction="right"
diff --git a/app/components/ui/infinite-moving-cards.tsx b/app/components/ui/infinite-moving-cards.tsx
index 8e7024be6..03ff62893 100644
--- a/app/components/ui/infinite-moving-cards.tsx
+++ b/app/components/ui/infinite-moving-cards.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { cn } from "@/app/utils/cn";
 import React, { useEffect, useState } from "react";
 
@@ -86,10 +87,10 @@ export const InfiniteMovingCards = ({
       >
         {items.map((item, idx) => (
           <li
-            className="w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"
+            className="w-[350px] max-w-full relative rounded-2xl font-semibold flex-shrink-0 text-secondary border-slate-700 px-8 py-6 md:w-[450px]"
             style={{
               background:
-                "linear-gradient(180deg, var(--slate-800), var(--slate-900)",
+                "var(--seven)",
             }}
             key={item.name}
           >
@@ -98,15 +99,15 @@ export const InfiniteMovingCards = ({
                 aria-hidden="true"
                 className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
               ></div>
-              <span className="relative z-20 text-sm leading-[1.6] text-gray-100 font-normal">
+              <span className=" relative z-20 text-sm  leading-[1.6] text-five font-normal">
                 {item.quote}
               </span>
               <div className="relative z-20 mt-6 flex flex-row items-center">
                 <span className="flex flex-col gap-1">
-                  <span className="text-sm leading-[1.6] text-gray-400 font-normal">
+                  <span className=" text-sm leading-[1.6] text-four  font-semibold">
                     {item.name}
                   </span>
-                  <span className="text-sm leading-[1.6] text-gray-400 font-normal">
+                  <span className=" text-sm leading-[1.6] text-five font-semibold">
                     {item.title}
                   </span>
                 </span>
diff --git a/app/components/visionSection.tsx b/app/components/visionSection.tsx
new file mode 100644
index 000000000..85ea01ce5
--- /dev/null
+++ b/app/components/visionSection.tsx
@@ -0,0 +1,38 @@
+export default function VisionSection() {
+  const svgStyles = {
+    width: "auto",
+    height: "100vh",
+    filter: "contrast(170%) brightness(1000%)",
+    background:
+      "linear-gradient(0deg, rgba(0,0,255,1), rgba(0,0,0,0)), url(/projects/noise.svg)",
+  };
+
+  return (
+    <>
+      <div className="p-2 min-h-screen max-w-6xl m-auto">
+        <div className="justify-start text-secondary flex items-center gap-2 sm:gap-1 py-10 text-2xl  font-semibold visible sm:text-4xl">
+          <div className="text-4xl text-third sm:text-5xl sm:mx-2">
+            &#8226;
+          </div>
+          Work Experince
+        </div>
+
+        <div>
+          <div className="">
+           <div className="m-2 md:flex justify-between items-center border-b-1">
+             <h4 className="  text-four font-semibold md:text-2xl">Adminstrative Assistant</h4>
+            <ul className="flex py-2 gap-2 md:gap-4 text-xs md:text-1xl text-five text-center">
+             <li className="p-1 px-2 max-w-fit border-1 bg-seven rounded-full text-center">
+              VMR Pvt. Ltd.
+             </li>  
+             <li className="p-1 px-2 max-w-fit border-1 bg-seven rounded-full text-center">
+              2021 sep - 2022 fab
+             </li>  
+            </ul>
+           </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index f07c46c6c..23d81dd55 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,10 +2,9 @@ import type { Metadata } from "next";
 import HomeSectionHeader from "./components/homeSectionHeader";
 import AdminWeather from "./components/AdminWeather";
 import IntroSection from "./components/introSection";
-import DeviceAddress from "./components/DeviceAddress";
-import { InfiniteMovingCardsDemo } from "./components/infiniteCard";
 import { ReviewSection } from "./components/reviewSection";
 import DarkModeToggle from "./components/DarkModeToggle";
+import VisionSection from "./components/visionSection";
 
 export const metadata: Metadata = {
   title: "nee. - Portfolio Framer Template For Freelancers",
@@ -25,11 +24,8 @@ export default function Home() {
       <section className="">
        <ReviewSection/>
       </section>
-      <section id="vision" className="h-screen flex flex-col justify-center items-center">
-        <div>
-         <DarkModeToggle/>
-        </div>
-        Vision to learn
+      <section id="vision" className="mt-20"> 
+        <VisionSection/>
       </section>
       <div className="flex flex-col bg-primary items-center justify-center min-h-screen py-2">
         <AdminWeather />
diff --git a/public/background/javier-miranda-AlJ9TQqeCV0-unsplash.jpg b/public/background/javier-miranda-AlJ9TQqeCV0-unsplash.jpg
new file mode 100644
index 000000000..e81f2d37e
Binary files /dev/null and b/public/background/javier-miranda-AlJ9TQqeCV0-unsplash.jpg differ
diff --git a/public/projects/noise.svg b/public/projects/noise.svg
new file mode 100644
index 000000000..8bfcb4b36
--- /dev/null
+++ b/public/projects/noise.svg
@@ -0,0 +1,12 @@
+<!-- svg: first layer -->
+<svg viewBox='0 0 205 205' xmlns='http://www.w3.org/2000/svg'>
+  <filter id='noiseFilter'>
+    <feTurbulence 
+      type='fractalNoise' 
+      baseFrequency='7.38' 
+      numOctaves='4' 
+      stitchTiles='stitch'/>
+  </filter>
+
+  <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
+</svg>
\ No newline at end of file