v0.2

src/lib/cards/BlueskyProfileCard/BlueskyProfileCard.svelte

···
 	use:qrOverlay={{
 		disabled: isEditing,
 		context: {
-			title: item.cardData.displayName || item.cardData.handle,
-			avatar: item.cardData.avatar
+			title: item.cardData.displayName || item.cardData.handle
 		}
 	}}
 >

src/lib/cards/EventCard/EventCard.svelte

···
 	import type { EventData } from '.';
 	import { parseUri } from '$lib/atproto';
 	import { browser } from '$app/environment';
+	import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte';
 
 	let { item }: ContentComponentProps = $props();
 
···
 			class="absolute inset-0 h-full w-full"
 			target="_blank"
 			rel="noopener noreferrer"
+			use:qrOverlay={{
+				context: {
+					title: eventData?.name ?? ''
+				}
+			}}
 		>
 			<span class="sr-only">View event on smokesignal.events</span>
 		</a>

src/lib/components/qr/QRCodeDisplay.svelte

···
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	let { url, size = 280 }: { url: string; size?: number } = $props();
+	let {
+		url,
+		icon,
+		iconColor,
+		class: className = ''
+	}: {
+		url: string;
+		icon?: string;
+		iconColor?: string;
+		class?: string;
+	} = $props();
 
 	let container: HTMLDivElement | undefined = $state();
 
+	// Convert SVG string to data URI for use as QR center image
+	function svgToDataUri(svg: string, color: string): string {
+		// Add fill color to SVG - insert fill attribute on the svg tag
+		let coloredSvg = svg;
+		if (!svg.includes('fill=')) {
+			// No fill attribute, add it to the svg tag
+			coloredSvg = svg.replace('<svg', `<svg fill="${color}"`);
+		} else {
+			// Replace existing fill attributes
+			coloredSvg = svg.replace(/fill="[^"]*"/g, `fill="${color}"`);
+		}
+		const encoded = encodeURIComponent(coloredSvg);
+		return `data:image/svg+xml,${encoded}`;
+	}
+
 	onMount(async () => {
 		if (!container) return;
 
+		// Use iconColor or default accent, ensure # prefix
+		const rawColor = iconColor || 'f6339a';
+		const dotColor = rawColor.startsWith('#') ? rawColor : `#${rawColor}`;
+
 		const module = await import('qr-code-styling');
 		const QRCodeStyling = module.default;
 
+		// Get container size for responsive QR
+		const rect = container.getBoundingClientRect();
+		const size = Math.min(rect.width, rect.height) || 280;
+
 		const options: ConstructorParameters<typeof QRCodeStyling>[0] = {
 			width: size,
 			height: size,
 			data: url,
 			dotsOptions: {
-				color: '#000',
+				color: dotColor,
 				type: 'rounded'
 			},
 			backgroundOptions: {
-				color: '#fff'
+				color: '#FFF'
 			},
 			cornersSquareOptions: {
-				type: 'extra-rounded'
+				type: 'extra-rounded',
+				color: dotColor
 			},
 			cornersDotOptions: {
-				type: 'dot'
-			}
+				type: 'dot',
+				color: dotColor
+			},
+			margin: 10
 		};
 
+		// Add icon as center image if provided (as SVG string)
+		if (icon) {
+			options.image = svgToDataUri(icon, dotColor);
+			options.imageOptions = {
+				margin: 10,
+				imageSize: 0.5
+			};
+		}
+
 		const qrCode = new QRCodeStyling(options);
 		qrCode.append(container);
 	});
 </script>
 
-<div bind:this={container} class="flex items-center justify-center"></div>
+<div bind:this={container} class="flex items-center justify-center {className}"></div>

src/lib/components/qr/QRCodeModal.svelte

···
 <script lang="ts">
-	import { Modal, Button, toast } from '@foxui/core';
+	import { Modal } from '@foxui/core';
 	import QRCodeDisplay from './QRCodeDisplay.svelte';
 
 	export type QRContext = {
 		title?: string;
 		icon?: string;
 		iconColor?: string;
-		favicon?: string;
-		avatar?: string;
 	};
 
 	let {
···
 		href: string;
 		context?: QRContext;
 	} = $props();
-
-	async function copyUrl() {
-		try {
-			await navigator.clipboard.writeText(href);
-			toast.success('URL copied!');
-		} catch {
-			toast.error('Failed to copy');
-		}
-	}
 </script>
 
-<Modal bind:open closeButton={true} class="max-w-sm">
-	<div class="flex flex-col items-center gap-4 p-2">
-		{#if context.icon}
-			<div
-				class="flex size-14 items-center justify-center rounded-2xl [&_svg]:size-8 [&_svg]:fill-white"
-				style:background-color={context.iconColor ? `#${context.iconColor}` : '#000'}
-			>
-				{@html context.icon}
-			</div>
-		{:else if context.avatar}
-			<img src={context.avatar} alt="" class="size-14 rounded-full object-cover" />
-		{:else if context.favicon}
-			<img src={context.favicon} alt="" class="size-10 rounded-lg object-cover" />
-		{/if}
-
+<Modal bind:open closeButton={true} class="max-w-[90vw]! sm:max-w-sm! md:max-w-md!">
+	<div class="flex flex-col items-center justify-center gap-4 p-4">
 		{#if context.title}
-			<div class="text-base-900 dark:text-base-100 text-lg font-semibold">
+			<div class="text-base-900 dark:text-base-100 text-center text-xl font-semibold">
 				{context.title}
 			</div>
 		{/if}
 
-		<div class="overflow-hidden rounded-2xl">
-			<QRCodeDisplay url={href} size={280} />
-		</div>
-
-		<div class="flex w-full items-center gap-2">
-			<div
-				class="bg-base-100 dark:bg-base-800 text-base-600 dark:text-base-400 flex-1 truncate rounded-lg px-3 py-2 text-sm"
-			>
-				{href}
-			</div>
-			<Button onclick={copyUrl} variant="ghost" size="sm">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="size-4"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-					/>
-				</svg>
-			</Button>
+		<div class="flex items-center justify-center overflow-hidden rounded-2xl">
+			<QRCodeDisplay
+				url={href}
+				icon={context.icon}
+				iconColor={context.iconColor}
+				class="size-[min(70vw,320px)] sm:size-72 md:size-80"
+			/>
 		</div>
 	</div>
 </Modal>

src/lib/website/Profile.svelte

···
 			class="w-fit"
 			use:qrOverlay={{
 				context: {
-					title: getName(data),
-					avatar: data.profile.avatar
+					title: getName(data) + "'s blento"
 				}
 			}}
 		>