diff --git a/src/pages/home.rs b/src/pages/home.rs
new file mode 100644
index 0000000..e72cc16
--- /dev/null
+++ b/src/pages/home.rs
@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn HomePage() -> Element {
+    rsx! {
+        "Home"
+    }
+}
diff --git a/src/pages/mod.rs b/src/pages/mod.rs
index ed76a34..f23c078 100644
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -1,3 +1,4 @@
 pub mod admin;
+pub mod home;
 pub mod login;
 pub mod register;
diff --git a/src/router.rs b/src/router.rs
index 7ca1212..be1acb3 100644
--- a/src/router.rs
+++ b/src/router.rs
@@ -1,19 +1,29 @@
 use dioxus::prelude::*;
 
 use crate::pages::admin::AdminPage;
+use crate::pages::home::HomePage;
 use crate::pages::login::LoginPage;
 use crate::pages::register::RegisterPage;
-use crate::theme::{Theme, ThemeToggle, use_theme};
+use crate::theme::{Theme, use_theme};
 
 #[derive(Clone, Routable, Debug, PartialEq)]
 pub enum Route {
     #[route("/")]
+    HomePage {},
     #[route("/login")]
     LoginPage {},
     #[route("/register")]
     RegisterPage {},
     #[route("/admin")]
     AdminPage {},
+    #[route("/archives")]
+    ArchivesPage {},
+    #[route("/tags")]
+    TagsPage {},
+    #[route("/search")]
+    SearchPage {},
+    #[route("/about")]
+    AboutPage {},
 }
 
 #[component]
@@ -27,9 +37,28 @@ pub fn AppRouter() -> Element {
     rsx! {
         div {
             class: theme_class,
-            ThemeToggle {}
             Router::<Route> {}
         }
     }
 }
 
+#[component]
+pub fn ArchivesPage() -> Element {
+    rsx! { "Archives" }
+}
+
+#[component]
+pub fn TagsPage() -> Element {
+    rsx! { "Tags" }
+}
+
+#[component]
+pub fn SearchPage() -> Element {
+    rsx! { "Search" }
+}
+
+#[component]
+pub fn AboutPage() -> Element {
+    rsx! { "About" }
+}
+
diff --git a/src/theme.rs b/src/theme.rs
index 0227ad2..0b5e291 100644
--- a/src/theme.rs
+++ b/src/theme.rs
@@ -73,7 +73,7 @@ pub fn ThemeToggle() -> Element {
 
     rsx! {
         button {
-            class: "fixed top-4 right-4 z-50 p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",
+            class: "theme-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",
             onclick: move |_| theme.set(theme().toggle()),
             if theme() == Theme::Dark {
                 "🌙"