diff --git a/examples/demo/src/config.router.js b/examples/demo/src/config.router.js
index a54285b32..00620bfc4 100644
--- a/examples/demo/src/config.router.js
+++ b/examples/demo/src/config.router.js
@@ -20,6 +20,7 @@ angular.module('app')
     stateHelperProvider.state(freshRouterStates)
 
     stateHelperInit(freshMenu)
+    console.log("freshMenu", freshMenu)
     appState.sideMenuConfig = freshMenu
 
     // $stateProvider.state({
diff --git a/examples/demo/src/pages/batchList/edit/editCtrl.js b/examples/demo/src/pages/batchList/edit/editCtrl.js
index 08e10bd60..f3a131b5d 100644
--- a/examples/demo/src/pages/batchList/edit/editCtrl.js
+++ b/examples/demo/src/pages/batchList/edit/editCtrl.js
@@ -1,7 +1,7 @@
 import BaseEditCtrl from 'angle-grinder/src/ng/gridz/list/BaseEditCtrl'
 // import appState from 'angle-grinder/src/tools/AppState'
 import _ from 'lodash'
-import appConfigApi from 'angle-grinder/src/dataApi/AppConfigApi'
+import appConfigApi from '@yakit/core/stores/AppConfigApi'
 
 export default class EditCtrl extends BaseEditCtrl {
   vm = {}
diff --git a/examples/demo/src/svelteDataList/customer/RestGrid.svelte b/examples/demo/src/svelteDataList/customer/RestGrid.svelte
index 27e34fd8c..663c3c56d 100644
--- a/examples/demo/src/svelteDataList/customer/RestGrid.svelte
+++ b/examples/demo/src/svelteDataList/customer/RestGrid.svelte
@@ -20,5 +20,7 @@
 
 <p>dataApi is {dataApi.key}</p>
 <p>foo is {foo}</p>
+<a href="/foo" class="link nav">WTF</a>
+<a href="https://www.google.com/" class="link nav">google</a>
 
 <Gridz {dataApi} {ctx}/>
diff --git a/examples/demo/src/svelteDataList/simple/QuickFilter.svelte b/examples/demo/src/svelteDataList/simple/QuickFilter.svelte
new file mode 100644
index 000000000..1a3027c85
--- /dev/null
+++ b/examples/demo/src/svelteDataList/simple/QuickFilter.svelte
@@ -0,0 +1,41 @@
+<!--
+  Wraps the jqGrid and adds the toolbar and search form
+ -->
+<script>
+  import {ButtonToggleGroup} from '@yakit/svelte/index'
+
+  let activeKey
+  let activeState
+
+  let schema = [
+    { key: 'PA', label: 'Payments'},
+    { key: 'IN', label: 'Invoices'},
+    { key: 'MEM', label: 'Memos'}
+  ]
+
+  let states = [
+    { key: '0', label: 'Open'},
+    { key: '1', label: 'Closed'}
+  ]
+
+  function onToggle(event){
+    let item = event.detail
+    console.log("onToggle", item)
+    console.log("activeKey/activeState", activeKey, activeState)
+  }
+
+</script>
+
+<div class='quick-filter'>
+  <ButtonToggleGroup bind:activeKey {schema} on:click={onToggle}/>
+</div>
+<div class='quick-filter'>
+  <ButtonToggleGroup bind:activeKey={activeState} schema={states} on:click={onToggle}/>
+</div>
+
+<style>
+  .quick-filter :global(.button7) {
+    height: 30px;
+    text-transform:initial;
+  }
+</style>
diff --git a/examples/demo/src/svelteDataList/simple/SimpleGrid.svelte b/examples/demo/src/svelteDataList/simple/SimpleGrid.svelte
index 577a8872b..b06333e6b 100644
--- a/examples/demo/src/svelteDataList/simple/SimpleGrid.svelte
+++ b/examples/demo/src/svelteDataList/simple/SimpleGrid.svelte
@@ -2,6 +2,7 @@
 <script>
   import { Gridz } from '@yakit/svelte/index'
   import sessionStores from '~/store/sessionServices'
+  import QuickFilter from './QuickFilter.svelte'
 
   let gridOptions = {
     colModel: [
@@ -52,7 +53,8 @@
       },
       state:{
         input: 'select',
-        selectOptions:{
+        options:{
+          isMulti: false,
           isValueObject: true,
           data:[{id:0, name: 'Open'}, {id:1, name: 'Closed'}]
         }
@@ -61,7 +63,7 @@
     column3:{
       customer:{
         input: 'select',
-        selectOptions:{
+        options:{
           dataApi:{
             key:'customer'
           }
@@ -80,5 +82,5 @@
 
 </script>
 
-<Gridz {dataApi} {ctx} />
+<Gridz {dataApi} {ctx} {QuickFilter}/>
 <!-- <JqGrid {ctx}/> -->
diff --git a/src/dataApi/AppConfigApi.js b/src/dataApi/AppConfigApi.js
deleted file mode 100644
index 5f8beb6da..000000000
--- a/src/dataApi/AppConfigApi.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import kyApi from './kyApi'
-
-const makeLocalCache = opts => {
-  const _values = {}
-
-  return {
-    get(key) { return _values[key] },
-    contains(key) { return key in _values },
-    remove(key) { delete _values[key] },
-    set(key, value) { _values[key] = value },
-    values() { return _values },
-    getSet(key, value) {
-      if (!this.contains(key)) {
-        this.set(key, typeof value === 'function' ? value() : value)
-      }
-      return this.get(key)
-    }
-  }
-}
-const _cache = makeLocalCache()
-
-/** main holder for api */
-export class AppConfigApi {
-  prefixUrl = 'api/appConfig/'
-
-  // Allows to use custom function to generate config key, for example namespace_key
-  configKeyGenerator = (configKey) => {
-    return configKey
-  }
-
-  setConfigKeyGenerator(generatorFunc) {
-    this.configKeyGenerator = generatorFunc
-  }
-
-  getConfig(configKey) {
-    return this.configFromCache(`${this.prefixUrl}${this.configKeyGenerator(configKey)}`)
-  }
-
-  /**
-   * checks cache and if not there then does a ky.get
-   */
-  async configFromCache(key) {
-    if (_cache.contains(key)) {
-      return _cache.get(key)
-    } else {
-      let cfg = {}
-      try{
-        cfg = await kyApi.ky.get(key).json()
-      } catch (er) {
-        console.error("problem getting config from server", er)
-      }
-      _cache.set(key, cfg)
-      return cfg
-    }
-  }
-}
-
-const _instance = new AppConfigApi()
-
-export default _instance
diff --git a/src/gridz/GridDataApiCtrl.js b/src/gridz/GridDataApiCtrl.js
index ac2469bff..9dec96cd5 100644
--- a/src/gridz/GridDataApiCtrl.js
+++ b/src/gridz/GridDataApiCtrl.js
@@ -170,6 +170,11 @@ export default class GridDataApiCtrl {
     return this.jqGridEl.jqGrid('resetSelection')
   }
 
+  selectRow(selRowId) {
+    this.clearSelection()
+    return this.jqGridEl.jqGrid('setSelection', selRowId)
+  }
+
   // Returns an array with data of the requested id = rowid.
   // The returned array is of type name:value, where the name is
   // a name from colModel and the value from the associated column in that row.
@@ -184,9 +189,7 @@ export default class GridDataApiCtrl {
   }
 
   updateFooter(data) {
-    setTimeout(_ => {
-      this.getGridEl().footerData('set', data)
-    })
+    if(this.jqGridEl) this.jqGridEl.footerData('set', data)
   }
 
   // Populates the grid with the given data.
@@ -316,7 +319,7 @@ export default class GridDataApiCtrl {
   // The syntax of data array is: {name1:value1,name2: value2...}
   // where the name is the name of the column as described in the colModel
   // and the value is the new value.
-  updateRow(id, data, emptyMissingCells) {
+  updateRow(id, data, emptyMissingCells = false) {
     if (emptyMissingCells == null) { emptyMissingCells = true }
     const flatData = flattenObject(data)
 
@@ -422,7 +425,7 @@ export default class GridDataApiCtrl {
     return this.reload()
   }
 
-  saveRow(id, data) {
+  addOrUpdateRow(id, data) {
     if (this.hasRow(id)) {
       return this.updateRow(id, data)
     } else {
@@ -518,7 +521,6 @@ export default class GridDataApiCtrl {
       if(!_.isEmpty(q)){
         p.q = q
       }
-      Log.debug("gridLoader search " + this.dataApi.key, p)
       const data = await this.dataApi.search(p)
       // this.addJSONData(data)
     } catch (er) {
diff --git a/src/gridz/jq.formatters.js b/src/gridz/jq.formatters.js
index 016ed7c92..46b40c511 100644
--- a/src/gridz/jq.formatters.js
+++ b/src/gridz/jq.formatters.js
@@ -29,14 +29,13 @@ $.extend($.fn.fmatter, {
   /** for the Svelte popovers */
   editPopoverLink(cellVal, options, rowdata) {
     // console.log("editPopoverLink", cellVal, options, rowdata)
+    if (!cellVal) return ''
     const ident = rowdata['id']
     const popoverId = `#${options.gid}-popover-edit`
     return `<a class="editPopoverLink popover-open" href="#" data-id="${ident}" data-popover="${popoverId}">${cellVal}</a>`
   },
 
   gridLink(cellVal, options, rowdata) {
-    Log.debug("gridLink options", options)
-    Log.debug("gridLink rowdata", rowdata)
     const id = rowdata.id
     return `<a class="gridLink" href="#" >${cellVal}</a>`
   },
diff --git a/src/gridz/makeListDataCtrl.js b/src/gridz/makeListDataCtrl.js
index d9b92de7f..7feec24f9 100644
--- a/src/gridz/makeListDataCtrl.js
+++ b/src/gridz/makeListDataCtrl.js
@@ -2,7 +2,7 @@
 // import _ from 'lodash'
 import { get, writable } from 'svelte/store';
 import { isEmpty, cloneDeep, isFunction, merge } from '@yakit/core/dash'
-import appConfigApi from '../dataApi/AppConfigApi'
+import appConfigApi from '@yakit/core/stores/AppConfigApi'
 import toast from '@yakit/ui/growl'
 import Swal from '@yakit/ui/swal'
 
@@ -13,7 +13,7 @@ const makeListDataCtrl = (opts) => {
   let defaultToolbarOpts = {
     selectedButtons: {
       bulkUpdate: { icon: 'edit_note', tooltip: 'Bulk Update' },
-      xlsExport: { icon: 'mdi-microsoft-excel', tooltip: 'Export to Excel' }
+      xlsExport: { icon: 'view_module', label: 'Export to Excel' }
     },
     leftButtons: {
       create: { icon: 'add_box', tooltip: 'Create New' }
@@ -62,12 +62,16 @@ const makeListDataCtrl = (opts) => {
       //if ctx toolbar option were passed in with context
       if(ctx.toolbarOptions) merge(tbopts, ctx.toolbarOptions)
       // setup search form show based on if searchForm is configured
-      if (ctx.searchForm === undefined) {
+      if (ctx.searchForm === undefined || gopts.searchFormEnabled == false) {
         gopts.showSearchForm = false
         ctx.state.showSearchForm = false
         tbopts.searchFormButton.class = 'hidden'
       }
 
+      if (ctx.editForm === undefined || gopts.createEnabled == false) {
+        tbopts.leftButtons.create.class = 'hidden'
+      }
+
       if (ctx.bulkUpdateForm === undefined) {
         tbopts.selectedButtons.bulkUpdate.class = 'hidden'
       }
@@ -112,7 +116,9 @@ const makeListDataCtrl = (opts) => {
       }
     },
 
+    // Fires for common actions, will fall back to ctx.toobarHandler if nothing exists
     fireToolbarAction(btnItem, event) {
+      console.log("listDataCtrl fireToolbarAction", btnItem, event)
       switch (btnItem.key) {
         case 'create':
           return ctrl.create()
@@ -123,7 +129,11 @@ const makeListDataCtrl = (opts) => {
         case 'delete':
           return ctrl.deleteSelected()
         default:
-          if (isFunction(ctrl[btnItem.key])) {
+          if(ctrl.ctx.toolbarHandler){
+            return ctrl.ctx.toolbarHandler(btnItem, event)
+          }
+          //FIXME this is kind of dangerous and should be removes and use ctx.toolbarHandler
+          else if (isFunction(ctrl[btnItem.key])) {
             return ctrl[btnItem.key](btnItem, event)
           }
       }
diff --git a/src/ng/common/directives/empty-links.js b/src/ng/common/directives/empty-links.js
deleted file mode 100644
index dff4c10ac..000000000
--- a/src/ng/common/directives/empty-links.js
+++ /dev/null
@@ -1,19 +0,0 @@
-'use strict'
-/**
-  * Prevent default action on empty links.
-*/
-import commonModule from '../commonModule'
-
-angular.module(commonModule)
-  .directive('a', function() {
-    return {
-      restrict: 'E',
-      link: function(scope, elem, attrs) {
-        if (attrs.ngClick || attrs.href === '' || attrs.href === '#') {
-          elem.on('click', function(e) {
-            e.preventDefault()
-          })
-        }
-      }
-    }
-  })
diff --git a/src/ng/common/directives/index.js b/src/ng/common/directives/index.js
index 2f39e54ff..0ecf71090 100644
--- a/src/ng/common/directives/index.js
+++ b/src/ng/common/directives/index.js
@@ -13,5 +13,4 @@ import './sideMenu'
 import './tagInput'
 import './perfect-scrollbar'
 import './maxlength'
-import './empty-links'
 import './letter-icon'
diff --git a/src/ng/gridz/list-ds/ListDataApiCtrl.js b/src/ng/gridz/list-ds/ListDataApiCtrl.js
index a664a5e31..16f1c0910 100644
--- a/src/ng/gridz/list-ds/ListDataApiCtrl.js
+++ b/src/ng/gridz/list-ds/ListDataApiCtrl.js
@@ -6,7 +6,7 @@ import { isEmpty } from '@yakit/core/dash'
 import EditModalCtrl from './EditModalCtrl'
 import BulkUpdateModalCtrl from './BulkUpdateModalCtrl'
 import { argsMerge } from '../../utils/classUtils'
-import appConfigApi from '../../../dataApi/AppConfigApi'
+import appConfigApi from '@yakit/core/stores/AppConfigApi'
 import toast from '@yakit/ui/growl'
 //import Swal from '../../../tools/swal'
 
diff --git a/src/ng/gridz/list-ds/makeNgListDataCtrl.js b/src/ng/gridz/list-ds/makeNgListDataCtrl.js
index 6477019c0..ebfcc690d 100644
--- a/src/ng/gridz/list-ds/makeNgListDataCtrl.js
+++ b/src/ng/gridz/list-ds/makeNgListDataCtrl.js
@@ -41,7 +41,7 @@ const makeNgListDataCtrl = (ctrl) => {
       )
       modInst.result
         .then(editedVm => {
-          isUpdate ? ctrl.getGridCtrl().updateRow(editedVm.id, editedVm) : ctrl.getGridCtrl().addRow(editedVm.id, editedVm)
+          isUpdate ? ctrl.getGridCtrl().addOrUpdateRow(editedVm.id, editedVm) : ctrl.getGridCtrl().addRow(editedVm.id, editedVm)
         })
         .catch(() => {
           console.log('Modal dismissed at: ' + new Date())
diff --git a/src/ng/gridz/list/BaseEditCtrl.js b/src/ng/gridz/list/BaseEditCtrl.js
index 418482c6b..23f13a951 100644
--- a/src/ng/gridz/list/BaseEditCtrl.js
+++ b/src/ng/gridz/list/BaseEditCtrl.js
@@ -1,7 +1,7 @@
 // import _ from 'lodash'
 
 import { argsMerge } from '../../utils/classUtils'
-import appConfigApi from '../../../dataApi/AppConfigApi'
+import appConfigApi from '@yakit/core/stores/AppConfigApi'
 import _ from 'lodash'
 
 export default class EditModalCtrl {
diff --git a/src/ng/gridz/list/BaseListCtrl.js b/src/ng/gridz/list/BaseListCtrl.js
index 89a978bff..7de306806 100644
--- a/src/ng/gridz/list/BaseListCtrl.js
+++ b/src/ng/gridz/list/BaseListCtrl.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import EditModalCtrl from './EditModalCtrl'
 import BulkUpdateModalCtrl from './BulkUpdateModalCtrl'
 import { argsMerge } from '../../utils/classUtils'
-import appConfigApi from '../../../dataApi/AppConfigApi'
+import appConfigApi from '@yakit/core/stores/AppConfigApi'
 import toast from '@yakit/ui/growl'
 // import { transformOptions } from '../../controls/formly/helpers'
 
diff --git a/src/ng/sidenav/ag-sidenav.html b/src/ng/sidenav/ag-sidenav.html
index 99c86ea9e..da5946eb6 100644
--- a/src/ng/sidenav/ag-sidenav.html
+++ b/src/ng/sidenav/ag-sidenav.html
@@ -23,7 +23,7 @@
   <div class="sidenav-nav sidenav-list">
 
     <script type="text/ng-template" id="menuItemTree">
-      <a href="{{$ctrl.hasChildren(mitem) ? '' : (mitem.children ? mitem.children[0].name : mitem.name)}}" class="item-content"
+      <a href="{{$ctrl.hasChildren(mitem) ? '' : mitem.href}}" class="item-content nav"
          ng-click="$ctrl.itemClick(mitem, $event)">
         <span class="icon" ng-if="mitem.data.icon">
           <i class="{{mitem.data.icon}}"></i>
diff --git a/src/ng/sidenav/ag-sidenav.js b/src/ng/sidenav/ag-sidenav.js
index 94d3c8386..3d740e035 100644
--- a/src/ng/sidenav/ag-sidenav.js
+++ b/src/ng/sidenav/ag-sidenav.js
@@ -88,7 +88,7 @@ class controller {
         // it has no children, its a ui-router link
         // if not fixed then close (minimize) on click
         if (!this.isFixed) minimizeSidenav()
-        appState.$state.go(mitem.children ? mitem.children[0].name : mitem.name)
+        // appState.$state.go(mitem.children ? mitem.children[0].name : mitem.name)
       }
     }
   }
diff --git a/src/ng/uirouter/stateHelperInit.js b/src/ng/uirouter/stateHelperInit.js
index f1103df79..83668592a 100644
--- a/src/ng/uirouter/stateHelperInit.js
+++ b/src/ng/uirouter/stateHelperInit.js
@@ -1,5 +1,6 @@
-import angular from 'angular'
 import * as nameUtils from '@yakit/core/nameUtils'
+import { merge } from '@yakit/core/dash'
+import { isPlainObject } from '@yakit/core/is'
 
 /**
  * Sets up defaults on the state/menu tree
@@ -17,12 +18,13 @@ export default function stateHelperInit(state, opts) {
     siblingTraversal: false
   }
   if (opts) {
-    angular.extend(options, opts)
+    merge(options, opts)
   }
   // by default set the url to the name
   if (!state.url && state.url !== '') {
     state.url = `/${state.name}`
   }
+  state.href =  `/#${state.url}`
   // setup data for title etc if its not there
   if (!state.data) state.data = {}
 
@@ -36,10 +38,8 @@ export default function stateHelperInit(state, opts) {
     state.ncyBreadcrumb.label = state.data.title
   }
 
-  if (!options.keepOriginalNames) {
-    fixStateName(state)
-  }
-
+  fixStateName(state)
+  if(state._parent) state.href = `${state._parent.href}${state.url}`
   // $stateProvider.state(state)
 
   if (state.children && state.children.length) {
@@ -62,7 +62,7 @@ export default function stateHelperInit(state, opts) {
 function fixStateName(state) {
   if (!state._orgigName && state._parent) {
     state._orgigName = state.name
-    state.name = (angular.isObject(state._parent) ? state._parent.name : state._parent) + '.' + state.name
+    state.name = (isPlainObject(state._parent) ? state._parent.name : state._parent) + '.' + state.name
   }
 }
 
diff --git a/src/styles/framework7/framework7.less b/src/styles/framework7/framework7.less
index 884f10144..3c70f2f5d 100644
--- a/src/styles/framework7/framework7.less
+++ b/src/styles/framework7/framework7.less
@@ -37,6 +37,9 @@
 // needs to come from framework7 not source because it has the font built into it
 @import '~framework7/components/app/app.less';
 // @import './components/statusbar/statusbar.less';
+
+@import '~framework7/components/accordion/accordion.less';
+
 @import '~framework7/components/view/view.less';
 @import '~framework7/components/page/page.less';
 @import '~framework7/components/link/link.less';
diff --git a/src/styles/framework7/index.scss b/src/styles/framework7/index.scss
index 47141f063..1bad28d08 100644
--- a/src/styles/framework7/index.scss
+++ b/src/styles/framework7/index.scss
@@ -16,9 +16,19 @@ body {
 }
 
 :root {
+  /* Sync default color theme */
+  --f7-theme-color: var(--color-primary-strong);
+  --f7-theme-color-rgb: 57, 94, 132;
+  --f7-theme-color-shade: var(--color-primary-strong);
+  --f7-theme-color-tint: var(--color-primary-light);
+
   --f7-page-bg-color: #{cvar(body)};
   --f7-tabbar-link-inactive-color: #{cvar(text, light)};
   --f7-input-clear-button-color: var(--color-shade-20);
+
+  // --f7-bars-link-color:
+  --f7-tabbar-link-active-color: var(--color-link);
+  --f7-tabbar-link-active-border-color: var(--color-link);
 }
 
 //input mods
@@ -30,3 +40,8 @@ body {
     position: absolute;
   }
 }
+
+//makes it so select drop down is not hidden
+.popover-inner {
+  overflow: visible;
+}
diff --git a/src/styles/init/theme-vars.scss b/src/styles/init/theme-vars.scss
index e813dd470..ec03f9650 100644
--- a/src/styles/init/theme-vars.scss
+++ b/src/styles/init/theme-vars.scss
@@ -13,7 +13,7 @@ $default-colors: (
   primary:   ( base: hsl(210, 40%, 37%) ),
   secondary: ( base: hsl(37,  98%, 46%) ),
   accent:    ( base: hsl( 235, 100%, 66%) ),
-  link:      ( base: hsl(217, 71%,  53%)  ),
+  link:      ( base: hsl(217, 71%,  43%)  ),
   info:      ( base: hsl(204, 71%,  53%) ),
   success:   ( base: hsl(85, 77%,  41%) ),
   danger:    ( base: hsl(350, 60%, 43%) ),
diff --git a/src/styles/init/typography.scss b/src/styles/init/typography.scss
index efdce73bf..097988451 100644
--- a/src/styles/init/typography.scss
+++ b/src/styles/init/typography.scss
@@ -8,12 +8,14 @@
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
 
 //red example
-// .material-icons-two-tone .red {
+// .material-icons-two-tone {
 //   filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
 // }
 
 .material-icons-two-tone {
-  filter: contrast(70%);
+  // filter: contrast(70%);
+  // filter: invert(10%) sepia(94%) saturate(1000%) hue-rotate(225deg) brightness(80%) contrast(80%);
+  filter: invert(10%) sepia(100%) saturate(3000%) hue-rotate(225deg) brightness(30%) contrast(80%);
 }
 
 //**** Typography sizing ****/
diff --git a/src/styles/vendor/notyf.scss b/src/styles/vendor/notyf.scss
index 314778f33..abe1e8dde 100644
--- a/src/styles/vendor/notyf.scss
+++ b/src/styles/vendor/notyf.scss
@@ -140,7 +140,7 @@ $toast-padding: 15px;
     position: relative;
     padding: 0 $toast-padding;
     border-radius: 2px;
-    max-width: 320px;
+    max-width: 380px;
     transform: translateY(25%);
     box-sizing: border-box;
     flex-shrink: 0;
@@ -180,19 +180,19 @@ $toast-padding: 15px;
     &--dismissible {
 
       .notyf__wrapper {
-        padding-right: 30px;
+        padding-right: 20px;
       }
     }
   }
 
   &__ripple {
-    height: 600px;
-    width: 400px;
+    height: 500px;
+    width: 600px;
     position: absolute;
     transform-origin: bottom right;
     right: 0;
     top: 0;
-    border-radius: 50%;
+    border-radius: 40%;
     transform: scale(0) translateY(-51%) translateX(13%);
     z-index: 5;
     animation: ripple 0.4s ease-out forwards;
@@ -277,6 +277,8 @@ $toast-padding: 15px;
     animation: notyf-fadeinup 0.3s forwards;
     animation-delay: 0.25s;
     line-height: 1.5em;
+    overflow-y: auto;
+    max-height: 200px;
   }
 }
 
diff --git a/yakit/core/schema/__tests__/testSchemaModel.js b/yakit/core/schema/__tests__/testSchemaModel.js
index 39dc25510..ea246936d 100644
--- a/yakit/core/schema/__tests__/testSchemaModel.js
+++ b/yakit/core/schema/__tests__/testSchemaModel.js
@@ -17,6 +17,13 @@ const testSchema = {
     type: 'string',
     enum: [ 'Customer', 'Vendor', 'Prospect']
   },
+  picker:{
+    input: 'select',
+    options:{
+      isValueObject: true,
+      data:['foo', 'bar']
+    }
+  },
   inactive: {
     type: 'boolean'
   },
diff --git a/yakit/core/schema/__tests__/transformSchema.spec.js b/yakit/core/schema/__tests__/transformSchema.spec.js
index df2aeb7b5..9fea21163 100644
--- a/yakit/core/schema/__tests__/transformSchema.spec.js
+++ b/yakit/core/schema/__tests__/transformSchema.spec.js
@@ -2,6 +2,7 @@ import _ from 'lodash'
 import {transformFields} from '../transformSchema'
 import { testSchema, testSchemaColumns } from './testSchemaModel'
 import {expect as x} from '@jest/globals'
+import schemaRefs from '../schemaRefs'
 
 describe('transformFields', () => {
 
@@ -48,6 +49,18 @@ describe('transformFields', () => {
         data: [ 'Customer', 'Vendor', 'Prospect']
       }
     },
+    {
+      key: 'picker',
+      type: 'object',
+      name: 'picker',
+      label: 'Picker',
+      placeholder: 'Picker',
+      input: 'select',
+      selectOptions:{
+        isValueObject: true,
+        data:['foo', 'bar']
+      }
+    },
     {
       key: 'inactive',
       type: 'boolean',
@@ -153,12 +166,76 @@ describe('transformFields', () => {
   describe('tranformOptions from object', function() {
     it('should tranformOptions from object', function() {
       let topts = transformFields(testSchema)
+      console.log("topts", topts)
       topts.forEach((item, i) => {
         x(item).toEqual(resultSchema[i])
       })
       //expect(topts).toEqual(resultOpts)
     })
 
+    it('should tranformOptions options to selectOption', function() {
+      let topts = transformFields({
+        picker:{
+          input: 'select',
+          options:{
+            isValueObject: true,
+            data:['foo', 'bar']
+          }
+        }
+      })
+      console.log("topts", topts)
+      x(topts[0].selectOptions).toEqual({
+        isValueObject: true,
+        data:['foo', 'bar']
+      })
+    })
+
+    it('should merge in refs', function() {
+      schemaRefs.refs = {
+        some:{
+          picklists:{
+            fooinator:{
+              label: 'pick a foo',
+              input: 'select',
+              type: 'string',
+              placeholder: 'pick a foo',
+              options:{
+                isValueObject: true,
+                data:['foo', 'bar']
+              }
+            }
+          }
+        }
+      }
+      let topts = transformFields({
+        fooPick:{
+          label: 'better foo',
+          '$ref': '#/some/picklists/fooinator',
+          options:{
+            dataApi:{
+              key: 'foo'
+            }
+          }
+        }
+      })
+      console.log("topts", topts)
+      x(topts[0]).toEqual({
+        key: 'fooPick',
+        label: 'better foo',
+        name: 'fooPick',
+        type: 'string',
+        input: 'select',
+        placeholder: "pick a foo",
+        selectOptions:{
+          isValueObject: true,
+          data:['foo', 'bar'],
+          dataApi:{
+            key: 'foo'
+          }
+        }
+      })
+    })
+
 
     it('should work with columns', function() {
       let testCols = {
diff --git a/yakit/core/schema/__tests__/yup.spec.js b/yakit/core/schema/__tests__/yup.spec.js
index 19d3c7ad1..8660022c3 100644
--- a/yakit/core/schema/__tests__/yup.spec.js
+++ b/yakit/core/schema/__tests__/yup.spec.js
@@ -128,7 +128,7 @@ describe('yup sanity check', () => {
     let descObj = yupSchema.describe()
 
     let fldKeys = Object.keys(yupSchema.fields)
-    x(fldKeys.length).toEqual(9)
+    x(fldKeys.length).toEqual(10)
 
     //user should have 2 nested fields
     let userKeys = Object.keys(yupSchema.fields.user.fields)
diff --git a/yakit/core/schema/create-form.js b/yakit/core/schema/create-form.js
index 4d5e05a64..0e883ce98 100644
--- a/yakit/core/schema/create-form.js
+++ b/yakit/core/schema/create-form.js
@@ -7,6 +7,7 @@
 
 import {derived, writable, get} from 'svelte/store';
 import {util} from './util';
+import {get as _get} from '../dash';
 
 const NO_ERROR = '';
 const IS_TOUCHED = true;
@@ -51,6 +52,7 @@ export const createForm = (config) => {
 
   const isSubmitting = writable(false);
   const isValidating = writable(false);
+  const isModifying = writable(false);
 
   const isValid = derived(errors, ($errors) => {
     const noErrors = util
@@ -69,8 +71,15 @@ export const createForm = (config) => {
     return object;
   });
 
-  const isModified = derived(modified, ($modified) => {
-    return util.getValues($modified).includes(true);
+  const isModified = derived([modified, isModifying], ([$modified, $isModifying]) => {
+    return util.getValues($modified).includes(true) || $isModifying;
+  });
+
+  const isDisableSave = derived([isModified, isSubmitting],
+    ([$isModified, $isSubmitting]) => {
+      //if its not modified and not modifying
+      let val = !($isModified) || $isSubmitting
+      return val
   });
 
   function validateField(field) {
@@ -171,12 +180,14 @@ export const createForm = (config) => {
     form.set(getInitial.values());
     errors.set(getInitial.errors());
     touched.set(getInitial.touched());
+    isModifying.set(false);
   }
 
   async function clearErrorsAndSubmit(values) {
     errors.set(getInitial.errors())
     await onSubmit(values, form, errors)
     isSubmitting.set(false)
+    isModifying.set(false)
   }
 
   /**
@@ -202,8 +213,15 @@ export const createForm = (config) => {
     handleReset();
   }
 
+  /** The function used to get value form object */
+  function getValue(obj, path){
+    let val = _get(obj, path)
+    return val === undefined ? null : val
+  }
+
   return {
     form,
+    data: form,
     errors,
     touched,
     modified,
@@ -211,6 +229,7 @@ export const createForm = (config) => {
     isSubmitting,
     isValidating,
     isModified,
+    isDisableSave,
     handleChange,
     handleSubmit,
     handleReset,
@@ -219,6 +238,8 @@ export const createForm = (config) => {
     updateTouched,
     validateField,
     updateInitialValues,
+    isModifying,
+    getValue,
     state: derived(
       [
         form,
diff --git a/yakit/core/schema/schemaRefs.js b/yakit/core/schema/schemaRefs.js
new file mode 100644
index 000000000..14fe55612
--- /dev/null
+++ b/yakit/core/schema/schemaRefs.js
@@ -0,0 +1,20 @@
+
+/**
+ * Holder 'statics' for $
+ */
+
+ import { get, isEmpty } from '../dash'
+
+const schemaRefs = {
+  refs:{},
+
+  get(key){
+    return get(schemaRefs.refs, key)
+  },
+
+  isEmpty(){
+    return isEmpty(schemaRefs.refs)
+  }
+}
+
+export default schemaRefs
diff --git a/yakit/core/schema/transformSchema.js b/yakit/core/schema/transformSchema.js
index e17077da7..53bba8b6e 100644
--- a/yakit/core/schema/transformSchema.js
+++ b/yakit/core/schema/transformSchema.js
@@ -5,11 +5,11 @@
  */
 
 import { makeLabel } from '../nameUtils'
-import { map, _defaults, pick, omit, defaultsDeep } from '../dash'
+import { map, _defaults, pick, omit, defaultsDeep, merge, get} from '../dash'
 import { isUndefined, isPlainObject, isEmpty } from '../is'
+import schemaRefs from './schemaRefs'
 
 export function transformFields(fields, ctrl) {
-  console.log("fields", fields)
   if(isEmpty(fields)) return fields
   // if its a plain object and first key starts with column and its a columns layout
   if (isPlainObject(fields) && Object.keys(fields)[0].startsWith('column')) {
@@ -54,8 +54,8 @@ function ensureArray(cfg) {
 }
 
 function doReduce(optsAr, ctrl) {
-  const tplOptsKeys = ['label', 'required', 'placeholder', 'hint', 'minLength',
-    'maxLength', 'rows', 'dataApi', 'selectOptions', 'disabled', 'addon']
+  // const tplOptsKeys = ['label', 'required', 'placeholder', 'hint', 'minLength',
+  //   'maxLength', 'rows', 'dataApi', 'selectOptions', 'options', 'disabled', 'addon']
   return optsAr.reduce(function(accum, field) {
     if (field.fieldGroup) {
       field.fieldGroup = doTransform(field.fieldGroup)
@@ -66,14 +66,12 @@ function doReduce(optsAr, ctrl) {
       _defaults(field, { className: 'columns' })
     } else {
       const key = field.key
+      ///merge in ref if it exists
+      refMerge(field)
       selectOptions(field)
       fieldSchemaType(field)
       fieldDefaults(key, field)
 
-      // if (field.input === 'select') {
-      //   defaultsDeep(field, { selectOptions: { useDataObject: true } })
-      // }
-
       if (field.input.indexOf('addon') > -1) {
         field.onClick = ($event) => {
           if (!$event) return
@@ -92,31 +90,55 @@ function doReduce(optsAr, ctrl) {
   }, [])
 }
 
+/**
+ * if field has a $ref then do lookup and merge in if found
+ * uses a fairly primitive json pointer https://datatracker.ietf.org/doc/html/rfc6901
+ * and only works with string starting with '#/' right now
+ */
+export function refMerge(field) {
+  let refKey = field['$ref']
+  if(refKey){
+    //should start with '#/'
+    refKey = refKey.substring(2).replaceAll('/','.')
+    const refObj = schemaRefs.get(refKey)
+    if(isEmpty(refObj)) return
+    delete field['$ref']
+    defaultsDeep(field, refObj)
+  }
+}
 /**
  * if enum is specified then this will setup selectOptions for it
  */
 export function selectOptions(field) {
-  if(field.selectOptions) {
+  //options or selectOptions will work
+  let options = field.selectOptions || field.options
+  if(options) {
     if(!field.input) field.input = 'select'
     //if isValueObject and no type is set then make it object
-    if(!field.type && field.selectOptions.isValueObject) field.type = 'object'
-    return
+    if(!field.type && options.isValueObject) field.type = 'object'
+    // return
   }
+  //check enum and merge it in
   const fieldEnum = field['enum']
-  if(fieldEnum){
-    field.selectOptions = {
+  if(!isEmpty(fieldEnum)){
+    if(!options) options = {}
+    options = _defaults(options, {
       data: fieldEnum
-    }
-    field.input = 'select'
+    })
+    if(!field.input) field.input = 'select'
   }
+  field.selectOptions = options
+  //remove the field.options if its there
+  if(field.options) delete field.options
 }
 
+
 /**
  * adds an input based on the schema type. if no schema type then defaults to type:string and input:text
  */
 export function fieldSchemaType(field) {
   if(!field.type) field.type = 'string'
-  let {type = 'string', format, input } = field
+  let {type, format, input } = field
   //if input is specified then its been overriden so do nothing
   if(input) return
 
@@ -125,16 +147,31 @@ export function fieldSchemaType(field) {
     format = type
     type = 'string'
   }
+  //if format starts with amount. we can have amount, amount-positive, amount-negative
+  if(format && format.startsWith("amount")){
+    field.multipleOf = 0.01
+    if(!type) type = 'number'
+  }
 
   if(format === 'date' || format === 'date-time'){
     input = format
   } else if(type === 'boolean'){
     input = 'toggle'
-  } else if(type === 'integer' || type === 'number' ){
+  } else if(type === 'integer' ){
+    input = type
+  } else if(type === 'number' ){
     input = type
   } else {
+    if(!type) type = 'string'
     input = 'text'
   }
+  //do some special formats
+  if(format){
+    if(format.endsWith("positive") && !field.min ) field.min = 0
+    if(format.endsWith("negative") && !field.max ) field.max = 0
+  }
+
+
   field.type = type
   field.input = input
 
@@ -155,3 +192,26 @@ export function fieldDefaults(path, opts) {
     input: 'text'
   })
 }
+
+/**
+ * for search form type shemas add some defaults such as isMulti:true on selects.
+ * if dont want that then set isMulti: false on the passed in and it wont get overwritten
+ */
+export function searchDefaults(schema){
+  let fieldListToUse = schema
+  //if its a plain object then assume its a columns config and will have a fields property
+  if(isPlainObject(schema)){
+    fieldListToUse = schema['fields']
+  }
+
+  fieldListToUse.forEach(field => {
+    if(field.selectOptions && field.selectOptions.itMulti === undefined){
+      field.selectOptions.itMulti = true
+      // console.log("searchDefaults", field.selectOptions)
+      // _defaults(field.selectOptions,{
+      //   itMulti:true
+      // })
+      // console.log("searchDefaults", field.selectOptions)
+    }
+  })
+}
diff --git a/yakit/core/stores/AppConfigApi.js b/yakit/core/stores/AppConfigApi.js
new file mode 100644
index 000000000..b9338ad19
--- /dev/null
+++ b/yakit/core/stores/AppConfigApi.js
@@ -0,0 +1,82 @@
+import { kyFetch } from './ky'
+import schemaRefs from '../schema/schemaRefs'
+import growl from '@yakit/ui/growl'
+import { isEmpty } from '../is'
+
+const makeLocalCache = opts => {
+  const _values = {}
+
+  return {
+    get(key) { return _values[key] },
+    contains(key) { return key in _values },
+    remove(key) { delete _values[key] },
+    set(key, value) { _values[key] = value },
+    values() { return _values },
+    getSet(key, value) {
+      if (!this.contains(key)) {
+        this.set(key, typeof value === 'function' ? value() : value)
+      }
+      return this.get(key)
+    }
+  }
+}
+const _cache = makeLocalCache()
+
+/** main holder for api */
+export class AppConfigApi {
+  prefixUrl = 'api/appConfig/'
+  restApi = kyFetch('appConfig')
+
+  // Allows to use custom function to generate config key, for example namespace_key
+  configKeyGenerator = (configKey) => {
+    return configKey
+  }
+
+  // setConfigKeyGenerator(generatorFunc) {
+  //   this.configKeyGenerator = generatorFunc
+  // }
+
+  async getConfig(configKey) {
+    const cfg = await this.configFromCache(configKey)
+    //on the first call ref needs to be pulled, make sure we have it
+    await this.ensureRefsLoaded()
+    return cfg
+  }
+
+  /**
+   * checks cache and if not there then does a ky.get
+   */
+  async configFromCache(configKey) {
+    if (_cache.contains(configKey)) {
+      return _cache.get(configKey)
+    } else {
+      let cfg = {}
+      try{
+        cfg = await this.restApi.get({path: configKey})
+      } catch (er) {
+        growl.error(er, "problem getting app config from server")
+      }
+      _cache.set(configKey, cfg)
+      return cfg
+    }
+  }
+
+  /**
+   * gets the refs file for json pointer lookups with $ref
+   */
+  async refs() {
+    return this.configFromCache('refs')
+  }
+
+  async ensureRefsLoaded(){
+    if(schemaRefs.isEmpty()){
+      const refs = await this.configFromCache('refs')
+      schemaRefs.refs = refs
+    }
+  }
+
+}
+
+const _instance = new AppConfigApi()
+
+export default _instance
diff --git a/yakit/core/stores/rest/restQuery.js b/yakit/core/stores/rest/restQuery.js
index d26e2ea2a..8e56fb51b 100644
--- a/yakit/core/stores/rest/restQuery.js
+++ b/yakit/core/stores/rest/restQuery.js
@@ -26,7 +26,6 @@ export const restQuery = ({ api }) => ds => {
      */
     async search(params) {
       let searchParams = ds.setupSearchParams(params)
-      console.log("search ran with", searchParams)
       const page = await api.get({ searchParams })
 
       ds.stores.setPageView(page)
diff --git a/yakit/svelte/Button.svelte b/yakit/svelte/Buttons/Button.svelte
similarity index 91%
rename from yakit/svelte/Button.svelte
rename to yakit/svelte/Buttons/Button.svelte
index c5b981ce2..89a08086a 100644
--- a/yakit/svelte/Button.svelte
+++ b/yakit/svelte/Buttons/Button.svelte
@@ -2,9 +2,9 @@
   import { onMount, createEventDispatcher } from 'svelte'
   import { getIconClass } from '@yakit/ui/icon'
   import { isTruthy } from '@yakit/core/truthy'
-  import createRipple from "./utils/ripple.js";
+  import createRipple from "../utils/ripple.js";
   // import { classNames } from './utils';
-  import Icon from './Icon.svelte'
+  import Icon from '../Icon.svelte'
 
   import {
     colorClasses,
@@ -12,14 +12,14 @@
     routerClasses,
     actionsAttrs,
     actionsClasses,
-  } from './shared/mixins';
-  import { classNames, extend, isStringProp, plainText, createEmitter } from './shared/utils';
-  import { restProps } from './shared/rest-props';
-  import { useTooltip } from './shared/use-tooltip';
+  } from '../shared/mixins';
+  import { classNames, extend, isStringProp, plainText, createEmitter } from '../shared/utils';
+  import { restProps } from '../shared/rest-props';
+  import { useTooltip } from '../shared/use-tooltip';
   // import { useRouteProps } from '../shared/use-route-props';
-  import { useIcon } from './shared/use-icon';
+  import { useIcon } from '../shared/use-icon';
 
-  import { UseIcon, Preloader } from './index';
+  import { UseIcon, Preloader } from '../index';
 
   /** HTML tag to use for button (either 'a' or 'button')
    * @svelte-prop {String} tag=button
diff --git a/yakit/svelte/Button7.svelte b/yakit/svelte/Buttons/Button7.svelte
similarity index 90%
rename from yakit/svelte/Button7.svelte
rename to yakit/svelte/Buttons/Button7.svelte
index 89a5967f8..beb6901e8 100644
--- a/yakit/svelte/Button7.svelte
+++ b/yakit/svelte/Buttons/Button7.svelte
@@ -1,3 +1,7 @@
+<!--
+  Copied in from F7 so we can change the name and styling so it doesnt conflict with our button
+  Game plan would be to unify them into 1
+ -->
 <script>
   import { createEventDispatcher } from 'svelte';
   import {
@@ -6,15 +10,15 @@
     routerClasses,
     actionsAttrs,
     actionsClasses,
-  } from './shared/mixins';
-  import { classNames, extend, isStringProp, plainText, createEmitter } from './shared/utils';
-  import { restProps } from './shared/rest-props';
-  import { useTooltip } from './shared/use-tooltip';
-  import { useRouteProps } from './shared/use-route-props';
-  import { useIcon } from './shared/use-icon';
+  } from '../shared/mixins';
+  import { classNames, extend, isStringProp, plainText, createEmitter } from '../shared/utils';
+  import { restProps } from '../shared/rest-props';
+  import { useTooltip } from '../shared/use-tooltip';
+  import { useRouteProps } from '../shared/use-route-props';
+  import { useIcon } from '../shared/use-icon';
 
-  import {UseIcon} from './index';
-  import {Preloader} from './index';
+  import {UseIcon} from '../index';
+  import {Preloader} from '../index';
 
   const emit = createEmitter(createEventDispatcher, $$props);
 
diff --git a/yakit/svelte/Buttons/ButtonToggleGroup.svelte b/yakit/svelte/Buttons/ButtonToggleGroup.svelte
new file mode 100644
index 000000000..9e53af313
--- /dev/null
+++ b/yakit/svelte/Buttons/ButtonToggleGroup.svelte
@@ -0,0 +1,26 @@
+<!--
+  Toggle group, bit like radio buttons where one can be selected and clicking on selected button turns it off
+ -->
+ <script>
+  import { createEventDispatcher } from 'svelte'
+  import {Button7, Segmented} from '@yakit/svelte/index'
+
+  export let activeKey = undefined
+  export let schema = undefined
+
+  const dispatch = createEventDispatcher()
+  //turns on value or toggles it if its the same button click
+  let toggleActive = (key) => () => {
+    activeKey = activeKey !== key ? key : null
+    dispatch('click', activeKey)
+    console.log("activeKey", activeKey)
+  }
+
+</script>
+
+<Segmented strong tag="p" class='mr-2' {activeKey} >
+  {#each schema as item}
+  <Button7 active={activeKey === item.key} on:click={toggleActive(item.key)}>{item.label}</Button7>
+  {/each}
+</Segmented>
+
diff --git a/yakit/svelte/Buttons/Segmented.svelte b/yakit/svelte/Buttons/Segmented.svelte
new file mode 100644
index 000000000..65ffa572e
--- /dev/null
+++ b/yakit/svelte/Buttons/Segmented.svelte
@@ -0,0 +1,77 @@
+<!--
+  Copied in from f7 so we can support a toggle like segment.
+  When nothing is active it defuaults to highlighting the first button
+  this takes a value that can be bound that if empty will hide the overlay so noithing is active
+ -->
+<script>
+  import { colorClasses } from '../shared/mixins';
+  import { classNames } from '../shared/utils';
+  import { restProps } from '../shared/rest-props';
+
+  let className = undefined;
+  export { className as class };
+
+  export let activeKey = undefined
+  export let raised = false;
+  export let raisedIos = false;
+  export let raisedMd = false;
+  export let raisedAurora = false;
+  export let round = false;
+  export let roundIos = false;
+  export let roundMd = false;
+  export let roundAurora = false;
+  export let strong = false;
+  export let strongIos = false;
+  export let strongMd = false;
+  export let strongAurora = false;
+  export let tag = 'div';
+
+  $: classes = classNames(
+    className,
+    {
+      segmented: true,
+      'segmented-raised': raised,
+      'segmented-raised-ios': raisedIos,
+      'segmented-raised-aurora': raisedAurora,
+      'segmented-raised-md': raisedMd,
+      'segmented-round': round,
+      'segmented-round-ios': roundIos,
+      'segmented-round-aurora': roundAurora,
+      'segmented-round-md': roundMd,
+      'segmented-strong': strong,
+      'segmented-strong-ios': strongIos,
+      'segmented-strong-md': strongMd,
+      'segmented-strong-aurora': strongAurora,
+    },
+    colorClasses($$props),
+  );
+</script>
+
+{#if tag === 'div'}
+  <div class={classes} {...restProps($$restProps)}>
+    <slot />
+    {#if strong || strongIos || strongMd || strongAurora}
+      {#if activeKey}
+        <span class="segmented-highlight" />
+      {/if}
+    {/if}
+  </div>
+{:else if tag === 'p'}
+  <p class={classes} {...restProps($$restProps)}>
+    <slot />
+    {#if strong || strongIos || strongMd || strongAurora}
+      {#if activeKey}
+        <span class="segmented-highlight" />
+      {/if}
+    {/if}
+  </p>
+{/if}
+
+<style>
+  :global(.segmented-strong) {
+    --f7-segmented-strong-button-text-color: var(--color-primary-strong);
+    --f7-segmented-strong-button-active-bg-color: var(--color-primary);
+    --f7-segmented-strong-button-active-text-color: var(--color-primary-contrast);
+    --f7-segmented-strong-bg-color: var(--color-body-high);
+  }
+</style>
diff --git a/yakit/svelte/Buttons/index.js b/yakit/svelte/Buttons/index.js
new file mode 100644
index 000000000..a1fbfa6b4
--- /dev/null
+++ b/yakit/svelte/Buttons/index.js
@@ -0,0 +1,4 @@
+export { default as Button } from './Button.svelte';
+export { default as Button7 } from './Button7.svelte';
+export { default as Segmented } from './Segmented.svelte';
+export { default as ButtonToggleGroup } from './ButtonToggleGroup.svelte';
diff --git a/yakit/svelte/DataApiList/EditPopover.svelte b/yakit/svelte/DataApiList/EditPopover.svelte
index ddf9a13ec..38b3d4800 100644
--- a/yakit/svelte/DataApiList/EditPopover.svelte
+++ b/yakit/svelte/DataApiList/EditPopover.svelte
@@ -36,16 +36,15 @@
   _defaults(formOpts, {
     async onSubmit(values, form, errors){
       try {
-        dispatch('beforeSubmit', {values, form, errors});
-        // Log.debug("onSubmit", values)
+        dispatch('beforeEditSubmit', values);
         // await dataApi.delay(2000)
         const savedItem = await dataApi.save(values)
         popoverOpened = false
-        dispatch('submitSuccess', savedItem);
+        dispatch('afterEditSubmit', savedItem);
       } catch (er) {
+        console.error(er)
         handleError(er)
       }
-
     }
   })
 
diff --git a/yakit/svelte/DataApiList/Gridz.svelte b/yakit/svelte/DataApiList/Gridz.svelte
index 6b5c59f97..60f3951f8 100644
--- a/yakit/svelte/DataApiList/Gridz.svelte
+++ b/yakit/svelte/DataApiList/Gridz.svelte
@@ -3,7 +3,7 @@
  -->
 <script>
   import { get, writable } from 'svelte/store';
-  import { onMount, onDestroy, tick } from 'svelte'
+  import { onMount, onDestroy, tick, createEventDispatcher } from 'svelte'
   import ListToolbar from './toolbar/ListToolbar.svelte'
   import EditPopover from './EditPopover.svelte'
   import SearchForm from './SearchForm.svelte'
@@ -12,19 +12,28 @@
   import { classNames } from '../shared/utils';
   import stringify from '@yakit/core/stringify';
   import growl from "@yakit/ui/growl"
+  import { get as _get, uniqueId } from "@yakit/core/dash"
 
+  /** the grid context with gridOptions and toolbarOptions */
   export let ctx = undefined
+  /** the dataApi that feeds tihs */
   export let dataApi = undefined
+  /** the gridId, can be bound, should set this through the gridOptions and not here*/
   export let gridId = undefined
+  /** bind to the grid controller to access the instance*/
+  export let gridCtrl = undefined
+  /** toolbar title */
+  export let title = undefined
+  /** the quickfilter buttons to add to toolbar */
+  export let QuickFilter = undefined
+
+  gridCtrl = new GridDataApiCtrl()
 
   // export let restrictSearch = undefined
 
-  let isConfigured = false
+  let inialized = false
   let listController
 
-  let gridCtrl = new GridDataApiCtrl()
-  // if(dense || dense === '') gridCtrl.isDense = true
-
   let className = undefined;
   export { className as class };
 
@@ -37,6 +46,7 @@
   let stateStore
   let editSchema
   let searchSchema
+  let searchFormEnabled
 
   onMount(async () => {
     await setupListCtrl()
@@ -45,15 +55,16 @@
   async function setupListCtrl() {
     listController = await DataApiListController({ dataApi, ctx })
     ctx = listController.ctx
-    gridId = ctx.gridOptions.gridId
+    gridId = ctx.gridOptions.gridId = ctx.gridOptions.gridId  || dataApi.key.replace('/', '_')
     stateStore = listController.ctx.stateStore
+    searchFormEnabled = _get(ctx, 'gridOptions.searchFormEnabled', true)
     setupToolbarOpts(ctx)
     //needs to be either
     editSchema = ctx.editPopover || ctx.editForm
     //needs to be either
     searchSchema = ctx.searchForm
 
-    isConfigured = true
+    inialized = true
   }
 
   //add popover to the createBtn
@@ -61,7 +72,7 @@
     let tbopts = ctx.toolbarOptions
     //it will always exists if tbopts is present so no null checks should be needed, just check class
     if(tbopts && tbopts.leftButtons.create.class !== 'hidden' ){
-      tbopts.leftButtons.create['popoverId'] = `#${ctx.gridOptions.gridId}-popover-edit`
+      tbopts.leftButtons.create['popoverId'] = `#${gridId}-popover-edit`
     }
   }
 
@@ -73,37 +84,39 @@
     gridCtrl.destroy()
   });
 
+  const dispatch = createEventDispatcher();
+
   /** called after successful submit of edit or create. Display message and sync grid*/
   function afterEdit(event){
-    growl.success("saved successfully")
-    // Log.debug("savedItem", event.detail)
     //this just updates the grid display and flashes the row to show it updated
-    gridCtrl.saveRow(event.detail.id, event.detail)
+    gridCtrl.addOrUpdateRow(event.detail.id, event.detail)
+    growl.success("saved successfully")
+    //refire in case we want to do something
+    dispatch( 'afterEditSubmit' , event.detail)
   }
 
   /** fired action after search clicked*/
   async function searchAction(event){
     const searchVals = event.detail
-    Log.debug("searchVals", searchVals)
     await listController.search(searchVals)
   }
 
 </script>
 
-{#if isConfigured }
-  {#if searchSchema }
+{#if inialized }
+  {#if searchSchema && searchFormEnabled }
     <SearchForm listId={gridId} {ctx} schema={searchSchema} on:search={searchAction}/>
   {/if}
   <div use:init class="gridz-wrapper card m-0">
   {#if ctx.toolbarOptions }
-   <ListToolbar {listController} options={ctx.toolbarOptions} />
+    <ListToolbar listId={gridId} {title} {listController} opts={ctx.toolbarOptions} {QuickFilter}/>
   {/if}
   <table class={classes} class:is-dense={$stateStore.isDense}></table>
   <div class="gridz-pager"></div>
 </div>
 
 {#if editSchema }
-<EditPopover listId={gridId} {dataApi} schema={editSchema} on:submitSuccess={afterEdit}/>
+<EditPopover listId={gridId} {dataApi} schema={editSchema} on:afterEditSubmit={afterEdit} on:beforeEditSubmit/>
 {/if}
 
 <!-- <pre class="mb-4">state: {stringify($stateStore, null, 2)}</pre> -->
diff --git a/yakit/svelte/DataApiList/SearchForm.svelte b/yakit/svelte/DataApiList/SearchForm.svelte
index 22edd400f..60744aebd 100644
--- a/yakit/svelte/DataApiList/SearchForm.svelte
+++ b/yakit/svelte/DataApiList/SearchForm.svelte
@@ -3,11 +3,14 @@
  -->
 <script>
   import { onMount, createEventDispatcher } from 'svelte'
-  import { Popover, CardHeader, CardFooter, Button} from '@yakit/svelte/index'
+  import { Popover, CardHeader, CardFooter, Button, BlockTitle, Block,
+    AccordionItem, AccordionToggle, AccordionContent } from '@yakit/svelte/index'
   import { classNames, createEmitter } from '../shared/utils'
   import { Formify } from '@yakit/svelte/Formify';
+  import { searchDefaults } from '@yakit/core/schema/transformSchema'
   import { handleError } from '@yakit/svelte/Formify/problemHandler';
   import { _defaults } from '@yakit/core/dash'
+  import { app } from '@yakit/svelte/framework7';
   import growl from "@yakit/ui/growl"
 
   /** the schema to use to build the form */
@@ -31,9 +34,22 @@
 
   $: stateStore = ctx.stateStore
 
-  $: formClass = classNames('mb-4', {
-    hidden: !($stateStore.showSearchForm)
-  })
+  let formClass = 'mb-4'
+  // $: formClass = classNames('mb-4', {
+  //   hidden: !($stateStore.showSearchForm)
+  // })
+  let accOpened
+
+  $: showSearchForm  = $stateStore.showSearchForm
+
+  $: if(showSearchForm){
+    app.f7.accordion.open("#searchAccordian")
+  } else {
+    // app.f7.accordion.close("#searchAccordian")
+    try{
+      app.f7.accordion.close("#searchAccordian")
+    } catch(e){}
+  }
 
   _defaults(formOpts, {
     validate: false,
@@ -59,6 +75,13 @@
 
   export let onSearch = async (event) => {
     formContext.handleSubmit()
+    searchFormOpened = false
+  }
+
+  // setup isMulti defaults for selects
+  export let onTransformedSchema = (schema) => {
+    console.log("schema", schema)
+    searchDefaults(schema)
   }
 
   onMount( () => {
@@ -69,17 +92,32 @@
 
 </script>
 
-<Formify class={formClass} name={formName} opts={formOpts} {schema} bind:data bind:formContext >
-  <CardFooter class="right" slot="footer">
-    <Button onClick={onCancel} class="mr-4">Reset</Button>
-    <Button color="primary" loading={isSearching} onClick={onSearch}>Search</Button>
-  </CardFooter>
-</Formify>
+<div class="accordion-item" id="searchAccordian">
+  <div class="accordion-item-content">
+    <Formify class={formClass} name={formName} opts={formOpts} {schema} {onTransformedSchema}
+      bind:data bind:formContext >
+      <CardFooter class="right" slot="footer">
+        <Button onClick={onCancel} class="mr-4">Reset</Button>
+        <Button color="primary" loading={isSearching} onClick={onSearch}>Search</Button>
+      </CardFooter>
+    </Formify>
+  </div>
+</div>
 
 <style>
   :global(.xxxx) {
     width: 400px;
   }
+  .accordion-item {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    margin-top: -0.75rem;
+  }
+  .accordion-item-content {
+    padding-left: .75rem;
+    padding-right: .75rem;
+    padding-top: .75rem;
+  }
 </style>
 
 
diff --git a/yakit/svelte/DataApiList/toolbar/ListOptionsPopover.svelte b/yakit/svelte/DataApiList/toolbar/ListOptionsPopover.svelte
index aa71b9608..af55b8da2 100644
--- a/yakit/svelte/DataApiList/toolbar/ListOptionsPopover.svelte
+++ b/yakit/svelte/DataApiList/toolbar/ListOptionsPopover.svelte
@@ -7,6 +7,8 @@
   import { isFunction } from '@yakit/core/dash';
 
   export let listController
+  export let popoverId = undefined
+
   $: stateStore = listController.ctx.stateStore
 
   let defaultMenuItems = [
@@ -50,7 +52,7 @@
 
 </script>
 
-<Popover bind:this={popComponent} class="list-options-popover" onPopoverClose={popoverClose}>
+<Popover bind:this={popComponent} id={popoverId} onPopoverClose={popoverClose}>
   <List>
     {#each displayMenutItems as item}
       <ListItem id={item.id} link="#" title={item.display} popoverClose
diff --git a/yakit/svelte/DataApiList/toolbar/ListToolbar.svelte b/yakit/svelte/DataApiList/toolbar/ListToolbar.svelte
index ad56269de..7dcfd17b1 100644
--- a/yakit/svelte/DataApiList/toolbar/ListToolbar.svelte
+++ b/yakit/svelte/DataApiList/toolbar/ListToolbar.svelte
@@ -4,22 +4,26 @@
 <script>
   import { fade, fly } from "svelte/transition";
   import {Button, Button7, Segmented} from '@yakit/svelte/index'
-  import TbButton from './TbButton.svelte'
-  import QuickFilter from './QuickFilter.svelte'
+  import TbButton from '../../Toolbar/TbButton.svelte'
   import { merge } from '@yakit/core/dash';
   import { classNames } from '../../shared/utils'
   import ListOptionsPopover from './ListOptionsPopover.svelte'
 
   //toolbar options
   export let title = undefined
-  export let options = {}
+  export let opts = {}
   export let listController
+  export let listId = undefined
+
+  /** the quickfilter buttons to add to toolbar */
+  export let QuickFilter = undefined
 
   $: stateStore = listController.ctx.stateStore
 
   let isLoading = false
+  let optionsPopoverId = `${listId}-options-popover`
 
-  let opts = options
+  // let opts = options
 
   //turn object to array with key field and returns only visible
   function filterVisible(buttonOpts){
@@ -56,7 +60,8 @@
       if (_.isFunction(btnItem.action)) {
         await btnItem.action(btnItem, event)
       } else {
-        await listController.ctx.gridOptions.fireToolbarAction(btnItem, event)
+        // calls the listController fireToolbarAction, which will fallback to the ctx.toolbarHandler
+        await listController.fireToolbarAction(btnItem, event)
       }
     } finally {
       isLoading = false
@@ -100,14 +105,15 @@
       {/if}
     {/each}
 
+
     {#if title}
-    <div class="toolbar-title">{title}</div>
+    <div class="spacer"/>
+    <div class="toolbar-title text-gray-strong text-lg">{title}</div>
     {/if}
     <div class="spacer"/>
 
     <!-- <QuickFilter /> -->
-
-    <slot name="filter" />
+    <svelte:component this={QuickFilter} />
 
     <div class="toolbar-item p-0 quick-search-item">
       <div class="control has-icons-right has-icons-left">
@@ -126,13 +132,13 @@
       </div>
     </div>
 
-    {#if options.searchFormButton.class !== 'hidden' }
+    {#if opts.searchFormButton.class !== 'hidden' }
     <Button tooltip="Toggle search form" icon="manage_search" on:click={toggleShowSearch}/>
     {/if}
-    <Button popoverOpen=".list-options-popover" icon="more_vert" tooltip="Actions"/>
+    <Button popoverOpen={`#${optionsPopoverId}`} icon="more_vert" tooltip="Actions"/>
   </div>
 </header>
 
-<ListOptionsPopover {listController}/>
+<ListOptionsPopover popoverId={optionsPopoverId} {listController}/>
 
 
diff --git a/yakit/svelte/Formify/Formify.svelte b/yakit/svelte/Formify/Formify.svelte
index fe60e8820..84208d8fd 100644
--- a/yakit/svelte/Formify/Formify.svelte
+++ b/yakit/svelte/Formify/Formify.svelte
@@ -24,12 +24,22 @@
   export let state = undefined
   export let isSubmitting = undefined
   export let isModified = undefined
+  export let isModifying = undefined
+  export let isDisableSave = undefined
+
   /** The transformed schema */
-  export let transformedSchema = transformFields(schema)
+  export let transformedSchema = undefined
+  /** Function to call after transformFields to do any post processing */
+  export let onTransformedSchema = (_) => {}
 
   export let denseLayout = false
   export let cardLayout = true
 
+  /* Do the Schema tranformation */
+  transformedSchema = transformFields(schema)
+  //this gets run but for some reason select is not seeing it?
+  onTransformedSchema(transformedSchema)
+
   let className = undefined;
   export { className as class }
   $: formClasses = classNames(className, {
@@ -38,6 +48,14 @@
     'cardLayout': cardLayout
   })
 
+  $: tileWrapperClasses = classNames(
+    'card-content',
+    'formify-tile-wrapper',
+    {
+      'pt-1': ($$slots.header),
+    }
+  );
+
   className
   let isColLayout
   $: if(transformedSchema.columns){
@@ -59,14 +77,17 @@
 
   // $: disableSave = !($isModified) || $isSubmitting
   // TODO Need a way to disable submit but if isModified is used then wont allow until onBlur when its updated
-  $: disableSave = $isSubmitting
-
-
+  // $: {
+  //   disableSave = !($isModifying || $isModified)
+  //   if($isSubmitting) disableSave = true
+  // }
   $: if(formContext) {
     //state store
     state = formContext.state
     isSubmitting = formContext.isSubmitting
     isModified = formContext.isModified
+    isModifying = formContext.isModifying
+    isDisableSave = formContext.isDisableSave
   }
 </script>
 
@@ -80,14 +101,15 @@
     {#if !($$slots.footer)}
       <CardFooter>
         <Button7 onClick={onCancel}>Cancel</Button7>
-        <Button7 type=button disabled={disableSave} preloader loading={$isSubmitting} onClick={onSave}>Save</Button7>
+        <Button7 type=button disabled={$isDisableSave} preloader loading={$isSubmitting} onClick={onSave}>Save</Button7>
       </CardFooter>
     {/if}
     <slot name="footer" />
   {:else}
     <!-- Column Layout-->
     <Card class="m-0 bg-body-low search-card" >
-      <CardContent class="p0">
+      <slot name="header" />
+      <div class={tileWrapperClasses}>
         <div class="tile is-ancestor">
           {#each transformedSchema.columns as colCfg}
           <div class="tile is-parent fields-card">
@@ -105,11 +127,11 @@
           </div>
           {/each}
         </div>
-      </CardContent>
+      </div>
       {#if !($$slots.footer)}
         <CardFooter>
           <Button7 onClick={onCancel}>Cancel</Button7>
-          <Button7 type=button disabled={disableSave} preloader loading={$isSubmitting} onClick={onSave}>Save</Button7>
+          <Button7 type=button disabled={$isDisableSave} preloader loading={$isSubmitting} onClick={onSave}>Save</Button7>
         </CardFooter>
       {/if}
       <slot name="footer" />
diff --git a/yakit/svelte/Formify/FormifyField.svelte b/yakit/svelte/Formify/FormifyField.svelte
index d336438df..2035eb3ed 100644
--- a/yakit/svelte/Formify/FormifyField.svelte
+++ b/yakit/svelte/Formify/FormifyField.svelte
@@ -24,12 +24,10 @@
 
     if(data) selectOptions.itemData = data
     if(multiple) selectOptions.isMulti = true
-    console.log(`${name} multiple`, multiple)
 
     if(minimumInputLength || minSearchChars) {
       selectOptions.isEagerLoad = false
     }
-    console.log(`${name} selectOptions`, selectOptions)
     //merge in label
     selectOptions.label = opts.label
   }
diff --git a/yakit/svelte/Formify/ListChipInput.svelte b/yakit/svelte/Formify/ListChipInput.svelte
index 4e7358bcb..c0fd65722 100644
--- a/yakit/svelte/Formify/ListChipInput.svelte
+++ b/yakit/svelte/Formify/ListChipInput.svelte
@@ -6,7 +6,7 @@
   import ListInput  from './ListInput.svelte'
   import { classNames } from '../shared/utils';
   import { fieldDefaults } from '@yakit/core/transformer'
-
+  import { uniqueId } from '@yakit/core/dash'
   const dispatch = createEventDispatcher()
 
   /** name is the required key or object field path */
@@ -15,7 +15,6 @@
   export let placeholder = undefined
 
   export let opts = {}
-  Log.debug("Chip options", cloneDeep(opts))
   let selectOpts = omit(opts, 'input', 'key', 'label', 'name', 'type', 'validation')
   // fieldDefaults(name, opts)
   label = opts.label
@@ -65,7 +64,7 @@
   }
 
   // create unique id if not set
-  if (!id) id = _.uniqueId('chips')
+  if (!id) id = uniqueId('chips')
 
   _defaults(selectOpts, { Item, id, inputStyles, listOffset, noOptionsMessage, items, placeholder})
 
diff --git a/yakit/svelte/Formify/ListField.svelte b/yakit/svelte/Formify/ListField.svelte
index 4b8c537e4..f57953942 100644
--- a/yakit/svelte/Formify/ListField.svelte
+++ b/yakit/svelte/Formify/ListField.svelte
@@ -61,23 +61,17 @@
     'item-input-required': opts.required,
   })
 
-  const {form, updateValidateField, getValue, errors, formOpts} = getContext(ctxKey);
+  let isChanged = false
+
+  const formContext = getContext(ctxKey);
+  const {form, updateValidateField, getValue, formOpts} = formContext;
 
   if(!formOpts.showPlaceholders) listInputOpts['placeholder'] = ""
-  // listInputOpts.placeholder = "foo"
 
   export let value = null
 
   $: value = getValue($form, name)
 
-  $: errorMessage = get($errors, name) || ''
-
-  function handleChangeWrap(evt) {
-    console.log("handleChangeWrap evt", evt)
-    console.log("handleChangeWrap value", value)
-    // handleChange(evt)
-  }
-
   function handleChange(event) {
     const element = event.target;
     const field = element.name || element.id;
@@ -96,26 +90,15 @@
     handleChange(evt)
   }
 
-  let oldVal = value
-  let isChanged = false
   function onChange(evt) {
-    // console.log("onChange evt", evt)
-    // console.log("onChange value", value)
-    // console.log("onChange oldVal", oldVal)
     isChanged = true
-    // handleChange(evt)
   }
 
-  function onInput(evt) {
-    // console.log("onInput evt", evt)
-    // console.log("onInput value", value)
-    // handleChange(evt)
-  }
 </script>
 <!-- <ListInput {...$$props} -->
 
 <ListInput {...listInputOpts} {type} class={classes}
-  {onChange} {onBlur} {onInput} bind:value />
+  {onChange} {onBlur} bind:value />
 
 <!-- <input
   {name}
diff --git a/yakit/svelte/Formify/ListForm.svelte b/yakit/svelte/Formify/ListForm.svelte
index c5efe5958..26c02a569 100644
--- a/yakit/svelte/Formify/ListForm.svelte
+++ b/yakit/svelte/Formify/ListForm.svelte
@@ -74,19 +74,7 @@
   //add some of the options we might use in fields
   let {showPlaceholders} = opts
   setContext(ctxKey, {
-    form,
-    data: form,
-    errors,
-    touched,
-    state,
-    handleChange,
-    handleSubmit,
-    updateField,
-    updateInitialValues,
-    updateTouched,
-    updateValidateField,
-    validateField,
-    getValue,
+    ...formContext,
     formOpts: {showPlaceholders}
   });
 
diff --git a/yakit/svelte/Formify/ListInput.svelte b/yakit/svelte/Formify/ListInput.svelte
index 757efd82a..ad398d4bb 100644
--- a/yakit/svelte/Formify/ListInput.svelte
+++ b/yakit/svelte/Formify/ListInput.svelte
@@ -88,7 +88,8 @@
   let f7Calendar;
   let f7ColorPicker;
 
-  const {form, updateValidateField, getValue, errors, formOpts} = getContext(ctxKey);
+  const formContext = getContext(ctxKey);
+  const errors = formContext.errors
 
   export function calendarInstance() {
     return f7Calendar;
@@ -244,6 +245,7 @@
   function onInput(...args) {
     emit('input', [...args]);
 
+    formContext.isModifying.set(true)
     if (!(validateOnBlur || validateOnBlur === '') && (validate || validate === '') && inputEl) {
       validateInput(inputEl);
     }
@@ -269,7 +271,6 @@
 
   function onChange(...args) {
     emit('change', [...args]);
-
     if (type === 'texteditor') {
       emit('textEditorChange', [args[0]]);
       value = args[1];
@@ -285,7 +286,7 @@
       if (type === 'textarea' && resizable) {
         inputEl.addEventListener('textarea:resize', onTextareaResize, false);
       }
-      if (clearButton) {
+      if (clearButton && !disabled) {
         inputEl.addEventListener('input:empty', onInputEmpty, false);
         inputEl.addEventListener('input:clear', onInputClear, false);
       }
@@ -357,7 +358,7 @@
     if (type === 'textarea' && resizable) {
       inputEl.removeEventListener('textarea:resize', onTextareaResize, false);
     }
-    if (clearButton) {
+    if (clearButton && !disabled) {
       inputEl.removeEventListener('input:empty', onInputEmpty, false);
       inputEl.removeEventListener('input:clear', onInputClear, false);
     }
@@ -559,7 +560,7 @@
               <slot name="error-message" />
             </div>
           {/if}
-          {#if clearButton}<span class="input-clear-button" />{/if}
+          {#if clearButton && !disabled}<span class="input-clear-button" />{/if}
           {#if typeof info !== 'undefined' || hasInfoSlots}
             <div class="item-input-info">
               {plainText(info)}
@@ -761,7 +762,7 @@
             <slot name="error-message" />
           </div>
         {/if}
-        {#if clearButton}<span class="input-clear-button" />{/if}
+        {#if clearButton && !disabled}<span class="input-clear-button" />{/if}
         {#if typeof info !== 'undefined' || hasInfoSlots}
           <div class="item-input-info">
             {plainText(info)}
diff --git a/yakit/svelte/Formify/ListSelect.svelte b/yakit/svelte/Formify/ListSelect.svelte
index de76c4f87..7ec45f0a9 100644
--- a/yakit/svelte/Formify/ListSelect.svelte
+++ b/yakit/svelte/Formify/ListSelect.svelte
@@ -53,6 +53,9 @@
   /** will bind:this on this comp */
   export let selectEl = undefined
 
+  /** turns on and off loading indicator*/
+  export let isWaiting = false
+
   //assign itemData if not set in options
   _defaults(opts, { itemData })
 
@@ -86,6 +89,7 @@
   // reacte to listOpen to load items if they have not been yet.
   $: (async () => {
     if(listOpen) opts.items = await selectContext.loadItemsIfNeeded(listOpen)
+    isWaiting = false
   })(); //trick way to call svelte reactive for async
 
 
@@ -101,6 +105,7 @@
       await selectContext.loadItemsIfNeeded()
       //only set selectedItem, it will trigger the handleSelect to set the value
       selectedItem = selectContext.getSelectedItem(_val)
+      isWaiting = false
     }
   })
 
@@ -139,7 +144,8 @@
 
 <ListInput label={opts.label} {name} clearButton={false} input={false} class={className}>
   <div class="select-theme f7" slot="input">
-      <Select containerClasses="{className}" {...opts} value={selectedItem} bind:listOpen
+      <Select containerClasses="{className}" {...opts} value={selectedItem}
+        bind:listOpen bind:isWaiting
         on:select={handleSelect} on:clear={handleClear} bind:this={selectEl}/>
   </div>
 </ListInput>
diff --git a/yakit/svelte/Formify/problemHandler.js b/yakit/svelte/Formify/problemHandler.js
index 0a1297e44..e87312aa1 100644
--- a/yakit/svelte/Formify/problemHandler.js
+++ b/yakit/svelte/Formify/problemHandler.js
@@ -1,4 +1,5 @@
 
+import { isEmpty } from "@yakit/core/dash"
 import growl from "@yakit/ui/growl"
 
 /**
@@ -6,12 +7,26 @@ import growl from "@yakit/ui/growl"
  * FIXME this is tempory and we need a cleaner way to deal with them but this at least shows the problem
  */
 export async function handleError(er) {
+  let errMsg = er
+  if(er.response){
+    errMsg = await problemErrorFromResponse(er)
+    console.log("handleError",errMsg)
+  }
+  growl.error(errMsg.message, errMsg.name)
+}
+
+export async function problemErrorFromResponse(er) {
   let problem = await er.response.json()
   let messages = []
-  if(problem.errors){
+  console.log("handleError", problem)
+  if(!isEmpty(problem.errors)){
     messages = problem.errors.map(er => er.message)
   } else if(problem.detail) {
     messages.push(problem.detail)
   }
-  growl.error(messages.join('/n'), problem.title)
+  console.log("messages", messages)
+  return {
+    name: problem.title,
+    message: messages.join('/n')
+  }
 }
diff --git a/yakit/svelte/Select/Select.svelte b/yakit/svelte/Select/Select.svelte
index 6e0e61e77..c6ef65c41 100644
--- a/yakit/svelte/Select/Select.svelte
+++ b/yakit/svelte/Select/Select.svelte
@@ -4,7 +4,7 @@
   import Select from 'svelte-select'
   import ItemMulti from './ItemMulti.svelte'
   import ItemSingle from './ItemSingle.svelte'
-
+  import { uniqueId } from '@yakit/core/dash'
   import apiHolder from '@yakit/core/stores/apiHolder'
 
   const dispatch = createEventDispatcher()
@@ -95,7 +95,7 @@
   }
 
   // create unique id if not set
-  if (!id) id = _.uniqueId('select')
+  if (!id) id = uniqueId('select')
 
   let opts = {
     dataApi,
diff --git a/yakit/svelte/DataApiList/toolbar/TbButton.svelte b/yakit/svelte/Toolbar/TbButton.svelte
similarity index 61%
rename from yakit/svelte/DataApiList/toolbar/TbButton.svelte
rename to yakit/svelte/Toolbar/TbButton.svelte
index 15fe3a2c7..793a08ff3 100644
--- a/yakit/svelte/DataApiList/toolbar/TbButton.svelte
+++ b/yakit/svelte/Toolbar/TbButton.svelte
@@ -3,6 +3,7 @@
  -->
 <script>
   import {Button} from '@yakit/svelte/index'
+  import { makeLabel } from '@yakit/core/nameUtils'
 
   export let opts
 
@@ -11,12 +12,15 @@
   let isButton = true
 
   $: {
-    if (opts.label && !opts.display) {
-      opts.display = opts.label
-    }
+    // if (opts.label && !opts.display) {
+    //   opts.display = opts.label
+    // }
     if (opts.display && !opts.color) {
       opts.color = 'transparent'
     }
+    if(opts.tooltip === undefined) {
+      opts.tooltip = opts.label || makeLabel(opts.key)
+    }
 
     // if it has menu items then its a dropdown not a button
     if (opts.menuItems) {
@@ -28,7 +32,9 @@
 
 </script>
 {#if isButton }
-  <Button popoverOpen={popoverId} tooltip={opts.tooltip} icon={opts.icon} on:click/>
+  <Button color={opts.color} popoverOpen={popoverId} tooltip={opts.tooltip} icon={opts.icon} on:click>
+    {opts.display ? opts.display : ''}
+  </Button>
 {:else}
 <!-- TODO setup popups -->
   <Button popoverOpen={popoverId} tooltip={opts.tooltip} icon={opts.icon} on:click/>
diff --git a/yakit/svelte/f7-components.js b/yakit/svelte/f7-components.js
index 4c5225d49..8f8c13391 100644
--- a/yakit/svelte/f7-components.js
+++ b/yakit/svelte/f7-components.js
@@ -5,6 +5,11 @@ export { default as Page } from 'framework7-svelte/esm/svelte/page.svelte';
 export { default as PageContent } from 'framework7-svelte/esm/svelte/page-content.svelte';
 export { default as Navbar } from 'framework7-svelte/esm/svelte/navbar.svelte';
 
+export { default as AccordionContent } from 'framework7-svelte/esm/svelte/accordion-content.svelte';
+export { default as AccordionItem } from 'framework7-svelte/esm/svelte/accordion-item.svelte';
+export { default as AccordionToggle } from 'framework7-svelte/esm/svelte/accordion-toggle.svelte';
+export { default as Accordion } from 'framework7-svelte/esm/svelte/accordion.svelte';
+
 export { default as Block } from 'framework7-svelte/esm/svelte/block.svelte';
 export { default as BlockHeader } from 'framework7-svelte/esm/svelte/block-header.svelte';
 export { default as BlockFooter } from 'framework7-svelte/esm/svelte/block-footer.svelte';
@@ -40,7 +45,7 @@ export { default as TextEditor } from 'framework7-svelte/esm/svelte/text-editor.
 export { default as Preloader } from 'framework7-svelte/esm/svelte/preloader.svelte';
 export { default as UseIcon } from 'framework7-svelte/esm/svelte/use-icon.svelte';
 
-export { default as Segmented } from 'framework7-svelte/esm/svelte/segmented.svelte';
+// export { default as Segmented } from 'framework7-svelte/esm/svelte/segmented.svelte';
 
 // export { default as Row } from 'framework7-svelte/esm/svelte/row.svelte';
 // export { default as Col } from 'framework7-svelte/esm/svelte/col.svelte';
diff --git a/yakit/svelte/framework7.js b/yakit/svelte/framework7.js
index bb10fff22..5044495d1 100644
--- a/yakit/svelte/framework7.js
+++ b/yakit/svelte/framework7.js
@@ -16,6 +16,8 @@ const f7params = {
   // App id
   id: 'yak.works',
   theme: 'aurora',
+  router: false,
+  routes:false,
   init: true,
   popup: {
     closeOnEscape: true,
@@ -29,6 +31,10 @@ const f7params = {
   actions: {
     closeOnEscape: true,
   },
+  clicks: {
+    // bypass the f7 click interceptor
+    externalLinks: '.nav'
+  }
   // ...
 };
 
diff --git a/yakit/svelte/index.js b/yakit/svelte/index.js
index d7ea96cf1..bd68913c7 100644
--- a/yakit/svelte/index.js
+++ b/yakit/svelte/index.js
@@ -1,6 +1,7 @@
 export { default as Avatar } from './Avatar.svelte';
-export { default as Button } from './Button.svelte';
-export { default as Button7 } from './Button7.svelte';
+
+export * from './Buttons';
+
 export { default as Col } from './Col.svelte';
 export { default as Columns } from './Columns.svelte';
 export { default as Row } from './Columns.svelte';
diff --git a/yakit/ui/icon.js b/yakit/ui/icon.js
index 268f78a32..87d009896 100644
--- a/yakit/ui/icon.js
+++ b/yakit/ui/icon.js
@@ -9,6 +9,6 @@ export function getIconClass(name) {
   if (!name) return
   if (name.startsWith('fa-')) return `fas ${name}`
   if (name.startsWith('mdi-')) return `mdi ${name}`
-  if (!name.startsWith('mdi') && !name.startsWith('fa') ) return 'material-icons-two-tone'
+  if (!name.startsWith('mdi-') && !name.startsWith('fa-') ) return 'material-icons-two-tone'
   return name
 }
diff --git a/yakit/ui/select/selectContext.js b/yakit/ui/select/selectContext.js
index 0b9a89763..06377c6ee 100644
--- a/yakit/ui/select/selectContext.js
+++ b/yakit/ui/select/selectContext.js
@@ -59,16 +59,13 @@ export const selectContext = (opts) => {
 
       //if minimumInputLength then will query on demand
       if(isEagerLoad) {
-        // console.log("setup data func for rest api")
         //if minimumInputLength is not set then load the whole dataset
         opts.data = () => {
           return obj.getDataFromApi({opts, dataApi, dataApiConfig}) //get all of it.
         }
       }
       else {
-        console.log("is not isEagerLoad so using loadOptions", isEagerLoad)
         opts.loadOptions = async (filterText) => {
-          console.log("loadOptions filterText", filterText)
           if (!(filterText.length >= minSearchChars)) return
           let qSearch = filterText
           let qExtra = dataApiConfig.q
@@ -85,7 +82,6 @@ export const selectContext = (opts) => {
       if (Array.isArray(itemData)) {
         // translateItemsIfNeeded makes ['red','green'] into [{id:'red',name'red}, etc...]
         opts.data = obj.translateItemsIfNeeded(itemData)
-        // console.log("translated item data", opts.data)
       }
     }
 
@@ -121,7 +117,6 @@ export const selectContext = (opts) => {
 
     if (Array.isArray(opts.propertyLabel)) {
       const lastItem = opts.propertyLabel[opts.propertyLabel.length - 1]
-      console.log("itm[lastItem]", itm[lastItem])
       return itm[lastItem]
     } else {
       return itm[opts.propertyLabel];
@@ -175,10 +170,8 @@ export const selectContext = (opts) => {
   obj.loadItemsIfNeeded = async (_) => {
     if(!opts.isEagerLoad) return
     if(!opts.items && !opts.isWaiting) {
-      console.log("first call to load data")
       opts.isWaiting = true
       opts.items = await opts.data()
-      console.log("loaded items", opts.items)
       opts.isWaiting = false
     }
     return opts.items
@@ -192,13 +185,11 @@ export const selectContext = (opts) => {
     if(opts.isValueObject) {
       return value
     } else {
-      console.log("getSelectedItem findItemByKey opts.isEagerLoad", opts.isEagerLoad)
       return obj.getSelectedValue(value, obj.findItemByKey)
     }
   }
 
   function getSelectedValue(item, finderFunc) {
-    // console.log("getSelectedValue", item, finderFunc)
     //finder function to use
     if(!finderFunc) finderFunc = isValueObject ? findItem : getItemKey
     let val
@@ -206,7 +197,6 @@ export const selectContext = (opts) => {
       val = item.map((selection) => finderFunc(selection));
       // keyVal = item.map( selection => getItemKey(selection))
     } else {
-      console.log("getSelectedValue", item)
       val = finderFunc(item)
     }
     return val
@@ -220,7 +210,6 @@ export const selectContext = (opts) => {
    * @returns
    */
   function findItem(selection) {
-    console.log("findItem", selection)
     return findItemByKey(getItemKey(selection)) || selection
   }
 
@@ -231,7 +220,6 @@ export const selectContext = (opts) => {
    * @returns the found object
    */
   function findItemByKey(key) {
-    console.log("findItemByKey", key)
     if(!opts.items) return undefined
     return opts.items.find((item) => getItemKey(item) === key)
   }