diff --git a/bun.lockb b/bun.lockb
index 335734e..66641e4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2899260..b99c3e9 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "module": "src/main.ts",
   "type": "module",
   "scripts": {
-    "dev": "concurrently \"bun run --hot src/main.ts\" \"bun run uno:dev\"",
+    "dev": "concurrently \"bun run --hot src/main.ts\" \"bun run uno:dev\" \"bun run liveReload\"",
+    "liveReload": "bun run --hot src/dev/liveReload.ts",
     "start": "bun run uno && bun run src/main.ts",
     "db:push": "bunx drizzle-kit push:sqlite",
     "db:studio": "bunx drizzle-kit studio",
@@ -27,11 +28,11 @@
     "@kitajs/html": "^2.1.2",
     "@libsql/client": "^0.3.4",
     "@t3-oss/env-core": "^0.6.1",
+    "chokidar": "^3.5.3",
     "drizzle-orm": "^0.28.6",
     "drizzle-typebox": "^0.1.1",
     "elysia": "^0.6.22",
     "pino-pretty": "^10.2.0",
-    "zod": "^3.22.2",
-    "zodcli": "^0.0.4"
+    "zod": "^3.22.2"
   }
 }
diff --git a/src/components/base.tsx b/src/components/base.tsx
index 2c0effa..34288b4 100644
--- a/src/components/base.tsx
+++ b/src/components/base.tsx
@@ -1,18 +1,79 @@
 import Html from "@kitajs/html";
+import { config } from "../config";
 
-export const BaseHtml = ({ children }: Html.PropsWithChildren) => `
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>THE BETH STACK</title>
-  <script src="https://unpkg.com/htmx.org@1.9.3"></script>
-  <script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
-  <link rel="stylesheet" href="/public/dist/unocss.css">
-</head>
-
-${children}
-`;
+export const BaseHtml = ({ children }: Html.PropsWithChildren) => (
+  <html>
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>THE BETH STACK</title>
+      <script src="https://unpkg.com/htmx.org@1.9.3"></script>
+      <script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
+      <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css"
+      />
+      <link rel="stylesheet" href="/public/dist/unocss.css" />
+      <script>
+        {`
+        (function () {
+            var consoleOutput = document.getElementById('consoleOutput');
+
+            if (!window.console) {
+                window.console = {};
+            }
+
+            var oldConsoleLog = console.log;
+
+            console.log = function (message) {
+                // Append the log message to the consoleOutput div
+                if (consoleOutput) {
+                    var logMessage = document.createElement('p');
+                    logMessage.textContent = message;
+                    consoleOutput.appendChild(logMessage);
+                }
+
+                // Call the original console.log function
+                oldConsoleLog.apply(console, arguments);
+            };
+
+            // You can do the same for other console methods like error, warn, etc. if needed
+
+        })()
+        `}
+      </script>
+      <script>
+        {`
+        (function () {
+          let socket = new WebSocket("ws://localhost:3001/ws");
+
+          socket.onopen = function(e) {
+            console.log("connected")
+          };
+
+          socket.onmessage = function(event) {
+            console.log(event.data);
+            location.reload();
+          };
+
+          socket.onclose = function(event) {
+            console.log("closed");
+          };
+
+          socket.onerror = function(error) {
+            console.log("error: " + error.message);
+          };
+        })();
+        `}
+      </script>
+    </head>
+    <body>
+      <div
+        id="consoleOutput"
+        style="background-color: #f0f0f0; padding: 10px;"
+      ></div>
+      <script>console.log("Hello from the client side!");</script>
+      {children}
+    </body>
+  </html>
+);
diff --git a/src/config/index.ts b/src/config/index.ts
index bfe328f..3662bfd 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,6 +1,5 @@
 import { createEnv } from "@t3-oss/env-core";
 import { z } from "zod";
-import { argumentParser } from "zodcli";
 
 const env = createEnv({
   server: {
@@ -11,11 +10,12 @@ const env = createEnv({
   runtimeEnv: process.env,
 });
 
-// const args = argumentParser({
-//   options: z.object({}),
-// }).parse(process.argv.slice(2));
+const args = {
+  // watch: process.argv.includes("--watch"),
+  liveReload: true
+};
 
 export const config = {
   env,
-  // args,
+  args,
 };
diff --git a/src/dev/liveReload.ts b/src/dev/liveReload.ts
new file mode 100644
index 0000000..8cf579b
--- /dev/null
+++ b/src/dev/liveReload.ts
@@ -0,0 +1,33 @@
+import { Elysia, ws } from "elysia";
+import { type ElysiaWS } from "elysia/ws";
+import { watch } from "chokidar";
+
+let wsConnections = new Set<ElysiaWS<any>>();
+
+watch("src/**/*.{ts,tsx}").on("all", (event, path) => {
+  console.log("sending event");
+  wsConnections.forEach((connection) => {
+    connection.send("refresh");
+  });
+});
+
+const app = new Elysia()
+  .use(ws())
+  .ws("/ws", {
+    open(ws) {
+      console.log("open");
+      wsConnections.add(ws);
+    },
+    close(ws) {
+      console.log("close");
+      wsConnections.delete(ws);
+    },
+    message(ws, message) {
+      console.log("message", message);
+    },
+  })
+  .listen(3001);
+
+console.log(
+  `🦊 Livereload running ${app.server?.hostname}:${app.server?.port}`
+);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1424f25..891ac47 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,7 +10,7 @@ export const pages = new Elysia({
   .get("/", ({ html }) =>
     html(
       <BaseHtml>
-        <body
+        <div
           class="flex w-full h-screen justify-center items-center"
           hx-get="/todos"
           hx-swap="innerHTML"
