diff --git a/packages/frontend/index.html b/packages/frontend/index.html
new file mode 100644
index 0000000..3f081cd
--- /dev/null
+++ b/packages/frontend/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Layonara Forge
+
+
+
+
+
+
+
+
+
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
new file mode 100644
index 0000000..21c5b7f
--- /dev/null
+++ b/packages/frontend/src/App.tsx
@@ -0,0 +1,12 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Dashboard } from "./pages/Dashboard";
+
+export function App() {
+ return (
+
+
+ } />
+
+
+ );
+}
diff --git a/packages/frontend/src/main.tsx b/packages/frontend/src/main.tsx
new file mode 100644
index 0000000..e95ed1b
--- /dev/null
+++ b/packages/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+
+
+ ,
+);
diff --git a/packages/frontend/src/pages/Dashboard.tsx b/packages/frontend/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..dd0ae88
--- /dev/null
+++ b/packages/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,14 @@
+export function Dashboard() {
+ return (
+
+
+
+ Layonara Forge
+
+
+ NWN Development Environment
+
+
+
+ );
+}
diff --git a/packages/frontend/src/styles/globals.css b/packages/frontend/src/styles/globals.css
new file mode 100644
index 0000000..66f88f6
--- /dev/null
+++ b/packages/frontend/src/styles/globals.css
@@ -0,0 +1,25 @@
+@import "tailwindcss";
+
+:root {
+ --forge-bg: #121212;
+ --forge-surface: #1e1e2e;
+ --forge-border: #2e2e3e;
+ --forge-accent: #946200;
+ --forge-text: #f2f2f2;
+ --forge-text-secondary: #888888;
+}
+
+:root.light {
+ --forge-bg: #f2f2f2;
+ --forge-surface: #ffffff;
+ --forge-border: #cbcbcb;
+ --forge-accent: #946200;
+ --forge-text: #252525;
+ --forge-text-secondary: #666666;
+}
+
+body {
+ background-color: var(--forge-bg);
+ color: var(--forge-text);
+ font-family: "Inter", system-ui, sans-serif;
+}
diff --git a/packages/frontend/tailwind.config.ts b/packages/frontend/tailwind.config.ts
new file mode 100644
index 0000000..6580dc9
--- /dev/null
+++ b/packages/frontend/tailwind.config.ts
@@ -0,0 +1,26 @@
+import type { Config } from "tailwindcss";
+
+export default {
+ content: ["./index.html", "./src/**/*.{ts,tsx}"],
+ darkMode: "class",
+ theme: {
+ extend: {
+ colors: {
+ forge: {
+ bg: "var(--forge-bg)",
+ surface: "var(--forge-surface)",
+ border: "var(--forge-border)",
+ accent: "var(--forge-accent)",
+ text: "var(--forge-text)",
+ "text-secondary": "var(--forge-text-secondary)",
+ },
+ },
+ fontFamily: {
+ sans: ["Inter", "system-ui", "sans-serif"],
+ mono: ["JetBrains Mono", "Fira Code", "monospace"],
+ serif: ["Baskerville", "Georgia", "Palatino", "serif"],
+ },
+ },
+ },
+ plugins: [],
+} satisfies Config;
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
new file mode 100644
index 0000000..a03a9ca
--- /dev/null
+++ b/packages/frontend/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ port: 5173,
+ proxy: {
+ "/api": "http://localhost:3000",
+ "/ws": {
+ target: "ws://localhost:3000",
+ ws: true,
+ },
+ },
+ },
+});