diff --git a/src/components/ADempiere/Form/Issues/ListIssues/index.vue b/src/components/ADempiere/Form/Issues/ListIssues/index.vue
index 0dd5721480..2f9da851a2 100644
--- a/src/components/ADempiere/Form/Issues/ListIssues/index.vue
+++ b/src/components/ADempiere/Form/Issues/ListIssues/index.vue
@@ -1,19 +1,19 @@
 <!--
-ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
-Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
-Contributor(s): Elsio Sanchez Elsiosanches@gmail.com https://github.com/Elsiosanchez
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program. If not, see <https:www.gnu.org/licenses/>.
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez Elsiosanches@gmail.com https://github.com/Elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
   <div class="issues-list">
@@ -338,8 +338,10 @@ export default defineComponent({
       store.dispatch('listRequest', {})
         .then(response => {
           if (!isEmptyValue(response)) {
-            let list
-            const isEmptuStatus = listStatuses.value.find(list => list.id === 0)
+            const list = {}
+            const isEmptuStatus = listStatuses.value.find(statusItem => {
+              return statusItem.id === 0
+            })
             if (isEmptyValue(isEmptuStatus)) {
               listStatuses.value.push({
                 name: lang.t('issues.emptyStatus'),
@@ -348,8 +350,8 @@ export default defineComponent({
               })
             }
             listStatuses.value.forEach(elementStatus => {
-              list[elementStatus.id] = response.filter(list => {
-                return list.status.id === elementStatus.id
+              list[elementStatus.id] = response.filter(issueItem => {
+                return issueItem.status.id === elementStatus.id
               })
             })
             store.commit('setListKanbanGroup', list)
@@ -456,15 +458,17 @@ export default defineComponent({
       })
         .then(response => {
           const { records } = response
-          const listAll = records
-          const list = []
-          listAll.push({
+          const statusesList = records
+          const list = {}
+          statusesList.push({
             name: lang.t('issues.emptyStatus'),
             id: 0,
             sequence: 99
           })
-          listAll.forEach(element => {
-            list[element.id] = listIssues.value.filter(list => list.status.id === element.id)
+          statusesList.forEach(statusItem => {
+            list[statusItem.id] = listIssues.value.filter(issueItem => {
+              return issueItem.status.id === statusItem.id
+            })
           })
           store.commit('setListKanbanGroup', list)
           listStatuses.value = records.sort((a, b) => a.sequence - b.sequence)
diff --git a/src/components/ADempiere/Form/Issues/component/Comment.vue b/src/components/ADempiere/Form/Issues/component/Comment.vue
index 069d6fd202..5300ce7a8c 100644
--- a/src/components/ADempiere/Form/Issues/component/Comment.vue
+++ b/src/components/ADempiere/Form/Issues/component/Comment.vue
@@ -1,19 +1,19 @@
 <!--
- ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
- Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
- Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <https:www.gnu.org/licenses/>.
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
 -->
 
 <template>
@@ -62,7 +62,7 @@
                           :placeholder="$t('issues.summary')"
                           height="360px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -487,7 +487,7 @@
                           v-model="updateSummary"
                           height="250px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -537,10 +537,14 @@
             </div>
           </div>
           <i style="font-size: 12px;color: #82848a;">
-            {{ $t('issues.isCreated') }} {{ translateDateByLong(currentIssues.created) }} {{ $t('issues.by') }} {{ currentIssues.user_name }} <svg-icon icon-class="user" />
+            {{ $t('issues.isCreated') }}
+            {{ translateDateByLong(currentIssues.created) }}
+            {{ $t('issues.by') }}
+            <issue-avatar :user="currentIssues.user" />
           </i>
         </el-card>
         <br>
+
         <el-timeline v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest" style="padding-left: 15px;padding-right: 15px;">
           <el-timeline-item
             v-for="(comment, index) in listComments"
@@ -549,40 +553,16 @@
             :timestamp="translateDateByLong(comment.created)"
             style="margin-left: 10px;"
           >
-            <span v-if="comment.issue_comment_type === 1">
-              <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-              <el-image
-                :src="avatarResize(comment.user)"
-                fit="contain"
-                style="
-                  width: 20px;
-                  height: 20px;
-                  border-radius: 50%;
-                  display: inline-block;
-                  position: relative;
-                  cursor: default;
-                  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                "
-              />
-              <b>
-                {{ comment.user.name }}
-              </b>
-              {{ logDisplayLanguaje(true, false) }}
-              <b>
-                {{ labelDisplayChange(comment, true) }}
-              </b>
-              <span v-show="!isEmptyValue(labelDisplayChange(comment, false, true))">
-                {{ logDisplayLanguaje(false, true) }}
-              </span>
-              <b>
-                {{ labelDisplayChange(comment, false, true) }}
-              </b>
-            </span>
+            <issue-log
+              v-if="comment.issue_comment_type === 'LOG'"
+              :comment="comment"
+              class="list-comments"
+            />
+
             <el-card v-else class="list-comments">
               <div slot="header" class="list-comments-clearfix">
-                <span>
-                  <svg-icon icon-class="user" /> {{ comment.user_name }}
-                </span>
+                <issue-avatar :user="comment.user" />
+
                 <el-dropdown trigger="click" style="float: right" @command="handleCommand">
                   <span class="el-dropdown-link">
                     <el-button type="text" size="mini" style="color: black;">
@@ -610,7 +590,7 @@
                     v-model="commentUpdate"
                     height="150px"
                     left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                    :toolbar="listOption"
+                    :toolbar="editorToolbarList"
                     right-toolbar="sync-scroll fullscreen"
                     mode="edit"
                   />
@@ -686,7 +666,7 @@
                           :placeholder="$t('issues.summary')"
                           height="250px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -993,7 +973,7 @@
                           v-model="updateSummary"
                           height="250px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -1217,28 +1197,14 @@
             </div>
           </div>
           <i style="font-size: 12px;color: #82848a;">
-            {{ $t('issues.isCreated') }} {{ translateDateByLong(currentIssues.created) }} {{ $t('issues.by') }}
-            <svg-icon
-              v-if="!isEmptyValue(currentIssues.user.avatar)"
-              icon-class="user"
-            />
-            <el-image
-              :src="avatarResize(currentIssues.user)"
-              fit="contain"
-              style="
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                display: inline-block;
-                position: relative;
-                cursor: default;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-              "
-            />
-            <b> {{ currentIssues.user.name }} </b>
+            {{ $t('issues.isCreated') }}
+            {{ translateDateByLong(currentIssues.created) }}
+            {{ $t('issues.by') }}
+            <issue-avatar :user="currentIssues.user" />
           </i>
         </el-card>
         <br>
+
         <el-scrollbar v-if="getFixedHeader" ref="scrollTimeLineTabComments" wrap-class="scroll-timeline-from">
           <el-timeline v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest" style="padding-left: 15px;padding-right: 15px;">
             <el-timeline-item
@@ -1248,56 +1214,16 @@
               :timestamp="translateDateByLong(comment.created)"
               style="margin-left: 10px;"
             >
-              <span v-if="comment.issue_comment_type === 1">
-                <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-                <el-image
-                  :src="avatarResize(comment.user)"
-                  fit="contain"
-                  style="
-                    width: 20px;
-                    height: 20px;
-                    border-radius: 50%;
-                    display: inline-block;
-                    position: relative;
-                    cursor: default;
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                  "
-                />
-                <b>
-                  {{ comment.user.name }}
-                </b>
-                {{ logDisplayLanguaje(true, false) }}
-                <b>
-                  {{ labelDisplayChange(comment, true) }}
-                </b>
-                <span v-show="!isEmptyValue(labelDisplayChange(comment, false, true))">
-                  {{ logDisplayLanguaje(false, true) }}
-                </span>
-                <b>
-                  {{ labelDisplayChange(comment, false, true) }}
-                </b>
-              </span>
+              <issue-log
+                v-if="comment.issue_comment_type === 'LOG'"
+                :comment="comment"
+                class="list-comments"
+              />
+
               <el-card v-else class="list-comments">
                 <div slot="header" class="list-comments-clearfix">
-                  <span>
-                    <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-                    <el-image
-                      :src="avatarResize(comment.user)"
-                      fit="contain"
-                      style="
-                        width: 20px;
-                        height: 20px;
-                        border-radius: 50%;
-                        display: inline-block;
-                        position: relative;
-                        cursor: default;
-                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                      "
-                    />
-                    <b>
-                      {{ comment.user.name }}
-                    </b>
-                  </span>
+                  <issue-avatar :user="comment.user" />
+
                   <el-dropdown trigger="click" style="float: right" @command="handleCommand">
                     <span class="el-dropdown-link">
                       <el-button type="text" size="mini" style="color: black;">
@@ -1315,38 +1241,18 @@
                 <div>
                   <span v-if="!comment.isEdit">
                     <v-md-preview
-                      v-if="comment.issue_comment_type !== 'LOG'"
+                      v-if="comment.issue_comment_type === 'COMMENT'"
                       :text="comment.result"
                       class="previwer-disable"
                       style="padding: 0px"
                     />
-                    <span v-else>
-                      <el-descriptions :column="1">
-                        <el-descriptions-item
-                          v-for="log in comment.change_logs"
-                          :key="log.id"
-                          label-style="{ color: #606266; font-weight: bold; }"
-                        >
-                          <template slot="label">
-                            <span style="color: #606266; font-weight: bold;padding-right: 5px;">
-                              {{ log.label }}
-                            </span>
-                            ({{ log.column_name }})
-                          </template>
-                          <span style="font-weight: bold;">
-                            <el-link
-                              :type="!isEmptyValue(log.displayed_value) ? 'success' : 'danger'"
-                              :style="isEmptyValue(log.displayed_value) ? 'text-decoration:line-through;' : ''"
-                            >
-                              <b>
-                                {{ isEmptyValue(log.displayed_value) ? 'NULL' : log.displayed_value }}
-                              </b>
-                            </el-link>
-                          </span>
-                        </el-descriptions-item>
-                      </el-descriptions>
-                    </span>
+                    <issue-log
+                      v-else-if="comment.issue_comment_type === 'LOG'"
+                      :comment="comment"
+                      class="list-comments"
+                    />
                   </span>
+
                   <span v-else>
                     <el-card v-if="commentUpdatePreview" shadow="never">
                       <el-scrollbar wrap-class="scroll-previwer-disable">
@@ -1358,7 +1264,7 @@
                       v-model="commentUpdate"
                       height="150px"
                       left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                      :toolbar="listOption"
+                      :toolbar="editorToolbarList"
                       right-toolbar="sync-scroll fullscreen"
                       mode="edit"
                     />
@@ -1406,40 +1312,16 @@
               :timestamp="translateDateByLong(comment.created)"
               style="margin-left: 10px;"
             >
-              <span v-if="comment.issue_comment_type === 1">
-                <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-                <el-image
-                  :src="avatarResize(comment.user)"
-                  fit="contain"
-                  style="
-                    width: 20px;
-                    height: 20px;
-                    border-radius: 50%;
-                    display: inline-block;
-                    position: relative;
-                    cursor: default;
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                  "
-                />
-                <b>
-                  {{ comment.user.name }}
-                </b>
-                {{ logDisplayLanguaje(true, false) }}
-                <b>
-                  {{ labelDisplayChange(comment, true) }}
-                </b>
-                <span v-show="!isEmptyValue(labelDisplayChange(comment, false, true))">
-                  {{ logDisplayLanguaje(false, true) }}
-                </span>
-                <b>
-                  {{ labelDisplayChange(comment, false, true) }}
-                </b>
-              </span>
+              <issue-log
+                v-if="comment.issue_comment_type === 'LOG'"
+                :comment="comment"
+                class="list-comments"
+              />
+
               <el-card v-else class="list-comments">
                 <div slot="header" class="list-comments-clearfix">
-                  <span>
-                    <svg-icon icon-class="user" /> {{ comment.user_name }}
-                  </span>
+                  <issue-avatar :user="comment.user" />
+
                   <el-dropdown trigger="click" style="float: right" @command="handleCommand">
                     <span class="el-dropdown-link">
                       <el-button type="text" size="mini" style="color: black;">
@@ -1467,7 +1349,7 @@
                       v-model="commentUpdate"
                       height="150px"
                       left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                      :toolbar="listOption"
+                      :toolbar="editorToolbarList"
                       right-toolbar="sync-scroll fullscreen"
                       mode="edit"
                     />
@@ -1507,68 +1389,11 @@
           </el-timeline>
         </span>
       </el-header>
+
       <el-main height="auto" style="height: auto;overflow: auto;padding: 0px 0px 30px !important;">
-        <div v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest">
-          <el-card v-if="commentPreview" shadow="never" class="is-add-new-comments">
-            <div slot="header">
-              <b>
-                {{ $t('issues.preview') }}
-              </b>
-            </div>
-            <el-scrollbar wrap-class="scroll-previwer-disable">
-              <v-md-preview :text="comments" class="previwer-disable" style="padding: 0px" height="150px" />
-            </el-scrollbar>
-          </el-card>
-          <el-card v-else shadow="never" class="is-add-new-comments" style="padding: 0px;">
-            <div slot="header">
-              <b>
-                {{ $t('issues.commentary') }}
-              </b>
-            </div>
-            <v-md-editor
-              v-model="comments"
-              :placeholder="$t('issues.addNewCommentary')"
-              height="150px"
-              left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-              right-toolbar="isCollapseUp sync-scroll fullscreen"
-              mode="edit"
-              :toolbar="listOption"
-            />
-          </el-card>
-          <el-button
-            type="primary"
-            icon="el-icon-check"
-            class="button-base-icon"
-            style="float: right; margin: 10px;"
-            :disabled="isEmptyValue(comments)"
-            @click="addNewComments()"
-          />
-          <el-button
-            type="danger"
-            icon="el-icon-close"
-            style="float: right;margin-top: 10px;"
-            class="button-base-icon"
-            @click="cancelEdit(currentIssues)"
-          />
-          <el-button
-            type="info"
-            plain
-            style="float: right; margin-top: 10px;"
-            class="button-base-icon"
-            :disabled="isEmptyValue(comments)"
-            @click="clearComments()"
-          >
-            <svg-icon icon-class="layers-clear" />
-          </el-button>
-          <el-checkbox
-            v-model="commentPreview"
-            :label="$t('issues.preview')"
-            :border="true"
-            style="float: right; margin-top: 10px;"
-            class="button-base-icon"
-            :disabled="isEmptyValue(comments)"
-          />
-        </div>
+        <issue-comment-add
+          v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest"
+        />
       </el-main>
     </el-container>
   </span>
@@ -1576,7 +1401,7 @@
 
 <script>
 import {
-  defineComponent, computed, ref, watch, nextTick
+  defineComponent, computed, ref, watch
 } from '@vue/composition-api'
 
 import lang from '@/lang'
@@ -1584,6 +1409,10 @@ import store from '@/store'
 
 // Components and Mixins
 import 'simple-m-editor/dist/simple-m-editor.css'
+import IssueAvatar from '@/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue'
+import IssueCommentAdd from '@/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentAdd.vue'
+import IssueCommentView from '@/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentView.vue'
+import IssueLog from '@/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueLog.vue'
 import RecordTime from '../recordTime.vue'
 
 // Constants
@@ -1594,7 +1423,6 @@ import { isEmptyValue } from '@/utils/ADempiere'
 import { showMessage } from '@/utils/ADempiere/notification'
 import { translateDateByLong, formatDate } from '@/utils/ADempiere/formatValue/dateFormat'
 import { zoomIn } from '@/utils/ADempiere/coreUtils.js'
-// import { getImagePath } from '@/utils/ADempiere/resource.js'
 
 // Api Request Methods
 import {
@@ -1613,6 +1441,10 @@ export default defineComponent({
   name: 'IssueComment',
 
   components: {
+    IssueAvatar,
+    IssueCommentAdd,
+    IssueCommentView,
+    IssueLog,
     RecordTime
   },
 
@@ -1627,7 +1459,7 @@ export default defineComponent({
     }
   },
 
-  setup(props, { refs }) {
+  setup(props) {
     // Const
     const tableName = props.tableName
     const recordId = props.recordId
@@ -1641,11 +1473,9 @@ export default defineComponent({
     const newDateNextAction = ref(new Date())
     const summary = ref('')
     const updateSummary = ref('')
-    const comments = ref('')
     const commentUpdate = ref('')
     const markdownContent = ref('')
     const commentUpdatePreview = ref(false)
-    const commentPreview = ref(false)
     const summaryUpdatePreview = ref(false)
     const summaryNewPreview = ref(false)
     const isPanelNewRequest = ref(false)
@@ -1663,23 +1493,28 @@ export default defineComponent({
 
     currentSalesReps.value = store.getters['user/userInfo'].id
 
-    const listOption = computed(() => {
-      const listMailTemplates = store.getters.getListMailTemplates
-      listMailTemplates.isCollapseDown = {
-        icon: 'el-icon-arrow-down',
-        title: 'Collapse',
-        action(editor) {
-          isCollapseComments.value = !isCollapseComments.value
-        }
-      }
-      listMailTemplates.isCollapseUp = {
-        icon: 'el-icon-arrow-up',
-        title: 'Collapse',
-        action(editor) {
-          isCollapseComments.value = !isCollapseComments.value
+    const storedMailTemplatesList = computed(() => {
+      return store.getters.getListMailTemplates
+    })
+
+    const editorToolbarList = computed(() => {
+      return {
+        listMailTemplates: storedMailTemplatesList.value,
+        isCollapseUp: {
+          icon: 'el-icon-arrow-up',
+          title: 'Collapse',
+          action(editor) {
+            isCollapseComments.value = !isCollapseComments.value
+          }
+        },
+        isCollapseDown: {
+          icon: 'el-icon-arrow-down',
+          title: 'Collapse',
+          action(editor) {
+            isCollapseComments.value = !isCollapseComments.value
+          }
         }
       }
-      return listMailTemplates
     })
 
     const isNewIssues = computed({
@@ -2354,27 +2189,6 @@ export default defineComponent({
       })
     }
 
-    function addNewComments(params) {
-      const { id, uuid } = currentIssues.value
-      store.dispatch('newIssueComment', {
-        id,
-        uuid,
-        result: comments.value
-      })
-        .then(response => {
-          nextTick(() => {
-            scrollIssues.value.$el.scrollTop = scrollIssues.value.$el.scrollHeight
-            // scrollTimeLineTabComments.value.$refs.wrap.scrollTop = 9999999
-          })
-        })
-      clearComments()
-      commentPreview.value = false
-    }
-
-    function clearComments() {
-      comments.value = ''
-    }
-
     function handleCommand(command) {
       const { comment, option } = command
       if (option === 'delete') {
@@ -2427,37 +2241,6 @@ export default defineComponent({
       })
     }
 
-    function labelDisplayChange(comment, isChange = false, isOption = false) {
-      if (
-        !isEmptyValue(comment.label) &&
-        isChange
-      ) {
-        return comment.label
-      }
-      if (
-        !isEmptyValue(comment.new_value) &&
-        isOption
-      ) {
-        return comment.displayed_value
-      }
-      if (
-        !isEmptyValue(comment.displayed_value) &&
-        isOption
-      ) {
-        return comment.displayed_value
-      }
-      return ''
-    }
-
-    function logDisplayLanguaje(isChange = false, isOption = false) {
-      if (isChange) {
-        return lang.t('issues.change')
-      }
-      if (isOption) {
-        return lang.t('issues.to')
-      }
-      return
-    }
     function newIssues(issues) {
       isPanelNewRequest.value = !isPanelNewRequest.value
     }
@@ -2499,19 +2282,6 @@ export default defineComponent({
       return 'padding-top: 35px;'
     })
 
-    loadListMail()
-
-    function avatarResize(user) {
-      // const { avatar } = user
-      // const { uri } = getImagePath({
-      //   file: avatar,
-      //   width: 20,
-      //   height: 20,
-      //   operation: 'resize'
-      // })
-      return ''
-    }
-
     function defaultValueNewIssues() {
       findSalesReps(true)
         .then(() => {
@@ -2732,7 +2502,11 @@ export default defineComponent({
         findPriority(true)
       }
     })
-    findSalesReps(true)
+    // findSalesReps(true)
+
+    if (isEmptyValue(storedMailTemplatesList.value.menus)) {
+      loadListMail()
+    }
 
     return {
       // Ref
@@ -2744,10 +2518,8 @@ export default defineComponent({
       currentDateNextAction,
       newDateNextAction,
       summary,
-      comments,
       commentUpdate,
       commentUpdatePreview,
-      commentPreview,
       summaryUpdatePreview,
       summaryNewPreview,
       updateSummary,
@@ -2787,9 +2559,10 @@ export default defineComponent({
       isShowTitleForm,
       isPanelNewRequest,
       getFixedHeader,
-      listOption,
+      editorToolbarList,
       isMobile,
       userId,
+      storedMailTemplatesList,
       // Methodos
       findTaskStatus,
       remoteMethodTaskStatus,
@@ -2808,8 +2581,6 @@ export default defineComponent({
       updateIssuesStatus,
       updateIssuesDateNextAction,
       defaultValueNewIssues,
-      addNewComments,
-      clearComments,
       translateDateByLong,
       formatDate,
       handleCommand,
@@ -2821,11 +2592,8 @@ export default defineComponent({
       removeIssues,
       handleCommandIssues,
       exitPopover,
-      labelDisplayChange,
-      logDisplayLanguaje,
       loadListMail,
       zoomIssues,
-      avatarResize,
       remoteMethodSales,
       //
       findBusinessPartner,
diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentAdd.vue b/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentAdd.vue
new file mode 100644
index 0000000000..2eea868b0e
--- /dev/null
+++ b/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentAdd.vue
@@ -0,0 +1,193 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div>
+    <el-card v-if="isPreview" shadow="never" class="is-add-new-comments">
+      <div slot="header">
+        <b>
+          {{ $t('issues.preview') }}
+        </b>
+      </div>
+      <el-scrollbar wrap-class="scroll-previwer-disable">
+        <v-md-preview
+          :text="commentText"
+          class="previwer-disable"
+          style="padding: 0px"
+          height="150px"
+        />
+      </el-scrollbar>
+    </el-card>
+
+    <el-card v-else shadow="never" class="is-add-new-comments" style="padding: 0px;">
+      <div slot="header">
+        <b>
+          {{ $t('issues.commentary') }}
+        </b>
+      </div>
+      <v-md-editor
+        v-model="commentText"
+        :placeholder="$t('issues.addNewCommentary')"
+        height="150px"
+        left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
+        right-toolbar="isCollapseUp sync-scroll fullscreen"
+        mode="edit"
+        :toolbar="editorToolbarList"
+      />
+    </el-card>
+
+    <el-button
+      type="primary"
+      icon="el-icon-check"
+      class="button-base-icon"
+      style="float: right; margin: 10px;"
+      :disabled="isEmptyValue(commentText)"
+      @click="addNewComments()"
+    />
+
+    <el-button
+      type="danger"
+      icon="el-icon-close"
+      style="float: right;margin-top: 10px;"
+      class="button-base-icon"
+      @click="cancelEdit(currentIssues)"
+    />
+
+    <el-button
+      type="info"
+      plain
+      style="float: right; margin-top: 10px;"
+      class="button-base-icon"
+      :disabled="isEmptyValue(commentText)"
+      @click="clearComments()"
+    >
+      <svg-icon icon-class="layers-clear" />
+    </el-button>
+
+    <el-checkbox
+      v-model="isPreview"
+      :label="$t('issues.preview')"
+      :border="true"
+      style="float: right; margin-top: 10px;"
+      class="button-base-icon"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  computed,
+  nextTick
+} from '@vue/composition-api'
+
+import store from '@/store'
+
+// Components and Mixins
+import 'simple-m-editor/dist/simple-m-editor.css'
+
+export default defineComponent({
+  name: 'IssueCommentAdd',
+
+  setup() {
+    const isPreview = ref(false)
+    const commentText = ref('')
+    const isCollapseComments = ref(false)
+
+    const currentIssues = computed(() => {
+      return store.getters.getCurrentIssues
+    })
+
+    const storedMailTemplatesList = computed(() => {
+      return store.getters.getListMailTemplates
+    })
+
+    const editorToolbarList = computed(() => {
+      return {
+        listMailTemplates: storedMailTemplatesList.value,
+        isCollapseUp: {
+          icon: 'el-icon-arrow-up',
+          title: 'Collapse',
+          action(editor) {
+            isCollapseComments.value = !isCollapseComments.value
+          }
+        },
+        isCollapseDown: {
+          icon: 'el-icon-arrow-down',
+          title: 'Collapse',
+          action(editor) {
+            isCollapseComments.value = !isCollapseComments.value
+          }
+        }
+      }
+    })
+
+    function addNewComments(params) {
+      const { id, uuid } = currentIssues.value
+      store.dispatch('newIssueComment', {
+        id,
+        uuid,
+        result: commentText.value
+      })
+        .then(response => {
+          nextTick(() => {
+            // scrollIssues.value.$el.scrollTop = scrollIssues.value.$el.scrollHeight
+            // scrollTimeLineTabComments.value.$refs.wrap.scrollTop = 9999999
+          })
+        })
+      clearComments()
+      isPreview.value = false
+    }
+
+    function cancelEdit(issues) {
+      clearComments()
+      isPreview.value = false
+    }
+
+    function clearComments() {
+      commentText.value = ''
+    }
+
+    return {
+      currentIssues,
+      commentText,
+      editorToolbarList,
+      //
+      isPreview,
+      addNewComments,
+      cancelEdit,
+      clearComments
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.is-add-new-comments {
+  .el-card__header{
+    padding-top: 10px;
+    padding-right: 0px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+  }
+  .el-card__body {
+    padding: 0px;
+  }
+}
+</style>
diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentView.vue b/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentView.vue
new file mode 100644
index 0000000000..2c7058852e
--- /dev/null
+++ b/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentView.vue
@@ -0,0 +1,48 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <v-md-preview
+    :text="comment.result"
+    class="previwer-disable"
+    style="padding: 0px"
+  />
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+// Components and Mixins
+import 'simple-m-editor/dist/simple-m-editor.css'
+
+export default defineComponent({
+  name: 'IssueCommentView',
+
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    }
+  },
+
+  setup() {
+    return {
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueLog.vue b/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueLog.vue
new file mode 100644
index 0000000000..68d535261c
--- /dev/null
+++ b/src/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueLog.vue
@@ -0,0 +1,74 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-card class="list-comments">
+    <issue-avatar :user="comment.user" />
+
+    <el-descriptions :column="1">
+      <el-descriptions-item
+        v-for="log in comment.change_logs"
+        :key="log.id"
+        label-style="{ color: #606266; font-weight: bold; }"
+      >
+        <template slot="label">
+          <span style="color: #606266; font-weight: bold;padding-right: 5px;">
+            {{ log.label }}
+          </span>
+          ({{ log.column_name }})
+        </template>
+
+        <span style="font-weight: bold;">
+          <el-link
+            :type="!isEmptyValue(log.displayed_value) ? 'success' : 'danger'"
+            :style="isEmptyValue(log.displayed_value) ? 'text-decoration:line-through;' : ''"
+          >
+            <b>
+              {{ isEmptyValue(log.displayed_value) ? 'NULL' : log.displayed_value }}
+            </b>
+          </el-link>
+        </span>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-card>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api'
+
+import IssueAvatar from '@/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue'
+
+export default defineComponent({
+  name: 'IssueLog',
+
+  components: {
+    IssueAvatar
+  },
+
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    }
+  },
+
+  setup() {
+  }
+})
+</script>
+
diff --git a/src/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue b/src/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue
new file mode 100644
index 0000000000..f7a9ac2bac
--- /dev/null
+++ b/src/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue
@@ -0,0 +1,98 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com https://github.com/EdwinBetanc0urt
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <span>
+    <svg-icon
+      v-if="isEmptyValue(user.avatar)"
+      icon-class="user"
+    />
+
+    <el-image
+      v-else
+      :src="avatarSrc"
+      fit="contain"
+      style="
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        display: inline-block;
+        position: relative;
+        cursor: default;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      "
+    />
+
+    <b>
+      {{ user.name }}
+    </b>
+  </span>
+</template>
+
+<script>
+import {
+  defineComponent, computed, onMounted, ref
+} from '@vue/composition-api'
+
+// Utils and Helper Methods
+import { getImagePath } from '@/utils/ADempiere/resource.js'
+
+export default defineComponent({
+  name: 'IssueAvatar',
+
+  props: {
+    user: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  setup(props) {
+    const avatarSrc = ref('')
+
+    const imageDefault = computed(() => {
+      return require('@/image/ADempiere/avatar/no-avatar.png')
+    })
+
+    function loadImage() {
+      if (props.user.avatar) {
+        getImagePath({
+          file: props.user.avatar,
+          width: 20,
+          height: 20,
+          operation: 'resize'
+        })
+          .then(response => {
+            avatarSrc.value = response.href
+          })
+      }
+    }
+
+    onMounted(() => {
+      avatarSrc.value = imageDefault.value
+      // loadImage()
+    })
+
+    return {
+      avatarSrc,
+      // Methods
+      loadImage
+    }
+  }
+})
+</script>
diff --git a/src/components/ADempiere/PanelInfo/Component/RecordIssues/component/Comment.vue b/src/components/ADempiere/PanelInfo/Component/RecordIssues/component/Comment.vue
index f71e0660de..cf21478bca 100644
--- a/src/components/ADempiere/PanelInfo/Component/RecordIssues/component/Comment.vue
+++ b/src/components/ADempiere/PanelInfo/Component/RecordIssues/component/Comment.vue
@@ -1,19 +1,19 @@
 <!--
- ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
- Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
- Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <https:www.gnu.org/licenses/>.
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
 -->
 
 <template>
@@ -62,7 +62,7 @@
                           :placeholder="$t('issues.summary')"
                           height="360px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -487,7 +487,7 @@
                           v-model="updateSummary"
                           height="250px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -537,10 +537,14 @@
             </div>
           </div>
           <i style="font-size: 12px;color: #82848a;">
-            {{ $t('issues.isCreated') }} {{ translateDateByLong(currentIssues.created) }} {{ $t('issues.by') }} {{ currentIssues.user_name }} <svg-icon icon-class="user" />
+            {{ $t('issues.isCreated') }}
+            {{ translateDateByLong(currentIssues.created) }}
+            {{ $t('issues.by') }}
+            <issue-avatar :user="currentIssues.user" />
           </i>
         </el-card>
         <br>
+
         <el-timeline v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest" style="padding-left: 15px;padding-right: 15px;">
           <el-timeline-item
             v-for="(comment, index) in listComments"
@@ -549,40 +553,16 @@
             :timestamp="translateDateByLong(comment.created)"
             style="margin-left: 10px;"
           >
-            <span v-if="comment.issue_comment_type === 1">
-              <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-              <el-image
-                :src="avatarResize(comment.user)"
-                fit="contain"
-                style="
-                  width: 20px;
-                  height: 20px;
-                  border-radius: 50%;
-                  display: inline-block;
-                  position: relative;
-                  cursor: default;
-                  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                "
-              />
-              <b>
-                {{ comment.user.name }}
-              </b>
-              {{ logDisplayLanguaje(true, false) }}
-              <b>
-                {{ labelDisplayChange(comment, true) }}
-              </b>
-              <span v-show="!isEmptyValue(labelDisplayChange(comment, false, true))">
-                {{ logDisplayLanguaje(false, true) }}
-              </span>
-              <b>
-                {{ labelDisplayChange(comment, false, true) }}
-              </b>
-            </span>
+            <issue-log
+              v-if="comment.issue_comment_type === 'LOG'"
+              :comment="comment"
+              class="list-comments"
+            />
+
             <el-card v-else class="list-comments">
               <div slot="header" class="list-comments-clearfix">
-                <span>
-                  <svg-icon icon-class="user" /> {{ comment.user_name }}
-                </span>
+                <issue-avatar :user="comment.user" />
+
                 <el-dropdown trigger="click" style="float: right" @command="handleCommand">
                   <span class="el-dropdown-link">
                     <el-button type="text" size="mini" style="color: black;">
@@ -610,7 +590,7 @@
                     v-model="commentUpdate"
                     height="150px"
                     left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                    :toolbar="listOption"
+                    :toolbar="editorToolbarList"
                     right-toolbar="sync-scroll fullscreen"
                     mode="edit"
                   />
@@ -686,7 +666,7 @@
                           :placeholder="$t('issues.summary')"
                           height="250px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -993,7 +973,7 @@
                           v-model="updateSummary"
                           height="250px"
                           left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                          :toolbar="listOption"
+                          :toolbar="editorToolbarList"
                           right-toolbar="sync-scroll fullscreen"
                           mode="edit"
                         />
@@ -1217,25 +1197,10 @@
             </div>
           </div>
           <i style="font-size: 12px;color: #82848a;">
-            {{ $t('issues.isCreated') }} {{ translateDateByLong(currentIssues.created) }} {{ $t('issues.by') }}
-            <svg-icon
-              v-if="!isEmptyValue(currentIssues.user.avatar)"
-              icon-class="user"
-            />
-            <el-image
-              :src="avatarResize(currentIssues.user)"
-              fit="contain"
-              style="
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                display: inline-block;
-                position: relative;
-                cursor: default;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-              "
-            />
-            <b> {{ currentIssues.user.name }} </b>
+            {{ $t('issues.isCreated') }}
+            {{ translateDateByLong(currentIssues.created) }}
+            {{ $t('issues.by') }}
+            <issue-avatar :user="currentIssues.user" />
           </i>
         </el-card>
         <br>
@@ -1248,56 +1213,16 @@
               :timestamp="translateDateByLong(comment.created)"
               style="margin-left: 10px;"
             >
-              <span v-if="comment.issue_comment_type === 1">
-                <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-                <el-image
-                  :src="avatarResize(comment.user)"
-                  fit="contain"
-                  style="
-                    width: 20px;
-                    height: 20px;
-                    border-radius: 50%;
-                    display: inline-block;
-                    position: relative;
-                    cursor: default;
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                  "
-                />
-                <b>
-                  {{ comment.user.name }}
-                </b>
-                {{ logDisplayLanguaje(true, false) }}
-                <b>
-                  {{ labelDisplayChange(comment, true) }}
-                </b>
-                <span v-show="!isEmptyValue(labelDisplayChange(comment, false, true))">
-                  {{ logDisplayLanguaje(false, true) }}
-                </span>
-                <b>
-                  {{ labelDisplayChange(comment, false, true) }}
-                </b>
-              </span>
+              <issue-log
+                v-if="comment.issue_comment_type === 'LOG'"
+                :comment="comment"
+                class="list-comments"
+              />
+
               <el-card v-else class="list-comments">
                 <div slot="header" class="list-comments-clearfix">
-                  <span>
-                    <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-                    <el-image
-                      :src="avatarResize(comment.user)"
-                      fit="contain"
-                      style="
-                        width: 20px;
-                        height: 20px;
-                        border-radius: 50%;
-                        display: inline-block;
-                        position: relative;
-                        cursor: default;
-                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                      "
-                    />
-                    <b>
-                      {{ comment.user.name }}
-                    </b>
-                  </span>
+                  <issue-avatar :user="comment.user" />
+
                   <el-dropdown trigger="click" style="float: right" @command="handleCommand">
                     <span class="el-dropdown-link">
                       <el-button type="text" size="mini" style="color: black;">
@@ -1315,39 +1240,18 @@
                 <div>
                   <span v-if="!comment.isEdit">
                     <v-md-preview
-                      v-if="comment.issue_comment_type !== 'LOG'"
+                      v-if="comment.issue_comment_type === 'COMMENT'"
                       :text="comment.result"
                       class="previwer-disable"
                       style="padding: 0px"
                     />
-                    <span v-else>
-                      <el-descriptions :column="1">
-                        <el-descriptions-item
-                          v-for="log in comment.change_logs"
-                          :key="log.id"
-                          label-style="{ color: #606266; font-weight: bold; }"
-                        >
-                          <template slot="label">
-                            <span style="color: #606266; font-weight: bold;padding-right: 5px;">
-                              {{ log.label }}
-                            </span>
-                            ({{ log.column_name }})
-                          </template>
-                          <span style="font-weight: bold;">
-                            <el-link
-                              :type="!isEmptyValue(log.displayed_value) ? 'success' : 'danger'"
-                              :style="isEmptyValue(log.displayed_value) ? 'text-decoration:line-through;' : ''"
-                            >
-                              <b>
-                                {{ isEmptyValue(log.displayed_value) ? 'NULL' : log.displayed_value }}
-                              </b>
-                            </el-link>
-                          </span>
-                        </el-descriptions-item>
-                      </el-descriptions>
-                    </span>
+                    <issue-log
+                      v-else-if="comment.issue_comment_type === 'LOG'"
+                      :comment="comment"
+                      class="list-comments"
+                    />
                   </span>
-                  <v-md-preview v-if="!comment.isEdit" :text="comment.result" class="previwer-disable" style="padding: 0px" />
+
                   <span v-else>
                     <el-card v-if="commentUpdatePreview" shadow="never">
                       <el-scrollbar wrap-class="scroll-previwer-disable">
@@ -1362,7 +1266,7 @@
                       v-model="commentUpdate"
                       height="150px"
                       left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                      :toolbar="listOption"
+                      :toolbar="editorToolbarList"
                       right-toolbar="sync-scroll fullscreen"
                       mode="edit"
                     />
@@ -1410,40 +1314,16 @@
               :timestamp="translateDateByLong(comment.created)"
               style="margin-left: 10px;"
             >
-              <span v-if="comment.issue_comment_type === 1">
-                <svg-icon v-if="!isEmptyValue(comment.user.avatar)" icon-class="user" />
-                <el-image
-                  :src="avatarResize(comment.user)"
-                  fit="contain"
-                  style="
-                    width: 20px;
-                    height: 20px;
-                    border-radius: 50%;
-                    display: inline-block;
-                    position: relative;
-                    cursor: default;
-                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-                  "
-                />
-                <b>
-                  {{ comment.user.name }}
-                </b>
-                {{ logDisplayLanguaje(true, false) }}
-                <b>
-                  {{ labelDisplayChange(comment, true) }}
-                </b>
-                <span v-show="!isEmptyValue(labelDisplayChange(comment, false, true))">
-                  {{ logDisplayLanguaje(false, true) }}
-                </span>
-                <b>
-                  {{ labelDisplayChange(comment, false, true) }}
-                </b>
-              </span>
+              <issue-log
+                v-if="comment.issue_comment_type === 'LOG'"
+                :comment="comment"
+                class="list-comments"
+              />
+
               <el-card v-else class="list-comments">
                 <div slot="header" class="list-comments-clearfix">
-                  <span>
-                    <svg-icon icon-class="user" /> {{ comment.user_name }}
-                  </span>
+                  <issue-avatar :user="comment.user" />
+
                   <el-dropdown trigger="click" style="float: right" @command="handleCommand">
                     <span class="el-dropdown-link">
                       <el-button type="text" size="mini" style="color: black;">
@@ -1475,7 +1355,7 @@
                       v-model="commentUpdate"
                       height="150px"
                       left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-                      :toolbar="listOption"
+                      :toolbar="editorToolbarList"
                       right-toolbar="sync-scroll fullscreen"
                       mode="edit"
                     />
@@ -1515,70 +1395,11 @@
           </el-timeline>
         </span>
       </el-header>
+
       <el-main height="auto" style="height: auto;overflow: auto;padding: 0px 0px 30px !important;">
-        <div v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest">
-          <el-card v-if="commentPreview" shadow="never" class="is-add-new-comments">
-            <!-- <v-md-preview :text="comments" height="200px" /> -->
-            <!-- <div v-markdown="comments" class="output" /> -->
-            <div slot="header">
-              <b>
-                {{ $t('issues.preview') }}
-              </b>
-            </div>
-            <el-scrollbar wrap-class="scroll-previwer-disable">
-              <v-md-preview :text="comments" class="previwer-disable" style="padding: 0px" height="150px" />
-            </el-scrollbar>
-          </el-card>
-          <el-card v-else shadow="never" class="is-add-new-comments" style="padding: 0px;">
-            <div slot="header">
-              <b>
-                {{ $t('issues.commentary') }}
-              </b>
-            </div>
-            <v-md-editor
-              v-model="comments"
-              :placeholder="$t('issues.addNewCommentary')"
-              height="150px"
-              left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code save | emoji listMailTemplates"
-              right-toolbar="isCollapseUp sync-scroll fullscreen"
-              mode="edit"
-              :toolbar="listOption"
-            />
-          </el-card>
-          <el-button
-            type="primary"
-            icon="el-icon-check"
-            class="button-base-icon"
-            style="float: right; margin: 10px;"
-            :disabled="isEmptyValue(comments)"
-            @click="addNewComments()"
-          />
-          <el-button
-            type="danger"
-            icon="el-icon-close"
-            style="float: right;margin-top: 10px;"
-            class="button-base-icon"
-            @click="cancelEdit(currentIssues)"
-          />
-          <el-button
-            type="info"
-            plain
-            style="float: right; margin-top: 10px;"
-            class="button-base-icon"
-            :disabled="isEmptyValue(comments)"
-            @click="clearComments()"
-          >
-            <svg-icon icon-class="layers-clear" />
-          </el-button>
-          <el-checkbox
-            v-model="commentPreview"
-            :label="$t('issues.preview')"
-            :border="true"
-            style="float: right; margin-top: 10px;"
-            class="button-base-icon"
-            :disabled="isEmptyValue(comments)"
-          />
-        </div>
+        <issue-comment-add
+          v-if="!isEmptyValue(currentIssues) && !isPanelNewRequest"
+        />
       </el-main>
     </el-container>
   </span>
@@ -1586,7 +1407,7 @@
 
 <script>
 import {
-  defineComponent, computed, ref, watch, nextTick
+  defineComponent, computed, ref, watch
 } from '@vue/composition-api'
 
 import lang from '@/lang'
@@ -1594,6 +1415,10 @@ import store from '@/store'
 
 // Components and Mixins
 import 'simple-m-editor/dist/simple-m-editor.css'
+import IssueAvatar from '@/components/ADempiere/FormDefinition/IssueManagement/issueAvatar.vue'
+import IssueCommentAdd from '@/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentAdd.vue'
+import IssueCommentView from '@/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueCommentView.vue'
+import IssueLog from '@/components/ADempiere/FormDefinition/IssueManagement/IsssueFeed/issueLog.vue'
 import RecordTime from '@/components/ADempiere/Form/Issues/recordTime.vue'
 
 // Constants
@@ -1604,7 +1429,6 @@ import { isEmptyValue } from '@/utils/ADempiere'
 import { showMessage } from '@/utils/ADempiere/notification'
 import { translateDateByLong, formatDate } from '@/utils/ADempiere/formatValue/dateFormat'
 import { zoomIn } from '@/utils/ADempiere/coreUtils.js'
-// import { getImagePath } from '@/utils/ADempiere/resource.js'
 
 // Api Request Methods
 import {
@@ -1623,6 +1447,10 @@ export default defineComponent({
   name: 'IssueComment',
 
   components: {
+    IssueAvatar,
+    IssueCommentAdd,
+    IssueCommentView,
+    IssueLog,
     RecordTime
   },
 
@@ -1651,11 +1479,9 @@ export default defineComponent({
     const newDateNextAction = ref(new Date())
     const summary = ref('')
     const updateSummary = ref('')
-    const comments = ref('')
     const commentUpdate = ref('')
     const markdownContent = ref('')
     const commentUpdatePreview = ref(false)
-    const commentPreview = ref(false)
     const summaryUpdatePreview = ref(false)
     const summaryNewPreview = ref(false)
     const isPanelNewRequest = ref(false)
@@ -1673,23 +1499,28 @@ export default defineComponent({
 
     currentSalesReps.value = store.getters['user/userInfo'].id
 
-    const listOption = computed(() => {
-      const listMailTemplates = store.getters.getListMailTemplates
-      listMailTemplates.isCollapseDown = {
-        icon: 'el-icon-arrow-down',
-        title: 'Collapse',
-        action(editor) {
-          isCollapseComments.value = !isCollapseComments.value
-        }
-      }
-      listMailTemplates.isCollapseUp = {
-        icon: 'el-icon-arrow-up',
-        title: 'Collapse',
-        action(editor) {
-          isCollapseComments.value = !isCollapseComments.value
+    const storedMailTemplatesList = computed(() => {
+      return store.getters.getListMailTemplates
+    })
+
+    const editorToolbarList = computed(() => {
+      return {
+        listMailTemplates: storedMailTemplatesList.value,
+        isCollapseUp: {
+          icon: 'el-icon-arrow-up',
+          title: 'Collapse',
+          action(editor) {
+            isCollapseComments.value = !isCollapseComments.value
+          }
+        },
+        isCollapseDown: {
+          icon: 'el-icon-arrow-down',
+          title: 'Collapse',
+          action(editor) {
+            isCollapseComments.value = !isCollapseComments.value
+          }
         }
       }
-      return listMailTemplates
     })
 
     const isNewIssues = computed({
@@ -2364,27 +2195,6 @@ export default defineComponent({
       })
     }
 
-    function addNewComments(params) {
-      const { id, uuid } = currentIssues.value
-      store.dispatch('newIssueComment', {
-        id,
-        uuid,
-        result: comments.value
-      })
-        .then(response => {
-          nextTick(() => {
-            scrollIssues.value.$el.scrollTop = scrollIssues.value.$el.scrollHeight
-            // scrollTimeLineTabComments.value.$refs.wrap.scrollTop = 9999999
-          })
-        })
-      clearComments()
-      commentPreview.value = false
-    }
-
-    function clearComments() {
-      comments.value = ''
-    }
-
     function handleCommand(command) {
       const { comment, option } = command
       if (option === 'delete') {
@@ -2437,37 +2247,6 @@ export default defineComponent({
       })
     }
 
-    function labelDisplayChange(comment, isChange = false, isOption = false) {
-      if (
-        !isEmptyValue(comment.label) &&
-        isChange
-      ) {
-        return comment.label
-      }
-      if (
-        !isEmptyValue(comment.new_value) &&
-        isOption
-      ) {
-        return comment.displayed_value
-      }
-      if (
-        !isEmptyValue(comment.displayed_value) &&
-        isOption
-      ) {
-        return comment.displayed_value
-      }
-      return ''
-    }
-
-    function logDisplayLanguaje(isChange = false, isOption = false) {
-      if (isChange) {
-        return lang.t('issues.change')
-      }
-      if (isOption) {
-        return lang.t('issues.to')
-      }
-      return
-    }
     function newIssues(issues) {
       isPanelNewRequest.value = !isPanelNewRequest.value
     }
@@ -2509,19 +2288,6 @@ export default defineComponent({
       return 'padding-top: 35px;'
     })
 
-    loadListMail()
-
-    function avatarResize(user) {
-      // const { avatar } = user
-      // const { uri } = getImagePath({
-      //   file: avatar,
-      //   width: 20,
-      //   height: 20,
-      //   operation: 'resize'
-      // })
-      return ''
-    }
-
     function defaultValueNewIssues() {
       findSalesReps(true)
         .then(() => {
@@ -2742,7 +2508,11 @@ export default defineComponent({
         findPriority(true)
       }
     })
-    findSalesReps(true)
+    // findSalesReps(true)
+
+    if (isEmptyValue(storedMailTemplatesList.value.menus)) {
+      loadListMail()
+    }
 
     return {
       // Ref
@@ -2754,10 +2524,8 @@ export default defineComponent({
       currentDateNextAction,
       newDateNextAction,
       summary,
-      comments,
       commentUpdate,
       commentUpdatePreview,
-      commentPreview,
       summaryUpdatePreview,
       summaryNewPreview,
       updateSummary,
@@ -2797,7 +2565,7 @@ export default defineComponent({
       isShowTitleForm,
       isPanelNewRequest,
       getFixedHeader,
-      listOption,
+      editorToolbarList,
       isMobile,
       userId,
       // Methodos
@@ -2818,8 +2586,6 @@ export default defineComponent({
       updateIssuesStatus,
       updateIssuesDateNextAction,
       defaultValueNewIssues,
-      addNewComments,
-      clearComments,
       translateDateByLong,
       formatDate,
       handleCommand,
@@ -2831,11 +2597,8 @@ export default defineComponent({
       removeIssues,
       handleCommandIssues,
       exitPopover,
-      labelDisplayChange,
-      logDisplayLanguaje,
       loadListMail,
       zoomIssues,
-      avatarResize,
       remoteMethodSales,
       //
       findBusinessPartner,
diff --git a/src/store/modules/ADempiere/mailTemplate.js b/src/store/modules/ADempiere/mailTemplate.js
index aaf85aa2cd..36cc76a724 100644
--- a/src/store/modules/ADempiere/mailTemplate.js
+++ b/src/store/modules/ADempiere/mailTemplate.js
@@ -16,6 +16,8 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import Vue from 'vue'
+
 import lang from '@/lang'
 
 // API Request Methods
@@ -25,7 +27,7 @@ import {
 
 const initStateMailTemplate = {
   listMail: {
-    title: 'Plantilla de Correo',
+    title: lang.t('issues.emailTemplate'),
     icon: 'v-md-icon-tip',
     menus: []
   }
@@ -36,7 +38,7 @@ export default {
 
   mutations: {
     setListMailTemplates(state, list) {
-      state.listMail = list
+      Vue.set(state.listMail, 'menus', list)
     }
   },
 
@@ -64,13 +66,7 @@ export default {
             }
           })
 
-          commit('setListMailTemplates', {
-            listMailTemplates: {
-              title: lang.t('issues.emailTemplate'),
-              icon: 'v-md-icon-tip',
-              menus: listOptions
-            }
-          })
+          commit('setListMailTemplates', listOptions)
         })
         .catch(error => {
           console.warn(`Error getting List Mail: ${error.message}. Code: ${error.code}.`)