diff --git a/build/webpack.selenium.config.js b/build/webpack.selenium.config.js
index aa126ad13..fe7488fe7 100644
--- a/build/webpack.selenium.config.js
+++ b/build/webpack.selenium.config.js
@@ -3,6 +3,8 @@ require('babel-polyfill');
 const path = require('path');
 const commonConfig = require('./webpack.common.config');
 
+const language = process.env.LANGUAGE;
+const locale = language.substr(0, language.indexOf('-'));
 /* eslint-disable key-spacing, require-jsdoc */
 const config = Object.assign(commonConfig(), {
     entry: {
@@ -11,6 +13,16 @@ const config = Object.assign(commonConfig(), {
     output: {
         path: path.resolve('functional-tests/lib'),
         filename: '[Name].js'
+    },
+    resolve: {
+        modules: ['src', 'node_modules'],
+        alias: {
+            examples: path.join(__dirname, '../examples/src'),
+            'react-intl-locale-data': path.resolve(`node_modules/react-intl/locale-data/${locale}`),
+            'box-annotations-locale-data': path.resolve(`i18n/${language}`),
+            'box-react-ui-locale-data': path.resolve(`node_modules/box-react-ui/i18n/${language}`),
+            moment: path.resolve('src/MomentShim') // Hack to leverage Intl instead
+        }
     }
 });
 
diff --git a/functional-tests/helpers/actions.js b/functional-tests/helpers/actions.js
index 00cd5ee06..91579c5cb 100644
--- a/functional-tests/helpers/actions.js
+++ b/functional-tests/helpers/actions.js
@@ -1,21 +1,25 @@
 /* eslint-disable prefer-arrow-callback, no-var, func-names */
 const {
-    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_ANNOTATION_POPOVER,
     SELECTOR_ANNOTATION_BUTTON_POST,
     SELECTOR_ANNOTATION_BUTTON_CANCEL,
     SELECTOR_ANNOTATION_COMMENT,
     SELECTOR_DELETE_COMMENT_BTN,
-    SELECTOR_REPLY_TEXTAREA,
-    SELECTOR_REPLY_CONTAINER,
+    SELECTOR_DRAFTEDITOR_CONTENT,
+    SELECTOR_ACTION_CONTROLS,
+    SELECTOR_INPUT_SUBMIT_BTN,
+    SELECTOR_INPUT_CANCEL_BTN,
     SELECTOR_ANNOTATION_POINT_MARKER,
     SELECTOR_ANNOTATION_TEXTAREA,
     SELECTOR_ANNNOTATION_MODE_BACKGROUND,
     SELECTOR_ANNOTATION_BUTTON_POINT,
     SELECTOR_ANNOTATION_BUTTON_POINT_EXIT,
-    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
-    SELECTOR_POINT_MODE_HEADER
+    SELECTOR_HIGHLIGHT_CONTROLS,
+    SELECTOR_POINT_MODE_HEADER,
+    SELECTOR_COMMENT_LIST_ITEM,
+    SELECTOR_COMMENT_DELETE_YES
 } = require('../helpers/constants');
-const { validateReply, validateDeleteConfirmation, validateTextarea, validateAnnotation } = require('./validation');
+const { validateTextarea, validateAnnotation } = require('./validation');
 
 /**
  * Replies to an annotation thread
@@ -26,14 +30,14 @@ const { validateReply, validateDeleteConfirmation, validateTextarea, validateAnn
  */
 function replyToThread(I) {
     I.say('Reply to highlight comment annotation');
-    I.fillField(SELECTOR_REPLY_TEXTAREA, 'Sample reply');
-    I.click(`${SELECTOR_REPLY_CONTAINER} ${SELECTOR_ANNOTATION_BUTTON_POST}`);
-    validateReply(I, SELECTOR_ANNOTATION_DIALOG);
+    I.fillField(SELECTOR_DRAFTEDITOR_CONTENT, 'Sample reply');
+    I.click(SELECTOR_INPUT_SUBMIT_BTN);
+    validateTextarea(I, SELECTOR_ANNOTATION_POPOVER);
     I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 2);
 
     I.say('Cancel a reply to a highlight comment annotation');
-    I.fillField(SELECTOR_REPLY_TEXTAREA, 'Sample canceled reply');
-    I.click(`${SELECTOR_REPLY_CONTAINER} ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
+    I.fillField(SELECTOR_DRAFTEDITOR_CONTENT, 'Sample canceled reply');
+    I.click(SELECTOR_INPUT_CANCEL_BTN);
     I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
 }
 
@@ -46,20 +50,21 @@ function replyToThread(I) {
  *
  * @return {void}
  */
-function deleteAnnotation(I, annotationCount, selector = SELECTOR_ANNOTATION_COMMENT) {
-    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, annotationCount);
+function deleteAnnotation(I, annotationCount, selector = SELECTOR_COMMENT_LIST_ITEM) {
+    I.waitNumberOfVisibleElements(SELECTOR_COMMENT_LIST_ITEM, annotationCount);
+    I.click(SELECTOR_COMMENT_LIST_ITEM);
 
     I.say('Delete the annotation');
     I.waitForEnabled(`${selector} ${SELECTOR_DELETE_COMMENT_BTN}`, 9);
     I.click(`${selector} ${SELECTOR_DELETE_COMMENT_BTN}`);
-    validateDeleteConfirmation(I, selector);
+    I.click(`${SELECTOR_COMMENT_DELETE_YES}`);
 
     I.say('Annotation should be deleted');
     if (annotationCount > 1) {
-        I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, annotationCount - 1);
-        I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+        I.waitNumberOfVisibleElements(SELECTOR_COMMENT_LIST_ITEM, annotationCount - 1);
+        I.waitForVisible(SELECTOR_ANNOTATION_POPOVER);
     } else {
-        I.waitForDetached(SELECTOR_ANNOTATION_DIALOG, 1);
+        I.waitForDetached(SELECTOR_ANNOTATION_POPOVER, 1);
     }
 }
 
@@ -73,7 +78,7 @@ function deleteAnnotation(I, annotationCount, selector = SELECTOR_ANNOTATION_COM
 function enterPointMode(I) {
     I.say('Enter point annotation mode');
     I.click(SELECTOR_ANNOTATION_BUTTON_POINT);
-    I.dontSeeElement(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.dontSeeElement(SELECTOR_HIGHLIGHT_CONTROLS);
     I.waitForVisible('.bp-notification');
     I.waitForVisible(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
     I.waitForVisible(SELECTOR_POINT_MODE_HEADER);
@@ -91,12 +96,12 @@ function cancelPointAnnotation(I) {
     I.waitForVisible(SELECTOR_ANNOTATION_POINT_MARKER);
 
     I.say('Annotation dialog should appear with focus on the textarea');
-    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
-    validateTextarea(I, '[data-section="create"]', SELECTOR_ANNOTATION_TEXTAREA);
+    I.waitForVisible(SELECTOR_ANNOTATION_POPOVER);
+    validateTextarea(I, SELECTOR_ACTION_CONTROLS, SELECTOR_DRAFTEDITOR_CONTENT);
 
     I.say('Cancel point annotation');
-    I.click(`[data-section="create"] ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DIALOG, 1);
+    I.click(SELECTOR_INPUT_CANCEL_BTN);
+    I.waitForInvisible(SELECTOR_ANNOTATION_POPOVER, 1);
     I.waitForInvisible(SELECTOR_ANNOTATION_POINT_MARKER, 1);
 }
 
@@ -115,10 +120,10 @@ function createReplyDeletePoint(I) {
     I.waitForVisible(SELECTOR_ANNOTATION_POINT_MARKER);
 
     I.say('Post point annotation');
-    I.fillField(`[data-section="create"] ${SELECTOR_ANNOTATION_TEXTAREA}`, 'Sample comment');
-    I.click(`[data-section="create"] ${SELECTOR_ANNOTATION_BUTTON_POST}`);
+    I.fillField(SELECTOR_DRAFTEDITOR_CONTENT, 'Sample comment');
+    I.click(SELECTOR_INPUT_SUBMIT_BTN);
     validateAnnotation(I);
-    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
+    I.waitNumberOfVisibleElements(SELECTOR_COMMENT_LIST_ITEM, 1);
 
     /*
      * Delete the point annotation
diff --git a/functional-tests/helpers/constants.js b/functional-tests/helpers/constants.js
index 4d4a6053f..253f4981f 100644
--- a/functional-tests/helpers/constants.js
+++ b/functional-tests/helpers/constants.js
@@ -1,185 +1,67 @@
 // Preview CSS constants
-const CLASS_ACTIVE = 'bp-is-active';
-exports.SELECTOR_ACTIVE = `.${CLASS_ACTIVE}`;
-const CLASS_HIDDEN = 'bp-is-hidden';
-exports.SELECTOR_HIDDEN = `.${CLASS_HIDDEN}`;
-const CLASS_INVISIBLE = 'bp-is-invisible';
-exports.SELECTOR_INVISIBLE = `.${CLASS_INVISIBLE}`;
-const CLASS_DISABLED = 'is-disabled';
-exports.SELECTOR_DISABLED = `.${CLASS_DISABLED}`;
+exports.SELECTOR_ACTIVE = '.bp-is-active';
+exports.SELECTOR_DISABLED = '.is-disabled';
 
-const CLASS_BUTTON = 'bp-btn';
-exports.SELECTOR_BUTTON = `.${CLASS_BUTTON}`;
-const CLASS_BUTTON_PLAIN = 'bp-btn-plain';
-exports.SELECTOR_BUTTON_PLAIN = `.${CLASS_BUTTON_PLAIN}`;
-const CLASS_BUTTON_PRIMARY = 'bp-btn-primary';
-exports.SELECTOR_BUTTON_PRIMARY = `.${CLASS_BUTTON_PRIMARY}`;
+exports.SELECTOR_BOX_PREVIEW_HEADER = '.bp-header';
+exports.SELECTOR_BOX_PREVIEW_BASE_HEADER = '.bp-base-header';
+exports.SELECTOR_ANNOTATION_BUTTON_POINT = '.bp-btn-annotate-point';
+exports.SELECTOR_ANNOTATION_BUTTON_DRAW = '.bp-btn-annotate-draw';
+exports.SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER = '.bp-btn-annotate-draw-enter';
 
-const CLASS_BOX_PREVIEW_HEADER = 'bp-header';
-exports.SELECTOR_BOX_PREVIEW_HEADER = `.${CLASS_BOX_PREVIEW_HEADER}`;
-const CLASS_BOX_PREVIEW_BASE_HEADER = 'bp-base-header';
-exports.SELECTOR_BOX_PREVIEW_BASE_HEADER = `.${CLASS_BOX_PREVIEW_BASE_HEADER}`;
-const CLASS_ANNOTATION_BUTTON_POINT = 'bp-btn-annotate-point';
-exports.SELECTOR_ANNOTATION_BUTTON_POINT = `.${CLASS_ANNOTATION_BUTTON_POINT}`;
-const CLASS_ANNOTATION_BUTTON_DRAW = 'bp-btn-annotate-draw';
-exports.SELECTOR_ANNOTATION_BUTTON_DRAW = `.${CLASS_ANNOTATION_BUTTON_DRAW}`;
-const CLASS_ANNOTATION_BUTTON_DRAW_ENTER = 'bp-btn-annotate-draw-enter';
-exports.SELECTOR_ANNOTATION_BUTTON_DRAW_ENTER = `.${CLASS_ANNOTATION_BUTTON_DRAW_ENTER}`;
-
-const CLASS_BOX_PREVIEW = 'bp';
-exports.SELECTOR_BOX_PREVIEW = `.${CLASS_BOX_PREVIEW}`;
-const CLASS_PREVIEW_PRESENTATION = 'bp-doc-presentation';
-exports.SELECTOR_PREVIEW_PRESENTATION = `.${CLASS_PREVIEW_PRESENTATION}`;
-const CLASS_TEXT_LAYER = 'textLayer';
-exports.SELECTOR_TEXT_LAYER = `.${CLASS_TEXT_LAYER}`;
+exports.SELECTOR_BOX_PREVIEW = '.bp';
+exports.SELECTOR_PREVIEW_IMAGE = '.bp-image';
+exports.SELECTOR_PREVIEW_PRESENTATION = '.bp-doc-presentation';
+exports.SELECTOR_TEXT_LAYER = '.textLayer';
 
 // Annotation CSS constants
-const CLASS_ANNOTATED_ELEMENT = 'annotated-element';
-exports.SELECTOR_ANNOTATED_ELEMENT = `.${CLASS_ANNOTATED_ELEMENT}`;
-const CLASS_ANNOTATIONS_LOADED = 'ba-annotations-loaded';
-exports.SELECTOR_ANNOTATIONS_LOADED = `.${CLASS_ANNOTATIONS_LOADED}`;
-const CLASS_ANNOTATION_POINT_MARKER = 'ba-point-annotation-marker';
-exports.SELECTOR_ANNOTATION_POINT_MARKER = `.${CLASS_ANNOTATION_POINT_MARKER}`;
-const CLASS_ANNOTATION_POINT_BUTTON = 'ba-point-annotation-btn';
-exports.SELECTOR_ANNOTATION_POINT_BUTTON = `.${CLASS_ANNOTATION_POINT_BUTTON}`;
-const CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER = 'ba-quad-corner-container';
-exports.SELECTOR_HIGHLIGHT_QUAD_CORNER_CONTAINER = `.${CLASS_HIGHLIGHT_QUAD_CORNER_CONTAINER}`;
-const CLASS_HIGHLIGHT_QUAD_CORNER = 'ba-quad-corner';
-exports.SELECTOR_HIGHLIGHT_QUAD_CORNER = `.${CLASS_HIGHLIGHT_QUAD_CORNER}`;
+exports.SELECTOR_ANNOTATED_ELEMENT = '.annotated-element';
+exports.SELECTOR_ANNOTATIONS_LOADED = '.ba-annotations-loaded';
+exports.SELECTOR_ANNOTATION_POINT_MARKER = '.ba-point-annotation-marker';
+exports.SELECTOR_ANNOTATION_POINT_BUTTON = '.ba-point-annotation-btn';
+exports.SELECTOR_HIGHLIGHT_QUAD_CORNER_CONTAINER = '.ba-quad-corner-container';
+exports.SELECTOR_HIGHLIGHT_QUAD_CORNER = '.ba-quad-corner';
 
 // Dialog CSS constants
-const CLASS_ANNOTATION_DIALOG = 'ba-annotation-dialog';
-exports.SELECTOR_ANNOTATION_DIALOG = `.${CLASS_ANNOTATION_DIALOG}`;
-const CLASS_ANNOTATION_CARET = 'ba-annotation-caret';
-exports.SELECTOR_ANNOTATION_CARET = `.${CLASS_ANNOTATION_CARET}`;
-
-const CLASS_TEXTAREA = 'ba-textarea';
-exports.SELECTOR_TEXTAREA = `.${CLASS_TEXTAREA}`;
-const CLASS_ANNOTATION_TEXTAREA = 'annotation-textarea';
-exports.SELECTOR_ANNOTATION_TEXTAREA = `.${CLASS_ANNOTATION_TEXTAREA}`;
-const CLASS_INVALID_INPUT = 'ba-invalid-input';
-exports.SELECTOR_INVALID_INPUT = `.${CLASS_INVALID_INPUT}`;
-
-const CLASS_BUTTON_CONTAINER = 'button-container';
-exports.SELECTOR_BUTTON_CONTAINER = `.${CLASS_BUTTON_CONTAINER}`;
-const CLASS_ANNOTATION_BUTTON_CANCEL = 'cancel-annotation-btn';
-exports.SELECTOR_ANNOTATION_BUTTON_CANCEL = `.${CLASS_ANNOTATION_BUTTON_CANCEL}`;
-const CLASS_ANNOTATION_BUTTON_POST = 'post-annotation-btn';
-exports.SELECTOR_ANNOTATION_BUTTON_POST = `.${CLASS_ANNOTATION_BUTTON_POST}`;
-const CLASS_DELETE_COMMENT_BTN = 'delete-comment-btn';
-exports.SELECTOR_DELETE_COMMENT_BTN = `.${CLASS_DELETE_COMMENT_BTN}`;
-
-const CLASS_DELETE_CONFIRM_MESSAGE = 'delete-confirmation-message';
-exports.SELECTOR_DELETE_CONFIRM_MESSAGE = `.${CLASS_DELETE_CONFIRM_MESSAGE}`;
-const CLASS_CANCEL_DELETE_BTN = 'cancel-delete-btn';
-exports.SELECTOR_CANCEL_DELETE_BTN = `.${CLASS_CANCEL_DELETE_BTN}`;
-const CLASS_CONFIRM_DELETE_BTN = 'confirm-delete-btn';
-exports.SELECTOR_CONFIRM_DELETE_BTN = `.${CLASS_CONFIRM_DELETE_BTN}`;
-
-const CLASS_ANNOTATION_CONTAINER = 'annotation-container';
-exports.SELECTOR_ANNOTATION_CONTAINER = `.${CLASS_ANNOTATION_CONTAINER}`;
-const CLASS_ANNOTATION_COMMENT = 'annotation-comment';
-exports.SELECTOR_ANNOTATION_COMMENT = `.${CLASS_ANNOTATION_COMMENT}`;
-const CLASS_ANNOTATION_COMMENT_TEXT = 'ba-annotation-comment-text';
-exports.SELECTOR_ANNOTATION_COMMENT_TEXT = `.${CLASS_ANNOTATION_COMMENT_TEXT}`;
-const CLASS_PROFILE_CONTAINER = 'profile-container';
-exports.SELECTOR_PROFILE_CONTAINER = `.${CLASS_PROFILE_CONTAINER}`;
-const CLASS_PROFILE_IMG_CONTAINER = 'profile-image-container';
-exports.SELECTOR_PROFILE_IMG_CONTAINER = `.${CLASS_PROFILE_IMG_CONTAINER}`;
-const CLASS_USER_NAME = 'user-name';
-exports.SELECTOR_USER_NAME = `.${CLASS_USER_NAME}`;
-const CLASS_COMMENT_DATE = 'comment-date';
-exports.SELECTOR_COMMENT_DATE = `.${CLASS_COMMENT_DATE}`;
-
-const CLASS_REPLY_CONTAINER = 'reply-container';
-exports.SELECTOR_REPLY_CONTAINER = `.${CLASS_REPLY_CONTAINER}`;
-const CLASS_REPLY_TEXTAREA = 'reply-textarea';
-exports.SELECTOR_REPLY_TEXTAREA = `.${CLASS_REPLY_TEXTAREA}`;
-
-const CLASS_CREATE_COMMENT = 'ba-create-comment';
-exports.SELECTOR_CREATE_COMMENT = `.${CLASS_CREATE_COMMENT}`;
-
-// Highlight dialog CSS constants
-const CLASS_ANNOTATION_HIGHLIGHT_DIALOG = 'ba-annotation-highlight-dialog';
-exports.SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG = `.${CLASS_ANNOTATION_HIGHLIGHT_DIALOG}`;
-const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'ba-plain-highlight';
-exports.SELECTOR_ANNOTATION_PLAIN_HIGHLIGHT = `.${CLASS_ANNOTATION_PLAIN_HIGHLIGHT}`;
-
-const CLASS_HIGHLIGHT_DIALOG = 'ba-highlight-dialog';
-exports.SELECTOR_HIGHLIGHT_DIALOG = `.${CLASS_HIGHLIGHT_DIALOG}`;
-const CLASS_TEXT_HIGHLIGHTED = 'ba-is-text-highlighted';
-exports.SELECTOR_TEXT_HIGHLIGHTED = `.${CLASS_TEXT_HIGHLIGHTED}`;
-const CLASS_HIGHLIGHT_LABEL = 'ba-annotation-highlight-label';
-exports.SELECTOR_HIGHLIGHT_LABEL = `.${CLASS_HIGHLIGHT_LABEL}`;
-const CLASS_HIGHLIGHT_BTNS = 'ba-annotation-highlight-btns';
-exports.SELECTOR_HIGHLIGHT_BTNS = `.${CLASS_HIGHLIGHT_BTNS}`;
-const CLASS_ADD_HIGHLIGHT_BTN = 'ba-add-highlight-btn';
-exports.SELECTOR_ADD_HIGHLIGHT_BTN = `.${CLASS_ADD_HIGHLIGHT_BTN}`;
-const CLASS_ADD_HIGHLIGHT_COMMENT_BTN = 'ba-highlight-comment-btn';
-exports.SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN = `.${CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`;
-
-// Drawing dialog CSS constants
-const CLASS_ANNOTATION_DRAWING_LABEL = 'ba-annotation-drawing-label';
-exports.SELECTOR_ANNOTATION_DRAWING_LABEL = `.${CLASS_ANNOTATION_DRAWING_LABEL}`;
-const CLASS_ANNOTATION_DRAWING_DIALOG = 'ba-annotation-drawing-dialog';
-exports.SELECTOR_ANNOTATION_DRAWING_DIALOG = `.${CLASS_ANNOTATION_DRAWING_DIALOG}`;
-
-const CLASS_ANNOTATION_DRAWING_BTNS = 'ba-annotation-drawing-btns';
-exports.SELECTOR_ANNOTATION_DRAWING_BTNS = `.${CLASS_ANNOTATION_DRAWING_BTNS}`;
-const CLASS_ADD_DRAWING_BTN = 'ba-btn-annotate-draw-add';
-exports.SELECTOR_ADD_DRAWING_BTN = `.${CLASS_ADD_DRAWING_BTN}`;
-const CLASS_DELETE_DRAWING_BTN = 'ba-btn-annotate-draw-delete';
-exports.SELECTOR_DELETE_DRAWING_BTN = `.${CLASS_DELETE_DRAWING_BTN}`;
-
-// Mobile dialog CSS constants
-const CLASS_ANIMATE_DIALOG = 'ba-animate-show-dialog';
-exports.SELECTOR_ANIMATE_DIALOG = `.${CLASS_ANIMATE_DIALOG}`;
-const CLASS_MOBILE_ANNOTATION_DIALOG = 'ba-mobile-annotation-dialog';
-exports.SELECTOR_MOBILE_ANNOTATION_DIALOG = `.${CLASS_MOBILE_ANNOTATION_DIALOG}`;
-const CLASS_MOBILE_CREATE_ANNOTATION_DIALOG = 'ba-mobile-create-annotation-dialog';
-exports.SELECTOR_MOBILE_CREATE_ANNOTATION_DIALOG = `.${CLASS_MOBILE_CREATE_ANNOTATION_DIALOG}`;
-const CLASS_MOBILE_CREATE_HIGHLIGHT_DIALOG = 'ba-mobile-create-highlight-dialog';
-exports.SELECTOR_MOBILE_CREATE_HIGHLIGHT_DIALOG = `.${CLASS_MOBILE_CREATE_HIGHLIGHT_DIALOG}`;
-const CLASS_CREATE_DIALOG = 'ba-create-annotation-dialog';
-exports.SELECTOR_CREATE_DIALOG = `.${CLASS_CREATE_DIALOG}`;
-
-const CLASS_MOBILE_DIALOG_HEADER = 'ba-annotation-mobile-header';
-exports.SELECTOR_MOBILE_DIALOG_HEADER = `.${CLASS_MOBILE_DIALOG_HEADER}`;
-const CLASS_DIALOG_CLOSE = 'ba-annotation-dialog-close';
-exports.SELECTOR_DIALOG_CLOSE = `.${CLASS_DIALOG_CLOSE}`;
+exports.SELECTOR_ANNOTATION_POPOVER = '.ba-popover';
+exports.SELECTOR_HIGHLIGHT_CONTROLS = '.ba-action-controls-highlight';
+exports.SELECTOR_HIGHLIGHT_BTN = '.ba-highlight-btn';
+exports.SELECTOR_HIGHLIGHT_COMMENT_BTN = '.ba-highlight-comment-btn';
+exports.SELECTOR_SAVED_HIGHLIGHT = '.ba-saved-highlight';
+exports.SELECTOR_ANNOTATION_CARET = '.ba-annotation-caret';
+
+exports.SELECTOR_ANNOTATOR_LABEL = '.ba-annotator-label';
+exports.SELECTOR_ACTION_CONTROLS = '.ba-action-controls';
+exports.SELECTOR_DRAFTEDITOR_CONTENT = '.public-DraftEditor-content';
+
+exports.SELECTOR_COMMENT_LIST = '.ba-comment-list';
+exports.SELECTOR_COMMENT_LIST_ITEM = '.ba-comment-list-item';
+exports.SELECTOR_USER_NAME = '.bcs-comment-headline';
+exports.SELECTOR_DELETE_COMMENT_BTN = '.bcs-comment-delete';
+exports.SELECTOR_COMMENT_DELETE_YES = '.bcs-comment-delete-yes';
+exports.SELECTOR_INPUT_CANCEL_BTN = '.bcs-comment-input-cancel-btn';
+exports.SELECTOR_INPUT_SUBMIT_BTN = '.bcs-comment-input-submit-btn';
+
+exports.SELECTOR_DRAW_CONTROLS = '.ba-action-controls-draw';
+exports.SELECTOR_DRAWING_SAVE_BTN = '.ba-drawing-save-btn';
+exports.SELECTOR_DRAWING_DELETE_BTN = '.ba-drawing-delete-btn';
 
 // Annotation mode CSS constants
-const CLASS_ANNOTATION_MODE = 'ba-annotation-mode';
-exports.SELECTOR_ANNOTATION_MODE = `.${CLASS_ANNOTATION_MODE}`;
-const CLASS_ANNNOTATION_MODE_BACKGROUND = 'ba-annotate-mode-background';
-exports.SELECTOR_ANNNOTATION_MODE_BACKGROUND = `.${CLASS_ANNNOTATION_MODE_BACKGROUND}`;
-const CLASS_ANNOTATION_BUTTON_POINT_EXIT = 'ba-btn-annotate-point-exit';
-exports.SELECTOR_ANNOTATION_BUTTON_POINT_EXIT = `.${CLASS_ANNOTATION_BUTTON_POINT_EXIT}`;
+exports.SELECTOR_ANNOTATION_MODE = '.ba-annotation-mode';
+exports.SELECTOR_ANNNOTATION_MODE_BACKGROUND = '.ba-annotate-mode-background';
+exports.SELECTOR_ANNOTATION_BUTTON_POINT_EXIT = '.ba-btn-annotate-point-exit';
 
-const CLASS_ANNOTATION_MODE_HEADER = 'ba-mode-header';
-exports.SELECTOR_ANNOTATION_MODE_HEADER = `.${CLASS_ANNOTATION_MODE_HEADER}`;
-const CLASS_POINT_MODE_HEADER = 'ba-point-mode-header';
-exports.SELECTOR_POINT_MODE_HEADER = `.${CLASS_POINT_MODE_HEADER}`;
-const CLASS_DRAW_MODE_HEADER = 'ba-draw-mode-header';
-exports.SELECTOR_DRAW_MODE_HEADER = `.${CLASS_DRAW_MODE_HEADER}`;
+exports.SELECTOR_ANNOTATION_MODE_HEADER = '.ba-mode-header';
+exports.SELECTOR_POINT_MODE_HEADER = '.ba-point-mode-header';
+exports.SELECTOR_DRAW_MODE_HEADER = '.ba-draw-mode-header';
 
-const CLASS_ANNOTATION_LAYER_HIGHLIGHT = 'ba-annotation-layer-highlight';
-exports.SELECTOR_ANNOTATION_LAYER_HIGHLIGHT = `.${CLASS_ANNOTATION_LAYER_HIGHLIGHT}`;
-const CLASS_ANNOTATION_LAYER_HIGHLIGHT_COMMENT = 'ba-annotation-layer-highlight-comment';
-exports.SELECTOR_ANNOTATION_LAYER_HIGHLIGHT_COMMENT = `.${CLASS_ANNOTATION_LAYER_HIGHLIGHT_COMMENT}`;
-const CLASS_ANNOTATION_LAYER_DRAW = 'ba-annotation-layer-draw';
-exports.SELECTOR_ANNOTATION_LAYER_DRAW = `.${CLASS_ANNOTATION_LAYER_DRAW}`;
-const CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS = 'ba-annotation-layer-draw-in-progress';
-exports.SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS = `.${CLASS_ANNOTATION_LAYER_DRAW_IN_PROGRESS}`;
+exports.SELECTOR_ANNOTATION_LAYER_HIGHLIGHT = '.ba-annotation-layer-highlight';
+exports.SELECTOR_ANNOTATION_LAYER_HIGHLIGHT_COMMENT = '.ba-annotation-layer-highlight-comment';
+exports.SELECTOR_ANNOTATION_LAYER_DRAW = '.ba-annotation-layer-draw';
+exports.SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS = '.ba-annotation-layer-draw-in-progress';
 
 // Drawing CSS constants
-const CLASS_ANNOTATION_DRAW = 'ba-annotation-draw';
-exports.SELECTOR_ANNOTATION_DRAW = `.${CLASS_ANNOTATION_DRAW}`;
-const CLASS_ANNOTATION_BUTTON_DRAW_UNDO = 'ba-btn-annotate-draw-undo';
-exports.SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO = `.${CLASS_ANNOTATION_BUTTON_DRAW_UNDO}`;
-const CLASS_ANNOTATION_BUTTON_DRAW_REDO = 'ba-btn-annotate-draw-redo';
-exports.SELECTOR_ANNOTATION_BUTTON_DRAW_REDO = `.${CLASS_ANNOTATION_BUTTON_DRAW_REDO}`;
-const CLASS_ANNOTATION_BUTTON_DRAW_POST = 'ba-btn-annotate-draw-post';
-exports.SELECTOR_ANNOTATION_BUTTON_DRAW_POST = `.${CLASS_ANNOTATION_BUTTON_DRAW_POST}`;
-const CLASS_ANNOTATION_BUTTON_DRAW_CANCEL = 'ba-btn-annotate-draw-cancel';
-exports.SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL = `.${CLASS_ANNOTATION_BUTTON_DRAW_CANCEL}`;
\ No newline at end of file
+exports.SELECTOR_ANNOTATION_DRAW = '.ba-annotation-draw';
+exports.SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO = '.ba-btn-annotate-draw-undo';
+exports.SELECTOR_ANNOTATION_BUTTON_DRAW_REDO = '.ba-btn-annotate-draw-redo';
+exports.SELECTOR_DRAWING_SAVE_BTN = '.ba-btn-annotate-draw-post';
+exports.SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL = '.ba-btn-annotate-draw-cancel';
\ No newline at end of file
diff --git a/functional-tests/helpers/validation.js b/functional-tests/helpers/validation.js
index 90f571282..0e7ed95c1 100644
--- a/functional-tests/helpers/validation.js
+++ b/functional-tests/helpers/validation.js
@@ -1,22 +1,17 @@
 /* eslint-disable prefer-arrow-callback, no-var, func-names */
+const { expect } = require('chai');
 const {
-    SELECTOR_ANNOTATION_DIALOG,
+    SELECTOR_ANNOTATION_POPOVER,
     SELECTOR_ACTIVE,
-    SELECTOR_ANNOTATION_BUTTON_POST,
+    SELECTOR_INPUT_SUBMIT_BTN,
     SELECTOR_INVALID_INPUT,
-    SELECTOR_ANNOTATION_BUTTON_CANCEL,
+    SELECTOR_INPUT_CANCEL_BTN,
     SELECTOR_USER_NAME,
-    SELECTOR_ANNOTATION_CONTAINER,
-    SELECTOR_ANNOTATION_COMMENT,
-    SELECTOR_DELETE_COMMENT_BTN,
-    SELECTOR_PROFILE_IMG_CONTAINER,
-    SELECTOR_REPLY_TEXTAREA,
-    SELECTOR_DELETE_CONFIRM_MESSAGE,
-    SELECTOR_CONFIRM_DELETE_BTN,
-    SELECTOR_CANCEL_DELETE_BTN,
-    SELECTOR_REPLY_CONTAINER
+    SELECTOR_DRAFTEDITOR_CONTENT,
+    SELECTOR_ACTION_CONTROLS,
+    SELECTOR_COMMENT_LIST,
+    SELECTOR_COMMENT_LIST_ITEM
 } = require('../helpers/constants');
-const { expect } = require('chai');
 
 
 /**
@@ -47,16 +42,16 @@ async function validateIconColor(I, selector, color) {
 function* validateTextarea(I, containerSel, textareaSel) {
     I.say(`Validate ${containerSel} ${textareaSel}`);
     I.waitForVisible(`${containerSel} ${textareaSel}${SELECTOR_ACTIVE}`);
-    I.waitForVisible(`${containerSel} ${SELECTOR_ANNOTATION_BUTTON_CANCEL}`);
-    I.waitForVisible(`${containerSel} ${SELECTOR_ANNOTATION_BUTTON_POST}`);
+    I.waitForVisible(`${containerSel} ${SELECTOR_INPUT_CANCEL_BTN}`);
+    I.waitForVisible(`${containerSel} ${SELECTOR_INPUT_SUBMIT_BTN}`);
     expect(yield I.grabValueFrom(`${containerSel} ${textareaSel}`)).to.equal('');
 
-    const message = textareaSel === SELECTOR_REPLY_CONTAINER ? 'Post a reply...' : 'Add a comment here...';
+    const message = 'Write a comment';
     expect(yield I.grabAttributeFrom(`${containerSel} ${textareaSel}`, 'placeholder')).to.equal(message);
 
-    I.click(`${containerSel} ${SELECTOR_ANNOTATION_BUTTON_POST}`);
+    I.click(`${containerSel} ${SELECTOR_INPUT_SUBMIT_BTN}`);
     I.waitForVisible(`${containerSel} ${textareaSel}${SELECTOR_INVALID_INPUT}`);
-    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
+    I.waitForVisible(SELECTOR_ANNOTATION_POPOVER);
 }
 
 /**
@@ -68,63 +63,13 @@ function* validateTextarea(I, containerSel, textareaSel) {
  */
 function validateAnnotation(I) {
     I.say('Dialog should contain new annotation');
-    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
-    I.waitForVisible(SELECTOR_ANNOTATION_CONTAINER);
-    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
-    I.waitForEnabled(SELECTOR_DELETE_COMMENT_BTN);
-    I.waitForVisible(SELECTOR_PROFILE_IMG_CONTAINER);
-    validateTextarea(I, SELECTOR_REPLY_CONTAINER, SELECTOR_REPLY_TEXTAREA);
-    I.waitForText('Kanye West', 15, `${SELECTOR_ANNOTATION_COMMENT} ${SELECTOR_USER_NAME}`);
-}
-
-/**
- * Validates that the annotation reply appears as expected
- *
- * @param {Object} I - the codeceptjs I
- *
- * @return {void}
- */
-function validateReply(I) {
-    I.say('Reply should be added to dialog');
-    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
-    I.waitForVisible(SELECTOR_ANNOTATION_CONTAINER);
-    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 2);
-    I.waitForEnabled(SELECTOR_DELETE_COMMENT_BTN);
-    I.waitForVisible(SELECTOR_PROFILE_IMG_CONTAINER);
-    I.waitForText('Kanye West', 10, SELECTOR_USER_NAME);
-
-    validateTextarea(I, SELECTOR_REPLY_CONTAINER, SELECTOR_REPLY_TEXTAREA);
-}
-
-/**
- * Validates that the delete confirmation message appears
- * and acts as expected
- *
- * @param {Object} I - the codeceptjs I
- * @param {string} selector - the selector to use
- *
- * @return {void}
- */
-function validateDeleteConfirmation(I, selector = '') {
-    I.say('Validate delete confirmation');
-    I.waitForText('Delete this annotation?', 10, `${selector} ${SELECTOR_DELETE_CONFIRM_MESSAGE}`);
-    I.waitForVisible(`${selector} ${SELECTOR_CONFIRM_DELETE_BTN}`);
-    I.waitForVisible(`${selector} ${SELECTOR_CANCEL_DELETE_BTN}`);
-
-    // Cancel annotation delete
-    I.click(`${selector} ${SELECTOR_CANCEL_DELETE_BTN}`);
-    I.waitForInvisible(`${selector} ${SELECTOR_DELETE_CONFIRM_MESSAGE}`);
-
-    // Delete the annotation
-    I.click(`${selector} ${SELECTOR_DELETE_COMMENT_BTN}`);
-
-    // Delete confirmation should appear
-    I.waitForVisible(`${selector} ${SELECTOR_CONFIRM_DELETE_BTN}`);
-    I.click(`${selector} ${SELECTOR_CONFIRM_DELETE_BTN}`);
+    I.waitForVisible(SELECTOR_ANNOTATION_POPOVER);
+    I.waitForVisible(SELECTOR_COMMENT_LIST);
+    I.waitNumberOfVisibleElements(SELECTOR_COMMENT_LIST_ITEM, 1);
+    validateTextarea(I, SELECTOR_ACTION_CONTROLS, SELECTOR_DRAFTEDITOR_CONTENT);
+    I.waitForText('Kanye West', 15, `${SELECTOR_COMMENT_LIST_ITEM} ${SELECTOR_USER_NAME}`);
 }
 
 exports.validateIconColor = validateIconColor;
 exports.validateAnnotation = validateAnnotation;
-exports.validateDeleteConfirmation = validateDeleteConfirmation;
-exports.validateReply = validateReply;
 exports.validateTextarea = validateTextarea;
\ No newline at end of file
diff --git a/functional-tests/tests/draw.js b/functional-tests/tests/draw.js
index 08b741fe1..afdefbd54 100644
--- a/functional-tests/tests/draw.js
+++ b/functional-tests/tests/draw.js
@@ -7,14 +7,14 @@ const {
     SELECTOR_ANNOTATION_BUTTON_DRAW,
     SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO,
     SELECTOR_ANNOTATION_BUTTON_DRAW_REDO,
-    SELECTOR_ANNOTATION_BUTTON_DRAW_POST,
+    SELECTOR_DRAWING_SAVE_BTN,
     SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL,
     SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS,
-    SELECTOR_ANNOTATION_DRAWING_DIALOG,
+    SELECTOR_DRAW_CONTROLS,
     SELECTOR_ADD_DRAWING_BTN,
     SELECTOR_ANNOTATION_DRAWING_LABEL,
-    SELECTOR_DELETE_DRAWING_BTN,
-    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG
+    SELECTOR_DRAWING_DELETE_BTN,
+    SELECTOR_HIGHLIGHT_CONTROLS
 } = require('../helpers/constants');
 
 const { draw, clickAtLocation, selectText } = require('../helpers/mouseEvents');
@@ -39,14 +39,14 @@ Scenario('Create/Delete drawing @desktop @doc', function(I) {
 
     I.say('Selected text will be cleared on entering draw mode');
     selectText(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_CONTROLS);
 
     I.say('Enter draw annotation mode');
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
-    I.dontSeeElement(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.dontSeeElement(SELECTOR_HIGHLIGHT_CONTROLS);
     I.waitForVisible('.bp-notification');
     I.waitForVisible(SELECTOR_ANNNOTATION_MODE_BACKGROUND);
-    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+    I.waitForVisible(SELECTOR_DRAWING_SAVE_BTN);
     I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW_CANCEL);
 
     I.say('Undo/redo buttons should be disabled');
@@ -67,22 +67,22 @@ Scenario('Create/Delete drawing @desktop @doc', function(I) {
 
     draw(I, SELECTOR_TEXT_LAYER);
     I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
-    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.waitForVisible(SELECTOR_DRAW_CONTROLS);
 
     I.say('Undo/redo buttons should be disabled');
     I.waitForEnabled(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
     I.waitForVisible(`${SELECTOR_ANNOTATION_BUTTON_DRAW_REDO}${SELECTOR_DISABLED}`);
 
     I.say('Cancel drawing');
-    I.click(SELECTOR_DELETE_DRAWING_BTN);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.click(SELECTOR_DRAWING_DELETE_BTN);
+    I.waitForInvisible(SELECTOR_DRAW_CONTROLS);
 
     /*
      * Create/Delete a drawing annotation w/ drawing dialog
      */
     draw(I, SELECTOR_TEXT_LAYER, 100);
     I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
-    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.waitForVisible(SELECTOR_DRAW_CONTROLS);
 
     I.say('Undo/redo buttons should be appropriately disabled');
     I.waitForEnabled(SELECTOR_ANNOTATION_BUTTON_DRAW_UNDO);
@@ -93,27 +93,23 @@ Scenario('Create/Delete drawing @desktop @doc', function(I) {
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_REDO);
 
     I.say('Save drawing');
-    I.click(SELECTOR_ADD_DRAWING_BTN);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
-    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
+    I.click(SELECTOR_DRAWING_SAVE_BTN);
+    I.waitForInvisible(SELECTOR_DRAW_CONTROLS);
+
+    // Unselect newly created drawing
+    I.click(SELECTOR_TEXT_LAYER);
 
     I.say('Select drawing');
     clickAtLocation(I, SELECTOR_TEXT_LAYER, 300);
-    I.scrollTo(SELECTOR_ANNOTATION_DRAWING_DIALOG);
-    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.waitForVisible(SELECTOR_DRAW_CONTROLS);
 
     I.say('Drawing should have a boundary and dialog should appear');
     I.waitForText('Kanye West drew', 9, SELECTOR_ANNOTATION_DRAWING_LABEL);
-    I.waitForEnabled(SELECTOR_DELETE_DRAWING_BTN);
+    I.waitForEnabled(SELECTOR_DRAWING_DELETE_BTN);
 
     I.say('Delete drawing');
-    I.click(SELECTOR_DELETE_DRAWING_BTN);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
-});
-
-Scenario('Create/Delete a drawing by exiting mode @desktop @doc', function(I) {
-    I.waitForVisible(SELECTOR_ANNOTATIONS_LOADED);
-    I.waitForVisible(SELECTOR_ANNOTATION_BUTTON_DRAW);
+    I.click(SELECTOR_DRAWING_DELETE_BTN);
+    I.waitForInvisible(SELECTOR_DRAW_CONTROLS);
 
     I.say('Enter draw annotation mode');
     I.click(SELECTOR_ANNOTATION_BUTTON_DRAW);
@@ -121,22 +117,24 @@ Scenario('Create/Delete a drawing by exiting mode @desktop @doc', function(I) {
 
     draw(I, SELECTOR_TEXT_LAYER, 50);
     I.waitForVisible(SELECTOR_ANNOTATION_LAYER_DRAW_IN_PROGRESS);
-    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.waitForVisible(SELECTOR_DRAW_CONTROLS);
 
     I.say('Save drawing');
-    I.click(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.click(SELECTOR_DRAWING_SAVE_BTN);
+    I.waitForInvisible(SELECTOR_DRAW_CONTROLS);
+
+    // Unselect newly created drawing
+    I.click(SELECTOR_TEXT_LAYER);
 
     I.say('Select drawing');
     clickAtLocation(I, SELECTOR_TEXT_LAYER, 300);
-    I.scrollTo(SELECTOR_ANNOTATION_DRAWING_DIALOG);
-    I.waitForVisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.waitForVisible(SELECTOR_DRAW_CONTROLS);
 
     I.say('Drawing should have a boundary and dialog should appear');
     I.waitForText('Kanye West drew', 9, SELECTOR_ANNOTATION_DRAWING_LABEL);
-    I.waitForEnabled(SELECTOR_DELETE_DRAWING_BTN);
+    I.waitForEnabled(SELECTOR_DRAWING_DELETE_BTN);
 
     I.say('Delete drawing');
-    I.click(SELECTOR_DELETE_DRAWING_BTN);
-    I.waitForInvisible(SELECTOR_ANNOTATION_DRAWING_DIALOG);
+    I.click(SELECTOR_DRAWING_DELETE_BTN);
+    I.waitForInvisible(SELECTOR_DRAW_CONTROLS);
 });
\ No newline at end of file
diff --git a/functional-tests/tests/highlight_comment.js b/functional-tests/tests/highlight_comment.js
index 37e0d6414..14ade7c78 100644
--- a/functional-tests/tests/highlight_comment.js
+++ b/functional-tests/tests/highlight_comment.js
@@ -2,15 +2,14 @@
 const {
     SELECTOR_TEXT_LAYER,
     SELECTOR_ANNOTATIONS_LOADED,
-    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
-    SELECTOR_ADD_HIGHLIGHT_BTN,
-    SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN,
-    SELECTOR_CREATE_DIALOG,
-    SELECTOR_CREATE_COMMENT,
-    SELECTOR_ANNOTATION_TEXTAREA,
-    SELECTOR_ANNOTATION_BUTTON_POST,
-    SELECTOR_ANNOTATION_BUTTON_CANCEL,
-    SELECTOR_ANNOTATION_COMMENT
+    SELECTOR_ACTION_CONTROLS,
+    SELECTOR_HIGHLIGHT_CONTROLS,
+    SELECTOR_HIGHLIGHT_BTN,
+    SELECTOR_HIGHLIGHT_COMMENT_BTN,
+    SELECTOR_DRAFTEDITOR_CONTENT,
+    SELECTOR_INPUT_CANCEL_BTN,
+    SELECTOR_INPUT_SUBMIT_BTN,
+    SELECTOR_COMMENT_LIST_ITEM
 } = require('../helpers/constants');
 
 const { selectText } = require('../helpers/mouseEvents');
@@ -33,39 +32,39 @@ Scenario('Create/Delete a new highlight comment annotation @desktop @doc', funct
 
     I.say('Highlight dialog should appear after selecting text');
     selectText(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
-    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_BTN);
-    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_CONTROLS);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_COMMENT_BTN);
 
     I.say('Create highlight comment annotation');
-    I.click(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
-    I.waitForVisible(SELECTOR_CREATE_DIALOG);
-    validateTextarea(I, SELECTOR_CREATE_COMMENT, SELECTOR_ANNOTATION_TEXTAREA);
+    I.click(SELECTOR_HIGHLIGHT_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_DRAFTEDITOR_CONTENT);
+    validateTextarea(I, SELECTOR_ACTION_CONTROLS, SELECTOR_DRAFTEDITOR_CONTENT);
 
     I.say('Cancel highlight comment annotation');
-    I.click(SELECTOR_ANNOTATION_BUTTON_CANCEL);
-    I.waitForInvisible(SELECTOR_CREATE_COMMENT, 1);
-    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_BTN);
-    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+    I.click(SELECTOR_INPUT_CANCEL_BTN);
+    I.waitForInvisible(SELECTOR_DRAFTEDITOR_CONTENT, 1);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_COMMENT_BTN);
 
     /*
      * Create/reply to a new highlight comment annotation
      */
     I.say('Highlight dialog should appear after selecting text');
     selectText(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
-    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_BTN);
-    I.waitForVisible(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_CONTROLS);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_COMMENT_BTN);
 
     I.say('Create highlight comment annotation');
-    I.click(SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN);
-    I.waitForVisible(SELECTOR_CREATE_DIALOG);
-    validateTextarea(I, SELECTOR_CREATE_COMMENT, SELECTOR_ANNOTATION_TEXTAREA);
+    I.click(SELECTOR_HIGHLIGHT_COMMENT_BTN);
+    I.waitForVisible(SELECTOR_DRAFTEDITOR_CONTENT);
+    validateTextarea(I, SELECTOR_ACTION_CONTROLS, SELECTOR_DRAFTEDITOR_CONTENT);
 
     I.say('Post highlight comment annotation');
-    I.fillField(SELECTOR_ANNOTATION_TEXTAREA, 'Sample comment');
-    I.click(SELECTOR_ANNOTATION_BUTTON_POST);
-    I.waitNumberOfVisibleElements(SELECTOR_ANNOTATION_COMMENT, 1);
+    I.fillField(SELECTOR_DRAFTEDITOR_CONTENT, 'Sample comment');
+    I.click(SELECTOR_INPUT_SUBMIT_BTN);
+    I.waitNumberOfVisibleElements(SELECTOR_COMMENT_LIST_ITEM, 1);
     validateAnnotation(I);
 
     /*
diff --git a/functional-tests/tests/plain_highlight.js b/functional-tests/tests/plain_highlight.js
index f7344076b..be4586d74 100644
--- a/functional-tests/tests/plain_highlight.js
+++ b/functional-tests/tests/plain_highlight.js
@@ -1,12 +1,11 @@
 /* eslint-disable prefer-arrow-callback, no-var, func-names */
 const {
-    SELECTOR_ACTIVE,
     SELECTOR_TEXT_LAYER,
     SELECTOR_ANNOTATIONS_LOADED,
-    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG,
-    SELECTOR_ANNOTATION_DIALOG,
-    SELECTOR_ADD_HIGHLIGHT_BTN,
-    SELECTOR_HIGHLIGHT_LABEL
+    SELECTOR_HIGHLIGHT_CONTROLS,
+    SELECTOR_ANNOTATION_POPOVER,
+    SELECTOR_HIGHLIGHT_BTN,
+    SELECTOR_ANNOTATOR_LABEL
 } = require('../helpers/constants');
 
 const { selectText } = require('../helpers/mouseEvents');
@@ -31,24 +30,24 @@ Scenario('Create/Delete a new plain highlight annotation @desktop @doc', functio
      */
     I.say('Highlight dialog should appear after selecting text');
     selectText(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_CONTROLS);
 
     I.say('Highlight selected text');
-    I.click(SELECTOR_ADD_HIGHLIGHT_BTN);
+    I.click(SELECTOR_HIGHLIGHT_BTN);
 
     I.say('Highlight should be created and dialog should appear');
-    I.waitForVisible(SELECTOR_ANNOTATION_DIALOG);
-    I.waitForText('Kanye West highlighted', 9, SELECTOR_HIGHLIGHT_LABEL);
-    I.waitForEnabled(SELECTOR_ADD_HIGHLIGHT_BTN);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_CONTROLS);
+    I.waitForText('Kanye West highlighted', 9, SELECTOR_ANNOTATOR_LABEL);
+    I.waitForEnabled(SELECTOR_HIGHLIGHT_BTN);
 
-    validateIconColor(I, `${SELECTOR_ADD_HIGHLIGHT_BTN}${SELECTOR_ACTIVE}`, 'rgb(255, 201, 0)');
+    validateIconColor(I, `${SELECTOR_HIGHLIGHT_BTN}`, 'rgb(255, 201, 0)');
 
     /*
      * Delete plain highlight annotation
      */
     I.say('Delete the highlight annotation');
-    I.click(`${SELECTOR_ADD_HIGHLIGHT_BTN}${SELECTOR_ACTIVE}`);
+    I.click(`${SELECTOR_HIGHLIGHT_BTN}`);
 
     I.say('Highlight should be deleted');
-    I.waitForDetached(SELECTOR_ANNOTATION_DIALOG, 1);
+    I.waitForDetached(SELECTOR_ANNOTATION_POPOVER, 1);
 });
diff --git a/functional-tests/tests/point.js b/functional-tests/tests/point.js
index 5fdcfef5f..fb079b7ae 100644
--- a/functional-tests/tests/point.js
+++ b/functional-tests/tests/point.js
@@ -1,9 +1,10 @@
 /* eslint-disable prefer-arrow-callback, no-var, func-names */
 const {
+    SELECTOR_PREVIEW_IMAGE,
     SELECTOR_TEXT_LAYER,
     SELECTOR_ANNOTATIONS_LOADED,
     SELECTOR_ANNOTATION_BUTTON_POINT,
-    SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG
+    SELECTOR_HIGHLIGHT_CONTROLS
 } = require('../helpers/constants');
 
 const {
@@ -31,7 +32,7 @@ Scenario('Create/Delete point annotation @desktop @doc', function(I) {
 
     I.say('Selected text will be cleared on entering point mode');
     selectText(I, SELECTOR_TEXT_LAYER);
-    I.waitForVisible(SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
+    I.waitForVisible(SELECTOR_HIGHLIGHT_CONTROLS);
 
     enterPointMode(I);
 
@@ -51,10 +52,10 @@ Scenario('Create/Delete point annotation @desktop @image', function(I) {
     enterPointMode(I);
 
     I.say('Create point annotation');
-    I.click('.bp-image');
+    I.click(SELECTOR_PREVIEW_IMAGE);
     cancelPointAnnotation(I);
 
     I.say('Create point annotation');
-    I.click('.bp-image');
+    I.click(SELECTOR_PREVIEW_IMAGE);
     createReplyDeletePoint(I);
 });
\ No newline at end of file