diff --git a/templates/admin/index.html b/templates/admin/index.html
index ce16c3f..be3266f 100644
--- a/templates/admin/index.html
+++ b/templates/admin/index.html
@@ -3,160 +3,264 @@
 {% set adminLink = 'active' %}
 {% block additionalHeadItems %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/toastify.css') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/coloris.min.css') }}">
 {% endblock %}
 {% block content %}
 <h1 class="mb-3">Admin panel</h1>
 <!-- this is actually not used anymore, but htmx requires a valid target so we have to use it -->
 <div id="response-container"></div>
 <a class="btn d-lg-none mb-2" href="#preview">Skip to preview</a>
-<form hx-trigger="click from:#saveConfig, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
 <a class="visually-hidden-focusable" href="#preview">Skip to preview</a>
 <div class="row">
-	<div class="col-sm-6">
-				<h2 id="instance">Instance</h2>
-				<div class="form-group mb-3">
-					<label class="form-label" for="instance.title">Title <small class="text-body-secondary">(e.g. My question box)</small></label>
-					<input type="text" id="instance.title" name="instance.title" value="{{ cfg.instance.title }}" oninput="updateText('instance.title', 'title')" class="form-control">
-					<p class="form-text">Title of this CatAsk instance</p>
-				</div>
-				<div class="form-group mb-3">
-					<label class="form-label d-flex flex-column flex-lg-row align-items-lg-center justify-content-between" for="instance.description">
-						<span>Description <small class="text-body-secondary">(e.g. Ask me a question!)</small></span>
-						<small class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</small>
-					</label>
-					<textarea id="instance.description" name="instance.description" oninput="updateText('instance.description', 'desc')" class="form-control" style="height: 200px; resize: vertical;">{{ cfg.instance.description }}</textarea>
-					<p class="form-text">Description of this CatAsk instance</p>
-				</div>
-				<div class="form-group mb-3">
-					<label class="form-label d-flex flex-column flex-lg-row align-items-lg-center justify-content-between" for="instance.rules">
-						<span>Rules</span>
-						<small class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</small>
-					</label>
-					<textarea id="instance.rules" name="instance.rules" class="form-control" style="height: 200px; resize: vertical;" oninput="updateText('instance.rules', 'rules-content')">{{ cfg.instance.rules }}</textarea>
-					<p class="form-text">Rules of this CatAsk instance</p>
-				</div>
-				<div class="form-group mb-3">
-					<label class="form-label" for="instance.image">Relative image path <small class="text-body-secondary">(default: /static/img/ca_screenshot.png)</small></label>
-					<input type="text" id="instance.image" name="instance.image" value="{{ cfg.instance.image }}" class="form-control">
-					<p class="form-text">Image that's going to be used in a link preview</p>
-				</div>
-				<div class="form-group mb-4">
-					<label class="form-label" for="instance.fullBaseUrl">Base URL <small class="text-body-secondary">(e.g. https://ask.example.com)</small></label>
-					<input type="text" id="instance.fullBaseUrl" name="instance.fullBaseUrl" value="{{ cfg.instance.fullBaseUrl }}" class="form-control">
-					<p class="form-text">Full URL to homepage of this CatAsk instance without a trailing slash</p>
-				</div>
-				<h2 id="general">General</h2>
-				<div class="form-group mb-3">
-					<label class="form-label" for="charLimit">Question character limit</label>
-					<input type="number" id="charLimit" name="charLimit" value="{{ cfg.charLimit }}" class="form-control">
-					<p class="form-text">Max length of a question in characters; questions extending this character limit will not be added to the database</p>
-				</div>
-				<div class="form-group mb-4">
-					<label class="form-label" for="anonName">Name for anonymous users</label>
-					<input type="text" id="anonName" name="anonName" value="{{ cfg.anonName }}" class="form-control">
-					<p class="form-text">This name will be used for questions asked to you by anonymous users</p>
-				</div>
+	<div class="col mw-100">
+		<form hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
+			<h2 id="instance" class="mb-3 fw-normal d-flex align-items-center justify-content-between">
+				Instance
+				<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#preview-collapse" aria-expanded="true" aria-controls="preview-collapse"><i class="bi bi-arrows-expand-vertical me-1"></i> Toggle preview</button>
+			</h2>
+			<div class="form-group mb-3">
+				<label class="form-label" for="instance.title">Title <small class="text-body-secondary">(e.g. My question box)</small></label>
+				<input type="text" id="instance.title" name="instance.title" value="{{ cfg.instance.title }}" oninput="updateText('instance.title', 'title')" class="form-control">
+				<p class="form-text">Title of this CatAsk instance</p>
+			</div>
+			<div class="form-group mb-3">
+				<label class="form-label d-flex flex-column flex-lg-row align-items-lg-center justify-content-between" for="instance.description">
+					<span>Description <small class="text-body-secondary">(e.g. Ask me a question!)</small></span>
+					<small class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</small>
+				</label>
+				<textarea id="instance.description" name="instance.description" oninput="updateText('instance.description', 'desc')" class="form-control" style="height: 200px; resize: vertical;">{{ cfg.instance.description }}</textarea>
+				<p class="form-text">Description of this CatAsk instance</p>
+			</div>
+			<div class="form-group mb-3">
+				<label class="form-label d-flex flex-column flex-lg-row align-items-lg-center justify-content-between" for="instance.rules">
+					<span>Rules</span>
+					<small class="text-body-secondary"><i class="bi bi-markdown me-1"></i> Markdown supported</small>
+				</label>
+				<textarea id="instance.rules" name="instance.rules" class="form-control" style="height: 200px; resize: vertical;" oninput="updateText('instance.rules', 'rules-content')">{{ cfg.instance.rules }}</textarea>
+				<p class="form-text">Rules of this CatAsk instance</p>
+			</div>
+			<div class="form-group mb-3">
+				<label class="form-label" for="instance.image">Relative image path <small class="text-body-secondary">(default: /static/img/ca_screenshot.png)</small></label>
+				<input type="text" id="instance.image" name="instance.image" value="{{ cfg.instance.image }}" class="form-control">
+				<p class="form-text">Image that's going to be used in a link preview</p>
+			</div>
+			<div class="form-group mb-2">
+				<label class="form-label" for="instance.fullBaseUrl">Base URL <small class="text-body-secondary">(e.g. https://ask.example.com)</small></label>
+				<input type="text" id="instance.fullBaseUrl" name="instance.fullBaseUrl" value="{{ cfg.instance.fullBaseUrl }}" class="form-control">
+				<p class="form-text">Full URL to homepage of this CatAsk instance without a trailing slash</p>
+			</div>
+			<div class="form-group mb-4">
+				<button type="submit" class="btn btn-primary" id="saveConfig">
+					<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
+					<span class="visually-hidden" role="status">Loading...</span>
+					Save
+				</button>
+			</div>
+		</form>
+		<h2 id="customize" class="mb-3 fw-normal">Customize</h2>
+		<h3 class="fw-light">Favicon</h3>
+		<form hx-trigger="click from:#saveFavicon, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.uploadFavicon') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
+			<p class="m-0">Current favicon: <img src="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}" width="32" height="32" alt="{{ cfg.instance.title }}'s icon" class="rounded"></p>
+			<div>
+				<label for="favicon" class="form-label">Upload favicon</label>
+				<input class="form-control" type="file" id="favicon" name="favicon">
+			</div>
+			<div class="mb-4">
+				<button type="submit" class="btn btn-primary mt-3" id="saveFavicon">
+					<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
+					<span class="visually-hidden" role="status">Loading...</span>
+					Upload
+				</button>
+			</div>
+		</form>
+		<form hx-trigger="click from:#saveConfig, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.updateConfig') }}" hx-target="#response-container" hx-swap="none">
+			<h3 class="fw-light">Accent color</h3>
+			{# <h4 class="fw-light">Color</h4> #}
+			<div class="form-group d-flex flex-column">
+				<label class="form-label" for="style.accentLight">Light theme</label>
+				<input type="text" name="style.accentLight" id="style.accentLight" value="{{ cfg.style.accentLight }}" class="form-control" data-coloris>
+				<p class="form-text">Default: <b>#6345d9</b></p>
+			</div>
+			<div class="form-group d-flex flex-column">
+				<label class="form-label" for="style.accentDark">Dark theme</label>
+				<input type="text" name="style.accentDark" id="style.accentDark" value="{{ cfg.style.accentDark }}" class="form-control" data-coloris>
+				<p class="form-text">Default: <b>#7259d9</b></p>
+			</div>
+			{# brain doesn't feel like implementing this rn (9/27/24)
+			<h4 class="fw-light mt-2">Background</h4>
+			<div class="form-group d-flex flex-column">
+				<label class="form-label" for="style.bgLight">Light theme</label>
+				<input type="text" name="style.bgLight" id="style.bgLight" value="{{ cfg.style.bgLight }}" class="form-control" data-coloris>
+				<p class="form-text">Default: <b>#ffffff</b></p>
+			</div>
+			<div class="form-group d-flex flex-column">
+				<label class="form-label" for="style.bgDark">Dark theme</label>
+				<input type="text" name="style.bgDark" id="style.bgDark" value="{{ cfg.style.bgDark }}" class="form-control" data-coloris>
+				<p class="form-text">Default: <b>#202020</b></p>
+			</div>
+			#}
+			<div class="form-check mb-3">
+				<input
+				class="form-check-input"
+				type="checkbox"
+				name="_style.tintColors"
+				id="_style.tintColors"
+				value="{{ cfg.style.tintColors }}"
+				{% if cfg.style.tintColors == true %}checked{% endif %}>
+				<input type="hidden" id="style.tintColors" name="style.tintColors" value="{{ cfg.style.tintColors }}">
+				<label for="_style.tintColors" class="form-check-label">Tint all colors with accent color</label>
+			</div>
+			{#
+			<div class="form-check mb-3">
+				<input
+				class="form-check-input"
+				type="checkbox"
+				name="_style.tintBackground"
+				id="_style.tintBackground"
+				value="{{ cfg.style.tintBackground }}"
+				{% if cfg.style.tintBackground == true %}checked{% endif %}>
+				<input type="hidden" id="style.tintBackground" name="style.tintBackground" value="{{ cfg.style.tintBackground }}">
+				<label for="_style.tintBackground" class="form-check-label">Tint background with accent color</label>
+			</div>
+			#}
+			<h3 class="fw-light">Navbar link style</h3>
+			<div class="form-check">
+				<input class="form-check-input" type="radio" name="style.navStyle" id="style.navStyle.underline" value="underline" {% if cfg.style.navStyle == 'underline' %}checked{% endif %}>
+				<label class="form-check-label" for="style.navStyle.underline">
+					Underline <span class="text-body-secondary">(default)</span>
+				</label>
+			</div>
+			<div class="form-check mb-4">
+				<input class="form-check-input" type="radio" name="style.navStyle" id="style.navStyle.pills" value="pills" {% if cfg.style.navStyle == 'pills' %}checked{% endif %}>
+				<label class="form-check-label" for="style.navStyle.pills">
+					Pills
+				</label>
+			</div>
+			<h3 class="fw-light">Info box layout</h3>
+			<div class="form-check">
+				<input class="form-check-input" type="radio" name="style.infoBoxLayout" id="style.infoBoxLayout.column" value="column" {% if cfg.style.infoBoxLayout == 'column' %}checked{% endif %}>
+				<label class="form-check-label" for="style.infoBoxLayout.column">
+					Column <span class="text-body-secondary">(default)</span>
+				</label>
+			</div>
+			<div class="form-check mb-4">
+				<input class="form-check-input" type="radio" name="style.infoBoxLayout" id="style.infoBoxLayout.row" value="row" {% if cfg.style.infoBoxLayout == 'row' %}checked{% endif %}>
+				<label class="form-check-label" for="style.infoBoxLayout.row">
+					Row
+				</label>
+			</div>
+			<h3 class="fw-light">Trimmed content</h3>
+			<div class="form-group mb-3">
+				<label class="form-label" for="trimContentAfter">Trim content after (characters)</label>
+				<input type="number" id="trimContentAfter" name="trimContentAfter" value="{{ cfg.trimContentAfter }}" class="form-control">
+				<p class="form-text">Maximum length of content before it gets trimmed (used in sharing options); set to 0 to disable</p>
+			</div>
+			<h2 id="general" class="mb-3 fw-normal">General</h2>
+			<div class="form-group mb-3">
+				<label class="form-label" for="charLimit">Question character limit</label>
+				<input type="number" id="charLimit" name="charLimit" value="{{ cfg.charLimit }}" class="form-control">
+				<p class="form-text">Max length of a question in characters; questions extending this character limit will not be added to the database</p>
+			</div>
+			<div class="form-group mb-4">
+				<label class="form-label" for="anonName">Name for anonymous users</label>
+				<input type="text" id="anonName" name="anonName" value="{{ cfg.anonName }}" class="form-control">
+				<p class="form-text">This name will be used for questions asked to you by anonymous users</p>
+			</div>
 
-<!-- reserved for 1.5.0 or later -->
-				<!-- <h3>Info block layout</h3> -->
-<!-- <div class="btn-group mb-4 w-100" role="group" aria-label="Info block layout toggle button group"> -->
-  <!-- <input type="radio" class="btn-check" name="infoBlockLayout" id="columnLayout" autocomplete="off" checked> -->
-  <!-- <label class="btn btn-outline-secondary w-100" for="columnLayout">Column</label> -->
-<!--  -->
-  <!-- <input type="radio" class="btn-check" name="infoBlockLayout" id="rowLayout" autocomplete="off"> -->
-  <!-- <label class="btn btn-outline-secondary w-100" for="rowLayout">Row</label> -->
-<!-- </div> -->
-
-				<div class="form-check mb-2">
-					<input
-						class="form-check-input"
-						type="checkbox"
-						name="_lockInbox"
-						id="_lockInbox"
-						value="{{ cfg.lockInbox }}"
-						{% if cfg.lockInbox == true %}checked{% endif %}>
-					<input type="hidden" id="lockInbox" name="lockInbox" value="{{ cfg.lockInbox }}">
-					<label for="_lockInbox" class="form-check-label">Lock inbox and don't allow new questions</label>
-				</div>
-				<div class="form-check mb-2">
-					<input
-						class="form-check-input"
-						type="checkbox"
-						name="_allowAnonQuestions"
-						id="_allowAnonQuestions"
-						value="{{ cfg.allowAnonQuestions }}"
-						{% if cfg.allowAnonQuestions == true %}checked{% endif %}>
-					<input type="hidden" id="allowAnonQuestions" name="allowAnonQuestions" value="{{ cfg.allowAnonQuestions }}">
-					<label for="_allowAnonQuestions" class="form-check-label">Allow anonymous questions</label>
-				</div>
-				<div class="form-check mb-2">
-					<input
-						class="form-check-input"
-						type="checkbox"
-						name="_noDeleteConfirm"
-						id="_noDeleteConfirm"
-						value="{{ cfg.noDeleteConfirm }}"
-						{% if cfg.noDeleteConfirm == true %}checked{% endif %}>
-					<input type="hidden" id="noDeleteConfirm" name="noDeleteConfirm" value="{{ cfg.noDeleteConfirm }}">
-					<label for="_noDeleteConfirm" class="form-check-label">Disable confirmation when deleting questions</label>
-				</div>
-				<div class="form-check mb-3">
-					<input
-						class="form-check-input"
-						type="checkbox"
-						name="_showQuestionCount"
-						id="_showQuestionCount"
-						value="{{ cfg.showQuestionCount }}"
-						{% if cfg.showQuestionCount == true %}checked{% endif %}>
-					<input type="hidden" id="showQuestionCount" name="showQuestionCount" value="{{ cfg.showQuestionCount }}">
-					<label for="_showQuestionCount" class="form-check-label">Show question count in homepage</label>
-				</div>
-				<div class="form-group mb-3">
-					<button type="submit" class="btn btn-primary mt-3" id="saveConfig">
-						<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
-						<span class="visually-hidden" role="status">Loading...</span>
-						Save
-					</button>
-				</div>
-			</form>
-			<hr class="mt-4 mb-4">
-			<form hx-trigger="click from:#save-blacklist, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('admin.index') }}" hx-target="#response-container" hx-swap="none">
-				<input type="hidden" name="action" value="update_word_blacklist">
-				<div class="form-group mb-3">
-					<label class="form-label" for="blacklist_cat"><h2 id="blacklist">Word blacklist</h2></label>
-					<p class="text-body-secondary">Blacklisted words for questions; one word per line</p>
-					<textarea id="blacklist_cat" name="blacklist" style="height: 300px; resize: vertical;" class="form-control">{{ blacklist }}</textarea>
-					<button type="submit" class="btn btn-primary mt-3" id="save-blacklist">
-						<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
-						<span class="visually-hidden" role="status">Loading...</span>
-						Save
-					</button>
-				</div>
-			</form>
+			<div class="form-check mb-2">
+				<input
+				class="form-check-input"
+				type="checkbox"
+				name="_lockInbox"
+				id="_lockInbox"
+				value="{{ cfg.lockInbox }}"
+				{% if cfg.lockInbox == true %}checked{% endif %}>
+				<input type="hidden" id="lockInbox" name="lockInbox" value="{{ cfg.lockInbox }}">
+				<label for="_lockInbox" class="form-check-label">Lock inbox and don't allow new questions</label>
+			</div>
+			<div class="form-check mb-2">
+				<input
+				class="form-check-input"
+				type="checkbox"
+				name="_allowAnonQuestions"
+				id="_allowAnonQuestions"
+				value="{{ cfg.allowAnonQuestions }}"
+				{% if cfg.allowAnonQuestions == true %}checked{% endif %}>
+				<input type="hidden" id="allowAnonQuestions" name="allowAnonQuestions" value="{{ cfg.allowAnonQuestions }}">
+				<label for="_allowAnonQuestions" class="form-check-label">Allow anonymous questions</label>
+			</div>
+			<div class="form-check mb-2">
+				<input
+				class="form-check-input"
+				type="checkbox"
+				name="_noDeleteConfirm"
+				id="_noDeleteConfirm"
+				value="{{ cfg.noDeleteConfirm }}"
+				{% if cfg.noDeleteConfirm == true %}checked{% endif %}>
+				<input type="hidden" id="noDeleteConfirm" name="noDeleteConfirm" value="{{ cfg.noDeleteConfirm }}">
+				<label for="_noDeleteConfirm" class="form-check-label">Disable confirmation when deleting questions</label>
+			</div>
+			<div class="form-check mb-3">
+				<input
+				class="form-check-input"
+				type="checkbox"
+				name="_showQuestionCount"
+				id="_showQuestionCount"
+				value="{{ cfg.showQuestionCount }}"
+				{% if cfg.showQuestionCount == true %}checked{% endif %}>
+				<input type="hidden" id="showQuestionCount" name="showQuestionCount" value="{{ cfg.showQuestionCount }}">
+				<label for="_showQuestionCount" class="form-check-label">Show question count in homepage</label>
+			</div>
+			<div class="form-group mb-3">
+				<button type="submit" class="btn btn-primary mt-3" id="saveConfig">
+					<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
+					<span class="visually-hidden" role="status">Loading...</span>
+					Save
+				</button>
+			</div>
+		</form>
+		<hr class="mt-4 mb-4">
+		<form hx-trigger="click from:#save-blacklist, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('admin.index') }}" hx-target="#response-container" hx-swap="none">
+			<input type="hidden" name="action" value="update_word_blacklist">
+			<div class="form-group mb-3">
+				<label class="form-label" for="blacklist_cat"><h2 id="blacklist" class="fw-normal">Word blacklist</h2></label>
+				<p class="text-body-secondary">Blacklisted words for questions; one word per line</p>
+				<textarea id="blacklist_cat" name="blacklist" style="height: 300px; resize: vertical;" class="form-control">{{ blacklist }}</textarea>
+				<button type="submit" class="btn btn-primary mt-3" id="save-blacklist">
+					<span class="me-1 spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
+					<span class="visually-hidden" role="status">Loading...</span>
+					Save
+				</button>
+			</div>
+		</form>
 	</div>
-	<div class="col-sm-6" id="preview">
-	<h2>Preview</h2>
-	<button class="text-warning-emphasis d-inline-flex align-items-center btn btn-sm mw-100" type="button" data-bs-toggle="collapse" data-bs-target="#preview-warning"><i class="bi bi-exclamation-triangle fs-5 me-2"></i> The preview might not always be accurate</button>
-<div class="collapse" id="preview-warning">
-	<small class="mt-2 text-body-secondary">The preview is not guaranteed to render the same as on other pages, because it uses a different renderer (<b>marked (js)</b> while everything else uses <b>mistune (python)</b>)<br>The reason for this is live markdown rendering support</small>
-</div>
+	<div class="collapse show collapse-horizontal col" id="preview-collapse">
+		<div>
+			<div id="preview">
+				<h2 class="mb-3 fw-normal">Preview</h2>
+				<button class="text-warning-emphasis d-inline-flex align-items-center btn btn-sm btn-outline-secondary mw-100" type="button" data-bs-toggle="collapse" data-bs-target="#preview-warning"><i class="bi bi-exclamation-triangle me-2"></i> The preview might not be accurate <i class="bi bi-chevron-down ms-1 small"></i></button>
+				<div class="collapse" id="preview-warning">
+					<small class="mt-2 text-body-secondary">The preview is not guaranteed to render the same as on other pages, because it uses a different renderer (<b>marked (js)</b> while everything else uses <b>mistune (python)</b>)<br>The reason for this is live markdown rendering support</small>
+				</div>
+			</div>
 
 			<h3 class="h1 text-center fw-bold mt-4" id="title">{{ cfg.instance.title }}</h3>
-	{% autoescape off %}
-	<h4 class="h5 text-center fw-light" id="desc">{{ cfg.instance.description | render_markdown }}</h4>
-	{% endautoescape %}
-		<div class="m-auto col-sm-10">
-			<div class="accordion" id="rules-accordion">
-				<div class="accordion-item">
-					<h2 class="accordion-header">
-						<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rules" aria-expanded="false" aria-controls="collapseTwo">
-							<i class="bi bi-exclamation-triangle me-2 fs-4"></i> Rules
-						</button>
-					</h2>
-					<div id="rules" class="accordion-collapse collapse" data-bs-parent="#rules-accordion">
-					  <div class="accordion-body">
-							<div class="markdown-content" id="rules-content">{{ cfg.instance.rules | render_markdown }}</div>
-					  </div>
+			{% autoescape off %}
+			<h4 class="h5 text-center fw-light" id="desc">{{ cfg.instance.description | render_markdown }}</h4>
+			{% endautoescape %}
+			<div class="m-auto col-sm-10">
+				<div class="accordion" id="rules-accordion">
+					<div class="accordion-item">
+						<h2 class="accordion-header">
+							<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rules" aria-expanded="false" aria-controls="collapseTwo">
+								<i class="bi bi-exclamation-triangle me-2 fs-4"></i> Rules
+							</button>
+						</h2>
+						<div id="rules" class="accordion-collapse collapse" data-bs-parent="#rules-accordion">
+							<div class="accordion-body">
+								<div class="markdown-content" id="rules-content">{{ cfg.instance.rules | render_markdown }}</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -167,45 +271,67 @@
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/toastify.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/coloris.min.js') }}"></script>
 <script>
-marked.use({
-  breaks: true,
-  gfm: true,
-});
-function updateText(input, element) {
-    const inputEl = document.getElementById(input);
-    const replaceEl = document.getElementById(element);
-    replaceEl.innerHTML = marked.parse(inputEl.value);
-}
+	Coloris({
+		theme: 'square',
+		themeMode: 'auto',
+		formatToggle: true,
+		alpha: false,
+		swatches: [
+			'#c70f0f',  // Red
+		    '#db5d0e',  // Orange
+		    '#968829',  // Yellow
+		    '#217d1a',  // Green
+		    '#28b59b',  // Turquoise
+		    '#338FFF',  // Blue
+		    '#3358ff',
+		    '#6345d9',  // Indigo
+		    '#A833FF',  // Purple
+		    '#d1298b'   // Pink
+		    ],
+	});
+	marked.use({
+		breaks: true,
+		gfm: true,
+	});
+	function updateText(input, element) {
+		const inputEl = document.getElementById(input);
+		const replaceEl = document.getElementById(element);
+		replaceEl.innerHTML = marked.parse(inputEl.value);
+	}
 </script>
 <script>
-	// fix handling checkboxes and radios
-	document.querySelectorAll('.form-check-input, .btn-check').forEach(function(checkbox) {
+	// fix handling checkboxes
+	document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
 		checkbox.addEventListener('change', function() {
-	        checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
-	    });
+			checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
+		});
 	});
 </script>
 <script>
-	document.addEventListener('htmx:afterRequest', function(event) {
-		console.log("reached event listener");
-		const jsonResponse = event.detail.xhr.response;
-		if (jsonResponse) {
-			const parsed = JSON.parse(jsonResponse);
-			const alertType = event.detail.successful ? 'success' : 'danger';
-			message = event.detail.successful ? parsed.message : parsed.error;
-			if (event.detail.target.id != "question-count") {
-				Toastify({
-					text: message,
-					duration: 3000,
-					gravity: "top",
-					position: "right",
-					stopOnFocus: true,
-					className: `alert alert-${alertType} shadow alert-dismissible`,
-					close: true
-				}).showToast();
+	const forms = document.querySelectorAll('form');
+	forms.forEach((form) => {
+		form.addEventListener('htmx:afterRequest', function(event) {
+			console.log("reached event listener");
+			const jsonResponse = event.detail.xhr.response;
+			if (jsonResponse) {
+				const parsed = JSON.parse(jsonResponse);
+				const alertType = event.detail.successful ? 'success' : 'danger';
+				message = event.detail.successful ? parsed.message : parsed.error;
+				if (event.detail.target.id != "question-count") {
+					Toastify({
+						text: message,
+						duration: 3000,
+						gravity: "top",
+						position: "right",
+						stopOnFocus: true,
+						className: `alert alert-${alertType} shadow alert-dismissible`,
+						close: true
+					}).showToast();
+				}
 			}
-		}
+		});
 	});
 </script>
 {% endblock %}