diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 02d143e..507c780 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -79,7 +79,6 @@ class App extends React.Component<IProps, IState> {
   async componentDidMount() {
     const cert_generated = await getConfigOption('cert_generated')
     const game_exe = await getConfigOption('game_install_path')
-    const custom_bg = await getConfigOption('customBackground')
     const game_path = game_exe?.substring(0, game_exe.replace(/\\/g, '/').lastIndexOf('/')) || ''
     const root_path = game_path?.substring(0, game_path.replace(/\\/g, '/').lastIndexOf('/')) || ''
 
@@ -90,6 +89,9 @@ class App extends React.Component<IProps, IState> {
       await loadTheme(themeObj, document)
     }
 
+    // Get custom bg AFTER theme is loaded !! important !!
+    const custom_bg = await getConfigOption('customBackground')
+
     if(!custom_bg || !/png|jpg|jpeg$/.test(custom_bg)) {
       if(game_path) {
         // Get the bg by invoking, then set the background to that bg.
diff --git a/src/utils/themes.ts b/src/utils/themes.ts
index e0c3309..6e78587 100644
--- a/src/utils/themes.ts
+++ b/src/utils/themes.ts
@@ -1,6 +1,7 @@
 import { invoke } from '@tauri-apps/api'
 import { dataDir } from '@tauri-apps/api/path'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { getConfig, setConfigOption } from './configuration'
 
 interface Theme {
   name: string
@@ -77,6 +78,9 @@ export async function getTheme(name: string) {
 }
 
 export async function loadTheme(theme: ThemeList, document: Document) {
+  // Get config, since we will set the custom background in there
+  const config = await getConfig()
+
   // We are going to dynamically load stylesheets into the document
   const head = document.head
 
@@ -107,22 +111,32 @@ export async function loadTheme(theme: ThemeList, document: Document) {
 
   // Set custom background
   if (theme.customBackgroundURL) {
-    document.body.style.backgroundImage = `url('${theme.customBackgroundURL}')`
+    // If the custom bg is already set don't overwrite
+    if (config.customBackground === '') {
+      config.customBackground = theme.customBackgroundURL
+    }
   }
 
   // Set custom background
   if (theme.customBackgroundPath) {
-    const bgPath = await dataDir() + 'cultivation/grasscutter/theme.png'
+    const bgPath = (await dataDir()).replace(/\\/g, '/') + 'cultivation/bg/'
+    const imageName = theme.customBackgroundPath.split('/').pop()
 
     // Save the background to our data dir
     await invoke('copy_file', {
       path: theme.path + '/' + theme.customBackgroundPath,
-      new_path: bgPath
+      newPath: bgPath
     })
 
     // Set the background
-    document.body.style.backgroundImage = `url('${bgPath}')`
+    // If the custom bg is already set don't overwrite
+    if (config.customBackground === '') {
+      config.customBackground = bgPath + imageName
+    }
   }
 
+  // Write config
+  await setConfigOption('customBackground', config.customBackground)
+
   return
 }
\ No newline at end of file