diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx
new file mode 100644
index 0000000..c4e88ba
--- /dev/null
+++ b/src/app/events/page.jsx
@@ -0,0 +1,116 @@
+"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(
+
Events Near
+