diff --git a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
index c48fbe50b3..6e1dc0d25f 100644
--- a/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
+++ b/frontend/src/lib/components/ToggleHubWorkspaceQuick.svelte
@@ -13,9 +13,9 @@
 <div class="max-w-min">
 	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		{#snippet children({ item })}
-			<ToggleButton value="all" label="All" light small {item} />
-			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small {item} />
-			<ToggleButton value="workspace" icon={Building} label="Workspace" light small {item} />
+			<ToggleButton value="all" label="All" light {item} />
+			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light {item} />
+			<ToggleButton value="workspace" icon={Building} label="Workspace" light {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 </div>
diff --git a/frontend/src/lib/components/common/button/RefreshButton.svelte b/frontend/src/lib/components/common/button/RefreshButton.svelte
index dfa0c84292..a6e1d29c3c 100644
--- a/frontend/src/lib/components/common/button/RefreshButton.svelte
+++ b/frontend/src/lib/components/common/button/RefreshButton.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-	import { Button } from '$lib/components/common'
+	import { Button, ButtonType } from '$lib/components/common'
 	import { RefreshCw } from 'lucide-svelte'
 
 	import Popover from '$lib/components/Popover.svelte'
+	import { twMerge } from 'tailwind-merge'
 
 	interface Props {
 		loading: boolean
+		size?: ButtonType.Size
+		light?: boolean
 	}
 
-	let { loading }: Props = $props()
+	let { loading, size = 'xs2', light = false }: Props = $props()
 
 	let buttonHover = $state(false)
 </script>
@@ -18,11 +21,14 @@
 		on:mouseenter={() => (buttonHover = true)}
 		on:mouseleave={() => (buttonHover = false)}
 		color="light"
-		size="xs2"
+		{size}
 		variant="border"
 		on:click
 	>
-		<RefreshCw class={loading ? 'animate-spin ' : ''} size="14" />
+		<RefreshCw
+			class={twMerge(loading ? 'animate-spin ' : '', light ? 'text-secondary' : '')}
+			size="14"
+		/>
 	</Button>
 	{#snippet text()}
 		{#if loading}
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
index 364af5c671..a02b632186 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
@@ -69,7 +69,7 @@
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 		{/if}
-		<RefreshButton {loading} on:click={() => (refreshCount.val += 1)} />
+		<RefreshButton size="md" light {loading} on:click={() => (refreshCount.val += 1)} />
 	</div>
 
 	<div class="flex flex-row grow min-h-0">