diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index ebaca63d3..7f0a68ca0 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -103,7 +103,7 @@ import NavigationViewItem from '../partials/NavigationViewItem.vue'
 import NavigationTableItem from '../partials/NavigationTableItem.vue'
 import NavigationContextItem from '../partials/NavigationContextItem.vue'
 import { mapState } from 'vuex'
-import { emit } from '@nextcloud/event-bus'
+import { emit, subscribe } from '@nextcloud/event-bus'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Archive from 'vue-material-design-icons/Archive.vue'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -129,10 +129,11 @@ export default {
 		return {
 			loading: true,
 			filterString: '',
+			isNavBarVisible: true,
 		}
 	},
 	computed: {
-		...mapState(['tables', 'views', 'tablesLoading', 'contexts', 'contextsLoading']),
+		...mapState(['appNavCollapsed', 'tables', 'views', 'tablesLoading', 'contexts', 'contextsLoading']),
 		getAllNodes() {
 			return [...this.getFilteredTables, ...this.getOwnViews, ...this.getSharedViews]
 		},
@@ -178,6 +179,9 @@ export default {
 			return this.contexts.filter(context => context.name.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
 	},
+	created() {
+		subscribe('navigation-toggled', this.toggleNavigationByEventBus)
+	},
 	methods: {
 		createTable() {
 			emit('tables:table:create')
@@ -195,6 +199,9 @@ export default {
 		viewAlreadyListed(view) {
 			return this.getFilteredTables.map(t => t.id).includes(view.tableId)
 		},
+		toggleNavigationByEventBus({ open }) {
+			this.$store.commit('setAppNavCollapsed', open)
+		},
 	},
 }
 </script>
diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
index e0dc0ed41..629744f11 100644
--- a/src/shared/components/ncTable/sections/CustomTable.vue
+++ b/src/shared/components/ncTable/sections/CustomTable.vue
@@ -19,7 +19,7 @@
 				</TableHeader>
 			</thead>
 			<tbody>
-				<TableRow v-for="(row, index) in getSearchedAndFilteredAndSortedRows"
+				<TableRow v-for="(row, index) in currentPageRows"
 					:key="index"
 					data-cy="customTableRow"
 					:row="row"
@@ -29,16 +29,56 @@
 					:config="config"
 					@update-row-selection="updateRowSelection"
 					@edit-row="rowId => $emit('edit-row', rowId)" />
+				<tr />
 			</tbody>
 		</table>
+		<div class="pagination-footer" :class="{'large-width': !appNavCollapsed || isMobile}">
+			<div class="pagination-items">
+				<NcButton type="tertiary" :disabled="totalPages === 1 || pageNumber <= 1" @click="pageNumber = 1">
+					<template #icon>
+						<PageFirstIcon :size="20" />
+					</template>
+				</NcButton>
+				<NcButton type="tertiary" :disabled="totalPages === 1 || pageNumber <= 1" @click="pageNumber--">
+					<template #icon>
+						<ChevronLeftIcon :size="20" />
+					</template>
+				</NcButton>
+				<div class="page-number">
+					<NcSelect v-model="pageNumber" :options="allPageNumbersArray">
+						<template #selected-option-container="{ option }">
+							<span class="selected-page">
+								{{ option.label }} of {{ totalPages }}
+							</span>
+						</template>
+					</NcSelect>
+				</div>
+				<NcButton type="tertiary" :disabled="totalPages === 1 || pageNumber >= totalPages" @click="pageNumber++">
+					<template #icon>
+						<ChevronRightIcon :size="20" />
+					</template>
+				</NcButton>
+				<NcButton type="tertiary" :disabled="totalPages === 1 || pageNumber >= totalPages" @click="pageNumber = totalPages">
+					<template #icon>
+						<PageLastIcon :size="20" />
+					</template>
+				</NcButton>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
 import TableHeader from '../partials/TableHeader.vue'
+import PageLastIcon from 'vue-material-design-icons/PageLast.vue'
+import PageFirstIcon from 'vue-material-design-icons/PageFirst.vue'
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import TableRow from '../partials/TableRow.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { MagicFields } from '../mixins/magicFields.js'
+import { NcButton, useIsMobile, NcSelect } from '@nextcloud/vue'
+import { mapState } from 'vuex'
 
 export default {
 	name: 'CustomTable',
@@ -46,6 +86,12 @@ export default {
 	components: {
 		TableRow,
 		TableHeader,
+		NcButton,
+		PageLastIcon,
+		PageFirstIcon,
+		ChevronLeftIcon,
+		ChevronRightIcon,
+		NcSelect,
 	},
 
 	props: {
@@ -75,30 +121,39 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			selectedRows: [],
 			searchTerm: null,
 			localViewSetting: this.viewSetting,
+			pageNumber: 1,
+			rowsPerPage: 100,
 		}
 	},
 
 	computed: {
+		...mapState(['appNavCollapsed']),
+		allPageNumbersArray() {
+			return Array.from(
+				{ length: this.totalPages },
+				(value, index) => 1 + index,
+			)
+		},
+		currentPageRows() {
+			return this.getSearchedAndFilteredAndSortedRows.slice((this.pageNumber - 1) * this.rowsPerPage, ((this.pageNumber - 1) * this.rowsPerPage) + this.rowsPerPage)
+		},
+		totalPages() {
+			return Math.ceil(this.getSearchedAndFilteredAndSortedRows.length / this.rowsPerPage)
+		},
 		sorting() {
 			return this.viewSetting?.sorting
 		},
-		getSearchedAndFilteredAndSortedRows() {
-			// if we have to sort
-			if (this.viewSetting?.presetSorting) {
-				const sortColumn = this.columns.find(item => item.id === this.viewSetting.presetSorting?.[0].columnId)
-				return [...this.getSearchedAndFilteredRows].sort(sortColumn?.sort?.(this.viewSetting.presetSorting[0].mode))
-			}
-			if (this.viewSetting?.sorting) {
-				const sortColumn = this.columns.find(item => item.id === this.viewSetting.sorting[0].columnId)
-				return [...this.getSearchedAndFilteredRows].sort(sortColumn.sort(this.viewSetting.sorting[0].mode))
-			}
-			return this.getSearchedAndFilteredRows
-		},
 		getSearchedAndFilteredRows() {
 			const debug = false
 			// if we don't have to search and/or filter
@@ -119,9 +174,8 @@ export default {
 
 			const data = [] // array of rows
 			const searchString = this.viewSetting?.searchString
-
 			// each row
-			this.rows?.forEach(row => {
+			for (const row of this.rows) {
 				if (debug) {
 					console.debug('new row ===============================================', row)
 				}
@@ -209,10 +263,21 @@ export default {
 				if ((filterStatusRow || filterStatusRow === null) && searchStatusRow) {
 					data.push({ ...row })
 				}
-			})
-
+			}
 			return data
 		},
+		getSearchedAndFilteredAndSortedRows() {
+			// if we have to sort
+			if (this.viewSetting?.presetSorting) {
+				const sortColumn = this.columns.find(item => item.id === this.viewSetting.presetSorting?.[0].columnId)
+				return [...this.getSearchedAndFilteredRows].sort(sortColumn?.sort?.(this.viewSetting.presetSorting[0].mode))
+			}
+			if (this.viewSetting?.sorting) {
+				const sortColumn = this.columns.find(item => item.id === this.viewSetting.sorting[0].columnId)
+				return [...this.getSearchedAndFilteredRows].sort(sortColumn.sort(this.viewSetting.sorting[0].mode))
+			}
+			return this.getSearchedAndFilteredRows
+		},
 	},
 
 	watch: {
@@ -224,6 +289,12 @@ export default {
 		},
 	},
 
+	updated() {
+		if (this.pageNumber > this.totalPages) {
+			this.pageNumber = this.totalPages
+		}
+	},
+
 	mounted() {
 		subscribe('tables:selected-rows:deselect', ({ elementId, isView }) => this.deselectAllRows(elementId, isView))
 	},
@@ -284,7 +355,63 @@ export default {
 }
 </script>
 
+<style>
+.vs__dropdown-menu {
+	min-width: 95px !important;
+	background:var(--color-background-darker) !important;
+}
+</style>
+
 <style lang="scss" scoped>
+
+:deep(.vs__clear) {
+	display: none;
+}
+
+:deep(.v-select) {
+	min-width: 95px !important;
+	.vs__dropdown-toggle {
+		background: none;
+	}
+}
+
+.selected-page{
+	padding-left: 5px;
+
+	display:inline-flex;
+	align-items: center;
+}
+
+.page-number{
+	padding-inline: 5px;
+}
+
+.large-width{
+	width: 100vw !important;
+	left: 0 !important;
+}
+
+.pagination-items{
+	background-color: var(--color-background-darker);
+	border-radius: var(--border-radius-large);
+	pointer-events: all;
+
+	display: flex;
+	align-items: center;
+}
+
+.pagination-footer{
+	position:absolute;
+	bottom: 10px;
+	left: 300px;
+	width: calc(100vw - 316px);
+	pointer-events: none;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
 :deep(table) {
 	position: relative;
 	border-collapse: collapse;
diff --git a/src/store/store.js b/src/store/store.js
index 0095000dc..31d6e0f62 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -27,6 +27,7 @@ export default new Vuex.Store({
 		activeRowId: null,
 		activeElementIsView: false,
 		activeContextId: null,
+		appNavCollapsed: false,
 	},
 
 	getters: {
@@ -70,6 +71,9 @@ export default new Vuex.Store({
 		},
 	},
 	mutations: {
+		setAppNavCollapsed(state, value) {
+			state.appNavCollapsed = !!(value)
+		},
 		setTablesLoading(state, value) {
 			state.tablesLoading = !!(value)
 		},