diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f3d2517..a0e3a2d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import TEDxStarsCanvas from "@/components/ui/stars";
-import Nav from "@/components/widget/header";
 import Script from "next/script";
 import { ScrollProgressBar } from "@/components/common/scroll-progress";
 import Footer from "@/components/common/footer";
@@ -43,9 +42,7 @@ export default function RootLayout({
         <link rel="manifest" href="/site.webmanifest" />
       </head>
       <body className={(inter.className = "overflow-x-hidden")}>
-        <div className="fixed top-0 w-full h-[80px] z-50 overflow-x-hidden  backdrop-blur-md head-5 bg-black/5" />
         <ScrollProgressBar />
-        <Nav />
         <TEDxStarsCanvas />
         <Providers>{children} </Providers>
         <Footer />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index fa2c116..249e778 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import Performers from "@/components/widget/performers";
 import HeroHighlight from "@/components/widget/hero";
 import Footer from "@/components/common/contact-page";
 import CTA from "@/components/common/cta-section-2";
+import Nav from "@/components/widget/header";
 export default function Home() {
   // const [loading, setLoading] = useState(true);
 
@@ -19,6 +20,9 @@ export default function Home() {
 
   return (
     <>
+      <div className="fixed top-0 w-full h-[80px] z-40 overflow-x-hidden  backdrop-blur-md head-5 bg-black/5" />
+
+      <Nav />
       <div className="z-20 relative pt-20 overflow-x-clip 1">
         <HeroHighlight />
         <div className="h-full  mt-20 mb-20 lg:mb-40" id="about">
@@ -38,9 +42,9 @@ export default function Home() {
 
           <Performers />
         </div>
-        {/* <div className="">
+        <div className="">
           <PreviousEdition />
-        </div> */}
+        </div>
         <div id="team" className="bg-transparent h-fit mt-14">
           <h1 className="md:text-8xl text-4xl text-center font-black text-redTheme px-10">
             The Team
diff --git a/src/app/previous-editions/page.tsx b/src/app/previous-editions/page.tsx
index 0b6adf4..a9bf7da 100644
--- a/src/app/previous-editions/page.tsx
+++ b/src/app/previous-editions/page.tsx
@@ -8,32 +8,62 @@ type Props = {};
 const Previous = (props: Props) => {
   const router = useRouter();
   return (
-    <div className="my-24 mx-auto w-fit px-4">
-      <div className="flex items-center justify-start w-min lg:px-20 px-4 mb-4">
-        <button
-          className="text-red-600 hover:text-red-800 flex items-center space-x-2"
-          onClick={() => router.back()}
-        >
-          <svg
-            className="w-5 h-5"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
+    <div className="mx-auto w-full ">
+      <div
+        className="h-[60vh] flex flex-col text-center bg-gradient-to-b from-redTheme/60 py-8"
+        // style={{
+        //   borderBottomLeftRadius: "100% 60%",
+        //   borderBottomRightRadius: "100% 60%",
+        // }}
+      >
+        <div className="flex items-center justify-start w-min lg:px-20 px-4 mb-4">
+          <button
+            className="text-white font-semibold hover:text-slate-300 transition-all flex items-center space-x-2"
+            onClick={() => router.back()}
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          <span>Back</span>
-        </button>
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            <span>Back</span>
+          </button>
+        </div>
+        <div className="my-auto">
+          {/* <h1 className="text-center xl:text-7xl text-3xl font-black py-5 text-redTheme">
+            Looking back at TEDxSJEC
+          </h1>
+          <p className="xl:w-1/3 xl:text-2xl font-semibold text-neutral-300 mx-auto ">
+            Revisit TEDxSJEC 2020 and 2022, where inspiring stories and
+            transformative ideas left a lasting impact.
+          </p> */}
+          <h2 className="sm:text-6xl text-3xl md:text-[80px] font-black text-whiteTheme mb-4 md:mb-6 leading-tight">
+            Looking back at TED<sup>x</sup>
+            <span className="pl-1 font-semibold">SJEC</span>
+          </h2>
+          <p className="text-base xl:w-1/2 mx-auto md:text-3xl leading-relaxed mb-4 md:mb-6 text-gray-300">
+            Revisit TED<sup>x</sup>
+            <span className="pl-1">SJEC</span> 2020 and 2022, where inspiring
+            stories and transformative ideas left a lasting impact.
+          </p>
+        </div>
       </div>
-      <h1 className="text-center text-6xl font-black">2022 Edition</h1>
+      <h1 className="text-center xl:text-6xl text-2xl my-5 font-black">
+        2022 Edition
+      </h1>
       <UnsplashGrid year={2022} />
-      <h1 className="text-center text-6xl font-black">2020 Edition</h1>
+      <h1 className="text-center xl:text-6xl text-2xl my-5 mt-40 font-black">
+        2020 Edition
+      </h1>
       <UnsplashGrid year={2020} />
     </div>
   );
diff --git a/src/components/common/container-scroll.tsx b/src/components/common/container-scroll.tsx
index 3a3c740..f49bfec 100644
--- a/src/components/common/container-scroll.tsx
+++ b/src/components/common/container-scroll.tsx
@@ -21,7 +21,7 @@ export function PreviousEdition() {
           width="100%"
           height="450"
           src="https://www.youtube.com/embed/NCWwTsAjiys?si=xBkmPtQEYQl_tEIX"
-          className="md:h-[450px] h-[200px]"
+          className="md:h-[450px] h-[250px]"
         ></iframe>
       </ContainerScroll>
     </div>
diff --git a/src/components/common/gridsplash.tsx b/src/components/common/gridsplash.tsx
index 3ca26b0..5c21ebf 100644
--- a/src/components/common/gridsplash.tsx
+++ b/src/components/common/gridsplash.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { Suspense, useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, useInView } from "framer-motion";
 import Image from "next/image";
 import { X } from "lucide-react";
@@ -21,14 +21,16 @@ function UnsplashGrid(props: UnsplashGridProps) {
           <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
             <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
               <>
-                {prevEdition22.map((img, index) => (
-                  <ImageItem
-                    key={img.id}
-                    item={img}
-                    index={index}
-                    setSelected={setSelected}
-                  />
-                ))}
+                <Suspense fallback={<ImagePlaceholder />}>
+                  {prevEdition22.map((img, index) => (
+                    <ImageItem
+                      key={img.id}
+                      item={img}
+                      index={index}
+                      setSelected={setSelected}
+                    />
+                  ))}
+                </Suspense>
               </>
             </div>
           </div>
@@ -37,15 +39,17 @@ function UnsplashGrid(props: UnsplashGridProps) {
         <div className="flex justify-center">
           <div className="container mx-auto p-2 sm:p-4 lg:px-20 ">
             <div className="columns-2 md:columns-3 2xl:columns-3 gap-3">
-            <>
-                {prevEdition20.map((img, index) => (
-                  <ImageItem
-                    key={img.id}
-                    item={img}
-                    index={index}
-                    setSelected={setSelected}
-                  />
-                ))}
+              <>
+                <Suspense fallback={<ImagePlaceholder />}>
+                  {prevEdition20.map((img, index) => (
+                    <ImageItem
+                      key={img.id}
+                      item={img}
+                      index={index}
+                      setSelected={setSelected}
+                    />
+                  ))}
+                </Suspense>
               </>
             </div>
           </div>
@@ -66,10 +70,41 @@ interface ImageItemProps {
   setSelected: any;
 }
 
+const ImagePlaceholder: React.FC = () => (
+  <div
+    role="status"
+    className="animate-pulse flex items-center justify-center w-full h-full bg-gray-300 rounded-2xl dark:bg-gray-700"
+  >
+    <svg
+      className="w-10 h-10 text-gray-200 dark:text-gray-600"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </div>
+);
+
 function ImageItem({ item, index, setSelected }: ImageItemProps) {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
 
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }); // 2-second delay
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isLoaded) {
+    return <ImagePlaceholder />;
+  }
+
   return (
     <motion.figure
       initial="hidden"
@@ -78,11 +113,17 @@ function ImageItem({ item, index, setSelected }: ImageItemProps) {
       className="inline-block group w-full rounded-md relative dark:bg-black bg-white cursor-pointer"
       onClick={() => setSelected(item)}
     >
-      <motion.img
-        layoutId={`card-${item.id}`}
-        whileHover={{ scale: 1.025 }}
+      <Image
+        // layoutId={`card-${item.id}`}
+        // whileHover={{ scale: 1.025 }}
         src={item.img}
-        className="w-full bg-base-100 rounded-md shadow-xl image-full cursor-pointer"
+        className="w-full bg-base-100 rounded-md shadow-xl image-full cursor-pointer hover:scale-105 transition-transform"
+        alt={""}
+        height={300}
+        width={400}
+        priority
+        loading="eager"
+        // quality={90}
       />
     </motion.figure>
   );
diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx
index 3fb8a9c..8e88424 100644
--- a/src/components/ui/container-scroll-animation.tsx
+++ b/src/components/ui/container-scroll-animation.tsx
@@ -38,7 +38,7 @@ export const ContainerScroll = ({
 
   return (
     <div
-      className="h-[45rem] md:h-[80rem] flex items-center justify-center relative p-2 md:px-20"
+      className="h-[50rem] md:h-[80rem] flex items-center justify-center relative md:px-20 -mb-52 -mt-28 xl:mb-4 "
       ref={containerRef}
     >
       <div
@@ -95,7 +95,7 @@ export const Card = ({
         boxShadow:
           "2px 2px #0000004d, 4px 2px 5px #0000004a, 9px 9px 9px #00000042, 12px 21px 12px #00000026, 15px 37px 15px #0000000a, 17px 58px 17px #00000003",
       }}
-      className="max-w-5xl -mt-14 lg:mb-10 mb-5 lg:mt-0 mx-auto md:h-fit h-[200px] w-full border-[#6C6C6C] p-2 md:p-4 bg-[#222222] rounded-[16px] shadow-2xl"
+      className="max-w-5xl -mt-14 lg:mb-10 mb-5 lg:mt-0 mx-auto md:h-fit h-[250px] w-full border-[#6C6C6C] p-2 md:p-4 bg-[#222222] rounded-[16px] shadow-2xl"
     >
       <div className=" h-full w-full   overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-[16px] md:p-4 ">
         {children}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 8eb5c11..9d08021 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -71,6 +71,14 @@ export const speakers: Speaker[] = [
       "Dr. Lavina Noronha, Director of Ave Maria Palliative Care, exemplifies humility and dedication. With an MPhil from NIMHANS and a Doctorate from the University of Illinois, she has served as an associate professor and director at Our Lady of the Lake University, USA, with extensive clinical experience in mental health, hospice, and crisis care. Her life changed when she returned to India realizing the lack of support for terminally ill patients. She founded Ave Maria Palliative Care, providing free, compassionate care to patients, regardless of their background, with a dedicated team and community support.",
     img: `${tedxsjecAssetsPrefix}/speakers/dr-lavina-1.avif`,
   },
+  {
+    id: 9,
+    name: "Munita Veigas Rao",
+    profession: "Singer | Songwriter | Performer | Vocal Trainer",
+    description:
+      'Munita Veigas Rao, fondly known as the "Nightingale of Mangalore," is an award-winning singer, songwriter, and vocal trainer celebrated for her dynamic performances across Konkani, regional, and Western music. Having been recently awarded the Dakshina Kannada District Rajyotsava Award in November 2024, Munita has a career spanning over two decades with more than 500 stage performances worldwide. As the founder of her music school, "Musically by Munita," she dedicates her time to nurturing new talent. Her exceptional vocal skills and commitment to music have made her a cherished figure in the community.',
+    img: `${tedxsjecAssetsPrefix}/performers/Munita3.avif`,
+  },
 ];
 
 export const performers: PerformerSection[] = [
@@ -95,16 +103,6 @@ export const performers: PerformerSection[] = [
       `${tedxsjecAssetsPrefix}/performers/Agasthyam3.avif`,
     ],
   },
-  {
-    name: "Munita Veigas Rao",
-    profession: "Singer | Songwriter | Performer | Vocal Trainer",
-    description:
-      'Munita Veigas Rao, fondly known as the "Nightingale of Mangalore," is an award-winning singer, songwriter, and vocal trainer celebrated for her dynamic performances across Konkani, regional, and Western music. Having been recently awarded the Dakshina Kannada District Rajyotsava Award in November 2024, Munita has a career spanning over two decades with more than 500 stage performances worldwide. As the founder of her music school, "Musically by Munita," she dedicates her time to nurturing new talent. Her exceptional vocal skills and commitment to music have made her a cherished figure in the community.',
-    images: [
-      `${tedxsjecAssetsPrefix}/performers/Munita1.avif`,
-      `${tedxsjecAssetsPrefix}/performers/cropped-Munita2.avif`,
-    ],
-  },
   {
     name: "Harman Preet Singh",
     profession: "Comedian",
@@ -119,61 +117,61 @@ export const performers: PerformerSection[] = [
 export const prevEdition22: PreviousEdition[] = [
   {
     id: 1,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image1.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image1.jpg`,
   },
   {
     id: 2,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image2.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image2.jpg`,
   },
   {
     id: 3,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image3.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image3.jpg`,
   },
   {
     id: 4,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image4.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image4.jpg`,
   },
   {
     id: 5,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image5.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image5.jpg`,
   },
   {
     id: 6,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image6.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image6.jpg`,
   },
   {
     id: 7,
-    img: `${tedxsjecAssetsPrefix}/prev/2022/image7.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2022/image7.jpg`,
   },
 ];
 
 export const prevEdition20: PreviousEdition[] = [
   {
     id: 1,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image1.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image1.jpg`,
   },
   {
     id: 2,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image2.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image2.jpg`,
   },
   {
     id: 3,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image3.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image3.jpg`,
   },
   {
     id: 4,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image4.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image4.jpg`,
   },
   {
     id: 5,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image5.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image5.jpg`,
   },
   {
     id: 6,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image6.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image6.jpg`,
   },
   {
     id: 7,
-    img: `${tedxsjecAssetsPrefix}/prev/2020/image7.webp`,
+    img: `${tedxsjecAssetsPrefix}/prev/2020/image7.jpg`,
   },
 ];
