diff --git a/app/app.ejs b/app/app.ejs
index b85c0574..e41c16c2 100644
--- a/app/app.ejs
+++ b/app/app.ejs
@@ -3,7 +3,7 @@
     <meta charset="utf-8" http-equiv="Content-Security-Policy" content="script-src 'self'"/>
     <title>Westeroscraft Launcher</title>
     <script src="./assets/js/scripts/uicore.js"></script>
-    <script src="./assets/js/scripts/actionbinder.js"></script>
+    <script src="./assets/js/scripts/uibinder.js"></script>
     <link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
     <style>
         body {
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 4bb9107c..040cc897 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -1294,6 +1294,11 @@ p {
  *                                                                             *
  ******************************************************************************/
 
+/* * *
+* Overlay View (Main Content)
+* * */
+
+/* Overlay container, placed over the main div. */
 #overlayContainer {
     position: absolute;
     top: 22px;
@@ -1305,6 +1310,7 @@ p {
     background: rgba(0, 0, 0, 0.50);
 }
 
+/* Main overlay content. */
 #overlayContent {
     position: relative;
     display: flex;
@@ -1319,6 +1325,7 @@ p {
     text-align: center;
 }
 
+/* Main overlay content anchor styles. */
 #overlayContent a {
     color: rgba(202, 202, 202, 0.75);
     transition: 0.25s ease;
@@ -1330,18 +1337,18 @@ p {
     color: rgba(165, 165, 165, 0.75);
 }
 
+/* Add spacing between overlay content elements. */
 #overlayContent > *:first-child {
     margin-top: 0px !important;
 }
-
 #overlayContent > *:last-child {
     margin-bottom: 0px !important;
 }
-
 #overlayContent > * {
     margin: 8px 0px;
 }
 
+/* Overlay title styles. */
 #overlayTitle {
     font-family: 'Avenir Medium';
     font-size: 20px;
@@ -1350,6 +1357,7 @@ p {
     letter-spacing: 1px;
 }
 
+/* Overlay description styles. */
 #overlayDesc {
     font-family: 'Avenir Book';
     font-size: 12px;
@@ -1357,12 +1365,14 @@ p {
     font-weight: bold;
 }
 
+/* Div which contains action buttons. */
 #overlayActionContainer {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+/* Overlay acknowledge button styles. */
 #overlayAcknowledge {
     background: none;
     border: 1px solid #ffffff;
@@ -1384,6 +1394,7 @@ p {
     color: rgba(255, 255, 255, 0.75);
 }
 
+/* Overlay dismiss option styles. */
 #overlayDismiss {
     font-family: 'Avenir Book';
     font-weight: bold;
@@ -1396,4 +1407,243 @@ p {
 }
 #overlayDismiss:active {
     color: rgba(165, 165, 165, 0.75);
+}
+
+/* * *
+* Overlay View (Server Selection Content)
+* * */
+
+/* Server selection content container. */
+#serverSelectContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 75%;
+}
+
+/* Server selection header. */
+#serverSelectHeader {
+    font-family: 'Avenir Medium';
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 25px;
+}
+
+/* Wrapper div for the list of available servers. */
+#serverSelectList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-height: 65%;
+    min-height: 40%;
+}
+
+/* Scrollable div which lists the available servers. */
+#serverSelectListScrollable {
+    padding: 0px 5px;
+    overflow-y: scroll;
+}
+#serverSelectListScrollable::-webkit-scrollbar {
+    width: 2px;
+}
+#serverSelectListScrollable::-webkit-scrollbar-track {
+    display: none;
+}
+#serverSelectListScrollable::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
+}
+
+/* Content container for a server listing. */
+.serverListing {
+    border: none;
+    padding: 0px;
+    width: 375px;
+    min-height: 60px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    opacity: 0.6;
+    transition: 0.25s ease;
+    cursor: pointer;
+    position: relative;
+    background: rgba(131, 131, 131, 0.25);
+}
+.serverListing[selected] {
+    cursor: default;
+    opacity: 1.0;
+}
+.serverListing:hover,
+.serverListing:focus {
+    outline: none;
+    opacity: 1.0;
+}
+
+/* Add spacing between server listings. */
+#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
+    margin: 5px 0px;
+}
+#serverSelectListScrollable > .serverListing:first-child {
+    margin-bottom: 5px;
+}
+#serverSelectListScrollable > .serverListing:last-child {
+    margin-top: 5px;
+}
+
+/* Server listing image. */
+.serverListingImg {
+    margin: 0px 10px 0px 5px;
+    border: 1px solid #fff;
+    height: 50px;
+    width: auto;
+}
+
+/* Content container for the server listing's details. */
+.serverListingDetails {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    height: 50px;
+}
+
+/* The name of the server listing. */
+.serverListingName {
+    font-family: 'Avenir Book';
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+}
+
+/* Description for the server listing. */
+.serverListingDescription {
+    font-family: 'Avenir Book';
+    font-size: 10px;
+    line-height: 10px;
+    font-weight: bold;
+    color: #fff;
+}
+
+/* Content container for the server listing's information. */
+.serverListingInfo {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+}
+
+/* The minecraft version of the server listing. */
+.serverListingVersion {
+    font-size: 10px;
+    color: #fff;
+    font-family: 'Avenir Book';
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 12px;
+    height: 12px;
+    border-radius: 2px;
+    background: rgba(31, 140, 11, 0.8);
+    padding: 0px 2px;
+}
+
+/* The revision version of the server's manifest. */
+.serverListingRevision {
+    font-family: 'Avenir Book';
+    color: #969696;
+    font-size: 10px;
+    line-height: 12px;
+    padding: 0px 5px;
+}
+
+/* Star which indicates the default (main) server. */
+.serverListingStarWrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: 12px;
+    position: relative;
+}
+/* Tooltip which displays when hovering over the star. */
+.serverListingStarTooltip {
+    visibility: hidden;
+    opacity: 0;
+    width: 65px;
+    background-color: rgba(0, 0, 0, 0.40);
+    color: #fff;
+    text-align: center;
+    border-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    left: 130%;
+    font-family: 'Avenir Book';
+    font-size: 10px;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+.serverListingStarTooltip::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
+}
+#serverListingStarWrapper:hover .serverListingStarTooltip {
+    visibility: visible;
+    opacity: 1;
+    transition-delay:0s;
+}
+
+/* Content container which contains the server select actions. */
+#serverSelectActions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 25px;
+}
+
+/* Server selection confirm button styles. */
+#serverSelectConfirm {
+    background: none;
+    border: 1px solid #ffffff;
+    color: white;
+    font-family: 'Avenir Medium';
+    font-weight: bold;
+    border-radius: 2px;
+    padding: 0px 8.1px;
+    cursor: pointer;
+    transition: 0.25s ease;
+    min-height: 20.67px;
+}
+#serverSelectConfirm:hover,
+#serverSelectConfirm:focus {
+    box-shadow: 0px 0px 10px 0px #fff;
+    outline: none;
+}
+#serverSelectConfirm:active {
+    border-color: rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.75);
+}
+
+/* Server selection cancel button styles. */
+#serverSelectCancel {
+    font-family: 'Avenir Book';
+    font-weight: bold;
+    font-size: 10px;
+    text-decoration: none;
+    padding-top: 2.5px;
+    color: rgba(202, 202, 202, 0.75);
+    transition: 0.25s ease;
+}
+#serverSelectCancel:hover {
+    color: rgba(255, 255, 255, 0.75);
+}
+#serverSelectCancel:active {
+    color: rgba(165, 165, 165, 0.75);
 }
\ No newline at end of file
diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
index a777b655..1bf4bab9 100644
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@@ -1,3 +1,6 @@
+/**
+ * Script for landing.ejs
+ */
 // Requirements
 const cp                    = require('child_process')
 const {URL}                 = require('url')
@@ -17,6 +20,57 @@ const launch_progress       = document.getElementById('launch_progress')
 const launch_progress_label = document.getElementById('launch_progress_label')
 const launch_details_text   = document.getElementById('launch_details_text')
 
+/* Launch Progress Wrapper Functions */
+
+/**
+ * Show/hide the loading area.
+ * 
+ * @param {boolean} loading True if the loading area should be shown, otherwise false.
+ */
+function toggleLaunchArea(loading){
+    if(loading){
+        launch_details.style.display = 'flex'
+        launch_content.style.display = 'none'
+    } else {
+        launch_details.style.display = 'none'
+        launch_content.style.display = 'inline-flex'
+    }
+}
+
+/**
+ * Set the details text of the loading area.
+ * 
+ * @param {string} details The new text for the loading details.
+ */
+function setLaunchDetails(details){
+    launch_details_text.innerHTML = details
+}
+
+/**
+ * Set the value of the loading progress bar and display that value.
+ * 
+ * @param {number} value The progress value.
+ * @param {number} max The total size.
+ * @param {number|string} percent Optional. The percentage to display on the progress label.
+ */
+function setLaunchPercentage(value, max, percent = ((value/max)*100)){
+    launch_progress.setAttribute('max', max)
+    launch_progress.setAttribute('value', value)
+    launch_progress_label.innerHTML = percent + '%'
+}
+
+/**
+ * Set the value of the OS progress bar and display that on the UI.
+ * 
+ * @param {number} value The progress value.
+ * @param {number} max The total download size.
+ * @param {number|string} percent Optional. The percentage to display on the progress label.
+ */
+function setDownloadPercentage(value, max, percent = ((value/max)*100)){
+    remote.getCurrentWindow().setProgressBar(value/max)
+    setLaunchPercentage(value, max, percent)
+}
+
 // Bind launch button
 document.getElementById('launch_button').addEventListener('click', function(e){
     console.log('Launching game..')
diff --git a/app/assets/js/scripts/login.js b/app/assets/js/scripts/login.js
index bca00769..0b1d5fda 100644
--- a/app/assets/js/scripts/login.js
+++ b/app/assets/js/scripts/login.js
@@ -1,8 +1,10 @@
-//const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
-
+/**
+ * Script for login.ejs
+ */
 // Validation Regexes.
 const validUsername         = /^[a-zA-Z0-9_]{1,16}$/
 const basicEmail            = /^\S+@\S+\.\S+$/
+//const validEmail          = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
 
 // Login Elements
 const loginEmailError       = document.getElementById('loginEmailError')
diff --git a/app/assets/js/scripts/actionbinder.js b/app/assets/js/scripts/overlay.js
similarity index 57%
rename from app/assets/js/scripts/actionbinder.js
rename to app/assets/js/scripts/overlay.js
index 1ec41cf0..0c47af69 100644
--- a/app/assets/js/scripts/actionbinder.js
+++ b/app/assets/js/scripts/overlay.js
@@ -1,22 +1,6 @@
-// Requirements
-const path          = require('path')
-const ConfigManager = require(path.join(__dirname, 'assets', 'js', 'configmanager.js'))
-
-// Synchronous Listener
-document.addEventListener('readystatechange', function(){
-
-    if (document.readyState === 'complete'){
-        if(ConfigManager.isFirstLaunch()){
-            $('#welcomeContainer').fadeIn(500)
-        } else {
-            $('#landingContainer').fadeIn(500)
-        }
-    }
-
-    /*if (document.readyState === 'interactive'){
-        
-    }*/
-}, false)
+/**
+ * Script for overlay.ejs
+ */
 
 /* Overlay Wrapper Functions */
 
@@ -103,56 +87,4 @@ function setDismissHandler(handler){
     } else {
         document.getElementById('overlayDismiss').onclick = handler
     }
-}
-
-/* Launch Progress Wrapper Functions */
-
-/**
- * Show/hide the loading area.
- * 
- * @param {boolean} loading True if the loading area should be shown, otherwise false.
- */
-function toggleLaunchArea(loading){
-    if(loading){
-        launch_details.style.display = 'flex'
-        launch_content.style.display = 'none'
-    } else {
-        launch_details.style.display = 'none'
-        launch_content.style.display = 'inline-flex'
-    }
-}
-
-/**
- * Set the details text of the loading area.
- * 
- * @param {string} details The new text for the loading details.
- */
-function setLaunchDetails(details){
-    launch_details_text.innerHTML = details
-}
-
-/**
- * Set the value of the loading progress bar and display that value.
- * 
- * @param {number} value The progress value.
- * @param {number} max The total size.
- * @param {number|string} percent Optional. The percentage to display on the progress label.
- */
-function setLaunchPercentage(value, max, percent = ((value/max)*100)){
-    launch_progress.setAttribute('max', max)
-    launch_progress.setAttribute('value', value)
-    launch_progress_label.innerHTML = percent + '%'
-}
-
-/**
- * Set the value of the OS progress bar and display that on the UI.
- * 
- * @param {number} value The progress value.
- * @param {number} max The total download size.
- * @param {number|string} percent Optional. The percentage to display on the progress label.
- */
-function setDownloadPercentage(value, max, percent = ((value/max)*100)){
-    remote.getCurrentWindow().setProgressBar(value/max)
-    setLaunchPercentage(value, max, percent)
-}
-
+}
\ No newline at end of file
diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js
new file mode 100644
index 00000000..3f620a54
--- /dev/null
+++ b/app/assets/js/scripts/uibinder.js
@@ -0,0 +1,23 @@
+/**
+ * Initialize UI functions which depend on internal modules.
+ * Loaded after core UI functions are initialized in uicore.js.
+ */
+// Requirements
+const path          = require('path')
+const ConfigManager = require(path.join(__dirname, 'assets', 'js', 'configmanager.js'))
+
+// Synchronous Listener
+document.addEventListener('readystatechange', function(){
+
+    if (document.readyState === 'complete'){
+        if(ConfigManager.isFirstLaunch()){
+            $('#welcomeContainer').fadeIn(500)
+        } else {
+            $('#landingContainer').fadeIn(500)
+        }
+    }
+
+    /*if (document.readyState === 'interactive'){
+        
+    }*/
+}, false)
diff --git a/app/assets/js/scripts/welcome.js b/app/assets/js/scripts/welcome.js
index 87b1923f..5b5bad49 100644
--- a/app/assets/js/scripts/welcome.js
+++ b/app/assets/js/scripts/welcome.js
@@ -1,7 +1,7 @@
-// DOM cache.
-const welcomeButton = document.getElementById('welcomeButton')
-
-welcomeButton.addEventListener('click', e => {
+/**
+ * Script for welcome.ejs
+ */
+document.getElementById('welcomeButton').addEventListener('click', e => {
     $('#welcomeContainer').fadeOut(500, () => {
         $('#loginContainer').fadeIn(500)
     })
diff --git a/app/overlay.ejs b/app/overlay.ejs
index 9dae97f5..e59e7bda 100644
--- a/app/overlay.ejs
+++ b/app/overlay.ejs
@@ -1,223 +1,3 @@
-<style text="text/css">
-#serverSelectContent {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 75%;
-}
-
-#serverSelectHeader {
-    font-family: 'Avenir Medium';
-    font-size: 20px;
-    font-weight: bold;
-    color: #fff;
-    margin-bottom: 25px;
-}
-
-#serverSelectList {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    max-height: 65%;
-    min-height: 40%;
-}
-#serverSelectListScrollable {
-    padding: 0px 5px;
-    overflow-y: scroll;
-}
-#serverSelectListScrollable::-webkit-scrollbar {
-    width: 2px;
-}
-#serverSelectListScrollable::-webkit-scrollbar-track {
-    display: none;
-}
-#serverSelectListScrollable::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
-}
-
-.serverListing {
-    border: none;
-    padding: 0px;
-    width: 375px;
-    min-height: 60px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    opacity: 0.6;
-    transition: 0.25s ease;
-    cursor: pointer;
-    position: relative;
-    background: rgba(131, 131, 131, 0.25);
-}
-.serverListing[selected] {
-    cursor: default;
-    opacity: 1.0;
-}
-.serverListing:hover,
-.serverListing:focus {
-    outline: none;
-    opacity: 1.0;
-}
-#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
-    margin: 5px 0px;
-}
-#serverSelectListScrollable > .serverListing:first-child {
-    margin-bottom: 5px;
-}
-#serverSelectListScrollable > .serverListing:last-child {
-    margin-top: 5px;
-}
-
-.serverListingImg {
-    margin: 0px 10px 0px 5px;
-    border: 1px solid #fff;
-    height: 50px;
-    width: auto;
-}
-
-.serverListingDetails {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
-    height: 50px;
-}
-
-.serverListingName {
-    font-family: 'Avenir Book';
-    font-size: 14px;
-    font-weight: bold;
-    color: #fff;
-}
-
-.serverListingDescription {
-    font-family: 'Avenir Book';
-    font-size: 10px;
-    line-height: 10px;
-    font-weight: bold;
-    color: #fff;
-}
-
-#serverSelectActions {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 25px;
-}
-
-#serverSelectConfirm {
-    background: none;
-    border: 1px solid #ffffff;
-    color: white;
-    font-family: 'Avenir Medium';
-    font-weight: bold;
-    border-radius: 2px;
-    padding: 0px 8.1px;
-    cursor: pointer;
-    transition: 0.25s ease;
-    min-height: 20.67px;
-}
-#serverSelectConfirm:hover,
-#serverSelectConfirm:focus {
-    box-shadow: 0px 0px 10px 0px #fff;
-    outline: none;
-}
-#serverSelectConfirm:active {
-    border-color: rgba(255, 255, 255, 0.75);
-    color: rgba(255, 255, 255, 0.75);
-}
-
-#serverSelectCancel {
-    font-family: 'Avenir Book';
-    font-weight: bold;
-    font-size: 10px;
-    text-decoration: none;
-    padding-top: 2.5px;
-    color: rgba(202, 202, 202, 0.75);
-    transition: 0.25s ease;
-}
-#serverSelectCancel:hover {
-    color: rgba(255, 255, 255, 0.75);
-}
-#serverSelectCancel:active {
-    color: rgba(165, 165, 165, 0.75);
-}
-
-.serverListingInfo {
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-}
-
-.serverListingVersion {
-    font-size: 10px;
-    color: #fff;
-    font-family: 'Avenir Book';
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    line-height: 12px;
-    height: 12px;
-    border-radius: 2px;
-    background: rgba(31, 140, 11, 0.8);
-    padding: 0px 2px;
-}
-
-.serverListingRevision {
-    font-family: 'Avenir Book';
-    color: #969696;
-    font-size: 10px;
-    line-height: 12px;
-    padding: 0px 5px;
-}
-
-#serverListingStarWrapper {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    height: 12px;
-    position: relative;
-}
-
-.serverListingStarTooltip {
-    visibility: hidden;
-    opacity: 0;
-    width: 65px;
-    background-color: rgba(0, 0, 0, 0.40);
-    color: #fff;
-    text-align: center;
-    border-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    left: 130%;
-    font-family: 'Avenir Book';
-    font-size: 10px;
-    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
-}
-
-.serverListingStarTooltip::after {
-    content: " ";
-    position: absolute;
-    top: 50%;
-    right: 100%; /* To the left of the tooltip */
-    margin-top: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
-}
-
-#serverListingStarWrapper:hover .serverListingStarTooltip {
-    visibility: visible;
-    opacity: 1;
-    transition-delay:0s;
-}
-
-</style>
 <div id="overlayContainer" style="display: none;">
     <div id="serverSelectContent">
         <span id="serverSelectHeader">Available Servers</span>
@@ -231,7 +11,7 @@
                         <div class="serverListingInfo">
                             <div class="serverListingVersion">1.11.2</div>
                             <div class="serverListingRevision">3.4.17</div>
-                            <div id="serverListingStarWrapper">
+                            <div class="serverListingStarWrapper">
                                 <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
                                     <defs>
                                         <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
@@ -292,4 +72,5 @@
             <a href="javascript:void(0);" id="overlayDismiss" style="display: none;">Dismiss</a>
         </div>
     </div>
+    <script src="./assets/js/scripts/overlay.js"></script>
 </div>
\ No newline at end of file