diff --git a/client/Cargo.lock b/client/Cargo.lock
index da511b8..3cc34f9 100644
--- a/client/Cargo.lock
+++ b/client/Cargo.lock
@@ -28,6 +28,17 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "async-trait"
+version = "0.1.76"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "531b97fb4cd3dfdce92c35dedbfdc1f0b9d8091c8ca943d6dae340ef5012d514"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "attribute-derive"
 version = "0.9.2"
@@ -134,6 +145,7 @@ dependencies = [
  "console_error_panic_hook",
  "console_log",
  "leptos",
+ "leptos-use",
  "leptos_meta",
  "leptos_router",
  "log",
@@ -211,6 +223,52 @@ dependencies = [
  "unicode-segmentation",
 ]
 
+[[package]]
+name = "cookie"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
+dependencies = [
+ "percent-encoding",
+ "time",
+ "version_check",
+]
+
+[[package]]
+name = "darling"
+version = "0.20.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6f63b86c8a8826a49b8c21f08a2d07338eec8d900540f8630dc76284be802989"
+dependencies = [
+ "darling_core",
+ "darling_macro",
+]
+
+[[package]]
+name = "darling_core"
+version = "0.20.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "95133861a8032aaea082871032f5815eb9e98cef03fa916ab4500513994df9e5"
+dependencies = [
+ "fnv",
+ "ident_case",
+ "proc-macro2",
+ "quote",
+ "strsim",
+ "syn",
+]
+
+[[package]]
+name = "darling_macro"
+version = "0.20.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d336a2a514f6ccccaa3e09b02d41d35330c07ddf03a62165fcec10bb561c7806"
+dependencies = [
+ "darling_core",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "dashmap"
 version = "5.5.3"
@@ -224,6 +282,27 @@ dependencies = [
  "parking_lot_core",
 ]
 
+[[package]]
+name = "default-struct-builder"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8fa90da96b8fd491f5754d1f7a731f73921e3b7aa0ce333c821a0e43666ac14"
+dependencies = [
+ "darling",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "deranged"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b42b6fa04a440b495c8b04d0e71b707c585f83cb9cb28cf8cd0d976c315e31b4"
+dependencies = [
+ "powerfmt",
+]
+
 [[package]]
 name = "derive-where"
 version = "1.2.7"
@@ -391,6 +470,18 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@@ -447,6 +538,12 @@ dependencies = [
  "itoa",
 ]
 
+[[package]]
+name = "ident_case"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
+
 [[package]]
 name = "idna"
 version = "0.5.0"
@@ -529,6 +626,29 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "leptos-use"
+version = "0.10.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3272d90b77cdbb99e9060f90eb6f5738e56128b2f912db57a50efb006a26e262"
+dependencies = [
+ "async-trait",
+ "cfg-if",
+ "cookie",
+ "default-struct-builder",
+ "futures-util",
+ "gloo-timers",
+ "gloo-utils",
+ "js-sys",
+ "lazy_static",
+ "leptos",
+ "paste",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "leptos_config"
 version = "0.6.12"
@@ -773,6 +893,12 @@ dependencies = [
  "minimal-lexical",
 ]
 
+[[package]]
+name = "num-conv"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
+
 [[package]]
 name = "oco_ref"
 version = "0.1.1"
@@ -868,6 +994,12 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
 
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
 [[package]]
 name = "prettyplease"
 version = "0.2.15"
@@ -1226,6 +1358,12 @@ version = "1.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4dccd0940a2dcdf68d092b8cbab7dc0ad8fa938bf95787e1b916b0e3d0e8e970"
 
+[[package]]
+name = "strsim"
+version = "0.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
+
 [[package]]
 name = "syn"
 version = "2.0.41"
@@ -1269,6 +1407,37 @@ dependencies = [
  "syn",
 ]
 
+[[package]]
+name = "time"
+version = "0.3.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5dfd88e563464686c916c7e46e623e520ddc6d79fa6641390f2e3fa86e83e885"
+dependencies = [
+ "deranged",
+ "itoa",
+ "num-conv",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef927ca75afb808a4d64dd374f00a2adf8d0fcff8e7b184af886c3c87ec4a3f3"
+
+[[package]]
+name = "time-macros"
+version = "0.2.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f252a68540fde3a3877aeea552b832b40ab9a69e318efd078774a01ddee1ccf"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
 [[package]]
 name = "tinyvec"
 version = "1.6.0"
diff --git a/client/Cargo.toml b/client/Cargo.toml
index 5c0a599..ca55952 100644
--- a/client/Cargo.toml
+++ b/client/Cargo.toml
@@ -19,6 +19,7 @@ leptos_router = { version = "0.6", features = ["csr", "nightly"] }
 console_log = "1"
 log = "0.4"
 console_error_panic_hook = "0.1"
+leptos-use = "0.10.10"
 
 # utils
 # strum = { version = "0.25", features = ["derive", "strum_macros"] }
diff --git a/client/index.html b/client/index.html
index 084e291..d60299b 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,5 +11,5 @@
     <!-- include support for `wasm-bindgen --weak-refs` - see: https://rustwasm.github.io/docs/wasm-bindgen/reference/weak-references.html -->
     <link data-trunk rel="rust" data-target-path="client" data-wasm-opt="z" data-weak-refs />
   </head>
-  <body class="bg-black"></body>
+  <body></body>
 </html>
diff --git a/client/public/styles.css b/client/public/styles.css
index b5c61c9..5e2f808 100644
--- a/client/public/styles.css
+++ b/client/public/styles.css
@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* html, body { */
+/*     @apply bg-slate-900; */
+/* } */
+button {
+  @apply
+    bg-slate-600
+    border-b-4
+    border-slate-800
+    font-bold
+    hover:bg-slate-700
+    hover:border-slate-500
+    px-4
+    py-2
+    rounded
+    text-white
+    ;
+}
diff --git a/client/src/components/counter_btn.rs b/client/src/components/counter_btn.rs
deleted file mode 100644
index a45d231..0000000
--- a/client/src/components/counter_btn.rs
+++ /dev/null
@@ -1,15 +0,0 @@
-use leptos::*;
-
-/// A parameterized incrementing button
-#[component]
-pub fn Button(#[prop(default = 1)] increment: i32) -> impl IntoView {
-    let (count, set_count) = create_signal(0);
-    view! {
-        <button on:click=move |_| {
-            set_count(count() + increment)
-        }>
-
-            "Ligma: " {count}
-        </button>
-    }
-}
diff --git a/client/src/components/mod.rs b/client/src/components/mod.rs
index d0af89d..6eba44d 100644
--- a/client/src/components/mod.rs
+++ b/client/src/components/mod.rs
@@ -1 +1 @@
-pub mod counter_btn;
+pub mod websocket;
diff --git a/client/src/components/websocket.rs b/client/src/components/websocket.rs
new file mode 100644
index 0000000..d45ed8a
--- /dev/null
+++ b/client/src/components/websocket.rs
@@ -0,0 +1,99 @@
+use html::Textarea;
+use leptos::*;
+use leptos_use::{core::ConnectionReadyState, use_websocket, UseWebsocketReturn};
+
+#[component]
+pub fn Websocket() -> impl IntoView {
+    let UseWebsocketReturn {
+        ready_state,
+        message,
+        send,
+        open,
+        close,
+        ..
+    } = use_websocket("ws://0.0.0.0:3030/websocket");
+
+    let send_message = move |_| {
+        send("Hello, world!");
+    };
+
+    let status = move || ready_state.get().to_string();
+
+    let connected = move || ready_state.get() == ConnectionReadyState::Open;
+
+    let open_connection = move |_| {
+        open();
+    };
+
+    let close_connection = move |_| {
+        close();
+    };
+
+    let chat_history_ref = create_node_ref::<Textarea>();
+
+    let (chat_history, set_chat_history) = create_signal(vec![]);
+
+    fn update_chat_history(&history: &WriteSignal<Vec<String>>, message: String) {
+        let _ = &history.update(|history: &mut Vec<_>| history.push(message));
+    }
+
+    // handle incoming messages
+    create_effect(move |_| {
+        message.with(move |message| {
+            // Send all messages as strings into chat box
+            if let Some(m) = message {
+                update_chat_history(&set_chat_history, format!("{}\n", m));
+
+                // Scroll chat textarea to bottom
+                if let Some(hist) = chat_history_ref.get() {
+                    hist.set_scroll_top(hist.scroll_height());
+                }
+            }
+        })
+    });
+
+    view! {
+        <div class="bg-slate-500 w-auto">
+            <hr/>
+            <p class="p-1">"status: " {status}</p>
+            <hr/>
+            <div class="p-1">
+                <button on:click=open_connection disabled=connected>
+                    "Open"
+                </button>
+                <button on:click=close_connection disabled=move || !connected()>
+                    "Close"
+                </button>
+            </div>
+            <hr/>
+            <div class="p-1">
+                <input
+                    class="w-96 bg-slate-900 text-slate-200 font-mono rounded-sm"
+                    placeholder="who are you?"
+                />
+            </div>
+            <hr />
+            <div class="p-1">
+                <p>Chat:</p>
+                <textarea
+                    node_ref=chat_history_ref
+                    class="w-96 h-60 bg-slate-900 text-slate-200 font-mono resize-none rounded-sm"
+                    readonly=true
+                    wrap="soft"
+                >
+                    {move || chat_history.get()}
+                </textarea>
+                <br/>
+                <input
+                    class="w-96 bg-slate-900 text-slate-200 font-mono rounded-sm"
+                    placeholder="talk shit..."
+                />
+                <br/>
+                <button on:click=send_message disabled=move || !connected()>
+                    "Send"
+                </button>
+            </div>
+            <hr/>
+        </div>
+    }
+}
diff --git a/client/src/lib.rs b/client/src/lib.rs
index ffc0481..b8f9bc4 100644
--- a/client/src/lib.rs
+++ b/client/src/lib.rs
@@ -17,7 +17,7 @@ pub fn App() -> impl IntoView {
     provide_meta_context();
 
     view! {
-        <Html lang="en" dir="ltr" attr:data-theme="dark"/>
+        <Html class="bg-slate-900" lang="en" dir="ltr" attr:data-theme="dark"/>
 
         // sets the document title
         <Title text="Cards for Humanity"/>
@@ -26,13 +26,11 @@ pub fn App() -> impl IntoView {
         <Meta charset="UTF-8"/>
         <Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
-        <body class="bg-black">
         <Router>
             <Routes>
                 <Route path="/" view=Home/>
                 <Route path="/*" view=NotFound/>
             </Routes>
         </Router>
-        </body>
     }
 }
diff --git a/client/src/pages/home.rs b/client/src/pages/home.rs
index 38604ed..b812677 100644
--- a/client/src/pages/home.rs
+++ b/client/src/pages/home.rs
@@ -1,4 +1,4 @@
-use crate::components::counter_btn::Button;
+use crate::components::websocket::Websocket;
 use leptos::*;
 
 /// Default Home Page
@@ -24,19 +24,9 @@ pub fn Home() -> impl IntoView {
             }
         }>
 
-            <div class="container">
-
-                <h1>"Cards For Humanity"</h1>
-                <hr/>
-                <p>Hello, [Name]</p>
-                <hr/>
-                <p>Connection status: Disconnected.</p>
-
-                <div class="buttons">
-                    <Button/>
-                    <Button increment=5/>
-                </div>
-
+            <div class="container m-auto">
+                <h1 class="text-6xl text-slate-300">"Cards For Humanity"</h1>
+                <Websocket/>
             </div>
         </ErrorBoundary>
     }