diff --git a/assets/vue/mixins/ListMixin.js b/assets/vue/mixins/ListMixin.js
index 65c109c15e..43cf4199fb 100644
--- a/assets/vue/mixins/ListMixin.js
+++ b/assets/vue/mixins/ListMixin.js
@@ -12,7 +12,7 @@ export default {
         //sortBy: [], vuetify
         //sortDesc: [], , vuetify
         page: 1,
-        itemsPerPage: 5
+        itemsPerPage: 20
       },
       filters: {}
     };
@@ -40,10 +40,36 @@ export default {
       this.options.totalItems = this.totalItems;
     }
   },
-
   methods: {
+    fetchNewItems({ page, itemsPerPage, sortBy, sortDesc, totalItems } = {}) {
+      let params = {
+        ...this.filters
+      };
+
+      if (itemsPerPage > 0) {
+        params = { ...params, itemsPerPage, page };
+      }
+
+      if (this.$route.params.node) {
+        params[`resourceNode.parent`] = this.$route.params.node;
+      }
+
+      if (isString(sortBy) && isBoolean(sortDesc)) {
+        //params[`order[${sortBy[0]}]`] = sortDesc[0] ? 'desc' : 'asc'
+        params[`order[${sortBy}]`] = sortDesc ? 'desc' : 'asc'
+      }
+
+      //this.resetList = true;
+
+      this.getPage(params).then(() => {
+        this.options.sortBy = sortBy;
+        this.options.sortDesc = sortDesc;
+        this.options.itemsPerPage = itemsPerPage;
+        this.options.totalItems = totalItems;
+      });
+    },
     onUpdateOptions({ page, itemsPerPage, sortBy, sortDesc, totalItems } = {}) {
-      console.log({ page, itemsPerPage, sortBy, sortDesc, totalItems });
+      //console.log({ page, itemsPerPage, sortBy, sortDesc, totalItems });
       let params = {
         ...this.filters
       };
@@ -62,7 +88,6 @@ export default {
       }
 
       this.resetList = true;
-    console.log(params);
 
       this.getPage(params).then(() => {
         this.options.sortBy = sortBy;
diff --git a/assets/vue/store/modules/crud.js b/assets/vue/store/modules/crud.js
index 1417811044..6976e4169b 100644
--- a/assets/vue/store/modules/crud.js
+++ b/assets/vue/store/modules/crud.js
@@ -121,7 +121,6 @@ export default function makeCrudModule({
               retrieved['hydra:totalItems']
             );
             commit(ACTIONS.SET_VIEW, retrieved['hydra:view']);
-
             if (true === state.resetList) {
               commit(ACTIONS.RESET_LIST);
             }
diff --git a/assets/vue/store/security.js b/assets/vue/store/security.js
index 7c6fc47958..735107c8aa 100644
--- a/assets/vue/store/security.js
+++ b/assets/vue/store/security.js
@@ -29,6 +29,9 @@ export default {
         isAdmin(state, getters) {
             return getters.isAuthenticated && (getters.hasRole('ROLE_SUPER_ADMIN') || getters.hasRole('ROLE_ADMIN'));
         },
+        isCurrentTeacher(state, getters) {
+            return getters.isAuthenticated && (getters.hasRole('ROLE_CURRENT_COURSE_TEACHER'));
+        },
         getUser(state) {
             return state.user;
         },
diff --git a/assets/vue/views/documents/List.vue b/assets/vue/views/documents/List.vue
index cfd1dfe58c..12941bade2 100644
--- a/assets/vue/views/documents/List.vue
+++ b/assets/vue/views/documents/List.vue
@@ -27,6 +27,20 @@
       </b-col>
       <b-col />
       <b-col>
+<!--        <div v-if="this.selected.length > 0" >-->
+<!--          <b-button variant="info" size="sm" @click="deleteSelected">-->
+<!--              {{ $t('Info') }}-->
+<!--            </b-button>-->
+
+<!--           <b-button variant="secondary" size="sm" @click="deleteSelected">-->
+<!--              {{ $t('Edit') }}-->
+<!--            </b-button>-->
+
+<!--           <b-button variant="danger" size="sm" @click="deleteSelected">-->
+<!--              {{ $t('Delete') }}-->
+<!--            </b-button>-->
+<!--        </div>-->
+
         <b-pagination
           v-model="options.page"
           :disabled.sync="isLoading"
@@ -51,10 +65,9 @@
           :per-page="0"
           :fields="fields"
           :items="items"
-
           @row-selected="onRowSelected"
-
           selectable
+          small
           :current-page.sync="options.page"
           :sort-by.sync="options.sortBy"
           :sort-desc.sync="options.sortDesc"
@@ -71,16 +84,16 @@
             </div>
           </template>
 
-          <template v-slot:cell(selected)="{ rowSelected }">
-        <template v-if="rowSelected">
-          <span aria-hidden="true">&check;</span>
-          <span class="sr-only">{{ $t('Selected') }}</span>
-        </template>
-        <template v-else>
-          <span aria-hidden="true">&nbsp;</span>
-          <span class="sr-only">{{ $t('Not selected') }}</span>
-        </template>
-      </template>
+<!--          <template v-slot:cell(selected)="{ rowSelected }">-->
+<!--            <template v-if="rowSelected">-->
+<!--              <span aria-hidden="true">&check;</span>-->
+<!--              <span class="sr-only">{{ $t('Selected') }}</span>-->
+<!--            </template>-->
+<!--            <template v-else>-->
+<!--              <span aria-hidden="true">&nbsp;</span>-->
+<!--              <span class="sr-only">{{ $t('Not selected') }}</span>-->
+<!--            </template>-->
+<!--          </template>-->
 
           <template
             v-slot:cell(resourceNode.title)="row"
@@ -121,6 +134,7 @@
           </template>
 
           <template
+              v-if="isAuthenticated && isCurrentTeacher"
             v-slot:cell(action)="row"
           >
             <ActionCell
@@ -131,6 +145,19 @@
               :handle-delete="() => deleteHandler(row.item)"
             />
           </template>
+
+            <template
+                v-else
+                v-slot:cell(action)="row"
+            >
+            <ActionCell
+                slot="action"
+                :row="row"
+                :handle-show="() => showHandler(row.item)"
+            />
+          </template>
+
+
         </b-table>
 
         <p>
@@ -159,7 +186,7 @@ export default {
   components: {
     Toolbar,
     ActionCell,
-    ResourceFileIcon
+    ResourceFileIcon,
   },
   mixins: [ListMixin],
   data() {
@@ -167,7 +194,6 @@ export default {
       sortBy: 'title',
       sortDesc: false,
       fields: [
-        'selected',
         {label: this.$i18n.t('Title'), key: 'resourceNode.title', sortable: true},
         {label: this.$i18n.t('Modified'), key: 'resourceNode.updatedAt', sortable: true},
         {label: this.$i18n.t('Size'), key: 'resourceNode.resourceFile.size', sortable: true},
@@ -176,6 +202,7 @@ export default {
       pageOptions: [5, 10, 15, 20, this.$i18n.t('All')],
       selected: [],
       selectMode: 'multi',
+      isBusy: false
     };
 
   },
@@ -183,15 +210,50 @@ export default {
     let nodeId = this.$route.params['node'];
     this.findResourceNode('/api/resource_nodes/' + nodeId);
     this.onUpdateOptions(this.options);
+
+
+  },
+  mounted() {
+    // Detect when scrolled to bottom.
+    /*const listElm = document.querySelector('#documents');
+    listElm.addEventListener('scroll', e => {
+      console.log('aaa');
+      if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
+        this.onScroll();
+      }
+    });*/
+
+    //const tableScrollBody = this.$refs['selectableTable'].$el;
+    /* Consider debouncing the event call */
+    //tableScrollBody.addEventListener("scroll", this.onScroll);
+
+    //window.addEventListener('scroll', this.onScroll)
+
+    window.addEventListener('scroll', () =>{
+      /*if(window.top.scrollY > window.outerHeight){
+        if (!this.isBusy) {
+          this.fetchItems();
+        }
+      }*/
+    });
+    /*const tableScrollBody = this.$refs['documents'];
+    tableScrollBody.addEventListener("scroll", this.onScroll);*/
   },
   computed: {
     // From crud.js list function
     ...mapGetters('documents', {
-      items: 'list'
+      items: 'list',
     }),
     ...mapGetters('resourcenode', {
       resourceNode: 'getResourceNode'
     }),
+    ...mapGetters({
+
+      'isAuthenticated': 'security/isAuthenticated',
+      'isAdmin': 'security/isAdmin',
+      'isCurrentTeacher': 'security/isCurrentTeacher',
+    }),
+
     // From ListMixin
     ...mapFields('documents', {
       deletedItem: 'deleted',
@@ -201,8 +263,40 @@ export default {
       totalItems: 'totalItems',
       view: 'view'
     }),
+
   },
   methods: {
+    async fetchItems() {
+      console.log('fetchItems');
+      /* No need to call if all items retrieved */
+      if (this.items.length === this.totalItems) return;
+
+      /* Enable busy state */
+      this.isBusy = true;
+
+      /* Missing error handling if call fails */
+      let currentPage = this.options.page;
+      console.log(currentPage);
+      const startIndex = currentPage++ * this.options.itemsPerPage;
+      const endIndex = startIndex + this.options.itemsPerPage;
+
+      console.log(this.items.length);
+      console.log(this.totalItems);
+      console.log(startIndex, endIndex);
+
+      this.options.page = currentPage;
+
+      await this.fetchNewItems(this.options);
+
+      //const newItems = await this.callDatabase(startIndex, endIndex);
+
+      /* Add new items to existing ones */
+      //this.items = this.items.concat(newItems);
+
+      /* Disable busy state */
+      this.isBusy = false;
+      return true;
+    },
     onRowSelected(items) {
       this.selected = items
     },