diff --git a/packages/web/src/widgets/DatabaseWidget.svelte b/packages/web/src/widgets/DatabaseWidget.svelte
index 9b5ee19a9..ba9802e80 100644
--- a/packages/web/src/widgets/DatabaseWidget.svelte
+++ b/packages/web/src/widgets/DatabaseWidget.svelte
@@ -9,14 +9,15 @@
   import WidgetColumnBar from './WidgetColumnBar.svelte';
   import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
 
+  export let hidden = false;
+
   $: conid = $currentDatabase?.connection?._id;
   $: connection = useConnectionInfo({ conid });
   $: driver = findEngineDriver($connection, $extensions);
   $: config = useConfig();
-
 </script>
 
-<WidgetColumnBar>
+<WidgetColumnBar {hidden}>
   {#if !$config?.singleDatabase}
     <WidgetColumnBarItem title="Connections" name="connections" height="50%">
       <ConnectionList />
diff --git a/packages/web/src/widgets/WidgetColumnBar.svelte b/packages/web/src/widgets/WidgetColumnBar.svelte
index 3a35637c5..6ea71ae7c 100644
--- a/packages/web/src/widgets/WidgetColumnBar.svelte
+++ b/packages/web/src/widgets/WidgetColumnBar.svelte
@@ -3,6 +3,8 @@
   import { writable } from 'svelte/store';
   import createRef from '../utility/createRef';
 
+  export let hidden = false;
+
   let definitions = [];
   const dynamicPropsCollection = [];
   let clientHeight;
@@ -32,16 +34,23 @@
   }
 </script>
 
-<div class="main-container" bind:clientHeight>
+<div class="main-container" bind:clientHeight class:hidden>
   <slot />
 </div>
 
 <style>
+  .hidden {
+    display: none;
+  }
+
   .main-container {
     position: relative;
-    display: flex;
     flex: 1;
     flex-direction: column;
     user-select: none;
   }
+
+  .main-container :not(.hidden) {
+    display: flex;
+  }
 </style>
diff --git a/packages/web/src/widgets/WidgetContainer.svelte b/packages/web/src/widgets/WidgetContainer.svelte
index 872bca9f6..14802429c 100644
--- a/packages/web/src/widgets/WidgetContainer.svelte
+++ b/packages/web/src/widgets/WidgetContainer.svelte
@@ -6,12 +6,10 @@
   import PluginsWidget from './PluginsWidget.svelte';
   import CellDataWidget from './CellDataWidget.svelte';
   import HistoryWidget from './HistoryWidget.svelte';
-
 </script>
 
-{#if $selectedWidget == 'database'}
-  <DatabaseWidget />
-{/if}
+<DatabaseWidget hidden={$selectedWidget != 'database'} />
+
 {#if $selectedWidget == 'file'}
   <FilesWidget />
 {/if}