diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index c06b17c1da39976f00ae28db51471035178e103b..2ad25dee439832b7e8f94d28d14f468a42c464b3 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -51,6 +51,7 @@ const Editoria = () => (
       value="<p> <span style='font-style:italic;'>test</span>hello <code> this is the code</code></p>"
       layout={EditoriaLayout}
       user={user}
+      debug
     />
     <div id="editors"></div>
   </Fragment>
diff --git a/wax-prosemirror-core/src/config/defaultConfig.js b/wax-prosemirror-core/src/config/defaultConfig.js
index f2f7f6324afbe6b197041b62b4031b3b009e9a8d..bc8aa6b471eab9a078ec4f58318ddb58393393ec 100644
--- a/wax-prosemirror-core/src/config/defaultConfig.js
+++ b/wax-prosemirror-core/src/config/defaultConfig.js
@@ -5,7 +5,6 @@ import {
   RulesService,
   ShortCutsService,
   /*TODO MOVE FROM DEFAULT CONFIG*/
-  AnnotationToolGroupService,
   ImageService,
   PlaceholderService,
   TextStyleService,
@@ -28,7 +27,6 @@ export default {
     new ShortCutsService(),
     new LayoutService(),
     new MenuService(),
-    new AnnotationToolGroupService(),
     new ListToolGroupService(),
     new TextStyleService(),
     new PlaceholderService(),
diff --git a/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js b/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js
index 5dcca89a453a1f263e54044407c58f0c4721a3d3..f242dab50c25b4cdc0d11c8429e23f7c9919bd34 100644
--- a/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js
+++ b/wax-prosemirror-core/src/services/LayoutService/components/componentPlugin.js
@@ -19,13 +19,13 @@ class UpdateView extends Component {
 }
 
 const ComponentPlugin = renderArea => props => {
-  const { view, instance } = useInjection("Layout");
+  const { instance } = useInjection("Layout");
 
   const components = instance.render(renderArea);
 
   return components
     ? components.map((Component, key) => {
-        return <Component {...view} key={`${renderArea}-${key}`} />;
+        return <Component key={`${renderArea}-${key}`} />;
       })
     : null;
 };
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index 2ebe0d3d4eecfaabf816cffc6333945592cdf4fe..f4ef0a434b5cef40d537b19f1878f318d7a1944e 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -105,7 +105,7 @@ const EditoriaLayout = ({ editor }) => {
               <LeftSideBar />
             </SideMenuInner>
           </SideMenuContainer>
-          <WaxSurfaceScroll className="wax-surface-scroll">
+          <WaxSurfaceScroll className="wax-surface-scroll test">
             {editor}
             <WaxOverlays />
           </WaxSurfaceScroll>
diff --git a/wax-prosemirror-services/src/LinkService/LinkComponent.js b/wax-prosemirror-services/src/LinkService/LinkComponent.js
index 30dc630e6a0e56dfbdf80d34a52178155ff13f4b..1c5e4e2ddcea3cf8f8d58f79bedc72bb0a046c73 100644
--- a/wax-prosemirror-services/src/LinkService/LinkComponent.js
+++ b/wax-prosemirror-services/src/LinkService/LinkComponent.js
@@ -10,7 +10,6 @@ class LinkComponent extends PureComponent {
   // }
 
   render() {
-    console.log("paoooooooooo", this.props);
     return (
       <div>
         <input
diff --git a/wax-prosemirror-services/src/MenuService/Menu.js b/wax-prosemirror-services/src/MenuService/Menu.js
index 6e09bfb33611b3e82175482e35d8f36cdcccd022..cd05020c8b7b861e99980e00e7a308cc21a3bd6b 100644
--- a/wax-prosemirror-services/src/MenuService/Menu.js
+++ b/wax-prosemirror-services/src/MenuService/Menu.js
@@ -1,8 +1,9 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useContext } from "react";
 import { injectable } from "inversify";
 import ToolGroup from "../lib/ToolGroup";
 
 import MenuWrapper from "./MenuWrapper";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
 
 @injectable()
 export default class Menu {
@@ -25,11 +26,10 @@ export default class Menu {
   }
 
   render() {
-    return view => {
-      //if (!view) return null;
-
+    return () => {
+      const { view } = useContext(WaxContext);
       const Bar = useMemo(
-        () => <MenuWrapper items={this.toolGroups} view={view} />,
+        () => <MenuWrapper items={this.toolGroups} view={view || {}} />,
         [view]
       );
       return <>{Bar}</>;
diff --git a/wax-prosemirror-services/src/OverlayService/OverlayComponent.js b/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
index 65c06d28c224426d0b0895426cca46f6ef800563..0f77e0215887065a60112ea2b42cae53f2b1fbdb 100644
--- a/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
+++ b/wax-prosemirror-services/src/OverlayService/OverlayComponent.js
@@ -1,17 +1,64 @@
-import React from "react";
+import React, { useState, useContext, useEffect, useCallback } from "react";
 import { markActive } from "../lib/Utils";
+import { WaxContext } from "wax-prosemirror-core/src/ioc-react";
+
+const usePosition = view => {
+  const [position, setPosition] = useState({
+    position: "absolute",
+    left: null,
+    top: null,
+    from: null,
+    to: null
+  });
+
+  const updatePosition = useCallback(view => {
+    let left = position.left;
+    let top = position.top;
+    if (!view) return { left, top };
+    view = view.view;
+    const { from: currentFrom, to: currentTo } = view.state.selection;
+
+    if (
+      currentFrom < position.from ||
+      position.to > currentTo ||
+      !position.from ||
+      !position.to
+    ) {
+      const start = view.coordsAtPos(currentFrom);
+
+      const box = view.dom.offsetParent.getBoundingClientRect();
+
+      left = start.left - box.left + "px";
+      top = start.top - box.top + 20 + "px";
+    }
+
+    console.log(left, top);
+    return { left, top, from: currentFrom, to: currentTo };
+  });
+
+  useEffect(() => {
+    setPosition({ position: "absolute", ...updatePosition(view) });
+  }, [JSON.stringify(updatePosition(view))]);
+
+  return [position, setPosition];
+};
+
+export default Component => () => {
+  let { view } = useContext(WaxContext);
+
+  const [position, setPosition] = usePosition(view);
+
+  console.log(position);
 
-export default Component => ({ view }) => {
   if (!view) return null;
 
-  if (!markActive(view.state.schema.marks.link)(view.state)) {
-    return null;
-  }
+  const mark = markActive(view.view.state.schema.marks.link)(view.view.state);
+
+  const visible = mark ? true : false;
 
-  return (
-    <div style={{ position: "relative", width: "100px", height: "100px" }}>
-      Overlay Area
-      <Component />
+  return visible ? (
+    <div style={position}>
+      <Component setPosition={setPosition} />
     </div>
-  );
+  ) : null;
 };