diff --git a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
index 4523c8482..d4416014a 100644
--- a/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
@@ -11,7 +11,6 @@
 <Collapsible bind:open={state} className="w-full space-y-1">
 	<div
 		class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
-		slot="head"
 	>
 		<slot />
 
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 8a3ef9690..c7497d835 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -1,38 +1,18 @@
 <script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	export let open = false;
 	export let className = '';
-
-	// Manage the max-height of the collapsible content for snappy transitions
-	let contentElement: HTMLElement;
-	let maxHeight = '0px'; // Initial max-height
-
-	$: if (contentElement?.scrollHeight) {
-		if (open) {
-			// Ensure the element is visible before measuring
-			maxHeight = `${contentElement.scrollHeight}px`;
-		} else {
-			maxHeight = '0px';
-		}
-	}
 </script>
 
 <div class={className}>
 	<button on:click={() => (open = !open)}>
-		<slot name="head" />
+		<slot />
 	</button>
-	<div
-		bind:this={contentElement}
-		class={`collapsible-content ${open ? 'mt-1' : '!mt-0'}`}
-		style="max-height: {maxHeight};"
-	>
-		<slot name="content" />
-	</div>
-</div>
 
-<style>
-	.collapsible-content {
-		overflow: hidden;
-		transition: all 0.3s ease-out;
-		max-height: 0;
-	}
-</style>
+	{#if open}
+		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+			<slot name="content" />
+		</div>
+	{/if}
+</div>