diff --git a/websocket-chat/app/static/index.html b/websocket-chat/app/static/index.html
index 2221754..eacff12 100644
--- a/websocket-chat/app/static/index.html
+++ b/websocket-chat/app/static/index.html
@@ -1,100 +1,118 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>BlackSheep WebSocket Example</title>
-    <script src="https://unpkg.com/vue@next"></script>
-    <style>
-        .controls {
-            display: flex;
-            column-gap: 3px;
-        }
-    </style>
-</head>
-<body>
-<div id="app">
-    <p><b>Your client ID is {{ CLIENT_ID }}</b></p>
-    <p>Status: {{ status }}</p>
-    <p>Messages:</p>
-    <ul>
-        <li v-for="message in messages" :key="message.timestamp">
-            <div><b>From:</b> {{ message.author }}</div>
-            <div><b>Sent:</b> {{ renderTimestamp(message.timestamp) }}</div>
-            <div><b>Text:</b> {{ message.text }}</div>
-        </li>
-    </ul>
-    <div class="controls" @keypress.enter.prevent="submit">
-        <input type="text" placeholder="Your message" v-model="messageText">
-        <button type="button" :disabled="!ws" @click.prevent="submit">Submit</button>
-        <button type="button" :disabled="ws" @click.prevent="connect(WS_URL)">Connect</button>
-        <button type="button" :disabled="!ws" @click.prevent="disconnect">Disconnect</button>
-    </div>
-</div>
-<script>
-  CLIENT_ID = crypto.randomUUID()
-  WS_URL = `ws://${location.host}/ws/${CLIENT_ID}`
+	<head>
+		<meta charset="UTF-8" />
+		<title>BlackSheep WebSocket Example with Vue</title>
+		<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.prod.js"></script>
+		<style>
+			.controls {
+				display: flex;
+				column-gap: 3px;
+				margin-top: 10px;
+			}
+			input {
+				flex: 1;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="app">
+			<p><b>Your client ID is {{ CLIENT_ID }}</b></p>
+			<p>Status: {{ status }}</p>
 
-  const app = {
-    data() {
-      return {
-        messages: [],
-        messageText: "",
-        ws: null,
-        status: "Disconnected",
-        WS_URL,
-        CLIENT_ID
-      }
-    },
-    methods: {
-      makeMessage() {
-        return {
-          author: this.CLIENT_ID,
-          text: this.messageText,
-          timestamp: new Date().toISOString()
-        }
-      },
-      submit() {
-        const message = this.makeMessage()
-        this.ws.send(JSON.stringify(message))
-        this.messageText = ""
-      },
-      connect(url) {
-        const ws = new WebSocket(url)
+			<p>Messages:</p>
+			<ul>
+				<li v-for="message in messages" :key="message.timestamp">
+					<div><b>From:</b> {{ message.author }}</div>
+					<div>
+						<b>Sent:</b> {{ renderTimestamp(message.timestamp) }}
+					</div>
+					<div><b>Text:</b> {{ message.text }}</div>
+				</li>
+			</ul>
 
-        ws.addEventListener("open", (evt) => {
-          this.status = "Connected"
-          console.log("Open", evt)
-        })
+			<div class="controls">
+				<input
+					type="text"
+					placeholder="Your message"
+					v-model="messageText"
+					@keyup.enter="submit"
+				/>
+				<button :disabled="!ws" @click="submit">Submit</button>
+				<button :disabled="ws" @click="connect">Connect</button>
+				<button :disabled="!ws" @click="disconnect">Disconnect</button>
+			</div>
+		</div>
 
-        ws.addEventListener("message", (evt) => {
-          this.messages.push(JSON.parse(evt.data))
-          console.log("Message", evt)
-        })
+		<script>
+			const { createApp } = Vue;
 
-        ws.addEventListener("close", (evt) => {
-          this.status = "Disconnected"
-          console.log("Close", evt)
-        })
+			createApp({
+				data() {
+					return {
+						CLIENT_ID: crypto.randomUUID(),
+						WS_URL: `ws://${
+							location.host
+						}/ws/${crypto.randomUUID()}`, // generated again at connection
+						ws: null,
+						status: "Disconnected",
+						messageText: "",
+						messages: [],
+					};
+				},
+				methods: {
+					makeMessage() {
+						return {
+							author: this.CLIENT_ID,
+							text: this.messageText,
+							timestamp: new Date().toISOString(),
+						};
+					},
+					submit() {
+						if (
+							!this.ws ||
+							this.ws.readyState !== WebSocket.OPEN ||
+							!this.messageText
+						)
+							return;
+						const message = this.makeMessage();
+						this.ws.send(JSON.stringify(message));
+						this.messageText = "";
+					},
+					connect() {
+						this.WS_URL = `ws://${location.host}/ws/${this.CLIENT_ID}`; // ensure it uses the actual client ID
+						this.ws = new WebSocket(this.WS_URL);
 
-        ws.addEventListener("error", (evt) => {
-          this.status = "Error (see console)"
-          console.error("Error", evt)
-        })
+						this.ws.addEventListener("open", () => {
+							this.status = "Connected";
+						});
 
-        this.ws = ws
-      },
-      disconnect() {
-        this.ws.close()
-        this.ws = null
-        this.messages = []
-      },
-      renderTimestamp(timestamp) {
-        return new Date(timestamp).toLocaleTimeString()
-      }
-    }
-  }
+						this.ws.addEventListener("message", (event) => {
+							this.messages.push(JSON.parse(event.data));
+						});
 
-  Vue.createApp(app).mount("#app")
-</script>
-</body>
-</html>
\ No newline at end of file
+						this.ws.addEventListener("close", () => {
+							this.status = "Disconnected";
+							this.ws = null;
+						});
+
+						this.ws.addEventListener("error", (event) => {
+							this.status = "Error";
+							console.error("WebSocket error:", event);
+						});
+					},
+					disconnect() {
+						if (this.ws) {
+							this.ws.close();
+							this.ws = null;
+							this.messages = [];
+						}
+					},
+					renderTimestamp(ts) {
+						return new Date(ts).toLocaleTimeString();
+					},
+				},
+			}).mount("#app");
+		</script>
+	</body>
+</html>
