diff --git a/src/components/frontend_layout.rs b/src/components/frontend_layout.rs
new file mode 100644
index 0000000..4035c63
--- /dev/null
+++ b/src/components/frontend_layout.rs
@@ -0,0 +1,23 @@
+use dioxus::prelude::*;
+
+use crate::components::footer::Footer;
+use crate::components::header::Header;
+use crate::components::nav::use_nav_items;
+use crate::router::Route;
+use crate::theme::ThemeToggle;
+
+#[component]
+pub fn FrontendLayout() -> Element {
+    let route = use_route::<Route>();
+    let nav_items = use_nav_items(route);
+
+    rsx! {
+        div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20] transition-colors duration-300",
+            Header { nav_items, right_content: rsx! { ThemeToggle {} } }
+            main { class: "flex-1 w-full max-w-3xl mx-auto px-6 py-6",
+                Outlet::<Route> {}
+            }
+            Footer {}
+        }
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 9dba92a..ee4f14b 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,6 +1,7 @@
 pub mod admin_layout;
 pub mod admin_skeleton;
 pub mod footer;
+pub mod frontend_layout;
 pub mod header;
 pub mod nav;
 pub mod page_layout;