diff --git a/src/lib/components/playground/Completions.svelte b/src/lib/components/playground/Completions.svelte
index bd829aafa..4687e462f 100644
--- a/src/lib/components/playground/Completions.svelte
+++ b/src/lib/components/playground/Completions.svelte
@@ -9,6 +9,7 @@
 	import { chatCompletion } from '$lib/apis/openai';
 
 	import { splitStream } from '$lib/utils';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
 
 	const i18n = getContext('i18n');
@@ -160,9 +161,10 @@
 			</div>
 
 			<div class="pb-3 flex justify-end">
+			<div class="flex gap-2 shrink-0">
 				{#if !loading}
 					<button
-						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
 						on:click={() => {
 							submitHandler();
 						}}
@@ -171,16 +173,18 @@
 					</button>
 				{:else}
 					<button
-						class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-full"
+						class="px-3.5 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg flex items-center gap-2"
 						on:click={() => {
 							stopResponse();
 						}}
 					>
+						<Spinner className="size-4" />
 						{$i18n.t('Cancel')}
 					</button>
 				{/if}
 			</div>
 		</div>
+		</div>
 	</div>
 </div>