diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
index 77eae741e9..3b4223f157 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import Button from '../common/button/Button.svelte'
+	import TextInput from '../text_input/TextInput.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { WorkspaceService } from '$lib/gen'
-	import Modal from '../common/modal/Modal.svelte'
-	import { Pen } from 'lucide-svelte'
 	import { untrack } from 'svelte'
 
-	let { open = false }: { open?: boolean } = $props()
-
-	let newName = $state('')
 	let currentName = $state('')
+	let newName = $state('')
 
 	$effect(() => {
 		if ($workspaceStore) {
@@ -20,10 +17,13 @@
 
 	async function getWorkspaceName() {
 		currentName = await WorkspaceService.getWorkspaceName({ workspace: $workspaceStore! })
+		newName = currentName
 	}
 
 	async function renameWorkspace() {
-		open = false
+		if (!newName || newName === currentName) {
+			return
+		}
 		await WorkspaceService.changeWorkspaceName({
 			workspace: $workspaceStore!,
 			requestBody: {
@@ -32,7 +32,6 @@
 		})
 
 		sendUserToast(`Changed workspace name to ${newName}`)
-		newName = ''
 		getWorkspaceName()
 	}
 </script>
@@ -41,44 +40,29 @@
 	<p class="font-semibold text-xs text-emphasis">Workspace name</p>
 	<p class="text-xs text-secondary font-normal">Displayable name</p>
 	<div class="flex flex-row gap-2 items-center">
-		<p class="text-primary text-xs">{currentName}</p>
-		<Button
-			on:click={() => {
-				open = true
-			}}
-			unifiedSize="sm"
-			iconOnly
-			variant="subtle"
-			startIcon={{
-				icon: Pen
+		<TextInput
+			bind:value={newName}
+			size="sm"
+			class="max-w-xs"
+			inputProps={{
+				placeholder: 'Workspace name',
+				'aria-label': 'Workspace name',
+				onkeydown: (e) => {
+					if (e.key === 'Enter') {
+						renameWorkspace()
+					}
+				}
 			}}
 		/>
-	</div>
-</div>
-
-<Modal bind:open title="Change workspace name">
-	<div class="flex flex-col gap-4 mt-4">
-		{#if currentName}
-			<p class="text-secondary text-xs"
-				>Current name <br /> <span class="text-emphasis">{currentName}</span></p
-			>
-		{/if}
-		<label class="flex flex-col gap-1">
-			<span class="text-emphasis text-xs">New name</span>
-			<input type="text" bind:value={newName} />
-		</label>
-	</div>
-
-	{#snippet actions()}
 		<Button
 			size="sm"
 			variant="accent"
-			disabled={!newName}
+			disabled={!newName || newName === currentName}
 			on:click={() => {
 				renameWorkspace()
 			}}
 		>
 			Save
 		</Button>
-	{/snippet}
-</Modal>
+	</div>
+</div>