diff --git a/bun.lockb b/bun.lockb
index a033c05..44a648b 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/webui/package.json b/packages/webui/package.json
index 52cb517..db943fa 100644
--- a/packages/webui/package.json
+++ b/packages/webui/package.json
@@ -22,9 +22,12 @@
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
     "vite": "^5.3.1"
   }
 }
diff --git a/packages/webui/postcss.config.js b/packages/webui/postcss.config.js
new file mode 100644
index 0000000..72588e6
--- /dev/null
+++ b/packages/webui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    }
+}
diff --git a/packages/webui/src/App.tsx b/packages/webui/src/App.tsx
index f8540ab..ad2ea06 100644
--- a/packages/webui/src/App.tsx
+++ b/packages/webui/src/App.tsx
@@ -1,23 +1,10 @@
-import { useState } from "react"
+import "./index.css"
+import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
 
 
 export function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    return (
+        <TRPCClientProvider>
+        </TRPCClientProvider>
+    )
 }
diff --git a/packages/webui/src/index.css b/packages/webui/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/packages/webui/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/webui/src/trpc/TRPCClientProvider.tsx b/packages/webui/src/trpc/TRPCClientProvider.tsx
index 5408969..d562f2b 100644
--- a/packages/webui/src/trpc/TRPCClientProvider.tsx
+++ b/packages/webui/src/trpc/TRPCClientProvider.tsx
@@ -5,7 +5,7 @@ import { trpc } from "./trpc"
 
 
 export interface TRPCClientProviderProps {
-    children: ReactNode
+    children?: ReactNode
 }
 
 
diff --git a/packages/webui/tailwind.config.js b/packages/webui/tailwind.config.js
new file mode 100644
index 0000000..9562042
--- /dev/null
+++ b/packages/webui/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import("tailwindcss").Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+
+    theme: {
+        extend: {},
+    },
+
+    plugins: [],
+}