diff --git a/config/default.js b/config/default.js
index 8b055e53..3e7f3a3d 100644
--- a/config/default.js
+++ b/config/default.js
@@ -30,6 +30,7 @@ const leftPane = {
     { component: 'account/KProfile', class: 'full-width' },
     { id: 'layout', icon: 'las la-desktop', label: 'LayoutActivity.LABEL', renderer: 'item', route: { name: 'layout-activity' } },
     { id: 'miscellaneous', icon: 'las la-icons', label: 'MiscellaneousActivity.LABEL', renderer: 'item', route: { name: 'miscellaneous-activity' } },
+    { id: 'document', icon: 'las la-icons', label: 'DocumentActivity.LABEL', renderer: 'item', route: { name: 'document-activity' } }, 
     { id: 'collection', icon: 'las la-list', label: 'CollectionActivity.LABEL', renderer: 'item', route: { name: 'collection-activity', params: { page: 'list' } } },
     { id: 'kanban', icon: 'dashboard', label: 'KanbanActivity.LABEL', renderer: 'item', route: { name: 'kanban-activity' } },
     { id: 'chart', icon: 'las la-chart-pie', label: 'ChartActivity.LABEL', renderer: 'item', route: { name: 'chart-activity' } },
@@ -300,6 +301,14 @@ module.exports = {
       ]
     }
   },
+  documentActivity: {
+    leftPane: leftPane,
+    topPane: {
+      content: [
+        { id: 'layout', icon: 'las la-icons', label: 'DocumnetActivity.LABEL', color: 'primary', disabled: true }
+      ]
+    }
+  },
   collectionActivity: {
     leftPane: leftPane,
     topPane: {
diff --git a/src/boot/kdk.js b/src/boot/kdk.js
index 3b02a1c4..c2b3b06d 100644
--- a/src/boot/kdk.js
+++ b/src/boot/kdk.js
@@ -42,6 +42,7 @@ export default async ({ app }) => {
   app.component('KTime', await kdkCoreUtils.loadComponent('time/KTime'))
   app.component('KDateTime', await kdkCoreUtils.loadComponent('time/KDateTime'))
   app.component('KDateTimeRange', await kdkCoreUtils.loadComponent('time/KDateTimeRange'))
+  app.component('KDocument', await kdkCoreUtils.loadComponent('document/KDocument'))
   app.component('KForm', await kdkCoreUtils.loadComponent('form/KForm'))
   app.component('KChart', await kdkCoreUtils.loadComponent('chart/KChart'))
   app.component('KPage', await kdkCoreUtils.loadComponent('layout/KPage'))
diff --git a/src/components/document/DocumentActivity.vue b/src/components/document/DocumentActivity.vue
new file mode 100644
index 00000000..9015764b
--- /dev/null
+++ b/src/components/document/DocumentActivity.vue
@@ -0,0 +1,22 @@
+<template>
+  <KPage>
+    <template v-slot:page-content>
+      <div class="row full-width justify-center q-gutter-md">
+        <KDocument 
+          url="sample.html"
+          :localize="true"
+        />     
+      </div>
+    </template>
+  </KPage>
+</template>
+
+<script>
+import { mixins } from '@kalisio/kdk/core.client'
+
+export default {
+  name: 'document-activity',
+  components: {},
+  mixins: [mixins.baseActivity()]
+}
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index 666798c9..3b089576 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -44,6 +44,10 @@ module.exports = [{
           name: 'miscellaneous-activity',
           component: 'MiscellaneousActivity'
         },
+        document: {
+          name: 'document-activity',
+          component: 'document/DocumentActivity'
+        },
         'collection/:page': {
           name: 'collection-activity',
           component: 'CollectionActivity',