diff --git a/assets/css/app.scss b/assets/css/app.scss
index 5d4ac74165..35cf3e45b7 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -40,7 +40,7 @@
 //@import "~bootstrap-select/sass/bootstrap-select";
 //@import '~pretty-checkbox/src/pretty-checkbox.scss';
 //@import '~jquery-ui/themes/base/all.css';
-/*
+
 @layer components {
   .card {
     @apply bg-white rounded shadow-lg;
@@ -62,6 +62,10 @@
     @apply text-white bg-blue-700 hover:bg-blue-800;
   }
 
+  .btn-success {
+    @apply text-white bg-green-700 hover:bg-green-800;
+  }
+
   .btn-danger {
     @apply text-white bg-red-700 hover:bg-red-800;
   }
@@ -135,7 +139,7 @@
   }
 
   @import "scss/index.scss";
-}*/
+}
 
 a.router-link-exact-active {
   //@apply border-b-2 bg-gray-100 border-gray-500 text-gray-500 rounded-t;
diff --git a/assets/vue/components/ActionCell.vue b/assets/vue/components/ActionCell.vue
index 7e4f625934..60f5b3ae7c 100644
--- a/assets/vue/components/ActionCell.vue
+++ b/assets/vue/components/ActionCell.vue
@@ -1,32 +1,38 @@
 <template>
-  <q-td slot="body-cell-action" auto-width>
-    <q-btn
-        v-if="handleShow"
-        dense
-        color="secondary"
-        @click="handleShow"
-        label="Show"
-    />
-    <q-btn
-        v-if="handleEdit"
-           dense
-           color="secondary"
-           @click="handleEdit"
-        label="Edit"
-    />
-    <q-btn
-        v-if="handleDelete"
-        label="Delete"
-        dense
-        color="red"
-        @click="confirmDeleteClick = true"
-    />
-    <ConfirmDelete
-        v-if="handleDelete"
-        :show="confirmDeleteClick"
-        :handle-delete="handleDelete"
-        :handle-cancel="() => (confirmDeleteClick = false)"
-    />
+<!--  auto-width-->
+  <q-td slot="body-cell-action" >
+    <div class="p-4 flex flex-row gap-1">
+      <q-btn
+          v-if="handleShow"
+          no-caps
+          dense
+          color="secondary"
+          @click="handleShow"
+          label="Show"
+      />
+      <q-btn
+          v-if="handleEdit"
+          no-caps
+             dense
+             color="secondary"
+             @click="handleEdit"
+          label="Edit"
+      />
+      <q-btn
+          v-if="handleDelete"
+          no-caps
+          label="Delete"
+          dense
+          color="red"
+          @click="confirmDeleteClick = true"
+      />
+      <ConfirmDelete
+          v-if="handleDelete"
+          :show="confirmDeleteClick"
+          :handle-delete="handleDelete"
+          :handle-cancel="() => (confirmDeleteClick = false)"
+      />
+    </div>
   </q-td>
 </template>
 
diff --git a/assets/vue/components/Toolbar.vue b/assets/vue/components/Toolbar.vue
index b83bcdff68..0178140e0f 100644
--- a/assets/vue/components/Toolbar.vue
+++ b/assets/vue/components/Toolbar.vue
@@ -1,98 +1,109 @@
 <template>
-  <q-toolbar class="q-my-md">
+  <div class="q-card">
     <slot name="left" />
-    <q-space />
+<!--    <q-space />-->
+    <div class="p-4 flex flex-row gap-1">
+      <q-btn
+        v-if="handleList"
+        :loading="isLoading"
+        color="primary"
+        @click="listItem"
+        unelevated
+      >
+        {{ $t('List') }}
+      </q-btn>
 
-    <q-btn
-      v-if="handleList"
-      :loading="isLoading"
-      color="primary"
-      @click="listItem"
-      unelevated
-    >
-      {{ $t('List') }}
-    </q-btn>
-    <q-btn
-      v-if="handleEdit"
-      :loading="isLoading"
-      color="primary"
-      @click="editItem"
-      unelevated
-    >
-      {{ $t('Edit') }}
-    </q-btn>
+      <q-btn
+        v-if="handleEdit"
+        no-caps
+        class="btn btn-primary"
+        :loading="isLoading"
+        @click="editItem"
+        unelevated
+      >
+        {{ $t('Edit') }}
+      </q-btn>
 
-    <q-btn
-      v-if="handleSubmit"
-      :loading="isLoading"
-      color="primary"
-      @click="submitItem"
-      unelevated
-    >
-      <font-awesome-icon icon="save" />
-      {{ $t('Submit') }}
-    </q-btn>
-    <!--      <v-btn-->
-    <!--        v-if="handleReset"-->
-    <!--        color="primary"-->
-    <!--        class="ml-sm-2"-->
-    <!--        @click="resetItem"-->
-    <!--      >-->
-    <!--        {{ $t('Reset') }}-->
-    <!--      </v-btn>-->
-    <q-btn
-      v-if="handleDelete"
-      color="red"
-      unelevated
-      class="ml-sm-2"
-      @click="confirmDelete = true"
-    >
-      {{ $t('Delete') }}
-    </q-btn>
+      <q-btn
+        v-if="handleSubmit"
+        no-caps
+        class="btn btn-primary"
+        :loading="isLoading"
+        @click="submitItem"
+        unelevated
+      >
+        <font-awesome-icon icon="save" />
+        {{ $t('Submit') }}
+      </q-btn>
+      <!--      <v-btn-->
+      <!--        v-if="handleReset"-->
+      <!--        color="primary"-->
+      <!--        class="ml-sm-2"-->
+      <!--        @click="resetItem"-->
+      <!--      >-->
+      <!--        {{ $t('Reset') }}-->
+      <!--      </v-btn>-->
+      <q-btn
+        v-if="handleDelete"
+        no-caps
+        class="btn btn-danger"
+        unelevated
+        @click="confirmDelete = true"
+      >
+        {{ $t('Delete') }}
+      </q-btn>
 
-    <q-btn
-      v-if="handleAdd"
-      color="primary"
-      @click="addItem"
-    >
-      <font-awesome-icon icon="folder-plus" /> New folder
-    </q-btn>
 
-    <q-btn
-      v-if="handleAddDocument"
-      color="primary"
-      @click="addDocument"
-    >
-      <font-awesome-icon icon="file-alt" /> New document
-    </q-btn>
+<!--      color="primary"-->
 
-    <q-btn
-      v-if="handleUploadDocument"
-      color="primary"
-      @click="uploadDocument"
-    >
-      <font-awesome-icon icon="cloud-upload-alt" /> File upload
-    </q-btn>
+      <q-btn
+        v-if="handleAdd"
+        no-caps
+        class="btn btn-primary"
+        @click="addItem"
+      >
+        <font-awesome-icon icon="folder-plus" />
+        New folder
+      </q-btn>
 
-<!--    <DataFilter-->
-<!--      v-if="filters"-->
-<!--      :handle-filter="onSendFilter"-->
-<!--      :handle-reset="resetFilter"-->
-<!--    >-->
-<!--      <DocumentsFilterForm-->
-<!--        ref="filterForm"-->
-<!--        slot="filter"-->
-<!--        :values="filters"-->
-<!--      />-->
-<!--    </DataFilter>-->
+      <q-btn
+        no-caps
+        class="btn btn-primary"
+        v-if="handleAddDocument"
+        @click="addDocument"
+      >
+        <font-awesome-icon icon="file-alt" /> New document
+      </q-btn>
 
-    <ConfirmDelete
-      v-if="handleDelete"
-      :visible="confirmDelete"
-      :handle-delete="handleDelete"
-      @close="confirmDelete = false"
-    />
-  </q-toolbar>
+      <q-btn
+        no-caps
+        class="btn btn-primary"
+        v-if="handleUploadDocument"
+        @click="uploadDocument"
+      >
+        <font-awesome-icon icon="cloud-upload-alt" /> File upload
+      </q-btn>
+
+  <!--    <DataFilter-->
+  <!--      v-if="filters"-->
+  <!--      :handle-filter="onSendFilter"-->
+  <!--      :handle-reset="resetFilter"-->
+  <!--    >-->
+  <!--      <DocumentsFilterForm-->
+  <!--        ref="filterForm"-->
+  <!--        slot="filter"-->
+  <!--        :values="filters"-->
+  <!--      />-->
+  <!--    </DataFilter>-->
+
+      <ConfirmDelete
+        v-if="handleDelete"
+        :visible="confirmDelete"
+        :handle-delete="handleDelete"
+        @close="confirmDelete = false"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/assets/vue/components/documents/Form.vue b/assets/vue/components/documents/Form.vue
index 5cde0b2c99..837baa4e01 100644
--- a/assets/vue/components/documents/Form.vue
+++ b/assets/vue/components/documents/Form.vue
@@ -1,15 +1,13 @@
 <template>
-
+<!--  @input="$v.item.title.$touch()"-->
+<!--  @blur="$v.item.title.$touch()"-->
         <q-input
           id="item_title"
           v-model="item.title"
           :error-messages="titleErrors"
           :placeholder="$t('Title')"
           required
-          @input="$v.item.title.$touch()"
-          @blur="$v.item.title.$touch()"
         />
-
 </template>
 
 <script>
@@ -45,16 +43,15 @@ export default {
     };
   },
   computed: {
-    // eslint-disable-next-line
     item() {
       return this.initialValues || this.values;
     },
     titleErrors() {
       const errors = [];
 
-      if (!this.$v.item.title.$dirty) return errors;
+      /*if (!this.$v.item.title.$dirty) return errors;
       has(this.violations, 'title') && errors.push(this.violations.title);
-      !this.$v.item.title.required && errors.push(this.$t('Field is required'));
+      !this.$v.item.title.required && errors.push(this.$t('Field is required'));*/
 
       return errors;
     },
diff --git a/assets/vue/hooks/useState.js b/assets/vue/hooks/useState.js
index a07e2bf549..4b922cc924 100644
--- a/assets/vue/hooks/useState.js
+++ b/assets/vue/hooks/useState.js
@@ -5,11 +5,9 @@ const toggleSidebar = () => {
   isSidebarOpen.value = !isSidebarOpen.value
 }
 
-const isSettingsPanelOpen = ref(false)
-
-const isSearchPanelOpen = ref(false)
-
-const isNotificationsPanelOpen = ref(false)
+const isSettingsPanelOpen = ref(false);
+const isSearchPanelOpen = ref(false);
+const isNotificationsPanelOpen = ref(false);
 
 export default function useState() {
   return {
diff --git a/assets/vue/mixins/ListMixin.js b/assets/vue/mixins/ListMixin.js
index d2d65b22a0..df36557065 100644
--- a/assets/vue/mixins/ListMixin.js
+++ b/assets/vue/mixins/ListMixin.js
@@ -15,7 +15,7 @@ export default {
         sortBy: 'resourceNode.title',
         descending: false,
         page: 1, // page to be displayed
-        rowsPerPage: 3, // maximum displayed rows
+        rowsPerPage: 10, // maximum displayed rows
         rowsNumber: 10, // max number of rows
       },
       nextPage: null,
@@ -26,7 +26,7 @@ export default {
         //sortBy: [], vuetify
         //sortDesc: [], , vuetify
         page: 1,
-        itemsPerPage: 3
+        itemsPerPage: 10
       },
       //filters: {}
     };
@@ -66,10 +66,13 @@ export default {
     onRequest(props) {
       console.log('onRequest');
       console.log(props);
-      const {  page, rowsPerPage: itemsPerPage, sortBy, descending } = props.pagination;
+      const { page, rowsPerPage: itemsPerPage, sortBy, descending } = props.pagination;
       const filter = props.filter;
 
       this.nextPage = page;
+      if (isEmpty(this.nextPage)) {
+        this.nextPage = 1;
+      }
 
       let params = {};
       if (itemsPerPage > 0) {
@@ -133,12 +136,14 @@ export default {
 
     onSendFilter() {
       this.resetList = true;
-      this.onUpdateOptions(this.options);
+      this.pagination.page = 1;
+      this.onRequest({pagination: this.pagination})
     },
 
     resetFilter() {
       this.filters = {};
-      this.onUpdateOptions(this.options);
+      this.pagination.page = 1;
+      this.onRequest({pagination: this.pagination})
     },
 
     addHandler() {
@@ -216,7 +221,10 @@ export default {
     },
     deleteHandler(item) {
       console.log(item);
-      this.deleteItem(item).then(() => this.onUpdateOptions(this.options));
+      this.pagination.page = 1;
+      this.deleteItem(item).then(() =>
+          this.onRequest({pagination: this.pagination})
+      );
     },
     formatDateTime
   }
diff --git a/assets/vue/store/index.js b/assets/vue/store/index.js
index 57ba8fd0e2..81cbb37340 100644
--- a/assets/vue/store/index.js
+++ b/assets/vue/store/index.js
@@ -2,9 +2,9 @@ import { createStore, createLogger } from "vuex";
 import notifications from './modules/notifications';
 import SecurityModule from "./security";
 import createPersistedState from "vuex-persistedstate";
-
+//createLogger(),
 export default createStore({
-    plugins: [createLogger(), createPersistedState()],
+    plugins: [createPersistedState()],
     modules: {
         notifications,
         security: SecurityModule,
diff --git a/assets/vue/store/modules/crud.js b/assets/vue/store/modules/crud.js
index 7ee032bf5c..8be5546a18 100644
--- a/assets/vue/store/modules/crud.js
+++ b/assets/vue/store/modules/crud.js
@@ -94,7 +94,6 @@ export default function makeCrudModule({
           .catch(e => handleError(commit, e));
       },
       del: ({ commit }, item) => {
-
         console.log('del');
         commit(ACTIONS.TOGGLE_LOADING);
 
diff --git a/assets/vue/utils/fetch.js b/assets/vue/utils/fetch.js
index 6bd04cdd12..04b45c4a87 100644
--- a/assets/vue/utils/fetch.js
+++ b/assets/vue/utils/fetch.js
@@ -52,7 +52,6 @@ export default function(id, options = {}) {
             .join('&');
         id = `${id}?${queryString}`;
 
-
         console.log(id, 'id');
     }
 
@@ -124,6 +123,8 @@ export default function(id, options = {}) {
     }*/
 
   return global.fetch(new URL(id, entryPoint), options).then(response => {
+    console.log(response);
+
     if (response.ok) return response;
 
     return response.json().then(json => {
diff --git a/assets/vue/views/documents/List.vue b/assets/vue/views/documents/List.vue
index 4a64bd9c4d..984f32179f 100644
--- a/assets/vue/views/documents/List.vue
+++ b/assets/vue/views/documents/List.vue
@@ -1,81 +1,80 @@
 <template>
-   <div class="q-pa-md">
-    <Toolbar
-       :handle-add="addHandler"
-       :handle-add-document="addDocumentHandler"
-       :handle-upload-document="uploadDocumentHandler"
-       :filters="filters"
-       :on-send-filter="onSendFilter"
-       :reset-filter="resetFilter"
-     />
+  <Toolbar
+     :handle-add="addHandler"
+     :handle-add-document="addDocumentHandler"
+     :handle-upload-document="uploadDocumentHandler"
+     :filters="filters"
+     :on-send-filter="onSendFilter"
+     :reset-filter="resetFilter"
+   />
 
-      <q-table
-          dense
-          flat
-          :rows="items"
-          :columns="columns"
-          row-key="@id"
-          :filter="filter"
-          @request="onRequest"
-          v-model:pagination="pagination"
-          :no-data-label="$t('Data unavailable')"
-          :no-results-label="$t('No results')"
-          :loading-label="$t('Loading...')"
-          :rows-per-page-label="$t('Records per page:')"
-          :loading="isLoading"
-          selection="multiple"
-          v-model:selected="selectedItems"
-      >
-         <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td auto-width>
-                <q-checkbox dense v-model="props.selected" />
-              </q-td>
+    <q-table
+        dense
+        :rows="items"
+        :columns="columns"
+        row-key="@id"
+        :filter="filter"
+        @request="onRequest"
+        v-model:pagination="pagination"
+        :no-data-label="$t('Data unavailable')"
+        :no-results-label="$t('No results')"
+        :loading-label="$t('Loading...')"
+        :rows-per-page-label="$t('Records per page:')"
+        :rows-per-page-options="[10, 20, 50, 0]"
+        :loading="isLoading"
+        selection="multiple"
+        v-model:selected="selectedItems"
+    >
+       <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-checkbox dense v-model="props.selected" />
+            </q-td>
 
-              <q-td key="resourceNode.title" :props="props">
-                <div v-if="props.row.resourceNode.resourceFile">
-                  <a
-                      data-fancybox="gallery"
-                      :href="props.row.contentUrl"
-                  >
-                    <ResourceFileIcon :file="props.row" />
-                    {{ props.row.title }}
-                  </a>
-                </div>
-                <div v-else>
-                  <a @click="handleClick(props.row)" class="cursor-pointer" >
-                    <font-awesome-icon
-                        icon="folder"
-                        size="lg"
-                    />
-                    {{ props.row.resourceNode.title }}
-                  </a>
-                </div>
-              </q-td>
+            <q-td key="resourceNode.title" :props="props">
+              <div v-if="props.row.resourceNode.resourceFile">
+                <a
+                    data-fancybox="gallery"
+                    :href="props.row.contentUrl"
+                >
+                  <ResourceFileIcon :file="props.row" />
+                  {{ props.row.title }}
+                </a>
+              </div>
+              <div v-else>
+                <a @click="handleClick(props.row)" class="cursor-pointer" >
+                  <font-awesome-icon
+                      icon="folder"
+                      size="lg"
+                  />
+                  {{ props.row.resourceNode.title }}
+                </a>
+              </div>
+            </q-td>
 
-              <q-td key="resourceNode.updatedAt" :props="props">
-                {{$luxonDateTime.fromISO(props.row.resourceNode.updatedAt).toRelative() }}
-              </q-td>
+            <q-td key="resourceNode.updatedAt" :props="props">
+              {{$luxonDateTime.fromISO(props.row.resourceNode.updatedAt).toRelative() }}
+            </q-td>
 
-              <q-td key="resourceNode.resourceFile.size" :props="props">
-                <span v-if="props.row.resourceNode.resourceFile">
-                {{
-                  $filters.prettyBytes(props.row.resourceNode.resourceFile.size)
-                }}
-                </span>
-              </q-td>
+            <q-td key="resourceNode.resourceFile.size" :props="props">
+              <span v-if="props.row.resourceNode.resourceFile">
+              {{
+                $filters.prettyBytes(props.row.resourceNode.resourceFile.size)
+              }}
+              </span>
+            </q-td>
+
+            <q-td key="action" :props="props">
+            <ActionCell
+                :handle-show="() => showHandler(props.row)"
+                :handle-edit="() => editHandler(props.row)"
+                :handle-delete="() => deleteHandler(props.row)"
+            />
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
 
-              <q-td key="action" :props="props">
-              <ActionCell
-                  :handle-show="() => showHandler(props.row)"
-                  :handle-edit="() => editHandler(props.row)"
-                  :handle-delete="() => deleteHandler(props.row)"
-              />
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
-   </div>
 </template>
 
 <script>
@@ -87,12 +86,8 @@ import Toolbar from '../../components/Toolbar.vue';
 import ResourceFileIcon from './ResourceFileIcon.vue';
 import { useRoute } from 'vue-router'
 
-//import { useToast } from 'primevue/usetoast';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { useStore } from 'vuex';
-/*const servicePrefix = 'documents';
-const { getters, actions } = list(servicePrefix);*/
-
 import isEmpty from 'lodash/isEmpty';
 
 export default {
@@ -114,7 +109,7 @@ export default {
         {name: 'resourceNode.resourceFile.size', label: this.$i18n.t('Size'), field: 'resourceNode.resourceFile.size', sortable: true},
         {name: 'action', label: this.$i18n.t('Actions'), field: 'action', sortable: false}
       ],
-      pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
+      //pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
       selected: [],
       isBusy: false,
       options: [],