diff --git a/packages/web/public/icon-colors.css b/packages/web/public/icon-colors.css
index 2619b321..ccaf9fe6 100644
--- a/packages/web/public/icon-colors.css
+++ b/packages/web/public/icon-colors.css
@@ -21,3 +21,12 @@
 .color-icon-magenta {
   color: var(--theme-icon-magenta);
 }
+
+
+.color-icon-inv-green {
+  color: var(--theme-icon-inv-green);
+}
+
+.color-icon-inv-red {
+  color: var(--theme-icon-inv-red);
+}
diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index 89480cfe..14d5d3d4 100644
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -8,13 +8,16 @@
   import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
   import CurrentDropDownMenu from './modals/CurrentDropDownMenu.svelte';
+  import StatusBar from './widgets/StatusBar.svelte';
 </script>
 
 <div class={`${$currentTheme} root`}>
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
-  <div class="statusbar" />
+  <div class="statusbar">
+    <StatusBar />
+  </div>
   {#if $selectedWidget}
     <div class="leftpanel">
       <WidgetContainer />
diff --git a/packages/web/src/icons/FontIcon.svelte b/packages/web/src/icons/FontIcon.svelte
index 2ed5a29a..fa2ad659 100644
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -63,8 +63,10 @@
     'icon menu': 'mdi mdi-menu',
 
     'img ok': 'mdi mdi-check-circle color-icon-green',
+    'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
     'img alert': 'mdi mdi-alert-circle color-icon-blue',
     'img error': 'mdi mdi-close-circle color-icon-red',
+    'img error-inv': 'mdi mdi-close-circle color-icon-inv-red',
     'img warn': 'mdi mdi-alert color-icon-gold',
     // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
 
diff --git a/packages/web/src/plugins/ThemeDark.svelte b/packages/web/src/plugins/ThemeDark.svelte
index 9e19c1dd..1aa6722c 100644
--- a/packages/web/src/plugins/ThemeDark.svelte
+++ b/packages/web/src/plugins/ThemeDark.svelte
@@ -55,5 +55,8 @@
     --theme-icon-gold: #e8b339;
     --theme-icon-yellow: #e8d639;
     --theme-icon-magenta: #e0529c;
+
+    --theme-icon-inv-green: #8fd460;
+    --theme-icon-inv-red: #e84749;
   }
 </style>
diff --git a/packages/web/src/plugins/ThemeLight.svelte b/packages/web/src/plugins/ThemeLight.svelte
index 2454255c..f959fc6b 100644
--- a/packages/web/src/plugins/ThemeLight.svelte
+++ b/packages/web/src/plugins/ThemeLight.svelte
@@ -48,5 +48,8 @@
     --theme-icon-gold: #d48806; /* gold-7 */
     --theme-icon-yellow: #d4b106; /* yellow-7 */
     --theme-icon-magenta: #c41d7f; /* magenta-7 */
+
+    --theme-icon-inv-green: #8fd460;
+    --theme-icon-inv-red: #e84749;
   }
 </style>
diff --git a/packages/web/src/widgets/SqlObjectList.svelte b/packages/web/src/widgets/SqlObjectList.svelte
index d819701a..b9659b38 100644
--- a/packages/web/src/widgets/SqlObjectList.svelte
+++ b/packages/web/src/widgets/SqlObjectList.svelte
@@ -11,7 +11,7 @@
   import { chevronExpandIcon } from '../icons/expandIcons';
   import ErrorInfo from './ErrorInfo.svelte';
   import axios from '../utility/axios';
-import LoadingInfo from './LoadingInfo.svelte';
+  import LoadingInfo from './LoadingInfo.svelte';
 
   export let conid;
   export let database;
diff --git a/packages/web/src/widgets/StatusBar.svelte b/packages/web/src/widgets/StatusBar.svelte
new file mode 100644
index 00000000..12b9f9d7
--- /dev/null
+++ b/packages/web/src/widgets/StatusBar.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import { currentDatabase } from '../stores';
+  import { useDatabaseStatus } from '../utility/metadataLoaders';
+
+  $: databaseName = $currentDatabase && $currentDatabase.name;
+  $: connection = $currentDatabase && $currentDatabase.connection;
+  $: status = useDatabaseStatus(connection ? { conid: connection._id, database: databaseName } : {});
+</script>
+
+<div class="main">
+  <div class="container">
+    {#if databaseName}
+      <div class="item">
+        <FontIcon icon="icon database" />
+        {databaseName}
+      </div>
+    {/if}
+    {#if connection && (connection.displayName || connection.server)}
+      <div class="item">
+        <FontIcon icon="icon server" />
+        {connection.displayName || connection.server}
+      </div>
+    {/if}
+    {#if connection && connection.user}
+      <div class="item">
+        <FontIcon icon="icon account" />
+        {connection.user}
+      </div>
+    {/if}
+    {#if connection && $status}
+      <div class="item">
+        {#if $status.name == 'pending'}
+          <FontIcon icon="icon loading" /> Loading
+        {:else if $status.name == 'ok'}
+          <FontIcon icon="img ok-inv" /> Connected
+        {:else if $status.name == 'error'}
+          <FontIcon icon="img error-inv" /> Error
+        {/if}
+      </div>
+    {/if}
+    {#if !connection}
+      <div class="item">
+        <FontIcon icon="icon disconnected" /> Not connected
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .main {
+    display: flex;
+    color: var(--theme-font-inv-1);
+    align-items: stretch;
+    justify-content: space-between;
+  }
+  .container {
+    display: flex;
+  }
+  .item {
+    padding: 2px 10px;
+  }
+</style>