diff --git a/packages/web-svelte/public/global.css b/packages/web-svelte/public/global.css
index bb28a9414..b063dff26 100644
--- a/packages/web-svelte/public/global.css
+++ b/packages/web-svelte/public/global.css
@@ -1,4 +1,16 @@
-html, body {
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans,
+    sans-serif;
+  font-size: 14px;
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+	  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+	  sans-serif; 
+	  */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* html, body {
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -60,4 +72,4 @@ button:not(:disabled):active {
 
 button:focus {
 	border-color: #666;
-}
+} */
diff --git a/packages/web-svelte/src/widgets/ConnectionList.svelte b/packages/web-svelte/src/widgets/ConnectionList.svelte
new file mode 100644
index 000000000..b1c4f76e5
--- /dev/null
+++ b/packages/web-svelte/src/widgets/ConnectionList.svelte
@@ -0,0 +1,18 @@
+<script>
+  import InlineButton from './InlineButton.svelte';
+  import SearchInput from './SearchInput.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+</script>
+
+<div class="search-box">
+  <SearchInput placeholder="Search connection" />
+  <InlineButton>Refresh</InlineButton>
+</div>
+<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
+
+<style>
+  .search-box {
+    display: flex;
+    margin-bottom: 5px;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/DatabaseWidget.svelte b/packages/web-svelte/src/widgets/DatabaseWidget.svelte
index 281c6866c..61d5b4523 100644
--- a/packages/web-svelte/src/widgets/DatabaseWidget.svelte
+++ b/packages/web-svelte/src/widgets/DatabaseWidget.svelte
@@ -1 +1,16 @@
-<div></div>
\ No newline at end of file
+<script>
+  import ConnectionList from './ConnectionList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Connections" name="connections" height="50%">
+    <ConnectionList />
+  </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Tables, views, functions" name="dbObjects">
+    TABLES
+    <!-- <SqlObjectListWrapper /> -->
+  </WidgetColumnBarItem>
+</WidgetColumnBar>
diff --git a/packages/web-svelte/src/widgets/InlineButton.svelte b/packages/web-svelte/src/widgets/InlineButton.svelte
new file mode 100644
index 000000000..e475e0d24
--- /dev/null
+++ b/packages/web-svelte/src/widgets/InlineButton.svelte
@@ -0,0 +1,47 @@
+<script>
+  export let disabled;
+  export let square;
+</script>
+
+<div class="outer buttonLike" class:disabled class:square>
+  <div class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .outer {
+    background: linear-gradient(to bottom, var(--theme-bg-2) 5%, var(--theme-bg-3) 100%);
+    background-color: var(--theme-bg-2);
+    border: 1px solid var(--theme-bg-3);
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    color: var(--theme-font-1);
+    font-size: 12px;
+    padding: 3px;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+  }
+
+  .outer.disabled {
+    color: var(--theme-font-3);
+  }
+
+  .outer:hover:not(.disabled) {
+    border: 1px solid var(--theme-bg-2);
+    background: linear-gradient(to bottom, var(--theme-bg-3) 5%, var(--theme-bg-2) 100%);
+    background-color: var(--theme-bg-3);
+  }
+
+  .inner {
+    margin: auto;
+    flex: 1;
+    text-align: center;
+  }
+
+  .square {
+    width: 18px;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/SearchInput.svelte b/packages/web-svelte/src/widgets/SearchInput.svelte
new file mode 100644
index 000000000..4df5902df
--- /dev/null
+++ b/packages/web-svelte/src/widgets/SearchInput.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let placeholder;
+</script>
+
+<input type="text" {placeholder} />
+
+<style>
+  input {
+    flex: 1;
+    min-width: 10px;
+    width: 10px;
+    border: none;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/WidgetColumnBar.svelte b/packages/web-svelte/src/widgets/WidgetColumnBar.svelte
new file mode 100644
index 000000000..45313b01d
--- /dev/null
+++ b/packages/web-svelte/src/widgets/WidgetColumnBar.svelte
@@ -0,0 +1,13 @@
+<div class="main-container">
+    <slot></slot>
+</div>
+
+<style>
+  .main-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    user-select: none;
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte b/packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte
new file mode 100644
index 000000000..73a1050c0
--- /dev/null
+++ b/packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let title;
+  export let visible = true;
+</script>
+
+<div class="title" on:click={() => (visible = !visible)}>{title}</div>
+
+{#if visible}
+  <slot />
+{/if}
+
+<style>
+  .title {
+    padding: 5px;
+    font-weight: bold;
+    text-transform: uppercase;
+    background-color: var(--theme-bg-4);
+    border: 1px solid var(--theme-border);
+  }
+  .title:hover {
+    background-color: var(--theme-bg-3);
+  }
+</style>
diff --git a/packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte b/packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte
new file mode 100644
index 000000000..1ee9dd5bc
--- /dev/null
+++ b/packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte
@@ -0,0 +1,10 @@
+<div><slot /></div>
+
+<style>
+  div {
+    flex: 1 1;
+    overflow-x: auto;
+    overflow-y: auto;
+    width: var(--dim-left-panel-width);
+  }
+</style>