diff --git a/src/routes/(print)/print/batch/+page.server.ts b/src/routes/(print)/print/batch/+page.server.ts
index 88252f6..de901ba 100644
--- a/src/routes/(print)/print/batch/+page.server.ts
+++ b/src/routes/(print)/print/batch/+page.server.ts
@@ -3,7 +3,7 @@ import { db } from '$lib/server/db/index.js';
 import { devices } from '$lib/server/db/schema.js';
 import { sql } from 'drizzle-orm';
 import { error } from '@sveltejs/kit';
-import { generateQrSvg } from '$lib/server/qr.js';
+import { generateBarcodeSvg } from '$lib/server/barcode.js';
 
 export const load: PageServerLoad = async ({ url }) => {
 	const idsParam = url.searchParams.get('ids');
@@ -26,12 +26,11 @@ export const load: PageServerLoad = async ({ url }) => {
 		.from(devices)
 		.where(sql`${devices.id} IN ${ids}`);
 
-	// Generate QR codes for each
 	const labels = await Promise.all(
 		deviceList.map(async (device) => {
 			const shortId = device.id.slice(0, 8).toUpperCase();
-			const qrSvg = await generateQrSvg(shortId);
-			return { ...device, qrSvg, shortId };
+			const barcodeDataUrl = await generateBarcodeSvg(shortId);
+			return { ...device, barcodeDataUrl, shortId };
 		})
 	);
 
diff --git a/src/routes/(print)/print/batch/+page.svelte b/src/routes/(print)/print/batch/+page.svelte
index 3f68bb8..4a0e925 100644
--- a/src/routes/(print)/print/batch/+page.svelte
+++ b/src/routes/(print)/print/batch/+page.svelte
@@ -32,30 +32,25 @@
 
 {#each data.labels as label}
 	<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
-		<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: 'JetBrains Mono', monospace;">
-			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
-				{@html label.qrSvg}
+		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: center;">
+			<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+				{label.title}
 			</div>
-			<div style="flex: 1; min-width: 0; text-align: center;">
-				<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{label.title}
+			{#if label.brand || label.model}
+				<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+					{[label.brand, label.model].filter(Boolean).join(' ')}
 				</div>
-				{#if label.brand || label.model}
-					<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-						{[label.brand, label.model].filter(Boolean).join(' ')}
-					</div>
-				{/if}
-				{#if label.serialNumber}
-					<div style="font-size: 5pt; color: #666;">S/N: {label.serialNumber}</div>
-				{/if}
-				{#if label.voltage || label.frequency}
-					<div style="font-size: 5pt; color: #666;">
-						{[label.voltage, label.frequency].filter(Boolean).join(' / ')}
-					</div>
-				{/if}
-				<div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;">
-					{label.shortId}
+			{/if}
+			{#if label.serialNumber}
+				<div style="font-size: 5pt; color: #666;">S/N: {label.serialNumber}</div>
+			{/if}
+			{#if label.voltage || label.frequency}
+				<div style="font-size: 5pt; color: #666;">
+					{[label.voltage, label.frequency].filter(Boolean).join(' / ')}
 				</div>
+			{/if}
+			<div style="margin-top: 0.5mm;">
+				<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 8mm; width: auto; max-width: 58mm;" />
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/(print)/print/component/[id]/+page.server.ts b/src/routes/(print)/print/component/[id]/+page.server.ts
index 584a5f3..496ad3e 100644
--- a/src/routes/(print)/print/component/[id]/+page.server.ts
+++ b/src/routes/(print)/print/component/[id]/+page.server.ts
@@ -3,7 +3,7 @@ import { db } from '$lib/server/db/index.js';
 import { components } from '$lib/server/db/schema.js';
 import { eq } from 'drizzle-orm';
 import { error } from '@sveltejs/kit';
-import { generateQrSvg } from '$lib/server/qr.js';
+import { generateBarcodeSvg } from '$lib/server/barcode.js';
 
 export const load: PageServerLoad = async ({ params }) => {
 	const [component] = await db
@@ -20,7 +20,7 @@ export const load: PageServerLoad = async ({ params }) => {
 	if (!component) error(404, 'Component not found');
 
 	const shortId = component.id.slice(0, 8).toUpperCase();
-	const qrSvg = await generateQrSvg(shortId);
+	const barcodeDataUrl = await generateBarcodeSvg(shortId);
 
-	return { component, qrSvg, shortId };
+	return { component, barcodeDataUrl, shortId };
 };
diff --git a/src/routes/(print)/print/component/[id]/+page.svelte b/src/routes/(print)/print/component/[id]/+page.svelte
index 7a61b12..9019bf7 100644
--- a/src/routes/(print)/print/component/[id]/+page.svelte
+++ b/src/routes/(print)/print/component/[id]/+page.svelte
@@ -40,26 +40,19 @@
 
 {#each Array(copies) as _}
 	<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
-		<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: 'JetBrains Mono', monospace;">
-			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
-				{@html data.qrSvg}
+		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: center;">
+			<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+				{data.component.title}
 			</div>
-			<div style="flex: 1; min-width: 0; text-align: center;">
-				<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{data.component.title}
-				</div>
-				<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{data.component.componentType}
-					{#if data.component.brand}&middot; {data.component.brand}{/if}
-				</div>
-				{#if data.component.partNumber}
-					<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">
-						P/N: {data.component.partNumber}
-					</div>
-				{/if}
-				<div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;">
-					{data.shortId}
-				</div>
+			<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+				{data.component.componentType}
+				{#if data.component.brand}&middot; {data.component.brand}{/if}
+			</div>
+			{#if data.component.partNumber}
+				<div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div>
+			{/if}
+			<div style="margin-top: 0.5mm;">
+				<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 58mm;" />
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/(print)/print/device/[id]/+page.server.ts b/src/routes/(print)/print/device/[id]/+page.server.ts
index c2cdd23..04811c4 100644
--- a/src/routes/(print)/print/device/[id]/+page.server.ts
+++ b/src/routes/(print)/print/device/[id]/+page.server.ts
@@ -3,7 +3,7 @@ import { db } from '$lib/server/db/index.js';
 import { devices } from '$lib/server/db/schema.js';
 import { eq } from 'drizzle-orm';
 import { error } from '@sveltejs/kit';
-import { generateQrSvg } from '$lib/server/qr.js';
+import { generateBarcodeSvg } from '$lib/server/barcode.js';
 
 export const load: PageServerLoad = async ({ params }) => {
 	const [device] = await db
@@ -23,7 +23,7 @@ export const load: PageServerLoad = async ({ params }) => {
 	if (!device) error(404, 'Device not found');
 
 	const shortId = device.id.slice(0, 8).toUpperCase();
-	const qrSvg = await generateQrSvg(shortId);
+	const barcodeDataUrl = await generateBarcodeSvg(shortId);
 
-	return { device, qrSvg, shortId };
+	return { device, barcodeDataUrl, shortId };
 };
diff --git a/src/routes/(print)/print/device/[id]/+page.svelte b/src/routes/(print)/print/device/[id]/+page.svelte
index f00594f..d4016ee 100644
--- a/src/routes/(print)/print/device/[id]/+page.svelte
+++ b/src/routes/(print)/print/device/[id]/+page.svelte
@@ -40,30 +40,25 @@
 
 {#each Array(copies) as _}
 	<div class="label" style="width: 62mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
-		<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: 'JetBrains Mono', monospace;">
-			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
-				{@html data.qrSvg}
+		<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-family: 'JetBrains Mono', monospace; text-align: center;">
+			<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+				{data.device.title}
 			</div>
-			<div style="flex: 1; min-width: 0; text-align: center;">
-				<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{data.device.title}
+			{#if data.device.brand || data.device.model}
+				<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">
+					{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
 				</div>
-				{#if data.device.brand || data.device.model}
-					<div style="font-size: 5.5pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-						{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
-					</div>
-				{/if}
-				{#if data.device.serialNumber}
-					<div style="font-size: 5pt; color: #666;">S/N: {data.device.serialNumber}</div>
-				{/if}
-				{#if data.device.voltage || data.device.frequency}
-					<div style="font-size: 5pt; color: #666;">
-						{[data.device.voltage, data.device.frequency].filter(Boolean).join(' / ')}
-					</div>
-				{/if}
-				<div style="font-size: 11pt; font-weight: bold; color: #000; margin-top: 0.5mm; letter-spacing: 1px;">
-					{data.shortId}
+			{/if}
+			{#if data.device.serialNumber}
+				<div style="font-size: 5pt; color: #666;">S/N: {data.device.serialNumber}</div>
+			{/if}
+			{#if data.device.voltage || data.device.frequency}
+				<div style="font-size: 5pt; color: #666;">
+					{[data.device.voltage, data.device.frequency].filter(Boolean).join(' / ')}
 				</div>
+			{/if}
+			<div style="margin-top: 0.5mm;">
+				<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 58mm;" />
 			</div>
 		</div>
 	</div>