diff --git a/deno.json b/deno.json
index 80b6d15..6f8b356 100644
--- a/deno.json
+++ b/deno.json
@@ -32,9 +32,9 @@
 		}
 	},
 	"imports": {
-		"@andyburke/fsdb": "jsr:@andyburke/fsdb@^0.6.0",
+		"@andyburke/fsdb": "jsr:@andyburke/fsdb@^0.6.1",
 		"@andyburke/lurid": "jsr:@andyburke/lurid@^0.2.0",
-		"@andyburke/serverus": "jsr:@andyburke/serverus@^0.6.0",
+		"@andyburke/serverus": "jsr:@andyburke/serverus@^0.7.1",
 		"@std/assert": "jsr:@std/assert@^1.0.13",
 		"@std/encoding": "jsr:@std/encoding@^1.0.10",
 		"@std/http": "jsr:@std/http@^1.0.18",
diff --git a/deno.lock b/deno.lock
index cba3125..2183d6a 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,12 +1,10 @@
 {
   "version": "5",
   "specifiers": {
-    "jsr:@andyburke/fsdb@*": "0.6.0",
-    "jsr:@andyburke/fsdb@0.6": "0.6.0",
+    "jsr:@andyburke/fsdb@~0.6.1": "0.6.1",
     "jsr:@andyburke/lurid@*": "0.2.0",
     "jsr:@andyburke/lurid@0.2": "0.2.0",
-    "jsr:@andyburke/serverus@*": "0.6.0",
-    "jsr:@andyburke/serverus@0.6": "0.6.0",
+    "jsr:@andyburke/serverus@~0.7.1": "0.7.1",
     "jsr:@std/assert@*": "1.0.13",
     "jsr:@std/assert@^1.0.13": "1.0.13",
     "jsr:@std/async@^1.0.13": "1.0.13",
@@ -33,8 +31,8 @@
     "jsr:@stdext/crypto@0.1": "0.1.0"
   },
   "jsr": {
-    "@andyburke/fsdb@0.6.0": {
-      "integrity": "6c58518e9de64c61f13acb0cb110ad3bd9c6277f016798ddee2eed26590dc848",
+    "@andyburke/fsdb@0.6.1": {
+      "integrity": "059ad6702e40a39a188e648a8ebf2547087782becae040af916aa843830328ea",
       "dependencies": [
         "jsr:@std/cli@^1.0.20",
         "jsr:@std/fs@^1.0.18",
@@ -47,8 +45,8 @@
         "jsr:@std/cli@^1.0.19"
       ]
     },
-    "@andyburke/serverus@0.6.0": {
-      "integrity": "89f013c1d77e3d5d2c4e0908b29cc4a1acd19ebf22fa2890a6c5aa777e7b0de3",
+    "@andyburke/serverus@0.7.1": {
+      "integrity": "750b5d425a3b147efb551fbbc564b0c1428e5a8b94959bd77e95936bab78040d",
       "dependencies": [
         "jsr:@std/async",
         "jsr:@std/cli@^1.0.19",
@@ -167,9 +165,9 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@andyburke/fsdb@0.6",
+      "jsr:@andyburke/fsdb@~0.6.1",
       "jsr:@andyburke/lurid@0.2",
-      "jsr:@andyburke/serverus@0.6",
+      "jsr:@andyburke/serverus@~0.7.1",
       "jsr:@std/assert@^1.0.13",
       "jsr:@std/encoding@^1.0.10",
       "jsr:@std/http@^1.0.18",
diff --git a/models/event.ts b/models/event.ts
index 92f95ab..5541ff3 100644
--- a/models/event.ts
+++ b/models/event.ts
@@ -1,6 +1,6 @@
-import { by_character, by_lurid } from '@andyburke/fsdb/organizers';
+import { by_character, by_lurid } from 'jsr:@andyburke/fsdb/organizers';
 import { FSDB_COLLECTION } from 'jsr:@andyburke/fsdb';
-import { FSDB_INDEXER_SYMLINKS } from '@andyburke/fsdb/indexers';
+import { FSDB_INDEXER_SYMLINKS } from 'jsr:@andyburke/fsdb/indexers';
 
 /**
  * @typedef {object} TIMESTAMPS
@@ -34,7 +34,7 @@ export type EVENT = {
 export const EVENTS = new FSDB_COLLECTION<EVENT>({
 	name: 'events',
 	id_field: 'id',
-	organize: (combined_id) => {
+	organize: (combined_id: string) => {
 		const [room_id, event_id] = combined_id.split(':', 2);
 		return ['rooms', room_id, event_id.substring(0, 14), `${event_id}.json`];
 	},
@@ -42,14 +42,16 @@ export const EVENTS = new FSDB_COLLECTION<EVENT>({
 		creator_id: new FSDB_INDEXER_SYMLINKS<EVENT>({
 			name: 'creator_id',
 			field: 'creator_id',
+			to_many: true,
 			organize: by_lurid
 		}),
 
 		tags: new FSDB_INDEXER_SYMLINKS<EVENT>({
 			name: 'tags',
-			get_values_to_index: (event): string[] => {
-				return (event.tags ?? []).map((tag) => tag.toLowerCase());
+			get_values_to_index: (event: EVENT): string[] => {
+				return (event.tags ?? []).map((tag: string) => tag.toLowerCase());
 			},
+			to_many: true,
 			organize: by_character
 		})
 	}
diff --git a/models/room.ts b/models/room.ts
index a13210a..09b6e03 100644
--- a/models/room.ts
+++ b/models/room.ts
@@ -1,6 +1,6 @@
-import { by_character, by_lurid } from '@andyburke/fsdb/organizers';
+import { by_character, by_lurid } from 'jsr:@andyburke/fsdb/organizers';
 import { FSDB_COLLECTION } from 'jsr:@andyburke/fsdb';
-import { FSDB_INDEXER_SYMLINKS } from '@andyburke/fsdb/indexers';
+import { FSDB_INDEXER_SYMLINKS } from 'jsr:@andyburke/fsdb/indexers';
 
 /**
  * @typedef {object} ROOM_PERMISSIONS
diff --git a/public/api/rooms/:room_id/events/README.md b/public/api/rooms/:room_id/events/README.md
index ddd37a6..ac03a50 100644
--- a/public/api/rooms/:room_id/events/README.md
+++ b/public/api/rooms/:room_id/events/README.md
@@ -1,10 +1,10 @@
-# /api/rooms/:room_id/events/:event_id
+# /api/rooms/:room_id/events
 
-Interact with a specific event.
+Interact with a events for a room.
 
-## GET /api/rooms/:room_id/events/:event_id
+## GET /api/rooms/:room_id/events
 
-Get the event specified by the tuple [ `:room_id`, `:event_id` ].
+Get events for the given room.
 
 ## PUT /api/rooms/:room_id/events/:event_id
 
diff --git a/public/api/rooms/index.ts b/public/api/rooms/index.ts
index 86183d1..56035fd 100644
--- a/public/api/rooms/index.ts
+++ b/public/api/rooms/index.ts
@@ -9,15 +9,14 @@ export const PRECHECKS: PRECHECK_TABLE = {};
 
 // GET /api/rooms - get rooms
 PRECHECKS.GET = [get_session, get_user, require_user, (_req: Request, meta: Record<string, any>): Response | undefined => {
-	const can_read_rooms = meta.user?.permissions?.includes('rooms.read');
+	const can_read_rooms = meta.user.permissions.includes('rooms.read');
 
 	if (!can_read_rooms) {
 		return CANNED_RESPONSES.permission_denied();
 	}
 }];
 export async function GET(_req: Request, meta: Record<string, any>): Promise<Response> {
-	const query: URLSearchParams = meta.query;
-	const limit = Math.min(parseInt(query.get('limit') ?? '100'), 100);
+	const limit = Math.min(parseInt(meta.query.limit ?? '100'), 100);
 	const rooms = await ROOMS.all({
 		limit
 	});
@@ -29,7 +28,7 @@ export async function GET(_req: Request, meta: Record<string, any>): Promise<Res
 
 // POST /api/rooms - Create a room
 PRECHECKS.POST = [get_session, get_user, require_user, (_req: Request, meta: Record<string, any>): Response | undefined => {
-	const can_create_rooms = meta.user?.permissions?.includes('rooms.create');
+	const can_create_rooms = meta.user.permissions.includes('rooms.create');
 
 	if (!can_create_rooms) {
 		return CANNED_RESPONSES.permission_denied();
diff --git a/public/api/users/me/index.ts b/public/api/users/me/index.ts
index 4b92fd1..70429d6 100644
--- a/public/api/users/me/index.ts
+++ b/public/api/users/me/index.ts
@@ -6,7 +6,7 @@ export const PRECHECKS: PRECHECK_TABLE = {};
 
 // GET /api/users/me - Get the current user
 PRECHECKS.GET = [get_session, get_user, require_user, (_req: Request, meta: Record<string, any>): Response | undefined => {
-	const can_read_self = meta.user?.permissions.includes('self.read');
+	const can_read_self = meta.user.permissions.includes('self.read');
 
 	if (!can_read_self) {
 		return CANNED_RESPONSES.permission_denied();
diff --git a/public/base.css b/public/base.css
new file mode 100644
index 0000000..cd0a03e
--- /dev/null
+++ b/public/base.css
@@ -0,0 +1,515 @@
+/* Dark mode default */
+:root {
+	--bg: #121212;
+	--text: #f0f0f0;
+	--accent: #4caf50;
+	--border-subtle: #555;
+	--border-normal: #888;
+	--border-highlight: #bbb;
+	--icon-scale: 1.25;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--bg: #f0f0f0;
+		--text: #121212;
+		--accent: #4caf50;
+		--border-subtle: #bbb;
+		--border-normal: #888;
+		--border-highlight: #555;
+	}
+}
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+	margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+	list-style: none;
+}
+
+/* Set core body defaults */
+body {
+	min-height: 100vh;
+	line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+	line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+	text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+	text-decoration-skip-ink: auto;
+	color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+	max-width: 100%;
+	display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+	font-family: inherit;
+	font-size: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+	min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+	scroll-margin-block: 5ex;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: sans-serif;
+	color: var(--text);
+	background-color: var(--bg);
+	display: flex;
+	flex-direction: column;
+	height: 100vh; // fixed height?
+}
+
+.clickable {
+	cursor: pointer;
+}
+
+.resizable {
+	resize: horizontal;
+	overflow: hidden;
+	border-right: 4px solid #444;
+}
+
+button {
+	background: inherit;
+	color: inherit;
+	padding: 0.5rem;
+	margin: 0 1rem;
+	border: 1px solid var(--text);
+	border-radius: 10%;
+}
+
+button.primary {
+	border: 1px solid var(--accent);
+}
+
+[data-requires-permission] {
+	visibility: hidden;
+	opacity: 0;
+}
+
+body[data-perms*="users.write"] [data-requires-permission="users.write"],
+body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
+	visibility: visible;
+	opacity: 1;
+}
+
+/* ICONS */
+.icon {
+	width: 24px;
+	height: 24px;
+	transform: scale(var(--icon-scale, 1));
+
+	stroke: white;
+	fill: transparent;
+	stroke-width: 1pt;
+	stroke-miterlimit: 10;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-dasharray: 400;
+}
+
+/* ICON - ATTACHMENT */
+.icon.attachment {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 14px;
+	height: 14px;
+	border: 2px solid;
+	border-top: 0;
+	border-bottom-left-radius: 100px;
+	border-bottom-right-radius: 100px;
+	transform: scale(var(--icon-scale, 1));
+	margin-top: 11px;
+}
+.icon.attachment::after,
+.icon.attachment::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	border-radius: 3px;
+	border: 2px solid;
+}
+.icon.attachment::after {
+	border-bottom: 0;
+	border-top-left-radius: 100px;
+	border-top-right-radius: 100px;
+	right: -2px;
+	width: 10px;
+	height: 14px;
+	bottom: 8px;
+}
+.icon.attachment::before {
+	width: 6px;
+	height: 12px;
+	border-top: 0;
+	border-bottom-left-radius: 100px;
+	border-bottom-right-radius: 100px;
+	left: 2px;
+	bottom: 4px;
+}
+
+
+/* ICON - CALENDAR */
+.icon.calendar,
+.icon.calendar::before {
+	display: block;
+	box-sizing: border-box;
+}
+.icon.calendar {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	width: 18px;
+	height: 18px;
+	border: 2px solid;
+	border-top: 4px solid;
+	border-radius: 3px;
+}
+.icon.calendar::before {
+	content: "";
+	position: absolute;
+	width: 10px;
+	border-radius: 3px;
+	left: 2px;
+	background: currentColor;
+	height: 2px;
+	top: 2px;
+}
+
+/* ICON - EXCHANGE */
+.icon.exchange,
+.icon.exchange::after,
+.icon.exchange::before {
+	display: block;
+	box-sizing: border-box;
+	width: 8px;
+	height: 8px;
+}
+.icon.exchange {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	box-shadow:
+		-3px 3px 0 -1px,
+		3px -3px 0 -1px;
+}
+.icon.exchange::after,
+.icon.exchange::before {
+	content: "";
+	position: absolute;
+	border: 2px solid;
+}
+.icon.exchange::before {
+	top: -5px;
+	left: -5px;
+}
+.icon.exchange::after {
+	bottom: -5px;
+	right: -5px;
+}
+
+/* ICON - HOME */
+.icon.home {
+	background:
+		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px
+			2px,
+		linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right
+			bottom/4px 2px;
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 18px;
+	height: 14px;
+	border: 2px solid;
+	border-top: 0;
+	border-bottom: 0;
+	border-top-right-radius: 3px;
+	border-top-left-radius: 3px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
+	margin-bottom: -2px;
+}
+.icon.home::after,
+.icon.home::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+.icon.home::before {
+	border-top: 2px solid;
+	border-left: 2px solid;
+	border-top-left-radius: 4px;
+	transform: rotate(45deg);
+	top: -5px;
+	border-radius: 3px;
+	width: 14px;
+	height: 14px;
+	left: 0;
+}
+.icon.home::after {
+	width: 8px;
+	height: 10px;
+	border: 2px solid;
+	border-radius: 100px;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	border-bottom: 0;
+	left: 3px;
+	bottom: 0;
+}
+
+/* ICON - PLUS */
+.icon.plus,
+.icon.plus::after,
+.icon.plus::before {
+	display: block;
+	box-sizing: border-box;
+}
+.icon.plus::after,
+.icon.plus::before {
+	border-radius: 10px;
+	background: currentColor;
+}
+.icon.plus {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	width: 16px;
+	height: 16px;
+}
+.icon.plus::after {
+	content: "";
+	position: absolute;
+	width: 2px;
+	height: 16px;
+	top: 0;
+	left: 7px;
+}
+.icon.plus::before {
+	content: "";
+	position: absolute;
+	width: 16px;
+	height: 2px;
+	top: 7px;
+	left: 0;
+}
+
+/* ICON - RESOURCES */
+.icon.resources,
+.icon.resources::after {
+	display: block;
+	box-sizing: border-box;
+	border-radius: 22px;
+}
+.icon.resources {
+	position: relative;
+	transform: scale(var(--icon-scale, 1));
+	width: 20px;
+	height: 20px;
+	border: 2px solid transparent;
+}
+.icon.resources::after {
+	content: "";
+	position: absolute;
+	width: 4px;
+	height: 4px;
+	background: currentColor;
+	top: 6px;
+	left: 6px;
+	box-shadow:
+		0 7px 0 1px,
+		0 -7px 0 1px,
+		-7px 0 0 1px,
+		7px 0 0 1px;
+}
+
+/* ICON - SEND */
+.icon.send {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	border: 2px solid;
+	border-radius: 4px;
+}
+.icon.send::after,
+.icon.send::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+	width: 2px;
+	height: 8px;
+	border-right: 2px solid;
+	top: 5px;
+	right: 5px;
+}
+.icon.send::after {
+	width: 6px;
+	height: 6px;
+	border-bottom: 2px solid;
+	transform: rotate(-45deg);
+	right: 9px;
+	top: 6px;
+}
+
+/* ICON - TALK */
+.icon.talk {
+	transform: scale(var(--icon-scale, 1));
+}
+.icon.talk,
+.icon.talk::after {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	width: 20px;
+	height: 20px;
+	border-radius: 100px;
+	border: 2px dotted currentColor;
+}
+.icon.talk::after {
+	content: "";
+	position: absolute;
+	width: 8px;
+	height: 8px;
+	border: 1px solid transparent;
+	top: 4px;
+	left: 4px;
+	box-shadow:
+		0 0 0 2px,
+		inset 0 0 0 2px currentColor;
+}
+
+/* ICON - USER */
+.icon.user,
+.icon.user::after,
+.icon.user::before {
+	display: block;
+	box-sizing: border-box;
+	border: 2px solid;
+	border-radius: 100px;
+}
+.icon.user {
+	overflow: hidden;
+	transform: scale(var(--icon-scale, 1));
+	width: 22px;
+	height: 22px;
+	position: relative;
+}
+.icon.user::after,
+.icon.user::before {
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 5px;
+	width: 8px;
+	height: 8px;
+}
+.icon.user::after {
+	border-radius: 200px;
+	top: 11px;
+	left: 0px;
+	width: 18px;
+	height: 18px;
+}
+
+/* ICON - WORK */
+.icon.work {
+	box-sizing: border-box;
+	position: relative;
+	display: block;
+	transform: scale(var(--icon-scale, 1));
+	width: 20px;
+	height: 20px;
+	border: 2px solid;
+	border-radius: 22px;
+}
+.icon.work::after,
+.icon.work::before {
+	content: "";
+	display: block;
+	box-sizing: border-box;
+	position: absolute;
+}
+.icon.work::before {
+	width: 12px;
+	height: 6px;
+	border: 2px solid;
+	border-top-left-radius: 100px;
+	border-top-right-radius: 100px;
+	top: 2px;
+	left: 2px;
+	border-bottom: 0;
+}
+.icon.work::after {
+	width: 18px;
+	height: 2px;
+	background: currentColor;
+	left: -1px;
+	top: 8px;
+}
diff --git a/public/images/default_avatar.gif b/public/images/default_avatar.gif
new file mode 100644
index 0000000..6d8cbf8
Binary files /dev/null and b/public/images/default_avatar.gif differ
diff --git a/public/index.html b/public/index.html
index a6180cf..eeab84e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,915 +4,46 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Social UX</title>
-		<style>
-			/* Dark mode default */
-			:root {
-				--bg: #121212;
-				--text: #f0f0f0;
-				--accent: #4caf50;
-				--icon-scale: 1.25;
-			}
-
-			@media (prefers-color-scheme: light) {
-				:root {
-					--bg: #f0f0f0;
-					--text: #121212;
-					--accent: #4caf50;
-				}
-			}
-
-			/* Box sizing rules */
-			*,
-			*::before,
-			*::after {
-				box-sizing: border-box;
-			}
-
-			/* Remove default margin in favour of better control in authored CSS */
-			body,
-			h1,
-			h2,
-			h3,
-			h4,
-			p,
-			figure,
-			blockquote,
-			dl,
-			dd {
-				margin-block-end: 0;
-			}
-
-			/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-			ul[role="list"],
-			ol[role="list"] {
-				list-style: none;
-			}
-
-			/* Set core body defaults */
-			body {
-				min-height: 100vh;
-				line-height: 1.5;
-			}
-
-			/* Set shorter line heights on headings and interactive elements */
-			h1,
-			h2,
-			h3,
-			h4,
-			button,
-			input,
-			label {
-				line-height: 1.1;
-			}
-
-			/* Balance text wrapping on headings */
-			h1,
-			h2,
-			h3,
-			h4 {
-				text-wrap: balance;
-			}
-
-			/* A elements that don't have a class get default styles */
-			a:not([class]) {
-				text-decoration-skip-ink: auto;
-				color: currentColor;
-			}
-
-			/* Make images easier to work with */
-			img,
-			picture {
-				max-width: 100%;
-				display: block;
-			}
-
-			/* Inherit fonts for inputs and buttons */
-			input,
-			button,
-			textarea,
-			select {
-				font-family: inherit;
-				font-size: inherit;
-			}
-
-			/* Make sure textareas without a rows attribute are not tiny */
-			textarea:not([rows]) {
-				min-height: 10em;
-			}
-
-			/* Anything that has been anchored to should have extra scroll margin */
-			:target {
-				scroll-margin-block: 5ex;
-			}
-
-			* {
-				margin: 0;
-				padding: 0;
-				-moz-box-sizing: border-box;
-				-webkit-box-sizing: border-box;
-				box-sizing: border-box;
-			}
-
-			body {
-				font-family: sans-serif;
-				color: var(--text);
-				background-color: var(--bg);
-				display: flex;
-				flex-direction: column;
-				height: 100vh; // fixed height?
-			}
-
-			.tabs-container {
-				position: relative;
-				height: 100%;
-			}
-
-			.tabs {
-				position: relative;
-				height: 100%;
-				width: 100%;
-			}
-
-			.tabs::before,
-			.tabs::after {
-				content: "";
-				display: table;
-			}
-
-			.tabs::after {
-				clear: both;
-			}
-
-			.tab {
-				float: left;
-			}
-
-			.tab-switch {
-				display: none;
-			}
-
-			.tab-label {
-				position: relative;
-				width: 8rem;
-				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;
-				padding: 1rem 1rem 0 1rem;
-				opacity: 0;
-				transition: all 0.35s;
-			}
-
-			.tab-switch:checked + .tab-label {
-				margin-top: 1px;
-				border-bottom: 1px solid #888;
-				transition: all 0.35s;
-				z-index: 1;
-			}
-
-			.tab-switch:checked + label + .tab-content {
-				z-index: 2;
-				opacity: 1;
-				transition: all 0.35s;
-			}
-
-			@media screen and (max-width: 800px) {
-				.tab-label {
-					width: 4rem;
-				}
-
-				.tab-label .label {
-					font-size: small;
-				}
-			}
-
-			@media screen and (max-width: 480px) {
-				.tab-label {
-					width: 2.75rem;
-				}
-
-				.tab-label .label {
-					font-size: x-small;
-				}
-			}
-
-			.resizable {
-				resize: horizontal;
-				overflow: hidden;
-				border-right: 4px solid #444;
-			}
-
-			/* ICONS */
-			.icon {
-				width: 24px;
-				height: 24px;
-				transform: scale(var(--icon-scale, 1));
-
-				stroke: white;
-				fill: transparent;
-				stroke-width: 1pt;
-				stroke-miterlimit: 10;
-				stroke-linecap: round;
-				stroke-linejoin: round;
-				stroke-dasharray: 400;
-			}
-
-			/* ICON - CALENDAR */
-			.icon.calendar,
-			.icon.calendar::before {
-				display: block;
-				box-sizing: border-box;
-			}
-			.icon.calendar {
-				position: relative;
-				transform: scale(var(--icon-scale, 1));
-				width: 18px;
-				height: 18px;
-				border: 2px solid;
-				border-top: 4px solid;
-				border-radius: 3px;
-			}
-			.icon.calendar::before {
-				content: "";
-				position: absolute;
-				width: 10px;
-				border-radius: 3px;
-				left: 2px;
-				background: currentColor;
-				height: 2px;
-				top: 2px;
-			}
-
-			/* ICON - EXCHANGE */
-			.icon.exchange,
-			.icon.exchange::after,
-			.icon.exchange::before {
-				display: block;
-				box-sizing: border-box;
-				width: 8px;
-				height: 8px;
-			}
-			.icon.exchange {
-				position: relative;
-				transform: scale(var(--icon-scale, 1));
-				box-shadow:
-					-3px 3px 0 -1px,
-					3px -3px 0 -1px;
-			}
-			.icon.exchange::after,
-			.icon.exchange::before {
-				content: "";
-				position: absolute;
-				border: 2px solid;
-			}
-			.icon.exchange::before {
-				top: -5px;
-				left: -5px;
-			}
-			.icon.exchange::after {
-				bottom: -5px;
-				right: -5px;
-			}
-
-			/* ICON - HOME */
-			.icon.home {
-				background:
-					linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px
-						2px,
-					linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right
-						bottom/4px 2px;
-				box-sizing: border-box;
-				position: relative;
-				display: block;
-				transform: scale(var(--icon-scale, 1));
-				width: 18px;
-				height: 14px;
-				border: 2px solid;
-				border-top: 0;
-				border-bottom: 0;
-				border-top-right-radius: 3px;
-				border-top-left-radius: 3px;
-				border-bottom-right-radius: 0;
-				border-bottom-left-radius: 0;
-				margin-bottom: -2px;
-			}
-			.icon.home::after,
-			.icon.home::before {
-				content: "";
-				display: block;
-				box-sizing: border-box;
-				position: absolute;
-			}
-			.icon.home::before {
-				border-top: 2px solid;
-				border-left: 2px solid;
-				border-top-left-radius: 4px;
-				transform: rotate(45deg);
-				top: -5px;
-				border-radius: 3px;
-				width: 14px;
-				height: 14px;
-				left: 0;
-			}
-			.icon.home::after {
-				width: 8px;
-				height: 10px;
-				border: 2px solid;
-				border-radius: 100px;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-				border-bottom: 0;
-				left: 3px;
-				bottom: 0;
-			}
-
-			/* ICON - RESOURCES */
-			.icon.resources,
-			.icon.resources::after {
-				display: block;
-				box-sizing: border-box;
-				border-radius: 22px;
-			}
-			.icon.resources {
-				position: relative;
-				transform: scale(var(--icon-scale, 1));
-				width: 20px;
-				height: 20px;
-				border: 2px solid transparent;
-			}
-			.icon.resources::after {
-				content: "";
-				position: absolute;
-				width: 4px;
-				height: 4px;
-				background: currentColor;
-				top: 6px;
-				left: 6px;
-				box-shadow:
-					0 7px 0 1px,
-					0 -7px 0 1px,
-					-7px 0 0 1px,
-					7px 0 0 1px;
-			}
-
-			/* ICON - TALK */
-			.icon.talk {
-				transform: scale(var(--icon-scale, 1));
-			}
-			.icon.talk,
-			.icon.talk::after {
-				box-sizing: border-box;
-				position: relative;
-				display: block;
-				width: 20px;
-				height: 20px;
-				border-radius: 100px;
-				border: 2px dotted currentColor;
-			}
-			.icon.talk::after {
-				content: "";
-				position: absolute;
-				width: 8px;
-				height: 8px;
-				border: 1px solid transparent;
-				top: 4px;
-				left: 4px;
-				box-shadow:
-					0 0 0 2px,
-					inset 0 0 0 2px currentColor;
-			}
-
-			/* ICON - USER */
-			.icon.user,
-			.icon.user::after,
-			.icon.user::before {
-				display: block;
-				box-sizing: border-box;
-				border: 2px solid;
-				border-radius: 100px;
-			}
-			.icon.user {
-				overflow: hidden;
-				transform: scale(var(--icon-scale, 1));
-				width: 22px;
-				height: 22px;
-				position: relative;
-			}
-			.icon.user::after,
-			.icon.user::before {
-				content: "";
-				position: absolute;
-				top: 2px;
-				left: 5px;
-				width: 8px;
-				height: 8px;
-			}
-			.icon.user::after {
-				border-radius: 200px;
-				top: 11px;
-				left: 0px;
-				width: 18px;
-				height: 18px;
-			}
-
-			/* ICON - WORK */
-			.icon.work {
-				box-sizing: border-box;
-				position: relative;
-				display: block;
-				transform: scale(var(--icon-scale, 1));
-				width: 20px;
-				height: 20px;
-				border: 2px solid;
-				border-radius: 22px;
-			}
-			.icon.work::after,
-			.icon.work::before {
-				content: "";
-				display: block;
-				box-sizing: border-box;
-				position: absolute;
-			}
-			.icon.work::before {
-				width: 12px;
-				height: 6px;
-				border: 2px solid;
-				border-top-left-radius: 100px;
-				border-top-right-radius: 100px;
-				top: 2px;
-				left: 2px;
-				border-bottom: 0;
-			}
-			.icon.work::after {
-				width: 18px;
-				height: 2px;
-				background: currentColor;
-				left: -1px;
-				top: 8px;
-			}
-		</style>
-
-		<script>
-			/* https://github.com/turistu/totp-in-javascript/blob/main/totp.js */
-
-			async function otp_totp(key, secs = 30, digits = 6) {
-				return otp_hotp(otp_unbase32(key), otp_pack64bu(Date.now() / 1000 / secs), digits);
-			}
-			async function otp_hotp(key, counter, digits) {
-				let y = self.crypto.subtle;
-				if (!y) throw Error("no self.crypto.subtle object available");
-				let k = await y.importKey("raw", key, { name: "HMAC", hash: "SHA-1" }, false, [
-					"sign",
-				]);
-				return otp_hotp_truncate(await y.sign("HMAC", k, counter), digits);
-			}
-			function otp_hotp_truncate(buf, digits) {
-				let a = new Uint8Array(buf),
-					i = a[19] & 0xf;
-				return otp_fmt(
-					10,
-					digits,
-					(((a[i] & 0x7f) << 24) | (a[i + 1] << 16) | (a[i + 2] << 8) | a[i + 3]) %
-						10 ** digits,
-				);
-			}
-
-			function otp_fmt(base, width, num) {
-				return num.toString(base).padStart(width, "0");
-			}
-			function otp_unbase32(s) {
-				let t = (s.toLowerCase().match(/\S/g) || [])
-					.map((c) => {
-						let i = "abcdefghijklmnopqrstuvwxyz234567".indexOf(c);
-						if (i < 0) throw Error(`bad char '${c}' in key`);
-						return otp_fmt(2, 5, i);
-					})
-					.join("");
-				if (t.length < 8) throw Error("key too short");
-				return new Uint8Array(t.match(/.{8}/g).map((d) => parseInt(d, 2)));
-			}
-			function otp_pack64bu(v) {
-				let b = new ArrayBuffer(8),
-					d = new DataView(b);
-				d.setUint32(0, v / 2 ** 32);
-				d.setUint32(4, v);
-				return b;
-			}
-		</script>
+		<link rel="stylesheet" href="./base.css"></link>
+		<script src="./js/datetimeutils.js" type="text/javascript"></script>
+		<script src="./js/locationchange.js" type="text/javascript"></script>
+		<script src="./js/totp.js" type="text/javascript"></script>
+		<script src="./js/api.js" type="text/javascript"></script>
+		<script src="./js/smartforms.js" type="text/javascript"></script>
 	</head>
 	<body>
-		<div id="signup-login-wall">
-			<style>
-				#signup-login-wall {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					z-index: 10000;
-					background: var(--bg);
-					visibility: visible;
-					opacity: 1;
-					transition: all 0.33s;
-				}
+		<!-- #include file="./signup_login_wall.html" -->
 
-				body[data-user] #signup-login-wall {
-					visibility: hidden;
-					opacity: 0;
-				}
-
-				#signup-login-wall .limiter {
-					width: 95%;
-					position: relative;
-					background: rgba(128, 128, 128, 0.5);
-					max-width: 40em;
-					min-height: 22rem;
-				}
-
-				#signup-login-wall form {
-					width: 100%;
-				}
-
-				form div {
-					position: relative;
-					display: flex;
-					margin-bottom: 1em;
-				}
-
-				form label {
-					position: absolute;
-					top: 10px;
-					font-size: 30px;
-					margin: 10px;
-					padding: 0 10px;
-					background-color: var(--bg);
-					-webkit-transition:
-						top 0.2s ease-in-out,
-						font-size 0.2s ease-in-out;
-					transition:
-						top 0.2s ease-in-out,
-						font-size 0.2s ease-in-out;
-				}
-
-				form input:focus ~ label,
-				form input:valid ~ label {
-					top: -25px;
-					font-size: 20px;
-				}
-
-				form input {
-					width: 100%;
-					padding: 20px;
-					border: 1px solid var(--text);
-					font-size: 20px;
-					background-color: var(--bg);
-					color: var(--text);
-				}
-
-				form input:focus {
-					outline: none;
-				}
-
-				form button {
-					width: 100%;
-					padding: 20px;
-					border: 1px solid var(--text);
-					font-size: 20px;
-					background-color: var(--bg);
-					color: var(--text);
-				}
-
-				form button.primary {
-					background-color: var(--accent);
-				}
-			</style>
-
-			<div class="limiter">
-				<div class="tabs">
-					<div id="login-tab" class="tab">
-						<input
-							type="radio"
-							name="signup-login-tabs"
-							id="login-tab-input"
-							class="tab-switch"
-							checked="checked"
-						/>
-						<label for="login-tab-input" class="tab-label">
-							<div class="label">Log In</div>
-						</label>
-						<div class="tab-content">
-							<form
-								id="login-form"
-								action="/api/auth"
-								onreply="(user)=>{ document.body.dataset.user = user; }"
-							>
-								<script>
-									const form = document.currentScript.closest("form");
-									form.on_response = (response) => {
-										// TODO: we should hold the session secret only in memory, not the cookie?
-										document.body.dataset.user = response.user;
-									};
-								</script>
-								<div>
-									<input
-										id="login-username"
-										type="text"
-										name="username"
-										required
-									/>
-									<label for="login-username">username</label>
-								</div>
-								<div>
-									<input
-										id="login-password"
-										type="password"
-										name="password"
-										required
-									/>
-									<label for="login-password">password</label>
-								</div>
-								<div>
-									<button id="login-submit" type="submit" class="primary">
-										Log In
-									</button>
-								</div>
-							</form>
-						</div>
-					</div>
-					<div id="signup-tab" class="tab">
-						<input
-							type="radio"
-							name="signup-login-tabs"
-							id="signup-tab-input"
-							class="tab-switch"
-						/>
-						<label for="signup-tab-input" class="tab-label">
-							<div class="label">Sign Up</div>
-						</label>
-						<div class="tab-content">
-							<form id="signup-form" action="/api/users">
-								<script>
-									const form = document.currentScript.closest("form");
-									form.on_response = (response) => {
-										document.body.dataset.user = response.user;
-										console.dir({ response });
-									};
-								</script>
-								<div>
-									<input
-										id="signup-username"
-										type="text"
-										name="username"
-										required
-									/>
-									<label for="signup-username">username</label>
-								</div>
-								<div>
-									<input
-										id="signup-password"
-										type="password"
-										name="password"
-										required
-									/>
-									<label for="signup-password">password</label>
-								</div>
-								<button id="signup-submit" type="submit" class="primary">
-									Sign Up
-								</button>
-							</form>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- MAIN  -->
-		<div class="tabs">
-			<div id="home" class="tab">
-				<input
-					type="radio"
-					name="top-level-tabs"
-					id="home-tab-input"
-					checked="checked"
-					class="tab-switch"
-				/>
-				<label for="home-tab-input" class="tab-label">
-					<div class="icon home"></div>
-					<div class="label">Home</div>
-				</label>
-				<div class="tab-content">This is the home tab.</div>
-			</div>
-
-			<div id="talk" class="tab">
-				<input type="radio" name="top-level-tabs" id="talk-tab-input" class="tab-switch" />
-				<label for="talk-tab-input" class="tab-label"
-					><div class="icon talk"></div>
-					<div class="label">Talk</div>
-				</label>
-				<div class="tab-content">
-					<style>
-						#talk .tab-content {
-							display: grid;
-							grid-template-columns: auto 1fr;
-						}
-
-						#talk .sidebar {
-							min-width: 100px;
-						}
-
-						#talk .room {
-							padding: 1rem;
-						}
-					</style>
-					<div class="sidebar resizable">
-						<ul>
-							<li>#one</li>
-							<li>#two</li>
-							<li>#three</li>
-						</ul>
-					</div>
-					<div class="room">This is a talk room.</div>
-				</div>
-			</div>
-
-			<div id="exchange" class="tab">
-				<input
-					type="radio"
-					name="top-level-tabs"
-					id="exchange-tab-input"
-					class="tab-switch"
-				/>
-				<label for="exchange-tab-input" class="tab-label"
-					><div class="icon exchange"></div>
-					<div class="label">Exchange</div></label
-				>
-				<div class="tab-content">This is the exchange tab.</div>
-			</div>
-
-			<div id="work" class="tab">
-				<input type="radio" name="top-level-tabs" id="work-tab-input" class="tab-switch" />
-				<label for="work-tab-input" class="tab-label"
-					><div class="icon work"></div>
-					<div class="label">Work</div>
-				</label>
-				<div class="tab-content">This is the work tab.</div>
-			</div>
-
-			<div id="resources" class="tab">
-				<input
-					type="radio"
-					name="top-level-tabs"
-					id="resources-tab-input"
-					class="tab-switch"
-				/>
-				<label for="resources-tab-input" class="tab-label"
-					><div class="icon resources"></div>
-					<div class="label">Resources</div></label
-				>
-				<div class="tab-content">This is the resources tab.</div>
-			</div>
-
-			<div id="calendar" class="tab">
-				<input
-					type="radio"
-					name="top-level-tabs"
-					id="calendar-tab-input"
-					class="tab-switch"
-				/>
-				<label for="calendar-tab-input" class="tab-label"
-					><div class="icon calendar"></div>
-					<div class="label">Calendar</div></label
-				>
-				<div class="tab-content">This is the calendar tab.</div>
-			</div>
-
-			<div id="user" class="tab">
-				<input type="radio" name="top-level-tabs" id="user-tab-input" class="tab-switch" />
-				<label for="user-tab-input" class="tab-label"
-					><div class="icon user"></div>
-					<div class="label">Profile</div></label
-				>
-				<div class="tab-content">This is the profile tab.</div>
-			</div>
-		</div>
+		<!-- #include file="./tabs/tabs.html" -->
 	</body>
 	<script>
 		document.addEventListener("DOMContentLoaded", () => {
 			/* check if we are logged in */
 			(async () => {
 				try {
-					const session_id = (document.cookie.match(
-						/^(?:.*;)?\s*session_id\s*=\s*([^;]+)(?:.*)?$/,
-					) || [, null])[1];
+					const session_response = await api.fetch("/users/me");
 
-					// TODO: this wasn't really intended to be persisted in a cookie
-					const session_secret = (document.cookie.match(
-						/^(?:.*;)?\s*session_secret\s*=\s*([^;]+)(?:.*)?$/,
-					) || [, null])[1];
+					if (!session_response.ok) {
+						const error_body = await session_response.json();
+						const error = error_body?.error;
 
-					if (session_id && session_secret) {
-						const session_response = await fetch("/api/users/me", {
-							method: "GET",
-							headers: {
-								Accept: "application/json",
-								"x-session_id": session_id,
-								"x-totp": await otp_totp(session_secret),
-							},
+						console.dir({
+							error_body,
+							error,
 						});
-
-						if (!session_response.ok) {
-							const error_body = await session_response.json();
-							const error = error_body?.error;
-
-							console.dir({
-								error_body,
-								error,
-							});
-							return;
-						}
-
-						const user = await session_response.json();
-						document.body.dataset.user = user;
+						return;
 					}
+
+					const user = await session_response.json();
+
+					document.body.dataset.user = JSON.stringify( user );
+					document.body.dataset.perms = user.permissions.join(":");
 				} catch (error) {
 					console.dir({
 						error,
 					});
 				}
 			})();
-
-			/* make all forms semi-smart */
-			const forms = document.querySelectorAll("form");
-			for (const form of forms) {
-				const script = form.querySelector("script");
-
-				form.onsubmit = async (event) => {
-					event.preventDefault();
-
-					const form_data = new FormData(form);
-					const body = Object.fromEntries(form_data.entries());
-					const url = form.action;
-
-					try {
-						// TODO: send session header
-						const response = await fetch(url, {
-							method: "POST",
-							headers: {
-								Accept: "application/json",
-								"Content-Type": "application/json",
-							},
-							body: JSON.stringify(body),
-						});
-
-						if (!response.ok) {
-							const error_body = await response.json();
-							const error = error_body?.error;
-
-							if (form.on_error) {
-								return form.on_error(error);
-							}
-
-							alert(error.message ?? "Unknown error!");
-							return;
-						}
-
-						const response_body = await response.json();
-						if (form.on_response) {
-							return form.on_response(response_body);
-						}
-					} catch (error) {
-						console.dir({
-							error,
-						});
-
-						if (form.onerror) {
-							return form.onerror(error);
-						}
-
-						alert(error);
-					}
-				};
-			}
 		});
 	</script>
 </html>
diff --git a/public/js/api.js b/public/js/api.js
new file mode 100644
index 0000000..3c6b4ce
--- /dev/null
+++ b/public/js/api.js
@@ -0,0 +1,33 @@
+const api = {
+	fetch: async function (url, options = { method: "GET" }) {
+		const session_id = (document.cookie.match(
+			/^(?:.*;)?\s*session_id\s*=\s*([^;]+)(?:.*)?$/,
+		) || [, null])[1];
+
+		// TODO: this wasn't really intended to be persisted in a cookie
+		const session_secret = (document.cookie.match(
+			/^(?:.*;)?\s*session_secret\s*=\s*([^;]+)(?:.*)?$/,
+		) || [, null])[1];
+
+		const headers = {
+			Accept: "application/json",
+			"x-session_id": session_id,
+			"x-totp": await otp_totp(session_secret),
+			...(options.headers ?? {}),
+		};
+
+		const fetch_options = {
+			method: options.method,
+			headers,
+		};
+
+		if (options.json) {
+			headers["Content-Type"] = "application/json";
+			fetch_options.body = JSON.stringify(options.json);
+		}
+
+		const response = await fetch(`/api${url}`, fetch_options);
+
+		return response;
+	},
+};
diff --git a/public/js/datetimeutils.js b/public/js/datetimeutils.js
new file mode 100644
index 0000000..560899f
--- /dev/null
+++ b/public/js/datetimeutils.js
@@ -0,0 +1,19 @@
+function datetime_to_local(input) {
+	const local_datetime = new Date(input);
+
+	return {
+		long: local_datetime.toLocaleString("en-US", {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+			hour12: true,
+		}),
+
+		short: local_datetime.toLocaleString("en-US", {
+			timeStyle: "short",
+			hour12: true,
+		}),
+	};
+}
diff --git a/public/js/locationchange.js b/public/js/locationchange.js
new file mode 100644
index 0000000..156683f
--- /dev/null
+++ b/public/js/locationchange.js
@@ -0,0 +1,22 @@
+// https://stackoverflow.com/questions/6390341/how-to-detect-if-url-has-changed-after-hash-in-javascript
+(() => {
+	let oldPushState = history.pushState;
+	history.pushState = function pushState() {
+		let ret = oldPushState.apply(this, arguments);
+		window.dispatchEvent(new Event("pushstate"));
+		window.dispatchEvent(new Event("locationchange"));
+		return ret;
+	};
+
+	let oldReplaceState = history.replaceState;
+	history.replaceState = function replaceState() {
+		let ret = oldReplaceState.apply(this, arguments);
+		window.dispatchEvent(new Event("replacestate"));
+		window.dispatchEvent(new Event("locationchange"));
+		return ret;
+	};
+
+	window.addEventListener("popstate", () => {
+		window.dispatchEvent(new Event("locationchange"));
+	});
+})();
diff --git a/public/js/smartforms.js b/public/js/smartforms.js
new file mode 100644
index 0000000..a170f3c
--- /dev/null
+++ b/public/js/smartforms.js
@@ -0,0 +1,65 @@
+document.addEventListener("DOMContentLoaded", () => {
+	/* make all forms semi-smart */
+	const forms = document.querySelectorAll("form");
+	for (const form of forms) {
+		const script = form.querySelector("script");
+
+		form.onsubmit = async (event) => {
+			event.preventDefault();
+
+			const form_data = new FormData(form);
+			const body = {};
+			for (const [key, value] of form_data.entries()) {
+				const elements = key.split(".");
+				let current = body;
+				for (const element of elements.slice(0, elements.length - 1)) {
+					current[element] = current[element] ?? {};
+					current = current[element];
+				}
+
+				current[elements.slice(elements.length - 1).shift()] = value;
+			}
+
+			const url = form.action;
+
+			try {
+				// TODO: send session header
+				const response = await fetch(url, {
+					method: "POST",
+					headers: {
+						Accept: "application/json",
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify(body),
+				});
+
+				if (!response.ok) {
+					const error_body = await response.json();
+					const error = error_body?.error;
+
+					if (form.on_error) {
+						return form.on_error(error);
+					}
+
+					alert(error.message ?? "Unknown error!");
+					return;
+				}
+
+				const response_body = await response.json();
+				if (form.on_response) {
+					return form.on_response(response_body);
+				}
+			} catch (error) {
+				console.dir({
+					error,
+				});
+
+				if (form.onerror) {
+					return form.onerror(error);
+				}
+
+				alert(error);
+			}
+		};
+	}
+});
diff --git a/public/js/totp.js b/public/js/totp.js
new file mode 100644
index 0000000..6f4582d
--- /dev/null
+++ b/public/js/totp.js
@@ -0,0 +1,42 @@
+/* https://github.com/turistu/totp-in-javascript/blob/main/totp.js */
+
+async function otp_totp(key, secs = 30, digits = 6) {
+	return otp_hotp(otp_unbase32(key), otp_pack64bu(Date.now() / 1000 / secs), digits);
+}
+async function otp_hotp(key, counter, digits) {
+	let y = self.crypto.subtle;
+	if (!y) throw Error("no self.crypto.subtle object available");
+	let k = await y.importKey("raw", key, { name: "HMAC", hash: "SHA-1" }, false, ["sign"]);
+	return otp_hotp_truncate(await y.sign("HMAC", k, counter), digits);
+}
+function otp_hotp_truncate(buf, digits) {
+	let a = new Uint8Array(buf),
+		i = a[19] & 0xf;
+	return otp_fmt(
+		10,
+		digits,
+		(((a[i] & 0x7f) << 24) | (a[i + 1] << 16) | (a[i + 2] << 8) | a[i + 3]) % 10 ** digits,
+	);
+}
+
+function otp_fmt(base, width, num) {
+	return num.toString(base).padStart(width, "0");
+}
+function otp_unbase32(s) {
+	let t = (s.toLowerCase().match(/\S/g) || [])
+		.map((c) => {
+			let i = "abcdefghijklmnopqrstuvwxyz234567".indexOf(c);
+			if (i < 0) throw Error(`bad char '${c}' in key`);
+			return otp_fmt(2, 5, i);
+		})
+		.join("");
+	if (t.length < 8) throw Error("key too short");
+	return new Uint8Array(t.match(/.{8}/g).map((d) => parseInt(d, 2)));
+}
+function otp_pack64bu(v) {
+	let b = new ArrayBuffer(8),
+		d = new DataView(b);
+	d.setUint32(0, v / 2 ** 32);
+	d.setUint32(4, v);
+	return b;
+}
diff --git a/public/signup_login_wall.html b/public/signup_login_wall.html
new file mode 100644
index 0000000..c0b20d7
--- /dev/null
+++ b/public/signup_login_wall.html
@@ -0,0 +1,171 @@
+<div id="signup-login-wall">
+	<style>
+		#signup-login-wall {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 10000;
+			background: var(--bg);
+			visibility: visible;
+			opacity: 1;
+			transition: all 0.33s;
+		}
+
+		body[data-user] #signup-login-wall {
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		#signup-login-wall .limiter {
+			width: 95%;
+			position: relative;
+			background: rgba(128, 128, 128, 0.5);
+			max-width: 40em;
+			min-height: 22rem;
+		}
+
+		#signup-login-wall form {
+			width: 100%;
+		}
+
+		form div {
+			position: relative;
+			display: flex;
+			margin-bottom: 1em;
+		}
+
+		form label {
+			position: absolute;
+			top: 10px;
+			font-size: 30px;
+			margin: 10px;
+			padding: 0 10px;
+			background-color: var(--bg);
+			-webkit-transition:
+				top 0.2s ease-in-out,
+				font-size 0.2s ease-in-out;
+			transition:
+				top 0.2s ease-in-out,
+				font-size 0.2s ease-in-out;
+		}
+
+		form input:focus ~ label,
+		form input:valid ~ label {
+			top: -25px;
+			font-size: 20px;
+		}
+
+		form input {
+			width: 100%;
+			padding: 20px;
+			border: 1px solid var(--text);
+			font-size: 20px;
+			background-color: var(--bg);
+			color: var(--text);
+		}
+
+		form input:focus {
+			outline: none;
+		}
+
+		form button {
+			width: 100%;
+			padding: 20px;
+			border: 1px solid var(--text);
+			font-size: 20px;
+			background-color: var(--bg);
+			color: var(--text);
+		}
+
+		form button.primary {
+			background-color: var(--accent);
+		}
+	</style>
+
+	<div class="limiter">
+		<div class="tabs">
+			<div id="login-tab" class="tab">
+				<input
+					type="radio"
+					name="signup-login-tabs"
+					id="login-tab-input"
+					class="tab-switch"
+					checked="checked"
+				/>
+				<label for="login-tab-input" class="tab-label">
+					<div class="label">Log In</div>
+				</label>
+				<div class="tab-content">
+					<form
+						id="login-form"
+						action="/api/auth"
+						onreply="(user)=>{ document.body.dataset.user = JSON.stringify( user ); }"
+					>
+						<script>
+							{
+								const form = document.currentScript.closest("form");
+								form.on_response = (response) => {
+									// TODO: we should hold the session secret only in memory, not the cookie?
+									document.body.dataset.user = JSON.stringify(response.user);
+									document.body.dataset.perms =
+										response.user.permissions.join(":");
+								};
+							}
+						</script>
+						<div>
+							<input id="login-username" type="text" name="username" required />
+							<label for="login-username">username</label>
+						</div>
+						<div>
+							<input id="login-password" type="password" name="password" required />
+							<label for="login-password">password</label>
+						</div>
+						<div>
+							<button id="login-submit" type="submit" class="primary">Log In</button>
+						</div>
+					</form>
+				</div>
+			</div>
+			<div id="signup-tab" class="tab">
+				<input
+					type="radio"
+					name="signup-login-tabs"
+					id="signup-tab-input"
+					class="tab-switch"
+				/>
+				<label for="signup-tab-input" class="tab-label">
+					<div class="label">Sign Up</div>
+				</label>
+				<div class="tab-content">
+					<form id="signup-form" action="/api/users">
+						<script>
+							{
+								const form = document.currentScript.closest("form");
+								form.on_response = (response) => {
+									document.body.dataset.user = JSON.stringify(response.user);
+									document.body.dataset.perms =
+										response.user.permissions.join(":");
+									console.dir({ response });
+								};
+							}
+						</script>
+						<div>
+							<input id="signup-username" type="text" name="username" required />
+							<label for="signup-username">username</label>
+						</div>
+						<div>
+							<input id="signup-password" type="password" name="password" required />
+							<label for="signup-password">password</label>
+						</div>
+						<button id="signup-submit" type="submit" class="primary">Sign Up</button>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/public/tabs/calendar.html b/public/tabs/calendar.html
new file mode 100644
index 0000000..104da9b
--- /dev/null
+++ b/public/tabs/calendar.html
@@ -0,0 +1,14 @@
+<div id="calendar" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="calendar-tab-input"
+		class="tab-switch"
+		data-hash="/calendar"
+	/>
+	<label for="calendar-tab-input" class="tab-label"
+		><div class="icon calendar"></div>
+		<div class="label">Calendar</div></label
+	>
+	<div class="tab-content">This is the calendar tab.</div>
+</div>
diff --git a/public/tabs/exchange.html b/public/tabs/exchange.html
new file mode 100644
index 0000000..1ac4c81
--- /dev/null
+++ b/public/tabs/exchange.html
@@ -0,0 +1,14 @@
+<div id="exchange" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="exchange-tab-input"
+		class="tab-switch"
+		data-hash="/exchange"
+	/>
+	<label for="exchange-tab-input" class="tab-label"
+		><div class="icon exchange"></div>
+		<div class="label">Exchange</div></label
+	>
+	<div class="tab-content">This is the exchange tab.</div>
+</div>
diff --git a/public/tabs/home.html b/public/tabs/home.html
new file mode 100644
index 0000000..d5c960f
--- /dev/null
+++ b/public/tabs/home.html
@@ -0,0 +1,15 @@
+<div id="home" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="home-tab-input"
+		checked="checked"
+		class="tab-switch"
+		data-hash="/"
+	/>
+	<label for="home-tab-input" class="tab-label">
+		<div class="icon home"></div>
+		<div class="label">Home</div>
+	</label>
+	<div class="tab-content">This is the home tab.</div>
+</div>
diff --git a/public/tabs/resources.html b/public/tabs/resources.html
new file mode 100644
index 0000000..fe05b70
--- /dev/null
+++ b/public/tabs/resources.html
@@ -0,0 +1,14 @@
+<div id="resources" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="resources-tab-input"
+		class="tab-switch"
+		data-hash="/resources"
+	/>
+	<label for="resources-tab-input" class="tab-label"
+		><div class="icon resources"></div>
+		<div class="label">Resources</div></label
+	>
+	<div class="tab-content">This is the resources tab.</div>
+</div>
diff --git a/public/tabs/tabs.html b/public/tabs/tabs.html
new file mode 100644
index 0000000..1af63c9
--- /dev/null
+++ b/public/tabs/tabs.html
@@ -0,0 +1,131 @@
+<script>
+	window.addEventListener("locationchange", () => {
+		const hash = window.location.hash?.slice(1);
+		if (hash) {
+			const target_tab = document.querySelector(`[data-hash="${hash}"]`);
+			if (target_tab) {
+				target_tab.click();
+			}
+		}
+	});
+
+	document.addEventListener("DOMContentLoaded", () => {
+		const tab_switchers = document.querySelectorAll(".tab-switch");
+		for (const tab_switch of tab_switchers) {
+			tab_switch.addEventListener("input", (event) => {
+				const tab_selector = event.target;
+				const hash = tab_selector.dataset.hash;
+				if (hash) {
+					window.location.hash = hash;
+				}
+			});
+		}
+	});
+</script>
+<style>
+	.tabs-container {
+		position: relative;
+		height: 100%;
+	}
+
+	.tabs {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
+	.tabs::before,
+	.tabs::after {
+		content: "";
+		display: table;
+	}
+
+	.tabs::after {
+		clear: both;
+	}
+
+	.tab {
+		float: left;
+	}
+
+	.tab-switch {
+		display: none;
+	}
+
+	.tab-label {
+		position: relative;
+		width: 8rem;
+		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;
+		padding: 1rem 1rem 0 1rem;
+		opacity: 0;
+		transition: all 0.35s;
+		border-top: 1px solid var(--border-subtle);
+		margin-top: 1px;
+	}
+
+	.tab-switch,
+	.tab-switch + .tab-label {
+		transition: none;
+	}
+
+	.tab-switch:checked + .tab-label {
+		margin-top: 1px;
+		border-bottom: 1px solid var(--border-highlight);
+		z-index: 1;
+	}
+
+	.tab-switch:checked + label + .tab-content {
+		z-index: 2;
+		opacity: 1;
+	}
+
+	@media screen and (max-width: 800px) {
+		.tab-label {
+			width: 4rem;
+		}
+
+		.tab-label .label {
+			font-size: small;
+		}
+	}
+
+	@media screen and (max-width: 480px) {
+		.tab-label {
+			width: 2.75rem;
+		}
+
+		.tab-label .label {
+			font-size: x-small;
+		}
+	}
+</style>
+
+<div class="tabs">
+	<!-- #include file="./home.html" -->
+	<!-- #include file="./talk.html" -->
+	<!-- #include file="./exchange.html" -->
+	<!-- #include file="./work.html" -->
+	<!-- #include file="./resources.html" -->
+	<!-- #include file="./calendar.html" -->
+	<!-- #include file="./user.html" -->
+</div>
diff --git a/public/tabs/talk.html b/public/tabs/talk.html
new file mode 100644
index 0000000..486d93f
--- /dev/null
+++ b/public/tabs/talk.html
@@ -0,0 +1,381 @@
+<div id="talk" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="talk-tab-input"
+		class="tab-switch"
+		data-hash="/talk"
+	/>
+	<label for="talk-tab-input" class="tab-label"
+		><div class="icon talk"></div>
+		<div class="label">Talk</div>
+	</label>
+	<div class="tab-content">
+		<style>
+			#talk .tab-content {
+				display: grid;
+				grid-template-columns: auto 1fr;
+			}
+
+			#talk .sidebar {
+				position: relative;
+				min-width: 100px;
+				padding-top: 1.5rem;
+			}
+
+			#talk .room {
+				padding: 1rem;
+			}
+
+			#talk #room-create {
+				position: absolute;
+				top: 1rem;
+				right: 0.5rem;
+			}
+
+			#talk .room-selector a {
+				display: block;
+				width: 100%;
+				text-decoration: none;
+				line-height: 1.5rem;
+			}
+
+			#talk #room-chat-container {
+				position: relative;
+			}
+
+			#talk #room-chat-content {
+				padding-bottom: 5rem;
+			}
+
+			#talk #room-chat-entry-container {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 5rem;
+				padding: 1rem;
+			}
+
+			#talk #room-chat-entry-container form {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				display: flex;
+				flex-direction: row;
+				padding: 0.75rem;
+			}
+
+			#talk #room-chat-entry-container form button {
+				width: inherit;
+				padding: inherit;
+			}
+
+			#talk #room-chat-entry-container form textarea {
+				flex-grow: 1;
+				background: inherit;
+				color: inherit;
+			}
+
+			#talk .message-container {
+				display: flex;
+				flex-direction: row;
+				transition: all 0.33s;
+			}
+
+			#talk .message-container.sending {
+				opacity: 0.75;
+			}
+
+			#talk .message-container .info-container {
+				width: 8rem;
+			}
+
+			#talk .message-container .info-container .avatar-container {
+				display: block;
+				margin: 0 auto;
+				width: 3rem;
+				height: 3rem;
+				border-radius: 16%;
+				overflow: hidden;
+			}
+
+			#talk .message-container .info-container .avatar-container img {
+				width: 100%;
+			}
+
+			#talk .message-container .info-container .datetime-container,
+			#talk .message-container .info-container .username-container {
+				text-align: center;
+			}
+
+			#talk .message-container .info-container .datetime-container .long {
+				visibility: hidden;
+				display: none;
+			}
+
+			#talk .message-container .info-container .datetime-container .short {
+				font-weight: bold;
+				font-size: x-small;
+			}
+		</style>
+		<div class="sidebar resizable">
+			<div id="room-create" class="clickable" data-requires-permission="rooms.create">
+				<div class="icon plus"></div>
+				<script>
+					async function get_new_room_element() {
+						const existing_new_room_element = document.getElementById("new-room");
+						if (existing_new_room_element) {
+							return existing_new_room_element;
+						}
+
+						const room_list = document.getElementById("room-list");
+						room_list.insertAdjacentHTML(
+							"beforeend",
+							`<li id="new-room" class="room-selector" contenteditable="true">New Room</li>`,
+						);
+						await new Promise((resolve) => setTimeout(resolve, 1));
+
+						const new_room_element = document.getElementById("new-room");
+						return new_room_element;
+					}
+
+					async function load_room(room_id) {
+						const room_response = await api.fetch(`/rooms/${room_id}`);
+						if (!room_response.ok) {
+							const error = await room_response.json();
+							alert(error.message ?? JSON.stringify(error));
+							return;
+						}
+
+						const room = await room_response.json();
+
+						const events_response = await api.fetch(`/rooms/${room_id}/events`);
+
+						if (!events_response.ok) {
+							const error = await room_response.json();
+							alert(error.message ?? JSON.stringify(error));
+							return;
+						}
+					}
+
+					// TODO: one place to handle switching rooms
+					// TODO: load events when we switch rooms and clear and update the chat
+					// TODO: try to select immediate siblings from the same user and hide avatars
+					window.addEventListener("locationchange", function () {
+						const hash = window.location.hash;
+						const room_id =
+							hash.indexOf("#/talk/room/") === 0 ? hash.substring(12) : "";
+						const room_chat_container = document.getElementById("room-chat-container");
+						room_chat_container.dataset.room_id = room_id;
+					});
+
+					document.addEventListener("DOMContentLoaded", async () => {
+						const rooms_response = await api.fetch("/rooms");
+						if (rooms_response.ok) {
+							const room_list = document.getElementById("room-list");
+							room_list.innerHTML = "";
+							const rooms = await rooms_response.json();
+							for (const room of rooms) {
+								room_list.insertAdjacentHTML(
+									"beforeend",
+									`<li id="room-${room.id}" class="room-selector"><a href="#/talk/room/${room.id}">${room.name}</a></li>`,
+								);
+							}
+						}
+
+						const chat_input = document.getElementById("room-chat-input");
+						async function on_send_message(event) {
+							event.preventDefault();
+
+							chat_input.disabled = true;
+
+							const message = chat_input.value.trim();
+							if (!message) {
+								chat_input.disabled = false;
+								return;
+							}
+
+							const room_chat_container =
+								document.getElementById("room-chat-container");
+							const room_chat_content = document.getElementById("room-chat-content");
+
+							const room_id = room_chat_container.dataset.room_id;
+
+							if (!room_id) {
+								alert("Failed to get room_id!");
+								chat_input.disabled = false;
+								return;
+							}
+
+							const now = new Date().toISOString();
+
+							const message_event = {
+								type: "text",
+								data: {
+									message,
+								},
+								timestamps: {
+									created: now,
+									updated: now,
+								},
+							};
+
+							const temp_message_id = `TEMP-${now}`;
+							const now_datetime = datetime_to_local(
+								message_event.timestamps.created,
+							);
+
+							const user = JSON.parse(document.body.dataset.user);
+
+							room_chat_content.insertAdjacentHTML(
+								"beforeend",
+								`<div id="${temp_message_id}" class="message-container sending from-user-${user.id}">
+									<div class="info-container">
+										<div class="avatar-container">
+											<img src="${user.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
+										</div>
+										<div class="username-container">
+											<span class="username">${user.username ?? "unknown"}</span>
+										</div>
+										<div class="datetime-container">
+											<span class="long">${now_datetime.long}</span>
+											<span class="short">${now_datetime.short}</span>
+										</div>
+									</div>
+									<div class="message-content-container">${message_event.data.message}</div>
+								</div>`,
+							);
+
+							const event_response = await api.fetch(`/rooms/${room_id}/events`, {
+								method: "POST",
+								json: message_event,
+							});
+
+							if (!event_response.ok) {
+								alert("FAIL");
+								chat_input.disabled = false;
+								return;
+							}
+
+							const authoritative_message_event = await event_response.json();
+
+							const temp_message = document.getElementById(temp_message_id);
+							temp_message.id = authoritative_message_event.id;
+							temp_message.classList.remove("sending");
+
+							const local_datetime = datetime_to_local(
+								authoritative_message_event.timestamps.created,
+							);
+							const long_time = temp_message.querySelector(
+								".datetime-container .long",
+							);
+							const short_time = temp_message.querySelector(
+								".datetime-container .short",
+							);
+							long_time.innerHTML = local_datetime.long;
+							short_time.innerHTML = local_datetime.short;
+
+							chat_input.value = "";
+							chat_input.disabled = false;
+						}
+
+						const send_button = document.getElementById("room-chat-send");
+						send_button.addEventListener("click", on_send_message);
+						chat_input.addEventListener("keypress", (event) => {
+							if (event.key === "Enter" && !event.shiftKey) {
+								on_send_message(event);
+							}
+						});
+
+						const room_create_button = document.getElementById("room-create");
+						room_create_button.addEventListener("click", async (event) => {
+							event.preventDefault();
+
+							const new_room_element = await get_new_room_element();
+							new_room_element.focus();
+							if (document.body.createTextRange) {
+								const range = document.body.createTextRange();
+								range.moveToElementText(new_room_element);
+								range.select();
+							} else if (window.getSelection) {
+								const selection = window.getSelection();
+								const range = document.createRange();
+								range.selectNodeContents(new_room_element);
+								selection.removeAllRanges();
+								selection.addRange(range);
+							}
+
+							new_room_element.addEventListener("keypress", (event) => {
+								if (event.keyCode !== 13) {
+									return;
+								}
+
+								event.preventDefault();
+								new_room_element.blur();
+							});
+
+							new_room_element.addEventListener("focusout", async () => {
+								const name =
+									new_room_element.textContent ?? new_room_element.innerText;
+
+								const new_room_response = await api.fetch("/rooms", {
+									method: "POST",
+									json: {
+										name,
+									},
+								});
+
+								if (!new_room_response.ok) {
+									const error = await new_room_response.json();
+
+									console.dir({ error });
+									alert(error.message ?? "unknown error!");
+									return;
+								}
+
+								const new_room = await new_room_response.json();
+								new_room_element.remove();
+
+								const room_list = document.getElementById("room-list");
+								room_list.insertAdjacentHTML(
+									"beforeend",
+									`<li id="room-${new_room.id}" class="room-selector"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
+								);
+
+								const room_selectors = document.querySelectorAll(".room-selector");
+								for (const room_selector of room_selectors) {
+									room_selector.classList.remove("active");
+								}
+
+								const new_room_selector = document.getElementById(
+									`room-${new_room.id}`,
+								);
+								new_room_selector.classList.add("active");
+
+								window.location.hash = `/talk/room/${new_room.id}`;
+							});
+						});
+					});
+				</script>
+			</div>
+			<ul id="room-list"></ul>
+		</div>
+		<div id="room-chat-container">
+			<div id="room-chat-content"></div>
+			<div id="room-chat-entry-container">
+				<form action="">
+					<button aria-label="Attach file">
+						<i class="icon attachment"></i>
+					</button>
+					<textarea id="room-chat-input" class="room-chat-input" rows="1"></textarea>
+					<button id="room-chat-send" class="primary" aria-label="Send a message">
+						<i class="icon send"></i>
+					</button>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/public/tabs/user.html b/public/tabs/user.html
new file mode 100644
index 0000000..5f1a41a
--- /dev/null
+++ b/public/tabs/user.html
@@ -0,0 +1,57 @@
+<script>
+	new MutationObserver((mutations, observer) => {
+		mutations.forEach((mutation) => {
+			const user_json = document.body.dataset.user;
+			const user = user_json
+				? JSON.parse(user_json)
+				: {
+						username: "",
+						meta: {
+							avatar: "/images/default_avatar.gif",
+						},
+					};
+
+			const avatars = document.querySelectorAll("[data-bind-user_meta_avatar]");
+			for (const avatar of avatars) {
+				const bound_to = avatar.dataset["bind-user_meta_avatar"] ?? "innerHTML";
+				avatar[bound_to] = user.meta?.avatar ?? "/images/default_avatar.gif";
+			}
+
+			const usernames = document.querySelectorAll("[data-bind-user_username]");
+			for (const username of usernames) {
+				const bound_to = username.dataset["bind-user_username"] ?? "innerHTML";
+				username[bound_to] = user.username;
+			}
+		});
+	}).observe(document.body, {
+		attributes: true,
+		attributeFilter: ["data-user"],
+	});
+</script>
+<div id="user" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="user-tab-input"
+		class="tab-switch"
+		data-hash="/profile"
+	/>
+	<label for="user-tab-input" class="tab-label"
+		><div class="icon user"></div>
+		<div class="label">Profile</div></label
+	>
+	<div class="tab-content">
+		<div class="avatar-container">
+			<img
+				id="user-avatar"
+				src="/images/default_avatar.gif"
+				alt="User Avatar"
+				data-bind-user_meta_avatar="src"
+			/>
+		</div>
+
+		<div class="username-container">
+			<span class="username" data-bind-user_username></span>
+		</div>
+	</div>
+</div>
diff --git a/public/tabs/work.html b/public/tabs/work.html
new file mode 100644
index 0000000..5b97336
--- /dev/null
+++ b/public/tabs/work.html
@@ -0,0 +1,14 @@
+<div id="work" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="work-tab-input"
+		class="tab-switch"
+		data-hash="/work"
+	/>
+	<label for="work-tab-input" class="tab-label"
+		><div class="icon work"></div>
+		<div class="label">Work</div>
+	</label>
+	<div class="tab-content">This is the work tab.</div>
+</div>