diff --git a/app/Home.tsx b/app/Home.tsx
deleted file mode 100644
index 75eb149..0000000
--- a/app/Home.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import Header from '../components/custom/header';
-import Footer from '../components/custom/footer';
-
-export default function Home() {
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  return (
-    <>
-      <Header />
-      <div className="relative min-h-screen overflow-hidden">
-        {/* Video Background */}
-        {isClient && (
-          <video
-            autoPlay
-            loop
-            muted
-            className="absolute inset-0 w-full h-full object-cover z-0"
-            src="BGVid2.mp4"
-          >
-            Your browser does not support the video tag.
-          </video>
-        )}
-
-        {/* Dark Overlay for Enhanced Readability */}
-        <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
-
-        {/* Page Content Over the Video */}
-        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
-          <div className="container mx-auto p-4">
-            <input
-              type="text"
-              placeholder="Search events..."
-              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
-            />
-            <main>
-              <section className="mb-8">
-                <h2 className="text-2xl font-semibold text-white mb-4">
-                  Featured Events
-                </h2>
-                <p className="text-gray-300">
-                  No events available at the moment.
-                </p>
-              </section>
-              <section>
-                <h2 className="text-2xl font-semibold text-white mb-4">
-                  Upcoming Events
-                </h2>
-                <ul className="list-disc list-inside text-gray-300">
-                  <li>Event 1 - Date</li>
-                  <li>Event 2 - Date</li>
-                  <li>Event 3 - Date</li>
-                </ul>
-              </section>
-            </main>
-            <Footer />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/app/TicketListings/page.tsx b/app/TicketListings/page.tsx
deleted file mode 100644
index 42e8cd6..0000000
--- a/app/TicketListings/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import TicketListings from './TicketListings';
-
-export default function Page() {
-  return (
-    <>
-      <TicketListings />
-    </>
-  );
-}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..c219b7a
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,75 @@
+'use client';
+import React, { useEffect, useState, useRef } from 'react';
+import Header from '../../components/custom/header';
+import Footer from '../../components/custom/footer';
+
+// Define the Event interface including new fields
+interface Event {
+  EventID: number;
+  name: string;
+  date: string; // Should ideally be a Date object for better handling
+  location: string;
+  ticketPrice: number; // Changed to number for sorting
+  description: string;
+  capacity: number;
+  ticketsSold: number;
+  imageUrl: string;
+  host: string; // New field for host
+}
+
+// Dummy function to fetch events
+const fetchEvents = (): Event[] => {
+  return [
+    {
+      EventID: 1,
+      name: 'Rock Concert',
+      date: '2023-12-01',
+      location: 'New York City',
+      ticketPrice: 99,
+      description: 'An exhilarating rock concert featuring famous bands.',
+      capacity: 5000,
+      ticketsSold: 4500,
+      imageUrl: 'https://via.placeholder.com/150',
+      host: 'Music Mania',
+    },
+    {
+      EventID: 2,
+      name: 'Art Expo',
+      date: '2023-11-15',
+      location: 'San Francisco',
+      ticketPrice: 55,
+      description: 'A showcase of modern art from around the world.',
+      capacity: 300,
+      ticketsSold: 260,
+      imageUrl: 'https://via.placeholder.com/150',
+      host: 'Art Lovers',
+    },
+    {
+      EventID: 3,
+      name: 'Tech Summit 2023',
+      date: '2023-12-10',
+      location: 'Chicago',
+      ticketPrice: 250,
+      description: 'The leading tech summit with top industry speakers.',
+      capacity: 2000,
+      ticketsSold: 1800,
+      imageUrl: 'https://via.placeholder.com/150',
+      host: 'Tech Alliance',
+    },
+  ];
+};
+
+const ContactPage: React.FC = () => {
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-black">
+      <Header />
+      <div className="relative z-20 container mx-auto p-4 pt-16">
+        {/* implement contact page here */}
+        <p className="text-white">Page to be implemented</p>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default ContactPage;
diff --git a/app/TicketListings/TicketListings.tsx b/app/events/page.tsx
similarity index 99%
rename from app/TicketListings/TicketListings.tsx
rename to app/events/page.tsx
index 46efa5f..7bda79c 100644
--- a/app/TicketListings/TicketListings.tsx
+++ b/app/events/page.tsx
@@ -59,7 +59,7 @@ const fetchEvents = (): Event[] => {
   ];
 };
 
-const TicketListing: React.FC = () => {
+const EventsPage: React.FC = () => {
   const [events, setEvents] = useState<Event[]>([]);
   const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -340,4 +340,4 @@ const TicketListing: React.FC = () => {
   );
 };
 
-export default TicketListing;
+export default EventsPage;
diff --git a/app/page.tsx b/app/page.tsx
index 03b69a9..75eb149 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,67 @@
-import Home from './Home';
+'use client';
+import { useEffect, useState } from 'react';
+import Header from '../components/custom/header';
+import Footer from '../components/custom/footer';
+
+export default function Home() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
-export default function Page() {
   return (
     <>
-      <Home />
+      <Header />
+      <div className="relative min-h-screen overflow-hidden">
+        {/* Video Background */}
+        {isClient && (
+          <video
+            autoPlay
+            loop
+            muted
+            className="absolute inset-0 w-full h-full object-cover z-0"
+            src="BGVid2.mp4"
+          >
+            Your browser does not support the video tag.
+          </video>
+        )}
+
+        {/* Dark Overlay for Enhanced Readability */}
+        <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+
+        {/* Page Content Over the Video */}
+        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
+          <div className="container mx-auto p-4">
+            <input
+              type="text"
+              placeholder="Search events..."
+              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
+            />
+            <main>
+              <section className="mb-8">
+                <h2 className="text-2xl font-semibold text-white mb-4">
+                  Featured Events
+                </h2>
+                <p className="text-gray-300">
+                  No events available at the moment.
+                </p>
+              </section>
+              <section>
+                <h2 className="text-2xl font-semibold text-white mb-4">
+                  Upcoming Events
+                </h2>
+                <ul className="list-disc list-inside text-gray-300">
+                  <li>Event 1 - Date</li>
+                  <li>Event 2 - Date</li>
+                  <li>Event 3 - Date</li>
+                </ul>
+              </section>
+            </main>
+            <Footer />
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/components/custom/header.tsx b/components/custom/header.tsx
index 910e978..01ce86c 100644
--- a/components/custom/header.tsx
+++ b/components/custom/header.tsx
@@ -46,7 +46,7 @@ const Header = () => {
               </Link>
             </li>
             <li>
-              <Link href="/TicketListings" legacyBehavior>
+              <Link href="/events" legacyBehavior>
                 <a className="text-white hover:text-blue-500 transition-colors duration-300">
                   Events
                 </a>