diff --git a/src/App.tsx b/src/App.tsx
index 1293ebf..8a233e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,7 @@ import ToastViewport from "./components/toasts/ToastViewport";
 import Navbar from "./components/Navbar";
 import GameplayNavbar from "./components/GameplayNavbar";
 import { routeConfig } from "./config/routes";
+import NotFound from "./pages/NotFound";
 
 const Home = () => (
   <>
@@ -42,7 +43,7 @@ function App() {
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<Home />} />
-          {routeConfig
+           {routeConfig
             .filter((route) => route.isLazy && route.component)
             .map((route) => (
               <Route
@@ -50,14 +51,10 @@ function App() {
                 path={route.path}
                 element={<route.component />}
               />
-            ))}
+            ))} 
           <Route
             path="*"
-            element={
-              <div className="h-screen flex items-center justify-center text-white text-2xl">
-                404 — Page Not Found
-              </div>
-            }
+            element={<NotFound />}
           />
         </Routes>
       </Suspense>
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 5141796..38b6e63 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -3,11 +3,11 @@ import { Link } from "react-router-dom";
 export default function NotFound() {
   return (
     <div className="h-screen flex flex-col items-center justify-center gap-4 text-white">
-      <h1 className="text-6xl font-bold">404</h1>
+      <h1 className="text-8xl font-bold text-[#CFFDED]">404</h1>
       <p className="text-xl text-gray-400">Page not found</p>
       <Link
         to="/"
-        className="mt-4 px-6 py-2 bg-white text-black rounded-full font-medium hover:bg-gray-200 transition"
+        className="mt-4 px-6 py-2 bg-[#CFFDED] text-black rounded-full font-medium hover:bg-gray-200 transition"
       >
         Go Home
       </Link>