diff --git a/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts b/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts
index ae16458d538..51fa42eef9a 100644
--- a/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts
+++ b/packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts
@@ -51,6 +51,7 @@ export type OnOperationAppliedCallback = (data: OnOperationAppliedData) => void;
 export type ModuleModel = {
   changeListener: { dispose: Function };
   selections: any[];
+  currentLine: number;
   path: string;
   model: Promise<any>;
   comments: Array<{ commentId: string; range: [number, number] }>;
@@ -116,6 +117,7 @@ export class ModelsHandler {
     this.moduleModels[fullPath] = this.moduleModels[fullPath] || {
       changeListener: null,
       model: null,
+      currentLine: 0,
       path: fullPath,
       selections: [],
       comments: [],
@@ -125,6 +127,23 @@ export class ModelsHandler {
     return this.moduleModels[fullPath];
   }
 
+  public updateLineCommentIndication(model: any, lineNumber: number) {
+    const moduleModel = this.moduleModels[model.uri.path];
+
+    moduleModel.currentLine = lineNumber;
+
+    const newDecorationComments = this.createCommentDecorations(
+      moduleModel.comments,
+      model,
+      this.currentCommentThreadId,
+      moduleModel.currentLine
+    );
+    moduleModel.currentCommentDecorations = model.deltaDecorations(
+      moduleModel.currentCommentDecorations,
+      newDecorationComments
+    );
+  }
+
   public changeModule = async (module: Module) => {
     const moduleModel = this.getModuleModelByPath(module.path);
 
@@ -144,7 +163,8 @@ export class ModelsHandler {
     const newDecorationComments = this.createCommentDecorations(
       moduleModel.comments,
       model,
-      this.currentCommentThreadId
+      this.currentCommentThreadId,
+      moduleModel.currentLine
     );
     moduleModel.currentCommentDecorations = model.deltaDecorations(
       moduleModel.currentCommentDecorations,
@@ -188,13 +208,16 @@ export class ModelsHandler {
       const newDecorationComments = this.createCommentDecorations(
         commentThreads,
         model,
-        currentCommentThreadId
+        currentCommentThreadId,
+        moduleModel.currentLine
       );
 
       moduleModel.currentCommentDecorations = model.deltaDecorations(
         existingDecorationComments,
         newDecorationComments
       );
+
+      moduleModel.comments = commentThreads;
     });
   }
 
@@ -673,7 +696,8 @@ export class ModelsHandler {
       range: [number, number];
     }>,
     model: any,
-    currentCommentThreadId: string | null
+    currentCommentThreadId: string | null,
+    currentLineNumber: number
   ) {
     const commentDecorationsByLineNumber = commentThreadDecorations.reduce<{
       [lineNumber: string]: Array<{
@@ -695,6 +719,24 @@ export class ModelsHandler {
       return aggr;
     }, {});
 
+    const initialDecorations: any[] =
+      currentLineNumber === -1
+        ? []
+        : [
+            {
+              range: new this.monaco.Range(
+                currentLineNumber,
+                1,
+                currentLineNumber,
+                1
+              ),
+              options: {
+                isWholeLine: true,
+                glyphMarginClassName: `editor-comments-glyph editor-comments-multi editor-comments-add`,
+              },
+            },
+          ];
+
     return Object.keys(commentDecorationsByLineNumber).reduce(
       (aggr, lineNumberKey) => {
         const lineCommentDecorations =
@@ -721,12 +763,10 @@ export class ModelsHandler {
               isWholeLine: true,
               // comment-id- class needs to be the LAST class!
               glyphMarginClassName: `editor-comments-glyph ${
-                activeCommentDecoration ? 'active-comment ' : ''
+                activeCommentDecoration ? 'editor-comments-active ' : ''
               }${
-                ids.length > 1
-                  ? `multi-comment multi-comment-${ids.length} `
-                  : ''
-              }comment-ids-${ids.join('_')}`,
+                ids.length > 1 ? `editor-comments-multi` : ''
+              }editor-comments-ids-${ids.join('_')}`,
             },
           },
           {
@@ -740,7 +780,7 @@ export class ModelsHandler {
           }
         );
       },
-      []
+      initialDecorations
     );
   }
 }
diff --git a/packages/app/src/app/overmind/effects/vscode/icons.css b/packages/app/src/app/overmind/effects/vscode/icons.css
index 2ed741c041f..8343302a49b 100644
--- a/packages/app/src/app/overmind/effects/vscode/icons.css
+++ b/packages/app/src/app/overmind/effects/vscode/icons.css
@@ -18,70 +18,81 @@
   opacity: 1;
 }
 
-.editor-comments-glyph.active-comment.multi-comment:before {
+.editor-comments-glyph.active-comment.editor-comments-multi:before {
   color: #fff;
 }
 
-.multi-comment:before {
+.editor-comments-multi:before {
   content: '...';
   color: #fff;
   position: absolute;
   top: -2px;
-  left: 6px;
+  left: 7px;
   z-index: 10;
   font-size: 8px;
   font-weight: bold;
-  letter-spacing: -2px;
   height: 13px;
   font-family: 'Inter', sans-serif;
 }
-.vs-dark .multi-comment:before {
+
+.vs-dark .editor-comments-multi:before {
   color: #242424;
 }
 
-.multi-comment-2:before {
+.editor-comments-add:before {
+  content: '+';
+  font-size: 10px;
+  font-weight: bold;
+  top: 0;
+  left: 8px;
+}
+
+.editor-comments-multi-2:before {
   content: '2';
   top: 0px;
   left: 9px;
 }
 
-.multi-comment-3:before {
+.editor-comments-multi-3:before {
   content: '3';
   top: 0px;
   left: 9px;
 }
-.multi-comment-4:before {
+.editor-comments-multi-4:before {
   content: '4';
   top: 0px;
   left: 9px;
 }
-.multi-comment-5:before {
+.editor-comments-multi-5:before {
   content: '5';
   top: 0px;
   left: 9px;
 }
-.multi-comment-6:before {
+.editor-comments-multi-6:before {
   content: '6';
   top: 0px;
   left: 9px;
 }
-.multi-comment-7:before {
+.editor-comments-multi-7:before {
   content: '7';
   top: 0px;
   left: 9px;
 }
-.multi-comment-8:before {
+.editor-comments-multi-8:before {
   content: '8';
   top: 0px;
   left: 9px;
 }
-.multi-comment-9:before {
+.editor-comments-multi-9:before {
   content: '9';
   top: 0px;
   left: 9px;
 }
 
-.editor-comments-glyph.active-comment {
+.editor-comments-glyph.editor-comments-active:before {
+  content: '';
+}
+.editor-comments-glyph.editor-comments-active {
   opacity: 1;
   background-image: url('data:image/svg+xml,%3Csvg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 5C0 7.76142 2.23858 10 5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5Z" fill="%230971F1"/%3E%3Cpath d="M5 5H0V10H5V5Z" fill="%230971F1"/%3E%3C/svg%3E%0A');
 }
diff --git a/packages/app/src/app/overmind/effects/vscode/index.ts b/packages/app/src/app/overmind/effects/vscode/index.ts
index 2ee83fc54dd..c52d27fcb74 100644
--- a/packages/app/src/app/overmind/effects/vscode/index.ts
+++ b/packages/app/src/app/overmind/effects/vscode/index.ts
@@ -119,6 +119,7 @@ export class VSCodeEffect {
   private linter: Linter | null;
   private modelsHandler: ModelsHandler;
   private modelSelectionListener: { dispose: Function };
+  private modelCursorPositionListener: { dispose: Function };
   private modelViewRangeListener: { dispose: Function };
   private readOnly: boolean;
   private elements = {
@@ -232,9 +233,14 @@ export class VSCodeEffect {
         }
 
         setTimeout(() => {
-          const el = document.querySelector('.active-comment');
+          const commentGlyphs = document.querySelectorAll(
+            '.editor-comments-glyph'
+          );
+          const el = Array.from(commentGlyphs).find(glyphEl =>
+            glyphEl.className.includes(commentId)
+          );
 
-          if (el && el.className.includes(commentId)) {
+          if (el) {
             resolve(el.getBoundingClientRect());
           } else {
             findActiveComment();
@@ -1026,6 +1032,10 @@ export class VSCodeEffect {
       this.modelSelectionListener.dispose();
     }
 
+    if (this.modelCursorPositionListener) {
+      this.modelCursorPositionListener.dispose();
+    }
+
     if (this.modelViewRangeListener) {
       this.modelViewRangeListener.dispose();
     }
@@ -1091,9 +1101,21 @@ export class VSCodeEffect {
         }
       });
 
+      this.modelCursorPositionListener = activeEditor.onDidChangeCursorPosition(
+        cursor => {
+          const model = activeEditor.getModel();
+
+          this.modelsHandler.updateLineCommentIndication(
+            model,
+            cursor.position.lineNumber
+          );
+        }
+      );
+
       this.modelSelectionListener = activeEditor.onDidChangeCursorSelection(
         selectionChange => {
-          const lines = activeEditor.getModel().getLinesContent() || [];
+          const model = activeEditor.getModel();
+          const lines = model.getLinesContent() || [];
           const data: onSelectionChangeData = {
             primary: getSelection(lines, selectionChange.selection),
             secondary: selectionChange.secondarySelections.map(s =>
@@ -1211,11 +1233,13 @@ export class VSCodeEffect {
           We grab the id of the commenthread by getting the last classname.
           The last part of the classname is the id.
         */
-        const commentIds = Array.from(target.classList)
-          .pop()
-          .split('comment-ids-')
-          .pop()
-          .split('_');
+        const lastClass = Array.from(target.classList).pop();
+        const commentIds = lastClass.startsWith('editor-comments-ids-')
+          ? lastClass
+              .split('editor-comments-ids-')
+              .pop()
+              .split('_')
+          : [];
         const boundingRect = target.getBoundingClientRect();
         this.options.onCommentClick({
           commentIds,
diff --git a/packages/app/src/app/overmind/namespaces/comments/actions.ts b/packages/app/src/app/overmind/namespaces/comments/actions.ts
index 19fb754ac17..2c6e63eb5c6 100644
--- a/packages/app/src/app/overmind/namespaces/comments/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/comments/actions.ts
@@ -81,7 +81,14 @@ export const onCommentClick: Action<{
     bottom: number;
   };
 }> = ({ state, actions }, { commentIds, bounds }) => {
-  if (commentIds.length === 1) {
+  if (commentIds.includes(state.comments.currentCommentId)) {
+    actions.comments.closeComment();
+    return;
+  }
+
+  if (!commentIds.length) {
+    actions.comments.createComment();
+  } else if (commentIds.length === 1) {
     actions.comments.selectComment({
       commentId: commentIds[0],
       bounds,
@@ -139,17 +146,15 @@ export const selectComment: AsyncAction<{
         path: comment.references[0].metadata.path,
       });
 
-      state.comments.currentCommentId = commentId;
-
       // update comment position with precise info
       const referenceBounds = await effects.vscode.getCodeReferenceBoundary(
         commentId,
         comment.references[0]
       );
-      const existingDialogBounds =
-        state.comments.currentCommentPositions?.dialog;
+
+      state.comments.currentCommentId = commentId;
       state.comments.currentCommentPositions = {
-        trigger: existingDialogBounds || bounds,
+        trigger: bounds,
         dialog: {
           left: referenceBounds.left,
           top: referenceBounds.top,
@@ -179,12 +184,15 @@ export const createComment: AsyncAction = async ({ state, effects }) => {
   const selection = state.live.currentSelection;
   if (selection) {
     codeReference = {
-      anchor: selection.primary.selection[0],
-      head: selection.primary.selection[1],
-      code: state.editor.currentModule.code.substr(
-        selection.primary.selection[0],
-        selection.primary.selection[1] - selection.primary.selection[0]
-      ),
+      anchor:
+        selection.primary.selection[0] || selection.primary.cursorPosition,
+      head: selection.primary.selection[1] || selection.primary.cursorPosition,
+      code: selection.primary.selection.length
+        ? state.editor.currentModule.code.substr(
+            selection.primary.selection[0],
+            selection.primary.selection[1] - selection.primary.selection[0]
+          )
+        : '',
       path: state.editor.currentModule.path,
     };
   }
@@ -217,19 +225,29 @@ export const createComment: AsyncAction = async ({ state, effects }) => {
   const comments = state.comments.comments;
 
   comments[sandboxId][id] = optimisticComment;
-  state.comments.currentCommentId = id;
   // placeholder value until we know the correct values
-  const referenceBounds = await effects.vscode.getCodeReferenceBoundary(
+  const {
+    left,
+    right,
+    top,
+    bottom,
+  } = await effects.vscode.getCodeReferenceBoundary(
     id,
     optimisticComment.references[0]
   );
+  state.comments.currentCommentId = id;
   state.comments.currentCommentPositions = {
-    trigger: referenceBounds,
+    trigger: {
+      left,
+      top,
+      bottom,
+      right,
+    },
     dialog: {
-      left: referenceBounds.left,
-      top: referenceBounds.top,
-      bottom: referenceBounds.bottom,
-      right: referenceBounds.right,
+      left,
+      top,
+      bottom,
+      right,
     },
   };
 };
@@ -245,48 +263,30 @@ export const addComment: AsyncAction<{
   const id = OPTIMISTIC_COMMENT_ID;
   const sandboxId = state.editor.currentSandbox.id;
   const now = new Date().toString();
-  let codeReference: CodeReference = null;
-  const selection = state.live.currentSelection;
-  if (selection && selection.primary.selection.length) {
-    codeReference = {
-      anchor: selection.primary.selection[0],
-      head: selection.primary.selection[1],
-      code: state.editor.currentModule.code.substr(
-        selection.primary.selection[0],
-        selection.primary.selection[1] - selection.primary.selection[0]
-      ),
-      path: state.editor.currentModule.path,
-    };
-  }
-
-  const optimisticComment: CommentFragment = {
-    parentComment: parentCommentId ? { id: parentCommentId } : null,
-    id,
-    insertedAt: now,
-    updatedAt: now,
-    content,
-    isResolved: false,
-    user: {
-      id: state.user.id,
-      name: state.user.name,
-      username: state.user.username,
-      avatarUrl: state.user.avatarUrl,
-    },
-    references: codeReference
-      ? [
-          {
-            id: '__OPTIMISTIC__',
-            type: 'code',
-            metadata: codeReference,
-            resource: state.editor.currentModule.path,
-          },
-        ]
-      : [],
-    comments: [],
-  };
   const comments = state.comments.comments;
 
-  comments[sandboxId][id] = optimisticComment;
+  let optimisticComment: CommentFragment;
+  if (state.comments.comments[sandboxId][id]) {
+    optimisticComment = state.comments.comments[sandboxId][id];
+  } else {
+    optimisticComment = {
+      parentComment: parentCommentId ? { id: parentCommentId } : null,
+      id,
+      insertedAt: now,
+      updatedAt: now,
+      content,
+      isResolved: false,
+      user: {
+        id: state.user.id,
+        name: state.user.name,
+        username: state.user.username,
+        avatarUrl: state.user.avatarUrl,
+      },
+      references: [],
+      comments: [],
+    };
+    comments[sandboxId][id] = optimisticComment;
+  }
 
   if (optimisticComment.parentComment) {
     comments[sandboxId][optimisticComment.parentComment.id].comments.push({
@@ -297,11 +297,11 @@ export const addComment: AsyncAction<{
 
   try {
     let comment: CommentFragment;
-    if (codeReference) {
+    if (optimisticComment.references.length) {
       const response = await effects.gql.mutations.createCodeComment({
         sandboxId,
         content,
-        codeReference,
+        codeReference: optimisticComment.references[0].metadata,
       });
       comment = response.createCodeComment;
     } else {
diff --git a/packages/app/src/app/overmind/namespaces/comments/state.ts b/packages/app/src/app/overmind/namespaces/comments/state.ts
index e9c452d99c7..4ed9f3a32f4 100644
--- a/packages/app/src/app/overmind/namespaces/comments/state.ts
+++ b/packages/app/src/app/overmind/namespaces/comments/state.ts
@@ -3,7 +3,7 @@ import { CommentFragment, CommentWithRepliesFragment } from 'app/graphql/types';
 import isToday from 'date-fns/isToday';
 import { Derive } from 'app/overmind';
 
-export const OPTIMISTIC_COMMENT_ID = '__OPTIMISTIC_COMMENT_ID__';
+export const OPTIMISTIC_COMMENT_ID = 'OptimisticCommentId';
 
 type State = {
   comments: {
@@ -47,8 +47,15 @@ export const state: State = {
   currentCommentPositions: null,
   comments: {},
   currentCommentId: null,
-  fileComments: ({ currentComments }) =>
-    currentComments.reduce<{
+  fileComments: ({ comments }, { editor: { currentSandbox } }) => {
+    if (!currentSandbox || !comments[currentSandbox.id]) {
+      return {};
+    }
+    const rootComments = Object.values(comments[currentSandbox.id]).filter(
+      comment => comment.parentComment == null
+    );
+
+    return rootComments.reduce<{
       [path: string]: Array<{
         commentId: string;
         range: [number, number];
@@ -67,7 +74,8 @@ export const state: State = {
       });
 
       return aggr;
-    }, {}),
+    }, {});
+  },
   currentComment: (
     { comments, currentCommentId },
     { editor: { currentSandbox } }
@@ -111,7 +119,8 @@ export const state: State = {
     }
 
     const rootComments = Object.values(comments[currentSandbox.id]).filter(
-      comment => comment.parentComment == null
+      comment =>
+        comment.parentComment == null && comment.id !== OPTIMISTIC_COMMENT_ID
     );
 
     switch (selectedCommentsFilter) {
diff --git a/packages/app/src/app/overmind/namespaces/live/state.ts b/packages/app/src/app/overmind/namespaces/live/state.ts
index 2c5ce2bf670..44751af9322 100755
--- a/packages/app/src/app/overmind/namespaces/live/state.ts
+++ b/packages/app/src/app/overmind/namespaces/live/state.ts
@@ -44,7 +44,14 @@ export const state: State = {
   error: null,
   liveUserId: null,
   roomInfo: null,
-  currentSelection: null,
+  currentSelection: {
+    primary: {
+      cursorPosition: 0,
+      selection: [],
+    },
+    secondary: [],
+    source: 'overmind',
+  },
   currentViewRange: null,
   joinSource: 'sandbox',
   liveUser: currentState =>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
index a7cfc2f3067..ba33113f58c 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx
@@ -46,15 +46,16 @@ export const Comment = React.memo<{
       })}
       id={comment.id}
       onClick={event => {
-        const target = event.currentTarget as HTMLElement;
         // don't trigger comment if you click on the menu
         // we have to handle this because of an upstream
         // bug in reach/menu-button
+        const target = event.target as HTMLElement;
         if (target.tagName === 'button' || target.tagName === 'svg') {
           return;
         }
 
-        const boundingRect = target.getBoundingClientRect();
+        const currentTarget = event.currentTarget as HTMLElement;
+        const boundingRect = currentTarget.getBoundingClientRect();
         actions.comments.selectComment({
           commentId: comment.id,
           bounds: {
@@ -94,7 +95,7 @@ export const Comment = React.memo<{
                   })
                 }
               >
-                Mark as {comment.isResolved ? 'Unr' : 'r'}esolved
+                Mark as {comment.isResolved ? 'unresolved' : 'resolved'}
               </Menu.Item>
               <Menu.Item
                 onSelect={() =>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
index c00f3889192..915a97037e4 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Reply.tsx
@@ -46,7 +46,6 @@ export const Reply = ({ reply }: ReplyProps) => {
         </Stack>
       </Element>
       <Element
-        as={editing ? 'div' : 'p'}
         marginY={0}
         marginX={4}
         paddingBottom={6}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
index 5d9bbb26086..caa5af7b3e0 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
@@ -1,17 +1,17 @@
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
 import {
+  Avatar,
   Element,
   IconButton,
   Menu,
   Stack,
-  Avatar,
   Text,
   Textarea,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
 import { OPTIMISTIC_COMMENT_ID } from 'app/overmind/namespaces/comments/state';
-import { motion } from 'framer-motion';
+import { motion, useAnimation } from 'framer-motion';
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
@@ -24,61 +24,70 @@ import { useScrollTop } from './use-scroll-top';
 export const CommentDialog = props =>
   ReactDOM.createPortal(<Dialog {...props} />, document.body);
 
+const DIALOG_WIDTH = 420;
+
 export const Dialog: React.FC = () => {
-  const { state, actions } = useOvermind();
-  const [value, setValue] = useState('');
+  const { state } = useOvermind();
+  const controller = useAnimation();
+
   const comment = state.comments.currentComment;
-  const currentCommentPositions = state.comments.currentCommentPositions;
+
+  // This comment doens't exist in the database, it's an optimistic comment
   const isNewComment = comment.id === OPTIMISTIC_COMMENT_ID;
+
   const [editing, setEditing] = useState(isNewComment);
   const { ref: listRef, scrollTop } = useScrollTop();
+  const dialogRef = React.useRef();
 
-  const closeDialog = () => actions.comments.closeComment();
-  const onSubmitReply = () => {
-    setValue('');
-    actions.comments.addComment({
-      content: value,
-      parentCommentId: comment.id,
-    });
-  };
+  const currentCommentPositions = state.comments.currentCommentPositions;
+  const isCodeComment =
+    comment.references[0] && comment.references[0].type === 'code';
 
-  const onSubmitNewComment = async () => {
-    await actions.comments.updateComment({
-      commentId: comment.id,
-      content: value,
-    });
-    setValue('');
-    setEditing(false);
-  };
+  // this could rather be `getInitialPosition`
+  const positions = getPositions(
+    currentCommentPositions,
+    isCodeComment,
+    dialogRef
+  );
 
   // reset editing when comment changes
   React.useEffect(() => {
     setEditing(isNewComment);
-  }, [comment.id, isNewComment]);
+    // this could rather be `getAnimatedPosition`
+    const updatedPositions = getPositions(
+      currentCommentPositions,
+      isCodeComment,
+      dialogRef
+    );
+    controller.start({
+      ...updatedPositions.dialogPosition,
+      scale: 1,
+      opacity: 1,
+    });
+  }, [
+    comment.id,
+    controller,
+    currentCommentPositions,
+    isCodeComment,
+    isNewComment,
+  ]);
 
   if (!currentCommentPositions) {
     return null;
   }
 
-  const isCodeComment =
-    comment.references[0] && comment.references[0].type === 'code';
-
-  const { animateFrom, dialogPosition } = getPositions(
-    currentCommentPositions,
-    isCodeComment
-  );
-
   return (
     <motion.div
       key={isCodeComment ? 'code' : 'global'}
-      initial={{ ...animateFrom, scale: 0.5, opacity: 0 }}
-      animate={{ ...dialogPosition, scale: 1, opacity: 1 }}
+      initial={{ ...positions.animateFrom, scale: 0.5, opacity: 0 }}
+      animate={controller}
       drag
       dragMomentum={false}
       transition={{ duration: 0.25 }}
       style={{ position: 'absolute', zIndex: 2 }}
     >
       <Stack
+        ref={dialogRef}
         direction="vertical"
         css={css({
           position: 'absolute',
@@ -88,7 +97,7 @@ export const Dialog: React.FC = () => {
           border: '1px solid',
           borderColor: 'dialog.border',
           borderRadius: 4,
-          width: 420,
+          width: DIALOG_WIDTH,
           height: 'auto',
           maxHeight: '80vh',
           fontFamily: 'Inter, sans-serif',
@@ -97,179 +106,23 @@ export const Dialog: React.FC = () => {
         })}
       >
         {isNewComment && editing ? (
-          <Stack direction="vertical" gap={4}>
-            <Stack
-              justify="space-between"
-              align="center"
-              marginY={4}
-              marginLeft={4}
-              marginRight={2}
-            >
-              <Stack gap={2} align="center">
-                <Avatar user={comment.user} />
-                <Text size={3} weight="bold" variant="body">
-                  {comment.user.username}
-                </Text>
-              </Stack>
-              <IconButton
-                name="cross"
-                size={10}
-                title="Close comment dialog"
-                onClick={closeDialog}
-              />
-            </Stack>
-            <Textarea
-              autosize
-              css={css({
-                overflow: 'hidden',
-                border: 'none',
-                display: 'block',
-                borderTop: '1px solid',
-                borderColor: 'sideBar.border',
-              })}
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              placeholder="Add comment..."
-              onKeyDown={async event => {
-                if (event.keyCode === ENTER && !event.shiftKey) {
-                  onSubmitNewComment();
-                  event.preventDefault();
-                }
-              }}
-            />
-          </Stack>
+          <AddComment comment={comment} onSave={() => setEditing(false)} />
         ) : (
           <>
-            <Stack
-              align="center"
-              justify="space-between"
-              padding={4}
-              paddingRight={2}
-              marginBottom={2}
-              css={css({
-                cursor: 'move',
-                zIndex: 2,
-                boxShadow: theme =>
-                  scrollTop > 0
-                    ? `0px 32px 32px ${theme.colors.dialog.background}`
-                    : 'none',
-              })}
-            >
-              <Text size={3} weight="bold">
-                Comment
-              </Text>
-              <Stack align="center">
-                <IconButton
-                  onClick={() =>
-                    actions.comments.resolveComment({
-                      commentId: comment.id,
-                      isResolved: !comment.isResolved,
-                    })
-                  }
-                  name="check"
-                  size={14}
-                  title="Resolve Comment"
-                  css={css({
-                    transition: 'color',
-                    transitionDuration: theme => theme.speeds[1],
-                    color: comment.isResolved ? 'green' : 'mutedForeground',
-                  })}
-                />
-                <IconButton
-                  name="cross"
-                  size={10}
-                  title="Close comment dialog"
-                  onClick={closeDialog}
-                />
-              </Stack>
-            </Stack>
+            <DialogHeader comment={comment} hasShadow={scrollTop > 0} />
             <Stack
               direction="vertical"
               css={{ overflow: 'auto' }}
               ref={listRef}
             >
-              <Stack direction="vertical" gap={4}>
-                <Stack
-                  align="flex-start"
-                  justify="space-between"
-                  marginLeft={4}
-                  marginRight={2}
-                >
-                  <AvatarBlock comment={comment} />
-                  {state.user.id === comment.user.id && !isNewComment && (
-                    <Stack align="center">
-                      <Menu>
-                        <Menu.IconButton
-                          name="more"
-                          title="Comment actions"
-                          size={12}
-                        />
-                        <Menu.List>
-                          <Menu.Item
-                            onSelect={() =>
-                              actions.comments.deleteComment({
-                                commentId: comment.id,
-                              })
-                            }
-                          >
-                            Delete
-                          </Menu.Item>
-                          <Menu.Item onSelect={() => setEditing(true)}>
-                            Edit Comment
-                          </Menu.Item>
-                        </Menu.List>
-                      </Menu>
-                    </Stack>
-                  )}
-                </Stack>
-                <Element
-                  marginY={0}
-                  marginX={4}
-                  paddingBottom={6}
-                  css={css({
-                    borderBottom: '1px solid',
-                    borderColor: 'sideBar.border',
-                  })}
-                >
-                  {!editing ? (
-                    <Markdown source={comment.content} />
-                  ) : (
-                    <EditComment
-                      initialValue={comment.content}
-                      onSave={async newValue => {
-                        await actions.comments.updateComment({
-                          commentId: comment.id,
-                          content: newValue,
-                        });
-                        setEditing(false);
-                      }}
-                      onCancel={() => setEditing(false)}
-                    />
-                  )}
-                </Element>
-              </Stack>
-              <>
-                {comment.comments.map(reply =>
-                  reply ? <Reply reply={reply} key={reply.id} /> : 'Loading...'
-                )}
-              </>
+              <CommentBody
+                comment={comment}
+                editing={editing}
+                setEditing={setEditing}
+              />
+              <Replies replies={comment.comments} />
             </Stack>
-            <Textarea
-              autosize
-              css={css({
-                overflow: 'hidden',
-                border: 'none',
-                display: 'block',
-                borderTop: '1px solid',
-                borderColor: 'sideBar.border',
-              })}
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              placeholder="Reply..."
-              onKeyDown={event => {
-                if (event.keyCode === ENTER && !event.shiftKey) onSubmitReply();
-              }}
-            />
+            <AddReply comment={comment} />
           </>
         )}
       </Stack>
@@ -277,7 +130,222 @@ export const Dialog: React.FC = () => {
   );
 };
 
-const getPositions = (currentCommentPositions, isCodeComment) => {
+const AddComment = ({ comment, onSave }) => {
+  const { actions } = useOvermind();
+  const [value, setValue] = useState('');
+
+  const saveComment = async () => {
+    await actions.comments.updateComment({
+      commentId: comment.id,
+      content: value,
+    });
+    setValue('');
+    onSave();
+  };
+
+  const closeDialog = () => actions.comments.closeComment();
+
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack
+        justify="space-between"
+        align="center"
+        marginY={4}
+        marginLeft={4}
+        marginRight={2}
+      >
+        <Stack gap={2} align="center">
+          <Avatar user={comment.user} />
+          <Text size={3} weight="bold" variant="body">
+            {comment.user.username}
+          </Text>
+        </Stack>
+        <IconButton
+          name="cross"
+          size={10}
+          title="Close comment dialog"
+          onClick={closeDialog}
+        />
+      </Stack>
+      <Textarea
+        autosize
+        css={css({
+          overflow: 'hidden',
+          border: 'none',
+          display: 'block',
+          borderTop: '1px solid',
+          borderColor: 'sideBar.border',
+        })}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        placeholder="Add comment..."
+        onKeyDown={async event => {
+          if (event.keyCode === ENTER && !event.shiftKey) {
+            saveComment();
+            event.preventDefault();
+          }
+        }}
+      />
+    </Stack>
+  );
+};
+
+const DialogHeader = ({ comment, hasShadow }) => {
+  const { actions } = useOvermind();
+
+  const closeDialog = () => actions.comments.closeComment();
+
+  return (
+    <Stack
+      align="center"
+      justify="space-between"
+      padding={4}
+      paddingRight={2}
+      marginBottom={2}
+      css={css({
+        cursor: 'move',
+        zIndex: 2,
+        boxShadow: theme =>
+          hasShadow
+            ? `0px 32px 32px ${theme.colors.dialog.background}`
+            : 'none',
+      })}
+    >
+      <Text size={3} weight="bold">
+        Comment
+      </Text>
+      <Stack align="center">
+        <IconButton
+          onClick={() =>
+            actions.comments.resolveComment({
+              commentId: comment.id,
+              isResolved: !comment.isResolved,
+            })
+          }
+          name="check"
+          size={14}
+          title="Resolve Comment"
+          css={css({
+            transition: 'color',
+            transitionDuration: theme => theme.speeds[1],
+            color: comment.isResolved ? 'green' : 'mutedForeground',
+          })}
+        />
+        <IconButton
+          name="cross"
+          size={10}
+          title="Close comment dialog"
+          onClick={closeDialog}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+const CommentBody = ({ comment, editing, setEditing }) => {
+  const { state, actions } = useOvermind();
+
+  return (
+    <Stack direction="vertical" gap={4}>
+      <Stack
+        align="flex-start"
+        justify="space-between"
+        marginLeft={4}
+        marginRight={2}
+      >
+        <AvatarBlock comment={comment} />
+        {state.user.id === comment.user.id && (
+          <Stack align="center">
+            <Menu>
+              <Menu.IconButton name="more" title="Comment actions" size={12} />
+              <Menu.List>
+                <Menu.Item
+                  onSelect={() =>
+                    actions.comments.deleteComment({
+                      commentId: comment.id,
+                    })
+                  }
+                >
+                  Delete
+                </Menu.Item>
+                <Menu.Item onSelect={() => setEditing(true)}>
+                  Edit Comment
+                </Menu.Item>
+              </Menu.List>
+            </Menu>
+          </Stack>
+        )}
+      </Stack>
+      <Element
+        marginY={0}
+        marginX={4}
+        paddingBottom={6}
+        css={css({
+          borderBottom: '1px solid',
+          borderColor: 'sideBar.border',
+        })}
+      >
+        {!editing ? (
+          <Markdown source={comment.content} />
+        ) : (
+          <EditComment
+            initialValue={comment.content}
+            onSave={async newValue => {
+              await actions.comments.updateComment({
+                commentId: comment.id,
+                content: newValue,
+              });
+              setEditing(false);
+            }}
+            onCancel={() => setEditing(false)}
+          />
+        )}
+      </Element>
+    </Stack>
+  );
+};
+
+const Replies = ({ replies }) => (
+  <>
+    {replies.map(reply =>
+      reply ? <Reply reply={reply} key={reply.id} /> : 'Loading...'
+    )}
+  </>
+);
+
+const AddReply = ({ comment }) => {
+  const { actions } = useOvermind();
+  const [value, setValue] = useState('');
+
+  const onSubmit = () => {
+    setValue('');
+    actions.comments.addComment({
+      content: value,
+      parentCommentId: comment.id,
+    });
+  };
+
+  return (
+    <Textarea
+      autosize
+      css={css({
+        overflow: 'hidden',
+        border: 'none',
+        display: 'block',
+        borderTop: '1px solid',
+        borderColor: 'sideBar.border',
+      })}
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      placeholder="Reply..."
+      onKeyDown={event => {
+        if (event.keyCode === ENTER && !event.shiftKey) onSubmit();
+      }}
+    />
+  );
+};
+
+const getPositions = (currentCommentPositions, isCodeComment, dialogRef) => {
   const OVERLAP_WITH_SIDEBAR = -20;
   const OFFSET_TOP_FOR_ALIGNMENT = -90;
   const OFFSET_FOR_CODE = 500;
@@ -332,6 +400,46 @@ const getPositions = (currentCommentPositions, isCodeComment) => {
   }
 
   // check for window colisions here and offset positions more
+  let finalHeight;
+
+  if (dialogRef.current) {
+    /** Even when we have the rect, we don't always know
+     * if it's in it's final height while it's animating
+     *
+     * We do know that it animates from 0.5 to 1, so those are the
+     * 2 values we might get, based on that we can double the initial
+     * height to get final height
+     *
+     */
+
+    const dialogRect = dialogRef.current.getBoundingClientRect();
+
+    const animatingElement = dialogRef.current.parentElement;
+    const scale = animatingElement.style.transform;
+
+    finalHeight = scale.includes('scale(0.5')
+      ? dialogRect.height * 2
+      : dialogRect.height;
+  } else {
+    /** Until the ref is set, we don't know enough,
+     * so we're guessing on the safe side
+     */
+    finalHeight = 420;
+  }
+
+  /** The parent of this dialog is starts at 48px
+   * This will change when we move the comment out!
+   */
+  const PARENT_Y_OFFSET = 48;
+
+  const BUFFER_FROM_EDGE = 32;
+
+  const maxLeft = window.innerWidth - DIALOG_WIDTH - BUFFER_FROM_EDGE;
+  const maxTop =
+    window.innerHeight - finalHeight - BUFFER_FROM_EDGE - PARENT_Y_OFFSET;
+
+  if (dialogPosition.x > maxLeft) dialogPosition.x = maxLeft;
+  if (dialogPosition.y > maxTop) dialogPosition.y = maxTop;
 
   return { animateFrom, dialogPosition };
 };
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
index 27742126036..109b22f0e87 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx
@@ -9,7 +9,6 @@ import {
 } from '@codesandbox/components';
 import { css } from '@styled-system/css';
 import { useOvermind } from 'app/overmind';
-import { OPTIMISTIC_COMMENT_ID } from 'app/overmind/namespaces/comments/state';
 import React from 'react';
 
 import { AddComment } from './AddComment';
@@ -118,11 +117,9 @@ export const Comments: React.FC = () => {
                 <Text size={3} weight="bold" block margin={2}>
                   Today
                 </Text>
-                {currentCommentsByDate.today.map(comment =>
-                  comment.id === OPTIMISTIC_COMMENT_ID ? null : (
-                    <Comment key={comment.id} comment={comment} />
-                  )
-                )}
+                {currentCommentsByDate.today.map(comment => (
+                  <Comment key={comment.id} comment={comment} />
+                ))}
               </>
             ) : null}
             {currentCommentsByDate.prev.length ? (
@@ -130,11 +127,9 @@ export const Comments: React.FC = () => {
                 <Text size={3} weight="bold" block margin={2} marginTop={4}>
                   Earlier
                 </Text>
-                {currentCommentsByDate.prev.map(comment =>
-                  comment.id === OPTIMISTIC_COMMENT_ID ? null : (
-                    <Comment key={comment.id} comment={comment} />
-                  )
-                )}
+                {currentCommentsByDate.prev.map(comment => (
+                  <Comment key={comment.id} comment={comment} />
+                ))}
               </>
             ) : null}
           </List>
diff --git a/packages/components/src/components/ThemeProvider/index.tsx b/packages/components/src/components/ThemeProvider/index.tsx
index fa337441695..4dc24a849ec 100644
--- a/packages/components/src/components/ThemeProvider/index.tsx
+++ b/packages/components/src/components/ThemeProvider/index.tsx
@@ -56,7 +56,8 @@ export const ThemeProvider = ({ theme, children }) => {
     }
 
     .editor-comments-highlight {
-      background-color: ${usableTheme.colors.editor.rangeHighlightBackground};
+      background-color: ${usableTheme.colors.button.background};
+      opacity: 0.2
     }
 
   `;