diff --git a/src/lib/components/chat/Controls/Controls.svelte b/src/lib/components/chat/Controls/Controls.svelte
index e2b166fb3..4ae63f77e 100644
--- a/src/lib/components/chat/Controls/Controls.svelte
+++ b/src/lib/components/chat/Controls/Controls.svelte
@@ -13,6 +13,8 @@
 	export let models = [];
 	export let chatFiles = [];
 	export let params = {};
+
+	let showValves = false;
 </script>
 
 <div class=" dark:text-white">
@@ -59,9 +61,9 @@
 			<hr class="my-2 border-gray-50 dark:border-gray-700/10" />
 		{/if}
 
-		<Collapsible title={$i18n.t('Valves')} buttonClassName="w-full">
+		<Collapsible bind:open={showValves} title={$i18n.t('Valves')} buttonClassName="w-full">
 			<div class="text-sm" slot="content">
-				<Valves />
+				<Valves show={showValves} />
 			</div>
 		</Collapsible>
 
diff --git a/src/lib/components/chat/Controls/Valves.svelte b/src/lib/components/chat/Controls/Valves.svelte
index ab2e0895c..45e504081 100644
--- a/src/lib/components/chat/Controls/Valves.svelte
+++ b/src/lib/components/chat/Controls/Valves.svelte
@@ -25,6 +25,8 @@
 
 	const i18n = getContext('i18n');
 
+	export let show = false;
+
 	let tab = 'tools';
 	let selectedId = '';
 
@@ -115,21 +117,25 @@
 		getUserValves();
 	}
 
-	onMount(async () => {
+	$: if (show) {
+		init();
+	}
+
+	const init = async () => {
 		loading = true;
 
-		if ($functions.length === 0) {
+		if ($functions === null) {
 			functions.set(await getFunctions(localStorage.token));
 		}
-		if ($tools.length === 0) {
+		if ($tools === null) {
 			tools.set(await getTools(localStorage.token));
 		}
 
 		loading = false;
-	});
+	};
 </script>
 
-{#if !loading}
+{#if show && !loading}
 	<form
 		class="flex flex-col h-full justify-between space-y-3 text-sm"
 		on:submit|preventDefault={() => {
@@ -203,5 +209,5 @@
 		</div>
 	</form>
 {:else}
-	<Spinner className="size-6" />
+	<Spinner className="size-4" />
 {/if}