diff --git a/.github/workflows/locale-pull-request.yml b/.github/workflows/locale-pull-request.yml
index 5c1692c6c..0d8681efe 100644
--- a/.github/workflows/locale-pull-request.yml
+++ b/.github/workflows/locale-pull-request.yml
@@ -12,23 +12,6 @@ jobs:
       pull-requests: write
 
     steps:
-      - name: Enforce base branch
-        uses: actions/github-script@v7
-        with:
-          script: |
-            // Get the pull request
-            const pull_request = await github.rest.pulls.get({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: context.payload.pull_request.number
-            });
-
-            // Check if the base branch is 'main' or 'master'
-            if (pull_request.data.base.ref === 'main' || pull_request.data.base.ref === 'master') {
-              console.error('Pull request is targeting the main branch. Please target the develop branch instead.');
-              process.exit(1);
-            }
-        
       - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100644
index 000000000..03ff59a94
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+set -euo pipefail
+exec bun run "$(dirname "$0")/pre-push.ts" "$@"
diff --git a/.husky/pre-push.ts b/.husky/pre-push.ts
new file mode 100644
index 000000000..385beac09
--- /dev/null
+++ b/.husky/pre-push.ts
@@ -0,0 +1,51 @@
+#!/usr/bin/env bun
+import { readFileSync } from 'node:fs';
+
+//MARK: Configs
+const protectedBranchPrefixRegex = /^(experiments?|mock(up)?s?|private)\//;
+const allowedRemoteName = 'git.fivem.net';
+
+//MARK: Parsing push data
+const remoteName = process.argv[2] ?? '';
+const remoteUrl = process.argv[3] ?? '';
+
+//No restrictions on the allowed remote
+if (remoteName === allowedRemoteName) {
+    process.exit(0);
+}
+
+// Read refs being pushed from stdin.
+const stdin = readFileSync(0, 'utf8');
+const lines = stdin.split('\n').map((l) => l.trim()).filter(Boolean);
+
+const blocked: string[] = [];
+for (const line of lines) {
+    //Parse line
+    const parts = line.split(/\s+/);
+    if (parts.length < 4) continue;
+    const [localRef, localSha, remoteRef, remoteSha] = parts;
+
+    // Check branches
+    if (!localRef.startsWith('refs/heads/')) continue;
+    const branch = localRef.slice('refs/heads/'.length);
+    if (protectedBranchPrefixRegex.test(branch)) {
+        blocked.push(branch);
+    }
+}
+
+//MARK: Output
+if (!blocked.length) {
+    process.exit(0);
+}
+
+//Oh noooo :(
+const msg = [
+    `❌ Push blocked: these branches may only be pushed to ${allowedRemoteName}.`,
+    `Remote: ${remoteName} (${remoteUrl})`,
+    `Blocked branches:`,
+    ...blocked.map((b) => `  - ${b}`),
+    ``,
+    `Fix: push to ${allowedRemoteName}.`
+].join('\n');
+process.stderr.write(msg);
+process.exit(1);
diff --git a/LICENSE b/LICENSE
index 8e98ecd5f..ac24dd71c 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2025 André Tabarra <maintainer@txadmin.gg>
+Copyright (c) 2019-2025 Take-Two Interactive Software, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
index 1c4a4b922..8c8aebd1c 100644
--- a/commitlint.config.cjs
+++ b/commitlint.config.cjs
@@ -21,5 +21,6 @@ module.exports = {
     extends: ['@commitlint/config-conventional'],
     rules: {
         'type-enum': [2, 'always', types],
+        // 'body-max-line-length': [0, 'always', 100],
     },
 };
diff --git a/core/boot/startReadyWatcher.ts b/core/boot/startReadyWatcher.ts
index ad93f0bc1..3974e29db 100644
--- a/core/boot/startReadyWatcher.ts
+++ b/core/boot/startReadyWatcher.ts
@@ -13,7 +13,7 @@ import { chalkInversePad } from '@lib/misc';
 const console = consoleFactory();
 
 
-const getPublicIp = async () => {
+export const getPublicIp = async () => {
     const zIpValidator = z.string().ip();
     const reqOptions = {
         timeout: { request: 2000 },
@@ -41,16 +41,13 @@ const getPublicIp = async () => {
 const getOSMessage = async () => {
     const serverMessage = [
         `To be able to access txAdmin from the internet open port ${txHostConfig.txaPort}`,
-        'on your OS Firewall as well as in the hosting company.',
+        'on your OS Firewall as well as in the hosting provider.',
     ];
     const winWorkstationMessage = [
         '[!] Home-hosting fxserver is not recommended [!]',
         'You need to open the fxserver port (usually 30120) on Windows Firewall',
         'and set up port forwarding on your router so other players can access it.',
     ];
-    if (txEnv.displayAds) {
-        winWorkstationMessage.push('We recommend renting a server from ' + chalk.inverse(' https://zap-hosting.com/txAdmin ') + '.');
-    }
 
     //FIXME: use si.osInfo() instead
     const distro = await getOsDistro();
diff --git a/core/globalData.ts b/core/globalData.ts
index e4ae07798..3da050c0d 100644
--- a/core/globalData.ts
+++ b/core/globalData.ts
@@ -14,8 +14,8 @@ import { getHostVars, hostEnvVarSchemas } from './boot/getHostVars';
 import { getZapVars } from './boot/getZapVars';
 import { z, ZodSchema } from 'zod';
 import { fromZodError } from 'zod-validation-error';
-import defaultAds from '../dynamicAds2.json';
 import consts from '@shared/consts';
+import chalk from 'chalk';
 const console = consoleFactory();
 
 
@@ -209,15 +209,18 @@ if (dataPathVar) {
 //NOTE: Non-ASCII in one of those paths (don't know which) will make NodeJS crash due to a bug in v8 (or something)
 //      when running localization methods like Date.toLocaleString().
 //      There was also an issue with the slash() lib and with the +exec on FXServer
-const nonASCIIRegex = /[^\x00-\x80]+/;
+const nonASCIIRegex = /[^\x00-\x80]+/g;
+const colorNonAscii = (x: string) => chalk.black.bgGreenBright(
+    x.replaceAll(nonASCIIRegex, (m) => chalk.bgRedBright(m))
+);
 if (nonASCIIRegex.test(fxsPath) || nonASCIIRegex.test(dataPath)) {
     fatalError.GlobalData(7, [
         'Due to environmental restrictions, your paths CANNOT contain non-ASCII characters.',
         'Example of non-ASCII characters: çâýå, ρέθ, ñäé, ēļæ, глж, เซิร์, 警告.',
         'Please make sure FXServer is not in a path contaning those characters.',
         `If on windows, we suggest you moving the artifact to "C:/fivemserver/${fxsVersion}/".`,
-        ['FXServer path', fxsPath],
-        ['txData path', dataPath],
+        'FXServer path: ' + colorNonAscii(fxsPath),
+        'txData path: ' + colorNonAscii(dataPath),
     ]);
 }
 
@@ -471,36 +474,33 @@ if (ignoreDeprecatedConfigs) {
 
 const isPterodactyl = !isWindows && process.env?.TXADMIN_ENABLE === '1';
 const isZapHosting = providerName === 'ZAP-Hosting';
+const setConsoleTitle = !(isPterodactyl || isZapHosting || providerName); //assume not a terminal
 
-//Quick config to disable ads
-const displayAds = process.env?.TXHOST_TMP_HIDE_ADS !== 'true' || isPterodactyl || isZapHosting;
-const adSchema = z.object({
-    img: z.string(),
-    url: z.string(),
-}).nullable();
-const adsDataSchema = z.object({
-    login: adSchema,
-    main: adSchema,
-});
-let adsData: z.infer<typeof adsDataSchema> = {
-    login: null,
-    main: null,
-};
-if (displayAds) {
-    try {
-        adsData = adsDataSchema.parse(defaultAds);
-    } catch (error) {
-        console.error('Failed to load ads data.', error);
-    }
-}
 
 //FXServer Display Version
 let fxsVersionTag = fxsVersion.toString();
 if (fxsVerParsed.branch && fxsVerParsed.branch !== 'master') {
     fxsVersionTag += '-ft';
 }
-if (isZapHosting) {
-    fxsVersionTag += '/ZAP';
+
+let providerTag = '';
+const partnerPrefixes = {
+    'gportal': 'GPor',
+    'nitrado': 'Nitr',
+    'nodecraft': 'NoCr',
+    'shockbyte': 'ShBy',
+    'xrealm': 'XRea',
+    'zaphosting': 'ZapH',
+} as { [key: string]: string };
+if (providerName) {
+    const cleanName = providerName.toLowerCase().replace(/[^a-z0-9]+/g, '');
+    if (cleanName in partnerPrefixes) {
+        providerTag = partnerPrefixes[cleanName];
+    }
+}
+
+if (providerTag) {
+    fxsVersionTag += `/${providerTag}`;
 } else if (isPterodactyl) {
     fxsVersionTag += '/Ptero';
 } else if (isWindows && fxsVerParsed.platform === 'windows') {
@@ -520,10 +520,11 @@ export const txDevEnv = Object.freeze(_txDevEnv);
 export const txEnv = Object.freeze({
     //Calculated
     isWindows,
-    isPterodactyl, //TODO: remove, used only in HB Data
-    isZapHosting, //TODO: remove, used only in HB Data and authLogic to disable src check
-    displayAds,
-    adsData,
+    setConsoleTitle,
+
+    //TODO: remove, used only in diagnostics (HB Data + page)
+    isPterodactyl,
+    isZapHosting, //NOTE: This one is also used in authLogic to disable src check
 
     //Natives
     fxsVersionTag,
diff --git a/core/index.ts b/core/index.ts
index 21589e73a..d0ac41208 100644
--- a/core/index.ts
+++ b/core/index.ts
@@ -1,6 +1,6 @@
 //NOTE: must be imported first to setup the environment
 import { txEnv, txHostConfig } from './globalData';
-import consoleFactory, { setTTYTitle } from '@lib/console';
+import consoleFactory from '@lib/console';
 
 //Can be imported after
 import fs from 'node:fs';
@@ -16,7 +16,6 @@ const console = consoleFactory();
 try {
     process.title = 'txAdmin'; //doesn't work for now
     setupProcessHandlers();
-    setTTYTitle();
     checkPreRelease();
 } catch (error) {
     fatalError.Boot(0, 'Failed early process setup.', error);
diff --git a/core/lib/diagnostics.ts b/core/lib/diagnostics.ts
index e7b9a1b4a..6948f0e86 100644
--- a/core/lib/diagnostics.ts
+++ b/core/lib/diagnostics.ts
@@ -1,17 +1,15 @@
 const modulename = 'WebServer:DiagnosticsFuncs';
 import os from 'node:os';
-import humanizeDuration, { HumanizerOptions } from 'humanize-duration';
-import got from '@lib/got';
 import getOsDistro from '@lib/host/getOsDistro.js';
 import getHostUsage from '@lib/host/getHostUsage';
 import pidUsageTree from '@lib/host/pidUsageTree.js';
 import { txEnv, txHostConfig } from '@core/globalData';
 import si from 'systeminformation';
 import consoleFactory from '@lib/console';
-import { parseFxserverVersion } from '@lib/fxserver/fxsVersionParser';
 import { getHeapStatistics } from 'node:v8';
 import bytes from 'bytes';
-import { msToDuration } from './misc';
+import { msToShortishDuration } from './misc';
+import type { ProcessInfo } from '@shared/diagnosticsTypes';
 const console = consoleFactory(modulename);
 
 
@@ -28,7 +26,6 @@ type HostStaticDataType = {
         speedMax: number;
         physicalCores: number;
         cores: number;
-        clockWarning: string;
     },
 };
 type HostDynamicDataType = {
@@ -51,50 +48,33 @@ let _hostStaticDataCache: HostStaticDataType;
  * FIXME: migrate to use gwmi on windows by default
  */
 export const getProcessesData = async () => {
-    type ProcDataType = {
-        pid: number;
-        ppid: number | string;
-        name: string;
-        cpu: number;
-        memory: number;
-        order: number;
-    }
-    const procList: ProcDataType[] = [];
+    const procList: ProcessInfo[] = [];
     try {
         const txProcessId = process.pid;
         const processes = await pidUsageTree(txProcessId);
 
-        //NOTE: Cleaning invalid proccesses that might show up in Linux
-        Object.keys(processes).forEach((pid) => {
-            if (processes[pid] === null) delete processes[pid];
-        });
-
-        //Foreach PID
-        Object.keys(processes).forEach((pid) => {
-            const curr = processes[pid];
+        for (const [pid, proc] of Object.entries(processes)) {
+            //NOTE: Cleaning invalid proccesses that might show up in Linux
+            if (!pid || !proc) continue;
             const currPidInt = parseInt(pid);
 
-            //Define name and order
             let procName;
-            let order = curr.timestamp || 1;
             if (currPidInt === txProcessId) {
-                procName = 'txAdmin (inside FXserver)';
-                order = 0; //forcing order because all process can start at the same second
-            } else if (curr.memory <= 10 * MEGABYTE) {
-                procName = 'FXServer MiniDump';
+                procName = 'txAdmin';
+            } else if (proc.memory <= 10 * MEGABYTE) {
+                procName = 'MiniDump';
             } else {
                 procName = 'FXServer';
             }
 
             procList.push({
                 pid: currPidInt,
-                ppid: (curr.ppid === txProcessId) ? `${txProcessId} (txAdmin)` : curr.ppid,
+                parent: proc.ppid,
                 name: procName,
-                cpu: curr.cpu,
-                memory: curr.memory / MEGABYTE,
-                order: order,
+                cpu: proc.cpu,
+                memory: proc.memory / MEGABYTE,
             });
-        });
+        }
     } catch (error) {
         if ((error as any).code = 'ENOENT') {
             console.error('Failed to get processes tree usage data.');
@@ -111,67 +91,10 @@ export const getProcessesData = async () => {
         }
     }
 
-    //Sort procList array
-    procList.sort((a, b) => a.order - b.order);
-
     return procList;
 }
 
 
-/**
- * Gets the FXServer Data.
- */
-export const getFXServerData = async () => {
-    //Check runner child state
-    const childState = txCore.fxRunner.child;
-    if (!childState?.isAlive) {
-        return { error: 'Server Offline' };
-    }
-    if (!childState?.netEndpoint) {
-        return { error: 'Server is has no network endpoint' };
-    }
-
-    //Preparing request
-    const requestOptions = {
-        url: `http://${childState.netEndpoint}/info.json`,
-        maxRedirects: 0,
-        timeout: { request: 1500 },
-        retry: { limit: 0 },
-    };
-
-    //Making HTTP Request
-    let infoData: Record<string, any>;
-    try {
-        infoData = await got.get(requestOptions).json();
-    } catch (error) {
-        console.warn('Failed to get FXServer information.');
-        console.verbose.dir(error);
-        return { error: 'Failed to retrieve FXServer data. <br>The server must be online for this operation. <br>Check the terminal for more information (if verbosity is enabled)' };
-    }
-
-    //Processing result
-    try {
-        const ver = parseFxserverVersion(infoData.server);
-        return {
-            error: false,
-            statusColor: 'success',
-            status: ' ONLINE ',
-            version: ver.valid ? `${ver.platform}:${ver.branch}:${ver.build}` : `${ver.platform ?? 'unknown'}:INVALID`,
-            versionMismatch: (ver.build !== txEnv.fxsVersion),
-            resources: infoData.resources.length,
-            onesync: (infoData.vars && infoData.vars.onesync_enabled === 'true') ? 'enabled' : 'disabled',
-            maxClients: (infoData.vars && infoData.vars.sv_maxClients) ? infoData.vars.sv_maxClients : '--',
-            txAdminVersion: (infoData.vars && infoData.vars['txAdmin-version']) ? infoData.vars['txAdmin-version'] : '--',
-        };
-    } catch (error) {
-        console.warn('Failed to process FXServer information.');
-        console.verbose.dir(error);
-        return { error: 'Failed to process FXServer data. <br>Check the terminal for more information (if verbosity is enabled)' };
-    }
-}
-
-
-
 /**
  * Gets the Host Data.
  */
@@ -187,18 +110,6 @@ export const getHostData = async (): Promise<HostDataReturnType> => {
 
         try {
             const cpuStats = await si.cpu();
-            const cpuSpeed = cpuStats.speedMin ?? cpuStats.speed;
-
-            //TODO: move this to frontend
-            let clockWarning = '';
-            if (cpuStats.cores < 8) {
-                if (cpuSpeed <= 2.4) {
-                    clockWarning = '<span class="badge badge-danger"> VERY SLOW! </span>';
-                } else if (cpuSpeed < 3.0) {
-                    clockWarning = '<span class="badge badge-warning"> SLOW </span>';
-                }
-            }
-
             _hostStaticDataCache = {
                 nodeVersion: process.version,
                 username: osUsername,
@@ -206,17 +117,16 @@ export const getHostData = async (): Promise<HostDataReturnType> => {
                 cpu: {
                     manufacturer: cpuStats.manufacturer,
                     brand: cpuStats.brand,
-                    speedMin: cpuSpeed,
+                    speedMin: cpuStats.speedMin ?? cpuStats.speed,
                     speedMax: cpuStats.speedMax,
                     physicalCores: cpuStats.physicalCores,
                     cores: cpuStats.cores,
-                    clockWarning,
                 }
             }
         } catch (error) {
             console.error('Error getting Host static data.');
             console.verbose.dir(error);
-            return { error: 'Failed to retrieve host static data. <br>Check the terminal for more information (if verbosity is enabled)' };
+            return { error: 'Failed to retrieve host static data. Check the terminal for more information (if verbosity is enabled).' };
         }
     }
 
@@ -246,7 +156,7 @@ export const getHostData = async (): Promise<HostDataReturnType> => {
     } catch (error) {
         console.error('Error getting Host dynamic data.');
         console.verbose.dir(error);
-        return { error: 'Failed to retrieve host dynamic data. <br>Check the terminal for more information (if verbosity is enabled)' };
+        return { error: 'Failed to retrieve host dynamic data. Check the terminal for more information (if verbosity is enabled).' };
     }
 }
 
@@ -265,7 +175,7 @@ export const getHostStaticData = (): HostStaticDataType => {
 /**
  * Gets txAdmin Data
  */
-export const getTxAdminData = async () => {
+export const getRuntimeData = async () => {
     const stats = txCore.metrics.txRuntime; //shortcut
     const memoryUsage = getHeapStatistics();
 
@@ -276,10 +186,19 @@ export const getTxAdminData = async () => {
         hostApiTokenState = 'configured';
     }
 
+    let runtime = 'Unknown runtime';
+    if ('Bun' in globalThis) {
+        //@ts-ignore bun types not installed, just futureproofing
+        runtime = `Bun v${Bun.version}`;
+    } else if ('node' in process.versions && process.versions.node) {
+        runtime = `Node.js v${process.versions.node}`;
+    }
+
     const defaultFlags = Object.entries(txHostConfig.defaults).filter(([k, v]) => Boolean(v)).map(([k, v]) => k);
     return {
-        //Stats
-        uptime: msToDuration(process.uptime() * 1000),
+        txEnv,
+        runtime,
+        uptime: msToShortishDuration(process.uptime() * 1000),
         databaseFileSize: bytes(txCore.database.fileSize),
         txHostConfig: {
             ...txHostConfig,
@@ -287,45 +206,32 @@ export const getTxAdminData = async () => {
             hostApiToken: hostApiTokenState,
             defaults: defaultFlags,
         },
-        txEnv: {
-            ...txEnv,
-            adsData: undefined,
-        },
         monitor: {
-            hbFails: {
-                http: stats.monitorStats.healthIssues.http,
-                fd3: stats.monitorStats.healthIssues.fd3,
-            },
-            restarts: {
-                bootTimeout: stats.monitorStats.restartReasons.bootTimeout,
-                close: stats.monitorStats.restartReasons.close,
-                heartBeat: stats.monitorStats.restartReasons.heartBeat,
-                healthCheck: stats.monitorStats.restartReasons.healthCheck,
-                both: stats.monitorStats.restartReasons.both,
-            }
+            hbFails: stats.monitorStats.healthIssues,
+            restarts: stats.monitorStats.restartReasons,
         },
         performance: {
-            banCheck: stats.banCheckTime.resultSummary('ms').summary,
-            whitelistCheck: stats.whitelistCheckTime.resultSummary('ms').summary,
-            playersTableSearch: stats.playersTableSearchTime.resultSummary('ms').summary,
-            historyTableSearch: stats.historyTableSearchTime.resultSummary('ms').summary,
-            databaseSave: stats.databaseSaveTime.resultSummary('ms').summary,
-            perfCollection: stats.perfCollectionTime.resultSummary('ms').summary,
+            banCheck: stats.banCheckTime,
+            whitelistCheck: stats.whitelistCheckTime,
+            playersTableSearch: stats.playersTableSearchTime,
+            historyTableSearch: stats.historyTableSearchTime,
+            databaseSave: stats.databaseSaveTime,
+            perfCollection: stats.perfCollectionTime,
         },
         logger: {
-            storageSize: (await txCore.logger.getStorageSize()).total,
+            storageSize: await txCore.logger.getStorageSize(),
             statusAdmin: txCore.logger.admin.getUsageStats(),
             statusFXServer: txCore.logger.fxserver.getUsageStats(),
             statusServer: txCore.logger.server.getUsageStats(),
         },
         memoryUsage: {
-            heap_used: bytes(memoryUsage.used_heap_size),
-            heap_limit: bytes(memoryUsage.heap_size_limit),
+            heap_used: bytes(memoryUsage.used_heap_size) ?? '--',
+            heap_limit: bytes(memoryUsage.heap_size_limit) ?? '--',
             heap_pct: (memoryUsage.heap_size_limit > 0)
                 ? (memoryUsage.used_heap_size / memoryUsage.heap_size_limit * 100).toFixed(2)
                 : 0,
-            physical: bytes(memoryUsage.total_physical_size),
-            peak_malloced: bytes(memoryUsage.peak_malloced_memory),
+            physical: bytes(memoryUsage.total_physical_size) ?? '--',
+            peak_malloced: bytes(memoryUsage.peak_malloced_memory) ?? '--',
         },
     };
 }
diff --git a/core/lib/fxserver/fxsConfigHelper.ts b/core/lib/fxserver/fxsConfigHelper.ts
index fee029d3b..60ab5cea7 100644
--- a/core/lib/fxserver/fxsConfigHelper.ts
+++ b/core/lib/fxserver/fxsConfigHelper.ts
@@ -441,7 +441,7 @@ const validateCommands = async (parsedCommands: (ExecRecursionError | Command)[]
             }
         }
 
-        //Comment out any onesync sets
+        //Comment-out any onesync sets
         if (cmd.isConvarSetterFor('onesync')) {
             toCommentOut.add(
                 cmd.file,
@@ -451,7 +451,15 @@ const validateCommands = async (parsedCommands: (ExecRecursionError | Command)[]
             continue;
         }
 
-        //FIXME: add isConvarSetterFor for all "Settings page only" convars
+        //Comment-out the allowlist convars
+        if (cmd.isConvarSetterFor('sv_allowlistInstructions') || cmd.isConvarSetterFor('sv_appearAllowlisted')) {
+            toCommentOut.add(
+                cmd.file,
+                cmd.line,
+                'The allowlist convars are overwritten by the txAdmin settings page.',
+            );
+            continue;
+        }
 
         //Extract & process endpoint validity
         if (cmd.command === 'endpoint_add_tcp' || cmd.command === 'endpoint_add_udp') {
diff --git a/core/lib/host/probeInternetTime.ts b/core/lib/host/probeInternetTime.ts
new file mode 100644
index 000000000..5f36169a2
--- /dev/null
+++ b/core/lib/host/probeInternetTime.ts
@@ -0,0 +1,124 @@
+import got from "@lib/got";
+import { performance } from "node:perf_hooks";
+
+
+export type ProbeTimezoneInfo = {
+    timezone: string;
+    offset: string;
+    abbr: string;
+};
+
+type ParseResult = {
+    time: number;
+    timezone?: ProbeTimezoneInfo;
+};
+
+type TimeProbe = {
+    url: string;
+    parse: (body: string) => ParseResult;
+};
+
+const getLocalTimezone = () => {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    } catch {
+        return 'UTC';
+    }
+};
+
+const buildTimeProbes = (): TimeProbe[] => {
+    const localTz = getLocalTimezone();
+    return [
+        {
+            url: "https://time.akamai.com/?ms",
+            parse: (b) => ({ time: parseFloat(b.trim()) * 1000 }),
+        },
+        {
+            url: "https://www.cloudflare.com/cdn-cgi/trace",
+            parse: (b) => {
+                const tsLine = b.split("\n").find((l) => l.startsWith("ts="))!;
+                const ts = parseFloat(tsLine.slice(3));        // seconds.frac
+                return { time: Math.round(ts * 1000) };
+            },
+        },
+        {
+            url: `https://gettimeapi.dev/v1/time?timezone=${encodeURIComponent(localTz)}`,
+            parse: (b) => {
+                const json = JSON.parse(b);
+                return {
+                    time: Date.parse(json.iso8601),
+                    timezone: {
+                        timezone: json.timezone,
+                        offset: json.offset,
+                        abbr: json.abbr,
+                    },
+                };
+            },
+        },
+    ];
+};
+
+
+export type ProbeSuccess = {
+    url: string;
+    success: true;
+    serverTime: number;
+    rtt: number;
+    offset: number;
+    timezone?: ProbeTimezoneInfo;
+};
+export type ProbeFailure = {
+    url: string;
+    success: false;
+    error: string;
+};
+export type ProbeResult = ProbeSuccess | ProbeFailure;
+
+const runProbe = async ({ url, parse }: TimeProbe): Promise<ProbeResult> => {
+    const timeoutMs = 5000;
+    try {
+        const t0 = performance.now();
+        const res = await got(url, {
+            retry: { limit: 0 },
+            timeout: { request: timeoutMs },
+        });
+        const t1 = performance.now();
+        const parsed = parse(res.body);
+        const rtt = t1 - t0;
+        const offset = parsed.time + rtt / 2 - Date.now();
+        return {
+            url,
+            success: true,
+            serverTime: parsed.time,
+            rtt,
+            offset,
+            timezone: parsed.timezone,
+        };
+    } catch (error) {
+        return { url, success: false, error: (error as Error)?.message ?? 'unknown error' };
+    }
+}
+
+
+type RunAllProbesResult = {
+    date: Date | null;
+    avgTimeMs: number | null;
+    avgOffsetMs: number | null;
+    avgRttMs: number | null;
+    results: ProbeResult[];
+}
+
+export default async function probeInternetTime(): Promise<RunAllProbesResult> {
+    const results = await Promise.all(buildTimeProbes().map(runProbe));
+    const successResults = results.filter((r) => r.success) as ProbeSuccess[];
+    const avgTimeMs = successResults.reduce((acc, r) => acc + r.serverTime, 0) / successResults.length;
+    const avgOffsetMs = successResults.reduce((acc, r) => acc + r.offset, 0) / successResults.length;
+    const avgRttMs = successResults.reduce((acc, r) => acc + r.rtt, 0) / successResults.length;
+    return {
+        date: avgTimeMs ? new Date(avgTimeMs) : null,
+        avgTimeMs: Math.floor(avgTimeMs),
+        avgOffsetMs: Math.floor(avgOffsetMs),
+        avgRttMs: Math.floor(avgRttMs),
+        results,
+    };
+}
diff --git a/core/lib/htmlRenderSafety.test.ts b/core/lib/htmlRenderSafety.test.ts
new file mode 100644
index 000000000..1fc18481c
--- /dev/null
+++ b/core/lib/htmlRenderSafety.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, test } from 'vitest';
+import {
+    escapeHtmlAttribute,
+    escapeHtmlContent,
+    escapeHtmlRawText,
+    sanitizeClassToken,
+    sanitizeCssVarName,
+    sanitizeCssVarValue,
+    sanitizeSimpleHtml,
+} from './htmlRenderSafety';
+
+//MARK: HTML escapes
+describe('escapeHtmlAttribute', () => {
+    test('escapes all characters that could break a quoted attribute', () => {
+        const value = `"'><script>alert(1)</script>&\``;
+        expect(escapeHtmlAttribute(value)).toBe('&quot;&#39;&gt;&lt;script&gt;alert(1)&lt;/script&gt;&amp;&#96;');
+    });
+
+    test('coerces non-string values to string', () => {
+        expect(escapeHtmlAttribute(123)).toBe('123');
+        expect(escapeHtmlAttribute(null)).toBe('null');
+        expect(escapeHtmlAttribute(undefined)).toBe('undefined');
+    });
+});
+
+describe('escapeHtmlContent', () => {
+    test('escapes tag and entity characters', () => {
+        expect(escapeHtmlContent('<script>alert(1)</script>&')).toBe('&lt;script&gt;alert(1)&lt;/script&gt;&amp;');
+    });
+
+    test('leaves quotes and backticks untouched', () => {
+        expect(escapeHtmlContent(`"hello" 'world' \`foo\``)).toBe(`"hello" 'world' \`foo\``);
+    });
+
+    test('coerces non-string values to string', () => {
+        expect(escapeHtmlContent(42)).toBe('42');
+        expect(escapeHtmlContent(null)).toBe('null');
+    });
+});
+
+describe('escapeHtmlRawText', () => {
+    test('prevents </script> tag breakout', () => {
+        expect(escapeHtmlRawText('</script><script>alert(1)</script>'))
+            .toBe('\\u003c/script\\u003e\\u003cscript\\u003ealert(1)\\u003c/script\\u003e');
+    });
+
+    test('prevents </style> tag breakout', () => {
+        expect(escapeHtmlRawText('</style><script>alert(1)</script>'))
+            .toBe('\\u003c/style\\u003e\\u003cscript\\u003ealert(1)\\u003c/script\\u003e');
+    });
+
+    test('escapes line/paragraph separators', () => {
+        expect(escapeHtmlRawText('a\u2028b\u2029c')).toBe('a\\u2028b\\u2029c');
+    });
+
+    test('works with JSON.stringify output for <script> injection', () => {
+        const out = escapeHtmlRawText(JSON.stringify({ v: '</script><script>alert(1)</script>' }));
+        expect(out).toBe('{"v":"\\u003c/script\\u003e\\u003cscript\\u003ealert(1)\\u003c/script\\u003e"}');
+    });
+});
+
+//MARK: CSS sanitizers
+describe('sanitizeClassToken', () => {
+    test('keeps only safe class token chars', () => {
+        expect(sanitizeClassToken('dark theme-foo" onload="evil()')).toBe('dark theme-foo onloadevil');
+    });
+
+    test('collapses extra whitespace', () => {
+        expect(sanitizeClassToken('  dark   light  ')).toBe('dark light');
+    });
+});
+
+describe('sanitizeCssVarName', () => {
+    test('removes unsafe chars from css variable names', () => {
+        expect(sanitizeCssVarName('x;}body{display:none/*')).toBe('xbodydisplaynone');
+    });
+});
+
+describe('sanitizeCssVarValue', () => {
+    test('strips characters that could break out of <style>', () => {
+        expect(sanitizeCssVarValue('1;}</style><script>alert(1)</script>&ok')).toBe('1;}/stylescriptalert(1)/scriptok');
+    });
+
+    test('preserves normal CSS values', () => {
+        expect(sanitizeCssVarValue('274 93% 39%')).toBe('274 93% 39%');
+    });
+});
+
+//MARK: HTML sanitizers
+describe('sanitizeSimpleHtml', () => {
+    test('allows whitelisted formatting tags', () => {
+        expect(sanitizeSimpleHtml('<strong>bold</strong> and <code>mono</code>'))
+            .toBe('<strong>bold</strong> and <code>mono</code>');
+    });
+
+    test('allows self-closing <br>', () => {
+        expect(sanitizeSimpleHtml('line1<br>line2')).toBe('line1<br>line2');
+    });
+
+    test('strips non-whitelisted tags', () => {
+        expect(sanitizeSimpleHtml('<script>alert(1)</script>')).toBe('&lt;script&gt;alert(1)&lt;/script&gt;');
+    });
+
+    test('strips tags that were previously over-whitelisted', () => {
+        const input = '<em>em</em><u>u</u><pre>pre</pre><p>p</p><a href="x">link</a>';
+        expect(sanitizeSimpleHtml(input)).not.toContain('<em>');
+        expect(sanitizeSimpleHtml(input)).not.toContain('<u>');
+        expect(sanitizeSimpleHtml(input)).not.toContain('<pre>');
+        expect(sanitizeSimpleHtml(input)).not.toContain('<p>');
+        expect(sanitizeSimpleHtml(input)).not.toContain('<a');
+    });
+});
diff --git a/core/lib/htmlRenderSafety.ts b/core/lib/htmlRenderSafety.ts
new file mode 100644
index 000000000..e6b9bc25d
--- /dev/null
+++ b/core/lib/htmlRenderSafety.ts
@@ -0,0 +1,148 @@
+/**
+ * HTML rendering safety utilities for server-side template rendering.
+ *
+ * Each function is designed for a specific HTML context:
+ * - Text content / body: escapeHtmlContent()
+ * - Quoted attributes: escapeHtmlAttribute()
+ * - Raw text elements (<script>/<style>): escapeHtmlRawText()
+ * - Simple-formatted message HTML: sanitizeSimpleHtml()
+ * - CSS class names and custom properties: sanitizeClassToken(), sanitizeCssVarName(), sanitizeCssVarValue()
+ */
+import { FilterXSS } from 'xss';
+
+
+//MARK: Constants
+// Escaping these in a quoted attribute prevents:
+// - Breaking out of the attribute value (" ' `)
+// - Injecting HTML tags (< >)
+// - Injecting HTML entities (&)
+const HTML_ATTR_ESCAPE_MAP: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;',
+    '`': '&#96;',
+};
+
+// <script> and <style> are "raw text elements" in HTML - the browser doesn't parse
+// HTML entities inside them, but it DOES look for the closing tag (e.g. </script>).
+// Escaping < > & to unicode escapes prevents:
+// - Closing the raw text element with </script> or </style>
+// - Injecting HTML entities (&) which would be misinterpreted outside the raw text context
+// U+2028/U+2029 are line/paragraph separators that can break JavaScript string literals.
+const RAW_TEXT_ESCAPE_MAP: Record<string, string> = {
+    '<': '\\u003c',
+    '>': '\\u003e',
+    '&': '\\u0026',
+    '\u2028': '\\u2028',
+    '\u2029': '\\u2029',
+};
+
+// Matches characters that could break out of a quoted attribute.
+const HTML_ATTR_ESCAPE_REGEX = /[&<>"'`]/g;
+
+// Escaping < > & in text content prevents tag injection and entity misinterpretation.
+// Quotes and backticks are harmless in text nodes, so they are not escaped here.
+const HTML_CONTENT_ESCAPE_MAP: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+};
+const HTML_CONTENT_ESCAPE_REGEX = /[&<>]/g;
+
+// Matches characters that could break out of a raw text element (<script>/<style>).
+// Shared between escapeHtmlRawText (which unicode-escapes them) and
+// sanitizeCssVarValue (which strips them entirely).
+const RAW_TEXT_BREAKOUT_REGEX = /[<>&\u2028\u2029]/g;
+
+// Only allows safe CSS identifier characters: letters, digits, hyphens, underscores.
+const CSS_SAFE_TOKEN_REGEX = /[^A-Za-z0-9_-]/g;
+
+
+//MARK: HTML escapes
+/**
+ * Escapes a value for safe embedding in a **quoted** HTML attribute.
+ * @example `<div class="${escapeHtmlAttribute(value)}">`
+ */
+export const escapeHtmlAttribute = (value: unknown) => {
+    return String(value)
+        .replace(HTML_ATTR_ESCAPE_REGEX, (char) => HTML_ATTR_ESCAPE_MAP[char]);
+};
+
+/**
+ * Escapes a value for safe embedding in HTML text content (between tags).
+ * Only escapes characters that could inject tags or entities; quotes and
+ * backticks are left untouched since they are harmless in body text.
+ * @example `<p>${escapeHtmlContent(userInput)}</p>`
+ */
+export const escapeHtmlContent = (value: unknown) => {
+    return String(value)
+        .replace(HTML_CONTENT_ESCAPE_REGEX, (char) => HTML_CONTENT_ESCAPE_MAP[char]);
+};
+
+/**
+ * Escapes a string for safe embedding inside `<script>` or `<style>` raw text elements.
+ * Replaces dangerous characters with unicode escapes to prevent tag breakout.
+ * @example `<script>const data = ${escapeHtmlRawText(jsonString)};</script>`
+ */
+export const escapeHtmlRawText = (value: string) => {
+    return value.replace(RAW_TEXT_BREAKOUT_REGEX, (char) => RAW_TEXT_ESCAPE_MAP[char]);
+};
+
+
+//MARK: CSS sanitizers
+/**
+ * Sanitizes a string for use as one or more CSS class tokens.
+ * Splits on whitespace, strips unsafe characters, and rejoins.
+ * @example `<div class="${sanitizeClassToken(userInput)}">`
+ */
+export const sanitizeClassToken = (value: string) => {
+    return value
+        .split(/\s+/g)
+        .map((token) => token.replace(CSS_SAFE_TOKEN_REGEX, ''))
+        .filter((token) => token.length)
+        .join(' ');
+};
+
+/**
+ * Sanitizes a string for use as a CSS custom property name (after the `--` prefix).
+ * Only allows [A-Za-z0-9_-].
+ * @example `--${sanitizeCssVarName(name)}: value;`
+ */
+export const sanitizeCssVarName = (value: string) => {
+    return value.replace(CSS_SAFE_TOKEN_REGEX, '');
+};
+
+/**
+ * Sanitizes a CSS property value by stripping characters that could break out of
+ * a `<style>` raw text element (e.g. injecting `</style><script>alert(1)</script>`).
+ * @example `--name: ${sanitizeCssVarValue(value)};`
+ */
+export const sanitizeCssVarValue = (value: string) => {
+    return value.replace(RAW_TEXT_BREAKOUT_REGEX, '');
+};
+
+
+//MARK: HTML sanitizers
+//FIXME: Deprecate this whenever ditching EJS & legacy pages
+// Whitelist for sanitizeSimpleHtml — only tags actually used by renderMessage callers:
+// <strong> and <code>: resources.js timeout/offline messages
+// <br>: resources.js multi-line messages
+// All the tags are also seen in the checkJoin.ts rejectMessageTemplate function
+const simpleHtmlSanitizer = new FilterXSS({
+    whiteList: {
+        strong: [],
+        br: [],
+        code: [],
+    },
+});
+
+/**
+ * Sanitizes an HTML string, stripping all tags except a minimal formatting set
+ * (`<strong>`, `<br>`, `<code>`). Intended for server-rendered message pages
+ * where simple formatting is needed but arbitrary HTML must be rejected.
+ */
+export const sanitizeSimpleHtml = (value: string) => {
+    return simpleHtmlSanitizer.process(value);
+};
diff --git a/core/lib/misc.ts b/core/lib/misc.ts
index d9f1867e9..dfd6d54e3 100644
--- a/core/lib/misc.ts
+++ b/core/lib/misc.ts
@@ -299,3 +299,34 @@ export const deepFreeze = <T extends Record<string, any>>(obj: T) => {
  * Returns a chalk.inverse of a string with a 1ch padding
  */
 export const chalkInversePad = (str: string) => chalk.inverse(` ${str} `);
+
+
+/**
+ * Parses a string to a safe and finite integer, or returns null if it's not a valid integer.
+ */
+export const parseFiniteIntString = (str: string) => {
+    const parsed = parseInt(str);
+    if (Number.isNaN(parsed) || !Number.isSafeInteger(parsed) || !Number.isFinite(parsed)) {
+        return null;
+    }
+    return parsed;
+}
+
+/**
+ * Returns a markdown code inline string
+ */
+export const mdCodeInline = (msg: string) => `\`${msg}\``;
+
+
+/**
+ * Returns a markdown code block string
+ */
+export const mdCodeBlock = (msg: string, lang: string | false = '', maxLen: number | false = false) => {
+    const blockLang = lang ? lang : '';
+    let blockMsg = msg;
+    if (maxLen && blockMsg.length > maxLen) {
+        blockMsg = blockMsg.substring(0, maxLen - 3) + '...';
+    }
+    const escapedMessage = blockMsg.replaceAll(/`/g, '\\\`');
+    return `\`\`\`${blockLang}\n${escapedMessage}\n\`\`\``;
+};
diff --git a/core/lib/player/idUtils.test.ts b/core/lib/player/idUtils.test.ts
index 0ddd2b762..5f41d8842 100644
--- a/core/lib/player/idUtils.test.ts
+++ b/core/lib/player/idUtils.test.ts
@@ -1,5 +1,6 @@
 import { test, expect, suite, it } from 'vitest';
 import * as idUtils from './idUtils';
+import { shortenId } from '@shared/utils';
 
 
 test('parsePlayerId', () => {
@@ -40,18 +41,33 @@ test('getIdFromOauthNameid', () => {
     expect(idUtils.getIdFromOauthNameid('xxxxx')).toBe(false);
 });
 
+//NOTE: testing here because the @shared workspace has no tests
 test('shortenId', () => {
-    // Invalid ids
-    expect(() => idUtils.shortenId(123 as any)).toThrow('id is not a string');
-    expect(idUtils.shortenId('invalidFormat')).toBe('invalidFormat');
-    expect(idUtils.shortenId(':1234567890123456')).toBe(':1234567890123456');
-    expect(idUtils.shortenId('discord:')).toBe('discord:');
-
-    // Valid ID with length greater than >= 10
-    expect(idUtils.shortenId('discord:383919883341266945')).toBe('discord:3839…6945');
-    expect(idUtils.shortenId('xbl:12345678901')).toBe('xbl:1234…8901');
+    // Invalid parameters
+    expect(() => shortenId(123 as any)).toThrow('id');
+    expect(() => shortenId('discord:123456789', 2)).toThrow('numChars');
+    expect(() => shortenId('discord:123456789', 'invalid' as any)).toThrow('numChars');
     
-    // Valid ID with length <= 10 (should not be shortened)
-    expect(idUtils.shortenId('fivem:1234567890')).toBe('fivem:1234567890');
-    expect(idUtils.shortenId('steam:1234')).toBe('steam:1234');
+    // Invalid id formats
+    expect(shortenId('invalidFormat')).toBe('invalidFormat');
+    expect(shortenId(':1234567890123456')).toBe(':1234567890123456');
+    expect(shortenId('discord:')).toBe('discord:');
+
+    // Default behavior (numChars = 4)
+    expect(shortenId('discord:383919883341266945')).toBe('discord:3839…6945');
+    expect(shortenId('xbl:12345678901')).toBe('xbl:1234…8901');
+    
+    // Valid ID with length <= threshold (should not be shortened)
+    expect(shortenId('fivem:1234567890')).toBe('fivem:1234567890');
+    expect(shortenId('steam:1234')).toBe('steam:1234');
+    
+    // Custom numChars parameter
+    expect(shortenId('discord:383919883341266945', 3)).toBe('discord:383…945');
+    expect(shortenId('discord:383919883341266945', 5)).toBe('discord:38391…66945');
+    expect(shortenId('discord:383919883341266945', 6)).toBe('discord:383919…266945');
+    expect(shortenId('2:bea2ac491d849477e66957b515f4a555a222e2e25911788d13fd46e9fda240a9', 20)).toBe('2:bea2ac491d849477e669…788d13fd46e9fda240a9');
+    
+    // Edge case: exactly at threshold
+    expect(shortenId('discord:12345678', 3)).toBe('discord:12345678'); // 8 chars = 3*2+2, should not shorten
+    expect(shortenId('discord:123456789', 3)).toBe('discord:123…789'); // 9 chars > 3*2+2, should shorten
 });
diff --git a/core/lib/player/idUtils.ts b/core/lib/player/idUtils.ts
index b32d83cf9..5a3e0aa92 100644
--- a/core/lib/player/idUtils.ts
+++ b/core/lib/player/idUtils.ts
@@ -1,5 +1,6 @@
 import type { PlayerIdsObjectType } from "@shared/otherTypes";
 import consts from "@shared/consts";
+import { shortenId } from "@shared/utils";
 
 
 /**
@@ -136,34 +137,12 @@ export const getIdFromOauthNameid = (nameid: string) => {
 }
 
 
-/**
- * Shortens an ID/HWID string to just leading and trailing 4 characters.
- * Unicode symbol alternatives: ‥,…,~,≈,-,•,◇
- */
-export const shortenId = (id: string) => {
-    if (typeof id !== 'string') throw new Error(`id is not a string`);
-    
-    const [idType, idValue] = id.split(':', 2);
-    if (!idType || !idValue) {
-        return id; // Invalid format, return as is
-    }
-    
-    if (idValue.length <= 10) {
-        return id; // Do not shorten if ID value is 10 characters or fewer
-    }
-    
-    const start = idValue.slice(0, 4);
-    const end = idValue.slice(-4);
-    return `${idType}:${start}…${end}`;
-}
-
-
 /**
  * Returns a string of shortened IDs/HWIDs
  */
 export const summarizeIdsArray = (ids: string[]) => {
     if (!Array.isArray(ids)) return '<invalid list>';
     if (ids.length === 0) return '<empty list>';
-    const shortList = ids.map(shortenId).join(', ');
+    const shortList = ids.map(id => shortenId(id)).join(', ');
     return `[${shortList}]`;
 }
diff --git a/core/lib/player/playerClasses.ts b/core/lib/player/playerClasses.ts
index 171bbd1cf..953b5a371 100644
--- a/core/lib/player/playerClasses.ts
+++ b/core/lib/player/playerClasses.ts
@@ -18,8 +18,8 @@ const console = consoleFactory(modulename);
 export class BasePlayer {
     displayName: string = 'unknown';
     pureName: string = 'unknown';
-    ids: string[] = [];
-    hwids: string[] = [];
+    idsOnline: string[] = [];
+    hwidsOnline: string[] = [];
     license: null | string = null; //extracted for convenience
     dbData: false | DatabasePlayerType = false;
     isConnected: boolean = false;
@@ -36,25 +36,36 @@ export class BasePlayer {
     }
 
     /**
-     * Returns all available identifiers (current+db)
+     * Getter for the IDs in the database that are not currently online.
      */
-    getAllIdentifiers() {
-        if (this.dbData && this.dbData.ids) {
-            return union(this.ids, this.dbData.ids);
-        } else {
-            return [...this.ids];
-        }
+    get idsOffline() {
+        if (!this.dbData || !this.dbData.ids.length) return [];
+        return this.dbData.ids.filter(x => !this.idsOnline.includes(x));
     }
 
     /**
-     * Returns all available hardware identifiers (current+db)
+     * Getter for the IDs in the database that are not currently online.
      */
-    getAllHardwareIdentifiers() {
-        if (this.dbData && this.dbData.hwids) {
-            return union(this.hwids, this.dbData.hwids);
-        } else {
-            return [...this.hwids];
-        }
+    get hwidsOffline() {
+        if (!this.dbData || !this.dbData.hwids.length) return [];
+        return this.dbData.hwids.filter(x => !this.hwidsOnline.includes(x));
+    }
+
+
+    /**
+     * Getter for all available identifiers (current+db)
+     */
+    get allIdentifiers() {
+        if (!this.dbData || !this.dbData.ids.length) return this.idsOnline;
+        return union(this.idsOnline, this.dbData.ids);
+    }
+
+    /**
+     * Getter for all available hardware identifiers (current+db)
+     */
+    get allHardwareIdentifiers() {
+        if (!this.dbData || !this.dbData.hwids.length) return this.hwidsOnline;
+        return union(this.hwidsOnline, this.dbData.hwids);
     }
 
     /**
@@ -63,11 +74,12 @@ export class BasePlayer {
      *  will contain the license but may be better to also explicitly add it to the array here?
      */
     getHistory() {
-        if (!this.ids.length) return [];
-        return txCore.database.actions.findMany(
-            this.getAllIdentifiers(),
-            this.getAllHardwareIdentifiers()
-        );
+        const allIdentifiers = this.allIdentifiers;
+        const allHardwareIdentifiers = this.allHardwareIdentifiers;
+        if (!allIdentifiers.length && !allHardwareIdentifiers.length) {
+            return [];
+        }
+        return txCore.database.actions.findMany(allIdentifiers, allHardwareIdentifiers);
     }
 
     /**
@@ -96,12 +108,27 @@ export class BasePlayer {
         });
 
         //Remove entries from whitelistApprovals & whitelistRequests
+        const allIds = this.allIdentifiers;
         const allIdsFilter = (x: DatabaseWhitelistApprovalsType) => {
-            return this.ids.includes(x.identifier);
+            return allIds.includes(x.identifier);
         }
         txCore.database.whitelist.removeManyApprovals(allIdsFilter);
         txCore.database.whitelist.removeManyRequests({ license: this.license });
     }
+
+    /**
+     * Removes specific IDs/HWIDs from the player.
+     */
+    removeIds(idsToDelete: string[]) {
+        if (!this.dbData) throw new Error(`cannot remove ids for a player that has no dbData`);
+        if (!this.license) throw new Error(`cannot remove ids for a player that has no license`);
+        if (!Array.isArray(idsToDelete) || !idsToDelete.length) return;
+
+        //Remove from dbData
+        const newIds = this.dbData.ids.filter(x => !idsToDelete.includes(x));
+        const newHwids = this.dbData.hwids.filter(x => !idsToDelete.includes(x));
+        this.mutateDbData({ ids: newIds, hwids: newHwids });
+    }
 }
 
 
@@ -118,7 +145,7 @@ export class ServerPlayer extends BasePlayer {
     readonly #fxPlayerlist: FxPlayerlist;
     // readonly psid: string; //TODO: calculate player session id (sv mutex, netid, rollover id) here
     readonly netid: number;
-    readonly tsConnected = now();
+    readonly tsConnected: number = now();
     readonly isRegistered: boolean;
     readonly #minuteCronInterval?: ReturnType<typeof setInterval>;
     // #offlineDbDataCacheTimeout?: ReturnType<typeof setTimeout>;
@@ -146,8 +173,8 @@ export class ServerPlayer extends BasePlayer {
         //NOTE: ignoring IP completely
         const { validIdsArray, validIdsObject } = parsePlayerIds(playerData.ids);
         this.license = validIdsObject.license;
-        this.ids = validIdsArray;
-        this.hwids = playerData.hwids.filter(x => {
+        this.idsOnline = validIdsArray;
+        this.hwidsOnline = playerData.hwids.filter(x => {
             return typeof x === 'string' && consts.regexValidHwidToken.test(x);
         });
 
@@ -190,15 +217,15 @@ export class ServerPlayer extends BasePlayer {
                     displayName: this.displayName,
                     pureName: this.pureName,
                     tsLastConnection: this.tsConnected,
-                    ids: union(dbPlayer.ids, this.ids),
-                    hwids: union(dbPlayer.hwids, this.hwids),
+                    ids: union(dbPlayer.ids, this.idsOnline),
+                    hwids: union(dbPlayer.hwids, this.hwidsOnline),
                 });
             } else {
                 //Register player to the database
                 const toRegister = {
                     license: this.license,
-                    ids: this.ids,
-                    hwids: this.hwids,
+                    ids: this.idsOnline,
+                    hwids: this.hwidsOnline,
                     displayName: this.displayName,
                     pureName: this.pureName,
                     playTime: 0,
@@ -308,11 +335,13 @@ export class ServerPlayer extends BasePlayer {
 
 
     /**
-     * Marks this player as disconnected, clears dbData (mem optimization) and clears minute cron
+     * Marks this player as disconnected, and clears minute cron
      */
     disconnect() {
         this.isConnected = false;
         // this.dbData = false;
+        this.idsOnline = [];
+        this.hwidsOnline = [];
         clearInterval(this.#minuteCronInterval);
     }
 }
@@ -344,8 +373,6 @@ export class DatabasePlayer extends BasePlayer {
 
         //fill in data
         this.license = license;
-        this.ids = this.dbData.ids;
-        this.hwids = this.dbData.hwids;
         this.displayName = this.dbData.displayName;
         this.pureName = this.dbData.pureName;
     }
diff --git a/core/lib/xss.js b/core/lib/xss.js
deleted file mode 100644
index 26aabc933..000000000
--- a/core/lib/xss.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import xssClass from 'xss';
-
-
-/**
- * Returns a function with the passed whitelist parameter.
- * https://github.com/leizongmin/js-xss#whitelist
- */
-export default (customWL = []) => {
-    const xss = new xssClass.FilterXSS({
-        whiteList: customWL,
-    });
-    return (x) => xss.process(x);
-};
diff --git a/core/modules/AdminStore/index.js b/core/modules/AdminStore/index.js
index 422fffd10..42b653be3 100644
--- a/core/modules/AdminStore/index.js
+++ b/core/modules/AdminStore/index.js
@@ -13,6 +13,7 @@ const console = consoleFactory(modulename);
 
 //NOTE: The way I'm doing versioning right now is horrible but for now it's the best I can do
 //NOTE: I do not need to version every admin, just the file itself
+//NOTE: The only reason every admin has a schema is because I did not want to change the format of the file
 const ADMIN_SCHEMA_VERSION = 1;
 
 
@@ -46,7 +47,7 @@ export default class AdminStore {
         //FIXME: move to a separate file
         //TODO: maybe put in @shared so the frontend's UnauthorizedPage can use it
         //TODO: when migrating the admins page to react, definitely put this in @shared so the front rendering doesn't depend on the backend response - lessons learned from the settings page.
-        //FIXME: if not using enums, definitely use so other type of type safety
+        //FIXME: if not using enums, definitely use some other type of type safety
         //FIXME: maybe rename all_permissions to `administrator` (just like discord) or `super_admin` and rename the `Admins` page to `Users`. This fits better with how people use txAdmin as "mods" are not really admins
         this.registeredPermissions = {
             'all_permissions': 'All Permissions',
@@ -61,12 +62,13 @@ export default class AdminStore {
             'server.cfg.editor': 'Read/Write server.cfg', //FIXME: rename to server.cfg_editor
             'txadmin.log.view': 'View System Logs', //FIXME: rename to system.log.view
             'server.log.view': 'View Server Logs',
+            'players.remove_ids': 'Remove Player IDs',
 
             'menu.vehicle': 'Spawn / Fix Vehicles',
             'menu.clear_area': 'Reset world area',
             'menu.viewids': 'View Player IDs in-game', //be able to see the ID of the players
             'players.direct_message': 'Direct Message',
-            'players.whitelist': 'Whitelist',
+            'players.whitelist': 'Allowlist',
             'players.warn': 'Warn',
             'players.kick': 'Kick',
             'players.ban': 'Ban',
@@ -156,7 +158,7 @@ export default class AdminStore {
 
         //Handling password
         let password_hash, password_temporary;
-        if(password){
+        if (password) {
             password_hash = isPlainTextPassword ? GetPasswordHash(password) : password;
             // password_temporary = false; //undefined will do the same
         } else {
@@ -219,7 +221,7 @@ export default class AdminStore {
             return {
                 name: user.name,
                 master: user.master,
-                providers: Object.keys(user.providers),
+                providers: user.providers,
                 permissions: user.permissions,
             };
         });
@@ -339,7 +341,7 @@ export default class AdminStore {
                 restore();
             }
         } catch (error) {
-            console.error(`Cannot check admins file integrity: ${error.message}`);
+            console.error(`Failed to check admins file integrity: ${error.message}`);
         }
     }
 
@@ -348,8 +350,8 @@ export default class AdminStore {
      * Add a new admin to the admins file
      * NOTE: I'm fully aware this coud be optimized. Leaving this way to improve readability and error verbosity
      * @param {string} name
-     * @param {object|undefined} citizenfxData or false
-     * @param {object|undefined} discordData or false
+     * @param {object|false} citizenfxData or false
+     * @param {object|false} discordData or false
      * @param {string} password
      * @param {array} permissions
      */
@@ -613,6 +615,7 @@ export default class AdminStore {
 
     /**
      * Notify game server about admin changes
+     * FIXME: doesn't need to be async, just make sure it never throws
      */
     async refreshOnlineAdmins() {
         //Refresh auth of all admins connected to socket.io
@@ -620,17 +623,20 @@ export default class AdminStore {
 
         try {
             //Getting all admin identifiers
+            //FIXME: use getAdminsIdentifiers() instead
             const adminIDs = this.admins.reduce((ids, adm) => {
                 const adminIDs = Object.keys(adm.providers).map((pName) => adm.providers[pName].identifier);
                 return ids.concat(adminIDs);
             }, []);
 
             //Finding online admins
-            const playerList = txCore.fxPlayerlist.getPlayerList();
-            const onlineIDs = playerList.filter((p) => {
-                return p.ids.some((i) => adminIDs.includes(i));
-            }).map((p) => p.netid);
-
+            const onlineIDs = [];
+            const { idsFound } = txCore.fxPlayerlist.getAssociatedOnlineNetIds(adminIDs);
+            for (const netid of idsFound.map(x => x[1])) {
+                if (!onlineIDs.includes(netid)) {
+                    onlineIDs.push(netid);
+                }
+            }
             txCore.fxRunner.sendEvent('adminsUpdated', onlineIDs);
         } catch (error) {
             console.verbose.error('Failed to refreshOnlineAdmins() with error:');
diff --git a/core/modules/ConfigStore/schema/index.ts b/core/modules/ConfigStore/schema/index.ts
index 96b78cd3b..3e2a9b4b5 100644
--- a/core/modules/ConfigStore/schema/index.ts
+++ b/core/modules/ConfigStore/schema/index.ts
@@ -13,8 +13,8 @@ import { SYM_RESET_CONFIG } from "@lib/symbols";
 
 
 //Type inference utils
-type InferConfigScopes<S extends ConfigScope> = IferConfigValues<S>;
-type IferConfigValues<S extends ConfigScope> = {
+type InferConfigScopes<S extends ConfigScope> = InferConfigValues<S>;
+type InferConfigValues<S extends ConfigScope> = {
     [K in keyof S]: S[K]['default'] | z.infer<S[K]['validator']>;
 }
 type WritableValues<T> = {
diff --git a/core/modules/ConfigStore/schema/whitelist.ts b/core/modules/ConfigStore/schema/whitelist.ts
index c2f466c6f..8eecf2cd0 100644
--- a/core/modules/ConfigStore/schema/whitelist.ts
+++ b/core/modules/ConfigStore/schema/whitelist.ts
@@ -5,15 +5,15 @@ import consts from "@shared/consts";
 
 
 const mode = typeDefinedConfig({
-    name: 'Whitelist Mode',
+    name: 'Allowlist Mode',
     default: 'disabled',
-    validator: z.enum(['disabled', 'adminOnly', 'approvedLicense', 'discordMember', 'discordRoles']),
+    validator: z.enum(['disabled', 'adminOnly', 'approvedLicense', 'discordMember', 'discordRoles', 'external']),
     fixer: SYM_FIXER_DEFAULT,
 });
 
 const rejectionMessage = typeDefinedConfig({
-    name: 'Whitelist Rejection Message',
-    default: 'Please join http://discord.gg/example and request to be whitelisted.',
+    name: 'Allowlist Instructions',
+    default: 'Please join http://discord.gg/example and request to be allowlisted.',
     validator: z.string(),
     fixer: SYM_FIXER_DEFAULT,
 });
@@ -25,7 +25,7 @@ export const polishDiscordRolesArray = (input: string[]) => {
 }
 
 const discordRoles = typeDefinedConfig({
-    name: 'Whitelisted Discord Roles',
+    name: 'Allowlisted Discord Roles',
     default: [],
     validator: discordSnowflakeSchema.array().transform(polishDiscordRolesArray),
     fixer: (input: any) => {
diff --git a/core/modules/Database/dao/actions.ts b/core/modules/Database/dao/actions.ts
index 093401f7b..47329871f 100644
--- a/core/modules/Database/dao/actions.ts
+++ b/core/modules/Database/dao/actions.ts
@@ -70,7 +70,8 @@ export default class ActionsDao {
                 .filter(customFilter as (a: DatabaseActionType) => a is T)
                 .filter(idsMatchFilter)
                 .cloneDeep()
-                .value();
+                .value()
+                .sort((a, b) => a.timestamp - b.timestamp); //FIXME: shouldn't be needed, remove after the autosort migration
         } catch (error) {
             const msg = `Failed to search for a registered action database with error: ${(error as Error).message}`;
             console.verbose.error(msg);
diff --git a/core/modules/Database/dao/cleanup.ts b/core/modules/Database/dao/cleanup.ts
index ec220ab5c..8cbad9864 100644
--- a/core/modules/Database/dao/cleanup.ts
+++ b/core/modules/Database/dao/cleanup.ts
@@ -2,6 +2,7 @@ import { DbInstance, SavePriority } from "../instance";
 import consoleFactory from '@lib/console';
 import { DatabasePlayerType, DatabaseWhitelistApprovalsType, DatabaseWhitelistRequestsType } from '../databaseTypes';
 import { now } from '@lib/misc';
+import chalk from "chalk";
 const console = consoleFactory('DatabaseDao');
 
 
@@ -100,7 +101,7 @@ export default class CleanupDao {
 
         //Optimize players
         //Players that have not joined the last 16 days, and have less than 2 hours of playtime
-        let playerRemoved;
+        let playerRemoved = 0;
         try {
             const sixteenDaysAgo = now() - (16 * oneDay);
             const filter = (p: DatabasePlayerType) => {
@@ -114,7 +115,8 @@ export default class CleanupDao {
 
         //Optimize whitelistRequests + whitelistApprovals
         //Removing the ones older than 7 days
-        let wlRequestsRemoved, wlApprovalsRemoved;
+        let wlRequestsRemoved = 0;
+        let wlApprovalsRemoved = 0;
         const sevenDaysAgo = now() - (7 * oneDay);
         try {
             const wlRequestsFilter = (req: DatabaseWhitelistRequestsType) => {
@@ -131,10 +133,19 @@ export default class CleanupDao {
             console.error(msg);
         }
 
-        this.db.writeFlag(SavePriority.LOW);
-        console.ok(`Internal Database optimized. This applies only for the txAdmin internal database, and does not affect your MySQL or framework (ESX/QBCore/etc) databases.`);
-        console.ok(`- ${playerRemoved} players that haven't connected in the past 16 days and had less than 2 hours of playtime.`);
-        console.ok(`- ${wlRequestsRemoved} whitelist requests older than a week.`);
-        console.ok(`- ${wlApprovalsRemoved} whitelist approvals older than a week.`);
+        //Skip if failed or nothing was removed
+        if (playerRemoved || wlRequestsRemoved || wlApprovalsRemoved) {
+            this.db.writeFlag(SavePriority.LOW);
+            console.ok(`Internal Database optimized. This applies only for the txAdmin internal database, and does not affect your MySQL or framework (ESX/QBCore/etc) databases.`);
+        }
+        if (playerRemoved) {
+            console.ok(chalk.dim(`- ${playerRemoved} players that haven't connected in the past 16 days and had less than 2 hours of playtime.`));
+        }
+        if (wlRequestsRemoved) {
+            console.ok(chalk.dim(`- ${wlRequestsRemoved} whitelist requests older than a week.`));
+        }
+        if (wlApprovalsRemoved) {
+            console.ok(chalk.dim(`- ${wlApprovalsRemoved} whitelist approvals older than a week.`));
+        }
     }
 }
diff --git a/core/modules/DiscordBot/defaultJsons.ts b/core/modules/DiscordBot/defaultJsons.ts
index e4182ebd7..e7437d832 100644
--- a/core/modules/DiscordBot/defaultJsons.ts
+++ b/core/modules/DiscordBot/defaultJsons.ts
@@ -1,5 +1,3 @@
-import { txEnv } from "@core/globalData";
-
 export const defaultEmbedJson = JSON.stringify({
     "title": "{{serverName}}",
     "url": "{{serverBrowserUrl}}",
@@ -56,10 +54,5 @@ export const defaultEmbedConfigJson = JSON.stringify({
             "label": "txAdmin Discord",
             "url": "https://discord.gg/txAdmin"
         },
-        txEnv.displayAds ? {
-            "emoji": "😏",
-            "label": "ZAP-Hosting",
-            "url": "https://zap-hosting.com/txadmin6"
-        } : undefined,
     ].filter(Boolean)
 });
diff --git a/core/modules/DiscordBot/discordHelpers.ts b/core/modules/DiscordBot/discordHelpers.ts
index bd35451b0..a31bca3a6 100644
--- a/core/modules/DiscordBot/discordHelpers.ts
+++ b/core/modules/DiscordBot/discordHelpers.ts
@@ -6,7 +6,6 @@ const console = consoleFactory(modulename);
 const allEmojis = new Set(orderedEmojis);
 
 
-
 /**
  * Generic embed generation functions
  */
diff --git a/core/modules/DiscordBot/index.ts b/core/modules/DiscordBot/index.ts
index 2594513ea..7645dc6b4 100644
--- a/core/modules/DiscordBot/index.ts
+++ b/core/modules/DiscordBot/index.ts
@@ -339,13 +339,19 @@ export default class DiscordBot {
                     .map((x) => x[0])
                 if (prohibitedPermsInUse.length) {
                     const name = this.#client.user.username;
-                    const perms = prohibitedPermsInUse.includes('Administrator')
-                        ? 'Administrator'
-                        : prohibitedPermsInUse.join(', ');
-                    return sendError(
-                        `This bot (${name}) has dangerous permissions (${perms}) and for your safety the bot has been disabled.`,
-                        { code: 'DangerousPermission' }
-                    );
+                    if(prohibitedPermsInUse.includes('Administrator')) {
+                        return sendError(
+                            `This bot (\`${name}\`) has \`Administrator\` permission and for your safety the bot has been disabled.`,
+                            { code: 'DangerousPermission' }
+                        );
+                    } else {
+                        const permsList = prohibitedPermsInUse.map((x) => `\`${x}\``).join(', ');
+                        const plural = prohibitedPermsInUse.length > 1 ? 'has dangerous permissions' : 'has a dangerous permission';
+                        return sendError(
+                            `This bot (\`${name}\`) ${plural} (${permsList}) and for your safety the bot has been disabled.`,
+                            { code: 'DangerousPermission' }
+                        );
+                    }
                 }
 
                 //Fetching announcements channel
diff --git a/core/modules/FxMonitor/utils.ts b/core/modules/FxMonitor/utils.ts
index 1ea3277ad..3241bc0bf 100644
--- a/core/modules/FxMonitor/utils.ts
+++ b/core/modules/FxMonitor/utils.ts
@@ -71,6 +71,17 @@ export class Stopwatch {
             return Math.floor(elapsedMs / 1000);
         }
     }
+
+    /**
+     * Returns the elapsed time in milliseconds or Infinity if not started.
+     */
+    get elapsedMs() {
+        if (this.tsStart === null) {
+            return Infinity;
+        } else {
+            return Date.now() - this.tsStart;
+        }
+    }
 }
 
 
diff --git a/core/modules/FxPlayerlist/index.ts b/core/modules/FxPlayerlist/index.ts
index 049fffd83..eaee840cc 100644
--- a/core/modules/FxPlayerlist/index.ts
+++ b/core/modules/FxPlayerlist/index.ts
@@ -33,7 +33,7 @@ export type PlayerDropEvent = {
  * A list with 50k connected players will weight around 26mb, meaning no optimization is required there.
  */
 export default class FxPlayerlist {
-    #playerlist: (ServerPlayer | undefined)[] = [];
+    #playerlist: (ServerPlayer | undefined)[] = []; //FIXME: make continuous array instead of indexed by netid
     licenseCache: [mutexid: string, license: string][] = [];
     licenseCacheLimit = 50_000; //mutex+id+license * 50_000 = ~4mb
     joinLeaveLog: [ts: number, isJoin: boolean][] = [];
@@ -123,20 +123,21 @@ export default class FxPlayerlist {
                     netid: p!.netid,
                     displayName: p!.displayName,
                     pureName: p!.pureName,
-                    ids: p!.ids,
                     license: p!.license,
                 });
             });
     }
 
+
     /**
      * Returns a specifc ServerPlayer or undefined.
      * NOTE: this returns the actual object and not a deep clone!
      */
     getPlayerById(netid: number) {
-        return this.#playerlist[netid];
+        return this.#playerlist[netid]; //FIXME: do this.#playerlist.find() instead
     }
 
+
     /**
      * Returns a specifc ServerPlayer or undefined.
      * NOTE: this returns the actual object and not a deep clone!
@@ -145,6 +146,7 @@ export default class FxPlayerlist {
         return this.#playerlist.filter(p => p && p.license === searchLicense && p.isConnected) as ServerPlayer[];
     }
 
+
     /**
      * Returns a set of all online players' licenses.
      */
@@ -152,6 +154,33 @@ export default class FxPlayerlist {
         return new Set(this.#playerlist.filter(p => p && p.isConnected).map(p => p!.license));
     }
 
+
+    /**
+     * Returns a list of online players' netids associated with each ID/HWID provided.
+     */
+    getAssociatedOnlineNetIds(targetIds: string[] | null = null, targetHwids: string[] | null = null) {
+        type IdAssociation = [id: string, netid: number];
+        if (!targetIds?.length && !targetHwids?.length) {
+            return {
+                idsFound: [] as IdAssociation[],
+                hwidsFound: [] as IdAssociation[],
+            }
+        }
+        const idsFound: IdAssociation[] = [];
+        const hwidsFound: IdAssociation[] = [];
+        for (const player of this.#playerlist.filter(p => p && p.isConnected) as ServerPlayer[]) {
+            targetIds?.filter(id => player.idsOnline.includes(id)).forEach(id => {
+                idsFound.push([id, player.netid]);
+            });
+            targetHwids?.filter(hwid => player.hwidsOnline.includes(hwid)).forEach(hwid => {
+                hwidsFound.push([hwid, player.netid]);
+            });
+        }
+
+        return { idsFound, hwidsFound };
+    }
+
+
     /**
      * Receives initial data callback from ServerPlayer and dispatches to the server as stdin.
      */
@@ -188,7 +217,7 @@ export default class FxPlayerlist {
                     type: 'playerJoining',
                     src: payload.id,
                     ts: currTs,
-                    data: { ids: this.#playerlist[payload.id]!.ids }
+                    data: { ids: svPlayer.idsOnline }
                 }], mutex);
                 txCore.webServer.webSocket.buffer<PlayerJoiningEventType>('playerlist', {
                     mutex,
@@ -196,7 +225,6 @@ export default class FxPlayerlist {
                     netid: svPlayer.netid,
                     displayName: svPlayer.displayName,
                     pureName: svPlayer.pureName,
-                    ids: svPlayer.ids,
                     license: svPlayer.license,
                 });
             } catch (error) {
diff --git a/core/modules/FxResources.ts b/core/modules/FxResources.ts
index 4fc7b3bdf..fdf2546c0 100644
--- a/core/modules/FxResources.ts
+++ b/core/modules/FxResources.ts
@@ -1,4 +1,5 @@
 const modulename = 'FxResources';
+import { cloneDeep } from 'lodash-es';
 import consoleFactory from '@lib/console';
 import { Stopwatch } from './FxMonitor/utils';
 const console = consoleFactory(modulename);
@@ -41,14 +42,19 @@ export default class FxResources {
     public resourceReport?: ResourceReportType;
     private resBooting: ResPendingStartState | null = null;
     private resBootLog: ResBootLogEntry[] = [];
+    private prevBootLog: ResBootLogEntry[] | null = null;
 
 
     /**
      * Reset boot state on server close
      */
     handleServerClose() {
-        this.resBooting = null;
+        //Save the previous boot log
+        if (this.resBootLog.length > 0) {
+            this.prevBootLog = this.resBootLog;
+        }
         this.resBootLog = [];
+        this.resBooting = null;
     }
 
 
@@ -67,11 +73,22 @@ export default class FxResources {
             }
         } else if (event === 'onResourceStart') {
             //Resource started
-            this.resBootLog.push({
-                resource,
-                duration: this.resBooting?.time.elapsed ?? 0,
-                tsBooted: Date.now(),
-            })
+            if (this.resBooting?.name === resource) {
+                this.resBootLog.push({
+                    resource,
+                    duration: this.resBooting.time.elapsedMs ?? -1,
+                    tsBooted: Date.now(),
+                });
+            } else {
+                if (resource !== 'monitor') {
+                    console.verbose.warn(`Resource ${resource} started while ${this.resBooting?.name ?? 'unknown'} was booting`);
+                }
+                this.resBootLog.push({
+                    resource,
+                    duration: -1,
+                    tsBooted: Date.now(),
+                });
+            }
         }
     }
 
@@ -91,6 +108,13 @@ export default class FxResources {
         }
     }
 
+    /**
+     * Getter for the latest boot log
+     */
+    public get latestBootLog() {
+        return cloneDeep(this.resBooting ? this.resBootLog : this.prevBootLog);
+    }
+
 
     /**
      * Handle resource report.
diff --git a/core/modules/FxRunner/index.ts b/core/modules/FxRunner/index.ts
index 4a2c6e945..fd4530cc3 100644
--- a/core/modules/FxRunner/index.ts
+++ b/core/modules/FxRunner/index.ts
@@ -369,7 +369,7 @@ export default class FxRunner {
      * Useful for when we change txAdmin settings and want it to reflect on the server.
      * This will also fire the `txAdmin:event:configChanged`
      */
-    private async updateMutableConvars() {
+    public async updateMutableConvars() {
         console.log('Updating FXServer ConVars.');
         try {
             await setupCustomLocaleFile();
@@ -377,11 +377,12 @@ export default class FxRunner {
             for (const [set, convar, value] of convarList) {
                 this.sendCommand(set, [convar, value], SYM_SYSTEM_AUTHOR);
             }
-            return this.sendEvent('configChanged');
+            this.sendEvent('configChanged');
+            return convarList;
         } catch (error) {
             console.verbose.error('Error updating FXServer ConVars');
             console.verbose.dir(error);
-            return false;
+            return null;
         }
     }
 
diff --git a/core/modules/FxRunner/utils.ts b/core/modules/FxRunner/utils.ts
index 1d4670e3f..c79953988 100644
--- a/core/modules/FxRunner/utils.ts
+++ b/core/modules/FxRunner/utils.ts
@@ -26,7 +26,12 @@ export const childProcessEventBlackHole = (...args: any[]) => {
  * Returns a tuple with the convar name and value, formatted for the server command line
  */
 export const getMutableConvars = (isCmdLine = false) => {
-    const checkPlayerJoin = txConfig.banlist.enabled || txConfig.whitelist.mode !== 'disabled';
+    const checkPlayerJoin = txConfig.banlist.enabled || (
+        txConfig.whitelist.mode !== 'disabled'
+        && txConfig.whitelist.mode !== 'external'
+    );
+    const appearAllowlisted = txConfig.whitelist.mode !== 'disabled';
+
     const convars: RawConvarSetTuple[] = [
         ['setr', 'locale', txConfig.general.language ?? 'en'],
         ['set', 'serverName', txConfig.general.serverName ?? 'txAdmin'],
@@ -41,9 +46,20 @@ export const getMutableConvars = (isCmdLine = false) => {
         ['set', 'hideDefaultWarning', txConfig.gameFeatures.hideDefaultWarning],
         ['set', 'hideDefaultScheduledRestartWarning', txConfig.gameFeatures.hideDefaultScheduledRestartWarning],
 
+        //Server variables
+        ['sets', 'sv_appearAllowlisted', appearAllowlisted],
+
         // //NOTE: no auto update, maybe we shouldn't tie core and server verbosity anyways
         // ['setr', 'verbose', console.isVerbose],
     ];
+
+    if (appearAllowlisted && txConfig.whitelist.rejectionMessage) {
+        const instructions = isCmdLine
+            ? txConfig.whitelist.rejectionMessage.replaceAll('\n', '\\n')
+            : txConfig.whitelist.rejectionMessage;
+        convars.push(['sets', 'sv_allowlistInstructions', instructions]);
+    }
+
     return convars.map((c) => polishConvarSetTuple(c, isCmdLine));
 };
 
@@ -53,7 +69,7 @@ type ConvarSetTuple = [setter: string, name: string, value: string];
 const polishConvarSetTuple = ([setter, name, value]: RawConvarSetTuple, isCmdLine = false): ConvarSetTuple => {
     return [
         isCmdLine ? `+${setter}` : setter,
-        'txAdmin-' + name,
+        name.startsWith('sv_') ? name : 'txAdmin-' + name,
         value.toString(),
     ];
 }
@@ -63,6 +79,7 @@ export const mutableConvarConfigDependencies = [
     'gameFeatures.*',
     'banlist.enabled',
     'whitelist.mode',
+    'whitelist.rejectionMessage',
 ];
 
 
diff --git a/core/modules/Logger/FXServerLogger/ConsoleTransformer.ts b/core/modules/Logger/FXServerLogger/ConsoleTransformer.ts
index 188e92227..8672ee97d 100644
--- a/core/modules/Logger/FXServerLogger/ConsoleTransformer.ts
+++ b/core/modules/Logger/FXServerLogger/ConsoleTransformer.ts
@@ -25,8 +25,8 @@ type StyleChannelConfig = {
 
 //Precalculating some styles
 const chalkToStr = (color: ChalkInstance) => color('\x00').split('\x00')[0];
-const precalcMarkerAdminCmd = chalkToStr(chalk.bgHex('#e6b863').black);
-const precalcMarkerSystemCmd = chalkToStr(chalk.bgHex('#36383D').hex('#CCCCCC'));
+const precalcMarkerAdminCmd = chalkToStr(chalk.bgAnsi256(180).black);
+const precalcMarkerSystemCmd = chalkToStr(chalk.bgAnsi256(237).ansi256(252));
 const precalcMarkerInfo = chalkToStr(chalk.bgBlueBright.black);
 const ANSI_RESET = '\x1B[0m';
 const ANSI_ERASE_LINE = '\x1b[K';
diff --git a/core/modules/Logger/FXServerLogger/index.ts b/core/modules/Logger/FXServerLogger/index.ts
index eeed9b9fb..bf13276dd 100644
--- a/core/modules/Logger/FXServerLogger/index.ts
+++ b/core/modules/Logger/FXServerLogger/index.ts
@@ -53,7 +53,10 @@ export default class FXServerLogger extends LoggerBase {
      * Returns a string with short usage stats
      */
     getUsageStats() {
-        return `Buffer: ${bytes(this.recentBuffer.length)}, lrErrors: ${this.lrErrors}`;
+        return {
+            buffer: bytes(this.recentBuffer.length)!,
+            lrErrors: this.lrErrors,
+        };
     }
 
 
diff --git a/core/modules/Logger/LoggerBase.ts b/core/modules/Logger/LoggerBase.ts
index b70f100bc..de594b6a1 100644
--- a/core/modules/Logger/LoggerBase.ts
+++ b/core/modules/Logger/LoggerBase.ts
@@ -17,7 +17,7 @@ export class LoggerBase {
     lrStream: rfs.RotatingFileStream;
     lrErrors = 0;
     public activeFilePath: string;
-    private lrLastError: string | undefined;
+    public lrLastError: string | undefined;
     private basePath: string;
     private logNameRegex: RegExp;
 
diff --git a/core/modules/Logger/handlers/admin.js b/core/modules/Logger/handlers/admin.js
index 0c52975ef..00fc477d8 100644
--- a/core/modules/Logger/handlers/admin.js
+++ b/core/modules/Logger/handlers/admin.js
@@ -28,7 +28,10 @@ export default class AdminLogger extends LoggerBase {
      * Returns a string with short usage stats
      */
     getUsageStats() {
-        return `Writes: ${this.writeCounter}, lrErrors: ${this.lrErrors}`;
+        return {
+            writes: this.writeCounter,
+            lrErrors: this.lrErrors,
+        };
     }
 
     /**
@@ -65,12 +68,13 @@ export default class AdminLogger extends LoggerBase {
      */
     write(author, action, type = 'default') {
         let saveMsg;
+        const prefix = `[${author}]`;
         if (type === 'command') {
-            saveMsg = `[${author}] executed "${action}"`;
-            console.log(`${author} executed ` + chalkInversePad(action));
+            saveMsg = `executed "${action}"`;
+            console.log(prefix, `executed ` + chalkInversePad(action));
         } else {
             saveMsg = action;
-            console.log(saveMsg);
+            console.log(prefix, saveMsg);
         }
         this.writeSystem(author, saveMsg);
     }
diff --git a/core/modules/Logger/handlers/server.js b/core/modules/Logger/handlers/server.js
index 2d29b1c79..a1c6576f0 100644
--- a/core/modules/Logger/handlers/server.js
+++ b/core/modules/Logger/handlers/server.js
@@ -94,17 +94,22 @@ export default class ServerLogger extends LoggerBase {
             ? `${bytes(bufferJsonSizeRes.bytesPerElement)}/e`
             : 'LowCount';
 
-        return `Buffer: ${this.recentBuffer.length},  lrErrors: ${this.lrErrors}, mem: ${bufferJsonSizeStr}, rate: ${eventsPerMinStr}`;
+        return {
+            buffer: this.recentBuffer.length,
+            lrErrors: this.lrErrors,
+            mem: bufferJsonSizeStr,
+            rate: eventsPerMinStr,
+        };
     }
 
 
     /***
      * Returns the recent fxserver buffer containing HTML markers, and not XSS escaped.
      * The size of this buffer is usually above 64kb, never above 128kb.
-     * @param {Number} lastN
+     * @param {number|undefined} lastN
      * @returns the recent buffer, optionally only the last N elements
      */
-    getRecentBuffer(lastN) {
+    getRecentBuffer(lastN = undefined) {
         return (lastN) ? this.recentBuffer.slice(-lastN) : this.recentBuffer;
     }
 
diff --git a/core/modules/Logger/loggerUtils.ts b/core/modules/Logger/loggerUtils.ts
index a0c399af8..7a18aca4e 100644
--- a/core/modules/Logger/loggerUtils.ts
+++ b/core/modules/Logger/loggerUtils.ts
@@ -26,14 +26,15 @@ export const getLogSizes = async (basePath: string, filterRegex: RegExp) => {
     const fileStatsArray = fileStatsSizes.map((op, index) => {
         if (op.status === 'fulfilled') {
             totalBytes += op.value.size;
-            return [statNames[index], bytes(op.value.size)];
+            return [statNames[index], bytes(op.value.size)!];
         } else {
             return [statNames[index], false];
         }
-    });
+    }) as [filename: string, size: string | false][];
     return {
-        total: bytes(totalBytes),
-        files: Object.fromEntries(fileStatsArray),
+        totalBytes: bytes(totalBytes)!,
+        fileCount: statNames.length,
+        // files: Object.fromEntries(fileStatsArray), //FIXME: unused
     };
 };
 
diff --git a/core/modules/Metrics/statsUtils.ts b/core/modules/Metrics/statsUtils.ts
index 9cc6cfdad..f011a0c3c 100644
--- a/core/modules/Metrics/statsUtils.ts
+++ b/core/modules/Metrics/statsUtils.ts
@@ -145,20 +145,25 @@ export class QuantileArray {
     /**
      * Processes the cache and returns the count and quantiles, if enough data.
      */
-    result(): QuantileArrayOutput {
+    result(round = false): QuantileArrayOutput {
         if (this.#cache.size < this.#minSize) {
             return {
                 enoughData: false,
             }
         } else {
+            const p5 = d3array.quantile(this.#cache.values(), 0.05)!;
+            const p25 = d3array.quantile(this.#cache.values(), 0.25)!;
+            const p50 = d3array.quantile(this.#cache.values(), 0.50)!;
+            const p75 = d3array.quantile(this.#cache.values(), 0.75)!;
+            const p95 = d3array.quantile(this.#cache.values(), 0.95)!;
             return {
                 enoughData: true,
                 count: this.#cache.size,
-                p5: d3array.quantile(this.#cache.values(), 0.05)!,
-                p25: d3array.quantile(this.#cache.values(), 0.25)!,
-                p50: d3array.quantile(this.#cache.values(), 0.50)!,
-                p75: d3array.quantile(this.#cache.values(), 0.75)!,
-                p95: d3array.quantile(this.#cache.values(), 0.95)!,
+                p5: round ? Math.round(p5) : p5,
+                p25: round ? Math.round(p25) : p25,
+                p50: round ? Math.round(p50) : p50,
+                p75: round ? Math.round(p75) : p75,
+                p95: round ? Math.round(p95) : p95,
             };
         }
     }
@@ -185,11 +190,11 @@ export class QuantileArray {
     }
 
     toJSON() {
-        return this.result();
+        return this.result(false);
     }
 
     [inspect.custom]() {
-        return this.result();
+        return this.result(true);
     }
 }
 type QuantileArrayOutput = {
@@ -201,8 +206,9 @@ type QuantileArrayOutput = {
     p75: number;
     p95: number;
 } | {
+    //if less than min size
     enoughData: false;
-}; //if less than min size
+};
 
 type QuantileArraySummary = QuantileArrayOutput & {
     summary: string,
@@ -255,7 +261,7 @@ export const estimateArrayJsonSize = (srcArray: any[], minLength: number): JsonE
     if (srcArray.length <= minLength) {
         return { enoughData: false };
     }
-    
+
     // Determine a reasonable sample size:
     // - At least 100 elements
     // - Up to 10% of the buffer length
diff --git a/core/modules/Metrics/svRuntime/index.ts b/core/modules/Metrics/svRuntime/index.ts
index 952957fc8..0d1e69f5f 100644
--- a/core/modules/Metrics/svRuntime/index.ts
+++ b/core/modules/Metrics/svRuntime/index.ts
@@ -373,7 +373,7 @@ export default class SvRuntimeMetrics {
             }
         }
 
-        //Checking if at least 12h of data
+        //Checking if at least 36 snapshots (3h of data) in the last 6h
         if (totalSnapshots < minSnapshots) {
             return null; //not enough data for meaningful analysis
         }
diff --git a/core/modules/WebServer/authLogic.ts b/core/modules/WebServer/authLogic.ts
index 36c11ff9c..4ef36ac03 100644
--- a/core/modules/WebServer/authLogic.ts
+++ b/core/modules/WebServer/authLogic.ts
@@ -227,6 +227,15 @@ export const nuiAuthLogic = (
             return failResp('Invalid Request: source');
         }
 
+        // DEBUG
+        // throw new Error('make sure you know what you are doing');
+        // return successResp(new AuthedAdmin({
+        //     name: 'tempadmin',
+        //     master: true,
+        //     permissions: ['all_permissions'],
+        //     password_temporary: false,
+        // }), undefined);
+
         // Check missing headers
         if (typeof reqHeader['x-txadmin-token'] !== 'string') {
             return failResp('Invalid Request: token header');
diff --git a/core/modules/WebServer/getReactIndex.ts b/core/modules/WebServer/getReactIndex.ts
index 496285185..7e65e175e 100644
--- a/core/modules/WebServer/getReactIndex.ts
+++ b/core/modules/WebServer/getReactIndex.ts
@@ -8,6 +8,13 @@ import consts from "@shared/consts";
 import consoleFactory from '@lib/console';
 import { AuthedAdminType, checkRequestAuth } from "./authLogic";
 import { isString } from "@modules/CacheStore";
+import {
+    escapeHtmlAttribute,
+    escapeHtmlRawText,
+    sanitizeClassToken,
+    sanitizeCssVarName,
+    sanitizeCssVarValue,
+} from "@lib/htmlRenderSafety";
 const console = consoleFactory(modulename);
 
 // NOTE: it's not possible to remove the hardcoded import of the entry point in the index.html file
@@ -121,7 +128,6 @@ export default async function getReactIndex(ctx: CtxWithVars | AuthedCtx) {
         hasMasterAccount: txCore.adminStore.hasAdmins(true),
         defaultTheme: tmpDefaultTheme,
         customThemes: tmpCustomThemes.map(({ name, isDark }) => ({ name, isDark })),
-        adsData: txEnv.adsData,
         providerLogo: txHostConfig.providerLogo,
         providerName: txHostConfig.providerName,
         hostConfigSource: txHostConfig.sourceName,
@@ -139,44 +145,48 @@ export default async function getReactIndex(ctx: CtxWithVars | AuthedCtx) {
 
     //Prepare placeholders
     const replacers: { [key: string]: string } = {};
-    replacers.basePath = `<base href="${basePath}">`;
-    replacers.ogTitle = `txAdmin - ${txConfig.general.serverName}`;
-    replacers.ogDescripttion = `Manage & Monitor your FiveM/RedM Server with txAdmin v${txEnv.txaVersion} atop FXServer ${txEnv.fxsVersion}`;
-    replacers.txConstsInjection = `<script>window.txConsts = ${JSON.stringify(injectedConsts)};</script>`;
+    replacers.basePath = `<base href="${escapeHtmlAttribute(basePath)}">`;
+    replacers.ogTitle = escapeHtmlAttribute(`txAdmin - ${txConfig.general.serverName}`);
+    replacers.ogDescripttion = escapeHtmlAttribute(`Manage & Monitor your FiveM/RedM Server with txAdmin v${txEnv.txaVersion} atop FXServer ${txEnv.fxsVersion}`);
+    replacers.txConstsInjection = `<script>window.txConsts = ${escapeHtmlRawText(JSON.stringify(injectedConsts))};</script>`;
     replacers.devModules = txDevEnv.ENABLED ? devModulesScript : '';
 
     //Prepare custom themes style tag
+    replacers.customThemesStyle = '';
     if (tmpCustomThemes.length) {
         const cssThemes = [];
         for (const theme of tmpCustomThemes) {
             const cssVars = [];
+            const safeThemeName = sanitizeClassToken(theme.name);
+            if (!safeThemeName) continue;
             for (const [name, value] of Object.entries(theme.style)) {
-                cssVars.push(`--${name}: ${value};`);
+                const safeName = sanitizeCssVarName(name);
+                const safeValue = sanitizeCssVarValue(value);
+                if (!safeName || !safeValue) continue;
+                cssVars.push(`--${safeName}: ${safeValue};`);
             }
-            cssThemes.push(`.theme-${theme.name} { ${cssVars.join(' ')} }`);
+            cssThemes.push(`.theme-${safeThemeName} { ${cssVars.join(' ')} }`);
         }
-        replacers.customThemesStyle = `<style>${cssThemes.join('\n')}</style>`;
-    } else {
-        replacers.customThemesStyle = '';
+        replacers.customThemesStyle = `<style>${escapeHtmlRawText(cssThemes.join('\n'))}</style>`;
     }
 
     //Setting the theme class from the cookie
-    const themeCookie = ctx.cookies.get('txAdmin-theme');
+    let htmlClasses = tmpDefaultTheme;
+    const themeCookie = ctx.cookies.get(consts.cookies.theme);
     if (themeCookie) {
         if (tmpDefaultThemes.includes(themeCookie)) {
-            replacers.htmlClasses = themeCookie;
+            htmlClasses = themeCookie;
         } else {
             const selectedCustomTheme = tmpCustomThemes.find((theme) => theme.name === themeCookie);
             if (!selectedCustomTheme) {
-                replacers.htmlClasses = tmpDefaultTheme;
+                htmlClasses = tmpDefaultTheme;
             } else {
                 const lightDarkSelector = selectedCustomTheme.isDark ? 'dark' : 'light';
-                replacers.htmlClasses = `${lightDarkSelector} theme-${selectedCustomTheme.name}`;
+                htmlClasses = `${lightDarkSelector} theme-${selectedCustomTheme.name}`;
             }
         }
-    } else {
-        replacers.htmlClasses = tmpDefaultTheme;
     }
+    replacers.htmlClasses = escapeHtmlAttribute(htmlClasses);
 
     //Replace
     let htmlOut = htmlFile;
@@ -189,8 +199,7 @@ export default async function getReactIndex(ctx: CtxWithVars | AuthedCtx) {
     //This is required because of how badly the WebPipe handles "large" files
     if (!txDevEnv.ENABLED) {
         const base = ctx.txVars.isWebInterface ? `./` : `nui://monitor/panel/`;
-        htmlOut = htmlOut.replace(/src="\.\/index-(\w+(?:\.v\d+)?)\.js"/, `src="${base}index-$1.js"`);
-        htmlOut = htmlOut.replace(/href="\.\/index-(\w+(?:\.v\d+)?)\.css"/, `href="${base}index-$1.css"`);
+        htmlOut = htmlOut.replaceAll(/(src|href)="\.\/(\w+)-(\w+(?:\.v\d+)?)\.(js|css)"/g, `$1="${base}$2-$3.$4"`);
     }
 
     return htmlOut;
diff --git a/core/modules/WebServer/index.ts b/core/modules/WebServer/index.ts
index df4d1f0a1..c25f31350 100644
--- a/core/modules/WebServer/index.ts
+++ b/core/modules/WebServer/index.ts
@@ -27,6 +27,7 @@ import fatalError from '@lib/fatalError';
 import { isProxy } from 'node:util/types';
 import serveStaticMw from './middlewares/serveStaticMw';
 import serveRuntimeMw from './middlewares/serveRuntimeMw';
+import consts from '@shared/consts';
 const console = consoleFactory(modulename);
 const nanoid = customAlphabet(dict49, 32);
 
@@ -54,8 +55,9 @@ export default class WebServer {
         //Generate cookie key & luaComToken
         const pathHash = crypto.createHash('shake256', { outputLength: 6 })
             .update(txEnv.profilePath)
-            .digest('hex');
-        this.sessionCookieName = `tx:${pathHash}`;
+            .digest('hex')
+            .padStart(12, '0');
+        this.sessionCookieName = `${consts.cookies.session}:${pathHash}`;
         this.luaComToken = nanoid();
 
 
@@ -63,7 +65,6 @@ export default class WebServer {
         // Setting up Koa
         // ===================
         this.app = new Koa();
-        this.app.keys = ['txAdmin' + nanoid()];
 
         // Some people might want to enable it, but we are not guaranteeing XFF security
         // due to the many possible ways you can connect to koa.
diff --git a/core/modules/WebServer/middlewares/ctxUtilsMw.ts b/core/modules/WebServer/middlewares/ctxUtilsMw.ts
index ab97cf166..c7963ca58 100644
--- a/core/modules/WebServer/middlewares/ctxUtilsMw.ts
+++ b/core/modules/WebServer/middlewares/ctxUtilsMw.ts
@@ -2,7 +2,7 @@ const modulename = 'WebCtxUtils';
 import path from 'node:path';
 import fsp from 'node:fs/promises';
 import ejs from 'ejs';
-import xssInstancer from '@lib/xss.js';
+import { escapeHtmlAttribute, escapeHtmlContent, escapeHtmlRawText, sanitizeSimpleHtml } from '@lib/htmlRenderSafety';
 import { txDevEnv, txEnv, txHostConfig } from '@core/globalData';
 import consoleFactory from '@lib/console';
 import getReactIndex, { tmpCustomThemes } from '../getReactIndex';
@@ -18,6 +18,7 @@ export type CtxTxUtils = {
     send: <T = string | object>(data: T) => void;
     utils: {
         render: (view: string, data?: { headerTitle?: string, [key: string]: any }) => Promise<void>;
+        renderMessage: (message: string, options?: { headerTitle?: string; }) => Promise<void>;
         error: (httpStatus?: number, message?: string) => void;
         serveReactIndex: () => Promise<void>;
         legacyNavigateToPage: (href: string) => void;
@@ -25,7 +26,6 @@ export type CtxTxUtils = {
 }
 
 //Helper functions
-const xss = xssInstancer();
 const getRenderErrorText = (view: string, error: Error, data: any) => {
     console.error(`Error rendering ${view}.`);
     console.verbose.dir(error);
@@ -33,10 +33,10 @@ const getRenderErrorText = (view: string, error: Error, data: any) => {
     return [
         '<pre style="color: red">',
         `Error rendering '${view}'.`,
-        `Message: ${xss(error.message)}`,
+        `Message: ${escapeHtmlContent(error.message)}`,
         'The data provided was:',
         '================',
-        xss(JSON.stringify(data, null, 2)),
+        escapeHtmlContent(JSON.stringify(data, null, 2)),
         '</pre>',
     ].join('\n');
 };
@@ -46,7 +46,7 @@ const getWebViewPath = (view: string) => {
 };
 const getJavascriptConsts = (allConsts: NonNullable<object> = {}) => {
     return Object.entries(allConsts)
-        .map(([name, val]) => `const ${name} = ${JSON.stringify(val)};`)
+        .map(([name, val]) => `const ${name} = ${escapeHtmlRawText(JSON.stringify(val))};`)
         .join(' ');
 };
 function getEjsOptions(filePath: string) {
@@ -88,7 +88,7 @@ body {
         Redirecting to <a href="{{href}}" target="_parent">{{href}}</a>...
     </p>
 <script>
-    // Notify parent window that auth failed
+    // Notify parent window
     window.parent.postMessage({ type: 'navigateToPage', href: '{{href}}'});
     // If parent redirect didn't work, redirect here
     setTimeout(function() {
@@ -155,13 +155,13 @@ export default async function ctxUtilsMw(ctx: CtxWithVars, next: Next) {
     const isWebInterface = ctx.txVars.isWebInterface;
 
     //Functions
-    const renderUtil = async (view: string, data?: { headerTitle?: string, [key: string]: any }) => {
+    const renderUtil: CtxTxUtils['utils']['render'] = async (view, data) => {
         //Typescript is very annoying 
         const possiblyAuthedAdmin = ctx.admin as AuthedAdminType | undefined;
 
         //Setting up legacy theme
         let legacyTheme = '';
-        const themeCookie = ctx.cookies.get('txAdmin-theme');
+        const themeCookie = ctx.cookies.get(consts.cookies.theme);
         if (!themeCookie || themeCookie === 'dark' || !isWebInterface) {
             legacyTheme = 'theme--dark';
         } else {
@@ -187,6 +187,10 @@ export default async function ctxUtilsMw(ctx: CtxWithVars, next: Next) {
                 TX_BASE_PATH: (isWebInterface) ? '' : consts.nuiWebpipePath,
                 PAGE_TITLE: data?.headerTitle ?? 'txAdmin',
             }),
+
+            //Escaping utilities
+            escapeHtmlAttribute,
+            escapeHtmlRawText,
         };
 
         const renderData = Object.assign(baseViewData, data);
@@ -194,7 +198,14 @@ export default async function ctxUtilsMw(ctx: CtxWithVars, next: Next) {
         ctx.type = 'text/html';
     };
 
-    const errorUtil = (httpStatus = 500, message = 'unknown error') => {
+    const renderMessageUtil: CtxTxUtils['utils']['renderMessage'] = async (message, options) => {
+        return renderUtil('main/message', {
+            headerTitle: options?.headerTitle,
+            messageHtml: sanitizeSimpleHtml(message),
+        });
+    };
+
+    const errorUtil: CtxTxUtils['utils']['error'] = (httpStatus = 500, message = 'unknown error') => {
         ctx.status = httpStatus;
         ctx.body = {
             status: 'error',
@@ -205,12 +216,15 @@ export default async function ctxUtilsMw(ctx: CtxWithVars, next: Next) {
 
     //Legacy page util to navigate parent (react) to some page
     //NOTE: in use by deployer/stepper.js and setup/get.js
-    const legacyNavigateToPage = (href: string) => {
+    const legacyNavigateToPage: CtxTxUtils['utils']['legacyNavigateToPage'] = (href) => {
+        if (!/^\/[\w\-\/]*$/.test(href)) {
+            throw new Error(`legacyNavigateToPage: invalid href: ${href}`);
+        }
         ctx.body = legacyNavigateHtmlTemplate.replace(/{{href}}/g, href);
         ctx.type = 'text/html';
     }
 
-    const serveReactIndex = async () => {
+    const serveReactIndex: CtxTxUtils['utils']['serveReactIndex'] = async () => {
         ctx.body = await getReactIndex(ctx);
         ctx.type = 'text/html';
     };
@@ -218,6 +232,7 @@ export default async function ctxUtilsMw(ctx: CtxWithVars, next: Next) {
     //Injecting utils and forwarding
     ctx.utils = {
         render: renderUtil,
+        renderMessage: renderMessageUtil,
         error: errorUtil,
         serveReactIndex,
         legacyNavigateToPage,
diff --git a/core/modules/WebServer/middlewares/globalRateLimiter.ts b/core/modules/WebServer/middlewares/globalRateLimiter.ts
index 05d8f95d9..fed4f91ab 100644
--- a/core/modules/WebServer/middlewares/globalRateLimiter.ts
+++ b/core/modules/WebServer/middlewares/globalRateLimiter.ts
@@ -19,7 +19,7 @@ const MAX_RPM_UNDER_ATTACK = 2500;
 const DDOS_COOLDOWN_MINUTES = 15;
 
 //Vars
-const bannedIps = new Set<string>();
+const bannedIps = new Set<string>(); //way faster than net.BlockList
 const reqsPerIp = new Map<string, number>();
 let httpRequestsCounter = 0;
 let bansPendingWarn: string[] = [];
diff --git a/core/modules/WebServer/router.ts b/core/modules/WebServer/router.ts
index 7d8d3c1d7..4556e9782 100644
--- a/core/modules/WebServer/router.ts
+++ b/core/modules/WebServer/router.ts
@@ -28,13 +28,12 @@ export default () => {
 
     //Rendered Pages
     router.get('/legacy/adminManager', webAuthMw, routes.adminManager_page);
-    router.get('/legacy/advanced', webAuthMw, routes.advanced_page);
     router.get('/legacy/cfgEditor', webAuthMw, routes.cfgEditor_page);
-    router.get('/legacy/diagnostics', webAuthMw, routes.diagnostics_page);
     router.get('/legacy/masterActions', webAuthMw, routes.masterActions_page);
     router.get('/legacy/resources', webAuthMw, routes.resources);
     router.get('/legacy/serverLog', webAuthMw, routes.serverLog);
-    router.get('/legacy/whitelist', webAuthMw, routes.whitelist_page);
+    // FIXME:NEXT:UPDATE rename route handler
+    router.get('/legacy/allowlist', webAuthMw, routes.whitelist_page);
     router.get('/legacy/setup', webAuthMw, routes.setup_get);
     router.get('/legacy/deployer', webAuthMw, routes.deployer_stepper);
 
@@ -82,8 +81,9 @@ export default () => {
     router.post('/intercom/:scope', intercomAuthMw, routes.intercom);
 
     //Diagnostic routes
+    router.get('/diagnostics/getDiagnostics', apiAuthMw, routes.diagnostics_getDiagnostics);
     router.post('/diagnostics/sendReport', apiAuthMw, routes.diagnostics_sendReport);
-    router.post('/advanced', apiAuthMw, routes.advanced_actions);
+    router.post('/advanced/run', apiAuthMw, routes.advanced_runCommand);
 
     //Data routes
     router.get('/serverLog/partial', apiAuthMw, routes.serverLogPartial);
diff --git a/core/modules/WebServer/wsRooms/serverlog.ts b/core/modules/WebServer/wsRooms/serverlog.ts
index bb1c73ecd..718bda77c 100644
--- a/core/modules/WebServer/wsRooms/serverlog.ts
+++ b/core/modules/WebServer/wsRooms/serverlog.ts
@@ -4,7 +4,7 @@ import type { RoomType } from "../webSocket";
  * The console room is responsible for the server log page
  */
 export default {
-    permission: true, //everyone can see it
+    permission: 'server.log.view',
     eventName: 'logData',
     cumulativeBuffer: true,
     outBuffer: [],
diff --git a/core/routes/adminManager/actions.ts b/core/routes/adminManager/actions.ts
index 2b5ce95b1..e765622b9 100644
--- a/core/routes/adminManager/actions.ts
+++ b/core/routes/adminManager/actions.ts
@@ -14,7 +14,7 @@ const nameRegexDesc = 'up to 20 characters containing only letters, numbers and
 const cfxHttpReqOptions = {
     timeout: { request: 6000 },
 };
-type ProviderDataType = {id: string, identifier: string};
+type ProviderDataType = { id: string, identifier: string };
 
 /**
  * Returns the output page containing the admins.
@@ -76,18 +76,18 @@ async function handleAdd(ctx: AuthedCtx) {
 
     //Validate name
     if (!consts.regexValidFivemUsername.test(name)) {
-        return ctx.send({type: 'danger', markdown: true, message: `**Invalid username, it must follow the rule:**\n${nameRegexDesc}`});
+        return ctx.send({ type: 'danger', markdown: true, message: `**Invalid username, it must follow the rule:**\n${nameRegexDesc}` });
     }
 
     //Validate & translate FiveM ID
-    let citizenfxData: ProviderDataType | undefined;
+    let citizenfxData: ProviderDataType | false = false;
     if (citizenfxID.length) {
         try {
             if (consts.validIdentifiers.fivem.test(citizenfxID)) {
                 const id = citizenfxID.split(':')[1];
                 const res = await got(`https://policy-live.fivem.net/api/getUserInfo/${id}`, cfxHttpReqOptions).json<any>();
                 if (!res.username || !res.username.length) {
-                    return ctx.send({type: 'danger', message: 'Invalid CitizenFX ID1'});
+                    return ctx.send({ type: 'danger', message: 'Invalid CitizenFX ID1' });
                 }
                 citizenfxData = {
                     id: res.username,
@@ -96,14 +96,14 @@ async function handleAdd(ctx: AuthedCtx) {
             } else if (consts.regexValidFivemUsername.test(citizenfxID)) {
                 const res = await got(`https://forum.cfx.re/u/${citizenfxID}.json`, cfxHttpReqOptions).json<any>();
                 if (!res.user || typeof res.user.id !== 'number') {
-                    return ctx.send({type: 'danger', message: 'Invalid CitizenFX ID2'});
+                    return ctx.send({ type: 'danger', message: 'Invalid CitizenFX ID2' });
                 }
                 citizenfxData = {
                     id: citizenfxID,
                     identifier: `fivem:${res.user.id}`,
                 };
             } else {
-                return ctx.send({type: 'danger', message: 'Invalid CitizenFX ID3'});
+                return ctx.send({ type: 'danger', message: 'Invalid CitizenFX ID3' });
             }
         } catch (error) {
             console.error(`Failed to resolve CitizenFX ID to game identifier with error: ${(error as Error).message}`);
@@ -111,10 +111,10 @@ async function handleAdd(ctx: AuthedCtx) {
     }
 
     //Validate Discord ID
-    let discordData: ProviderDataType | undefined;
+    let discordData: ProviderDataType | false = false;
     if (discordID.length) {
         if (!consts.validIdentifierParts.discord.test(discordID)) {
-            return ctx.send({type: 'danger', message: 'Invalid Discord ID'});
+            return ctx.send({ type: 'danger', message: 'Invalid Discord ID' });
         }
         discordData = {
             id: discordID,
@@ -133,13 +133,20 @@ async function handleAdd(ctx: AuthedCtx) {
         }
     }
 
+    //List changes
+    const changes = {
+        cfxId: citizenfxData ? citizenfxData.identifier : undefined,
+        discordId: discordData ? discordData.identifier : undefined,
+        permissions: permissions,
+    };
+
     //Add admin and give output
     try {
         await txCore.adminStore.addAdmin(name, citizenfxData, discordData, password, permissions);
-        ctx.admin.logAction(`Adding user '${name}'.`);
-        return ctx.send({type: 'showPassword', password});
+        ctx.admin.logAction(`Adding user '${name}' with ${JSON.stringify(changes)}`);
+        return ctx.send({ type: 'showPassword', password });
     } catch (error) {
-        return ctx.send({type: 'danger', message: (error as Error).message});
+        return ctx.send({ type: 'danger', message: (error as Error).message });
     }
 }
 
@@ -165,27 +172,27 @@ async function handleEdit(ctx: AuthedCtx) {
 
     //Check if editing himself
     if (ctx.admin.name.toLowerCase() === name.toLowerCase()) {
-        return ctx.send({type: 'danger', message: '(ERR0) You cannot edit yourself.'});
+        return ctx.send({ type: 'danger', message: '(ERR0) You cannot edit yourself.' });
     }
 
     //Validate & translate permissions
-    let permissions;
+    let permissions: string[] = [];
     if (Array.isArray(ctx.request.body.permissions)) {
         permissions = ctx.request.body.permissions.filter((x: unknown) => typeof x === 'string');
-        if (permissions.includes('all_permissions')) permissions = ['all_permissions'];
-    } else {
-        permissions = [];
+        if (permissions.includes('all_permissions')) {
+            permissions = ['all_permissions'];
+        }
     }
 
     //Validate & translate FiveM ID
-    let citizenfxData: ProviderDataType | undefined;
+    let citizenfxData: ProviderDataType | false = false;
     if (citizenfxID.length) {
         try {
             if (consts.validIdentifiers.fivem.test(citizenfxID)) {
                 const id = citizenfxID.split(':')[1];
                 const res = await got(`https://policy-live.fivem.net/api/getUserInfo/${id}`, cfxHttpReqOptions).json<any>();
                 if (!res.username || !res.username.length) {
-                    return ctx.send({type: 'danger', message: '(ERR1) Invalid CitizenFX ID'});
+                    return ctx.send({ type: 'danger', message: '(ERR1) Invalid CitizenFX ID' });
                 }
                 citizenfxData = {
                     id: res.username,
@@ -194,14 +201,14 @@ async function handleEdit(ctx: AuthedCtx) {
             } else if (consts.regexValidFivemUsername.test(citizenfxID)) {
                 const res = await got(`https://forum.cfx.re/u/${citizenfxID}.json`, cfxHttpReqOptions).json<any>();
                 if (!res.user || typeof res.user.id !== 'number') {
-                    return ctx.send({type: 'danger', message: '(ERR2) Invalid CitizenFX ID'});
+                    return ctx.send({ type: 'danger', message: '(ERR2) Invalid CitizenFX ID' });
                 }
                 citizenfxData = {
                     id: citizenfxID,
                     identifier: `fivem:${res.user.id}`,
                 };
             } else {
-                return ctx.send({type: 'danger', message: '(ERR3) Invalid CitizenFX ID'});
+                return ctx.send({ type: 'danger', message: '(ERR3) Invalid CitizenFX ID' });
             }
         } catch (error) {
             console.error(`Failed to resolve CitizenFX ID to game identifier with error: ${(error as Error).message}`);
@@ -210,10 +217,10 @@ async function handleEdit(ctx: AuthedCtx) {
 
     //Validate Discord ID
     //FIXME: you cannot remove a discord id by erasing from the field
-    let discordData: ProviderDataType | undefined;
+    let discordData: ProviderDataType | false = false;
     if (discordID.length) {
         if (!consts.validIdentifierParts.discord.test(discordID)) {
-            return ctx.send({type: 'danger', message: 'Invalid Discord ID'});
+            return ctx.send({ type: 'danger', message: 'Invalid Discord ID' });
         }
         discordData = {
             id: discordID,
@@ -223,11 +230,11 @@ async function handleEdit(ctx: AuthedCtx) {
 
     //Check if admin exists
     const admin = txCore.adminStore.getAdminByName(name);
-    if (!admin) return ctx.send({type: 'danger', message: 'Admin not found.'});
+    if (!admin) return ctx.send({ type: 'danger', message: 'Admin not found.' });
 
     //Check if editing an master admin
     if (!ctx.admin.isMaster && admin.master) {
-        return ctx.send({type: 'danger', message: 'You cannot edit an admin master.'});
+        return ctx.send({ type: 'danger', message: 'You cannot edit an admin master.' });
     }
 
     //Check for privilege escalation
@@ -241,13 +248,50 @@ async function handleEdit(ctx: AuthedCtx) {
         }
     }
 
+    //List changes
+    const permsAdded = permissions.filter((x: string) => !admin.permissions.includes(x));
+    const permsRemoved = admin.permissions.filter((x: string) => !permissions.includes(x));
+    const changes: string[] = [];
+    if (permsAdded.includes('all_permissions')) {
+        changes.push('Added all permissions.');
+    } else {
+        if (permsAdded.length) {
+            changes.push(`Added permissions: ${JSON.stringify(permsAdded)}.`);
+        }
+        if (permsRemoved.length) {
+            changes.push(`Removed permissions: ${JSON.stringify(permsRemoved)}.`);
+        }
+    }
+    const prevCfxId = admin.providers?.citizenfx?.identifier;
+    if (!prevCfxId && citizenfxData) {
+        changes.push(`Added Cfx.re ID: ${citizenfxData.identifier}.`);
+    } else if (prevCfxId && !citizenfxData) {
+        changes.push(`Removed Cfx.re ID: ${prevCfxId}.`);
+    } else if (prevCfxId && citizenfxData && prevCfxId !== citizenfxData.identifier) {
+        changes.push(`Changed Cfx.re ID from ${prevCfxId} to ${citizenfxData.identifier}.`);
+    }
+    const prevDiscordId = admin.providers?.discord?.identifier;
+    if (!prevDiscordId && discordData) {
+        changes.push(`Added Discord ID: ${discordData.identifier}.`);
+    } else if (prevDiscordId && !discordData) {
+        changes.push(`Removed Discord ID: ${prevDiscordId}.`);
+    } else if (prevDiscordId && discordData && prevDiscordId !== discordData.identifier) {
+        changes.push(`Changed Discord ID from ${prevDiscordId} to ${discordData.identifier}.`);
+    }
+
     //Add admin and give output
     try {
+        let logMessage = `Editing user '${name}'`;
+        if (changes.length) {
+            logMessage += `: ${changes.join(' ')}`;
+        } else {
+            logMessage += '. No changes were made.';
+        }
         await txCore.adminStore.editAdmin(name, null, citizenfxData, discordData, permissions);
-        ctx.admin.logAction(`Editing user '${name}'.`);
-        return ctx.send({type: 'success', refresh: true});
+        ctx.admin.logAction(logMessage);
+        return ctx.send({ type: 'success', refresh: true });
     } catch (error) {
-        return ctx.send({type: 'danger', message: (error as Error).message});
+        return ctx.send({ type: 'danger', message: (error as Error).message });
     }
 }
 
@@ -264,24 +308,24 @@ async function handleDelete(ctx: AuthedCtx) {
 
     //Check if deleting himself
     if (ctx.admin.name.toLowerCase() === name.toLowerCase()) {
-        return ctx.send({type: 'danger', message: "You can't delete yourself."});
+        return ctx.send({ type: 'danger', message: "You can't delete yourself." });
     }
 
     //Check if admin exists
     const admin = txCore.adminStore.getAdminByName(name);
-    if (!admin) return ctx.send({type: 'danger', message: 'Admin not found.'});
+    if (!admin) return ctx.send({ type: 'danger', message: 'Admin not found.' });
 
     //Check if editing an master admin
     if (admin.master) {
-        return ctx.send({type: 'danger', message: 'You cannot delete an admin master.'});
+        return ctx.send({ type: 'danger', message: 'You cannot delete an admin master.' });
     }
 
     //Delete admin and give output
     try {
         await txCore.adminStore.deleteAdmin(name);
         ctx.admin.logAction(`Deleting user '${name}'.`);
-        return ctx.send({type: 'success', refresh: true});
+        return ctx.send({ type: 'success', refresh: true });
     } catch (error) {
-        return ctx.send({type: 'danger', message: (error as Error).message});
+        return ctx.send({ type: 'danger', message: (error as Error).message });
     }
 }
diff --git a/core/routes/adminManager/page.ts b/core/routes/adminManager/page.ts
index 3648d6453..d9fdea288 100644
--- a/core/routes/adminManager/page.ts
+++ b/core/routes/adminManager/page.ts
@@ -10,7 +10,7 @@ const console = consoleFactory(modulename);
 export default async function AdminManagerPage(ctx: AuthedCtx) {
     //Check permission
     if (!ctx.admin.hasPermission('manage.admins')) {
-        return ctx.utils.render('main/message', {message: 'You don\'t have permission to view this page.'});
+        return ctx.utils.renderMessage('You don\'t have permission to view this page.');
     }
 
     //Prepare admin array
@@ -27,10 +27,18 @@ export default async function AdminManagerPage(ctx: AuthedCtx) {
         }
         const isSelf = ctx.admin.name.toLowerCase() === admin.name.toLowerCase();
 
+        let identifiers: string[] = [];
+        if ('citizenfx' in admin.providers && typeof admin.providers.citizenfx?.identifier === 'string') {
+            identifiers.push(admin.providers.citizenfx.identifier);
+        }
+
+        if ('discord' in admin.providers && typeof admin.providers.discord?.identifier === 'string') {
+            identifiers.push(admin.providers.discord.identifier);
+        }
+
         return {
-            hasCitizenFX: (admin.providers.includes('citizenfx')),
-            hasDiscord: (admin.providers.includes('discord')),
             name: admin.name,
+            identifiers,
             perms: perms,
             isSelf,
             disableEdit: !ctx.admin.isMaster && admin.master,
diff --git a/core/routes/advanced/actions.js b/core/routes/advanced/actions.js
deleted file mode 100644
index 8d3e9fc83..000000000
--- a/core/routes/advanced/actions.js
+++ /dev/null
@@ -1,166 +0,0 @@
-const modulename = 'WebServer:AdvancedActions';
-import v8 from 'node:v8';
-import bytes from 'bytes';
-import got from '@lib/got';
-import consoleFactory from '@lib/console';
-import { SYM_SYSTEM_AUTHOR } from '@lib/symbols';
-const console = consoleFactory(modulename);
-
-//Helper functions
-const isUndefined = (x) => (x === undefined);
-
-
-/**
- * Endpoint for running advanced commands - basically, should not ever be used
- */
-export default async function AdvancedActions(ctx) {
-    //Sanity check
-    if (
-        isUndefined(ctx.request.body.action)
-        || isUndefined(ctx.request.body.parameter)
-    ) {
-        console.warn('Invalid request!');
-        return ctx.send({ type: 'danger', message: '<strong>Invalid request :(</strong>' });
-    }
-    const action = ctx.request.body.action;
-    const parameter = ctx.request.body.parameter;
-
-
-    //Check permissions
-    if (!ctx.admin.testPermission('all_permissions', modulename)) {
-        return ctx.send({
-            type: 'danger',
-            message: 'You don\'t have permission to execute this action.',
-        });
-    }
-
-    //Action: Change Verbosity
-    if (action == 'change_verbosity') {
-        console.setVerbose(parameter == 'true');
-        //temp disabled because the verbosity convar is not being set by this method
-        return ctx.send({ refresh: true });
-    } else if (action == 'perform_magic') {
-        const message = JSON.stringify(txCore.fxPlayerlist.getPlayerList(), null, 2);
-        return ctx.send({ type: 'success', message });
-    } else if (action == 'show_db') {
-        const dbo = txCore.database.getDboRef();
-        console.dir(dbo);
-        return ctx.send({ type: 'success', message: JSON.stringify(dbo, null, 2) });
-    } else if (action == 'show_log') {
-        return ctx.send({ type: 'success', message: JSON.stringify(txCore.logger.server.getRecentBuffer(), null, 2) });
-    } else if (action == 'memory') {
-        let memory;
-        try {
-            const usage = process.memoryUsage();
-            Object.keys(usage).forEach((prop) => {
-                usage[prop] = bytes(usage[prop]);
-            });
-            memory = JSON.stringify(usage, null, 2);
-        } catch (error) {
-            memory = 'error';
-        }
-        return ctx.send({ type: 'success', message: memory });
-    } else if (action == 'freeze') {
-        console.warn('Freezing process for 50 seconds.');
-        Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 50 * 1000);
-    } else if (action == 'updateMutableConvars') {
-        txCore.fxRunner.updateMutableConvars();
-        return ctx.send({ refresh: true });
-    } else if (action == 'reauthLast10Players') {
-        // force refresh the admin status of the last 10 players to join
-        const lastPlayers = txCore.fxPlayerlist.getPlayerList().map((p) => p.netid).slice(-10);
-        txCore.fxRunner.sendEvent('adminsUpdated', lastPlayers);
-        return ctx.send({ type: 'success', message: `refreshed: ${JSON.stringify(lastPlayers)}` });
-    } else if (action == 'getLoggerErrors') {
-        const outData = {
-            admin: txCore.logger.admin.lrLastError,
-            fxserver: txCore.logger.fxserver.lrLastError,
-            server: txCore.logger.server.lrLastError,
-        };
-        return ctx.send({ type: 'success', message: JSON.stringify(outData, null, 2) });
-    } else if (action == 'testSrcAddress') {
-        const url = 'https://api.myip.com';
-        const respDefault = await got(url).json();
-        const respReset = await got(url, { localAddress: undefined }).json();
-        const outData = {
-            url,
-            respDefault,
-            respReset,
-        };
-        return ctx.send({ type: 'success', message: JSON.stringify(outData, null, 2) });
-    } else if (action == 'getProcessEnv') {
-        return ctx.send({ type: 'success', message: JSON.stringify(process.env, null, 2) });
-    } else if (action == 'snap') {
-        setTimeout(() => {
-            // if (Citizen && Citizen.snap) Citizen.snap();
-            const snapFile = v8.writeHeapSnapshot();
-            console.warn(`Heap snapshot written to: ${snapFile}`);
-        }, 50);
-        return ctx.send({ type: 'success', message: 'terminal' });
-    } else if (action === 'gc') {
-        if (typeof global.gc === 'function') {
-            global.gc();
-            return ctx.send({ type: 'success', message: 'done' });
-        } else {
-            return ctx.send({ type: 'danger', message: 'GC is not exposed' });
-        }
-    } else if (action === 'safeEnsureMonitor') {
-        const setCmdResult = txCore.fxRunner.sendCommand(
-            'set',
-            [
-                'txAdmin-luaComToken',
-                txCore.webServer.luaComToken,
-            ],
-            SYM_SYSTEM_AUTHOR
-        );
-        if (!setCmdResult) {
-            return ctx.send({ type: 'danger', message: 'Failed to reset luaComToken.' });
-        }
-        const ensureCmdResult = txCore.fxRunner.sendCommand(
-            'ensure',
-            ['monitor'],
-            SYM_SYSTEM_AUTHOR
-        );
-        if (ensureCmdResult) {
-            return ctx.send({ type: 'success', message: 'done' });
-        } else {
-            return ctx.send({ type: 'danger', message: 'Failed to ensure monitor.' });
-        }
-    } else if (action.startsWith('playerDrop')) {
-        const reason = action.split(' ', 2)[1];
-        const category = txCore.metrics.playerDrop.handlePlayerDrop(reason);
-        return ctx.send({ type: 'success', message: category });
-
-    } else if (action.startsWith('set')) {
-        // set general.language "pt"
-        // set general.language "en"
-        // set server.onesync "on"
-        // set server.onesync "legacy"
-        try {
-            const [_, scopeKey, valueJson] = action.split(' ', 3);
-            if (!scopeKey || !valueJson) throw new Error(`Invalid set command: ${action}`);
-            const [scope, key] = scopeKey.split('.');
-            if (!scope || !key) throw new Error(`Invalid set command: ${action}`);
-            const configUpdate = { [scope]: { [key]: JSON.parse(valueJson) } };
-            const storedKeysChanges = txCore.configStore.saveConfigs(configUpdate, ctx.admin.name);
-            const outParts = [
-                'Keys Updated: ' + JSON.stringify(storedKeysChanges ?? 'not set', null, 2),
-                '-'.repeat(16),
-                'Stored:' + JSON.stringify(txCore.configStore.getStoredConfig(), null, 2),
-            ];
-            return ctx.send({ type: 'success', message: outParts.join('\n') });
-        } catch (error) {
-            return ctx.send({ type: 'danger', message: error.message });
-        }
-
-    } else if (action == 'printFxRunnerChildHistory') {
-        const message = JSON.stringify(txCore.fxRunner.history, null, 2)
-        return ctx.send({ type: 'success', message });
-
-    } else if (action == 'xxxxxx') {
-        return ctx.send({ type: 'success', message: '😀👍' });
-    }
-
-    //Catch all
-    return ctx.send({ type: 'danger', message: '<strong>Unknown action :(</strong>' });
-};
diff --git a/core/routes/advanced/get.js b/core/routes/advanced/get.js
deleted file mode 100644
index 98c53b698..000000000
--- a/core/routes/advanced/get.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const modulename = 'WebServer:AdvancedPage';
-import consoleFactory from '@lib/console';
-const console = consoleFactory(modulename);
-
-
-/**
- * Returns the output page containing the server.cfg
- * @param {object} ctx
- */
-export default async function AdvancedPage(ctx) {
-    //Check permissions
-    if (!ctx.admin.hasPermission('all_permisisons')) {
-        return ctx.utils.render('main/message', {message: 'You don\'t have permission to view this page.'});
-    }
-
-    return ctx.utils.render('main/advanced', {
-        headerTitle: 'Advanced',
-        verbosityEnabled: console.isVerbose,
-    });
-};
diff --git a/core/routes/advanced/groups/databaseCmds.ts b/core/routes/advanced/groups/databaseCmds.ts
new file mode 100644
index 000000000..6ecdbf5e4
--- /dev/null
+++ b/core/routes/advanced/groups/databaseCmds.ts
@@ -0,0 +1,23 @@
+import type { AdvancedCommandHandler } from "../runCommand";
+
+
+const dbComparePlayers: AdvancedCommandHandler = async (ctx, args) => {
+    return {
+        type: 'md',
+        data: `TODO: implement`,
+    }
+}
+
+
+const dbPurgeId: AdvancedCommandHandler = async (ctx, args) => {
+    return {
+        type: 'md',
+        data: `TODO: implement`,
+    }
+}
+
+
+export default {
+    // dbComparePlayers,
+    // dbPurgeId,
+}
diff --git a/core/routes/advanced/groups/otherCmds.ts b/core/routes/advanced/groups/otherCmds.ts
new file mode 100644
index 000000000..b77e39cee
--- /dev/null
+++ b/core/routes/advanced/groups/otherCmds.ts
@@ -0,0 +1,117 @@
+import { getPublicIp } from "@core/boot/startReadyWatcher";
+import type { AdvancedCommandHandler } from "../runCommand";
+import probeInternetTime, { type ProbeSuccess } from "@lib/host/probeInternetTime";
+import { mdCodeBlock } from "@lib/misc";
+
+
+const printPublicIp: AdvancedCommandHandler = async (ctx, args) => {
+    const ip = await getPublicIp() || 'not found';
+    return {
+        type: 'md',
+        data: `Public IP: ${ip}`,
+    }
+}
+
+
+//MARK: Clock info
+const GETTIMEAPI_HOST = 'gettimeapi.dev';
+const DRIFT_THRESHOLD_MS = 5_000;
+
+const formatUtcOffset = (minutes: number) => {
+    const sign = minutes >= 0 ? '+' : '-';
+    const abs = Math.abs(minutes);
+    const h = Math.floor(abs / 60).toString().padStart(2, '0');
+    const m = (abs % 60).toString().padStart(2, '0');
+    return `${sign}${h}:${m}`;
+};
+
+//NOTE: resolves what UTC offset (in minutes) the given IANA timezone should currently have
+//according to ICU (Intl). Returns null if ICU can't resolve it.
+const resolveIntlOffsetMinutes = (timeZone: string): number | null => {
+    try {
+        const parts = new Intl.DateTimeFormat('en-US', {
+            timeZone,
+            timeZoneName: 'longOffset',
+        }).formatToParts(new Date());
+        const tzPart = parts.find((p) => p.type === 'timeZoneName')?.value;
+        if (!tzPart) return null;
+        if (tzPart === 'GMT' || tzPart === 'UTC') return 0;
+        const m = tzPart.match(/^(?:GMT|UTC)([+-])(\d{1,2})(?::(\d{2}))?$/);
+        if (!m) return null;
+        const sign = m[1] === '+' ? 1 : -1;
+        return sign * (parseInt(m[2]) * 60 + parseInt(m[3] ?? '0'));
+    } catch {
+        return null;
+    }
+};
+
+const printClockInfo: AdvancedCommandHandler = async (ctx, args) => {
+    const probeResult = await probeInternetTime();
+    const { date, avgOffsetMs, avgRttMs, results } = probeResult;
+
+    //Local values (as resolved by the Node.js runtime / OS)
+    const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'n/a';
+    //NOTE: getTimezoneOffset() is inverted vs ISO 8601 (BRT is -03:00 but returns 180)
+    const localUtcOffsetMin = -new Date().getTimezoneOffset();
+    const localUtcOffset = formatUtcOffset(localUtcOffsetMin);
+    const localTime = new Date().toLocaleString();
+
+    //ICU/V8 self-consistency: does Date#getTimezoneOffset agree with what Intl says
+    //localTimezone should be right now? A mismatch means the restart scheduler (which uses
+    //Date#setHours) will fire at a different wall-clock time than the UI suggests.
+    const intlExpectedOffsetMin = resolveIntlOffsetMinutes(localTimezone);
+    const intlExpectedOffset = intlExpectedOffsetMin !== null
+        ? formatUtcOffset(intlExpectedOffsetMin)
+        : 'not resolved';
+    const icuV8Ok = intlExpectedOffsetMin !== null && intlExpectedOffsetMin === localUtcOffsetMin;
+
+    //Internet values (as resolved by gettimeapi.dev for the local timezone)
+    const gettimeapiProbe = results.find(
+        (r) => r.success && r.url.includes(GETTIMEAPI_HOST),
+    ) as ProbeSuccess | undefined;
+    const internetTimezone = gettimeapiProbe?.timezone?.timezone ?? 'not resolved';
+    const internetUtcOffset = gettimeapiProbe?.timezone?.offset ?? 'not resolved';
+    const internetTime = date ? new Date(date).toLocaleString() : 'not resolved';
+
+    //Sanity check flags
+    const tzOk = internetTimezone !== 'not resolved' && internetTimezone === localTimezone;
+    const offsetOk = internetUtcOffset !== 'not resolved' && internetUtcOffset === localUtcOffset;
+    const driftOk = avgOffsetMs !== null && Math.abs(avgOffsetMs) <= DRIFT_THRESHOLD_MS;
+    const mark = (ok: boolean) => (ok ? '✔' : '❌');
+
+    const driftStr = avgOffsetMs !== null ? `${avgOffsetMs}ms` : 'not found';
+    const rttStr = avgRttMs !== null ? `${avgRttMs}ms` : 'not found';
+
+    return {
+        type: 'md',
+        data: [
+            '## Clock Info:',
+            '',
+            '| Metric | Local | Internet | Status |',
+            '| --- | --- | --- | :---: |',
+            `| Timezone | \`${localTimezone}\` | \`${internetTimezone}\` | ${mark(tzOk)} |`,
+            `| UTC Offset | \`${localUtcOffset}\` | \`${internetUtcOffset}\` | ${mark(offsetOk)} |`,
+            `| Time | ${localTime} | ${internetTime} | ${mark(driftOk)} |`,
+            '',
+            `- ICU/V8 timezone self-check: ${mark(icuV8Ok)} _(\`Date\` offset is \`${localUtcOffset}\`, \`${localTimezone}\` should be \`${intlExpectedOffset}\`)_`,
+            `- Clock drift: ${driftStr} _(threshold: ±${DRIFT_THRESHOLD_MS}ms)_`,
+            `- Network RTT: ${rttStr}`,
+            '',
+            '_Local values are resolved by the Node.js runtime / OS. Internet values come from `gettimeapi.dev` (timezone) and all probes averaged (time/drift)._',
+            '## Raw Probe Data:',
+            ...results.map(r => {
+                const j = JSON.stringify({ ...r, url: undefined, success: undefined }, null, 2)
+                return [
+                    `### ${r.url}`,
+                    mdCodeBlock(j, 'json'),
+                ].join('\n');
+            }),
+        ].join('\n'),
+    }
+}
+
+
+export default {
+    printPublicIp,
+    printClockInfo,
+}
diff --git a/core/routes/advanced/groups/processCmds.ts b/core/routes/advanced/groups/processCmds.ts
new file mode 100644
index 000000000..b55ad26c5
--- /dev/null
+++ b/core/routes/advanced/groups/processCmds.ts
@@ -0,0 +1,67 @@
+import v8 from 'node:v8';
+import type { AdvancedCommandHandler } from "../runCommand";
+import { parseFiniteIntString } from "@lib/misc";
+import bytes from "bytes";
+
+const printProcessEnv: AdvancedCommandHandler = (ctx, args) => {
+    return {
+        type: 'json',
+        data: JSON.stringify(process.env, null, 2),
+    }
+}
+
+
+const printProcessMemoryUsage: AdvancedCommandHandler = (ctx, args) => {
+    let outLines: string[] = [];
+    for (const [key, value] of Object.entries(process.memoryUsage())) {
+        outLines.push(`- ${key}: ${bytes(value)!}`);
+    }
+    return {
+        type: 'md',
+        data: [
+            '## Process Memory:',
+            ...outLines,
+        ].join('\n'),
+    }
+}
+
+
+const freezeProcess: AdvancedCommandHandler = (ctx, args) => {
+    const secs = parseFiniteIntString(args) ?? 50;
+    if (secs < 1) {
+        return {
+            type: 'md',
+            data: `Invalid argument: ${args}`,
+        }
+    }
+
+    //Scheduling the freeze after the response is sent to the client
+    setTimeout(() => {
+        console.warn(`Admin ${ctx.admin.name} requested freezing process for ${secs} seconds.`);
+        Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, secs * 1000);
+    }, 250); //grace period
+    return {
+        type: 'md',
+        data: `Freezing process for ${secs} seconds...`,
+    }
+}
+
+
+const saveHeapSnapshot: AdvancedCommandHandler = (ctx, args) => {
+    setTimeout(() => {
+        const snapFile = v8.writeHeapSnapshot();
+        console.warn(`Heap snapshot written to: ${snapFile}`);
+    }, 250); //grace period
+    return {
+        type: 'md',
+        data: `Saving heap snapshot, check the terminal for more details.\nThis may take a while and has high chance of crashing the server.`,
+    }
+}
+
+
+export default {
+    printProcessEnv,
+    printProcessMemoryUsage,
+    freezeProcess,
+    saveHeapSnapshot,
+}
diff --git a/core/routes/advanced/groups/serverCmds.ts b/core/routes/advanced/groups/serverCmds.ts
new file mode 100644
index 000000000..77ecc19a7
--- /dev/null
+++ b/core/routes/advanced/groups/serverCmds.ts
@@ -0,0 +1,80 @@
+import { SYM_SYSTEM_AUTHOR } from "@lib/symbols";
+import type { AdvancedCommandHandler } from "../runCommand";
+import { mdCodeBlock, parseFiniteIntString } from "@lib/misc";
+
+
+const forceUpdateMutableConvars: AdvancedCommandHandler = async (ctx, args) => {
+    const convarList = await txCore.fxRunner.updateMutableConvars();
+    if (!convarList) {
+        return {
+            type: 'md',
+            data: `Failed to update mutable convars.\nCheck the terminal for more details.`,
+        }
+    }
+    const lines = convarList.map(([set, convar, value]) => `${set} ${convar} ${value}`);
+    return {
+        type: 'md',
+        data: [
+            '## Convars Updated:',
+            mdCodeBlock(lines.join('\n'), 'txt'),
+        ].join('\n'),
+    }
+}
+
+
+const safelyRestartMonitorResource: AdvancedCommandHandler = (ctx, args) => {
+    const setCmdResult = txCore.fxRunner.sendCommand(
+        'set',
+        [
+            'txAdmin-luaComToken',
+            txCore.webServer.luaComToken,
+        ],
+        SYM_SYSTEM_AUTHOR
+    );
+    if (!setCmdResult) {
+        return {
+            type: 'md',
+            data: 'Failed to reset luaComToken.\nCheck the terminal for more details.',
+        }
+    }
+    const ensureCmdResult = txCore.fxRunner.sendCommand(
+        'ensure',
+        ['monitor'],
+        SYM_SYSTEM_AUTHOR
+    );
+    if (ensureCmdResult) {
+        return {
+            type: 'md',
+            data: 'Monitor restarted.',
+        }
+    } else {
+        return {
+            type: 'md',
+            data: 'Failed to restart monitor.\nCheck the terminal for more details.',
+        }
+    }
+}
+
+
+const forceReauthRecentPlayers: AdvancedCommandHandler = async (ctx, args) => {
+    const numPlayers = parseFiniteIntString(args) ?? 10;
+    if (numPlayers < 1) {
+        return {
+            type: 'md',
+            data: `Invalid argument: ${args}`,
+        }
+    }
+    const netIds = txCore.fxPlayerlist.getPlayerList().map((p) => p.netid).slice(-numPlayers);
+    txCore.fxRunner.sendEvent('adminsUpdated', netIds);
+    return {
+        type: 'md',
+        data: `Refreshed players with NetIDs: ${netIds.join(', ')}`,
+    }
+}
+
+
+export default {
+    forceUpdateMutableConvars,
+    safelyRestartMonitorResource,
+    forceReauthRecentPlayers,
+}
diff --git a/core/routes/advanced/groups/txAdminCmds.ts b/core/routes/advanced/groups/txAdminCmds.ts
new file mode 100644
index 000000000..e679e0e1d
--- /dev/null
+++ b/core/routes/advanced/groups/txAdminCmds.ts
@@ -0,0 +1,132 @@
+import { mdCodeBlock, msToShortishDuration } from "@lib/misc";
+import type { AdvancedCommandHandler } from "../runCommand";
+
+
+const setVerbosity: AdvancedCommandHandler = (ctx, args) => {
+    if (args === 'true') {
+        console.setVerbose(true);
+    } else if (args === 'false') {
+        console.setVerbose(false);
+    } else if (!args) {
+        return {
+            type: 'md',
+            data: `The current verbosity is ${console.isVerbose}.\nYou need to pass a boolean value to set it.`,
+        }
+    } else {
+        return {
+            type: 'md',
+            data: `Invalid argument: ${args}`,
+        }
+    }
+
+    return {
+        type: 'md',
+        data: `Console verbosity set to ${console.isVerbose}`,
+    }
+}
+
+
+const setConfig: AdvancedCommandHandler = (ctx, args) => {
+    const [scopeKey, valueString] = args.split(/\s+/, 2);
+    if (!scopeKey || !valueString) throw new Error(`Invalid set command: ${args}`);
+    const [scope, key] = scopeKey.split('.');
+    if (!scope || !key) throw new Error(`Invalid scope.key: ${scopeKey}`);
+
+    const configUpdate: any = {};
+    try {
+        configUpdate[scope] = { [key]: JSON.parse(valueString) };
+    } catch (error) {
+        console.dir(error);
+        return {
+            type: 'md',
+            data: `Failed to parse the JSON value: ${valueString}\nIf you are trying to set a string, you must wrap it in quotes.`,
+        }
+    }
+    const { raw: keysUpdated } = txCore.configStore.saveConfigs(configUpdate, ctx.admin.name);
+    const outParts = [
+        '## Keys Updated:',
+        mdCodeBlock(JSON.stringify(keysUpdated ?? 'not set', null, 2), 'json'),
+        '## Stored:',
+        mdCodeBlock(JSON.stringify(txCore.configStore.getStoredConfig(), null, 2), 'json'),
+    ];
+
+    return {
+        type: 'md',
+        data: outParts.join('\n'),
+    }
+}
+
+
+const printFullPlayerList: AdvancedCommandHandler = (ctx, args) => {
+    return {
+        type: 'json',
+        data: JSON.stringify(txCore.fxPlayerlist.getPlayerList(), null, 2),
+    }
+}
+
+
+const printFullServerLogBuffer: AdvancedCommandHandler = (ctx, args) => {
+    return {
+        type: 'json',
+        data: JSON.stringify(txCore.logger.server.getRecentBuffer(), null, 2),
+    }
+}
+
+
+const printFxRunnerChildHistory: AdvancedCommandHandler = (ctx, args) => {
+    return {
+        type: 'json',
+        data: JSON.stringify(txCore.fxRunner.history, null, 2),
+    }
+}
+
+
+const printLoggerErrors: AdvancedCommandHandler = (ctx, args) => {
+    const outData = {
+        admin: txCore.logger.admin.lrLastError,
+        fxserver: txCore.logger.fxserver.lrLastError,
+        server: txCore.logger.server.lrLastError,
+    };
+    return {
+        type: 'json',
+        data: JSON.stringify(outData, null, 2),
+    }
+}
+
+
+const printFxResourcesBootLog: AdvancedCommandHandler = (ctx, args) => {
+    const bootLog = txCore.fxResources.latestBootLog;
+    if (!bootLog) {
+        return {
+            type: 'md',
+            data: 'Server has not booted yet.',
+        }
+    } else {
+        const maxResNameLength = Math.max(...bootLog.map((x) => x.resource.length));
+        const lines = bootLog
+            .sort((a, b) => b.duration - a.duration)
+            .map((x) => {
+                const name = x.resource.padEnd(maxResNameLength);
+                const duration = msToShortishDuration(x.duration, { units: ['m', 's', 'ms'] });
+                return `${name} ${duration}`;
+            });
+        return {
+            type: 'md',
+            data: [
+                '## Latest Boot Log:',
+                mdCodeBlock(lines.join('\n'), 'txt'),
+            ].join('\n'),
+        }
+    }
+}
+
+
+export default {
+    verbose: setVerbosity,
+    set: setConfig,
+    printFullPlayerList,
+    printFullServerLogBuffer,
+    printFxRunnerChildHistory,
+    printLoggerErrors,
+    printFxResourcesBootLog,
+}
diff --git a/core/routes/advanced/runCommand.ts b/core/routes/advanced/runCommand.ts
new file mode 100644
index 000000000..e4548469e
--- /dev/null
+++ b/core/routes/advanced/runCommand.ts
@@ -0,0 +1,78 @@
+const modulename = 'WebServer:Advanced:Run';
+import { AuthedCtx } from '@modules/WebServer/ctxTypes';
+import consoleFactory from '@lib/console';
+import { z } from 'zod';
+import type { GenericApiErrorResp } from '@shared/genericApiTypes';
+import txAdminCmds from './groups/txAdminCmds';
+import serverCmds from './groups/serverCmds';
+import processCmds from './groups/processCmds';
+import otherCmds from './groups/otherCmds';
+import databaseCmds from './groups/databaseCmds';
+const console = consoleFactory(modulename);
+
+
+//Req validation & types
+const bodySchema = z.object({
+    cmd: z.string(),
+});
+export type RunAdvancedCommandReq = z.infer<typeof bodySchema>;
+export type RunAdvancedCommandRespSuccess = {
+    type: 'md' | 'json';
+    data: string;
+}
+export type RunAdvancedCommandResp = RunAdvancedCommandRespSuccess | GenericApiErrorResp;
+
+
+//NOTE: leaving the args splitting to the handler
+export type AdvancedCommandHandler = (ctx: AuthedCtx, args: string) => (Promise<RunAdvancedCommandRespSuccess> | RunAdvancedCommandRespSuccess);
+const handlers: Record<string, AdvancedCommandHandler> = {
+    ...txAdminCmds,
+    ...databaseCmds,
+    ...serverCmds,
+    ...processCmds,
+    ...otherCmds,
+}
+
+
+/**
+ * Runs an advanced command
+ */
+export default async function RunAdvancedCommand(ctx: AuthedCtx) {
+    const sendTypedResp = (data: RunAdvancedCommandResp) => ctx.send(data);
+
+    //Check permissions
+    if (!ctx.admin.testPermission('all_permissions', modulename)) {
+        return sendTypedResp({
+            error: 'You do not have permission to change the settings.'
+        });
+    }
+
+    //Validating input
+    const schemaRes = bodySchema.safeParse(ctx.request.body);
+    if (!schemaRes.success) {
+        return sendTypedResp({
+            error: `Invalid request body: ${schemaRes.error.message}`,
+        });
+    }
+    const cmdStr = schemaRes.data.cmd;
+
+    //Parsing the command
+    const [, cmd, rawArgs] = cmdStr.match(/^(?<cmd>\w+)(?:\s+(?<rawArgs>.*))?$/) || [];
+    if (!cmd || !(cmd in handlers) || !handlers[cmd]) {
+        return sendTypedResp({
+            error: `Invalid command: ${cmdStr}`,
+        });
+    }
+
+    //Running the command
+    const args = rawArgs?.trim() ?? '';
+    try {
+        const result = await handlers[cmd](ctx, args);
+        ctx.admin.logAction(`Ran advanced command: ${cmd} ${args}`);
+        return sendTypedResp(result);
+    } catch (error) {
+        return sendTypedResp({
+            error: `Error running command: ${(error as any)?.message ?? 'Unknown error'}`,
+        });
+    }
+};
diff --git a/core/routes/authentication/changeIdentifiers.ts b/core/routes/authentication/changeIdentifiers.ts
index f386459f2..cc39b11fa 100644
--- a/core/routes/authentication/changeIdentifiers.ts
+++ b/core/routes/authentication/changeIdentifiers.ts
@@ -78,11 +78,41 @@ export default async function AuthChangeIdentifiers(ctx: AuthedCtx) {
     const vaultAdmin = txCore.adminStore.getAdminByName(ctx.admin.name);
     if (!vaultAdmin) throw new Error('Wait, what? Where is that admin?');
 
+    //Prepare log message
+    const changes: string[] = [];
+    const oldCfx = vaultAdmin.providers.citizenfx?.identifier;
+    const newCfx = citizenfxData ? citizenfxData.identifier : undefined;
+    if (oldCfx !== newCfx) {
+        if (!oldCfx && newCfx) {
+            changes.push(`added ${newCfx}`);
+        } else if (oldCfx && !newCfx) {
+            changes.push(`removed ${oldCfx}`);
+        } else if (oldCfx && newCfx) {
+            changes.push(`changed ${oldCfx} → ${newCfx}`);
+        }
+    }
+
+    const oldDiscord = vaultAdmin.providers.discord?.identifier;
+    const newDiscord = discordData ? discordData.identifier : undefined;
+    if (oldDiscord !== newDiscord) {
+        if (!oldDiscord && newDiscord) {
+            changes.push(`added ${newDiscord}`);
+        } else if (oldDiscord && !newDiscord) {
+            changes.push(`removed ${oldDiscord}`);
+        } else if (oldDiscord && newDiscord) {
+            changes.push(`changed ${oldDiscord} → ${newDiscord}`);
+        }
+    }
+
+    const logMessage = changes.length
+        ? `Modified own identifiers: ${changes.join(', ')}`
+        : 'Modified own identifiers: No changes detected.';
+
     //Edit admin and give output
     try {
         await txCore.adminStore.editAdmin(ctx.admin.name, null, citizenfxData, discordData);
 
-        ctx.admin.logAction('Changing own identifiers.');
+        ctx.admin.logAction(logMessage);
         return ctx.send<GenericApiResp>({ success: true });
     } catch (error) {
         return ctx.send<GenericApiResp>({ error: (error as Error).message });
diff --git a/core/routes/authentication/providerCallback.ts b/core/routes/authentication/providerCallback.ts
index 4fdf0af44..5d92f9b8d 100644
--- a/core/routes/authentication/providerCallback.ts
+++ b/core/routes/authentication/providerCallback.ts
@@ -74,7 +74,7 @@ export default async function AuthProviderCallback(ctx: InitializedCtx) {
         }
 
         const authedAdmin = new AuthedAdmin(vaultAdmin, sessData.csrfToken);
-        authedAdmin.logAction(`logged in from ${ctx.ip} via cfxre`);
+        authedAdmin.logAction(`logged in from ${ctx.ip} via cfxre auth`);
         txCore.metrics.txRuntime.loginOrigins.count(ctx.txVars.hostType);
         txCore.metrics.txRuntime.loginMethods.count('citizenfx');
         return ctx.send<ReactAuthDataType>(authedAdmin.getAuthData());
diff --git a/core/routes/authentication/verifyPassword.ts b/core/routes/authentication/verifyPassword.ts
index 3a8fd3c15..155c23ac8 100644
--- a/core/routes/authentication/verifyPassword.ts
+++ b/core/routes/authentication/verifyPassword.ts
@@ -68,13 +68,11 @@ export default async function AuthVerifyPassword(ctx: InitializedCtx) {
         } satisfies PassSessAuthType;
         ctx.sessTools.set({ auth: sessData });
 
-        txCore.logger.admin.write(vaultAdmin.name, `logged in from ${ctx.ip} via password`);
+        const authedAdmin = new AuthedAdmin(vaultAdmin, sessData.csrfToken);
+        authedAdmin.logAction(`logged in from ${ctx.ip} via password auth`);
         txCore.metrics.txRuntime.loginOrigins.count(ctx.txVars.hostType);
         txCore.metrics.txRuntime.loginMethods.count('password');
-
-        const authedAdmin = new AuthedAdmin(vaultAdmin, sessData.csrfToken)
         return ctx.send<ReactAuthDataType>(authedAdmin.getAuthData());
-
     } catch (error) {
         console.warn(`Failed to authenticate ${postBody.username} with error: ${(error as Error).message}`);
         console.verbose.dir(error);
diff --git a/core/routes/cfgEditor/get.js b/core/routes/cfgEditor/get.js
index 845d8ce03..252bba12a 100644
--- a/core/routes/cfgEditor/get.js
+++ b/core/routes/cfgEditor/get.js
@@ -6,18 +6,18 @@ const console = consoleFactory(modulename);
 
 /**
  * Returns the output page containing the server.cfg
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function CFGEditorPage(ctx) {
     //Check permissions
     if (!ctx.admin.hasPermission('server.cfg.editor')) {
-        return ctx.utils.render('main/message', {message: 'You don\'t have permission to view this page.'});
+        return ctx.utils.renderMessage('You don\'t have permission to view this page.');
     }
 
     //Check if file is set
     if (!txCore.fxRunner.isConfigured) {
         let message = 'You need to configure your server data path before being able to edit the CFG file.';
-        return ctx.utils.render('main/message', {message});
+        return ctx.utils.renderMessage(message);
     }
 
     //Read cfg file
@@ -27,7 +27,7 @@ export default async function CFGEditorPage(ctx) {
         rawFile = await readRawCFGFile(cfgFilePath);
     } catch (error) {
         let message = `Failed to read CFG File with error: ${error.message}`;
-        return ctx.utils.render('main/message', {message});
+        return ctx.utils.renderMessage(message);
     }
 
     return ctx.utils.render('main/cfgEditor', {
diff --git a/core/routes/cfgEditor/save.js b/core/routes/cfgEditor/save.js
index 6e60a2c9a..5382a49e1 100644
--- a/core/routes/cfgEditor/save.js
+++ b/core/routes/cfgEditor/save.js
@@ -9,7 +9,7 @@ const isUndefined = (x) => (x === undefined);
 
 /**
  * Saves the server.cfg
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function CFGEditorSave(ctx) {
     //Sanity check
diff --git a/core/routes/deployer/actions.js b/core/routes/deployer/actions.js
index c84fa82d2..7ebc89d9b 100644
--- a/core/routes/deployer/actions.js
+++ b/core/routes/deployer/actions.js
@@ -16,7 +16,7 @@ const isUndefined = (x) => (x === undefined);
 
 /**
  * Handle all the server control actions
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function DeployerActions(ctx) {
     //Sanity check
@@ -56,7 +56,7 @@ export default async function DeployerActions(ctx) {
 //================================================================
 /**
  * Handle submition of user-edited recipe (record to deployer, starts the process)
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleConfirmRecipe(ctx) {
     //Sanity check
@@ -79,7 +79,7 @@ async function handleConfirmRecipe(ctx) {
 //================================================================
 /**
  * Handle submition of the input variables/parameters
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleSetVariables(ctx) {
     //Sanity check
@@ -196,7 +196,7 @@ async function handleSetVariables(ctx) {
 //================================================================
 /**
  * Handle the commit of a Recipe by receiving the user edited server.cfg
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleSaveConfig(ctx) {
     //Sanity check
@@ -277,7 +277,7 @@ async function handleSaveConfig(ctx) {
 //================================================================
 /**
  * Handle the cancellation of the deployer proguess
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleCancel(ctx) {
     txManager.deployer = null;
diff --git a/core/routes/deployer/status.js b/core/routes/deployer/status.js
index 74a83277c..d9720f8dd 100644
--- a/core/routes/deployer/status.js
+++ b/core/routes/deployer/status.js
@@ -5,7 +5,7 @@ const console = consoleFactory(modulename);
 
 /**
  * Returns the output page containing the live console
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function DeployerStatus(ctx) {
     //Check permissions
diff --git a/core/routes/deployer/stepper.js b/core/routes/deployer/stepper.js
index 2e0414bda..dfa45d9f3 100644
--- a/core/routes/deployer/stepper.js
+++ b/core/routes/deployer/stepper.js
@@ -3,17 +3,18 @@ import fse from 'fs-extra';
 import { txHostConfig } from '@core/globalData';
 import consoleFactory from '@lib/console';
 import { TxConfigState } from '@shared/enums';
+import { sanitizeSimpleHtml } from '@lib/htmlRenderSafety';
 const console = consoleFactory(modulename);
 
 
 /**
  * Returns the output page containing the deployer stepper page (all 3 stages)
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function DeployerStepper(ctx) {
     //Check permissions
     if (!ctx.admin.hasPermission('master')) {
-        return ctx.utils.render('main/message', { message: 'You need to be the admin master to use the deployer.' });
+        return ctx.utils.renderMessage('You need to be the admin master to use the deployer.');
     }
 
     //Ensure the correct state for the deployer
@@ -64,7 +65,7 @@ export default async function DeployerStepper(ctx) {
             return {
                 name: name,
                 value: recipeVars[name],
-                description: knownVarDescriptions[name] || '',
+                description: sanitizeSimpleHtml(knownVarDescriptions[name] || ''),
             };
         });
     } else if (txManager.deployer.step === 'run') {
@@ -88,7 +89,7 @@ Make sure everything is correct in the recipe and try again.`;
             renderData.serverCFG = errorMessage;
         }
     } else {
-        return ctx.utils.render('main/message', { message: 'Unknown Deployer step, please report this bug and restart txAdmin.' });
+        return ctx.utils.renderMessage('Unknown Deployer step, please report this bug and restart txAdmin.');
     }
 
     return ctx.utils.render('standalone/deployer', renderData);
diff --git a/core/routes/diagnostics/getDiagnostics.ts b/core/routes/diagnostics/getDiagnostics.ts
new file mode 100644
index 000000000..3511c60d4
--- /dev/null
+++ b/core/routes/diagnostics/getDiagnostics.ts
@@ -0,0 +1,152 @@
+const modulename = 'WebServer:Diagnostics';
+import { AuthedCtx } from '@modules/WebServer/ctxTypes';
+import MemCache from '@lib/MemCache';
+import * as diagnosticsFuncs from '@lib/diagnostics';
+import consoleFactory from '@lib/console';
+import type { DiagnosticsPageData } from '@shared/diagnosticsTypes';
+import type { GenericApiErrorResp } from '@shared/genericApiTypes';
+import type { QuantileArray } from '@modules/Metrics/statsUtils';
+const console = consoleFactory(modulename);
+const cache = new MemCache<DiagnosticsPageData>(5);
+
+
+//Helpers
+const perfQuantiles = (perfData: QuantileArray) => {
+    const result = perfData.result(true);
+    if (!result.enoughData) return 'not enough data available';
+    return {
+        p5: `${result.p5}ms`,
+        p25: `${result.p25}ms`,
+        p50: `${result.p50}ms`,
+        p75: `${result.p75}ms`,
+        p95: `${result.p95}ms`,
+        n: result.count,
+    }
+}
+
+
+/**
+ * Returns the diagnostics data
+ */
+export default async function GetDiagnosticsData(ctx: AuthedCtx) {
+    const sendTypedResp = (data: DiagnosticsPageData | GenericApiErrorResp) => ctx.send(data);
+
+    const cachedData = cache.get();
+    if (cachedData) return sendTypedResp(cachedData);
+
+    //Prepare data
+    const timeStart = Date.now();
+    const [runtimeData, databaseStats, hostData, processesData] = await Promise.all([
+        diagnosticsFuncs.getRuntimeData(),
+        txCore.database.stats.getDatabaseStats(), //not really a promise, but can throw
+        diagnosticsFuncs.getHostData(),
+        diagnosticsFuncs.getProcessesData(),
+    ]);
+    const data: DiagnosticsPageData = {
+        runtime: {},
+        host: {},
+        server: {},
+        processes: [],
+        loadTime: Date.now() - timeStart,
+    };
+
+    //Runtime data
+    data.runtime = {
+        'Overview': {
+            'Uptime': runtimeData.uptime,
+            'Runtime': runtimeData.runtime,
+            'Versions': {
+                tx: runtimeData.txEnv.txaVersion,
+                fx: runtimeData.txEnv.fxsVersionTag,
+            },
+            'Database': {
+                file: runtimeData.databaseFileSize ?? '--',
+                players: databaseStats.players,
+                bans: databaseStats.bans,
+                warns: databaseStats.warns,
+            },
+        },
+        'Env Config': {
+            'FXServer': runtimeData.txEnv.fxsPath,
+            'Profile': runtimeData.txEnv.profilePath,
+            'Defaults': runtimeData.txHostConfig.defaults.length > 0
+                ? runtimeData.txHostConfig.defaults.join(', ')
+                : '--',
+            'Interface': runtimeData.txHostConfig.netInterface ?? '--',
+            'Provider': runtimeData.txHostConfig.providerName ?? '--',
+        },
+        'Performance': {
+            'BanCheck': perfQuantiles(runtimeData.performance.banCheck),
+            'WhitelistCheck': perfQuantiles(runtimeData.performance.whitelistCheck),
+            'PlayersTable': perfQuantiles(runtimeData.performance.playersTableSearch),
+            'HistoryTable': perfQuantiles(runtimeData.performance.historyTableSearch),
+            'DatabaseSave': perfQuantiles(runtimeData.performance.databaseSave),
+            'PerfCollection': perfQuantiles(runtimeData.performance.perfCollection),
+        },
+        'Monitor': {
+            'HB Fails': {
+                HTTP: runtimeData.monitor.hbFails.http,
+                FD3: runtimeData.monitor.hbFails.fd3,
+            },
+            'Restarts': {
+                BT: runtimeData.monitor.restarts.bootTimeout,
+                CL: runtimeData.monitor.restarts.close,
+                HB: runtimeData.monitor.restarts.heartBeat,
+                HC: runtimeData.monitor.restarts.healthCheck,
+                BO: runtimeData.monitor.restarts.both,
+            },
+        },
+        'Memory': {
+            'Heap Used': `${runtimeData.memoryUsage.heap_used} (${runtimeData.memoryUsage.heap_pct}%)`,
+            'Heap Limit': runtimeData.memoryUsage.heap_limit,
+            'Physical': runtimeData.memoryUsage.physical,
+            'Peak Alloc': runtimeData.memoryUsage.peak_malloced,
+        },
+        'Logger': {
+            'Storage': {
+                'Size': runtimeData.logger.storageSize.totalBytes,
+                'Files': runtimeData.logger.storageSize.fileCount,
+            },
+            'Admin': runtimeData.logger.statusAdmin,
+            'FXServer': runtimeData.logger.statusFXServer,
+            'Server': runtimeData.logger.statusServer,
+        },
+    };
+
+    //Host data
+    if ('error' in hostData) {
+        data.host = {
+            'Error': hostData.error ?? 'unknown error',
+        };
+    } else {
+        data.host = {
+            'OS Distro': hostData.static.osDistro,
+            'Username': hostData.static.username,
+            'CPU Model': hostData.static.cpu.brand,
+            'CPU Stats': `${hostData.static.cpu.physicalCores}c/${hostData.static.cpu.cores}t - ${hostData.static.cpu.speedMin} GHz`,
+        };
+
+        if (hostData.dynamic) {
+            data.host['CPU Usage'] = `${hostData.dynamic.cpuUsage}%`;
+            data.host['RAM Usage'] = `${hostData.dynamic.memory.usage}% (${hostData.dynamic.memory.used.toFixed(2)}/${hostData.dynamic.memory.total.toFixed(2)})`;
+        }
+    }
+
+    //Server data
+    const managerData = txManager.hostStatus;
+    data.server = {
+        'HashID': managerData.cfxId ?? '--',
+        'Join Link': managerData.joinLink ?? '--',
+        'CFG Path': managerData.cfgPath ?? '--',
+        'Data Path': managerData.dataPath ?? '--',
+        'Endpoint': txCore.fxRunner.child?.netEndpoint ?? '--',
+        'Proj Name': managerData.projectName ?? '--',
+    };
+
+    //Processes data
+    data.processes = processesData; //nothing to do here
+
+    //Cache and send
+    cache.set(data);
+    return sendTypedResp(data);
+};
diff --git a/core/routes/diagnostics/page.ts b/core/routes/diagnostics/page.ts
deleted file mode 100644
index b35ac265d..000000000
--- a/core/routes/diagnostics/page.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-const modulename = 'WebServer:Diagnostics';
-import { AuthedCtx } from '@modules/WebServer/ctxTypes';
-import MemCache from '@lib/MemCache';
-import * as diagnosticsFuncs from '@lib/diagnostics';
-import consoleFactory from '@lib/console';
-const console = consoleFactory(modulename);
-const cache = new MemCache(5);
-
-
-/**
- * Returns the output page containing the full report
- */
-export default async function Diagnostics(ctx: AuthedCtx) {
-    const cachedData = cache.get();
-    if (cachedData) {
-        cachedData.message = 'This page was cached in the last 5 seconds';
-        return ctx.utils.render('main/diagnostics', cachedData);
-    }
-
-    const timeStart = Date.now();
-    const data: any = {
-        headerTitle: 'Diagnostics',
-        message: '',
-    };
-    [data.host, data.txadmin, data.fxserver, data.proccesses] = await Promise.all([
-        diagnosticsFuncs.getHostData(),
-        diagnosticsFuncs.getTxAdminData(),
-        diagnosticsFuncs.getFXServerData(),
-        diagnosticsFuncs.getProcessesData(),
-    ]);
-
-    const timeElapsed = Date.now() - timeStart;
-    data.message = `Executed in ${timeElapsed} ms`;
-
-    cache.set(data);
-    return ctx.utils.render('main/diagnostics', data);
-};
diff --git a/core/routes/diagnostics/sendReport.ts b/core/routes/diagnostics/sendReport.ts
index 770d07601..63dd9ba79 100644
--- a/core/routes/diagnostics/sendReport.ts
+++ b/core/routes/diagnostics/sendReport.ts
@@ -35,6 +35,9 @@ export default async function SendDiagnosticsReport(ctx: AuthedCtx) {
     };
     const sendTypedResp = (data: SuccessResp | GenericApiErrorResp) => ctx.send(data);
 
+    //FIXME: re-enable
+    return sendTypedResp({ error: 'The diagnostics report feature is temporarily disabled. Please check back later.' });
+
     //Rate limit (and cache) report submissions
     const cachedReportId = reportIdCache.get();
     if (cachedReportId) {
@@ -46,13 +49,12 @@ export default async function SendDiagnosticsReport(ctx: AuthedCtx) {
     //Diagnostics
     let diagnostics;
     try {
-        const [host, txadmin, fxserver, proccesses] = await Promise.all([
+        const [host, txadmin, proccesses] = await Promise.all([
             diagnosticsFuncs.getHostData(),
-            diagnosticsFuncs.getTxAdminData(),
-            diagnosticsFuncs.getFXServerData(),
+            diagnosticsFuncs.getRuntimeData(),
             diagnosticsFuncs.getProcessesData(),
         ]);
-        diagnostics = { host, txadmin, fxserver, proccesses };
+        diagnostics = { host, txadmin, proccesses };
     } catch (error) { }
 
     //Admins
diff --git a/core/routes/fxserver/commands.ts b/core/routes/fxserver/commands.ts
index 445f347fa..d4991858d 100644
--- a/core/routes/fxserver/commands.ts
+++ b/core/routes/fxserver/commands.ts
@@ -2,18 +2,11 @@ const modulename = 'WebServer:FXServerCommands';
 import { AuthedCtx } from '@modules/WebServer/ctxTypes';
 import consoleFactory from '@lib/console';
 import { ApiToastResp } from '@shared/genericApiTypes';
-import { txEnv } from '@core/globalData';
 const console = consoleFactory(modulename);
 
-//Helper functions
-const delay = async (ms: number) => {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-};
-
 
 /**
  * Handle all the server commands
- * @param {object} ctx
  */
 export default async function FXServerCommands(ctx: AuthedCtx) {
     if (
@@ -47,29 +40,7 @@ export default async function FXServerCommands(ctx: AuthedCtx) {
 
 
     //==============================================
-    //DEBUG: Only available in the /advanced page
-    //FIXME: move to the advanced route, give button for profiling, saving mem snapshot, verbose, etc.
-    if (action == 'profile_monitor') {
-        if (!ensurePermission(ctx, 'all_permissions')) return false;
-        ctx.admin.logAction('Profiling txAdmin instance.');
-
-        const profileDuration = 5;
-        const savePath = `${txEnv.profilePath}/data/txProfile.bin`;
-        ExecuteCommand('profiler record start');
-        await delay(profileDuration * 1000);
-        ExecuteCommand('profiler record stop');
-        await delay(150);
-        ExecuteCommand(`profiler save "${savePath}"`);
-        await delay(150);
-        console.ok(`Profile saved to: ${savePath}`);
-        txCore.fxRunner.sendCommand('profiler', ['view', savePath], ctx.admin.name);
-        return ctx.send<ApiToastResp>({
-            type: 'success',
-            msg: 'Check your live console in a few seconds.',
-        });
-
-    //==============================================
-    } else if (action == 'admin_broadcast') {
+    if (action == 'admin_broadcast') {
         if (!ensurePermission(ctx, 'announcement')) return false;
         const message = (parameter ?? '').trim();
 
diff --git a/core/routes/fxserver/downloadLog.js b/core/routes/fxserver/downloadLog.js
index 10db6574c..6bc668591 100644
--- a/core/routes/fxserver/downloadLog.js
+++ b/core/routes/fxserver/downloadLog.js
@@ -6,12 +6,12 @@ const console = consoleFactory(modulename);
 
 /**
  * Returns the console log file
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function FXServerDownloadLog(ctx) {
     //Check permissions
     if (!ctx.admin.testPermission('console.view', modulename)) {
-        return ctx.utils.render('main/message', {message: 'You don\'t have permission to download this log.'});
+        return ctx.utils.renderMessage('You don\'t have permission to download this log.');
     }
 
     let readFile;
diff --git a/core/routes/fxserver/schedule.ts b/core/routes/fxserver/schedule.ts
index dd93ea97d..8a3d14a58 100644
--- a/core/routes/fxserver/schedule.ts
+++ b/core/routes/fxserver/schedule.ts
@@ -7,7 +7,6 @@ const console = consoleFactory(modulename);
 
 /**
  * Handle all the server scheduler commands
- * @param {object} ctx
  */
 export default async function FXServerSchedule(ctx: AuthedCtx) {
     if (
diff --git a/core/routes/index.ts b/core/routes/index.ts
index e43244c78..0016917f0 100644
--- a/core/routes/index.ts
+++ b/core/routes/index.ts
@@ -1,5 +1,5 @@
-export { default as diagnostics_page } from './diagnostics/page';
 export { default as diagnostics_sendReport } from './diagnostics/sendReport';
+export { default as diagnostics_getDiagnostics } from './diagnostics/getDiagnostics';
 export { default as intercom } from './intercom.js';
 export { default as resources } from './resources.js';
 export { default as perfChart } from './perfChart';
@@ -63,8 +63,7 @@ export { default as whitelist_page } from './whitelist/page';
 export { default as whitelist_list } from './whitelist/list';
 export { default as whitelist_actions } from './whitelist/actions';
 
-export { default as advanced_page } from './advanced/get';
-export { default as advanced_actions } from './advanced/actions';
+export { default as advanced_runCommand } from './advanced/runCommand';
 
 //FIXME: reorganizar TODAS rotas de logs, incluindo listagem e download
 export { default as serverLog } from './serverLog.js';
diff --git a/core/routes/intercom.ts b/core/routes/intercom.ts
index ff11415a2..d1184706e 100644
--- a/core/routes/intercom.ts
+++ b/core/routes/intercom.ts
@@ -8,7 +8,6 @@ const console = consoleFactory(modulename);
 
 /**
  * Intercommunications endpoint
- * @param {object} ctx
  */
 export default async function Intercom(ctx: InitializedCtx) {
     //Sanity check
diff --git a/core/routes/masterActions/getBackup.ts b/core/routes/masterActions/getBackup.ts
index 8760e73fd..725f63542 100644
--- a/core/routes/masterActions/getBackup.ts
+++ b/core/routes/masterActions/getBackup.ts
@@ -13,10 +13,10 @@ const console = consoleFactory(modulename);
 export default async function MasterActionsGet(ctx: AuthedCtx) {
     //Check permissions
     if (!ctx.admin.testPermission('master', modulename)) {
-        return ctx.utils.render('main/message', { message: 'Only the master account has permission to view/use this page.' });
+        return ctx.utils.renderMessage('Only the master account has permission to view/use this page.');
     }
     if (!ctx.txVars.isWebInterface) {
-        return ctx.utils.render('main/message', { message: 'This functionality cannot be used by the in-game menu, please use the web version of txAdmin.' });
+        return ctx.utils.renderMessage('This functionality cannot be used by the in-game menu, please use the web version of txAdmin.');
     }
 
     const dbPath = `${txEnv.profilePath}/data/playersDB.json`;
@@ -25,7 +25,7 @@ export default async function MasterActionsGet(ctx: AuthedCtx) {
         readFile = await fsp.readFile(dbPath);
     } catch (error) {
         console.error(`Could not read database file ${dbPath}.`);
-        return ctx.utils.render('main/message', { message: `Failed to generate backup file with error: ${(error as Error).message}` });
+        return ctx.utils.renderMessage(`Failed to generate backup file with error: ${(error as Error).message}`);
     }
     //getTimeFilename
     ctx.attachment(`playersDB_${getTimeFilename()}.json`);
diff --git a/core/routes/player/actions.ts b/core/routes/player/actions.ts
index 62084267f..e75166088 100644
--- a/core/routes/player/actions.ts
+++ b/core/routes/player/actions.ts
@@ -1,5 +1,4 @@
 const modulename = 'WebServer:PlayerActions';
-import humanizeDuration, { Unit } from 'humanize-duration';
 import playerResolver from '@lib/player/playerResolver';
 import { GenericApiResp } from '@shared/genericApiTypes';
 import { PlayerClass, ServerPlayer } from '@lib/player/playerClasses';
@@ -7,9 +6,19 @@ import { anyUndefined, calcExpirationFromDuration } from '@lib/misc';
 import consoleFactory from '@lib/console';
 import { AuthedCtx } from '@modules/WebServer/ctxTypes';
 import { SYM_CURRENT_MUTEX } from '@lib/symbols';
+import { z } from 'zod';
+import { shortenId } from '@shared/utils';
+import { summarizeIdsArray } from '@lib/player/idUtils';
 const console = consoleFactory(modulename);
 
 
+//Schemas
+const removeIdsBodySchema = z.object({
+    ids: z.array(z.string().min(4, 'invalid identifier')),
+});
+export type ApiRemoveIdsReqSchema = z.infer<typeof removeIdsBodySchema>;
+
+
 /**
  * Actions route for the player modal
  */
@@ -40,6 +49,8 @@ export default async function PlayerActions(ctx: AuthedCtx) {
         return sendTypedResp(await handleBan(ctx, player));
     } else if (action === 'whitelist') {
         return sendTypedResp(await handleSetWhitelist(ctx, player));
+    } else if (action === 'removeIds') {
+        return sendTypedResp(await handleRemoveIds(ctx, player));
     } else if (action === 'message') {
         return sendTypedResp(await handleDirectMessage(ctx, player));
     } else if (action === 'kick') {
@@ -92,7 +103,7 @@ async function handleWarning(ctx: AuthedCtx, player: PlayerClass): Promise<Gener
     }
 
     //Validating server & player
-    const allIds = player.getAllIdentifiers();
+    const allIds = player.allIdentifiers;
     if (!allIds.length) {
         return { error: 'Cannot warn a player with no identifiers.' };
     }
@@ -161,8 +172,8 @@ async function handleBan(ctx: AuthedCtx, player: PlayerClass): Promise<GenericAp
     }
 
     //Validating player - hwids.length can be zero 
-    const allIds = player.getAllIdentifiers();
-    const allHwids = player.getAllHardwareIdentifiers();
+    const allIds = player.allIdentifiers;
+    const allHwids = player.allHardwareIdentifiers;
     if (!allIds.length) {
         return { error: 'Cannot ban a player with no identifiers.' }
     }
@@ -215,8 +226,8 @@ async function handleBan(ctx: AuthedCtx, player: PlayerClass): Promise<GenericAp
         durationInput,
         durationTranslated,
         targetNetId: (player instanceof ServerPlayer) ? player.netid : null,
-        targetIds: player.ids,
-        targetHwids: player.hwids,
+        targetIds: allIds,
+        targetHwids: allHwids,
         targetName: player.displayName,
         kickMessage,
     });
@@ -270,6 +281,53 @@ async function handleSetWhitelist(ctx: AuthedCtx, player: PlayerClass): Promise<
 }
 
 
+/**
+ * Handle Player Removal of IDs
+ */
+async function handleRemoveIds(ctx: AuthedCtx, player: PlayerClass): Promise<GenericApiResp> {
+    //Checking request
+    const schemaRes = removeIdsBodySchema.safeParse(ctx.request.body);
+    if (!schemaRes.success) {
+        return { error: 'Invalid request body.' };
+    }
+    const { ids: idsToDelete } = schemaRes.data;
+
+    //Check permissions
+    if (!ctx.admin.testPermission('players.remove_ids', modulename)) {
+        return { error: 'You don\'t have permission to execute this action.' }
+    }
+
+    //Checking IDs
+    if (!player.license || !player.isRegistered) {
+        return { error: 'This player is not registered in the database, so there is no saved ID to delete.' };
+    }
+    if (idsToDelete.includes(player.license)) {
+        return { error: 'You cannot remove the player\'s license from their IDs.' };
+    }
+    if (player instanceof ServerPlayer && player.isConnected) {
+        // If the player is connected, player.ids/hwids only contain the active IDs
+        const onlineIdFound = idsToDelete.find(id => player.idsOnline.includes(id));
+        if (onlineIdFound) {
+            return { error: `The player #${player.netid} currently has the ID ${shortenId(onlineIdFound)}, so you need to wait for them to disconnect from the server to be able to delete it from the player history.` };
+        }
+        const onlineHwidFound = idsToDelete.find(id => player.hwidsOnline.includes(id));
+        if (onlineHwidFound) {
+            return { error: `The player #${player.netid} currently has the HWID ${shortenId(onlineHwidFound, 6)}, so you need to wait for them to disconnect from the server to be able to delete it from the player history.` };
+        }
+    }
+
+    try {
+        player.removeIds(idsToDelete);
+        const summarizedIds = summarizeIdsArray(idsToDelete);
+        ctx.admin.logAction(`Deleted IDs/HWIDs ${summarizedIds} from player "${player.displayName}" with license ${player.license}.`);
+
+        return { success: true };
+    } catch (error) {
+        return { error: `Failed to save whitelist status: ${(error as Error).message}` };
+    }
+}
+
+
 /**
  * Handle Direct Message Action
  */
diff --git a/core/routes/player/checkJoin.ts b/core/routes/player/checkJoin.ts
index ad45900d4..d3c168209 100644
--- a/core/routes/player/checkJoin.ts
+++ b/core/routes/player/checkJoin.ts
@@ -3,16 +3,15 @@ import cleanPlayerName from '@shared/cleanPlayerName';
 import { GenericApiErrorResp } from '@shared/genericApiTypes';
 import { DatabaseActionBanType, DatabaseActionType, DatabaseWhitelistApprovalsType } from '@modules/Database/databaseTypes';
 import { anyUndefined, now } from '@lib/misc';
-import { filterPlayerHwids, parsePlayerIds, shortenId, summarizeIdsArray } from '@lib/player/idUtils';
+import { filterPlayerHwids, parsePlayerIds, summarizeIdsArray } from '@lib/player/idUtils';
 import type { PlayerIdsObjectType } from "@shared/otherTypes";
-import xssInstancer from '@lib/xss';
+import { escapeHtmlContent, sanitizeSimpleHtml } from '@lib/htmlRenderSafety';
 import playerResolver from '@lib/player/playerResolver';
-import humanizeDuration, { Unit } from 'humanize-duration';
+import { Unit } from 'humanize-duration';
 import consoleFactory from '@lib/console';
 import { TimeCounter } from '@modules/Metrics/statsUtils';
 import { InitializedCtx } from '@modules/WebServer/ctxTypes';
 const console = consoleFactory(modulename);
-const xss = xssInstancer();
 
 //Helper
 const htmlCodeTag = '<code style="background-color: hsl(202deg 40% 66% / 35%); padding: 2px 2px; border-radius: 4px;">';
@@ -26,8 +25,8 @@ const rejectMessageTemplate = (title: string, content: string) => {
     <div style="
         background-color: rgba(30, 30, 30, 0.5);
         padding: 20px;
-        border: solid 2px var(--color-modal-border);
-        border-radius: var(--border-radius-normal);
+        border: solid 1.5px #80282B;
+        border-radius: 8px;
         margin-top: 25px;
         position: relative;
     ">
@@ -36,18 +35,19 @@ const rejectMessageTemplate = (title: string, content: string) => {
         <p style="font-size: 1.25rem; padding: 0px">
             ${content}
         </p>
-        <img src="https://forum-cfx-re.akamaized.net/original/5X/c/3/8/e/c38e8346a39c6483385c0727bee5c2abc705156a.png" style="
+        <img src="https://forum-cfx-re.akamaized.net/original/5X/2/d/a/6/2da664a84eecb2609d72cf9bb17466d30b53e717.svg" style="
+            width: 28px;    
             position: absolute;
-            right: 15px;
-            bottom: 15px;
-            opacity: 25%;
+            right: -0.5px;
+            bottom: -1.0px;
+            opacity: 45%;
         ">
     </div>`.replaceAll(/[\r\n]/g, '');
 }
 
 const prepCustomMessage = (msg: string) => {
     if (!msg) return '';
-    return '<br>' + msg.trim().replaceAll(/\n/g, '<br>');
+    return '<br>' + sanitizeSimpleHtml(msg.trim()).replaceAll(/\n/g, '<br>');
 }
 
 //Resp Type
@@ -70,7 +70,7 @@ export default async function PlayerCheckJoin(ctx: InitializedCtx) {
     //If checking not required at all
     if (
         !txConfig.banlist.enabled
-        && txConfig.whitelist.mode === 'disabled'
+        && (txConfig.whitelist.mode === 'disabled' || txConfig.whitelist.mode === 'external')
     ) {
         return sendTypedResp({ allow: true });
     }
@@ -200,7 +200,7 @@ function checkBan(
         //Ban author
         let authorLine = '';
         if (!txConfig.gameFeatures.hideAdminInPunishments) {
-            authorLine = `<strong>${textKeys.label_author}:</strong> ${xss(ban.author)} <br>`;
+            authorLine = `<strong>${textKeys.label_author}:</strong> ${escapeHtmlContent(ban.author)} <br>`;
         }
 
         //Informational notes
@@ -218,7 +218,7 @@ function checkBan(
             title,
             `${expLine}
             <strong>${textKeys.label_date}:</strong> ${banDate} <br>
-            <strong>${textKeys.label_reason}:</strong> ${xss(ban.reason)} <br>
+            <strong>${textKeys.label_reason}:</strong> ${escapeHtmlContent(ban.reason)} <br>
             <strong>${textKeys.label_id}:</strong> <codeid>${ban.id}</codeid> <br>
             ${authorLine}
             ${prepCustomMessage(txConfig.banlist.rejectionMessage)}
@@ -262,7 +262,7 @@ async function checkAdminOnlyMode(
     };
 
     //Check if fivem/discord ids are available
-    if (!validIdsObject.license && !validIdsObject.discord) {
+    if (!validIdsObject.fivem && !validIdsObject.discord) {
         return {
             allow: false,
             reason: rejectMessageTemplate(
@@ -279,8 +279,7 @@ async function checkAdminOnlyMode(
     //Prepare rejection message
     const reason = rejectMessageTemplate(
         textKeys.mode_title,
-        `${textKeys.deny_message} <br>
-        ${prepCustomMessage(txConfig.whitelist.rejectionMessage)}`
+        textKeys.deny_message
     );
     return { allow: false, reason };
 }
@@ -324,7 +323,7 @@ async function checkDiscordMember(
             errorMessage = textKeys.deny_message;
         }
     } catch (error) {
-        errorTitle = `Error validating Discord Server Member Whitelist:`;
+        errorTitle = `Error validating Discord Server Member Allowlist status:`;
         errorMessage = `<code>${(error as Error).message}</code>`;
     }
 
@@ -385,7 +384,7 @@ async function checkDiscordRoles(
             errorMessage = textKeys.deny_notmember_message;
         }
     } catch (error) {
-        errorTitle = `Error validating Discord Role Whitelist:`;
+        errorTitle = `Error validating Discord Role Allowlist status:`;
         errorMessage = `<code>${(error as Error).message}</code>`;
     }
 
diff --git a/core/routes/player/modal.ts b/core/routes/player/modal.ts
index 967dbf493..9fa0cace0 100644
--- a/core/routes/player/modal.ts
+++ b/core/routes/player/modal.ts
@@ -60,8 +60,10 @@ export default async function PlayerModal(ctx: AuthedCtx) {
         isRegistered: player.isRegistered,
         isConnected: player.isConnected,
         license: player.license,
-        ids: player.ids,
-        hwids: player.hwids,
+        idsOnline: player.idsOnline,
+        idsOffline: player.idsOffline,
+        hwidsOnline: player.hwidsOnline,
+        hwidsOffline: player.hwidsOffline,
         actionHistory: processHistoryLog(player.getHistory()),
     }
 
@@ -75,8 +77,6 @@ export default async function PlayerModal(ctx: AuthedCtx) {
         playerData.tsJoined = playerDbData.tsJoined;
         playerData.playTime = playerDbData.playTime;
         playerData.tsWhitelisted = playerDbData.tsWhitelisted ? playerDbData.tsWhitelisted : undefined;
-        playerData.oldIds = playerDbData.ids;
-        playerData.oldHwids = playerDbData.hwids;
         playerData.tsLastConnection = playerDbData.tsLastConnection;
 
         if (playerDbData.notes?.lastAdmin && playerDbData.notes?.tsLastEdit) {
diff --git a/core/routes/resources.js b/core/routes/resources.js
index 97afee328..659e736da 100644
--- a/core/routes/resources.js
+++ b/core/routes/resources.js
@@ -44,13 +44,13 @@ const getResourceSubPath = (resPath) => {
 
 /**
  * Returns the resources list
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function Resources(ctx) {
     if (!txCore.fxRunner.child?.isAlive) {
-        return ctx.utils.render('main/message', {
-            message: '<strong>The resources list is only available when the server is running.</strong>',
-        });
+        return ctx.utils.renderMessage(
+            'The resources list is only available when the server is running.',
+        );
     }
 
     const timeoutMessage = `<strong>Couldn't load the resources list.</strong> <br>
@@ -62,7 +62,7 @@ export default async function Resources(ctx) {
     //Send command request
     const cmdSuccess = txCore.fxRunner.sendCommand('txaReportResources', [], SYM_SYSTEM_AUTHOR);
     if (!cmdSuccess) {
-        return ctx.utils.render('main/message', {message: timeoutMessage});
+        return ctx.utils.renderMessage(timeoutMessage);
     }
 
     //Timer fot list delivery
@@ -84,7 +84,7 @@ export default async function Resources(ctx) {
                     resGroups,
                     disableActions: (ctx.admin.hasPermission('commands.resources')) ? '' : 'disabled',
                 };
-                resolve(['main/resources', renderData]);
+                resolve({ renderData });
             }
         }, 100);
     });
@@ -93,13 +93,19 @@ export default async function Resources(ctx) {
     const tError = new Promise((resolve, reject) => {
         tErrorTimer = setTimeout(() => {
             clearTimeout(tListTimer);
-            resolve(['main/message', {message: timeoutMessage}]);
+            resolve({ renderMessage: timeoutMessage });
         }, 1000);
     });
 
     //Start race and give output
-    const [view, renderData] = await Promise.race([tList, tError]);
-    return ctx.utils.render(view, renderData);
+    const { renderMessage, renderData } = await Promise.race([tList, tError]);
+    if (renderMessage) {
+        return ctx.utils.renderMessage(renderMessage);
+    } else if (renderData) {
+        return ctx.utils.render('main/resources', renderData);
+    } else {
+        return ctx.utils.error(500, 'Invalid response from Promise.race');
+    }
 };
 
 
diff --git a/core/routes/serverLog.js b/core/routes/serverLog.js
index 0e68c6215..8ebc432b8 100644
--- a/core/routes/serverLog.js
+++ b/core/routes/serverLog.js
@@ -5,12 +5,12 @@ const console = consoleFactory(modulename);
 
 /**
  * Returns the server log page
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function ServerLog(ctx) {
     //Check permissions
     if (!ctx.admin.hasPermission('server.log.view')) {
-        return ctx.utils.render('main/message', { message: 'You don\'t have permission to view this page.' });
+        return ctx.utils.renderMessage('You don\'t have permission to view this page.');
     }
 
     const renderData = {
diff --git a/core/routes/serverLogPartial.js b/core/routes/serverLogPartial.js
index 92b91eedf..49fc6a58e 100644
--- a/core/routes/serverLogPartial.js
+++ b/core/routes/serverLogPartial.js
@@ -5,7 +5,7 @@ const console = consoleFactory(modulename);
 
 /**
  * Returns the output page containing the admin log.
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function ServerLogPartial(ctx) {
     //Check permissions
diff --git a/core/routes/settings/saveConfigs.ts b/core/routes/settings/saveConfigs.ts
index 56da9de66..b68bb3638 100644
--- a/core/routes/settings/saveConfigs.ts
+++ b/core/routes/settings/saveConfigs.ts
@@ -46,6 +46,7 @@ const cardNamesMap = {
     general: 'General',
     fxserver: 'FXServer',
     bans: 'Bans',
+    // FIXME:NEXT:UPDATE rename
     whitelist: 'Whitelist',
     discord: 'Discord',
     'game-menu': 'Game Menu',
@@ -377,11 +378,8 @@ const handleDiscordCard: CardHandler = async (inputConfig, sendTypedResp) => {
             - **Bot is not in the server:** you need to [INVITE THE BOT](${inviteUrl}) to join the server.
             - **Wrong bot:** you may be using the token of another discord bot.`;
         } else if (errorCode === 'DangerousPermission') {
-            extraContext = `You need to remove the permissions listed above to be able to enable this bot.
-            This should be done in the Discord Server role configuration page and not in the Dev Portal.
-            Check every single role that the bot has in the server.
-
-            Please keep in mind that:
+            extraContext = `To enable the bot, you need to remove the permissions listed above, which can be done in the Discord Server role configuration page. Please check every single role that the bot has, including the \`@everyone\` role.
+            **Please keep in mind that:**
             - These permissions are dangerous because if the bot token leaks, an attacker can cause permanent damage to your server.
             - No bot should have more permissions than strictly needed, especially \`Administrator\`.
             - You should never have multiple bots using the same token, create a new one for each bot.`;
@@ -399,7 +397,7 @@ const handleDiscordCard: CardHandler = async (inputConfig, sendTypedResp) => {
             type: 'success',
             md: true,
             title: 'FXServer Settings Saved!',
-            msg: `${successMsg}\nIf _(and only if)_ the status embed is not being updated, check the \`System > Console Log\` page to look for embed errors.`,
+            msg: `${successMsg}\nIf _(and only if)_ the status embed is not being updated, check the [System > Console Log](/system/console-log) page to look for embed errors.`,
         }
     };
 }
diff --git a/core/routes/setup/get.ts b/core/routes/setup/get.ts
index 2aa7351d1..5a82493b0 100644
--- a/core/routes/setup/get.ts
+++ b/core/routes/setup/get.ts
@@ -14,7 +14,7 @@ const console = consoleFactory(modulename);
 export default async function SetupGet(ctx: AuthedCtx) {
     //Check permissions
     if (!ctx.admin.hasPermission('master')) {
-        return ctx.utils.render('main/message', {message: 'You need to be the admin master to use the setup page.'});
+        return ctx.utils.renderMessage('You need to be the admin master to use the setup page.');
     }
 
     // Ensure correct state for the setup page
diff --git a/core/routes/setup/post.js b/core/routes/setup/post.js
index e310370c3..246cf0069 100644
--- a/core/routes/setup/post.js
+++ b/core/routes/setup/post.js
@@ -48,7 +48,7 @@ const getPotentialServerDataFolders = (source) => {
  * Handle all the server control actions
  * FIXME: separate into validate.ts, saveDeployer.ts, and saveLocal.ts files
  * FIXME: or maybe postDeployer.ts, and postLocal.ts files
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 export default async function SetupPost(ctx) {
     //Sanity check
@@ -101,7 +101,7 @@ export default async function SetupPost(ctx) {
 
 /**
  * Handle Validation of a remote recipe/template URL
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleValidateRecipeURL(ctx) {
     //Sanity check
@@ -127,7 +127,7 @@ async function handleValidateRecipeURL(ctx) {
 
 /**
  * Handle Validation of a remote recipe/template URL
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleValidateLocalDeployPath(ctx) {
     //Sanity check
@@ -148,7 +148,7 @@ async function handleValidateLocalDeployPath(ctx) {
 
 /**
  * Handle Validation of Local (existing) Server Data Folder
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleValidateLocalDataFolder(ctx) {
     //Sanity check
@@ -160,38 +160,30 @@ async function handleValidateLocalDataFolder(ctx) {
     //FIXME: replace with stuff in core/routes/settings/saveConfigs.ts > handleFxserverCard
     try {
         if (!fse.existsSync(path.join(dataFolderPath, 'resources'))) {
-            const recoveryTemplate = `The path provided is invalid. <br>
-                But it looks like <code>{{attempt}}</code> is correct. <br>
-                Do you want to use it instead?`;
-
             //Recovery if parent folder
             const attemptIsParent = path.join(dataFolderPath, '..');
             if (fse.existsSync(path.join(attemptIsParent, 'resources'))) {
-                const message = recoveryTemplate.replace('{{attempt}}', attemptIsParent);
-                return ctx.send({success: false, message, suggestion: attemptIsParent});
+                return ctx.send({success: false, suggestion: attemptIsParent});
             }
 
             //Recovery parent inside folder
             const attemptOutside = getPotentialServerDataFolders(path.join(dataFolderPath, '..'));
             if (attemptOutside.length >= 1) {
-                const message = recoveryTemplate.replace('{{attempt}}', attemptOutside[0]);
-                return ctx.send({success: false, message, suggestion: attemptOutside[0]});
+                return ctx.send({success: false, suggestion: attemptOutside[0]});
             }
 
             //Recovery if resources
             if (dataFolderPath.includes('/resources')) {
                 const attemptRes = dataFolderPath.split('/resources')[0];
                 if (fse.existsSync(path.join(attemptRes, 'resources'))) {
-                    const message = recoveryTemplate.replace('{{attempt}}', attemptRes);
-                    return ctx.send({success: false, message, suggestion: attemptRes});
+                    return ctx.send({success: false, suggestion: attemptRes});
                 }
             }
 
             //Recovery subfolder
             const attemptInside = getPotentialServerDataFolders(dataFolderPath);
             if (attemptInside.length >= 1) {
-                const message = recoveryTemplate.replace('{{attempt}}', attemptInside[0]);
-                return ctx.send({success: false, message, suggestion: attemptInside[0]});
+                return ctx.send({success: false, suggestion: attemptInside[0]});
             }
 
             //really invalid :(
@@ -210,7 +202,7 @@ async function handleValidateLocalDataFolder(ctx) {
 
 /**
  * Handle Validation of CFG File
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleValidateCFGFile(ctx) {
     //Sanity check
@@ -243,7 +235,7 @@ async function handleValidateCFGFile(ctx) {
 /**
  * Handle Save settings for local server data imports
  * Actions: sets serverDataPath/cfgPath, starts the server, redirect to live console
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleSaveLocal(ctx) {
     //Sanity check
@@ -322,7 +314,7 @@ async function handleSaveLocal(ctx) {
 /**
  * Handle Save settings for remote recipe importing
  * Actions: download recipe, starts deployer
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleSaveDeployerImport(ctx) {
     //Sanity check
@@ -383,7 +375,7 @@ async function handleSaveDeployerImport(ctx) {
 /**
  * Handle Save settings for custom recipe
  * Actions: download recipe, starts deployer
- * @param {object} ctx
+ * @param {import('@modules/WebServer/ctxTypes').AuthedCtx} ctx
  */
 async function handleSaveDeployerCustom(ctx) {
     //Sanity check
diff --git a/core/routes/whitelist/actions.ts b/core/routes/whitelist/actions.ts
index 6c6f56bd9..7c4b3a728 100644
--- a/core/routes/whitelist/actions.ts
+++ b/core/routes/whitelist/actions.ts
@@ -144,7 +144,7 @@ async function handleRequests(ctx: AuthedCtx, action: any): Promise<GenericApiRe
         //Find request
         const requests = txCore.database.whitelist.findManyRequests({ id: reqId });
         if (!requests.length) {
-            return { error: `Whitelist request ID ${reqId} not found.` };
+            return { error: `Allowlist request ID ${reqId} not found.` };
         }
         const req = requests[0]; //just getting the first
 
diff --git a/core/tsconfig.json b/core/tsconfig.json
index 0884394f0..582067a40 100644
--- a/core/tsconfig.json
+++ b/core/tsconfig.json
@@ -58,7 +58,6 @@
   "include": [
     "**/*",
     "../shared/",
-    "../dynamicAds2.json",
   ],
   "references": [
     { "path": "../shared" }
diff --git a/core/txManager.ts b/core/txManager.ts
index d0ccff770..76bcbacfb 100644
--- a/core/txManager.ts
+++ b/core/txManager.ts
@@ -7,6 +7,7 @@ import type { GlobalStatusType } from "@shared/socketioTypes";
 import quitProcess from "@lib/quitProcess";
 import consoleFactory, { processStdioEnsureEol, setTTYTitle } from "@lib/console";
 import { isNumber, isString } from "@modules/CacheStore";
+import { txEnv } from "./globalData";
 const console = consoleFactory('Manager');
 
 //Types
@@ -62,9 +63,11 @@ export default class TxManager {
         }, 5000);
 
         //Updates the terminal title every 15 seconds
-        setInterval(() => {
-            setTTYTitle(`(${txCore.fxPlayerlist.onlineCount}) ${txConfig.general.serverName} - txAdmin`);
-        }, 15000);
+        if(txEnv.setConsoleTitle){
+            setInterval(() => {
+                setTTYTitle(`(${txCore.fxPlayerlist.onlineCount}) ${txConfig.general.serverName} - txAdmin`);
+            }, 15000);
+        }
 
         //Pre-calculate static data
         setTimeout(() => {
diff --git a/docs/dev-notes.md b/docs/dev-notes.md
index d43378e74..9cffc4d52 100644
--- a/docs/dev-notes.md
+++ b/docs/dev-notes.md
@@ -4,119 +4,57 @@ Legend:
 - [!] -> Release Blocker
 - [?] -> Lower priority or pending investigation
 
+## Before Updating:
+- Search for all FIXME:NEXT:UPDATE
+- Search for all FIXME:REMOVE:NEXT:UPDATE
+- Re-enable diagnostics report
+
+
+## Newer TODOs
+- [ ] be able to VIEW your own permissions on the admins page 
+- [ ] save a log of the previous server data paths
+- [ ] Use [GetPlayerPeerStatistics](https://docs.fivem.net/natives/?_0x9A928294) somewhere
+- [ ] Be able to set a nickname to a player
+    - Ref: https://discord.com/channels/577993482761928734/1459523232163041464/1459523232163041464
+- [?] Check: E:\TMP\test-cache-size\index.ts
+    - I don't recall what is that tho 🤷‍♀️
+    - Maybe a way to show to the users the size of their assets
+
+## Feat
+- [x] Option to delete player identifiers
+    - Ref: https://github.com/tabarra/txAdmin/issues/751
+- [ ] Option to delete "expire now" bans
+- [ ] Option to delete bans/warns
+
 ## Small feat
-- [x] improve UX for debugging bans
-    - tweak: improved readability on player join/leave events on server log
-    - feat(core): added server log for blocked joins of banned players
-    - feat(panel): added button to compare player/action ids
-    - feat(panel): added copy IDs button to player and action modals
-- [x] feat(core): implement custom serveStatic middleware
-- [x] feat(panel/console): added hidden copy options
 
 ## Fixes
-- [x] fix double server boot message:
-    - happens when some page starts the server and redirects you to the live console
-    - you join the room and gets initial data (directly from logger)
-    - while the websocket out buffer still haven't sent the boot message
-- [x] fix: crashes table overflowing (DrilldownCrashesSubcard.tsx)
-    - [x] reported cases of crash reason too big without word break causing page to scroll horizontal 
 - [!] radix select/dropdown inside dialog
     - test the settings one as well as the ban form inside the player modal
 - [ ] the console lines are shorter on first full render (ctrl+f5) and on f5 it fixes itself
     - didn't happen in v7.2.2, not sure about v7.3.2
     - doesn't seem to be neither fontSize nor lineHeight
     - NOTE: this might solve itself with the WebGL renderer update, so try that first
-
-## Refactor + DX
-- [x] deprecate fxRunner.srvCmd
-    - deprecate liveConsoleCmdHandler 
-    - turn srvCmd into sendRawCommand
-    - use sendRawCommand in sendCommand (leave the fxserver.log*Command in sendRawCommand)
-- [x] setup txData+profile on `index.js` before instantiating TxAdmin
-- [x] process.exit reorg into lib/fatalError
-- [x] move `ConfigVault.setupFolderStructure();` to index
-- [x] improve db downgrade message
-- [x] txGlobal.database.[players/actions/whitelist/cleanup].*
-- [x] txGlobal/globals
-- [x] txManager should be managing the deployer, not the modules
-- [x] txManager should be exposing methods to get the status
-- [x] em vários módilos eu fiz `this.config = txConfig.xxxxx`, mas tem que checar se o módulo não exige que o config não mude sem o this.refreshConfig
-    - provavelmente melhor esperar o refactor das configs
-    - [x] discord bot
-    - [x] fxrunner
-    - [x] health monitor
-    - [x] logger(s)
-    - [x] player database
-    - [x] scheduler
-    - [x] REFERENCIAS EXTERNAS?
-- [x] .env
-    - [x] convert builders to use txDevEnv
-    - [x] convert tx code use txDevEnv
-- [x] Config migrations:
-    - [x] commit renaming wip
-    - [x] decide on the REVIEW_SAVE_EMPTY_STRING vars
-    - [x] write schemas
-    - [x] write parser + migration
-    - [x] migrate the scope `fxRunner` -> `server`
-    - [x] migrate txConfig.logger 
-    - [x] implement config saving
-    - [x] migrate txConfig.banTemplates
-    - [x] migrate txConfig.gameFeatures.playerModePtfx
-    - [x] implement changelog
-    - [x] implement the refreshConfig() stuff
-    - [x] migrate the old uses of refreshConfig to new config watcher
-    - [x] update `./core/boot/setup.ts` to use `public static ConfigStore.getEmptyConfigFile()`
-    - [x] migrate setup webroute
-    - [x] migrate deployer webroute
-    - [x] migrate masterActions->reset webroute
-    - [x] New Settings Page:
-        - [x] hide onesync
-        - [x] new layout
-        - [x] move all options from old page to new page (no code just yet)
-        - [x] make route to get all settings
-        - [x] create template tab for easy copy paste
-        - [x] figure out the use of id/names in the pathParams, confirm modal, error msg
-        - [x] apply template to all tabs
-        - [ish] json input modals
-        - [x] write down the client-side validations
-        - [x] perms: message if no settings.write perms (no token)
-        - [x] write saveConfigs.ts
-        - [x] perms: message if no settings.view perms (page error)
-        - [x] double check:
-            - [x] FIXME:NC
-            - [x] check if all disabled={pageCtx.isReadOnly} were applied
-            - [x] check if all text fields and selects have the `htmlFor`
-            - [x] check if all textarea fields are auto-sized
-            - [x] If shutdownNoticeDelayMs & restartSpawnDelayMs are really ms, and being migrated from secs for the case of shutdownNoticeDelay
-    - [x] remove `settings.ejs` and `core/routes/settings/get-old.ts`
-    - [x] migrate discord bot `refreshConfig()` and settings save
-    - [x] remove `./core/configMapping.tmp.ts` (was committed)
-    - [x] test `txConfig.server.startupArgs`
-        - [x] test if `server.startupArgs = ['+set']`, breaks the next 2 args 
-    - [x] check all ConfigStore methods (including txCore.configStore.getRawFile())
-    - [x] remap configs in `core/routes/diagnostics/sendReport.ts` and test it
-    - [x] change setup & deployer page to suggest relative `server.cfg`
-    - [x] check all modules to remove their
-        - [x] config validation at constructor
-        - [x] type definitions
-    - [x] check all typescript errors in all files
-    - [x] test setting up new profile from scratch
-    - [x] disable the "view changelog" button, or write the modal code
-    - [x] write dev notes on the config system (README.md in the panel settings and core configstore?)
-- [x] Full FXRunner rewrite
-- [x] add `.yarn.installed` to the dist? even in dev
+- [!] if you put the cfg path in the server data path (as in, full path including `server.cfg`), the error message is silly suggesting `.` as the correct path. Instead, it should just detect the server.cfg file and remove it, without warning.
+- [!] add new env var to disable tty titles
+- [ ] change deployer path picking because `FiveMBasicServerCFXDefault_1B7632.base` is obnoxious
+    - [ ] try to avoind doing the hex timestamp, instead just adding a suffix for conflict resolution like windows does
+    - [ ] maybe hardcode something for the cfx default recipes to shorten it, or some generic solution
+    - [ ] maybe just lowercase it all, with `-` for separation
 
 ## Other stuff
-- [x] new env vars
-- [x] remove dynamicAds from the modules
-- [x] fix custom locale
+- [ ] Review & merge manually https://github.com/tabarra/txAdmin/pull/1004/files
 - [!] add stats tracking for the framework team (ask them, idk)
 - [!] package updates - test radix stuff
 - [!] commit stashed stuff
 - [!] check txAdmin-private
 - [ ] implement `cleanFullPath.ts` in settings save ui & api for comparison consistency
     - [ ] add it to `setup/save.js -> handleValidateLocalDataFolder()` as well
-
+- probably use the new natives:
+    - GET_PLAYER_PEER_STATISTICS 
+    - ADD_CONVAR_CHANGE_LISTENER
+    - GET_CONVAR_FLOAT
+    - GET_CONVAR_BOOL
 
 
 =======================================================================
@@ -174,6 +112,8 @@ Legend:
 - [ ] fix circular dependencies
     - search for `circular_dependency`
     - use `madge` (command at the bottom of file)
+- [ ] migrate shadcn to use the radix monorepo vis its migration tool
+    - ref: https://x.com/shadcn/status/1932819652524355998
 
 ## Previous bugs
 - [ ] use `ScanResourceRoot()`
@@ -183,7 +123,7 @@ Legend:
 
 ## Pending Improvements
 - [ ] Settings Page:
-    - [ ] bake in the defaults, so so SwitchText's don't show fale initial value
+    - [ ] bake in the defaults, so so SwitchText's don't show false initial value
     - [ ] check for pending changes on the navigate-away buttons
     - [ ] use jsonForgivingParse for embed jsons and custom locale
     - [ ] use the standalone json editor page
@@ -194,9 +134,9 @@ Legend:
         - try messing with the canvas size +- 0.5px
     - [ ] review page layout: 
         - [ ] make it less card-y
-        - [ ] fix crashes table is not responsive
-        - [ ] fix scroll popping in/out
-    - [ ] switch from `useSWRImmutable` to `useSWR`
+        - [x] fix crashes table is not responsive
+        - [x] fix scroll popping in/out
+    - [x] switch from `useSWRImmutable` to `useSWR`
     - [ ] add drilldown interval buttons
 - Dashboard stuff:
     - [ ] add testing for getServerStatsData
@@ -232,6 +172,7 @@ Legend:
     - [ref](/core/playerLogic/playerClasses.ts#L281)
     - [ ] create simple page to list top 100 players by playtime in the last 30d, 14d, 7d, yesterday, today
     - if storing in a linear UInt16Array, 100k players * 120d * 4bytes per date = 48mb
+- [ ] on migration, sort all the actions and players, due to the search sorting bug
 
 
 
@@ -353,8 +294,8 @@ https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
 - [ ] live console
     - [ ] if socket connects but no data received, add a warning to the console and wipe it after first write
     - [ ] persistent cls via ts offsets
+        - make sure it accounts for empty lines created by pressing enter on empty input
     - [ ] improve the bufferization to allow just loading most recent "block" and loading prev blocks via button
-    - [ ] options dropdown?
     - [ ] console nav button to jump to server start or errors? 
         - Or maybe filter just error lines (with margin)
         - Or maybe even detect all channels and allow you to filter them, show dropdown sorted by frequency
@@ -383,7 +324,8 @@ https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
 - [ ] remove more pending DynamicNewBadge/DynamicNewItem (settings page as well)
 - [ ] reevaluate globals?.tmpSetHbDataTracking
 - [ ] fix socket.io multiple connections - start a single instance when page opens, commands to switch rooms
-- [ ] switch tx to lua54
+- [ ] considering lua54 is enabled by default, use new options
+- [ ] test `node_version '22'`
 
 - [ ] build: generate fxmanifest files list dynamically
     - node 22 use fs.glob
@@ -423,6 +365,8 @@ https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
     - change deployer and some other path manipulations to use `path.matchesGlob`
     - replace all `global.*` to `globalThis.*`
     - use `@tsconfig/node22`
+    - Update discord.js and remove the hacky error catching solution 
+        - ref: https://github.com/discordjs/discord.js/issues/9621#event-9828143455
 
 
 - [ ] Migrate all log routes
@@ -437,9 +381,6 @@ https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
     - add tags to the players page search box (separate dropdown?)
     - maybe https://shadcnui-expansions.typeart.cc/docs/multiple-selector
 
-- [ ] create new "Remove Player Data" permission which would allow to delete bans/warns, players and player identifiers
-    - Ref: https://github.com/tabarra/txAdmin/issues/751
-
 - [ ] maybe use [this lib](https://www.npmjs.com/package/ntp-time-sync) to check for clock skew so I can remove the complexity of dealing with possible desync between core and ui on player modal, scheduler, etc;
     - even better: clients2.google.com/time/1/current - there are alternatives
 - [ ] slide gesture to open/close the sidebars on mobile
@@ -464,6 +405,7 @@ https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
 - reset fxserver - becomes server add/remove/edit, or just an option in settings -> fxserver
 - clean database - "bulk changes" button at the players page
 - revoke whitelists - button to whitelist pages
+- option to revoke all bans/warns (Issue #910)
 
 ### Admin manager:
 - stats on admins
@@ -499,7 +441,7 @@ https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
 
 ### Action Modal:
 - feat requests:
-    - be able to delete bans/warns with new permission (Issue #910)
+    - be able to delete bans/warns with new permission (Issue #751)
     - top server asked for the option to edit ban duration (expire now / change)
     - Thought: need to add an edit log like the one we have for player notes
     - Thought: maybe we could use some dedicated icons for Expired, Edited, Revoked
@@ -699,6 +641,7 @@ https://uicolors.app/create
 https://www.tailwindshades.com/
 https://contrast.tools/?tab=apca
 https://atmos.style/contrast-checker
+https://tweakcn.com/editor/theme
 https://realtimecolors.com/
 https://www.learnui.design/blog/color-in-ui-design-a-practical-framework.html
 https://www.refactoringui.com/previews/building-your-color-palette
diff --git a/docs/env-config.md b/docs/env-config.md
index 0b33c8388..672ef56f1 100644
--- a/docs/env-config.md
+++ b/docs/env-config.md
@@ -128,17 +128,26 @@ The specific way to set up those variables vary from system to system, and there
 
 ## Examples
 
-Migrating a dev server using an old `start.bat`:
-```diff
- @echo off
-+set TXHOST_DATA_PATH=E:\FiveM\txData-dev
-+set TXHOST_TXA_PORT=40125
--FXServer.exe +set serverProfile "server2" +set txAdminPort "40125"
-+FXServer.exe
- pause
+### Migrate old `start.bat`
+Replace this:
+```batch
+@echo off
+"E:/FiveM/13079//FXServer.exe" +set serverProfile "server2" +set txAdminPort "40125"
+pause
+```
+With this:
+```batch
+@echo off
+set TXHOST_DATA_PATH=E:\FiveM\txData-dev
+set TXHOST_TXA_PORT=40125
+"E:/FiveM/13079//FXServer.exe"
+pause
 ```
+> [!NOTE]
+> Replace `"E:/FiveM/13079//FXServer.exe"` with the path you see in your existing `*.bat`.
+
 
-Setting up a dev server on Windows with a `env.bat` file:
+### Setting up a dev server on Windows with a `env.bat` file:
 ```batch
 @REM Deployer defaults
 set TXHOST_DEFAULT_CFXKEY=cfxk_11hIT156dX0F0ekFVsuda_fQ0ZYS
@@ -154,7 +163,7 @@ set TXHOST_FXS_PORT=30125
 set TXHOST_MAX_SLOTS=8
 ```
 
-Setting a GSP configuration on Docker with a `.env` file:
+### Setting a GSP configuration on Docker with a `.env` file:
 ```dotenv
 # So txAdmin suggests the right path during setup
 TXHOST_DATA_PATH=/home/container
diff --git a/docs/menu.md b/docs/menu.md
index 11f233946..bba163b84 100644
--- a/docs/menu.md
+++ b/docs/menu.md
@@ -113,5 +113,5 @@ You can find development instructions regarding the menu [here.](https://github.
 - **Q**: Why don't the 'Heal' options revive a player when using ESX/QBCore/etc?
 - **A**: Many frameworks independently handle a "dead" state for a player, meaning
   the menu is unable to reset this state in an resource agnostic form directly. To establish compatibility 
-  with any framework, txAdmin will emit an [txAdmin:events:healedPlayer](https://github.com/tabarra/txAdmin/blob/master/docs/events.md#txadmineventshealedplayer-v48) 
+  with any framework, txAdmin will emit an [txAdmin:events:playerHealed](https://github.com/tabarra/txAdmin/blob/master/docs/events.md#txadmineventsplayerhealed) 
   for developers to handle.
diff --git a/docs/permissions.md b/docs/permissions.md
index 96c4a9a1b..38e5cec37 100644
--- a/docs/permissions.md
+++ b/docs/permissions.md
@@ -30,3 +30,4 @@ The permissions are saved in the `txData/admins.json` file and can be edited thr
 - `players.spectate`: Spectate a player.
 - `players.teleport`: Teleport self or a player.
 - `players.troll`: Use the Troll Menu.
+- `players.remove_ids`: Remove IDs/HWIDs of player from the database.
diff --git a/dynamicAds.json b/dynamicAds.json
deleted file mode 100644
index 6e4ce81f4..000000000
--- a/dynamicAds.json
+++ /dev/null
@@ -1,36 +0,0 @@
-{
-    "login": [
-        {
-            "text": "DDoS protected & preconfigured FiveM txAdmin servers",
-            "logoLightMode": "img/zap256_black.png",
-            "logoDarkMode": "img/zap256_white.png",
-            "link": "http://zap-hosting.com/txAdmin3"
-        }
-    ],
-    "main": [
-        {
-            "text": "DDoS protected & preconfigured <br> FiveM txAdmin servers",
-            "logoLightMode": "img/zap256_black.png",
-            "logoDarkMode": "img/zap256_white.png",
-            "linkDesktop": "http://zap-hosting.com/txAdmin5",
-            "linkMobile": "http://zap-hosting.com/txAdmin7"
-        }
-    ],
-    "loginZap": [
-        {
-            "text": "DDoS protected & preconfigured FiveM txAdmin servers",
-            "logoLightMode": "img/zap256_black.png",
-            "logoDarkMode": "img/zap256_white.png",
-            "link": "http://zap-hosting.com/txAdmin3"
-        }
-    ],
-    "mainZap": [
-        {
-            "text": "DDoS protected & preconfigured <br> FiveM txAdmin servers",
-            "logoLightMode": "img/zap256_black.png",
-            "logoDarkMode": "img/zap256_white.png",
-            "linkDesktop": "http://zap-hosting.com/txAdmin5",
-            "linkMobile": "http://zap-hosting.com/txAdmin7"
-        }
-    ]
-}
diff --git a/dynamicAds2.json b/dynamicAds2.json
deleted file mode 100644
index aafdbe203..000000000
--- a/dynamicAds2.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "login": {
-        "img": "img/zap_login.png",
-        "url": "http://zap-hosting.com/txAdmin3"
-    },
-    "main": {
-        "img": "img/zap_main.png",
-        "url": "http://zap-hosting.com/txAdmin5"
-    },
-    "loginZap": {
-        "img": "img/zap_login.png",
-        "url": "http://zap-hosting.com/txAdmin3"
-    },
-    "mainZap": {
-        "img": "img/zap_main.png",
-        "url": "http://zap-hosting.com/txAdmin5"
-    }
-}
diff --git a/locale/en.json b/locale/en.json
index 9bff318fb..21240d4e3 100644
--- a/locale/en.json
+++ b/locale/en.json
@@ -33,28 +33,28 @@
     },
     "whitelist_messages": {
         "admin_only": {
-            "mode_title": "This server is in <strong>Admin-only</strong> mode.",
+            "mode_title": "This server is in <strong>Admin-only (maintenance)</strong>.",
             "insufficient_ids": "You do not have <code>discord</code> or <code>fivem</code> identifiers, and at least one of them is required to validate if you are a txAdmin administrator.",
             "deny_message": "Your identifiers are not assigned to any txAdmin administrator."
         },
         "guild_member": {
-            "mode_title": "This server is in <strong>Discord server Member Whitelist</strong> mode.",
+            "mode_title": "This server is in <strong>Discord server Member Allowlist</strong> mode.",
             "insufficient_ids": "You do not have the <code>discord</code> identifier, which is required to validate if you have joined our Discord server. Please open the Discord Desktop app and try again (the Web app won't work).",
             "deny_title": "You are required to join our Discord server to connect.",
             "deny_message": "Please join the guild %{guildname} then try again."
         },
         "guild_roles": {
-            "mode_title": "This server is in <strong>Discord Role Whitelist</strong> mode.",
+            "mode_title": "This server is in <strong>Discord Role Allowlist</strong> mode.",
             "insufficient_ids": "You do not have the <code>discord</code> identifier, which is required to validate if you have joined our Discord server. Please open the Discord Desktop app and try again (the Web app won't work).",
             "deny_notmember_title": "You are required to join our Discord server to connect.",
             "deny_notmember_message": "Please join %{guildname}, get one of the required roles, then try again.",
-            "deny_noroles_title": "You do not have a whitelisted role required to join.",
-            "deny_noroles_message": "To join this server you are required to have at least one of the whitelisted roles on the guild %{guildname}."
+            "deny_noroles_title": "You do not have a allowlisted role required to join.",
+            "deny_noroles_message": "To join this server you are required to have at least one of the allowlisted roles on the guild %{guildname}."
         },
         "approved_license": {
-            "mode_title": "This server is in <strong>License Whitelist</strong> mode.",
+            "mode_title": "This server is in <strong>License Allowlist</strong> mode.",
             "insufficient_ids": "You do not have the <code>license</code> identifier, which means the server has <code>sv_lan</code> enabled. If you are the server owner, you can disable it in the <code>server.cfg</code> file.",
-            "deny_title": "You are not whitelisted to join this server.",
+            "deny_title": "You are not allowlisted to join this server.",
             "request_id_label": "Request ID"
         }
     },
diff --git a/nui/src/components/MainPage/MainPageList.tsx b/nui/src/components/MainPage/MainPageList.tsx
index 54ebcc8af..a17bb72d3 100644
--- a/nui/src/components/MainPage/MainPageList.tsx
+++ b/nui/src/components/MainPage/MainPageList.tsx
@@ -85,6 +85,7 @@ export const MainPageList: React.FC = () => {
   const menuVisible = useIsMenuVisibleValue();
   const isRedm = useIsRedmValue()
   const { closeMenu } = usePlayerModalContext();
+  const [lastVehicleSpawned, setLastVehicleSpawned] = useState<string | null>(null);
 
   //FIXME: this is so the menu resets multi selectors when we close it
   // but it is not working, and when I do this the first time we press
@@ -198,9 +199,10 @@ export const MainPageList: React.FC = () => {
       title: t("nui_menu.page_main.vehicle.spawn.dialog_title"),
       description: t("nui_menu.page_main.vehicle.spawn.dialog_desc"),
       placeholder: 'any vehicle model or ' + dialogData.shortcuts.join(', '),
-      suggestions: dialogData.shortcuts,
-      onSubmit: (modelName: string) => {
-        modelName = vehiclePlaceholderReplacer(modelName, dialogData.shortcutsData);
+      suggestions: lastVehicleSpawned ? [lastVehicleSpawned, ...dialogData.shortcuts] : dialogData.shortcuts,
+      onSubmit: (modelInput: string) => {
+        const { modelName } = vehiclePlaceholderReplacer(modelInput, dialogData.shortcutsData);
+        setLastVehicleSpawned(modelName);
         fetchNui("spawnVehicle", { model: modelName });
         if (autoClose) {
           closeMenu()
@@ -516,7 +518,7 @@ export const MainPageList: React.FC = () => {
       //   onSelect: handleSpawnWeapon,
       // },
     ],
-    [playerMode, teleportMode, vehicleMode, healMode, serverCtx, isRedm]
+    [playerMode, teleportMode, vehicleMode, healMode, serverCtx, isRedm, lastVehicleSpawned]
   );
 
   return (
diff --git a/nui/src/components/PlayerModal/Tabs/DialogActionView.tsx b/nui/src/components/PlayerModal/Tabs/DialogActionView.tsx
index 5d72d9480..0fc4fd9dc 100644
--- a/nui/src/components/PlayerModal/Tabs/DialogActionView.tsx
+++ b/nui/src/components/PlayerModal/Tabs/DialogActionView.tsx
@@ -188,7 +188,7 @@ const DialogActionView: React.FC = () => {
       params.set("autofill", "true");
       params.set("name", playerDetails.player.pureName);
 
-      for (const id of playerDetails.player.ids) {
+      for (const id of playerDetails.player.idsOnline) {
         if (id.startsWith("discord:")) {
           params.set("discord", id);
         } else if (id.startsWith("fivem:")) {
diff --git a/nui/src/components/PlayerModal/Tabs/DialogIdView.tsx b/nui/src/components/PlayerModal/Tabs/DialogIdView.tsx
index 1025ef070..e1c41313d 100644
--- a/nui/src/components/PlayerModal/Tabs/DialogIdView.tsx
+++ b/nui/src/components/PlayerModal/Tabs/DialogIdView.tsx
@@ -52,13 +52,13 @@ const DialogIdView: React.FC = () => {
   };
 
   const getCurrentIds = () => {
-    if (!Array.isArray(playerDetails.player.ids) || !playerDetails.player.ids.length) {
-      return <em>No identifiers saved.</em>
+    if (!Array.isArray(playerDetails.player.idsOnline) || !playerDetails.player.idsOnline.length) {
+      return <em>No identifiers online.</em>
     } else {
-      return playerDetails.player.ids.map((ident) => (
-        <Box className={classes.codeBlock} key={ident}>
-          <Typography className={classes.codeBlockText}>{ident}</Typography>
-          <IconButton onClick={() => handleCopyToClipboard(ident)} size="large">
+      return playerDetails.player.idsOnline.map((id) => (
+        <Box className={classes.codeBlock} key={id}>
+          <Typography className={classes.codeBlockText}>{id}</Typography>
+          <IconButton onClick={() => handleCopyToClipboard(id)} size="large">
             <FileCopy />
           </IconButton>
         </Box>
@@ -67,32 +67,28 @@ const DialogIdView: React.FC = () => {
   }
 
   const getOldIds = () => {
-    if (!Array.isArray(playerDetails.player.oldIds) || !playerDetails.player.oldIds.length) {
-      return <em>No identifiers saved.</em>
+    if (!Array.isArray(playerDetails.player.idsOffline) || !playerDetails.player.idsOffline.length) {
+      return <em>No previous identifiers saved.</em>
     } else {
-      const filtered = playerDetails.player.oldIds.filter(id => !playerDetails.player.ids.includes(id));
-      if (!filtered.length) {
-        return <em>No identifiers saved.</em>
-      } else {
-        return playerDetails.player.oldIds.map((ident) => (
-          <Box className={classes.codeBlock} key={ident}>
-            <Typography className={classes.codeBlockText}>{ident}</Typography>
-            <IconButton onClick={() => handleCopyToClipboard(ident)} size="large">
-              <FileCopy />
-            </IconButton>
-          </Box>
-        ));
-      }
+      return playerDetails.player.idsOffline.map((ids) => (
+        <Box className={classes.codeBlock} key={ids}>
+          <Typography className={classes.codeBlockText}>{ids}</Typography>
+          <IconButton onClick={() => handleCopyToClipboard(ids)} size="large">
+            <FileCopy />
+          </IconButton>
+        </Box>
+      ));
     }
   }
 
   const getAllHwids = () => {
-    if (!Array.isArray(playerDetails.player.oldHwids) || !playerDetails.player.oldHwids.length) {
+    const allHwids = [...playerDetails.player.hwidsOnline ?? [], ...playerDetails.player.hwidsOffline ?? []];
+    if (!allHwids.length) {
       return <em>No HWIDs saved.</em>
     } else {
       return <Box className={classes.codeBlock}>
         <span className={classes.codeBlockHwids}>
-          {playerDetails.player.oldHwids.join('\n')}
+          {allHwids.join('\n')}
         </span>
       </Box>
     }
diff --git a/nui/src/utils/vehicleSpawnDialogHelper.ts b/nui/src/utils/vehicleSpawnDialogHelper.ts
index e2bdc8671..d10d90d97 100644
--- a/nui/src/utils/vehicleSpawnDialogHelper.ts
+++ b/nui/src/utils/vehicleSpawnDialogHelper.ts
@@ -48,17 +48,19 @@ const redmShortcuts: ShortcutsDataType = {
  * Returns the input string or replaces it with a random vehicle shortcut
  */
 export const vehiclePlaceholderReplacer = (vehInput: string, shortcutsData: ShortcutsDataType) => {
-    vehInput = vehInput.trim().toLowerCase();
-    if (vehInput in shortcutsData) {
-        const shortcut = shortcutsData[vehInput as keyof typeof shortcutsData];
+    let modelName = vehInput.trim().toLowerCase();
+    let isShortcut = false;
+    if (modelName in shortcutsData) {
+        isShortcut = true;
+        const shortcut = shortcutsData[modelName as keyof typeof shortcutsData];
         if (shortcut.easterEgg && Math.random() < 0.05) {
-            vehInput = shortcut.easterEgg;
+            modelName = shortcut.easterEgg;
         } else {
-            vehInput = arrayRandom(shortcut.default);
+            modelName = arrayRandom(shortcut.default);
         }
     }
 
-    return vehInput;
+    return { modelName, isShortcut };
 }
 
 /**
diff --git a/package-lock.json b/package-lock.json
index a7cae8e0e..233b9af75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -694,6 +694,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -797,6 +798,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -840,6 +842,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
       "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1800,7 +1803,6 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.1.tgz",
       "integrity": "sha512-ynG9ayhxgCsHJ/dtDcT1v78/r2GwQyP3E0hPz3GdPRl0uFJz/uUTtI5KFYwadXmbC+Uv3bfB8laZ6+Cpzh03gA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.26.0",
         "@mui/core-downloads-tracker": "^6.3.1",
@@ -1849,8 +1851,7 @@
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
       "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@mui/private-theming": {
       "version": "6.3.1",
@@ -3258,6 +3259,215 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz",
+      "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+      "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+      "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+      "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -5210,6 +5420,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",
       "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.20.0"
       }
@@ -5259,6 +5470,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -5418,6 +5630,7 @@
       "integrity": "sha512-6M8taKyOETY1TKHp0x8ndycipTVgmp4xtg5QpEZzXxDhNvvHOJi5rLRkLr8SK3jTgD5l4fTlvBiRdfsuWydxBw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.19.0",
         "@typescript-eslint/types": "8.19.0",
@@ -5770,7 +5983,8 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
       "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/abbrev": {
       "version": "2.0.0",
@@ -5810,6 +6024,7 @@
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6248,6 +6463,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -6818,6 +7034,7 @@
       "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -6965,6 +7182,7 @@
       "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -7040,7 +7258,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3": {
       "version": "7.9.0",
@@ -7377,6 +7596,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -8154,6 +8374,7 @@
       "integrity": "sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9944,6 +10165,7 @@
       "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.11.0.tgz",
       "integrity": "sha512-zKfoBBD1uDw3rljwHkt0fWuja1B76R7CjznuBO+mSX6jpsO1EBeWNRKpeaQho9yPI/pvCv4recGfgOXGxwPZvQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12.20.0"
       },
@@ -10564,6 +10786,16 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -10573,6 +10805,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
@@ -10597,6 +10857,107 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -10832,6 +11193,127 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -11656,6 +12138,7 @@
       "resolved": "https://registry.npmjs.org/node-polyglot/-/node-polyglot-2.6.0.tgz",
       "integrity": "sha512-ZZFkaYzIfGfBvSM6QhA9dM8EEaUJOVewzGSRcXWbJELXDj0lajAtKaENCYxvF5yE+TgHg6NQb0CmgYMsMdcNJQ==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "hasown": "^2.0.2",
         "object.entries": "^1.1.8",
@@ -12581,6 +13064,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.1",
@@ -12915,6 +13399,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -12927,6 +13412,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -13020,16 +13506,16 @@
       }
     },
     "node_modules/react-remove-scroll": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
-      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
       "license": "MIT",
       "dependencies": {
         "react-remove-scroll-bar": "^2.3.7",
-        "react-style-singleton": "^2.2.1",
+        "react-style-singleton": "^2.2.3",
         "tslib": "^2.1.0",
         "use-callback-ref": "^1.3.3",
-        "use-sidecar": "^1.1.2"
+        "use-sidecar": "^1.1.3"
       },
       "engines": {
         "node": ">=10"
@@ -13226,6 +13712,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -13259,6 +13763,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -13496,6 +14015,7 @@
       "integrity": "sha512-tJXpsEkzsEzyAKIaB3qv3IuvTVcTN7qBw1jL4SPPXM3vzDrJgiLGFY6+HodgFaUHAJ2RYJ94zV5MKRJCoQzQeA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -14500,6 +15020,7 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -14875,6 +15396,7 @@
       "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -15239,6 +15761,7 @@
       "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -16281,6 +16804,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
       "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -16406,6 +16930,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.4",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-navigation-menu": "^1.2.1",
+        "@radix-ui/react-popover": "^1.1.6",
         "@radix-ui/react-radio-group": "^1.2.2",
         "@radix-ui/react-scroll-area": "^1.2.0",
         "@radix-ui/react-select": "^2.1.4",
@@ -16437,6 +16962,7 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
         "react-markdown": "^9.0.1",
+        "remark-gfm": "^4.0.1",
         "socket.io-client": "^4.8.0",
         "swr": "^2.2.5",
         "tailwind-merge": "^2.5.3",
diff --git a/package.json b/package.json
index 544aa56d2..d0feb1f40 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "rimraf dist tmp_core_tsc && npm run build -w nui && npm run build -w panel && npm run build -w core && npm run license:distfile",
-    "prepare": "husky",
+    "prepare": "husky install",
     "test": "npm run test --workspaces",
     "typecheck": "npm run typecheck --workspaces",
     "locale:rebase": "node scripts/locale-utils.js rebase",
diff --git a/panel/index.html b/panel/index.html
index 1a1736dbc..a1b1abdd4 100644
--- a/panel/index.html
+++ b/panel/index.html
@@ -4,7 +4,12 @@
     <!-- {{basePath}} -->
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg" href="./favicon_default.svg" id="favicon"/>
+    <link rel="manifest" href="./manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#191A1C" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="txAdmin" />
     <title>txAdmin</title>
     <meta name="description" content="{{ogDescripttion}}">
     <meta name="author" content="André Tabarra">
diff --git a/panel/package.json b/panel/package.json
index 6fc68b226..012d410e8 100644
--- a/panel/package.json
+++ b/panel/package.json
@@ -30,6 +30,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.4",
@@ -61,6 +62,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.1",
     "socket.io-client": "^4.8.0",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.3",
diff --git a/panel/public/manifest.json b/panel/public/manifest.json
new file mode 100644
index 000000000..c85f7182e
--- /dev/null
+++ b/panel/public/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "txAdmin",
+  "short_name": "txAdmin",
+  "description": "FiveM/RedM server management",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1a1a1a",
+  "theme_color": "#191A1C",
+  "icons": [
+    {
+      "src": "https://forum-cfx-re.akamaized.net/optimized/5X/5/4/8/e/548e82fce6119ea9b4d2b3ec3b3d50375463adbc_2_375x375.png",
+      "sizes": "any",
+      "type": "image/png"
+    }
+  ],
+  "categories": ["productivity", "utilities"],
+  "orientation": "any",
+  "scope": "/",
+  "lang": "en"
+}
\ No newline at end of file
diff --git a/panel/src/components/BigRadioItem.tsx b/panel/src/components/BigRadioItem.tsx
index 224a9c157..6d9d242d8 100644
--- a/panel/src/components/BigRadioItem.tsx
+++ b/panel/src/components/BigRadioItem.tsx
@@ -1,29 +1,51 @@
 import { useId } from "react";
 import { Label } from "./ui/label";
 import { RadioGroupItem } from "./ui/radio-group";
+import { DynamicNewBadge } from "./DynamicNewBadge";
 import { cn } from "@/lib/utils";
-import { RadioGroupIndicator } from "@radix-ui/react-radio-group";
+
 
 type BigRadioItemProps = {
     value: string;
     title: string;
     desc: React.ReactNode;
+    newOptionBadgeFeatName?: string;
     groupValue: string | undefined;
+    disableReason?: string | null;
 }
 
 export default function BigRadioItem(props: BigRadioItemProps) {
     const radioId = 'radio' + useId();
+    const isDisabled = Boolean(props.disableReason);
+
     return (
         <div className="group">
             <Label
                 htmlFor={radioId}
-                className="flex items-center gap-3 border rounded-lg p-3 cursor-pointer hover:bg-card data-[state=checked]:border-primary/50 data-[state=checked]:bg-muted select-none"
+                className={cn(
+                    "flex items-center gap-3 border rounded-lg p-3 cursor-pointer hover:bg-card data-[state=checked]:border-primary/50 data-[state=checked]:bg-muted select-none",
+                    isDisabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
+                )}
                 data-state={props.groupValue === props.value ? 'checked' : 'unchecked'}
+                aria-disabled={isDisabled}
             >
-                <RadioGroupItem value={props.value} id={radioId} />
+                <RadioGroupItem value={props.value} id={radioId} disabled={isDisabled} />
                 <div className="space-y-1">
-                    <span className="font-bold">{props.title}</span>
+                    <div className="flex items-center gap-2">
+                        <span className="font-bold">{props.title}</span>
+                        {props.newOptionBadgeFeatName && (
+                            <DynamicNewBadge
+                                featName={props.newOptionBadgeFeatName}
+                                className="pb-1 pt-0.5"
+                                size="md"
+                                durationDays={28} //4 weeks
+                            />
+                        )}
+                    </div>
                     <p className="text-sm text-muted-foreground">{props.desc}</p>
+                    {props.disableReason && (
+                        <p className="text-sm text-warning-inline">{props.disableReason}</p>
+                    )}
                 </div>
             </Label>
         </div>
diff --git a/panel/src/components/CardContentOverlay.tsx b/panel/src/components/CardContentOverlay.tsx
index af44ce450..ce25304da 100644
--- a/panel/src/components/CardContentOverlay.tsx
+++ b/panel/src/components/CardContentOverlay.tsx
@@ -1,15 +1,24 @@
+import { cn } from "@/lib/utils";
 import { Loader2Icon, OctagonXIcon } from "lucide-react";
 
 type CardContentOverlayProps = {
-    loading?: boolean;
+    loading?: boolean | string;
     error?: React.ReactNode;
     message?: React.ReactNode;
+    className?: string;
 };
-export default function CardContentOverlay({ loading, error, message }: CardContentOverlayProps) {
+export default function CardContentOverlay({ loading, error, message, className }: CardContentOverlayProps) {
     let innerNode: React.ReactNode;
     if (loading) {
         innerNode = (
-            <Loader2Icon className="animate-spin size-20 opacity-75" />
+            <>
+                <Loader2Icon className="animate-spin size-20 opacity-75" />
+                {typeof loading === 'string' && (
+                    <span className="max-w-4xl text-2xl tracking-wider text-muted-foreground/75">
+                        {loading}
+                    </span>
+                )}
+            </>
         )
     } else if (error) {
         innerNode = (
@@ -28,7 +37,7 @@ export default function CardContentOverlay({ loading, error, message }: CardCont
         return null;
     }
     return (
-        <div className="absolute inset-0 z-10 min-h-20 px-4 py-6 rounded-[inherit] dark:bg-black/25 backdrop-blur-sm flex flex-col items-center justify-center gap-2 text-center">
+        <div className={cn("absolute inset-0 z-10 min-h-20 px-4 py-6 rounded-[inherit] dark:bg-black/25 backdrop-blur-sm flex flex-col items-center justify-center gap-2 text-center", className)}>
             {innerNode}
         </div>
     )
diff --git a/panel/src/components/DynamicAdvert.tsx b/panel/src/components/DynamicAdvert.tsx
new file mode 100644
index 000000000..9cbbc0c6f
--- /dev/null
+++ b/panel/src/components/DynamicAdvert.tsx
@@ -0,0 +1,74 @@
+import { handleExternalLinkClick } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+
+type AdPlacement = 'login' | 'sidebar';
+type HostingPartner = {
+    name: string;
+    link: string;
+}
+
+const pickRandomPartner = (placement: AdPlacement): HostingPartner => {
+    const partners = [
+        { name: 'gportal', link: 'https://www.g-portal.com/FiveM' },
+        { name: 'nitrado', link: 'https://server.nitrado.net/offers/fivem' },
+        { name: 'nodecraft', link: 'https://nodecraft.com/r/fivem' },
+        { name: 'shockbyte', link: 'https://shockbyte.com/partner/FIVEM' },
+        { name: 'xrealm', link: 'https://xrealm.com/en/gameserver/fivem-server-hosting' },
+        { name: 'zaphosting', link: 'https://zap-hosting.com/fivem2' }
+    ];
+    let partnerChosen = partners[Math.floor(Math.random() * partners.length)];
+    let isCustomer = false;
+    if (window.txConsts.providerName) {
+        const providerKey = window.txConsts.providerName.toLowerCase().replace(/[^a-z0-9]+/g, '');
+        const partnerFound = partners.find(partner => partner.name === providerKey);
+        if (partnerFound) {
+            partnerChosen = partnerFound;
+            isCustomer = true;
+        }
+    }
+    const partnerUrl = new URL(partnerChosen.link);
+    partnerUrl.searchParams.set('utm_source', 'txadmin');
+    partnerUrl.searchParams.set('utm_medium', isCustomer ? 'customer' : 'advert');
+    partnerUrl.searchParams.set('utm_content', placement);
+    return {
+        name: partnerChosen.name,
+        link: partnerUrl.toString(),
+    };
+}
+
+
+type DynamicAdvertProps = {
+    placement: AdPlacement;
+};
+export default function DynamicAdvert({ placement }: DynamicAdvertProps) {
+    const [advert] = useState(() => pickRandomPartner(placement));
+    const isLoginPage = placement === 'login';
+    const imgSize = isLoginPage ? '192x64' : '256x80';
+    const linkPrefix = window.txConsts.isWebInterface ? '' : 'nui://monitor/web/public/';
+    return (
+        <a
+            href={advert.link}
+            onClick={handleExternalLinkClick}
+            target='_blank'
+            className={cn(
+                'relative self-center group shadow-sm',
+                'brightness-125 opacity-80 hover:opacity-100',
+                'dark:brightness-100 dark:hover:brightness-125',
+                isLoginPage ? 'w-48 h-16' : 'w-sidebar h-[80px]'
+            )}
+        >
+            <div
+                className='absolute inset-0 -z-10 =animate-pulse blur scale-0 group-hover:scale-100 transition-transform bg-black dark:bg-gradient-to-r dark:from-[#18E889] dark:to-[#01FFFF]'
+            />
+            <img
+                className={cn(
+                    'rounded-lg hover:outline outline-2 m-auto hover:saturate-150',
+                    isLoginPage ? 'max-w-48 max-h-16' : 'max-w-sidebar max-h-[80px]'
+                )}
+                src={`${linkPrefix}/img/advert-${advert.name}-${imgSize}.png`}
+            />
+        </a>
+    );
+}
diff --git a/panel/src/components/DynamicNewBadge.tsx b/panel/src/components/DynamicNewBadge.tsx
index 2239120c7..85c35fc67 100644
--- a/panel/src/components/DynamicNewBadge.tsx
+++ b/panel/src/components/DynamicNewBadge.tsx
@@ -1,3 +1,4 @@
+import { LocalStorageKey } from "@/lib/localStorage";
 import { cn } from "@/lib/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
@@ -27,7 +28,7 @@ const badgeVariants = cva(
  * NOTE: always on for dev mode to make sure I doesn't forget to remove it.
  */
 function DynamicNewItemInner({ featName, durationDays, children }: DynamicNewItemProps) {
-    const storageKeyName = `dynamicNewFeatTs-${featName}`;
+    const storageKeyName = LocalStorageKey.NewFeatureSeenTs + featName;
     const storedTs = parseInt(localStorage.getItem(storageKeyName) ?? '');
     if (isNaN(storedTs) || window.txConsts.showAdvanced) {
         localStorage.setItem(storageKeyName, Date.now().toString());
diff --git a/panel/src/components/ErrorFallback.tsx b/panel/src/components/ErrorFallback.tsx
index 2fc8b94ee..8efa62e70 100644
--- a/panel/src/components/ErrorFallback.tsx
+++ b/panel/src/components/ErrorFallback.tsx
@@ -8,6 +8,8 @@ import { FallbackProps } from "react-error-boundary";
 import { FiAlertOctagon } from "react-icons/fi";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useEffect } from "react";
+import { LocalStorageKey } from "@/lib/localStorage";
 
 //Used for global errors
 export function AppErrorFallback({ error }: FallbackProps) {
@@ -49,6 +51,23 @@ type GenericErrorBoundaryCardProps = {
 }
 
 export function GenericErrorBoundaryCard(props: GenericErrorBoundaryCardProps) {
+    //Auto refresh the page if the error is related to removeChild - dev mode only
+    if (window.txConsts.showAdvanced) {
+        useEffect(() => {
+            if (props.error.message?.includes("Failed to execute 'removeChild' on 'Node'")) {
+                console.warn('Detected removeChild error, scheduling reload');
+                // Use a flag in sessionStorage to prevent infinite reload loops
+                const lastReloadRaw = localStorage.getItem(LocalStorageKey.ErrorFallbackLastReload);
+                const now = Date.now();
+                const lastReload = lastReloadRaw ? parseInt(lastReloadRaw) : 0;
+                if (now - lastReload > 30_000) {
+                    localStorage.setItem(LocalStorageKey.ErrorFallbackLastReload, now.toString());
+                    setTimeout(() => window.location.reload(), 500);
+                }
+            }
+        }, [props.error]);
+    }
+
     return (
         <Card className="max-w-xl">
             <CardHeader>
diff --git a/panel/src/components/JsonCodeBlock.tsx b/panel/src/components/JsonCodeBlock.tsx
new file mode 100644
index 000000000..0bed28d50
--- /dev/null
+++ b/panel/src/components/JsonCodeBlock.tsx
@@ -0,0 +1,112 @@
+import { Fragment, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type JsonValue =
+    | string
+    | number
+    | boolean
+    | null
+    | JsonValue[]
+    | { [key: string]: JsonValue };
+
+type JsonCodeBlockProps = {
+    value: string;
+    className?: string;
+};
+
+type ParseResult =
+    | { ok: true; value: JsonValue }
+    | { ok: false };
+
+const tokenClass = {
+    bracket: "text-muted-foreground",
+    key: "text-sky-600 dark:text-sky-300",
+    string: "text-emerald-600 dark:text-emerald-300",
+    number: "text-amber-600 dark:text-amber-300",
+    boolean: "text-violet-600 dark:text-violet-300",
+    null: "text-rose-600 dark:text-rose-300",
+};
+
+const parseJson = (value: string): ParseResult => {
+    try {
+        return { ok: true, value: JSON.parse(value) as JsonValue };
+    } catch {
+        return { ok: false };
+    }
+};
+
+const renderPrimitive = (value: string | number | boolean | null): ReactNode => {
+    if (typeof value === "string") {
+        return <span className={tokenClass.string}>{JSON.stringify(value)}</span>;
+    }
+    if (typeof value === "number") {
+        return <span className={tokenClass.number}>{String(value)}</span>;
+    }
+    if (typeof value === "boolean") {
+        return <span className={tokenClass.boolean}>{String(value)}</span>;
+    }
+    return <span className={tokenClass.null}>null</span>;
+};
+
+const renderJson = (value: JsonValue, depth = 0, path = "root"): ReactNode => {
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return <span className={tokenClass.bracket}>[]</span>;
+        }
+
+        return (
+            <Fragment>
+                <span className={tokenClass.bracket}>[</span>
+                {"\n"}
+                {value.map((item, index) => (
+                    <Fragment key={`${path}[${index}]`}>
+                        {"  ".repeat(depth + 1)}
+                        {renderJson(item, depth + 1, `${path}[${index}]`)}
+                        {index < value.length - 1 ? "," : ""}
+                        {"\n"}
+                    </Fragment>
+                ))}
+                {"  ".repeat(depth)}
+                <span className={tokenClass.bracket}>]</span>
+            </Fragment>
+        );
+    }
+
+    if (value && typeof value === "object") {
+        const entries = Object.entries(value);
+        if (entries.length === 0) {
+            return <span className={tokenClass.bracket}>{"{}"}</span>;
+        }
+
+        return (
+            <Fragment>
+                <span className={tokenClass.bracket}>{"{"}</span>
+                {"\n"}
+                {entries.map(([key, item], index) => (
+                    <Fragment key={`${path}.${key}`}>
+                        {"  ".repeat(depth + 1)}
+                        <span className={tokenClass.key}>{JSON.stringify(key)}</span>
+                        <span className={tokenClass.bracket}>{": "}</span>
+                        {renderJson(item, depth + 1, `${path}.${key}`)}
+                        {index < entries.length - 1 ? "," : ""}
+                        {"\n"}
+                    </Fragment>
+                ))}
+                {"  ".repeat(depth)}
+                <span className={tokenClass.bracket}>{"}"}</span>
+            </Fragment>
+        );
+    }
+
+    return renderPrimitive(value);
+};
+
+export default function JsonCodeBlock({ value, className }: JsonCodeBlockProps) {
+    const parsed = parseJson(value);
+
+    return (
+        <pre className={cn("whitespace-pre-wrap attempt-word-wrap font-mono text-sm leading-6", className)}>
+            {parsed.ok ? renderJson(parsed.value) : value}
+        </pre>
+    );
+}
diff --git a/panel/src/components/MarkdownProse.tsx b/panel/src/components/MarkdownProse.tsx
index 2b45b521d..ef1ea3ee5 100644
--- a/panel/src/components/MarkdownProse.tsx
+++ b/panel/src/components/MarkdownProse.tsx
@@ -1,15 +1,72 @@
+import { isValidElement, type ReactNode } from 'react';
 import { cn, stripIndent } from '@/lib/utils';
-import Markdown, { Components } from 'react-markdown';
+import Markdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import InlineCode from './InlineCode';
+import JsonCodeBlock from './JsonCodeBlock';
 import TxAnchor from './TxAnchor';
 
 
-// NOTE: we might not even need this
-// https://tailwindcss.com/docs/typography-plugin#advanced-topics
+const remarkPlugins = [remarkGfm];
+
+
+/**
+ * Turns single newlines into hard line breaks (by appending two trailing spaces)
+ * everywhere *except* inside fenced code blocks, so rendered `<pre>` content
+ * doesn't pick up stray trailing whitespace.
+ */
+const softBreaksOutsideCode = (src: string) => {
+    const lines = src.split('\n');
+    let insideFence = false;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (/^\s*(```|~~~)/.test(line)) {
+            insideFence = !insideFence;
+            continue;
+        }
+        if (insideFence) continue;
+        if (line.length === 0) continue; //blank lines already separate blocks
+        if (/[ \t]{2,}$/.test(line)) continue; //already ends with hard break
+        lines[i] = line + '  ';
+    }
+    return lines.join('\n');
+};
+
+
+//MARK: Custom components
+const preBaseClass = 'not-prose p-2 whitespace-pre-wrap [overflow-wrap:_anywhere] break-all rounded bg-muted [.prose-toast_&]:bg-muted/65 [.prose-toast_&>code]:bg-transparent';
+const jsonBlockClass = 'not-prose p-2 rounded bg-muted [.prose-toast_&]:bg-muted/65';
+
 const customComponents: Components = {
     // blockquote: ({ children }) => <blockquote className="border-l-4 border-pink-600 pl-2">{children}</blockquote>,
-    code: ({ children }) => <InlineCode className="not-prose [.prose-toast_&:not(pre_*)]:bg-muted/65">{children}</InlineCode>,
-    pre: ({ children }) => <pre className="not-prose p-2 whitespace-pre-wrap [overflow-wrap:_anywhere] break-all rounded bg-muted [.prose-toast_&]:bg-muted/65 [.prose-toast_&>code]:bg-transparent">{children}</pre>,
+    code: ({ className, children }) => {
+        //Fenced code blocks (with or without a language) must NOT use InlineCode,
+        //because its horizontal padding ends up as left padding on the first line
+        //inside a <pre> and visually misaligns it from subsequent lines.
+        const isBlock = /(^|\s)language-/.test(className ?? '') || String(children ?? '').includes('\n');
+        if (isBlock) {
+            return <code className={className}>{children}</code>;
+        }
+        return <InlineCode className="not-prose [.prose-toast_&:not(pre_*)]:bg-muted/65">{children}</InlineCode>;
+    },
+    pre: ({ children }) => {
+        //For fenced blocks react-markdown passes a single <code> child.
+        //If it's ```json, render it with the dedicated JsonCodeBlock component.
+        if (isValidElement(children)) {
+            const codeProps = children.props as { className?: string; children?: ReactNode };
+            const match = /language-(\w+)/.exec(codeProps.className ?? '');
+            console.log('match', match);
+            if (match?.[1] === 'json' && typeof codeProps.children === 'string') {
+                return (
+                    <JsonCodeBlock
+                        value={codeProps.children.replace(/\n$/, '')}
+                        className={jsonBlockClass}
+                    />
+                );
+            }
+        }
+        return <pre className={preBaseClass}>{children}</pre>;
+    },
     a: ({ children, href }) => <TxAnchor href={href!}>{children}</TxAnchor>,
 }
 
@@ -19,19 +76,27 @@ type MarkdownProseProps = {
     isSmall?: boolean;
     isTitle?: boolean;
     isToast?: boolean;
+    className?: string;
 };
-export default function MarkdownProse({ md, isSmall, isTitle, isToast }: MarkdownProseProps) {
+export default function MarkdownProse({ md, isSmall, isTitle, isToast, className }: MarkdownProseProps) {
+    // md = '```\naaa\nbbb\nccc\n```';
+    // md = '```json\n{"aaa": "bbb", "ccc": true}\n```';
+    // md = '```json\n{\n\t"aaa": "bbb",\n\t"ccc": true\n}\n```';
+    // md = '```\n{\n\t"aaa": "bbb",\n\t"ccc": true\n}\n```';
+    const processed = softBreaksOutsideCode(stripIndent(md));
     return (
         <Markdown
+            remarkPlugins={remarkPlugins}
             components={customComponents}
             className={cn(
                 'prose dark:prose-invert prose-zinc',
                 isSmall && 'prose-sm',
                 isTitle && 'tracking-wide',
                 isToast && 'prose-toast',
+                className,
             )}
         >
-            {stripIndent(md.replace(/\n/g, '  \n'))}
+            {processed}
         </Markdown>
     );
 }
diff --git a/panel/src/components/ModalCentralMessage.tsx b/panel/src/components/ModalCentralMessage.tsx
deleted file mode 100644
index f15c15978..000000000
--- a/panel/src/components/ModalCentralMessage.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function ModalCentralMessage({ children }: { children: React.ReactNode }) {
-    return (
-        <div className="flex items-center justify-center min-h-[16.5rem] text-xl p1 text-muted-foreground">
-            {children}
-        </div>
-    )
-}
diff --git a/panel/src/components/MultiIdsList.tsx b/panel/src/components/MultiIdsList.tsx
index c991e63cc..d855e5aad 100644
--- a/panel/src/components/MultiIdsList.tsx
+++ b/panel/src/components/MultiIdsList.tsx
@@ -1,13 +1,37 @@
 import { txToast } from "@/components/TxToaster";
 import { cn, copyToClipboard } from "@/lib/utils";
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { CopyIcon, ListTodoIcon, Trash2Icon, XIcon } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useOpenConfirmDialog, useOpenPromptDialog } from "@/hooks/dialogs";
+import { CopyIcon, ListTodoIcon, Trash2Icon, UndoIcon, XIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useOpenPromptDialog } from "@/hooks/dialogs";
+import { shortenId } from "@shared/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 
+//MARK: Helpers
+//To help ctrl+c'ing with the list selected
 const InvisibleNewLine = () => <span className="opacity-0">{'\n'}</span>;
 
+//Sort IDs prioritizing license IDs
+const sortIds = (a: string, b: string) => {
+    const getPriority = (id: string) => {
+        if (id.startsWith('license:')) return 0;
+        if (id.startsWith('license2:')) return 1;
+        return 2;
+    };
+
+    const aPriority = getPriority(a);
+    const bPriority = getPriority(b);
+
+    // If same priority, sort alphabetically
+    if (aPriority === bPriority) {
+        return a.localeCompare(b);
+    }
+
+    // Otherwise sort by priority
+    return aPriority - bPriority;
+};
+
+//Used in the compare prompt dialog
 const placeholderIds = [
     'fivem:xxxxxxx',
     'license:xxxxxxxxxxxxxx',
@@ -21,70 +45,271 @@ const placeholderHwids = [
     'etc...',
 ].join('\n');
 
+
+//MARK: IdLine
+type IdLineProps = {
+    id: string;
+    displayShortenedId: boolean;
+    isOnline: boolean;
+    highlightOnline: boolean;
+    onCopy?: () => void;
+    isComparing: boolean;
+    isMatch: boolean;
+    isRemoving: boolean;
+    isMarkedForRemoval?: boolean;
+    toggleMarkRemoval?: () => void;
+    disableButtons: boolean;
+}
+
+function IdLine({
+    id,
+    displayShortenedId,
+    onCopy,
+    isOnline,
+    highlightOnline,
+    isComparing,
+    isMatch,
+    isRemoving,
+    isMarkedForRemoval,
+    toggleMarkRemoval,
+    disableButtons,
+}: IdLineProps) {
+    const canBeRemoved = !id.startsWith('license:') && !isOnline; // Only allow removal of old IDs
+    const isBold = (isComparing && isMatch)
+        || (!isComparing && !highlightOnline)
+        || (!isComparing && highlightOnline && isOnline);
+    return (
+        <div className="relative flex justify-between items-center gap-2 group/line">
+            <span
+                className={cn(
+                    'block px-1',
+                    isBold ? 'font-semibold opacity-100' : 'opacity-50',
+                    isComparing && isMatch && 'text-success-inline',
+                    isMarkedForRemoval && 'line-through text-destructive-inline',
+                )}
+                title={displayShortenedId ? id : undefined}
+            >
+                {displayShortenedId ? shortenId(id, 20) : id}<InvisibleNewLine />
+            </span>
+            {isRemoving ? canBeRemoved && (
+                <button
+                    className="absolute right-0 top-0 h-full flex items-center bg-background hover:bg-background group/removal"
+                    onClick={toggleMarkRemoval}
+                    title={isMarkedForRemoval ? 'Undo mark for deletion' : 'Mark for deletion'}
+                    disabled={disableButtons}
+                >
+                    {isMarkedForRemoval ? (
+                        <UndoIcon className="h-4 opacity-75 group-hover:opacity-100 group-hover/removal:text-warning" />
+                    ) : (
+                        <XIcon className="h-4 opacity-75 group-hover:opacity-100 group-hover/removal:text-destructive" />
+                    )}
+                </button>
+            ) : (
+                <button
+                    className="absolute right-0 top-0 h-full flex items-center opacity-0 group-hover/line:opacity-100 bg-background hover:bg-background group/copy transition-opacity"
+                    onClick={onCopy}
+                    title='Copy to clipboard'
+                    disabled={disableButtons}
+                >
+                    <CopyIcon className="h-4 opacity-75 group-hover/copy:opacity-100 group-hover/copy:text-primary" />
+                </button>
+            )}
+        </div>
+    );
+}
+
+
+//MARK: IdListControls
+type IdListControlsProps = {
+    hasRemoveIds: boolean;
+    canRemoveIds?: boolean;
+    handleStartMarkRemoval: () => void;
+    handleCompareIds: () => void;
+    handleCopyAllIds: () => void;
+    typeStr: string;
+}
+
+function IdListControls({
+    hasRemoveIds,
+    canRemoveIds,
+    handleStartMarkRemoval,
+    handleCompareIds,
+    handleCopyAllIds,
+    typeStr,
+}: IdListControlsProps) {
+    return (
+        <>
+            {hasRemoveIds && (
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <button
+                            onClick={handleStartMarkRemoval}
+                            disabled={!canRemoveIds}
+                        >
+                            <Trash2Icon className={cn(
+                                'h-5 opacity-50',
+                                canRemoveIds ? 'hover:opacity-100 hover:text-primary' : 'opacity-35'
+                            )} />
+                        </button>
+                    </TooltipTrigger>
+                    <TooltipContent className={cn(!canRemoveIds && 'text-destructive-inline text-center')}>
+                        {canRemoveIds ? (
+                            <p>{`Mark ${typeStr}s for deletion.`}</p>
+                        ) : (
+                            <p>
+                                You do not have the permission <br />
+                                required to remove {typeStr}s
+                            </p>
+                        )}
+                    </TooltipContent>
+                </Tooltip>
+            )}
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button onClick={handleCompareIds}>
+                        <ListTodoIcon className="h-6 opacity-50 hover:opacity-100 hover:text-primary" />
+                    </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    Compare {typeStr}s
+                </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button onClick={handleCopyAllIds}>
+                        <CopyIcon className="h-5 opacity-50 hover:opacity-100 hover:text-primary" />
+                    </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    Copy all {typeStr}s
+                </TooltipContent>
+            </Tooltip>
+        </>
+    )
+}
+
+
+//MARK: Main Component
 type ActionFeedback = {
     msg: string;
-    success: boolean;
+    type: 'green' | 'yellow' | 'red';
 }
 
-type MultiIdsList = {
-    list: string[];
-    highlighted?: string[];
+type MultiIdsListProps = {
+    idsOnline?: string[];
+    idsOffline: string[];
     type: 'hwid' | 'id';
     src: 'player' | 'action';
     isHwids?: boolean;
-    onWipeIds?: () => void;
+    onRemoveIds?: (
+        ids: string[],
+        onError: () => void,
+    ) => void;
+    canRemoveIds?: boolean;
 }
 
-export default function MultiIdsList({ list, highlighted, type, src, onWipeIds }: MultiIdsList) {
-    const [autoAnimateParentRef, enableAnimations] = useAutoAnimate();
+export default function MultiIdsList({ idsOnline, idsOffline, type, src, onRemoveIds, canRemoveIds }: MultiIdsListProps) {
+    const openPromptDialog = useOpenPromptDialog();
     const divRef = useRef<HTMLDivElement>(null);
-    const msgRef = useRef<HTMLSpanElement>(null);
+    const msgRef = useRef<any>(null);
     const [compareMatches, setCompareMatches] = useState<string[] | null>(null);
+    const [markedForRemoval, setMarkedForRemoval] = useState<string[] | null>(null);
     const [actionFeedback, setActionFeedback] = useState<ActionFeedback | false>(false);
+    const [isCommittingDeletions, setIsCommittingDeletions] = useState(false);
 
-    const hasHighlighted = Array.isArray(highlighted) && highlighted.length;
-    const idsHighlighted = hasHighlighted
-        ? highlighted.sort((a, b) => a.localeCompare(b))
-        : list.sort((a, b) => a.localeCompare(b));
-    const idsMuted = hasHighlighted
-        ? list.filter((id) => !highlighted.includes(id)).sort((a, b) => a.localeCompare(b))
-        : [];
+    const handleClearState = () => {
+        setCompareMatches(null);
+        setMarkedForRemoval(null);
+        setActionFeedback(false);
+        setIsCommittingDeletions(false);
+    }
 
-    const hasIdsAvailable = idsHighlighted.length || idsMuted.length;
-    const openConfirmDialog = useOpenConfirmDialog();
-    const openPromptDialog = useOpenPromptDialog();
+    const hasAnyIdAvailable = idsOnline?.length || idsOffline.length;
+    const hasAnyIdOnline = Array.isArray(idsOnline) && !!idsOnline.length;
+    const allIds = useMemo(() => {
+        const ids: string[] = [];
+        idsOnline?.slice().sort(sortIds).forEach((id) => {
+            if (!ids.includes(id)) ids.push(id);
+        });
+        idsOffline.slice().sort(sortIds).forEach((id) => {
+            if (!ids.includes(id)) ids.push(id);
+        });
+        return ids;
+    }, [idsOnline, idsOffline]);
 
     const isHwids = type === 'hwid';
     const typeStr = isHwids ? 'HWID' : 'ID';
+    const getPluralizedType = (count: number) => count === 1 ? typeStr : `${typeStr}s`;
     const emptyMessage = `This ${src} has no ${typeStr}s.`;
     const isInCompareMode = Array.isArray(compareMatches);
     const isCompareIdMatch = (id: string) => isInCompareMode && compareMatches.includes(id);
+    const isInRemovalMode = Array.isArray(markedForRemoval);
+    const isMarkedForRemoval = (id: string) => isInRemovalMode && markedForRemoval.includes(id);
 
     useEffect(() => {
+        msgRef.current?.classList.remove('animate-toastbar-leave');
+        msgRef.current?.classList.add('animate-toastbar-enter');
         if (actionFeedback) {
-            const timer = setTimeout(() => {
+            const timer1 = setTimeout(() => {
+                msgRef.current?.classList.remove('animate-toastbar-enter');
+                msgRef.current?.classList.add('animate-toastbar-leave');
+            }, 2500);
+            const timer2 = setTimeout(() => {
                 setActionFeedback(false);
             }, 2750);
 
             return () => {
-                clearTimeout(timer);
+                clearTimeout(timer1);
+                clearTimeout(timer2);
             };
+        } else {
+
         }
-    }, [actionFeedback]);
+    }, [actionFeedback, isInCompareMode, isInRemovalMode]);
 
-    const handleWipeIds = () => {
-        if (!onWipeIds) return;
-        const target = isHwids ? `${typeStr}s` : `${typeStr}s (except license)`;
-        openConfirmDialog({
-            title: `Wipe ${src} ${typeStr}s`,
-            message: <p>
-                Are you sure you want wipe all {target} of this {src}? <br />
-                <strong>This action cannot be undone.</strong>
-            </p>,
-            onConfirm: onWipeIds,
+
+    const handleStartMarkRemoval = () => {
+        if (!hasAnyIdAvailable) {
+            txToast.warning(`There are no ${typeStr}s to remove.`);
+            return;
+        }
+        if (!idsOffline.length) {
+            txToast.warning(`You can only remove ${typeStr}s not being used by this player right now, and all the ${typeStr}s in the list are currently being used.`);
+            return;
+        }
+        setMarkedForRemoval([]);
+    }
+
+    const toggleMarkRemoval = (id: string) => {
+        console.log(`toggleMarkRemoval(${id})`, markedForRemoval);
+        if (!isInRemovalMode) return;
+        setMarkedForRemoval((prev) => {
+            if (!prev) return [id];
+            if (prev.includes(id)) {
+                return prev.filter((i) => i !== id);
+            } else {
+                return [...prev, id];
+            }
         });
     };
 
+    const handleCommitRemoval = () => {
+        if (!onRemoveIds || !isInRemovalMode || !markedForRemoval?.length) return;
+        setActionFeedback({
+            msg: 'saving...',
+            type: 'yellow',
+        });
+        setIsCommittingDeletions(true);
+        onRemoveIds(markedForRemoval, () => {
+            //We don't need to handle success cases because the modal refreshes
+            setIsCommittingDeletions(false);
+            setActionFeedback({
+                msg: 'Error:(',
+                type: 'red',
+            });
+        });
+    }
+
     const handleCompareIds = () => {
         openPromptDialog({
             title: `Compare ${typeStr}s`,
@@ -98,30 +323,22 @@ export default function MultiIdsList({ list, highlighted, type, src, onWipeIds }
             isMultiline: true,
             isWide: true,
             onSubmit: (input) => {
-                console.log(input);
                 const cleanIds = input
                     .split(/[\n\s,;]+/)
                     .map((id) => id.trim())
-                    .filter((id) => id.length)
-                    .filter((id) => id.length && list.includes(id));
+                    .filter((id) => id.length && allIds.includes(id));
                 setCompareMatches(cleanIds);
             }
         });
     };
 
-    const handleCopyIds = () => {
+    const handleCopyString = (strToCopy: string) => {
         if (!divRef.current) throw new Error(`divRef.current undefined`);
-        if (!hasIdsAvailable) return;
-
-        //Just to guarantee the correct visual order
-        const strToCopy = [...idsHighlighted, ...idsMuted].join('\r\n');
-
-        //Copy the ids to the clipboard
         copyToClipboard(strToCopy, divRef.current).then((res) => {
             if (res !== false) {
                 setActionFeedback({
                     msg: 'Copied!',
-                    success: true,
+                    type: 'green',
                 });
             } else {
                 txToast.error('Failed to copy to clipboard :(');
@@ -133,11 +350,22 @@ export default function MultiIdsList({ list, highlighted, type, src, onWipeIds }
             });
             setActionFeedback({
                 msg: 'Error :(',
-                success: false,
+                type: 'red',
             });
         });
     }
 
+    const handleCopyAllIds = () => {
+        if (!divRef.current) throw new Error(`divRef.current undefined`);
+        if (!hasAnyIdAvailable) return;
+        handleCopyString(allIds.join('\r\n'));
+    }
+    const handleCopySingleId = (id: string) => {
+        if (!divRef.current) throw new Error(`divRef.current undefined`);
+        if (!id) return;
+        handleCopyString(id);
+    }
+
     return <div>
         <div className="flex justify-between items-center pb-1" ref={divRef}>
             <h3 className="text-xl">
@@ -149,86 +377,105 @@ export default function MultiIdsList({ list, highlighted, type, src, onWipeIds }
                 ) : null}
             </h3>
             <div
-                ref={autoAnimateParentRef}
                 className={cn(
                     'w-24 min-h-6 flex justify-end gap-2.5',
-                    !hasIdsAvailable && 'hidden'
+                    !hasAnyIdAvailable && 'hidden'
                 )}
             >
                 {actionFeedback ? (
                     <span
                         ref={msgRef}
                         className={cn(
-                            "w-full text-center text-sm select-none pointer-events-none animate-toastbar-enter",
-                            actionFeedback.success
-                                ? "text-success-inline"
-                                : "text-destructive-inline"
+                            "w-full text-right text-sm select-none pointer-events-none",
+                            actionFeedback.type === 'green' && "text-success-inline",
+                            actionFeedback.type === 'yellow' && "text-warning-inline",
+                            actionFeedback.type === 'red' && "text-destructive-inline",
                         )}
                     >
                         {actionFeedback.msg}
                     </span>
-                ) : (
-                    <>
-                        {onWipeIds && (
-                            <button onClick={handleWipeIds} title="Wipe all IDs except license.">
-                                <Trash2Icon className="h-5 opacity-50 hover:opacity-100 hover:text-destructive" />
-                            </button>
-                        )}
-                        <button onClick={handleCompareIds} title="Compare IDs.">
-                            <ListTodoIcon className="h-6 opacity-50 hover:opacity-100 hover:text-primary" />
-                        </button>
-                        <button onClick={handleCopyIds} title="Copy IDs to clipboard.">
-                            <CopyIcon className="h-5 opacity-50 hover:opacity-100 hover:text-primary" />
-                        </button>
-                    </>
-                )}
-            </div>
-        </div>
-        <div className="relative border rounded">
-            <p className={cn(
-                "font-mono break-all whitespace-pre-wrap rounded-[inherit] divide-y divide-border/50 text-muted-foreground",
-                hasIdsAvailable && isHwids ? "text-2xs leading-5 font-extralight tracking-widest" : "text-xs leading-6 tracking-wider"
-            )}>
-                {!hasIdsAvailable && <span className="block px-1 opacity-50 italic">{emptyMessage}</span>}
-                {idsHighlighted.map((id) => (
+                ) : isInCompareMode ? (
                     <span
-                        key={id}
+                        ref={msgRef}
+                        onClick={handleClearState}
                         className={cn(
-                            'block px-1 font-semibold',
-                            isInCompareMode && (
-                                isCompareIdMatch(id) ? 'text-success-inline font-semibold' : 'opacity-50'
-                            )
+                            "w-full text-right text-sm select-none cursor-pointer"
                         )}
                     >
-                        {id}<InvisibleNewLine />
+                        Clear<XIcon className="inline h-5" />
                     </span>
-                ))}
-                {idsMuted.map((id) => (
+                ) : isInRemovalMode ? (
                     <span
-                        key={id}
+                        ref={msgRef}
+                        onClick={handleClearState}
                         className={cn(
-                            'block px-1 opacity-50',
-                            isCompareIdMatch(id) && 'opacity-100 text-success-inline font-semibold'
+                            "w-full text-right text-sm select-none cursor-pointer"
                         )}
                     >
-                        {id}<InvisibleNewLine />
+                        Cancel<XIcon className="inline h-5" />
                     </span>
+                ) : (
+                    <IdListControls
+                        hasRemoveIds={!!onRemoveIds}
+                        canRemoveIds={canRemoveIds}
+                        handleStartMarkRemoval={handleStartMarkRemoval}
+                        handleCompareIds={handleCompareIds}
+                        handleCopyAllIds={handleCopyAllIds}
+                        typeStr={typeStr}
+                    />
+                )}
+            </div>
+        </div>
+        <div className="relative border rounded">
+            <p className='font-mono break-all whitespace-pre-wrap rounded-[inherit] overflow-hidden divide-y divide-border/50 text-muted-foreground text-xs leading-6 tracking-wider'>
+                {!hasAnyIdAvailable && <span className="block px-1 opacity-50 italic">{emptyMessage}</span>}
+                {allIds.map((id) => (
+                    <IdLine
+                        key={id}
+                        id={id}
+                        displayShortenedId={isHwids}
+                        onCopy={() => handleCopySingleId(id)}
+                        isOnline={idsOnline?.includes(id) ?? false}
+                        highlightOnline={hasAnyIdOnline}
+                        isComparing={isInCompareMode}
+                        isMatch={isCompareIdMatch(id)}
+                        isRemoving={isInRemovalMode}
+                        isMarkedForRemoval={isMarkedForRemoval(id)}
+                        toggleMarkRemoval={() => toggleMarkRemoval(id)}
+                        disableButtons={isCommittingDeletions}
+                    />
                 ))}
-
+                {isInRemovalMode && (
+                    <div className="px-2 py-1 flex flex-wrap justify-center xs:justify-between items-center gap-2 bg-destructive text-destructive-foreground font-sans text-xs leading-6 tracking-wider select-none">
+                        <span
+                            className={cn(
+                                'block font-semibold my-[1px]'
+                            )}
+                        >
+                            {markedForRemoval.length
+                                ? `Permanently delete ${markedForRemoval.length} ${getPluralizedType(markedForRemoval.length)}?`
+                                : 'Click above to mark IDs for deletion.'}
+                        </span>
+                        <button
+                            className={cn(
+                                'px-1 border border-transparent hover:bg-background hover:border-background rounded-lg',
+                                markedForRemoval.length ? 'block' : 'hidden',
+                                isCommittingDeletions && 'opacity-50 cursor-progress'
+                            )}
+                            onClick={handleCommitRemoval}
+                            title={`Confirm removal of marked ${typeStr}s.`}
+                            disabled={isCommittingDeletions}
+                        >
+                            {isCommittingDeletions ? 'saving...' : 'Confirm & Delete'}
+                        </button>
+                    </div>
+                )}
             </p>
             {isInCompareMode && !compareMatches.length && (
                 <>
                     <div className="absolute inset-0 dark:bg-black/25 rounded-[inherit] backdrop-blur-sm flex items-center justify-center p-4">
                         <span className="text-xl tracking-wider text-warning-inline">No matching {typeStr} found.</span>
                     </div>
-
-                    <button
-                        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100"
-                        onClick={() => setCompareMatches(null)}
-                    >
-                        <XIcon className="h-8 w-8 sm:h-6 sm:w-6" />
-                        <span className="sr-only">Close</span>
-                    </button>
                 </>
             )}
         </div>
diff --git a/panel/src/components/PromptDialog.tsx b/panel/src/components/PromptDialog.tsx
index 0dc3f1d3c..ce520e647 100644
--- a/panel/src/components/PromptDialog.tsx
+++ b/panel/src/components/PromptDialog.tsx
@@ -61,6 +61,11 @@ export default function PromptDialog() {
                             required={dialogState.required}
                             minHeight={100}
                             maxHeight={240}
+
+                            //Remove line breaks from the input value
+                            onChange={(e) => {
+                                e.target.value = e.target.value.replace(/\n\s*/g, ' ').trimStart();
+                            }}
                         />
                     ) : (
                         <Input
diff --git a/panel/src/components/TimeInputDialog.tsx b/panel/src/components/TimeInputDialog.tsx
index 9ff5ae7b3..40da06e6b 100644
--- a/panel/src/components/TimeInputDialog.tsx
+++ b/panel/src/components/TimeInputDialog.tsx
@@ -56,7 +56,7 @@ export function TimeInputDialog({ title, isOpen, onClose, onSubmit }: TimeInputD
 
     return (
         <Dialog open={isOpen} onOpenChange={onClose}>
-            <DialogContent className="sm:max-w-sm" onBlur={() => console.log('blur', Math.random())}>
+            <DialogContent className="sm:max-w-sm">
                 <DialogHeader>
                     <DialogTitle>{title}</DialogTitle>
                 </DialogHeader>
diff --git a/panel/src/components/TxAnchor.tsx b/panel/src/components/TxAnchor.tsx
index a5c631741..64b227c3a 100644
--- a/panel/src/components/TxAnchor.tsx
+++ b/panel/src/components/TxAnchor.tsx
@@ -16,7 +16,7 @@ function InnerExternal({ text }: { text: string }) {
             <span className="whitespace-nowrap">
                 {lastWord}
                 <ExternalLinkIcon
-                    className="inline ml-1 mb-1 h-5 [.text-sm_&]:h-4 [.text-sm_&]:ml-0 [.prose-sm_&]:h-4 [.prose-sm_&]:ml-0 selection:bg-inherit"
+                    className="inline ml-1 mb-1 h-5 -mr-0.5 [.text-sm_&]:h-4 [.text-sm_&]:ml-0 [.text-sm_&]:-mr-1 [.prose-sm_&]:h-4 [.prose-sm_&]:ml-0 [.prose-sm_&]:-mr-0.5 selection:bg-inherit"
                 />
             </span>
         </>
@@ -46,7 +46,7 @@ export default function TxAnchor({ children, href, className, rel, ...rest }: Tx
             rel={rel ?? 'noopener noreferrer'}
             href={href}
             className={cn(
-                'text-accent no-underline hover:underline ml-1 mr-0 cursor-pointer',
+                'text-accent no-underline hover:underline cursor-pointer',
                 className
             )}
             onClick={onClick}
diff --git a/panel/src/components/TxToaster.tsx b/panel/src/components/TxToaster.tsx
index 07ec30b6f..89269a550 100644
--- a/panel/src/components/TxToaster.tsx
+++ b/panel/src/components/TxToaster.tsx
@@ -112,7 +112,7 @@ export const CustomToast = ({ t, type, data }: CustomToastProps) => {
                     <small className="block text-xs tracking-wide text-muted-foreground">
                         For support, visit&nbsp;
                         <a
-                            href="http://discord.gg/txAdmin"
+                            href="https://discord.gg/uAmsGa2"
                             target="_blank"
                             onClick={handleExternalLinkClick}
                             className="font-semibold no-underline hover:underline m-0"
diff --git a/panel/src/components/modal-tabs.tsx b/panel/src/components/modal-tabs.tsx
new file mode 100644
index 000000000..6c97bab02
--- /dev/null
+++ b/panel/src/components/modal-tabs.tsx
@@ -0,0 +1,53 @@
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "./ui/scroll-area";
+import type { ScrollAreaProps } from "@radix-ui/react-scroll-area";
+
+type StyledDivProps = JSX.IntrinsicElements["div"];
+
+export type ModalTabInfo = {
+    title: string;
+    icon: JSX.Element;
+    className?: string;
+}
+
+export function ModalContent({ children, className, ...props }: StyledDivProps & ScrollAreaProps) {
+    return (
+        <div className={cn('flex flex-col md:flex-row md:px-4 h-full', className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function ModalTabsList({ children, className, ...props }: StyledDivProps & ScrollAreaProps) {
+    return (
+        <div className={cn('flex flex-row md:flex-col gap-1 bg-muted md:bg-transparent p-1 md:p-0 mx-2 md:mx-0 rounded-md', className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function ModalTabWrapper({ children, className, ...props }: StyledDivProps & ScrollAreaProps) {
+    //FIXME: the number below is based off mobile screen sizes, and should be h-full while the modal content controls the actual height
+    return (
+        <ScrollArea className={cn('min-h-[16rem] w-full md:max-h-[50vh] px-2 md:px-4 max-md:pt-3', className)} {...props}>
+            {children}
+        </ScrollArea>
+    );
+}
+
+export function ModalTabInner({ children, className, ...props }: StyledDivProps) {
+    //NOTE: The padding is the minimum required for the input outlines not to get cropped
+    return (
+        <div className={cn('px-1 pb-1', className)} {...props}>
+            {children}
+        </div>
+    );
+}
+
+export function ModalTabMessage({ children, className, ...props }: StyledDivProps) {
+    return (
+        <div className={cn('min-h-[16rem] p-2 md:p-4 flex items-center justify-center text-xl text-muted-foreground', className)} {...props}>
+            {children}
+        </div>
+    )
+}
diff --git a/panel/src/components/ui/alert.tsx b/panel/src/components/ui/alert.tsx
index 41fa7e056..c822a590e 100644
--- a/panel/src/components/ui/alert.tsx
+++ b/panel/src/components/ui/alert.tsx
@@ -4,11 +4,17 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground text-black/75 dark:text-white/90",
   {
     variants: {
       variant: {
         default: "bg-background text-foreground",
+        warning:
+          "border-warning/50 bg-warning/10 text-warning-foreground [&>svg]:text-warning",
+        info:
+          "border-info/50 bg-info/10 text-info-foreground [&>svg]:text-info",
+        success:
+          "border-success/50 bg-success/10 text-success-foreground [&>svg]:text-success",
         destructive:
           "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
diff --git a/panel/src/components/ui/autosize-textarea.tsx b/panel/src/components/ui/autosize-textarea.tsx
index bd8d66543..f80c70f55 100644
--- a/panel/src/components/ui/autosize-textarea.tsx
+++ b/panel/src/components/ui/autosize-textarea.tsx
@@ -6,16 +6,51 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { useImperativeHandle } from 'react';
 
+interface UseCharCounterProps {
+    textAreaRef: HTMLTextAreaElement | null;
+    softMaxLength?: number;
+    triggerUpdateVal: string;
+}
+
+export type CharCountState = {
+    text: string;
+    isOverLimit: boolean;
+} | null;
+
+export const useCharCounter = ({
+    textAreaRef,
+    softMaxLength,
+    triggerUpdateVal,
+}: UseCharCounterProps): CharCountState => {
+    //Show the counter once the input reaches this fraction of maxLength
+    const COUNTER_VISIBLE_RATIO = 0.8;
+
+    return React.useMemo<CharCountState>(() => {
+        if (!textAreaRef) return null;
+        if (!softMaxLength) return null;
+        // Canonicalize the value (trim it) to get the effective character count
+        const currChars = textAreaRef.value.length;
+        const isVisible = currChars >= softMaxLength * COUNTER_VISIBLE_RATIO;
+        if (!isVisible) return null;
+
+        return {
+            text: `${currChars}/${softMaxLength}`,
+            isOverLimit: currChars >= softMaxLength,
+        };
+    }, [textAreaRef, softMaxLength, triggerUpdateVal]);
+};
+
+
 interface UseAutosizeTextAreaProps {
     textAreaRef: HTMLTextAreaElement | null;
     minHeight?: number;
     maxHeight?: number;
-    triggerAutoSize: string;
+    triggerUpdateVal: string;
 }
 
 export const useAutosizeTextArea = ({
     textAreaRef,
-    triggerAutoSize,
+    triggerUpdateVal,
     maxHeight = Number.MAX_SAFE_INTEGER,
     minHeight = 0,
 }: UseAutosizeTextAreaProps) => {
@@ -41,7 +76,7 @@ export const useAutosizeTextArea = ({
                 textAreaRef.style.height = `${scrollHeight + offsetBorder}px`;
             }
         }
-    }, [textAreaRef, triggerAutoSize]);
+    }, [textAreaRef, triggerUpdateVal]);
 };
 
 export type AutosizeTextAreaRef = {
@@ -53,6 +88,7 @@ export type AutosizeTextAreaRef = {
 type AutosizeTextAreaProps = {
     maxHeight?: number;
     minHeight?: number;
+    softMaxLength?: number;
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTextAreaProps>(
@@ -60,6 +96,8 @@ export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTe
         {
             maxHeight = Number.MAX_SAFE_INTEGER,
             minHeight = 52,
+            softMaxLength,
+            maxLength,
             className,
             onChange,
             value,
@@ -68,11 +106,11 @@ export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTe
         ref: React.Ref<AutosizeTextAreaRef>,
     ) => {
         const textAreaRef = React.useRef<HTMLTextAreaElement | null>(null);
-        const [triggerAutoSize, setTriggerAutoSize] = React.useState('');
+        const [triggerUpdateVal, triggerUpdate] = React.useState('');
 
         useAutosizeTextArea({
             textAreaRef: textAreaRef.current,
-            triggerAutoSize: triggerAutoSize,
+            triggerUpdateVal,
             maxHeight,
             minHeight,
         });
@@ -84,27 +122,46 @@ export const AutosizeTextarea = React.forwardRef<AutosizeTextAreaRef, AutosizeTe
         }));
 
         React.useEffect(() => {
-            setTriggerAutoSize(value as string);
+            triggerUpdate(value as string);
         }, [value, props?.defaultValue, props?.placeholder]);
 
+        const counter = useCharCounter({
+            textAreaRef: textAreaRef.current,
+            softMaxLength,
+            triggerUpdateVal,
+        });
+
         return (
-            <textarea
-                {...props}
-                value={value}
-                ref={textAreaRef}
-                className={cn(
-                    "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                    "bg-black/5 dark:bg-black/30 placeholder:opacity-50", //TX CUSTOM
-                    //NOTE: check if already available:
-                    // https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
-                    // https://tailwindcss.com/docs/v4-beta#field-sizing-utilities
-                    className,
+            <div className="relative w-full">
+                {counter && (
+                    <span
+                        className={cn(
+                            "absolute bottom-1 right-4 text-xs tabular-nums pointer-events-none select-none bg-background px-1 py-0.5 rounded-md",
+                            counter.isOverLimit ? "text-destructive" : "text-muted-foreground",
+                        )}
+                    >
+                        {counter.text}
+                    </span>
                 )}
-                onChange={(e) => {
-                    setTriggerAutoSize(e.target.value);
-                    onChange?.(e);
-                }}
-            />
+                <textarea
+                    {...props}
+                    value={value}
+                    maxLength={maxLength}
+                    ref={textAreaRef}
+                    className={cn(
+                        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                        "bg-black/5 dark:bg-black/30 placeholder:opacity-50", //TX CUSTOM
+                        //NOTE: check if already available:
+                        // https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
+                        // https://tailwindcss.com/docs/v4-beta#field-sizing-utilities
+                        className,
+                    )}
+                    onChange={(e) => {
+                        triggerUpdate(e.target.value);
+                        onChange?.(e);
+                    }}
+                />
+            </div>
         );
     },
 );
diff --git a/panel/src/components/ui/button.tsx b/panel/src/components/ui/button.tsx
index f52b3e899..a68cc1e0c 100644
--- a/panel/src/components/ui/button.tsx
+++ b/panel/src/components/ui/button.tsx
@@ -9,7 +9,12 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
+        //Default behaviors
         default: "bg-primary text-primary-foreground hover:bg-primary/75",
+        muted: "bg-muted text-muted-foreground hover:bg-secondary hover:text-seconbg-secondary-foreground",
+        link: "text-accent underline-offset-4 hover:underline",
+
+        //Semantic variants
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/75",
         warning:
@@ -18,13 +23,40 @@ const buttonVariants = cva(
           "bg-success text-success-foreground hover:bg-success/75",
         info:
           "bg-info text-info-foreground hover:bg-info/75",
-        outline:
-          "border border-foreground hover:bg-primary hover:text-primary-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/75",
-        ghost: "hover:bg-primary hover:text-primary-foreground",
-        muted: "bg-muted text-muted-foreground hover:bg-secondary hover:text-seconbg-secondary-foreground",
-        link: "text-accent underline-offset-4 hover:underline",
+
+        // Ghost buttons are transparent and only change color on hover
+        ghost:
+          "hover:bg-primary hover:text-primary-foreground",
+        "ghost-destructive":
+          "text-destructive hover:bg-destructive hover:text-destructive-foreground",
+        "ghost-warning":
+          "text-warning hover:bg-warning hover:text-warning-foreground",
+        "ghost-success":
+          "text-success hover:bg-success hover:text-success-foreground",
+        "ghost-info":
+          "text-info hover:bg-info hover:text-info-foreground",
+        "ghost-secondary":
+          "text-secondary hover:bg-secondary hover:text-secondary-foreground",
+        "ghost-muted":
+          "text-muted-foreground hover:bg-muted hover:text-muted-foreground",
+
+        // Outline buttons have a border and change background and text color on hover
+        outline:
+          "border border-foreground hover:bg-primary hover:text-primary-foreground",
+        "outline-destructive":
+          "border border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground",
+        "outline-warning":
+          "border border-warning text-warning hover:bg-warning hover:text-warning-foreground",
+        "outline-success":
+          "border border-success text-success hover:bg-success hover:text-success-foreground",
+        "outline-info":
+          "border border-info text-info hover:bg-info hover:text-info-foreground",
+        "outline-secondary":
+          "border border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground",
+        "outline-muted":
+          "border border-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -44,7 +76,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 
diff --git a/panel/src/components/ui/popover.tsx b/panel/src/components/ui/popover.tsx
new file mode 100644
index 000000000..29c7bd2a4
--- /dev/null
+++ b/panel/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/panel/src/hooks/auth.ts b/panel/src/hooks/auth.ts
index d3f85d944..b3fc33a85 100644
--- a/panel/src/hooks/auth.ts
+++ b/panel/src/hooks/auth.ts
@@ -12,6 +12,7 @@ import { redirectToLogin } from '@/lib/navigation';
 import { LogoutReasonHash } from '@/pages/auth/Login';
 import { mutate } from 'swr';
 import { fetchWithTimeout } from './fetch';
+import consts from '@shared/consts';
 
 
 /**
@@ -103,9 +104,15 @@ export const useAuth = () => {
             redirectToLogin(LogoutReasonHash.LOGOUT);
         } else {
             console.error('Failed to logout:', data);
+            // Still wipe auth even if the request fails
+            setAuthData(false);
+            redirectToLogin(LogoutReasonHash.LOGOUT);
         }
     }).catch(error => {
         console.log('Error sending logout request:', error);
+        // Still wipe auth even if the request fails
+        setAuthData(false);
+        redirectToLogin(LogoutReasonHash.LOGOUT);
     });
 
     return {
@@ -116,7 +123,7 @@ export const useAuth = () => {
 };
 
 //Effect to on logout, automagically close all dialogs/modals and reset globalState
-export const logoutWatcher = atomEffect((get, set) => {
+export const logoutWatcher: ReturnType<typeof atomEffect> = atomEffect((get, set) => {
     const isAuthenticated = get(isAuthenticatedAtom);
     if (isAuthenticated) return;
 
diff --git a/panel/src/hooks/fetch.ts b/panel/src/hooks/fetch.ts
index 151da03fb..128f1f922 100644
--- a/panel/src/hooks/fetch.ts
+++ b/panel/src/hooks/fetch.ts
@@ -1,5 +1,6 @@
 import { txToast, validToastTypes } from "@/components/TxToaster";
 import { useCsrfToken, useExpireAuthData } from "@/hooks/auth";
+import { msToShortDuration } from "@/lib/dateTime";
 import { useEffect, useRef } from "react";
 
 const WEBPIPE_PATH = "https://monitor/WebPipe";
@@ -131,6 +132,9 @@ type ApiCallOpts<RespType, ReqType> = {
     finally?: () => void;
 }
 
+//Just syntax sugar
+const VOID = undefined as void;
+
 export const useBackendApi = <
     RespType = any,
     ReqType = NonNullable<Object>,
@@ -149,6 +153,9 @@ export const useBackendApi = <
         }
     }, []);
 
+    /**
+     * @returns VOID if the request was aborted or error was handled, otherwise the response data
+     */
     return async (opts: ApiCallOpts<RespType, ReqType>) => {
         //The abort controller is not aborted, just forgotten
         abortController.current = new AbortController();
@@ -205,12 +212,14 @@ export const useBackendApi = <
         }
 
         //Starting request timeout
+        const timeoutMs = opts.timeout ?? ApiTimeout.DEFAULT;
         const timeoutId = setTimeout(() => {
             if (abortController.current?.signal.aborted) return;
             console.log('[TIMEOUT]', apiCallDesc);
-            abortController.current?.abort('timeout');
+            const msg = `Request timed out after ${msToShortDuration(timeoutMs, {units: ['s', 'ms']})}.`;
+            abortController.current?.abort(msg);
             handleError('Request Timeout', 'If you closed txAdmin, please restart it and try again.');
-        }, opts.timeout ?? ApiTimeout.DEFAULT);
+        }, timeoutMs);
 
         try {
             //Make request
@@ -220,7 +229,9 @@ export const useBackendApi = <
                 body: opts.data,
             }, abortController.current);
             clearTimeout(timeoutId);
-            if (abortController.current?.signal.aborted) return;
+            // if (abortController.current?.signal.aborted) {
+            //     throw abortController.current.signal.reason;
+            // };
 
             //If generic error
             if (hookOpts.throwGenericErrors && 'error' in data) {
@@ -261,11 +272,22 @@ export const useBackendApi = <
             return data as RespType;
 
         } catch (e) {
-            if (abortController.current?.signal.aborted) return;
+            // console.warn('Error Handling:', {
+            //     aborted: abortController.current?.signal.aborted,
+            //     reason: abortController.current?.signal.reason,
+            //     typeof: typeof e,
+            //     e,
+            // });
             clearTimeout(timeoutId);
+            if (e === 'unmount') {
+                console.warn('[UNMOUNTED]', apiCallDesc);
+                return VOID;
+            }
+            const error = abortController.current?.signal.reason ?? e as any;
             let errorMessage = 'unknown error';
-            const error = e as any;
-            if (typeof error.message !== 'string') {
+            if(typeof error === 'string') {
+                errorMessage = error;
+            } else if (typeof error.message !== 'string') {
                 errorMessage = JSON.stringify(error);
             } else if (error.message.startsWith('NetworkError')) {
                 errorMessage = 'Network error.\nIf you closed txAdmin, please restart it and try again.';
@@ -274,13 +296,10 @@ export const useBackendApi = <
             } else {
                 errorMessage = error.message;
             }
-
-            if (errorMessage.includes('unmount')) {
-                console.warn('[UNMOUNTED]', apiCallDesc);
-            } else {
-                console.error('[ERROR]', apiCallDesc, errorMessage);
-                handleError('Request Error', errorMessage);
-            }
+            
+            console.error('[ERROR]', apiCallDesc, errorMessage);
+            handleError('Request Error', errorMessage);
+            return VOID;
         } finally {
             if (opts.finally) {
                 try {
diff --git a/panel/src/hooks/theme.ts b/panel/src/hooks/theme.ts
index 9b73a1ce2..b1c904e9c 100644
--- a/panel/src/hooks/theme.ts
+++ b/panel/src/hooks/theme.ts
@@ -1,3 +1,4 @@
+import consts from '@shared/consts';
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 
 
@@ -17,7 +18,7 @@ const initialAtomValue = availableCustomThemes.find((name) => root.classList.con
  * Helpers
  */
 const setThemeCookieValue = (value: string) => {
-    document.cookie = `txAdmin-theme=${value};path=/;SameSite=Lax;max-age=31536000;`;
+    document.cookie = `${consts.cookies.theme}=${value};path=/;SameSite=Lax;max-age=31536000;`;
 }
 
 const parseTheme = (themeName: string) => {
diff --git a/panel/src/components/AccountDialog.tsx b/panel/src/layout/AccountDialog.tsx
similarity index 98%
rename from panel/src/components/AccountDialog.tsx
rename to panel/src/layout/AccountDialog.tsx
index a73a5a0e3..0ae892f6a 100644
--- a/panel/src/components/AccountDialog.tsx
+++ b/panel/src/layout/AccountDialog.tsx
@@ -7,22 +7,22 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useAuth } from "@/hooks/auth";
-import { memo, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { TabsTrigger, TabsList, TabsContent, Tabs } from "@/components/ui/tabs";
 import { ApiChangeIdentifiersReq, ApiChangePasswordReq } from "@shared/authApiTypes";
 import { useAccountModal, useCloseAccountModal } from "@/hooks/dialogs";
 import { GenericApiOkResp } from "@shared/genericApiTypes";
-import { ApiTimeout, fetchWithTimeout, useAuthedFetcher, useBackendApi } from "@/hooks/fetch";
+import { fetchWithTimeout, useAuthedFetcher, useBackendApi } from "@/hooks/fetch";
 import consts from "@shared/consts";
-import { txToast } from "./TxToaster";
+import { txToast } from "@/components/TxToaster";
 import useSWR from 'swr';
-import TxAnchor from "./TxAnchor";
+import TxAnchor from "@/components/TxAnchor";
 
 
 /**
  * Change Password tab
  */
-const ChangePasswordTab = memo(function () {
+function ChangePasswordTab() {
     const { authData, setAuthData } = useAuth();
     const { setAccountModalTab } = useAccountModal();
     const closeAccountModal = useCloseAccountModal();
@@ -151,7 +151,7 @@ const ChangePasswordTab = memo(function () {
             </form>
         </TabsContent>
     );
-})
+}
 
 
 /**
diff --git a/panel/src/layout/ActionModal/ActionIdsTab.tsx b/panel/src/layout/ActionModal/ActionIdsTab.tsx
index a56d794e8..fe52add94 100644
--- a/panel/src/layout/ActionModal/ActionIdsTab.tsx
+++ b/panel/src/layout/ActionModal/ActionIdsTab.tsx
@@ -1,18 +1,21 @@
+import { ModalTabInner } from "@/components/modal-tabs";
 import type { DatabaseActionType } from "../../../../core/modules/Database/databaseTypes";
 import MultiIdsList from "@/components/MultiIdsList";
 
 
 export default function ActionIdsTab({ action }: { action: DatabaseActionType }) {
-    return <div className="flex flex-col gap-4 px-1 mb-1 md:mb-4">
-        <MultiIdsList
-            type='id'
-            src='action'
-            list={action.ids}
-        />
-        <MultiIdsList
-            type='hwid'
-            src='action'
-            list={('hwids' in action && action.hwids) ? action.hwids : []}
-        />
-    </div>;
+    return (
+        <ModalTabInner className="flex flex-col gap-4">
+            <MultiIdsList
+                type='id'
+                src='action'
+                idsOffline={action.ids}
+            />
+            <MultiIdsList
+                type='hwid'
+                src='action'
+                idsOffline={('hwids' in action && action.hwids) ? action.hwids : []}
+            />
+        </ModalTabInner>
+    );
 }
diff --git a/panel/src/layout/ActionModal/ActionInfoTab.tsx b/panel/src/layout/ActionModal/ActionInfoTab.tsx
index e4a8b09a6..7bbee6a90 100644
--- a/panel/src/layout/ActionModal/ActionInfoTab.tsx
+++ b/panel/src/layout/ActionModal/ActionInfoTab.tsx
@@ -6,7 +6,7 @@ import { useRef, useState } from "react";
 import type { DatabaseActionType } from "../../../../core/modules/Database/databaseTypes";
 import { useOpenPlayerModal } from "@/hooks/playerModal";
 import DateTimeCorrected from "@/components/DateTimeCorrected";
-
+import { ModalTabInner } from "@/components/modal-tabs";
 
 
 const calcTextAreaLines = (text?: string) => {
@@ -98,55 +98,57 @@ export default function ActionInfoTab({ action, serverTime, tsFetch }: ActionInf
         openPlayerModal({ license: linkedPlayer });
     }
 
-    return <div className="px-1 mb-1 md:mb-4">
-        <dl className="pb-2">
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Date/Time</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">
-                    <DateTimeCorrected
-                        className="opacity-75 cursor-help"
-                        serverTime={serverTime}
-                        tsObject={action.timestamp}
-                        tsFetch={tsFetch}
-                    />
-                </dd>
-            </div>
-            {action.type === 'ban' && (
+    return (
+        <ModalTabInner>
+            <dl className="pb-2">
                 <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Expiration</dt>
-                    <dd className="text-sm leading-6 col-span-2 mt-0">{banExpirationText}</dd>
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Date/Time</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">
+                        <DateTimeCorrected
+                            className="opacity-75 cursor-help"
+                            serverTime={serverTime}
+                            tsObject={action.timestamp}
+                            tsFetch={tsFetch}
+                        />
+                    </dd>
                 </div>
-            )}
-            {action.type === 'warn' && (
+                {action.type === 'ban' && (
+                    <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                        <dt className="text-sm font-medium leading-6 text-muted-foreground">Expiration</dt>
+                        <dd className="text-sm leading-6 col-span-2 mt-0">{banExpirationText}</dd>
+                    </div>
+                )}
+                {action.type === 'warn' && (
+                    <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                        <dt className="text-sm font-medium leading-6 text-muted-foreground">Player Accepted</dt>
+                        <dd className="text-sm leading-6 col-span-2 mt-0">{warnAckedText}</dd>
+                    </div>
+                )}
                 <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Player Accepted</dt>
-                    <dd className="text-sm leading-6 col-span-2 mt-0">{warnAckedText}</dd>
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Revoked</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">{revokedText}</dd>
                 </div>
-            )}
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Revoked</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">{revokedText}</dd>
-            </div>
 
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Admin</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">{action.author}</dd>
-            </div>
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Player</dt>
-                <dd className="text-sm leading-6 col-span-2x mt-0">{playerDisplayName}</dd>
-                <dd className="text-right">
-                    <Button
-                        variant="outline"
-                        size='inline'
-                        style={{ minWidth: '8.25ch' }}
-                        onClick={handleViewPlayerClick}
-                        disabled={!linkedPlayer}
-                    >View</Button>
-                </dd>
-            </div>
-        </dl>
+                <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Admin</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">{action.author}</dd>
+                </div>
+                <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Player</dt>
+                    <dd className="text-sm leading-6 col-span-2x mt-0">{playerDisplayName}</dd>
+                    <dd className="text-right">
+                        <Button
+                            variant="outline"
+                            size='inline'
+                            style={{ minWidth: '8.25ch' }}
+                            onClick={handleViewPlayerClick}
+                            disabled={!linkedPlayer}
+                        >View</Button>
+                    </dd>
+                </div>
+            </dl>
 
-        <ActionReasonBox actionReason={action.reason} />
-    </div>;
+            <ActionReasonBox actionReason={action.reason} />
+        </ModalTabInner>
+    );
 }
diff --git a/panel/src/layout/ActionModal/ActionModal.tsx b/panel/src/layout/ActionModal/ActionModal.tsx
index ac0cfa7d9..57657b318 100644
--- a/panel/src/layout/ActionModal/ActionModal.tsx
+++ b/panel/src/layout/ActionModal/ActionModal.tsx
@@ -1,24 +1,20 @@
-import {
-    Dialog,
-    DialogContent, DialogHeader,
-    DialogTitle
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { useActionModalStateValue } from "@/hooks/actionModal";
-import { InfoIcon, ListIcon, Undo2Icon } from "lucide-react";
+import { EraserIcon, InfoIcon, ListIcon, Trash2Icon, Undo2Icon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import GenericSpinner from "@/components/GenericSpinner";
 import { cn } from "@/lib/utils";
 import { useBackendApi } from "@/hooks/fetch";
-import ModalCentralMessage from "@/components/ModalCentralMessage";
 import { HistoryActionModalResp, HistoryActionModalSuccess } from "@shared/historyApiTypes";
 import ActionIdsTab from "./ActionIdsTab";
 import ActionInfoTab from "./ActionInfoTab";
 import ActionModifyTab from "./ActionModifyTab";
+import ActionDeleteTab from "./ActionDeleteTab";
+import { ModalContent, ModalTabMessage, ModalTabsList, ModalTabWrapper, type ModalTabInfo } from "@/components/modal-tabs";
 
 
-const modalTabs = [
+const modalTabs: ModalTabInfo[] = [
     {
         title: 'Info',
         icon: <InfoIcon className="mr-2 h-5 w-5 hidden xs:block" />,
@@ -135,18 +131,15 @@ export default function ActionModal() {
 
     return (
         <Dialog open={isModalOpen} onOpenChange={handleOpenClose}>
-            <DialogContent
-                className="max-w-2xl h-full sm:h-auto max-h-full p-0 gap-1 sm:gap-4 flex flex-col"
-            // onOpenAutoFocus={(e) => e.preventDefault()}
-            >
+            <DialogContent className="max-w-2xl h-full sm:h-auto max-h-full p-0 gap-1 sm:gap-4 flex flex-col pb-4">
                 <DialogHeader className="px-4 py-3 border-b">
                     <DialogTitle className="tracking-wide line-clamp-1 leading-7 break-all mr-6">
                         {pageTitle}
                     </DialogTitle>
                 </DialogHeader>
 
-                <div className="flex flex-col md:flex-row md:px-4 h-full">
-                    <div className="flex flex-row md:flex-col gap-1 bg-muted md:bg-transparent p-1 md:p-0 mx-2 md:mx-0 rounded-md">
+                <ModalContent>
+                    <ModalTabsList>
                         {modalTabs.map((tab) => (
                             <Button
                                 id={`action-modal-tab-${tab.title}`}
@@ -156,7 +149,6 @@ export default function ActionModal() {
                                     'w-full tracking-wider justify-center md:justify-start',
                                     'h-7 rounded-sm px-2 text-sm',
                                     'md:h-10 md:text-base',
-                                    // @ts-ignore annoying, remove this when adding some class to any of the tabs
                                     tab.className,
                                 )}
                                 onClick={() => setSelectedTab(tab.title)}
@@ -165,18 +157,17 @@ export default function ActionModal() {
                                 {tab.icon} {tab.title}
                             </Button>
                         ))}
-                    </div>
-                    {/* NOTE: consistent height: sm:h-[16.5rem] */}
-                    {/* FIXME: the number below is based off mobile screen sizes, and should be h-full while the modal content controls the actual height  */}
-                    <ScrollArea className="w-full max-h-[calc(100vh-3.125rem-4rem)] min-h-[16.5rem] md:max-h-[50vh] px-4 py-2 md:py-0">
+                    </ModalTabsList>
+
+                    <ModalTabWrapper className="max-h-[calc(100vh-3.125rem-4rem)]">
                         {!modalData ? (
-                            <ModalCentralMessage>
+                            <ModalTabMessage>
                                 {modalError ? (
                                     <span className="text-destructive-inline">Error: {modalError}</span>
                                 ) : (
                                     <GenericSpinner msg="Loading..." />
                                 )}
-                            </ModalCentralMessage>
+                            </ModalTabMessage>
                         ) : (
                             <>
                                 {selectedTab === 'Info' && <ActionInfoTab
@@ -193,8 +184,8 @@ export default function ActionModal() {
                                 />}
                             </>
                         )}
-                    </ScrollArea>
-                </div>
+                    </ModalTabWrapper>
+                </ModalContent>
             </DialogContent>
         </Dialog>
     );
diff --git a/panel/src/layout/AuthShell.tsx b/panel/src/layout/AuthShell.tsx
index f86dc9c90..cabb754e3 100644
--- a/panel/src/layout/AuthShell.tsx
+++ b/panel/src/layout/AuthShell.tsx
@@ -8,6 +8,7 @@ import { LogoFullSquareGreen } from "@/components/Logos";
 import { useThemedImage } from "@/hooks/theme";
 import { handleExternalLinkClick } from "@/lib/navigation";
 import { AuthError } from "@/pages/auth/errors";
+import DynamicAdvert from "@/components/DynamicAdvert";
 
 function AuthContentWrapper({ children }: { children: React.ReactNode }) {
     return (
@@ -67,23 +68,7 @@ export default function AuthShell() {
                 </Card>
 
                 <div className="mx-auto flex flex-wrap gap-4 justify-center mb-2">
-                    {window.txConsts.adsData.login ? (
-                        <a
-                            href={window.txConsts.adsData.login.url}
-                            onClick={handleExternalLinkClick}
-                            target='_blank'
-                            className='w-48 h-16 relative group shadow-sm opacity-90 hover:opacity-100
-                            dark:brightness-90 dark:hover:brightness-110'
-                        >
-                            <div className='absolute inset-0 -z-10 animate-pulse blur 
-                            scale-0 group-hover:scale-100 transition-transform bg-black
-                            dark:bg-gradient-to-r dark:from-[#18E889] dark:to-[#01FFFF]' />
-                            <img
-                                className='rounded-lg max-w-48 max-h-16 m-auto'
-                                src={window.txConsts.adsData.login.img}
-                            />
-                        </a>
-                    ) : null}
+                    <DynamicAdvert placement='login' />
                     <a
                         href='https://discord.gg/uAmsGa2'
                         onClick={handleExternalLinkClick}
diff --git a/panel/src/components/BreakpointDebugger.tsx b/panel/src/layout/BreakpointDebugger.tsx
similarity index 95%
rename from panel/src/components/BreakpointDebugger.tsx
rename to panel/src/layout/BreakpointDebugger.tsx
index 3eb366930..1d5ea9649 100644
--- a/panel/src/components/BreakpointDebugger.tsx
+++ b/panel/src/layout/BreakpointDebugger.tsx
@@ -34,6 +34,7 @@ export default function BreakpointDebugger() {
             <h1 className="px-1 bg-red-500 lg:bg-green-500">lg</h1>
             <h1 className="px-1 bg-red-500 xl:bg-green-500">xl</h1>
             <h1 className="px-1 bg-red-500 2xl:bg-green-500">2xl</h1>
+            <h1 className="px-1 bg-red-500 3xl:bg-green-500">3xl</h1>
         </div>
     </div>;
 }
diff --git a/panel/src/layout/DesktopNavbar.tsx b/panel/src/layout/DesktopNavbar.tsx
index 4518ae375..10993ffd2 100644
--- a/panel/src/layout/DesktopNavbar.tsx
+++ b/panel/src/layout/DesktopNavbar.tsx
@@ -100,8 +100,8 @@ export default function DesktopNavbar() {
                     <HeaderMenuItem href="/insights/player-drops">
                         Player Drops
                     </HeaderMenuItem>
-                    <HeaderMenuItem href="/whitelist">
-                        Whitelist
+                    <HeaderMenuItem href="/allowlist">
+                        Allowlist
                     </HeaderMenuItem>
                     <HeaderMenuItem href="/admins" disabled={!hasPerm('manage.admins')}>
                         Admins
diff --git a/panel/src/layout/Header.tsx b/panel/src/layout/Header.tsx
index ece5408de..ebe87d390 100644
--- a/panel/src/layout/Header.tsx
+++ b/panel/src/layout/Header.tsx
@@ -143,14 +143,8 @@ function AuthedHeaderFragment() {
                 {/* TODO: remove this when remaking the ingame menu */}
                 {window.txConsts.isWebInterface && (
                     <DropdownMenuItem className="cursor-pointer" onClick={switchTheme}>
-                        <span className="hidden dark:flex items-center">
-                            <SunIcon className="mr-2 h-4 w-4" />
-                            Light Mode
-                        </span>
-                        <span className="flex dark:hidden items-center">
-                            <MoonIcon className="mr-2 h-4 w-4" />
-                            Dark Mode
-                        </span>
+                        {theme === 'light' ? <SunIcon className="mr-2 h-4 w-4" /> : <MoonIcon className="mr-2 h-4 w-4" />}
+                        {theme === 'light' ? 'Light Mode' : 'Dark Mode'}
                     </DropdownMenuItem>
                 )}
                 <DropdownMenuItem className="cursor-pointer" onClick={openAccountModal}>
diff --git a/panel/src/layout/MainRouter.tsx b/panel/src/layout/MainRouter.tsx
index b953c6d79..81501c59a 100644
--- a/panel/src/layout/MainRouter.tsx
+++ b/panel/src/layout/MainRouter.tsx
@@ -1,9 +1,11 @@
+import { useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Route as WouterRoute, Switch } from "wouter";
 import { PageErrorFallback } from "@/components/ErrorFallback";
 import { useAtomValue, useSetAtom } from "jotai";
 import { contentRefreshKeyAtom, pageErrorStatusAtom, useSetPageTitle } from "@/hooks/pages";
 import { navigate as setLocation } from 'wouter/use-browser-location';
+import { useAdminPerms } from "@/hooks/auth";
 
 import Iframe from "@/pages/Iframe";
 import NotFound from "@/pages/NotFound";
@@ -17,8 +19,9 @@ import AddLegacyBanPage from "@/pages/AddLegacyBanPage";
 import DashboardPage from "@/pages/Dashboard/DashboardPage";
 import PlayerDropsPage from "@/pages/PlayerDropsPage/PlayerDropsPage";
 import SettingsPage from "@/pages/Settings/SettingsPage";
-import { useAdminPerms } from "@/hooks/auth";
 import UnauthorizedPage from "@/pages/UnauthorizedPage";
+import DiagnosticsPage from "@/pages/Diagnostics/DiagnosticsPage";
+import AdvancedPage from "@/pages/AdvancedPage";
 
 
 type RouteType = {
@@ -46,9 +49,9 @@ const allRoutes: RouteType[] = [
         Page: <PlayerDropsPage />
     },
     {
-        path: '/whitelist',
-        title: 'Whitelist',
-        Page: <Iframe legacyUrl="whitelist" />
+        path: '/allowlist',
+        title: 'Allowlist',
+        Page: <Iframe legacyUrl="allowlist" />
     },
     {
         path: '/admins',
@@ -70,7 +73,7 @@ const allRoutes: RouteType[] = [
     {
         path: '/system/diagnostics',
         title: 'Diagnostics',
-        Page: <Iframe legacyUrl="diagnostics" />
+        Page: <DiagnosticsPage />
     },
     {
         path: '/system/console-log',
@@ -130,7 +133,7 @@ const allRoutes: RouteType[] = [
         path: '/advanced',
         title: 'Advanced',
         permission: 'all_permissions',
-        Page: <Iframe legacyUrl="advanced" />
+        Page: <AdvancedPage />
     },
 
     //No nav routes
diff --git a/panel/src/layout/MainSheets.tsx b/panel/src/layout/MainSheets.tsx
index 87c95781a..f5e83041d 100644
--- a/panel/src/layout/MainSheets.tsx
+++ b/panel/src/layout/MainSheets.tsx
@@ -43,8 +43,8 @@ export function GlobalMenuSheet() {
                             <MenuNavLink href="/insights/player-drops">
                                 <DoorOpenIcon className="mr-2 h-4 w-4" />Player Drops
                             </MenuNavLink>
-                            <MenuNavLink href="/whitelist">
-                                <ClipboardCheckIcon className="mr-2 h-4 w-4" />Whitelist
+                            <MenuNavLink href="/allowlist">
+                                <ClipboardCheckIcon className="mr-2 h-4 w-4" />Allowlist
                             </MenuNavLink>
                             <MenuNavLink href="/admins" disabled={!hasPerm('manage.admins')}>
                                 <UserSquare2Icon className="mr-2 h-4 w-4" />Admins
diff --git a/panel/src/layout/MainShell.tsx b/panel/src/layout/MainShell.tsx
index 2099d6033..13aa6902e 100644
--- a/panel/src/layout/MainShell.tsx
+++ b/panel/src/layout/MainShell.tsx
@@ -9,7 +9,7 @@ import WarningBar from './WarningBar';
 import ConfirmDialog from '@/components/ConfirmDialog';
 import PromptDialog from '@/components/PromptDialog';
 import TxToaster from '@/components/TxToaster';
-import AccountDialog from '@/components/AccountDialog';
+import AccountDialog from './AccountDialog';
 import { useOpenAccountModal } from '@/hooks/dialogs';
 import PlayerModal from './PlayerModal/PlayerModal';
 import { playerModalUrlParam, useOpenPlayerModal } from '@/hooks/playerModal';
@@ -18,7 +18,7 @@ import MainSocket from './MainSocket';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { useToggleTheme } from '@/hooks/theme';
 import { hotkeyEventListener } from '@/lib/hotkeyEventListener';
-import BreakpointDebugger from '@/components/BreakpointDebugger';
+import BreakpointDebugger from './BreakpointDebugger';
 import ActionModal from './ActionModal/ActionModal';
 import { useEffect } from 'react';
 import { actionModalUrlParam, useOpenActionModal } from '@/hooks/actionModal';
@@ -97,6 +97,11 @@ export default function MainShell() {
             <ActionModal />
             <MainSocket />
             {/* <BreakpointDebugger /> */}
+
+            {/* 1080p monitor screen height indicator */}
+            {/* <div className="fixed inset-0 select-none pointer-events-none z-50">
+                <div className="mx-auto h-[932px] w-[1920px] border-b-[1px] border-red-500/50" />
+            </div> */}
         </TooltipProvider>
     </>;
 }
diff --git a/panel/src/layout/PlayerModal/PlayerBanTab.tsx b/panel/src/layout/PlayerModal/PlayerBanTab.tsx
index f39c50a4e..3047ab3ca 100644
--- a/panel/src/layout/PlayerModal/PlayerBanTab.tsx
+++ b/panel/src/layout/PlayerModal/PlayerBanTab.tsx
@@ -5,10 +5,10 @@ import { Loader2Icon } from "lucide-react";
 import { useRef, useState } from "react";
 import { useBackendApi } from "@/hooks/fetch";
 import { GenericApiOkResp } from "@shared/genericApiTypes";
-import ModalCentralMessage from "@/components/ModalCentralMessage";
 import type { BanTemplatesDataType } from "@shared/otherTypes";
 import BanForm, { BanFormType } from "@/components/BanForm";
 import { txToast } from "@/components/TxToaster";
+import { ModalTabInner, ModalTabMessage } from "@/components/modal-tabs";
 
 
 type PlayerBanTabProps = {
@@ -28,9 +28,9 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
     });
 
     if (!hasPerm('players.ban')) {
-        return <ModalCentralMessage>
+        return <ModalTabMessage>
             You don't have permission to ban players.
-        </ModalCentralMessage>;
+        </ModalTabMessage>;
     }
 
     const handleSave = () => {
@@ -51,18 +51,13 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
             genericHandler: {
                 successMsg: 'Player banned.',
             },
-            success: (data) => {
-                setIsSaving(false);
-                closeModal();
-            },
-            error: (error) => {
-                setIsSaving(false);
-            }
+            finally: () => setIsSaving(false),
+            success: () => closeModal(),
         });
     };
 
     return (
-        <div className="grid gap-4 p-1">
+        <ModalTabInner className="grid gap-4">
             <BanForm
                 ref={banFormRef}
                 banTemplates={banTemplates}
@@ -83,6 +78,6 @@ export default function PlayerBanTab({ playerRef, banTemplates }: PlayerBanTabPr
                     ) : 'Apply Ban'}
                 </Button>
             </div>
-        </div>
+        </ModalTabInner>
     );
 }
diff --git a/panel/src/layout/PlayerModal/PlayerHistoryTab.tsx b/panel/src/layout/PlayerModal/PlayerHistoryTab.tsx
index 2914d8cb0..e95c963ba 100644
--- a/panel/src/layout/PlayerModal/PlayerHistoryTab.tsx
+++ b/panel/src/layout/PlayerModal/PlayerHistoryTab.tsx
@@ -3,7 +3,7 @@ import { tsToLocaleDateTimeString } from "@/lib/dateTime";
 import { PlayerHistoryItem } from "@shared/playerApiTypes";
 import InlineCode from "@/components/InlineCode";
 import { useOpenActionModal } from "@/hooks/actionModal";
-import ModalCentralMessage from "@/components/ModalCentralMessage";
+import { ModalTabInner, ModalTabMessage } from "@/components/modal-tabs";
 
 
 type HistoryItemProps = {
@@ -67,9 +67,9 @@ export default function PlayerHistoryTab({ actionHistory, serverTime, refreshMod
     const openActionModal = useOpenActionModal();
 
     if (!actionHistory.length) {
-        return <ModalCentralMessage>
+        return <ModalTabMessage>
             No bans/warns found.
-        </ModalCentralMessage>;
+        </ModalTabMessage>;
     }
 
     const doOpenActionModal = (actionId: string) => {
@@ -77,14 +77,16 @@ export default function PlayerHistoryTab({ actionHistory, serverTime, refreshMod
     }
 
     const reversedActionHistory = [...actionHistory].reverse();
-    return <div className="flex flex-col gap-1 p-1">
-        {reversedActionHistory.map((action) => (
-            <HistoryItem
-                key={action.id}
-                action={action}
-                serverTime={serverTime}
-                modalOpener={doOpenActionModal}
-            />
-        ))}
-    </div>;
+    return (
+        <ModalTabInner className="flex flex-col gap-1">
+            {reversedActionHistory.map((action) => (
+                <HistoryItem
+                    key={action.id}
+                    action={action}
+                    serverTime={serverTime}
+                    modalOpener={doOpenActionModal}
+                />
+            ))}
+        </ModalTabInner>
+    );
 }
diff --git a/panel/src/layout/PlayerModal/PlayerIdsTab.tsx b/panel/src/layout/PlayerModal/PlayerIdsTab.tsx
index 3dddf5643..f188ebef5 100644
--- a/panel/src/layout/PlayerModal/PlayerIdsTab.tsx
+++ b/panel/src/layout/PlayerModal/PlayerIdsTab.tsx
@@ -1,49 +1,65 @@
 import { PlayerModalPlayerData } from "@shared/playerApiTypes";
-import { TooltipProvider } from "@/components/ui/tooltip";
 import MultiIdsList from "@/components/MultiIdsList";
-import { txToast } from "@/components/TxToaster";
-import { useState } from "react";
+import { useMemo } from "react";
+import type { PlayerModalRefType } from "@/hooks/playerModal";
+import { useAdminPerms } from "@/hooks/auth";
+import { useBackendApi } from "@/hooks/fetch";
+import type { GenericApiOkResp } from "@shared/genericApiTypes";
+import { ModalTabInner } from "@/components/modal-tabs";
 
 
 type PlayerIdsTabProps = {
+    playerRef: PlayerModalRefType;
     player: PlayerModalPlayerData;
     refreshModalData: () => void;
 }
 
-export default function PlayerIdsTab({ player, refreshModalData }: PlayerIdsTabProps) {
-    // const [ids, setIds] = useState(player?.oldIds ?? []);
-    // const [hwids, setHwids] = useState(player?.oldHwids ?? []);
-    // const onWipeIds = () => {
-    //     //TODO: Implement the wipe IDs logic
-    //     // refreshModalData();
-    //     console.log('Wiping IDs...');
-    //     txToast.success('IDs wiped successfully.');
-    //     setIds((player?.oldIds ?? []).filter((id) => id.startsWith('license:')));
-    // }
-    // const onWipeHwids = () => {
-    //     //TODO: Implement the wipe IDs logic
-    //     // refreshModalData();
-    //     console.log('Wiping IDs...');
-    //     txToast.success('HWIDs wiped successfully.');
-    //     setHwids([]);
-    // }
+export default function PlayerIdsTab({ playerRef, player, refreshModalData }: PlayerIdsTabProps) {
+    const { hasPerm } = useAdminPerms();
+    const hasRemovePerms = useMemo(() => hasPerm('players.remove_ids'), [hasPerm]);
+    const removePlayerIdsApi = useBackendApi<GenericApiOkResp>({
+        method: 'POST',
+        path: `/player/removeIds`,
+    });
 
-    return <TooltipProvider>
-        <div className="flex flex-col gap-4 p-1">
+    const removePlayerIds = (ids: string[], onError: () => void) => {
+        if (!ids.length) throw new Error(`No IDs selected to remove.`);
+        removePlayerIdsApi({
+            queryParams: playerRef,
+            data: { ids },
+            toastLoadingMessage: 'Deleting selected IDs/HWIDs...',
+            genericHandler: {
+                successMsg: 'Player IDs/HWIDs deleted!',
+            },
+            error: (error, toastId) => onError(),
+            success: (data, toastId) => {
+                if ('success' in data) {
+                    refreshModalData();
+                } else {
+                    onError();
+                }
+            },
+        });
+    }
+
+    return (
+        <ModalTabInner className="flex flex-col gap-4">
             <MultiIdsList
                 type='id'
                 src='player'
-                list={player?.oldIds ?? []}
-                highlighted={player.ids}
-            // onWipeIds={onWipeIds}
+                idsOnline={player.idsOnline}
+                idsOffline={player.idsOffline}
+                onRemoveIds={removePlayerIds}
+                canRemoveIds={hasRemovePerms}
             />
             <MultiIdsList
                 type='hwid'
                 src='player'
-                list={player?.oldHwids ?? []}
-                highlighted={player.hwids}
-            // onWipeIds={onWipeIds}
+                idsOnline={player.hwidsOnline}
+                idsOffline={player.hwidsOffline}
+                onRemoveIds={removePlayerIds}
+                canRemoveIds={hasRemovePerms}
             />
-        </div>
-    </TooltipProvider>;
+        </ModalTabInner>
+    );
 }
diff --git a/panel/src/layout/PlayerModal/PlayerInfoTab.tsx b/panel/src/layout/PlayerModal/PlayerInfoTab.tsx
index bbbbcb7d2..959283f05 100644
--- a/panel/src/layout/PlayerModal/PlayerInfoTab.tsx
+++ b/panel/src/layout/PlayerModal/PlayerInfoTab.tsx
@@ -11,6 +11,7 @@ import { GenericApiOkResp } from "@shared/genericApiTypes";
 import { PlayerModalPlayerData } from "@shared/playerApiTypes";
 import { ShieldAlertIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
+import { ModalTabInner } from "@/components/modal-tabs";
 
 
 function LogActionCounter({ type, count }: { type: 'Ban' | 'Warn', count: number }) {
@@ -196,67 +197,69 @@ export default function PlayerInfoTab({ playerRef, player, serverTime, tsFetch,
         }
     }, [player, serverTime]);
 
-    return <div className="p-1">
-        {playerBannedText ? (
-            <div className="w-full p-2 pr-3 mb-1 flex items-center justify-between space-x-4 rounded-lg border shadow-lg transition-all text-black/75 dark:text-white/90 border-warning/70 bg-warning-hint">
-                <div className="flex-shrink-0 flex flex-col gap-2 items-center">
-                    <ShieldAlertIcon className="size-5 text-warning" />
+    return (
+        <ModalTabInner>
+            {playerBannedText ? (
+                <div className="w-full p-2 pr-3 mb-1 flex items-center justify-between space-x-4 rounded-lg border shadow-lg transition-all text-black/75 dark:text-white/90 border-warning/70 bg-warning-hint">
+                    <div className="flex-shrink-0 flex flex-col gap-2 items-center">
+                        <ShieldAlertIcon className="size-5 text-warning" />
+                    </div>
+                    <div className="flex-grow text-sm font-medium">
+                        {playerBannedText}
+                    </div>
                 </div>
-                <div className="flex-grow text-sm font-medium">
-                    {playerBannedText}
+            ) : null}
+            <dl className="pb-2">
+                {player.isConnected && <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Session Time</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">{sessionTimeText}</dd>
+                </div>}
+                <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Play Time</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">{playTimeText}</dd>
                 </div>
-            </div>
-        ) : null}
-        <dl className="pb-2">
-            {player.isConnected && <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Session Time</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">{sessionTimeText}</dd>
-            </div>}
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Play Time</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">{playTimeText}</dd>
-            </div>
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Join Date</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">{joinDateText}</dd>
-            </div>
-            {!player.isConnected && <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Last Connection</dt>
-                <dd className="text-sm leading-6 col-span-2 mt-0">{lastConnectionText}</dd>
-            </div>}
+                <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Join Date</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">{joinDateText}</dd>
+                </div>
+                {!player.isConnected && <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Last Connection</dt>
+                    <dd className="text-sm leading-6 col-span-2 mt-0">{lastConnectionText}</dd>
+                </div>}
 
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">ID Whitelisted</dt>
-                <dd className="text-sm leading-6 mt-0">{whitelistedText}</dd>
-                <dd className="text-right">
-                    <Button
-                        variant="outline"
-                        size='inline'
-                        style={{ minWidth: '8.25ch' }}
-                        onClick={handleWhitelistClick}
-                        disabled={!hasPerm('players.whitelist')}
-                    >
-                        {player.tsWhitelisted ? 'Remove' : 'Add WL'}
-                    </Button>
-                </dd>
-            </div>
-            <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
-                <dt className="text-sm font-medium leading-6 text-muted-foreground">Sanctions</dt>
-                <dd className="text-sm leading-6 mt-0 flex flex-wrap gap-2">
-                    <LogActionCounter type="Ban" count={banCount} />
-                    <LogActionCounter type="Warn" count={warnCount} />
-                </dd>
-                <dd className="text-right">
-                    <Button
-                        variant="outline"
-                        size='inline'
-                        style={{ minWidth: '8.25ch' }}
-                        onClick={() => { setSelectedTab('History') }}
-                    >View</Button>
-                </dd>
-            </div>
-        </dl>
+                <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">ID Whitelisted</dt>
+                    <dd className="text-sm leading-6 mt-0">{whitelistedText}</dd>
+                    <dd className="text-right">
+                        <Button
+                            variant="outline"
+                            size='inline'
+                            style={{ minWidth: '8.25ch' }}
+                            onClick={handleWhitelistClick}
+                            disabled={!hasPerm('players.whitelist')}
+                        >
+                            {player.tsWhitelisted ? 'Remove' : 'Add WL'}
+                        </Button>
+                    </dd>
+                </div>
+                <div className="py-0.5 grid grid-cols-3 gap-4 px-0">
+                    <dt className="text-sm font-medium leading-6 text-muted-foreground">Sanctions</dt>
+                    <dd className="text-sm leading-6 mt-0 flex flex-wrap gap-2">
+                        <LogActionCounter type="Ban" count={banCount} />
+                        <LogActionCounter type="Warn" count={warnCount} />
+                    </dd>
+                    <dd className="text-right">
+                        <Button
+                            variant="outline"
+                            size='inline'
+                            style={{ minWidth: '8.25ch' }}
+                            onClick={() => { setSelectedTab('History') }}
+                        >View</Button>
+                    </dd>
+                </div>
+            </dl>
 
-        <PlayerNotesBox player={player} playerRef={playerRef} refreshModalData={refreshModalData} />
-    </div>;
+            <PlayerNotesBox player={player} playerRef={playerRef} refreshModalData={refreshModalData} />
+        </ModalTabInner>
+    );
 }
diff --git a/panel/src/layout/PlayerModal/PlayerModal.tsx b/panel/src/layout/PlayerModal/PlayerModal.tsx
index cf46a3e4f..984e8b9af 100644
--- a/panel/src/layout/PlayerModal/PlayerModal.tsx
+++ b/panel/src/layout/PlayerModal/PlayerModal.tsx
@@ -1,15 +1,10 @@
-import {
-    Dialog,
-    DialogContent, DialogHeader,
-    DialogTitle
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { setPlayerModalUrlParam, usePlayerModalStateValue } from "@/hooks/playerModal";
 import { InfoIcon, ListIcon, HistoryIcon, GavelIcon } from "lucide-react";
 import PlayerInfoTab from "./PlayerInfoTab";
 import { useEffect, useState } from "react";
 import PlayerIdsTab from "./PlayerIdsTab";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import PlayerHistoryTab from "./PlayerHistoryTab";
 import PlayerBanTab from "./PlayerBanTab";
 import GenericSpinner from "@/components/GenericSpinner";
@@ -17,10 +12,10 @@ import { cn } from "@/lib/utils";
 import { useBackendApi } from "@/hooks/fetch";
 import { PlayerModalResp, PlayerModalSuccess } from "@shared/playerApiTypes";
 import PlayerModalFooter from "./PlayerModalFooter";
-import ModalCentralMessage from "@/components/ModalCentralMessage";
+import { ModalContent, ModalTabMessage, ModalTabsList, ModalTabWrapper, type ModalTabInfo } from "@/components/modal-tabs";
 
 
-const modalTabs = [
+const modalTabs: ModalTabInfo[] = [
     {
         title: 'Info',
         icon: <InfoIcon className="mr-2 h-5 w-5 hidden xs:block" />,
@@ -38,7 +33,7 @@ const modalTabs = [
         icon: <GavelIcon className="mr-2 h-5 w-5 hidden xs:block" />,
         className: 'hover:bg-destructive hover:text-destructive-foreground',
     }
-]
+];
 
 
 export default function PlayerModal() {
@@ -137,18 +132,15 @@ export default function PlayerModal() {
 
     return (
         <Dialog open={isModalOpen} onOpenChange={handleOpenClose}>
-            <DialogContent
-                className="max-w-2xl h-full sm:h-auto max-h-full p-0 gap-1 sm:gap-4 flex flex-col"
-            // onOpenAutoFocus={(e) => e.preventDefault()}
-            >
+            <DialogContent className="max-w-2xl h-full sm:h-auto max-h-full p-0 gap-1 sm:gap-4 flex flex-col">
                 <DialogHeader className="px-4 py-3 border-b">
                     <DialogTitle className="tracking-wide line-clamp-1 leading-7 break-all mr-6">
                         {pageTitle}
                     </DialogTitle>
                 </DialogHeader>
 
-                <div className="flex flex-col md:flex-row md:px-4 h-full">
-                    <div className="flex flex-row md:flex-col gap-1 bg-muted md:bg-transparent p-1 md:p-0 mx-2 md:mx-0 rounded-md">
+                <ModalContent>
+                    <ModalTabsList>
                         {modalTabs.map((tab) => (
                             <Button
                                 id={`player-modal-tab-${tab.title}`}
@@ -166,23 +158,22 @@ export default function PlayerModal() {
                                 {tab.icon} {tab.title}
                             </Button>
                         ))}
-                    </div>
-                    {/* NOTE: consistent height: sm:h-[16.5rem] */}
-                    {/* FIXME: the number below is based off mobile screen sizes, and should be h-full while the modal content controls the actual height  */}
-                    <ScrollArea className="w-full max-h-[calc(100vh-3.125rem-4rem-5rem)] min-h-[16.5rem] md:max-h-[50vh] px-4 py-2 md:py-0">
+                    </ModalTabsList>
+                    
+                    <ModalTabWrapper className="max-h-[calc(100vh-3.125rem-4rem-5rem)]">
                         {!modalData ? (
-                            <ModalCentralMessage>
+                            <ModalTabMessage>
                                 {modalError ? (
                                     <span className="text-destructive-inline">Error: {modalError}</span>
                                 ) : (
                                     <GenericSpinner msg="Loading..." />
                                 )}
-                            </ModalCentralMessage>
+                            </ModalTabMessage>
                         ) : (
                             <>
                                 {selectedTab === 'Info' && <PlayerInfoTab
-                                    playerRef={playerRef!}
                                     player={modalData.player}
+                                    playerRef={playerRef!}
                                     serverTime={modalData.serverTime}
                                     tsFetch={tsFetch}
                                     setSelectedTab={setSelectedTab}
@@ -195,6 +186,7 @@ export default function PlayerModal() {
                                 />}
                                 {selectedTab === 'IDs' && <PlayerIdsTab
                                     player={modalData.player}
+                                    playerRef={playerRef!}
                                     refreshModalData={refreshModalData}
                                 />}
                                 {selectedTab === 'Ban' && <PlayerBanTab
@@ -203,8 +195,8 @@ export default function PlayerModal() {
                                 />}
                             </>
                         )}
-                    </ScrollArea>
-                </div>
+                    </ModalTabWrapper>
+                </ModalContent>
                 <PlayerModalFooter
                     playerRef={playerRef!}
                     player={modalData?.player}
diff --git a/panel/src/layout/PlayerModal/PlayerModalFooter.tsx b/panel/src/layout/PlayerModal/PlayerModalFooter.tsx
index 09a9de13a..b7e21a1a0 100644
--- a/panel/src/layout/PlayerModal/PlayerModalFooter.tsx
+++ b/panel/src/layout/PlayerModal/PlayerModalFooter.tsx
@@ -51,7 +51,7 @@ export default function PlayerModalFooter({ playerRef, player }: PlayerModalFoot
         const params = new URLSearchParams();
         params.set("autofill", "true");
         params.set("name", player.pureName);
-        for (const id of player.ids) {
+        for (const id of player.idsOnline) {
             if (id.startsWith("discord:")) {
                 params.set("discord", id);
             } else if (id.startsWith("fivem:")) {
@@ -134,7 +134,7 @@ export default function PlayerModalFooter({ playerRef, player }: PlayerModalFoot
             <Button
                 variant='outline'
                 size='sm'
-                disabled={!hasPerm('manage.admins') || !player || !player.ids.length}
+                disabled={!hasPerm('manage.admins') || !player || !player.idsOnline.length}
                 onClick={handleGiveAdmin}
                 className="pl-2 sm:mr-auto"
             >
diff --git a/panel/src/layout/ServerSidebar/ServerSidebar.tsx b/panel/src/layout/ServerSidebar/ServerSidebar.tsx
index c6e1448a3..31fe419bb 100644
--- a/panel/src/layout/ServerSidebar/ServerSidebar.tsx
+++ b/panel/src/layout/ServerSidebar/ServerSidebar.tsx
@@ -4,6 +4,7 @@ import ServerMenu from './ServerMenu';
 import ServerControls from './ServerControls';
 import ServerStatus from './ServerStatus';
 import ServerSchedule from './ServerSchedule';
+import DynamicAdvert from '@/components/DynamicAdvert';
 
 
 type ServerSidebarProps = {
@@ -36,23 +37,7 @@ export function ServerSidebar({ isSheet }: ServerSidebarProps) {
             </div>
             <hr className={isSheet ? 'block' : 'hidden'} />
 
-            {window.txConsts.adsData.main ? (
-                <a
-                    href={window.txConsts.adsData.main.url}
-                    onClick={handleExternalLinkClick}
-                    target='_blank'
-                    className='w-sidebar h-[80px] relative self-center group shadow-sm opacity-80 hover:opacity-100
-                    dark:brightness-90 dark:hover:brightness-100'
-                >
-                    <div className='absolute inset-0 -z-10 animate-pulse blur 
-                    scale-0 group-hover:scale-100 transition-transform bg-black
-                    dark:bg-gradient-to-r dark:from-[#18E889] dark:to-[#01FFFF]' />
-                    <img
-                        className='rounded-xl max-w-sidebar max-h-[80px] m-auto'
-                        src={window.txConsts.adsData.main.img}
-                    />
-                </a>
-            ) : null}
+            <DynamicAdvert placement='sidebar' />
 
             {window.txConsts.isWebInterface ? (
                 <div className='flex flex-col items-center justify-center gap-1 text-sm font-light opacity-85 hover:opacity-100'>
@@ -64,14 +49,6 @@ export function ServerSidebar({ isSheet }: ServerSidebarProps) {
                         &nbsp;|
                         fx: <strong>b{window.txConsts.fxsVersion}</strong>
                     </span>
-                    <a
-                        href="https://github.com/tabarra/txAdmin/blob/master/LICENSE"
-                        onClick={handleExternalLinkClick}
-                        target="_blank"
-                        className='text-muted-foreground hover:text-accent'
-                    >
-                        &copy; 2019-{(new Date).getUTCFullYear()} Tabarra
-                    </a>
                 </div>
             ) : null}
         </aside>
diff --git a/panel/src/layout/ServerSidebar/ServerStatus.tsx b/panel/src/layout/ServerSidebar/ServerStatus.tsx
index 9f705ef7f..4e6f84999 100644
--- a/panel/src/layout/ServerSidebar/ServerStatus.tsx
+++ b/panel/src/layout/ServerSidebar/ServerStatus.tsx
@@ -98,9 +98,9 @@ export default function ServerStatus() {
     let serverHealthColor: StatusBadgeTypesVars = 'default';
     let serverUptimeText = '--';
     let serverUptimeDesc = '--';
-    let whitelistText = '--';
-    let whitelistDesc = '--';
-    let whitelistColor: StatusBadgeTypesVars = 'default';
+    let allowlistText = '--';
+    let allowlistDesc = '--';
+    let allowlistColor: StatusBadgeTypesVars = 'default';
     let discordStatusText = '--';
     let discordStatusDesc = '--';
     let discordStatusColor: StatusBadgeTypesVars = 'default';
@@ -135,23 +135,26 @@ export default function ServerStatus() {
             serverHealthDescTitle = 'Unknown server status.';
         }
 
-        //Whitelist
+        //Allowlist - FIXME:NEXT:UPDATE: rename backend var
         if (globalStatus.server.whitelist === 'disabled') {
-            whitelistText = 'DISABLED';
-            whitelistDesc = 'Anyone can join.';
+            allowlistText = 'DISABLED';
+            allowlistDesc = 'Anyone can join.';
         } else if (globalStatus.server.whitelist === 'adminOnly') {
-            whitelistText = 'ADMIN';
-            whitelistColor = 'warning';
-            whitelistDesc = 'Only admins can join.';
+            allowlistText = 'ADMIN';
+            allowlistColor = 'warning';
+            allowlistDesc = 'Only admins can join.';
         } else if (globalStatus.server.whitelist === 'discordMember') {
-            whitelistText = 'MEMBER';
-            whitelistDesc = 'Only Discord server members can join.';
+            allowlistText = 'MEMBER';
+            allowlistDesc = 'Only Discord server members can join.';
         } else if (globalStatus.server.whitelist === 'discordRoles') {
-            whitelistText = 'ROLES';
-            whitelistDesc = 'Only Discord server members with the specified roles can join.';
+            allowlistText = 'ROLES';
+            allowlistDesc = 'Only Discord server members with the specified roles can join.';
         } else if (globalStatus.server.whitelist === 'approvedLicense') {
-            whitelistText = 'LICENSE';
-            whitelistDesc = 'Only players with an approved license can join.';
+            allowlistText = 'LICENSE';
+            allowlistDesc = 'Only players with an approved license can join.';
+        } else if (globalStatus.server.whitelist === 'external') {
+            allowlistText = 'EXTERNAL';
+            allowlistDesc = 'Player joins are handled by an external resource.';
         }
 
         //Bot status - too long to show all the text, so just show the code
@@ -185,11 +188,11 @@ export default function ServerStatus() {
                 >{serverUptimeText}</StatusBadge>
             </div>
             <div className="flex justify-between items-center text-muted-foreground text-sm gap-1.5">
-                Whitelist:
+                Allowlist:
                 <StatusBadge
-                    tooltip={whitelistDesc}
-                    type={whitelistColor}
-                >{whitelistText}</StatusBadge>
+                    tooltip={allowlistDesc}
+                    type={allowlistColor}
+                >{allowlistText}</StatusBadge>
             </div>
             <div className="flex justify-between items-center text-muted-foreground text-sm gap-1.5">
                 Discord Bot:
diff --git a/panel/src/layout/WarningBar.tsx b/panel/src/layout/WarningBar.tsx
index a8e6c3f92..291ed3f49 100644
--- a/panel/src/layout/WarningBar.tsx
+++ b/panel/src/layout/WarningBar.tsx
@@ -1,16 +1,16 @@
 import { Button } from "@/components/ui/button";
 import useWarningBar from "@/hooks/useWarningBar";
+import { LocalStorageKey } from "@/lib/localStorage";
 import { cn } from "@/lib/utils";
 import { BellOffIcon, CloudOffIcon, DownloadCloudIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { FaDiscord } from "react-icons/fa";
 
-const LOCALSTORAGE_KEY = 'tsUpdateDismissed';
 const MAJOR_DISMISSAL_TIME = 12 * 60 * 60 * 1000;
 const MINOR_DISMISSAL_TIME = 48 * 60 * 60 * 1000;
 
 const getTsUpdateDismissed = () => {
-    const stored = localStorage.getItem(LOCALSTORAGE_KEY);
+    const stored = localStorage.getItem(LocalStorageKey.UpdateWarningPostponedTs);
     if (!stored) return false;
     const parsed = parseInt(stored);
     if (isNaN(parsed)) return false;
@@ -43,7 +43,7 @@ export function InnerWarningBar({ titleIcon, title, description, isImportant, ca
     }
 
     const postponeUpdate = () => {
-        localStorage.setItem(LOCALSTORAGE_KEY, Date.now().toString());
+        localStorage.setItem(LocalStorageKey.UpdateWarningPostponedTs, Date.now().toString());
         forceRerender()
     }
 
@@ -58,12 +58,12 @@ export function InnerWarningBar({ titleIcon, title, description, isImportant, ca
     return (
         <div className='fixed top-navbarvh w-full flex justify-center z-40'>
             <div className={cn(
-                "w-full sm:w-[28rem] h-9 hover:h-32 overflow-hidden sm:rounded-b-md",
-                "flex flex-col justify-center items-center p-2",
+                "w-full sm:w-[28rem] min-h-9 hover:min-h-32 overflow-hidden sm:rounded-b-md",
+                "flex flex-col justify-center items-center p-1",
                 "group cursor-default transition-[height] shadow-xl",
                 isImportant ? 'bg-destructive text-destructive-foreground' : 'bg-info text-info-foreground'
             )}>
-                <h2 className="text-md group-hover:font-medium">
+                <h2 className="text-md text-center group-hover:font-medium">
                     {titleIcon}
                     {title}
                 </h2>
diff --git a/panel/src/lib/localStorage.ts b/panel/src/lib/localStorage.ts
new file mode 100644
index 000000000..ddadc45ac
--- /dev/null
+++ b/panel/src/lib/localStorage.ts
@@ -0,0 +1,114 @@
+/*
+    FIXME:NEXT:UPDATE REMOVE OLD KEYS
+    - dynamic:
+        - dynamicNewFeatTs-*
+        - txa:img-cache:*
+    - static:
+        - txa:last-error-reload
+        - tsUpdateDismissed
+        - playerSearchRememberType
+        - authCredsAutofill
+    - atomWithStorage:
+        - liveConsoleOptions
+        - liveConsoleCommandHistory
+        - liveConsoleCommandBookmarks
+*/
+
+/*
+    FIXME: legacy page keys to remove:
+    - eventFilters
+    - resourcesPageCollapsedGroups
+    - resourcesPageFilter
+    - resourcesPageShowDefault
+*/
+
+/**
+ * Centralized storage key list for better organization.
+ */
+export enum LocalStorageKey {
+    // Prefixes-only
+    // ImgCache = 'txa:imgCache:', //NOTE: not yet used
+    NewFeatureSeenTs = 'txa:newFeat:seenTs:',
+
+    // static
+    ErrorFallbackLastReload = 'txa:errorFallback:lastReload',
+    UpdateWarningPostponedTs = 'txa:updateWarning:postponedTs',
+    PlayersPageSearchType = 'txa:playersPage:searchType',
+    AuthCredsAutofill = 'txa:authCreds:autofill',
+
+    // atomWithStorage
+    LiveConsoleBookmarks = 'txa:liveConsole:bookmarks',
+    LiveConsoleHistory = 'txa:liveConsole:history',
+    LiveConsoleOptions = 'txa:liveConsole:options',
+}
+
+
+/**
+ * Migrate old storage keys to the new ones, and wipe the old ones.
+ * FIXME:NEXT:UPDATE REMOVE OLD KEYS
+ */
+export const migrateStorageKeys = () => {
+    const migrateKey = (oldKey: string, newKey: string) => {
+        try {
+            const newValue = localStorage.getItem(newKey);
+            const oldValue = localStorage.getItem(oldKey);
+            if (!newValue && oldValue) {
+                localStorage.setItem(newKey, oldValue);
+                localStorage.removeItem(oldKey);
+            }
+        } catch (error) { }
+    }
+    migrateKey('txa:last-error-reload', LocalStorageKey.ErrorFallbackLastReload);
+    migrateKey('tsUpdateDismissed', LocalStorageKey.UpdateWarningPostponedTs);
+    migrateKey('playerSearchRememberType', LocalStorageKey.PlayersPageSearchType);
+    migrateKey('authCredsAutofill', LocalStorageKey.AuthCredsAutofill);
+    migrateKey('liveConsoleCommandBookmarks', LocalStorageKey.LiveConsoleBookmarks);
+    migrateKey('liveConsoleCommandHistory', LocalStorageKey.LiveConsoleHistory);
+    
+    //Wipe old dynamic keys
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (!key) continue;
+        try {
+            if (key.startsWith('dynamicNewFeatTs-') || key.startsWith('txa:img-cache:')) {
+                localStorage.removeItem(key);
+            }
+        } catch (error) { }
+    }
+}
+
+
+/**
+ * Creates a Jotai-compatible storage for arbitrary values.
+ * Check how it's used in the LiveConsole hooks.
+ */
+export const createValidatedStorage = <T>(validator: (value: unknown) => T, defaultValue: T) => {
+    return {
+        getItem: (key: string): T => {
+            const storedValue = localStorage.getItem(key);
+            if (!storedValue) return defaultValue;
+            try {
+                const parsedValue = JSON.parse(storedValue);
+                return validator(parsedValue);
+            } catch (error) {
+                return defaultValue;
+            }
+        },
+        setItem: (key: string, value: T): void => {
+            const validatedValue = validator(value);
+            localStorage.setItem(key, JSON.stringify(validatedValue));
+        },
+        removeItem: (key: string): void => {
+            localStorage.removeItem(key);
+        },
+    };
+};
+
+
+/**
+ * Ensures that the value is an array of strings.
+ */
+export const validateStringArray = (value: unknown): string[] => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is string => typeof item === 'string');
+};
diff --git a/panel/src/lib/navigation.ts b/panel/src/lib/navigation.ts
index 79115d327..9534c6405 100644
--- a/panel/src/lib/navigation.ts
+++ b/panel/src/lib/navigation.ts
@@ -58,13 +58,13 @@ export const handleExternalLinkClick = (event: React.MouseEvent<HTMLElement, Mou
 /**
  * Sets the window URL search param with a given value, or deletes it if value is undefined
  */
-export const setUrlSearchParam = (paramName: string, ref: string | undefined) => {
+export const setUrlSearchParam = (paramName: string, value: string | undefined) => {
     if (typeof paramName !== 'string' || !paramName.length) {
         throw new Error(`setUrlSearchParam: paramName must be a non-empty string`);
     }
     const pageUrl = new URL(window.location.toString());
-    if (ref) {
-        pageUrl.searchParams.set(paramName, ref);
+    if (value) {
+        pageUrl.searchParams.set(paramName, value);
     } else {
         pageUrl.searchParams.delete(paramName);
     }
@@ -72,6 +72,18 @@ export const setUrlSearchParam = (paramName: string, ref: string | undefined) =>
 }
 
 
+/**
+ * Gets the window URL search param with a given name
+ */
+export const getUrlSearchParam = (paramName: string) => {
+    if (typeof paramName !== 'string' || !paramName.length) {
+        throw new Error(`getUrlSearchParam: paramName must be a non-empty string`);
+    }
+    const pageUrl = new URL(window.location.toString());
+    return pageUrl.searchParams.get(paramName);
+}
+
+
 /**
  * Sets the window URL hash to a given value, or deletes it if value is undefined
  */
diff --git a/panel/src/lib/utils.ts b/panel/src/lib/utils.ts
index 91493d391..d629df9a3 100644
--- a/panel/src/lib/utils.ts
+++ b/panel/src/lib/utils.ts
@@ -173,3 +173,43 @@ export const banDurationToShortString = (duration: BanDurationType) => {
     }
     return `${duration.value}${suffix}`;
 }
+
+
+/**
+ * Save a file to the user's computer
+ * @returns true if download was initiated successfully, false otherwise
+ */
+export const downloadTextFile = (content: string, fileName: string, fileType: 'txt' | 'json' | 'md' = 'txt'): boolean => {
+    try {
+        // Check if we're in a browser environment
+        if (typeof document === 'undefined' || !document.body) {
+            console.warn('downloadTextFile: document or document.body not available');
+            return false;
+        }
+
+        const mimeType = fileType === 'txt'
+            ? 'text/plain'
+            : fileType === 'json'
+                ? 'application/json'
+                : 'text/markdown';
+
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${fileName}.${fileType}`;
+        
+        // Make the link invisible
+        a.style.display = 'none';
+        
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        
+        return true;
+    } catch (error) {
+        console.error('downloadTextFile failed:', error);
+        return false;
+    }
+}
diff --git a/panel/src/main.tsx b/panel/src/main.tsx
index 4ec8b005b..dc66b8963 100644
--- a/panel/src/main.tsx
+++ b/panel/src/main.tsx
@@ -60,6 +60,11 @@ if (window.location.pathname.substring(0, 8) === '/WebPipe') {
     window.history.replaceState(null, '', newUrl);
 }
 
+// FIXME:NEXT:UPDATE - legacy /whitelist URL
+if (window.location.pathname === '/whitelist') {
+    window.history.replaceState(null, '', '/allowlist');
+}
+
 //Rendering auth or main pages depending on if the user is authenticated
 const authRoutePrefixes = ['/login', '/addMaster'];
 const isAuthRoute = (pathname: string) => {
diff --git a/panel/src/pages/AddLegacyBanPage.tsx b/panel/src/pages/AddLegacyBanPage.tsx
index f663a1c89..324e00f0a 100644
--- a/panel/src/pages/AddLegacyBanPage.tsx
+++ b/panel/src/pages/AddLegacyBanPage.tsx
@@ -65,15 +65,14 @@ export default function AddLegacyBanPage() {
             genericHandler: {
                 successMsg: 'Identifiers banned.',
             },
+            finally: () => setIsSaving(false),
             success: (data) => {
-                setIsSaving(false);
                 idsTextareaRef.current!.value = '';
                 idsTextareaRef.current!.focus();
             },
             error: (error) => {
-                setIsSaving(false);
                 idsTextareaRef.current!.focus();
-            }
+            },
         });
     };
 
diff --git a/panel/src/pages/AdvancedPage.tsx b/panel/src/pages/AdvancedPage.tsx
new file mode 100644
index 000000000..bd5a32e31
--- /dev/null
+++ b/panel/src/pages/AdvancedPage.tsx
@@ -0,0 +1,256 @@
+
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { SendIcon, DownloadIcon, HelpCircleIcon, AlertCircleIcon, DeleteIcon, CommandIcon, SquareTerminalIcon, Loader2Icon } from "lucide-react";
+import { advancedCommands } from "@shared/advancedCommands";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import JsonCodeBlock from "@/components/JsonCodeBlock";
+import MarkdownProse from "@/components/MarkdownProse";
+import { cn, downloadTextFile } from "@/lib/utils";
+import { txToast } from "@/components/TxToaster";
+import type {
+    RunAdvancedCommandResp,
+    RunAdvancedCommandRespSuccess,
+    RunAdvancedCommandReq,
+} from "@shared/advancedCommands";
+import { getUrlSearchParam, setUrlSearchParam } from "@/lib/navigation";
+import { useBackendApi } from "@/hooks/fetch";
+
+
+function HelpPopover({ onCommandClick }: { onCommandClick: (c: string) => void }) {
+    const [isHelpOpen, setIsHelpOpen] = useState(false);
+
+    const handleCommandClick = (commandName: string) => {
+        onCommandClick(commandName);
+        setIsHelpOpen(false);
+    }
+
+    return (
+        <Popover open={isHelpOpen} onOpenChange={setIsHelpOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" title="Help" size="icon">
+                    <HelpCircleIcon className="w-5" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[100vw] xs:w-[500px] p-0" align="end">
+                <div className="p-4 border-b">
+                    <h3 className="font-semibold">Available Commands</h3>
+                    <p className="text-sm text-muted-foreground">Click a command to autofill it</p>
+                </div>
+                <ScrollArea className="h-[500px]">
+                    <div className="p-4 space-y-3">
+                        {advancedCommands.map((cmd) => (
+                            <button
+                                key={cmd.name}
+                                className="w-full text-left p-3 rounded-lg border bg-black/5 border-transparent hover:border-border transition-all"
+                                onClick={() => handleCommandClick(cmd.name)}
+                            >
+                                <div className="space-y-2">
+                                    <div className="flex items-center gap-2 flex-wrap">
+                                        <span className="font-mono font-bold text-sm text-foreground">
+                                            {cmd.name}
+                                        </span>
+                                        {cmd.args?.map((arg, index) => (
+                                            <Badge key={index} variant="outline" className="text-xs font-mono px-2 py-0.5 rounded-md font-light">
+                                                {arg}
+                                            </Badge>
+                                        ))}
+                                    </div>
+                                    <p className="text-xs text-muted-foreground leading-relaxed">
+                                        {cmd.desc}
+                                    </p>
+                                </div>
+                            </button>
+                        ))}
+                    </div>
+                </ScrollArea>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+
+function OutputArea({ output }: { output: RunAdvancedCommandRespSuccess | null }) {
+    return (
+        <div className="pt-4">
+            {output ? (
+                'error' in output ? (
+                    <Alert variant="destructive">
+                        <AlertCircleIcon className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>{output.error}</AlertDescription>
+                    </Alert>
+                ) : output.type === 'md' ? (
+                    <div className="bg-muted/40 p-4 rounded-md">
+                        <MarkdownProse md={output.data} className="max-w-none" />
+                    </div>
+                ) : (
+                    <div className="bg-muted/40 p-4 rounded-md">
+                        <JsonCodeBlock value={output.data} />
+                    </div>
+                )
+            ) : (
+                <p className="text-muted-foreground opacity-50">
+                    No output yet. Run a command to see the the output here.
+                </p>
+            )}
+        </div>
+    )
+}
+
+export default function AdvancedPage() {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [output, setOutput] = useState<RunAdvancedCommandRespSuccess | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const runCommandApi = useBackendApi<RunAdvancedCommandResp, RunAdvancedCommandReq>({
+        method: 'POST',
+        path: `/advanced/run`,
+    });
+
+    //Get autofill from the url
+    useEffect(() => {
+        if (!inputRef.current) return;
+        const autofill = getUrlSearchParam('cmd');
+        if (autofill) {
+            inputRef.current.value = autofill;
+            inputRef.current.focus();
+        }
+    }, [inputRef]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (isLoading || !inputRef.current) return;
+        const cmd = inputRef.current.value.trim();
+        if (!cmd) {
+            inputRef.current.focus();
+            return;
+        }
+
+        setUrlSearchParam('cmd', cmd);
+        setIsLoading(true);
+        runCommandApi({
+            data: { cmd },
+            finally: () => {
+                setIsLoading(false);
+                setTimeout(() => inputRef.current?.focus(), 50);
+            },
+            success: (data) => setOutput(data),
+            error: (error) => setOutput({ error }),
+        });
+    }
+
+    const handleClearOutput = () => {
+        setOutput(null);
+    }
+
+    const handleSave = () => {
+        if (!output) return;
+        const content = 'error' in output ? output.error : output.data;
+        const command = inputRef.current?.value.trim() || 'command';
+        const extension = 'error' in output ? 'txt' : output.type === 'md' ? 'md' : 'json';
+        const success = downloadTextFile(content, command, extension);
+        if (!success) {
+            txToast.error('Failed to download file. Please try again.');
+        }
+    }
+
+    return (
+        <div className="relative flex flex-col h-full w-full space-y-6">
+            <div className="flex flex-wrap-reverse gap-6">
+                {/* Input Card */}
+                <Card className="w-full 2xl:flex-1 2xl:min-w-80">
+                    <CardHeader>
+                        <CardTitle className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                                <CommandIcon className="size-6 text-muted-foreground" />
+                                Advanced Commands
+                            </div>
+                            <HelpPopover onCommandClick={(c) => {
+                                if (!inputRef.current) return;
+                                inputRef.current.value = c + " ";
+                                inputRef.current.focus();
+                            }} />
+                        </CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <form onSubmit={handleSubmit} className="flex gap-2">
+                            <Input
+                                ref={inputRef}
+                                className="flex-1"
+                                disabled={isLoading}
+                                placeholder="Type a command or click the help button..."
+                            />
+                            <Button type="submit" disabled={isLoading} title="Run command" size="icon">
+                                {isLoading ? (
+                                    <Loader2Icon className="w-5 mt-0.5 mr-0.5 animate-spin" />
+                                ) : (
+                                    <SendIcon className="w-5 mt-0.5 mr-0.5" />
+                                )}
+                            </Button>
+                        </form>
+                    </CardContent>
+                </Card>
+
+                {/* Warning Card - appears first when wrapped */}
+                <Alert
+                    variant="default"
+                    className="max-2xl:w-full mx-auto 2xl:w-auto 2xl:flex-shrink-0  2xl:max-w-sm relative bg-warning-hint border-warning dark:opacity-75"
+                >
+                    <AlertCircleIcon className="h-4 w-4" />
+                    <AlertTitle>Caution</AlertTitle>
+                    <AlertDescription>
+                        This page is meant to be used by advanced users only, and there is no documentation for it. <strong>Use at your own risk.</strong>
+                    </AlertDescription>
+                </Alert>
+            </div>
+
+            {/* Output Area */}
+            <div className="flex-1">
+                <div className="flex items-center justify-between pb-3 border-b">
+                    <div className="flex items-center gap-2">
+                        <SquareTerminalIcon className="size-6 text-muted-foreground" />
+                        <h2 className="text-lg font-semibold">Output</h2>
+                    </div>
+                    <div className="flex gap-2">
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleClearOutput}
+                            disabled={!output}
+                            title="Clear output"
+                        >
+                            <DeleteIcon className="w-5 mr-0.5" />
+                        </Button>
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={handleSave}
+                            disabled={!output}
+                            title="Save output"
+                        >
+                            <DownloadIcon className="w-4" />
+                        </Button>
+                    </div>
+                </div>
+                <OutputArea output={output} />
+            </div>
+
+            {/* txSnaily */}
+            <img
+                className={cn(
+                    "absolute bottom-0 right-0 size-64 opacity-35 pointer-events-none",
+                    "border border-transparent",
+                    isLoading && "opacity-100 animate-bounce",
+                )}
+                src="img/txSnaily2anim_320.png"
+                alt="Not A Meme"
+            />
+        </div>
+    )
+}
diff --git a/panel/src/pages/Dashboard/DashboardPage.tsx b/panel/src/pages/Dashboard/DashboardPage.tsx
index 34279dee1..2510b14b6 100644
--- a/panel/src/pages/Dashboard/DashboardPage.tsx
+++ b/panel/src/pages/Dashboard/DashboardPage.tsx
@@ -9,7 +9,7 @@ import { useAtomValue } from 'jotai';
 import { txConfigStateAtom } from '@/hooks/status';
 import { useLocation } from 'wouter';
 import { TxConfigState } from '@shared/enums';
-import ModalCentralMessage from '@/components/ModalCentralMessage';
+import { ModalTabMessage } from '@/components/modal-tabs';
 import GenericSpinner from '@/components/GenericSpinner';
 
 
@@ -41,29 +41,12 @@ function DashboardPageInner() {
 
     return (
         <div className="w-full min-w-96 flex flex-col gap-4">
-            <div className="w-full grid grid-cols-3 2xl:grid-cols-8 gap-4">
+            <div className="w-full grid grid-cols-3 3xl:grid-cols-8 gap-4">
                 <PlayerDropCard />
                 <ServerStatsCard />
                 <ThreadPerfCard />
             </div>
             <FullPerfCard />
-
-            {/* TODO: maybe convert in top server warning */}
-            {/* <div className="mx-auto max-w-4xl w-full sm:w-auto sm:min-w-[28rem] relative overflow-hidden z-40 p-3 pr-10 flex items-center justify-between space-x-4 rounded-xl border shadow-lg transition-all text-black/75 dark:text-white/90 border-warning/70 bg-warning-hint animate-toastbar-enter opacity-50 hover:opacity-100">
-                <div className="flex-shrink-0 flex flex-col gap-2 items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-warning stroke-warning animate-toastbar-icon">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <path d="M12 16v-4"></path>
-                        <path d="M12 8h.01"></path>
-                    </svg>
-                </div>
-                <div className="flex-grow">
-                    <span className="block whitespace-pre-line">
-                        <b>This update changes how the performance chart show its data.</b> <br />
-                        Now the histogram (colors) are based on the time spent on each bucket instead of the number of ticks. And the bucket boundaries (ms) may have changed to have a better resolution at lower tick times.
-                    </span>
-                </div>
-            </div> */}
         </div>
     );
 }
@@ -81,9 +64,9 @@ export default function DashboardPage() {
         return null;
     } else if (txConfigState !== TxConfigState.Ready) {
         return <div className='size-full'>
-            <ModalCentralMessage>
-            <GenericSpinner msg={`Unknown Config State: ${String(txConfigState)}`} />
-        </ModalCentralMessage>
+            <ModalTabMessage>
+                <GenericSpinner msg={`Unknown Config State: ${String(txConfigState)}`} />
+            </ModalTabMessage>
         </div>;
     } else {
         return <DashboardPageInner />;
diff --git a/panel/src/pages/Dashboard/PlayerDropCard.tsx b/panel/src/pages/Dashboard/PlayerDropCard.tsx
index 9550513b1..bd3eaf082 100644
--- a/panel/src/pages/Dashboard/PlayerDropCard.tsx
+++ b/panel/src/pages/Dashboard/PlayerDropCard.tsx
@@ -203,7 +203,7 @@ export default function PlayerDropCard() {
     }
 
     return (
-        <div className="col-span-3 sm:col-span-2 2xl:col-span-3 py-2 md:rounded-xl border bg-card shadow-sm flex flex-col min-w-64 h-[20rem] max-h-[20rem]">
+        <div className="col-span-3 sm:col-span-2 3xl:col-span-3 py-2 md:rounded-xl border bg-card shadow-sm flex flex-col min-w-64 h-[20rem] max-h-[20rem]">
             <div className="px-4 flex flex-row items-center justify-between space-y-0 pb-2 text-muted-foreground">
                 <h3 className="tracking-tight text-sm font-medium line-clamp-1">Player drop cause (last 6h)</h3>
                 <div className='hidden sm:block'><DoorOpenIcon /></div>
diff --git a/panel/src/pages/Dashboard/ServerStatsCard.tsx b/panel/src/pages/Dashboard/ServerStatsCard.tsx
index eaf206b74..5aeb48bea 100644
--- a/panel/src/pages/Dashboard/ServerStatsCard.tsx
+++ b/panel/src/pages/Dashboard/ServerStatsCard.tsx
@@ -127,7 +127,7 @@ export default function ServerStatsCard() {
     }
 
     return (
-        <div className="col-span-3 sm:col-span-1 2xl:col-span-2 min-w-52 py-2 px-4 flex flex-col md:rounded-xl border shadow-sm bg-card">
+        <div className="col-span-3 sm:col-span-1 3xl:col-span-2 min-w-52 py-2 px-4 flex flex-col md:rounded-xl border shadow-sm bg-card">
             <div className="flex flex-row items-center justify-between space-y-0 pb-2 text-muted-foreground">
                 <h3 className="tracking-tight text-sm font-medium line-clamp-1">
                     Server stats {titleNode}
diff --git a/panel/src/pages/Dashboard/chartingUtils.ts b/panel/src/pages/Dashboard/chartingUtils.ts
index 3573d4b01..c81ace744 100644
--- a/panel/src/pages/Dashboard/chartingUtils.ts
+++ b/panel/src/pages/Dashboard/chartingUtils.ts
@@ -1,5 +1,4 @@
 import type { SvRtLogFilteredType, SvRtPerfCountsThreadType } from "@shared/otherTypes";
-import { cloneDeep } from "lodash-es";
 import * as d3 from 'd3';
 
 
@@ -120,11 +119,11 @@ export type PerfLifeSpanType = {
 type PerfProcessorType = (perfLog: SvRtPerfCountsThreadType) => number[];
 const minPerfTime = 60 * 1000;
 const maxPerfTimeGap = 15 * 60 * 1000; //15 minutes
-const emptyPerfLifeSpan: PerfLifeSpanType = {
+const getEmptyPerfLifeSpan = (): PerfLifeSpanType => ({
     bootDuration: undefined,
     closeReason: undefined,
     log: [],
-};
+});
 
 
 /**
@@ -135,10 +134,10 @@ export const processPerfLog = (perfLog: SvRtLogFilteredType, perfProcessor: Perf
     let dataEnd: Date | undefined;
     let lifespans: PerfLifeSpanType[] = [];
 
-    let currentLifespan: PerfLifeSpanType = cloneDeep(emptyPerfLifeSpan);
+    let currentLifespan: PerfLifeSpanType = getEmptyPerfLifeSpan();
     for (const currEntry of perfLog) {
         if (currentLifespan === undefined) {
-            currentLifespan = cloneDeep(emptyPerfLifeSpan);
+            currentLifespan = getEmptyPerfLifeSpan();
         }
         const hasDataLogStarted = currentLifespan?.log?.length;
 
@@ -146,7 +145,7 @@ export const processPerfLog = (perfLog: SvRtLogFilteredType, perfProcessor: Perf
             if (hasDataLogStarted) {
                 //last lifespan finished without a svClose
                 lifespans.push(currentLifespan);
-                currentLifespan = cloneDeep(emptyPerfLifeSpan);
+                currentLifespan = getEmptyPerfLifeSpan();
             }
             //start a new lifespan
             currentLifespan.bootTime = new Date(currEntry.ts);
@@ -157,7 +156,7 @@ export const processPerfLog = (perfLog: SvRtLogFilteredType, perfProcessor: Perf
                 currentLifespan.closeTime = new Date(currEntry.ts);
                 currentLifespan.closeReason = currEntry.reason;
                 lifespans.push(currentLifespan);
-                currentLifespan = cloneDeep(emptyPerfLifeSpan);
+                currentLifespan = getEmptyPerfLifeSpan();
             }
         } else if (currEntry.type === 'data') {
             const minAcceptableStartTs = currEntry.ts - maxPerfTimeGap;
@@ -170,7 +169,7 @@ export const processPerfLog = (perfLog: SvRtLogFilteredType, perfProcessor: Perf
                     perfStartTs = lastDataEndTs;
                 } else {
                     lifespans.push(currentLifespan);
-                    currentLifespan = cloneDeep(emptyPerfLifeSpan);
+                    currentLifespan = getEmptyPerfLifeSpan();
                 }
             } else if (currentLifespan.bootTime) {
                 const currentLifespanBootTs = currentLifespan.bootTime.getTime();
@@ -178,7 +177,7 @@ export const processPerfLog = (perfLog: SvRtLogFilteredType, perfProcessor: Perf
                 if (currentLifespanBootTs >= minAcceptableStartTs) {
                     perfStartTs = currentLifespanBootTs;
                 } else {
-                    currentLifespan = cloneDeep(emptyPerfLifeSpan);
+                    currentLifespan = getEmptyPerfLifeSpan();
                 }
             }
             const perfStartTime = new Date(perfStartTs);
diff --git a/panel/src/pages/Diagnostics/DiagnosticsPage.tsx b/panel/src/pages/Diagnostics/DiagnosticsPage.tsx
new file mode 100644
index 000000000..497d3fc10
--- /dev/null
+++ b/panel/src/pages/Diagnostics/DiagnosticsPage.tsx
@@ -0,0 +1,133 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowUpRight } from "lucide-react";
+import { ProcessTree } from "@/pages/Diagnostics/process-tree";
+import { numberToLocaleString } from "@/lib/utils";
+import { DiagnosticsInfoTree } from "./info-tree";
+import { DiagnosticsInfoList } from "./info-list";
+import { ReportDialog } from "./report-dialog";
+import type { DiagnosticsDataApiResp } from "@shared/diagnosticsTypes";
+import useSWR from "swr";
+import { useBackendApi } from "@/hooks/fetch";
+import { useState } from "react";
+import TxAnchor from "@/components/TxAnchor";
+import CardContentOverlay from "@/components/CardContentOverlay";
+
+
+export default function DiagnosticsPage() {
+    const [reportDialogOpen, setReportDialogOpen] = useState(false);
+
+    const getDataApi = useBackendApi<DiagnosticsDataApiResp>({
+        method: 'GET',
+        path: '/diagnostics/getDiagnostics',
+    });
+
+    const swr = useSWR('/diagnostics/getDiagnostics', async () => {
+        const data = await getDataApi({});
+        if (!data) throw new Error('empty_response');
+        if ('error' in data) throw new Error(data.error);
+        return data;
+    }, { revalidateOnFocus: false });
+
+
+    if (!swr.data) {
+        return (
+            <div className="w-full h-1/3 relative">
+                <CardContentOverlay
+                    error={swr.error?.message}
+                    loading={swr.isValidating ? 'Loading...' : false}
+                    className="bg-transparent dark:bg-transparent"
+                />
+            </div>
+        )
+    }
+    return (
+        <div className="w-full space-y-4">
+            {/* Diagnostics Report Card */}
+            {/* FIXME:NEXT:UPDATE: reenable this */}
+            {/* <Card className="bg-info-hint border-info">
+                <CardHeader className="bg-transparent pb-2">
+                    <CardTitle>Diagnostics Report</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
+                        <p className="text-sm text-muted-foreground">
+                            To receive support, it is recommended that you send the diagnostics data directly to the
+                            Support Team. <br />
+                            After that, share the report ID with the support team in <TxAnchor
+                                href="https://discord.gg/uAmsGa2"
+                                className="font-semibold tracking-wide text-primary"
+                            >
+                                discord.gg/txAdmin
+                            </TxAnchor>.
+                        </p>
+                        <Button
+                            className="whitespace-nowrap"
+                            onClick={() => setReportDialogOpen(true)}
+                        >
+                            Review Details & Send Data
+                            <ArrowUpRight className="ml-2 h-4 w-4" />
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card> */}
+
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+                <div className="space-y-4">
+                    {/* Runtime Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>txAdmin Runtime</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            {Object.entries(swr.data.runtime).map(([key, value]) => (
+                                <DiagnosticsInfoTree key={key} title={key} tree={value} />
+                            ))}
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div className="space-y-4">
+                    {/* Host Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Host</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <DiagnosticsInfoList list={swr.data.host} />
+                        </CardContent>
+                    </Card>
+
+                    {/* Server Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Server</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <DiagnosticsInfoList list={swr.data.server} />
+                        </CardContent>
+                    </Card>
+
+                    {/* Processes Card */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Processes</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <ProcessTree processes={swr.data.processes} />
+                        </CardContent>
+                    </Card>
+
+                    <div className="italic text-center text-sm text-muted-foreground">
+                        Loaded in {numberToLocaleString(swr.data.loadTime)} ms
+                    </div>
+                </div>
+            </div>
+
+            <ReportDialog
+                open={reportDialogOpen}
+                onOpenChange={setReportDialogOpen}
+            />
+        </div>
+    )
+}
diff --git a/panel/src/pages/Diagnostics/info-list.tsx b/panel/src/pages/Diagnostics/info-list.tsx
new file mode 100644
index 000000000..88b03a0bb
--- /dev/null
+++ b/panel/src/pages/Diagnostics/info-list.tsx
@@ -0,0 +1,28 @@
+import type { InfoList } from "@shared/diagnosticsTypes";
+
+
+type DiagnosticsInfoListProps = {
+    list: InfoList;
+}
+
+export function DiagnosticsInfoList({ list }: DiagnosticsInfoListProps) {
+    const linesArray = Object.entries(list);
+    const maxLabelLength = Math.max(...linesArray.map(([key]) => key.length));
+    return (
+        <dl className="attempt-word-wrap">
+            <dd className="flex flex-col font-mono text-muted-foreground">
+                {linesArray.map(([key, value], i) => <div key={key} className="text-sm">
+                    <div
+                        className="inline-block text-muted-foreground capitalize shrink-0"
+                        style={{ minWidth: `${maxLabelLength + 2}ch` }}
+                    >
+                        {key}:
+                    </div>
+                    <span className="font-mono text-primary dark:text-warning-inline font-semibold dark:font-normal">
+                        {value}
+                    </span>
+                </div>)}
+            </dd>
+        </dl>
+    )
+}
diff --git a/panel/src/pages/Diagnostics/info-tree.tsx b/panel/src/pages/Diagnostics/info-tree.tsx
new file mode 100644
index 000000000..3a2769b6d
--- /dev/null
+++ b/panel/src/pages/Diagnostics/info-tree.tsx
@@ -0,0 +1,70 @@
+import { numberToLocaleString } from "@/lib/utils";
+import type { InfoTree } from "@shared/diagnosticsTypes";
+
+
+type DiagnosticsInfoTreeLineProps = {
+    label: string;
+    content: InfoTree[string] ;
+    isLast: boolean;
+    maxLabelLength: number;
+}
+
+function DiagnosticsInfoTreeLine({ label, content, isLast, maxLabelLength }: DiagnosticsInfoTreeLineProps) {
+    const prefix = isLast ? "└─" : "├─";
+    let textContent: React.ReactNode;
+    if (typeof content === 'object' && content !== null) {
+        textContent = Object.entries(content).map(([key, value], i) => (
+            <code key={key} className="inline-block rounded-sm font-mono px-[0.25rem] border bg-secondary/35">
+                <span className="text-muted-foreground">{key}:</span>
+                <span className="text-primary dark:text-warning-inline font-bold">{value}</span>
+            </code>
+        ));
+    } else {
+        textContent = <code className="font-mono text-primary dark:text-warning-inline font-semibold dark:font-normal">
+            {typeof content === 'number' ? numberToLocaleString(content) : content}
+        </code>;
+    }
+
+    const padSize = maxLabelLength - label.length;
+    return (
+        <div className="attempt-word-wrap leading-none my-0">
+            <span
+                className="inline-block text-sm"
+                style={{ minWidth: `${padSize + 2}ch` }}
+            >
+                {prefix}{'─'.repeat(padSize)}
+            </span>
+            <span className="inline-block text-sm mr-0.5">
+                {label}:
+            </span>
+            <span className="text-xs space-x-1">
+                {textContent}
+            </span>
+        </div>
+    )
+}
+
+
+type DiagnosticsInfoTreeProps = {
+    title: string
+    tree: InfoTree;
+}
+
+export function DiagnosticsInfoTree({ title, tree }: DiagnosticsInfoTreeProps) {
+    const linesArray = Object.entries(tree);
+    const maxLabelLength = Math.max(...linesArray.map(([key]) => key.length));
+    return (
+        <div className="attempt-word-wrap">
+            <div className="font-bold">{title}:</div>
+            <div className="flex flex-col font-mono text-muted-foreground">
+                {linesArray.map(([key, value], i) => <DiagnosticsInfoTreeLine
+                    key={key}
+                    label={key}
+                    maxLabelLength={maxLabelLength}
+                    content={value}
+                    isLast={i === linesArray.length - 1}
+                />)}
+            </div>
+        </div>
+    )
+}
diff --git a/panel/src/pages/Diagnostics/process-tree.tsx b/panel/src/pages/Diagnostics/process-tree.tsx
new file mode 100644
index 000000000..333899d7c
--- /dev/null
+++ b/panel/src/pages/Diagnostics/process-tree.tsx
@@ -0,0 +1,107 @@
+import { cn } from "@/lib/utils";
+import { useMemo } from "react";
+import { CpuIcon, MemoryStickIcon } from "lucide-react";
+import type { ProcessInfo } from "@shared/diagnosticsTypes";
+
+
+type ProcessTreeNode = ProcessInfo & {
+    children: ProcessTreeNode[];
+}
+
+type ProcessTreeItemProps = {
+    process: ProcessTreeNode;
+    level: number;
+}
+
+function ProcessTreeItem({ process, level }: ProcessTreeItemProps) {
+    return (
+        <div className={cn(level > 0 ? "ml-6 -mt-[1px] mb-0" : "mb-2")}>
+            <div className={cn(
+                "border rounded-lg p-3 text-sm",
+                level > 0 ? "bg-muted" : "bg-secondary/50"
+            )}>
+                <div className="flex items-start justify-between">
+                    {/* Left side - Process info */}
+                    <div className="flex-1 min-w-0">
+                        <div className="font-semibold text-foreground truncate">
+                            {process.name}
+                        </div>
+                        <div className="text-xs text-muted-foreground font-mono">
+                            ID:{process.pid}
+                        </div>
+                    </div>
+
+                    {/* Right side - Metrics */}
+                    <div className="flex ml-4">
+                        <div className="flex flex-col gap-1 items-end pr-3">
+                            <div className="flex items-center gap-1">
+                                <MemoryStickIcon className="w-4 h-4 text-muted-foreground" />
+                                <span className="text-muted-foreground text-xs">RAM:</span>
+                            </div>
+                            <span className="font-mono font-medium text-xs">{process.memory.toFixed(1)} MB</span>
+                        </div>
+                        <div className="w-px bg-border mx-3"></div>
+                        <div className="flex flex-col gap-1 items-end pl-3">
+                            <div className="flex items-center gap-1">
+                                <CpuIcon className="w-4 h-4 text-muted-foreground" />
+                                <span className="text-muted-foreground text-xs">CPU:</span>
+                            </div>
+                            <span className="font-mono font-medium text-xs">{process.cpu.toFixed(1)}%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {process.children.length > 0 && process.children.map((child) => (
+                <ProcessTreeItem
+                    key={child.pid}
+                    process={child}
+                    level={level + 1}
+                />
+            ))}
+        </div>
+    )
+}
+
+
+type ProcessTreeProps = {
+    processes: ProcessInfo[];
+}
+
+export function ProcessTree({ processes }: ProcessTreeProps) {
+    //Order processes by pid in a tree structure
+    const processTree = useMemo(() => {
+        const processMap = new Map<number, ProcessTreeNode>();
+        const rootProcesses: ProcessTreeNode[] = [];
+
+        // First pass: create map of all processes with empty children arrays
+        processes.forEach((process) => {
+            processMap.set(process.pid, { ...process, children: [] });
+        });
+
+        // Second pass: organize into hierarchy
+        processes.forEach((process) => {
+            const processNode = processMap.get(process.pid)!;
+            const parentNode = processMap.get(process.parent);
+
+            if (parentNode) {
+                parentNode.children.push(processNode);
+            } else {
+                rootProcesses.push(processNode);
+            }
+        });
+
+        return rootProcesses;
+    }, [processes]);
+
+    return (
+        <div>
+            {processTree.map((process) => (
+                <ProcessTreeItem
+                    key={process.pid}
+                    process={process}
+                    level={0}
+                />
+            ))}
+        </div>
+    );
+}
diff --git a/panel/src/pages/Diagnostics/report-dialog.tsx b/panel/src/pages/Diagnostics/report-dialog.tsx
new file mode 100644
index 000000000..a1b792976
--- /dev/null
+++ b/panel/src/pages/Diagnostics/report-dialog.tsx
@@ -0,0 +1,209 @@
+import { useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+import { ApiTimeout, useBackendApi } from '@/hooks/fetch';
+import InlineCode from '@/components/InlineCode';
+import { cn } from '@/lib/utils';
+import { handleExternalLinkClick } from '@/lib/navigation';
+import TxAnchor from '@/components/TxAnchor';
+
+type SendReportResponse =
+    | { reportId: string }
+    | { error: string };
+
+interface ReportDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+const InfoContent = () => (
+    <div className="space-y-4 text-sm">
+        <p className="text-sm">
+            This <u>optional</u> feature sends a diagnostics report to the Cfx.re team, and may be required to diagnose a wide range of server issues.
+            After sending the data, you will receive a Report ID you can send in the support channels.
+        </p>
+
+        <div className="space-y-4">
+            <div>
+                <h4 className="font-semibold text-warning-inline">
+                    Who can access the data?
+                </h4>
+                <p>
+                    The data will be available for up to 24 hours to the Cfx.re team.
+                </p>
+            </div>
+
+            <div>
+                <h4 className="font-semibold text-warning-inline">Which data will be sent?</h4>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                    <li>All diagnostics page data</li>
+                    <li>Recent txAdmin (system), live console and server log</li>
+                    <li>Environment variables</li>
+                    <li>Server performance (dashboard chart) data</li>
+                    <li>Player database statistics</li>
+                    <li>txAdmin settings (no bot token)</li>
+                    <li>List of admins (no passwords/hashes)</li>
+                    <li>List of files/folders in server data and monitor folders</li>
+                    <li>Config files in server data folder</li>
+                </ul>
+            </div>
+
+            <div>
+                <h4 className="font-semibold text-warning-inline">
+                    Sensitive Information Protection:
+                </h4>
+                <ul className="list-disc list-inside ml-4 space-y-1">
+                    <li><strong>Settings:</strong> the Discord Bot Token will be removed</li>
+                    <li><strong>Admin List:</strong> the password hashes will not be sent</li>
+                    <li>
+                        <strong>Env Vars:</strong> parameters with{' '}
+                        <span className="text-xs space-x-1">
+                            <InlineCode>key</InlineCode>,
+                            <InlineCode>license</InlineCode>,
+                            <InlineCode>pass</InlineCode>,
+                            <InlineCode>private</InlineCode>,
+                            <InlineCode>secret</InlineCode>,
+                            <InlineCode>token</InlineCode>
+                        </span>{' '}
+                        in their name will be masked
+                    </li>
+                    <li>
+                        <strong>CFG Files:</strong> known secret parameters will be masked
+                        (eg. license, mysql string, tebex secret, webhooks, etc.)
+                    </li>
+                    <li><strong>Logs:</strong> any identifiable IPv4 address in logs will be masked</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+);
+
+const LoadingContent = () => (
+    <div className="flex flex-col items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin mb-4" />
+        <p>Sending diagnostics data...</p>
+    </div>
+);
+
+const SuccessContent = ({ reportId }: { reportId: string }) => (
+    <div className="text-center">
+        <div className="mb-4 flex flex-wrap gap-4 items-center justify-center text-2xl">
+            <h3 className="font-semibold">Report ID:</h3>
+            <div className="bg-muted p-2 rounded-lg">
+                <span className="font-mono text-accent tracking-[0.35em] -mr-[0.35em] font-bold">
+                    {reportId}
+                </span>
+            </div>
+        </div>
+        <p className="text-muted-foreground pt-2">
+            Please send this ID to the support team in <TxAnchor
+                href="https://discord.gg/uAmsGa2"
+                className="font-semibold tracking-wide text-primary"
+            >
+                discord.gg/txAdmin
+            </TxAnchor>.
+        </p>
+    </div>
+);
+
+const ErrorContent = ({ error }: { error: string }) => (
+    <div className="text-center">
+        <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4">
+            <h3 className="text-lg font-semibold text-destructive mb-2">Error</h3>
+            <p className="text-destructive">{error}</p>
+        </div>
+    </div>
+);
+
+export const DiscordBadge = ({ className }: { className?: string }) => (
+    <a
+        href="https://discord.gg/uAmsGa2"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn("inline-block ml-1", className)}
+        onClick={handleExternalLinkClick}
+    >
+        <img
+            src="https://discordapp.com/api/guilds/577993482761928734/widget.png?style=shield"
+            alt="Discord"
+            className="h-5 self-end"
+        />
+    </a>
+);
+
+export function ReportDialog({ open, onOpenChange }: ReportDialogProps) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [reportId, setReportId] = useState('');
+    const [error, setError] = useState('');
+
+    //Wipe the state when the dialog is opened
+    useEffect(() => {
+        if (open) {
+            setIsLoading(false);
+            setReportId('');
+            setError('');
+        }
+    }, [open]);
+
+    const sendReportApi = useBackendApi<SendReportResponse>({
+        method: 'POST',
+        path: '/diagnostics/sendReport',
+    });
+
+    const handleSend = async () => {
+        setIsLoading(true);
+        setError('');
+        sendReportApi({
+            //NOTE: in NUI, empty bodies become GET requests even if you specify POST
+            data: { bugfix: true },
+            timeout: ApiTimeout.LONG,
+            success: (data) => {
+                if ('reportId' in data) {
+                    setReportId(data.reportId);
+                } else {
+                    setError(data.error);
+                }
+            },
+            error: (err) => setError(err),
+            finally: () => setIsLoading(false),
+        });
+    };
+
+    const showInitialState = !isLoading && !reportId && !error;
+    const showSuccess = !isLoading && !!reportId;
+    const showError = !isLoading && !!error;
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle>Send Diagnostics Data</DialogTitle>
+                </DialogHeader>
+
+                <div className="py-4">
+                    {isLoading && <LoadingContent />}
+                    {showInitialState && <InfoContent />}
+                    {showSuccess && <SuccessContent reportId={reportId} />}
+                    {showError && <ErrorContent error={error} />}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        Close
+                    </Button>
+                    {showInitialState && (
+                        <Button onClick={handleSend}>
+                            Agree & Send Data
+                        </Button>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/panel/src/pages/LiveConsole/LiveConsoleFooter.tsx b/panel/src/pages/LiveConsole/LiveConsoleFooter.tsx
index 59e55f3e9..2f42d47b9 100644
--- a/panel/src/pages/LiveConsole/LiveConsoleFooter.tsx
+++ b/panel/src/pages/LiveConsole/LiveConsoleFooter.tsx
@@ -21,8 +21,7 @@ function ConsoleFooterButton({ icon: Icon, title, disabled, onClick }: ConsoleFo
         <div
             tabIndex={0}
             className={cn(
-                `group bg-secondary xs:bg-transparent 2xl:hover:bg-secondary w-full rounded-lg px-1.5 py-2 cursor-pointer flex items-center justify-center
-                transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,
+                'group bg-secondary xs:bg-transparent 2xl:hover:bg-secondary w-full rounded-lg px-1.5 py-2 cursor-pointer flex items-center justify-center transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
                 disabled && 'opacity-50 pointer-events-none'
             )}
             onClick={() => !disabled && onClick()}
@@ -95,6 +94,8 @@ export default function LiveConsoleFooter(props: LiveConsoleFooterProps) {
         if (currentInput) {
             appendHistory(currentInput);
             props.consoleWrite(currentInput);
+        } else {
+            props.consoleWrite('\n');
         }
     };
 
diff --git a/panel/src/pages/LiveConsole/LiveConsoleHeader.tsx b/panel/src/pages/LiveConsole/LiveConsoleHeader.tsx
index e71e57af6..26437991a 100644
--- a/panel/src/pages/LiveConsole/LiveConsoleHeader.tsx
+++ b/panel/src/pages/LiveConsole/LiveConsoleHeader.tsx
@@ -1,23 +1,59 @@
-export default function LiveConsoleHeader() {
+import { Settings } from "lucide-react";
+import { Popover, PopoverTrigger } from "@/components/ui/popover";
+import type { LiveConsoleOptionsPopoverProps } from "./OptionsPopover";
+import LiveConsoleOptionsPopover from "./OptionsPopover";
+import { DynamicNewBadge } from "@/components/DynamicNewBadge";
+import { useState } from "react";
+import { useContentRefresh } from "@/hooks/pages";
+
+
+export default function LiveConsoleHeader(popoverProps: Omit<LiveConsoleOptionsPopoverProps, 'setHasPendingRefresh'>) {
+    const [hasPendingRefresh, setHasPendingRefresh] = useState(false);
+    const refreshPage = useContentRefresh();
+
     return (
         <div className="flex flex-col flex-shrink px-1 sm:px-4 py-2 space-y-4 border-b">
-            <div className="flex items-center space-x-2">
-                <svg
-                    className="w-4 h-4 text-green-500"
-                    fill="none"
-                    height="24"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <polyline points="4 17 10 11 4 5" />
-                    <line x1="12" x2="20" y1="19" y2="19" />
-                </svg>
-                <p className="font-mono text-sm">Live Console</p>
+            <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                    <svg
+                        className="w-4 h-4 text-green-500"
+                        fill="none"
+                        height="24"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <polyline points="4 17 10 11 4 5" />
+                        <line x1="12" x2="20" y1="19" y2="19" />
+                    </svg>
+                    <p className="font-mono text-sm">Live Console</p>
+                </div>
+
+                <div className="flex items-center space-x-1">
+                    <Popover onOpenChange={(state) => {
+                        if (!state && hasPendingRefresh) {
+                            refreshPage();
+                            setHasPendingRefresh(false);
+                        }
+                    }}>
+                        {/* FIXME:NEXT:UPDATE remove */}
+                        <DynamicNewBadge featName="liveConsoleOptions" size="md" />
+                        <PopoverTrigger asChild>
+                            <button className="p-2 hover:bg-accent rounded-md">
+                                <Settings className="w-4 h-4" />
+                            </button>
+                        </PopoverTrigger>
+                        <LiveConsoleOptionsPopover
+                            options={popoverProps.options}
+                            setOptions={popoverProps.setOptions}
+                            setHasPendingRefresh={setHasPendingRefresh}
+                        />
+                    </Popover>
+                </div>
             </div>
         </div>
     )
diff --git a/panel/src/pages/LiveConsole/LiveConsolePage.tsx b/panel/src/pages/LiveConsole/LiveConsolePage.tsx
index 791b7de3e..5c994c888 100644
--- a/panel/src/pages/LiveConsole/LiveConsolePage.tsx
+++ b/panel/src/pages/LiveConsole/LiveConsolePage.tsx
@@ -16,96 +16,58 @@ import LiveConsoleSearchBar from "./LiveConsoleSearchBar";
 import LiveConsoleSaveSheet from "./LiveConsoleSaveSheet";
 
 import ScrollDownAddon from "./ScrollDownAddon";
-import terminalOptions from "./xtermOptions";
+import xtermOptions from "./xtermOptions";
 import './xtermOverrides.css';
 import '@xterm/xterm/css/xterm.css';
 import { getSocket } from '@/lib/utils';
 import { openExternalLink } from '@/lib/navigation';
 import { handleHotkeyEvent } from '@/lib/hotkeyEventListener';
 import { txToast } from '@/components/TxToaster';
-import { ANSI, copyTermLine, extractTermLineTimestamp, formatTermTimestamp, getNumFontVariantsLoaded } from './liveConsoleUtils';
+import { copyTermLine, extractTermLineTimestamp, formatTermTimestamp, getEmptyTermTimestamp, getNumFontVariantsLoaded } from './liveConsoleUtils';
 import { getTermLineEventData, getTermLineInitialData, getTermLineRtlData, registerTermLineMarker } from './liveConsoleMarkers';
-
-
-//Options
-export type LiveConsoleOptions = {
-    timestampDisabled: boolean;
-    timestampForceHour12: boolean | undefined;
-    copyTimestamp: boolean;
-    copyTag: boolean;
-}
-
-//Loading local storage configs
-//FIXME: this is hacky, maybe use atomWithStorage
-let timestampDisabled = false;
-let timestampForceHour12: boolean | undefined = undefined;
-try {
-    const localConfig = localStorage.getItem('liveConsoleTimestamp');
-    if (localConfig === '24h') {
-        timestampForceHour12 = false;
-    } else if (localConfig === '12h') {
-        timestampForceHour12 = true;
-    } else if (localConfig === 'off') {
-        timestampDisabled = true;
-    }
-} catch (error) { }
-let copyTimestamp = false;
-let copyTag = true;
-try {
-    const localConfig = localStorage.getItem('liveConsoleCopyOpts');
-    if (typeof localConfig === 'string') {
-        const parts = localConfig.split(',');
-        copyTimestamp = parts.includes('ts');
-        copyTag = parts.includes('tag');
-    }
-} catch (error) { }
+import { useIsDarkMode } from '@/hooks/theme';
+import { darkThemeColors, lightThemeColors, ANSI } from './liveConsoleColors';
+import { useTerminalOptions } from './liveConsoleHooks';
+import { DensityModes } from './xtermOptions';
 
 
 //Consts
 const keyDebounceTime = 150; //ms
 
-//FIXME: move to inside the component
-const defaultTermPrefix = formatTermTimestamp(
-    Date.now(),
-    {
-        timestampDisabled,
-        timestampForceHour12,
-        copyTimestamp,
-        copyTag,
-    }
-).replace(/\w/g, '-');
-
 //Main component
 export default function LiveConsolePage() {
     const [isSaveSheetOpen, setIsSaveSheetOpen] = useState(false);
     const [isConnected, setIsConnected] = useState(false);
     const [showSearchBar, setShowSearchBar] = useState(false);
+
+    // Terminal settings state
+    const { options: savedOptions, updateOptions: updateTerminalOptions } = useTerminalOptions();
+    const optionsRef = useRef({ ...savedOptions });
+
     const termInputRef = useRef<HTMLInputElement>(null);
     const termPrefixRef = useRef({
         ts: 0, //so we can clear the console
         lastEol: true,
-        //FIXME: defaultTermPrefix depends on options, deal with it when options change
-        prefix: defaultTermPrefix,
+        prefix: getEmptyTermTimestamp(optionsRef.current.timestamp),
     });
     const refreshPage = useContentRefresh();
+    const isDarkTheme = useIsDarkMode();
 
-    //FIXME: maybe use atomWithStorage
-    const consoleOptions: LiveConsoleOptions = useMemo(() => {
-        return {
-            timestampDisabled,
-            timestampForceHour12,
-            copyTimestamp,
-            copyTag,
-        };
-    }, []);
-
+    //This is required to update the timestamp, because writeToTerminal is "cached" by the socket useEffect
+    useEffect(() => {
+        optionsRef.current = { ...savedOptions };
+    }, [savedOptions]);
 
     /**
      * xterm stuff
      */
     const jumpBottomBtnRef = useRef<HTMLButtonElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
-    const term = useMemo(() => new Terminal(terminalOptions), []);
+    const term = useMemo(() => new Terminal({
+        ...xtermOptions,
+        ...savedOptions,
+        theme: isDarkTheme ? darkThemeColors : lightThemeColors,
+    }), []);
     const fitAddon = useMemo(() => new FitAddon(), []);
     const searchAddon = useMemo(() => new SearchAddon(), []);
     const termLinkHandler = (event: MouseEvent, uri: string) => {
@@ -135,9 +97,24 @@ export default function LiveConsolePage() {
     }
     useEventListener('resize', debounce(100, refitTerminal));
 
+    useEffect(() => {
+        if (term.element) {
+            const densitySettings = DensityModes[savedOptions.density];
+            Object.assign(term.options, {
+                theme: isDarkTheme ? darkThemeColors : lightThemeColors,
+                scrollback: savedOptions.scrollback,
+                fontSize: densitySettings.fontSize,
+                lineHeight: densitySettings.lineHeight,
+                letterSpacing: densitySettings.letterSpacing,
+            });
+            refitTerminal();
+            term.refresh(0, term.rows - 1);
+        }
+    }, [term, isDarkTheme, savedOptions]);
+
     useEffect(() => {
         if (containerRef.current && jumpBottomBtnRef.current && !term.element) {
-            console.log('live console xterm init');
+            console.log('Live Console xterm.js init');
             containerRef.current.innerHTML = ''; //due to HMR, the terminal element might still be there
             term.loadAddon(fitAddon);
             term.loadAddon(searchAddon);
@@ -177,7 +154,8 @@ export default function LiveConsolePage() {
                     copyTermLine(
                         selection,
                         term.element as any,
-                        consoleOptions,
+                        optionsRef.current.copyTimestamp,
+                        optionsRef.current.copyChannel,
                         termInputRef.current
                     ).then((res) => {
                         //undefined if no error
@@ -257,10 +235,10 @@ export default function LiveConsolePage() {
                     isNewTs = true;
                     line = content;
                     termPrefixRef.current.ts = ts;
-                    termPrefixRef.current.prefix = formatTermTimestamp(ts, consoleOptions);
+                    termPrefixRef.current.prefix = formatTermTimestamp(ts, optionsRef.current.timestamp);
                 }
             } catch (error) {
-                termPrefixRef.current.prefix = defaultTermPrefix;
+                termPrefixRef.current.prefix = getEmptyTermTimestamp(optionsRef.current.timestamp);
                 console.warn('Failed to parse timestamp from:', line, (error as any).message);
             }
 
@@ -281,21 +259,17 @@ export default function LiveConsolePage() {
             }
 
             //Check if it's last line, and if the EOL was stripped
-            const prefixColor = isNewTs ? ANSI.WHITE : ANSI.GRAY;
+            const prefixColor = isNewTs ? ANSI.TS_STRONG : ANSI.TS_WEAK;
             const prefix = termPrefixRef.current.lastEol
                 ? prefixColor + termPrefixRef.current.prefix
                 : '';
-            if (i < lines.length - 1) {
-                term.writeln(prefix + line, writeCallback);
+            const prefixedLine = prefix + line;
+            if (i < lines.length - 1 || wasEolStripped) {
+                term.writeln(prefixedLine, writeCallback);
                 termPrefixRef.current.lastEol = true;
             } else {
-                if (wasEolStripped) {
-                    term.writeln(prefix + line, writeCallback);
-                    termPrefixRef.current.lastEol = true;
-                } else {
-                    term.write(prefix + line, writeCallback);
-                    termPrefixRef.current.lastEol = false;
-                }
+                term.write(prefixedLine, writeCallback);
+                termPrefixRef.current.lastEol = false;
             }
         }
     }
@@ -380,6 +354,8 @@ export default function LiveConsolePage() {
         if (!isConnected || !pageSocket.current) return;
         if (cmd === 'cls' || cmd === 'clear') {
             clearConsole();
+        } if (cmd === '\n') {
+            term.write(`\n`);
         } else {
             pageSocket.current.emit('consoleCommand', cmd);
         }
@@ -388,7 +364,7 @@ export default function LiveConsolePage() {
         term.clear();
         searchAddon.clearDecorations();
         setShowSearchBar(false);
-        term.write(`${ANSI.YELLOW}[console cleared]${ANSI.RESET}\n`);
+        term.write(`${ANSI.ORANGE}[console cleared]${ANSI.RESET}\n`);
     }
     const toggleSearchBar = () => {
         setShowSearchBar(!showSearchBar);
@@ -406,8 +382,11 @@ export default function LiveConsolePage() {
 
 
     return (
-        <div className="dark text-primary flex flex-col h-contentvh w-full bg-card border md:rounded-xl overflow-clip">
-            <LiveConsoleHeader />
+        <div className="text-primary flex flex-col h-contentvh w-full bg-card border md:rounded-xl overflow-clip">
+            <LiveConsoleHeader
+                options={savedOptions}
+                setOptions={updateTerminalOptions}
+            />
 
             <div className="flex flex-col relative grow overflow-hidden">
                 {/* Connecting overlay */}
diff --git a/panel/src/pages/LiveConsole/OptionsPopover.tsx b/panel/src/pages/LiveConsole/OptionsPopover.tsx
new file mode 100644
index 000000000..c29c0bd92
--- /dev/null
+++ b/panel/src/pages/LiveConsole/OptionsPopover.tsx
@@ -0,0 +1,127 @@
+import { PopoverContent } from "@/components/ui/popover";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ScrollbackSizes } from "./xtermOptions";
+import type { TerminalOptions, ScrollbackSize, DensityMode, TimestampMode } from "./xtermOptions";
+import { Switch } from "@/components/ui/switch";
+import { Separator } from "@/components/ui/separator";
+
+export type LiveConsoleOptionsPopoverProps = {
+    options: TerminalOptions;
+    setOptions: (options: Partial<TerminalOptions>) => void;
+    setHasPendingRefresh: (hasPendingRefresh: boolean) => void;
+}
+
+export default function LiveConsoleOptionsPopover({
+    options,
+    setOptions,
+    setHasPendingRefresh,
+}: LiveConsoleOptionsPopoverProps) {
+    return (
+        <PopoverContent className="w-96">
+            <div className="grid gap-6">
+                {/* Header */}
+                <div className="space-y-1.5">
+                    <h4 className="font-medium leading-none">Live Console Settings</h4>
+                    <p className="text-sm text-muted-foreground">
+                        Customize the appearance and behavior of your live console. These settings will be saved.
+                    </p>
+                </div>
+
+                {/* Display Settings */}
+                <div className="space-y-4">
+                    <h5 className="text-sm font-medium leading-none">Display Options</h5>
+                    <div className="grid gap-4">
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="density" className="col-span-1">Font Size</Label>
+                            <div className="col-span-3">
+                                <Select
+                                    value={options.density}
+                                    onValueChange={(value) => setOptions({ density: value as DensityMode })}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select density" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="SPACIOUS">Large</SelectItem>
+                                        <SelectItem value="COMFORTABLE">Medium</SelectItem>
+                                        <SelectItem value="COMPACT">Small</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+
+                        <div className="grid gap-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                                <Label htmlFor="timestamp" className="col-span-1">Timestamp</Label>
+                                <div className="col-span-3">
+                                    <Select
+                                        value={options.timestamp}
+                                        onValueChange={(value) => {
+                                            setHasPendingRefresh(true);
+                                            setOptions({ timestamp: value as TimestampMode });
+                                        }}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select timestamp mode" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="DEFAULT">System Default</SelectItem>
+                                            <SelectItem value="FORCE12H">Force 12h Mode</SelectItem>
+                                            <SelectItem value="FORCE24H">Force 24h Mode</SelectItem>
+                                            <SelectItem value="DISABLED">Disabled</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="scrollback" className="col-span-1">Scrollback</Label>
+                            <div className="col-span-3">
+                                <Select
+                                    value={options.scrollback.toString()}
+                                    onValueChange={(value) => setOptions({ scrollback: Number(value) as ScrollbackSize })}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select size" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value={ScrollbackSizes.LARGE.toString()}>10k lines</SelectItem>
+                                        <SelectItem value={ScrollbackSizes.MEDIUM.toString()}>5k lines (default)</SelectItem>
+                                        <SelectItem value={ScrollbackSizes.SMALL.toString()}>2.5k lines</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <Separator className="my-1" />
+
+                {/* Copy Settings */}
+                <div className="space-y-4">
+                    <h5 className="text-sm font-medium leading-none">Copy Options</h5>
+                    <div className="grid gap-4">
+                        <div className="flex items-center justify-between">
+                            <Label htmlFor="copyTimestamp">Include Timestamp</Label>
+                            <Switch
+                                id="copyTimestamp"
+                                checked={options.copyTimestamp}
+                                onCheckedChange={(checked) => setOptions({ copyTimestamp: checked })}
+                            />
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <Label htmlFor="copyChannel">Include Channel</Label>
+                            <Switch
+                                id="copyChannel"
+                                checked={options.copyChannel}
+                                onCheckedChange={(checked) => setOptions({ copyChannel: checked })}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </PopoverContent>
+    )
+}
diff --git a/panel/src/pages/LiveConsole/liveConsoleColors.ts b/panel/src/pages/LiveConsole/liveConsoleColors.ts
new file mode 100644
index 000000000..85c7ac9be
--- /dev/null
+++ b/panel/src/pages/LiveConsole/liveConsoleColors.ts
@@ -0,0 +1,77 @@
+import type { ITheme } from "@xterm/xterm";
+
+
+//MARK: ANSI Codes
+export const ANSI = {
+    ORANGE: '\x1B[1;38;5;202m', //console cleared message
+    TS_STRONG: '\x1B[1;37m', //bold white
+    TS_WEAK: '\x1B[2;37m', //faint white
+    RESET: '\x1B[0m',
+} as const;
+
+
+//MARK: Dark Theme
+//From legacy systemLog.ejs, based on the ANSI-UP colors
+const ansi16ColorsDark = {
+    black: '#000000',
+    brightBlack: '#555555',
+    red: '#D62341',
+    brightRed: '#FF5370',
+    green: '#9ECE58',
+    brightGreen: '#C3E88D',
+    yellow: '#FAED70',
+    brightYellow: '#FFCB6B',
+    blue: '#396FE2',
+    brightBlue: '#82AAFF',
+    magenta: '#BB80B3',
+    brightMagenta: '#C792EA',
+    cyan: '#2DDAFD',
+    brightCyan: '#89DDFF',
+    white: '#D0D0D0',
+    brightWhite: '#FFFFFF',
+};
+
+const baseColorsDark = {
+    background: '#222326', //card bg
+    foreground: '#F8F8F8', //primary
+}
+
+export const darkThemeColors: ITheme = {
+    ...baseColorsDark,
+    ...ansi16ColorsDark,
+};
+
+
+//MARK: Light Theme
+//NOTE: Colors generated from scripts/dev/makeConsoleLightTheme.ts
+const ansi16ColorsLight = {
+    black: "#FFFFFF",
+    brightBlack: "#AAAAAA",
+    red: "#AB0420",
+    brightRed: "#CC0829",
+    green: "#65A509",
+    brightGreen: "#74BA0E",
+    yellow: "#C8B60B",
+    brightYellow: "#CC880B",
+    blue: "#063EB5",
+    brightBlue: "#0D4ACC",
+    magenta: "#960D83",
+    brightMagenta: "#770FBB",
+    cyan: "#05A9CA",
+    brightCyan: "#0E95CC",
+    white: "#2F2F2F",
+    brightWhite: "#0D0D0D"
+};
+
+const ansi256LightHex = ["#FFFFFF", "#00003E", "#000058", "#000072", "#00008C", "#0000A6", "#003E00", "#003E3E", "#003E58", "#003E72", "#003E8C", "#003EA6", "#005800", "#00583E", "#005858", "#005872", "#00588C", "#0058A6", "#007200", "#00723E", "#007258", "#007272", "#00728C", "#0072A6", "#008C00", "#008C3E", "#008C58", "#008C72", "#008C8C", "#008CA6", "#00A600", "#00A63E", "#00A658", "#00A672", "#00A68C", "#00A6A6", "#3E0000", "#3E003E", "#3E0058", "#3E0072", "#3E008C", "#3E00A6", "#3E3E00", "#A0A0A0", "#131358", "#131372", "#13138C", "#1313A6", "#3E5800", "#135813", "#135858", "#134272", "#133B8C", "#1338A6", "#3E7200", "#137213", "#137242", "#137272", "#13638C", "#135CA6", "#3E8C00", "#138C13", "#138C3B", "#138C63", "#138C8C", "#1381A6", "#3EA600", "#13A613", "#13A638", "#13A65C", "#13A681", "#13A6A6", "#580000", "#58003E", "#580058", "#580072", "#58008C", "#5800A6", "#583E00", "#581313", "#581358", "#421372", "#3B138C", "#3813A6", "#585800", "#585813", "#787878", "#1B1B72", "#1B1B8C", "#1B1BA6", "#587200", "#427213", "#1B721B", "#1B7272", "#1B538C", "#1B49A6", "#588C00", "#3B8C13", "#1B8C1B", "#1B8C53", "#1B8C8C", "#1B77A6", "#58A600", "#38A613", "#1BA61B", "#1BA649", "#1BA677", "#1BA6A6", "#720000", "#72003E", "#720058", "#720072", "#72008C", "#7200A6", "#723E00", "#721313", "#721342", "#721372", "#64138C", "#5C13A6", "#725800", "#724213", "#721B1B", "#721B72", "#531B8C", "#491BA6", "#727200", "#727213", "#72721B", "#505050", "#23238C", "#2323A6", "#728C00", "#638C13", "#538C1B", "#238C23", "#238C8C", "#2364A6", "#72A601", "#5CA613", "#49A61B", "#23A623", "#23A664", "#23A6A6", "#8C0000", "#8C003E", "#8C0058", "#8C0072", "#8C008C", "#8C00A6", "#8C3E00", "#8C1313", "#8C133B", "#8C1364", "#8C138C", "#8113A6", "#8C5800", "#8C3B13", "#8C1B1B", "#8C1B53", "#8C1B8c", "#781BA6", "#8C7200", "#8C6413", "#8C531B", "#8C2323", "#8C238C", "#6423A6", "#8C8C00", "#8C8C13", "#8C8C1B", "#8C8C23", "#282828", "#2B2BA6", "#8CA600", "#81A613", "#77A61B", "#64A623", "#2BA62B", "#2BA6A6", "#A60000", "#A6003E", "#A60058", "#A60072", "#A6008C", "#A600A6", "#A63E00", "#A61313", "#A61338", "#A6135C", "#A61381", "#A613A6", "#A65800", "#A63813", "#A61B1B", "#A61B49", "#A61B78", "#A61BA6", "#A67200", "#A65C13", "#A6491B", "#A62323", "#A62364", "#A623A6", "#A68C00", "#A68113", "#A6781B", "#A66423", "#A62B2B", "#A62BA6", "#A6A600", "#A6A613", "#A6A61B", "#A6A623", "#A6A62B", "#0D0D0D", "#F7F7F7", "#EDEDED", "#E3E3E3", "#D9D9D9", "#CFCFCF", "#C5C5C5", "#BBBBBB", "#B1B1B1", "#A7A7A7", "#9D9D9D", "#939393", "#898989", "#7F7F7F", "#757575", "#6B6B6B", "#616161", "#575757", "#4D4D4D", "#434343", "#393939", "#2F2F2F", "#252525", "#1B1B1B", "#111111"];
+
+const baseColorsLight = {
+    background: '#F0F1F4', //card bg
+    foreground: '#16171B', //primary
+}
+
+export const lightThemeColors: ITheme = {
+    ...baseColorsLight,
+    ...ansi16ColorsLight,
+    extendedAnsi: ansi256LightHex,
+};
diff --git a/panel/src/pages/LiveConsole/liveConsoleHooks.ts b/panel/src/pages/LiveConsole/liveConsoleHooks.ts
index f998541d6..e64584bd2 100644
--- a/panel/src/pages/LiveConsole/liveConsoleHooks.ts
+++ b/panel/src/pages/LiveConsole/liveConsoleHooks.ts
@@ -1,18 +1,103 @@
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
+import { terminalDefaultOptions, type TerminalOptions, ScrollbackSizes, DensityModes, TimestampModes } from "./xtermOptions";
+import { createValidatedStorage, LocalStorageKey, validateStringArray } from "@/lib/localStorage";
+
+
+/**
+ * Validation
+ */
+const validateTerminalOptions = (options: unknown): TerminalOptions => {
+    const defaultOpts = terminalDefaultOptions;
+
+    // If not an object or null, return defaults
+    if (!options || typeof options !== 'object') {
+        return defaultOpts;
+    }
+
+    const typedOptions = options as Partial<TerminalOptions>;
+    const validatedOptions: TerminalOptions = {
+        density: defaultOpts.density,
+        scrollback: defaultOpts.scrollback,
+        timestamp: defaultOpts.timestamp,
+        copyTimestamp: defaultOpts.copyTimestamp,
+        copyChannel: defaultOpts.copyChannel,
+    };
+
+    // Validate density
+    if (
+        typeof typedOptions.density === 'string' &&
+        Object.keys(DensityModes).includes(typedOptions.density)
+    ) {
+        validatedOptions.density = typedOptions.density;
+    }
+
+    // Validate scrollback
+    if (
+        typeof typedOptions.scrollback === 'number' &&
+        Object.values(ScrollbackSizes).includes(typedOptions.scrollback)
+    ) {
+        validatedOptions.scrollback = typedOptions.scrollback;
+    }
+
+    // Validate timestamp
+    if (
+        typeof typedOptions.timestamp === 'string' &&
+        Object.keys(TimestampModes).includes(typedOptions.timestamp)
+    ) {
+        validatedOptions.timestamp = typedOptions.timestamp;
+    }
+
+    // Validate copyTimestamp & copyChannel
+    if (typeof typedOptions.copyTimestamp === 'boolean') {
+        validatedOptions.copyTimestamp = typedOptions.copyTimestamp;
+    }
+    if (typeof typedOptions.copyChannel === 'boolean') {
+        validatedOptions.copyChannel = typedOptions.copyChannel;
+    }
+
+    return validatedOptions;
+};
+
 
 
 /**
  * Atoms
  */
-const liveConsoleHistoryAtom = atomWithStorage<string[]>('liveConsoleCommandHistory', []);
-const liveConsoleBookmarksAtom = atomWithStorage<string[]>('liveConsoleCommandBookmarks', []);
+const terminalOptionsAtom = atomWithStorage<TerminalOptions>(
+    LocalStorageKey.LiveConsoleOptions,
+    terminalDefaultOptions,
+    createValidatedStorage(validateTerminalOptions, terminalDefaultOptions)
+);
+
+const liveConsoleHistoryAtom = atomWithStorage<string[]>(
+    LocalStorageKey.LiveConsoleHistory,
+    [],
+    createValidatedStorage(validateStringArray, [])
+);
+
+const liveConsoleBookmarksAtom = atomWithStorage<string[]>(
+    LocalStorageKey.LiveConsoleBookmarks,
+    [],
+    createValidatedStorage(validateStringArray, [])
+);
+
 const historyMaxLength = 50;
 
 
 /**
  * Hooks
  */
+export const useTerminalOptions = () => {
+    const [options, setOptions] = useAtom(terminalOptionsAtom);
+    return {
+        options,
+        updateOptions: (newOptions: Partial<TerminalOptions>) => {
+            setOptions(prev => ({ ...prev, ...newOptions }));
+        }
+    };
+};
+
 export const useLiveConsoleHistory = () => {
     const [history, setHistory] = useAtom(liveConsoleHistoryAtom);
     return {
diff --git a/panel/src/pages/LiveConsole/liveConsoleUtils.test.ts b/panel/src/pages/LiveConsole/liveConsoleUtils.test.ts
index 04f4f2411..869b6f95c 100644
--- a/panel/src/pages/LiveConsole/liveConsoleUtils.test.ts
+++ b/panel/src/pages/LiveConsole/liveConsoleUtils.test.ts
@@ -1,14 +1,15 @@
-import { expect, it, suite } from "vitest";
+import { afterAll, beforeAll, expect, it, suite, vi } from "vitest";
 import { filterTermLine, formatTermTimestamp, sanitizeTermLine } from "./liveConsoleUtils";
+import type { TimestampMode } from "./xtermOptions";
 
 suite('filterTermLine', () => {
-    const fnc: typeof filterTermLine = (input, opts) => filterTermLine(sanitizeTermLine(input), opts);
-    const baseOpts = {
-        copyTimestamp: true,
-        copyTag: true,
-        timestampDisabled: false,
-        timestampForceHour12: false,
-    };
+    // Mocking the global window object for the test environment
+    beforeAll(() => vi.stubGlobal('window', { txBrowserHour12: false }));
+    afterAll(() => vi.unstubAllGlobals());
+
+    // Wrapper that sanitizes input before filtering (simulating real usage)
+    const fnc = (input: string, copyTimestamp: boolean, copyTag: boolean) =>
+        filterTermLine(sanitizeTermLine(input), copyTimestamp, copyTag);
 
     const exampleLines = {
         empty: '',
@@ -22,91 +23,87 @@ suite('filterTermLine', () => {
 
     suite('timestamp formats', () => {
         it('should handle 24-hour format when timestampForceHour12 is false', () => {
-            const opts = { ...baseOpts, timestampForceHour12: false };
+            const tsMode: TimestampMode = 'FORCE24H';
             const ts = 14 * 3600; // 14:00:00
-            const input = formatTermTimestamp(ts, opts) + exampleLines.normal;
-            expect(fnc(input, opts)).toEqual(sanitizeTermLine(input));
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.normal;
+            expect(fnc(input, true, true)).toEqual(sanitizeTermLine(input));
         });
 
         it('should handle 12-hour format when timestampForceHour12 is true', () => {
-            const opts = { ...baseOpts, timestampForceHour12: true };
+            const tsMode: TimestampMode = 'FORCE12H';
             const ts = 14 * 3600; // 2:00:00 PM
-            const input = formatTermTimestamp(ts, opts) + exampleLines.normal;
-            expect(fnc(input, opts)).toEqual(sanitizeTermLine(input));
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.normal;
+            expect(fnc(input, true, true)).toEqual(sanitizeTermLine(input));
         });
     });
 
     suite('copyTimestamp and copyTag options', () => {
         it('should return full line when copyTimestamp and copyTag are true', () => {
-            const opts = { ...baseOpts, copyTimestamp: true, copyTag: true };
-            const ts = 10 * 3600; // 10:00:00 AM
-            const input = formatTermTimestamp(ts, opts) + exampleLines.input;
-            expect(fnc(input, opts)).toEqual(sanitizeTermLine(input)); // Corrected expectation
+            const tsMode: TimestampMode = 'FORCE24H';
+            const ts = 10 * 3600; // 10:00:00
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.input;
+            expect(fnc(input, true, true)).toEqual(sanitizeTermLine(input));
         });
 
         it('should remove timestamp when copyTimestamp is false', () => {
-            const opts = { ...baseOpts, copyTimestamp: false, copyTag: true };
-            const ts = 10 * 3600; // 10:00:00 AM
-            const input = formatTermTimestamp(ts, baseOpts) + exampleLines.input;
+            const tsMode: TimestampMode = 'FORCE24H';
+            const ts = 10 * 3600; // 10:00:00
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.input;
             const expected = exampleLines.input.trimEnd();
-            expect(fnc(input, opts)).toEqual(expected); // Corrected expectation
+            expect(fnc(input, false, true)).toEqual(expected);
         });
 
         it('should remove tag when copyTag is false', () => {
-            const opts = { ...baseOpts, copyTimestamp: true, copyTag: false };
+            const tsMode: TimestampMode = 'FORCE24H';
             const ts = 0;
-            const input = formatTermTimestamp(ts, opts) + exampleLines.input;
-            const timestamp = formatTermTimestamp(ts, opts);
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.input;
+            const timestamp = sanitizeTermLine(formatTermTimestamp(ts, tsMode));
             const expected = timestamp + 'dd';
-            expect(fnc(input, opts)).toEqual(sanitizeTermLine(expected));
+            expect(fnc(input, true, false)).toEqual(expected);
         });
 
         it('should remove both timestamp and tag when both copyTimestamp and copyTag are false', () => {
-            const opts = { ...baseOpts, copyTimestamp: false, copyTag: false };
+            const tsMode: TimestampMode = 'FORCE24H';
             const ts = 0;
             const content = 'whatever';
-            const input = formatTermTimestamp(ts, baseOpts) + content;
-            expect(fnc(input, opts)).toEqual(content);
+            const input = formatTermTimestamp(ts, tsMode) + content;
+            expect(fnc(input, false, false)).toEqual(content);
         });
     });
 
     suite('handling empty and various lines', () => {
         it('should handle empty line', () => {
-            const opts = { ...baseOpts };
-            const input = '';
-            expect(fnc(input, opts)).toEqual('');
+            expect(fnc('', true, true)).toEqual('');
         });
 
         it('should handle line without timestamp', () => {
-            const opts = { ...baseOpts };
             const input = exampleLines.normal;
-            expect(fnc(input, opts)).toEqual(exampleLines.normal);
+            expect(fnc(input, true, true)).toEqual(exampleLines.normal);
         });
     });
 
     suite('AM/PM formatting', () => {
         it('should correctly filter AM time when copyTimestamp is true', () => {
-            const opts = { ...baseOpts, timestampForceHour12: true, copyTimestamp: true, copyTag: true };
+            const tsMode: TimestampMode = 'FORCE12H';
             const ts = 5 * 3600; // 5:00:00 AM
-            const input = formatTermTimestamp(ts, opts) + exampleLines.normal;
-            expect(fnc(input, opts)).toEqual(sanitizeTermLine(input)); // Ensures full line is returned
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.normal;
+            expect(fnc(input, true, true)).toEqual(sanitizeTermLine(input));
         });
 
         it('should correctly filter PM time when copyTimestamp is false', () => {
-            const opts = { ...baseOpts, timestampForceHour12: true, copyTimestamp: false, copyTag: true };
+            const tsMode: TimestampMode = 'FORCE12H';
             const ts = 17 * 3600; // 5:00:00 PM
-            const input = formatTermTimestamp(ts, opts) + exampleLines.normal;
+            const input = formatTermTimestamp(ts, tsMode) + exampleLines.normal;
             const expected = exampleLines.normal;
-            expect(fnc(input, opts)).toEqual(expected); // Ensures timestamp is removed
+            expect(fnc(input, false, true)).toEqual(expected);
         });
     });
 
     suite('comprehensive example tests', () => {
-        it('should handle all example lines with base options', () => {
-            const opts = { ...baseOpts };
-            for (const [key, input] of Object.entries(exampleLines)) {
+        it('should handle all example lines with base options (copyTimestamp: true, copyTag: true)', () => {
+            for (const [_key, input] of Object.entries(exampleLines)) {
                 const sanitized = sanitizeTermLine(input);
-                expect(fnc(input, opts)).toEqual(sanitized);
+                expect(fnc(input, true, true)).toEqual(sanitized);
             }
         });
     });
diff --git a/panel/src/pages/LiveConsole/liveConsoleUtils.ts b/panel/src/pages/LiveConsole/liveConsoleUtils.ts
index b2ed02f26..b9c7309b5 100644
--- a/panel/src/pages/LiveConsole/liveConsoleUtils.ts
+++ b/panel/src/pages/LiveConsole/liveConsoleUtils.ts
@@ -1,14 +1,6 @@
 import { copyToClipboard } from "@/lib/utils";
-import { LiveConsoleOptions } from "./LiveConsolePage";
-
-
-//ANSII escape codes
-export const ANSI = {
-    WHITE: '\x1B[0;37m',
-    GRAY: '\x1B[1;90m',
-    YELLOW: '\x1B[0;33m',
-    RESET: '\x1B[0m',
-} as const;
+import { TimestampMode } from "./xtermOptions";
+import { ANSI } from "./liveConsoleColors";
 
 
 //Yoinked from core/modules/Logger/FXServerLogger/index.ts
@@ -46,8 +38,8 @@ export const extractTermLineTimestamp = (line: string) => {
 /**
  * Formats a timestamp into a console prefix
  */
-export const formatTermTimestamp = (ts: number, opts: LiveConsoleOptions): string => {
-    if (opts.timestampDisabled) return '';
+export const formatTermTimestamp = (ts: number, timestampMode: TimestampMode): string => {
+    if (timestampMode === 'DISABLED') return ANSI.RESET;
     const time = new Date(ts * 1000);
     const str = time.toLocaleTimeString(
         'en-US', //as en-gb uses 4 digits for the am/pm indicator
@@ -55,7 +47,9 @@ export const formatTermTimestamp = (ts: number, opts: LiveConsoleOptions): strin
             hour: '2-digit',
             minute: '2-digit',
             second: '2-digit',
-            hour12: opts.timestampForceHour12 ?? window.txBrowserHour12,
+            hour12: timestampMode === 'FORCE12H' ? true :
+                timestampMode === 'FORCE24H' ? false :
+                    window.txBrowserHour12,
         }
     );
 
@@ -64,18 +58,26 @@ export const formatTermTimestamp = (ts: number, opts: LiveConsoleOptions): strin
 }
 
 
+export const getEmptyTermTimestamp = (timestampMode: TimestampMode) => {
+    return formatTermTimestamp(Date.now(), timestampMode).replace(/\w/g, '-');
+}
+
 /**
  * Filters a string to be copied to the clipboard
  */
-export const filterTermLine = (selection: string, opts: LiveConsoleOptions) => {
-    if (opts.copyTimestamp && opts.copyTag) return selection;
+export const filterTermLine = (
+    selection: string,
+    copyTimestamp: boolean,
+    copyTag: boolean
+) => {
+    if (copyTimestamp && copyTag) return selection;
     const lineRegex = /^(?<ts>\d{2}:\d{2}:\d{2}(?: [AP]M)? )?(?<tag>\[.{20}] )?(?<content>.*)?/;
     const match = selection.match(lineRegex);
     if (!match) return selection;
     const { ts, tag, content } = match.groups ?? {};
     let prefix = '';
-    if (opts.copyTimestamp) prefix += ts ?? '';
-    if (opts.copyTag) prefix += tag ?? '';
+    if (copyTimestamp) prefix += ts ?? '';
+    if (copyTag) prefix += tag ?? '';
     return prefix + (content ?? '').trimEnd();
 }
 
@@ -86,12 +88,13 @@ export const filterTermLine = (selection: string, opts: LiveConsoleOptions) => {
 export const copyTermLine = async (
     selection: string,
     divRef: HTMLDivElement,
-    opts: LiveConsoleOptions,
+    copyTimestamp: boolean,
+    copyTag: boolean,
     returnFocusTo: HTMLElement | null = null
 ) => {
     const strToCopy = selection
         .split(/\r?\n/)
-        .map(line => filterTermLine(line, opts))
+        .map(line => filterTermLine(line, copyTimestamp, copyTag))
         .join('\r\n') //assuming the user is on windows
         .replace(/(\r?\n)+$/, '\r\n'); //single one at the end, if any
     return copyToClipboard(strToCopy, divRef, returnFocusTo);
diff --git a/panel/src/pages/LiveConsole/xtermOptions.ts b/panel/src/pages/LiveConsole/xtermOptions.ts
index 01bc2536b..232bce38b 100644
--- a/panel/src/pages/LiveConsole/xtermOptions.ts
+++ b/panel/src/pages/LiveConsole/xtermOptions.ts
@@ -1,56 +1,72 @@
-import type { ITerminalInitOnlyOptions, ITerminalOptions, ITheme } from "@xterm/xterm";
-
-//From legacy systemLog.ejs, based on the ANSI-UP colors
-//TODO: at component instantiation, grab those as variables from the CSS
-// putting css variables here will not work (i think)
-const baseTheme: ITheme = {
-    background: '#222326', //card bg
-    foreground: '#F8F8F8',
-    black: '#000000',
-    brightBlack: '#555555',
-    red: '#D62341',
-    brightRed: '#FF5370',
-    green: '#9ECE58',
-    brightGreen: '#C3E88D',
-    yellow: '#FAED70',
-    brightYellow: '#FFCB6B',
-    blue: '#396FE2',
-    brightBlue: '#82AAFF',
-    magenta: '#BB80B3',
-    brightMagenta: '#C792EA',
-    cyan: '#2DDAFD',
-    brightCyan: '#89DDFF',
-    white: '#D0D0D0',
-    brightWhite: '#FFFFFF',
+import type { ITerminalInitOnlyOptions, ITerminalOptions } from "@xterm/xterm";
+
+export const ScrollbackSizes = {
+    SMALL: 2500, //~250kb
+    MEDIUM: 5000,//default
+    LARGE: 10000,
+} as const;
+
+export type ScrollbackSize = typeof ScrollbackSizes[keyof typeof ScrollbackSizes];
+
+export const DensityModes = {
+    COMPACT: {
+        fontSize: 12,
+        lineHeight: 1.0,
+        letterSpacing: 0.5,
+    },
+    COMFORTABLE: {
+        fontSize: 14,
+        lineHeight: 1.1,
+        letterSpacing: 0.8,
+    },
+    SPACIOUS: {
+        fontSize: 16,
+        lineHeight: 1.1,
+        letterSpacing: 0.8,
+    },
+} as const;
+
+export type DensityMode = keyof typeof DensityModes;
+
+export const TimestampModes = {
+    DEFAULT: 'default',
+    FORCE12H: 'force12h',
+    FORCE24H: 'force24h',
+    DISABLED: 'disabled',
+} as const;
+
+export type TimestampMode = keyof typeof TimestampModes;
+
+export type TerminalOptions = {
+    density: DensityMode;
+    scrollback: ScrollbackSize;
+    timestamp: TimestampMode;
+    copyTimestamp: boolean;
+    copyChannel: boolean;
+}
+
+export const terminalDefaultOptions: TerminalOptions = {
+    density: 'COMFORTABLE',
+    scrollback: ScrollbackSizes.MEDIUM,
+    timestamp: 'DEFAULT',
+    copyTimestamp: false,
+    copyChannel: true,
 };
 
-const terminalOptions: ITerminalOptions | ITerminalInitOnlyOptions = {
-    theme: baseTheme,
+export const xtermOptions: ITerminalOptions | ITerminalInitOnlyOptions = {
     convertEol: true,
     cursorBlink: true,
     cursorStyle: 'bar',
     disableStdin: true,
     drawBoldTextInBrightColors: false,
     fontFamily: "JetBrains Mono Variable, monospace",
-    fontSize: 14,
-    lineHeight: 1.1,
     fontWeight: "300",
     fontWeightBold: "600",
-    letterSpacing: 0.8,
-    scrollback: 5000,
-    // scrollback: 2500, //more or less equivalent to the legacy 250kb limit
     allowProposedApi: true,
     allowTransparency: true,
     overviewRulerWidth: 15,
+    ...terminalDefaultOptions,
+    ...DensityModes[terminalDefaultOptions.density],
 };
 
-/*
-    NOTE: When implementing a stored options dropdown, add the following options:
-    - fontSize
-    - lineHeight
-    - scrollback
-    - RTL fixes
-    - light mode?
-    - whether clicking on a saved command copies it to the input or executes it directly
-*/
-export default terminalOptions;
+export default xtermOptions;
diff --git a/panel/src/pages/NotFound.tsx b/panel/src/pages/NotFound.tsx
index 76208acee..fc195c736 100644
--- a/panel/src/pages/NotFound.tsx
+++ b/panel/src/pages/NotFound.tsx
@@ -1,6 +1,7 @@
 import InlineCode from "@/components/InlineCode";
 import { useSetPageTitle } from "@/hooks/pages";
-import { Link } from "wouter";
+import { useEffect } from "react";
+import { Link, useLocation } from "wouter";
 
 type Props = {
     params: {
@@ -9,7 +10,16 @@ type Props = {
 };
 export default function NotFound({ params }: Props) {
     const setPageTitle = useSetPageTitle();
+    const setLocation = useLocation()[1];
     setPageTitle('Not Found');
+
+    // FIXME:NEXT:UPDATE - remove
+    useEffect(() => {
+        if (params['*'] === 'whitelist') {
+            setLocation('/allowlist');
+        }
+    }, []);
+
     return (
         <div className="w-full flex items-center justify-center">
             <div className="text-center">
diff --git a/panel/src/pages/PlayerDropsPage/DrilldownCard.tsx b/panel/src/pages/PlayerDropsPage/DrilldownCard.tsx
index 52d1c2b97..200ff74d1 100644
--- a/panel/src/pages/PlayerDropsPage/DrilldownCard.tsx
+++ b/panel/src/pages/PlayerDropsPage/DrilldownCard.tsx
@@ -11,6 +11,7 @@ import DrilldownOverviewSubcard from "./DrilldownOverviewSubcard";
 import { DisplayLodType, DrilldownRangeSelectionType } from "./PlayerDropsPage";
 import InlineCode from "@/components/InlineCode";
 import DrilldownResourcesSubcard from "./DrilldownResourcesSubcard";
+import { DynamicNewItem } from "@/components/DynamicNewBadge";
 
 
 export function DrilldownCardLoading({ isError }: { isError?: boolean }) {
@@ -31,8 +32,8 @@ export function DrilldownCardLoading({ isError }: { isError?: boolean }) {
                 </div>
                 <div className="flex flex-col flex-shrink px-1 sm:px-4 py-2 space-y-4 border-t border-b bg-secondary/35">
                     <div className="flex items-center space-x-2">
-                        <div className='hidden xs:block'><SkullIcon className="size-4" /></div>
-                        <h2 className="font-mono text-sm">Crash Reasons</h2>
+                        <div className='hidden xs:block'><ShapesIcon className="size-4" /></div>
+                        <h2 className="font-mono text-sm">Environment Changes</h2>
                     </div>
                 </div>
                 <div className="px-4 pt-2 pb-4">
@@ -40,8 +41,8 @@ export function DrilldownCardLoading({ isError }: { isError?: boolean }) {
                 </div>
                 <div className="flex flex-col flex-shrink px-1 sm:px-4 py-2 space-y-4 border-t border-b bg-secondary/35">
                     <div className="flex items-center space-x-2">
-                        <div className='hidden xs:block'><ShapesIcon className="size-4" /></div>
-                        <h2 className="font-mono text-sm">Environment Changes</h2>
+                        <div className='hidden xs:block'><SkullIcon className="size-4" /></div>
+                        <h2 className="font-mono text-sm">Crash Reasons</h2>
                     </div>
                 </div>
                 <div className="px-4 pt-2 pb-4 space-y-4">
@@ -113,6 +114,9 @@ const DrilldownCardInner = function DrilldownCard({
                         <div className="flex items-center space-x-2">
                             <div className='hidden xs:block'><ShapesIcon className="size-4" /></div>
                             <h2 className="font-mono text-sm">Environment Changes</h2>
+                            <DynamicNewItem featName="playerDropsEnvChangesReversed" durationDays={14}>
+                                <span className="text-2xs text-warning-inline/80">Note: This list now shows the most recent changes first.</span>
+                            </DynamicNewItem>
                         </div>
                     </div>
                     <DrilldownChangesSubcard changes={windowData.changes} />
diff --git a/panel/src/pages/PlayerDropsPage/DrilldownChangesSubcard.tsx b/panel/src/pages/PlayerDropsPage/DrilldownChangesSubcard.tsx
index b2c0849d1..c6137c72a 100644
--- a/panel/src/pages/PlayerDropsPage/DrilldownChangesSubcard.tsx
+++ b/panel/src/pages/PlayerDropsPage/DrilldownChangesSubcard.tsx
@@ -107,7 +107,7 @@ export default function DrilldownChangesSubcard({ changes }: DrilldownChangesSub
     };
 
     const sortedChanges = useMemo(() => {
-        return changes.sort((a, b) => a.ts - b.ts);
+        return changes.sort((a, b) => b.ts - a.ts);
     }, [changes]);
 
     if (!changes.length) {
diff --git a/panel/src/pages/PlayerDropsPage/DrilldownOverviewSubcard.tsx b/panel/src/pages/PlayerDropsPage/DrilldownOverviewSubcard.tsx
index b08a7377a..fcef7b0ba 100644
--- a/panel/src/pages/PlayerDropsPage/DrilldownOverviewSubcard.tsx
+++ b/panel/src/pages/PlayerDropsPage/DrilldownOverviewSubcard.tsx
@@ -42,12 +42,9 @@ export default function DrilldownOverviewSubcard({ dropTypes }: DrilldownOvervie
     return (
         <div className="px-4 py-4 flex flex-wrap justify-evenly gap-4 text-muted-foreground">
             {categories.map(([reasonId, reasonData]) => (
-                <Tooltip>
+                <Tooltip key={reasonId}>
                     <TooltipTrigger asChild>
-                        <div
-                            key={reasonId}
-                            className="px-4 flex flex-col gap-1 items-center justify-center"
-                        >
+                        <div className="px-4 flex flex-col gap-1 items-center justify-center">
                             <span
                                 className="text-xl tracking-wider border-b-2 font-semibold"
                                 style={{ borderColor: reasonData.color }}
diff --git a/panel/src/pages/PlayerDropsPage/TimelineCard.tsx b/panel/src/pages/PlayerDropsPage/TimelineCard.tsx
index 67574a529..d9d8cb016 100644
--- a/panel/src/pages/PlayerDropsPage/TimelineCard.tsx
+++ b/panel/src/pages/PlayerDropsPage/TimelineCard.tsx
@@ -38,12 +38,14 @@ const TimelineCard = memo(({
         const endDate = new Date(dataTs);
         if (displayLod === 'day') {
             // 14d window, 12h+15m padding start
-            startDate.setHours(-(14 * 24) - 12, -15, 0, 0);
+            const chartDurationHours = (14 - 1) * 24; //minus 1 day
+            startDate.setHours(-chartDurationHours - 12, 0, 0, 0);
             endDate.setHours(12, 0, 0, 0);
         } else {
             // 7d window, 30m+15m padding start
-            startDate.setHours(startDate.getHours() - 7 * 24, -45, 0, 0);
-            endDate.setMinutes(30, 0, 0);
+            const chartDurationHours = (7 * 24) + 1; //plus 1 hour
+            startDate.setHours(startDate.getHours() - chartDurationHours, 15, 0, 0);
+            endDate.setMinutes(endDate.getMinutes() + 30, 0, 0);
         }
         const processed = processDropsSummary(summaryData, displayLod, startDate);
         if (!processed) return;
diff --git a/panel/src/pages/PlayerDropsPage/TimelineDropsChart.tsx b/panel/src/pages/PlayerDropsPage/TimelineDropsChart.tsx
index 6bb87550d..8978f40ed 100644
--- a/panel/src/pages/PlayerDropsPage/TimelineDropsChart.tsx
+++ b/panel/src/pages/PlayerDropsPage/TimelineDropsChart.tsx
@@ -5,6 +5,7 @@ import drawDropsTimeline, { TimelineDropsDatum } from "./drawDropsTimeline";
 import { playerDropCategories } from "@/lib/playerDropCategories";
 import { PlayerDropsMessage } from "./PlayerDropsGenericSubcards";
 import { DrilldownRangeSelectionType } from "./PlayerDropsPage";
+import './timeline.css';
 
 export type TimelineDropsChartData = {
     displayLod: string;
@@ -158,7 +159,6 @@ function TimelineDropsChart({ chartData, chartName, width, height, rangeSelected
                 position: 'absolute',
                 top: `${margins.top}px`,
                 left: `${margins.left}px`,
-                // imageRendering: 'pixelated',
             }}
         />
     </>);
diff --git a/panel/src/pages/PlayerDropsPage/chartingUtils.ts b/panel/src/pages/PlayerDropsPage/chartingUtils.ts
index d53dc6d11..dd6c74ea2 100644
--- a/panel/src/pages/PlayerDropsPage/chartingUtils.ts
+++ b/panel/src/pages/PlayerDropsPage/chartingUtils.ts
@@ -2,10 +2,17 @@ import { PlayerDropsSummaryHour } from "@shared/otherTypes";
 import { playerDropExpectedCategories, playerDropUnexpectedCategories } from "@/lib/playerDropCategories";
 import { TimelineDropsDatum } from "./drawDropsTimeline";
 import { DisplayLodType } from "./PlayerDropsPage";
-import { cloneDeep } from "lodash-es";
 
 export type PlayerDropsCategoryCount = [category: string, count: number];
 
+// Helper function to floor a date to the start of the day
+const floorToStartOfDay = (dateString: string) => {
+    const date = new Date(dateString);
+    date.setHours(0, 0, 0, 0);
+    return date.toISOString();
+};
+
+
 /**
  * Processes the player drops summary api data to return the data for the timeline chart.
  * 
@@ -32,17 +39,22 @@ export const processDropsSummary = (apiData: PlayerDropsSummaryHour[], displayLo
         let currDayData: PlayerDropsSummaryHour | undefined;
         for (const hourData of windowData) {
             const hourDayOfMonth = (new Date(hourData.hour)).getDate();
+            const hourDayStart = floorToStartOfDay(hourData.hour);
             if (!currDayData) {
                 currDayOfMonth = hourDayOfMonth;
                 currDayData = {
-                    hour: hourData.hour,
+                    hour: hourDayStart,
                     changes: 0,
                     dropTypes: [],
                 };
             } else if (hourDayOfMonth !== currDayOfMonth) {
                 binnedData.push(currDayData);
                 currDayOfMonth = hourDayOfMonth;
-                currDayData = cloneDeep(hourData);
+                currDayData = {
+                    hour: hourDayStart,
+                    changes: hourData.changes,
+                    dropTypes: structuredClone(hourData.dropTypes),
+                };
                 continue;
             }
 
diff --git a/panel/src/pages/PlayerDropsPage/drawDropsTimeline.ts b/panel/src/pages/PlayerDropsPage/drawDropsTimeline.ts
index 7ce58686e..1a5059069 100644
--- a/panel/src/pages/PlayerDropsPage/drawDropsTimeline.ts
+++ b/panel/src/pages/PlayerDropsPage/drawDropsTimeline.ts
@@ -76,7 +76,10 @@ export default function drawDropsTimeline({
     console.log('Drawable area:', drawableAreaWidth, drawableAreaHeight);
 
     const chartGroup = svg.append('g')
-        .attr('transform', translate(margins.left, margins.top));
+        .attr('transform', translate(margins.left, margins.top))
+        .attr('class', 'interaction-chart')
+        .attr('data-selected', 'false');
+    const chartGroupData = chartGroup.node()?.dataset;
 
 
     //Scales
@@ -160,6 +163,7 @@ export default function drawDropsTimeline({
         ctx.setLineDash([]);
 
         //Drawing the timeline
+        let barsRendered = 0;
         ctx.lineWidth = 1;
         for (const intervalData of data.log) {
             const baseX = timeScale(intervalData.startDate);
@@ -170,6 +174,7 @@ export default function drawDropsTimeline({
             const renderOffsetX = baseX - renderStartX;
             const barWidth = Math.round(intervalWidth + renderOffsetX) + 1 - barCenterOffset - barPadding;
             if (barWidth < 1) continue;
+            barsRendered++;
 
             //Draw the count blocks
             let dropSum = 0;
@@ -218,6 +223,7 @@ export default function drawDropsTimeline({
         }
         if (isFirstRender) {
             console.timeEnd('drawing canvas timeline');
+            console.log('Bars rendered:', barsRendered);
         }
     }
     drawCanvasTimeline();
@@ -238,6 +244,12 @@ export default function drawDropsTimeline({
         .attr('stroke-width', 1)
         .attr('stroke-dasharray', '3,3');
 
+    const cursorHighlight = chartGroup.append('rect')
+        .attr('fill', 'transparent')
+        .attr('height', drawableAreaHeight)
+        .attr('opacity', '0')
+        .attr('class', 'transition-opacity interaction-highlight');
+
     //Range selector mark
     const defs = chartGroup.append('defs');
     const mask = defs.append('mask')
@@ -258,6 +270,14 @@ export default function drawDropsTimeline({
         .attr('mask', `url(#${maskElmntId})`);
 
     //Helpers
+    const getRangeBar = (x1: number, x2: number) => {
+        const x1Floor = Math.floor(x1);
+        const x2Floor = Math.floor(x2);
+        const start = Math.min(x1Floor, x2Floor) + 0.5 - barCenterOffset;
+        const width = Math.abs(x2Floor - x1Floor) + intervalWidth + 0.5;
+        return { start, width };
+    }
+
     const updateRangeRect = (x1?: number, x2?: number) => {
         //Hide mask
         if (
@@ -266,16 +286,15 @@ export default function drawDropsTimeline({
             || (x1 > drawableAreaWidth && x2 > drawableAreaWidth)
         ) {
             maskArea.attr('opacity', '0');
+            chartGroup.attr('data-selected', 'false');
             return;
         }
 
         //Set mask
-        const x1Floor = Math.floor(x1);
-        const x2Floor = Math.floor(x2);
-        maskRect
-            .attr('x', Math.min(x1Floor, x2Floor) + 0.5 - barCenterOffset)
-            .attr('width', Math.abs(x2Floor - x1Floor) + intervalWidth + 0.5);
+        const { start, width } = getRangeBar(x1, x2);
+        maskRect.attr('x', start).attr('width', width);
         maskArea.attr('opacity', '1');
+        chartGroup.attr('data-selected', 'true');
     }
     const setUpstreamRangeState = (range: [date1: Date, date2: Date] | null) => {
         if (!Array.isArray(range) || range.length !== 2) {
@@ -320,13 +339,14 @@ export default function drawDropsTimeline({
     }
 
     //Find the closest data point for a given X value
+    const filteredLog = data.log.filter((datum) => datum.drops.length > 0);
     const timeBisector = d3.bisector((interval: TimelineDropsDatum) => interval.startDate).center;
     const findClosestDatum = (pointerX: number) => {
         // const xPosDate = timeScale.invert(pointerX - intervalWidth / 2);
         const xPosDate = timeScale.invert(pointerX);
-        const indexFound = timeBisector(data.log, xPosDate);
+        const indexFound = timeBisector(filteredLog, xPosDate);
         if (indexFound === -1) return;
-        const datum = data.log[indexFound];
+        const datum = filteredLog[indexFound];
         const datumStartTs = datum.startDate.getTime();
         return {
             datum,
@@ -341,7 +361,10 @@ export default function drawDropsTimeline({
     const handleMouseMove = (pointerX: number) => {
         // Find closest data point
         const datumFound = findClosestDatum(pointerX);
-        if (!datumFound) return;
+        if (!datumFound) {
+            cursorHighlight.attr('opacity', '0');
+            return;
+        }
         const { datum, datumStartX, dataumIndex } = datumFound;
         if (dataumIndex === lastDatumIndex) return;
         lastDatumIndex = dataumIndex;
@@ -352,6 +375,8 @@ export default function drawDropsTimeline({
             return updateRangeRect(rangeStartData.x, datumStartX);
         }
 
+        if (chartGroupData?.selected === 'true') return;
+
         //Set legend data
         const allNumEls = legendRef.querySelectorAll<HTMLSpanElement>('span[data-category]');
         for (const numEl of allNumEls) {
@@ -378,8 +403,9 @@ export default function drawDropsTimeline({
             wasTransitionDisabled = true;
         }
         const legendWidth = legendRef.clientWidth;
-        let legendX = datumStartX - legendWidth - 10 + margins.left;
-        if (legendX < margins.left) legendX = datumStartX + 10 + margins.left;
+        const legendOffset = 36;
+        let legendX = datumStartX - legendWidth - legendOffset + margins.left;
+        if (legendX < margins.left) legendX = datumStartX + legendOffset + margins.left;
         legendRef.style.left = `${legendX}px`;
         legendRef.style.opacity = '1';
         if (wasTransitionDisabled) {
@@ -389,13 +415,21 @@ export default function drawDropsTimeline({
         }
 
         // Draw cursor
-        const cursorX = Math.round(datumStartX + intervalWidth / 2) + 0.5 - barCenterOffset;
-        cursorLineVert.attr('x1', cursorX).attr('y1', 0).attr('x2', cursorX).attr('y2', drawableAreaHeight);
+        // const cursorX = Math.round(datumStartX + intervalWidth / 2) + 0.5 - barCenterOffset;
+        // cursorLineVert.attr('x1', cursorX).attr('y1', 0).attr('x2', cursorX).attr('y2', drawableAreaHeight);
+
+        // Draw cursor highlight bar
+        const barX = getRangeBar(datumStartX, datumStartX);
+        cursorHighlight
+            .attr('x', barX.start)
+            .attr('width', barX.width)
+            .attr('opacity', '1');
     };
 
     const handleMouseDown = (pointerX: number) => {
         const datumFound = findClosestDatum(pointerX);
         if (!datumFound) return;
+        chartGroup.attr('data-mousedown', 'true');
         hideCursor();
         rangeStartData = {
             x: datumFound.datumStartX,
@@ -405,10 +439,15 @@ export default function drawDropsTimeline({
     }
 
     const handleMouseUp = (pointerX: number) => {
+        chartGroup.attr('data-mousedown', 'false');
         if (!rangeStartData) return clearRangeData(true);
         const datumFound = findClosestDatum(pointerX);
         if (!datumFound) return clearRangeData(true);
-        if (!rangeCrossedThreshold && rangeStartData.datum.startDate.getTime() === datumFound.datum.startDate.getTime()) {
+        // if (!rangeCrossedThreshold && rangeStartData.datum.startDate.getTime() === datumFound.datum.startDate.getTime()) {
+        //     return clearRangeData(true);
+        // }
+
+        if (rangeSelected && chartGroupData?.selected !== 'true') {
             return clearRangeData(true);
         }
 
@@ -423,6 +462,8 @@ export default function drawDropsTimeline({
     }
 
     const handleMouseLeave = () => {
+        chartGroup.attr('data-mousedown', 'false');
+        cursorHighlight.attr('opacity', '0');
         setTimeout(() => {
             clearRangeData(!!rangeStartData);
             hideCursor();
@@ -431,31 +472,29 @@ export default function drawDropsTimeline({
 
     // Handle svg mouse events
     let isEventInCooldown = false;
-    const cooldownTime = 20;
-    chartGroup.append('rect')
-        .attr('width', drawableAreaWidth)
-        .attr('height', drawableAreaHeight)
-        .attr('fill', 'transparent')
-        .on('mousemove', function (event) {
-            const [pointerX] = d3.pointer(event);
-            if (!isEventInCooldown) {
-                isEventInCooldown = true;
+    const cooldownTime = 75;
+    chartGroup.on('mousemove', function (event) {
+        const [pointerX] = d3.pointer(event);
+        if (!isEventInCooldown) {
+            isEventInCooldown = true;
+            handleMouseMove(pointerX);
+            setTimeout(() => {
+                isEventInCooldown = false;
+            }, cooldownTime);
+        } else {
+            clearTimeout(cursorRedrawTimeout);
+            cursorRedrawTimeout = setTimeout(() => {
                 handleMouseMove(pointerX);
-                setTimeout(() => {
-                    isEventInCooldown = false;
-                }, cooldownTime);
-            } else {
-                clearTimeout(cursorRedrawTimeout);
-                cursorRedrawTimeout = setTimeout(() => {
-                    handleMouseMove(pointerX);
-                }, cooldownTime);
-            }
-        })
-        .on('mousedown', function (event) {
+            }, cooldownTime);
+        }
+    })
+        .on('mousedown', function (event: MouseEvent) {
+            if (event.button !== 0) return; //left btn only
             const [pointerX] = d3.pointer(event);
             handleMouseDown(pointerX);
         })
         .on('mouseup', function (event) {
+            if (event.button !== 0) return; //left btn only
             const [pointerX] = d3.pointer(event);
             handleMouseUp(pointerX);
         });
diff --git a/panel/src/pages/PlayerDropsPage/timeline.css b/panel/src/pages/PlayerDropsPage/timeline.css
new file mode 100644
index 000000000..47770ae35
--- /dev/null
+++ b/panel/src/pages/PlayerDropsPage/timeline.css
@@ -0,0 +1,14 @@
+.interaction-highlight:not([data-mousedown="true"] *) {
+    fill: rgba(255, 255, 255, 0.1);
+}
+
+.interaction-chart[data-mousedown="true"] {
+    cursor: col-resize;
+}
+.interaction-chart[data-selected="true"]:not([data-mousedown="true"]) {
+    cursor: zoom-out;
+    /* cursor: pointer; */
+}
+.interaction-chart[data-selected="false"]:not([data-mousedown="true"]) {
+    cursor: pointer;
+}
diff --git a/panel/src/pages/Players/PlayersPage.tsx b/panel/src/pages/Players/PlayersPage.tsx
index aafd102b1..30fe1ed19 100644
--- a/panel/src/pages/Players/PlayersPage.tsx
+++ b/panel/src/pages/Players/PlayersPage.tsx
@@ -10,6 +10,7 @@ import {
 import PlayersTable from './PlayersTable';
 import { PlayersStatsResp, PlayersTableFiltersType, PlayersTableSearchType } from '@shared/playerApiTypes';
 import { useBackendApi } from '@/hooks/fetch';
+import { LocalStorageKey } from '@/lib/localStorage';
 
 
 //Memoized components
@@ -18,18 +19,17 @@ const PlayersTableMemo = memo(PlayersTable);
 const PageCalloutRowMemo = memo(PageCalloutRow);
 
 //Get/Set localStorage search type
-const LOCALSTORAGE_KEY = 'playerSearchRememberType';
 const getStoredSearchType = () => {
-    const stored = localStorage.getItem(LOCALSTORAGE_KEY);
+    const stored = localStorage.getItem(LocalStorageKey.PlayersPageSearchType);
     if (!stored) return false;
     if (!availableSearchTypes.some(f => f.value === stored)) return false;
     return stored;
 }
 const setStoredSearchType = (searchType: string | false) => {
     if (searchType) {
-        localStorage.setItem(LOCALSTORAGE_KEY, searchType);
+        localStorage.setItem(LocalStorageKey.PlayersPageSearchType, searchType);
     } else {
-        localStorage.removeItem(LOCALSTORAGE_KEY);
+        localStorage.removeItem(LocalStorageKey.PlayersPageSearchType);
     }
 }
 
diff --git a/panel/src/pages/Settings/SettingsCardShell.tsx b/panel/src/pages/Settings/SettingsCardShell.tsx
index 4a7274f56..cf8bf1425 100644
--- a/panel/src/pages/Settings/SettingsCardShell.tsx
+++ b/panel/src/pages/Settings/SettingsCardShell.tsx
@@ -27,6 +27,10 @@ export default function SettingsCardShell({
     const [animationParent] = useAutoAnimate();
     const isCardPendingSave = pageCtx.cardPendingSave?.cardId === cardCtx.cardId;
 
+    // FIXME:NEXT:UPDATE remove
+    const visibleTabName = cardCtx.tabName === 'Whitelist' ? 'Allowlist' : cardCtx.tabName;
+    const visibleCardName = cardCtx.cardName === 'Whitelist' ? 'Allowlist' : cardCtx.cardName;
+
     return (
         <div id={`tab-${cardCtx.cardId}`} data-show-advanced={advancedVisible} className='group/card'>
             <Card className="xs:x bg-transparent max-xs:rounded-none max-xs:shadow-none">
@@ -38,7 +42,7 @@ export default function SettingsCardShell({
                             <li>{cardCtx.cardName} Settings</li>
                         </>
                     ) : (
-                        <li>{cardCtx.tabName} Settings</li>
+                        <li>{visibleTabName} Settings</li>
                     )}
                     {isCardPendingSave && (
                         // <div className="grow text-right xflex xitems-center xgap-1.5 xbg-lime-300">
@@ -63,7 +67,7 @@ export default function SettingsCardShell({
                                 disabled={!isCardPendingSave || pageCtx.isReadOnly}
                                 onClick={onClickSave}
                             >
-                                Save {cardCtx.cardName} Settings
+                                Save {visibleCardName} Settings
                                 {pageCtx.isSaving && (
                                     <Loader2Icon className="h-3.5 mt-0.5 inline animate-spin" />
                                 )}
diff --git a/panel/src/pages/Settings/SettingsPage.tsx b/panel/src/pages/Settings/SettingsPage.tsx
index 1877022c0..cc74edbc1 100644
--- a/panel/src/pages/Settings/SettingsPage.tsx
+++ b/panel/src/pages/Settings/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import useSWR from "swr";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { setUrlHash } from "@/lib/navigation";
+import { setUrlHash as setUrlHashOriginal } from "@/lib/navigation";
 import { Settings2Icon } from "lucide-react";
 
 import { ApiTimeout, useBackendApi } from "@/hooks/fetch";
@@ -98,10 +98,23 @@ export default function SettingsPage() {
     const openConfirmDialog = useOpenConfirmDialog();
     const { hasPerm } = useAdminPerms();
 
+    // FIXME:NEXT:UPDATE remove
+    const setUrlHash = (hash: string) => {
+        if (hash === 'whitelist') {
+            hash = 'allowlist';
+        }
+        setUrlHashOriginal(hash);
+    }
+
     //Check for default tab in URL hash
     const [tab, setTab] = useState(() => {
         const pageHash = window.location?.hash.slice(1);
-        return settingsTabs.find(tab => tab.ctx.tabId === pageHash)?.ctx.tabId ?? settingsTabs[0].ctx.tabId;
+
+        // FIXME:NEXT:UPDATE remove
+        const requestedTab = pageHash === 'allowlist' ? 'whitelist' : pageHash;
+        if (pageHash === 'whitelist') setUrlHash('allowlist');
+
+        return settingsTabs.find(tab => tab.ctx.tabId === requestedTab)?.ctx.tabId ?? settingsTabs[0].ctx.tabId;
     });
 
 
@@ -219,7 +232,9 @@ export default function SettingsPage() {
                                 value={tab.ctx.tabId}
                                 className="hover:text-primary"
                             >
-                                {tab.ctx.tabName}
+                                {/* FIXME:NEXT:UPDATE remove */}
+                                {tab.ctx.tabName === 'Whitelist' ? 'Allowlist' : tab.ctx.tabName}
+
                                 {/* <TriangleAlertIcon className="inline-block size-4 mt-0.5 ml-1 text-destructive self-center" /> */}
                                 {/* <DynamicNewBadge size='xs' featName="ignore" /> */}
                             </TabsTrigger>
diff --git a/panel/src/pages/Settings/settingsItems.tsx b/panel/src/pages/Settings/settingsItems.tsx
index 57f5afe12..0a0768cd8 100644
--- a/panel/src/pages/Settings/settingsItems.tsx
+++ b/panel/src/pages/Settings/settingsItems.tsx
@@ -20,6 +20,24 @@ function LabelNew() {
     )
 }
 
+/**
+ * An optional description line with conditional rendering
+ */
+export function SettingItemWarningLine({ visible, children, className }: SettingItemWarningLineProps) {
+    if (!visible) return null;
+    return (
+        <div className={cn("text-warning-inline opacity-45 group-hover/cfgCardItem:opacity-100", className)}>
+            {children}
+        </div>
+    );
+}
+
+type SettingItemWarningLineProps = {
+    visible: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+
 
 /**
  * A description for a setting item.
diff --git a/panel/src/pages/Settings/tabCards/discord.tsx b/panel/src/pages/Settings/tabCards/discord.tsx
index 1bda908ff..56a8ab024 100644
--- a/panel/src/pages/Settings/tabCards/discord.tsx
+++ b/panel/src/pages/Settings/tabCards/discord.tsx
@@ -124,11 +124,10 @@ export default function ConfigCardDiscord({ cardCtx, pageCtx }: SettingsCardProp
                     required
                 />
                 <SettingItemDesc>
-                    To get a token and the bot to join your server, follow these two guides:
-                    <TxAnchor href="https://discordjs.guide/preparations/setting-up-a-bot-application.html">Setting up a bot application</TxAnchor> and <TxAnchor href="https://discordjs.guide/preparations/adding-your-bot-to-servers.html">Adding your bot to servers</TxAnchor> <br />
+                    To get a token and the bot to join your server, follow these two guides: <br />
+                    <TxAnchor  href="https://discordjs.guide/preparations/setting-up-a-bot-application.html">Setting up a bot application</TxAnchor> and <TxAnchor href="https://discordjs.guide/preparations/adding-your-bot-to-servers.html">Adding your bot to servers</TxAnchor> <br />
                     <strong>Note:</strong> Do not reuse the same token for another bot. <br />
-                    <strong>Note:</strong> The bot requires the <strong>Server Members</strong> intent, which can be set at the
-                    <TxAnchor href="https://discord.com/developers/applications">Discord Developer Portal</TxAnchor>.
+                    <strong>Note:</strong> The bot requires the <strong>Server Members</strong> intent, which can be set at the <TxAnchor href="https://discord.com/developers/applications">Discord Developer Portal</TxAnchor>.
                 </SettingItemDesc>
             </SettingItem>
             <SettingItem label="Guild/Server ID" htmlFor={cfg.discordGuild.eid} required={states.botEnabled}>
@@ -142,8 +141,7 @@ export default function ConfigCardDiscord({ cardCtx, pageCtx }: SettingsCardProp
                 />
                 <SettingItemDesc>
                     The ID of the Discord Server (also known as Discord Guild). <br />
-                    To get the Server ID, go to Discord's settings and
-                    <TxAnchor href="https://support.discordapp.com/hc/article_attachments/115002742731/mceclip0.png"> enable developer mode</TxAnchor>, then right-click on the guild icon select "Copy ID".
+                    To get the Server ID, go to Discord's settings and <TxAnchor href="https://support.discordapp.com/hc/article_attachments/115002742731/mceclip0.png">enable developer mode</TxAnchor>, then right-click on the guild icon select "Copy ID".
                 </SettingItemDesc>
             </SettingItem>
             <SettingItem label="Warnings Channel ID" htmlFor={cfg.warningsChannel.eid} showOptional>
@@ -158,8 +156,7 @@ export default function ConfigCardDiscord({ cardCtx, pageCtx }: SettingsCardProp
                 <SettingItemDesc>
                     The ID of the channel to send Announcements (eg server restarts). <br />
                     You can leave it blank to disable this feature. <br />
-                    To get the channel ID, go to Discord's settings and
-                    <TxAnchor href="https://support.discordapp.com/hc/article_attachments/115002742731/mceclip0.png"> enable developer mode</TxAnchor>, then right-click on the channel name and select "Copy ID".
+                    To get the channel ID, go to Discord's settings and <TxAnchor href="https://support.discordapp.com/hc/article_attachments/115002742731/mceclip0.png">enable developer mode</TxAnchor>, then right-click on the channel name and select "Copy ID".
                 </SettingItemDesc>
             </SettingItem>
             {/* <SettingItem label="Status Embed">
diff --git a/panel/src/pages/Settings/tabCards/gameNotifications.tsx b/panel/src/pages/Settings/tabCards/gameNotifications.tsx
index 829662c75..66498157a 100644
--- a/panel/src/pages/Settings/tabCards/gameNotifications.tsx
+++ b/panel/src/pages/Settings/tabCards/gameNotifications.tsx
@@ -93,7 +93,7 @@ export default function ConfigCardGameNotifications({ cardCtx, pageCtx }: Settin
                 />
                 <SettingItemDesc>
                     Suppresses the display of announcements, allowing you to implement your own announcement via the event <InlineCode>txAdmin:events:announcement</InlineCode>.
-                    <TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsannouncement">Documentation</TxAnchor>
+                    &nbsp;<TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsannouncement">Documentation</TxAnchor>
                 </SettingItemDesc>
             </SettingItem>
             <SettingItem label="Hide Direct Message Notification">
@@ -107,7 +107,7 @@ export default function ConfigCardGameNotifications({ cardCtx, pageCtx }: Settin
                 />
                 <SettingItemDesc>
                     Suppresses the display of direct messages, allowing you to implement your own direct message notification via the event <InlineCode>txAdmin:events:playerDirectMessage</InlineCode>.
-                    <TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsplayerdirectmessage">Documentation</TxAnchor>
+                    &nbsp;<TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsplayerdirectmessage">Documentation</TxAnchor>
                 </SettingItemDesc>
             </SettingItem>
             <SettingItem label="Hide Warning Notification">
@@ -121,7 +121,7 @@ export default function ConfigCardGameNotifications({ cardCtx, pageCtx }: Settin
                 />
                 <SettingItemDesc>
                     Suppresses the display of warnings, allowing you to implement your own warning via the event <InlineCode>txAdmin:events:playerWarned</InlineCode>.
-                    <TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsplayerwarned">Documentation</TxAnchor>
+                    &nbsp;<TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsplayerwarned">Documentation</TxAnchor>
                 </SettingItemDesc>
             </SettingItem>
             <SettingItem label="Hide Scheduled Restart Warnings">
@@ -135,7 +135,7 @@ export default function ConfigCardGameNotifications({ cardCtx, pageCtx }: Settin
                 />
                 <SettingItemDesc>
                     Suppresses the display of scheduled restart warnings, allowing you to implement your own warning via the event <InlineCode>txAdmin:events:scheduledRestart</InlineCode>.
-                    <TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsscheduledrestart">Documentation</TxAnchor>
+                    &nbsp;<TxAnchor href="https://aka.cfx.re/txadmin-events#txadmineventsscheduledrestart">Documentation</TxAnchor>
                 </SettingItemDesc>
             </SettingItem>
         </SettingsCardShell>
diff --git a/panel/src/pages/Settings/tabCards/whitelist.tsx b/panel/src/pages/Settings/tabCards/whitelist.tsx
index bcd6a0e22..b21ccd7a0 100644
--- a/panel/src/pages/Settings/tabCards/whitelist.tsx
+++ b/panel/src/pages/Settings/tabCards/whitelist.tsx
@@ -1,7 +1,7 @@
 import { Input } from "@/components/ui/input"
 import TxAnchor from '@/components/TxAnchor'
 import InlineCode from '@/components/InlineCode'
-import { SettingItem, SettingItemDesc } from '../settingsItems'
+import { SettingItem, SettingItemDesc, SettingItemWarningLine } from '../settingsItems'
 import { RadioGroup } from "@/components/ui/radio-group"
 import BigRadioItem from "@/components/BigRadioItem"
 import { useEffect, useRef, useMemo, useReducer } from "react"
@@ -43,14 +43,21 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
         toCfg: (str?: string) => str ? str.split(/[,;]\s*/).map(x => x.trim()).filter(x => x.length) : [],
     }
 
+    //External Read-only Configs
+    const isDiscordBotEnabled = pageCtx.apiData?.storedConfigs.discordBot?.enabled === true;
+
     //Processes the state of the page and sets the card as pending save if needed
     const updatePageState = () => {
         let currDiscordRoles;
         if (discordRolesRef.current) {
             currDiscordRoles = inputArrayUtil.toCfg(discordRolesRef.current.value);
         }
+        let currRejectionMessage;
+        if (rejectionMessageRef.current) {
+            currRejectionMessage = rejectionMessageRef.current.textArea.value.trim();
+        }
         const overwrites = {
-            rejectionMessage: rejectionMessageRef.current?.textArea.value,
+            rejectionMessage: currRejectionMessage,
             discordRoles: currDiscordRoles,
         };
 
@@ -64,12 +71,19 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
         const { hasChanges, localConfigs } = updatePageState();
         if (!hasChanges) return;
 
+        const isAllowlistInstructionsRequired = (
+            localConfigs.whitelist?.mode !== 'disabled'
+            && localConfigs.whitelist?.mode !== 'adminOnly'
+        );
+        if (isAllowlistInstructionsRequired && !localConfigs.whitelist?.rejectionMessage) {
+            return txToast.error('Please fill in the Allowlist Instructions field to be able to enable this allowlist mode.');
+        }
         if (
             localConfigs.whitelist?.rejectionMessage
             && localConfigs.whitelist.rejectionMessage.length > 512
         ) {
             return txToast.error({
-                title: 'The Whitelist Rejection Message is too big.',
+                title: 'The Allowlist Instructions is too big.',
                 md: true,
                 msg: 'The message must be 512 characters or less.',
             });
@@ -78,10 +92,10 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
             localConfigs.whitelist?.mode === 'discordMember'
             || localConfigs.whitelist?.mode === 'discordRoles'
         ) {
-            if (pageCtx.apiData?.storedConfigs.discordBot?.enabled !== true) {
+            if (!isDiscordBotEnabled) {
                 return txToast.warning({
                     title: 'Discord Bot is required.',
-                    msg: 'You need to enable the Discord Bot in the Discord tab to use Discord-based whitelist modes.',
+                    msg: 'You need to enable the Discord Bot in the Discord tab to use Discord-based allowlist modes.',
                 });
             }
             if (
@@ -93,7 +107,7 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
             ) {
                 return txToast.warning({
                     title: 'Discord Roles are required.',
-                    msg: 'You need to specify at least one Discord Role ID to use the "Discord Server Roles" whitelist mode.',
+                    msg: 'You need to specify at least one Discord Role ID to use the "Discord Server Roles" allowlist mode.',
                 });
             }
         }
@@ -112,13 +126,18 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
         pageCtx.saveChanges(cardCtx, localConfigs);
     }
 
+    const isPlayerAllowlistEnabled = (
+        states.whitelistMode !== 'disabled'
+        && states.whitelistMode !== 'adminOnly'
+    );
+
     return (
         <SettingsCardShell
             cardCtx={cardCtx}
             pageCtx={pageCtx}
             onClickSave={handleOnSave}
         >
-            <SettingItem label="Whitelist Mode">
+            <SettingItem label="Allowlist Mode">
                 <RadioGroup
                     value={states.whitelistMode}
                     onValueChange={cfg.whitelistMode.state.set as any}
@@ -128,19 +147,26 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
                         groupValue={states.whitelistMode}
                         value="disabled"
                         title="Disabled"
-                        desc="No whitelist status will be checked by txAdmin."
+                        desc={(<>
+                            Select this option if your server is public and open for all players to join. When a player connects, txAdmin will only check if they are banned <i>(if that is enabled)</i> and nothing else.
+                        </>)}
                     />
                     <BigRadioItem
                         groupValue={states.whitelistMode}
                         value="adminOnly"
                         title="Admin-only (maintenance mode)"
                         desc={(<>
-                            Will only allow server join if your <InlineCode>fivem:</InlineCode> or <InlineCode>discord:</InlineCode> identifiers are attached to a txAdmin administrator. Also known as maintenance mode.
+                            Will only allow server join if the player's <InlineCode>fivem:</InlineCode> or <InlineCode>discord:</InlineCode> identifiers are attached to a txAdmin administrator. Also known as maintenance mode.
                         </>)}
                     />
                     <BigRadioItem
                         groupValue={states.whitelistMode}
                         value="discordMember"
+                        disableReason={
+                            !isDiscordBotEnabled
+                                ? "The Discord bot must be enabled in the Discord tab to use this option."
+                                : null
+                        }
                         title="Discord Server Member"
                         desc={(<>
                             Checks if the player joining has a <InlineCode>discord:</InlineCode> identifier and is present in the Discord server configured in the Discord Tab.
@@ -149,6 +175,11 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
                     <BigRadioItem
                         groupValue={states.whitelistMode}
                         value="discordRoles"
+                        disableReason={
+                            !isDiscordBotEnabled
+                                ? "The Discord bot must be enabled in the Discord tab to use this option."
+                                : null
+                        }
                         title="Discord Server Roles"
                         desc={(<>
                             Checks if the player joining has a <InlineCode>discord:</InlineCode> identifier and is present in the Discord server configured in the Discord Tab and has at least one of the roles specified below.
@@ -159,41 +190,68 @@ export default function ConfigCardWhitelist({ cardCtx, pageCtx }: SettingsCardPr
                         value="approvedLicense"
                         title="Approved License"
                         desc={(<>
-                            The player <InlineCode>license:</InlineCode> identifier must be whitelisted by a txAdmin administrator. This can be done through the <TxAnchor href="/whitelist">Whitelist page</TxAnchor>, or the <InlineCode>/whitelist</InlineCode> Discord bot slash command.
+                            The player <InlineCode>license:</InlineCode> identifier must be allowlisted by a txAdmin administrator. This can be done through the <TxAnchor href="/allowlist">Allowlist page</TxAnchor>, or the <InlineCode>/allowlist</InlineCode> Discord bot command.
+                        </>)}
+                    />
+                    <BigRadioItem
+                        groupValue={states.whitelistMode}
+                        value="external"
+                        title="External Allowlist Resource"
+                        // FIXME:NEXT:UPDATE remove
+                        newOptionBadgeFeatName="settingsExternalWhitelist"
+                        desc={(<>
+                            Select this option if you are using an external allowlist system to manage which players can join the server.
                         </>)}
                     />
                 </RadioGroup>
+                <SettingItemDesc>
+                    <strong>Note:</strong> When enabled, the server list will show a lock icon next to the server name, and on the server page the players will be able to see the Allowlist Instructions.
+                </SettingItemDesc>
             </SettingItem>
-            <SettingItem label="Whitelist Rejection Message" htmlFor={cfg.rejectionMessage.eid} showOptional>
+            <SettingItem
+                label="Allowlist Instructions"
+                htmlFor={cfg.rejectionMessage.eid}
+                required={isPlayerAllowlistEnabled}
+            >
                 <AutosizeTextarea
                     id={cfg.rejectionMessage.eid}
                     ref={rejectionMessageRef}
-                    placeholder='Please join http://discord.gg/example and request to be whitelisted.'
+                    placeholder='Please join http://discord.gg/example and request to be allowlisted.'
                     defaultValue={cfg.rejectionMessage.initialValue}
                     onInput={updatePageState}
                     autoComplete="off"
                     minHeight={60}
                     maxHeight={180}
-                    disabled={pageCtx.isReadOnly}
+                    softMaxLength={512}
+                    disabled={pageCtx.isReadOnly || !isPlayerAllowlistEnabled}
                 />
                 <SettingItemDesc>
-                    Optional message to display to a player on the rejection message that shows when they try to connect while not being whitelisted. <br />
-                    If you have a Discord whitelisting process, include here a invite link.
+                    Explain here how players can apply to be allowlisted to join the server, including any requirements or steps they need to follow, like joining a Discord server or filling out an online form. <br />
+                    This message will show on the in-game server page and will also be sent to the player when they try to connect while not being allowlisted.
+                    <SettingItemWarningLine visible={!pageCtx.isReadOnly && !isPlayerAllowlistEnabled}>
+                        This field requires the Allowlist Mode to be enabled and not in Admin-only mode.
+                    </SettingItemWarningLine>
                 </SettingItemDesc>
             </SettingItem>
-            <SettingItem label="Whitelisted Discord Roles" htmlFor={cfg.discordRoles.eid}>
+            <SettingItem
+                label="Allowlisted Discord Roles"
+                htmlFor={cfg.discordRoles.eid}
+                required={states.whitelistMode === 'discordRoles'}
+            >
                 <Input
                     id={cfg.discordRoles.eid}
                     ref={discordRolesRef}
                     defaultValue={inputArrayUtil.toUi(cfg.discordRoles.initialValue)}
                     placeholder="000000000000000000, 000000000000000000"
                     onInput={updatePageState}
-                    disabled={pageCtx.isReadOnly}
+                    disabled={pageCtx.isReadOnly || states.whitelistMode !== 'discordRoles'}
                 />
                 <SettingItemDesc>
-                    The ID of the Discord roles that are whitelisted to join the server. <br />
-                    This field supports multiple roles, separated by comma. <br />
-                    <strong>Note:</strong> Requires the whitelist mode to be set to "Discord Server Roles".
+                    The ID of the Discord roles that are allowed to join the server. <br />
+                    This field supports multiple roles, separated by comma.
+                    <SettingItemWarningLine visible={!pageCtx.isReadOnly && states.whitelistMode !== 'discordRoles'}>
+                        This field requires the Allowlist Mode to be set to "Discord Server Roles".
+                    </SettingItemWarningLine>
                 </SettingItemDesc>
             </SettingItem>
         </SettingsCardShell>
diff --git a/panel/src/pages/Settings/utils.ts b/panel/src/pages/Settings/utils.ts
index 34afd1c7f..23891fab2 100644
--- a/panel/src/pages/Settings/utils.ts
+++ b/panel/src/pages/Settings/utils.ts
@@ -1,4 +1,3 @@
-import { useId } from "react";
 import { dequal } from 'dequal/lite';
 import { GetConfigsResp, PartialTxConfigs, TxConfigs } from "@shared/otherTypes";
 
@@ -54,7 +53,7 @@ export const SYM_RESET_CONFIG = Symbol('Settings:ResetConfig');
 
 
 /**
- * Helper to get the iferred type of a config object.
+ * Helper to get the inferred type of a config object.
  * TODO: when the UI gets the default values built-in, return them here
  */
 export const getPageConfig = <
diff --git a/panel/src/pages/SystemLogPage.tsx b/panel/src/pages/SystemLogPage.tsx
index 1eef3f677..710cc602f 100644
--- a/panel/src/pages/SystemLogPage.tsx
+++ b/panel/src/pages/SystemLogPage.tsx
@@ -13,10 +13,12 @@ import './LiveConsole/xtermOverrides.css';
 import '@xterm/xterm/css/xterm.css';
 import { openExternalLink } from '@/lib/navigation';
 import { handleHotkeyEvent } from '@/lib/hotkeyEventListener';
-import terminalOptions from './LiveConsole/xtermOptions';
+import xtermOptions from './LiveConsole/xtermOptions';
 import ScrollDownAddon from './LiveConsole/ScrollDownAddon';
 import LiveConsoleSearchBar from './LiveConsole/LiveConsoleSearchBar';
 import { useBackendApi } from '@/hooks/fetch';
+import { useIsDarkMode } from '@/hooks/theme';
+import { darkThemeColors, lightThemeColors } from './LiveConsole/liveConsoleColors';
 
 
 //Helpers
@@ -31,6 +33,7 @@ export default function SystemLogPage({ pageName }: SystemLogPageProps) {
     const [isLoading, setIsLoading] = useState(true);
     const [loadError, setLoadError] = useState('');
     const [showSearchBar, setShowSearchBar] = useState(false);
+    const isDarkTheme = useIsDarkMode();
     const refreshPage = useContentRefresh();
     const getLogsApi = useBackendApi<{ data: string }>({
         method: 'GET',
@@ -44,7 +47,10 @@ export default function SystemLogPage({ pageName }: SystemLogPageProps) {
      */
     const jumpBottomBtnRef = useRef<HTMLButtonElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
-    const term = useMemo(() => new Terminal(terminalOptions), []);
+    const term = useMemo(() => new Terminal({
+        ...xtermOptions,
+        theme: isDarkTheme ? darkThemeColors : lightThemeColors,
+    }), []);
     const fitAddon = useMemo(() => new FitAddon(), []);
     const searchAddon = useMemo(() => new SearchAddon(), []);
     const termLinkHandler = (event: MouseEvent, uri: string) => {
@@ -74,6 +80,14 @@ export default function SystemLogPage({ pageName }: SystemLogPageProps) {
     }
     useEventListener('resize', debounce(100, refitTerminal));
 
+    useEffect(() => {
+        if (term.element) {
+            term.options.theme = isDarkTheme ? darkThemeColors : lightThemeColors;
+            term.refresh(0, term.rows - 1);
+            refitTerminal();
+        }
+    }, [term, isDarkTheme]);
+
     useEffect(() => {
         if (containerRef.current && jumpBottomBtnRef.current && !term.element) {
             console.log('xterm init');
@@ -194,7 +208,7 @@ export default function SystemLogPage({ pageName }: SystemLogPageProps) {
     }
 
     return (
-        <div className="dark text-primary flex flex-col h-full w-full bg-card border md:rounded-xl overflow-clip">
+        <div className="text-primary flex flex-col h-full w-full bg-card border md:rounded-xl overflow-clip">
             <div className="flex flex-col flex-shrink px-1 sm:px-4 py-2 space-y-4 border-b">
                 <div className="flex items-center space-x-2">
                     <svg
diff --git a/panel/src/pages/TestingPage/TestingPage.tsx b/panel/src/pages/TestingPage/TestingPage.tsx
index 2a9f48a00..783cae7a0 100644
--- a/panel/src/pages/TestingPage/TestingPage.tsx
+++ b/panel/src/pages/TestingPage/TestingPage.tsx
@@ -12,6 +12,7 @@ import TmpSwr from "./TmpSwr";
 import { useEffect } from "react";
 import TmpJsonEditor from "./TmpJsonEditor";
 import TmpPageHeader from "./TmpPageHeader";
+import TmpLibraryShowcase from "./TmpLibraryShowcase";
 
 
 export default function TestingPage() {
@@ -23,15 +24,14 @@ export default function TestingPage() {
     // }, []);
 
     return <div className="flex flex-col gap-4 w-full">
-        <TmpFiller />
-        {/* <TmpTestTables /> */}
+        {/* <TmpColors /> */}
+        {/* <TmpLibraryShowcase /> */}
         {/* <TmpApi /> */}
         {/* <TmpToasts /> */}
         {/* <TmpSocket /> */}
         {/* <TmpWarningBarState /> */}
         {/* <TmpAuthState /> */}
         {/* <TmpMarkdown /> */}
-        {/* <TmpColors /> */}
         {/* <TmpDndSortable /> */}
         {/* <TmpSwr /> */}
         {/* <div className="mx-auto">
@@ -39,5 +39,6 @@ export default function TestingPage() {
         </div> */}
         {/* <TmpJsonEditor /> */}
         {/* <TmpPageHeader /> */}
+        {/* <TmpFiller /> */}
     </div>;
 }
diff --git a/panel/src/pages/TestingPage/TmpColors.tsx b/panel/src/pages/TestingPage/TmpColors.tsx
index cc7504c65..e4ab99163 100644
--- a/panel/src/pages/TestingPage/TmpColors.tsx
+++ b/panel/src/pages/TestingPage/TmpColors.tsx
@@ -1,48 +1,200 @@
 import { Button } from "@/components/ui/button";
 import { PersonStandingIcon } from "lucide-react";
 import TmpHexHslConverter from "./TmpHexHslConverter";
+import TxAnchor from "@/components/TxAnchor";
 
 export default function TmpColors() {
     return <>
-        <div className="mx-4 flex space-x-4">
-            <div className="space-y-2 w-48">
-                <div className="w-full p-1 bg-primary text-primary-foreground">primary</div>
-                <div className="w-full p-1 bg-secondary text-secondary-foreground">secondary</div>
-                <div className="w-full p-1 bg-muted text-muted-foreground">muted</div>
-                <div className="w-full p-1 bg-accent text-accent-foreground">accent</div>
-                <div className="w-full p-1 bg-card text-card-foreground border">card + border</div>
-                <div className="w-full p-1 bg-destructive text-destructive-foreground">destructive</div>
-                <div className="w-full p-1 bg-warning text-warning-foreground">warning</div>
-                <div className="w-full p-1 bg-success text-success-foreground">success</div>
-                <div className="w-full p-1 bg-info text-info-foreground">info</div>
+        <div className="mx-4 space-y-8">
+            {/* Header */}
+            <div className="text-center">
+                <h2 className="text-2xl font-bold mb-2">Color System Overview</h2>
+                <p className="text-muted-foreground text-sm">Semantic colors, hint backgrounds, and inline text variants</p>
             </div>
-            <div className="space-y-2 w-48">
-                <div className="w-full p-1 border text-destructive-inline">destructive</div>
-                <div className="w-full p-1 border text-warning-inline">warning</div>
-                <div className="w-full p-1 border text-success-inline">success</div>
-                <div className="w-full p-1 border text-info-inline">info</div>
-                <div className="w-full p-1 bg-card text-destructive-inline">destructive</div>
-                <div className="w-full p-1 bg-card text-warning-inline">warning</div>
-                <div className="w-full p-1 bg-card text-success-inline">success</div>
-                <div className="w-full p-1 bg-card text-info-inline">info</div>
-            </div>
-            <div className="border-l-2 border-border"></div>
-            <div className="space-y-2 flex flex-col items-center">
-                <Button size="sm" variant="default">default</Button>
-                <Button size="sm" variant="secondary">secondary</Button>
-                <Button size="sm" variant="destructive">destructive</Button>
-                <Button size="sm" variant="warning">warning</Button>
-                <Button size="sm" variant="success">success</Button>
-                <Button size="sm" variant="info">info</Button>
-                <Button size="sm" variant="outline">outline</Button>
-                <Button size="sm" variant="ghost">ghost</Button>
-                <Button size="sm" variant="link">link</Button>
-                <Button size="sm"><PersonStandingIcon /> icon</Button>
-                <Button size="sm" disabled>disabled</Button>
-                <Button size="icon" variant="outline"><PersonStandingIcon /></Button>
+
+            <div className="flex flex-wrap gap-8">
+                {/* Base Semantic Colors */}
+                <div className="space-y-3">
+                    <h3 className="text-lg font-semibold mb-3">Base Colors</h3>
+                    <div className="space-y-2 w-56">
+                        <div className="w-full p-3 bg-primary text-primary-foreground rounded">primary</div>
+                        <div className="w-full p-3 bg-secondary text-secondary-foreground rounded">secondary</div>
+                        <div className="w-full p-3 bg-muted text-muted-foreground rounded">muted</div>
+                        <div className="w-full p-3 bg-info text-info-foreground rounded">info</div>
+                        <div className="w-full p-3 bg-success text-success-foreground rounded">success</div>
+                        <div className="w-full p-3 bg-warning text-warning-foreground rounded">warning</div>
+                        <div className="w-full p-3 bg-destructive text-destructive-foreground rounded">destructive</div>
+                        <div className="w-full p-3 bg-accent text-accent-foreground rounded">accent</div>
+                        <div className="w-full p-3 bg-card text-card-foreground border rounded">card + border</div>
+                    </div>
+                </div>
+
+                {/* Hint Colors - For Toast/Warning Backgrounds */}
+                <div className="space-y-3">
+                    <h3 className="text-lg font-semibold mb-3">Hint Colors</h3>
+                    <p className="text-sm text-muted-foreground mb-3">Used for toast/warning backgrounds</p>
+                    <div className="space-y-2 w-56">
+                        <div className="w-full p-3 bg-info-hint rounded border border-info/70">
+                            <span className="font-medium">info-hint</span>
+                            <br />
+                            <span className="text-sm opacity-75">Toast background</span>
+                        </div>
+                        <div className="w-full p-3 bg-success-hint text-foreground rounded border border-success/70">
+                            <span className="font-medium">success-hint</span>
+                            <br />
+                            <span className="text-sm opacity-75">Toast background</span>
+                        </div>
+                        <div className="w-full p-3 bg-warning-hint text-foreground rounded border border-warning/70">
+                            <span className="font-medium">warning-hint</span>
+                            <br />
+                            <span className="text-sm opacity-75">Toast background</span>
+                        </div>
+                        <div className="w-full p-3 bg-destructive-hint text-foreground rounded border border-destructive/70">
+                            <span className="font-medium">destructive-hint</span>
+                            <br />
+                            <span className="text-sm opacity-75">Toast background</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Inline Text Colors */}
+                <div className="space-y-3">
+                    <h3 className="text-lg font-semibold mb-3">Inline Text Colors</h3>
+                    <p className="text-sm text-muted-foreground mb-3">Better contrast for text on light mode</p>
+                    <div className="space-y-2 w-56">
+                        {/* On default background */}
+                        <div className="space-y-2 p-3 bg-background border rounded">
+                            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">On Background</div>
+                            <div className="text-info-inline">info-inline text</div>
+                            <div className="text-success-inline">success-inline text</div>
+                            <div className="text-warning-inline">warning-inline text</div>
+                            <div className="text-destructive-inline">destructive-inline text</div>
+                        </div>
+
+                        {/* On card background */}
+                        <div className="space-y-2 p-3 bg-card border rounded">
+                            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">On Card</div>
+                            <div className="text-info-inline">info-inline text</div>
+                            <div className="text-success-inline">success-inline text</div>
+                            <div className="text-warning-inline">warning-inline text</div>
+                            <div className="text-destructive-inline">destructive-inline text</div>
+                        </div>
+
+                        {/* Comparison with regular colors */}
+                        <div className="space-y-2 p-3 bg-card border rounded">
+                            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Regular vs Inline</div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-destructive">regular</span>
+                                <span className="text-destructive-inline">inline</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-warning">regular</span>
+                                <span className="text-warning-inline">inline</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Button Variants by Color */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-semibold mb-3">Button Variants by Color</h3>
+
+                    {/* Primary/Default */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Primary</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="default">default</Button>
+                            <Button size="sm" variant="outline">outline</Button>
+                            <Button size="sm" variant="ghost">ghost</Button>
+                        </div>
+                    </div>
+
+                    {/* Secondary */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Secondary</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="secondary">secondary</Button>
+                            <Button size="sm" variant="outline-secondary">outline-secondary</Button>
+                            <Button size="sm" variant="ghost-secondary">ghost-secondary</Button>
+                        </div>
+                    </div>
+
+                    {/* Destructive */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Destructive</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="destructive">destructive</Button>
+                            <Button size="sm" variant="outline-destructive">outline-destructive</Button>
+                            <Button size="sm" variant="ghost-destructive">ghost-destructive</Button>
+                        </div>
+                    </div>
+
+                    {/* Warning */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Warning</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="warning">warning</Button>
+                            <Button size="sm" variant="outline-warning">outline-warning</Button>
+                            <Button size="sm" variant="ghost-warning">ghost-warning</Button>
+                        </div>
+                    </div>
+
+                    {/* Success */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Success</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="success">success</Button>
+                            <Button size="sm" variant="outline-success">outline-success</Button>
+                            <Button size="sm" variant="ghost-success">ghost-success</Button>
+                        </div>
+                    </div>
+
+                    {/* Info */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Info</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="info">info</Button>
+                            <Button size="sm" variant="outline-info">outline-info</Button>
+                            <Button size="sm" variant="ghost-info">ghost-info</Button>
+                        </div>
+                    </div>
+
+                    {/* Muted */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Muted</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" variant="muted">muted</Button>
+                            <Button size="sm" variant="outline-muted">outline-muted</Button>
+                            <Button size="sm" variant="ghost-muted">ghost-muted</Button>
+                        </div>
+                    </div>
+
+                    {/* Special Variants */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Special</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <Button size="sm" disabled>disabled</Button>
+                            <Button size="sm"><PersonStandingIcon className="w-4 h-4 mr-1" />with icon</Button>
+                            <Button size="icon" variant="outline"><PersonStandingIcon /></Button>
+                            <Button size="sm" variant="link">link</Button>
+                            <TxAnchor href="https://www.google.com">external link</TxAnchor>
+                        </div>
+                    </div>
+
+                    {/* Anchors */}
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Anchors</h4>
+                        <div className="flex flex-wrap gap-2">
+                            <TxAnchor href="/settings">internal link</TxAnchor>
+                            <TxAnchor href="https://www.google.com">external link</TxAnchor>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div className="border-l-2 border-border"></div>
-            <div>
+
+            {/* Color Converter Tool */}
+            <div className="border-t pt-6">
+                <h3 className="text-lg font-semibold mb-3">Color Converter</h3>
                 <TmpHexHslConverter />
             </div>
         </div>
diff --git a/panel/src/pages/TestingPage/TmpLibraryShowcase.tsx b/panel/src/pages/TestingPage/TmpLibraryShowcase.tsx
new file mode 100644
index 000000000..16ed53d2b
--- /dev/null
+++ b/panel/src/pages/TestingPage/TmpLibraryShowcase.tsx
@@ -0,0 +1,431 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import SwitchText from "@/components/SwitchText";
+import InlineCode from "@/components/InlineCode";
+import TxAnchor from "@/components/TxAnchor";
+import DateTimeCorrected from "@/components/DateTimeCorrected";
+import { DynamicNewBadge, DynamicNewItem } from "@/components/DynamicNewBadge";
+import { 
+    PersonStandingIcon, 
+    AlertTriangleIcon, 
+    InfoIcon, 
+    CheckCircleIcon, 
+    XCircleIcon
+} from "lucide-react";
+
+export default function TmpLibraryShowcase() {
+    return (
+        <div className="mx-4 space-y-12 pb-8">
+            {/* Header */}
+            <div className="text-center space-y-2">
+                <h1 className="text-4xl font-bold">UI Library Showcase</h1>
+                <p className="text-muted-foreground">A <i>not at all</i> comprehensive overview of some UI components</p>
+            </div>
+
+            {/* Buttons Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">Buttons</h2>
+                
+                {/* Button Variants */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Variants</h3>
+                    <div className="flex flex-wrap gap-3">
+                        <Button variant="default">Default</Button>
+                        <Button variant="secondary">Secondary</Button>
+                        <Button variant="muted">Muted</Button>
+                        <Button variant="destructive">Destructive</Button>
+                        <Button variant="warning">Warning</Button>
+                        <Button variant="success">Success</Button>
+                        <Button variant="info">Info</Button>
+                        <Button variant="outline">Outline</Button>
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="link">Link</Button>
+                    </div>
+                </div>
+
+                {/* Button Sizes */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Sizes</h3>
+                    <div className="flex flex-wrap items-center gap-3">
+                        <Button size="icon"><PersonStandingIcon /></Button>
+                        <Button size="inline">Inline</Button>
+                        <Button size="xs">Extra Small</Button>
+                        <Button size="sm">Small</Button>
+                        <Button size="default">Default</Button>
+                        <Button size="lg">Large</Button>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                        <InlineCode>inline</InlineCode> is custom - useful for inline text buttons like "click <Button size="inline" variant="link">here</Button> to continue".
+                    </p>
+                </div>
+
+                {/* Ghost Variants */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Ghost Variants</h3>
+                    <div className="flex flex-wrap gap-3">
+                        <Button variant="ghost">Ghost</Button>
+                        <Button variant="ghost-secondary">Ghost Secondary</Button>
+                        <Button variant="ghost-destructive">Ghost Destructive</Button>
+                        <Button variant="ghost-warning">Ghost Warning</Button>
+                        <Button variant="ghost-success">Ghost Success</Button>
+                        <Button variant="ghost-info">Ghost Info</Button>
+                        <Button variant="ghost-muted">Ghost Muted</Button>
+                    </div>
+                </div>
+
+                {/* Outline Variants */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Outline Variants</h3>
+                    <div className="flex flex-wrap gap-3">
+                        <Button variant="outline">Outline</Button>
+                        <Button variant="outline-secondary">Outline Secondary</Button>
+                        <Button variant="outline-destructive">Outline Destructive</Button>
+                        <Button variant="outline-warning">Outline Warning</Button>
+                        <Button variant="outline-success">Outline Success</Button>
+                        <Button variant="outline-info">Outline Info</Button>
+                        <Button variant="outline-muted">Outline Muted</Button>
+                    </div>
+                </div>
+
+                {/* Button States */}
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">States</h3>
+                    <div className="flex flex-wrap gap-3">
+                        <Button>Normal</Button>
+                        <Button disabled>Disabled</Button>
+                        <Button><PersonStandingIcon className="mr-2 h-4 w-4" />With Icon</Button>
+                    </div>
+                </div>
+            </section>
+
+            {/* Form Inputs Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">Form Inputs</h2>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {/* Text Inputs */}
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-medium">Text Inputs</h3>
+                        <div className="space-y-3">
+                            <Input placeholder="Default input" />
+                            <Input placeholder="Email input" type="email" />
+                            <Input placeholder="Password input" type="password" />
+                            <Input placeholder="Disabled input" disabled />
+                            <Input placeholder="Input with value" defaultValue="Sample text" />
+                        </div>
+                    </div>
+
+                    {/* Textarea */}
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-medium">Textarea</h3>
+                        <div className="space-y-3">
+                            <Textarea placeholder="Default textarea" />
+                            <Textarea placeholder="Disabled textarea" disabled />
+                            <Textarea placeholder="Textarea with content" defaultValue="This is some sample content in the textarea component." />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Checkboxes and Switches */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-medium">Checkboxes</h3>
+                        <div className="space-y-3">
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="checkbox1" />
+                                <label htmlFor="checkbox1" className="text-sm font-medium">Default checkbox</label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="checkbox2" defaultChecked />
+                                <label htmlFor="checkbox2" className="text-sm font-medium">Checked checkbox</label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <Checkbox id="checkbox3" disabled />
+                                <label htmlFor="checkbox3" className="text-sm font-medium text-muted-foreground">Disabled checkbox</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-medium">Switches</h3>
+                        <div className="space-y-3">
+                            <div className="flex items-center space-x-2">
+                                <Switch id="switch1" />
+                                <label htmlFor="switch1" className="text-sm font-medium">Default switch</label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <Switch id="switch2" defaultChecked />
+                                <label htmlFor="switch2" className="text-sm font-medium">Checked switch</label>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <Switch id="switch3" disabled />
+                                <label htmlFor="switch3" className="text-sm font-medium text-muted-foreground">Disabled switch</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Badges Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">Badges</h2>
+                
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Badge Variants</h3>
+                    <div className="flex flex-wrap gap-3">
+                        <Badge variant="default">Default</Badge>
+                        <Badge variant="secondary">Secondary</Badge>
+                        <Badge variant="destructive">Destructive</Badge>
+                        <Badge variant="outline">Outline</Badge>
+                    </div>
+                </div>
+
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Usage Examples</h3>
+                    <div className="flex flex-wrap gap-3">
+                        <Badge>New</Badge>
+                        <Badge variant="destructive">Error</Badge>
+                        <Badge variant="secondary">Beta</Badge>
+                        <Badge variant="outline">Coming Soon</Badge>
+                        <Badge>v2.1.0</Badge>
+                        <Badge variant="secondary">Online</Badge>
+                    </div>
+                </div>
+            </section>
+
+            {/* Alerts Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">Alerts</h2>
+                
+                <div className="space-y-4">
+                    <Alert variant="default">
+                        <InfoIcon className="h-4 w-4" />
+                        <AlertTitle>Default Alert</AlertTitle>
+                        <AlertDescription>
+                            This is a default alert with some information for the user.
+                        </AlertDescription>
+                    </Alert>
+
+                    <Alert variant="info">
+                        <InfoIcon className="h-4 w-4" />
+                        <AlertTitle>Information</AlertTitle>
+                        <AlertDescription>
+                            This is an informational alert that provides helpful context.
+                        </AlertDescription>
+                    </Alert>
+
+                    <Alert variant="success">
+                        <CheckCircleIcon className="h-4 w-4" />
+                        <AlertTitle>Success</AlertTitle>
+                        <AlertDescription>
+                            Your action was completed successfully!
+                        </AlertDescription>
+                    </Alert>
+
+                    <Alert variant="warning">
+                        <AlertTriangleIcon className="h-4 w-4" />
+                        <AlertTitle>Warning</AlertTitle>
+                        <AlertDescription>
+                            Please review this information carefully before proceeding.
+                        </AlertDescription>
+                    </Alert>
+
+                    <Alert variant="destructive">
+                        <XCircleIcon className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>
+                            An error occurred while processing your request. Please try again.
+                        </AlertDescription>
+                    </Alert>
+                </div>
+            </section>
+
+            {/* SwitchText Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">SwitchText <Badge variant="outline">Custom</Badge></h2>
+                <p className="text-sm text-muted-foreground">
+                    A custom Switch component that shows different labels based on state, with semantic color variants.
+                </p>
+                
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">Color Variants</h3>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <div className="space-y-2">
+                            <SwitchText checkedLabel="Default On" uncheckedLabel="Default Off" defaultChecked />
+                            <p className="text-xs text-muted-foreground">variant="default"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="checkedGreen" checkedLabel="Enabled" uncheckedLabel="Disabled" defaultChecked />
+                            <p className="text-xs text-muted-foreground">variant="checkedGreen"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="checkedYellow" checkedLabel="Warning On" uncheckedLabel="Warning Off" defaultChecked />
+                            <p className="text-xs text-muted-foreground">variant="checkedYellow"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="checkedRed" checkedLabel="Danger On" uncheckedLabel="Danger Off" defaultChecked />
+                            <p className="text-xs text-muted-foreground">variant="checkedRed"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="uncheckedGreen" checkedLabel="Off" uncheckedLabel="Safe" />
+                            <p className="text-xs text-muted-foreground">variant="uncheckedGreen"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="uncheckedYellow" checkedLabel="Off" uncheckedLabel="Warning" />
+                            <p className="text-xs text-muted-foreground">variant="uncheckedYellow"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="uncheckedRed" checkedLabel="Off" uncheckedLabel="Danger" />
+                            <p className="text-xs text-muted-foreground">variant="uncheckedRed"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="redGreen" checkedLabel="Enabled" uncheckedLabel="Disabled" defaultChecked />
+                            <p className="text-xs text-muted-foreground">variant="redGreen"</p>
+                        </div>
+                        <div className="space-y-2">
+                            <SwitchText variant="greenRed" checkedLabel="Danger!" uncheckedLabel="Safe" />
+                            <p className="text-xs text-muted-foreground">variant="greenRed"</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* InlineCode & TxAnchor Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">Text Components <Badge variant="outline">Custom</Badge></h2>
+                
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">InlineCode</h3>
+                    <p className="text-sm">
+                        Use <InlineCode>InlineCode</InlineCode> for inline code snippets like <InlineCode>npm install</InlineCode> or variable names like <InlineCode>myVariable</InlineCode>.
+                    </p>
+                </div>
+
+                <div className="space-y-4">
+                    <h3 className="text-lg font-medium">TxAnchor</h3>
+                    <p className="text-muted-foreground">
+                        Smart anchor component that handles internal navigation and external links properly.
+                    </p>
+
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Normal text size:</h4>
+                        <p>
+                            Lorem ipsum dolor <TxAnchor href="/players">Example</TxAnchor>: internal link.
+                        </p>
+                        <p>
+                            Lorem ipsum dolor <TxAnchor href="https://github.com/tabarra/txAdmin">Example</TxAnchor>: external link.
+                        </p>
+                    </div>
+
+                    <div className="space-y-2">
+                        <h4 className="text-sm font-medium text-muted-foreground">Small text size (text-sm):</h4>
+                        <p className="text-sm">
+                            Lorem ipsum dolor <TxAnchor href="/dashboard">Example</TxAnchor>: internal link.
+                        </p>
+                        <p className="text-sm">
+                            Lorem ipsum dolor <TxAnchor href="https://discord.gg/txAdmin">Example</TxAnchor>: external link.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* DateTimeCorrected Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">DateTimeCorrected <Badge variant="outline">Custom</Badge></h2>
+                <p className="text-sm text-muted-foreground">
+                    Displays timestamps corrected for server/client clock drift. Hover for full date/time.
+                </p>
+                
+                <div className="space-y-4">
+                    <div className="flex flex-wrap gap-6">
+                        <div className="space-y-1">
+                            <p className="text-xs text-muted-foreground">Date + Time (default)</p>
+                            <DateTimeCorrected 
+                                tsFetch={Date.now()} 
+                                tsObject={Date.now() - 3600000} 
+                                serverTime={Date.now()} 
+                            />
+                        </div>
+                        <div className="space-y-1">
+                            <p className="text-xs text-muted-foreground">Date only</p>
+                            <DateTimeCorrected 
+                                tsFetch={Date.now()} 
+                                tsObject={Date.now() - 86400000 * 3} 
+                                serverTime={Date.now()}
+                                isDateOnly
+                            />
+                        </div>
+                        <div className="space-y-1">
+                            <p className="text-xs text-muted-foreground">With clock drift warning</p>
+                            <DateTimeCorrected 
+                                tsFetch={Date.now()} 
+                                tsObject={Date.now() - 3600000} 
+                                serverTime={Date.now() + 600000}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* DynamicNewBadge Section */}
+            <section className="space-y-6">
+                <h2 className="text-2xl font-semibold border-b pb-2">DynamicNewBadge & DynamicNewItem <Badge variant="outline">Custom</Badge></h2>
+                
+                <div className="space-y-4">
+                    <Alert variant="info">
+                        <InfoIcon className="h-4 w-4" />
+                        <AlertTitle>Time-based visibility</AlertTitle>
+                        <AlertDescription>
+                            These components show content for a limited time after first view. The timestamp is stored in localStorage per feature name.
+                            In dev mode (<InlineCode>showAdvanced</InlineCode>), they always show.
+                        </AlertDescription>
+                    </Alert>
+
+                    <div className="space-y-2">
+                        <h3 className="text-lg font-medium">DynamicNewBadge</h3>
+                        <p className="text-sm text-muted-foreground">
+                            Shows a "NEW" badge for X days (default 3) after first seen. Use for highlighting new features in menus/settings.
+                        </p>
+                        <div className="flex items-center gap-4 p-3 border rounded-lg">
+                            <span>Feature Name</span>
+                            <DynamicNewBadge featName="showcase-example-1" durationDays={365} />
+                            <span className="text-muted-foreground">|</span>
+                            <span>Another Feature</span>
+                            <DynamicNewBadge featName="showcase-example-2" size="xs" durationDays={365} />
+                        </div>
+                        <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
+{`<DynamicNewBadge featName="unique-feature-id" durationDays={14} />
+<DynamicNewBadge featName="another-feature" size="xs" badgeText="BETA" />`}
+                        </pre>
+                    </div>
+
+                    <div className="space-y-2">
+                        <h3 className="text-lg font-medium">DynamicNewItem</h3>
+                        <p className="text-sm text-muted-foreground">
+                            Wrapper that conditionally renders children for X days. Use for temporary promotional content or feature highlights.
+                        </p>
+                        <div className="p-3 border rounded-lg">
+                            <DynamicNewItem featName="showcase-example-3" durationDays={365}>
+                                <Alert variant="success">
+                                    <CheckCircleIcon className="h-4 w-4" />
+                                    <AlertTitle>This entire alert is wrapped in DynamicNewItem</AlertTitle>
+                                    <AlertDescription>It will disappear after the duration expires.</AlertDescription>
+                                </Alert>
+                            </DynamicNewItem>
+                        </div>
+                        <pre className="text-xs bg-muted p-2 rounded overflow-x-auto">
+{`<DynamicNewItem featName="promo-banner" durationDays={7}>
+    <Alert>Your promotional content here</Alert>
+</DynamicNewItem>`}
+                        </pre>
+                    </div>
+                </div>
+            </section>
+        </div>
+    );
+}
diff --git a/panel/src/pages/TestingPage/TmpWarningBarState.tsx b/panel/src/pages/TestingPage/TmpWarningBarState.tsx
index 816bd241b..8411e5cb2 100644
--- a/panel/src/pages/TestingPage/TmpWarningBarState.tsx
+++ b/panel/src/pages/TestingPage/TmpWarningBarState.tsx
@@ -16,11 +16,8 @@ export default function TmpWarningBarState() {
                 <CardTitle>Warning Bar States</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
-                <div className="space-y-2 rounded border p-2">
-                    <pre className="bg-muted p-2">
-                        {JSON.stringify(offlineWarning, null, 2)}
-                    </pre>
-                    <div className="flex justify-start gap-3 border-t pt-2">
+                <div className="space-y-2 divide-y-2 rounded border p-2">
+                    <div className="flex justify-start gap-3">
                         <Button size="sm" onClick={() => setOfflineWarning(false)}>
                             Socket On
                         </Button>
@@ -28,21 +25,21 @@ export default function TmpWarningBarState() {
                             Socket Off
                         </Button>
                     </div>
-                </div>
-
-                <div className="space-y-2 rounded border p-2">
                     <pre className="bg-muted p-2">
-                        {JSON.stringify(txUpdateData, null, 2)}
+                        {JSON.stringify(offlineWarning, null, 2)}
                     </pre>
-                    <div className="flex justify-start gap-3 border-t pt-2">
+                </div>
+
+                <div className="space-y-2 divide-y-2 rounded border p-2">
+                    <div className="flex justify-start gap-3">
                         <Button size="sm" onClick={() => setTxUpdateData({
-                            version: 'v7.0.1',
+                            version: '7.0.1',
                             isImportant: false,
                         })}>
                             txa Minor Update
                         </Button>
                         <Button size="sm" onClick={() => setTxUpdateData({
-                            version: 'v8.0.0',
+                            version: '8.0.0',
                             isImportant: true,
                         })}>
                             txa Major Update
@@ -51,21 +48,21 @@ export default function TmpWarningBarState() {
                             txa No Update
                         </Button>
                     </div>
-                </div>
-
-                <div className="space-y-2 rounded border p-2">
                     <pre className="bg-muted p-2">
-                        {JSON.stringify(fxUpdateData, null, 2)}
+                        {JSON.stringify(txUpdateData, null, 2)}
                     </pre>
-                    <div className="flex justify-start gap-3 border-t pt-2">
+                </div>
+
+                <div className="space-y-2 divide-y-2 rounded border p-2">
+                    <div className="flex justify-start gap-3">
                         <Button size="sm" onClick={() => setFxUpdateData({
-                            version: 'v7.0.1',
+                            version: '7.0.1',
                             isImportant: false,
                         })}>
                             fxs Minor Update
                         </Button>
                         <Button size="sm" onClick={() => setFxUpdateData({
-                            version: 'v8.0.0',
+                            version: '8.0.0',
                             isImportant: true,
                         })}>
                             fxs Major Update
@@ -74,6 +71,9 @@ export default function TmpWarningBarState() {
                             fxs No Update
                         </Button>
                     </div>
+                    <pre className="bg-muted p-2">
+                        {JSON.stringify(fxUpdateData, null, 2)}
+                    </pre>
                 </div>
             </CardContent>
         </Card>
diff --git a/panel/src/pages/auth/AddMasterCallback.tsx b/panel/src/pages/auth/AddMasterCallback.tsx
index 1e3286620..5e50c1c95 100644
--- a/panel/src/pages/auth/AddMasterCallback.tsx
+++ b/panel/src/pages/auth/AddMasterCallback.tsx
@@ -14,6 +14,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import consts from "@shared/consts";
 import { fetchWithTimeout } from "@/hooks/fetch";
 import { LogoutReasonHash } from "./Login";
+import { LocalStorageKey } from "@/lib/localStorage";
 
 
 function RegisterForm({ fivemId, fivemName, profilePicture }: ApiAddMasterCallbackFivemData) {
@@ -104,7 +105,7 @@ function RegisterForm({ fivemId, fivemName, profilePicture }: ApiAddMasterCallba
     //Prefill password if dev pass enabled
     useEffect(() => {
         try {
-            const rawLocalStorageStr = localStorage.getItem('authCredsAutofill');
+            const rawLocalStorageStr = localStorage.getItem(LocalStorageKey.AuthCredsAutofill);
             if (rawLocalStorageStr) {
                 const [user, pass] = JSON.parse(rawLocalStorageStr);
                 passwordRef.current!.value = pass ?? '';
@@ -176,7 +177,7 @@ function RegisterForm({ fivemId, fivemName, profilePicture }: ApiAddMasterCallba
                     htmlFor="terms"
                     className="text-sm font-medium leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                 >
-                    I have read and agree to the <a href="https://fivem.net/terms" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">Creator PLA</a> as well as the <a href="https://github.com/tabarra/txAdmin/blob/master/LICENSE" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">txAdmin License</a>.
+                    I have read and agree to the <a href="https://fivem.net/terms" target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">Creator PLA</a>.
                 </label>
             </div>
         </CardContent>
diff --git a/panel/src/pages/auth/Login.tsx b/panel/src/pages/auth/Login.tsx
index e56fc00c0..546389fce 100644
--- a/panel/src/pages/auth/Login.tsx
+++ b/panel/src/pages/auth/Login.tsx
@@ -11,6 +11,7 @@ import { useLocation } from "wouter";
 import { fetchWithTimeout } from '@/hooks/fetch';
 import { processFetchError } from './errors';
 import { ServerGlowIcon } from '@/components/serverIcon';
+import { LocalStorageKey } from '@/lib/localStorage';
 
 
 function HeaderNoServer() {
@@ -138,7 +139,7 @@ export default function Login() {
     //Prefill username/password if dev pass enabled
     useEffect(() => {
         try {
-            const rawLocalStorageStr = localStorage.getItem('authCredsAutofill');
+            const rawLocalStorageStr = localStorage.getItem(LocalStorageKey.AuthCredsAutofill);
             if (rawLocalStorageStr) {
                 const [user, pass] = JSON.parse(rawLocalStorageStr);
                 usernameRef.current!.value = user ?? '';
diff --git a/panel/src/pages/auth/errors.tsx b/panel/src/pages/auth/errors.tsx
index 06ef5510b..b30caa516 100644
--- a/panel/src/pages/auth/errors.tsx
+++ b/panel/src/pages/auth/errors.tsx
@@ -122,6 +122,11 @@ export const processFetchError = (error: any) => {
             errorTitle: 'Network Error',
             errorMessage: 'If you closed txAdmin, please restart it and try again.',
         };
+    } else if(error.message?.startsWith('AbortSignal.timeout')) {
+        return {
+            errorTitle: 'Browser Outdated',
+            errorMessage: 'The version of this browser is too old to use txAdmin. Please download a new version of Edge, Chrome, Firefox, etc. and try again.',
+        };
     } else {
         return {
             errorTitle: 'Unknown Error',
diff --git a/panel/tailwind.config.cjs b/panel/tailwind.config.cjs
index 27eb5ff26..d517e2d79 100644
--- a/panel/tailwind.config.cjs
+++ b/panel/tailwind.config.cjs
@@ -62,6 +62,7 @@ module.exports = {
       screens: {
         xs: "480px",
         "2xl": "1400px",
+        "3xl": "1600px",
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
diff --git a/resource/sv_initialData.lua b/resource/sv_initialData.lua
index 57490fb00..7a51a8405 100644
--- a/resource/sv_initialData.lua
+++ b/resource/sv_initialData.lua
@@ -1,3 +1,7 @@
+-- Prevent running in monitor mode
+if not TX_SERVER_MODE then return end
+
+
 --[[ Helper Functions ]] --
 local function logError(x)
     txPrint("^1" .. x)
diff --git a/resource/sv_main.lua b/resource/sv_main.lua
index db6542246..d6e24a4b3 100644
--- a/resource/sv_main.lua
+++ b/resource/sv_main.lua
@@ -281,12 +281,14 @@ end
 
 -- Event so the client can ack the warning
 RegisterNetEvent('txsv:ackWarning', function(actionId)
-    if pendingWarnings[tostring(source)] == actionId then
+    if type(actionId) ~= 'string' then return end
+    local srcStr = tostring(source)
+    if pendingWarnings[srcStr] == actionId then
         PrintStructuredTrace(json.encode({
             type = 'txAdminAckWarning',
             actionId = actionId,
         }))
-        pendingWarnings[tostring(source)] = nil
+        pendingWarnings[srcStr] = nil
     end
 end)
 
diff --git a/scripts/build/dev.ts b/scripts/build/dev.ts
index 385120ecd..bd214d85f 100644
--- a/scripts/build/dev.ts
+++ b/scripts/build/dev.ts
@@ -57,7 +57,7 @@ fs.writeFileSync(path.join(fxsPaths.monitor, 'package.json'), '{"type":"commonjs
 //Create txAdmin process runner
 const txInstance = new TxAdminRunner(fxsPaths.root, fxsPaths.bin, txDevEnv);
 
-//Listens on stdin for the key 'r'
+//Listens on stdin for commands
 process.stdin.on('data', (data) => {
     const cmd = data.toString().toLowerCase().trim();
     if (cmd === 'r' || cmd === 'rr') {
diff --git a/scripts/core-quick-build-copy.sh b/scripts/core-quick-build-copy.sh
new file mode 100644
index 000000000..b687cca72
--- /dev/null
+++ b/scripts/core-quick-build-copy.sh
@@ -0,0 +1,23 @@
+#!/bin/bash
+
+set -e
+
+# Building
+GITHUB_REF="refs/tags/v7.7.7" npx tsx scripts/build/publish.ts
+
+# Windows
+TARGET_PATH_WIN=/e/FiveM/28108/citizen/system_resources/monitor
+echo "Copying build files to ${TARGET_PATH_WIN}..."
+rm -rf "${TARGET_PATH_WIN}/core"
+mkdir -p $TARGET_PATH_WIN
+cp -r ./dist/core $TARGET_PATH_WIN
+
+# Container
+TARGET_PATH_DOCKER=/c/Users/tabarra/Desktop/PROGRAMMING/fxserver-container/server/alpine/opt/cfx-server/citizen/system_resources/monitor
+echo "Copying build files to ${TARGET_PATH_DOCKER}..."
+rm -rf "${TARGET_PATH_DOCKER}/core"
+mkdir -p $TARGET_PATH_DOCKER
+cp -r ./dist/core $TARGET_PATH_DOCKER
+
+
+echo "Done."
diff --git a/scripts/dev/makeConsoleLightTheme.ts b/scripts/dev/makeConsoleLightTheme.ts
new file mode 100644
index 000000000..65b5dc279
--- /dev/null
+++ b/scripts/dev/makeConsoleLightTheme.ts
@@ -0,0 +1,230 @@
+/**
+ * This script makes the live console light theme colors
+ * NOTE: The debug part is meant to run in the browser console
+ */
+type RgbColor = { r: number, g: number, b: number };
+
+//MARK: Dark Colors
+//From legacy systemLog.ejs, based on the ANSI-UP colors
+//Copy of the one in panel/src/pages/LiveConsole/liveConsoleColors.ts
+const ansi16ColorsDark = {
+    black: '#000000',
+    brightBlack: '#555555',
+    red: '#D62341',
+    brightRed: '#FF5370',
+    green: '#9ECE58',
+    brightGreen: '#C3E88D',
+    yellow: '#FAED70',
+    brightYellow: '#FFCB6B',
+    blue: '#396FE2',
+    brightBlue: '#82AAFF',
+    magenta: '#BB80B3',
+    brightMagenta: '#C792EA',
+    cyan: '#2DDAFD',
+    brightCyan: '#89DDFF',
+    white: '#D0D0D0',
+    brightWhite: '#FFFFFF',
+};
+
+
+//MARK: Utils
+const rgbToHwb = ({ r, g, b }: RgbColor) => {
+    const rn = r / 255, gn = g / 255, bn = b / 255;
+    const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
+    let h = 0;
+    if (max !== min) {
+        if (max === rn) {
+            h = 60 * (((gn - bn) / (max - min)) % 6);
+        } else if (max === gn) {
+            h = 60 * (((bn - rn) / (max - min)) + 2);
+        } else {
+            h = 60 * (((rn - gn) / (max - min)) + 4);
+        }
+        if (h < 0) h += 360;
+    }
+    const w = min;
+    const bl = 1 - max;
+    return { h, w, b: bl };
+};
+
+const hwbToRgb = (h: number, w: number, bl: number) => {
+    // Convert HWB to HSV first:
+    const v = 1 - bl;
+    const s = v === 0 ? 0 : 1 - w / v;
+
+    // Then convert HSV to RGB
+    const c = v * s;
+    const hh = h / 60;
+    const x = c * (1 - Math.abs((hh % 2) - 1));
+    let r1 = 0, g1 = 0, b1 = 0;
+    if (hh >= 0 && hh < 1) {
+        r1 = c; g1 = x; b1 = 0;
+    } else if (hh >= 1 && hh < 2) {
+        r1 = x; g1 = c; b1 = 0;
+    } else if (hh >= 2 && hh < 3) {
+        r1 = 0; g1 = c; b1 = x;
+    } else if (hh >= 3 && hh < 4) {
+        r1 = 0; g1 = x; b1 = c;
+    } else if (hh >= 4 && hh < 5) {
+        r1 = x; g1 = 0; b1 = c;
+    } else if (hh >= 5 && hh < 6) {
+        r1 = c; g1 = 0; b1 = x;
+    }
+    const m = v - c;
+    return {
+        r: Math.round((r1 + m) * 255),
+        g: Math.round((g1 + m) * 255),
+        b: Math.round((b1 + m) * 255),
+    };
+};
+
+const rgbToHex = ({ r, g, b }: RgbColor) => {
+    const toHex = (n: number) => n.toString(16).padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+};
+
+const hexToRgb = (hex: string) => {
+    const bigint = parseInt(hex.replace('#', ''), 16);
+    return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };
+}
+
+
+//MARK: Extended ANSI palette
+const ansi256Dark: RgbColor[] = [];
+// Color cube: 216 colors from index 16 to 231
+for (let r = 0; r < 6; r++) {
+    for (let g = 0; g < 6; g++) {
+        for (let b = 0; b < 6; b++) {
+            ansi256Dark.push({
+                r: r === 0 ? 0 : r * 40 + 55, // slightly adjusted formula sometimes used
+                g: g === 0 ? 0 : g * 40 + 55,
+                b: b === 0 ? 0 : b * 40 + 55,
+            });
+        }
+    }
+}
+// Grayscale ramp: 24 shades from index 232 to 255
+for (let i = 0; i < 24; i++) {
+    const gray = 8 + i * 10;
+    ansi256Dark.push({ r: gray, g: gray, b: gray });
+}
+
+
+//MARK: Computing Colors
+const invertHwb = ({ r, g, b }: RgbColor, ansi16 = false) => {
+    if (r === g && g === b) {
+        // For grayscale colors, directly invert the value
+        const newK = 255 - r;
+        const bgCardOffset = 13.3333333333; //255-((240+241+244)/3)
+        const clampedK = Math.round(Math.min(255, Math.max(bgCardOffset, newK)));
+        return { r: clampedK, g: clampedK, b: clampedK };
+    }
+    let { h, w, b: bl } = rgbToHwb({ r, g, b });
+    const factors = ansi16
+        ? { w: 0.1, b: 0.2 } //timestamp, info marker, normal text, most ^n colors
+        : { w: 0.2, b: 0.35 }; //channel tags, other markers
+    const newW = w * factors.w;
+    const newB = bl + (1 - bl) * factors.b;
+    return hwbToRgb(h, newW, newB);
+};
+
+
+const ansi256Light: RgbColor[] = ansi256Dark.map(color => invertHwb(color));
+const ansi256LightHex = ansi256Light.map(rgbToHex);
+const ansi16ColorsLight = Object.fromEntries(
+    Object.entries(ansi16ColorsDark).map(([key, value]) => [key, rgbToHex(invertHwb(hexToRgb(value), true))])
+);
+
+
+//MARK: Debug
+const getConsoleStyle = (bg: string, fg = 'black') => `background-color: ${bg}; color: ${fg}; padding: 0.5em;`;
+const bgResetStyle = 'background-color: white';
+// console.clear();
+const baseColorsDark = {
+    background: '#222326', //card bg
+    foreground: '#F8F8F8', //primary
+}
+const baseColorsLight = {
+    background: '#F0F1F4', //card bg
+    foreground: '#16171B', //primary
+}
+
+//Debugging background colors
+for (let index = 0; index < 240; index++) {
+    if (index % 10 !== 0) continue;
+    const before = rgbToHex(ansi256Dark[index]);
+    const after = rgbToHex(ansi256Light[index]);
+    const space = ' '.repeat(10);
+    const bgString = `%c${space}%c %c${space}`;
+    const fgString = `%clorem ipsum%c %clorem ipsum`;
+    console.log(
+        `${index+16}\tbg:${bgString}%c\tfg:${fgString}`,
+        getConsoleStyle(before),
+        bgResetStyle,
+        getConsoleStyle(after),
+        bgResetStyle,
+
+        getConsoleStyle(baseColorsDark.background, before),
+        bgResetStyle,
+        getConsoleStyle(baseColorsLight.background, after),
+        {before, after}
+    );
+}
+
+
+//MARK: Converting
+// // Find the nearest ANSI 256 color for a given RGB
+// const rgbToAnsi256 = ({ r, g, b }: RgbColor) => {
+//     let bestIndex = 0;
+//     let bestDistance = Infinity;
+//     for (let i = 0; i < ansi256Dark.length; i++) {
+//         const color = ansi256Dark[i];
+//         const dr = r - color.r;
+//         const dg = g - color.g;
+//         const db = b - color.b;
+//         const distance = dr * dr + dg * dg + db * db;
+//         if (distance < bestDistance) {
+//             bestDistance = distance;
+//             bestIndex = i;
+//         }
+//     }
+//     return bestIndex;
+// };
+
+// const ogColorHex = '#E6B863';
+// const ogColorRgb = hexToRgb(ogColorHex);
+
+// //Find best match for background colors
+// console.group('Matching Colors:');
+// for (let index = 0; index < 240; index++) {
+//     const before = rgbToHex(ansi256Dark[index]);
+//     const after = rgbToHex(ansi256Light[index]);
+//     console.log(
+//         `${index + 16}\t%c${ogColorHex}%c\t%c${before}%c\t%c${after}%c\t%clorem ipsum`,
+//         getConsoleStyle(ogColorHex),
+//         bgResetStyle,
+//         getConsoleStyle(before),
+//         bgResetStyle,
+//         getConsoleStyle(after),
+//         bgResetStyle,
+//         `background-color: ${baseColorsLight.background}; color: ${after}; padding: 0.5em;`,
+//     );
+// }
+// console.groupEnd();
+
+// const matchIndex = rgbToAnsi256(ogColorRgb);
+// const matchColorDark = ansi256Dark[matchIndex];
+// const matchColorDarkHex = rgbToHex(matchColorDark);
+// const matchColorLight = ansi256Light[matchIndex];
+// const matchColorLightHex = rgbToHex(matchColorLight);
+
+// console.group(`Converting ${ogColorHex} to ANSI 256`);
+// console.log(
+//     `${matchIndex + 16}\t%c${ogColorHex}%c\t%c${matchColorDarkHex}%c\t%c${matchColorLightHex}`,
+//     getConsoleStyle(ogColorHex),
+//     bgResetStyle,
+//     getConsoleStyle(matchColorDarkHex),
+//     bgResetStyle,
+//     getConsoleStyle(matchColorLightHex),
+// );
+// console.groupEnd();
diff --git a/scripts/dev/updatePlayerDropsV2.code.ts b/scripts/dev/updatePlayerDropsV2.code.ts
new file mode 100644
index 000000000..9c1e72d90
--- /dev/null
+++ b/scripts/dev/updatePlayerDropsV2.code.ts
@@ -0,0 +1,35 @@
+/**
+ * This script is used to merge multiple stats_playerDrop files into a single file with the last 336 hours of data.
+ * NOTE: use npx tsx scripts/dev/makeOldStatsFile.local.ts to run this script
+ */
+import fs from 'node:fs';
+import { PDLChangeEventType, PDLFileType } from '../../core/modules/Metrics/playerDrop/playerDropSchemas';
+import * as d3 from 'd3';
+
+// const hours = d3.timeHour.offset()
+const currentHour = d3.timeHour.floor(new Date());
+export default (sourceFile: string, targetFileName: string) => {
+    const fileData = JSON.parse(fs.readFileSync(sourceFile, 'utf8')) as PDLFileType;
+
+    let lastHour = d3.timeHour.offset(currentHour, -1);
+    for (let i = fileData.log.length - 1; i >= 0; i--) {
+        const log = fileData.log[i];
+        const logHour = new Date(log.hour);
+        const newHour = d3.timeHour.offset(lastHour, -1);
+        const hourDiff = newHour.getTime() - logHour.getTime();
+        log.hour = newHour.toISOString();
+        lastHour = newHour;
+        for (const change of log.changes) {
+            if ('ts' in change) {
+                change.ts = change.ts - hourDiff;
+            }
+        }
+        console.log('Updated', logHour.toISOString(), 'to', newHour.toISOString());
+    }
+    fileData.lastResourceList = [];
+    fileData.lastUnknownReasons = [];
+
+    //Write new file
+    console.log('Writing file', targetFileName);
+    fs.writeFileSync(targetFileName, JSON.stringify(fileData));
+}
diff --git a/scripts/dev/updatePlayerDropsV2.ts b/scripts/dev/updatePlayerDropsV2.ts
new file mode 100644
index 000000000..4ffedd0e7
--- /dev/null
+++ b/scripts/dev/updatePlayerDropsV2.ts
@@ -0,0 +1,15 @@
+/**
+ * This script is used to update the timestamps of a stats_playerDrop.json v2 file
+ * 
+ * NOTE: RENAME TO updatePlayerDropsV2.local.ts
+ * NOTE: THEN RUN npx tsx scripts/dev/updatePlayerDropsV2.local.ts
+ * NOTE: Add --overwrite to overwrite the actual stats_playerDrop.json file instead of creating a timestamped copy
+ */
+import updatePlayerDropsV2 from "./updatePlayerDropsV2.code";
+
+const sourceFile = 'xxxxx/stats_playerDrop.json';
+const baseTargetPath = 'xxxxxxxx/txData/default/data/stats_playerDrop.json';
+const overwrite = process.argv.includes('--overwrite');
+const formattedTimestamp = new Date().toISOString().replace(/:/g, '-').split('.')[0];
+const targetFileName = overwrite ? baseTargetPath : `${baseTargetPath}.${formattedTimestamp}`;
+updatePlayerDropsV2(sourceFile, targetFileName);
diff --git a/shared/advancedCommands.ts b/shared/advancedCommands.ts
new file mode 100644
index 000000000..f95cdf567
--- /dev/null
+++ b/shared/advancedCommands.ts
@@ -0,0 +1,111 @@
+import type { GenericApiErrorResp } from "./genericApiTypes";
+
+export type {
+    RunAdvancedCommandResp,
+    RunAdvancedCommandRespSuccess,
+    RunAdvancedCommandReq,
+} from '@shared/advancedCommands';
+
+
+type AdvancedCommand = {
+    name: string;
+    desc: string;
+    args?: string[];
+}
+export const advancedCommands: AdvancedCommand[] = [
+    //txAdmin
+    {
+        name: 'verbose',
+        // desc: 'Sets the verbosity of the txAdmin console.',
+        desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        args: ['true/false'],
+    },
+    {
+        name: 'set',
+        desc: 'Sets a txAdmin config value.',
+        args: ['scope.key', 'json-encoded value'],
+    },
+    {
+        name: 'printFullPlayerList',
+        desc: 'Print the entire player list json.',
+    },
+    {
+        name: 'printFxResourcesBootLog',
+        desc: 'Print the latest server resource boot log.',
+    },
+    {
+        name: 'printFxRunnerChildHistory',
+        desc: 'Print the history of all fxRunner child processes.',
+    },
+    {
+        name: 'printLoggerErrors',
+        desc: 'Print the latest logger errors.',
+    },
+
+    //Database
+    // {
+    //     name: 'dbComparePlayers',
+    //     desc: 'Compares the data from two players',
+    //     args: ['license1', 'license2'],
+    // },
+    // {
+    //     name: 'dbPurgeId',
+    //     desc: 'Purges an identifier from the database. Actions with only this identifier will be removed.',
+    //     args: ['id/hwid'],
+    // },
+    // {
+    //     name: 'dbFindCollisions',
+    //     desc: 'TODO',
+    //     args: ['id/hwid'],
+    // },
+    
+
+    //Server
+    {
+        name: 'forceUpdateMutableConvars',
+        desc: 'Force update the server mutable txAdmin convars.',
+    },
+    {
+        name: 'safelyRestartMonitorResource',
+        desc: 'Restarts the server\'s "monitor" resource in a safe way by restoring the luaComToken convar before ensuring it.',
+    },
+    {
+        name: 'forceReauthRecentPlayers',
+        desc: 'Forces the last N players that joined the server to reauth.',
+        args: ['number of players'],
+    },
+
+    //Process
+    {
+        name: 'printProcessEnv',
+        desc: 'Print the process environment variables.',
+    },
+    {
+        name: 'printProcessMemoryUsage',
+        desc: 'Prints the process memory usage.',
+    },
+    {
+        name: 'freezeProcess',
+        desc: 'Freezes the NodeJS runtime by N seconds',
+        args: ['number of seconds'],
+    },
+    {
+        name: 'saveHeapSnapshot',
+        desc: 'Saves a heap snapshot.',
+    },
+    // {
+    //     name: 'forceGarbageCollection',
+    //     desc: '',
+    //     args: [],
+    // },
+
+    //Other
+    {
+        name: 'printPublicIp',
+        desc: 'Fetches the public IP of the server.',
+    },
+    {
+        name: 'printClockInfo',
+        desc: 'Fetches the current clock info.',
+    },
+];
diff --git a/shared/cleanFullPath.ts b/shared/cleanFullPath.ts
index 759423648..67c14f3a7 100644
--- a/shared/cleanFullPath.ts
+++ b/shared/cleanFullPath.ts
@@ -27,7 +27,7 @@ export default function cleanFullPath(input: string, isWindows): CleanFullPathRe
     }
 
     //Path must be fully resolved
-    if (/\/[\s\.](\/|$)/.test(slashified)) {
+    if (/\/\.{1,2}(\/|$)/.test(slashified)) {
         return { error: 'path contains unresolved parts (eg. `/../`)' };
     }
 
diff --git a/shared/cleanPlayerName.ts b/shared/cleanPlayerName.ts
index a82fa80f1..425ece9fb 100644
--- a/shared/cleanPlayerName.ts
+++ b/shared/cleanPlayerName.ts
@@ -5,7 +5,7 @@
     Althought still not perfect, I believe this code is the best way to clean up player names.
     In general:
     - It removes spammy characters, like character repetitions and zalgo text
-    - Does that without breaking scripts like hebreu and thai (or just a tiny bit)
+    - Does that without breaking scripts like hebrew and thai (or just a tiny bit)
     - It respects up to a single invisible character in the string, no matter which one
     - It does not break emoji variants that end up with 0xFE0E/0xFE0F
     - It does not break up any emoji, actually. THe only broken ones you will see are the ones that
diff --git a/shared/consts.ts b/shared/consts.ts
index b09b01559..fbd44af25 100644
--- a/shared/consts.ts
+++ b/shared/consts.ts
@@ -41,5 +41,9 @@ export default {
     regexValidIP: /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/,
     actionIdAlphabet,
     nuiWebpipePath: 'https://monitor/WebPipe/',
-    regexCustomThemeName: /^[a-z0-9]+(-[a-z0-9]+)*$/
+    regexCustomThemeName: /^[a-z0-9]+(-[a-z0-9]+)*$/,
+    cookies: {
+        theme: 'txa:theme',
+        session: 'txa:sess',
+    }
 } as const;
diff --git a/shared/diagnosticsTypes.ts b/shared/diagnosticsTypes.ts
new file mode 100644
index 000000000..f221ac855
--- /dev/null
+++ b/shared/diagnosticsTypes.ts
@@ -0,0 +1,30 @@
+import type { GenericApiErrorResp } from "genericApiTypes";
+
+export type InfoTree = {
+    [key: string]: string | number | { [key: string]: string | number };
+}
+
+export type InfoList = {
+    [key: string]: string | number;
+}
+
+export type ProcessInfo = {
+    pid: number;
+    parent: number;
+    name: string;
+    cpu: number;
+    memory: number;
+}
+
+export type DiagnosticsPageData = {
+    runtime: {
+        [key: string]: InfoTree;
+    };
+    host: InfoList;
+    server: InfoList;
+    processes: ProcessInfo[];
+    loadTime: number;
+}
+
+
+export type DiagnosticsDataApiResp = DiagnosticsPageData | GenericApiErrorResp
diff --git a/shared/jsonForgivingParse.ts b/shared/jsonForgivingParse.ts
new file mode 100644
index 000000000..6000ee7c2
--- /dev/null
+++ b/shared/jsonForgivingParse.ts
@@ -0,0 +1,39 @@
+/**
+ * Attempts to parse a JSON string in a forgiving manner by first attempting to repair malformed JSON.
+ * This function combines jsonrepair and json-parse-even-better-errors libraries to handle common JSON parsing issues
+ * such as trailing commas, missing quotes, and other syntax errors.
+ * 
+ * @param json - The JSON string to parse
+ * @returns The parsed JSON object
+ * @throws {SyntaxError} If the JSON is so malformed that it cannot be repaired or parsed
+ * 
+ * @example
+ * ```typescript
+ * const malformedJson = '{ "name": "test", }'; // note the trailing comma
+ * const result = jsonForgivingParse(malformedJson);
+ * // result = { name: "test" }
+ * ```
+ */
+import parseJsonError from 'json-parse-even-better-errors';
+import { jsonrepair } from 'jsonrepair';
+
+
+/**
+ * Forgiving JSON parser
+ */
+const jsonForgivingParse = (raw: string) => {
+    try {
+        return JSON.parse(raw);
+    } catch (error) {
+        try {
+            const repaired = jsonrepair(raw);
+            const parsed = JSON.parse(repaired);
+            parsed[Symbol.for('repaired')] = true;
+            return parsed;
+        } catch (error) {
+            throw new parseJsonError.JSONParseError(error, raw, 20, jsonForgivingParse);
+        }
+    }
+}
+
+export default jsonForgivingParse;
diff --git a/shared/otherTypes.ts b/shared/otherTypes.ts
index e465d82ef..a5c6bf640 100644
--- a/shared/otherTypes.ts
+++ b/shared/otherTypes.ts
@@ -31,10 +31,6 @@ export type ThemeType = {
     style: { [key: string]: string };
 };
 
-export type AdsDataType = {
-    login: { img: string, url: string } | null;
-    main: { img: string, url: string } | null;
-};
 
 export type InjectedTxConsts = {
     //Env
@@ -50,7 +46,6 @@ export type InjectedTxConsts = {
     hasMasterAccount: boolean;
     defaultTheme: string;
     customThemes: Omit<ThemeType, 'style'>[];
-    adsData: AdsDataType;
     providerLogo: string | undefined;
     providerName: string | undefined;
     hostConfigSource: string;
diff --git a/shared/package.json b/shared/package.json
index d9b367111..e624f6d40 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -11,6 +11,7 @@
     "keywords": [],
     "author": "André Tabarra",
     "license": "MIT",
+    "type": "module",
     "dependencies": {},
     "devDependencies": {}
 }
diff --git a/shared/playerApiTypes.ts b/shared/playerApiTypes.ts
index c38f8ab82..2b89dfb8b 100644
--- a/shared/playerApiTypes.ts
+++ b/shared/playerApiTypes.ts
@@ -19,8 +19,10 @@ export type PlayerModalPlayerData = {
     pureName: string;
     isRegistered: boolean;
     isConnected: boolean;
-    ids: string[]; //can be empty
-    hwids: string[]; //can be empty
+    idsOffline: string[];
+    idsOnline: string[]; //empty if not-registered or offline
+    hwidsOffline: string[];
+    hwidsOnline: string[]; //empty if not-registered or offline
     license: string | null;
     actionHistory: PlayerHistoryItem[]; //can be empty
 
@@ -34,8 +36,6 @@ export type PlayerModalPlayerData = {
     playTime?: number;
     notesLog?: string;
     notes?: string;
-    oldIds?: string[]; //will also include the current ones
-    oldHwids?: string[]; //will also include the current ones
     tsLastConnection?: number; //only show if offline
 }
 
diff --git a/shared/socketioTypes.ts b/shared/socketioTypes.ts
index c007da56a..37fd46d2e 100644
--- a/shared/socketioTypes.ts
+++ b/shared/socketioTypes.ts
@@ -71,7 +71,6 @@ export type PlayerlistPlayerType = {
     netid: number,
     displayName: string,
     pureName: string,
-    ids: string[],
     license: string | null,
 }
 
diff --git a/shared/utils.ts b/shared/utils.ts
new file mode 100644
index 000000000..d2ccb5e11
--- /dev/null
+++ b/shared/utils.ts
@@ -0,0 +1,22 @@
+/**
+ * Shortens an ID/HWID string to just leading and trailing characters.
+ * Unicode symbol alternatives: ‥,…,~,≈,-,•,◇
+ */
+export const shortenId = (id: string, numChars = 4) => {
+    if (typeof id !== 'string') throw new Error(`id is not a string`);
+    if (typeof numChars !== 'number' || numChars < 3) throw new Error(`numChars must be a number >= 3`);
+    
+    const [idType, idValue] = id.split(':', 2);
+    if (!idType || !idValue) {
+        return id; // Invalid format, return as is
+    }
+    
+    const threshold = numChars * 2 + 2;
+    if (idValue.length <= threshold) {
+        return id; // Do not shorten if ID value is threshold characters or fewer
+    }
+    
+    const start = idValue.slice(0, numChars);
+    const end = idValue.slice(-numChars);
+    return `${idType}:${start}…${end}`;
+}
diff --git a/web/main/adminManager.ejs b/web/main/adminManager.ejs
index 287aae055..7628a652e 100644
--- a/web/main/adminManager.ejs
+++ b/web/main/adminManager.ejs
@@ -10,6 +10,9 @@
         margin: auto;
         text-align: center;
     }
+    .table td {
+        vertical-align: middle;
+    }
 </style>
 
 <svg style="display:none">
@@ -23,21 +26,11 @@
         <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z" />
         <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z" />
     </symbol>
-    <symbol id="password-icon" viewBox="0 0 580 580" style="fill: rgb(194, 194, 59);">
-        <path d="M463.748,48.251c-64.336-64.336-169.013-64.335-233.349,0.001c-43.945,43.945-59.209,108.706-40.181,167.461 L4.396,401.536c-2.813,2.813-4.395,6.621-4.395,10.606V497c0,8.291,6.709,15,15,15h84.858c3.984,0,7.793-1.582,10.605-4.395 l21.211-21.226c3.237-3.237,4.819-7.778,4.292-12.334l-2.637-22.793l31.582-2.974c7.178-0.674,12.847-6.343,13.521-13.521 l2.974-31.582l22.793,2.651c4.233,0.571,8.496-0.85,11.704-3.691c3.193-2.856,5.024-6.929,5.024-11.206V363h27.422 c3.984,0,7.793-1.582,10.605-4.395l38.467-37.958c58.74,19.043,122.381,4.929,166.326-39.046 C528.084,217.266,528.084,112.587,463.748,48.251z M421.313,154.321c-17.549,17.549-46.084,17.549-63.633,0 s-17.549-46.084,0-63.633s46.084-17.549,63.633,0S438.861,136.772,421.313,154.321z"/>
-    </symbol>
-
-    <!-- Reserved for licenses: -->
-    <symbol id="fivem-icon" viewBox="0 0 342 430" style="fill: rgb(226, 144, 92);">
-        <g transform="matrix(1,0,0,-1,-124.2,606.4)">
-            <path d="m 125.8,215.9 85.1,0 c 1.9,0 7.4,18.3 16.7,54.9 32.3,112.4 50.9,178.1 55.7,197.2 l -54.9,54.1 -1.6,0 C 219.4,499 185.2,397.2 124.2,216.7 l 1.6,-0.8 z m 163.8,275.2 0.8,0 c 1.1,4.5 1.6,7.2 1.6,8 l 0,1.6 c -15.9,16.7 -33.7,34.5 -53.3,53.3 -2.1,-3.2 -3.2,-5.8 -3.2,-8 l 0,-0.8 c 19.9,-20.5 37.9,-38.5 54.1,-54.1 z M 393,429 l 0.8,0 c -10.9,34.5 -17.5,52.2 -19.9,53.3 L 254.6,600.8 c -1.3,0 -4.2,-8.5 -8.7,-25.4 L 393,429 Z m -22.3,65.3 0.8,0 c -24.4,74 -37.4,111.3 -39,112.1 l -73.2,0 0,-0.8 C 286.4,578 323.5,540.9 370.7,494.3 Z m 43.8,-128.1 0.8,0 c -2.7,13 -9,23.1 -19.1,30.2 -31,31.8 -62,62.8 -93,93 l -0.8,0 c 1.9,-10.9 6.1,-19.1 12.7,-24.7 l 99.4,-98.5 z m 50.1,-150.3 1.6,0.8 c -22.8,67.9 -35,102.9 -36.6,105 l -109.8,108.9 0,-0.8 c 4.2,-16.7 24.7,-88 61.2,-213.9 l 83.6,0 z" />
-        </g>
-    </symbol>
 </svg>
 
 
 <div class="row justify-content-md-center">
-    <div class="col-md-7 mw-col8">
+    <div class="col-lg-10 mw-col12">
 
         <!-- Global Card -->
         <div class="card card-accent-primary">
@@ -54,7 +47,7 @@
                         <thead>
                             <tr>
                                 <th>Username</th>
-                                <th>Auth</th>
+                                <th>Identifiers</th>
                                 <th>Permissions</th>
                                 <th>Actions</th>
                             </tr>
@@ -64,24 +57,26 @@
                             <tr>
                                 <td><%= admin.name %></td>
                                 <td>
-                                    <i class="admin-icon">
-                                        <svg>
-                                            <title>Password Authentication</title>
-                                            <use href="#password-icon"></use>
-                                        </svg>
-                                    </i>
-                                    <i class="admin-icon" style="opacity: <%= admin.hasCitizenFX ? '1' : '0.09' %>;">
-                                        <svg>
-                                            <title>Cfx.re Authentication</title>
-                                            <use href="#cfxre-icon"></use>
-                                        </svg>
-                                    </i>
-                                    <i class="admin-icon" style="opacity: <%= admin.hasDiscord ? '1' : '0.09' %>;">
-                                        <svg>
-                                            <title>Discord Authentication</title>
-                                            <use href="#discord-icon"></use>
-                                        </svg>
-                                    </i>
+                                    <div style="display: flex; flex-direction: column; gap: 2px;">
+                                        <% if (admin.identifiers.length > 0) { %>
+                                            <% for (const identifier of admin.identifiers) { %>
+                                                <span style="font-size: 0.9em; opacity: 75%; font-family: monospace; display: flex; align-items: center; justify-content: center; gap: 4px;">
+                                                    <% if (identifier.startsWith('fivem:')) { %>
+                                                        <svg style="display: inline; max-width: 1.5em; max-height: 1.5em; margin-top: -2px;">
+                                                            <use href="#cfxre-icon"></use>
+                                                        </svg>
+                                                    <% } else if (identifier.startsWith('discord:')) { %>
+                                                        <svg style="display: inline; max-width: 1.5em; max-height: 1.5em;">
+                                                            <use href="#discord-icon"></use>
+                                                        </svg>
+                                                    <% } %>
+                                                    <%= identifier %>
+                                                </span>
+                                            <% } %>
+                                        <% } else { %>
+                                            <span>--</span>
+                                        <% } %>
+                                    </div>
                                 </td>
                                 <td><%= admin.perms %></td>
                                 <td class="tableActions">
@@ -97,7 +92,7 @@
                                             </button>
                                         <% } else { %>
                                             <button class="btn btn-sm btn-outline-primary"
-                                                onclick="getAdminModal('<%= admin.name %>')">
+                                                onclick="getAdminModal(<%= escapeHtmlRawText(JSON.stringify(admin.name)) %>)">
                                                 <i class="icon-pencil"></i> Edit
                                             </button>
                                         <% } %>
@@ -108,7 +103,7 @@
                                             </button>
                                         <% } else { %>
                                             <button class="btn btn-sm btn-outline-danger"
-                                                onclick="deleteAdmin('<%= admin.name %>')">
+                                                onclick="deleteAdmin(<%= escapeHtmlRawText(JSON.stringify(admin.name)) %>)">
                                                 <i class="icon-trash"></i> Delete
                                             </button>
                                         <% } %>
diff --git a/web/main/advanced.ejs b/web/main/advanced.ejs
deleted file mode 100644
index f99e3b9b8..000000000
--- a/web/main/advanced.ejs
+++ /dev/null
@@ -1,155 +0,0 @@
-<%- await include('parts/header.ejs', locals) %>
-
-<div class="row justify-content-md-center">
-    <div class="col-lg-10 col-xl-8">
-        <div class="alert alert-info text-center" role="alert">
-            <span class="font-weight-bold">
-                This is a page exclusively for advanced users. <br>
-                Do not expect any support in our Discord if you mess with something on this page. 
-            </span>
-            <br>
-            This is also an undocumented feature for a reason: nothing here is expected to work properly and things might be added or removed for any reason.
-        </div>
-    </div>
-</div>
-
-
-<div class="row justify-content-md-center">
-    
-    <div class="col-lg-8 col-xl-6 mw-col6">
-        <div class="card card-accent-danger" style="min-height: 160px;">
-            <div class="card-header font-weight-bold">Random buttons, knobs and data:</div>
-            <div class="card-body text-center">
-                <!-- Verbosity -->
-                <span class="text-muted">
-                    With verbosity enabled, you will see more detailed information on the terminal. <br>
-                    Good to help getting information on errors. <br>
-                </span>
-                <% if (verbosityEnabled) { %>
-                    <button class="btn btn-md btn-danger mt-2" onclick="doChangeVerbosity(false)">
-                        Disable Verbosity
-                    </button>
-                <% } else { %>
-                    <button class="btn btn-md btn-success mt-2" onclick="doChangeVerbosity(true)">
-                        Enable Verbosity
-                    </button>
-                <% } %>
-                <hr>
-
-                <!-- Profile Monitor -->
-                <span class="text-muted">
-                    This will execute the profiler in the Monitor for 5 seconds. <br>
-                    Required the Server to be started for showing the profiler URL. <br>
-                </span>
-                <button class="btn btn-md btn-outline-dark mt-2" onclick="doProfileMonitor()">Profile Monitor</button>
-            </div>
-        </div>
-    </div>
-
-    <div class="col-lg-8 col-xl-6 mw-col6 text-center">
-        <div class="form-group row justify-content-center">
-            <div class="col-sm-9">
-                <input class="form-control" type="text" id="magicActionInput" value="perform_magic">
-            </div>
-            <div class="col-sm-3">
-                <button class="btn btn-md btn-outline-dark w-100" onclick="doMagicTrick()">Magic Button</button>
-            </div>
-        </div>
-        <pre class="alert alert-secondary mt-2 text-left" id="magicPre">What will happen when its pressed?!</pre>
-    </div>
-</div>
-
-
-<div class="row justify-content-md-center">
-    <marquee behavior="" direction="">
-        <img src="img/txSnaily2anim_320.png" alt="Not A Meme" class="img-fluid">
-    </marquee>
-</div>
-
-<%- await include('parts/footer.ejs', locals) %>
-
-<script>
-    //============================================== Magic
-    function doMagicTrick(){
-        let data = {
-            action: document.getElementById('magicActionInput').value.trim(),
-            parameter: false
-        }
-        const magicPre = document.getElementById("magicPre");
-        magicPre.innerText = 'doing magic';
-        const notify = $.notify({ message: '<p class="text-center">Performing Magic...</p>' }, {});
-        txAdminAPI({
-            type: "POST",
-            url: '/advanced',
-            timeout: REQ_TIMEOUT_LONG,
-            data: data,
-            success: function (data) {
-                if(data.type === 'success'){
-                    notify.update('progress', 0);
-                    notify.update('type', 'success');
-                    notify.update('message', 'Check the magic box below...');
-                    magicPre.innerText = data.message;
-                }else{
-                    notify.update('progress', 0);
-                    notify.update('type', data.type);
-                    notify.update('message', data.message);
-                }
-            },
-            error: function (xmlhttprequest, textstatus, message) {
-                notify.update('progress', 0);
-                notify.update('type', 'danger');
-                notify.update('message', message);
-            }
-        });
-    }
-        
-
-    //============================================== Verbosity
-    function doChangeVerbosity(desiredState) {
-        let data = {
-            action: 'change_verbosity',
-            parameter: desiredState
-        }
-        const notify = $.notify({ message: '<p class="text-center">Executing Command...</p>' }, {});
-        txAdminAPI({
-            type: "POST",
-            url: '/advanced',
-            data: data,
-            success: function (data) {
-                if (checkApiLogoutRefresh(data)) return;
-                notify.update('progress', 0);
-                notify.update('type', data.type);
-                notify.update('message', data.message);
-            },
-            error: function (xmlhttprequest, textstatus, message) {
-                notify.update('progress', 0);
-                notify.update('type', 'danger');
-                notify.update('message', message);
-            }
-        });
-    }
-
-
-    //============================================== Profiler
-    function doProfileMonitor() {
-        const notify = $.notify({ message: '<p class="text-center">Executing Command...</p>' }, {});
-        txAdminAPI({
-            type: "POST",
-            url: '/fxserver/commands',
-            data: {
-                action: 'profile_monitor',
-                parameter: false
-            },
-            success: function (data) {
-                notify.update('progress', 0);
-                notify.update('type', data.type);
-                notify.update('message', data.message);
-            },
-            error: function (xmlhttprequest, textstatus, message) {
-                notify.update('progress', 0);
-                notify.update('type', 'danger');
-                notify.update('message', message);
-            }
-        });
-    }
-</script>
diff --git a/web/main/diagnostics.ejs b/web/main/diagnostics.ejs
deleted file mode 100644
index 32cf5977a..000000000
--- a/web/main/diagnostics.ejs
+++ /dev/null
@@ -1,314 +0,0 @@
-<%- await include('parts/header.ejs', locals) %>
-
-
-<div class="row justify-content-md-center">
-    <div class="col-lg-8 col-xl-5 mw-col6">
-        <!-- Environment Card -->
-        <div class="card card-accent-danger" style="min-height: 160px;">
-            <div class="card-header font-weight-bold">Environment:</div>
-            <div class="card-body">
-                <% if (host.error) { %>
-                    <%- host.error %>
-                <% } else { %>
-                    <strong>Node:</strong> <%= host.static.nodeVersion %> <br>
-                    <strong>OS:</strong> <%= host.static.osDistro %> <br>
-                    <strong>Username:</strong> <%= host.static.username %> <br>
-                    
-                    <strong>CPU Model:</strong> <%- host.static.cpu.manufacturer %> <%- host.static.cpu.brand %> <br>
-                    <strong>CPU Stats:</strong> 
-                        <%- host.static.cpu.physicalCores %>c/<%- host.static.cpu.cores %>t - 
-                        <%- host.static.cpu.speedMin %> GHz 
-                        <%- host.static.cpu.clockWarning %> <br>
-                    <% if (host.dynamic) { %>
-                        <strong>CPU Usage:</strong> <%= host.dynamic.cpuUsage %>% <br>
-                        <strong>Memory:</strong> 
-                            <%= host.dynamic.memory.usage %>%
-                            (<%= host.dynamic.memory.used.toFixed(2) %>/<%= host.dynamic.memory.total.toFixed(2) %>)
-                    <% } else { %>
-                        <i>Dynamic usage data not available.</i>
-                    <% } %>
-                <% } %>
-            </div>
-        </div>
-
-        <!-- txAdmin Config Card -->
-        <div class="card card-accent-danger" style="min-height: 160px;">
-            <div class="card-header font-weight-bold">txAdmin Runtime:</div>
-            <div class="card-body">
-                <strong>Uptime:</strong> <code><%= txadmin.uptime %></code> <br>
-                <strong>Versions:</strong> 
-                    <code>v<%= txAdminVersion %></code> /
-                    <code>b<%= fxServerVersion %></code> <br>
-                <strong>Database File Size:</strong> <code><%= txadmin.databaseFileSize %></code> <br>
-                <strong>Env:</strong> <br>
-                ├─ FXServer: <code><%= txadmin.txEnv.fxsPath %></code> <br>
-                ├─ Profile: <code><%= txadmin.txEnv.profilePath %></code> <br>
-                ├─ Defaults: <code><%= txadmin.txHostConfig.defaults.length > 0 ? txadmin.txHostConfig.defaults.join(', ') : '--' %></code> <br>
-                ├─ Interface: <code><%= txadmin.txHostConfig.netInterface ?? '--' %></code> <br>
-                └─ Provider: <code><%= txadmin.txHostConfig.providerName ?? '--' %></code> <br>
-                <strong>Monitor:</strong> <br>
-                ├─ HB Fails: 
-                    <code>HTTP <%= txadmin.monitor.hbFails.http %></code> /
-                    <code>FD3 <%= txadmin.monitor.hbFails.fd3 %></code> <br>
-                └─ Restarts: 
-                    <code>BT <%= txadmin.monitor.restarts.bootTimeout %></code> /
-                    <code>CL <%= txadmin.monitor.restarts.close %></code> /
-                    <code>HB <%= txadmin.monitor.restarts.heartBeat %></code> / 
-                    <code>HC <%= txadmin.monitor.restarts.healthCheck %></code> /
-                    <code>BO <%= txadmin.monitor.restarts.both %></code> <br>
-                <strong>Performance Times:</strong> <br>
-                ├─ BanCheck: <code><%= txadmin.performance.banCheck %></code> <br>
-                ├─ WhitelistCheck: <code><%= txadmin.performance.whitelistCheck %></code> <br>
-                ├─ PlayersTable: <code><%= txadmin.performance.playersTableSearch %></code> <br>
-                ├─ HistoryTable: <code><%= txadmin.performance.historyTableSearch %></code> <br>
-                ├─ DatabaseSave: <code><%= txadmin.performance.databaseSave %></code> <br>
-                └─ PerfCollection: <code><%= txadmin.performance.perfCollection %></code> <br>
-                <strong>Memory:</strong> <br>
-                ├─ Heap: <code><%= txadmin.memoryUsage.heap_used %> / <%= txadmin.memoryUsage.heap_limit %> (<%= txadmin.memoryUsage.heap_pct %>%)</code> <br>
-                ├─ Physical: <code><%= txadmin.memoryUsage.physical %></code> <br>
-                └─ Peak. Alloc.: <code><%= txadmin.memoryUsage.peak_malloced %></code> <br>
-                <strong>Logger Status:</strong> <br>
-                ├─ Storage Size: <code><%= txadmin.logger.storageSize %></code> <br>
-                ├─ Admin: <code><%= txadmin.logger.statusAdmin %></code> <br>
-                ├─ FXServer: <code><%= txadmin.logger.statusFXServer %></code> <br>
-                └─ Server: <code><%= txadmin.logger.statusServer %></code> <br>
-            </div>
-        </div>
-
-        <!-- Execution time -->
-        <div class="text-center mb-4">
-            <small class="text-muted"><%- message %></small>
-        </div>
-
-    </div>
-    <!-- /.col-->
-
-
-    <div class="col-lg-8 col-xl-5 mw-col6">
-        <!-- Diagnostics Report -->
-        <div class="card card-accent-info">
-            <div class="card-header font-weight-bold">Diagnostics Report:</div>
-            <div class="card-body text-center">
-                <div class="row text-center">
-                    <div class="col-lg-9 text-lg-left">
-                        To receive txAdmin Support, it is recommended that you send the diagnostics data directly to the Support Team.
-                    </div>
-                    <div class="col-lg-3 text-lg-right">
-                        <button
-                            class="btn btn-sm btn-outline-info"
-                            type="button"
-                            onclick="showReportModal()"
-                        >
-                            Review Details <br>
-                            & Send Data
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- FXServer Info Card -->
-        <div class="card card-accent-info" style="min-height: 160px;">
-            <div class="card-header font-weight-bold">FXServer /info.json:</div>
-            <div class="card-body">
-                <% if (fxserver.versionMismatch) { %>
-                    <div class="alert alert-danger text-center" role="alert">
-                        <strong>This version doesn't match txAdmin's version!</strong><br>
-                        If you just updated FXServer, restart txAdmin. <br>
-                        Otherwise, it means FXServer was already running before txAdmin started, and nothing is going to work properly.
-                    </div>
-                <% } %>
-                <% if (fxserver.error !== false) { %>
-                    <%- fxserver.error %>
-                <% } else { %>
-                    <strong>Status: <span class="badge badge-<%= fxserver.statusColor %>"><%= fxserver.status %></span></strong> <br>
-                    <strong>Version:</strong> <%= fxserver.version %> <br>
-                    <strong>Resources:</strong> <%= fxserver.resources %> <br>
-                    <strong>OneSync:</strong> <%= fxserver.onesync %> <br>
-                    <strong>Max Clients:</strong> <%= fxserver.maxClients %> <br>
-                    <strong>txAdmin Version:</strong> <%= fxserver.txAdminVersion %> <br>
-                <% } %>
-            </div>
-        </div>
-
-        <!-- Proccesses Card -->
-        <div class="card card-accent-info">
-            <div class="card-header font-weight-bold">Processes:</div>
-            <div class="card-body">
-                <% if (!proccesses.length) { %>
-                    Failed to retrieve processed data. <br>
-                    Check the terminal for more information (if verbosity is enabled)
-                <% } else { %>
-                    <% for (const process of proccesses) { %>
-                        <strong>Process:</strong> (<%= process.pid %>) <%= process.name %> <br>
-                        <strong>Parent:</strong> <%= process.ppid %> <br>
-                        <strong>Memory:</strong> <%= process.memory.toFixed(2) %>MB <br>
-                        <strong>CPU:</strong> <%= process.cpu.toFixed(2) %>% <br>
-                        <br>
-                    <% } %>
-                <% } %>
-            </div>
-        </div>
-
-    </div>
-    <!-- /.col-->
-</div>
-
-<%- await include('parts/footer.ejs', locals) %>
-
-<!-- Submit Report modal -->
-<div class="modal fade" id="modReport" tabindex="-1" role="dialog" aria-labelledby="modReport-title" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="modReport-title">Send Diagnostics Data</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-
-            <div class="modal-body">
-                <!-- Spinner -->
-                <div class="d-none" id="modReport-spinnerBody">
-                    <div style="min-height: 125px;">
-                        <div class="txSpinner">Loading...</div>
-                    </div>
-                </div>
-
-                <!-- Review -->
-                <div class="d-none" id="modReport-infoBody">
-                    <p>
-                        This <i>optional</i> feature sends a diagnostics report to the txAdmin/Cfx.re teams, and may be required to diagnose a wide range of server issues. <br>
-                        After sending the data, you will receive a Report ID you can send in the support channels.
-                    </p>
-                    <ul style="padding-inline-start: 1rem;">
-                        <li>
-                            <strong>Which data will be sent?</strong>
-                            <ul style="padding-inline-start: 1rem;">
-                                <li>All diagnostics page data</li>
-                                <li>Recent txAdmin (system), live console and server log</li>
-                                <li>Environment variables</li>
-                                <li>Server performance (dashboard chart) data</li>
-                                <li>Player database statistics</li>
-                                <li>txAdmin settings (no bot token)</li>
-                                <li>List of admins (no passwords/hashes)</li>
-                                <li>List of files/folders in server data and monitor folders</li>
-                                <li>Config files in server data folder</li>
-                            </ul>
-                        </li>
-                        <li>
-                            <strong>Who can access the data?</strong> <br>
-                            The data will be available for up to 24 hours to the txAdmin support team, as well as the Cfx.re team.
-                        </li>
-                        <li>
-                            <strong>Sensitive Information Protection:</strong> <br>
-                            <ul style="padding-inline-start: 1rem;">
-                                <li><strong>Settings:</strong> the Discord Bot Token will be removed</li>
-                                <li><strong>Admin List:</strong> the password hashes will not be sent</li>
-                                <li><strong>Env Vars:</strong> parameters with <code>key, license, pass, private, secret, token</code> in their name will be masked.</li>
-                                <li><strong>CFG Files:</strong> known secret parameters will be masked (ex license, mysql string, tebex secret, webhooks, etc).</li>
-                                <li><strong>Logs:</strong> any identifiable IPv4 address in logs will be masked.</li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>
-
-                <!-- Result Success -->
-                <div class="d-none" id="modReport-resultSuccessBody">
-                    <style>
-                        .reportIdCode {
-                            font-size: 1.75rem;
-                            letter-spacing: 0.65rem;
-                            background-color: rgb(128 128 128 / 20%);
-                            padding: 0.25rem 0.1rem 0.25rem 0.85rem;
-                            text-align: center;
-                        }
-                    </style>
-                    <div class="text-center">
-                        <h2>Report ID: <code class="reportIdCode" id="modReport-reportId">??????</code></h2>
-                    </div>
-                </div>
-
-                <!-- Result Error -->
-                <div class="d-none" id="modReport-resultErrorBody">
-                    <div class="text-center">
-                        <h4 class="text-danger" id="modReport-resultErrorMessage">sdfsdf sdf sdfsdf</h4>
-                    </div>
-                </div>
-                
-                <p class="lead mb-1 pt-2 text-center" style="font-style: italic;">
-                    For txAdmin support, join the official Discord: 
-                    <a href="https://discord.gg/uAmsGa2" target="_blank" style="vertical-align: text-bottom;">
-                        <img src="https://discordapp.com/api/guilds/577993482761928734/widget.png?style=shield"></img>
-                    </a>
-                </p>
-            </div>
-
-            
-            <div class="modal-footer text-center">
-                <div class="mx-auto">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    &nbsp;
-                    &nbsp;
-                    <button type="button" class="btn btn-success" id="modReport-saveBtn">Agree & Send Data</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<script>
-    const els = {
-        modal: document.getElementById('modReport'),
-        infoBody: document.getElementById('modReport-infoBody'),
-        spinnerBody: document.getElementById('modReport-spinnerBody'),
-        resultSuccessBody: document.getElementById('modReport-resultSuccessBody'),
-        resultErrorBody: document.getElementById('modReport-resultErrorBody'),
-        resultErrorMessage: document.getElementById('modReport-resultErrorMessage'),
-        saveBtn: document.getElementById('modReport-saveBtn'),
-        reportId: document.getElementById('modReport-reportId'),
-    }
-
-    function showReportModal() {
-        els.infoBody.classList.remove('d-none');
-        els.resultSuccessBody.classList.add('d-none');
-        els.resultErrorBody.classList.add('d-none');
-        els.spinnerBody.classList.add('d-none');
-        els.saveBtn.classList.remove('d-none');
-        els.saveBtn.classList.remove('disabled');
-        $('#modReport').modal('show');
-    }
-
-    els.saveBtn.onclick = () => {
-        els.infoBody.classList.add('d-none');
-        els.spinnerBody.classList.remove('d-none');
-        els.saveBtn.classList.add('disabled');
-
-        txAdminAPI({
-            type: "POST",
-            url: `diagnostics/sendReport`,
-            timeout: REQ_TIMEOUT_REALLY_LONG,
-            //NOTE: in NUI, empty bodies become GET requests even if you specify POST
-            data: {bugfix:true},
-            success: function (data) {
-                els.spinnerBody.classList.add('d-none');
-                els.saveBtn.classList.add('d-none');
-                if(data.error){
-                    els.resultErrorBody.classList.remove('d-none');
-                    els.resultErrorMessage.textContent = data.error;
-                }else if(data.reportId){
-                    els.resultSuccessBody.classList.remove('d-none');
-                    els.reportId.textContent = data.reportId;
-                }else{
-                    els.resultErrorBody.classList.remove('d-none');
-                    els.resultErrorMessage.textContent = 'Unknown backend error.';
-                }
-            },
-            error: function (xmlhttprequest, textstatus, message) {
-                els.resultErrorBody.classList.remove('d-none');
-                els.resultErrorMessage.textContent = `Error: ${message}`;
-            }
-        });
-    }
-</script>
diff --git a/web/main/message.ejs b/web/main/message.ejs
index fa49db5f9..c5119eaa7 100644
--- a/web/main/message.ejs
+++ b/web/main/message.ejs
@@ -7,7 +7,7 @@
 <div class="row justify-content-md-center">
     <div class="col-md-6">
         <div class="alert alert-warning text-center" role="alert">
-            <%- message %>
+            <%- messageHtml %>
         </div>
     </div>
 </div>
diff --git a/web/main/resources.ejs b/web/main/resources.ejs
index bb81af915..91bb2a1a8 100644
--- a/web/main/resources.ejs
+++ b/web/main/resources.ejs
@@ -98,20 +98,29 @@
                                 </td>
                                 <td class="tableActions">
                                     <% if (resource.status === 'started') { %>
-                                    <a class="btn btn-sm btn-outline-warning d-block d-md-inline-block mr-md-1 mb-1 mb-md-0 <%= disableActions %>"
+                                    <a class="btn-res-action btn btn-sm btn-outline-warning d-block d-md-inline-block mr-md-1 mb-1 mb-md-0 <%= disableActions %>"
                                         href="#"
-                                        onclick="btnCommand('ensure_res', '<%= resource.name %>'); event.preventDefault();" <%= disableActions %>>
+                                        data-resAction="ensure_res"
+                                        data-resName="<%= encodeURIComponent(resource.name) %>"
+                                        <%= disableActions %>
+                                    >
                                         Restart
                                     </a>
-                                    <a class="btn btn-sm btn-outline-danger d-block d-md-inline-block m-0 <%= disableActions %>"
+                                    <a class="btn-res-action btn btn-sm btn-outline-danger d-block d-md-inline-block m-0 <%= disableActions %>"
                                         href="#"
-                                        onclick="btnCommand('stop_res', '<%= resource.name %>'); event.preventDefault();" <%= disableActions %>>
+                                        data-resAction="stop_res"
+                                        data-resName="<%= encodeURIComponent(resource.name) %>"
+                                        <%= disableActions %>
+                                    >
                                         Stop
                                     </a>
                                     <% } else { %>
-                                    <a class="btn btn-sm btn-outline-success d-block d-md-inline-block <%= disableActions %>"
+                                    <a class="btn-res-action btn btn-sm btn-outline-success d-block d-md-inline-block <%= disableActions %>"
                                         href="#"
-                                        onclick="btnCommand('ensure_res', '<%= resource.name %>'); event.preventDefault();" <%= disableActions %>>
+                                        data-resAction="ensure_res"
+                                        data-resName="<%= encodeURIComponent(resource.name) %>"
+                                        <%= disableActions %>
+                                    >
                                         Start
                                     </a>
                                     <% } %>
@@ -328,6 +337,16 @@
 
     //============================================== Utils
     function refreshResourceList() {
+        const resButtons = document.getElementsByClassName('btn-res-action');
+        for (const btn of resButtons) {
+            btn.onclick = (e) => {
+                e.preventDefault();
+                const resAction = e.currentTarget.dataset.resaction;
+                const resName = decodeURIComponent(e.currentTarget.dataset.resname);
+                btnCommand(resAction, resName);
+            };
+        }
+
         if ($('#defResCheckbox').is(':checked')) {
             defaultResources.forEach(defRes => {
                 $(`#res-${defRes}`).show();
diff --git a/web/main/whitelist.ejs b/web/main/whitelist.ejs
index db2a9995d..3cc49d5a1 100644
--- a/web/main/whitelist.ejs
+++ b/web/main/whitelist.ejs
@@ -40,9 +40,9 @@
     <div class="row justify-content-md-center">
         <div class="col-md-6">
             <div class="alert alert-warning text-center" role="alert">
-                <strong>Warning: The server is not in the "Approved License" whitelist mode.</strong> <br>
-                This means that any changes made in this page will not reflect in the ability of players to connect to the server while the whitelist is in another mode or disabled. <br>
-                This can be changed in the page <a href="#" onclick="navigateParentTo('/settings')">Settings > Player Manager</a>.
+                <strong>Warning: The server is not in the "Approved License" allowlist mode.</strong> <br>
+                This means that any changes made in this page will not reflect in the ability of players to connect to the server while the allowlist is in another mode or disabled. <br>
+                This can be changed in the page <a href="#" onclick="navigateParentTo('/settings#allowlist')">Settings > Allowlist</a>.
             </div>
         </div>
     </div>
@@ -54,8 +54,8 @@
         <div class="card card-accent-success">
             <div class="card-header" style="display: flex; justify-content: space-between;">
                 <div>
-                    <span style="font-size: large">Whitelist Requests: <span id="reqs-counter"></span></span> <br>
-                    <small>Players that tried to join the server but were not whitelisted.</small>
+                    <span style="font-size: large">Allowlist Requests: <span id="reqs-counter"></span></span> <br>
+                    <small>Players that tried to join the server but were not allowlisted.</small>
                 </div>
                 <div class="header-elements">
                     <div class="form-group mb-0">
@@ -118,7 +118,7 @@
         <div class="card card-accent-success">
             <div class="card-header" style="display: flex; justify-content: space-between;">
                 <div>
-                    <span style="font-size: large">Approved Whitelists Pending Join: <span id="approved-counter"></span></span> <br>
+                    <span style="font-size: large">Approved Allowlists Pending Join: <span id="approved-counter"></span></span> <br>
                     <small>Players that are already approved, but haven't joined the server yet.</small>
                 </div>
                 <div class="header-elements">
@@ -430,7 +430,7 @@
 
     async function denyAllRequests(reqId, action){
         const confirmOptions = {
-            title: 'Deny all whitelist requests?',
+            title: 'Deny all allowlist requests?',
             content: `Players will still be able to try to join again, and will receive a new request ID.`,
         };
         if (!await txAdminConfirm(confirmOptions)) return;
@@ -550,8 +550,8 @@
         let identifier = await txAdminPrompt({
             modalColor: 'green',
             confirmBtnClass: 'btn-green',
-            title: 'Whitelist player',
-            description: `Type in the Player Identifier you want to whitelist. <br>
+            title: 'Allowlist player',
+            description: `Type in the Player Identifier you want to allowlist. <br>
                 This can be any of the following: <code>${acceptedIdTypes.join(', ')}</code>`, 
             placeholder: 'discord:272800190639898628'
         });
diff --git a/web/public/img/advert-gportal-192x64.png b/web/public/img/advert-gportal-192x64.png
new file mode 100644
index 000000000..b5224c0c1
Binary files /dev/null and b/web/public/img/advert-gportal-192x64.png differ
diff --git a/web/public/img/advert-gportal-256x80.png b/web/public/img/advert-gportal-256x80.png
new file mode 100644
index 000000000..939c38b9f
Binary files /dev/null and b/web/public/img/advert-gportal-256x80.png differ
diff --git a/web/public/img/advert-nitrado-192x64.png b/web/public/img/advert-nitrado-192x64.png
new file mode 100644
index 000000000..60251fad1
Binary files /dev/null and b/web/public/img/advert-nitrado-192x64.png differ
diff --git a/web/public/img/advert-nitrado-256x80.png b/web/public/img/advert-nitrado-256x80.png
new file mode 100644
index 000000000..5ab499c6c
Binary files /dev/null and b/web/public/img/advert-nitrado-256x80.png differ
diff --git a/web/public/img/advert-nodecraft-192x64.png b/web/public/img/advert-nodecraft-192x64.png
new file mode 100644
index 000000000..3e26c0f03
Binary files /dev/null and b/web/public/img/advert-nodecraft-192x64.png differ
diff --git a/web/public/img/advert-nodecraft-256x80.png b/web/public/img/advert-nodecraft-256x80.png
new file mode 100644
index 000000000..d79d9d3d8
Binary files /dev/null and b/web/public/img/advert-nodecraft-256x80.png differ
diff --git a/web/public/img/advert-shockbyte-192x64.png b/web/public/img/advert-shockbyte-192x64.png
new file mode 100644
index 000000000..7b6b3ccd5
Binary files /dev/null and b/web/public/img/advert-shockbyte-192x64.png differ
diff --git a/web/public/img/advert-shockbyte-256x80.png b/web/public/img/advert-shockbyte-256x80.png
new file mode 100644
index 000000000..d8bae8b0e
Binary files /dev/null and b/web/public/img/advert-shockbyte-256x80.png differ
diff --git a/web/public/img/advert-xrealm-192x64.png b/web/public/img/advert-xrealm-192x64.png
new file mode 100644
index 000000000..509772d48
Binary files /dev/null and b/web/public/img/advert-xrealm-192x64.png differ
diff --git a/web/public/img/advert-xrealm-256x80.png b/web/public/img/advert-xrealm-256x80.png
new file mode 100644
index 000000000..f4a5031a1
Binary files /dev/null and b/web/public/img/advert-xrealm-256x80.png differ
diff --git a/web/public/img/advert-zaphosting-192x64.png b/web/public/img/advert-zaphosting-192x64.png
new file mode 100644
index 000000000..76bdc4d38
Binary files /dev/null and b/web/public/img/advert-zaphosting-192x64.png differ
diff --git a/web/public/img/advert-zaphosting-256x80.png b/web/public/img/advert-zaphosting-256x80.png
new file mode 100644
index 000000000..a0454dc34
Binary files /dev/null and b/web/public/img/advert-zaphosting-256x80.png differ
diff --git a/web/public/img/zap256_black.png b/web/public/img/zap256_black.png
deleted file mode 100644
index 79ce4ed19..000000000
Binary files a/web/public/img/zap256_black.png and /dev/null differ
diff --git a/web/public/img/zap256_white.png b/web/public/img/zap256_white.png
deleted file mode 100644
index f57aeb952..000000000
Binary files a/web/public/img/zap256_white.png and /dev/null differ
diff --git a/web/public/js/txadmin/base.js b/web/public/js/txadmin/base.js
index f33aee134..18d315911 100644
--- a/web/public/js/txadmin/base.js
+++ b/web/public/js/txadmin/base.js
@@ -136,12 +136,20 @@ const txAdminAPI = ({type, url, data, dataType, timeout, success, error}) => {
 
     url = TX_BASE_PATH + url;
     timeout = timeout ?? REQ_TIMEOUT_MEDIUM;
-    dataType = dataType || 'json';
+    dataType = dataType ?? 'json'; //This is the expected return type, not request type
+    let contentType;
+    if (typeof data === 'object') {
+        if (data === null) throw new TypeError('txAdminAPI data cannot be null');
+        if (Object.prototype.toString.call(data) === '[object Object]') {
+            data = JSON.stringify(data);
+            contentType = 'application/json';
+        }
+    }
     success = success || (() => {});
     error = error || (() => {});
     const headers = {'X-TxAdmin-CsrfToken': (csrfToken) ? csrfToken : 'not_set'}
     // console.log(`txAdminAPI Req to: ${url}`);
-    return $.ajax({type, url, timeout, data, dataType, success, error, headers});
+    return $.ajax({type, url, timeout, data, dataType, contentType, success, error, headers});
 };
 
 const txAdminAlert = ({content, modalColor, title}) => {
diff --git a/web/standalone/setup.ejs b/web/standalone/setup.ejs
index 19ffdbed9..135fd3782 100644
--- a/web/standalone/setup.ejs
+++ b/web/standalone/setup.ejs
@@ -147,8 +147,8 @@
                                 <div class="step-content">
                                     A <strong>short</strong> server name to be used in txAdmin interface and
                                     Chat/Discord messages.
-                                    <input type="text" class="form-control mt-2" id="frmName" maxlength="22"
-                                        minlength="3" placeholder="Happy Server" value="<%= serverName %>" required>
+                                    <input type="text" class="form-control mt-2" id="frmName" maxlength="18"
+                                        minlength="1" placeholder="Happy Server" value="<%= serverName %>" required>
                                     <span id="frmNameError" class="text-danger fade-in d-none"></span>
                                     <div class="step-actions">
                                         <button class="btn btn-pill btn-secondary previous-step"
@@ -380,7 +380,7 @@
     <script src="https://unpkg.com/materialize-stepper@3.1.0/dist/js/mstepper.js"></script>
     <script>
         //Constants
-        const recipesIndexURL = 'https://raw.githubusercontent.com/tabarra/txAdmin-recipes/main/indexv4.json';
+        const recipesIndexURL = 'https://raw.githubusercontent.com/citizenfx/txAdmin-recipes/refs/heads/main/indexv4.json';
         const txDataPath = '<%= dataPath %>';
         const forceGameName = '<%= forceGameName %>' || false;
         const deployerEngineVersion = parseInt('<%= deployerEngineVersion %>');
@@ -487,8 +487,8 @@
             frmNameError.classList.add('d-none');
             const name = frmName.value.trim();
 
-            if(name.length < 3 || name.length > 22){
-                frmNameError.innerHTML = `The name must have between 3 and 22 characters.`;
+            if(name.length < 1 || name.length > 18){
+                frmNameError.innerHTML = `The name must have between 1 and 18 characters.`;
                 frmNameError.classList.remove('d-none');
                 frmName.classList.add('is-invalid');
                 stepperInstace.wrongStep();
@@ -690,7 +690,8 @@
                         destroyFeedback(true);
                     }else{
                         stepperInstace.wrongStep();
-                        s4RemoteTemplateInputError.innerHTML = `<br>Error:</b> ${data.message} <br>Make sure this is a valid Recipe URL.`;
+                        s4RemoteTemplateInputError.innerHTML = '<br><b>Error:</b> <span data-errmsg>Unknown error</span> <br>Make sure this is a valid Recipe URL.';
+                        s4RemoteTemplateInputError.querySelector('[data-errmsg]').textContent = data.message ?? 'Unknown error';
                         s4RemoteTemplateInputError.classList.remove('d-none');
                         s4RemoteTemplateInput.classList.add('is-invalid');
                         destroyFeedback(false);
@@ -698,7 +699,8 @@
                 },
                 error: function (xmlhttprequest, textstatus, message) {
                     stepperInstace.wrongStep();
-                    s4RemoteTemplateInputError.innerHTML = `<br>Error:</b> ${message} <br>Make sure this is a valid Recipe URL.`;
+                    s4RemoteTemplateInputError.innerHTML = '<br><b>Error:</b> <span data-errmsg>Unknown error</span> <br>Make sure this is a valid Recipe URL.';
+                    s4RemoteTemplateInputError.querySelector('[data-errmsg]').textContent = message ?? 'Unknown error';
                     s4RemoteTemplateInputError.classList.remove('d-none');
                     s4RemoteTemplateInput.classList.add('is-invalid');
                     destroyFeedback(false);
@@ -735,7 +737,8 @@
                         destroyFeedback(true);
                     }else{
                         stepperInstace.wrongStep();
-                        s5DeployerTargetError.innerHTML = `<br>Error:</b> ${data.message}`;
+                        s5DeployerTargetError.innerHTML = '<br><b>Error:</b> <span data-errmsg>Unknown error</span>';
+                        s5DeployerTargetError.querySelector('[data-errmsg]').textContent = data.message ?? 'Unknown error';
                         s5DeployerTargetError.classList.remove('d-none');
                         s5DeployerTargetInput.classList.add('is-invalid');
                         destroyFeedback(false);
@@ -778,14 +781,17 @@
                         }
                         destroyFeedback(true)
                     }else{
-                        s4LocalDataPathInputError.innerHTML = data.message;
-                        s4LocalDataPathInputError.classList.remove('d-none');
-                        s4LocalDataPathInput.classList.add('is-invalid');
-                        stepperInstace.wrongStep();
                         if(data.suggestion){
+                            s4LocalDataPathInputError.innerHTML = 'The path provided is invalid. <br>But it looks like <code data-suggestion>unknown</code> is correct. <br>Do you want to use it instead?';
+                            s4LocalDataPathInputError.querySelector('[data-suggestion]').textContent = data.suggestion ?? 'unknown';
                             suggestions['s4LocalDataPathInput'] = data.suggestion;
                             s4LocalDataPathInputFixBtn.classList.remove('d-none');
+                        }else{
+                            s4LocalDataPathInputError.textContent = data.message;
                         }
+                        s4LocalDataPathInputError.classList.remove('d-none');
+                        s4LocalDataPathInput.classList.add('is-invalid');
+                        stepperInstace.wrongStep();
                         destroyFeedback(false)
                     }
                 },