diff --git a/web/src/Screen.js b/web/src/Screen.js
index 5e834003..0ae1da23 100644
--- a/web/src/Screen.js
+++ b/web/src/Screen.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import FilesTabsPanel from './FilesTabsPanel';
 import WidgetIconPanel from './widgets/WidgetIconPanel';
 import useCurrentWidget from './widgets/useCurrentWidget';
+import WidgetContainer from './widgets/WidgetContainer';
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -59,7 +60,11 @@ export default function Screen({ children }) {
       <IconBar>
         <WidgetIconPanel />
       </IconBar>
-      {!!currentWidget && <LeftPanel></LeftPanel>}
+      {!!currentWidget && (
+        <LeftPanel>
+          <WidgetContainer />
+        </LeftPanel>
+      )}
       <TabsPanel leftPanelWidth={leftPanelWidth}>
         <FilesTabsPanel></FilesTabsPanel>
       </TabsPanel>
diff --git a/web/src/widgets/DatabaseWidget.js b/web/src/widgets/DatabaseWidget.js
new file mode 100644
index 00000000..1384bbab
--- /dev/null
+++ b/web/src/widgets/DatabaseWidget.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function DatabaseWidget() {
+  return <button onClick={() => {}}>Add connection</button>;
+}
diff --git a/web/src/widgets/WidgetContainer.js b/web/src/widgets/WidgetContainer.js
new file mode 100644
index 00000000..0de1d4e5
--- /dev/null
+++ b/web/src/widgets/WidgetContainer.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import useCurrentWidget from './useCurrentWidget';
+import DatabaseWidget from './DatabaseWidget';
+
+export default function WidgetContainer() {
+  const currentWidget = useCurrentWidget();
+  if (currentWidget === 'database') return <DatabaseWidget />;
+  return null;
+}