diff --git a/static/js/04-main.js b/static/js/04-main.js
index 0bb2dba..c9b1148 100644
--- a/static/js/04-main.js
+++ b/static/js/04-main.js
@@ -2,6 +2,42 @@
 "use strict";
 window.Glow = window.Glow || {};
 
+Glow.openCallPanel = async () => {
+  Glow.calls.ensureState();
+  Glow.state.calls.panelOpen = true;
+
+  const overlay = document.getElementById("callOverlay");
+  const participants = document.getElementById("callParticipants");
+
+  overlay?.classList.remove("hidden");
+  participants?.classList.remove("hidden");
+
+  if (Glow.state.calls.activeCall?.groupSession?.id) {
+    await Glow.calls.refreshBackendParticipants();
+  }
+
+  Glow.renderCallUi();
+};
+
+Glow.calls.renderHeaderCallChip = () => {
+  if (!Glow.els.callStatusChip) return;
+
+  Glow.calls.ensureState();
+  const state = Glow.calls.state();
+
+  Glow.els.callStatusChip.classList.remove("hidden");
+
+  if (state.reconnecting) {
+    Glow.els.callStatusChip.textContent = "Call reconnecting";
+  } else if (state.joining) {
+    Glow.els.callStatusChip.textContent = "Call joining";
+  } else if (state.activeCall) {
+    Glow.els.callStatusChip.textContent = "Call active";
+  } else {
+    Glow.els.callStatusChip.textContent = "Call";
+  }
+};
+
 Glow.loadRooms = async () => {
   const previousSlug = Glow.state.activeRoom?.slug;
   const data = await Glow.apiRequest("/api/rooms");
@@ -150,6 +186,7 @@ Glow.updateViewUI = () => {
       (dm.members || []).find(
         member => Number(member.id) !== Number(Glow.state.currentUser?.id)
       ) || dm.members?.[0];
+
     Glow.els.headerTitle.textContent =
       peer?.display_name || peer?.username || "Direct message";
     Glow.els.headerSubtitle.textContent =
@@ -269,6 +306,7 @@ Glow.checkAuth = async () => {
 
 Glow.authenticate = async endpoint => {
   Glow.clearAuthNotice();
+
   const accessKey = Glow.els.accessKeyInput.value;
   const username = Glow.els.usernameInput.value.trim().toLowerCase();
   const password = Glow.els.passwordInput.value;
@@ -416,11 +454,13 @@ Glow.toggleTypingIndicators = () => {
     "glow_typing_enabled",
     String(Glow.state.typingIndicatorsEnabled)
   );
+
   if (!Glow.state.typingIndicatorsEnabled) {
     Glow.state.typingUsers = [];
     Glow.state.dmTypingUsers = [];
     Glow.renderTyping();
   }
+
   Glow.updateAdminPreferenceButtons?.();
   Glow.showToast(
     Glow.state.typingIndicatorsEnabled
@@ -486,6 +526,7 @@ Glow.refreshPresence = async () => {
 
 Glow.schedulePoll = () => {
   clearTimeout(Glow.state.pollTimer);
+
   if (Glow.els.blockedOverlay.classList.contains("hidden") === false) return;
 
   Glow.state.pollTimer = setTimeout(async () => {
@@ -516,6 +557,7 @@ Glow.els.messageInput.addEventListener("input", () => {
   Glow.autoResizeComposer();
   Glow.updateMessageCount();
   clearTimeout(Glow.state.typingTimer);
+
   if (Glow.els.messageInput.value.trim()) {
     Glow.sendTyping(true);
     Glow.state.typingTimer = setTimeout(() => {
@@ -547,10 +589,12 @@ Glow.els.threadInput?.addEventListener("keydown", event => {
 
 Glow.els.attachmentInput.addEventListener("change", () => {
   const files = Glow.normalizeSelectedFiles(Glow.els.attachmentInput.files);
+
   if (!files.length) {
     Glow.setSelectedAttachment([]);
     return;
   }
+
   const invalid = files.find(file => file.size > Glow.MAX_ATTACHMENT_BYTES);
   if (invalid) {
     Glow.showToast("Attachments must be 5 MB or smaller.", "error");
@@ -558,15 +602,18 @@ Glow.els.attachmentInput.addEventListener("change", () => {
     Glow.setSelectedAttachment([]);
     return;
   }
+
   Glow.setSelectedAttachment(files);
 });
 
 Glow.els.threadAttachmentInput?.addEventListener("change", () => {
   const files = Glow.normalizeSelectedFiles(Glow.els.threadAttachmentInput.files);
+
   if (!files.length) {
     Glow.setSelectedThreadAttachment?.([]);
     return;
   }
+
   const invalid = files.find(file => file.size > Glow.MAX_ATTACHMENT_BYTES);
   if (invalid) {
     Glow.showToast("Attachments must be 5 MB or smaller.", "error");
@@ -574,6 +621,7 @@ Glow.els.threadAttachmentInput?.addEventListener("change", () => {
     Glow.setSelectedThreadAttachment?.([]);
     return;
   }
+
   Glow.setSelectedThreadAttachment?.(files);
 });
 
@@ -660,8 +708,8 @@ Glow.els.settingsButton?.addEventListener("click", () => {
   Glow.toggleHeaderMenu?.();
 });
 
-Glow.els.callStatusChip?.addEventListener("click", () => {
-  Glow.openCallPanel?.();
+document.getElementById("callStatusChip")?.addEventListener("click", async () => {
+  await Glow.openCallPanel?.();
 });
 
 Glow.els.jumpToLatestButton.addEventListener("click", () => {
@@ -713,8 +761,10 @@ Glow.els.mediaOverlay?.addEventListener("click", event => {
   }
 });
 
-Glow.els.closeCallPanelButton?.addEventListener("click", () => {
-  Glow.els.callOverlay?.classList.add("hidden");
+document.getElementById("closeCallPanelButton")?.addEventListener("click", () => {
+  Glow.calls.ensureState();
+  Glow.state.calls.panelOpen = false;
+  document.getElementById("callOverlay")?.classList.add("hidden");
 });
 
 document.addEventListener("keydown", event => {
@@ -741,6 +791,8 @@ document.addEventListener("keydown", event => {
   }
 
   if (!Glow.els.callOverlay?.classList.contains("hidden")) {
+    Glow.calls.ensureState();
+    Glow.state.calls.panelOpen = false;
     Glow.els.callOverlay.classList.add("hidden");
     return;
   }