diff --git a/src/lib/components/workspace/Models/ActionsSelector.svelte b/src/lib/components/workspace/Models/ActionsSelector.svelte
index af3db36947..40b9d2de0f 100644
--- a/src/lib/components/workspace/Models/ActionsSelector.svelte
+++ b/src/lib/components/workspace/Models/ActionsSelector.svelte
@@ -18,36 +18,49 @@
 	export let actions: Action[] = [];
 	export let selectedActionIds: string[] = [];
 
+	$: selectableActions = actions.filter((action) => !action.is_global);
 	$: selectedActions = actions.filter(
 		(action) => action.is_global || selectedActionIds.includes(action.id)
 	);
-	$: availableActions = actions.filter(
-		(action) => !action.is_global && !selectedActionIds.includes(action.id)
-	);
 
-	const selectAction = (action: Action) => {
-		selectedActionIds = [...selectedActionIds, action.id];
+	const toggleAction = (action: Action) => {
+		selectedActionIds = selectedActionIds.includes(action.id)
+			? selectedActionIds.filter((id) => id !== action.id)
+			: [...selectedActionIds, action.id];
 	};
 </script>
 
 {#if actions.length > 0}
 	<div>
-		<div class="flex w-full justify-between mb-1">
+		<div class="flex w-full items-center gap-2 mb-1">
 			<div class=" self-center text-xs text-gray-500">{$i18n.t('Actions')}</div>
+
+			{#if selectableActions.length > 0}
+				<TypeaheadSelector
+					id="model-actions-selector"
+					items={selectableActions.map((action) => ({
+						...action,
+						description: action.meta?.description
+					}))}
+					selectedIds={selectedActionIds}
+					placeholder={$i18n.t('Search actions')}
+					triggerLabel={$i18n.t('Select Action')}
+					emptyLabel={$i18n.t('No actions found')}
+					variant="dropdown"
+					on:select={(e) => {
+						toggleAction(e.detail);
+					}}
+					on:enableall={(e) => {
+						selectedActionIds = [
+							...new Set([...selectedActionIds, ...e.detail.map((action) => action.id)])
+						];
+					}}
+				/>
+			{/if}
 		</div>
 
 		<div class="flex flex-col">
-			<TypeaheadSelector
-				id="model-actions-selector"
-				items={availableActions}
-				className="w-48 max-w-full"
-				placeholder={$i18n.t('Search actions')}
-				on:select={(e) => {
-					selectAction(e.detail);
-				}}
-			/>
-
-			<div class=" flex items-center flex-wrap">
+			<div class=" flex items-center flex-wrap mt-1">
 				{#each selectedActions as action, actionIdx}
 					<div class=" flex items-center gap-2 mr-3">
 						<div class="self-center flex items-center">
@@ -71,5 +84,9 @@
 				{/each}
 			</div>
 		</div>
+
+		<div class=" text-xs dark:text-gray-700">
+			{$i18n.t('To select actions here, add them to the "Functions" workspace first.')}
+		</div>
 	</div>
 {/if}
diff --git a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
index 7e82156447..33dea06f48 100644
--- a/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/DefaultFiltersSelector.svelte
@@ -18,34 +18,45 @@
 	export let selectedFilterIds: string[] = [];
 
 	$: selectedFilters = filters.filter((filter) => selectedFilterIds.includes(filter.id));
-	$: availableFilters = filters.filter((filter) => !selectedFilterIds.includes(filter.id));
 
-	const selectFilter = (filter: Filter) => {
-		selectedFilterIds = [...selectedFilterIds, filter.id];
+	const toggleFilter = (filter: Filter) => {
+		selectedFilterIds = selectedFilterIds.includes(filter.id)
+			? selectedFilterIds.filter((id) => id !== filter.id)
+			: [...selectedFilterIds, filter.id];
 	};
 </script>
 
 <div>
-	<div class="flex w-full justify-between mb-1">
+	<div class="flex w-full items-center gap-2 mb-1">
 		<div class=" self-center text-xs text-gray-500">{$i18n.t('Default Filters')}</div>
+
+		{#if filters.length > 0}
+			<TypeaheadSelector
+				id="model-default-filters-selector"
+				items={filters.map((filter) => ({
+					...filter,
+					description: filter.meta?.description
+				}))}
+				selectedIds={selectedFilterIds}
+				placeholder={$i18n.t('Search filters')}
+				triggerLabel={$i18n.t('Select Filter')}
+				emptyLabel={$i18n.t('No filters found')}
+				variant="dropdown"
+				on:select={(e) => {
+					toggleFilter(e.detail);
+				}}
+				on:enableall={(e) => {
+					selectedFilterIds = [
+						...new Set([...selectedFilterIds, ...e.detail.map((filter) => filter.id)])
+					];
+				}}
+			/>
+		{/if}
 	</div>
 
 	<div class="flex flex-col">
 		{#if filters.length > 0}
-			<TypeaheadSelector
-				id="model-default-filters-selector"
-				items={availableFilters.map((filter) => ({
-					...filter,
-					description: filter.meta?.description
-				}))}
-				className="w-48 max-w-full"
-				placeholder={$i18n.t('Search filters')}
-				on:select={(e) => {
-					selectFilter(e.detail);
-				}}
-			/>
-
-			<div class=" flex items-center flex-wrap">
+			<div class=" flex items-center flex-wrap mt-1">
 				{#each selectedFilters as filter}
 					{@const isSelected = selectedFilterIds.includes(filter.id)}
 					<div class=" flex items-center gap-2 mr-3">
@@ -74,4 +85,8 @@
 			</div>
 		{/if}
 	</div>
+
+	<div class=" text-xs dark:text-gray-700">
+		{$i18n.t('To select default filters here, enable toggleable filters for this model first.')}
+	</div>
 </div>
diff --git a/src/lib/components/workspace/Models/FiltersSelector.svelte b/src/lib/components/workspace/Models/FiltersSelector.svelte
index e7fa6963f8..72e4a261f3 100644
--- a/src/lib/components/workspace/Models/FiltersSelector.svelte
+++ b/src/lib/components/workspace/Models/FiltersSelector.svelte
@@ -18,40 +18,50 @@
 	export let filters: Filter[] = [];
 	export let selectedFilterIds: string[] = [];
 
+	$: selectableFilters = filters.filter((filter) => !filter.is_global);
 	$: selectedFilters = filters.filter(
 		(filter) => filter.is_global || selectedFilterIds.includes(filter.id)
 	);
-	$: availableFilters = filters.filter(
-		(filter) => !filter.is_global && !selectedFilterIds.includes(filter.id)
-	);
 
-	const selectFilter = (filter: Filter) => {
-		selectedFilterIds = [...selectedFilterIds, filter.id];
+	const toggleFilter = (filter: Filter) => {
+		selectedFilterIds = selectedFilterIds.includes(filter.id)
+			? selectedFilterIds.filter((id) => id !== filter.id)
+			: [...selectedFilterIds, filter.id];
 	};
 </script>
 
 {#if filters.length > 0}
 	<div>
-		<div class="flex w-full justify-between mb-1">
+		<div class="flex w-full items-center gap-2 mb-1">
 			<div class=" self-center text-xs text-gray-500">{$i18n.t('Filters')}</div>
+
+			{#if selectableFilters.length > 0}
+				<TypeaheadSelector
+					id="model-filters-selector"
+					items={selectableFilters.map((filter) => ({
+						...filter,
+						description: filter.meta?.description
+					}))}
+					selectedIds={selectedFilterIds}
+					placeholder={$i18n.t('Search filters')}
+					triggerLabel={$i18n.t('Select Filter')}
+					emptyLabel={$i18n.t('No filters found')}
+					variant="dropdown"
+					on:select={(e) => {
+						toggleFilter(e.detail);
+					}}
+					on:enableall={(e) => {
+						selectedFilterIds = [
+							...new Set([...selectedFilterIds, ...e.detail.map((filter) => filter.id)])
+						];
+					}}
+				/>
+			{/if}
 		</div>
 
 		<!-- TODO: Filter order matters -->
 		<div class="flex flex-col">
-			<TypeaheadSelector
-				id="model-filters-selector"
-				items={availableFilters.map((filter) => ({
-					...filter,
-					description: filter.meta?.description
-				}))}
-				className="w-48 max-w-full"
-				placeholder={$i18n.t('Search filters')}
-				on:select={(e) => {
-					selectFilter(e.detail);
-				}}
-			/>
-
-			<div class=" flex items-center flex-wrap">
+			<div class=" flex items-center flex-wrap mt-1">
 				{#each selectedFilters as filter}
 					{@const isSelected = filter.is_global || selectedFilterIds.includes(filter.id)}
 					<div class=" flex items-center gap-2 mr-3">
@@ -82,5 +92,9 @@
 				{/each}
 			</div>
 		</div>
+
+		<div class=" text-xs dark:text-gray-700">
+			{$i18n.t('To select filters here, add them to the "Functions" workspace first.')}
+		</div>
 	</div>
 {/if}
diff --git a/src/lib/components/workspace/Models/PromptSuggestions.svelte b/src/lib/components/workspace/Models/PromptSuggestions.svelte
index 732a50090f..8e846ad5d3 100644
--- a/src/lib/components/workspace/Models/PromptSuggestions.svelte
+++ b/src/lib/components/workspace/Models/PromptSuggestions.svelte
@@ -3,6 +3,7 @@
 	import { saveAs } from 'file-saver';
 	import { toast } from 'svelte-sonner';
 	import Plus from '$lib/components/icons/Plus.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	const i18n = getContext('i18n');
 
@@ -26,13 +27,13 @@
 	}
 </script>
 
-<div class=" space-y-3">
-	<div class="flex w-full justify-between mb-1.5">
-		<div class=" self-center text-xs flex-1 shrink-0 w-full">
+<div class="space-y-2">
+	<div class="mb-1 flex h-6 w-full items-center justify-between">
+		<div class="min-w-0 flex-1 self-center text-xs text-gray-500 dark:text-gray-400">
 			{$i18n.t('Default Prompt Suggestions')}
 		</div>
 
-		<div class="flex justify-end gap-2">
+		<div class="flex shrink-0 items-center justify-end gap-1.5">
 			<input
 				id="prompt-suggestions-import-input"
 				type="file"
@@ -75,7 +76,7 @@
 			/>
 
 			<button
-				class="flex text-xs items-center space-x-1 py-1 rounded-xl bg-transparent dark:text-gray-200 transition"
+				class="flex items-center rounded-xl bg-transparent px-1 py-0.5 text-xs text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
 				type="button"
 				on:click={() => {
 					const input = document.getElementById('prompt-suggestions-import-input');
@@ -84,14 +85,14 @@
 					}
 				}}
 			>
-				<div class=" self-center font-normal line-clamp-1">
+				<div class="line-clamp-1 self-center font-normal">
 					{$i18n.t('Import')}
 				</div>
 			</button>
 
 			{#if promptSuggestions.length}
 				<button
-					class="flex text-xs items-center space-x-1 py-1 rounded-xl bg-transparent dark:text-gray-200 transition"
+					class="flex items-center rounded-xl bg-transparent px-1 py-0.5 text-xs text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
 					type="button"
 					on:click={async () => {
 						let blob = new Blob([JSON.stringify(promptSuggestions)], {
@@ -100,89 +101,85 @@
 						saveAs(blob, `prompt-suggestions-export-${Date.now()}.json`);
 					}}
 				>
-					<div class=" self-center font-normal line-clamp-1">
+					<div class="line-clamp-1 self-center font-normal">
 						{$i18n.t('Export')}
 					</div>
 				</button>
 			{/if}
 
 			<button
-				class=" px-1.5 rounded-xl transition font-normal text-sm flex items-center"
+				class="flex size-6 items-center justify-center text-gray-500 transition hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
 				type="button"
+				aria-label={$i18n.t('Add prompt suggestion')}
 				on:click={() => {
 					if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
 						promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
 					}
 				}}
 			>
-				<Plus className="size-3" strokeWidth="2.5" />
+				<Plus className="size-3.5" strokeWidth="2.25" />
 			</button>
 		</div>
 	</div>
 
 	{#if _promptSuggestions.length > 0}
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col gap-1.5">
 			{#each _promptSuggestions as prompt, promptIdx}
 				<div
-					class=" flex border rounded-2xl border-gray-100/30 dark:border-gray-850/30 bg-transparent p-2"
+					class="flex gap-1 rounded-lg border border-gray-100/40 bg-transparent px-2 py-1 dark:border-gray-850/50"
 				>
-					<div class="flex flex-col md:flex-row w-full gap-1 md:gap-2 px-2">
-						<div class="gap-0.5 min-w-60">
+					<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+						<div class="grid min-w-0 gap-1 md:grid-cols-2 md:gap-1.5">
 							<Tooltip content={$i18n.t('e.g. Tell me a fun fact')} placement="top-start">
 								<input
-									class="text-sm w-full bg-transparent outline-hidden"
+									class="w-full bg-transparent text-[13px] leading-5 text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-200 dark:placeholder:text-gray-700"
 									placeholder={$i18n.t('Title')}
+									aria-label={$i18n.t('Title')}
 									bind:value={prompt.title[0]}
 								/>
 							</Tooltip>
 
 							<Tooltip content={$i18n.t('e.g. about the Roman Empire')} placement="top-start">
 								<input
-									class="text-sm w-full bg-transparent outline-hidden text-gray-600 dark:text-gray-400"
+									class="w-full bg-transparent text-[13px] leading-5 text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
 									placeholder={$i18n.t('Subtitle')}
+									aria-label={$i18n.t('Subtitle')}
 									bind:value={prompt.title[1]}
 								/>
 							</Tooltip>
 						</div>
 
 						<Tooltip
-							className="w-full self-center items-center flex"
+							className="flex min-w-0"
 							content={$i18n.t('e.g. Tell me a fun fact about the Roman Empire')}
 							placement="top-start"
 						>
 							<textarea
-								class="text-sm w-full bg-transparent outline-hidden resize-none"
-								placeholder={$i18n.t('Prompt')}
-								rows="2"
+								class="min-h-5 w-full resize-none bg-transparent text-[13px] leading-5 text-gray-700 outline-hidden placeholder:text-gray-300 dark:text-gray-200 dark:placeholder:text-gray-700"
+								placeholder={$i18n.t('Content')}
+								aria-label={$i18n.t('Content')}
+								rows="1"
 								bind:value={prompt.content}
 							/>
 						</Tooltip>
 					</div>
 
 					<button
-						class="p-1 self-start"
+						class="flex size-6 shrink-0 items-center justify-center text-gray-400 opacity-70 transition hover:text-gray-700 hover:opacity-100 dark:text-gray-600 dark:hover:text-gray-300"
 						type="button"
+						aria-label={$i18n.t('Remove prompt suggestion')}
 						on:click={() => {
 							promptSuggestions.splice(promptIdx, 1);
 							promptSuggestions = promptSuggestions;
 						}}
 					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-							/>
-						</svg>
+						<XMark className="size-3.5" />
 					</button>
 				</div>
 			{/each}
 		</div>
 	{:else}
-		<div class="text-xs text-center w-full text-gray-500 mb-1.5">
+		<div class="mb-1.5 w-full text-center text-xs text-gray-500 dark:text-gray-600">
 			{$i18n.t('No suggestion prompts')}
 		</div>
 	{/if}