diff --git a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
index 8fd00c7..3b122c0 100644
--- a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
+++ b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
@@ -21,7 +21,7 @@
 	const workflowRunUrl = `https://github.com/${repoOwner}/${repoName}/actions/runs/${workflowRunId}/workflow`
 </script>
 
-<Card.Root>
+<Card.Root class="bg-background/30">
 	<Card.Content class="flex flex-col items-center justify-between space-x-4 md:flex-row">
 		<div class="flex w-60 items-center space-x-4">
 			<BadgeCheckIcon class="h-8 w-8 text-green-500" />
diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte
index b9b9f45..f253e11 100644
--- a/packages/ui/src/components/extension/StoreExtDetail.svelte
+++ b/packages/ui/src/components/extension/StoreExtDetail.svelte
@@ -308,7 +308,7 @@
 	<Separator class="my-3" />
 	<h2 class="text-lg font-bold">README</h2>
 	{#if extPublish?.readme}
-		<Markdown markdown={extPublish.readme} class="bg-secondary max-w-full rounded-md p-4" />
+		<Markdown markdown={extPublish.readme} class="bg-background/50 max-w-full rounded-md p-4" />
 	{/if}
 </ScrollArea>
 
diff --git a/packages/ui/src/components/extension/templates/Markdown.svelte b/packages/ui/src/components/extension/templates/Markdown.svelte
index 29c09a7..bdc4eed 100644
--- a/packages/ui/src/components/extension/templates/Markdown.svelte
+++ b/packages/ui/src/components/extension/templates/Markdown.svelte
@@ -5,6 +5,6 @@
 	const { markdown, class: className }: { markdown: string; class?: string } = $props()
 </script>
 
-<div class={cn("prose dark:prose-invert", className)}>
+<div class={cn("prose dark:prose-invert bg-transparent", className)}>
 	<SvelteMarkdown source={markdown} />
 </div>