diff --git a/templates/base.html b/templates/base.html
index e96b72c..5df5a28 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -125,62 +125,173 @@
 			--bs-primary: {{ cfg.style.accentDark }} !important;
 		}
 	</style>
+	{% endif %}
+	{% if cfg.style.customCss and cfg.style.useCustomCss %}
+	<style>
+		{{ cfg.style.customCss | safe }}
+	</style>
+	{% endif %}
+	<style>
+		/* some essential styles so 3rd-party themes don't break */
+		.markdown-content p {
+			margin: 0;
+		}
+		.markdown-content ol {
+			margin-bottom: 0;
+		}
+		.markdown-content blockquote {
+			border-left: 3px solid var(--bs-border-color);
+		}
+		.markdown-content blockquote p {
+			margin-left: .5rem;
+		}
+		.markdown-content p:not(:first-child) {
+			margin-top: .5rem;
+		}
+		.fw-buttons button {
+			width: 100%;
+			margin-top: .25rem;
+			margin-bottom: .25rem;
+		}
+		.tab {
+			display: inline-flex;
+			min-width: 130px;
+			align-items: center;
+			gap: .25em;
+		}
+		.htmx-indicator {
+			display: none;
+		}
+		.htmx-request .htmx-indicator,
+		.htmx-request.htmx-indicator {
+			display: inline-block;
+		}
+		.btn-close {
+			--bs-btn-close-bg: none;
+		}
+		.ts-share {
+			max-width: 300px;
+			text-overflow: ellipsis;
+			align-content: center;
+		}
+		.no-arrow.dropdown-toggle::after {
+			border: none;
+			display: none;
+		}
+		{#- for compatibility #}
+		{%- if cfg.style.useCustomCss and cfg.style.overrideCatAskStyles %}
+		.modal-header .btn-close i {
+			display: none;
+		}
+		{%- endif %}
+		@media screen and (max-width: 1200px) {
+			.ts-share {
+				max-width: 250px;
+			}
+		}
+		@media screen and (min-width: 620px) and (max-width: 991px) {
+			.modal-dialog {
+				--bs-modal-width: 95%;
+			}
+		}
+		@media screen and (max-width: 767px) {
+			.ts-share {
+				max-width: unset;
+				width: 100%;
+			}
+		}
+		@media screen and (min-width: 767px) and (max-width: 840px) {
+			.ts-share {
+				max-width: 190px;
+			}
+		}
+	</style>
+	<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}">
+	{%- if cfg.accessibility.font == 'default' -%}
+	<link rel="preload" href="{{ url_for('static', filename='fonts/rubik.woff2') }}" as="font" type="font/woff2" crossorigin>
+	{%- endif -%}
+
+	<!-- favicon -->
+	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}">
+	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon/favicon-32x32.png') }}">
+	<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icons/favicon/favicon-16x16.png') }}">
+	<link rel="icon" type="image/png" sizes="192x192" href="{{ url_for('static', filename='icons/favicon/android-chrome-192x192.png') }}">
+	<link rel="icon" type="image/png" sizes="512x512" href="{{ url_for('static', filename='icons/favicon/android-chrome-512x512.png') }}">
+	<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon/favicon.ico') }}">
+
+	<!-- metadata -->
+	<!-- Primary Meta Tags -->
+	<meta name="title" content="{{ metadata.title }}" />
+	<meta name="description" content="{{ metadata.description }}" />
+
+	<!-- Open Graph / Facebook -->
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="{{ metadata.url }}" />
+	<meta property="og:title" content="{{ metadata.title }}" />
+	<meta property="og:description" content="{{ metadata.description }}" />
+	<meta property="og:image" content="{{ metadata.image }}" />
+
+	<!-- Twitter -->
+	<meta property="twitter:card" content="summary_large_image" />
+	<meta property="twitter:url" content="{{ metadata.url }}" />
+	<meta property="twitter:title" content="{{ metadata.title }}" />
+	<meta property="twitter:description" content="{{ metadata.description }}" />
+	<meta property="twitter:image" content="{{ metadata.image }}" />
+
+	<!-- pwa manifest -->
+	<link rel="manifest" href="{{ url_for('api.pwaManifest') }}" />
+	<script src="{{ url_for('static', filename='js/color-modes.js') }}"></script>
+
+	{% block additionalHeadItems %}{% endblock %}
 	<script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
 	<title>{% block title %}{% endblock %} | {{ cfg.instance.title }}</title>
 </head>
-<body class="ms-2 me-2 mb-2 col-xxl-11 mx-xxl-auto">
+<body class="">
 	<a class="visually-hidden-focusable btn" href="#main-content">Skip to content</a>
-	<div class="container-fluid">
+	<div class="mb-2{% if not bodyNoXMargin %} px-3{% endif %} col-xxl-11{% if not noContainerFluid %} container-fluid{% endif %}">
+		{% block navbar %}
 		<div class="d-flex justify-content-between align-items-center mt-3 {% if logged_in %}mb-3{% endif %}">
 			<ul class="nav nav-{{ cfg.style.navStyle }} position-relative">
 				<li class="nav-item d-flex align-items-center {% if cfg.style.navStyle == 'pills' %}me-1{% endif %}"><a href="{{ url_for('index') }}" aria-label="{{ cfg.instance.title }}'s icon"><img src="{{ url_for('static', filename='icons/favicon/apple-touch-icon.png') }}" loading="lazy" width="32" height="32" alt="{{ cfg.instance.title }}'s icon"></a></li>
-				<li class="nav-item d-flex align-items-center">
-					<a class="nav-link {{ homeLink }}" id="home-link" href="{{ url_for('index') }}"{% if cfg.style.navIconsOnly %} title="Home"{% endif %}>
-						{% if cfg.style.navIcons %}<i class="bi bi-house-door fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
-						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Home</span>{% endif %}
-					</a>
-				</li>
-				{% if logged_in %}
-				<li class="nav-item d-flex align-items-center position-relative">
-					<a class="nav-link {{ inboxLink }}{% if cfg.style.navIcons %} ms-1{% endif %}" id="inbox-link" href="{{ url_for('inbox') }}"{% if cfg.style.navIconsOnly %} title="Inbox"{% endif %}>
-						{% if questionCount > 0 %}<span class="position-absolute top-0 start-100 badge text-bg-primary rounded-circle" style="transform: translate(-80%,-30%) !important">{{ questionCount }} <span class="visually-hidden">unanswered questions</span></span>{% endif %}
-						{% if cfg.style.navIcons %}<i class="bi bi-inbox fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
-						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Inbox</span>{% endif %}
-					</a>
-				</li>
-				<li class="nav-item d-flex align-items-center">
-					<a class="nav-link {{ adminLink }}{% if cfg.style.navIcons %} ms-1{% endif %}" id="admin-link" href="{{ url_for('admin.information') }}"{% if cfg.style.navIconsOnly %} title="Admin"{% endif %}>
-						{% if cfg.style.navIcons %}<i class="bi bi-gear fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
-						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Admin</span>{% endif %}
-					</a>
-				</li>
-				{% endif %}
+				<ul class="d-flex p-0">
+					{% include 'snippets/navLinks.html' %}
+				</ul>
 			</ul>
 			<ul class="nav nav-{{ cfg.style.navStyle }} m-0">
 				{% if logged_in %}
 				<form action="{{ url_for('admin.logout') }}" method="POST" class="d-none" id="logout_form"></form>
 				<li>
-					<button form="logout_form" type="submit" class="nav-link"{% if cfg.style.navIconsOnly %} title="Logout"{% endif %}>
+					<button form="logout_form" type="submit" class="nav-link"{% if cfg.style.navIconsOnly %} title="{{ _('Logout') }}"{% endif %}>
 						{% if cfg.style.navIcons %}<i class="bi bi-box-arrow-right fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
-						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Logout</span>{% endif %}
+						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>{{ _('Logout') }}</span>{% endif %}
 					</button>
 				</li>
 				{% else %}
 				<li>
-					<a class="nav-link {{ loginLink }}" href="{{ url_for('admin.login') }}"{% if cfg.style.navIconsOnly %} title="Login"{% endif %}>
+					<a class="nav-link {{ loginLink }}" href="{{ url_for('admin.login') }}"{% if cfg.style.navIconsOnly %} title="{{ _('Login') }}"{% endif %}>
 						{% if cfg.style.navIcons %}<i class="bi bi-box-arrow-in-right fs-mob-5{% if cfg.style.navIconsOnly %} fs-5{% endif %}"></i>{% endif %}
-						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>Login</span>{% endif %}
+						{% if not cfg.style.navIconsOnly %}<span{% if cfg.style.navIcons %} class="d-none d-lg-inline ms-1"{% endif %}>{{ _('Login') }}</span>{% endif %}
 					</a>
 				</li>
 				{% endif %}
 			</ul>
 		</div>
+		{# will do later
+		<div class="d-flex border-top bg-body z-3 px-3 py-2 d-md-none fixed-bottom mobile-nav">
+			<ul class="nav nav-{{ cfg.style.navStyle }} position-relative d-flex justify-content-between w-100">
+				{% with mobileNav = True %}
+				{% include 'snippets/navLinks.html' %}
+				{% endwith %}
+			</ul>
+		</div>
+		#}
+		{% endblock %}
 		{% with messages = get_flashed_messages(with_categories=True) %}
 		{% if messages %}
 		{% for category, message in messages %}
 		<div class="alert alert-{{ category }} alert-dismissible col-lg-4 m-auto" role="alert">
-			<div>{{ message }}</div>
-			<button type="button" class="btn-close d-flex align-items-stretch fs-5 p-3" aria-label="Close"><i class="bi bi-x-lg lh-sm"></i></button>
+			<p class="m-0">{{ message }}</p>
+			<button type="button" class="btn-close d-flex align-items-stretch fs-5 p-3" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x-lg lh-sm"></i></button>
 		</div>
 		{% endfor %}
 		{% endif %}
@@ -188,8 +299,9 @@
 		<div id="main-content">
 			{% block content %}{% endblock %}
 		</div>
+		{% block footer %}
 		<footer class="py-3 my-4 d-flex justify-content-between align-items-center">
-			<div class="row">
+			<div class="d-flex gap-2">
 				<div class="dropdown bd-mode-toggle">
 					<button class="btn btn-outline-secondary py-2 dropdown-toggle"
 						id="bd-theme"