diff --git a/client/src/components/footer.rs b/client/src/components/footer.rs
new file mode 100644
index 0000000..348421a
--- /dev/null
+++ b/client/src/components/footer.rs
@@ -0,0 +1,22 @@
+use leptos::prelude::*;
+use thaw::*;
+
+#[component]
+pub fn Footer() -> impl IntoView {
+    view! {
+        <div
+            class="fixed sm:static bottom-0 left-0 w-full sm:w-auto"
+            style="background-color: var(--colorNeutralBackground4);"
+        >
+            <Divider />
+            <div class="m-2">
+                <Link class="p-2" href="https://git.doordesk.net/adam/cards/">
+                    "About"
+                </Link>
+                <Link class="p-2" href="mailto:adam@doordesk.net">
+                    "Contact"
+                </Link>
+            </div>
+        </div>
+    }
+}
diff --git a/client/src/components/header.rs b/client/src/components/header.rs
new file mode 100644
index 0000000..964ac3c
--- /dev/null
+++ b/client/src/components/header.rs
@@ -0,0 +1,50 @@
+use crate::components::auth::*;
+use crate::components::theme_button::*;
+use leptos::prelude::*;
+use thaw::*;
+
+#[component]
+pub fn Header() -> impl IntoView {
+    let selected_value = expect_context::<RwSignal<String>>();
+
+    view! {
+        <div class="flex flex-wrap justify-between">
+            <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
+                "Cards For Humanity"
+            </h1>
+            <ThemeButton />
+        </div>
+        <div class="flex justify-between">
+            <TabList selected_value>
+                <Tab value="home">
+                    <Button
+                        appearance=ButtonAppearance::Transparent
+                        icon=icondata::BiHomeAlt2Regular
+                    />
+                </Tab>
+                <Tab value="browser">
+                    <Button
+                        appearance=ButtonAppearance::Transparent
+                        icon=icondata::RiMenuSearchSystemLine
+                    />
+                </Tab>
+                <Tab value="game">
+                    <Button appearance=ButtonAppearance::Transparent icon=icondata::LuGamepad />
+                </Tab>
+                <Tab value="chat">
+                    <Button
+                        appearance=ButtonAppearance::Transparent
+                        icon=icondata::BsChatLeftText
+                    />
+                </Tab>
+                <Tab value="debug">
+                    <Button appearance=ButtonAppearance::Transparent icon=icondata::AiBugOutlined />
+                </Tab>
+            </TabList>
+            <div class="mt-2">
+                <Auth />
+            </div>
+        </div>
+        <Divider />
+    }
+}
diff --git a/client/src/components/mod.rs b/client/src/components/mod.rs
index cf3252c..409e2c2 100644
--- a/client/src/components/mod.rs
+++ b/client/src/components/mod.rs
@@ -2,6 +2,8 @@ pub mod auth;
 pub mod browser;
 pub mod chat;
 pub mod debug;
+pub mod footer;
 pub mod game;
+pub mod header;
 pub mod theme_button;
 pub mod websocket;
diff --git a/client/src/pages/home.rs b/client/src/pages/home.rs
index 83884c1..3efff6d 100644
--- a/client/src/pages/home.rs
+++ b/client/src/pages/home.rs
@@ -1,9 +1,9 @@
-use crate::components::auth::*;
 use crate::components::browser::*;
 use crate::components::chat::*;
 use crate::components::debug::*;
+use crate::components::footer::*;
 use crate::components::game::*;
-use crate::components::theme_button::*;
+use crate::components::header::*;
 use crate::components::websocket::*;
 use leptos::prelude::*;
 use thaw::*;
@@ -12,15 +12,14 @@ use thaw::*;
 #[component]
 pub fn Home() -> impl IntoView {
     let modal = RwSignal::new(false);
+    let selected_value = RwSignal::new("home".to_string());
+    provide_context(selected_value);
 
     // Suppress modal during development
     if !cfg!(debug_assertions) {
         modal.set(true);
     };
 
-    let selected_value = RwSignal::new("home".to_string());
-    provide_context(selected_value);
-
     view! {
         <ErrorBoundary fallback=|errors| {
             view! {
@@ -47,52 +46,7 @@ pub fn Home() -> impl IntoView {
                     class="p-1 sm:p-5 sm:rounded-2xl sm:shadow-black sm:shadow-lg min-h-screen sm:min-h-0"
                     style="background-color: var(--colorNeutralBackground4);"
                 >
-                    // Header
-                    <div class="flex flex-wrap justify-between">
-                        <h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
-                            "Cards For Humanity"
-                        </h1>
-                        <ThemeButton />
-                    </div>
-                    <div class="flex justify-between">
-                        <TabList selected_value>
-                            <Tab value="home">
-                                <Button
-                                    appearance=ButtonAppearance::Transparent
-                                    icon=icondata::BiHomeAlt2Regular
-                                />
-                            </Tab>
-                            <Tab value="browser">
-                                <Button
-                                    appearance=ButtonAppearance::Transparent
-                                    icon=icondata::RiMenuSearchSystemLine
-                                />
-                            </Tab>
-                            <Tab value="game">
-                                <Button
-                                    appearance=ButtonAppearance::Transparent
-                                    icon=icondata::LuGamepad
-                                />
-                            </Tab>
-                            <Tab value="chat">
-                                <Button
-                                    appearance=ButtonAppearance::Transparent
-                                    icon=icondata::BsChatLeftText
-                                />
-                            </Tab>
-                            <Tab value="debug">
-                                <Button
-                                    appearance=ButtonAppearance::Transparent
-                                    icon=icondata::AiBugOutlined
-                                />
-                            </Tab>
-                        </TabList>
-                        <div class="mt-2">
-                            <Auth />
-                        </div>
-                    </div>
-                    <Divider />
-
+                    <Header />
                     <Show when=move || selected_value() == "home".to_string()>
                         <div class="p-4">
                             <h2 class="text-2xl">"Hey!"</h2>
@@ -121,21 +75,7 @@ pub fn Home() -> impl IntoView {
                         <Debug />
                     </Show>
 
-                    // Footer
-                    <div
-                        class="fixed sm:static bottom-0 left-0 w-full sm:w-auto"
-                        style="background-color: var(--colorNeutralBackground4);"
-                    >
-                        <Divider />
-                        <div class="m-2">
-                            <Link class="p-2" href="https://git.doordesk.net/adam/cards/">
-                                "About"
-                            </Link>
-                            <Link class="p-2" href="mailto:adam@doordesk.net">
-                                "Contact"
-                            </Link>
-                        </div>
-                    </div>
+                    <Footer />
                 </div>
             </div>
         </ErrorBoundary>