diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index cb810921..92ecf82e 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -22,8 +22,9 @@ export const Sidebar = ({ className }: { className: string }) => {
 	const { isHistoryOpen, currentTab: tab } = sidebarState
 
 	const isDark = useIsDark()
-	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ width: '100%', height: '100%' }}>
-		<div className={`flex flex-col py-2 w-full h-full bg-vscode-sidebar-bg`}>
+	// ${isDark ? 'dark' : ''}
+	return <div className={`@@void-scope`} style={{ width: '100%', height: '100%' }}>
+		<div className={`w-full h-full flex flex-col py-2 bg-vscode-sidebar-bg`}>
 
 			{/* <span onClick={() => {
 				const tabs = ['chat', 'settings', 'threadSelector']
@@ -31,7 +32,7 @@ export const Sidebar = ({ className }: { className: string }) => {
 				sidebarStateService.setState({ currentTab: tabs[(index + 1) % tabs.length] as any })
 			}}>clickme {tab}</span> */}
 
-			<div className={`mb-2 w-full ${isHistoryOpen ? '' : 'hidden'} ring-2 ring-widget-shadow z-10`}>
+			<div className={`w-full h-auto mb-2 ${isHistoryOpen ? '' : 'hidden'} ring-2 ring-widget-shadow z-10`}>
 				<ErrorBoundary>
 					<SidebarThreadSelector />
 				</ErrorBoundary>
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 b028bf78..25f4edbb 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
@@ -382,8 +382,17 @@ const ChatBubble = ({ chatMessage, isLoading }: {
 		chatbubbleContents = <ChatMarkdownRender string={chatMessage.displayContent} /> // sectionsHTML
 	}
 
-	return <div className={`mx-2 flex flex-col ${role === 'user' ? 'items-end' : 'items-start'}`}>
-		<div className={`text-left p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full overflow-auto`}>
+	return <div
+		// align chatbubble accoridng to role
+		className={`
+			${role === 'user' ? 'self-end' : 'self-start'}
+			${role === 'assistant' ? 'w-full' : ''}
+		`}
+	>
+		<div
+			// style chatbubble
+			className={`p-2 mx-2 text-left space-y-2 rounded-lg ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full overflow-auto`}
+		>
 			{chatbubbleContents}
 			{isLoading && <IconLoading className='opacity-50 text-sm' />}
 		</div>
@@ -552,7 +561,12 @@ export const SidebarChat = () => {
 		className={`w-full h-full`}
 	>
 		<ScrollToBottomContainer
-			className={`overflow-x-hidden overflow-y-auto`}
+			className={`
+				w-full h-auto
+				flex flex-col gap-0
+				overflow-x-hidden
+				overflow-y-auto
+			`}
 			style={{ maxHeight: sidebarDimensions.height - formDimensions.height - 30 }}
 		>
 			{/* previous messages */}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index e89ac700..b85f2e2e 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -301,7 +301,7 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan
 
 	return <div ref={divRef}>
 		<WidgetComponent
-			className='relative z-0 text-sm'
+			className='relative z-0 text-sm !bg-vscode-editor-bg'
 			ctor={useCallback((container) =>
 				instantiationService.createInstance(
 					CodeEditorWidget,