diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3e3b9c..d269a6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 # image credit
 Banner Image by [Gerd Altmann](https://pixabay.com/users/geralt-9301)
+Login image [kkolosov](https://pixabay.com/fr/users/kkolosov-2105326)
+
 
 ## 0.1.0 - 2020/05/01 - init
 
diff --git a/backend/api/document/models/document.settings.json b/backend/api/document/models/document.settings.json
index 2452311..9194dee 100644
--- a/backend/api/document/models/document.settings.json
+++ b/backend/api/document/models/document.settings.json
@@ -15,7 +15,7 @@
     "order": {
       "type": "integer"
     },
-    "content": {
+    "media": {
       "model": "file",
       "via": "related",
       "allowedTypes": [
@@ -27,8 +27,11 @@
       "required": false
     },
     "documentcategory": {
-      "via": "documents",
-      "model": "documentcategory"
+      "model": "documentcategory",
+      "via": "documents"
+    },
+    "content": {
+      "type": "richtext"
     }
   }
 }
diff --git a/backend/api/documentcategory/models/documentcategory.settings.json b/backend/api/documentcategory/models/documentcategory.settings.json
index 5c41b30..37623a2 100644
--- a/backend/api/documentcategory/models/documentcategory.settings.json
+++ b/backend/api/documentcategory/models/documentcategory.settings.json
@@ -16,8 +16,8 @@
       "type": "integer"
     },
     "documents": {
-      "collection": "document",
-      "via": "documentcategory"
+      "via": "documentcategory",
+      "collection": "document"
     },
     "image": {
       "model": "file",
diff --git a/frontend/src/containers/Document.vue b/frontend/src/containers/Document.vue
index a403f3d..b072bd5 100644
--- a/frontend/src/containers/Document.vue
+++ b/frontend/src/containers/Document.vue
@@ -1,42 +1,57 @@
 <template>
   <b-container>
-    <Breadcrumb />
-     <Article :article="article" />
-    <!-- <h2>{{ document.title }}</h2> -->
-    <!-- <b-img
-          v-if="document.image"
-          :src="api_url + document.image.url"
-          fluid
+    <div>
+      <Breadcrumb />
+      <div class="d-flex align-items-start justify-content-between">
+        <div>
+          <h2>{{ document.title }}</h2>
+          <vue-markdown-it
+            v-if="document.content"
+            :source="document.content"
+            id="editor"
+          />
+        </div>
+        <b-img
+          v-if="document.media"
+          :src="api_url + document.media.url"
           width="400px"
           right
           :alt="document.title"
-        ></b-img> -->
-    <!-- <vue-markdown-it
-      v-if="document.content"
-      :source="document.content"
-      id="editor"
-    /> -->
+        ></b-img>
+      </div>
+    </div>
   </b-container>
 </template>
 
 <script>
+import gql from "graphql-tag";
 import Breadcrumb from "../components/Breadcrumb.vue";
-import Article from "../components/Article.vue";
-// import VueMarkdownIt from "vue-markdown-it";
+import VueMarkdownIt from "vue-markdown-it";
 
 export default {
   data() {
     return {
       api_url: process.env.VUE_APP_STRAPI_API_URL,
+      document,
     };
   },
   components: {
     Breadcrumb,
-    Article,
-    // VueMarkdownIt,
+    VueMarkdownIt,
   },
-  props: {
-    article: {},
+  apollo: {
+    document: gql`
+      query Document {
+        document(id: 1) {
+          id
+          title
+          content
+          media {
+            url
+          }
+        }
+      }
+    `,
   },
 };
 </script>
diff --git a/frontend/src/containers/Documentation.vue b/frontend/src/containers/Documentation.vue
index aae71ad..6830f90 100644
--- a/frontend/src/containers/Documentation.vue
+++ b/frontend/src/containers/Documentation.vue
@@ -4,23 +4,22 @@
     <!--<router-link to="/documentation/5">Demo link</router-link>-->
     <b-card-group deck>
       <b-card
-        v-for="categorie in documentcategories"
-        :key="categorie.id"
-        :title="categorie.name"
+        v-for="category in documentcategories"
+        :key="category.id"
+        :title="category.name"
         class="mb-2"
       >
         <b-list-group flush>
           <b-list-group-item
-            v-for="document in categorie.documents"
+            v-for="document in category.documents"
             :key="document.id"
             :title="document.title"
-            :href="api_url + document.content.url"
-            target="_blank"
+            :to="'/documentation/' + category.name + '/' + document.id"
           >
             {{ document.title }}
           </b-list-group-item>
         </b-list-group>
-        <b-list-group flush>
+        <!-- <b-list-group flush>
           <b-list-group-item
             v-for="article in categorie.articles"
             :key="article.id"
@@ -62,7 +61,7 @@
               ></iframe>
             </div>
           </b-modal>
-        </b-list-group>
+        </b-list-group> -->
       </b-card>
     </b-card-group>
   </b-container>
@@ -91,27 +90,26 @@ export default {
           documents(sort: "order:asc") {
             id
             title
-
-            content {
-              url
-            }
-          }
-          videos(sort: "order:asc") {
-            id
-            title
-            source
-          }
-          articles(sort: "order:asc") {
-            id
-            title
-            content
-            document_category {
-              name
-            }
-            image {
+            media {
               url
             }
           }
+          # videos(sort: "order:asc") {
+          #   id
+          #   title
+          #   source
+          # }
+          # articles(sort: "order:asc") {
+          #   id
+          #   title
+          #   content
+          #   document_category {
+          #     name
+          #   }
+          #   image {
+          #     url
+          #   }
+          # }
         }
       }
     `,
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 238086a..e385e02 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -37,17 +37,9 @@ const router = new VueRouter({
       components: require("./containers/Documentation.vue"),
     },
     {
-      path: "/documentation/:articlecategory",
+      path: "/documentation/:categoryid/:id",
       components: require("./containers/Document.vue"),
     },
-    {
-      path: "/documentation/:articlecategory/:articletitle",
-      components: require("./containers/Document.vue"),
-    },
-    {
-      path: "/documentation/:id",
-      components: require("./containers/Document.vue")
-    },
     {
       path: "/support",
       components: require("./containers/Support.vue")