diff --git a/config/default.json b/config/default.json
index 29c4edee..ee1e89a9 100644
--- a/config/default.json
+++ b/config/default.json
@@ -14,5 +14,13 @@
   "repository": {
     "url": "https://api.github.com",
     "releaseNo": "releaseNoForDocumentation"
+  },
+  "documentation": {
+    "api": {
+      "url": "https://api.github.com/repos/adempiere/"
+    },
+    "images": {
+      "url": "https://api.erpya.com/adempiere-api/img"
+    }
   }
 }
diff --git a/src/api/documentation/releases.js b/src/api/documentation/documentation.js
similarity index 53%
rename from src/api/documentation/releases.js
rename to src/api/documentation/documentation.js
index 356f572f..c988197f 100644
--- a/src/api/documentation/releases.js
+++ b/src/api/documentation/documentation.js
@@ -2,12 +2,25 @@
 // Add here any service related with it
 import request from '@/utils/request'
 import { config } from '@/utils/ADempiere/config'
-
+const baseURL = config.documentation.api.url
 // Fetch releases from repository
 export function fetchReleasesList() {
   return request({
-    baseURL: config.repository.url,
-    url: '/repos/adempiere/adempiere-vue/releases',
+    baseURL,
+    url: '/adempiere-vue/releases',
+    method: 'get',
+    headers: {
+      'Accept': 'application/vnd.github.v3+json'
+    }
+  })
+}
+// Fetch readme from repository
+export function fetchReadme({
+  repository
+}) {
+  return request({
+    baseURL,
+    url: repository,
     method: 'get',
     headers: {
       'Accept': 'application/vnd.github.v3+json'
diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue
index 26d8c259..121bbca6 100644
--- a/src/views/documentation/index.vue
+++ b/src/views/documentation/index.vue
@@ -1,34 +1,166 @@
 <template>
-  <div class="app-container documentation-container">
-    <a class="document-btn" target="_blank" href="https://adempiere.github.io/adempiere-vue-site/">{{ $t('documentation.documentation') }}</a>
-    <a class="document-btn" target="_blank" href="https://github.com/adempiere/adempiere-vue">{{ $t('documentation.github') }}</a>
-    <dropdown-menu class="document-btn" :items="releasesList" :title="releasesLabel" />
-    <div id="markdown" v-markdown="releaseNotes.body" />
+  <div>
+    <el-row>
+      <el-col :span="defaultSize" :style="style">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>
+              <b> {{ $t('documentation.documentation') }} </b>
+            </span>
+            <a target="_blank" :href="readmeDocument.href">
+              <svg-icon icon-class="link" />
+            </a>
+          </div>
+          <div>
+            <div v-if="!isEmptyValue(readmeDocument)" style="display: inline-flex;width: 100%;">
+              <img width="100" height="100" :src="readmeDocument.avatar" style="margin-left: 20%;">
+              <p style="font-size: 30px;padding-top: 1%;color: #008fd3;"> {{ readmeDocument.title }} </p>
+            </div>
+
+            <p align="center">
+              <tags />
+            </p>
+            <div v-if="!isEmptyValue(readmeDocument)" id="markdown" v-markdown="readmeDocument.description" />
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="defaultSize" :style="style">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>
+              <b> {{ $t('documentation.github') }} </b>
+            </span>
+            <a target="_blank" :href="readmeRepositoryGithub.href">
+              <svg-icon icon-class="link" />
+            </a>
+          </div>
+          <div v-if="!isEmptyValue(readmeRepositoryGithub)" style="display: inline-flex;width: 100%;">
+            <img width="100" height="100" :src="readmeRepositoryGithub.avatar" style="margin-left: 20%;">
+            <p style="font-size: 30px;padding-top: 1%;color: #008fd3;"> {{ readmeRepositoryGithub.title }} </p>
+          </div>
+          <p align="center">
+            <tags />
+          </p>
+          <div v-if="!isEmptyValue(readmeRepositoryGithub)" id="markdown" v-markdown="readmeRepositoryGithub.description" />
+        </el-card>
+      </el-col>
+      <el-col :span="defaultSize" :style="style">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>
+              <b> {{ releasesLabel }} </b>
+            </span>
+            <a target="_blank" :href="releases">
+              <svg-icon icon-class="link" />
+            </a>
+          </div>
+          <el-collapse
+            v-model="activeListReleases"
+            accordion
+          >
+            <el-collapse-item
+              v-for="(releases, key) in releasesList"
+              :key="key"
+              :name="key"
+            >
+              <template slot="title">
+                <svg v-if="key !== stopper" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="16" height="16" style="margin-right: 2%;">
+                  <path fill-rule="evenodd" :d="icon" />
+                </svg>
+                <b>
+                  {{
+                    releases.title
+                  }}
+                </b>
+              </template>
+              <el-button type="text" style="float: right;">
+                <a target="_blank" :href="releases.download">
+                  {{ releases.titleDownload }} <i class="el-icon-download" />
+                </a>
+              </el-button>
+              <div v-if="!isEmptyValue(releases)" id="markdown" v-markdown="releases.body" />
+            </el-collapse-item>
+          </el-collapse>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import DropdownMenu from '@/components/Share/DropdownMenu'
-import { fetchReleasesList } from '@/api/documentation/releases'
+import { fetchReleasesList, fetchReadme } from '@/api/documentation/documentation'
 import { config } from '@/utils/ADempiere/config'
+import tags from './tags'
 
 export default {
   name: 'Documentation',
-  components: { DropdownMenu },
+  components: { tags },
   data() {
     return {
       releasesList: [],
+      activeNames: ['1'],
+      icon: 'M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z',
       releaseNotes: {
         body: ''
       },
-      releasesLabel: this.$t('documentation.releases')
+      releases: 'https://github.com/adempiere/adempiere-vue/releases',
+      releasesLabel: this.$t('documentation.releases'),
+      readmeRepositoryGithub: {},
+      readmeDocument: {}
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    defaultSize() {
+      if (this.isMobile) {
+        return 24
+      }
+      return 8
+    },
+    style() {
+      return 'margin-top: 2%;padding: 0.5%;'
+    },
+    stopper() {
+      return this.releasesList.length - 1
+    },
+    activeListReleases() {
+      const active = this.releasesList.findIndex(releases => this.releaseNotes.title === releases.title)
+      return active
     }
   },
   created() {
     this.loadReleasesList()
   },
   methods: {
-    loadReleasesList() {
+    fetchDocument() {
+      fetchReadme({
+        repository: 'adempiere-vue-site'
+      })
+        .then(response => {
+          this.readmeDocument = {
+            title: response.name,
+            href: response.html_url,
+            description: response.description,
+            avatar: response.organization.avatar_url
+          }
+        })
+    },
+    fetchRepository() {
+      fetchReadme({
+        repository: 'adempiere-vue'
+      })
+        .then(response => {
+          this.readmeRepositoryGithub = {
+            title: response.name,
+            href: response.html_url,
+            description: response.description,
+            avatar: response.organization.avatar_url
+          }
+        })
+    },
+    fechReleases() {
       fetchReleasesList()
         .then(response => {
           if (response) {
@@ -38,7 +170,9 @@ export default {
                 href: release.html_url,
                 author: release.author.login,
                 body: release.body,
-                created_at: release.created_at
+                created_at: release.created_at,
+                download: release.assets[0].browser_download_url,
+                titleDownload: release.assets[0].name
               })
             })
             if (config.repository.releaseNo !== undefined && this.releasesList.length > 0) {
@@ -46,11 +180,16 @@ export default {
                 return release.title === config.repository.releaseNo
               })
               if (!this.releaseNotes) {
-                this.releaseNotes = ''
+                this.releaseNotes = this.releasesList[0]
               }
             }
           }
         })
+    },
+    loadReleasesList() {
+      this.fetchDocument()
+      this.fetchRepository()
+      this.fechReleases()
     }
   }
 }
@@ -76,5 +215,14 @@ export default {
     font-size: 20px;
     text-align: center;
   }
+  .el-col {
+    margin-top: 2%;
+    padding: 1%;
+  }
+  .a {
+    background-color: transparent;
+    float: right;
+    padding: 3px 0px;
+  }
 }
 </style>
diff --git a/src/views/documentation/tags/index.vue b/src/views/documentation/tags/index.vue
new file mode 100644
index 00000000..fba94fb7
--- /dev/null
+++ b/src/views/documentation/tags/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <a href="https://github.com/vuejs/vue">
+      <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
+    </a>
+    <a href="https://github.com/ElemeFE/element">
+      <img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
+    </a>
+    <a href="https://travis-ci.org/adempiere/adempiere-vue" rel="nofollow">
+      <img src="https://travis-ci.org/adempiere/adempiere=vue.svg?branch=develop" alt="Build Status">
+    </a>
+    <a href="https://github.com/adempiere/adempiere-vue/blob/master/LICENSE">
+      <img src="https://img.shields.io/badge/license-GNU/GPL%20(v3)-blue" alt="license">
+    </a>
+    <a href="https://gitter.im/adempiere/adempiere-vue">
+      <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Tags'
+}
+</script>