diff --git a/src/lib/annotations/AnnotationDialog.js b/src/lib/annotations/AnnotationDialog.js
index 27b22868e..af0ae863c 100644
--- a/src/lib/annotations/AnnotationDialog.js
+++ b/src/lib/annotations/AnnotationDialog.js
@@ -2,7 +2,6 @@ import autobind from 'autobind-decorator';
 import EventEmitter from 'events';
 import * as annotatorUtil from './annotatorUtil';
 import * as constants from './annotationConstants';
-import { CLASS_ACTIVE, CLASS_HIDDEN } from '../constants';
 import { ICON_CLOSE, ICON_DELETE } from '../icons/icons';
 
 const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'bp-plain-highlight';
@@ -86,7 +85,7 @@ class AnnotationDialog extends EventEmitter {
                 this.element.classList.add(CLASS_ANNOTATION_PLAIN_HIGHLIGHT);
 
                 const headerEl = this.element.querySelector(constants.SELECTOR_MOBILE_DIALOG_HEADER);
-                headerEl.classList.add(CLASS_HIDDEN);
+                headerEl.classList.add(constants.CLASS_HIDDEN);
             }
 
             const dialogCloseButtonEl = this.element.querySelector(constants.SELECTOR_DIALOG_CLOSE);
@@ -102,7 +101,7 @@ class AnnotationDialog extends EventEmitter {
             : this.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
 
         // Don't re-position if reply textarea is already active
-        const textareaIsActive = textAreaEl.classList.contains(CLASS_ACTIVE);
+        const textareaIsActive = textAreaEl.classList.contains(constants.CLASS_ACTIVE);
         if (textareaIsActive && this.element.parentNode) {
             return;
         }
@@ -117,7 +116,7 @@ class AnnotationDialog extends EventEmitter {
         if (this.hasAnnotations) {
             this.activateReply();
         } else {
-            textAreaEl.classList.add(CLASS_ACTIVE);
+            textAreaEl.classList.add(constants.CLASS_ACTIVE);
         }
 
         // Move cursor to end of text area
@@ -357,7 +356,7 @@ class AnnotationDialog extends EventEmitter {
      * @return {void}
      */
     mouseenterHandler() {
-        if (this.element.classList.contains(CLASS_HIDDEN)) {
+        if (this.element.classList.contains(constants.CLASS_HIDDEN)) {
             annotatorUtil.showElement(this.element);
 
             const replyTextArea = this.element.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
@@ -490,10 +489,10 @@ class AnnotationDialog extends EventEmitter {
             <div class="comment-text">${text}</div>
             <button class="bp-btn-plain ${CLASS_BUTTON_DELETE_COMMENT} ${annotation.permissions.can_delete
             ? ''
-            : CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
+            : constants.CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
                 ${ICON_DELETE}
             </button>
-            <div class="${CLASS_DELETE_CONFIRMATION} ${CLASS_HIDDEN}">
+            <div class="${CLASS_DELETE_CONFIRMATION} ${constants.CLASS_HIDDEN}">
                 <div class="delete-confirmation-message">
                     ${__('annotation_delete_confirmation_message')}
                 </div>
@@ -535,13 +534,13 @@ class AnnotationDialog extends EventEmitter {
         const replyTextEl = this.dialogEl.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
 
         // Don't activate if reply textarea is already active
-        const isActive = replyTextEl.classList.contains(CLASS_ACTIVE);
+        const isActive = replyTextEl.classList.contains(constants.CLASS_ACTIVE);
         if (isActive) {
             return;
         }
 
         const replyButtonEls = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
-        replyTextEl.classList.add(CLASS_ACTIVE);
+        replyTextEl.classList.add(constants.CLASS_ACTIVE);
         annotatorUtil.showElement(replyButtonEls);
 
         // Auto scroll annotations dialog to bottom where new comment was added
@@ -652,7 +651,7 @@ class AnnotationDialog extends EventEmitter {
     generateDialogEl(numAnnotations) {
         const dialogEl = document.createElement('div');
         dialogEl.innerHTML = `
-            <section class="${numAnnotations ? CLASS_HIDDEN : ''}" data-section="create">
+            <section class="${numAnnotations ? constants.CLASS_HIDDEN : ''}" data-section="create">
                 <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA}"
                     placeholder="${__('annotation_add_comment_placeholder')}"></textarea>
                 <div class="${constants.CLASS_BUTTON_CONTAINER}">
@@ -664,14 +663,14 @@ class AnnotationDialog extends EventEmitter {
                     </button>
                 </div>
             </section>
-            <section class="${numAnnotations ? '' : CLASS_HIDDEN}" data-section="show">
+            <section class="${numAnnotations ? '' : constants.CLASS_HIDDEN}" data-section="show">
                 <div class="${CLASS_COMMENTS_CONTAINER}"></div>
                 <div class="${CLASS_REPLY_CONTAINER}">
                     <textarea class="${constants.CLASS_TEXTAREA} ${CLASS_REPLY_TEXTAREA}"
                         placeholder="${__(
                             'annotation_reply_placeholder'
                         )}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
-                    <div class="${constants.CLASS_BUTTON_CONTAINER} ${CLASS_HIDDEN}">
+                    <div class="${constants.CLASS_BUTTON_CONTAINER} ${constants.CLASS_HIDDEN}">
                         <button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL_REPLY}">
                             ${__('annotation_cancel')}
                         </button>
diff --git a/src/lib/annotations/Annotator.js b/src/lib/annotations/Annotator.js
index d23ab8c54..2bfa807d6 100644
--- a/src/lib/annotations/Annotator.js
+++ b/src/lib/annotations/Annotator.js
@@ -2,15 +2,11 @@ import EventEmitter from 'events';
 import autobind from 'autobind-decorator';
 import AnnotationService from './AnnotationService';
 import * as annotatorUtil from './annotatorUtil';
-import {
-    CLASS_ACTIVE,
-    CLASS_HIDDEN,
-    SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT,
-    SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_DRAW
-} from '../constants';
 import { ICON_CLOSE } from '../icons/icons';
 import './Annotator.scss';
 import {
+    CLASS_ACTIVE,
+    CLASS_HIDDEN,
     DATA_TYPE_ANNOTATION_DIALOG,
     CLASS_MOBILE_ANNOTATION_DIALOG,
     CLASS_ANNOTATION_DIALOG,
@@ -59,6 +55,7 @@ class Annotator extends EventEmitter {
         this.validationErrorEmitted = false;
         this.isMobile = data.isMobile;
         this.previewUI = data.previewUI;
+        this.modeButtons = data.modeButtons;
         this.annotationModeHandlers = [];
     }
 
@@ -223,7 +220,8 @@ class Annotator extends EventEmitter {
         }
 
         // Hide create annotations button if image is rotated
-        const pointAnnotateButton = this.previewUI.getAnnotateButton(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT);
+        const pointButtonSelector = this.modeButtons[TYPES.point].selector;
+        const pointAnnotateButton = this.previewUI.getAnnotateButton(pointButtonSelector);
 
         if (rotationAngle !== 0) {
             annotatorUtil.hideElement(pointAnnotateButton);
@@ -251,7 +249,8 @@ class Annotator extends EventEmitter {
      */
     togglePointAnnotationHandler(event = {}) {
         this.destroyPendingThreads();
-        const buttonEl = event.target || this.previewUI.getAnnotateButton(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT);
+        const pointButtonSelector = this.modeButtons[TYPES.point].selector;
+        const buttonEl = event.target || this.previewUI.getAnnotateButton(pointButtonSelector);
 
         if (this.isInDrawMode()) {
             this.toggleDrawAnnotationHandler();
@@ -294,7 +293,8 @@ class Annotator extends EventEmitter {
             this.togglePointAnnotationHandler();
         }
 
-        const buttonEl = event.target || this.previewUI.getAnnotateButton(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_DRAW);
+        const drawButtonSelector = this.modeButtons[TYPES.draw].selector;
+        const buttonEl = event.target || this.previewUI.getAnnotateButton(drawButtonSelector);
         const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
 
         // Exit if in draw mode
diff --git a/src/lib/annotations/CommentBox.js b/src/lib/annotations/CommentBox.js
index 37d263650..5130f0230 100644
--- a/src/lib/annotations/CommentBox.js
+++ b/src/lib/annotations/CommentBox.js
@@ -1,5 +1,4 @@
 import EventEmitter from 'events';
-import { CLASS_ACTIVE } from '../constants';
 import * as constants from './annotationConstants';
 import { hideElement, showElement } from './annotatorUtil';
 
@@ -178,7 +177,7 @@ class CommentBox extends EventEmitter {
         const containerEl = document.createElement('section');
         containerEl.classList.add('bp-create-highlight-comment');
         containerEl.innerHTML = `
-            <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA} ${CLASS_ACTIVE}"
+            <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA} ${constants.CLASS_ACTIVE}"
                 placeholder="${this.placeholderText}"></textarea>
             <div class="${constants.CLASS_BUTTON_CONTAINER}">
                 <button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}">
diff --git a/src/lib/annotations/__tests__/AnnotationDialog-test.js b/src/lib/annotations/__tests__/AnnotationDialog-test.js
index 42d0586c0..e5200344a 100644
--- a/src/lib/annotations/__tests__/AnnotationDialog-test.js
+++ b/src/lib/annotations/__tests__/AnnotationDialog-test.js
@@ -3,7 +3,6 @@ import Annotation from '../Annotation';
 import AnnotationDialog from '../AnnotationDialog';
 import * as annotatorUtil from '../annotatorUtil';
 import * as constants from '../annotationConstants';
-import { CLASS_ACTIVE, CLASS_HIDDEN } from '../../constants';
 
 const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'bp-plain-highlight';
 const CLASS_CANCEL_DELETE = 'cancel-delete-btn';
@@ -130,7 +129,7 @@ describe('lib/annotations/AnnotationDialog', () => {
 
             dialog.show();
             const textArea = dialog.element.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
-            expect(textArea).to.not.have.class(CLASS_ACTIVE);
+            expect(textArea).to.not.have.class(constants.CLASS_ACTIVE);
             expect(dialog.activateReply).to.be.called;
         });
 
@@ -142,7 +141,7 @@ describe('lib/annotations/AnnotationDialog', () => {
 
             dialog.show();
             const textArea = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
-            expect(textArea).to.have.class(CLASS_ACTIVE);
+            expect(textArea).to.have.class(constants.CLASS_ACTIVE);
             expect(dialog.activateReply).to.not.be.called;
         });
 
@@ -219,7 +218,7 @@ describe('lib/annotations/AnnotationDialog', () => {
     describe('hide()', () => {
         it('should hide dialog immediately', () => {
             dialog.hide();
-            expect(dialog.element).to.have.class(CLASS_HIDDEN);
+            expect(dialog.element).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should hide the mobile dialog if using a mobile browser', () => {
@@ -249,8 +248,8 @@ describe('lib/annotations/AnnotationDialog', () => {
             dialog.addAnnotation(new Annotation({}));
             const createSectionEl = document.querySelector(constants.SECTION_CREATE);
             const showSectionEl = document.querySelector(constants.SECTION_SHOW);
-            expect(createSectionEl).to.have.class(CLASS_HIDDEN);
-            expect(showSectionEl).to.not.have.class(CLASS_HIDDEN);
+            expect(createSectionEl).to.have.class(constants.CLASS_HIDDEN);
+            expect(showSectionEl).to.not.have.class(constants.CLASS_HIDDEN);
         });
     });
 
@@ -420,7 +419,7 @@ describe('lib/annotations/AnnotationDialog', () => {
         });
 
         it('should show the element only if the element is currently hidden', () => {
-            dialog.element.classList.add(CLASS_HIDDEN);
+            dialog.element.classList.add(constants.CLASS_HIDDEN);
 
             dialog.mouseenterHandler();
             expect(annotatorUtil.showElement).to.be.called;
@@ -432,7 +431,7 @@ describe('lib/annotations/AnnotationDialog', () => {
         });
 
         it('should emit \'annotationcommentpending\' when user hovers back into a dialog that has a pending comment', () => {
-            dialog.element.classList.add(CLASS_HIDDEN);
+            dialog.element.classList.add(constants.CLASS_HIDDEN);
             const commentsTextArea = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
             commentsTextArea.textContent = 'bleh';
 
@@ -623,7 +622,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteButton = document.querySelector(`.${CLASS_BUTTON_DELETE_COMMENT}`);
-            expect(deleteButton).to.have.class(CLASS_HIDDEN);
+            expect(deleteButton).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should make the delete icon hidden if the delete permission is not specified', () => {
@@ -636,7 +635,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteButton = document.querySelector(`.${CLASS_BUTTON_DELETE_COMMENT}`);
-            expect(deleteButton).to.have.class(CLASS_HIDDEN);
+            expect(deleteButton).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should make delete icon visible if the user has delete permission', () => {
@@ -649,7 +648,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteButton = document.querySelector(`.${CLASS_BUTTON_DELETE_COMMENT}`);
-            expect(deleteButton).to.not.have.class(CLASS_HIDDEN);
+            expect(deleteButton).to.not.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should hide the delete confirmation UI by default', () => {
@@ -662,7 +661,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteConfirmation = document.querySelector(SELECTOR_DELETE_CONFIRMATION);
-            expect(deleteConfirmation).to.have.class(CLASS_HIDDEN);
+            expect(deleteConfirmation).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should correctly format the date and time in a different locale', () => {
@@ -741,8 +740,8 @@ describe('lib/annotations/AnnotationDialog', () => {
             const buttonContainer = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
 
             dialog.activateReply();
-            expect(replyTextEl).to.have.class(CLASS_ACTIVE);
-            expect(buttonContainer).to.not.have.class(CLASS_HIDDEN);
+            expect(replyTextEl).to.have.class(constants.CLASS_ACTIVE);
+            expect(buttonContainer).to.not.have.class(constants.CLASS_HIDDEN);
         });
     });
 
@@ -768,8 +767,8 @@ describe('lib/annotations/AnnotationDialog', () => {
             const buttonContainer = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
 
             dialog.deactivateReply();
-            expect(replyTextEl).to.not.have.class(CLASS_ACTIVE);
-            expect(buttonContainer).to.have.class(CLASS_HIDDEN);
+            expect(replyTextEl).to.not.have.class(constants.CLASS_ACTIVE);
+            expect(buttonContainer).to.have.class(constants.CLASS_HIDDEN);
         });
     });
 
@@ -880,16 +879,16 @@ describe('lib/annotations/AnnotationDialog', () => {
             const dialogEl = dialog.generateDialogEl(0);
             const createSectionEl = dialogEl.querySelector(constants.SECTION_CREATE);
             const showSectionEl = dialogEl.querySelector(constants.SECTION_SHOW);
-            expect(createSectionEl).to.not.have.class(CLASS_HIDDEN);
-            expect(showSectionEl).to.have.class(CLASS_HIDDEN);
+            expect(createSectionEl).to.not.have.class(constants.CLASS_HIDDEN);
+            expect(showSectionEl).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should generate an annotations dialog element with annotations', () => {
             const dialogEl = dialog.generateDialogEl(1);
             const createSectionEl = dialogEl.querySelector(constants.SECTION_CREATE);
             const showSectionEl = dialogEl.querySelector(constants.SECTION_SHOW);
-            expect(createSectionEl).to.have.class(CLASS_HIDDEN);
-            expect(showSectionEl).to.not.have.class(CLASS_HIDDEN);
+            expect(createSectionEl).to.have.class(constants.CLASS_HIDDEN);
+            expect(showSectionEl).to.not.have.class(constants.CLASS_HIDDEN);
         });
     });
 });
diff --git a/src/lib/annotations/__tests__/AnnotationThread-test.js b/src/lib/annotations/__tests__/AnnotationThread-test.js
index d9fa3ba30..49efa49d9 100644
--- a/src/lib/annotations/__tests__/AnnotationThread-test.js
+++ b/src/lib/annotations/__tests__/AnnotationThread-test.js
@@ -2,12 +2,12 @@
 import AnnotationThread from '../AnnotationThread';
 import Annotation from '../Annotation';
 import * as annotatorUtil from '../annotatorUtil';
-import { CLASS_HIDDEN } from '../../constants';
 import {
     STATES,
     TYPES,
     CLASS_ANNOTATION_POINT_MARKER,
-    DATA_TYPE_ANNOTATION_INDICATOR
+    DATA_TYPE_ANNOTATION_INDICATOR,
+    CLASS_HIDDEN
 } from '../annotationConstants';
 
 let thread;
diff --git a/src/lib/annotations/__tests__/Annotator-test.js b/src/lib/annotations/__tests__/Annotator-test.js
index 34b473717..117d739b0 100644
--- a/src/lib/annotations/__tests__/Annotator-test.js
+++ b/src/lib/annotations/__tests__/Annotator-test.js
@@ -36,6 +36,10 @@ describe('lib/annotations/Annotator', () => {
             options,
             previewUI: {
                 getAnnotateButton: () => {}
+            },
+            modeButtons: {
+                point: { selector: 'point_btn' },
+                draw: { selector: 'draw_btn' }
             }
         });
 
diff --git a/src/lib/annotations/__tests__/CommentBox-test.js b/src/lib/annotations/__tests__/CommentBox-test.js
index f8ce7febb..2487d0703 100644
--- a/src/lib/annotations/__tests__/CommentBox-test.js
+++ b/src/lib/annotations/__tests__/CommentBox-test.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import CommentBox from '../CommentBox';
-import { CLASS_HIDDEN } from '../../constants';
 import {
+    CLASS_HIDDEN,
     SELECTOR_ANNOTATION_BUTTON_CANCEL,
     SELECTOR_ANNOTATION_BUTTON_POST
 } from '../annotationConstants';
diff --git a/src/lib/annotations/annotationConstants.js b/src/lib/annotations/annotationConstants.js
index 0785b6065..b2ac56ae6 100644
--- a/src/lib/annotations/annotationConstants.js
+++ b/src/lib/annotations/annotationConstants.js
@@ -1,3 +1,6 @@
+export const CLASS_ACTIVE = 'bp-is-active';
+export const CLASS_HIDDEN = 'bp-is-hidden';
+export const CLASS_INVISIBLE = 'bp-is-invisible';
 export const CLASS_ANNOTATION_BUTTON_CANCEL = 'cancel-annotation-btn';
 export const CLASS_ANNOTATION_BUTTON_POST = 'post-annotation-btn';
 export const CLASS_ANNOTATION_DIALOG = 'bp-annotation-dialog';
diff --git a/src/lib/annotations/annotatorUtil.js b/src/lib/annotations/annotatorUtil.js
index ce4ad0f33..a99908264 100644
--- a/src/lib/annotations/annotatorUtil.js
+++ b/src/lib/annotations/annotatorUtil.js
@@ -1,6 +1,12 @@
 import 'whatwg-fetch';
-import { CLASS_ACTIVE, CLASS_HIDDEN, CLASS_INVISIBLE } from '../constants';
-import { TYPES, SELECTOR_ANNOTATION_CARET, PENDING_STATES } from './annotationConstants';
+import {
+    TYPES,
+    SELECTOR_ANNOTATION_CARET,
+    PENDING_STATES,
+    CLASS_ACTIVE,
+    CLASS_HIDDEN,
+    CLASS_INVISIBLE
+} from './annotationConstants';
 
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
diff --git a/src/lib/annotations/doc/DocHighlightDialog.js b/src/lib/annotations/doc/DocHighlightDialog.js
index 584d122a1..5fd319d5c 100644
--- a/src/lib/annotations/doc/DocHighlightDialog.js
+++ b/src/lib/annotations/doc/DocHighlightDialog.js
@@ -2,7 +2,6 @@ import autobind from 'autobind-decorator';
 import AnnotationDialog from '../AnnotationDialog';
 import * as annotatorUtil from '../annotatorUtil';
 import * as docAnnotatorUtil from './docAnnotatorUtil';
-import { CLASS_HIDDEN, CLASS_ACTIVE } from '../../constants';
 import { ICON_HIGHLIGHT, ICON_HIGHLIGHT_COMMENT } from '../../icons/icons';
 import * as constants from '../annotationConstants';
 
@@ -121,7 +120,7 @@ class DocHighlightDialog extends AnnotationDialog {
      * @return {void}
      */
     toggleHighlightDialogs() {
-        const commentsDialogIsHidden = this.commentsDialogEl.classList.contains(CLASS_HIDDEN);
+        const commentsDialogIsHidden = this.commentsDialogEl.classList.contains(constants.CLASS_HIDDEN);
 
         // Displays comments dialog and hides highlight annotations button
         if (commentsDialogIsHidden) {
@@ -134,7 +133,7 @@ class DocHighlightDialog extends AnnotationDialog {
 
             // Activate comments textarea
             const textAreaEl = this.dialogEl.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
-            textAreaEl.classList.add(CLASS_ACTIVE);
+            textAreaEl.classList.add(constants.CLASS_ACTIVE);
         } else {
             // Displays the highlight and comment buttons dialog and
             // hides the comments dialog
@@ -214,9 +213,9 @@ class DocHighlightDialog extends AnnotationDialog {
         this.dialogEl.appendChild(this.highlightDialogEl);
         this.dialogEl.appendChild(this.commentsDialogEl);
         if (this.hasComments) {
-            this.highlightDialogEl.classList.add(CLASS_HIDDEN);
+            this.highlightDialogEl.classList.add(constants.CLASS_HIDDEN);
         } else {
-            this.commentsDialogEl.classList.add(CLASS_HIDDEN);
+            this.commentsDialogEl.classList.add(constants.CLASS_HIDDEN);
         }
 
         if (!this.isMobile) {
@@ -357,9 +356,9 @@ class DocHighlightDialog extends AnnotationDialog {
     toggleHighlightIcon(fillStyle) {
         const addHighlightBtn = this.dialogEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
         if (fillStyle === constants.HIGHLIGHT_FILL.active) {
-            addHighlightBtn.classList.add(CLASS_ACTIVE);
+            addHighlightBtn.classList.add(constants.CLASS_ACTIVE);
         } else {
-            addHighlightBtn.classList.remove(CLASS_ACTIVE);
+            addHighlightBtn.classList.remove(constants.CLASS_ACTIVE);
         }
     }
 
@@ -475,8 +474,8 @@ class DocHighlightDialog extends AnnotationDialog {
     generateHighlightDialogEl() {
         const highlightDialogEl = document.createElement('div');
         highlightDialogEl.innerHTML = `
-            <span class="${CLASS_HIGHLIGHT_LABEL} ${CLASS_HIDDEN}"></span>
-            <span class="${constants.CLASS_HIGHLIGHT_BTNS} ${this.isMobile ? CLASS_HIDDEN : ''}">
+            <span class="${CLASS_HIGHLIGHT_LABEL} ${constants.CLASS_HIDDEN}"></span>
+            <span class="${constants.CLASS_HIGHLIGHT_BTNS} ${this.isMobile ? constants.CLASS_HIDDEN : ''}">
                 <button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_BTN}"
                     data-type="${constants.DATA_TYPE_HIGHLIGHT}"
                     title="${__('annotation_highlight_toggle')}">
diff --git a/src/lib/annotations/doc/__tests__/CreateHighlightDialog-test.js b/src/lib/annotations/doc/__tests__/CreateHighlightDialog-test.js
index 0da6b4dfa..18d99fc27 100644
--- a/src/lib/annotations/doc/__tests__/CreateHighlightDialog-test.js
+++ b/src/lib/annotations/doc/__tests__/CreateHighlightDialog-test.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-expressions */
 import CreateHighlightDialog, { CreateEvents } from '../CreateHighlightDialog';
-import { CLASS_HIDDEN } from '../../../constants';
+import { CLASS_HIDDEN } from '../../annotationConstants';
 import CommentBox from '../../CommentBox';
 import * as annotatorUtil from '../../annotatorUtil';
 
diff --git a/src/lib/annotations/doc/__tests__/DocAnnotator-test.js b/src/lib/annotations/doc/__tests__/DocAnnotator-test.js
index 933df78e0..28fc31a2e 100644
--- a/src/lib/annotations/doc/__tests__/DocAnnotator-test.js
+++ b/src/lib/annotations/doc/__tests__/DocAnnotator-test.js
@@ -3,7 +3,6 @@ import rangy from 'rangy';
 import Annotator from '../../Annotator';
 import Annotation from '../../Annotation';
 import AnnotationThread from '../../AnnotationThread';
-import Browser from '../../../Browser';
 import DocAnnotator from '../DocAnnotator';
 import DocHighlightThread from '../DocHighlightThread';
 import DocDrawingThread from '../DocDrawingThread';
@@ -30,8 +29,6 @@ describe('lib/annotations/doc/DocAnnotator', () => {
     beforeEach(() => {
         fixture.load('annotations/doc/__tests__/DocAnnotator-test.html');
 
-        sandbox.stub(Browser, 'isMobile').returns(false);
-
         annotator = new DocAnnotator({
             canAnnotate: true,
             container: document,
diff --git a/src/lib/annotations/doc/__tests__/DocHighlightDialog-test.js b/src/lib/annotations/doc/__tests__/DocHighlightDialog-test.js
index 23faf3cd6..f1291ca14 100644
--- a/src/lib/annotations/doc/__tests__/DocHighlightDialog-test.js
+++ b/src/lib/annotations/doc/__tests__/DocHighlightDialog-test.js
@@ -4,7 +4,6 @@ import Annotation from '../../Annotation';
 import AnnotationDialog from '../../AnnotationDialog';
 import * as annotatorUtil from '../../annotatorUtil';
 import * as docAnnotatorUtil from '../docAnnotatorUtil';
-import { CLASS_HIDDEN, CLASS_ACTIVE } from '../../../constants';
 import * as util from '../../annotatorUtil';
 import * as constants from '../../annotationConstants';
 
@@ -146,7 +145,7 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
     describe('toggleHighlightDialogs()', () => {
         it('should display comments dialog on toggle when comments dialog is currently hidden', () => {
             const commentsDialogEl = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_CONTAINER);
-            commentsDialogEl.classList.add(CLASS_HIDDEN);
+            commentsDialogEl.classList.add(constants.CLASS_HIDDEN);
 
             sandbox.stub(annotatorUtil, 'hideElement');
             sandbox.stub(dialog, 'position');
@@ -159,7 +158,7 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
 
         it('should display highlight buttons dialog on toggle when comments dialog is currently shown', () => {
             const commentsDialogEl = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_CONTAINER);
-            commentsDialogEl.classList.remove(CLASS_HIDDEN);
+            commentsDialogEl.classList.remove(constants.CLASS_HIDDEN);
 
             sandbox.stub(annotatorUtil, 'hideElement');
             sandbox.stub(dialog, 'position');
@@ -180,8 +179,8 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
 
             dialog.toggleHighlightCommentsReply(true);
 
-            expect(commentTextEl).to.not.have.class(CLASS_HIDDEN);
-            expect(replyTextEl).to.have.class(CLASS_HIDDEN);
+            expect(commentTextEl).to.not.have.class(constants.CLASS_HIDDEN);
+            expect(replyTextEl).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should display "Add a comment here" text area in dialog when no comments exist', () => {
@@ -192,8 +191,8 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
 
             dialog.toggleHighlightCommentsReply(false);
 
-            expect(commentTextEl.classList.contains(CLASS_HIDDEN)).to.be.true;
-            expect(replyTextEl.classList.contains(CLASS_HIDDEN)).to.be.false;
+            expect(commentTextEl.classList.contains(constants.CLASS_HIDDEN)).to.be.true;
+            expect(replyTextEl.classList.contains(constants.CLASS_HIDDEN)).to.be.false;
         });
 
         it('should reposition the dialog if using a desktop browser', () => {
@@ -244,7 +243,7 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
         it('should hide the highlight dialog if thread has comments', () => {
             dialog.hasComments = true;
             dialog.setup([stubs.annotation]);
-            expect(dialog.highlightDialogEl).to.have.class(CLASS_HIDDEN);
+            expect(dialog.highlightDialogEl).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should hide the comments dialog if thread does not have comments', () => {
@@ -259,7 +258,7 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
             });
 
             dialog.setup([annotation]);
-            expect(dialog.commentsDialogEl).to.have.class(CLASS_HIDDEN);
+            expect(dialog.commentsDialogEl).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should setup the dialog element and add thread number to the dialog', () => {
@@ -423,13 +422,13 @@ describe('lib/annotations/doc/DocHighlightDialog', () => {
         it('should display active highlight icon when highlight is active', () => {
             const addHighlightBtn = dialog.element.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
             dialog.toggleHighlightIcon(constants.HIGHLIGHT_FILL.active);
-            expect(addHighlightBtn).to.have.class(CLASS_ACTIVE);
+            expect(addHighlightBtn).to.have.class(constants.CLASS_ACTIVE);
         });
 
         it('should display normal \'text highlighted\' highlight icon when highlight is not active', () => {
             const addHighlightBtn = dialog.element.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
             dialog.toggleHighlightIcon(constants.HIGHLIGHT_FILL.normal);
-            expect(addHighlightBtn).to.not.have.class(CLASS_ACTIVE);
+            expect(addHighlightBtn).to.not.have.class(constants.CLASS_ACTIVE);
         });
     });
 
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index 0adc9ac8c..6308ae1d1 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -690,7 +690,8 @@ class BaseViewer extends EventEmitter {
             fileVersionId,
             isMobile: this.isMobile,
             locale: location.locale,
-            previewUI: this.previewUI
+            previewUI: this.previewUI,
+            modeButtons: ANNOTATION_BUTTONS
         });
         this.annotator.init(this.scale);