diff --git a/src/App.vue b/src/App.vue
index 0b5525cffb..7905818183 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,115 +1,17 @@
 <template>
   <v-app>
-    <!-- <v-navigation-drawer
-      v-model="drawer"
-      app
-      clipped
-    >
-      <v-list dense>
-        <v-list-item link to="/">
-          <v-list-item-action>
-            <v-icon>mdi-view-dashboard</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Dashboard</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
+    <app-bar></app-bar>
 
-        <v-list-item link to="/settings">
-          <v-list-item-action>
-            <v-icon>mdi-cog</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>Settings</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-
-        <v-list-item link to="/about">
-          <v-list-item-action>
-            <v-icon>mdi-cog</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>About</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer> -->
-
-    <v-app-bar
-      app
-      clipped-left
-    >
-      <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
-      <!-- <img src="./assets/logo.svg" class="logo" /> -->
-      <v-icon large color="#1970b5">mdi-printer-3d-nozzle</v-icon>
-      <v-toolbar-title class="title text-h4">
-        Fluidd
-      </v-toolbar-title>
-      <v-spacer />
-      <v-btn color="secondary" class="mr-2" to="/"><v-icon small class="mr-2">mdi-home</v-icon> Dashboard</v-btn>
-      <!-- <v-btn color="secondary" class="mr-2" to="/configuration"><v-icon small class="mr-2">mdi-tune</v-icon> Configuration</v-btn> -->
-      <v-spacer />
-      <v-tooltip bottom v-if="printerConnected && klippyConnected">
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn @click="emergencyStop()" v-bind="attrs" v-on="on" icon color="error"><v-icon>mdi-car-brake-alert</v-icon></v-btn>
-        </template>
-        Emergency Stop
-      </v-tooltip>
-      <v-btn icon color="white" class="mr-2" to="/settings"><v-icon small>mdi-cog</v-icon></v-btn>
-      <!-- <v-menu bottom :offset-y="true" v-if="printerConnected && klippyConnected">
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn v-bind="attrs" v-on="on" icon color="white"><v-icon>mdi-dots-vertical</v-icon></v-btn>
-        </template>
-        <v-list nav dense transition="slide-y-transition" width="250">
-          <v-list-item to="/">
-            <v-list-item-icon>
-              <v-icon>mdi-home</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Home</v-list-item-title>
-          </v-list-item>
-          <v-list-item to="/configuration">
-            <v-list-item-icon>
-              <v-icon>mdi-cog</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Configuration</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu> -->
-      <!-- <v-btn icon color="white" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn> -->
-    </v-app-bar>
+    <FlashMessage
+      v-model="flashMessage.open"
+      :text="flashMessage.text"
+      :type="flashMessage.type"
+      :timeout="flashMessage.timeout"
+    />
 
     <v-main>
       <router-view v-if="printerConnected && klippyConnected" />
-      <v-container style="height: 400px;" v-if="!printerConnected || !klippyConnected">
-      <v-row
-        class="fill-height"
-        align-content="center"
-        justify="center"
-      >
-        <v-col
-          class="subtitle-1 text-center"
-          cols="12"
-          v-if="!printerConnected"
-        >
-          Connecting to printer...
-        </v-col>
-        <v-col cols="6" v-if="!klippyConnected">
-          <v-alert type="error" v-if="!klippyConnected">
-            Klippy has disconnected or is shutdown.<br />
-            <span v-html=klippyError></span>
-          </v-alert>
-          <v-btn block color="warning" @click="sendGcode('FIRMWARE_RESTART')" class="me-2 mb-2">Firmware Restart</v-btn>
-        </v-col>
-        <v-col cols="6" v-if="!printerConnected">
-          <v-progress-linear
-            color="warning"
-            indeterminate
-            rounded
-            height="6"
-          ></v-progress-linear>
-        </v-col>
-      </v-row>
-    </v-container>
+      <app-disconnected v-if="!printerConnected || !klippyConnected"></app-disconnected>
     </v-main>
 
     <v-footer app>
@@ -119,14 +21,28 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
+import EventBus from '@/eventBus'
 import UtilsMixin from './mixins/utils'
-import { SocketActions } from './socketActions'
+import { FlashMessage as FlashMessageType } from '@/types'
+import AppBar from '@/components/AppBar.vue'
+import AppDisconnected from '@/components/AppDisconnected.vue'
+import FlashMessage from '@/components/FlashMessage.vue'
 
 @Component({
-  components: {}
+  components: {
+    AppBar,
+    AppDisconnected,
+    FlashMessage
+  }
 })
 export default class App extends Mixins(UtilsMixin) {
+  flashMessage: FlashMessageType = {
+    open: false,
+    text: undefined,
+    type: undefined
+  }
+
   get printerConnected () {
     return this.$store.getters['socket/getConnectionState']
   }
@@ -135,14 +51,6 @@ export default class App extends Mixins(UtilsMixin) {
     return this.$store.state.socket.printer.info.state
   }
 
-  get klippyError () {
-    const message = this.$store.state.socket.printer.info.state_message
-    if (message) {
-      return message.replace(/(?:\r\n|\r|\n)/g, '<br />')
-    }
-    return ''
-  }
-
   get klippyConnected () {
     if (this.klippyState !== 'ready') {
       return false
@@ -150,27 +58,14 @@ export default class App extends Mixins(UtilsMixin) {
     return true
   }
 
-  get currentFile () {
-    return this.$store.state.socket.printer.print_stats.filename
-  }
-
-  get unsavedChanges () {
-    return this.$store.state.config.unsavedChanges
-  }
-
-  @Watch('currentFile')
-  onCurrentFileChanged (val: string) {
-    if (val && val.length > 0) {
-      SocketActions.serverFilesMetaData(val)
-    }
-  }
-
-  emergencyStop () {
-    SocketActions.printerEmergencyStop()
-  }
-
-  created () {
-    this.$vuetify.theme.dark = true
+  mounted () {
+    this.$vuetify.theme.dark = this.$store.state.darkMode
+    EventBus.$on('flashMessage', (payload: FlashMessageType) => {
+      this.flashMessage.text = (payload && payload.text) || undefined
+      this.flashMessage.type = (payload && payload.type) || undefined
+      this.flashMessage.timeout = (payload && payload.timeout !== undefined) ? payload.timeout : undefined
+      this.flashMessage.open = true
+    })
   }
 }
 </script>
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
new file mode 100644
index 0000000000..f4d5a47aa5
--- /dev/null
+++ b/src/components/AppBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-app-bar
+    app
+    clipped-left
+  >
+    <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
+    <!-- <img src="./assets/logo.svg" class="logo" /> -->
+    <v-icon large color="#1970b5">mdi-printer-3d-nozzle</v-icon>
+    <v-toolbar-title class="title text-h4">
+      Fluidd
+    </v-toolbar-title>
+    <v-spacer />
+    <v-btn color="secondary" class="mr-2" to="/"><v-icon small class="mr-2">mdi-home</v-icon> Dashboard</v-btn>
+    <!-- <v-btn color="secondary" class="mr-2" to="/configuration"><v-icon small class="mr-2">mdi-tune</v-icon> Configuration</v-btn> -->
+    <v-spacer />
+    <v-tooltip bottom v-if="printerConnected && klippyConnected">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn @click="emergencyStop()" v-bind="attrs" v-on="on" icon color="error"><v-icon>mdi-car-brake-alert</v-icon></v-btn>
+      </template>
+      Emergency Stop
+    </v-tooltip>
+    <v-btn icon color="white" class="mr-2" to="/settings"><v-icon small>mdi-cog</v-icon></v-btn>
+  </v-app-bar>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import UtilsMixin from '@/mixins/utils'
+import { SocketActions } from '@/socketActions'
+
+@Component({
+  components: {}
+})
+export default class AppBar extends Mixins(UtilsMixin) {
+  get printerConnected () {
+    return this.$store.getters['socket/getConnectionState']
+  }
+
+  get klippyState () {
+    return this.$store.state.socket.printer.info.state
+  }
+
+  get klippyConnected () {
+    if (this.klippyState !== 'ready') {
+      return false
+    }
+    return true
+  }
+
+  get currentFile () {
+    return this.$store.state.socket.printer.print_stats.filename
+  }
+
+  // Watch currentfile and refresh its metadata to ensure
+  // our status has the correct data.
+  @Watch('currentFile')
+  oncurrentFileChanged (val: string) {
+    if (val && val.length > 0) {
+      SocketActions.serverFilesMetaData(val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .title {
+    background: -webkit-linear-gradient(45deg, #1970b5, #9accf5);
+    background-clip: text;
+    -webkit-text-fill-color: transparent;}
+  .logo {
+    margin-right: 12px;
+    max-height: 40px;
+    max-width: 40px;
+    object-fit: contain;
+  }
+</style>
diff --git a/src/components/AppDisconnected.vue b/src/components/AppDisconnected.vue
new file mode 100644
index 0000000000..b4e353d91f
--- /dev/null
+++ b/src/components/AppDisconnected.vue
@@ -0,0 +1,65 @@
+<template>
+  <v-container style="height: 400px;">
+    <v-row
+      class="fill-height"
+      align-content="center"
+      justify="center"
+    >
+      <v-col
+        class="subtitle-1 text-center"
+        cols="12"
+        v-if="!printerConnected"
+      >
+        Connecting to printer...
+      </v-col>
+      <v-col cols="6" v-if="!klippyConnected">
+        <v-alert type="error" v-if="!klippyConnected">
+          Klippy has disconnected or is shutdown.<br />
+          <span v-html=klippyError></span>
+        </v-alert>
+        <v-btn block color="warning" @click="sendGcode('FIRMWARE_RESTART')" class="me-2 mb-2">Firmware Restart</v-btn>
+      </v-col>
+      <v-col cols="6" v-if="!printerConnected">
+        <v-progress-linear
+          color="warning"
+          indeterminate
+          rounded
+          height="6"
+        ></v-progress-linear>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import UtilsMixin from '@/mixins/utils'
+
+@Component({
+  components: {}
+})
+export default class AppDisconnected extends Mixins(UtilsMixin) {
+  get printerConnected () {
+    return this.$store.getters['socket/getConnectionState']
+  }
+
+  get klippyState () {
+    return this.$store.state.socket.printer.info.state
+  }
+
+  get klippyConnected () {
+    if (this.klippyState !== 'ready') {
+      return false
+    }
+    return true
+  }
+
+  get klippyError () {
+    const message = this.$store.state.socket.printer.info.state_message
+    if (message) {
+      return message.replace(/(?:\r\n|\r|\n)/g, '<br />')
+    }
+    return ''
+  }
+}
+</script>
diff --git a/src/components/FlashMessage.vue b/src/components/FlashMessage.vue
new file mode 100644
index 0000000000..f9ef4b2651
--- /dev/null
+++ b/src/components/FlashMessage.vue
@@ -0,0 +1,49 @@
+<template>
+  <v-snackbar
+    v-model="open"
+    :color="type"
+    :timeout="timeout"
+    top
+  >
+    {{ text }}
+
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        dark
+        text
+        v-bind="attrs"
+        @click="open = false"
+      >
+        Close
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+
+@Component({})
+export default class FlashMessage extends Vue {
+  @Prop({ type: Boolean })
+  value!: boolean;
+
+  @Prop({ type: String, default: 'success' })
+  type!: string;
+
+  @Prop({ type: String, default: 'Saved!' })
+  text!: string;
+
+  @Prop({ type: Number, default: 4000 })
+  timeout!: number;
+
+  get open () {
+    return this.$props.value
+  }
+
+  set open (value: boolean) {
+    this.$emit('input', value)
+  }
+}
+</script>
diff --git a/src/eventBus.ts b/src/eventBus.ts
new file mode 100644
index 0000000000..b0230b55b6
--- /dev/null
+++ b/src/eventBus.ts
@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()
diff --git a/src/store/index.ts b/src/store/index.ts
index ea2bcf8676..65be54ff12 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -12,7 +12,7 @@ export default new Vuex.Store<RootState>({
   strict: (process.env.NODE_ENV === 'development'),
   state: {
     version: '0.0.1',
-    darkMode: false
+    darkMode: true
   },
   modules: {
     config,
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index b6a2ff14c9..90071d0eeb 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -5,6 +5,7 @@ import { RootState } from '../types'
 import { configureChartEntry } from '../helpers'
 import { Globals } from '@/globals'
 import { SocketActions } from '@/socketActions'
+import EventBus from '@/eventBus'
 
 export const actions: ActionTree<SocketState, RootState> = {
   /**
@@ -41,7 +42,7 @@ export const actions: ActionTree<SocketState, RootState> = {
       if (payload.__request__ && payload.__request__.wait) {
         commit('removeWait', payload.__request__.wait)
       }
-      console.debug('throw an error to the user', payload.message)
+      EventBus.$emit('flashMessage', { type: 'error', timeout: -1, text: payload.message })
     }
     if (payload.code === 503) {
       //  && payload.message.toLowerCase() === 'klippy host not connected'
diff --git a/src/types/flashmessage.ts b/src/types/flashmessage.ts
new file mode 100644
index 0000000000..cd242f018a
--- /dev/null
+++ b/src/types/flashmessage.ts
@@ -0,0 +1,6 @@
+export interface FlashMessage {
+  type?: 'error' | 'warning' | 'primary' | 'secondary';
+  open: boolean;
+  text?: string;
+  timeout?: number;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 462cbf2c02..71d23c47d1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,10 +1,12 @@
 import { DialogData, NewDirectory } from './dialogs'
 import { ChartConfiguration, ChartColors, ChartNamedColors } from './chart'
+import { FlashMessage } from './flashmessage'
 
 export {
   DialogData,
   NewDirectory,
   ChartConfiguration,
   ChartColors,
-  ChartNamedColors
+  ChartNamedColors,
+  FlashMessage
 }
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 2c111683fd..4b12a2be96 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -29,6 +29,7 @@ import UtilsMixin from '@/mixins/utils'
 import MacroSettingsWidget from '@/components/widgets/settings/MacroSettingsWidget.vue'
 import GeneralSettingsWidget from '@/components/widgets/settings/GeneralSettingsWidget.vue'
 import TemperaturePresetsSettingsWidget from '@/components/widgets/settings/TemperaturePresetsSettingsWidget.vue'
+import EventBus from '@/eventBus'
 
 @Component({
   components: {
@@ -43,6 +44,7 @@ export default class Settings extends Mixins(UtilsMixin) {
   }
 
   saveFileConfig () {
+    EventBus.$emit('flashMessage')
     this.$store.dispatch('config/saveFileConfig')
   }
 }