diff --git a/evals/pnpm-lock.yaml b/evals/pnpm-lock.yaml
index b50e3a3492c..fd84384f720 100644
--- a/evals/pnpm-lock.yaml
+++ b/evals/pnpm-lock.yaml
@@ -1124,19 +1124,6 @@ packages:
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
-  '@radix-ui/react-alert-dialog@1.1.7':
-    resolution: {integrity: sha512-7Gx1gcoltd0VxKoR8mc+TAVbzvChJyZryZsTam0UhoL92z0L+W8ovxvcgvd+nkz24y7Qc51JQKBAGe4+825tYw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-arrow@1.1.2':
     resolution: {integrity: sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==}
     peerDependencies:
@@ -4930,20 +4917,6 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
-  '@radix-ui/react-alert-dialog@1.1.7(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.2
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.12)(react@19.0.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.0.12)(react@19.0.0)
-      '@radix-ui/react-dialog': 1.1.7(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@radix-ui/react-primitive': 2.0.3(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      '@radix-ui/react-slot': 1.2.0(@types/react@19.0.12)(react@19.0.0)
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-    optionalDependencies:
-      '@types/react': 19.0.12
-      '@types/react-dom': 19.0.4(@types/react@19.0.12)
-
   '@radix-ui/react-arrow@1.1.2(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.0.2(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
diff --git a/src/core/webview/ClineProvider.ts b/src/core/webview/ClineProvider.ts
index 9633dd11efb..84723dfcbaf 100644
--- a/src/core/webview/ClineProvider.ts
+++ b/src/core/webview/ClineProvider.ts
@@ -761,7 +761,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
             <meta name="theme-color" content="#000000">
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}' https://us-assets.i.posthog.com; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}' 'wasm-unsafe-eval' https://us-assets.i.posthog.com; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">
diff --git a/webview-ui/jest.config.cjs b/webview-ui/jest.config.cjs
index be5b6aa1be3..4f48a3271fb 100644
--- a/webview-ui/jest.config.cjs
+++ b/webview-ui/jest.config.cjs
@@ -17,7 +17,10 @@ module.exports = {
 		"^\\./setup$": "<rootDir>/src/__mocks__/i18n/setup.ts",
 		"^src/i18n/TranslationContext$": "<rootDir>/src/__mocks__/i18n/TranslationContext.tsx",
 		"^\\.\\./TranslationContext$": "<rootDir>/src/__mocks__/i18n/TranslationContext.tsx",
-		"^\\./TranslationContext$": "<rootDir>/src/__mocks__/i18n/TranslationContext.tsx"
+		"^\\./TranslationContext$": "<rootDir>/src/__mocks__/i18n/TranslationContext.tsx",
+		'^react-markdown$': 'identity-obj-proxy',
+		'^remark-gfm$': 'identity-obj-proxy',
+		'^shiki$': 'identity-obj-proxy'
 	},
 	reporters: [["jest-simple-dot-reporter", {}]],
 	transformIgnorePatterns: [
diff --git a/webview-ui/package-lock.json b/webview-ui/package-lock.json
index abd6901452f..08ef2b58e63 100644
--- a/webview-ui/package-lock.json
+++ b/webview-ui/package-lock.json
@@ -48,6 +48,7 @@
 				"remark-gfm": "^4.0.1",
 				"remove-markdown": "^0.6.0",
 				"shell-quote": "^1.8.2",
+				"shiki": "^2.3.2",
 				"styled-components": "^6.1.13",
 				"tailwind-merge": "^2.6.0",
 				"tailwindcss": "^4.0.0",
@@ -82,7 +83,6 @@
 				"jest": "^29.7.0",
 				"jest-environment-jsdom": "^29.7.0",
 				"jest-simple-dot-reporter": "^1.0.5",
-				"shiki": "^2.3.2",
 				"storybook": "^8.5.6",
 				"storybook-dark-mode": "^4.0.2",
 				"ts-jest": "^29.2.5",
@@ -5911,7 +5911,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-2.3.2.tgz",
 			"integrity": "sha512-s7vyL3LzUKm3Qwf36zRWlavX9BQMZTIq9B1almM63M5xBuSldnsTHCmsXzoF/Kyw4k7Xgas7yAyJz9VR/vcP1A==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/engine-javascript": "2.3.2",
@@ -5926,7 +5925,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-2.3.2.tgz",
 			"integrity": "sha512-w3IEMu5HfL/OaJTsMbIfZ1HRPnWVYRANeDtmsdIIEgUOcLjzFJFQwlnkckGjKHekEzNqlMLbgB/twnfZ/EEAGg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/types": "2.3.2",
@@ -5938,7 +5936,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-2.3.2.tgz",
 			"integrity": "sha512-vikMY1TroyZXUHIXbMnvY/mjtOxMn+tavcfAeQPgWS9FHcgFSUoEtywF5B5sOLb9NXb8P2vb7odkh3nj15/00A==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/types": "2.3.2",
@@ -5949,7 +5946,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-2.3.2.tgz",
 			"integrity": "sha512-UqI6bSxFzhexIJficZLKeB1L2Sc3xoNiAV0yHpfbg5meck93du+EKQtsGbBv66Ki53XZPhnR/kYkOr85elIuFw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/types": "2.3.2"
@@ -5959,7 +5955,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-2.3.2.tgz",
 			"integrity": "sha512-QAh7D/hhfYKHibkG2tti8vxNt3ekAH5EqkXJeJbTh7FGvTCWEI7BHqNCtMdjFvZ0vav5nvUgdvA7/HI7pfsB4w==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/types": "2.3.2"
@@ -5969,7 +5964,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-2.3.2.tgz",
 			"integrity": "sha512-CBaMY+a3pepyC4SETi7+bSzO0f6hxEQJUUuS4uD7zppzjmrN4ZRtBqxaT+wOan26CR9eeJ5iBhc4qvWEwn7Eeg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/vscode-textmate": "^10.0.1",
@@ -5980,7 +5974,6 @@
 			"version": "10.0.1",
 			"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.1.tgz",
 			"integrity": "sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@sinclair/typebox": {
@@ -10543,7 +10536,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
 			"integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/enhanced-resolve": {
@@ -12816,7 +12808,6 @@
 			"version": "9.0.4",
 			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.4.tgz",
 			"integrity": "sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/hast": "^3.0.0",
@@ -12840,7 +12831,6 @@
 			"version": "4.0.4",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
 			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "*"
@@ -12850,7 +12840,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
 			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
-			"dev": true,
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -12861,7 +12850,6 @@
 			"version": "13.2.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
 			"integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/hast": "^3.0.0",
@@ -12883,7 +12871,6 @@
 			"version": "6.5.0",
 			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
 			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
-			"dev": true,
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -12894,7 +12881,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
 			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
-			"dev": true,
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -12905,7 +12891,6 @@
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
 			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0"
@@ -13080,7 +13065,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
 			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
-			"dev": true,
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -18059,7 +18043,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-3.1.0.tgz",
 			"integrity": "sha512-BJ3Jy22YlgejHSO7Fvmz1kKazlaPmRSUH+4adTDUS/dKQ4wLxI+gALZ8updbaux7/m7fIlpgOZ5fp/Inq5jUAw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"emoji-regex-xs": "^1.0.0",
@@ -19309,7 +19292,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz",
 			"integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"regex-utilities": "^2.3.0"
@@ -19319,7 +19301,6 @@
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
 			"integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"regex-utilities": "^2.3.0"
@@ -19329,7 +19310,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
 			"integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/regexp.prototype.flags": {
@@ -20140,7 +20120,6 @@
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/shiki/-/shiki-2.3.2.tgz",
 			"integrity": "sha512-UZhz/gsUz7DHFbQBOJP7eXqvKyYvMGramxQiSDc83M/7OkWm6OdVHAReEc3vMLh6L6TRhgL9dvhXz9XDkCDaaw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@shikijs/core": "2.3.2",
diff --git a/webview-ui/package.json b/webview-ui/package.json
index 6dbda7b0045..b209f9e1358 100644
--- a/webview-ui/package.json
+++ b/webview-ui/package.json
@@ -63,7 +63,8 @@
 		"tailwindcss": "^4.0.0",
 		"tailwindcss-animate": "^1.0.7",
 		"vscrui": "^0.2.2",
-		"zod": "^3.24.2"
+		"zod": "^3.24.2",
+		"shiki": "^2.3.2"
 	},
 	"devDependencies": {
 		"@storybook/addon-essentials": "^8.5.6",
@@ -92,7 +93,6 @@
 		"jest": "^29.7.0",
 		"jest-environment-jsdom": "^29.7.0",
 		"jest-simple-dot-reporter": "^1.0.5",
-		"shiki": "^2.3.2",
 		"storybook": "^8.5.6",
 		"storybook-dark-mode": "^4.0.2",
 		"ts-jest": "^29.2.5",
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 05005e46a1a..fcc0efd31f4 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -17,7 +17,6 @@ import { vscode } from "../../utils/vscode"
 import CodeAccordian, { removeLeadingNonAlphanumeric } from "../common/CodeAccordian"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import CommandOutputViewer from "../common/CommandOutputViewer"
-import MarkdownBlock from "../common/MarkdownBlock"
 import { ReasoningBlock } from "./ReasoningBlock"
 import Thumbnails from "../common/Thumbnails"
 import McpResourceRow from "../mcp/McpResourceRow"
@@ -25,6 +24,7 @@ import McpToolRow from "../mcp/McpToolRow"
 import { highlightMentions } from "./TaskHeader"
 import { CheckpointSaved } from "./checkpoints/CheckpointSaved"
 import FollowUpSuggest from "./FollowUpSuggest"
+import { Markdown } from "@/components/ui/markdown/Markdown"
 
 interface ChatRowProps {
 	message: ClineMessage
@@ -74,6 +74,71 @@ const ChatRow = memo(
 
 export default ChatRow
 
+// Define the new wrapper component with copy functionality
+const MarkdownWithCopy = memo(({ content, partial }: { content: string; partial?: boolean }) => {
+	const [isHovering, setIsHovering] = useState(false)
+	// Assuming useCopyToClipboard is imported correctly (it is, line 5)
+	const { copyWithFeedback } = useCopyToClipboard(200) // Use shorter feedback duration like original
+
+	return (
+		<div
+			onMouseEnter={() => setIsHovering(true)}
+			onMouseLeave={() => setIsHovering(false)}
+			style={{ position: "relative" }}>
+			{/* Apply negative margins and text wrap styles */}
+			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere" }}>
+				{/* Use the imported shared Markdown component */}
+				<Markdown content={content} />
+			</div>
+			{/* Conditional Copy Button */}
+			{content && !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>
+					<VSCodeButton
+						className="copy-button"
+						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(content) // Use content prop
+							if (success) {
+								const button = document.activeElement as HTMLElement
+								if (button) {
+									button.style.background = "var(--vscode-button-background)"
+									setTimeout(() => {
+										button.style.background = ""
+									}, 200)
+								}
+							}
+						}}
+						title="Copy as markdown">
+						<span className="codicon codicon-copy"></span>
+					</VSCodeButton>
+				</div>
+			)}
+		</div>
+	)
+})
+
 export const ChatRowContent = ({
 	message,
 	lastModifiedMessage,
@@ -555,7 +620,7 @@ export const ChatRowContent = ({
 								{t("chat:subtasks.newTaskContent")}
 							</div>
 							<div style={{ padding: "12px 16px", backgroundColor: "var(--vscode-editor-background)" }}>
-								<MarkdownBlock markdown={tool.content} />
+								<Markdown content={tool.content || ""} />
 							</div>
 						</div>
 					</>
@@ -592,7 +657,7 @@ export const ChatRowContent = ({
 								{t("chat:subtasks.completionContent")}
 							</div>
 							<div style={{ padding: "12px 16px", backgroundColor: "var(--vscode-editor-background)" }}>
-								<MarkdownBlock markdown={t("chat:subtasks.completionInstructions")} />
+								<Markdown content={t("chat:subtasks.completionInstructions") || ""} />
 							</div>
 						</div>
 					</>
@@ -729,7 +794,7 @@ export const ChatRowContent = ({
 										padding: "12px 16px",
 										backgroundColor: "var(--vscode-editor-background)",
 									}}>
-									<MarkdownBlock markdown={message.text} />
+									<Markdown content={message.text || ""} />
 								</div>
 							</div>
 						</div>
@@ -844,7 +909,7 @@ export const ChatRowContent = ({
 				case "text":
 					return (
 						<div>
-							<Markdown markdown={message.text} partial={message.partial} />
+							<MarkdownWithCopy content={message.text || ""} partial={message.partial} />
 						</div>
 					)
 				case "user_feedback":
@@ -932,7 +997,7 @@ export const ChatRowContent = ({
 								{title}
 							</div>
 							<div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
-								<Markdown markdown={message.text} />
+								<MarkdownWithCopy content={message.text || ""} partial={message.partial} />
 							</div>
 						</>
 					)
@@ -1023,7 +1088,7 @@ export const ChatRowContent = ({
 								</div>
 							)}
 							<div style={{ paddingTop: 10 }}>
-								<Markdown markdown={message.text} partial={message.partial} />
+								<MarkdownWithCopy content={message.text || ""} partial={message.partial} />
 							</div>
 						</>
 					)
@@ -1200,7 +1265,7 @@ export const ChatRowContent = ({
 									{title}
 								</div>
 								<div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
-									<Markdown markdown={message.text} partial={message.partial} />
+									<Markdown content={message.text || ""} />
 								</div>
 							</div>
 						)
@@ -1218,7 +1283,7 @@ export const ChatRowContent = ({
 							)}
 							<div style={{ paddingTop: 10, paddingBottom: 15 }}>
 								<Markdown
-									markdown={message.partial === true ? message?.text : followUpData?.question}
+									content={(message.partial === true ? message?.text : followUpData?.question) || ""}
 								/>
 							</div>
 							<FollowUpSuggest
@@ -1248,63 +1313,3 @@ export const ProgressIndicator = () => (
 		</div>
 	</div>
 )
-
-const Markdown = memo(({ markdown, partial }: { markdown?: string; partial?: boolean }) => {
-	const [isHovering, setIsHovering] = useState(false)
-	const { copyWithFeedback } = useCopyToClipboard(200) // shorter feedback duration for copy button flash
-
-	return (
-		<div
-			onMouseEnter={() => setIsHovering(true)}
-			onMouseLeave={() => setIsHovering(false)}
-			style={{ position: "relative" }}>
-			<div style={{ wordBreak: "break-word", overflowWrap: "anywhere", marginBottom: -15, marginTop: -15 }}>
-				<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>
-					<VSCodeButton
-						className="copy-button"
-						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)
-								}
-							}
-						}}
-						title="Copy as markdown">
-						<span className="codicon codicon-copy"></span>
-					</VSCodeButton>
-				</div>
-			)}
-		</div>
-	)
-})
diff --git a/webview-ui/src/components/ui/markdown/CodeBlock.tsx b/webview-ui/src/components/ui/markdown/CodeBlock.tsx
index 5342e6e7a68..368357c9304 100644
--- a/webview-ui/src/components/ui/markdown/CodeBlock.tsx
+++ b/webview-ui/src/components/ui/markdown/CodeBlock.tsx
@@ -23,12 +23,16 @@ export const CodeBlock: FC<CodeBlockProps> = memo(({ language, value, className,
 
 	useEffect(() => {
 		const highlight = async () => {
-			const theme = "github-dark" // Use VSCode's current theme.
+			// Read body attribute to get VS Code theme kind
+			const vscodeThemeKind = document.body.dataset.vscodeThemeKind || "vscode-dark" // Default to dark if undefined
+
+			// Select shiki theme based on VS Code theme kind
+			const shikiTheme = vscodeThemeKind === "vscode-light" ? "github-light" : "github-dark"
 
 			try {
 				const html = await codeToHtml(value, {
 					lang: language,
-					theme,
+					theme: shikiTheme, // Use the dynamically determined theme
 					transformers: [
 						{
 							pre(node) {
diff --git a/webview-ui/src/components/ui/markdown/Markdown.tsx b/webview-ui/src/components/ui/markdown/Markdown.tsx
index e6188ffd1a2..c265dd4137c 100644
--- a/webview-ui/src/components/ui/markdown/Markdown.tsx
+++ b/webview-ui/src/components/ui/markdown/Markdown.tsx
@@ -1,6 +1,7 @@
 import { FC, memo } from "react"
 import ReactMarkdown, { Options } from "react-markdown"
 import remarkGfm from "remark-gfm"
+import { cn } from "@/lib/utils"
 
 import { Separator } from "@/components/ui"
 
@@ -16,7 +17,7 @@ export function Markdown({ content }: { content: string }) {
 	return (
 		<MemoizedReactMarkdown
 			remarkPlugins={[remarkGfm]}
-			className="custom-markdown break-words"
+			className="custom-markdown break-words text-[var(--vscode-font-size)]"
 			components={{
 				p({ children }) {
 					return <div className="mb-2 last:mb-0">{children}</div>
@@ -26,14 +27,14 @@ export function Markdown({ content }: { content: string }) {
 				},
 				ol({ children }) {
 					return (
-						<ol className="list-decimal pl-4 [&>li]:mb-1 [&>li:last-child]:mb-0 [&>li>ul]:mt-1 [&>li>ol]:mt-1">
+						<ol className="list-decimal pl-[2.5em] [&>li]:mb-1 [&>li:last-child]:mb-0 [&>li>ul]:mt-1 [&>li>ol]:mt-1">
 							{children}
 						</ol>
 					)
 				},
 				ul({ children }) {
 					return (
-						<ul className="list-disc pl-4 [&>li]:mb-1 [&>li:last-child]:mb-0 [&>li>ul]:mt-1 [&>li>ol]:mt-1">
+						<ul className="list-disc pl-[2.5em] [&>li]:mb-1 [&>li:last-child]:mb-0 [&>li>ul]:mt-1 [&>li>ol]:mt-1">
 							{children}
 						</ul>
 					)
@@ -56,7 +57,12 @@ export function Markdown({ content }: { content: string }) {
 						props.node?.position && props.node.position.start.line === props.node.position.end.line
 
 					return isInline ? (
-						<code className={className} {...props}>
+						<code
+							className={cn(
+								"font-mono bg-[var(--vscode-textCodeBlock-background)] text-muted-foreground px-1 py-[0.1em] rounded-sm border border-border inline-block align-baseline",
+								className, // Allow original className (like language-) to be passed if needed, though less likely for inline
+							)}
+							{...props}>
 							{children}
 						</code>
 					) : (
@@ -67,6 +73,48 @@ export function Markdown({ content }: { content: string }) {
 						/>
 					)
 				},
+				table({ children }) {
+					// Use w-full for full width, border-collapse for clean borders,
+					// border and border-border for VS Code theme-aware borders, my-2 for margin
+					return <table className="w-full my-2 border-collapse border border-border">{children}</table>
+				},
+				thead({ children }) {
+					// Add bottom border and a subtle background consistent with muted elements
+					return <thead className="border-b border-border bg-muted/50">{children}</thead>
+				},
+				tbody({ children }) {
+					// No specific styling needed for tbody itself
+					return <tbody>{children}</tbody>
+				},
+				tr({ children }) {
+					// Add bottom border, hover effect, and remove border for the last row
+					return (
+						<tr className="border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted last:border-b-0">
+							{children}
+						</tr>
+					)
+				},
+				th({ children }) {
+					// Add right border, padding, left alignment, medium font weight, muted text color,
+					// and remove border for the last header cell
+					return (
+						<th className="border-r border-border p-2 text-left align-middle font-medium text-muted-foreground last:border-r-0">
+							{children}
+						</th>
+					)
+				},
+				strong({ children }) {
+					// Apply a slightly lighter font weight than default bold
+					return <strong className="font-semibold">{children}</strong>
+				},
+				td({ children }) {
+					// Add right border, padding, left alignment, and remove border for the last data cell
+					return (
+						<td className="border-r border-border p-2 text-left align-middle last:border-r-0">
+							{children}
+						</td>
+					)
+				},
 				a({ href, children }) {
 					return (
 						<a href={href} target="_blank" rel="noopener noreferrer">
diff --git a/webview-ui/src/components/ui/separator.tsx b/webview-ui/src/components/ui/separator.tsx
index cf7c818536e..2f9baa608d9 100644
--- a/webview-ui/src/components/ui/separator.tsx
+++ b/webview-ui/src/components/ui/separator.tsx
@@ -12,7 +12,7 @@ const Separator = React.forwardRef<
 		decorative={decorative}
 		orientation={orientation}
 		className={cn(
-			"shrink-0 bg-vscode-editor-background my-5",
+			"shrink-0 bg-border my-5",
 			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
 			className,
 		)}