diff --git a/.gitignore b/.gitignore
index b0c6d4e2..5407a5f5 100755
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 /npm-debug.log*
@@ -9,13 +7,9 @@
 
 # production
 /dist
-/.debug
-# misc
-.DS_Store
 
 # umi
 /src/.umi
 /src/.umi-production
 /src/.umi-test
 /.env.local
-.debug/4.11/.editorconfig
diff --git a/.umirc.ts b/.umirc.ts
index 84bbe396..0b3284c6 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -17,7 +17,7 @@ export default defineConfig({
     type: 'none',
   },
   alias: {
-    api: resolve(__dirname, './api'),
+    api: resolve(__dirname, './node_modules/@ragestudio/ycorejs-lib'),
     globals: resolve(__dirname, './globals'),
     core: resolve(__dirname, './src/core'),
     theme: resolve(__dirname, './src/theme'),
diff --git a/globals/theme_settings.js b/globals/theme_settings.js
index cc5fbb92..6af918bf 100644
--- a/globals/theme_settings.js
+++ b/globals/theme_settings.js
@@ -4,26 +4,32 @@ export default [
     {
       id: 'backgroundImage',
       icon: <Icons.Image />,
-      title: 'Background Image',
+      title: 'Background',
       description: 'Change the background of the app',
     },
     {
-      id: 'backgroundColor',
-      icon: <Icons.Droplet />,
-      title: 'Overlay Color',
+      id: 'overlay',
+      icon: <Icons.Sidebar />,
+      title: 'Overlay',
       description: 'Description blah blah',
     },
     {
       id: 'color',
-      icon: <Icons.FormatPainterOutlined style={{ marginRight: '10px' }} />,
+      icon: <Icons.Droplet />,
       title: 'Colors',
       description: 'Texts, Buttons, Sliders ...etc',
     },
     {
-      id: 'fontSize',
-      icon: <Icons.ZoomIn />,
-      title: 'Sizes',
-      description: 'Zoom?',
+      id: 'text',
+      icon: <Icons.FontColorsOutlined style={{ marginRight: '10px' }} />,
+      title: 'Text',
+      description: 'Sizes, Fonts',
+    },
+    {
+      id: 'sounds',
+      icon: <Icons.Volume2 />,
+      title: 'Sounds',
+      description: 'BlipBlopBLup',
     },
     {
       id: 'darkmode',
diff --git a/package.json b/package.json
index 607bb301..4aadfc8c 100755
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.7.31",
+  "version": "0.4.04",
   "stage": "dev-pre",
   "description": "",
   "author": "RageStudio",
@@ -35,7 +35,7 @@
     "@lingui/react": "^2.9.1",
     "@material-ui/core": "^4.9.9",
     "@material-ui/icons": "^4.9.1",
-    "@ragestudio/ycorejs-lib": "^0.1.21",
+    "@ragestudio/ycorejs-lib": "^0.1.22",
     "antd": "^4.5.1",
     "axios": "^0.19.2",
     "babel-core": "^6.26.3",
diff --git a/src/models/app.js b/src/models/app.js
index 70b18438..e7ec5ab9 100755
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -128,6 +128,7 @@ export default {
           e.key === payload.key? (tmp.value = payload.value) : (tmp.value = e.value)
           container_2.push(tmp)
         })
+    
       }else{
         container_2 = [payload]
       }
diff --git a/src/pages/settings/components/theme/index.js b/src/pages/settings/components/theme/index.js
index 08c609a8..ff214aed 100644
--- a/src/pages/settings/components/theme/index.js
+++ b/src/pages/settings/components/theme/index.js
@@ -36,13 +36,40 @@ class DarkMode extends React.Component{
     state = {
         model: { active: false, autoTime: '' }
     }
+    
+    handleUpdate(payload){
+        if (!payload) {
+            payload = this.state.model
+        }
+        this.setState({ model: payload, processing: false })
+        this.props.dispatch({
+            type: 'app/updateTheme',
+            payload: { 
+                key: 'darkmode',
+                value: payload
+            }
+        });
+    }
     render(){
+        const promiseState = async state => new Promise(resolve => this.setState(state, resolve));
         return <>
             <div>
                 <h2><Icons.Moon /> Dark Mode</h2>
             </div>
             <div>
-                
+            <div className={styles.background_image_controls} >
+                <div>
+                    <h4><Icons.Eye />Enabled</h4>
+                    <antd.Switch 
+                        checkedChildren="Enabled"
+                        unCheckedChildren="Disabled"
+                        loading={this.state.processing}
+                        onChange={(e) => {promiseState(prevState => ({ model: { ...prevState.model, active: e }})).then(() => this.handleUpdate())}}
+                        checked={this.state.model.active}
+                    />
+                </div>
+            </div>
+
             </div>
 
          </>