diff --git a/src/store/modules/ADempiere/mailTemplate.js b/src/store/modules/ADempiere/mailTemplate.js
index 36cc76a724..0fd8ce31c7 100644
--- a/src/store/modules/ADempiere/mailTemplate.js
+++ b/src/store/modules/ADempiere/mailTemplate.js
@@ -24,6 +24,7 @@ import lang from '@/lang'
 import {
   requestMailTemplates
 } from '@/api/ADempiere/user-interface/component/index.ts'
+import { isEmptyValue } from '@/utils/ADempiere'
 
 const initStateMailTemplate = {
   listMail: {
@@ -43,7 +44,9 @@ export default {
   },
 
   actions: {
-    findListMailTemplates({ commit }) {
+    findListMailTemplates({ commit, getters }) {
+      const listMailTemplates = getters.getListMailTemplates
+      if (isEmptyValue(listMailTemplates)) return
       requestMailTemplates({})
         .then(response => {
           const { records } = response
@@ -53,6 +56,7 @@ export default {
             return {
               name,
               text: subject,
+              mail_text,
               action(editor) {
                 editor.insert(selected => {
                   const placeholder = mail_text
diff --git a/src/store/modules/ADempiere/reportManager.js b/src/store/modules/ADempiere/reportManager.js
index 476a72c48c..ae530a4d85 100644
--- a/src/store/modules/ADempiere/reportManager.js
+++ b/src/store/modules/ADempiere/reportManager.js
@@ -69,7 +69,8 @@ const initState = {
   expandedAll: true,
   exportReport: {},
   contactSend: '',
-  typeNotify: ''
+  typeNotify: '',
+  defaultBody: ''
 }
 const reportManager = {
   state: initState,
@@ -120,9 +121,11 @@ const reportManager = {
     },
     setShowPanelConfig(state, { containerUuid, value }) {
       Vue.set(state.isShowPanelConfig, containerUuid, value)
+    },
+    setDefaultBody(state, message) {
+      state.defaultBody = message
     }
   },
-
   actions: {
     reportActionPerformed({ dispatch, getters }, {
       containerUuid,
@@ -872,6 +875,9 @@ const reportManager = {
 
     getShowPanelConfig: (state) => ({ containerUuid }) => {
       return state.isShowPanelConfig[containerUuid]
+    },
+    getDefaultBody: (state) => {
+      return state.defaultBody
     }
   }
 }
diff --git a/src/views/ADempiere/ReportViewerEngine/dialog/index.vue b/src/views/ADempiere/ReportViewerEngine/dialog/index.vue
index c10c85d5a4..d650dae409 100644
--- a/src/views/ADempiere/ReportViewerEngine/dialog/index.vue
+++ b/src/views/ADempiere/ReportViewerEngine/dialog/index.vue
@@ -133,12 +133,21 @@
             />
           </div>
           <v-md-editor
+            v-if="!isShowVIwer"
             v-model="markdownContent"
             left-toolbar="undo redo clear h bold italic strikethrough quote ul ol table hr link image code | emoji listMailTemplates"
             right-toolbar="sync-scroll fullscreen"
             mode="edit"
             height="150px"
             :placeholder="$t('window.containerInfo.logWorkflow.addNote')"
+            :toolbar="editorToolbarList"
+          />
+          <v-md-preview
+            v-else
+            :text="markdownContent"
+            class="previwer-disable"
+            style="padding: 0px"
+            height="150px"
           />
         </el-card>
       </el-col>
@@ -158,6 +167,13 @@
           type="danger"
           @click="viewShowDialog"
         />
+        <el-checkbox
+          v-model="isShowVIwer"
+          :label="$t('issues.preview')"
+          :border="true"
+          style="float: right; margin-right: 1%;"
+          class="button-base-icon"
+        />
       </el-col>
     </el-row>
   </div>
@@ -194,6 +210,31 @@ export default defineComponent({
     }
   },
   setup(props) {
+    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
+          }
+        }
+      }
+    })
+
+    const isCollapseComments = ref(false)
+    const isShowVIwer = ref(false)
     const checkedItemGeneral = ref(0)
     const checkedItem = ref(0)
     const printFormat = computed(() => {
@@ -204,7 +245,16 @@ export default defineComponent({
     const isLoading = ref(false)
     const validTime = ref(3600)
     const titleDocument = ref(props.reportOutput.name)
-    const markdownContent = ref('')
+    const markdownContent = computed({
+      // getter
+      get() {
+        return store.getters.getDefaultBody
+      },
+      // setter
+      set(newValue) {
+        store.commit('setDefaultBody', newValue)
+      }
+    })
     const toUser = computed(() => {
       return contactSend.value ? contactSend.value.map(item => item.label).join(', ') : ''
     })
@@ -349,9 +399,17 @@ export default defineComponent({
         isShowMessage: false
       })
     }
+
+    function previwerBody() {
+      isShowVIwer.value = !isShowVIwer.value
+    }
+
     return {
+      isCollapseComments,
+      editorToolbarList,
       checkedItemGeneral,
       checkedItem,
+      isShowVIwer,
       printFormat,
       printFormatValue,
       exportData,
@@ -371,6 +429,7 @@ export default defineComponent({
       sendLink,
       copyValue,
       loadData,
+      previwerBody,
       downloadFile,
       markdownContent,
       toUser
diff --git a/src/views/ADempiere/ReportViewerEngine/index.vue b/src/views/ADempiere/ReportViewerEngine/index.vue
index ea8b11300e..4039951f39 100644
--- a/src/views/ADempiere/ReportViewerEngine/index.vue
+++ b/src/views/ADempiere/ReportViewerEngine/index.vue
@@ -147,9 +147,6 @@ export default defineComponent({
       return storedReportDefinition.value.name
     })
     const containerUuid = computed(() => {
-      // const reportDefinition = storedReportDefinition.value
-      // if (isEmptyValue(reportDefinition) && isEmptyValue(reportDefinition.containerUuid)) return reportId.toString()
-      // return reportDefinition.containerUuid
       return reportId.toString()
     })
     const help = computed(() => {
@@ -229,7 +226,7 @@ export default defineComponent({
           const fileName = root.$route.params.fileName
           const instanceUuid = root.$route.params.instanceUuid
           const currentReportLog = runsList.find(runReport => {
-            return runReport.uuid === reportUuid
+            return runReport.id === reportId
           })
 
           // empty report log
@@ -272,12 +269,6 @@ export default defineComponent({
         })
     }
 
-    // function findActionsMenu() {
-    //   store.dispatch('setReportActionsMenu', {
-    //     containerUuid: reportUuid
-    //   })
-    // }
-
     function handleClose() {
       showPanelConfigReport(false)
     }
@@ -299,6 +290,8 @@ export default defineComponent({
 
     const drawer = ref(false)
 
+    store.dispatch('findListMailTemplates')
+
     onMounted(() => {
       getReport()
       root.$route.meta.reportType = reportType.value
diff --git a/src/views/ADempiere/ReportViewerEngine/searchCriteria/index.vue b/src/views/ADempiere/ReportViewerEngine/searchCriteria/index.vue
index bfb0e92f2b..bdb62a7a5f 100644
--- a/src/views/ADempiere/ReportViewerEngine/searchCriteria/index.vue
+++ b/src/views/ADempiere/ReportViewerEngine/searchCriteria/index.vue
@@ -31,11 +31,14 @@
 
 <script>
 import store from '@/store'
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
+
 import PrintOptions from './printFormatReport.vue'
 import reportSummary from './reportSumary.vue'
 import refreshButton from './refreshButton.vue'
 
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
+
 export default defineComponent({
   name: 'reportSearchCriteria',
   components: {
@@ -54,10 +57,17 @@ export default defineComponent({
     }
   },
   setup(props, { root }) {
+    const storedMailTemplatesList = computed(() => {
+      return store.getters.getListMailTemplates
+    })
     function viewShowDialog() {
+      if (!isEmptyValue(storedMailTemplatesList.value) && !isEmptyValue(storedMailTemplatesList.value.menus)) {
+        store.commit('setDefaultBody', storedMailTemplatesList.value.menus[0].mail_text)
+      }
       store.commit('setShowDialog', true)
     }
     return {
+      storedMailTemplatesList,
       viewShowDialog
     }
   }