diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index ae4e7c88fd33bd2be26ca21014d8d4037fdb8edd..b99067c7eb28fb20f406a525af26156b5b503495 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -47,9 +47,11 @@ const Editoria = () => (
       autoFocus
       placeholder="Type Something..."
       fileUpload={file => renderImage(file)}
-      value={"this is some content"}
+      value={
+        '<p class="paragraph">this is <span class="comment" id="1b87a19d-891c-4329-9482-b8ab8523c129" data-viewid="main" data-conversation="[]">some</span> content</p>'
+      }
       layout={EditoriaLayout}
-      // onChange={source => console.log(source)}
+      onChange={source => console.log(source)}
       user={user}
     />
   </Fragment>
diff --git a/wax-prosemirror-components/src/components/comments/CommentBox.js b/wax-prosemirror-components/src/components/comments/CommentBox.js
index 32e0042cb9420d80be1fd128f5adb4b3db1dab72..c2e5fa7b81ebde03a59d3b1857f16ecd4e832e75 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBox.js
@@ -1,10 +1,6 @@
 import React, { useEffect, useRef, useContext } from "react";
 import styled from "styled-components";
 
-// export default ({ node, view }) => {
-//   useEffect(() => {}, []);
-// };
-
 const CommentBoxStyled = styled.div`
   height: 50px;
   width: 50px;
@@ -14,5 +10,10 @@ const CommentBoxStyled = styled.div`
   background: black;
 `;
 
-const CommentBox = () => <CommentBoxStyled />;
-export default CommentBox;
+export default ({ mark, view }) => {
+  useEffect(() => {
+    console.log(document.getElementById(mark.attrs.id));
+  }, []);
+
+  return <CommentBoxStyled />;
+};
diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index 01299fe178e4b00f71775474764ea1f0fe5c1caf..b30084e9a69631967cfdb558211fa98f36cd7730 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -1,11 +1,16 @@
 import React, { Fragment } from "react";
 import CommentBox from "./CommentBox";
 
+//TODO find from marks actual comment mark
 export default ({ comments, view }) => {
   return (
     <Fragment>
       {comments.map(comment => (
-        <CommentBox key="" node={comment.node} view={view} />
+        <CommentBox
+          key={comment.node.marks[0].attrs.id}
+          mark={comment.node.marks[0]}
+          view={view}
+        />
       ))}
     </Fragment>
   );
diff --git a/wax-prosemirror-schema/src/marks/commentMark.js b/wax-prosemirror-schema/src/marks/commentMark.js
index 4dbaa4bc18db5dd61c8ae9ffcd862d73f1153522..dc754efecc3b8f25b6dc1847bf3f96f84eb912df 100644
--- a/wax-prosemirror-schema/src/marks/commentMark.js
+++ b/wax-prosemirror-schema/src/marks/commentMark.js
@@ -1,5 +1,6 @@
 const comment = {
   attrs: {
+    id: { default: "" },
     viewId: { default: "" },
     conversation: []
   },
@@ -10,7 +11,8 @@ const comment = {
       tag: "span.comment[data-conversation]",
       getAttrs(dom) {
         return {
-          viewId: dom.dataset.viewId,
+          id: dom.id,
+          viewId: dom.dataset.viewid,
           conversation: JSON.parse(dom.dataset.conversation)
         };
       }
@@ -21,6 +23,7 @@ const comment = {
       "span",
       {
         class: "comment",
+        id: node.attrs.id,
         "data-viewId": node.attrs.viewId,
         "data-conversation": JSON.stringify(node.attrs.conversation)
       }
diff --git a/wax-prosemirror-utilities/src/commands/Commands.js b/wax-prosemirror-utilities/src/commands/Commands.js
index 0c60f9dc963f81c7e9049a6d5e0851898bd915d3..27b25c3b5a95fc4b0123036da47c2ffc9ba9acb1 100644
--- a/wax-prosemirror-utilities/src/commands/Commands.js
+++ b/wax-prosemirror-utilities/src/commands/Commands.js
@@ -1,3 +1,5 @@
+import { v4 as uuid } from "uuid";
+
 const markActive = type => state => {
   const { from, $from, to, empty } = state.selection;
 
@@ -64,6 +66,7 @@ const createComment = (state, dispatch, activeViewId) => {
       $from.pos,
       $to.pos,
       state.schema.marks.comment.create({
+        id: uuid(),
         viewId: activeViewId,
         conversation: []
       })