diff --git a/README.md b/README.md
index 47b752a..288988d 100644
--- a/README.md
+++ b/README.md
@@ -3,3 +3,4 @@
 - WebSocket recovery when connection is lost
 - User authentication. Currently you just need to know the user name to sign in
 - Virtualization of chat message lists. Too many messages will currently have a performance impact
+  - Possible solution: [TanStack Virtual](https://tanstack.com/virtual/latest/docs/introduction)
diff --git a/chat/src/index.tsx b/chat/src/index.tsx
index 7ff0919..45d6aa9 100644
--- a/chat/src/index.tsx
+++ b/chat/src/index.tsx
@@ -6,6 +6,7 @@ import { Route, Router } from "@solidjs/router";
 import Index from "./routes/Index";
 import { ContextProvider } from "./context";
 import SetUp from "./routes/SetUp";
+import Chat from "./routes/Chat";
 
 render(
   () => (
@@ -13,6 +14,7 @@ render(
       <Router>
         <Route path="/" component={Index} />
         <Route path="/setup" component={SetUp} />
+        <Route path="/chats/:name" component={Chat} />
       </Router>
     </ContextProvider>
   ),
diff --git a/chat/src/routes/Chat.tsx b/chat/src/routes/Chat.tsx
new file mode 100644
index 0000000..ea0cd42
--- /dev/null
+++ b/chat/src/routes/Chat.tsx
@@ -0,0 +1,46 @@
+import { useParams } from "@solidjs/router";
+import { useWebSocket } from "../context";
+
+export default function Chat() {
+  const paramters = useParams();
+  const socket = useWebSocket();
+
+  function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    // @ts-ignore
+    const message: string = event.target.message.value;
+    console.debug(message);
+
+    socket()?.send(message);
+
+    // @ts-ignore
+    event.target.reset();
+  }
+  return (
+    <main>
+      <h1>Chat with {decodeURI(paramters.name)}</h1>
+      <ol></ol>
+      <form onSubmit={handleSubmit}>
+        <label
+          for="message"
+          class="block text-sm font-medium leading-6 text-gray-900"
+        >
+          Message
+        </label>
+        <div class="relative flex items-center mt-2">
+          <input
+            type="text"
+            name="message"
+            id="message"
+            class="block w-full rounded-md border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-orange-600 sm:text-sm sm:leading-6"
+          />
+          <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+            <kbd class="inline-flex items-center px-1 font-sans text-xs text-gray-400 border border-gray-200 rounded">
+              ↵
+            </kbd>
+          </div>
+        </div>
+      </form>
+    </main>
+  );
+}
diff --git a/chat/src/routes/Index.tsx b/chat/src/routes/Index.tsx
index 88cf983..322720f 100644
--- a/chat/src/routes/Index.tsx
+++ b/chat/src/routes/Index.tsx
@@ -28,7 +28,7 @@ export default function Index() {
           <For each={users()}>
             {(user) => (
               <li>
-                <a href={`/messages/${user}`}>{user}</a>
+                <a href={`/chats/${user}`}>{user}</a>
               </li>
             )}
           </For>