diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 3e7d263..2fec6a4 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -61,7 +61,7 @@ body, button {
     display: flex;
     flex-direction: column;
     transition: background-color 1s ease;
-    /*background-color: rgba(1, 2, 1, 0.5);*/
+    /*background-color: rgba(0, 0, 0, 0.5);*/
     -webkit-user-select: none;
 }
 
@@ -883,7 +883,8 @@ body, button {
     position: relative;
     height: 100%;
     display: flex;
-    background: rgba(0, 0, 0, 0.50);
+    background-color: rgba(0, 0, 0, 0.50);
+    transition: background-color 0.25s cubic-bezier(.02, .01, .47, 1);
 }
 
 /* Drop shadow displayed when content is scrolled out of view. */
diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js
index 450f8cd..b967657 100644
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@@ -30,18 +30,33 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
         } else {
             $('#overlayDismiss').hide()
         }
-        $('#overlayContainer').fadeIn(250)
+        $('#overlayContainer').fadeIn({
+            duration: 250,
+            start: () => {
+                if(getCurrentView() === VIEWS.settings){
+                    document.getElementById('settingsContainer').style.backgroundColor = 'transparent'
+                }
+            }
+        })
     } else {
         document.getElementById('main').removeAttribute('overlay')
         // Make things tabbable.
         $("#main *").removeAttr('tabindex')
-        $('#overlayContainer').fadeOut(250, () => {
-            $('#' + content).parent().children().hide()
-            $('#' + content).show()
-            if(dismissable){
-                $('#overlayDismiss').show()
-            } else {
-                $('#overlayDismiss').hide()
+        $('#overlayContainer').fadeOut({
+            duration: 250,
+            start: () => {
+                if(getCurrentView() === VIEWS.settings){
+                    document.getElementById('settingsContainer').style.backgroundColor = 'rgba(0, 0, 0, 0.50)'
+                }
+            },
+            complete: () => {
+                $('#' + content).parent().children().hide()
+                $('#' + content).show()
+                if(dismissable){
+                    $('#overlayDismiss').show()
+                } else {
+                    $('#overlayDismiss').hide()
+                }
             }
         })
     }
diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js
index a914f75..064dcca 100644
--- a/app/assets/js/scripts/uibinder.js
+++ b/app/assets/js/scripts/uibinder.js
@@ -20,7 +20,7 @@ const VIEWS = {
 }
 
 // The currently shown view container.
-let currentView = VIEWS.landing
+let currentView
 
 /**
  * Switch launcher views.
@@ -63,7 +63,7 @@ function showMainUI(){
     updateSelectedServer(AssetGuard.getServerById(ConfigManager.getSelectedServer()).name)
     refreshServerStatus()
     setTimeout(() => {
-        document.getElementById('frameBar').style.backgroundColor = 'rgba(1, 2, 1, 0.5)'
+        document.getElementById('frameBar').style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
         document.body.style.backgroundImage = `url('assets/images/backgrounds/${document.body.getAttribute('bkid')}.jpg')`
         $('#main').show()
 
@@ -82,11 +82,14 @@ function showMainUI(){
         }
 
         if(ConfigManager.isFirstLaunch()){
+            currentView = VIEWS.welcome
             $(VIEWS.welcome).fadeIn(1000)
         } else {
             if(isLoggedIn){
+                currentView = VIEWS.landing
                 $(VIEWS.landing).fadeIn(1000)
             } else {
+                currentView = VIEWS.login
                 $(VIEWS.login).fadeIn(1000)
             }
         }