diff --git a/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js b/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
index 79b2a117e4a22157962d8638ea3769a1ea2e3f97..ec73efbe7ac65343e555100ec78ace7045bdae83 100644
--- a/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
+++ b/wax-prosemirror-components/src/components/comments/CommentBubbleComponent.js
@@ -2,6 +2,7 @@
 import React, { useLayoutEffect, useContext } from 'react';
 import { Commands, DocumentHelpers } from 'wax-prosemirror-utilities';
 import { WaxContext } from 'wax-prosemirror-core';
+import CommentBubble from '../../ui/comments/CommentBubble';
 
 const CommentBubbleComponent = ({
   setPosition,
@@ -41,13 +42,11 @@ const CommentBubbleComponent = ({
   return (
     !isSelectionComment() &&
     showComment(activeViewId) && (
-      <button
-        onMouseDown={event => {
+      <CommentBubble
+        onClick={event => {
           createComment(event);
         }}
-      >
-        create
-      </button>
+      />
     )
   );
 };
diff --git a/wax-prosemirror-components/src/components/comments/ConnectedComment.js b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
index 77b0645388ff83cb96f3e581fdcb05b7a3247ba5..10a9cc5bb6cc7cb7accae949585980f5dbc3b6fb 100644
--- a/wax-prosemirror-components/src/components/comments/ConnectedComment.js
+++ b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
@@ -9,7 +9,11 @@ import CommentBox from '../../ui/comments/CommentBox';
 
 const ConnectedCommentStyled = styled.div`
   position: absolute;
+  margin-left: ${props => (props.active ? `${-20}px` : `${50}px`)};
   width: 200px;
+  @media (max-width: 600px) {
+    margin-left: 15px;
+  }
 `;
 
 export default ({ comment, top, commentId, recalculateTops }) => {
@@ -114,7 +118,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
   };
 
   return (
-    <ConnectedCommentStyled data-box={commentId} style={styles}>
+    <ConnectedCommentStyled data-box={commentId} style={styles} active={active}>
       <CommentBox
         key={commentId}
         active={active}
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index def51c29a7f9a4a9ca6fd20d5f5f180681982e65..e3e301981682fe0c986e735adce8f4526e2085e6 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -110,13 +110,14 @@ const WaxSurfaceScroll = styled.div`
 const MainMenuContainer = styled.div`
   background: #fff;
   min-height: 52px;
-  /* line-height: 32px; */
+  line-height: 32px;
   position: relative;
   user-select: none;
   border-bottom: 2px solid #ecedf1;
   @media (max-width: 600px) {
     font-size: 10px;
     min-height: 72px;
+    line-height: 32px;
   }
 `;
 const MainMenuInner = styled.div`