diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index 1e0d621f70..6986c52391 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -2508,53 +2508,87 @@
 				{/if}
 
 				{#if !isSearching && !loading && !error && !uploading && !($selectedTerminalId && $terminalServers === null)}
-					{#if creatingFolder}
-						<div class="flex h-7 items-center gap-1.5 pl-[26px] pr-2">
-							<FileTypeIcon name={newFolderName} type="directory" />
-							<input
-								bind:this={newFolderInput}
-								bind:value={newFolderName}
-								class="min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden"
-								placeholder={$i18n.t('Folder name')}
-								aria-label={$i18n.t('Folder name')}
-								on:keydown={(e) => {
-									if (e.key === 'Enter') submitNewFolder();
-									if (e.key === 'Escape') {
-										creatingFolder = false;
-										newFolderName = '';
-									}
-								}}
-								on:blur={submitNewFolder}
-							/>
-						</div>
-					{/if}
-					{#if creatingFile}
-						<div class="flex h-7 items-center gap-1.5 pl-[26px] pr-2">
-							<FileTypeIcon name={newFileName} type="file" />
-							<input
-								bind:this={newFileInput}
-								bind:value={newFileName}
-								class="min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden"
-								placeholder={$i18n.t('File name')}
-								aria-label={$i18n.t('File name')}
-								on:keydown={(e) => {
-									if (e.key === 'Enter') submitNewFile();
-									if (e.key === 'Escape') {
-										creatingFile = false;
-										newFileName = '';
-									}
-								}}
-								on:blur={submitNewFile}
-							/>
-						</div>
-					{/if}
-
 					{#if visibleEntries.length > 0 || creatingFolder || creatingFile}
 						<ul
 							class={viewMode === 'grid'
 								? 'grid grid-cols-[repeat(auto-fill,minmax(min(94px,calc((100%_-_0.5rem)/2)),1fr))] gap-2 p-2.5'
 								: ''}
 						>
+							{#if creatingFolder}
+								<li
+									class={viewMode === 'grid'
+										? 'order-last relative flex h-17 min-w-0 flex-col items-start self-start px-1.5 pt-4 pb-1.5'
+										: 'flex h-7 items-center gap-1.5 pl-[26px] pr-2'}
+								>
+									{#if viewMode === 'grid'}
+										<svg
+											class="pointer-events-none absolute inset-0 h-full w-full text-black/10 dark:text-white/10"
+											viewBox="0 0 200 68"
+											preserveAspectRatio="none"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="1"
+											aria-hidden="true"
+										>
+											<path
+												d="M1 19V8Q1 1 9 1H54Q58 1 61 4L65 7Q67 9 71 9H191Q199 9 199 15V19"
+												vector-effect="non-scaling-stroke"
+											/>
+											<path
+												d="M1 20Q1 13 9 13H191Q199 13 199 20V60Q199 67 191 67H9Q1 67 1 60Z"
+												vector-effect="non-scaling-stroke"
+											/>
+										</svg>
+									{:else}
+										<FileTypeIcon name={newFolderName} type="directory" />
+									{/if}
+									<input
+										bind:this={newFolderInput}
+										bind:value={newFolderName}
+										class={viewMode === 'grid'
+											? 'relative w-full min-w-0 bg-transparent py-0.5 text-xs text-gray-800 outline-hidden dark:text-gray-200'
+											: 'min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden'}
+										placeholder={$i18n.t('Folder name')}
+										aria-label={$i18n.t('Folder name')}
+										on:keydown={(e) => {
+											if (e.key === 'Enter') submitNewFolder();
+											if (e.key === 'Escape') {
+												creatingFolder = false;
+												newFolderName = '';
+											}
+										}}
+										on:blur={submitNewFolder}
+									/>
+								</li>
+							{/if}
+							{#if creatingFile}
+								<li
+									class={viewMode === 'grid'
+										? 'order-last flex h-[3.875rem] min-w-0 flex-col items-start self-start rounded-md border border-black/[0.06] bg-gray-50/40 p-1.5 dark:border-white/[0.06] dark:bg-gray-900'
+										: 'flex h-7 items-center gap-1.5 pl-[26px] pr-2'}
+								>
+									{#if viewMode === 'list'}
+										<FileTypeIcon name={newFileName} type="file" />
+									{/if}
+									<input
+										bind:this={newFileInput}
+										bind:value={newFileName}
+										class={viewMode === 'grid'
+											? 'relative w-full min-w-0 bg-transparent py-0.5 text-xs text-gray-800 outline-hidden dark:text-gray-200'
+											: 'min-w-0 flex-1 bg-transparent py-0.5 text-xs outline-hidden'}
+										placeholder={$i18n.t('File name')}
+										aria-label={$i18n.t('File name')}
+										on:keydown={(e) => {
+											if (e.key === 'Enter') submitNewFile();
+											if (e.key === 'Escape') {
+												creatingFile = false;
+												newFileName = '';
+											}
+										}}
+										on:blur={submitNewFile}
+									/>
+								</li>
+							{/if}
 							{#each visibleEntries as entry (entry.fullPath)}
 								<FileEntryRow
 									{entry}