diff --git a/package-lock.json b/package-lock.json
index 90e9525..0603eea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@reduxjs/toolkit": "^2.2.6",
         "@supabase/ssr": "^0.4.0",
+        "@types/sharp": "^0.31.1",
         "@vercel/analytics": "^1.3.1",
         "@vercel/speed-insights": "^1.0.12",
         "axios": "^1.7.2",
@@ -2244,6 +2245,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/sharp": {
+      "version": "0.31.1",
+      "resolved": "https://registry.npmjs.org/@types/sharp/-/sharp-0.31.1.tgz",
+      "integrity": "sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
diff --git a/package.json b/package.json
index a785146..3c2d9b2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.6",
     "@supabase/ssr": "^0.4.0",
+    "@types/sharp": "^0.31.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "axios": "^1.7.2",
diff --git a/src/app/api/v1/create/event/route.ts b/src/app/api/v1/create/event/route.ts
index dd1454d..1edbf46 100644
--- a/src/app/api/v1/create/event/route.ts
+++ b/src/app/api/v1/create/event/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { createClient } from "@/utils/supabase/server";
 import { Tables } from "@/types/supabase";
+//@ts-ignore
 import sharp from "sharp";
 
 async function convertToAvif(inputFile: File): Promise<File> {
diff --git a/src/app/event/page.jsx b/src/app/event/page.jsx
deleted file mode 100644
index fb16bb3..0000000
--- a/src/app/event/page.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { redirect } from "next/navigation";
-function Page() {
-  redirect("/events");
-}
-
-export default Page;
diff --git a/src/app/event/[id]/components/currentWindowSize.jsx b/src/app/events/[id]/components/currentWindowSize.jsx
similarity index 100%
rename from src/app/event/[id]/components/currentWindowSize.jsx
rename to src/app/events/[id]/components/currentWindowSize.jsx
diff --git a/src/app/event/[id]/components/event.jsx b/src/app/events/[id]/components/event.jsx
similarity index 100%
rename from src/app/event/[id]/components/event.jsx
rename to src/app/events/[id]/components/event.jsx
diff --git a/src/app/event/[id]/components/eventConvenors.jsx b/src/app/events/[id]/components/eventConvenors.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventConvenors.jsx
rename to src/app/events/[id]/components/eventConvenors.jsx
diff --git a/src/app/event/[id]/components/eventDetails.jsx b/src/app/events/[id]/components/eventDetails.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventDetails.jsx
rename to src/app/events/[id]/components/eventDetails.jsx
diff --git a/src/app/event/[id]/components/eventDuration.jsx b/src/app/events/[id]/components/eventDuration.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventDuration.jsx
rename to src/app/events/[id]/components/eventDuration.jsx
diff --git a/src/app/event/[id]/components/eventMode.jsx b/src/app/events/[id]/components/eventMode.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventMode.jsx
rename to src/app/events/[id]/components/eventMode.jsx
diff --git a/src/app/event/[id]/components/eventPoster.jsx b/src/app/events/[id]/components/eventPoster.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventPoster.jsx
rename to src/app/events/[id]/components/eventPoster.jsx
diff --git a/src/app/event/[id]/components/eventPrizes.jsx b/src/app/events/[id]/components/eventPrizes.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventPrizes.jsx
rename to src/app/events/[id]/components/eventPrizes.jsx
diff --git a/src/app/event/[id]/components/eventRequirements.jsx b/src/app/events/[id]/components/eventRequirements.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventRequirements.jsx
rename to src/app/events/[id]/components/eventRequirements.jsx
diff --git a/src/app/event/[id]/components/eventVenue.jsx b/src/app/events/[id]/components/eventVenue.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventVenue.jsx
rename to src/app/events/[id]/components/eventVenue.jsx
diff --git a/src/app/event/[id]/components/eventWinners.jsx b/src/app/events/[id]/components/eventWinners.jsx
similarity index 100%
rename from src/app/event/[id]/components/eventWinners.jsx
rename to src/app/events/[id]/components/eventWinners.jsx
diff --git a/src/app/event/[id]/fetchEvent.jsx b/src/app/events/[id]/fetchEvent.jsx
similarity index 100%
rename from src/app/event/[id]/fetchEvent.jsx
rename to src/app/events/[id]/fetchEvent.jsx
diff --git a/src/app/event/[id]/page.jsx b/src/app/events/[id]/page.jsx
similarity index 100%
rename from src/app/event/[id]/page.jsx
rename to src/app/events/[id]/page.jsx
diff --git a/src/app/event/layout.tsx b/src/app/events/layout.tsx
similarity index 100%
rename from src/app/event/layout.tsx
rename to src/app/events/layout.tsx
diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx
new file mode 100644
index 0000000..13f54e9
--- /dev/null
+++ b/src/app/events/page.jsx
@@ -0,0 +1,117 @@
+"use client";
+import { useEffect, useState } from "react";
+import EventBox from "../../components/ui/EventBox";
+import { getPublicUrl } from "@/lib/utils"
+function Page() {
+  const [events, setEvents] = useState([]);
+  const [nextPageEvents, setNextPageEvents] = useState([]);
+  const [pageCount, setPageCount] = useState(1);
+  const [hasMoreEvents, setHasMoreEvents] = useState(true);
+  const [columnCount, setColumnCount] = useState(3); 
+
+  const fetchEvents = async (page) => {
+    try {
+      const response = await fetch(`/api/v1/get/events?page=${page}`);
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error fetching events:", error);
+      return [];
+    }
+  };
+
+  const getMoreEvents = async () => {
+    setEvents((prevEvents) => [...prevEvents, ...nextPageEvents]);
+    setPageCount((prev) => prev + 1);
+
+    const newEvents = await fetchEvents(pageCount + 2);
+    if (newEvents.length === 0) {
+      setHasMoreEvents(false);
+    } else {
+      setNextPageEvents(newEvents);
+    }
+  };
+
+  useEffect(() => {
+    const loadInitialEvents = async () => {
+      const firstPageEvents = await fetchEvents(pageCount);
+      const secondPageEvents = await fetchEvents(pageCount + 1);
+
+      setEvents(firstPageEvents);
+      setNextPageEvents(secondPageEvents);
+
+      if (secondPageEvents.length === 0) {
+        setHasMoreEvents(false);
+      }
+    };
+
+   
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setColumnCount(2); 
+      } else {
+        setColumnCount(3);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); 
+    loadInitialEvents();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const columns = Array.from({ length: columnCount }, () => []);
+
+  events.forEach((event, index) => {
+    let posterUrl = getPublicUrl(`/events/${event.id}/poster`)
+
+    columns[index % columnCount].push(
+      <EventBox
+      img={posterUrl}
+        key={event.id}
+        caption={event.description}
+        time={event.date}
+        category={event.name}
+        hostLink={event.host_link}
+      />
+    );
+  });
+
+  return (
+    <div className="flex flex-col w-full h-full">
+      <div className="self-center h-fit py-2 w-11/12 flex flex-col bg-[#201f31] mt-4">
+        <p className="md:pl-12 pt-5 text-2xl font-medium mb-7 ">Events Near</p>
+        <div className="self-center w-full grid grid-flow-row grid-cols-2 md:grid-cols-3">
+          {columns.map((column, colIndex) => (
+            <section
+              key={colIndex}
+              className={`h-fit w-full gap-8 py-4 grid grid-flow-row md:pl-12 ${
+                colIndex === 1 && columnCount === 3 ? "mt-32" : ""
+              }
+              ${
+                colIndex === 1 && columnCount === 2 ? "mt-20" : ""
+              }`
+               }
+            >
+              {column}
+            </section>
+          ))}
+        </div>
+        {hasMoreEvents && (
+          <button
+            onClick={getMoreEvents}
+            className="text-sm md:text-xl hover:border-[#e890bd] text-[#FFBADE] border-[#FFBADE] border-[0.5vh] w-fit px-24 md:px-32  active:scale-95 transition-all duration-100 self-center rounded-3xl py-3"
+          >
+            Show More
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Page;
+
diff --git a/src/components/ui/EventBox.jsx b/src/components/ui/EventBox.jsx
new file mode 100644
index 0000000..862eb53
--- /dev/null
+++ b/src/components/ui/EventBox.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+function EventBox({ time, category, caption, secondCat = false, hostLink , img }) {
+  return (
+    <div >
+      <div style={{
+      backgroundImage:`url(${img})`,
+      backgroundPosition:"center",
+      backgroundRepeat:"no-repeat",
+      backgroundSize:"cover"
+    }}
+        className={`w-11/12 ${
+          secondCat ? "h-24 md:h-40" : "h-40 md:h-60"
+        } rounded-3xl ${
+          secondCat ? "border-[0.1vh]" : "border-[0.4vh] md:border-[1vh]"
+        } border-[#FFBADE]`}
+      ></div>
+      <p className="text-[#FFBADE] px-2 md:ml-2 font-mono text-xl md:text-2xl">
+        {time}
+      </p>
+      <p className="text-[#FFBADE] px-2 md:ml-2 font-mono text-nowrap  text-xs md:text-xl">
+        {category}
+      </p>
+      <a
+        href={hostLink}
+        className="text-white md:ml-2 hover:underline text-center self-center text-xs md:text-2xl px-2 font-semibold"
+      >
+        {caption}
+      </a>
+    </div>
+  );
+}
+
+export default EventBox;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0fae762..273a9a4 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,4 @@
 import { type ClassValue, clsx } from "clsx";
-import sharp from "sharp";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -7,5 +6,5 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export const getPublicUrl = (path: string) => {
-  return `https://${process.env.PROJECT_ID}.supabase.co/storage/v1/object/public/${process.env.BUCKET}${path}`;
+  return `https://${process.env.NEXT_PUBLIC_PROJECT_ID}.supabase.co/storage/v1/object/public/${process.env.NEXT_PUBLIC_BUCKET}${path}`;
 };