diff --git a/packages/web/src/appobj/MacroAppObject.svelte b/packages/web/src/appobj/MacroAppObject.svelte
new file mode 100644
index 000000000..8aebb4bae
--- /dev/null
+++ b/packages/web/src/appobj/MacroAppObject.svelte
@@ -0,0 +1,23 @@
+<script lang="ts" context="module">
+  export const extractKey = data => data.name;
+  export const createMatcher = ({ name, title }) => filter => filterName(filter, name, title);
+</script>
+
+<script lang="ts">
+  import { filterName } from 'dbgate-datalib';
+  import { getContext } from 'svelte';
+
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let data;
+  const selectedMacro = getContext('selectedMacro') as any;
+</script>
+
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  title={data.title}
+  icon="img macro"
+  isBold={$selectedMacro?.name == data.name}
+  on:click={() => ($selectedMacro = data)}
+/>
diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 2f48cd3bc..ccc8ef1a7 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
   const lastFocusedDataGrid = writable(null);
   const currentDataGrid = derived([lastFocusedDataGrid, activeTabId], ([grid, tabid]) =>
-    grid?.getTabId() == tabid ? grid : null
+    grid?.getTabId && grid?.getTabId() == tabid ? grid : null
   );
 
   const currentDataGridChangeSet = memberStore(currentDataGrid, grid => grid?.getChangeSetStore() || nullStore);
diff --git a/packages/web/src/forms/FormArgument.svelte b/packages/web/src/forms/FormArgument.svelte
new file mode 100644
index 000000000..6882a78cd
--- /dev/null
+++ b/packages/web/src/forms/FormArgument.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import FormCheckboxField from './FormCheckboxField.svelte';
+  import FormSelectField from './FormSelectField.svelte';
+  import FormTextField from './FormTextField.svelte';
+
+  export let arg;
+  export let namePrefix;
+
+  $: name = `${namePrefix}${arg.name}`;
+</script>
+
+{#if arg.type == 'text'}
+  <FormTextField label={arg.label} {name} />
+{:else if arg.type == 'checkbox'}
+  <FormCheckboxField label={arg.label} {name} defaultValue={arg.default} />
+{:else if arg.type == 'select'}
+  <FormSelectField
+    label={arg.label}
+    isNative
+    {name}
+    options={arg.options.map(opt =>
+      _.isString(opt) ? { label: opt, value: opt } : { label: opt.name, value: opt.value }
+    )}
+  />
+{/if}
diff --git a/packages/web/src/forms/FormArgumentList.svelte b/packages/web/src/forms/FormArgumentList.svelte
new file mode 100644
index 000000000..c191ad833
--- /dev/null
+++ b/packages/web/src/forms/FormArgumentList.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import FormArgument from './FormArgument.svelte';
+
+  export let namePrefix;
+  export let args: any[];
+</script>
+
+<div>
+  {#each args as arg (arg.name)}
+    <FormArgument {arg} {namePrefix} />
+  {/each}
+</div>
diff --git a/packages/web/src/forms/FormProviderCore.svelte b/packages/web/src/forms/FormProviderCore.svelte
index b17cbc76f..dc5b07372 100644
--- a/packages/web/src/forms/FormProviderCore.svelte
+++ b/packages/web/src/forms/FormProviderCore.svelte
@@ -9,10 +9,12 @@
 </script>
 
 <script lang="ts">
+  import FormFieldTemplateLarge from '../modals/FormFieldTemplateLarge.svelte';
+
   import keycodes from '../utility/keycodes';
 
   export let values;
-  export let template;
+  export let template = FormFieldTemplateLarge;
 
   const setFieldValue = (name, value) => {
     values.update(x => ({ ...x, [name]: value }));
diff --git a/packages/web/src/freetable/FreeTableGrid.svelte b/packages/web/src/freetable/FreeTableGrid.svelte
index 68a8c4b3b..2de33ac78 100644
--- a/packages/web/src/freetable/FreeTableGrid.svelte
+++ b/packages/web/src/freetable/FreeTableGrid.svelte
@@ -16,10 +16,35 @@
   import ColumnManager from '../datagrid/ColumnManager.svelte';
   import ReferenceManager from '../datagrid/ReferenceManager.svelte';
   import FreeTableGridCore from './FreeTableGridCore.svelte';
-import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
+  import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
+  import MacroManager from './MacroManager.svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import MacroDetail from './MacroDetail.svelte';
+  import { runMacro } from 'dbgate-datalib';
+  import _ from 'lodash';
+
+  export let modelState;
+  export let dispatchModel;
 
   let managerSize;
-  let selectedMacro;
+
+  const selectedMacro = writable(null);
+  setContext('selectedMacro', selectedMacro);
+  const macroValues = writable({});
+  setContext('macroValues', macroValues);
+
+  const handleExecuteMacro = () => {
+    const newModel = runMacro(
+      $selectedMacro,
+      extractMacroValuesForMacro(macroValues, selectedMacro),
+      modelState.value,
+      false,
+      [] // selectedCells
+    );
+    dispatchModel({ type: 'set', value: newModel });
+    $selectedMacro = null;
+  };
 </script>
 
 <HorizontalSplitter initialValue="300px" bind:size={managerSize}>
@@ -29,13 +54,13 @@ import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
         <FreeTableColumnEditor {...$$props} {managerSize} />
       </WidgetColumnBarItem>
 
-      <!-- <WidgetColumnBarItem title="Macros" name="macros">
+      <WidgetColumnBarItem title="Macros" name="macros">
         <MacroManager {...$$props} {managerSize} />
-      </WidgetColumnBarItem> -->
+      </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>
   <div class="grid" slot="2">
-    <VerticalSplitter initialValue="70%">
+    <VerticalSplitter initialValue="70%" isSplitter={!!$selectedMacro}>
       <svelte:fragment slot="1">
         <FreeTableGridCore {...$$props} />
       </svelte:fragment>
@@ -45,15 +70,11 @@ import FreeTableColumnEditor from './FreeTableColumnEditor.svelte';
       onSelectionChanged={setSelectedCells}
       {setSelectedMacro} -->
 
-      <!-- {#if selectedMacro}
-        <MacroDetail
-          {selectedMacro}
-          {setSelectedMacro}
-          onChangeValues={setMacroValues}
-          {macroValues}
-          onExecute={handleExecuteMacro}
-        />
-      {/if} -->
+      <svelte:fragment slot="2">
+        {#if $selectedMacro}
+          <MacroDetail onExecute={handleExecuteMacro} />
+        {/if}
+      </svelte:fragment>
     </VerticalSplitter>
   </div>
 </HorizontalSplitter>
diff --git a/packages/web/src/freetable/MacroDetail.svelte b/packages/web/src/freetable/MacroDetail.svelte
new file mode 100644
index 000000000..1bbb857af
--- /dev/null
+++ b/packages/web/src/freetable/MacroDetail.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import TabControl from '../elements/TabControl.svelte';
+  import AceEditor from '../query/AceEditor.svelte';
+
+  import MacroHeader from './MacroHeader.svelte';
+  import MacroInfoTab from './MacroInfoTab.svelte';
+
+  const selectedMacro = getContext('selectedMacro') as any;
+
+  export let onExecute;
+</script>
+
+<div class="container">
+  <MacroHeader {onExecute} />
+  <TabControl
+    tabs={[
+      {
+        label: 'Macro detail',
+        component: MacroInfoTab,
+      },
+      {
+        label: 'JavaScript',
+        component: AceEditor,
+        props: {
+          readOnly: true,
+          value: $selectedMacro?.code,
+          mode: 'javascript',
+        },
+      },
+    ]}
+  />
+</div>
+
+<style>
+  .container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>
diff --git a/packages/web/src/freetable/MacroHeader.svelte b/packages/web/src/freetable/MacroHeader.svelte
new file mode 100644
index 000000000..fcac55f3e
--- /dev/null
+++ b/packages/web/src/freetable/MacroHeader.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import ToolbarButton from '../widgets/ToolbarButton.svelte';
+
+  export let onExecute;
+
+  const selectedMacro = getContext('selectedMacro') as any;
+</script>
+
+<div class="container">
+  <div class="header">
+    <FontIcon icon="img macro" />
+    <div class="ml-2">
+      {$selectedMacro?.title}
+    </div>
+  </div>
+  <div class="buttons">
+    <ToolbarButton icon="icon run" on:click={onExecute}>Execute</ToolbarButton>
+    <ToolbarButton icon="icon close" on:click={() => ($selectedMacro = null)}>Close</ToolbarButton>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    background: var(--theme-bg-modalheader);
+    height: var(--dim-toolbar-height);
+    min-height: var(--dim-toolbar-height);
+    overflow: hidden;
+    border-top: 1px solid var(--theme-border);
+    border-bottom: 1px solid var(--theme-border);
+  }
+
+  .header {
+    font-weight: bold;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .buttons {
+    display: flex;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/web/src/freetable/MacroInfoTab.svelte b/packages/web/src/freetable/MacroInfoTab.svelte
new file mode 100644
index 000000000..d7a12f764
--- /dev/null
+++ b/packages/web/src/freetable/MacroInfoTab.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+
+  import FormStyledButton from '../elements/FormStyledButton.svelte';
+
+  import WidgetTitle from '../widgets/WidgetTitle.svelte';
+  import MacroParameters from './MacroParameters.svelte';
+
+  const selectedMacro = getContext('selectedMacro') as any;
+
+  export let onExecute;
+</script>
+
+<div class="wrapper">
+  <div class="section">
+    <WidgetTitle>Execute</WidgetTitle>
+    <FormStyledButton value="Execute" on:click={onExecute} />
+  </div>
+
+  <div class="section">
+    <WidgetTitle>Parameters</WidgetTitle>
+    {#if $selectedMacro?.args && $selectedMacro?.args?.length > 0}
+      {#key $selectedMacro?.name}
+        <MacroParameters args={$selectedMacro?.args||[]} namePrefix={`${$selectedMacro?.name}#`} />
+      {/key}
+    {:else}
+      <div class="m-1">This macro has no parameters</div>
+    {/if}
+  </div>
+
+  <div class="section">
+    <WidgetTitle>Description</WidgetTitle>
+    <div class="m-1">{$selectedMacro?.description}</div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    display: flex;
+    overflow-y: auto;
+  }
+  .section {
+    margin: 5px;
+  }
+</style>
diff --git a/packages/web/src/freetable/MacroManager.svelte b/packages/web/src/freetable/MacroManager.svelte
new file mode 100644
index 000000000..f137ed255
--- /dev/null
+++ b/packages/web/src/freetable/MacroManager.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import * as macroAppObject from '../appobj/MacroAppObject.svelte';
+
+  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import macros from './macros';
+
+  let filter = '';
+  export let managerSize;
+</script>
+
+<ManagerInnerContainer width={managerSize}>
+  <SearchBoxWrapper>
+    <SearchInput placeholder="Search macros" bind:value={filter} />
+  </SearchBoxWrapper>
+  <AppObjectList list={_.sortBy(macros, 'title')} module={macroAppObject} {filter} groupFunc={data => data.group} />
+</ManagerInnerContainer>
diff --git a/packages/web/src/freetable/MacroParameters.svelte b/packages/web/src/freetable/MacroParameters.svelte
new file mode 100644
index 000000000..ede29efa3
--- /dev/null
+++ b/packages/web/src/freetable/MacroParameters.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import { getContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import FormArgumentList from '../forms/FormArgumentList.svelte';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
+  import FormFieldTemplateRow from '../modals/FormFieldTemplateRow.svelte';
+
+  export let args = [];
+  const macroValues = getContext('macroValues');
+  export let namePrefix;
+  // export let onChangeValues;
+
+  //   const initialValues = {
+  //     ..._.fromPairs(args.filter(x => x.default != null).map(x => [`${namePrefix}${x.name}`, x.default])),
+  //     ...macroValues,
+  //   };
+
+  // const values = writable(initialValues);
+
+  // $: if (onChangeValues) onChangeValues($values);
+</script>
+
+<FormProviderCore values={macroValues} template={FormFieldTemplateRow}>
+  <FormArgumentList {args} {namePrefix} />
+</FormProviderCore>
diff --git a/packages/web/src/modals/FormFieldTemplateRow.svelte b/packages/web/src/modals/FormFieldTemplateRow.svelte
new file mode 100644
index 000000000..1afdacc4b
--- /dev/null
+++ b/packages/web/src/modals/FormFieldTemplateRow.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let label;
+  export let labelProps: any = {};
+</script>
+
+<div class="row">
+  <div class="label" {...labelProps} on:click={labelProps.onClick}>{label}</div>
+  <div><slot /></div>
+</div>
+
+<style>
+  .row {
+    display: flex;
+    margin: 10px;
+  }
+  .label {
+    width: 10vw;
+    font-weight: bold;
+  }
+</style>