diff --git a/public/index.html b/public/index.html
index 8a5dac6..6677d9a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,7 +48,6 @@
 
 		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: {
@@ -95,7 +94,10 @@
 			if ( first_topic_id ) {
 				window.location.hash = `/topic/${ first_topic_id }/chat`;
 			}
+			return;
 		}
+
+		document.body.dataset.topic = topic_id;
 	});
 
 	let TOPICS = [];
@@ -117,9 +119,6 @@
 		try {
 			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 );
diff --git a/public/sidebar/sidebar.html b/public/sidebar/sidebar.html
index 113fefc..fef3c33 100644
--- a/public/sidebar/sidebar.html
+++ b/public/sidebar/sidebar.html
@@ -5,10 +5,33 @@
 		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>`,
+				`<li id="topic-selector-${topic.id}" class="topic" data-topic-selector-for="${topic.id}"><a href="#/topic/${topic.id}/chat">${topic.name}</a></li>`,
 			);
 		}
 	});
+
+	function update_topic_indicators() {
+		const topic_indicators = document.querySelectorAll("[data-topic-selector-for]");
+		for (const topic_indicator of topic_indicators) {
+			topic_indicator.classList.remove("active");
+		}
+
+		const topic_id = document.body.dataset.topic;
+		if (!topic_id) {
+			return;
+		}
+
+		const active_topic_indicators = document.querySelectorAll(
+			`[data-topic-selector-for="${topic_id}"]`,
+		);
+		for (const active_indicator of active_topic_indicators) {
+			active_indicator.classList.add("active");
+		}
+	}
+
+	document.addEventListener("topics_updated", update_topic_indicators);
+	document.addEventListener("topic_changed", update_topic_indicators);
+	document.addEventListener("user_logged_in", update_topic_indicators);
 </script>
 
 <style type="text/css">
diff --git a/public/tabs/chat/chat.js b/public/tabs/chat/chat.js
index 6d8c8c5..17c9966 100644
--- a/public/tabs/chat/chat.js
+++ b/public/tabs/chat/chat.js
@@ -375,9 +375,13 @@ async function poll_for_new_events() {
 		});
 }
 
-async function load_topic(topic_id) {
+async function load_active_topic() {
+	const topic_id = document.body.dataset.topic;
 	if (!topic_id) return;
 
+	const user = document.body.dataset.user ? JSON.parse(document.body.dataset.user) : null;
+	if (!user) return;
+
 	const topic_chat_content = document.getElementById("topic-chat-content");
 
 	if (topic_polling_request_abort_controller) {
@@ -395,7 +399,6 @@ async function load_topic(topic_id) {
 
 	const topic = await topic_response.json();
 
-	topic_chat_content.dataset.topic_id = topic.id;
 	topic_chat_content.innerHTML = "";
 
 	const topic_selectors = document.querySelectorAll("li.topic");
@@ -420,6 +423,5 @@ async function load_topic(topic_id) {
 	await append_topic_events(events);
 	poll_for_new_events();
 }
-document.addEventListener("topic_changed", ({ detail: { topic_id } }) => {
-	load_topic(topic_id);
-});
+document.addEventListener("topic_changed", load_active_topic);
+document.addEventListener("user_logged_in", load_active_topic);