diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index c2460c5276..98b5d51036 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -96,6 +96,7 @@
 	import GlobeAlt from '../icons/GlobeAlt.svelte';
 	import Photo from '../icons/Photo.svelte';
 	import Wrench from '../icons/Wrench.svelte';
+	import ArrowUpLeft from '../icons/ArrowUpLeft.svelte';
 	import Cube from '../icons/Cube.svelte';
 	import Sparkles from '../icons/Sparkles.svelte';
 	import Mic from '../icons/Mic.svelte';
@@ -2610,15 +2611,15 @@
 										{#each pendingOAuthTools as pendingTool (pendingTool.id)}
 											<Tooltip content={$i18n.t('Click to connect')} placement="top">
 												<button
+													aria-label={`${$i18n.t('Click to connect')}: ${pendingTool.name}`}
 													on:click|preventDefault={() => {
 														oauthRedirectHandler(pendingTool, chatInputDraft);
 													}}
 													type="button"
-													class="group px-2 py-[0.3125rem] flex gap-1.5 items-center text-xs rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden
-													text-amber-600 dark:text-amber-400 bg-amber-50 hover:bg-amber-100 dark:bg-amber-400/10 dark:hover:bg-amber-600/10 border border-amber-200/40 dark:border-amber-500/20"
+													class="flex min-w-0 max-w-full items-center gap-1.5 bg-transparent px-1.5 py-1.5 text-xs text-gray-500 transition-colors duration-150 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 dark:text-gray-400 dark:hover:text-gray-100 dark:focus-visible:outline-gray-500"
 												>
-													<Wrench className="size-3.5" strokeWidth="1.75" />
 													<span class="truncate">{pendingTool.name}</span>
+													<ArrowUpLeft className="size-3 shrink-0 rotate-90" strokeWidth="1.5" />
 												</button>
 											</Tooltip>
 										{/each}