diff --git a/webview-ui/src/components/chat/Announcement.tsx b/webview-ui/src/components/chat/Announcement.tsx
index b3a79cde7c..0d93d9da0c 100644
--- a/webview-ui/src/components/chat/Announcement.tsx
+++ b/webview-ui/src/components/chat/Announcement.tsx
@@ -1,113 +1,94 @@
-import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { memo } from "react"
-import { useAppTranslation } from "@/i18n/TranslationContext"
+import { useState, memo } from "react"
 import { Trans } from "react-i18next"
+import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+
+import { useAppTranslation } from "@src/i18n/TranslationContext"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@src/components/ui"
 
 interface AnnouncementProps {
 	hideAnnouncement: () => void
 }
-/*
-You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
-*/
+
+/**
+ * You must update the `latestAnnouncementId` in ClineProvider for new
+ * announcements to show to users. This new id will be compared with what's in
+ * state for the 'last announcement shown', and if it's different then the
+ * announcement will render. As soon as an announcement is shown, the id will be
+ * updated in state. This ensures that announcements are not shown more than
+ * once, even if the user doesn't close it themselves.
+ */
+
 const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 	const { t } = useAppTranslation()
-
-	const discordLink = (
-		<VSCodeLink
-			href="https://discord.gg/roocode"
-			onClick={(e) => {
-				e.preventDefault()
-				window.postMessage(
-					{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
-					"*",
-				)
-			}}>
-			Discord
-		</VSCodeLink>
-	)
-
-	const redditLink = (
-		<VSCodeLink
-			href="https://reddit.com/r/RooCode"
-			onClick={(e) => {
-				e.preventDefault()
-				window.postMessage(
-					{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
-					"*",
-				)
-			}}>
-			Reddit
-		</VSCodeLink>
-	)
+	const [open, setOpen] = useState(true)
 
 	return (
-		<div className="flex flex-col justify-center absolute top-0 bottom-0 left-0 right-0 z-50 p-10 bg-black/50">
-			<div
-				style={{
-					backgroundColor: "var(--vscode-editor-background)",
-					borderRadius: "3px",
-					padding: "12px 16px",
-					margin: "5px 15px 5px 15px",
-					position: "relative",
-					flexShrink: 0,
-				}}>
-				<VSCodeButton
-					appearance="icon"
-					onClick={hideAnnouncement}
-					title={t("chat:announcement.hideButton")}
-					style={{ position: "absolute", top: "8px", right: "8px" }}>
-					<span className="codicon codicon-close"></span>
-				</VSCodeButton>
-				<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
+		<Dialog
+			open={open}
+			onOpenChange={(open) => {
+				setOpen(open)
 
-				<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
-
-				<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
-				<ul style={{ margin: "5px 0" }}>
-					<li>
-						•{" "}
-						<Trans
-							i18nKey="chat:announcement.feature1"
-							components={{
-								bold: <b />,
-								code: <code />,
-							}}
-						/>
-					</li>
-					<li>
-						•{" "}
-						<Trans
-							i18nKey="chat:announcement.feature2"
-							components={{
-								bold: <b />,
-								code: <code />,
-							}}
-						/>
-					</li>
-					<li>
-						•{" "}
-						<Trans
-							i18nKey="chat:announcement.feature3"
-							components={{
-								bold: <b />,
-								code: <code />,
-							}}
-						/>
-					</li>
-				</ul>
-
-				<p style={{ margin: "10px 0px 0px" }}>
+				if (!open) {
+					hideAnnouncement()
+				}
+			}}>
+			<DialogContent className="max-w-96">
+				<DialogHeader>
+					<DialogTitle>{t("chat:announcement.title")}</DialogTitle>
+					<DialogDescription>{t("chat:announcement.description")}</DialogDescription>
+				</DialogHeader>
+				<div>
+					<h3>{t("chat:announcement.whatsNew")}</h3>
+					<ul className="space-y-2">
+						<li>
+							•{" "}
+							<Trans i18nKey="chat:announcement.feature1" components={{ bold: <b />, code: <code /> }} />
+						</li>
+						<li>
+							•{" "}
+							<Trans i18nKey="chat:announcement.feature2" components={{ bold: <b />, code: <code /> }} />
+						</li>
+						<li>
+							•{" "}
+							<Trans i18nKey="chat:announcement.feature3" components={{ bold: <b />, code: <code /> }} />
+						</li>
+					</ul>
 					<Trans
 						i18nKey="chat:announcement.detailsDiscussLinks"
-						components={{
-							discordLink: discordLink,
-							redditLink: redditLink,
-						}}
+						components={{ discordLink: <DiscordLink />, redditLink: <RedditLink /> }}
 					/>
-				</p>
-			</div>
-		</div>
+				</div>
+			</DialogContent>
+		</Dialog>
 	)
 }
 
+const DiscordLink = () => (
+	<VSCodeLink
+		href="https://discord.gg/roocode"
+		onClick={(e) => {
+			e.preventDefault()
+			window.postMessage(
+				{ type: "action", action: "openExternal", data: { url: "https://discord.gg/roocode" } },
+				"*",
+			)
+		}}>
+		Discord
+	</VSCodeLink>
+)
+
+const RedditLink = () => (
+	<VSCodeLink
+		href="https://reddit.com/r/RooCode"
+		onClick={(e) => {
+			e.preventDefault()
+			window.postMessage(
+				{ type: "action", action: "openExternal", data: { url: "https://reddit.com/r/RooCode" } },
+				"*",
+			)
+		}}>
+		Reddit
+	</VSCodeLink>
+)
+
 export default memo(Announcement)
diff --git a/webview-ui/src/components/chat/AutoApproveMenu.tsx b/webview-ui/src/components/chat/AutoApproveMenu.tsx
index aaa30a0153..2eb3a0afbf 100644
--- a/webview-ui/src/components/chat/AutoApproveMenu.tsx
+++ b/webview-ui/src/components/chat/AutoApproveMenu.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
+import { cn } from "@/lib/utils"
 import { vscode } from "@src/utils/vscode"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
@@ -118,23 +119,13 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 
 	return (
 		<div
-			style={{
-				padding: "0 15px",
-				userSelect: "none",
-				borderTop: isExpanded
-					? `0.5px solid color-mix(in srgb, var(--vscode-titleBar-inactiveForeground) 20%, transparent)`
-					: "none",
-				overflowY: "auto",
-				...style,
-			}}>
+			className={cn(
+				"px-[15px] select-none overflow-y-auto",
+				isExpanded && "border-t-[0.5px] border-vscode-titleBar-inactiveForeground-20",
+			)}
+			style={style}>
 			<div
-				style={{
-					display: "flex",
-					alignItems: "center",
-					gap: "8px",
-					padding: isExpanded ? "8px 0" : "8px 0 0 0",
-					cursor: "pointer",
-				}}
+				className={`flex items-center gap-2 cursor-pointer ${isExpanded ? "py-2" : "pt-2 pb-0"}`}
 				onClick={toggleExpanded}>
 				<div onClick={(e) => e.stopPropagation()}>
 					<VSCodeCheckbox
@@ -146,49 +137,22 @@ const AutoApproveMenu = ({ style }: AutoApproveMenuProps) => {
 						}}
 					/>
 				</div>
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						gap: "4px",
-						flex: 1,
-						minWidth: 0,
-					}}>
-					<span
-						style={{
-							color: "var(--vscode-foreground)",
-							flexShrink: 0,
-						}}>
-						{t("chat:autoApprove.title")}
-					</span>
-					<span
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
-							whiteSpace: "nowrap",
-							flex: 1,
-							minWidth: 0,
-						}}>
+				<div className="flex items-center gap-1 flex-1 min-w-0">
+					<span className="text-vscode-foreground flex-shrink-0">{t("chat:autoApprove.title")}</span>
+					<span className="text-vscode-descriptionForeground overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
 						{enabledActionsList || t("chat:autoApprove.none")}
 					</span>
 					<span
-						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
-						style={{
-							flexShrink: 0,
-							marginLeft: isExpanded ? "2px" : "-2px",
-						}}
+						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} flex-shrink-0 ${
+							isExpanded ? "ml-0.5" : "ml-[-2px]"
+						}`}
 					/>
 				</div>
 			</div>
 
 			{isExpanded && (
 				<div className="flex flex-col gap-2">
-					<div
-						style={{
-							color: "var(--vscode-descriptionForeground)",
-							fontSize: "12px",
-						}}>
+					<div className="text-vscode-descriptionForeground text-xs">
 						<Trans
 							i18nKey="chat:autoApprove.description"
 							components={{
diff --git a/webview-ui/src/components/chat/BrowserSessionRow.tsx b/webview-ui/src/components/chat/BrowserSessionRow.tsx
index e4aa54fdad..f8de4e7715 100644
--- a/webview-ui/src/components/chat/BrowserSessionRow.tsx
+++ b/webview-ui/src/components/chat/BrowserSessionRow.tsx
@@ -9,7 +9,8 @@ import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { vscode } from "@src/utils/vscode"
 
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import CodeBlock from "../common/CodeBlock"
+import { cn } from "@/lib/utils"
 import { ChatRowContent } from "./ChatRow"
 import { ProgressIndicator } from "./ProgressIndicator"
 
@@ -233,53 +234,26 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 		: displayState.mousePosition || defaultMousePosition
 
 	const [browserSessionRow, { height: rowHeight }] = useSize(
-		<div style={{ padding: "10px 6px 10px 15px", marginBottom: -10 }}>
-			<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px" }}>
+		<div className="px-[15px] py-[10px] pr-[6px] mb-[-10px]">
+			<div className="flex items-center gap-2.5 mb-2.5">
 				{isBrowsing ? (
 					<ProgressIndicator />
 				) : (
-					<span
-						className={`codicon codicon-inspect`}
-						style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
+					<span className={`codicon codicon-inspect text-vscode-foreground mb-[-1.5px]`}></span>
 				)}
-				<span style={{ fontWeight: "bold" }}>
+				<span className="font-bold">
 					<>{t("chat:browser.rooWantsToUse")}</>
 				</span>
 			</div>
-			<div
-				style={{
-					borderRadius: 3,
-					border: "1px solid var(--vscode-editorGroup-border)",
-					overflow: "hidden",
-					backgroundColor: CODE_BLOCK_BG_COLOR,
-					marginBottom: 10,
-				}}>
+			<div className="rounded-[3px] border border-vscode-editorGroup-border overflow-hidden mb-2.5 bg-background">
 				{/* URL Bar */}
 				<div
-					style={{
-						margin: "5px auto",
-						width: "calc(100% - 10px)",
-						boxSizing: "border-box", // includes padding in width calculation
-						backgroundColor: "var(--vscode-input-background)",
-						border: "1px solid var(--vscode-input-border)",
-						borderRadius: "4px",
-						padding: "3px 5px",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						color: displayState.url
-							? "var(--vscode-input-foreground)"
-							: "var(--vscode-descriptionForeground)",
-						fontSize: "12px",
-					}}>
-					<div
-						style={{
-							textOverflow: "ellipsis",
-							overflow: "hidden",
-							whiteSpace: "nowrap",
-							width: "100%",
-							textAlign: "center",
-						}}>
+					className={cn(
+						"my-[5px] mx-auto w-[calc(100%-10px)] box-border bg-vscode-input-background border border-vscode-input-border rounded p-[3px_5px] flex items-center justify-center text-xs",
+						// Conditional color class:
+						displayState.url ? "text-vscode-input-foreground" : "text-vscode-descriptionForeground",
+					)}>
+					<div className="text-ellipsis overflow-hidden whitespace-nowrap w-full text-center">
 						{displayState.url || "http"}
 					</div>
 				</div>
@@ -287,25 +261,15 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 				{/* Screenshot Area */}
 				<div
 					data-testid="screenshot-container"
-					style={{
-						width: "100%",
-						paddingBottom: `${aspectRatio}%`, // height/width ratio
-						position: "relative",
-						backgroundColor: "var(--vscode-input-background)",
-					}}>
+					className={cn(
+						"w-full relative bg-vscode-input-background",
+						`[padding-bottom:${aspectRatio}%]`, // Converted paddingBottom to arbitrary property
+					)}>
 					{displayState.screenshot ? (
 						<img
 							src={displayState.screenshot}
 							alt={t("chat:browser.screenshot")}
-							style={{
-								position: "absolute",
-								top: 0,
-								left: 0,
-								width: "100%",
-								height: "100%",
-								objectFit: "contain",
-								cursor: "pointer",
-							}}
+							className="absolute top-0 left-0 w-full h-full object-contain cursor-pointer"
 							onClick={() =>
 								vscode.postMessage({
 									type: "openImage",
@@ -314,47 +278,34 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 							}
 						/>
 					) : (
-						<div
-							style={{
-								position: "absolute",
-								top: "50%",
-								left: "50%",
-								transform: "translate(-50%, -50%)",
-							}}>
-							<span
-								className="codicon codicon-globe"
-								style={{ fontSize: "80px", color: "var(--vscode-descriptionForeground)" }}
-							/>
+						<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+							<span className="codicon codicon-globe text-[80px] text-vscode-descriptionForeground" />
 						</div>
 					)}
 					{displayState.mousePosition && (
 						<BrowserCursor
-							style={{
-								position: "absolute",
-								top: `${(parseInt(mousePosition.split(",")[1]) / viewportHeight) * 100}%`,
-								left: `${(parseInt(mousePosition.split(",")[0]) / viewportWidth) * 100}%`,
-								transition: "top 0.3s ease-out, left 0.3s ease-out",
-							}}
+							className={cn(
+								"absolute",
+								// Dynamic position using arbitrary properties:
+								`[top:${(parseInt(mousePosition.split(",")[1]) / viewportHeight) * 100}%]`,
+								`[left:${(parseInt(mousePosition.split(",")[0]) / viewportWidth) * 100}%]`,
+								// Static transition classes:
+								"transition-[top,left] duration-300 ease-out",
+							)}
 						/>
 					)}
 				</div>
 
-				<div style={{ width: "100%" }}>
+				<div className="w-full">
 					<div
 						onClick={() => {
 							setConsoleLogsExpanded(!consoleLogsExpanded)
 						}}
-						style={{
-							display: "flex",
-							alignItems: "center",
-							gap: "4px",
-							width: "100%",
-							justifyContent: "flex-start",
-							cursor: "pointer",
-							padding: `9px 8px ${consoleLogsExpanded ? 0 : 8}px 8px`,
-						}}>
+						className={`flex items-center gap-1 w-full justify-start cursor-pointer px-2 ${
+							consoleLogsExpanded ? "pt-[9px] pb-0" : "py-[9px]"
+						}`}>
 						<span className={`codicon codicon-chevron-${consoleLogsExpanded ? "down" : "right"}`}></span>
-						<span style={{ fontSize: "0.8em" }}>{t("chat:browser.consoleLogs")}</span>
+						<span className="text-[0.8em]">{t("chat:browser.consoleLogs")}</span>
 					</div>
 					{consoleLogsExpanded && (
 						<CodeBlock source={displayState.consoleLogs || t("chat:browser.noNewLogs")} language="shell" />
@@ -363,23 +314,15 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 			</div>
 
 			{/* Action content with min height */}
-			<div style={{ minHeight: maxActionHeight }}>{actionContent}</div>
+			<div className={cn(maxActionHeight > 0 && `[min-height:${maxActionHeight}px]`)}>{actionContent}</div>
 
 			{/* Pagination moved to bottom */}
 			{pages.length > 1 && (
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-						padding: "8px 0px",
-						marginTop: "15px",
-						borderTop: "1px solid var(--vscode-editorGroup-border)",
-					}}>
+				<div className="flex justify-between items-center py-2 mt-[15px] border-t border-vscode-editorGroup-border">
 					<div>
 						{t("chat:browser.navigation.step", { current: currentPageIndex + 1, total: pages.length })}
 					</div>
-					<div style={{ display: "flex", gap: "4px" }}>
+					<div className="flex gap-1">
 						<VSCodeButton
 							disabled={currentPageIndex === 0 || isBrowsing}
 							onClick={() => setCurrentPageIndex((i) => i - 1)}>
@@ -426,13 +369,7 @@ const BrowserSessionRowContent = ({
 	isStreaming,
 }: BrowserSessionRowContentProps) => {
 	const { t } = useTranslation()
-	const headerStyle: React.CSSProperties = {
-		display: "flex",
-		alignItems: "center",
-		gap: "10px",
-		marginBottom: "10px",
-		wordBreak: "break-word",
-	}
+	const headerClassNames = "flex items-center gap-2.5 mb-2.5 break-words"
 
 	switch (message.type) {
 		case "say":
@@ -440,7 +377,7 @@ const BrowserSessionRowContent = ({
 				case "api_req_started":
 				case "text":
 					return (
-						<div style={{ padding: "10px 0 10px 0" }}>
+						<div className="py-2.5">
 							<ChatRowContent
 								message={message}
 								isExpanded={isExpanded(message.ts)}
@@ -476,16 +413,10 @@ const BrowserSessionRowContent = ({
 				case "browser_action_launch":
 					return (
 						<>
-							<div style={headerStyle}>
-								<span style={{ fontWeight: "bold" }}>{t("chat:browser.sessionStarted")}</span>
+							<div className={headerClassNames}>
+								<span className="font-bold">{t("chat:browser.sessionStarted")}</span>
 							</div>
-							<div
-								style={{
-									borderRadius: 3,
-									border: "1px solid var(--vscode-editorGroup-border)",
-									overflow: "hidden",
-									backgroundColor: CODE_BLOCK_BG_COLOR,
-								}}>
+							<div className="rounded-[3px] border border-vscode-editorGroup-border overflow-hidden bg-background">
 								<CodeBlock source={message.text} language="shell" />
 							</div>
 						</>
@@ -526,26 +457,11 @@ const BrowserActionBox = ({
 		}
 	}
 	return (
-		<div style={{ padding: "10px 0 0 0" }}>
-			<div
-				style={{
-					borderRadius: 3,
-					backgroundColor: CODE_BLOCK_BG_COLOR,
-					overflow: "hidden",
-					border: "1px solid var(--vscode-editorGroup-border)",
-				}}>
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						padding: "9px 10px",
-					}}>
-					<span
-						style={{
-							whiteSpace: "normal",
-							wordBreak: "break-word",
-						}}>
-						<span style={{ fontWeight: 500 }}>{t("chat:browser.actions.title")}</span>
+		<div className="pt-2.5">
+			<div className="rounded-[3px] overflow-hidden border border-vscode-editorGroup-border bg-background">
+				<div className="flex items-center p-[9px_10px]">
+					<span className="whitespace-normal break-words">
+						<span className="font-medium">{t("chat:browser.actions.title")}</span>
 						{getBrowserActionText(action, coordinate, text)}
 					</span>
 				</div>
@@ -554,7 +470,12 @@ const BrowserActionBox = ({
 	)
 }
 
-const BrowserCursor: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
+interface BrowserCursorProps {
+	style?: React.CSSProperties
+	className?: string
+}
+
+const BrowserCursor: React.FC<BrowserCursorProps> = ({ style, className }) => {
 	const { t } = useTranslation()
 	// (can't use svgs in vsc extensions)
 	const cursorBase64 =
@@ -563,13 +484,16 @@ const BrowserCursor: React.FC<{ style?: React.CSSProperties }> = ({ style }) =>
 	return (
 		<img
 			src={cursorBase64}
-			style={{
-				width: "17px",
-				height: "22px",
-				...style,
-			}}
 			alt={t("chat:browser.cursor")}
-			aria-label={t("chat:browser.cursor")}
+			title={t("chat:browser.cursor")}
+			className={cn(
+				className,
+				"w-[17px] h-[24px]",
+				"translate-x-[-2px] translate-y-[-2px]", // transform
+				"pointer-events-none",
+				"z-[1000]",
+			)}
+			style={style} // Keep passed style prop for overrides
 		/>
 	)
 }
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index efc720ba76..0aad4d321f 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -8,6 +8,7 @@ import { ClineApiReqInfo, ClineAskUseMcpServer, ClineMessage, ClineSayTool } fro
 import { COMMAND_OUTPUT_STRING } from "@roo/shared/combineCommandSequences"
 import { safeJsonParse } from "@roo/shared/safeJsonParse"
 
+import { cn } from "@/lib/utils"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { findMatchingResourceOrTemplate } from "@src/utils/mcp"
@@ -15,7 +16,7 @@ import { vscode } from "@src/utils/vscode"
 import { Button } from "@src/components/ui"
 
 import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
+import CodeBlock from "../common/CodeBlock"
 import MarkdownBlock from "../common/MarkdownBlock"
 import { ReasoningBlock } from "./ReasoningBlock"
 import Thumbnails from "../common/Thumbnails"
@@ -118,37 +119,26 @@ export const ChatRowContent = ({
 
 	const type = message.type === "ask" ? message.ask : message.say
 
-	const normalColor = "var(--vscode-foreground)"
-	const errorColor = "var(--vscode-errorForeground)"
-	const successColor = "var(--vscode-charts-green)"
-	const cancelledColor = "var(--vscode-descriptionForeground)"
-
-	const [icon, title] = useMemo(() => {
+	const [icon, title] = useMemo((): [React.ReactNode | null, React.ReactNode | null] => {
 		switch (type) {
 			case "error":
 				return [
-					<span
-						className="codicon codicon-error"
-						style={{ color: errorColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: errorColor, fontWeight: "bold" }}>{t("chat:error")}</span>,
+					<span className="codicon codicon-error text-vscode-errorForeground mb-[-1.5px]" />,
+					<span className="font-bold text-vscode-errorForeground">{t("chat:error")}</span>,
 				]
 			case "mistake_limit_reached":
 				return [
-					<span
-						className="codicon codicon-error"
-						style={{ color: errorColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: errorColor, fontWeight: "bold" }}>{t("chat:troubleMessage")}</span>,
+					<span className="codicon codicon-error text-vscode-errorForeground mb-[-1.5px]" />, // Self-closing
+					<span className="font-bold text-vscode-errorForeground">{t("chat:troubleMessage")}</span>,
 				]
 			case "command":
 				return [
 					isCommandExecuting ? (
 						<ProgressIndicator />
 					) : (
-						<span
-							className="codicon codicon-terminal"
-							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
+						<span className="codicon codicon-terminal text-vscode-foreground mb-[-1.5px]" /> // Self-closing
 					),
-					<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:runCommand.title")}:</span>,
+					<span className="font-bold text-vscode-foreground">{t("chat:runCommand.title")}:</span>,
 				]
 			case "use_mcp_server":
 				const mcpServerUse = safeJsonParse<ClineAskUseMcpServer>(message.text)
@@ -159,11 +149,9 @@ export const ChatRowContent = ({
 					isMcpServerResponding ? (
 						<ProgressIndicator />
 					) : (
-						<span
-							className="codicon codicon-server"
-							style={{ color: normalColor, marginBottom: "-1.5px" }}></span>
+						<span className="codicon codicon-server text-vscode-foreground mb-[-1.5px]" /> // Self-closing
 					),
-					<span style={{ color: normalColor, fontWeight: "bold" }}>
+					<span className="font-bold text-vscode-foreground">
 						{mcpServerUse.type === "use_mcp_tool"
 							? t("chat:mcp.wantsToUseTool", { serverName: mcpServerUse.serverName })
 							: t("chat:mcp.wantsToAccessResource", { serverName: mcpServerUse.serverName })}
@@ -171,88 +159,59 @@ export const ChatRowContent = ({
 				]
 			case "completion_result":
 				return [
-					<span
-						className="codicon codicon-check"
-						style={{ color: successColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: successColor, fontWeight: "bold" }}>{t("chat:taskCompleted")}</span>,
+					<span className="codicon codicon-check text-vscode-charts-green mb-[-1.5px]" />, // Self-closing
+					<span className="font-bold text-vscode-charts-green">{t("chat:taskCompleted")}</span>,
 				]
 			case "api_req_retry_delayed":
-				return []
+				return [null, null] // Explicitly return [null, null] for this case
 			case "api_req_started":
-				const getIconSpan = (iconName: string, color: string) => (
-					<div
-						style={{
-							width: 16,
-							height: 16,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-						}}>
-						<span
-							className={`codicon codicon-${iconName}`}
-							style={{ color, fontSize: 16, marginBottom: "-1.5px" }}
-						/>
+				const getIconSpan = (iconName: string, colorClassName: string) => (
+					<div className="w-4 h-4 flex items-center justify-center">
+						<span className={`codicon codicon-${iconName} ${colorClassName} text-[16px] mb-[-1.5px]`} />
 					</div>
 				)
 				return [
 					apiReqCancelReason !== null && apiReqCancelReason !== undefined ? (
 						apiReqCancelReason === "user_cancelled" ? (
-							getIconSpan("error", cancelledColor)
+							getIconSpan("error", "text-vscode-descriptionForeground")
 						) : (
-							getIconSpan("error", errorColor)
+							getIconSpan("error", "text-vscode-errorForeground")
 						)
 					) : cost !== null && cost !== undefined ? (
-						getIconSpan("check", successColor)
+						getIconSpan("check", "text-vscode-charts-green")
 					) : apiRequestFailedMessage ? (
-						getIconSpan("error", errorColor)
+						getIconSpan("error", "text-vscode-errorForeground")
 					) : (
 						<ProgressIndicator />
 					),
 					apiReqCancelReason !== null && apiReqCancelReason !== undefined ? (
 						apiReqCancelReason === "user_cancelled" ? (
-							<span style={{ color: normalColor, fontWeight: "bold" }}>
-								{t("chat:apiRequest.cancelled")}
-							</span>
+							<span className="font-bold text-vscode-foreground">{t("chat:apiRequest.cancelled")}</span>
 						) : (
-							<span style={{ color: errorColor, fontWeight: "bold" }}>
+							<span className="font-bold text-vscode-errorForeground">
 								{t("chat:apiRequest.streamingFailed")}
 							</span>
 						)
 					) : cost !== null && cost !== undefined ? (
-						<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:apiRequest.title")}</span>
+						<span className="font-bold text-vscode-foreground">{t("chat:apiRequest.title")}</span>
 					) : apiRequestFailedMessage ? (
-						<span style={{ color: errorColor, fontWeight: "bold" }}>{t("chat:apiRequest.failed")}</span>
+						<span className="font-bold text-vscode-errorForeground">{t("chat:apiRequest.failed")}</span>
 					) : (
-						<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:apiRequest.streaming")}</span>
+						<span className="font-bold text-vscode-foreground">{t("chat:apiRequest.streaming")}</span>
 					),
 				]
 			case "followup":
 				return [
-					<span
-						className="codicon codicon-question"
-						style={{ color: normalColor, marginBottom: "-1.5px" }}
-					/>,
-					<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:questions.hasQuestion")}</span>,
+					<span className="codicon codicon-question text-vscode-foreground mb-[-1.5px]" />,
+					<span className="font-bold text-vscode-foreground">{t("chat:questions.hasQuestion")}</span>,
 				]
 			default:
-				return [null, null]
+				return [null, null] // Explicitly return [null, null] for default case
 		}
 	}, [type, isCommandExecuting, message, isMcpServerResponding, apiReqCancelReason, cost, apiRequestFailedMessage, t])
 
-	const headerStyle: React.CSSProperties = {
-		display: "flex",
-		alignItems: "center",
-		gap: "10px",
-		marginBottom: "10px",
-		wordBreak: "break-word",
-	}
-
-	const pStyle: React.CSSProperties = {
-		margin: 0,
-		whiteSpace: "pre-wrap",
-		wordBreak: "break-word",
-		overflowWrap: "anywhere",
-	}
+	const headerClasses = "flex items-center gap-[10px] mb-[10px] break-words"
+	const pClasses = "m-0 whitespace-pre-wrap break-words overflow-anywhere"
 
 	const tool = useMemo(
 		() => (message.ask === "tool" ? safeJsonParse<ClineSayTool>(message.text) : null),
@@ -268,9 +227,7 @@ export const ChatRowContent = ({
 
 	if (tool) {
 		const toolIcon = (name: string) => (
-			<span
-				className={`codicon codicon-${name}`}
-				style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
+			<span className={`codicon codicon-${name} text-vscode-foreground mb-[-1.5px]`} /> // Converted to Tailwind & self-closing
 		)
 
 		switch (tool.tool) {
@@ -278,9 +235,9 @@ export const ChatRowContent = ({
 			case "appliedDiff":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon(tool.tool === "appliedDiff" ? "diff" : "edit")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{tool.isOutsideWorkspace
 									? t("chat:fileOperations.wantsToEditOutsideWorkspace")
 									: t("chat:fileOperations.wantsToEdit")}
@@ -299,9 +256,9 @@ export const ChatRowContent = ({
 			case "insertContent":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("insert")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{tool.isOutsideWorkspace
 									? t("chat:fileOperations.wantsToEditOutsideWorkspace")
 									: tool.lineNumber === 0
@@ -324,9 +281,9 @@ export const ChatRowContent = ({
 			case "searchAndReplace":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("replace")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask"
 									? t("chat:fileOperations.wantsToSearchReplace")
 									: t("chat:fileOperations.didSearchReplace")}
@@ -345,9 +302,9 @@ export const ChatRowContent = ({
 			case "newFileCreated":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("new-file")}
-							<span style={{ fontWeight: "bold" }}>{t("chat:fileOperations.wantsToCreate")}</span>
+							<span className="font-bold">{t("chat:fileOperations.wantsToCreate")}</span>
 						</div>
 						<CodeAccordian
 							isLoading={message.partial}
@@ -361,9 +318,9 @@ export const ChatRowContent = ({
 			case "readFile":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("file-code")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask"
 									? tool.isOutsideWorkspace
 										? t("chat:fileOperations.wantsToReadOutsideWorkspace")
@@ -371,45 +328,19 @@ export const ChatRowContent = ({
 									: t("chat:fileOperations.didRead")}
 							</span>
 						</div>
-						<div
-							style={{
-								borderRadius: 3,
-								backgroundColor: CODE_BLOCK_BG_COLOR,
-								overflow: "hidden",
-								border: "1px solid var(--vscode-editorGroup-border)",
-							}}>
+						<div className="rounded-[3px] overflow-hidden border border-vscode-editorGroup-border bg-vscode-code-block-background">
 							<div
-								style={{
-									color: "var(--vscode-descriptionForeground)",
-									display: "flex",
-									alignItems: "center",
-									padding: "9px 10px",
-									cursor: "pointer",
-									userSelect: "none",
-									WebkitUserSelect: "none",
-									MozUserSelect: "none",
-									msUserSelect: "none",
-								}}
+								className="text-vscode-descriptionForeground flex items-center p-[9px_10px] cursor-pointer select-none"
 								onClick={() => {
 									vscode.postMessage({ type: "openFile", text: tool.content })
 								}}>
 								{tool.path?.startsWith(".") && <span>.</span>}
-								<span
-									style={{
-										whiteSpace: "nowrap",
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										marginRight: "8px",
-										direction: "rtl",
-										textAlign: "left",
-									}}>
+								<span className="whitespace-nowrap overflow-hidden text-ellipsis mr-2 rtl text-left">
 									{removeLeadingNonAlphanumeric(tool.path ?? "") + "\u200E"}
 									{tool.reason}
 								</span>
-								<div style={{ flexGrow: 1 }}></div>
-								<span
-									className={`codicon codicon-link-external`}
-									style={{ fontSize: 13.5, margin: "1px 0" }}></span>
+								<div className="flex-grow"></div>
+								<span className="codicon codicon-link-external text-[13.5px] m-[1px_0]"></span>
 							</div>
 						</div>
 					</>
@@ -417,9 +348,9 @@ export const ChatRowContent = ({
 			case "fetchInstructions":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("file-code")}
-							<span style={{ fontWeight: "bold" }}>{t("chat:instructions.wantsToFetch")}</span>
+							<span className="font-bold">{t("chat:instructions.wantsToFetch")}</span>
 						</div>
 						<CodeAccordian
 							isLoading={message.partial}
@@ -432,9 +363,9 @@ export const ChatRowContent = ({
 			case "listFilesTopLevel":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("folder-opened")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask"
 									? t("chat:directoryOperations.wantsToViewTopLevel")
 									: t("chat:directoryOperations.didViewTopLevel")}
@@ -452,9 +383,9 @@ export const ChatRowContent = ({
 			case "listFilesRecursive":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("folder-opened")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask"
 									? t("chat:directoryOperations.wantsToViewRecursive")
 									: t("chat:directoryOperations.didViewRecursive")}
@@ -472,9 +403,9 @@ export const ChatRowContent = ({
 			case "listCodeDefinitionNames":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("file-code")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask"
 									? t("chat:directoryOperations.wantsToViewDefinitions")
 									: t("chat:directoryOperations.didViewDefinitions")}
@@ -491,9 +422,9 @@ export const ChatRowContent = ({
 			case "searchFiles":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("search")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask" ? (
 									<Trans
 										i18nKey="chat:directoryOperations.wantsToSearch"
@@ -521,9 +452,9 @@ export const ChatRowContent = ({
 			case "switchMode":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("symbol-enum")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								{message.type === "ask" ? (
 									<>
 										{tool.reason ? (
@@ -564,9 +495,9 @@ export const ChatRowContent = ({
 			case "newTask":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("tasklist")}
-							<span style={{ fontWeight: "bold" }}>
+							<span className="font-bold">
 								<Trans
 									i18nKey="chat:subtasks.wantsToCreate"
 									components={{ code: <code>{tool.mode}</code> }}
@@ -607,9 +538,9 @@ export const ChatRowContent = ({
 			case "finishTask":
 				return (
 					<>
-						<div style={headerStyle}>
+						<div className={headerClasses}>
 							{toolIcon("check-all")}
-							<span style={{ fontWeight: "bold" }}>{t("chat:subtasks.wantsToFinish")}</span>
+							<span className="font-bold">{t("chat:subtasks.wantsToFinish")}</span>
 						</div>
 						<div
 							style={{
@@ -788,22 +719,16 @@ export const ChatRowContent = ({
 					return (
 						<>
 							<div
-								style={{
-									...headerStyle,
-									marginBottom:
-										((cost === null || cost === undefined) && apiRequestFailedMessage) ||
+								className={cn(
+									headerClasses,
+									"justify-between cursor-pointer select-none",
+									((cost === null || cost === undefined) && apiRequestFailedMessage) ||
 										apiReqStreamingFailedMessage
-											? 10
-											: 0,
-									justifyContent: "space-between",
-									cursor: "pointer",
-									userSelect: "none",
-									WebkitUserSelect: "none",
-									MozUserSelect: "none",
-									msUserSelect: "none",
-								}}
+										? "mb-[10px]"
+										: "mb-0",
+								)}
 								onClick={onToggleExpand}>
-								<div style={{ display: "flex", alignItems: "center", gap: "10px", flexGrow: 1 }}>
+								<div className="flex items-center gap-[10px] flex-grow">
 									{icon}
 									{title}
 									<VSCodeBadge
@@ -816,7 +741,7 @@ export const ChatRowContent = ({
 							{(((cost === null || cost === undefined) && apiRequestFailedMessage) ||
 								apiReqStreamingFailedMessage) && (
 								<>
-									<p style={{ ...pStyle, color: "var(--vscode-errorForeground)" }}>
+									<p className={cn(pClasses, "text-vscode-errorForeground")}>
 										{apiRequestFailedMessage || apiReqStreamingFailedMessage}
 										{apiRequestFailedMessage?.toLowerCase().includes("powershell") && (
 											<>
@@ -898,22 +823,22 @@ export const ChatRowContent = ({
 					return (
 						<>
 							{title && (
-								<div style={headerStyle}>
+								<div className={headerClasses}>
 									{icon}
 									{title}
 								</div>
 							)}
-							<p style={{ ...pStyle, color: "var(--vscode-errorForeground)" }}>{message.text}</p>
+							<p className={cn(pClasses, "text-vscode-errorForeground")}>{message.text}</p>
 						</>
 					)
 				case "completion_result":
 					return (
 						<>
-							<div style={headerStyle}>
+							<div className={headerClasses}>
 								{icon}
 								{title}
 							</div>
-							<div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
+							<div className="text-vscode-charts-green pt-[10px]">
 								<Markdown markdown={message.text} />
 							</div>
 						</>
@@ -923,16 +848,8 @@ export const ChatRowContent = ({
 				case "mcp_server_response":
 					return (
 						<>
-							<div style={{ paddingTop: 0 }}>
-								<div
-									style={{
-										marginBottom: "4px",
-										opacity: 0.8,
-										fontSize: "12px",
-										textTransform: "uppercase",
-									}}>
-									{t("chat:response")}
-								</div>
+							<div className="pt-0">
+								<div className="mb-1 opacity-80 text-xs uppercase">{t("chat:response")}</div>
 								<CodeAccordian
 									code={message.text}
 									language="json"
@@ -955,12 +872,12 @@ export const ChatRowContent = ({
 					return (
 						<>
 							{title && (
-								<div style={headerStyle}>
+								<div className={headerClasses}>
 									{icon}
 									{title}
 								</div>
 							)}
-							<div style={{ paddingTop: 10 }}>
+							<div className="pt-[10px]">
 								<Markdown markdown={message.text} partial={message.partial} />
 							</div>
 						</>
@@ -971,17 +888,17 @@ export const ChatRowContent = ({
 				case "mistake_limit_reached":
 					return (
 						<>
-							<div style={headerStyle}>
+							<div className={headerClasses}>
 								{icon}
 								{title}
 							</div>
-							<p style={{ ...pStyle, color: "var(--vscode-errorForeground)" }}>{message.text}</p>
+							<p className={cn(pClasses, "text-vscode-errorForeground")}>{message.text}</p>
 						</>
 					)
 				case "command":
 					return (
 						<>
-							<div style={headerStyle}>
+							<div className={headerClasses}>
 								{icon}
 								{title}
 							</div>
@@ -999,17 +916,11 @@ export const ChatRowContent = ({
 
 					return (
 						<>
-							<div style={headerStyle}>
+							<div className={headerClasses}>
 								{icon}
 								{title}
 							</div>
-							<div
-								style={{
-									background: "var(--vscode-textCodeBlock-background)",
-									borderRadius: "3px",
-									padding: "8px 10px",
-									marginTop: "8px",
-								}}>
+							<div className="bg-vscode-textCodeBlock-background rounded-[3px] p-[8px_10px] mt-2">
 								{useMcpServer.type === "access_mcp_resource" && (
 									<McpResourceRow
 										item={{
@@ -1048,14 +959,8 @@ export const ChatRowContent = ({
 											/>
 										</div>
 										{useMcpServer.arguments && useMcpServer.arguments !== "{}" && (
-											<div style={{ marginTop: "8px" }}>
-												<div
-													style={{
-														marginBottom: "4px",
-														opacity: 0.8,
-														fontSize: "12px",
-														textTransform: "uppercase",
-													}}>
+											<div className="mt-2">
+												<div className="mb-1 opacity-80 text-xs uppercase">
 													{t("chat:arguments")}
 												</div>
 												<CodeAccordian
@@ -1075,11 +980,11 @@ export const ChatRowContent = ({
 					if (message.text) {
 						return (
 							<div>
-								<div style={headerStyle}>
+								<div className={headerClasses}>
 									{icon}
 									{title}
 								</div>
-								<div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
+								<div className="text-vscode-charts-green pt-[10px]">
 									<Markdown markdown={message.text} partial={message.partial} />
 								</div>
 							</div>
@@ -1091,15 +996,15 @@ export const ChatRowContent = ({
 					return (
 						<>
 							{title && (
-								<div style={headerStyle}>
+								<div className={headerClasses}>
 									{icon}
 									{title}
 								</div>
 							)}
-							<div style={{ paddingTop: 10, paddingBottom: 15 }}>
-								<Markdown
-									markdown={message.partial === true ? message?.text : followUpData?.question}
-								/>
+							<div className="pt-[10px] pb-[15px]">
+								<p className={pClasses}>
+									{message.partial === true ? message?.text : followUpData?.question}
+								</p>
 							</div>
 							<FollowUpSuggest
 								suggestions={followUpData?.suggest}
diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index c2fb21353b..44ed28e8f9 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/webview-ui/src/components/chat/ChatView.tsx
@@ -40,6 +40,7 @@ import TaskHeader from "./TaskHeader"
 import AutoApproveMenu from "./AutoApproveMenu"
 import SystemPromptWarning from "./SystemPromptWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
+import { cn } from "@/lib/utils"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -1248,17 +1249,24 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 						</div>
 					)}
 					<div
-						className={` w-full flex flex-col gap-4 m-auto ${isExpanded && tasks.length > 0 ? "mt-0" : ""} px-3.5 min-[370px]:px-10 pt-5 transition-all duration-300`}>
+						className={cn(
+							"w-full flex flex-col gap-4 m-auto px-3.5 min-[370px]:px-10 pt-5 transition-all duration-300",
+							isExpanded && tasks.length > 0 ? "mt-0" : "",
+						)}>
 						<RooHero />
 						{telemetrySetting === "unset" && <TelemetryBanner />}
 						{/* Show the task history preview if expanded and tasks exist */}
 						{taskHistory.length > 0 && isExpanded && <HistoryPreview />}
-						<p className="ext-vscode-editor-foreground leading-tight font-vscode text-center">
+						<p className="text-vscode-editor-foreground leading-tight font-vscode-font-family text-center">
 							<Trans
 								i18nKey="chat:about"
 								components={{
 									DocsLink: (
-										<a href="https://docs.roocode.com/" target="_blank" rel="noopener noreferrer">
+										<a
+											href="https://docs.roocode.com/"
+											target="_blank"
+											rel="noopener noreferrer"
+											className="text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground underline">
 											the docs
 										</a>
 									),
@@ -1320,7 +1328,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					{showScrollToBottom ? (
 						<div className="flex px-[15px] pt-[10px]">
 							<div
-								className="bg-[color-mix(in_srgb,_var(--vscode-toolbar-hoverBackground)_55%,_transparent)] rounded-[3px] overflow-hidden cursor-pointer flex justify-center items-center flex-1 h-[25px] hover:bg-[color-mix(in_srgb,_var(--vscode-toolbar-hoverBackground)_90%,_transparent)] active:bg-[color-mix(in_srgb,_var(--vscode-toolbar-hoverBackground)_70%,_transparent)]"
+								className="bg-vscode-toolbar-hoverBackground/55 rounded-[3px] overflow-hidden cursor-pointer flex justify-center items-center flex-1 h-[25px] hover:bg-vscode-toolbar-hoverBackground/90 active:bg-vscode-toolbar-hoverBackground/70"
 								onClick={() => {
 									scrollToBottomSmooth()
 									disableAutoScrollRef.current = false
diff --git a/webview-ui/src/components/chat/CommandExecutionError.tsx b/webview-ui/src/components/chat/CommandExecutionError.tsx
index 3c8c6273c1..b049877de0 100644
--- a/webview-ui/src/components/chat/CommandExecutionError.tsx
+++ b/webview-ui/src/components/chat/CommandExecutionError.tsx
@@ -27,10 +27,7 @@ export const CommandExecutionError = () => {
 						}}
 					/>
 				</div>
-				<a
-					href="http://docs.roocode.com/troubleshooting/shell-integration/"
-					className="underline"
-					style={{ color: "inherit" }}>
+				<a href="http://docs.roocode.com/troubleshooting/shell-integration/" className="underline text-inherit">
 					{t("chat:shellIntegration.troubleshooting")}
 				</a>
 			</div>
diff --git a/webview-ui/src/components/chat/ContextMenu.tsx b/webview-ui/src/components/chat/ContextMenu.tsx
index 27d53803a8..ddb11ccf0d 100644
--- a/webview-ui/src/components/chat/ContextMenu.tsx
+++ b/webview-ui/src/components/chat/ContextMenu.tsx
@@ -68,18 +68,10 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		switch (option.type) {
 			case ContextMenuOptionType.Mode:
 				return (
-					<div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
-						<span style={{ lineHeight: "1.2" }}>{option.label}</span>
+					<div className="flex flex-col gap-0.5">
+						<span className="leading-tight">{option.label}</span>
 						{option.description && (
-							<span
-								style={{
-									opacity: 0.5,
-									fontSize: "0.9em",
-									lineHeight: "1.2",
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-								}}>
+							<span className="opacity-50 text-[0.9em] leading-tight whitespace-nowrap overflow-hidden text-ellipsis">
 								{option.description}
 							</span>
 						)}
@@ -96,17 +88,9 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 			case ContextMenuOptionType.Git:
 				if (option.value) {
 					return (
-						<div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
-							<span style={{ lineHeight: "1.2" }}>{option.label}</span>
-							<span
-								style={{
-									fontSize: "0.85em",
-									opacity: 0.7,
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									lineHeight: "1.2",
-								}}>
+						<div className="flex flex-col">
+							<span className="leading-tight">{option.label}</span>
+							<span className="text-[0.85em] opacity-70 whitespace-nowrap overflow-hidden text-ellipsis leading-tight">
 								{option.description}
 							</span>
 						</div>
@@ -124,29 +108,9 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 					const filename = pathList.at(-1)
 					const folderPath = pathList.slice(0, -1).join("/")
 					return (
-						<div
-							style={{
-								flex: 1,
-								overflow: "hidden",
-								display: "flex",
-								gap: "0.5em",
-								whiteSpace: "nowrap",
-								alignItems: "center",
-								justifyContent: "space-between",
-								textAlign: "left",
-							}}>
+						<div className="flex-1 overflow-hidden flex gap-[0.5em] whitespace-nowrap items-center justify-between text-left">
 							<span>{filename}</span>
-							<span
-								style={{
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									direction: "rtl",
-									textAlign: "right",
-									flex: 1,
-									opacity: 0.75,
-									fontSize: "0.75em",
-								}}>
+							<span className="whitespace-nowrap overflow-hidden text-ellipsis rtl text-right flex-1 opacity-75 text-[0.75em]">
 								{folderPath}
 							</span>
 						</div>
@@ -197,68 +161,32 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 
 	return (
 		<div
-			style={{
-				position: "absolute",
-				bottom: "calc(100% - 10px)",
-				left: 15,
-				right: 15,
-				overflowX: "hidden",
-			}}
+			className="absolute bottom-[calc(100%-10px)] left-[15px] right-[15px] overflow-x-hidden"
 			onMouseDown={onMouseDown}>
 			<div
 				ref={menuRef}
-				style={{
-					backgroundColor: "var(--vscode-dropdown-background)",
-					border: "1px solid var(--vscode-editorGroup-border)",
-					borderRadius: "3px",
-					boxShadow: "0 4px 10px rgba(0, 0, 0, 0.25)",
-					zIndex: 1000,
-					display: "flex",
-					flexDirection: "column",
-					maxHeight: "200px",
-					overflowY: "auto",
-				}}>
+				className="bg-vscode-dropdown-background border border-vscode-editorGroup-border rounded-[3px] shadow-[0_4px_10px_rgba(0,0,0,0.25)] z-[1000] flex flex-col max-h-[200px] overflow-y-auto">
 				{filteredOptions && filteredOptions.length > 0 ? (
 					filteredOptions.map((option, index) => (
 						<div
 							key={`${option.type}-${option.value || index}`}
 							onClick={() => isOptionSelectable(option) && onSelect(option.type, option.value)}
-							style={{
-								padding: "4px 6px",
-								cursor: isOptionSelectable(option) ? "pointer" : "default",
-								color: "var(--vscode-dropdown-foreground)",
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "space-between",
-								...(index === selectedIndex && isOptionSelectable(option)
-									? {
-											backgroundColor: "var(--vscode-list-activeSelectionBackground)",
-											color: "var(--vscode-list-activeSelectionForeground)",
-										}
-									: {}),
-							}}
+							className={`p-[4px_6px] text-vscode-dropdown-foreground flex items-center justify-between ${
+								isOptionSelectable(option) ? "cursor-pointer" : "cursor-default"
+							} ${
+								index === selectedIndex && isOptionSelectable(option)
+									? "bg-vscode-list-activeSelectionBackground text-vscode-list-activeSelectionForeground"
+									: ""
+							}`}
 							onMouseEnter={() => isOptionSelectable(option) && setSelectedIndex(index)}>
-							<div
-								style={{
-									display: "flex",
-									alignItems: "center",
-									flex: 1,
-									minWidth: 0,
-									overflow: "hidden",
-									paddingTop: 0,
-								}}>
+							<div className="flex items-center flex-1 min-w-0 overflow-hidden pt-0">
 								{(option.type === ContextMenuOptionType.File ||
 									option.type === ContextMenuOptionType.Folder ||
 									option.type === ContextMenuOptionType.OpenedFile) && (
 									<img
 										src={getMaterialIconForOption(option)}
 										alt="Mode"
-										style={{
-											marginRight: "6px",
-											flexShrink: 0,
-											width: "16px",
-											height: "16px",
-										}}
+										className="mr-[6px] flex-shrink-0 w-4 h-4"
 									/>
 								)}
 								{option.type !== ContextMenuOptionType.Mode &&
@@ -267,13 +195,9 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 									option.type !== ContextMenuOptionType.OpenedFile &&
 									getIconForOption(option) && (
 										<i
-											className={`codicon codicon-${getIconForOption(option)}`}
-											style={{
-												marginRight: "6px",
-												flexShrink: 0,
-												fontSize: "14px",
-												marginTop: 0,
-											}}
+											className={`codicon codicon-${getIconForOption(
+												option,
+											)} mr-[6px] flex-shrink-0 text-sm mt-0`}
 										/>
 									)}
 								{renderOptionContent(option)}
@@ -282,23 +206,12 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 								option.type === ContextMenuOptionType.Folder ||
 								option.type === ContextMenuOptionType.Git) &&
 								!option.value && (
-									<i
-										className="codicon codicon-chevron-right"
-										style={{ fontSize: "10px", flexShrink: 0, marginLeft: 8 }}
-									/>
+									<i className="codicon codicon-chevron-right text-[10px] flex-shrink-0 ml-2" />
 								)}
 						</div>
 					))
 				) : (
-					<div
-						style={{
-							padding: "4px",
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							color: "var(--vscode-foreground)",
-							opacity: 0.7,
-						}}>
+					<div className="p-1 flex items-center justify-center text-vscode-foreground opacity-70">
 						<span>No results found</span>
 					</div>
 				)}
@@ -306,5 +219,4 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		</div>
 	)
 }
-
 export default ContextMenu
diff --git a/webview-ui/src/components/chat/IconButton.tsx b/webview-ui/src/components/chat/IconButton.tsx
index 80f59ee74b..31f47d844f 100644
--- a/webview-ui/src/components/chat/IconButton.tsx
+++ b/webview-ui/src/components/chat/IconButton.tsx
@@ -38,9 +38,9 @@ export const IconButton: React.FC<IconButtonProps> = ({
 		<button
 			aria-label={title}
 			title={title}
-			className={buttonClasses}
+			className={`${buttonClasses} text-[16.5px]`}
 			onClick={!disabled ? onClick : undefined}
-			style={{ fontSize: 16.5, ...style }}
+			style={style}
 			{...props}>
 			<span className={iconClasses} />
 		</button>
diff --git a/webview-ui/src/components/chat/Markdown.tsx b/webview-ui/src/components/chat/Markdown.tsx
index a209ce8723..a9bb790d88 100644
--- a/webview-ui/src/components/chat/Markdown.tsx
+++ b/webview-ui/src/components/chat/Markdown.tsx
@@ -1,12 +1,14 @@
 import { memo, useState } from "react"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 
+import { cn } from "@/lib/utils"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 
 import MarkdownBlock from "../common/MarkdownBlock"
 
 export const Markdown = memo(({ markdown, partial }: { markdown?: string; partial?: boolean }) => {
 	const [isHovering, setIsHovering] = useState(false)
+	const [copySuccess, setCopySuccess] = useState(false)
 
 	// Shorter feedback duration for copy button flash.
 	const { copyWithFeedback } = useCopyToClipboard(200)
@@ -16,43 +18,25 @@ export const Markdown = memo(({ markdown, partial }: { markdown?: string; partia
 	}
 
 	return (
-		<div
-			onMouseEnter={() => setIsHovering(true)}
-			onMouseLeave={() => setIsHovering(false)}
-			style={{ position: "relative" }}>
-			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere", marginBottom: -15, marginTop: -15 }}>
+		<div onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} className="relative">
+			<div className="break-words overflow-wrap-anywhere mb-[-15px] mt-[-15px]">
 				<MarkdownBlock markdown={markdown} />
 			</div>
 			{markdown && !partial && isHovering && (
-				<div
-					style={{
-						position: "absolute",
-						bottom: "-4px",
-						right: "8px",
-						opacity: 0,
-						animation: "fadeIn 0.2s ease-in-out forwards",
-						borderRadius: "4px",
-					}}>
-					<style>{`@keyframes fadeIn { from { opacity: 0; } to { opacity: 1.0; } }`}</style>
+				<div className="absolute bottom-[-4px] right-2 opacity-0 rounded animate-fadeIn duration-200 ease-in-out forwards">
 					<VSCodeButton
-						className="copy-button"
+						className={cn(
+							"copy-button h-6 border-none bg-vscode-editor-background transition-colors duration-200 ease-in-out",
+							copySuccess && "bg-vscode-button-background",
+						)}
 						appearance="icon"
-						style={{
-							height: "24px",
-							border: "none",
-							background: "var(--vscode-editor-background)",
-							transition: "background 0.2s ease-in-out",
-						}}
 						onClick={async () => {
 							const success = await copyWithFeedback(markdown)
 							if (success) {
-								const button = document.activeElement as HTMLElement
-								if (button) {
-									button.style.background = "var(--vscode-button-background)"
-									setTimeout(() => {
-										button.style.background = ""
-									}, 200)
-								}
+								setCopySuccess(true)
+								setTimeout(() => {
+									setCopySuccess(false)
+								}, 200)
 							}
 						}}
 						title="Copy as markdown">
diff --git a/webview-ui/src/components/chat/ProgressIndicator.tsx b/webview-ui/src/components/chat/ProgressIndicator.tsx
index da35c196e1..44d6c9dca1 100644
--- a/webview-ui/src/components/chat/ProgressIndicator.tsx
+++ b/webview-ui/src/components/chat/ProgressIndicator.tsx
@@ -1,15 +1,8 @@
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 
 export const ProgressIndicator = () => (
-	<div
-		style={{
-			width: "16px",
-			height: "16px",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-		}}>
-		<div style={{ transform: "scale(0.55)", transformOrigin: "center" }}>
+	<div className="w-4 h-4 flex items-center justify-center">
+		<div className="scale-[.55] origin-center">
 			<VSCodeProgressRing />
 		</div>
 	</div>
diff --git a/webview-ui/src/components/common/CodeAccordian.tsx b/webview-ui/src/components/common/CodeAccordian.tsx
index e1ea77826e..0fe39dd239 100644
--- a/webview-ui/src/components/common/CodeAccordian.tsx
+++ b/webview-ui/src/components/common/CodeAccordian.tsx
@@ -1,6 +1,7 @@
 import { memo, useMemo } from "react"
 import { getLanguageFromPath } from "@src/utils/getLanguageFromPath"
-import CodeBlock, { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
+import { cn } from "@/lib/utils"
+import CodeBlock from "./CodeBlock"
 import { ToolProgressStatus } from "@roo/shared/ExtensionMessage"
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
 
@@ -46,64 +47,31 @@ const CodeAccordian = ({
 	)
 
 	return (
-		<div
-			style={{
-				borderRadius: 3,
-				backgroundColor: CODE_BLOCK_BG_COLOR,
-				overflow: "hidden", // This ensures the inner scrollable area doesn't overflow the rounded corners
-				border: "1px solid var(--vscode-editorGroup-border)",
-			}}>
+		<div className="rounded-[3px] overflow-hidden border border-vscode-editorGroup-border bg-vscode-code-block-background">
 			{(path || isFeedback || isConsoleLogs) && (
 				<div
-					style={{
-						color: "var(--vscode-descriptionForeground)",
-						display: "flex",
-						alignItems: "center",
-						padding: "9px 10px",
-						cursor: isLoading ? "wait" : "pointer",
-						opacity: isLoading ? 0.7 : 1,
-						// pointerEvents: isLoading ? "none" : "auto",
-						userSelect: "none",
-						WebkitUserSelect: "none",
-						MozUserSelect: "none",
-						msUserSelect: "none",
-					}}
-					className={`${isLoading ? "animate-pulse" : ""}`}
+					className={cn(
+						"text-vscode-descriptionForeground flex items-center p-[9px_10px] select-none",
+						isLoading ? "cursor-wait opacity-70 animate-pulse" : "cursor-pointer opacity-100",
+					)}
 					onClick={isLoading ? undefined : onToggleExpand}>
 					{isLoading && <VSCodeProgressRing className="size-3 mr-2" />}
 					{isFeedback || isConsoleLogs ? (
-						<div style={{ display: "flex", alignItems: "center" }}>
-							<span
-								className={`codicon codicon-${isFeedback ? "feedback" : "output"}`}
-								style={{ marginRight: "6px" }}></span>
-							<span
-								style={{
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									marginRight: "8px",
-								}}>
+						<div className="flex items-center">
+							<span className={`codicon codicon-${isFeedback ? "feedback" : "output"} mr-[6px]`}></span>
+							<span className="whitespace-nowrap overflow-hidden text-ellipsis mr-2">
 								{isFeedback ? "User Edits" : "Console Logs"}
 							</span>
 						</div>
 					) : (
 						<>
 							{path?.startsWith(".") && <span>.</span>}
-							<span
-								style={{
-									whiteSpace: "nowrap",
-									overflow: "hidden",
-									textOverflow: "ellipsis",
-									marginRight: "8px",
-									// trick to get ellipsis at beginning of string
-									direction: "rtl",
-									textAlign: "left",
-								}}>
+							<span className="whitespace-nowrap overflow-hidden text-ellipsis mr-2 rtl text-left">
 								{removeLeadingNonAlphanumeric(path ?? "") + "\u200E"}
 							</span>
 						</>
 					)}
-					<div style={{ flexGrow: 1 }}></div>
+					<div className="flex-grow"></div>
 					{progressStatus && progressStatus.text && (
 						<>
 							{progressStatus.icon && <span className={`codicon codicon-${progressStatus.icon} mr-1`} />}
@@ -116,12 +84,7 @@ const CodeAccordian = ({
 				</div>
 			)}
 			{(!(path || isFeedback || isConsoleLogs) || isExpanded) && (
-				<div
-					style={{
-						overflowX: "auto",
-						overflowY: "hidden",
-						maxWidth: "100%",
-					}}>
+				<div className="overflow-x-auto overflow-y-hidden max-w-full">
 					<CodeBlock
 						source={(code ?? diff ?? "").trim()}
 						language={diff !== undefined ? "diff" : inferredLanguage}
diff --git a/webview-ui/src/components/common/CodeBlock.tsx b/webview-ui/src/components/common/CodeBlock.tsx
index 70f1840dd5..c079cdd040 100644
--- a/webview-ui/src/components/common/CodeBlock.tsx
+++ b/webview-ui/src/components/common/CodeBlock.tsx
@@ -1,12 +1,12 @@
-import { memo, useEffect, useRef, useCallback, useState } from "react"
-import styled from "styled-components"
+import React, { memo, useEffect, useRef, useCallback, useState } from "react"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import { getHighlighter, isLanguageLoaded, normalizeLanguage, ExtendedLanguage } from "@src/utils/highlighter"
 import { bundledLanguages } from "shiki"
 import type { ShikiTransformer } from "shiki"
 import { ChevronDown, ChevronUp, WrapText, AlignJustify, Copy, Check } from "lucide-react"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
-export const CODE_BLOCK_BG_COLOR = "var(--vscode-editor-background, --vscode-sideBar-background, rgb(30 30 30))"
+import { cn } from "@/lib/utils"
+
 export const WRAPPER_ALPHA = "cc" // 80% opacity
 // Configuration constants
 export const WINDOW_SHADE_SETTINGS = {
@@ -36,179 +36,116 @@ interface CodeBlockProps {
 	onLanguageChange?: (language: string) => void
 }
 
-const CodeBlockButton = styled.button`
-	background: transparent;
-	border: none;
-	color: var(--vscode-foreground);
-	cursor: var(--copy-button-cursor, default);
-	padding: 4px;
-	margin: 0 0px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	opacity: 0.4;
-	border-radius: 3px;
-	pointer-events: var(--copy-button-events, none);
-	margin-left: 4px;
-	height: 24px;
-	width: 24px;
+interface CodeBlockButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	children: React.ReactNode
+}
 
-	&:hover {
-		background: var(--vscode-toolbar-hoverBackground);
-		opacity: 1;
-	}
+const CodeBlockButton = ({ children, ...props }: CodeBlockButtonProps) => {
+	return (
+		<button
+			className="bg-transparent border-none text-vscode-foreground p-1 mx-0 flex items-center justify-center opacity-40 rounded-[3px] ml-1 h-6 w-6 hover:bg-vscode-toolbar-hoverBackground hover:opacity-100"
+			style={{
+				cursor: "var(--copy-button-cursor, default)",
+				pointerEvents: "var(--copy-button-events, none)" as any,
+			}}
+			{...props}>
+			{children}
+		</button>
+	)
+}
 
-	/* Style for Lucide icons to ensure consistent sizing and positioning */
-	svg {
-		display: block;
-	}
-`
+interface CodeBlockButtonWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+	children: React.ReactNode
+}
 
-const CodeBlockButtonWrapper = styled.div`
-	position: fixed;
-	top: var(--copy-button-top);
-	right: var(--copy-button-right, 8px);
-	height: auto;
-	z-index: 100;
-	background: ${CODE_BLOCK_BG_COLOR}${WRAPPER_ALPHA};
-	overflow: visible;
-	pointer-events: none;
-	opacity: var(--copy-button-opacity, 0);
-	padding: 4px 6px;
-	border-radius: 3px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
+const CodeBlockButtonWrapper = React.forwardRef<HTMLDivElement, CodeBlockButtonWrapperProps>(
+	({ children, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className="fixed h-auto z-[100] overflow-visible pointer-events-none p-[4px_6px] rounded-[3px] inline-flex items-center justify-center hover:bg-vscode-editor-background hover:!opacity-100 bg-vscode-editor-background/[.80]"
+				style={{
+					top: "var(--copy-button-top)",
+					right: "var(--copy-button-right, 8px)",
+					opacity: "var(--copy-button-opacity, 0)",
+				}}
+				{...props}>
+				{children}
+			</div>
+		)
+	},
+)
+CodeBlockButtonWrapper.displayName = "CodeBlockButtonWrapper"
 
-	&:hover {
-		background: var(--vscode-editor-background);
-		opacity: 1 !important;
-	}
+interface CodeBlockContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+	children: React.ReactNode
+	"data-partially-visible"?: boolean
+}
 
-	${CodeBlockButton} {
-		position: relative;
-		top: 0;
-		right: 0;
-	}
-`
+const CodeBlockContainer = React.forwardRef<HTMLDivElement, CodeBlockContainerProps>(
+	({ children, "data-partially-visible": partiallyVisible, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className="relative overflow-hidden border-b-4 border-vscode-sideBar-background bg-background"
+				data-partially-visible={partiallyVisible}
+				{...props}>
+				{children}
+			</div>
+		)
+	},
+)
+CodeBlockContainer.displayName = "CodeBlockContainer"
 
-const CodeBlockContainer = styled.div`
-	position: relative;
-	overflow: hidden;
-	border-bottom: 4px solid var(--vscode-sideBar-background);
-	background-color: ${CODE_BLOCK_BG_COLOR};
-
-	${CodeBlockButtonWrapper} {
-		opacity: 0;
-		pointer-events: none;
-		transition: opacity 0.2s; /* Keep opacity transition for buttons */
-	}
-
-	&[data-partially-visible="true"]:hover ${CodeBlockButtonWrapper} {
-		opacity: 1;
-		pointer-events: all;
-		cursor: pointer;
-	}
-`
-
-export const StyledPre = styled.div<{
+interface StyledPreProps extends React.HTMLAttributes<HTMLDivElement> {
 	preStyle?: React.CSSProperties
 	wordwrap?: "true" | "false" | undefined
 	windowshade?: "true" | "false"
 	collapsedHeight?: number
-}>`
-	background-color: ${CODE_BLOCK_BG_COLOR};
-	max-height: ${({ windowshade, collapsedHeight }) =>
-		windowshade === "true" ? `${collapsedHeight || WINDOW_SHADE_SETTINGS.collapsedHeight}px` : "none"};
-	overflow-y: auto;
-	padding: 10px;
-	// transition: max-height ${WINDOW_SHADE_SETTINGS.transitionDelayS} ease-out;
-	border-radius: 5px;
-	${({ preStyle }) => preStyle && { ...preStyle }}
+	children: React.ReactNode
+}
 
-	pre {
-		background-color: ${CODE_BLOCK_BG_COLOR};
-		border-radius: 5px;
-		margin: 0;
-		padding: 10px;
-		width: 100%;
-		box-sizing: border-box;
-	}
+export const StyledPre = React.forwardRef<HTMLDivElement, StyledPreProps>(
+	({ preStyle, wordwrap, windowshade, collapsedHeight, children, className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"overflow-y-auto p-[10px] rounded-[5px]",
+					"text-vscode-editor-font-size font-vscode-editor-font-family",
+					"bg-background",
+					windowshade === "true"
+						? `[max-height:${collapsedHeight || WINDOW_SHADE_SETTINGS.collapsedHeight}px]`
+						: "max-h-none",
+					wordwrap === "false" ? "whitespace-pre" : "whitespace-pre-wrap",
+					"break-normal",
+					wordwrap === "false" ? "[overflow-wrap:normal]" : "break-words",
+					className,
+				)}
+				style={preStyle}
+				{...props}>
+				{children}
+			</div>
+		)
+	},
+)
+StyledPre.displayName = "StyledPre"
 
-	pre,
-	code {
-		/* Undefined wordwrap defaults to true (pre-wrap) behavior */
-		white-space: ${({ wordwrap }) => (wordwrap === "false" ? "pre" : "pre-wrap")};
-		word-break: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "normal")};
-		overflow-wrap: ${({ wordwrap }) => (wordwrap === "false" ? "normal" : "break-word")};
-		font-size: var(--vscode-editor-font-size, var(--vscode-font-size, 12px));
-		font-family: var(--vscode-editor-font-family);
-	}
-
-	pre > code {
-		.hljs-deletion {
-			background-color: var(--vscode-diffEditor-removedTextBackground);
-			display: inline-block;
-			width: 100%;
-		}
-		.hljs-addition {
-			background-color: var(--vscode-diffEditor-insertedTextBackground);
-			display: inline-block;
-			width: 100%;
-		}
-	}
-
-	.hljs {
-		color: var(--vscode-editor-foreground, #fff);
-		background-color: ${CODE_BLOCK_BG_COLOR};
-	}
-`
-
-const LanguageSelect = styled.select`
-	font-size: 12px;
-	color: var(--vscode-foreground);
-	opacity: 0.4;
-	font-family: monospace;
-	appearance: none;
-	background: transparent;
-	border: none;
-	cursor: pointer;
-	padding: 4px;
-	margin: 0;
-	vertical-align: middle;
-	height: 24px;
-
-	& option {
-		background: var(--vscode-editor-background);
-		color: var(--vscode-foreground);
-		padding: 0;
-		margin: 0;
-	}
-
-	&::-webkit-scrollbar {
-		width: 6px;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--vscode-scrollbarSlider-background);
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--vscode-editor-background);
-	}
-
-	&:hover {
-		opacity: 1;
-		background: var(--vscode-toolbar-hoverBackground);
-		border-radius: 3px;
-	}
-
-	&:focus {
-		opacity: 1;
-		outline: none;
-		border-radius: 3px;
-	}
-`
+interface LanguageSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+	children: React.ReactNode
+}
+const LanguageSelect = ({ children, className, ...props }: LanguageSelectProps) => {
+	return (
+		<select
+			className={cn(
+				"text-xs text-vscode-foreground opacity-40 font-mono appearance-none bg-transparent border-none cursor-pointer p-1 m-0 align-middle h-6 hover:opacity-100 hover:bg-vscode-toolbar-hoverBackground hover:rounded-[3px] focus:opacity-100 focus:outline-none focus:rounded-[3px]",
+				className,
+			)}
+			{...props}>
+			{children}
+		</select>
+	)
+}
 
 const CodeBlock = memo(
 	({
@@ -243,7 +180,7 @@ const CodeBlock = memo(
 
 		// Syntax highlighting with cached Shiki instance
 		useEffect(() => {
-			const fallback = `<pre style="padding: 0; margin: 0;"><code class="hljs language-${currentLanguage || "txt"}">${source || ""}</code></pre>`
+			const fallback = `<pre class="p-0 m-0"><code class="hljs language-${currentLanguage || "txt"}">${source || ""}</code></pre>`
 			const highlight = async () => {
 				// Show plain text if language needs to be loaded
 				if (currentLanguage && !isLanguageLoaded(currentLanguage)) {
@@ -257,7 +194,7 @@ const CodeBlock = memo(
 					transformers: [
 						{
 							pre(node) {
-								node.properties.style = "padding: 0; margin: 0;"
+								node.properties.class = "p-0 m-0"
 								return node
 							},
 							code(node) {
@@ -620,7 +557,7 @@ const CodeBlock = memo(
 					<CodeBlockButtonWrapper
 						ref={copyButtonWrapperRef}
 						onMouseOver={() => updateCodeBlockButtonPosition()}
-						style={{ gap: 0 }}>
+						className="gap-0">
 						{language && (
 							<LanguageSelect
 								value={currentLanguage}
@@ -643,7 +580,7 @@ const CodeBlock = memo(
 									language && (
 										<option
 											value={normalizeLanguage(language)}
-											style={{ fontWeight: "bold", textAlign: "left", fontSize: "1.2em" }}>
+											className="font-bold text-left text-[1.2em]">
 											{normalizeLanguage(language)}
 										</option>
 									)
@@ -658,13 +595,12 @@ const CodeBlock = memo(
 												<option
 													key={normalizedLang}
 													value={normalizedLang}
-													style={{
-														fontWeight:
-															normalizedLang === currentLanguage ? "bold" : "normal",
-														textAlign: "left",
-														fontSize:
-															normalizedLang === currentLanguage ? "1.2em" : "inherit",
-													}}>
+													className={cn(
+														"text-left",
+														normalizedLang === currentLanguage
+															? "font-bold text-[1.2em]"
+															: "font-normal",
+													)}>
 													{normalizedLang}
 												</option>
 											)
diff --git a/webview-ui/src/components/common/MarkdownBlock.tsx b/webview-ui/src/components/common/MarkdownBlock.tsx
index a9c5ada19a..de8e10110a 100644
--- a/webview-ui/src/components/common/MarkdownBlock.tsx
+++ b/webview-ui/src/components/common/MarkdownBlock.tsx
@@ -1,6 +1,5 @@
-import React, { memo, useEffect } from "react"
+import React, { memo, useEffect, FC, PropsWithChildren } from "react"
 import { useRemark } from "react-remark"
-import styled from "styled-components"
 import { visit } from "unist-util-visit"
 
 import { vscode } from "@src/utils/vscode"
@@ -55,71 +54,45 @@ const remarkUrlToLink = () => {
 	}
 }
 
-const StyledMarkdown = styled.div`
-	code:not(pre > code) {
-		font-family: var(--vscode-editor-font-family, monospace);
-		filter: saturation(110%) brightness(95%);
-		color: var(--vscode-textPreformat-foreground) !important;
-		background-color: var(--vscode-textPreformat-background) !important;
-		padding: 0px 2px;
-		white-space: pre-line;
-		word-break: break-word;
-		overflow-wrap: anywhere;
-	}
-
-	/* Target only Dark High Contrast theme using the data attribute VS Code adds to the body */
-	body[data-vscode-theme-kind="vscode-high-contrast"] & code:not(pre > code) {
-		color: var(
-			--vscode-editorInlayHint-foreground,
-			var(--vscode-symbolIcon-stringForeground, var(--vscode-charts-orange, #e9a700))
-		);
-	}
-
-	font-family:
-		var(--vscode-font-family),
-		system-ui,
-		-apple-system,
-		BlinkMacSystemFont,
-		"Segoe UI",
-		Roboto,
-		Oxygen,
-		Ubuntu,
-		Cantarell,
-		"Open Sans",
-		"Helvetica Neue",
-		sans-serif;
-
-	font-size: var(--vscode-font-size, 13px);
-
-	p,
-	li,
-	ol,
-	ul {
-		line-height: 1.25;
-	}
-
-	ol,
-	ul {
-		padding-left: 2.5em;
-		margin-left: 0;
-	}
-
-	p {
-		white-space: pre-wrap;
-	}
-
-	a {
-		color: var(--vscode-textLink-foreground);
-		text-decoration-line: underline;
-		text-decoration-style: dotted;
-		text-decoration-color: var(--vscode-textLink-foreground);
-		&:hover {
-			color: var(--vscode-textLink-activeForeground);
-			text-decoration-style: solid;
-			text-decoration-color: var(--vscode-textLink-activeForeground);
-		}
-	}
-`
+const StyledMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
+	// Note: Tailwind doesn't have a direct equivalent for targeting based on body data attributes like `body[data-vscode-theme-kind="vscode-high-contrast"]`.
+	// This specific high-contrast styling might need to be handled differently, possibly via a theme-aware context or by adding a class to this component when high contrast is active.
+	// For now, the general styles are applied.
+	return (
+		<div
+			className="
+				font-vscode-font-family
+				text-vscode-font-size
+				[&_p]:leading-tight
+				[&_li]:leading-tight
+				[&_ol]:leading-tight
+				[&_ul]:leading-tight
+				[&_ol]:pl-[2.5em]
+				[&_ul]:pl-[2.5em]
+				[&_ol]:ml-0
+				[&_ul]:ml-0
+				[&_p]:whitespace-pre-wrap
+				[&_a]:text-vscode-textLink-foreground
+				[&_a]:underline
+				[&_a]:decoration-dotted
+				[&_a]:decoration-vscode-textLink-foreground
+				hover:[&_a]:text-vscode-textLink-activeForeground
+				hover:[&_a]:decoration-solid
+				hover:[&_a]:decoration-vscode-textLink-activeForeground
+				[&_code:not(pre>code)]:font-vscode-editor-font-family
+				[&_code:not(pre>code)]:saturate-[1.1]
+				[&_code:not(pre>code)]:brightness-95
+				[&_code:not(pre>code)]:text-vscode-textPreformat-foreground!
+				[&_code:not(pre>code)]:bg-vscode-textPreformat-background!
+				[&_code:not(pre>code)]:px-[2px]
+				[&_code:not(pre>code)]:whitespace-pre-line
+				[&_code:not(pre>code)]:break-words
+				[&_code:not(pre>code)]:overflow-wrap-anywhere
+			">
+			{children}
+		</div>
+	)
+}
 
 const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 	const { theme } = useExtensionState()
@@ -228,7 +201,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 	}, [markdown, setMarkdown, theme])
 
 	return (
-		<div style={{}}>
+		<div>
 			<StyledMarkdown>{reactContent}</StyledMarkdown>
 		</div>
 	)
diff --git a/webview-ui/src/components/common/MermaidBlock.tsx b/webview-ui/src/components/common/MermaidBlock.tsx
index d44d51b5f9..0c93920e62 100644
--- a/webview-ui/src/components/common/MermaidBlock.tsx
+++ b/webview-ui/src/components/common/MermaidBlock.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import mermaid from "mermaid"
 import { useDebounceEffect } from "@src/utils/useDebounceEffect"
-import styled from "styled-components"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import CodeBlock from "./CodeBlock"
+import { cn } from "@/lib/utils"
 
 const MERMAID_THEME = {
 	background: "#1e1e1e", // VS Code dark theme background
@@ -152,37 +152,18 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 			{isLoading && <LoadingMessage>{t("common:mermaid.loading")}</LoadingMessage>}
 
 			{error ? (
-				<div style={{ marginTop: "0px", overflow: "hidden", marginBottom: "8px" }}>
+				<div className="mt-0 overflow-hidden mb-2">
 					<div
-						style={{
-							borderBottom: isErrorExpanded ? "1px solid var(--vscode-editorGroup-border)" : "none",
-							fontWeight: "normal",
-							fontSize: "var(--vscode-font-size)",
-							color: "var(--vscode-editor-foreground)",
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between",
-							cursor: "pointer",
-						}}
+						className={cn(
+							"font-normal text-vscode-font-size text-vscode-editor-foreground flex items-center justify-between cursor-pointer",
+							isErrorExpanded ? "border-b border-vscode-editorGroup-border" : "border-b-0",
+						)}
 						onClick={() => setIsErrorExpanded(!isErrorExpanded)}>
-						<div
-							style={{
-								display: "flex",
-								alignItems: "center",
-								gap: "10px",
-								flexGrow: 1,
-							}}>
-							<span
-								className="codicon codicon-warning"
-								style={{
-									color: "var(--vscode-editorWarning-foreground)",
-									opacity: 0.8,
-									fontSize: 16,
-									marginBottom: "-1.5px",
-								}}></span>
-							<span style={{ fontWeight: "bold" }}>{t("common:mermaid.render_error")}</span>
+						<div className="flex items-center gap-2.5 flex-grow">
+							<span className="codicon codicon-warning text-vscode-editorWarning-foreground opacity-80 text-base mb-[-1.5px]"></span>
+							<span className="font-bold">{t("common:mermaid.render_error")}</span>
 						</div>
-						<div style={{ display: "flex", alignItems: "center" }}>
+						<div className="flex items-center">
 							<CopyButton
 								onClick={(e) => {
 									e.stopPropagation()
@@ -195,21 +176,14 @@ export default function MermaidBlock({ code }: MermaidBlockProps) {
 						</div>
 					</div>
 					{isErrorExpanded && (
-						<div
-							style={{
-								padding: "8px",
-								backgroundColor: "var(--vscode-editor-background)",
-								borderTop: "none",
-							}}>
-							<div style={{ marginBottom: "8px", color: "var(--vscode-descriptionForeground)" }}>
-								{error}
-							</div>
+						<div className="p-2 bg-vscode-editor-background border-t-0">
+							<div className="mb-2 text-vscode-descriptionForeground">{error}</div>
 							<CodeBlock language="mermaid" source={code} />
 						</div>
 					)}
 				</div>
 			) : (
-				<SvgContainer onClick={handleClick} ref={containerRef} $isLoading={isLoading} />
+				<SvgContainer onClick={handleClick} ref={containerRef} isLoading={isLoading} />
 			)}
 		</MermaidBlockContainer>
 	)
@@ -266,44 +240,40 @@ async function svgToPng(svgEl: SVGElement): Promise<string> {
 	})
 }
 
-const MermaidBlockContainer = styled.div`
-	position: relative;
-	margin: 8px 0;
-`
-
-const LoadingMessage = styled.div`
-	padding: 8px 0;
-	color: var(--vscode-descriptionForeground);
-	font-style: italic;
-	font-size: 0.9em;
-`
-
-const CopyButton = styled.button`
-	padding: 3px;
-	height: 24px;
-	margin-right: 4px;
-	color: var(--vscode-editor-foreground);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: transparent;
-	border: none;
-	cursor: pointer;
-
-	&:hover {
-		opacity: 0.8;
-	}
-`
-
-interface SvgContainerProps {
-	$isLoading: boolean
+const MermaidBlockContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	return <div className="relative my-2">{children}</div>
 }
 
-const SvgContainer = styled.div<SvgContainerProps>`
-	opacity: ${(props) => (props.$isLoading ? 0.3 : 1)};
-	min-height: 20px;
-	transition: opacity 0.2s ease;
-	cursor: pointer;
-	display: flex;
-	justify-content: center;
-`
+const LoadingMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	return <div className="py-2 text-vscode-descriptionForeground italic text-[0.9em]">{children}</div>
+}
+
+const CopyButton: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({ children, ...props }) => {
+	return (
+		<button
+			className="p-[3px] h-6 mr-1 text-vscode-editor-foreground flex items-center justify-center bg-transparent border-none cursor-pointer hover:opacity-80"
+			{...props}>
+			{children}
+		</button>
+	)
+}
+
+interface SvgContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+	isLoading: boolean
+	children?: React.ReactNode
+}
+
+const SvgContainer = React.forwardRef<HTMLDivElement, SvgContainerProps>(({ isLoading, children, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"min-h-[20px] transition-opacity duration-200 ease-in-out cursor-pointer flex justify-center",
+				isLoading ? "opacity-30" : "opacity-100",
+			)}
+			{...props}>
+			{children}
+		</div>
+	)
+})
+SvgContainer.displayName = "SvgContainer"
diff --git a/webview-ui/src/components/common/TelemetryBanner.tsx b/webview-ui/src/components/common/TelemetryBanner.tsx
index dac980489c..156ec3704c 100644
--- a/webview-ui/src/components/common/TelemetryBanner.tsx
+++ b/webview-ui/src/components/common/TelemetryBanner.tsx
@@ -1,29 +1,10 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { memo, useState } from "react"
-import styled from "styled-components"
 import { vscode } from "@src/utils/vscode"
 import { TelemetrySetting } from "@roo/shared/TelemetrySetting"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Trans } from "react-i18next"
-
-const BannerContainer = styled.div`
-	background-color: var(--vscode-banner-background);
-	padding: 12px 20px;
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	flex-shrink: 0;
-	margin-bottom: 6px;
-`
-
-const ButtonContainer = styled.div`
-	display: flex;
-	gap: 8px;
-	width: 100%;
-	& > vscode-button {
-		flex: 1;
-	}
-`
+import { cn } from "@/lib/utils"
 
 const TelemetryBanner = () => {
 	const { t } = useAppTranslation()
@@ -48,7 +29,7 @@ const TelemetryBanner = () => {
 	}
 
 	return (
-		<BannerContainer>
+		<div className={`bg-vscode-banner-background p-[12px_20px] flex flex-col gap-[10px] shrink-0 mb-[6px]`}>
 			<div>
 				<strong>{t("welcome:telemetry.title")}</strong>
 				<div className="mt-1">
@@ -64,15 +45,15 @@ const TelemetryBanner = () => {
 					</div>
 				</div>
 			</div>
-			<ButtonContainer>
-				<VSCodeButton appearance="primary" onClick={handleAllow} disabled={hasChosen}>
+			<div className={cn("flex gap-[8px] w-full")}>
+				<VSCodeButton appearance="primary" onClick={handleAllow} disabled={hasChosen} className="flex-1">
 					{t("welcome:telemetry.allow")}
 				</VSCodeButton>
-				<VSCodeButton appearance="secondary" onClick={handleDeny} disabled={hasChosen}>
+				<VSCodeButton appearance="secondary" onClick={handleDeny} disabled={hasChosen} className="flex-1">
 					{t("welcome:telemetry.deny")}
 				</VSCodeButton>
-			</ButtonContainer>
-		</BannerContainer>
+			</div>
+		</div>
 	)
 }
 
diff --git a/webview-ui/src/components/common/Thumbnails.tsx b/webview-ui/src/components/common/Thumbnails.tsx
index acdf5f4295..f3097cc01f 100644
--- a/webview-ui/src/components/common/Thumbnails.tsx
+++ b/webview-ui/src/components/common/Thumbnails.tsx
@@ -37,56 +37,24 @@ const Thumbnails = ({ images, style, setImages, onHeightChange }: ThumbnailsProp
 	}
 
 	return (
-		<div
-			ref={containerRef}
-			style={{
-				display: "flex",
-				flexWrap: "wrap",
-				gap: 5,
-				rowGap: 3,
-				...style,
-			}}>
+		<div ref={containerRef} className="flex flex-wrap gap-[5px] gap-y-[3px]" style={style}>
 			{images.map((image, index) => (
 				<div
 					key={index}
-					style={{ position: "relative" }}
+					className="relative"
 					onMouseEnter={() => setHoveredIndex(index)}
 					onMouseLeave={() => setHoveredIndex(null)}>
 					<img
 						src={image}
 						alt={`Thumbnail ${index + 1}`}
-						style={{
-							width: 34,
-							height: 34,
-							objectFit: "cover",
-							borderRadius: 4,
-							cursor: "pointer",
-						}}
+						className="w-[34px] h-[34px] object-cover rounded cursor-pointer"
 						onClick={() => handleImageClick(image)}
 					/>
 					{isDeletable && hoveredIndex === index && (
 						<div
 							onClick={() => handleDelete(index)}
-							style={{
-								position: "absolute",
-								top: -4,
-								right: -4,
-								width: 13,
-								height: 13,
-								borderRadius: "50%",
-								backgroundColor: "var(--vscode-badge-background)",
-								display: "flex",
-								justifyContent: "center",
-								alignItems: "center",
-								cursor: "pointer",
-							}}>
-							<span
-								className="codicon codicon-close"
-								style={{
-									color: "var(--vscode-foreground)",
-									fontSize: 10,
-									fontWeight: "bold",
-								}}></span>
+							className="absolute -top-1 -right-1 w-[13px] h-[13px] rounded-full bg-vscode-badge-background flex justify-center items-center cursor-pointer">
+							<span className="codicon codicon-close text-vscode-foreground text-[10px] font-bold"></span>
 						</div>
 					)}
 				</div>
diff --git a/webview-ui/src/components/common/VSCodeButtonLink.tsx b/webview-ui/src/components/common/VSCodeButtonLink.tsx
index d0cd6b1c97..819e8f4065 100644
--- a/webview-ui/src/components/common/VSCodeButtonLink.tsx
+++ b/webview-ui/src/components/common/VSCodeButtonLink.tsx
@@ -8,12 +8,7 @@ interface VSCodeButtonLinkProps {
 }
 
 export const VSCodeButtonLink = ({ href, children, ...props }: VSCodeButtonLinkProps) => (
-	<a
-		href={href}
-		style={{
-			textDecoration: "none",
-			color: "inherit",
-		}}>
+	<a href={href} className="no-underline text-inherit">
 		<VSCodeButton {...props}>{children}</VSCodeButton>
 	</a>
 )
diff --git a/webview-ui/src/components/history/HistoryPreview.tsx b/webview-ui/src/components/history/HistoryPreview.tsx
index 080cbff3e2..f290b1ae58 100644
--- a/webview-ui/src/components/history/HistoryPreview.tsx
+++ b/webview-ui/src/components/history/HistoryPreview.tsx
@@ -29,13 +29,11 @@ const HistoryPreview = () => {
 										<CopyButton itemTask={item.task} />
 									</div>
 									<div
-										className="text-vscode-foreground overflow-hidden whitespace-pre-wrap"
+										className="text-vscode-foreground overflow-hidden whitespace-pre-wrap break-words overflow-wrap-anywhere"
 										style={{
 											display: "-webkit-box",
 											WebkitLineClamp: 2,
 											WebkitBoxOrient: "vertical",
-											wordBreak: "break-word",
-											overflowWrap: "anywhere",
 										}}>
 										{item.task}
 									</div>
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
index bcb86a8d13..2950aa8a65 100644
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/webview-ui/src/components/history/HistoryView.tsx
@@ -99,7 +99,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 				</div>
 				<div className="flex flex-col gap-2">
 					<VSCodeTextField
-						style={{ width: "100%" }}
+						className="w-full"
 						placeholder={t("history:searchPlaceholder")}
 						value={searchQuery}
 						data-testid="history-search-input"
@@ -111,28 +111,18 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 								setSortOption("mostRelevant")
 							}
 						}}>
-						<div
-							slot="start"
-							className="codicon codicon-search"
-							style={{ fontSize: 13, marginTop: 2.5, opacity: 0.8 }}
-						/>
+						<div slot="start" className="codicon codicon-search text-[13px] mt-[2.5px] opacity-80" />
 						{searchQuery && (
 							<div
-								className="input-icon-button codicon codicon-close"
+								className="input-icon-button codicon codicon-close flex justify-center items-center h-full"
 								aria-label="Clear search"
 								onClick={() => setSearchQuery("")}
 								slot="end"
-								style={{
-									display: "flex",
-									justifyContent: "center",
-									alignItems: "center",
-									height: "100%",
-								}}
 							/>
 						)}
 					</VSCodeTextField>
 					<VSCodeRadioGroup
-						style={{ display: "flex", flexWrap: "wrap" }}
+						className="flex flex-wrap"
 						value={sortOption}
 						role="radiogroup"
 						onChange={(e) => setSortOption((e.target as HTMLInputElement).value as SortOption)}>
@@ -152,7 +142,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 							value="mostRelevant"
 							disabled={!searchQuery}
 							data-testid="radio-most-relevant"
-							style={{ opacity: searchQuery ? 1 : 0.5 }}>
+							className={searchQuery ? "opacity-100" : "opacity-50"}>
 							{t("history:mostRelevant")}
 						</VSCodeRadio>
 					</VSCodeRadioGroup>
@@ -197,10 +187,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 
 			<TabContent className="p-0">
 				<Virtuoso
-					style={{
-						flexGrow: 1,
-						overflowY: "scroll",
-					}}
+					className="flex-grow overflow-y-scroll"
 					data={tasks}
 					data-testid="virtuoso-container"
 					initialTopMostItemIndex={0}
@@ -274,76 +261,33 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										</div>
 									</div>
 									<div
+										className="text-vscode-font-size text-vscode-foreground overflow-hidden whitespace-pre-wrap break-words overflow-wrap-anywhere"
 										style={{
-											fontSize: "var(--vscode-font-size)",
-											color: "var(--vscode-foreground)",
 											display: "-webkit-box",
 											WebkitLineClamp: 3,
 											WebkitBoxOrient: "vertical",
-											overflow: "hidden",
-											whiteSpace: "pre-wrap",
-											wordBreak: "break-word",
-											overflowWrap: "anywhere",
 										}}
 										data-testid="task-content"
 										dangerouslySetInnerHTML={{ __html: item.task }}
 									/>
-									<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+									<div className="flex flex-col gap-1">
 										<div
 											data-testid="tokens-container"
-											style={{
-												display: "flex",
-												justifyContent: "space-between",
-												alignItems: "center",
-											}}>
-											<div
-												style={{
-													display: "flex",
-													alignItems: "center",
-													gap: "4px",
-													flexWrap: "wrap",
-												}}>
-												<span
-													style={{
-														fontWeight: 500,
-														color: "var(--vscode-descriptionForeground)",
-													}}>
+											className="flex justify-between items-center">
+											<div className="flex items-center gap-1 flex-wrap">
+												<span className="font-medium text-vscode-descriptionForeground">
 													{t("history:tokensLabel")}
 												</span>
 												<span
 													data-testid="tokens-in"
-													style={{
-														display: "flex",
-														alignItems: "center",
-														gap: "3px",
-														color: "var(--vscode-descriptionForeground)",
-													}}>
-													<i
-														className="codicon codicon-arrow-up"
-														style={{
-															fontSize: "12px",
-															fontWeight: "bold",
-															marginBottom: "-2px",
-														}}
-													/>
+													className="flex items-center gap-[3px] text-vscode-descriptionForeground">
+													<i className="codicon codicon-arrow-up text-xs font-bold mb-[-2px]" />
 													{formatLargeNumber(item.tokensIn || 0)}
 												</span>
 												<span
 													data-testid="tokens-out"
-													style={{
-														display: "flex",
-														alignItems: "center",
-														gap: "3px",
-														color: "var(--vscode-descriptionForeground)",
-													}}>
-													<i
-														className="codicon codicon-arrow-down"
-														style={{
-															fontSize: "12px",
-															fontWeight: "bold",
-															marginBottom: "-2px",
-														}}
-													/>
+													className="flex items-center gap-[3px] text-vscode-descriptionForeground">
+													<i className="codicon codicon-arrow-down text-xs font-bold mb-[-2px]" />
 													{formatLargeNumber(item.tokensOut || 0)}
 												</span>
 											</div>
@@ -358,75 +302,32 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 										{!!item.cacheWrites && (
 											<div
 												data-testid="cache-container"
-												style={{
-													display: "flex",
-													alignItems: "center",
-													gap: "4px",
-													flexWrap: "wrap",
-												}}>
-												<span
-													style={{
-														fontWeight: 500,
-														color: "var(--vscode-descriptionForeground)",
-													}}>
+												className="flex items-center gap-1 flex-wrap">
+												<span className="font-medium text-vscode-descriptionForeground">
 													{t("history:cacheLabel")}
 												</span>
 												<span
 													data-testid="cache-writes"
-													style={{
-														display: "flex",
-														alignItems: "center",
-														gap: "3px",
-														color: "var(--vscode-descriptionForeground)",
-													}}>
-													<i
-														className="codicon codicon-database"
-														style={{
-															fontSize: "12px",
-															fontWeight: "bold",
-															marginBottom: "-1px",
-														}}
-													/>
+													className="flex items-center gap-[3px] text-vscode-descriptionForeground">
+													<i className="codicon codicon-database text-xs font-bold mb-[-1px]" />
 													+{formatLargeNumber(item.cacheWrites || 0)}
 												</span>
 												<span
 													data-testid="cache-reads"
-													style={{
-														display: "flex",
-														alignItems: "center",
-														gap: "3px",
-														color: "var(--vscode-descriptionForeground)",
-													}}>
-													<i
-														className="codicon codicon-arrow-right"
-														style={{
-															fontSize: "12px",
-															fontWeight: "bold",
-															marginBottom: 0,
-														}}
-													/>
+													className="flex items-center gap-[3px] text-vscode-descriptionForeground">
+													<i className="codicon codicon-arrow-right text-xs font-bold mb-0" />
 													{formatLargeNumber(item.cacheReads || 0)}
 												</span>
 											</div>
 										)}
 
 										{!!item.totalCost && (
-											<div
-												style={{
-													display: "flex",
-													justifyContent: "space-between",
-													alignItems: "center",
-													marginTop: -2,
-												}}>
-												<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-													<span
-														style={{
-															fontWeight: 500,
-															color: "var(--vscode-descriptionForeground)",
-														}}>
+											<div className="flex justify-between items-center mt-[-2px]">
+												<div className="flex items-center gap-1">
+													<span className="font-medium text-vscode-descriptionForeground">
 														{t("history:apiCostLabel")}
 													</span>
-													<span style={{ color: "var(--vscode-descriptionForeground)" }}>
+													<span className="text-vscode-descriptionForeground">
 														${item.totalCost?.toFixed(4)}
 													</span>
 												</div>
diff --git a/webview-ui/src/components/mcp/McpEnabledToggle.tsx b/webview-ui/src/components/mcp/McpEnabledToggle.tsx
index 648cb77142..2aae120377 100644
--- a/webview-ui/src/components/mcp/McpEnabledToggle.tsx
+++ b/webview-ui/src/components/mcp/McpEnabledToggle.tsx
@@ -16,18 +16,11 @@ const McpEnabledToggle = () => {
 	}
 
 	return (
-		<div style={{ marginBottom: "20px" }}>
+		<div className="mb-5">
 			<VSCodeCheckbox checked={mcpEnabled} onChange={handleChange}>
-				<span style={{ fontWeight: "500" }}>{t("mcp:enableToggle.title")}</span>
+				<span className="font-medium">{t("mcp:enableToggle.title")}</span>
 			</VSCodeCheckbox>
-			<p
-				style={{
-					fontSize: "12px",
-					marginTop: "5px",
-					color: "var(--vscode-descriptionForeground)",
-				}}>
-				{t("mcp:enableToggle.description")}
-			</p>
+			<p className="text-xs mt-[5px] text-vscode-descriptionForeground">{t("mcp:enableToggle.description")}</p>
 		</div>
 	)
 }
diff --git a/webview-ui/src/components/mcp/McpResourceRow.tsx b/webview-ui/src/components/mcp/McpResourceRow.tsx
index b31082dafb..a28898bef3 100644
--- a/webview-ui/src/components/mcp/McpResourceRow.tsx
+++ b/webview-ui/src/components/mcp/McpResourceRow.tsx
@@ -9,26 +9,12 @@ const McpResourceRow = ({ item }: McpResourceRowProps) => {
 	const uri = hasUri ? item.uri : item.uriTemplate
 
 	return (
-		<div
-			key={uri}
-			style={{
-				padding: "3px 0",
-			}}>
-			<div
-				style={{
-					display: "flex",
-					alignItems: "center",
-					marginBottom: "4px",
-				}}>
-				<span className={`codicon codicon-symbol-file`} style={{ marginRight: "6px" }} />
-				<span style={{ fontWeight: 500, wordBreak: "break-all" }}>{uri}</span>
+		<div key={uri} className="py-[3px]">
+			<div className="flex items-center mb-1">
+				<span className={`codicon codicon-symbol-file mr-[6px]`} />
+				<span className="font-medium break-all">{uri}</span>
 			</div>
-			<div
-				style={{
-					fontSize: "12px",
-					opacity: 0.8,
-					margin: "4px 0",
-				}}>
+			<div className="text-xs opacity-80 my-1">
 				{item.name && item.description
 					? `${item.name}: ${item.description}`
 					: !item.name && item.description
@@ -37,18 +23,9 @@ const McpResourceRow = ({ item }: McpResourceRowProps) => {
 							? item.name
 							: "No description"}
 			</div>
-			<div
-				style={{
-					fontSize: "12px",
-				}}>
-				<span style={{ opacity: 0.8 }}>Returns </span>
-				<code
-					style={{
-						color: "var(--vscode-textPreformat-foreground)",
-						background: "var(--vscode-textPreformat-background)",
-						padding: "1px 4px",
-						borderRadius: "3px",
-					}}>
+			<div className="text-xs">
+				<span className="opacity-80">Returns </span>
+				<code className="text-vscode-textPreformat-foreground bg-vscode-textPreformat-background px-1 py-[1px] rounded-[3px]">
 					{item.mimeType || "Unknown"}
 				</code>
 			</div>
diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx
index 2cab9b31ee..adce4e5324 100644
--- a/webview-ui/src/components/mcp/McpToolRow.tsx
+++ b/webview-ui/src/components/mcp/McpToolRow.tsx
@@ -24,18 +24,14 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 	}
 
 	return (
-		<div
-			key={tool.name}
-			style={{
-				padding: "3px 0",
-			}}>
+		<div key={tool.name} className="py-[3px]">
 			<div
 				data-testid="tool-row-container"
-				style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}
+				className="flex items-center justify-between"
 				onClick={(e) => e.stopPropagation()}>
-				<div style={{ display: "flex", alignItems: "center" }}>
-					<span className="codicon codicon-symbol-method" style={{ marginRight: "6px" }}></span>
-					<span style={{ fontWeight: 500 }}>{tool.name}</span>
+				<div className="flex items-center">
+					<span className="codicon codicon-symbol-method mr-[6px]"></span>
+					<span className="font-medium">{tool.name}</span>
 				</div>
 				{serverName && alwaysAllowMcp && (
 					<VSCodeCheckbox checked={tool.alwaysAllow} onChange={handleAlwaysAllowChange} data-tool={tool.name}>
@@ -43,32 +39,12 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 					</VSCodeCheckbox>
 				)}
 			</div>
-			{tool.description && (
-				<div
-					style={{
-						marginLeft: "0px",
-						marginTop: "4px",
-						opacity: 0.8,
-						fontSize: "12px",
-					}}>
-					{tool.description}
-				</div>
-			)}
+			{tool.description && <div className="ml-0 mt-1 opacity-80 text-xs">{tool.description}</div>}
 			{tool.inputSchema &&
 				"properties" in tool.inputSchema &&
 				Object.keys(tool.inputSchema.properties as Record<string, any>).length > 0 && (
-					<div
-						style={{
-							marginTop: "8px",
-							fontSize: "12px",
-							border: "1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 30%, transparent)",
-							borderRadius: "3px",
-							padding: "8px",
-						}}>
-						<div
-							style={{ marginBottom: "4px", opacity: 0.8, fontSize: "11px", textTransform: "uppercase" }}>
-							{t("mcp:tool.parameters")}
-						</div>
+					<div className="mt-2 text-xs rounded-[3px] p-2 border border-vscode-descriptionForeground-transparent-30">
+						<div className="mb-1 opacity-80 text-[11px] uppercase">{t("mcp:tool.parameters")}</div>
 						{Object.entries(tool.inputSchema.properties as Record<string, any>).map(
 							([paramName, schema]) => {
 								const isRequired =
@@ -78,29 +54,12 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 									tool.inputSchema.required.includes(paramName)
 
 								return (
-									<div
-										key={paramName}
-										style={{
-											display: "flex",
-											alignItems: "baseline",
-											marginTop: "4px",
-										}}>
-										<code
-											style={{
-												color: "var(--vscode-textPreformat-foreground)",
-												marginRight: "8px",
-											}}>
+									<div key={paramName} className="flex items-baseline mt-1">
+										<code className="text-vscode-textPreformat-foreground mr-2">
 											{paramName}
-											{isRequired && (
-												<span style={{ color: "var(--vscode-errorForeground)" }}>*</span>
-											)}
+											{isRequired && <span className="text-vscode-errorForeground">*</span>}
 										</code>
-										<span
-											style={{
-												opacity: 0.8,
-												overflowWrap: "break-word",
-												wordBreak: "break-word",
-											}}>
+										<span className="opacity-80 break-words">
 											{schema.description || t("mcp:tool.noDescription")}
 										</span>
 									</div>
@@ -112,5 +71,4 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 		</div>
 	)
 }
-
 export default McpToolRow
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index b03be6500b..87648b61f4 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -23,6 +23,7 @@ import {
 	DialogDescription,
 	DialogFooter,
 } from "@src/components/ui"
+import { cn } from "@/lib/utils" // Import cn utility
 
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 
@@ -54,20 +55,12 @@ const McpView = ({ onDone }: McpViewProps) => {
 			</TabHeader>
 
 			<TabContent>
-				<div
-					style={{
-						color: "var(--vscode-foreground)",
-						fontSize: "13px",
-						marginBottom: "10px",
-						marginTop: "5px",
-					}}>
+				<div className="text-vscode-foreground text-[13px] mb-[10px] mt-[5px]">
 					<Trans i18nKey="mcp:description">
-						<VSCodeLink href="https://github.com/modelcontextprotocol" style={{ display: "inline" }}>
+						<VSCodeLink href="https://github.com/modelcontextprotocol" className="inline">
 							Model Context Protocol
 						</VSCodeLink>
-						<VSCodeLink
-							href="https://github.com/modelcontextprotocol/servers"
-							style={{ display: "inline" }}>
+						<VSCodeLink href="https://github.com/modelcontextprotocol/servers" className="inline">
 							community-made servers
 						</VSCodeLink>
 					</Trans>
@@ -77,28 +70,23 @@ const McpView = ({ onDone }: McpViewProps) => {
 
 				{mcpEnabled && (
 					<>
-						<div style={{ marginBottom: 15 }}>
+						<div className="mb-[15px]">
 							<VSCodeCheckbox
 								checked={enableMcpServerCreation}
 								onChange={(e: any) => {
 									setEnableMcpServerCreation(e.target.checked)
 									vscode.postMessage({ type: "enableMcpServerCreation", bool: e.target.checked })
 								}}>
-								<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
+								<span className="font-medium">{t("mcp:enableServerCreation.title")}</span>
 							</VSCodeCheckbox>
-							<p
-								style={{
-									fontSize: "12px",
-									marginTop: "5px",
-									color: "var(--vscode-descriptionForeground)",
-								}}>
+							<p className="text-xs mt-[5px] text-vscode-descriptionForeground">
 								{t("mcp:enableServerCreation.description")}
 							</p>
 						</div>
 
 						{/* Server List */}
 						{servers.length > 0 && (
-							<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+							<div className="flex flex-col gap-[10px]">
 								{servers.map((server) => (
 									<ServerRow
 										key={`${server.name}-${server.source || "global"}`}
@@ -110,23 +98,23 @@ const McpView = ({ onDone }: McpViewProps) => {
 						)}
 
 						{/* Edit Settings Buttons */}
-						<div style={{ marginTop: "10px", width: "100%", display: "flex", gap: "10px" }}>
+						<div className="mt-[10px] w-full flex gap-[10px]">
 							<Button
 								variant="secondary"
-								style={{ flex: 1 }}
+								className="flex-1"
 								onClick={() => {
 									vscode.postMessage({ type: "openMcpSettings" })
 								}}>
-								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
+								<span className="codicon codicon-edit mr-[6px]"></span>
 								{t("mcp:editGlobalMCP")}
 							</Button>
 							<Button
 								variant="secondary"
-								style={{ flex: 1 }}
+								className="flex-1"
 								onClick={() => {
 									vscode.postMessage({ type: "openProjectMcpSettings" })
 								}}>
-								<span className="codicon codicon-edit" style={{ marginRight: "6px" }}></span>
+								<span className="codicon codicon-edit mr-[6px]"></span>
 								{t("mcp:editProjectMCP")}
 							</Button>
 						</div>
@@ -157,17 +145,6 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 		{ value: 3600, label: t("mcp:networkTimeout.options.60minutes") },
 	]
 
-	const getStatusColor = () => {
-		switch (server.status) {
-			case "connected":
-				return "var(--vscode-testing-iconPassed)"
-			case "connecting":
-				return "var(--vscode-charts-yellow)"
-			case "disconnected":
-				return "var(--vscode-testing-iconFailed)"
-		}
-	}
-
 	const handleRowClick = () => {
 		if (server.status === "connected") {
 			setIsExpanded(!isExpanded)
@@ -203,74 +180,48 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 	}
 
 	return (
-		<div style={{ marginBottom: "10px" }}>
+		<div className="mb-[10px]">
 			<div
-				style={{
-					display: "flex",
-					alignItems: "center",
-					padding: "8px",
-					background: "var(--vscode-textCodeBlock-background)",
-					cursor: server.status === "connected" ? "pointer" : "default",
-					borderRadius: isExpanded || server.status === "connected" ? "4px" : "4px 4px 0 0",
-					opacity: server.disabled ? 0.6 : 1,
-				}}
+				className={cn(
+					"flex items-center p-[8px] bg-vscode-textCodeBlock-background",
+					server.status === "connected" ? "cursor-pointer" : "cursor-default",
+					isExpanded || server.status === "connected" ? "rounded-[4px]" : "rounded-t-[4px]",
+					server.disabled ? "opacity-60" : "opacity-100",
+				)}
 				onClick={handleRowClick}>
 				{server.status === "connected" && (
-					<span
-						className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
-						style={{ marginRight: "8px" }}
-					/>
+					<span className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} mr-[8px]`} />
 				)}
-				<span style={{ flex: 1 }}>
+				<span className="flex-1">
 					{server.name}
 					{server.source && (
-						<span
-							style={{
-								marginLeft: "8px",
-								padding: "1px 6px",
-								fontSize: "11px",
-								borderRadius: "4px",
-								background: "var(--vscode-badge-background)",
-								color: "var(--vscode-badge-foreground)",
-							}}>
+						<span className="ml-[8px] px-[6px] py-[1px] text-[11px] rounded-[4px] bg-vscode-badge-background text-vscode-badge-foreground">
 							{server.source}
 						</span>
 					)}
 				</span>
-				<div
-					style={{ display: "flex", alignItems: "center", marginRight: "8px" }}
-					onClick={(e) => e.stopPropagation()}>
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={() => setShowDeleteConfirm(true)}
-						style={{ marginRight: "8px" }}>
-						<span className="codicon codicon-trash" style={{ fontSize: "14px" }}></span>
+				<div className="flex items-center mr-[8px]" onClick={(e) => e.stopPropagation()}>
+					<Button variant="ghost" size="icon" onClick={() => setShowDeleteConfirm(true)} className="mr-[8px]">
+						<span className="codicon codicon-trash text-[14px]"></span>
 					</Button>
 					<Button
 						variant="ghost"
 						size="icon"
 						onClick={handleRestart}
 						disabled={server.status === "connecting"}
-						style={{ marginRight: "8px" }}>
-						<span className="codicon codicon-refresh" style={{ fontSize: "14px" }}></span>
+						className="mr-[8px]">
+						<span className="codicon codicon-refresh text-[14px]"></span>
 					</Button>
 					<div
 						role="switch"
 						aria-checked={!server.disabled}
 						tabIndex={0}
-						style={{
-							width: "20px",
-							height: "10px",
-							backgroundColor: server.disabled
-								? "var(--vscode-titleBar-inactiveForeground)"
-								: "var(--vscode-button-background)",
-							borderRadius: "5px",
-							position: "relative",
-							cursor: "pointer",
-							transition: "background-color 0.2s",
-							opacity: server.disabled ? 0.4 : 0.8,
-						}}
+						className={cn(
+							"w-[20px] h-[10px] rounded-[5px] relative cursor-pointer transition-colors duration-200",
+							server.disabled
+								? "bg-vscode-titleBar-inactiveForeground opacity-40"
+								: "bg-vscode-button-background opacity-80",
+						)}
 						onClick={() => {
 							vscode.postMessage({
 								type: "toggleMcpServer",
@@ -291,40 +242,26 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 							}
 						}}>
 						<div
-							style={{
-								width: "6px",
-								height: "6px",
-								backgroundColor: "var(--vscode-titleBar-activeForeground)",
-								borderRadius: "50%",
-								position: "absolute",
-								top: "2px",
-								left: server.disabled ? "2px" : "12px",
-								transition: "left 0.2s",
-							}}
+							className={cn(
+								"w-[6px] h-[6px] bg-vscode-titleBar-activeForeground rounded-full absolute top-[2px] transition-all duration-200",
+								server.disabled ? "left-[2px]" : "left-[12px]",
+							)}
 						/>
 					</div>
 				</div>
 				<div
-					style={{
-						width: "8px",
-						height: "8px",
-						borderRadius: "50%",
-						background: getStatusColor(),
-						marginLeft: "8px",
-					}}
+					className={cn("w-[8px] h-[8px] rounded-full ml-[8px]", {
+						"bg-vscode-testing-iconPassed": server.status === "connected",
+						"bg-vscode-charts-yellow": server.status === "connecting",
+						"bg-vscode-testing-iconFailed": server.status === "disconnected",
+					})}
 				/>
 			</div>
 
 			{server.status === "connected" ? (
 				isExpanded && (
-					<div
-						style={{
-							background: "var(--vscode-textCodeBlock-background)",
-							padding: "0 10px 10px 10px",
-							fontSize: "13px",
-							borderRadius: "0 0 4px 4px",
-						}}>
-						<VSCodePanels style={{ marginBottom: "10px" }}>
+					<div className="bg-vscode-textCodeBlock-background px-[10px] pb-[10px] text-[13px] rounded-b-[4px]">
+						<VSCodePanels className="mb-[10px]">
 							<VSCodePanelTab id="tools">
 								{t("mcp:tabs.tools")} ({server.tools?.length || 0})
 							</VSCodePanelTab>
@@ -338,8 +275,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 
 							<VSCodePanelView id="tools-view">
 								{server.tools && server.tools.length > 0 ? (
-									<div
-										style={{ display: "flex", flexDirection: "column", gap: "8px", width: "100%" }}>
+									<div className="flex flex-col gap-[8px] w-full">
 										{server.tools.map((tool) => (
 											<McpToolRow
 												key={`${tool.name}-${server.name}-${server.source || "global"}`}
@@ -351,7 +287,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 										))}
 									</div>
 								) : (
-									<div style={{ padding: "10px 0", color: "var(--vscode-descriptionForeground)" }}>
+									<div className="py-[10px] text-vscode-descriptionForeground">
 										{t("mcp:emptyState.noTools")}
 									</div>
 								)}
@@ -360,8 +296,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 							<VSCodePanelView id="resources-view">
 								{(server.resources && server.resources.length > 0) ||
 								(server.resourceTemplates && server.resourceTemplates.length > 0) ? (
-									<div
-										style={{ display: "flex", flexDirection: "column", gap: "8px", width: "100%" }}>
+									<div className="flex flex-col gap-[8px] w-full">
 										{[...(server.resourceTemplates || []), ...(server.resources || [])].map(
 											(item) => (
 												<McpResourceRow
@@ -372,7 +307,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 										)}
 									</div>
 								) : (
-									<div style={{ padding: "10px 0", color: "var(--vscode-descriptionForeground)" }}>
+									<div className="py-[10px] text-vscode-descriptionForeground">
 										{t("mcp:emptyState.noResources")}
 									</div>
 								)}
@@ -380,8 +315,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 
 							<VSCodePanelView id="errors-view">
 								{server.errorHistory && server.errorHistory.length > 0 ? (
-									<div
-										style={{ display: "flex", flexDirection: "column", gap: "8px", width: "100%" }}>
+									<div className="flex flex-col gap-[8px] w-full">
 										{[...server.errorHistory]
 											.sort((a, b) => b.timestamp - a.timestamp)
 											.map((error, index) => (
@@ -389,7 +323,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 											))}
 									</div>
 								) : (
-									<div style={{ padding: "10px 0", color: "var(--vscode-descriptionForeground)" }}>
+									<div className="py-[10px] text-vscode-descriptionForeground">
 										{t("mcp:emptyState.noErrors")}
 									</div>
 								)}
@@ -397,28 +331,13 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 						</VSCodePanels>
 
 						{/* Network Timeout */}
-						<div style={{ padding: "10px 7px" }}>
-							<div
-								style={{
-									display: "flex",
-									alignItems: "center",
-									gap: "10px",
-									marginBottom: "8px",
-								}}>
+						<div className="px-[7px] py-[10px]">
+							<div className="flex items-center gap-[10px] mb-[8px]">
 								<span>{t("mcp:networkTimeout.label")}</span>
 								<select
 									value={timeoutValue}
 									onChange={handleTimeoutChange}
-									style={{
-										flex: 1,
-										padding: "4px",
-										background: "var(--vscode-dropdown-background)",
-										color: "var(--vscode-dropdown-foreground)",
-										border: "1px solid var(--vscode-dropdown-border)",
-										borderRadius: "2px",
-										outline: "none",
-										cursor: "pointer",
-									}}>
+									className="flex-1 p-[4px] bg-vscode-dropdown-background text-vscode-dropdown-foreground border border-vscode-dropdown-border rounded-[2px] outline-none cursor-pointer">
 									{timeoutOptions.map((option) => (
 										<option key={option.value} value={option.value}>
 											{option.label}
@@ -426,33 +345,15 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 									))}
 								</select>
 							</div>
-							<span
-								style={{
-									fontSize: "12px",
-									color: "var(--vscode-descriptionForeground)",
-									display: "block",
-								}}>
+							<span className="text-xs text-vscode-descriptionForeground block">
 								{t("mcp:networkTimeout.description")}
 							</span>
 						</div>
 					</div>
 				)
 			) : (
-				<div
-					style={{
-						fontSize: "13px",
-						background: "var(--vscode-textCodeBlock-background)",
-						borderRadius: "0 0 4px 4px",
-						width: "100%",
-					}}>
-					<div
-						style={{
-							color: "var(--vscode-testing-iconFailed)",
-							marginBottom: "8px",
-							padding: "0 10px",
-							overflowWrap: "break-word",
-							wordBreak: "break-word",
-						}}>
+				<div className="text-[13px] bg-vscode-textCodeBlock-background rounded-b-[4px] w-full">
+					<div className="text-vscode-testing-iconFailed mb-[8px] px-[10px] overflow-wrap-break-word break-words">
 						{server.error &&
 							server.error.split("\n").map((item, index) => (
 								<React.Fragment key={index}>
@@ -465,7 +366,7 @@ const ServerRow = ({ server, alwaysAllowMcp }: { server: McpServer; alwaysAllowM
 						appearance="secondary"
 						onClick={handleRestart}
 						disabled={server.status === "connecting"}
-						style={{ width: "calc(100% - 20px)", margin: "0 10px 10px 10px" }}>
+						className="w-[calc(100%-20px)] mx-[10px] mb-[10px]">
 						{server.status === "connecting" ? "Retrying..." : "Retry Connection"}
 					</VSCodeButton>
 				</div>
diff --git a/webview-ui/src/components/prompts/PromptsView.tsx b/webview-ui/src/components/prompts/PromptsView.tsx
index c494387042..8889591ddd 100644
--- a/webview-ui/src/components/prompts/PromptsView.tsx
+++ b/webview-ui/src/components/prompts/PromptsView.tsx
@@ -434,14 +434,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center">
-				<h3 className="text-vscode-foreground m-0">{t("prompts:title")}</h3>
+				<h3 className="text-foreground m-0">{t("prompts:title")}</h3>
 				<Button onClick={onDone}>{t("prompts:done")}</Button>
 			</TabHeader>
 
 			<TabContent>
 				<div>
 					<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
-						<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
+						<h3 className="text-foreground m-0">{t("prompts:modes.title")}</h3>
 						<div className="flex gap-2">
 							<Button
 								variant="ghost"
@@ -471,9 +471,9 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									<div
 										onClick={(e) => e.stopPropagation()}
 										onMouseDown={(e) => e.stopPropagation()}
-										className="absolute top-full right-0 w-[200px] mt-1 bg-vscode-editor-background border border-vscode-input-border rounded shadow-md z-[1000]">
+										className="absolute top-full right-0 w-[200px] mt-1 bg-background border border-border rounded shadow-md z-[1000]">
 										<div
-											className="p-2 cursor-pointer text-vscode-foreground text-sm"
+											className="p-2 cursor-pointer text-foreground text-sm"
 											onMouseDown={(e) => {
 												e.preventDefault() // Prevent blur
 												vscode.postMessage({
@@ -485,7 +485,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 											{t("prompts:modes.editGlobalModes")}
 										</div>
 										<div
-											className="p-2 cursor-pointer text-vscode-foreground text-sm border-t border-vscode-input-border"
+											className="p-2 cursor-pointer text-foreground text-sm border-t border-border"
 											onMouseDown={(e) => {
 												e.preventDefault() // Prevent blur
 												vscode.postMessage({
@@ -507,9 +507,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</div>
 					</div>
 
-					<div className="text-sm text-vscode-descriptionForeground mb-3">
-						{t("prompts:modes.createModeHelpText")}
-					</div>
+					<div className="text-sm text-muted-foreground mb-3">{t("prompts:modes.createModeHelpText")}</div>
 
 					<div className="flex items-center gap-1 mb-3">
 						<Popover open={open} onOpenChange={onOpenChange}>
@@ -641,7 +639,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								</Button>
 							)}
 						</div>
-						<div className="text-sm text-vscode-descriptionForeground mb-2">
+						<div className="text-sm text-muted-foreground mb-2">
 							{t("prompts:roleDefinition.description")}
 						</div>
 						<Textarea
@@ -702,7 +700,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										))}
 									</SelectContent>
 								</Select>
-								<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
+								<div className="text-xs mt-1.5 text-muted-foreground">
 									{t("prompts:apiConfiguration.select")}
 								</div>
 							</div>
@@ -728,7 +726,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								)}
 							</div>
 							{!findModeBySlug(visualMode, customModes) && (
-								<div className="text-sm text-vscode-descriptionForeground mb-2">
+								<div className="text-sm text-muted-foreground mb-2">
 									{t("prompts:tools.builtInModesText")}
 								</div>
 							)}
@@ -750,7 +748,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 												disabled={!isCustomMode}>
 												{t(`prompts:tools.toolNames.${group}`)}
 												{group === "edit" && (
-													<div className="text-xs text-vscode-descriptionForeground mt-0.5">
+													<div className="text-xs text-muted-foreground mt-0.5">
 														{t("prompts:tools.allowedFiles")}{" "}
 														{(() => {
 															const currentMode = getCurrentMode()
@@ -773,7 +771,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									})}
 								</div>
 							) : (
-								<div className="text-sm text-vscode-foreground mb-2 leading-relaxed">
+								<div className="text-sm text-foreground mb-2 leading-relaxed">
 									{(() => {
 										const currentMode = getCurrentMode()
 										const enabledGroups = currentMode?.groups || []
@@ -821,7 +819,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								</Button>
 							)}
 						</div>
-						<div className="text-[13px] text-vscode-descriptionForeground mb-2">
+						<div className="text-[13px] text-muted-foreground mb-2">
 							{t("prompts:customInstructions.description", {
 								modeName: getCurrentMode()?.name || "Code",
 							})}
@@ -861,7 +859,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							className="w-full resize-y"
 							data-testid={`${getCurrentMode()?.slug || "code"}-custom-instructions-textarea`}
 						/>
-						<div className="text-xs text-vscode-descriptionForeground mt-1.5">
+						<div className="text-xs text-muted-foreground mt-1.5">
 							<Trans
 								i18nKey="prompts:customInstructions.loadFromFile"
 								values={{
@@ -894,7 +892,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 				</div>
 
-				<div className="pb-4 border-b border-vscode-input-border">
+				<div className="pb-4 border-b border-border">
 					<div className="flex gap-2">
 						<Button
 							variant="default"
@@ -932,7 +930,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					<div className="mt-4">
 						<button
 							onClick={() => setIsSystemPromptDisclosureOpen(!isSystemPromptDisclosureOpen)}
-							className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
+							className="flex items-center text-xs text-foreground hover:text-vscode-textLink-foreground focus:outline-none"
 							aria-expanded={isSystemPromptDisclosureOpen}>
 							<span
 								className={`codicon codicon-${isSystemPromptDisclosureOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
@@ -940,7 +938,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						</button>
 
 						{isSystemPromptDisclosureOpen && (
-							<div className="text-xs text-vscode-descriptionForeground mt-2 ml-5">
+							<div className="text-xs text-muted-foreground mt-2 ml-5">
 								<Trans
 									i18nKey="prompts:advancedSystemPrompt.description"
 									values={{
@@ -972,10 +970,10 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 				</div>
 
-				<div className="pb-5 border-b border-vscode-input-border">
-					<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
+				<div className="pb-5 border-b border-border">
+					<h3 className="text-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
 
-					<div className="text-sm text-vscode-descriptionForeground mb-2">
+					<div className="text-sm text-muted-foreground mb-2">
 						{t("prompts:globalCustomInstructions.description", {
 							language: i18next.language,
 						})}
@@ -996,7 +994,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						className="w-full resize-y"
 						data-testid="global-custom-instructions-textarea"
 					/>
-					<div className="text-xs text-vscode-descriptionForeground mt-1.5">
+					<div className="text-xs text-muted-foreground mt-1.5">
 						<Trans
 							i18nKey="prompts:globalCustomInstructions.loadFromFile"
 							components={{
@@ -1020,8 +1018,8 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 				</div>
 
-				<div className="mt-5 pb-15 border-b border-vscode-input-border">
-					<h3 className="text-vscode-foreground mb-3">{t("prompts:supportPrompts.title")}</h3>
+				<div className="mt-5 pb-[3.75rem] border-b border-border">
+					<h3 className="text-foreground mb-3">{t("prompts:supportPrompts.title")}</h3>
 					<div className="flex gap-4 items-center flex-wrap py-1">
 						<Select
 							value={activeSupportOption}
@@ -1040,7 +1038,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 
 					{/* Support prompt description */}
-					<div className="text-[13px] text-vscode-descriptionForeground my-2 mb-4">
+					<div className="text-[13px] text-muted-foreground my-2 mb-4">
 						{t(`prompts:supportPrompts.types.${activeSupportOption}.description`)}
 					</div>
 
@@ -1074,13 +1072,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						{activeSupportOption === "ENHANCE" && (
 							<>
 								<div>
-									<div className="text-vscode-foreground text-[13px] mb-5 mt-1.5"></div>
+									<div className="text-foreground text-[13px] mb-5 mt-1.5"></div>
 									<div className="mb-3">
 										<div className="mb-2">
 											<div className="font-bold mb-1">
 												{t("prompts:supportPrompts.enhance.apiConfiguration")}
 											</div>
-											<div className="text-[13px] text-vscode-descriptionForeground">
+											<div className="text-[13px] text-muted-foreground">
 												{t("prompts:supportPrompts.enhance.apiConfigDescription")}
 											</div>
 										</div>
@@ -1143,7 +1141,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 			{isCreateModeDialogOpen && (
 				<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
-					<div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative">
+					<div className="w-[calc(100vw-100px)] h-full bg-background shadow-md flex flex-col relative">
 						<div className="flex-1 p-5 overflow-y-auto min-h-0">
 							<Button
 								variant="ghost"
@@ -1163,9 +1161,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									}}
 									className="w-full"
 								/>
-								{nameError && (
-									<div className="text-xs text-vscode-errorForeground mt-1">{nameError}</div>
-								)}
+								{nameError && <div className="text-xs text-destructive mt-1">{nameError}</div>}
 							</div>
 							<div className="mb-4">
 								<div className="font-bold mb-1">{t("prompts:createModeDialog.slug.label")}</div>
@@ -1177,16 +1173,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									}}
 									className="w-full"
 								/>
-								<div className="text-xs text-vscode-descriptionForeground mt-1">
+								<div className="text-xs text-muted-foreground mt-1">
 									{t("prompts:createModeDialog.slug.description")}
 								</div>
-								{slugError && (
-									<div className="text-xs text-vscode-errorForeground mt-1">{slugError}</div>
-								)}
+								{slugError && <div className="text-xs text-destructive mt-1">{slugError}</div>}
 							</div>
 							<div className="mb-4">
 								<div className="font-bold mb-1">{t("prompts:createModeDialog.saveLocation.label")}</div>
-								<div className="text-sm text-vscode-descriptionForeground mb-2">
+								<div className="text-sm text-muted-foreground mb-2">
 									{t("prompts:createModeDialog.saveLocation.description")}
 								</div>
 								<VSCodeRadioGroup
@@ -1198,29 +1192,24 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									}}>
 									<VSCodeRadio value="global">
 										{t("prompts:createModeDialog.saveLocation.global.label")}
-										<div className="text-xs text-vscode-descriptionForeground mt-0.5">
+										<div className="text-xs text-muted-foreground mt-0.5">
 											{t("prompts:createModeDialog.saveLocation.global.description")}
 										</div>
 									</VSCodeRadio>
 									<VSCodeRadio value="project">
 										{t("prompts:createModeDialog.saveLocation.project.label")}
-										<div className="text-xs text-vscode-descriptionForeground mt-0.5">
+										<div className="text-xs text-muted-foreground mt-0.5">
 											{t("prompts:createModeDialog.saveLocation.project.description")}
 										</div>
 									</VSCodeRadio>
 								</VSCodeRadioGroup>
 							</div>
 
-							<div style={{ marginBottom: "16px" }}>
-								<div style={{ fontWeight: "bold", marginBottom: "4px" }}>
+							<div className="mb-4">
+								<div className="font-bold mb-1">
 									{t("prompts:createModeDialog.roleDefinition.label")}
 								</div>
-								<div
-									style={{
-										fontSize: "13px",
-										color: "var(--vscode-descriptionForeground)",
-										marginBottom: "8px",
-									}}>
+								<div className="text-[13px] text-muted-foreground mb-2">
 									{t("prompts:createModeDialog.roleDefinition.description")}
 								</div>
 								<Textarea
@@ -1232,14 +1221,12 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 									className="w-full resize-y"
 								/>
 								{roleDefinitionError && (
-									<div className="text-xs text-vscode-errorForeground mt-1">
-										{roleDefinitionError}
-									</div>
+									<div className="text-xs text-destructive mt-1">{roleDefinitionError}</div>
 								)}
 							</div>
 							<div className="mb-4">
 								<div className="font-bold mb-1">{t("prompts:createModeDialog.tools.label")}</div>
-								<div className="text-[13px] text-vscode-descriptionForeground mb-2">
+								<div className="text-[13px] text-muted-foreground mb-2">
 									{t("prompts:createModeDialog.tools.description")}
 								</div>
 								<div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2">
@@ -1263,15 +1250,13 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										</VSCodeCheckbox>
 									))}
 								</div>
-								{groupsError && (
-									<div className="text-xs text-vscode-errorForeground mt-1">{groupsError}</div>
-								)}
+								{groupsError && <div className="text-xs text-destructive mt-1">{groupsError}</div>}
 							</div>
 							<div className="mb-4">
 								<div className="font-bold mb-1">
 									{t("prompts:createModeDialog.customInstructions.label")}
 								</div>
-								<div className="text-[13px] text-vscode-descriptionForeground mb-2">
+								<div className="text-[13px] text-muted-foreground mb-2">
 									{t("prompts:createModeDialog.customInstructions.description")}
 								</div>
 								<Textarea
@@ -1284,7 +1269,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 								/>
 							</div>
 						</div>
-						<div className="flex justify-end p-3 px-5 gap-2 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background">
+						<div className="flex justify-end p-3 px-5 gap-2 border-t border-vscode-editor-lineHighlightBorder bg-background">
 							<Button variant="secondary" onClick={() => setIsCreateModeDialogOpen(false)}>
 								{t("prompts:createModeDialog.buttons.cancel")}
 							</Button>
@@ -1298,7 +1283,7 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 			{isDialogOpen && (
 				<div className="fixed inset-0 flex justify-end bg-black/50 z-[1000]">
-					<div className="w-[calc(100vw-100px)] h-full bg-vscode-editor-background shadow-md flex flex-col relative">
+					<div className="w-[calc(100vw-100px)] h-full bg-background shadow-md flex flex-col relative">
 						<div className="flex-1 p-5 overflow-y-auto min-h-0">
 							<Button
 								variant="ghost"
@@ -1313,11 +1298,11 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 										modeName: getCurrentMode()?.name || "Code",
 									})}
 							</h2>
-							<pre className="p-2 whitespace-pre-wrap break-words font-mono text-vscode-editor-font-size text-vscode-editor-foreground bg-vscode-editor-background border border-vscode-editor-lineHighlightBorder rounded overflow-y-auto">
+							<pre className="p-2 whitespace-pre-wrap break-words font-mono text-base text-foreground bg-background border border-vscode-editor-lineHighlightBorder rounded overflow-y-auto">
 								{selectedPromptContent}
 							</pre>
 						</div>
-						<div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-vscode-editor-background">
+						<div className="flex justify-end p-3 px-5 border-t border-vscode-editor-lineHighlightBorder bg-background">
 							<Button variant="secondary" onClick={() => setIsDialogOpen(false)}>
 								{t("prompts:createModeDialog.close")}
 							</Button>
diff --git a/webview-ui/src/components/settings/ApiConfigManager.tsx b/webview-ui/src/components/settings/ApiConfigManager.tsx
index 841de5d8a2..28f7700dd1 100644
--- a/webview-ui/src/components/settings/ApiConfigManager.tsx
+++ b/webview-ui/src/components/settings/ApiConfigManager.tsx
@@ -372,7 +372,7 @@ const ApiConfigManager = ({
 						}}
 						placeholder={t("settings:providers.enterProfileName")}
 						data-testid="new-profile-input"
-						style={{ width: "100%" }}
+						className="w-full"
 						onKeyDown={(e: unknown) => {
 							const event = e as { key: string }
 							if (event.key === "Enter" && newProfileName.trim()) {
diff --git a/webview-ui/src/components/settings/BrowserSettings.tsx b/webview-ui/src/components/settings/BrowserSettings.tsx
index d77ee16a8b..9764984c6b 100644
--- a/webview-ui/src/components/settings/BrowserSettings.tsx
+++ b/webview-ui/src/components/settings/BrowserSettings.tsx
@@ -2,6 +2,7 @@ import { VSCodeButton, VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-u
 import { SquareMousePointer } from "lucide-react"
 import { HTMLAttributes, useEffect, useMemo, useState } from "react"
 
+import { cn } from "@/lib/utils"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Slider } from "@/components/ui"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { vscode } from "@/utils/vscode"
@@ -188,7 +189,7 @@ export const BrowserSettings = ({
 											setCachedStateField("remoteBrowserHost", e.target.value || undefined)
 										}
 										placeholder={t("settings:browser.remote.urlPlaceholder")}
-										style={{ flexGrow: 1 }}
+										className="grow"
 									/>
 									<VSCodeButton disabled={testingConnection} onClick={testConnection}>
 										{testingConnection || discovering
@@ -198,11 +199,12 @@ export const BrowserSettings = ({
 								</div>
 								{testResult && (
 									<div
-										className={`p-2 rounded-xs text-sm ${
+										className={cn(
+											"p-2 rounded-xs text-sm",
 											testResult.success
 												? "bg-green-800/20 text-green-400"
-												: "bg-red-800/20 text-red-400"
-										}`}>
+												: "bg-red-800/20 text-red-400",
+										)}>
 										{testResult.text}
 									</div>
 								)}
diff --git a/webview-ui/src/components/settings/ModelDescriptionMarkdown.tsx b/webview-ui/src/components/settings/ModelDescriptionMarkdown.tsx
index d6aac8ba74..734b307047 100644
--- a/webview-ui/src/components/settings/ModelDescriptionMarkdown.tsx
+++ b/webview-ui/src/components/settings/ModelDescriptionMarkdown.tsx
@@ -1,11 +1,32 @@
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { memo, useEffect, useRef, useState } from "react"
+import React, { memo, useEffect, useRef, useState, FC, PropsWithChildren } from "react" // Added React, FC, PropsWithChildren
 import { useRemark } from "react-remark"
 
 import { cn } from "@/lib/utils"
 import { Collapsible, CollapsibleTrigger } from "@/components/ui"
 
-import { StyledMarkdown } from "./styles"
+// Removed import { StyledMarkdown } from "./styles"
+
+// Moved StyledMarkdown component definition here
+interface StyledMarkdownProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const StyledMarkdown: FC<PropsWithChildren<StyledMarkdownProps>> = ({ className, children, ...props }) => {
+	return (
+		<div
+			className={cn(
+				"font-vscode-font-family text-xs text-vscode-descriptionForeground",
+				"[&_p]:leading-tight [&_p]:m-0 [&_p]:whitespace-pre-wrap",
+				"[&_li]:leading-tight [&_li]:m-0",
+				"[&_ol]:leading-tight [&_ol]:m-0 [&_ol]:pl-[1.5em] [&_ol]:ml-0",
+				"[&_ul]:leading-tight [&_ul]:m-0 [&_ul]:pl-[1.5em] [&_ul]:ml-0",
+				"[&_a]:no-underline hover:[&_a]:underline",
+				className,
+			)}
+			{...props}>
+			{children}
+		</div>
+	)
+}
 
 export const ModelDescriptionMarkdown = memo(
 	({
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index eeb11ea6eb..300a2e6285 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -414,7 +414,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 				<div className="flex gap-2">
 					<Button
 						variant={isSettingValid ? "default" : "secondary"}
-						className={!isSettingValid ? "!border-vscode-errorForeground" : ""}
+						className={cn(!isSettingValid && "!border-vscode-errorForeground")}
 						title={
 							!isSettingValid
 								? errorMessage
diff --git a/webview-ui/src/components/settings/providers/Bedrock.tsx b/webview-ui/src/components/settings/providers/Bedrock.tsx
index fc69e74dde..dae36ea800 100644
--- a/webview-ui/src/components/settings/providers/Bedrock.tsx
+++ b/webview-ui/src/components/settings/providers/Bedrock.tsx
@@ -109,9 +109,8 @@ export const Bedrock = ({ apiConfiguration, setApiConfigurationField, selectedMo
 					<div className="flex items-center gap-1">
 						<span>{t("settings:providers.enablePromptCaching")}</span>
 						<i
-							className="codicon codicon-info text-vscode-descriptionForeground"
+							className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 							title={t("settings:providers.enablePromptCachingTitle")}
-							style={{ fontSize: "12px" }}
 						/>
 					</div>
 				</Checkbox>
diff --git a/webview-ui/src/components/settings/providers/Glama.tsx b/webview-ui/src/components/settings/providers/Glama.tsx
index 1150e14936..d0a9d7e777 100644
--- a/webview-ui/src/components/settings/providers/Glama.tsx
+++ b/webview-ui/src/components/settings/providers/Glama.tsx
@@ -45,7 +45,7 @@ export const Glama = ({ apiConfiguration, setApiConfigurationField, routerModels
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 			{!apiConfiguration?.glamaApiKey && (
-				<VSCodeButtonLink href={getGlamaAuthUrl(uriScheme)} style={{ width: "100%" }} appearance="primary">
+				<VSCodeButtonLink href={getGlamaAuthUrl(uriScheme)} className="w-full" appearance="primary">
 					{t("settings:providers.getGlamaApiKey")}
 				</VSCodeButtonLink>
 			)}
diff --git a/webview-ui/src/components/settings/providers/LMStudio.tsx b/webview-ui/src/components/settings/providers/LMStudio.tsx
index 0979ec9242..82ad489509 100644
--- a/webview-ui/src/components/settings/providers/LMStudio.tsx
+++ b/webview-ui/src/components/settings/providers/LMStudio.tsx
@@ -119,13 +119,7 @@ export const LMStudio = ({ apiConfiguration, setApiConfigurationField }: LMStudi
 								))}
 							</VSCodeRadioGroup>
 							{lmStudioModels.length === 0 && (
-								<div
-									className="text-sm rounded-xs p-2"
-									style={{
-										backgroundColor: "var(--vscode-inputValidation-infoBackground)",
-										border: "1px solid var(--vscode-inputValidation-infoBorder)",
-										color: "var(--vscode-inputValidation-infoForeground)",
-									}}>
+								<div className="text-sm rounded-xs p-2 bg-vscode-inputValidation-infoBackground border border-vscode-inputValidation-infoBorder text-vscode-inputValidation-infoForeground">
 									{t("settings:providers.lmStudio.noModelsFound")}
 								</div>
 							)}
diff --git a/webview-ui/src/components/settings/providers/OpenAICompatible.tsx b/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
index 9d55d57f8c..acc4ff491e 100644
--- a/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
+++ b/webview-ui/src/components/settings/providers/OpenAICompatible.tsx
@@ -7,6 +7,7 @@ import { ModelInfo, ReasoningEffort as ReasoningEffortType } from "@roo/schemas"
 import { ApiConfiguration, azureOpenAiDefaultApiVersion, openAiModelInfoSaneDefaults } from "@roo/shared/api"
 import { ExtensionMessage } from "@roo/shared/ExtensionMessage"
 
+import { cn } from "@/lib/utils" // Added cn import
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Button } from "@src/components/ui"
 
@@ -251,17 +252,16 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							""
 						}
 						type="text"
-						style={{
-							borderColor: (() => {
+						className={cn(
+							"w-full",
+							"border", // Added base border class
+							(() => {
 								const value = apiConfiguration?.openAiCustomModelInfo?.maxTokens
-
-								if (!value) {
-									return "var(--vscode-input-border)"
-								}
-
-								return value > 0 ? "var(--vscode-charts-green)" : "var(--vscode-errorForeground)"
+								// Use `value === undefined || value === null` for a more robust check if 0 is a valid input but should not trigger default border
+								if (value === undefined || value === null) return "border-vscode-input-border"
+								return value > 0 ? "border-vscode-charts-green" : "border-vscode-errorForeground"
 							})(),
-						}}
+						)}
 						title={t("settings:providers.customModel.maxTokens.description")}
 						onInput={handleInputChange("openAiCustomModelInfo", (e) => {
 							const value = parseInt((e.target as HTMLInputElement).value)
@@ -272,7 +272,8 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							}
 						})}
 						placeholder={t("settings:placeholders.numbers.maxTokens")}
-						className="w-full">
+						/* className="w-full" */
+					>
 						<label className="block font-medium mb-1">
 							{t("settings:providers.customModel.maxTokens.label")}
 						</label>
@@ -290,17 +291,6 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							""
 						}
 						type="text"
-						style={{
-							borderColor: (() => {
-								const value = apiConfiguration?.openAiCustomModelInfo?.contextWindow
-
-								if (!value) {
-									return "var(--vscode-input-border)"
-								}
-
-								return value > 0 ? "var(--vscode-charts-green)" : "var(--vscode-errorForeground)"
-							})(),
-						}}
 						title={t("settings:providers.customModel.contextWindow.description")}
 						onInput={handleInputChange("openAiCustomModelInfo", (e) => {
 							const value = (e.target as HTMLInputElement).value
@@ -312,7 +302,14 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							}
 						})}
 						placeholder={t("settings:placeholders.numbers.contextWindow")}
-						className="w-full">
+						className={cn(
+							"w-full border", // Added base 'border' class
+							(() => {
+								const value = apiConfiguration?.openAiCustomModelInfo?.contextWindow
+								if (value === undefined || value === null) return "border-vscode-input-border" // Default border if no value
+								return value > 0 ? "border-vscode-charts-green" : "border-vscode-errorForeground"
+							})(),
+						)}>
 						<label className="block font-medium mb-1">
 							{t("settings:providers.customModel.contextWindow.label")}
 						</label>
@@ -340,9 +337,8 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							</span>
 						</Checkbox>
 						<i
-							className="codicon codicon-info text-vscode-descriptionForeground"
+							className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 							title={t("settings:providers.customModel.imageSupport.description")}
-							style={{ fontSize: "12px" }}
 						/>
 					</div>
 					<div className="text-sm text-vscode-descriptionForeground pt-1">
@@ -363,9 +359,8 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							<span className="font-medium">{t("settings:providers.customModel.computerUse.label")}</span>
 						</Checkbox>
 						<i
-							className="codicon codicon-info text-vscode-descriptionForeground"
+							className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 							title={t("settings:providers.customModel.computerUse.description")}
-							style={{ fontSize: "12px" }}
 						/>
 					</div>
 					<div className="text-sm text-vscode-descriptionForeground pt-1">
@@ -386,9 +381,8 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							<span className="font-medium">{t("settings:providers.customModel.promptCache.label")}</span>
 						</Checkbox>
 						<i
-							className="codicon codicon-info text-vscode-descriptionForeground"
+							className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 							title={t("settings:providers.customModel.promptCache.description")}
-							style={{ fontSize: "12px" }}
 						/>
 					</div>
 					<div className="text-sm text-vscode-descriptionForeground pt-1">
@@ -404,17 +398,6 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							""
 						}
 						type="text"
-						style={{
-							borderColor: (() => {
-								const value = apiConfiguration?.openAiCustomModelInfo?.inputPrice
-
-								if (!value && value !== 0) {
-									return "var(--vscode-input-border)"
-								}
-
-								return value >= 0 ? "var(--vscode-charts-green)" : "var(--vscode-errorForeground)"
-							})(),
-						}}
 						onChange={handleInputChange("openAiCustomModelInfo", (e) => {
 							const value = (e.target as HTMLInputElement).value
 							const parsed = parseFloat(value)
@@ -425,15 +408,21 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							}
 						})}
 						placeholder={t("settings:placeholders.numbers.inputPrice")}
-						className="w-full">
+						className={cn(
+							"w-full border", // Added base 'border' class
+							(() => {
+								const value = apiConfiguration?.openAiCustomModelInfo?.inputPrice
+								if (value === undefined || value === null) return "border-vscode-input-border"
+								return value >= 0 ? "border-vscode-charts-green" : "border-vscode-errorForeground"
+							})(),
+						)}>
 						<div className="flex items-center gap-1">
 							<label className="block font-medium mb-1">
 								{t("settings:providers.customModel.pricing.input.label")}
 							</label>
 							<i
-								className="codicon codicon-info text-vscode-descriptionForeground"
+								className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 								title={t("settings:providers.customModel.pricing.input.description")}
-								style={{ fontSize: "12px" }}
 							/>
 						</div>
 					</VSCodeTextField>
@@ -447,17 +436,6 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							""
 						}
 						type="text"
-						style={{
-							borderColor: (() => {
-								const value = apiConfiguration?.openAiCustomModelInfo?.outputPrice
-
-								if (!value && value !== 0) {
-									return "var(--vscode-input-border)"
-								}
-
-								return value >= 0 ? "var(--vscode-charts-green)" : "var(--vscode-errorForeground)"
-							})(),
-						}}
 						onChange={handleInputChange("openAiCustomModelInfo", (e) => {
 							const value = (e.target as HTMLInputElement).value
 							const parsed = parseFloat(value)
@@ -468,15 +446,21 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							}
 						})}
 						placeholder={t("settings:placeholders.numbers.outputPrice")}
-						className="w-full">
+						className={cn(
+							"w-full border", // Added base 'border' class
+							(() => {
+								const value = apiConfiguration?.openAiCustomModelInfo?.outputPrice
+								if (value === undefined || value === null) return "border-vscode-input-border"
+								return value >= 0 ? "border-vscode-charts-green" : "border-vscode-errorForeground"
+							})(),
+						)}>
 						<div className="flex items-center gap-1">
 							<label className="block font-medium mb-1">
 								{t("settings:providers.customModel.pricing.output.label")}
 							</label>
 							<i
-								className="codicon codicon-info text-vscode-descriptionForeground"
+								className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 								title={t("settings:providers.customModel.pricing.output.description")}
-								style={{ fontSize: "12px" }}
 							/>
 						</div>
 					</VSCodeTextField>
@@ -488,19 +472,16 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							<VSCodeTextField
 								value={apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice?.toString() ?? "0"}
 								type="text"
-								style={{
-									borderColor: (() => {
+								className={cn(
+									"w-full border", // Added base 'border' class
+									(() => {
 										const value = apiConfiguration?.openAiCustomModelInfo?.cacheReadsPrice
-
-										if (!value && value !== 0) {
-											return "var(--vscode-input-border)"
-										}
-
+										if (value === undefined || value === null) return "border-vscode-input-border"
 										return value >= 0
-											? "var(--vscode-charts-green)"
-											: "var(--vscode-errorForeground)"
+											? "border-vscode-charts-green"
+											: "border-vscode-errorForeground"
 									})(),
-								}}
+								)}
 								onChange={handleInputChange("openAiCustomModelInfo", (e) => {
 									const value = (e.target as HTMLInputElement).value
 									const parsed = parseFloat(value)
@@ -510,16 +491,14 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 										cacheReadsPrice: isNaN(parsed) ? 0 : parsed,
 									}
 								})}
-								placeholder={t("settings:placeholders.numbers.inputPrice")}
-								className="w-full">
+								placeholder={t("settings:placeholders.numbers.inputPrice")}>
 								<div className="flex items-center gap-1">
 									<span className="font-medium">
 										{t("settings:providers.customModel.pricing.cacheReads.label")}
 									</span>
 									<i
-										className="codicon codicon-info text-vscode-descriptionForeground"
+										className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 										title={t("settings:providers.customModel.pricing.cacheReads.description")}
-										style={{ fontSize: "12px" }}
 									/>
 								</div>
 							</VSCodeTextField>
@@ -528,19 +507,6 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 							<VSCodeTextField
 								value={apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice?.toString() ?? "0"}
 								type="text"
-								style={{
-									borderColor: (() => {
-										const value = apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice
-
-										if (!value && value !== 0) {
-											return "var(--vscode-input-border)"
-										}
-
-										return value >= 0
-											? "var(--vscode-charts-green)"
-											: "var(--vscode-errorForeground)"
-									})(),
-								}}
 								onChange={handleInputChange("openAiCustomModelInfo", (e) => {
 									const value = (e.target as HTMLInputElement).value
 									const parsed = parseFloat(value)
@@ -551,15 +517,23 @@ export const OpenAICompatible = ({ apiConfiguration, setApiConfigurationField }:
 									}
 								})}
 								placeholder={t("settings:placeholders.numbers.cacheWritePrice")}
-								className="w-full">
+								className={cn(
+									"w-full border",
+									(() => {
+										const value = apiConfiguration?.openAiCustomModelInfo?.cacheWritesPrice
+										if (value === undefined || value === null) return "border-vscode-input-border"
+										return value >= 0
+											? "border-vscode-charts-green"
+											: "border-vscode-errorForeground"
+									})(),
+								)}>
 								<div className="flex items-center gap-1">
 									<label className="block font-medium mb-1">
 										{t("settings:providers.customModel.pricing.cacheWrites.label")}
 									</label>
 									<i
-										className="codicon codicon-info text-vscode-descriptionForeground"
+										className="codicon codicon-info text-vscode-descriptionForeground text-xs"
 										title={t("settings:providers.customModel.pricing.cacheWrites.description")}
-										style={{ fontSize: "12px" }}
 									/>
 								</div>
 							</VSCodeTextField>
diff --git a/webview-ui/src/components/settings/providers/OpenRouter.tsx b/webview-ui/src/components/settings/providers/OpenRouter.tsx
index 696fcca331..130d659cb2 100644
--- a/webview-ui/src/components/settings/providers/OpenRouter.tsx
+++ b/webview-ui/src/components/settings/providers/OpenRouter.tsx
@@ -82,7 +82,7 @@ export const OpenRouter = ({
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 			{!apiConfiguration?.openRouterApiKey && (
-				<VSCodeButtonLink href={getOpenRouterAuthUrl(uriScheme)} style={{ width: "100%" }} appearance="primary">
+				<VSCodeButtonLink href={getOpenRouterAuthUrl(uriScheme)} className="w-full" appearance="primary">
 					{t("settings:providers.getOpenRouterApiKey")}
 				</VSCodeButtonLink>
 			)}
diff --git a/webview-ui/src/components/settings/providers/Requesty.tsx b/webview-ui/src/components/settings/providers/Requesty.tsx
index a8c8fc8099..a2b02d83df 100644
--- a/webview-ui/src/components/settings/providers/Requesty.tsx
+++ b/webview-ui/src/components/settings/providers/Requesty.tsx
@@ -59,10 +59,7 @@ export const Requesty = ({
 				{t("settings:providers.apiKeyStorageNotice")}
 			</div>
 			{!apiConfiguration?.requestyApiKey && (
-				<VSCodeButtonLink
-					href="https://app.requesty.ai/api-keys"
-					style={{ width: "100%" }}
-					appearance="primary">
+				<VSCodeButtonLink href="https://app.requesty.ai/api-keys" className="w-full" appearance="primary">
 					{t("settings:providers.getRequestyApiKey")}
 				</VSCodeButtonLink>
 			)}
diff --git a/webview-ui/src/components/settings/styles.ts b/webview-ui/src/components/settings/styles.ts
deleted file mode 100644
index 7eac289bb0..0000000000
--- a/webview-ui/src/components/settings/styles.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from "styled-components"
-
-// Keep StyledMarkdown as it's used by ModelDescriptionMarkdown.tsx
-export const StyledMarkdown = styled.div`
-	font-family:
-		var(--vscode-font-family),
-		system-ui,
-		-apple-system,
-		BlinkMacSystemFont,
-		"Segoe UI",
-		Roboto,
-		Oxygen,
-		Ubuntu,
-		Cantarell,
-		"Open Sans",
-		"Helvetica Neue",
-		sans-serif;
-	font-size: 12px;
-	color: var(--vscode-descriptionForeground);
-
-	p,
-	li,
-	ol,
-	ul {
-		line-height: 1.25;
-		margin: 0;
-	}
-
-	ol,
-	ul {
-		padding-left: 1.5em;
-		margin-left: 0;
-	}
-
-	p {
-		white-space: pre-wrap;
-	}
-
-	a {
-		text-decoration: none;
-	}
-	a {
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-`
diff --git a/webview-ui/src/components/ui/dialog.tsx b/webview-ui/src/components/ui/dialog.tsx
index ed3160f692..ae394f95ce 100644
--- a/webview-ui/src/components/ui/dialog.tsx
+++ b/webview-ui/src/components/ui/dialog.tsx
@@ -40,7 +40,7 @@ function DialogContent({ className, children, ...props }: React.ComponentProps<t
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					"bg-vscode-editor-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 					className,
 				)}
 				{...props}>
@@ -78,7 +78,7 @@ function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog
 	return (
 		<DialogPrimitive.Title
 			data-slot="dialog-title"
-			className={cn("text-lg leading-none font-semibold", className)}
+			className={cn("text-lg leading-none font-semibold my-0", className)}
 			{...props}
 		/>
 	)
@@ -88,7 +88,7 @@ function DialogDescription({ className, ...props }: React.ComponentProps<typeof
 	return (
 		<DialogPrimitive.Description
 			data-slot="dialog-description"
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn("text-muted-foreground text-sm my-0", className)}
 			{...props}
 		/>
 	)
diff --git a/webview-ui/src/components/ui/markdown/Blockquote.tsx b/webview-ui/src/components/ui/markdown/Blockquote.tsx
index e45a439e7e..29e0e181ae 100644
--- a/webview-ui/src/components/ui/markdown/Blockquote.tsx
+++ b/webview-ui/src/components/ui/markdown/Blockquote.tsx
@@ -1,3 +1,3 @@
 export const Blockquote = ({ children }: { children: React.ReactNode }) => {
-	return <div className="border-l-3 border-accent italic pl-2 py-2 mb-2">{children}</div>
+	return <div className="border-l-[3px] border-accent italic pl-2 py-2 mb-2">{children}</div>
 }
diff --git a/webview-ui/src/components/ui/markdown/CodeBlock.tsx b/webview-ui/src/components/ui/markdown/CodeBlock.tsx
index 5342e6e7a6..9a41e0bbdc 100644
--- a/webview-ui/src/components/ui/markdown/CodeBlock.tsx
+++ b/webview-ui/src/components/ui/markdown/CodeBlock.tsx
@@ -60,11 +60,7 @@ export const CodeBlock: FC<CodeBlockProps> = memo(({ language, value, className,
 				size="icon"
 				className="absolute top-1 right-1 cursor-pointer bg-black/10"
 				onClick={onCopy}>
-				{isCopied ? (
-					<CheckIcon style={{ width: 12, height: 12 }} />
-				) : (
-					<CopyIcon style={{ width: 12, height: 12 }} />
-				)}
+				{isCopied ? <CheckIcon className="w-3 h-3" /> : <CopyIcon className="w-3 h-3" />}
 			</Button>
 		</div>
 	)
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index f8bf1ab5a6..1d200dab01 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -123,6 +123,51 @@
 	--color-vscode-inputValidation-infoForeground: var(--vscode-inputValidation-infoForeground);
 	--color-vscode-inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
 	--color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
+	--color-vscode-descriptionForeground-transparent-30: color-mix(
+		in srgb,
+		var(--vscode-descriptionForeground) 30%,
+		transparent
+	);
+	--color-vscode-testing-iconPassed: var(--vscode-testing-iconPassed);
+	--color-vscode-testing-iconFailed: var(--vscode-testing-iconFailed);
+	--color-vscode-titleBar-inactiveForeground: var(--vscode-titleBar-inactiveForeground);
+	--color-vscode-titleBar-activeForeground: var(--vscode-titleBar-activeForeground);
+	--color-vscode-editor-lineHighlightBorder: var(--vscode-editor-lineHighlightBorder);
+	--color-vscode-titleBar-inactiveForeground-20: color-mix(
+		in srgb,
+		var(--vscode-titleBar-inactiveForeground) 20%,
+		transparent
+	);
+
+	/* Custom color for CodeBlock background with fallbacks */
+	--color-vscode-code-block-background: var(
+		--vscode-editor-background,
+		var(--vscode-sideBar-background, rgb(30 30 30))
+	);
+
+	/* Custom colors for Slider border */
+	--color-vscode-slider-border-light: #767676;
+	--color-vscode-slider-border-dark: #858585;
+
+	/* Fallback colors for Highlight.js (Light theme) */
+	--color-vscode-fallback-light-comment: #008000;
+	--color-vscode-fallback-light-doctag: #0000ff;
+	--color-vscode-fallback-light-keyword: #0000ff;
+	--color-vscode-fallback-light-title-class: #001080;
+	--color-vscode-fallback-light-title-function: #795e26;
+	--color-vscode-fallback-light-number: #098658;
+	--color-vscode-fallback-light-regexp: #a31515;
+	--color-vscode-fallback-light-string: #a31515;
+
+	/* Fallback colors for Highlight.js (Dark theme) */
+	--color-vscode-fallback-dark-comment: #6a9955;
+	--color-vscode-fallback-dark-doctag: #569cd6;
+	--color-vscode-fallback-dark-keyword: #569cd6;
+	--color-vscode-fallback-dark-title-class: #9cdcfe;
+	--color-vscode-fallback-dark-title-function: #dcdcaa;
+	--color-vscode-fallback-dark-number: #b5cea8;
+	--color-vscode-fallback-dark-regexp: #ce9178;
+	--color-vscode-fallback-dark-string: #ce9178;
 }
 
 @layer base {
@@ -184,6 +229,11 @@
 	.history-item-highlight {
 		@apply underline;
 	}
+
+	/* Shiki code block inner code transparency */
+	.shiki > code {
+		background-color: transparent !important;
+	}
 }
 
 /* Form Element Focus States */
@@ -413,3 +463,16 @@ input[cmdk-input]:focus {
 .codicon[class*="codicon-"] {
 	text-rendering: geometricPrecision !important;
 }
+
+/**
+  * Animations
+  */
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}