diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 251980dd..4ba90263 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -1402,6 +1402,7 @@ input:checked + .toggleSwitchSlider:before {
     border-radius: 50%;
     background-color: #c32625;
     margin-right: 15px;
+    transition: 0.25s ease;
 }
 
 .settingsModContent {
@@ -1430,8 +1431,8 @@ input:checked + .toggleSwitchSlider:before {
     pointer-events: none;
 }
 
-.settingsMod[enabled] .settingsModStatus,
-.settingsSubMod[enabled] .settingsModStatus{
+.settingsMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus,
+.settingsSubMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus {
     background-color: rgb(165, 195, 37);
 }
 
diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js
index a610dd7a..270afd31 100644
--- a/app/assets/js/scripts/settings.js
+++ b/app/assets/js/scripts/settings.js
@@ -55,12 +55,12 @@ function initSettingsValidators(){
 function initSettingsValues(){
     const sEls = document.getElementById('settingsContainer').querySelectorAll('[cValue]')
     Array.from(sEls).map((v, index, arr) => {
-        const gFn = ConfigManager['get' + v.getAttribute('cValue')]
+        const cVal = v.getAttribute('cValue')
+        const gFn = ConfigManager['get' + cVal]
         if(typeof gFn === 'function'){
             if(v.tagName === 'INPUT'){
                 if(v.type === 'number' || v.type === 'text'){
                     // Special Conditions
-                    const cVal = v.getAttribute('cValue')
                     if(cVal === 'JavaExecutable'){
                         populateJavaExecDetails(v.value)
                         v.value = gFn()
@@ -75,7 +75,6 @@ function initSettingsValues(){
             } else if(v.tagName === 'DIV'){
                 if(v.classList.contains('rangeSlider')){
                     // Special Conditions
-                    const cVal = v.getAttribute('cValue')
                     if(cVal === 'MinRAM' || cVal === 'MaxRAM'){
                         let val = gFn()
                         if(val.endsWith('M')){
@@ -101,12 +100,12 @@ function initSettingsValues(){
 function saveSettingsValues(){
     const sEls = document.getElementById('settingsContainer').querySelectorAll('[cValue]')
     Array.from(sEls).map((v, index, arr) => {
-        const sFn = ConfigManager['set' + v.getAttribute('cValue')]
+        const cVal = v.getAttribute('cValue')
+        const sFn = ConfigManager['set' + cVal]
         if(typeof sFn === 'function'){
             if(v.tagName === 'INPUT'){
                 if(v.type === 'number' || v.type === 'text'){
                     // Special Conditions
-                    const cVal = v.getAttribute('cValue')
                     if(cVal === 'JVMOptions'){
                         sFn(v.value.split(' '))
                     } else {
@@ -115,7 +114,6 @@ function saveSettingsValues(){
                 } else if(v.type === 'checkbox'){
                     sFn(v.checked)
                     // Special Conditions
-                    const cVal = v.getAttribute('cValue')
                     if(cVal === 'AllowPrerelease'){
                         changeAllowPrerelease(v.checked)
                     }
@@ -123,7 +121,6 @@ function saveSettingsValues(){
             } else if(v.tagName === 'DIV'){
                 if(v.classList.contains('rangeSlider')){
                     // Special Conditions
-                    const cVal = v.getAttribute('cValue')
                     if(cVal === 'MinRAM' || cVal === 'MaxRAM'){
                         let val = Number(v.getAttribute('value'))
                         if(val%1 > 0){
@@ -234,6 +231,7 @@ function settingsSaveDisabled(v){
 /* Closes the settings view and saves all data. */
 settingsNavDone.onclick = () => {
     saveSettingsValues()
+    saveModConfiguration()
     ConfigManager.save()
     switchView(getCurrentView(), VIEWS.landing)
 }
@@ -426,6 +424,8 @@ document.getElementById('settingsGameHeight').addEventListener('keydown', (e) =>
  * Mods Tab
  */
 
+const settingsModsContainer = document.getElementById('settingsModsContainer')
+
 function resolveModsForUI(){
     const serv = ConfigManager.getSelectedServer()
 
@@ -484,12 +484,12 @@ function parseModulesForUI(mdls, submodules = false, servConf){
                             </div>
                         </div>
                         <label class="toggleSwitch">
-                            <input type="checkbox" ${val ? 'checked' : ''}>
+                            <input type="checkbox" formod="${mdl.getVersionlessID()}" ${val ? 'checked' : ''}>
                             <span class="toggleSwitchSlider"></span>
                         </label>
                     </div>
                     ${mdl.hasSubModules() ? `<div class="settingsSubModContainer">
-                        ${mdl.hasSubModules() ? Object.values(parseModulesForUI(mdl.getSubModules(), true, conf.mods)).join('') : ''}
+                        ${Object.values(parseModulesForUI(mdl.getSubModules(), true, conf.mods)).join('')}
                     </div>` : ''}
                 </div>`
 
@@ -506,11 +506,60 @@ function parseModulesForUI(mdls, submodules = false, servConf){
 
 }
 
+/**
+ * Bind functionality to mod config toggle switches. Switching the value
+ * will also switch the status color on the left of the mod UI.
+ */
+function bindModsToggleSwitch(){
+    const sEls = settingsModsContainer.querySelectorAll('[formod]')
+    Array.from(sEls).map((v, index, arr) => {
+        v.onchange = () => {
+            if(v.checked) {
+                document.getElementById(v.getAttribute('formod')).setAttribute('enabled', '')
+            } else {
+                document.getElementById(v.getAttribute('formod')).removeAttribute('enabled')
+            }
+        }
+    })
+}
+
+
+/**
+ * Save the mod configuration based on the UI values.
+ */
+function saveModConfiguration(){
+    const serv = ConfigManager.getSelectedServer()
+    const modConf = ConfigManager.getModConfiguration(serv)
+    modConf.mods = _saveModConfiguration(modConf.mods)
+    ConfigManager.setModConfiguration(serv, modConf)
+}
+
+/**
+ * Recursively save mod config with submods.
+ * 
+ * @param {Object} modConf Mod config object to save.
+ */
+function _saveModConfiguration(modConf){
+    for(m of Object.entries(modConf)){
+        const val = settingsModsContainer.querySelectorAll(`[formod='${m[0]}']`)[0].checked
+        if(typeof m[1] === 'boolean'){
+            modConf[m[0]] = val
+        } else {
+            if(m[1] != null){
+                modConf[m[0]].value = val
+                modConf[m[0]].mods = _saveModConfiguration(modConf[m[0]].mods)
+            }
+        }
+    }
+    return modConf
+}
+
 /**
  * Prepare the Java tab for display.
  */
 function prepareModsTab(){
     resolveModsForUI()
+    bindModsToggleSwitch()
 }
 
 /**
diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js
index 5b3ba7e5..fe35206c 100644
--- a/app/assets/js/scripts/uibinder.js
+++ b/app/assets/js/scripts/uibinder.js
@@ -344,7 +344,7 @@ function setSelectedAccount(uuid){
 // Synchronous Listener
 document.addEventListener('readystatechange', function(){
 
-    if (document.readyState === 'complete'){
+    if (document.readyState === 'interactive' || document.readyState === 'complete'){
         if(rscShouldLoad){
             if(!fatalStartupError){
                 const data = DistroManager.getDistribution()
@@ -353,9 +353,9 @@ document.addEventListener('readystatechange', function(){
                 showFatalStartupError()
             }
         } 
-    } else if(document.readyState === 'interactive'){
+    }// else if(document.readyState === 'interactive'){
         //toggleOverlay(true, 'loadingContent')
-    }
+    //}
 
     /*if (document.readyState === 'interactive'){
         
@@ -367,14 +367,14 @@ ipcRenderer.on('distributionIndexDone', (event, res) => {
     if(res) {
         const data = DistroManager.getDistribution()
         syncModConfigurations(data)
-        if(document.readyState === 'complete'){
+        if(document.readyState === 'interactive' || document.readyState === 'complete'){
             showMainUI(data)
         } else {
             rscShouldLoad = true
         }
     } else {
         fatalStartupError = true
-        if(document.readyState === 'complete'){
+        if(document.readyState === 'interactive' || document.readyState === 'complete'){
             showFatalStartupError()
         } else {
             rscShouldLoad = true