diff --git a/src/App.jsx b/src/App.jsx
index 99d8d90b1..2da0e4b84 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,13 +15,14 @@ import VerticalTimeline from './Components/Timeline';
 import Carousel from './Components/Carousel';
 import Hero from './Components/Hero';
 import Footer from "./Components/Footer"
+import ErrorPageWithButton from './Components/ErrorPageWithButton';
 
 
 const Homepage = () => {
   return (
     <div>
       <Hero />
-       {/* Text Section between Hero and Carousel */}
+      {/* Text Section between Hero and Carousel */}
       <div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
         <h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
         <p className="text-xl">
@@ -51,6 +52,7 @@ function App() {
         <Route path="/achievements" element={<Achievements />} />
         <Route path="/past-projects" element={<PastProjects />} />
         <Route path="/upcoming-projects" element={<UpcomingProjects />} />
+        <Route path="*" element={<ErrorPageWithButton />} />
         {/* <Route path="/time" element={<VerticalTimeline />} /> */}
 
         {/* <Route path="/" element={<OrderManagement />} /> */}
@@ -65,4 +67,4 @@ function App() {
 
 export default App;
 
-{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }
\ No newline at end of file
+{/* <div class="relative h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div> */ }
diff --git a/src/Components/ErrorPageWithButton.jsx b/src/Components/ErrorPageWithButton.jsx
new file mode 100644
index 000000000..d9a3f5caf
--- /dev/null
+++ b/src/Components/ErrorPageWithButton.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+const ErrorPageWithButton = () => {
+    const navigate = useNavigate();
+
+    return (
+        <div className="flex flex-col items-center justify-center h-screen space-y-12 px-6 py-4 overflow-hidden">
+            <h1 className="text-[12rem] sm:text-[8rem] md:text-[8rem] leading-none tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-[#00FFFF] to-[#FF00FF] animate-pulse">
+                404!
+            </h1>
+            <h2 className="text-3xl sm:text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#00FFFF] to-[#FF00FF] tracking-wide animate-wiggle">
+                Oops, Page Not Found!
+            </h2>
+            <button
+                className="mt-8 font-bold tracking-widest text-[#00FFFF] border-2 border-[#00FFFF] px-6 py-3 rounded-lg hover:bg-[#00FFFF]/20 hover:text-[#FF00FF] transition duration-500 ease-in-out transform hover:-translate-y-4 hover:scale-110 animate-bounce"
+                onClick={() => navigate('/')}
+                aria-label="Return to homepage"
+            >
+                Return to Home
+            </button>
+        </div>
+    );
+};
+
+export default ErrorPageWithButton;