diff --git a/src/app/(main)/modules/page.tsx b/src/app/(main)/modules/page.tsx
index 30890b2..cc9fa9c 100644
--- a/src/app/(main)/modules/page.tsx
+++ b/src/app/(main)/modules/page.tsx
@@ -1,196 +1,9 @@
-import Image from 'next/image';
-import images from '../modules/images.json'; 
+import Modules from "~/components/Modules";
 
 export default function Page() {
-    return (
-        <div className="bg-[radial-gradient(circle_at_center,#011528_75%,#000204_100%)] min-h-screen">
-            <div>
-            <div className="header flex items-center justify-center text-4xl md:text-5xl lg:text-6xl font-rp1 mt-15 p-28 text-white">
-                    <h1>MORE MODULES</h1>
-                </div>
-
-                {/* Container for modules */}
-                <div className="flex flex-wrap justify-center">
-                    {images.map((image) => (
-                        <div key={image.id} className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-                            <Image 
-                                src={image.src} 
-                                alt={image.alt} 
-                                height={300} 
-                                width={480} 
-                                className="object-cover w-full h-full" 
-                            />
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
+  return (
+      <>
+        <Modules/>
+      </>
+  );
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// import Image from "next/image";
-
-// export default function Page() {
-//     return (
-//         <div className="bg-[radial-gradient(circle_at_center,#011528_75%,#000204_100%)] min-h-screen">
-//             <div>
-//                 <div className="header flex items-center justify-center text-6xl font-rp1 mt-15 p-28 text-white">
-//                     <h1>MORE MODULES</h1>
-//                 </div>
-
-//                 {/* Hardcoded module divs */}
-//                 <div className="flex flex-wrap justify-center"> {/* Added flex wrap to align modules properly */}
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module1.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full" // Ensuring the image covers the div
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module2.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module3.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module1.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module2.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module3.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module1.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image 
-//                             src="/assests/modules/module2.jpeg" 
-//                             alt="hello" 
-//                             height={300} 
-//                             width={480} 
-//                             className="object-cover w-full h-full"
-//                         />
-//                     </div>
-
-//                     <div className="module2 w-[480px] h-[300px] bg-red-500 m-6 rounded-2xl overflow-hidden">
-//                         <Image
-//                              src="/assests/modules/module3.jpeg" // Different image for the last module
-//                              alt="hello"
-//                              height={300}
-//                              width={480}
-//                              className="object-cover w-full h-full"
-//                          />
-//                      </div>
-//                 </div>
-//             </div>
-//         </div>
-//     );
-// }
\ No newline at end of file
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
deleted file mode 100644
index a1bdb46..0000000
--- a/src/components/Events.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-'use client';
-
-import { useState, useLayoutEffect, useRef, useEffect } from "react";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import Image from "next/image";
-import axios from "axios";
-
-gsap.registerPlugin(ScrollTrigger);
-
-interface Event {
-  id: string;
-  name: string;
-  posterImage: string;
-}
-
-interface ApiResponse {
-  status: number;
-  msg: Event[];
-}
-
-const Events: React.FC = () => {
-  const [events, setEvents] = useState<Event[]>([]);
-  const imagesRef = useRef<(HTMLImageElement | null)[]>([]);
-  const textRefs = useRef<(HTMLParagraphElement | null)[]>([]);
-
-  useEffect(() => {
-    const fetchEvents = async () => {
-      try {
-        const response = await axios.get<ApiResponse>(`${process.env.NEXT_PUBLIC_API_URL}/api/event`);
-        if (response.data.status === 200) {
-          setEvents(response.data.msg);
-        }
-      } catch (error) {
-        console.error("Error fetching events", error);
-      }
-    };
-
-    void fetchEvents();
-    
-    const script = document.createElement('script');
-    script.type = 'module';
-    script.src = 'https://unpkg.com/@splinetool/viewer@1.9.28/build/spline-viewer.js';
-    document.body.appendChild(script);
-  }, []);
-
-  useLayoutEffect(() => {
-    const images = imagesRef.current;
-    const texts = textRefs.current;
-
-    images.forEach((img) => {
-      if (img) {
-        gsap.fromTo(
-          img,
-          { 
-            clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
-            scale: 0.8,
-            opacity: 0
-          },
-          {
-            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
-            scale: 1,
-            opacity: 1,
-            scrollTrigger: {
-              trigger: img,
-              start: "top 80%",
-              end: "bottom 70%",
-              scrub: true,
-            },
-          }
-        );
-      }
-    });
-
-    texts.forEach((text) => {
-      if (text) {
-        gsap.fromTo(
-          text,
-          { 
-            y: 20,
-            opacity: 0
-          },
-          {
-            y: 0,
-            opacity: 1,
-            scrollTrigger: {
-              trigger: text,
-              start: "top 90%",
-              toggleActions: "play none none reverse",
-            },
-          }
-        );
-      }
-    });
-
-    return () => {
-      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
-    };
-  }, [events]);
-
-  const setImageRef = (el: HTMLImageElement | null, index: number) => {
-    imagesRef.current[index] = el;
-  };
-
-  const setTextRef = (el: HTMLParagraphElement | null, index: number) => {
-    textRefs.current[index] = el;
-  };
-
-  return (
-    <div className="relative min-h-screen overflow-hidden">
-      <div
-        className="fixed inset-0 z-10000"
-        dangerouslySetInnerHTML={{
-          __html: `<spline-viewer url="https://prod.spline.design/csAC-rSJnjVQZbBi/scene.splinecode" style="width: 100%; height: 100%;"></spline-viewer>`,
-        }}
-      ></div>
-
-      <div className="relative z-10 text-white pt-[9.4rem]">
-        <div className="w-full flex flex-col gap-[10rem]">
-          {Array.from({ length: Math.ceil(events.length / 3) }).map((_, rowIndex) => (
-            <div className="flex w-full h-[45vh] justify-center gap-[7rem]" key={rowIndex}>
-              {events.slice(rowIndex * 3, rowIndex * 3 + 3).map((item: Event, index: number) => (
-                <div className="w-[22.2%] h-full" key={item.id}>
-                  <Image
-                    ref={(el) => setImageRef(el, rowIndex * 3 + index)}
-                    src={item.posterImage}
-                    alt={item.name}
-                    className="object-cover w-full h-full border-[8px] border-[#B8B8B840] backdrop-blur-[7.6rem]"
-                    unoptimized
-                    width={442}
-                    height={572}
-                  />
-                  <div className="flex justify-start items-center my-6"> 
-                    <p ref={(el) => setTextRef(el, rowIndex * 6 + index * 2)} className="text-white pr-9 font-outfit">{item.name}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ))}
-          <div className="w-full h-72"></div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Events;
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
index d6be074..4e2ed8a 100644
--- a/src/components/Gallery.tsx
+++ b/src/components/Gallery.tsx
@@ -92,7 +92,7 @@ const Gallery: React.FC = () => {
       <div
         className="fixed inset-0 z-10000"
         dangerouslySetInnerHTML={{
-          __html: `<spline-viewer url="https://prod.spline.design/csAC-rSJnjVQZbBi/scene.splinecode" style="width: 100%; height: 100%;"></spline-viewer>`,
+          __html: `<spline-viewer url="https://prod.spline.design/NPelTris6eEVQkKp/scene.splinecode" style="width: 100%; height: 100%;"></spline-viewer>`,
         }}
       ></div>
 
diff --git a/src/components/Modules.tsx b/src/components/Modules.tsx
new file mode 100644
index 0000000..11b6a04
--- /dev/null
+++ b/src/components/Modules.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import { useState, useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import axios from "axios";
+import Image from "next/image";
+import Link from "next/link";
+
+gsap.registerPlugin(ScrollTrigger);
+
+interface Module {
+  id: string;
+  name: string;
+  coverImage: string;
+}
+
+const Modules: React.FC = () => {
+  const [modules, setModules] = useState<Module[]>([]);
+
+  const imagesRef = useRef<(HTMLImageElement | null)[]>([]);
+  const textRefs = useRef<(HTMLParagraphElement | null)[]>([]);
+
+  useEffect(() => {
+    const fetchModules = async () => {
+      try {
+        const { data } = await axios.get<{ msg: Module[] }>(`${process.env.NEXT_PUBLIC_API_URL}/api/module`);
+        setModules(data.msg); 
+      } catch (error) {
+        console.error('Error fetching modules:', error);
+      }
+    };
+
+    void fetchModules();
+  }, []);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = 'https://unpkg.com/@splinetool/viewer@1.9.28/build/spline-viewer.js';
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  useEffect(() => {
+    const images = imagesRef.current;
+    const texts = textRefs.current;
+
+    images.forEach((img) => {
+      if (img) {
+        gsap.fromTo(
+          img,
+          {
+            clipPath: "polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",
+            scale: 0.8,
+            opacity: 0,
+          },
+          {
+            clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
+            scale: 1,
+            opacity: 1,
+            scrollTrigger: {
+              trigger: img,
+              start: "top 80%",
+              end: "bottom 70%",
+              scrub: true,
+            },
+          }
+        );
+      }
+    });
+
+    texts.forEach((text) => {
+      if (text) {
+        gsap.fromTo(
+          text,
+          { y: 20, opacity: 0 },
+          {
+            y: 0,
+            opacity: 1,
+            scrollTrigger: {
+              trigger: text,
+              start: "top 90%",
+              toggleActions: "play none none reverse",
+            },
+          }
+        );
+      }
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+    };
+  }, [modules]);
+
+  const setImageRef = (el: HTMLImageElement | null, index: number) => {
+    imagesRef.current[index] = el;
+  };
+
+  const setTextRef = (el: HTMLParagraphElement | null, index: number) => {
+    textRefs.current[index] = el;
+  };
+
+  return (
+    <div className="relative min-h-screen overflow-hidden">
+      <div
+        className="fixed inset-0 z-10000"
+        dangerouslySetInnerHTML={{
+          __html: `<spline-viewer url="https://prod.spline.design/NPelTris6eEVQkKp/scene.splinecode" style="width: 100%; height: 100%;"></spline-viewer>`,
+        }}
+      ></div>
+
+      <div className="relative z-10 text-white pt-[9.4rem]">
+        <div className="w-full flex flex-col gap-24">
+          {modules.map((module, index) => (
+            <div className="flex w-full h-[45vh]" key={module.id} id={`row${index + 1}`}>
+              {index % 2 === 0 ? (
+                <>
+                  <div className="flex-1 flex md:justify-end justify-center h-full">
+                    <div className="img-container right w-3/4 h-full flex flex-col justify-between">
+                      <Link href={`/allEvents/${module.id}`} className="block w-full h-full">
+                        <div className="relative w-full h-full">
+                          <Image
+                            ref={(el) => setImageRef(el, index)}
+                            src={module.coverImage}
+                            alt={module.name}
+                            className="object-cover w-full h-full border-[8px] border-[#B8B8B840] backdrop-blur-[7.6rem] cursor-pointer" // Ensures that the image takes the entire space
+                            unoptimized
+                            fill
+                          />
+                        </div>
+                      </Link>
+                      <div className="flex justify-start items-center my-6 cursor-pointer">
+                        <p ref={(el) => setTextRef(el, index * 2)} className="text-white pr-9 font-outfit">
+                          {module.name}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex-1 hidden md:flex"></div>
+                </>
+              ) : (
+                <>
+                  <div className="flex-1 hidden md:flex"></div>
+                  <div className="flex-1 flex md:justify-start justify-center h-full">
+                    <div className="img-container left w-3/4 h-full flex flex-col justify-between">
+                      <Link href={`/allEvents/${module.id}`} className="block w-full h-full">
+                        <div className="relative w-full h-full">
+                          <Image
+                            ref={(el) => setImageRef(el, index)}
+                            src={module.coverImage}
+                            alt={module.name}
+                            className="object-cover w-full h-full border-[7px] border-[#B8B8B840] backdrop-blur-[121.58px] cursor-pointer" // Ensures that the image takes the entire space
+                            unoptimized
+                            fill
+                          />
+                        </div>
+                      </Link>
+                      <div className="flex justify-start items-center my-6 cursor-pointer">
+                        <p ref={(el) => setTextRef(el, index * 2)} className="text-white pr-9 font-outfit">
+                          {module.name}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          ))}
+          <div className="w-full h-72"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modules;