diff --git a/resources/assets/js/components/home/caseDetail/AttachedDocuments.vue b/resources/assets/js/components/home/caseDetail/AttachedDocuments.vue
index ecf18047c..79f96a037 100644
--- a/resources/assets/js/components/home/caseDetail/AttachedDocuments.vue
+++ b/resources/assets/js/components/home/caseDetail/AttachedDocuments.vue
@@ -14,9 +14,13 @@
                 <i :class="classIcon(item.extension)"></i>
               </div>
               <div class="flex">
-                <div @click="item.onClick" class="v-item-except text-sm h-1x">
+                <a
+                  :href="href(item)"
+                  @click="item.onClick(item)"
+                  class="v-item-except text-sm h-1x"
+                >
                   {{ item.title }}
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -41,6 +45,7 @@ export default {
       },
     };
   },
+  computed: {},
   methods: {
     classBtn(cls) {
       return "btn v-btn-request " + cls;
@@ -48,6 +53,13 @@ export default {
     classIcon(icon) {
       return this.icon[icon];
     },
+    href(item) {
+      return (
+        window.config.SYS_SERVER +
+        window.config.SYS_URI +
+        `cases/casesShowCaseNotes?a=${item.data.APP_DOC_UID}&v=${item.data.DOC_VERSION}`
+      );
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/components/home/caseDetail/CaseComment.vue b/resources/assets/js/components/home/caseDetail/CaseComment.vue
index 084a49651..214101f25 100644
--- a/resources/assets/js/components/home/caseDetail/CaseComment.vue
+++ b/resources/assets/js/components/home/caseDetail/CaseComment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="comment mb-2 row" @click="onClick(data)">
+  <div :class="classSelected" @click="onSelected(data)">
     <div class="comment-avatar col-md-1 col-sm-2 text-center pr-1">
       <a href=""
         ><img
@@ -25,6 +25,7 @@ export default {
   props: {
     data: Object,
     onClick: Function,
+    selected: Boolean,
   },
   data() {
     return {};
@@ -40,6 +41,12 @@ export default {
       }
       return "";
     },
+    classSelected() {
+      if (this.selected) {
+        return "v-comment-selected mb-2 row";
+      }
+      return "v-comment mb-2 row";
+    },
   },
   methods: {
     classBtn(cls) {
@@ -48,6 +55,10 @@ export default {
     classIcon(icon) {
       return this.icon[icon];
     },
+    onSelected() {
+      this.$emit("onSelected", this.data);
+      this.onClick(this.data);
+    },
   },
 };
 </script>
@@ -57,4 +68,8 @@ export default {
   max-width: 30px;
   height: auto;
 }
+
+.v-comment-selected {
+  background-color: aliceblue;
+}
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/components/home/caseDetail/CaseComments.vue b/resources/assets/js/components/home/caseDetail/CaseComments.vue
index 43de5bacf..343dcc63b 100644
--- a/resources/assets/js/components/home/caseDetail/CaseComments.vue
+++ b/resources/assets/js/components/home/caseDetail/CaseComments.vue
@@ -6,7 +6,12 @@
         <b>{{ data.title }}</b>
       </p>
       <div v-for="item in data.items" :key="item.date">
-        <case-comment :data="item" :onClick="onClick" />
+        <case-comment
+          :data="item"
+          :onClick="onClick"
+          :selected="item == itemSelected"
+          @onSelected="onSelected"
+        />
       </div>
     </div>
     <div class="comments col-md-12">
@@ -66,7 +71,9 @@ export default {
     CaseComment,
   },
   data() {
-    return {};
+    return {
+      itemSelected: null,
+    };
   },
   computed: {
     pathImgOwner() {
@@ -92,6 +99,9 @@ export default {
       this.$refs["comment"].value = "";
       this.$refs["send"].checked = false;
     },
+    onSelected(item) {
+      this.itemSelected = item;
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/MyCases.vue b/resources/assets/js/home/MyCases.vue
index 7a3f1c6e5..53985f57c 100644
--- a/resources/assets/js/home/MyCases.vue
+++ b/resources/assets/js/home/MyCases.vue
@@ -31,13 +31,14 @@
       </div>
       <div slot="duration" slot-scope="props">{{ props.row.DURATION }}</div>
       <div slot="actions" slot-scope="props">
-        <div class="btn-default">
+        <div class="btn-default" @click="openComments(props.row)">
           <i class="fas fa-comments"></i>
           <span class="badge badge-light">9</span>
           <span class="sr-only">unread messages</span>
         </div>
       </div>
     </v-server-table>
+    <ModalComments ref="modal-comments"></ModalComments>
   </div>
 </template>
 
@@ -45,6 +46,7 @@
 import HeaderCounter from "../components/home/HeaderCounter.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import ModalComments from "./modal/ModalComments.vue";
 import GroupedCell from "../components/utils/GroupedCell.vue";
 import api from "./../api/index";
 
@@ -55,6 +57,7 @@ export default {
     ButtonFleft,
     ModalNewRequest,
     GroupedCell,
+    ModalComments,
   },
   props: {},
   data() {
@@ -188,6 +191,10 @@ export default {
           FINISH_DATE: v.APP_FINISH_DATE || "",
           PENDING_TASKS: [],
           DURATION: v.DURATION,
+          DEL_INDEX: v.DEL_INDEX,
+          APP_UID: v.APP_UID,
+          PRO_UID: v.PRO_UID,
+          TAS_UID: v.TAS_UID,
         });
       });
       return data;
@@ -367,6 +374,13 @@ export default {
       });
       return data;
     },
+    openComments(data) {
+      let that = this;
+      api.cases.open(_.extend({ ACTION: "todo" }, data)).then(() => {
+        that.$refs["modal-comments"].dataCase = data;
+        that.$refs["modal-comments"].show();
+      });
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/modal/ModalComments.vue b/resources/assets/js/home/modal/ModalComments.vue
new file mode 100644
index 000000000..88d71808d
--- /dev/null
+++ b/resources/assets/js/home/modal/ModalComments.vue
@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <b-modal ref="modal-comments" hide-footer size="xl">
+      <div class="row">
+        <div class="col-sm-8">
+          <case-comments
+            :data="dataComments"
+            :onClick="onClickComment"
+            :postComment="postComment"
+          />
+        </div>
+        <div class="col-sm-4">
+          <attached-documents
+            :data="dataAttachedDocuments"
+          ></attached-documents>
+        </div>
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import Api from "./../../api/index";
+import CaseComments from "../../components/home/caseDetail/CaseComments.vue";
+import AttachedDocuments from "../../components/home/caseDetail/AttachedDocuments.vue";
+export default {
+  name: "ModalComments",
+  components: {
+    CaseComments,
+    AttachedDocuments,
+  },
+  props: {},
+  mounted() {},
+  data() {
+    return {
+      dataCase: null,
+      dataComments: {
+        title: this.$i18n.t("ID_COMMENTS"),
+        items: [],
+      },
+      dataAttachedDocuments: {
+        title: "Attached Documents",
+        items: [],
+      },
+      onClickComment: (data) => {
+        let att = [];
+        this.dataAttachedDocuments.items = [];
+        _.each(data.data.attachments, (a) => {
+          att.push({
+            data: a,
+            title: a.APP_DOC_FILENAME,
+            extension: a.APP_DOC_FILENAME.split(".").pop(),
+            onClick: () => {},
+          });
+        });
+        this.dataAttachedDocuments.items = att;
+      },
+      postComment: (comment, send) => {
+        let that = this;
+        Api.caseNotes
+          .post(
+            _.extend({}, this.dataCase, {
+              COMMENT: comment,
+              SEND_MAIL: send,
+            })
+          )
+          .then((response) => {
+            if (response.data.success === "success") {
+              that.getCasesNotes();
+            }
+          });
+      },
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+    show() {
+      this.getCasesNotes();
+      this.$refs["modal-comments"].show();
+    },
+    cancel() {
+      this.$refs["modal-comments"].hide();
+    },
+    getCasesNotes() {
+      let that = this;
+      Api.cases
+        .casenotes(this.dataCase)
+        .then((response) => {
+          that.formatResponseCaseNotes(response.data.notes);
+        })
+        .catch((err) => {
+          throw new Error(err);
+        });
+    },
+    formatResponseCaseNotes(notes) {
+      let that = this,
+        notesArray = [];
+      _.each(notes, (n) => {
+        notesArray.push({
+          user: that.nameFormatCases(
+            n.USR_FIRSTNAME,
+            n.USR_LASTNAME,
+            n.USR_USERNAME
+          ),
+          date: n.NOTE_DATE,
+          comment: n.NOTE_CONTENT,
+          data: n,
+        });
+      });
+
+      this.dataComments.items = notesArray;
+    },
+    /**
+     * Get for user format name configured in Processmaker Environment Settings
+     *
+     * @param {string} name
+     * @param {string} lastName
+     * @param {string} userName
+     * @return {string} nameFormat
+     */
+    nameFormatCases(name, lastName, userName) {
+      let nameFormat = "";
+      if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
+        return nameFormat;
+      }
+      if (this.nameFormat === "@firstName @lastName") {
+        nameFormat = name + " " + lastName;
+      } else if (this.nameFormat === "@firstName @lastName (@userName)") {
+        nameFormat = name + " " + lastName + " (" + userName + ")";
+      } else if (this.nameFormat === "@userName") {
+        nameFormat = userName;
+      } else if (this.nameFormat === "@userName (@firstName @lastName)") {
+        nameFormat = userName + " (" + name + " " + lastName + ")";
+      } else if (this.nameFormat === "@lastName @firstName") {
+        nameFormat = lastName + " " + name;
+      } else if (this.nameFormat === "@lastName, @firstName") {
+        nameFormat = lastName + ", " + name;
+      } else if (this.nameFormat === "@lastName, @firstName (@userName)") {
+        nameFormat = lastName + ", " + name + " (" + userName + ")";
+      } else {
+        nameFormat = name + " " + lastName;
+      }
+      return nameFormat;
+    },
+  },
+};
+</script>
+
+<style>
+</style>