diff --git a/bun.lock b/bun.lock
index 3c230a8..b667591 100644
--- a/bun.lock
+++ b/bun.lock
@@ -7,6 +7,7 @@
       "dependencies": {
         "@lucide/svelte": "^0.561.0",
         "@sanity/client": "^7.13.2",
+        "qr-code-styling": "^1.9.2",
         "vercel": "^50.0.1",
       },
       "devDependencies": {
@@ -731,6 +732,10 @@
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "qr-code-styling": ["qr-code-styling@1.9.2", "", { "dependencies": { "qrcode-generator": "^1.4.4" } }, "sha512-RgJaZJ1/RrXJ6N0j7a+pdw3zMBmzZU4VN2dtAZf8ZggCfRB5stEQ3IoDNGaNhYY3nnZKYlYSLl5YkfWN5dPutg=="],
+
+    "qrcode-generator": ["qrcode-generator@1.5.2", "", {}, "sha512-pItrW0Z9HnDBnFmgiNrY1uxRdri32Uh9EjNYLPVC2zZ3ZRIIEqBoDgm4DkvDwNNDHTK7FNkmr8zAa77BYc9xNw=="],
+
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
     "raw-body": ["raw-body@2.4.1", "", { "dependencies": { "bytes": "3.1.0", "http-errors": "1.7.3", "iconv-lite": "0.4.24", "unpipe": "1.0.0" } }, "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA=="],
diff --git a/package.json b/package.json
index 8712655..6ebf9a1 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 	"dependencies": {
 		"@lucide/svelte": "^0.561.0",
 		"@sanity/client": "^7.13.2",
+		"qr-code-styling": "^1.9.2",
 		"vercel": "^50.0.1"
 	}
 }
diff --git a/src/app.css b/src/app.css
index 6359b7c..1097504 100644
--- a/src/app.css
+++ b/src/app.css
@@ -25,6 +25,7 @@
 	--color-ecsess-950: #031c15;
 
 	/* Black variants for UI elements */
+	--color-ecsess-white: #ffffff;
 	--color-ecsess-black: #1f1f1f;
 	--color-ecsess-black-hover: #161917;
 }
diff --git a/src/assets/ECSESS.png b/src/assets/ECSESS.png
index 8e9167b..4218aeb 100644
Binary files a/src/assets/ECSESS.png and b/src/assets/ECSESS.png differ
diff --git a/src/assets/ECSESS_old.png b/src/assets/ECSESS_old.png
new file mode 100644
index 0000000..8e9167b
Binary files /dev/null and b/src/assets/ECSESS_old.png differ
diff --git a/src/components/QRCode.svelte b/src/components/QRCode.svelte
new file mode 100644
index 0000000..8105c01
--- /dev/null
+++ b/src/components/QRCode.svelte
@@ -0,0 +1,182 @@
+<script>
+	import QRCodeStyling from 'qr-code-styling';
+	import ECSESSLogo from '../assets/ECSESS.png';
+
+	let { data = '', downloadSize = 1000, size = 300 } = $props();
+	let qrCodeContainer = $state(/** @type {HTMLDivElement | null} */ (null));
+	let qrCodeInstance = $state(/** @type {QRCodeStyling | null} */ (null));
+	let debounceTimer = $state(/** @type {any} */ (null));
+	let lastData = $state('');
+
+	function updateQRCode() {
+		if (!qrCodeContainer) return;
+
+		const trimmedData = data.trim();
+
+		// Skip if data hasn't actually changed
+		if (trimmedData === lastData) return;
+
+		lastData = trimmedData;
+
+		// Clean up previous instance
+		if (qrCodeInstance) {
+			qrCodeContainer.innerHTML = '';
+			qrCodeInstance = null;
+		}
+
+		// Only create QR code if data is provided
+		if (trimmedData) {
+			// Create new QR code instance
+			const instance = new QRCodeStyling({
+				width: size,
+				height: size,
+				type: 'svg',
+				data: trimmedData,
+				margin: 0,
+				qrOptions: {
+					typeNumber: 0,
+					mode: 'Byte',
+					errorCorrectionLevel: 'M'
+				},
+				imageOptions: {
+					hideBackgroundDots: true,
+					imageSize: 0.4,
+					margin: 8,
+					crossOrigin: 'anonymous'
+				},
+				dotsOptions: {
+					color: '#3f6a3f', // ecsess-600
+					type: 'rounded',
+					gradient: {
+						type: 'radial',
+						colorStops: [
+							{
+								offset: 0,
+								color: '#8fb98a' // ecsess-300
+							},
+							{
+								offset: 1,
+								color: '#2d5a2d' // ecsess-700
+							}
+						]
+					}
+				},
+				backgroundOptions: {
+					color: '#ffffff' // ecsess-white
+				},
+				cornersSquareOptions: {
+					color: '#3f6a3f', // ecsess-600
+					type: 'extra-rounded'
+				},
+				cornersDotOptions: {
+					color: '#3f6a3f', // ecsess-600
+					type: 'dot'
+				},
+				image: ECSESSLogo
+			});
+
+			qrCodeInstance = instance;
+			instance.append(qrCodeContainer);
+		}
+	}
+
+	$effect(() => {
+		// Clear any pending debounce
+		if (debounceTimer !== null) {
+			clearTimeout(debounceTimer);
+		}
+
+		// Only update if container is available
+		if (qrCodeContainer) {
+			// Debounce updates for smooth typing experience
+			debounceTimer = setTimeout(() => {
+				updateQRCode();
+				debounceTimer = null;
+			}, 300);
+		}
+
+		// Cleanup function
+		return () => {
+			if (debounceTimer !== null) {
+				clearTimeout(debounceTimer);
+			}
+		};
+	});
+
+	export function download(format = 'png') {
+		if (!lastData || !lastData.trim() || !qrCodeInstance) return;
+
+		// Create a high-resolution version with extra margin for download
+		const marginSize = Math.floor(downloadSize * 0.04); // 4% margin
+
+		const downloadInstance = new QRCodeStyling({
+			width: downloadSize,
+			height: downloadSize,
+			type: 'svg',
+			data: lastData,
+			margin: marginSize, // Add extra padding/margin
+			qrOptions: {
+				typeNumber: 0,
+				mode: 'Byte',
+				errorCorrectionLevel: 'M'
+			},
+			imageOptions: {
+				hideBackgroundDots: true,
+				imageSize: 0.4,
+				margin: 8,
+				crossOrigin: 'anonymous'
+			},
+			dotsOptions: {
+				color: '#3f6a3f', // ecsess-600
+				type: 'rounded',
+				gradient: {
+					type: 'radial',
+					colorStops: [
+						{
+							offset: 0,
+							color: '#8fb98a' // ecsess-300
+						},
+						{
+							offset: 1,
+							color: '#2d5a2d' // ecsess-700
+						}
+					]
+				}
+			},
+			backgroundOptions: {
+				color: '#ffffff' // ecsess-white
+			},
+			cornersSquareOptions: {
+				color: '#3f6a3f', // ecsess-600
+				type: 'extra-rounded'
+			},
+			cornersDotOptions: {
+				color: '#3f6a3f', // ecsess-600
+				type: 'dot'
+			},
+			image: ECSESSLogo
+		});
+
+		// Create a temporary container for the high-res QR code
+		const tempContainer = document.createElement('div');
+		tempContainer.style.width = `${downloadSize + marginSize}px`;
+		tempContainer.style.height = `${downloadSize + marginSize}px`;
+		tempContainer.style.position = 'absolute';
+		tempContainer.style.left = '-9999px';
+		document.body.appendChild(tempContainer);
+
+		downloadInstance.append(tempContainer);
+
+		// Wait for the QR code to render, then download
+		setTimeout(() => {
+			downloadInstance.download({
+				name: 'qrcode',
+				extension: /** @type {'png' | 'svg' | 'jpeg' | 'webp'} */ (format)
+			});
+			// Clean up temporary container
+			document.body.removeChild(tempContainer);
+		}, 100);
+	}
+</script>
+
+<div bind:this={qrCodeContainer} class="max-h-sm flex max-w-sm items-center justify-center"></div>
diff --git a/src/routes/council/+page.server.ts b/src/routes/council/+page.server.ts
index ff6497a..fa562b4 100644
--- a/src/routes/council/+page.server.ts
+++ b/src/routes/council/+page.server.ts
@@ -19,7 +19,11 @@ const councilQuery = `{
 }`;
 
 export const load = async ({ url }) => {
-	const { members, councilGoofyPic }: { members: CouncilMember[], councilGoofyPic: { url: string } } = await getFromCMS(councilQuery);
+	const {
+		members,
+		councilGoofyPic
+	}: { members: CouncilMember[]; councilGoofyPic: { url: string } } =
+		await getFromCMS(councilQuery);
 
 	return {
 		members: members,
diff --git a/src/routes/internal/qrcode/+page.svelte b/src/routes/internal/qrcode/+page.svelte
new file mode 100644
index 0000000..021318e
--- /dev/null
+++ b/src/routes/internal/qrcode/+page.svelte
@@ -0,0 +1,57 @@
+<script>
+	import QRCode from 'components/QRCode.svelte';
+	import Button from 'components/Button.svelte';
+	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
+	import Section from 'components/layout/Section.svelte';
+
+	let inputText = $state('');
+	let qrCodeRef = $state(/** @type {any} */ (null));
+
+	function handleExport() {
+		if (qrCodeRef) {
+			qrCodeRef.download('png');
+		}
+	}
+</script>
+
+<SeoMetaTags title="QR Code Generator - ECSESS" />
+
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
+	<p class="page-title">ECSESS QR Code Generator</p>
+
+	<div class="mx-auto flex w-full max-w-4xl flex-col gap-6">
+		<!-- Input Section -->
+		<div class="flex flex-col gap-4">
+			<label for="qr-input" class="text-ecsess-100 text-lg font-semibold">
+				Enter text or URL:
+			</label>
+			<input
+				id="qr-input"
+				type="text"
+				bind:value={inputText}
+				placeholder="Enter text or URL to encode..."
+				class="border-ecsess-400 text-ecsess-900 placeholder:text-ecsess-400 focus:border-ecsess-500 focus:ring-ecsess-500/20 w-full rounded-md border-2 bg-white px-4 py-3 focus:ring-2 focus:outline-none"
+			/>
+		</div>
+
+		<!-- Preview Section -->
+		{#if inputText}
+			<div class="flex flex-col items-center gap-4">
+				<h2 class="text-ecsess-100 text-xl font-bold">Preview</h2>
+				<div class="flex justify-center rounded-lg bg-white p-2 shadow-lg md:p-4">
+					<div class="mx-auto max-h-75 w-full max-w-75">
+						<QRCode bind:this={qrCodeRef} data={inputText} size={300} downloadSize={1000} />
+					</div>
+				</div>
+				<Button onclick={handleExport}>
+					<span>Download QR Code as PNG</span>
+				</Button>
+				<span>1000x1000px</span>
+			</div>
+		{:else}
+			<div class="flex items-center justify-center">
+				<p class="text-ecsess-200 text-center">Enter text or URL above to generate a QR code</p>
+			</div>
+		{/if}
+	</div>
+</Section>