next release version

downgrading restana
fixing toasts not showing on certain pages / adding statement about ai 🤖
2026-06-16 12:31:07 +00:00 · 2026-04-27 16:04:05 +02:00 · 2026-04-27 16:03:45 +02:00 · 2026-04-27 15:58:41 +02:00 · 2026-04-22 21:11:18 +02:00
52 changed files with 4342 additions and 983 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,120 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Fredy is a self-hosted real estate finder for Germany. It scrapes German real estate portals (ImmoScout24, Immowelt, Immonet, Kleinanzeigen, WG-Gesucht, etc.), deduplicates results across providers, and sends notifications via Slack, Telegram, Email, Discord, ntfy, etc. It includes a React web UI and a built-in MCP server for LLM access to listings data.
+
+- Node.js >= 22, ESM-only (`"type": "module"`)
+- Default port: 9998, default login: admin / admin
+- SQLite via `better-sqlite3` (synchronous — all DB ops are sync; only network I/O is async)
+
+## Commands
+
+```bash
+# Development
+yarn run start:backend:dev    # nodemon backend
+yarn run start:frontend:dev   # Vite dev server (proxies /api → :9998)
+
+# Production
+yarn run start:backend        # NODE_ENV=production node index.js
+yarn run build:frontend       # vite build → ui/public/
+
+# Tests
+yarn test                     # Live tests (hits actual providers)
+yarn test:offline             # Offline tests using HTML/JSON fixtures (fast, preferred)
+yarn test:download-fixtures   # Re-download fresh provider HTML fixtures
+
+# Single test file
+TEST_MODE=offline npx vitest run test/provider/immoscout.test.js
+
+# Lint / Format
+yarn lint && yarn lint:fix
+yarn format && yarn format:check
+
+# DB migrations
+yarn migratedb
+```
+
+## Architecture
+
+### Core data flow
+
+```
+index.js (startup)
+  ├── runMigrations()
+  ├── getProviders()            # lazily imports lib/provider/*.js
+  ├── similarityCache.init()    # preloads hash cache from DB
+  ├── api.js                    # starts restana HTTP server
+  └── initJobExecutionService() # registers event-bus listeners + starts scheduler
+
+scheduler (every N minutes) or manual trigger via POST /api/jobs/:id/run
+  └── FredyPipelineExecutioner.execute()
+      1. queryStringMutator(url)           # inject sort-by-date param
+      2. provider.getListings()            # API or Puppeteer+Cheerio
+      3. provider.normalize(listing)       # raw → ParsedListing
+      4. provider.filter(listing)          # blacklist + required fields
+      5. filter to hashes not yet in DB
+      6. provider.fetchDetails()           # optional enrichment
+      7. geocodeAddress()                  # optional lat/lng
+      8. storeListings()
+      9. similarityCache.checkAndAddEntry() # cross-provider dedup
+      10. _filterBySpecs() + _filterByArea()
+      11. notify.send()                    # fan-out to all adapters
+```
+
+### Plugin systems
+
+**Providers** (`lib/provider/*.js`) — each module exports:
+- `metaInformation` — `{ id, name, baseUrl }`
+- `config` — `ProviderConfig` with `requiredFieldNames`, `crawlContainer`, `crawlFields`, `sortByDateParam`, `normalize()`, `filter()`, optional `getListings()`, `fetchDetails()`, `activeTester()`
+- `init(sourceConfig, blacklist)` — called before each job run; providers are **stateful modules** holding mutable `url` and `appliedBlackList` at module scope
+
+**Notification adapters** (`lib/notification/adapter/*.js`) — each exports:
+- `config` — `{ id, name, description, fields }` (drives the UI form)
+- `send({ serviceName, newListings, notificationConfig, jobKey, baseUrl })`
+- Loaded dynamically at startup via `fs.readdirSync`
+
+### Key services
+
+| Service | Location | Notes |
+|---|---|---|
+| Event bus | `lib/services/events/event-bus.js` | Plain `EventEmitter`; events: `jobs:runAll`, `jobs:runOne`, `jobs:status` |
+| SSE broker | `lib/services/sse/sse-broker.js` | Per-userId `Set<ServerResponse>`; heartbeat every 25s; pushes job status to UI |
+| Similarity cache | `lib/services/similarity-check/` | In-memory SHA-256 Set; refreshes hourly; cross-provider dedup by title+price+address |
+| SqliteConnection | `lib/services/storage/SqliteConnection.js` | Singleton, WAL mode; `execute()`, `query()`, `withTransaction()` |
+| Migrations | `lib/services/storage/migrations/` | Numbered JS files each exporting `up(db)`; checksum-tracked in `schema_migrations` |
+| Extractor | `lib/services/extractor/` | Orchestrates Puppeteer + Cheerio; shared browser instance per job |
+
+### Frontend
+
+- React 19 SPA, Vite build → `ui/public/` (served as static by backend)
+- State: Zustand single store with per-domain slices
+- UI library: `@douyinfe/semi-ui`
+- Map: MapLibre GL + `@mapbox/mapbox-gl-draw` + `@turf/boolean-point-in-polygon` for GeoJSON polygon filters
+- In dev: Vite proxies `/api` to `:9998`
+
+### MCP server
+
+Two transports:
+1. **stdio** (`lib/mcp/stdio.js`) — for Claude Desktop/LM Studio; opens its own DB connection (main process need not be running)
+2. **HTTP** (`/api/mcp`) — authenticated via Bearer token (`mcp_token` column in `users` table)
+
+Tools: `list_jobs`, `get_job`, `list_listings`, `get_listing`, `get_current_date_time`. Responses are Markdown via `lib/mcp/mcpNormalizer.js`.
+
+## Key Conventions
+
+- **ESM only** — `import`/`export` everywhere, no CommonJS
+- **JSDoc typedefs** (no TypeScript) in `lib/types/` — `listing.js`, `job.js`, `filter.js`, `providerConfig.js`
+- **Copyright header** required on all `.js` files — enforced by `lint-staged` pre-commit hook via `copyright.js`
+- **`NoNewListingsWarning`** (`lib/errors.js`) is used as control flow to short-circuit the pipeline (not an error)
+- **Test fixtures** in `test/testFixtures/` — HTML/JSON snapshots per provider; `TEST_MODE=offline` mocks `puppeteerExtractor` and global `fetch` via `test/offlineFixtures.js`
+- **`conf/config.json`** is the only runtime config file; created with defaults if missing
+
+## Coding
+- After building the task, run the linter
+- After building the task, run the tests
+- New features must be tested
+- New features must be properly documented with JsDoc
+- You do **not** commit any changes, you do **not** create a new branch unless I told you so
--- a/README.md
+++ b/README.md
@@ -240,6 +240,20 @@ flowchart TD
    F1 --> F2
 ```

+------------------------------------------------------------------------
+## 🤖 Using AI such as Claude Code
+When I started building Fredy, LLMs were still basically the wet dream of a few nerdy scientists.
+
+Nowadays, it’s easier than ever to throw a prompt into the LLM of your choice and let 'the AI' build your stuff. I’m not against that. I use Claude Code myself for smaller tasks, and I do think these tools can be really useful.
+
+That said, I still believe humans should stay in charge. AI is great-ish at writing code, but it still lacks creativity, context, and the ability to see the full picture.
+
+So, if you want to contribute to Fredy, using AI tools to get things done is totally fine. Just please don’t stop thinking.
+
+I’ve had one too many PRs full of hallucinated bullshit.
+
+**Thanks ;)**
+
 ------------------------------------------------------------------------

 ## 👐 Contributing
--- a/docs/superpowers/plans/2026-04-22-fredy-ui-redesign.md
+++ b/docs/superpowers/plans/2026-04-22-fredy-ui-redesign.md
--- a/index.html
+++ b/index.html
@@ -11,6 +11,9 @@
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

      <title>Fredy || Real Estate Finder</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  </head>
  <body theme-mode="dark">
    <div id="fredy" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
--- a/lib/api/routes/generalSettingsRoute.js
+++ b/lib/api/routes/generalSettingsRoute.js
@@ -9,6 +9,7 @@ import fs from 'fs';
 import { ensureDemoUserExists } from '../../services/storage/userStorage.js';
 import logger from '../../services/logger.js';
 import { getSettings, upsertSettings } from '../../services/storage/settingsStorage.js';
+import { isAdmin } from '../security.js';
 const service = restana();
 const generalSettingsRouter = service.newRouter();

@@ -23,7 +24,7 @@ generalSettingsRouter.post('/', async (req, res) => {
  }
  const localSettings = await getSettings();

-  if (localSettings.demoMode) {
+  if (localSettings.demoMode && !isAdmin(req)) {
    res.send(new Error('In demo mode, it is not allowed to change these settings.'));
    return;
  }
--- a/lib/api/routes/jobRouter.js
+++ b/lib/api/routes/jobRouter.js
@@ -183,7 +183,7 @@ jobRouter.post('/', async (req, res) => {
      return;
    }

-    if (settings.demoMode && jobFromDb && jobFromDb.name === DEMO_JOB_NAME) {
+    if (settings.demoMode && !isAdmin(req) && jobFromDb && jobFromDb.name === DEMO_JOB_NAME) {
      res.send(new Error('Sorry, but you cannot change the Status of our Demo Job ;)'));
      return;
    }
@@ -212,7 +212,7 @@ jobRouter.delete('', async (req, res) => {
  const settings = await getSettings();
  try {
    const job = jobStorage.getJob(jobId);
-    if (settings.demoMode && job.name === DEMO_JOB_NAME) {
+    if (settings.demoMode && !isAdmin(req) && job.name === DEMO_JOB_NAME) {
      res.send(new Error('Sorry, but you cannot remove the Demo Job ;)'));
      return;
    }
@@ -235,7 +235,7 @@ jobRouter.put('/:jobId/status', async (req, res) => {
  try {
    const job = jobStorage.getJob(jobId);

-    if (settings.demoMode && job.name === DEMO_JOB_NAME) {
+    if (settings.demoMode && !isAdmin(req) && job.name === DEMO_JOB_NAME) {
      res.send(new Error('Sorry, but you cannot change the Status of our Demo Job ;)'));
      return;
    }
--- a/lib/api/routes/listingsRouter.js
+++ b/lib/api/routes/listingsRouter.js
@@ -110,7 +110,7 @@ listingsRouter.delete('/job', async (req, res) => {
  const { jobId, hardDelete = false } = req.body;
  const settings = await getSettings();
  try {
-    if (settings.demoMode) {
+    if (settings.demoMode && !isAdminFn(req)) {
      res.send(new Error('Sorry, but you cannot remove listings in demo mode ;)'));
      return;
    }
--- a/lib/api/routes/userRoute.js
+++ b/lib/api/routes/userRoute.js
@@ -7,6 +7,7 @@ import restana from 'restana';
 import * as userStorage from '../../services/storage/userStorage.js';
 import * as jobStorage from '../../services/storage/jobStorage.js';
 import { getSettings } from '../../services/storage/settingsStorage.js';
+import { isAdmin as isAdminUser } from '../security.js';
 const service = restana();
 const userRouter = service.newRouter();
 function checkIfAnyAdminAfterRemovingUser(userIdToBeRemoved, allUser) {
@@ -29,7 +30,7 @@ userRouter.get('/:userId', async (req, res) => {
 });
 userRouter.delete('/', async (req, res) => {
  const settings = await getSettings();
-  if (settings.demoMode) {
+  if (settings.demoMode && !isAdminUser(req)) {
    res.send(new Error('In demo mode, it is not allowed to remove user.'));
    return;
  }
@@ -51,7 +52,7 @@ userRouter.delete('/', async (req, res) => {
 });
 userRouter.post('/', async (req, res) => {
  const settings = await getSettings();
-  if (settings.demoMode) {
+  if (settings.demoMode && !isAdminUser(req)) {
    res.send(new Error('In demo mode, it is not allowed to change or add user.'));
    return;
  }
--- a/lib/api/routes/userSettingsRoute.js
+++ b/lib/api/routes/userSettingsRoute.js
@@ -6,6 +6,7 @@
 import restana from 'restana';
 import SqliteConnection from '../../services/storage/SqliteConnection.js';
 import { getSettings, upsertSettings } from '../../services/storage/settingsStorage.js';
+import { isAdmin } from '../security.js';
 import { resetGeocoordinatesAndDistanceForUser } from '../../services/storage/listingsStorage.js';
 import { geocodeAddress } from '../../services/geocoding/geoCodingService.js';
 import { autocompleteAddress } from '../../services/geocoding/autocompleteService.js';
@@ -46,7 +47,7 @@ userSettingsRouter.post('/home-address', async (req, res) => {
  const { home_address } = req.body;
  const settings = await getSettings();

-  if (settings.demoMode) {
+  if (settings.demoMode && !isAdmin(req)) {
    res.send(new Error('In demo mode, it is not allowed to change the home address.'));
    return;
  }
@@ -81,7 +82,7 @@ userSettingsRouter.post('/news-hash', async (req, res) => {
  const { news_hash } = req.body;

  const globalSettings = await getSettings();
-  if (globalSettings.demoMode) {
+  if (globalSettings.demoMode && !isAdmin(req)) {
    res.statusCode = 403;
    res.send({ error: 'In demo mode, it is not allowed to change settings.' });
    return;
@@ -102,7 +103,7 @@ userSettingsRouter.post('/provider-details', async (req, res) => {
  const { provider_details } = req.body;

  const globalSettings = await getSettings();
-  if (globalSettings.demoMode) {
+  if (globalSettings.demoMode && !isAdmin(req)) {
    res.statusCode = 403;
    res.send({ error: 'In demo mode, it is not allowed to change settings.' });
    return;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "fredy",
-  "version": "20.4.0",
+  "version": "21.0.2",
  "description": "[F]ind [R]eal [E]states [d]amn eas[y].",
  "scripts": {
    "prepare": "husky",
@@ -77,12 +77,12 @@
    "cheerio": "^1.2.0",
    "cookie-session": "2.1.1",
    "handlebars": "4.7.9",
-    "maplibre-gl": "^5.23.0",
+    "maplibre-gl": "^5.24.0",
    "nanoid": "5.1.9",
    "node-cron": "^4.2.1",
    "node-fetch": "3.3.2",
    "node-mailjet": "6.0.11",
-    "nodemailer": "^8.0.5",
+    "nodemailer": "^8.0.6",
    "p-throttle": "^8.1.0",
    "package-up": "^5.0.0",
    "puppeteer": "^24.42.0",
@@ -93,14 +93,14 @@
    "react-chartjs-2": "^5.3.1",
    "react-dom": "19.2.5",
    "react-range-slider-input": "^3.3.5",
-    "react-router": "7.14.1",
-    "react-router-dom": "7.14.1",
+    "react-router": "7.14.2",
+    "react-router-dom": "7.14.2",
    "resend": "^6.12.2",
    "restana": "5.2.0",
    "semver": "^7.7.4",
    "serve-static": "2.2.1",
    "slack": "11.0.2",
-    "vite": "8.0.9",
+    "vite": "8.0.10",
    "x-var": "^3.0.1",
    "zustand": "^5.0.12"
  },
@@ -121,6 +121,6 @@
    "lint-staged": "16.4.0",
    "nodemon": "^3.1.14",
    "prettier": "3.8.3",
-    "vitest": "^4.1.4"
+    "vitest": "^4.1.5"
  }
 }
--- a/tools/devMock.js
+++ b/tools/devMock.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (c) 2026 by Christian Kellner.
+ * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
+ */
+
+/**
+ * Lightweight dev mock server on port 9998.
+ * Vite proxies /api to this. Run with: node tools/devMock.js
+ */
+
+import http from 'node:http';
+const now = Date.now();
+
+const users = [{ id: 1, username: 'admin', isAdmin: true, lastLogin: now, numberOfJobs: 2, mcpToken: 'tok_abc123' }];
+
+const jobs = [
+  {
+    id: 'job1',
+    name: 'Munich Apartments',
+    enabled: true,
+    running: false,
+    blacklist: [],
+    provider: [
+      {
+        id: 'immoscout',
+        name: 'ImmobilienScout24',
+        url: 'https://www.immobilienscout24.de/Suche/S-T/Wohnung-Miete/Bayern/Muenchen',
+      },
+    ],
+    notificationAdapter: [],
+    specFilter: { maxPrice: 1500, minSize: 50 },
+    numberOfFoundListings: 2,
+    isOnlyShared: false,
+  },
+  {
+    id: 'job2',
+    name: 'Berlin Rentals',
+    enabled: true,
+    running: false,
+    blacklist: ['keller', 'EG'],
+    provider: [{ id: 'immo', name: 'Immowelt', url: 'https://www.immowelt.de/suche/berlin/wohnungen/mieten' }],
+    notificationAdapter: [],
+    specFilter: {},
+    numberOfFoundListings: 2,
+    isOnlyShared: false,
+  },
+];
+
+const listings = [
+  {
+    id: 'l1',
+    title: '3-Zimmer-Wohnung in Schwabing',
+    price: 1350,
+    address: 'Leopoldstr. 42, München',
+    provider: 'ImmobilienScout24',
+    createdAt: now - 3600000,
+    created_at: now - 3600000,
+    image_url: null,
+    link: 'https://example.com/l1',
+    is_active: true,
+    isWatched: 0,
+    jobId: 'job1',
+    job_name: 'Munich Apartments',
+    size: 72,
+    rooms: 3,
+    description: 'Schöne 3-Zimmer-Wohnung in bester Lage in Schwabing. Balkon, Parkett, moderne Küche.',
+    latitude: 48.1598,
+    longitude: 11.5876,
+  },
+  {
+    id: 'l2',
+    title: 'Helle 2-Zimmer near Ostbahnhof',
+    price: 980,
+    address: 'Rosenheimer Str. 15, München',
+    provider: 'ImmobilienScout24',
+    createdAt: now - 7200000,
+    created_at: now - 7200000,
+    image_url: null,
+    link: 'https://example.com/l2',
+    is_active: true,
+    isWatched: 1,
+    jobId: 'job1',
+    job_name: 'Munich Apartments',
+    size: 55,
+    rooms: 2,
+    description: 'Helle 2-Zimmer-Wohnung nahe Ostbahnhof. Ruhige Lage, gute Anbindung.',
+    latitude: 48.1285,
+    longitude: 11.6005,
+  },
+  {
+    id: 'l3',
+    title: 'Altbau in Prenzlauer Berg',
+    price: 1100,
+    address: 'Kastanienallee 28, Berlin',
+    provider: 'Immowelt',
+    createdAt: now - 86400000,
+    created_at: now - 86400000,
+    image_url: null,
+    link: 'https://example.com/l3',
+    is_active: false,
+    isWatched: 0,
+    jobId: 'job2',
+    job_name: 'Berlin Rentals',
+    size: 65,
+    rooms: 2,
+    description: 'Charmante Altbauwohnung in Prenzlauer Berg. Hohe Decken, Stuck, Holzdielen.',
+    latitude: 52.5397,
+    longitude: 13.4098,
+  },
+  {
+    id: 'l4',
+    title: '4-Zimmer Neubau Mitte',
+    price: 2200,
+    address: 'Karl-Liebknecht-Str. 5, Berlin',
+    provider: 'Immowelt',
+    createdAt: now - 172800000,
+    created_at: now - 172800000,
+    image_url: null,
+    link: 'https://example.com/l4',
+    is_active: true,
+    isWatched: 1,
+    jobId: 'job2',
+    job_name: 'Berlin Rentals',
+    size: 95,
+    rooms: 4,
+    description: 'Moderner Neubau im Herzen von Berlin Mitte. Fußbodenheizung, Aufzug, Tiefgarage.',
+    latitude: 52.5219,
+    longitude: 13.4132,
+  },
+];
+
+const dashboard = {
+  general: { interval: 30, lastRun: now - 1800000, nextRun: now + 1800000 },
+  kpis: { totalJobs: 2, totalListings: 4, numberOfActiveListings: 3, medianPriceOfListings: 1225 },
+  pie: [
+    { type: 'ImmobilienScout24', value: 50 },
+    { type: 'Immowelt', value: 50 },
+  ],
+};
+
+const routes = {
+  'GET /api/login/user': { userId: 1, username: 'admin', isAdmin: true },
+  'GET /api/admin/users': users,
+  'GET /api/jobs/provider': [
+    { id: 'immoscout', name: 'ImmobilienScout24', baseUrl: 'https://www.immobilienscout24.de' },
+    { id: 'immo', name: 'Immowelt', baseUrl: 'https://www.immowelt.de' },
+  ],
+  'GET /api/jobs': jobs,
+  'GET /api/jobs/shareableUserList': [],
+  'GET /api/jobs/notificationAdapter': [],
+  'GET /api/admin/generalSettings': { demoMode: false, analyticsEnabled: true, interval: 30 },
+  'GET /api/user/settings': {},
+  'GET /api/version': { newVersion: null },
+  'GET /api/tracking/trackingPois': [],
+  'GET /api/dashboard': dashboard,
+  'GET /api/demo': { demoMode: false },
+  'POST /api/user/settings/news-hash': {},
+};
+
+const server = http.createServer((req, res) => {
+  const origin = req.headers.origin || 'http://localhost:5175';
+  const path = req.url.split('?')[0];
+  const key = req.method + ' ' + path;
+
+  res.setHeader('Access-Control-Allow-Origin', origin);
+  res.setHeader('Access-Control-Allow-Credentials', 'true');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(200);
+    res.end();
+    return;
+  }
+
+  if (path === '/api/jobs/events') {
+    res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' });
+    res.write(': connected\n\n');
+    const interval = setInterval(() => res.write(': ping\n\n'), 15000);
+    req.on('close', () => clearInterval(interval));
+    return;
+  }
+
+  res.setHeader('Content-Type', 'application/json');
+
+  const userMatch = path.match(/^\/api\/admin\/users\/(\d+)$/);
+  if (req.method === 'GET' && userMatch) {
+    const user = users.find((u) => u.id === parseInt(userMatch[1]));
+    res.writeHead(user ? 200 : 404);
+    res.end(JSON.stringify(user || { message: 'Not found' }));
+    return;
+  }
+
+  const listingMatch = path.match(/^\/api\/listings\/([^/]+)$/);
+  if (
+    req.method === 'GET' &&
+    listingMatch &&
+    !path.includes('/table') &&
+    !path.includes('/map') &&
+    !path.includes('/watch')
+  ) {
+    const listing = listings.find((l) => l.id === listingMatch[1]);
+    res.writeHead(listing ? 200 : 404);
+    res.end(JSON.stringify(listing || { message: 'Not found' }));
+    return;
+  }
+
+  if (path.startsWith('/api/jobs/data')) {
+    res.writeHead(200);
+    res.end(JSON.stringify({ result: jobs, totalNumber: jobs.length, page: 1 }));
+    return;
+  }
+  if (path.startsWith('/api/listings/table')) {
+    res.writeHead(200);
+    res.end(JSON.stringify({ result: listings, totalNumber: listings.length, page: 1 }));
+    return;
+  }
+  if (path.startsWith('/api/listings/map')) {
+    res.writeHead(200);
+    res.end(JSON.stringify({ listings: listings.filter((l) => l.is_active), maxPrice: 2200 }));
+    return;
+  }
+
+  const data = routes[key];
+  res.writeHead(200);
+  res.end(JSON.stringify(data !== undefined ? data : {}));
+});
+
+server.listen(9998, () => console.warn('Dev mock ready on :9998'));
--- a/ui/src/App.less
+++ b/ui/src/App.less
@@ -1,3 +1,5 @@
+@import './tokens.less';
+
 .app {
  height: 100vh;
  width: 100vw;
@@ -14,18 +16,14 @@
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
-    padding: 24px;
-    background-color: var(--semi-color-bg-0);
+    padding: @space-6;
+    background-color: transparent;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    @media (max-width: 768px) {
-      padding: 12px;
+      padding: @space-3;
    }
  }
 }
-
-.semi-icon:not(.semi-tabs-bar .semi-tabs-tab .semi-icon) {
-  vertical-align: middle;
-}
--- a/ui/src/Index.jsx
+++ b/ui/src/Index.jsx
@@ -6,10 +6,15 @@
 import { HashRouter } from 'react-router-dom';
 import { createRoot } from 'react-dom/client';
 import en_US from '@douyinfe/semi-ui-19/lib/es/locale/source/en_US';
-import { LocaleProvider } from '@douyinfe/semi-ui-19';
+import { LocaleProvider, semiGlobal } from '@douyinfe/semi-ui-19';
 import App from './App';
 import './Index.less';

+// Semi UI uses react-dom (not react-dom/client) internally for imperative renders
+// like Toast, Notification, etc. In React 19, createRoot was removed from react-dom
+// and lives only in react-dom/client — inject it so Toast can create its own root.
+semiGlobal.config.createRoot = createRoot;
+
 const container = document.getElementById('fredy');
 const root = createRoot(container);

--- a/ui/src/Index.less
+++ b/ui/src/Index.less
@@ -1,16 +1,117 @@
+@import './tokens.less';
+
 body,
 html {
  margin: 0;
  height: 100%;
  width: 100%;
-  background-color: #232429;
+  font-family: @font-ui;
+  background-color: @color-base;
+  background-image: radial-gradient(ellipse at 60% 0%, rgba(224,74,56,0.05) 0%, transparent 55%);
+  background-attachment: fixed;
 }

+@media (max-width: 768px) {
+  body, html {
+    background-attachment: scroll;
+  }
+}
+
+// Semi UI theme overrides
+body {
+  --semi-color-bg-0: @color-base !important;
+  --semi-color-bg-1: @color-surface !important;
+  --semi-color-bg-2: @color-elevated !important;
+  --semi-color-bg-3: @color-border !important;
+  --semi-color-border: @color-border !important;
+  --semi-color-primary: @color-accent !important;
+  --semi-color-primary-hover: @color-accent-dim !important;
+  --semi-color-primary-active: @color-accent-dim !important;
+  --semi-color-primary-light-default: rgba(224,74,56,0.12) !important;
+  --semi-color-primary-light-hover: rgba(224,74,56,0.18) !important;
+  --semi-color-primary-light-active: rgba(224,74,56,0.22) !important;
+  --semi-color-text-0: @color-text !important;
+  --semi-color-text-1: @color-text !important;
+  --semi-color-text-2: @color-muted !important;
+  --semi-color-text-3: @color-faint !important;
+  --semi-color-fill-0: rgba(255,255,255,0.04) !important;
+  --semi-color-fill-1: rgba(255,255,255,0.06) !important;
+  --semi-color-fill-2: rgba(255,255,255,0.08) !important;
+  --semi-font-family: @font-ui !important;
+}
+
+// Semi table row overrides
 .semi-table-row-head {
-  background-color: #2b2b2b !important;
-  color: #fff !important;
+  background-color: rgba(255,255,255,0.06) !important;
+}
+.semi-table-row-head .semi-table-row-cell {
+  background-color: rgba(255,255,255,0.06) !important;
+  color: @color-muted !important;
+  font-size: @text-xs;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.semi-table-row-cell {
+  background-color: @color-surface !important;
+}
+.semi-table-tbody .semi-table-row:nth-child(even) .semi-table-row-cell {
+  background-color: @color-base !important;
+}
+.semi-table-tbody .semi-table-row:hover .semi-table-row-cell {
+  background-color: @color-elevated !important;
 }

-.semi-table-row-cell {
-  background-color: #333333 !important;
+// Scrollbar
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: @color-surface; }
+::-webkit-scrollbar-thumb { background: @color-border-bright; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: @color-muted; }
+
+.semi-icon:not(.semi-tabs-bar .semi-tabs-tab .semi-icon):not(.semi-checkbox .semi-icon) {
+  vertical-align: middle;
+}
+
+// Suppress focus outlines — Semi uses --semi-color-primary (our red) for all rings
+button:focus,
+button:focus-visible,
+.semi-button:focus,
+.semi-button:focus-visible,
+.semi-input-wrapper:focus-within,
+.semi-select:focus-within,
+[tabindex]:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.semi-input-wrapper-focus {
+  border-color: @color-border-bright !important;
+  box-shadow: none !important;
+}
+
+// Semi Toast dark theme overrides
+.semi-toast-content {
+  background-color: @color-elevated !important;
+  border: 1px solid @color-border-bright !important;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
+}
+
+// Semi Modal dark theme overrides
+.semi-modal-content {
+  background: #161616 !important;
+  border: 1px solid @color-border !important;
+  border-top: 3px solid @color-accent !important;
+  border-radius: 14px !important;
+}
+
+.semi-modal-header {
+  background: transparent !important;
+  border-bottom: 1px solid @color-border !important;
+  border-radius: 14px 14px 0 0 !important;
+  padding: 20px 24px 16px !important;
+}
+
+.semi-modal-mask {
+  background: rgba(0,0,0,0.7) !important;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
--- a/ui/src/components/cards/ChartCard.less
+++ b/ui/src/components/cards/ChartCard.less
@@ -18,6 +18,7 @@
    display: grid;
    place-items: center;
    height: 14rem;
-    opacity: .7;
+    color: #94a3b8;
+    font-size: 0.9rem;
  }
 }
--- a/ui/src/components/cards/DashboardCard.less
+++ b/ui/src/components/cards/DashboardCard.less
@@ -1,45 +1,34 @@
@import './DashboardCardColors.less';

+@keyframes card-glow-rotate {
+  0%   { box-shadow:  3px  3px 14px -4px var(--card-glow); }
+  25%  { box-shadow: -3px  3px 14px -4px var(--card-glow); }
+  50%  { box-shadow: -3px -3px 14px -4px var(--card-glow); }
+  75%  { box-shadow:  3px -3px 14px -4px var(--card-glow); }
+  100% { box-shadow:  3px  3px 14px -4px var(--card-glow); }
+}
+
 .dashboard-card {
  width: 100%;
-  height: 140px;
-  margin-bottom: 16px;
-  transition: transform 0.2s, box-shadow 0.2s;
-  background-color: #181b26;
-  border: 1px solid #232735;
-  border-radius: 10px;
-  --pulse-color: rgba(255, 255, 255, 0.08);
+  height: 112px;
+  border-radius: @radius-card !important;
+  border: 1px solid @color-border !important;
+  background-color: @color-surface !important;
+  transition: box-shadow @transition-card;
  position: relative;
-  z-index: 1;
  overflow: visible;

-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-    box-shadow: 0 4px 25px -2px var(--pulse-color);
-    opacity: 0;
-    animation: pulse 5s infinite ease-in-out;
-    pointer-events: none;
-    z-index: -1;
-    will-change: opacity;
-  }
-
  &__icon {
-    font-size: 20px;
+    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
-    color: var(--card-accent, #94a3b8);
+    color: var(--card-accent, @color-gray-text);
  }

  &__title {
-    color: var(--semi-color-text-2) !important;
-    font-size: 12px !important;
+    color: rgba(148, 163, 184, 0.7) !important;
+    font-size: @text-xs !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
@@ -49,61 +38,50 @@
  }

  &__value {
+    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 4px;
-    color: var(--card-accent, var(--semi-color-text-0));
+    color: var(--card-accent, @color-text);
  }

  &__desc {
-    color: var(--semi-color-text-3) !important;
+    color: @color-faint !important;
+    font-size: @text-xs;
  }

  &.blue {
-    --pulse-color: @color-blue-border;
    --card-accent: @color-blue-text;
-    background-color: @color-blue-bg;
-    border-color: @color-blue-border;
-    box-shadow: 0 2px 16px -6px @color-blue-border;
+    --card-glow: @color-blue-border;
+    background-color: @color-blue-bg !important;
+    border-color: @color-blue-border !important;
+    animation: card-glow-rotate 8s linear infinite;
  }
-
  &.orange {
-    --pulse-color: @color-orange-border;
    --card-accent: @color-orange-text;
-    background-color: @color-orange-bg;
-    border-color: @color-orange-border;
-    box-shadow: 0 2px 16px -6px @color-orange-border;
+    --card-glow: @color-orange-border;
+    background-color: @color-orange-bg !important;
+    border-color: @color-orange-border !important;
+    animation: card-glow-rotate 8s linear infinite;
  }
-
  &.green {
-    --pulse-color: @color-green-border;
    --card-accent: @color-green-text;
-    background-color: @color-green-bg;
-    border-color: @color-green-border;
-    box-shadow: 0 2px 16px -6px @color-green-border;
+    --card-glow: @color-green-border;
+    background-color: @color-green-bg !important;
+    border-color: @color-green-border !important;
+    animation: card-glow-rotate 8s linear infinite;
  }
-
  &.purple {
-    --pulse-color: @color-purple-border;
    --card-accent: @color-purple-text;
-    background-color: @color-purple-bg;
-    border-color: @color-purple-border;
-    box-shadow: 0 2px 16px -6px @color-purple-border;
+    --card-glow: @color-purple-border;
+    background-color: @color-purple-bg !important;
+    border-color: @color-purple-border !important;
+    animation: card-glow-rotate 8s linear infinite;
  }
-
  &.gray {
-    --pulse-color: @color-gray-border;
    --card-accent: @color-gray-text;
-    background-color: @color-gray-bg;
-    border-color: @color-gray-border;
-    box-shadow: 0 2px 16px -6px @color-gray-border;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 0.1;
-  }
-  50% {
-    opacity: 0.4;
+    --card-glow: @color-gray-border;
+    background-color: @color-gray-bg !important;
+    border-color: @color-gray-border !important;
+    animation: card-glow-rotate 8s linear infinite;
  }
 }
--- a/ui/src/components/cards/DashboardCardColors.less
+++ b/ui/src/components/cards/DashboardCardColors.less
@@ -1,19 +1 @@
-@color-blue-bg: rgba(96, 165, 250, 0.10);
-@color-blue-border: #3b6ea8;
-@color-blue-text: #60a5fa;
-
-@color-orange-bg: rgba(251, 146, 60, 0.10);
-@color-orange-border: #c2622a;
-@color-orange-text: #fb923c;
-
-@color-green-bg: rgba(52, 211, 153, 0.10);
-@color-green-border: #2a8a61;
-@color-green-text: #34d399;
-
-@color-purple-bg: rgba(167, 139, 250, 0.10);
-@color-purple-border: #6d4fc2;
-@color-purple-text: #a78bfa;
-
-@color-gray-bg: rgba(148, 163, 184, 0.10);
-@color-gray-border: #323a47;
-@color-gray-text: #94a3b8;
+@import '../../tokens.less';
--- a/ui/src/components/cards/KpiCard.jsx
+++ b/ui/src/components/cards/KpiCard.jsx
@@ -6,15 +6,7 @@
 import { Card, Typography, Space } from '@douyinfe/semi-ui-19';
 import './DashboardCard.less';

-export default function KpiCard({
-  title,
-  icon,
-  value,
-  valueFontSize = '1.5rem',
-  description,
-  color = 'gray',
-  children,
-}) {
+export default function KpiCard({ title, icon, value, description, color = 'gray', children }) {
  const { Text } = Typography;
  return (
    <Card className={`dashboard-card ${color}`} bodyStyle={{ padding: '16px' }}>
@@ -26,12 +18,12 @@ export default function KpiCard({
          </Text>
        </Space>
        <div className="dashboard-card__content">
-          <div className="dashboard-card__value" style={{ fontSize: valueFontSize }}>
+          <div className="dashboard-card__value">
            {value}
            {children}
          </div>
          {description && (
-            <Text size="small" type="tertiary" className="dashboard-card__desc">
+            <Text size="small" className="dashboard-card__desc">
              {description}
            </Text>
          )}
--- a/ui/src/components/footer/FredyFooter.jsx
+++ b/ui/src/components/footer/FredyFooter.jsx
@@ -5,23 +5,21 @@

 import './FredyFooter.less';
 import { useSelector } from '../../services/state/store.js';
-import { Typography, Layout, Space, Divider } from '@douyinfe/semi-ui-19';
+import { Layout } from '@douyinfe/semi-ui-19';

 export default function FredyFooter() {
-  const { Text } = Typography;
  const { Footer } = Layout;
  const version = useSelector((state) => state.versionUpdate.versionUpdate);

  return (
    <Footer className="fredyFooter">
-      <Space split={<Divider layout="vertical" />}>
-        <Text type="tertiary" size="small">
-          Fredy V{version?.localFredyVersion || 'N/A'}
-        </Text>
-        <Text size="small" link={{ href: 'https://github.com/orangecoding', target: '_blank' }}>
-          Made with ❤️
-        </Text>
-      </Space>
+      <span className="fredyFooter__version">Fredy v{version?.localFredyVersion || 'N/A'}</span>
+      <span className="fredyFooter__credit">
+        Made with ❤️ by{' '}
+        <a href="https://github.com/orangecoding" target="_blank" rel="noreferrer">
+          Christian Kellner
+        </a>
+      </span>
    </Footer>
  );
 }
--- a/ui/src/components/footer/FredyFooter.less
+++ b/ui/src/components/footer/FredyFooter.less
@@ -1,12 +1,34 @@
+@import '../../tokens.less';
+
 .fredyFooter {
-  background-color: var(--semi-color-bg-1);
+  background-color: @color-base;
+  border-top: 1px solid @color-border;
  display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
  align-items: center;
-  padding: 0 1rem;
-  height: 32px;
-  border-top: 1px solid var(--semi-color-border);
-  z-index: 1000;
-  position: relative;
+  padding: 10px 24px;
+  height: 36px;
  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &__version {
+    font-size: @text-xs;
+    color: @color-faint;
+    font-family: @font-mono;
+  }
+
+  &__credit {
+    font-size: @text-xs;
+    color: @color-faint;
+
+    a {
+      color: @color-muted;
+      text-decoration: none;
+      transition: color @transition-fast;
+
+      &:hover {
+        color: @color-text;
+      }
+    }
+  }
 }
--- a/ui/src/components/grid/jobs/JobGrid.jsx
+++ b/ui/src/components/grid/jobs/JobGrid.jsx
@@ -32,7 +32,6 @@ import {
  IconBriefcase,
  IconBell,
  IconSearch,
-  IconPlusCircle,
  IconArrowUp,
  IconArrowDown,
  IconHome,
@@ -202,10 +201,6 @@ const JobGrid = () => {
  return (
    <div className="jobGrid">
      <div className="jobGrid__topbar">
-        <Button type="primary" icon={<IconPlusCircle />} onClick={() => navigate('/jobs/new')}>
-          New Job
-        </Button>
-
        <Input
          className="jobGrid__topbar__search"
          prefix={<IconSearch />}
--- a/ui/src/components/grid/jobs/JobGrid.less
+++ b/ui/src/components/grid/jobs/JobGrid.less
@@ -1,18 +1,33 @@
@import '../../cards/DashboardCardColors.less';
+@import '../../../tokens.less';

 .jobGrid {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &__topbar {
+    display: flex;
+    align-items: center;
+    gap: @space-3;
+    margin-bottom: @space-4;
+    flex-wrap: wrap;
+
+    &__search {
+      flex: 1;
+      min-width: 160px;
+    }
+  }
+
  &__card {
    height: 100%;
-    transition: transform 0.2s, box-shadow 0.2s;
-    background-color: rgba(36, 36, 36, 0.9);
-    backdrop-filter: blur(8px);
-    border: 1px solid var(--semi-color-border);
-    box-shadow: 0 0 15px -3px rgb(78 78 78 / 50%);
+    background-color: @color-surface !important;
+    border: 1px solid @color-border !important;
+    border-radius: @radius-card !important;
+    transition: transform @transition-card, box-shadow @transition-card;

    &:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 0 15px -3px rgb(78 78 78 / 70%);
-      background-color: rgba(36, 36, 36, 1);
+      box-shadow: 0 4px 20px -4px rgba(0,0,0,0.5);
    }

    &__header {
@@ -35,10 +50,10 @@
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
-      background-color: var(--semi-color-text-3);
+      background-color: rgba(251,113,133,0.7);

      &--active {
-        background-color: #21aa21;
+        background-color: rgba(52,211,153,0.8);
      }
    }

@@ -52,21 +67,21 @@
      display: flex;
      flex-direction: column;
      align-items: center;
-      background: rgba(255, 255, 255, 0.04);
+      background: rgba(255,255,255,0.04);
      border: 1px solid transparent;
-      border-radius: var(--semi-border-radius-small);
+      border-radius: @radius-chip;
      padding: 10px 4px 8px;

      &__number {
        font-size: 22px;
        font-weight: 600;
-        color: var(--semi-color-text-0);
+        color: @color-text;
        line-height: 1.2;
      }

      &__label {
-        font-size: 11px;
-        color: var(--semi-color-text-3);
+        font-size: @text-xs;
+        color: @color-faint;
        display: flex;
        align-items: center;
        gap: 3px;
@@ -102,59 +117,25 @@
    }
  }

-  &__topbar {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 16px;
-
-    .jobGrid__topbar__search {
-      flex: 1;
-      min-width: 0;
-    }
-
-    @media (max-width: 768px) {
-      flex-wrap: wrap;
-
-      .semi-button:first-child {
-        flex-shrink: 0;
-      }
-
-      .jobGrid__topbar__search {
-        flex: 1;
-        min-width: 160px;
-      }
-
-      .semi-radio-group {
-        flex: 1;
-      }
-
-      .semi-select {
-        flex: 1;
-        min-width: 100px;
-        width: auto !important;
-      }
-    }
-  }
-
  &__title {
-    margin-bottom: 0 !important;
+    color: @color-text !important;
  }

  &__actions {
    display: flex;
-    gap: 6px;
+    gap: 4px;
+    flex-shrink: 0;
  }

  &__pagination {
-    margin-top: 2rem;
+    margin-top: @space-4;
    display: flex;
    justify-content: center;
  }
 }

 .jobPopoverContent {
-    padding: .4rem;
-    color: var(--semi-color-white);
+  font-size: @text-sm;
+  padding: 4px 8px;
+  color: @color-text;
 }
--- a/ui/src/components/grid/listings/ListingsGrid.jsx
+++ b/ui/src/components/grid/listings/ListingsGrid.jsx
@@ -10,34 +10,16 @@ import {
  parseString,
  parseNullableBoolean,
 } from '../../../hooks/useSearchParamState.js';
-import {
-  Card,
-  Col,
-  Row,
-  Image,
-  Button,
-  Typography,
-  Pagination,
-  Toast,
-  Divider,
-  Input,
-  Select,
-  Empty,
-  Radio,
-  RadioGroup,
-  Space,
-} from '@douyinfe/semi-ui-19';
+import { Button, Pagination, Toast, Input, Select, Empty, Radio, RadioGroup, Tooltip } from '@douyinfe/semi-ui-19';
 import {
  IconBriefcase,
  IconCart,
-  IconClock,
  IconDelete,
  IconLink,
  IconMapPin,
  IconStar,
  IconStarStroked,
  IconSearch,
-  IconActivity,
  IconEyeOpened,
  IconArrowUp,
  IconArrowDown,
@@ -53,8 +35,6 @@ import { debounce } from '../../../utils';
 import './ListingsGrid.less';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';

-const { Text } = Typography;
-
 const ListingsGrid = () => {
  const listingsData = useSelector((state) => state.listingsData);
  const providers = useSelector((state) => state.provider);
@@ -137,10 +117,6 @@ const ListingsGrid = () => {
    }
  };

-  const cap = (val) => {
-    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
-  };
-
  return (
    <div className="listingsGrid">
      <div className="listingsGrid__topbar">
@@ -238,111 +214,107 @@ const ListingsGrid = () => {
          description="No listings available yet..."
        />
      )}
-      <Row gutter={[16, 16]}>
+      <div className="listingsGrid__grid">
        {(listingsData?.result || []).map((item) => (
-          <Col key={item.id} xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}>
-            <Card
-              className={`listingsGrid__card ${!item.is_active ? 'listingsGrid__card--inactive' : ''}`}
-              style={{ cursor: 'pointer' }}
-              onClick={() => navigate(`/listings/listing/${item.id}`)}
-              cover={
-                <div style={{ position: 'relative' }}>
-                  <div className="listingsGrid__imageContainer">
-                    <Image
-                      src={item.image_url || no_image}
-                      fallback={no_image}
-                      width="100%"
-                      height={180}
-                      style={{ objectFit: 'cover' }}
-                      preview={false}
-                    />
-                    <Button
-                      icon={
-                        item.isWatched === 1 ? (
-                          <IconStar style={{ color: 'rgba(var(--semi-green-5), 1)' }} />
-                        ) : (
-                          <IconStarStroked />
-                        )
-                      }
-                      theme="light"
-                      shape="circle"
-                      size="small"
-                      className="listingsGrid__watchButton"
-                      onClick={(e) => handleWatch(e, item)}
-                    />
-                  </div>
-                  {!item.is_active && <div className="listingsGrid__inactiveOverlay">Inactive</div>}
-                </div>
-              }
-              bodyStyle={{ padding: '12px' }}
-            >
-              <div className="listingsGrid__content">
-                <Text strong ellipsis={{ showTooltip: true }} className="listingsGrid__title">
-                  {cap(item.title)}
-                </Text>
-                <div className="listingsGrid__price">
-                  <IconCart size="small" />
-                  {item.price} €
-                </div>
-                <div className="listingsGrid__meta">
-                  <Text
-                    type="secondary"
-                    icon={<IconMapPin />}
-                    size="small"
-                    ellipsis={{ showTooltip: true }}
-                    style={{ width: '100%' }}
-                  >
-                    {item.address || 'No address provided'}
-                  </Text>
-                  <Space spacing={12} wrap>
-                    <Text type="tertiary" size="small" icon={<IconBriefcase />}>
-                      {item.provider.charAt(0).toUpperCase() + item.provider.slice(1)}
-                    </Text>
-                    <Text type="tertiary" size="small" icon={<IconClock />}>
-                      {timeService.format(item.created_at, false)}
-                    </Text>
-                  </Space>
-                  {item.distance_to_destination ? (
-                    <Text type="tertiary" size="small" icon={<IconActivity />}>
-                      {item.distance_to_destination} m to chosen address
-                    </Text>
-                  ) : (
-                    <Text type="tertiary" size="small" icon={<IconActivity />}>
-                      Distance cannot be calculated
-                    </Text>
-                  )}
-                </div>
-                <Divider margin=".6rem" />
-                <div className="listingsGrid__actions">
-                  <div className="listingsGrid__linkButton" onClick={(e) => e.stopPropagation()}>
-                    <a href={item.link} target="_blank" rel="noopener noreferrer">
-                      <IconLink />
-                    </a>
-                  </div>
-                  <Button
-                    type="secondary"
-                    size="small"
-                    title="View Details"
-                    onClick={() => navigate(`/listings/listing/${item.id}`)}
-                    icon={<IconEyeOpened />}
-                  />
-                  <Button
-                    title="Remove"
-                    type="danger"
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setListingToDelete(item.id);
-                      setDeleteModalVisible(true);
-                    }}
-                    icon={<IconDelete />}
-                  />
+          <div
+            key={item.id}
+            className="listingsGrid__card"
+            style={{ cursor: 'pointer' }}
+            role="button"
+            tabIndex={0}
+            onClick={() => navigate(`/listings/listing/${item.id}`)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') navigate(`/listings/listing/${item.id}`);
+            }}
+          >
+            <div className="listingsGrid__card__image-wrapper">
+              <img
+                src={item.image_url || no_image}
+                alt={item.title}
+                onError={(e) => {
+                  e.target.src = no_image;
+                }}
+              />
+              {!item.is_active && (
+                <div className="listingsGrid__card__inactive-watermark">
+                  <span>Inactive</span>
                </div>
+              )}
+              <button
+                type="button"
+                className="listingsGrid__card__star"
+                onClick={(e) => handleWatch(e, item)}
+                aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
+              >
+                {item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
+              </button>
+            </div>
+
+            <div className="listingsGrid__card__body">
+              <div className="listingsGrid__card__title" title={item.title}>
+                {item.title}
              </div>
-            </Card>
-          </Col>
+              {item.price && (
+                <div className="listingsGrid__card__price">
+                  <IconCart size="small" />
+                  {item.price}
+                </div>
+              )}
+              {item.address && (
+                <div className="listingsGrid__card__meta">
+                  <IconMapPin />
+                  {item.address}
+                </div>
+              )}
+              <div className="listingsGrid__card__meta">
+                <IconBriefcase />
+                {item.provider}
+              </div>
+              <div className="listingsGrid__card__provider">{timeService.format(item.created_at, false)}</div>
+            </div>
+
+            <div className="listingsGrid__card__actions" onClick={(e) => e.stopPropagation()}>
+              <Tooltip content="Original Listing">
+                <Button
+                  size="small"
+                  icon={<IconLink />}
+                  style={{ color: '#60a5fa' }}
+                  theme="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    window.open(item.link, '_blank');
+                  }}
+                />
+              </Tooltip>
+              <Tooltip content="View in Fredy">
+                <Button
+                  size="small"
+                  icon={<IconEyeOpened />}
+                  style={{ color: '#34d399' }}
+                  theme="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    navigate(`/listings/listing/${item.id}`);
+                  }}
+                />
+              </Tooltip>
+              <Tooltip content="Remove">
+                <Button
+                  size="small"
+                  icon={<IconDelete />}
+                  style={{ color: '#fb7185' }}
+                  theme="borderless"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setListingToDelete(item.id);
+                    setDeleteModalVisible(true);
+                  }}
+                />
+              </Tooltip>
+            </div>
+          </div>
        ))}
-      </Row>
+      </div>
      {(listingsData?.result || []).length > 0 && (
        <div className="listingsGrid__pagination">
          <Pagination
--- a/ui/src/components/grid/listings/ListingsGrid.less
+++ b/ui/src/components/grid/listings/ListingsGrid.less
@@ -1,22 +1,16 @@
-@import '../../cards/DashboardCardColors.less';
+@import '../../../tokens.less';

 .listingsGrid {
-  &__imageContainer {
-    position: relative;
-    height: 180px;
-    overflow: hidden;
-  }
-
  &__topbar {
    display: flex;
-    flex-wrap: wrap;
    align-items: center;
-    gap: 8px;
-    margin-bottom: 16px;
+    gap: @space-3;
+    margin-bottom: @space-4;
+    flex-wrap: wrap;

-    .listingsGrid__topbar__search {
-      flex: 1;
+    &__search {
      min-width: 200px;
+      flex: 1;
    }

    @media (max-width: 768px) {
@@ -37,149 +31,151 @@
    }
  }

-  &__watchButton {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background-color: white !important;
-    box-shadow: var(--semi-shadow-elevated);
-
-    &:hover {
-      background-color: var(--semi-color-fill-0) !important;
-    }
-  }
-
-  &__statusTag {
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 12px;
  }

  &__card {
-    height: 100%;
-    transition: transform 0.2s, box-shadow 0.2s;
-    background-color: rgba(36, 36, 36, 0.9);
-    backdrop-filter: blur(8px);
-    border: 1px solid var(--semi-color-border);
+    background: @color-elevated !important;
+    border: 1px solid @color-border !important;
+    border-radius: @radius-card !important;
+    overflow: hidden;
+    transition: transform @transition-card, box-shadow @transition-card;
+    display: flex;
+    flex-direction: column;

    &:hover {
-      transform: translateY(-4px);
-      box-shadow: var(--semi-shadow-elevated);
-      background-color: rgba(36, 36, 36, 1);
+      transform: translateY(-2px);
+      box-shadow: 0 6px 24px -4px rgba(0,0,0,0.6);
    }

-    &--inactive {
+    &__image-wrapper {
+      position: relative;
+      height: 160px;
+      overflow: hidden;
+      flex-shrink: 0;

-      .listingsGrid__imageContainer,
-      .listingsGrid__content {
-        opacity: 0.6;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+    }
+
+    &__inactive-watermark {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0,0,0,0.35);
+
+      span {
+        font-size: 18px;
+        font-weight: 800;
+        color: rgba(251,113,133,0.9);
+        text-transform: uppercase;
+        letter-spacing: 0.15em;
+        transform: rotate(-30deg);
+        border: 2px solid rgba(251,113,133,0.5);
+        padding: 4px 12px;
+        border-radius: @radius-chip;
+        backdrop-filter: blur(2px);
+      }
+    }
+
+    &__star {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: rgba(0,0,0,0.5);
+      border: none;
+      border-radius: 50%;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background @transition-fast;
+      padding: 0;
+
+      &:hover {
+        background: rgba(0,0,0,0.75);
+      }
+
+      svg {
+        color: @color-accent;
+        font-size: 14px;
+      }
+    }
+
+    &__body {
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      flex: 1;
+    }
+
+    &__title {
+      font-weight: 700;
+      font-size: @text-sm;
+      color: @color-text;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__price {
+      font-size: @text-base;
+      font-weight: 600;
+      color: @color-success;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    &__meta {
+      font-size: @text-xs;
+      color: @color-muted;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .semi-icon {
+        font-size: 11px;
+        color: @color-faint;
+      }
+    }
+
+    &__provider {
+      font-size: @text-xs;
+      color: @color-faint;
+    }
+
+    &__actions {
+      display: flex;
+      justify-content: space-around;
+      padding: 8px 12px;
+      border-top: 1px solid @color-border;
+      gap: 4px;
+      margin-top: auto;
+
+      button {
+        flex: 1;
+        border: none !important;
+        border-radius: @radius-chip !important;
      }
    }
  }

-  &__inactiveOverlay {
-    position: absolute;
-    top: 70px;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    z-index: 10;
-    color: var(--semi-color-danger);
-    font-weight: bold;
-    font-size: 1.3rem;
-    text-transform: uppercase;
-    transform: rotate(-30deg);
-    padding: 5px;
-    max-height: fit-content;
-    margin: auto;
-  }
-
-  &__titleLink {
-    color: inherit;
-    text-decoration: none;
-
-    &:hover {
-      color: var(--semi-color-primary);
-    }
-  }
-
-  &__title {
-    display: block;
-    height: 1.5em;
-  }
-
  &__pagination {
-    margin-top: 2rem;
+    margin-top: @space-4;
    display: flex;
    justify-content: center;
  }
-
-  &__price {
-    font-size: 18px;
-    font-weight: 700;
-    color: @color-green-text;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    margin: 8px 0 6px;
-  }
-
-  &__meta {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    width: 100%;
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  &__setupButton {
-    margin-bottom: 1rem;
-  }
-
-  &__linkButton {
-    background: var(--semi-color-primary);
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    height: 24px;
-    width: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 3px;
-
-    a {
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    &:hover {
-      background: var(--semi-color-primary-hover);
-    }
-  }
-
-  // Ensure icons and text are vertically aligned
-  .semi-typography {
-    display: inline-flex;
-    align-items: center;
-
-    .semi-typography-icon {
-      display: flex;
-      align-items: center;
-      margin-top: 1px; // Minor nudge if needed, but flex should handle most
-    }
-  }
 }
--- a/ui/src/components/headline/Headline.jsx
+++ b/ui/src/components/headline/Headline.jsx
@@ -3,13 +3,16 @@
 * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
 */

-import { Typography } from '@douyinfe/semi-ui-19';
+import './Headline.less';

-export default function Headline({ text, size = 3 } = {}) {
-  const { Title } = Typography;
+export default function Headline({ text, actions } = {}) {
  return (
-    <Title heading={size} style={{ marginBottom: '1rem' }}>
-      {text}
-    </Title>
+    <div className="page-heading">
+      <div className="page-heading__row">
+        <h1 className="page-heading__title">{text}</h1>
+        {actions && <div>{actions}</div>}
+      </div>
+      <div className="page-heading__line" />
+    </div>
  );
 }
--- a/ui/src/components/headline/Headline.less
+++ b/ui/src/components/headline/Headline.less
@@ -0,0 +1,27 @@
+@import '../../tokens.less';
+
+.page-heading {
+  margin-bottom: @space-6;
+  margin-top: 0;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  &__title {
+    font-size: @text-lg !important;
+    font-weight: 700 !important;
+    color: @color-text !important;
+    margin: 0 !important;
+    line-height: 1.2;
+  }
+
+  &__line {
+    height: 1px;
+    background: linear-gradient(90deg, rgba(224,74,56,0.5) 0%, rgba(224,74,56,0) 100%);
+    width: 100%;
+  }
+}
--- a/ui/src/components/logout/Logout.jsx
+++ b/ui/src/components/logout/Logout.jsx
@@ -3,25 +3,20 @@
 * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
 */

-import { Button } from '@douyinfe/semi-ui-19';
 import { xhrPost } from '../../services/xhr';
 import { IconUser } from '@douyinfe/semi-icons';

 const Logout = function Logout({ text }) {
+  const handleLogout = async () => {
+    await xhrPost('/api/login/logout');
+    location.reload();
+  };
+
  return (
-    <div>
-      <Button
-        icon={<IconUser />}
-        type="danger"
-        theme="solid"
-        onClick={async () => {
-          await xhrPost('/api/login/logout');
-          location.reload();
-        }}
-      >
-        {text && 'Logout'}
-      </Button>
-    </div>
+    <button className={`navigate__logout-btn${!text ? ' navigate__logout-btn--icon-only' : ''}`} onClick={handleLogout}>
+      <IconUser size="default" />
+      {text && 'Logout'}
+    </button>
  );
 };

--- a/ui/src/components/navigation/Navigate.less
+++ b/ui/src/components/navigation/Navigate.less
@@ -1,11 +1,218 @@
+@import '../../tokens.less';
+
 .navigate {
-  &__footer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: @color-surface;
+  border-right: 1px solid @color-border;
+  transition: @transition-sidebar;
+  overflow: hidden;
+
+  &__header {
+    display: flex;
    align-items: center;
    justify-content: center;
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
-    display: flex;
-    padding-bottom: 12px;
+    padding: 20px 16px 16px;
+    min-height: 64px;
+    flex-shrink: 0;
+
+    img {
+      transition: width @transition-fast, opacity @transition-fast;
+    }
  }
-}
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 1rem 8px 10px !important;
+    margin-top: auto;
+    flex-shrink: 0;
+    border-top: 1px solid @color-border;
+
+    &--collapsed {
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem 8px 10px !important;
+      gap: 6px;
+    }
+  }
+
+  &__logout-btn {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 32px;
+    padding: 0 10px;
+    border: 1px solid rgba(251,113,133,0.25);
+    background: rgba(251,113,133,0.06);
+    color: #fb7185;
+    border-radius: @radius-btn;
+    cursor: pointer;
+    font-size: @text-sm;
+    font-weight: 500;
+    font-family: @font-ui;
+    transition: background @transition-fast, border-color @transition-fast;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      background: rgba(251,113,133,0.12);
+      border-color: rgba(251,113,133,0.4);
+    }
+
+    &--icon-only {
+      flex: none;
+      width: 32px;
+      height: 32px;
+      justify-content: center;
+      padding: 0;
+      border: none;
+      background: transparent;
+      border-radius: @radius-btn;
+
+      &:hover {
+        background: rgba(251,113,133,0.08);
+      }
+    }
+  }
+
+  &__toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 32px;
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    color: @color-faint;
+    cursor: pointer;
+    border-radius: @radius-btn;
+    transition: background @transition-fast, color @transition-fast;
+
+    &:hover {
+      background: rgba(255,255,255,0.06);
+      color: @color-muted;
+    }
+  }
+}
+
+// Semi Nav overrides
+.semi-navigation {
+  background: @color-surface !important;
+  border-right: none !important;
+}
+
+.semi-navigation-item {
+  border-radius: @radius-btn !important;
+  color: @color-muted !important;
+  transition: background @transition-fast, color @transition-fast !important;
+  margin: 2px 8px !important;
+
+  &:hover {
+    color: @color-text !important;
+  }
+
+  &.semi-navigation-item-selected,
+  &[aria-selected="true"] {
+    background: rgba(224,74,56,0.12) !important;
+    border: 1px solid rgba(224,74,56,0.25) !important;
+    color: @color-text !important;
+
+    .semi-navigation-item-icon {
+      color: @color-accent !important;
+    }
+  }
+}
+
+.semi-navigation-sub-title {
+  color: @color-muted !important;
+}
+
+// Collapsed state — icons perfectly centered
+.semi-navigation-collapsed {
+  // Text span is display:block and takes up flex space — must be removed so justify-content:center works
+  .semi-navigation-item-text {
+    display: none !important;
+  }
+
+  .semi-navigation-item,
+  .semi-navigation-sub-title {
+    margin: 2px 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    height: 36px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+
+  .semi-navigation-item-inner,
+  .semi-navigation-sub-title-inner {
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  // Semi adds margin-right to icons for text spacing — remove it when collapsed
+  .semi-navigation-item-icon,
+  .semi-navigation-sub-title-icon {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+    margin-right: 0 !important;
+    padding: 0 !important;
+    width: auto !important;
+    min-width: 0 !important;
+  }
+}
+
+// Semi Nav.Footer — full width, no extra padding (our BEM class controls it)
+.semi-navigation-footer {
+  width: 100% !important;
+  box-sizing: border-box !important;
+}
+
+// Collapsed submenu popup — actual class used by Semi UI is .semi-navigation-popover
+.semi-navigation-popover {
+  background: @color-elevated !important;
+  border: 1px solid @color-border !important;
+  border-radius: @radius-card !important;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
+  overflow: hidden !important;
+
+  .semi-navigation-item {
+    margin: 2px 6px !important;
+    color: @color-muted !important;
+    border: none !important;
+    border-radius: @radius-btn !important;
+
+    &:hover {
+      background: rgba(255,255,255,0.06) !important;
+      color: @color-text !important;
+    }
+
+    &.semi-navigation-item-selected,
+    &.semi-dropdown-item-active {
+      background: rgba(224,74,56,0.10) !important;
+      border: none !important;
+      color: @color-text !important;
+
+      .semi-navigation-item-icon {
+        color: @color-accent !important;
+      }
+    }
+  }
+}
--- a/ui/src/components/navigation/Navigation.jsx
+++ b/ui/src/components/navigation/Navigation.jsx
@@ -4,7 +4,7 @@
 */

 import { useEffect, useState } from 'react';
-import { Button, Nav } from '@douyinfe/semi-ui-19';
+import { Nav } from '@douyinfe/semi-ui-19';
 import { IconStar, IconSetting, IconTerminal, IconHistogram, IconSidebar } from '@douyinfe/semi-icons';
 import logoWhite from '../../assets/logo_white.png';
 import heart from '../../assets/heart.png';
@@ -65,20 +65,32 @@ export default function Navigation({ isAdmin }) {
    return '/' + split[0];
  }

+  const sidebarWidth = collapsed ? '60px' : '220px';
+
  return (
    <Nav
-      style={{ height: '100%', maxWidth: collapsed ? '60px' : '240px' }}
+      style={{ height: '100%', width: sidebarWidth, minWidth: sidebarWidth, maxWidth: sidebarWidth }}
      items={items}
      isCollapsed={collapsed}
      selectedKeys={[parsePathName(location.pathname)]}
      onSelect={(key) => {
        navigate(key.itemKey);
      }}
-      header={<img src={collapsed ? heart : logoWhite} width={collapsed ? '30' : '120'} alt="Fredy Logo" />}
+      header={
+        <div className="navigate__header">
+          <img src={collapsed ? heart : logoWhite} width={collapsed ? 30 : 160} alt="Fredy Logo" />
+        </div>
+      }
      footer={
-        <Nav.Footer className="navigate__footer">
+        <Nav.Footer className={`navigate__footer${collapsed ? ' navigate__footer--collapsed' : ''}`}>
          <Logout text={!collapsed} />
-          <Button icon={<IconSidebar />} onClick={() => setCollapsed(!collapsed)} />
+          <button
+            className="navigate__toggle-btn"
+            onClick={() => setCollapsed(!collapsed)}
+            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            <IconSidebar size="default" />
+          </button>
        </Nav.Footer>
      }
    />
--- a/ui/src/components/segment/SegmentParts.less
+++ b/ui/src/components/segment/SegmentParts.less
@@ -1,7 +1,89 @@
+@import '../../tokens.less';
+
 .segmentParts {
-  border: 1px solid #323232 !important;
-  border-radius: .9rem !important;
-  color: rgba(var(--semi-grey-8), 1);
-  background: rgb(53, 54, 60);
-  margin: 0 0 1rem 0;
+  background: rgba(255,255,255,0.03) !important;
+  border: 1px solid @color-border !important;
+  border-radius: @radius-card !important;
+  margin-bottom: @space-4;
+
+  // Semi Card header
+  .semi-card-header {
+    border-bottom: 1px solid @color-border !important;
+    padding: 16px 20px !important;
+  }
+
+  .semi-card-header-wrapper {
+    padding: 0 !important;
+  }
+
+  .semi-card-meta-title {
+    font-weight: 700 !important;
+    color: @color-text !important;
+    font-size: @text-base !important;
+  }
+
+  .semi-card-meta-description {
+    color: #b8b8b8 !important;
+    font-size: @text-sm !important;
+    margin-top: 2px;
+  }
+
+  .semi-card-body {
+    padding: 16px 20px !important;
+  }
+
+  // Semi input focus — subtle, not accent
+  .semi-input-wrapper:focus-within,
+  .semi-select:focus-within {
+    border-color: @color-border-bright !important;
+    box-shadow: none !important;
+  }
+
+  // Icon in card header
+  .semi-card-meta-avatar {
+    color: @color-accent !important;
+    display: flex;
+    align-items: center;
+  }
+
+  // Inputs inside segment cards
+  .semi-input,
+  .semi-input-number-wrapper {
+    background: rgba(255,255,255,0.06) !important;
+    border: 1px solid rgba(255,255,255,0.10) !important;
+    border-radius: @radius-input !important;
+  }
+
+  // TagInput
+  .semi-tagInput-wrapper {
+    background: transparent !important;
+    border: 1px solid rgba(255,255,255,0.12) !important;
+    border-radius: @radius-input !important;
+    min-height: 38px;
+    outline: none !important;
+    &:focus-within {
+      border-color: @color-border-bright !important;
+      box-shadow: none !important;
+    }
+  }
+  .semi-tagInput {
+    background: transparent !important;
+  }
+  // Tag chips inside TagInput
+  .semi-tag {
+    background: @color-elevated !important;
+    border: 1px solid @color-border-bright !important;
+    color: @color-text !important;
+    border-radius: @radius-chip !important;
+    font-size: @text-sm !important;
+    height: 24px !important;
+    line-height: 22px !important;
+  }
+  .semi-tag-close {
+    color: @color-muted !important;
+    &:hover {
+      color: @color-text !important;
+      background: transparent !important;
+    }
+  }
 }
--- a/ui/src/components/table/UserTable.jsx
+++ b/ui/src/components/table/UserTable.jsx
@@ -5,15 +5,11 @@

 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 import { format } from '../../services/time/timeService';
-import { Table, Button, Empty } from '@douyinfe/semi-ui-19';
+import { Table, Button, Empty, Tag } from '@douyinfe/semi-ui-19';
 import { IconDelete, IconEdit } from '@douyinfe/semi-icons';

 const empty = (
-  <Empty
-    image={<IllustrationNoResult />}
-    darkModeImage={<IllustrationNoResultDark />}
-    description={'No users found.'}
-  />
+  <Empty image={<IllustrationNoResult />} darkModeImage={<IllustrationNoResultDark />} description="No users found." />
 );

 export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {}) {
@@ -23,47 +19,73 @@ export default function UserTable({ user = [], onUserRemoval, onUserEdit } = {})
      empty={empty}
      columns={[
        {
-          title: 'Username',
+          title: 'User',
          dataIndex: 'username',
+          render: (value, record) => (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <span style={{ color: '#efefef', fontWeight: 500 }}>{value}</span>
+              {record.isAdmin && (
+                <Tag
+                  size="small"
+                  style={{
+                    background: 'rgba(224,74,56,0.12)',
+                    border: '1px solid rgba(224,74,56,0.35)',
+                    color: '#e04a38',
+                    borderRadius: 9999,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: '0.04em',
+                    padding: '0 8px',
+                  }}
+                >
+                  ADMIN
+                </Tag>
+              )}
+            </div>
+          ),
        },
        {
          title: 'Last login',
          dataIndex: 'lastLogin',
-          render: (value) => {
-            return format(value);
-          },
+          render: (value) => format(value),
        },
        {
-          title: 'Number of jobs',
+          title: 'Jobs',
          dataIndex: 'numberOfJobs',
        },
        {
          title: 'MCP Token',
          dataIndex: 'mcpToken',
-          render: (value) => {
-            return (
-              <span style={{ fontFamily: 'monospace', fontSize: '0.85em', wordBreak: 'break-all' }}>
-                {value || '---'}
-              </span>
-            );
-          },
+          render: (value) => (
+            <span
+              style={{
+                fontFamily: 'JetBrains Mono, monospace',
+                fontSize: '0.85em',
+                wordBreak: 'break-all',
+                color: '#505050',
+              }}
+            >
+              {value || '---'}
+            </span>
+          ),
        },
        {
          title: '',
          dataIndex: 'tools',
-          render: (value, user) => {
-            return (
-              <div style={{ float: 'right' }}>
-                <Button
-                  type="danger"
-                  icon={<IconDelete />}
-                  onClick={() => onUserRemoval(user.id)}
-                  style={{ marginRight: '1rem' }}
-                />
-                <Button type="primary" icon={<IconEdit />} onClick={() => onUserEdit(user.id)} />
-              </div>
-            );
-          },
+          render: (_, record) => (
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+              <Button
+                style={{
+                  background: 'transparent',
+                  border: '1px solid rgba(251,113,133,0.2)',
+                  color: '#fb7185',
+                }}
+                icon={<IconDelete />}
+                onClick={() => onUserRemoval(record.id)}
+              />
+              <Button type="primary" theme="solid" icon={<IconEdit />} onClick={() => onUserEdit(record.id)} />
+            </div>
+          ),
        },
      ]}
      dataSource={user}
--- a/ui/src/tokens.less
+++ b/ui/src/tokens.less
@@ -0,0 +1,69 @@
+// Backgrounds
+@color-base:          #0d0d0d;
+@color-surface:       #161616;
+@color-elevated:      #1e1e1e;
+@color-border:        #2a2a2a;
+@color-border-bright: #383838;
+
+// Accent
+@color-accent:        #e04a38;
+@color-accent-dim:    #c13827;
+@color-accent-glow:   rgba(224, 74, 56, 0.13);
+
+// Text
+@color-text:          #efefef;
+@color-muted:         #909090;
+@color-faint:         #505050;
+
+// Semantic
+@color-success:        #34d399;
+@color-success-dim:    #065f46;
+@color-success-active: #21aa21;
+@color-error:          #fb7185;
+@color-error-dim:      #881337;
+@color-warning:        #fbbf24;
+@color-info:           #60a5fa;
+
+// Fill overlays
+@color-fill-subtle:  rgba(255, 255, 255, 0.04);
+@color-fill-overlay: rgba(255, 255, 255, 0.08);
+
+// KPI card accents
+@color-blue-text:   #60a5fa; @color-blue-border: #3b6ea8; @color-blue-bg: rgba(96,165,250,0.10);
+@color-orange-text: #fb923c; @color-orange-border: #c2622a; @color-orange-bg: rgba(251,146,60,0.10);
+@color-green-text:  #34d399; @color-green-border: #2a8a61; @color-green-bg: rgba(52,211,153,0.10);
+@color-purple-text: #a78bfa; @color-purple-border: #6d4fc2; @color-purple-bg: rgba(167,139,250,0.10);
+@color-gray-text:   #94a3b8; @color-gray-border: #323a47; @color-gray-bg: rgba(148,163,184,0.10);
+
+// Typography
+@font-ui:   'Outfit', system-ui, sans-serif;
+@font-mono: 'JetBrains Mono', monospace;
+
+@text-xs:   11px;
+@text-sm:   12px;
+@text-base: 14px;
+@text-md:   16px;
+@text-lg:   20px;
+@text-xl:   24px;
+
+// Spacing
+@space-1: 4px;
+@space-2: 8px;
+@space-3: 12px;
+@space-4: 16px;
+@space-5: 20px;
+@space-6: 24px;
+@space-8: 32px;
+@space-12: 48px;
+
+// Radius
+@radius-input:  10px;
+@radius-card:   10px;
+@radius-btn:    6px;
+@radius-pill:   9999px;
+@radius-chip:   4px;
+
+// Transitions
+@transition-fast: 0.15s ease-in-out;
+@transition-card: 0.18s ease-in-out;
+@transition-sidebar: width 0.25s ease-in-out;
--- a/ui/src/views/dashboard/Dashboard.jsx
+++ b/ui/src/views/dashboard/Dashboard.jsx
@@ -4,7 +4,7 @@
 */

 import React from 'react';
-import { Button, Col, Row, Toast, Typography } from '@douyinfe/semi-ui-19';
+import { Button, Col, Row, Toast } from '@douyinfe/semi-ui-19';
 import {
  IconTerminal,
  IconStar,
@@ -20,6 +20,7 @@ import {
 import { useSelector, useActions } from '../../services/state/store';
 import KpiCard from '../../components/cards/KpiCard.jsx';
 import PieChartCard from '../../components/cards/PieChartCard.jsx';
+import Headline from '../../components/headline/Headline.jsx';

 import './Dashboard.less';
 import { xhrPost } from '../../services/xhr.js';
@@ -34,11 +35,12 @@ export default function Dashboard() {

  const kpis = dashboard?.kpis || { totalJobs: 0, totalListings: 0, providersUsed: 0 };
  const pieData = dashboard?.pie || [];
-  const { Text } = Typography;

  return (
    <div className="dashboard">
-      <Text className="dashboard__section-label">General</Text>
+      <Headline text="Dashboard" />
+
+      <div className="dashboard__section-label">General</div>
      <Row gutter={[16, 16]} className="dashboard__row">
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <KpiCard
@@ -51,7 +53,6 @@ export default function Dashboard() {
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <KpiCard
            title="Last Search"
-            valueFontSize="14px"
            value={
              dashboard?.general?.lastRun == null || dashboard?.general?.lastRun === 0
                ? '---'
@@ -69,7 +70,6 @@ export default function Dashboard() {
                ? '---'
                : format(dashboard?.general?.nextRun)
            }
-            valueFontSize="14px"
            icon={<IconDoubleChevronRight />}
            description="Next execution timestamp"
          />
@@ -96,7 +96,7 @@ export default function Dashboard() {
        </Col>
      </Row>

-      <Text className="dashboard__section-label">Overview</Text>
+      <div className="dashboard__section-label">Overview</div>
      <Row gutter={[16, 16]} className="dashboard__row">
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <KpiCard
@@ -132,10 +132,9 @@ export default function Dashboard() {
            value={`${
              !kpis.medianPriceOfListings
                ? '---'
-                : new Intl.NumberFormat('de-DE', {
-                    style: 'currency',
-                    currency: 'EUR',
-                  }).format(kpis.medianPriceOfListings)
+                : new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(
+                    kpis.medianPriceOfListings,
+                  )
            }`}
            icon={<IconNoteMoney />}
            description="Median Price of listings"
@@ -143,7 +142,7 @@ export default function Dashboard() {
        </Col>
      </Row>

-      <Text className="dashboard__section-label">Provider Insights</Text>
+      <div className="dashboard__section-label">Provider Insights</div>
      <div className="dashboard__pie-wrapper">
        <PieChartCard data={pieData} />
      </div>
--- a/ui/src/views/dashboard/Dashboard.less
+++ b/ui/src/views/dashboard/Dashboard.less
@@ -1,3 +1,5 @@
+@import '../../tokens.less';
+
 .dashboard {
  display: flex;
  flex-direction: column;
@@ -5,13 +7,13 @@

  &__section-label {
    display: block;
-    font-size: 11px !important;
-    font-weight: 600 !important;
+    font-size: @text-xs;
+    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
-    color: #5a6478 !important;
+    color: @color-faint;
    margin-bottom: 10px;
-    margin-top: 4px;
+    margin-top: 1.5rem;
  }

  &__row {
@@ -22,9 +24,8 @@
  &__pie-wrapper {
    background: #23242a;
    border: 1px solid #37404e;
-
-    border-radius: 10px;
-    padding: 24px;
+    border-radius: @radius-card;
+    padding: 28px;
    max-height: 320px;
    flex: 1;
    display: flex;
--- a/ui/src/views/generalSettings/GeneralSettings.jsx
+++ b/ui/src/views/generalSettings/GeneralSettings.jsx
@@ -30,6 +30,7 @@ import {
 } from '../../services/backupRestoreClient';
 import { IconSave, IconRefresh, IconSignal, IconHome, IconFolder } from '@douyinfe/semi-icons';
 import { debounce } from '../../utils';
+import Headline from '../../components/headline/Headline.jsx';
 import './GeneralSettings.less';

 function formatFromTimestamp(ts) {
@@ -244,6 +245,7 @@ const GeneralSettings = function GeneralSettings() {

  return (
    <div className="generalSettings">
+      <Headline text="Settings" />
      {!loading && (
        <>
          <Tabs type="line">
--- a/ui/src/views/generalSettings/GeneralSettings.less
+++ b/ui/src/views/generalSettings/GeneralSettings.less
@@ -1,17 +1,73 @@
+@import '../../tokens.less';
+
 .generalSettings {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
  &__tab-content {
-    padding: 20px 0;
-    max-width: 860px;
+    padding: @space-4 0;
  }

  &__timePickerContainer {
    display: flex;
-    align-items: baseline;
-    gap: 1rem;
+    gap: @space-3;
    flex-wrap: wrap;
+    align-items: center;
  }

  &__save-row {
-    margin-top: 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: @space-2;
  }
 }
+
+// InputNumber fix
+.semi-input-number {
+  background: @color-elevated !important;
+  border: 1px solid @color-border-bright !important;
+  border-radius: @radius-input !important;
+  color: @color-text !important;
+}
+
+.semi-input-number-button-up,
+.semi-input-number-button-down {
+  background: rgba(255,255,255,0.06) !important;
+  border-color: @color-border-bright !important;
+  color: @color-muted !important;
+
+  &:hover {
+    background: rgba(255,255,255,0.12) !important;
+    color: @color-text !important;
+  }
+}
+
+// TimePicker fix — scoped so it doesn't pollute modal headers
+.semi-timepicker .semi-input-wrapper,
+.semi-timepicker .semi-input-inset-label-wrapper {
+  background: @color-elevated !important;
+  border: 1px solid @color-border-bright !important;
+  border-radius: @radius-input !important;
+  color: @color-text !important;
+}
+
+// Tabs styling
+.semi-tabs-bar-line .semi-tabs-tab {
+  color: @color-faint;
+  font-size: @text-base;
+  transition: color @transition-fast;
+
+  &:hover {
+    color: @color-muted;
+  }
+
+  &.semi-tabs-tab-active {
+    color: @color-text !important;
+  }
+}
+
+.semi-tabs-bar-line .semi-tabs-ink-bar {
+  background-color: @color-accent !important;
+  height: 2px;
+}
--- a/ui/src/views/jobs/Jobs.jsx
+++ b/ui/src/views/jobs/Jobs.jsx
@@ -3,12 +3,25 @@
 * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
 */

+import { useNavigate } from 'react-router-dom';
+import { Button } from '@douyinfe/semi-ui-19';
+import { IconPlusCircle } from '@douyinfe/semi-icons';
 import JobGrid from '../../components/grid/jobs/JobGrid.jsx';
+import Headline from '../../components/headline/Headline.jsx';
 import './Jobs.less';

 export default function Jobs() {
+  const navigate = useNavigate();
  return (
    <div className="jobs">
+      <Headline
+        text="Jobs"
+        actions={
+          <Button type="primary" theme="solid" icon={<IconPlusCircle />} onClick={() => navigate('/jobs/new')}>
+            New Job
+          </Button>
+        }
+      />
      <JobGrid />
    </div>
  );
--- a/ui/src/views/jobs/Jobs.less
+++ b/ui/src/views/jobs/Jobs.less
@@ -1,8 +1,7 @@
+@import '../../tokens.less';
+
 .jobs {
-  &__newButton {
-    margin-top: 1rem !important;
-    float: left;
-    margin-bottom: 1rem !important;
-    margin-left: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
--- a/ui/src/views/jobs/mutation/JobMutation.jsx
+++ b/ui/src/views/jobs/mutation/JobMutation.jsx
@@ -18,6 +18,7 @@ import { Divider, Input, Switch, Button, TagInput, Toast, Select } from '@douyin
 import './JobMutation.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
 import {
+  IconArrowLeft,
  IconBell,
  IconBriefcase,
  IconPaperclip,
@@ -144,7 +145,19 @@ export default function JobMutator() {
        />
      )}

-      <Headline text={jobToBeEdit ? 'Edit Job' : 'Create new Job'} />
+      <Headline
+        text={jobToBeEdit ? 'Edit Job' : 'Create new Job'}
+        actions={
+          <Button
+            icon={<IconArrowLeft />}
+            onClick={() => navigate('/jobs')}
+            theme="borderless"
+            style={{ color: '#909090' }}
+          >
+            Back
+          </Button>
+        }
+      />
      <form>
        <SegmentPart name="Name" Icon={IconPaperclip}>
          <Input
--- a/ui/src/views/jobs/mutation/JobMutation.less
+++ b/ui/src/views/jobs/mutation/JobMutation.less
@@ -1,25 +1,36 @@
+@import '../../../tokens.less';
+
 .jobMutation {
  &__newButton {
    float: right;
-    margin-bottom: 1rem;
+    margin-bottom: @space-4;
  }

  &__specFilter {
    display: flex;
-    gap: 1.5rem;
+    gap: @space-4;
    flex-wrap: wrap;
  }

  &__specFilterItem {
    display: flex;
    flex-direction: column;
-    gap: 0.5rem;
+    gap: @space-2;
    flex: 1;
    min-width: 150px;
  }

  &__specFilterLabel {
    font-weight: 500;
+    font-size: @text-sm;
+    color: @color-muted;
+  }
+
+  &__actions {
+    display: flex;
+    gap: @space-3;
+    margin-top: @space-4;
+    justify-content: flex-end;
  }
 }

--- a/ui/src/views/listings/ListingDetail.jsx
+++ b/ui/src/views/listings/ListingDetail.jsx
@@ -41,6 +41,7 @@ import * as timeService from '../../services/time/timeService.js';
 import { distanceMeters, getBoundsFromCoords } from './mapUtils.js';
 import { xhrPost } from '../../services/xhr.js';

+import Headline from '../../components/headline/Headline.jsx';
 import './ListingDetail.less';

 const { Title, Text } = Typography;
@@ -278,7 +279,7 @@ export default function ListingDetail() {
    },
    {
      key: 'Provider',
-      value: listing.provider.charAt(0).toUpperCase() + listing.provider.slice(1),
+      value: listing.provider ? listing.provider.charAt(0).toUpperCase() + listing.provider.slice(1) : 'Unknown',
      Icon: <IconBriefcase />,
    },
    {
@@ -290,40 +291,45 @@ export default function ListingDetail() {

  return (
    <div className="listing-detail">
-      <div className="listing-detail__back">
-        <Button icon={<IconArrowLeft />} onClick={() => navigate(-1)} theme="borderless">
-          Back
-        </Button>
-      </div>
+      <Headline
+        text={listing?.title || 'Listing Detail'}
+        actions={
+          <Button icon={<IconArrowLeft />} onClick={() => navigate(-1)} theme="borderless" style={{ color: '#909090' }}>
+            Back
+          </Button>
+        }
+      />

      <Card className="listing-detail__card">
        <div className="listing-detail__header">
-          <Space vertical align="start" spacing="tight">
-            <Title heading={2} className="listing-detail__title">
-              {listing.title}
-            </Title>
-            <Space align="center">
-              <IconMapPin style={{ fontSize: '18px', color: 'var(--semi-color-primary)' }} />
-              <Text type="secondary">{listing.address || 'No address provided'}</Text>
-            </Space>
+          <Space align="center">
+            <IconMapPin style={{ fontSize: '18px', color: 'var(--semi-color-primary)' }} />
+            {listing.address ? (
+              <a
+                href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(listing.address)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="listing-detail__address-link"
+              >
+                {listing.address}
+              </a>
+            ) : (
+              <Text type="secondary">No address provided</Text>
+            )}
          </Space>
          <Space wrap className="listing-detail__header-actions">
            <Button
-              icon={
-                listing.isWatched === 1 ? (
-                  <IconStar style={{ color: 'var(--semi-color-warning)' }} />
-                ) : (
-                  <IconStarStroked />
-                )
-              }
+              icon={listing.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
              onClick={handleWatch}
-              theme="light"
+              theme="borderless"
+              className={`listing-detail__watch-btn${listing.isWatched === 1 ? ' listing-detail__watch-btn--active' : ''}`}
            >
              {listing.isWatched === 1 ? 'Watched' : 'Watch'}
            </Button>
-            <Text link={{ href: listing.link, target: '_blank' }} icon={<IconLink />} underline>
+            <a href={listing.link} target="_blank" rel="noopener noreferrer" className="listing-detail__open-btn">
+              <IconLink style={{ marginRight: 6 }} />
              Open listing
-            </Text>
+            </a>
          </Space>
        </div>

--- a/ui/src/views/listings/ListingDetail.less
+++ b/ui/src/views/listings/ListingDetail.less
@@ -1,10 +1,8 @@
+@import '../../tokens.less';
+
 .listing-detail {
  padding-bottom: 2rem;

-  &__back {
-    margin-bottom: 1.5rem;
-  }
-
  &__card {
    background-color: rgba(36, 36, 36, 0.9);
    backdrop-filter: blur(8px);
@@ -45,14 +43,6 @@
    }
  }

-  &__title {
-    margin: 0 !important;
-    word-break: break-word;
-    @media (max-width: 768px) {
-      font-size: 1.5rem;
-    }
-  }
-
  &__image-container {
    width: 100%;
    height: 400px;
@@ -69,7 +59,61 @@
    img {
      width: 100%;
      height: 100%;
-      object-fit: contain;
+      object-fit: cover;
+    }
+
+    .semi-image,
+    .semi-image-img {
+      width: 100% !important;
+      height: 100% !important;
+      object-fit: cover !important;
+      display: block !important;
+    }
+  }
+
+  &__address-link {
+    color: @color-muted;
+    text-decoration: none;
+    font-size: @text-base;
+    transition: color @transition-fast;
+    &:hover {
+      color: @color-text;
+      text-decoration: underline;
+    }
+  }
+
+  &__watch-btn {
+    color: @color-muted !important;
+    border: 1px solid @color-border-bright !important;
+    border-radius: @radius-btn !important;
+    &:hover {
+      color: @color-text !important;
+      background: rgba(255,255,255,0.06) !important;
+    }
+    &--active {
+      color: @color-accent !important;
+      border-color: rgba(224,74,56,0.4) !important;
+      background: rgba(224,74,56,0.08) !important;
+    }
+  }
+
+  &__open-btn {
+    display: inline-flex;
+    align-items: center;
+    height: 32px;
+    padding: 0 12px;
+    border: 1px solid @color-border-bright;
+    border-radius: @radius-btn;
+    color: @color-muted;
+    font-size: @text-base;
+    font-family: @font-ui;
+    font-weight: 500;
+    text-decoration: none;
+    transition: color @transition-fast, border-color @transition-fast, background @transition-fast;
+    &:hover {
+      color: @color-text;
+      border-color: rgba(255,255,255,0.25);
+      background: rgba(255,255,255,0.06);
    }
  }

--- a/ui/src/views/listings/Listings.jsx
+++ b/ui/src/views/listings/Listings.jsx
@@ -4,7 +4,13 @@
 */

 import ListingsGrid from '../../components/grid/listings/ListingsGrid.jsx';
+import Headline from '../../components/headline/Headline.jsx';

 export default function Listings() {
-  return <ListingsGrid />;
+  return (
+    <>
+      <Headline text="Listings" />
+      <ListingsGrid />
+    </>
+  );
 }
--- a/ui/src/views/listings/Map.jsx
+++ b/ui/src/views/listings/Map.jsx
@@ -21,6 +21,7 @@ import { xhrDelete } from '../../services/xhr.js';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import ListingDeletionModal from '../../components/ListingDeletionModal.jsx';
 import Map from '../../components/map/Map.jsx';
+import Headline from '../../components/headline/Headline.jsx';

 const RangeSlider = _RangeSlider?.default ?? _RangeSlider;

@@ -354,127 +355,130 @@ export default function MapView() {
  }, [listings, priceRange, homeAddress, distanceFilter]);

  return (
-    <div className="map-view-container">
-      {!homeAddress && (
+    <>
+      <Headline text="Map View" />
+      <div className="map-view-container">
+        {!homeAddress && (
+          <Banner
+            fullMode={true}
+            type="warning"
+            bordered
+            closeIcon={null}
+            style={{ marginBottom: '8px' }}
+            description={
+              <span>
+                No home address set. Configure it in <Link to="/userSettings">user settings</Link> to use the distance
+                filter.
+              </span>
+            }
+          />
+        )}
+
        <Banner
          fullMode={true}
-          type="warning"
+          type="info"
          bordered
          closeIcon={null}
          style={{ marginBottom: '8px' }}
-          description={
-            <span>
-              No home address set. Configure it in <Link to="/userSettings">user settings</Link> to use the distance
-              filter.
-            </span>
-          }
-        />
-      )}
-
-      <Banner
-        fullMode={true}
-        type="info"
-        bordered
-        closeIcon={null}
-        style={{ marginBottom: '8px' }}
-        description="Only listings with valid addresses are shown on this map."
-      />
-
-      <div className="map-view-container__map-wrapper">
-        <Map
-          mapContainerRef={mapContainer}
-          style={style}
-          show3dBuildings={show3dBuildings}
-          onMapReady={handleMapReady}
+          description="Only listings with valid addresses are shown on this map."
        />

-        {/* Floating filter panel */}
-        <div className="map-view-container__floating-panel">
-          <div className="map-view-container__panel-row">
-            <Text size="small" strong style={{ color: '#8892a4' }}>
-              Job
-            </Text>
-            <Select
-              placeholder="All jobs"
-              showClear
-              size="small"
-              onChange={(val) => setJobId(val)}
-              value={jobId}
-              style={{ width: 160 }}
-            >
-              {jobs?.map((j) => (
-                <Select.Option key={j.id} value={j.id}>
-                  {j.name}
-                </Select.Option>
-              ))}
-            </Select>
-          </div>
+        <div className="map-view-container__map-wrapper">
+          <Map
+            mapContainerRef={mapContainer}
+            style={style}
+            show3dBuildings={show3dBuildings}
+            onMapReady={handleMapReady}
+          />

-          <div className="map-view-container__panel-row">
-            <Text size="small" strong style={{ color: '#8892a4' }}>
-              Distance
-            </Text>
-            <Select
-              placeholder="None"
-              size="small"
-              onChange={(val) => setDistanceFilter(val)}
-              value={distanceFilter}
-              style={{ width: 100 }}
-            >
-              <Select.Option value={0}>None</Select.Option>
-              <Select.Option value={5}>5 km</Select.Option>
-              <Select.Option value={10}>10 km</Select.Option>
-              <Select.Option value={15}>15 km</Select.Option>
-              <Select.Option value={20}>20 km</Select.Option>
-              <Select.Option value={25}>25 km</Select.Option>
-            </Select>
-          </div>
+          {/* Floating filter panel */}
+          <div className="map-view-container__floating-panel">
+            <div className="map-view-container__panel-row">
+              <Text size="small" strong style={{ color: '#8892a4' }}>
+                Job
+              </Text>
+              <Select
+                placeholder="All jobs"
+                showClear
+                size="small"
+                onChange={(val) => setJobId(val)}
+                value={jobId}
+                style={{ width: 160 }}
+              >
+                {jobs?.map((j) => (
+                  <Select.Option key={j.id} value={j.id}>
+                    {j.name}
+                  </Select.Option>
+                ))}
+              </Select>
+            </div>

-          <div className="map-view-container__panel-row">
-            <Text size="small" strong style={{ color: '#8892a4' }}>
-              Price (€)
-            </Text>
-            <div className="map-view-container__price-slider">
-              <div className="map__rangesliderLabels">
-                <span>{priceRange[0]}</span>
-                <span>{priceRange[1]}</span>
+            <div className="map-view-container__panel-row">
+              <Text size="small" strong style={{ color: '#8892a4' }}>
+                Distance
+              </Text>
+              <Select
+                placeholder="None"
+                size="small"
+                onChange={(val) => setDistanceFilter(val)}
+                value={distanceFilter}
+                style={{ width: 100 }}
+              >
+                <Select.Option value={0}>None</Select.Option>
+                <Select.Option value={5}>5 km</Select.Option>
+                <Select.Option value={10}>10 km</Select.Option>
+                <Select.Option value={15}>15 km</Select.Option>
+                <Select.Option value={20}>20 km</Select.Option>
+                <Select.Option value={25}>25 km</Select.Option>
+              </Select>
+            </div>
+
+            <div className="map-view-container__panel-row">
+              <Text size="small" strong style={{ color: '#8892a4' }}>
+                Price (€)
+              </Text>
+              <div className="map-view-container__price-slider">
+                <div className="map__rangesliderLabels">
+                  <span>{priceRange[0]}</span>
+                  <span>{priceRange[1]}</span>
+                </div>
+                <RangeSlider min={0} max={getMaxPrice()} step={100} value={priceRange} onInput={handlePriceRange} />
              </div>
-              <RangeSlider min={0} max={getMaxPrice()} step={100} value={priceRange} onInput={handlePriceRange} />
+            </div>
+
+            <div className="map-view-container__panel-row">
+              <Text size="small" strong style={{ color: '#8892a4' }}>
+                Style
+              </Text>
+              <Select size="small" value={style} onChange={(val) => handleMapStyle(val)} style={{ width: 110 }}>
+                <Select.Option value="STANDARD">Standard</Select.Option>
+                <Select.Option value="SATELLITE">Satellite</Select.Option>
+              </Select>
+            </div>
+
+            <div className="map-view-container__panel-row">
+              <Text size="small" strong style={{ color: '#8892a4' }}>
+                3D Buildings
+              </Text>
+              <Switch
+                size="small"
+                checked={show3dBuildings}
+                onChange={(v) => setShow3dBuildings(v)}
+                disabled={style === 'SATELLITE'}
+              />
            </div>
          </div>
-
-          <div className="map-view-container__panel-row">
-            <Text size="small" strong style={{ color: '#8892a4' }}>
-              Style
-            </Text>
-            <Select size="small" value={style} onChange={(val) => handleMapStyle(val)} style={{ width: 110 }}>
-              <Select.Option value="STANDARD">Standard</Select.Option>
-              <Select.Option value="SATELLITE">Satellite</Select.Option>
-            </Select>
-          </div>
-
-          <div className="map-view-container__panel-row">
-            <Text size="small" strong style={{ color: '#8892a4' }}>
-              3D Buildings
-            </Text>
-            <Switch
-              size="small"
-              checked={show3dBuildings}
-              onChange={(v) => setShow3dBuildings(v)}
-              disabled={style === 'SATELLITE'}
-            />
-          </div>
        </div>
-      </div>

-      <ListingDeletionModal
-        visible={deleteModalVisible}
-        onConfirm={confirmListingDeletion}
-        onCancel={() => {
-          setDeleteModalVisible(false);
-          setListingToDelete(null);
-        }}
-      />
-    </div>
+        <ListingDeletionModal
+          visible={deleteModalVisible}
+          onConfirm={confirmListingDeletion}
+          onCancel={() => {
+            setDeleteModalVisible(false);
+            setListingToDelete(null);
+          }}
+        />
+      </div>
+    </>
  );
 }
--- a/ui/src/views/listings/Map.less
+++ b/ui/src/views/listings/Map.less
@@ -3,6 +3,8 @@
 * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
 */

+@import '../../tokens.less';
+
 .map-view-container {
  display: flex;
  flex-direction: column;
@@ -21,11 +23,11 @@
    top: 12px;
    right: 12px;
    z-index: 10;
-    background: rgba(13, 15, 20, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid #262a3a;
-    border-radius: 10px;
+    background: rgba(22, 25, 38, 0.95);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid @color-border;
+    border-radius: @radius-card;
    padding: 14px 16px;
    min-width: 220px;
    display: flex;
@@ -183,13 +185,19 @@
  position: absolute;
  z-index: 3;
  top: 50%;
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
-  background: #0ab5b3;
+  background: @color-accent;
 }

 .range-slider .range-slider__range {
-  background: #0ab5b3;
+  background: @color-accent;
+}
+
+.range-slider {
+  background: rgba(255,255,255,0.12);
+  border-radius: 4px;
+  height: 4px !important;
 }
--- a/ui/src/views/listings/management/WatchlistManagement.jsx
+++ b/ui/src/views/listings/management/WatchlistManagement.jsx
@@ -6,9 +6,8 @@
 import { useState } from 'react';
 import { IconHorn } from '@douyinfe/semi-icons';
 import { SegmentPart } from '../../../components/segment/SegmentPart.jsx';
-import { Banner, Button, Checkbox, Space } from '@douyinfe/semi-ui-19';
+import { Banner, Button, Checkbox, Space, Typography } from '@douyinfe/semi-ui-19';
 import NotificationAdapterMutator from '../../jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx';
-import Headline from '../../../components/headline/Headline.jsx';

 export default function WatchlistManagement() {
  const [notificationChooserVisible, setNotificationChooserVisible] = useState(false);
@@ -31,7 +30,9 @@ export default function WatchlistManagement() {
          description="You’ll receive notifications only for listings that are on your watch list. To add listings to it, open the 'Listings' section and tag the ones you want to follow."
        />
        <Space />
-        <Headline size={5} text="Notify me when:" style={{ marginTop: '1rem' }} />
+        <Typography.Title heading={5} style={{ marginTop: '1rem' }}>
+          Notify me when:
+        </Typography.Title>

        <Checkbox checked={activityChanges} onChange={(e) => setActivityChanges(e.target.checked)}>
          Listing state changes (e.g. listing becomes inactive)
@@ -41,7 +42,9 @@ export default function WatchlistManagement() {
        </Checkbox>

        <Space />
-        <Headline size={5} text="Notify me with:" style={{ marginTop: '1rem' }} />
+        <Typography.Title heading={5} style={{ marginTop: '1rem' }}>
+          Notify me with:
+        </Typography.Title>
        <Button onClick={() => setNotificationChooserVisible(true)}>Select notification method</Button>

        <NotificationAdapterMutator
--- a/ui/src/views/login/login.less
+++ b/ui/src/views/login/login.less
@@ -30,7 +30,7 @@
    border-radius: 24px;
    padding: 3rem;
    width: 90%;
-    max-width: 420px;
+    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
--- a/ui/src/views/user/Users.jsx
+++ b/ui/src/views/user/Users.jsx
@@ -4,16 +4,14 @@
 */

 import React from 'react';
-
-import { Toast } from '@douyinfe/semi-ui-19';
+import { Toast, Button } from '@douyinfe/semi-ui-19';
+import { IconPlus } from '@douyinfe/semi-icons';
 import UserTable from '../../components/table/UserTable';
 import { useActions, useSelector } from '../../services/state/store';
-import { IconPlus } from '@douyinfe/semi-icons';
-import { Button } from '@douyinfe/semi-ui-19';
 import UserRemovalModal from './UserRemovalModal';
 import { xhrDelete } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';
-
+import Headline from '../../components/headline/Headline.jsx';
 import './Users.less';

 const Users = function Users() {
@@ -28,14 +26,13 @@ const Users = function Users() {
      await actions.user.getUsers();
      setLoading(false);
    }
-
    init();
  }, []);

  const onUserRemoval = async () => {
    try {
      await xhrDelete('/api/admin/users', { userId: userIdToBeRemoved });
-      Toast.success('User successfully remove');
+      Toast.success('User successfully removed');
      setUserIdToBeRemoved(null);
      await actions.jobsData.getJobs();
      await actions.user.getUsers();
@@ -46,30 +43,22 @@ const Users = function Users() {
  };

  return (
-    <div>
+    <div className="users">
+      <Headline
+        text="Users"
+        actions={
+          <Button type="primary" theme="solid" icon={<IconPlus />} onClick={() => navigate('/users/new')}>
+            New User
+          </Button>
+        }
+      />
      {!loading && (
        <React.Fragment>
          {userIdToBeRemoved && <UserRemovalModal onCancel={() => setUserIdToBeRemoved(null)} onOk={onUserRemoval} />}
-
-          <Button
-            type="primary"
-            className="users__newButton"
-            icon={<IconPlus />}
-            onClick={() => navigate('/users/new')}
-          >
-            New User
-          </Button>
-
          <UserTable
            user={users}
-            onUserEdit={(userId) => {
-              navigate(`/users/edit/${userId}`);
-            }}
-            onUserRemoval={(userId) => {
-              setUserIdToBeRemoved(userId);
-              //throw warning message that all jobs will be removed associated to this user
-              //check if at least 1 admin is available
-            }}
+            onUserEdit={(userId) => navigate(`/users/edit/${userId}`)}
+            onUserRemoval={(userId) => setUserIdToBeRemoved(userId)}
          />
        </React.Fragment>
      )}
--- a/ui/src/views/user/Users.less
+++ b/ui/src/views/user/Users.less
@@ -1,8 +1,7 @@
+@import '../../tokens.less';
+
 .users {
-  &__newButton {
-    margin-top: 1rem !important;
-    float: left;
-    margin-bottom: 1rem !important;
-    margin-left: 1rem;
-  }
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
--- a/ui/src/views/user/mutation/UserMutator.jsx
+++ b/ui/src/views/user/mutation/UserMutator.jsx
@@ -11,7 +11,8 @@ import { useActions } from '../../../services/state/store';
 import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui-19';
 import './UserMutator.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
-import { IconPlusCircle } from '@douyinfe/semi-icons';
+import { IconPlusCircle, IconArrowLeft } from '@douyinfe/semi-icons';
+import Headline from '../../../components/headline/Headline.jsx';

 const UserMutator = function UserMutator() {
  const params = useParams();
@@ -63,53 +64,70 @@ const UserMutator = function UserMutator() {
  };

  return (
-    <form className="userMutator">
-      <SegmentPart name="Username" helpText="The username used to login to Fredy">
-        <Input
-          type="text"
-          label="Username"
-          maxLength={30}
-          placeholder="Username"
-          autoFocus
-          width={6}
-          value={username}
-          onChange={(val) => setUsername(val)}
-        />
-      </SegmentPart>
-      <Divider margin="1rem" />
-      <SegmentPart name="Password" helpText="The password used to login to Fredy">
-        <Input
-          mode="password"
-          label="Password"
-          placeholder="Password"
-          width={6}
-          value={password}
-          onChange={(val) => setPassword(val)}
-        />
-      </SegmentPart>
-      <Divider margin="1rem" />
-      <SegmentPart name="Retype password" helpText="Retype the password to make sure they match">
-        <Input
-          mode="password"
-          label="Retype password"
-          placeholder="Retype password"
-          width={6}
-          value={password2}
-          onChange={(val) => setPassword2(val)}
-        />
-      </SegmentPart>
-      <Divider margin="1rem" />
-      <SegmentPart name="Is user an admin?" helpText="Check this if the user is an administrator">
-        <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
-      </SegmentPart>
-      <Divider margin="1rem" />
-      <Button type="danger" style={{ marginRight: '1rem' }} onClick={() => navigate('/users')}>
-        Cancel
-      </Button>
-      <Button type="primary" icon={<IconPlusCircle />} onClick={saveUser}>
-        Save
-      </Button>
-    </form>
+    <>
+      <Headline
+        text={params.userId ? 'Edit User' : 'New User'}
+        actions={
+          <Button
+            icon={<IconArrowLeft />}
+            onClick={() => navigate('/users')}
+            theme="borderless"
+            style={{ color: '#909090' }}
+          >
+            Back
+          </Button>
+        }
+      />
+      <form className="userMutator">
+        <SegmentPart name="Username" helpText="The username used to login to Fredy">
+          <Input
+            type="text"
+            label="Username"
+            maxLength={30}
+            placeholder="Username"
+            autoFocus
+            width={6}
+            value={username}
+            onChange={(val) => setUsername(val)}
+          />
+        </SegmentPart>
+        <Divider margin="1rem" />
+        <SegmentPart name="Password" helpText="The password used to login to Fredy">
+          <Input
+            mode="password"
+            label="Password"
+            placeholder="Password"
+            width={6}
+            value={password}
+            onChange={(val) => setPassword(val)}
+          />
+        </SegmentPart>
+        <Divider margin="1rem" />
+        <SegmentPart name="Retype password" helpText="Retype the password to make sure they match">
+          <Input
+            mode="password"
+            label="Retype password"
+            placeholder="Retype password"
+            width={6}
+            value={password2}
+            onChange={(val) => setPassword2(val)}
+          />
+        </SegmentPart>
+        <Divider margin="1rem" />
+        <SegmentPart name="Is user an admin?" helpText="Check this if the user is an administrator">
+          <Switch checked={isAdmin} onChange={(checked) => setIsAdmin(checked)} />
+        </SegmentPart>
+        <Divider margin="1rem" />
+        <div className="userMutator__actions">
+          <Button size="small" theme="borderless" style={{ color: '#909090' }} onClick={() => navigate('/users')}>
+            Cancel
+          </Button>
+          <Button size="small" type="primary" theme="solid" icon={<IconPlusCircle />} onClick={saveUser}>
+            Save
+          </Button>
+        </div>
+      </form>
+    </>
  );
 };

--- a/ui/src/views/user/mutation/UserMutator.less
+++ b/ui/src/views/user/mutation/UserMutator.less
@@ -1,3 +1,13 @@
+@import '../../../tokens.less';
+
 .userMutator {
-  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+
+  &__actions {
+    display: flex;
+    gap: @space-2;
+    margin-top: @space-2;
+    justify-content: flex-start;
+  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@@ -1039,10 +1039,10 @@
    scroll-into-view-if-needed "^2.2.24"
    utility-types "^3.10.0"

-"@emnapi/core@1.9.2":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.9.2.tgz#3870265ecffc7352d01ead62d8d83d8358a2d034"
-  integrity sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==
+"@emnapi/core@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.10.0.tgz#380ccc8f2412ea22d1d972df7f8ee23a3b9c7467"
+  integrity sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==
  dependencies:
    "@emnapi/wasi-threads" "1.2.1"
    tslib "^2.4.0"
@@ -1055,10 +1055,10 @@
    "@emnapi/wasi-threads" "1.2.0"
    tslib "^2.4.0"

-"@emnapi/runtime@1.9.2":
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.9.2.tgz#8b469a3db160817cadb1de9050211a9d1ea84fa2"
-  integrity sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==
+"@emnapi/runtime@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.10.0.tgz#4b260c0d3534204e98c6110b8db1a987d26ec87c"
+  integrity sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==
  dependencies:
    tslib "^2.4.0"

@@ -1262,10 +1262,10 @@
  resolved "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz"
  integrity sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==

-"@mapbox/tiny-sdf@^2.0.7":
-  version "2.0.7"
-  resolved "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.7.tgz"
-  integrity sha512-25gQLQMcpivjOSA40g3gO6qgiFPDpWRoMfd+G/GoppPIeP6JDaMMkMrEJnMZhKyyS6iKwVt5YKu02vCUyJM3Ug==
+"@mapbox/tiny-sdf@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-2.1.0.tgz#62f562340eaa1f1945a2b255e084f9377f9ab9b3"
+  integrity sha512-uFJhNh36BR4OCuWIEiWaEix9CA2WzT6CAIcqVjWYpnx8+QDtS+oC4QehRrx5cX4mgWs37MmKnwUejeHxVymzNg==

 "@mapbox/unitbezier@^0.0.1":
  version "0.0.1"
@@ -1413,10 +1413,10 @@
  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.122.0.tgz#2f4e77a3b183c87b2a326affd703ef71ba836601"
  integrity sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==

-"@oxc-project/types@=0.126.0":
-  version "0.126.0"
-  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.126.0.tgz#9d9fa6fe9af5bc6c45996c6d9b9a3b3a4cd500e5"
-  integrity sha512-oGfVtjAgwQVVpfBrbtk4e1XDyWHRFta6BS3GWVzrF8xYBT2VGQAk39yJS/wFSMrZqoiCU4oghT3Ch0HaHGIHcQ==
+"@oxc-project/types@=0.127.0":
+  version "0.127.0"
+  resolved "https://registry.yarnpkg.com/@oxc-project/types/-/types-0.127.0.tgz#8374fcdfb4a641861218daa5700c447c00b66663"
+  integrity sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==

 "@puppeteer/browsers@2.13.0":
  version "2.13.0"
@@ -1441,120 +1441,120 @@
  resolved "https://registry.yarnpkg.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.12.tgz#4e6af08b89da02596cc5da4b105082b68673ffec"
  integrity sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==

-"@rolldown/binding-android-arm64@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.16.tgz#9af7872d363738e7a2aaa1c1be8cad57adf75798"
-  integrity sha512-rhY3k7Bsae9qQfOtph2Pm2jZEA+s8Gmjoz4hhmx70K9iMQ/ddeae+xhRQcM5IuVx5ry1+bGfkvMn7D6MJggVSA==
+"@rolldown/binding-android-arm64@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.17.tgz#0a502a88c39d0ffa81aa30b561dade6f6217dcc5"
+  integrity sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==

 "@rolldown/binding-darwin-arm64@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.12.tgz#a06890f4c9b48ff0fc97edbedfc762bef7cffd73"
  integrity sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==

-"@rolldown/binding-darwin-arm64@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.16.tgz#88f394f20c664ac2c51fe5d5d364b94bbf8ef430"
-  integrity sha512-rNz0yK078yrNn3DrdgN+PKiMOW8HfQ92jQiXxwX8yW899ayV00MLVdaCNeVBhG/TbH3ouYVObo8/yrkiectkcQ==
+"@rolldown/binding-darwin-arm64@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.17.tgz#8b7f05ac9000ab19161a79a0346b1b64a1bc7ba3"
+  integrity sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==

 "@rolldown/binding-darwin-x64@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.12.tgz#eddf6aa3ed3509171fe21711f1e8ec8e0fd7ec49"
  integrity sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==

-"@rolldown/binding-darwin-x64@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.16.tgz#d5350b1d3d13fddb1bc5abb00cadc07787a5d6fa"
-  integrity sha512-r/OmdR00HmD4i79Z//xO06uEPOq5hRXdhw7nzkxQxwSavs3PSHa1ijntdpOiZ2mzOQ3fVVu8C1M19FoNM+dMUQ==
+"@rolldown/binding-darwin-x64@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.17.tgz#f8b465b3a4e992053890b162f1ae19e4f1719a6a"
+  integrity sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==

 "@rolldown/binding-freebsd-x64@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.12.tgz#2102dfed19fd1f1b53435fcaaf0bc61129a266a3"
  integrity sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==

-"@rolldown/binding-freebsd-x64@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.16.tgz#116fe2b906ef658e913bd1419775114dee97c35f"
-  integrity sha512-KcRE5w8h0OnjUatG8pldyD14/CQ5Phs1oxfR+3pKDjboHRo9+MkqQaiIZlZRpsxC15paeXme/I127tUa9TXJ6g==
+"@rolldown/binding-freebsd-x64@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.17.tgz#a8281e14fa9c243fe22dc2d0e54900e66b31935e"
+  integrity sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==

 "@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.12.tgz#b2c13f40e990fd1e1935492850536c768c961a0f"
  integrity sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==

-"@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.16.tgz#3a72b393936c580b40aa66230cdc30ac20fb0409"
-  integrity sha512-bT0guA1bpxEJ/ZhTRniQf7rNF8ybvXOuWbNIeLABaV5NGjx4EtOWBTSRGWFU9ZWVkPOZ+HNFP8RMcBokBiZ0Kg==
+"@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.17.tgz#cd29cf869ddd4fac8d6929abf94b91ddb0494650"
+  integrity sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==

 "@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.12.tgz#32ca9f77c1e76b2913b3d53d2029dc171c0532d6"
  integrity sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==

-"@rolldown/binding-linux-arm64-gnu@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.16.tgz#3ec9b2dce7b5c29d37272fa3a1aee6159badfb76"
-  integrity sha512-+tHktCHWV8BDQSjemUqm/Jl/TPk3QObCTIjmdDy/nlupcujZghmKK2962LYrqFpWu+ai01AN/REOH3NEpqvYQg==
+"@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.17.tgz#91c331236ec3728366218d61a62f0bd226546c6c"
+  integrity sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==

 "@rolldown/binding-linux-arm64-musl@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.12.tgz#f4337ddd52f0ed3ada2105b59ee1b757a2c4858c"
  integrity sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==

-"@rolldown/binding-linux-arm64-musl@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.16.tgz#4103d75b7e7f2650d32fef0df01ff5441657b6ee"
-  integrity sha512-3fPzdREH806oRLxpTWW1Gt4tQHs0TitZFOECB2xzCFLPKnSOy90gwA7P29cksYilFO6XVRY1kzga0cL2nRjKPg==
+"@rolldown/binding-linux-arm64-musl@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.17.tgz#80108957db752e7826836e22240e56b8140e9684"
+  integrity sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==

 "@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.12.tgz#22fdd14cb00ee8208c28a39bab7f28860ec6705d"
  integrity sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==

-"@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.16.tgz#4bff51a9d0c4c5ec402ac10f41cef22d6a21889c"
-  integrity sha512-EKwI1tSrLs7YVw+JPJT/G2dJQ1jl9qlTTTEG0V2Ok/RdOenRfBw2PQdLPyjhIu58ocdBfP7vIRN/pvMsPxs/AQ==
+"@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.17.tgz#1dce51148cbc6bab3c3f9157b5323d2a31aac924"
+  integrity sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==

 "@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.12.tgz#838215096d1de6d3d509e0410801cb7cda8161ff"
  integrity sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==

-"@rolldown/binding-linux-s390x-gnu@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.16.tgz#7b9399eda0b2e49c7e5d2b98172196565de3709f"
-  integrity sha512-Uknladnb3Sxqu6SEcqBldQyJUpk8NleooZEc0MbRBJ4inEhRYWZX0NJu12vNf2mqAq7gsofAxHrGghiUYjhaLQ==
+"@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.17.tgz#d4a0d2e01d8d441e4ac3af3fa68eec17a7d0e9cd"
+  integrity sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==

 "@rolldown/binding-linux-x64-gnu@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.12.tgz#f7d71d97f6bd43198596b26dc2cb364586e12673"
  integrity sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==

-"@rolldown/binding-linux-x64-gnu@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.16.tgz#82b64f4c9aa018718c27a11fc5f8e9141f1c3276"
-  integrity sha512-FIb8+uG49sZBtLTn+zt1AJ20TqVcqWeSIyoVt0or7uAWesgKaHbiBh6OpA/k9v0LTt+PTrb1Lao133kP4uVxkg==
+"@rolldown/binding-linux-x64-gnu@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.17.tgz#0ac8b3139cefeea798ad147f30ea70572b133af1"
+  integrity sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==

 "@rolldown/binding-linux-x64-musl@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.12.tgz#a2ca737f01b0ad620c4c404ca176ea3e3ad804c3"
  integrity sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==

-"@rolldown/binding-linux-x64-musl@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.16.tgz#710c4bf32715d5564fd7bb39bfbe9195f0e8b9a6"
-  integrity sha512-RuERhF9/EgWxZEXYWCOaViUWHIboceK4/ivdtQ3R0T44NjLkIIlGIAVAuCddFxsZ7vnRHtNQUrt2vR2n2slB2w==
+"@rolldown/binding-linux-x64-musl@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.17.tgz#2af61bee087571728f58f1c47734bbbd41dd7050"
+  integrity sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==

 "@rolldown/binding-openharmony-arm64@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.12.tgz#f66317e29eafcc300bed7af8dddac26ab3b1bf82"
  integrity sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==

-"@rolldown/binding-openharmony-arm64@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.16.tgz#ab5cc4736ff363c4fad67c017edf4634c036e82a"
-  integrity sha512-mXcXnvd9GpazCxeUCCnZ2+YF7nut+ZOEbE4GtaiPtyY6AkhZWbK70y1KK3j+RDhjVq5+U8FySkKRb/+w0EeUwA==
+"@rolldown/binding-openharmony-arm64@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.17.tgz#56c1afbf6c592819abf47b4a983987dc288b30c1"
+  integrity sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==

 "@rolldown/binding-wasm32-wasi@1.0.0-rc.12":
  version "1.0.0-rc.12"
@@ -1563,13 +1563,13 @@
  dependencies:
    "@napi-rs/wasm-runtime" "^1.1.1"

-"@rolldown/binding-wasm32-wasi@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.16.tgz#906dec98ca584cec655a336fca870ac7095fbe93"
-  integrity sha512-3Q2KQxnC8IJOLqXmUMoYwyIPZU9hzRbnHaoV3Euz+VVnjZKcY8ktnNP8T9R4/GGQtb27C/UYKABxesKWb8lsvQ==
+"@rolldown/binding-wasm32-wasi@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.17.tgz#5d112ff4dd0d268a60fb4e0eb3077e3ea2531f0d"
+  integrity sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==
  dependencies:
-    "@emnapi/core" "1.9.2"
-    "@emnapi/runtime" "1.9.2"
+    "@emnapi/core" "1.10.0"
+    "@emnapi/runtime" "1.10.0"
    "@napi-rs/wasm-runtime" "^1.1.4"

 "@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12":
@@ -1577,30 +1577,30 @@
  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.12.tgz#4f3a17e3d68a58309c27c0930b0f7986ccabef47"
  integrity sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==

-"@rolldown/binding-win32-arm64-msvc@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.16.tgz#19dd3cf898727fad4f9209cf2aae829a789a9348"
-  integrity sha512-tj7XRemQcOcFwv7qhpUxMTBbI5mWMlE4c1Omhg5+h8GuLXzyj8HviYgR+bB2DMDgRqUE+jiDleqSCRjx4aYk/Q==
+"@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.17.tgz#5125a85222d64a543201d28e16a395cc45bf4d17"
+  integrity sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==

 "@rolldown/binding-win32-x64-msvc@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.12.tgz#d762765d5660598a96b570b513f535c151272985"
  integrity sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==

-"@rolldown/binding-win32-x64-msvc@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.16.tgz#94f8930ac50d62c5d9a1a14855125aa945a14234"
-  integrity sha512-PH5DRZT+F4f2PTXRXR8uJxnBq2po/xFtddyabTJVJs/ZYVHqXPEgNIr35IHTEa6bpa0Q8Awg+ymkTaGnKITw4g==
+"@rolldown/binding-win32-x64-msvc@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.17.tgz#fc6b78e759a0bb2054b5c0a3489da12b2cae54b4"
+  integrity sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==

 "@rolldown/pluginutils@1.0.0-rc.12":
  version "1.0.0-rc.12"
  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.12.tgz#74163aec62fa51cee18d62709483963dceb3f6dc"
  integrity sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==

-"@rolldown/pluginutils@1.0.0-rc.16":
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.16.tgz#bc27c8f906309b57c6c10eddb21043fd8e86b87e"
-  integrity sha512-45+YtqxLYKDWQouLKCrpIZhke+nXxhsw+qAHVzHDVwttyBlHNBVs2K25rDXrZzhpTp9w1FlAlvweV1H++fdZoA==
+"@rolldown/pluginutils@1.0.0-rc.17":
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.17.tgz#a89b30833fb628bc834fe2e89fea93a2da9fa69a"
+  integrity sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==

 "@rolldown/pluginutils@1.0.0-rc.7":
  version "1.0.0-rc.7"
@@ -2123,63 +2123,63 @@
  dependencies:
    "@rolldown/pluginutils" "1.0.0-rc.7"

-"@vitest/expect@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-4.1.4.tgz#1507e51c53969723c99e8a7f054aa12cfa7c1a4d"
-  integrity sha512-iPBpra+VDuXmBFI3FMKHSFXp3Gx5HfmSCE8X67Dn+bwephCnQCaB7qWK2ldHa+8ncN8hJU8VTMcxjPpyMkUjww==
+"@vitest/expect@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-4.1.5.tgz#5caab19535cfb04fbc37087c5608d46e74dc9292"
+  integrity sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==
  dependencies:
    "@standard-schema/spec" "^1.1.0"
    "@types/chai" "^5.2.2"
-    "@vitest/spy" "4.1.4"
-    "@vitest/utils" "4.1.4"
+    "@vitest/spy" "4.1.5"
+    "@vitest/utils" "4.1.5"
    chai "^6.2.2"
    tinyrainbow "^3.1.0"

-"@vitest/mocker@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-4.1.4.tgz#5d22e99d8dbacf2f77f7a4c30a6e17eece7f25ef"
-  integrity sha512-R9HTZBhW6yCSGbGQnDnH3QHfJxokKN4KB+Yvk9Q1le7eQNYwiCyKxmLmurSpFy6BzJanSLuEUDrD+j97Q+ZLPg==
+"@vitest/mocker@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-4.1.5.tgz#9d5791733e4866cfb8af2d48ca371b127e7d2e93"
+  integrity sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==
  dependencies:
-    "@vitest/spy" "4.1.4"
+    "@vitest/spy" "4.1.5"
    estree-walker "^3.0.3"
    magic-string "^0.30.21"

-"@vitest/pretty-format@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-4.1.4.tgz#0ee79cd2ef8321330dabb8cc57ba9bce237e7183"
-  integrity sha512-ddmDHU0gjEUyEVLxtZa7xamrpIefdEETu3nZjWtHeZX4QxqJ7tRxSteHVXJOcr8jhiLoGAhkK4WJ3WqBpjx42A==
+"@vitest/pretty-format@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-4.1.5.tgz#4c13d77a77e2931e44db95522ed5700bcf0570d4"
+  integrity sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==
  dependencies:
    tinyrainbow "^3.1.0"

-"@vitest/runner@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-4.1.4.tgz#8f884f265efabfdd8a5ee393cfe622a01ec849c2"
-  integrity sha512-xTp7VZ5aXP5ZJrn15UtJUWlx6qXLnGtF6jNxHepdPHpMfz/aVPx+htHtgcAL2mDXJgKhpoo2e9/hVJsIeFbytQ==
+"@vitest/runner@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-4.1.5.tgz#a14dd2d2f48603f906dd52304a10c7fc623bb1de"
+  integrity sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==
  dependencies:
-    "@vitest/utils" "4.1.4"
+    "@vitest/utils" "4.1.5"
    pathe "^2.0.3"

-"@vitest/snapshot@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-4.1.4.tgz#600c04ee1c598d4e6ce219afae684ff21c3e187d"
-  integrity sha512-MCjCFgaS8aZz+m5nTcEcgk/xhWv0rEH4Yl53PPlMXOZ1/Ka2VcZU6CJ+MgYCZbcJvzGhQRjVrGQNZqkGPttIKw==
+"@vitest/snapshot@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-4.1.5.tgz#d07970d1448190ee5a258db6ab79c65b8018c13b"
+  integrity sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==
  dependencies:
-    "@vitest/pretty-format" "4.1.4"
-    "@vitest/utils" "4.1.4"
+    "@vitest/pretty-format" "4.1.5"
+    "@vitest/utils" "4.1.5"
    magic-string "^0.30.21"
    pathe "^2.0.3"

-"@vitest/spy@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-4.1.4.tgz#b955fcef98bcc746e7fc61d17d4725b43b33fa6d"
-  integrity sha512-XxNdAsKW7C+FLydqFJLb5KhJtl3PGCMmYwFRfhvIgxJvLSXhhVI1zM8f1qD3Zg7RCjTSzDVyct6sghs9UEgBEQ==
+"@vitest/spy@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-4.1.5.tgz#fa7858ffab746fa9ac29496e626f5a0caf9a5a7f"
+  integrity sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==

-"@vitest/utils@4.1.4":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-4.1.4.tgz#9518fb0ad0903ae455e82e063fa18e7558aa6065"
-  integrity sha512-13QMT+eysM5uVGa1rG4kegGYNp6cnQcsTc67ELFbhNLQO+vgsygtYJx2khvdt4gVQqSSpC/KT5FZZxUpP3Oatw==
+"@vitest/utils@4.1.5":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-4.1.5.tgz#20d6a6ae651a0dd33f945548921698d49701fa43"
+  integrity sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==
  dependencies:
-    "@vitest/pretty-format" "4.1.4"
+    "@vitest/pretty-format" "4.1.5"
    convert-source-map "^2.0.0"
    tinyrainbow "^3.1.0"

@@ -5015,14 +5015,14 @@ make-dir@^2.1.0:
    pify "^4.0.1"
    semver "^5.6.0"

-maplibre-gl@^5.23.0:
-  version "5.23.0"
-  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-5.23.0.tgz#a72d4cda848d93072b9a2334c0ea3beb11a92ea1"
-  integrity sha512-aou8YBNFS8uVtDWFWt0W/6oorfl18wt+oIA8fnXk1kivjkbtXi9gGrQvflTpwrR3hG13aWdIdbYWeN0NFMV7ag==
+maplibre-gl@^5.24.0:
+  version "5.24.0"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-5.24.0.tgz#a8059371cdbeb04a62850ccc22cb37783928a10d"
+  integrity sha512-ALyFxgtd5R+65UqZ/++lOqwWcC0SNho9c27fYSyLmG7AfnAul2o46F05aDJGPbFU57wos9dgcIySHs0Xe6ia3A==
  dependencies:
    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
    "@mapbox/point-geometry" "^1.1.0"
-    "@mapbox/tiny-sdf" "^2.0.7"
+    "@mapbox/tiny-sdf" "^2.1.0"
    "@mapbox/unitbezier" "^0.0.1"
    "@mapbox/vector-tile" "^2.0.4"
    "@mapbox/whoots-js" "^3.1.0"
@@ -5835,10 +5835,10 @@ node-releases@^2.0.27:
  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz"
  integrity sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==

-nodemailer@^8.0.5:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-8.0.5.tgz#2076fb2b5c1ccfe1c88f6e1aa47c0229ea642e0c"
-  integrity sha512-0PF8Yb1yZuQfQbq+5/pZJrtF6WQcjTd5/S4JOHs9PGFxuTqoB/icwuB44pOdURHJbRKX1PPoJZtY7R4VUoCC8w==
+nodemailer@^8.0.6:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-8.0.7.tgz#538729a79444e538331bca8a6fc3e5c034eaebc6"
+  integrity sha512-pkjE4mkBzQjdJT4/UmlKl3pX0rC9fZmjh7c6C9o7lv66Ac6w9WCnzPzhbPNxwZAzlF4mdq4CSWB5+FbK6FWCow==

 nodemon@^3.1.14:
  version "3.1.14"
@@ -6636,17 +6636,17 @@ react-resizable@^3.0.5:
    prop-types "15.x"
    react-draggable "^4.0.3"

-react-router-dom@7.14.1:
-  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.14.1.tgz#1ead5007f8948b6eae6df84e95cc109911ad5d7c"
-  integrity sha512-ZkrQuwwhGibjQLqH1eCdyiZyLWglPxzxdl5tgwgKEyCSGC76vmAjleGocRe3J/MLfzMUIKwaFJWpFVJhK3d2xA==
+react-router-dom@7.14.2:
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.14.2.tgz#0b043c1534fe58596771b82a318a7e4c2e5f1279"
+  integrity sha512-YZcM5ES8jJSM+KrJ9BdvHHqlnGTg5tH3sC5ChFRj4inosKctdyzBDhOyyHdGk597q2OT6NTrCA1OvB/YDwfekQ==
  dependencies:
-    react-router "7.14.1"
+    react-router "7.14.2"

-react-router@7.14.1:
-  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.14.1.tgz#adf60e587ad7fb25bd8f33c443fb0e86cd4f051e"
-  integrity sha512-5BCvFskyAAVumqhEKh/iPhLOIkfxcEUz8WqFIARCkMg8hZZzDYX9CtwxXA0e+qT8zAxmMC0x3Ckb9iMONwc5jg==
+react-router@7.14.2:
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.14.2.tgz#d86e5b01049365b2c982363ebd2baa4928824603"
+  integrity sha512-yCqNne6I8IB6rVCH7XUvlBK7/QKyqypBFGv+8dj4QBFJiiRX+FG7/nkdAvGElyvVZ/HQP5N19wzteuTARXi5Gw==
  dependencies:
    cookie "^1.0.1"
    set-cookie-parser "^2.6.0"
@@ -6957,29 +6957,29 @@ rolldown@1.0.0-rc.12:
    "@rolldown/binding-win32-arm64-msvc" "1.0.0-rc.12"
    "@rolldown/binding-win32-x64-msvc" "1.0.0-rc.12"

-rolldown@1.0.0-rc.16:
-  version "1.0.0-rc.16"
-  resolved "https://registry.yarnpkg.com/rolldown/-/rolldown-1.0.0-rc.16.tgz#47c1e6b088be3f531a9aacbdb8a90e2255f02702"
-  integrity sha512-rzi5WqKzEZw3SooTt7cgm4eqIoujPIyGcJNGFL7iPEuajQw7vxMHUkXylu4/vhCkJGXsgRmxqMKXUpT6FEgl0g==
+rolldown@1.0.0-rc.17:
+  version "1.0.0-rc.17"
+  resolved "https://registry.yarnpkg.com/rolldown/-/rolldown-1.0.0-rc.17.tgz#c524fc22f6bb37b5588aec862ab1ee11382610f3"
+  integrity sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==
  dependencies:
-    "@oxc-project/types" "=0.126.0"
-    "@rolldown/pluginutils" "1.0.0-rc.16"
+    "@oxc-project/types" "=0.127.0"
+    "@rolldown/pluginutils" "1.0.0-rc.17"
  optionalDependencies:
-    "@rolldown/binding-android-arm64" "1.0.0-rc.16"
-    "@rolldown/binding-darwin-arm64" "1.0.0-rc.16"
-    "@rolldown/binding-darwin-x64" "1.0.0-rc.16"
-    "@rolldown/binding-freebsd-x64" "1.0.0-rc.16"
-    "@rolldown/binding-linux-arm-gnueabihf" "1.0.0-rc.16"
-    "@rolldown/binding-linux-arm64-gnu" "1.0.0-rc.16"
-    "@rolldown/binding-linux-arm64-musl" "1.0.0-rc.16"
-    "@rolldown/binding-linux-ppc64-gnu" "1.0.0-rc.16"
-    "@rolldown/binding-linux-s390x-gnu" "1.0.0-rc.16"
-    "@rolldown/binding-linux-x64-gnu" "1.0.0-rc.16"
-    "@rolldown/binding-linux-x64-musl" "1.0.0-rc.16"
-    "@rolldown/binding-openharmony-arm64" "1.0.0-rc.16"
-    "@rolldown/binding-wasm32-wasi" "1.0.0-rc.16"
-    "@rolldown/binding-win32-arm64-msvc" "1.0.0-rc.16"
-    "@rolldown/binding-win32-x64-msvc" "1.0.0-rc.16"
+    "@rolldown/binding-android-arm64" "1.0.0-rc.17"
+    "@rolldown/binding-darwin-arm64" "1.0.0-rc.17"
+    "@rolldown/binding-darwin-x64" "1.0.0-rc.17"
+    "@rolldown/binding-freebsd-x64" "1.0.0-rc.17"
+    "@rolldown/binding-linux-arm-gnueabihf" "1.0.0-rc.17"
+    "@rolldown/binding-linux-arm64-gnu" "1.0.0-rc.17"
+    "@rolldown/binding-linux-arm64-musl" "1.0.0-rc.17"
+    "@rolldown/binding-linux-ppc64-gnu" "1.0.0-rc.17"
+    "@rolldown/binding-linux-s390x-gnu" "1.0.0-rc.17"
+    "@rolldown/binding-linux-x64-gnu" "1.0.0-rc.17"
+    "@rolldown/binding-linux-x64-musl" "1.0.0-rc.17"
+    "@rolldown/binding-openharmony-arm64" "1.0.0-rc.17"
+    "@rolldown/binding-wasm32-wasi" "1.0.0-rc.17"
+    "@rolldown/binding-win32-arm64-msvc" "1.0.0-rc.17"
+    "@rolldown/binding-win32-x64-msvc" "1.0.0-rc.17"

 rope-sequence@^1.3.0:
  version "1.3.4"
@@ -7929,15 +7929,15 @@ vfile@^6.0.0:
    "@types/unist" "^3.0.0"
    vfile-message "^4.0.0"

-vite@8.0.9:
-  version "8.0.9"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-8.0.9.tgz#69602329ebcea1f281124735a1113be51c45d1da"
-  integrity sha512-t7g7GVRpMXjNpa67HaVWI/8BWtdVIQPCL2WoozXXA7LBGEFK4AkkKkHx2hAQf5x1GZSlcmEDPkVLSGahxnEEZw==
+vite@8.0.10:
+  version "8.0.10"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-8.0.10.tgz#fb31868526ec874101fac084172a2cdc6776319b"
+  integrity sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==
  dependencies:
    lightningcss "^1.32.0"
    picomatch "^4.0.4"
    postcss "^8.5.10"
-    rolldown "1.0.0-rc.16"
+    rolldown "1.0.0-rc.17"
    tinyglobby "^0.2.16"
  optionalDependencies:
    fsevents "~2.3.3"
@@ -7955,18 +7955,18 @@ vite@8.0.9:
  optionalDependencies:
    fsevents "~2.3.3"

-vitest@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-4.1.4.tgz#330a3798ce307f88d3eea373e61a5f14da8f3bb1"
-  integrity sha512-tFuJqTxKb8AvfyqMfnavXdzfy3h3sWZRWwfluGbkeR7n0HUev+FmNgZ8SDrRBTVrVCjgH5cA21qGbCffMNtWvg==
+vitest@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-4.1.5.tgz#cda189c0cd9dd1c920be477c0f371b64ec14782a"
+  integrity sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==
  dependencies:
-    "@vitest/expect" "4.1.4"
-    "@vitest/mocker" "4.1.4"
-    "@vitest/pretty-format" "4.1.4"
-    "@vitest/runner" "4.1.4"
-    "@vitest/snapshot" "4.1.4"
-    "@vitest/spy" "4.1.4"
-    "@vitest/utils" "4.1.4"
+    "@vitest/expect" "4.1.5"
+    "@vitest/mocker" "4.1.5"
+    "@vitest/pretty-format" "4.1.5"
+    "@vitest/runner" "4.1.5"
+    "@vitest/snapshot" "4.1.5"
+    "@vitest/spy" "4.1.5"
+    "@vitest/utils" "4.1.5"
    es-module-lexer "^2.0.0"
    expect-type "^1.3.0"
    magic-string "^0.30.21"
Author	SHA1	Message	Date
orangecoding	fef6d06a9d	next release version	2026-04-27 16:04:05 +02:00
orangecoding	951b69a67f	downgrading restana	2026-04-27 16:03:45 +02:00
orangecoding	8a7b14c079	fixing toasts not showing on certain pages / adding statement about ai 🤖	2026-04-27 15:58:41 +02:00
Christian Kellner	f30ec4645c	feat: Fredy UI redesign * New design :)	2026-04-22 21:11:18 +02:00