diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..61c05f7
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,10 @@
+<!-- mermaid-ai-skills:start -->
+
+# Copilot Instructions
+
+## Mermaid Diagrams
+
+When the user asks to create, edit, or visualize a diagram, follow the
+instructions in `.github/instructions/mermaid.instructions.md`.
+
+<!-- mermaid-ai-skills:end -->
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 3706090..268309e 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,25 +1,29 @@
 version: 2
 updates:
   - package-ecosystem: github-actions
+    cooldown:
+      default-days: 7
     directory: /
     target-branch: staging
     schedule:
       interval: daily
     open-pull-requests-limit: 100
     assignees:
-      - daveio
+      - synmux
     groups:
       all-dependencies:
         patterns:
           - "*"
   - package-ecosystem: npm
+    cooldown:
+      default-days: 7
     directory: /
     target-branch: staging
     schedule:
       interval: daily
     open-pull-requests-limit: 100
     assignees:
-      - daveio
+      - synmux
     groups:
       all-dependencies:
         patterns:
diff --git a/.github/instructions/mermaid.instructions.md b/.github/instructions/mermaid.instructions.md
new file mode 100644
index 0000000..10e7a91
--- /dev/null
+++ b/.github/instructions/mermaid.instructions.md
@@ -0,0 +1,92 @@
+---
+applyTo: "**"
+---
+
+# Mermaid AI Skills
+
+When the user asks to create, edit, or visualize any diagram, use the Mermaid
+VS Code extension tools and commands described below.
+
+## Workflow
+
+1. Determine the diagram type and generate Mermaid syntax.
+2. Write the diagram to a `.mmd` file in the project.
+3. Validate syntax: correct first-line keyword, arrow types, balanced brackets.
+4. Preview via the Mermaid extension — open the `.mmd` file (auto-preview) or run
+   **Mermaid: Preview Diagram** (`mermaidChart.preview`).
+
+## LM Tools — call these for every diagram interaction
+
+- `mermaid-diagram-validator` — validate Mermaid syntax before presenting any diagram
+- `mermaid-diagram-preview` — render a live preview inside VS Code after generating
+- `get-syntax-docs-mermaid` — fetch correct syntax docs for any diagram type
+
+## VS Code Commands
+
+Invoke via Command Palette or the VS Code command API (GitHub Copilot in VS Code only).
+Do not invent command IDs. Prefer writing/editing `.mmd` files when a command is not needed.
+
+### Diagram editing & preview
+
+- **Preview** (`mermaidChart.preview`) — preview the active Mermaid editor (`.mmd` / `.mermaid` must be open).
+- **Create Diagram** (`mermaidChart.createMermaidFile`) — creates a demo flowchart and opens preview side by side.
+- **Repair Diagram** (`mermaidChart.repairDiagram`) — Mermaid AI repair for the active diagram; uses Mermaid AI credits — tell the user before running.
+- **Improve Diagram** (`mermaidChart.improveDiagram`) — uses Copilot / LM API; suggests layout + styling variants for the active diagram.
+
+### Generate diagrams (GitHub Copilot required)
+
+- **Generate Diagram from Code** (`mermaidChart.generateDiagramFromCode`)
+- **Generate Cloud Diagram** (`mermaidChart.generateCloudDiagram`)
+- **Generate ER Diagram** (`mermaidChart.generateERDiagram`)
+- **Generate Docker Diagram** (`mermaidChart.generateDockerDiagram`)
+- **Open AI Chat** (`mermaidChart.openCopilotChat`)
+
+### Mermaid cloud
+
+- **Login** (`mermaidChart.login`) / **Logout** (`mermaidChart.logout`)
+- **Connect Diagram** (`mermaidChart.connectDiagramToMermaidChart`) — link a local diagram to Mermaid.
+- **Sync Diagram** (`mermaidChart.syncDiagramWithMermaid`) — only for diagrams already connected (frontmatter has `id:`). Example:
+  ```yaml
+  ---
+  id: cbd9e9ba-a2cb-47c5-a98e-8c28a753428d
+  ---
+  ```
+
+### Review Mermaid Sync
+
+For diagrams updated by the Mermaid GitHub Sync app (or pre-commit regenerate):
+
+- **Review Mermaid Sync** (`mermaidChart.reviewAppCommits`) — start / open the review flow.
+- **Regenerate with Mermaid AI** (`mermaidChart.regenerateDiagramWithMermaidAI`) — regenerate from source references.
+  Do not manually rewrite diagrams managed by this workflow. Accept/reject/diff UI actions stay in the extension UI.
+
+### Install / update this pack
+
+- **Mermaid: Install AI Skills…** (`mermaidChart.installAiSkills`)
+
+## @mermaid-chart slash commands
+
+| Command                                | Purpose                              |
+| -------------------------------------- | ------------------------------------ |
+| `/generate_diagram_from_code`          | General diagram from any source file |
+| `/generate_execution_sequence`         | Sequence diagram from code flow      |
+| `/generate_er_diagram`                 | ER diagram from schema / models      |
+| `/generate_cloud_architecture_diagram` | Cloud / CI-CD architecture           |
+| `/generate_docker_diagram`             | Architecture from Dockerfiles        |
+| `/generate_c4_topdown_architecture`    | C4 top-down architecture             |
+| `/analyze_code_ownership`              | Code ownership diagram               |
+| `/generate_dependency_diagram`         | Dependency / security visualisation  |
+
+## Rules
+
+1. Always call `mermaid-diagram-validator` before showing any diagram.
+2. Always call `mermaid-diagram-preview` after generating a diagram.
+3. Use `get-syntax-docs-mermaid` before generating an unfamiliar diagram type.
+4. Prefer `@mermaid-chart` slash commands for complex generation.
+5. Write diagrams to `.mmd` files; never return unvalidated Mermaid syntax.
+6. Warn the user before Repair (Mermaid AI credits).
+7. Cooperate with the Sync workflow — do not manually regenerate managed diagrams.
+
+## Docs
+
+More commands and features: https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index eb93294..68a9daa 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -1,8 +1,15 @@
 name: ci
-permissions: read-all
 on:
-  push: null
   pull_request: null
+  push: null
+permissions:
+  actions: read
+  checks: write
+  contents: read
+  id-token: write
+  issues: write
+  pull-requests: write
+  security-events: write
 jobs:
   lint:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/devskim.yaml b/.github/workflows/devskim.yaml
index 073ccf7..a24e7a8 100644
--- a/.github/workflows/devskim.yaml
+++ b/.github/workflows/devskim.yaml
@@ -1,9 +1,10 @@
 name: devskim
 on:
-  push: null
   pull_request: null
+  push: null
 permissions:
   actions: read
+  checks: write
   contents: read
   id-token: write
   issues: write
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 625fcd4..d6f60f2 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,20 +1,20 @@
 {
   "recommendations": [
-    "vue.volar",
-    "nuxt.mdc",
-    "meritek.nuxt-intellisense",
-    "nuxtr.nuxtr-vscode",
-    "trunk.io",
     "anthropic.claude-code",
+    "chrislajoie.vscode-modelines",
     "christian-kohler.npm-intellisense",
-    "firefox-devtools.vscode-firefox-debug",
     "fill-labs.dependi",
-    "tamasfe.even-better-toml",
+    "firefox-devtools.vscode-firefox-debug",
+    "meritek.nuxt-intellisense",
+    "ms-azuretools.vscode-containers",
     "ms-vscode-remote.remote-containers",
-    "chrislajoie.vscode-modelines",
+    "nuxt.mdc",
+    "nuxtr.nuxtr-vscode",
+    "pflannery.vscode-versionlens",
     "redhat.vscode-yaml",
-    "ms-azuretools.vscode-containers",
-    "pflannery.vscode-versionlens"
+    "tamasfe.even-better-toml",
+    "trunk.io",
+    "vue.volar"
   ],
   "unwantedRecommendations": ["ms-toolsai.jupyter"]
 }
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 8d3fe1c..a16d4e5 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { loggedIn } = useUserSession();
+</script>
 
 <template>
   <nav>
@@ -13,6 +15,12 @@
       <li>
         <NuxtLink to="/list" class="link link-hover" active-class="menu-active">List</NuxtLink>
       </li>
+      <li v-if="loggedIn">
+        <NuxtLink to="/me" class="link link-hover" active-class="menu-active">Me</NuxtLink>
+      </li>
+      <li v-else>
+        <NuxtLink to="/login" class="link link-hover" active-class="menu-active">Login</NuxtLink>
+      </li>
     </ul>
   </nav>
 </template>
diff --git a/app/layouts/blank.vue b/app/layouts/blank.vue
new file mode 100644
index 0000000..52aeb83
--- /dev/null
+++ b/app/layouts/blank.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="bg-linear-to-r from-sky-400 via-purple-500 to-pink-300 border-2 border-indigo-600 flex min-h-screen flex-row justify-center"
+  >
+    <div class="border-2 border-indigo-600 flex min-h-screen flex-column gap-6 max-w-240 w-full"><slot /></div>
+  </div>
+</template>
diff --git a/app/layouts/nuxt.config.ts b/app/layouts/nuxt.config.ts
new file mode 100644
index 0000000..3a66020
--- /dev/null
+++ b/app/layouts/nuxt.config.ts
@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ["nuxt-auth-utils"],
+});
diff --git a/app/middleware/authenticated.ts b/app/middleware/authenticated.ts
new file mode 100644
index 0000000..ca8c322
--- /dev/null
+++ b/app/middleware/authenticated.ts
@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { loggedIn } = useUserSession();
+
+  // redirect the user to the login screen if they're not authenticated
+  if (!loggedIn.value) {
+    return navigateTo("/login");
+  }
+});
diff --git a/app/pages/login-example.vue b/app/pages/login-example.vue
new file mode 100644
index 0000000..1b350af
--- /dev/null
+++ b/app/pages/login-example.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+declare module "nuxt/app" {
+  interface NuxtLayouts {
+    custom: unknown;
+  }
+}
+// ---cut---
+definePageMeta({
+  layout: "blank",
+});
+
+const email = ref("");
+const password = ref("");
+
+async function handleLogin() {
+  try {
+    console.log("Start Fetch");
+    if (email?.value && password?.value) {
+      const res = await $fetch("/api/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: { email: email.value, password: password.value },
+      });
+      console.log("Fetch Complete");
+      console.log(res);
+    } else console.log("Login Failed, empty input");
+  } catch (error) {
+    console.error("Login failed:", error);
+  }
+}
+</script>
+
+<template>
+  <main class="flex-1 py-12">
+    <div class="bg-base-200 flex flex-col items-center justify-center gap-4 mt-4">
+      <h1 class="text-xl my-8">Login to your account</h1>
+      <form class="w-full" @submit.prevent="handleLogin">
+        <fieldset class="fieldset border-base-300 border rounded-box w-full p-4 flex flex-col justify-stretch gap-4">
+          <legend class="sr-only">Login Page</legend>
+
+          <UiInput v-model="email" label="Email" placeholder="email@example.com" />
+          <UiInput v-model="password" label="Password" type="password" placeholder="password" />
+
+          <UiButton is-submit type="primary" class="mt-8">Login</UiButton>
+        </fieldset>
+      </form>
+      <span class="text-secondary-content text-sm">or</span>
+      <UiButton to="/register" type="secondary">New? Create an account</UiButton>
+    </div>
+  </main>
+</template>
diff --git a/app/pages/login.vue b/app/pages/login.vue
index 0eb5a89..0bd7790 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -1,41 +1,93 @@
 <script setup lang="ts">
-const email = ref("");
-const password = ref("");
+const { fetch: refreshSession } = useUserSession();
+
+const form = reactive({
+  data: {
+    email: "admin@gmail.com",
+    password: "password",
+  },
+  error: "",
+  pending: false,
+});
 
 async function handleLogin() {
   try {
     console.log("Start Fetch");
-    if (email?.value && password?.value) {
+    form.pending = true;
+    form.error = "";
+    if (form.data.email && form.data.password) {
       const res = await $fetch("/api/login", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: { email: email.value, password: password.value },
+        body: form.data,
       });
       console.log("Fetch Complete");
       console.log(res);
+      if (res.error) {
+        form.pending = false;
+        form.error = res.message || "Login failed";
+      } else {
+        // Refresh the session on client-side and redirect to the home page
+        await refreshSession();
+        await navigateTo("/me");
+      }
     } else console.log("Login Failed, empty input");
   } catch (error) {
-    console.error("Login failed:", error);
+    form.pending = false;
+    if (error instanceof Error) {
+      form.error = error.message;
+    } else {
+      form.error = "Login failed";
+    }
   }
 }
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center gap-4 mt-4">
-    <h1 class="text-xl my-8">Login to your account</h1>
-    <form class="w-full" @submit.prevent="handleLogin">
-      <fieldset
-        class="fieldset bg-base-200 border-base-300 border rounded-box w-full p-4 flex flex-col justify-stretch gap-4"
-      >
-        <legend class="sr-only">Login Page</legend>
-
-        <UiInput v-model="email" label="Email" placeholder="email@example.com" />
-        <UiInput v-model="password" label="Password" type="password" placeholder="password" />
-
-        <UiButton is-submit type="primary" class="mt-8">Login</UiButton>
-      </fieldset>
-    </form>
-    <span class="text-secondary-content text-xs">or</span>
-    <UiButton to="/register" type="secondary">New? Create an account</UiButton>
-  </div>
+  <main class="flex-1 py-12">
+    <div class="bg-base-200 flex flex-col items-center justify-center gap-4 mt-4">
+      <h1 class="text-xl my-8">Login to your account</h1>
+      <form class="w-full" @submit.prevent="handleLogin">
+        <fieldset class="fieldset border-base-300 border rounded-box w-full p-4 flex flex-col justify-stretch gap-4">
+          <legend class="sr-only">Login Page</legend>
+          <div v-if="form.error" role="alert" class="alert alert-error">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 shrink-0 stroke-current"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span>{{ form.error }}</span>
+          </div>
+          <UiInput
+            v-model="form.data.email"
+            class="input validator"
+            label="Email"
+            type="email"
+            placeholder="email@example.com"
+          />
+          <UiInput
+            v-model="form.data.password"
+            class="input validator"
+            label="Password"
+            type="password"
+            placeholder="password"
+          />
+          <UiButton is-submit type="primary" class="mt-8">
+            <span v-if="form.pending" class="loading loading-spinner loading-sm" />
+            <span v-else>Login</span>
+          </UiButton>
+        </fieldset>
+      </form>
+      <span class="text-secondary-content text-sm">or</span>
+      <UiButton to="/register" type="secondary">New? Create an account</UiButton>
+    </div>
+  </main>
 </template>
diff --git a/app/pages/me.vue b/app/pages/me.vue
new file mode 100644
index 0000000..c2eb130
--- /dev/null
+++ b/app/pages/me.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["authenticated"],
+});
+
+const { user, clear: clearSession } = useUserSession();
+const userName = (user as { name?: string } | null | undefined)?.name ?? "there";
+
+async function logout() {
+  await clearSession();
+  await navigateTo("/login");
+}
+</script>
+
+<template>
+  <div class="space-y-12">
+    <!-- Hero Section -->
+    <section class="hero min-h-[30vh] bg-linear-to-br from-base-200 to-base-300 rounded-2xl">
+      <div class="hero-content text-center">
+        <div class="max-w-2xl">
+          <h1
+            class="text-5xl md:text-6xl font-bold bg-linear-to-r from-secondary to-accent bg-clip-text text-transparent"
+          >
+            Welcome, {{ userName }}!
+          </h1>
+        </div>
+      </div>
+    </section>
+
+    <!-- Navigation -->
+    <section class="text-center">
+      <button class="btn btn-outline btn-primary" @click="logout">
+        <Icon name="heroicons:arrow-left-start-on-rectangle" size="1.2rem" />
+        Logout
+      </button>
+    </section>
+  </div>
+</template>
diff --git a/drizzle.config.ts b/drizzle.config.ts
index 70ce1a5..502ada2 100644
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@@ -1,4 +1,7 @@
 import { defineConfig } from "drizzle-kit";
+import dotenv from "dotenv";
+
+dotenv.config({ path: "./.env" });
 
 export default defineConfig({
   schema: "./server/database/schema.ts",
diff --git a/server/api/login.post.ts b/server/api/login.post.ts
index 40cfaff..cc35443 100644
--- a/server/api/login.post.ts
+++ b/server/api/login.post.ts
@@ -30,13 +30,22 @@ export default defineEventHandler(async (request) => {
       hash: result.password,
     });
     if (check) {
+      const message = { ...result };
+      message.password = "";
+
+      await setUserSession(request, {
+        user: message,
+      });
+
       return {
+        status: 200,
         error: false,
-        message: `${body.email} logged in`,
+        message,
       } as ApiResponse;
     }
   }
   return {
+    status: 401,
     error: true,
     message: `${body.email} failed login`,
   } as ApiResponse;
diff --git a/server/api/user/stats.get.ts b/server/api/user/stats.get.ts
new file mode 100644
index 0000000..aac6c4a
--- /dev/null
+++ b/server/api/user/stats.get.ts
@@ -0,0 +1,9 @@
+export default defineEventHandler(async (event) => {
+  // make sure the user is logged in
+  // This will throw a 401 error if the request doesn't come from a valid user session
+  const { user } = await requireUserSession(event);
+
+  // TODO: Fetch some stats based on the user
+
+  return { ...user };
+});