diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 2072bde19f491b370c8a323986530b0f29f56c0e..52c7c06355d8a252716fc4509c78034b045d0686 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -47,7 +47,7 @@ const Editoria = () => (
       autoFocus
       placeholder="Type Something..."
       fileUpload={file => renderImage(file)}
-      value=""
+      value={"this is some content"}
       layout={EditoriaLayout}
       user={user}
     />
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index 79d766a1a3a94f5ba16ac98f6805ad15fb95f912..8e3b42561264abd944f345b3bcde533daa01b10c 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -19,7 +19,8 @@ import {
   TextToolGroupService,
   NoteService,
   NoteToolGroupService,
-  TrackChangeService
+  TrackChangeService,
+  CommentsService
 } from "wax-prosemirror-services";
 
 import invisibles, {
@@ -65,6 +66,7 @@ export default {
     new AnnotationToolGroupService(),
     new NoteToolGroupService(),
     new ListToolGroupService(),
-    new TrackChangeService()
+    new TrackChangeService(),
+    new CommentsService()
   ]
 };
diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index afd66f9bc71eddd19af040f1927cbbbe29b430cb..5e7942db5b59214c361cb636edfcf49e6bf722d5 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -18,13 +18,13 @@ export default css`
     height: 17px;
     background: black;
     color: white;
+    cursor: pointer;
   }
 
   .ProseMirror footnote::after {
     content: counter(footnote);
     position: relative;
     bottom: 2px;
-    cursor: pointer;
     font-size: 16px;
     counter-increment: footnote;
   }
diff --git a/wax-prosemirror-services/src/CommentsService/CommentBubbleComponent.js b/wax-prosemirror-services/src/CommentsService/CommentBubbleComponent.js
index 8a24623dd042e82521dda5872ca3a77664f8d27e..e17ca7f7e3e52cf4dfe511b1bf93e6d3f456ad7f 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentBubbleComponent.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentBubbleComponent.js
@@ -3,6 +3,8 @@ import styled from "styled-components";
 import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
 
-const CommentBubbleComponent = ({ setPosition, position }) => {};
+const CommentBubbleComponent = ({ setPosition, position }) => {
+  return <div>bubble</div>;
+};
 
 export default CommentBubbleComponent;
diff --git a/wax-prosemirror-services/src/CommentsService/CommentsService.js b/wax-prosemirror-services/src/CommentsService/CommentsService.js
index f34399ac6300b18d41f2bc5ad294c210de003198..7f85f4f65bd25acc93966065cecd80cdb76019d6 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentsService.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentsService.js
@@ -8,7 +8,7 @@ export default class CommentsService extends Service {
   boot() {
     const createOverlay = this.container.get("CreateOverlay");
     createOverlay(CommentBubbleComponent, {
-      // markType: "link", // TODO ONLY WITH SELECTION NO MARK TYPE
+      markType: "selection",
       followCursor: false
     });
   }
@@ -17,5 +17,5 @@ export default class CommentsService extends Service {
     const createMark = this.container.get("CreateMark");
   }
 
-  dependencies = [new OverlayService()];
+  // dependencies = [new OverlayService()];
 }
diff --git a/wax-prosemirror-services/src/OverlayService/usePosition.js b/wax-prosemirror-services/src/OverlayService/usePosition.js
index 2dfaa600c4d983da79f2200dbe17e224ea4bfaa6..7b68042dd6de2a2c412a7fd59608f597eb718824 100644
--- a/wax-prosemirror-services/src/OverlayService/usePosition.js
+++ b/wax-prosemirror-services/src/OverlayService/usePosition.js
@@ -35,15 +35,21 @@ export default options => {
     };
   };
 
-  const updatePosition = useCallback((followCursor = true) => {
-    if (!main) return defaultOverlay;
+  const displayOnSelection = main => {
+    const { from, to } = main.state.selection;
+    if (from === to) {
+      return defaultOverlay;
+    } else {
+      console.log("have selection > 1");
+    }
+  };
 
-    //TODO also acount for the case you don't look for a mark but you need the selection to be > 1
-    const PMmark = main.state.schema.marks[options.markType];
+  const displayOnMark = (main, options) => {
+    const { markType, followCursor } = options;
+    const PMmark = main.state.schema.marks[markType];
     mark = DocumentHelpers.findMark(main.state, PMmark);
 
     if (!isObject(mark)) return defaultOverlay;
-
     const { from, to } = mark
       ? followCursor ? main.state.selection : { from, to }
       : main.state.selection;
@@ -57,6 +63,16 @@ export default options => {
       to,
       mark
     };
+  };
+
+  const updatePosition = useCallback((followCursor = true) => {
+    if (!main) return defaultOverlay;
+    const { markType } = options;
+
+    const mark =
+      markType === "selection"
+        ? displayOnSelection(main)
+        : displayOnMark(main, options);
   });
 
   useEffect(