diff --git a/.github/workflows/semantic-release.yaml b/.github/workflows/semantic-release.yaml
index eac3799c..37f03a8b 100644
--- a/.github/workflows/semantic-release.yaml
+++ b/.github/workflows/semantic-release.yaml
@@ -15,10 +15,10 @@ jobs:
     if: ${{ needs.versioning.outputs.next-version != '' }}
 
     with:
-      projects: '["apps/aurora-core", "apps/aurora-client"]'
+      projects: '["apps/aurora-core", "apps/aurora-client", "apps/aurora-backoffice"]'
       version: ${{ needs.versioning.outputs.next-version }}
       docker-registry: 'abc.docker-registry.gewis.nl'
-      docker-paths: '["nc/aurora/core", "nc/aurora/client"]'
+      docker-paths: '["nc/aurora/core", "nc/aurora/client", "nc/aurora/backoffice"]'
       github-registry: 'true'
     secrets:
       REGISTRY_USERNAME: ${{ secrets.SVC_GH_ABCNC_USERNAME }}
diff --git a/.gitignore b/.gitignore
index eb38746a..b4795dc0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
+.pnpm-store
 
 # Coverage directory used by tools like istanbul
 coverage
diff --git a/README.md b/README.md
index 5b2b5c09..a61e99ae 100644
--- a/README.md
+++ b/README.md
@@ -50,9 +50,9 @@ All subscribers authenticate with an API key, then maintain a persistent SocketI
 
 | Repository                                                                  | Role                                                                                       | Tech                         |
 | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------- |
-| [aurora-core](https://github.com/GEWIS/aurora-core)                         | Central publisher — receives commands and pushes state to all subscribers                  | TypeScript, NodeJS, SocketIO |
-| [aurora-backoffice](https://github.com/GEWIS/aurora-backoffice)             | Web management UI for humans to control Aurora                                             | TypeScript, React, SocketIO  |
-| [aurora-client](https://github.com/GEWIS/aurora-client)                     | Narrowcasting screen client — displays posters and information on screens                  | TypeScript, NodeJS, SocketIO |
+| `aurora-core` (this repo)                                                   | Central publisher — receives commands and pushes state to all subscribers                  | TypeScript, NodeJS, SocketIO |
+| `aurora-backoffice` (this repo)                                             | Web management UI for humans to control Aurora                                             | TypeScript, Vue, PrimeVue    |
+| `aurora-client` (this repo)                                                 | Narrowcasting screen client — displays posters and information on screens                  | TypeScript, NodeJS, SocketIO |
 | [aurora-audio-player](https://github.com/GEWIS/aurora-audio-player)         | Audio subscriber — plays music as commanded by the core                                    | TypeScript, NodeJS           |
 | [aurora-lights-proxy](https://github.com/GEWIS/aurora-lights-proxy)         | DMX controller bridge — forwards DMX packets from core to ArtNet hardware                  | Python, Art-Net              |
 | [aurora-lights-simulator](https://github.com/GEWIS/aurora-lights-simulator) | Lights effect development tool — simulate DMX output without physical hardware             | TypeScript, NodeJS           |
@@ -85,7 +85,7 @@ cd apps/aurora-core && pnpm dev
 
 ## Development with Docker Compose
 
-The monorepo includes a one-command Docker Compose setup that runs the core, client (narrowcasting), and their dependencies together.
+The monorepo includes a one-command Docker Compose setup that runs the core, backoffice, client (narrowcasting), and their dependencies together.
 
 ### Prerequisites
 
@@ -96,27 +96,29 @@ The monorepo includes a one-command Docker Compose setup that runs the core, cli
 
 ```bash
 # Start everything
-pnpm dev-up
+pnpm dev
 ```
 
 This will:
 
 1. Start the **core** (`http://localhost:3000`) with a pre-seeded SQLite database (GEWIS data set)
-2. Start the **client** (`http://localhost:8081`) with Vite dev server proxying API calls to the core
-3. Wait for the core to be ready and the database seeded
-4. Extract the first screen's API key from the database
-5. Open `http://localhost:8081?key=<screen-key>` in your browser — you are authenticated as that screen
+2. Start the **backoffice** (`http://localhost:8080`)
+3. Start the **client** (`http://localhost:8081`) with Vite dev server proxying API calls to the core
+4. Wait for the core to be ready and the database seeded
+5. Extract the first screen's API key from the database
+6. Open the client, backoffice, and API docs in your browser
+7. Stay running in the foreground — press **Ctrl-C** to stop the environment gracefully
 
 ### Teardown
 
 ```bash
-pnpm dev-down
+docker compose down
 ```
 
 Containers are removed but the `node_modules` volume is kept for fast restarts. To fully reset:
 
 ```bash
-pnpm dev-down -v    # also removes cached node_modules
+docker compose down -v    # also removes cached node_modules
 ```
 
 ## External Integrations
@@ -139,8 +141,8 @@ If you want to integrate your own service with Aurora — to fetch data, send co
 1. Fork the repository.
 2. Create a feature branch: `git checkout -b feat/your-feature-name`.
 3. Make your changes.
-4. Run tests: `pnpm --filter aurora-core test`.
-5. Run linting: `pnpm --filter aurora-core lint-fix`.
+4. Run tests: `pnpm --filter @gewis/aurora-core test`.
+5. Run linting: `pnpm lint`.
 6. Commit using [Conventional Commits](https://www.conventionalcommits.org/): `git commit -m "feat: add your feature"`.
 7. Push: `git push origin feat/your-feature-name`.
 8. Open a Pull Request.
diff --git a/apps/aurora-backoffice/.gitignore b/apps/aurora-backoffice/.gitignore
new file mode 100644
index 00000000..88f855d4
--- /dev/null
+++ b/apps/aurora-backoffice/.gitignore
@@ -0,0 +1,5 @@
+# Build output
+dist
+
+# Local dev
+.env
diff --git a/apps/aurora-backoffice/Dockerfile b/apps/aurora-backoffice/Dockerfile
new file mode 100644
index 00000000..2d6cc8c5
--- /dev/null
+++ b/apps/aurora-backoffice/Dockerfile
@@ -0,0 +1,23 @@
+# build context: the output of `pnpm turbo prune @gewis/aurora-backoffice --docker`
+FROM node:22 AS builder
+ENV CI=true
+WORKDIR /app
+
+COPY json/ ./
+COPY full/ ./
+
+RUN corepack enable
+RUN pnpm install --no-frozen-lockfile
+RUN pnpm --filter @gewis/aurora-api-client run sync
+RUN pnpm --filter @gewis/aurora-api-client run build
+RUN pnpm --filter @gewis/aurora-backoffice run build
+
+FROM nginx:alpine
+WORKDIR /usr/src/app
+
+COPY full/apps/aurora-backoffice/docker/nginx.conf /etc/nginx/nginx.conf
+COPY full/apps/aurora-backoffice/public /usr/src/app/public
+COPY --from=builder /app/apps/aurora-backoffice/dist /usr/src/app
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/apps/aurora-backoffice/README.md b/apps/aurora-backoffice/README.md
new file mode 100644
index 00000000..025e7d3e
--- /dev/null
+++ b/apps/aurora-backoffice/README.md
@@ -0,0 +1,24 @@
+# Aurora Backoffice
+
+This is the **management interface** of the Aurora suite — the web UI used to control DMX lighting, narrowcasting screens, and music playback. The backoffice sends commands to the core over HTTP and receives real-time state updates over SocketIO.
+See the root [README](../README.md) for the full architecture overview and list of all Aurora repositories.
+
+## Prerequisites
+
+- NodeJS 22.
+
+## Development setup
+
+1. Run `pnpm install` from the monorepo root.
+1. Run `pnpm dev`.
+1. The application is now running at http://localhost:8080.
+   In development mode, you are automatically logged in without OIDC credentials (mock auth).
+
+By default, the dev server proxies API requests to `http://localhost:3000`. To use a different core URL, set `VITE_CORE_URL` in the environment.
+
+## Deployment
+
+Deployment is handled by Docker Compose from the monorepo root alongside Aurora Core.
+The backoffice can be built standalone with `pnpm docker-build` from this directory.
+
+In production, the backoffice authenticates via OIDC (Keycloak). The `VITE_OIDC_*` environment variables must be configured for the production build.
diff --git a/apps/aurora-backoffice/docker/nginx.conf b/apps/aurora-backoffice/docker/nginx.conf
new file mode 100644
index 00000000..2773be4c
--- /dev/null
+++ b/apps/aurora-backoffice/docker/nginx.conf
@@ -0,0 +1,84 @@
+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+
+    upstream aurora_core {
+        server core:3000;
+    }
+
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+    access_log  /var/log/nginx/access.log  main;
+    sendfile        on;
+    keepalive_timeout  65;
+    server {
+        listen       80;
+        server_name  localhost;
+        location / {
+            root   /usr/src/app;
+            index  index.html;
+            try_files $uri $uri/ /index.html;
+        }
+
+        location /api-docs {
+            proxy_pass http://aurora_core;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $host;
+            proxy_redirect off;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+        }
+
+        location /api/ {
+            proxy_pass http://aurora_core;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $host;
+            proxy_redirect off;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+        }
+
+        location /socket.io/ {
+            proxy_pass http://aurora_core;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $host;
+            proxy_redirect off;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+        }
+
+        location /static/posters/ {
+            alias /usr/src/app/data/posters/;
+        }
+
+        location /static/local-posters/ {
+            alias /usr/src/app/data/local-posters/;
+        }
+
+        location /static/audio/ {
+            alias /usr/src/app/data/audio/;
+        }
+
+
+        error_page   500 502 503 504  /50x.html;
+        location = /50x.html {
+            root   /usr/share/nginx/html;
+        }
+    }
+}
diff --git a/apps/aurora-backoffice/env.d.ts b/apps/aurora-backoffice/env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/apps/aurora-backoffice/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/aurora-backoffice/eslint.config.mjs b/apps/aurora-backoffice/eslint.config.mjs
new file mode 100644
index 00000000..199b42ff
--- /dev/null
+++ b/apps/aurora-backoffice/eslint.config.mjs
@@ -0,0 +1,5 @@
+import { eslintConfig as common } from '@gewis/eslint-config-typescript';
+import { eslintConfig as vue } from '@gewis/eslint-config-vue';
+import { eslintConfig as prettier } from '@gewis/prettier-config';
+
+export default [...common, ...vue, prettier];
diff --git a/apps/aurora-backoffice/index.html b/apps/aurora-backoffice/index.html
new file mode 100644
index 00000000..82834fe7
--- /dev/null
+++ b/apps/aurora-backoffice/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aurora</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/aurora-backoffice/package.json b/apps/aurora-backoffice/package.json
new file mode 100644
index 00000000..acff5c99
--- /dev/null
+++ b/apps/aurora-backoffice/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@gewis/aurora-backoffice",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "vite build",
+    "typecheck": "vue-tsc -b --noEmit",
+    "lint": "eslint src --max-warnings=1",
+    "lint-fix": "eslint src --fix",
+    "docker-build": "pnpm turbo prune @gewis/aurora-backoffice --docker && docker build -f Dockerfile -t aurora-backoffice ../../out"
+  },
+  "dependencies": {
+    "@gewis/aurora-api-client": "workspace:*",
+    "@gewis/splash": "2.4.0",
+    "@primeuix/themes": "1.2.0",
+    "@primevue/core": "4.3.6",
+    "@tailwindcss/postcss": "4.1.14",
+    "@vee-validate/yup": "4.15.1",
+    "cronstrue": "2.61.0",
+    "dotenv": "16.6.1",
+    "pinia": "3.0.3",
+    "primeicons": "7.0.0",
+    "primevue": "4.3.6",
+    "socket.io-client": "4.8.1",
+    "tailwind": "4.0.0",
+    "tailwindcss-primeui": "0.6.1",
+    "uuid": "11.1.0",
+    "vue": "3.5.22",
+    "vue-router": "4.5.1",
+    "vue-timeago3": "2.3.2",
+    "yup": "1.6.1"
+  },
+  "devDependencies": {
+    "@gewis/eslint-config-typescript": "2.3.0",
+    "@gewis/eslint-config-vue": "2.3.0",
+    "@gewis/prettier-config": "2.2.2",
+    "@tsconfig/node22": "22.0.2",
+    "@types/lodash": "4.17.20",
+    "@types/uuid": "10.0.0",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vue/tsconfig": "0.7.0",
+    "autoprefixer": "10.4.21",
+    "eslint": "9.31.0",
+    "lodash": "4.17.21",
+    "npm-run-all": "4.1.5",
+    "postcss": "8.5.6",
+    "sass": "1.89.2",
+    "tailwindcss": "4.1.11",
+    "typescript": "5.8.3",
+    "vite": "6.3.5",
+    "vite-plugin-chunk-split": "0.5.0",
+    "vue-tsc": "2.2.12"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  }
+}
diff --git a/apps/aurora-backoffice/postcss.config.js b/apps/aurora-backoffice/postcss.config.js
new file mode 100644
index 00000000..b4bee663
--- /dev/null
+++ b/apps/aurora-backoffice/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/aurora-backoffice/public/android-chrome-192x192.png b/apps/aurora-backoffice/public/android-chrome-192x192.png
new file mode 100644
index 00000000..125e312f
Binary files /dev/null and b/apps/aurora-backoffice/public/android-chrome-192x192.png differ
diff --git a/apps/aurora-backoffice/public/android-chrome-512x512.png b/apps/aurora-backoffice/public/android-chrome-512x512.png
new file mode 100644
index 00000000..dd7d05c7
Binary files /dev/null and b/apps/aurora-backoffice/public/android-chrome-512x512.png differ
diff --git a/apps/aurora-backoffice/public/apple-touch-icon.png b/apps/aurora-backoffice/public/apple-touch-icon.png
new file mode 100644
index 00000000..1c0ed94f
Binary files /dev/null and b/apps/aurora-backoffice/public/apple-touch-icon.png differ
diff --git a/apps/aurora-backoffice/public/favicon-16x16.png b/apps/aurora-backoffice/public/favicon-16x16.png
new file mode 100644
index 00000000..97b31ed0
Binary files /dev/null and b/apps/aurora-backoffice/public/favicon-16x16.png differ
diff --git a/apps/aurora-backoffice/public/favicon-32x32.png b/apps/aurora-backoffice/public/favicon-32x32.png
new file mode 100644
index 00000000..50097c1b
Binary files /dev/null and b/apps/aurora-backoffice/public/favicon-32x32.png differ
diff --git a/apps/aurora-backoffice/public/favicon.ico b/apps/aurora-backoffice/public/favicon.ico
new file mode 100644
index 00000000..40ee0900
Binary files /dev/null and b/apps/aurora-backoffice/public/favicon.ico differ
diff --git a/apps/aurora-backoffice/public/fonts/Inter-italic.var.woff2 b/apps/aurora-backoffice/public/fonts/Inter-italic.var.woff2
new file mode 100644
index 00000000..b826d5af
Binary files /dev/null and b/apps/aurora-backoffice/public/fonts/Inter-italic.var.woff2 differ
diff --git a/apps/aurora-backoffice/public/fonts/Inter-roman.var.woff2 b/apps/aurora-backoffice/public/fonts/Inter-roman.var.woff2
new file mode 100644
index 00000000..6a256a06
Binary files /dev/null and b/apps/aurora-backoffice/public/fonts/Inter-roman.var.woff2 differ
diff --git a/apps/aurora-backoffice/public/layout/images/helmet-black.svg b/apps/aurora-backoffice/public/layout/images/helmet-black.svg
new file mode 100644
index 00000000..ed7173ef
--- /dev/null
+++ b/apps/aurora-backoffice/public/layout/images/helmet-black.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+<path style="fill:#000000; stroke:none;" d="M275 155C271.212 144.904 269.901 133.526 267.576 123C263.889 106.311 259.46 89.7194 256 73C251.887 79.866 252.617 91.1391 251.831 99C250.042 116.889 248.455 135.034 248.015 153C247.775 162.785 250.328 175.466 247.682 184.892C246.53 188.995 241.435 189.825 238 191.284C229.563 194.866 221.081 199.449 214 205.325C196.505 219.843 186.41 239.076 181.576 261C177.82 278.035 178.249 292.179 190 306C185.409 302.764 181.812 298.865 179 294C176.408 298.327 177.286 303.155 176.715 308C175.109 321.611 177.126 335.387 175.83 349C173.582 372.622 176 396.341 176 420C176 427.399 176.805 434.649 176.985 442C177.124 447.672 176.454 454.573 178.6 459.961C180.203 463.987 184.791 466.598 188 469.25C195.093 475.111 202.136 481.038 209 487.166C222.837 499.52 236.854 511.918 250 525.001C261.055 536.002 272.254 549.021 285 558C279.012 526.218 273.598 494.04 269.282 462C267.609 449.581 265.268 437.331 263.084 425C261.889 418.256 261.268 410.271 258.348 404.015C255.523 397.962 248.069 394.017 243 389.997C231.14 380.592 216.58 371.771 206.278 360.7C202.867 357.035 202.054 351.692 200.873 347C199.024 339.649 197.055 332.297 195 325C212.94 334.449 231.052 342.873 250 350.189C257.647 353.142 270.507 354.953 276.486 360.699C280.531 364.587 280.355 373.769 281.4 379C283.163 387.833 286.277 398.008 286.272 407C286.266 415.825 282.946 424.509 281 433C286.154 436.524 293.463 446.107 300 446.256C306.149 446.397 314.255 436.517 319 433C317.068 424.571 313.734 415.745 313.728 407C313.723 398.156 317.123 388.721 318.586 380C319.501 374.546 319.405 364.802 323.564 360.702C325.689 358.607 329.282 357.838 332 356.808C337.977 354.542 344.037 352.499 350 350.189C368.781 342.914 387.627 335.245 405 325C402.851 332.63 400.909 340.335 398.884 348C397.715 352.427 396.921 357.222 393.722 360.711C383.218 372.165 368.16 381.113 356 390.801C351.257 394.58 344.294 398.357 341.652 404.015C338.708 410.32 338.046 418.203 336.92 425C335.15 435.687 333.158 446.291 331.573 457C326.583 490.712 321.308 524.519 315 558C325.48 550.618 334.925 540.075 344 531C356.908 518.092 370.214 505.394 384 493.424C392.332 486.19 400.518 478.818 409 471.753C412.796 468.591 418.573 465.332 420.973 460.91C423.629 456.017 422.939 448.392 423.004 443C423.123 433.013 424 423.047 424 413C424 386.637 424.661 360.375 424.015 334C423.696 320.983 425.027 306.715 422 294C418.132 298.287 414.775 302.636 410 306C422.544 291.282 421.852 276.956 418 259C410.873 225.776 386.018 195.874 352 188C354.75 173.187 352.111 156.914 351.09 142C349.515 119.014 349.228 95.763 345 73C339.717 81.6498 338.555 95.1186 336.551 105C333.214 121.456 327.333 138.247 326 155C323.974 146.982 327.225 136.118 328.586 128C331.374 111.374 333.474 94.6403 336.247 78C337.195 72.3109 338.321 66.655 339.449 61C339.941 58.5362 341.128 55.6129 340.306 53.1049C338.465 47.4829 328.017 45.1555 323 43.8951C307.243 39.9365 290.627 39.9481 275 44.4275C270.535 45.7073 262.408 47.6973 260.117 52.213C258.797 54.8155 260.056 58.3503 260.65 61C262.06 67.2847 263.028 73.6468 264.08 80C266.728 95.9862 269.056 111.981 271.427 128C272.744 136.892 274.814 146.008 275 155z"/>
+</svg>
diff --git a/apps/aurora-backoffice/public/layout/images/helmet-white.svg b/apps/aurora-backoffice/public/layout/images/helmet-white.svg
new file mode 100644
index 00000000..90ee2580
--- /dev/null
+++ b/apps/aurora-backoffice/public/layout/images/helmet-white.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="yes"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+<path style="fill:#ffffff; stroke:none;" d="M275 155C271.212 144.904 269.901 133.526 267.576 123C263.889 106.311 259.46 89.7194 256 73C251.887 79.866 252.617 91.1391 251.831 99C250.042 116.889 248.455 135.034 248.015 153C247.775 162.785 250.328 175.466 247.682 184.892C246.53 188.995 241.435 189.825 238 191.284C229.563 194.866 221.081 199.449 214 205.325C196.505 219.843 186.41 239.076 181.576 261C177.82 278.035 178.249 292.179 190 306C185.409 302.764 181.812 298.865 179 294C176.408 298.327 177.286 303.155 176.715 308C175.109 321.611 177.126 335.387 175.83 349C173.582 372.622 176 396.341 176 420C176 427.399 176.805 434.649 176.985 442C177.124 447.672 176.454 454.573 178.6 459.961C180.203 463.987 184.791 466.598 188 469.25C195.093 475.111 202.136 481.038 209 487.166C222.837 499.52 236.854 511.918 250 525.001C261.055 536.002 272.254 549.021 285 558C279.012 526.218 273.598 494.04 269.282 462C267.609 449.581 265.268 437.331 263.084 425C261.889 418.256 261.268 410.271 258.348 404.015C255.523 397.962 248.069 394.017 243 389.997C231.14 380.592 216.58 371.771 206.278 360.7C202.867 357.035 202.054 351.692 200.873 347C199.024 339.649 197.055 332.297 195 325C212.94 334.449 231.052 342.873 250 350.189C257.647 353.142 270.507 354.953 276.486 360.699C280.531 364.587 280.355 373.769 281.4 379C283.163 387.833 286.277 398.008 286.272 407C286.266 415.825 282.946 424.509 281 433C286.154 436.524 293.463 446.107 300 446.256C306.149 446.397 314.255 436.517 319 433C317.068 424.571 313.734 415.745 313.728 407C313.723 398.156 317.123 388.721 318.586 380C319.501 374.546 319.405 364.802 323.564 360.702C325.689 358.607 329.282 357.838 332 356.808C337.977 354.542 344.037 352.499 350 350.189C368.781 342.914 387.627 335.245 405 325C402.851 332.63 400.909 340.335 398.884 348C397.715 352.427 396.921 357.222 393.722 360.711C383.218 372.165 368.16 381.113 356 390.801C351.257 394.58 344.294 398.357 341.652 404.015C338.708 410.32 338.046 418.203 336.92 425C335.15 435.687 333.158 446.291 331.573 457C326.583 490.712 321.308 524.519 315 558C325.48 550.618 334.925 540.075 344 531C356.908 518.092 370.214 505.394 384 493.424C392.332 486.19 400.518 478.818 409 471.753C412.796 468.591 418.573 465.332 420.973 460.91C423.629 456.017 422.939 448.392 423.004 443C423.123 433.013 424 423.047 424 413C424 386.637 424.661 360.375 424.015 334C423.696 320.983 425.027 306.715 422 294C418.132 298.287 414.775 302.636 410 306C422.544 291.282 421.852 276.956 418 259C410.873 225.776 386.018 195.874 352 188C354.75 173.187 352.111 156.914 351.09 142C349.515 119.014 349.228 95.763 345 73C339.717 81.6498 338.555 95.1186 336.551 105C333.214 121.456 327.333 138.247 326 155C323.974 146.982 327.225 136.118 328.586 128C331.374 111.374 333.474 94.6403 336.247 78C337.195 72.3109 338.321 66.655 339.449 61C339.941 58.5362 341.128 55.6129 340.306 53.1049C338.465 47.4829 328.017 45.1555 323 43.8951C307.243 39.9365 290.627 39.9481 275 44.4275C270.535 45.7073 262.408 47.6973 260.117 52.213C258.797 54.8155 260.056 58.3503 260.65 61C262.06 67.2847 263.028 73.6468 264.08 80C266.728 95.9862 269.056 111.981 271.427 128C272.744 136.892 274.814 146.008 275 155z"/>
+</svg>
diff --git a/apps/aurora-backoffice/public/site.webmanifest b/apps/aurora-backoffice/public/site.webmanifest
new file mode 100644
index 00000000..0b08af12
--- /dev/null
+++ b/apps/aurora-backoffice/public/site.webmanifest
@@ -0,0 +1,11 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/aurora-backoffice/src/App.vue b/apps/aurora-backoffice/src/App.vue
new file mode 100644
index 00000000..8542f43d
--- /dev/null
+++ b/apps/aurora-backoffice/src/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <ConfirmDialog />
+  <RouterView />
+</template>
diff --git a/apps/aurora-backoffice/src/assets/layout/_content.scss b/apps/aurora-backoffice/src/assets/layout/_content.scss
new file mode 100644
index 00000000..c6a7319a
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_content.scss
@@ -0,0 +1,14 @@
+@use './_variables' as *;
+
+.layout-main-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+  padding: 7rem 2rem 2rem 4rem;
+  transition: margin-left $transitionDuration;
+}
+
+.layout-main {
+  flex: 1 1 auto;
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_main.scss b/apps/aurora-backoffice/src/assets/layout/_main.scss
new file mode 100644
index 00000000..fcd12bf3
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_main.scss
@@ -0,0 +1,38 @@
+@use './_variables' as *;
+
+:root {
+  --surface-ground: var(--p-surface-100);
+  --surface-hover: var(--p-surface-100);
+}
+
+.dark-mode {
+  --surface-ground: var(--p-surface-950) !important;
+  --surface-hover: var(--p-surface-800) !important;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-size: $scale;
+}
+
+body {
+  font-family: 'Inter var', sans-serif;
+  background-color: var(--surface-ground);
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  text-decoration: none;
+}
+
+.layout-wrapper {
+  min-height: 100vh;
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_menu.scss b/apps/aurora-backoffice/src/assets/layout/_menu.scss
new file mode 100644
index 00000000..5bf72c13
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_menu.scss
@@ -0,0 +1,162 @@
+@use './_variables' as *;
+@use './_mixins' as *;
+
+.layout-sidebar {
+  position: fixed;
+  width: 300px;
+  height: calc(100vh - 9rem);
+  z-index: 999;
+  overflow-y: auto;
+  user-select: none;
+  top: 7rem;
+  left: 2rem;
+  transition:
+    transform $transitionDuration,
+    left $transitionDuration;
+  background-color: var(--p-content-background);
+  border-radius: $borderRadius;
+  padding: 0.5rem 1.5rem;
+  box-shadow:
+    0 3px 5px rgba(0, 0, 0, 0.02),
+    0 0 2px rgba(0, 0, 0, 0.05),
+    0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.layout-menu {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  .layout-root-menuitem {
+    > .layout-menuitem-root-text {
+      font-size: 1rem;
+      text-transform: uppercase;
+      margin: 0.75rem 0;
+    }
+
+    > a {
+      display: none;
+    }
+  }
+
+  a {
+    user-select: none;
+
+    &.active-menuitem {
+      > .layout-submenu-toggler {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  li.active-menuitem {
+    > a {
+      .layout-submenu-toggler {
+        transform: rotate(-180deg);
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    a {
+      display: flex;
+      align-items: center;
+      position: relative;
+      outline: 0 none;
+      color: var(--text-color);
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+      border-radius: $borderRadius;
+      transition:
+        background-color $transitionDuration,
+        box-shadow $transitionDuration;
+
+      .layout-menuitem-icon {
+        margin-right: 0.5rem;
+      }
+
+      .layout-submenu-toggler {
+        font-size: 75%;
+        margin-left: auto;
+        transition: transform $transitionDuration;
+      }
+
+      &.active-route {
+        color: var(--p-primary-color);
+      }
+
+      &:hover {
+        background-color: var(--surface-hover);
+      }
+
+      &:focus {
+        @include focused-inset();
+      }
+    }
+
+    ul {
+      overflow: hidden;
+      border-radius: $borderRadius;
+
+      li {
+        a {
+          margin-left: 1rem;
+        }
+
+        li {
+          a {
+            margin-left: 2rem;
+          }
+
+          li {
+            a {
+              margin-left: 2.5rem;
+            }
+
+            li {
+              a {
+                margin-left: 3rem;
+              }
+
+              li {
+                a {
+                  margin-left: 3.5rem;
+                }
+
+                li {
+                  a {
+                    margin-left: 4rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.layout-submenu-enter-from,
+.layout-submenu-leave-to {
+  max-height: 0;
+}
+
+.layout-submenu-enter-to,
+.layout-submenu-leave-from {
+  max-height: 1000px;
+}
+
+.layout-submenu-leave-active {
+  overflow: hidden;
+  transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.layout-submenu-enter-active {
+  overflow: hidden;
+  transition: max-height 1s ease-in-out;
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_mixins.scss b/apps/aurora-backoffice/src/assets/layout/_mixins.scss
new file mode 100644
index 00000000..65e74e5f
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_mixins.scss
@@ -0,0 +1,13 @@
+@mixin focused() {
+  outline: 0 none;
+  outline-offset: 0;
+  transition: box-shadow 0.2s;
+  box-shadow: var(--focus-ring);
+}
+
+@mixin focused-inset() {
+  outline: 0 none;
+  outline-offset: 0;
+  transition: box-shadow 0.2s;
+  box-shadow: inset var(--focus-ring);
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_responsive.scss b/apps/aurora-backoffice/src/assets/layout/_responsive.scss
new file mode 100644
index 00000000..349cb716
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_responsive.scss
@@ -0,0 +1,61 @@
+@use './_variables' as *;
+
+@media screen and (min-width: 1960px) {
+  .layout-main,
+  .landing-wrapper {
+    width: 1504px;
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .layout-wrapper {
+    &.layout-static {
+      .layout-main-container {
+        margin-left: 300px;
+      }
+
+      &.layout-static-inactive {
+        .layout-sidebar {
+          transform: translateX(-100%);
+          left: 0;
+        }
+
+        .layout-main-container {
+          margin-left: 0;
+          padding-left: 2rem;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 991px) {
+  .layout-wrapper {
+    .layout-main-container {
+      margin-left: 0;
+      padding-left: 2rem;
+    }
+
+    .layout-sidebar {
+      transform: translateX(-100%);
+      left: 0;
+      top: 0;
+      height: 100vh;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &.layout-mobile-active {
+      .layout-sidebar {
+        transform: translateX(0);
+      }
+
+      .layout-mask {
+        display: block;
+        animation: fadein $transitionDuration;
+      }
+    }
+  }
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_topbar.scss b/apps/aurora-backoffice/src/assets/layout/_topbar.scss
new file mode 100644
index 00000000..bfd075c0
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_topbar.scss
@@ -0,0 +1,106 @@
+@use './_variables' as *;
+@use './_mixins' as *;
+
+.layout-topbar {
+  position: fixed;
+  height: 5rem;
+  z-index: 997;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 2rem;
+  background-color: var(--p-content-background);
+  transition: left $transitionDuration;
+  display: flex;
+  align-items: center;
+  box-shadow:
+    0 3px 5px rgba(0, 0, 0, 0.02),
+    0 0 2px rgba(0, 0, 0, 0.05),
+    0 1px 4px rgba(0, 0, 0, 0.08);
+
+  .layout-topbar-logo {
+    display: flex;
+    align-items: center;
+    color: var(--text-color);
+    font-size: 1.5rem;
+    font-weight: 500;
+    width: 120px;
+    border-radius: 12px;
+
+    img {
+      height: 2.5rem;
+      margin-right: 0.5rem;
+    }
+
+    &:focus {
+      @include focused();
+    }
+  }
+
+  .layout-topbar-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    color: var(--text-color);
+    background-color: transparent;
+    border-radius: 50%;
+    border: none;
+    width: 3rem;
+    height: 3rem;
+    cursor: pointer;
+    transition: background-color $transitionDuration;
+
+    &:hover {
+      background-color: var(--surface-hover);
+    }
+
+    &:focus {
+      @include focused();
+    }
+
+    i {
+      font-size: 1.5rem;
+    }
+
+    span {
+      font-size: 1rem;
+      display: none;
+    }
+
+    &.left {
+      order: 0;
+    }
+
+    &.right {
+      margin-left: auto;
+      margin-right: 0;
+      order: 2;
+    }
+  }
+}
+
+@media (max-width: 991px) {
+  .layout-topbar {
+    justify-content: space-between;
+
+    .layout-topbar-logo {
+      width: auto;
+      order: 1;
+    }
+  }
+
+  .layout-topbar-button {
+    &.left {
+      margin-right: auto;
+      margin-left: 0;
+      order: 0;
+    }
+
+    &.right {
+      margin-left: auto;
+      margin-right: 0;
+      order: 2;
+    }
+  }
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_typography.scss b/apps/aurora-backoffice/src/assets/layout/_typography.scss
new file mode 100644
index 00000000..d45da982
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_typography.scss
@@ -0,0 +1,86 @@
+@use './_variables' as *;
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  src: url('/fonts/Inter-roman.var.woff2?v=3.19') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  src: url('/fonts/Inter-italic.var.woff2?v=3.19') format('woff2');
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1.5rem 0 1rem 0;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+h1 {
+  font-size: 2.5rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.75rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+mark {
+  background: #fff8e1;
+  padding: 0.25rem 0.4rem;
+  border-radius: $borderRadius;
+  font-family: monospace;
+}
+
+blockquote {
+  margin: 1rem 0;
+  padding: 0 2rem;
+  border-left: 4px solid #90a4ae;
+}
+
+hr {
+  border-top: solid var(--text-color);
+  border-width: 1px 0 0 0;
+  margin: 1rem 0;
+}
+
+p {
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+  color: var(--p-text-color);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/apps/aurora-backoffice/src/assets/layout/_variables.scss b/apps/aurora-backoffice/src/assets/layout/_variables.scss
new file mode 100644
index 00000000..8f061b59
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/_variables.scss
@@ -0,0 +1,3 @@
+$scale: 14px; /* main font size */
+$borderRadius: 12px; /* border radius of layout element e.g. card, sidebar */
+$transitionDuration: 0.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
diff --git a/apps/aurora-backoffice/src/assets/layout/layout.scss b/apps/aurora-backoffice/src/assets/layout/layout.scss
new file mode 100644
index 00000000..34a3f698
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/layout/layout.scss
@@ -0,0 +1,6 @@
+@use './_main';
+@use './_topbar';
+@use './_menu';
+@use './_content';
+@use './_responsive';
+@use './_typography';
diff --git a/apps/aurora-backoffice/src/assets/preset.ts b/apps/aurora-backoffice/src/assets/preset.ts
new file mode 100644
index 00000000..136ded1a
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/preset.ts
@@ -0,0 +1,22 @@
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+
+export const AuraPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{amber.50}',
+      100: '{amber.100}',
+      200: '{amber.200}',
+      300: '{amber.300}',
+      400: '{amber.400}',
+      500: '{amber.500}',
+      600: '{amber.600}',
+      700: '{amber.700}',
+      800: '{amber.800}',
+      900: '{amber.900}',
+      950: '{amber.950}',
+    },
+  },
+});
+
+export default AuraPreset;
diff --git a/apps/aurora-backoffice/src/assets/styles.scss b/apps/aurora-backoffice/src/assets/styles.scss
new file mode 100644
index 00000000..ef0f76fc
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/styles.scss
@@ -0,0 +1,4 @@
+@use '@/assets/layout/layout.scss';
+@use 'primeicons/primeicons.css';
+
+@use 'tailwind.css';
diff --git a/apps/aurora-backoffice/src/assets/tailwind.css b/apps/aurora-backoffice/src/assets/tailwind.css
new file mode 100644
index 00000000..c1e46751
--- /dev/null
+++ b/apps/aurora-backoffice/src/assets/tailwind.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
diff --git a/apps/aurora-backoffice/src/components/IconSelector.vue b/apps/aurora-backoffice/src/components/IconSelector.vue
new file mode 100644
index 00000000..a311a459
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/IconSelector.vue
@@ -0,0 +1,60 @@
+<template>
+  <Select
+    id="icon-selector"
+    class="w-full"
+    filter
+    filter-match-mode="contains"
+    :model-value="modelValue"
+    option-label="name"
+    option-value="value"
+    :options="options"
+    placeholder="Icon (optional)"
+    show-clear
+    :virtual-scroller-options="{ itemSize: 40 }"
+    @update:model-value="(v) => $emit('update:modelValue', v)"
+  >
+    <template #value="slotProps">
+      <div v-if="slotProps.value" class="flex items-center gap-2">
+        <i :class="slotProps.value" />
+        {{ getNameFromValue(slotProps.value) }}
+      </div>
+      <div v-else>{{ slotProps.placeholder }}</div>
+    </template>
+    <template #option="slotProps">
+      <div v-if="slotProps.option.value" class="flex items-center gap-2">
+        <i :class="slotProps.option.value" />
+        {{ slotProps.option.name }}
+      </div>
+    </template>
+  </Select>
+</template>
+
+<script setup lang="ts">
+import { PrimeIcons } from '@primevue/core/api';
+import { computed } from 'vue';
+
+defineProps<{
+  modelValue?: string;
+}>();
+
+defineEmits<{
+  'update:modelValue': [icon: string];
+}>();
+
+const getNameFromValue = (value: string) => {
+  const nameParts: string[] = value.split(' ')[1].split('-');
+  nameParts.splice(0, 1);
+  let name = nameParts.join(' ');
+  name = name.charAt(0).toUpperCase() + name.slice(1);
+  return name;
+};
+
+const options = computed(() => {
+  return Object.values(PrimeIcons).map((value) => {
+    const name = getNameFromValue(value as string);
+    return { value, name };
+  });
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/ArtificialBeatDialog.vue b/apps/aurora-backoffice/src/components/audio/ArtificialBeatDialog.vue
new file mode 100644
index 00000000..8128a482
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/ArtificialBeatDialog.vue
@@ -0,0 +1,138 @@
+<template>
+  <Button @click="visible = true"> Artificial Beat Generator </Button>
+
+  <Dialog
+    v-model:visible="visible"
+    class="w-xs sm:w-sm"
+    dismissable-mask
+    header="Artifical Beat Generator"
+    modal
+    @after-hide="taps = []"
+    @show="onDialogShow"
+  >
+    <div class="flex flex-col gap-3 justify-center">
+      <Message
+        v-if="infoMessageVisible"
+        class="text-wrap"
+        closable
+        icon="pi pi-info-circle"
+        severity="info"
+        @close="onHelpDialogClose"
+      >
+        With the Artificial Beat Generator, you can set a custom BPM that Aurora will use. This BPM
+        will override all other beat inputs, like manual definitions or the real time beat detector.
+      </Message>
+      <div v-if="!currentBpmLoading && currentBpm != null">Current BPM: {{ currentBpm }}</div>
+      <div v-else-if="!currentBpmLoading">Artificial Beat Generator is inactive.</div>
+      <div v-else>
+        <Spinner />
+      </div>
+      <div class="flex flex-col gap-1 items-center justify-center">
+        <div
+          class="m-2 p-2 min-h-[8rem] w-full border-1 flex flex-col justify-center items-center select-none"
+          @click="onTap"
+        >
+          <span v-if="getBpm() != null">{{ getBpm() }} BPM</span>
+          <span v-else>Tap to set BPM</span>
+          <span class="inline-block text-wrap text-center">
+            {{ renderTaps() }}
+          </span>
+        </div>
+        <div class="flex flex-row gap-1 justify-center">
+          <Button label="Tap" @click="onTap" />
+          <Button label="Reset" severity="secondary" @click="taps = []" />
+        </div>
+      </div>
+      <Button
+        :disabled="taps.length < 4"
+        label="Set BPM"
+        :loading="savingBpmLoading"
+        severity="success"
+        @click="setArtificialBeats"
+      />
+      <Button
+        label="Disable artificial beats"
+        :loading="stopBpmLoading"
+        severity="danger"
+        @click="stopArtificialBeats"
+      />
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  getArtificialBeatGenerator,
+  startArtificialBeatGenerator,
+  stopArtificialBeatGenerator,
+} from '@gewis/aurora-api-client';
+import { splitArrayIntoChunks } from '@/utils/arrayUtils';
+
+const ARTIFICIAL_BEAT_DIALOG_HELP_CLOSED_SETTING = 'artificial-beat-dialog-help-closed';
+
+const visible = ref<boolean>(false);
+const infoMessageVisible = computed<boolean>(() => {
+  return localStorage.getItem(ARTIFICIAL_BEAT_DIALOG_HELP_CLOSED_SETTING) != 'true';
+});
+const taps = ref<Date[]>([]);
+const currentBpm = ref<number | null>(null);
+const currentBpmLoading = ref<boolean>(false);
+
+const savingBpmLoading = ref<boolean>(false);
+const stopBpmLoading = ref<boolean>(false);
+
+const renderTaps = () => {
+  const formattedTaps = taps.value.map(() => '*');
+  const chunks = splitArrayIntoChunks(formattedTaps, 4);
+  return chunks.map((c) => c.join('')).join(' ');
+};
+
+const fetchCurrentBpm = async () => {
+  await getArtificialBeatGenerator()
+    .then((beats) => {
+      currentBpm.value = beats.data!.bpm;
+    })
+    .finally(() => (currentBpmLoading.value = false));
+};
+
+const getBpm = () => {
+  if (taps.value.length < 4) return null;
+  const first = taps.value[0];
+  const last = taps.value[taps.value.length - 1];
+  const msDiff = last.getTime() - first.getTime();
+  const bpm = (60000 * (taps.value.length - 1)) / msDiff;
+  return Math.round(bpm);
+};
+
+const onDialogShow = async () => {
+  currentBpmLoading.value = true;
+  await fetchCurrentBpm();
+};
+
+const setArtificialBeats = async () => {
+  const bpm = getBpm();
+  if (bpm == null) return;
+  savingBpmLoading.value = true;
+  await startArtificialBeatGenerator({ body: { bpm: bpm } })
+    .then(() => (visible.value = false))
+    .finally(() => (savingBpmLoading.value = false));
+};
+
+const stopArtificialBeats = async () => {
+  stopBpmLoading.value = true;
+  await stopArtificialBeatGenerator()
+    .then(() => (visible.value = false))
+    .finally(() => (stopBpmLoading.value = false));
+};
+
+const onTap = () => {
+  taps.value.push(new Date());
+};
+
+const onHelpDialogClose = () => {
+  localStorage.setItem(ARTIFICIAL_BEAT_DIALOG_HELP_CLOSED_SETTING, 'true');
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/BeatGenerators.vue b/apps/aurora-backoffice/src/components/audio/BeatGenerators.vue
new file mode 100644
index 00000000..e24495f8
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/BeatGenerators.vue
@@ -0,0 +1,65 @@
+<template>
+  <AppContainer icon="pi pi-database" title="Active Beat Generators">
+    <template #header>
+      <div class="flex flex-row gap-5 items-center">
+        <ArtificialBeatDialog />
+        <BeatVisualizer />
+      </div>
+    </template>
+    <div class="flex flex-col gap-3">
+      <Message icon="pi pi-info-circle" severity="info">
+        The table below shows all beat generators that are currently active. The one with the arrow
+        is the generator with precedence: this generator is authoritative and determines the beats
+        through Aurora. It is not possible to change the beat generators here; this window is purely
+        for debugging purposes.
+      </Message>
+      <DataTable
+        v-if="store.generators.length > 0"
+        data-key="id"
+        :loading="loading"
+        :selection="selected"
+        :value="store.generators"
+      >
+        <Column class="w-1">
+          <template #body="slotProps">
+            <i v-if="slotProps.data.hasPrecedence" class="pi pi-arrow-right"></i>
+          </template>
+        </Column>
+        <Column field="name"></Column>
+        <Column>
+          <template #body="slotProps">
+            <BeatVisualizer :beat="slotProps.data.beat" />
+          </template>
+        </Column>
+      </DataTable>
+      <div v-else class="flex justify-center items-center italic mt-8">
+        No beat generators are active.
+      </div>
+    </div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useMusicBeatStore } from '@/stores/socket/music-beat.store';
+import BeatVisualizer from '@/components/audio/BeatVisualizer.vue';
+import ArtificialBeatDialog from '@/components/audio/ArtificialBeatDialog.vue';
+
+const loading = ref<boolean>(true);
+
+const store = useMusicBeatStore();
+void store.initBeatGenerators().then(() => {
+  loading.value = false;
+});
+
+const selected = computed((): string[] => {
+  return store.generators.filter((g) => g.hasPrecedence).map((g) => g.id);
+});
+
+onUnmounted(() => {
+  void store.destroyBeatGenerators();
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/BeatVisualizer.vue b/apps/aurora-backoffice/src/components/audio/BeatVisualizer.vue
new file mode 100644
index 00000000..2a37dee8
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/BeatVisualizer.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-row gap-1 beat-visualizer">
+    <i :class="beat ? 'pi pi-circle' : 'pi pi-circle-fill'" />
+    <i :class="beat ? 'pi pi-circle-fill' : 'pi pi-circle'" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useMusicBeatStore } from '@/stores/socket/music-beat.store';
+
+const { beat: propsBeat = null } = defineProps<{
+  beat?: boolean | null;
+}>();
+
+const store = useMusicBeatStore();
+
+const beat = computed((): boolean => {
+  if (propsBeat != undefined) return propsBeat;
+  return store.beat;
+});
+
+onMounted(() => {
+  if (propsBeat == undefined) {
+    store.initBeat();
+  }
+});
+
+onUnmounted(() => {
+  if (propsBeat == undefined) {
+    store.destroyBeat();
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/SpotifyCallbackDialog.vue b/apps/aurora-backoffice/src/components/audio/SpotifyCallbackDialog.vue
new file mode 100644
index 00000000..2a33f10d
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/SpotifyCallbackDialog.vue
@@ -0,0 +1,61 @@
+<template>
+  <Dialog class="w-96" :closable="false" header="Processing login..." modal :visible="open">
+    <template #default>
+      <div class="flex flex-col items-center justify-center my-2">
+        <ProgressSpinner v-if="loading" />
+      </div>
+      <Message v-if="!loading && errorMessage" severity="error">
+        Login failed: {{ errorMessage }}
+      </Message>
+      <Message v-else-if="!loading" severity="success">
+        Successfully logged in user {{ store.currentSpotifyProfile?.display_name }}
+      </Message>
+    </template>
+    <template #footer>
+      <Button :disabled="loading" label="Close" @click="handleClose()" />
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useSpotifyStore } from '@/stores/spotify.store';
+
+const store = useSpotifyStore();
+const route = useRoute();
+const router = useRouter();
+
+const open = ref<boolean>(false);
+const loading = ref<boolean>(true);
+const errorMessage = ref<string | undefined>();
+
+const handleClose = () => {
+  if (loading.value) return;
+
+  open.value = false;
+};
+
+onMounted(async () => {
+  if (route.path === '/music/spotify/callback') {
+    open.value = true;
+    const state = Array.isArray(route.query.state)
+      ? route.query.state.join(',')
+      : route.query.state;
+    const code = Array.isArray(route.query.code) ? route.query.code.join(',') : route.query.code;
+    const error = Array.isArray(route.query.error)
+      ? route.query.error.join(',')
+      : route.query.error;
+    const res = await store.loginCallback(state ?? '', code ?? undefined, error ?? undefined);
+    if (res.success) {
+      void store.init();
+    } else {
+      errorMessage.value = res.error;
+    }
+    loading.value = false;
+    await router.replace('/music');
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/SpotifyCurrentlyPlaying.vue b/apps/aurora-backoffice/src/components/audio/SpotifyCurrentlyPlaying.vue
new file mode 100644
index 00000000..100301c3
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/SpotifyCurrentlyPlaying.vue
@@ -0,0 +1,35 @@
+<template>
+  <AppContainer icon="pi-headphones" title="Currently playing">
+    <div v-if="store.currentlyPlaying != null" class="flex flex-row items-center gap-4">
+      <div class="w-32">
+        <img
+          :alt="store.currentlyPlaying.cover"
+          :src="store.currentlyPlaying.cover"
+          :style="{ width: '100%', borderRadius: '5px' }"
+        />
+      </div>
+      <div class="flex flex-col gap-1 justify-content-center">
+        <span class="text-xl">{{ store.currentlyPlaying?.title }}</span>
+        <span class="text-lg">{{ store.currentlyPlaying?.artists.join(', ') }}</span>
+      </div>
+    </div>
+    <div v-else>
+      <span class="font-italic">Nothing playing on Spotify at the moment</span>
+    </div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted } from 'vue';
+import { useCurrentlyPlayingStore } from '@/stores/socket/currently-playing.store';
+import AppContainer from '@/layout/AppContainer.vue';
+
+const store = useCurrentlyPlayingStore();
+void store.init();
+
+onUnmounted(() => {
+  store.destroy();
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/SpotifyUserDeleteButton.vue b/apps/aurora-backoffice/src/components/audio/SpotifyUserDeleteButton.vue
new file mode 100644
index 00000000..221c3dd0
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/SpotifyUserDeleteButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <Button icon="pi pi-times" severity="danger" @click="confirmRef?.confirmDialog" />
+  <ConfirmWrapper
+    ref="confirmRef"
+    accept-label="Delete"
+    delete
+    :loading="loading"
+    :message="confirmMessage"
+    :on-accept="
+      () => {
+        loading = true;
+        store.deleteSpotifyUser(user.id).finally(() => {
+          loading = false;
+        });
+      }
+    "
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { SpotifyUserResponse } from '@gewis/aurora-api-client';
+import { useSpotifyStore } from '@/stores/spotify.store';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+
+const store = useSpotifyStore();
+
+const props = defineProps<{
+  user: SpotifyUserResponse;
+}>();
+
+const confirmRef = ref();
+const loading = ref<boolean>(false);
+const confirmMessage = computed<string>(() => {
+  return `Are you sure you want to delete Spotify user "${props.user.name}"?`;
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audio/SpotifyUserSwitchButton.vue b/apps/aurora-backoffice/src/components/audio/SpotifyUserSwitchButton.vue
new file mode 100644
index 00000000..c84cda13
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audio/SpotifyUserSwitchButton.vue
@@ -0,0 +1,31 @@
+<template>
+  <Button
+    :disabled="user.active || loading"
+    icon="pi pi-user-plus"
+    :loading="loading"
+    :title="user.active ? 'User already active' : 'Make user active'"
+    @click="handleClick()"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { SpotifyUserResponse } from '@gewis/aurora-api-client';
+import { useSpotifyStore } from '@/stores/spotify.store';
+
+const store = useSpotifyStore();
+
+const props = defineProps<{
+  user: SpotifyUserResponse;
+}>();
+
+const loading = ref<boolean>(false);
+
+const handleClick = async () => {
+  loading.value = true;
+  await store.makeUserActive(props.user);
+  loading.value = false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/audit/AuditBlock.vue b/apps/aurora-backoffice/src/components/audit/AuditBlock.vue
new file mode 100644
index 00000000..950f3333
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/audit/AuditBlock.vue
@@ -0,0 +1,42 @@
+<template>
+  <AppContainer icon="pi-book" title="Logs">
+    <div v-if="store.dashboardEntries.length > 0">
+      <DataTable
+        class="mb-3"
+        data-key="id"
+        :loading="store.loading"
+        :value="store.dashboardEntries"
+      >
+        <Column field="createdAt" header="Timestamp">
+          <template #body="slotProps">
+            {{ new Date(slotProps.data.createdAt).toLocaleString() }}
+          </template>
+        </Column>
+        <Column field="userName" header="Name" />
+        <Column field="action" header="Action" />
+      </DataTable>
+      <RouterLink to="/audit"> More recent activity </RouterLink>
+    </div>
+    <div v-else>Could not load audit logs.</div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { useAuditStore } from '@/stores/audit.store';
+import AppContainer from '@/layout/AppContainer.vue';
+const store = useAuditStore();
+void store.setSkipTake(0, 5);
+</script>
+
+<style lang="scss">
+@use '@/assets/layout/layout.scss';
+
+th {
+  padding-top: 0 !important;
+  @extend h6;
+}
+
+.p-datatable-column-title {
+  font-weight: 500 !important;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/auth/AuthGuard.vue b/apps/aurora-backoffice/src/components/auth/AuthGuard.vue
new file mode 100644
index 00000000..9baa1f5e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/auth/AuthGuard.vue
@@ -0,0 +1,22 @@
+<template>
+  <template v-if="overlap">
+    <slot />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type ISecurityGroups, type ISecuritySections } from '@gewis/aurora-api-client';
+import { useAuthStore } from '@/stores/auth.store';
+
+const props = defineProps<{
+  group: keyof ISecurityGroups;
+  section: keyof ISecuritySections;
+}>();
+
+const authStore = useAuthStore();
+
+const overlap = computed(() => {
+  return authStore.isInSecurityGroup(props.group, props.section);
+});
+</script>
diff --git a/apps/aurora-backoffice/src/components/auth/DevGuard.vue b/apps/aurora-backoffice/src/components/auth/DevGuard.vue
new file mode 100644
index 00000000..78b1047c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/auth/DevGuard.vue
@@ -0,0 +1,9 @@
+<template>
+  <template v-if="development">
+    <slot />
+  </template>
+</template>
+
+<script setup lang="ts">
+const development = import.meta.env.VITE_NODE_ENV === 'development';
+</script>
diff --git a/apps/aurora-backoffice/src/components/auth/DevSettings.vue b/apps/aurora-backoffice/src/components/auth/DevSettings.vue
new file mode 100644
index 00000000..4b3bc339
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/auth/DevSettings.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="max-w-lg">
+    <InputGroup>
+      <Button icon="pi pi-check" :loading="loading" @click="updateLogin" />
+      <InputText v-model="userName" placeholder="Name" />
+      <InputText v-model="userId" placeholder="ID" />
+      <MultiSelect v-model="selectedRoles" :options="availableRoles" />
+    </InputGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputGroup from 'primevue/inputgroup';
+import { ref } from 'vue';
+import { SecurityGroup } from '@gewis/aurora-api-client';
+import { useAuthStore } from '@/stores/auth.store';
+
+const authStore = useAuthStore();
+
+const selectedRoles = ref(authStore.getRoles);
+const userName = ref('dev');
+const userId = ref('dev');
+const loading = ref(false);
+
+const availableRoles = ref(Object.values(SecurityGroup));
+
+async function updateLogin() {
+  loading.value = true;
+  await authStore
+    .MockLogin({
+      id: userId.value,
+      name: userName.value,
+      roles: selectedRoles.value,
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+</script>
diff --git a/apps/aurora-backoffice/src/components/handlers/AudioHandlerBlock.vue b/apps/aurora-backoffice/src/components/handlers/AudioHandlerBlock.vue
new file mode 100644
index 00000000..698a1c71
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/AudioHandlerBlock.vue
@@ -0,0 +1,44 @@
+<template>
+  <AppContainer icon="pi-volume-up" title="Audio">
+    <div
+      v-if="handlersStore.fetchAudioHandlers.length > 0"
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 xxl:grid-cols-3 gap-5"
+    >
+      <div v-for="audio in subscriberStore.audios.value" :key="audio.id">
+        <SubscriberItemContent
+          :current-handler="
+            handlersStore.fetchAudioHandlers.find(
+              (h) => !!h.entities.find((e) => e.id === audio.id),
+            )
+          "
+          :disabled="!authStore.isInSecurityGroup('handler', 'privileged')"
+          :loading="handlersStore.isGettingAudio || handlersStore.isSettingAudio"
+          :possible-handlers="handlersStore.audioHandlers"
+          :status="statusStore.audioStatus.get(audio.id)"
+          :subscriber="audio"
+          @change="
+            (newHandler: string | null) => handlersStore.setAudioHandler(audio.id, newHandler)
+          "
+        />
+      </div>
+    </div>
+    <div v-else>Could not load audio handlers.</div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import SubscriberItemContent from '@/components/handlers/SubscriberItemContent.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useStatusStore } from '@/stores/status.store';
+
+const authStore = useAuthStore();
+const subscriberStore = storeToRefs(useSubscriberStore());
+const handlersStore = useHandlersStore();
+const statusStore = useStatusStore();
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/apps/aurora-backoffice/src/components/handlers/LightHandlerBlock.vue b/apps/aurora-backoffice/src/components/handlers/LightHandlerBlock.vue
new file mode 100644
index 00000000..ce84d02a
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/LightHandlerBlock.vue
@@ -0,0 +1,27 @@
+<template>
+  <AppContainer icon="pi-lightbulb" title="Lights">
+    <div v-if="handlersStore.fetchLightsHandlers.length > 0">
+      <div v-for="controller in controllers" :key="controller.id">
+        <LightsControllerItemComponent :controller="controller" />
+      </div>
+    </div>
+    <div v-else>Could not load lights handlers.</div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import LightsControllerItemComponent from '@/components/handlers/LightsControllerItemComponent.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useHandlersStore } from '@/stores/handlers.store';
+
+const handlersStore = useHandlersStore();
+const subscriberStore = storeToRefs(useSubscriberStore());
+const controllers = computed(() =>
+  subscriberStore.lightsGroups.value
+    .map((g) => g.controller)
+    .filter((c1, index, all) => index === all.findIndex((c2) => c1.id === c2.id)),
+);
+</script>
diff --git a/apps/aurora-backoffice/src/components/handlers/LightsControllerItemComponent.vue b/apps/aurora-backoffice/src/components/handlers/LightsControllerItemComponent.vue
new file mode 100644
index 00000000..f085c621
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/LightsControllerItemComponent.vue
@@ -0,0 +1,62 @@
+<template>
+  <AppBox>
+    <div class="flex max-w-full w-full">
+      <h6 class="mb-4">
+        {{ controller.name }}
+      </h6>
+      <StatusIcon
+        class="ml-2"
+        :status="statusStore.lightControllerStatus.get(controller.id)"
+        :subscriber="controller"
+      />
+    </div>
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 xxl:grid-cols-3 gap-5"
+    >
+      <div v-for="group in lightsGroups" :key="group.id">
+        <div class="mb-2">
+          <h6 class="mb-0">
+            {{ group.name }}
+          </h6>
+        </div>
+        <SubscriberHandlerChangeSelect
+          :current-handler="
+            handlersStore.lightsHandlers.find((h) => !!h.entities.find((e) => e.id === group.id))
+          "
+          :disabled="!authStore.isInSecurityGroup('handler', 'privileged')"
+          :loading="handlersStore.gettingLights || handlersStore.settingLights"
+          :possible-handlers="handlersStore.lightsHandlers"
+          @change="
+            (newHandler: string | null) => handlersStore.setLightsHandler(group.id, newHandler)
+          "
+        />
+      </div>
+    </div>
+  </AppBox>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import type { LightsControllerResponse } from '@gewis/aurora-api-client';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import SubscriberHandlerChangeSelect from '@/components/handlers/SubscriberHandlerChangeSelect.vue';
+import StatusIcon from '@/components/handlers/StatusIcon.vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useStatusStore } from '@/stores/status.store';
+import AppBox from '@/layout/AppBox.vue';
+
+const props = defineProps<{
+  controller: LightsControllerResponse;
+}>();
+
+const subscriberStore = storeToRefs(useSubscriberStore());
+const lightsGroups = subscriberStore.lightsGroups.value.filter(
+  (g) => g.controller.id === props.controller.id,
+);
+const handlersStore = useHandlersStore();
+const authStore = useAuthStore();
+const statusStore = useStatusStore();
+</script>
+
+<style lang="scss"></style>
diff --git a/apps/aurora-backoffice/src/components/handlers/ScreenHandlerBlock.vue b/apps/aurora-backoffice/src/components/handlers/ScreenHandlerBlock.vue
new file mode 100644
index 00000000..2f00902e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/ScreenHandlerBlock.vue
@@ -0,0 +1,42 @@
+<template>
+  <AppContainer icon="pi-desktop" title="Screens">
+    <div
+      v-if="handlersStore.fetchScreenHandlers.length > 0"
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-2 xxl:grid-cols-3 gap-5"
+    >
+      <div v-for="screen in subscriberStore.screens.value" :key="screen.id">
+        <SubscriberItemContent
+          :current-handler="
+            handlersStore.screenHandlers.find((h) => !!h.entities.find((e) => e.id === screen.id))
+          "
+          :disabled="!authStore.isInSecurityGroup('handler', 'privileged')"
+          :loading="handlersStore.gettingScreens || handlersStore.settingScreens"
+          :possible-handlers="handlersStore.screenHandlers"
+          :status="statusStore.screenStatus.get(screen.id)"
+          :subscriber="screen"
+          @change="
+            (newHandler: string | null) => handlersStore.setScreenHandler(screen.id, newHandler)
+          "
+        />
+      </div>
+    </div>
+    <div v-else>Could not load screen handlers.</div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import SubscriberItemContent from '@/components/handlers/SubscriberItemContent.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useStatusStore } from '@/stores/status.store';
+
+const subscriberStore = storeToRefs(useSubscriberStore());
+const handlersStore = useHandlersStore();
+const authStore = useAuthStore();
+const statusStore = useStatusStore();
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/apps/aurora-backoffice/src/components/handlers/StatusIcon.vue b/apps/aurora-backoffice/src/components/handlers/StatusIcon.vue
new file mode 100644
index 00000000..3da3aec2
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/StatusIcon.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="relative text-sm">
+    <i
+      :class="['pi cursor-pointer', statusIcon]"
+      @mouseenter="showTooltip = true"
+      @mouseleave="showTooltip = false"
+    />
+    <div
+      v-if="showTooltip"
+      class="tooltip absolute left-full top-0 ml-2 whitespace-nowrap rounded px-2 py-1 z-10"
+    >
+      <div v-if="connected && status">
+        <div>{{ timeStatus }}</div>
+        <div>Latency: {{ latency }}</div>
+        <div>Uptime: {{ uptime }}</div>
+      </div>
+      <div v-else>
+        {{ statusText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type ComputedRef, ref } from 'vue';
+import type {
+  AudioResponse,
+  LightsControllerResponse,
+  PartialRecordSocketioNamespacesString,
+  ScreenResponse,
+} from '@gewis/aurora-api-client';
+import type { Status } from '@/stores/status.store';
+
+const props = defineProps<{
+  subscriber: AudioResponse | ScreenResponse | LightsControllerResponse;
+  status: Status | undefined;
+}>();
+
+const showTooltip = ref(false);
+const connected: ComputedRef<boolean> = computed(() => {
+  const socketIds = props.subscriber.socketIds as PartialRecordSocketioNamespacesString;
+  return Object.entries(socketIds ?? {}).length > 0;
+});
+
+const timeDrift: ComputedRef<number> = computed(() => {
+  const { coreTimestamp, systemTimestamp } = props.status ?? {};
+  if (!coreTimestamp || !systemTimestamp) return 0;
+  return Math.round((coreTimestamp - systemTimestamp) / 1000);
+});
+
+const isSynced: ComputedRef<boolean> = computed(() => {
+  const latency = props.status?.latencyMilliseconds ?? Infinity;
+  return timeDrift.value === 0 && latency < 100;
+});
+
+const timeStatus: ComputedRef<string> = computed(() => {
+  const systemTimestamp = props.status?.systemTimestamp;
+  if (!systemTimestamp) return 'N/A';
+
+  const systemTime = new Date(systemTimestamp).toLocaleTimeString();
+  const drift = timeDrift.value;
+
+  if (drift === 0) {
+    return `${systemTime} (synchronized)`;
+  }
+
+  const direction = drift > 0 ? 'behind' : 'ahead';
+  return `${systemTime} (${Math.abs(drift)}s ${direction})`;
+});
+
+const latency: ComputedRef<string> = computed(() =>
+  props.status?.latencyMilliseconds != null ? `${props.status.latencyMilliseconds}ms` : 'N/A',
+);
+
+const uptime: ComputedRef<string> = computed(() =>
+  props.status?.uptimeSeconds != null ? formatDuration(props.status.uptimeSeconds) : 'N/A',
+);
+
+const statusIcon: ComputedRef<string[]> = computed(() => {
+  if (!connected.value) return ['pi-sort-alt-slash', 'text-gray-500'];
+  if (!props.status || isSynced.value) {
+    return ['pi-sort-alt', 'text-green-300'];
+  }
+  return ['pi-exclamation-triangle', 'text-yellow-300'];
+});
+
+const statusText: ComputedRef<string> = computed(() => {
+  if (!connected.value) return 'disconnected';
+  if (!props.status) return 'status unavailable';
+  return 'connected';
+});
+
+function formatDuration(totalSeconds: number): string {
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const parts = [];
+  if (days) parts.push(`${days}d`);
+  if (hours) parts.push(`${hours}h`);
+  if (minutes) parts.push(`${minutes}m`);
+  if (seconds || parts.length === 0) parts.push(`${seconds}s`);
+
+  return parts.join(' ');
+}
+</script>
+
+<style lang="scss">
+.tooltip {
+  background-color: var(--surface-hover);
+  color: var(--text-on-surface);
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/handlers/SubscriberHandlerChangeSelect.vue b/apps/aurora-backoffice/src/components/handlers/SubscriberHandlerChangeSelect.vue
new file mode 100644
index 00000000..d70490ce
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/SubscriberHandlerChangeSelect.vue
@@ -0,0 +1,35 @@
+<template>
+  <Select
+    class="overflow-hidden text-overflow-ellipsis w-full"
+    :disabled="disabled"
+    :loading="loading"
+    :model-value="currentHandler?.name"
+    option-label="name"
+    option-value="name"
+    :options="possibleHandlers"
+    placeholder="Select handler"
+    show-clear
+    @update:model-value="
+      (newHandler: string | null) => {
+        $emit('change', newHandler);
+      }
+    "
+  />
+</template>
+
+<script setup lang="ts">
+import type { Handler } from '@/stores/handlers.store';
+
+defineProps<{
+  currentHandler?: Handler;
+  possibleHandlers: Handler[];
+  disabled?: boolean;
+  loading?: boolean;
+}>();
+
+defineEmits<{
+  change: [handler: string | null];
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/handlers/SubscriberItemContent.vue b/apps/aurora-backoffice/src/components/handlers/SubscriberItemContent.vue
new file mode 100644
index 00000000..1dc5b2ad
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/handlers/SubscriberItemContent.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="mb-2">
+      <div class="flex max-w-full w-full">
+        <h6 class="mb-0 overflow-hidden white-space-nowrap text-overflow-ellipsis">
+          {{ subscriber.name }}
+        </h6>
+        <StatusIcon class="ml-2" :status="props.status" :subscriber="props.subscriber" />
+      </div>
+    </div>
+    <SubscriberHandlerChangeSelect
+      :current-handler="currentHandler"
+      :disabled="disabled"
+      :loading="loading"
+      :possible-handlers="possibleHandlers"
+      @change="(newHandler: string | null) => $emit('change', newHandler)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  AudioResponse,
+  LightsControllerResponse,
+  ScreenResponse,
+} from '@gewis/aurora-api-client';
+import SubscriberHandlerChangeSelect from '@/components/handlers/SubscriberHandlerChangeSelect.vue';
+import StatusIcon from '@/components/handlers/StatusIcon.vue';
+import type { Handler } from '@/stores/handlers.store';
+import type { Status } from '@/stores/status.store';
+
+const props = defineProps<{
+  subscriber: AudioResponse | ScreenResponse | LightsControllerResponse;
+  currentHandler: Handler | undefined;
+  possibleHandlers: Handler[];
+  loading?: boolean;
+  disabled?: boolean;
+  status: Status | undefined;
+}>();
+
+defineEmits<{
+  change: [handler: string | null];
+}>();
+</script>
+
+<style lang="scss"></style>
diff --git a/apps/aurora-backoffice/src/components/integrations/IntegrationDeleteButton.vue b/apps/aurora-backoffice/src/components/integrations/IntegrationDeleteButton.vue
new file mode 100644
index 00000000..1579377b
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/integrations/IntegrationDeleteButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <Button
+    icon="pi pi-times"
+    severity="danger"
+    :title="`Delete integration '${integrationUser.name}'`"
+    @click="confirmRef?.confirmDialog"
+  />
+  <ConfirmWrapper
+    ref="confirmRef"
+    accept-label="Delete"
+    :loading="loading"
+    message="Are you sure you want to delete this integration?"
+    :on-accept="
+      () => {
+        loading = true;
+        store.deleteUser(integrationUser.id).finally(() => {
+          loading = false;
+        });
+      }
+    "
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { type IntegrationUser, useIntegrationsStore } from '@/stores/integrations.store';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+
+const store = useIntegrationsStore();
+
+defineProps<{
+  integrationUser: IntegrationUser;
+}>();
+
+const confirmRef = ref();
+const loading = ref<boolean>(false);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/integrations/IntegrationDialog.vue b/apps/aurora-backoffice/src/components/integrations/IntegrationDialog.vue
new file mode 100644
index 00000000..d9277269
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/integrations/IntegrationDialog.vue
@@ -0,0 +1,103 @@
+<template>
+  <Dialog
+    closable
+    close-on-escape
+    dismissable-mask
+    :header="header"
+    :keep-in-viewport="false"
+    modal
+    :visible="visible"
+    @update:visible="(v) => $emit('update:visible', v)"
+  >
+    <form class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label for="name">Name</label>
+        <InputText id="name" v-model="name" :invalid="name.length === 0" />
+      </div>
+      <div class="flex flex-col gap-2">
+        <label for="endpoints">Endpoints</label>
+        <MultiSelect
+          v-model="endpoints"
+          display="chip"
+          filter
+          :options="possibleEndpoints"
+          show-clear
+        >
+          <template #option="slotProps">
+            <div
+              v-if="!store.integrationEndpoints.includes(slotProps.option)"
+              class="flex items-center gap-1 text-orange-500"
+              title="Endpoint does no longer exist!"
+            >
+              <i class="pi pi-exclamation-triangle color-orange" />
+              <div>{{ slotProps.option }}</div>
+            </div>
+            <div v-else class="">{{ slotProps.option }}</div>
+          </template>
+        </MultiSelect>
+      </div>
+      <Button
+        :disabled="loading || !endpointsValid || name.length === 0"
+        label="Save"
+        :loading="loading"
+        severity="success"
+        type="submit"
+        @click="
+          (e) => {
+            e.preventDefault();
+            onSaveWrapper();
+          }
+        "
+      />
+    </form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, type ComputedRef, ref } from 'vue';
+import type { IntegrationUserCreateRequest } from '@gewis/aurora-api-client';
+import { type IntegrationUser, useIntegrationsStore } from '@/stores/integrations.store';
+
+const store = useIntegrationsStore();
+
+const props = defineProps<{
+  originalIntegrationUser?: IntegrationUser;
+  visible: boolean;
+  onSave: (params: IntegrationUserCreateRequest) => Promise<void>;
+  header: string;
+}>();
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean];
+}>();
+
+const loading = ref<boolean>(false);
+
+const name = ref<string>(props.originalIntegrationUser?.name ?? '');
+const endpoints = ref<string[]>(props.originalIntegrationUser?.endpoints ?? []);
+
+const endpointsValid: ComputedRef<boolean> = computed(() => {
+  const invalids = endpoints.value.filter((e) => {
+    return !store.integrationEndpoints.includes(e);
+  });
+  return invalids.length === 0;
+});
+
+// Integration User might have an endpoint that no longer exists, so we should have it included
+// in the list of options.
+const possibleEndpoints = computed((): string[] => {
+  const allEndpoints = [...store.integrationEndpoints];
+  if (props.originalIntegrationUser) {
+    allEndpoints.push(...props.originalIntegrationUser.endpoints);
+  }
+  // Filter duplicates
+  return allEndpoints.filter((e, i, all) => i === all.indexOf(e));
+});
+
+const onSaveWrapper = async () => {
+  await props.onSave({ name: name.value, endpoints: endpoints.value });
+  emit('update:visible', false);
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/integrations/IntegrationDialogCreate.vue b/apps/aurora-backoffice/src/components/integrations/IntegrationDialogCreate.vue
new file mode 100644
index 00000000..adf95628
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/integrations/IntegrationDialogCreate.vue
@@ -0,0 +1,21 @@
+<template>
+  <Button icon="pi pi-plus" label="Create new integration" @click="open = true" />
+  <IntegrationDialog v-model:visible="open" header="Create new integration" :on-save="onSave" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { IntegrationUserCreateRequest } from '@gewis/aurora-api-client';
+import { useIntegrationsStore } from '@/stores/integrations.store';
+import IntegrationDialog from '@/components/integrations/IntegrationDialog.vue';
+
+const store = useIntegrationsStore();
+
+const open = ref<boolean>(false);
+
+const onSave = async (params: IntegrationUserCreateRequest) => {
+  return store.createUser(params);
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/integrations/IntegrationDialogUpdate.vue b/apps/aurora-backoffice/src/components/integrations/IntegrationDialogUpdate.vue
new file mode 100644
index 00000000..179c75ed
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/integrations/IntegrationDialogUpdate.vue
@@ -0,0 +1,30 @@
+<template>
+  <Button icon="pi pi-pen-to-square" @click="open = true" />
+  <IntegrationDialog
+    v-model:visible="open"
+    :header="`Update ${integrationUser.name}`"
+    :on-save="onSave"
+    :original-integration-user="integrationUser"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { IntegrationUserUpdateRequest } from '@gewis/aurora-api-client';
+import { type IntegrationUser, useIntegrationsStore } from '@/stores/integrations.store';
+import IntegrationDialog from '@/components/integrations/IntegrationDialog.vue';
+
+const store = useIntegrationsStore();
+
+const props = defineProps<{
+  integrationUser: IntegrationUser;
+}>();
+
+const open = ref<boolean>(false);
+
+const onSave = async (params: IntegrationUserUpdateRequest) => {
+  return store.updateUser(props.integrationUser.id, params);
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/integrations/IntegrationUserApiKey.vue b/apps/aurora-backoffice/src/components/integrations/IntegrationUserApiKey.vue
new file mode 100644
index 00000000..cc77ac3c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/integrations/IntegrationUserApiKey.vue
@@ -0,0 +1,52 @@
+<template>
+  <InputGroup>
+    <InputText
+      :type="integrationUser.apiKey == undefined ? 'password' : 'text'"
+      :value="integrationUser.apiKey ?? 'haha nice try but there is nothing here'"
+    />
+    <InputGroupAddon>
+      <Button
+        v-if="integrationUser.apiKey == undefined"
+        :disabled="loading"
+        icon="pi pi-eye"
+        :loading="loading"
+        severity="secondary"
+        title="Show API key"
+        @click="show"
+      />
+      <Button
+        v-if="integrationUser.apiKey != undefined"
+        :disabled="loading"
+        icon="pi pi-eye-slash"
+        :loading="loading"
+        severity="secondary"
+        title="Hide API key"
+        @click="hide"
+      />
+    </InputGroupAddon>
+  </InputGroup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { type IntegrationUser, useIntegrationsStore } from '@/stores/integrations.store';
+
+const store = useIntegrationsStore();
+const loading = ref<boolean>(false);
+
+const props = defineProps<{
+  integrationUser: IntegrationUser;
+}>();
+
+const show = async () => {
+  loading.value = true;
+  await store.showApiKey(props.integrationUser.id);
+  loading.value = false;
+};
+
+const hide = () => {
+  store.hideApiKey(props.integrationUser.id);
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/ColorBox.vue b/apps/aurora-backoffice/src/components/lights/effects/ColorBox.vue
new file mode 100644
index 00000000..8857d74d
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/ColorBox.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="color-box border-1" :style="{ 'background-color': color }" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  color: string;
+}>();
+</script>
+
+<style scoped>
+.color-box {
+  width: 1rem;
+  height: 1rem;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/EffectControllerButtonContent.vue b/apps/aurora-backoffice/src/components/lights/effects/EffectControllerButtonContent.vue
new file mode 100644
index 00000000..9a10872c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/EffectControllerButtonContent.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-row gap-2 justify-center items-center">
+    <div v-if="editing">
+      <span class="pi pi-pencil text-3xl" />
+    </div>
+    <div class="flex flex-col gap-1">
+      <div>
+        <span v-if="button.icon" :class="['pi', button.icon]" />
+        {{ button.name }}
+      </div>
+      <div v-if="button.properties.type === 'LightsButtonColors'" class="flex flex-row gap-1">
+        <ColorBox
+          v-for="color in (button.properties as LightsButtonColors).colors"
+          :key="color"
+          :color="colorStore.getHexColor(color as RgbColor)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type LightsButtonColors,
+  type LightsPredefinedEffectResponse,
+  RgbColor,
+} from '@gewis/aurora-api-client';
+import ColorBox from '@/components/lights/effects/ColorBox.vue';
+import { useColorStore } from '@/stores/color.store';
+
+const colorStore = useColorStore();
+
+defineProps<{
+  button: LightsPredefinedEffectResponse;
+  editing?: boolean;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/EffectControllerButtonDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/EffectControllerButtonDialog.vue
new file mode 100644
index 00000000..63e55964
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/EffectControllerButtonDialog.vue
@@ -0,0 +1,230 @@
+<template>
+  <Dialog
+    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+    closable
+    close-on-escape
+    dismissable-mask
+    header="Set button"
+    modal
+    :style="{ width: '50vw' }"
+    :visible="visible"
+    @update:visible="$emit('close')"
+  >
+    <template #default>
+      <div class="flex flex-col gap-4 py-1 w-full">
+        <FloatLabel variant="on">
+          <Select
+            id="lights-controller-button-type"
+            v-model="type"
+            class="w-full"
+            option-label="name"
+            option-value="value"
+            :options="typeOptions"
+            placeholder="Choose a function..."
+          />
+          <label for="lights-controller-button-type">Button function</label>
+        </FloatLabel>
+        <FloatLabel variant="on">
+          <InputText
+            id="lights-controller-button-name"
+            v-model="name"
+            autocomplete="off"
+            class="w-full"
+          />
+          <label for="lights-controller-button-name">Name (optional)</label>
+        </FloatLabel>
+        <IconSelector v-model="icon" />
+        <Divider />
+        <ButtonDialogColors
+          v-if="type === ButtonTypes.LightsButtonColors"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonColors
+              ? button.properties
+              : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
+        <ButtonDialogEffectColor
+          v-if="type === ButtonTypes.LightsButtonEffectColor"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonEffectColor
+              ? button.properties
+              : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
+        <ButtonDialogEffectMovement
+          v-if="type === ButtonTypes.LightsButtonEffectMovement"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonEffectMovement
+              ? button.properties
+              : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
+        <ButtonDialogReset
+          v-if="type === ButtonTypes.LightsButtonReset"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonReset
+              ? button.properties
+              : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
+        <ButtonDialogStrobe
+          v-if="type === ButtonTypes.LightsButtonStrobe"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonStrobe
+              ? button.properties
+              : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
+        <ButtonDialogSwitch
+          v-if="type === ButtonTypes.LightsButtonSwitch"
+          :default-properties="
+            button?.properties.type === ButtonTypes.LightsButtonSwitch
+              ? button.properties
+              : undefined
+          "
+          @input-valid="(v) => (propertiesValid = v)"
+          @update:model-value="(p) => (properties = p)"
+        />
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex flex-row gap-2">
+        <Button
+          :disabled="!button || button.id < 0 || saveLoading"
+          icon="pi pi-trash"
+          label="Delete"
+          severity="danger"
+          @click="openDeleteDialog()"
+        />
+        <Button
+          :disabled="!propertiesValid || saveLoading"
+          icon="pi pi-save"
+          label="Save"
+          :loading="saveLoading"
+          severity="success"
+          @click="handleSave"
+        />
+        <ConfirmDialog />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import type {
+  LightsPredefinedEffectProperties,
+  LightsPredefinedEffectResponse,
+} from '@gewis/aurora-api-client';
+import ButtonDialogColors from '@/components/lights/effects/button/ButtonDialogColors.vue';
+import ButtonDialogEffectColor from '@/components/lights/effects/button/ButtonDialogEffectColor.vue';
+import ButtonDialogEffectMovement from '@/components/lights/effects/button/ButtonDialogEffectMovement.vue';
+import ButtonDialogStrobe from '@/components/lights/effects/button/ButtonDialogStrobe.vue';
+import ButtonDialogSwitch from '@/components/lights/effects/button/ButtonDialogSwitch.vue';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+import IconSelector from '@/components/IconSelector.vue';
+import ButtonDialogReset from '@/components/lights/effects/button/ButtonDialogReset.vue';
+
+enum ButtonTypes {
+  LightsButtonColors = 'LightsButtonColors',
+  LightsButtonEffectColor = 'LightsButtonEffectColor',
+  LightsButtonEffectMovement = 'LightsButtonEffectMovement',
+  LightsButtonNull = 'LightsButtonNull',
+  LightsButtonReset = 'LightsButtonReset',
+  LightsButtonStrobe = 'LightsButtonStrobe',
+  LightsButtonSwitch = 'LightsButtonSwitch',
+}
+
+const props = defineProps<{
+  button?: LightsPredefinedEffectResponse;
+  visible?: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const store = useEffectsControllerStore();
+
+const name = ref<string>('');
+const icon = ref<string>('');
+const type = ref<ButtonTypes>(ButtonTypes.LightsButtonNull);
+const properties = ref<LightsPredefinedEffectProperties | undefined>();
+const propertiesValid = ref<boolean>(false);
+const saveLoading = ref<boolean>(false);
+
+const typeOptions = [
+  { name: 'Colors', value: ButtonTypes.LightsButtonColors },
+  { name: 'Color effect', value: ButtonTypes.LightsButtonEffectColor },
+  { name: 'Movement effect', value: ButtonTypes.LightsButtonEffectMovement },
+  { name: 'Strobe', value: ButtonTypes.LightsButtonStrobe },
+  { name: 'Switch', value: ButtonTypes.LightsButtonSwitch },
+  { name: 'Reset', value: ButtonTypes.LightsButtonReset },
+];
+
+const handleSave = async () => {
+  if (!propertiesValid.value || !properties.value) return;
+
+  saveLoading.value = true;
+  if (!!props.button && props.button.id < 0) {
+    await store.createButtonEffect({
+      properties: properties.value,
+      buttonId: props.button.buttonId,
+      name: name.value,
+    });
+  } else if (!!props.button && props.button?.id >= 0) {
+    await store.updateButtonEffect(props.button.id, {
+      name: name.value,
+      icon: icon.value,
+      properties: properties.value,
+    });
+  }
+
+  emit('close');
+  saveLoading.value = false;
+};
+
+const confirm = useConfirm();
+const openDeleteDialog = () => {
+  confirm.require({
+    message: 'Are you sure you want to delete this predefined effect?',
+    header: 'Are you sure?',
+    rejectLabel: 'Cancel',
+    acceptLabel: 'Yes',
+    accept() {
+      if (props.button && props.button?.id >= 0) {
+        void store.deleteButtonEffect(props.button.id).then(() => emit('close'));
+      }
+    },
+  });
+};
+
+watch([props], () => {
+  // Reset the form to default values
+  propertiesValid.value = false;
+  if (props.button) {
+    name.value = props.button.name || '';
+    icon.value = props.button.icon || '';
+    type.value = props.button.properties.type as ButtonTypes;
+    properties.value = props.button.properties;
+  } else {
+    name.value = '';
+    icon.value = '';
+    type.value = ButtonTypes.LightsButtonNull;
+    properties.value = undefined;
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/EffectHistoryCard.vue b/apps/aurora-backoffice/src/components/lights/effects/EffectHistoryCard.vue
new file mode 100644
index 00000000..e6771f38
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/EffectHistoryCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <Panel :header="lightGroups.map((g) => g?.name).join(', ')" @click="setEffect()">
+    <div class="flex flex-col gap-2 justify-start">
+      <div class="font-italic">
+        <timeago :auto-update="5" :datetime="effect.timestamp" />
+      </div>
+      <div>
+        <SavedEffect v-if="effect.colorEffect !== undefined" :effect="effect.colorEffect" />
+        <SavedEffect v-if="effect.movementEffect !== undefined" :effect="effect.movementEffect" />
+      </div>
+    </div>
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import { type PushedEffect, useEffectsControllerStore } from '@/stores/effects-controller.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import SavedEffect from '@/components/lights/effects/SavedEffect.vue';
+
+const props = defineProps<{
+  effect: PushedEffect;
+}>();
+
+const store = useHandlersStore();
+const lightGroups = props.effect.lightGroupIds.map((id: number) =>
+  store.getRegisteredLights().find((g) => g.id === id),
+);
+const effectsControllerStore = useEffectsControllerStore();
+
+const setEffect = async () => {
+  if (props.effect.colorEffect !== undefined) {
+    await effectsControllerStore.setColorEffect(
+      props.effect.colorEffect,
+      props.effect.lightGroupIds,
+    );
+  }
+  if (props.effect.movementEffect !== undefined) {
+    await effectsControllerStore.setMovementEffect(
+      props.effect.movementEffect,
+      props.effect.lightGroupIds,
+    );
+  }
+};
+</script>
+
+<style scoped>
+.p-card-body {
+  padding: 0.5rem !important;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/EffectSettingsDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/EffectSettingsDialog.vue
new file mode 100644
index 00000000..13da5b6c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/EffectSettingsDialog.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+
+defineProps<{
+  effectName: string;
+  canSave: boolean;
+  disabled?: boolean;
+}>();
+defineEmits<{
+  save: [];
+}>();
+
+const store = useEffectsControllerStore();
+const visible = ref<boolean>(false);
+</script>
+
+<template>
+  <Button
+    :disabled="store.selectedLightsGroupIds.length === 0"
+    icon="pi pi-plus"
+    :label="effectName"
+    severity="success"
+    @click="() => (visible = true)"
+  />
+
+  <Dialog
+    v-model:visible="visible"
+    :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
+    dismissable-mask
+    :header="effectName"
+    modal
+    :style="{ width: '50rem' }"
+  >
+    <div class="flex flex-col w-100 gap-5">
+      <slot />
+    </div>
+    <template #footer>
+      <Button
+        :disabled="!canSave"
+        severity="success"
+        @click="
+          () => {
+            visible = false;
+            $emit('save');
+          }
+        "
+      >
+        Add
+      </Button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/LightsGroupToggleButton.vue b/apps/aurora-backoffice/src/components/lights/effects/LightsGroupToggleButton.vue
new file mode 100644
index 00000000..693dc607
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/LightsGroupToggleButton.vue
@@ -0,0 +1,25 @@
+<template>
+  <ToggleButton :disabled="disabled" :model-value="!!enabled" off-label="" on-label="">
+    <div class="flex flex-col gap-3">
+      <span class="font-bold">{{ lightsGroup.name }} (ID: {{ lightsGroup.id }})</span>
+      <div>
+        <ul>
+          <li>Pars: {{ lightsGroup.pars.length }}</li>
+          <li>
+            MH's: {{ lightsGroup.movingHeadRgbs.length + lightsGroup.movingHeadWheels.length }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </ToggleButton>
+</template>
+
+<script setup lang="ts">
+import type { LightsGroupResponse } from '@gewis/aurora-api-client';
+
+defineProps<{
+  lightsGroup: LightsGroupResponse;
+  disabled?: boolean;
+  enabled?: boolean;
+}>();
+</script>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/SavedEffect.vue b/apps/aurora-backoffice/src/components/lights/effects/SavedEffect.vue
new file mode 100644
index 00000000..925da894
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/SavedEffect.vue
@@ -0,0 +1,48 @@
+<template>
+  <Chip :removable="removeable" @remove="$emit('remove')">
+    <template #default>
+      <div class="flex flex-row gap-1 align-items-center">
+        <div>
+          {{ effect.type }}
+        </div>
+        <ColorBox
+          v-for="color in colors"
+          :key="color"
+          :color="colorStore.getHexColor(color as RgbColor)"
+        />
+      </div>
+    </template>
+  </Chip>
+</template>
+
+<script setup lang="ts">
+import {
+  type LightsEffectsColorCreateParams,
+  type LightsEffectsMovementCreateParams,
+  RgbColor,
+} from '@gewis/aurora-api-client';
+import ColorBox from '@/components/lights/effects/ColorBox.vue';
+import { useColorStore } from '@/stores/color.store';
+
+const colorStore = useColorStore();
+
+const props = defineProps<{
+  effect: LightsEffectsColorCreateParams | LightsEffectsMovementCreateParams;
+  removeable?: boolean;
+}>();
+
+defineEmits<{
+  remove: [];
+}>();
+
+let colors: Array<RgbColor>;
+if ('colors' in props.effect.props) {
+  colors = props.effect.props.colors;
+} else if ('color' in props.effect.props) {
+  colors = [props.effect.props.color] as unknown as RgbColor[];
+} else {
+  colors = [];
+}
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogColors.vue b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogColors.vue
new file mode 100644
index 00000000..0e146eae
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogColors.vue
@@ -0,0 +1,41 @@
+<template>
+  <SelectorLightsColor v-model="colors" />
+  <span class="mt-4 italic">* Lights groups to immediately apply the color to</span>
+  <LightsGroupsSelect v-model="lightsGroupIds" />
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import { type LightsButtonColors, RgbColor } from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonColors;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonColors];
+  inputValid: [valid: boolean];
+}>();
+
+const colors = ref<RgbColor[]>(props.defaultProperties?.colors || []);
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
+
+const handleChange = () => {
+  const properties: LightsButtonColors = {
+    type: 'LightsButtonColors',
+    colors: colors.value,
+    lightsGroupIds: lightsGroupIds.value.length > 0 ? lightsGroupIds.value : undefined,
+  };
+  const inputIsValid: boolean = colors.value.length > 0;
+
+  emit('update:modelValue', properties);
+  emit('inputValid', inputIsValid);
+};
+
+watch([colors, lightsGroupIds], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogEffectColor.vue b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogEffectColor.vue
new file mode 100644
index 00000000..45b76c0c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogEffectColor.vue
@@ -0,0 +1,139 @@
+<template>
+  <Select
+    id="controller-button-color-effect"
+    v-model="chosenEffect"
+    option-label="label"
+    option-value="value"
+    :options="effectOptions"
+    placeholder="Select an effect..."
+  />
+  <LightsGroupsSelect v-model="lightsGroupIds" />
+  <Divider />
+  <EffectBackgroundPulse
+    v-if="chosenEffect === ColorEffectsBackgroundPulse.BACKGROUND_PULSE"
+    :default-model-value="
+      defaultProperties?.effectProps.type === ColorEffectsBackgroundPulse.BACKGROUND_PULSE
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    :show-colors="false"
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectBeatFadeOut
+    v-if="chosenEffect === ColorEffectsBeatFadeOut.BEAT_FADE_OUT"
+    :default-model-value="
+      defaultProperties?.effectProps.type === ColorEffectsBeatFadeOut.BEAT_FADE_OUT
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    :show-colors="false"
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectRandomColor
+    v-if="chosenEffect === ColorEffectsRandomColor.RANDOM_COLOR"
+    :default-model-value="
+      defaultProperties?.effectProps.type === ColorEffectsRandomColor.RANDOM_COLOR
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    :show-colors="false"
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectSparkle
+    v-if="chosenEffect === ColorEffectsSparkle.SPARKLE"
+    :default-model-value="
+      defaultProperties?.effectProps.type === ColorEffectsSparkle.SPARKLE
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    :show-colors="false"
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectStaticColor
+    v-if="chosenEffect === ColorEffectsStaticColor.STATIC_COLOR"
+    :default-model-value="
+      defaultProperties?.effectProps.type === ColorEffectsStaticColor.STATIC_COLOR
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    :show-colors="false"
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectWave
+    v-if="chosenEffect === ColorEffectsWave.WAVE"
+    :default-model-value="
+      defaultProperties?.effectProps.type === ColorEffectsWave.WAVE
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    :show-colors="false"
+    @update:model-value="(e) => (effect = e)"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import {
+  ColorEffectsBackgroundPulse,
+  ColorEffectsBeatFadeOut,
+  ColorEffectsRandomColor,
+  ColorEffectsSparkle,
+  ColorEffectsStaticColor,
+  ColorEffectsWave,
+  type LightsButtonEffectColor,
+  type LightsEffectsColorCreateParams,
+} from '@gewis/aurora-api-client';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
+import EffectBeatFadeOut from '@/components/lights/effects/color/EffectBeatFadeOut.vue';
+import EffectWave from '@/components/lights/effects/color/EffectWave.vue';
+import EffectStaticColor from '@/components/lights/effects/color/EffectStaticColor.vue';
+import EffectSparkle from '@/components/lights/effects/color/EffectSparkle.vue';
+import EffectBackgroundPulse from '@/components/lights/effects/color/EffectBackgroundPulse.vue';
+import EffectRandomColor from '@/components/lights/effects/color/EffectRandomColor.vue';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonEffectColor;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonEffectColor];
+  inputValid: [valid: boolean];
+}>();
+
+const chosenEffect = ref<LightsEffectsColorCreateParams['type'] | undefined>(
+  props.defaultProperties?.effectProps.type,
+);
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
+const effect = ref<LightsEffectsColorCreateParams | undefined>(
+  props.defaultProperties?.effectProps || undefined,
+);
+
+const effectOptions = computed(() => {
+  return [
+    { label: 'Background pulse', value: ColorEffectsBackgroundPulse.BACKGROUND_PULSE },
+    { label: 'BeatFadeOut', value: ColorEffectsBeatFadeOut.BEAT_FADE_OUT },
+    { label: 'Random color', value: ColorEffectsRandomColor.RANDOM_COLOR },
+    { label: 'Sparkle', value: ColorEffectsSparkle.SPARKLE },
+    { label: 'Static color', value: ColorEffectsStaticColor.STATIC_COLOR },
+    { label: 'Wave', value: ColorEffectsWave.WAVE },
+  ];
+});
+
+const handleChange = () => {
+  const inputIsValid: boolean = chosenEffect.value !== undefined && lightsGroupIds.value.length > 0;
+  emit('inputValid', inputIsValid);
+
+  if (effect.value === undefined) return;
+  const properties: LightsButtonEffectColor = {
+    type: 'LightsButtonEffectColor',
+    lightsGroupIds: lightsGroupIds.value,
+    effectProps: effect.value,
+  };
+  emit('update:modelValue', properties);
+};
+
+watch([chosenEffect, lightsGroupIds, effect], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogEffectMovement.vue b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogEffectMovement.vue
new file mode 100644
index 00000000..3e66aabd
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogEffectMovement.vue
@@ -0,0 +1,121 @@
+<template>
+  <Select
+    id="controller-button-movement-effect"
+    v-model="chosenEffect"
+    option-label="label"
+    option-value="value"
+    :options="effectOptions"
+    placeholder="Select an effect..."
+  />
+  <LightsGroupsSelect v-model="lightsGroupIds" />
+  <Divider />
+  <EffectClassicRotate
+    v-if="chosenEffect === MovementEffectsClassicRotate.CLASSIC_ROTATE"
+    :default-model-value="
+      defaultProperties?.effectProps.type === MovementEffectsClassicRotate.CLASSIC_ROTATE
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectRandomPosition
+    v-if="chosenEffect === MovementEffectsRandomPosition.RANDOM_POSITION"
+    :default-model-value="
+      defaultProperties?.effectProps.type === MovementEffectsRandomPosition.RANDOM_POSITION
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectSearchLight
+    v-if="chosenEffect === MovementEffectsSearchLight.SEARCH_LIGHT"
+    :default-model-value="
+      defaultProperties?.effectProps.type === MovementEffectsSearchLight.SEARCH_LIGHT
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectTableRotate
+    v-if="chosenEffect === MovementEffectsTableRotate.TABLE_ROTATE"
+    :default-model-value="
+      defaultProperties?.effectProps.type === MovementEffectsTableRotate.TABLE_ROTATE
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    @update:model-value="(e) => (effect = e)"
+  />
+  <EffectZigZag
+    v-if="chosenEffect === MovementEffectsZigZag.ZIG_ZAG"
+    :default-model-value="
+      defaultProperties?.effectProps.type === MovementEffectsZigZag.ZIG_ZAG
+        ? defaultProperties.effectProps
+        : undefined
+    "
+    @update:model-value="(e) => (effect = e)"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import {
+  type LightsButtonEffectMovement,
+  type LightsEffectsMovementCreateParams,
+  MovementEffectsClassicRotate,
+  MovementEffectsRandomPosition,
+  MovementEffectsSearchLight,
+  MovementEffectsTableRotate,
+  MovementEffectsZigZag,
+} from '@gewis/aurora-api-client';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
+import EffectClassicRotate from '@/components/lights/effects/movement/EffectClassicRotate.vue';
+import EffectRandomPosition from '@/components/lights/effects/movement/EffectRandomPosition.vue';
+import EffectSearchLight from '@/components/lights/effects/movement/EffectSearchLight.vue';
+import EffectTableRotate from '@/components/lights/effects/movement/EffectTableRotate.vue';
+import EffectZigZag from '@/components/lights/effects/movement/EffectZigZag.vue';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonEffectMovement;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonEffectMovement];
+  inputValid: [valid: boolean];
+}>();
+
+const chosenEffect = ref<LightsEffectsMovementCreateParams['type'] | undefined>(
+  props.defaultProperties?.effectProps.type,
+);
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
+const effect = ref<LightsEffectsMovementCreateParams | undefined>(
+  props.defaultProperties?.effectProps || undefined,
+);
+
+const effectOptions = computed(() => {
+  return [
+    { label: 'ClassicRotate', value: MovementEffectsClassicRotate.CLASSIC_ROTATE },
+    { label: 'RandomPosition', value: MovementEffectsRandomPosition.RANDOM_POSITION },
+    { label: 'SearchLight', value: MovementEffectsSearchLight.SEARCH_LIGHT },
+    { label: 'TableRotate', value: MovementEffectsTableRotate.TABLE_ROTATE },
+    { label: 'ZigZag', value: MovementEffectsZigZag.ZIG_ZAG },
+  ];
+});
+
+const handleChange = () => {
+  const inputIsValid: boolean = chosenEffect.value !== undefined && lightsGroupIds.value.length > 0;
+  emit('inputValid', inputIsValid);
+
+  if (effect.value === undefined) return;
+  const properties: LightsButtonEffectMovement = {
+    type: 'LightsButtonEffectMovement',
+    lightsGroupIds: lightsGroupIds.value,
+    effectProps: effect.value,
+  };
+  emit('update:modelValue', properties);
+};
+
+watch([chosenEffect, lightsGroupIds, effect], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogReset.vue b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogReset.vue
new file mode 100644
index 00000000..2d8d34da
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogReset.vue
@@ -0,0 +1,36 @@
+<template>
+  <LightsGroupsSelect v-model="lightsGroupIds" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import type { LightsButtonReset } from '@gewis/aurora-api-client';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonReset;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonReset];
+  inputValid: [valid: boolean];
+}>();
+
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
+
+const handleChange = () => {
+  const properties: LightsButtonReset = {
+    type: 'LightsButtonReset',
+    lightsGroupIds: lightsGroupIds.value,
+  };
+  const inputIsValid: boolean = lightsGroupIds.value.length > 0;
+
+  emit('update:modelValue', properties);
+  emit('inputValid', inputIsValid);
+};
+
+watch([lightsGroupIds], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogStrobe.vue b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogStrobe.vue
new file mode 100644
index 00000000..a394f9e5
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogStrobe.vue
@@ -0,0 +1,36 @@
+<template>
+  <LightsGroupsSelect v-model="lightsGroupIds" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import type { LightsButtonStrobe } from '@gewis/aurora-api-client';
+import LightsGroupsSelect from '@/components/lights/effects/button/LightsGroupsSelect.vue';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonStrobe;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonStrobe];
+  inputValid: [valid: boolean];
+}>();
+
+const lightsGroupIds = ref<number[]>(props.defaultProperties?.lightsGroupIds || []);
+
+const handleChange = () => {
+  const properties: LightsButtonStrobe = {
+    type: 'LightsButtonStrobe',
+    lightsGroupIds: lightsGroupIds.value,
+  };
+  const inputIsValid: boolean = lightsGroupIds.value.length > 0;
+
+  emit('update:modelValue', properties);
+  emit('inputValid', inputIsValid);
+};
+
+watch([lightsGroupIds], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogSwitch.vue b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogSwitch.vue
new file mode 100644
index 00000000..b661293e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/ButtonDialogSwitch.vue
@@ -0,0 +1,50 @@
+<template>
+  <MultiSelect
+    v-model="switchIds"
+    filter
+    option-label="name"
+    option-value="id"
+    :options="store.lightsSwitches"
+    placeholder="Select lights..."
+    :title="
+      store.lightsSwitches
+        .filter((a) => switchIds.includes(a.id))
+        .map((a) => a.name)
+        .join(', ')
+    "
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import type { LightsButtonSwitch } from '@gewis/aurora-api-client';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+
+const props = defineProps<{
+  defaultProperties?: LightsButtonSwitch;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [properties: LightsButtonSwitch];
+  inputValid: [valid: boolean];
+}>();
+
+const store = useEffectsControllerStore();
+const switchIds = ref<number[]>(props.defaultProperties?.switchIds || []);
+
+const handleChange = () => {
+  const properties: LightsButtonSwitch = {
+    type: 'LightsButtonSwitch',
+    switchIds: switchIds.value,
+  };
+  const inputIsValid: boolean = switchIds.value.length > 0;
+
+  emit('update:modelValue', properties);
+  emit('inputValid', inputIsValid);
+};
+
+watch([switchIds], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/button/LightsGroupsSelect.vue b/apps/aurora-backoffice/src/components/lights/effects/button/LightsGroupsSelect.vue
new file mode 100644
index 00000000..5a8ff0be
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/button/LightsGroupsSelect.vue
@@ -0,0 +1,33 @@
+<template>
+  <MultiSelect
+    filter
+    :model-value="modelValue"
+    option-label="name"
+    option-value="id"
+    :options="store.lightsGroups"
+    placeholder="Select lights..."
+    :title="
+      store.lightsGroups
+        .filter((a) => modelValue.includes(a.id))
+        .map((a) => a.name)
+        .join(', ')
+    "
+    @update:model-value="(value) => $emit('update:modelValue', value)"
+  />
+</template>
+
+<script setup lang="ts">
+import { useSubscriberStore } from '@/stores/subscriber.store';
+
+const store = useSubscriberStore();
+
+defineProps<{
+  modelValue: number[];
+}>();
+
+defineEmits<{
+  'update:modelValue': [ids: number[]];
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectBackgroundPulse.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBackgroundPulse.vue
new file mode 100644
index 00000000..765b37df
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBackgroundPulse.vue
@@ -0,0 +1,73 @@
+<template>
+  <SelectorLightsColor v-if="showColors" v-model="colors" />
+  <SelectorRatioSlider
+    id="background-pulse-ratio"
+    :max="1"
+    :min="0"
+    name="Turn-on ratio (every cycle)"
+    :step="0.01"
+    :value="ratio"
+    @update="(newVal: number) => (ratio = newVal)"
+  />
+  <SelectorRatioSlider
+    id="background-pulse-duration"
+    :max="20000"
+    :min="0"
+    name="Pulse duration (in ms)"
+    :step="1000"
+    :value="pulseDuration"
+    @update="(newVal: number) => (pulseDuration = newVal)"
+  />
+  <SelectorRatioSlider
+    id="background-pulse-cycle-time"
+    :max="10000"
+    :min="0"
+    name="Cycle time (in ms)"
+    :step="100"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  type BackgroundPulseCreateParams,
+  ColorEffectsBackgroundPulse,
+  RgbColor,
+} from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  showColors: boolean;
+  defaultModelValue?: BackgroundPulseCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [modelValue: BackgroundPulseCreateParams];
+}>();
+
+const colors = ref<RgbColor[]>(props.defaultModelValue?.props.colors || []);
+const ratio = ref<number>(props.defaultModelValue?.props.ratio || 0.05);
+const pulseDuration = ref<number>(props.defaultModelValue?.props.pulseDuration || 8000);
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 800);
+
+const handleChange = () => {
+  const payload: BackgroundPulseCreateParams = {
+    type: ColorEffectsBackgroundPulse.BACKGROUND_PULSE,
+    props: {
+      colors: colors.value,
+      ratio: ratio.value,
+      pulseDuration: pulseDuration.value,
+      cycleTime: cycleTime.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([colors, ratio, pulseDuration, cycleTime], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectBackgroundPulseDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBackgroundPulseDialog.vue
new file mode 100644
index 00000000..15db53da
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBackgroundPulseDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    :can-save="!!effect && effect.props.colors.length > 0"
+    effect-name="Background Pulse"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectBackgroundPulse v-model="effect" show-colors />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { BackgroundPulseCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectBackgroundPulse from '@/components/lights/effects/color/EffectBackgroundPulse.vue';
+
+defineEmits<{
+  save: [params: BackgroundPulseCreateParams];
+}>();
+
+const effect = ref<BackgroundPulseCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectBeatFadeOut.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBeatFadeOut.vue
new file mode 100644
index 00000000..41b1b65a
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBeatFadeOut.vue
@@ -0,0 +1,60 @@
+<template>
+  <SelectorLightsColor v-if="showColors" v-model="colors" />
+  <SelectorPattern v-model="pattern" />
+  <SelectorDirection v-model="direction" />
+  <SelectorBoolean id="enableFade" v-model="enableFade" name="Enable fade" />
+  <SelectorBoolean id="addBlacks" v-model="addBlacks" name="Add blacks" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  type BeatFadeOutCreateParams,
+  ColorEffectsBeatFadeOut,
+  LightsEffectDirection,
+  LightsEffectPattern,
+  RgbColor,
+} from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import SelectorBoolean from '@/components/lights/effects/props/SelectorBoolean.vue';
+import SelectorPattern from '@/components/lights/effects/props/SelectorPattern.vue';
+import SelectorDirection from '@/components/lights/effects/props/SelectorDirection.vue';
+
+const props = defineProps<{
+  showColors: boolean;
+  defaultModelValue?: BeatFadeOutCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [modelValue: BeatFadeOutCreateParams];
+}>();
+
+const colors = ref<RgbColor[]>(props.defaultModelValue?.props.colors || []);
+const enableFade = ref<boolean>(props.defaultModelValue?.props.enableFade || false);
+const addBlacks = ref<boolean>(props.defaultModelValue?.props.nrBlacks !== 0 || false);
+const pattern = ref<LightsEffectPattern>(
+  props.defaultModelValue?.props.pattern || LightsEffectPattern.HORIZONTAL,
+);
+const direction = ref<LightsEffectDirection>(
+  props.defaultModelValue?.props.direction || LightsEffectDirection.FORWARDS,
+);
+
+const handleChange = () => {
+  const payload: BeatFadeOutCreateParams = {
+    type: ColorEffectsBeatFadeOut.BEAT_FADE_OUT,
+    props: {
+      colors: colors.value,
+      enableFade: enableFade.value,
+      nrBlacks: addBlacks.value ? 1 : 0,
+      pattern: pattern.value,
+      direction: direction.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([colors, enableFade, addBlacks, pattern, direction], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectBeatFadeOutDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBeatFadeOutDialog.vue
new file mode 100644
index 00000000..f147dcd3
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectBeatFadeOutDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    :can-save="!!effect && effect.props.colors.length > 0"
+    effect-name="BeatFadeOut"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectBeatFadeOut v-model="effect" show-colors />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { type BeatFadeOutCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectBeatFadeOut from '@/components/lights/effects/color/EffectBeatFadeOut.vue';
+
+defineEmits<{
+  save: [params: BeatFadeOutCreateParams];
+}>();
+
+const effect = ref<BeatFadeOutCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectRandomColor.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectRandomColor.vue
new file mode 100644
index 00000000..1f476c83
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectRandomColor.vue
@@ -0,0 +1,43 @@
+<template>
+  <SelectorLightsColor v-if="showColors" v-model="colors" />
+  <SelectorBoolean id="addBlacks" v-model="addBlacks" name="Add blacks" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  ColorEffectsRandomColor,
+  type RandomColorCreateParams,
+  RgbColor,
+} from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import SelectorBoolean from '@/components/lights/effects/props/SelectorBoolean.vue';
+
+const props = defineProps<{
+  showColors: boolean;
+  defaultModelValue?: RandomColorCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [modelValue: RandomColorCreateParams];
+}>();
+
+const colors = ref<RgbColor[]>(props.defaultModelValue?.props.colors || []);
+const addBlacks = ref<boolean>(props.defaultModelValue?.props.nrBlacks !== 0 || false);
+
+const handleChange = () => {
+  const payload: RandomColorCreateParams = {
+    type: ColorEffectsRandomColor.RANDOM_COLOR,
+    props: {
+      colors: colors.value,
+      nrBlacks: addBlacks.value ? 1 : 0,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([colors, addBlacks], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectRandomColorDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectRandomColorDialog.vue
new file mode 100644
index 00000000..337a92de
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectRandomColorDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    :can-save="!!effect && effect.props.colors.length > 0"
+    effect-name="Random Color"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectRandomColor v-model="effect" show-colors />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { RandomColorCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectRandomColor from '@/components/lights/effects/color/EffectRandomColor.vue';
+
+defineEmits<{
+  save: [params: RandomColorCreateParams];
+}>();
+
+const effect = ref<RandomColorCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectSingleFlood.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectSingleFlood.vue
new file mode 100644
index 00000000..411319f4
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectSingleFlood.vue
@@ -0,0 +1,36 @@
+<template>
+  <EffectSettingsDialog can-save effect-name="SingleFlood" @save="handleAddEffect">
+    <SelectorRatioSlider
+      id="dimMilliseconds"
+      :max="3000"
+      :min="0"
+      name="Dim time (in ms)"
+      :step="100"
+      :value="dimMilliseconds"
+      @update="(newVal: number) => (dimMilliseconds = newVal)"
+    />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ColorEffectsSingleFlood } from '@gewis/aurora-api-client';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const store = useEffectsControllerStore();
+
+const dimMilliseconds = ref<number>(500);
+
+const handleAddEffect = async () => {
+  await store.setColorEffect({
+    type: ColorEffectsSingleFlood.SINGLE_FLOOD,
+    props: {
+      dimMilliseconds: dimMilliseconds.value,
+    },
+  });
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectSparkle.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectSparkle.vue
new file mode 100644
index 00000000..513ce699
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectSparkle.vue
@@ -0,0 +1,69 @@
+<template>
+  <SelectorLightsColor v-if="showColors" v-model="colors" />
+  <SelectorRatioSlider
+    id="sparkle-ratio"
+    :max="1"
+    :min="0"
+    name="Turn-on ratio (every cycle)"
+    :step="0.05"
+    :value="ratio"
+    @update="(newVal: number) => (ratio = newVal)"
+  />
+  <SelectorRatioSlider
+    id="sparkle-dimDuration"
+    :max="2000"
+    :min="0"
+    name="Turn-off time (in ms)"
+    :step="25"
+    :value="dimDuration"
+    @update="(newVal: number) => (dimDuration = newVal)"
+  />
+  <SelectorRatioSlider
+    id="sparkle-cycleTime"
+    :max="2000"
+    :min="0"
+    name="Cycle time (in ms)"
+    :step="25"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { ColorEffectsSparkle, RgbColor, type SparkleCreateParams } from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  showColors: boolean;
+  defaultModelValue?: SparkleCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [params: SparkleCreateParams];
+}>();
+
+const colors = ref<RgbColor[]>(props.defaultModelValue?.props.colors || []);
+const ratio = ref<number>(props.defaultModelValue?.props.ratio || 0.2);
+const dimDuration = ref<number>(props.defaultModelValue?.props.dimDuration || 800);
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 200);
+
+const handleChange = () => {
+  const payload: SparkleCreateParams = {
+    type: ColorEffectsSparkle.SPARKLE,
+    props: {
+      colors: colors.value,
+      ratio: ratio.value,
+      dimDuration: dimDuration.value,
+      cycleTime: cycleTime.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([colors, ratio, dimDuration, cycleTime], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectSparkleDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectSparkleDialog.vue
new file mode 100644
index 00000000..9a3e206d
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectSparkleDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    :can-save="!!effect && effect.props.colors.length > 0"
+    effect-name="Sparkle"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectSparkle v-model="effect" show-colors />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { SparkleCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectSparkle from '@/components/lights/effects/color/EffectSparkle.vue';
+
+defineEmits<{
+  save: [params: SparkleCreateParams];
+}>();
+
+const effect = ref<SparkleCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectStaticColor.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectStaticColor.vue
new file mode 100644
index 00000000..b3248c42
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectStaticColor.vue
@@ -0,0 +1,85 @@
+<template>
+  <SelectorLightsColor v-if="showColors" v-model="colors" single-color />
+  <Select v-model="gobo" :options="gobos" placeholder="Select a gobo" show-clear />
+  <Select
+    v-model="goboRotate"
+    :options="goboRotates"
+    placeholder="Select a gobo rotate effect"
+    show-clear
+  />
+  <SelectorBoolean id="beat-toggle" v-model="beatToggle" name="Beat Toggle" />
+  <SelectorRatioSlider
+    id="relative-brightness"
+    :max="1"
+    :min="0"
+    name=""
+    :step="0.05"
+    :value="relativeBrightness"
+    @update="(newVal) => (relativeBrightness = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, type ComputedRef, onMounted, ref, watch } from 'vue';
+import {
+  ColorEffectsStaticColor,
+  RgbColor,
+  type StaticColorCreateParams,
+} from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import SelectorBoolean from '@/components/lights/effects/props/SelectorBoolean.vue';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+
+const subscriberStore = useSubscriberStore();
+const gobos: ComputedRef<string[]> = computed(() => {
+  return subscriberStore.lightsGroups
+    .map((g) => g.movingHeadWheels.map((w) => w.fixture.gobos))
+    .flat()
+    .flat()
+    .filter((n1, index, all) => index === all.findIndex((n2) => n1 === n2));
+});
+const goboRotates: ComputedRef<string[]> = computed(() => {
+  return subscriberStore.lightsGroups
+    .map((g) => g.movingHeadWheels.map((w) => w.fixture.goboRotates))
+    .flat()
+    .flat()
+    .filter((n1, index, all) => index === all.findIndex((n2) => n1 === n2));
+});
+
+const props = defineProps<{
+  showColors: boolean;
+  defaultModelValue?: StaticColorCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [params: StaticColorCreateParams];
+}>();
+
+const colors = ref<RgbColor[]>(
+  props.defaultModelValue ? [props.defaultModelValue.props.color] : [],
+);
+const gobo = ref<string>(props.defaultModelValue?.props.gobo || '');
+const goboRotate = ref<string>(props.defaultModelValue?.props.goboRotate || '');
+const beatToggle = ref<boolean>(props.defaultModelValue?.props.beatToggle || false);
+const relativeBrightness = ref<number>(props.defaultModelValue?.props.relativeBrightness || 1);
+
+const handleChange = () => {
+  const payload: StaticColorCreateParams = {
+    type: ColorEffectsStaticColor.STATIC_COLOR,
+    props: {
+      color: colors.value[0],
+      gobo: gobo.value ? gobo.value : undefined,
+      goboRotate: goboRotate.value ? goboRotate.value : undefined,
+      beatToggle: beatToggle.value,
+      relativeBrightness: relativeBrightness.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([colors, gobo, goboRotate, beatToggle, relativeBrightness], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectStaticColorDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectStaticColorDialog.vue
new file mode 100644
index 00000000..f2aa5463
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectStaticColorDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    :can-save="!!effect && !!effect.props.color"
+    effect-name="StaticColor"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectStaticColor v-model="effect" show-colors />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { StaticColorCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectStaticColor from '@/components/lights/effects/color/EffectStaticColor.vue';
+
+defineEmits<{
+  save: [params: StaticColorCreateParams];
+}>();
+
+const effect = ref<StaticColorCreateParams>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectWave.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectWave.vue
new file mode 100644
index 00000000..71585218
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectWave.vue
@@ -0,0 +1,76 @@
+<template>
+  <SelectorLightsColor v-if="showColors" v-model="colors" single-color />
+  <SelectorPattern v-model="pattern" />
+  <SelectorDirection v-model="direction" />
+  <SelectorRatioSlider
+    id="waveSize"
+    :max="8"
+    :min="1"
+    name="Number of waves"
+    :step="1"
+    :value="nrWaves"
+    @update="(newVal: number) => (nrWaves = newVal)"
+  />
+  <SelectorRatioSlider
+    id="waveCycleTime"
+    :max="5000"
+    :min="0"
+    name="Cycle time (in ms)"
+    :step="100"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  ColorEffectsWave,
+  LightsEffectDirection,
+  LightsEffectPattern,
+  RgbColor,
+  type WaveCreateParams,
+} from '@gewis/aurora-api-client';
+import SelectorLightsColor from '@/components/lights/effects/props/SelectorLightsColor.vue';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+import SelectorDirection from '@/components/lights/effects/props/SelectorDirection.vue';
+import SelectorPattern from '@/components/lights/effects/props/SelectorPattern.vue';
+
+const props = defineProps<{
+  showColors: boolean;
+  defaultModelValue?: WaveCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [effect: WaveCreateParams];
+}>();
+
+const colors = ref<RgbColor[]>(props.defaultModelValue?.props.colors || []);
+const nrWaves = ref<number>(props.defaultModelValue?.props.nrWaves || 1);
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 1000);
+const pattern = ref<LightsEffectPattern>(
+  props.defaultModelValue?.props.pattern || LightsEffectPattern.HORIZONTAL,
+);
+const direction = ref<LightsEffectDirection>(
+  props.defaultModelValue?.props.direction || LightsEffectDirection.FORWARDS,
+);
+
+const handleChange = () => {
+  const payload: WaveCreateParams = {
+    type: ColorEffectsWave.WAVE,
+    props: {
+      colors: colors.value,
+      nrWaves: nrWaves.value,
+      cycleTime: cycleTime.value,
+      pattern: pattern.value,
+      direction: direction.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([colors, nrWaves, cycleTime, pattern, direction], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/color/EffectWaveDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/color/EffectWaveDialog.vue
new file mode 100644
index 00000000..525346b0
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/color/EffectWaveDialog.vue
@@ -0,0 +1,38 @@
+<template>
+  <EffectSettingsDialog
+    :can-save="effect.props.colors.length === 1"
+    effect-name="Wave"
+    @save="$emit('save', effect)"
+  >
+    <EffectWave v-model="effect" :show-colors="true" />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  ColorEffectsWave,
+  LightsEffectDirection,
+  LightsEffectPattern,
+  type WaveCreateParams,
+} from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectWave from '@/components/lights/effects/color/EffectWave.vue';
+
+defineEmits<{
+  save: [effect: WaveCreateParams];
+}>();
+
+const effect = ref<WaveCreateParams>({
+  type: ColorEffectsWave.WAVE,
+  props: {
+    colors: [],
+    nrWaves: 1,
+    cycleTime: 1000,
+    pattern: LightsEffectPattern.HORIZONTAL,
+    direction: LightsEffectDirection.FORWARDS,
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectClassicRotate.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectClassicRotate.vue
new file mode 100644
index 00000000..6e65a5ab
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectClassicRotate.vue
@@ -0,0 +1,56 @@
+<template>
+  <SelectorRatioSlider
+    id="cycleTime"
+    :max="20000"
+    :min="5000"
+    name="Cycle time (in ms)"
+    :step="1000"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+  <SelectorRatioSlider
+    id="offsetFactor"
+    :max="1"
+    :min="0"
+    name="Offset factor"
+    :step="0.05"
+    :value="offsetFactor"
+    @update="(newVal: number) => (offsetFactor = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  type ClassicRotateCreateParams,
+  MovementEffectsClassicRotate,
+} from '@gewis/aurora-api-client';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  defaultModelValue?: ClassicRotateCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [props: ClassicRotateCreateParams];
+}>();
+
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 10000);
+const offsetFactor = ref<number>(props.defaultModelValue?.props.offsetFactor || 0);
+
+const handleChange = () => {
+  const payload: ClassicRotateCreateParams = {
+    type: MovementEffectsClassicRotate.CLASSIC_ROTATE,
+    props: {
+      cycleTime: cycleTime.value,
+      offsetFactor: offsetFactor.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([cycleTime, offsetFactor], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectClassicRotateDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectClassicRotateDialog.vue
new file mode 100644
index 00000000..95413e45
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectClassicRotateDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    can-save
+    effect-name="ClassicRotate"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectClassicRotate v-model="effect" />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ClassicRotateCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectClassicRotate from '@/components/lights/effects/movement/EffectClassicRotate.vue';
+
+defineEmits<{
+  save: [params: ClassicRotateCreateParams];
+}>();
+
+const effect = ref<ClassicRotateCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectRandomPosition.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectRandomPosition.vue
new file mode 100644
index 00000000..829726ee
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectRandomPosition.vue
@@ -0,0 +1,45 @@
+<template>
+  <SelectorRatioSlider
+    id="beats-to-move"
+    :max="4"
+    :min="1"
+    name="Number of beats before changing position"
+    :step="1"
+    :value="beatsToMove"
+    @update="(newVal: number) => (beatsToMove = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import {
+  MovementEffectsRandomPosition,
+  type RandomPositionCreateParams,
+} from '@gewis/aurora-api-client';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  defaultModelValue?: RandomPositionCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [params: RandomPositionCreateParams];
+}>();
+
+const beatsToMove = ref<number>(props.defaultModelValue?.props.beatsToMove || 1);
+
+const handleChange = () => {
+  const payload: RandomPositionCreateParams = {
+    type: MovementEffectsRandomPosition.RANDOM_POSITION,
+    props: {
+      beatsToMove: beatsToMove.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([beatsToMove], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectRandomPositionDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectRandomPositionDialog.vue
new file mode 100644
index 00000000..3540e86b
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectRandomPositionDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    can-save
+    effect-name="RandomPosition"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectRandomPosition v-model="effect" />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { RandomPositionCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectRandomPosition from '@/components/lights/effects/movement/EffectRandomPosition.vue';
+
+defineEmits<{
+  save: [params: RandomPositionCreateParams];
+}>();
+
+const effect = ref<RandomPositionCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectSearchLight.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectSearchLight.vue
new file mode 100644
index 00000000..95702b3b
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectSearchLight.vue
@@ -0,0 +1,64 @@
+<template>
+  <SelectorRatioSlider
+    id="radiusFactor"
+    :max="2"
+    :min="0"
+    name="Radius factor"
+    :step="0.1"
+    :value="radiusFactor"
+    @update="(newVal: number) => (radiusFactor = newVal)"
+  />
+  <SelectorRatioSlider
+    id="cycleTime"
+    :max="20000"
+    :min="0"
+    name="Cycle time (in ms)"
+    :step="1000"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+  <SelectorRatioSlider
+    id="offsetFactor"
+    :max="1"
+    :min="0"
+    name="Offset factor"
+    :step="0.05"
+    :value="offsetFactor"
+    @update="(newVal: number) => (offsetFactor = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { MovementEffectsSearchLight, type SearchLightCreateParams } from '@gewis/aurora-api-client';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  defaultModelValue?: SearchLightCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [props: SearchLightCreateParams];
+}>();
+
+const radiusFactor = ref<number>(props.defaultModelValue?.props.radiusFactor || 1);
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 4000);
+const offsetFactor = ref<number>(props.defaultModelValue?.props.offsetFactor || 0.25);
+
+const handleChange = () => {
+  const payload: SearchLightCreateParams = {
+    type: MovementEffectsSearchLight.SEARCH_LIGHT,
+    props: {
+      cycleTime: cycleTime.value,
+      offsetFactor: offsetFactor.value,
+      radiusFactor: radiusFactor.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([radiusFactor, cycleTime, offsetFactor], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectSearchLightDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectSearchLightDialog.vue
new file mode 100644
index 00000000..bd493155
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectSearchLightDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    can-save
+    effect-name="SearchLight"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectSearchLight v-model="effect" />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { SearchLightCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectSearchLight from '@/components/lights/effects/movement/EffectSearchLight.vue';
+
+defineEmits<{
+  save: [params: SearchLightCreateParams];
+}>();
+
+const effect = ref<SearchLightCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectTableRotate.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectTableRotate.vue
new file mode 100644
index 00000000..19e7b1a2
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectTableRotate.vue
@@ -0,0 +1,53 @@
+<template>
+  <SelectorRatioSlider
+    id="cycleTime"
+    :max="20000"
+    :min="2000"
+    name="Cycle time (in ms)"
+    :step="1000"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+  <SelectorRatioSlider
+    id="offsetFactor"
+    :max="1"
+    :min="0"
+    name="Offset factor"
+    :step="0.05"
+    :value="offsetFactor"
+    @update="(newVal: number) => (offsetFactor = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { MovementEffectsTableRotate, type TableRotateCreateParams } from '@gewis/aurora-api-client';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  defaultModelValue?: TableRotateCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [props: TableRotateCreateParams];
+}>();
+
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 10000);
+const offsetFactor = ref<number>(props.defaultModelValue?.props.offsetFactor || 0.25);
+
+const handleChange = () => {
+  const payload: TableRotateCreateParams = {
+    type: MovementEffectsTableRotate.TABLE_ROTATE,
+    props: {
+      cycleTime: cycleTime.value,
+      offsetFactor: offsetFactor.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([cycleTime, offsetFactor], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectTableRotateDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectTableRotateDialog.vue
new file mode 100644
index 00000000..da1d8841
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectTableRotateDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    can-save
+    effect-name="TableRotate"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectTableRotate v-model="effect" />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { TableRotateCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectTableRotate from '@/components/lights/effects/movement/EffectTableRotate.vue';
+
+defineEmits<{
+  save: [params: TableRotateCreateParams];
+}>();
+
+const effect = ref<TableRotateCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectZigZag.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectZigZag.vue
new file mode 100644
index 00000000..3c6262d0
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectZigZag.vue
@@ -0,0 +1,75 @@
+<template>
+  <SelectorRatioSlider
+    id="cycle-time"
+    :max="40000"
+    :min="10000"
+    name="Cycle time (in ms)"
+    :step="1000"
+    :value="cycleTime"
+    @update="(newVal: number) => (cycleTime = newVal)"
+  />
+  <SelectorRatioSlider
+    id="offset-factor"
+    :max="1"
+    :min="0"
+    name="Offset factor"
+    :step="0.05"
+    :value="offsetFactor"
+    @update="(newVal: number) => (offsetFactor = newVal)"
+  />
+  <SelectorRatioSlider
+    id="horizontal-radius-factor"
+    :max="1"
+    :min="0"
+    name="Horizontal radius factor"
+    :step="0.05"
+    :value="horizontalRadiusFactor"
+    @update="(newVal: number) => (horizontalRadiusFactor = newVal)"
+  />
+  <SelectorRatioSlider
+    id="vertical-radius-factor"
+    :max="1"
+    :min="0"
+    name="Vertical radius factor"
+    :step="0.05"
+    :value="verticalRadiusFactor"
+    @update="(newVal: number) => (verticalRadiusFactor = newVal)"
+  />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { MovementEffectsZigZag, type ZigZagCreateParams } from '@gewis/aurora-api-client';
+import SelectorRatioSlider from '@/components/lights/effects/props/SelectorRatioSlider.vue';
+
+const props = defineProps<{
+  defaultModelValue?: ZigZagCreateParams;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [params: ZigZagCreateParams];
+}>();
+
+const cycleTime = ref<number>(props.defaultModelValue?.props.cycleTime || 20000);
+const offsetFactor = ref<number>(props.defaultModelValue?.props.offsetFactor || 0);
+const horizontalRadiusFactor = ref<number>(props.defaultModelValue?.props.horizontalRadius || 0.5);
+const verticalRadiusFactor = ref<number>(props.defaultModelValue?.props.verticalRadius || 0.8);
+
+const handleChange = () => {
+  const payload: ZigZagCreateParams = {
+    type: MovementEffectsZigZag.ZIG_ZAG,
+    props: {
+      cycleTime: cycleTime.value,
+      offsetFactor: offsetFactor.value,
+      horizontalRadius: horizontalRadiusFactor.value,
+      verticalRadius: verticalRadiusFactor.value,
+    },
+  };
+  emit('update:modelValue', payload);
+};
+
+watch([cycleTime, offsetFactor, horizontalRadiusFactor, verticalRadiusFactor], handleChange);
+onMounted(handleChange);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/movement/EffectZigZagDialog.vue b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectZigZagDialog.vue
new file mode 100644
index 00000000..a603e483
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/movement/EffectZigZagDialog.vue
@@ -0,0 +1,28 @@
+<template>
+  <EffectSettingsDialog
+    can-save
+    effect-name="ZigZag"
+    @save="
+      () => {
+        if (effect) $emit('save', effect);
+      }
+    "
+  >
+    <EffectZigZag v-model="effect" />
+  </EffectSettingsDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ZigZagCreateParams } from '@gewis/aurora-api-client';
+import EffectSettingsDialog from '@/components/lights/effects/EffectSettingsDialog.vue';
+import EffectZigZag from '@/components/lights/effects/movement/EffectZigZag.vue';
+
+defineEmits<{
+  save: [params: ZigZagCreateParams];
+}>();
+
+const effect = ref<ZigZagCreateParams | undefined>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/other/StrobeButton.vue b/apps/aurora-backoffice/src/components/lights/effects/other/StrobeButton.vue
new file mode 100644
index 00000000..930c71fa
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/other/StrobeButton.vue
@@ -0,0 +1,34 @@
+<template>
+  <Button
+    :disabled="store.selectedLightsGroupIds.length === 0"
+    @blur="disableStrobe()"
+    @mousedown="enableStrobe()"
+    @mouseleave="disableStrobe()"
+    @mouseup="disableStrobe()"
+    @touchend="disableStrobe()"
+    @touchstart="enableStrobe()"
+  >
+    Strobe
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+
+const store = useEffectsControllerStore();
+const enabled = ref<boolean>(false);
+
+const enableStrobe = () => {
+  enabled.value = true;
+  void store.enableStrobe();
+};
+
+const disableStrobe = () => {
+  if (!enabled.value) return;
+  void store.disableStrobe();
+  enabled.value = false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/props/SelectorBoolean.vue b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorBoolean.vue
new file mode 100644
index 00000000..78967cd4
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorBoolean.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div class="w-fit cursor-pointer" @click="$emit('update:modelValue', !modelValue)">
+      <Checkbox :id="id" binary :model-value="modelValue" :name="id" />
+      <label class="ml-2 cursor-pointer" :for="id">{{ name }}</label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  modelValue: boolean;
+  name: string;
+  id: string;
+}>();
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const emit = defineEmits<{
+  'update:modelValue': [checked: boolean];
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/props/SelectorDirection.vue b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorDirection.vue
new file mode 100644
index 00000000..16a4d4ec
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorDirection.vue
@@ -0,0 +1,34 @@
+<template>
+  <FloatLabel class="w-full mt-1" variant="on">
+    <Select
+      class="w-full"
+      input-id="direction-select"
+      :model-value="modelValue"
+      option-label="name"
+      option-value="value"
+      :options="directions"
+      @update:model-value="(value: LightsEffectDirection) => $emit('update:modelValue', value)"
+    />
+    <label for="direction-select">Direction</label>
+  </FloatLabel>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LightsEffectDirection } from '@gewis/aurora-api-client';
+
+defineProps<{
+  modelValue: LightsEffectDirection;
+}>();
+
+defineEmits<{
+  'update:modelValue': [modelValue: LightsEffectDirection];
+}>();
+
+const directions = ref([
+  { name: 'Forwards', value: LightsEffectDirection.FORWARDS },
+  { name: 'Backwards', value: LightsEffectDirection.BACKWARDS },
+]);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/props/SelectorLightsColor.vue b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorLightsColor.vue
new file mode 100644
index 00000000..9622be7c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorLightsColor.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h4 class="m-1">Color*</h4>
+    <div class="flex flex-row flex-wrap gap-1">
+      <ToggleButton
+        v-for="color in colors"
+        :key="color"
+        class="p-button-secondary"
+        :model-value="modelValue.includes(color as RgbColor)"
+        :off-label="color"
+        :on-label="color"
+        @click="handleColorClick(color as RgbColor)"
+      >
+        <template #icon>
+          <div class="mr-1">
+            <ColorBox :color="store.getHexColor(color as RgbColor)" />
+          </div>
+        </template>
+      </ToggleButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RgbColor } from '@gewis/aurora-api-client';
+import { useColorStore } from '@/stores/color.store';
+import ColorBox from '@/components/lights/effects/ColorBox.vue';
+
+const store = useColorStore();
+
+const props = defineProps<{
+  singleColor?: boolean;
+  modelValue: RgbColor[];
+}>();
+const emit = defineEmits<{
+  'update:modelValue': [colors: RgbColor[]];
+}>();
+
+const colors = Object.values(RgbColor);
+
+const handleColorClick = (color: RgbColor) => {
+  let selectedColors = [...props.modelValue];
+  const i = selectedColors.findIndex((c) => c === color);
+  if (props.singleColor) {
+    selectedColors = [color];
+  } else if (i < 0) {
+    selectedColors.push(color);
+  } else {
+    selectedColors.splice(i, 1);
+  }
+  emit('update:modelValue', selectedColors);
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/props/SelectorPattern.vue b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorPattern.vue
new file mode 100644
index 00000000..17bc4d7d
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorPattern.vue
@@ -0,0 +1,45 @@
+<template>
+  <FloatLabel class="w-full mt-1" variant="on">
+    <Select
+      class="w-full"
+      input-id="pattern-select"
+      :model-value="modelValue"
+      option-label="name"
+      option-value="value"
+      :options="patterns"
+      @update:model-value="(value: LightsEffectPattern) => $emit('update:modelValue', value)"
+    />
+    <label for="pattern-select">Pattern</label>
+  </FloatLabel>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { LightsEffectPattern } from '@gewis/aurora-api-client';
+
+defineProps<{
+  modelValue: LightsEffectPattern;
+}>();
+
+defineEmits<{
+  'update:modelValue': [modelValue: LightsEffectPattern];
+}>();
+
+const patterns = ref([
+  { name: 'Horizontal', value: LightsEffectPattern.HORIZONTAL },
+  { name: 'Vertical', value: LightsEffectPattern.VERTICAL },
+  {
+    name: 'Diagonal (top left to bottom right)',
+    value: LightsEffectPattern.DIAGONAL_TOP_LEFT_TO_BOTTOM_RIGHT,
+  },
+  {
+    name: 'Diagonal (bottom left to top right)',
+    value: LightsEffectPattern.DIAGONAL_BOTTOM_LEFT_TO_TOP_RIGHT,
+  },
+  { name: 'Centered (circular)', value: LightsEffectPattern.CENTERED_CIRCULAR },
+  { name: 'Centered (squared)', value: LightsEffectPattern.CENTERED_SQUARED },
+  { name: 'Rotational', value: LightsEffectPattern.ROTATIONAL },
+]);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/effects/props/SelectorRatioSlider.vue b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorRatioSlider.vue
new file mode 100644
index 00000000..37bd341d
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/effects/props/SelectorRatioSlider.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-column w-fit">
+    <label class="font-bold block mb-1" :for="id">{{ name }}</label>
+    <div class="card">
+      <div class="">
+        <InputNumber
+          :id="id"
+          class="w-full"
+          :max-fraction-digits="2"
+          :min-fraction-digits="0"
+          :model-value="value"
+          @blur="(event) => handleNumberInputChange(event.value)"
+        />
+        <Slider
+          class="w-full"
+          :max="max"
+          :min="min"
+          :model-value="value"
+          :step="step"
+          @change="onChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  id: string;
+  name: string;
+}>();
+
+const emit = defineEmits<{
+  update: [value: number];
+}>();
+
+const handleNumberInputChange = (newValue: string) => {
+  const asNumber = Number(newValue);
+  if (!Number.isNaN(asNumber)) onChange(asNumber);
+};
+
+const onChange = (newValue: number) => {
+  if (newValue < props.min) {
+    emit('update', props.min);
+  } else if (newValue > props.max) {
+    emit('update', props.max);
+  } else {
+    emit('update', newValue);
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/fixtures/BrightnessSlider.vue b/apps/aurora-backoffice/src/components/lights/fixtures/BrightnessSlider.vue
new file mode 100644
index 00000000..c11185f9
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/fixtures/BrightnessSlider.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-if="props.lightsGroup" class="rounded flex flex-col gap-4">
+    <div class="flex flex-row gap-6 justify-center items-center pl-3">
+      <Slider
+        v-model="brightness"
+        class="w-full"
+        :max="1"
+        :min="0"
+        name="brightness"
+        :step="0.01"
+      />
+      <InputNumber class="w-1/2" input-class="w-full" :model-value="brightness" size="small" />
+    </div>
+    <div class="flex flex-row gap-3">
+      <Button
+        class="w-full"
+        :disabled="store.brightnessLoading"
+        icon="pi pi-undo"
+        label="Reset"
+        :loading="store.brightnessLoading"
+        severity="secondary"
+        @click="handleReset()"
+      />
+      <Button
+        class="w-full"
+        :disabled="store.brightnessLoading"
+        icon="pi pi-save"
+        label="Save"
+        :loading="store.brightnessLoading"
+        @click="handleSave()"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { LightsGroupResponse } from '@gewis/aurora-api-client';
+import { useLightsStore } from '@/stores/lights.store';
+
+const store = useLightsStore();
+
+const props = defineProps<{
+  lightsGroup: LightsGroupResponse;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const initialBrightness = computed<number>(() => {
+  const fixtures = [
+    ...props.lightsGroup.pars,
+    ...props.lightsGroup.movingHeadWheels,
+    ...props.lightsGroup.movingHeadRgbs,
+  ];
+  return fixtures.reduce((m, f) => Math.min(m, f.masterDimmer ?? 1), 1);
+});
+
+const brightness = ref<number>(initialBrightness.value);
+
+const handleSave = async () => {
+  await store.setLightsGroupBrightness(props.lightsGroup.id, brightness.value);
+  emit('close');
+};
+const handleReset = async () => {
+  await store.resetLightsGroupBrightness(props.lightsGroup.id);
+  emit('close');
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/lights/fixtures/FixtureType.ts b/apps/aurora-backoffice/src/components/lights/fixtures/FixtureType.ts
new file mode 100644
index 00000000..1f8a1871
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/fixtures/FixtureType.ts
@@ -0,0 +1,5 @@
+export enum FixtureType {
+  PAR,
+  MOVING_HEAD_RGB,
+  MOVING_HEAD_WHEEL,
+}
diff --git a/apps/aurora-backoffice/src/components/lights/scenes/SceneDeleteButton.vue b/apps/aurora-backoffice/src/components/lights/scenes/SceneDeleteButton.vue
new file mode 100644
index 00000000..852727c0
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/lights/scenes/SceneDeleteButton.vue
@@ -0,0 +1,32 @@
+<template>
+  <ConfirmDialog />
+  <Button severity="danger" size="small" title="Delete scene" @click="openDialog()">
+    <i class="pi pi-trash" />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from 'primevue/useconfirm';
+import { useSceneControllerStore } from '@/stores/scene-controller.store';
+
+const props = defineProps<{
+  id: number;
+}>();
+
+const store = useSceneControllerStore();
+
+const confirm = useConfirm();
+const openDialog = () => {
+  confirm.require({
+    message: 'Are you sure you want to delete this scene?',
+    header: 'Are you sure?',
+    rejectLabel: 'Cancel',
+    acceptLabel: 'Yes',
+    accept() {
+      void store.deleteScene(props.id);
+    },
+  });
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/SubscribersDetails.vue b/apps/aurora-backoffice/src/components/modes/SubscribersDetails.vue
new file mode 100644
index 00000000..8861d30c
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/SubscribersDetails.vue
@@ -0,0 +1,45 @@
+<template>
+  <ul class="list-disc list-inside">
+    <li v-if="$props.selectedAudios.length > 0">
+      Audio will be played from
+      <span class="font-semibold">{{ formatArray(audios.map((x) => x.name)) }}</span>
+    </li>
+    <li v-if="$props.selectedScreens.length > 0">
+      Visuals will be displayed on
+      <span class="font-semibold">{{ formatArray(screens.map((x) => x.name)) }}</span>
+    </li>
+    <li v-if="$props.selectedLightGroups.length > 0">
+      Light effects will be displayed on
+      <span class="font-semibold">{{ formatArray(lightGroups.map((x) => x.name)) }}</span>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+
+const subscriberStore = useSubscriberStore();
+
+const props = defineProps<{
+  selectedAudios: number[];
+  selectedScreens: number[];
+  selectedLightGroups: number[];
+}>();
+
+const audios = computed(() =>
+  subscriberStore.audios.filter((a) => props.selectedAudios.includes(a.id)),
+);
+const screens = computed(() =>
+  subscriberStore.screens.filter((a) => props.selectedScreens.includes(a.id)),
+);
+const lightGroups = computed(() =>
+  subscriberStore.lightsGroups.filter((a) => props.selectedLightGroups.includes(a.id)),
+);
+
+function formatArray(array: string[]): string {
+  if (array.length === 0) return '';
+  if (array.length === 1) return array[0];
+  return `${array.slice(0, -1).join(', ')} & ${array[array.length - 1]}`;
+}
+</script>
diff --git a/apps/aurora-backoffice/src/components/modes/SubscribersSelect.vue b/apps/aurora-backoffice/src/components/modes/SubscribersSelect.vue
new file mode 100644
index 00000000..9d9ad6a5
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/SubscribersSelect.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col gap-2 w-full max-w-full">
+    <MultiSelect
+      class="w-full sm:max-w-80 mx-auto"
+      filter
+      :max-selected-labels="2"
+      :model-value="selectedAudios"
+      option-label="name"
+      option-value="id"
+      :options="store.audios"
+      placeholder="Select audio"
+      :title="
+        store.audios
+          .filter((a) => selectedAudios.includes(a.id))
+          .map((a) => a.name)
+          .join(', ')
+      "
+      @update:model-value="(value: number[]) => $emit('update:audios', value)"
+    />
+    <MultiSelect
+      class="w-full sm:max-w-80 mx-auto"
+      filter
+      :max-selected-labels="2"
+      :model-value="selectedScreens"
+      option-label="name"
+      option-value="id"
+      :options="store.screens"
+      placeholder="Select screens"
+      :title="
+        store.screens
+          .filter((a) => selectedScreens.includes(a.id))
+          .map((a) => a.name)
+          .join(', ')
+      "
+      @update:model-value="(value: number[]) => $emit('update:screens', value)"
+    />
+    <MultiSelect
+      class="w-full sm:max-w-80 mx-auto"
+      filter
+      :max-selected-labels="2"
+      :model-value="selectedLightGroups"
+      option-label="name"
+      option-value="id"
+      :options="store.lightsGroups"
+      placeholder="Select lights..."
+      :title="
+        store.lightsGroups
+          .filter((a) => selectedLightGroups.includes(a.id))
+          .map((a) => a.name)
+          .join(', ')
+      "
+      @update:model-value="(value: number[]) => $emit('update:light-groups', value)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSubscriberStore } from '@/stores/subscriber.store';
+
+defineProps<{
+  selectedAudios: number[];
+  selectedScreens: number[];
+  selectedLightGroups: number[];
+}>();
+
+defineEmits<{
+  'update:audios': [ids: number[]];
+  'update:screens': [ids: number[]];
+  'update:light-groups': [ids: number[]];
+}>();
+
+const store = useSubscriberStore();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/centurion/CoverPlayButton.vue b/apps/aurora-backoffice/src/components/modes/centurion/CoverPlayButton.vue
new file mode 100644
index 00000000..842510c0
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/centurion/CoverPlayButton.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex justify-center">
+      <div class="relative bg-cover w-full max-w-sm rounded-2xl justify-center">
+        <img :alt="tape!.name" class="w-full rounded-2xl" :src="tape!.coverUrl" />
+        <!-- prettier-ignore -->
+        <div
+          class="group absolute rounded-2xl top-0 w-full h-full flex justify-center items-center
+          hover:bg-black/40 hover:backdrop-blur-sm transition duration-200 cursor-pointer"
+          :class="{
+            'bg-black/40': !store.playing,
+            'backdrop-blur-sm': !store.playing
+          }"
+          @click="
+            async () => {
+              if (store.playing) {
+                await store.pauseCenturion();
+              } else {
+                await store.startCenturion();
+              }
+            }
+          "
+        >
+          <div
+            class="bg-black rounded-full p-5 group-hover:opacity-100 opacity-0 duration-200"
+            :class="{
+              '!opacity-100': !store.playing
+            }"
+          >
+            <i
+              v-if="store.playing"
+              class="pi pi-pause !text-4xl text-white text-center"
+            />
+            <i
+              v-else
+              class="pi pi-play !text-4xl text-white text-center translate-x-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="text-3xl font-semibold text-center w-full">
+      {{ tape!.name }}
+    </div>
+    <div class="text-xl text-center w-full">
+      {{ tape!.artist }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MixTapeResponse } from '@gewis/aurora-api-client';
+import { useCenturionStore } from '@/stores/modes/centurion.store';
+
+defineProps<{
+  tape?: MixTapeResponse;
+}>();
+
+const store = useCenturionStore();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/centurion/InitializeCenturion.vue b/apps/aurora-backoffice/src/components/modes/centurion/InitializeCenturion.vue
new file mode 100644
index 00000000..0166ad06
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/centurion/InitializeCenturion.vue
@@ -0,0 +1,129 @@
+<template>
+  <StepperWrapper current-step="1" :steps="initializationSteps">
+    <template #1>
+      <div class="flex flex-col gap-2 mt-3 sm:mt-0">
+        <div class="sm:text-lg text-center">Select a mixtape for this centurion</div>
+        <Select
+          class="w-full sm:max-w-80 mx-auto"
+          :model-value="selectedTape"
+          option-group-children="items"
+          option-group-label="label"
+          option-label="name"
+          :options="availableTapes"
+          placeholder="Select tape"
+          :title="selectedTape?.name"
+          @update:model-value="
+            (value: MixTapeResponse) => {
+              selectedTape = value;
+            }
+          "
+        >
+          <template #optiongroup="slotProps">
+            <p>{{ slotProps.option.label }}</p>
+          </template>
+        </Select>
+      </div>
+    </template>
+    <template #2>
+      <div class="flex flex-col gap-2 mt-3 sm:mt-0">
+        <div class="sm:text-lg text-center">Select subscribers for this centurion</div>
+        <SubscribersSelect
+          :selected-audios="selectedAudios"
+          :selected-light-groups="selectedLightGroups"
+          :selected-screens="selectedScreens"
+          @update:audios="(ids: number[]) => (selectedAudios = ids)"
+          @update:light-groups="(ids: number[]) => (selectedLightGroups = ids)"
+          @update:screens="(ids: number[]) => (selectedScreens = ids)"
+        />
+      </div>
+    </template>
+    <template #3>
+      <div class="flex flex-col gap-2 mt-3 sm:mt-0">
+        <div class="max-w-lg mx-auto">
+          <div class="sm:text-lg text-center mb-3 font-semibold">
+            Confirm centurion initialization
+          </div>
+          <TapeDetails v-if="selectedTape" :tape="selectedTape" />
+          <SubscriberDetails
+            class="mt-3"
+            :selected-audios="selectedAudios"
+            :selected-light-groups="selectedLightGroups"
+            :selected-screens="selectedScreens"
+          />
+        </div>
+      </div>
+    </template>
+  </StepperWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { MixTapeResponse } from '@gewis/aurora-api-client';
+import SubscriberDetails from '@/components/modes/SubscribersDetails.vue';
+import { useCenturionStore } from '@/stores/modes/centurion.store';
+import TapeDetails from '@/components/modes/centurion/TapeDetails.vue';
+import type { StepperStep } from '@/components/prime/StepperWrapper.vue';
+import StepperWrapper from '@/components/prime/StepperWrapper.vue';
+import SubscribersSelect from '@/components/modes/SubscribersSelect.vue';
+
+interface GroupedTape {
+  label: string;
+  code: string;
+  items: MixTapeResponse[];
+}
+
+interface ArtistGroupedTape {
+  [key: string]: GroupedTape;
+}
+
+defineProps<{
+  vertical: boolean;
+}>();
+
+const centurionStore = useCenturionStore();
+
+const selectedAudios = ref<number[]>([]);
+const selectedScreens = ref<number[]>([]);
+const selectedLightGroups = ref<number[]>([]);
+const selectedTape = ref<MixTapeResponse | undefined>(undefined);
+
+// The available tapes; grouped by artist
+const availableTapes = computed<GroupedTape[] | undefined>(() => {
+  const tapes = centurionStore.getTapes;
+  if (tapes == null) return undefined;
+
+  const tapeByArtist = tapes.reduce((accumulated, tape) => {
+    if (!accumulated[tape.artist]) {
+      accumulated[tape.artist] = {
+        label: tape.artist,
+        code: tape.artist,
+        items: [],
+      };
+    }
+    accumulated[tape.artist].items.push(tape);
+    return accumulated;
+  }, {} as ArtistGroupedTape);
+
+  return Object.keys(tapeByArtist).reduce((acc, artistKey) => {
+    acc.push(tapeByArtist[artistKey]);
+    return acc;
+  }, [] as GroupedTape[]);
+});
+
+const initializationSteps = computed<StepperStep[]>(() => [
+  { value: 'Mixtape', nextDisabled: selectedTape.value === undefined },
+  { value: 'Subscribers', nextDisabled: selectedAudios.value.length === 0 },
+  { value: 'Confirmation', confirmFunction: initialize, confirmLoading: centurionStore.loading },
+]);
+
+// Initialize the centurion
+const initialize = async () => {
+  await centurionStore.initializeCenturion(
+    selectedTape.value!.name,
+    selectedTape.value!.artist,
+    selectedAudios.value,
+    selectedScreens.value,
+    selectedLightGroups.value,
+  );
+};
+</script>
diff --git a/apps/aurora-backoffice/src/components/modes/centurion/TapeDetails.vue b/apps/aurora-backoffice/src/components/modes/centurion/TapeDetails.vue
new file mode 100644
index 00000000..0dd3ef16
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/centurion/TapeDetails.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="text-justify">
+    You are about to start
+    <span class="font-semibold">{{ $props.tape.name }}</span> from
+    <span class="font-semibold">{{ $props.tape.artist }}</span
+    >. This mixtape has <span class="font-semibold">{{ $props.tape.horns }}</span> horns and a
+    duration of <span class="font-semibold">{{ formatDuration($props.tape.duration) }}</span
+    >, for an average of 1 horn every <span class="font-semibold">{{ timePerHorn }}</span> seconds.
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { MixTapeResponse } from '@gewis/aurora-api-client';
+import { formatDuration } from '@/utils/formatterUtils';
+
+const props = defineProps<{
+  tape: MixTapeResponse;
+}>();
+
+const timePerHorn = computed(
+  () => Math.round((props.tape.duration / props.tape.horns) * 1000) / 1000,
+);
+</script>
diff --git a/apps/aurora-backoffice/src/components/modes/centurion/TapeTimeline.vue b/apps/aurora-backoffice/src/components/modes/centurion/TapeTimeline.vue
new file mode 100644
index 00000000..d83f5835
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/centurion/TapeTimeline.vue
@@ -0,0 +1,93 @@
+<template>
+  <Menu class="!border-none columns-1 sm:columns-2" :model="timelineItems">
+    <template #item="{ item: event, props: menuProps }">
+      <a class="flex justify-between" v-bind="menuProps.action">
+        <div class="flex gap-4">
+          <span v-if="event.timestamp"
+            ><b>{{ event.timestamp }}</b></span
+          >
+          <div class="flex gap-2 align-middle">
+            <div v-if="'songs' in event">
+              <div class="flex flex-col gap-4">
+                <span v-if="event.icon" :class="event.icon + ' mr-1'" />
+                <div v-for="song in event.songs" :key="song" class="flex flex-col gap-2">
+                  <i>{{ song.artist }}</i>
+                  <span>{{ song.title }}</span>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <span v-if="event.icon" :class="event.icon + ' mr-1'" />
+              {{ event.label }}
+            </div>
+          </div>
+        </div>
+        <span v-if="event.disabled" class="pi pi-spin pi-spinner" />
+      </a>
+      <divider v-if="!Array.isArray(event.label)" />
+    </template>
+  </Menu>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { MenuItem } from 'primevue/menuitem';
+import type { MixTapeResponse, SongData, SongEvent } from '@gewis/aurora-api-client';
+import { useCenturionStore } from '@/stores/modes/centurion.store';
+import { formatDuration } from '@/utils/formatterUtils';
+
+interface TimelineItem extends MenuItem {
+  songs?: Array<SongData>;
+  timestamp: string;
+}
+
+const store = useCenturionStore();
+
+const props = defineProps<{
+  tape?: MixTapeResponse;
+}>();
+
+const getTracks = (event: SongEvent): Array<SongData> => {
+  let tracks = event.data;
+  if (!Array.isArray(tracks)) tracks = [tracks];
+  return tracks;
+};
+
+const timelineItems = computed((): Array<TimelineItem> => {
+  const startItem: TimelineItem = {
+    timestamp: formatDuration(0),
+    disabled: store.skipping,
+    command: () => {
+      void store.skipCenturion(0);
+    },
+    label: 'Start',
+  };
+
+  const events =
+    props.tape?.events.reduce((timelineItems, event) => {
+      const timelineItem: TimelineItem = {
+        timestamp: formatDuration(event.timestamp),
+        disabled: store.skipping,
+        command: () => {
+          void store.skipCenturion(event.timestamp);
+        },
+      };
+
+      if (event.type === 'horn') {
+        timelineItem.label = event.data.counter.toString();
+        timelineItem.icon = 'pi pi-volume-up';
+      }
+
+      if (event.type === 'song') {
+        timelineItem.songs = getTracks(event);
+      }
+
+      timelineItems.push(timelineItem);
+      return timelineItems;
+    }, [] as Array<TimelineItem>) ?? [];
+
+  return [startItem, ...events];
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerRegister.vue b/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerRegister.vue
new file mode 100644
index 00000000..11b7e434
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerRegister.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="sm:text-lg text-center">Provide player details</div>
+    <div class="flex flex-col gap-2 w-full sm:max-w-80 mx-auto">
+      <InputText v-model="playerName" class="w-full" placeholder="Player name" />
+      <div class="flex gap-10">
+        <div>
+          <Checkbox v-model="isAlcoholFree" binary input-id="isAlcoholFree" name="isAlcoholFree" />
+          <label class="ml-2" for="isAlcoholFree">0.0%</label>
+        </div>
+        <div>
+          <Checkbox v-model="isBac" binary input-id="isBac" name="isBac" />
+          <label class="ml-2" for="isBac">BAC</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+
+const store = useTimeTrailRaceStore();
+
+const playerName = ref<string>('');
+const isAlcoholFree = ref<boolean>(false);
+const isBac = ref<boolean>(false);
+
+const registerPlayer = () => {
+  void store.registerPlayer({
+    name: playerName.value,
+    alcoholFree: isAlcoholFree.value,
+    bac: isBac.value,
+  });
+  playerName.value = '';
+};
+
+const emit = defineEmits(['can-register']);
+watch(playerName, (newPlayerName) => {
+  emit('can-register', newPlayerName.trim().length > 0);
+});
+
+defineExpose({
+  registerPlayer,
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerScore.vue b/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerScore.vue
new file mode 100644
index 00000000..1739ea75
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerScore.vue
@@ -0,0 +1,45 @@
+<template>
+  <div v-if="store.getCurrentPlayer !== undefined" class="flex flex-col gap-2">
+    <div class="text-2xl text-center font-semibold">
+      {{ store.getCurrentPlayer.name }}'s final score
+    </div>
+    <div class="w-max-lg mx-auto">
+      <table>
+        <tbody>
+          <tr>
+            <td class="font-bold pr-8">Time:</td>
+            <td>
+              {{ stopwatch }}
+            </td>
+          </tr>
+          <tr>
+            <td class="font-bold pr-8">Position:</td>
+            <td>{{ position }} / {{ store.scoreboard.length }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ScoreboardItem } from '@gewis/aurora-api-client';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import { toStopwatchString } from '@/utils/timeUtils';
+
+const store = useTimeTrailRaceStore();
+
+const position = computed(() => {
+  return (store.scoreboard.findIndex((s) => s.uuid === store.currentPlayer?.uuid) ?? -2) + 1;
+});
+
+const stopwatch = computed(() => {
+  if (!store.getCurrentPlayer) return '';
+  const time = (store.getCurrentPlayer as ScoreboardItem).timeMs;
+  if (!time) return '';
+  return toStopwatchString(time);
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerTimer.vue b/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerTimer.vue
new file mode 100644
index 00000000..bb7c8549
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/time-trail-race/PlayerTimer.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="w-full text-center text-4xl font-bold">{{ timeString }}</div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import { toStopwatchString } from '@/utils/timeUtils';
+
+const now = ref(new Date());
+const interval = ref<number>();
+const timeTrailStore = useTimeTrailRaceStore();
+
+const timeString = computed(() => {
+  const totalDiffMs = timeTrailStore.startTime
+    ? now.value.getTime() - timeTrailStore.startTime.getTime()
+    : Number.NaN;
+  return toStopwatchString(totalDiffMs);
+});
+
+const setTime = () => {
+  now.value = new Date();
+};
+
+onMounted(() => {
+  interval.value = setInterval(setTime, 20);
+});
+onUnmounted(() => {
+  clearInterval(interval.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue b/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue
new file mode 100644
index 00000000..8a91c0b0
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceInitialize.vue
@@ -0,0 +1,84 @@
+<template>
+  <StepperWrapper current-step="1" :steps="initializationSteps">
+    <template #1>
+      <div class="flex flex-col gap-2 mt-3 sm:mt-0">
+        <div class="sm:text-lg text-center">Provide a name for this session</div>
+        <InputText
+          id="time-trail-race-session-name"
+          v-model="sessionName"
+          class="w-full sm:max-w-80 mx-auto"
+          placeholder="Session name"
+        />
+      </div>
+    </template>
+    <template #2>
+      <div class="flex flex-col gap-2 mt-3 sm:mt-0">
+        <div class="sm:text-lg text-center">Select subscribers for this centurion</div>
+        <SubscribersSelect
+          :selected-audios="selectedAudios"
+          :selected-light-groups="selectedLightGroups"
+          :selected-screens="selectedScreens"
+          @update:audios="(ids: number[]) => (selectedAudios = ids)"
+          @update:light-groups="(ids: number[]) => (selectedLightGroups = ids)"
+          @update:screens="(ids: number[]) => (selectedScreens = ids)"
+        />
+      </div>
+    </template>
+    <template #3>
+      <div class="flex flex-col gap-2 mt-3 sm:mt-0">
+        <div class="max-w-lg mx-auto">
+          <div class="sm:text-lg text-center mb-3 font-semibold">
+            Confirm time trail race initialization
+          </div>
+          <div class="text-justify">
+            You are about to start to start a time trail race session called
+            <span class="font-semibold">{{ sessionName }}</span
+            >.
+          </div>
+          <SubscriberDetails
+            class="mt-3"
+            :selected-audios="selectedAudios"
+            :selected-light-groups="selectedLightGroups"
+            :selected-screens="selectedScreens"
+          />
+        </div>
+      </div>
+    </template>
+  </StepperWrapper>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import SubscribersSelect from '@/components/modes/SubscribersSelect.vue';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import StepperWrapper, { type StepperStep } from '@/components/prime/StepperWrapper.vue';
+import SubscriberDetails from '@/components/modes/SubscribersDetails.vue';
+
+const store = useTimeTrailRaceStore();
+
+const sessionName = ref<string>('');
+const selectedAudios = ref<number[]>([]);
+const selectedScreens = ref<number[]>([]);
+const selectedLightGroups = ref<number[]>([]);
+
+const confirmModalOpen = ref<boolean>(false);
+const confirmModalLoading = ref<boolean>(false);
+
+const initializationSteps = computed<StepperStep[]>(() => [
+  { value: 'Session', nextDisabled: sessionName.value === '' },
+  { value: 'Subscribers', nextDisabled: selectedAudios.value.length === 0 },
+  { value: 'Confirmation', confirmFunction: initialize },
+]);
+
+const initialize = async () => {
+  confirmModalLoading.value = true;
+  await store.initializeTimeTrailMode(
+    sessionName.value,
+    selectedAudios.value,
+    selectedScreens.value,
+    selectedLightGroups.value,
+  );
+  confirmModalOpen.value = false;
+  confirmModalLoading.value = false;
+};
+</script>
diff --git a/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceScoreboard.vue b/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceScoreboard.vue
new file mode 100644
index 00000000..210ebd73
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceScoreboard.vue
@@ -0,0 +1,29 @@
+<template>
+  <table class="w-full">
+    <tbody>
+      <tr v-for="(score, index) in store.scoreboard" :key="score.name">
+        <td class="text-right font-bold pr-1">
+          {{ index + 1 }}
+        </td>
+        <td class="text-right font-bold pr-2" :class="score.bac && 'player-bac'">
+          <i v-if="score.alcoholFree" class="pi pi-asterisk mr-1" title="Alcohol free" />
+          {{ score.name }}
+        </td>
+        <td>{{ toStopwatchString(score.timeMs) }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import { toStopwatchString } from '@/utils/timeUtils';
+
+const store = useTimeTrailRaceStore();
+</script>
+
+<style scoped>
+.player-bac {
+  text-shadow: lightgreen 0 0 2px;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue b/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue
new file mode 100644
index 00000000..7432eb47
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/modes/time-trail-race/TimeTrailRaceStepper.vue
@@ -0,0 +1,116 @@
+<template>
+  <StepperWrapper :current-step="currentStep" :steps="timeTrailSteps">
+    <template #1>
+      <TimeTrailRaceRegisterPlayer ref="registerPlayer" @can-register="canRegister = $event" />
+    </template>
+    <template #2 />
+    <template #3 />
+    <template #4>
+      <TimeTrailRacePlaying />
+    </template>
+    <template #5>
+      <TimeTrailRaceScore />
+    </template>
+  </StepperWrapper>
+
+  <ConfirmWrapper
+    ref="confirmRef"
+    accept-label="Reset"
+    message="Are you sure you want to reset this trail race?"
+    :on-accept="timeTrailStore.resetPlayer"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { TimeTrailRaceState } from '@gewis/aurora-api-client';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import TimeTrailRaceRegisterPlayer from '@/components/modes/time-trail-race/PlayerRegister.vue';
+import TimeTrailRacePlaying from '@/components/modes/time-trail-race/PlayerTimer.vue';
+import TimeTrailRaceScore from '@/components/modes/time-trail-race/PlayerScore.vue';
+import StepperWrapper, { type StepperStep } from '@/components/prime/StepperWrapper.vue';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+
+const registerPlayer = ref();
+const confirmRef = ref();
+const canRegister = ref<boolean>(false);
+
+const timeTrailStore = useTimeTrailRaceStore();
+// Make sure that on reload you are always in correct state
+if (!timeTrailStore.getCurrentPlayer) {
+  void timeTrailStore.resetPlayer();
+}
+
+const timeTrailSteps = computed<StepperStep[]>(() => [
+  {
+    value: 'Register',
+    nextText: 'Register player',
+    nextIcon: null,
+    nextDisabled: timeTrailStore.loading || currentStep.value != '1' || !canRegister.value,
+    nextFunction: registerPlayer.value?.registerPlayer,
+  },
+  {
+    value: 'Ready',
+    previousIcon: 'pi pi-history',
+    previousDisabled: timeTrailStore.loading,
+    previousFunction: confirmRef.value?.confirmDialog,
+    overridePreviousFunction: true,
+    nextText: 'Player ready',
+    nextIcon: null,
+    nextDisabled: timeTrailStore.loading || currentStep.value != '2',
+    nextFunction: timeTrailStore.ready.bind(timeTrailStore),
+  },
+  {
+    value: 'Start',
+    previousIcon: 'pi pi-history',
+    previousDisabled: timeTrailStore.loading,
+    previousFunction: confirmRef.value?.confirmDialog,
+    overridePreviousFunction: true,
+    nextText: 'Start!',
+    nextIcon: null,
+    nextDisabled: timeTrailStore.loading || currentStep.value != '3',
+    nextFunction: timeTrailStore.start.bind(timeTrailStore),
+  },
+  {
+    value: 'Finish',
+    previousIcon: 'pi pi-history',
+    previousDisabled: timeTrailStore.loading,
+    previousFunction: confirmRef.value?.confirmDialog,
+    overridePreviousFunction: true,
+    nextText: 'Finish!',
+    nextIcon: null,
+    nextDisabled: timeTrailStore.loading || currentStep.value != '4',
+    nextFunction: timeTrailStore.finish.bind(timeTrailStore),
+  },
+  {
+    value: 'Reveal',
+    previousIcon: 'pi pi-history',
+    previousDisabled: timeTrailStore.loading,
+    previousFunction: confirmRef.value?.confirmDialog,
+    overridePreviousFunction: true,
+    confirmText: 'Reveal score',
+    confirmIcon: null,
+    confirmDisabled: timeTrailStore.loading || currentStep.value != '5',
+    confirmFunction: timeTrailStore.revealScore.bind(timeTrailStore),
+  },
+]);
+
+const currentStep = computed(() => {
+  switch (timeTrailStore.getState) {
+    case undefined:
+    case TimeTrailRaceState.INITIALIZED:
+    case TimeTrailRaceState.SCOREBOARD:
+      return '1';
+    case TimeTrailRaceState.PLAYER_REGISTERED:
+      return '2';
+    case TimeTrailRaceState.PLAYER_READY:
+      return '3';
+    case TimeTrailRaceState.STARTED:
+      return '4';
+    case TimeTrailRaceState.FINISHED:
+      return '5';
+    default:
+      return '1';
+  }
+});
+</script>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterBorrelModeSwitch.vue b/apps/aurora-backoffice/src/components/poster/PosterBorrelModeSwitch.vue
new file mode 100644
index 00000000..9e13d13f
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterBorrelModeSwitch.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-row items-center justify-center gap-2">
+    <label for="poster-borrel-mode-switch">Borrel mode</label>
+    <ToggleSwitch
+      id="poster-borrel-mode-switch"
+      :disabled="store.loading || !isPrivileged"
+      :model-value="store.carousel.borrelModeActive"
+      @change="store.setBorrelMode!(!store.carousel.borrelModeActive)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useAuthStore } from '@/stores/auth.store';
+
+const store = usePosterStore();
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterButtonDelete.vue b/apps/aurora-backoffice/src/components/poster/PosterButtonDelete.vue
new file mode 100644
index 00000000..c2a66f12
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterButtonDelete.vue
@@ -0,0 +1,49 @@
+<template>
+  <Button
+    class="flex-1"
+    :disabled="!deletable"
+    icon="pi pi-trash"
+    severity="danger"
+    @click="confirmRef?.confirmDialog"
+  />
+  <ConfirmWrapper
+    ref="confirmRef"
+    accept-label="Delete"
+    :loading="loading"
+    message="Are you sure you want to delete this poster?"
+    :on-accept="
+      async () => {
+        loading = true;
+        await store.deletePoster(props.poster.id);
+        loading = false;
+      }
+    "
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { type PosterResponse, PosterType } from '@gewis/aurora-api-client';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+import { usePosterStore } from '@/stores/poster/poster.store';
+
+const store = usePosterStore();
+
+const props = defineProps<{
+  poster: PosterResponse;
+  disabled?: boolean;
+}>();
+
+const confirmRef = ref();
+const loading = ref<boolean>(false);
+
+const deletable = computed(
+  () =>
+    !props.disabled &&
+    [PosterType.PHOTO, PosterType.IMG, PosterType.VIDEO, PosterType.EXTERN].includes(
+      props.poster.type,
+    ),
+);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterCard.vue b/apps/aurora-backoffice/src/components/poster/PosterCard.vue
new file mode 100644
index 00000000..3984df1e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterCard.vue
@@ -0,0 +1,92 @@
+<template>
+  <AppBox class="h-full flex flex-col gap-3">
+    <div class="relative">
+      <PosterMediaGallery
+        v-if="poster.type === PosterType.IMG || poster.type === PosterType.VIDEO"
+        :files="poster.files"
+        :is-video="poster.type === PosterType.VIDEO"
+        :name="poster.name"
+      />
+      <a
+        v-else-if="poster.type === PosterType.EXTERN"
+        class="w-full aspect-video rounded-lg overflow-hidden bg-surface-300 text-primary-contrast flex justify-center items-center hover:brightness-50 transition duration-200"
+        :href="mediaUrl"
+        target="_blank"
+      >
+        {{ capitalize(poster.type) }}
+      </a>
+      <div
+        v-else-if="poster.type === PosterType.PHOTO"
+        class="w-full aspect-video rounded-lg overflow-hidden bg-surface-300 text-primary-contrast flex flex-col justify-center items-center"
+      >
+        <i class="pi pi-images text-2xl" />
+        <span>{{ poster.albums?.length ?? 0 }} album(s)</span>
+      </div>
+      <div
+        v-else
+        class="w-full aspect-video rounded-lg overflow-hidden bg-surface-300 text-primary-contrast flex justify-center items-center"
+      >
+        {{ capitalize(poster.type) }}
+      </div>
+      <PosterStatusIndicator
+        class="absolute top-2 right-2 z-10 ring-2 ring-black/30"
+        :poster="poster"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1 min-w-0">
+      <div class="font-bold truncate" :title="poster.name">
+        {{ poster.name }}
+      </div>
+      <div
+        v-if="poster.type !== PosterType.PHOTO"
+        class="min-h-[1.25rem] text-sm truncate"
+        :class="poster.label ? 'opacity-70' : 'opacity-40 italic'"
+      >
+        {{ poster.label || '(no title)' }}
+      </div>
+      <div class="text-xs italic opacity-50">
+        <i class="pi pi-clock" />
+        {{ poster.defaultTimeout }} seconds
+      </div>
+    </div>
+
+    <div class="mt-auto flex flex-row items-center gap-2">
+      <span v-tooltip.top="poster.trello ? 'Managed via Trello' : undefined" class="flex-1 flex">
+        <PosterButtonDelete :disabled="poster.trello || !isPrivileged" :poster="poster" />
+      </span>
+      <span v-tooltip.top="poster.trello ? 'Managed via Trello' : undefined" class="flex-1 flex">
+        <PosterEdit :disabled="poster.trello || !isPrivileged" :poster="poster" />
+      </span>
+      <StaticPosterButtonShow
+        :disabled="poster.type === PosterType.PHOTO || !isPrivileged"
+        :poster="poster"
+      />
+    </div>
+  </AppBox>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type PosterResponse, PosterType } from '@gewis/aurora-api-client';
+import { useAuthStore } from '@/stores/auth.store';
+import AppBox from '@/layout/AppBox.vue';
+import PosterButtonDelete from '@/components/poster/PosterButtonDelete.vue';
+import PosterEdit from '@/components/poster/PosterEdit.vue';
+import PosterMediaGallery from '@/components/poster/PosterMediaGallery.vue';
+import PosterStatusIndicator from '@/components/poster/PosterStatusIndicator.vue';
+import StaticPosterButtonShow from '@/components/poster/StaticPosterButtonShow.vue';
+
+const props = defineProps<{
+  poster: PosterResponse;
+}>();
+
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+
+const mediaUrl = computed(() => props.poster.files?.[0]?.location ?? props.poster.uri ?? '');
+
+const capitalize = (text: string) => {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+</script>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterCarouselOrder.vue b/apps/aurora-backoffice/src/components/poster/PosterCarouselOrder.vue
new file mode 100644
index 00000000..d2e1b74b
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterCarouselOrder.vue
@@ -0,0 +1,103 @@
+<template>
+  <div v-if="orderedPosters.length === 0" class="text-center italic opacity-70 py-4">
+    No posters to order
+  </div>
+  <ul v-else class="flex flex-col gap-1">
+    <li
+      v-for="(poster, index) in orderedPosters"
+      :key="poster.id"
+      class="flex items-center gap-2 w-full px-2 py-2 rounded select-none border border-surface"
+      :class="{
+        'cursor-move': isPrivileged,
+        'cursor-default': !isPrivileged,
+        'opacity-50': dragIndex === index,
+        'opacity-40 grayscale': isPosterInactive(poster),
+      }"
+      :draggable="isPrivileged"
+      @dragend="onDragEnd"
+      @dragenter.prevent="onDragEnter(index)"
+      @dragover.prevent
+      @dragstart="onDragStart(index)"
+      @drop="onDrop"
+    >
+      <i class="pi pi-bars opacity-40 shrink-0" />
+      <span class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden" :title="poster.name">
+        {{ poster.name }}
+      </span>
+      <Tag class="shrink-0 text-xs" severity="secondary" :value="poster.type" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { type PosterResponse } from '@gewis/aurora-api-client';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useAuthStore } from '@/stores/auth.store';
+
+const store = usePosterStore();
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+
+const isPosterInactive = (poster: PosterResponse): boolean => {
+  if (!poster.enabled) return true;
+  if (poster.borrelMode && !store.carousel.borrelModeActive) return true;
+  return false;
+};
+
+const orderedPosters = ref<PosterResponse[]>([]);
+const dragIndex = ref<number | null>(null);
+
+const isDateIneligible = (poster: PosterResponse): boolean => {
+  const now = new Date();
+  if (poster.startDate && new Date(poster.startDate) > now) return true;
+  if (poster.expirationDate && new Date(poster.expirationDate) < now) return true;
+  return false;
+};
+
+const buildOrdered = () => {
+  const byId = new Map(store.posters.map((p) => [p.id, p]));
+  const ordered: PosterResponse[] = [];
+  const seen = new Set<number>();
+  for (const id of store.carousel.carouselOrder) {
+    const poster = byId.get(id);
+    if (poster && !isDateIneligible(poster)) {
+      ordered.push(poster);
+      seen.add(id);
+    }
+  }
+  for (const poster of store.posters) {
+    if (!seen.has(poster.id) && !isDateIneligible(poster)) ordered.push(poster);
+  }
+  orderedPosters.value = ordered;
+};
+
+watch(() => [store.posters, store.carousel.carouselOrder], buildOrdered, {
+  immediate: true,
+  deep: true,
+});
+
+const onDragStart = (index: number) => {
+  dragIndex.value = index;
+};
+
+const onDragEnter = (index: number) => {
+  if (dragIndex.value === null || dragIndex.value === index) return;
+  const items = orderedPosters.value;
+  const [moved] = items.splice(dragIndex.value, 1);
+  items.splice(index, 0, moved);
+  dragIndex.value = index;
+};
+
+const onDrop = () => {
+  if (!isPrivileged.value) return;
+  void store.setPosterOrder(orderedPosters.value.map((p) => p.id));
+  dragIndex.value = null;
+};
+
+const onDragEnd = () => {
+  dragIndex.value = null;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterCreationDialog.vue b/apps/aurora-backoffice/src/components/poster/PosterCreationDialog.vue
new file mode 100644
index 00000000..77119db1
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterCreationDialog.vue
@@ -0,0 +1,379 @@
+<template>
+  <Button :disabled="!isPrivileged" icon="pi pi-plus" label="Add poster" @click="open" />
+  <Dialog
+    closable
+    close-on-escape
+    dismissable-mask
+    header="Add poster"
+    :keep-in-viewport="false"
+    modal
+    :visible="visible"
+    @update:visible="(v) => (visible = v)"
+  >
+    <form class="flex flex-col gap-4 w-[32rem] max-w-full" @submit.prevent="onSubmit">
+      <div class="flex flex-col gap-2">
+        <label for="poster-type">Type</label>
+        <Select
+          id="poster-type"
+          v-model="type"
+          :invalid="submitted && !type"
+          option-label="label"
+          option-value="value"
+          :options="typeOptions"
+          placeholder="Choose a type"
+        />
+        <Message v-if="submitted && !type" severity="error" size="small" variant="simple">
+          Please pick a poster type
+        </Message>
+      </div>
+
+      <div v-if="type" class="flex flex-col gap-2">
+        <label for="poster-name">Name</label>
+        <InputText
+          id="poster-name"
+          v-model="name"
+          :invalid="submitted && !name.trim()"
+          placeholder="My poster"
+        />
+        <Message v-if="submitted && !name.trim()" severity="error" size="small" variant="simple">
+          Name is required
+        </Message>
+      </div>
+
+      <div v-if="type === PosterTypeExternal.EXTERN" class="flex flex-col gap-2">
+        <label for="poster-uri">URL</label>
+        <InputText
+          id="poster-uri"
+          v-model="uri"
+          :invalid="submitted && !uriValid"
+          placeholder="https://..."
+          type="url"
+        />
+        <Message v-if="submitted && !uriValid" severity="error" size="small" variant="simple">
+          Please enter a valid URL
+        </Message>
+      </div>
+
+      <div v-else-if="type === 'file'" class="flex flex-col gap-2">
+        <label>Files</label>
+        <input
+          ref="fileSelector"
+          accept="image/*,video/*"
+          hidden
+          multiple
+          type="file"
+          @change="handleFileSelect"
+        />
+        <div class="flex flex-row gap-2 items-center">
+          <Button
+            icon="pi pi-upload"
+            label="Add files"
+            severity="secondary"
+            type="button"
+            @click="fileSelector?.click()"
+          />
+          <span v-if="!files.length" class="text-sm opacity-50 italic">No files chosen</span>
+        </div>
+        <ul v-if="files.length" class="flex flex-col gap-1 m-0 p-0 list-none">
+          <li v-for="(f, i) in files" :key="i" class="flex flex-row gap-2 items-center text-sm">
+            <span class="truncate flex-1 opacity-75">{{ f.name }}</span>
+            <Button
+              icon="pi pi-times"
+              severity="secondary"
+              size="small"
+              text
+              type="button"
+              @click="removeFile(i)"
+            />
+          </li>
+        </ul>
+        <Message v-if="submitted && !files.length" severity="error" size="small" variant="simple">
+          Please choose at least one file
+        </Message>
+        <Message v-else-if="mixedMedia" severity="error" size="small" variant="simple">
+          A poster can't mix images and videos. Please select only images or only videos.
+        </Message>
+      </div>
+
+      <div v-else-if="type === PosterTypePhoto.PHOTO" class="flex flex-col gap-2">
+        <label for="poster-albums">Album IDs</label>
+        <InputChips
+          id="poster-albums"
+          v-model="albums"
+          :invalid="submitted && albums.length === 0"
+          :placeholder="albums.length === 0 ? 'Type an ID and press Enter' : ''"
+          separator=","
+          @add="onAlbumAdd"
+        />
+        <Message
+          v-if="submitted && albums.length === 0"
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          Please add at least one album ID
+        </Message>
+        <Message v-else-if="albumError" severity="error" size="small" variant="simple">
+          Album IDs must be numeric
+        </Message>
+      </div>
+
+      <template v-if="type">
+        <Divider />
+
+        <div v-if="type !== PosterTypePhoto.PHOTO" class="flex flex-col gap-2">
+          <label for="poster-label">Label (optional)</label>
+          <InputText id="poster-label" v-model="label" placeholder="Poster Title" />
+        </div>
+
+        <div class="flex flex-row gap-4">
+          <div class="flex flex-col gap-2 flex-1">
+            <label for="poster-timeout">Default timeout (seconds)</label>
+            <InputNumber id="poster-timeout" v-model="defaultTimeout" :min="1" show-buttons />
+          </div>
+          <div class="flex flex-col gap-2 flex-1">
+            <label for="poster-footer">Footer size</label>
+            <Select
+              id="poster-footer"
+              v-model="footerSize"
+              option-label="label"
+              option-value="value"
+              :options="footerSizeOptions"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <label for="poster-color">Accent color</label>
+          <div class="flex flex-row gap-2 items-center">
+            <ColorPicker id="poster-color" v-model="accentColorInput" />
+            <InputText v-model="accentColorInput" class="w-28" maxlength="7" placeholder="ff0000" />
+            <Button
+              v-if="accentColor"
+              icon="pi pi-times"
+              severity="secondary"
+              size="small"
+              text
+              type="button"
+              @click="accentColor = ''"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-row gap-4">
+          <div class="flex flex-col gap-2 flex-1">
+            <label for="poster-start">Starts at</label>
+            <DatePicker id="poster-start" v-model="startDate" show-icon show-time />
+          </div>
+          <div class="flex flex-col gap-2 flex-1">
+            <label for="poster-expiration">Expires at</label>
+            <DatePicker id="poster-expiration" v-model="expirationDate" show-icon show-time />
+          </div>
+        </div>
+
+        <div v-if="store.carousel.borrelModePresent" class="flex flex-row items-center gap-3">
+          <ToggleSwitch v-model="borrelMode" input-id="poster-borrel" />
+          <label class="cursor-pointer" for="poster-borrel">Only show during Borrel mode</label>
+        </div>
+      </template>
+
+      <div class="flex flex-row justify-end gap-2 mt-2">
+        <Button label="Cancel" severity="secondary" type="button" @click="visible = false" />
+        <Button
+          :disabled="loading"
+          label="Create"
+          :loading="loading"
+          severity="success"
+          type="submit"
+        />
+      </div>
+    </form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import DatePicker from 'primevue/datepicker';
+import InputChips from 'primevue/inputchips';
+import {
+  type ExternalPosterRequest,
+  FooterSize,
+  type MediaPosterRequest,
+  type PhotoPosterRequest,
+  PosterTypeExternal,
+  PosterTypeImage,
+  PosterTypePhoto,
+  PosterTypeVideo,
+} from '@gewis/aurora-api-client';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+import { useAuthStore } from '@/stores/auth.store';
+
+type CreatableType = 'file' | PosterTypeExternal.EXTERN | PosterTypePhoto.PHOTO;
+
+const store = usePosterStore();
+const settingsStore = useServerSettingsStore();
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+
+const visible = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const submitted = ref<boolean>(false);
+
+const type = ref<CreatableType | null>(null);
+const name = ref<string>('');
+const label = ref<string>('');
+const uri = ref<string>('');
+const files = ref<File[]>([]);
+const albums = ref<string[]>([]);
+const albumError = ref<boolean>(false);
+const accentColor = ref<string>('');
+const startDate = ref<Date | null>(null);
+const expirationDate = ref<Date | null>(null);
+const footerSize = ref<FooterSize>(FooterSize.FULL);
+const defaultTimeout = ref<number>(15);
+const borrelMode = ref<boolean>(false);
+const fileSelector = ref<HTMLInputElement | null>(null);
+
+const defaultAccentColor = computed(() =>
+  (settingsStore.serverSettings?.['Poster.DefaultProgressBarColor'] ?? '')
+    .replace(/^#/, '')
+    .toLowerCase(),
+);
+
+const accentColorInput = computed({
+  get: () => accentColor.value || defaultAccentColor.value,
+  set: (v: string) => {
+    accentColor.value = v.replace(/^#/, '').toLowerCase();
+  },
+});
+
+const typeOptions = [
+  { label: 'File', value: 'file' as const },
+  { label: 'URL', value: PosterTypeExternal.EXTERN },
+  { label: 'Photo album', value: PosterTypePhoto.PHOTO },
+];
+
+const footerSizeOptions = [
+  { label: 'Full', value: FooterSize.FULL },
+  { label: 'Minimal', value: FooterSize.MINIMAL },
+  { label: 'Hidden', value: FooterSize.HIDDEN },
+];
+
+const uriValid = computed(() => {
+  try {
+    new URL(uri.value);
+    return true;
+  } catch {
+    return false;
+  }
+});
+
+const mixedMedia = computed(() => {
+  const kinds = new Set(files.value.map((f) => (f.type.startsWith('video/') ? 'video' : 'image')));
+  return kinds.size > 1;
+});
+
+const open = () => {
+  reset();
+  visible.value = true;
+};
+
+const reset = () => {
+  submitted.value = false;
+  type.value = null;
+  name.value = '';
+  label.value = '';
+  uri.value = '';
+  files.value = [];
+  albums.value = [];
+  albumError.value = false;
+  accentColor.value = '';
+  startDate.value = null;
+  expirationDate.value = null;
+  footerSize.value = FooterSize.FULL;
+  defaultTimeout.value = 15;
+  borrelMode.value = false;
+};
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const picked = Array.from(target.files ?? []);
+  // Reset the input so picking the same file again still fires a change event.
+  target.value = '';
+  if (picked.length === 0) return;
+
+  files.value = [...files.value, ...picked];
+  if (!name.value) name.value = picked[0].name;
+
+  // Auto-fill the timeout from the video duration only when a single video is selected.
+  if (files.value.length === 1 && picked[0].type.startsWith('video/')) {
+    const url = URL.createObjectURL(picked[0]);
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.onloadedmetadata = () => {
+      if (isFinite(video.duration)) defaultTimeout.value = Math.round(video.duration);
+      URL.revokeObjectURL(url);
+    };
+    video.src = url;
+  }
+};
+
+const removeFile = (index: number) => {
+  files.value.splice(index, 1);
+};
+
+const onAlbumAdd = () => {
+  albumError.value = albums.value.some((v) => !/^\d+$/.test(v.trim()));
+};
+
+const buildBase = () => ({
+  name: name.value.trim(),
+  ...(label.value && { label: label.value }),
+  ...(accentColor.value && { accentColor: accentColor.value }),
+  ...(startDate.value && { startDate: startDate.value.toISOString() }),
+  ...(expirationDate.value && { expirationDate: expirationDate.value.toISOString() }),
+  footerSize: footerSize.value,
+  defaultTimeout: defaultTimeout.value,
+  borrelMode: borrelMode.value,
+});
+
+const onSubmit = async () => {
+  submitted.value = true;
+  if (!type.value || !name.value.trim()) return;
+
+  if (type.value === 'file') {
+    if (!files.value.length || mixedMedia.value) return;
+    loading.value = true;
+    const mediaType = files.value[0].type.startsWith('video/')
+      ? PosterTypeVideo.VIDEO
+      : PosterTypeImage.IMG;
+    const params: MediaPosterRequest = { ...buildBase(), type: mediaType };
+    await store.createPosterMedia(params, files.value);
+  } else if (type.value === PosterTypeExternal.EXTERN) {
+    if (!uriValid.value) return;
+    loading.value = true;
+    const params: ExternalPosterRequest = {
+      ...buildBase(),
+      type: PosterTypeExternal.EXTERN,
+      uri: uri.value,
+    };
+    await store.createPoster(params);
+  } else if (type.value === PosterTypePhoto.PHOTO) {
+    onAlbumAdd();
+    if (albums.value.length === 0 || albumError.value) return;
+    loading.value = true;
+    const params: PhotoPosterRequest = {
+      ...buildBase(),
+      type: PosterTypePhoto.PHOTO,
+      albums: albums.value.map((v) => Number(v.trim())),
+    };
+    await store.createPoster(params);
+  }
+
+  loading.value = false;
+  visible.value = false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterEdit.vue b/apps/aurora-backoffice/src/components/poster/PosterEdit.vue
new file mode 100644
index 00000000..fde14e4e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterEdit.vue
@@ -0,0 +1,228 @@
+<template>
+  <Button class="flex-1" :disabled="disabled" icon="pi pi-pencil" severity="warn" @click="open" />
+  <Dialog
+    closable
+    close-on-escape
+    dismissable-mask
+    header="Edit poster"
+    :keep-in-viewport="false"
+    modal
+    :visible="visible"
+    @update:visible="(v) => (visible = v)"
+  >
+    <form class="flex flex-col gap-4 w-[32rem] max-w-full" @submit.prevent="onSubmit">
+      <div class="flex flex-col gap-2">
+        <label for="poster-edit-name">Name</label>
+        <InputText
+          id="poster-edit-name"
+          v-model="name"
+          :invalid="submitted && !name.trim()"
+          placeholder="My poster"
+        />
+        <Message v-if="submitted && !name.trim()" severity="error" size="small" variant="simple">
+          Name is required
+        </Message>
+      </div>
+
+      <div v-if="poster.type !== PosterType.PHOTO" class="flex flex-col gap-2">
+        <label for="poster-edit-label">Label (optional)</label>
+        <InputText id="poster-edit-label" v-model="label" placeholder="Poster Title" />
+      </div>
+
+      <div v-if="poster.type === PosterType.PHOTO" class="flex flex-col gap-2">
+        <label for="poster-edit-albums">Album IDs</label>
+        <InputChips
+          id="poster-edit-albums"
+          v-model="albums"
+          :invalid="submitted && albums.length === 0"
+          :placeholder="albums.length === 0 ? 'Type an ID and press Enter' : ''"
+          separator=","
+          @add="onAlbumAdd"
+        />
+        <Message
+          v-if="submitted && albums.length === 0"
+          severity="error"
+          size="small"
+          variant="simple"
+        >
+          Please add at least one album ID
+        </Message>
+        <Message v-else-if="albumError" severity="error" size="small" variant="simple">
+          Album IDs must be numeric
+        </Message>
+      </div>
+
+      <Divider />
+
+      <div class="flex flex-row gap-4">
+        <div class="flex flex-col gap-2 flex-1">
+          <label for="poster-edit-timeout">Default timeout (seconds)</label>
+          <InputNumber id="poster-edit-timeout" v-model="defaultTimeout" :min="1" show-buttons />
+        </div>
+        <div class="flex flex-col gap-2 flex-1">
+          <label for="poster-edit-footer">Footer size</label>
+          <Select
+            id="poster-edit-footer"
+            v-model="footerSize"
+            option-label="label"
+            option-value="value"
+            :options="footerSizeOptions"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label for="poster-edit-color">Accent color</label>
+        <div class="flex flex-row gap-2 items-center">
+          <ColorPicker id="poster-edit-color" v-model="accentColorInput" />
+          <InputText v-model="accentColorInput" class="w-28" maxlength="7" placeholder="ff0000" />
+          <Button
+            v-if="accentColor !== originalAccentColor"
+            icon="pi pi-refresh"
+            severity="secondary"
+            size="small"
+            text
+            type="button"
+            @click="accentColor = originalAccentColor"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-row gap-4">
+        <div class="flex flex-col gap-2 flex-1">
+          <label for="poster-edit-start">Starts at</label>
+          <DatePicker id="poster-edit-start" v-model="startDate" show-icon show-time />
+        </div>
+        <div class="flex flex-col gap-2 flex-1">
+          <label for="poster-edit-expiration">Expires at</label>
+          <DatePicker id="poster-edit-expiration" v-model="expirationDate" show-icon show-time />
+        </div>
+      </div>
+
+      <div v-if="store.carousel.borrelModePresent" class="flex flex-row items-center gap-3">
+        <ToggleSwitch v-model="borrelMode" input-id="poster-edit-borrel" />
+        <label class="cursor-pointer" for="poster-edit-borrel">Only show during Borrel mode</label>
+      </div>
+
+      <div class="flex flex-row justify-end gap-2 mt-2">
+        <Button label="Cancel" severity="secondary" type="button" @click="visible = false" />
+        <Button
+          :disabled="loading"
+          label="Save"
+          :loading="loading"
+          severity="success"
+          type="submit"
+        />
+      </div>
+    </form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import DatePicker from 'primevue/datepicker';
+import InputChips from 'primevue/inputchips';
+import {
+  FooterSize,
+  type PosterResponse,
+  PosterType,
+  type UpdatePosterRequest,
+} from '@gewis/aurora-api-client';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+
+const props = defineProps<{
+  poster: PosterResponse;
+  disabled?: boolean;
+}>();
+
+const store = usePosterStore();
+const settingsStore = useServerSettingsStore();
+
+const visible = ref<boolean>(false);
+const loading = ref<boolean>(false);
+const submitted = ref<boolean>(false);
+
+const name = ref<string>('');
+const label = ref<string>('');
+const albums = ref<string[]>([]);
+const albumError = ref<boolean>(false);
+const defaultTimeout = ref<number>(15);
+const footerSize = ref<FooterSize>(FooterSize.FULL);
+const accentColor = ref<string>('');
+const originalAccentColor = ref<string>('');
+const startDate = ref<Date | null>(null);
+const expirationDate = ref<Date | null>(null);
+const borrelMode = ref<boolean>(false);
+
+const defaultAccentColor = computed(() =>
+  (settingsStore.serverSettings?.['Poster.DefaultProgressBarColor'] ?? '')
+    .replace(/^#/, '')
+    .toLowerCase(),
+);
+
+const accentColorInput = computed({
+  get: () => accentColor.value || defaultAccentColor.value,
+  set: (v: string) => {
+    accentColor.value = v.replace(/^#/, '').toLowerCase();
+  },
+});
+
+const footerSizeOptions = [
+  { label: 'Full', value: FooterSize.FULL },
+  { label: 'Minimal', value: FooterSize.MINIMAL },
+  { label: 'Hidden', value: FooterSize.HIDDEN },
+];
+
+const open = () => {
+  submitted.value = false;
+  name.value = props.poster.name;
+  label.value = props.poster.label ?? '';
+  albums.value = (props.poster.albums ?? []).map(String);
+  albumError.value = false;
+  defaultTimeout.value = props.poster.defaultTimeout;
+  footerSize.value = props.poster.footerSize;
+  const normalizedAccent = (props.poster.accentColor ?? '').replace(/^#/, '').toLowerCase();
+  accentColor.value = normalizedAccent;
+  originalAccentColor.value = normalizedAccent;
+  startDate.value = props.poster.startDate ? new Date(props.poster.startDate) : null;
+  expirationDate.value = props.poster.expirationDate ? new Date(props.poster.expirationDate) : null;
+  borrelMode.value = props.poster.borrelMode;
+  visible.value = true;
+};
+
+const onAlbumAdd = () => {
+  albumError.value = albums.value.some((v) => !/^\d+$/.test(v.trim()));
+};
+
+const buildParams = (): UpdatePosterRequest => ({
+  name: name.value.trim(),
+  ...(props.poster.type !== PosterType.PHOTO && { label: label.value }),
+  footerSize: footerSize.value,
+  defaultTimeout: defaultTimeout.value,
+  borrelMode: borrelMode.value,
+  ...(accentColor.value && { accentColor: accentColor.value }),
+  ...(startDate.value && { startDate: startDate.value.toISOString() }),
+  ...(expirationDate.value && { expirationDate: expirationDate.value.toISOString() }),
+  ...(props.poster.type === PosterType.PHOTO && {
+    albums: albums.value.map((v) => Number(v.trim())),
+  }),
+});
+
+const onSubmit = async () => {
+  submitted.value = true;
+  if (!name.value.trim()) return;
+
+  if (props.poster.type === PosterType.PHOTO) {
+    onAlbumAdd();
+    if (albums.value.length === 0 || albumError.value) return;
+  }
+
+  loading.value = true;
+  await store.updatePoster(props.poster.id, buildParams());
+  loading.value = false;
+  visible.value = false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterMediaGallery.vue b/apps/aurora-backoffice/src/components/poster/PosterMediaGallery.vue
new file mode 100644
index 00000000..579f3c21
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterMediaGallery.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="w-full aspect-video rounded-lg overflow-hidden bg-surface-300">
+    <template v-if="files.length">
+      <Galleria
+        v-model:active-index="activeIndex"
+        :circular="files.length > 1"
+        container-class="w-full h-full"
+        :num-visible="1"
+        :show-indicators="files.length > 1"
+        :show-item-navigators="files.length > 1"
+        :show-thumbnails="false"
+        :value="files"
+      >
+        <template #item="{ item }">
+          <div class="w-full aspect-video">
+            <img
+              v-if="!isVideo"
+              :alt="name"
+              class="w-full h-full object-cover cursor-zoom-in"
+              :src="item.location"
+              @click="openFullscreen"
+            />
+            <video v-else :key="item.location" class="w-full h-full object-cover" controls muted>
+              <source :src="item.location" />
+            </video>
+          </div>
+        </template>
+      </Galleria>
+
+      <Galleria
+        v-model:active-index="activeIndex"
+        v-model:visible="fullscreenVisible"
+        :circular="files.length > 1"
+        :full-screen="true"
+        :pt="{
+          closeButton: {
+            class:
+              'z-[1100] flex items-center justify-center w-12 h-12 rounded-full bg-black/60 hover:bg-black/80 text-white transition',
+          },
+        }"
+        :show-indicators="files.length > 1"
+        :show-item-navigators="files.length > 1"
+        :show-thumbnails="false"
+        :value="files"
+      >
+        <template #closeicon>
+          <i class="pi pi-times text-xl" />
+        </template>
+        <template #item="{ item }">
+          <img
+            v-if="!isVideo"
+            :alt="name"
+            class="max-h-screen max-w-full object-contain"
+            :src="item.location"
+          />
+          <video
+            v-else
+            :key="item.location"
+            class="max-h-screen max-w-full object-contain"
+            controls
+          >
+            <source :src="item.location" />
+          </video>
+        </template>
+      </Galleria>
+    </template>
+    <div v-else class="w-full h-full flex justify-center items-center text-primary-contrast">
+      <i class="pi pi-image text-2xl" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Galleria from 'primevue/galleria';
+import type { FileResponse } from '@gewis/aurora-api-client';
+
+defineProps<{
+  files: FileResponse[];
+  name: string;
+  isVideo?: boolean;
+}>();
+
+const activeIndex = ref(0);
+const fullscreenVisible = ref(false);
+
+const openFullscreen = () => {
+  fullscreenVisible.value = true;
+};
+</script>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterOperations.vue b/apps/aurora-backoffice/src/components/poster/PosterOperations.vue
new file mode 100644
index 00000000..75bb7c78
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterOperations.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-row gap-3">
+    <Button
+      label="Refresh"
+      :loading="refreshLoading"
+      @click="
+        async () => {
+          refreshLoading = true;
+          await store.reloadPosters();
+          refreshLoading = false;
+        }
+      "
+    >
+      <template #icon>
+        <i class="pi pi-refresh mr-2" />
+      </template>
+    </Button>
+    <PosterCreationDialog />
+    <div class="flex-1" />
+    <PosterBorrelModeSwitch v-if="store.carousel.borrelModePresent" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import PosterBorrelModeSwitch from '@/components/poster/PosterBorrelModeSwitch.vue';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import PosterCreationDialog from '@/components/poster/PosterCreationDialog.vue';
+
+const store = usePosterStore();
+
+const refreshLoading = ref(false);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/PosterStatusIndicator.vue b/apps/aurora-backoffice/src/components/poster/PosterStatusIndicator.vue
new file mode 100644
index 00000000..736df5a7
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/PosterStatusIndicator.vue
@@ -0,0 +1,64 @@
+<template>
+  <button
+    v-tooltip.top="tooltip"
+    :aria-label="tooltip"
+    :class="[
+      'w-3 h-3 rounded-full shrink-0 transition',
+      isPrivileged ? 'cursor-pointer' : 'cursor-default',
+      colorClass,
+    ]"
+    :disabled="!isPrivileged"
+    @click.stop="onToggle"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type PosterResponse } from '@gewis/aurora-api-client';
+import { getPosterStatus, type PosterStatus } from '@/utils/posterUtils';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useAuthStore } from '@/stores/auth.store';
+
+const props = defineProps<{
+  poster: PosterResponse;
+}>();
+
+const store = usePosterStore();
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+
+const status = computed<PosterStatus>(() => getPosterStatus(props.poster));
+
+const colorClass = computed(() => {
+  const base = {
+    live: 'bg-green-500',
+    borrel: 'bg-amber-600',
+    expired: 'bg-gray-400',
+    scheduled: 'bg-gray-400',
+    disabled: 'bg-red-500',
+  }[status.value];
+  const hover = {
+    live: 'hover:bg-green-400',
+    borrel: 'hover:bg-amber-500',
+    expired: 'hover:bg-gray-300',
+    scheduled: 'hover:bg-gray-300',
+    disabled: 'hover:bg-red-400',
+  }[status.value];
+  return isPrivileged.value ? `${base} ${hover}` : base;
+});
+
+const tooltip = computed(
+  () =>
+    ({
+      live: 'Enabled',
+      borrel: 'Borrel only',
+      expired: 'Expired',
+      scheduled: 'Not yet active',
+      disabled: 'Disabled',
+    })[status.value],
+);
+
+const onToggle = () => store.togglePoster(props.poster.id, !props.poster.enabled);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/StaticPosterButtonClear.vue b/apps/aurora-backoffice/src/components/poster/StaticPosterButtonClear.vue
new file mode 100644
index 00000000..71feeb07
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/StaticPosterButtonClear.vue
@@ -0,0 +1,31 @@
+<template>
+  <Button
+    :disabled="!isPrivileged || loading"
+    icon="pi pi-times"
+    label="Clear"
+    :loading="loading"
+    severity="secondary"
+    title="Clear the currently active poster from screen"
+    @click="handleClick()"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useAuthStore } from '@/stores/auth.store';
+
+const store = usePosterStore();
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+
+const loading = ref<boolean>(false);
+
+const handleClick = async () => {
+  loading.value = true;
+  await store.clearStaticActivePoster();
+  loading.value = false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/StaticPosterButtonShow.vue b/apps/aurora-backoffice/src/components/poster/StaticPosterButtonShow.vue
new file mode 100644
index 00000000..04c45dcb
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/StaticPosterButtonShow.vue
@@ -0,0 +1,52 @@
+<template>
+  <Button
+    class="flex-1"
+    :disabled="disabled"
+    icon="pi pi-eye"
+    :loading="loading"
+    severity="success"
+    @click="confirmShow"
+  />
+
+  <ConfirmPopup />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import type { PosterResponse } from '@gewis/aurora-api-client';
+import { usePosterStore } from '@/stores/poster/poster.store';
+
+const store = usePosterStore();
+const confirm = useConfirm();
+
+const loading = ref<boolean>(false);
+const props = withDefaults(
+  defineProps<{
+    poster: PosterResponse;
+    disabled?: boolean;
+  }>(),
+  { disabled: false },
+);
+
+const handleShow = () => {
+  loading.value = true;
+  void store.setStaticActivePoster(props.poster.id).finally(() => {
+    loading.value = false;
+  });
+};
+
+const confirmShow = () => {
+  confirm.require({
+    message: `Set ALL static poster screens to this poster?`,
+    header: 'Confirm',
+    acceptLabel: 'Confirm',
+    rejectLabel: 'Cancel',
+    accept: () => {
+      handleShow();
+    },
+  });
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/StaticPosterClockToggle.vue b/apps/aurora-backoffice/src/components/poster/StaticPosterClockToggle.vue
new file mode 100644
index 00000000..6a2ef891
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/StaticPosterClockToggle.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-row gap-2 justify-center items-center">
+    <label for="static-poster-clock-toggle">Clock</label>
+    <ToggleSwitch
+      id="static-poster-clock-toggle"
+      :disabled="loading || !isPrivileged"
+      :model-value="store.static.clockVisible"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import { useAuthStore } from '@/stores/auth.store';
+
+const store = usePosterStore();
+const authStore = useAuthStore();
+const isPrivileged = computed(() => authStore.isInSecurityGroup('poster', 'privileged'));
+
+const loading = ref<boolean>(false);
+
+const handleClick = async () => {
+  loading.value = true;
+  await store.setStaticClockVisibility(!store.static.clockVisible);
+  loading.value = false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/poster/StaticPosterPreview.vue b/apps/aurora-backoffice/src/components/poster/StaticPosterPreview.vue
new file mode 100644
index 00000000..3f4f7026
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/poster/StaticPosterPreview.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="getPosterType(poster) === 'image' || getPosterType(poster) === 'video'"
+    :class="previewClass"
+  >
+    <PosterMediaGallery
+      :files="poster.files"
+      :is-video="getPosterType(poster) === 'video'"
+      :name="poster.name"
+    />
+  </div>
+  <div v-else-if="getPosterType(poster) === 'external'" :class="previewClass">
+    <a :href="getUrl(poster)" target="_blank">
+      <div
+        class="hover:brightness-50 transition duration-200 w-full flex justify-center items-center rounded-lg aspect-video bg-surface-300 text-primary-contrast p-3"
+        :title="getUrl(poster)"
+      >
+        <span class="whitespace-nowrap text-ellipsis overflow-hidden">
+          {{ getUrl(poster) }}
+        </span>
+      </div>
+    </a>
+  </div>
+  <div v-else :class="previewClass">
+    <div
+      class="w-full flex justify-center items-center rounded-lg aspect-video bg-surface-300 text-primary-contrast"
+    >
+      {{ capitalize(poster.type) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type PosterResponse, PosterType } from '@gewis/aurora-api-client';
+import PosterMediaGallery from '@/components/poster/PosterMediaGallery.vue';
+
+const props = defineProps<{
+  poster: PosterResponse;
+  class?: string | undefined;
+}>();
+
+const previewClass = computed(() => props.class);
+
+const getUrl = (poster: PosterResponse) => {
+  return poster.files?.[0]?.location ?? poster.uri ?? '';
+};
+
+const getPosterType = (poster: PosterResponse): 'image' | 'video' | 'external' | 'placeholder' => {
+  switch (poster.type) {
+    case PosterType.IMG:
+      return 'image';
+    case PosterType.VIDEO:
+      return 'video';
+    case PosterType.EXTERN:
+      return 'external';
+    default:
+      return 'placeholder';
+  }
+};
+
+const capitalize = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
+</script>
diff --git a/apps/aurora-backoffice/src/components/prime/ConfirmWrapper.vue b/apps/aurora-backoffice/src/components/prime/ConfirmWrapper.vue
new file mode 100644
index 00000000..1f5ce302
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/prime/ConfirmWrapper.vue
@@ -0,0 +1,40 @@
+<template>
+  <span class="hidden" />
+</template>
+
+<script setup lang="ts">
+import { useConfirm } from 'primevue/useconfirm';
+
+const props = defineProps<{
+  message: string;
+  acceptLabel: string;
+  loading?: boolean;
+  onAccept?: () => void;
+  onReject?: () => void;
+}>();
+
+const confirm = useConfirm();
+const confirmDialog = () => {
+  confirm.require({
+    message: props.message,
+    header: 'Confirm',
+    rejectClass: 'p-button-secondary',
+    rejectLabel: 'Cancel',
+    acceptLabel: props.acceptLabel,
+    reject() {
+      if (props.onReject) {
+        props.onReject();
+      }
+    },
+    accept() {
+      if (props.onAccept) {
+        props.onAccept();
+      }
+    },
+  });
+};
+
+defineExpose({
+  confirmDialog,
+});
+</script>
diff --git a/apps/aurora-backoffice/src/components/prime/StepperWrapper.vue b/apps/aurora-backoffice/src/components/prime/StepperWrapper.vue
new file mode 100644
index 00000000..dfe9e759
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/prime/StepperWrapper.vue
@@ -0,0 +1,151 @@
+<template>
+  <Stepper linear :value="currentStep">
+    <StepList v-if="!vertical">
+      <Step v-for="(step, index) in steps" :key="index" :value="(index + 1).toString()">
+        {{ step.value }}
+      </Step>
+    </StepList>
+
+    <StepPanels>
+      <StepperWrapper
+        v-for="(step, index) in steps"
+        :key="step.value"
+        :header="step.value"
+        :value="(index + 1).toString()"
+        :wrap="vertical"
+      >
+        <StepPanel v-slot="{ activateCallback }" :value="(index + 1).toString()">
+          <AppBox class="flex flex-col gap-5 mb-4">
+            <slot :name="index + 1" />
+            <div class="flex justify-center gap-5">
+              <Button
+                v-if="index > 0 && !steps[index].previousHidden"
+                :disabled="steps[index].previousDisabled || steps[index].previousLoading"
+                :icon="
+                  steps[index].previousIcon === null
+                    ? ''
+                    : steps[index].previousIcon
+                      ? steps[index].previousIcon
+                      : 'pi pi-chevron-left'
+                "
+                :label="steps[index].previousText"
+                :loading="steps[index].previousLoading"
+                severity="secondary"
+                @click="
+                  steps[index].previousFunction?.();
+                  steps[index].overridePreviousFunction ? null : activateCallback(index.toString());
+                "
+              />
+              <Button
+                v-if="index < steps.length - 1 && !steps[index].nextHidden"
+                :disabled="steps[index].nextDisabled || steps[index].nextLoading"
+                :icon="
+                  steps[index].nextIcon === null
+                    ? ''
+                    : steps[index].nextIcon
+                      ? steps[index].nextIcon
+                      : 'pi pi-chevron-right'
+                "
+                :label="steps[index].nextText"
+                :loading="steps[index].nextLoading"
+                @click="
+                  steps[index].nextFunction?.();
+                  steps[index].overrideNextFunction
+                    ? null
+                    : activateCallback((index + 2).toString());
+                "
+              />
+              <Button
+                v-if="index === steps.length - 1 && !steps[index].confirmHidden"
+                :disabled="steps[index].confirmDisabled || steps[index].confirmLoading"
+                :icon="
+                  steps[index].confirmIcon === null
+                    ? ''
+                    : steps[index].confirmIcon
+                      ? steps[index].confirmIcon
+                      : 'pi pi-check'
+                "
+                :label="steps[index].confirmText"
+                :loading="steps[index].confirmLoading"
+                @click="steps[index].confirmFunction"
+              />
+            </div>
+          </AppBox>
+        </StepPanel>
+      </StepperWrapper>
+    </StepPanels>
+  </Stepper>
+</template>
+
+<script setup lang="ts">
+import StepPanel from 'primevue/steppanel';
+import StepList from 'primevue/steplist';
+import Stepper from 'primevue/stepper';
+import Step from 'primevue/step';
+import StepPanels from 'primevue/steppanels';
+import { computed } from 'vue';
+import StepperWrapper from '@/components/prime/VerticalStepperWrapper.vue';
+import AppBox from '@/layout/AppBox.vue';
+import { TailwindWidth, useLayoutStore } from '@/stores/layout.store';
+
+interface StepperStep {
+  value: string;
+  nextDisabled?: boolean;
+  nextLoading?: boolean;
+  nextHidden?: boolean;
+  nextIcon?: string | null;
+  nextText?: string;
+  nextFunction?: undefined | (() => void);
+  overrideNextFunction?: boolean;
+  previousDisabled?: boolean;
+  previousLoading?: boolean;
+  previousHidden?: boolean;
+  previousIcon?: string | null;
+  previousText?: string;
+  previousFunction?: undefined | (() => void);
+  overridePreviousFunction?: boolean;
+  confirmDisabled?: boolean;
+  confirmLoading?: boolean;
+  confirmHidden?: boolean;
+  confirmIcon?: string | null;
+  confirmText?: string;
+  confirmFunction?: undefined | (() => void);
+}
+
+defineProps<{
+  steps: StepperStep[];
+  currentStep: string;
+}>();
+
+const layoutStore = useLayoutStore();
+const vertical = computed((): boolean => {
+  const windowWidth: number = layoutStore.windowWidth;
+  const limit: number = TailwindWidth.sm;
+  return windowWidth < limit;
+});
+
+export type { StepperStep };
+</script>
+
+<style lang="scss">
+.p-select-option-label,
+.p-select-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.p-steppanel-content,
+.p-steppanel {
+  padding-left: 0 !important;
+}
+
+.p-stepper-separator {
+  display: none;
+}
+
+@screen sm {
+  .p-stepper-separator {
+    display: flex;
+  }
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/prime/VerticalStepperWrapper.vue b/apps/aurora-backoffice/src/components/prime/VerticalStepperWrapper.vue
new file mode 100644
index 00000000..a22e9f3f
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/prime/VerticalStepperWrapper.vue
@@ -0,0 +1,18 @@
+<template>
+  <StepItem v-if="wrap" :value="value">
+    <Step>{{ header }}</Step>
+    <slot />
+  </StepItem>
+  <slot v-else />
+</template>
+
+<script setup lang="ts">
+import StepItem from 'primevue/stepitem';
+import Step from 'primevue/step';
+
+defineProps<{
+  wrap: boolean;
+  value: string;
+  header: string;
+}>();
+</script>
diff --git a/apps/aurora-backoffice/src/components/settings/ServerSettingsFileUpload.vue b/apps/aurora-backoffice/src/components/settings/ServerSettingsFileUpload.vue
new file mode 100644
index 00000000..09c4a318
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/settings/ServerSettingsFileUpload.vue
@@ -0,0 +1,44 @@
+<template>
+  <input ref="fileSelector" hidden type="file" @change="handleFileSelect" />
+  <InputGroup>
+    <Button :disabled="disabled" label="Upload" @click="fileSelector?.click()" />
+    <InputText
+      disabled
+      :model-value="modelValue === '' ? '' : (modelValue as IFile).originalName"
+      placeholder="Upload a file..."
+    />
+    <InputGroupAddon>
+      <Button
+        :disabled="disabled"
+        icon="pi pi-times"
+        severity="secondary"
+        title="Clear file"
+        @click="store.clearSettingFile(setting)"
+      />
+    </InputGroupAddon>
+  </InputGroup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { IFile, ISettings } from '@gewis/aurora-api-client';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+
+const props = defineProps<{
+  setting: keyof ISettings;
+  disabled: boolean;
+  modelValue: IFile | string;
+}>();
+
+const store = useServerSettingsStore();
+
+const fileSelector = ref();
+
+const handleFileSelect = async (event: Event) => {
+  if (event.target && 'files' in event.target && (event.target.files as FileList)[0]) {
+    await store.setSettingFile(props.setting, (event.target.files as FileList)[0]);
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/shortcuts/IShortcutItem.ts b/apps/aurora-backoffice/src/components/shortcuts/IShortcutItem.ts
new file mode 100644
index 00000000..a490f78f
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/shortcuts/IShortcutItem.ts
@@ -0,0 +1,8 @@
+import type { MenuItem } from 'primevue/menuitem';
+
+export interface IShortcutItem extends MenuItem {
+  icon?: string;
+  disabledIcon?: boolean;
+  enabledIcon?: boolean;
+  items?: IShortcutItem[];
+}
diff --git a/apps/aurora-backoffice/src/components/shortcuts/ShortcutBlock.vue b/apps/aurora-backoffice/src/components/shortcuts/ShortcutBlock.vue
new file mode 100644
index 00000000..177c0d28
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/shortcuts/ShortcutBlock.vue
@@ -0,0 +1,204 @@
+<template>
+  <AppContainer icon="pi-file-import" title="Shortcuts">
+    <div v-if="menus.length > 0" class="columns-1 sm:columns-2">
+      <div v-for="items in menus" :key="items[0].key" class="break-inside-avoid">
+        <Menu class="!border-none" :model="items">
+          <template #submenuheader="{ item }">
+            <h6 class="mb-0 text-override">
+              {{ item.label }}
+            </h6>
+          </template>
+          <template #item="{ item, props }">
+            <router-link v-if="item.route" v-slot="{ href, navigate }" custom :to="item.route">
+              <a :href="href" v-bind="props.action" @click="navigate">
+                <DashboardShortcutItem
+                  :disabled="item.disabledIcon"
+                  :enabled="item.enabledIcon"
+                  :icon="item.icon"
+                  :label="item.label"
+                  :loading="item.loading"
+                />
+              </a>
+            </router-link>
+            <a v-else v-bind="props.action">
+              <DashboardShortcutItem
+                :enabled="item.enabledIcon"
+                :icon="item.icon"
+                :label="item.label"
+                :loading="item.loading"
+              />
+            </a>
+          </template>
+        </Menu>
+      </div>
+    </div>
+    <div v-else>No shortcuts available.</div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { disableAllModes } from '@gewis/aurora-api-client';
+import { useHandlersStore } from '@/stores/handlers.store';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useSceneControllerStore } from '@/stores/scene-controller.store';
+import { useCenturionStore } from '@/stores/modes/centurion.store';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import DashboardShortcutItem from '@/components/shortcuts/ShortcutItem.vue';
+import { type IShortcutItem } from '@/components/shortcuts/IShortcutItem';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+
+const handlersStore = useHandlersStore();
+const subscriberStore = useSubscriberStore();
+const sceneStore = useSceneControllerStore();
+const authStore = useAuthStore();
+const settingsStore = useServerSettingsStore();
+
+const centurionModeStore = useCenturionStore();
+if (authStore.isInSecurityGroup('centurion', 'privileged')) {
+  void centurionModeStore.getCurrentCenturion(true);
+}
+const timeTrailRaceModeStore = useTimeTrailRaceStore();
+if (authStore.isInSecurityGroup('timetrail', 'base')) {
+  void timeTrailRaceModeStore.getTimeTrailMode();
+}
+
+// TODO why does this reactivity not work as expected?
+const sceneMenuItems = computed<IShortcutItem[]>(() =>
+  sceneStore.favoriteScenes.map((s) => {
+    const lightGroupIds = s.effects
+      .map((e) => e.lightsGroups.map((g) => g.id))
+      .flat()
+      .flat()
+      .filter((n1, index, all) => index === all.findIndex((n2) => n1 === n2));
+    return {
+      label: s.name,
+      icon: 'pi-lightbulb',
+      command: async () => {
+        await handlersStore.setLightsHandler(lightGroupIds, 'ScenesHandler');
+        await sceneStore.applyScene(s.id);
+      },
+    };
+  }),
+);
+
+// Add items based on the user's security groups
+const defaults = computed<IShortcutItem[] | boolean>(() => {
+  const showReset = authStore.isInSecurityGroup('handler', 'privileged');
+  if (!showReset) {
+    return false;
+  }
+
+  return [
+    {
+      label: 'Defaults',
+      items: [
+        {
+          label: 'Reset to defaults',
+          icon: 'pi-power-off',
+          command: async () => {
+            await handlersStore.reset();
+          },
+        },
+      ],
+    },
+  ].filter(Boolean);
+});
+
+// Add items based on the user's security groups
+const lights = computed<IShortcutItem[] | boolean>(() => {
+  const showLights = authStore.isInSecurityGroup('handler', 'privileged');
+
+  if (!showLights) {
+    return false;
+  }
+
+  return [
+    {
+      label: 'Lights',
+      items: [
+        {
+          label: 'Disable',
+          icon: 'pi-power-off',
+          command: async () => {
+            const ids = subscriberStore.lightsGroups.map((g) => g.id);
+            await handlersStore.setLightsHandler(ids);
+          },
+        },
+        ...sceneMenuItems.value,
+        {
+          label: 'Random effects',
+          icon: 'pi-sparkles',
+          command: async () => {
+            const ids = subscriberStore.lightsGroups.map((g) => g.id);
+            await handlersStore.setLightsHandler(ids, 'RandomEffectsHandler');
+          },
+        },
+      ],
+    },
+  ].filter(Boolean);
+});
+
+// Add items based on the user's security groups
+const modes = computed<IShortcutItem[] | boolean>(() => {
+  const showCenturion =
+    authStore.isInSecurityGroup('centurion', 'privileged') &&
+    settingsStore.featureEnabled('Centurion');
+  const showTimeTrail =
+    authStore.isInSecurityGroup('timetrail', 'base') &&
+    settingsStore.featureEnabled('TimeTrailRace');
+  const showModes = authStore.isInSecurityGroup('mode', 'base') && (showCenturion || showTimeTrail);
+
+  if (!(showModes || showCenturion || showTimeTrail)) {
+    return false;
+  }
+
+  return [
+    {
+      label: 'Modes',
+      items: [
+        showModes &&
+          authStore.isInSecurityGroup('mode', 'base') && {
+            label: 'Disable',
+            icon: 'pi-power-off',
+            command: async () => {
+              await disableAllModes();
+              await Promise.all([
+                centurionModeStore.getCurrentCenturion(),
+                timeTrailRaceModeStore.getTimeTrailMode(),
+              ]);
+            },
+          },
+        showCenturion && {
+          label: 'Centurion',
+          icon: 'pi-prime',
+          route: '/modes/centurion',
+          loading: centurionModeStore.loading,
+          enabledIcon: centurionModeStore.enabled,
+          disabledIcon: centurionModeStore.disabled,
+        },
+        showTimeTrail && {
+          label: 'Spoelbakkenrace',
+          icon: 'pi-hourglass',
+          route: '/modes/timeTrailRace',
+          loading: timeTrailRaceModeStore.loading,
+          enabledIcon: timeTrailRaceModeStore.enabled,
+          disabledIcon: timeTrailRaceModeStore.disabled,
+        },
+      ].filter(Boolean),
+    },
+  ].filter(Boolean) as IShortcutItem[];
+});
+
+const menus = computed<Array<Array<IShortcutItem>>>(
+  () => [defaults.value, lights.value, modes.value].filter(Boolean) as Array<Array<IShortcutItem>>,
+);
+</script>
+
+<style lang="scss">
+.text-override {
+  color: var(--p-text-color);
+}
+</style>
diff --git a/apps/aurora-backoffice/src/components/shortcuts/ShortcutItem.vue b/apps/aurora-backoffice/src/components/shortcuts/ShortcutItem.vue
new file mode 100644
index 00000000..6a1303bd
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/shortcuts/ShortcutItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="w-full flex justify-between gap-2">
+    <div>
+      <i :class="['pi text-sm mr-2', icon]" />
+      <span>{{ label }}</span>
+    </div>
+    <div>
+      <div v-if="loading">
+        <Spinner stroke-width="8" style="height: 1rem; width: 1rem" />
+      </div>
+      <div v-if="enabled">
+        <i class="pi pi-play-circle text-green-500" />
+      </div>
+      <div v-if="disabled">
+        <i class="pi pi-times-circle text-red-500" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  icon?: string;
+  label?: string | ((...args: never) => string) | undefined;
+  loading?: boolean | undefined;
+  enabled?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/TimedEventDeleteButton.vue b/apps/aurora-backoffice/src/components/timed-events/TimedEventDeleteButton.vue
new file mode 100644
index 00000000..54b72e0e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/TimedEventDeleteButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <Button icon="pi pi-times" severity="danger" @click="confirmRef?.confirmDialog" />
+  <ConfirmWrapper
+    ref="confirmRef"
+    accept-label="Delete"
+    :loading="loading"
+    message="Are you sure you want to delete this timed event?"
+    :on-accept="
+      () => {
+        loading = true;
+        store.deleteTimedEvent(props.timedEvent.id).finally(() => {
+          loading = false;
+        });
+      }
+    "
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { TimedEventResponse } from '@gewis/aurora-api-client';
+import { useTimedEventsStore } from '@/stores/timed-events.store';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+
+const store = useTimedEventsStore();
+
+const props = defineProps<{
+  timedEvent: TimedEventResponse;
+}>();
+
+const confirmRef = ref();
+const loading = ref<boolean>(false);
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/TimedEventDialog.vue b/apps/aurora-backoffice/src/components/timed-events/TimedEventDialog.vue
new file mode 100644
index 00000000..c5712ed3
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/TimedEventDialog.vue
@@ -0,0 +1,184 @@
+<template>
+  <Dialog
+    closable
+    close-on-escape
+    dismissable-mask
+    header="Create new timed event"
+    :keep-in-view-port="false"
+    modal
+    :visible="visible"
+    @update:visible="(v) => $emit('update:visible', v)"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label for="cronExpression">Cron expression</label>
+        <InputText
+          id="cronExpression"
+          v-model="cronExpression"
+          :invalid="cronInvalid"
+          placeholder="39 5 * * *"
+          type="text"
+        />
+        <Message v-if="cronInvalid" severity="error" size="small" variant="simple"
+          >Please type a valid cron expression</Message
+        >
+        <Message v-else severity="secondary" size="small" variant="simple">{{
+          cronToString(cronExpression)
+        }}</Message>
+      </div>
+      <div class="flex flex-col gap-2">
+        <label for="event-type">Event type</label>
+        <Select
+          id="event-type"
+          v-model="selectedType"
+          option-label="label"
+          option-value="name"
+          :options="possibleTypes"
+          placeholder="Choose a type"
+        />
+      </div>
+      <div v-if="originalTimedEvent" class="flex flex-col gap-2">
+        <label for="skip-next">Skip next?</label>
+        <ToggleSwitch v-model="skipNext" />
+      </div>
+      <TimedEventParamsHandlerAudio
+        v-if="selectedType === 'switch-handler-audio'"
+        :cron-expression="cronExpression"
+        :cron-valid="!cronInvalid"
+        :on-save="onSaveWrapper"
+        :original-event-spec-params="
+          originalTimedEvent?.eventSpec.type === 'switch-handler-audio'
+            ? originalTimedEvent?.eventSpec.params
+            : undefined
+        "
+        :skip-next="skipNext"
+      />
+      <TimedEventParamsHandlerLights
+        v-else-if="selectedType === 'switch-handler-lights'"
+        :cron-expression="cronExpression"
+        :cron-valid="!cronInvalid"
+        :on-save="onSaveWrapper"
+        :original-event-spec-params="
+          originalTimedEvent?.eventSpec.type === 'switch-handler-lights'
+            ? originalTimedEvent?.eventSpec.params
+            : undefined
+        "
+        :skip-next="skipNext"
+      />
+      <TimedEventParamsHandlerScreen
+        v-else-if="selectedType === 'switch-handler-screen'"
+        :cron-expression="cronExpression"
+        :cron-valid="!cronInvalid"
+        :on-save="onSaveWrapper"
+        :original-event-spec-params="
+          originalTimedEvent?.eventSpec.type === 'switch-handler-screen'
+            ? originalTimedEvent?.eventSpec.params
+            : undefined
+        "
+        :skip-next="skipNext"
+      />
+      <TimedEventParamsStaticPoster
+        v-else-if="selectedType === 'timed-event-set-static-poster'"
+        :cron-expression="cronExpression"
+        :cron-valid="!cronInvalid"
+        :on-save="onSaveWrapper"
+        :original-event-spec-params="
+          originalTimedEvent?.eventSpec.type === 'timed-event-set-static-poster'
+            ? originalTimedEvent?.eventSpec.params
+            : undefined
+        "
+        :skip-next="skipNext"
+      />
+      <TimedEventDialogSaveButton
+        v-else
+        :disabled="loading || cronInvalid || selectedType === ''"
+        :loading="loading"
+        @click="saveEvent"
+      >
+        Save changes
+      </TimedEventDialogSaveButton>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, type ComputedRef, type Ref, ref } from 'vue';
+import { toString as cronToString } from 'cronstrue';
+import type {
+  CreateTimedEventRequest,
+  EventSpec,
+  TimedEventResponse,
+} from '@gewis/aurora-api-client';
+import TimedEventParamsHandlerScreen from '@/components/timed-events/types/TimedEventParamsHandlerScreen.vue';
+import TimedEventParamsHandlerAudio from '@/components/timed-events/types/TimedEventParamsHandlerAudio.vue';
+import TimedEventParamsHandlerLights from '@/components/timed-events/types/TimedEventParamsHandlerLights.vue';
+import TimedEventDialogSaveButton from '@/components/timed-events/types/TimedEventDialogSaveButton.vue';
+import TimedEventParamsStaticPoster from '@/components/timed-events/types/TimedEventParamsStaticPoster.vue';
+
+const props = defineProps<{
+  originalTimedEvent?: TimedEventResponse;
+  visible: boolean;
+  onSave: (params: CreateTimedEventRequest, skipNext?: boolean) => Promise<void>;
+}>();
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean];
+}>();
+
+const loading = ref<boolean>(false);
+
+const cronExpression = ref<string>(props.originalTimedEvent?.cronExpression ?? '');
+const cronInvalid: ComputedRef<boolean> = computed(() => {
+  try {
+    cronToString(cronExpression.value);
+    return false;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (error: unknown) {
+    return true;
+  }
+});
+
+const selectedType = ref<EventSpec['type'] | ''>(props.originalTimedEvent?.eventSpec.type ?? '');
+const possibleTypes: Ref<{ name: EventSpec['type']; label: string }[]> = ref([
+  { name: 'system-reset', label: 'System reset' },
+  { name: 'clean-audit-logs', label: 'Clean audit logs' },
+  { name: 'switch-handler-audio', label: 'Switch handler audio' },
+  { name: 'switch-handler-lights', label: 'Switch handler lights group' },
+  { name: 'switch-handler-screen', label: 'Switch handler screen' },
+  { name: 'timed-event-set-static-poster', label: 'Set static poster' },
+] as { name: EventSpec['type']; label: string }[]);
+
+const skipNext = ref<boolean>(false);
+
+const onSaveWrapper = async (params: CreateTimedEventRequest, skipNext?: boolean) => {
+  await props.onSave(params, skipNext);
+  emit('update:visible', false);
+};
+
+const saveEvent = () => {
+  if (selectedType.value === '') return;
+
+  loading.value = true;
+
+  switch (selectedType.value) {
+    case 'system-reset':
+      void onSaveWrapper(
+        { cronExpression: cronExpression.value, eventSpec: { type: 'system-reset' } },
+        skipNext.value,
+      ).then(() => {
+        loading.value = false;
+      });
+      return;
+    case 'clean-audit-logs':
+      void onSaveWrapper(
+        { cronExpression: cronExpression.value, eventSpec: { type: 'clean-audit-logs' } },
+        skipNext.value,
+      ).then(() => {
+        loading.value = false;
+      });
+      return;
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/TimedEventDialogCreate.vue b/apps/aurora-backoffice/src/components/timed-events/TimedEventDialogCreate.vue
new file mode 100644
index 00000000..d3126a18
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/TimedEventDialogCreate.vue
@@ -0,0 +1,21 @@
+<template>
+  <Button icon="pi pi-plus" label="Create new event" severity="success" @click="open = true" />
+  <TimedEventDialog v-model:visible="open" :on-save="onSave" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { CreateTimedEventRequest } from '@gewis/aurora-api-client';
+import TimedEventDialog from '@/components/timed-events/TimedEventDialog.vue';
+import { useTimedEventsStore } from '@/stores/timed-events.store';
+
+const open = ref<boolean>(false);
+
+const store = useTimedEventsStore();
+
+const onSave = async (params: CreateTimedEventRequest) => {
+  return store.createTimedEvent(params);
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/TimedEventDialogUpdate.vue b/apps/aurora-backoffice/src/components/timed-events/TimedEventDialogUpdate.vue
new file mode 100644
index 00000000..6a4735a8
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/TimedEventDialogUpdate.vue
@@ -0,0 +1,25 @@
+<template>
+  <Button icon="pi pi-pen-to-square" @click="open = true" />
+  <TimedEventDialog v-model:visible="open" :on-save="onSave" :original-timed-event="timedEvent" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { CreateTimedEventRequest, TimedEventResponse } from '@gewis/aurora-api-client';
+import TimedEventDialog from '@/components/timed-events/TimedEventDialog.vue';
+import { useTimedEventsStore } from '@/stores/timed-events.store';
+
+const props = defineProps<{
+  timedEvent: TimedEventResponse;
+}>();
+
+const open = ref<boolean>(false);
+
+const store = useTimedEventsStore();
+
+const onSave = async (params: CreateTimedEventRequest, skipNext?: boolean) => {
+  if (skipNext == undefined) throw new Error('"skipNext" is required.');
+  return store.updateTimedEvent(props.timedEvent.id, { ...params, skipNext });
+};
+</script>
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/TimedEventSpec.vue b/apps/aurora-backoffice/src/components/timed-events/TimedEventSpec.vue
new file mode 100644
index 00000000..e4294190
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/TimedEventSpec.vue
@@ -0,0 +1,83 @@
+<template>
+  <TimedEventTag
+    v-if="props.eventSpec.type === 'system-reset'"
+    description="Reset system to initial state."
+    label="System reset"
+  />
+  <TimedEventTag
+    v-else-if="props.eventSpec.type === 'clean-audit-logs'"
+    description="Remove all expired audit logs from the database."
+    label="Clean audit logs"
+  />
+  <TimedEventTag
+    v-else-if="
+      props.eventSpec.type === 'switch-handler-audio' && props.eventSpec.params.handler !== ''
+    "
+    description=""
+    :label="`Switch handler for audio '${getAudioName(props.eventSpec.params.id)}' to ${props.eventSpec.params.handler}`"
+  />
+  <TimedEventTag
+    v-else-if="props.eventSpec.type === 'switch-handler-audio'"
+    description=""
+    :label="`Remove handler for audio '${getAudioName(props.eventSpec.params.id)}'`"
+  />
+  <TimedEventTag
+    v-else-if="
+      props.eventSpec.type === 'switch-handler-lights' && props.eventSpec.params.handler !== ''
+    "
+    description=""
+    :label="`Switch handler for lights group '${getLightsGroupName(props.eventSpec.params.id)}' to ${props.eventSpec.params.handler}`"
+  />
+  <TimedEventTag
+    v-else-if="props.eventSpec.type === 'switch-handler-lights'"
+    description=""
+    :label="`Remove handler for lights group '${getLightsGroupName(props.eventSpec.params.id)}'`"
+  />
+  <TimedEventTag
+    v-else-if="
+      props.eventSpec.type === 'switch-handler-screen' && props.eventSpec.params.handler !== ''
+    "
+    description=""
+    :label="`Switch handler for screen '${getScreenName(props.eventSpec.params.id)}' to ${props.eventSpec.params.handler}`"
+  />
+  <TimedEventTag
+    v-else-if="props.eventSpec.type === 'switch-handler-screen'"
+    description=""
+    :label="`Remove handler for screen '${getScreenName(props.eventSpec.params.id)}'`"
+  />
+  <TimedEventTag
+    v-else-if="props.eventSpec.type === 'timed-event-set-static-poster'"
+    description="Change the poster on screen for all screens using the StaticPosterHandler"
+    label="Set static poster"
+  />
+</template>
+
+<script setup lang="ts">
+import type { EventSpec } from '@gewis/aurora-api-client';
+import TimedEventTag from '@/components/timed-events/TimedEventTag.vue';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+
+const subscriberStore = useSubscriberStore();
+
+const getAudioName = (id: number) => {
+  const match = subscriberStore.audios.find((audio) => audio.id === id);
+  if (match) return match.name;
+  return id.toString();
+};
+const getLightsGroupName = (id: number) => {
+  const match = subscriberStore.lightsGroups.find((lightsGroup) => lightsGroup.id === id);
+  if (match) return match.name;
+  return id.toString();
+};
+const getScreenName = (id: number) => {
+  const match = subscriberStore.screens.find((screen) => screen.id === id);
+  if (match) return match.name;
+  return id.toString();
+};
+
+const props = defineProps<{
+  eventSpec: EventSpec;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/TimedEventTag.vue b/apps/aurora-backoffice/src/components/timed-events/TimedEventTag.vue
new file mode 100644
index 00000000..02973aa4
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/TimedEventTag.vue
@@ -0,0 +1,12 @@
+<template>
+  <Tag v-tooltip.bottom="{ value: description }" severity="secondary">{{ props.label }}</Tag>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string;
+  description: string;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventDialogSaveButton.vue b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventDialogSaveButton.vue
new file mode 100644
index 00000000..67bf9654
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventDialogSaveButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <Button :disabled="disabled" :loading="loading" severity="success" @click="$emit('click')">
+      Save changes
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  disabled: boolean;
+  loading: boolean;
+}>();
+
+defineEmits<{
+  click: [];
+}>();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandler.vue b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandler.vue
new file mode 100644
index 00000000..b4ed15b9
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandler.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <label for="subscriber">Subscriber</label>
+    <Select
+      id="subscriber"
+      v-model="selectedSubscriber"
+      :invalid="selectedSubscriber == undefined"
+      option-label="label"
+      option-value="id"
+      :options="props.subscribers"
+      placeholder="Choose a subscriber"
+    />
+  </div>
+  <div class="flex flex-col gap-2">
+    <label for="handler">Handler</label>
+    <Select
+      id="handler"
+      v-model="selectedHandler"
+      option-label="name"
+      option-value="name"
+      :options="props.handlers"
+      placeholder="No handler"
+      show-clear
+    />
+  </div>
+  <TimedEventDialogSaveButton :disabled="inputInvalid" :loading="loading" @click="onSave">
+    Save changes
+  </TimedEventDialogSaveButton>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type {
+  CreateTimedEventRequest,
+  SwitchHandlerParams,
+  TimedEventSwitchHandlerAudio,
+  TimedEventSwitchHandlerLights,
+  TimedEventSwitchHandlerScreen,
+} from '@gewis/aurora-api-client';
+import TimedEventDialogSaveButton from '@/components/timed-events/types/TimedEventDialogSaveButton.vue';
+
+const props = defineProps<{
+  originalEventSpecParams?: SwitchHandlerParams;
+  subscribers: { label: string; id: number }[];
+  handlers: { name: string }[];
+  cronExpression: string;
+  cronValid: boolean;
+  skipNext?: boolean;
+  eventSpecType:
+    | TimedEventSwitchHandlerAudio['type']
+    | TimedEventSwitchHandlerLights['type']
+    | TimedEventSwitchHandlerScreen['type'];
+  onSave: (params: CreateTimedEventRequest, skipNext?: boolean) => Promise<void>;
+}>();
+
+const loading = ref<boolean>(false);
+
+const selectedSubscriber = ref<number | undefined>(props.originalEventSpecParams?.id);
+const selectedHandler = ref<string>(props.originalEventSpecParams?.handler ?? '');
+
+const inputInvalid = computed(() => {
+  return (
+    loading.value ||
+    !props.cronValid ||
+    selectedSubscriber.value === undefined ||
+    selectedSubscriber.value < 0
+  );
+});
+
+const onSave = () => {
+  if (inputInvalid.value || selectedSubscriber.value === undefined) return;
+
+  loading.value = true;
+  const specParams: SwitchHandlerParams = {
+    id: selectedSubscriber.value,
+    handler: selectedHandler.value,
+  };
+
+  // Typescript is unfortunately not mega smart, so it's not seeing these specParam
+  // are actually one and the same (but with a different type)
+  let params: CreateTimedEventRequest;
+  switch (props.eventSpecType) {
+    case 'switch-handler-audio':
+      params = {
+        cronExpression: props.cronExpression,
+        eventSpec: {
+          type: props.eventSpecType,
+          params: specParams,
+        },
+      };
+      break;
+    case 'switch-handler-lights':
+      params = {
+        cronExpression: props.cronExpression,
+        eventSpec: {
+          type: props.eventSpecType,
+          params: specParams,
+        },
+      };
+      break;
+    case 'switch-handler-screen':
+      params = {
+        cronExpression: props.cronExpression,
+        eventSpec: {
+          type: props.eventSpecType,
+          params: specParams,
+        },
+      };
+      break;
+  }
+
+  if (!params) return;
+  void props.onSave(params, props.skipNext).finally(() => {
+    loading.value = false;
+  });
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerAudio.vue b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerAudio.vue
new file mode 100644
index 00000000..4777f18e
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerAudio.vue
@@ -0,0 +1,39 @@
+<template>
+  <TimedEventParamsHandler
+    :cron-expression="cronExpression"
+    :cron-valid="cronValid"
+    event-spec-type="switch-handler-audio"
+    :handlers="handlers"
+    :on-save="onSave"
+    :original-event-spec-params="originalEventSpecParams"
+    :skip-next="skipNext"
+    :subscribers="audios"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SwitchHandlerParams } from '@gewis/aurora-api-client';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import TimedEventParamsHandler from '@/components/timed-events/types/TimedEventParamsHandler.vue';
+import type { TimedEventParamsProps } from '@/components/timed-events/types/TimedEventParamsProps';
+
+defineProps<TimedEventParamsProps<SwitchHandlerParams>>();
+
+defineEmits<{
+  'update:modelValue': [params: SwitchHandlerParams];
+}>();
+
+const subscriberStore = useSubscriberStore();
+const handlersStore = useHandlersStore();
+
+const audios = computed(() => {
+  return subscriberStore.audios.map((s) => ({ label: s.name, id: s.id }));
+});
+const handlers = computed(() => {
+  return handlersStore.audioHandlers.map((s) => ({ name: s.name }));
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerLights.vue b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerLights.vue
new file mode 100644
index 00000000..161572f6
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerLights.vue
@@ -0,0 +1,35 @@
+<template>
+  <TimedEventParamsHandler
+    :cron-expression="cronExpression"
+    :cron-valid="cronValid"
+    event-spec-type="switch-handler-lights"
+    :handlers="handlers"
+    :on-save="onSave"
+    :original-event-spec-params="originalEventSpecParams"
+    :skip-next="skipNext"
+    :subscribers="lightsGroups"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SwitchHandlerParams } from '@gewis/aurora-api-client';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import TimedEventParamsHandler from '@/components/timed-events/types/TimedEventParamsHandler.vue';
+import type { TimedEventParamsProps } from '@/components/timed-events/types/TimedEventParamsProps';
+
+defineProps<TimedEventParamsProps<SwitchHandlerParams>>();
+
+const subscriberStore = useSubscriberStore();
+const handlersStore = useHandlersStore();
+
+const lightsGroups = computed(() => {
+  return subscriberStore.lightsGroups.map((s) => ({ label: s.name, id: s.id }));
+});
+const handlers = computed(() => {
+  return handlersStore.lightsHandlers.map((s) => ({ name: s.name }));
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerScreen.vue b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerScreen.vue
new file mode 100644
index 00000000..57bc8e84
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsHandlerScreen.vue
@@ -0,0 +1,35 @@
+<template>
+  <TimedEventParamsHandler
+    :cron-expression="cronExpression"
+    :cron-valid="cronValid"
+    event-spec-type="switch-handler-screen"
+    :handlers="handlers"
+    :on-save="onSave"
+    :original-event-spec-params="originalEventSpecParams"
+    :skip-next="skipNext"
+    :subscribers="screens"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { SwitchHandlerParams } from '@gewis/aurora-api-client';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useHandlersStore } from '@/stores/handlers.store';
+import TimedEventParamsHandler from '@/components/timed-events/types/TimedEventParamsHandler.vue';
+import type { TimedEventParamsProps } from '@/components/timed-events/types/TimedEventParamsProps';
+
+defineProps<TimedEventParamsProps<SwitchHandlerParams>>();
+
+const subscriberStore = useSubscriberStore();
+const handlersStore = useHandlersStore();
+
+const screens = computed(() => {
+  return subscriberStore.screens.map((s) => ({ label: s.name, id: s.id }));
+});
+const handlers = computed(() => {
+  return handlersStore.screenHandlers.map((s) => ({ name: s.name }));
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsProps.ts b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsProps.ts
new file mode 100644
index 00000000..af987a87
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsProps.ts
@@ -0,0 +1,9 @@
+import type { CreateTimedEventRequest } from '@gewis/aurora-api-client';
+
+export type TimedEventParamsProps<T> = {
+  originalEventSpecParams?: T;
+  cronExpression: string;
+  cronValid: boolean;
+  skipNext?: boolean;
+  onSave: (params: CreateTimedEventRequest, skipNext?: boolean) => Promise<void>;
+};
diff --git a/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsStaticPoster.vue b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsStaticPoster.vue
new file mode 100644
index 00000000..23a3c951
--- /dev/null
+++ b/apps/aurora-backoffice/src/components/timed-events/types/TimedEventParamsStaticPoster.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <label for="static-poster-select">Static poster</label>
+    <Select
+      id="static-poster-select"
+      v-model="selectedPosterId"
+      :loading="posterStore.loading"
+      option-value="id"
+      :options="posterStore.staticPosters"
+      placeholder="Choose a poster"
+    >
+      <template #option="slotProps">
+        <div class="flex items-center">
+          <StaticPosterPreview class="w-64" :poster="slotProps.option" />
+        </div>
+      </template>
+      <template #value="slotProps">
+        <StaticPosterPreview
+          v-if="selectedPoster"
+          class="w-64 inline-block"
+          :poster="selectedPoster"
+        />
+        <span v-else>{{ slotProps.placeholder }}</span>
+      </template>
+    </Select>
+  </div>
+
+  <div class="flex flex-row gap-2">
+    <Checkbox v-model="clockVisible" binary input-id="static-poster-clock-visible" />
+    <label for="static-poster-clock-visible">Clock visible?</label>
+  </div>
+
+  <TimedEventDialogSaveButton :disabled="inputInvalid" :loading="loading" @click="handleSave">
+    Save changes
+  </TimedEventDialogSaveButton>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { CreateTimedEventRequest, TimedEventSetStaticPoster } from '@gewis/aurora-api-client';
+import StaticPosterPreview from '@/components/poster/StaticPosterPreview.vue';
+import TimedEventDialogSaveButton from '@/components/timed-events/types/TimedEventDialogSaveButton.vue';
+import type { TimedEventParamsProps } from '@/components/timed-events/types/TimedEventParamsProps';
+import { usePosterStore } from '@/stores/poster/poster.store';
+
+const props = defineProps<TimedEventParamsProps<TimedEventSetStaticPoster['params']>>();
+
+const posterStore = usePosterStore();
+void posterStore.init();
+
+const selectedPosterId = ref<number | undefined>(
+  props.originalEventSpecParams?.posterId ?? undefined,
+);
+const selectedPoster = computed(() => {
+  return posterStore.staticPosters.find((poster) => poster.id === selectedPosterId.value);
+});
+const clockVisible = ref<boolean>(props.originalEventSpecParams?.clockVisible ?? true);
+const loading = ref<boolean>(false);
+
+const inputInvalid = computed(() => {
+  return loading.value || !props.cronValid || selectedPosterId.value === undefined;
+});
+
+const handleSave = async () => {
+  if (inputInvalid.value || !selectedPosterId.value) return;
+
+  loading.value = true;
+  const eventSpec: TimedEventSetStaticPoster = {
+    type: 'timed-event-set-static-poster',
+    params: {
+      posterId: selectedPosterId.value,
+      clockVisible: clockVisible.value,
+    },
+  };
+  const params: CreateTimedEventRequest = {
+    cronExpression: props.cronExpression,
+    eventSpec,
+  };
+
+  await props.onSave(params, props.skipNext).finally(() => {
+    loading.value = false;
+  });
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/layout/AppBox.vue b/apps/aurora-backoffice/src/layout/AppBox.vue
new file mode 100644
index 00000000..29d31e92
--- /dev/null
+++ b/apps/aurora-backoffice/src/layout/AppBox.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="rounded-lg p-5 mt-3 border border-surface shadow-md">
+    <slot />
+  </div>
+</template>
diff --git a/apps/aurora-backoffice/src/layout/AppContainer.vue b/apps/aurora-backoffice/src/layout/AppContainer.vue
new file mode 100644
index 00000000..0b5d3172
--- /dev/null
+++ b/apps/aurora-backoffice/src/layout/AppContainer.vue
@@ -0,0 +1,32 @@
+<template>
+  <Card>
+    <template #title>
+      <div class="flex flex-wrap gap-2 justify-between mb-4 items-center">
+        <div class="uppercase mb-0">
+          <i :class="['pi mr-3', icon]" style="font-size: 1.25rem" />{{ title }}
+        </div>
+        <div class="flex-1 text-end flex justify-end items-center">
+          <slot name="header" />
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <slot />
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/layout/AppLayout.vue b/apps/aurora-backoffice/src/layout/AppLayout.vue
new file mode 100644
index 00000000..1aa41608
--- /dev/null
+++ b/apps/aurora-backoffice/src/layout/AppLayout.vue
@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="layout-wrapper"
+    :class="[
+      'layout-static',
+      { 'layout-static-inactive': !menuDesktopActive, 'layout-mobile-active': menuMobileActive },
+    ]"
+  >
+    <AppTopbar />
+    <div class="layout-sidebar">
+      <AppMenu />
+    </div>
+    <div class="layout-main-container">
+      <div class="layout-main">
+        <RouterView />
+      </div>
+    </div>
+  </div>
+  <Toast />
+</template>
+
+<script setup lang="ts">
+import Toast from 'primevue/toast';
+import { RouterView } from 'vue-router';
+import { ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import AppMenu from '@/layout/AppMenu.vue';
+import { useLayoutStore } from '@/stores/layout.store';
+import AppTopbar from '@/layout/AppTopbar.vue';
+
+const layoutStore = useLayoutStore();
+const { menuMobileActive, menuDesktopActive } = storeToRefs(layoutStore);
+const outsideClickListener = ref();
+
+watch(menuMobileActive, (active) => {
+  if (active) {
+    bindOutsideClickListener();
+  } else {
+    unbindOutsideClickListener();
+  }
+});
+
+const bindOutsideClickListener = () => {
+  if (!outsideClickListener.value) {
+    outsideClickListener.value = (event: Event) => {
+      if (isOutsideClicked(event)) {
+        menuMobileActive.value = false;
+      }
+    };
+    document.addEventListener('click', outsideClickListener.value);
+  }
+};
+
+const unbindOutsideClickListener = () => {
+  if (outsideClickListener.value) {
+    document.removeEventListener('click', outsideClickListener.value);
+    outsideClickListener.value = null;
+  }
+};
+
+const isOutsideClicked = (event: Event) => {
+  const sidebar = document.querySelector('.layout-sidebar');
+  const sidebarButton = document.querySelector('.layout-topbar-button');
+
+  const isInside =
+    sidebar!.contains(event.target as Node) || sidebarButton!.contains(event.target as Node);
+
+  return !isInside;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/layout/AppMenu.vue b/apps/aurora-backoffice/src/layout/AppMenu.vue
new file mode 100644
index 00000000..a9ec0aea
--- /dev/null
+++ b/apps/aurora-backoffice/src/layout/AppMenu.vue
@@ -0,0 +1,98 @@
+<template>
+  <ul class="layout-menu">
+    <template v-for="(item, i) in model" :key="item">
+      <AppMenuItem :index="i" :item="item" />
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppMenuItem, { type MenuItem } from './AppMenuItem.vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+
+const authStore = useAuthStore();
+const settingsStore = useServerSettingsStore();
+
+// Calculate all items in the menu based on the user's security groups
+const model = computed<MenuItem[]>(() => {
+  const showPosters =
+    authStore.isInSecurityGroup('poster', 'base') && settingsStore.featureEnabled('Poster');
+  const showAudit = authStore.isInSecurityGroup('audit', 'base');
+  const showCenturion =
+    authStore.isInSecurityGroup('centurion', 'privileged') &&
+    settingsStore.featureEnabled('Centurion');
+  const showTimeTrail =
+    authStore.isInSecurityGroup('timetrail', 'base') &&
+    settingsStore.featureEnabled('TimeTrailRace');
+
+  const showEffects = authStore.isInSecurityGroup('effects', 'base');
+  const showScenes = authStore.isInSecurityGroup('scenes', 'base');
+  const showFixtures = authStore.isInSecurityGroup('handler', 'base');
+
+  const showSettings = authStore.isInSecurityGroup('serverSettings', 'privileged');
+  const showTimedEvents = authStore.isInSecurityGroup('timedEvents', 'privileged');
+  const showSpotifySettings = authStore.isInSecurityGroup('spotify', 'privileged');
+  const showBeatSettings = authStore.isInSecurityGroup('beats', 'privileged');
+  const showIntegrationUsers = authStore.isInSecurityGroup('integrationUsers', 'privileged');
+
+  return [
+    {
+      label: 'Home',
+      items: [
+        { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+        showAudit && { label: 'Logs', icon: 'pi pi-fw pi-book', to: '/audit' },
+      ].filter(Boolean),
+    },
+    showPosters && {
+      label: 'Screens',
+      items: [{ label: 'Posters', icon: 'pi pi-fw pi-image', to: '/poster/posters' }],
+    },
+    {
+      label: 'Lights',
+      items: [
+        showEffects && { label: 'Effects', icon: 'pi pi-fw pi-sparkles', to: '/lights/effects' },
+        showScenes && {
+          label: 'Scenes',
+          icon: 'pi pi-fw pi-sliders-h',
+          to: '/lights/scenesController',
+        },
+        showFixtures && { label: 'Fixtures', icon: 'pi pi-fw pi-bolt', to: '/lights/fixtures' },
+      ].filter(Boolean),
+    },
+    (showCenturion || showTimeTrail) && {
+      label: 'Modes',
+      items: [
+        showTimeTrail && {
+          label: 'Spoelbakkenrace',
+          icon: 'pi pi-fw pi-hourglass',
+          to: '/modes/timetrailrace',
+        },
+        showCenturion && { label: 'Centurion', icon: 'pi pi-fw pi-crown', to: '/modes/centurion' },
+      ].filter(Boolean),
+    },
+    (showSettings || showTimedEvents || showSpotifySettings || showIntegrationUsers) && {
+      label: 'Settings',
+      items: [
+        showSettings && { label: 'Server Settings', icon: 'pi pi-fw pi-cog', to: '/settings' },
+        showTimedEvents && {
+          label: 'Timed Events',
+          icon: 'pi pi-fw pi-calendar-clock',
+          to: '/timed-events',
+        },
+        (showSpotifySettings || showBeatSettings) && {
+          label: 'Music Settings',
+          icon: 'pi pi-headphones',
+          to: '/music',
+        },
+        showIntegrationUsers && {
+          label: 'Integrations',
+          icon: 'pi pi-share-alt',
+          to: '/integrations',
+        },
+      ],
+    },
+  ].filter(Boolean) as MenuItem[];
+});
+</script>
diff --git a/apps/aurora-backoffice/src/layout/AppMenuItem.vue b/apps/aurora-backoffice/src/layout/AppMenuItem.vue
new file mode 100644
index 00000000..2bd587d0
--- /dev/null
+++ b/apps/aurora-backoffice/src/layout/AppMenuItem.vue
@@ -0,0 +1,72 @@
+<template>
+  <li :class="{ 'layout-root-menuitem': root }">
+    <p v-if="root" class="layout-menuitem-root-text p-card-title">
+      {{ item.label }}
+    </p>
+
+    <RouterLink
+      v-if="item.to && !item.items"
+      :class="{ 'active-route': checkActiveRoute(item) }"
+      tabindex="0"
+      :to="item.to"
+      @click="itemClick"
+    >
+      <i class="layout-menuitem-icon" :class="item.icon" />
+      <span class="layout-menuitem-text">{{ item.label }}</span>
+    </RouterLink>
+
+    <Transition v-if="item.items" name="layout-submenu">
+      <ul v-show="root" class="layout-submenu">
+        <template v-for="(child, i) in item.items" :key="child">
+          <AppMenuItem :index="i" :item="child" :root="false" />
+        </template>
+      </ul>
+    </Transition>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { useLayoutStore } from '@/stores/layout.store';
+
+export interface MenuItem {
+  label: string;
+  icon?: string;
+  to?: string;
+  items?: MenuItem[];
+}
+
+defineProps({
+  item: {
+    type: Object as () => MenuItem,
+    default: () => ({}),
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+  root: {
+    type: Boolean,
+    default: true,
+  },
+  parentItemKey: {
+    type: String,
+    default: null,
+  },
+});
+
+const layoutStore = useLayoutStore();
+const route = useRoute();
+
+const checkActiveRoute = (item: MenuItem) => {
+  return route.path === item.to;
+};
+
+const itemClick = () => {
+  if (layoutStore.menuMobileActive) {
+    layoutStore.switchMenuMobile();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/apps/aurora-backoffice/src/layout/AppTopbar.vue b/apps/aurora-backoffice/src/layout/AppTopbar.vue
new file mode 100644
index 00000000..2e0f382c
--- /dev/null
+++ b/apps/aurora-backoffice/src/layout/AppTopbar.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="layout-topbar">
+    <router-link class="layout-topbar-logo" to="/">
+      <img alt="logo" :src="logoUrl" />
+      <span>Aurora</span>
+    </router-link>
+
+    <button class="p-link layout-topbar-button left" @click="switchMenu">
+      <i class="pi pi-bars" />
+    </button>
+
+    <div class="p-link layout-topbar-button right" @click="onThemeChangeButton">
+      <i
+        :class="[
+          'pi',
+          {
+            'pi-moon': !darkMode,
+            'pi-sun': darkMode,
+          },
+        ]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { useLayoutStore } from '@/stores/layout.store';
+
+const layoutStore = useLayoutStore();
+const { darkMode } = storeToRefs(layoutStore);
+
+const logoUrl = computed(() => {
+  return `/layout/images/${darkMode.value ? 'helmet-white' : 'helmet-black'}.svg`;
+});
+
+const switchMenu = () => {
+  if (window.innerWidth > 991) {
+    layoutStore.switchMenuDesktop();
+  } else {
+    layoutStore.switchMenuMobile();
+  }
+};
+
+const onThemeChangeButton = () => {
+  layoutStore.switchTheme();
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/styles.scss';
+</style>
diff --git a/apps/aurora-backoffice/src/main.ts b/apps/aurora-backoffice/src/main.ts
new file mode 100644
index 00000000..b82ce2f3
--- /dev/null
+++ b/apps/aurora-backoffice/src/main.ts
@@ -0,0 +1,146 @@
+/* eslint vue/multi-word-component-names: 0 */
+/* eslint vue/no-reserved-component-names: 0 */
+import 'primeicons/primeicons.css';
+import '@/assets/styles.scss';
+
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import '@gewis/splash';
+// @ts-expect-error -- package does exist
+import timeago from 'vue-timeago3';
+import PrimeVue from 'primevue/config';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Menubar from 'primevue/menubar';
+import Panel from 'primevue/panel';
+import DataTable from 'primevue/datatable';
+import InputNumber from 'primevue/inputnumber';
+import Dialog from 'primevue/dialog';
+import Select from 'primevue/select';
+import Checkbox from 'primevue/checkbox';
+import Tabs from 'primevue/tabs';
+import ScrollPanel from 'primevue/scrollpanel';
+import FileUpload from 'primevue/fileupload';
+import ProgressSpinner from 'primevue/progressspinner';
+import ProgressBar from 'primevue/progressbar';
+import SelectButton from 'primevue/selectbutton';
+import ToggleButton from 'primevue/togglebutton';
+import Card from 'primevue/card';
+import Chip from 'primevue/chip';
+import Slider from 'primevue/slider';
+import ToastService from 'primevue/toastservice';
+import ConfirmationService from 'primevue/confirmationservice';
+import Toast from 'primevue/toast';
+import Menu from 'primevue/menu';
+import MultiSelect from 'primevue/multiselect';
+import Divider from 'primevue/divider';
+import Skeleton from 'primevue/skeleton';
+import ConfirmDialog from 'primevue/confirmdialog';
+import Image from 'primevue/image';
+import Carousel from 'primevue/carousel';
+import Stepper from 'primevue/stepper';
+import StepPanel from 'primevue/steppanel';
+import ToggleSwitch from 'primevue/toggleswitch';
+import Column from 'primevue/column';
+import Paginator from 'primevue/paginator';
+import Message from 'primevue/message';
+import Tag from 'primevue/tag';
+import {
+  ColorPicker,
+  FloatLabel,
+  InputGroupAddon,
+  Popover,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tooltip,
+  TreeTable,
+} from 'primevue';
+import InputGroup from 'primevue/inputgroup';
+import { client } from '@gewis/aurora-api-client/client';
+import router from './router';
+import App from './App.vue';
+import '@/utils/fetchInterceptor';
+import { AuraPreset } from '@/assets/preset';
+
+const app = createApp(App);
+
+// define options
+const timeagoOptions = {
+  converterOptions: {
+    includeSeconds: true,
+  },
+};
+
+app.use(router);
+app.use(PrimeVue, {
+  theme: {
+    preset: AuraPreset,
+    options: {
+      darkModeSelector: '.dark-mode',
+    },
+  },
+});
+app.use(ToastService);
+app.use(ConfirmationService);
+
+client.setConfig({
+  baseUrl: '/api',
+});
+
+app.use(createPinia());
+app.use(timeago, timeagoOptions);
+
+app.component('Button', Button);
+app.component('Card', Card);
+app.component('Chip', Chip);
+app.component('SelectButton', SelectButton);
+app.component('ToggleButton', ToggleButton);
+app.component('InputText', InputText);
+app.component('InputNumber', InputNumber);
+app.component('Menu', Menu);
+app.component('Menubar', Menubar);
+app.component('Panel', Panel);
+app.component('DataTable', DataTable);
+app.component('TreeTable', TreeTable);
+app.component('Column', Column);
+app.component('Paginator', Paginator);
+app.component('Dialog', Dialog);
+app.component('Select', Select);
+app.component('Checkbox', Checkbox);
+app.component('Tabs', Tabs);
+app.component('TabList', TabList);
+app.component('Tab', Tab);
+app.component('TabPanels', TabPanels);
+app.component('TabPanel', TabPanel);
+app.component('ScrollPanel', ScrollPanel);
+app.component('FileUpload', FileUpload);
+app.component('Spinner', ProgressSpinner);
+app.component('ProgressSpinner', ProgressSpinner);
+app.component('ProgressBar', ProgressBar);
+app.component('Slider', Slider);
+app.component('Toast', Toast);
+app.component('MultiSelect', MultiSelect);
+app.component('Divider', Divider);
+app.component('Skeleton', Skeleton);
+app.component('ConfirmDialog', ConfirmDialog);
+app.component('Image', Image);
+app.component('Carousel', Carousel);
+app.component('Stepper', Stepper);
+app.component('InlineMessage', Message);
+app.component('StepperPanel', StepPanel);
+app.component('ToggleSwitch', ToggleSwitch);
+app.component('Tag', Tag);
+app.component('Message', Message);
+app.component('FloatLabel', FloatLabel);
+app.component('Popover', Popover);
+app.component('ColorPicker', ColorPicker);
+app.component('InputGroup', InputGroup);
+app.component('InputGroupAddon', InputGroupAddon);
+
+app.directive('tooltip', Tooltip);
+
+app.mount('#app');
+
+export { app };
diff --git a/apps/aurora-backoffice/src/router/index.ts b/apps/aurora-backoffice/src/router/index.ts
new file mode 100644
index 00000000..d94d6a89
--- /dev/null
+++ b/apps/aurora-backoffice/src/router/index.ts
@@ -0,0 +1,275 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import {
+  type ISecurityGroups,
+  type ISecuritySections,
+  SecurityGroup,
+} from '@gewis/aurora-api-client';
+import { useAuthStore } from '@/stores/auth.store';
+import AppLayout from '@/layout/AppLayout.vue';
+import { useLayoutStore } from '@/stores/layout.store';
+
+interface SecurityRole {
+  securityGroup: keyof ISecurityGroups;
+  securitySection: keyof ISecuritySections;
+}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    security: SecurityRole | SecurityRole[];
+  }
+}
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '',
+      children: [
+        {
+          path: '/auth',
+          name: 'auth',
+          component: () => import('@/views/Base/AuthView.vue'),
+          children: [
+            {
+              path: 'callback',
+              component: () => import('@/views/Base/AuthView.vue'),
+              name: 'authCallback',
+            },
+          ],
+        },
+        {
+          path: '/unauthorized',
+          component: () => import('@/views/Base/UnauthorizedView.vue'),
+          name: 'unauthorized',
+        },
+        {
+          path: '/error',
+          component: () => import('@/views/Base/InternalErrorView.vue'),
+          name: 'error',
+        },
+      ],
+    },
+    {
+      path: '',
+      component: AppLayout,
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/Base/DashboardView.vue'),
+          name: 'dashboard',
+        },
+        {
+          path: '/poster',
+          children: [
+            {
+              path: 'posters',
+              component: () => import('@/views/Poster/PosterView.vue'),
+              name: 'posters',
+            },
+          ],
+          meta: {
+            security: {
+              securityGroup: 'poster',
+              securitySection: 'base',
+            },
+          },
+        },
+        {
+          path: '/modes',
+          children: [
+            {
+              path: 'centurion',
+              component: () => import('@/views/Modes/CenturionModeView.vue'),
+              name: 'centurionMode',
+              meta: {
+                security: {
+                  securityGroup: 'centurion',
+                  securitySection: 'privileged',
+                },
+              },
+            },
+            {
+              path: 'timeTrailRace',
+              component: () => import('@/views/Modes/TimeTrailRaceModeView.vue'),
+              name: 'timeTrailRaceMode',
+              meta: {
+                security: {
+                  securityGroup: 'timetrail',
+                  securitySection: 'base',
+                },
+              },
+            },
+          ],
+        },
+        {
+          path: '/lights',
+          children: [
+            {
+              path: 'effects',
+              component: () => import('@/views/Lights/EffectsController.vue'),
+              name: 'lightEffects',
+              meta: {
+                security: {
+                  securityGroup: 'effects',
+                  securitySection: 'base',
+                },
+              },
+            },
+            {
+              path: 'scenesController',
+              component: () => import('@/views/Lights/ScenesController.vue'),
+              name: 'lightsScenesController',
+              meta: {
+                security: {
+                  securityGroup: 'scenes',
+                  securitySection: 'base',
+                },
+              },
+            },
+            {
+              path: 'fixtures',
+              component: () => import('@/views/Lights/FixtureOverview.vue'),
+              name: 'fixturesOverview',
+              meta: {
+                security: {
+                  securityGroup: 'handler',
+                  securitySection: 'base',
+                },
+              },
+            },
+          ],
+        },
+        {
+          path: '/settings',
+          component: () => import('@/views/Base/ServerSettingsView.vue'),
+          name: 'ServerSettings',
+          meta: {
+            security: {
+              securityGroup: 'serverSettings',
+              securitySection: 'privileged',
+            },
+          },
+        },
+        {
+          path: '/timed-events',
+          component: () => import('@/views/Base/TimedEventsView.vue'),
+          name: 'TimedEvents',
+          meta: {
+            security: {
+              securityGroup: 'timedEvents',
+              securitySection: 'privileged',
+            },
+          },
+        },
+        {
+          path: '/music',
+          component: () => import('@/views/Base/MusicSettingsView.vue'),
+          name: 'MusicSettings',
+          meta: {
+            security: [
+              {
+                securityGroup: 'spotify',
+                securitySection: 'privileged',
+              },
+              {
+                securityGroup: 'beats',
+                securitySection: 'privileged',
+              },
+            ],
+          },
+          children: [
+            {
+              path: 'spotify',
+              children: [
+                {
+                  path: 'callback',
+                  component: () => import('@/views/Base/MusicSettingsView.vue'),
+                  name: 'SpotifyLoginCallback',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          path: '/integrations',
+          component: () => import('@/views/Base/IntegrationsView.vue'),
+          name: 'Integrations',
+          meta: {
+            security: {
+              securityGroup: 'integrationUsers',
+              securitySection: 'privileged',
+            },
+          },
+        },
+        {
+          path: '/audit',
+          component: () => import('@/views/Audit/AuditLogsView.vue'),
+          name: 'AuditLogs',
+          meta: {
+            security: {
+              securityGroup: 'audit',
+              securitySection: 'base',
+            },
+          },
+        },
+      ],
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      component: () => import('@/views/Base/NotFoundView.vue'),
+      name: 'notFound',
+    },
+  ],
+});
+
+router.beforeEach(async (to) => {
+  const layoutStore = useLayoutStore();
+  layoutStore.init();
+
+  const authStore = useAuthStore();
+  let authenticated = authStore.isAuthenticated();
+
+  // Automatically login using mock when in development mode
+  if (import.meta.env.VITE_NODE_ENV === 'development' && !authenticated) {
+    console.info('Backoffice is in development mode: mocking auth...');
+    await authStore.MockLogin({
+      id: 'dev',
+      name: 'dev',
+      roles: [SecurityGroup.ADMIN],
+    });
+  }
+
+  // Check if user still has valid cookies - ignore if specific request to /auth
+  if (!authenticated && !to.path.startsWith('/auth')) {
+    authenticated = await authStore.init();
+  }
+
+  // Getting whether authenticated and has rights to access the route
+  // Only necessary if the user is authenticated
+  let hasRights = true;
+  if (authenticated) {
+    if (to.meta.security && Array.isArray(to.meta.security)) {
+      // If the security metadata is an array, the user needs to have one of the roles
+      hasRights = to.meta.security.some(({ securityGroup, securitySection }) =>
+        authStore.isInSecurityGroup(securityGroup, securitySection),
+      );
+    } else if (to.meta.security) {
+      hasRights = authStore.isInSecurityGroup(
+        to.meta.security.securityGroup,
+        to.meta.security.securitySection,
+      );
+    }
+  }
+
+  if (!authenticated && !to.path.startsWith('/auth')) {
+    // If not authenticated; redirect to login
+    return { name: 'auth', query: { path: to.fullPath } };
+  } else if (authenticated && !hasRights) {
+    // If authenticated, but does not have rights to access the route
+    return { name: 'unauthorized' };
+  }
+  // Proceed if authenticated and has rights (or already on /auth)
+  return undefined;
+});
+
+export default router;
diff --git a/apps/aurora-backoffice/src/stores/audit.store.ts b/apps/aurora-backoffice/src/stores/audit.store.ts
new file mode 100644
index 00000000..de4ef9ce
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/audit.store.ts
@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia';
+import { type AuditLogEntryResponse, getAuditLogs } from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+/**
+ * Audit store
+ * @param dashboardEntries - The log entries shown on the dashboard
+ * @param entries - The log entries
+ * @param take - The number of entries to show
+ * @param skip - The number of entries to skip
+ * @param count - The total number of pages needed to show all entries
+ * @param loading - The loading state
+ */
+interface AuditStore {
+  dashboardEntries: AuditLogEntryResponse[];
+  entries: AuditLogEntryResponse[];
+  take: number;
+  skip: number;
+  count: number;
+  loading: boolean;
+}
+
+export const useAuditStore = defineStore('audit', {
+  state: (): AuditStore => ({
+    dashboardEntries: [],
+    entries: [],
+    take: 5,
+    skip: 0,
+    count: 0,
+    loading: true,
+  }),
+  getters: {},
+  actions: {
+    /**
+     * Handle the audit log addition
+     * @param log
+     */
+    handleAuditLogAddition(log: AuditLogEntryResponse) {
+      this.dashboardEntries = [log, ...this.dashboardEntries].slice(0, this.take);
+    },
+    /**
+     * Initialize the store
+     */
+    async init() {
+      const logs = await getAuditLogs({
+        query: {
+          take: this.take,
+          skip: this.skip,
+        },
+      });
+      this.dashboardEntries = logs.data!.records;
+      this.count = logs.data!.pagination.count;
+
+      this.loading = false;
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.on('audit_log_create', this.handleAuditLogAddition.bind(this));
+    },
+    /**
+     * Get the audit logs
+     */
+    async getLogs() {
+      this.loading = true;
+      const logs = await getAuditLogs({
+        query: {
+          take: this.take,
+          skip: this.skip,
+        },
+      });
+      this.entries = logs.data!.records;
+      this.count = logs.data!.pagination.count;
+      this.loading = false;
+    },
+    /**
+     * Set the skip value
+     * @param skip
+     */
+    async setSkip(skip: number) {
+      this.skip = skip;
+      await this.getLogs();
+    },
+    /**
+     * Set the take value
+     * @param take
+     */
+    async setTake(take: number) {
+      this.take = take;
+      await this.getLogs();
+    },
+    /**
+     * Set the skip and take values at once
+     * @param skip
+     * @param take
+     */
+    async setSkipTake(skip?: number, take?: number) {
+      if (skip) {
+        this.skip = skip;
+      }
+      if (take) {
+        this.take = take;
+      }
+      await this.getLogs();
+    },
+    /**
+     * Destroy the store
+     */
+    destroy() {
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.removeListener(
+        'audit_log_create',
+        this.handleAuditLogAddition.bind(this),
+      );
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/auth.store.ts b/apps/aurora-backoffice/src/stores/auth.store.ts
new file mode 100644
index 00000000..f06ad014
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/auth.store.ts
@@ -0,0 +1,172 @@
+import { defineStore } from 'pinia';
+import _ from 'lodash';
+import {
+  authMock,
+  authOidc,
+  type AuthUser,
+  getInformation,
+  getSecurityGroups,
+  type ISecurityGroups,
+  type ISecuritySections,
+  type OidcParameters,
+  SecurityGroup,
+} from '@gewis/aurora-api-client';
+import { useHandlersStore } from '@/stores/handlers.store';
+import { useColorStore } from '@/stores/color.store';
+import { useSocketStore } from '@/stores/socket.store';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { useStatusStore } from '@/stores/status.store';
+import { useSceneControllerStore } from '@/stores/scene-controller.store';
+import { useAuditStore } from '@/stores/audit.store';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+
+/**
+ * Auth store
+ * @param name - The name of the user
+ * @param roles - The roles of the user
+ * @param development - Whether in development mode
+ * @param securityGroups - The security groups
+ */
+interface AuthStore {
+  name: string | null;
+  roles: SecurityGroup[];
+  securityGroups?: ISecurityGroups;
+  authenticating: boolean;
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthStore => ({
+    name: null,
+    roles: [],
+    securityGroups: undefined,
+    authenticating: false,
+  }),
+  getters: {
+    getName: (state) => state.name,
+    getRoles: (state) => state.roles,
+    getSecurityGroups: (state) => state.securityGroups,
+    getAuthenticating: (state) => state.authenticating,
+  },
+  actions: {
+    /**
+     * Initialize the store
+     */
+    async init(): Promise<boolean> {
+      this.authenticating = true;
+      const user = await getInformation();
+      if (!user.data) {
+        this.authenticating = false;
+        return false;
+      }
+
+      const securityGroups = await getSecurityGroups();
+      if (!securityGroups.data) {
+        this.authenticating = false;
+        return false;
+      }
+
+      this.name = user.data.name;
+      this.roles = user.data.roles;
+      this.securityGroups = securityGroups.data;
+      this.authenticating = false;
+
+      await this.initStores();
+      return true;
+    },
+    /**
+     * Login a user using OIDC
+     * @param oidcParameters - The OIDC parameters
+     */
+    async OIDCLogin(oidcParameters: OidcParameters): Promise<boolean> {
+      this.authenticating = true;
+      const user = await authOidc({
+        body: oidcParameters,
+      });
+
+      if (!user.data) {
+        this.authenticating = false;
+        return false;
+      }
+
+      const securityGroups = await getSecurityGroups();
+      if (!securityGroups.data) {
+        this.authenticating = false;
+        return false;
+      }
+
+      this.name = user.data.name;
+      this.roles = user.data.roles;
+      this.securityGroups = securityGroups.data;
+      this.authenticating = false;
+
+      await this.initStores();
+      return true;
+    },
+    /**
+     * Login a user using any possible data
+     * @param authUser
+     */
+    async MockLogin(authUser: AuthUser): Promise<boolean> {
+      this.authenticating = true;
+      const user = await authMock({
+        body: authUser,
+      });
+
+      const securityGroups = await getSecurityGroups();
+      this.authenticating = false;
+      if (!user.data || !securityGroups.data) return false;
+
+      this.name = user.data.name;
+      this.roles = user.data.roles;
+      this.securityGroups = securityGroups.data;
+
+      await this.initStores();
+      return true;
+    },
+    /**
+     * Initialize the stores -- only those which the user has access to
+     */
+    async initStores(): Promise<void> {
+      await useServerSettingsStore().initFeatureFlags();
+      await useSocketStore().connect();
+      if (this.isInSecurityGroup('serverSettings', 'privileged')) {
+        await useServerSettingsStore().initSettings();
+      }
+      if (this.isInSecurityGroup('handler', 'base')) {
+        await useHandlersStore().init();
+      }
+      if (this.isInSecurityGroup('light', 'base')) {
+        await useColorStore().init();
+      }
+      if (
+        this.isInSecurityGroup('audio', 'base') &&
+        this.isInSecurityGroup('light', 'base') &&
+        this.isInSecurityGroup('screen', 'base')
+      ) {
+        await useSubscriberStore().init();
+        useStatusStore().init();
+      }
+      if (this.isInSecurityGroup('scenes', 'base')) {
+        await useSceneControllerStore().init();
+      }
+      if (this.isInSecurityGroup('audit', 'base')) {
+        await useAuditStore().init();
+      }
+    },
+    /**
+     * Check if the user is authenticated
+     */
+    isAuthenticated(): boolean {
+      return this.name !== undefined && this.roles.length > 0;
+    },
+    /**
+     * Check if the user is in a security group
+     * @param group - The endpoint for the security
+     * @param section - The security group to check for
+     */
+    isInSecurityGroup(group: keyof ISecurityGroups, section: keyof ISecuritySections): boolean {
+      if (!this.securityGroups) return false;
+      return _.intersection(this.roles, this.securityGroups[group][section]).length > 0;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/color.store.ts b/apps/aurora-backoffice/src/stores/color.store.ts
new file mode 100644
index 00000000..b7d24dda
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/color.store.ts
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import {
+  getAllLightsColors,
+  type LightsColorResponse,
+  type RgbColor,
+} from '@gewis/aurora-api-client';
+
+interface ColorStore {
+  colors: LightsColorResponse[];
+}
+
+export const useColorStore = defineStore('color', {
+  state: (): ColorStore => ({
+    colors: [],
+  }),
+  actions: {
+    async init(): Promise<void> {
+      await getAllLightsColors().then((colors) => (this.colors = colors.data!));
+    },
+    getHexColor(c: RgbColor): string {
+      const color = this.colors.find((c1) => c1.color === c);
+      if (!color) return '';
+      return color.spec.hex;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/effects-controller.store.ts b/apps/aurora-backoffice/src/stores/effects-controller.store.ts
new file mode 100644
index 00000000..0ae4f5a9
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/effects-controller.store.ts
@@ -0,0 +1,361 @@
+import { defineStore } from 'pinia';
+import {
+  applyLightsEffectColor,
+  applyLightsEffectMovement,
+  createPredefinedLightsEffect,
+  deletePredefinedLightsEffect,
+  disableStrobeOnLightsGroup,
+  enableStrobeOnLightsGroup,
+  getAllLightsSwitches,
+  getAllPredefinedLightsEffects,
+  type LightsButtonSwitch,
+  type LightsEffectsColorCreateParams,
+  type LightsEffectsMovementCreateParams,
+  type LightsGroupResponse,
+  type LightsPredefinedEffectCreateParams,
+  type LightsPredefinedEffectResponse,
+  type LightsPredefinedEffectUpdateParams,
+  type LightsSwitchResponse,
+  RgbColor,
+  turnOffLightsSwitch,
+  turnOnLightsSwitch,
+  updateLightsEffectColorColors,
+  updatePredefinedLightsEffect,
+} from '@gewis/aurora-api-client';
+import { useHandlersStore } from '@/stores/handlers.store';
+
+interface PushedEffect {
+  timestamp: Date;
+  lightGroupIds: number[];
+  colorEffect?: LightsEffectsColorCreateParams;
+  movementEffect?: LightsEffectsMovementCreateParams;
+}
+
+interface LightsSwitch extends LightsSwitchResponse {
+  enabled: boolean;
+}
+
+interface EffectsControllerStore {
+  // Simple effects controller
+  lightsSwitches: LightsSwitch[];
+  buttonEffects: LightsPredefinedEffectResponse[];
+  currentColors: RgbColor[];
+  loading: boolean;
+
+  // Advanced effects controller
+  selectedLightsGroupIds: number[];
+  pastPushedEffects: PushedEffect[];
+}
+
+export const useEffectsControllerStore = defineStore('effectsController', {
+  state: (): EffectsControllerStore => ({
+    lightsSwitches: [],
+    buttonEffects: [],
+    currentColors: [],
+    loading: true,
+
+    selectedLightsGroupIds: [],
+    pastPushedEffects: [],
+  }),
+  getters: {},
+  actions: {
+    async init() {
+      await Promise.all([this.getLightsSwitches(), this.getButtonEffects()]);
+      this.loading = true;
+    },
+    toggleLightsGroup(id: number) {
+      const index = this.selectedLightsGroupIds.findIndex((g) => g === id);
+      if (index < 0) {
+        this.selectedLightsGroupIds.push(id);
+      } else {
+        this.selectedLightsGroupIds.splice(index, 1);
+      }
+    },
+    selectAllLightsGroups(groups: LightsGroupResponse[]) {
+      this.selectedLightsGroupIds = groups.map((g) => g.id);
+    },
+    resetLightsGroupSelection() {
+      this.selectedLightsGroupIds = [];
+    },
+    lightsGroupHasSetEffectsHandler(id: number) {
+      const store = useHandlersStore();
+      const registeredLights = store.getRegisteredLights('SetEffectsHandler');
+      const ids = registeredLights.map((l) => l.id);
+      return ids.includes(id);
+    },
+    async setColorEffect(effect: LightsEffectsColorCreateParams, lightGroupIds?: number[]) {
+      let ids = lightGroupIds ?? this.selectedLightsGroupIds;
+      // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+      ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+      await Promise.all(
+        ids.map(async (id) => {
+          await applyLightsEffectColor({
+            body: [effect],
+            path: { id },
+          });
+        }),
+      );
+      const pastEffect: PushedEffect = {
+        colorEffect: { ...effect },
+        lightGroupIds: [...ids],
+        timestamp: new Date(),
+      };
+      this.pastPushedEffects = [pastEffect, ...this.pastPushedEffects.slice(0, 9)];
+    },
+    async setMovementEffect(effect: LightsEffectsMovementCreateParams, lightGroupIds?: number[]) {
+      let ids = lightGroupIds ?? this.selectedLightsGroupIds;
+      // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+      ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+      await Promise.all(
+        ids.map(async (id) => {
+          await applyLightsEffectMovement({
+            body: [effect],
+            path: { id },
+          });
+        }),
+      );
+      const pastEffect: PushedEffect = {
+        movementEffect: { ...effect },
+        lightGroupIds: [...ids],
+        timestamp: new Date(),
+      };
+      this.pastPushedEffects = [pastEffect, ...this.pastPushedEffects.slice(0, 9)];
+    },
+    async enableStrobe(lightGroupIds?: number[]) {
+      let ids = lightGroupIds ?? this.selectedLightsGroupIds;
+      // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+      ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+      await Promise.all(
+        ids.map((id) => {
+          return enableStrobeOnLightsGroup({
+            path: { id },
+          });
+        }),
+      );
+    },
+    async disableStrobe(lightGroupIds?: number[]) {
+      let ids = lightGroupIds ?? this.selectedLightsGroupIds;
+      // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+      ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+      await Promise.all(
+        ids.map((id) => {
+          return disableStrobeOnLightsGroup({
+            path: { id },
+          });
+        }),
+      );
+    },
+    /**
+     * Remove all color effects from the given fixtures.
+     * Uses "selectedLightsGroupIds if none given"
+     */
+    async disableLightsColors(lightGroupIds?: number[]) {
+      let ids = lightGroupIds ?? this.selectedLightsGroupIds;
+      // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+      ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+      await Promise.all(
+        ids.map((id) => {
+          return applyLightsEffectColor({
+            body: [],
+            path: { id },
+          });
+        }),
+      );
+    },
+    /**
+     * Remove all movement effects from the given fixtures.
+     * Uses "selectedLightsGroupIds if none given"
+     */
+    async disableLightsMovement(lightGroupIds?: number[]) {
+      let ids = lightGroupIds ?? this.selectedLightsGroupIds;
+      // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+      ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+      await Promise.all(
+        ids.map((id) => {
+          return applyLightsEffectMovement({
+            body: [],
+            path: { id },
+          });
+        }),
+      );
+    },
+    async turnOnLightsSwitch(id: number) {
+      await turnOnLightsSwitch({ path: { id } });
+      const index = this.lightsSwitches.findIndex((s) => s.id === id);
+      if (index >= 0) {
+        this.lightsSwitches[index].enabled = true;
+      }
+    },
+    async turnOnLightsSwitches(ids: number[]) {
+      await Promise.all(ids.map((id) => turnOnLightsSwitch({ path: { id } })));
+    },
+    async turnOffLightsSwitch(id: number) {
+      await turnOffLightsSwitch({ path: { id } });
+      const index = this.lightsSwitches.findIndex((s) => s.id === id);
+      if (index >= 0) {
+        this.lightsSwitches[index].enabled = false;
+      }
+    },
+    async turnOffLightsSwitches(ids: number[]) {
+      await Promise.all(ids.map((id) => turnOffLightsSwitch({ path: { id } })));
+    },
+    async getLightsSwitches() {
+      const response = await getAllLightsSwitches();
+      if (!response.response.ok || !response.data) {
+        return;
+      }
+
+      this.lightsSwitches = response.data.map((r) => ({ ...r, enabled: false }));
+      const response2 = await getAllLightsSwitches({ query: { enabled: true } });
+      if (!response2.response.ok || !response2.data) {
+        return;
+      }
+      response2.data?.forEach((s) => {
+        const index = this.lightsSwitches.findIndex((s2) => s.id === s2.id);
+        if (index >= 0) this.lightsSwitches[index].enabled = true;
+      });
+    },
+    createNullButtonEffect(buttonId: number): LightsPredefinedEffectResponse {
+      return {
+        id: -1,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        buttonId,
+        properties: {
+          type: 'LightsButtonNull',
+        },
+      };
+    },
+    async getButtonEffects() {
+      const response = await getAllPredefinedLightsEffects();
+      if (response.response.ok && response.data) {
+        this.buttonEffects = response.data;
+      }
+      this.buttonEffects.sort((a, b) => a.buttonId - b.buttonId);
+      for (let i = 0; i < 64; i++) {
+        if (this.buttonEffects[i]?.buttonId !== i + 1) {
+          this.buttonEffects.splice(i, 0, this.createNullButtonEffect(i + 1));
+        }
+      }
+    },
+    async createButtonEffect(params: LightsPredefinedEffectCreateParams) {
+      const response = await createPredefinedLightsEffect({ body: params });
+      if (response.response.ok && response.data) {
+        const index = this.buttonEffects.findIndex((e) => e.buttonId === response.data.buttonId);
+        if (index >= 0) {
+          this.buttonEffects.splice(index, 1, response.data);
+        } else {
+          this.buttonEffects.push(response.data);
+          this.buttonEffects.sort((a, b) => a.buttonId - b.buttonId);
+        }
+      }
+    },
+    async updateButtonEffect(id: number, body: LightsPredefinedEffectUpdateParams) {
+      const response = await updatePredefinedLightsEffect({ path: { id }, body });
+      if (response.response.ok && response.data) {
+        const index = this.buttonEffects.findIndex((g) => g.id === id);
+        this.buttonEffects.splice(index, 1, response.data);
+      }
+    },
+    async deleteButtonEffect(id: number) {
+      const response = await deletePredefinedLightsEffect({ path: { id } });
+      if (response.response.ok) {
+        const index = this.buttonEffects.findIndex((g) => g.id === id);
+        const oldEffect = this.buttonEffects[index];
+        this.buttonEffects.splice(index, 1, this.createNullButtonEffect(oldEffect.buttonId));
+      }
+    },
+    async onEffectButtonPress(button: LightsPredefinedEffectResponse) {
+      switch (button.properties.type) {
+        case 'LightsButtonStrobe': {
+          await this.enableStrobe(button.properties.lightsGroupIds);
+          return;
+        }
+      }
+    },
+    async onEffectButtonRelease(button: LightsPredefinedEffectResponse) {
+      switch (button.properties.type) {
+        case 'LightsButtonColors': {
+          const properties = button.properties;
+          this.currentColors = properties.colors;
+
+          let ids = button.properties.lightsGroupIds || [];
+          // Only send request for lights groups that have the correct handler (prevents 4xx errors)
+          ids = ids.filter(this.lightsGroupHasSetEffectsHandler.bind(this));
+          await Promise.all(
+            ids.map(async (id) => {
+              await updateLightsEffectColorColors({
+                path: { id },
+                body: { colors: properties.colors },
+              });
+            }),
+          );
+
+          return;
+        }
+        case 'LightsButtonEffectColor': {
+          const body: LightsEffectsColorCreateParams = button.properties.effectProps;
+          if ('colors' in body.props) {
+            body.props.colors = this.currentColors;
+          }
+          await this.setColorEffect(body, button.properties.lightsGroupIds);
+          return;
+        }
+        case 'LightsButtonEffectMovement': {
+          await this.setMovementEffect(
+            button.properties.effectProps,
+            button.properties.lightsGroupIds,
+          );
+          return;
+        }
+        case 'LightsButtonReset': {
+          await Promise.all([
+            this.disableLightsColors(button.properties.lightsGroupIds),
+            this.disableLightsMovement(button.properties.lightsGroupIds),
+          ]);
+          return;
+        }
+        case 'LightsButtonStrobe': {
+          await this.disableStrobe(button.properties.lightsGroupIds);
+          return;
+        }
+        case 'LightsButtonSwitch': {
+          const lightsSwitches = this.lightsSwitches.filter((s) =>
+            (button.properties as LightsButtonSwitch).switchIds.includes(s.id),
+          );
+          await Promise.all(
+            lightsSwitches.map(async (lightsSwitch) => {
+              if (lightsSwitch.enabled) {
+                await this.turnOffLightsSwitch(lightsSwitch.id);
+              } else {
+                await this.turnOnLightsSwitch(lightsSwitch.id);
+              }
+            }),
+          );
+        }
+      }
+    },
+    async onEffectButtonCancel(button: LightsPredefinedEffectResponse) {
+      switch (button.properties.type) {
+        case 'LightsButtonStrobe': {
+          await this.disableStrobe(button.properties.lightsGroupIds);
+          return;
+        }
+      }
+    },
+    areSelectedColors(colors: RgbColor[]): boolean {
+      if (this.currentColors.length !== colors.length) {
+        return false;
+      }
+
+      for (let i = 0; i < colors.length; i++) {
+        // Colors should be in the same order
+        if (this.currentColors[i] !== colors[i]) return false;
+      }
+
+      return true;
+    },
+  },
+});
+
+export { type PushedEffect };
diff --git a/apps/aurora-backoffice/src/stores/handlers.store.ts b/apps/aurora-backoffice/src/stores/handlers.store.ts
new file mode 100644
index 00000000..d9f8d33a
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/handlers.store.ts
@@ -0,0 +1,247 @@
+import { defineStore } from 'pinia';
+import {
+  type AudioResponse,
+  getAudioHandlers,
+  getLightsHandlers,
+  getScreenHandlers,
+  type HandlerResponseAudioResponse,
+  type HandlerResponseLightsGroupResponse,
+  type HandlerResponseScreenResponse,
+  type LightsGroupResponse,
+  resetAllHandlersToDefaults,
+  type ScreenResponse,
+  setAudioHandler,
+  setLightsHandler,
+  setScreenHandler,
+} from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+type Handler =
+  | HandlerResponseAudioResponse
+  | HandlerResponseLightsGroupResponse
+  | HandlerResponseScreenResponse;
+
+/**
+ * HandlerStore
+ * @param audioHandlers - The audio handlers
+ * @param lightsHandlers - The lights handlers
+ * @param screenHandlers - The screen handlers
+ * @param gettingAudio - Whether getting the audio handlers
+ * @param settingAudio - Whether setting the audio handler
+ * @param gettingScreens - Whether getting the screen handlers
+ * @param settingScreens - Whether setting the screen handler
+ * @param gettingLights - Whether getting the lights handlers
+ * @param settingLights - Whether setting the lights handler
+ */
+interface HandlersStore {
+  audioHandlers: HandlerResponseAudioResponse[];
+  lightsHandlers: HandlerResponseLightsGroupResponse[];
+  screenHandlers: HandlerResponseScreenResponse[];
+  gettingAudio: boolean;
+  settingAudio: boolean;
+  gettingScreens: boolean;
+  settingScreens: boolean;
+  gettingLights: boolean;
+  settingLights: boolean;
+}
+
+export const useHandlersStore = defineStore('handlers', {
+  state: (): HandlersStore => ({
+    audioHandlers: [],
+    lightsHandlers: [],
+    screenHandlers: [],
+    gettingAudio: false,
+    settingAudio: false,
+    gettingScreens: false,
+    settingScreens: false,
+    gettingLights: false,
+    settingLights: false,
+  }),
+  getters: {
+    fetchAudioHandlers: (state) => state.audioHandlers,
+    fetchLightsHandlers: (state) => state.lightsHandlers,
+    fetchScreenHandlers: (state) => state.screenHandlers,
+    isGettingAudio: (state) => state.gettingAudio,
+    isSettingAudio: (state) => state.settingAudio,
+    isGettingScreens: (state) => state.gettingScreens,
+    isSettingScreens: (state) => state.settingScreens,
+    isGettingLights: (state) => state.gettingLights,
+    isSettingLights: (state) => state.settingLights,
+  },
+  actions: {
+    /**
+     * Get the audio handlers
+     * In case error while fetching; set undefined
+     */
+    async getAudioHandlers() {
+      this.gettingAudio = true;
+      await getAudioHandlers()
+        .then((handlers) => (this.audioHandlers = handlers.data!))
+        .catch(() => (this.audioHandlers = []));
+      this.gettingAudio = false;
+    },
+    /**
+     * Get the light handlers
+     * In case error while fetching; set undefined
+     */
+    async getLightsHandlers() {
+      this.gettingLights = true;
+      await getLightsHandlers()
+        .then((handlers) => (this.lightsHandlers = handlers.data!))
+        .catch(() => (this.lightsHandlers = []));
+      this.gettingLights = false;
+    },
+    /**
+     * Get the screen handlers
+     * In case error while fetching; set undefined
+     */
+    async getScreenHandlers() {
+      this.gettingScreens = true;
+      await getScreenHandlers()
+        .then((handlers) => (this.screenHandlers = handlers.data!))
+        .catch(() => (this.screenHandlers = []));
+      this.gettingScreens = false;
+    },
+    /**
+     * Initialize the store
+     */
+    async init(): Promise<void> {
+      this.gettingAudio = this.gettingScreens = this.gettingLights = true;
+      await this.getAudioHandlers();
+      await this.getLightsHandlers();
+      await this.getScreenHandlers();
+
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.on('handler_audio_update', this.getAudioHandlers.bind(this));
+      socketStore.backofficeSocket?.on('handler_screen_update', this.getScreenHandlers.bind(this));
+      socketStore.backofficeSocket?.on(
+        'handler_lightsgroup_update',
+        this.getLightsHandlers.bind(this),
+      );
+
+      this.gettingAudio = this.gettingScreens = this.gettingLights = false;
+    },
+    /**
+     * Set the audio handler
+     * @param id - id of the audio
+     * @param newHandler - new handler
+     */
+    async setAudioHandler(id: number | number[], newHandler: string | null = null): Promise<void> {
+      this.settingAudio = true;
+      if (Array.isArray(id)) {
+        await Promise.all(
+          id.map(
+            async (i) =>
+              await setAudioHandler({
+                body: { name: newHandler != null ? newHandler : '' },
+                path: { id: i },
+              }),
+          ),
+        );
+      } else {
+        await setAudioHandler({
+          body: { name: newHandler != null ? newHandler : '' },
+          path: { id },
+        });
+      }
+      this.settingAudio = false;
+
+      await this.getAudioHandlers();
+    },
+    /**
+     * Set the lights handler
+     * @param id - id of the lights group
+     * @param newHandler - new handler
+     */
+    async setLightsHandler(id: number | number[], newHandler: string | null = null): Promise<void> {
+      this.settingLights = true;
+      if (Array.isArray(id)) {
+        await Promise.all(
+          id.map((i) =>
+            setLightsHandler({
+              body: { name: newHandler != null ? newHandler : '' },
+              path: { id: i },
+            }),
+          ),
+        );
+      } else {
+        await setLightsHandler({
+          body: { name: newHandler != null ? newHandler : '' },
+          path: { id },
+        });
+      }
+      this.settingLights = false;
+
+      await this.getLightsHandlers();
+    },
+    /**
+     * Set the screen handler
+     * @param id - id of the screen
+     * @param newHandler - new handler
+     */
+    async setScreenHandler(id: number | number[], newHandler: string | null = null): Promise<void> {
+      this.settingScreens = true;
+      if (Array.isArray(id)) {
+        await Promise.all(
+          id.map((i) =>
+            setScreenHandler({
+              body: { name: newHandler != null ? newHandler : '' },
+              path: { id: i },
+            }),
+          ),
+        );
+      } else {
+        await setScreenHandler({
+          body: { name: newHandler != null ? newHandler : '' },
+          path: { id },
+        });
+      }
+
+      this.settingScreens = false;
+      await this.getScreenHandlers();
+    },
+    /**
+     * Get the registered audios
+     * @param handlerName
+     */
+    getRegisteredAudios(handlerName?: string): AudioResponse[] {
+      if (!handlerName) return this.audioHandlers.map((h) => h.entities).flat();
+      const handler = this.audioHandlers.find((h) => h.name === handlerName);
+      if (!handler) return [];
+      return handler.entities;
+    },
+    /**
+     * Get the registered lights
+     * @param handlerName
+     */
+    getRegisteredLights(handlerName?: string): LightsGroupResponse[] {
+      if (!handlerName) return this.lightsHandlers.map((h) => h.entities).flat();
+      const handler = this.lightsHandlers.find((h) => h.name === handlerName);
+      if (!handler) return [];
+      return handler.entities;
+    },
+    /**
+     * Get the registered screens
+     * @param handlerName
+     */
+    getRegisteredScreens(handlerName?: string): ScreenResponse[] {
+      if (!handlerName) return this.screenHandlers.map((h) => h.entities).flat();
+      const handler = this.screenHandlers.find((h) => h.name === handlerName);
+      if (!handler) return [];
+      return handler.entities;
+    },
+    /**
+     * Reset the store
+     */
+    async reset() {
+      this.gettingAudio = this.gettingScreens = this.gettingLights = true;
+      await resetAllHandlersToDefaults();
+      await this.getAudioHandlers();
+      await this.getLightsHandlers();
+      await this.getScreenHandlers();
+      this.gettingAudio = this.gettingScreens = this.gettingLights = false;
+    },
+  },
+});
+
+export { type Handler };
diff --git a/apps/aurora-backoffice/src/stores/integrations.store.ts b/apps/aurora-backoffice/src/stores/integrations.store.ts
new file mode 100644
index 00000000..ec0c5d54
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/integrations.store.ts
@@ -0,0 +1,82 @@
+import { defineStore } from 'pinia';
+import {
+  createIntegrationUser,
+  deleteIntegrationUser,
+  getAllIntegrationUsers,
+  getIntegrationEndpoints,
+  getIntegrationUserKey,
+  type IntegrationUserCreateRequest,
+  type IntegrationUserResponse,
+  type IntegrationUserUpdateRequest,
+  updateIntegrationUser,
+} from '@gewis/aurora-api-client';
+
+export interface IntegrationUser extends IntegrationUserResponse {
+  apiKey?: string;
+}
+
+interface IntegrationsStore {
+  integrationUsers: IntegrationUser[];
+  integrationEndpoints: string[];
+  loading: boolean;
+}
+
+export const useIntegrationsStore = defineStore('integration-users', {
+  state: (): IntegrationsStore => ({
+    integrationUsers: [],
+    integrationEndpoints: [],
+    loading: true,
+  }),
+  actions: {
+    async init(): Promise<void> {
+      const res = await getAllIntegrationUsers();
+      if (res.response.ok && res.data) {
+        this.integrationUsers = res.data;
+      }
+      const res2 = await getIntegrationEndpoints();
+      if (res2.response.ok && res2.data) {
+        this.integrationEndpoints = res2.data;
+      }
+      this.loading = false;
+    },
+    async createUser(params: IntegrationUserCreateRequest): Promise<void> {
+      const res = await createIntegrationUser({ body: params });
+      if (res.response.ok && res.data) {
+        this.integrationUsers.push(res.data);
+      }
+    },
+    async updateUser(id: number, params: IntegrationUserUpdateRequest): Promise<void> {
+      const res = await updateIntegrationUser({ path: { id }, body: params });
+      if (res.response.ok && res.data) {
+        const index = this.integrationUsers.findIndex((u) => u.id === id);
+        if (index >= 0) {
+          this.integrationUsers.splice(index, 1, res.data);
+        }
+      }
+    },
+    async deleteUser(id: number): Promise<void> {
+      const res = await deleteIntegrationUser({ path: { id } });
+      if (res.response.ok) {
+        const index = this.integrationUsers.findIndex((u) => u.id === id);
+        if (index >= 0) {
+          this.integrationUsers.splice(index, 1);
+        }
+      }
+    },
+    async showApiKey(id: number): Promise<void> {
+      const res = await getIntegrationUserKey({ path: { id } });
+      if (res.response.ok && res.data) {
+        const index = this.integrationUsers.findIndex((u) => u.id === id);
+        if (index >= 0) {
+          this.integrationUsers[index].apiKey = res.data;
+        }
+      }
+    },
+    hideApiKey(id: number): void {
+      const index = this.integrationUsers.findIndex((u) => u.id === id);
+      if (index >= 0) {
+        this.integrationUsers[index].apiKey = undefined;
+      }
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/layout.store.ts b/apps/aurora-backoffice/src/stores/layout.store.ts
new file mode 100644
index 00000000..02a4e15c
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/layout.store.ts
@@ -0,0 +1,124 @@
+import { defineStore } from 'pinia';
+
+/**
+ * window widths defined by Tailwind
+ */
+enum TailwindWidth {
+  sm = 576,
+  md = 768,
+  lg = 992,
+  xl = 1200,
+  xxl = 1600,
+}
+
+/**
+ * Layout store
+ * @param menuMobileActive - Whether the menu is active on mobile
+ * @param menuDesktopActive - Whether the menu is active on desktop
+ * @param darkMode - Whether the dark mode is active
+ * @param windowWidth - The width of the window
+ */
+interface LayoutStore {
+  menuMobileActive: boolean;
+  menuDesktopActive: boolean;
+  darkMode: boolean;
+  windowWidth: number;
+}
+
+/**
+ * Get dark mode from local storage, otherwise match media
+ */
+function useDarkMode() {
+  if (localStorage.getItem('theme')) {
+    return localStorage.getItem('theme') === 'dark';
+  } else {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      localStorage.setItem('theme', 'dark');
+      return true;
+    } else {
+      localStorage.setItem('theme', 'light');
+      return false;
+    }
+  }
+}
+
+export const useLayoutStore = defineStore('layout', {
+  state: (): LayoutStore => ({
+    menuMobileActive: false,
+    menuDesktopActive: false,
+    darkMode: useDarkMode(),
+    windowWidth: window.innerWidth,
+  }),
+  getters: {
+    getMenuMobileActive: (state) => state.menuMobileActive,
+    getMenuDesktopActive: (state) => state.menuDesktopActive,
+    getDarkMode: (state) => state.darkMode,
+    getWindowWidth: (state): number => state.windowWidth,
+  },
+  actions: {
+    /**
+     * Initialize the store
+     */
+    init() {
+      this.applyTheme();
+
+      // Open the main menu by default if the screen is large enough
+      const bound: number = TailwindWidth.xxl;
+      if (this.windowWidth > bound) {
+        this.menuDesktopActive = true;
+      }
+    },
+    /**
+     * Toggle the menu on mobile
+     */
+    switchMenuMobile() {
+      this.menuMobileActive = !this.menuMobileActive;
+    },
+    /**
+     * Toggle the menu on desktop
+     */
+    switchMenuDesktop() {
+      this.menuDesktopActive = !this.menuDesktopActive;
+    },
+    /**
+     * Toggle the theme
+     */
+    switchTheme() {
+      this.darkMode = !this.darkMode;
+      const theme = this.darkMode ? 'dark' : 'light';
+      localStorage.setItem('theme', theme);
+      this.applyTheme();
+    },
+    /**
+     * Apply a specific theme by adding a class to the html element
+     */
+    applyTheme() {
+      const element = document.querySelector('html');
+      if (this.darkMode) {
+        element!.classList.add('dark-mode');
+      } else {
+        element!.classList.remove('dark-mode');
+      }
+    },
+    /**
+     * Adjust the state width to match the window width
+     */
+    changeWidth() {
+      this.windowWidth = window.innerWidth;
+    },
+    /**
+     * Mount the resize listener to the window
+     */
+    mountResizeListener() {
+      window.addEventListener('resize', this.changeWidth.bind(this));
+    },
+    /**
+     * Unmount the resize listener from the window
+     */
+    unmountResizeListener() {
+      window.removeEventListener('resize', this.changeWidth.bind(this));
+    },
+  },
+});
+
+export { TailwindWidth };
diff --git a/apps/aurora-backoffice/src/stores/lights.store.ts b/apps/aurora-backoffice/src/stores/lights.store.ts
new file mode 100644
index 00000000..ef38f79d
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/lights.store.ts
@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia';
+import { clearLightsGroupMasterDimmer, setLightsGroupMasterDimmer } from '@gewis/aurora-api-client';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+
+interface LightsStore {
+  brightnessLoading: boolean;
+}
+
+export const useLightsStore = defineStore('lights', {
+  state: (): LightsStore => ({
+    brightnessLoading: false,
+  }),
+  actions: {
+    async setLightsGroupBrightness(id: number, relativeBrightness: number) {
+      this.brightnessLoading = true;
+      const res = await setLightsGroupMasterDimmer({ path: { id }, body: { relativeBrightness } });
+      if (res.response.ok) {
+        await useSubscriberStore().updateLightsGroupInStore(id);
+      }
+      this.brightnessLoading = false;
+    },
+    async resetLightsGroupBrightness(id: number) {
+      this.brightnessLoading = true;
+      const res = await clearLightsGroupMasterDimmer({ path: { id } });
+      if (res.response.ok) {
+        await useSubscriberStore().updateLightsGroupInStore(id);
+      }
+      this.brightnessLoading = false;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/modes/centurion.store.ts b/apps/aurora-backoffice/src/stores/modes/centurion.store.ts
new file mode 100644
index 00000000..0ff9f79d
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/modes/centurion.store.ts
@@ -0,0 +1,162 @@
+import { defineStore } from 'pinia';
+import {
+  type MixTapeResponse,
+  type CenturionResponse,
+  type HttpApiException,
+  getCenturion,
+  getCenturionTapes,
+  enableCenturion,
+  disableCenturion,
+  startCenturion,
+  stopCenturion,
+  skipCenturion,
+} from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+/**
+ * Centurion store
+ * @param currentTape - The current loaded centurion tape
+ * @param tapes - The available centurion tapes
+ * @param loading - Whether the centurion is loading
+ * @param playing - Whether the centurion is playing
+ * @param skipping - Whether the centurion is skipping
+ */
+interface CenturionStore {
+  currentTape: CenturionResponse | null;
+  loading: boolean;
+  tapes: MixTapeResponse[] | null;
+  playing: boolean;
+  skipping: boolean;
+}
+
+export const useCenturionStore = defineStore('centurion', {
+  state: (): CenturionStore => ({
+    currentTape: null,
+    tapes: null,
+    loading: true,
+    playing: false,
+    skipping: false,
+  }),
+  getters: {
+    enabled(): boolean {
+      return this.currentTape != null && !this.loading;
+    },
+    disabled(): boolean {
+      return this.currentTape == null && !this.loading;
+    },
+    getCurrentTape: (state) => state.currentTape,
+    getTapes: (state) => state.tapes,
+    isLoading: (state) => state.loading,
+    isPlaying: (state) => state.playing,
+    isSkipping: (state) => state.skipping,
+  },
+  actions: {
+    /**
+     * Get the current centurion tape
+     * @param handleLoading - whether to enable and disable loading
+     */
+    async getCurrentCenturion(handleLoading = true) {
+      if (handleLoading) this.loading = true;
+      await getCenturion()
+        .then((tape) => (this.currentTape = tape.data!))
+        .catch((e: HttpApiException | string) => {
+          if ((typeof e !== 'string' && e.statusCode === 404) || e === 'Centurion not enabled') {
+            this.currentTape = null;
+          }
+        });
+      if (handleLoading) this.loading = false;
+    },
+    /**
+     * Initialize the store
+     */
+    async init() {
+      await getCenturionTapes().then((tapes) => (this.tapes = tapes.data!));
+
+      await this.getCurrentCenturion(false);
+      this.loading = false;
+      this.playing = this.currentTape?.playing ?? false;
+
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.on(
+        'mode_centurion_update',
+        this.getCurrentCenturion.bind(this),
+      );
+    },
+    /**
+     * Destroy the store
+     */
+    destroy() {
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.removeListener(
+        'mode_centurion_update',
+        this.getCurrentCenturion.bind(this),
+      );
+    },
+    /**
+     * Initialize the centurion
+     * @param tapeName - The name of the centurion tape
+     * @param tapeArtist
+     * @param audioIds - The audio ids to use
+     * @param screenIds - The screen ids to use
+     * @param lightsGroupIds - The lights group ids to use
+     */
+    async initializeCenturion(
+      tapeName: string,
+      tapeArtist: string,
+      audioIds: number[],
+      screenIds: number[],
+      lightsGroupIds: number[],
+    ) {
+      this.loading = true;
+
+      await enableCenturion({
+        body: {
+          centurionName: tapeName,
+          centurionArtist: tapeArtist,
+          audioIds: audioIds,
+          screenIds: screenIds,
+          lightsGroupIds: lightsGroupIds,
+        },
+      });
+      await this.getCurrentCenturion(false);
+      this.loading = false;
+      this.playing = false;
+    },
+    /**
+     * Quit the centurion
+     */
+    async quitCenturion() {
+      this.loading = true;
+      await disableCenturion();
+      this.currentTape = null;
+      this.loading = false;
+    },
+    /**
+     * Start the centurion
+     */
+    async startCenturion() {
+      await startCenturion();
+      this.playing = true;
+    },
+    /**
+     * Pause the centurion
+     */
+    async pauseCenturion() {
+      await stopCenturion();
+      this.playing = false;
+    },
+    /**
+     * Skip the centurion
+     * @param seconds - The number of seconds to skip
+     */
+    async skipCenturion(seconds: number) {
+      this.skipping = true;
+      await skipCenturion({
+        body: {
+          seconds: seconds,
+        },
+      });
+      this.skipping = false;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/modes/time-trail-race.store.ts b/apps/aurora-backoffice/src/stores/modes/time-trail-race.store.ts
new file mode 100644
index 00000000..be3a9006
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/modes/time-trail-race.store.ts
@@ -0,0 +1,266 @@
+import { defineStore } from 'pinia';
+import {
+  disableTimeTrailRacing,
+  enableTimeTrailRace,
+  getRaceState,
+  type PlayerParams,
+  raceFinish,
+  type RaceFinishedEvent,
+  type RacePlayerReadyEvent,
+  type RacePlayerRegisteredEvent,
+  raceReady,
+  raceRegisterPlayer,
+  raceResetPlayer,
+  raceRevealScore,
+  type RaceScoreboardEvent,
+  raceStart,
+  type RaceStartedEvent,
+  type RegisterPlayerParams,
+  type ScoreboardItem,
+  TimeTrailRaceState,
+} from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+/**
+ * Time trail store
+ * @param sessionName - The name of the session
+ * @param state - The current state of the session
+ * @param scoreboard - The scoreboard associated with  the session
+ * @param currentPlayer - The current active player
+ * @param loading - Whether the store is loading
+ * @param startTime - The start time of the session
+ */
+interface TimeTrailRaceStore {
+  sessionName?: string;
+  state?: TimeTrailRaceState;
+  scoreboard: ScoreboardItem[];
+  currentPlayer?: PlayerParams | ScoreboardItem;
+  loading: boolean;
+  startTime?: Date;
+}
+
+export const useTimeTrailRaceStore = defineStore('time-trail-race', {
+  state: (): TimeTrailRaceStore => ({
+    scoreboard: [],
+    loading: true,
+  }),
+  getters: {
+    enabled(): boolean {
+      return this.sessionName != null && this.state != null && !this.loading;
+    },
+    disabled(): boolean {
+      return (this.sessionName == null || this.state == null) && !this.loading;
+    },
+    getSessionName: (state) => state.sessionName,
+    getState: (state) => state.state,
+    getScoreboard: (state) => state.scoreboard,
+    getCurrentPlayer: (state) => state.currentPlayer,
+    getLoading: (state) => state.loading,
+    getStartTime: (state) => state.startTime,
+  },
+  actions: {
+    /**
+     * Get data of current initialized session
+     */
+    async getTimeTrailMode() {
+      this.loading = true;
+      try {
+        const res = await getRaceState();
+        this.state = res.data!.state;
+        this.sessionName = res.data!.sessionName;
+        this.scoreboard = res.data!.scoreboard;
+      } catch {
+        this.state = undefined;
+        this.sessionName = undefined;
+        this.scoreboard = [];
+      }
+      this.loading = false;
+    },
+    /**
+     * Initialize a new time trail race session
+     * @param sessionName - The name of the session
+     * @param audioIds - The audio ids to use
+     * @param screenIds - The screen ids to use
+     * @param lightsGroupIds - The lights group ids to use
+     */
+    async initializeTimeTrailMode(
+      sessionName: string,
+      audioIds: number[],
+      screenIds: number[],
+      lightsGroupIds: number[],
+    ) {
+      this.loading = true;
+
+      await enableTimeTrailRace({
+        body: {
+          lightsGroupIds: lightsGroupIds,
+          screenIds: screenIds,
+          audioIds: audioIds,
+          sessionName: sessionName,
+        },
+      }).then(() => {
+        this.sessionName = sessionName;
+        this.state = TimeTrailRaceState.INITIALIZED;
+      });
+
+      this.loading = false;
+    },
+    /**
+     * Register a player for the current session
+     * @param params - The player parameters
+     */
+    async registerPlayer(params: RegisterPlayerParams) {
+      this.loading = true;
+      const register = await raceRegisterPlayer({
+        body: params,
+      });
+      this.handleRegisterPlayer(register.data!);
+      this.loading = false;
+    },
+    /**
+     * Handle a player being registered and update the store
+     * @param event - The event data
+     */
+    handleRegisterPlayer(event: RacePlayerRegisteredEvent) {
+      this.currentPlayer = event.player;
+      this.scoreboard = event.scoreboard;
+      this.state = event.state as unknown as TimeTrailRaceState;
+      this.sessionName = event.sessionName;
+    },
+    /**
+     * Mark the current player as ready
+     */
+    async ready() {
+      this.loading = true;
+      const ready = await raceReady();
+      this.handleReady(ready.data!);
+      this.loading = false;
+    },
+    /**
+     * Handle a player being marked as ready and update the store
+     * @param event - The event data
+     */
+    handleReady(event: RacePlayerReadyEvent) {
+      this.currentPlayer = event.player;
+      this.state = event.state as unknown as TimeTrailRaceState;
+      this.sessionName = event.sessionName;
+    },
+    /**
+     * Start the current session
+     */
+    async start() {
+      this.loading = true;
+      const start = await raceStart();
+      this.handleStart(start.data!);
+      this.loading = false;
+    },
+    /**
+     * Handle a session being started and update the store
+     * @param event - The event data
+     */
+    handleStart(event: RaceStartedEvent) {
+      this.currentPlayer = event.player;
+      this.state = event.state as unknown as TimeTrailRaceState;
+      this.sessionName = event.sessionName;
+      this.startTime = new Date(event.startTime);
+    },
+    /**
+     * Finish the current session
+     */
+    async finish() {
+      this.loading = true;
+      const finish = await raceFinish();
+      this.handleFinish(finish.data!);
+      this.loading = false;
+    },
+    /**
+     * Handle a session being finished and update the store
+     * @param event - The event data
+     */
+    handleFinish(event: RaceFinishedEvent) {
+      this.currentPlayer = event.player;
+      this.state = event.state as unknown as TimeTrailRaceState;
+      this.sessionName = event.sessionName;
+      this.scoreboard = event.scoreboard;
+    },
+    /**
+     * Reveal the current session's score
+     */
+    async revealScore() {
+      this.loading = true;
+      const score = await raceRevealScore();
+      this.handleRevealScore(score.data!);
+      this.loading = false;
+    },
+    /**
+     * Handle a session's score being revealed and update the store
+     * @param event - The event data
+     */
+    handleRevealScore(event: RaceScoreboardEvent) {
+      this.currentPlayer = event.player;
+      this.state = event.state as unknown as TimeTrailRaceState;
+      this.sessionName = event.sessionName;
+      this.scoreboard = event.scoreboard;
+      this.startTime = undefined;
+    },
+    /**
+     * Reset the current player - in case something went wrong
+     */
+    async resetPlayer() {
+      this.loading = true;
+      const reset = await raceResetPlayer();
+      this.handleRevealScore(reset.data!);
+      this.loading = false;
+    },
+    async init() {
+      await this.getTimeTrailMode();
+
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.on(
+        'race-player-registered',
+        this.handleRegisterPlayer.bind(this),
+      );
+      socketStore.backofficeSocket?.on('race-player-ready', this.handleReady.bind(this));
+      socketStore.backofficeSocket?.on('race-player-start', this.handleStart.bind(this));
+      socketStore.backofficeSocket?.on('race-player-finish', this.handleFinish.bind(this));
+      socketStore.backofficeSocket?.on('race-scoreboard', this.handleRevealScore.bind(this));
+    },
+    /**
+     * Quit the current session
+     */
+    async quit() {
+      this.loading = true;
+      await disableTimeTrailRacing();
+      this.state = undefined;
+      this.sessionName = undefined;
+      this.scoreboard = [];
+      this.loading = false;
+    },
+    /**
+     * Destroy the store - unsubscribe from socket events
+     */
+    destroy() {
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.removeListener(
+        'race-player-registered',
+        this.handleRegisterPlayer.bind(this),
+      );
+      socketStore.backofficeSocket?.removeListener(
+        'race-player-ready',
+        this.handleReady.bind(this),
+      );
+      socketStore.backofficeSocket?.removeListener(
+        'race-player-start',
+        this.handleStart.bind(this),
+      );
+      socketStore.backofficeSocket?.removeListener(
+        'race-player-finish',
+        this.handleFinish.bind(this),
+      );
+      socketStore.backofficeSocket?.removeListener(
+        'race-scoreboard',
+        this.handleRevealScore.bind(this),
+      );
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/poster/poster.store.ts b/apps/aurora-backoffice/src/stores/poster/poster.store.ts
new file mode 100644
index 00000000..35986d64
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/poster/poster.store.ts
@@ -0,0 +1,255 @@
+import { defineStore } from 'pinia';
+import {
+  attachMedia,
+  createPoster,
+  deletePoster,
+  type ExternalPosterRequest,
+  forceUpdatePosters,
+  getAllPosters,
+  getCarouselOrder,
+  getPosterBorrelMode,
+  getStaticPosterHandlerState,
+  hideStaticPoster,
+  type PosterResponse,
+  type MediaPosterRequest,
+  type PhotoPosterRequest,
+  PosterType,
+  setCarouselOrder,
+  setPosterBorrelMode,
+  setStaticPosterClock,
+  showStaticPoster,
+  togglePosterEnable,
+  updatePoster,
+  type UpdatePosterRequest,
+} from '@gewis/aurora-api-client';
+
+interface PosterStore {
+  posters: PosterResponse[];
+  loading: boolean;
+  initialized: boolean;
+  static: {
+    activePosterId: number | null;
+    clockVisible: boolean;
+  };
+  carousel: {
+    borrelModePresent: boolean;
+    borrelModeActive: boolean;
+    carouselOrder: number[];
+  };
+}
+
+export const usePosterStore = defineStore('poster', {
+  state: (): PosterStore => ({
+    posters: [],
+    loading: true,
+    initialized: false,
+    static: {
+      activePosterId: null,
+      clockVisible: true,
+    },
+    carousel: {
+      borrelModePresent: false,
+      borrelModeActive: false,
+      carouselOrder: [],
+    },
+  }),
+  getters: {
+    staticPosters: (state) => state.posters.filter((p) => p.type !== PosterType.PHOTO),
+  },
+  actions: {
+    /**
+     * Initialize the store
+     */
+    async init() {
+      if (this.initialized) return;
+
+      this.loading = true;
+      await Promise.all([
+        this.fetchPosters(false),
+        this.fetchCarouselOrder(),
+        this.fetchStaticPosterState(),
+        this.fetchBorrelMode(),
+      ]);
+      this.loading = false;
+
+      this.initialized = true;
+    },
+    /**
+     * Load all posters from the server.
+     * @param updateLoading
+     */
+    async fetchPosters(updateLoading = true) {
+      if (updateLoading) this.loading = true;
+      const res = await getAllPosters();
+      if (res.response.ok && res.data) {
+        this.posters = res.data;
+      }
+      if (updateLoading) this.loading = false;
+    },
+    /**
+     * Reload the posters, also forces refresh on the screens.
+     */
+    async reloadPosters() {
+      await forceUpdatePosters();
+    },
+    /**
+     * Load the saved carousel poster order from the server.
+     */
+    async fetchCarouselOrder() {
+      const res = await getCarouselOrder();
+      if (res.response.ok && res.data) {
+        this.carousel.carouselOrder = res.data;
+      }
+    },
+    /**
+     * Store a new carousel poster order.
+     * @param orderedIds The poster ids in the desired display order.
+     */
+    async setPosterOrder(orderedIds: number[]) {
+      const res = await setCarouselOrder({ body: { posterIds: orderedIds } });
+      if (res.response.ok) {
+        this.carousel.carouselOrder = orderedIds;
+      }
+    },
+    /**
+     * Create a new poster not based on a file.
+     * @param params
+     */
+    async createPoster(params: ExternalPosterRequest | PhotoPosterRequest) {
+      const res = await createPoster({ body: params });
+      if (res.response.ok && res.data) {
+        this.posters.push(res.data);
+      }
+    },
+    /**
+     * Create a new file poster and attach the given files to it. Each file is
+     * appended in turn, so an image poster can carry multiple images.
+     * @param params
+     * @param files
+     */
+    async createPosterMedia(params: MediaPosterRequest, files: Blob[]) {
+      const res = await createPoster({ body: params });
+      if (!res.response.ok || !res.data) return;
+
+      this.posters.push(res.data);
+      const id = res.data.id;
+
+      let updated: PosterResponse | undefined;
+      for (const file of files) {
+        const attachRes = await attachMedia({ path: { id }, body: { file } });
+        if (attachRes.response.ok && attachRes.data) {
+          updated = attachRes.data;
+        } else {
+          await this.deletePoster(id);
+          //TODO; this should report back that the creation failed.
+          return;
+        }
+      }
+
+      if (updated) {
+        const index = this.posters.findIndex((p) => p.id === id);
+        this.posters.splice(index, 1, updated);
+      }
+    },
+    /**
+     * Delete poster with id on the server and locally.
+     * @param id
+     */
+    async deletePoster(id: number) {
+      const res = await deletePoster({ path: { id } });
+      if (res.response.ok) {
+        const index = this.posters.findIndex((p) => p.id === id);
+        this.posters.splice(index, 1);
+      }
+    },
+    /**
+     * Update given poster with the new params on the server and store the new version locally.
+     * @param id
+     * @param params
+     */
+    async updatePoster(id: number, params: UpdatePosterRequest) {
+      const res = await updatePoster({
+        path: { id },
+        body: params,
+      });
+      if (res.response.ok && res.data) {
+        const index = this.posters.findIndex((p) => p.id === res.data.id);
+        this.posters.splice(index, 1, res.data);
+      }
+    },
+    /**
+     * Fetch the current activePosterId and clock state for the static poster handler.
+     */
+    async fetchStaticPosterState() {
+      const res = await getStaticPosterHandlerState();
+      if (res.response.ok && res.data) {
+        this.static.activePosterId = res.data.activePoster?.id ?? null;
+        this.static.clockVisible = res.data.clockVisible;
+      }
+    },
+    /**
+     * Set active static poster to the poster with given id.
+     * @param id
+     */
+    async setStaticActivePoster(id: number) {
+      const res = await showStaticPoster({ path: { id } });
+      if (res.response.ok) {
+        this.static.activePosterId = id;
+      }
+    },
+    /**
+     * Set active static poster to null.
+     */
+    async clearStaticActivePoster() {
+      const res = await hideStaticPoster();
+      if (res.response.ok) {
+        this.static.activePosterId = null;
+      }
+    },
+    /**
+     * Toggle the clock visibility.
+     * @param visible
+     */
+    async setStaticClockVisibility(visible: boolean) {
+      const res = await setStaticPosterClock({ body: { visible } });
+      if (res.response.ok) {
+        this.static.clockVisible = visible;
+      }
+    },
+    /**
+     * Fetch status of borrel mode.
+     */
+    async fetchBorrelMode() {
+      const res = await getPosterBorrelMode();
+      if (res.response.ok && res.data) {
+        this.carousel.borrelModePresent = res.data.present;
+        this.carousel.borrelModeActive = res.data.enabled;
+      }
+    },
+    /**
+     * Toggle borrel mode.
+     * @param enabled
+     */
+    async setBorrelMode(enabled: boolean) {
+      const res = await setPosterBorrelMode({ body: { enabled } });
+      if (res.response.ok) {
+        this.carousel.borrelModeActive = enabled;
+      }
+    },
+    /**
+     * Set the given posters enabledField.
+     * @param id The id of the poster.
+     * @param enabled Whether the poster should be disabled or enabled.
+     */
+    async togglePoster(id: number, enabled: boolean) {
+      const res = await togglePosterEnable({
+        path: { id },
+        body: { enabled },
+      });
+      if (res.response.ok && res.data) {
+        const index = this.posters.findIndex((p) => p.id === res.data.id);
+        this.posters.splice(index, 1, res.data);
+      }
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/scene-controller.store.ts b/apps/aurora-backoffice/src/stores/scene-controller.store.ts
new file mode 100644
index 00000000..88937d06
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/scene-controller.store.ts
@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia';
+import {
+  type CreateSceneParams,
+  type LightsSceneResponse,
+  getAllScenes,
+  createScene,
+  deleteScene,
+  applyScene,
+  clearScene,
+} from '@gewis/aurora-api-client';
+
+interface SceneControllerStore {
+  scenes: LightsSceneResponse[];
+  favoriteScenes: LightsSceneResponse[];
+  loading: boolean;
+}
+
+export const useSceneControllerStore = defineStore('scene-controller', {
+  state: (): SceneControllerStore => ({
+    scenes: [],
+    favoriteScenes: [],
+    loading: true,
+  }),
+  getters: {},
+  actions: {
+    async init() {
+      const scenes = await getAllScenes({
+        query: { favorite: true },
+      });
+      this.favoriteScenes = scenes.data!;
+      this.loading = false;
+    },
+    async fetchScenes() {
+      const scenes = await getAllScenes();
+      this.scenes = scenes.data!;
+      this.favoriteScenes = scenes.data!.filter((s) => s.favorite);
+    },
+    async initPage() {
+      this.loading = true;
+      await this.fetchScenes();
+      this.loading = false;
+    },
+    async createScene(body: CreateSceneParams) {
+      this.loading = true;
+      await createScene({
+        body: body,
+      });
+      await this.fetchScenes();
+      this.loading = false;
+    },
+    async deleteScene(id: number) {
+      this.loading = true;
+      await deleteScene({
+        path: { id },
+      });
+      await this.fetchScenes();
+      this.loading = false;
+    },
+    async applyScene(id: number) {
+      this.loading = true;
+      await applyScene({
+        path: { id },
+      });
+      this.loading = false;
+    },
+    async clearScene() {
+      this.loading = true;
+      await clearScene();
+      this.loading = false;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/server-settings.store.ts b/apps/aurora-backoffice/src/stores/server-settings.store.ts
new file mode 100644
index 00000000..3f94efc5
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/server-settings.store.ts
@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia';
+import {
+  clearSettingsFile,
+  type FeatureFlagResponse,
+  type ISettings,
+  setSetting,
+  setSettingFile,
+} from '@gewis/aurora-api-client';
+import { getFeatureFlags, getSettings } from '@gewis/aurora-api-client';
+
+interface ServerSettingsStore {
+  serverSettings?: ISettings;
+  featureFlags: FeatureFlagResponse;
+  loading: boolean;
+}
+
+export const useServerSettingsStore = defineStore('server-settings', {
+  state: (): ServerSettingsStore => ({
+    serverSettings: undefined,
+    featureFlags: [],
+    loading: true,
+  }),
+  getters: {
+    amountOfPosterScreenHandlers: (state) => {
+      return state.featureFlags.filter((f) => f.key.includes('PosterScreenHandler') && f.value)
+        .length;
+    },
+  },
+  actions: {
+    async initFeatureFlags(): Promise<void> {
+      const res = await getFeatureFlags();
+      if (res && res.data) this.featureFlags = res.data;
+      this.loading = false;
+    },
+    async initSettings(): Promise<void> {
+      this.loading = true;
+      const res = await getSettings();
+      if (res && res.data) this.serverSettings = res.data;
+      this.loading = false;
+    },
+    isFeatureFlag(setting: keyof ISettings): boolean {
+      return this.featureFlags.some((f) => f.key === setting);
+    },
+    featureEnabled(setting: keyof ISettings): boolean {
+      const match = this.featureFlags.find((f) => f.key === setting);
+      if (!match) return true;
+      return match.value;
+    },
+    async setSetting(setting: keyof ISettings, value: ISettings[keyof ISettings]): Promise<void> {
+      if (!this.serverSettings) return;
+
+      this.loading = true;
+      await setSetting({ body: { key: setting, value } });
+      this.serverSettings[setting] = value as never;
+      this.loading = false;
+    },
+    async setSettingFile(setting: keyof ISettings, file: Blob): Promise<void> {
+      if (!this.serverSettings) return;
+
+      this.loading = true;
+      const res = await setSettingFile({ body: { key: setting, file } });
+      if (res.response.ok && res.data) {
+        this.serverSettings[setting] = res.data.value as never;
+      }
+      this.loading = false;
+    },
+    async clearSettingFile(setting: keyof ISettings): Promise<void> {
+      if (!this.serverSettings) return;
+
+      this.loading = true;
+      const res = await clearSettingsFile({ body: { key: setting } });
+      if (res.response.ok && res.data) {
+        this.serverSettings[setting] = res.data.value as never;
+      }
+      this.loading = false;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/socket.store.ts b/apps/aurora-backoffice/src/stores/socket.store.ts
new file mode 100644
index 00000000..7989e3c9
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/socket.store.ts
@@ -0,0 +1,57 @@
+import { io, Socket } from 'socket.io-client';
+import { defineStore } from 'pinia';
+
+interface SocketStore {
+  rootSocket?: Socket;
+  backofficeSocket?: Socket;
+  backofficeBeatSocket?: Socket;
+}
+
+export const useSocketStore = defineStore('socket', {
+  state: (): SocketStore => ({
+    rootSocket: undefined,
+    backofficeSocket: undefined,
+  }),
+  getters: {},
+  actions: {
+    async connect() {
+      const rootSocket = io('/', { path: '/socket.io/' });
+      const backofficeSocket = io('/backoffice', { path: '/socket.io/' });
+
+      const promise1 = new Promise<void>((resolve) => {
+        rootSocket.on('connect', () => {
+          console.info('SocketIO: connected to /');
+          this.rootSocket = rootSocket;
+          resolve();
+        });
+      });
+      const promise2 = new Promise<void>((resolve) => {
+        backofficeSocket.on('connect', () => {
+          console.info('SocketIO: connected to /backoffice');
+          this.backofficeSocket = backofficeSocket;
+          resolve();
+        });
+      });
+      return Promise.all([promise1, promise2]);
+    },
+    async connectBeat() {
+      const beatSocket = io('/backoffice-beat', { path: '/socket.io/' });
+      return new Promise<void>((resolve) => {
+        beatSocket.on('connect', () => {
+          console.info('SocketIO: connected to /backoffice-beat');
+          this.backofficeBeatSocket = beatSocket;
+          resolve();
+        });
+      });
+    },
+    disconnectBeat() {
+      if (!this.backofficeBeatSocket) {
+        console.error('SocketIO: Already disconnected from /backoffice-beat!');
+        return;
+      }
+      this.backofficeBeatSocket.removeAllListeners();
+      this.backofficeBeatSocket.disconnect();
+      this.backofficeBeatSocket = undefined;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/socket/currently-playing.store.ts b/apps/aurora-backoffice/src/stores/socket/currently-playing.store.ts
new file mode 100644
index 00000000..8caee815
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/socket/currently-playing.store.ts
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia';
+import { getSpotifyCurrentlyPlaying, type TrackChangeEvent } from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+interface CurrentlyPlayingStore {
+  currentlyPlaying: TrackChangeEvent | null;
+  initialized: boolean;
+}
+
+export const useCurrentlyPlayingStore = defineStore('currently-playing', {
+  state: (): CurrentlyPlayingStore => ({
+    currentlyPlaying: null,
+    initialized: false,
+  }),
+  getters: {},
+  actions: {
+    handleChangeTrack(events?: TrackChangeEvent[]) {
+      if (!events || events.length === 0) return;
+      this.currentlyPlaying = events[0];
+    },
+    async init() {
+      if (this.initialized) return;
+
+      const store = useSocketStore();
+      if (!store.backofficeSocket) return;
+
+      store.backofficeSocket.on('change_track', this.handleChangeTrack.bind(this));
+
+      const event = await getSpotifyCurrentlyPlaying();
+      this.handleChangeTrack(event.data);
+    },
+    destroy() {
+      const store = useSocketStore();
+      if (!store.backofficeSocket) return;
+
+      store.backofficeSocket.removeListener('beat', this.handleChangeTrack.bind(this));
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/socket/music-beat.store.ts b/apps/aurora-backoffice/src/stores/socket/music-beat.store.ts
new file mode 100644
index 00000000..5078e887
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/socket/music-beat.store.ts
@@ -0,0 +1,143 @@
+import { defineStore } from 'pinia';
+import { type BeatGeneratorResponse, getAllBeatGenerators } from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+export interface GeneratorBeatEvent {
+  id: string;
+  name: string;
+}
+
+export interface BeatGeneratorInStore extends BeatGeneratorResponse {
+  beat: boolean;
+}
+
+interface MusicBeatStore {
+  beat: boolean;
+  initializedBeat: boolean;
+  generators: BeatGeneratorInStore[];
+  initializedGenerators: boolean;
+}
+
+export const useMusicBeatStore = defineStore('music-beat', {
+  state: (): MusicBeatStore => ({
+    beat: false,
+    initializedBeat: false,
+    generators: [],
+    initializedGenerators: false,
+  }),
+  getters: {},
+  actions: {
+    handlePrecedenceBeat() {
+      this.beat = !this.beat;
+    },
+    handleGeneratorBeat(event: GeneratorBeatEvent) {
+      const index = this.generators.findIndex((g) => g.id === event.id);
+      if (index >= 0) {
+        this.generators[index].beat = !this.generators[index].beat;
+      }
+    },
+    handleGeneratorAdd(event: BeatGeneratorResponse) {
+      if (event.hasPrecedence) {
+        for (const g of this.generators) {
+          g.hasPrecedence = false;
+        }
+      }
+      this.generators.push({
+        id: event.id,
+        name: event.name,
+        hasPrecedence: event.hasPrecedence,
+        beat: false,
+      });
+    },
+    handleGeneratorRemove(event: BeatGeneratorResponse) {
+      const index = this.generators.findIndex((g) => g.id === event.id);
+      if (index >= 0) {
+        const hasPrecedence = this.generators[index].hasPrecedence;
+        this.generators.splice(index, 1);
+        // If this generator had precedence, we need to find which beat generator
+        // is now determining the global beats.
+        if (hasPrecedence) {
+          void this.getAllBeatGenerators();
+        }
+      }
+    },
+    initBeat() {
+      if (this.initializedBeat) return;
+
+      const store = useSocketStore();
+      if (!store.backofficeSocket) return;
+
+      store.backofficeSocket.on('beat', this.handlePrecedenceBeat.bind(this));
+      this.initializedBeat = true;
+    },
+    destroyBeat() {
+      const store = useSocketStore();
+      if (!store.backofficeSocket) return;
+
+      store.backofficeSocket.removeListener('beat', this.handlePrecedenceBeat.bind(this));
+      this.initializedBeat = false;
+    },
+    async getAllBeatGenerators() {
+      const res = await getAllBeatGenerators();
+
+      // If there are already generators present, synchronize the list in memory
+      // with the fresh list. We do this to preserve the beat state (and not reset it).
+      if (res.response.ok && res.data && this.generators.length > 0) {
+        let notSeenGenerators: BeatGeneratorResponse[] = [...this.generators];
+        res.data.forEach((generator: BeatGeneratorResponse) => {
+          const index = this.generators.findIndex((g) => g.id === generator.id);
+          if (index >= 0) {
+            this.generators[index].id = generator.id;
+            this.generators[index].name = generator.name;
+            this.generators[index].hasPrecedence = generator.hasPrecedence;
+
+            // Remove this generator from the list of all not-seen generators
+            notSeenGenerators = notSeenGenerators.filter((g) => g.id !== generator.id);
+          } else {
+            this.handleGeneratorAdd(generator);
+          }
+        });
+
+        notSeenGenerators.forEach((g) => {
+          this.handleGeneratorRemove(g);
+        });
+      } else if (res.response.ok && res.data) {
+        this.generators = res.data.map((g) => ({
+          id: g.id,
+          name: g.name,
+          hasPrecedence: g.hasPrecedence,
+          beat: false,
+        }));
+      }
+    },
+    async initBeatGenerators() {
+      const store = useSocketStore();
+      await store.connectBeat();
+      await this.getAllBeatGenerators();
+
+      if (!store.backofficeBeatSocket) return;
+
+      store.backofficeBeatSocket.on('beat', this.handleGeneratorBeat.bind(this));
+      store.backofficeBeatSocket.on('generator_add', this.handleGeneratorAdd.bind(this));
+      store.backofficeBeatSocket.on('generator_remove', this.handleGeneratorRemove.bind(this));
+      this.initializedGenerators = true;
+    },
+    destroyBeatGenerators() {
+      const store = useSocketStore();
+      if (!store.backofficeBeatSocket) return;
+
+      store.backofficeBeatSocket.removeListener('beat', this.handleGeneratorBeat.bind(this));
+      store.backofficeBeatSocket.removeListener(
+        'generator_add',
+        this.handleGeneratorAdd.bind(this),
+      );
+      store.backofficeBeatSocket.removeListener(
+        'generator_remove',
+        this.handleGeneratorRemove.bind(this),
+      );
+      this.initializedGenerators = false;
+
+      store.disconnectBeat();
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/spotify.store.ts b/apps/aurora-backoffice/src/stores/spotify.store.ts
new file mode 100644
index 00000000..9b620765
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/spotify.store.ts
@@ -0,0 +1,82 @@
+import { defineStore } from 'pinia';
+import {
+  deleteSpotifyUser,
+  getAllSpotifyUsers,
+  getSpotifyProfile,
+  spotifyLoginCallback,
+  type SpotifyUserProfile,
+  type SpotifyUserResponse,
+  switchToSpotifyUser,
+} from '@gewis/aurora-api-client';
+
+interface SpotifyStore {
+  loading: boolean;
+  spotifyUsers: SpotifyUserResponse[];
+  currentSpotifyProfile: SpotifyUserProfile | undefined;
+}
+
+export const useSpotifyStore = defineStore('spotify', {
+  state: (): SpotifyStore => ({
+    loading: true,
+    spotifyUsers: [],
+    currentSpotifyProfile: undefined,
+  }),
+  actions: {
+    async init() {
+      const res = await getAllSpotifyUsers();
+      if (res.response.ok && res.data) {
+        this.spotifyUsers = res.data;
+      }
+      await this.fetchCurrentSpotifyProfile();
+      this.loading = false;
+    },
+    async fetchCurrentSpotifyProfile() {
+      const res = await getSpotifyProfile();
+      if (res.response.ok && res.data) {
+        this.currentSpotifyProfile = res.data;
+      }
+    },
+    async deleteSpotifyUser(id: number) {
+      const res = await deleteSpotifyUser({ path: { id } });
+      if (res.response.ok) {
+        const index = this.spotifyUsers.findIndex((u) => u.id === id);
+        if (index >= 0) {
+          this.spotifyUsers.splice(index, 1);
+        }
+      }
+    },
+    async loginCallback(state: string, code?: string, error?: string) {
+      const res = await spotifyLoginCallback({ query: { state, code, error } });
+      if (!res.response.ok) {
+        return {
+          success: false,
+          error: res.error,
+        };
+      } else {
+        this.currentSpotifyProfile = res.data;
+        return {
+          success: true,
+          error: '',
+        };
+      }
+    },
+    async makeUserActive(spotifyUser: SpotifyUserResponse) {
+      if (spotifyUser.spotifyId === this.currentSpotifyProfile?.id) {
+        // User already active
+        return;
+      }
+
+      const res = await switchToSpotifyUser({ path: { id: spotifyUser.id } });
+      if (res.response.ok) {
+        this.spotifyUsers.forEach((u) => {
+          u.active = false;
+        });
+        const index = this.spotifyUsers.findIndex((u) => u.id === spotifyUser.id);
+        if (index >= 0) {
+          this.spotifyUsers[index].active = true;
+        }
+        await this.fetchCurrentSpotifyProfile();
+      }
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/status.store.ts b/apps/aurora-backoffice/src/stores/status.store.ts
new file mode 100644
index 00000000..5c81ea4b
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/status.store.ts
@@ -0,0 +1,43 @@
+import { defineStore } from 'pinia';
+
+import { useSocketStore } from '@/stores/socket.store';
+
+export interface Status {
+  uptimeSeconds: number;
+  coreTimestamp: number;
+  systemTimestamp: number;
+  latencyMilliseconds: number;
+}
+
+interface StatusStore {
+  audioStatus: Map<number, Status>;
+  screenStatus: Map<number, Status>;
+  lightControllerStatus: Map<number, Status>;
+}
+
+export const useStatusStore = defineStore('status', {
+  state: (): StatusStore => ({
+    audioStatus: new Map(),
+    screenStatus: new Map(),
+    lightControllerStatus: new Map(),
+  }),
+  getters: {},
+  actions: {
+    init() {
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.on('status:updated', (payload) => {
+        switch (payload.type) {
+          case 'audio':
+            this.audioStatus.set(payload.id, payload.status);
+            break;
+          case 'screen':
+            this.screenStatus.set(payload.id, payload.status);
+            break;
+          case 'lights_controller':
+            this.lightControllerStatus.set(payload.id, payload.status);
+            break;
+        }
+      });
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/subscriber.store.ts b/apps/aurora-backoffice/src/stores/subscriber.store.ts
new file mode 100644
index 00000000..8a3a580b
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/subscriber.store.ts
@@ -0,0 +1,60 @@
+import { defineStore } from 'pinia';
+
+import {
+  type AudioResponse,
+  getAudios,
+  getLightsGroups,
+  getScreens,
+  getSingleLightsGroup,
+  type LightsGroupResponse,
+  type ScreenResponse,
+} from '@gewis/aurora-api-client';
+import { useSocketStore } from '@/stores/socket.store';
+
+interface SubscriberStore {
+  audios: AudioResponse[];
+  screens: ScreenResponse[];
+  lightsGroups: LightsGroupResponse[];
+}
+
+export const useSubscriberStore = defineStore('subscribers', {
+  state: (): SubscriberStore => ({
+    audios: [],
+    screens: [],
+    lightsGroups: [],
+  }),
+  getters: {},
+  actions: {
+    async getAudios() {
+      await getAudios().then((audios) => (this.audios = audios.data!));
+    },
+    async getScreens() {
+      await getScreens().then((screens) => (this.screens = screens.data!));
+    },
+    async getLightGroups() {
+      await getLightsGroups().then((lightsGroups) => (this.lightsGroups = lightsGroups.data!));
+    },
+    async updateLightsGroupInStore(id: number) {
+      const res = await getSingleLightsGroup({ path: { id } });
+      if (!res.response.ok || !res.data) {
+        return;
+      }
+
+      const updatedLightsGroup = res.data;
+      const index = this.lightsGroups.findIndex((g) => g.id === updatedLightsGroup.id);
+      if (index >= 0) {
+        this.lightsGroups.splice(index, 1, updatedLightsGroup);
+      } else {
+        this.lightsGroups.push(updatedLightsGroup);
+      }
+    },
+    async init(): Promise<void> {
+      await Promise.all([this.getAudios(), this.getScreens(), this.getLightGroups()]);
+
+      const socketStore = useSocketStore();
+      socketStore.backofficeSocket?.on('connect_audio', this.getAudios.bind(this));
+      socketStore.backofficeSocket?.on('connect_screen', this.getScreens.bind(this));
+      socketStore.backofficeSocket?.on('connect_lightsgroup', this.getLightGroups.bind(this));
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/stores/timed-events.store.ts b/apps/aurora-backoffice/src/stores/timed-events.store.ts
new file mode 100644
index 00000000..49e4054c
--- /dev/null
+++ b/apps/aurora-backoffice/src/stores/timed-events.store.ts
@@ -0,0 +1,60 @@
+import { defineStore } from 'pinia';
+import {
+  createTimedEvent,
+  type CreateTimedEventRequest,
+  deleteTimedEvent,
+  getAllTimedEvents,
+  type TimedEventResponse,
+  updateTimedEvent,
+  type UpdateTimedEventRequest,
+} from '@gewis/aurora-api-client';
+
+interface TimedEventsStore {
+  timedEvents: TimedEventResponse[];
+  loading: boolean;
+}
+
+export const useTimedEventsStore = defineStore('timed-events', {
+  state: (): TimedEventsStore => ({
+    timedEvents: [],
+    loading: true,
+  }),
+  actions: {
+    async init(): Promise<void> {
+      this.loading = true;
+      const res = await getAllTimedEvents();
+      if (res && res.data) this.timedEvents = res.data;
+      this.loading = false;
+    },
+    async createTimedEvent(params: CreateTimedEventRequest): Promise<void> {
+      this.loading = true;
+      const res = await createTimedEvent({ body: params });
+      if (res && res.data) {
+        this.timedEvents.push(res.data);
+      }
+      this.loading = false;
+    },
+    async updateTimedEvent(id: number, params: UpdateTimedEventRequest): Promise<void> {
+      this.loading = true;
+      const res = await updateTimedEvent({ path: { id }, body: params });
+      if (res && res.data) {
+        const index = this.timedEvents.findIndex((f) => f.id === id);
+        if (index >= 0) {
+          this.timedEvents.splice(index, 1, res.data);
+        } else {
+          this.timedEvents.push(res.data);
+        }
+      }
+      this.loading = false;
+    },
+    async deleteTimedEvent(id: number): Promise<void> {
+      this.loading = true;
+      const res = await deleteTimedEvent({ path: { id } });
+      if (res && res.response.ok) {
+        const index = this.timedEvents.findIndex((f) => f.id === id);
+        if (index >= 0) this.timedEvents.splice(index, 1);
+      }
+      this.loading = false;
+    },
+  },
+});
diff --git a/apps/aurora-backoffice/src/utils/arrayUtils.ts b/apps/aurora-backoffice/src/utils/arrayUtils.ts
new file mode 100644
index 00000000..0e5898ac
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/arrayUtils.ts
@@ -0,0 +1,23 @@
+/**
+ * Given an array, split it into chunks of the given size.
+ * The last chunk can be smaller if the array is not divisible
+ * by the given size.
+ * @param array
+ * @param chunkSize
+ */
+export function splitArrayIntoChunks<T>(array: T[], chunkSize: number) {
+  const chunks: T[][] = [];
+  let currentChunk: T[] = [];
+
+  array.forEach((v) => {
+    currentChunk.push(v);
+    if (currentChunk.length < chunkSize) return;
+
+    chunks.push(currentChunk);
+    currentChunk = [];
+  });
+
+  if (currentChunk.length !== 0) chunks.push(currentChunk);
+
+  return chunks;
+}
diff --git a/apps/aurora-backoffice/src/utils/fetchInterceptor.ts b/apps/aurora-backoffice/src/utils/fetchInterceptor.ts
new file mode 100644
index 00000000..e170f4b5
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/fetchInterceptor.ts
@@ -0,0 +1,30 @@
+import { type HttpApiException } from '@gewis/aurora-api-client';
+import { client } from '@gewis/aurora-api-client/client';
+import { toastError } from '@/utils/toastHandler';
+
+/**
+ * Fetch interceptor
+ * Handles errors and toasts
+ */
+client.interceptors.response.use((response: Response) => {
+  // Let toast implicitly handle each error
+  if (response.status >= 400) {
+    let httpException: HttpApiException | undefined;
+    void response
+      .clone()
+      .json()
+      .then((err: HttpApiException) => {
+        toastError({
+          title: err.name,
+          body: err.message,
+        });
+        httpException = err;
+      });
+    if (httpException) {
+      throw new Error(httpException.message);
+    }
+  }
+  // The only responsibility of a promise is now to "clean up" any side effects of errors
+  // The actual error logging is handled by the interceptor and toast handler
+  return response;
+});
diff --git a/apps/aurora-backoffice/src/utils/formatterUtils.ts b/apps/aurora-backoffice/src/utils/formatterUtils.ts
new file mode 100644
index 00000000..105066fa
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/formatterUtils.ts
@@ -0,0 +1,9 @@
+function formatDuration(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+
+  return `${hours.toString()}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+export { formatDuration };
diff --git a/apps/aurora-backoffice/src/utils/posterUtils.ts b/apps/aurora-backoffice/src/utils/posterUtils.ts
new file mode 100644
index 00000000..88b20a99
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/posterUtils.ts
@@ -0,0 +1,23 @@
+import type { PosterResponse } from '@gewis/aurora-api-client';
+
+export type PosterStatus = 'live' | 'borrel' | 'expired' | 'scheduled' | 'disabled';
+
+export const posterStatusLabels: Record<PosterStatus, string> = {
+  live: 'Active',
+  borrel: 'Borrel only',
+  expired: 'Expired',
+  scheduled: 'Not yet active',
+  disabled: 'Disabled',
+};
+
+export function getPosterStatus(poster: PosterResponse): PosterStatus {
+  if (!poster.enabled) return 'disabled';
+  if (poster.expirationDate && new Date(poster.expirationDate).getTime() < Date.now()) {
+    return 'expired';
+  }
+  if (poster.startDate && new Date(poster.startDate).getTime() > Date.now()) {
+    return 'scheduled';
+  }
+  if (poster.borrelMode) return 'borrel';
+  return 'live';
+}
diff --git a/apps/aurora-backoffice/src/utils/timeUtils.ts b/apps/aurora-backoffice/src/utils/timeUtils.ts
new file mode 100644
index 00000000..f901da4b
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/timeUtils.ts
@@ -0,0 +1,15 @@
+export function getIsoTime(): string {
+  return new Date().toISOString();
+}
+
+export function convetIsoTime(time: Date): string {
+  return time.toISOString();
+}
+
+export function toStopwatchString(totalMsDifference: number): string {
+  const diffMinutes = Math.floor(totalMsDifference / 60000);
+  const diffSeconds = Math.floor((totalMsDifference - diffMinutes * 60000) / 1000);
+  const diffMs = totalMsDifference % 1000;
+
+  return `${diffMinutes}:${diffSeconds.toString().padStart(2, '0')}:${diffMs.toString().padStart(3, '0')}`;
+}
diff --git a/apps/aurora-backoffice/src/utils/toastHandler.ts b/apps/aurora-backoffice/src/utils/toastHandler.ts
new file mode 100644
index 00000000..19ba4eda
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/toastHandler.ts
@@ -0,0 +1,41 @@
+import { app } from '@/main';
+
+interface ToastMessage {
+  title: string;
+  body: string;
+  lifeTime?: number;
+}
+
+enum ToastSeverity {
+  SUCCESS = 'success',
+  INFO = 'info',
+  WARN = 'warn',
+  ERROR = 'error',
+}
+
+function toast(severity: ToastSeverity, message: ToastMessage) {
+  app.config.globalProperties.$toast.add({
+    severity: severity,
+    summary: message.title,
+    detail: message.body,
+    life: message.lifeTime ?? 5000,
+  });
+}
+
+function toastSuccess(message: ToastMessage): void {
+  toast(ToastSeverity.SUCCESS, message);
+}
+
+function toastInfo(message: ToastMessage): void {
+  toast(ToastSeverity.INFO, message);
+}
+
+function toastWarn(message: ToastMessage): void {
+  toast(ToastSeverity.WARN, message);
+}
+
+function toastError(message: ToastMessage): void {
+  toast(ToastSeverity.ERROR, message);
+}
+
+export { type ToastMessage, toast, toastSuccess, toastInfo, toastWarn, toastError };
diff --git a/apps/aurora-backoffice/src/utils/validation-schema.ts b/apps/aurora-backoffice/src/utils/validation-schema.ts
new file mode 100644
index 00000000..de807ed9
--- /dev/null
+++ b/apps/aurora-backoffice/src/utils/validation-schema.ts
@@ -0,0 +1,12 @@
+import { toTypedSchema } from '@vee-validate/yup';
+import * as yup from 'yup';
+
+export const userDetailsSchema = toTypedSchema(
+  yup.object({
+    firstName: yup.string().required(),
+    lastName: yup.string().required(),
+    email: yup.string().email(),
+    userType: yup.string().required(),
+    isActive: yup.boolean().required().default(true),
+  }),
+);
diff --git a/apps/aurora-backoffice/src/views/Audit/AuditLogsView.vue b/apps/aurora-backoffice/src/views/Audit/AuditLogsView.vue
new file mode 100644
index 00000000..cd996026
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Audit/AuditLogsView.vue
@@ -0,0 +1,55 @@
+<template>
+  <AppContainer icon="pi-book" title="Audit logs">
+    <div v-if="store.entries.length > 0">
+      <DataTable data-key="id" :value="store.entries">
+        <Column field="createdAt" header="Timestamp">
+          <template #body="slotProps">
+            {{
+              new Date(slotProps.data.createdAt).toLocaleString('en-GB', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                second: 'numeric',
+              })
+            }}
+          </template>
+        </Column>
+        <Column field="userName" header="Name" />
+        <Column field="action" header="Action" />
+      </DataTable>
+      <Paginator
+        always-show
+        :rows="store.take"
+        :rows-per-page-options="[5, 10, 20, 50]"
+        :total-records="store.count"
+        @update:first="(value) => store.setSkip(value)"
+        @update:rows="(value) => store.setTake(value)"
+      />
+    </div>
+    <div v-else>Could not load audit logs.</div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { useAuditStore } from '@/stores/audit.store';
+import AppContainer from '@/layout/AppContainer.vue';
+
+const store = useAuditStore();
+void store.setSkipTake(0, 20);
+</script>
+
+<style lang="scss">
+@use '@/assets/layout/layout.scss';
+
+th {
+  padding-top: 0 !important;
+  @extend h6;
+}
+
+.p-datatable-column-title {
+  font-weight: 500 !important;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/views/Base/AuthView.vue b/apps/aurora-backoffice/src/views/Base/AuthView.vue
new file mode 100644
index 00000000..f54ab47d
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/AuthView.vue
@@ -0,0 +1,75 @@
+<template>
+  <LoadingView :authorizing="authorizing" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { getOidcParameters } from '@gewis/aurora-api-client';
+import { useAuthStore } from '@/stores/auth.store';
+import LoadingView from '@/views/Base/LoadingView.vue';
+
+const authorizing = ref<boolean>(true);
+const route = useRoute();
+const router = useRouter();
+const authStore = useAuthStore();
+
+onMounted(async () => {
+  if (route.path === '/auth/callback') {
+    authorizing.value = true;
+    if (!route.hash) {
+      await router.push({ name: 'error' });
+    }
+
+    const queryParameters = new URLSearchParams(route.hash.substring(1));
+    if (
+      !queryParameters.get('code') ||
+      !queryParameters.get('state') ||
+      !queryParameters.get('session_state')
+    ) {
+      await router.push({ name: 'error' });
+    }
+
+    // Get and clear sessionStorage
+    const state = sessionStorage.getItem('state');
+    const url = sessionStorage.getItem('url');
+
+    // Check if the state is still the same, if not require to re-authenticate
+    if (state !== queryParameters.get('state')) {
+      await router.push({ name: 'error' });
+    }
+
+    const authenticated = await authStore.OIDCLogin({
+      code: queryParameters.get('code')!,
+      state: queryParameters.get('state')!,
+      session_state: queryParameters.get('session_state')!,
+    });
+
+    if (authenticated) {
+      await router.push(url === null || url === '' ? { name: 'dashboard' } : url);
+    } else {
+      await router.push({ name: 'error' });
+    }
+  } else {
+    authorizing.value = false;
+    const state = Math.random().toString(36).slice(2);
+    sessionStorage.setItem('state', state);
+    sessionStorage.setItem('url', route.query.path as string);
+
+    const oidcParameters = await getOidcParameters();
+    // If the oidc parameters are not available, retry auth
+    if (!oidcParameters.data) await router.push({ name: 'auth' });
+
+    const queryParameters = new URLSearchParams({
+      client_id: oidcParameters.data!.clientId,
+      redirect_uri: oidcParameters.data!.redirectUri,
+      state: state,
+      response_mode: 'fragment',
+      response_type: 'code',
+      scope: 'openid',
+    });
+
+    window.location.href = oidcParameters.data!.authUrl + '?' + queryParameters.toString();
+  }
+});
+</script>
diff --git a/apps/aurora-backoffice/src/views/Base/DashboardView.vue b/apps/aurora-backoffice/src/views/Base/DashboardView.vue
new file mode 100644
index 00000000..656491a7
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/DashboardView.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-row gap-10 justify-between">
+    <h1>Hello, {{ authStore.name }}</h1>
+    <DevGuard>
+      <DevSettings />
+    </DevGuard>
+  </div>
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-10">
+    <AuthGuard group="handler" section="base">
+      <div class="flex flex-col gap-10">
+        <ScreenHandlerBlock />
+        <AudioHandlerBlock />
+        <LightHandlerBlock />
+      </div>
+    </AuthGuard>
+    <div class="flex flex-col gap-10">
+      <ShortcutBlock />
+      <AuthGuard group="audit" section="base">
+        <AuditBlock />
+      </AuthGuard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth.store';
+import ShortcutBlock from '@/components/shortcuts/ShortcutBlock.vue';
+import AuditBlock from '@/components/audit/AuditBlock.vue';
+import ScreenHandlerBlock from '@/components/handlers/ScreenHandlerBlock.vue';
+import AudioHandlerBlock from '@/components/handlers/AudioHandlerBlock.vue';
+import LightHandlerBlock from '@/components/handlers/LightHandlerBlock.vue';
+import DevSettings from '@/components/auth/DevSettings.vue';
+import DevGuard from '@/components/auth/DevGuard.vue';
+import AuthGuard from '@/components/auth/AuthGuard.vue';
+
+const authStore = useAuthStore();
+</script>
diff --git a/apps/aurora-backoffice/src/views/Base/IntegrationsView.vue b/apps/aurora-backoffice/src/views/Base/IntegrationsView.vue
new file mode 100644
index 00000000..c42c4f15
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/IntegrationsView.vue
@@ -0,0 +1,54 @@
+<template>
+  <AppContainer icon="pi-share-alt" title="Integrations">
+    <template #header>
+      <div class="flex flex-row gap-2">
+        <IntegrationDialogCreate />
+      </div>
+    </template>
+    <DataTable :loading="store.loading" :value="store.integrationUsers">
+      <Column field="name" header="Name"></Column>
+      <Column field="endpoints" header="Endpoints">
+        <template #body="slotProps">
+          <div class="flex flex-wrap gap-1">
+            <Chip v-for="endpoint in slotProps.data.endpoints" :key="endpoint">{{ endpoint }}</Chip>
+          </div>
+        </template>
+      </Column>
+      <Column field="lastSeen" header="Last Seen">
+        <template #body="slotProps">
+          <div v-if="slotProps.data.lastSeen">
+            {{ new Date(slotProps.data.lastSeen).toLocaleString() }}
+          </div>
+          <div v-else class="italic">-</div>
+        </template>
+      </Column>
+      <Column header="API key">
+        <template #body="slotProps">
+          <IntegrationUserApiKey :integration-user="slotProps.data" />
+        </template>
+      </Column>
+      <Column>
+        <template #body="slotProps">
+          <div class="flex flex-row gap-2">
+            <IntegrationDialogUpdate :integration-user="slotProps.data" />
+            <IntegrationDeleteButton :integration-user="slotProps.data" />
+          </div>
+        </template>
+      </Column>
+    </DataTable>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { useIntegrationsStore } from '@/stores/integrations.store';
+import AppContainer from '@/layout/AppContainer.vue';
+import IntegrationDeleteButton from '@/components/integrations/IntegrationDeleteButton.vue';
+import IntegrationUserApiKey from '@/components/integrations/IntegrationUserApiKey.vue';
+import IntegrationDialogUpdate from '@/components/integrations/IntegrationDialogUpdate.vue';
+import IntegrationDialogCreate from '@/components/integrations/IntegrationDialogCreate.vue';
+
+const store = useIntegrationsStore();
+void store.init();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Base/InternalErrorView.vue b/apps/aurora-backoffice/src/views/Base/InternalErrorView.vue
new file mode 100644
index 00000000..379006c8
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/InternalErrorView.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="flex align-items-center justify-center min-h-screen min-w-screen overflow-hidden">
+    <div class="flex flex-col align-items-center justify-center">
+      <Card>
+        <template #content>
+          <div class="w-full py-8 px-5 sm:px-8 flex flex-col align-items-center rounded-2xl">
+            <div class="text-900 font-bold text-3xl lg:text-5xl mb-2">Internal Error</div>
+            <div class="text-600 mb-5">Something went wrong.</div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
diff --git a/apps/aurora-backoffice/src/views/Base/LoadingView.vue b/apps/aurora-backoffice/src/views/Base/LoadingView.vue
new file mode 100644
index 00000000..834285b3
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/LoadingView.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="flex align-items-center justify-center min-h-screen min-w-screen overflow-hidden">
+    <div class="flex flex-col align-items-center justify-center">
+      <Card>
+        <template #content>
+          <div class="w-full py-8 px-5 sm:px-8 flex flex-col align-items-center rounded-2xl">
+            <div v-if="authorizing" class="text-900 font-bold text-3xl lg:text-5xl mb-5">
+              Authorizing
+            </div>
+            <div v-else class="text-900 font-bold text-3xl lg:text-5xl mb-5">Connecting</div>
+            <span class="font-bold text-3xl">
+              <ProgressBar mode="indeterminate" style="height: 6px" />
+            </span>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  authorizing: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
diff --git a/apps/aurora-backoffice/src/views/Base/MusicSettingsView.vue b/apps/aurora-backoffice/src/views/Base/MusicSettingsView.vue
new file mode 100644
index 00000000..e413acc1
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/MusicSettingsView.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+    <div class="flex flex-col gap-6">
+      <AppContainer
+        v-if="authStore.isInSecurityGroup('spotify', 'privileged')"
+        icon="pi-users"
+        title="Spotify Users"
+      >
+        <template #header>
+          <Button as="a" href="/api/spotify/login" icon="pi pi-plus" label="Add user" />
+        </template>
+        <div class="flex flex-col gap-3">
+          <DataTable
+            data-key="id"
+            :loading="store.loading"
+            :selection="selection"
+            show-headers
+            :value="store.spotifyUsers"
+          >
+            <Column class="w-1">
+              <template #body="slotProps">
+                <i v-if="slotProps.data.active" class="pi pi-arrow-right"></i>
+              </template>
+            </Column>
+            <Column field="name" header="Name" />
+            <Column>
+              <template #body="slotProps">
+                <div class="flex justify-end gap-2">
+                  <SpotifyUserSwitchButton :user="slotProps.data" />
+                  <SpotifyUserDeleteButton :user="slotProps.data" />
+                </div>
+              </template>
+            </Column>
+          </DataTable>
+        </div>
+      </AppContainer>
+      <SpotifyCurrentlyPlaying />
+    </div>
+    <BeatGenerators v-if="authStore.isInSecurityGroup('beats', 'privileged')" />
+  </div>
+  <SpotifyCallbackDialog />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import SpotifyCurrentlyPlaying from '@/components/audio/SpotifyCurrentlyPlaying.vue';
+import { useSpotifyStore } from '@/stores/spotify.store';
+import SpotifyCallbackDialog from '@/components/audio/SpotifyCallbackDialog.vue';
+import SpotifyUserDeleteButton from '@/components/audio/SpotifyUserDeleteButton.vue';
+import SpotifyUserSwitchButton from '@/components/audio/SpotifyUserSwitchButton.vue';
+import BeatGenerators from '@/components/audio/BeatGenerators.vue';
+import { useAuthStore } from '@/stores/auth.store';
+
+const authStore = useAuthStore();
+const store = useSpotifyStore();
+void store.init();
+
+const selection = computed(() => {
+  return store.spotifyUsers.filter((s) => s.active).map((s) => s.id);
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Base/NotFoundView.vue b/apps/aurora-backoffice/src/views/Base/NotFoundView.vue
new file mode 100644
index 00000000..4df121d2
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/NotFoundView.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="flex align-items-center justify-center min-h-screen min-w-screen overflow-hidden">
+    <div class="flex flex-col align-items-center justify-center">
+      <Card>
+        <template #content>
+          <div class="w-full py-8 px-5 sm:px-8 flex flex-col align-items-center rounded-2xl">
+            <div class="text-900 font-bold text-3xl lg:text-5xl mb-2">Not Found</div>
+            <div class="text-600 mb-5">Requested resource cannot be found.</div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
diff --git a/apps/aurora-backoffice/src/views/Base/ServerSettingsView.vue b/apps/aurora-backoffice/src/views/Base/ServerSettingsView.vue
new file mode 100644
index 00000000..4211e393
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/ServerSettingsView.vue
@@ -0,0 +1,230 @@
+<template>
+  <AppContainer icon="pi-cog" title="Server Settings">
+    <template #header>
+      <div class="flex flex-row gap-2">
+        <Button
+          v-if="!editing"
+          icon="pi pi-lock-open"
+          label="Unlock"
+          severity="secondary"
+          @click="editing = !editing"
+        ></Button>
+        <Button v-if="editing" icon="pi pi-lock" label="Lock" @click="editing = !editing"></Button>
+      </div>
+    </template>
+    <TreeTable data-key="key" :loading="store.loading" :value="entries">
+      <Column expander field="name" header="Setting name" sortable></Column>
+      <Column field="value" header="Setting value">
+        <template #body="slotProps">
+          <div v-if="slotProps.node.data.type === 'boolean'">
+            <ToggleSwitch
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :model-value="slotProps.node.data.value"
+              @update:model-value="
+                (newValue: boolean) => store.setSetting(slotProps.node.key, newValue)
+              "
+            ></ToggleSwitch>
+          </div>
+          <div v-else-if="slotProps.node.data.type === 'double'">
+            <InputNumber
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :format="false"
+              :model-value="slotProps.node.data.value"
+              @update:model-value="
+                (newValue: number) => store.setSetting(slotProps.node.key, newValue)
+              "
+            ></InputNumber>
+          </div>
+          <div v-else-if="slotProps.node.data.type === 'integer'">
+            <InputNumber
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :format="false"
+              :model-value="slotProps.node.data.value"
+              @update:model-value="
+                (newValue: number) => store.setSetting(slotProps.node.key, newValue)
+              "
+            ></InputNumber>
+          </div>
+          <div v-else-if="slotProps.node.data.type === 'string'">
+            <InputText
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :model-value="slotProps.node.data.value"
+              @update:model-value="
+                (newValue?: string): void => {
+                  store
+                    .setSetting(
+                      slotProps.node.key,
+                      (newValue ?? '') as unknown as ISettings[keyof ISettings],
+                    )
+                    .then(() => {});
+                }
+              "
+            ></InputText>
+          </div>
+          <div
+            v-else-if="slotProps.node.data.type === 'hexColor'"
+            class="flex flex-row gap-2 items-center"
+          >
+            <ColorPicker
+              :id="`color-picker-${slotProps.node.key}`"
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :model-value="slotProps.node.data.value"
+              @update:model-value="
+                (newValue: string): void => {
+                  store
+                    .setSetting(
+                      slotProps.node.key,
+                      `#${newValue}` as unknown as ISettings[keyof ISettings],
+                    )
+                    .then(() => {});
+                }
+              "
+            />
+            <InputText
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :model-value="slotProps.node.data.value"
+              size="small"
+              @update:model-value="
+                (newValue?: string): void => {
+                  store
+                    .setSetting(
+                      slotProps.node.key,
+                      (newValue ?? '') as unknown as ISettings[keyof ISettings],
+                    )
+                    .then(() => {});
+                }
+              "
+            ></InputText>
+          </div>
+          <div v-else-if="slotProps.node.data.type === 'file'">
+            <ServerSettingsFileUpload
+              :disabled="!editing || !slotProps.node.data.canEdit"
+              :model-value="slotProps.node.data.value"
+              :setting="slotProps.node.key"
+            />
+          </div>
+          <div v-else>{{ slotProps.node.data.value }}</div>
+        </template>
+      </Column>
+      <Column field="isFeatureFlag" header="Feature flag">
+        <template #body="slotProps">
+          <div v-if="slotProps.node.data.isFeatureFlag && !!slotProps.node.data.value">
+            <i class="pi pi-flag-fill text-green-800" title="Enabled"></i>
+          </div>
+          <div v-else-if="slotProps.node.data.isFeatureFlag">
+            <i class="pi pi-flag text-red-800" title="Disabled"></i>
+          </div>
+          <div v-else></div>
+        </template>
+      </Column>
+      <Column field="description">
+        <template #body="slotProps">
+          <div v-if="slotProps.node.data.description">
+            <span v-tooltip="slotProps.node.data.description" class="pi pi-question-circle"></span>
+          </div>
+        </template>
+      </Column>
+    </TreeTable>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import Column from 'primevue/column';
+import TreeTable from 'primevue/treetable';
+import type { TreeNode } from 'primevue/treenode';
+import { type ISettings } from '@gewis/aurora-api-client';
+import { ISettingsSchema } from '@gewis/aurora-api-client/schemas';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useServerSettingsStore } from '@/stores/server-settings.store';
+import ServerSettingsFileUpload from '@/components/settings/ServerSettingsFileUpload.vue';
+
+const store = useServerSettingsStore();
+
+const editing = ref<boolean>(false);
+
+const entries = computed(() => {
+  if (!store.serverSettings) return [];
+  const keys = Object.keys(store.serverSettings);
+
+  const createTreeNodes = (currentKey: string, canEditParent = true): TreeNode[] => {
+    const subKeys = keys.filter((k) => k.startsWith(currentKey));
+
+    const usedKeys: string[] = [];
+
+    return subKeys
+      .map((key): TreeNode | undefined => {
+        const remainder = key.substring(currentKey.length, key.length);
+        if (remainder == '') return undefined;
+
+        const nextKey = currentKey + remainder.split('.')[0] + '.';
+        if (usedKeys.includes(nextKey)) return undefined;
+
+        // Current key ends with a dot, so we need to remove that dot
+        const canEdit =
+          canEditParent &&
+          store.featureEnabled(currentKey.substring(0, currentKey.length - 1) as keyof ISettings);
+
+        usedKeys.push(nextKey);
+        const setting = currentKey + remainder;
+        const children: TreeNode[] = createTreeNodes(nextKey);
+
+        const refToType = (ref: string) => {
+          switch (ref) {
+            case '#/components/schemas/IFile':
+              return 'file';
+            case '#/components/schemas/HexColor':
+              return 'hexColor';
+            default:
+              return '';
+          }
+        };
+
+        let spec;
+        if (setting in ISettingsSchema.properties) {
+          spec = ISettingsSchema.properties[setting as keyof ISettings];
+        } else {
+          throw new Error(`Unknown setting in schema: "${setting}"`);
+        }
+        let description: string | undefined;
+        if ('description' in spec) {
+          description = spec.description;
+        }
+        let type: string = '';
+        if ('type' in spec) {
+          type = spec.type;
+        } else if ('$ref' in spec) {
+          type = refToType(spec['$ref']);
+        } else if ('anyOf' in spec) {
+          for (const item of spec.anyOf) {
+            if ('$ref' in item) {
+              type = refToType(item['$ref']);
+              break;
+            }
+          }
+        }
+
+        return {
+          key: setting,
+          label: remainder,
+          data: {
+            name: remainder,
+            type,
+            description,
+            // @ts-expect-error I do not understand this and can't be bothered anymore
+            value: store.serverSettings![setting],
+            isFeatureFlag: store.isFeatureFlag(setting as keyof ISettings),
+            canEdit,
+          },
+          children: children.length > 0 ? children : undefined,
+        };
+      })
+      .filter((x) => x != undefined);
+  };
+  return createTreeNodes('');
+});
+</script>
+
+<style scoped>
+@use '@/assets/layout/layout.scss';
+</style>
diff --git a/apps/aurora-backoffice/src/views/Base/TimedEventsView.vue b/apps/aurora-backoffice/src/views/Base/TimedEventsView.vue
new file mode 100644
index 00000000..45639a95
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/TimedEventsView.vue
@@ -0,0 +1,58 @@
+<template>
+  <AppContainer icon="pi-calendar-clock" title="Timed Events">
+    <template #header>
+      <div class="flex flex-row gap-2">
+        <TimedEventDialogCreate />
+      </div>
+    </template>
+    <DataTable :loading="store.loading" :value="store.timedEvents">
+      <Column field="cronExpression" header="Cron expression">
+        <template #body="slotProps">
+          <span>{{ slotProps.data.cronExpression }}</span>
+          <br />
+          <Message class="italic" severity="secondary" size="small" variant="simple">{{
+            cronstrue.toString(slotProps.data.cronExpression)
+          }}</Message>
+        </template>
+      </Column>
+      <Column field="eventSpec" header="Event specification">
+        <template #body="slotProps">
+          <TimedEventSpec :event-spec="slotProps.data.eventSpec" />
+        </template>
+      </Column>
+      <Column field="skipNext" header="Skip Next?">
+        <template #body="slotProps">
+          <div v-if="slotProps.data.skipNext">
+            <i class="pi pi-check-circle" title="Skipped next" />
+          </div>
+          <div v-else>
+            <i class="pi pi-times" title="Not skipped" />
+          </div>
+        </template>
+      </Column>
+      <Column>
+        <template #body="slotProps">
+          <div class="flex flex-row gap-2">
+            <TimedEventDialogUpdate :timed-event="slotProps.data" />
+            <TimedEventDeleteButton :timed-event="slotProps.data" />
+          </div>
+        </template>
+      </Column>
+    </DataTable>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import cronstrue from 'cronstrue';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useTimedEventsStore } from '@/stores/timed-events.store';
+import TimedEventSpec from '@/components/timed-events/TimedEventSpec.vue';
+import TimedEventDeleteButton from '@/components/timed-events/TimedEventDeleteButton.vue';
+import TimedEventDialogCreate from '@/components/timed-events/TimedEventDialogCreate.vue';
+import TimedEventDialogUpdate from '@/components/timed-events/TimedEventDialogUpdate.vue';
+
+const store = useTimedEventsStore();
+void store.init();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Base/UnauthorizedView.vue b/apps/aurora-backoffice/src/views/Base/UnauthorizedView.vue
new file mode 100644
index 00000000..109a642b
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Base/UnauthorizedView.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="flex align-items-center justify-center min-h-screen min-w-screen overflow-hidden">
+    <div class="flex flex-col align-items-center justify-center">
+      <Card>
+        <template #content>
+          <div class="w-full py-8 px-5 sm:px-8 flex flex-col align-items-center rounded-2xl">
+            <div class="text-900 font-bold text-3xl lg:text-5xl mb-2">Unauthorized</div>
+            <div class="text-600 mb-5">You do not have access to the requested resource.</div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </div>
+</template>
diff --git a/apps/aurora-backoffice/src/views/Lights/EffectsController.vue b/apps/aurora-backoffice/src/views/Lights/EffectsController.vue
new file mode 100644
index 00000000..a8f4243c
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Lights/EffectsController.vue
@@ -0,0 +1,27 @@
+<template>
+  <Tabs value="0">
+    <TabList>
+      <Tab value="0">Default</Tab>
+      <Tab value="1">Advanced</Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="0">
+        <EffectsControllerSimple />
+      </TabPanel>
+      <TabPanel value="1">
+        <EffectsControllerAdvanced />
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+</template>
+
+<script setup lang="ts">
+import EffectsControllerSimple from '@/views/Lights/EffectsControllerSimple.vue';
+import EffectsControllerAdvanced from '@/views/Lights/EffectsControllerAdvanced.vue';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+
+const store = useEffectsControllerStore();
+void store.init();
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Lights/EffectsControllerAdvanced.vue b/apps/aurora-backoffice/src/views/Lights/EffectsControllerAdvanced.vue
new file mode 100644
index 00000000..2a0e20f8
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Lights/EffectsControllerAdvanced.vue
@@ -0,0 +1,153 @@
+<template>
+  <AppContainer icon="pi-sparkles" title="Effects controller (Advanced)">
+    <template #header>
+      <BeatVisualizer />
+    </template>
+
+    <!-- Light groups -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
+      <Card class="w-full">
+        <template #title> (1) Lights groups </template>
+        <template #content>
+          <div class="flex flex-col gap-5 w-100">
+            <div class="flex flex-row gap-5 w-100">
+              <Button
+                class="w-1/2 text-center"
+                severity="secondary"
+                @click="effectsControllerStore.resetLightsGroupSelection()"
+              >
+                Reset
+              </Button>
+              <Button
+                class="w-1/2 text-center"
+                severity="secondary"
+                @click="effectsControllerStore.selectAllLightsGroups(activeLightGroups)"
+              >
+                Select all
+              </Button>
+            </div>
+            <div class="flex flex-col gap-5">
+              <div v-for="group in activeLightGroups" :key="group.id">
+                <LightsGroupToggleButton
+                  class="w-full"
+                  :enabled="effectsControllerStore.selectedLightsGroupIds.includes(group.id)"
+                  :lights-group="group"
+                  @click="() => effectsControllerStore.toggleLightsGroup(group.id)"
+                />
+              </div>
+              <div v-for="group in inactiveLightGroups" :key="group.id">
+                <LightsGroupToggleButton class="w-full" disabled :lights-group="group" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </Card>
+
+      <!-- Create effects -->
+      <Card>
+        <template #title> (2) Create effects </template>
+        <template #content>
+          <h4 class="mt-0 mb-1">Colors</h4>
+          <div class="flex flex-col gap-5 mb-5">
+            <EffectBackgroundPulseDialog @save="effectsControllerStore.setColorEffect" />
+            <EffectBeatFadeOutDialog @save="effectsControllerStore.setColorEffect" />
+            <EffectRandomColorDialog @save="effectsControllerStore.setColorEffect" />
+            <EffectSparkleDialog @save="effectsControllerStore.setColorEffect" />
+            <EffectStaticColorDialog @save="effectsControllerStore.setColorEffect" />
+            <EffectWaveDialog @save="effectsControllerStore.setColorEffect" />
+          </div>
+          <h4 class="mt-2 mb-1">Movement</h4>
+          <div class="flex flex-col gap-5">
+            <EffectSearchLightDialog @save="effectsControllerStore.setMovementEffect" />
+            <EffectTableRotateDialog @save="effectsControllerStore.setMovementEffect" />
+            <EffectClassicRotateDialog @save="effectsControllerStore.setMovementEffect" />
+            <EffectRandomPositionDialog @save="effectsControllerStore.setMovementEffect" />
+            <EffectZigZagDialog @save="effectsControllerStore.setMovementEffect" />
+          </div>
+        </template>
+      </Card>
+
+      <!-- Other effects & settings -->
+      <Card>
+        <template #title> Other effects & settings </template>
+        <template #content>
+          <div class="flex flex-col gap-5">
+            <StrobeButton />
+            <Button
+              :disabled="effectsControllerStore.selectedLightsGroupIds.length === 0"
+              severity="secondary"
+              @click="() => effectsControllerStore.disableLightsColors()"
+            >
+              Disable colors
+            </Button>
+            <Button
+              :disabled="effectsControllerStore.selectedLightsGroupIds.length === 0"
+              severity="secondary"
+              @click="() => effectsControllerStore.disableLightsMovement()"
+            >
+              Disable movement
+            </Button>
+            <Divider />
+            <ArtificialBeatDialog />
+          </div>
+        </template>
+      </Card>
+    </div>
+
+    <div class="w-full">
+      <Card>
+        <template #title> Past effects </template>
+        <template #content>
+          <div class="overflow-y-scroll w-full">
+            <div class="flex flex-row gap-5">
+              <div
+                v-for="effect in effectsControllerStore.pastPushedEffects"
+                :key="effect.timestamp.getTime()"
+              >
+                <EffectHistoryCard :effect="effect" />
+              </div>
+            </div>
+          </div>
+        </template>
+      </Card>
+    </div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import LightsGroupToggleButton from '@/components/lights/effects/LightsGroupToggleButton.vue';
+import { useHandlersStore } from '@/stores/handlers.store';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+import StrobeButton from '@/components/lights/effects/other/StrobeButton.vue';
+import EffectHistoryCard from '@/components/lights/effects/EffectHistoryCard.vue';
+import BeatVisualizer from '@/components/audio/BeatVisualizer.vue';
+import ArtificialBeatDialog from '@/components/audio/ArtificialBeatDialog.vue';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import AppContainer from '@/layout/AppContainer.vue';
+import EffectBeatFadeOutDialog from '@/components/lights/effects/color/EffectBeatFadeOutDialog.vue';
+import EffectWaveDialog from '@/components/lights/effects/color/EffectWaveDialog.vue';
+import EffectStaticColorDialog from '@/components/lights/effects/color/EffectStaticColorDialog.vue';
+import EffectSparkleDialog from '@/components/lights/effects/color/EffectSparkleDialog.vue';
+import EffectSearchLightDialog from '@/components/lights/effects/movement/EffectSearchLightDialog.vue';
+import EffectTableRotateDialog from '@/components/lights/effects/movement/EffectTableRotateDialog.vue';
+import EffectClassicRotateDialog from '@/components/lights/effects/movement/EffectClassicRotateDialog.vue';
+import EffectRandomPositionDialog from '@/components/lights/effects/movement/EffectRandomPositionDialog.vue';
+import EffectBackgroundPulseDialog from '@/components/lights/effects/color/EffectBackgroundPulseDialog.vue';
+import EffectRandomColorDialog from '@/components/lights/effects/color/EffectRandomColorDialog.vue';
+import EffectZigZagDialog from '@/components/lights/effects/movement/EffectZigZagDialog.vue';
+
+const handlersStore = useHandlersStore();
+const effectsControllerStore = useEffectsControllerStore();
+const subscriberStore = useSubscriberStore();
+
+const activeLightGroups = handlersStore.getRegisteredLights('SetEffectsHandler');
+const inactiveLightGroups = subscriberStore.lightsGroups.filter(
+  (l1) => !activeLightGroups.find((l2) => l1.id === l2.id),
+);
+</script>
+
+<style scoped lang="scss">
+.grid > div {
+  padding: 0.5rem;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/views/Lights/EffectsControllerSimple.vue b/apps/aurora-backoffice/src/views/Lights/EffectsControllerSimple.vue
new file mode 100644
index 00000000..93e9bd3a
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Lights/EffectsControllerSimple.vue
@@ -0,0 +1,126 @@
+<template>
+  <AppContainer icon="pi-sparkles" title="Effects controller">
+    <template #header>
+      <div class="flex flex-row gap-6 items-center">
+        <Button v-if="!editing" icon="pi pi-pencil" label="Edit" @click="editing = !editing" />
+        <Button
+          v-if="editing"
+          icon="pi pi-save"
+          label="Save"
+          severity="success"
+          @click="editing = !editing"
+        />
+        <BeatVisualizer />
+      </div>
+    </template>
+
+    <div v-if="!editing" class="grid grid-cols-1 md:grid-cols-8 gap-5">
+      <div
+        v-for="columnButtons in gridButtons"
+        :key="columnButtons.map((b) => b.buttonId).join(',')"
+        class="flex flex-col gap-5"
+      >
+        <Button
+          v-for="button in columnButtons"
+          :key="button.buttonId"
+          class="h-14"
+          :disabled="button.properties.type === 'LightsButtonNull'"
+          raised
+          :severity="buttonActive(button) ? 'primary' : 'secondary'"
+          @pointercancel="
+            () => {
+              store.onEffectButtonCancel(button);
+            }
+          "
+          @pointerdown="
+            () => {
+              store.onEffectButtonPress(button);
+            }
+          "
+          @pointerup="
+            () => {
+              store.onEffectButtonRelease(button);
+            }
+          "
+        >
+          <EffectControllerButtonContent :button="button" :editing="editing" />
+        </Button>
+      </div>
+    </div>
+    <div v-else class="grid grid-cols-1 md:grid-cols-8 gap-5">
+      <div
+        v-for="columnButtons in gridButtons"
+        :key="columnButtons.map((b) => b.buttonId).join(',')"
+        class="flex flex-col gap-5"
+      >
+        <Button
+          v-for="button in columnButtons"
+          :key="button.buttonId"
+          class="h-14"
+          raised
+          severity="secondary"
+          variant="outlined"
+          @click="
+            () => {
+              editingButton = button;
+              editingDialogOpen = true;
+            }
+          "
+        >
+          <EffectControllerButtonContent :button="button" :editing="editing" />
+        </Button>
+      </div>
+
+      <EffectControllerButtonDialog
+        :button="editingButton"
+        :visible="editingDialogOpen"
+        @close="editingDialogOpen = false"
+      />
+    </div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import {
+  type LightsButtonSwitch,
+  type LightsPredefinedEffectResponse,
+} from '@gewis/aurora-api-client';
+import BeatVisualizer from '@/components/audio/BeatVisualizer.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import { useEffectsControllerStore } from '@/stores/effects-controller.store';
+import EffectControllerButtonDialog from '@/components/lights/effects/EffectControllerButtonDialog.vue';
+import EffectControllerButtonContent from '@/components/lights/effects/EffectControllerButtonContent.vue';
+
+const store = useEffectsControllerStore();
+
+const editing = ref(false);
+const editingButton = ref<LightsPredefinedEffectResponse>();
+const editingDialogOpen = ref(false);
+
+// Reorganize the buttons so they are grouped column by column instead of as one, giant row
+const gridButtons = computed((): LightsPredefinedEffectResponse[][] => {
+  const rows = Math.ceil(store.buttonEffects.length / 8);
+  const columns: LightsPredefinedEffectResponse[][] = [];
+  for (let i = 0; i < rows; i++) {
+    columns.push(store.buttonEffects.filter((b) => (b.buttonId - 1) % 8 === i));
+  }
+  return columns;
+});
+
+const buttonActive = (button: LightsPredefinedEffectResponse) => {
+  if (button.properties.type === 'LightsButtonColors') {
+    return store.areSelectedColors(button.properties.colors);
+  }
+  if (button.properties.type === 'LightsButtonSwitch') {
+    const storedSwitches = store.lightsSwitches.filter((s) =>
+      (button.properties as LightsButtonSwitch).switchIds.includes(s.id),
+    );
+    const enabledSwitches = storedSwitches.filter((s) => s.enabled);
+    return enabledSwitches.length > 0;
+  }
+  return false;
+};
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Lights/FixtureOverview.vue b/apps/aurora-backoffice/src/views/Lights/FixtureOverview.vue
new file mode 100644
index 00000000..8b807905
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Lights/FixtureOverview.vue
@@ -0,0 +1,283 @@
+<template>
+  <AppContainer icon="pi pi-fw pi-bolt" title="Fixture Overview">
+    <div>
+      <div class="w-full mb-1 flex flex-wrap justify-end gap-5">
+        <Button icon="pi pi-plus" label="Expand All" text variant="outlined" @click="expandAll" />
+        <Button
+          icon="pi pi-minus"
+          label="Collapse All"
+          text
+          variant="outlined"
+          @click="collapseAll"
+        />
+      </div>
+      <DataTable
+        v-model:expanded-rows="expandedRows"
+        data-key="id"
+        :value="subscriberStore.lightsGroups"
+      >
+        <Column expander style="width: 5rem" />
+        <Column field="name" header="Group name" />
+        <Column header="Organization">
+          <template #body="slotProps">
+            <span v-if="slotProps.data.gridSizeY > 0">
+              Grid
+              <span
+                v-tooltip="{ value: 'All fixtures are placed in a grid (two dimensional).' }"
+                class="pi pi-question-circle"
+              ></span>
+            </span>
+            <span v-else>
+              Line
+              <span
+                v-tooltip="{ value: 'All fixtures are placed on a line (one dimensional).' }"
+                class="pi pi-question-circle"
+              ></span>
+            </span>
+          </template>
+        </Column>
+        <Column header="Controller">
+          <template #body="slotProps">
+            {{ slotProps.data.controller.name }}
+          </template>
+        </Column>
+        <Column header="Current handler">
+          <template #body="slotProps">
+            <span v-if="activeLightsGroupIds.has(slotProps.data.id)">
+              {{ getHandler(slotProps.data.id) }}
+            </span>
+            <InlineMessage v-else severity="warn">
+              No handler set, all actions disabled
+            </InlineMessage>
+          </template>
+        </Column>
+        <Column header="Actions">
+          <template #body="slotProps">
+            <div class="flex flex-row gap-1">
+              <Button
+                :disabled="!activeLightsGroupIds.has(slotProps.data.id)"
+                size="small"
+                title="Freeze"
+                @click="
+                  async () => {
+                    await freezeLightsGroup({ path: { id: slotProps.data.id } });
+                    toastSuccess({
+                      title: 'Success',
+                      body: `Successfully froze lights group '${slotProps.data.name}'`,
+                    });
+                  }
+                "
+              >
+                <i class="pi pi-pause" />
+              </Button>
+              <Button
+                :disabled="!activeLightsGroupIds.has(slotProps.data.id)"
+                size="small"
+                title="Unfreeze"
+                @click="
+                  async () => {
+                    await unfreezeLightsGroup({ path: { id: slotProps.data.id } });
+                    toastSuccess({
+                      title: 'Success',
+                      body: `Successfully unfroze lights group '${slotProps.data.name}'`,
+                    });
+                  }
+                "
+              >
+                <i class="pi pi-play" />
+              </Button>
+              <Button
+                icon="pi pi-sun"
+                size="small"
+                title="Set brightness"
+                @click="handleLightsGroupBrightness($event, slotProps.data)"
+              />
+            </div>
+          </template>
+        </Column>
+        <template #expansion="slotProps">
+          <h3>Fixtures for {{ slotProps.data.name }}</h3>
+          <DataTable :value="getGroupFixtures(slotProps.data)">
+            <Column header="Name">
+              <template #body="slotProps2">
+                {{ slotProps2.data.fixture.name }}
+              </template>
+            </Column>
+            <Column field="positionX" header="Position X" />
+            <Column v-if="slotProps.data.gridSizeY > 0" field="positionY" header="Position Y" />
+            <Column field="relativeBrightness" header="Brightness">
+              <template #body="slotProps2"> {{ slotProps2.data.masterDimmer * 100 }}% </template>
+            </Column>
+            <Column field="firstChannel" header="DMX Channel" />
+            <Column header="Actions">
+              <template #body="slotProps2">
+                <div class="flex flex-row gap-1">
+                  <Button
+                    :disabled="!activeLightsGroupIds.has(slotProps.data.id)"
+                    size="small"
+                    title="Freeze"
+                    @click="handleFreeze(slotProps2.data.type, slotProps2.data.id)"
+                  >
+                    <i class="pi pi-pause" />
+                  </Button>
+                  <Button
+                    :disabled="!activeLightsGroupIds.has(slotProps.data.id)"
+                    size="small"
+                    title="Unfreeze"
+                    @click="handleUnfreeze(slotProps2.data.type, slotProps2.data.id)"
+                  >
+                    <i class="pi pi-play" />
+                  </Button>
+                  <Button
+                    :disabled="
+                      !activeLightsGroupIds.has(slotProps.data.id) ||
+                      !slotProps2.data.fixture.canReset
+                    "
+                    size="small"
+                    title="Hardware reset"
+                    @click="handleHardwareReset(slotProps2.data.type, slotProps2.data.id)"
+                  >
+                    <i class="pi pi-sync" />
+                  </Button>
+                </div>
+              </template>
+            </Column>
+          </DataTable>
+        </template>
+      </DataTable>
+      <Popover ref="brightnessPopoverOp" @hide="selectedGroupBrightnessPopover = undefined">
+        <BrightnessSlider
+          v-if="selectedGroupBrightnessPopover"
+          :lights-group="selectedGroupBrightnessPopover"
+          @close="brightnessPopoverOp?.hide()"
+        />
+      </Popover>
+    </div>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import type { PopoverMethods } from 'primevue';
+import {
+  freezeGroupMovingHeadRgb,
+  freezeGroupMovingHeadWheel,
+  freezeGroupPar,
+  freezeLightsGroup,
+  type LightsGroupResponse,
+  resetGroupMovingHeadRgb,
+  resetGroupMovingHeadWheel,
+  resetGroupPar,
+  unfreezeGroupPar,
+  unfreezeLightsGroup,
+  unfreezeMovingHeadRgb,
+  unfreezeMovingHeadWheel,
+} from '@gewis/aurora-api-client';
+import { useHandlersStore } from '@/stores/handlers.store';
+import { useSubscriberStore } from '@/stores/subscriber.store';
+import { FixtureType } from '@/components/lights/fixtures/FixtureType';
+import { toastSuccess } from '@/utils/toastHandler';
+import AppContainer from '@/layout/AppContainer.vue';
+import BrightnessSlider from '@/components/lights/fixtures/BrightnessSlider.vue';
+
+const handlersStore = useHandlersStore();
+const subscriberStore = useSubscriberStore();
+
+const brightnessPopoverOp = ref<PopoverMethods>();
+const selectedGroupBrightnessPopover = ref<LightsGroupResponse | undefined>();
+
+const expandedRows = ref<Record<number, boolean> | null>({});
+const expandAll = () => {
+  expandedRows.value = subscriberStore.lightsGroups.reduce(
+    (rows: Record<number, boolean>, group: LightsGroupResponse) => ({ ...rows, [group.id]: true }),
+    {},
+  );
+};
+const collapseAll = () => {
+  expandedRows.value = null;
+};
+
+const getGroupFixtures = (g: LightsGroupResponse) =>
+  [
+    ...g.pars.map((p) => ({ ...p, type: FixtureType.PAR })),
+    ...g.movingHeadRgbs.map((m) => ({ ...m, type: FixtureType.MOVING_HEAD_RGB })),
+    ...g.movingHeadWheels.map((m) => ({ ...m, type: FixtureType.MOVING_HEAD_WHEEL })),
+  ].sort((a, b) => a.firstChannel - b.firstChannel);
+
+const handleFreeze = async (type: FixtureType, id: number) => {
+  switch (type) {
+    case FixtureType.PAR:
+      await freezeGroupPar({ path: { id } });
+      break;
+    case FixtureType.MOVING_HEAD_RGB:
+      await freezeGroupMovingHeadRgb({ path: { id } });
+      break;
+    case FixtureType.MOVING_HEAD_WHEEL:
+      await freezeGroupMovingHeadWheel({ path: { id } });
+      break;
+  }
+  toastSuccess({
+    title: 'Success',
+    body: 'Successfully froze fixture',
+  });
+};
+
+const handleUnfreeze = async (type: FixtureType, id: number) => {
+  switch (type) {
+    case FixtureType.PAR:
+      await unfreezeGroupPar({ path: { id } });
+      break;
+    case FixtureType.MOVING_HEAD_RGB:
+      await unfreezeMovingHeadRgb({ path: { id } });
+      break;
+    case FixtureType.MOVING_HEAD_WHEEL:
+      await unfreezeMovingHeadWheel({ path: { id } });
+      break;
+  }
+  toastSuccess({
+    title: 'Success',
+    body: 'Successfully unfroze fixture',
+  });
+};
+
+const handleHardwareReset = async (type: FixtureType, id: number) => {
+  switch (type) {
+    case FixtureType.PAR:
+      await resetGroupPar({ path: { id } });
+      break;
+    case FixtureType.MOVING_HEAD_RGB:
+      await resetGroupMovingHeadRgb({ path: { id } });
+      break;
+    case FixtureType.MOVING_HEAD_WHEEL:
+      await resetGroupMovingHeadWheel({ path: { id } });
+      break;
+  }
+  toastSuccess({
+    title: 'Success',
+    body: 'Successfully sent hardware reset signal',
+  });
+};
+
+const handleLightsGroupBrightness = (event: Event, lightsGroup: LightsGroupResponse) => {
+  brightnessPopoverOp.value?.hide();
+
+  if (selectedGroupBrightnessPopover.value?.id !== lightsGroup.id) {
+    selectedGroupBrightnessPopover.value = lightsGroup;
+
+    void nextTick(() => {
+      brightnessPopoverOp.value?.show(event);
+    });
+  }
+};
+
+const getHandler = (groupId: number): string | undefined => {
+  return handlersStore.lightsHandlers.find((h) => !!h.entities.find((e) => e.id === groupId))?.name;
+};
+
+const activeLightsGroupIds = computed((): Set<number> => {
+  const ids = handlersStore.lightsHandlers.map((h) => h.entities.map((e) => e.id)).flat();
+  return new Set(ids);
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Lights/ScenesController.vue b/apps/aurora-backoffice/src/views/Lights/ScenesController.vue
new file mode 100644
index 00000000..8e5fbd37
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Lights/ScenesController.vue
@@ -0,0 +1,50 @@
+<template>
+  <AppContainer icon="pi-sliders-h" title="Scenes">
+    <template #header>
+      <div class="flex flex-row gap-5 align-items-center">
+        <Button size="small">
+          <i class="pi pi-moon mr-2" />
+          Clear scenes
+        </Button>
+        <BeatVisualizer />
+      </div>
+    </template>
+    <DataTable :loading="store.loading" :value="store.scenes">
+      <Column field="name" header="Name" />
+      <Column field="favorite" header="Favorite">
+        <template #body="slotProps">
+          <i v-if="slotProps.data.favorite" class="pi pi-check" />
+          <i v-else class="pi pi-times" />
+        </template>
+      </Column>
+      <Column header="Actions">
+        <template #body="slotProps">
+          <div class="flex flex-row gap-1">
+            <Button size="small" title="Apply scene" @click="store.applyScene(slotProps.data.id)">
+              <i class="pi pi-lightbulb" />
+            </Button>
+            <SceneDeleteButton :id="slotProps.data.id" />
+          </div>
+        </template>
+      </Column>
+    </DataTable>
+  </AppContainer>
+</template>
+
+<script setup lang="ts">
+import BeatVisualizer from '@/components/audio/BeatVisualizer.vue';
+import { useSceneControllerStore } from '@/stores/scene-controller.store';
+import SceneDeleteButton from '@/components/lights/scenes/SceneDeleteButton.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+
+const store = useSceneControllerStore();
+void store.initPage();
+</script>
+
+<style lang="scss">
+@use '@/assets/layout/layout.scss';
+
+th {
+  @extend h6;
+}
+</style>
diff --git a/apps/aurora-backoffice/src/views/Modes/CenturionModeView.vue b/apps/aurora-backoffice/src/views/Modes/CenturionModeView.vue
new file mode 100644
index 00000000..2f6edc1e
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Modes/CenturionModeView.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="grid lg:grid-cols-6 xxl:grid-cols-4">
+    <div class="hidden lg:flex" />
+    <AppContainer class="lg:col-span-4 xxl:col-span-2" icon="pi-crown" title="Centurion">
+      <template #header>
+        <div v-if="currentTape">
+          <Button icon="pi pi-times" @click="confirmRef?.confirmDialog" />
+          <ConfirmWrapper
+            ref="confirmRef"
+            accept-label="Quit"
+            message="Are you sure you want to quit this centurion?"
+            :on-accept="centurionStore.quitCenturion"
+          />
+        </div>
+      </template>
+      <div v-if="currentTape">
+        <CoverPlayButton :tape="currentTape" />
+        <divider />
+        <CenturionTapeTimeline :tape="currentTape" />
+      </div>
+      <div v-else>
+        <InitializeCenturion :vertical="layoutStore.getWindowWidth < TailwindWidth.sm" />
+      </div>
+    </AppContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import type { MixTapeResponse } from '@gewis/aurora-api-client';
+import { useCenturionStore } from '@/stores/modes/centurion.store';
+import InitializeCenturion from '@/components/modes/centurion/InitializeCenturion.vue';
+import CoverPlayButton from '@/components/modes/centurion/CoverPlayButton.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import CenturionTapeTimeline from '@/components/modes/centurion/TapeTimeline.vue';
+import { useLayoutStore, TailwindWidth } from '@/stores/layout.store';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+
+const confirmRef = ref();
+const centurionStore = useCenturionStore();
+const layoutStore = useLayoutStore();
+void centurionStore.init();
+
+onMounted(() => layoutStore.mountResizeListener());
+onUnmounted(() => {
+  layoutStore.unmountResizeListener();
+  void centurionStore.destroy();
+});
+
+const currentTape = computed<MixTapeResponse | undefined>(() => {
+  const tapes = centurionStore.getTapes;
+  if (!tapes) return undefined;
+
+  const currentTape = centurionStore.getCurrentTape;
+  if (!currentTape) return undefined;
+
+  return tapes?.find((t) => t.name === currentTape?.name);
+});
+</script>
diff --git a/apps/aurora-backoffice/src/views/Modes/TimeTrailRaceModeView.vue b/apps/aurora-backoffice/src/views/Modes/TimeTrailRaceModeView.vue
new file mode 100644
index 00000000..55e6fbf2
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Modes/TimeTrailRaceModeView.vue
@@ -0,0 +1,72 @@
+<template>
+  <div
+    :class="
+      timeTrailInitialized
+        ? 'grid grid-cols-1 xl:grid-cols-2 gap-10'
+        : 'grid lg:grid-cols-6 xxl:grid-cols-4'
+    "
+  >
+    <div v-if="!timeTrailInitialized" class="hidden lg:flex" />
+    <AppContainer
+      :class="timeTrailInitialized ? '' : 'lg:col-span-4 xxl:col-span-2'"
+      icon="pi-hourglass"
+      :title="timeTrailRaceTitle"
+    >
+      <template #header>
+        <div v-if="timeTrailInitialized">
+          <Button icon="pi pi-times" @click="confirmRef?.confirmDialog" />
+          <ConfirmWrapper
+            ref="confirmRef"
+            accept-label="Quit"
+            message="Are you sure you want to quit this spoelbakkenrace?"
+            :on-accept="timeTrailStore.quit"
+          />
+        </div>
+      </template>
+      <div v-if="!timeTrailInitialized">
+        <TimeTrailRaceInitialize />
+      </div>
+      <div v-else>
+        <TimeTrailRaceStepper />
+      </div>
+    </AppContainer>
+    <AppContainer v-if="timeTrailInitialized" icon="pi pi-chart-bar" title="Scoreboard">
+      <TimeTrailRaceScoreboard />
+    </AppContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useTimeTrailRaceStore } from '@/stores/modes/time-trail-race.store';
+import TimeTrailRaceInitialize from '@/components/modes/time-trail-race/TimeTrailRaceInitialize.vue';
+import TimeTrailRaceStepper from '@/components/modes/time-trail-race/TimeTrailRaceStepper.vue';
+import TimeTrailRaceScoreboard from '@/components/modes/time-trail-race/TimeTrailRaceScoreboard.vue';
+import AppContainer from '@/layout/AppContainer.vue';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
+import { useLayoutStore } from '@/stores/layout.store';
+
+const confirmRef = ref();
+
+const layoutStore = useLayoutStore();
+const timeTrailStore = useTimeTrailRaceStore();
+void timeTrailStore.init();
+
+const timeTrailInitialized = computed(() => {
+  return timeTrailStore.getSessionName !== undefined && timeTrailStore.getState !== undefined;
+});
+const timeTrailRaceTitle = computed(() => {
+  if (timeTrailStore.getSessionName) {
+    return `Spoelbakkenrace (${timeTrailStore.getSessionName})`;
+  }
+  return 'Spoelbakkenrace';
+});
+
+onMounted(() => layoutStore.mountResizeListener());
+onUnmounted(() => {
+  layoutStore.unmountResizeListener();
+  timeTrailStore.destroy();
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/src/views/Poster/PosterView.vue b/apps/aurora-backoffice/src/views/Poster/PosterView.vue
new file mode 100644
index 00000000..c6d90b67
--- /dev/null
+++ b/apps/aurora-backoffice/src/views/Poster/PosterView.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
+    <div class="lg:col-span-3 order-2 lg:order-1">
+      <AppContainer icon="pi-image" title="Posters">
+        <template #header>
+          <PosterOperations />
+        </template>
+        <div class="flex flex-col sm:flex-row gap-2 mb-4">
+          <InputText v-model="search" class="w-full" placeholder="Search posters by name…" />
+          <MultiSelect
+            v-model="selectedTypes"
+            class="w-full sm:w-72"
+            :max-selected-labels="2"
+            :options="typeOptions"
+            placeholder="All types"
+            show-clear
+          />
+          <MultiSelect
+            v-model="selectedStatuses"
+            class="w-full sm:w-72"
+            :max-selected-labels="2"
+            option-label="label"
+            option-value="value"
+            :options="statusOptions"
+            placeholder="All statuses"
+            show-clear
+          />
+        </div>
+        <div v-if="posterStore.loading">
+          <Spinner />
+        </div>
+        <div v-else-if="filteredPosters.length === 0" class="text-center italic opacity-70 py-8">
+          No posters match the current filters
+        </div>
+        <div
+          v-else
+          class="grid auto-rows-fr gap-4 grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 pb-5"
+        >
+          <div v-for="poster in filteredPosters" :key="poster.name">
+            <PosterCard :poster="poster" />
+          </div>
+        </div>
+      </AppContainer>
+    </div>
+
+    <div class="lg:col-span-1 order-1 lg:order-2 flex flex-col gap-4">
+      <AppContainer icon="pi-image" title="Static Poster">
+        <div class="flex flex-col gap-2">
+          <StaticPosterPreview
+            v-if="activeStaticPoster"
+            class="w-full"
+            :poster="activeStaticPoster"
+          />
+          <div
+            v-else
+            class="w-full flex justify-center items-center rounded-lg aspect-video bg-surface-300 text-primary-contrast"
+          >
+            No active static poster
+          </div>
+          <div
+            class="text-lg font-bold text-ellipsis whitespace-nowrap overflow-hidden"
+            :title="activeStaticPoster?.name ?? ''"
+          >
+            {{ activeStaticPoster?.name ?? '-' }}
+          </div>
+          <div class="flex flex-row gap-3 items-center">
+            <StaticPosterButtonClear />
+            <StaticPosterClockToggle />
+          </div>
+        </div>
+      </AppContainer>
+
+      <AppContainer icon="pi-bars" title="Carousel Order">
+        <PosterCarouselOrder />
+      </AppContainer>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { PosterType } from '@gewis/aurora-api-client';
+import { getPosterStatus, posterStatusLabels, type PosterStatus } from '@/utils/posterUtils';
+import AppContainer from '@/layout/AppContainer.vue';
+import { usePosterStore } from '@/stores/poster/poster.store';
+import PosterCard from '@/components/poster/PosterCard.vue';
+import PosterOperations from '@/components/poster/PosterOperations.vue';
+import StaticPosterPreview from '@/components/poster/StaticPosterPreview.vue';
+import StaticPosterButtonClear from '@/components/poster/StaticPosterButtonClear.vue';
+import StaticPosterClockToggle from '@/components/poster/StaticPosterClockToggle.vue';
+import PosterCarouselOrder from '@/components/poster/PosterCarouselOrder.vue';
+
+const posterStore = usePosterStore();
+void posterStore.init();
+
+const activeStaticPoster = computed(
+  () => posterStore.staticPosters.find((p) => p.id === posterStore.static.activePosterId) ?? null,
+);
+
+const search = ref('');
+const selectedTypes = ref<PosterType[] | null>([]);
+const selectedStatuses = ref<PosterStatus[] | null>([]);
+
+const typeOptions = computed(() => [...new Set(posterStore.posters.map((p) => p.type))].sort());
+
+const statusOptions = Object.entries(posterStatusLabels).map(([value, label]) => ({
+  label,
+  value,
+}));
+
+const filteredPosters = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  return posterStore.posters.filter(
+    (p) =>
+      (!q || p.name.toLowerCase().includes(q)) &&
+      (!selectedTypes.value?.length || selectedTypes.value.includes(p.type)) &&
+      (!selectedStatuses.value?.length || selectedStatuses.value.includes(getPosterStatus(p))),
+  );
+});
+</script>
+
+<style scoped></style>
diff --git a/apps/aurora-backoffice/tsconfig.app.json b/apps/aurora-backoffice/tsconfig.app.json
new file mode 100644
index 00000000..eea37ca6
--- /dev/null
+++ b/apps/aurora-backoffice/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "composite": false,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "types": [],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src", "src/**/*.vue"]
+}
diff --git a/apps/aurora-backoffice/tsconfig.json b/apps/aurora-backoffice/tsconfig.json
new file mode 100644
index 00000000..e4bbb726
--- /dev/null
+++ b/apps/aurora-backoffice/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
diff --git a/apps/aurora-backoffice/vite.config.mjs b/apps/aurora-backoffice/vite.config.mjs
new file mode 100644
index 00000000..16da2208
--- /dev/null
+++ b/apps/aurora-backoffice/vite.config.mjs
@@ -0,0 +1,67 @@
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+const coreUrl = process.env.VITE_CORE_URL || 'http://localhost:3000';
+const coreWsUrl = coreUrl.replace(/^http/, 'ws');
+
+export default defineConfig({
+  base: '/',
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+  plugins: [vue()],
+  server: {
+    port: 8080,
+    host: true,
+    proxy: {
+      '/api': {
+        target: coreUrl,
+        changeOrigin: true,
+        secure: false,
+        ws: true,
+      },
+      '/socket.io': {
+        target: coreWsUrl,
+        ws: true,
+      },
+      '/static/audio': {
+        target: coreUrl,
+        changeOrigin: true,
+        secure: false,
+      },
+      '/static/posters': {
+        target: coreUrl,
+        changeOrigin: true,
+        secure: false,
+      },
+      '/static/local-posters': {
+        target: coreUrl,
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  build: {
+    target: 'ESNext',
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            return id.toString().split('node_modules/')[1].split('/')[0].toString();
+          }
+        },
+      },
+    },
+    chunkSizeWarningLimit: 750,
+  },
+});
diff --git a/apps/aurora-core/README.md b/apps/aurora-core/README.md
index 02dce945..574c98ed 100644
--- a/apps/aurora-core/README.md
+++ b/apps/aurora-core/README.md
@@ -1,34 +1,25 @@
 # Aurora Core
 
-This is the **core** of the Aurora suite — the central publisher that receives commands and pushes state to all subscribers in real time over SocketIO.
+This is the **central hub** of the Aurora suite — it receives commands and state changes, and pushes them in real time to all connected subscribers over SocketIO WebSockets.
+End users control Aurora through the backoffice web interface, which communicates with the core over HTTP.
 See the root [README](../README.md) for the full architecture overview and list of all Aurora repositories.
 
 ## Prerequisites
 
 - NodeJS 22.
+- A SQLite database or a PostgreSQL instance.
 
 ## Development setup
 
 1. Copy `.env.example` to `.env` and fill in the environment variables.
-1. Run `pnpm install`.
+1. Run `pnpm install` from the monorepo root.
 1. Run `pnpm dev`.
-1. The application is now running at http://localhost:3000. The API documentation can be found at http://localhost:3000/api-docs.
+1. The application is now running at http://localhost:3000. API documentation is available at http://localhost:3000/api-docs.
 
-To get started more easily, you can seed the database using `pnpm seed:gewis` or `pnpm seed:hubble`.
-You can then find the API keys for all the subscribers in the `api_key` SQL table.
-
-When running `pnpm dev`, authentication is handled automatically by using mock endpoints. It is not needed to set up anything for this.
-
-### External integrations
-
-Environment variables for Spotify, Trello, NS, GEWIS photos, and SudoSOS are documented in the root [README](../README.md).
-
-### External services integrating with Aurora
-
-To read more about how you can integrate your own services with Aurora (to fetch data or send commands),
-visit the [README about Integrations](src/modules/auth/integration/README.md).
+The database is automatically synchronised with the application models in development mode (`TYPEORM_SYNCHRONIZE=true`).
+To seed the database with test data, run `pnpm seed:gewis`.
 
 ## Deployment
 
-Aurora Core can be deployed by using Docker Compose. Note that this only includes the core, backoffice and narrowcasting client.
-The audio player and DMX lights proxy need to be installed manually onto their destined systems, as those applications require an audio output and connected ARTnet controller respectively.
+Deployment is handled by Docker Compose from the monorepo root.
+The core can be built standalone with `pnpm docker-build` from this directory.
diff --git a/docker-compose.yml b/docker-compose.yml
index ff0bc794..2d284953 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,16 +1,29 @@
+x-pnpm-config: &pnpm-config
+  environment:
+    - npm_config_store_dir=/tmp/pnpm-store
+
 volumes:
   node_modules:
+  pnpm-store:
 
 services:
   core:
+    <<: *pnpm-config
     image: node:22
     entrypoint: ['node', '/app/scripts/entrypoint.ts']
     working_dir: /app
+    healthcheck:
+      test: ['CMD', 'curl', '-f', 'http://localhost:3000/api/auth/groups']
+      interval: 5s
+      timeout: 5s
+      retries: 10
+      start_period: 30s
     ports:
       - '3000:3000'
     volumes:
       - .:/app
       - node_modules:/app/node_modules
+      - pnpm-store:/tmp/pnpm-store
     environment:
       - NODE_ENV=development
       - PORT=3000
@@ -19,7 +32,7 @@ services:
       - TYPEORM_DATABASE=local.sqlite
       - TYPEORM_SYNCHRONIZE=true
       - TYPEORM_LOGGING=false
-      - CORS_ORIGINS=http://localhost:3000,http://localhost:8081
+      - CORS_ORIGINS=http://localhost:3000,http://localhost:8081,http://localhost:8080
       - COOKIE_SECRET=dev-secret
       - SESSION_SECRET=dev-secret
       - LOG_LEVEL=info
@@ -30,10 +43,10 @@ services:
       - ROLE_KEY_HOLDER=dev-key-holder
       - ROLE_BAC=dev-bac
       - ROLE_AVICO=dev-avico
-      - DEV_SEED=gewis
     command: ['pnpm', '--filter', '@gewis/aurora-core', 'run', 'dev']
 
   client:
+    <<: *pnpm-config
     image: node:22
     entrypoint: ['node', '/app/scripts/entrypoint.ts']
     working_dir: /app
@@ -42,8 +55,29 @@ services:
     volumes:
       - .:/app
       - node_modules:/app/node_modules
+      - pnpm-store:/tmp/pnpm-store
     depends_on:
-      - core
+      core:
+        condition: service_healthy
     environment:
       - VITE_CORE_URL=http://core:3000
     command: ['pnpm', '--filter', '@gewis/aurora-client', 'run', 'dev']
+
+  backoffice:
+    <<: *pnpm-config
+    image: node:22
+    entrypoint: ['node', '/app/scripts/entrypoint.ts']
+    working_dir: /app
+    ports:
+      - '8080:8080'
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+      - pnpm-store:/tmp/pnpm-store
+    depends_on:
+      core:
+        condition: service_healthy
+    environment:
+      - VITE_CORE_URL=http://core:3000
+      - VITE_NODE_ENV=development
+    command: ['pnpm', '--filter', '@gewis/aurora-backoffice', 'run', 'dev']
diff --git a/libs/aurora-api-client/package.json b/libs/aurora-api-client/package.json
index 2459ff64..c79d74ba 100644
--- a/libs/aurora-api-client/package.json
+++ b/libs/aurora-api-client/package.json
@@ -22,6 +22,11 @@
       "development": "./src/api-client/client.gen.ts",
       "types": "./dist/api-client/client.gen.d.ts",
       "default": "./dist/api-client/client.gen.js"
+    },
+    "./schemas": {
+      "development": "./src/api-client/schemas.gen.ts",
+      "types": "./dist/api-client/schemas.gen.d.ts",
+      "default": "./dist/api-client/schemas.gen.js"
     }
   },
   "files": [
diff --git a/package.json b/package.json
index 65e5e59c..3ff5431e 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
   "keywords": [],
   "author": "",
   "scripts": {
-    "dev-up": "tsx scripts/start-development.ts",
-    "dev-down": "docker compose down",
+    "dev": "tsx scripts/start-development.ts",
     "build": "turbo run build",
     "docker-build": "pnpm -r --workspace-concurrency=1 run docker-build",
     "typecheck": "turbo run typecheck",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0211646..525abc8a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,6 +33,124 @@ importers:
         specifier: 2.9.18
         version: 2.9.18
 
+  apps/aurora-backoffice:
+    dependencies:
+      '@gewis/aurora-api-client':
+        specifier: workspace:*
+        version: link:../../libs/aurora-api-client
+      '@gewis/splash':
+        specifier: 2.4.0
+        version: 2.4.0
+      '@primeuix/themes':
+        specifier: 1.2.0
+        version: 1.2.0
+      '@primevue/core':
+        specifier: 4.3.6
+        version: 4.3.6(vue@3.5.22(typescript@5.8.3))
+      '@tailwindcss/postcss':
+        specifier: 4.1.14
+        version: 4.1.14
+      '@vee-validate/yup':
+        specifier: 4.15.1
+        version: 4.15.1(vue@3.5.22(typescript@5.8.3))(yup@1.6.1)
+      cronstrue:
+        specifier: 2.61.0
+        version: 2.61.0
+      dotenv:
+        specifier: 16.6.1
+        version: 16.6.1
+      pinia:
+        specifier: 3.0.3
+        version: 3.0.3(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))
+      primeicons:
+        specifier: 7.0.0
+        version: 7.0.0
+      primevue:
+        specifier: 4.3.6
+        version: 4.3.6(vue@3.5.22(typescript@5.8.3))
+      socket.io-client:
+        specifier: 4.8.1
+        version: 4.8.1(supports-color@5.5.0)
+      tailwind:
+        specifier: 4.0.0
+        version: 4.0.0
+      tailwindcss-primeui:
+        specifier: 0.6.1
+        version: 0.6.1(tailwindcss@4.1.11)
+      uuid:
+        specifier: 11.1.0
+        version: 11.1.0
+      vue:
+        specifier: 3.5.22
+        version: 3.5.22(typescript@5.8.3)
+      vue-router:
+        specifier: 4.5.1
+        version: 4.5.1(vue@3.5.22(typescript@5.8.3))
+      vue-timeago3:
+        specifier: 2.3.2
+        version: 2.3.2(vue@3.5.22(typescript@5.8.3))
+      yup:
+        specifier: 1.6.1
+        version: 1.6.1
+    devDependencies:
+      '@gewis/eslint-config-typescript':
+        specifier: 2.3.0
+        version: 2.3.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      '@gewis/eslint-config-vue':
+        specifier: 2.3.0
+        version: 2.3.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      '@gewis/prettier-config':
+        specifier: 2.2.2
+        version: 2.2.2(@types/eslint@8.56.12)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(prettier@3.8.1)
+      '@tsconfig/node22':
+        specifier: 22.0.2
+        version: 22.0.2
+      '@types/lodash':
+        specifier: 4.17.20
+        version: 4.17.20
+      '@types/uuid':
+        specifier: 10.0.0
+        version: 10.0.0
+      '@vitejs/plugin-vue':
+        specifier: 5.2.4
+        version: 5.2.4(vite@6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0))(vue@3.5.22(typescript@5.8.3))
+      '@vue/tsconfig':
+        specifier: 0.7.0
+        version: 0.7.0(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))
+      autoprefixer:
+        specifier: 10.4.21
+        version: 10.4.21(postcss@8.5.6)
+      eslint:
+        specifier: 9.31.0
+        version: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      lodash:
+        specifier: 4.17.21
+        version: 4.17.21
+      npm-run-all:
+        specifier: 4.1.5
+        version: 4.1.5
+      postcss:
+        specifier: 8.5.6
+        version: 8.5.6
+      sass:
+        specifier: 1.89.2
+        version: 1.89.2
+      tailwindcss:
+        specifier: 4.1.11
+        version: 4.1.11
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      vite:
+        specifier: 6.3.5
+        version: 6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0)
+      vite-plugin-chunk-split:
+        specifier: 0.5.0
+        version: 0.5.0(vite@6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0))
+      vue-tsc:
+        specifier: 2.2.12
+        version: 2.2.12(typescript@5.8.3)
+
   apps/aurora-client:
     dependencies:
       '@fortawesome/fontawesome-svg-core':
@@ -82,7 +200,7 @@ importers:
         version: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-scripts:
         specifier: 5.0.1
-        version: 5.0.1(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(@swc/core@1.15.41)(@types/babel__core@7.20.5)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(lightningcss@1.32.0)(react@19.2.3)(sass@1.93.2)(supports-color@5.5.0)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3))(tsx@4.22.4)(type-fest@0.21.3)(typescript@5.9.3)(yaml@2.9.0)
+        version: 5.0.1(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(@swc/core@1.15.41)(@types/babel__core@7.20.5)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(lightningcss@1.32.0)(react@19.2.3)(sass@1.93.2)(supports-color@5.5.0)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3))(tsx@4.22.4)(type-fest@4.41.0)(typescript@5.9.3)(yaml@2.9.0)
       socket.io:
         specifier: 4.8.3
         version: 4.8.3(supports-color@5.5.0)
@@ -107,7 +225,7 @@ importers:
         version: 2.4.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
       '@gewis/eslint-config-typescript':
         specifier: 2.4.0
-        version: 2.4.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
+        version: 2.4.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
       '@gewis/prettier-config':
         specifier: 2.2.2
         version: 2.2.2(@types/eslint@8.56.12)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)
@@ -1087,10 +1205,19 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.1.2':
+    resolution: {integrity: sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==}
+
+  '@babel/runtime@7.2.0':
+    resolution: {integrity: sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==}
+
   '@babel/runtime@7.29.7':
     resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.3.4':
+    resolution: {integrity: sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==}
+
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
@@ -1221,6 +1348,12 @@ packages:
   '@emotion/unitless@0.10.0':
     resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
 
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.27.7':
     resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
     engines: {node: '>=18'}
@@ -1233,6 +1366,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.27.7':
     resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
     engines: {node: '>=18'}
@@ -1245,6 +1384,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.27.7':
     resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
     engines: {node: '>=18'}
@@ -1257,6 +1402,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.27.7':
     resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
     engines: {node: '>=18'}
@@ -1269,6 +1420,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.27.7':
     resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
     engines: {node: '>=18'}
@@ -1281,6 +1438,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.27.7':
     resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
     engines: {node: '>=18'}
@@ -1293,6 +1456,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.27.7':
     resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
     engines: {node: '>=18'}
@@ -1305,6 +1474,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.27.7':
     resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
     engines: {node: '>=18'}
@@ -1317,6 +1492,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.27.7':
     resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
     engines: {node: '>=18'}
@@ -1329,6 +1510,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.27.7':
     resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
     engines: {node: '>=18'}
@@ -1341,6 +1528,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.27.7':
     resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
     engines: {node: '>=18'}
@@ -1353,6 +1546,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.27.7':
     resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
     engines: {node: '>=18'}
@@ -1365,6 +1564,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.27.7':
     resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
     engines: {node: '>=18'}
@@ -1377,6 +1582,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.27.7':
     resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
     engines: {node: '>=18'}
@@ -1389,6 +1600,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.27.7':
     resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
     engines: {node: '>=18'}
@@ -1401,6 +1618,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.27.7':
     resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
     engines: {node: '>=18'}
@@ -1413,6 +1636,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.27.7':
     resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
     engines: {node: '>=18'}
@@ -1425,6 +1654,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-arm64@0.27.7':
     resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
     engines: {node: '>=18'}
@@ -1437,6 +1672,12 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.27.7':
     resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
     engines: {node: '>=18'}
@@ -1449,6 +1690,12 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-arm64@0.27.7':
     resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
     engines: {node: '>=18'}
@@ -1461,6 +1708,12 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.27.7':
     resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
     engines: {node: '>=18'}
@@ -1473,6 +1726,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@esbuild/openharmony-arm64@0.27.7':
     resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
     engines: {node: '>=18'}
@@ -1485,6 +1744,12 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.27.7':
     resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
     engines: {node: '>=18'}
@@ -1497,6 +1762,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.27.7':
     resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
     engines: {node: '>=18'}
@@ -1509,6 +1780,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.27.7':
     resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
     engines: {node: '>=18'}
@@ -1521,6 +1798,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.27.7':
     resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
     engines: {node: '>=18'}
@@ -1565,10 +1848,18 @@ packages:
     resolution: {integrity: sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/config-helpers@0.3.1':
+    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/config-helpers@0.4.2':
     resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/core@0.15.2':
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/core@0.17.0':
     resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1581,10 +1872,18 @@ packages:
     resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/js@9.22.0':
+    resolution: {integrity: sha512-vLFajx9o8d1/oL2ZkpMYbkLv8nDB6yaIwFNt7nI4+I80U/z03SxmfOMsLbvWr3p7C+Wnoh//aOu2pQW8cS0HCQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/js@9.23.0':
     resolution: {integrity: sha512-35MJ8vCPU0ZMxo7zfev2pypqTwWTofFZO6m4KAtdoFhRpLJUpHTZZ+KB3C7Hb1d7bULYwO4lJXGCi5Se+8OMbw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/js@9.31.0':
+    resolution: {integrity: sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/js@9.39.2':
     resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1593,6 +1892,10 @@ packages:
     resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@eslint/plugin-kit@0.3.5':
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/plugin-kit@0.4.1':
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1627,17 +1930,30 @@ packages:
     peerDependencies:
       eslint: '*'
 
+  '@gewis/eslint-config-typescript@2.3.0':
+    resolution: {integrity: sha512-zY6cunsYvYax3OUS0nTME06GowgUJOfXy5D12PQMDnfLt+H3yQusTSDYwmA2bCAlqFa+VGBPaq9lxzCAo7qDug==}
+    peerDependencies:
+      eslint: '*'
+
   '@gewis/eslint-config-typescript@2.4.0':
     resolution: {integrity: sha512-OWi+7BQDUJgmbNSHygUN8We0RRx5EpclbZNAjUiPNedFdE5GpkVa6zSYrdxFzbd/Rwv3vp0pc0pMjt9M0S+/mw==}
     peerDependencies:
       eslint: '*'
 
+  '@gewis/eslint-config-vue@2.3.0':
+    resolution: {integrity: sha512-1Ug9cvo6ds5h6GFgHCTw5qlo9HksY3vASU+AihCsHuJni04GUXwrBlZqt28OBak+kd1BCICT/kZgCL0z6hFcNQ==}
+    peerDependencies:
+      eslint: '*'
+
   '@gewis/prettier-config@2.2.2':
     resolution: {integrity: sha512-o13UU0LtpCQoqH2icYlGAmQ91is34UDHPPOvYHI8khscru4eukEQIziKyv+RsBneyVn3+xdfTTQ4goav0VIEIA==}
     peerDependencies:
       eslint: '*'
       prettier: '*'
 
+  '@gewis/splash@2.4.0':
+    resolution: {integrity: sha512-MdxN/hF2nZSf7OMY3fUAYArMjz+3tav9FNQ7ukEFmJZyDu/eMs/h6n6D3MYCND5yG9WmYJ6DYJq8VU0AWAV1/Q==}
+
   '@gewis/sudosos-client@1.34.0':
     resolution: {integrity: sha512-vEf5Tx6G8gfP1OqRF91ZBYlBsG/rKddkIVEHN95uV1kkjrb6I1YSytWFJxVtwmiwR366wiR7dmQFCnhOnWbwOw==}
 
@@ -1817,6 +2133,10 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@isaacs/fs-minipass@4.0.1':
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
+
   '@istanbuljs/load-nyc-config@1.1.0':
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -2091,6 +2411,30 @@ packages:
       webpack-plugin-serve:
         optional: true
 
+  '@primeuix/styled@0.7.4':
+    resolution: {integrity: sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==}
+    engines: {node: '>=12.11.0'}
+
+  '@primeuix/styles@1.2.5':
+    resolution: {integrity: sha512-nypFRct/oaaBZqP4jinT0puW8ZIfs4u+l/vqUFmJEPU332fl5ePj6DoOpQgTLzo3OfmvSmz5a5/5b4OJJmmi7Q==}
+
+  '@primeuix/themes@1.2.0':
+    resolution: {integrity: sha512-kRqdOvlBGf3vc49MKZWosVbU3HIdkBgc6hTwAmkKs7Vnj9qqWRyVymkOtYS/kV5kuftNeDihHXHEa+skg+SFpg==}
+
+  '@primeuix/utils@0.6.4':
+    resolution: {integrity: sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==}
+    engines: {node: '>=12.11.0'}
+
+  '@primevue/core@4.3.6':
+    resolution: {integrity: sha512-ZuP0gqpEbIkpz9Em/O4Du+fRj0qyOl2YYuxhlELAtRg8+YkMsSJDd2ai2GM623sYRWOIwMr5rWevZGB1WqukzQ==}
+    engines: {node: '>=12.11.0'}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@primevue/icons@4.3.6':
+    resolution: {integrity: sha512-QVFmfikMpo4/DObMSbB5kS8MH1OoQrx8N9prEZaMvfFzD3hixxK24l2VrcS5x5/0NnP3szwZwTCmEAutCygX6A==}
+    engines: {node: '>=12.11.0'}
+
   '@rolldown/binding-android-arm64@1.0.3':
     resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2614,39 +2958,79 @@ packages:
   '@swc/types@0.1.27':
     resolution: {integrity: sha512-K6h3iUlqeM946U4sXFYeahefR1YBbXJvko+hv8WS8/0BNJ4OHiHRywMnQUJCqkR7Y9+hqQ1TvEpiKqUhz7NEFg==}
 
+  '@tailwindcss/node@4.1.14':
+    resolution: {integrity: sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==}
+
   '@tailwindcss/node@4.1.18':
     resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
 
+  '@tailwindcss/oxide-android-arm64@4.1.14':
+    resolution: {integrity: sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
   '@tailwindcss/oxide-android-arm64@4.1.18':
     resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
+  '@tailwindcss/oxide-darwin-arm64@4.1.14':
+    resolution: {integrity: sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@tailwindcss/oxide-darwin-arm64@4.1.18':
     resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
+  '@tailwindcss/oxide-darwin-x64@4.1.14':
+    resolution: {integrity: sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
   '@tailwindcss/oxide-darwin-x64@4.1.18':
     resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
+  '@tailwindcss/oxide-freebsd-x64@4.1.14':
+    resolution: {integrity: sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@tailwindcss/oxide-freebsd-x64@4.1.18':
     resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
+    resolution: {integrity: sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
+    resolution: {integrity: sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
     engines: {node: '>= 10'}
@@ -2654,6 +3038,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
+    resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
@@ -2661,6 +3052,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
+    resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
@@ -2668,6 +3066,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
+    resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
@@ -2675,6 +3080,18 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@tailwindcss/oxide-wasm32-wasi@4.1.14':
+    resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
     engines: {node: '>=14.0.0'}
@@ -2687,22 +3104,41 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
+    resolution: {integrity: sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
+    resolution: {integrity: sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
   '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
+  '@tailwindcss/oxide@4.1.14':
+    resolution: {integrity: sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==}
+    engines: {node: '>= 10'}
+
   '@tailwindcss/oxide@4.1.18':
     resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
     engines: {node: '>= 10'}
 
+  '@tailwindcss/postcss@4.1.14':
+    resolution: {integrity: sha512-BdMjIxy7HUNThK87C7BC8I1rE8BVUsfNQSI5siQ4JK3iIa3w0XyVvVL9SXLWO//CtYTcp1v7zci0fYwJOjB+Zg==}
+
   '@tailwindcss/postcss@4.1.18':
     resolution: {integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==}
 
@@ -2725,6 +3161,9 @@ packages:
   '@tsconfig/node16@1.0.4':
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
+  '@tsconfig/node22@22.0.2':
+    resolution: {integrity: sha512-Kmwj4u8sDRDrMYRoN9FDEcXD8UpBSaPQQ24Gz+Gamqfm7xxn+GBR7ge/Z7pK8OXNGyUzbSwJj+TH6B+DS/epyA==}
+
   '@tsoa/cli@7.0.0-alpha.0':
     resolution: {integrity: sha512-fCBWv6F20qrpwFh5X+vaZs38Bh/5cVwKPhvG/uArR+crZgEowyNl76unLCmYdvycES9Y6g/TKFLagG8qojSNuQ==}
     engines: {node: '>=18.0.0', yarn: '>=1.9.4'}
@@ -2886,6 +3325,9 @@ packages:
   '@types/koa@2.15.2':
     resolution: {integrity: sha512-CB+iyjjh1uS5N6/CKwXvw0qA7USMS2WVc4Tjf660yCjhdvqzNr8gdFcIawB41zGGptOQ+d1fnpaQWIIUXYxR3w==}
 
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
   '@types/methods@1.1.4':
     resolution: {integrity: sha512-ymXWVrDiCxTBE3+RIrrP533E70eA+9qu7zdWoHuOmGujkYtzf4HQF96b8nwHLqhuf4ykX61IGRIB38CC6/sImQ==}
 
@@ -2913,6 +3355,9 @@ packages:
   '@types/node@25.0.10':
     resolution: {integrity: sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==}
 
+  '@types/node@25.9.3':
+    resolution: {integrity: sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==}
+
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
@@ -2999,6 +3444,9 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
@@ -3313,12 +3761,24 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vee-validate/yup@4.15.1':
+    resolution: {integrity: sha512-+u6lI1IZftjHphj+mTCPJRruwBBwv1IKKCI1EFm6ipQroAPibkS5M8UNX+yeVYG5++ix6m1rsv4/SJvJJQTWJg==}
+    peerDependencies:
+      yup: ^1.3.2
+
   '@vitejs/plugin-react-swc@4.2.2':
     resolution: {integrity: sha512-x+rE6tsxq/gxrEJN3Nv3dIV60lFflPj94c90b+NNo6n1QV1QQUTLoL0MpaOVasUZ0zqVBn7ead1B5ecx1JAGfA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       vite: ^4 || ^5 || ^6 || ^7
 
+  '@vitejs/plugin-vue@5.2.4':
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
+
   '@vitest/expect@4.1.9':
     resolution: {integrity: sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==}
 
@@ -3348,44 +3808,136 @@ packages:
   '@vitest/utils@4.1.9':
     resolution: {integrity: sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==}
 
-  '@vue/eslint-config-prettier@10.2.0':
-    resolution: {integrity: sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==}
-    peerDependencies:
-      eslint: '>= 8.21.0'
-      prettier: '>= 3.0.0'
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
 
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
 
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+  '@vue/compiler-core@3.5.22':
+    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+  '@vue/compiler-core@3.5.38':
+    resolution: {integrity: sha512-s99aGxWYig9ErHbct27KXEGhrBYlRI6c4MwAgXErOAbX9xiW37/uMa+XUDO69zLz83dng8UUZ70CTOJrLrYrEQ==}
 
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+  '@vue/compiler-dom@3.5.22':
+    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
 
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+  '@vue/compiler-dom@3.5.38':
+    resolution: {integrity: sha512-JTqp25l8aFfJYF7/KmsXZjAxJz7T+SjmTJLoXVjHtc2BrSgSiW2n9Aem/cWq1OPe68A8JL06B3eVdhlP0H4TVw==}
 
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+  '@vue/compiler-sfc@3.5.22':
+    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
 
-  '@webassemblyjs/ieee754@1.13.2':
-    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+  '@vue/compiler-ssr@3.5.22':
+    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
 
-  '@webassemblyjs/leb128@1.13.2':
-    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
-  '@webassemblyjs/utf8@1.13.2':
-    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@webassemblyjs/wasm-edit@1.14.1':
-    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
+  '@vue/eslint-config-prettier@10.2.0':
+    resolution: {integrity: sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==}
+    peerDependencies:
+      eslint: '>= 8.21.0'
+      prettier: '>= 3.0.0'
+
+  '@vue/eslint-config-typescript@14.8.0':
+    resolution: {integrity: sha512-yIquzhXH7ZsrwSSm+rYvoGCRY6wcuF4qBi76e0l7hHLq7YU0f9aC+RcR5fL+XJNfmBZxgX5cVl4sppt4x7ZCBg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.10.0 || ^10.0.0
+      eslint-plugin-vue: ^9.28.0 || ^10.0.0
+      typescript: '>=4.8.4'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/reactivity@3.5.22':
+    resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
+
+  '@vue/runtime-core@3.5.22':
+    resolution: {integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==}
+
+  '@vue/runtime-dom@3.5.22':
+    resolution: {integrity: sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==}
+
+  '@vue/server-renderer@3.5.22':
+    resolution: {integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==}
+    peerDependencies:
+      vue: 3.5.22
+
+  '@vue/shared@3.5.22':
+    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+
+  '@vue/shared@3.5.38':
+    resolution: {integrity: sha512-FTW0AFZNaK5/mOqvGBwVfUlNLU38TiQn4+DQgIFUnrBBJQ1crMJ82yeGQLV5jyKFsO8yRukpbuP7x+nRbH6aug==}
+
+  '@vue/tsconfig@0.7.0':
+    resolution: {integrity: sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==}
+    peerDependencies:
+      typescript: 5.x
+      vue: ^3.4.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vue:
+        optional: true
+
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+
+  '@webassemblyjs/ieee754@1.13.2':
+    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+
+  '@webassemblyjs/leb128@1.13.2':
+    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+
+  '@webassemblyjs/utf8@1.13.2':
+    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
 
   '@webassemblyjs/wasm-gen@1.14.1':
     resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
@@ -3497,12 +4049,22 @@ packages:
     peerDependencies:
       ajv: ^8.8.2
 
+  ajv@6.10.0:
+    resolution: {integrity: sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==}
+
   ajv@6.15.0:
     resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
 
   ajv@8.20.0:
     resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
 
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+
+  amqplib@0.5.2:
+    resolution: {integrity: sha512-l9mCs6LbydtHqRniRwYkKdqxVa6XMz3Vw1fh+2gJaaVgTM6Jk3o8RccAKWKtlhT1US5sWrFh+KKxsVUALURSIA==}
+    engines: {node: '>=0.8 <=9'}
+
   ansi-escapes@4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
@@ -3556,6 +4118,10 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  app-root-path@2.1.0:
+    resolution: {integrity: sha512-z5BqVjscbjmJBybKlICogJR2jCr2q/Ixu7Pvui5D4y97i7FLsJlvEG9XOR/KJRlkxxZz7UaaS2TMwQh1dRJ2dA==}
+    engines: {node: '>= 4.0.0'}
+
   app-root-path@3.1.0:
     resolution: {integrity: sha512-biN3PwB2gUtjaYy/isrU3aNWI5w+fAfvHkSvCKeQGxhmYpwKFUxudR3Yya+KqVRHBmEDYh+/lTozYCFbmzX4nA==}
     engines: {node: '>= 6.0.0'}
@@ -3636,6 +4202,9 @@ packages:
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
+  asn1@0.2.3:
+    resolution: {integrity: sha512-6i37w/+EhlWlGUJff3T/Q8u1RGmP5wgbiwYnOnbOqvtrPxT63/sYFyP9RcpxtxGymtfA075IvmOnL7ycNOWl3w==}
+
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -3647,9 +4216,15 @@ packages:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
+  async-limiter@1.0.1:
+    resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==}
+
   async-lock@1.4.1:
     resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}
 
+  async-retry@1.2.3:
+    resolution: {integrity: sha512-tfDb02Th6CE6pJUF2gjW5ZVjsgwlucVXOEQMvEX9JgSJMs9gAX+Nz3xRuJBKuUYjTSYORqvDBORdAQ3LU59g7Q==}
+
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
@@ -3664,15 +4239,15 @@ packages:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
 
-  autoprefixer@10.4.23:
-    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
 
-  autoprefixer@10.5.0:
-    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
+  autoprefixer@10.4.23:
+    resolution: {integrity: sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -3764,6 +4339,9 @@ packages:
   babel-preset-react-app@10.1.0:
     resolution: {integrity: sha512-f9B1xMdnkCIqe+2dHrJsoQFRz7reChaAHE/65SdaykPklQqhme2WaC08oD3is77x9ff98/9EazAKFDZv5rFEQg==}
 
+  babel-runtime@6.26.0:
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -3783,6 +4361,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  basic-auth@2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+
   batch@0.6.1:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
 
@@ -3800,12 +4382,23 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
+  bitsyntax@0.0.4:
+    resolution: {integrity: sha512-Pav3HSZXD2NLQOWfJldY3bpJLt8+HS2nUo5Z1bLLmHg2vCE/cM1qfEvNjlYo7GgYQPneNr715Bh42i01ZHZPvw==}
+    engines: {node: '>=0.6'}
+
   bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
 
   bluebird@3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
 
+  body-parser@1.18.3:
+    resolution: {integrity: sha512-YQyoqQG3sO8iCmf8+hyVpgHHOv0/hCEFiS4zTGUwTA1HjAFX66wRcNQrVCeJq9pgESMRvUAOvSil5MJlmccuKQ==}
+    engines: {node: '>= 0.8'}
+
   body-parser@1.20.5:
     resolution: {integrity: sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -3845,9 +4438,15 @@ packages:
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  buffer-more-ints@0.0.2:
+    resolution: {integrity: sha512-PDgX2QJgUc5+Jb2xAoBFP5MxhtVUmZHR33ak+m/SDxRdCrbnX1BggRIaxiW7ImwfmO4iJeCQKN18ToSXWGjYkA==}
+
   buffer@5.7.1:
     resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
 
@@ -3866,6 +4465,10 @@ packages:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
 
+  bytes@3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    engines: {node: '>= 0.8'}
+
   bytes@3.1.2:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
@@ -3930,6 +4533,10 @@ packages:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
 
+  chalk@2.4.1:
+    resolution: {integrity: sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==}
+    engines: {node: '>=4'}
+
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -3968,6 +4575,10 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
+  chownr@3.0.0:
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
+
   chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
@@ -4070,6 +4681,10 @@ packages:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
 
+  commands-events@1.0.4:
+    resolution: {integrity: sha512-HdP/+1Anoc7z+6L2h7nd4Imz54+LW+BjMGt30riBZrZ3ZeP/8el93wD8Jj8ltAaqVslqNgjX6qlhSBJwuDSmpg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -4077,6 +4692,10 @@ packages:
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
+  comparejs@1.0.0:
+    resolution: {integrity: sha512-Ue/Zd9aOucHzHXwaCe4yeHR7jypp7TKrIBZ5yls35nPNiVXlW14npmNVKM1ZaLlQTKZ6/4ewA//gYKHHIwCpOw==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   component-emitter@1.3.1:
     resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==}
 
@@ -4084,6 +4703,10 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
 
+  compression@1.7.3:
+    resolution: {integrity: sha512-HSjyBG5N1Nnz7tF2+O7A9XUhyjru71/fwgNb7oIsEVHR0WShfs2tIS/EySLgiTe98aOK18YDlMXpzjCXY/n9mg==}
+    engines: {node: '>= 0.8.0'}
+
   compression@1.8.1:
     resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
     engines: {node: '>= 0.8.0'}
@@ -4122,6 +4745,10 @@ packages:
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
+  content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -4130,6 +4757,10 @@ packages:
     resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
     engines: {node: '>=18'}
 
+  content-type@1.0.4:
+    resolution: {integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==}
+    engines: {node: '>= 0.6'}
+
   content-type@1.0.5:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
@@ -4158,6 +4789,10 @@ packages:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
 
+  cookie@0.3.1:
+    resolution: {integrity: sha512-+IJOX0OqlHCszo2mBUq+SrEbCj6w7Kpffqx60zYbPTFaO4+yYgRjHwcZNpWvaTylDHaV7PPmBHzSecZiMhtPgw==}
+    engines: {node: '>= 0.6'}
+
   cookie@0.7.2:
     resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
     engines: {node: '>= 0.6'}
@@ -4169,6 +4804,10 @@ packages:
   cookiejar@2.1.4:
     resolution: {integrity: sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==}
 
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
   copy-to-clipboard@3.3.3:
     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 
@@ -4178,12 +4817,20 @@ packages:
   core-js-pure@3.49.0:
     resolution: {integrity: sha512-XM4RFka59xATyJv/cS3O3Kml72hQXUeGRuuTmMYFxwzc9/7C8OYTaIR/Ji+Yt8DXzsFLNhat15cE/JP15HrCgw==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-js@3.49.0:
     resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
   cors@2.8.6:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
@@ -4208,6 +4855,15 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  cronstrue@2.61.0:
+    resolution: {integrity: sha512-ootN5bvXbIQI9rW94+QsXN5eROtXWwew6NkdGxIRpS/UFWRggL0G5Al7a9GTBFEsuvVhJ2K3CntIIVt7L2ILhA==}
+    deprecated: Non-backwards compatible Breaking changes
+    hasBin: true
+
+  cross-spawn@6.0.6:
+    resolution: {integrity: sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==}
+    engines: {node: '>=4.8'}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -4216,6 +4872,10 @@ packages:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
 
+  crypto2@2.0.0:
+    resolution: {integrity: sha512-jdXdAgdILldLOF53md25FiQ6ybj2kUFTiRjs7msKTUoZrzgT/M1FPX5dYGJjbbwFls+RJIiZxNTC02DE/8y0ZQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   css-blank-pseudo@3.0.3:
     resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==}
     engines: {node: ^12 || ^14 || >=16}
@@ -4371,12 +5031,23 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  datasette@1.0.1:
+    resolution: {integrity: sha512-aJdlCBToEJUP4M57r67r4V6tltwGKa3qetnjpBtXYIlqbX9tM9jsoDMxb4xd9AGjpp3282oHRmqI5Z8TVAU0Mg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+
   dateformat@4.6.3:
     resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
 
   dayjs@1.11.21:
     resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -4393,6 +5064,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -4484,6 +5164,9 @@ packages:
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
+  destroy@1.0.4:
+    resolution: {integrity: sha512-3NdhDuEXnfun/z7x9GOElY49LoqVHoGScmOKwmxhsS8N5Y+Z8KyPPDnaSzqWgYt/ji4mqwfTS34Htrk0zPIXVg==}
+
   destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -4581,6 +5264,10 @@ packages:
     resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
     engines: {node: '>=12'}
 
+  draht@1.0.1:
+    resolution: {integrity: sha512-yNNHL864dniNmIE9ZKD++mKypiAUAvVZtyV0QrbXH/ak3ebzFqo5xsmRBRqV8pZVhImOSBiyq500Wcmrf44zAg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -4591,6 +5278,9 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -4623,6 +5313,10 @@ packages:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
 
+  encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
@@ -4655,6 +5349,10 @@ packages:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
 
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -4691,6 +5389,9 @@ packages:
     resolution: {integrity: sha512-0PuBxFi+4uPanB97iDxCLWuHeYud2FALrw5HFZGtAF38UpJDbDC8frwp2cnDyae692CQ0dou60UwWfhgsa4U/g==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
   es-module-lexer@2.1.0:
     resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
 
@@ -4710,6 +5411,11 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   esbuild@0.27.7:
     resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
     engines: {node: '>=18'}
@@ -4872,10 +5578,20 @@ packages:
     peerDependencies:
       eslint: ^7.5.0 || ^8.0.0
 
+  eslint-plugin-vue@9.33.0:
+    resolution: {integrity: sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
 
+  eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   eslint-scope@8.4.0:
     resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4903,6 +5619,16 @@ packages:
       eslint: ^7.0.0 || ^8.0.0
       webpack: ^5.0.0
 
+  eslint@9.31.0:
+    resolution: {integrity: sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
   eslint@9.39.2:
     resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4917,6 +5643,10 @@ packages:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   esprima@1.2.5:
     resolution: {integrity: sha512-S9VbPDU0adFErpDai3qDkjq8+G05ONtKzcyNrPKg/ZKa+tf879nX2KexNU95b31UoTJjRLInNBHHHjFPoCd7lQ==}
     engines: {node: '>=0.4.0'}
@@ -4964,6 +5694,9 @@ packages:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
 
+  eventemitter2@5.0.1:
+    resolution: {integrity: sha512-5EM1GHXycJBS6mauYAbVKT1cVs7POKWb2NXD4Vyt8dDqeZa7LaDK1/sjtL+Zb0lzTpSNil4596Dyu97hz37QLg==}
+
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
@@ -4998,6 +5731,10 @@ packages:
     resolution: {integrity: sha512-0csaMkGq+vaiZTmSMMGkfdCOabYv192VbytFypcvI0MANrp+4i/7yEkJ0sbAEhycQjntaKGzYfjfXQyVb7BHMA==}
     engines: {node: '>= 0.8.0'}
 
+  express@4.16.4:
+    resolution: {integrity: sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==}
+    engines: {node: '>= 0.10.0'}
+
   express@4.22.2:
     resolution: {integrity: sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==}
     engines: {node: '>= 0.10.0'}
@@ -5012,6 +5749,9 @@ packages:
   fast-copy@4.0.3:
     resolution: {integrity: sha512-58apWr0GUiDFM8+3afrO6eYwJBn9ZAhDOzG3L+/9llab/haCARS2UIfffmOurYLwbgDRs8n0rfr6qAAPEAuAQw==}
 
+  fast-deep-equal@2.0.1:
+    resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -5087,6 +5827,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@1.1.1:
+    resolution: {integrity: sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==}
+    engines: {node: '>= 0.8'}
+
   finalhandler@1.3.2:
     resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
     engines: {node: '>= 0.8'}
@@ -5099,6 +5843,9 @@ packages:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
     engines: {node: '>=8'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   find-up@3.0.0:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
@@ -5111,6 +5858,11 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
+  flaschenpost@1.1.3:
+    resolution: {integrity: sha512-1VAYPvDsVBGFJyUrOa/6clnJwZYC3qVq9nJLcypy6lvaaNbo1wOQiH8HQ+4Fw/k51pVG7JHzSf5epb8lmIW86g==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+    hasBin: true
+
   flat-cache@4.0.1:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
@@ -5157,6 +5909,10 @@ packages:
     resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
     engines: {node: '>= 6'}
 
+  formats@1.0.0:
+    resolution: {integrity: sha512-For0Y8egwEK96JgJo4NONErPhtl7H2QzeB2NYGmzeGeJ8a1JZqPgLYOtM3oJRCYhmgsdDFd6KGRYyfe37XY4Yg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   formidable@3.5.4:
     resolution: {integrity: sha512-YikH+7CUTOtP44ZTnUhR7Ic2UASBPOqmaRkRKxRbywPTe5VxF7RRCck4af9wutiZ/QKM5nME9Bie2fFaPz5Gug==}
     engines: {node: '>=14.0.0'}
@@ -5165,6 +5921,9 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
@@ -5315,6 +6074,10 @@ packages:
     resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
     engines: {node: '>=6'}
 
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -5394,6 +6157,10 @@ packages:
   has-unicode@2.0.1:
     resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
 
+  hase@2.0.0:
+    resolution: {integrity: sha512-L83pBR/oZvQQNjv4kw9aUpTqBxERPiY7B42jsmkt1VDeUaRVhYkEIKzkCqrppjtxHe2EZqzZJzuhMXsWsxYIsw==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   hasown@2.0.4:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
@@ -5405,10 +6172,16 @@ packages:
   help-me@5.0.0:
     resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
 
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
   hoopy@0.1.4:
     resolution: {integrity: sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==}
     engines: {node: '>= 6.0.0'}
 
+  hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+
   hpack.js@2.1.6:
     resolution: {integrity: sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==}
 
@@ -5448,6 +6221,10 @@ packages:
   http-deceiver@1.2.7:
     resolution: {integrity: sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==}
 
+  http-errors@1.6.3:
+    resolution: {integrity: sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==}
+    engines: {node: '>= 0.6'}
+
   http-errors@1.8.1:
     resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
     engines: {node: '>= 0.6'}
@@ -5495,6 +6272,10 @@ packages:
   hyphenate-style-name@1.1.0:
     resolution: {integrity: sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==}
 
+  iconv-lite@0.4.23:
+    resolution: {integrity: sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==}
+    engines: {node: '>=0.10.0'}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -5549,6 +6330,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -5564,6 +6348,9 @@ packages:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
+  inherits@2.0.3:
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
+
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -5780,6 +6567,10 @@ packages:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
 
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
   is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -5788,6 +6579,9 @@ packages:
     resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
     engines: {node: '>=16'}
 
+  isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+
   isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -6044,6 +6838,13 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
+  json-lines@1.0.0:
+    resolution: {integrity: sha512-ytuLZb4RBQb3bTRsG/QBenyIo5oHLpjeCVph3s2NnoAsZE9K6h+uR+OWpEOWV1UeHdX63tYctGppBpGAc+JNMA==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  json-parse-better-errors@1.0.2:
+    resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
+
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
@@ -6075,10 +6876,20 @@ packages:
     resolution: {integrity: sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==}
     engines: {node: '>=0.10.0'}
 
+  jsonwebtoken@8.5.0:
+    resolution: {integrity: sha512-IqEycp0znWHNA11TpYi77bVgyBO/pGESDh7Ajhas+u0ttkGkKYIIAjniL4Bw5+oVejVF+SYkaI7XKfwCCyeTuA==}
+    engines: {node: '>=4', npm: '>=1.4.28'}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  jwa@1.4.2:
+    resolution: {integrity: sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==}
+
+  jws@3.2.3:
+    resolution: {integrity: sha512-byiJ0FLRdLdSVSReO/U4E7RoEyOCKnEnEPMjq3HxWtvzLsV08/i5RQKsFVNkCldrCaPr2vDNAOMsfs8T/Hze7g==}
+
   jwt-decode@4.0.0:
     resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
     engines: {node: '>=18'}
@@ -6128,6 +6939,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  lightningcss-darwin-arm64@1.30.1:
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-arm64@1.30.2:
     resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
     engines: {node: '>= 12.0.0'}
@@ -6140,6 +6957,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.30.1:
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.30.2:
     resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
     engines: {node: '>= 12.0.0'}
@@ -6152,6 +6975,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-freebsd-x64@1.30.1:
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-freebsd-x64@1.30.2:
     resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
     engines: {node: '>= 12.0.0'}
@@ -6164,6 +6993,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm-gnueabihf@1.30.2:
     resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
     engines: {node: '>= 12.0.0'}
@@ -6176,6 +7011,13 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.30.1:
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   lightningcss-linux-arm64-gnu@1.30.2:
     resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
     engines: {node: '>= 12.0.0'}
@@ -6190,6 +7032,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  lightningcss-linux-arm64-musl@1.30.1:
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
@@ -6204,6 +7053,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  lightningcss-linux-x64-gnu@1.30.1:
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
@@ -6218,6 +7074,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  lightningcss-linux-x64-musl@1.30.1:
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
@@ -6232,6 +7095,12 @@ packages:
     os: [linux]
     libc: [musl]
 
+  lightningcss-win32-arm64-msvc@1.30.1:
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
     engines: {node: '>= 12.0.0'}
@@ -6244,6 +7113,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.30.1:
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.30.2:
     resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
     engines: {node: '>= 12.0.0'}
@@ -6256,6 +7131,10 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  lightningcss@1.30.1:
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
+
   lightningcss@1.30.2:
     resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
     engines: {node: '>= 12.0.0'}
@@ -6272,6 +7151,10 @@ packages:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
+  limes@2.0.0:
+    resolution: {integrity: sha512-evWD0pnTgPX7QueaSoJl5JBUL30T1ZVzo34ke97tIKmeagqhBTYK/JkKL0vtG3MpNApw8ZY9TlbybfwEz9knBA==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -6284,6 +7167,10 @@ packages:
     resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
     engines: {node: '>=20.0.0'}
 
+  load-json-file@4.0.0:
+    resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
+    engines: {node: '>=4'}
+
   loader-runner@4.3.2:
     resolution: {integrity: sha512-DFEqQ3ihfS9blba08cLfYf1NRAIEm+dDjic073DRDc3/JspI/8wYmtDsHwd3+4hwvdxSK7PGaElfTmm0awWJ4w==}
     engines: {node: '>=6.11.5'}
@@ -6311,18 +7198,48 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
   lodash.sortby@4.7.0:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
 
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
+  lodash@4.17.11:
+    resolution: {integrity: sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  lodash@4.17.5:
+    resolution: {integrity: sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==}
+
   lodash@4.18.1:
     resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
 
@@ -6354,6 +7271,10 @@ packages:
     resolution: {integrity: sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA==}
     engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
 
+  lusca@1.6.1:
+    resolution: {integrity: sha512-+JzvUMH/rsE/4XfHdDOl70bip0beRcHSviYATQM0vtls59uVtdn1JMu4iD7ZShBpAmFG8EnaA+PrYG9sECMIOQ==}
+    engines: {node: '>=0.8.x'}
+
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
@@ -6400,10 +7321,17 @@ packages:
     resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
     engines: {node: '>= 4.0.0'}
 
+  memorystream@0.3.1:
+    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
+    engines: {node: '>= 0.10.0'}
+
   merge-anything@5.1.7:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
     engines: {node: '>=12.13'}
 
+  merge-descriptors@1.0.1:
+    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
+
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
@@ -6442,6 +7370,10 @@ packages:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
 
+  mime@1.4.1:
+    resolution: {integrity: sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==}
+    hasBin: true
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -6527,6 +7459,13 @@ packages:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
 
+  minizlib@3.1.0:
+    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
+    engines: {node: '>= 18'}
+
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
@@ -6542,6 +7481,13 @@ packages:
   mlly@1.8.2:
     resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
 
+  moment@2.22.2:
+    resolution: {integrity: sha512-LRvkBHaJGnrcWvqsElsOhHCzj8mU39wLx5pQ0pc6s153GynCTsPdGdqsVNKAQD9sKnWj11iF7TZx9fpLwdD3fw==}
+
+  morgan@1.9.1:
+    resolution: {integrity: sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==}
+    engines: {node: '>= 0.8.0'}
+
   motion-dom@12.40.0:
     resolution: {integrity: sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==}
 
@@ -6554,6 +7500,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   multer@2.0.2:
     resolution: {integrity: sha512-u7f2xaZ/UG8oLXHvtF/oWTRvT44p9ecwBBqTwgJVq0+4BW1g8OW01TyMEGWBHbyMOYVHXslaut7qEQ1meATXgw==}
     engines: {node: '>= 10.16.0'}
@@ -6617,9 +7566,15 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
+  nice-try@1.0.5:
+    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
+
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
+  nocache@2.0.0:
+    resolution: {integrity: sha512-YdKcy2x0dDwOh+8BEuHvA+mnOKAhmMQDgKBOCUGaLpewdmsRYguYZSom3yA+/OrE61O/q+NMQANnun65xpI1Hw==}
+
   node-abi@3.92.0:
     resolution: {integrity: sha512-KdHvFWZjEKDf0cakgFjebl371GPsISX2oZHcuyKqM7DtogIsHrqKeLTo8wBHxaXRAQlY2PsPlZmfo+9ZCxEREQ==}
     engines: {node: '>=10'}
@@ -6654,6 +7609,13 @@ packages:
     resolution: {integrity: sha512-1uz8041X6LoI6ZSdZacM9lVY28vuzDlSKitnpbSNK0RfKoIJkX29NBPVEFXhnuSuEOA9Ww0xnPJ+ILWbGAv8DA==}
     engines: {node: '>=18'}
 
+  node-rsa@0.4.2:
+    resolution: {integrity: sha512-Bvso6Zi9LY4otIZefYrscsUpo2mUpiAVIEmSZV2q41sP8tHZoert3Yu6zv4f/RXJqMNZQKCtnhDugIuCma23YA==}
+
+  node-statsd@0.1.1:
+    resolution: {integrity: sha512-QDf6R8VXF56QVe1boek8an/Rb3rSNaxoFWb7Elpsv2m1+Noua1yy0F1FpKpK5VluF8oymWM4w764A4KsYL4pDg==}
+    engines: {node: '>=0.1.97'}
+
   nodemon@3.1.11:
     resolution: {integrity: sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==}
     engines: {node: '>=10'}
@@ -6664,14 +7626,26 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
   normalize-url@6.1.0:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
+  npm-run-all@4.1.5:
+    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
+    engines: {node: '>= 4'}
+    hasBin: true
+
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -6749,10 +7723,18 @@ packages:
     resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==}
     engines: {node: '>=14.0.0'}
 
+  on-finished@2.3.0:
+    resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
+    engines: {node: '>= 0.8'}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
 
+  on-headers@1.0.2:
+    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
+    engines: {node: '>= 0.8'}
+
   on-headers@1.1.0:
     resolution: {integrity: sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==}
     engines: {node: '>= 0.8'}
@@ -6830,6 +7812,10 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-json@4.0.0:
+    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
+    engines: {node: '>=4'}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -6841,6 +7827,10 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
+  partof@1.0.0:
+    resolution: {integrity: sha512-+TXdhKCySpJDynCxgAPoGVyAkiK3QPusQ63/BdU5t68QcYzyU6zkP/T7F3gkMQBVUYqdWEADKa6Kx5zg8QIKrg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 
@@ -6856,6 +7846,9 @@ packages:
     resolution: {integrity: sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==}
     engines: {node: '>= 0.4.0'}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@3.0.0:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
@@ -6868,6 +7861,10 @@ packages:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
 
+  path-key@2.0.1:
+    resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==}
+    engines: {node: '>=4'}
+
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -6882,9 +7879,16 @@ packages:
   path-to-regexp@0.1.13:
     resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
 
+  path-to-regexp@0.1.7:
+    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
+
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
+  path-type@3.0.0:
+    resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
+    engines: {node: '>=4'}
+
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -6922,6 +7926,11 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
+  pidtree@0.3.1:
+    resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   pidtree@0.6.1:
     resolution: {integrity: sha512-e0F9AOF1JMrCfBsyJOwU9lNvQ0WtXTq0j/4jk0BQ5JSI9VAybPXmDpPRw/2FQ3e5d3ZFN1mLh7jW99m/jjaptw==}
     engines: {node: '>=0.10'}
@@ -6931,6 +7940,19 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pify@3.0.0:
+    resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
+    engines: {node: '>=4'}
+
+  pinia@3.0.3:
+    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   pino-abstract-transport@3.0.0:
     resolution: {integrity: sha512-wlfUczU+n7Hy/Ha5j9a/gZNy7We5+cXp8YL+X+PG8S0KXxw7n/JXA3c46Y0zQznIJ83URJiwy7Lh56WLokNuxg==}
 
@@ -7449,6 +8471,13 @@ packages:
     resolution: {integrity: sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==}
     engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
 
+  primeicons@7.0.0:
+    resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
+
+  primevue@4.3.6:
+    resolution: {integrity: sha512-Wwg2dH6pBmOdkj9L/OnrCQf9AKPHfY5CcfnDyWeh0tNlR+XjYKGl8qvMdJOvGO9jjg6UdsX5MSaU8vDDsSG+sg==}
+    engines: {node: '>=12.11.0'}
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -7459,6 +8488,10 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  processenv@1.1.0:
+    resolution: {integrity: sha512-SymqIsn8GjEUy8nG7HiyEjgbfk1xFosRIakUX1NHLpriq3vVpKniGrr9RdMWCaGYWByIovbRt2f/WvmP/IOApQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   promise-inflight@1.0.1:
     resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
     peerDependencies:
@@ -7481,6 +8514,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-expr@2.0.6:
+    resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -7518,6 +8554,10 @@ packages:
     resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
     engines: {node: '>=0.6'}
 
+  qs@6.5.2:
+    resolution: {integrity: sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==}
+    engines: {node: '>=0.6'}
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -7541,6 +8581,10 @@ packages:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
     engines: {node: '>= 0.6'}
 
+  raw-body@2.3.3:
+    resolution: {integrity: sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==}
+    engines: {node: '>= 0.8'}
+
   raw-body@2.5.3:
     resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
     engines: {node: '>= 0.8'}
@@ -7652,6 +8696,13 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
+  read-pkg@3.0.0:
+    resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
+    engines: {node: '>=4'}
+
+  readable-stream@1.1.14:
+    resolution: {integrity: sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==}
+
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
@@ -7704,6 +8755,12 @@ packages:
   regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
+  regenerator-runtime@0.11.1:
+    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
+
+  regenerator-runtime@0.12.1:
+    resolution: {integrity: sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==}
+
   regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
@@ -7901,6 +8958,11 @@ packages:
     engines: {node: '>=20.19.0'}
     hasBin: true
 
+  sass@1.89.2:
+    resolution: {integrity: sha512-xCmtksBKd/jdJ9Bt9p7nPKiuqrlBMBuuGkQlkhZjjQk3Ty48lv93k5Dq6OPkKt4XwxDJ7tvlfrTa1MPA9bf+QA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   sass@1.93.2:
     resolution: {integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==}
     engines: {node: '>=14.0.0'}
@@ -7950,6 +9012,10 @@ packages:
     resolution: {integrity: sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==}
     engines: {node: '>=10'}
 
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -7959,6 +9025,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  send@0.16.2:
+    resolution: {integrity: sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==}
+    engines: {node: '>= 0.8.0'}
+
   send@0.19.2:
     resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
     engines: {node: '>= 0.8.0'}
@@ -7980,6 +9050,10 @@ packages:
     resolution: {integrity: sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==}
     engines: {node: '>= 0.8.0'}
 
+  serve-static@1.13.2:
+    resolution: {integrity: sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==}
+    engines: {node: '>= 0.8.0'}
+
   serve-static@1.16.3:
     resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
     engines: {node: '>= 0.8.0'}
@@ -8010,9 +9084,15 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
+  setprototypeof@1.1.0:
+    resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  sha-1@0.1.1:
+    resolution: {integrity: sha512-dexizf3hB7d4Jq6Cd0d/NYQiqgEqIfZIpuMfwPfvSb6h06DZKmHyUe55jYwpHC12R42wpqXO6ouhiBpRzIcD/g==}
+
   sha.js@2.4.12:
     resolution: {integrity: sha512-8LzC5+bvI45BjpfXU8V5fdU2mfeKiQe1D1gIMn7XUlF3OTUrpdJpPPH4EMAnF0DsHHdSZqCdSss5qCmJKuiO3w==}
     engines: {node: '>= 0.10'}
@@ -8021,10 +9101,18 @@ packages:
   shallowequal@1.1.0:
     resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
 
+  shebang-command@1.2.0:
+    resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
+    engines: {node: '>=0.10.0'}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
 
+  shebang-regex@1.0.0:
+    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
+    engines: {node: '>=0.10.0'}
+
   shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
@@ -8102,6 +9190,10 @@ packages:
   socket.io-adapter@2.5.7:
     resolution: {integrity: sha512-e0LyK91f3cUxTmv95/KzoLg47+zF+s/sbxRGDNsyG4dmIP8ZSX8ax6byOxfJXeNNtS/8AZlfD+uP7gBeR7DLlg==}
 
+  socket.io-client@4.8.1:
+    resolution: {integrity: sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==}
+    engines: {node: '>=10.0.0'}
+
   socket.io-client@4.8.3:
     resolution: {integrity: sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==}
     engines: {node: '>=10.0.0'}
@@ -8165,6 +9257,18 @@ packages:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
 
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-license-ids@3.0.23:
+    resolution: {integrity: sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==}
+
   spdy-transport@3.0.0:
     resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
 
@@ -8172,6 +9276,13 @@ packages:
     resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==}
     engines: {node: '>=6.0.0'}
 
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  split2@3.0.0:
+    resolution: {integrity: sha512-Cp7G+nUfKJyHCrAI8kze3Q00PFGEG1pMgrAlTFlDbn+GW24evSZHJuMl+iUJx1w/NTRDeBiTgvwnf6YOt94FMw==}
+
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -8204,6 +9315,9 @@ packages:
   stack-generator@2.0.10:
     resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
 
+  stack-trace@0.0.10:
+    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -8223,6 +9337,10 @@ packages:
   static-eval@2.1.1:
     resolution: {integrity: sha512-MgWpQ/ZjGieSVB3eOJVs4OA2LT/q1vx98KPCTTQPzq/aLr0YUXTsgryTXr4SLfR0ZfUUCiedM9n/ABeDIyy4mA==}
 
+  statuses@1.4.0:
+    resolution: {integrity: sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==}
+    engines: {node: '>= 0.6'}
+
   statuses@1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
     engines: {node: '>= 0.6'}
@@ -8234,6 +9352,10 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
+  stethoskop@1.0.0:
+    resolution: {integrity: sha512-4JnZ+UmTs9SFfDjSHFlD/EoXcb1bfwntkt4h1ipNGrpxtRzmHTxOmdquCJvIrVu608Um7a09cGX0ZSOSllWJNQ==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -8281,6 +9403,10 @@ packages:
     resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
     engines: {node: '>= 0.4'}
 
+  string.prototype.padend@3.1.6:
+    resolution: {integrity: sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==}
+    engines: {node: '>= 0.4'}
+
   string.prototype.repeat@1.0.0:
     resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
 
@@ -8296,6 +9422,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -8383,6 +9512,10 @@ packages:
     resolution: {integrity: sha512-B+4Ik7ROgVKrQsXTV0Jwp2u+PXYLSlqtDAhYnkkD+zn3yg8s/zjA2MeGayPoY/KICrbitwneDHrjSotxKL+0XQ==}
     engines: {node: '>=14.18.0'}
 
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
   supertest@7.2.2:
     resolution: {integrity: sha512-oK8WG9diS3DlhdUkcFn4tkNIiIbBx9lI2ClF8K+b2/m8Eyv47LSawxUzZQSNKUrVb2KsqeTDCcjAAVPYaSLVTA==}
     engines: {node: '>=14.18.0'}
@@ -8437,11 +9570,26 @@ packages:
     resolution: {integrity: sha512-eNRKgb3z66Yp3D2CixVujOUvXLFUTij/zVnV8KRyvFdQwpz7I5DS8UfRkTeLzb64u+dkzDSdelE24izu+zSSUg==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  tailwind@4.0.0:
+    resolution: {integrity: sha512-LlUNoD/5maFG1h5kQ6/hXfFPdcnYw+1Z7z+kUD/W/E71CUMwcnrskxiBM8c3G8wmPsD1VvCuqGYMHviI8+yrmg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  tailwindcss-primeui@0.6.1:
+    resolution: {integrity: sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==}
+    peerDependencies:
+      tailwindcss: '>=3.1.0'
+
   tailwindcss@3.4.19:
     resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.1.11:
+    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
+
+  tailwindcss@4.1.14:
+    resolution: {integrity: sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==}
+
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
 
@@ -8465,6 +9613,10 @@ packages:
     engines: {node: '>=10'}
     deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
+  tar@7.5.16:
+    resolution: {integrity: sha512-56adEpPMouktRlBLXiaYFFzZ/3+JXa8P9n7WbR+ibIjtviN55mEaOkiysCnPnWm+7kkui1Dn8J9l+g6zV8731w==}
+    engines: {node: '>=18'}
+
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -8553,6 +9705,13 @@ packages:
   thunky@1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
 
+  timer2@1.0.0:
+    resolution: {integrity: sha512-UOZql+P2ET0da+B7V3/RImN3IhC5ghb+9cpecfUhmYGIm0z73dDr3A781nBLnFYmRzeT1AmoT4w9Lgr8n7n7xg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  tiny-case@1.0.3:
+    resolution: {integrity: sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -8593,6 +9752,9 @@ packages:
     resolution: {integrity: sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ==}
     engines: {node: '>=10'}
 
+  toposort@2.0.2:
+    resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
+
   touch@3.1.1:
     resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
     hasBin: true
@@ -8670,6 +9832,10 @@ packages:
     engines: {node: '>=18.0.0', yarn: '>=1.9.4'}
     hasBin: true
 
+  tsscmp@1.0.6:
+    resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
+    engines: {node: '>=0.6.x'}
+
   tsutils@3.21.0:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -8700,10 +9866,22 @@ packages:
     resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
     engines: {node: '>=10'}
 
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
   type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
 
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
   type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -8796,6 +9974,11 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -8829,6 +10012,9 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
+
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
@@ -8873,6 +10059,10 @@ packages:
   unrs-resolver@1.12.2:
     resolution: {integrity: sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==}
 
+  untildify@3.0.3:
+    resolution: {integrity: sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==}
+    engines: {node: '>=4'}
+
   upath@1.2.0:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
@@ -8892,6 +10082,9 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  util.promisify@1.0.0:
+    resolution: {integrity: sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==}
+
   util.promisify@1.0.1:
     resolution: {integrity: sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==}
 
@@ -8902,6 +10095,10 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
   uuid@11.1.1:
     resolution: {integrity: sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==}
     hasBin: true
@@ -8910,6 +10107,11 @@ packages:
     resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
     hasBin: true
 
+  uuid@3.3.2:
+    resolution: {integrity: sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
+    hasBin: true
+
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
@@ -8920,6 +10122,14 @@ packages:
     deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
+  uuidv4@2.0.0:
+    resolution: {integrity: sha512-sAUlwUVepcVk6bwnaW/oi6LCwMdueako5QQzRr90ioAVVcms6p1mV0PaSxK8gyAC4CRvKddsk217uUpZUbKd2Q==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
+  uuidv4@3.0.1:
+    resolution: {integrity: sha512-PPzksdWRl2a5C9hrs3OOYrArTeyoR0ftJ3jtOy+BnVHkT2UlrrzPNt9nTdiGuxmQItHM/AcTXahwZZC57Njojg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
@@ -8927,14 +10137,31 @@ packages:
     resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
     engines: {node: '>=10.12.0'}
 
+  validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+
   validator@13.15.35:
     resolution: {integrity: sha512-TQ5pAGhd5whStmqWvYF4OjQROlmv9SMFVt37qoCBdqRffuuklWYQlCNnEs2ZaIBD1kZRNnikiZOS1eqgkar0iw==}
     engines: {node: '>= 0.10'}
 
+  varname@2.0.3:
+    resolution: {integrity: sha512-+DofT9mJAUALhnr9ipZ5Z2icwaEZ7DAajOZT4ffXy3MQqnXtG3b7atItLQEJCkfcJTOf9WcsywneOEibD4eqJg==}
+    engines: {node: '>=0.10'}
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vee-validate@4.15.1:
+    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
+    peerDependencies:
+      vue: ^3.4.26
+
+  vite-plugin-chunk-split@0.5.0:
+    resolution: {integrity: sha512-pasNKLhH+ICjoCF6HoKKvgmZ1LEPSCIKAa8Lz0ZpMyQC9bLmCLT7UxgKMULewsc9SUw89OX0udsGiIQCtr8wLA==}
+    peerDependencies:
+      vite: ^4 || ^5
+
   vite-plugin-svgr@4.5.0:
     resolution: {integrity: sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==}
     peerDependencies:
@@ -8953,6 +10180,46 @@ packages:
     peerDependencies:
       vite: '*'
 
+  vite@6.3.5:
+    resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vite@7.3.1:
     resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -9077,6 +10344,46 @@ packages:
       jsdom:
         optional: true
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-eslint-parser@10.4.1:
+    resolution: {integrity: sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+
+  vue-eslint-parser@9.4.3:
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  vue-router@4.5.1:
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
+    peerDependencies:
+      vue: ^3.2.0
+
+  vue-timeago3@2.3.2:
+    resolution: {integrity: sha512-yxb++H9ekLS8bSt3in7fMwIfW1ex9ceMYVCcfLiOppBYpp8hatlOTLqQyCmLXeDYB098uwgfnCewEPKVh/gi6A==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+    peerDependencies:
+      vue: ^3.3.6
+
+  vue-tsc@2.2.12:
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.22:
+    resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
@@ -9292,6 +10599,17 @@ packages:
   write-file-atomic@3.0.3:
     resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}
 
+  ws@6.2.0:
+    resolution: {integrity: sha512-deZYUNlt2O4buFCa3t5bKLf8A7FPP/TVjwOeVNpw818Ma5nk4MLXls2eoEGS39o8119QIYxTrTDoPQ5B/gTD6w==}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   ws@7.5.11:
     resolution: {integrity: sha512-zS54Oen9bITtp7kp2XM3AydrCIq1D+HwJOuH+c+e4LfpL/lotP5osijd+UoMnxwAam1GN8R4KtLAyIrIcBNpiA==}
     engines: {node: '>=8.3.0'}
@@ -9335,6 +10653,10 @@ packages:
   xml-name-validator@3.0.0:
     resolution: {integrity: sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==}
 
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
@@ -9356,6 +10678,10 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  yallist@5.0.0:
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
+
   yaml@1.10.3:
     resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
     engines: {node: '>= 6'}
@@ -9389,6 +10715,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yup@1.6.1:
+    resolution: {integrity: sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -9480,7 +10809,7 @@ snapshots:
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.7)(supports-color@5.5.0)':
+  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.7)':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/helper-compilation-targets': 7.29.7
@@ -10106,7 +11435,7 @@ snapshots:
       '@babel/core': 7.29.7
       '@babel/helper-module-imports': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
-      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)(supports-color@5.5.0)
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)
       babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7)
       babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)
       semver: 6.3.1
@@ -10175,7 +11504,7 @@ snapshots:
       '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/preset-env@7.29.7(@babel/core@7.29.7)(supports-color@5.5.0)':
+  '@babel/preset-env@7.29.7(@babel/core@7.29.7)':
     dependencies:
       '@babel/compat-data': 7.29.7
       '@babel/core': 7.29.7
@@ -10244,7 +11573,7 @@ snapshots:
       '@babel/plugin-transform-unicode-regex': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-unicode-sets-regex': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7)
-      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)(supports-color@5.5.0)
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)
       babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.7)
       babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)
       core-js-compat: 3.49.0
@@ -10282,8 +11611,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.1.2':
+    dependencies:
+      regenerator-runtime: 0.12.1
+
+  '@babel/runtime@7.2.0':
+    dependencies:
+      regenerator-runtime: 0.12.1
+
   '@babel/runtime@7.29.7': {}
 
+  '@babel/runtime@7.3.4':
+    dependencies:
+      regenerator-runtime: 0.12.1
+
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -10315,79 +11656,79 @@ snapshots:
 
   '@csstools/normalize.css@12.1.1': {}
 
-  '@csstools/postcss-cascade-layers@1.1.1(postcss@8.5.15)':
+  '@csstools/postcss-cascade-layers@1.1.1(postcss@8.5.6)':
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.1.4)
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  '@csstools/postcss-color-function@1.1.1(postcss@8.5.15)':
+  '@csstools/postcss-color-function@1.1.1(postcss@8.5.6)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.15)
-      postcss: 8.5.15
+      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-font-format-keywords@1.0.1(postcss@8.5.15)':
+  '@csstools/postcss-font-format-keywords@1.0.1(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-hwb-function@1.0.2(postcss@8.5.15)':
+  '@csstools/postcss-hwb-function@1.0.2(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-ic-unit@1.0.1(postcss@8.5.15)':
+  '@csstools/postcss-ic-unit@1.0.1(postcss@8.5.6)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.15)
-      postcss: 8.5.15
+      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-is-pseudo-class@2.0.7(postcss@8.5.15)':
+  '@csstools/postcss-is-pseudo-class@2.0.7(postcss@8.5.6)':
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.1.4)
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  '@csstools/postcss-nested-calc@1.0.0(postcss@8.5.15)':
+  '@csstools/postcss-nested-calc@1.0.0(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-normalize-display-values@1.0.1(postcss@8.5.15)':
+  '@csstools/postcss-normalize-display-values@1.0.1(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-oklab-function@1.1.1(postcss@8.5.15)':
+  '@csstools/postcss-oklab-function@1.1.1(postcss@8.5.6)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.15)
-      postcss: 8.5.15
+      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-progressive-custom-properties@1.3.0(postcss@8.5.15)':
+  '@csstools/postcss-progressive-custom-properties@1.3.0(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-stepped-value-functions@1.0.1(postcss@8.5.15)':
+  '@csstools/postcss-stepped-value-functions@1.0.1(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-text-decoration-shorthand@1.0.0(postcss@8.5.15)':
+  '@csstools/postcss-text-decoration-shorthand@1.0.0(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-trigonometric-functions@1.0.2(postcss@8.5.15)':
+  '@csstools/postcss-trigonometric-functions@1.0.2(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-unset-value@1.0.2(postcss@8.5.15)':
+  '@csstools/postcss-unset-value@1.0.2(postcss@8.5.6)':
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
   '@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.1.4)':
     dependencies:
@@ -10417,162 +11758,245 @@ snapshots:
 
   '@emotion/unitless@0.10.0': {}
 
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
   '@esbuild/aix-ppc64@0.27.7':
     optional: true
 
   '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
   '@esbuild/android-arm64@0.27.7':
     optional: true
 
   '@esbuild/android-arm64@0.28.1':
     optional: true
 
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
   '@esbuild/android-arm@0.27.7':
     optional: true
 
   '@esbuild/android-arm@0.28.1':
     optional: true
 
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
   '@esbuild/android-x64@0.27.7':
     optional: true
 
   '@esbuild/android-x64@0.28.1':
     optional: true
 
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
   '@esbuild/darwin-arm64@0.27.7':
     optional: true
 
   '@esbuild/darwin-arm64@0.28.1':
     optional: true
 
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
   '@esbuild/darwin-x64@0.27.7':
     optional: true
 
   '@esbuild/darwin-x64@0.28.1':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.27.7':
     optional: true
 
   '@esbuild/freebsd-arm64@0.28.1':
     optional: true
 
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
   '@esbuild/freebsd-x64@0.27.7':
     optional: true
 
   '@esbuild/freebsd-x64@0.28.1':
     optional: true
 
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
   '@esbuild/linux-arm64@0.27.7':
     optional: true
 
   '@esbuild/linux-arm64@0.28.1':
     optional: true
 
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
   '@esbuild/linux-arm@0.27.7':
     optional: true
 
   '@esbuild/linux-arm@0.28.1':
     optional: true
 
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
   '@esbuild/linux-ia32@0.27.7':
     optional: true
 
   '@esbuild/linux-ia32@0.28.1':
     optional: true
 
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
   '@esbuild/linux-loong64@0.27.7':
     optional: true
 
   '@esbuild/linux-loong64@0.28.1':
     optional: true
 
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
   '@esbuild/linux-mips64el@0.27.7':
     optional: true
 
   '@esbuild/linux-mips64el@0.28.1':
     optional: true
 
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
   '@esbuild/linux-ppc64@0.27.7':
     optional: true
 
   '@esbuild/linux-ppc64@0.28.1':
     optional: true
 
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
   '@esbuild/linux-riscv64@0.27.7':
     optional: true
 
   '@esbuild/linux-riscv64@0.28.1':
     optional: true
 
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
   '@esbuild/linux-s390x@0.27.7':
     optional: true
 
   '@esbuild/linux-s390x@0.28.1':
     optional: true
 
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
   '@esbuild/linux-x64@0.27.7':
     optional: true
 
   '@esbuild/linux-x64@0.28.1':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.27.7':
     optional: true
 
   '@esbuild/netbsd-arm64@0.28.1':
     optional: true
 
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
   '@esbuild/netbsd-x64@0.27.7':
     optional: true
 
   '@esbuild/netbsd-x64@0.28.1':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.27.7':
     optional: true
 
   '@esbuild/openbsd-arm64@0.28.1':
     optional: true
 
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
   '@esbuild/openbsd-x64@0.27.7':
     optional: true
 
   '@esbuild/openbsd-x64@0.28.1':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.27.7':
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.7':
     optional: true
 
   '@esbuild/openharmony-arm64@0.28.1':
     optional: true
 
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
   '@esbuild/sunos-x64@0.27.7':
     optional: true
 
   '@esbuild/sunos-x64@0.28.1':
     optional: true
 
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
   '@esbuild/win32-arm64@0.27.7':
     optional: true
 
   '@esbuild/win32-arm64@0.28.1':
     optional: true
 
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
   '@esbuild/win32-ia32@0.27.7':
     optional: true
 
   '@esbuild/win32-ia32@0.28.1':
     optional: true
 
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
   '@esbuild/win32-x64@0.27.7':
     optional: true
 
   '@esbuild/win32-x64@0.28.1':
     optional: true
 
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))':
+    dependencies:
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-visitor-keys: 3.4.3
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))':
     dependencies:
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -10585,6 +12009,12 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
+  '@eslint/compat@1.4.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))':
+    dependencies:
+      '@eslint/core': 0.17.0
+    optionalDependencies:
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -10605,10 +12035,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@eslint/config-helpers@0.3.1': {}
+
   '@eslint/config-helpers@0.4.2':
     dependencies:
       '@eslint/core': 0.17.0
 
+  '@eslint/core@0.15.2':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
   '@eslint/core@0.17.0':
     dependencies:
       '@types/json-schema': 7.0.15
@@ -10631,12 +12067,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@eslint/js@9.22.0': {}
+
   '@eslint/js@9.23.0': {}
 
+  '@eslint/js@9.31.0': {}
+
   '@eslint/js@9.39.2': {}
 
   '@eslint/object-schema@2.1.7': {}
 
+  '@eslint/plugin-kit@0.3.5':
+    dependencies:
+      '@eslint/core': 0.15.2
+      levn: 0.4.1
+
   '@eslint/plugin-kit@0.4.1':
     dependencies:
       '@eslint/core': 0.17.0
@@ -10669,14 +12114,29 @@ snapshots:
       eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
 
-  '@gewis/eslint-config-typescript@2.4.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)':
+  '@gewis/eslint-config-typescript@2.3.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)':
+    dependencies:
+      '@eslint/compat': 1.4.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      '@eslint/js': 9.22.0
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      typescript-eslint: 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+    transitivePeerDependencies:
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - supports-color
+      - typescript
+
+  '@gewis/eslint-config-typescript@2.4.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)':
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
       '@eslint/js': 9.23.0
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
-      typescript-eslint: 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
+      typescript-eslint: 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-webpack
@@ -10684,6 +12144,26 @@ snapshots:
       - supports-color
       - typescript
 
+  '@gewis/eslint-config-vue@2.3.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)':
+    dependencies:
+      '@vue/eslint-config-typescript': 14.8.0(eslint-plugin-vue@9.33.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-plugin-vue: 9.33.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      typescript-eslint: 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      vue-eslint-parser: 9.4.3(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@gewis/prettier-config@2.2.2(@types/eslint@8.56.12)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(prettier@3.8.1)':
+    dependencies:
+      '@vue/eslint-config-prettier': 10.2.0(@types/eslint@8.56.12)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(prettier@3.8.1)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-config-prettier: 10.1.8(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - '@types/eslint'
+
   '@gewis/prettier-config@2.2.2(@types/eslint@8.56.12)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)':
     dependencies:
       '@vue/eslint-config-prettier': 10.2.0(@types/eslint@8.56.12)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)
@@ -10693,6 +12173,8 @@ snapshots:
     transitivePeerDependencies:
       - '@types/eslint'
 
+  '@gewis/splash@2.4.0': {}
+
   '@gewis/sudosos-client@1.34.0':
     dependencies:
       axios: 1.17.0
@@ -10964,6 +12446,10 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@isaacs/fs-minipass@4.0.1':
+    dependencies:
+      minipass: 7.1.3
+
   '@istanbuljs/load-nyc-config@1.1.0':
     dependencies:
       camelcase: 5.3.1
@@ -10977,7 +12463,7 @@ snapshots:
   '@jest/console@27.5.1':
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       jest-message-util: 27.5.1
       jest-util: 27.5.1
@@ -10986,7 +12472,7 @@ snapshots:
   '@jest/console@28.1.3':
     dependencies:
       '@jest/types': 28.1.3
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       jest-message-util: 28.1.3
       jest-util: 28.1.3
@@ -10999,7 +12485,7 @@ snapshots:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.8.1
@@ -11033,14 +12519,14 @@ snapshots:
     dependencies:
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       jest-mock: 27.5.1
 
   '@jest/fake-timers@27.5.1':
     dependencies:
       '@jest/types': 27.5.1
       '@sinonjs/fake-timers': 8.1.0
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       jest-message-util: 27.5.1
       jest-mock: 27.5.1
       jest-util: 27.5.1
@@ -11058,7 +12544,7 @@ snapshots:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       collect-v8-coverage: 1.0.3
       exit: 0.1.2
@@ -11138,7 +12624,7 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       '@types/yargs': 16.0.11
       chalk: 4.1.2
 
@@ -11147,7 +12633,7 @@ snapshots:
       '@jest/schemas': 28.1.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       '@types/yargs': 17.0.35
       chalk: 4.1.2
 
@@ -11297,7 +12783,7 @@ snapshots:
 
   '@pkgr/core@0.3.6': {}
 
-  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(react-refresh@0.11.0)(type-fest@0.21.3)(webpack-dev-server@4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))':
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.17(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))':
     dependencies:
       ansi-html: 0.0.9
       core-js-pure: 3.49.0
@@ -11309,8 +12795,35 @@ snapshots:
       source-map: 0.7.6
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
     optionalDependencies:
-      type-fest: 0.21.3
-      webpack-dev-server: 4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      type-fest: 4.41.0
+      webpack-dev-server: 4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+
+  '@primeuix/styled@0.7.4':
+    dependencies:
+      '@primeuix/utils': 0.6.4
+
+  '@primeuix/styles@1.2.5':
+    dependencies:
+      '@primeuix/styled': 0.7.4
+
+  '@primeuix/themes@1.2.0':
+    dependencies:
+      '@primeuix/styled': 0.7.4
+
+  '@primeuix/utils@0.6.4': {}
+
+  '@primevue/core@4.3.6(vue@3.5.22(typescript@5.8.3))':
+    dependencies:
+      '@primeuix/styled': 0.7.4
+      '@primeuix/utils': 0.6.4
+      vue: 3.5.22(typescript@5.8.3)
+
+  '@primevue/icons@4.3.6(vue@3.5.22(typescript@5.8.3))':
+    dependencies:
+      '@primeuix/utils': 0.6.4
+      '@primevue/core': 4.3.6(vue@3.5.22(typescript@5.8.3))
+    transitivePeerDependencies:
+      - vue
 
   '@rolldown/binding-android-arm64@1.0.3':
     optional: true
@@ -11635,11 +13148,11 @@ snapshots:
       deepmerge: 4.3.1
       svgo: 1.3.2
 
-  '@svgr/webpack@5.5.0(supports-color@5.5.0)':
+  '@svgr/webpack@5.5.0':
     dependencies:
       '@babel/core': 7.29.7
       '@babel/plugin-transform-react-constant-elements': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-react': 7.29.7(@babel/core@7.29.7)
       '@svgr/core': 5.5.0
       '@svgr/plugin-jsx': 5.5.0
@@ -11708,6 +13221,16 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@tailwindcss/node@4.1.14':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.24.0
+      jiti: 2.7.0
+      lightningcss: 1.30.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.14
+
   '@tailwindcss/node@4.1.18':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -11718,42 +13241,96 @@ snapshots:
       source-map-js: 1.2.1
       tailwindcss: 4.1.18
 
+  '@tailwindcss/oxide-android-arm64@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-android-arm64@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-darwin-arm64@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-darwin-arm64@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-darwin-x64@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-darwin-x64@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-freebsd-x64@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-freebsd-x64@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-linux-x64-musl@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-wasm32-wasi@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
+    optional: true
+
   '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     optional: true
 
+  '@tailwindcss/oxide@4.1.14':
+    dependencies:
+      detect-libc: 2.1.2
+      tar: 7.5.16
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.14
+      '@tailwindcss/oxide-darwin-arm64': 4.1.14
+      '@tailwindcss/oxide-darwin-x64': 4.1.14
+      '@tailwindcss/oxide-freebsd-x64': 4.1.14
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.14
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.14
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.14
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.14
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.14
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.14
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.14
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.14
+
   '@tailwindcss/oxide@4.1.18':
     optionalDependencies:
       '@tailwindcss/oxide-android-arm64': 4.1.18
@@ -11769,12 +13346,20 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
       '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
+  '@tailwindcss/postcss@4.1.14':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.14
+      '@tailwindcss/oxide': 4.1.14
+      postcss: 8.5.15
+      tailwindcss: 4.1.14
+
   '@tailwindcss/postcss@4.1.18':
     dependencies:
       '@alloc/quick-lru': 5.2.0
       '@tailwindcss/node': 4.1.18
       '@tailwindcss/oxide': 4.1.18
-      postcss: 8.5.15
+      postcss: 8.5.6
       tailwindcss: 4.1.18
 
   '@tokenizer/token@0.3.0': {}
@@ -11789,6 +13374,8 @@ snapshots:
 
   '@tsconfig/node16@1.0.4': {}
 
+  '@tsconfig/node22@22.0.2': {}
+
   '@tsoa/cli@7.0.0-alpha.0':
     dependencies:
       '@tsoa/runtime': 7.0.0-alpha.0
@@ -11843,7 +13430,7 @@ snapshots:
 
   '@types/accepts@1.3.7':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/async-lock@1.4.2': {}
 
@@ -11871,11 +13458,11 @@ snapshots:
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/bonjour@3.5.13':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/chai@5.2.3':
     dependencies:
@@ -11885,11 +13472,11 @@ snapshots:
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 5.1.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/content-disposition@0.5.9': {}
 
@@ -11904,11 +13491,11 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/express': 5.0.6
       '@types/keygrip': 1.0.6
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/cors@2.8.19':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/debug@0.0.31': {}
 
@@ -11925,7 +13512,7 @@ snapshots:
 
   '@types/express-serve-static-core@5.1.1':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       '@types/qs': 6.15.1
       '@types/range-parser': 1.2.7
       '@types/send': 1.2.1
@@ -11942,7 +13529,7 @@ snapshots:
 
   '@types/graceful-fs@4.1.9':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/history@4.7.11': {}
 
@@ -11954,7 +13541,7 @@ snapshots:
 
   '@types/http-proxy@1.17.17':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/istanbul-lib-coverage@2.0.6': {}
 
@@ -11987,7 +13574,9 @@ snapshots:
       '@types/http-errors': 2.0.5
       '@types/keygrip': 1.0.6
       '@types/koa-compose': 3.2.9
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
+
+  '@types/lodash@4.17.20': {}
 
   '@types/methods@1.1.4': {}
 
@@ -12007,7 +13596,7 @@ snapshots:
 
   '@types/node-forge@1.3.14':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/node@22.19.7':
     dependencies:
@@ -12017,6 +13606,11 @@ snapshots:
     dependencies:
       undici-types: 7.16.0
 
+  '@types/node@25.9.3':
+    dependencies:
+      undici-types: 7.24.6
+    optional: true
+
   '@types/parse-json@4.0.2': {}
 
   '@types/passport-strategy@0.2.38':
@@ -12065,7 +13659,7 @@ snapshots:
 
   '@types/resolve@1.17.1':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/retry@0.12.0': {}
 
@@ -12074,11 +13668,11 @@ snapshots:
   '@types/send@0.17.6':
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/send@1.2.1':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/serve-index@1.9.4':
     dependencies:
@@ -12087,17 +13681,17 @@ snapshots:
   '@types/serve-static@1.15.10':
     dependencies:
       '@types/http-errors': 2.0.5
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       '@types/send': 0.17.6
 
   '@types/serve-static@2.2.0':
     dependencies:
       '@types/http-errors': 2.0.5
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/sockjs@0.3.36':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/stack-utils@2.0.3': {}
 
@@ -12107,7 +13701,7 @@ snapshots:
     dependencies:
       '@types/cookiejar': 2.1.5
       '@types/methods': 1.1.4
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       form-data: 4.0.6
 
   '@types/supertest@7.2.0':
@@ -12122,9 +13716,11 @@ snapshots:
 
   '@types/trusted-types@2.0.7': {}
 
+  '@types/uuid@10.0.0': {}
+
   '@types/ws@8.18.1':
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   '@types/yargs-parser@21.0.3': {}
 
@@ -12171,12 +13767,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
       '@typescript-eslint/scope-manager': 8.61.1
-      '@typescript-eslint/type-utils': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.61.1
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.5.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.61.1
+      '@typescript-eslint/type-utils': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
       '@typescript-eslint/utils': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.61.1
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -12199,7 +13811,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(supports-color@5.5.0)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.9.3)
       debug: 4.4.3(supports-color@5.5.0)
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
     optionalDependencies:
@@ -12219,7 +13831,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.61.1
+      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.61.1
+      debug: 4.4.3(supports-color@5.5.0)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.61.1
       '@typescript-eslint/types': 8.61.1
@@ -12240,6 +13864,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/project-service@8.61.1(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@5.8.3)
+      '@typescript-eslint/types': 8.61.1
+      debug: 4.4.3(supports-color@5.5.0)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/project-service@8.61.1(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@5.9.3)
@@ -12268,13 +13901,17 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/tsconfig-utils@8.61.1(typescript@5.8.3)':
+    dependencies:
+      typescript: 5.8.3
+
   '@typescript-eslint/tsconfig-utils@8.61.1(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
   '@typescript-eslint/type-utils@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.62.0(supports-color@5.5.0)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.9.3)
       '@typescript-eslint/utils': 5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
       debug: 4.4.3(supports-color@5.5.0)
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -12296,7 +13933,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(typescript@5.8.3)
+      debug: 4.4.3(supports-color@5.5.0)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      ts-api-utils: 2.5.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.61.1
       '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.9.3)
@@ -12314,7 +13963,7 @@ snapshots:
 
   '@typescript-eslint/types@8.61.1': {}
 
-  '@typescript-eslint/typescript-estree@5.62.0(supports-color@5.5.0)(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
@@ -12343,6 +13992,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@8.61.1(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.61.1(typescript@5.8.3)
+      '@typescript-eslint/tsconfig-utils': 8.61.1(typescript@5.8.3)
+      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/visitor-keys': 8.61.1
+      debug: 4.4.3(supports-color@5.5.0)
+      minimatch: 10.2.5
+      semver: 7.8.4
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/typescript-estree@8.61.1(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.61.1(typescript@5.9.3)
@@ -12365,7 +14029,7 @@ snapshots:
       '@types/semver': 7.7.1
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/typescript-estree': 5.62.0(supports-color@5.5.0)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.9.3)
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
       eslint-scope: 5.1.1
       semver: 7.8.4
@@ -12384,6 +14048,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(typescript@5.8.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      '@typescript-eslint/scope-manager': 8.61.1
+      '@typescript-eslint/types': 8.61.1
+      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.8.3)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
@@ -12480,6 +14155,14 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
     optional: true
 
+  '@vee-validate/yup@4.15.1(vue@3.5.22(typescript@5.8.3))(yup@1.6.1)':
+    dependencies:
+      type-fest: 4.41.0
+      vee-validate: 4.15.1(vue@3.5.22(typescript@5.8.3))
+      yup: 1.6.1
+    transitivePeerDependencies:
+      - vue
+
   '@vitejs/plugin-react-swc@4.2.2(vite@7.3.1(@types/node@25.0.10)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.93.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.47
@@ -12488,6 +14171,11 @@ snapshots:
     transitivePeerDependencies:
       - '@swc/helpers'
 
+  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0))(vue@3.5.22(typescript@5.8.3))':
+    dependencies:
+      vite: 6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0)
+      vue: 3.5.22(typescript@5.8.3)
+
   '@vitest/expect@4.1.9':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -12516,27 +14204,173 @@ snapshots:
 
   '@vitest/snapshot@4.1.9':
     dependencies:
-      '@vitest/pretty-format': 4.1.9
-      '@vitest/utils': 4.1.9
-      magic-string: 0.30.21
-      pathe: 2.0.3
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/utils': 4.1.9
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.9': {}
+
+  '@vitest/utils@4.1.9':
+    dependencies:
+      '@vitest/pretty-format': 4.1.9
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
+  '@volar/language-core@2.4.15':
+    dependencies:
+      '@volar/source-map': 2.4.15
+
+  '@volar/source-map@2.4.15': {}
+
+  '@volar/typescript@2.4.15':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/compiler-core@3.5.22':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.22
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-core@3.5.38':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.38
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.22':
+    dependencies:
+      '@vue/compiler-core': 3.5.22
+      '@vue/shared': 3.5.22
+
+  '@vue/compiler-dom@3.5.38':
+    dependencies:
+      '@vue/compiler-core': 3.5.38
+      '@vue/shared': 3.5.38
+
+  '@vue/compiler-sfc@3.5.22':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/compiler-core': 3.5.22
+      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-ssr': 3.5.22
+      '@vue/shared': 3.5.22
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.22':
+    dependencies:
+      '@vue/compiler-dom': 3.5.22
+      '@vue/shared': 3.5.22
+
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
+  '@vue/eslint-config-prettier@10.2.0(@types/eslint@8.56.12)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(prettier@3.8.1)':
+    dependencies:
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-config-prettier: 10.1.8(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      eslint-plugin-prettier: 5.5.6(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(prettier@3.8.1)
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - '@types/eslint'
+
+  '@vue/eslint-config-prettier@10.2.0(@types/eslint@8.56.12)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)':
+    dependencies:
+      eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
+      eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
+      eslint-plugin-prettier: 5.5.6(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)
+      prettier: 3.8.1
+    transitivePeerDependencies:
+      - '@types/eslint'
+
+  '@vue/eslint-config-typescript@14.8.0(eslint-plugin-vue@9.33.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(typescript@5.8.3)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-plugin-vue: 9.33.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      fast-glob: 3.3.3
+      typescript-eslint: 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      vue-eslint-parser: 10.4.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/language-core@2.2.12(typescript@5.8.3)':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.38
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.38
+      alien-signals: 1.0.13
+      minimatch: 9.0.9
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.8.3
+
+  '@vue/reactivity@3.5.22':
+    dependencies:
+      '@vue/shared': 3.5.22
 
-  '@vitest/spy@4.1.9': {}
+  '@vue/runtime-core@3.5.22':
+    dependencies:
+      '@vue/reactivity': 3.5.22
+      '@vue/shared': 3.5.22
 
-  '@vitest/utils@4.1.9':
+  '@vue/runtime-dom@3.5.22':
     dependencies:
-      '@vitest/pretty-format': 4.1.9
-      convert-source-map: 2.0.0
-      tinyrainbow: 3.1.0
+      '@vue/reactivity': 3.5.22
+      '@vue/runtime-core': 3.5.22
+      '@vue/shared': 3.5.22
+      csstype: 3.2.3
 
-  '@vue/eslint-config-prettier@10.2.0(@types/eslint@8.56.12)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)':
+  '@vue/server-renderer@3.5.22(vue@3.5.22(typescript@5.8.3))':
     dependencies:
-      eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
-      eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
-      eslint-plugin-prettier: 5.5.6(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1)
-      prettier: 3.8.1
-    transitivePeerDependencies:
-      - '@types/eslint'
+      '@vue/compiler-ssr': 3.5.22
+      '@vue/shared': 3.5.22
+      vue: 3.5.22(typescript@5.8.3)
+
+  '@vue/shared@3.5.22': {}
+
+  '@vue/shared@3.5.38': {}
+
+  '@vue/tsconfig@0.7.0(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3))':
+    optionalDependencies:
+      typescript: 5.8.3
+      vue: 3.5.22(typescript@5.8.3)
 
   '@webassemblyjs/ast@1.14.1':
     dependencies:
@@ -12699,6 +14533,13 @@ snapshots:
       ajv: 8.20.0
       fast-deep-equal: 3.1.3
 
+  ajv@6.10.0:
+    dependencies:
+      fast-deep-equal: 2.0.1
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
   ajv@6.15.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -12713,6 +14554,16 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+  alien-signals@1.0.13: {}
+
+  amqplib@0.5.2:
+    dependencies:
+      bitsyntax: 0.0.4
+      bluebird: 3.7.2
+      buffer-more-ints: 0.0.2
+      readable-stream: 1.1.14
+      safe-buffer: 5.2.1
+
   ansi-escapes@4.3.2:
     dependencies:
       type-fest: 0.21.3
@@ -12750,6 +14601,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.2
 
+  app-root-path@2.1.0: {}
+
   app-root-path@3.1.0: {}
 
   append-field@1.0.0: {}
@@ -12863,14 +14716,22 @@ snapshots:
 
   asap@2.0.6: {}
 
+  asn1@0.2.3: {}
+
   assertion-error@2.0.1: {}
 
   ast-types-flow@0.0.8: {}
 
   async-function@1.0.0: {}
 
+  async-limiter@1.0.1: {}
+
   async-lock@1.4.1: {}
 
+  async-retry@1.2.3:
+    dependencies:
+      retry: 0.12.0
+
   async@3.2.6: {}
 
   asynckit@0.4.0: {}
@@ -12879,22 +14740,23 @@ snapshots:
 
   atomic-sleep@1.0.0: {}
 
-  autoprefixer@10.4.23(postcss@8.5.6):
+  autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
       caniuse-lite: 1.0.30001799
-      fraction.js: 5.3.4
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
       picocolors: 1.1.1
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  autoprefixer@10.5.0(postcss@8.5.15):
+  autoprefixer@10.4.23(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
       caniuse-lite: 1.0.30001799
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -12931,7 +14793,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@8.4.1(@babel/core@7.29.7)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  babel-loader@8.4.1(@babel/core@7.29.7)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@babel/core': 7.29.7
       find-cache-dir: 3.3.2
@@ -12967,11 +14829,11 @@ snapshots:
     dependencies:
       '@babel/core': 7.29.7
 
-  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.7)(supports-color@5.5.0):
+  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.7):
     dependencies:
       '@babel/compat-data': 7.29.7
       '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -12979,7 +14841,7 @@ snapshots:
   babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7):
     dependencies:
       '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
       core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
@@ -12987,7 +14849,7 @@ snapshots:
   babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.7):
     dependencies:
       '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
       core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
@@ -12995,7 +14857,7 @@ snapshots:
   babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.7):
     dependencies:
       '@babel/core': 7.29.7
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
@@ -13039,7 +14901,7 @@ snapshots:
       '@babel/plugin-transform-flow-strip-types': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-react-display-name': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-runtime': 7.29.7(@babel/core@7.29.7)
-      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-react': 7.29.7(@babel/core@7.29.7)
       '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
       '@babel/runtime': 7.29.7
@@ -13048,6 +14910,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-runtime@6.26.0:
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.11.1
+
   balanced-match@1.0.2: {}
 
   balanced-match@4.0.4: {}
@@ -13058,6 +14925,10 @@ snapshots:
 
   baseline-browser-mapping@2.10.38: {}
 
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   batch@0.6.1: {}
 
   bfj@7.1.0:
@@ -13076,6 +14947,12 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
+  birpc@2.9.0: {}
+
+  bitsyntax@0.0.4:
+    dependencies:
+      buffer-more-ints: 0.0.2
+
   bl@4.1.0:
     dependencies:
       buffer: 5.7.1
@@ -13084,6 +14961,21 @@ snapshots:
 
   bluebird@3.7.2: {}
 
+  body-parser@1.18.3:
+    dependencies:
+      bytes: 3.0.0
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 1.1.2
+      http-errors: 1.6.3
+      iconv-lite: 0.4.23
+      on-finished: 2.3.0
+      qs: 6.5.2
+      raw-body: 2.3.3
+      type-is: 1.6.18
+    transitivePeerDependencies:
+      - supports-color
+
   body-parser@1.20.5:
     dependencies:
       bytes: 3.1.2
@@ -13153,8 +15045,12 @@ snapshots:
     dependencies:
       node-int64: 0.4.0
 
+  buffer-equal-constant-time@1.0.1: {}
+
   buffer-from@1.1.2: {}
 
+  buffer-more-ints@0.0.2: {}
+
   buffer@5.7.1:
     dependencies:
       base64-js: 1.5.1
@@ -13175,6 +15071,8 @@ snapshots:
     dependencies:
       streamsearch: 1.1.0
 
+  bytes@3.0.0: {}
+
   bytes@3.1.2: {}
 
   c12@2.0.1:
@@ -13261,6 +15159,12 @@ snapshots:
 
   chai@6.2.2: {}
 
+  chalk@2.4.1:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -13303,6 +15207,8 @@ snapshots:
 
   chownr@2.0.0: {}
 
+  chownr@3.0.0: {}
+
   chrome-trace-event@1.0.4: {}
 
   ci-info@3.9.0: {}
@@ -13388,16 +15294,36 @@ snapshots:
 
   commander@8.3.0: {}
 
+  commands-events@1.0.4:
+    dependencies:
+      '@babel/runtime': 7.2.0
+      formats: 1.0.0
+      uuidv4: 2.0.0
+
   common-tags@1.8.2: {}
 
   commondir@1.0.1: {}
 
+  comparejs@1.0.0: {}
+
   component-emitter@1.3.1: {}
 
   compressible@2.0.18:
     dependencies:
       mime-db: 1.54.0
 
+  compression@1.7.3:
+    dependencies:
+      accepts: 1.3.8
+      bytes: 3.0.0
+      compressible: 2.0.18
+      debug: 2.6.9
+      on-headers: 1.0.2
+      safe-buffer: 5.1.2
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   compression@1.8.1:
     dependencies:
       bytes: 3.1.2
@@ -13449,12 +15375,16 @@ snapshots:
   console-control-strings@1.1.0:
     optional: true
 
+  content-disposition@0.5.2: {}
+
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
 
   content-disposition@1.1.0: {}
 
+  content-type@1.0.4: {}
+
   content-type@1.0.5: {}
 
   content-type@2.0.0: {}
@@ -13474,12 +15404,18 @@ snapshots:
 
   cookie-signature@1.2.2: {}
 
+  cookie@0.3.1: {}
+
   cookie@0.7.2: {}
 
   cookie@1.1.1: {}
 
   cookiejar@2.1.4: {}
 
+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
   copy-to-clipboard@3.3.3:
     dependencies:
       toggle-selection: 1.0.6
@@ -13490,10 +15426,17 @@ snapshots:
 
   core-js-pure@3.49.0: {}
 
+  core-js@2.6.12: {}
+
   core-js@3.49.0: {}
 
   core-util-is@1.0.3: {}
 
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   cors@2.8.6:
     dependencies:
       object-assign: 4.1.1
@@ -13526,6 +15469,16 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  cronstrue@2.61.0: {}
+
+  cross-spawn@6.0.6:
+    dependencies:
+      nice-try: 1.0.5
+      path-key: 2.0.1
+      semver: 5.7.2
+      shebang-command: 1.2.0
+      which: 1.3.1
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -13534,52 +15487,58 @@ snapshots:
 
   crypto-random-string@2.0.0: {}
 
-  css-blank-pseudo@3.0.3(postcss@8.5.15):
+  crypto2@2.0.0:
     dependencies:
-      postcss: 8.5.15
+      babel-runtime: 6.26.0
+      node-rsa: 0.4.2
+      util.promisify: 1.0.0
+
+  css-blank-pseudo@3.0.3(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
   css-color-keywords@1.0.0: {}
 
-  css-declaration-sorter@6.4.1(postcss@8.5.15):
+  css-declaration-sorter@6.4.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  css-has-pseudo@3.0.4(postcss@8.5.15):
+  css-has-pseudo@3.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
   css-in-js-utils@3.1.0:
     dependencies:
       hyphenate-style-name: 1.1.0
 
-  css-loader@6.11.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  css-loader@6.11.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.15)
-      postcss: 8.5.15
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.15)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.15)
-      postcss-modules-scope: 3.2.1(postcss@8.5.15)
-      postcss-modules-values: 4.0.0(postcss@8.5.15)
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.6)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.6)
+      postcss-modules-scope: 3.2.1(postcss@8.5.6)
+      postcss-modules-values: 4.0.0(postcss@8.5.6)
       postcss-value-parser: 4.2.0
       semver: 7.8.4
     optionalDependencies:
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
 
-  css-minimizer-webpack-plugin@3.4.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  css-minimizer-webpack-plugin@3.4.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
-      cssnano: 5.1.15(postcss@8.5.15)
+      cssnano: 5.1.15(postcss@8.5.6)
       jest-worker: 27.5.1
-      postcss: 8.5.15
+      postcss: 8.5.6
       schema-utils: 4.3.3
       serialize-javascript: 6.0.2
       source-map: 0.6.1
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
 
-  css-prefers-color-scheme@6.0.3(postcss@8.5.15):
+  css-prefers-color-scheme@6.0.3(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
   css-select-base-adapter@0.1.1: {}
 
@@ -13622,48 +15581,48 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssnano-preset-default@5.2.14(postcss@8.5.15):
+  cssnano-preset-default@5.2.14(postcss@8.5.6):
     dependencies:
-      css-declaration-sorter: 6.4.1(postcss@8.5.15)
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
-      postcss-calc: 8.2.4(postcss@8.5.15)
-      postcss-colormin: 5.3.1(postcss@8.5.15)
-      postcss-convert-values: 5.1.3(postcss@8.5.15)
-      postcss-discard-comments: 5.1.2(postcss@8.5.15)
-      postcss-discard-duplicates: 5.1.0(postcss@8.5.15)
-      postcss-discard-empty: 5.1.1(postcss@8.5.15)
-      postcss-discard-overridden: 5.1.0(postcss@8.5.15)
-      postcss-merge-longhand: 5.1.7(postcss@8.5.15)
-      postcss-merge-rules: 5.1.4(postcss@8.5.15)
-      postcss-minify-font-values: 5.1.0(postcss@8.5.15)
-      postcss-minify-gradients: 5.1.1(postcss@8.5.15)
-      postcss-minify-params: 5.1.4(postcss@8.5.15)
-      postcss-minify-selectors: 5.2.1(postcss@8.5.15)
-      postcss-normalize-charset: 5.1.0(postcss@8.5.15)
-      postcss-normalize-display-values: 5.1.0(postcss@8.5.15)
-      postcss-normalize-positions: 5.1.1(postcss@8.5.15)
-      postcss-normalize-repeat-style: 5.1.1(postcss@8.5.15)
-      postcss-normalize-string: 5.1.0(postcss@8.5.15)
-      postcss-normalize-timing-functions: 5.1.0(postcss@8.5.15)
-      postcss-normalize-unicode: 5.1.1(postcss@8.5.15)
-      postcss-normalize-url: 5.1.0(postcss@8.5.15)
-      postcss-normalize-whitespace: 5.1.1(postcss@8.5.15)
-      postcss-ordered-values: 5.1.3(postcss@8.5.15)
-      postcss-reduce-initial: 5.1.2(postcss@8.5.15)
-      postcss-reduce-transforms: 5.1.0(postcss@8.5.15)
-      postcss-svgo: 5.1.0(postcss@8.5.15)
-      postcss-unique-selectors: 5.1.1(postcss@8.5.15)
-
-  cssnano-utils@3.1.0(postcss@8.5.15):
+      css-declaration-sorter: 6.4.1(postcss@8.5.6)
+      cssnano-utils: 3.1.0(postcss@8.5.6)
+      postcss: 8.5.6
+      postcss-calc: 8.2.4(postcss@8.5.6)
+      postcss-colormin: 5.3.1(postcss@8.5.6)
+      postcss-convert-values: 5.1.3(postcss@8.5.6)
+      postcss-discard-comments: 5.1.2(postcss@8.5.6)
+      postcss-discard-duplicates: 5.1.0(postcss@8.5.6)
+      postcss-discard-empty: 5.1.1(postcss@8.5.6)
+      postcss-discard-overridden: 5.1.0(postcss@8.5.6)
+      postcss-merge-longhand: 5.1.7(postcss@8.5.6)
+      postcss-merge-rules: 5.1.4(postcss@8.5.6)
+      postcss-minify-font-values: 5.1.0(postcss@8.5.6)
+      postcss-minify-gradients: 5.1.1(postcss@8.5.6)
+      postcss-minify-params: 5.1.4(postcss@8.5.6)
+      postcss-minify-selectors: 5.2.1(postcss@8.5.6)
+      postcss-normalize-charset: 5.1.0(postcss@8.5.6)
+      postcss-normalize-display-values: 5.1.0(postcss@8.5.6)
+      postcss-normalize-positions: 5.1.1(postcss@8.5.6)
+      postcss-normalize-repeat-style: 5.1.1(postcss@8.5.6)
+      postcss-normalize-string: 5.1.0(postcss@8.5.6)
+      postcss-normalize-timing-functions: 5.1.0(postcss@8.5.6)
+      postcss-normalize-unicode: 5.1.1(postcss@8.5.6)
+      postcss-normalize-url: 5.1.0(postcss@8.5.6)
+      postcss-normalize-whitespace: 5.1.1(postcss@8.5.6)
+      postcss-ordered-values: 5.1.3(postcss@8.5.6)
+      postcss-reduce-initial: 5.1.2(postcss@8.5.6)
+      postcss-reduce-transforms: 5.1.0(postcss@8.5.6)
+      postcss-svgo: 5.1.0(postcss@8.5.6)
+      postcss-unique-selectors: 5.1.1(postcss@8.5.6)
+
+  cssnano-utils@3.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  cssnano@5.1.15(postcss@8.5.15):
+  cssnano@5.1.15(postcss@8.5.6):
     dependencies:
-      cssnano-preset-default: 5.2.14(postcss@8.5.15)
+      cssnano-preset-default: 5.2.14(postcss@8.5.6)
       lilconfig: 2.1.0
-      postcss: 8.5.15
+      postcss: 8.5.6
       yaml: 1.10.3
 
   csso@4.2.0:
@@ -13706,10 +15665,22 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  datasette@1.0.1:
+    dependencies:
+      comparejs: 1.0.0
+      eventemitter2: 5.0.1
+      lodash: 4.17.5
+
+  date-fns@2.30.0:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
   dateformat@4.6.3: {}
 
   dayjs@1.11.21: {}
 
+  de-indent@1.0.2: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -13718,6 +15689,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.4.3(supports-color@5.5.0):
     dependencies:
       ms: 2.1.3
@@ -13784,6 +15759,8 @@ snapshots:
 
   destr@2.0.5: {}
 
+  destroy@1.0.4: {}
+
   destroy@1.2.0: {}
 
   detect-libc@2.1.2: {}
@@ -13875,6 +15852,10 @@ snapshots:
 
   dotenv@17.2.3: {}
 
+  draht@1.0.1:
+    dependencies:
+      eventemitter2: 5.0.1
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -13885,6 +15866,10 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
   ee-first@1.1.1: {}
 
   ejs@3.1.10:
@@ -13905,6 +15890,8 @@ snapshots:
 
   emojis-list@3.0.0: {}
 
+  encodeurl@1.0.2: {}
+
   encodeurl@2.0.0: {}
 
   encoding@0.1.13:
@@ -13933,7 +15920,7 @@ snapshots:
   engine.io@6.6.8(supports-color@5.5.0):
     dependencies:
       '@types/cors': 2.8.19
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       '@types/ws': 8.18.1
       accepts: 1.3.8
       base64id: 2.0.0
@@ -13956,6 +15943,8 @@ snapshots:
 
   entities@4.5.0: {}
 
+  entities@7.0.1: {}
+
   env-paths@2.2.1:
     optional: true
 
@@ -14054,6 +16043,8 @@ snapshots:
       iterator.prototype: 1.1.5
       math-intrinsics: 1.1.0
 
+  es-module-lexer@1.7.0: {}
+
   es-module-lexer@2.1.0: {}
 
   es-object-atoms@1.1.2:
@@ -14077,6 +16068,35 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
   esbuild@0.27.7:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.27.7
@@ -14153,6 +16173,10 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
+  eslint-config-prettier@10.1.8(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)):
+    dependencies:
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+
   eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
     dependencies:
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -14172,7 +16196,7 @@ snapshots:
       confusing-browser-globals: 1.0.11
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
       eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
       eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(jest@27.5.1(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3)))(typescript@5.9.3)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
       eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
@@ -14196,7 +16220,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0):
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.3(supports-color@5.5.0)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      get-tsconfig: 4.14.0
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.17
+      unrs-resolver: 1.12.2
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3(supports-color@5.5.0)
@@ -14207,18 +16246,18 @@ snapshots:
       tinyglobby: 0.2.17
       unrs-resolver: 1.12.2
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.13.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
+  eslint-module-utils@2.13.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
       eslint-import-resolver-node: 0.3.10
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -14232,15 +16271,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-module-utils@2.13.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-import-resolver-node: 0.3.10
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-flowtype@8.0.3(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
     dependencies:
       '@babel/plugin-syntax-flow': 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
-      lodash: 4.18.1
+      lodash: 4.17.21
       string-natural-compare: 3.0.1
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -14251,7 +16301,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
       eslint-import-resolver-node: 0.3.10
-      eslint-module-utils: 2.13.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
+      eslint-module-utils: 2.13.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
       hasown: 2.0.4
       is-core-module: 2.16.2
       is-glob: 4.0.3
@@ -14298,6 +16348,35 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-import-resolver-node: 0.3.10
+      eslint-module-utils: 2.13.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      hasown: 2.0.4
+      is-core-module: 2.16.2
+      is-glob: 4.0.3
+      minimatch: 3.1.5
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.10
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
   eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(jest@27.5.1(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3)))(typescript@5.9.3):
     dependencies:
       '@typescript-eslint/experimental-utils': 5.62.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
@@ -14328,6 +16407,16 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
+  eslint-plugin-prettier@5.5.6(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(prettier@3.8.1):
+    dependencies:
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      prettier: 3.8.1
+      prettier-linter-helpers: 1.0.1
+      synckit: 0.11.13
+    optionalDependencies:
+      '@types/eslint': 8.56.12
+      eslint-config-prettier: 10.1.8(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+
   eslint-plugin-prettier@5.5.6(@types/eslint@8.56.12)(eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0)))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(prettier@3.8.1):
     dependencies:
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -14376,11 +16465,30 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-vue@9.33.0(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.4
+      semver: 7.8.4
+      vue-eslint-parser: 9.4.3(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
+  eslint-scope@7.2.2:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
@@ -14394,7 +16502,7 @@ snapshots:
 
   eslint-visitor-keys@5.0.1: {}
 
-  eslint-webpack-plugin@3.2.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  eslint-webpack-plugin@3.2.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@types/eslint': 8.56.12
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -14404,6 +16512,48 @@ snapshots:
       schema-utils: 4.3.3
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
 
+  eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.2(supports-color@5.5.0)
+      '@eslint/config-helpers': 0.3.1
+      '@eslint/core': 0.15.2
+      '@eslint/eslintrc': 3.3.3
+      '@eslint/js': 9.31.0
+      '@eslint/plugin-kit': 0.3.5
+      '@humanfs/node': 0.16.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      '@types/json-schema': 7.0.15
+      ajv: 6.15.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3(supports-color@5.5.0)
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.5
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))
@@ -14492,6 +16642,12 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.17.0)
       eslint-visitor-keys: 4.2.1
 
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.17.0
+      acorn-jsx: 5.3.2(acorn@8.17.0)
+      eslint-visitor-keys: 3.4.3
+
   esprima@1.2.5: {}
 
   esprima@4.0.1: {}
@@ -14522,6 +16678,8 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
+  eventemitter2@5.0.1: {}
+
   eventemitter3@4.0.7: {}
 
   eventemitter3@5.0.4: {}
@@ -14558,11 +16716,46 @@ snapshots:
       cookie: 0.7.2
       cookie-signature: 1.0.7
       debug: 2.6.9
-      depd: 2.0.0
-      on-headers: 1.1.0
+      depd: 2.0.0
+      on-headers: 1.1.0
+      parseurl: 1.3.3
+      safe-buffer: 5.2.1
+      uid-safe: 2.1.5
+    transitivePeerDependencies:
+      - supports-color
+
+  express@4.16.4:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.18.3
+      content-disposition: 0.5.2
+      content-type: 1.0.5
+      cookie: 0.3.1
+      cookie-signature: 1.0.6
+      debug: 2.6.9
+      depd: 1.1.2
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.1.1
+      fresh: 0.5.2
+      merge-descriptors: 1.0.1
+      methods: 1.1.2
+      on-finished: 2.3.0
       parseurl: 1.3.3
-      safe-buffer: 5.2.1
-      uid-safe: 2.1.5
+      path-to-regexp: 0.1.7
+      proxy-addr: 2.0.7
+      qs: 6.5.2
+      range-parser: 1.2.1
+      safe-buffer: 5.1.2
+      send: 0.16.2
+      serve-static: 1.13.2
+      setprototypeof: 1.1.0
+      statuses: 1.4.0
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
     transitivePeerDependencies:
       - supports-color
 
@@ -14639,6 +16832,8 @@ snapshots:
 
   fast-copy@4.0.3: {}
 
+  fast-deep-equal@2.0.1: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -14683,7 +16878,7 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
-  file-loader@6.2.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  file-loader@6.2.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
@@ -14707,6 +16902,18 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@1.1.1:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      on-finished: 2.3.0
+      parseurl: 1.3.3
+      statuses: 1.4.0
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   finalhandler@1.3.2:
     dependencies:
       debug: 2.6.9
@@ -14736,6 +16943,8 @@ snapshots:
       make-dir: 3.1.0
       pkg-dir: 4.2.0
 
+  find-root@1.1.0: {}
+
   find-up@3.0.0:
     dependencies:
       locate-path: 3.0.0
@@ -14750,6 +16959,23 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
+  flaschenpost@1.1.3:
+    dependencies:
+      '@babel/runtime': 7.2.0
+      app-root-path: 2.1.0
+      babel-runtime: 6.26.0
+      chalk: 2.4.1
+      find-root: 1.1.0
+      lodash: 4.17.11
+      moment: 2.22.2
+      processenv: 1.1.0
+      split2: 3.0.0
+      stack-trace: 0.0.10
+      stringify-object: 3.3.0
+      untildify: 3.0.3
+      util.promisify: 1.0.0
+      varname: 2.0.3
+
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.4.2
@@ -14768,7 +16994,7 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@babel/code-frame': 7.29.7
       '@types/json-schema': 7.0.15
@@ -14804,6 +17030,8 @@ snapshots:
       hasown: 2.0.4
       mime-types: 2.1.35
 
+  formats@1.0.0: {}
+
   formidable@3.5.4:
     dependencies:
       '@paralleldrive/cuid2': 2.3.1
@@ -14812,6 +17040,8 @@ snapshots:
 
   forwarded@0.2.0: {}
 
+  fraction.js@4.3.7: {}
+
   fraction.js@5.3.4: {}
 
   framer-motion@12.29.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
@@ -14984,6 +17214,10 @@ snapshots:
       kind-of: 6.0.3
       which: 1.3.1
 
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
   globals@14.0.0: {}
 
   globals@17.1.0: {}
@@ -15059,6 +17293,11 @@ snapshots:
   has-unicode@2.0.1:
     optional: true
 
+  hase@2.0.0:
+    dependencies:
+      '@babel/runtime': 7.1.2
+      amqplib: 0.5.2
+
   hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
@@ -15067,8 +17306,12 @@ snapshots:
 
   help-me@5.0.0: {}
 
+  hookable@5.5.3: {}
+
   hoopy@0.1.4: {}
 
+  hosted-git-info@2.8.9: {}
+
   hpack.js@2.1.6:
     dependencies:
       inherits: 2.0.4
@@ -15094,11 +17337,11 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.48.0
 
-  html-webpack-plugin@5.6.7(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  html-webpack-plugin@5.6.7(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
-      lodash: 4.18.1
+      lodash: 4.17.21
       pretty-error: 4.0.0
       tapable: 2.3.3
     optionalDependencies:
@@ -15116,6 +17359,13 @@ snapshots:
 
   http-deceiver@1.2.7: {}
 
+  http-errors@1.6.3:
+    dependencies:
+      depd: 1.1.2
+      inherits: 2.0.3
+      setprototypeof: 1.1.0
+      statuses: 1.5.0
+
   http-errors@1.8.1:
     dependencies:
       depd: 1.1.2
@@ -15180,6 +17430,10 @@ snapshots:
 
   hyphenate-style-name@1.1.0: {}
 
+  iconv-lite@0.4.23:
+    dependencies:
+      safer-buffer: 2.1.2
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -15192,9 +17446,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.15):
+  icss-utils@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
   idb@7.1.1: {}
 
@@ -15224,6 +17478,8 @@ snapshots:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
 
+  import-meta-resolve@4.2.0: {}
+
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0:
@@ -15237,6 +17493,8 @@ snapshots:
       once: 1.4.0
       wrappy: 1.0.2
 
+  inherits@2.0.3: {}
+
   inherits@2.0.4: {}
 
   ini@1.3.8: {}
@@ -15425,6 +17683,8 @@ snapshots:
 
   is-what@4.1.16: {}
 
+  is-what@5.5.0: {}
+
   is-wsl@2.2.0:
     dependencies:
       is-docker: 2.2.1
@@ -15433,6 +17693,8 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
+  isarray@0.0.1: {}
+
   isarray@1.0.0: {}
 
   isarray@2.0.5: {}
@@ -15502,7 +17764,7 @@ snapshots:
       '@jest/environment': 27.5.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       co: 4.6.0
       dedent: 0.7.0
@@ -15600,7 +17862,7 @@ snapshots:
       '@jest/environment': 27.5.1
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       jest-mock: 27.5.1
       jest-util: 27.5.1
       jsdom: 16.7.0
@@ -15615,7 +17877,7 @@ snapshots:
       '@jest/environment': 27.5.1
       '@jest/fake-timers': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       jest-mock: 27.5.1
       jest-util: 27.5.1
 
@@ -15625,7 +17887,7 @@ snapshots:
     dependencies:
       '@jest/types': 27.5.1
       '@types/graceful-fs': 4.1.9
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -15644,7 +17906,7 @@ snapshots:
       '@jest/source-map': 27.5.1
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       co: 4.6.0
       expect: 27.5.1
@@ -15699,7 +17961,7 @@ snapshots:
   jest-mock@27.5.1:
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
 
   jest-pnp-resolver@1.2.3(jest-resolve@27.5.1):
     optionalDependencies:
@@ -15737,7 +17999,7 @@ snapshots:
       '@jest/test-result': 27.5.1
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       emittery: 0.8.1
       graceful-fs: 4.2.11
@@ -15788,7 +18050,7 @@ snapshots:
 
   jest-serializer@27.5.1:
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       graceful-fs: 4.2.11
 
   jest-snapshot@27.5.1:
@@ -15821,7 +18083,7 @@ snapshots:
   jest-util@27.5.1:
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -15830,7 +18092,7 @@ snapshots:
   jest-util@28.1.3:
     dependencies:
       '@jest/types': 28.1.3
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
@@ -15860,7 +18122,7 @@ snapshots:
     dependencies:
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       jest-util: 27.5.1
@@ -15870,7 +18132,7 @@ snapshots:
     dependencies:
       '@jest/test-result': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.10.2
@@ -15879,19 +18141,19 @@ snapshots:
 
   jest-worker@26.6.2:
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       merge-stream: 2.0.0
       supports-color: 7.2.0
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
   jest-worker@28.1.3:
     dependencies:
-      '@types/node': 25.0.10
+      '@types/node': 22.19.7
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -15974,6 +18236,12 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
+  json-lines@1.0.0:
+    dependencies:
+      timer2: 1.0.0
+
+  json-parse-better-errors@1.0.2: {}
+
   json-parse-even-better-errors@2.3.1: {}
 
   json-schema-traverse@0.4.1: {}
@@ -16002,6 +18270,19 @@ snapshots:
 
   jsonpointer@5.0.1: {}
 
+  jsonwebtoken@8.5.0:
+    dependencies:
+      jws: 3.2.3
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 5.7.2
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -16009,6 +18290,17 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  jwa@1.4.2:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@3.2.3:
+    dependencies:
+      jwa: 1.4.2
+      safe-buffer: 5.2.1
+
   jwt-decode@4.0.0: {}
 
   keyv@4.5.4:
@@ -16045,66 +18337,111 @@ snapshots:
   lightningcss-android-arm64@1.32.0:
     optional: true
 
+  lightningcss-darwin-arm64@1.30.1:
+    optional: true
+
   lightningcss-darwin-arm64@1.30.2:
     optional: true
 
   lightningcss-darwin-arm64@1.32.0:
     optional: true
 
+  lightningcss-darwin-x64@1.30.1:
+    optional: true
+
   lightningcss-darwin-x64@1.30.2:
     optional: true
 
   lightningcss-darwin-x64@1.32.0:
     optional: true
 
+  lightningcss-freebsd-x64@1.30.1:
+    optional: true
+
   lightningcss-freebsd-x64@1.30.2:
     optional: true
 
   lightningcss-freebsd-x64@1.32.0:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.30.1:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.30.2:
     optional: true
 
   lightningcss-linux-arm-gnueabihf@1.32.0:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.30.1:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.30.2:
     optional: true
 
   lightningcss-linux-arm64-gnu@1.32.0:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.30.1:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.30.2:
     optional: true
 
   lightningcss-linux-arm64-musl@1.32.0:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.30.1:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.30.2:
     optional: true
 
   lightningcss-linux-x64-gnu@1.32.0:
     optional: true
 
+  lightningcss-linux-x64-musl@1.30.1:
+    optional: true
+
   lightningcss-linux-x64-musl@1.30.2:
     optional: true
 
   lightningcss-linux-x64-musl@1.32.0:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.30.1:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.30.2:
     optional: true
 
   lightningcss-win32-arm64-msvc@1.32.0:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.30.1:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.30.2:
     optional: true
 
   lightningcss-win32-x64-msvc@1.32.0:
     optional: true
 
+  lightningcss@1.30.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.30.1
+      lightningcss-darwin-x64: 1.30.1
+      lightningcss-freebsd-x64: 1.30.1
+      lightningcss-linux-arm-gnueabihf: 1.30.1
+      lightningcss-linux-arm64-gnu: 1.30.1
+      lightningcss-linux-arm64-musl: 1.30.1
+      lightningcss-linux-x64-gnu: 1.30.1
+      lightningcss-linux-x64-musl: 1.30.1
+      lightningcss-win32-arm64-msvc: 1.30.1
+      lightningcss-win32-x64-msvc: 1.30.1
+
   lightningcss@1.30.2:
     dependencies:
       detect-libc: 2.1.2
@@ -16141,6 +18478,11 @@ snapshots:
 
   lilconfig@3.1.3: {}
 
+  limes@2.0.0:
+    dependencies:
+      '@babel/runtime': 7.3.4
+      jsonwebtoken: 8.5.0
+
   lines-and-columns@1.2.4: {}
 
   lint-staged@16.2.7:
@@ -16162,6 +18504,13 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.2
 
+  load-json-file@4.0.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      parse-json: 4.0.0
+      pify: 3.0.0
+      strip-bom: 3.0.0
+
   loader-runner@4.3.2: {}
 
   loader-utils@2.0.4:
@@ -16187,14 +18536,34 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
+  lodash.includes@4.3.0: {}
+
+  lodash.isboolean@3.0.3: {}
+
+  lodash.isinteger@4.0.4: {}
+
+  lodash.isnumber@3.0.3: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.isstring@4.0.1: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
+  lodash.once@4.1.1: {}
+
   lodash.sortby@4.7.0: {}
 
   lodash.uniq@4.5.0: {}
 
+  lodash@4.17.11: {}
+
+  lodash@4.17.21: {}
+
+  lodash@4.17.5: {}
+
   lodash@4.18.1: {}
 
   log-update@6.1.0:
@@ -16228,6 +18597,10 @@ snapshots:
 
   lru.min@1.1.4: {}
 
+  lusca@1.6.1:
+    dependencies:
+      tsscmp: 1.0.6
+
   magic-string@0.25.9:
     dependencies:
       sourcemap-codec: 1.4.8
@@ -16287,10 +18660,14 @@ snapshots:
     dependencies:
       fs-monkey: 1.1.0
 
+  memorystream@0.3.1: {}
+
   merge-anything@5.1.7:
     dependencies:
       is-what: 4.1.16
 
+  merge-descriptors@1.0.1: {}
+
   merge-descriptors@1.0.3: {}
 
   merge-descriptors@2.0.0: {}
@@ -16318,6 +18695,8 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
+  mime@1.4.1: {}
+
   mime@1.6.0: {}
 
   mime@2.6.0: {}
@@ -16328,7 +18707,7 @@ snapshots:
 
   mimic-response@3.1.0: {}
 
-  mini-css-extract-plugin@2.10.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  mini-css-extract-plugin@2.10.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       schema-utils: 4.3.3
       tapable: 2.3.3
@@ -16396,6 +18775,12 @@ snapshots:
       minipass: 3.3.6
       yallist: 4.0.0
 
+  minizlib@3.1.0:
+    dependencies:
+      minipass: 7.1.3
+
+  mitt@3.0.1: {}
+
   mkdirp-classic@0.5.3: {}
 
   mkdirp@0.5.6:
@@ -16411,6 +18796,18 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.4
 
+  moment@2.22.2: {}
+
+  morgan@1.9.1:
+    dependencies:
+      basic-auth: 2.0.1
+      debug: 2.6.9
+      depd: 1.1.2
+      on-finished: 2.3.0
+      on-headers: 1.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   motion-dom@12.40.0:
     dependencies:
       motion-utils: 12.39.0
@@ -16421,6 +18818,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  muggle-string@0.4.1: {}
+
   multer@2.0.2:
     dependencies:
       append-field: 1.0.0
@@ -16491,11 +18890,15 @@ snapshots:
 
   neo-async@2.6.2: {}
 
+  nice-try@1.0.5: {}
+
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
       tslib: 2.8.1
 
+  nocache@2.0.0: {}
+
   node-abi@3.92.0:
     dependencies:
       semver: 7.8.4
@@ -16536,6 +18939,12 @@ snapshots:
 
   node-releases@2.0.48: {}
 
+  node-rsa@0.4.2:
+    dependencies:
+      asn1: 0.2.3
+
+  node-statsd@0.1.1: {}
+
   nodemon@3.1.11:
     dependencies:
       chokidar: 3.6.0
@@ -16554,10 +18963,31 @@ snapshots:
       abbrev: 1.1.1
     optional: true
 
+  normalize-package-data@2.5.0:
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.12
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+
   normalize-path@3.0.0: {}
 
+  normalize-range@0.1.2: {}
+
   normalize-url@6.1.0: {}
 
+  npm-run-all@4.1.5:
+    dependencies:
+      ansi-styles: 3.2.1
+      chalk: 2.4.2
+      cross-spawn: 6.0.6
+      memorystream: 0.3.1
+      minimatch: 3.1.5
+      pidtree: 0.3.1
+      read-pkg: 3.0.0
+      shell-quote: 1.8.4
+      string.prototype.padend: 3.1.6
+
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
@@ -16651,10 +19081,16 @@ snapshots:
 
   on-exit-leak-free@2.1.2: {}
 
+  on-finished@2.3.0:
+    dependencies:
+      ee-first: 1.1.1
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
 
+  on-headers@1.0.2: {}
+
   on-headers@1.1.0: {}
 
   once@1.4.0:
@@ -16752,6 +19188,11 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parse-json@4.0.0:
+    dependencies:
+      error-ex: 1.3.4
+      json-parse-better-errors: 1.0.2
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -16763,6 +19204,8 @@ snapshots:
 
   parseurl@1.3.3: {}
 
+  partof@1.0.0: {}
+
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
@@ -16780,12 +19223,16 @@ snapshots:
       pause: 0.0.1
       utils-merge: 1.0.1
 
+  path-browserify@1.0.1: {}
+
   path-exists@3.0.0: {}
 
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
 
+  path-key@2.0.1: {}
+
   path-key@3.1.1: {}
 
   path-parse@1.0.7: {}
@@ -16797,8 +19244,14 @@ snapshots:
 
   path-to-regexp@0.1.13: {}
 
+  path-to-regexp@0.1.7: {}
+
   path-to-regexp@8.4.2: {}
 
+  path-type@3.0.0:
+    dependencies:
+      pify: 3.0.0
+
   path-type@4.0.0: {}
 
   pathe@1.1.2: {}
@@ -16821,10 +19274,21 @@ snapshots:
 
   picomatch@4.0.4: {}
 
+  pidtree@0.3.1: {}
+
   pidtree@0.6.1: {}
 
   pify@2.3.0: {}
 
+  pify@3.0.0: {}
+
+  pinia@3.0.3(typescript@5.8.3)(vue@3.5.22(typescript@5.8.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.22(typescript@5.8.3)
+    optionalDependencies:
+      typescript: 5.8.3
+
   pino-abstract-transport@3.0.0:
     dependencies:
       split2: 4.2.0
@@ -16886,401 +19350,401 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-attribute-case-insensitive@5.0.2(postcss@8.5.15):
+  postcss-attribute-case-insensitive@5.0.2(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-browser-comments@4.0.0(browserslist@4.28.2)(postcss@8.5.15):
+  postcss-browser-comments@4.0.0(browserslist@4.28.2)(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-calc@8.2.4(postcss@8.5.15):
+  postcss-calc@8.2.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-clamp@4.1.0(postcss@8.5.15):
+  postcss-clamp@4.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-color-functional-notation@4.2.4(postcss@8.5.15):
+  postcss-color-functional-notation@4.2.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-color-hex-alpha@8.0.4(postcss@8.5.15):
+  postcss-color-hex-alpha@8.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-color-rebeccapurple@7.1.1(postcss@8.5.15):
+  postcss-color-rebeccapurple@7.1.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@5.3.1(postcss@8.5.15):
+  postcss-colormin@5.3.1(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@5.1.3(postcss@8.5.15):
+  postcss-convert-values@5.1.3(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-custom-media@8.0.2(postcss@8.5.15):
+  postcss-custom-media@8.0.2(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-custom-properties@12.1.11(postcss@8.5.15):
+  postcss-custom-properties@12.1.11(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-custom-selectors@6.0.3(postcss@8.5.15):
+  postcss-custom-selectors@6.0.3(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-dir-pseudo-class@6.0.5(postcss@8.5.15):
+  postcss-dir-pseudo-class@6.0.5(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-discard-comments@5.1.2(postcss@8.5.15):
+  postcss-discard-comments@5.1.2(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-discard-duplicates@5.1.0(postcss@8.5.15):
+  postcss-discard-duplicates@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-discard-empty@5.1.1(postcss@8.5.15):
+  postcss-discard-empty@5.1.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-discard-overridden@5.1.0(postcss@8.5.15):
+  postcss-discard-overridden@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-double-position-gradients@3.1.2(postcss@8.5.15):
+  postcss-double-position-gradients@3.1.2(postcss@8.5.6):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.15)
-      postcss: 8.5.15
+      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-env-function@4.0.6(postcss@8.5.15):
+  postcss-env-function@4.0.6(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-flexbugs-fixes@5.0.2(postcss@8.5.15):
+  postcss-flexbugs-fixes@5.0.2(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-focus-visible@6.0.4(postcss@8.5.15):
+  postcss-focus-visible@6.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-focus-within@5.0.4(postcss@8.5.15):
+  postcss-focus-within@5.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-font-variant@5.0.0(postcss@8.5.15):
+  postcss-font-variant@5.0.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-gap-properties@3.0.5(postcss@8.5.15):
+  postcss-gap-properties@3.0.5(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-image-set-function@4.0.7(postcss@8.5.15):
+  postcss-image-set-function@4.0.7(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-import@15.1.0(postcss@8.5.15):
+  postcss-import@15.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.12
 
-  postcss-initial@4.0.1(postcss@8.5.15):
+  postcss-initial@4.0.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-js@4.1.0(postcss@8.5.15):
+  postcss-js@4.1.0(postcss@8.5.6):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-lab-function@4.2.1(postcss@8.5.15):
+  postcss-lab-function@4.2.1(postcss@8.5.6):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.15)
-      postcss: 8.5.15
+      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 1.21.7
-      postcss: 8.5.15
+      postcss: 8.5.6
       tsx: 4.22.4
       yaml: 2.9.0
 
-  postcss-loader@6.2.1(postcss@8.5.15)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  postcss-loader@6.2.1(postcss@8.5.6)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       cosmiconfig: 7.1.0
       klona: 2.0.6
-      postcss: 8.5.15
+      postcss: 8.5.6
       semver: 7.8.4
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
 
-  postcss-logical@5.0.4(postcss@8.5.15):
+  postcss-logical@5.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-media-minmax@5.0.0(postcss@8.5.15):
+  postcss-media-minmax@5.0.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-merge-longhand@5.1.7(postcss@8.5.15):
+  postcss-merge-longhand@5.1.7(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
-      stylehacks: 5.1.1(postcss@8.5.15)
+      stylehacks: 5.1.1(postcss@8.5.6)
 
-  postcss-merge-rules@5.1.4(postcss@8.5.15):
+  postcss-merge-rules@5.1.4(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
       caniuse-api: 3.0.0
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-minify-font-values@5.1.0(postcss@8.5.15):
+  postcss-minify-font-values@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@5.1.1(postcss@8.5.15):
+  postcss-minify-gradients@5.1.1(postcss@8.5.6):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@5.1.4(postcss@8.5.15):
+  postcss-minify-params@5.1.4(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@5.2.1(postcss@8.5.15):
+  postcss-minify-selectors@5.2.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.15):
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.15):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.6):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.15):
+  postcss-modules-scope@3.2.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 7.1.4
 
-  postcss-modules-values@4.0.0(postcss@8.5.15):
+  postcss-modules-values@4.0.0(postcss@8.5.6):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      icss-utils: 5.1.0(postcss@8.5.6)
+      postcss: 8.5.6
 
-  postcss-nested@6.2.0(postcss@8.5.15):
+  postcss-nested@6.2.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-nesting@10.2.0(postcss@8.5.15):
+  postcss-nesting@10.2.0(postcss@8.5.6):
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.1.4)
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-normalize-charset@5.1.0(postcss@8.5.15):
+  postcss-normalize-charset@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-normalize-display-values@5.1.0(postcss@8.5.15):
+  postcss-normalize-display-values@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@5.1.1(postcss@8.5.15):
+  postcss-normalize-positions@5.1.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@5.1.1(postcss@8.5.15):
+  postcss-normalize-repeat-style@5.1.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@5.1.0(postcss@8.5.15):
+  postcss-normalize-string@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@5.1.0(postcss@8.5.15):
+  postcss-normalize-timing-functions@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@5.1.1(postcss@8.5.15):
+  postcss-normalize-unicode@5.1.1(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@5.1.0(postcss@8.5.15):
+  postcss-normalize-url@5.1.0(postcss@8.5.6):
     dependencies:
       normalize-url: 6.1.0
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@5.1.1(postcss@8.5.15):
+  postcss-normalize-whitespace@5.1.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize@10.0.1(browserslist@4.28.2)(postcss@8.5.15):
+  postcss-normalize@10.0.1(browserslist@4.28.2)(postcss@8.5.6):
     dependencies:
       '@csstools/normalize.css': 12.1.1
       browserslist: 4.28.2
-      postcss: 8.5.15
-      postcss-browser-comments: 4.0.0(browserslist@4.28.2)(postcss@8.5.15)
+      postcss: 8.5.6
+      postcss-browser-comments: 4.0.0(browserslist@4.28.2)(postcss@8.5.6)
       sanitize.css: 13.0.0
 
-  postcss-opacity-percentage@1.1.3(postcss@8.5.15):
+  postcss-opacity-percentage@1.1.3(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-ordered-values@5.1.3(postcss@8.5.15):
+  postcss-ordered-values@5.1.3(postcss@8.5.6):
     dependencies:
-      cssnano-utils: 3.1.0(postcss@8.5.15)
-      postcss: 8.5.15
+      cssnano-utils: 3.1.0(postcss@8.5.6)
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-overflow-shorthand@3.0.4(postcss@8.5.15):
+  postcss-overflow-shorthand@3.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-page-break@3.0.4(postcss@8.5.15):
+  postcss-page-break@3.0.4(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-place@7.0.5(postcss@8.5.15):
+  postcss-place@7.0.5(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-preset-env@7.8.3(postcss@8.5.15):
-    dependencies:
-      '@csstools/postcss-cascade-layers': 1.1.1(postcss@8.5.15)
-      '@csstools/postcss-color-function': 1.1.1(postcss@8.5.15)
-      '@csstools/postcss-font-format-keywords': 1.0.1(postcss@8.5.15)
-      '@csstools/postcss-hwb-function': 1.0.2(postcss@8.5.15)
-      '@csstools/postcss-ic-unit': 1.0.1(postcss@8.5.15)
-      '@csstools/postcss-is-pseudo-class': 2.0.7(postcss@8.5.15)
-      '@csstools/postcss-nested-calc': 1.0.0(postcss@8.5.15)
-      '@csstools/postcss-normalize-display-values': 1.0.1(postcss@8.5.15)
-      '@csstools/postcss-oklab-function': 1.1.1(postcss@8.5.15)
-      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.15)
-      '@csstools/postcss-stepped-value-functions': 1.0.1(postcss@8.5.15)
-      '@csstools/postcss-text-decoration-shorthand': 1.0.0(postcss@8.5.15)
-      '@csstools/postcss-trigonometric-functions': 1.0.2(postcss@8.5.15)
-      '@csstools/postcss-unset-value': 1.0.2(postcss@8.5.15)
-      autoprefixer: 10.5.0(postcss@8.5.15)
+  postcss-preset-env@7.8.3(postcss@8.5.6):
+    dependencies:
+      '@csstools/postcss-cascade-layers': 1.1.1(postcss@8.5.6)
+      '@csstools/postcss-color-function': 1.1.1(postcss@8.5.6)
+      '@csstools/postcss-font-format-keywords': 1.0.1(postcss@8.5.6)
+      '@csstools/postcss-hwb-function': 1.0.2(postcss@8.5.6)
+      '@csstools/postcss-ic-unit': 1.0.1(postcss@8.5.6)
+      '@csstools/postcss-is-pseudo-class': 2.0.7(postcss@8.5.6)
+      '@csstools/postcss-nested-calc': 1.0.0(postcss@8.5.6)
+      '@csstools/postcss-normalize-display-values': 1.0.1(postcss@8.5.6)
+      '@csstools/postcss-oklab-function': 1.1.1(postcss@8.5.6)
+      '@csstools/postcss-progressive-custom-properties': 1.3.0(postcss@8.5.6)
+      '@csstools/postcss-stepped-value-functions': 1.0.1(postcss@8.5.6)
+      '@csstools/postcss-text-decoration-shorthand': 1.0.0(postcss@8.5.6)
+      '@csstools/postcss-trigonometric-functions': 1.0.2(postcss@8.5.6)
+      '@csstools/postcss-unset-value': 1.0.2(postcss@8.5.6)
+      autoprefixer: 10.4.21(postcss@8.5.6)
       browserslist: 4.28.2
-      css-blank-pseudo: 3.0.3(postcss@8.5.15)
-      css-has-pseudo: 3.0.4(postcss@8.5.15)
-      css-prefers-color-scheme: 6.0.3(postcss@8.5.15)
+      css-blank-pseudo: 3.0.3(postcss@8.5.6)
+      css-has-pseudo: 3.0.4(postcss@8.5.6)
+      css-prefers-color-scheme: 6.0.3(postcss@8.5.6)
       cssdb: 7.11.2
-      postcss: 8.5.15
-      postcss-attribute-case-insensitive: 5.0.2(postcss@8.5.15)
-      postcss-clamp: 4.1.0(postcss@8.5.15)
-      postcss-color-functional-notation: 4.2.4(postcss@8.5.15)
-      postcss-color-hex-alpha: 8.0.4(postcss@8.5.15)
-      postcss-color-rebeccapurple: 7.1.1(postcss@8.5.15)
-      postcss-custom-media: 8.0.2(postcss@8.5.15)
-      postcss-custom-properties: 12.1.11(postcss@8.5.15)
-      postcss-custom-selectors: 6.0.3(postcss@8.5.15)
-      postcss-dir-pseudo-class: 6.0.5(postcss@8.5.15)
-      postcss-double-position-gradients: 3.1.2(postcss@8.5.15)
-      postcss-env-function: 4.0.6(postcss@8.5.15)
-      postcss-focus-visible: 6.0.4(postcss@8.5.15)
-      postcss-focus-within: 5.0.4(postcss@8.5.15)
-      postcss-font-variant: 5.0.0(postcss@8.5.15)
-      postcss-gap-properties: 3.0.5(postcss@8.5.15)
-      postcss-image-set-function: 4.0.7(postcss@8.5.15)
-      postcss-initial: 4.0.1(postcss@8.5.15)
-      postcss-lab-function: 4.2.1(postcss@8.5.15)
-      postcss-logical: 5.0.4(postcss@8.5.15)
-      postcss-media-minmax: 5.0.0(postcss@8.5.15)
-      postcss-nesting: 10.2.0(postcss@8.5.15)
-      postcss-opacity-percentage: 1.1.3(postcss@8.5.15)
-      postcss-overflow-shorthand: 3.0.4(postcss@8.5.15)
-      postcss-page-break: 3.0.4(postcss@8.5.15)
-      postcss-place: 7.0.5(postcss@8.5.15)
-      postcss-pseudo-class-any-link: 7.1.6(postcss@8.5.15)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.15)
-      postcss-selector-not: 6.0.1(postcss@8.5.15)
+      postcss: 8.5.6
+      postcss-attribute-case-insensitive: 5.0.2(postcss@8.5.6)
+      postcss-clamp: 4.1.0(postcss@8.5.6)
+      postcss-color-functional-notation: 4.2.4(postcss@8.5.6)
+      postcss-color-hex-alpha: 8.0.4(postcss@8.5.6)
+      postcss-color-rebeccapurple: 7.1.1(postcss@8.5.6)
+      postcss-custom-media: 8.0.2(postcss@8.5.6)
+      postcss-custom-properties: 12.1.11(postcss@8.5.6)
+      postcss-custom-selectors: 6.0.3(postcss@8.5.6)
+      postcss-dir-pseudo-class: 6.0.5(postcss@8.5.6)
+      postcss-double-position-gradients: 3.1.2(postcss@8.5.6)
+      postcss-env-function: 4.0.6(postcss@8.5.6)
+      postcss-focus-visible: 6.0.4(postcss@8.5.6)
+      postcss-focus-within: 5.0.4(postcss@8.5.6)
+      postcss-font-variant: 5.0.0(postcss@8.5.6)
+      postcss-gap-properties: 3.0.5(postcss@8.5.6)
+      postcss-image-set-function: 4.0.7(postcss@8.5.6)
+      postcss-initial: 4.0.1(postcss@8.5.6)
+      postcss-lab-function: 4.2.1(postcss@8.5.6)
+      postcss-logical: 5.0.4(postcss@8.5.6)
+      postcss-media-minmax: 5.0.0(postcss@8.5.6)
+      postcss-nesting: 10.2.0(postcss@8.5.6)
+      postcss-opacity-percentage: 1.1.3(postcss@8.5.6)
+      postcss-overflow-shorthand: 3.0.4(postcss@8.5.6)
+      postcss-page-break: 3.0.4(postcss@8.5.6)
+      postcss-place: 7.0.5(postcss@8.5.6)
+      postcss-pseudo-class-any-link: 7.1.6(postcss@8.5.6)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.6)
+      postcss-selector-not: 6.0.1(postcss@8.5.6)
       postcss-value-parser: 4.2.0
 
-  postcss-pseudo-class-any-link@7.1.6(postcss@8.5.15):
+  postcss-pseudo-class-any-link@7.1.6(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
-  postcss-reduce-initial@5.1.2(postcss@8.5.15):
+  postcss-reduce-initial@5.1.2(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
       caniuse-api: 3.0.0
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-reduce-transforms@5.1.0(postcss@8.5.15):
+  postcss-reduce-transforms@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.15):
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
 
-  postcss-selector-not@6.0.1(postcss@8.5.15):
+  postcss-selector-not@6.0.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
   postcss-selector-parser@6.1.4:
@@ -17293,15 +19757,15 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-svgo@5.1.0(postcss@8.5.15):
+  postcss-svgo@5.1.0(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-value-parser: 4.2.0
       svgo: 2.8.2
 
-  postcss-unique-selectors@5.1.1(postcss@8.5.15):
+  postcss-unique-selectors@5.1.1(postcss@8.5.6):
     dependencies:
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
   postcss-value-parser@4.2.0: {}
@@ -17358,7 +19822,7 @@ snapshots:
 
   pretty-error@4.0.0:
     dependencies:
-      lodash: 4.18.1
+      lodash: 4.17.21
       renderkid: 3.0.0
 
   pretty-format@27.5.1:
@@ -17374,12 +19838,28 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 18.3.1
 
+  primeicons@7.0.0: {}
+
+  primevue@4.3.6(vue@3.5.22(typescript@5.8.3)):
+    dependencies:
+      '@primeuix/styled': 0.7.4
+      '@primeuix/styles': 1.2.5
+      '@primeuix/utils': 0.6.4
+      '@primevue/core': 4.3.6(vue@3.5.22(typescript@5.8.3))
+      '@primevue/icons': 4.3.6(vue@3.5.22(typescript@5.8.3))
+    transitivePeerDependencies:
+      - vue
+
   process-nextick-args@2.0.1: {}
 
   process-warning@5.0.0: {}
 
   process@0.11.10: {}
 
+  processenv@1.1.0:
+    dependencies:
+      babel-runtime: 6.26.0
+
   promise-inflight@1.0.1:
     optional: true
 
@@ -17404,6 +19884,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-expr@2.0.6: {}
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -17434,6 +19916,8 @@ snapshots:
     dependencies:
       side-channel: 1.1.1
 
+  qs@6.5.2: {}
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -17452,6 +19936,13 @@ snapshots:
 
   range-parser@1.2.1: {}
 
+  raw-body@2.3.3:
+    dependencies:
+      bytes: 3.0.0
+      http-errors: 1.6.3
+      iconv-lite: 0.4.23
+      unpipe: 1.0.0
+
   raw-body@2.5.3:
     dependencies:
       bytes: 3.1.2
@@ -17487,7 +19978,7 @@ snapshots:
       regenerator-runtime: 0.13.11
       whatwg-fetch: 3.6.20
 
-  react-dev-utils@12.0.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  react-dev-utils@12.0.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@babel/code-frame': 7.29.7
       address: 1.2.2
@@ -17498,7 +19989,7 @@ snapshots:
       escape-string-regexp: 4.0.0
       filesize: 8.0.7
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -17560,56 +20051,56 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.3(react@19.2.3)
 
-  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(@swc/core@1.15.41)(@types/babel__core@7.20.5)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(lightningcss@1.32.0)(react@19.2.3)(sass@1.93.2)(supports-color@5.5.0)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3))(tsx@4.22.4)(type-fest@0.21.3)(typescript@5.9.3)(yaml@2.9.0):
+  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(@swc/core@1.15.41)(@types/babel__core@7.20.5)(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(lightningcss@1.32.0)(react@19.2.3)(sass@1.93.2)(supports-color@5.5.0)(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3))(tsx@4.22.4)(type-fest@4.41.0)(typescript@5.9.3)(yaml@2.9.0):
     dependencies:
       '@babel/core': 7.29.7
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(react-refresh@0.11.0)(type-fest@0.21.3)(webpack-dev-server@4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      '@svgr/webpack': 5.5.0(supports-color@5.5.0)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      '@svgr/webpack': 5.5.0
       babel-jest: 27.5.1(@babel/core@7.29.7)
-      babel-loader: 8.4.1(@babel/core@7.29.7)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      babel-loader: 8.4.1(@babel/core@7.29.7)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       babel-plugin-named-asset-import: 0.3.8(@babel/core@7.29.7)
       babel-preset-react-app: 10.1.0
       bfj: 7.1.0
       browserslist: 4.28.2
       camelcase: 6.3.0
       case-sensitive-paths-webpack-plugin: 2.4.0
-      css-loader: 6.11.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      css-minimizer-webpack-plugin: 3.4.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      css-loader: 6.11.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      css-minimizer-webpack-plugin: 3.4.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       dotenv: 10.0.0
       dotenv-expand: 5.1.0
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
       eslint-config-react-app: 7.0.1(@babel/plugin-syntax-flow@7.29.7(@babel/core@7.29.7))(@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(jest@27.5.1(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3)))(supports-color@5.5.0)(typescript@5.9.3)
-      eslint-webpack-plugin: 3.2.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      file-loader: 6.2.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      eslint-webpack-plugin: 3.2.0(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      file-loader: 6.2.0(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       fs-extra: 10.1.0
-      html-webpack-plugin: 5.6.7(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      html-webpack-plugin: 5.6.7(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       identity-obj-proxy: 3.0.0
       jest: 27.5.1(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3))
       jest-resolve: 27.5.1
       jest-watch-typeahead: 1.1.0(jest@27.5.1(ts-node@10.9.2(@swc/core@1.15.41)(@types/node@25.0.10)(typescript@5.9.3)))
-      mini-css-extract-plugin: 2.10.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      postcss: 8.5.15
-      postcss-flexbugs-fixes: 5.0.2(postcss@8.5.15)
-      postcss-loader: 6.2.1(postcss@8.5.15)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      postcss-normalize: 10.0.1(browserslist@4.28.2)(postcss@8.5.15)
-      postcss-preset-env: 7.8.3(postcss@8.5.15)
+      mini-css-extract-plugin: 2.10.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      postcss: 8.5.6
+      postcss-flexbugs-fixes: 5.0.2(postcss@8.5.6)
+      postcss-loader: 6.2.1(postcss@8.5.6)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      postcss-normalize: 10.0.1(browserslist@4.28.2)(postcss@8.5.6)
+      postcss-preset-env: 7.8.3(postcss@8.5.6)
       prompts: 2.4.2
       react: 19.2.3
       react-app-polyfill: 3.0.0
-      react-dev-utils: 12.0.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      react-dev-utils: 12.0.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       react-refresh: 0.11.0
       resolve: 1.22.12
       resolve-url-loader: 4.0.0
-      sass-loader: 12.6.0(sass@1.93.2)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      sass-loader: 12.6.0(sass@1.93.2)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       semver: 7.8.4
-      source-map-loader: 3.0.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      style-loader: 3.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      source-map-loader: 3.0.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      style-loader: 3.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       tailwindcss: 3.4.19(tsx@4.22.4)(yaml@2.9.0)
-      terser-webpack-plugin: 5.6.1(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      terser-webpack-plugin: 5.6.1(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
-      webpack-dev-server: 4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      webpack-manifest-plugin: 4.1.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
-      workbox-webpack-plugin: 6.6.0(@types/babel__core@7.20.5)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      webpack-dev-server: 4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      webpack-manifest-plugin: 4.1.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
+      workbox-webpack-plugin: 6.6.0(@types/babel__core@7.20.5)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
     optionalDependencies:
       fsevents: 2.3.3
       typescript: 5.9.3
@@ -17689,6 +20180,19 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
+  read-pkg@3.0.0:
+    dependencies:
+      load-json-file: 4.0.0
+      normalize-package-data: 2.5.0
+      path-type: 3.0.0
+
+  readable-stream@1.1.14:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -17753,6 +20257,10 @@ snapshots:
 
   regenerate@1.4.2: {}
 
+  regenerator-runtime@0.11.1: {}
+
+  regenerator-runtime@0.12.1: {}
+
   regenerator-runtime@0.13.11: {}
 
   regex-parser@2.3.1: {}
@@ -17788,7 +20296,7 @@ snapshots:
       css-select: 4.3.0
       dom-converter: 0.2.0
       htmlparser2: 6.1.0
-      lodash: 4.18.1
+      lodash: 4.17.21
       strip-ansi: 6.0.1
 
   require-directory@2.1.1: {}
@@ -17840,8 +20348,7 @@ snapshots:
       onetime: 7.0.0
       signal-exit: 4.1.0
 
-  retry@0.12.0:
-    optional: true
+  retry@0.12.0: {}
 
   retry@0.13.1: {}
 
@@ -17970,7 +20477,7 @@ snapshots:
 
   sanitize.css@13.0.0: {}
 
-  sass-loader@12.6.0(sass@1.93.2)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  sass-loader@12.6.0(sass@1.93.2)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       klona: 2.0.6
       neo-async: 2.6.2
@@ -17987,6 +20494,14 @@ snapshots:
       '@parcel/watcher': 2.5.6
     optional: true
 
+  sass@1.89.2:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.6
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+
   sass@1.93.2:
     dependencies:
       chokidar: 4.0.3
@@ -18041,10 +20556,30 @@ snapshots:
       '@types/node-forge': 1.3.14
       node-forge: 1.4.0
 
+  semver@5.7.2: {}
+
   semver@6.3.1: {}
 
   semver@7.8.4: {}
 
+  send@0.16.2:
+    dependencies:
+      debug: 2.6.9
+      depd: 1.1.2
+      destroy: 1.0.4
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 1.6.3
+      mime: 1.4.1
+      ms: 2.0.0
+      on-finished: 2.3.0
+      range-parser: 1.2.1
+      statuses: 1.4.0
+    transitivePeerDependencies:
+      - supports-color
+
   send@0.19.2:
     dependencies:
       debug: 2.6.9
@@ -18101,6 +20636,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  serve-static@1.13.2:
+    dependencies:
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.16.2
+    transitivePeerDependencies:
+      - supports-color
+
   serve-static@1.16.3:
     dependencies:
       encodeurl: 2.0.0
@@ -18148,8 +20692,12 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.2
 
+  setprototypeof@1.1.0: {}
+
   setprototypeof@1.2.0: {}
 
+  sha-1@0.1.1: {}
+
   sha.js@2.4.12:
     dependencies:
       inherits: 2.0.4
@@ -18158,10 +20706,16 @@ snapshots:
 
   shallowequal@1.1.0: {}
 
+  shebang-command@1.2.0:
+    dependencies:
+      shebang-regex: 1.0.0
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
+  shebang-regex@1.0.0: {}
+
   shebang-regex@3.0.0: {}
 
   shell-quote@1.8.3: {}
@@ -18247,6 +20801,17 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  socket.io-client@4.8.1(supports-color@5.5.0):
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.3.7
+      engine.io-client: 6.6.6(supports-color@5.5.0)
+      socket.io-parser: 4.2.6(supports-color@5.5.0)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   socket.io-client@4.8.3(supports-color@5.5.0):
     dependencies:
       '@socket.io/component-emitter': 3.1.2
@@ -18308,7 +20873,7 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map-loader@3.0.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  source-map-loader@3.0.2(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       abab: 2.0.6
       iconv-lite: 0.6.3
@@ -18332,6 +20897,20 @@ snapshots:
 
   sourcemap-codec@1.4.8: {}
 
+  spdx-correct@3.2.0:
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.23
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@3.0.1:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.23
+
+  spdx-license-ids@3.0.23: {}
+
   spdy-transport@3.0.0(supports-color@5.5.0):
     dependencies:
       debug: 4.4.3(supports-color@5.5.0)
@@ -18353,6 +20932,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  speakingurl@14.0.1: {}
+
+  split2@3.0.0:
+    dependencies:
+      readable-stream: 3.6.2
+
   split2@4.2.0: {}
 
   sprintf-js@1.0.3: {}
@@ -18386,6 +20971,8 @@ snapshots:
     dependencies:
       stackframe: 1.3.4
 
+  stack-trace@0.0.10: {}
+
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -18409,12 +20996,18 @@ snapshots:
     dependencies:
       escodegen: 2.1.0
 
+  statuses@1.4.0: {}
+
   statuses@1.5.0: {}
 
   statuses@2.0.2: {}
 
   std-env@4.1.0: {}
 
+  stethoskop@1.0.0:
+    dependencies:
+      node-statsd: 0.1.1
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -18481,6 +21074,13 @@ snapshots:
       set-function-name: 2.0.2
       side-channel: 1.1.1
 
+  string.prototype.padend@3.1.6:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.2
+
   string.prototype.repeat@1.0.0:
     dependencies:
       define-properties: 1.2.1
@@ -18510,6 +21110,8 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.2
 
+  string_decoder@0.10.31: {}
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -18551,7 +21153,7 @@ snapshots:
       '@tokenizer/token': 0.3.0
       peek-readable: 4.1.0
 
-  style-loader@3.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  style-loader@3.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
 
@@ -18570,10 +21172,10 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.3(react@19.2.3)
 
-  stylehacks@5.1.1(postcss@8.5.15):
+  stylehacks@5.1.1(postcss@8.5.6):
     dependencies:
       browserslist: 4.28.2
-      postcss: 8.5.15
+      postcss: 8.5.6
       postcss-selector-parser: 6.1.4
 
   stylis@4.3.6: {}
@@ -18604,6 +21206,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
   supertest@7.2.2(supports-color@5.5.0):
     dependencies:
       cookie-signature: 1.2.2
@@ -18674,6 +21280,44 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.3.6
 
+  tailwind@4.0.0:
+    dependencies:
+      '@babel/runtime': 7.3.4
+      ajv: 6.10.0
+      app-root-path: 2.1.0
+      async-retry: 1.2.3
+      body-parser: 1.18.3
+      commands-events: 1.0.4
+      compression: 1.7.3
+      content-type: 1.0.4
+      cors: 2.8.5
+      crypto2: 2.0.0
+      datasette: 1.0.1
+      draht: 1.0.1
+      express: 4.16.4
+      flaschenpost: 1.1.3
+      hase: 2.0.0
+      json-lines: 1.0.0
+      limes: 2.0.0
+      lodash: 4.17.11
+      lusca: 1.6.1
+      morgan: 1.9.1
+      nocache: 2.0.0
+      partof: 1.0.0
+      processenv: 1.1.0
+      stethoskop: 1.0.0
+      timer2: 1.0.0
+      uuidv4: 3.0.1
+      ws: 6.2.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  tailwindcss-primeui@0.6.1(tailwindcss@4.1.11):
+    dependencies:
+      tailwindcss: 4.1.11
+
   tailwindcss@3.4.19(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -18690,11 +21334,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.15
-      postcss-import: 15.1.0(postcss@8.5.15)
-      postcss-js: 4.1.0(postcss@8.5.15)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0)
-      postcss-nested: 6.2.0(postcss@8.5.15)
+      postcss: 8.5.6
+      postcss-import: 15.1.0(postcss@8.5.6)
+      postcss-js: 4.1.0(postcss@8.5.6)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(tsx@4.22.4)(yaml@2.9.0)
+      postcss-nested: 6.2.0(postcss@8.5.6)
       postcss-selector-parser: 6.1.4
       resolve: 1.22.12
       sucrase: 3.35.1
@@ -18702,6 +21346,10 @@ snapshots:
       - tsx
       - yaml
 
+  tailwindcss@4.1.11: {}
+
+  tailwindcss@4.1.14: {}
+
   tailwindcss@4.1.18: {}
 
   tapable@1.1.3: {}
@@ -18732,6 +21380,14 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
+  tar@7.5.16:
+    dependencies:
+      '@isaacs/fs-minipass': 4.0.1
+      chownr: 3.0.0
+      minipass: 7.1.3
+      minizlib: 3.1.0
+      yallist: 5.0.0
+
   temp-dir@2.0.0: {}
 
   tempy@0.6.0:
@@ -18746,7 +21402,7 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@5.6.1(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  terser-webpack-plugin@5.6.1(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
@@ -18756,7 +21412,7 @@ snapshots:
     optionalDependencies:
       '@swc/core': 1.15.41
       lightningcss: 1.32.0
-      postcss: 8.5.15
+      postcss: 8.5.6
 
   terser@5.48.0:
     dependencies:
@@ -18791,6 +21447,10 @@ snapshots:
 
   thunky@1.1.0: {}
 
+  timer2@1.0.0: {}
+
+  tiny-case@1.0.3: {}
+
   tinybench@2.9.0: {}
 
   tinyexec@0.3.2: {}
@@ -18825,6 +21485,8 @@ snapshots:
       '@tokenizer/token': 0.3.0
       ieee754: 1.2.1
 
+  toposort@2.0.2: {}
+
   touch@3.1.1: {}
 
   tough-cookie@4.1.4:
@@ -18846,6 +21508,10 @@ snapshots:
 
   tryer@1.0.1: {}
 
+  ts-api-utils@2.5.0(typescript@5.8.3):
+    dependencies:
+      typescript: 5.8.3
+
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -18919,6 +21585,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  tsscmp@1.0.6: {}
+
   tsutils@3.21.0(typescript@5.9.3):
     dependencies:
       tslib: 1.14.1
@@ -18951,8 +21619,14 @@ snapshots:
 
   type-fest@0.16.0: {}
 
+  type-fest@0.20.2: {}
+
   type-fest@0.21.3: {}
 
+  type-fest@2.19.0: {}
+
+  type-fest@4.41.0: {}
+
   type-is@1.6.18:
     dependencies:
       media-typer: 0.3.0
@@ -19028,10 +21702,21 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  typescript-eslint@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3):
+  typescript-eslint@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3))(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.8.3)
+      '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.61.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(typescript@5.8.3)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript-eslint@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
       '@typescript-eslint/typescript-estree': 8.61.1(typescript@5.9.3)
       '@typescript-eslint/utils': 8.61.1(eslint@9.39.2(jiti@1.21.7)(supports-color@5.5.0))(typescript@5.9.3)
       eslint: 9.39.2(jiti@1.21.7)(supports-color@5.5.0)
@@ -19039,6 +21724,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  typescript@5.8.3: {}
+
   typescript@5.9.3: {}
 
   ufo@1.6.4: {}
@@ -19065,6 +21752,9 @@ snapshots:
 
   undici-types@7.16.0: {}
 
+  undici-types@7.24.6:
+    optional: true
+
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -19125,6 +21815,8 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.12.2
       '@unrs/resolver-binding-win32-x64-msvc': 1.12.2
 
+  untildify@3.0.3: {}
+
   upath@1.2.0: {}
 
   update-browserslist-db@1.2.3(browserslist@4.28.2):
@@ -19144,6 +21836,11 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  util.promisify@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      object.getownpropertydescriptors: 2.1.9
+
   util.promisify@1.0.1:
     dependencies:
       define-properties: 1.2.1
@@ -19155,14 +21852,27 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
+  uuid@11.1.0: {}
+
   uuid@11.1.1: {}
 
   uuid@13.0.0: {}
 
+  uuid@3.3.2: {}
+
   uuid@8.3.2: {}
 
   uuid@9.0.1: {}
 
+  uuidv4@2.0.0:
+    dependencies:
+      sha-1: 0.1.1
+      uuid: 3.3.2
+
+  uuidv4@3.0.1:
+    dependencies:
+      uuid: 3.3.2
+
   v8-compile-cache-lib@3.0.1: {}
 
   v8-to-istanbul@8.1.1:
@@ -19171,10 +21881,30 @@ snapshots:
       convert-source-map: 1.9.0
       source-map: 0.7.6
 
+  validate-npm-package-license@3.0.4:
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+
   validator@13.15.35: {}
 
+  varname@2.0.3: {}
+
   vary@1.1.2: {}
 
+  vee-validate@4.15.1(vue@3.5.22(typescript@5.8.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      type-fest: 4.41.0
+      vue: 3.5.22(typescript@5.8.3)
+
+  vite-plugin-chunk-split@0.5.0(vite@6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0)):
+    dependencies:
+      es-module-lexer: 1.7.0
+      import-meta-resolve: 4.2.0
+      magic-string: 0.30.21
+      vite: 6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0)
+
   vite-plugin-svgr@4.5.0(rollup@2.80.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.93.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 5.4.0(rollup@2.80.0)
@@ -19207,12 +21937,30 @@ snapshots:
       - supports-color
       - typescript
 
+  vite@6.3.5(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.89.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rollup: 4.62.0
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 25.9.3
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      sass: 1.89.2
+      terser: 5.48.0
+      tsx: 4.22.4
+      yaml: 2.9.0
+
   vite@7.3.1(@types/node@25.0.10)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.93.2)(terser@5.48.0)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       esbuild: 0.27.7
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
-      postcss: 8.5.15
+      postcss: 8.5.6
       rollup: 4.62.0
       tinyglobby: 0.2.17
     optionalDependencies:
@@ -19270,6 +22018,59 @@ snapshots:
     transitivePeerDependencies:
       - msw
 
+  vscode-uri@3.1.0: {}
+
+  vue-eslint-parser@10.4.1(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0))(supports-color@5.5.0):
+    dependencies:
+      debug: 4.4.3(supports-color@5.5.0)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 5.0.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      semver: 7.8.4
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-eslint-parser@9.4.3(eslint@9.31.0(jiti@2.7.0)(supports-color@5.5.0)):
+    dependencies:
+      debug: 4.4.3(supports-color@5.5.0)
+      eslint: 9.31.0(jiti@2.7.0)(supports-color@5.5.0)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      lodash: 4.18.1
+      semver: 7.8.4
+    transitivePeerDependencies:
+      - supports-color
+
+  vue-router@4.5.1(vue@3.5.22(typescript@5.8.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.22(typescript@5.8.3)
+
+  vue-timeago3@2.3.2(vue@3.5.22(typescript@5.8.3)):
+    dependencies:
+      date-fns: 2.30.0
+      vue: 3.5.22(typescript@5.8.3)
+
+  vue-tsc@2.2.12(typescript@5.8.3):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.8.3)
+      typescript: 5.8.3
+
+  vue@3.5.22(typescript@5.8.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-sfc': 3.5.22
+      '@vue/runtime-dom': 3.5.22
+      '@vue/server-renderer': 3.5.22(vue@3.5.22(typescript@5.8.3))
+      '@vue/shared': 3.5.22
+    optionalDependencies:
+      typescript: 5.8.3
+
   w3c-hr-time@1.0.2:
     dependencies:
       browser-process-hrtime: 1.0.0
@@ -19296,7 +22097,7 @@ snapshots:
 
   webidl-conversions@6.1.0: {}
 
-  webpack-dev-middleware@5.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  webpack-dev-middleware@5.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
@@ -19305,7 +22106,7 @@ snapshots:
       schema-utils: 4.3.3
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
 
-  webpack-dev-server@4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  webpack-dev-server@4.15.2(supports-color@5.5.0)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
@@ -19335,7 +22136,7 @@ snapshots:
       serve-index: 1.9.2
       sockjs: 0.3.24
       spdy: 4.0.2(supports-color@5.5.0)
-      webpack-dev-middleware: 5.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      webpack-dev-middleware: 5.3.4(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       ws: 8.21.0
     optionalDependencies:
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
@@ -19345,7 +22146,7 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  webpack-manifest-plugin@4.1.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  webpack-manifest-plugin@4.1.1(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       tapable: 2.3.3
       webpack: 5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)
@@ -19385,7 +22186,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.3
-      terser-webpack-plugin: 5.6.1(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15))
+      terser-webpack-plugin: 5.6.1(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6))
       watchpack: 2.5.2
       webpack-sources: 3.5.0
     transitivePeerDependencies:
@@ -19426,7 +22227,7 @@ snapshots:
 
   whatwg-url@8.7.0:
     dependencies:
-      lodash: 4.18.1
+      lodash: 4.17.21
       tr46: 2.1.0
       webidl-conversions: 6.1.0
 
@@ -19506,7 +22307,7 @@ snapshots:
     dependencies:
       '@apideck/better-ajv-errors': 0.3.7(ajv@8.20.0)
       '@babel/core': 7.29.7
-      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)(supports-color@5.5.0)
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)
       '@babel/runtime': 7.29.7
       '@rollup/plugin-babel': 5.3.1(@babel/core@7.29.7)(@types/babel__core@7.20.5)(rollup@2.80.0)
       '@rollup/plugin-node-resolve': 11.2.1(rollup@2.80.0)
@@ -19517,7 +22318,7 @@ snapshots:
       fast-json-stable-stringify: 2.1.0
       fs-extra: 9.1.0
       glob: 7.2.3
-      lodash: 4.18.1
+      lodash: 4.17.21
       pretty-bytes: 5.6.0
       rollup: 2.80.0
       rollup-plugin-terser: 7.0.2(rollup@2.80.0)
@@ -19601,7 +22402,7 @@ snapshots:
 
   workbox-sw@6.6.0: {}
 
-  workbox-webpack-plugin@6.6.0(@types/babel__core@7.20.5)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.15)):
+  workbox-webpack-plugin@6.6.0(@types/babel__core@7.20.5)(webpack@5.107.2(@swc/core@1.15.41)(lightningcss@1.32.0)(postcss@8.5.6)):
     dependencies:
       fast-json-stable-stringify: 2.1.0
       pretty-bytes: 5.6.0
@@ -19645,6 +22446,10 @@ snapshots:
       signal-exit: 3.0.7
       typedarray-to-buffer: 3.1.5
 
+  ws@6.2.0:
+    dependencies:
+      async-limiter: 1.0.1
+
   ws@7.5.11: {}
 
   ws@8.20.1: {}
@@ -19658,6 +22463,8 @@ snapshots:
 
   xml-name-validator@3.0.0: {}
 
+  xml-name-validator@4.0.0: {}
+
   xmlchars@2.2.0: {}
 
   xmlhttprequest-ssl@2.1.2: {}
@@ -19670,6 +22477,8 @@ snapshots:
 
   yallist@4.0.0: {}
 
+  yallist@5.0.0: {}
+
   yaml@1.10.3: {}
 
   yaml@2.9.0: {}
@@ -19701,3 +22510,10 @@ snapshots:
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
+
+  yup@1.6.1:
+    dependencies:
+      property-expr: 2.0.6
+      tiny-case: 1.0.3
+      toposort: 2.0.2
+      type-fest: 2.19.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index fe8926c4..354f370e 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,6 +4,7 @@ allowBuilds:
   '@parcel/watcher': true
   '@swc/core': true
   unrs-resolver: true
+  '@tailwindcss/oxide': true
   esbuild: true
   core-js: false
   core-js-pure: false
diff --git a/scripts/start-development.ts b/scripts/start-development.ts
index 140cb8fa..044785d9 100644
--- a/scripts/start-development.ts
+++ b/scripts/start-development.ts
@@ -3,6 +3,11 @@ import { existsSync } from 'fs';
 import open from 'open';
 
 const CORE_DB = 'apps/aurora-core/local.sqlite';
+const URLS = {
+  core: process.env.VITE_CORE_URL ?? 'http://localhost:3000',
+  client: 'http://localhost:8081',
+  backoffice: 'http://localhost:8080',
+};
 
 function sh(cmd: string): string {
   return execSync(cmd, { encoding: 'utf8' }).trim();
@@ -55,19 +60,21 @@ async function main() {
   sh('docker compose up -d');
 
   console.info('Waiting for core to start...');
-  await retry(
-    () => isCoreReady(`${process.env.VITE_CORE_URL ?? 'http://localhost:3000'}/api/auth/key`),
-    { timeoutMs: 30_000 },
-  );
+  await retry(() => isCoreReady(`${URLS.core}/api/auth/key`), { timeoutMs: 120_000 });
 
-  console.info('Waiting for seed...');
-  const key = await retry(() => getApiKey(CORE_DB), { timeoutMs: 15_000 });
+  const needsSeed = !existsSync(CORE_DB) || !getApiKey(CORE_DB);
+  if (needsSeed) {
+    console.info('Running seed...');
+    sh('docker compose exec -T core pnpm --filter @gewis/aurora-core run seed:gewis');
+  }
 
-  console.info('\nDevelopment environment ready.');
-  console.info(`- Core:   \x1b[36mhttp://localhost:3000\x1b[0m`);
+  console.info('Fetching API key...');
+  const key = await retry(() => getApiKey(CORE_DB), { timeoutMs: 20_000 });
 
-  const clientBaseUrl = 'http://localhost:8081';
-  const clientUrl = key ? `${clientBaseUrl}?key=${key}` : clientBaseUrl;
+  console.info(
+    '\n\x1b[32mDevelopment environment ready.\x1b[0m\n' +
+      'Press Ctrl-C to stop the dev environment.\n',
+  );
 
   if (!key) {
     console.warn(
@@ -75,8 +82,26 @@ async function main() {
     );
   }
 
-  console.info(`- Client: \x1b[36m${clientUrl}\x1b[0m`);
-  open(clientUrl);
+  const endpoints = {
+    Core: URLS.core,
+    Docs: `${URLS.core}/api-docs`,
+    Client: key ? `${URLS.client}?key=${key}` : URLS.client,
+    Backoffice: URLS.backoffice,
+  };
+
+  Object.entries(endpoints).forEach(([name, url]) => {
+    console.info(`  ${name.padEnd(11)}: \x1b[36m${url}\x1b[0m`);
+  });
+  console.info('');
+
+  await delay(1000);
+  [endpoints.Docs, endpoints.Client, endpoints.Backoffice].forEach((url) => open(url));
+
+  try {
+    execSync('docker compose up', { stdio: 'inherit' });
+  } catch {
+    process.exit(0);
+  }
 }
 
 main().catch((err) => {