diff --git a/public/base.css b/public/base.css
index d9c54d5..8e5c01e 100644
--- a/public/base.css
+++ b/public/base.css
@@ -1,23 +1,31 @@
+
 /* Dark mode default */
 :root {
-	--bg: #323232;
-	--text: #efe;
-	--accent: #fa0 ;
-	--border-subtle: #555;
-	--border-normal: #888;
-	--border-highlight: #bbb;
+	--base-color: #fa0;
+
+	--bg: hsl(from var(--base-color) h 20% 7.5%);
+
+	--text: hsl(from var(--base-color) h 5% 100% );
+	--accent: hsl(from var(--base-color) h clamp( 0, calc(s + 10), 100 ) clamp( 0, calc(l + 20), 100 ) );
+
+	--border-subtle: hsl(from var(--base-color) h 50% 25%);
+	--border-normal: hsl(from var(--base-color) h 50% 50%);
+	--border-highlight: hsl(from var(--base-color) h 50% 75%);
+
 	--icon-scale: 1;
 	--border-radius: 4px;
 }
 
 @media (prefers-color-scheme: light) {
 	:root {
-		--bg: #f0f0f0;
-		--text: #121212;
-		--accent: #c80;
-		--border-subtle: #bbb;
-		--border-normal: #888;
-		--border-highlight: #555;
+		--bg: hsl(from var(--base-color) h 20% 95%);
+
+		--text: hsl(from var(--base-color) h 5% 5% );
+		--accent: hsl(from var(--base-color) h calc(s + 10) calc(l + 20) );
+
+		--border-subtle: hsl(from var(--base-color) h 50% 90%);
+		--border-normal: hsl(from var(--base-color) h 50% 50%);
+		--border-highlight: hsl(from var var(--base-color) h 50% 25%);
 	}
 }
 
diff --git a/public/index.html b/public/index.html
index e15c789..14b14b5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,10 +22,121 @@
 	<body>
 		<!-- #include file="./signup_login_wall.html" -->
 
-		<!-- #include file="./tabs/tabs.html" -->
+		<main>
+			<!-- #include file="./sidebar/sidebar.html" -->
+
+			<!-- #include file="./tabs/tabs.html" -->
+		</main>
 	</body>
 	<script>
-		document.addEventListener("DOMContentLoaded", () => {
+	const HASH_EXTRACTOR = /^\#\/topic\/(?<topic_id>[A-Za-z\-]+)\/?(?<view>\w+)/gm;
+
+	function extract_url_hash_info() {
+		HASH_EXTRACTOR.lastIndex = 0; // ugh, need this to have this work on multiple exec calls
+		const {
+			groups: { topic_id, view },
+		} = HASH_EXTRACTOR.exec(window.location.hash ?? "") ?? {
+			groups: {},
+		};
+
+		console.dir({
+			url: window.location.href,
+			hash: window.location.hash,
+			topic_id,
+			view,
+		});
+
+		if ( !document.body.dataset.topic || document.body.dataset.topic !== topic_id ) {
+			const previous = document.body.dataset.topic;
+			document.body.dataset.topic = topic_id;
+
+			console.dir( {
+				topic_changed: {
+					detail: {
+						previous,
+						topic: topic_id
+					}
+				}
+			});
+
+			document.dispatchEvent(new CustomEvent( "topic_changed", {
+				detail: {
+					previous,
+					topic: topic_id
+				}
+			}));
+		}
+
+		if ( !document.body.dataset.view || document.body.dataset.view !== view ) {
+			const previous = document.body.dataset.view;
+			document.body.dataset.view = view;
+
+			console.dir( {
+				view_changed: {
+					detail: {
+						previous,
+						view
+					}
+				}
+			});
+
+			document.dispatchEvent(new CustomEvent( "view_changed", {
+				detail: {
+					previous,
+					view
+				}
+			}));
+		}
+	}
+	window.addEventListener("locationchange", extract_url_hash_info);
+	document.addEventListener( 'topic_changed', ( {detail: { topic }}) => {
+		if ( !topic ) {
+			const first_topic_id = TOPICS?.[0]?.id;
+			if ( first_topic_id ) {
+				window.location.hash = `/topic/${ first_topic_id }/chat`;
+			}
+		}
+	})
+
+	let TOPICS = [];
+	let last_topic_update = undefined;
+	let update_topics_timeout = undefined;
+	const UPDATE_TOPICS_FREQUENCY = 60_000;
+	async function update_topics() {
+		const now = new Date();
+		const time_since_last_update = now - (last_topic_update ?? 0);
+		if (time_since_last_update < UPDATE_TOPICS_FREQUENCY / 2) {
+			return;
+		}
+
+		if ( update_topics_timeout ) {
+			clearTimeout( update_topics_timeout );
+			update_topics_timeout = undefined;
+		}
+
+		const topics_response = await api.fetch("/api/topics");
+		if (topics_response.ok) {
+			const topic_list = document.getElementById("topic-list");
+			topic_list.innerHTML = "";
+
+			const new_topics = await topics_response.json();
+			const has_differences = TOPICS.length !== new_topics.length || new_topics.some( (topic, index) => {
+				return ( TOPICS[ index ]?.id !== topic.id || TOPICS[ index ]?.name !== topic.name );
+			});
+
+			if ( has_differences ) {
+				TOPICS = new_topics;
+
+				document.dispatchEvent(new CustomEvent("topics_updated", { detail: { topics: TOPICS } }));
+			}
+
+			last_topic_update = now;
+		}
+
+		update_topics_timeout = setTimeout( update_topics, UPDATE_TOPICS_FREQUENCY);
+	}
+
+	document.addEventListener("DOMContentLoaded", async () => {
 			/* check if we are logged in */
 			(async () => {
 				try {
@@ -46,12 +157,20 @@
 
 					document.body.dataset.user = JSON.stringify( user );
 					document.body.dataset.perms = user.permissions.join(":");
+
+					document.dispatchEvent(new CustomEvent("user_logged_in", { detail: { user } }));
+
 				} catch (error) {
 					console.dir({
 						error,
 					});
 				}
 			})();
-		});
+
+			window.addEventListener("locationchange", update_topics);
+			await update_topics();
+			extract_url_hash_info();
+	});
+
 	</script>
 </html>
diff --git a/public/js/audioplayer.js b/public/js/audioplayer.js
index faf00ea..0de8d49 100644
--- a/public/js/audioplayer.js
+++ b/public/js/audioplayer.js
@@ -146,9 +146,9 @@ new MutationObserver((mutations) => {
 
 			VIZ_RGB = window
 				.getComputedStyle(CANVAS)
-				.color.slice(4, -1)
-				.split(",")
-				.map((v) => parseInt(v));
+				.color.slice(11, -1)
+				.split(/[ ,]/)
+				.map((v) => parseInt(Math.min(v * 255, 255)));
 
 			ACTX = ACTX ?? new AudioContext();
 
diff --git a/public/sidebar/sidebar.html b/public/sidebar/sidebar.html
new file mode 100644
index 0000000..a97b32f
--- /dev/null
+++ b/public/sidebar/sidebar.html
@@ -0,0 +1,191 @@
+<script>
+	document.addEventListener("topics_updated", ({ detail: { topics } }) => {
+		const topic_list = document.getElementById("topic-list");
+		topic_list.innerHTML = "";
+		for (const topic of topics) {
+			topic_list.insertAdjacentHTML(
+				"beforeend",
+				`<li id="topic-selector-${topic.id}" class="topic"><a href="#/topic/${topic.id}/chat">${topic.name}</a></li>`,
+			);
+		}
+	});
+</script>
+
+<style type="text/css">
+	main {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: grid;
+		grid-template-columns: auto 1fr;
+	}
+	@media screen and (max-width: 1200px) {
+		main {
+			grid-template-columns: auto;
+		}
+	}
+
+	#sidebar {
+		z-index: 100;
+		background: var(--bg);
+		position: relative;
+		width: auto;
+		left: 0;
+		max-width: 32rem;
+		padding: 0.5rem;
+		transition: all ease-in-out 0.33s;
+		border-right: 1px solid var(--border-subtle);
+	}
+
+	#sidebar #sidebar-toggle,
+	#sidebar #sidebar-toggle-icon {
+		opacity: 0;
+		display: none;
+	}
+
+	@media screen and (max-width: 1200px) {
+		#sidebar {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			transform: translateX(-100%);
+		}
+
+		#sidebar #sidebar-toggle-icon {
+			opacity: 1;
+			display: block;
+			position: absolute;
+			top: 0.9rem;
+			right: -2.5rem;
+			cursor: pointer;
+			transition: all ease-in-out 0.33s;
+			background: rgba(128, 128, 128, 0.5);
+			border-radius: 0 1rem 1rem 0;
+			padding: 0.5rem;
+		}
+
+		#sidebar .icon {
+			transition: all ease-in-out 0.15s;
+		}
+
+		#sidebar:has(#sidebar-toggle:checked) {
+			transform: translateX(0);
+		}
+
+		#sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
+			right: 0;
+			rotate: 180deg;
+		}
+	}
+
+	#sidebar .title {
+		text-transform: uppercase;
+		font-size: small;
+		font-weight: bold;
+		line-height: 2rem;
+	}
+
+	#sidebar #topic-creation-container {
+		margin-top: 0.5rem;
+	}
+
+	#sidebar #topic-creation-container #toggle-topic-creation-form-button {
+		transform: scale(0.8);
+	}
+
+	#sidebar .topic-list {
+		list-style-type: none;
+	}
+
+	#sidebar .topic-list > li.topic a:before {
+		position: absolute;
+		left: -1.75rem;
+		top: 0;
+		font-weight: bold;
+		font-size: x-large;
+		content: "#";
+		color: var(--text);
+	}
+
+	#sidebar .topic-list > li.topic a {
+		position: relative;
+		display: block;
+		width: 100%;
+		min-height: 1.5rem;
+		line-height: 1.5rem;
+		font-weight: bold;
+		font-size: large;
+		margin-left: 1.75rem;
+		text-decoration: none;
+	}
+
+	#sidebar .topic-list > li.topic.active a {
+		color: var(--accent);
+	}
+</style>
+
+<div id="sidebar">
+	<input type="checkbox" id="sidebar-toggle" />
+	<label id="sidebar-toggle-icon" for="sidebar-toggle">
+		<div class="icon right"></div>
+	</label>
+	<div>
+		<span class="title">topics</span>
+	</div>
+	<ul id="topic-list" class="topic-list"></ul>
+	<div id="topic-creation-container" data-requires-permission="topics.create">
+		<button
+			id="toggle-topic-creation-form-button"
+			onclick="((event) => {
+				event.preventDefault();
+			 	const topic_create_form = document.getElementById( 'topic-create' );
+				topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
+			})(event)"
+		>
+			<div class="icon plus"></div>
+		</button>
+		<form
+			id="topic-create"
+			data-smart="true"
+			action="/api/topics"
+			method="POST"
+			style="
+				margin-top: 1rem;
+				width: 100%;
+				overflow: hidden;
+				height: 0;
+				overflow: hidden;
+				transition: all 0.5s;
+			"
+		>
+			<input
+				id="new-topic-name-input"
+				type="text"
+				name="name"
+				value=""
+				placeholder="new topic"
+			/>
+
+			<input type="submit" hidden />
+			<script>
+				{
+					const form = document.currentScript.closest("form");
+					const topic_create_form = document.getElementById("topic-create");
+					const new_topic_name_input = document.getElementById("new-topic-name-input");
+
+					form.on_reply = (new_topic) => {
+						const topic_list = document.getElementById("topic-list");
+						topic_list.insertAdjacentHTML(
+							"beforeend",
+							`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
+						);
+
+						new_topic_name_input.value = "";
+						window.location.hash = `/topic/${new_topic.id}`;
+						topic_create_form.style["height"] = "0";
+					};
+				}
+			</script>
+		</form>
+	</div>
+</div>
diff --git a/public/tabs/calendar/calendar.html b/public/tabs/calendar/calendar.html
index a791f90..a816533 100644
--- a/public/tabs/calendar/calendar.html
+++ b/public/tabs/calendar/calendar.html
@@ -4,7 +4,7 @@
 		name="top-level-tabs"
 		id="calendar-tab-input"
 		class="tab-switch"
-		data-hash="/calendar"
+		data-view="calendar"
 	/>
 	<label for="calendar-tab-input" class="tab-label"
 		><div class="icon calendar"></div>
diff --git a/public/tabs/chat/chat.css b/public/tabs/chat/chat.css
index b5af9eb..6f58b49 100644
--- a/public/tabs/chat/chat.css
+++ b/public/tabs/chat/chat.css
@@ -1,63 +1,7 @@
-#chat .tab-content {
-	display: grid;
-	grid-template-columns: auto 1fr;
-}
-
-.topic-list {
-	margin: 1rem 0;
-	list-style-type: none;
-}
-
-.topic-list > li.topic a:before {
-	position: absolute;
-	left: -1.75rem;
-	top: 0;
-	font-weight: bold;
-	font-size: x-large;
-	content: "#";
-	color: var(--text);
-}
-
-.topic-list > li.topic a {
-	position: relative;
-	display: block;
-	width: 100%;
-	min-height: 1.5rem;
-	line-height: 1.5rem;
-	font-weight: bold;
-	font-size: large;
-	margin-left: 1.75rem;
-	text-decoration: none;
-}
-
-.topic-list > li.topic.active a {
-	color: var(--accent);
-}
-
-#chat .sidebar {
-	position: relative;
-	width: min-content;
-	min-width: 10rem;
-	max-width: 32rem;
-	overflow-x: scroll;
-	padding: 0.5rem;
-}
-
-#chat .sidebar #sidebar-toggle,
-#chat .sidebar #sidebar-toggle-icon {
-	opacity: 0;
-	display: none;
-}
-
-#chat .sidebar .title {
-	text-transform: uppercase;
-	font-size: small;
-	font-weight: bold;
-	line-height: 2rem;
-}
-
 #chat #topic-chat-container {
 	position: relative;
+	width: 100%;
+	height: 100%;
 }
 
 #chat #topic-chat-content {
@@ -333,46 +277,7 @@
 	border-style: none;
 }
 
-@media screen and (max-width: 768px) {
-	#chat .sidebar {
-		z-index: 100;
-		background: var(--bg);
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 100%;
-		left: -100%;
-		overflow-y: scroll;
-		overflow: visible;
-		transition: all ease-in-out 0.33s;
-	}
-
-	#chat .sidebar #sidebar-toggle-icon {
-		opacity: 1;
-		display: block;
-		position: absolute;
-		top: 1rem;
-		right: -2.5rem;
-		cursor: pointer;
-		transition: all ease-in-out 0.33s;
-		background: rgba(128, 128, 128, 0.5);
-		border-radius: 0 1rem 1rem 0;
-		padding: 0.5rem;
-	}
-
-	#chat .sidebar .icon {
-		transition: all ease-in-out 0.33s;
-	}
-
-	#chat .sidebar:has(#sidebar-toggle:checked) {
-		left: 0;
-	}
-
-	#chat .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
-		right: 0;
-		rotate: 180deg;
-	}
-
+@media screen and (max-width: 1200px) {
 	#chat #topic-chat-container {
 		position: absolute;
 		top: 0;
diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html
index a32c15b..5a5226a 100644
--- a/public/tabs/chat/chat.html
+++ b/public/tabs/chat/chat.html
@@ -4,7 +4,7 @@
 		name="top-level-tabs"
 		id="chat-tab-input"
 		class="tab-switch"
-		data-hash="/chat"
+		data-view="chat"
 	/>
 	<label for="chat-tab-input" class="tab-label"
 		><div class="icon chat"></div>
@@ -17,74 +17,6 @@
 		<script src="/js/external/mimetypes.js" type="text/javascript"></script>
 		<script src="/js/external/punycode.js" type="text/javascript"></script>
 		<script src="/tabs/chat/chat.js" type="text/javascript"></script>
-		<div class="sidebar resizable">
-			<input type="checkbox" id="sidebar-toggle" />
-			<label id="sidebar-toggle-icon" for="sidebar-toggle">
-				<div class="icon right"></div>
-			</label>
-			<div id="topic-creation-container" data-requires-permission="topics.create">
-				<button
-					id="toggle-topic-creation-form-button"
-					onclick="((event) => {
-						event.preventDefault();
-					 	const topic_create_form = document.getElementById( 'topic-create' );
-						topic_create_form.style[ 'height' ] = topic_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
-					})(event)"
-				>
-					<div class="icon plus"></div>
-				</button>
-				<form
-					id="topic-create"
-					data-smart="true"
-					action="/api/topics"
-					method="POST"
-					style="
-						margin-top: 1rem;
-						width: 100%;
-						overflow: hidden;
-						height: 0;
-						overflow: hidden;
-						transition: all 0.5s;
-					"
-				>
-					<input
-						id="new-topic-name-input"
-						type="text"
-						name="name"
-						value=""
-						placeholder="new topic"
-					/>
-					<!-- <button class="primary" type="submit">
-						<div class="icon plus"></div>
-					</button> -->
-					<input type="submit" hidden />
-					<script>
-						{
-							const form = document.currentScript.closest("form");
-							const topic_create_form = document.getElementById("topic-create");
-							const new_topic_name_input =
-								document.getElementById("new-topic-name-input");
-
-							form.on_reply = (new_topic) => {
-								const topic_list = document.getElementById("topic-list");
-								topic_list.insertAdjacentHTML(
-									"beforeend",
-									`<li id="topic-selector-${new_topic.id}" class="topic"><a href="#/topic/${new_topic.id}">${new_topic.name}</a></li>`,
-								);
-
-								new_topic_name_input.value = "";
-								window.location.hash = `/chat/topic/${new_topic.id}`;
-								topic_create_form.style["height"] = "0";
-							};
-						}
-					</script>
-				</form>
-			</div>
-			<div>
-				<span class="title">chat topics</span>
-			</div>
-			<ul id="topic-list" class="topic-list"></ul>
-		</div>
 		<div id="topic-chat-container">
 			<div id="topic-chat-content"></div>
 			<div id="topic-chat-entry-container">
diff --git a/public/tabs/chat/chat.js b/public/tabs/chat/chat.js
index b337bc1..ec03bcb 100644
--- a/public/tabs/chat/chat.js
+++ b/public/tabs/chat/chat.js
@@ -311,23 +311,6 @@ function render_text_event(topic_chat_content, event, creator, existing_element)
 	}
 }
 
-async function get_new_topic_element() {
-	const existing_new_topic_element = document.getElementById("new-topic");
-	if (existing_new_topic_element) {
-		return existing_new_topic_element;
-	}
-
-	const topic_list = document.getElementById("topic-list");
-	topic_list.insertAdjacentHTML(
-		"beforeend",
-		`<li id="new-topic" class="topic"><a href="" contenteditable="true">new topic</a></li>`,
-	);
-	await new Promise((resolve) => setTimeout(resolve, 1));
-
-	const new_topic_element = document.getElementById("new-topic");
-	return new_topic_element;
-}
-
 const users = {};
 async function append_topic_events(events) {
 	const topic_chat_content = document.getElementById("topic-chat-content");
@@ -393,6 +376,8 @@ async function poll_for_new_events() {
 }
 
 async function load_topic(topic_id) {
+	if (!topic_id) return;
+
 	const topic_chat_content = document.getElementById("topic-chat-content");
 
 	if (topic_polling_request_abort_controller) {
@@ -435,66 +420,6 @@ async function load_topic(topic_id) {
 	await append_topic_events(events);
 	poll_for_new_events(topic_id);
 }
-
-let last_topic_update = undefined;
-async function update_chat_topics() {
-	const now = new Date();
-	const time_since_last_update = now - (last_topic_update ?? 0);
-	if (time_since_last_update < 5_000) {
-		return;
-	}
-
-	const topics_response = await api.fetch("/api/topics");
-	if (topics_response.ok) {
-		const topic_list = document.getElementById("topic-list");
-		topic_list.innerHTML = "";
-		const topics = await topics_response.json();
-		for (const topic of topics) {
-			topic_list.insertAdjacentHTML(
-				"beforeend",
-				`<li id="topic-selector-${topic.id}" class="topic"><a href="#/chat/topic/${topic.id}">${topic.name}</a></li>`,
-			);
-		}
-
-		last_topic_update = now;
-	}
-}
-window.addEventListener("locationchange", update_chat_topics);
-
-function check_for_topic_in_url() {
-	const user_json = document.body.dataset.user;
-	if (!user_json) {
-		return;
-	}
-
-	const hash = window.location.hash;
-	const chat_in_url = hash.indexOf("#/chat") === 0;
-	if (!chat_in_url) {
-		return;
-	}
-
-	const first_topic_id = document.querySelector("li.topic")?.id.substring(14);
-
-	// #/chat/topic/{topic_id}
-	//             ^ 12
-	const topic_id = hash.substring(12) || first_topic_id;
-
-	if (!topic_id) {
-		setTimeout(check_for_topic_in_url, 100);
-		return;
-	}
-
-	const topic_chat_container = document.getElementById("topic-chat-container");
-
-	if (topic_chat_container.dataset.topic_id !== topic_id) {
-		window.location.hash = `/chat/topic/${topic_id}`;
-		topic_chat_container.dataset.topic_id = topic_id;
-		load_topic(topic_id);
-	}
-}
-window.addEventListener("locationchange", check_for_topic_in_url);
-
-document.addEventListener("DOMContentLoaded", async () => {
-	await update_chat_topics();
-	check_for_topic_in_url();
+document.addEventListener("topic_changed", ({ detail: { topic } }) => {
+	load_topic(topic);
 });
diff --git a/public/tabs/exchange/exchange.html b/public/tabs/exchange/exchange.html
index f31ae26..c436b03 100644
--- a/public/tabs/exchange/exchange.html
+++ b/public/tabs/exchange/exchange.html
@@ -4,7 +4,7 @@
 		name="top-level-tabs"
 		id="exchange-tab-input"
 		class="tab-switch"
-		data-hash="/exchange"
+		data-view="exchange"
 	/>
 	<label for="exchange-tab-input" class="tab-label"
 		><div class="icon exchange"></div>
diff --git a/public/tabs/home/home.html b/public/tabs/home/home.html
index b0cae4f..4352892 100644
--- a/public/tabs/home/home.html
+++ b/public/tabs/home/home.html
@@ -5,7 +5,7 @@
 		id="home-tab-input"
 		checked="checked"
 		class="tab-switch"
-		data-hash="/"
+		data-view="home"
 	/>
 	<label for="home-tab-input" class="tab-label">
 		<div class="icon home"></div>
diff --git a/public/tabs/profile/profile.html b/public/tabs/profile/profile.html
index c4ba12a..3dcbd15 100644
--- a/public/tabs/profile/profile.html
+++ b/public/tabs/profile/profile.html
@@ -86,7 +86,7 @@
 		name="top-level-tabs"
 		id="user-tab-input"
 		class="tab-switch"
-		data-hash="/profile"
+		data-view="profile"
 	/>
 	<label for="user-tab-input" class="tab-label"
 		><div class="icon user"></div>
@@ -163,6 +163,10 @@
 				<span class="username" data-bind__user_username></span>
 			</div>
 
+			<div class="notifications-settings-container">
+				<button onclick="NOTIFICATIONS.request_permission()">Enable Notifications</button>
+			</div>
+
 			<form data-smart="true" data-method="DELETE" action="/api/auth">
 				<script>
 					{
diff --git a/public/tabs/resources/resources.html b/public/tabs/resources/resources.html
index 61f7b6c..56758b5 100644
--- a/public/tabs/resources/resources.html
+++ b/public/tabs/resources/resources.html
@@ -4,7 +4,7 @@
 		name="top-level-tabs"
 		id="resources-tab-input"
 		class="tab-switch"
-		data-hash="/resources"
+		data-view="resources"
 	/>
 	<label for="resources-tab-input" class="tab-label"
 		><div class="icon resources"></div>
diff --git a/public/tabs/tabs.html b/public/tabs/tabs.html
index 974fa78..da8be6a 100644
--- a/public/tabs/tabs.html
+++ b/public/tabs/tabs.html
@@ -1,37 +1,23 @@
 <script>
-	function on_location_change() {
-		const hash = window.location.hash?.slice(1);
-		console.dir({ hash });
-		if (hash) {
-			const target_tab_url = hash.slice(0, hash.slice(1).indexOf("/") + 1);
-			const target_tab = document.querySelector(`[data-hash="${target_tab_url}"]`);
+	document.addEventListener("view_changed", ({ detail: { view } }) => {
+		const target_tab = document.querySelector(`.tab-switch[data-view="${view}"]`);
 
-			console.dir({
-				target_tab_url,
-				target_tab,
-			});
-
-			if (target_tab) {
-				target_tab.click();
-			}
+		if (target_tab) {
+			target_tab.click();
 		}
-	}
-
-	window.addEventListener("locationchange", on_location_change);
+	});
 
 	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;
+				const view = tab_selector.dataset.view;
+				if (view) {
+					window.location.hash = `/topic/${document.body.dataset.topic}/${view}`;
 				}
 			});
 		}
-
-		on_location_change();
 	});
 </script>
 <style>
diff --git a/public/tabs/work/work.html b/public/tabs/work/work.html
index 1eed2c9..7f44be9 100644
--- a/public/tabs/work/work.html
+++ b/public/tabs/work/work.html
@@ -4,7 +4,7 @@
 		name="top-level-tabs"
 		id="work-tab-input"
 		class="tab-switch"
-		data-hash="/work"
+		data-view="work"
 	/>
 	<label for="work-tab-input" class="tab-label"
 		><div class="icon work"></div>
