diff --git a/backend/src/matchService.ts b/backend/src/matchService.ts
index 5e6e6d7..1d37269 100644
--- a/backend/src/matchService.ts
+++ b/backend/src/matchService.ts
@@ -163,6 +163,16 @@ export const remove = async (id: string) => {
 	}
 };
 
+export const removeStopped = async (id: string) => {
+	const matchFromStorage = await getFromStorage(id);
+	if (!matchFromStorage) {
+		return false;
+	}
+	matchFromStorage.isStopped = true;
+	await save(matchFromStorage);
+	return true;
+};
+
 export const revive = async (id: string) => {
 	const match = matches.get(id);
 	if (match) {
diff --git a/backend/src/matchesController.ts b/backend/src/matchesController.ts
index 1694d26..26968b9 100644
--- a/backend/src/matchesController.ts
+++ b/backend/src/matchesController.ts
@@ -175,6 +175,13 @@ export class MatchesController extends Controller {
 		const match = MatchService.get(id);
 		if (match) {
 			await Match.update(match, requestBody);
+		} else if (requestBody.gameServer) {
+			// for offline matches only allow to update game server to get match running again
+			const offlineMatch = await MatchService.getFromStorage(id);
+			if (offlineMatch) {
+				offlineMatch.gameServer = requestBody.gameServer;
+				await MatchService.save(offlineMatch);
+			}
 		} else {
 			this.setStatus(404);
 		}
@@ -209,7 +216,9 @@ export class MatchesController extends Controller {
 	@Delete('{id}')
 	async deleteMatch(id: string, @Request() req: ExpressRequest<IAuthResponse>): Promise<void> {
 		if (!(await MatchService.remove(id))) {
-			this.setStatus(404);
+			if (!(await MatchService.removeStopped(id))) {
+				this.setStatus(404);
+			}
 		}
 	}
 
diff --git a/backend/swagger.json b/backend/swagger.json
index b568a15..edc64cc 100644
--- a/backend/swagger.json
+++ b/backend/swagger.json
@@ -1167,7 +1167,8 @@
 						"description": "Match mode (single: stops when match is finished, loop: starts again after match is finished)"
 					},
 					"isLive": {
-						"type": "boolean"
+						"type": "boolean",
+						"description": "Match is currently supervised."
 					}
 				},
 				"required": [
diff --git a/common/types/match.ts b/common/types/match.ts
index a0db5bb..5d8c327 100644
--- a/common/types/match.ts
+++ b/common/types/match.ts
@@ -115,6 +115,7 @@ export interface IMatch {
 }
 
 export interface IMatchResponse extends IMatch {
+	/** Match is currently supervised. */
 	isLive: boolean;
 }
 
diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
index e0bbc28..c5bd254 100644
--- a/frontend/src/components/Chat.tsx
+++ b/frontend/src/components/Chat.tsx
@@ -1,15 +1,17 @@
-import { Component } from 'solid-js';
+import { Component, createSignal } from 'solid-js';
 import { ChatEvent } from '../../../common';
 import { t } from '../utils/locale';
 import { onEnter } from '../utils/onEnter';
 import { Card } from './Card';
-import { ScrollArea } from './ScrollArea';
+import { ErrorComponent } from './ErrorComponent';
 import { TextInput } from './Inputs';
+import { ScrollArea } from './ScrollArea';
 
 export const Chat: Component<{
 	messages: ChatEvent[];
-	sendMessage: (msg: string) => void;
+	sendMessage: (msg: string) => Promise<any>;
 }> = (props) => {
+	const [errorMessage, setErrorMessage] = createSignal('');
 	return (
 		<Card class="text-center">
 			<h2 class="text-lg font-bold">{t('Chat')}</h2>
@@ -18,14 +20,21 @@ export const Chat: Component<{
 			<TextInput
 				type="text"
 				onKeyDown={onEnter((e) => {
-					const msg = e.currentTarget.value.trim();
+					const input = e.currentTarget;
+					const msg = input.value.trim();
 					if (msg) {
-						props.sendMessage(msg);
-						e.currentTarget.value = '';
+						props
+							.sendMessage(msg)
+							.then(() => {
+								input.value = '';
+								setErrorMessage('');
+							})
+							.catch((err) => setErrorMessage(err + ''));
 					}
 				})}
 				placeholder={t('Send chat message...')}
 			/>
+			<ErrorComponent errorMessage={errorMessage()} />
 		</Card>
 	);
 };
diff --git a/frontend/src/components/CreateUpdateMatch.tsx b/frontend/src/components/CreateUpdateMatch.tsx
index 4cce545..a36500f 100644
--- a/frontend/src/components/CreateUpdateMatch.tsx
+++ b/frontend/src/components/CreateUpdateMatch.tsx
@@ -221,11 +221,11 @@ export const CreateUpdateMatch: Component<
 	(
 		| {
 				mode: 'CREATE';
-				match: IMatchCreateDto;
+				match: IMatchCreateDto & { isStopped?: boolean };
 		  }
 		| {
 				mode: 'UPDATE';
-				match: IMatchResponse;
+				match: IMatchResponse & { isStopped?: boolean };
 		  }
 	) & {
 		callback: (data: IMatchUpdateDto & IMatchCreateDto) => Promise<void>;
@@ -278,40 +278,43 @@ export const CreateUpdateMatch: Component<
 
 	return (
 		<>
-			<Show when={props.mode === 'CREATE'}>
-				<Presets
-					matchCreateDto={dto}
-					onSelect={(preset) => {
-						setDto(copyObject(preset));
-						if (!dto.tmtLogAddress) {
-							setTmtLogAddress();
-						}
-					}}
+			<Show when={props.match.isStopped !== true}>
+				<Show when={props.mode === 'CREATE'}>
+					<Presets
+						matchCreateDto={dto}
+						onSelect={(preset) => {
+							setDto(copyObject(preset));
+							if (!dto.tmtLogAddress) {
+								setTmtLogAddress();
+							}
+						}}
+					/>
+				</Show>
+				<div class="prose pt-4">
+					<h2>{t('Teams')}</h2>
+				</div>
+				<TextInput
+					label={t('Team A Name')}
+					value={dto.teamA.name}
+					class={getChangedClasses(
+						props.match.teamA.name,
+						dto.teamA.name,
+						'input-accent border-2'
+					)}
+					onInput={(e) => setDto('teamA', 'name', e.currentTarget.value)}
+				/>
+				<TextInput
+					label={t('Team B Name')}
+					value={dto.teamB.name}
+					class={getChangedClasses(
+						props.match.teamB.name,
+						dto.teamB.name,
+						'input-accent border-2'
+					)}
+					onInput={(e) => setDto('teamB', 'name', e.currentTarget.value)}
 				/>
 			</Show>
-			<div class="prose pt-4">
-				<h2>{t('Teams')}</h2>
-			</div>
-			<TextInput
-				label={t('Team A Name')}
-				value={dto.teamA.name}
-				class={getChangedClasses(
-					props.match.teamA.name,
-					dto.teamA.name,
-					'input-accent border-2'
-				)}
-				onInput={(e) => setDto('teamA', 'name', e.currentTarget.value)}
-			/>
-			<TextInput
-				label={t('Team B Name')}
-				value={dto.teamB.name}
-				class={getChangedClasses(
-					props.match.teamB.name,
-					dto.teamB.name,
-					'input-accent border-2'
-				)}
-				onInput={(e) => setDto('teamB', 'name', e.currentTarget.value)}
-			/>
+
 			<div class="prose pt-4">
 				<h2>{t('Game Server')}</h2>
 			</div>
@@ -364,220 +367,239 @@ export const CreateUpdateMatch: Component<
 				)}
 				onInput={(e) => setDto('gameServer', 'rconPassword', e.currentTarget.value)}
 			/>
-			<div class="prose pt-4 pb-2">
-				<h2>{t('Map Pool')}</h2>
-			</div>
-			<TextArea
-				value={dto.mapPool.join('\n')}
-				class={
-					'border-2 ' +
-					getChangedClasses(
-						props.match.mapPool.join('\n'),
-						dto.mapPool.join('\n'),
-						'input-accent'
-					)
-				}
-				onInput={(e) => setDto('mapPool', e.currentTarget.value.split('\n'))}
-				rows="8"
-			/>
-			<div class="prose pt-4 pb-2">
-				<h2>{t('Election Steps')}</h2>
-			</div>
-			<div class="flex items-baseline">
-				<div class="pr-2">{t('Quick Load:')}</div>
-				<div class="join">
-					<button
-						class="btn btn-sm join-item"
-						onClick={() => {
-							setDto('mapPool', minifyMapPool(dto.mapPool));
-							try {
-								setDto('electionSteps', getSimpleElectionSteps('BO1', dto.mapPool));
-								setElectionErrorMessage('');
-							} catch (err) {
-								setElectionErrorMessage(err + '');
-							}
-						}}
-					>
-						{t('Best of 1')}
-					</button>
-					<button
-						class="btn btn-sm join-item"
-						onClick={() => {
-							setDto('mapPool', minifyMapPool(dto.mapPool));
-							try {
-								setDto('electionSteps', getSimpleElectionSteps('BO3', dto.mapPool));
+
+			<Show when={props.match.isStopped !== true}>
+				<div class="prose pt-4 pb-2">
+					<h2>{t('Map Pool')}</h2>
+				</div>
+				<TextArea
+					value={dto.mapPool.join('\n')}
+					class={
+						'border-2 ' +
+						getChangedClasses(
+							props.match.mapPool.join('\n'),
+							dto.mapPool.join('\n'),
+							'input-accent'
+						)
+					}
+					onInput={(e) => setDto('mapPool', e.currentTarget.value.split('\n'))}
+					rows="8"
+				/>
+				<div class="prose pt-4 pb-2">
+					<h2>{t('Election Steps')}</h2>
+				</div>
+				<div class="flex items-baseline">
+					<div class="pr-2">{t('Quick Load:')}</div>
+					<div class="join">
+						<button
+							class="btn btn-sm join-item"
+							onClick={() => {
+								setDto('mapPool', minifyMapPool(dto.mapPool));
+								try {
+									setDto(
+										'electionSteps',
+										getSimpleElectionSteps('BO1', dto.mapPool)
+									);
+									setElectionErrorMessage('');
+								} catch (err) {
+									setElectionErrorMessage(err + '');
+								}
+							}}
+						>
+							{t('Best of 1')}
+						</button>
+						<button
+							class="btn btn-sm join-item"
+							onClick={() => {
+								setDto('mapPool', minifyMapPool(dto.mapPool));
+								try {
+									setDto(
+										'electionSteps',
+										getSimpleElectionSteps('BO3', dto.mapPool)
+									);
+									setElectionErrorMessage('');
+								} catch (err) {
+									setElectionErrorMessage(err + '');
+								}
+							}}
+						>
+							{t('Best of 3')}
+						</button>
+						<button
+							class="btn btn-sm join-item"
+							onClick={() => {
+								setDto('electionSteps', []);
 								setElectionErrorMessage('');
-							} catch (err) {
-								setElectionErrorMessage(err + '');
-							}
-						}}
-					>
-						{t('Best of 3')}
-					</button>
-					<button
-						class="btn btn-sm join-item"
-						onClick={() => {
-							setDto('electionSteps', []);
-							setElectionErrorMessage('');
-						}}
-					>
-						{t('Empty')}
-					</button>
+							}}
+						>
+							{t('Empty')}
+						</button>
+					</div>
 				</div>
-			</div>
-			<ErrorComponent errorMessage={electionErrorMessage()} />
-			<div
-				class={
-					'space-y-1 pt-4 ' +
-					getChangedClasses(
-						JSON.stringify(props.match.electionSteps),
-						JSON.stringify(dto.electionSteps),
-						'border-2 border-accent'
-					)
-				}
-				ref={electionStepsRef}
-			>
-				<For each={dto.electionSteps}>
-					{(electionStep, index) => (
-						<div class="flex items-center">
-							<div class="join leading-none">
-								<button
-									class="btn btn-square btn-xs join-item"
-									onClick={() => {
-										const newSteps = dto.electionSteps.filter(
-											(step, stepIndex) => stepIndex !== index()
-										);
-										setDto('electionSteps', newSteps);
-									}}
-								>
-									<SvgDelete />
-								</button>
-								<button
-									class="btn btn-square btn-xs join-item"
-									disabled={index() === 0}
-									onClick={() => {
-										const newSteps = [...dto.electionSteps];
-										newSteps.splice(index(), 1);
-										newSteps.splice(index() - 1, 0, electionStep);
-										setDto('electionSteps', newSteps);
-									}}
-								>
-									<SvgKeyboardArrowUp />
-								</button>
-								<button
-									class="btn btn-square btn-xs join-item"
-									disabled={index() === dto.electionSteps.length - 1}
-									onclick={() => {
-										const newSteps = [...dto.electionSteps];
-										newSteps.splice(index(), 1);
-										newSteps.splice(index() + 1, 0, electionStep);
-										setDto('electionSteps', newSteps);
-									}}
-								>
-									<SvgKeyboardArrowDown />
-								</button>
-								<div class="tooltip" data-tip={t('Add new Step')}>
+				<ErrorComponent errorMessage={electionErrorMessage()} />
+				<div
+					class={
+						'space-y-1 pt-4 ' +
+						getChangedClasses(
+							JSON.stringify(props.match.electionSteps),
+							JSON.stringify(dto.electionSteps),
+							'border-2 border-accent'
+						)
+					}
+					ref={electionStepsRef}
+				>
+					<For each={dto.electionSteps}>
+						{(electionStep, index) => (
+							<div class="flex items-center">
+								<div class="join leading-none">
+									<button
+										class="btn btn-square btn-xs join-item"
+										onClick={() => {
+											const newSteps = dto.electionSteps.filter(
+												(step, stepIndex) => stepIndex !== index()
+											);
+											setDto('electionSteps', newSteps);
+										}}
+									>
+										<SvgDelete />
+									</button>
 									<button
 										class="btn btn-square btn-xs join-item"
+										disabled={index() === 0}
 										onClick={() => {
-											addElectionStepIndex = index() + 1;
-											electionStepModalRef?.showModal();
+											const newSteps = [...dto.electionSteps];
+											newSteps.splice(index(), 1);
+											newSteps.splice(index() - 1, 0, electionStep);
+											setDto('electionSteps', newSteps);
 										}}
 									>
-										<SvgAdd />
+										<SvgKeyboardArrowUp />
 									</button>
+									<button
+										class="btn btn-square btn-xs join-item"
+										disabled={index() === dto.electionSteps.length - 1}
+										onclick={() => {
+											const newSteps = [...dto.electionSteps];
+											newSteps.splice(index(), 1);
+											newSteps.splice(index() + 1, 0, electionStep);
+											setDto('electionSteps', newSteps);
+										}}
+									>
+										<SvgKeyboardArrowDown />
+									</button>
+									<div class="tooltip" data-tip={t('Add new Step')}>
+										<button
+											class="btn btn-square btn-xs join-item"
+											onClick={() => {
+												addElectionStepIndex = index() + 1;
+												electionStepModalRef?.showModal();
+											}}
+										>
+											<SvgAdd />
+										</button>
+									</div>
+								</div>
+								<div class="pl-2 font-light">
+									{getElectionStepString(electionStep)}
 								</div>
 							</div>
-							<div class="pl-2 font-light">{getElectionStepString(electionStep)}</div>
-						</div>
-					)}
-				</For>
-			</div>
-			<Show when={dto.electionSteps.length === 0}>
-				<button
-					class="btn btn-square btn-xs join-item"
-					onClick={() => {
-						addElectionStepIndex = 1;
-						electionStepModalRef?.showModal();
-					}}
-				>
-					<SvgAdd />
-				</button>
-			</Show>
-			<Modal ref={electionStepModalRef} class="bg-base-300">
-				<AddElectionStep
-					index={addElectionStepIndex}
-					add={(step) => {
-						const newSteps = [...dto.electionSteps];
-						newSteps.splice(addElectionStepIndex, 0, step);
-						setDto('electionSteps', newSteps);
-						electionStepModalRef?.close();
-					}}
+						)}
+					</For>
+				</div>
+				<Show when={dto.electionSteps.length === 0}>
+					<button
+						class="btn btn-square btn-xs join-item"
+						onClick={() => {
+							addElectionStepIndex = 1;
+							electionStepModalRef?.showModal();
+						}}
+					>
+						<SvgAdd />
+					</button>
+				</Show>
+				<Modal ref={electionStepModalRef} class="bg-base-300">
+					<AddElectionStep
+						index={addElectionStepIndex}
+						add={(step) => {
+							const newSteps = [...dto.electionSteps];
+							newSteps.splice(addElectionStepIndex, 0, step);
+							setDto('electionSteps', newSteps);
+							electionStepModalRef?.close();
+						}}
+					/>
+				</Modal>
+				<div class="prose pt-4">
+					<h2>{t('Rcon Commands')}</h2>
+				</div>
+				<TextArea
+					label={t('Init')}
+					labelTopRight={t('Executed only once: when the match is created')}
+					rows="4"
+					value={dto.rconCommands?.init?.join('\n') ?? ''}
+					class={
+						'font-mono border-2 ' +
+						getChangedClasses(
+							props.match.rconCommands?.init?.join('\n'),
+							dto.rconCommands?.init?.join('\n'),
+							'input-accent'
+						)
+					}
+					onInput={(e) =>
+						setDto('rconCommands', 'init', e.currentTarget.value.split('\n'))
+					}
 				/>
-			</Modal>
-			<div class="prose pt-4">
-				<h2>{t('Rcon Commands')}</h2>
-			</div>
-			<TextArea
-				label={t('Init')}
-				labelTopRight={t('Executed only once: when the match is created')}
-				rows="4"
-				value={dto.rconCommands?.init?.join('\n') ?? ''}
-				class={
-					'font-mono border-2 ' +
-					getChangedClasses(
-						props.match.rconCommands?.init?.join('\n'),
-						dto.rconCommands?.init?.join('\n'),
-						'input-accent'
-					)
-				}
-				onInput={(e) => setDto('rconCommands', 'init', e.currentTarget.value.split('\n'))}
-			/>
-			<TextArea
-				label={t('Knife')}
-				labelTopRight={t('Executed at the start of a knife round')}
-				rows="4"
-				value={dto.rconCommands?.knife?.join('\n') ?? ''}
-				class={
-					'font-mono border-2 ' +
-					getChangedClasses(
-						props.match.rconCommands?.knife?.join('\n'),
-						dto.rconCommands?.knife?.join('\n'),
-						'input-accent'
-					)
-				}
-				onInput={(e) => setDto('rconCommands', 'knife', e.currentTarget.value.split('\n'))}
-			/>
-			<TextArea
-				label={t('Match')}
-				labelTopRight={t('Executed at the start of each match map')}
-				rows="4"
-				value={dto.rconCommands?.match?.join('\n') ?? ''}
-				class={
-					'font-mono border-2 ' +
-					getChangedClasses(
-						props.match.rconCommands?.match?.join('\n'),
-						dto.rconCommands?.match?.join('\n'),
-						'input-accent'
-					)
-				}
-				onInput={(e) => setDto('rconCommands', 'match', e.currentTarget.value.split('\n'))}
-			/>
-			<TextArea
-				label={t('End')}
-				labelTopRight={t('Executed only once: after the end of the last map')}
-				rows="4"
-				value={dto.rconCommands?.end?.join('\n') ?? ''}
-				class={
-					'font-mono border-2 ' +
-					getChangedClasses(
-						props.match.rconCommands?.end?.join('\n'),
-						dto.rconCommands?.end?.join('\n'),
-						'input-accent'
-					)
-				}
-				onInput={(e) => setDto('rconCommands', 'end', e.currentTarget.value.split('\n'))}
-			/>
+				<TextArea
+					label={t('Knife')}
+					labelTopRight={t('Executed at the start of a knife round')}
+					rows="4"
+					value={dto.rconCommands?.knife?.join('\n') ?? ''}
+					class={
+						'font-mono border-2 ' +
+						getChangedClasses(
+							props.match.rconCommands?.knife?.join('\n'),
+							dto.rconCommands?.knife?.join('\n'),
+							'input-accent'
+						)
+					}
+					onInput={(e) =>
+						setDto('rconCommands', 'knife', e.currentTarget.value.split('\n'))
+					}
+				/>
+				<TextArea
+					label={t('Match')}
+					labelTopRight={t('Executed at the start of each match map')}
+					rows="4"
+					value={dto.rconCommands?.match?.join('\n') ?? ''}
+					class={
+						'font-mono border-2 ' +
+						getChangedClasses(
+							props.match.rconCommands?.match?.join('\n'),
+							dto.rconCommands?.match?.join('\n'),
+							'input-accent'
+						)
+					}
+					onInput={(e) =>
+						setDto('rconCommands', 'match', e.currentTarget.value.split('\n'))
+					}
+				/>
+				<TextArea
+					label={t('End')}
+					labelTopRight={t('Executed only once: after the end of the last map')}
+					rows="4"
+					value={dto.rconCommands?.end?.join('\n') ?? ''}
+					class={
+						'font-mono border-2 ' +
+						getChangedClasses(
+							props.match.rconCommands?.end?.join('\n'),
+							dto.rconCommands?.end?.join('\n'),
+							'input-accent'
+						)
+					}
+					onInput={(e) =>
+						setDto('rconCommands', 'end', e.currentTarget.value.split('\n'))
+					}
+				/>
+			</Show>
 
 			<div class="prose pt-4 grid grid-cols-[auto_auto_1fr] place-items-center">
 				<h2 class="m-0">{t('Advanced Settings')}</h2>
@@ -609,221 +631,234 @@ export const CreateUpdateMatch: Component<
 				}
 			>
 				<div class="collapse-content px-0">
-					<SelectInput
-						label={t('Mode')}
-						class={getChangedClasses(
-							props.match.mode,
-							dto.mode,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('mode', e.currentTarget.value as TMatchMode)}
-					>
-						<option value="SINGLE" selected={dto.mode === 'SINGLE'}>
-							{t('Single match (stops when match is finished)')}
-						</option>
-						<option value="LOOP" selected={dto.mode === 'LOOP'}>
-							{t('Loop mode (starts again after match is finished)')}
-						</option>
-					</SelectInput>
-					<SelectInput
-						label={t('Match End Action')}
-						class={getChangedClasses(
-							props.match.matchEndAction,
-							dto.matchEndAction,
-							'input-accent border-2'
-						)}
-						onInput={(e) =>
-							setDto('matchEndAction', e.currentTarget.value as TMatchEndAction)
-						}
-					>
-						<option value="NONE" selected={dto.matchEndAction === 'NONE'}>
-							{t('None')}
-						</option>
-						<option value="KICK_ALL" selected={dto.matchEndAction === 'KICK_ALL'}>
-							{t('Kick all players after match end')}
-						</option>
-						<option value="QUIT_SERVER" selected={dto.matchEndAction === 'QUIT_SERVER'}>
-							{t('Quit server via Rcon after match end')}
-						</option>
-					</SelectInput>
-					<TextInput
-						label={t('TMT Log Address')}
-						labelTopRight={t(
-							'HTTP log receiver from the perspective of the game server'
-						)}
-						value={dto.tmtLogAddress ?? ''}
-						class={getChangedClasses(
-							props.match.tmtLogAddress,
-							dto.tmtLogAddress,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('tmtLogAddress', e.currentTarget.value)}
-					/>
-					<TextInput
-						label={t('Webhook URL')}
-						labelTopRight={t("HTTP address to receive TMT's webhooks")}
-						value={dto.webhookUrl ?? ''}
-						class={getChangedClasses(
-							props.match.webhookUrl,
-							dto.webhookUrl,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('webhookUrl', e.currentTarget.value)}
-					/>
-					<TextArea
-						label={t('Webhook Headers')}
-						labelTopRight={t(
-							'Additional headers that will be added to each webhook request'
-						)}
-						rows="4"
-						value={Object.entries(dto.webhookHeaders ?? {})
-							.map((entry) => entry.join(': '))
-							.join('\n')}
-						class={
-							'font-mono border-2 ' +
-							getChangedClasses(
-								JSON.stringify(props.match.webhookHeaders ?? {}),
-								JSON.stringify(dto.webhookHeaders ?? {}),
-								'input-accent'
-							)
-						}
-						onInput={(e) => {
-							const newWebhookHeaders: IMatchCreateDto['webhookHeaders'] = {};
-							const lines = e.currentTarget.value.split('\n');
-							for (let i = 0; i < lines.length; i++) {
-								const line = lines[i].trim();
-								if (line === '') {
-									continue;
-								}
-								const colonIndex = line.indexOf(':');
-								if (colonIndex === -1) {
-									setWebhookHeadersErrorMessage(
-										'Headers must be in the format of "key: value"'
-									);
-									return;
-								}
-								const key = line.substring(0, colonIndex).trim();
-								const value = line.substring(colonIndex + 1).trimStart();
-								if (newWebhookHeaders[key] !== undefined) {
-									setWebhookHeadersErrorMessage(
-										'Multiple headers with the same key are not possible.'
-									);
-									return;
-								}
-								newWebhookHeaders[key] = value;
-							}
-							setWebhookHeadersErrorMessage('');
-							setDto('webhookHeaders', (prev) => {
-								if (prev) {
-									Object.keys(prev).forEach((key) => {
-										if (newWebhookHeaders[key] === undefined) {
-											newWebhookHeaders[key] = undefined!; // delete previous key/value pair which does exist any more
-										}
-									});
-								}
-								return newWebhookHeaders;
-							});
-						}}
-					/>
-					<ErrorComponent errorMessage={webhookHeadersErrorMessage()} />
-					<TextInput
-						label={t('Match Passthrough')}
-						labelTopRight={t('Custom value to identify the match in 3rd party tools')}
-						min={0}
-						value={dto.passthrough ?? ''}
-						class={getChangedClasses(
-							props.match.passthrough,
-							dto.passthrough,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('passthrough', e.currentTarget.value)}
-					/>
-					<TextInput
-						label={t('Team A Advantage')}
-						type="number"
-						min={0}
-						value={dto.teamA.advantage ?? 0}
-						class={getChangedClasses(
-							props.match.teamA.advantage,
-							dto.teamA.advantage,
-							'input-accent border-2'
-						)}
-						onInput={(e) =>
-							setDto('teamA', 'advantage', parseInt(e.currentTarget.value))
-						}
-					/>
-					<TextInput
-						label={t('Team A Passthrough')}
-						labelTopRight={t('Custom value to identify this team in 3rd party tools')}
-						min={0}
-						value={dto.teamA.passthrough ?? ''}
-						class={getChangedClasses(
-							props.match.teamA.passthrough,
-							dto.teamA.passthrough,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('teamA', 'passthrough', e.currentTarget.value)}
-					/>
-					<TextInput
-						label={t('Team B Advantage')}
-						type="number"
-						min={0}
-						value={dto.teamB.advantage ?? 0}
-						class={getChangedClasses(
-							props.match.teamB.advantage,
-							dto.teamB.advantage,
-							'input-accent border-2'
-						)}
-						onInput={(e) =>
-							setDto('teamB', 'advantage', parseInt(e.currentTarget.value))
-						}
-					/>
-					<TextInput
-						label={t('Team B Passthrough')}
-						labelTopRight={t('Custom value to identify this team in 3rd party tools')}
-						min={0}
-						value={dto.teamB.passthrough ?? ''}
-						class={getChangedClasses(
-							props.match.teamB.passthrough,
-							dto.teamB.passthrough,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('teamB', 'passthrough', e.currentTarget.value)}
-					/>
-					<ToggleInput
-						label={t('Can Clinch')}
-						labelTopRight={t('Ends match series after a map if a winner is determined')}
-						checked={dto.canClinch}
-						class={getChangedClasses(
-							props.match.canClinch,
-							dto.canClinch,
-							'input-accent border-2'
-						)}
-						onInput={(e) => setDto('canClinch', e.currentTarget.checked)}
-					/>
-					<Show when={props.mode === 'UPDATE'}>
+					<Show when={props.match.isStopped !== true}>
 						<SelectInput
-							label={t('Match State')}
-							labelTopRight={t(
-								'Overrides the match state (does not execute anything)'
-							)}
+							label={t('Mode')}
 							class={getChangedClasses(
-								props.mode === 'UPDATE' && props.match.state,
-								dto.state,
+								props.match.mode,
+								dto.mode,
 								'input-accent border-2'
 							)}
 							onInput={(e) => setDto('mode', e.currentTarget.value as TMatchMode)}
 						>
-							<option value="ELECTION" selected={dto.state === 'ELECTION'}>
-								{t('Election')}
+							<option value="SINGLE" selected={dto.mode === 'SINGLE'}>
+								{t('Single match (stops when match is finished)')}
+							</option>
+							<option value="LOOP" selected={dto.mode === 'LOOP'}>
+								{t('Loop mode (starts again after match is finished)')}
+							</option>
+						</SelectInput>
+						<SelectInput
+							label={t('Match End Action')}
+							class={getChangedClasses(
+								props.match.matchEndAction,
+								dto.matchEndAction,
+								'input-accent border-2'
+							)}
+							onInput={(e) =>
+								setDto('matchEndAction', e.currentTarget.value as TMatchEndAction)
+							}
+						>
+							<option value="NONE" selected={dto.matchEndAction === 'NONE'}>
+								{t('None')}
 							</option>
-							<option value="MATCH_MAP" selected={dto.state === 'MATCH_MAP'}>
-								{t('Match Map')}
+							<option value="KICK_ALL" selected={dto.matchEndAction === 'KICK_ALL'}>
+								{t('Kick all players after match end')}
 							</option>
-							<option value="FINISHED" selected={dto.state === 'FINISHED'}>
-								{t('Finished')}
+							<option
+								value="QUIT_SERVER"
+								selected={dto.matchEndAction === 'QUIT_SERVER'}
+							>
+								{t('Quit server via Rcon after match end')}
 							</option>
 						</SelectInput>
+						<TextInput
+							label={t('TMT Log Address')}
+							labelTopRight={t(
+								'HTTP log receiver from the perspective of the game server'
+							)}
+							value={dto.tmtLogAddress ?? ''}
+							class={getChangedClasses(
+								props.match.tmtLogAddress,
+								dto.tmtLogAddress,
+								'input-accent border-2'
+							)}
+							onInput={(e) => setDto('tmtLogAddress', e.currentTarget.value)}
+						/>
+						<TextInput
+							label={t('Webhook URL')}
+							labelTopRight={t("HTTP address to receive TMT's webhooks")}
+							value={dto.webhookUrl ?? ''}
+							class={getChangedClasses(
+								props.match.webhookUrl,
+								dto.webhookUrl,
+								'input-accent border-2'
+							)}
+							onInput={(e) => setDto('webhookUrl', e.currentTarget.value)}
+						/>
+						<TextArea
+							label={t('Webhook Headers')}
+							labelTopRight={t(
+								'Additional headers that will be added to each webhook request'
+							)}
+							rows="4"
+							value={Object.entries(dto.webhookHeaders ?? {})
+								.map((entry) => entry.join(': '))
+								.join('\n')}
+							class={
+								'font-mono border-2 ' +
+								getChangedClasses(
+									JSON.stringify(props.match.webhookHeaders ?? {}),
+									JSON.stringify(dto.webhookHeaders ?? {}),
+									'input-accent'
+								)
+							}
+							onInput={(e) => {
+								const newWebhookHeaders: IMatchCreateDto['webhookHeaders'] = {};
+								const lines = e.currentTarget.value.split('\n');
+								for (let i = 0; i < lines.length; i++) {
+									const line = lines[i].trim();
+									if (line === '') {
+										continue;
+									}
+									const colonIndex = line.indexOf(':');
+									if (colonIndex === -1) {
+										setWebhookHeadersErrorMessage(
+											'Headers must be in the format of "key: value"'
+										);
+										return;
+									}
+									const key = line.substring(0, colonIndex).trim();
+									const value = line.substring(colonIndex + 1).trimStart();
+									if (newWebhookHeaders[key] !== undefined) {
+										setWebhookHeadersErrorMessage(
+											'Multiple headers with the same key are not possible.'
+										);
+										return;
+									}
+									newWebhookHeaders[key] = value;
+								}
+								setWebhookHeadersErrorMessage('');
+								setDto('webhookHeaders', (prev) => {
+									if (prev) {
+										Object.keys(prev).forEach((key) => {
+											if (newWebhookHeaders[key] === undefined) {
+												newWebhookHeaders[key] = undefined!; // delete previous key/value pair which does exist any more
+											}
+										});
+									}
+									return newWebhookHeaders;
+								});
+							}}
+						/>
+						<ErrorComponent errorMessage={webhookHeadersErrorMessage()} />
+						<TextInput
+							label={t('Match Passthrough')}
+							labelTopRight={t(
+								'Custom value to identify the match in 3rd party tools'
+							)}
+							min={0}
+							value={dto.passthrough ?? ''}
+							class={getChangedClasses(
+								props.match.passthrough,
+								dto.passthrough,
+								'input-accent border-2'
+							)}
+							onInput={(e) => setDto('passthrough', e.currentTarget.value)}
+						/>
+						<TextInput
+							label={t('Team A Advantage')}
+							type="number"
+							min={0}
+							value={dto.teamA.advantage ?? 0}
+							class={getChangedClasses(
+								props.match.teamA.advantage,
+								dto.teamA.advantage,
+								'input-accent border-2'
+							)}
+							onInput={(e) =>
+								setDto('teamA', 'advantage', parseInt(e.currentTarget.value))
+							}
+						/>
+						<TextInput
+							label={t('Team A Passthrough')}
+							labelTopRight={t(
+								'Custom value to identify this team in 3rd party tools'
+							)}
+							min={0}
+							value={dto.teamA.passthrough ?? ''}
+							class={getChangedClasses(
+								props.match.teamA.passthrough,
+								dto.teamA.passthrough,
+								'input-accent border-2'
+							)}
+							onInput={(e) => setDto('teamA', 'passthrough', e.currentTarget.value)}
+						/>
+						<TextInput
+							label={t('Team B Advantage')}
+							type="number"
+							min={0}
+							value={dto.teamB.advantage ?? 0}
+							class={getChangedClasses(
+								props.match.teamB.advantage,
+								dto.teamB.advantage,
+								'input-accent border-2'
+							)}
+							onInput={(e) =>
+								setDto('teamB', 'advantage', parseInt(e.currentTarget.value))
+							}
+						/>
+						<TextInput
+							label={t('Team B Passthrough')}
+							labelTopRight={t(
+								'Custom value to identify this team in 3rd party tools'
+							)}
+							min={0}
+							value={dto.teamB.passthrough ?? ''}
+							class={getChangedClasses(
+								props.match.teamB.passthrough,
+								dto.teamB.passthrough,
+								'input-accent border-2'
+							)}
+							onInput={(e) => setDto('teamB', 'passthrough', e.currentTarget.value)}
+						/>
+						<ToggleInput
+							label={t('Can Clinch')}
+							labelTopRight={t(
+								'Ends match series after a map if a winner is determined'
+							)}
+							checked={dto.canClinch}
+							class={getChangedClasses(
+								props.match.canClinch,
+								dto.canClinch,
+								'input-accent border-2'
+							)}
+							onInput={(e) => setDto('canClinch', e.currentTarget.checked)}
+						/>
+						<Show when={props.mode === 'UPDATE'}>
+							<SelectInput
+								label={t('Match State')}
+								labelTopRight={t(
+									'Overrides the match state (does not execute anything)'
+								)}
+								class={getChangedClasses(
+									props.mode === 'UPDATE' && props.match.state,
+									dto.state,
+									'input-accent border-2'
+								)}
+								onInput={(e) => setDto('mode', e.currentTarget.value as TMatchMode)}
+							>
+								<option value="ELECTION" selected={dto.state === 'ELECTION'}>
+									{t('Election')}
+								</option>
+								<option value="MATCH_MAP" selected={dto.state === 'MATCH_MAP'}>
+									{t('Match Map')}
+								</option>
+								<option value="FINISHED" selected={dto.state === 'FINISHED'}>
+									{t('Finished')}
+								</option>
+							</SelectInput>
+						</Show>
 					</Show>
 					<TextArea
 						label={t('JSON Payload')}
diff --git a/frontend/src/components/ElectionStep.tsx b/frontend/src/components/ElectionStep.tsx
index f2c7817..3e48e6e 100644
--- a/frontend/src/components/ElectionStep.tsx
+++ b/frontend/src/components/ElectionStep.tsx
@@ -2,7 +2,6 @@ import { Component, For, createSignal } from 'solid-js';
 import {
 	IElectionStep,
 	IElectionStepAdd,
-	IFixedSide,
 	MapModes,
 	SideFixeds,
 	SideModes,
@@ -15,7 +14,7 @@ import {
 	isElectionStepSkip,
 } from '../../../common';
 import { t } from '../utils/locale';
-import { SelectInput, TextArea, TextInput } from './Inputs';
+import { SelectInput, TextInput } from './Inputs';
 
 export const AddElectionStep: Component<{
 	index: number;
@@ -110,7 +109,7 @@ export const AddElectionStep: Component<{
 						label={t('Map Mode')}
 						onInput={(e) => setSelectedMapMode(e.currentTarget.value as TMapMode)}
 					>
-						<For each={(MapModes as unknown as string[]).sort()}>
+						<For each={MapModes.toSorted()}>
 							{(MapMode) => (
 								<option value={MapMode} selected={selectedMapMode() === MapMode}>
 									{MapMode}
@@ -130,7 +129,7 @@ export const AddElectionStep: Component<{
 							selectedMapMode() === 'RANDOM_PICK'
 						}
 					>
-						<For each={(Whos as unknown as string[]).sort()}>
+						<For each={Whos.toSorted()}>
 							{(Who) => (
 								<option value={Who} selected={selectedMapWho() === Who}>
 									{Who}
@@ -156,7 +155,7 @@ export const AddElectionStep: Component<{
 						onInput={(e) => setSelectedSideMode(e.currentTarget.value as TSideMode)}
 						disabled={isElectionStepSkip(getElectionStep())}
 					>
-						<For each={(SideModes as unknown as string[]).sort()}>
+						<For each={SideModes.toSorted()}>
 							{(SideMode) => (
 								<option value={SideMode} selected={selectedSideMode() === SideMode}>
 									{SideMode}
@@ -173,7 +172,7 @@ export const AddElectionStep: Component<{
 							isElectionStepSkip(getElectionStep()) || selectedSideMode() !== 'PICK'
 						}
 					>
-						<For each={(Whos as unknown as string[]).sort()}>
+						<For each={Whos.toSorted()}>
 							{(Who) => (
 								<option value={Who} selected={selectedSideWho() === Who}>
 									{Who}
@@ -190,7 +189,7 @@ export const AddElectionStep: Component<{
 							isElectionStepSkip(getElectionStep()) || selectedSideMode() !== 'FIXED'
 						}
 					>
-						<For each={(SideFixeds as unknown as string[]).sort()}>
+						<For each={SideFixeds.toSorted()}>
 							{(SideFixed) => (
 								<option
 									value={SideFixed}
diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx
index d286096..7ee700d 100644
--- a/frontend/src/components/MatchCard.tsx
+++ b/frontend/src/components/MatchCard.tsx
@@ -19,15 +19,21 @@ export const MatchCard: Component<{
 	const fetcher = createFetcher(props.match.tmtSecret);
 	const patchMatch = (dto: IMatchUpdateDto) =>
 		fetcher('PATCH', `/api/matches/${props.match.id}`, dto);
-	const stop = () => fetcher('DELETE', `/api/matches/${props.match.id}`);
+	const stop = () =>
+		fetcher('DELETE', `/api/matches/${props.match.id}`).finally(() => location.reload());
 	const restartElection = () => patchMatch({ _restartElection: true });
 	const init = () => patchMatch({ _init: true });
 	const setup = () => patchMatch({ _setup: true });
-	const revive = () => fetcher('PATCH', `/api/matches/${props.match.id}/revive`);
 	const l = window.location;
 	const shareLink = l.protocol + '//' + l.host + l.pathname + '?secret=' + props.match.tmtSecret;
 	let modalRef: HTMLDialogElement | undefined;
 
+	const goToEditPage = () =>
+		navigate(
+			`/matches/${props.match.id}/edit` +
+				(searchParams.secret ? `?secret=${searchParams.secret}` : '')
+		);
+
 	return (
 		<Card class="text-center">
 			<CardMenu
@@ -40,18 +46,12 @@ export const MatchCard: Component<{
 								[t('init'), init],
 								[t('setup'), setup],
 								[t('share match with token'), () => modalRef?.showModal()],
-								[
-									t('edit match'),
-									() =>
-										navigate(
-											`/matches/${props.match.id}/edit` +
-												(searchParams.secret
-													? `?secret=${searchParams.secret}`
-													: '')
-										),
-								],
+								[t('edit match'), goToEditPage],
+							]
+						: [
+								[t('share match with token'), () => modalRef?.showModal()],
+								[t('edit match'), goToEditPage],
 							]
-						: [[t('revive'), mustConfirm(revive)]]
 				}
 			/>
 			<h2 class="text-lg font-bold">{t('Map Wins')}</h2>
diff --git a/frontend/src/components/NotLiveCard.tsx b/frontend/src/components/NotLiveCard.tsx
index 19c51a8..6888b6d 100644
--- a/frontend/src/components/NotLiveCard.tsx
+++ b/frontend/src/components/NotLiveCard.tsx
@@ -1,25 +1,53 @@
-import { Component } from 'solid-js';
+import { Component, createSignal, Show } from 'solid-js';
 import { IMatchResponse } from '../../../common';
 import { createFetcher } from '../utils/fetcher';
 import { t } from '../utils/locale';
 import { Card } from './Card';
+import { ErrorComponent } from './ErrorComponent';
 
 export const NotLiveCard: Component<{
 	match: IMatchResponse;
 }> = (props) => {
 	const fetcher = createFetcher(props.match.tmtSecret);
-	const revive = () => fetcher('PATCH', `/api/matches/${props.match.id}/revive`);
+	const reload = () => location.reload();
+
+	const [reviveErrorMessage, setReviveErrorMessage] = createSignal('');
+	const revive = () =>
+		fetcher('PATCH', `/api/matches/${props.match.id}/revive`)
+			.then(reload)
+			.catch((err) => setReviveErrorMessage(err + ''));
+
+	const [stopErrorMessage, setStopErrorMessage] = createSignal('');
+	const stop = () =>
+		fetcher('DELETE', `/api/matches/${props.match.id}`)
+			.then(reload)
+			.catch((err) => setStopErrorMessage(err + ''));
+
 	return (
 		<Card class="text-center">
 			<h2 class="text-lg font-bold">{t('Match is not live')}</h2>
-			<p>
-				{t('This match is not live (currently not tracked).')}
-				<br />
-				{t('To start tracking again, give it a revive:')}
-			</p>
+			<p>{t('This match is not being supervised.')}</p>
+			<ErrorComponent errorMessage={reviveErrorMessage()} />
+			<div class="h-4"></div>
 			<button class="btn" onClick={revive}>
-				{t('revive')}
+				{t('Start Supervising')}
 			</button>
+
+			<Show when={!props.match.isStopped}>
+				<div class="h-4"></div>
+				<p>
+					{t('This match was not stopped properly.')}
+					<br />
+					{t('The next time TMT starts, it will try to supervise it again.')}
+					<br />
+					{t('Stop it to prevent supervising retries.')}
+				</p>
+				<ErrorComponent errorMessage={stopErrorMessage()} />
+				<div class="h-4"></div>
+				<button class="btn" onClick={stop}>
+					{t('Stop Supervising')}
+				</button>
+			</Show>
 		</Card>
 	);
 };
diff --git a/frontend/src/pages/match.tsx b/frontend/src/pages/match.tsx
index 085576d..9392b77 100644
--- a/frontend/src/pages/match.tsx
+++ b/frontend/src/pages/match.tsx
@@ -74,11 +74,10 @@ export const MatchPage: Component = () => {
 
 	onCleanup(() => disconnect());
 
-	const sendChatMessage = (msg: string) => {
+	const sendChatMessage = (msg: string) =>
 		fetcher('POST', `/api/matches/${params.id}/server/rcon`, [
 			`say ${escapeRconSayString(msg)}`,
 		]);
-	};
 
 	return (
 		<Show when={data.match} fallback={<Loader />}>
diff --git a/frontend/src/pages/matchEdit.tsx b/frontend/src/pages/matchEdit.tsx
index 71aaf5f..0b93edb 100644
--- a/frontend/src/pages/matchEdit.tsx
+++ b/frontend/src/pages/matchEdit.tsx
@@ -82,25 +82,23 @@ export const MatchEditPage: Component = () => {
 						<Show when={!match().isLive}>
 							<NotLiveCard match={match()} />
 						</Show>
-						<Show when={match().isLive}>
-							<Card>
-								<CreateUpdateMatch
-									mode="UPDATE"
-									match={match()}
-									callback={async (dto) => {
-										await fetcher(
-											'PATCH',
-											`/api/matches/${params.id}`,
-											getUpdateDto(match(), dto)
-										);
-										navigate(`/matches/${params.id}`);
-									}}
-									getFinalDto={(dto) =>
-										JSON.stringify(getUpdateDto(match(), dto), undefined, 4)
-									}
-								/>
-							</Card>
-						</Show>
+						<Card>
+							<CreateUpdateMatch
+								mode="UPDATE"
+								match={match()}
+								callback={async (dto) => {
+									await fetcher(
+										'PATCH',
+										`/api/matches/${params.id}`,
+										getUpdateDto(match(), dto)
+									);
+									navigate(`/matches/${params.id}`);
+								}}
+								getFinalDto={(dto) =>
+									JSON.stringify(getUpdateDto(match(), dto), undefined, 4)
+								}
+							/>
+						</Card>
 					</div>
 				)}
 			</Show>
diff --git a/frontend/src/pages/matches.tsx b/frontend/src/pages/matches.tsx
index a2f3049..fae2b9e 100644
--- a/frontend/src/pages/matches.tsx
+++ b/frontend/src/pages/matches.tsx
@@ -1,9 +1,10 @@
 import { useSearchParams } from '@solidjs/router';
-import { Component, createEffect, For, onCleanup, Show } from 'solid-js';
+import { Component, createEffect, createSignal, For, onCleanup, Show } from 'solid-js';
 import { createStore } from 'solid-js/store';
 import { Event, IMatchResponse } from '../../../common';
 import { SvgSettings } from '../assets/Icons';
 import { Card } from '../components/Card';
+import { SelectInput } from '../components/Inputs';
 import {
 	MatchList,
 	MatchTableColumnLabels,
@@ -28,22 +29,67 @@ const defaultColumns: TColumnsToShow = {
 	GAME_SERVER: true,
 };
 
+type FilterOption = {
+	title: string;
+	search: string;
+	label: string;
+	/** indicates, if new matches should be appended to the table */
+	includeNewMatches: boolean;
+};
+const filterOptions: FilterOption[] = [
+	{
+		title: t('Live Matches'),
+		search: '?isLive=true',
+		label: t('Only show matches that are currently being supervised'),
+		includeNewMatches: true,
+	},
+	{
+		title: t('Not Live'),
+		search: '?isLive=false',
+		label: t('Only show offline matches (not supervised)'),
+		includeNewMatches: false,
+	},
+	{
+		title: t('Dangling Matches'),
+		search: '?isLive=false&isStopped=false&state=ELECTION&state=MATCH_MAP',
+		label: t('Only show offline matches, which have not been properly stopped'),
+		includeNewMatches: false,
+	},
+];
+
 export const MatchesPage: Component = () => {
 	const [searchParams, setSearchParams] = useSearchParams<{
-		isLive?: string;
+		searchString?: string;
 		columns?: string;
+		includeNewMatches?: string;
 	}>();
 	const fetcher = createFetcher();
 	const [data, setData] = createStore<{
 		matches?: IMatchResponse[];
 	}>({});
+	const [filterLabel, setFilterLabel] = createSignal('');
+
+	const getCurrentFilterOption = () =>
+		!searchParams.searchString
+			? filterOptions[0]
+			: filterOptions.find((fo) => fo.search === searchParams.searchString);
 
 	createEffect(() => {
-		fetcher<IMatchResponse[]>('GET', `/api/matches?isLive=${searchParams.isLive ?? true}`).then(
-			(matches) => {
-				setData('matches', matches);
-			}
-		);
+		fetcher<IMatchResponse[]>(
+			'GET',
+			`/api/matches${searchParams.searchString || filterOptions[0].search}`
+		).then((matches) => {
+			setData('matches', matches);
+		});
+	});
+
+	createEffect(() => {
+		const filterOption = getCurrentFilterOption();
+		if (filterOption) {
+			setFilterLabel(filterOption.label);
+		} else {
+			setFilterLabel(t('A custom filter from the URL is used'));
+		}
 	});
 
 	const columnsToShow = (): TColumnsToShow => {
@@ -69,7 +115,7 @@ export const MatchesPage: Component = () => {
 		});
 		const str = columns.join(',').toLowerCase();
 		localStorage.setItem('columns', str);
-		setSearchParams({ columns: str });
+		setSearchParams({ columns: str }, { replace: true });
 	};
 
 	const onWsMsg = (msg: Event) => {
@@ -79,8 +125,10 @@ export const MatchesPage: Component = () => {
 				(setData as any)('matches', mapIndex, ...msg.path, msg.value);
 			}
 		} else if (msg.type === 'MATCH_CREATE') {
-			if (msg.match.isLive === ((searchParams.isLive ?? 'true') === 'true')) {
-				// only add to match list if filter matches
+			if (
+				searchParams.includeNewMatches === 'true' ||
+				getCurrentFilterOption()?.includeNewMatches
+			) {
 				setData('matches', (existing) => [...(existing ?? []), msg.match]);
 			}
 		}
@@ -128,22 +176,29 @@ export const MatchesPage: Component = () => {
 
 	return (
 		<Card>
-			<div class="flex w-full flex-row space-x-8">
-				<label class="label cursor-pointer">
-					<span class="label-text pr-4">{t('offline matches')}</span>
-					<input
-						type="checkbox"
-						class="toggle"
-						checked={searchParams.isLive !== 'false'}
-						onchange={(e) =>
-							setSearchParams(
-								{ isLive: e.currentTarget.checked + '' },
-								{ replace: true }
-							)
-						}
-					/>
-					<span class="label-text pl-4">{t('live matches')}</span>
-				</label>
+			<div class="flex w-full flex-row space-x-8 place-items-end">
+				<SelectInput
+					onInput={(e) =>
+						setSearchParams({ searchString: e.currentTarget.value }, { replace: true })
+					}
+					labelBottomLeft={filterLabel()}
+				>
+					<Show when={getCurrentFilterOption() === undefined}>
+						<option selected={getCurrentFilterOption() === undefined}>
+							{t('Custom Filter')}
+						</option>
+					</Show>
+					<For each={filterOptions}>
+						{(filterOption) => (
+							<option
+								value={filterOption.search}
+								selected={searchParams.searchString === filterOption.search}
+							>
+								{filterOption.title}
+							</option>
+						)}
+					</For>
+				</SelectInput>
 
 				<div class="flex-grow"></div>