diff --git a/cypress/e2e/tables-archive.cy.js b/cypress/e2e/tables-archive.cy.js
index 673dc3011b..0db3988b10 100644
--- a/cypress/e2e/tables-archive.cy.js
+++ b/cypress/e2e/tables-archive.cy.js
@@ -11,6 +11,7 @@ describe('Archive tables/views', () => {
   beforeEach(function() {
     cy.login(localUser)
     cy.visit('apps/tables')
+    cy.wait(1000)
   })
 
   it('can archive tables', () => {
diff --git a/cypress/e2e/tables-favorite.cy.js b/cypress/e2e/tables-favorite.cy.js
index 8c1d0b918e..4a754848bf 100644
--- a/cypress/e2e/tables-favorite.cy.js
+++ b/cypress/e2e/tables-favorite.cy.js
@@ -11,6 +11,7 @@ describe('Favorite tables/views', () => {
   beforeEach(function() {
     cy.login(localUser)
     cy.visit('apps/tables')
+    cy.wait(1000)
   })
 
   it('can favorite tables', () => {
diff --git a/src/App.vue b/src/App.vue
index 383b2b884a..52fd243aa8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,9 +38,9 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['tablesLoading']),
+		...mapState(['tablesLoading', 'contextsLoading']),
 		somethingIsLoading() {
-			return this.tablesLoading || this.loading
+			return this.tablesLoading || this.contextsLoading || this.loading
 		},
 	},
 	watch: {
@@ -50,6 +50,7 @@ export default {
 	},
 	async created() {
 		await this.$store.dispatch('loadTablesFromBE')
+		await this.$store.dispatch('getAllContexts')
 		await this.$store.dispatch('loadViewsSharedWithMeFromBE')
 		this.routing(this.$router.currentRoute)
 		this.observeAppContent()
@@ -67,6 +68,9 @@ export default {
 			} else if (currentRoute.path.startsWith('/view/')) {
 				this.$store.commit('setActiveViewId', parseInt(currentRoute.params.viewId))
 				this.setPageTitle(this.$store.getters.activeView.title)
+			} else if (currentRoute.path.startsWith('/application/')) {
+				this.$store.commit('setActiveContextId', parseInt(currentRoute.params.contextId))
+				this.setPageTitle(this.$store.getters.activeContext.name)
 			}
 		},
 		setPageTitle(title) {
diff --git a/src/modules/main/sections/DataTable.vue b/src/modules/main/sections/DataTable.vue
index 969d86fdb0..9b1ee65478 100644
--- a/src/modules/main/sections/DataTable.vue
+++ b/src/modules/main/sections/DataTable.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div v-if="hasViews" class="row space-T">
-			<div class="col-4 space-L">
+			<div v-if="showOptions" class="col-4 space-L">
 				<h2>
 					{{ t('tables', 'Data') }}&nbsp;&nbsp;
 					<NcActions :force-menu="true" type="secondary">
@@ -194,6 +194,10 @@ export default {
 			type: Array,
 			default: null,
 		},
+		showOptions: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data() {
diff --git a/src/modules/main/sections/TableWrapper.vue b/src/modules/main/sections/TableWrapper.vue
new file mode 100644
index 0000000000..e3db333e85
--- /dev/null
+++ b/src/modules/main/sections/TableWrapper.vue
@@ -0,0 +1,71 @@
+<template>
+	<div>
+		<ElementDescription :active-element="table" :view-setting.sync="localViewSetting" />
+		<DataTable :show-options="false" :table="table" :columns="columns" :rows="rows" :view-setting.sync="localViewSetting"
+			@create-column="$emit('create-column')"
+			@import="$emit('import')"
+			@download-csv="$emit('download-csv')"
+			@toggle-share="$emit('toggle-share')"
+			@show-integration="$emit('show-integration')"
+			@create-view="createView" />
+	</div>
+</template>
+
+<script>
+import ElementDescription from './ElementDescription.vue'
+import DataTable from './DataTable.vue'
+import { mapState } from 'vuex'
+
+import { emit } from '@nextcloud/event-bus'
+
+export default {
+	components: {
+		ElementDescription,
+		DataTable,
+	},
+
+	props: {
+		table: {
+			type: Object,
+			default: null,
+		},
+		columns: {
+			type: Array,
+			default: null,
+		},
+		rows: {
+			type: Array,
+			default: null,
+		},
+		viewSetting: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			localViewSetting: this.viewSetting,
+		}
+	},
+	computed: {
+		...mapState(['views']),
+		hasViews() {
+			return this.views.some(v => v.tableId === this.table.id)
+		},
+	},
+	watch: {
+		localViewSetting() {
+			this.$emit('update:viewSetting', this.localViewSetting)
+		},
+		viewSetting() {
+			this.localViewSetting = this.viewSetting
+		},
+	},
+	methods: {
+		createView() {
+			emit('tables:view:create', { tableId: this.table.id, viewSetting: this.viewSetting.length > 0 ? this.viewSetting : this.localViewSetting })
+		},
+	},
+}
+</script>
diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
new file mode 100644
index 0000000000..b5810ce857
--- /dev/null
+++ b/src/modules/modals/CreateContext.vue
@@ -0,0 +1,148 @@
+<template>
+	<NcModal v-if="showModal" size="normal" @close="actionCancel">
+		<div class="modal__content">
+			<div class="row">
+				<div class="col-4">
+					<h2>{{ t('tables', 'Create an application') }}</h2>
+				</div>
+			</div>
+			<div class="row space-T">
+				<div class="col-4 mandatory">
+					{{ t('tables', 'Title') }}
+				</div>
+				<div class="col-4" style="display: inline-flex;">
+					<!-- TODO replace with Context's icon picker -->
+					<NcEmojiPicker :close-on-select="true" @select="setIcon">
+						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for the application')"
+							:title="t('tables', 'Select icon')" @click.prevent>
+							{{ icon }}
+						</NcButton>
+					</NcEmojiPicker>
+					<input v-model="title" :class="{ missing: errorTitle }" type="text"
+						:placeholder="t('tables', 'Title of the new application')" @input="titleChangedManually">
+				</div>
+			</div>
+			<div class="col-4 row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Description') }}
+				</div>
+				<input v-model="description" type="text"
+					:placeholder="t('tables', 'Description of the new application')">
+			</div>
+			<div class="col-4 row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Resources') }}
+				</div>
+				<NcContextResource :resources.sync="resources" />
+			</div>
+			<div class="row space-R">
+				<div class="fix-col-4 end">
+					<NcButton type="primary" :aria-label="t('tables', 'Create application')" @click="submit">
+						{{ t('tables', 'Create application') }}
+					</NcButton>
+				</div>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
+import '@nextcloud/dialogs/dist/index.css'
+import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
+
+export default {
+	name: 'CreateContext',
+	components: {
+		NcModal,
+		NcEmojiPicker,
+		NcButton,
+		NcContextResource,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			title: '',
+			icon: '😀',
+			customIconChosen: false,
+			customTitleChosen: false,
+			errorTitle: false,
+			description: '',
+			resources: [],
+		}
+	},
+	watch: {
+		title() {
+			if (this.title.length >= 200) {
+				showError(t('tables', 'The title limit is reached with 200 characters. Please use a shorter title.'))
+				this.title = this.title.slice(0, 199)
+			}
+		},
+	},
+	methods: {
+		titleChangedManually() {
+			this.customTitleChosen = true
+		},
+		setIcon(icon) {
+			this.icon = icon
+			this.customIconChosen = true
+		},
+		actionCancel() {
+			this.reset()
+			this.$emit('close')
+		},
+		async submit() {
+			if (this.title === '') {
+				showError(t('tables', 'Cannot create new context. Title is missing.'))
+				this.errorTitle = true
+			} else {
+				const newContextId = await this.sendNewContextToBE()
+				if (newContextId) {
+					await this.$router.push('/application/' + newContextId)
+					this.actionCancel()
+				}
+			}
+		},
+		async sendNewContextToBE() {
+			const dataResources = this.resources.map(resource => {
+				return {
+					id: parseInt(resource.id),
+					type: parseInt(resource.nodeType),
+					permissions: 660,
+				}
+			})
+			const data = {
+				name: this.title,
+				iconName: this.icon,
+				description: this.description,
+				nodes: dataResources,
+			}
+			const res = await this.$store.dispatch('insertNewContext', { data })
+			if (res) {
+				return res.id
+			} else {
+				showError(t('tables', 'Could not create new table'))
+			}
+		},
+		reset() {
+			this.title = ''
+			this.errorTitle = false
+			this.icon = '😀'
+			this.customIconChosen = false
+			this.customTitleChosen = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__content {
+	padding-right: 0 !important;
+}
+</style>
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
new file mode 100644
index 0000000000..932524599d
--- /dev/null
+++ b/src/modules/modals/EditContext.vue
@@ -0,0 +1,171 @@
+<template>
+	<NcModal v-if="showModal" size="normal" @close="actionCancel">
+		<div class="modal__content" data-cy="editContextModal">
+			<div class="row">
+				<div class="col-4">
+					<h2>{{ t('tables', 'Edit application') }}</h2>
+				</div>
+			</div>
+			<div class="row space-T">
+				<div class="col-4 mandatory">
+					{{ t('tables', 'Title') }}
+				</div>
+				<div class="col-4" style="display: inline-flex;">
+					<!-- TODO replace with Context's icon picker -->
+					<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
+						<NcButton type="tertiary" :aria-label="t('tables', 'Select icon for application')"
+							:title="t('tables', 'Select icon')" @click.prevent>
+							{{ icon ? icon : '...' }}
+						</NcButton>
+					</NcEmojiPicker>
+					<input v-model="title" :class="{ missing: errorTitle }" type="text"
+						:placeholder="t('tables', 'Title of the application')">
+				</div>
+			</div>
+			<div class="col-4 row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Description') }}
+				</div>
+				<input v-model="description" type="text" :placeholder="t('tables', 'Description of the application')">
+			</div>
+			<div class="col-4 row space-T">
+				<div class="col-4">
+					{{ t('tables', 'Resources') }}
+				</div>
+				<NcContextResource :resources.sync="resources" />
+			</div>
+
+			<div class="row space-R">
+				<div class="fix-col-4 end">
+					<NcButton type="primary" @click="submit">
+						{{ t('tables', 'Save') }}
+					</NcButton>
+				</div>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import '@nextcloud/dialogs/dist/index.css'
+import { mapGetters, mapState } from 'vuex'
+import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
+import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../../shared/constants.js'
+
+export default {
+	name: 'EditContext',
+	components: {
+		NcModal,
+		NcEmojiPicker,
+		NcButton,
+		NcContextResource,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+		contextId: {
+			type: Number,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			title: '',
+			icon: '',
+			description: '',
+			errorTitle: false,
+			resources: [],
+		}
+	},
+	computed: {
+		...mapGetters(['getContext']),
+		...mapState(['tables', 'views']),
+		localContext() {
+			return this.getContext(this.contextId)
+		},
+	},
+	watch: {
+		title() {
+			if (this.title && this.title.length >= 200) {
+				showError(t('tables', 'The title limit is reached with 200 characters.'))
+				this.title = this.title.slice(0, 199)
+			}
+		},
+		contextId() {
+			if (this.contextId) {
+				const context = this.getContext(this.contextId)
+				this.title = context.name
+				this.icon = context.iconName
+				this.description = context.description
+				this.resources = context ? [...this.getContextResources(context)] : []
+			}
+		},
+	},
+	methods: {
+		actionCancel() {
+			this.reset()
+			this.$emit('close')
+		},
+		// TODO show edited changes if we're currently viewing the active context
+		async submit() {
+			if (this.title === '') {
+				showError(t('tables', 'Cannot update context. Title is missing.'))
+				this.errorTitle = true
+			} else {
+				const dataResources = this.resources.map(resource => {
+					return {
+						id: parseInt(resource.id),
+						type: parseInt(resource.nodeType),
+						// TODO get right permissions for the node
+						permissions: 660,
+					}
+				})
+				const data = {
+					name: this.title,
+					iconName: this.icon,
+					description: this.description,
+					nodes: dataResources,
+				}
+				const res = await this.$store.dispatch('updateContext', { id: this.contextId, data })
+				if (res) {
+					showSuccess(t('tables', 'Updated context "{icon}{contextTitle}".', { icon: this.icon ? this.icon + ' ' : '', contextTitle: this.title }))
+					this.actionCancel()
+				}
+			}
+		},
+		reset() {
+			const context = this.getContext(this.contextId)
+			this.title = ''
+			this.errorTitle = false
+			this.icon = ''
+			this.description = ''
+			this.resources = context ? [...this.getContextResources(context)] : []
+		},
+		getContextResources(context) {
+			const resources = []
+			const nodes = Object.values(context.nodes)
+			for (const node of nodes) {
+				if (parseInt(node.node_type) === NODE_TYPE_TABLE || parseInt(node.node_type) === NODE_TYPE_VIEW) {
+					const element = parseInt(node.node_type) === NODE_TYPE_TABLE ? this.tables.find(t => t.id === node.node_id) : this.views.find(v => v.id === node.node_id)
+					if (element) {
+						const elementKey = parseInt(node.node_type) === NODE_TYPE_TABLE ? 'table-' : 'view-'
+						const resource = {
+							title: element.title,
+							emoji: element.emoji,
+							key: `${elementKey}` + element.id,
+							nodeType: parseInt(node.node_type) === NODE_TYPE_TABLE ? NODE_TYPE_TABLE : NODE_TYPE_VIEW,
+							id: (element.id).toString(),
+						}
+						resources.push(resource)
+					}
+				}
+			}
+			return resources
+		},
+	},
+}
+</script>
diff --git a/src/modules/modals/Modals.vue b/src/modules/modals/Modals.vue
index c7cb90b254..718097ecab 100644
--- a/src/modules/modals/Modals.vue
+++ b/src/modules/modals/Modals.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<CreateTable :show-modal="showModalCreateTable" @close="showModalCreateTable = false" />
+		<CreateContext :show-modal="showModalCreateContext" @close="showModalCreateContext = false" />
 		<DeleteTable :show-modal="tableToDelete !== null" :table="tableToDelete" @cancel="tableToDelete = null" />
 
 		<CreateColumn :show-modal="createColumnInfo !== null" :is-view="createColumnInfo?.isView" :element="createColumnInfo?.element" @close="createColumnInfo = null" />
@@ -37,6 +38,7 @@
 
 		<EditTable :table-id="editTable" :show-modal="editTable !== null" @close="editTable = null" />
 		<TransferTable :table="tableToTransfer" :show-modal="tableToTransfer !== null" @close="tableToTransfer = null" />
+		<EditContext :context-id="editContext" :show-modal="editContext !== null" @close="editContext = null" />
 	</div>
 </template>
 
@@ -55,7 +57,9 @@ import DeleteTable from './DeleteTable.vue'
 import CreateTable from './CreateTable.vue'
 import DeleteView from './DeleteView.vue'
 import EditTable from './EditTable.vue'
+import EditContext from './EditContext.vue'
 import TransferTable from './TransferTable.vue'
+import CreateContext from './CreateContext.vue'
 
 export default {
 	components: {
@@ -72,6 +76,8 @@ export default {
 		CreateRow,
 		DeleteTable,
 		TransferTable,
+		CreateContext,
+		EditContext,
 	},
 
 	data() {
@@ -84,11 +90,13 @@ export default {
 			rowsToDelete: null,
 			viewToEdit: null,
 			showModalCreateTable: false,
+			showModalCreateContext: false,
 			importToElement: null,
 			createViewTableId: null, // if null, no modal open
 			tableToDelete: null,
 			viewToDelete: null,
 			editTable: null,
+			editContext: null,
 			tableToTransfer: null,
 		}
 	},
@@ -126,6 +134,11 @@ export default {
 
 		// misc
 		subscribe('tables:modal:import', element => { this.importToElement = element })
+
+		// context
+		subscribe('tables:context:create', () => { this.showModalCreateContext = true })
+		subscribe('tables:context:edit', contextId => { this.editContext = contextId })
+
 	},
 	unmounted() {
 		unsubscribe('tables:view:reload', () => { this.reload(true) })
@@ -150,6 +163,8 @@ export default {
 		unsubscribe('tables:table:delete', table => { this.tableToDelete = table })
 		unsubscribe('tables:table:edit', tableId => { this.editTable = tableId })
 		unsubscribe('tables:table:transfer', table => { this.tableToTransfer = table })
+		unsubscribe('tables:context:create', () => { this.showModalCreateContext = true })
+		unsubscribe('tables:context:edit', contextId => { this.editContext = contextId })
 	},
 }
 </script>
diff --git a/src/modules/navigation/partials/NavigationContextItem.vue b/src/modules/navigation/partials/NavigationContextItem.vue
new file mode 100644
index 0000000000..248160bf87
--- /dev/null
+++ b/src/modules/navigation/partials/NavigationContextItem.vue
@@ -0,0 +1,62 @@
+<template>
+	<NcAppNavigationItem v-if="context" data-cy="navigationContextItem" :name="context.name"
+		:class="{ active: activeContext && context.id === activeContext.id }" :force-menu="true"
+		:to="'/application/' + parseInt(context.id)">
+		<template #icon>
+			<template v-if="context.iconName">
+				{{ context.iconName }}
+			</template>
+			<template v-else>
+				<TableIcon :size="20" />
+			</template>
+		</template>
+		<template #actions>
+			<NcActionButton v-if="canManageContext(context)" :close-after-click="true" @click="editContext">
+				<template #icon>
+					<PlaylistEdit :size="20" />
+				</template>
+				{{ t('tables', 'Edit application') }}
+			</NcActionButton>
+		</template>
+	</NcAppNavigationItem>
+</template>
+<script>
+import { NcAppNavigationItem, NcActionButton } from '@nextcloud/vue'
+import '@nextcloud/dialogs/dist/index.css'
+import { mapGetters } from 'vuex'
+import TableIcon from 'vue-material-design-icons/Table.vue'
+import { emit } from '@nextcloud/event-bus'
+import PlaylistEdit from 'vue-material-design-icons/PlaylistEdit.vue'
+import permissionsMixin from '../../../shared/components/ncTable/mixins/permissionsMixin.js'
+
+export default {
+	name: 'NavigationContextItem',
+
+	components: {
+		PlaylistEdit,
+		TableIcon,
+		NcAppNavigationItem,
+		NcActionButton,
+	},
+
+	mixins: [permissionsMixin],
+
+	props: {
+		context: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	computed: {
+		...mapGetters(['activeContext']),
+	},
+	methods: {
+		emit,
+		async editContext() {
+			emit('tables:context:edit', this.context.id)
+		},
+	},
+
+}
+</script>
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index c9cd944f0b..da5618c413 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -2,10 +2,8 @@
 	<NcAppNavigation>
 		<template #list>
 			<div class="filter-box">
-				<NcTextField :value.sync="filterString"
-					:label="t('tables', 'Filter tables')"
-					trailing-button-icon="close"
-					:show-trailing-button="filterString !== ''"
+				<NcTextField :value.sync="filterString" :label="t('tables', 'Filter items')"
+					trailing-button-icon="close" :show-trailing-button="filterString !== ''"
 					@trailing-button-click="filterString = ''">
 					<Magnify :size="16" />
 				</NcTextField>
@@ -14,45 +12,36 @@
 			<div v-if="tablesLoading" class="icon-loading" />
 
 			<ul v-if="!tablesLoading">
-				<NcAppNavigationCaption v-if="getFavoriteNodes.length > 0"
-					:name="t('tables', 'Favorites')" />
+				<NcAppNavigationCaption v-if="getFavoriteNodes.length > 0" :name="t('tables', 'Favorites')" />
 
 				<!-- FAVORITES -->
 				<template v-for="node in getFavoriteNodes">
-					<NavigationTableItem v-if="!node.tableId"
-						:key="node.id"
-						:filter-string="filterString"
+					<NavigationTableItem v-if="!node.tableId" :key="node.id" :filter-string="filterString"
 						:table="node" />
 
-					<NavigationViewItem v-else
-						:key="'view' + node.id"
-						:view="node" />
+					<NavigationViewItem v-else :key="'view' + node.id" :view="node" />
 				</template>
 
 				<NcAppNavigationCaption :name="t('tables', 'Tables')">
 					<template #actions>
-						<NcActionButton :aria-label="t('tables', 'Create table')" icon="icon-add" @click.prevent="createTable" />
+						<NcActionButton :aria-label="t('tables', 'Create table')" icon="icon-add"
+							@click.prevent="createTable" />
 					</template>
 				</NcAppNavigationCaption>
 
 				<!-- ALL NON-FAVORITES -->
+
 				<template v-for="node in getAllNodes">
-					<NavigationTableItem v-if="!node.tableId && !node.archived && !node.favorite"
-						:key="node.id"
-						:filter-string="filterString"
-						:table="node" />
+					<NavigationTableItem v-if="!node.tableId && !node.archived && !node.favorite" :key="node.id"
+						:filter-string="filterString" :table="node" />
 
 					<NavigationViewItem v-else-if="node.tableId && !node.favorite && !viewAlreadyListed(node)"
-						:key="'view' + node.id"
-						:view="node" />
+						:key="'view' + node.id" :view="node" />
 				</template>
 
 				<!-- ARCHIVED -->
-				<NcAppNavigationItem v-if="getArchivedTables.length > 0"
-					class="archived-items"
-					:name="t('tables', 'Archived tables')"
-					:allow-collapse="true"
-					:open="false">
+				<NcAppNavigationItem v-if="getArchivedTables.length > 0" :name="t('tables', 'Archived tables')"
+					:allow-collapse="true" :open="false">
 					<template #icon>
 						<Archive :size="20" />
 					</template>
@@ -63,12 +52,23 @@
 						</NcCounterBubble>
 					</template>
 
-					<NavigationTableItem v-for="table in getArchivedTables"
-						:key="table.id"
-						:filter-string="filterString"
-						:table="table" />
+					<NavigationTableItem v-for="table in getArchivedTables" :key="table.id"
+						:filter-string="filterString" :table="table" />
 				</NcAppNavigationItem>
 			</ul>
+			<div v-if="contextsLoading" class="icon-loading" />
+			<ul v-if="!contextsLoading">
+				<NcAppNavigationCaption :name="t('tables', 'Applications')">
+					<template #actions>
+						<NcActionButton :aria-label="t('tables', 'Create application')" icon="icon-add"
+							@click.prevent="createContext" />
+					</template>
+				</NcAppNavigationCaption>
+
+				<template v-for="node in getAllContexts">
+					<NavigationContextItem :key="node.id" :context="node" />
+				</template>
+			</ul>
 		</template>
 
 		<div v-if="filterString !== ''" class="search-info">
@@ -76,6 +76,7 @@
 				<template #icon>
 					<Magnify :size="10" />
 				</template>
+
 				<template #action>
 					<NcButton :aria-label="t('tables', 'Clear filter')" @click="filterString = ''">
 						{{ t('tables', 'Clear filter') }}
@@ -100,6 +101,7 @@ import {
 
 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 Magnify from 'vue-material-design-icons/Magnify.vue'
@@ -111,6 +113,7 @@ export default {
 	components: {
 		NavigationTableItem,
 		NavigationViewItem,
+		NavigationContextItem,
 		NcAppNavigation,
 		NcAppNavigationItem,
 		NcAppNavigationCaption,
@@ -129,7 +132,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['tables', 'views', 'tablesLoading']),
+		...mapState(['tables', 'views', 'tablesLoading', 'contexts', 'contextsLoading']),
 		getAllNodes() {
 			return [...this.getFilteredTables, ...this.getOwnViews, ...this.getSharedViews]
 		},
@@ -163,11 +166,17 @@ export default {
 				}
 			})
 		},
+		getAllContexts() {
+			return this.contexts.filter(context => context.name.toLowerCase().includes(this.filterString.toLowerCase()))
+		},
 	},
 	methods: {
 		createTable() {
 			emit('tables:table:create')
 		},
+		createContext() {
+			emit('tables:context:create')
+		},
 		closeNav() {
 			if (window.innerWidth < 960) {
 				emit('toggle-navigation', {
@@ -202,13 +211,3 @@ export default {
 	}
 }
 </style>
-
-<style>
-.archived-items .app-navigation-entry__children {
-	& .app-navigation-entry-wrapper .app-navigation-entry__children {
-		& .app-navigation-entry {
-			padding-left: 32px;
-		}
-	}
-}
-</style>
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
new file mode 100644
index 0000000000..91ba25eed9
--- /dev/null
+++ b/src/pages/Context.vue
@@ -0,0 +1,190 @@
+<template>
+	<div class="row">
+		<div v-if="loading" class="icon-loading" />
+		<div v-if="!loading && context">
+			<div class="content first-row">
+				<div class="row">
+					<h1> {{ activeContext.iconName }}&nbsp; {{ activeContext.name }}</h1>
+				</div>
+				<div class="row">
+					<h3> {{ activeContext.description }}</h3>
+				</div>
+			</div>
+
+			<div class="resources">
+				<div v-for="resource in contextResources" :key="resource.key">
+					<div v-if="!resource.isView" class="resource">
+						<TableWrapper :table="resource" :columns="columns[resource.key]" :rows="rows[resource.key]"
+							:view-setting="viewSetting" @create-column="createColumn(false, resource)"
+							@import="openImportModal(resource, false)" @download-csv="downloadCSV(resource, false)" />
+					</div>
+					<div v-else-if="resource.isView" class="resource">
+						<CustomView :view="resource" :columns="columns[resource.key]" :rows="rows[resource.key]"
+							:view-setting="viewSetting" @create-column="createColumn(true, resource)"
+							@import="openImportModal(resource, true)" @download-csv="downloadCSV(resource, true)" />
+					</div>
+				</div>
+			</div>
+
+			<MainModals />
+		</div>
+	</div>
+</template>
+
+<script>
+import MainModals from '../modules/modals/Modals.vue'
+import Vuex, { mapState, mapGetters } from 'vuex'
+import Vue from 'vue'
+import TableWrapper from '../modules/main/sections/TableWrapper.vue'
+import CustomView from '../modules/main/sections/View.vue'
+import { emit } from '@nextcloud/event-bus'
+import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../shared/constants.js'
+import exportTableMixin from '../shared/components/ncTable/mixins/exportTableMixin.js'
+
+Vue.use(Vuex)
+
+export default {
+	components: {
+		MainModals,
+		TableWrapper,
+		CustomView,
+	},
+
+	mixins: [exportTableMixin],
+
+	data() {
+		return {
+			loading: true,
+			viewSetting: {},
+			context: null,
+			contextResources: [],
+		}
+	},
+
+	computed: {
+		...mapState(['tables', 'contexts', 'activeContextId', 'views']),
+		...mapGetters(['activeContext']),
+		rows() {
+			const rows = {}
+			if (this.context && this.context.nodes) {
+				for (const [, node] of Object.entries(this.context.nodes)) {
+					if (parseInt(node.node_type) === NODE_TYPE_TABLE) {
+						const rowId = (node.node_id).toString()
+						rows[rowId] = this.$store.state.data.rows[rowId]
+
+					} else if (parseInt(node.node_type) === NODE_TYPE_VIEW) {
+						const rowId = 'view-' + (node.node_id).toString()
+						rows[rowId] = this.$store.state.data.rows[rowId]
+					}
+				}
+			}
+			return rows
+
+		},
+
+		columns() {
+			const columns = {}
+			if (this.context && this.context.nodes) {
+				for (const [, node] of Object.entries(this.context.nodes)) {
+					if (parseInt(node.node_type) === NODE_TYPE_TABLE) {
+						const columnId = (node.node_id).toString()
+						columns[columnId] = this.$store.state.data.columns[columnId]
+					} else if (parseInt(node.node_type) === NODE_TYPE_VIEW) {
+						const columnId = 'view-' + (node.node_id).toString()
+						columns[columnId] = this.$store.state.data.columns[columnId]
+
+					}
+
+				}
+			}
+			return columns
+		},
+	},
+
+	watch: {
+		async activeContextId() {
+			if (this.activeContextId && !this.activeContext) {
+				// context does not exists, go to startpage
+				this.$router.push('/').catch(err => err)
+			} else {
+				await this.reload()
+			}
+		},
+	},
+
+	async mounted() {
+		await this.reload()
+	},
+
+	methods: {
+		async reload() {
+			this.loading = true
+			if (this.activeContextId) {
+				await this.loadContext()
+			}
+			this.loading = false
+		},
+		async loadContext() {
+			this.contextResources = []
+			await this.$store.dispatch('loadContext', { id: this.activeContextId })
+			const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
+			this.context = this.contexts[index]
+
+			if (this.context && this.context.nodes) {
+				for (const [, node] of Object.entries(this.context.nodes)) {
+					const nodeType = parseInt(node.node_type)
+					if (nodeType === NODE_TYPE_TABLE) {
+						const table = this.tables.find(table => table.id === node.node_id)
+						await this.$store.dispatch('loadColumnsFromBE', {
+							view: null,
+							tableId: table.id,
+						})
+						await this.$store.dispatch('loadRowsFromBE', {
+							viewId: null,
+							tableId: table.id,
+						})
+						table.key = (table.id).toString()
+						table.isView = false
+						this.contextResources.push(table)
+					} else if (nodeType === NODE_TYPE_VIEW) {
+						const view = this.views.find(view => view.id === node.node_id)
+						await this.$store.dispatch('loadColumnsFromBE', {
+							view,
+							tableId: view.tableId,
+						})
+						await this.$store.dispatch('loadRowsFromBE', {
+							viewId: view.id,
+							tableId: view.tableId,
+						})
+						view.key = 'view-' + (view.id).toString()
+						view.isView = true
+						this.contextResources.push(view)
+					}
+				}
+			}
+		},
+		createColumn(isView, element) {
+			emit('tables:column:create', { isView, element })
+		},
+		downloadCSV(element, isView) {
+			const rowId = !isView ? element.key : 'view-' + element.key
+			const colId = !isView ? element.key : 'view-' + element.key
+			this.downloadCsv(this.rows[rowId], this.columns[colId], element.title)
+		},
+		openImportModal(element, isView) {
+			emit('tables:modal:import', { element, isView })
+		},
+	},
+}
+
+</script>
+
+<style scoped lang="scss">
+.content {
+	margin: 50px 50px 0;
+}
+
+.resource {
+	margin: 40px 0;
+}
+</style>
diff --git a/src/router.js b/src/router.js
index cb0f7a7e0c..9abf12c085 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,6 +4,7 @@ import { generateUrl } from '@nextcloud/router'
 import MainViewWrapper from './pages/View.vue'
 import MainDashboardWrapper from './pages/Table.vue'
 import Startpage from './pages/Startpage.vue'
+import Context from './pages/Context.vue'
 
 Vue.use(Router)
 
@@ -15,6 +16,16 @@ export default new Router({
 			path: '/',
 			component: Startpage,
 		},
+		{
+			path: '/application/:contextId',
+			component: Context,
+			name: 'context',
+		},
+		{
+			path: '/application/:contextId/row/:rowId',
+			component: Context,
+			name: 'contextRow',
+		},
 		{
 			path: '/table/:tableId',
 			component: MainDashboardWrapper,
diff --git a/src/shared/components/ncContextResource/NcContextResource.vue b/src/shared/components/ncContextResource/NcContextResource.vue
new file mode 100644
index 0000000000..9bb0ad7a97
--- /dev/null
+++ b/src/shared/components/ncContextResource/NcContextResource.vue
@@ -0,0 +1,66 @@
+<template>
+	<div>
+		<div>
+			<ResourceForm :resources="localResource" @add="addResource" />
+			<ResourceList :resources="localResource" @remove="removeResource" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ResourceForm from './ResourceForm.vue'
+import ResourceList from './ResourceList.vue'
+
+export default {
+	components: {
+		ResourceForm,
+		ResourceList,
+	},
+
+	props: {
+
+		context: {
+			type: Object,
+			default: null,
+		},
+		// table or view
+		resources: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+			contextResource: this.resources,
+		}
+	},
+
+	computed: {
+		...mapGetters(['activeContext']),
+		localResource: {
+			get() {
+				return this.contextResource
+			},
+			set(v) {
+				this.$emit('update:resources', v)
+			},
+		},
+	},
+
+	methods: {
+		removeResource(resource) {
+			this.contextResource = this.contextResource.filter(r => r.key !== resource.key)
+			this.localResource = this.contextResource
+		},
+		addResource(resource) {
+			this.contextResource.push(resource)
+			this.localResource = this.contextResource
+
+		},
+
+	},
+}
+</script>
diff --git a/src/shared/components/ncContextResource/ResourceForm.vue b/src/shared/components/ncContextResource/ResourceForm.vue
new file mode 100644
index 0000000000..869a1c0397
--- /dev/null
+++ b/src/shared/components/ncContextResource/ResourceForm.vue
@@ -0,0 +1,148 @@
+<template>
+	<div class="row space-B">
+		<div class="resource-label">
+			{{ t('tables', 'Select a table or view') }}
+		</div>
+		<NcSelect style="width: 100%;" :loading="loading" :options="options" :clear-on-select="true"
+			:hide-selected="true" :placeholder="t('tables', 'Select a table or view')" :searchable="true"
+			:get-option-key="(option) => option.key" label="title"
+			:aria-label-combobox="t('tables', 'Select a table or view')" :preselect-first="true"
+			:preserve-search="true" @search="asyncFind" @input="addResource">
+			<template #no-options>
+				{{ t('tables', 'No recommendations. Start typing.') }}
+			</template>
+			<template #option="props">
+				<SearchAndSelectOption
+					:label="props.label"
+					:emoji="props.emoji"
+					:owner="props.owner"
+					:owner-display-name="props.ownerDisplayName"
+					:rows-count="props.rowsCount"
+					:type="props.type"
+					:subline="props.subline" />
+			</template>
+			<template #noResult>
+				{{ noResultText }}
+			</template>
+		</NcSelect>
+	</div>
+</template>
+
+<script>
+import debounce from 'debounce'
+import { NcSelect } from '@nextcloud/vue'
+import { mapState } from 'vuex'
+import { NODE_TYPE_TABLE, NODE_TYPE_VIEW } from '../../../shared/constants.js'
+import SearchAndSelectOption from '../../../views/partials/SearchAndSelectOption.vue'
+
+export default {
+	name: 'ResourceForm',
+	components: {
+		NcSelect,
+		SearchAndSelectOption,
+	},
+
+	props: {
+		resources: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+
+	data() {
+		return {
+			query: '',
+			value: null,
+			loading: false,
+			minSearchStringLength: 1,
+			maxAutocompleteResults: 20,
+			suggestions: [],
+		}
+	},
+
+	computed: {
+		...mapState(['tables', 'views']),
+
+		isValidQuery() {
+			return this.query?.trim() && this.query.length >= this.minSearchStringLength
+		},
+
+		options() {
+			if (this.isValidQuery) {
+				return this.suggestions
+			}
+			return []
+		},
+
+		noResultText() {
+			if (this.loading) {
+				return t('tables', 'Searching …')
+			}
+			return t('tables', 'No elements found.')
+		},
+	},
+
+	methods: {
+		addResource(resource) {
+			this.$emit('add', resource)
+		},
+
+		async asyncFind(query) {
+			this.query = query.trim()
+			if (this.isValidQuery) {
+				this.loading = true
+				await this.debounceGetSuggestions(query)
+			}
+		},
+
+		async getSuggestions(searchTerm) {
+			this.loading = true
+			let filteredTables = this.tables.filter((table) => table.title.toLowerCase().includes(searchTerm.toLowerCase())
+				&& !this.resources.find(t => t.nodeType === NODE_TYPE_TABLE && parseInt(t.id) === parseInt(table.id)))
+			filteredTables = filteredTables.map(table => {
+				return this.formatElementData(table, NODE_TYPE_TABLE, 'table-')
+			})
+			let filteredViews = this.views.filter((view) => view.title.toLowerCase().includes(searchTerm.toLowerCase())
+				&& !this.resources.find(v => v.nodeType === NODE_TYPE_VIEW && parseInt(v.id) === parseInt(view.id)))
+			filteredViews = filteredViews.map(view => {
+				return this.formatElementData(view, NODE_TYPE_VIEW, 'view-')
+			})
+			this.loading = false
+			this.suggestions = [...filteredTables, ...filteredViews].sort(this.sortByTitle)
+		},
+
+		formatElementData(element, nodeType, keyPrefix) {
+			return {
+				title: element.title,
+				emoji: element.emoji,
+				key: keyPrefix + element.id,
+				nodeType,
+				id: (element.id).toString(),
+				ownerDisplayName: element.ownerDisplayName,
+				owner: element.ownership,
+				rowsCount: element.rowsCount,
+				type: element.type,
+				label: element.title,
+				subline: '',
+			}
+		},
+
+		sortByTitle(a, b) {
+			if (a.title.toLowerCase() < b.title.toLowerCase()) return -1
+			if (a.title.toLowerCase() > b.title.toLowerCase()) return 1
+			return 0
+		},
+
+		debounceGetSuggestions: debounce(function(...args) {
+			this.getSuggestions(...args)
+		}, 300),
+
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.resource-label {
+	font-style: italic;
+}
+</style>
diff --git a/src/shared/components/ncContextResource/ResourceList.vue b/src/shared/components/ncContextResource/ResourceList.vue
new file mode 100644
index 0000000000..abef2ab41e
--- /dev/null
+++ b/src/shared/components/ncContextResource/ResourceList.vue
@@ -0,0 +1,81 @@
+<template>
+	<div>
+		<div class="resource-label">
+			{{ t('tables', 'Selected Resources') }}
+		</div>
+		<div v-if="loading" class="icon-loading" />
+		<ul v-if="getResources && getResources.length > 0" class="resource-list">
+			<div v-for="resource in getResources" :key="resource.key" class="row">
+				<div class="fix-col-2">
+					<div style="display:flex; align-items: center;">
+						{{ resource.emoji }} &nbsp; {{ resource.title }}
+					</div>
+				</div>
+				<div class="fix-col-2" style="justify-content: end;">
+					<NcActionButton :close-after-click="true" icon="icon-delete" @click="actionDelete(resource)">
+						{{ t('tables', 'Delete') }}
+					</NcActionButton>
+				</div>
+			</div>
+		</ul>
+		<div v-else>
+			{{ t('tables', 'No selected resources') }}
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcActionButton } from '@nextcloud/vue'
+
+export default {
+	components: {
+		NcActionButton,
+	},
+
+	props: {
+		resources: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+		}
+	},
+
+	computed: {
+		sortedResources() {
+			return [...this.tableResources, ...this.viewResources].slice()
+		},
+		getResources() {
+			return [...this.viewResources, ...this.tableResources]
+		},
+		viewResources() {
+			return this.resources.filter(resource => resource.nodeType === 1)
+		},
+		tableResources() {
+			return this.resources.filter(resource => resource.nodeType === 0)
+		},
+	},
+
+	methods: {
+		actionDelete(resource) {
+			this.$emit('remove', resource)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.resource-list li {
+	display: flex;
+	justify-content: space-between;
+	line-height: 44px;
+}
+
+.resource-label {
+	font-style: italic;
+}
+</style>
diff --git a/src/shared/components/ncTable/mixins/permissionsMixin.js b/src/shared/components/ncTable/mixins/permissionsMixin.js
index ed3d6801fb..48345608f3 100644
--- a/src/shared/components/ncTable/mixins/permissionsMixin.js
+++ b/src/shared/components/ncTable/mixins/permissionsMixin.js
@@ -68,6 +68,9 @@ export default {
 			return element.isShared === false
 				|| (element.isShared === true && (element.onSharePermissions.update === true || element.ownership === getCurrentUser().uid))
 		},
+		canManageContext(context) {
+			return context.owner === getCurrentUser().uid
+		},
 
 	},
 }
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue
index c3ce122ac4..64ca16c149 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue
@@ -116,7 +116,7 @@ export default {
 			if (this.isView) {
 				return this.views.filter(view => view.tableId === this.activeElement.tableId && view !== this.activeElement).filter(view => !this.localSelectedViews.includes(view))
 			}
-			return this.views.filter(view => view.tableId === this.activeElement.id).filter(view => !this.localSelectedViews.includes(view))
+			return this.views.filter(view => view.tableId === this.activeElement?.id).filter(view => !this.localSelectedViews.includes(view))
 		},
 	},
 
diff --git a/src/store/store.js b/src/store/store.js
index 8245baba13..0095000dcf 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -20,16 +20,22 @@ export default new Vuex.Store({
 		tablesLoading: false,
 		tables: [],
 		views: [],
+		contexts: [],
+		contextsLoading: false,
 		activeViewId: null,
 		activeTableId: null,
 		activeRowId: null,
 		activeElementIsView: false,
+		activeContextId: null,
 	},
 
 	getters: {
 		getTable: (state) => (id) => {
 			return state.tables.find(table => table.id === id)
 		},
+		getContext: (state) => (id) => {
+			return state.contexts.find(context => context.id === id)
+		},
 		getView: (state) => (id) => {
 			return state.views.find(view => view.id === id)
 		},
@@ -53,6 +59,12 @@ export default new Vuex.Store({
 			}
 			return null
 		},
+		activeContext(state) {
+			if (state.contexts && state.activeContextId) {
+				return state.contexts.find(item => item.id === state.activeContextId)
+			}
+			return null
+		},
 		isView(state) {
 			return state.activeElementIsView
 		},
@@ -61,6 +73,9 @@ export default new Vuex.Store({
 		setTablesLoading(state, value) {
 			state.tablesLoading = !!(value)
 		},
+		setContextsLoading(state, value) {
+			state.contextsLoading = !!(value)
+		},
 		setActiveViewId(state, viewId) {
 			if (state.activeViewId !== viewId) {
 				state.activeViewId = viewId
@@ -75,12 +90,20 @@ export default new Vuex.Store({
 				state.activeElementIsView = false
 			}
 		},
+		setActiveContextId(state, contextId) {
+			if (state.activeContextId !== contextId) {
+				state.activeContextId = parseInt(contextId)
+			}
+		},
 		setTables(state, tables) {
 			state.tables = tables
 		},
 		setViews(state, views) {
 			state.views = views
 		},
+		setContexts(state, contexts) {
+			state.contexts = contexts
+		},
 		setTable(state, table) {
 			const index = state.tables.findIndex(t => t.id === table.id)
 			state.tables[index] = table
@@ -89,11 +112,32 @@ export default new Vuex.Store({
 			const index = state.views.findIndex(v => v.id === view.id)
 			state.views[index] = view
 		},
+		setContext(state, context) {
+			const index = state.contexts.findIndex(c => c.id === context.id)
+			state.contexts[index] = context
+		},
 		setActiveRowId(state, rowId) {
 			state.activeRowId = rowId
 		},
 	},
 	actions: {
+		async insertNewContext({ commit, state, dispatch }, { data }) {
+			commit('setContextsLoading', true)
+			let res = null
+
+			try {
+				res = await axios.post(generateOcsUrl('/apps/tables/api/2/contexts'), data)
+			} catch (e) {
+				displayError(e, t('tables', 'Could not insert application.'))
+				return false
+			}
+			const contexts = state.contexts
+			contexts.push(res.data.ocs.data)
+			commit('setContexts', contexts)
+
+			commit('setContextsLoading', false)
+			return res.data.ocs.data
+		},
 		async insertNewTable({ commit, state, dispatch }, { data }) {
 			let res = null
 
@@ -295,6 +339,24 @@ export default new Vuex.Store({
 
 			return true
 		},
+		async updateContext({ state, commit, dispatch }, { id, data }) {
+			let res = null
+
+			try {
+				res = await axios.put(generateOcsUrl('/apps/tables/api/2/contexts/' + id), data)
+			} catch (e) {
+				displayError(e, t('tables', 'Could not update application.'))
+				return false
+			}
+
+			const context = res.data.ocs.data
+			const contexts = state.contexts
+			const index = contexts.findIndex(c => c.id === context.id)
+			contexts[index] = context
+			commit('setContexts', [...contexts])
+
+			return true
+		},
 		async transferTable({ state, commit, dispatch }, { id, data }) {
 			try {
 				await axios.put(generateOcsUrl('/apps/tables/api/2/tables/' + id + '/transfer'), data)
@@ -309,6 +371,31 @@ export default new Vuex.Store({
 			commit('setTables', [...tables])
 			return true
 		},
+
+		async getAllContexts({ commit, state }) {
+			commit('setContextsLoading', true)
+			try {
+				const res = await axios.get(generateOcsUrl('/apps/tables/api/2/contexts'))
+				commit('setContexts', res.data.ocs.data)
+			} catch (e) {
+				displayError(e, t('tables', 'Could not load applications.'))
+				showError(t('tables', 'Could not fetch applications'))
+			}
+			commit('setContextsLoading', false)
+			return true
+		},
+
+		async loadContext({ state, commit, dispatch }, { id }) {
+			try {
+				const res = await axios.get(generateOcsUrl('/apps/tables/api/2/contexts/' + id))
+				commit('setContext', res.data.ocs.data)
+			} catch (e) {
+				displayError(e, t('tables', 'Could not load application.'))
+				showError(t('tables', 'Could not fetch application'))
+			}
+			return true
+		},
+
 		async removeTable({ state, commit }, { tableId }) {
 			try {
 				await axios.delete(generateUrl('/apps/tables/table/' + tableId))