diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index d320c7b4..f0ffa193 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## ⚡️ 1.6.8 - Improved Loading Experience [PR #183](https://github.com/Lissy93/dashy/pull/183)
+- During app initialization, show the build progress and status message
+- While requests are being made, show loader at top of screen
+- Also adds some UI improvements to Workspace view
+
 ## ⚡️ 1.6.7 - Option for non-SSL status checks plus minor things [PR #182](https://github.com/Lissy93/dashy/pull/182)
 - Adds an option for user to use status checks with non-HTTPS services, Re: #181
 - Updates the .env template, plus the variables used in the server
diff --git a/package.json b/package.json
index de8b201b..2eca2612 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -27,6 +27,7 @@
     "keycloak-js": "^15.0.2",
     "register-service-worker": "^1.6.2",
     "remedial": "^1.0.8",
+    "rsup-progress": "^2.0.4",
     "serve-static": "^1.14.1",
     "v-jsoneditor": "^1.4.2",
     "v-tooltip": "^2.1.3",
diff --git a/public/default.html b/public/default.html
index b42dba7a..aaedff4f 100644
--- a/public/default.html
+++ b/public/default.html
@@ -1,6 +1,7 @@
 <!doctype html>
+<!-- Dashy: Licensed under MIT, (C) 2021 Alicia Sykes <https://aliciasykes.com> -->
+<!-- This is the default page, displayed while the app is still building -->
 <html>
-
 <head>
   <title>Dashy</title>
   <meta name="description" content="Welcome to Dashy">
@@ -12,6 +13,7 @@
 </head>
 
 <body>
+  <!-- Dashy Title Wavey Text -->
   <svg viewbox="0 0 100 20">
     <defs>
       <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
@@ -29,9 +31,16 @@
     <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.8">Dashy</text>
     <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.5">Dashy</text>
   </svg>
+
+  <!-- Progress Bar -->
+  <div class="progress-outer" id="bar-outer">
+    <div class="progress-inner" id="bar"></div>
+  </div>
+
+  <!-- Status label, with animated dots -->
   <div>
-    <h2>Initializing</h2>
-    <span class="dots-cont">
+    <h2 id="status-text">Initializing</h2>
+    <span id="dots" class="dots-cont">
       <span class="dot dot-1"></span>
       <span class="dot dot-2"></span>
       <span class="dot dot-3"></span>
@@ -39,7 +48,10 @@
     </span>
   </div>
 
+  <p class="time-note" id="note">This may take a minute or two</p>
+
   <style lang="css">
+    /* Page Layout Styles */
     body,
     html {
       margin: 0;
@@ -68,6 +80,7 @@
       display: inline;
     }
 
+    /* Animated Dots */
     .dots-cont {
       display: inline;
     }
@@ -84,44 +97,168 @@
       position: relative;
       animation: jump 1s infinite;
     }
-
-    .dots-cont .dot-1 {
-      -webkit-animation-delay: 100ms;
-      animation-delay: 100ms;
-    }
-
-    .dots-cont .dot-2 {
-      -webkit-animation-delay: 200ms;
-      animation-delay: 200ms;
-    }
-
-    .dots-cont .dot-3 {
-      -webkit-animation-delay: 300ms;
-      animation-delay: 300ms;
-    }
-
-    .dots-cont .dot-4 {
-      -webkit-animation-delay: 400ms;
-      animation-delay: 400ms;
-    }
+    .dots-cont .dot-1 { -webkit-animation-delay: 100ms; animation-delay: 100ms; }
+    .dots-cont .dot-2 { -webkit-animation-delay: 200ms; animation-delay: 200ms; }
+    .dots-cont .dot-3 { -webkit-animation-delay: 300ms; animation-delay: 300ms; }
+    .dots-cont .dot-4 { -webkit-animation-delay: 400ms; animation-delay: 400ms; }
 
     @keyframes jump {
-      0% {
-        bottom: 0px;
-      }
-
-      20% {
-        bottom: 5px;
-      }
-
-      40% {
-        bottom: 0px;
-      }
+      0% { bottom: 0px; }
+      20% { bottom: 5px; }
+      40% { bottom: 0px; }
     }
+
+    /* Little note */
+    p.time-note, p.time-note a {
+      font-size: 1rem;
+      color: #808080a6;
+      font-family: Tahoma, 'Trebuchet MS', sans-serif;
+    }
+
+    /* Progress Bar */
+    .progress-outer {
+      position: relative;
+      margin: 1rem;
+      height: 0.5rem;
+      width: 20rem;
+      border: 1px solid #fff;
+      border-radius: 6px;
+    }
+
+    .progress-outer .progress-inner {
+      position: absolute;
+      background-color: #fff;
+      width: 0px;
+      height: 0.5rem;
+      border-radius: 15px;
+    }
+    #bar.stage-0 {  animation: progress-0 8s infinite linear; }
+    #bar.stage-1 {  animation: progress-1 8s infinite linear; }
+    #bar.stage-2 {  animation: progress-2 8s infinite linear; }
+    #bar.stage-3 {  animation: progress-3 8s infinite linear; }
+    #bar.stage-4 {  animation: progress-4 8s infinite linear; }
+    #bar.stage-5 {  animation: progress-5 8s infinite linear; }
+    #bar.stage-6 {  animation: progress-6 8s infinite linear; }
+    #bar.stage-7 {  animation: progress-7 8s infinite linear; }
+    #bar.stage-8 {  animation: progress-8 8s infinite linear; }
+
+    @keyframes progress {
+      0% { width: 0%; }
+      25% { width: 50%; }
+      50% { width: 75%; }
+      75% { width: 85%; }
+      100% { width: 100%; }
+    }
+    @keyframes progress-0 {
+      0% { width: 0%; }
+      50% { width: 20%; }
+      100% { width: 30%; }
+    }
+    @keyframes progress-1 {
+      0% { width: 30%; }
+      50% { width: 42%; }
+      100% { width: 50%; }
+    }
+    @keyframes progress-2 {
+      0% { width: 50%; }
+      50% { width: 60%; }
+      100% { width: 65%; }
+    }
+    @keyframes progress-3 {
+      0% { width: 65%; }
+      100% { width: 75%; }
+    }
+    @keyframes progress-4 {
+      0% { width: 75%; }
+      100% { width: 85%; }
+    }
+    @keyframes progress-5 {
+      0% { width: 85%; }
+      100% { width: 90%; }
+    }
+    @keyframes progress-6 {
+      0% { width: 90%; }
+      100% { width: 94%; }
+    }
+    @keyframes progress-7 {
+      0% { width: 94%; }
+      50% { width: 96%; }
+      75% { width: 90%; }
+      100% { width: 96%; }
+    }
+    @keyframes progress-8 {
+      0% { width: 95%; }
+      50% { width: 97%; }
+      75% { width: 94%; }
+      100% { width: 98%; }
+    }
+
+    .hide { display: none; }
   </style>
 
   <script>
-    setTimeout(() => { location.reload(); }, 10000);
+    const refreshRate = 8000;
+    // Refresh at interval
+    setTimeout(() => { location.reload(); }, refreshRate);
+
+     // Get current stage
+     let initStage = parseInt(sessionStorage.getItem('initStage') || 0);
+
+    // Check if stage in session storage is old, and if so, reset it
+    const now = Math.round(Date.now()/1000);
+    const buildStarted = sessionStorage.getItem('buildStarted');
+    if (!buildStarted) { // First time build
+      sessionStorage.setItem('buildStarted', now);
+    } else if ((now - parseInt(buildStarted)) > 600) {
+      initStage = 0;
+      sessionStorage.setItem('buildStarted', now);
+    }
+
+    // Grab elements from page
+    const statusTextElem = document.getElementById('status-text');
+    const progressBarElem = document.getElementById('bar');
+    const progressOuterElem = document.getElementById('bar-outer');
+    const loadingDotsElem = document.getElementById('dots');
+    const noteElem = document.getElementById('note');
+
+    // Based on stage, modify element content/ styles
+    if (initStage === 0) {
+      statusTextElem.innerHTML = 'Initializing'
+      progressBarElem.classList.add('stage-0');
+    } else if (initStage === 1) {
+      statusTextElem.innerHTML = 'Running Checks'
+      progressBarElem.classList.add('stage-1');
+    }  else if (initStage === 2) {
+      statusTextElem.innerHTML = 'Building'
+      progressBarElem.classList.add('stage-2');
+    }  else if (initStage === 3) {
+      statusTextElem.innerHTML = 'Building'
+      progressBarElem.classList.add('stage-3');
+    }  else if (initStage === 4) {
+      statusTextElem.innerHTML = 'Finishing Off'
+      progressBarElem.classList.add('stage-4');
+    }  else if (initStage === 5) {
+      statusTextElem.innerHTML = 'Almost Done'
+      progressBarElem.classList.add('stage-5');
+    }  else if (initStage === 6) {
+      statusTextElem.innerHTML = 'Not Long Left'
+      progressBarElem.classList.add('stage-6');
+    }  else if (initStage === 7) {
+      statusTextElem.innerHTML = 'Taking Longer than Expected'
+      progressBarElem.classList.add('stage-7');
+      noteElem.innerHTML = 'See the console for more info';
+    }  else if (initStage >= 8) {
+      const docsLink = '<a href="https://github.com/Lissy93/dashy/tree/master/docs#readme">Documentation</a>';
+      statusTextElem.innerHTML = 'Possible Error, Check Logs'
+      noteElem.innerHTML = 'For troubleshooting, please see the ' + docsLink;
+      progressOuterElem.classList.add('hide');
+      loadingDotsElem.classList.add('hide');
+    } else {
+      statusTextElem.innerHTML = 'Building App'
+      progressOuterElem.classList.add('hide')
+    }
+    // Iterate the stage number
+    sessionStorage.setItem('initStage', initStage + 1)
   </script>
 </body>
 
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 058ed69c..2fd79825 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -60,6 +60,11 @@
     "css-note-l2": "Styles overrides are only stored locally, so it is recommended to make a copy of your CSS.",
     "css-note-l3": "To remove all custom styles, delete the contents and hit Save Changes"
   },
+  "alternate-views": {
+    "default": "Default",
+    "workspace": "Workspace",
+    "minimal": "Minimal"
+  },
   "settings": {
     "theme-label": "Theme",
     "layout-label": "Layout",
diff --git a/src/components/Configuration/AppVersion.vue b/src/components/Configuration/AppVersion.vue
index 68941361..973cbb4f 100644
--- a/src/components/Configuration/AppVersion.vue
+++ b/src/components/Configuration/AppVersion.vue
@@ -31,6 +31,7 @@
 
 <script>
 import axios from 'axios';
+import ProgressBar from 'rsup-progress';
 import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
@@ -39,6 +40,7 @@ export default {
   data() {
     return {
       appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
       latestVersion: '', // Will store latest version, when request returns
       checksEnabled: true, // Should we check for updates
       isUpToDate: true, // Is current version === latest version
@@ -60,14 +62,17 @@ export default {
     /* Gets the apps latest version from Dashy's git repo */
     checkVersion() {
       const packageUrl = 'https://raw.githubusercontent.com/Lissy93/dashy/master/package.json';
+      this.progress.start();
       axios.get(packageUrl).then((response) => {
         if (response && response.data && response.data.version) {
           this.latestVersion = response.data.version;
           this.isUpToDate = this.checkIfUpToDate(this.appVersion, this.latestVersion);
           this.finished = true;
+          this.progress.end();
         }
       }).catch(() => {
         this.error = true;
+        this.progress.end();
       });
     },
     /* Compares the current version, with the package.json version */
diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue
index 9703d534..b0341cd9 100644
--- a/src/components/Configuration/CloudBackupRestore.vue
+++ b/src/components/Configuration/CloudBackupRestore.vue
@@ -59,6 +59,7 @@
 <script>
 
 import sha256 from 'crypto-js/sha256';
+import ProgressBar from 'rsup-progress';
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
 import IconBackup from '@/assets/interface-icons/config-backup.svg';
@@ -77,6 +78,7 @@ export default {
       restorePassword: '',
       restoreCode: '',
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     };
   },
   components: {
@@ -87,11 +89,14 @@ export default {
   },
   methods: {
     restoreBackup() {
+      this.progress.start();
       restore(this.restoreCode, this.restorePassword)
         .then((response) => {
           this.restoreFromBackup(response, this.restoreCode);
+          this.progress.end();
         }).catch((msg) => {
           this.showErrorMsg(msg);
+          this.progress.end();
         });
     },
     checkPass() {
@@ -107,6 +112,7 @@ export default {
       }
     },
     makeBackup() {
+      this.progress.start();
       backup(this.config, this.backupPassword)
         .then((response) => {
           if (!response.data || response.data.errorMsg || !response.data.backupId) {
@@ -114,11 +120,14 @@ export default {
           } else { // All clear, no error
             this.updateUiAfterBackup(response.data.backupId, false);
           }
+          this.progress.end();
         }).catch(() => {
           this.showErrorMsg(this.$t('cloud-sync.backup-error-unknown'));
+          this.progress.end();
         });
     },
     makeUpdate() {
+      this.progress.start();
       update(this.config, this.backupPassword, this.backupId)
         .then((response) => {
           if (!response.data || response.data.errorMsg || !response.data.backupId) {
@@ -126,8 +135,10 @@ export default {
           } else { // All clear, no error
             this.updateUiAfterBackup(response.data.backupId, true);
           }
+          this.progress.end();
         }).catch(() => {
           this.showErrorMsg(this.$t('cloud-sync.backup-error-unknown'));
+          this.progress.end();
         });
     },
     restoreFromBackup(config, backupId) {
diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index 28782dc4..35ee10a6 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -59,6 +59,7 @@
 <script>
 
 import axios from 'axios';
+import ProgressBar from 'rsup-progress';
 import VJsoneditor from 'v-jsoneditor';
 import { localStorageKeys } from '@/utils/defaults';
 import configSchema from '@/utils/ConfigSchema.json';
@@ -89,6 +90,7 @@ export default {
       responseText: '',
       saveSuccess: undefined,
       allowWriteToDisk: this.shouldAllowWriteToDisk(),
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     };
   },
   computed: {
@@ -123,6 +125,7 @@ export default {
       const body = { config: yaml, timestamp: new Date() };
       const request = axios.post(endpoint, body, headers);
       // 3. Make the request, and handle response
+      this.progress.start();
       request.then((response) => {
         this.saveSuccess = response.data.success || false;
         this.responseText = response.data.message;
@@ -132,11 +135,13 @@ export default {
         } else {
           this.showToast(this.$t('config-editor.error-msg-cannot-save'), false);
         }
+        this.progress.end();
       })
         .catch((error) => {
           this.saveSuccess = false;
           this.responseText = error;
           this.showToast(error, false);
+          this.progress.end();
         });
     },
     saveConfigLocally() {
diff --git a/src/components/Configuration/RebuildApp.vue b/src/components/Configuration/RebuildApp.vue
index e6a71b17..1ac323d4 100644
--- a/src/components/Configuration/RebuildApp.vue
+++ b/src/components/Configuration/RebuildApp.vue
@@ -46,6 +46,7 @@
 
 <script>
 import axios from 'axios';
+import ProgressBar from 'rsup-progress';
 import Button from '@/components/FormElements/Button';
 import { modalNames } from '@/utils/defaults';
 import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
@@ -69,6 +70,7 @@ export default {
     output: '',
     message: '',
     allowRebuild: true,
+    progress: new ProgressBar({ color: 'var(--progress-bar)' }),
   }),
   methods: {
     /* Calls to the rebuild endpoint, to kickoff the app build */
@@ -76,12 +78,15 @@ export default {
       const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
       const endpoint = `${baseUrl}/config-manager/rebuild`;
       this.loading = true;
+      this.progress.start();
       axios.get(endpoint)
         .then((response) => {
           this.finished(response.data || false);
+          this.progress.end();
         })
         .catch((error) => {
           this.finished({ success: false, error });
+          this.progress.end();
         });
     },
     /* Called when rebuild is complete, updates UI with either success or fail message */
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 3742bdeb..b0d2e89a 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -26,16 +26,16 @@
       <ul>
         <li>
           <router-link to="/home">
-            <IconHome /><span>Default</span>
+            <IconHome /><span>{{ $t('alternate-views.default') }}</span>
           </router-link>
         </li>
         <li>
           <router-link to="/minimal">
-            <IconMinimalView /><span>Minimal</span>
+            <IconMinimalView /><span>{{ $t('alternate-views.minimal') }}</span>
           </router-link>
         <li>
           <router-link to="/workspace">
-            <IconWorkspaceView /><span>Workspace</span>
+            <IconWorkspaceView /><span>{{ $t('alternate-views.workspace') }}</span>
           </router-link>
         </li>
       </ul>
diff --git a/src/components/Workspace/SideBar.vue b/src/components/Workspace/SideBar.vue
index eb4e0779..b75fba72 100644
--- a/src/components/Workspace/SideBar.vue
+++ b/src/components/Workspace/SideBar.vue
@@ -16,6 +16,14 @@
         />
       </transition>
     </div>
+    <div class="switch-view-buttons">
+      <router-link to="/home">
+        <IconHome class="view-icon" v-tooltip="$t('alternate-views.default')" />
+      </router-link>
+      <router-link to="/minimal">
+        <IconMinimalView class="view-icon" v-tooltip="$t('alternate-views.minimal')" />
+      </router-link>
+    </div>
   </nav>
 </template>
 
@@ -23,6 +31,8 @@
 
 import SideBarItem from '@/components/Workspace/SideBarItem.vue';
 import SideBarSection from '@/components/Workspace/SideBarSection.vue';
+import IconHome from '@/assets/interface-icons/application-home.svg';
+import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
 
 export default {
   name: 'SideBar',
@@ -38,6 +48,8 @@ export default {
   components: {
     SideBarItem,
     SideBarSection,
+    IconMinimalView,
+    IconHome,
   },
   methods: {
     /* Toggles the section clicked, and closes all other sections */
@@ -87,4 +99,13 @@ nav.side-bar {
   transform: translate(0, -80%);
 }
 
+.switch-view-buttons {
+  margin-top: 0.5rem;
+  display: flex;
+  @extend .svg-button;
+  .view-icon {
+    border: none;
+  }
+}
+
 </style>
diff --git a/src/components/Workspace/SideBarItem.vue b/src/components/Workspace/SideBarItem.vue
index a5a6f606..cfb81d7f 100644
--- a/src/components/Workspace/SideBarItem.vue
+++ b/src/components/Workspace/SideBarItem.vue
@@ -46,8 +46,8 @@ export default {
 <style lang="scss" scoped>
 
 div.side-bar-item {
-  color: var(--side-bar-color);
-  background: var(--side-bar-background);
+  color: var(--side-bar-item-color);
+  background: var(--side-bar-item-background);
   text-align: center;
   &.text-only {
     background: none;
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index caa860fa..13bdfbc1 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -73,6 +73,8 @@
   --side-bar-background: var(--background-darker);
   --side-bar-background-lighter: var(--background);
   --side-bar-color: var(--primary);
+  --side-bar-item-background: var(--side-bar-background);
+  --side-bar-item-color: var(--side-bar-color);
   // Minimal view
   --minimal-view-background-color: var(--background);
   --minimal-view-title-color: var(--primary);
@@ -96,6 +98,7 @@
   --scroll-bar-background: var(--background-darker);
   --highlight-color: var(--background);
   --highlight-background: var(--primary);
+  --progress-bar: var(--primary);
   // Misc components
   --loading-screen-color: var(--primary);
   --loading-screen-background: var(--background);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 9b1ad553..fcd1701b 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -360,7 +360,7 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     padding: 0;
   }
   /* Custom layout for medium and large icons */
-  .item:not(.size-small) {
+  .item-wrapper .item:not(.size-small) {
     display: flex;
     flex-direction: row-reverse;
     justify-content: flex-end;
@@ -510,6 +510,8 @@ html[data-theme='material'] {
   --context-menu-secondary-color: #f5f5f5;
   --transparent-white-50: #00000080;
   --status-check-tooltip-background: #fff;
+  --side-bar-background-lighter: #0c4eba;
+  --side-bar-item-background: #f5f5f5;
 
   --minimal-view-background-color: var(--background);
   --minimal-view-title-color: var(--background-darker);
@@ -603,6 +605,8 @@ html[data-theme='material-dark'] {
   --curve-factor: 2px;
   --curve-factor-navbar: 0;
   
+  --side-bar-background: #131a1f;
+
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
   --config-settings-background: #131a1f;
diff --git a/yarn.lock b/yarn.lock
index 8b6ed165..aab35184 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8363,6 +8363,11 @@ router@~1.3.5:
     setprototypeof "1.2.0"
     utils-merge "1.0.1"
 
+rsup-progress@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/rsup-progress/-/rsup-progress-2.0.4.tgz#bf5c1cbf7265e195112a68c7bc379d6d2c11ee7f"
+  integrity sha512-ZhyoR6KUjpUEDlCRBEh7o7F7gdpeCh9VA9SKHedafmh/yoTcfx9bN2nWy3L4PdiJxCcVcOmWSWj1TYFGxNdU7g==
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
