diff --git a/core/client/components/KActivity.vue b/core/client/components/KActivity.vue
new file mode 100644
index 000000000..78334bc3d
--- /dev/null
+++ b/core/client/components/KActivity.vue
@@ -0,0 +1,73 @@
+<template>
+  <KPage>
+    <template v-slot:page-content>
+      <slot  />
+    </template>
+  </KPage>
+</template>
+
+<script>
+import _ from 'lodash'
+import logger from 'loglevel'
+import config from 'config'
+import { useActivity, useLayout } from '../composables'
+import KPage from './layout/KPage.vue'
+
+export default {
+  components: {
+    KPage,
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    layout: {
+      type: [Object, Function],
+      default: () => null
+    }
+  },
+  setup (props) {
+    const keyName = `${_.camelCase(props.name)}Activity`
+    logger.debug(`[KDK] Reading '${props.name}' activity options with key ${keyName}`)
+    const options = _.get(config, keyName, {})
+    const { setCurrentActivity } = useActivity(keyName, options)
+    const { configureLayout, clearLayout } = useLayout()
+    return {
+      options,
+      setCurrentActivity,
+      configureLayout,
+      clearLayout
+    }
+  },
+  methods: {
+    async configure () {
+      logger.debug(`[KDK] Configuring '${this.name}' activity`)
+      // because this component is wrapped within an AsyncComponent it returns the grand parent
+      const concreteActivity = this.$parent.$parent
+      // configure the layout
+      let customLayout = {}
+      if (this.layout) {
+        if (typeof this.layout === 'function') customLayout = await this.layout()
+        else customLayout = this.layout
+      }
+      this.configureLayout(_.merge({}, this.options, customLayout), concreteActivity)
+      // set the current activity
+      this.setCurrentActivity(concreteActivity)
+    }
+  },
+  async mounted () {
+    await this.configure()  
+    // whenever the user abilities are updated, update activity as well
+    this.$events.on('user-abilities-changed', this.configure)
+  },
+  beforeUnmount () {
+    logger.debug(`[KDK] Clearing '${this.name}' activity`)
+    this.$events.off('user-abilities-changed', this.configure)
+    // clear the current activity
+    this.setCurrentActivity(null)
+    // Clear the layout
+    this.clearLayout()
+  }
+}
+</script>
diff --git a/core/client/composables/index.js b/core/client/composables/index.js
index 32e3f414a..de5163b16 100644
--- a/core/client/composables/index.js
+++ b/core/client/composables/index.js
@@ -1,5 +1,6 @@
 export * from './activity.js'
 export * from './collection.js'
+export * from './layout.js'
 export * from './pwa.js'
 export * from './session.js'
 export * from './schema.js'
diff --git a/core/client/composables/layout.js b/core/client/composables/layout.js
new file mode 100644
index 000000000..3b8c4e013
--- /dev/null
+++ b/core/client/composables/layout.js
@@ -0,0 +1,50 @@
+import { Layout } from '../layout.js'
+
+export function useLayout () {
+
+  // functions
+  function configureLayout (configuration, context) {
+    if (configuration.header) Layout.setHeader(configuration.header, context)
+    if (configuration.footer) Layout.setFooter(configuration.footer, context)
+    if (configuration.page) Layout.setPage(configuration.page, context)
+    if (configuration.fab) Layout.setFab(configuration.fab, context)
+    Layout.placements.forEach(placement => {
+      if (_.has(configuration, `panes.${placement}`)) Layout.setPane(placement, _.get(configuration, `panes.${placement}`), context)
+      if (_.has(configuration, `windows.${placement}`)) Layout.setWindow(placement, _.get(configuration, `windows.${placement}`), context)
+    })
+    // for backward compatibility
+    if (configuration.leftPane) Layout.setPane('left', configuration.leftPane, context)
+    if (configuration.rightPane) Layout.setPane('right', configuration.rightPane, context)
+    if (configuration.topPane) Layout.setPane('top', configuration.topPane, context)
+    if (configuration.bottomPane) Layout.setPane('bottom', configuration.bottomPane, context)
+  }
+  function clearLayout () {
+    Layout.clearHeader()
+    Layout.clearFooter()
+    Layout.clearPage()
+    Layout.clearFab()
+    Layout.placements.forEach(placement => {
+      Layout.clearPane(placement)
+      Layout.clearWindow(placement)
+    })
+  }
+
+  // immediate
+  const additionalFunctions = {}
+  Layout.placements.forEach(placement => {
+    additionalFunctions[`set${_.upperFirst(placement)}Pane`] = (options, context) => { Layout.setPane(placement, options, context) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneMode`] = (mode) => { Layout.setPaneMode(placement, mode) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneFilter`] = (filter) => { Layout.setPaneFilter(placement, filter) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneVisible`] = (visible) => { Layout.setPaneVisible(placement, visible) }
+    additionalFunctions[`set${_.upperFirst(placement)}PaneOpener`] = (opener) => { Layout.setPaneOpener(placement, opener) }
+    additionalFunctions[`clear${_.upperFirst(placement)}Pane`] = () => { Layout.clearPane(placement) }
+  })
+  
+  // expose
+  return {
+    layout: Layout,
+    configureLayout,
+    clearLayout,
+    ...additionalFunctions
+  }
+}
\ No newline at end of file
diff --git a/core/client/layout.js b/core/client/layout.js
index ce1ce6ca2..5a0282672 100644
--- a/core/client/layout.js
+++ b/core/client/layout.js
@@ -5,7 +5,6 @@ import sift from 'sift'
 import { Store } from './store.js'
 import { bindContent } from './utils/utils.content.js'
 
-const placements = ['top', 'right', 'bottom', 'left']
 const layoutPath = 'layout'
 const contentDefaults = { content: undefined, filter: {}, mode: undefined, visible: false }
 const windowDefaultContols = { pin: true, unpin: true, maximize: true, restore: true, close: true, resize: true }
@@ -42,6 +41,7 @@ const defaults = {
 
 // Export singleton
 export const Layout = {
+  placements: ['top', 'right', 'bottom', 'left'],
   paths: {
     layout: layoutPath,
     header: layoutPath + '.header',
@@ -68,7 +68,7 @@ export const Layout = {
     Store.set(this.paths.footer, this.getElementDefaults('footer'))
     Store.set(this.paths.page, this.getElementDefaults('page'))
     Store.set(this.paths.fab, this.getElementDefaults('fab'))
-    placements.forEach(placement => {
+    this.placements.forEach(placement => {
       Store.set(_.get(this.paths.panes, placement), this.getElementDefaults(`panes.${placement}`))
       Store.set(_.get(this.paths.windows, placement), this.getElementDefaults(`windows.${placement}`))
     })
@@ -81,16 +81,6 @@ export const Layout = {
   getLayoutDefaults () {
     return Object.assign({}, defaults.options, _.pick(_.get(config, this.paths.layout), _.keys(defaults.layout)))
   },
-  set (layout) {
-    if (layout.header) this.setHeader(layout.header)
-    if (layout.footer) this.setFooter(layout.footer)
-    if (layout.page) this.setPage(layout.page)
-    if (layout.fab) this.setFab(layout.fab)
-    placements.forEach(placement => {
-      if (_.has(layout, `panes.${placement}`)) this.setPane(placement, _.get(layout, `panes.${placement}`))
-      if (_.has(layout, `windows.${placement}`)) this.setWindow(placement, _.get(layout, `windows.${placement}`))
-    })
-  },
   setView (view) {
     Store.patch(this.paths.layout, { view })
   },
@@ -99,7 +89,7 @@ export const Layout = {
     this.setFooterMode(mode)
     this.setPageMode(mode)
     this.setFabMode(mode)
-    placements.forEach(placement => {
+    this.placements.forEach(placement => {
       this.setPaneMode(placement, mode)
       this.setWindowMode(placement, mode)
     })
@@ -156,6 +146,9 @@ export const Layout = {
     if (props.visible === visible) return
     Store.patch(this.getElementPath(element), { visible })
   },
+  clearElement (element) {
+    this.setElement(element, null)
+  },
   getHeader () {
     return this.getElement('header')
   },
@@ -171,6 +164,9 @@ export const Layout = {
   setHeaderVisible (visible) {
     this.setElementVisible('header', visible)
   },
+  clearHeader () {
+    this.clearElement('header')
+  },
   getFooter () {
     return this.getElement('footer')
   },
@@ -186,6 +182,9 @@ export const Layout = {
   setFooterVisible (visible) {
     this.setElementVisible('footer', visible)
   },
+  clearFooter () {
+    this.clearElement('footer')
+  },
   getPage () {
     return this.getElement('page')
   },
@@ -201,6 +200,9 @@ export const Layout = {
   setPageVisible (visible) {
     this.setElementVisible('page', visible)
   },
+  clearPage () {
+    this.clearElement('page')
+  },
   getFab () {
     return this.getElement('fab')
   },
@@ -239,6 +241,9 @@ export const Layout = {
     if (props.offset === offset) return
     Store.patch(this.getElementPath('fab'), { offset })
   },
+  clearFab () {
+    this.clearElement('fab')
+  },  
   getPane (placement) {
     return this.getElement(`panes.${placement}`)
   },
@@ -259,6 +264,9 @@ export const Layout = {
     if (props.opener === opener) return
     Store.patch(this.getElementPath(`panes.${placement}`), { opener })
   },
+  clearPane (placement) {
+    this.clearElement(`panes.${placement}`)
+  },
   getWindow (placement) {
     return this.getElement(`windows.${placement}`)
   },
@@ -330,8 +338,11 @@ export const Layout = {
     if (!widget) current = _.get(props.components, '[0].id')
     Store.patch(this.getElementPath(`windows.${placement}`), { current })
   },
+  clearWindow (placement) {
+    this.clearElement(`windows.${placement}`)
+  },
   findWindow (widget) {
-    for (const placement of placements) {
+    for (const placement of this.placements) {
       const window = this.getWindow(placement)
       if (_.find(window.components, { id: widget })) {
         return { placement, window }