diff --git a/public/signup_login_wall.html b/public/signup_login_wall.html
index 986d817..ffed02c 100644
--- a/public/signup_login_wall.html
+++ b/public/signup_login_wall.html
@@ -5,7 +5,7 @@
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
-			position: absolute;
+			position: fixed;
 			top: 0;
 			left: 0;
 			right: 0;
@@ -18,13 +18,11 @@
 
 		#auth-container {
 			width: 95%;
-			min-height: 25rem;
 			position: relative;
 			background: hsl(from var(--bg) h s calc(l/1.1) / 0.5);
 			max-width: 40em;
 			margin: 0 auto;
 			border-radius: calc( var(--border-radius) * 2);
-			overflow: hidden;
 
 			transition: all 0.33s ease;
 			animation: zoomsettle 0.4s ease;
@@ -41,15 +39,6 @@
 			}
 		}
 
-		#login-tab .tab-content {
-			min-height: 17rem;
-			overflow: hidden;
-		}
-
-		#signup-tab .tab-content {
-			min-height: 21rem;
-		}
-
 		body[data-user] #signup-login-wall {
 			visibility: hidden;
 			opacity: 0;
@@ -58,7 +47,7 @@
 
 		#signup-login-wall form {
 			width: 100%;
-			padding: 1.5rem 1.5rem 0 1.5rem;
+			padding: 0.5rem 1.5rem 0;
 		}
 	</style>
 
@@ -66,96 +55,93 @@
 		<!-- #include "./files/settings/signup_pitch.html" or "./files/settings/signup_pitch.md" or "./signup_pitch.default.md" -->
 
 		<div class="tabs">
-			<div id="signup-tab" class="tab">
-				<input
-					type="radio"
-					name="signup-login-tabs"
-					id="signup-tab-input"
-					class="tab-switch"
-					checked="checked"
-				/>
-				<label for="signup-tab-input" class="tab-label">
-					<div class="label">Sign Up</div>
-				</label>
-				<div class="tab-content">
-					<form data-smart="true" data-method="POST" id="signup-form" action="/api/users">
+			<input
+				type="radio"
+				name="signup-login-tabs"
+				id="signup-tab-input"
+				class="tabswitch"
+				checked="checked"
+			/>
+			<label for="signup-tab-input" class="tablabel">
+				<div class="label">Sign Up</div>
+			</label>
+			<div id="signup-tab" class="panel">
+				<form data-smart="true" data-method="POST" id="signup-form" action="/api/users">
+					<script>
+						{
+							const form = document.currentScript.closest("form");
+							form.on_reply = (response) => {
+								const user = response.user;
+								APP.login( user );
+							};
+						}
+					</script>
+					<div>
+						<input id="signup-username" type="text" name="username" required />
+						<label class="placeholder" for="signup-username">username</label>
+					</div>
+					<div>
+						<input id="signup-password" type="password" name="password" required />
+						<label class="placeholder" for="signup-password">password</label>
+					</div>
+					<div>
 						<script>
-							{
-								const form = document.currentScript.closest("form");
-								form.on_reply = (response) => {
-									const user = response.user;
-									APP.login( user );
-								};
-							}
-						</script>
-						<div>
-							<input id="signup-username" type="text" name="username" required />
-							<label class="placeholder" for="signup-username">username</label>
-						</div>
-						<div>
-							<input id="signup-password" type="password" name="password" required />
-							<label class="placeholder" for="signup-password">password</label>
-						</div>
-						<div>
-							<script>
-								APP.on( 'load', () => {
-									const query = new URL(document.location.toString())
-										.searchParams;
-									const invite_code = query.get("invite_code");
-									if (typeof invite_code === "string" && invite_code.length) {
-										document.getElementById("signup-invite-code").value =
-											decodeURIComponent(invite_code);
+							APP.on( 'load', () => {
+								const query = new URL(document.location.toString())
+									.searchParams;
+								const invite_code = query.get("invite_code");
+								if (typeof invite_code === "string" && invite_code.length) {
+									document.getElementById("signup-invite-code").value =
+										decodeURIComponent(invite_code);
 
-										document.getElementById("signup-tab-input").checked = true;
-									}
-								});
-							</script>
-							<input
-								id="signup-invite-code"
-								type="text"
-								name="invite_code"
-								required
-							/>
-							<label class="placeholder" for="signup-invite-code">invite code</label>
-						</div>
-						<button id="signup-submit" type="submit" class="primary">Sign Up</button>
-					</form>
-				</div>
-			</div>
-			<div id="login-tab" class="tab">
-				<input
-					type="radio"
-					name="signup-login-tabs"
-					id="login-tab-input"
-					class="tab-switch"
-				/>
-				<label for="login-tab-input" class="tab-label">
-					<div class="label">Log In</div>
-				</label>
-				<div class="tab-content">
-					<form data-smart="true" data-method="POST" id="login-form" action="/api/auth">
-						<script>
-							{
-								const form = document.currentScript.closest("form");
-								form.on_reply = (response) => {
-									const user = response.user;
-									APP.login( user );
-								};
-							}
+									document.getElementById("signup-tab-input").checked = true;
+								}
+							});
 						</script>
-						<div>
-							<input id="login-username" type="text" name="username" required />
-							<label class="placeholder" for="login-username">username</label>
-						</div>
-						<div>
-							<input id="login-password" type="password" name="password" required />
-							<label class="placeholder" for="login-password">password</label>
-						</div>
-						<div>
-							<button id="login-submit" type="submit" class="primary">Log In</button>
-						</div>
-					</form>
-				</div>
+						<input
+							id="signup-invite-code"
+							type="text"
+							name="invite_code"
+							required
+						/>
+						<label class="placeholder" for="signup-invite-code">invite code</label>
+					</div>
+					<button id="signup-submit" type="submit" class="primary">Sign Up</button>
+				</form>
+			</div>
+
+			<input
+				type="radio"
+				name="signup-login-tabs"
+				id="login-tab-input"
+				class="tabswitch"
+			/>
+			<label for="login-tab-input" class="tablabel">
+				<div class="label">Log In</div>
+			</label>
+			<div id="login-tab" class="panel">
+				<form data-smart="true" data-method="POST" id="login-form" action="/api/auth">
+					<script>
+						{
+							const form = document.currentScript.closest("form");
+							form.on_reply = (response) => {
+								const user = response.user;
+								APP.login( user );
+							};
+						}
+					</script>
+					<div>
+						<input id="login-username" type="text" name="username" required />
+						<label class="placeholder" for="login-username">username</label>
+					</div>
+					<div>
+						<input id="login-password" type="password" name="password" required />
+						<label class="placeholder" for="login-password">password</label>
+					</div>
+					<div>
+						<button id="login-submit" type="submit" class="primary">Log In</button>
+					</div>
+				</form>
 			</div>
 		</div>
 	</div>
diff --git a/public/tabs/blurbs/blurbs.html b/public/tabs/blurbs/blurbs.html
index 19454c8..74e9f63 100644
--- a/public/tabs/blurbs/blurbs.html
+++ b/public/tabs/blurbs/blurbs.html
@@ -127,122 +127,120 @@
 	}
 </style>
 
-<div id="blurbs" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="blurb-tab-input"
-		class="tab-switch"
-		data-view="blurbs"
-	/>
-	<label for="blurb-tab-input" class="tab-label"
-		><div class="icon blurb"></div>
-		<div class="label">Blurbs</div>
-	</label>
-	<div class="tab-content">
-		<div id="blurbs-container" class="container">
-			<!-- #include "./README.md" -->
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="blurb-tab-input"
+	class="tabswitch"
+	data-view="blurbs"
+/>
+<label for="blurb-tab-input" class="tablabel"
+	><div class="icon blurb"></div>
+	<div class="label">Blurbs</div>
+</label>
+<div class="panel">
+	<div id="blurbs-container" class="container">
+		<!-- #include "./README.md" -->
 
-			<!-- #include "./new_blurb.html" -->
+		<!-- #include "./new_blurb.html" -->
 
-			<div
-				id="blurbs-list"
-				data-feed
-				data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.blurb' ) !== -1"
-				data-source="/api/events?type=blurb,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
-				data-longpolling="true"
-				data-reverse="true"
-				data-insert="prepend"
-				data-autoscroll="true"
-			>
-				<script>
-				{
-					const feed = document.currentScript.closest("[data-feed]");
+		<div
+			id="blurbs-list"
+			data-feed
+			data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.blurb' ) !== -1"
+			data-source="/api/events?type=blurb,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
+			data-longpolling="true"
+			data-reverse="true"
+			data-insert="prepend"
+			data-autoscroll="true"
+		>
+			<script>
+			{
+				const feed = document.currentScript.closest("[data-feed]");
 
-					APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
+				APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
 
-					feed.__target_element = (item) => {
-						return (
-							document.querySelector(
-								`.blurb-container[data-blurb_id='${item.parent_id}'] > .replies-container`,
-							) ?? feed
-						);
+				feed.__target_element = (item) => {
+					return (
+						document.querySelector(
+							`.blurb-container[data-blurb_id='${item.parent_id}'] > .replies-container`,
+						) ?? feed
+					);
+				};
+				feed.__target_element = (item) => {
+					let target = feed;
+					switch (item.type) {
+						case "reaction":
+							target = document.querySelector(
+								`.blurb-container[data-event_id='${item.parent_id}'] > .reactions-container`,
+							);
+							break;
+						case "blurb":
+						default:
+							target =
+								document.querySelector(
+									`.blurb-container[data-event_id='${item.parent_id}'] > .replies-container`,
+								) ?? feed;
+							break;
+					}
+
+					return target;
+				};
+
+				feed.__context = async (item) => {
+					const blurb_datetime = datetime_to_local(item.timestamps.created);
+
+					return {
+						event: item,
+						blurb: item,
+						creator: await APP.USERS.get(item.creator_id),
+						blurb_datetime
 					};
-					feed.__target_element = (item) => {
-						let target = feed;
-						switch (item.type) {
-							case "reaction":
-								target = document.querySelector(
-									`.blurb-container[data-event_id='${item.parent_id}'] > .reactions-container`,
-								);
-								break;
-							case "blurb":
-							default:
-								target =
-									document.querySelector(
-										`.blurb-container[data-event_id='${item.parent_id}'] > .replies-container`,
-									) ?? feed;
-								break;
-						}
-
-						return target;
-					};
-
-					feed.__context = async (item) => {
-						const blurb_datetime = datetime_to_local(item.timestamps.created);
-
-						return {
-							event: item,
-							blurb: item,
-							creator: await APP.USERS.get(item.creator_id),
-							blurb_datetime
-						};
-					};
-				}
-				</script>
-				<template data-for_type="blurb">
-					<div
-						id="${ context.blurb.id }"
-						class="blurb-container"
-						data-event_id="${context.blurb.id}"
-						data-creator_id="${context.creator.id}"
-						data-blurb_id="${context.blurb.id}"
-						data-temp_id="${context.blurb.meta?.temp_id ?? ""}">
-						<div class="media-preview-container">
-							${context.blurb.data?.media?.length ? context.blurb.data.media.map(function(url) { return url ? `<img src='${url}' loading="lazy"/>` : ''; }).join('\n') : ''}
-						</div>
-
-						<div class="info-container">
-							<div class="avatar-container inline">
-								<img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" loading="lazy" />
-							</div>
-							<div class="username-container">
-								<span class="username">${context.creator.username}</span>
-							</div>
-							<div class="datetime-container">
-								<span class="long">${context.blurb_datetime.long}</span>
-								<span class="short">${context.blurb_datetime.short}</span>
-							</div>
-						</div>
-						<div class="content-container">${htmlify(md_to_html(context.blurb.data.blurb))}</div>
-						<div class="reactions-container"></div>
-						<button class="icon more" commandfor="eventactionspopover"></button>
-						<!-- #include "./new_blurb.html" -->
-						<div class="replies-container"></div>
+				};
+			}
+			</script>
+			<template data-for_type="blurb">
+				<div
+					id="${ context.blurb.id }"
+					class="blurb-container"
+					data-event_id="${context.blurb.id}"
+					data-creator_id="${context.creator.id}"
+					data-blurb_id="${context.blurb.id}"
+					data-temp_id="${context.blurb.meta?.temp_id ?? ""}">
+					<div class="media-preview-container">
+						${context.blurb.data?.media?.length ? context.blurb.data.media.map(function(url) { return url ? `<img src='${url}' loading="lazy"/>` : ''; }).join('\n') : ''}
 					</div>
-				</template>
-				<template data-for_type="reaction">
-					<div
-						id="${context.event.id}"
-						class="reaction-container"
-						data-event_id="${context.event.id}"
-						data-creator_id="${context.creator.id}"
-						data-temp_id="${context.event.meta?.temp_id ?? ''}"
-					>
-						<span class="reaction">${ context.event.data.reaction }</span>
+
+					<div class="info-container">
+						<div class="avatar-container inline">
+							<img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" loading="lazy" />
+						</div>
+						<div class="username-container">
+							<span class="username">${context.creator.username}</span>
+						</div>
+						<div class="datetime-container">
+							<span class="long">${context.blurb_datetime.long}</span>
+							<span class="short">${context.blurb_datetime.short}</span>
+						</div>
 					</div>
-				</template>
-			</div>
+					<div class="content-container">${htmlify(md_to_html(context.blurb.data.blurb))}</div>
+					<div class="reactions-container"></div>
+					<button class="icon more" commandfor="eventactionspopover"></button>
+					<!-- #include "./new_blurb.html" -->
+					<div class="replies-container"></div>
+				</div>
+			</template>
+			<template data-for_type="reaction">
+				<div
+					id="${context.event.id}"
+					class="reaction-container"
+					data-event_id="${context.event.id}"
+					data-creator_id="${context.creator.id}"
+					data-temp_id="${context.event.meta?.temp_id ?? ''}"
+				>
+					<span class="reaction">${ context.event.data.reaction }</span>
+				</div>
+			</template>
 		</div>
 	</div>
 </div>
diff --git a/public/tabs/calendar/calendar.html b/public/tabs/calendar/calendar.html
index be736d3..2fcb3bc 100644
--- a/public/tabs/calendar/calendar.html
+++ b/public/tabs/calendar/calendar.html
@@ -1,16 +1,14 @@
-<div id="calendar" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="calendar-tab-input"
-		class="tab-switch"
-		data-view="calendar"
-	/>
-	<label for="calendar-tab-input" class="tab-label mockup"
-		><div class="icon calendar"></div>
-		<div class="label">Calendar</div></label
-	>
-	<div class="tab-content">
-		<!-- #include "./README.md" -->
-	</div>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="calendar-tab-input"
+	class="tabswitch"
+	data-view="calendar"
+/>
+<label for="calendar-tab-input" class="tablabel mockup"
+	><div class="icon calendar"></div>
+	<div class="label">Calendar</div></label
+>
+<div class="panel">
+	<!-- #include "./README.md" -->
 </div>
diff --git a/public/tabs/chat/chat.css b/public/tabs/chat/chat.css
index 3c553cb..d944a00 100644
--- a/public/tabs/chat/chat.css
+++ b/public/tabs/chat/chat.css
@@ -1,10 +1,10 @@
-#chat #chat-container {
+#chat-container {
 	position: relative;
 	width: 100%;
 	height: 100%;
 }
 
-#chat #chat-content {
+#chat-container #chat-content {
 	overflow-y: scroll;
 	scroll-behavior: smooth;
 	position: absolute;
@@ -14,13 +14,14 @@
 	bottom: 5rem;
 	padding: 1.5rem 1.5rem 0.75rem 1.5rem;
 }
+
 @media screen and (max-width: 1200px) {
-	#chat #chat-content {
+	#chat-container #chat-content {
 		padding: 0.75rem;
 	}
 }
 
-#chat #chat-entry-container {
+#chat-container #chat-entry-container {
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -29,18 +30,18 @@
 	padding: 1rem;
 }
 
-#chat #chat-entry-container form {
+#chat-container #chat-entry-container form {
 	display: flex;
 	flex-direction: row;
 }
 
-#chat #chat-entry-container form input[type="file"] {
+#chat-container #chat-entry-container form input[type="file"] {
 	opacity: 0;
 	display: none;
 }
 
-#chat #chat-entry-container form button,
-#chat #chat-entry-container form label {
+#chat-container #chat-entry-container form button,
+#chat-container #chat-entry-container form label {
 	position: relative;
 	top: inherit;
 	font-size: inherit;
@@ -54,12 +55,12 @@
 	border: 1px solid rgba(128, 128, 128, 0.2);
 }
 
-#chat #chat-entry-container form textarea {
+#chat-container #chat-entry-container form textarea {
 	flex-grow: 1;
 	resize: none;
 }
 
-#chat .message-container {
+#chat-container .message-container {
 	position: relative;
 	transition: all 0.33s;
 	background: var(--bg-lighter);
@@ -68,7 +69,7 @@
 	border-radius: var(--border-radius);
 }
 
-#chat .message-container .html-from-markdown {
+#chat-container .message-container .html-from-markdown {
 	padding: 0;
 }
 
@@ -100,45 +101,33 @@
 	padding-top: 0 !important;
 }
 
-.user-tock.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick),
-.user-tock.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock),
-.user-tick.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick),
-.user-tick.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock),
-.user-tock.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick),
-.user-tock.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock),
-.user-tick.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick),
-.user-tick.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock) {
+.user-tock.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
+.user-tock.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock),
+.user-tick.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
+.user-tick.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
+.user-tock.time-tock+.user-tick.time-tick:has(+ .user-tick.time-tick),
+.user-tock.time-tick+.user-tick.time-tock:has(+ .user-tick.time-tock),
+.user-tick.time-tock+.user-tock.time-tick:has(+ .user-tock.time-tick),
+.user-tick.time-tick+.user-tock.time-tock:has(+ .user-tock.time-tock) {
 	/* border: 1px dotted green; */
 	margin-bottom: -0.75rem !important;
 }
 
-#chat
-	.message-container.user-tick.time-tick
-	+ .message-container.user-tick.time-tick
-	.info-container,
-#chat
-	.message-container.user-tick.time-tock
-	+ .message-container.user-tick.time-tock
-	.info-container,
-#chat
-	.message-container.user-tock.time-tick
-	+ .message-container.user-tock.time-tick
-	.info-container,
-#chat
-	.message-container.user-tock.time-tock
-	+ .message-container.user-tock.time-tock
-	.info-container {
+#chat .message-container.user-tick.time-tick+.message-container.user-tick.time-tick .info-container,
+#chat .message-container.user-tick.time-tock+.message-container.user-tick.time-tock .info-container,
+#chat .message-container.user-tock.time-tick+.message-container.user-tock.time-tick .info-container,
+#chat .message-container.user-tock.time-tock+.message-container.user-tock.time-tock .info-container {
 	opacity: 0;
 	visibility: hidden;
 	height: 0;
 	margin: 0;
 }
 
-#chat .message-container.sending {
+#chat-container .message-container.sending {
 	opacity: 0.75;
 }
 
-#chat .message-container button[commandfor] {
+#chat-container .message-container button[commandfor] {
 	position: absolute;
 	top: 0.1rem;
 	right: 0.1rem;
@@ -147,13 +136,13 @@
 	z-index: 10;
 }
 
-#chat .message-container .message-actions-container:has(input[type="checkbox"]:checked) {
+#chat-container .message-container .message-actions-container:has(input[type="checkbox"]:checked) {
 	background: rgb(from var(--bg) r g b / 0.9);
 	border-color: var(--border-subtle);
 	z-index: 11;
 }
 
-#chat .message-container .message-actions-container .message-action {
+#chat-container .message-container .message-actions-container .message-action {
 	border: none;
 	opacity: 0;
 	transition: 0.2s ease-in-out;
@@ -169,79 +158,75 @@
 	background: none;
 }
 
-#chat .message-container .message-actions-container label {
+#chat-container .message-container .message-actions-container label {
 	cursor: pointer;
 	width: 2rem;
 	text-align: right;
 	padding-top: 0.5rem;
 }
 
-#chat .message-container .message-actions-container input[type="checkbox"] {
+#chat-container .message-container .message-actions-container input[type="checkbox"] {
 	opacity: 0;
 	display: none;
 }
 
-#chat
-	.message-container
-	.message-actions-container
-	input[type="checkbox"]:checked
-	~ .message-action {
+#chat .message-container .message-actions-container input[type="checkbox"]:checked~.message-action {
 	opacity: 1;
 	width: 3.25rem;
 	margin-right: 1.25rem;
 }
 
-#chat .message-container .message-actions-container .message-action .action-name {
+#chat-container .message-container .message-actions-container .message-action .action-name {
 	font-size: x-small;
 }
 
-#chat .message-container .info-container {
+#chat-container .message-container .info-container {
 	display: flex;
 	margin-bottom: -1.75rem;
 	height: 3.75rem;
 }
 
-#chat .message-container .info-container .username-container {
+#chat-container .message-container .info-container .username-container {
 	margin: 0 4px;
 	font-weight: bold;
 	padding-top: 0.5rem;
 }
 
-#chat .message-container .info-container .datetime-container {
+#chat-container .message-container .info-container .datetime-container {
 	margin: 0 4px;
 	padding-top: 0.4rem;
 }
 
-#chat .message-container .info-container .datetime-container .long {
+#chat-container .message-container .info-container .datetime-container .long {
 	font-size: x-small;
 	text-transform: uppercase;
 }
 
-#chat .message-container .info-container .datetime-container .short {
+#chat-container .message-container .info-container .datetime-container .short {
 	font-size: xx-small;
 	visibility: hidden;
 	display: none;
 }
 
-#chat .message-container .message-content-container,
-#chat .message-container .message-media-container,
-#chat .message-container .reactions-container {
+#chat-container .message-container .message-content-container,
+#chat-container .message-container .message-media-container,
+#chat-container .message-container .reactions-container {
 	padding-left: 8rem;
 	overflow-x: auto;
 }
 
-#chat .message-container .reactions-container:has(> .reaction-container) {
+#chat-container .message-container .reactions-container:has(> .reaction-container) {
 	margin-top: 0.5rem;
 	margin-bottom: 0.25rem;
 }
 
-#chat .embed-container {
+#chat-container .embed-container {
 	position: relative;
 	width: 100%;
 	max-width: 640px;
 }
 
-#chat .embed-container .embed-actions-container {
+#chat-container .embed-container .embed-actions-container {
 	position: absolute;
 	z-index: 100;
 	top: 0.25rem;
@@ -253,31 +238,31 @@
 	opacity: 0;
 }
 
-#chat .embed-container audio {
+#chat-container .embed-container audio {
 	width: 100%;
 }
 
-#chat .embed-container.rounded {
+#chat-container .embed-container.rounded {
 	border-radius: 6px;
 }
 
-#chat .embed-container.short {
+#chat-container .embed-container.short {
 	height: 120px;
 	overflow: hidden;
 	overflow-y: auto;
 }
 
-#chat .embed-container.tidal {
+#chat-container .embed-container.tidal {
 	border-radius: 12px;
 }
 
-#chat .embed-container.vertical {
+#chat-container .embed-container.vertical {
 	max-width: 320px;
 	overflow: hidden;
 	aspect-ratio: 9 / 16 !important;
 }
 
-#chat .embed-container.letterbox {
+#chat-container .embed-container.letterbox {
 	/*	height: 0; */
 	overflow: hidden;
 	overflow-y: auto;
@@ -285,14 +270,14 @@
 	aspect-ratio: 16 / 9 !important;
 }
 
-#chat .embed-container.square {
+#chat-container .embed-container.square {
 	overflow: hidden;
 	overflow-y: auto;
 	aspect-ratio: 1 / 1 !important;
 }
 
-#chat .embed-container iframe,
-#chat .embed-container video {
+#chat-container .embed-container iframe,
+#chat-container .embed-container video {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -305,7 +290,7 @@
 }
 
 @media screen and (max-width: 1200px) {
-	#chat #chat-container {
+	#chat-container #chat-container {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -313,28 +298,28 @@
 		bottom: 0;
 	}
 
-	#chat #chat-container #chat-entry-container,
-	#chat #chat-container #chat-entry-container form {
+	#chat-container #chat-container #chat-entry-container,
+	#chat-container #chat-container #chat-entry-container form {
 		padding: 0.25rem;
 	}
 
-	#chat #chat-container #chat-entry-container form button,
-	#chat #chat-container #chat-entry-container form label {
+	#chat-container #chat-container #chat-entry-container form button,
+	#chat-container #chat-container #chat-entry-container form label {
 		margin: 0 0.5rem;
 	}
 
-	#chat .message-container .message-content-container,
-	#chat .message-container .message-media-container,
-	#chat .message-container .reactions-container {
+	#chat-container .message-container .message-content-container,
+	#chat-container .message-container .message-media-container,
+	#chat-container .message-container .reactions-container {
 		padding-left: 4rem;
 	}
 
-	#chat .message-container .info-container .datetime-container .long {
+	#chat-container .message-container .info-container .datetime-container .long {
 		display: none;
 		visibility: hidden;
 	}
 
-	#chat .message-container .info-container .datetime-container .short {
+	#chat-container .message-container .info-container .datetime-container .short {
 		display: inline-block;
 		visibility: visible;
 	}
diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html
index b069114..e19bf8e 100644
--- a/public/tabs/chat/chat.html
+++ b/public/tabs/chat/chat.html
@@ -1,234 +1,232 @@
-<div id="chat" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="chat-tab-input"
-		class="tab-switch"
-		data-view="chat"
-	/>
-	<label for="chat-tab-input" class="tab-label"
-		><div class="icon chat"></div>
-		<div class="label">Chat</div>
-	</label>
-	<div class="tab-content">
-		<style>
-			<!-- #include "./chat.css" -->
-		</style>
-		<script src="/js/external/mimetypes.js" type="text/javascript"></script>
-		<script src="/js/external/punycode.js" type="text/javascript"></script>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="chat-tab-input"
+	class="tabswitch"
+	data-view="chat"
+/>
+<label for="chat-tab-input" class="tablabel"
+	><div class="icon chat"></div>
+	<div class="label">Chat</div>
+</label>
+<div class="panel">
+	<style>
+		<!-- #include "./chat.css" -->
+	</style>
+	<script src="/js/external/mimetypes.js" type="text/javascript"></script>
+	<script src="/js/external/punycode.js" type="text/javascript"></script>
 
-		<div id="chat-container">
-			<div
-				id="chat-content"
-				data-feed
-				data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.chat' ) !== -1 && document.body.dataset.channel"
-				data-source="/api/channels/${ document.body.dataset.channel }/events?type=chat,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
-				data-longpolling="true"
-				data-reverse="true"
-				data-insert="append"
-				data-autoscroll="true"
-			>
-				<script>
-					{
-						const feed = document.currentScript.closest("[data-feed]");
+	<div id="chat-container">
+		<div
+			id="chat-content"
+			data-feed
+			data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.chat' ) !== -1 && document.body.dataset.channel"
+			data-source="/api/channels/${ document.body.dataset.channel }/events?type=chat,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
+			data-longpolling="true"
+			data-reverse="true"
+			data-insert="append"
+			data-autoscroll="true"
+		>
+			<script>
+				{
+					const feed = document.currentScript.closest("[data-feed]");
 
-						APP.on("channel_changed", () => {	feed.__reset && feed.__reset(); });
-						APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
+					APP.on("channel_changed", () => {	feed.__reset && feed.__reset(); });
+					APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
 
-						const time_tick_tock_timeout = 60_000;
+					const time_tick_tock_timeout = 60_000;
 
-						let last_event_datetime_value = 0;
-						let time_tick_tock_class = "time-tock";
+					let last_event_datetime_value = 0;
+					let time_tick_tock_class = "time-tock";
 
-						let last_creator_id = "";
-						let user_tick_tock_class = "user-tock";
+					let last_creator_id = "";
+					let user_tick_tock_class = "user-tock";
 
-						feed.__context = async (item) => {
-							const event_datetime = datetime_to_local(item.timestamps.created);
+					feed.__context = async (item) => {
+						const event_datetime = datetime_to_local(item.timestamps.created);
 
-							if (
-								event_datetime.value - last_event_datetime_value >
-								time_tick_tock_timeout
-							) {
-								time_tick_tock_class =
-									time_tick_tock_class === "time-tick"
-										? "time-tock"
-										: "time-tick";
-							}
-							last_event_datetime_value = event_datetime.value;
+						if (
+							event_datetime.value - last_event_datetime_value >
+							time_tick_tock_timeout
+						) {
+							time_tick_tock_class =
+								time_tick_tock_class === "time-tick"
+									? "time-tock"
+									: "time-tick";
+						}
+						last_event_datetime_value = event_datetime.value;
 
-							if (last_creator_id !== item.creator_id) {
-								user_tick_tock_class =
-									user_tick_tock_class === "user-tick"
-										? "user-tock"
-										: "user-tick";
-								last_creator_id = item.creator_id;
-							}
+						if (last_creator_id !== item.creator_id) {
+							user_tick_tock_class =
+								user_tick_tock_class === "user-tick"
+									? "user-tock"
+									: "user-tick";
+							last_creator_id = item.creator_id;
+						}
 
-							return {
-								event: item,
-								creator: await APP.USERS.get(item.creator_id),
-								event_datetime,
-								time_tick_tock_class,
-								user_tick_tock_class,
-							};
+						return {
+							event: item,
+							creator: await APP.USERS.get(item.creator_id),
+							event_datetime,
+							time_tick_tock_class,
+							user_tick_tock_class,
 						};
+					};
 
-						feed.__target_element = (item) => {
-							let target = feed;
-							switch (item.type) {
-								case "reaction":
-									target = document.querySelector(
-										`.message-container[data-event_id='${item.parent_id}'] > .reactions-container`,
-									);
-									break;
-								case "chat":
-								default:
-									target =
-										document.querySelector(
-											`.message-container[data-event_id='${item.parent_id}'] > .replies-container`,
-										) ?? feed;
-									break;
-							}
+					feed.__target_element = (item) => {
+						let target = feed;
+						switch (item.type) {
+							case "reaction":
+								target = document.querySelector(
+									`.message-container[data-event_id='${item.parent_id}'] > .reactions-container`,
+								);
+								break;
+							case "chat":
+							default:
+								target =
+									document.querySelector(
+										`.message-container[data-event_id='${item.parent_id}'] > .replies-container`,
+									) ?? feed;
+								break;
+						}
 
-							return target;
-						};
-					}
-				</script>
-				<template data-for_type="chat">
-					<div
-						id="${context.event.id}"
-						class="message-container ${context.user_tick_tock_class} ${context.time_tick_tock_class}"
-						data-event_id="${context.event.id}"
-						data-creator_id="${context.creator.id}"
-						data-temp_id="${context.event.meta?.temp_id ?? ''}"
-					>
-						<button class="icon more" commandfor="eventactionspopover"></button>
-						<div class="info-container">
-							<div class="avatar-container inline">
-								<img
-									src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
-									alt="user avatar"
-									loading="lazy"
-								/>
-							</div>
-							<div class="username-container">
-								<span class="username"
-									>${context.creator.username ?? 'unknown'}</span
-								>
-							</div>
-							<div class="datetime-container">
-								<span class="long">${context.event_datetime.long}</span>
-								<span class="short">${context.event_datetime.short}</span>
-							</div>
-						</div>
-						<div class="message-content-container">
-							${htmlify(md_to_html(context.event.data.content))}
-						</div>
-						<div class="message-media-container">
-							${htmlify(context.event.data.media?.join("\n") ?? "")}
-						</div>
-						<div class="reactions-container"></div>
-						<div class="replies-container"></div>
-					</div>
-				</template>
-				<template data-for_type="reaction">
-					<div
-						id="${context.event.id}"
-						class="reaction-container"
-						data-event_id="${context.event.id}"
-						data-creator_id="${context.creator.id}"
-						data-temp_id="${context.event.meta?.temp_id ?? ''}"
-					>
-						<span class="reaction">${ context.event.data.reaction }</span>
-					</div>
-				</template>
-			</div>
-			<div id="chat-entry-container">
-				<form
-					id="chat-entry"
-					data-smart="true"
-					action="/api/events"
-					data-requires-permission="events.write.chat"
-					method="POST"
-					class="post-creation-form collapsible"
-					style="
-						margin-top: 1rem
-						width: 100%;
-						transition: all 0.5s;
-					"
-					on_reply="async (event) => { await document.getElementById( 'chat-content' ).__render(event); document.getElementById(event.id)?.classList.remove('sending'); }"
-					on_parsed="async (event) => { await document.getElementById( 'chat-content' ).__render(event); document.getElementById(event.id)?.classList.add('sending'); }"
+						return target;
+					};
+				}
+			</script>
+			<template data-for_type="chat">
+				<div
+					id="${context.event.id}"
+					class="message-container ${context.user_tick_tock_class} ${context.time_tick_tock_class}"
+					data-event_id="${context.event.id}"
+					data-creator_id="${context.creator.id}"
+					data-temp_id="${context.event.meta?.temp_id ?? ''}"
 				>
-					<input type="hidden" name="type" value="chat" />
+					<button class="icon more" commandfor="eventactionspopover"></button>
+					<div class="info-container">
+						<div class="avatar-container inline">
+							<img
+								src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
+								alt="user avatar"
+								loading="lazy"
+							/>
+						</div>
+						<div class="username-container">
+							<span class="username"
+								>${context.creator.username ?? 'unknown'}</span
+							>
+						</div>
+						<div class="datetime-container">
+							<span class="long">${context.event_datetime.long}</span>
+							<span class="short">${context.event_datetime.short}</span>
+						</div>
+					</div>
+					<div class="message-content-container">
+						${htmlify(md_to_html(context.event.data.content))}
+					</div>
+					<div class="message-media-container">
+						${htmlify(context.event.data.media?.join("\n") ?? "")}
+					</div>
+					<div class="reactions-container"></div>
+					<div class="replies-container"></div>
+				</div>
+			</template>
+			<template data-for_type="reaction">
+				<div
+					id="${context.event.id}"
+					class="reaction-container"
+					data-event_id="${context.event.id}"
+					data-creator_id="${context.creator.id}"
+					data-temp_id="${context.event.meta?.temp_id ?? ''}"
+				>
+					<span class="reaction">${ context.event.data.reaction }</span>
+				</div>
+			</template>
+		</div>
+		<div id="chat-entry-container">
+			<form
+				id="chat-entry"
+				data-smart="true"
+				action="/api/events"
+				data-requires-permission="events.write.chat"
+				method="POST"
+				class="post-creation-form collapsible"
+				style="
+					margin-top: 1rem
+					width: 100%;
+					transition: all 0.5s;
+				"
+				on_reply="async (event) => { await document.getElementById( 'chat-content' ).__render(event); document.getElementById(event.id)?.classList.remove('sending'); }"
+				on_parsed="async (event) => { await document.getElementById( 'chat-content' ).__render(event); document.getElementById(event.id)?.classList.add('sending'); }"
+			>
+				<input type="hidden" name="type" value="chat" />
 
+				<input
+					type="hidden"
+					name="id"
+					generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+					reset-on-submit
+				/>
+				<input
+					type="hidden"
+					name="meta.temp_id"
+					generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+					reset-on-submit
+				/>
+
+				<input
+					type="hidden"
+					name="creator_id"
+					generator="() => { return APP.user?.id; }"
+				/>
+
+				<input
+					type="hidden"
+					name="channel"
+					generator="() => { return document.body.dataset.channel; }"
+				/>
+
+				<input
+					type="hidden"
+					name="timestamps.created"
+					generator="(_input, form) => form.__submitted_at.toISOString()"
+					reset-on-submit
+				/>
+				<input
+					type="hidden"
+					name="timestamps.updated"
+					generator="(_input, form) => form.__submitted_at.toISOString()"
+					reset-on-submit
+				/>
+
+				<input type="hidden" name="parent_id" reset-on-submit />
+
+				<label>
 					<input
-						type="hidden"
-						name="id"
-						generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
-						reset-on-submit
-					/>
-					<input
-						type="hidden"
-						name="meta.temp_id"
-						generator="(_input, form) => 'TEMP-' + form.__submitted_at.toISOString()"
+						aria-label="Upload and share file"
+						type="file"
+						multiple
+						data-smartforms-save-to-home="true"
+						name="data.media"
 						reset-on-submit
 					/>
+					<div class="icon attachment"></div>
+				</label>
 
-					<input
-						type="hidden"
-						name="creator_id"
-						generator="() => { return APP.user?.id; }"
-					/>
+				<textarea
+					id="chat-input"
+					class="chat-input"
+					rows="1"
+					name="data.content"
+					reset-on-submit
+					focus-on-submit
+					enter-key-submits
+				></textarea>
 
-					<input
-						type="hidden"
-						name="channel"
-						generator="() => { return document.body.dataset.channel; }"
-					/>
-
-					<input
-						type="hidden"
-						name="timestamps.created"
-						generator="(_input, form) => form.__submitted_at.toISOString()"
-						reset-on-submit
-					/>
-					<input
-						type="hidden"
-						name="timestamps.updated"
-						generator="(_input, form) => form.__submitted_at.toISOString()"
-						reset-on-submit
-					/>
-
-					<input type="hidden" name="parent_id" reset-on-submit />
-
-					<label>
-						<input
-							aria-label="Upload and share file"
-							type="file"
-							multiple
-							data-smartforms-save-to-home="true"
-							name="data.media"
-							reset-on-submit
-						/>
-						<div class="icon attachment"></div>
-					</label>
-
-					<textarea
-						id="chat-input"
-						class="chat-input"
-						rows="1"
-						name="data.content"
-						reset-on-submit
-						focus-on-submit
-						enter-key-submits
-					></textarea>
-
-					<button id="chat-send" class="primary" aria-label="Send a message">
-						<i class="icon send"></i>
-					</button>
-				</form>
-			</div>
+				<button id="chat-send" class="primary" aria-label="Send a message">
+					<i class="icon send"></i>
+				</button>
+			</form>
 		</div>
 	</div>
 </div>
diff --git a/public/tabs/essays/essays.html b/public/tabs/essays/essays.html
index 92c87ca..a3d4d3c 100644
--- a/public/tabs/essays/essays.html
+++ b/public/tabs/essays/essays.html
@@ -95,121 +95,119 @@
 	}
 </style>
 
-<div id="essays" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="essay-tab-input"
-		class="tab-switch"
-		data-view="essays"
-	/>
-	<label for="essay-tab-input" class="tab-label"
-		><div class="icon essay"></div>
-		<div class="label">Essays</div>
-	</label>
-	<div class="tab-content">
-		<div id="essays-container" class="container">
-			<!-- #include "./README.md" -->
-			<!-- #include "./new_essay.html" -->
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="essay-tab-input"
+	class="tabswitch"
+	data-view="essays"
+/>
+<label for="essay-tab-input" class="tablabel"
+	><div class="icon essay"></div>
+	<div class="label">Essays</div>
+</label>
+<div class="panel">
+	<div id="essays-container" class="container">
+		<!-- #include "./README.md" -->
+		<!-- #include "./new_essay.html" -->
 
-			<div
-				id="essays-list"
-				data-feed
-				data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.essay' ) !== -1"
-				data-source="/api/events?type=essay,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
-				data-longpolling="true"
-				data-reverse="true"
-				data-insert="prepend"
-				data-autoscroll="true"
-			>
-				<script>
-					{
-						const feed = document.currentScript.closest("[data-feed]");
+		<div
+			id="essays-list"
+			data-feed
+			data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.essay' ) !== -1"
+			data-source="/api/events?type=essay,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
+			data-longpolling="true"
+			data-reverse="true"
+			data-insert="prepend"
+			data-autoscroll="true"
+		>
+			<script>
+				{
+					const feed = document.currentScript.closest("[data-feed]");
 
-						APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
+					APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
 
-						feed.__target_element = (item) => {
-							let target = feed;
-							switch (item.type) {
-								case "reaction":
-									target = document.querySelector(
-										`.essay-container[data-event_id='${item.parent_id}'] > .reactions-container`,
-									);
-									break;
-								case "essay":
-								default:
-									target = feed;
-									break;
-							}
+					feed.__target_element = (item) => {
+						let target = feed;
+						switch (item.type) {
+							case "reaction":
+								target = document.querySelector(
+									`.essay-container[data-event_id='${item.parent_id}'] > .reactions-container`,
+								);
+								break;
+							case "essay":
+							default:
+								target = feed;
+								break;
+						}
 
-							return target;
+						return target;
+					};
+
+					feed.__context = async (item) => {
+						const essay_datetime = datetime_to_local(item.timestamps.created);
+
+						return {
+							event: item,
+							essay: item,
+							creator: await APP.USERS.get(item.creator_id),
+							essay_datetime,
 						};
+					};
+				}
+			</script>
+			<template data-for_type="essay">
+				<div
+					id="${context.essay.id}"
+					class="essay-container"
+					data-event_id="${context.essay.id}"
+					data-creator_id="${context.creator.id}"
+					data-essay_id="${context.essay.id}"
+					data-temp_id="${context.essay.meta?.temp_id ?? ''}"
+				>
+					<div class="media-preview-container">
+						${context.essay.data?.media?.length ?
+						context.essay.data.media.map(function(url) { return `<img
+							src="${url}"
+							loading="lazy"
+						/>` }).join('\n') : ''}
+					</div>
 
-						feed.__context = async (item) => {
-							const essay_datetime = datetime_to_local(item.timestamps.created);
-
-							return {
-								event: item,
-								essay: item,
-								creator: await APP.USERS.get(item.creator_id),
-								essay_datetime,
-							};
-						};
-					}
-				</script>
-				<template data-for_type="essay">
-					<div
-						id="${context.essay.id}"
-						class="essay-container"
-						data-event_id="${context.essay.id}"
-						data-creator_id="${context.creator.id}"
-						data-essay_id="${context.essay.id}"
-						data-temp_id="${context.essay.meta?.temp_id ?? ''}"
-					>
-						<div class="media-preview-container">
-							${context.essay.data?.media?.length ?
-							context.essay.data.media.map(function(url) { return `<img
-								src="${url}"
+					<div class="info-container">
+						<div class="avatar-container inline medium">
+							<img
+								src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
+								alt="user avatar"
 								loading="lazy"
-							/>` }).join('\n') : ''}
+							/>
 						</div>
-
-						<div class="info-container">
-							<div class="avatar-container inline medium">
-								<img
-									src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
-									alt="user avatar"
-									loading="lazy"
-								/>
-							</div>
-							<div class="username-container">
-								<span class="username">${context.creator.username}</span>
-							</div>
-							<div class="datetime-container">
-								<span class="long">${context.essay_datetime.long}</span>
-								<span class="short">${context.essay_datetime.short}</span>
-							</div>
+						<div class="username-container">
+							<span class="username">${context.creator.username}</span>
 						</div>
-						<div class="title-container">${context.essay.data.title}</div>
-						<div class="content-container">
-							${htmlify(md_to_html(context.essay.data.essay))}
+						<div class="datetime-container">
+							<span class="long">${context.essay_datetime.long}</span>
+							<span class="short">${context.essay_datetime.short}</span>
 						</div>
-						<div class="reactions-container"></div>
-						<button class="icon more" commandfor="eventactionspopover"></button>
 					</div>
-				</template>
-				<template data-for_type="reaction">
-					<div
-						id="${context.event.id}"
-						class="reaction-container"
-						data-event_id="${context.event.id}"
-						data-creator_id="${context.creator.id}"
-						data-temp_id="${context.event.meta?.temp_id ?? ''}"
-					>
-						<span class="reaction">${ context.event.data.reaction }</span>
+					<div class="title-container">${context.essay.data.title}</div>
+					<div class="content-container">
+						${htmlify(md_to_html(context.essay.data.essay))}
 					</div>
-				</template>
-			</div>
+					<div class="reactions-container"></div>
+					<button class="icon more" commandfor="eventactionspopover"></button>
+				</div>
+			</template>
+			<template data-for_type="reaction">
+				<div
+					id="${context.event.id}"
+					class="reaction-container"
+					data-event_id="${context.event.id}"
+					data-creator_id="${context.creator.id}"
+					data-temp_id="${context.event.meta?.temp_id ?? ''}"
+				>
+					<span class="reaction">${ context.event.data.reaction }</span>
+				</div>
+			</template>
 		</div>
 	</div>
 </div>
diff --git a/public/tabs/exchange/exchange.html b/public/tabs/exchange/exchange.html
index ca25f3f..8fa488a 100644
--- a/public/tabs/exchange/exchange.html
+++ b/public/tabs/exchange/exchange.html
@@ -1,16 +1,14 @@
-<div id="exchange" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="exchange-tab-input"
-		class="tab-switch"
-		data-view="exchange"
-	/>
-	<label for="exchange-tab-input" class="tab-label"
-		><div class="icon exchange"></div>
-		<div class="label">Exchange</div></label
-	>
-	<div class="tab-content">
-		<!-- #include "./README.md" -->
-	</div>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="exchange-tab-input"
+	class="tabswitch"
+	data-view="exchange"
+/>
+<label for="exchange-tab-input" class="tablabel"
+	><div class="icon exchange"></div>
+	<div class="label">Exchange</div></label
+>
+<div class="panel">
+	<!-- #include "./README.md" -->
 </div>
diff --git a/public/tabs/forum/forum.html b/public/tabs/forum/forum.html
index 4211d77..84f2c60 100644
--- a/public/tabs/forum/forum.html
+++ b/public/tabs/forum/forum.html
@@ -127,130 +127,128 @@
 	}
 </style>
 
-<div id="forum" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="forum-tab-input"
-		class="tab-switch"
-		data-view="forum"
-	/>
-	<label for="forum-tab-input" class="tab-label"
-		><div class="icon forum"></div>
-		<div class="label">Forum</div></label
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="forum-tab-input"
+	class="tabswitch"
+	data-view="forum"
+/>
+<label for="forum-tab-input" class="tablabel"
+	><div class="icon forum"></div>
+	<div class="label">Forum</div></label
+>
+<div class="panel forum-container">
+	<!-- #include "./README.md" -->
+
+	<div
+		id="posts-list"
+		data-feed
+		data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.post' ) !== -1"
+		data-source="/api/events?type=post,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
+		data-longpolling="true"
+		data-reverse="true"
+		data-insert="prepend"
+		data-autoscroll="true"
 	>
-	<div class="tab-content forum-container">
-		<!-- #include "./README.md" -->
+		<script>
+			{
+				const feed = document.currentScript.closest("[data-feed]");
 
-		<div
-			id="posts-list"
-			data-feed
-			data-precheck="!!document.body.dataset.user && document.body.dataset.user.indexOf( 'events.read.post' ) !== -1"
-			data-source="/api/events?type=post,reaction&limit=100&sort=newest&wait=true&after_id=${ feed.__newest_id ?? 'able-able-able-able-able-able-able-able-able-able' }"
-			data-longpolling="true"
-			data-reverse="true"
-			data-insert="prepend"
-			data-autoscroll="true"
-		>
-			<script>
-				{
-					const feed = document.currentScript.closest("[data-feed]");
+				APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
 
-					APP.on("user_logged_in", () => { feed.__reset && feed.__reset(); });
+				feed.__target_element = (item) => {
+					let target = feed;
+					switch (item.type) {
+						case "reaction":
+							target = document.querySelector(
+								`.post-container[data-event_id='${item.parent_id}'] > .reactions-container`,
+							);
+							break;
+						case "chat":
+						default:
+							target =
+								document.querySelector(
+									`.post-container[data-event_id='${item.parent_id}'] > .replies-container`,
+								) ?? feed;
+							break;
+					}
 
-					feed.__target_element = (item) => {
-						let target = feed;
-						switch (item.type) {
-							case "reaction":
-								target = document.querySelector(
-									`.post-container[data-event_id='${item.parent_id}'] > .reactions-container`,
-								);
-								break;
-							case "chat":
-							default:
-								target =
-									document.querySelector(
-										`.post-container[data-event_id='${item.parent_id}'] > .replies-container`,
-									) ?? feed;
-								break;
-						}
+					return target;
+				};
 
-						return target;
+				feed.__context = async (item) => {
+					const post_datetime = datetime_to_local(item.timestamps.created);
+
+					return {
+						event: item,
+						post: item,
+						creator: await APP.USERS.get(item.creator_id),
+						post_datetime,
 					};
+				};
+			}
+		</script>
+		<template data-for_type="post">
+			<div
+				id="${context.post.id}"
+				class="post-container"
+				data-event_id="${context.post.id}"
+				data-creator_id="${context.creator.id}"
+				data-post_id="${context.post.id}"
+			>
+				<div class="expand-toggle-container">
+					<label>
+						<input type="checkbox" name="expanded" /><i class="icon plus"></i
+						><i class="icon minus"></i>
+					</label>
+				</div>
 
-					feed.__context = async (item) => {
-						const post_datetime = datetime_to_local(item.timestamps.created);
+				<div class="media-preview-container">
+					<img
+						src="/images/placeholders/${String((context.post_datetime.ms % 9) + 1).padStart(2, '0')}.svg"
+						loading="lazy"
+					/>
+				</div>
 
-						return {
-							event: item,
-							post: item,
-							creator: await APP.USERS.get(item.creator_id),
-							post_datetime,
-						};
-					};
-				}
-			</script>
-			<template data-for_type="post">
-				<div
-					id="${context.post.id}"
-					class="post-container"
-					data-event_id="${context.post.id}"
-					data-creator_id="${context.creator.id}"
-					data-post_id="${context.post.id}"
-				>
-					<div class="expand-toggle-container">
-						<label>
-							<input type="checkbox" name="expanded" /><i class="icon plus"></i
-							><i class="icon minus"></i>
-						</label>
-					</div>
-
-					<div class="media-preview-container">
+				<div class="info-container">
+					<div class="avatar-container inline">
 						<img
-							src="/images/placeholders/${String((context.post_datetime.ms % 9) + 1).padStart(2, '0')}.svg"
+							src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
+							alt="user avatar"
 							loading="lazy"
 						/>
 					</div>
-
-					<div class="info-container">
-						<div class="avatar-container inline">
-							<img
-								src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
-								alt="user avatar"
-								loading="lazy"
-							/>
-						</div>
-						<div class="username-container">
-							<span class="username">${context.creator.username}</span>
-						</div>
-						<div class="datetime-container">
-							<span class="long">${context.post_datetime.long}</span>
-							<span class="short">${context.post_datetime.short}</span>
-						</div>
+					<div class="username-container">
+						<span class="username">${context.creator.username}</span>
 					</div>
-					<div class="subject-container">${context.post.data.subject}</div>
-					<div class="content-container">
-						${htmlify(md_to_html(context.post.data.content))}
+					<div class="datetime-container">
+						<span class="long">${context.post_datetime.long}</span>
+						<span class="short">${context.post_datetime.short}</span>
 					</div>
-					<div class="reactions-container"></div>
-					<button class="icon more" commandfor="eventactionspopover"></button>
-					<!-- #include "./new_post.html" -->
-					<div class="replies-container"></div>
 				</div>
-			</template>
-			<template data-for_type="reaction">
-				<div
-					id="${context.event.id}"
-					class="reaction-container"
-					data-event_id="${context.event.id}"
-					data-creator_id="${context.creator.id}"
-					data-temp_id="${context.event.meta?.temp_id ?? ''}"
-				>
-					<span class="reaction">${ context.event.data.reaction }</span>
+				<div class="subject-container">${context.post.data.subject}</div>
+				<div class="content-container">
+					${htmlify(md_to_html(context.post.data.content))}
 				</div>
-			</template>
-		</div>
-
-		<!-- #include "./new_post.html" -->
+				<div class="reactions-container"></div>
+				<button class="icon more" commandfor="eventactionspopover"></button>
+				<!-- #include "./new_post.html" -->
+				<div class="replies-container"></div>
+			</div>
+		</template>
+		<template data-for_type="reaction">
+			<div
+				id="${context.event.id}"
+				class="reaction-container"
+				data-event_id="${context.event.id}"
+				data-creator_id="${context.creator.id}"
+				data-temp_id="${context.event.meta?.temp_id ?? ''}"
+			>
+				<span class="reaction">${ context.event.data.reaction }</span>
+			</div>
+		</template>
 	</div>
+
+	<!-- #include "./new_post.html" -->
 </div>
diff --git a/public/tabs/home/home.html b/public/tabs/home/home.html
index 99afa6d..a7378c6 100644
--- a/public/tabs/home/home.html
+++ b/public/tabs/home/home.html
@@ -1,17 +1,15 @@
-<div id="home" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="home-tab-input"
-		checked="checked"
-		class="tab-switch"
-		data-view="home"
-	/>
-	<label for="home-tab-input" class="tab-label">
-		<div class="icon home"></div>
-		<div class="label">Home</div>
-	</label>
-	<div class="tab-content">
-		<!-- #include "./README.md" -->
-	</div>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="home-tab-input"
+	checked="checked"
+	class="tabswitch"
+	data-view="home"
+/>
+<label for="home-tab-input" class="tablabel">
+	<div class="icon home"></div>
+	<div class="label">Home</div>
+</label>
+<div class="panel">
+	<!-- #include "./README.md" -->
 </div>
diff --git a/public/tabs/live/live.html b/public/tabs/live/live.html
index 25e12b8..b667b5c 100644
--- a/public/tabs/live/live.html
+++ b/public/tabs/live/live.html
@@ -1,73 +1,71 @@
 <script></script>
 <style></style>
-<div id="live-tab" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="live-tab-input"
-		class="tab-switch"
-		data-view="profile"
-	/>
-	<label for="live-tab-input" class="tab-label mockup"
-		><div class="icon live"></div>
-		<div class="label">Live</div></label
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="live-tab-input"
+	class="tabswitch"
+	data-view="profile"
+/>
+<label for="live-tab-input" class="tablabel mockup"
+	><div class="icon live"></div>
+	<div class="label">Live</div></label
+>
+<div class="panel">
+	<div
+		class="live-container"
+		style="
+			position: relative;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			display: flex;
+			align-content: center;
+			justify-content: center;
+			flex-flow: wrap;
+		"
 	>
-	<div class="tab-content">
 		<div
-			class="live-container"
+			class="mockup"
 			style="
-				position: relative;
-				width: 100%;
-				height: 100%;
+				width: 95%;
+				max-width: 1024px;
+				border: 1px solid rgba(128, 128, 128, 0.5);
+				height: 66vh;
 				overflow: hidden;
+			"
+		></div>
+
+		<div
+			class="live-actions-container"
+			style="
+				width: 80%;
+				margin: 0 auto;
 				display: flex;
-				align-content: center;
-				justify-content: center;
-				flex-flow: wrap;
+				align-items: center;
+				justify-content: space-evenly;
+				height: 4rem;
 			"
 		>
-			<div
-				class="mockup"
-				style="
-					width: 95%;
-					max-width: 1024px;
-					border: 1px solid rgba(128, 128, 128, 0.5);
-					height: 66vh;
-					overflow: hidden;
-				"
-			></div>
+			<input
+				id="toggle-live-audio"
+				type="checkbox"
+				style="display: none; visibility: hidden"
+			/>
+			<label for="toggle-live-audio" class="mockup">
+				<i class="icon phone"></i>
+				<span>Audio</span>
+			</label>
 
-			<div
-				class="live-actions-container"
-				style="
-					width: 80%;
-					margin: 0 auto;
-					display: flex;
-					align-items: center;
-					justify-content: space-evenly;
-					height: 4rem;
-				"
-			>
-				<input
-					id="toggle-live-audio"
-					type="checkbox"
-					style="display: none; visibility: hidden"
-				/>
-				<label for="toggle-live-audio" class="mockup">
-					<i class="icon phone"></i>
-					<span>Audio</span>
-				</label>
-
-				<input
-					id="toggle-live-video"
-					type="checkbox"
-					style="display: none; visibility: hidden"
-				/>
-				<label for="toggle-live-video" class="mockup">
-					<i class="icon camera"></i>
-					<span>Video</span>
-				</label>
-			</div>
+			<input
+				id="toggle-live-video"
+				type="checkbox"
+				style="display: none; visibility: hidden"
+			/>
+			<label for="toggle-live-video" class="mockup">
+				<i class="icon camera"></i>
+				<span>Video</span>
+			</label>
 		</div>
 	</div>
 </div>
diff --git a/public/tabs/map/map.html b/public/tabs/map/map.html
index 4720855..09de6a7 100644
--- a/public/tabs/map/map.html
+++ b/public/tabs/map/map.html
@@ -16,7 +16,7 @@
 
 </script>
 <style>
-	#map-tab .tab-content {
+	#map-tab .panel {
 		overflow: hidden;
 	}
 
@@ -37,19 +37,17 @@
 		}
 	}
 </style>
-<div id="map-tab" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="map-tab-tab-input"
-		class="tab-switch"
-		data-view="map"
-	/>
-	<label for="map-tab-tab-input" class="tab-label"
-		><div class="icon map-pin"></div>
-		<div class="label">Map</div>
-	</label>
-	<div class="tab-content">
-		<div id="map"></div>
-	</div>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="map-tab-tab-input"
+	class="tabswitch"
+	data-view="map"
+/>
+<label for="map-tab-tab-input" class="tablabel"
+	><div class="icon map-pin"></div>
+	<div class="label">Map</div>
+</label>
+<div class="panel">
+	<div id="map"></div>
 </div>
diff --git a/public/tabs/resources/resources.html b/public/tabs/resources/resources.html
index af8c024..0cd507a 100644
--- a/public/tabs/resources/resources.html
+++ b/public/tabs/resources/resources.html
@@ -1,14 +1,12 @@
-<div id="resources" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="resources-tab-input"
-		class="tab-switch"
-		data-view="resources"
-	/>
-	<label for="resources-tab-input" class="tab-label mockup"
-		><div class="icon resources"></div>
-		<div class="label">Resources</div></label
-	>
-	<div class="tab-content"><!-- #include "./README.md" --></div>
-</div>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="resources-tab-input"
+	class="tabswitch"
+	data-view="resources"
+/>
+<label for="resources-tab-input" class="tablabel mockup"
+	><div class="icon resources"></div>
+	<div class="label">Resources</div></label
+>
+<div class="panel"><!-- #include "./README.md" --></div>
diff --git a/public/tabs/tabs.html b/public/tabs/tabs.html
index 8c94abd..c3638f3 100644
--- a/public/tabs/tabs.html
+++ b/public/tabs/tabs.html
@@ -1,6 +1,6 @@
 <script>
 	APP.on( "view_changed", ({ view }) => {
-		const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`);
+		const target_tab = document.querySelector(`.tabswitch[data-view="${view}"]`);
 
 		if (target_tab) {
 			target_tab.click();
@@ -8,7 +8,7 @@
 	});
 
 	APP.on( 'load', () => {
-		const tab_switchers = document.querySelectorAll(".tab-switch");
+		const tab_switchers = document.querySelectorAll(".tabswitch");
 		for (const tab_switch of tab_switchers) {
 			tab_switch.addEventListener("input", (event) => {
 				const tab_selector = event.target;
@@ -22,98 +22,46 @@
 	});
 </script>
 <style>
-	.tabs-container {
-		position: relative;
-		height: 100%;
-	}
+:root {
+	--tab-label-height: 4em;
+}
 
-	.tabs {
-		position: relative;
-		height: 100%;
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: flex-start;
-		min-height: inherit;
-		background: inherit;
-	}
+.tabs {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+}
 
-	.tabs::before,
-	.tabs::after {
-		content: "";
-		display: table;
-	}
+.tabs .tabswitch {
+	position: absolute;
+	opacity: 0;
+}
 
-	.tabs::after {
-		clear: both;
-	}
+.tabs .tablabel {
+	cursor: pointer;
+	border: none;
+	text-align: center;
+	padding: 1em;
+	height: var(--tab-label-height);
+	line-height: 2em;
+}
 
-	.tab {
-		background: inherit;
-	}
+.tabs .tabswitch:checked + .tablabel {
+	border-bottom: 1px solid var(--accent);
+}
 
-	.tab-switch {
-		display: none;
-	}
+.tabs .panel {
+	display: none;
+	position: relative;
+	padding: 1em;
+	width: 100%;
+	height: calc( 100vh - var(--tab-label-height) );
+	order: 99;
+}
 
-	.tab-label {
-		position: relative;
-		width: 6rem;
-		height: 5rem;
-		cursor: pointer;
-		transition: all 0.25s;
-
-		display: flex;
-		align-items: center;
-		justify-content: end;
-		flex-direction: column;
-	}
-
-	.tab-label .label {
-		margin: 0.75rem 0;
-	}
-
-	.tab-content {
-		position: absolute;
-		z-index: 1;
-		top: 5rem;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		opacity: 0;
-		transition: all 0.35s;
-		border-top: 1px solid var(--border-subtle);
-		margin-top: 1px;
-		overflow-y: scroll;
-		visibility: hidden;
-		display: none;
-		background: inherit;
-	}
-
-	.tab-switch,
-	.tab-switch + .tab-label {
-		transition: none;
-	}
-
-	.tab-switch:checked + .tab-label {
-		margin-top: 1px;
-		border-bottom: 1px solid var(--accent);
-		z-index: 1;
-	}
-
-	.tab-switch:checked + label + .tab-content {
-		z-index: 2;
-		opacity: 1;
-		visibility: visible;
-		display: block;
-	}
-
-	@media screen and (max-width: 800px) {
-		.tab-label {
-			width: 4rem;
-		}
-	}
+.tabs .tabswitch:checked + .tablabel + .panel {
+	display: block;
+}
 </style>
 
 <div class="tabs">
diff --git a/public/tabs/work/work.html b/public/tabs/work/work.html
index 2b83ce3..558b1bf 100644
--- a/public/tabs/work/work.html
+++ b/public/tabs/work/work.html
@@ -1,14 +1,14 @@
-<div id="work" class="tab">
-	<input
-		type="radio"
-		name="top-level-tabs"
-		id="work-tab-input"
-		class="tab-switch"
-		data-view="work"
-	/>
-	<label for="work-tab-input" class="tab-label"
-		><div class="icon work"></div>
-		<div class="label">Work</div>
-	</label>
-	<div class="tab-content"><!-- #include "./README.md" --></div>
+<input
+	type="radio"
+	name="top-level-tabs"
+	id="work-tab-input"
+	class="tabswitch"
+	data-view="work"
+/>
+<label for="work-tab-input" class="tablabel"
+	><div class="icon work"></div>
+	<div class="label">Work</div>
+</label>
+<div class="panel">
+	<!-- #include "./README.md" -->
 </div>