diff --git a/app/components/ChatInput.vue b/app/components/ChatInput.vue
index 3697d99..a17736e 100644
--- a/app/components/ChatInput.vue
+++ b/app/components/ChatInput.vue
@@ -111,8 +111,10 @@ const handleWindowKeyDown = async (event: KeyboardEvent) => {
         return;
     }
 
-    // redirect all standard keyboard input to the input field
-    inputRef.value?.focus();
+    if (document.activeElement === document.body) {
+        // redirect all standard keyboard input to the input field
+        inputRef.value?.focus();
+    }
 };
 
 watch(inputValue, async () => {
diff --git a/app/components/Sidenav/NavHome.vue b/app/components/Sidenav/NavHome.vue
index 4f751fb..cad5736 100644
--- a/app/components/Sidenav/NavHome.vue
+++ b/app/components/Sidenav/NavHome.vue
@@ -131,9 +131,10 @@ onMounted(() => {
                                 :aria-label="agent.name"
                                 class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
                                 <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
-                                    @keydown.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
+                                    @keydown.stop.enter="saveRename" @keydown.escape="cancelRename" @blur="saveRename"
                                     class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
-                                <span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
+                                <span v-else
+                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                     {{ agent.name }}
                                 </span>
 
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 61cc718..724b106 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -17,14 +17,6 @@ useKeyboardShortcuts();
     <Sidenav />
     <main
         class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
-        <div class="h-14 flex items-center justify-between px-4">
-            <div class="flex items-center gap-2">
-                <button v-if="!sidebarOpen" @click="openSidebar"
-                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
-                    <Icon class="text-5" name="mynaui:panel-left-open" />
-                </button>
-            </div>
-        </div>
         <div class="flex-1 overflow-y-auto">
             <slot />
         </div>
diff --git a/app/pages/agent/[id]/index.vue b/app/pages/agent/[id]/index.vue
index 76e7e58..e9e5381 100644
--- a/app/pages/agent/[id]/index.vue
+++ b/app/pages/agent/[id]/index.vue
@@ -7,6 +7,7 @@ const route = useRoute();
 const inputValue = ref('');
 const pendingMessage = ref<Message | null>(null);
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { createTopic, sendMessage, autoRename } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
 const { providers } = useModels();
@@ -15,6 +16,8 @@ const agent = getAgent(route.params.id as string);
 
 if (!agent.value) navigateTo('/');
 
+useHead({ title: `${agent.value!.name} | Veridian` });
+
 const handleSubmit = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
@@ -83,22 +86,37 @@ const handleSubmit = async (message: string, model: ModelWithProvider | null) =>
 
 
 <template>
-    <div
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
-        <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
-            <div class="w-full px-px flex flex-col flex-grow gap-2"
-                :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
-                <div v-if="pendingMessage === null">
-                    <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
-                    <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
-                </div>
-                <div v-else class="opacity-70">
-                    <Message :message="pendingMessage" />
-                </div>
+    <div class="flex flex-col h-full w-full">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+                <h4 class="text-lg">
+                    {{ agent?.name }}
+                </h4>
             </div>
-            <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
-                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
-                    :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
+        </div>
+
+        <div ref="chatPaneWrapper"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
+            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <div class="w-full px-px flex flex-col flex-grow gap-2"
+                    :class="pendingMessage === null ? 'justify-end pb-28' : 'pb-9'">
+                    <div v-if="pendingMessage === null">
+                        <h1 v-if="agent" class="font-bold">{{ agent.name }}</h1>
+                        <p class="text-[var(--text-secondary)]">Select a topic to continue or create a new one</p>
+                    </div>
+                    <div v-else class="opacity-70">
+                        <Message :message="pendingMessage" />
+                    </div>
+                </div>
+
+                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                        :agent="agent" :providers="providers?.filter(p => p.enabled)" @submit="handleSubmit" />
+                </div>
             </div>
         </div>
     </div>
diff --git a/app/pages/agent/[id]/profile.vue b/app/pages/agent/[id]/profile.vue
index f71654d..c62382b 100644
--- a/app/pages/agent/[id]/profile.vue
+++ b/app/pages/agent/[id]/profile.vue
@@ -4,6 +4,8 @@ const triplit = useTriplitClient();
 
 const route = useRoute();
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
+
 const agent = getAgent(route.params.id as string);
 
 if (agent.value === undefined) navigateTo('/');
@@ -32,6 +34,15 @@ const changeSystemPrompt = async (e: Event) => {
 </script>
 
 <template>
+    <div class="h-14 flex items-center justify-between px-4">
+        <div class="flex items-center gap-2">
+            <button v-if="!sidebarOpen" @click="openSidebar"
+                class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                <Icon class="text-5" name="mynaui:panel-left-open" />
+            </button>
+        </div>
+    </div>
+
     <div class="flex flex-col gap-4 px-14 w-full h-full">
         <div class="flex items-center gap-4">
             <div>
diff --git a/app/pages/agent/[id]/topic/[topicId].vue b/app/pages/agent/[id]/topic/[topicId].vue
index 60e86bf..6bda28a 100644
--- a/app/pages/agent/[id]/topic/[topicId].vue
+++ b/app/pages/agent/[id]/topic/[topicId].vue
@@ -11,6 +11,7 @@ const inputValue = ref('');
 const route = useRoute();
 const { sendMessage, regenerateMessage } = useChat(route.params.id as string);
 const { getAgent } = useAgents();
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { providers, allModels } = useModels();
 
 const agent = getAgent(route.params.id as string);
@@ -104,6 +105,12 @@ const topic = computed(() => {
     };
 });
 
+watch(() => topic.value?.name, (newTopicName) => {
+    if (newTopicName !== undefined) {
+        useHead({ title: `${newTopicName} | Veridian` });
+    }
+}, { immediate: true });
+
 const submitMessage = async (message: string, model: ModelWithProvider | null) => {
     if (!model) {
         console.error('No model selected');
@@ -271,24 +278,38 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <!-- chat pane -->
-    <div ref="chatPaneWrapper"
-        class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center">
-        <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
-            <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
-                <Suspense>
-                    <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
-                        <Message v-for="message in topic.messages" :key="message.id" :message="message"
-                            v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
-                            @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
-                    </template>
-                </Suspense>
+    <div class="flex flex-col h-full w-full">
+        <div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+                <h4 class="text-lg">
+                    {{ topic?.name }}
+                </h4>
             </div>
+        </div>
 
-            <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
-                <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
-                    :loading="activeGeneration !== null" :agent="agent" :providers="providers?.filter(p => p.enabled)"
-                    @submit="submitMessage" @cancel="handleCancel" />
+        <!-- chat pane -->
+        <div ref="chatPaneWrapper"
+            class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
+            <div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
+                <div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
+                    <Suspense>
+                        <template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
+                            <Message v-for="message in topic.messages" :key="message.id" :message="message"
+                                v-memo="[message.id, message.parts?.length, message.children, message.focusedIndex, message.content]"
+                                @delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
+                        </template>
+                    </Suspense>
+                </div>
+
+                <div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
+                    <ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
+                        :loading="activeGeneration !== null" :agent="agent"
+                        :providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @cancel="handleCancel" />
+                </div>
             </div>
         </div>
     </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index e4e17f8..3b4ba5c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -4,6 +4,7 @@ import type { Agent } from '~/composables/useAgents';
 
 const triplit = useTriplitClient();
 
+const { open: sidebarOpen, openSidebar } = useSidebar();
 const { agents, createAgent } = useAgents();
 const { providers, getFirstAvailableModel, allModels } = useModels();
 
@@ -165,14 +166,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
-        <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span
-                class="animate-blink inline-block w-4 h-[0.9em] bg-current align-middle ml-0.5 select-none">&nbsp;</span>
-        </h1>
-        <div class="max-w-4xl h-full w-full">
-            <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
-            <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
-                :providers="providers" @submit="handleChatSubmit" />
+    <div class="h-full w-full flex flex-col">
+        <div class="h-14 flex items-center justify-between px-4">
+            <div class="flex items-center gap-2">
+                <button v-if="!sidebarOpen" @click="openSidebar"
+                    class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent hover:bg-[var(--color-hover)] transition-colors">
+                    <Icon class="text-5" name="mynaui:panel-left-open" />
+                </button>
+            </div>
+        </div>
+
+        <div class="flex flex-col items-center pt-12 px-4 h-full gap-12">
+            <h1 class="text-center text-3xl font-semibold">{{ animatedText }}<span
+                    class="animate-blink inline-block w-4 h-[0.9em] bg-current align-middle ml-0.5 select-none">&nbsp;</span>
+            </h1>
+            <div class="max-w-4xl h-full w-full">
+                <!-- TODO: view transitions have caused me issues with the page flashing with no content (so just a black or white screen depending on the theme) so I have disabled them for now.  -->
+                <ChatInput class="[view-transition-name:chat-prompt] duration-150 ease-in-out" :agent="agent"
+                    :providers="providers" @submit="handleChatSubmit" />
+            </div>
         </div>
     </div>
 </template>