diff --git a/package-lock.json b/package-lock.json
index 4bd9f4732ca..1569082b7e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
 				"@solana/kit": "^6.0.1",
 				"@velora-dex/sdk": "^9.3.3",
 				"alchemy-sdk": "^3.6.5",
+				"barcode-detector": "^3.1.1",
 				"bech32": "^1.1.4",
 				"bitcoinjs-lib": "^6.1.7",
 				"browser-image-compression": "^2.0.2",
@@ -9101,6 +9102,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/emscripten": {
+			"version": "1.41.5",
+			"resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
+			"integrity": "sha512-cMQm7pxu6BxtHyqJ7mQZ2kXWV5SLmugybFdHCBbJ5eHzOo6VhBckEgAT3//rP5FwPHNPeEiq4SmQ5ucBwsOo4Q==",
+			"license": "MIT"
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -10537,6 +10544,15 @@
 			"license": "MIT",
 			"peer": true
 		},
+		"node_modules/barcode-detector": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-3.1.1.tgz",
+			"integrity": "sha512-ghWlEAV93ZCUniO7Co3ih/01XPm+U30CV+NoPbO6Chj5lZzHydDAqKlrBEd+37TkoR+QTH3tnnwd8k8epGTfIg==",
+			"license": "MIT",
+			"dependencies": {
+				"zxing-wasm": "3.0.1"
+			}
+		},
 		"node_modules/base-x": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/base-x/-/base-x-4.0.1.tgz",
@@ -16698,6 +16714,18 @@
 				"url": "https://opencollective.com/synckit"
 			}
 		},
+		"node_modules/tagged-tag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
+			"integrity": "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.0.tgz",
@@ -16975,6 +17003,21 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/type-fest": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.5.0.tgz",
+			"integrity": "sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==",
+			"license": "(MIT OR CC0-1.0)",
+			"dependencies": {
+				"tagged-tag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/typed-array-buffer": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -18000,6 +18043,19 @@
 			"funding": {
 				"url": "https://github.com/sponsors/colinhacks"
 			}
+		},
+		"node_modules/zxing-wasm": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-3.0.1.tgz",
+			"integrity": "sha512-3CLj6iaGkpqPWXAB4pIWkFOR63MwqGekpMzaROFKto4dFowiPmLlC56KoMoOSXzqOCOpI5DAvMdB8ku2va6fUg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/emscripten": "^1.41.5",
+				"type-fest": "^5.4.4"
+			},
+			"peerDependencies": {
+				"@types/emscripten": ">=1.39.6"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index a3b591240ca..4626cc13e0e 100644
--- a/package.json
+++ b/package.json
@@ -89,6 +89,7 @@
 		"@solana/kit": "^6.0.1",
 		"@velora-dex/sdk": "^9.3.3",
 		"alchemy-sdk": "^3.6.5",
+		"barcode-detector": "^3.1.1",
 		"bech32": "^1.1.4",
 		"bitcoinjs-lib": "^6.1.7",
 		"browser-image-compression": "^2.0.2",
diff --git a/src/frontend/src/lib/components/qr/QrCodeScanner.svelte b/src/frontend/src/lib/components/qr/QrCodeScanner.svelte
index b2f01d905e1..c12b676f23f 100644
--- a/src/frontend/src/lib/components/qr/QrCodeScanner.svelte
+++ b/src/frontend/src/lib/components/qr/QrCodeScanner.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { QRCodeReader } from '@dfinity/gix-components';
 	import { onMount } from 'svelte';
+	import QrCodeReader from '$lib/components/ui/QrCodeReader.svelte';
 	import { ADDRESS_BOOK_QR_CODE_SCAN } from '$lib/constants/test-ids.constants';
 	import type { QrStatus } from '$lib/types/qr-code';
 
@@ -46,7 +46,7 @@
 	class="stretch qr-code-wrapper h-full w-full md:min-h-[300px]"
 	data-tid={ADDRESS_BOOK_QR_CODE_SCAN}
 >
-	<QRCodeReader on:nnsCancel={onCancel} on:nnsQRCode={onQRCode} />
+	<QrCodeReader on:nnsCancel={onCancel} on:nnsQRCode={onQRCode} />
 </div>
 
 <style lang="scss">
diff --git a/src/frontend/src/lib/components/ui/QrCodeReader.svelte b/src/frontend/src/lib/components/ui/QrCodeReader.svelte
new file mode 100644
index 00000000000..4eb0840fc5d
--- /dev/null
+++ b/src/frontend/src/lib/components/ui/QrCodeReader.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { isDesktop } from '$lib/utils/device.utils';
+	import { nextElementId } from '$lib/utils/html.utils';
+
+	const id = nextElementId('qrcode-reader-');
+
+	const dispatch = createEventDispatcher();
+
+	let videoElement: HTMLVideoElement | undefined;
+	let stream: MediaStream | undefined;
+	let scanInterval: NodeJS.Timeout | undefined;
+	let isDestroyed = false;
+	let isProcessingFrame = false;
+
+	onMount(async () => {
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({
+				video: {
+					facingMode: 'environment',
+					width: { ideal: 1920 },
+					height: { ideal: 1080 }
+				},
+				audio: false
+			});
+
+			if (isDestroyed) {
+				stopStream();
+
+				return;
+			}
+
+			if (nonNullish(videoElement)) {
+				videoElement.srcObject = stream;
+
+				await videoElement.play();
+
+				await startScanning();
+			}
+		} catch (err: unknown) {
+			dispatch('nnsQRCodeError', err);
+		}
+	});
+
+	const startScanning = async () => {
+		try {
+			const { BarcodeDetector } = await import('barcode-detector/ponyfill');
+
+			if (isDestroyed) {
+				return;
+			}
+
+			const detector = new BarcodeDetector({
+				formats: ['qr_code']
+			});
+
+			const scan = async () => {
+				if (
+					isProcessingFrame ||
+					isDestroyed ||
+					isNullish(videoElement) ||
+					videoElement.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
+				) {
+					return;
+				}
+
+				isProcessingFrame = true;
+
+				try {
+					const results = await detector.detect(videoElement);
+
+					const [qrResult] = results;
+
+					if (nonNullish(qrResult)) {
+						dispatch('nnsQRCode', qrResult.rawValue);
+					}
+				} catch {
+					// Decoding failed on this frame — expected when no QR code is visible
+				} finally {
+					isProcessingFrame = false;
+				}
+			};
+
+			scanInterval = setInterval(scan, 100);
+		} catch (err: unknown) {
+			dispatch('nnsQRCodeError', err);
+		}
+	};
+
+	const stopStream = () => {
+		if (nonNullish(stream)) {
+			stream.getTracks().forEach((track) => track.stop());
+
+			stream = undefined;
+		}
+	};
+
+	onDestroy(() => {
+		isDestroyed = true;
+
+		if (nonNullish(scanInterval)) {
+			clearInterval(scanInterval);
+
+			scanInterval = undefined;
+		}
+
+		stopStream();
+	});
+
+	// We optimistically assume that if the QR code reader is used on desktop, it has most probably only a single "user" facing camera and that we can invert the displayed video
+	const mirror = isDesktop();
+</script>
+
+<article {id} class="reader" class:mirror>
+	<video bind:this={videoElement} autoplay muted playsinline></video>
+
+	<div class="scan-overlay">
+		<div class="scan-region"></div>
+	</div>
+</article>
+
+<style lang="scss">
+	.reader {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		border-radius: var(--border-radius);
+		overflow: hidden;
+
+		&.mirror {
+			transform: scaleX(-1);
+		}
+	}
+
+	video {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.scan-overlay {
+		position: absolute;
+		inset: 0;
+		container-type: size;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+
+	.scan-region {
+		width: min(90cqw, 90cqh);
+		aspect-ratio: 1;
+		box-shadow: 0 0 0 9999px white;
+		border: 2px solid rgba(var(--primary-rgb), 0.4);
+	}
+</style>
diff --git a/src/frontend/src/lib/components/wallet-connect/WalletConnectForm.svelte b/src/frontend/src/lib/components/wallet-connect/WalletConnectForm.svelte
index 620e5d5f606..888544e40b7 100644
--- a/src/frontend/src/lib/components/wallet-connect/WalletConnectForm.svelte
+++ b/src/frontend/src/lib/components/wallet-connect/WalletConnectForm.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { QRCodeReader } from '@dfinity/gix-components';
 	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
 	import InputText from '$lib/components/ui/InputText.svelte';
+	import QrCodeReader from '$lib/components/ui/QrCodeReader.svelte';
 	import {
 		TRACK_COUNT_WALLET_CONNECT,
 		TRACK_COUNT_WALLET_CONNECT_QR_CODE
@@ -71,7 +71,7 @@
 <ContentWithToolbar>
 	<div class="qr-code rounded-lg">
 		{#if renderQRCodeReader}
-			<QRCodeReader on:nnsQRCode={onQRCodeSuccess} on:nnsQRCodeError={error} />
+			<QrCodeReader on:nnsQRCode={onQRCodeSuccess} on:nnsQRCodeError={error} />
 		{/if}
 
 		{#if !renderQRCodeReader}
diff --git a/src/frontend/src/lib/utils/html.utils.ts b/src/frontend/src/lib/utils/html.utils.ts
new file mode 100644
index 00000000000..631e50539ea
--- /dev/null
+++ b/src/frontend/src/lib/utils/html.utils.ts
@@ -0,0 +1,10 @@
+let elementsCounters: Record<string, number> = {};
+
+export const nextElementId = (prefix: string): string => {
+	elementsCounters = {
+		...elementsCounters,
+		[prefix]: (elementsCounters[prefix] ?? 0) + 1
+	};
+
+	return `${prefix}${elementsCounters[prefix]}`;
+};