diff --git a/api/config_sample.php b/api/config_sample.php
index 9be9cf64f..ec98d666a 100644
--- a/api/config_sample.php
+++ b/api/config_sample.php
@@ -10,7 +10,7 @@
     $mode = 'dev';
 
     # Database credentials, db = hostname/database
-    $isb  = array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb');
+    $isb = array('user' => 'user', 'pass' => 'pass', 'db' => 'localhost/ispyb');
     $dbtype = 'mysql';
 
     # Encoded JWT key, used to sign and check validaty of jwt tokens
diff --git a/api/index.php b/api/index.php
index a16c214de..286e85749 100644
--- a/api/index.php
+++ b/api/index.php
@@ -67,7 +67,7 @@ function setupApplication($mode): Slim
     });
 
     $app->get('/options', function () use ($app) {
-        global $motd, $authentication_type, $cas_url, $cas_sso, $sso_url, $package_description,
+        global $mode, $motd, $authentication_type, $cas_url, $cas_sso, $sso_url, $package_description,
             $facility_courier_countries, $facility_courier_countries_nde, $facility_courier_countries_link, $icat_base_url,
             $visit_persist_storage_dir_segment, $dhl_enable, $scale_grid, $scale_grid_end_date, $preset_proposal, $timezone,
             $valid_components, $enabled_container_types, $synchweb_version, $redirects,
@@ -78,6 +78,7 @@ function setupApplication($mode): Slim
         $app->contentType('application/json');
         $options = $app->container['options'];
         $app->response()->body(json_encode(array(
+            'mode' => $mode == 'production' ? 'production' : 'development',
             'motd' => $options->get('motd', $motd),
             'authentication_type' => $authentication_type,
             'cas_url' => $cas_url,
diff --git a/client/src/js/app/components/breadcrumbs.vue b/client/src/js/app/components/breadcrumbs.vue
index b2f1f548a..5bacdd3f4 100644
--- a/client/src/js/app/components/breadcrumbs.vue
+++ b/client/src/js/app/components/breadcrumbs.vue
@@ -37,12 +37,6 @@ export default {
 <style scoped>
 
 #breadcrumbs {
-    /* background: #474747;
-    color: #dbdbdb;
-    font-size: 10px;
-    list-style-type: none;
-    padding: 5px 5px;
-    clear: both */
     @apply tw-bg-header-bc-background;
     @apply tw-text-header-bc-color;
     @apply tw-p-1;
@@ -72,4 +66,4 @@ export default {
 #breadcrumbs li:before {
     content: '\00BB  '
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/js/app/components/header.vue b/client/src/js/app/components/header.vue
index ac2758223..2f35f9028 100644
--- a/client/src/js/app/components/header.vue
+++ b/client/src/js/app/components/header.vue
@@ -1,4 +1,12 @@
 <template>
+  <div>
+  <div
+    v-if="isDevMode"
+    class="tw-flex tw-h-10 tw-items-center tw-bg-content-active"
+  >
+    <span class="fa fa-2x fa-exclamation-circle tw-mx-1"></span>
+    This application is running in development mode. Data will not be persisted.
+  </div>
   <div
     id="vue-header"
     class="tw-flex tw-justify-between tw-items-center tw-h-10 tw-bg-header-background"
@@ -72,6 +80,7 @@
       </router-link>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -109,7 +118,10 @@ export default {
             else return (this.$store.getters['user/hasPermission'](item.permission))
           }, this)
           return menus
-        }
+        },
+        isDevMode() {
+            return this.$store.state.mode === 'development'
+        },
     },
     methods: {
       logout: function () {
diff --git a/client/src/js/app/store/store.js b/client/src/js/app/store/store.js
index 68b9b5f27..a41ae57f5 100644
--- a/client/src/js/app/store/store.js
+++ b/client/src/js/app/store/store.js
@@ -43,6 +43,7 @@ const store = new Vuex.Store({
 
     isLoading: false,
     motd: '',
+    mode: '',
     synchwebVersion: '',
     help: false, // Global help flag used to denote if we should display inline help on pages
     skipHomePage: config.skipHome || false,
@@ -66,6 +67,7 @@ const store = new Vuex.Store({
       state.appOptions = options.toJSON()
 
       state.motd = options.get('motd') || state.motd
+      state.mode = options.get('mode') || 'production'
 
       state.synchwebVersion = options.get('synchweb_version') || state.synchwebVersion
 
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index bff83ce6f..c050e21e8 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -94,14 +94,14 @@ module.exports = {
         'sidebar-mobile-active-background': 'rgb(115,115,115)',
         'sidebar-mobile-hover-background': 'rgb(105,105,105)',
 // Header
-        'header-background': '#2c2c2c',
+        'header-background': '#112e4d',
         'header-color': '#aaaaaa',
         'header-hover-color': '#ffffff',
 // Header Menu
         'header-menu-color': '#dddddd',
         'header-menu-hover': '#ffffff',
 // Header Breadcrumbs
-        'header-bc-background': '#474747',
+        'header-bc-background': '#112e4d',
         'header-bc-color': '#dbdbdb',
         'header-bc-hover': '#ffffff',
 // Footer