diff --git a/.gitignore b/.gitignore
index 72110578..b29fb2d4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,8 @@
 **/.DS_Store
 .claude
 CLAUDE.md
+reference/
+.playwright-mcp/
 
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
diff --git a/client-vue3/.eslintrc.cjs b/client-vue3/.eslintrc.cjs
index e812c477..7b859863 100644
--- a/client-vue3/.eslintrc.cjs
+++ b/client-vue3/.eslintrc.cjs
@@ -27,6 +27,8 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/multi-word-component-names': 'off',
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'import/extensions': [
       'error',
       'ignorePackages',
diff --git a/client-vue3/.gitignore b/client-vue3/.gitignore
index bf099f45..ce0f76f8 100644
--- a/client-vue3/.gitignore
+++ b/client-vue3/.gitignore
@@ -37,6 +37,3 @@ coverage
 
 # Build outputs
 *.tsbuildinfo
-
-# OS generated files
-Thumbs.db
\ No newline at end of file
diff --git a/client-vue3/MIGRATION-MAPPING.md b/client-vue3/MIGRATION-MAPPING.md
new file mode 100644
index 00000000..eb93f76f
--- /dev/null
+++ b/client-vue3/MIGRATION-MAPPING.md
@@ -0,0 +1,305 @@
+# Vue 3 Migration: BootstrapVue to PrimeVue Component Mapping
+
+This document provides comprehensive mapping from BootstrapVue components to PrimeVue equivalents for the DigiScript Vue 3 migration.
+
+## Table of Contents
+- [Layout & Navigation](#layout--navigation)
+- [Form Controls](#form-controls)
+- [Data Display](#data-display)
+- [Feedback](#feedback)
+- [Typography & Content](#typography--content)
+- [Utilities](#utilities)
+- [Migration Patterns](#migration-patterns)
+
+## Layout & Navigation
+
+### Navigation Components
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-navbar>` | `<Menubar>` | Use template slots `#start` and `#end` |
+| `<b-nav>` | `<TabMenu>` or `<Menu>` | Context-dependent |
+| `<b-nav-item>` | Menu model objects | Define in component data |
+| `<b-breadcrumb>` | `<Breadcrumb>` | Similar API |
+| `<b-sidebar>` | `<Sidebar>` | Similar functionality |
+
+### Layout Components  
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-container>` | Native CSS or `<div>` | Use CSS classes |
+| `<b-row>` | Native CSS Grid/Flexbox | Use CSS classes |
+| `<b-col>` | Native CSS Grid/Flexbox | Use CSS classes |
+| `<b-card>` | `<Card>` | Similar structure |
+| `<b-card-header>` | `<template #header>` | Use slot |
+| `<b-card-body>` | `<template #content>` | Use slot |
+
+## Form Controls
+
+### Input Components
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-form-input>` | `<InputText>` | Basic text input |
+| `<b-form-textarea>` | `<Textarea>` | Multiline text |
+| `<b-form-select>` | `<Dropdown>` | Options via `options` prop |
+| `<b-form-checkbox>` | `<Checkbox>` | Binary true/false |
+| `<b-form-radio>` | `<RadioButton>` | Single selection |
+| `<b-form-datepicker>` | `<Calendar>` | Date selection |
+| `<b-form-timepicker>` | `<Calendar>` | Use `timeOnly` mode |
+
+### Form Layout
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-form>` | `<form>` | Native HTML |
+| `<b-form-group>` | `<div>` + CSS | Custom layout |
+| `<b-form-row>` | CSS Grid/Flexbox | Use CSS classes |
+| `<b-input-group>` | `<InputGroup>` | Input with addons |
+
+### Validation
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `state` prop | `invalid` prop | Boolean validation state |
+| `<b-form-invalid-feedback>` | `<small>` with error styling | Manual implementation |
+| `<b-form-valid-feedback>` | `<small>` with success styling | Manual implementation |
+
+## Data Display
+
+### Tables
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-table>` | `<DataTable>` | Feature-rich table |
+| `items` prop | `value` prop | Data source |
+| `fields` prop | `<Column>` components | Column definition |
+| `<b-table-simple>` | Native HTML table | For simple tables |
+
+### Lists
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-list-group>` | `<Listbox>` | Interactive lists |
+| `<b-list-group-item>` | List options | Via data model |
+
+## Feedback
+
+### Alerts & Messages
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-alert>` | `<InlineMessage>` | Static messages |
+| `$bvToast.toast()` | `$toast.add()` | Programmatic toasts |
+| `<b-modal>` | `<Dialog>` | Modal dialogs |
+| `<b-progress>` | `<ProgressBar>` | Progress indication |
+| `<b-spinner>` | `<ProgressSpinner>` | Loading indication |
+
+### Overlays
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-tooltip>` | `<Tooltip>` | Hover information |
+| `<b-popover>` | `<OverlayPanel>` | Click-triggered overlay |
+
+## Typography & Content
+
+### Text Components
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| `<b-badge>` | `<Badge>` | Status indicators |
+| Bootstrap typography classes | CSS custom styles | Use CSS variables |
+
+## Utilities
+
+### Layout Utilities
+| BootstrapVue | PrimeVue | Notes |
+|--------------|----------|-------|
+| Bootstrap flex classes | PrimeVue flex classes | `.flex`, `.align-items-center` |
+| Bootstrap spacing | CSS custom properties | Use CSS variables |
+| Bootstrap colors | PrimeVue color variables | `var(--p-primary-color)` |
+
+## Migration Patterns
+
+### 1. Component Import Pattern
+
+**BootstrapVue (Vue 2):**
+```javascript
+import { BTable, BButton } from 'bootstrap-vue'
+export default {
+  components: { BTable, BButton }
+}
+```
+
+**PrimeVue (Vue 3):**
+```typescript
+import DataTable from 'primevue/datatable'
+import Button from 'primevue/button'
+```
+
+### 2. Template Structure Migration
+
+**BootstrapVue Navigation:**
+```vue
+<b-navbar toggleable="lg" type="dark" variant="dark">
+  <b-navbar-brand to="/">DigiScript</b-navbar-brand>
+  <b-navbar-nav>
+    <b-nav-item to="/shows">Shows</b-nav-item>
+    <b-nav-item to="/config">Config</b-nav-item>
+  </b-navbar-nav>
+</b-navbar>
+```
+
+**PrimeVue Navigation:**
+```vue
+<Menubar :model="menuItems">
+  <template #start>
+    <div class="navbar-brand">DigiScript</div>
+  </template>
+</Menubar>
+
+<script setup lang="ts">
+const menuItems = ref([
+  { label: 'Shows', icon: 'pi pi-list', to: '/shows' },
+  { label: 'Config', icon: 'pi pi-cog', to: '/config' }
+])
+</script>
+```
+
+### 3. Form Migration Pattern
+
+**BootstrapVue Forms:**
+```vue
+<b-form @submit="onSubmit">
+  <b-form-group label="Name" label-for="name-input">
+    <b-form-input 
+      id="name-input" 
+      v-model="form.name" 
+      :state="validation.name"
+      required 
+    />
+    <b-form-invalid-feedback>Name is required</b-form-invalid-feedback>
+  </b-form-group>
+  
+  <b-button type="submit" variant="primary">Submit</b-button>
+</b-form>
+```
+
+**PrimeVue Forms:**
+```vue
+<form @submit.prevent="onSubmit">
+  <div class="field">
+    <label for="name-input">Name</label>
+    <InputText 
+      id="name-input" 
+      v-model="form.name" 
+      :invalid="!validation.name"
+      required 
+    />
+    <small v-if="!validation.name" class="p-error">Name is required</small>
+  </div>
+  
+  <Button type="submit" label="Submit" />
+</form>
+```
+
+### 4. Table Migration Pattern
+
+**BootstrapVue Tables:**
+```vue
+<b-table 
+  :items="items" 
+  :fields="fields" 
+  striped 
+  hover 
+  small
+>
+  <template #cell(actions)="row">
+    <b-button size="sm" @click="edit(row.item)">Edit</b-button>
+  </template>
+</b-table>
+```
+
+**PrimeVue Tables:**
+```vue
+<DataTable 
+  :value="items" 
+  stripedRows 
+  :paginator="true" 
+  :rows="10"
+>
+  <Column field="name" header="Name" />
+  <Column field="email" header="Email" />
+  <Column header="Actions">
+    <template #body="slotProps">
+      <Button 
+        size="small" 
+        @click="edit(slotProps.data)"
+        label="Edit" 
+      />
+    </template>
+  </Column>
+</DataTable>
+```
+
+## TypeScript Integration
+
+### Type Definitions
+```typescript
+// PrimeVue menu item type
+interface MenuItem {
+  label?: string;
+  icon?: string;
+  to?: string;
+  command?: () => void;
+  items?: MenuItem[];
+}
+
+// Form validation type
+interface FormValidation {
+  [key: string]: boolean;
+}
+```
+
+### Component Props with TypeScript
+```typescript
+<script setup lang="ts">
+interface Props {
+  items: any[];
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+});
+</script>
+```
+
+## CSS Variable Migration
+
+### BootstrapVue to PrimeVue Variables
+| Bootstrap Variable | PrimeVue Variable | Usage |
+|--------------------|-------------------|-------|
+| `$primary` | `var(--p-primary-color)` | Primary brand color |
+| `$secondary` | `var(--p-primary-200)` | Secondary colors |
+| `$success` | `var(--p-green-500)` | Success state |
+| `$danger` | `var(--p-red-500)` | Error state |
+| `$warning` | `var(--p-orange-500)` | Warning state |
+| `$info` | `var(--p-blue-500)` | Info state |
+
+## Best Practices
+
+### 1. Component Organization
+- Import PrimeVue components individually for tree-shaking
+- Use TypeScript interfaces for props and emits
+- Utilize Composition API with `<script setup>` syntax
+
+### 2. Styling Strategy
+- Use PrimeVue CSS variables for theming
+- Combine with custom CSS for specific DigiScript branding
+- Maintain responsive design principles
+
+### 3. Migration Approach
+- Migrate one component type at a time (navigation → forms → tables)
+- Test thoroughly at each step
+- Preserve existing functionality during migration
+
+### 4. Performance Considerations
+- PrimeVue components are generally larger than BootstrapVue
+- Use dynamic imports for large components
+- Consider code splitting for optimal bundle size
+
+---
+
+*This mapping guide will be updated as migration progresses through Phase 3 of the Vue 3 implementation.*
\ No newline at end of file
diff --git a/client-vue3/index.html b/client-vue3/index.html
index f92749dd..5a7fe98e 100644
--- a/client-vue3/index.html
+++ b/client-vue3/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/v3/vite.svg" />
+    <link rel="icon" href="/v3/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DigiScript Vue 3</title>
   </head>
diff --git a/client-vue3/package-lock.json b/client-vue3/package-lock.json
index dac7d3be..76f9aba5 100644
--- a/client-vue3/package-lock.json
+++ b/client-vue3/package-lock.json
@@ -8,9 +8,14 @@
       "name": "client-vue3",
       "version": "0.17.10",
       "dependencies": {
+        "@primevue/forms": "^4.3.8",
+        "@primevue/themes": "^4.3.7",
         "pinia": "^2.1.0",
+        "primeicons": "^7.0.0",
+        "primevue": "^4.3.7",
         "vue": "^3.4.0",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "zod": "^4.1.5"
       },
       "devDependencies": {
         "@types/node": "^20.14.0",
@@ -708,6 +713,129 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@primeuix/forms": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@primeuix/forms/-/forms-0.1.0.tgz",
+      "integrity": "sha512-LctcQidb+B5PuvAFWH24YH/SIzmHlOabLHpaTeGY/k51iBv1WyCp+5w9JMYuMB/BplSvV0ZGySxQVkN5Azr/aQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.2.tgz",
+      "integrity": "sha512-tIJ6byZezTYZ9YUICNSidQHOIQOQL3zeUgjwiX0JnBTK3+WCvy4DyCBcrJ94RtiX0WGFZSYNvaGaFkTo4jU8FQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.2.3.tgz",
+      "integrity": "sha512-+KwmQsLTYgVAqFADmO252btz40lstPML6r4QMNjxz4gLNCKVW3kPR0/aCouQx6/21+boXG1P68tu8Zk3FAKr2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.2"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.2.3.tgz",
+      "integrity": "sha512-GLAU2h6lhgln2w10EQalUQlgwbgQ0xZoIOLMNGfIvqU4O09L282P7rwKCKQksvAGAFt1GoO/Q1NgBSxnttr7iA==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.2"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.1.tgz",
+      "integrity": "sha512-tQL/ZOPgCdD+NTimlUmhyD0ey8J1XmpZE4hDHM+/fnuBicVVmlKOd5HpS748LcOVRUKbWjmEPdHX4hi5XZoC1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.3.7.tgz",
+      "integrity": "sha512-rYmEZTKs/C2Re+xFluY9R02+n4TcyJshooPPOG6zc23v/bmhrfcqCiS5gNiuXF/lYoOh4y8VTcHF6eZCZW724Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.2",
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/forms": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/@primevue/forms/-/forms-4.3.8.tgz",
+      "integrity": "sha512-xkw/MRGAkVCe9Cwt0XBAwU2lq1X7E4yGgUcCqVcSCkrCMt22z1K4JWN4DNVLVS2og1Hwe6KOnqwAvW+cSzcqtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/forms": "^0.1.0",
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.3.8"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/forms/node_modules/@primevue/core": {
+      "version": "4.3.8",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.3.8.tgz",
+      "integrity": "sha512-KOE5XnyUlA4qwztQ+HQbeqMrRLgX+VsSfZrtEkkw2HZP+eoT9Ij3AGZx7yJhzLh/4feDZQqWNjG8wRyLmv5GDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.2",
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.3.7.tgz",
+      "integrity": "sha512-CKiOeiJzNSbELwbQdrgWHgmfcAmjNQXqRZtBGb8sUPrB8hjWf9lYMBAbcAuqJbyLFFcC0lFiB80CfBR07FNSHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.3.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/themes": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.3.7.tgz",
+      "integrity": "sha512-Ej/3CBGpSIJFo0BJHrPa7HjyQZ8YPxQUiOuXj1tKFJkSqFxgOk52JL6aLBGdQkSnx7TjkHuHuKuk4t6SKkD5hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.2",
+        "@primeuix/themes": "^1.2.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.49.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.49.0.tgz",
@@ -4585,6 +4713,28 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
+    "node_modules/primevue": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.7.tgz",
+      "integrity": "sha512-yyknh2kFjSGwRyxqmUUWy/pY4FK1vxoonGH3eQdtd8k/sGl5JpSQ2f0tXpR79lV6dcGf3FZPL1B5JNR11zJfmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.2",
+        "@primeuix/styles": "^1.2.3",
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.3.7",
+        "@primevue/icons": "4.3.7"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5755,6 +5905,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.5.tgz",
+      "integrity": "sha512-rcUUZqlLJgBC33IT3PNMgsCq6TzLQEG/Ei/KTCU0PedSWRMAXoOUN+4t/0H+Q8bdnLPdqUYnvboJT0bn/229qg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/client-vue3/package.json b/client-vue3/package.json
index 9b7ffe63..f4f46776 100644
--- a/client-vue3/package.json
+++ b/client-vue3/package.json
@@ -16,9 +16,14 @@
     "node": ">=22.0.0 <23"
   },
   "dependencies": {
+    "@primevue/forms": "^4.3.8",
+    "@primevue/themes": "^4.3.7",
     "pinia": "^2.1.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.3.7",
     "vue": "^3.4.0",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "zod": "^4.1.5"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",
diff --git a/client-vue3/public/favicon.ico b/client-vue3/public/favicon.ico
new file mode 100644
index 00000000..66dcb0ec
Binary files /dev/null and b/client-vue3/public/favicon.ico differ
diff --git a/client-vue3/src/App.vue b/client-vue3/src/App.vue
index 22c24b54..8ef3d01a 100644
--- a/client-vue3/src/App.vue
+++ b/client-vue3/src/App.vue
@@ -1,89 +1,697 @@
 <template>
   <div id="app">
-    <header class="app-header">
-      <nav class="navbar">
+    <!-- Loading spinner while initializing -->
+    <div v-if="!loaded" class="loading-spinner">
+      <div class="spinner">
+        <i class="pi pi-spin pi-spinner" style="font-size: 3rem; color: #17a2b8;"></i>
+      </div>
+    </div>
+
+    <!-- First-time admin setup -->
+    <template v-else-if="settingsStore.hasAdminUser === false">
+      <nav class="navbar app-header">
         <div class="navbar-brand">
-          <h1>DigiScript v3</h1>
+          <h1>DigiScript</h1>
         </div>
-        <div class="navbar-nav">
-          <router-link to="/" class="nav-link">Home</router-link>
-          <router-link to="/about" class="nav-link">About</router-link>
+        <div class="header-nav">
+          <span class="nav-link">About</span>
+          <span class="nav-link">Login</span>
+          <span class="connection-status connected">Connected</span>
         </div>
       </nav>
-    </header>
 
-    <main class="main-content">
-      <router-view />
-    </main>
+      <div class="first-setup-container">
+        <div class="setup-content">
+          <h2 class="setup-title">Welcome to DigiScript</h2>
+          <p class="setup-subtitle">
+            <strong>To get started, please create an admin user!</strong>
+          </p>
+          <div class="setup-form">
+            <CreateAdminUser :is-first-admin="true" @user-created="onAdminUserCreated" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Normal application layout -->
+    <template v-else>
+      <Menubar :model="menuItems" class="app-menubar">
+        <template #start>
+          <div class="brand-section">
+            <span class="brand-title" @click="router.push('/')">DigiScript</span>
+          </div>
+        </template>
+        <template #end>
+          <div class="end-section">
+            <Button
+              label="About"
+              text
+              class="about-button"
+              @click="router.push('/about')"
+            />
+            <Button
+              v-if="authStore.isAuthenticated"
+              :label="authStore.currentUser?.username || 'User'"
+              icon="pi pi-user"
+              class="user-button"
+              @click="toggleUserMenu"
+            />
+            <Button
+              v-else
+              label="Login"
+              text
+              class="login-button"
+              @click="router.push('/login')"
+            />
+            <Badge
+              :value="isConnected ? 'Connected' : 'Disconnected'"
+              :severity="isConnected ? 'success' : 'danger'"
+              class="connection-badge"
+            />
+          </div>
+        </template>
+      </Menubar>
+
+      <!-- User Menu Overlay -->
+      <OverlayPanel ref="userMenuPanel">
+        <div class="user-menu">
+          <div class="user-menu-item" @click="handleUserMenuClick('/settings')">
+            <i class="pi pi-cog"></i>
+            <span>Settings</span>
+          </div>
+          <div class="user-menu-item" @click="handleLogout">
+            <i class="pi pi-sign-out"></i>
+            <span>Sign Out</span>
+          </div>
+        </div>
+      </OverlayPanel>
+
+      <main class="main-content">
+        <router-view />
+      </main>
+    </template>
 
-    <footer class="app-footer">
-      <p>&copy; 2024 DigiScript - Vue 3 Migration (Phase 1)</p>
-    </footer>
+    <!-- Global PrimeVue components -->
+    <Toast />
+    <ConfirmDialog />
   </div>
 </template>
 
 <script setup lang="ts">
-// Vue 3 Composition API setup
-// Future phases will add more functionality here
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import Menubar from 'primevue/menubar';
+import Button from 'primevue/button';
+import Badge from 'primevue/badge';
+import OverlayPanel from 'primevue/overlaypanel';
+import {
+  onMounted,
+  onUnmounted,
+  ref,
+  computed,
+} from 'vue';
+import { useRouter } from 'vue-router';
+import { useConfirm } from 'primevue/useconfirm';
+import { useAuthStore } from './stores/auth';
+import { useSettingsStore } from './stores/settings';
+import { useWebSocket } from './composables/useWebSocket';
+import CreateAdminUser from './components/CreateAdminUser.vue';
+
+// Menu item type for PrimeVue Menubar
+interface MenuItem {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  command?: () => void;
+  items?: MenuItem[];
+}
+
+const router = useRouter();
+const authStore = useAuthStore();
+const settingsStore = useSettingsStore();
+const confirm = useConfirm();
+
+// WebSocket composable
+const { connect, isConnected } = useWebSocket();
+
+// Local state
+const loaded = ref(false);
+const showUserMenu = ref(false);
+const userMenuPanel = ref();
+
+// Computed menu items for PrimeVue Menubar
+const menuItems = computed(() => {
+  const items: MenuItem[] = [];
+
+  // Live menu item
+  if (settingsStore.currentShow) {
+    if (authStore.isAuthenticated) {
+      const liveItems: MenuItem[] = [
+        {
+          label: 'Live',
+          icon: 'pi pi-play-circle',
+          disabled: !settingsStore.currentShow || !isConnected.value,
+          command: () => router.push('/live'),
+        },
+      ];
+
+      // Live Config submenu for admins and show executors
+      if (authStore.currentUser?.is_admin || authStore.isShowExecutor) {
+        const liveConfigSubitems: MenuItem[] = [
+          {
+            label: 'Start Session',
+            disabled: true,
+            command: () => console.log('Start Session - Not implemented'),
+          },
+          {
+            label: 'Stop Session',
+            disabled: true,
+            command: () => console.log('Stop Session - Not implemented'),
+          },
+          {
+            label: 'Reload Clients',
+            disabled: true,
+            command: () => console.log('Reload Clients - Not implemented'),
+          },
+          {
+            label: 'Jump To Page',
+            disabled: true,
+            command: () => console.log('Jump To Page - Not implemented'),
+          },
+        ];
+
+        liveItems.push({
+          label: 'Live Config',
+          icon: 'pi pi-cog',
+          items: liveConfigSubitems,
+        });
+      }
+
+      items.push(...liveItems);
+    } else {
+      items.push({
+        label: 'Live',
+        icon: 'pi pi-play-circle',
+        disabled: true,
+      });
+    }
+  }
+
+  // System Config for admins
+  if (authStore.isAuthenticated && authStore.currentUser?.is_admin) {
+    items.push({
+      label: 'System Config',
+      icon: 'pi pi-server',
+      disabled: !isConnected.value,
+      command: () => router.push('/config'),
+    });
+  }
+
+  // Show Config for users with show access
+  if (settingsStore.currentShow && authStore.isAuthenticated && authStore.hasShowAccess) {
+    items.push({
+      label: 'Show Config',
+      icon: 'pi pi-calendar',
+      disabled: !isConnected.value,
+      command: () => router.push('/show-config'),
+    });
+  }
+
+  return items;
+});
+
+// Handlers
+function toggleUserMenu(event: Event) {
+  userMenuPanel.value.toggle(event);
+}
+
+function handleUserMenuClick(path: string) {
+  userMenuPanel.value.hide();
+  router.push(path);
+}
+
+function handleLogout() {
+  showUserMenu.value = false;
+  confirm.require({
+    message: 'Are you sure you want to logout?',
+    header: 'Confirm Logout',
+    icon: 'pi pi-question-circle',
+    accept: async () => {
+      await authStore.userLogout();
+      router.push('/login');
+    },
+  });
+}
+
+async function waitForWebSocket(): Promise<void> {
+  return new Promise((resolve) => {
+    if (isConnected.value) {
+      resolve();
+      return;
+    }
+
+    const checkConnection = () => {
+      if (isConnected.value) {
+        resolve();
+      } else {
+        setTimeout(checkConnection, 150);
+      }
+    };
+
+    setTimeout(checkConnection, 150);
+  });
+}
+
+async function onAdminUserCreated() {
+  // Refresh settings to update has_admin_user status
+  await settingsStore.getSettings();
+  loaded.value = true;
+}
+
+// Initialize application
+async function initializeApp() {
+  try {
+    // Initialize WebSocket connection first (done automatically by useWebSocket composable)
+    connect();
+
+    // Wait for WebSocket to be healthy before proceeding
+    await waitForWebSocket();
+
+    // Get system settings to check if admin user exists
+    await settingsStore.getSettings();
+    await settingsStore.getRbacRoles();
+
+    // If we have a stored auth token, try to authenticate
+    if (authStore.authToken) {
+      try {
+        await authStore.getCurrentUser();
+        if (authStore.currentUser) {
+          await authStore.getCurrentRbac();
+          await authStore.getUserSettings();
+          authStore.setupTokenRefresh();
+        }
+      } catch (error) {
+        console.error('Error initializing auth:', error);
+        authStore.clearAuthData();
+      }
+    }
+
+    loaded.value = true;
+  } catch (error) {
+    console.error('Error initializing app:', error);
+    loaded.value = true; // Show app even if there are initialization errors
+  }
+}
+
+// Initialize app on mount
+onMounted(() => {
+  initializeApp();
+});
+
+// Cleanup on unmount - reserved for future cleanup tasks
+onUnmounted(() => {
+  // Reserved for cleanup tasks
+});
 </script>
 
 <style scoped>
-.app-header {
-  background: #1a202c;
-  color: white;
-  padding: 1rem 0;
+/* Global app styles with dark theme matching Vue 2 */
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #343a40;
+  color: #fff;
+  text-align: center;
+}
+
+/* Loading spinner */
+.loading-spinner {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+}
+
+.spinner {
+  text-align: center;
 }
 
-.navbar {
+/* Navigation bar matching Vue 2 Bootstrap navbar exactly */
+.navbar.app-header {
+  background-color: #3498DA;
+  padding: 15px 30px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  flex-wrap: nowrap;
+  position: relative;
+}
+
+/* Brand styling */
+.navbar-brand {
+  display: flex;
   align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
 }
 
-.navbar-brand h1 {
-  margin: 0;
+.navbar-brand a {
+  color: white;
   font-size: 1.5rem;
+  font-weight: bold;
+  text-decoration: none;
+  margin-right: 2rem;
+}
+
+.navbar-brand a:hover {
+  color: white;
+  text-decoration: none;
+}
+
+/* Navigation groups */
+.navbar-nav-left {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  flex: 1;
 }
 
-.navbar-nav {
+.navbar-nav-right {
   display: flex;
-  gap: 2rem;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+/* Navigation items */
+.nav-item {
+  position: relative;
 }
 
 .nav-link {
   color: white;
+  font-weight: bold;
   text-decoration: none;
   padding: 0.5rem 1rem;
-  border-radius: 4px;
-  transition: background-color 0.2s;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  display: inline-block;
+  transition: color 0.15s ease-in-out;
 }
 
-.nav-link:hover,
-.nav-link.router-link-active {
-  background-color: #2d3748;
+.nav-link:hover:not(.disabled) {
   color: white;
   text-decoration: none;
 }
 
-.main-content {
-  min-height: calc(100vh - 140px);
-  max-width: 1200px;
-  margin: 0 auto;
+.nav-link.disabled {
+  color: #6c757d;
+  cursor: default;
+}
+
+/* User link styling to match Vue 2 exactly */
+.user-link {
+  color: white !important;
+  font-weight: bold;
+  padding: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.user-link:hover {
+  color: white !important;
+  text-decoration: none;
+}
+
+/* Dropdown styling */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-toggle::after {
+  content: "";
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  min-width: 160px;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+}
+
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.25rem 1rem;
+  font-weight: 400;
+  color: #212529;
+  text-align: inherit;
+  text-decoration: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.dropdown-item:hover:not(.disabled) {
+  background-color: #f8f9fa;
+  color: #16181b;
+  text-decoration: none;
+}
+
+.dropdown-item.disabled {
+  color: #6c757d;
+  pointer-events: none;
+  background-color: transparent;
+}
+
+/* Connection status styling */
+.connection-status {
+  color: white;
+  font-weight: bold;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  background-color: #e74c3c;
+  font-size: 0.875rem;
+}
+
+.connection-status.connected {
+  background-color: #00bc8c;
+}
+
+/* First-time setup styling */
+.first-setup-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 2rem;
+  background-color: #343a40;
 }
 
-.app-footer {
-  background: #f8f9fa;
-  text-align: center;
-  padding: 1rem;
+.setup-content {
+  width: 100%;
+  max-width: 600px;
+}
+
+.setup-title {
+  color: white;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}
+
+.setup-subtitle {
+  color: white;
+  margin-bottom: 2rem;
+  font-size: 1.125rem;
+}
+
+.setup-form {
   margin-top: 2rem;
 }
 
-.app-footer p {
+/* Main content */
+.main-content {
+  flex: 1;
   margin: 0;
-  color: #6c757d;
+  padding: 0 15px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #343a40;
+  color: white;
+}
+
+/* PrimeVue Menubar styling overrides */
+:deep(.p-menubar) {
+  background-color: #3498DA !important;
+  border: none !important;
+  border-radius: 0 !important;
+  padding: 0.75rem 1.5rem !important;
+}
+
+:deep(.p-menubar .p-menubar-start) {
+  color: white !important;
+}
+
+:deep(.p-menubar .p-menubar-end) {
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+}
+
+/* Brand title styling */
+.brand-section .brand-title {
+  color: white !important;
+  font-size: 1.5rem !important;
+  font-weight: bold !important;
+  cursor: pointer !important;
+  text-decoration: none !important;
+}
+
+.brand-section .brand-title:hover {
+  color: white !important;
+  text-decoration: none !important;
+}
+
+/* End section spacing */
+.end-section {
+  display: flex !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+}
+
+/* Button styling in navbar */
+.end-section .p-button {
+  background-color: transparent !important;
+  border: none !important;
+  color: white !important;
+  font-weight: bold !important;
+}
+
+.end-section .p-button:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: white !important;
+}
+
+.end-section .user-button {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  border-radius: 0.25rem !important;
+}
+
+/* Connection badge styling */
+.connection-badge {
+  margin-left: 0.25rem !important;
+  font-weight: bold !important;
+}
+
+/* Menu items in PrimeVue menubar */
+:deep(.p-menuitem-link) {
+  color: white !important;
+  background-color: transparent !important;
+  border: none !important;
+  padding: 0.5rem 1rem !important;
+  border-radius: 0.25rem !important;
+}
+
+:deep(.p-menuitem-link:hover) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: white !important;
+}
+
+:deep(.p-menuitem-link[data-p-disabled="true"]) {
+  color: #6c757d !important;
+  cursor: not-allowed !important;
+  opacity: 0.6 !important;
+}
+
+:deep(.p-menuitem-text) {
+  color: white !important;
+}
+
+:deep(.p-menuitem-icon) {
+  color: white !important;
+}
+
+/* User menu styling */
+.user-menu {
+  min-width: 150px;
+  background-color: #343a40 !important;
+  border: 1px solid #495057 !important;
+  border-radius: 0.25rem !important;
+}
+
+.user-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  color: white;
+  transition: background-color 0.15s ease;
+}
+
+.user-menu-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.user-menu-item i {
+  width: 16px;
+  text-align: center;
+}
+
+/* OverlayPanel dark theme styling */
+:deep(.p-overlaypanel) {
+  background-color: #343a40 !important;
+  border: 1px solid #495057 !important;
+  border-radius: 0.25rem !important;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4) !important;
+}
+
+:deep(.p-overlaypanel .p-overlaypanel-content) {
+  background-color: #343a40 !important;
+  color: white !important;
+  padding: 0 !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .main-content {
+    padding: 1rem;
+  }
+
+  .brand-section .brand-title {
+    font-size: 1.25rem !important;
+  }
+
+  .end-section {
+    gap: 0.5rem !important;
+  }
+
+  :deep(.p-menubar) {
+    padding: 0.5rem 1rem !important;
+  }
 }
 </style>
diff --git a/client-vue3/src/assets/styles/components.css b/client-vue3/src/assets/styles/components.css
new file mode 100644
index 00000000..63052be0
--- /dev/null
+++ b/client-vue3/src/assets/styles/components.css
@@ -0,0 +1,459 @@
+/* DigiScript Components - Reusable Component Styles */
+
+/* =============================================================================
+   Form Field Wrapper Styles
+   ============================================================================= */
+
+.ds-form-field {
+  margin-bottom: 1rem;
+}
+
+.ds-form-field-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--ds-text-primary);
+}
+
+.ds-form-field-label.required::after {
+  content: ' *';
+  color: var(--ds-danger);
+}
+
+.ds-form-field-help {
+  font-size: 0.875rem;
+  color: var(--ds-text-muted);
+  margin-top: 0.25rem;
+}
+
+.ds-form-field-error {
+  font-size: 0.875rem;
+  color: var(--ds-danger);
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ds-form-field-error::before {
+  content: '⚠️';
+}
+
+/* Form Field Input Variants */
+.ds-form-field-input {
+  width: 100%;
+}
+
+.ds-form-field-input.error {
+  border-color: var(--ds-danger) !important;
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
+}
+
+/* =============================================================================
+   Button Variants & Patterns
+   ============================================================================= */
+
+/* Button Group Patterns */
+.ds-button-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.ds-button-group-right {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+/* Custom Button Variants */
+.ds-btn-icon-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ds-btn-loading {
+  position: relative;
+}
+
+.ds-btn-loading::before {
+  content: '';
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* =============================================================================
+   Tab System Patterns
+   ============================================================================= */
+
+/* Tab Content Sections */
+.ds-tab-section {
+  margin-bottom: 2rem;
+}
+
+.ds-tab-section:last-child {
+  margin-bottom: 0;
+}
+
+.ds-tab-section-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--ds-text-primary);
+  border-bottom: 1px solid var(--ds-border-primary);
+  padding-bottom: 0.5rem;
+}
+
+/* Tab Panel Content */
+.ds-tab-content {
+  padding: 1.5rem 0;
+}
+
+/* =============================================================================
+   Layout Patterns
+   ============================================================================= */
+
+/* System Overview Sections */
+.ds-system-section {
+  margin-bottom: 2rem;
+  padding: 1rem;
+  background-color: var(--ds-bg-secondary);
+  border-radius: 0.375rem;
+  border: 1px solid var(--ds-border-primary);
+}
+
+.ds-system-section:last-child {
+  margin-bottom: 0;
+}
+
+.ds-system-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ds-border-primary);
+}
+
+.ds-system-section-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--ds-text-primary);
+  margin: 0;
+}
+
+.ds-system-section-content {
+  display: grid;
+  gap: 1rem;
+}
+
+/* Info Grid Pattern */
+.ds-info-grid {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--ds-border-primary);
+}
+
+.ds-info-grid:last-child {
+  border-bottom: none;
+}
+
+.ds-info-grid-label {
+  font-weight: 600;
+  color: var(--ds-text-primary);
+  min-width: 120px;
+}
+
+.ds-info-grid-value {
+  color: var(--ds-text-primary);
+  flex: 1;
+}
+
+.ds-info-grid-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+/* Status Indicators */
+.ds-status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.ds-status-indicator.success {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: var(--ds-success);
+  border: 1px solid var(--ds-success);
+}
+
+.ds-status-indicator.warning {
+  background-color: rgba(255, 193, 7, 0.2);
+  color: var(--ds-warning);
+  border: 1px solid var(--ds-warning);
+}
+
+.ds-status-indicator.danger {
+  background-color: rgba(220, 53, 69, 0.2);
+  color: var(--ds-danger);
+  border: 1px solid var(--ds-danger);
+}
+
+.ds-status-indicator.info {
+  background-color: rgba(23, 162, 184, 0.2);
+  color: var(--ds-info);
+  border: 1px solid var(--ds-info);
+}
+
+.ds-status-indicator::before {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+/* =============================================================================
+   Data Display Patterns
+   ============================================================================= */
+
+/* Statistics Cards */
+.ds-stat-card {
+  background-color: var(--ds-bg-secondary);
+  border: 1px solid var(--ds-border-primary);
+  border-radius: 0.375rem;
+  padding: 1.5rem;
+  text-align: center;
+  transition: all 0.2s ease;
+}
+
+.ds-stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ds-shadow-md);
+}
+
+.ds-stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--ds-primary);
+  display: block;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+
+.ds-stat-label {
+  font-size: 0.875rem;
+  color: var(--ds-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+/* List Groups */
+.ds-list-group {
+  background-color: var(--ds-bg-secondary);
+  border: 1px solid var(--ds-border-primary);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.ds-list-item {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--ds-border-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--ds-bg-secondary);
+  color: var(--ds-text-primary);
+  transition: background-color 0.15s ease;
+}
+
+.ds-list-item:hover {
+  background-color: var(--ds-hover-bg);
+}
+
+.ds-list-item:last-child {
+  border-bottom: none;
+}
+
+.ds-list-item-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.ds-list-item-title {
+  font-weight: 600;
+  color: var(--ds-text-primary);
+}
+
+.ds-list-item-subtitle {
+  font-size: 0.875rem;
+  color: var(--ds-text-muted);
+}
+
+.ds-list-item-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* =============================================================================
+   Modal & Dialog Patterns
+   ============================================================================= */
+
+/* Modal Header Patterns */
+.ds-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--ds-border-primary);
+}
+
+.ds-modal-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ds-text-primary);
+  margin: 0;
+}
+
+/* Modal Content Sections */
+.ds-modal-section {
+  margin-bottom: 1.5rem;
+}
+
+.ds-modal-section:last-child {
+  margin-bottom: 0;
+}
+
+.ds-modal-section-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--ds-text-primary);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ds-border-primary);
+}
+
+/* Modal Footer */
+.ds-modal-footer {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding-top: 1rem;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--ds-border-primary);
+}
+
+.ds-modal-footer.left {
+  justify-content: flex-start;
+}
+
+.ds-modal-footer.center {
+  justify-content: center;
+}
+
+.ds-modal-footer.between {
+  justify-content: space-between;
+}
+
+/* =============================================================================
+   Loading & Empty States
+   ============================================================================= */
+
+.ds-loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.ds-loading-spinner::before {
+  content: '';
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid var(--ds-border-primary);
+  border-top: 3px solid var(--ds-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.ds-empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--ds-text-muted);
+}
+
+.ds-empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.ds-empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ds-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.ds-empty-state-description {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  max-width: 400px;
+  margin: 0 auto 1.5rem;
+}
+
+/* =============================================================================
+   Responsive Utilities
+   ============================================================================= */
+
+/* Mobile-first responsive patterns */
+@media (max-width: 768px) {
+  .ds-button-group,
+  .ds-button-group-right {
+    flex-direction: column;
+  }
+  
+  .ds-info-grid {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+  
+  .ds-info-grid-actions {
+    justify-content: flex-start;
+  }
+  
+  .ds-modal-footer {
+    flex-direction: column-reverse;
+  }
+  
+  .ds-modal-footer.between {
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+  }
+}
\ No newline at end of file
diff --git a/client-vue3/src/assets/styles/main.css b/client-vue3/src/assets/styles/main.css
index 27a97a9d..6938fe74 100644
--- a/client-vue3/src/assets/styles/main.css
+++ b/client-vue3/src/assets/styles/main.css
@@ -10,8 +10,8 @@
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   line-height: 1.6;
-  color: #2d3748;
-  background-color: #f7fafc;
+  color: #fff;
+  background-color: #343a40;
 }
 
 /* Typography */
@@ -25,15 +25,15 @@ p {
   margin-bottom: 1rem;
 }
 
-/* Links */
+/* Links - Dark theme */
 a {
-  color: #007bff;
+  color: #17a2b8;
   text-decoration: none;
   transition: color 0.15s ease-in-out;
 }
 
 a:hover {
-  color: #0056b3;
+  color: #20c997;
   text-decoration: underline;
 }
 
@@ -86,9 +86,22 @@ a:hover {
   opacity: 0;
 }
 
-/* App layout */
+/* App layout - Dark theme to match Vue 2 */
 #app {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background-color: #343a40;
+  color: #fff;
+}
+
+/* Global dark theme overrides for consistency */
+html.p-dark {
+  background-color: #343a40 !important;
+  color: #fff !important;
+}
+
+html.p-dark body {
+  background-color: #343a40 !important;
+  color: #fff !important;
 }
\ No newline at end of file
diff --git a/client-vue3/src/assets/styles/theme.css b/client-vue3/src/assets/styles/theme.css
new file mode 100644
index 00000000..e700788e
--- /dev/null
+++ b/client-vue3/src/assets/styles/theme.css
@@ -0,0 +1,357 @@
+/* DigiScript Theme - Centralized CSS Variables and PrimeVue Overrides */
+
+/* =============================================================================
+   DigiScript Brand Colors & Theme Variables
+   ============================================================================= */
+
+:root {
+  /* DigiScript Brand Colors */
+  --ds-primary: #3498da;      /* DigiScript blue - primary brand color */
+  --ds-primary-hover: #2980b9; /* Darker blue for hover states */
+  
+  /* Dark Theme Base Colors */
+  --ds-bg-primary: #343a40;    /* Main background */
+  --ds-bg-secondary: #495057;  /* Secondary background (cards, panels) */
+  --ds-bg-tertiary: #6c757d;   /* Tertiary background */
+  
+  /* Text Colors */
+  --ds-text-primary: #ffffff;  /* Primary text */
+  --ds-text-secondary: #adb5bd; /* Secondary/muted text */
+  --ds-text-muted: #6c757d;    /* Muted text */
+  
+  /* Border Colors */
+  --ds-border-primary: #495057; /* Primary borders */
+  --ds-border-secondary: #6c757d; /* Secondary borders */
+  
+  /* Status Colors */
+  --ds-success: #28a745;       /* Success green */
+  --ds-success-hover: #218838; /* Success hover */
+  --ds-info: #17a2b8;          /* Info cyan */
+  --ds-info-hover: #138496;    /* Info hover */
+  --ds-warning: #ffc107;       /* Warning yellow */
+  --ds-warning-hover: #e0a800; /* Warning hover */
+  --ds-danger: #dc3545;        /* Danger red */
+  --ds-danger-hover: #c82333;  /* Danger hover */
+  --ds-orange: #ea580c;        /* Orange accent */
+  
+  /* Interactive Elements */
+  --ds-hover-bg: #495057;      /* Generic hover background */
+  --ds-active-bg: #6c757d;     /* Active state background */
+  --ds-focus-ring: rgba(52, 152, 218, 0.25); /* Focus ring color */
+  
+  /* Form Elements */
+  --ds-input-bg: #495057;      /* Input background */
+  --ds-input-border: #6c757d;  /* Input border */
+  --ds-input-focus-border: var(--ds-primary); /* Input focus border */
+  
+  /* Shadows */
+  --ds-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
+  --ds-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
+  --ds-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
+}
+
+/* =============================================================================
+   PrimeVue Dark Theme Variable Overrides
+   ============================================================================= */
+
+html.p-dark {
+  /* Global theme override */
+  --p-primary-color: var(--ds-primary);
+  --p-primary-contrast-color: var(--ds-text-primary);
+  
+  /* Surface colors */
+  --p-surface-0: var(--ds-bg-primary);
+  --p-surface-50: var(--ds-bg-secondary);
+  --p-surface-100: var(--ds-bg-secondary);
+  --p-surface-200: var(--ds-bg-tertiary);
+  --p-surface-300: var(--ds-bg-tertiary);
+  --p-surface-400: #5a6268;
+  --p-surface-500: var(--ds-bg-tertiary);
+  --p-surface-600: var(--ds-bg-secondary);
+  --p-surface-700: var(--ds-bg-primary);
+  --p-surface-800: #212529;
+  --p-surface-900: #1a1e21;
+  
+  /* Text colors */
+  --p-text-color: var(--ds-text-primary);
+  --p-text-muted-color: var(--ds-text-secondary);
+  --p-text-hover-color: var(--ds-text-primary);
+  
+  /* Border colors */
+  --p-content-border-color: var(--ds-border-primary);
+  --p-border-color: var(--ds-border-secondary);
+  
+  /* Background and overlay */
+  background-color: var(--ds-bg-primary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+html.p-dark body {
+  background-color: var(--ds-bg-primary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+/* =============================================================================
+   PrimeVue Component Overrides - Tab System
+   ============================================================================= */
+
+/* Tab View Styling - Consistent across all admin pages */
+.p-dark .p-tabview {
+  background-color: var(--ds-bg-primary) !important;
+  border-radius: 0;
+  border: 1px solid var(--ds-border-primary) !important;
+}
+
+.p-dark .p-tabview-nav {
+  background-color: var(--ds-bg-secondary) !important;
+  border-bottom: 1px solid var(--ds-border-secondary) !important;
+  border-radius: 0;
+  padding: 0;
+}
+
+.p-dark .p-tabview-nav-link {
+  background-color: var(--ds-bg-secondary) !important;
+  border-right: 1px solid var(--ds-border-secondary) !important;
+  border-top: 1px solid var(--ds-border-secondary) !important;
+  border-left: 1px solid var(--ds-border-secondary) !important;
+  border-bottom: none !important;
+  color: var(--ds-text-secondary) !important;
+  border-radius: 0;
+  padding: 0.75rem 1rem;
+  transition: all 0.2s ease;
+}
+
+.p-dark .p-tabview-nav-link:first-child {
+  border-left: none !important;
+}
+
+.p-dark .p-tabview-nav-link:last-child {
+  border-right: 1px solid var(--ds-border-secondary) !important;
+}
+
+.p-dark .p-tabview-nav-link.p-highlight {
+  background-color: var(--ds-bg-primary) !important;
+  border-bottom: 1px solid var(--ds-bg-primary) !important;
+  color: var(--ds-text-primary) !important;
+  font-weight: 600;
+}
+
+.p-dark .p-tabview-nav-link.p-disabled {
+  color: var(--ds-border-secondary) !important;
+  opacity: 0.6;
+}
+
+.p-dark .p-tabview-panels {
+  background-color: var(--ds-bg-primary) !important;
+  padding: 1rem;
+  border-radius: 0;
+  border: none;
+}
+
+.p-dark .p-tabview-panel {
+  padding: 0;
+}
+
+/* =============================================================================
+   PrimeVue Component Overrides - Cards & Containers
+   ============================================================================= */
+
+.p-dark .p-card {
+  background-color: var(--ds-bg-primary) !important;
+  border: 1px solid var(--ds-border-primary) !important;
+  border-radius: 0.375rem;
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.p-dark .p-card .p-card-content {
+  padding: 1.25rem;
+}
+
+/* =============================================================================
+   PrimeVue Component Overrides - Buttons
+   ============================================================================= */
+
+/* Success Button Variants */
+.p-dark .p-button.p-button-success.p-button-outlined {
+  border-color: var(--ds-success) !important;
+  color: var(--ds-success) !important;
+  background-color: transparent !important;
+}
+
+.p-dark .p-button.p-button-success.p-button-outlined:hover {
+  background-color: var(--ds-success) !important;
+  color: var(--ds-text-primary) !important;
+  border-color: var(--ds-success) !important;
+}
+
+/* Info Button Variants */
+.p-dark .p-button.p-button-info {
+  background-color: var(--ds-info) !important;
+  border-color: var(--ds-info) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+.p-dark .p-button.p-button-info:hover {
+  background-color: var(--ds-info-hover) !important;
+  border-color: var(--ds-info-hover) !important;
+}
+
+/* Secondary Button Variants */
+.p-dark .p-button.p-button-secondary {
+  background-color: var(--ds-bg-tertiary) !important;
+  border-color: var(--ds-bg-tertiary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+.p-dark .p-button.p-button-secondary:hover {
+  background-color: #5a6268 !important;
+  border-color: #5a6268 !important;
+}
+
+.p-dark .p-button.p-button-secondary.p-button-outlined {
+  color: var(--ds-border-secondary) !important;
+  border-color: var(--ds-border-secondary) !important;
+  background-color: transparent !important;
+}
+
+.p-dark .p-button.p-button-secondary.p-button-outlined:hover {
+  background-color: var(--ds-bg-tertiary) !important;
+  color: var(--ds-text-primary) !important;
+  border-color: var(--ds-bg-tertiary) !important;
+}
+
+/* =============================================================================
+   PrimeVue Component Overrides - Form Elements
+   ============================================================================= */
+
+/* Input Fields */
+.p-dark .p-inputtext,
+.p-dark .p-dropdown,
+.p-dark .p-multiselect {
+  background-color: var(--ds-input-bg) !important;
+  border: 1px solid var(--ds-input-border) !important;
+  color: var(--ds-text-primary) !important;
+  border-radius: 0.25rem;
+}
+
+.p-dark .p-inputtext:focus,
+.p-dark .p-dropdown:focus,
+.p-dark .p-multiselect:focus {
+  border-color: var(--ds-input-focus-border) !important;
+  box-shadow: 0 0 0 0.2rem var(--ds-focus-ring) !important;
+}
+
+/* Dropdown specific */
+.p-dark .p-dropdown-panel {
+  background-color: var(--ds-bg-secondary) !important;
+  border: 1px solid var(--ds-border-secondary) !important;
+}
+
+.p-dark .p-dropdown-item:hover {
+  background-color: var(--ds-hover-bg) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+/* Calendar/DatePicker */
+.p-dark .p-datepicker {
+  background-color: var(--ds-bg-secondary) !important;
+  border: 1px solid var(--ds-border-secondary) !important;
+}
+
+.p-dark .p-datepicker-header {
+  background-color: var(--ds-bg-tertiary) !important;
+  border-bottom: 1px solid var(--ds-border-secondary) !important;
+}
+
+.p-dark .p-datepicker-calendar td span:hover {
+  background-color: var(--ds-hover-bg) !important;
+}
+
+.p-dark .p-datepicker-calendar td.p-datepicker-today span {
+  background-color: var(--ds-primary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+/* =============================================================================
+   PrimeVue Component Overrides - Data Tables
+   ============================================================================= */
+
+.p-dark .p-datatable {
+  background-color: var(--ds-bg-secondary) !important;
+  border: 1px solid var(--ds-border-secondary) !important;
+}
+
+.p-dark .p-datatable .p-datatable-thead > tr > th {
+  background-color: var(--ds-bg-tertiary) !important;
+  border-color: var(--ds-border-secondary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+.p-dark .p-datatable .p-datatable-tbody > tr > td {
+  border-color: var(--ds-border-primary) !important;
+  background-color: var(--ds-bg-secondary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+.p-dark .p-datatable .p-datatable-tbody > tr:hover > td {
+  background-color: var(--ds-hover-bg) !important;
+}
+
+/* =============================================================================
+   PrimeVue Component Overrides - Modals & Overlays
+   ============================================================================= */
+
+.p-dark .p-dialog {
+  background-color: var(--ds-bg-secondary) !important;
+  border: 1px solid var(--ds-border-secondary) !important;
+  box-shadow: var(--ds-shadow-lg);
+}
+
+.p-dark .p-dialog-header {
+  background-color: var(--ds-bg-tertiary) !important;
+  border-bottom: 1px solid var(--ds-border-secondary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+.p-dark .p-dialog-content {
+  background-color: var(--ds-bg-secondary) !important;
+  color: var(--ds-text-primary) !important;
+}
+
+/* =============================================================================
+   Utility Classes for Common Patterns
+   ============================================================================= */
+
+.ds-card {
+  background-color: var(--ds-bg-primary);
+  border: 1px solid var(--ds-border-primary);
+  border-radius: 0.375rem;
+  box-shadow: var(--ds-shadow-sm);
+  padding: 1.25rem;
+}
+
+.ds-muted-text {
+  color: var(--ds-text-muted);
+}
+
+.ds-text-orange {
+  color: var(--ds-orange);
+}
+
+.ds-bg-secondary {
+  background-color: var(--ds-bg-secondary);
+}
+
+.ds-border {
+  border: 1px solid var(--ds-border-primary);
+}
+
+.ds-shadow-sm {
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.ds-hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--ds-shadow-md);
+  transition: all 0.2s ease;
+}
\ No newline at end of file
diff --git a/client-vue3/src/components/CreateAdminUser.vue b/client-vue3/src/components/CreateAdminUser.vue
new file mode 100644
index 00000000..aef96d61
--- /dev/null
+++ b/client-vue3/src/components/CreateAdminUser.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="create-admin-user">
+    <form @submit.prevent="createUser" class="admin-form">
+      <div class="form-group">
+        <label for="username" class="form-label">Username</label>
+        <InputText
+          id="username"
+          v-model="formState.username"
+          :disabled="true"
+          :class="{ 'p-invalid': errors.username }"
+          class="form-input"
+        />
+        <small v-if="errors.username" class="error-message">
+          {{ errors.username }}
+        </small>
+      </div>
+
+      <div class="form-group">
+        <label for="password" class="form-label">Password</label>
+        <Password
+          id="password"
+          v-model="formState.password"
+          :class="{ 'p-invalid': errors.password }"
+          :feedback="false"
+          toggleMask
+          class="form-input"
+        />
+        <small v-if="errors.password" class="error-message">
+          {{ errors.password }}
+        </small>
+      </div>
+
+      <div class="form-group">
+        <label for="confirmPassword" class="form-label">Confirm Password</label>
+        <Password
+          id="confirmPassword"
+          v-model="formState.confirmPassword"
+          :class="{ 'p-invalid': errors.confirmPassword }"
+          :feedback="false"
+          toggleMask
+          class="form-input"
+        />
+        <small v-if="errors.confirmPassword" class="error-message">
+          {{ errors.confirmPassword }}
+        </small>
+      </div>
+
+      <div class="form-actions">
+        <Button
+          type="submit"
+          :disabled="!isFormValid || isSubmitting"
+          :loading="isSubmitting"
+          label="Save"
+          icon="pi pi-check"
+          severity="success"
+          class="save-button"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
+import Button from 'primevue/button';
+import { useToast } from 'primevue/usetoast';
+import { useAuthStore } from '../stores/auth';
+import { useSettingsStore } from '../stores/settings';
+
+// Props (for future expansion)
+interface Props {
+  isFirstAdmin?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isFirstAdmin: false,
+});
+
+// Emits
+const emit = defineEmits<{
+  'user-created': [];
+}>();
+
+// Dependencies
+const toast = useToast();
+const authStore = useAuthStore();
+const settingsStore = useSettingsStore();
+
+// Form state
+const formState = ref({
+  username: props.isFirstAdmin ? 'admin' : '',
+  password: '',
+  confirmPassword: '',
+});
+
+const errors = ref({
+  username: '',
+  password: '',
+  confirmPassword: '',
+});
+
+const isSubmitting = ref(false);
+
+// Computed
+const isFormValid = computed(() => (
+  formState.value.username.length > 0
+    && formState.value.password.length >= 6
+    && formState.value.confirmPassword === formState.value.password
+    && !errors.value.username
+    && !errors.value.password
+    && !errors.value.confirmPassword
+));
+
+// Validation
+function validateConfirmPassword() {
+  if (!formState.value.confirmPassword) {
+    errors.value.confirmPassword = 'This is a required field.';
+  } else if (formState.value.confirmPassword !== formState.value.password) {
+    errors.value.confirmPassword = 'Passwords do not match.';
+  } else {
+    errors.value.confirmPassword = '';
+  }
+}
+
+function validateUsername() {
+  if (!formState.value.username) {
+    errors.value.username = 'This is a required field.';
+  } else {
+    errors.value.username = '';
+  }
+}
+
+function validatePassword() {
+  if (!formState.value.password) {
+    errors.value.password = 'This is a required field and must be at least 6 characters.';
+  } else if (formState.value.password.length < 6) {
+    errors.value.password = 'This is a required field and must be at least 6 characters.';
+  } else {
+    errors.value.password = '';
+  }
+
+  // Also revalidate confirm password if it has a value
+  if (formState.value.confirmPassword) {
+    validateConfirmPassword();
+  }
+}
+
+// Watch for changes and validate
+watch(() => formState.value.username, validateUsername);
+watch(() => formState.value.password, validatePassword);
+watch(() => formState.value.confirmPassword, validateConfirmPassword);
+
+// Actions
+async function createUser() {
+  // Final validation
+  validateUsername();
+  validatePassword();
+  validateConfirmPassword();
+
+  if (!isFormValid.value) {
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  try {
+    const userData = {
+      username: formState.value.username,
+      password: formState.value.password,
+      is_admin: props.isFirstAdmin,
+    };
+
+    await authStore.createUser(userData);
+
+    // If this was the first admin creation, refresh settings to update has_admin_user
+    if (props.isFirstAdmin) {
+      await settingsStore.getSettings();
+    }
+
+    toast.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: 'User created successfully!',
+      life: 3000,
+    });
+
+    emit('user-created');
+  } catch (error) {
+    console.error('Error creating user:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Unable to create user. Please try again.',
+      life: 5000,
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.create-admin-user {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.admin-form {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #2d3748;
+  font-size: 0.875rem;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.error-message {
+  color: #e53e3e;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.form-actions {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.save-button {
+  width: 100%;
+}
+
+/* Dark theme compatibility */
+@media (prefers-color-scheme: dark) {
+  .admin-form {
+    background: #2d3748;
+    border-color: #4a5568;
+  }
+
+  .form-label {
+    color: #e2e8f0;
+  }
+}
+</style>
diff --git a/client-vue3/src/components/admin/ConnectedClientsModal.vue b/client-vue3/src/components/admin/ConnectedClientsModal.vue
new file mode 100644
index 00000000..f4a0ebb0
--- /dev/null
+++ b/client-vue3/src/components/admin/ConnectedClientsModal.vue
@@ -0,0 +1,204 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    header="Connected Clients"
+    :style="{ width: '800px' }"
+  >
+    <div v-if="loading" class="d-flex justify-content-center align-items-center py-4">
+      <ProgressSpinner />
+    </div>
+
+    <div v-else-if="settingsStore.connectedClients.length === 0" class="text-center py-4">
+      <p class="text-muted">No clients currently connected.</p>
+    </div>
+
+    <div v-else class="overflow-auto">
+      <DataTable
+        :value="settingsStore.connectedClients"
+        :paginator="settingsStore.connectedClients.length > perPage"
+        :rows="perPage"
+        class="p-datatable-sm"
+        :loading="loading"
+      >
+        <Column field="internal_id" header="UUID" :sortable="true" style="width: 300px;">
+          <template #body="slotProps">
+            <code class="small">{{ slotProps.data.internal_id }}</code>
+          </template>
+        </Column>
+        <Column field="remote_ip" header="IP Address" :sortable="true" style="width: 120px;" />
+        <Column field="is_editor" header="Editing Script" :sortable="true" style="width: 140px;">
+          <template #body="slotProps">
+            <Tag
+              :value="slotProps.data.is_editor ? 'Yes' : 'No'"
+              :severity="slotProps.data.is_editor ? 'success' : 'secondary'"
+            />
+          </template>
+        </Column>
+        <Column field="last_ping" header="Last Ping" :sortable="true" style="width: 140px;">
+          <template #body="slotProps">
+            {{ formatDateTime(slotProps.data.last_ping) }}
+          </template>
+        </Column>
+        <Column field="last_pong" header="Last Pong" :sortable="true" style="width: 140px;">
+          <template #body="slotProps">
+            {{ formatDateTime(slotProps.data.last_pong) }}
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <template #footer>
+      <div class="d-flex justify-content-end w-100">
+        <Button
+          label="Close"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, computed, watch, onMounted, onUnmounted,
+} from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useSettingsStore } from '@/stores/settings';
+
+// PrimeVue Components
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ProgressSpinner from 'primevue/progressspinner';
+import Tag from 'primevue/tag';
+
+// Props
+interface Props {
+  modelValue: boolean;
+}
+
+const props = defineProps<Props>();
+
+// Emits
+interface Emits {
+  // eslint-disable-next-line no-unused-vars
+  (e: 'update:modelValue', value: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// State
+const toast = useToast();
+const settingsStore = useSettingsStore();
+
+const loading = ref(false);
+const perPage = ref(5);
+let refreshInterval: ReturnType<typeof setInterval> | null = null;
+
+// Computed
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+// Methods
+function formatDateTime(dateString: string): string {
+  try {
+    return new Date(dateString).toLocaleString();
+  } catch {
+    return dateString;
+  }
+}
+
+function stopAutoRefresh() {
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+    refreshInterval = null;
+  }
+}
+
+function startAutoRefresh() {
+  // Refresh clients every 2 seconds when modal is open
+  refreshInterval = setInterval(async () => {
+    if (!loading.value) {
+      try {
+        await settingsStore.getConnectedClients();
+      } catch (error) {
+        console.error('Auto-refresh error:', error);
+      }
+    }
+  }, 2000);
+}
+
+function closeModal() {
+  visible.value = false;
+  stopAutoRefresh();
+}
+
+async function refreshClients() {
+  // Show loading only on initial load, not for subsequent refreshes
+  const isInitialLoad = !settingsStore.connectedClients.length;
+  if (isInitialLoad) {
+    loading.value = true;
+  }
+
+  try {
+    await settingsStore.getConnectedClients();
+  } catch (error) {
+    console.error('Error refreshing connected clients:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Unable to refresh connected clients',
+      life: 5000,
+    });
+  } finally {
+    if (isInitialLoad) {
+      loading.value = false;
+    }
+  }
+}
+
+// Watch for modal visibility changes
+watch(visible, async (newValue) => {
+  if (newValue) {
+    await refreshClients();
+    startAutoRefresh();
+  } else {
+    stopAutoRefresh();
+  }
+});
+
+// Cleanup on unmount
+onUnmounted(() => {
+  stopAutoRefresh();
+});
+
+// Load clients on component mount if modal is visible
+onMounted(async () => {
+  if (visible.value) {
+    await refreshClients();
+    startAutoRefresh();
+  }
+});
+</script>
+
+<style scoped>
+:deep(.p-datatable-sm .p-datatable-tbody > tr > td) {
+  padding: 0.5rem;
+}
+
+:deep(.p-datatable-sm .p-datatable-thead > tr > th) {
+  padding: 0.5rem;
+}
+
+code.small {
+  font-size: 0.75rem;
+  background-color: var(--surface-100);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-family: 'Courier New', monospace;
+}
+</style>
diff --git a/client-vue3/src/components/admin/CreateShowModal.vue b/client-vue3/src/components/admin/CreateShowModal.vue
new file mode 100644
index 00000000..6eeb20c4
--- /dev/null
+++ b/client-vue3/src/components/admin/CreateShowModal.vue
@@ -0,0 +1,351 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    header="Setup New Show"
+    :style="{ width: '500px' }"
+    :closable="!isSubmitting"
+    :closeOnEscape="!isSubmitting"
+  >
+    <Form
+      v-slot="$form"
+      :initialValues="initialValues"
+      :resolver="resolver"
+      @submit="handleSubmit"
+      class="create-show-form"
+    >
+      <!-- Show Name Field -->
+      <div class="field mb-4">
+        <label for="show-name" class="font-bold">Show Name</label>
+        <InputText
+          id="show-name"
+          name="name"
+          placeholder="Enter show name"
+          class="w-full"
+          :class="{ 'p-invalid': $form.name?.invalid }"
+          :disabled="isSubmitting"
+          fluid
+        />
+        <Message
+          v-if="$form.name?.invalid"
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          {{ $form.name.error?.message }}
+        </Message>
+      </div>
+
+      <!-- Start Date Field -->
+      <div class="field mb-4">
+        <label for="show-start" class="font-bold">Start Date</label>
+        <Calendar
+          id="show-start"
+          name="start"
+          class="w-full"
+          :class="{ 'p-invalid': $form.start?.invalid }"
+          dateFormat="yy-mm-dd"
+          :disabled="isSubmitting"
+          fluid
+        />
+        <Message
+          v-if="$form.start?.invalid"
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          {{ $form.start.error?.message }}
+        </Message>
+      </div>
+
+      <!-- End Date Field -->
+      <div class="field mb-4">
+        <label for="show-end" class="font-bold">End Date</label>
+        <Calendar
+          id="show-end"
+          name="end"
+          class="w-full"
+          :class="{ 'p-invalid': $form.end?.invalid }"
+          dateFormat="yy-mm-dd"
+          :disabled="isSubmitting"
+          fluid
+        />
+        <Message
+          v-if="$form.end?.invalid"
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          {{ $form.end.error?.message }}
+        </Message>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="d-flex justify-content-between w-100 mt-4">
+        <Button
+          label="Cancel"
+          severity="secondary"
+          outlined
+          type="button"
+          :disabled="isSubmitting"
+          @click="closeModal"
+        />
+        <div class="d-flex gap-2">
+          <Button
+            label="Save and Load"
+            type="button"
+            :loading="isSubmitting && saveAndLoad"
+            :disabled="!$form.valid || isSubmitting"
+@click="() => handleFormSubmit($form, true)"
+          />
+          <Button
+            label="Save"
+            type="submit"
+            :loading="isSubmitting && !saveAndLoad"
+            :disabled="!$form.valid || isSubmitting"
+          />
+        </div>
+      </div>
+    </Form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useShowsStore } from '@/stores/shows';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+
+// PrimeVue Components
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Calendar from 'primevue/calendar';
+import Form from '@primevue/forms/form';
+import type { FormSubmitEvent } from '@primevue/forms/form';
+import Message from 'primevue/message';
+
+// Validation schema
+import {
+  createShowSchema, createShowDefaults, type CreateShowFormData,
+} from '@/schemas/showValidation';
+
+// Props
+interface Props {
+  modelValue: boolean;
+}
+
+const props = defineProps<Props>();
+
+// Emits
+interface Emits {
+  // eslint-disable-next-line no-unused-vars
+  (e: 'update:modelValue', value: boolean): void;
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-explicit-any
+  (e: 'showCreated', show: any): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// Composables
+const toast = useToast();
+const showsStore = useShowsStore();
+
+// Form configuration
+const initialValues = createShowDefaults;
+const resolver = zodResolver(createShowSchema);
+
+// UI state
+const isSubmitting = ref(false);
+const saveAndLoad = ref(false);
+
+// Computed
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+// Event handlers
+function resetForm() {
+  saveAndLoad.value = false;
+}
+
+function closeModal() {
+  resetForm();
+  visible.value = false;
+}
+
+async function createShow(formData: CreateShowFormData, loadAfterCreate: boolean) {
+  // Update the store's form data
+  showsStore.createShowForm = {
+    name: formData.name,
+    start: formData.start,
+    end: formData.end,
+  };
+
+  const result = await showsStore.createShow(loadAfterCreate);
+
+  if (result.success) {
+    toast.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: `Show "${formData.name}" created successfully${loadAfterCreate ? ' and loaded' : ''}`,
+      life: 3000,
+    });
+
+    emit('showCreated', result.show);
+    closeModal();
+  } else {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: result.error || 'Unable to create show',
+      life: 5000,
+    });
+  }
+}
+
+async function handleSubmit(event: FormSubmitEvent): Promise<void> {
+  if (!event.valid) {
+    return;
+  }
+
+  const formData = event.values as CreateShowFormData;
+  isSubmitting.value = true;
+  saveAndLoad.value = false;
+
+  try {
+    await createShow(formData, false);
+    // Reset form using the provided reset function
+    event.reset();
+  } catch (error) {
+    console.error('Error creating show:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'An unexpected error occurred while creating the show',
+      life: 5000,
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+async function handleFormSubmit(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  form: any,
+  loadAfterCreate: boolean,
+) {
+  if (!form.valid) {
+    toast.add({
+      severity: 'error',
+      summary: 'Validation Error',
+      detail: 'Please correct the errors in the form.',
+      life: 3000,
+    });
+    return;
+  }
+
+  const formData = form.values as CreateShowFormData;
+  saveAndLoad.value = loadAfterCreate;
+  isSubmitting.value = true;
+
+  try {
+    await createShow(formData, loadAfterCreate);
+    // Reset form
+    form.reset();
+  } catch (error) {
+    console.error('Error creating show:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'An unexpected error occurred while creating the show',
+      life: 5000,
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+// Watch for modal visibility changes to reset form
+watch(visible, (newValue) => {
+  if (newValue) {
+    resetForm();
+  }
+});
+</script>
+
+<style scoped>
+.create-show-form {
+  padding: 0;
+}
+
+.field {
+  margin-bottom: 1.5rem;
+}
+
+.field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+  font-weight: bold;
+}
+
+/* Dark theme form styling */
+:deep(.p-inputtext) {
+  background-color: var(--surface-ground);
+  border-color: var(--surface-border);
+  color: var(--text-color);
+}
+
+:deep(.p-inputtext:focus) {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.2rem var(--primary-color-alpha);
+}
+
+:deep(.p-calendar .p-inputtext) {
+  background-color: var(--surface-ground);
+  border-color: var(--surface-border);
+  color: var(--text-color);
+}
+
+/* Error styling */
+:deep(.p-invalid) {
+  border-color: var(--red-500) !important;
+}
+
+/* Button styling */
+:deep(.p-button) {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+:deep(.p-button:hover) {
+  background-color: var(--primary-color-dark);
+  border-color: var(--primary-color-dark);
+}
+
+:deep(.p-button.p-button-secondary) {
+  background-color: var(--surface-500);
+  border-color: var(--surface-500);
+  color: var(--text-color);
+}
+
+:deep(.p-button.p-button-secondary:hover) {
+  background-color: var(--surface-600);
+  border-color: var(--surface-600);
+}
+
+:deep(.p-button.p-button-outlined) {
+  background-color: transparent;
+  color: var(--surface-500);
+  border-color: var(--surface-500);
+}
+
+:deep(.p-button.p-button-outlined:hover) {
+  background-color: var(--surface-500);
+  color: var(--text-color-secondary);
+  border-color: var(--surface-500);
+}
+
+</style>
diff --git a/client-vue3/src/components/admin/LoadShowModal.vue b/client-vue3/src/components/admin/LoadShowModal.vue
new file mode 100644
index 00000000..69ae27eb
--- /dev/null
+++ b/client-vue3/src/components/admin/LoadShowModal.vue
@@ -0,0 +1,187 @@
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    header="Load Show"
+    :style="{ width: '800px' }"
+    :closable="!showsStore.isSubmittingLoad"
+    :closeOnEscape="!showsStore.isSubmittingLoad"
+  >
+    <div v-if="loading" class="d-flex justify-content-center align-items-center py-4">
+      <ProgressSpinner />
+    </div>
+
+    <div v-else-if="showsStore.availableShows.length === 0" class="text-center py-4">
+      <p class="text-muted">No shows available to load.</p>
+    </div>
+
+    <div v-else class="overflow-auto">
+      <DataTable
+        :value="showsStore.availableShows"
+        :paginator="showsStore.availableShows.length > perPage"
+        :rows="perPage"
+        :loading="showsStore.isSubmittingLoad"
+        class="p-datatable-sm"
+      >
+        <Column field="id" header="ID" :sortable="true" style="width: 80px;" />
+        <Column field="name" header="Name" :sortable="true" />
+        <Column field="start_date" header="Start Date" :sortable="true" style="width: 120px;" />
+        <Column field="end_date" header="End Date" :sortable="true" style="width: 120px;" />
+        <Column field="created_at" header="Created" :sortable="true" style="width: 140px;">
+          <template #body="slotProps">
+            {{ formatDateTime(slotProps.data.created_at) }}
+          </template>
+        </Column>
+        <Column header="Action" style="width: 120px;">
+          <template #body="slotProps">
+            <Button
+              label="Load Show"
+              size="small"
+              :loading="showsStore.isSubmittingLoad && selectedShowId === slotProps.data.id"
+              :disabled="showsStore.isSubmittingLoad"
+              @click="loadShow(slotProps.data)"
+            />
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <template #footer>
+      <Button
+        label="Cancel"
+        severity="secondary"
+        outlined
+        :disabled="showsStore.isSubmittingLoad"
+        @click="closeModal"
+      />
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, computed, watch, onMounted,
+} from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useShowsStore } from '@/stores/shows';
+import type { ShowData } from '@/stores/settings';
+
+// PrimeVue Components
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import ProgressSpinner from 'primevue/progressspinner';
+
+// Props
+interface Props {
+  modelValue: boolean;
+}
+
+const props = defineProps<Props>();
+
+// Emits
+interface Emits {
+  // eslint-disable-next-line no-unused-vars
+  (e: 'update:modelValue', value: boolean): void;
+  // eslint-disable-next-line no-unused-vars
+  (e: 'showLoaded', show: ShowData): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// State
+const toast = useToast();
+const showsStore = useShowsStore();
+
+const loading = ref(false);
+const perPage = ref(5);
+const selectedShowId = ref<string | null>(null);
+
+// Computed
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+
+// Methods
+function formatDateTime(dateString: string): string {
+  try {
+    return new Date(dateString).toLocaleString();
+  } catch {
+    return dateString;
+  }
+}
+
+function closeModal() {
+  visible.value = false;
+  selectedShowId.value = null;
+}
+
+async function loadShow(show: ShowData) {
+  selectedShowId.value = show.id;
+
+  const result = await showsStore.loadShow(show.id);
+
+  if (result.success) {
+    toast.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: `Show "${show.name}" loaded successfully`,
+      life: 3000,
+    });
+
+    emit('showLoaded', show);
+    closeModal();
+  } else {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: result.error || 'Unable to load show',
+      life: 5000,
+    });
+    selectedShowId.value = null;
+  }
+}
+
+async function refreshShows() {
+  loading.value = true;
+  try {
+    await showsStore.getAvailableShows();
+  } catch (error) {
+    console.error('Error refreshing shows:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Unable to refresh shows list',
+      life: 5000,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Watch for modal visibility changes to refresh shows
+watch(visible, async (newValue) => {
+  if (newValue) {
+    await refreshShows();
+  }
+});
+
+// Load shows on component mount
+onMounted(async () => {
+  if (visible.value) {
+    await refreshShows();
+  }
+});
+</script>
+
+<style scoped>
+:deep(.p-datatable-sm .p-datatable-tbody > tr > td) {
+  padding: 0.5rem;
+}
+
+:deep(.p-datatable-sm .p-datatable-thead > tr > th) {
+  padding: 0.5rem;
+}
+</style>
diff --git a/client-vue3/src/components/form/CheckboxField.vue b/client-vue3/src/components/form/CheckboxField.vue
new file mode 100644
index 00000000..28d8cbb8
--- /dev/null
+++ b/client-vue3/src/components/form/CheckboxField.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="form-field-checkbox">
+    <Checkbox
+      :id="fieldId"
+      :name="name"
+      :binary="binary"
+      :disabled="disabled"
+      :class="errorClass"
+    />
+    <label :for="fieldId" class="form-field-checkbox__label">
+      {{ label }}
+      <Button
+        v-if="helpText"
+        :id="`${fieldId}-help-btn`"
+        icon="pi pi-question-circle"
+        text
+        rounded
+        severity="secondary"
+        size="small"
+        class="form-field-checkbox__help-button"
+        @click="showHelp"
+      />
+    </label>
+
+    <Message
+      v-if="hasError && errorMessage"
+      severity="error"
+      size="small"
+      variant="simple"
+      class="form-field-checkbox__error"
+    >
+      {{ errorMessage }}
+    </Message>
+
+    <!-- Help Tooltip -->
+    <OverlayPanel v-if="helpText" ref="helpOverlay" class="form-field-checkbox__help-overlay">
+      <div class="form-field-checkbox__help-content">
+        {{ helpText }}
+      </div>
+    </OverlayPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import Checkbox from 'primevue/checkbox';
+import Button from 'primevue/button';
+import Message from 'primevue/message';
+import OverlayPanel from 'primevue/overlaypanel';
+
+interface Props {
+  /** The field name */
+  name: string;
+  /** Field label */
+  label: string;
+  /** Help text to show in tooltip */
+  helpText?: string;
+  /** Whether to use binary mode (true/false vs value/null) */
+  binary?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Error message from form validation */
+  errorMessage?: string;
+  /** Whether the field has an error */
+  hasError?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: undefined,
+  binary: true,
+  disabled: false,
+  errorMessage: undefined,
+  hasError: false,
+});
+
+// Refs
+const helpOverlay = ref();
+
+// Computed
+const fieldId = computed(() => `${props.name}-input`);
+const errorClass = computed(() => ({ 'p-invalid': props.hasError }));
+
+// Methods
+function showHelp(event: Event) {
+  if (helpOverlay.value && props.helpText) {
+    helpOverlay.value.toggle(event);
+  }
+}
+</script>
+
+<style scoped>
+.form-field-checkbox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  gap: 0.5rem;
+}
+
+.form-field-checkbox__label {
+  color: var(--text-color);
+  font-size: 0.875rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.form-field-checkbox__help-button {
+  padding: 0.25rem;
+}
+
+.form-field-checkbox__error {
+  margin-left: auto;
+}
+
+.form-field-checkbox__help-overlay {
+  max-width: 300px;
+}
+
+.form-field-checkbox__help-content {
+  max-width: 300px;
+  line-height: 1.4;
+}
+
+/* Dark theme adjustments */
+:deep(.p-checkbox) {
+  background-color: var(--surface-ground);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-checkbox.p-checkbox-checked) {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+:deep(.p-button.p-button-text) {
+  color: var(--text-color-secondary);
+}
+
+:deep(.p-button.p-button-text:hover) {
+  color: var(--text-color);
+  background-color: var(--surface-hover);
+}
+
+:deep(.p-overlaypanel) {
+  background-color: var(--surface-overlay);
+  color: var(--text-color);
+  border: 1px solid var(--surface-border);
+}
+
+:deep(.p-overlaypanel-content) {
+  background-color: var(--surface-overlay);
+  color: var(--text-color);
+}
+</style>
diff --git a/client-vue3/src/components/form/DateInputField.vue b/client-vue3/src/components/form/DateInputField.vue
new file mode 100644
index 00000000..a8d55c10
--- /dev/null
+++ b/client-vue3/src/components/form/DateInputField.vue
@@ -0,0 +1,73 @@
+<template>
+  <FormField
+    :name="name"
+    :label="label"
+    :help-text="helpText"
+    :required="required"
+    :disabled="disabled"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #default="{ fieldId, errorClass }">
+      <Calendar
+        :id="fieldId"
+        :name="name"
+        :date-format="dateFormat"
+        :disabled="disabled"
+        :class="errorClass"
+        :show-time="showTime"
+        :time-only="timeOnly"
+        :show-button-bar="showButtonBar"
+        :selection-mode="selectionMode"
+        class="w-full"
+        fluid
+      />
+    </template>
+  </FormField>
+</template>
+
+<script setup lang="ts">
+import Calendar from 'primevue/calendar';
+import FormField from './FormField.vue';
+
+interface Props {
+  /** The field name */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Help text to show in tooltip */
+  helpText?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Date format pattern */
+  dateFormat?: string;
+  /** Whether to show time selection */
+  showTime?: boolean;
+  /** Whether to show only time (no date) */
+  timeOnly?: boolean;
+  /** Whether to show button bar */
+  showButtonBar?: boolean;
+  /** Selection mode */
+  selectionMode?: 'single' | 'multiple' | 'range';
+  /** Error message from form validation */
+  errorMessage?: string;
+  /** Whether the field has an error */
+  hasError?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  label: undefined,
+  helpText: undefined,
+  required: false,
+  disabled: false,
+  dateFormat: 'yy-mm-dd',
+  showTime: false,
+  timeOnly: false,
+  showButtonBar: false,
+  selectionMode: 'single',
+  errorMessage: undefined,
+  hasError: false,
+});
+</script>
diff --git a/client-vue3/src/components/form/FormField.vue b/client-vue3/src/components/form/FormField.vue
new file mode 100644
index 00000000..52b1f10f
--- /dev/null
+++ b/client-vue3/src/components/form/FormField.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="form-field" :class="{ 'form-field--error': hasError }">
+    <label
+      v-if="label"
+      :for="fieldId"
+      class="form-field__label"
+      :class="{ 'form-field__label--required': required }"
+    >
+      {{ label }}
+      <Button
+        v-if="helpText"
+        :id="`${fieldId}-help-btn`"
+        icon="pi pi-question-circle"
+        text
+        rounded
+        severity="secondary"
+        size="small"
+        class="form-field__help-button"
+        @click="showHelp"
+      />
+    </label>
+
+    <div class="form-field__input">
+      <slot
+        :fieldId="fieldId"
+        :hasError="hasError"
+        :errorClass="errorClass"
+        :disabled="disabled"
+      />
+    </div>
+
+    <Message
+      v-if="hasError && errorMessage"
+      severity="error"
+      size="small"
+      variant="simple"
+      class="form-field__error"
+    >
+      {{ errorMessage }}
+    </Message>
+
+    <!-- Help Tooltip -->
+    <OverlayPanel v-if="helpText" ref="helpOverlay" class="form-field__help-overlay">
+      <div class="form-field__help-content">
+        {{ helpText }}
+      </div>
+    </OverlayPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import Button from 'primevue/button';
+import Message from 'primevue/message';
+import OverlayPanel from 'primevue/overlaypanel';
+
+interface Props {
+  /** The field name/id */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Help text to show in tooltip */
+  helpText?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Error message from form validation */
+  errorMessage?: string;
+  /** Whether the field has an error */
+  hasError?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  helpText: undefined,
+  required: false,
+  disabled: false,
+  errorMessage: undefined,
+  hasError: false,
+});
+
+// Refs
+const helpOverlay = ref();
+
+// Computed
+const fieldId = computed(() => `${props.name}-input`);
+const errorClass = computed(() => ({ 'p-invalid': props.hasError }));
+
+// Methods
+function showHelp(event: Event) {
+  if (helpOverlay.value && props.helpText) {
+    helpOverlay.value.toggle(event);
+  }
+}
+</script>
+
+<style scoped>
+.form-field {
+  margin-bottom: 1.5rem;
+}
+
+.form-field--error {
+  /* Additional styling for error state if needed */
+}
+
+.form-field__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
+  font-weight: bold;
+  font-size: 0.875rem;
+}
+
+.form-field__label--required::after {
+  content: ' *';
+  color: var(--red-500);
+}
+
+.form-field__help-button {
+  margin-left: 0.5rem;
+  padding: 0.25rem;
+  vertical-align: middle;
+}
+
+.form-field__input {
+  position: relative;
+}
+
+.form-field__error {
+  margin-top: 0.25rem;
+}
+
+.form-field__help-overlay {
+  max-width: 300px;
+}
+
+.form-field__help-content {
+  max-width: 300px;
+  line-height: 1.4;
+}
+
+/* Dark theme adjustments */
+:deep(.p-button.p-button-text) {
+  color: var(--text-color-secondary);
+}
+
+:deep(.p-button.p-button-text:hover) {
+  color: var(--text-color);
+  background-color: var(--surface-hover);
+}
+
+:deep(.p-overlaypanel) {
+  background-color: var(--surface-overlay);
+  color: var(--text-color);
+  border: 1px solid var(--surface-border);
+}
+
+:deep(.p-overlaypanel-content) {
+  background-color: var(--surface-overlay);
+  color: var(--text-color);
+}
+</style>
diff --git a/client-vue3/src/components/form/FormFieldWrapper.vue b/client-vue3/src/components/form/FormFieldWrapper.vue
new file mode 100644
index 00000000..27c66ad4
--- /dev/null
+++ b/client-vue3/src/components/form/FormFieldWrapper.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="ds-form-field">
+    <label
+      v-if="label"
+      :for="fieldId"
+      :class="['ds-form-field-label', { required: required }]"
+    >
+      {{ label }}
+      <slot name="label-addon" />
+    </label>
+
+    <slot :fieldId="fieldId" :hasError="hasError" />
+
+    <div v-if="helpText" class="ds-form-field-help">
+      {{ helpText }}
+    </div>
+
+    <div v-if="hasError && errorMessage" class="ds-form-field-error">
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { generateId } from '@/utils/idGenerator';
+
+interface Props {
+  label?: string;
+  required?: boolean;
+  helpText?: string;
+  errorMessage?: string;
+  hasError?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  helpText: '',
+  errorMessage: '',
+  hasError: false,
+});
+
+// Generate a unique field ID for accessibility
+const fieldId = computed(() => generateId('field'));
+</script>
+
+<style scoped>
+/* All styles are handled by the global components.css file */
+/* This component uses the .ds-form-field, .ds-form-field-label, etc. classes */
+</style>
diff --git a/client-vue3/src/components/form/PasswordInputField.vue b/client-vue3/src/components/form/PasswordInputField.vue
new file mode 100644
index 00000000..cbfc774d
--- /dev/null
+++ b/client-vue3/src/components/form/PasswordInputField.vue
@@ -0,0 +1,65 @@
+<template>
+  <FormField
+    :name="name"
+    :label="label"
+    :help-text="helpText"
+    :required="required"
+    :disabled="disabled"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #default="{ fieldId, errorClass }">
+      <Password
+        :id="fieldId"
+        :name="name"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :class="errorClass"
+        :feedback="showFeedback"
+        :toggle-mask="toggleMask"
+        class="w-full"
+        fluid
+      />
+    </template>
+  </FormField>
+</template>
+
+<script setup lang="ts">
+import Password from 'primevue/password';
+import FormField from './FormField.vue';
+
+interface Props {
+  /** The field name */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Help text to show in tooltip */
+  helpText?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Whether to show password strength feedback */
+  showFeedback?: boolean;
+  /** Whether to show toggle mask button */
+  toggleMask?: boolean;
+  /** Error message from form validation */
+  errorMessage?: string;
+  /** Whether the field has an error */
+  hasError?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  label: undefined,
+  placeholder: undefined,
+  helpText: undefined,
+  required: false,
+  disabled: false,
+  showFeedback: false,
+  toggleMask: true,
+  errorMessage: undefined,
+  hasError: false,
+});
+</script>
diff --git a/client-vue3/src/components/form/TextInputField.vue b/client-vue3/src/components/form/TextInputField.vue
new file mode 100644
index 00000000..91af05b5
--- /dev/null
+++ b/client-vue3/src/components/form/TextInputField.vue
@@ -0,0 +1,65 @@
+<template>
+  <FormField
+    :name="name"
+    :label="label"
+    :help-text="helpText"
+    :required="required"
+    :disabled="disabled"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #default="{ fieldId, errorClass }">
+      <InputText
+        :id="fieldId"
+        :name="name"
+        :type="type"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :disabled="disabled"
+        :class="errorClass"
+        class="w-full"
+        fluid
+      />
+    </template>
+  </FormField>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import FormField from './FormField.vue';
+
+interface Props {
+  /** The field name */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Input type */
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+  /** Placeholder text */
+  placeholder?: string;
+  /** Help text to show in tooltip */
+  helpText?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Whether the field is disabled */
+  disabled?: boolean;
+  /** Whether the field is readonly */
+  readonly?: boolean;
+  /** Error message from form validation */
+  errorMessage?: string;
+  /** Whether the field has an error */
+  hasError?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  label: undefined,
+  type: 'text',
+  placeholder: undefined,
+  helpText: undefined,
+  required: false,
+  disabled: false,
+  readonly: false,
+  errorMessage: undefined,
+  hasError: false,
+});
+</script>
diff --git a/client-vue3/src/components/form/index.ts b/client-vue3/src/components/form/index.ts
new file mode 100644
index 00000000..fb647de3
--- /dev/null
+++ b/client-vue3/src/components/form/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Form Components
+ * Reusable form field components that integrate with @primevue/forms
+ */
+
+// Base form field wrapper
+export { default as FormField } from './FormField.vue';
+
+// Input field components
+export { default as TextInputField } from './TextInputField.vue';
+export { default as PasswordInputField } from './PasswordInputField.vue';
+export { default as CheckboxField } from './CheckboxField.vue';
+export { default as DateInputField } from './DateInputField.vue';
diff --git a/client-vue3/src/components/user/AboutUser.vue b/client-vue3/src/components/user/AboutUser.vue
new file mode 100644
index 00000000..607dd467
--- /dev/null
+++ b/client-vue3/src/components/user/AboutUser.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="about-user">
+    <DataTable
+      :value="userDataArray"
+      show-gridlines
+      class="p-datatable-sm"
+      responsive-layout="scroll"
+    >
+      <Column field="label" header="Property" style="width: 40%"></Column>
+      <Column field="value" header="Value">
+        <template #body="slotProps">
+          {{ slotProps.data.value != null ? slotProps.data.value : 'N/A' }}
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import { useAuthStore } from '../../stores/auth';
+
+const authStore = useAuthStore();
+
+// Utility function to convert snake_case to Title Case
+function titleCase(str: string, separator: string = '_'): string {
+  return str
+    .split(separator)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+}
+
+// Transform user data into table format
+const userDataArray = computed(() => {
+  const user = authStore.currentUser;
+  if (!user) return [];
+
+  const data: Array<{ label: string; value: unknown }> = [];
+
+  // Convert user object keys to title case and create table rows
+  Object.keys(user).forEach((key) => {
+    data.push({
+      label: titleCase(key, '_'),
+      value: user[key as keyof typeof user],
+    });
+  });
+
+  // Sort alphabetically by label
+  return data.sort((a, b) => a.label.localeCompare(b.label));
+});
+
+// Load current user data on mount
+onMounted(async () => {
+  if (!authStore.currentUser) {
+    await authStore.getCurrentUser();
+  }
+});
+</script>
+
+<style scoped>
+.about-user {
+  max-width: 600px;
+}
+
+:deep(.p-datatable-sm .p-datatable-thead > tr > th) {
+  padding: 0.5rem 0.75rem;
+}
+
+:deep(.p-datatable-sm .p-datatable-tbody > tr > td) {
+  padding: 0.5rem 0.75rem;
+}
+</style>
diff --git a/client-vue3/src/components/user/CreateUserModal.vue b/client-vue3/src/components/user/CreateUserModal.vue
new file mode 100644
index 00000000..6a68c140
--- /dev/null
+++ b/client-vue3/src/components/user/CreateUserModal.vue
@@ -0,0 +1,268 @@
+<template>
+  <Form
+    v-slot="$form"
+    :initialValues="initialValues"
+    :resolver="resolver"
+    @submit="handleSubmit"
+    class="create-user-form"
+  >
+    <!-- Username Field -->
+    <div class="field">
+      <label for="username" class="block text-900 font-medium mb-2">Username</label>
+      <InputText
+        id="username"
+        name="username"
+        placeholder="Enter username"
+        class="w-full"
+        :class="{ 'p-invalid': $form.username?.invalid }"
+        :disabled="isSubmitting"
+        fluid
+      />
+      <Message
+        v-if="$form.username?.invalid"
+        severity="error"
+        size="small"
+        variant="simple"
+      >
+        {{ $form.username.error?.message }}
+      </Message>
+    </div>
+
+    <!-- Password Field -->
+    <div class="field">
+      <label for="password" class="block text-900 font-medium mb-2">Password</label>
+      <Password
+        id="password"
+        name="password"
+        placeholder="Enter password"
+        class="w-full"
+        :class="{ 'p-invalid': $form.password?.invalid }"
+        :disabled="isSubmitting"
+        :feedback="false"
+        toggle-mask
+        fluid
+      />
+      <Message
+        v-if="$form.password?.invalid"
+        severity="error"
+        size="small"
+        variant="simple"
+      >
+        {{ $form.password.error?.message }}
+      </Message>
+    </div>
+
+    <!-- Confirm Password Field -->
+    <div class="field">
+      <label for="confirmPassword" class="block text-900 font-medium mb-2">Confirm Password</label>
+      <Password
+        id="confirmPassword"
+        name="confirmPassword"
+        placeholder="Confirm password"
+        class="w-full"
+        :class="{ 'p-invalid': $form.confirmPassword?.invalid }"
+        :disabled="isSubmitting"
+        :feedback="false"
+        toggle-mask
+        fluid
+      />
+      <Message
+        v-if="$form.confirmPassword?.invalid"
+        severity="error"
+        size="small"
+        variant="simple"
+      >
+        {{ $form.confirmPassword.error?.message }}
+      </Message>
+    </div>
+
+    <!-- Admin Checkbox -->
+    <div class="field-checkbox">
+      <Checkbox
+        id="isAdmin"
+        name="isAdmin"
+        binary
+        :disabled="isSubmitting"
+      />
+      <label for="isAdmin" class="ml-2">Administrator privileges</label>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="flex justify-content-end gap-2 mt-4">
+      <Button
+        label="Cancel"
+        icon="pi pi-times"
+        class="p-button-secondary"
+        type="button"
+        :disabled="isSubmitting"
+        @click="handleCancel"
+      />
+      <Button
+        label="Create User"
+        icon="pi pi-check"
+        class="p-button-success"
+        type="submit"
+        :disabled="!$form.valid || isSubmitting"
+        :loading="isSubmitting"
+      />
+    </div>
+  </Form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useAuthStore } from '@/stores/auth';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+
+// PrimeVue components
+import Form from '@primevue/forms/form';
+import type { FormSubmitEvent } from '@primevue/forms/form';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
+import Checkbox from 'primevue/checkbox';
+import Button from 'primevue/button';
+import Message from 'primevue/message';
+
+// Validation schema
+import { createUserSchema, createUserDefaults, type CreateUserFormData } from '@/schemas/userValidation';
+
+// Props and emits
+const emit = defineEmits<{
+  'user-created': [];
+  'cancel': [];
+}>();
+
+// Composables
+const toast = useToast();
+const authStore = useAuthStore();
+
+// Form configuration
+const initialValues = createUserDefaults;
+const resolver = zodResolver(createUserSchema);
+
+// UI state
+const isSubmitting = ref(false);
+
+// Event handlers
+function handleCancel(): void {
+  emit('cancel');
+}
+
+async function handleSubmit(event: FormSubmitEvent): Promise<void> {
+  if (!event.valid) {
+    return;
+  }
+
+  const formData = event.values as CreateUserFormData;
+  isSubmitting.value = true;
+
+  try {
+    const result = await authStore.createUser({
+      username: formData.username.trim(),
+      password: formData.password,
+      is_admin: formData.isAdmin,
+    });
+
+    if (result.success) {
+      toast.add({
+        severity: 'success',
+        summary: 'Success',
+        detail: result.message,
+        life: 3000,
+      });
+      // Reset form using the provided reset function
+      event.reset();
+      emit('user-created');
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: result.message,
+        life: 5000,
+      });
+    }
+  } catch (error) {
+    console.error('Error creating user:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'An unexpected error occurred while creating the user',
+      life: 5000,
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.create-user-form {
+  padding: 1rem;
+}
+
+.field {
+  margin-bottom: 1.5rem;
+}
+
+.field-checkbox {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+/* Dark theme form styling */
+:deep(.p-inputtext) {
+  background-color: var(--surface-ground);
+  border-color: var(--surface-border);
+  color: var(--text-color);
+}
+
+:deep(.p-inputtext:focus) {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.2rem var(--primary-color-alpha);
+}
+
+:deep(.p-password .p-inputtext) {
+  background-color: var(--surface-ground);
+  border-color: var(--surface-border);
+  color: var(--text-color);
+}
+
+:deep(.p-checkbox) {
+  background-color: var(--surface-ground);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-checkbox.p-checkbox-checked) {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+/* Error styling */
+:deep(.p-invalid) {
+  border-color: var(--red-500) !important;
+}
+
+/* Button styling */
+:deep(.p-button-success) {
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+:deep(.p-button-success:hover) {
+  background-color: #218838;
+  border-color: #1e7e34;
+}
+
+:deep(.p-button-secondary) {
+  background-color: var(--surface-500);
+  border-color: var(--surface-500);
+  color: var(--text-color);
+}
+
+:deep(.p-button-secondary:hover) {
+  background-color: var(--surface-600);
+  border-color: var(--surface-600);
+}
+</style>
diff --git a/client-vue3/src/components/user/RbacEditor.vue b/client-vue3/src/components/user/RbacEditor.vue
new file mode 100644
index 00000000..8f382279
--- /dev/null
+++ b/client-vue3/src/components/user/RbacEditor.vue
@@ -0,0 +1,320 @@
+<template>
+  <div class="rbac-editor">
+    <!-- Loading state -->
+    <div v-if="loading" class="text-center p-4">
+      <ProgressSpinner style="width: 3rem; height: 3rem" />
+      <p class="mt-3">Loading RBAC configuration...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="error-state p-4">
+      <Message severity="error" :closable="false">
+        <p><strong>Unable to load RBAC configuration</strong></p>
+        <p>{{ error }}</p>
+        <Button
+          label="Retry"
+          icon="pi pi-refresh"
+          class="mt-3"
+          @click="loadRbacData"
+        />
+      </Message>
+    </div>
+
+    <!-- RBAC configuration interface -->
+    <div v-else class="rbac-content">
+      <!-- User info header -->
+      <div class="user-header mb-4">
+        <h4 class="text-light mb-2">
+          RBAC Configuration for User: <strong>{{ selectedUsername }}</strong>
+        </h4>
+        <p class="text-muted">
+          Manage role-based access control permissions for this user across different resources.
+        </p>
+      </div>
+
+      <!-- RBAC resource tabs -->
+      <Tabs
+        v-if="rbacResources && rbacResources.length > 0"
+        v-model:value="activeTab"
+        class="rbac-tabs"
+      >
+        <TabList>
+          <Tab
+            v-for="(resource, index) in rbacResources"
+            :key="`rbac_resource_${resource}`"
+            :value="index.toString()"
+          >
+            {{ capitalizeResource(resource) }}
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel
+            v-for="(resource, index) in rbacResources"
+            :key="`rbac_panel_${resource}`"
+            :value="index.toString()"
+          >
+            <RbacResourcePermissions
+              :resource="resource"
+              :user-id="userId"
+              @permissions-changed="onPermissionsChanged"
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+
+      <!-- No resources available -->
+      <div v-else class="no-resources p-4">
+        <Message severity="info" :closable="false">
+          <p>No RBAC resources are available for configuration.</p>
+        </Message>
+      </div>
+
+      <!-- Action buttons -->
+      <div class="rbac-actions mt-4">
+        <div class="flex justify-content-end">
+          <Button
+            label="Close"
+            icon="pi pi-times"
+            class="p-button-secondary"
+            @click="handleClose"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useAuthStore } from '@/stores/auth';
+
+// PrimeVue components
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import Button from 'primevue/button';
+import Message from 'primevue/message';
+import ProgressSpinner from 'primevue/progressspinner';
+
+// Child components
+import RbacResourcePermissions from './RbacResourcePermissions.vue';
+
+// Props and emits
+interface Props {
+  userId: number;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'close': [];
+}>();
+
+// Composables
+const toast = useToast();
+const authStore = useAuthStore();
+
+// Reactive state
+const loading = ref(true);
+const error = ref<string>('');
+const rbacResources = ref<string[]>([]);
+const activeTab = ref<string>('0');
+
+// Computed properties
+const selectedUsername = computed(() => {
+  const user = authStore.showUsers.find((u) => u.id === props.userId);
+  return user ? user.username : 'Unknown User';
+});
+
+// Utility function to create API URLs (matching the Vue 2 pattern)
+function makeURL(path: string): string {
+  return `${window.location.protocol}//${window.location.hostname}:${window.location.port}${path}`;
+}
+
+// Utility functions
+function capitalizeResource(resource: string): string {
+  return resource.charAt(0).toUpperCase() + resource.slice(1);
+}
+
+// Data loading
+async function loadRbacData(): Promise<void> {
+  loading.value = true;
+  error.value = '';
+
+  try {
+    // Fetch available RBAC resources
+    const response = await fetch(`${makeURL('/api/v1/rbac/user/resources')}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      rbacResources.value = data.resources || [];
+
+      if (rbacResources.value.length === 0) {
+        console.warn('No RBAC resources available');
+      }
+    } else {
+      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+      throw new Error(errorData.message || 'Failed to fetch RBAC resources');
+    }
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : 'Failed to load RBAC configuration';
+    console.error('Error loading RBAC data:', err);
+    error.value = errorMessage;
+
+    toast.add({
+      severity: 'error',
+      summary: 'RBAC Configuration Error',
+      detail: errorMessage,
+      life: 5000,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Event handlers
+function onPermissionsChanged(): void {
+  // Refresh user list to reflect any permission changes
+  authStore.getUsers();
+
+  toast.add({
+    severity: 'success',
+    summary: 'Permissions Updated',
+    detail: 'User permissions have been successfully updated',
+    life: 3000,
+  });
+}
+
+function handleClose(): void {
+  emit('close');
+}
+
+// Lifecycle hooks
+onMounted(async () => {
+  await loadRbacData();
+});
+</script>
+
+<style scoped>
+.rbac-editor {
+  padding: 1rem;
+  background-color: var(--surface-ground);
+  color: var(--text-color);
+}
+
+/* User header styling */
+.user-header {
+  border-bottom: 1px solid var(--surface-border);
+  padding-bottom: 1rem;
+}
+
+.user-header h4 {
+  color: var(--text-color);
+  margin: 0;
+}
+
+.user-header p {
+  margin: 0;
+  color: var(--text-color-secondary);
+}
+
+/* Error state styling */
+.error-state {
+  text-align: center;
+}
+
+/* No resources styling */
+.no-resources {
+  text-align: center;
+}
+
+/* RBAC tabs styling */
+:deep(.p-tabs) {
+  background-color: var(--surface-card);
+}
+
+:deep(.p-tablist) {
+  background-color: var(--surface-section);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-tab) {
+  color: var(--text-color);
+  background-color: transparent;
+  border-color: var(--surface-border);
+}
+
+:deep(.p-tab[data-p-active="true"]) {
+  background-color: var(--surface-card);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+:deep(.p-tabpanels) {
+  background-color: var(--surface-card);
+  color: var(--text-color);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-tabpanel) {
+  background-color: var(--surface-card);
+}
+
+/* Message styling */
+:deep(.p-message) {
+  background-color: var(--surface-card);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-message-error) {
+  background-color: var(--red-50);
+  border-color: var(--red-500);
+  color: var(--red-900);
+}
+
+:deep(.p-message-info) {
+  background-color: var(--blue-50);
+  border-color: var(--blue-500);
+  color: var(--blue-900);
+}
+
+/* Button styling */
+:deep(.p-button-secondary) {
+  background-color: var(--surface-500);
+  border-color: var(--surface-500);
+  color: var(--text-color);
+}
+
+:deep(.p-button-secondary:hover) {
+  background-color: var(--surface-600);
+  border-color: var(--surface-600);
+}
+
+/* Progress spinner */
+:deep(.p-progress-spinner-circle) {
+  stroke: var(--primary-color);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .rbac-editor {
+    padding: 0.5rem;
+  }
+
+  .user-header h4 {
+    font-size: 1.1rem;
+  }
+
+  .user-header p {
+    font-size: 0.9rem;
+  }
+}
+</style>
diff --git a/client-vue3/src/components/user/RbacResourcePermissions.vue b/client-vue3/src/components/user/RbacResourcePermissions.vue
new file mode 100644
index 00000000..bb9a8e23
--- /dev/null
+++ b/client-vue3/src/components/user/RbacResourcePermissions.vue
@@ -0,0 +1,459 @@
+<template>
+  <div class="rbac-resource-permissions">
+    <!-- Loading state -->
+    <div v-if="loading" class="text-center p-4">
+      <ProgressSpinner style="width: 2rem; height: 2rem" />
+      <p class="mt-2 text-sm">Loading permissions...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="error-state p-4">
+      <Message severity="error" :closable="false">
+        <p>{{ error }}</p>
+        <Button
+          label="Retry"
+          icon="pi pi-refresh"
+          size="small"
+          class="mt-2"
+          @click="loadData"
+        />
+      </Message>
+    </div>
+
+    <!-- Permissions table -->
+    <div v-else class="permissions-content">
+      <!-- Resource objects table with role permissions -->
+      <DataTable
+        v-if="rbacObjects && rbacObjects.length > 0"
+        :value="rbacObjects"
+        class="rbac-permissions-table"
+        data-key="id"
+        :paginator="false"
+        :scrollable="true"
+        scroll-height="400px"
+        :loading="processing"
+      >
+        <!-- Dynamic columns for display fields -->
+        <Column
+          v-for="field in displayFields"
+          :key="field"
+          :field="field"
+          :header="capitalizeField(field)"
+          :sortable="true"
+        >
+          <template #body="slotProps">
+            <span class="font-medium">{{ slotProps.data[field] }}</span>
+          </template>
+        </Column>
+
+        <!-- Dynamic columns for each RBAC role -->
+        <Column
+          v-for="role in rbacRoles"
+          :key="role.key"
+          :header="role.label || role.key"
+          style="min-width: 120px"
+        >
+          <template #body="slotProps">
+            <div class="permission-cell">
+              <!-- Grant Role Button -->
+              <Button
+                v-if="!hasPermission(slotProps.data, role.value)"
+                label="Grant"
+                icon="pi pi-plus"
+                class="p-button-success p-button-sm"
+                :disabled="processing"
+                @click="grantRole(slotProps.data, role.value, role.key)"
+              />
+              <!-- Revoke Role Button -->
+              <Button
+                v-else
+                label="Revoke"
+                icon="pi pi-minus"
+                class="p-button-danger p-button-sm"
+                :disabled="processing"
+                @click="revokeRole(slotProps.data, role.value, role.key)"
+              />
+            </div>
+          </template>
+        </Column>
+      </DataTable>
+
+      <!-- No objects available -->
+      <div v-else class="no-objects p-4">
+        <Message severity="info" :closable="false">
+          <p>No objects available for this resource type.</p>
+        </Message>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+
+// PrimeVue components
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import Message from 'primevue/message';
+import ProgressSpinner from 'primevue/progressspinner';
+
+// Props and emits
+interface Props {
+  resource: string;
+  userId: number;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'permissions-changed': [];
+}>();
+
+// Composables
+const toast = useToast();
+
+// Types
+interface RbacObject {
+  id: string;
+  permissions: number;
+  [key: string]: unknown;
+}
+
+interface RbacRole {
+  key: string;
+  label?: string;
+  value: number;
+}
+
+// Reactive state
+const loading = ref(true);
+const processing = ref(false);
+const error = ref<string>('');
+const rbacObjects = ref<RbacObject[]>([]);
+const displayFields = ref<string[]>([]);
+const rbacRoles = ref<RbacRole[]>([]);
+
+// Utility functions
+function capitalizeField(field: string): string {
+  return field.split('_')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+function hasPermission(obj: RbacObject, roleValue: number): boolean {
+  // eslint-disable-next-line no-bitwise
+  return (obj.permissions & roleValue) !== 0;
+}
+
+function makeURL(path: string): string {
+  return `${window.location.protocol}//${window.location.hostname}:${window.location.port}${path}`;
+}
+
+// Data loading functions
+async function loadRoles(): Promise<void> {
+  try {
+    const response = await fetch(makeURL('/api/v1/rbac/roles'), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      rbacRoles.value = data.roles || [];
+    } else {
+      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+      throw new Error(errorData.message || 'Failed to fetch RBAC roles');
+    }
+  } catch (err) {
+    console.error('Error loading RBAC roles:', err);
+    throw err;
+  }
+}
+
+async function loadObjects(): Promise<void> {
+  try {
+    const searchParams = new URLSearchParams({
+      resource: props.resource,
+      user: props.userId.toString(),
+    });
+
+    const response = await fetch(`${makeURL('/api/v1/rbac/user/objects')}?${searchParams}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+
+      // Transform the objects data structure from Vue 2 format
+      // Vue 2 format: [[object, permissions], ...]
+      // Vue 3 format: [{ ...object, permissions }, ...]
+      if (Array.isArray(data.objects) && data.objects.length > 0) {
+        rbacObjects.value = data.objects.map((item: [RbacObject, number]) => {
+          const [obj, permissions] = item;
+          return {
+            ...obj,
+            permissions,
+          };
+        });
+      } else {
+        rbacObjects.value = [];
+      }
+
+      displayFields.value = data.display_fields || [];
+    } else {
+      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+      throw new Error(errorData.message || 'Failed to fetch RBAC objects');
+    }
+  } catch (err) {
+    console.error('Error loading RBAC objects:', err);
+    throw err;
+  }
+}
+
+async function loadData(): Promise<void> {
+  loading.value = true;
+  error.value = '';
+
+  try {
+    await Promise.all([loadRoles(), loadObjects()]);
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : 'Failed to load permission data';
+    error.value = errorMessage;
+
+    toast.add({
+      severity: 'error',
+      summary: 'Load Error',
+      detail: errorMessage,
+      life: 5000,
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Permission management functions
+async function grantRole(obj: RbacObject, roleValue: number, roleKey: string): Promise<void> {
+  processing.value = true;
+
+  try {
+    const response = await fetch(makeURL('/api/v1/rbac/user/roles/grant'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        resource: props.resource,
+        user: props.userId,
+        object: obj,
+        role: roleValue,
+      }),
+    });
+
+    if (response.ok) {
+      toast.add({
+        severity: 'success',
+        summary: 'Permission Granted',
+        detail: `Successfully granted ${roleKey} role`,
+        life: 3000,
+      });
+
+      // Refresh data and notify parent
+      await loadObjects();
+      emit('permissions-changed');
+    } else {
+      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+      throw new Error(errorData.message || 'Failed to grant role');
+    }
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : 'Failed to grant role';
+    console.error('Error granting role:', err);
+
+    toast.add({
+      severity: 'error',
+      summary: 'Grant Role Error',
+      detail: errorMessage,
+      life: 5000,
+    });
+  } finally {
+    processing.value = false;
+  }
+}
+
+async function revokeRole(obj: RbacObject, roleValue: number, roleKey: string): Promise<void> {
+  processing.value = true;
+
+  try {
+    const response = await fetch(makeURL('/api/v1/rbac/user/roles/revoke'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        resource: props.resource,
+        user: props.userId,
+        object: obj,
+        role: roleValue,
+      }),
+    });
+
+    if (response.ok) {
+      toast.add({
+        severity: 'success',
+        summary: 'Permission Revoked',
+        detail: `Successfully revoked ${roleKey} role`,
+        life: 3000,
+      });
+
+      // Refresh data and notify parent
+      await loadObjects();
+      emit('permissions-changed');
+    } else {
+      const errorData = await response.json().catch(() => ({ message: 'Unknown error' }));
+      throw new Error(errorData.message || 'Failed to revoke role');
+    }
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : 'Failed to revoke role';
+    console.error('Error revoking role:', err);
+
+    toast.add({
+      severity: 'error',
+      summary: 'Revoke Role Error',
+      detail: errorMessage,
+      life: 5000,
+    });
+  } finally {
+    processing.value = false;
+  }
+}
+
+// Lifecycle hooks
+onMounted(async () => {
+  await loadData();
+});
+</script>
+
+<style scoped>
+.rbac-resource-permissions {
+  background-color: var(--surface-ground);
+  color: var(--text-color);
+}
+
+/* Error state styling */
+.error-state {
+  text-align: center;
+}
+
+/* No objects styling */
+.no-objects {
+  text-align: center;
+}
+
+/* Permission cell styling */
+.permission-cell {
+  display: flex;
+  justify-content: center;
+}
+
+/* DataTable dark theme styling */
+:deep(.p-datatable) {
+  background-color: var(--surface-card);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  background-color: var(--surface-section);
+  color: var(--text-color);
+  border-color: var(--surface-border);
+  font-weight: 600;
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr) {
+  background-color: var(--surface-card);
+  color: var(--text-color);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr:nth-child(even)) {
+  background-color: var(--surface-hover);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
+  border-color: var(--surface-border);
+  padding: 0.75rem;
+}
+
+/* Button styling */
+:deep(.p-button-success) {
+  background-color: #28a745;
+  border-color: #28a745;
+  color: white;
+}
+
+:deep(.p-button-success:hover) {
+  background-color: #218838;
+  border-color: #1e7e34;
+}
+
+:deep(.p-button-danger) {
+  background-color: #dc3545;
+  border-color: #dc3545;
+  color: white;
+}
+
+:deep(.p-button-danger:hover) {
+  background-color: #c82333;
+  border-color: #bd2130;
+}
+
+:deep(.p-button-sm) {
+  font-size: 0.75rem;
+  padding: 0.375rem 0.75rem;
+}
+
+/* Message styling */
+:deep(.p-message) {
+  background-color: var(--surface-card);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-message-error) {
+  background-color: var(--red-50);
+  border-color: var(--red-500);
+  color: var(--red-900);
+}
+
+:deep(.p-message-info) {
+  background-color: var(--blue-50);
+  border-color: var(--blue-500);
+  color: var(--blue-900);
+}
+
+/* Progress spinner */
+:deep(.p-progress-spinner-circle) {
+  stroke: var(--primary-color);
+}
+
+/* Scrollable table */
+:deep(.p-datatable-scrollable .p-datatable-wrapper) {
+  border-radius: 0.375rem;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  :deep(.p-datatable .p-datatable-tbody > tr > td) {
+    padding: 0.5rem;
+  }
+
+  :deep(.p-button-sm) {
+    font-size: 0.7rem;
+    padding: 0.25rem 0.5rem;
+  }
+}
+</style>
diff --git a/client-vue3/src/components/user/StageDirectionStyles.vue b/client-vue3/src/components/user/StageDirectionStyles.vue
new file mode 100644
index 00000000..1825bdd6
--- /dev/null
+++ b/client-vue3/src/components/user/StageDirectionStyles.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="stage-direction-styles">
+    <div v-if="!hasShow" class="p-4">
+      <Message severity="warn" :closable="false">
+        No show loaded. Stage direction styles are only available when a show is loaded.
+      </Message>
+    </div>
+
+    <div v-else class="space-y-4">
+      <div class="flex justify-between items-center">
+        <h3 class="text-lg font-semibold">Stage Direction Style Overrides</h3>
+        <Button
+          label="New Override"
+          icon="pi pi-plus"
+          outlined
+          severity="success"
+          @click="showNewOverrideDialog = true"
+        />
+      </div>
+
+      <DataTable
+        :value="tableData"
+        :loading="loading"
+        show-gridlines
+        responsive-layout="scroll"
+        class="p-datatable-sm"
+        empty-message="No style overrides configured"
+      >
+        <Column field="description" header="Style Description" style="width: 30%">
+          <template #body="slotProps">
+            {{ getStyleDescription(slotProps.data.settings.id) }}
+          </template>
+        </Column>
+
+        <Column header="Example" style="width: 40%">
+          <template #body="slotProps">
+            <i
+              class="example-stage-direction"
+              :style="getExampleCss(slotProps.data.settings)"
+            >
+              {{ formatExampleText(slotProps.data.settings) }}
+            </i>
+          </template>
+        </Column>
+
+        <Column style="width: 30%">
+          <template #body="slotProps">
+            <div class="flex gap-2">
+              <Button
+                icon="pi pi-pencil"
+                severity="warning"
+                size="small"
+                outlined
+                @click="editOverride(slotProps.data)"
+              />
+              <Button
+                icon="pi pi-trash"
+                severity="danger"
+                size="small"
+                outlined
+                @click="confirmDeleteOverride(slotProps.data)"
+              />
+            </div>
+          </template>
+        </Column>
+      </DataTable>
+    </div>
+
+    <!-- Placeholder dialogs for future enhancement -->
+    <Dialog
+      v-model:visible="showNewOverrideDialog"
+      header="Add New Override"
+      modal
+      style="width: 50rem"
+    >
+      <Message severity="info">
+        Stage direction style override functionality will be implemented in a future update.
+        This feature allows customizing the appearance of stage directions in scripts.
+      </Message>
+
+      <template #footer>
+        <Button label="Cancel" outlined @click="showNewOverrideDialog = false" />
+        <Button label="Coming Soon" disabled />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import Message from 'primevue/message';
+import Dialog from 'primevue/dialog';
+import { useAuthStore } from '../../stores/auth';
+
+const authStore = useAuthStore();
+const confirm = useConfirm();
+
+// Component state
+const loading = ref(false);
+const showNewOverrideDialog = ref(false);
+
+// Example text for style previews
+const exampleText = 'Your stage direction will look like this when formatted in the script!';
+
+// Mock data - in the future this would come from a show store
+// For now, return false to show the warning message
+// In the future, this would check if there's a current show loaded
+const hasShow = computed(() => false);
+
+// Return the stage direction style overrides from auth store
+const tableData = computed(() => authStore.stageDirectionStyleOverrides || []);
+
+// Define types for better TypeScript support
+interface StageDirectionSettings {
+  id: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  text_colour?: string;
+  text_format?: string;
+  enable_background_colour?: boolean;
+  background_colour?: string;
+}
+
+interface StageDirectionOverride {
+  id: string;
+  settings: StageDirectionSettings;
+}
+
+// Helper functions
+function getStyleDescription(styleId: string): string {
+  // This would look up the description from available stage direction styles
+  return `Style ${styleId}`;
+}
+
+function getExampleCss(settings: StageDirectionSettings): Record<string, string> {
+  const style: Record<string, string> = {
+    'font-weight': settings.bold ? 'bold' : 'normal',
+    'font-style': settings.italic ? 'italic' : 'normal',
+    'text-decoration-line': settings.underline ? 'underline' : 'none',
+    color: settings.text_colour || '#000000',
+  };
+
+  if (settings.enable_background_colour) {
+    style['background-color'] = settings.background_colour || 'transparent';
+  }
+
+  return style;
+}
+
+function formatExampleText(settings: StageDirectionSettings): string {
+  switch (settings.text_format) {
+    case 'upper':
+      return exampleText.toUpperCase();
+    case 'lower':
+      return exampleText.toLowerCase();
+    default:
+      return exampleText;
+  }
+}
+
+async function deleteOverride(override: StageDirectionOverride) {
+  try {
+    await authStore.deleteStageDirectionStyleOverride(override.id);
+  } catch (error) {
+    console.error('Error deleting override:', error);
+  }
+}
+
+function editOverride(override: StageDirectionOverride) {
+  console.log('Edit override:', override);
+  // TODO: Implement edit functionality
+}
+
+function confirmDeleteOverride(override: StageDirectionOverride) {
+  confirm.require({
+    message: 'Are you sure you want to delete this style override?',
+    header: 'Confirm Delete',
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => {
+      deleteOverride(override);
+    },
+  });
+}
+
+// Load data on mount
+onMounted(async () => {
+  loading.value = true;
+  try {
+    await authStore.getStageDirectionStyleOverrides();
+  } catch (error) {
+    console.error('Error loading stage direction overrides:', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.example-stage-direction {
+  font-style: italic;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+:deep(.p-datatable-sm .p-datatable-thead > tr > th) {
+  padding: 0.5rem;
+}
+
+:deep(.p-datatable-sm .p-datatable-tbody > tr > td) {
+  padding: 0.5rem;
+}
+</style>
diff --git a/client-vue3/src/components/user/UserSettingsConfig.vue b/client-vue3/src/components/user/UserSettingsConfig.vue
new file mode 100644
index 00000000..72c4b930
--- /dev/null
+++ b/client-vue3/src/components/user/UserSettingsConfig.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="user-settings-config">
+    <div v-if="!loaded" class="flex justify-center items-center p-8">
+      <ProgressSpinner style="width: 50px; height: 50px" stroke-width="4" />
+    </div>
+
+    <form v-else @submit.prevent="handleSubmit" @reset.prevent="resetForm" class="max-w-2xl">
+      <div class="space-y-4">
+        <div class="field">
+          <label class="flex items-center space-x-2">
+            <InputSwitch v-model="editSettings.enable_script_auto_save" />
+            <span class="font-medium">Enable Script Autosave</span>
+          </label>
+        </div>
+
+        <div class="field">
+          <label for="autosave-interval" class="block text-sm font-medium text-gray-700 mb-2">
+            Script Autosave Interval (seconds)
+          </label>
+          <InputNumber
+            id="autosave-interval"
+            v-model="editSettings.script_auto_save_interval"
+            :class="{ 'p-invalid': intervalError }"
+            :min="1"
+            :step="1"
+            show-buttons
+            class="w-full"
+          />
+          <small v-if="intervalError" class="p-error">{{ intervalError }}</small>
+        </div>
+
+        <div class="field">
+          <label class="flex items-center space-x-2">
+            <InputSwitch v-model="editSettings.cue_position_right" />
+            <span class="font-medium">Display cues on right side</span>
+          </label>
+        </div>
+
+        <div class="flex justify-end space-x-2 pt-4">
+          <Button
+            type="reset"
+            severity="danger"
+            outlined
+            :disabled="!hasChanges"
+          >
+            Reset
+          </Button>
+
+          <Button
+            type="submit"
+            :disabled="!hasChanges || !!intervalError || isSubmitting"
+            :loading="isSubmitting"
+          >
+            Save Settings
+          </Button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, computed, watch, onMounted,
+} from 'vue';
+import { useToast } from 'primevue/usetoast';
+import InputSwitch from 'primevue/inputswitch';
+import InputNumber from 'primevue/inputnumber';
+import Button from 'primevue/button';
+import ProgressSpinner from 'primevue/progressspinner';
+import { useAuthStore, type UserSettings } from '../../stores/auth';
+
+const authStore = useAuthStore();
+const toast = useToast();
+
+// Component state
+const loaded = ref(false);
+const isSubmitting = ref(false);
+
+// Form data
+const editSettings = ref<{
+  enable_script_auto_save: boolean;
+  script_auto_save_interval: number;
+  cue_position_right: boolean;
+}>({
+  enable_script_auto_save: false,
+  script_auto_save_interval: 10,
+  cue_position_right: false,
+});
+
+// Track original settings for change detection
+const originalSettings = ref<typeof editSettings.value>({
+  enable_script_auto_save: false,
+  script_auto_save_interval: 10,
+  cue_position_right: false,
+});
+
+// Validation
+const intervalError = computed(() => {
+  const value = editSettings.value.script_auto_save_interval;
+  if (value == null || value < 1) {
+    return 'Autosave interval must be at least 1 second';
+  }
+  return null;
+});
+
+// Check if form has changes
+const hasChanges = computed(() => (
+  editSettings.value.enable_script_auto_save !== originalSettings.value.enable_script_auto_save
+    || editSettings.value.script_auto_save_interval
+       !== originalSettings.value.script_auto_save_interval
+    || editSettings.value.cue_position_right !== originalSettings.value.cue_position_right
+));
+
+// Form handlers
+function resetForm() {
+  loaded.value = false;
+
+  // Copy current settings from store
+  const settings = authStore.userSettings;
+  const newSettings = {
+    enable_script_auto_save: settings.enable_script_auto_save as boolean || false,
+    script_auto_save_interval: settings.script_auto_save_interval as number || 10,
+    cue_position_right: settings.cue_position_right as boolean || false,
+  };
+
+  editSettings.value = { ...newSettings };
+  originalSettings.value = { ...newSettings };
+
+  loaded.value = true;
+}
+
+// Watch for settings changes from store
+watch(() => authStore.userSettings, (newSettings) => {
+  if (newSettings && Object.keys(newSettings).length > 0) {
+    resetForm();
+  }
+});
+
+async function handleSubmit() {
+  if (intervalError.value || !hasChanges.value || isSubmitting.value) {
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  try {
+    const success = await authStore.updateUserSettings(editSettings.value as UserSettings);
+
+    if (success) {
+      toast.add({
+        severity: 'success',
+        summary: 'Success',
+        detail: 'Settings saved successfully',
+        life: 3000,
+      });
+      // Update original settings to reflect the saved state
+      originalSettings.value = { ...editSettings.value };
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Unable to save settings',
+        life: 5000,
+      });
+    }
+  } catch (error) {
+    console.error('Error saving settings:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'An error occurred while saving settings',
+      life: 5000,
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+// Initialize component
+onMounted(async () => {
+  // Load user settings if not already loaded
+  if (!authStore.userSettings || Object.keys(authStore.userSettings).length === 0) {
+    await authStore.getUserSettings();
+  }
+  resetForm();
+});
+</script>
+
+<style scoped>
+.field {
+  margin-bottom: 1.5rem;
+}
+
+:deep(.p-inputnumber) {
+  width: 100%;
+}
+
+:deep(.p-inputnumber-input) {
+  width: 100%;
+}
+</style>
diff --git a/client-vue3/src/composables/useFormValidation.ts b/client-vue3/src/composables/useFormValidation.ts
new file mode 100644
index 00000000..bc764e64
--- /dev/null
+++ b/client-vue3/src/composables/useFormValidation.ts
@@ -0,0 +1,257 @@
+import { ref, computed } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import type { FormSubmitEvent } from '@primevue/forms/form';
+
+/**
+ * Composable for common form validation patterns and error handling
+ */
+export function useFormValidation() {
+  const toast = useToast();
+  const isSubmitting = ref(false);
+
+  /**
+   * Handles form submission with common error handling
+   */
+  async function handleFormSubmit<T = unknown>(
+    event: FormSubmitEvent,
+    submitFn: (_formData: T) => Promise<{ success: boolean; error?: string; message?: string }>,
+    options?: {
+      successMessage?: string;
+      errorMessage?: string;
+      resetOnSuccess?: boolean;
+    },
+  ): Promise<boolean> {
+    if (!event.valid) {
+      toast.add({
+        severity: 'error',
+        summary: 'Validation Error',
+        detail: 'Please correct the errors in the form.',
+        life: 3000,
+      });
+      return false;
+    }
+
+    isSubmitting.value = true;
+
+    try {
+      const result = await submitFn(event.values as T);
+
+      if (result.success) {
+        toast.add({
+          severity: 'success',
+          summary: 'Success',
+          detail: result.message || options?.successMessage || 'Operation completed successfully',
+          life: 3000,
+        });
+
+        if (options?.resetOnSuccess !== false) {
+          event.reset();
+        }
+
+        return true;
+      }
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: result.error || options?.errorMessage || 'Operation failed',
+        life: 5000,
+      });
+
+      return false;
+    } catch (error) {
+      console.error('Form submission error:', error);
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'An unexpected error occurred',
+        life: 5000,
+      });
+
+      return false;
+    } finally {
+      isSubmitting.value = false;
+    }
+  }
+
+  /**
+   * Validates form and shows appropriate error messages
+   */
+  function validateForm(form: { valid: boolean }): boolean {
+    if (!form.valid) {
+      toast.add({
+        severity: 'error',
+        summary: 'Validation Error',
+        detail: 'Please correct the errors in the form.',
+        life: 3000,
+      });
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Shows a success toast message
+   */
+  function showSuccess(message: string, summary = 'Success') {
+    toast.add({
+      severity: 'success',
+      summary,
+      detail: message,
+      life: 3000,
+    });
+  }
+
+  /**
+   * Shows an error toast message
+   */
+  function showError(message: string, summary = 'Error') {
+    toast.add({
+      severity: 'error',
+      summary,
+      detail: message,
+      life: 5000,
+    });
+  }
+
+  /**
+   * Shows a warning toast message
+   */
+  function showWarning(message: string, summary = 'Warning') {
+    toast.add({
+      severity: 'warn',
+      summary,
+      detail: message,
+      life: 4000,
+    });
+  }
+
+  /**
+   * Shows an info toast message
+   */
+  function showInfo(message: string, summary = 'Info') {
+    toast.add({
+      severity: 'info',
+      summary,
+      detail: message,
+      life: 4000,
+    });
+  }
+
+  return {
+    // State
+    isSubmitting: computed(() => isSubmitting.value),
+
+    // Methods
+    handleFormSubmit,
+    validateForm,
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo,
+  };
+}
+
+/**
+ * Composable for handling async operations with loading state
+ */
+export function useAsyncOperation() {
+  const isLoading = ref(false);
+  const error = ref<string | null>(null);
+
+  async function execute<T>(
+    operation: () => Promise<T>,
+    options?: {
+      loadingMessage?: string;
+      successMessage?: string;
+      errorMessage?: string;
+    },
+  ): Promise<T | null> {
+    isLoading.value = true;
+    error.value = null;
+
+    try {
+      const result = await operation();
+
+      if (options?.successMessage) {
+        const toast = useToast();
+        toast.add({
+          severity: 'success',
+          summary: 'Success',
+          detail: options.successMessage,
+          life: 3000,
+        });
+      }
+
+      return result;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
+      error.value = errorMessage;
+
+      const toast = useToast();
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: options?.errorMessage || errorMessage,
+        life: 5000,
+      });
+
+      return null;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  function reset() {
+    isLoading.value = false;
+    error.value = null;
+  }
+
+  return {
+    // State
+    isLoading: computed(() => isLoading.value),
+    error: computed(() => error.value),
+
+    // Methods
+    execute,
+    reset,
+  };
+}
+
+/**
+ * Composable for managing form field errors
+ */
+export function useFieldErrors() {
+  const errors = ref<Record<string, string>>({});
+
+  function setError(field: string, message: string) {
+    errors.value[field] = message;
+  }
+
+  function clearError(field: string) {
+    delete errors.value[field];
+  }
+
+  function clearAllErrors() {
+    errors.value = {};
+  }
+
+  function hasError(field: string): boolean {
+    return field in errors.value;
+  }
+
+  function getError(field: string): string | undefined {
+    return errors.value[field];
+  }
+
+  return {
+    // State
+    errors: computed(() => errors.value),
+
+    // Methods
+    setError,
+    clearError,
+    clearAllErrors,
+    hasError,
+    getError,
+  };
+}
diff --git a/client-vue3/src/main.ts b/client-vue3/src/main.ts
index 8e28ea4e..bb10383e 100644
--- a/client-vue3/src/main.ts
+++ b/client-vue3/src/main.ts
@@ -1,9 +1,19 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+import ToastService from 'primevue/toastservice';
+import ConfirmationService from 'primevue/confirmationservice';
+import Tooltip from 'primevue/tooltip';
 import App from './App.vue';
 import router from './router';
 import setupHttpInterceptor from './utils/httpInterceptor';
+
+// PrimeVue CSS imports
+import 'primeicons/primeicons.css';
 import './assets/styles/main.css';
+import './assets/styles/theme.css';
+import './assets/styles/components.css';
 
 // Setup HTTP interceptor for automatic JWT token injection
 setupHttpInterceptor();
@@ -17,8 +27,30 @@ app.use(pinia);
 // Router
 app.use(router);
 
+// PrimeVue configuration with Aura theme
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      prefix: 'p',
+      darkModeSelector: '.p-dark',
+      cssLayer: false,
+    },
+  },
+});
+
+// PrimeVue services
+app.use(ToastService);
+app.use(ConfirmationService);
+
+// PrimeVue directives
+app.directive('tooltip', Tooltip);
+
 app.mount('#app');
 
+// Enable PrimeVue dark mode globally by adding p-dark class to document
+document.documentElement.classList.add('p-dark');
+
 // Initialize WebSocket connection after app is mounted
 // This matches the Vue 2 pattern where WebSocket is initialized at app level
 // The connection will be established when the composable is first used in a component
diff --git a/client-vue3/src/router/index.ts b/client-vue3/src/router/index.ts
index cea1147e..8b356efd 100644
--- a/client-vue3/src/router/index.ts
+++ b/client-vue3/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import { useAuthStore } from '../stores/auth';
 import HomeView from '../views/HomeView.vue';
 
 const router = createRouter({
@@ -20,7 +21,69 @@ const router = createRouter({
       name: 'websocket-test',
       component: () => import('../views/WebSocketTest.vue'),
     },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/LoginView.vue'),
+      meta: { requiresGuest: true },
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import('../views/UserSettingsView.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: () => import('../views/admin/SystemAdminView.vue'),
+      meta: { requiresAuth: true, requiresAdmin: true },
+    },
+    {
+      path: '/user-management',
+      name: 'user-management',
+      component: () => import('../views/admin/UserManagementView.vue'),
+      meta: { requiresAuth: true, requiresAdmin: true },
+    },
   ],
 });
 
+// Navigation guards
+router.beforeEach(async (to, _from, next) => {
+  const authStore = useAuthStore();
+
+  // If no current user and we have a token, try to get current user
+  if (!authStore.currentUser && authStore.authToken) {
+    try {
+      await authStore.getCurrentUser();
+    } catch (error) {
+      console.error('Error getting current user:', error);
+      // Clear invalid token
+      authStore.clearAuthData();
+    }
+  }
+
+  const isAuthenticated = authStore.isAuthenticated && authStore.currentUser;
+
+  // Check if route requires authentication
+  if (to.meta.requiresAuth && !isAuthenticated) {
+    next({ name: 'login' });
+    return;
+  }
+
+  // Check if route requires guest (not authenticated)
+  if (to.meta.requiresGuest && isAuthenticated) {
+    next({ name: 'home' });
+    return;
+  }
+
+  // Check if route requires admin access
+  if (to.meta.requiresAdmin && !authStore.isAdmin) {
+    next({ name: 'home' });
+    return;
+  }
+
+  next();
+});
+
 export default router;
diff --git a/client-vue3/src/schemas/index.ts b/client-vue3/src/schemas/index.ts
new file mode 100644
index 00000000..200b6fee
--- /dev/null
+++ b/client-vue3/src/schemas/index.ts
@@ -0,0 +1,28 @@
+/**
+ * Central export for all validation schemas
+ * This provides a single import point for all form validation schemas in the application
+ */
+
+// User validation schemas
+export {
+  createUserSchema,
+  createUserDefaults,
+  type CreateUserFormData,
+} from './userValidation';
+
+// Show validation schemas
+export {
+  createShowSchema,
+  createShowDefaults,
+  formatDateForAPI,
+  type CreateShowFormData,
+} from './showValidation';
+
+// System settings validation
+export {
+  createSystemSettingsSchema,
+  createSystemSettingsDefaults,
+  validateSystemSettings,
+  getInputType,
+  type SystemSettingsFormData,
+} from './systemSettingsValidation';
diff --git a/client-vue3/src/schemas/showValidation.ts b/client-vue3/src/schemas/showValidation.ts
new file mode 100644
index 00000000..09a7ae64
--- /dev/null
+++ b/client-vue3/src/schemas/showValidation.ts
@@ -0,0 +1,68 @@
+import { z } from 'zod';
+
+/**
+ * Zod schema for show creation form validation
+ * Handles name, start date, and end date validation with date comparison
+ */
+export const createShowSchema = z.object({
+  name: z
+    .string()
+    .min(1, 'Show name is required')
+    .max(100, 'Show name must be less than 100 characters')
+    .trim(),
+  start: z
+    .string()
+    .min(1, 'Start date is required')
+    .refine((date) => {
+      // Validate the date format (YYYY-MM-DD)
+      const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+      if (!dateRegex.test(date)) {
+        return false;
+      }
+      // Check if it's a valid date
+      const parsedDate = new Date(date);
+      return !Number.isNaN(parsedDate.getTime());
+    }, 'Start date must be a valid date'),
+  end: z
+    .string()
+    .min(1, 'End date is required')
+    .refine((date) => {
+      // Validate the date format (YYYY-MM-DD)
+      const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+      if (!dateRegex.test(date)) {
+        return false;
+      }
+      // Check if it's a valid date
+      const parsedDate = new Date(date);
+      return !Number.isNaN(parsedDate.getTime());
+    }, 'End date must be a valid date'),
+}).refine((data) => {
+  // Cross-field validation: start date must be <= end date
+  const startDate = new Date(data.start);
+  const endDate = new Date(data.end);
+  return startDate <= endDate;
+}, {
+  message: 'Start date must be before or equal to end date',
+  path: ['start'], // This will show the error on the start field
+});
+
+/**
+ * TypeScript type inferred from the schema
+ */
+export type CreateShowFormData = z.infer<typeof createShowSchema>;
+
+/**
+ * Default form values
+ */
+export const createShowDefaults: CreateShowFormData = {
+  name: '',
+  start: '',
+  end: '',
+};
+
+/**
+ * Utility function to format date for API
+ */
+export function formatDateForAPI(date: Date): string {
+  return date.toISOString().split('T')[0];
+}
diff --git a/client-vue3/src/schemas/systemSettingsValidation.ts b/client-vue3/src/schemas/systemSettingsValidation.ts
new file mode 100644
index 00000000..a3e48dbb
--- /dev/null
+++ b/client-vue3/src/schemas/systemSettingsValidation.ts
@@ -0,0 +1,133 @@
+import { z } from 'zod';
+import type { RawSetting } from '@/stores/settings';
+
+/**
+ * Creates a dynamic Zod schema based on raw settings configuration
+ * This allows for flexible validation based on the actual settings structure from the server
+ */
+export function createSystemSettingsSchema(rawSettings: Record<string, RawSetting>) {
+  const schemaFields: Record<string, z.ZodTypeAny> = {};
+
+  Object.entries(rawSettings).forEach(([key, setting]) => {
+    switch (setting.type) {
+      case 'str':
+        schemaFields[key] = z
+          .string()
+          .min(1, `${setting.display_name || key} is required`)
+          .trim();
+        break;
+
+      case 'int':
+        schemaFields[key] = z
+          .union([z.string(), z.number()])
+          .transform((val) => {
+            const num = typeof val === 'string' ? parseInt(val, 10) : val;
+            return Number.isNaN(num) ? val : num;
+          })
+          .pipe(
+            z.number({
+              message: `${setting.display_name || key} must be a valid number`,
+            }),
+          );
+        break;
+
+      case 'bool':
+        schemaFields[key] = z.boolean();
+        break;
+
+      default:
+        // For unknown types, allow any value but require it to exist
+        schemaFields[key] = z.unknown();
+        break;
+    }
+  });
+
+  return z.object(schemaFields);
+}
+
+/**
+ * Type for system settings form data - will be dynamically typed
+ */
+export type SystemSettingsFormData = Record<string, unknown>;
+
+/**
+ * Creates default form values based on raw settings
+ */
+export function createSystemSettingsDefaults(
+  rawSettings: Record<string, RawSetting>,
+): SystemSettingsFormData {
+  const defaults: SystemSettingsFormData = {};
+
+  Object.entries(rawSettings).forEach(([key, setting]) => {
+    defaults[key] = setting.value;
+  });
+
+  return defaults;
+}
+
+/**
+ * Validates that all required settings are present and valid
+ */
+export function validateSystemSettings(
+  formData: SystemSettingsFormData,
+  rawSettings: Record<string, RawSetting>,
+): { isValid: boolean; errors: Record<string, string> } {
+  const errors: Record<string, string> = {};
+
+  Object.entries(rawSettings).forEach(([key, setting]) => {
+    const value = formData[key];
+
+    // Check if the setting is editable (if not, we skip validation)
+    if (!setting.can_edit) {
+      return;
+    }
+
+    // Validate based on type
+    switch (setting.type) {
+      case 'str':
+        if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) {
+          errors[key] = `${setting.display_name || key} is required.`;
+        }
+        break;
+
+      case 'int':
+        if (value === null || value === undefined || value === '') {
+          errors[key] = `${setting.display_name || key} is required.`;
+        } else {
+          const numValue = typeof value === 'string' ? parseInt(value, 10) : Number(value);
+          if (Number.isNaN(numValue)) {
+            errors[key] = `${setting.display_name || key} must be a valid number.`;
+          }
+        }
+        break;
+
+      case 'bool':
+        // Boolean values are always valid (true/false)
+        break;
+
+      default:
+        // For unknown types, just check for null/undefined
+        if (value === null || value === undefined) {
+          errors[key] = `${setting.display_name || key} is required.`;
+        }
+        break;
+    }
+  });
+
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors,
+  };
+}
+
+/**
+ * Utility function to get the appropriate HTML input type for a setting
+ */
+export function getInputType(fieldType: string): string {
+  const mapping: Record<string, string> = {
+    int: 'number',
+    str: 'text',
+    bool: 'checkbox', // Though we use ToggleSwitch for booleans
+  };
+  return mapping[fieldType] || 'text';
+}
diff --git a/client-vue3/src/schemas/userValidation.ts b/client-vue3/src/schemas/userValidation.ts
new file mode 100644
index 00000000..d00b1f62
--- /dev/null
+++ b/client-vue3/src/schemas/userValidation.ts
@@ -0,0 +1,39 @@
+import { z } from 'zod';
+
+/**
+ * Zod schema for user creation form validation
+ * Matches the existing validation logic in CreateUserModal.vue
+ */
+export const createUserSchema = z.object({
+  username: z
+    .string()
+    .min(1, 'Username is required')
+    .min(3, 'Username must be at least 3 characters')
+    .trim(),
+  password: z
+    .string()
+    .min(1, 'Password is required')
+    .min(6, 'Password must be at least 6 characters'),
+  confirmPassword: z
+    .string()
+    .min(1, 'Please confirm your password'),
+  isAdmin: z.boolean().default(false),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: 'Passwords do not match',
+  path: ['confirmPassword'],
+});
+
+/**
+ * TypeScript type inferred from the schema
+ */
+export type CreateUserFormData = z.infer<typeof createUserSchema>;
+
+/**
+ * Default form values
+ */
+export const createUserDefaults: CreateUserFormData = {
+  username: '',
+  password: '',
+  confirmPassword: '',
+  isAdmin: false,
+};
diff --git a/client-vue3/src/stores/auth.ts b/client-vue3/src/stores/auth.ts
index d0f25160..f2fd07f5 100644
--- a/client-vue3/src/stores/auth.ts
+++ b/client-vue3/src/stores/auth.ts
@@ -2,10 +2,13 @@ import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 
 export interface User {
-  id: string;
+  id: number; // Backend returns user ID as number
   username: string;
   is_admin: boolean;
-  // Add other user properties as needed
+  last_login?: string;
+  last_seen?: string;
+  created_at?: string;
+  updated_at?: string;
 }
 
 export interface RbacRole {
@@ -39,6 +42,19 @@ export const useAuthStore = defineStore('auth', () => {
   const isAuthenticated = computed(() => !!authToken.value);
   const isAdmin = computed(() => currentUser.value?.is_admin || false);
 
+  // RBAC permission checks (simplified for now - will be enhanced in Phase 4)
+  const isShowExecutor = computed(() => (
+    // TODO: Implement proper RBAC permission checking
+    // For now, assume admins have executor permissions
+    isAdmin.value
+  ));
+
+  const hasShowAccess = computed(() => (
+    // TODO: Implement proper RBAC show access checking
+    // For now, assume authenticated users have basic show access
+    isAuthenticated.value
+  ));
+
   // Actions
   function setCurrentUser(user: User | null) {
     currentUser.value = user;
@@ -115,29 +131,67 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
-  async function createUser(user: { username: string; password: string; is_admin: boolean }) {
+  async function createUser(user: { username: string; password: string; is_admin?: boolean }) {
     try {
       const response = await fetch(makeURL('/api/v1/auth/create'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(user),
+        body: JSON.stringify({
+          username: user.username,
+          password: user.password,
+          is_admin: user.is_admin || false,
+        }),
       });
 
       if (response.ok) {
         await getUsers();
-        // TODO: Show success toast
         console.log('User created successfully');
-      } else {
-        const responseBody = await response.json();
-        console.error('Unable to create user:', responseBody.message);
-        // TODO: Show error toast
+        return { success: true, message: 'User created successfully' };
       }
+
+      const responseBody = await response.json();
+      const errorMessage = responseBody.message || 'Unknown error';
+      console.error('Unable to create user:', errorMessage);
+      return { success: false, message: errorMessage };
     } catch (error) {
       console.error('Error creating user:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Network error';
+      return { success: false, message: errorMessage };
+    }
+  }
+
+  async function updateUser(
+    userId: number,
+    updates: { username?: string; password?: string; is_admin?: boolean },
+  ) {
+    try {
+      const response = await fetch(makeURL('/api/v1/auth/update'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: userId,
+          ...updates,
+        }),
+      });
+
+      if (response.ok) {
+        await getUsers();
+        console.log('User updated successfully');
+        return { success: true, message: 'User updated successfully' };
+      }
+
+      const responseBody = await response.json();
+      const errorMessage = responseBody.message || 'Unknown error';
+      console.error('Unable to update user:', errorMessage);
+      return { success: false, message: errorMessage };
+    } catch (error) {
+      console.error('Error updating user:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Network error';
+      return { success: false, message: errorMessage };
     }
   }
 
-  async function deleteUser(userId: string) {
+  async function deleteUser(userId: number) {
     try {
       const response = await fetch(makeURL('/api/v1/auth/delete'), {
         method: 'POST',
@@ -147,15 +201,18 @@ export const useAuthStore = defineStore('auth', () => {
 
       if (response.ok) {
         await getUsers();
-        // TODO: Show success toast
         console.log('User deleted successfully');
-      } else {
-        const responseBody = await response.json();
-        console.error('Unable to delete user:', responseBody.message);
-        // TODO: Show error toast
+        return { success: true, message: 'User deleted successfully' };
       }
+
+      const responseBody = await response.json();
+      const errorMessage = responseBody.message || 'Unknown error';
+      console.error('Unable to delete user:', errorMessage);
+      return { success: false, message: errorMessage };
     } catch (error) {
       console.error('Error deleting user:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Network error';
+      return { success: false, message: errorMessage };
     }
   }
 
@@ -324,6 +381,69 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
+  async function userLogin(credentials: { username: string; password: string }): Promise<boolean> {
+    try {
+      const response = await fetch(makeURL('/api/v1/auth/login'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(credentials),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setAuthToken(data.access_token);
+        await getCurrentUser();
+        await getCurrentRbac();
+        await getUserSettings();
+        setupTokenRefresh();
+        console.log('Login successful');
+        return true;
+      }
+      console.error('Login failed');
+      return false;
+    } catch (error) {
+      console.error('Error during login:', error);
+      return false;
+    }
+  }
+
+  async function userLogout() {
+    try {
+      // Call logout endpoint to invalidate token server-side
+      await fetch(makeURL('/api/v1/auth/logout'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+      });
+    } catch (error) {
+      console.error('Error during logout:', error);
+    } finally {
+      // Clear local auth data regardless of server response
+      clearAuthData();
+    }
+  }
+
+  async function updateUserSettings(settings: UserSettings): Promise<boolean> {
+    try {
+      const response = await fetch(makeURL('/api/v1/user/settings'), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      });
+
+      if (response.ok) {
+        await getUserSettings(); // Refresh local settings
+        console.log('Settings updated successfully');
+        return true;
+      }
+      console.error('Unable to update settings');
+      return false;
+    } catch (error) {
+      console.error('Error updating settings:', error);
+      return false;
+    }
+  }
+
   return {
     // State
     currentUser,
@@ -337,6 +457,8 @@ export const useAuthStore = defineStore('auth', () => {
     // Getters
     isAuthenticated,
     isAdmin,
+    isShowExecutor,
+    hasShowAccess,
 
     // Actions
     setCurrentUser,
@@ -351,15 +473,19 @@ export const useAuthStore = defineStore('auth', () => {
     // API Actions
     getUsers,
     createUser,
+    updateUser,
     deleteUser,
     getCurrentUser,
     getCurrentRbac,
     refreshToken,
     setupTokenRefresh,
     getUserSettings,
+    updateUserSettings,
     getStageDirectionStyleOverrides,
     addStageDirectionStyleOverride,
     deleteStageDirectionStyleOverride,
     updateStageDirectionStyleOverride,
+    userLogin,
+    userLogout,
   };
 });
diff --git a/client-vue3/src/stores/settings.ts b/client-vue3/src/stores/settings.ts
new file mode 100644
index 00000000..728af02d
--- /dev/null
+++ b/client-vue3/src/stores/settings.ts
@@ -0,0 +1,296 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export interface SystemSettings {
+  has_admin_user: boolean;
+  current_show: string | null;
+  debug_mode: boolean;
+  // Add other settings as needed
+  [key: string]: unknown;
+}
+
+export interface RawSetting {
+  value: unknown;
+  type: 'int' | 'str' | 'bool';
+  display_name: string;
+  help_text: string;
+  can_edit: boolean;
+}
+
+export interface ShowData {
+  id: string;
+  name: string;
+  start_date: string;
+  end_date: string;
+  created_at: string;
+}
+
+export interface ConnectedClient {
+  internal_id: string;
+  remote_ip: string;
+  is_editor: boolean;
+  last_ping: string;
+  last_pong: string;
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  // State
+  const settings = ref<SystemSettings>({
+    has_admin_user: false,
+    current_show: null,
+    debug_mode: false,
+  });
+  const rawSettings = ref<Record<string, RawSetting>>({});
+  const availableShows = ref<ShowData[]>([]);
+  const currentShow = ref<ShowData | null>(null);
+  const rbacRoles = ref<unknown[]>([]);
+  const connectedClients = ref<ConnectedClient[]>([]);
+  const isSubmittingSettings = ref(false);
+  const settingsForm = ref<Record<string, unknown>>({});
+
+  // Getters
+  const debugModeEnabled = computed(() => settings.value.debug_mode);
+  const hasAdminUser = computed(() => settings.value.has_admin_user);
+  const currentShowLoaded = computed(() => (
+    settings.value.current_show != null && currentShow.value != null
+  ));
+
+  // Utility function to create API URLs
+  function makeURL(path: string): string {
+    return `${window.location.protocol}//${window.location.hostname}:${window.location.port}${path}`;
+  }
+
+  // Actions
+  function updateSettings(newSettings: SystemSettings) {
+    settings.value = { ...newSettings };
+  }
+
+  function updateShows(shows: ShowData[]) {
+    availableShows.value = shows;
+  }
+
+  function updateRawSettings(newRawSettings: Record<string, RawSetting>) {
+    rawSettings.value = newRawSettings;
+    // Initialize settings form with current values
+    const formData: Record<string, unknown> = {};
+    Object.keys(newRawSettings).forEach((key) => {
+      formData[key] = newRawSettings[key].value;
+    });
+    settingsForm.value = formData;
+  }
+
+  function updateRbacRoles(rbac: unknown[]) {
+    rbacRoles.value = rbac;
+  }
+
+  function setCurrentShow(show: ShowData | null) {
+    currentShow.value = show;
+  }
+
+  function clearCurrentShow() {
+    currentShow.value = null;
+  }
+
+  function updateConnectedClients(clients: ConnectedClient[]) {
+    connectedClients.value = clients;
+  }
+
+  function resetSettingsForm() {
+    const formData: Record<string, unknown> = {};
+    Object.keys(rawSettings.value).forEach((key) => {
+      formData[key] = rawSettings.value[key].value;
+    });
+    settingsForm.value = formData;
+  }
+
+  // API Actions
+  async function getRawSettings() {
+    try {
+      const response = await fetch(makeURL('/api/v1/settings/raw'));
+      if (response.ok) {
+        const rawSettingsData = await response.json();
+        updateRawSettings(rawSettingsData);
+      } else {
+        console.error('Unable to get system settings');
+      }
+    } catch (error) {
+      console.error('Error fetching raw settings:', error);
+    }
+  }
+
+  async function settingsChanged() {
+    await getRawSettings();
+
+    if (settings.value.current_show) {
+      const currShowId = settings.value.current_show;
+      if (!currentShow.value || currentShow.value.id !== currShowId) {
+        try {
+          const response = await fetch(makeURL('/api/v1/show'));
+          if (response.ok) {
+            const show = await response.json();
+            setCurrentShow(show);
+          } else {
+            console.error('Unable to set current show');
+          }
+        } catch (error) {
+          console.error('Error fetching current show:', error);
+        }
+      }
+    } else {
+      setCurrentShow(null);
+      clearCurrentShow();
+    }
+  }
+
+  async function getSettings() {
+    try {
+      const response = await fetch(makeURL('/api/v1/settings'));
+      if (response.ok) {
+        const settingsData = await response.json();
+        updateSettings(settingsData);
+        await settingsChanged();
+      } else {
+        console.error('Unable to fetch settings');
+      }
+    } catch (error) {
+      console.error('Error fetching settings:', error);
+    }
+  }
+
+  async function getRbacRoles() {
+    try {
+      const response = await fetch(makeURL('/api/v1/rbac/roles'));
+      if (response.ok) {
+        const rbac = await response.json();
+        updateRbacRoles(rbac.roles);
+      } else {
+        console.error('Unable to fetch RBAC roles');
+      }
+    } catch (error) {
+      console.error('Error fetching RBAC roles:', error);
+    }
+  }
+
+  async function updateSystemSettings(
+    settingsData: Record<string, unknown>,
+  ): Promise<{ success: boolean; error?: string }> {
+    if (isSubmittingSettings.value) {
+      return { success: false, error: 'Already submitting settings' };
+    }
+
+    isSubmittingSettings.value = true;
+
+    try {
+      const response = await fetch(makeURL('/api/v1/settings'), {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(settingsData),
+      });
+
+      if (response.ok) {
+        // Update the form with saved values
+        settingsForm.value = { ...settingsData };
+        return { success: true };
+      }
+      const errorText = await response.text();
+      console.error('Unable to save settings:', errorText);
+      return { success: false, error: 'Unable to save settings' };
+    } catch (error) {
+      console.error('Error saving settings:', error);
+      return { success: false, error: 'Network error while saving settings' };
+    } finally {
+      isSubmittingSettings.value = false;
+    }
+  }
+
+  async function getAvailableShows(): Promise<void> {
+    try {
+      const response = await fetch(makeURL('/api/v1/shows'));
+      if (response.ok) {
+        const data = await response.json();
+        updateShows(data.shows);
+      } else {
+        console.error('Unable to get available shows');
+      }
+    } catch (error) {
+      console.error('Error fetching available shows:', error);
+    }
+  }
+
+  async function getConnectedClients(): Promise<void> {
+    try {
+      const response = await fetch(makeURL('/api/v1/ws/sessions'));
+      if (response.ok) {
+        const data = await response.json();
+        updateConnectedClients(data.sessions);
+      } else {
+        console.error('Unable to get connected clients');
+      }
+    } catch (error) {
+      console.error('Error fetching connected clients:', error);
+    }
+  }
+
+  async function loadShow(showId: string): Promise<{ success: boolean; error?: string }> {
+    try {
+      const response = await fetch(makeURL('/api/v1/settings'), {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          current_show: showId,
+        }),
+      });
+
+      if (response.ok) {
+        return { success: true };
+      }
+      const errorText = await response.text();
+      console.error('Unable to load show:', errorText);
+      return { success: false, error: 'Unable to load show' };
+    } catch (error) {
+      console.error('Error loading show:', error);
+      return { success: false, error: 'Network error while loading show' };
+    }
+  }
+
+  return {
+    // State
+    settings,
+    rawSettings,
+    availableShows,
+    currentShow,
+    rbacRoles,
+    connectedClients,
+    isSubmittingSettings,
+    settingsForm,
+
+    // Getters
+    debugModeEnabled,
+    hasAdminUser,
+    currentShowLoaded,
+
+    // Actions
+    updateSettings,
+    updateShows,
+    updateRawSettings,
+    updateRbacRoles,
+    setCurrentShow,
+    clearCurrentShow,
+    updateConnectedClients,
+    resetSettingsForm,
+
+    // API Actions
+    getRawSettings,
+    getSettings,
+    settingsChanged,
+    getRbacRoles,
+    updateSystemSettings,
+    getAvailableShows,
+    getConnectedClients,
+    loadShow,
+  };
+});
diff --git a/client-vue3/src/stores/shows.ts b/client-vue3/src/stores/shows.ts
new file mode 100644
index 00000000..2e28ab5a
--- /dev/null
+++ b/client-vue3/src/stores/shows.ts
@@ -0,0 +1,246 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import type { ShowData } from './settings';
+
+export interface CreateShowForm {
+  name: string;
+  start: string;
+  end: string;
+}
+
+export interface ShowSession {
+  id: string;
+  session_id: string;
+  show_id: string;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export const useShowsStore = defineStore('shows', () => {
+  // State
+  const availableShows = ref<ShowData[]>([]);
+  const currentShow = ref<ShowData | null>(null);
+  const currentSession = ref<ShowSession | null>(null);
+  const isSubmittingShow = ref(false);
+  const isSubmittingLoad = ref(false);
+  const createShowForm = ref<CreateShowForm>({
+    name: '',
+    start: '',
+    end: '',
+  });
+
+  // Getters
+  const hasCurrentShow = computed(() => currentShow.value !== null);
+  const hasActiveSession = computed(() => currentSession.value?.is_active === true);
+
+  // Utility function to create API URLs
+  function makeURL(path: string): string {
+    return `${window.location.protocol}//${window.location.hostname}:${window.location.port}${path}`;
+  }
+
+  // Actions
+  function updateAvailableShows(shows: ShowData[]) {
+    availableShows.value = shows;
+  }
+
+  function setCurrentShow(show: ShowData | null) {
+    currentShow.value = show;
+  }
+
+  function setCurrentSession(session: ShowSession | null) {
+    currentSession.value = session;
+  }
+
+  function resetCreateShowForm() {
+    createShowForm.value = {
+      name: '',
+      start: '',
+      end: '',
+    };
+  }
+
+  // Validation helpers
+  function validateCreateShowForm(): {
+    isValid: boolean;
+    errors: Record<string, string>;
+    } {
+    const errors: Record<string, string> = {};
+
+    if (!createShowForm.value.name || createShowForm.value.name.trim().length === 0) {
+      errors.name = 'Show name is required';
+    } else if (createShowForm.value.name.length > 100) {
+      errors.name = 'Show name must be less than 100 characters';
+    }
+
+    if (!createShowForm.value.start) {
+      errors.start = 'Start date is required';
+    }
+
+    if (!createShowForm.value.end) {
+      errors.end = 'End date is required';
+    }
+
+    if (createShowForm.value.start && createShowForm.value.end) {
+      const startDate = new Date(createShowForm.value.start);
+      const endDate = new Date(createShowForm.value.end);
+
+      if (startDate > endDate) {
+        errors.start = 'Start date must be before or equal to end date';
+        errors.end = 'End date must be after or equal to start date';
+      }
+    }
+
+    return {
+      isValid: Object.keys(errors).length === 0,
+      errors,
+    };
+  }
+
+  // API Actions
+  async function getAvailableShows(): Promise<void> {
+    try {
+      const response = await fetch(makeURL('/api/v1/shows'));
+      if (response.ok) {
+        const data = await response.json();
+        updateAvailableShows(data.shows);
+      } else {
+        console.error('Unable to get available shows');
+        throw new Error('Unable to get available shows');
+      }
+    } catch (error) {
+      console.error('Error fetching available shows:', error);
+      throw error;
+    }
+  }
+
+  async function createShow(
+    loadAfterCreate = false,
+  ): Promise<{ success: boolean; error?: string; show?: ShowData }> {
+    const validation = validateCreateShowForm();
+    if (!validation.isValid) {
+      return { success: false, error: 'Form validation failed' };
+    }
+
+    if (isSubmittingShow.value) {
+      return { success: false, error: 'Already creating show' };
+    }
+
+    isSubmittingShow.value = true;
+
+    try {
+      const searchParams = new URLSearchParams({
+        load: loadAfterCreate.toString(),
+      });
+
+      const response = await fetch(`${makeURL('/api/v1/show')}?${searchParams}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(createShowForm.value),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+
+        // Refresh available shows
+        await getAvailableShows();
+
+        return {
+          success: true,
+          show: result.show,
+        };
+      }
+      const errorText = await response.text();
+      console.error('Unable to create show:', errorText);
+      return { success: false, error: 'Unable to create show' };
+    } catch (error) {
+      console.error('Error creating show:', error);
+      return { success: false, error: 'Network error while creating show' };
+    } finally {
+      isSubmittingShow.value = false;
+    }
+  }
+
+  async function loadShow(showId: string): Promise<{ success: boolean; error?: string }> {
+    if (isSubmittingLoad.value) {
+      return { success: false, error: 'Already loading show' };
+    }
+
+    isSubmittingLoad.value = true;
+
+    try {
+      const response = await fetch(makeURL('/api/v1/settings'), {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          current_show: showId,
+        }),
+      });
+
+      if (response.ok) {
+        // Find the show and set it as current
+        const show = availableShows.value.find((s) => s.id === showId);
+        if (show) {
+          setCurrentShow(show);
+        }
+        return { success: true };
+      }
+      const errorText = await response.text();
+      console.error('Unable to load show:', errorText);
+      return { success: false, error: 'Unable to load show' };
+    } catch (error) {
+      console.error('Error loading show:', error);
+      return { success: false, error: 'Network error while loading show' };
+    } finally {
+      isSubmittingLoad.value = false;
+    }
+  }
+
+  async function getShowSessionData(): Promise<void> {
+    try {
+      const response = await fetch(makeURL('/api/v1/show/sessions/current'));
+      if (response.ok) {
+        const data = await response.json();
+        setCurrentSession(data.session);
+      } else if (response.status === 404) {
+        // No current session
+        setCurrentSession(null);
+      } else {
+        console.error('Unable to get show session data');
+      }
+    } catch (error) {
+      console.error('Error fetching show session data:', error);
+    }
+  }
+
+  return {
+    // State
+    availableShows,
+    currentShow,
+    currentSession,
+    isSubmittingShow,
+    isSubmittingLoad,
+    createShowForm,
+
+    // Getters
+    hasCurrentShow,
+    hasActiveSession,
+
+    // Actions
+    updateAvailableShows,
+    setCurrentShow,
+    setCurrentSession,
+    resetCreateShowForm,
+    validateCreateShowForm,
+
+    // API Actions
+    getAvailableShows,
+    createShow,
+    loadShow,
+    getShowSessionData,
+  };
+});
diff --git a/client-vue3/src/types/forms.ts b/client-vue3/src/types/forms.ts
new file mode 100644
index 00000000..79af5720
--- /dev/null
+++ b/client-vue3/src/types/forms.ts
@@ -0,0 +1,194 @@
+import type { FormSubmitEvent } from '@primevue/forms/form';
+
+/**
+ * Common form-related TypeScript types and interfaces
+ */
+
+/**
+ * Base form field configuration
+ */
+export interface BaseFormField {
+  name: string;
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  helpText?: string;
+}
+
+/**
+ * Text input field configuration
+ */
+export interface TextInputField extends BaseFormField {
+  type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+  placeholder?: string;
+  maxLength?: number;
+  minLength?: number;
+}
+
+/**
+ * Select field configuration
+ */
+export interface SelectField extends BaseFormField {
+  type: 'select' | 'multiselect';
+  options: Array<{
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+  }>;
+  placeholder?: string;
+  multiple?: boolean;
+}
+
+/**
+ * Date field configuration
+ */
+export interface DateField extends BaseFormField {
+  type: 'date' | 'datetime' | 'time';
+  showTime?: boolean;
+  timeOnly?: boolean;
+  dateFormat?: string;
+  selectionMode?: 'single' | 'multiple' | 'range';
+}
+
+/**
+ * Checkbox field configuration
+ */
+export interface CheckboxField extends BaseFormField {
+  type: 'checkbox';
+  binary?: boolean;
+}
+
+/**
+ * Toggle field configuration
+ */
+export interface ToggleField extends BaseFormField {
+  type: 'toggle';
+  onLabel?: string;
+  offLabel?: string;
+}
+
+/**
+ * Union type for all form field configurations
+ */
+export type FormFieldConfig =
+  | TextInputField
+  | SelectField
+  | DateField
+  | CheckboxField
+  | ToggleField;
+
+/**
+ * Form validation result
+ */
+export interface ValidationResult {
+  isValid: boolean;
+  errors: Record<string, string>;
+}
+
+/**
+ * API response structure for form submissions
+ */
+export interface ApiResponse<T = unknown> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+  errors?: Record<string, string[]>;
+}
+
+/**
+ * Form submission handler function type
+ */
+export type FormSubmitHandler<T = unknown> = (
+  _formData: T
+) => Promise<ApiResponse<unknown>>;
+
+/**
+ * Enhanced form submit event with additional utilities
+ */
+export interface EnhancedFormSubmitEvent<T = Record<string, unknown>> {
+  values: T;
+  valid: boolean;
+  reset: () => void;
+}
+
+/**
+ * Form configuration for dynamic forms
+ */
+export interface DynamicFormConfig {
+  fields: FormFieldConfig[];
+  validationRules?: Record<string, unknown>;
+  submitEndpoint?: string;
+  resetOnSubmit?: boolean;
+  showResetButton?: boolean;
+}
+
+/**
+ * Form state management
+ */
+export interface FormState {
+  isSubmitting: boolean;
+  isDirty: boolean;
+  isValid: boolean;
+  errors: Record<string, string>;
+  values: Record<string, unknown>;
+}
+
+/**
+ * Form action payload
+ */
+export interface FormAction {
+  type: string;
+  payload?: unknown;
+}
+
+/**
+ * Modal form props
+ */
+export interface ModalFormProps {
+  visible: boolean;
+  title: string;
+  width?: string;
+  height?: string;
+  closable?: boolean;
+  closeOnEscape?: boolean;
+  modal?: boolean;
+}
+
+/**
+ * Toast notification types
+ */
+export type ToastSeverity = 'success' | 'info' | 'warn' | 'error';
+
+/**
+ * Toast notification configuration
+ */
+export interface ToastConfig {
+  severity: ToastSeverity;
+  summary?: string;
+  detail: string;
+  life?: number;
+  closable?: boolean;
+  sticky?: boolean;
+}
+
+/**
+ * Form utilities type
+ */
+export interface FormUtils {
+  showSuccess: (_msg: string, _sum?: string) => void;
+  showError: (_msg: string, _sum?: string) => void;
+  showWarning: (_msg: string, _sum?: string) => void;
+  showInfo: (_msg: string, _sum?: string) => void;
+  validateForm: (_frm: { valid: boolean }) => boolean;
+  handleFormSubmit: <T>(
+    _evt: FormSubmitEvent,
+    _fn: FormSubmitHandler<T>,
+    _opts?: {
+      successMessage?: string;
+      errorMessage?: string;
+      resetOnSuccess?: boolean;
+    }
+  ) => Promise<boolean>;
+}
diff --git a/client-vue3/src/types/index.ts b/client-vue3/src/types/index.ts
new file mode 100644
index 00000000..ce8e26ec
--- /dev/null
+++ b/client-vue3/src/types/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Central export for all TypeScript types and interfaces
+ */
+
+// Form-related types
+export * from './forms';
+
+// Re-export common types from stores for convenience
+export type { CreateUserFormData } from '@/schemas/userValidation';
+export type { CreateShowFormData } from '@/schemas/showValidation';
+export type { SystemSettingsFormData } from '@/schemas/systemSettingsValidation';
diff --git a/client-vue3/src/utils/idGenerator.ts b/client-vue3/src/utils/idGenerator.ts
new file mode 100644
index 00000000..e8a4a980
--- /dev/null
+++ b/client-vue3/src/utils/idGenerator.ts
@@ -0,0 +1,22 @@
+/**
+ * Simple ID generator utility for form field accessibility
+ */
+
+let idCounter = 0;
+
+/**
+ * Generate a unique ID with optional prefix
+ * @param prefix Optional prefix for the ID (default: 'id')
+ * @returns Unique string ID
+ */
+export function generateId(prefix = 'id'): string {
+  idCounter += 1;
+  return `${prefix}-${idCounter}`;
+}
+
+/**
+ * Reset the ID counter (useful for testing)
+ */
+export function resetIdCounter(): void {
+  idCounter = 0;
+}
diff --git a/client-vue3/src/utils/validationHelpers.ts b/client-vue3/src/utils/validationHelpers.ts
new file mode 100644
index 00000000..99698377
--- /dev/null
+++ b/client-vue3/src/utils/validationHelpers.ts
@@ -0,0 +1,192 @@
+import { z } from 'zod';
+
+/**
+ * Common validation patterns and utilities for use with Zod schemas
+ */
+
+/**
+ * Email validation regex (more permissive than the HTML5 email type)
+ */
+export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+/**
+ * Strong password validation regex - at least 8 chars with uppercase, lowercase, number, special
+ */
+export const STRONG_PASSWORD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
+/**
+ * Phone number validation (US format)
+ */
+export const PHONE_REGEX = /^\+?1?[-.\s]?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}$/;
+
+/**
+ * Common Zod schema patterns
+ */
+export const commonSchemas = {
+  /** Required string with minimum length */
+  requiredString: (minLength = 1, message = 'This field is required') => z.string().min(minLength, message).trim(),
+
+  /** Email validation */
+  email: () => z.string()
+    .min(1, 'Email is required')
+    .email('Please enter a valid email address')
+    .trim(),
+
+  /** Strong password validation */
+  strongPassword: () => z.string()
+    .min(8, 'Password must be at least 8 characters')
+    .regex(
+      STRONG_PASSWORD_REGEX,
+      'Password must contain at least one uppercase letter, lowercase letter, number, and special character',
+    ),
+
+  /** Simple password validation */
+  simplePassword: (minLength = 6) => z.string()
+    .min(1, 'Password is required')
+    .min(minLength, `Password must be at least ${minLength} characters`),
+
+  /** Username validation */
+  username: (minLength = 3, maxLength = 50) => z.string()
+    .min(1, 'Username is required')
+    .min(minLength, `Username must be at least ${minLength} characters`)
+    .max(maxLength, `Username must be less than ${maxLength} characters`)
+    .regex(/^[a-zA-Z0-9_-]+$/, 'Username can only contain letters, numbers, underscores, and hyphens')
+    .trim(),
+
+  /** Phone number validation */
+  phone: () => z.string()
+    .min(1, 'Phone number is required')
+    .regex(PHONE_REGEX, 'Please enter a valid phone number'),
+
+  /** URL validation */
+  url: () => z.string()
+    .min(1, 'URL is required')
+    .url('Please enter a valid URL'),
+
+  /** Date string validation (YYYY-MM-DD format) */
+  dateString: () => z.string()
+    .min(1, 'Date is required')
+    .regex(/^\d{4}-\d{2}-\d{2}$/, 'Date must be in YYYY-MM-DD format')
+    .refine((dateStr) => {
+      const date = new Date(dateStr);
+      return !Number.isNaN(date.getTime());
+    }, 'Please enter a valid date'),
+
+  /** Positive integer validation */
+  positiveInteger: () => z.union([z.string(), z.number()])
+    .transform((val) => {
+      const num = typeof val === 'string' ? parseInt(val, 10) : val;
+      return Number.isNaN(num) ? val : num;
+    })
+    .pipe(
+      z.number({ message: 'Must be a valid number' })
+        .int('Must be a whole number')
+        .positive('Must be a positive number'),
+    ),
+
+  /** Non-negative integer validation */
+  nonNegativeInteger: () => z.union([z.string(), z.number()])
+    .transform((val) => {
+      const num = typeof val === 'string' ? parseInt(val, 10) : val;
+      return Number.isNaN(num) ? val : num;
+    })
+    .pipe(
+      z.number({ message: 'Must be a valid number' })
+        .int('Must be a whole number')
+        .min(0, 'Must be zero or positive'),
+    ),
+
+  /** Boolean with optional string conversion */
+  booleanField: () => z.union([z.boolean(), z.string()])
+    .transform((val) => {
+      if (typeof val === 'string') {
+        return val.toLowerCase() === 'true';
+      }
+      return val;
+    })
+    .pipe(z.boolean()),
+};
+
+/**
+ * Create a confirm password field that validates against a password field
+ */
+export function createConfirmPasswordField() {
+  return z.string()
+    .min(1, 'Please confirm your password');
+}
+
+/**
+ * Add password confirmation validation to a schema
+ */
+export function addPasswordConfirmation<T extends z.ZodRawShape>(
+  schema: z.ZodObject<T>,
+  passwordField = 'password',
+  confirmField = 'confirmPassword',
+  message = 'Passwords do not match',
+) {
+  return schema.refine((data) => {
+    const record = data as Record<string, unknown>;
+    return record[passwordField] === record[confirmField];
+  }, {
+    message,
+    path: [confirmField],
+  });
+}
+
+/**
+ * Create a date range validation (start date must be before end date)
+ */
+export function createDateRangeValidation<T extends z.ZodRawShape>(
+  schema: z.ZodObject<T>,
+  startDateField = 'startDate',
+  endDateField = 'endDate',
+  message = 'Start date must be before or equal to end date',
+) {
+  return schema.refine((data) => {
+    const record = data as Record<string, unknown>;
+    const startDate = new Date(record[startDateField] as string);
+    const endDate = new Date(record[endDateField] as string);
+    return startDate <= endDate;
+  }, {
+    message,
+    path: [startDateField],
+  });
+}
+
+/**
+ * Utility to format validation errors for display
+ */
+export function formatValidationError(error: z.ZodError): Record<string, string> {
+  const formattedErrors: Record<string, string> = {};
+
+  error.issues.forEach((err) => {
+    const path = err.path.join('.');
+    if (!formattedErrors[path]) {
+      formattedErrors[path] = err.message;
+    }
+  });
+
+  return formattedErrors;
+}
+
+/**
+ * Utility to check if a string is a valid date
+ */
+export function isValidDate(dateString: string): boolean {
+  const date = new Date(dateString);
+  return !Number.isNaN(date.getTime());
+}
+
+/**
+ * Utility to format date for API (YYYY-MM-DD)
+ */
+export function formatDateForAPI(date: Date): string {
+  return date.toISOString().split('T')[0];
+}
+
+/**
+ * Utility to parse date from API string
+ */
+export function parseDateFromAPI(dateString: string): Date {
+  return new Date(dateString);
+}
diff --git a/client-vue3/src/views/AboutView.vue b/client-vue3/src/views/AboutView.vue
index e33ea919..2e3ac001 100644
--- a/client-vue3/src/views/AboutView.vue
+++ b/client-vue3/src/views/AboutView.vue
@@ -1,82 +1,16 @@
 <template>
   <div class="about">
-    <div class="about-header">
-      <h1>About DigiScript Vue 3 Migration</h1>
-      <p class="subtitle">Technical Implementation Details</p>
-    </div>
-
-    <div class="content-sections">
-      <section class="section">
-        <h2>Migration Strategy</h2>
-        <p>
-          We're implementing a side-by-side migration approach that allows both Vue 2 and Vue 3
-          applications to coexist during the transition period. This ensures zero downtime and
-          allows for gradual feature migration.
-        </p>
-        <ul>
-          <li><strong>Phase 1:</strong> Foundation & Infrastructure (Current)</li>
-          <li><strong>Phase 2:</strong> Core Components Migration</li>
-          <li><strong>Phase 3:</strong> Feature-by-Feature Migration</li>
-          <li><strong>Phase 4:</strong> Final Cutover & Cleanup</li>
-        </ul>
-      </section>
-
-      <section class="section">
-        <h2>Technical Architecture</h2>
-        <div class="tech-grid">
-          <div class="tech-item">
-            <h4>Vue 3.4+</h4>
-            <p>Composition API, improved TypeScript support, better performance</p>
-          </div>
-          <div class="tech-item">
-            <h4>Vite 5+</h4>
-            <p>Fast build tool with HMR, ESM-based development</p>
-          </div>
-          <div class="tech-item">
-            <h4>Pinia</h4>
-            <p>Modern state management, replacing Vuex</p>
-          </div>
-          <div class="tech-item">
-            <h4>Vue Router 4</h4>
-            <p>Updated routing with composition API support</p>
-          </div>
-          <div class="tech-item">
-            <h4>TypeScript</h4>
-            <p>Full TypeScript integration for better DX</p>
-          </div>
-          <div class="tech-item">
-            <h4>ESLint</h4>
-            <p>Code quality with Vue 3 + TypeScript rules</p>
-          </div>
-        </div>
-      </section>
-
-      <section class="section">
-        <h2>Current Status</h2>
-        <div class="status-list">
-          <div class="status-item completed">
-            <span class="status-icon">✅</span>
-            <span>Project structure and build system</span>
-          </div>
-          <div class="status-item completed">
-            <span class="status-icon">✅</span>
-            <span>TypeScript configuration</span>
-          </div>
-          <div class="status-item completed">
-            <span class="status-icon">✅</span>
-            <span>Vue Router 4 setup</span>
-          </div>
-          <div class="status-item completed">
-            <span class="status-icon">✅</span>
-            <span>Pinia state management</span>
-          </div>
-          <div class="status-item completed">
-            <span class="status-icon">✅</span>
-            <span>Development server with API proxy</span>
-          </div>
-        </div>
-      </section>
-    </div>
+    <h1>About DigiScript</h1>
+    <p class="description">
+      A digital script resource for queueing shows, produced by the Dream Team
+    </p>
+    <p class="team-intro">The dream team is</p>
+    <ul class="team-list">
+      <li>Tim Bradgate</li>
+      <li>Jack Pollock</li>
+      <li>Matthew Stratford</li>
+      <li>Matthew Gaynor</li>
+    </ul>
   </div>
 </template>
 
@@ -86,110 +20,38 @@
 
 <style scoped>
 .about {
-  max-width: 800px;
+  color: white;
+  max-width: 600px;
   margin: 0 auto;
+  padding: 2rem 0;
 }
 
-.about-header {
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
-.about-header h1 {
+.about h1 {
   font-size: 2.5rem;
-  color: #1a202c;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
+  color: white;
 }
 
-.subtitle {
+.description {
   font-size: 1.125rem;
-  color: #718096;
-}
-
-.content-sections {
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
-}
-
-.section {
-  background: white;
-  border-radius: 8px;
-  padding: 2rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.section h2 {
-  color: #2d3748;
-  margin-bottom: 1rem;
-  font-size: 1.5rem;
-}
-
-.section h4 {
-  color: #4a5568;
-  margin-bottom: 0.5rem;
-}
-
-.section p {
-  color: #718096;
-  line-height: 1.6;
-  margin-bottom: 1rem;
-}
-
-.section ul {
-  color: #718096;
+  margin-bottom: 1.5rem;
   line-height: 1.6;
 }
 
-.section ul li {
-  margin-bottom: 0.5rem;
-}
-
-.tech-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  margin-top: 1rem;
+.team-intro {
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
 }
 
-.tech-item {
-  padding: 1rem;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border-left: 4px solid #007bff;
+.team-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-.tech-item h4 {
-  color: #007bff;
+.team-list li {
+  font-size: 1rem;
   margin-bottom: 0.5rem;
-}
-
-.tech-item p {
-  margin-bottom: 0;
-  font-size: 0.9rem;
-}
-
-.status-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-top: 1rem;
-}
-
-.status-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: #f8f9fa;
-  border-radius: 6px;
-}
-
-.status-item.completed {
-  background: #d4edda;
-}
-
-.status-icon {
-  font-size: 1.125rem;
+  color: white;
 }
 </style>
diff --git a/client-vue3/src/views/HomeView.vue b/client-vue3/src/views/HomeView.vue
index 0a7037ea..9d442d3f 100644
--- a/client-vue3/src/views/HomeView.vue
+++ b/client-vue3/src/views/HomeView.vue
@@ -1,194 +1,84 @@
 <template>
   <div class="home">
-    <div class="welcome-section">
-      <h1>Welcome to DigiScript Vue 3</h1>
-      <p class="lead">Phase 1 Migration Foundation</p>
-    </div>
-
-    <div class="status-grid">
-      <div class="status-card">
-        <h3>Framework Status</h3>
-        <ul>
-          <li>✅ Vue 3.4+ - Composition API</li>
-          <li>✅ TypeScript Support</li>
-          <li>✅ Vite 5+ Build System</li>
-          <li>✅ Vue Router 4</li>
-          <li>✅ Pinia State Management</li>
-        </ul>
-      </div>
-
-      <div class="status-card">
-        <h3>Development Environment</h3>
-        <ul>
-          <li>✅ Hot Module Replacement</li>
-          <li>✅ Development Server (Port 3000)</li>
-          <li>✅ API Proxy to Backend</li>
-          <li>✅ TypeScript Type Checking</li>
-          <li>✅ ESLint Configuration</li>
-        </ul>
-      </div>
-
-      <div class="status-card">
-        <h3>Phase 2 Progress</h3>
-        <ul>
-          <li>✅ Pinia State Management</li>
-          <li>✅ WebSocket Communication</li>
-          <li>✅ Authentication System</li>
-          <li>⏳ Bootstrap Vue 3 Integration</li>
-          <li>⏳ Component Migration</li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="test-links">
-      <h2>Development & Testing</h2>
-      <div class="link-buttons">
-        <router-link to="/websocket-test" class="test-link">
-          🔌 WebSocket Connection Test
-        </router-link>
-        <router-link to="/about" class="test-link">
-          ℹ️ About This Application
-        </router-link>
-      </div>
-    </div>
-
-    <div class="info-section">
-      <h2>Phase 2: State Management & WebSocket</h2>
-      <p>
-        <strong>COMPLETED:</strong> WebSocket communication and state management have been
-        successfully migrated to Vue 3.
-        This includes Pinia stores for authentication and WebSocket state, with full
-        OP/ACTION message routing compatibility.
-      </p>
-      <p>
-        The WebSocket implementation maintains 100% compatibility with the existing backend API,
-        preserving all message formats and authentication flows used by the Vue 2 application.
+    <!-- No show loaded state -->
+    <template v-if="!settingsStore.settings.current_show">
+      <h1>DigiScript</h1>
+      <p class="no-show-message">
+        <strong>No show has been loaded. Please create a new one, or load an existing one.</strong>
       </p>
-      <p>
-        <strong>Test the implementation:</strong> Use the WebSocket test page above to verify
-        connection,
-        authentication, and message handling functionality.
-      </p>
-    </div>
+    </template>
+
+    <!-- Show loaded state -->
+    <template v-else>
+      <h1>{{ settingsStore.currentShow?.name || 'Current Show' }}</h1>
+
+      <!-- No session state -->
+      <template v-if="!currentShowSession">
+        <p v-if="authStore.isAdmin" class="session-message">
+          <strong>
+            No live session has currently been started. Please start a live session to continue.
+          </strong>
+        </p>
+        <p v-else class="session-message">
+          <strong>
+            No live session has currently been started. Please wait for a live session to start.
+          </strong>
+        </p>
+      </template>
+
+      <!-- Session active state -->
+      <template v-else>
+        <p class="session-message">
+          <strong>
+            Live session has been started. Join
+            <router-link to="/live" class="live-link">here</router-link>.
+          </strong>
+        </p>
+      </template>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-// Vue 3 Composition API
-// No reactive data needed for this static view yet
+import { computed } from 'vue';
+import { useAuthStore } from '../stores/auth';
+import { useSettingsStore } from '../stores/settings';
+
+// Stores
+const authStore = useAuthStore();
+const settingsStore = useSettingsStore();
+
+// TODO: Add show session management when that store is created
+const currentShowSession = computed(() => null);
 </script>
 
 <style scoped>
 .home {
   padding: 2rem 0;
+  color: white;
 }
 
-.welcome-section {
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
-.welcome-section h1 {
-  font-size: 3rem;
-  color: #1a202c;
-  margin-bottom: 0.5rem;
-}
-
-.lead {
-  font-size: 1.25rem;
-  color: #718096;
-  margin-bottom: 0;
-}
-
-.status-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-  margin-bottom: 3rem;
-}
-
-.status-card {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.status-card h3 {
-  color: #2d3748;
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-}
-
-.status-card ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.status-card li {
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #f7fafc;
-}
-
-.status-card li:last-child {
-  border-bottom: none;
-}
-
-.info-section {
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 2rem;
-  text-align: center;
-}
-
-.info-section h2 {
-  color: #28a745;
+.home h1 {
+  font-size: 2.5rem;
   margin-bottom: 1rem;
+  color: white;
 }
 
-.info-section code {
-  background: #e9ecef;
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
-}
-
-.test-links {
-  margin-bottom: 3rem;
-  text-align: center;
-}
-
-.test-links h2 {
-  color: #2d3748;
-  margin-bottom: 1.5rem;
-}
-
-.link-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  flex-wrap: wrap;
+.no-show-message,
+.session-message {
+  font-size: 1.125rem;
+  color: white;
+  margin-bottom: 0;
+  line-height: 1.6;
 }
 
-.test-link {
-  display: inline-block;
-  padding: 1rem 1.5rem;
-  background: #007bff;
-  color: white;
+.live-link {
+  color: #00bc8c;
   text-decoration: none;
-  border-radius: 6px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
 }
 
-.test-link:hover {
-  background: #0056b3;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
-  color: white;
-  text-decoration: none;
+.live-link:hover {
+  color: #00d9a5;
+  text-decoration: underline;
 }
 </style>
diff --git a/client-vue3/src/views/LoginView.vue b/client-vue3/src/views/LoginView.vue
new file mode 100644
index 00000000..803cfcba
--- /dev/null
+++ b/client-vue3/src/views/LoginView.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="login-container">
+    <div class="login-form-container">
+      <h3 class="login-title">Login to DigiScript</h3>
+
+      <form @submit.prevent="handleLogin" class="login-form">
+        <div class="form-group">
+          <label for="username" class="form-label">Username</label>
+          <InputText
+            id="username"
+            v-model="loginForm.username"
+            type="text"
+            class="form-control"
+            @keydown.enter="handleLogin"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="password" class="form-label">Password</label>
+          <Password
+            id="password"
+            v-model="loginForm.password"
+            :feedback="false"
+            toggleMask
+            class="form-control"
+            @keydown.enter="handleLogin"
+          />
+        </div>
+
+        <Button
+          type="submit"
+          :disabled="isSubmitting || !isFormValid"
+          :loading="isSubmitting"
+          :label="isSubmitting ? 'Logging in...' : 'Login'"
+          class="login-btn"
+        />
+      </form>
+
+      <Message
+        v-if="showLoginError"
+        severity="error"
+        :closable="false"
+        class="login-error"
+      >
+        Login unsuccessful. Please check your credentials and try again.
+      </Message>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+// PrimeVue Components
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Message from 'primevue/message';
+import Password from 'primevue/password';
+
+import { useAuthStore } from '../stores/auth';
+
+const router = useRouter();
+const authStore = useAuthStore();
+
+// Form state
+const loginForm = ref({
+  username: '',
+  password: '',
+});
+
+// UI state
+const isSubmitting = ref(false);
+const showLoginError = ref(false);
+
+// Validation - simple validation without showing errors initially
+const isFormValid = computed(() => loginForm.value.username.trim().length > 0
+  && loginForm.value.password.trim().length > 0);
+
+// Login handler
+async function handleLogin() {
+  if (!isFormValid.value || isSubmitting.value) {
+    return;
+  }
+
+  isSubmitting.value = true;
+  showLoginError.value = false;
+
+  try {
+    const loginSuccess = await authStore.userLogin({
+      username: loginForm.value.username.trim(),
+      password: loginForm.value.password,
+    });
+
+    if (loginSuccess) {
+      // Redirect to home page
+      await router.push('/');
+    } else {
+      showLoginError.value = true;
+    }
+  } catch (error) {
+    console.error('Login error:', error);
+    showLoginError.value = true;
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* Login container matching Vue 2 exactly */
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 120px); /* Account for header height */
+  background-color: #343a40;
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.login-form-container {
+  width: 100%;
+  max-width: 400px;
+}
+
+.login-title {
+  color: white;
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  font-weight: normal;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-group {
+  text-align: left;
+}
+
+.form-label {
+  display: block;
+  color: white;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+  font-weight: normal;
+}
+
+/* PrimeVue component styling overrides */
+.form-control {
+  width: 100%;
+}
+
+.form-control :deep(.p-inputtext),
+.form-control :deep(.p-password-input) {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control :deep(.p-inputtext:focus),
+.form-control :deep(.p-password-input:focus) {
+  color: #495057;
+  background-color: #fff;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.login-btn {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.login-btn :deep(.p-button) {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  background-color: #007bff;
+  border-color: #007bff;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.login-btn :deep(.p-button:hover:not(:disabled)) {
+  background-color: #0056b3;
+  border-color: #004085;
+}
+
+.login-btn :deep(.p-button:focus) {
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+
+.login-btn :deep(.p-button:disabled) {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.login-error {
+  margin-top: 1.5rem;
+}
+
+.login-error :deep(.p-message) {
+  text-align: left;
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+  .login-form-container {
+    max-width: 320px;
+  }
+
+  .login-title {
+    font-size: 1.25rem;
+  }
+}
+</style>
diff --git a/client-vue3/src/views/UserSettingsView.vue b/client-vue3/src/views/UserSettingsView.vue
new file mode 100644
index 00000000..0fce3ae4
--- /dev/null
+++ b/client-vue3/src/views/UserSettingsView.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-3xl font-bold text-gray-800 mb-6">User Settings</h1>
+
+    <Tabs v-model:value="activeTab">
+      <TabList>
+        <Tab value="0">About</Tab>
+        <Tab value="1">Settings</Tab>
+        <Tab value="2">Stage Direction Styles</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel value="0">
+          <AboutUser />
+        </TabPanel>
+
+        <TabPanel value="1">
+          <UserSettingsConfig />
+        </TabPanel>
+
+        <TabPanel value="2">
+          <StageDirectionStyles />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import AboutUser from '../components/user/AboutUser.vue';
+import UserSettingsConfig from '../components/user/UserSettingsConfig.vue';
+import StageDirectionStyles from '../components/user/StageDirectionStyles.vue';
+
+// State
+const activeTab = ref('0');
+</script>
+
+<style scoped>
+/* Additional styling can be added here if needed */
+</style>
diff --git a/client-vue3/src/views/admin/SystemAdminView.vue b/client-vue3/src/views/admin/SystemAdminView.vue
new file mode 100644
index 00000000..43592be3
--- /dev/null
+++ b/client-vue3/src/views/admin/SystemAdminView.vue
@@ -0,0 +1,260 @@
+<template>
+  <div class="system-admin">
+    <div class="container-fluid mx-0">
+      <div class="row">
+        <div class="col">
+          <h1>DigiScript System Administration</h1>
+
+          <Tabs v-model:value="activeTab">
+            <TabList>
+              <Tab value="0">System</Tab>
+              <Tab value="1">Settings</Tab>
+              <Tab value="2" :disabled="!settingsStore.currentShow">Users</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel value="0">
+                <div class="ds-tab-content">
+                  <!-- Current Show Status -->
+                  <div class="ds-system-section">
+                    <div class="ds-system-section-header">
+                      <h3 class="ds-system-section-title">Current Show</h3>
+                      <div class="ds-button-group">
+                        <Button
+                          label="Load Show"
+                          severity="success"
+                          outlined
+                          size="small"
+                          :disabled="showsStore.availableShows.length === 0"
+                          @click="showLoadModal = true"
+                        />
+                        <Button
+                          label="Setup New Show"
+                          severity="success"
+                          outlined
+                          size="small"
+                          @click="showCreateModal = true"
+                        />
+                      </div>
+                    </div>
+                    <div class="ds-system-section-content">
+                      <div v-if="settingsStore.currentShowLoaded" class="ds-info-grid">
+                        <div class="ds-info-grid-label">Show Name:</div>
+                        <div class="ds-info-grid-value">
+                          <strong>{{ settingsStore.currentShow?.name }}</strong>
+                        </div>
+                        <div></div>
+                      </div>
+                      <div v-if="settingsStore.currentShowLoaded" class="ds-info-grid">
+                        <div class="ds-info-grid-label">Dates:</div>
+                        <div class="ds-info-grid-value ds-muted-text">
+                          {{ settingsStore.currentShow?.start_date }} -
+                          {{ settingsStore.currentShow?.end_date }}
+                        </div>
+                        <div></div>
+                      </div>
+                      <div v-if="!settingsStore.currentShowLoaded" class="ds-info-grid">
+                        <div class="ds-info-grid-label">Status:</div>
+                        <div class="ds-info-grid-value">
+                          <span class="ds-status-indicator warning">No show loaded</span>
+                        </div>
+                        <div></div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Connected Clients -->
+                  <div class="ds-system-section">
+                    <div class="ds-system-section-header">
+                      <h3 class="ds-system-section-title">Connected Clients</h3>
+                      <Button
+                        label="View Clients"
+                        severity="success"
+                        outlined
+                        size="small"
+                        @click="showClientsModal = true"
+                      />
+                    </div>
+                    <div class="ds-system-section-content">
+                      <div class="ds-info-grid">
+                        <div class="ds-info-grid-label">Active Clients:</div>
+                        <div class="ds-info-grid-value">
+                          <strong>{{ settingsStore.connectedClients.length }} clients</strong>
+                        </div>
+                        <div></div>
+                      </div>
+                      <div v-if="settingsStore.connectedClients.length > 0" class="ds-info-grid">
+                        <div class="ds-info-grid-label">Last Updated:</div>
+                        <div class="ds-info-grid-value ds-muted-text">
+                          {{ formatDateTime(new Date().toISOString()) }}
+                        </div>
+                        <div></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </TabPanel>
+
+              <TabPanel value="1">
+                <SystemSettingsView />
+              </TabPanel>
+
+              <TabPanel value="2">
+                <UserManagementView />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modals -->
+    <CreateShowModal
+      v-model="showCreateModal"
+      @show-created="onShowCreated"
+    />
+
+    <LoadShowModal
+      v-model="showLoadModal"
+      @show-loaded="onShowLoaded"
+    />
+
+    <ConnectedClientsModal
+      v-model="showClientsModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, onMounted, onUnmounted, computed,
+} from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import { useSettingsStore } from '@/stores/settings';
+import { useShowsStore } from '@/stores/shows';
+import { useAuthStore } from '@/stores/auth';
+import type { ShowData } from '@/stores/settings';
+
+// Components
+import CreateShowModal from '@/components/admin/CreateShowModal.vue';
+import LoadShowModal from '@/components/admin/LoadShowModal.vue';
+import ConnectedClientsModal from '@/components/admin/ConnectedClientsModal.vue';
+
+// PrimeVue Components
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
+import TabPanel from 'primevue/tabpanel';
+import Button from 'primevue/button';
+import SystemSettingsView from './SystemSettingsView.vue';
+import UserManagementView from './UserManagementView.vue';
+
+const router = useRouter();
+const toast = useToast();
+const settingsStore = useSettingsStore();
+const showsStore = useShowsStore();
+const authStore = useAuthStore();
+
+// State
+const activeTab = ref('0');
+const showCreateModal = ref(false);
+const showLoadModal = ref(false);
+const showClientsModal = ref(false);
+let clientsRefreshInterval: ReturnType<typeof setInterval> | null = null;
+
+// Computed
+const isAdmin = computed(() => authStore.currentUser?.is_admin === true);
+
+// Methods
+function formatDateTime(dateString: string): string {
+  try {
+    return new Date(dateString).toLocaleString();
+  } catch {
+    return dateString;
+  }
+}
+
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+async function onShowCreated(_show: ShowData) {
+  // Refresh available shows and update current show if loaded
+  await showsStore.getAvailableShows();
+  await settingsStore.getSettings(); // Refresh settings to get current show
+}
+
+async function onShowLoaded(show: ShowData) {
+  // Refresh settings to update current show display
+  await settingsStore.getSettings();
+  showsStore.setCurrentShow(show);
+}
+
+function startClientsRefresh() {
+  // Refresh connected clients every 5 seconds
+  clientsRefreshInterval = setInterval(async () => {
+    try {
+      await settingsStore.getConnectedClients();
+    } catch (error) {
+      console.error('Auto-refresh connected clients error:', error);
+    }
+  }, 5000);
+}
+
+function stopClientsRefresh() {
+  if (clientsRefreshInterval) {
+    clearInterval(clientsRefreshInterval);
+    clientsRefreshInterval = null;
+  }
+}
+
+// Lifecycle
+onMounted(async () => {
+  // Check admin permissions
+  if (!isAdmin.value) {
+    toast.add({
+      severity: 'error',
+      summary: 'Access Denied',
+      detail: 'Admin access required',
+      life: 5000,
+    });
+    router.push('/');
+    return;
+  }
+
+  try {
+    // Load initial data
+    await Promise.all([
+      showsStore.getAvailableShows(),
+      settingsStore.getConnectedClients(),
+    ]);
+
+    // Start auto-refresh for connected clients
+    startClientsRefresh();
+  } catch (error) {
+    console.error('Error loading system administration data:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Unable to load system administration data',
+      life: 5000,
+    });
+  }
+});
+
+onUnmounted(() => {
+  stopClientsRefresh();
+});
+</script>
+
+<style scoped>
+.system-admin {
+  background-color: var(--ds-bg-primary);
+  color: var(--ds-text-primary);
+}
+
+h1 {
+  color: var(--ds-text-primary);
+  text-align: center;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+</style>
diff --git a/client-vue3/src/views/admin/SystemSettingsView.vue b/client-vue3/src/views/admin/SystemSettingsView.vue
new file mode 100644
index 00000000..02ce5c2f
--- /dev/null
+++ b/client-vue3/src/views/admin/SystemSettingsView.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="system-settings">
+    <div class="container-fluid mx-0">
+      <div class="row">
+        <div class="col">
+          <h1>System Settings</h1>
+
+          <div v-if="!loaded" class="ds-loading-spinner">
+            <ProgressSpinner />
+          </div>
+
+          <Form
+            v-else
+            v-slot="$form"
+            :initialValues="initialValues"
+            :resolver="resolver || undefined"
+            @submit="handleSubmit"
+            class="system-settings-form"
+          >
+            <div class="ds-tab-content">
+              <div
+                v-for="(setting, key) in settingsStore.rawSettings"
+                :key="key"
+                class="ds-form-field"
+              >
+                <label :for="`${key}-input`" class="ds-form-field-label">
+                  <span v-if="setting.display_name">{{ setting.display_name }}</span>
+                  <span v-else>{{ key }}</span>
+
+                  <Button
+                    v-if="setting.help_text"
+                    :id="`${key}-help-btn`"
+                    icon="pi pi-question-circle"
+                    text
+                    rounded
+                    severity="secondary"
+                    size="small"
+                    class="help-button"
+                    @click="showHelpTooltip($event, setting.help_text)"
+                  />
+                </label>
+
+                <!-- Text/Number Input -->
+                <InputText
+                  v-if="setting.type !== 'bool'"
+                  :id="`${key}-input`"
+                  :name="key"
+                  :type="getInputType(setting.type)"
+                  :readonly="!setting.can_edit"
+                  :class="{ 'p-invalid': $form[key]?.invalid, 'error': $form[key]?.invalid }"
+                  class="ds-form-field-input"
+                  :disabled="isSubmitting"
+                  fluid
+                />
+
+                <!-- Boolean Switch -->
+                <ToggleSwitch
+                  v-else
+                  :id="`${key}-input`"
+                  :name="key"
+                  :disabled="!setting.can_edit || isSubmitting"
+                />
+
+                <!-- Validation Error -->
+                <div v-if="$form[key]?.invalid" class="ds-form-field-error">
+                  {{ $form[key].error?.message }}
+                </div>
+              </div>
+            </div>
+
+            <div class="ds-modal-footer">
+              <Button
+                type="button"
+                label="Reset"
+                severity="secondary"
+                outlined
+                :disabled="isSubmitting"
+                @click="$form.reset()"
+              />
+              <Button
+                type="submit"
+                label="Save Settings"
+                :loading="isSubmitting"
+                :disabled="!$form.valid || isSubmitting"
+              />
+            </div>
+          </Form>
+        </div>
+      </div>
+    </div>
+
+    <!-- Help Tooltip -->
+    <OverlayPanel ref="helpOverlay">
+      <div class="help-tooltip-content">
+        {{ currentHelpText }}
+      </div>
+    </OverlayPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, onMounted, computed, watch,
+} from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import { useSettingsStore } from '@/stores/settings';
+import { useAuthStore } from '@/stores/auth';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+
+// PrimeVue Components
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import ToggleSwitch from 'primevue/toggleswitch';
+import ProgressSpinner from 'primevue/progressspinner';
+import OverlayPanel from 'primevue/overlaypanel';
+import Form from '@primevue/forms/form';
+import type { FormSubmitEvent } from '@primevue/forms/form';
+
+// Validation schema
+import {
+  createSystemSettingsSchema,
+  createSystemSettingsDefaults,
+  getInputType,
+  type SystemSettingsFormData,
+} from '@/schemas/systemSettingsValidation';
+
+const router = useRouter();
+const toast = useToast();
+const settingsStore = useSettingsStore();
+const authStore = useAuthStore();
+
+// State
+const loaded = ref(false);
+const helpOverlay = ref();
+const currentHelpText = ref('');
+const isSubmitting = ref(false);
+
+// Dynamic form configuration based on settings
+const initialValues = ref<SystemSettingsFormData>({});
+const resolver = ref<ReturnType<typeof zodResolver> | undefined>(undefined);
+
+// Computed
+const isAdmin = computed(() => authStore.currentUser?.is_admin === true);
+
+// Watch for changes in rawSettings to update form configuration
+watch(
+  () => settingsStore.rawSettings,
+  (newRawSettings) => {
+    if (Object.keys(newRawSettings).length > 0) {
+      initialValues.value = createSystemSettingsDefaults(newRawSettings);
+      resolver.value = zodResolver(createSystemSettingsSchema(newRawSettings));
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+// Methods
+async function handleSubmit(event: FormSubmitEvent): Promise<void> {
+  if (!event.valid) {
+    return;
+  }
+
+  const formData = event.values as SystemSettingsFormData;
+  isSubmitting.value = true;
+
+  try {
+    const result = await settingsStore.updateSystemSettings(formData);
+
+    if (result.success) {
+      toast.add({
+        severity: 'success',
+        summary: 'Success',
+        detail: 'Settings saved successfully',
+        life: 3000,
+      });
+    } else {
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: result.error || 'Unable to save settings',
+        life: 5000,
+      });
+    }
+  } catch (error) {
+    console.error('Error saving settings:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'An unexpected error occurred while saving settings',
+      life: 5000,
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+function showHelpTooltip(event: Event, helpText: string) {
+  currentHelpText.value = helpText;
+  helpOverlay.value.toggle(event);
+}
+
+// Lifecycle
+onMounted(async () => {
+  // Check admin permissions
+  if (!isAdmin.value) {
+    toast.add({
+      severity: 'error',
+      summary: 'Access Denied',
+      detail: 'Admin access required',
+      life: 5000,
+    });
+    router.push('/');
+    return;
+  }
+
+  try {
+    await settingsStore.getRawSettings();
+    loaded.value = true;
+  } catch (error) {
+    console.error('Error loading system settings:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Unable to load system settings',
+      life: 5000,
+    });
+  }
+});
+</script>
+
+<style scoped>
+.system-settings {
+  padding: 2rem;
+  background-color: var(--ds-bg-primary);
+  color: var(--ds-text-primary);
+}
+
+h1 {
+  color: var(--ds-text-primary);
+  text-align: center;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+
+.help-button {
+  margin-left: 0.5rem;
+  padding: 0.25rem;
+}
+
+.help-tooltip-content {
+  max-width: 300px;
+  color: var(--ds-text-primary);
+}
+
+/* Custom styling for specific elements that need adjustment */
+.ds-form-field-input {
+  min-width: 300px;
+  max-width: 600px;
+}
+</style>
diff --git a/client-vue3/src/views/admin/UserManagementView.vue b/client-vue3/src/views/admin/UserManagementView.vue
new file mode 100644
index 00000000..94a0b6b5
--- /dev/null
+++ b/client-vue3/src/views/admin/UserManagementView.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="user-management">
+    <!-- Header with title and action buttons -->
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h1 class="h3 mb-0 text-light">User Management</h1>
+      <Button
+        label="New User"
+        icon="pi pi-plus"
+        class="p-button-success"
+        @click="showCreateModal = true"
+      />
+    </div>
+
+    <!-- Main content card -->
+    <Card class="shadow">
+      <template #content>
+        <DataTable
+          v-model:loading="loading"
+          :value="showUsers"
+          :paginator="false"
+          data-key="id"
+          class="p-datatable-sm"
+          :empty-message="showUsers.length === 0 ? 'No users found' : undefined"
+        >
+          <!-- Username column -->
+          <Column field="username" header="Username" :sortable="true">
+            <template #body="slotProps">
+              <span class="font-weight-medium">{{ slotProps.data.username }}</span>
+            </template>
+          </Column>
+
+          <!-- Last Login column -->
+          <Column field="last_login" header="Last Login" :sortable="true">
+            <template #body="slotProps">
+              <span v-if="slotProps.data.last_login" class="text-muted">
+                {{ formatDateTime(slotProps.data.last_login) }}
+              </span>
+              <span v-else class="text-muted fst-italic">Never</span>
+            </template>
+          </Column>
+
+          <!-- Last Seen column -->
+          <Column field="last_seen" header="Last Seen" :sortable="true">
+            <template #body="slotProps">
+              <span v-if="slotProps.data.last_seen" class="text-muted">
+                {{ formatDateTime(slotProps.data.last_seen) }}
+              </span>
+              <span v-else class="text-muted fst-italic">Never</span>
+            </template>
+          </Column>
+
+          <!-- Admin Status column -->
+          <Column field="is_admin" header="Admin" :sortable="true">
+            <template #body="slotProps">
+              <Badge
+                v-if="slotProps.data.is_admin"
+                value="Yes"
+                severity="success"
+              />
+              <Badge
+                v-else
+                value="No"
+                severity="secondary"
+              />
+            </template>
+          </Column>
+
+          <!-- Actions column -->
+          <Column header="" style="width: 200px">
+            <template #body="slotProps">
+              <div class="d-flex gap-2">
+                <Button
+                  label="RBAC"
+                  icon="pi pi-cog"
+                  class="p-button-warning p-button-sm"
+                  :disabled="slotProps.data.is_admin"
+                  @click="editUserRbac(slotProps.data)"
+                />
+                <Button
+                  icon="pi pi-trash"
+                  class="p-button-danger p-button-sm"
+                  :disabled="slotProps.data.is_admin"
+                  @click="confirmDeleteUser(slotProps.data)"
+                />
+              </div>
+            </template>
+          </Column>
+        </DataTable>
+      </template>
+    </Card>
+
+    <!-- Create User Modal -->
+    <Dialog
+      v-model:visible="showCreateModal"
+      header="Add New User"
+      :modal="true"
+      :closable="true"
+      :style="{ width: '500px' }"
+      class="p-fluid"
+    >
+      <CreateUserModal
+        @user-created="onUserCreated"
+        @cancel="showCreateModal = false"
+      />
+    </Dialog>
+
+    <!-- RBAC Configuration Modal -->
+    <Dialog
+      v-model:visible="showRbacModal"
+      header="User RBAC Configuration"
+      :modal="true"
+      :closable="true"
+      :style="{ width: '80vw', maxWidth: '1200px' }"
+      class="p-fluid"
+    >
+      <RbacEditor
+        v-if="selectedUser"
+        :user-id="selectedUser.id"
+        @close="showRbacModal = false"
+      />
+    </Dialog>
+
+    <!-- Delete Confirmation Dialog -->
+    <ConfirmDialog />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref, computed, onMounted, onUnmounted,
+} from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import { useAuthStore } from '@/stores/auth';
+import type { User } from '@/stores/auth';
+
+// PrimeVue components
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import Dialog from 'primevue/dialog';
+import Badge from 'primevue/badge';
+import ConfirmDialog from 'primevue/confirmdialog';
+
+// Child components
+import CreateUserModal from '@/components/user/CreateUserModal.vue';
+import RbacEditor from '@/components/user/RbacEditor.vue';
+
+// Composables
+const confirm = useConfirm();
+const toast = useToast();
+const authStore = useAuthStore();
+
+// Reactive state
+const loading = ref(false);
+const showCreateModal = ref(false);
+const showRbacModal = ref(false);
+const selectedUser = ref<User | null>(null);
+const refreshInterval = ref<number | null>(null);
+
+// Computed properties
+const showUsers = computed(() => authStore.showUsers);
+
+// Check if current user is admin (required for user management access)
+const isAdmin = computed(() => authStore.isAdmin);
+
+// Utility functions
+function formatDateTime(dateString: string): string {
+  if (!dateString) return 'Never';
+  try {
+    return new Date(dateString).toLocaleString();
+  } catch (error) {
+    console.warn('Invalid date string:', dateString);
+    return 'Invalid Date';
+  }
+}
+
+// Refresh users - shows loading spinner for initial load, silent for background updates
+async function refreshUsers(showLoading: boolean = false): Promise<void> {
+  if (!isAdmin.value) {
+    return;
+  }
+
+  if (showLoading) {
+    loading.value = true;
+  }
+
+  try {
+    await authStore.getUsers();
+  } catch (error) {
+    console.error('Failed to refresh users:', error);
+    if (showLoading) {
+      toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Failed to refresh user list',
+        life: 5000,
+      });
+    }
+    // Silent failure for background refresh - no toast
+  } finally {
+    if (showLoading) {
+      loading.value = false;
+    }
+  }
+}
+
+function onUserCreated(): void {
+  showCreateModal.value = false;
+  refreshUsers(); // Silent background refresh
+  toast.add({
+    severity: 'success',
+    summary: 'Success',
+    detail: 'User created successfully',
+    life: 3000,
+  });
+}
+
+function editUserRbac(user: User): void {
+  selectedUser.value = user;
+  showRbacModal.value = true;
+}
+
+async function deleteUser(user: User): Promise<void> {
+  try {
+    await authStore.deleteUser(user.id);
+    await refreshUsers(); // Silent background refresh
+    toast.add({
+      severity: 'success',
+      summary: 'Success',
+      detail: `User "${user.username}" deleted successfully`,
+      life: 3000,
+    });
+  } catch (error) {
+    console.error('Failed to delete user:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Failed to delete user',
+      life: 5000,
+    });
+  }
+}
+
+function confirmDeleteUser(user: User): void {
+  confirm.require({
+    message: `Are you sure you want to delete user "${user.username}"?`,
+    header: 'Delete User Confirmation',
+    icon: 'pi pi-exclamation-triangle',
+    accept: () => deleteUser(user),
+    acceptLabel: 'Delete',
+    acceptClass: 'p-button-danger',
+    rejectLabel: 'Cancel',
+  });
+}
+
+// Lifecycle hooks
+onMounted(async () => {
+  if (!isAdmin.value) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Access Denied',
+      detail: 'User management requires administrator privileges',
+      life: 5000,
+    });
+    return;
+  }
+
+  // Initial load with loading spinner
+  await refreshUsers(true);
+
+  // Set up auto-refresh every 5 seconds (matching Vue 2 behavior)
+  // Use silent refresh to avoid showing loading spinner
+  refreshInterval.value = window.setInterval(() => refreshUsers(), 5000);
+});
+
+onUnmounted(() => {
+  if (refreshInterval.value) {
+    clearInterval(refreshInterval.value);
+  }
+});
+</script>
+
+<style scoped>
+.user-management {
+  padding: 1rem;
+  background-color: var(--surface-ground);
+  /* Remove min-height: 100vh as this is inside a tab panel */
+}
+
+/* Dark theme styling to match Vue 2 */
+:deep(.p-card) {
+  background-color: var(--surface-card);
+  border: 1px solid var(--surface-border);
+}
+
+:deep(.p-datatable) {
+  background-color: var(--surface-card);
+}
+
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  background-color: var(--surface-section);
+  color: var(--text-color);
+  border-color: var(--surface-border);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr) {
+  background-color: var(--surface-card);
+  color: var(--text-color);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr:nth-child(even)) {
+  background-color: var(--surface-hover);
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
+  border-color: var(--surface-border);
+}
+
+/* Button styling */
+:deep(.p-button-success) {
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+:deep(.p-button-secondary.p-button-outlined) {
+  background-color: transparent;
+  border-color: #6c757d;
+  color: #6c757d;
+}
+
+:deep(.p-button-secondary.p-button-outlined:hover) {
+  background-color: #6c757d;
+  border-color: #6c757d;
+  color: white;
+}
+
+:deep(.p-button-warning) {
+  background-color: #ffc107;
+  border-color: #ffc107;
+  color: #000;
+}
+
+:deep(.p-button-danger) {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+/* Badge styling */
+:deep(.p-badge) {
+  font-size: 0.75rem;
+}
+
+/* Modal styling */
+:deep(.p-dialog) {
+  background-color: var(--surface-overlay);
+}
+
+:deep(.p-dialog .p-dialog-header) {
+  background-color: var(--surface-section);
+  color: var(--text-color);
+  border-bottom: 1px solid var(--surface-border);
+}
+
+:deep(.p-dialog .p-dialog-content) {
+  background-color: var(--surface-overlay);
+  color: var(--text-color);
+}
+</style>