diff --git a/new-web/bun.lockb b/new-web/bun.lockb
index 7be06bd..03a7e9d 100755
Binary files a/new-web/bun.lockb and b/new-web/bun.lockb differ
diff --git a/new-web/package.json b/new-web/package.json
index 060c3ff..09e7019 100644
--- a/new-web/package.json
+++ b/new-web/package.json
@@ -42,6 +42,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@iconify-json/stash": "^1.2.2",
 		"@iconify/svelte": "^4.2.0",
 		"@iconify/tailwind": "^1.2.0",
 		"bits-ui": "^0.21.16",
diff --git a/new-web/src/lib/elements/ArticlePage.svelte b/new-web/src/lib/elements/ArticlePage.svelte
index 6e17420..ae0df7e 100644
--- a/new-web/src/lib/elements/ArticlePage.svelte
+++ b/new-web/src/lib/elements/ArticlePage.svelte
@@ -156,10 +156,16 @@
 
 				<aside class="w-full mt-7 lg:mt-0 max-w-64" aria-labelledby="toc-heading">
 					<div class="sticky top-12">
-						<Button class="w-full mb-4">
-							<span class="icon-[heroicons--arrow-down-20-solid] size-4 mr-1" />
-							Download as PDF/Markdown
-						</Button>
+						<div class="flex gap-2 mb-4">
+							<Button variant="outline" class="flex-1">
+								<span class="icon-[heroicons--document-arrow-down-20-solid] size-4 mr-1" />
+								PDF
+							</Button>
+							<Button class="flex-1" variant="outline">
+								<span class="icon-[heroicons--document-text-20-solid] size-4 mr-1" />
+								Markdown
+							</Button>
+						</div>
 						<nav class="w-full p-4 bg-white rounded-lg shadow-lg dark:bg-zinc-900">
 							<h2 id="toc-heading" class="mb-4 text-xl font-semibold text-primary">Contents</h2>
 							{#if article.tableOfContents && article.tableOfContents.length > 0}
diff --git a/new-web/src/lib/elements/Header.svelte b/new-web/src/lib/elements/Header.svelte
index 88acddc..703a694 100644
--- a/new-web/src/lib/elements/Header.svelte
+++ b/new-web/src/lib/elements/Header.svelte
@@ -96,7 +96,11 @@
 			/>
 			<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
 			<ThemeToggle />
-			<ReportProblem />
+			<ReportProblem variant="warning" showBadge={true} />
+			<Button>
+				<span class="icon-[stash--article-plus-solid] text-white size-5" />
+				<span class="sr-only">Add article</span>
+			</Button>
 		</div>
 
 		<div class="flex items-center space-x-2 md:hidden">
@@ -104,7 +108,7 @@
 				<span class="icon-[heroicons-outline--magnifying-glass] size-5" />
 			</Button>
 			<ThemeToggle />
-			<ReportProblem />
+			<ReportProblem variant="danger" compact={true} />
 			<Button
 				variant="ghost"
 				size="icon"
diff --git a/new-web/src/lib/elements/ReportProblem.svelte b/new-web/src/lib/elements/ReportProblem.svelte
index 47a5e0a..dbe6f43 100644
--- a/new-web/src/lib/elements/ReportProblem.svelte
+++ b/new-web/src/lib/elements/ReportProblem.svelte
@@ -13,6 +13,10 @@
 	let problemDescription = '';
 	let problemType = 'ui_problem';
 
+	export let variant: 'default' | 'warning' | 'danger' = 'default';
+	export let showBadge = false;
+	export let compact = false;
+
 	const handleSubmit = () => {
 		console.log({ problemType, problemDescription });
 		toast.success(`${problemType} submitted`);
@@ -20,14 +24,35 @@
 		problemType = 'ui_problem';
 		open = false;
 	};
+
+	const getVariantStyles = (variant: string) => {
+		const styles = {
+			default: 'bg-primary hover:bg-primary/90',
+			warning: 'bg-purple-500 hover:bg-purple-600 text-white',
+			danger: 'bg-red-500 hover:bg-red-600 text-white'
+		};
+		return styles[variant] || styles.default;
+	};
 </script>
 
 {#if $isDesktop}
 	<Dialog.Root bind:open>
-		<Dialog.Trigger class={buttonVariants({ variant: 'ghost' })}>
-			<div class="flex items-center space-x-2 text-primary">
+		<Dialog.Trigger
+			class={`${buttonVariants({ variant: 'default' })} ${getVariantStyles(variant)} relative`}
+		>
+			<div class="flex items-center space-x-2">
 				<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
-				<span class="hidden text-sm font-medium lg:block">Report a problem</span>
+				{#if !compact}
+					<span class="hidden text-sm font-medium lg:block">Report a problem</span>
+				{/if}
+				{#if showBadge}
+					<span class="absolute flex w-3 h-3 -top-1 -right-1">
+						<span
+							class="absolute inline-flex w-full h-full bg-red-400 rounded-full opacity-75 animate-ping"
+						></span>
+						<span class="relative inline-flex w-3 h-3 bg-red-500 rounded-full"></span>
+					</span>
+				{/if}
 			</div>
 		</Dialog.Trigger>
 		<form on:submit|preventDefault={handleSubmit}>