diff --git a/frontend/src/index.css b/frontend/src/index.css
index 10f010c..9af0297 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -29,3 +29,7 @@
   height: 100%;
   width: 100%;
 }
+
+.qr-code {
+  color-scheme: only light;
+}
diff --git a/frontend/src/routes/student_payment_view.tsx b/frontend/src/routes/student_payment_view.tsx
index a76abc3..62daeb3 100644
--- a/frontend/src/routes/student_payment_view.tsx
+++ b/frontend/src/routes/student_payment_view.tsx
@@ -92,7 +92,7 @@ export default function StudentPaymentPage() {
               alignItems: "center",
             }}
           >
-            <QRCode value={token.transaction_id} />
+            <QRCode value={token.transaction_id} className="qr-code"/>
           </Container>
         </Stack>
 
diff --git a/frontend/src/routes/student_topup.tsx b/frontend/src/routes/student_topup.tsx
index 6e08b8d..7d3b2cb 100644
--- a/frontend/src/routes/student_topup.tsx
+++ b/frontend/src/routes/student_topup.tsx
@@ -61,7 +61,7 @@ export default function StudentTopupPage() {
             alignItems: "center",
           }}
         >
-          <QRCode value={token.topup_id} />
+          <QRCode value={token.topup_id} className="qr-code" />
         </Container>
         <Typography variant="h6">How do I top-up?</Typography>
         <Typography variant="body1">