diff --git a/src/ui/UserPortal/components/NavBar.vue b/src/ui/UserPortal/components/NavBar.vue
index 71bd9f40f..4b71a28fc 100644
--- a/src/ui/UserPortal/components/NavBar.vue
+++ b/src/ui/UserPortal/components/NavBar.vue
@@ -155,73 +155,16 @@ export default {
 			},
 			deep: true,
 		},
-	},
-
-	async created() {
-		await this.$appStore.getAgents();
-
-		this.agentOptions = this.$appStore.agents.map((agent) => ({
-			label: agent.resource.name,
-			type: agent.resource.type,
-			object_id: agent.resource.object_id,
-			description: agent.resource.description,
-			my_agent: agent.roles.includes('Owner'),
-			value: agent,
-		}));
-
-		if (this.agentOptions.length === 0) {
-			this.emptyAgentsMessage = this.$appConfigStore.noAgentsMessage ?? null;
-		}
-
-		const publicAgentOptions = this.agentOptions.filter((agent) => !agent.my_agent);
-		const privateAgentOptions = this.agentOptions.filter((agent) => agent.my_agent);
-		const noAgentOptions = [
-			{
-				label: 'None',
-				value: null,
-				disabled: true,
-				type: '',
-				object_id: '',
-				description: '',
+		'$appStore.agents': {
+			handler() {
+				this.setAgentOptions();
 			},
-		];
-		this.virtualUser = await this.$appStore.getVirtualUser();
-
-		this.agentOptionsGroup.push({
-			label: '',
-			items: [
-				{
-					label: '--select--',
-					value: null,
-					type: '',
-					object_id: '',
-					description: '',
-				},
-			],
-		});
-
-		if (this.agentOptions.length === 0) {
-			// Append noAgentOptions to the last entry in the agentOptionsGroup
-			this.agentOptionsGroup[this.agentOptionsGroup.length - 1].items.push(...noAgentOptions);
-			return;
-		}
-
-		if (privateAgentOptions.length > 0) {
-			this.agentOptionsGroup.push({
-				label: 'My Agents',
-				items: privateAgentOptions,
-			});
-			this.agentOptionsGroup.push({
-				label: 'Other Agents',
-				items: publicAgentOptions.length > 0 ? publicAgentOptions : noAgentOptions,
-			});
-		} else {
-			this.agentOptionsGroup[this.agentOptionsGroup.length - 1].items.push(
-				...(publicAgentOptions.length > 0 ? publicAgentOptions : noAgentOptions),
-			);
-		}
+			deep: true,
+		},
 	},
 
+	async created() {},
+
 	mounted() {
 		this.updateAgentSelection();
 	},
@@ -250,6 +193,69 @@ export default {
 			await this.$authStore.logout();
 		},
 
+		async setAgentOptions() {
+			this.agentOptions = this.$appStore.agents.map((agent) => ({
+				label: agent.resource.name,
+				type: agent.resource.type,
+				object_id: agent.resource.object_id,
+				description: agent.resource.description,
+				my_agent: agent.roles.includes('Owner'),
+				value: agent,
+			}));
+
+			if (this.agentOptions.length === 0) {
+				this.emptyAgentsMessage = this.$appConfigStore.noAgentsMessage ?? null;
+			}
+
+			const publicAgentOptions = this.agentOptions.filter((agent) => !agent.my_agent);
+			const privateAgentOptions = this.agentOptions.filter((agent) => agent.my_agent);
+			const noAgentOptions = [
+				{
+					label: 'None',
+					value: null,
+					disabled: true,
+					type: '',
+					object_id: '',
+					description: '',
+				},
+			];
+			this.virtualUser = await this.$appStore.getVirtualUser();
+
+			this.agentOptionsGroup.push({
+				label: '',
+				items: [
+					{
+						label: '--select--',
+						value: null,
+						type: '',
+						object_id: '',
+						description: '',
+					},
+				],
+			});
+
+			if (this.agentOptions.length === 0) {
+				// Append noAgentOptions to the last entry in the agentOptionsGroup
+				this.agentOptionsGroup[this.agentOptionsGroup.length - 1].items.push(...noAgentOptions);
+				return;
+			}
+
+			if (privateAgentOptions.length > 0) {
+				this.agentOptionsGroup.push({
+					label: 'My Agents',
+					items: privateAgentOptions,
+				});
+				this.agentOptionsGroup.push({
+					label: 'Other Agents',
+					items: publicAgentOptions.length > 0 ? publicAgentOptions : noAgentOptions,
+				});
+			} else {
+				this.agentOptionsGroup[this.agentOptionsGroup.length - 1].items.push(
+					...(publicAgentOptions.length > 0 ? publicAgentOptions : noAgentOptions),
+				);
+			}
+		},
+
 		// handleCopySession() {
 		// 	const chatLink = `${window.location.origin}?chat=${this.currentSession!.id}`;
 		// 	navigator.clipboard.writeText(chatLink);
diff --git a/src/ui/UserPortal/stores/appStore.ts b/src/ui/UserPortal/stores/appStore.ts
index fc02e780c..525bab7d0 100644
--- a/src/ui/UserPortal/stores/appStore.ts
+++ b/src/ui/UserPortal/stores/appStore.ts
@@ -48,6 +48,7 @@ export const useAppStore = defineStore('app', {
 	actions: {
 		async init(sessionId: string) {
 			const appConfigStore = useAppConfigStore();
+			await this.getAgents();
 
 			// Watch for changes in autoHideToasts and update sessionStorage
 			watch(