diff --git a/webapp/src/components/loadingContent.vue b/webapp/src/components/loadingContent.vue
index 41a1bd04..9e8a840f 100644
--- a/webapp/src/components/loadingContent.vue
+++ b/webapp/src/components/loadingContent.vue
@@ -4,9 +4,9 @@
       <div uk-spinner="ratio: 3"></div>
       <p>Loading...</p>
     </div>
-    <span class="material-symbols-outlined uk-align-center error-icon">error_outline</span>
-    <div v-if="error" class="uk-align-center">
-      {{ error }}
+    <div v-if="error" id="error-container" class="uk-align-center">
+      <span class="material-symbols-outlined uk-align-center error-icon">error_outline</span>
+      <p>{{ error }}</p>
     </div>
   </div>
 </template>
@@ -26,6 +26,10 @@ export default {
 </script>
 
 <style scoped lang="less">
+#error-container {
+  text-align: center;
+}
+
 .error-icon {
   font-size: 120px;
 }
diff --git a/webapp/src/stores/settings.js b/webapp/src/stores/settings.js
index af8e05be..82e0ecc7 100644
--- a/webapp/src/stores/settings.js
+++ b/webapp/src/stores/settings.js
@@ -44,7 +44,8 @@ export const useSettingsStore = defineStore(
     function resetState() {
       waiting.value = false;
       available.value = false;
-      error.value = ""; // TODO: verify that "" is needed to match initial state
+      // On resetState there is no connection.
+      error.value = "Microscope is not connected.";
     }
 
     function setConnected() {