diff --git a/react-web-app/public/index.html b/react-web-app/public/index.html
index af0d194..8579b9d 100644
--- a/react-web-app/public/index.html
+++ b/react-web-app/public/index.html
@@ -24,6 +24,21 @@
   -->
   <script src="https://sandbox.trustly.one/start/scripts/trustly.js?accessId=%REACT_APP_TRUSTLY_ACCESS_ID%"></script>
   <title>Trustly Starter App</title>
+  <style>
+    body, #root {
+      background-color: #ffffff;
+      color: #000000;
+      transition: background-color 0.3s ease, color 0.3s ease;
+    }
+
+    /* Dark theme */
+    @media (prefers-color-scheme: dark) {
+      body, #root {
+        background-color: #000000;
+        color: #ffffff;
+      }
+    }
+  </style>
 </head>
 
 <body>
diff --git a/react-web-app/src/SelectBankCard.js b/react-web-app/src/SelectBankCard.js
index 8e40c30..be6fa8b 100644
--- a/react-web-app/src/SelectBankCard.js
+++ b/react-web-app/src/SelectBankCard.js
@@ -1,9 +1,23 @@
 import { useEffect } from 'react';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { Typography } from '@mui/material';
+import { Typography, useMediaQuery } from '@mui/material';
 
 export default function SelectBankCard(props) {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const cardStyles = {
+    minWidth: 275,
+    maxWidth: 550,
+    margin: 5,
+    backgroundColor: prefersDarkMode ? '#000000' : '#ffffff'
+  };
+
+  const typographyStyles = {
+    fontSize: 14,
+    color: prefersDarkMode ? '#ffffff' : '#000000'
+  };
+
   useEffect(() => {
     const { establishData, TrustlyOptions } = props;
 
@@ -14,9 +28,9 @@ export default function SelectBankCard(props) {
   }, [props]);
 
   return (
-    <Card sx={{ minWidth: 275, maxWidth: 550, margin: 5 }}>
+    <Card sx={cardStyles}>
       <CardContent>
-        <Typography sx={{ fontSize: 14 }} color='text.secondary' gutterBottom>
+        <Typography sx={typographyStyles} gutterBottom>
           Example of the Select Bank Widget
         </Typography>
         <div id='widget'></div>
