diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index bda20ac62..e12175ea4 100644
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -147,6 +147,12 @@ recentDatabases.subscribe(value => {
 });
 export const getRecentDatabases = () => _.compact(recentDatabasesValue);
 
+let pinnedDatabasesValue = null;
+pinnedDatabases.subscribe(value => {
+  pinnedDatabasesValue = value;
+});
+export const getPinnedDatabases = () => _.compact(pinnedDatabasesValue);
+
 let currentDatabaseValue = null;
 currentDatabase.subscribe(value => {
   currentDatabaseValue = value;
diff --git a/packages/web/src/widgets/DatabaseWidget.svelte b/packages/web/src/widgets/DatabaseWidget.svelte
index 15a21261b..06378d290 100644
--- a/packages/web/src/widgets/DatabaseWidget.svelte
+++ b/packages/web/src/widgets/DatabaseWidget.svelte
@@ -24,11 +24,15 @@
       <ConnectionList />
     </WidgetColumnBarItem>
   {/if}
-  {#if $pinnedDatabases?.length > 0}
-    <WidgetColumnBarItem title="Pinned" name="pinned" height="15%" storageName="pinnedItemsWidget">
-      <PinnedObjectsList />
-    </WidgetColumnBarItem>
-  {/if}
+  <WidgetColumnBarItem
+    title="Pinned"
+    name="pinned"
+    height="15%"
+    storageName="pinnedItemsWidget"
+    skip={!$pinnedDatabases?.length}
+  >
+    <PinnedObjectsList />
+  </WidgetColumnBarItem>
   <WidgetColumnBarItem
     title={driver?.dialect?.nosql ? 'Collections' : 'Tables, views, functions'}
     name="dbObjects"
diff --git a/packages/web/src/widgets/PinnedObjectsList.svelte b/packages/web/src/widgets/PinnedObjectsList.svelte
index d72094941..fbafbdbe8 100644
--- a/packages/web/src/widgets/PinnedObjectsList.svelte
+++ b/packages/web/src/widgets/PinnedObjectsList.svelte
@@ -2,11 +2,17 @@
   import _ from 'lodash';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-  import {  pinnedDatabases } from '../stores';
+  import { pinnedDatabases } from '../stores';
   import * as databaseAppObject from '../appobj/DatabaseAppObject.svelte';
+  import { useConnectionColorFactory } from '../utility/useConnectionColor';
 
+  const connectionColorFactory = useConnectionColorFactory(3);
 </script>
 
 <WidgetsInnerContainer>
-  <AppObjectList list={$pinnedDatabases} module={databaseAppObject} />
+  <AppObjectList
+    list={$pinnedDatabases}
+    module={databaseAppObject}
+    passProps={{ connectionColorFactory: $connectionColorFactory }}
+  />
 </WidgetsInnerContainer>