diff --git a/package.json b/package.json
index dc781c0f..bb6fe42e 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "Julien Martin"
   ],
   "license": "MIT",
-  "version": "1.64.0",
+  "version": "1.66.0",
   "main": "lib/vac.common.js",
   "module": "src/index.js",
   "files": [
diff --git a/src/components/crud/AwesomeCrud.vue b/src/components/crud/AwesomeCrud.vue
index 7c51f5dc..55b7db0f 100644
--- a/src/components/crud/AwesomeCrud.vue
+++ b/src/components/crud/AwesomeCrud.vue
@@ -22,8 +22,8 @@
           <AwesomeTable
             v-if="
               !_isANestedDetailView &&
-              (displayMode === 'table' || (_displayModeHasPartialDisplay && listingDisplayMode === 'table')) &&
-              dataPaginationModeComputed
+                (displayMode === 'table' || (_displayModeHasPartialDisplay && listingDisplayMode === 'table')) &&
+                dataPaginationModeComputed
             "
             ref="awesomeTable"
             v-bind="$props"
@@ -50,6 +50,7 @@
             :options="mergedOptions"
             :saveColumnsState="saveColumnsState"
             :savePaginationState="savePaginationState"
+            :searchInputValue="searchInputValue"
             :segment="segment"
             :segmentField="segmentField"
             :title="_listingComponentTitle"
@@ -152,7 +153,7 @@
           <AwesomeList
             v-if="
               !_isANestedDetailView &&
-              (displayMode === 'list' || (_displayModeHasPartialDisplay && listingDisplayMode === 'list'))
+                (displayMode === 'list' || (_displayModeHasPartialDisplay && listingDisplayMode === 'list'))
             "
             ref="awesomeList"
             v-bind="listOptions"
@@ -178,6 +179,7 @@
             :nested-crud-needs-refresh.sync="nestedCrudNeedsRefresh"
             :options="mergedOptions"
             :perPage="listOptions && listOptions.perPage ? listOptions.perPage : 20"
+            :searchInputValue="searchInputValue"
             :segment="segment"
             :segmentField="segmentField"
             :styles="{
@@ -288,7 +290,7 @@
           <AwesomeKanban
             v-if="
               !_isANestedDetailView &&
-              (displayMode === 'kanban' || (_displayModeHasPartialDisplay && listingDisplayMode === 'kanban'))
+                (displayMode === 'kanban' || (_displayModeHasPartialDisplay && listingDisplayMode === 'kanban'))
             "
             ref="awesomeKanban"
             v-bind="_kanbanOptions"
@@ -309,6 +311,7 @@
             :options="_kanbanOptions.options"
             :splittingField="_kanbanOptions.splittingField"
             :splittingValues="_splittingValuesComputed"
+            :searchInputValue="searchInputValue"
             :segment="segment"
             :segmentField="segmentField"
             :title="_listingComponentTitle"
@@ -327,6 +330,7 @@
             @before-refresh="before_refresh"
             @afterRefresh="afterRefresh"
             @after-refresh="after_refresh"
+            @addButtonPressed="onKanbanlistAddButtonPressed"
           >
             <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"
               ><slot :name="slot" v-bind="scope"
@@ -441,6 +445,7 @@
             :layout="viewPageLayoutComputed"
             :mode="displayMode"
             :model="_model"
+            :nestedModels="_model.nestedModels"
             :needs-refresh.sync="awesomeEditNeedsRefresh"
             :nested-crud-needs-refresh.sync="nestedCrudNeedsRefresh"
             :parent="parent"
@@ -629,13 +634,15 @@ export default {
       type: Object,
       required: false,
       default: undefined,
-      note: 'The object that will be used for managing the component. it contains the schema along with some other options. If no provided i can be reconstructed if we have the schema prop.'
+      note:
+        'The object that will be used for managing the component. it contains the schema along with some other options. If no provided i can be reconstructed if we have the schema prop.'
     },
     schema: {
       type: Object,
       required: false,
       default: undefined,
-      note: 'The json schema that represent the object to display. this is used to create. Must be provided if no model definition is available'
+      note:
+        'The json schema that represent the object to display. this is used to create. Must be provided if no model definition is available'
     },
     layout: {
       type: [Object, Array],
@@ -704,14 +711,16 @@ export default {
       type: String,
       required: false,
       values: ['view', 'edit', 'object', 'table'],
-      note: 'In case of a nested schema, this parameter determines whether the component should be rendered as a list or a form. Exemple a list of posts with a comments as a nested should display a table, whereas the author info should display as an object...'
+      note:
+        'In case of a nested schema, this parameter determines whether the component should be rendered as a list or a form. Exemple a list of posts with a comments as a nested should display a table, whereas the author info should display as an object...'
     },
     nestedLayoutMode: {
       type: String,
       required: false,
       default: 'horizontal-tabs',
       values: ['horizontal-tabs', 'vertical-tabs', 'list'],
-      note: 'In case of a nested schema, this parameter determines how the nested the models should be rendered. Exemple a list of posts with a comments as a nested should display a table, whereas the author info should display as an object...'
+      note:
+        'In case of a nested schema, this parameter determines how the nested the models should be rendered. Exemple a list of posts with a comments as a nested should display a table, whereas the author info should display as an object...'
     },
     parent: {
       type: Object,
@@ -872,7 +881,7 @@ export default {
       default: 'remote'
     }
   },
-  data() {
+  data () {
     return {
       parentPath: '',
       selectedItem: {},
@@ -898,7 +907,7 @@ export default {
     };
   },
   computed: {
-    _title() {
+    _title () {
       // @deprecated
       if (this._model && this._model.pageTitle) {
         return this.$te(this._model.pageTitle) ? this.$t(this._model.pageTitle) : this._model.pageTitle;
@@ -925,7 +934,7 @@ export default {
       return '';
     },
 
-    _listingComponentTitle() {
+    _listingComponentTitle () {
       if (this.title === false) {
         return false;
       }
@@ -936,7 +945,7 @@ export default {
       return this.$t('AwesomeCrud.labels.manageTitle') + ' ' + this._namePlural;
     },
 
-    _name() {
+    _name () {
       if (this._model && this._model.name) {
         return this.$te(this._model.name) ? this.$t(this._model.name) : this._model.name;
       }
@@ -952,7 +961,7 @@ export default {
       return '';
     },
 
-    _namePlural() {
+    _namePlural () {
       if (this._model && this._model.namePlural) {
         return this.$te(this._model.namePlural) ? this.$t(this._model.namePlural) : startCase(this._model.namePlural);
       }
@@ -969,18 +978,18 @@ export default {
       return '';
     },
 
-    _model() {
+    _model () {
       return this.model || this.getModelFromStore(this.identity);
     },
 
     // _url() see apiConfigMixin
     // _selectedItemUrl() see apiConfigMixin
 
-    schemaComputed() {
+    schemaComputed () {
       return this.schema || (this._model && this._model.schema);
     },
 
-    formSchema() {
+    formSchema () {
       if (!this.schemaComputed) {
         return [];
       }
@@ -988,7 +997,7 @@ export default {
       return parsedFormSchema;
     },
 
-    listFieldsComputed() {
+    listFieldsComputed () {
       const allColumns = this.allColumnsComputed;
       let columns = [];
       if (this.listOptions && Array.isArray(this.listOptions.fields)) {
@@ -1002,7 +1011,7 @@ export default {
       return allColumns;
     },
 
-    kanbanFieldsComputed() {
+    kanbanFieldsComputed () {
       const allColumns = this.allColumnsComputed;
       let columns = [];
       // If we provided an array of fields to display
@@ -1016,7 +1025,7 @@ export default {
       return allColumns;
     },
 
-    allColumnsComputed() {
+    allColumnsComputed () {
       if (!this.schemaComputed) {
         return [];
       }
@@ -1027,39 +1036,39 @@ export default {
       return sortBy(columns, ['field', 'order']);
     },
 
-    tableColumnsComputed() {
+    tableColumnsComputed () {
       if (!this.schemaComputed) {
         return [];
       }
       return this.parseColumns(this.schemaComputed.properties);
     },
 
-    _layout() {
+    _layout () {
       return this.detailPageLayout || (this._model && this._model.formOptions && this._model.formOptions.layout);
     },
-    _createFormLayout() {
+    _createFormLayout () {
       return (this._model && this._model.formOptions && this._model.formOptions.createLayout) || this._layout;
     },
 
-    _editFormLayout() {
+    _editFormLayout () {
       return (this._model && this._model.formOptions && this.model.editLayout) || this._layout;
     },
 
-    createPageLayoutComputed() {
+    createPageLayoutComputed () {
       return (
         this.createPageLayout ||
         (this._model && this._model.formOptions && this._model.formOptions.createLayout) ||
         this._layout
       );
     },
-    viewPageLayoutComputed() {
+    viewPageLayoutComputed () {
       return (
         this.viewPageLayout ||
         (this._model && this._model.formOptions && this._model.formOptions.viewPageLayout) ||
         this._layout
       );
     },
-    editPageLayoutComputed() {
+    editPageLayoutComputed () {
       return (
         this.editPageLayout ||
         (this._model && this._model.formOptions && this._model.formOptions.editPageLayout) ||
@@ -1067,7 +1076,7 @@ export default {
       );
     },
 
-    _actions() {
+    _actions () {
       const actions = cloneDeep(this._actionsBeforeCalculation);
 
       Object.entries(actions).forEach(([field, fieldData]) => {
@@ -1078,7 +1087,7 @@ export default {
       return actions;
     },
 
-    _actionsBeforeCalculation() {
+    _actionsBeforeCalculation () {
       return merge(
         {},
         defaultActions,
@@ -1086,7 +1095,7 @@ export default {
       );
     },
 
-    _customFormTopActions() {
+    _customFormTopActions () {
       return merge(
         [],
         (this.customFormTopActions.length && this.customFormTopActions) ||
@@ -1094,7 +1103,7 @@ export default {
       );
     },
 
-    _customInlineActions() {
+    _customInlineActions () {
       return merge(
         [],
         (this.customInlineActions.length && this.customInlineActions) ||
@@ -1102,7 +1111,7 @@ export default {
       );
     },
 
-    _customTopRightActions() {
+    _customTopRightActions () {
       return merge(
         [],
         (this.customTopRightActions.length && this.customTopRightActions) ||
@@ -1110,7 +1119,7 @@ export default {
       );
     },
 
-    _customTableTopActions() {
+    _customTableTopActions () {
       return merge(
         [],
         (this.customTableTopActions.length && this.customTableTopActions) ||
@@ -1118,11 +1127,11 @@ export default {
       );
     },
 
-    _customTitleBarActions() {
+    _customTitleBarActions () {
       return merge([], this.customTitleBarActions.length && this.customTitleBarActions);
     },
 
-    _customBulkActions() {
+    _customBulkActions () {
       return merge(
         [],
         (this.customBulkActions.length && this.customBulkActions) ||
@@ -1130,7 +1139,7 @@ export default {
       );
     },
 
-    _displayModeHasPartialDisplay() {
+    _displayModeHasPartialDisplay () {
       return (
         [
           'modal',
@@ -1145,7 +1154,7 @@ export default {
       );
     },
 
-    _kanbanOptions() {
+    _kanbanOptions () {
       const merged = merge({}, defaultKanbanOptions, this._model && this._model.kanbanOptions, this.kanbanOptions);
       if (merged.splittingField && (!merged.splittingValues || !merged.splittingValues.length)) {
         if (this.tableColumnsComputed) {
@@ -1168,14 +1177,14 @@ export default {
       return merged;
     },
 
-    canShowCreateButton() {
+    canShowCreateButton () {
       return (
         this._actions.create &&
         !(['view', 'edit', 'create'].indexOf(this.displayMode) > -1 && this._detailPageMode === 'page')
       );
     },
 
-    showEditFormComputed() {
+    showEditFormComputed () {
       return (
         this.identity &&
         (this.displayMode === 'edit' ||
@@ -1185,15 +1194,15 @@ export default {
       );
     },
 
-    showViewFormComputed() {
+    showViewFormComputed () {
       return this.identity && this.displayMode === 'view';
     },
 
-    showItemsListSectionComputed() {
+    showItemsListSectionComputed () {
       return this.supportedListingDisplayModes.indexOf(this.displayMode) > -1 || this._detailPageMode !== 'page';
     },
 
-    currentItemIndex() {
+    currentItemIndex () {
       return (
         this.itemsList &&
         this.selectedItem &&
@@ -1201,19 +1210,19 @@ export default {
       );
     },
 
-    hasPrevious() {
+    hasPrevious () {
       return this.currentItemIndex > -1 && !!this.itemsList[this.currentItemIndex - 1];
     },
 
-    hasNext() {
+    hasNext () {
       return this.currentItemIndex > -1 && !!this.itemsList[this.currentItemIndex + 1];
     },
 
-    dataPaginationModeComputed() {
+    dataPaginationModeComputed () {
       return this.dataPaginationMode || this.mergedOptions.dataPaginationMode || this.mergedOptions.mode;
     },
 
-    segmentFieldDefinitionComputed() {
+    segmentFieldDefinitionComputed () {
       if (!this.segmentField) {
         return '';
       }
@@ -1233,7 +1242,7 @@ export default {
       return '';
     },
 
-    segmentFieldPossibleValues() {
+    segmentFieldPossibleValues () {
       const field = this.segmentFieldDefinitionComputed;
       if (!field) {
         return [];
@@ -1246,33 +1255,33 @@ export default {
       return Array.isArray(values) ? values : [];
     },
 
-    showStatsSectionComputed() {
+    showStatsSectionComputed () {
       return this.showItemsListSectionComputed && this.mergedOptions.stats;
     },
 
-    isDetailPageModeCpt() {
+    isDetailPageModeCpt () {
       return this.displayMode === 'create' || this.displayMode === 'view' || this.displayMode === 'edit';
     },
 
-    displaySideFormContent() {
+    displaySideFormContent () {
       return this._detailPageMode === 'sideform' && this.isDetailPageModeCpt;
     },
 
-    displayBottomFormContent() {
+    displayBottomFormContent () {
       return this._detailPageMode === 'bottomform';
     },
 
-    _detailPageMode() {
+    _detailPageMode () {
       return this.detailPageMode || this.mergedOptions.detailPageMode;
     },
 
-    detailPageModeCpt() {
+    detailPageModeCpt () {
       return this._detailPageMode === 'sideform' || this._detailPageMode === 'bottomform'
         ? 'page'
         : this._detailPageMode;
     },
 
-    shouldShowCreateButtonCpt() {
+    shouldShowCreateButtonCpt () {
       return (
         this.canShowCreateButton &&
         !this._isANestedDetailView &&
@@ -1282,7 +1291,7 @@ export default {
     },
 
     mergedOptions: {
-      get() {
+      get () {
         let options = merge({}, defaultOptions, this._model && this._model.options, this.options, this.internalOptions);
         if (this.$route && this.$route.query && this.$route.query.filters) {
           options.queryParams = merge(
@@ -1293,18 +1302,18 @@ export default {
         }
         return options;
       },
-      set(data) {
+      set (data) {
         this.internalOptions = data;
       }
     },
 
-    _splittingValuesComputed() {
+    _splittingValuesComputed () {
       return this._kanbanOptions.splittingValues && this._kanbanOptions.splittingValues.length
         ? this._kanbanOptions.splittingValues
         : this.segmentFieldPossibleValues;
     },
 
-    importButtonConfig() {
+    importButtonConfig () {
       return {
         upload: true,
         targetUrl: `${this._url}/import`,
@@ -1316,11 +1325,14 @@ export default {
       };
     },
 
-    formOptionsComputed() {
+    formOptionsComputed () {
       return {
         ...this.$props,
         ...this.formOptions
       };
+    },
+    searchInputValue () {
+      return this.useRouterMode ? this.$route.query.search : '';
     }
   },
   watch: {
@@ -1334,10 +1346,10 @@ export default {
     displayMode: 'onDisplayModeChanged',
     listingDisplayMode: 'onlistingDisplayModeChanged'
   },
-  created() {
+  created () {
     this.setDisplayMode = debounce(this.setDisplayModeFresh, 500, { leading: true });
   },
-  mounted() {
+  mounted () {
     // allow old property names to still work
     if (!this.identity) {
       throw new Error('missing_required_props_identity');
@@ -1360,7 +1372,7 @@ export default {
       this.displayMode = this.mergedOptions.initialDisplayMode;
     }
     this.listingDisplayMode = this.mergedOptions.initialDisplayMode;
-    this.restoreComponentState();
+    // this.restoreComponentState();
     if (this._isNested && this.nestedDisplayMode) {
       this.displayMode = this.nestedDisplayMode;
     }
@@ -1382,20 +1394,24 @@ export default {
     }
 
     this.parentPath = this.$route.path;
-    this.parentPath = this.parentPath.replace('/view', '').replace('/edit', '').replace('/new', '').replace('/:id', '');
+    this.parentPath = this.parentPath
+      .replace('/view', '')
+      .replace('/edit', '')
+      .replace('/new', '')
+      .replace('/:id', '');
 
     this.$forceUpdate();
     // const matched = this.$route.matched[this.$route.matched.length - 1];
     this.initializeSelectedItem();
   },
-  beforeRouteEnter(to, from, next) {
+  beforeRouteEnter (to, from, next) {
     // eslint-disable-next-line
     next((vm) => {});
   },
-  beforeRouteLeave(to, from, next) {
+  beforeRouteLeave (to, from, next) {
     next((vm) => {});
   },
-  beforeRouteUpdate(to, from, next) {
+  beforeRouteUpdate (to, from, next) {
     // if we are on the same component and coming from a detail list
     if (this.useRouterMode && from.params.id && !to.params.id) {
       //this.onViewDisplayCancelled();
@@ -1406,14 +1422,14 @@ export default {
     next();
   },
 
-  beforeDestroy() {
+  beforeDestroy () {
     this.$awEventBus && this.$awEventBus.$off('aw-table-needs-refresh');
     this.scrollTarget.removeEventListener('scroll', this.handleScroll);
   },
 
   methods: {
     $alert: Swal,
-    refreshComponent(newVal, preVal) {
+    refreshComponent (newVal, preVal) {
       if (!newVal || newVal === false || newVal === preVal) {
         return;
       }
@@ -1444,13 +1460,13 @@ export default {
       }, 100);
     },
 
-    onTableRefresh() {
+    onTableRefresh () {
       this.statsNeedsRefresh = true;
     },
 
-    callbackFunctionForBAse64(e) {},
+    callbackFunctionForBAse64 (e) {},
 
-    importFailedResponse(err) {
+    importFailedResponse (err) {
       Swal.fire({
         title: this.$t('common.messages.not_imported', {
           title: this._name
@@ -1460,7 +1476,7 @@ export default {
       });
     },
 
-    importResponse(e) {
+    importResponse (e) {
       // swal({title: this.$t('common.messages.successfullyImported',{title: this.name}), type: 'success'})
       if ((!e.improperData || e.improperData.length === 0) && (!e.properData || e.properData.length === 0)) {
         Swal.fire({
@@ -1504,7 +1520,7 @@ export default {
       this.$forceUpdate();
     },
 
-    exportTemplateCallBack() {
+    exportTemplateCallBack () {
       if (!this.mergedOptions.importUrl) {
         this.$awNotify({ title: '[WARN] missing export template url', type: 'warning' });
         return;
@@ -1523,7 +1539,7 @@ export default {
         .catch(this.apiErrorCallback);
     },
 
-    loadModel() {
+    loadModel () {
       if (!this._model && !this.schema) {
         console.warn('AWESOME CRUD ERROR', `model ${this.identity} not found`);
         return;
@@ -1570,7 +1586,7 @@ export default {
           }
         });
       }
-      this.restoreComponentState();
+      // this.restoreComponentState();
       if (!this._url) {
         return;
       }
@@ -1615,14 +1631,14 @@ export default {
       }
     },
 
-    setDisplayMode() {},
+    setDisplayMode () {},
     /** @param mode: string */
-    setDisplayModeFresh(mode, item, options = { refresh: true }) {
+    setDisplayModeFresh (mode, item, options = { refresh: true }) {
       if (
         mode === this.displayMode &&
         (!item ||
           item === this.selectedItem ||
-          item[this.primaryKeyFieldCpt] === this.selectedItem[this.primaryKeyFieldCpt])
+          `${item[this.primaryKeyFieldCpt]}` === `${this.selectedItem[this.primaryKeyFieldCpt]}`)
         // !(options && options.refresh)
       ) {
         console.warn('warning duplicate setDisplayMode called');
@@ -1659,7 +1675,7 @@ export default {
       }
     },
 
-    goToCreatePage(options = { reset: true, editLayoutMode: false }) {
+    goToCreatePage (options = { reset: true, editLayoutMode: false }) {
       if (this.mergedOptions.createPath) {
         if (this.mergedOptions.createPath.includes('{{') && this.mergedOptions.createPath.includes('}}')) {
           return this.$router.push(this.parseUrl(this.mergedOptions.createPath));
@@ -1686,14 +1702,14 @@ export default {
       return;
     },
 
-    goToBulkEditPage(items, options = { reset: true }) {
+    goToBulkEditPage (items, options = { reset: true }) {
       if (this.mergedOptions.bulkEditPath) {
         return this.$router.push(this.mergedOptions.bulkEditPath);
       }
       this.setDisplayMode('bulkEdit', items);
     },
 
-    goToDeletePage(item) {
+    goToDeletePage (item) {
       if (this.mergedOptions.createPath) {
         return this.$router.push(
           this.mergedOptions.deletePath
@@ -1706,11 +1722,11 @@ export default {
       return;
     },
 
-    goToBulkDeletePage(items) {
+    goToBulkDeletePage (items) {
       this.bulkDeleteFunction(items);
     },
 
-    goToEditPage(item, event) {
+    goToEditPage (item, event) {
       if (this.mergedOptions.editPath) {
         if (this.mergedOptions.editPath.includes(':id') && item && item[this.primaryKeyFieldCpt]) {
           return this.$router.push(this.mergedOptions.editPath.replace(':id', item[this.primaryKeyFieldCpt]));
@@ -1731,7 +1747,7 @@ export default {
       this.setDisplayMode('edit', item, event);
     },
 
-    goToViewPage(item, event) {
+    goToViewPage (item, event) {
       if (!item) {
         return;
       }
@@ -1753,7 +1769,7 @@ export default {
       }
     },
 
-    getViewPageUrl(item, event) {
+    getViewPageUrl (item, event) {
       if (!item) {
         return '';
       }
@@ -1778,7 +1794,7 @@ export default {
       return;
     },
 
-    nestedViewFunction() {
+    nestedViewFunction () {
       this.displayMode = 'view';
       this.$awApi
         .get(`${this._url}`)
@@ -1795,7 +1811,7 @@ export default {
         });
     },
 
-    bulkEditFunction(item) {
+    bulkEditFunction (item) {
       this.$awApi
         .put(`${this._url}/${item[this.primaryKeyFieldCpt]}`, item)
         .then((res) => {
@@ -1816,7 +1832,7 @@ export default {
         });
     },
 
-    bulkDeleteFunction(items) {
+    bulkDeleteFunction (items) {
       Swal.fire({
         title: this.$t('AwesomeDefault.messages.are_you_sure'),
         text: this.$t('AwesomeDefault.messages.wont_be_able_recover'),
@@ -1853,7 +1869,7 @@ export default {
         .finally(() => (this.selectedItem = null));
     },
 
-    deleteFunction(item) {
+    deleteFunction (item) {
       this.selectedItem = item;
       Swal.fire({
         title: this.$t('AwesomeDefault.messages.are_you_sure'),
@@ -1895,26 +1911,26 @@ export default {
         .finally(() => (this.selectedItem = null));
     },
 
-    onCustomBulkAction(body) {
+    onCustomBulkAction (body) {
       const { action } = body;
       this.$emit(this.identity + '-custom-bulk-action', action);
       return action && action.action && action.action(body, this);
     },
 
-    onCustomListAction(body) {
+    onCustomListAction (body) {
       const { action } = body;
       this.$emit(this.identity + '-custom-list-action', action);
       return action && action.action && action.action(body, this);
     },
 
-    onRemoveList(body) {},
+    onRemoveList (body) {},
 
-    onListChanged(item) {},
+    onListChanged (item) {},
 
-    onCardChanged(item, list) {},
-    onCardAdded({ element, newIndex }, list) {},
+    onCardChanged (item, list) {},
+    onCardAdded ({ element, newIndex }, list) {},
 
-    onCardClicked(item, $event) {
+    onCardClicked (item, $event) {
       this.$emit('on-kanban-item-clicked', item, $event);
       if (this.getViewPageUrl && this.getViewPageUrl(item)) {
         return;
@@ -1926,7 +1942,7 @@ export default {
      * @param item object
      * @param options = {context = create | edit }
      */
-    onEditDisplayCancelled(item, { context }) {
+    onEditDisplayCancelled (item, { context }) {
       const previousDisplayMode = this.getPreviousDisplayMode(context);
       if (this.useRouterMode) {
         if (previousDisplayMode === 'view' && item && item[this.primaryKeyFieldCpt]) {
@@ -1937,8 +1953,11 @@ export default {
           let url = this.parentPath
             .replace('/edit', '')
             .replace('/view', '')
-            .replace('/:id', '')
-            .replace(`${item ? item[this.primaryKeyFieldCpt] : ''}`, '');
+            .replace('/:id', '');
+          // @fixme bug when using nested paths
+          if (item && item[this.primaryKeyFieldCpt]) {
+            url = url.replace(`/${item[this.primaryKeyFieldCpt]}`, '');
+          }
 
           this.$router.push(url);
         }
@@ -1947,7 +1966,7 @@ export default {
       this.setDisplayMode(previousDisplayMode, item, { refresh: false });
     },
 
-    onViewDisplayCancelled(item) {
+    onViewDisplayCancelled (item) {
       if (this.useRouterMode) {
         let url = this.parentPath
           .replace('/edit', '')
@@ -1963,38 +1982,38 @@ export default {
       this.setDisplayMode(previousDisplayMode, item, { refresh: false });
     },
 
-    onItemsBulkEdited(item) {
+    onItemsBulkEdited (item) {
       this.bulkEditFunction(item);
     },
 
-    onItemCreated(item) {
+    onItemCreated (item) {
       this.$awEmit('aw-table-needs-refresh');
       //   this.setDisplayMode(this.mergedOptions.initialDisplayMode, item);
     },
 
-    onItemEdited(...args) {
+    onItemEdited (...args) {
       // eslint-disable-next-line
       this.$awEmit('aw-table-needs-refresh');
     },
-    onItemDeleted(...args) {
+    onItemDeleted (...args) {
       // eslint-disable-next-line
     },
-    onItemViewed(...args) {
+    onItemViewed (...args) {
       // eslint-disable-next-line
     },
-    onItemValidated(...args) {
+    onItemValidated (...args) {
       // eslint-disable-next-line
     },
-    onItemValidationFailed(...args) {
+    onItemValidationFailed (...args) {
       // eslint-disable-next-line
     },
 
-    onListUpdated(datas) {
+    onListUpdated (datas) {
       this.$emit('list-updated', datas);
       this.$emit(this.identity + '-list-updated', datas);
     },
 
-    onTableRowClicked(props, $event) {
+    onTableRowClicked (props, $event) {
       const { column, row, event } = props; // rowIndex and event are also available
       if (column && (['url', 'relation', 'ACTIONS'].indexOf(column.type) > -1 || column.field === '__ACTIONS')) {
         return;
@@ -2004,7 +2023,7 @@ export default {
       this.listItemClickedHandler(row, event || $event);
     },
 
-    onTableRowDoubleClicked(props, $event) {
+    onTableRowDoubleClicked (props, $event) {
       const { column, row, event } = props; // rowIndex and event are also available
       if (column && (['url', 'relation', 'ACTIONS'].indexOf(column.type) > -1 || column.field === '__ACTIONS')) {
         return;
@@ -2014,46 +2033,46 @@ export default {
       this.listItemDoubleClickedHandler(row, event || $event);
     },
 
-    onDataChanged(items) {
+    onDataChanged (items) {
       if (process.env.NODE_ENV === 'development') {
         //  console.log('onDataChanged', items);
       }
       this.itemsList = items.data;
     },
 
-    updateAutoRefresh(value) {
+    updateAutoRefresh (value) {
       this.mergedOptions.autoRefresh = value;
     },
 
-    onListItemClicked(item, event) {
+    onListItemClicked (item, event) {
       // this._actions && this._actions.view && this.$emit("view", row);
       this.$emit('on-list-item-clicked', item);
       this.listItemClickedHandler(item, event);
     },
 
     // @deprecated use directly $awConfirm
-    confirm(message) {
+    confirm (message) {
       console.warn('confirm method is @deprecated => use $awConfirm');
       return this.$awConfirm(message);
     },
 
-    onLayoutUpdated(items) {
+    onLayoutUpdated (items) {
       this.$emit('layout-updated', items);
     },
 
-    onLayoutFieldsUpdated(items) {
+    onLayoutFieldsUpdated (items) {
       this.$emit('layout-fields-updated', items);
     },
 
-    onOpenEditLayoutMode() {
+    onOpenEditLayoutMode () {
       this.editLayoutMode = true;
     },
 
-    onCloseEditLayoutMode() {
+    onCloseEditLayoutMode () {
       this.editLayoutMode = false;
     },
 
-    selectPreviousItem() {
+    selectPreviousItem () {
       if (this.hasPrevious && this.itemsList[this.currentItemIndex - 1]) {
         this.selectedItem = this.itemsList[this.currentItemIndex - 1];
         if (this.useRouterMode) {
@@ -2064,7 +2083,7 @@ export default {
       }
     },
 
-    selectNextItem() {
+    selectNextItem () {
       if (this.hasNext && this.itemsList[this.currentItemIndex + 1]) {
         this.selectedItem = this.itemsList[this.currentItemIndex + 1];
         if (this.useRouterMode) {
@@ -2075,7 +2094,7 @@ export default {
       }
     },
 
-    onCustomAction(body) {
+    onCustomAction (body) {
       const { action } = body;
       this.$emit(this.identity + '-custom-action', action);
       if (action) {
@@ -2106,7 +2125,7 @@ export default {
       }
     },
 
-    getNestedItem() {
+    getNestedItem () {
       return this.$awApi
         .get(`${this._url}`)
         .then((res) => {
@@ -2119,7 +2138,7 @@ export default {
         });
     },
 
-    listItemClickedHandler(row, $event) {
+    listItemClickedHandler (row, $event) {
       switch (this.tableRowClickAction) {
         case 'edit':
           if (this._actions && !this._actions.edit) {
@@ -2139,7 +2158,7 @@ export default {
       }
     },
 
-    listItemDoubleClickedHandler(row, event) {
+    listItemDoubleClickedHandler (row, event) {
       switch (this.tableRowDoubleClickAction) {
         case 'edit':
           if (this._actions && !this._actions.edit) {
@@ -2161,7 +2180,7 @@ export default {
       }
     },
 
-    onRouteIdChanged(newVal, previousVal) {
+    onRouteIdChanged (newVal, previousVal) {
       if (this.useRouterMode) {
         // in case we navigate for one detail page to another.
         if (newVal && previousVal !== newVal) {
@@ -2177,7 +2196,7 @@ export default {
       }
     },
 
-    initializeSelectedItem() {
+    initializeSelectedItem () {
       if (this.$route.params.id) {
         this.parentPath = this.parentPath.replace(`/${this.$route.params.id}`, '').replace('/:id', '');
         if (this.$route.params.id && (this.$route.path.endsWith('/create') || this.$route.path.endsWith('/new'))) {
@@ -2188,10 +2207,7 @@ export default {
           this.goToCreatePage({ reset: false });
 
           // this.parentPath = matched.path;
-          this.parentPath = this.parentPath
-            .replace('/edit', '')
-            .replace(`/${this.$route.params.id}`, '')
-            .replace('/:id', '');
+          this.parentPath = this.parentPath.replace('/edit', '');
         } else {
           this.selectedItem = { [this.primaryKeyFieldCpt]: this.$route.params.id };
           if (this.$route.query.item) {
@@ -2201,8 +2217,8 @@ export default {
       }
     },
 
-    onSegmentChange() {},
-    handleScroll(event) {
+    onSegmentChange () {},
+    handleScroll (event) {
       if (this._detailPageMode !== 'sideform' || !this.scrollTarget) {
         return;
       }
@@ -2221,7 +2237,7 @@ export default {
       }
     },
 
-    onDisplayModeChanged(mode, oldMode) {
+    onDisplayModeChanged (mode, oldMode) {
       if (mode !== oldMode) {
         if (this.supportedListingDisplayModes.includes(mode)) {
           if (this.enabledListingModes && !this.enabledListingModes.includes(mode)) {
@@ -2235,14 +2251,14 @@ export default {
         }
       }
     },
-    onlistingDisplayModeChanged(mode, oldMode) {
+    onlistingDisplayModeChanged (mode, oldMode) {
       if (mode !== oldMode) {
         this.displayMode = mode;
         this.saveComponentState();
       }
     },
 
-    getPreviousDisplayMode(context) {
+    getPreviousDisplayMode (context) {
       const displayMode =
         this.previousDisplayMode &&
         this.previousDisplayMode !== context &&
@@ -2279,27 +2295,27 @@ export default {
       return displayMode;
     },
 
-    afterRefresh(...args) {
+    afterRefresh (...args) {
       this.$emit('afterRefresh', ...args);
     },
 
-    after_refresh(...args) {
+    after_refresh (...args) {
       this.$emit('after-refresh', ...args);
     },
 
-    beforeRefresh(...args) {
+    beforeRefresh (...args) {
       this.$emit('beforeRefresh', ...args);
     },
 
-    before_refresh(...args) {
+    before_refresh (...args) {
       this.$emit('before-refresh', ...args);
     },
 
-    beforeCreate(...args) {
+    beforeCreate (...args) {
       this.$emit('beforeCreate', ...args);
     },
 
-    async onListReordered(items) {
+    async onListReordered (items) {
       if (this.listOptions && this.listOptions.sortField && items) {
         const promises = items.map((item, index) => {
           const urlparts = this._url.split('?');
@@ -2311,9 +2327,15 @@ export default {
       this.$emit('reorder', items);
     },
 
-    onModelUpdated(value, field) {
+    onModelUpdated (value, field) {
       this.$emit('modelUpdated', value, field);
       this.$emit('model-updated', value, field);
+    },
+
+    onKanbanlistAddButtonPressed (list) {
+      this.selectedItem.status = list.id;
+      //this.goToCreatePage({ reset: false });
+      this.setDisplayMode('create', this.selectedItem);
     }
   }
 };
diff --git a/src/components/crud/display/DisplayRelation.vue b/src/components/crud/display/DisplayRelation.vue
index ab2d7bcc..bf934496 100644
--- a/src/components/crud/display/DisplayRelation.vue
+++ b/src/components/crud/display/DisplayRelation.vue
@@ -55,23 +55,23 @@ export default {
   name: 'DisplayRelation',
   mixins: [awesomeDisplayMixin, apiConfigMixin, apiErrorsMixin, i18nMixin],
   computed: {
-    _relationUrl() {
+    _relationUrl () {
       return this.relationUrl || this.relation;
     },
 
-    _relationLabel() {
+    _relationLabel () {
       return this.relationLabel || 'label';
     },
 
-    _relationKey() {
+    _relationKey () {
       return this.relationKey || this.primaryKeyField || this.primaryKey || 'id';
     },
 
-    _label() {
+    _label () {
       return this.storePath || this.store ? this.getStoreLabel(this.value) : this.getApiLabel(this.value);
     },
 
-    _displayLabelCache() {
+    _displayLabelCache () {
       return (
         this.displayLabelCache ||
         (this.awComponentsConfig && this.awComponentsConfig.displayLabelsCache) ||
@@ -80,48 +80,48 @@ export default {
       );
     },
 
-    _values() {
+    _values () {
       if (!this.$props.value) {
         return this.$props.value;
       }
       return Array.isArray(this.$props.value) ? this.$props.value : [this.$props.value];
     },
 
-    _relationIsClickable() {
+    _relationIsClickable () {
       return (
         this.isClickable ||
         (this.isClickable === undefined && this.awComponentsConfig && this.awComponentsConfig.relationsAreClickable)
       );
     },
 
-    _parsedClickUrl() {
+    _parsedClickUrl () {
       return this.parseUrl(this.onClickUrl, {
         [this.relationKey || this.primaryKeyField || this.primaryKey || 'id']: this.value,
         [this.field]: this.value
       });
     }
   },
-  mounted() {
+  mounted () {
     if (this.relationUrl && this.value) {
       this.$awEventBus &&
         this.$awEventBus.$on(`displayRelation-${this.relationUrl}-${this.value}`, this.updateComponent);
     }
   },
-  beforeDestroy() {
+  beforeDestroy () {
     this.$awEventBus &&
       this.$awEventBus.$off(`displayRelation-${this.relationUrl}-${this.value}`, this.updateComponent);
   },
   watch: {
-    relationUrl(newValue) {}
+    relationUrl (newValue) {}
   },
-  data() {
+  data () {
     return {
       internalCache: {},
       timeoutId: null
     };
   },
   methods: {
-    onClick() {
+    onClick () {
       if (!this._relationIsClickable) {
         return;
       }
@@ -141,17 +141,17 @@ export default {
     },
     kebabCase: kebabCase,
     isFunction: isFunction,
-    getLabel(value) {
+    getLabel (value) {
       if (typeof value === 'object') {
         return this.formatLabel(value);
       }
       return this.storePath || this.store ? this.getStoreLabel(value) : this.getApiLabel(value);
     },
-    getKey(value) {
+    getKey (value) {
       return typeof value === 'object' ? value[this._relationKey] : value;
     },
 
-    goToRelation(value) {
+    goToRelation (value) {
       if (value && this.onClickUrl) {
         if (isFunction(this.onClickUrl)) {
           return this.onClickUrl(value);
@@ -163,7 +163,7 @@ export default {
       return;
     },
 
-    formatLabel(item, passedLabel = null) {
+    formatLabel (item, passedLabel = null) {
       let field = passedLabel || this._relationLabel;
       let label = '';
       if (field.indexOf('{{') > -1) {
@@ -174,7 +174,7 @@ export default {
       return label;
     },
 
-    getStoreLabel(value) {
+    getStoreLabel (value) {
       if (!value) {
         return;
       }
@@ -205,7 +205,7 @@ export default {
       return result || value;
     },
 
-    getApiLabel(value) {
+    getApiLabel (value) {
       if (!this.relationUrl && value && this.relationLabel) {
         const computedLocalValue =
           isObject(value) && this.relationLabel
@@ -233,9 +233,6 @@ export default {
             this.apiResponseConfig && this.apiResponseConfig.dataPath && this.apiResponseConfig.dataPath != false
               ? get(res, this.apiResponseConfig.dataPath)
               : res.data;
-          if (res.data.totalCount) {
-            this.totalCount = res.data.totalCount;
-          }
 
           const result = `${this.formatLabel(data, this.relationLabel)}`;
           if (result) {
@@ -254,7 +251,7 @@ export default {
 
       return this._displayLabelCache[url];
     },
-    copyToClipboard(str) {
+    copyToClipboard (str) {
       const el = document.createElement('textarea');
       el.value = str;
       el.setAttribute('readonly', '');
@@ -266,7 +263,7 @@ export default {
       document.body.removeChild(el);
     },
 
-    copy(value) {
+    copy (value) {
       this.copyToClipboard(`${this.getLabel(value)}`);
       if (this.$awNotify) {
         this.$awNotify(
@@ -275,7 +272,7 @@ export default {
       }
     },
 
-    updateComponent() {
+    updateComponent () {
       this.$forceUpdate();
     }
   }
diff --git a/src/components/form/form-generator/fields/core/fieldSelect.vue b/src/components/form/form-generator/fields/core/fieldSelect.vue
index b8168c77..33b23c80 100644
--- a/src/components/form/form-generator/fields/core/fieldSelect.vue
+++ b/src/components/form/form-generator/fields/core/fieldSelect.vue
@@ -10,18 +10,18 @@
     v-attributes="'input'"
     :multiple="schema.multiple || schema.multi"
   >
-    <option v-if="!fieldOptions.hideNoneSelectedText" :disabled="schema.required" :value="null">
-      {{ fieldOptions.noneSelectedText || '&lt;Nothing selected&gt;' }}
+    <option v-if="!fieldOptions.hideNoneSelectedText" :disabled="schema.required" selected>
+      {{ fieldOptions.noneSelectedText || placeholder || '&lt;Nothing selected&gt;' }}
     </option>
 
     <template v-for="item in items">
       <optgroup v-if="item && item.group" :label="getGroupName(item)" :key="getItemValue(item)">
         <template v-if="item.ops">
-          <option v-for="i in item.ops" :value="getItemValue(i)" :key="getItemValue(i)"> {{ getItemName(i) }}</option>
+          <option v-for="i in item.ops" :value="getItemValue(i)" :key="getItemValue(i)">{{ getItemName(i) }}</option>
         </template>
       </optgroup>
 
-      <option v-if="!item.group" :value="getItemValue(item)" :key="getItemValue(item)"> {{ getItemName(item) }}</option>
+      <option v-if="!item.group" :value="getItemValue(item)" :key="getItemValue(item)">{{ getItemName(item) }}</option>
     </template>
   </select>
 </template>
diff --git a/src/components/misc/AwesomeAction/AwesomeAction.vue b/src/components/misc/AwesomeAction/AwesomeAction.vue
index 25f2b9d9..e55c325e 100644
--- a/src/components/misc/AwesomeAction/AwesomeAction.vue
+++ b/src/components/misc/AwesomeAction/AwesomeAction.vue
@@ -227,7 +227,7 @@ export default {
     isDropdownOpened: false
   }),
   computed: {
-    actionDropdownTitleComputed() {
+    actionDropdownTitleComputed () {
       if (this.label) {
         return this.$te(this.label) ? this.$t(this.label) : this.label;
       }
@@ -239,15 +239,15 @@ export default {
   },
   watch: {},
   methods: {
-    permanentFiltering(parsedFilters, filters) {
+    permanentFiltering (parsedFilters, filters) {
       this.$emit('permanent-filtering', parsedFilters, filters);
     },
 
-    permanentSearching(parsedFilters) {
+    permanentSearching (parsedFilters) {
       this.$emit('permanent-searching', parsedFilters);
     },
 
-    computeActionField(field) {
+    computeActionField (field) {
       if (field !== undefined) {
         if (typeof field === 'function') {
           return field({ item: this.item, items: this.items, parent: this.parent }, this);
@@ -260,7 +260,7 @@ export default {
       return '';
     },
 
-    toggleDropdown(value) {
+    toggleDropdown (value) {
       if (value !== undefined) {
         this.isDropdownOpened = value;
       } else {
@@ -268,7 +268,7 @@ export default {
       }
     }
   },
-  mounted() {
+  mounted () {
     if ((this.type === 'filter' || this.type === 'input') && !this.field) {
       console.warn('[AwesomeAction]', 'You forget to set `field` for this type:', this.type);
     }
diff --git a/src/components/misc/AwesomeAction/AwesomeActionList.vue b/src/components/misc/AwesomeAction/AwesomeActionList.vue
index 46d73964..68a273a5 100644
--- a/src/components/misc/AwesomeAction/AwesomeActionList.vue
+++ b/src/components/misc/AwesomeAction/AwesomeActionList.vue
@@ -131,21 +131,21 @@ export default {
     }
   },
   computed: {
-    foldableActions() {
+    foldableActions () {
       return this.actions.filter((a) => !a.type || (a.type === 'button' && !a.sticky));
     },
 
-    unFoldableActions() {
+    unFoldableActions () {
       return this.actions.filter((a) => (a.type && a.type !== 'button') || a.sticky);
     }
   },
-  data() {
+  data () {
     return {
       state: {}
     };
   },
   methods: {
-    shouldDisplayAction(action) {
+    shouldDisplayAction (action) {
       this.mode = this.parentDisplayMode;
       // legacy, use visible
       if (action.canDisplay !== undefined) {
@@ -156,7 +156,7 @@ export default {
       }
       return true;
     },
-    computeActionField(action, field) {
+    computeActionField (action, field) {
       if (action[field] !== undefined) {
         if (typeof action[field] === 'function') {
           return action[field]({ item: this.item, items: this.items, parent: this.parent }, this);
diff --git a/src/components/misc/KanbanList.vue b/src/components/misc/KanbanList.vue
index 162f3b63..2a71edb4 100644
--- a/src/components/misc/KanbanList.vue
+++ b/src/components/misc/KanbanList.vue
@@ -52,6 +52,9 @@
         </div>
       </div>
       <div class="list-cards">
+        <div class="btn btn-outline-info<" @click="addButtonClicked($event)" v-if="allowAddingCard">
+          <i class="fa fa-plus"></i> {{ $t('AwesomeKanban.labels.add') }}
+        </div>
         <Draggable
           class="draggable-card"
           :list="items"
@@ -236,6 +239,10 @@ export default {
       type: Boolean,
       default: false
     },
+    allowAddingCard: {
+      type: Boolean,
+      default: false
+    },
     cardClickResolver: Function
   },
   created() {
@@ -342,6 +349,9 @@ export default {
     },
     onUnChoose($event) {
       this.$emit('unchoose', $event);
+    },
+    addButtonClicked() {
+      this.$emit('onAddButtonPressed', { id: this.id, title: this.title });
     }
   },
   computed: {
diff --git a/src/components/table/AwesomeKanban.vue b/src/components/table/AwesomeKanban.vue
index 0bec6b36..595801e0 100644
--- a/src/components/table/AwesomeKanban.vue
+++ b/src/components/table/AwesomeKanban.vue
@@ -89,7 +89,7 @@
               <input
                 v-if="actions.search"
                 type="text"
-                v-model="search"
+                v-model="searchInput"
                 class="form-control aw-search-input"
                 :placeholder="$t('AwesomeTable.searchInput')"
               />
@@ -129,14 +129,16 @@
           >
             <KanbanList
               v-for="(list, index) in localLists"
+              :allowAddingCard="actions && actions.create"
+              :allowRemovingList="actions.removeList"
               :animation="options.animation"
+              :card-click-resolver="cardClickResolver"
               :columns="columns"
               :custom-list-actions="customListActions"
               :descriptionField="descriptionField"
               :disabled="!options.moveCard"
               :display-labels-cache="displayLabelsCache"
               :fields="options.fields"
-              :card-click-resolver="cardClickResolver"
               :id="list.id"
               :imageField="imageField"
               :items="list.content"
@@ -151,7 +153,6 @@
               :usersField="usersField"
               :userTitleField="userTitleField"
               group="card"
-              :allowRemovingList="actions.removeList"
               @remove-list="onRemoveList"
               @customListAction="onCustomListAction"
               @change="onCardChanged"
@@ -161,6 +162,7 @@
               @cardMoved="onCardMoved"
               @choose="onChoose"
               @unchoose="onUnChoose"
+              @onAddButtonPressed="onAddButtonPress(list)"
             >
               <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"
                 ><slot :name="slot" v-bind="scope"
@@ -196,7 +198,7 @@
 </template>
 
 <script>
-import { cloneDeep, debounce, filter,  startCase, some, orderBy, remove, flatten } from 'lodash';
+import { cloneDeep, debounce, filter, startCase, some, orderBy, remove, flatten } from 'lodash';
 import Popper from 'vue-popperjs';
 
 import i18nMixin from '../../mixins/i18nMixin';
@@ -324,7 +326,7 @@ export default {
     cardClickResolver: Function
   },
 
-  created() {
+  created () {
     // Check if the component is loaded globally
     if (!this.$root.$options.components.Draggable) {
       /* eslint-disable-next-line */
@@ -332,7 +334,7 @@ export default {
     }
     this.reorderListItemsDebounced = debounce(this.reorderListItems, 200);
   },
-  mounted() {
+  mounted () {
     this.handleLists();
     if (this.serverParams && this.serverParams.page > 1) {
       this.updateParams({ page: 0 });
@@ -350,10 +352,10 @@ export default {
   },
 
   computed: {
-    _model() {
+    _model () {
       return this.model || this.getModelFromStore(this.identity);
     },
-    titleComputed() {
+    titleComputed () {
       if (this.title) {
         return this.$te(this.title) ? this.$t(this.title) : this.title;
       }
@@ -379,12 +381,12 @@ export default {
       }
       return '';
     },
-    splittingValuesComputed() {
+    splittingValuesComputed () {
       return this.splittingValues && Array.isArray(this.splittingValues) && this.splittingValues.length
         ? this.splittingValues
         : this.splittingFieldApiValues;
     },
-    segmentFieldDefinitionComputed() {
+    segmentFieldDefinitionComputed () {
       if (!this.splittingField) {
         return '';
       }
@@ -397,7 +399,7 @@ export default {
       return '';
     },
 
-    _filterableColumns() {
+    _filterableColumns () {
       return this.columns.map((col) => {
         if (col.filterOptions) {
           col.filterOptions.enabled =
@@ -410,25 +412,25 @@ export default {
   },
 
   watch: {
-    lists() {
+    lists () {
       this.handleLists();
     },
-    data() {
+    data () {
       this.handleLists();
     },
-    splittingField() {
+    splittingField () {
       this.handleLists();
     },
-    splittingValuesComputed() {
+    splittingValuesComputed () {
       this.handleLists();
     },
-    'options.sortField'() {
+    'options.sortField' () {
       this.orderCardInLists();
     },
-    'options.sortOrder'() {
+    'options.sortOrder' () {
       this.orderCardInLists();
     },
-    search(newVal) {
+    searchInput (newVal) {
       this.onSearch({ searchTerm: newVal });
     }
   },
@@ -440,12 +442,12 @@ export default {
     displayLabelsCache: {},
     splittingFieldApiValues: [],
     displayAwFilter: false,
-    search: '',
+    searchInput: '',
     scrollBox: {}
   }),
 
   methods: {
-    addList() {
+    addList () {
       if (this.newListName) {
         if (!some(this.localLists, { title: this.newListName })) {
           this.localLists.push({
@@ -460,16 +462,16 @@ export default {
       }
     },
 
-    clearForm() {
+    clearForm () {
       this.isAddingList = false;
       this.newListName = '';
     },
 
-    editForm() {
+    editForm () {
       this.isAddingList = true;
     },
 
-    onRemoveList(list) {
+    onRemoveList (list) {
       /* LOCAL REMOVE */
       this.localLists = filter(this.localLists, (item) => {
         return item.title !== list;
@@ -478,31 +480,31 @@ export default {
       this.$awEmit('aw-kanban-list-removed', list);
     },
 
-    listChanged(item) {
+    listChanged (item) {
       this.$emit('listChanged', item);
       this.$awEmit('aw-kanban-list-changed', item, this.localLists);
     },
 
-    onCardChanged(item, targetList, orderedListItems) {
+    onCardChanged (item, targetList, orderedListItems) {
       this.$emit('cardChanged', item, targetList, orderedListItems);
       this.reorderListItemsDebounced(orderedListItems);
     },
-    onCardRemoved(item, list) {
+    onCardRemoved (item, list) {
       this.$emit('cardRemoved', item, list);
     },
-    onCardAdded(payload, list, orderedListItems) {
+    onCardAdded (payload, list, orderedListItems) {
       this.$emit('cardAdded', payload, list, orderedListItems);
       this.changeItemSplittingValue(payload, list, orderedListItems);
     },
-    onCardMoved(item, list) {
+    onCardMoved (item, list) {
       this.$emit('cardAdded', item, list);
     },
 
-    onCardClicked(item, $event) {
+    onCardClicked (item, $event) {
       this.$emit('cardClicked', item, $event);
     },
 
-    handleLists() {
+    handleLists () {
       if (this.lists && this.lists.length) {
         this.localLists = cloneDeep(this.lists);
       } else {
@@ -510,7 +512,7 @@ export default {
         const list = this.displayOrphansList
           ? [
               {
-                id: 'unsorted',
+                id: '',
                 title: this.$t('AwesomeKanban.labels.unsorted'),
                 content: this.data ? this.data.filter((item) => item[this.splittingField] == undefined) : []
               }
@@ -524,7 +526,7 @@ export default {
     },
 
     // split items in lists
-    splitItemsInLists() {
+    splitItemsInLists () {
       if (this.splittingField && this.splittingValuesComputed && Array.isArray(this.splittingValuesComputed)) {
         this.splittingValuesComputed.forEach((filterValue) => {
           let id = filterValue,
@@ -544,8 +546,15 @@ export default {
           let content = [];
           if (this.data) {
             content = filter(this.data, [this.splittingField, id]);
-            if (id === 'unsorted') {
-              content = content.push(...this.data.filter((item) => item[this.splittingField] == id));
+            if (id === '') {
+              content = content.push(
+                ...this.data.filter(
+                  (item) =>
+                    item[this.splittingField] == id ||
+                    item[this.splittingField] === undefined ||
+                    item[this.splittingField] === null
+                )
+              );
             }
           } else {
             this.localLists.forEach((localList) => {
@@ -564,7 +573,7 @@ export default {
       }
     },
 
-    orderCardInLists() {
+    orderCardInLists () {
       const sortOrder = this.sortOrder ? this.sortOrder.toLowerCase() : 'asc';
       if (this.sortField) {
         this.localLists.forEach((localList) => {
@@ -581,11 +590,11 @@ export default {
       }
     },
 
-    onCustomListAction(body) {
+    onCustomListAction (body) {
       this.$emit('customListAction', body);
     },
 
-    getSegmentValues(field) {
+    getSegmentValues (field) {
       return (
         field &&
         ((field.fieldOptions && field.fieldOptions.filterDropdownItems) ||
@@ -595,8 +604,8 @@ export default {
       );
     },
 
-    async changeItemSplittingValue({ element, newIndex }, targetList, orderedList) {
-      element[this.splittingField] = targetList.id === 'unsorted' || targetList.id === undefined ? null : targetList.id;
+    async changeItemSplittingValue ({ element, newIndex }, targetList, orderedList) {
+      element[this.splittingField] = targetList.id === '' || targetList.id === undefined ? null : targetList.id;
       if (this.sortField) {
         delete element[this.sortField];
       }
@@ -605,7 +614,7 @@ export default {
       await this.$awApi.put(urlparts.join('?'), element);
     },
 
-    async reorderListItems(orderedList) {
+    async reorderListItems (orderedList) {
       if (this.sortField && orderedList) {
         const promises = orderedList.map((item, index) => {
           const urlparts = this._url.split('?');
@@ -617,11 +626,11 @@ export default {
       }
     },
 
-    onSegmentListChanged(values) {
+    onSegmentListChanged (values) {
       this.splittingFieldApiValues = values;
     },
 
-    onMouseMove(event) {
+    onMouseMove (event) {
       const scrollDiv = this.$refs.scrollableDiv;
       // (1) prepare to moving: make absolute and on top by z-index
 
@@ -642,12 +651,16 @@ export default {
         scrollDiv.scrollLeft -= 10;
       }
     },
-    onChoose($event) {
+    onChoose ($event) {
       this.scrollBox = this.$refs.scrollableDiv.getBoundingClientRect();
       document.addEventListener('dragover', this.onMouseMove);
     },
-    onUnChoose($event) {
+    onUnChoose ($event) {
       document.removeEventListener('dragover', this.onMouseMove);
+    },
+
+    onAddButtonPress (list) {
+      this.$emit('addButtonPressed', list);
     }
   }
 };
diff --git a/src/components/table/AwesomeList.vue b/src/components/table/AwesomeList.vue
index 20e6a68c..7f7cc8f5 100644
--- a/src/components/table/AwesomeList.vue
+++ b/src/components/table/AwesomeList.vue
@@ -168,7 +168,7 @@
             <input
               v-if="actions.search"
               type="text"
-              v-model="search"
+              v-model="searchInput"
               placeholder="Rechercher"
               class="form-control aw-search-input"
             />
@@ -237,84 +237,23 @@
                     :class="itemClasses"
                     :style="{ 'flex-direction': itemsPerRow < 2 ? 'row' : 'column', height: _itemHeight }"
                   >
-                    <i v-if="_isDraggable" class="draggable-icon fa fa-list"></i>
-                    <img
-                      class="card-img-top"
-                      v-if="imageField && getItemProperty(item, imageField)"
-                      :src="getItemProperty(item, imageField)"
-                      :alt="getItemProperty(item, titleField)"
-                      :class="imageClasses"
-                      :style="imageStyles"
+                    <ListItem
+
+                      :actions="actions"
+                      :columns="columns"
+                      :descriptionField="descriptionField"
+                      :displayedFields="displayedFields"
+                      :imageClasses="imageClasses"
+                      :imageField="imageField"
+                      :imageStyles="imageStyles"
+                      :item="item"
+                      :labelsField="labelsField"
+                      :subtitleField="subtitleField"
+                      :titleField="titleField"
+                      :usersField="usersField"
+                      @itemButtonClicked="(item) => $emit('itemButtonClicked', item)"
+                      @itemClicked="(item) => $emit('itemClicked', item)"
                     />
-                    <div class="card-body">
-                      <h4
-                        class="card-title aw-list-item-title"
-                        style=""
-                        v-if="getItemProperty(item, titleField)"
-                        v-html="getItemProperty(item, titleField)"
-                      ></h4>
-                      <h6 class="card-title aw-list-item-subtitle" v-if="getItemProperty(item, subtitleField)">
-                        <AwesomeDisplay
-                          location="list"
-                          v-bind="getField(subtitleField)"
-                          :value="getItemProperty(item, subtitleField)"
-                          :model="item"
-                          :schema="getField(subtitleField)"
-                        />
-                      </h6>
-
-                      <h3
-                        class="card-title aw-list-item-title"
-                        style=""
-                        v-if="!_useClassicLayout && _modelDisplayField && item[_modelDisplayField]"
-                      >
-                        {{ item[_modelDisplayField] }}
-                      </h3>
-
-                      <p class="card-text aw-list-item-description" v-if="getItemProperty(item, descriptionField)">
-                        <AwesomeDisplay
-                          location="list"
-                          v-bind="getField(descriptionField)"
-                          :value="getItemProperty(item, descriptionField)"
-                          :model="item"
-                          :schema="getField(subtitleField)"
-                        />
-                      </p>
-                      <div v-if="getLabelsProperty(item, labelsField)" class="tags-field">
-                        <small
-                          v-for="(label, idx) in getItemProperty(item, labelsField)"
-                          :key="idx"
-                          class="badge badge-primary list-item-label"
-                          >{{ label }}</small
-                        >
-                      </div>
-                      <template v-if="columns && columns.length && !_useClassicLayout">
-                        <div v-for="(itemData, key) in getAllowedFields(item)" :key="key">
-                          <small class="aw-list-item-field-label text-info">{{ getField(key).label || key }}</small
-                          ><br />
-                          <AwesomeDisplay
-                            location="list"
-                            v-bind="getField(key)"
-                            :value="itemData"
-                            :relation="getField(key).relation"
-                            :relation-label="getField(key).relationLabel"
-                            :relation-url="getField(key).relationUrl"
-                            :relation-key="getField(key).relationKey"
-                            :model="item"
-                            :schema="getField(subtitleField)"
-                          />
-                        </div>
-                      </template>
-                      <div class="aw-list-item-action pl-3 pr-3" v-if="actions.itemButton">
-                        <button
-                          @click="handleItemButtonClick($event, item)"
-                          class="btn btn-primary btn-sm"
-                          :class="itemsPerRow > 1 ? 'btn-block' : ''"
-                        >
-                          {{ $t('AwesomeList.buttons.itemAction') }}
-                        </button>
-                      </div>
-                    </div>
                   </div>
                 </slot>
               </div>
@@ -359,6 +298,7 @@ import AwesomeFilter from '../misc/AwesomeFilter.vue';
 import AwesomeSegments from './parts/AwesomeSegments.vue';
 import AutoRefreshButton from './parts/AutoRefreshButton.vue';
 import ProgressBar from './parts/ProgressBar.vue';
+import ListItem from './parts/ListItem.vue';
 
 export default {
   name: 'AwesomeList',
@@ -369,7 +309,8 @@ export default {
     AwesomeSegments,
     Paginate,
     popper: Popper,
-    ProgressBar
+    ProgressBar,
+    ListItem
   },
   mixins: [i18nMixin, apiErrors, apiListMixin, relationMixin, awEmitMixin, templatingMixin],
   props: {
@@ -495,7 +436,7 @@ export default {
       page: 0,
       data: [],
       advancedFilters: [],
-      search: '',
+      searchInput: '',
       displayAwFilter: false,
       columnSortState: '',
       columnSortDirection: 'asc'
@@ -578,10 +519,10 @@ export default {
         }
         return this.mode === 'remote'
           ? this.data
-          : this.localSearch(this.data, this.search).slice(startIndex, startIndex + perPage);
+          : this.localSearch(this.data, this.searchInput).slice(startIndex, startIndex + perPage);
       },
       set(d) {
-        if (!this.search) {
+        if (!this.searchInput) {
           this.data = d;
           this.onListReordered(d);
         }
@@ -626,7 +567,7 @@ export default {
     },
 
     _isDraggable() {
-      return this.actions.reorder && !this.search;
+      return this.actions.reorder && !this.searchInput;
     },
 
     perPageComputed() {
@@ -636,7 +577,7 @@ export default {
   watch: {
     perRow: 'resetItemsPerRow',
     rows: 'refreshLocalData',
-    search(newVal) {
+    searchInput(newVal) {
       this.onSearch({ searchTerm: newVal });
     }
   },
@@ -736,11 +677,11 @@ export default {
 
     localSearch(items, search) {
       let filteredList = items.filter((item) => {
-        if (!this.search) {
+        if (!this.searchInput) {
           return true;
         }
         try {
-          return JSON.stringify(Object.values(item)).match(new RegExp(this.search, 'i'));
+          return JSON.stringify(Object.values(item)).match(new RegExp(this.searchInput, 'i'));
         } catch (err) {
           console.warn('err', err);
         }
diff --git a/src/components/table/AwesomeTable/AwesomeTable.vue b/src/components/table/AwesomeTable/AwesomeTable.vue
index efec6259..eaa3b83c 100644
--- a/src/components/table/AwesomeTable/AwesomeTable.vue
+++ b/src/components/table/AwesomeTable/AwesomeTable.vue
@@ -49,12 +49,12 @@
                     }"
                     v-if="
                       _actions &&
-                      _actions.tableConfiguration &&
-                      (_actions.export ||
-                        _actions.exportLocal ||
-                        _actions.import ||
-                        _actions.columnsFilters ||
-                        _actions.dropdownActions)
+                        _actions.tableConfiguration &&
+                        (_actions.export ||
+                          _actions.exportLocal ||
+                          _actions.import ||
+                          _actions.columnsFilters ||
+                          _actions.dropdownActions)
                     "
                   >
                     <button
@@ -131,8 +131,19 @@
                       {{ $t('AwesomeTable.columns') }}
                     </button>
                     <div class="popper card mt-0" style="z-index: 1">
+                      <h6 class="pt-1 pl-3 pr-3 pb-0">{{ $t('AwesomeTable.columns') }}</h6>
+                      <div class="m-2">
+                        <input
+                          type="text"
+                          class="form-control"
+                          :placeholder="$t('AwesomeTable.buttons.filters')"
+                          style="height: 30px"
+                          v-model="columnDropdownFilterInput"
+                        />
+                      </div>
+
                       <button
-                        v-for="(col, index) in sortedColumns"
+                        v-for="(col, index) in dropdownColumns"
                         :key="index"
                         class="dropdown-item col"
                         type="button"
@@ -494,7 +505,8 @@ export default {
     entity: {
       type: String,
       default: '',
-      note: 'Unique name of the currently displayed list. This serve to retrieve and display titles from the vue-i8n translations'
+      note:
+        'Unique name of the currently displayed list. This serve to retrieve and display titles from the vue-i8n translations'
     },
     name: { type: String, default: '' },
     namePlural: { type: String, default: '' },
@@ -591,13 +603,15 @@ export default {
       type: Function
     }
   },
-  data() {
+  data () {
     return {
       totalCount: 0,
       columnsFilterState: null,
       isRefreshing: false,
       columnsState: {},
-      defaultStartDate: dayjs().subtract(7, 'days').format('YYYY-MM-DD'),
+      defaultStartDate: dayjs()
+        .subtract(7, 'days')
+        .format('YYYY-MM-DD'),
       defaultEndDate: dayjs().format('YYYY-MM-DD'),
       serverParams: {
         // a map of column filters example: {name: 'john', age: '20'}
@@ -629,15 +643,16 @@ export default {
       displayLabelCache: {},
       clickTimeout: null,
       displayAwFilter: false,
-      searchInput: ''
+      searchInput: '',
+      columnDropdownFilterInput: ''
     };
   },
   computed: {
-    optionsComputed() {
+    optionsComputed () {
       return merge(this.defaultOptions, this.options);
     },
 
-    _tableTitle() {
+    _tableTitle () {
       if (this.title === false) {
         return '';
       }
@@ -649,7 +664,7 @@ export default {
       return (title || '').trim();
     },
 
-    formattedColumns() {
+    formattedColumns () {
       if (!this.columns) {
         // eslint-disable-next-line
         console.error('AwesomeTable MISSING COLUMNS');
@@ -788,10 +803,10 @@ export default {
       return newcolumns;
     },
 
-    canHideColumns() {
+    canHideColumns () {
       return this.formattedColumns.length > this.columnsDisplayed;
     },
-    displayedColumns() {
+    displayedColumns () {
       this.columnsState;
       if (this.canHideColumns) {
         const cols = this.formattedColumns.filter((col) => this.columnsState[col.field]);
@@ -810,7 +825,7 @@ export default {
       return this.formattedColumns;
     },
 
-    initialSortBy() {
+    initialSortBy () {
       if (this.serverParams.sort) {
         const entries = Object.entries(this.serverParams.sort);
         if (entries.length) {
@@ -822,19 +837,19 @@ export default {
       return undefined;
     },
 
-    advancedFiltersCount() {
+    advancedFiltersCount () {
       return (this.advancedFilters && this.advancedFilters.length) || 0;
     },
 
-    advancedFiltersFormated() {
+    advancedFiltersFormated () {
       return AwesomeFilter.methods.parseFilter(this.advancedFilters, { dispatch: false });
     },
 
-    perPageComputed() {
+    perPageComputed () {
       return this.mode === 'remote' ? parseInt(this.serverParams.perPage) : this.perPage;
     },
 
-    canFilterByColumnsCpt() {
+    canFilterByColumnsCpt () {
       return (
         this._actions.columnsFilters &&
         this.options &&
@@ -842,8 +857,15 @@ export default {
       );
     },
 
-    sortedColumns() {
+    sortedColumns () {
       return sortBy(this.formattedColumns, ['field', 'order']);
+    },
+    dropdownColumns () {
+      return this.sortedColumns.filter(
+        (col) =>
+          col.field.match(new RegExp(this.columnDropdownFilterInput, 'i')) ||
+          col.label.match(new RegExp(this.columnDropdownFilterInput, 'i'))
+      );
     }
   },
   watch: {
@@ -851,7 +873,7 @@ export default {
     /**
      * @deprecated
      */
-    params() {
+    params () {
       // this.serverParams = merge({}, this.serverParams, this.params);
       // this.getItems({ source: "awTable_params()" });
     },
@@ -859,7 +881,7 @@ export default {
     // store: changed => {},
     rows: 'refreshLocalData'
   },
-  created() {
+  created () {
     if (!this.$t) {
       this.$t = (str) => {
         /*
@@ -874,11 +896,11 @@ export default {
       this.$te = (str) => !!this.translations[str];
     }
   },
-  beforeMount() {
+  beforeMount () {
     const userLang = window.navigator ? navigator.language || navigator.userLanguage : 'en';
     dayjs().locale(userLang);
   },
-  mounted() {
+  mounted () {
     if (this.refresh || this.store) {
       return;
     }
@@ -910,7 +932,7 @@ export default {
     }
     // this.refreshLocalData();
   },
-  beforeDestroy() {
+  beforeDestroy () {
     clearInterval(this.refreshHandle);
   },
 
@@ -944,7 +966,7 @@ export default {
     //   this.$awEmit('filter', { filters: this.serverParams.filters, rawFilters: filters });
     // },
 
-    doRefresh() {
+    doRefresh () {
       this.$awEmit('refresh', { filters: this.serverParams.filters });
 
       if (this.mode == 'remote') {
@@ -952,7 +974,7 @@ export default {
       }
     },
 
-    toggleFilter() {
+    toggleFilter () {
       this.columnsFilterState = !this.columnsFilterState;
 
       if (!this.columnsFilterState) {
@@ -972,7 +994,7 @@ export default {
       this.saveComponentState();
     },
 
-    toggleAdvancedFilters() {
+    toggleAdvancedFilters () {
       this.displayAwFilter = !this.displayAwFilter;
       if (this.displayAwFilter) {
         this.columnsFilterState = false;
@@ -986,7 +1008,7 @@ export default {
     },
     // editItem(item) {},
 
-    clickOnLine(props, props2) {
+    clickOnLine (props, props2) {
       if (this.singleClickFunction) {
         return;
       }
@@ -1008,7 +1030,7 @@ export default {
       });
     },
 
-    getLovValue(item, listName) {
+    getLovValue (item, listName) {
       if (!item || !this.$store.state.listOfValues[listName]) {
         return item;
       }
@@ -1022,7 +1044,7 @@ export default {
       return value.label || value.code || value;
     },
 
-    getDataValue(item, listName) {
+    getDataValue (item, listName) {
       if (!item || !this.$store.state.data[listName]) {
         return item;
       }
@@ -1036,12 +1058,12 @@ export default {
       return value.label || value.title || value.name || value.code || value;
     },
 
-    toggleColumn(colName) {
+    toggleColumn (colName) {
       this.$set(this.columnsState, colName, !this.columnsState[colName]);
       this.pushChangesToRouter(undefined, true);
     },
 
-    onColumnFilter(params) {
+    onColumnFilter (params) {
       if (this.mode !== 'remote') {
         return;
       }
@@ -1052,7 +1074,7 @@ export default {
       this.getItems({ useSkeleton: true });
     },
 
-    onSortChange(params) {
+    onSortChange (params) {
       // second param is a deprecated one
       const fieldIndex = params[0].field || params[0].columnIndex;
       const field = this.columns.find((c) => c.field === fieldIndex);
@@ -1077,7 +1099,7 @@ export default {
       this.getItems({ useSkeleton: true });
     },
 
-    onDateFilter(value) {
+    onDateFilter (value) {
       if (!value) {
         return;
       }
@@ -1086,11 +1108,11 @@ export default {
       this.getItems({ useSkeleton: true });
     },
 
-    hasValue(item, column) {
+    hasValue (item, column) {
       return item[column.toLowerCase()] !== 'undefined';
     },
 
-    itemValue(item, column) {
+    itemValue (item, column) {
       return item[column.toLowerCase()];
     },
 
diff --git a/src/components/table/parts/ListItem.vue b/src/components/table/parts/ListItem.vue
new file mode 100644
index 00000000..1e20406c
--- /dev/null
+++ b/src/components/table/parts/ListItem.vue
@@ -0,0 +1,432 @@
+<template>
+  <div>
+    <i v-if="isDraggable" class="draggable-icon fa fa-list"></i>
+    <img
+      class="card-img-top"
+      v-if="imageField && getItemProperty(item, imageField)"
+      :src="getItemProperty(item, imageField)"
+      :alt="getItemProperty(item, titleField)"
+      :class="imageClasses"
+      :style="imageStyles"
+    />
+    <div class="card-body">
+      <h4
+        class="card-title aw-list-item-title"
+        style=""
+        v-if="getItemProperty(item, titleField)"
+        v-html="getItemProperty(item, titleField)"
+      ></h4>
+      <h6 class="card-title aw-list-item-subtitle" v-if="getItemProperty(item, subtitleField)">
+        <AwesomeDisplay
+          location="list"
+          v-bind="getField(subtitleField)"
+          :value="getItemProperty(item, subtitleField)"
+          :model="item"
+          :schema="getField(subtitleField)"
+        />
+      </h6>
+
+      <h3
+        class="card-title aw-list-item-title"
+        style=""
+        v-if="!_useClassicLayout && _modelDisplayField && item[_modelDisplayField]"
+      >
+        {{ item[_modelDisplayField] }}
+      </h3>
+
+      <p class="card-text aw-list-item-description" v-if="getItemProperty(item, descriptionField)">
+        <AwesomeDisplay
+          location="list"
+          v-bind="getField(descriptionField)"
+          :value="getItemProperty(item, descriptionField)"
+          :model="item"
+          :schema="getField(subtitleField)"
+        />
+      </p>
+      <div v-if="tagsComputed" class="tags-field">
+        <small v-for="(label, idx) in tagsComputed" :key="idx" class="badge badge-primary list-item-label">{{
+          label
+        }}</small>
+      </div>
+      <template v-if="columns && columns.length && !_useClassicLayout">
+        <div v-for="(itemData, key) in getAllowedFields(item)" :key="key">
+          <small class="aw-list-item-field-label text-info">{{ getField(key).label || key }}</small
+          ><br />
+          <AwesomeDisplay
+            location="list"
+            v-bind="getField(key)"
+            :value="itemData"
+            :relation="getField(key).relation"
+            :relation-label="getField(key).relationLabel"
+            :relation-url="getField(key).relationUrl"
+            :relation-key="getField(key).relationKey"
+            :model="item"
+            :schema="getField(subtitleField)"
+          />
+        </div>
+      </template>
+      <div class="aw-list-item-action pl-3 pr-3" v-if="actions.itemButton">
+        <button
+          @click="handleItemButtonClick($event, item)"
+          class="btn btn-primary btn-sm"
+          :class="itemsPerRow > 1 ? 'btn-block' : ''"
+        >
+          {{ $t('AwesomeList.buttons.itemAction') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { pick, find } from 'lodash';
+import apiErrors from '../../../mixins/apiErrorsMixin';
+import i18nMixin from '../../../mixins/i18nMixin';
+import apiListMixin from '../../../mixins/apiListMixin';
+import relationMixin from '../../../mixins/relationMixin';
+import awEmitMixin from '../../../mixins/awEmitMixin';
+import templatingMixin from '../../../mixins/templatingMixin';
+
+import AwesomeDisplay from '../../crud/display/AwesomeDisplay.vue';
+
+export default {
+  name: 'ListItem',
+  components: {
+    AwesomeDisplay
+  },
+  mixins: [i18nMixin, apiErrors, apiListMixin, relationMixin, awEmitMixin, templatingMixin],
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    item: {},
+    listModeItemHeight: {
+      type: [Number, String],
+      default: undefined
+    },
+    imageField: {
+      type: String,
+      description: 'The field to use for the image'
+    },
+    titleField: {
+      type: String,
+      description: 'The field to use for the title'
+    },
+    subtitleField: {
+      type: String,
+      description: 'The field to use for the subtitle'
+    },
+    descriptionField: {
+      type: String,
+      description: 'The field to use for the description'
+    },
+    labelsField: {
+      type: String,
+      description: 'The field to use for the labels (tags)'
+    },
+    usersField: {
+      type: String,
+      description: 'The field to use for the users'
+    },
+    displayedFields: {
+      type: Array,
+      description: 'The fields to display on the card'
+    },
+    itemComponent: {
+      type: String,
+      description: 'The component to use for the item'
+    },
+    translations: {
+      type: Object,
+      default: () => ({
+        'AwesomeList.buttons.increase': 'More items per row',
+        'AwesomeList.buttons.decrease': 'Less items per row',
+        'AwesomeList.buttons.refresh': 'Refresh',
+        'AwesomeList.buttons.itemAction': 'Open'
+      })
+    },
+    styles: {
+      type: Object,
+      default: () => ({})
+    },
+    imageClasses: {
+      type: [Object, String],
+      default: '',
+      description: 'classes to put around the image'
+    },
+    itemClasses: {
+      type: [Object, String],
+      default: 'shadow',
+      description: 'classes to put around the item'
+    },
+    imageStyles: {
+      type: [Object, String],
+      default: '',
+      description: 'styles to put around the image'
+    },
+    actions: {
+      type: Object,
+      default: () => ({
+        itemButton: true,
+        refresh: true,
+        changeItemsPerRow: true,
+        pagination: true,
+        reorder: false,
+        sort: true
+      })
+    },
+    defaultOptions: {
+      type: Object,
+      default: () => ({
+        fixedHeader: false,
+        maxHeight: '',
+        pagination: true,
+        customInlineActions: [], // {key, label, action: function(item, context{}}
+        customBulkActions: []
+      })
+    },
+    model: {
+      type: Object,
+      required: false,
+      default: undefined,
+      note: 'The object that will be used for managing the component. it contains the schema along with some other options. If no provided i can be reconstructed if we have the schema prop.'
+    },
+    isDraggable: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      itemsPerRow: 3,
+      page: 0,
+      data: [],
+      advancedFilters: [],
+      search: '',
+      displayAwFilter: false,
+      columnSortState: '',
+      columnSortDirection: 'asc'
+    };
+  },
+  computed: {
+    _useClassicLayout() {
+      return this.imageField || this.titleField || this.subtitleField || this.descriptionField;
+    },
+
+    _modelDisplayField() {
+      if (this._model && this._model.displayField) {
+        return this._model.displayField;
+      }
+
+      if (this.primaryKeyFieldCpt) {
+        return this.primaryKeyFieldCpt;
+      }
+      return '';
+    },
+
+    _model() {
+      return this.model || this.getModelFromStore(this.identity);
+    },
+    _filterableColumns() {
+      return this.columns.map((col) => {
+        if (col.filterOptions) {
+          col.filterOptions.enabled =
+            (this.filterable === undefined || this.filterable) &&
+            (col.filterOptions.filterable === undefined || col.filterOptions.filterable);
+        }
+        return col;
+      });
+    },
+
+    tagsComputed() {
+      let tags = this.getLabelsProperty(this.item, this.labelsField);
+      return Array.isArray(tags) ? tags : [tags];
+    }
+  },
+  watch: {
+    search(newVal) {
+      this.onSearch({ searchTerm: newVal });
+    }
+  },
+  created() {},
+  beforeMount() {},
+  mounted() {},
+  beforeDestroy() {},
+  methods: {
+    getAllowedFields(item) {
+      let fields = {};
+      Object.keys(item)
+        .filter((key) => {
+          return this.displayedFields && this.displayedFields.length ? this.displayedFields.includes(key) : true;
+        })
+        .forEach((key) => {
+          this.columns.forEach((column) => {
+            if (column.field === key) {
+              fields = Object.assign(fields, pick(item, [key]));
+            }
+          });
+        });
+      return fields;
+    },
+
+    getField(key) {
+      return find(this.columns, ['field', key]) || {};
+    },
+    resetItemsPerRow() {
+      this.itemsPerRow = this.perRow;
+    },
+
+    handleItemClick($event, item) {
+      this.$emit('itemClicked', item);
+    },
+
+    handleItemButtonClick($event, item) {
+      this.$emit('itemButtonClicked', item);
+    }
+  }
+};
+</script>
+<style lang="scss">
+.aw-list {
+  clear: both;
+  .aw-list-component {
+    .aw-list-item {
+      .aw-list {
+        &-item {
+          &-title {
+            color: var(--primary);
+            font-weight: bold;
+          }
+        }
+      }
+    }
+
+    .list-responsive {
+      width: 100%;
+      margin: 0;
+    }
+
+    .pagination {
+      justify-content: center;
+    }
+
+    .aw-list-item {
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+
+      .draggable-icon {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        color: #ddd;
+      }
+      .card-body {
+        min-height: 50px;
+      }
+    }
+
+    .col-12 {
+      .aw-list-item {
+        .card-img-top {
+          height: 100%;
+          width: 30%;
+        }
+
+        .aw-list-item-action {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          padding-bottom: 10px;
+          padding-right: 10px;
+          text-align: right;
+
+          button {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .col-2,
+    .col-3,
+    .col-4,
+    .col-6 {
+      .aw-list-item {
+        .card-img-top {
+          height: 60%;
+        }
+
+        .aw-list-item-action {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          padding-top: 5px;
+          padding-bottom: 5px;
+          background-color: white;
+
+          button {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  .awesome-list {
+    clear: both;
+  }
+
+  .aw-list-header {
+    width: 100%;
+    text-align: left;
+  }
+
+  .ajax-table-img {
+    max-height: 50px;
+  }
+
+  .ajax-table-checkbox {
+    height: 18px;
+    width: 18px;
+  }
+
+  .text-avoid-overflow {
+    max-width: 30vw;
+  }
+
+  .vgt-date-range {
+    height: 32px;
+    width: 100%;
+
+    .form-control {
+      padding: 6px 12px;
+      height: 32px;
+      font-size: 12px;
+    }
+  }
+
+  .daterangepicker.dropdown-menu {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .ajax-table-header.card-header.colored-header {
+    color: white;
+
+    * {
+      color: white;
+    }
+  }
+
+  // font-awesome icons
+  .font-awesome-pencil {
+    color: #17a2b8;
+  }
+
+  .font-awesome {
+    color: #6c757d;
+  }
+}
+</style>
diff --git a/src/mixins/apiListMixin.js b/src/mixins/apiListMixin.js
index 040ed2ce..c5081688 100644
--- a/src/mixins/apiListMixin.js
+++ b/src/mixins/apiListMixin.js
@@ -67,6 +67,11 @@ export default {
     },
     savePaginationState: { type: Boolean, default: false, description: 'Whether we should save the state of the navigation page, perPage' },
     saveColumnsState: { type: Boolean, default: false, description: 'Whether we should save the state of the navigation (columns, sort etc' },
+    searchInputValue: {
+      type: String,
+      title: 'The value of the search input',
+      description: ''
+    },
     segmentField: {
       type: String,
       title: 'The field to use for segmenting the lists',
@@ -221,10 +226,12 @@ export default {
   mounted() {
     this.$awEventBus && this.$awEventBus.$on('aw-table-needs-refresh', this.refreshLocalData);
     this.onSearch = debounce(this.onSearchFresh, 300);
-    this.restoreComponentState();
+   // this.restoreComponentState();
     this.connectRouteToPagination(this.$route);
     this.serverParams = merge({}, this.serverParams, this.apiQueryParams);
+    this.getItemsDebounced = debounce(this.getItems, 500, { head: true })
     this.getItems({ useSkeleton: true, source: '[apiListMixin] refreshLocalData' });
+    this.searchInput = this.searchInputValue;
   },
 
   beforeDestroy() {
@@ -264,6 +271,9 @@ export default {
       this.$emit('after-local-refresh', { data: this.data });
     },
 
+    getItemsDebounced(options = { useSkeleton: false }) {
+
+    },
     /** GET ENTITY ITEMS */
     getItems(options = { useSkeleton: false }) {
 
diff --git a/src/translations/en.json b/src/translations/en.json
index 801d8ad8..f292267e 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -85,6 +85,7 @@
   "AwesomeTable": {
     "buttons": {
       "filters": "Filters",
+      "filter": "Filter",
       "refresh": "Refresh",
       "excel": "Exporter tout",
       "excel-currentpage": "Export data",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index d9b428c7..86f5019a 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -85,6 +85,7 @@
   "AwesomeTable": {
     "buttons": {
       "filters": "Filtrer",
+      "filter": "Filtrer",
       "refresh": "Rafraichir",
       "excel": "Exporter toutes les données",
       "searchInput": "Rechercher",