diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index fe9500d7..7da43b3e 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -21,23 +21,57 @@ export default class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      dark: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
       expandedSettings: false,
       openLearn: false,
-      theme: { typography: { fontSize: 14 } },
+      theme: createTheme({
+        palette: {
+          mode:
+            window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light',
+          background: {
+            default:
+              window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? '#070707'
+                : '#fff',
+          },
+        },
+      }),
     };
   }
 
-  lightTheme = createTheme({});
-
-  darkTheme = createTheme({
-    palette: {
-      mode: 'dark',
-      background: {
-        default: '#070707',
-      },
-    },
-  });
+  handleThemeChange = () => {
+    if (this.state.theme.palette.mode === 'light') {
+      this.setState(({ theme }) => ({
+        theme: createTheme({
+          typography: {
+            fontSize: theme.typography.fontSize,
+          },
+          palette: {
+            mode: 'dark',
+            background: {
+              default: '#070707',
+            },
+          },
+        }),
+      }));
+    }
+    if (this.state.theme.palette.mode === 'dark') {
+      this.setState(({ theme }) => ({
+        theme: createTheme({
+          typography: {
+            fontSize: theme.typography.fontSize,
+          },
+          palette: {
+            mode: 'light',
+            background: {
+              default: '#fff',
+            },
+          },
+        }),
+      }));
+    }
+  };
 
   onSettingsClick = () => {
     this.setState({
@@ -62,7 +96,7 @@ export default class App extends Component {
     return (
       <Suspense fallback='loading language'>
         <I18nextProvider i18n={i18n}>
-          <ThemeProvider theme={this.state.dark ? this.darkTheme : createTheme(this.state.theme)}>
+          <ThemeProvider theme={this.state.theme}>
             <CssBaseline />
             <LearnDialog
               open={this.state.openLearn}
@@ -78,9 +112,9 @@ export default class App extends Component {
             <IconButton
               color='inherit'
               sx={{ position: 'fixed', right: '0px' }}
-              onClick={() => this.setState({ dark: !this.state.dark })}
+              onClick={() => this.handleThemeChange()}
             >
-              {this.state.dark ? <LightModeIcon /> : <DarkModeIcon />}
+              {this.state.theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
             </IconButton>
             <IconButton
               sx={{ position: 'fixed', right: '34px' }}
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index fdad6c6f..6e6d0cba 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -1071,6 +1071,7 @@ class OrderPage extends Component {
         </Grid>
         <Grid item xs={6} align='left'>
           <TradeBox
+            theme={this.props.theme}
             push={this.props.history.push}
             getOrderDetails={this.getOrderDetails}
             pauseLoading={this.state.pauseLoading}
@@ -1116,6 +1117,7 @@ class OrderPage extends Component {
             </div>
             <div style={{ display: this.state.tabValue == 1 ? '' : 'none' }}>
               <TradeBox
+                theme={this.props.theme}
                 push={this.props.history.push}
                 getOrderDetails={this.getOrderDetails}
                 pauseLoading={this.state.pauseLoading}
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index e07c8015..e8af8e7d 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -281,13 +281,12 @@ class TradeBox extends Component {
         </Grid>
 
         <Grid item xs={12} align='center'>
-          <Box sx={{ bgcolor: '#ffffff', width: '315px', position: 'relative', left: '-5px' }}>
-            <QRCode
-              value={this.props.data.bond_invoice}
-              size={305}
-              style={{ position: 'relative', top: '3px' }}
-            />
-          </Box>
+          <QRCode
+            bgColor={'rgba(255, 255, 255, 0)'}
+            fgColor={this.props.theme.palette.text.primary}
+            value={this.props.data.bond_invoice}
+            size={305}
+          />
           <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
             <Button
               size='small'
@@ -416,13 +415,12 @@ class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align='center'>
-          <Box sx={{ bgcolor: '#ffffff', width: '315px', position: 'relative', left: '-5px' }}>
-            <QRCode
-              value={this.props.data.escrow_invoice}
-              size={305}
-              style={{ position: 'relative', top: '3px' }}
-            />
-          </Box>
+          <QRCode
+            bgColor={'rgba(255, 255, 255, 0)'}
+            fgColor={this.props.theme.palette.text.primary}
+            value={this.props.data.escrow_invoice}
+            size={305}
+          />
           <Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
             <Button
               size='small'
@@ -512,6 +510,8 @@ class TradeBox extends Component {
         <DialogContent>
           <div style={{ textAlign: 'center' }}>
             <QRCode
+              bgColor={'rgba(255, 255, 255, 0)'}
+              fgColor={this.props.theme.palette.text.primary}
               value={
                 'tg://resolve?domain=' +
                 this.props.data.tg_bot_name +