diff --git a/src/routes/idaa/(idaa)/video_conferences/+page.svelte b/src/routes/idaa/(idaa)/video_conferences/+page.svelte
index a3b418a3..90105a7a 100644
--- a/src/routes/idaa/(idaa)/video_conferences/+page.svelte
+++ b/src/routes/idaa/(idaa)/video_conferences/+page.svelte
@@ -22,6 +22,18 @@
 	let jitsi_api: any = null;
 	const jitsi_container_id = 'jitsi_meet_external_api_container';
 
+	let name_input: string = $state('');
+
+	async function handle_name_update() {
+		if (name_input && name_input.trim() !== '' && name_input !== display_name) {
+			console.log(`Jitsi: User updating name from "${display_name}" to "${name_input}"`);
+			display_name = name_input.trim();
+			await init_jitsi();
+		} else {
+			console.log('Jitsi: Name update skipped. New name is same as old or empty.');
+		}
+	}
+
 	async function get_jitsi_jwt(
 		display_name: string,
 		email: string,
@@ -134,6 +146,9 @@
 			console.warn('Jitsi: Novi API not configured. Skipping user details/moderator check.');
 		}
 
+		// Set initial value for the name input
+		name_input = display_name;
+
 		// --- All data fetched, now initialize Jitsi ---
 		await init_jitsi();
 	});
@@ -350,70 +365,113 @@
 	<div id="{jitsi_container_id}" class="jitsi-container"></div>
 {/if}
 
+
+<div class="jitsi-tools text-sm max-w-xl outline">
 {#if show_jitsi_tools}
-	<div class="jitsi-tools text-sm max-w-xl">
-		<h1 class="text-base">Jitsi Tools and Settings</h1>
-		<ul>
-		{#if display_name && email}
-			<li class="z-50 bg-amber-50">{display_name} ({email})</li>
-		{/if}
-		<li>Room: {room_name}</li>
-		<li>Domain: {domain}</li>
-		<li>User ID: {user_id}</li>
-		<li>Moderator: {is_moderator ? 'Yes' : 'No'}</li>
-		</ul>
-
-		<!-- margin-top: 1.5em; border-top: 2px dashed #ccc; padding: 1em; background-color: pink; -->
-		<div
-			class="
-				mt-2 pt-2 border-t-2 border-dashed border-gray-400
-				flex flex-col lg:flex-row gap-05
-				"
-			>
-		<strong>Jitsi Sound Settings:</strong>
-		<label>
-			<input type="checkbox" id="incoming_msg_sound_checkbox" checked disabled />
-			Disable Incoming Message Sound
-		</label>
-
-		<label>
-			<input type="checkbox" id="participant_joined_sound_checkbox" disabled />
-			Disable Participant Joined Sound
-		</label>
-
-		<label>
-			<input type="checkbox" id="participant_left_sound_checkbox" disabled />
-			Disable Participant Left Sound
-		</label>
-
-		<label>
-			<input type="checkbox" id="reaction_sound_checkbox" checked disabled />
-			Disable Reaction Sound
-		</label>
-		<label>
-			<input type="checkbox" id="raise_hand_sound_checkbox" checked disabled />
-			Disable Raise Hand Sound
-		</label>
-		</div>
-
+	<!-- NOTE: This is a <div> instead of <header> to work with IDAA's Novi styles. -->
+	<div class="flex flex-row gap-1 items-center justify-between w-full">
+		<!-- NOTE: This is a <div> instead of <h1> to work with IDAA's Novi styles. -->
+		<div class="text-lg w-fit">IDAA Jitsi</div>
 		<button
-			class="mt-2 px-2 py-1 bg-orange-500 text-white rounded hover:bg-orange-600"
-			onclick={() => init_jitsi()}
+			class="px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
+			onclick={() => (show_jitsi_tools = false)}
 		>
-			Re-initialize Jitsi
-		</button>
-
-		<button
-			class="mt-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
-			onclick={() => {
-				// Placeholder for function calls to update Novi data
-				console.log('Re-sync Novi Data button clicked. Implement as needed.');
-			}}
-		>
-			Re-sync Novi Data
+			<span class="fas fa-times" aria-hidden="true"></span>
+			<span class="sr-only">Close Jitsi Tools</span>
 		</button>
 	</div>
+	<ul>
+	{#if display_name && email}
+		<li class="bg-amber-50">{display_name} ({email})</li>
+	{/if}
+	<li>Room: <span class="text-sm font-mono">{room_name}</span></li>
+	<li>Domain: <span class="text-sm font-mono">{domain}</span></li>
+	<li>User ID: <span class="text-sm font-mono">{user_id}</span></li>
+	<li>Moderator: {is_moderator ? 'Yes' : 'No'}</li>
+	</ul>
+
+	<div class="mt-2 pt-2 border-t-2 border-dashed border-gray-400">
+		<label for="display_name_input" class="block font-bold">Change Name:</label>
+		<span class="w-full flex flex-row items-center justify-between gap-1">
+		<input
+			type="text"
+			id="display_name_input"
+			bind:value={name_input}
+			class="border rounded px-2 py-1 w-full"
+			placeholder="Enter new display name"
+		/>
+		<button
+			onclick={handle_name_update}
+			class="px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600"
+		>
+			<span class="fas fa-user-edit" aria-hidden="true"></span>
+			Update
+			<span class="sr-only"> Display Name</span>
+		</button>
+		</span>
+	</div>
+
+	<!-- margin-top: 1.5em; border-top: 2px dashed #ccc; padding: 1em; background-color: pink; -->
+	<div
+		class="
+			mt-2 pt-2 border-t-2 border-dashed border-gray-400
+			flex flex-col lg:flex-row gap-05
+			"
+		>
+	<strong>Jitsi Sound Settings:</strong>
+	<label>
+		<input type="checkbox" id="incoming_msg_sound_checkbox" checked disabled />
+		Disable Incoming Message Sound
+	</label>
+
+	<label>
+		<input type="checkbox" id="participant_joined_sound_checkbox" disabled />
+		Disable Participant Joined Sound
+	</label>
+
+	<label>
+		<input type="checkbox" id="participant_left_sound_checkbox" disabled />
+		Disable Participant Left Sound
+	</label>
+
+	<label>
+		<input type="checkbox" id="reaction_sound_checkbox" checked disabled />
+		Disable Reaction Sound
+	</label>
+	<label>
+		<input type="checkbox" id="raise_hand_sound_checkbox" checked disabled />
+		Disable Raise Hand Sound
+	</label>
+	</div>
+
+	<button
+		class="mt-2 px-2 py-1 bg-orange-500 text-white rounded hover:bg-orange-600"
+		onclick={() => init_jitsi()}
+	>
+		Re-initialize Jitsi
+	</button>
+
+	<button
+		class="mt-2 px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+		onclick={() => {
+			// Placeholder for function calls to update Novi data
+			console.log('Re-sync Novi Data button clicked. Implement as needed.');
+		}}
+	>
+		Re-sync Novi Data
+	</button>
+
+{:else}
+	<button
+		class="px-2 py-1 bg-red-200 text-white rounded hover:bg-red-400"
+		onclick={() => (show_jitsi_tools = true)}
+		aria-label="Open Jitsi Tools"
+	>
+		<span class="fas fa-tools" aria-hidden="true"></span>
+		<span class="sr-only">Open Jitsi Tools</span>
+	</button>
 {/if}
+</div>
 
 <style>
 	.jitsi-container {
@@ -428,7 +486,7 @@
 	.jitsi-tools {
 		z-index: 1000;
 		position: fixed;
-		bottom: 20px;
+		bottom: 6em;
 		right: 20px;
 		background-color: rgba(255, 255, 255, 0.8);
 		padding: 10px;