diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index c34d863..b0eda4c 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,28 +1,29 @@
 <script lang="ts">
 	import { tw } from '$lib/tw';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface Props {
+	type Props = {
 		variant?: 'primary' | 'secondary';
-		class?: string | null;
-		href?: string | null;
+		class?: string;
 		children?: import('svelte').Snippet;
 		[key: string]: unknown;
-	}
+	} & (
+		| ({
+				href: string;
+		  } & HTMLAttributes<HTMLAnchorElement>)
+		| ({
+				href?: undefined;
+		  } & HTMLAttributes<HTMLButtonElement>)
+	);
 
-	let {
-		variant = 'secondary',
-		class: className = '',
-		href = null,
-		children,
-		...rest
-	}: Props = $props();
+	let { variant = 'secondary', class: className = '', href, children, ...rest }: Props = $props();
 </script>
 
 <svelte:element
 	this={href ? 'a' : 'button'}
 	{href}
 	class={tw(
-		'text-sf-secondary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2.5 py-1 shadow-xs ring-1',
+		'text-sf-secondary bg-sb-primary ring-ss-secondary inline-flex cursor-default items-center justify-center rounded-md px-2.5 py-1 shadow-xs ring-1',
 		'hover:ring-ss-primary font-normal transition-shadow duration-200 active:shadow-inner',
 		variant === 'primary' && [
 			'relative text-slate-50 ring-0 duration-200',