diff --git a/apps/wing-console/console/app/demo/index.w b/apps/wing-console/console/app/demo/index.w
new file mode 100644
index 00000000000..451795c8287
--- /dev/null
+++ b/apps/wing-console/console/app/demo/index.w
@@ -0,0 +1,117 @@
+bring cloud;
+// bring redis;
+
+let bucket = new cloud.Bucket();
+let queue = new cloud.Queue();
+let api = new cloud.Api();
+
+api.get("/test-get", inflight (req: cloud.ApiRequest): cloud.ApiResponse => {
+  return cloud.ApiResponse {
+    status: 200,
+    body: Json.stringify({
+      query: Json (Json req).get("query"),
+    })
+  };
+});
+api.post("/test-post", inflight (req: cloud.ApiRequest): cloud.ApiResponse => {
+  return cloud.ApiResponse {
+    status: 200,
+    body: "Hello, POST!"
+  };
+});
+
+let handler = inflight (message: str): str => {
+  bucket.put("hello.txt", "Hello, ${message}!");
+  log("Hello, ${message}!");
+  return message;
+};
+
+queue.setConsumer(handler);
+
+let counter = new cloud.Counter(initial: 0);
+new cloud.Function(inflight (message: str): str => {
+  counter.inc();
+  log("Counter is now ${counter.inc(0)}");
+  return message;
+}) as "IncrementCounter";
+
+let topic = new cloud.Topic() as "Topic";
+topic.onMessage(inflight (message: str): str => {
+  log("Topic subscriber #1: ${message}");
+  return message;
+});
+topic.onMessage(inflight (message: str): str => {
+  log("Topic subscriber #2: ${message}");
+  return message;
+});
+
+// let r = new redis.Redis();
+// new cloud.Function(inflight (message :str) :str => {
+//   log("${r.url()}");
+//   r.set("wing", message);
+//   let value = r.get("wing");
+//   log("${value}");
+//   return r.url();
+// }) as "Redis interaction";
+
+
+let table = new cloud.Table(cloud.TableProps{
+  name: "simple-table",
+  primaryKey: "id",
+  columns: {
+    id: cloud.ColumnType.STRING,
+    name: cloud.ColumnType.STRING,
+    date: cloud.ColumnType.DATE,
+    active: cloud.ColumnType.BOOLEAN,
+  },
+});
+
+let rateSchedule = new cloud.Schedule(cloud.ScheduleProps{
+  rate: 5m
+}) as "Rate Schedule";
+
+rateSchedule.onTick(inflight () => {
+  log("Rate schedule ticked!");
+});
+
+let cronSchedule = new cloud.Schedule(cloud.ScheduleProps{
+  cron: "* * * * ?"
+}) as "Cron Schedule";
+
+// cronSchedule.onTick(inflight () => {
+//   log("Cron schedule ticked!");
+// });
+
+test "Increment counter" {
+  let previous = counter.inc();
+  log("Assertion should fail: ${previous} === ${counter.peek()}");
+  assert(previous == 1);
+}
+
+test "Push message to the queue" {
+ queue.push("hey");
+}
+
+test "Print"{
+  log("Hello World!");
+  assert(true);
+}
+
+test "without assertions nor prints" {
+}
+
+test "Add fixtures" {
+  let arr = [1, 2, 3, 4, 5];
+
+  log("Adding ${arr.length} files in the bucket..");
+  for item in arr {
+    bucket.put("fixture_${item}.txt", "Content for the fixture_${item}!");
+  }
+
+  log("Publishing to the topic..");
+  topic.publish("Hello, topic!");
+
+  log("Setting up counter..");
+  counter.set(0);
+  counter.inc(100);
+}
diff --git a/apps/wing-console/console/app/package-lock.json b/apps/wing-console/console/app/package-lock.json
index 7c095a1d0e7..9b314b9360b 100644
--- a/apps/wing-console/console/app/package-lock.json
+++ b/apps/wing-console/console/app/package-lock.json
@@ -19,7 +19,6 @@
         "@types/react-dom": "^18.2.5",
         "@vitejs/plugin-react": "^4.0.0",
         "@vitest/coverage-c8": "^0.31.4",
-        "@wingconsole/error-message": "file:../../tools/error-message",
         "@wingconsole/eslint-plugin": "file:../../tools/eslint-plugin",
         "@wingconsole/tsconfig": "file:../../tools/tsconfig",
         "@wingconsole/ui": "file:../ui",
@@ -56,7 +55,7 @@
       }
     },
     "../../tools/error-message": {
-      "dev": true
+      "extraneous": true
     },
     "../../tools/eslint-plugin": {
       "name": "@wingconsole/eslint-plugin",
@@ -1429,10 +1428,6 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@wingconsole/error-message": {
-      "resolved": "../../tools/error-message",
-      "link": true
-    },
     "node_modules/@wingconsole/eslint-plugin": {
       "resolved": "../../tools/eslint-plugin",
       "link": true
diff --git a/apps/wing-console/console/app/package.json b/apps/wing-console/console/app/package.json
index ec64c4bb91d..55791cef698 100644
--- a/apps/wing-console/console/app/package.json
+++ b/apps/wing-console/console/app/package.json
@@ -10,8 +10,8 @@
     "dist"
   ],
   "scripts": {
-    "preview": "tsx scripts/preview.ts",
-    "dev": "tsup --watch",
+    "preview": "node scripts/preview.mjs",
+    "dev": "node scripts/dev.mjs",
     "compile": "tsup",
     "vitest": "vitest run --coverage --passWithNoTests",
     "eslint": "eslint --ext .js,.cjs,.ts,.cts,.mts,.tsx --no-error-on-unmatched-pattern . --fix",
@@ -28,7 +28,6 @@
     "@types/react-dom": "^18.2.5",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitest/coverage-c8": "^0.31.4",
-    "@wingconsole/error-message": "file:../../tools/error-message",
     "@wingconsole/eslint-plugin": "file:../../tools/eslint-plugin",
     "@wingconsole/tsconfig": "file:../../tools/tsconfig",
     "@wingconsole/ui": "file:../ui",
diff --git a/apps/wing-console/console/app/scripts/config.mjs b/apps/wing-console/console/app/scripts/config.mjs
new file mode 100644
index 00000000000..a4198709aff
--- /dev/null
+++ b/apps/wing-console/console/app/scripts/config.mjs
@@ -0,0 +1,13 @@
+import react from "@vitejs/plugin-react";
+import { fileURLToPath } from "node:url";
+import * as vite from "vite";
+
+/** @type vite.InlineConfig */
+export const viteConfig = {
+  configFile: false,
+  root: fileURLToPath(new URL("../web", import.meta.url)),
+  plugins: [react()],
+  build: {
+    outDir: fileURLToPath(new URL("../dist/vite", import.meta.url)),
+  },
+};
diff --git a/apps/wing-console/console/app/scripts/dev.mjs b/apps/wing-console/console/app/scripts/dev.mjs
new file mode 100644
index 00000000000..3fb33295090
--- /dev/null
+++ b/apps/wing-console/console/app/scripts/dev.mjs
@@ -0,0 +1,35 @@
+import { createConsoleServer } from "@wingconsole/server";
+import { fileURLToPath } from "node:url";
+import open from "open";
+
+import { createServer as createViteServer } from "vite";
+import { viteConfig } from "./config.mjs";
+
+const vite = await createViteServer({
+  ...viteConfig,
+  server: { middlewareMode: true },
+});
+
+const { port } = await createConsoleServer({
+  wingfile: fileURLToPath(new URL("../demo/index.w", import.meta.url)),
+  async onExpressCreated(app) {
+    app.use(vite.middlewares);
+  },
+  log: {
+    info: console.log,
+    error: console.error,
+    verbose: console.log,
+  },
+  config: {
+    addEventListener(event, listener) {},
+    removeEventListener(event, listener) {},
+    get(key) {
+      return undefined;
+    },
+    set(key, value) {},
+  },
+});
+
+await open(`http://localhost:${port}`);
+
+console.log(`Wing Console is running on http://localhost:${port}/`);
diff --git a/apps/wing-console/console/app/scripts/preview.mjs b/apps/wing-console/console/app/scripts/preview.mjs
new file mode 100644
index 00000000000..99d1f4f0936
--- /dev/null
+++ b/apps/wing-console/console/app/scripts/preview.mjs
@@ -0,0 +1,12 @@
+import { fileURLToPath } from "node:url";
+
+import open from "open";
+
+import { createConsoleApp } from "../dist/index.js";
+
+const { port } = await createConsoleApp({
+  wingfile: fileURLToPath(
+    new URL("../../desktop/demo/index.w", import.meta.url),
+  ),
+});
+await open(`http://localhost:${port}`);
diff --git a/apps/wing-console/console/app/scripts/preview.ts b/apps/wing-console/console/app/scripts/preview.ts
deleted file mode 100644
index 032c59e4263..00000000000
--- a/apps/wing-console/console/app/scripts/preview.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import open from "open";
-
-import { createConsoleApp } from "../dist/index.js";
-
-(async () => {
-  const { port } = await createConsoleApp({
-    wingfile: "../desktop/demo/index.w",
-  });
-  await open(`http://localhost:${port}`);
-})();
diff --git a/apps/wing-console/console/app/tsup.config.ts b/apps/wing-console/console/app/tsup.config.ts
index 3f3276e448e..c9e235a8dda 100644
--- a/apps/wing-console/console/app/tsup.config.ts
+++ b/apps/wing-console/console/app/tsup.config.ts
@@ -1,6 +1,6 @@
-import react from "@vitejs/plugin-react";
 import { defineConfig } from "tsup";
 import * as vite from "vite";
+import { viteConfig } from "./scripts/config.mjs";
 
 export default defineConfig({
   entry: ["src/index.ts"],
@@ -12,14 +12,6 @@ export default defineConfig({
     console.log("Build succeeded");
 
     console.log("Build UI files...");
-    await vite.build({
-      configFile: false,
-      root: "./web",
-      plugins: [react()],
-      build: {
-        outDir: "../dist/vite",
-      },
-      base: "./",
-    });
+    await vite.build(viteConfig);
   },
 });
diff --git a/apps/wing-console/console/server/src/expressServer.ts b/apps/wing-console/console/server/src/expressServer.ts
index df610920f5d..f00a8b5a68d 100644
--- a/apps/wing-console/console/server/src/expressServer.ts
+++ b/apps/wing-console/console/server/src/expressServer.ts
@@ -51,8 +51,6 @@ export const createExpressServer = async ({
   const app = express();
   app.use(cors());
 
-  onExpressCreated?.(app);
-
   const { router } = mergeAllRouters();
   const createContext = (): RouterContext => {
     return {
@@ -83,6 +81,10 @@ export const createExpressServer = async ({
       createContext,
     }),
   );
+
+  // Allow extending the express app (after trpc is set up).
+  onExpressCreated?.(app);
+
   log.info("Looking for an open port");
   const port = await getPort({ port: requestedPort });
   const server = app.listen(port);
diff --git a/apps/wing-console/console/server/src/utils/compiler.ts b/apps/wing-console/console/server/src/utils/compiler.ts
index 3421bd66c20..313de81aa17 100644
--- a/apps/wing-console/console/server/src/utils/compiler.ts
+++ b/apps/wing-console/console/server/src/utils/compiler.ts
@@ -21,14 +21,7 @@ export interface Compiler {
   ): void;
 }
 
-const deduceSimfile = (wingfile: string): string => {
-  const dirname = path.dirname(wingfile);
-  const basename = path.basename(wingfile, ".w");
-  return path.resolve(dirname, "target", `${basename}.wsim`);
-};
-
 export const createCompiler = (wingfile: string): Compiler => {
-  const simfile = deduceSimfile(wingfile);
   const events = new Emittery<CompilerEvents>();
   let isCompiling = false;
   let shouldCompileAgain = false;
@@ -41,7 +34,7 @@ export const createCompiler = (wingfile: string): Compiler => {
     try {
       isCompiling = true;
       await events.emit("compiling");
-      const outdir = await wing.compile(wingfile, {
+      const simfile = await wing.compile(wingfile, {
         target: wing.Target.SIM,
       });
       await events.emit("compiled", { simfile });
diff --git a/apps/wing-console/console/ui/package-lock.json b/apps/wing-console/console/ui/package-lock.json
index 84132363189..38d80547216 100644
--- a/apps/wing-console/console/ui/package-lock.json
+++ b/apps/wing-console/console/ui/package-lock.json
@@ -20,6 +20,7 @@
         "@storybook/react": "^7.0.20",
         "@storybook/react-vite": "^7.0.20",
         "@storybook/testing-library": "^0.1.0",
+        "@tailwindcss/forms": "^0.5.3",
         "@tanstack/react-query": "^4.29.12",
         "@trpc/client": "^10.30.0",
         "@trpc/react-query": "^10.30.0",
@@ -38,6 +39,7 @@
         "@wingconsole/server": "file:../server",
         "@wingconsole/tsconfig": "file:../../tools/tsconfig",
         "@wingconsole/use-loading": "file:../../packages/use-loading",
+        "autoprefixer": "^10.4.14",
         "classnames": "^2.3.2",
         "constructs": "^10.2.51",
         "d3-selection": "^3.0.0",
@@ -57,6 +59,7 @@
         "react-use": "^17.4.0",
         "require-from-string": "^2.0.2",
         "storybook": "^7.0.20",
+        "tailwindcss": "^3.3.2",
         "tsup": "^6.7.0",
         "typescript": "^5.1.3",
         "vite": "^4.3.9",
@@ -192,6 +195,18 @@
         "zod": "^3.21.4"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -5451,6 +5466,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "4.29.15",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.15.tgz",
@@ -6575,6 +6602,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -6672,6 +6705,39 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -7130,6 +7196,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001506",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001506.tgz",
@@ -7689,6 +7764,18 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -8035,6 +8122,12 @@
         "detect-port": "bin/detect-port.js"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -8047,6 +8140,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -9170,6 +9269,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "10.12.16",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.16.tgz",
@@ -10727,6 +10839,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/joycon": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
@@ -11444,6 +11565,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -11712,6 +11842,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11745,6 +11884,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -12263,6 +12411,42 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
     "node_modules/postcss-load-config": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
@@ -12292,6 +12476,44 @@
         }
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/postcss/node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -12822,6 +13044,24 @@
         "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/read-cache/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -13990,6 +14230,82 @@
       "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
       "dev": true
     },
+    "node_modules/tailwindcss": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
diff --git a/apps/wing-console/console/ui/package.json b/apps/wing-console/console/ui/package.json
index 4722e485120..b8a527ed380 100644
--- a/apps/wing-console/console/ui/package.json
+++ b/apps/wing-console/console/ui/package.json
@@ -24,6 +24,7 @@
     "@storybook/react": "^7.0.20",
     "@storybook/react-vite": "^7.0.20",
     "@storybook/testing-library": "^0.1.0",
+    "@tailwindcss/forms": "^0.5.3",
     "@tanstack/react-query": "^4.29.12",
     "@trpc/client": "^10.30.0",
     "@trpc/react-query": "^10.30.0",
@@ -42,6 +43,7 @@
     "@wingconsole/server": "file:../server",
     "@wingconsole/tsconfig": "file:../../tools/tsconfig",
     "@wingconsole/use-loading": "file:../../packages/use-loading",
+    "autoprefixer": "^10.4.14",
     "classnames": "^2.3.2",
     "constructs": "^10.2.51",
     "d3-selection": "^3.0.0",
@@ -61,6 +63,7 @@
     "react-use": "^17.4.0",
     "require-from-string": "^2.0.2",
     "storybook": "^7.0.20",
+    "tailwindcss": "^3.3.2",
     "tsup": "^6.7.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",