diff --git a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
index 4bc0f5e87437e5ef635ee06c6a89cc5e0a3ac85f..88e6b209593a43eadc4a7d3df5820091949ee9d2 100644
--- a/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
+++ b/wax-prosemirror-components/src/components/comments/CommentsBoxList.js
@@ -19,10 +19,21 @@ export default ({ comments, view, area }) => {
       const { attrs: { id } } = comment;
       let isActive = false;
       // if (comment.id === active) isActive = true
-      commentEl = document.getElementById(id);
+
       //annotation top
-      console.log(commentEl.getBoundingClientRect().top, commentEl.offsetTop);
-      annotationTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+      if (area === "main") {
+        commentEl = document.querySelector(`span[data-id="${id}"]`);
+        annotationTop = commentEl.getBoundingClientRect().top - WaxSurface.top;
+      } else {
+        const panelWrapper = document.getElementsByClassName("panelWrapper");
+        const panelWrapperHeight = panelWrapper[0].getBoundingClientRect()
+          .height;
+        commentEl = document
+          .querySelector("#notes-container")
+          .querySelector(`span[data-id="${id}"]`);
+        annotationTop =
+          commentEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+      }
 
       // get height of this comment box
       const boxEl = document.querySelector(`div[data-comment="comment-${id}"]`);
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 3f815e45c5200bc1597bc9ccc516c801c6fc2066..972f6437d9765127a78305150e0569cc013e5770 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -210,7 +210,7 @@ const hasNotes = main => {
 const withNotes = () => {
   return (
     <NotesAreaContainer>
-      <NotesContainer>
+      <NotesContainer id="notes-container">
         <NotesArea />
       </NotesContainer>
       <CommentsContainer>
diff --git a/wax-prosemirror-schema/src/marks/commentMark.js b/wax-prosemirror-schema/src/marks/commentMark.js
index 0c15313044270e88fb1d09cb142bba4cb5608877..2fc3ba73b04635cf77a87b0c2fe78c0bef38bcb0 100644
--- a/wax-prosemirror-schema/src/marks/commentMark.js
+++ b/wax-prosemirror-schema/src/marks/commentMark.js
@@ -23,7 +23,7 @@ const comment = {
       "span",
       {
         class: "comment",
-        id: node.attrs.id,
+        "data-id": node.attrs.id,
         "data-group": node.attrs.group,
         "data-conversation": JSON.stringify(node.attrs.conversation)
       }