diff --git a/lamassu-next/apps/machine/src/components/QRCode.vue b/lamassu-next/apps/machine/src/components/QRCode.vue
index f698325..aa3401f 100644
--- a/lamassu-next/apps/machine/src/components/QRCode.vue
+++ b/lamassu-next/apps/machine/src/components/QRCode.vue
@@ -8,12 +8,30 @@ const props = defineProps<{
 }>()
 
 const qrSize = computed(() => props.size ?? 200)
+
+// Warm cream background - easier on eyes in dark mode
+// Dark brown foreground - maintains high contrast for scanning
+const qrBackground = '#f5f0e6' // Warm cream
+const qrForeground = '#3c3836' // Gruvbox dark0_hard - ensures scanability
 </script>
 
 <template>
-  <div class="flex flex-col items-center justify-center rounded-lg bg-white p-4">
-    <QrcodeVue :value="value" :size="qrSize" level="M" render-as="svg" />
-    <code class="mt-2 block max-w-full break-all px-2 text-center text-xs text-zinc-500">
+  <div
+    class="flex flex-col items-center justify-center rounded-xl p-5"
+    :style="{ backgroundColor: qrBackground }"
+  >
+    <QrcodeVue
+      :value="value"
+      :size="qrSize"
+      level="M"
+      render-as="svg"
+      :background="qrBackground"
+      :foreground="qrForeground"
+    />
+    <code
+      class="mt-3 block max-w-full break-all px-2 text-center text-xs"
+      :style="{ color: qrForeground }"
+    >
       {{ value.slice(0, 32) }}...
     </code>
   </div>