diff --git a/packages/web/public/global.css b/packages/web/public/global.css
index f0e359b4a..20dd298e5 100644
--- a/packages/web/public/global.css
+++ b/packages/web/public/global.css
@@ -35,6 +35,27 @@ body {
   display: flex;
 }
 
+.col-9 {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+.col-8 {
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
+}
+.col-6 {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+.col-4 {
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
+}
+.col-3 {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
 /* html, body {
 	position: relative;
 	width: 100%;
diff --git a/packages/web/src/forms/FormProvider.svelte b/packages/web/src/forms/FormProvider.svelte
new file mode 100644
index 000000000..dd21824d0
--- /dev/null
+++ b/packages/web/src/forms/FormProvider.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import FormProviderCore from './FormProviderCore.svelte';
+
+  export let initivalValues = {};
+
+  const values = writable(initivalValues);
+</script>
+
+<FormProviderCore {values}>
+  <slot />
+</FormProviderCore>
diff --git a/packages/web/src/forms/FormProviderCore.svelte b/packages/web/src/forms/FormProviderCore.svelte
new file mode 100644
index 000000000..d42e43b38
--- /dev/null
+++ b/packages/web/src/forms/FormProviderCore.svelte
@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+  const contextKey = 'formProviderContextKey';
+
+  export function getFormContext(): any {
+    return getContext(contextKey);
+  }
+</script>
+
+<script lang="ts">
+  import keycodes from '../utility/keycodes';
+
+  export let values;
+
+  const context = {
+    values,
+    submitActionRef: { current: null },
+  };
+
+  setContext(contextKey, context);
+
+  function handleEnter(e) {
+    if (e.keyCode == keycodes.enter && context.submitActionRef.current) {
+      e.preventDefault();
+      context.submitActionRef.current(values);
+    }
+  }
+</script>
+
+<slot />
+
+<svelte:window on:keydown={handleEnter} />
diff --git a/packages/web/src/forms/FormSubmit.svelte b/packages/web/src/forms/FormSubmit.svelte
index 1e58fc461..0809e6a56 100644
--- a/packages/web/src/forms/FormSubmit.svelte
+++ b/packages/web/src/forms/FormSubmit.svelte
@@ -1,5 +1,15 @@
-<script>
+<script lang="ts">
   import FormStyledButton from '../widgets/FormStyledButton.svelte';
+  import { getFormContext } from './FormProviderCore.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  const { submitActionRef } = getFormContext();
+  
+  submitActionRef.current = () => {
+    dispatch('click');
+  };
 </script>
 
 <FormStyledButton type="submit" on:click {...$$props} />
diff --git a/packages/web/src/modals/ConnectionModal.svelte b/packages/web/src/modals/ConnectionModal.svelte
index 4e098cdb4..b60be9a06 100644
--- a/packages/web/src/modals/ConnectionModal.svelte
+++ b/packages/web/src/modals/ConnectionModal.svelte
@@ -1,21 +1,24 @@
 <script lang="ts">
   import registerCommand from '../commands/registerCommand';
   import FormButton from '../forms/FormButton.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
 
   import ModalBase from './ModalBase.svelte';
 </script>
 
-<ModalBase {...$$restProps}>
-  <div slot="header">Add connection</div>
-  xxx
-  <div slot="footer" class="flex">
-    <div class="buttons">
-      <FormButton value="Test" />
-      <FormSubmit value="Save" />
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <div slot="header">Add connection</div>
+    xxx
+    <div slot="footer" class="flex">
+      <div class="buttons">
+        <FormButton value="Test" />
+        <FormSubmit value="Save" on:click={() => console.log('SAVE')} />
+      </div>
     </div>
-  </div>
-</ModalBase>
+  </ModalBase>
+</FormProvider>
 
 <style>
   .buttons {
diff --git a/packages/web/src/modals/ModalBase.svelte b/packages/web/src/modals/ModalBase.svelte
index 1322c9299..6b151705d 100644
--- a/packages/web/src/modals/ModalBase.svelte
+++ b/packages/web/src/modals/ModalBase.svelte
@@ -2,6 +2,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import { closeModal } from './modalTools';
   import clickOutside from '../utility/clickOutside';
+  import keycodes from '../utility/keycodes';
 
   export let fullScreen;
   export let noPadding;
@@ -10,6 +11,12 @@
   function handleCloseModal() {
     closeModal(modalId);
   }
+
+  function handleEscape(e) {
+    if (e.keyCode == keycodes.escape) {
+      closeModal(modalId);
+    }
+  }
 </script>
 
 <!-- The Modal -->
@@ -31,6 +38,8 @@
   </div>
 </div>
 
+<svelte:window on:keydown={handleEscape} />
+
 <style>
   .bglayer {
     position: fixed;
diff --git a/packages/web/src/widgets/FormStyledButton.svelte b/packages/web/src/widgets/FormStyledButton.svelte
index fbb1fbd86..501dcdbb5 100644
--- a/packages/web/src/widgets/FormStyledButton.svelte
+++ b/packages/web/src/widgets/FormStyledButton.svelte
@@ -8,7 +8,7 @@
   export let value;
 
   function handleClick() {
-    if (disabled) dispatch('click');
+    if (!disabled) dispatch('click');
   }
 </script>