diff --git a/.eslintrc.json b/.eslintrc.json
index 3722418..1a1ad7a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }
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..b998cdb
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,19 @@
+'use client';
+import React from 'react';
+import Header from '../../components/custom/header';
+import Footer from '../../components/custom/footer';
+
+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 b00b890..5e80639 100644
--- a/components/custom/header.tsx
+++ b/components/custom/header.tsx
@@ -51,7 +51,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"
                   style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}