diff --git a/src/main.rs b/src/main.rs
index 70ffd41..a571e63 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -10,18 +10,28 @@ mod pages;
 
 use fermi::{use_atom_ref, use_init_atom_root, AtomRef};
 use hooks::mode::init_mode_info;
+use pages::_404::NotFound;
 use pages::starter::{About, HelloDioxus, SayHi};
 
 static TOAST_MANAGER: AtomRef<ToastManager> = AtomRef(|_| ToastManager::default());
 
 #[derive(Clone, Debug, PartialEq, Routable)]
 enum Route {
+    // Main Page
     #[route("/")]
     HelloDioxus {},
+    
+    // Say Hi Page
     #[route("/hi/:name")]
     SayHi { name: String },
+    
+    // About Page
     #[route("/about")]
     About {},
+
+    // 404 Not Found Page
+    #[route("/:route")]
+    NotFound { route: String },
 }
 
 fn main() {
@@ -40,13 +50,7 @@ fn App(cx: Scope) -> Element {
     cx.render(rsx! {
         // dioxus toast manager init
         ToastFrame { manager: use_atom_ref(&cx, &TOAST_MANAGER) }
-        // dioxus router info
-        Router::<Route> {
-            // Route { to: "/", HelloDioxus {} }
-            // Route { to: "/hi/:name", SayHi {} }
-            // Route { to: "/about", About {} }
-            // // 404 page
-            // Route { to: "", pages::_404::NotFound {} }
-        }
+        // dioxus router init
+        Router::<Route> { }
     })
 }
diff --git a/src/pages/_404.rs b/src/pages/_404.rs
index 686008a..37293e8 100644
--- a/src/pages/_404.rs
+++ b/src/pages/_404.rs
@@ -2,7 +2,8 @@ use dioxus::prelude::*;
 
 use crate::components::footer::Footer;
 
-pub fn NotFound(cx: Scope) -> Element {
+#[component]
+pub fn NotFound(cx: Scope, route: String) -> Element {
     cx.render(rsx! {
         section { class: "h-screen bg-cover bg-white dark:bg-gray-600",
             div { class: "flex h-full w-full items-center justify-center container mx-auto px-8",