diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index c9b49391..aed5b4b2 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -288,59 +288,83 @@ export const SelectedFiles = (
 					const isThisSelectionOpened = !!(selection.selectionStr && selectionIsOpened[i])
 					const isThisSelectionAFile = selection.selectionStr === null
 
-					const content = <div // container for `selectionSummary` and `selectionText`
+					return <div // container for `selectionSummary` and `selectionText`
 						className={`${isThisSelectionOpened ? 'w-full' : ''}`}
 					>
 						{/* selection summary */}
-						<div
-							// className="relative rounded rounded-e-2xl flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default"
-							className={`flex items-center gap-0.5 relative
-							rounded-md px-1
-							w-fit h-fit
-							select-none
-							bg-void-bg-3 hover:brightness-95
-							text-void-fg-1 text-xs text-nowrap
-							border rounded-xs ${isClearHovered ? 'border-void-border-1' : 'border-void-border-2'}
-							transition-all duration-150`}
-							onClick={() => {
-								// open the file if it is a file
-								if (isThisSelectionAFile) {
-									commandService.executeCommand('vscode.open', selection.fileURI, {
-										preview: true,
-										// preserveFocus: false,
-									});
-								} else {
-									// open the selection if it is a text-selection
-									setSelectionIsOpened(s => {
-										const newS = [...s]
-										newS[i] = !newS[i]
-										return newS
-									});
-								}
-							}}
+						<div // container for delete button
+							className='flex items-center gap-0.5'
 						>
-							<span>
-								{/* file name */}
-								{getBasename(selection.fileURI.fsPath)}
-								{/* selection range */}
-								{!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
-							</span>
+							<div // styled summary box
+								className={`flex items-center gap-0.5 relative
+									rounded-md px-1
+									w-fit h-fit
+									select-none
+									bg-void-bg-3 hover:brightness-95
+									text-void-fg-1 text-xs text-nowrap
+									border rounded-xs ${isClearHovered ? 'border-void-border-1' : 'border-void-border-2'}
+									transition-all duration-150`}
+								onClick={() => {
+									// open the file if it is a file
+									if (isThisSelectionAFile) {
+										commandService.executeCommand('vscode.open', selection.fileURI, {
+											preview: true,
+											// preserveFocus: false,
+										});
+									} else {
+										// open the selection if it is a text-selection
+										setSelectionIsOpened(s => {
+											const newS = [...s]
+											newS[i] = !newS[i]
+											return newS
+										});
+									}
+								}}
+							>
+								<span>
+									{/* file name */}
+									{getBasename(selection.fileURI.fsPath)}
+									{/* selection range */}
+									{!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
+								</span>
 
-							{/* X button */}
-							{type === 'staging' &&
-								<span
-									className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1'
-									onClick={(e) => {
-										e.stopPropagation(); // don't open/close selection
-										if (type !== 'staging') return;
-										setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
-										setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
-									}}
-								>
-									<IconX size={16} className="p-[2px] stroke-[3]" />
-								</span>}
+								{/* X button */}
+								{type === 'staging' &&
+									<span
+										className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1'
+										onClick={(e) => {
+											e.stopPropagation(); // don't open/close selection
+											if (type !== 'staging') return;
+											setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
+											setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
+										}}
+									>
+										<IconX size={16} className="p-[2px] stroke-[3]" />
+									</span>}
 
 
+							</div>
+
+							{/* delete all selections button */}
+							{type !== 'staging' || selections.length === 0 || i !== selections.length - 1
+								? null
+								: <div key={i} className={`flex items-center gap-0.5 ${isThisSelectionOpened ? 'w-full' : ''}`}>
+									<div
+										className='rounded-md'
+										onMouseEnter={() => setIsClearHovered(true)}
+										onMouseLeave={() => setIsClearHovered(false)}
+									>
+										<Delete
+											size={16}
+											className='stroke-[1] stroke-void-fg-3
+										fill-void-bg-3
+										hover:brightness-105
+										cursor-pointer'
+											onClick={() => { setStaging([]) }}
+										/>
+									</div>
+								</div>
+							}
 						</div>
 						{/* selection text */}
 						{isThisSelectionOpened &&
@@ -359,26 +383,6 @@ export const SelectedFiles = (
 							</div>}
 					</div>
 
-					if (type !== 'staging' || selections.length === 0 || i !== selections.length - 1)
-						return <Fragment key={i}>{content}</Fragment>
-
-					else return <div key={i} className='flex items-center gap-0.5'>
-						{content}
-						<div
-							className='rounded-md'
-							onMouseEnter={() => setIsClearHovered(true)}
-							onMouseLeave={() => setIsClearHovered(false)}
-						>
-							<Delete
-								size={16}
-								className='stroke-[1] stroke-void-fg-3
-										fill-void-bg-3
-										hover:brightness-105
-										cursor-pointer'
-								onClick={() => { setStaging([]) }}
-							/>
-						</div>
-					</div>
 				})}
 
 
@@ -413,14 +417,14 @@ const ChatBubble = ({ chatMessage, isLoading }: {
 	return <div
 		// align chatbubble accoridng to role
 		className={`
-				${role === 'user' ? 'px-2 self-end w-fit max-w-full' : ''}
+				${role === 'user' ? 'px-4 self-end w-fit max-w-full' : ''}
 				${role === 'assistant' ? 'self-start w-full max-w-full' : ''}
 			`}
 	>
 		<div
 			// style chatbubble according to role
 			className={`
-				p-2 text-left space-y-2 rounded-lg
+				p-4 text-left space-y-2 rounded-lg
 				overflow-x-auto max-w-full
 				${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''}
 			`}