diff --git a/packages/api/src/controllers/connections.js b/packages/api/src/controllers/connections.js
index 37b9252ff..1a20669f1 100644
--- a/packages/api/src/controllers/connections.js
+++ b/packages/api/src/controllers/connections.js
@@ -162,6 +162,14 @@ module.exports = {
     return res;
   },
 
+  update_meta: 'post',
+  async update({ _id, values }) {
+    if (portalConnections) return;
+    const res = await this.datastore.update({ _id }, { $set: values });
+    socket.emitChanged('connection-list-changed');
+    return res;
+  },
+
   delete_meta: 'post',
   async delete(connection) {
     if (portalConnections) return;
diff --git a/packages/web/src/modals/ChooseConnectionColorModal.svelte b/packages/web/src/modals/ChooseConnectionColorModal.svelte
new file mode 100644
index 000000000..4a244dc84
--- /dev/null
+++ b/packages/web/src/modals/ChooseConnectionColorModal.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import ColorSelector from '../forms/ColorSelector.svelte';
+  import axiosInstance from '../utility/axiosInstance';
+  import { useConnectionColor } from '../utility/useConnectionColor';
+  import ModalBase from './ModalBase.svelte';
+
+  export let conid;
+  export let database;
+
+  const initialColor = useConnectionColor({ conid, database }, null);
+
+  $: value = $initialColor;
+</script>
+
+<ModalBase {...$$restProps}>
+  <ColorSelector
+    {value}
+    on:change={e => {
+      value = e.detail;
+
+      axiosInstance.post('connections/update', {
+        _id: conid,
+        values: { connectionColor: e.detail },
+      });
+    }}
+  />
+</ModalBase>
diff --git a/packages/web/src/plugins/ThemeDark.svelte b/packages/web/src/plugins/ThemeDark.svelte
index 76f5ab663..0ff082ab3 100644
--- a/packages/web/src/plugins/ThemeDark.svelte
+++ b/packages/web/src/plugins/ThemeDark.svelte
@@ -55,6 +55,7 @@
 
     --theme-bg-statusbar-inv: #0050b3;
     --theme-bg-statusbar-inv-hover: #096dd9;
+    --theme-bg-statusbar-inv-font: #222;
     --theme-bg-modalheader: rgb(43, 60, 61);
 
     --theme-bg-button-inv: #004488;
diff --git a/packages/web/src/plugins/ThemeLight.svelte b/packages/web/src/plugins/ThemeLight.svelte
index e31f4d2b9..353e1b536 100644
--- a/packages/web/src/plugins/ThemeLight.svelte
+++ b/packages/web/src/plugins/ThemeLight.svelte
@@ -49,6 +49,7 @@
 
     --theme-bg-statusbar-inv: #0050b3;
     --theme-bg-statusbar-inv-hover: #096dd9;
+    --theme-bg-statusbar-inv-font: #222;
     --theme-bg-modalheader: #eff;
 
     --theme-bg-button-inv: #337ab7;
diff --git a/packages/web/src/utility/useConnectionColor.ts b/packages/web/src/utility/useConnectionColor.ts
index 405f38035..20b1eefea 100644
--- a/packages/web/src/utility/useConnectionColor.ts
+++ b/packages/web/src/utility/useConnectionColor.ts
@@ -8,6 +8,7 @@ export function getConnectionColor(connections, dbid, themeType, colorIndex, bac
   const current = connections.find(x => x._id == dbid.conid);
   if (!current?.connectionColor) return undefined;
   const palettes = themeType == 'dark' ? presetDarkPalettes : presetPalettes;
+  if (colorIndex == null) return current?.connectionColor;
   const color = palettes[current?.connectionColor][colorIndex];
   if (backgroundStyle) return `background:${color}`;
   return color;
diff --git a/packages/web/src/widgets/StatusBar.svelte b/packages/web/src/widgets/StatusBar.svelte
index 833a0303a..0bbc1bb40 100644
--- a/packages/web/src/widgets/StatusBar.svelte
+++ b/packages/web/src/widgets/StatusBar.svelte
@@ -31,6 +31,8 @@
   import _ from 'lodash';
   import { writable } from 'svelte/store';
   import moment from 'moment';
+  import { showModal } from '../modals/modalTools';
+  import ChooseConnectionColorModal from '../modals/ChooseConnectionColorModal.svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
 
@@ -52,6 +54,7 @@
   $: connectionLabel = getConnectionLabel(connection, { allowExplicitDatabase: false });
 
   $: connectionBackground = useConnectionColor(dbid, 3, 'dark', true);
+  $: connectionButtonBackground = useConnectionColor(dbid, 6, 'dark', true);
 
   let timerValue = 1;
 
@@ -74,11 +77,22 @@
         {databaseName}
       </div>
     {/if}
-    {#if connectionLabel}
+    {#if connectionLabel && dbid}
       <div class="item">
         <FontIcon icon="icon server" padRight />
         {connectionLabel}
       </div>
+      <div
+        class="item clickable"
+        title="Connection color. Can be overriden by dataabse color"
+        on:click={() => {
+          showModal(ChooseConnectionColorModal, { conid: dbid.conid });
+        }}
+      >
+        <div style={$connectionButtonBackground} class="colorbox">
+          <FontIcon icon="icon palette" />
+        </div>
+      </div>
     {/if}
     {#if connection && connection.user}
       <div class="item">
@@ -173,4 +187,10 @@
   .clickable:hover {
     background-color: var(--theme-bg-statusbar-inv-hover);
   }
+
+  .colorbox {
+    padding: 0px 3px;
+    border-radius: 2px;
+    color: var(--theme-bg-statusbar-inv-font);
+  }
 </style>