diff --git a/client/src/components/debug.rs b/client/src/components/debug.rs
new file mode 100644
index 0000000..8590772
--- /dev/null
+++ b/client/src/components/debug.rs
@@ -0,0 +1,75 @@
+use crate::components::websocket::WebSocketContext;
+use leptos::*;
+use leptos_use::core::ConnectionReadyState;
+use lib::models::*;
+use serde_json::to_string;
+
+#[component]
+pub fn Debug() -> impl IntoView {
+    let websocket = expect_context::<WebSocketContext>();
+    let state_summary = expect_context::<ReadSignal<Option<ServerStateSummary>>>();
+
+    // Signals
+    let (online_users, set_online_users) = create_signal(0);
+    let (active_games, set_active_games) = create_signal(0);
+
+    // Websocket stuff
+    let status = move || websocket.ready_state.get().to_string();
+    let connected = move || websocket.ready_state.get() == ConnectionReadyState::Open;
+    let open_connection = move |_| {
+        (websocket.open)();
+    };
+
+    let close_connection = move |_| {
+        (websocket.close)();
+        set_online_users(0);
+        set_active_games(0);
+    };
+
+    let fake_new_game_request = NewGameRequest {
+        name: String::from("Ligma"),
+        host: Player {
+            name: String::from("Adam"),
+            role: PlayerRole::Host,
+            white: vec![],
+            black: vec![],
+        },
+        packs: vec![0],
+    };
+
+    // Game stuff
+    let new_game_test = move |_| {
+        (websocket.send)(&to_string(&fake_new_game_request).unwrap());
+    };
+
+    // Update server info -> move this to a new component
+    create_effect(move |_| {
+        state_summary.with(move |state_summary| {
+            if let Some(state_summary) = state_summary {
+                set_online_users(state_summary.online_users);
+                set_active_games(state_summary.active_games);
+            }
+        })
+    });
+
+    view! {
+        <div class="w-auto">
+            <hr/>
+            <h2 class="p-1 text-2xl">Debug:</h2>
+            <p class="p-1">"Connection Status: " {status}</p>
+            <p class="p-1">"Users Online: " {online_users}</p>
+            <p class="p-1">"Active Games: " {active_games}</p>
+            <div class="p-1">
+                <button on:click=open_connection disabled=connected>
+                    "Connect"
+                </button>
+                <button on:click=close_connection disabled=move || !connected()>
+                    "Disconnect"
+                </button>
+                <button on:click=new_game_test disabled=move || !connected()>
+                    "Test New Game"
+                </button>
+            </div>
+        </div>
+    }
+}
diff --git a/client/src/components/mod.rs b/client/src/components/mod.rs
index 9b3e39b..9e8cf65 100644
--- a/client/src/components/mod.rs
+++ b/client/src/components/mod.rs
@@ -1,3 +1,4 @@
 pub mod auth;
 pub mod chat;
+pub mod debug;
 pub mod websocket;
diff --git a/client/src/components/websocket.rs b/client/src/components/websocket.rs
index 96479b3..bf5c0bc 100644
--- a/client/src/components/websocket.rs
+++ b/client/src/components/websocket.rs
@@ -3,13 +3,15 @@ use std::rc::Rc;
 use leptos::*;
 use leptos_use::{core::ConnectionReadyState, use_websocket, UseWebsocketReturn};
 use lib::models::*;
-use serde_json::to_string;
+use serde_json::from_str;
 
 #[derive(Clone)]
 pub struct WebSocketContext {
     pub ready_state: Signal<ConnectionReadyState>,
     // pub message: Signal<Option<String>>,
-    send: Rc<dyn Fn(&str)>,
+    pub send: Rc<dyn Fn(&str)>,
+    pub open: Rc<dyn Fn()>,
+    pub close: Rc<dyn Fn()>,
 }
 
 impl WebSocketContext {
@@ -17,11 +19,15 @@ impl WebSocketContext {
         ready_state: Signal<ConnectionReadyState>,
         // message: Signal<Option<String>>,
         send: Rc<dyn Fn(&str)>,
+        open: Rc<dyn Fn()>,
+        close: Rc<dyn Fn()>,
     ) -> Self {
         Self {
             ready_state,
             // message,
             send,
+            open,
+            close,
         }
     }
 
@@ -29,6 +35,17 @@ impl WebSocketContext {
     pub fn send(&self, message: &str) {
         (self.send)(message)
     }
+
+    #[inline(always)]
+    pub fn open(&self) {
+        (self.open)()
+    }
+
+    #[inline(always)]
+    pub fn close(&self) {
+        (self.close)()
+    }
+
 }
 
 #[component]
@@ -46,41 +63,10 @@ pub fn Websocket() -> impl IntoView {
         ready_state,
         // message,
         Rc::new(send.clone()),
+        Rc::new(open.clone()),
+        Rc::new(close.clone()),
     ));
 
-    // Signals
-    let (online_users, set_online_users) = create_signal(0);
-    let (active_games, set_active_games) = create_signal(0);
-
-    // Websocket stuff
-    let status = move || ready_state.get().to_string();
-    let connected = move || ready_state.get() == ConnectionReadyState::Open;
-    let open_connection = move |_| {
-        open();
-    };
-
-    let fake_new_game_request = NewGameRequest {
-        name: String::from("Ligma"),
-        host: Player {
-            name: String::from("Adam"),
-            role: PlayerRole::Host,
-            white: vec![],
-            black: vec![],
-        },
-        packs: vec![0],
-    };
-
-    let close_connection = move |_| {
-        close();
-        set_online_users(0);
-        set_active_games(0);
-    };
-
-    // Game stuff
-    let new_game_test = move |_| {
-        send(&to_string(&fake_new_game_request).unwrap());
-    };
-
     // Contexts for message handler
     let (state_summary, set_state_summary) =
         create_signal::<Option<ServerStateSummary>>(Option::None);
@@ -97,13 +83,13 @@ pub fn Websocket() -> impl IntoView {
             // Send all messages as strings into chat box
 
             if let Some(message) = message_raw {
-                if let Ok(game) = serde_json::from_str::<Game>(message) {
+                if let Ok(game) = from_str::<Game>(message) {
                     set_game_object(Some(game));
                 } else if let Ok(state_summary) =
-                    serde_json::from_str::<ServerStateSummary>(message)
+                    from_str::<ServerStateSummary>(message)
                 {
                     set_state_summary(Some(state_summary));
-                } else if let Ok(chat_message) = serde_json::from_str::<ChatMessage>(message) {
+                } else if let Ok(chat_message) = from_str::<ChatMessage>(message) {
                     set_chat_message(Some(chat_message));
                 } else {
                     logging::log!("Unhandled message: {}", message);
@@ -111,35 +97,4 @@ pub fn Websocket() -> impl IntoView {
             }
         })
     });
-
-    // Update server info -> move this to a new component
-    create_effect(move |_| {
-        state_summary.with(move |state_summary| {
-            if let Some(state_summary) = state_summary {
-                set_online_users(state_summary.online_users);
-                set_active_games(state_summary.active_games);
-            }
-        })
-    });
-
-    view! {
-        <div class="w-auto">
-            <hr/>
-            <h2 class="p-1 text-2xl">Server Info:</h2>
-            <p class="p-1">"Connection Status: " {status}</p>
-            <p class="p-1">"Users Online: " {online_users}</p>
-            <p class="p-1">"Active Games: " {active_games}</p>
-            <div class="p-1">
-                <button on:click=open_connection disabled=connected>
-                    "Connect"
-                </button>
-                <button on:click=close_connection disabled=move || !connected()>
-                    "Disconnect"
-                </button>
-                <button on:click=new_game_test disabled=move || !connected()>
-                    "Test New Game"
-                </button>
-            </div>
-        </div>
-    }
 }
diff --git a/client/src/pages/home.rs b/client/src/pages/home.rs
index 53dec3b..77a20a8 100644
--- a/client/src/pages/home.rs
+++ b/client/src/pages/home.rs
@@ -1,5 +1,6 @@
 use crate::components::auth::*;
 use crate::components::chat::*;
+use crate::components::debug::*;
 use crate::components::websocket::*;
 use leptos::*;
 
@@ -35,6 +36,8 @@ pub fn Home() -> impl IntoView {
                     <hr/>
                     <Chat/>
                     <hr/>
+                    <Debug/>
+                    <hr/>
                     <a href="https://git.doordesk.net/adam/cards/">git</a>
                 </div>
             </div>