diff --git a/src/Pages/NotFound.js b/src/Pages/NotFound.js
new file mode 100644
index 0000000..03dc7eb
--- /dev/null
+++ b/src/Pages/NotFound.js
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import image from "../assets/images/notFound.png"
+const NotFound = () => {
+  const navigate = useNavigate();
+  const width = window.innerWidth;
+  console.log("width",width);
+  
+
+
+
+  return (
+    <div className="min-h-screen flex  justify-center items-center  bg-white">
+      <div className={`flex  flex-wrap justify-center  items-center`}>
+       
+        <div className=" w-[25rem] rounded-full  flex items-center justify-center">
+          <img className="w-[18rem] " src={image}></img>
+        </div>
+
+        
+        <div className=" w-[30rem] max-w-[70%]  md:text-left md:ml-10 mt-6 md:mt-0">
+          <h1 className="text-5xl md:text-left font-bold text-black">OOPS! PAGE NOT FOUND.</h1>
+          <p className="text-gray-800 md:text-left mt-4">
+            You must have picked the wrong door because I haven’t been able to lay my eye on
+            the page you’ve been searching for.
+          </p>
+          <button
+            onClick={() => navigate("/")}
+            className="mt-6 px-10 py-3 bg-blue-500 text-white font-semibold rounded-full  hover:bg-blue-600 transition-all"
+          >
+            BACK TO HOME
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/src/assets/images/notFound.png b/src/assets/images/notFound.png
new file mode 100644
index 0000000..fb434bf
Binary files /dev/null and b/src/assets/images/notFound.png differ
diff --git a/src/context/firebase.js b/src/context/firebase.js
index 263d98f..d0b48d7 100644
--- a/src/context/firebase.js
+++ b/src/context/firebase.js
@@ -6,7 +6,7 @@ import { getDownloadURL as getStorageDownloadURL, getStorage, ref as storageRef,
 import { Link, useNavigate,} from 'react-router-dom' 
 
 
-const firebaseConfig = {
+const firebaseConfig = { 
     apiKey: process.env.REACT_APP_API_KEY,
     authDomain: process.env.REACT_APP_AUTH_DOMAIN,
     projectId: process.env.REACT_APP_PROJECT_ID,
diff --git a/src/index.js b/src/index.js
index 8e3c54f..60a56c5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,6 +17,7 @@ import { FirebaseProvider } from './context/firebase';
 import MovieTicket from './Pages/MovieTicket';
 import MyTickets from './Pages/MyTickets';
 import Verify from './Pages/Verify';
+import NotFound from './Pages/NotFound';
 
 function App() {
   const location = useLocation();
@@ -42,7 +43,7 @@ function App() {
         <Route path="/Account" element={<Account />} />
         <Route path="/MovieTicket/:ticketId" element={<MovieTicket />} />
         <Route path="/Verify" element={<Verify/>}/>
-        <Route path='/*' element={<Navigate to="/" />} />
+        <Route path='/*' element={<NotFound/>} />
       </Routes>
     </>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index c6bac4b..9e45a9d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,8 +4,15 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        'sm': '640px',  // Small screens and up
+        'md': '768px',  // Medium screens and up
+        'lg': '1024px', // Large screens and up
+        'xl': '1280px', // Extra large screens and up
+        '2xl': '1536px' // 2XL screens and up
+      },
     },
   },
   plugins: [],
-  darkMode: 'class',
+  darkMode: 'class', // Enables dark mode based on a class
 };