diff --git a/wax-prosemirror-components/src/components/comments/CommentComponent.js b/wax-prosemirror-components/src/components/comments/CommentComponent.js
index 81b28723b74f6714d8e5db5ad0a1bc6353502631..040586ceef7076aa7bdad031296dca521f0d6541 100644
--- a/wax-prosemirror-components/src/components/comments/CommentComponent.js
+++ b/wax-prosemirror-components/src/components/comments/CommentComponent.js
@@ -1,10 +1,43 @@
-import React from "react";
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  Fragment
+} from "react";
 import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
+import { DocumentHelpers } from "wax-prosemirror-utilities";
 
-const CommentComponentStyled = styled.div``;
+const CommentComponentStyled = styled.div`
+  width: 100px;
+  height: 100px;
+  background: black;
+  display: flex;
+  flex-direction: row;
+`;
 
-const CommentComponent = () => {
-  return <CommentComponentStyled />;
+export default () => {
+  const { view: { main } } = useContext(WaxContext);
+  const [comments, setComments] = useState([]);
+  useEffect(
+    () => {
+      setComments(updateComments(main));
+    },
+
+    [JSON.stringify(updateComments(main))]
+  );
+
+  const CommentComponent = useMemo(
+    () => <CommentComponentStyled view={main} />,
+    [comments]
+  );
+  return <Fragment>{CommentComponent}</Fragment>;
 };
 
-export default CommentComponent;
+const updateComments = view => {
+  if (view) {
+    // TODO find comments
+  }
+  return [];
+};
diff --git a/wax-prosemirror-services/src/CommentsService/CommentsService.js b/wax-prosemirror-services/src/CommentsService/CommentsService.js
index 0447707b8d21b0aa5badafefd8a599deb0782aaa..c5190c09bd970f5e8ee807ceffce407e97b64810 100644
--- a/wax-prosemirror-services/src/CommentsService/CommentsService.js
+++ b/wax-prosemirror-services/src/CommentsService/CommentsService.js
@@ -18,7 +18,7 @@ export default class CommentsService extends Service {
       selection: true
     });
 
-    // layout.addComponent("commentsArea", CommentComponent);
+    layout.addComponent("commentsArea", CommentComponent);
   }
 
   register() {
diff --git a/wax-prosemirror-services/src/NoteService/NoteComponent.js b/wax-prosemirror-services/src/NoteService/NoteComponent.js
index 018446cf5d35927756f0a60e425427909b84a64f..22eceb31f6c587ec2b9d3ee7c032177720b50e72 100644
--- a/wax-prosemirror-services/src/NoteService/NoteComponent.js
+++ b/wax-prosemirror-services/src/NoteService/NoteComponent.js
@@ -1,4 +1,10 @@
-import React, { useContext, useState, useEffect, useMemo } from "react";
+import React, {
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  Fragment
+} from "react";
 import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
 import { isEqual } from "lodash";
@@ -19,7 +25,7 @@ export default () => {
     () => <NoteEditor notes={notes} view={main} />,
     [notes]
   );
-  return <div>{noteComponent}</div>;
+  return <Fragment>{noteComponent}</Fragment>;
 };
 const updateNotes = view => {
   if (view) {