diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
index f16f3d6a58..67de4ac544 100644
--- a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
+++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
@@ -50,7 +50,8 @@ def scrolled_editor_packs(entry)
     end
 
     def scrolled_editor_stylesheet_packs(entry)
-      Pageflow.config_for(entry).additional_editor_packs.stylesheet_paths(entry) +
+      ['pageflow-scrolled-editor'] +
+        Pageflow.config_for(entry).additional_editor_packs.stylesheet_paths(entry) +
         Pageflow.config_for(entry).additional_frontend_packs.paths(entry)
     end
 
diff --git a/entry_types/scrolled/package/.gitignore b/entry_types/scrolled/package/.gitignore
index 1872c41511..47075eb0a6 100644
--- a/entry_types/scrolled/package/.gitignore
+++ b/entry_types/scrolled/package/.gitignore
@@ -1,6 +1,7 @@
 /node_modules
 /contentElements
 /editor.js
+/editor.css
 /frontend
 /frontend-server.js
 /contentElements-editor.js
diff --git a/entry_types/scrolled/package/config/webpack.js b/entry_types/scrolled/package/config/webpack.js
index a2b7e461c5..931aca8438 100644
--- a/entry_types/scrolled/package/config/webpack.js
+++ b/entry_types/scrolled/package/config/webpack.js
@@ -80,7 +80,10 @@ module.exports = {
       ]
     },
     'pageflow-scrolled-frontend-inlineEditing': {
-      import: ['pageflow-scrolled/frontend/inlineEditing.css']
+      import: [
+        'pageflow-scrolled/frontend/inlineEditing.css',
+        'pageflow-scrolled/review.css'
+      ]
     },
     'pageflow-scrolled-frontend-commenting': {
       import: [
diff --git a/entry_types/scrolled/package/jest.config.js b/entry_types/scrolled/package/jest.config.js
index 57167f2ded..269d8a3383 100644
--- a/entry_types/scrolled/package/jest.config.js
+++ b/entry_types/scrolled/package/jest.config.js
@@ -22,6 +22,8 @@ module.exports = {
 
   moduleNameMapper: {
     '^pageflow-scrolled/contentElements-frontend$': '<rootDir>/src/contentElements/frontend',
+    "^pageflow-scrolled/editor\\.css$": "<rootDir>/spec/support/jest/editor-css-stub",
+    "^pageflow-scrolled/review\\.css$": "<rootDir>/spec/support/jest/review-css-stub",
     "^pageflow-scrolled/([^/]*)$": "<rootDir>/src/$1",
 
     // Make specs run even if ignored json file is not present
diff --git a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
index 5d203bc1a0..9d472225cc 100644
--- a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
+++ b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
@@ -1,5 +1,6 @@
 import 'editor/config';
 import {editor} from 'pageflow-scrolled/editor';
+import {features} from 'pageflow/frontend';
 import {ScrolledEntry} from 'editor/models/ScrolledEntry';
 import {PreviewMessageController} from 'editor/controllers/PreviewMessageController';
 import {InsertContentElementDialogView} from 'editor/views/InsertContentElementDialogView';
@@ -47,6 +48,31 @@ describe('PreviewMessageController', () => {
     })).resolves.toMatchObject({type: 'ACK'});
   });
 
+  it('sends REVIEW_STATE_RESET to iframe after READY when commenting enabled', () => {
+    features.enable('frontend', ['commenting']);
+    jest.spyOn(window, 'fetch').mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({currentUser: {id: 1}, commentThreads: []})
+    });
+
+    const entry = factories.entry(ScrolledEntry, {}, {entryTypeSeed: normalizeSeed()});
+    const iframeWindow = createIframeWindow();
+
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'REVIEW_STATE_RESET') {
+          resolve(event.data);
+        }
+      });
+      window.postMessage({type: 'READY'}, '*');
+    })).resolves.toMatchObject({
+      type: 'REVIEW_STATE_RESET',
+      payload: {currentUser: {id: 1}, commentThreads: []}
+    });
+  });
+
   it('sets current section index in model on CHANGE_SECTION message', () => {
     const entry = factories.entry(ScrolledEntry, {}, {entryTypeSeed: normalizeSeed()});
     const iframeWindow = createIframeWindow();
@@ -469,6 +495,22 @@ describe('PreviewMessageController', () => {
     })).resolves.toBe('/');
   });
 
+  it('navigates to comments route on SELECTED message for contentElementComments', () => {
+    const editor = factories.editorApi();
+    const entry = factories.entry(ScrolledEntry, {}, {
+      entryTypeSeed: normalizeSeed({
+        contentElements: [{id: 1}]
+      })
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow, editor});
+
+    return expect(new Promise(resolve => {
+      editor.on('navigate', resolve);
+      window.postMessage({type: 'SELECTED', payload: {id: 1, type: 'contentElementComments'}}, '*');
+    })).resolves.toBe('/scrolled/content_elements/1/comments');
+  });
+
   it('updates configuration on UPDATE_CONTENT_ELEMENT message', () => {
     const entry = factories.entry(ScrolledEntry, {}, {
       entryTypeSeed: normalizeSeed({
diff --git a/entry_types/scrolled/package/spec/editor/views/ContentElementCommentsView-spec.js b/entry_types/scrolled/package/spec/editor/views/ContentElementCommentsView-spec.js
new file mode 100644
index 0000000000..435c1287f9
--- /dev/null
+++ b/entry_types/scrolled/package/spec/editor/views/ContentElementCommentsView-spec.js
@@ -0,0 +1,87 @@
+import '@testing-library/jest-dom/extend-expect';
+import BackboneEvents from 'backbone-events-standalone';
+
+import {ContentElementCommentsView} from 'editor/views/ContentElementCommentsView';
+
+import {useFakeTranslations, renderBackboneView} from 'pageflow/testHelpers';
+import {useEditorGlobals} from 'support';
+import {act, waitFor} from '@testing-library/react';
+
+describe('ContentElementCommentsView', () => {
+  const {createEntry} = useEditorGlobals();
+
+  useFakeTranslations({
+    'pageflow_scrolled.review.add_comment_placeholder': 'Add a comment...',
+    'pageflow_scrolled.review.new_topic': 'New topic',
+    'pageflow_scrolled.review.send': 'Send'
+  });
+
+  it('displays threads from session state', () => {
+    const entry = createEntry({
+      contentElements: [{id: 1, permaId: 10, typeName: 'textBlock'}]
+    });
+    entry.reviewSession = fakeReviewSession({
+      currentUser: {id: 1},
+      commentThreads: [{
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 100, body: 'Looks good', creatorName: 'Alice'}]
+      }]
+    });
+
+    const view = new ContentElementCommentsView({
+      entry,
+      model: entry.contentElements.get(1),
+      editor: {}
+    });
+
+    const {getByText} = renderBackboneView(view);
+    view.onShow();
+
+    expect(getByText('Looks good')).toBeInTheDocument();
+  });
+
+  it('updates when session emits change:thread', async () => {
+    const entry = createEntry({
+      contentElements: [{id: 1, permaId: 10, typeName: 'textBlock'}]
+    });
+    entry.reviewSession = fakeReviewSession({
+      currentUser: {id: 1},
+      commentThreads: []
+    });
+
+    const view = new ContentElementCommentsView({
+      entry,
+      model: entry.contentElements.get(1),
+      editor: {}
+    });
+
+    const {getByText} = renderBackboneView(view);
+    act(() => view.onShow());
+
+    act(() => {
+      entry.reviewSession.trigger('change:thread', {
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 100, body: 'New comment', creatorName: 'Bob'}]
+      });
+    });
+
+    await waitFor(() => {
+      expect(getByText('New comment')).toBeInTheDocument();
+    });
+  });
+});
+
+function fakeReviewSession(state = null) {
+  const session = {
+    state,
+    createThread: jest.fn().mockResolvedValue(),
+    createComment: jest.fn().mockResolvedValue()
+  };
+
+  Object.assign(session, BackboneEvents);
+  return session;
+}
diff --git a/entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js b/entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js
index 2a0dbec8e2..335eec1cd7 100644
--- a/entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js
+++ b/entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import {frontend} from 'frontend';
+import {features} from 'pageflow/frontend';
 
 import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
 import {fakeParentWindow} from 'support';
 import {changeLocationHash} from 'support/changeLocationHash';
 import '@testing-library/jest-dom/extend-expect'
-import {act} from '@testing-library/react';
+import {act, fireEvent, waitFor} from '@testing-library/react';
 
 describe('content element selection', () => {
   useInlineEditingPageObjects();
@@ -99,4 +100,48 @@ describe('content element selection', () => {
 
     expect(mainContentElement.isSelected()).toBe(false);
   });
+
+  it('marks selection rect as selected when comment badge is clicked', async () => {
+    features.enable('frontend', ['commenting']);
+
+    const {getByRole, getContentElementByTestId} = renderEntry({
+      seed: {
+        contentElements: [{
+          id: 1,
+          permaId: 10,
+          typeName: 'withTestId',
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [{
+              id: 1,
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              comments: [{id: 100, body: 'Review this'}]
+            }]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+
+    const contentElement = getContentElementByTestId(5);
+    expect(contentElement.isSelected()).toBe(false);
+
+    fireEvent.click(getByRole('status'));
+
+    expect(contentElement.isSelected()).toBe(true);
+  });
 });
diff --git a/entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js b/entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js
new file mode 100644
index 0000000000..914fbd536b
--- /dev/null
+++ b/entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js
@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom/extend-expect';
+import {act, waitFor} from '@testing-library/react';
+import {features} from 'pageflow/frontend';
+
+import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
+import {fakeParentWindow} from 'support';
+
+describe('editor comment badges', () => {
+  useInlineEditingPageObjects();
+
+  beforeEach(() => {
+    fakeParentWindow();
+    window.parent.postMessage = jest.fn();
+    features.enable('frontend', ['commenting']);
+  });
+
+  it('does not display comment icon when element is not selected', () => {
+    const {queryByRole} = renderEntry({
+      seed: {
+        contentElements: [{
+          typeName: 'withTestId',
+          permaId: 10,
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    expect(queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('displays dot badge when threads exist and element is not selected', async () => {
+    const {getByRole} = renderEntry({
+      seed: {
+        contentElements: [{
+          typeName: 'withTestId',
+          permaId: 10,
+          configuration: {testId: 5}
+        }]
+      }
+    });
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [{
+              id: 1,
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              comments: [{id: 100, body: 'Review this'}]
+            }]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+      expect(getByRole('status')).not.toHaveTextContent(/\d/);
+    });
+  });
+});
diff --git a/entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js b/entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js
index b3510fc89d..67127c41f3 100644
--- a/entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js
+++ b/entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import {frontend, WidgetSelectionRect} from 'frontend';
+import {features} from 'pageflow/frontend';
 
 import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects';
 import {fakeParentWindow} from 'support';
-import {fireEvent} from '@testing-library/react';
+import {act, fireEvent, waitFor} from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect'
 
 describe('SELECTED message', () => {
@@ -185,4 +186,43 @@ describe('SELECTED message', () => {
       payload: {id: 'header', type: 'widget'}
     }, expect.anything());
   });
+
+  it('is posted with type contentElementComments when comment badge is clicked', async () => {
+    features.enable('frontend', ['commenting']);
+
+    const {getByRole} = renderEntry({
+      seed: {
+        contentElements: [{id: 1, permaId: 10, typeName: 'withTestId', configuration: {testId: 5}}]
+      }
+    });
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {
+          type: 'REVIEW_STATE_RESET',
+          payload: {
+            currentUser: {id: 1},
+            commentThreads: [{
+              id: 1,
+              subjectType: 'ContentElement',
+              subjectId: 10,
+              comments: [{id: 100, body: 'Review this'}]
+            }]
+          }
+        },
+        origin: window.location.origin
+      }));
+    });
+
+    await waitFor(() => {
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByRole('status'));
+
+    expect(window.parent.postMessage).toHaveBeenCalledWith({
+      type: 'SELECTED',
+      payload: {id: 1, type: 'contentElementComments'}
+    }, expect.anything());
+  });
 });
diff --git a/entry_types/scrolled/package/spec/review/CommentBadge-spec.js b/entry_types/scrolled/package/spec/review/CommentBadge-spec.js
index cfad9b4c09..187c17d058 100644
--- a/entry_types/scrolled/package/spec/review/CommentBadge-spec.js
+++ b/entry_types/scrolled/package/spec/review/CommentBadge-spec.js
@@ -5,6 +5,19 @@ import {CommentBadge} from 'review/CommentBadge';
 import {renderWithReviewState} from 'testHelpers/renderWithReviewState';
 
 describe('CommentBadge', () => {
+  it('does not display count for single thread', () => {
+    const {getByRole} = renderWithReviewState(
+      <CommentBadge subjectType="ContentElement" subjectId={10} />,
+      {
+        commentThreads: [
+          {id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []}
+        ]
+      }
+    );
+
+    expect(getByRole('status')).not.toHaveTextContent(/\d/);
+  });
+
   it('displays thread count for subject', () => {
     const {getByRole} = renderWithReviewState(
       <CommentBadge subjectType="ContentElement" subjectId={10} />,
@@ -27,4 +40,63 @@ describe('CommentBadge', () => {
 
     expect(container).toBeEmptyDOMElement();
   });
+
+  describe('mode icon', () => {
+    it('renders icon without count when no threads', () => {
+      const {getByRole} = renderWithReviewState(
+        <CommentBadge subjectType="ContentElement" subjectId={10} mode="icon" />
+      );
+
+      expect(getByRole('status')).toBeInTheDocument();
+      expect(getByRole('status')).not.toHaveTextContent(/\d/);
+    });
+
+    it('renders full pill when threads exist', () => {
+      const {getByRole} = renderWithReviewState(
+        <CommentBadge subjectType="ContentElement" subjectId={10} mode="icon" />,
+        {
+          commentThreads: [
+            {id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []},
+            {id: 2, subjectType: 'ContentElement', subjectId: 10, comments: []}
+          ]
+        }
+      );
+
+      expect(getByRole('status')).toHaveTextContent('2');
+    });
+  });
+
+  describe('mode dot', () => {
+    it('renders nothing when no threads', () => {
+      const {container} = renderWithReviewState(
+        <CommentBadge subjectType="ContentElement" subjectId={10} mode="dot" />
+      );
+
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('renders dot badge without count when threads exist', () => {
+      const {getByRole} = renderWithReviewState(
+        <CommentBadge subjectType="ContentElement" subjectId={10} mode="dot" />,
+        {
+          commentThreads: [
+            {id: 1, subjectType: 'ContentElement', subjectId: 10, comments: []}
+          ]
+        }
+      );
+
+      expect(getByRole('status')).toBeInTheDocument();
+      expect(getByRole('status')).not.toHaveTextContent(/\d/);
+    });
+  });
+
+  describe('mode active', () => {
+    it('renders full pill even without threads', () => {
+      const {getByRole} = renderWithReviewState(
+        <CommentBadge subjectType="ContentElement" subjectId={10} mode="active" />
+      );
+
+      expect(getByRole('status')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js b/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js
index c7fbcf241f..98591fd1a2 100644
--- a/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js
+++ b/entry_types/scrolled/package/spec/review/ReviewMessageHandler-spec.js
@@ -13,18 +13,18 @@ function fakeReviewSession() {
 }
 
 describe('ReviewMessageHandler', () => {
-  it('calls session.createThread on CREATE_COMMENT_THREAD message', async () => {
+  it('calls session.createThread on CREATE_COMMENT_THREAD message from targetWindow', async () => {
     const session = fakeReviewSession();
-    const targetWindow = {postMessage: jest.fn()};
 
-    ReviewMessageHandler.create({session, targetWindow});
+    ReviewMessageHandler.create({session, targetWindow: window});
 
     window.dispatchEvent(new MessageEvent('message', {
       data: {
         type: 'CREATE_COMMENT_THREAD',
         payload: {subjectType: 'CE', subjectId: 10, body: 'Test'}
       },
-      origin: window.location.origin
+      origin: window.location.origin,
+      source: window
     }));
 
     await new Promise(resolve => setTimeout(resolve, 0));
@@ -34,18 +34,18 @@ describe('ReviewMessageHandler', () => {
     });
   });
 
-  it('calls session.createComment on CREATE_COMMENT message', async () => {
+  it('calls session.createComment on CREATE_COMMENT message from targetWindow', async () => {
     const session = fakeReviewSession();
-    const targetWindow = {postMessage: jest.fn()};
 
-    ReviewMessageHandler.create({session, targetWindow});
+    ReviewMessageHandler.create({session, targetWindow: window});
 
     window.dispatchEvent(new MessageEvent('message', {
       data: {
         type: 'CREATE_COMMENT',
         payload: {threadId: 1, body: 'Reply'}
       },
-      origin: window.location.origin
+      origin: window.location.origin,
+      source: window
     }));
 
     await new Promise(resolve => setTimeout(resolve, 0));
@@ -57,43 +57,72 @@ describe('ReviewMessageHandler', () => {
 
   it('posts REVIEW_STATE_RESET to target window on session reset', () => {
     const session = fakeReviewSession();
-    const targetWindow = {postMessage: jest.fn()};
+    const postMessage = jest.fn();
+    jest.spyOn(window, 'postMessage').mockImplementation(postMessage);
 
-    ReviewMessageHandler.create({session, targetWindow});
+    ReviewMessageHandler.create({session, targetWindow: window});
 
     const state = {currentUser: {id: 42}, commentThreads: [{id: 1}]};
     session.trigger('reset', state);
 
-    expect(targetWindow.postMessage).toHaveBeenCalledWith(
+    expect(postMessage).toHaveBeenCalledWith(
       {type: 'REVIEW_STATE_RESET', payload: state},
       window.location.origin
     );
+
+    window.postMessage.mockRestore();
   });
 
   it('posts REVIEW_STATE_THREAD_CHANGE to target window on session change:thread', () => {
     const session = fakeReviewSession();
-    const targetWindow = {postMessage: jest.fn()};
+    const postMessage = jest.fn();
+    jest.spyOn(window, 'postMessage').mockImplementation(postMessage);
 
-    ReviewMessageHandler.create({session, targetWindow});
+    ReviewMessageHandler.create({session, targetWindow: window});
 
     const thread = {id: 1, comments: [{body: 'Hello'}]};
     session.trigger('change:thread', thread);
 
-    expect(targetWindow.postMessage).toHaveBeenCalledWith(
+    expect(postMessage).toHaveBeenCalledWith(
       {type: 'REVIEW_STATE_THREAD_CHANGE', payload: thread},
       window.location.origin
     );
+
+    window.postMessage.mockRestore();
+  });
+
+  it('ignores messages not from targetWindow', async () => {
+    const session = fakeReviewSession();
+    const iframeWindow = {};
+
+    ReviewMessageHandler.create({session, targetWindow: iframeWindow});
+
+    window.dispatchEvent(new MessageEvent('message', {
+      data: {
+        type: 'CREATE_COMMENT_THREAD',
+        payload: {subjectType: 'CE', subjectId: 10, body: 'Test'}
+      },
+      origin: window.location.origin,
+      source: window
+    }));
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(session.createThread).not.toHaveBeenCalled();
   });
 
   it('can be disposed', () => {
     const session = fakeReviewSession();
-    const targetWindow = {postMessage: jest.fn()};
+    const postMessage = jest.fn();
+    jest.spyOn(window, 'postMessage').mockImplementation(postMessage);
 
-    const handler = ReviewMessageHandler.create({session, targetWindow});
+    const handler = ReviewMessageHandler.create({session, targetWindow: window});
     handler.dispose();
 
     session.trigger('reset', {});
 
-    expect(targetWindow.postMessage).not.toHaveBeenCalled();
+    expect(postMessage).not.toHaveBeenCalled();
+
+    window.postMessage.mockRestore();
   });
 });
diff --git a/entry_types/scrolled/package/spec/support/jest/editor-css-stub.js b/entry_types/scrolled/package/spec/support/jest/editor-css-stub.js
new file mode 100644
index 0000000000..f053ebf797
--- /dev/null
+++ b/entry_types/scrolled/package/spec/support/jest/editor-css-stub.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/entry_types/scrolled/package/spec/support/jest/review-css-stub.js b/entry_types/scrolled/package/spec/support/jest/review-css-stub.js
new file mode 100644
index 0000000000..f053ebf797
--- /dev/null
+++ b/entry_types/scrolled/package/spec/support/jest/review-css-stub.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
index fab191cfb7..bf8266c0da 100644
--- a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
+++ b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
@@ -1,4 +1,5 @@
 import {Object} from 'pageflow/ui';
+import {ReviewMessageHandler} from 'pageflow-scrolled/review';
 import {watchCollections} from '../../entryState';
 import {InsertContentElementDialogView} from '../views/InsertContentElementDialogView'
 import {SelectLinkDestinationDialogView} from '../views/SelectLinkDestinationDialogView'
@@ -9,12 +10,20 @@ export const PreviewMessageController = Object.extend({
     this.iframeWindow = iframeWindow;
     this.editor = editor;
 
+    if (entry.reviewSession) {
+      this.reviewMessageHandler = ReviewMessageHandler.create({
+        session: entry.reviewSession,
+        targetWindow: iframeWindow
+      });
+    }
+
     this.listener = this.handleMessage.bind(this);
     window.addEventListener('message', this.listener);
   },
 
   dispose() {
     window.removeEventListener('message', this.listener);
+    if (this.reviewMessageHandler) this.reviewMessageHandler.dispose();
   },
 
   handleMessage(message) {
@@ -130,6 +139,10 @@ export const PreviewMessageController = Object.extend({
         }
 
         postMessage({type: 'ACK'})
+
+        if (this.entry.reviewSession) {
+          this.entry.reviewSession.fetch();
+        }
       }
       else if (message.data.type === 'CHANGE_SECTION') {
         this.entry.set({
@@ -142,7 +155,10 @@ export const PreviewMessageController = Object.extend({
 
         this.preservedScrollTarget = null;
 
-        if (type === 'contentElement') {
+        if (type === 'contentElementComments') {
+          this.editor.navigate(`/scrolled/content_elements/${id}/comments`, {trigger: true})
+        }
+        else if (type === 'contentElement') {
           const contentElement = this.entry.contentElements.get(id);
           this.editor.navigate(contentElement.getEditorPath(), {trigger: true})
         }
diff --git a/entry_types/scrolled/package/src/editor/controllers/SideBarController.js b/entry_types/scrolled/package/src/editor/controllers/SideBarController.js
index acf491cce4..41fe8b9c19 100644
--- a/entry_types/scrolled/package/src/editor/controllers/SideBarController.js
+++ b/entry_types/scrolled/package/src/editor/controllers/SideBarController.js
@@ -1,12 +1,14 @@
 import Marionette from 'backbone.marionette';
 
 import {editor} from 'pageflow-scrolled/editor';
+import {BackButtonDecoratorView} from 'pageflow/editor';
 
 import {EditChapterView} from '../views/EditChapterView';
 import {EditSectionView} from '../views/EditSectionView';
 import {EditSectionTransitionView} from '../views/EditSectionTransitionView';
 import {EditSectionPaddingsView} from '../views/EditSectionPaddingsView';
 import {EditContentElementView} from '../views/EditContentElementView';
+import {ContentElementCommentsView} from '../views/ContentElementCommentsView';
 
 export const SideBarController = Marionette.Controller.extend({
   initialize: function(options) {
@@ -47,6 +49,16 @@ export const SideBarController = Marionette.Controller.extend({
     }));
   },
 
+  contentElementComments: function(id) {
+    this.region.show(new BackButtonDecoratorView({
+      view: new ContentElementCommentsView({
+        entry: this.entry,
+        model: this.entry.contentElements.get(id),
+        editor
+      })
+    }));
+  },
+
   contentElement: function(id, tab) {
     this.region.show(new EditContentElementView({
       entry: this.entry,
diff --git a/entry_types/scrolled/package/src/editor/index.js b/entry_types/scrolled/package/src/editor/index.js
index 015fe69113..fde7b1f00d 100644
--- a/entry_types/scrolled/package/src/editor/index.js
+++ b/entry_types/scrolled/package/src/editor/index.js
@@ -1,5 +1,8 @@
 /*global pageflow*/
 
+import 'pageflow-scrolled/editor.css';
+import 'pageflow-scrolled/review.css';
+
 import './views/configurationEditors/groups/CommonContentElementAttributes';
 import './views/configurationEditors/groups/LinkButtonVariant';
 import './views/widgetTypes/roles';
diff --git a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
index f608e996e9..e055437187 100644
--- a/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
+++ b/entry_types/scrolled/package/src/editor/models/ScrolledEntry/index.js
@@ -1,5 +1,7 @@
 import {Entry, editor} from 'pageflow/editor';
 import I18n from 'i18n-js';
+import {features} from 'pageflow/frontend';
+import {createReviewSession} from 'pageflow/review';
 
 import {ConsentVendors} from '../ConsentVendors';
 
@@ -75,6 +77,10 @@ export const ScrolledEntry = Entry.extend({
     editor.savingRecords.watch(this.chapters);
 
     this.scrolledSeed = seed;
+
+    if (features.isEnabled('commenting')) {
+      this.reviewSession = createReviewSession({entryId: this.id});
+    }
   },
 
   insertContentElement(attributes, {id, at, splitPoint}) {
diff --git a/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js b/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js
index d89565d313..5e5b992c1b 100644
--- a/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js
+++ b/entry_types/scrolled/package/src/editor/routers/SideBarRouter.js
@@ -7,6 +7,7 @@ export const SideBarRouter = Marionette.AppRouter.extend({
     'scrolled/sections/:id/paddings?position=:position': 'sectionPaddings',
     'scrolled/sections/:id/paddings': 'sectionPaddings',
     'scrolled/sections/:id': 'section',
+    'scrolled/content_elements/:id/comments': 'contentElementComments',
     'scrolled/content_elements/:id': 'contentElement'
   }
 });
diff --git a/entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.js b/entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.js
new file mode 100644
index 0000000000..92c3d8d88a
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Marionette from 'backbone.marionette';
+
+import {ReviewStateProvider, ReviewMessageHandler, ThreadList} from 'pageflow-scrolled/review';
+
+import styles from './ContentElementCommentsView.module.css';
+
+export const ContentElementCommentsView = Marionette.ItemView.extend({
+  template: () => `<div class="${styles.container}"></div>`,
+
+  onShow() {
+    const session = this.options.entry.reviewSession;
+
+    this.reviewMessageHandler = ReviewMessageHandler.create({
+      session,
+      targetWindow: window
+    });
+
+    ReactDOM.render(
+      <ReviewStateProvider initialState={session.state}>
+        <ThreadList subjectType="ContentElement"
+                    subjectId={this.model.get('permaId')}
+                    newTopicButtonClassName={styles.newTopicButton} />
+      </ReviewStateProvider>,
+      this.$el.find(`.${styles.container}`)[0]
+    );
+  },
+
+  onClose() {
+    this.reviewMessageHandler.dispose();
+    ReactDOM.unmountComponentAtNode(this.$el.find(`.${styles.container}`)[0]);
+  }
+});
diff --git a/entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.module.css b/entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.module.css
new file mode 100644
index 0000000000..72923e62fb
--- /dev/null
+++ b/entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.module.css
@@ -0,0 +1,14 @@
+.container {
+  position: relative;
+  padding-top: space(4);
+  --review-thread-box-shadow: none;
+  --review-thread-border: 1px solid var(--ui-on-surface-color-lightest);
+}
+
+.newTopicButton {
+  composes: secondaryIconButton from './buttons.module.css';
+  display: flex !important;
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+}
diff --git a/entry_types/scrolled/package/src/frontend/commenting/Popover.js b/entry_types/scrolled/package/src/frontend/commenting/Popover.js
index 09fdff57a9..b19f545514 100644
--- a/entry_types/scrolled/package/src/frontend/commenting/Popover.js
+++ b/entry_types/scrolled/package/src/frontend/commenting/Popover.js
@@ -53,8 +53,7 @@ export function Popover({subjectType, subjectId, placement}) {
                                 [styles.bottom]: onBottom})}>
       <CommentBadge subjectType={subjectType}
                     subjectId={subjectId}
-                    active={isSelected}
-                    hidden={hasSelection && !isSelected}
+                    mode={isSelected ? 'active' : undefined}
                     onClick={handleBadgeClick} />
       <div className={styles.threadListContainer}>
         {isSelected &&
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.js b/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.js
index fcd4857e8c..b3fd4d564b 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import {useDrag} from 'react-dnd';
 
+import {features} from 'pageflow/frontend';
+import {CommentBadge} from 'pageflow-scrolled/review';
 import {useContentElementEditorState} from '../useContentElementEditorState';
 import {useI18n} from '../i18n';
 import {api} from '../api';
@@ -48,7 +50,7 @@ function OptionalSelectionRect(props) {
 }
 
 function DefaultSelectionRect(props) {
-  const {isSelected, select} = useContentElementEditorState();
+  const {isSelected, select, selectComments, commentsSelected} = useContentElementEditorState();
   const {t} = useI18n({locale: 'ui'});
 
   const [, drag, preview] = useDrag({
@@ -62,6 +64,12 @@ function DefaultSelectionRect(props) {
                    dragHandleTitle={t('pageflow_scrolled.inline_editing.drag_content_element')}
                    full={props.width === widths.full || props.customMargin}
                    inset={props.position === 'backdrop'}
+                   commentBadge={features.isEnabled('commenting') &&
+                     <CommentBadge subjectType="ContentElement"
+                                   subjectId={props.permaId}
+                                   mode={commentsSelected ? 'active' : isSelected ? 'icon' : 'dot'}
+                                   onClick={() => selectComments()} />}
+                   commentBadgeInset={!isSelected && !commentsSelected}
                    ariaLabel={t('pageflow_scrolled.inline_editing.select_content_element')}
                    insertButtonTitles={t('pageflow_scrolled.inline_editing.insert_content_element')}
                    onClick={() => select()}
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.module.css
index ec81ef8e9e..d5b080d286 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.module.css
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementDecorator.module.css
@@ -1,2 +1,3 @@
 .wrapper {
+  position: relative;
 }
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementEditorStateProvider.js b/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementEditorStateProvider.js
index 539d5cbd46..023748917e 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementEditorStateProvider.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/ContentElementEditorStateProvider.js
@@ -9,9 +9,12 @@ export function ContentElementEditorStateProvider({id, children}) {
   const {isSelected, select, range} = useEditorSelection(
     useMemo(() => ({id, type: 'contentElement'}), [id])
   );
+  const {isSelected: commentsSelected, select: selectComments} = useEditorSelection(
+    useMemo(() => ({id, type: 'contentElementComments'}), [id])
+  );
 
   const storylineMode = useStorylineActivity();
-  const isSelectedInForeground = isSelected && storylineMode === 'active';
+  const isSelectedInForeground = (isSelected || commentsSelected) && storylineMode === 'active';
 
   const previousTransientState = useRef({});
   const setTransientState = useCallback(state => {
@@ -24,10 +27,12 @@ export function ContentElementEditorStateProvider({id, children}) {
   const value = useMemo(() => ({
     isEditable: true,
     select,
+    selectComments,
     isSelected: isSelectedInForeground,
+    commentsSelected,
     range,
     setTransientState
-  }), [select, isSelectedInForeground, range, setTransientState]);
+  }), [select, selectComments, isSelectedInForeground, commentsSelected, range, setTransientState]);
 
   return (
     <ContentElementEditorStateContext.Provider value={value}>
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/EntryDecorator.js b/entry_types/scrolled/package/src/frontend/inlineEditing/EntryDecorator.js
index e153719da4..2a842f3aaa 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/EntryDecorator.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/EntryDecorator.js
@@ -1,5 +1,6 @@
 import React, {useEffect, useCallback} from 'react';
 
+import {ReviewStateProvider} from 'pageflow-scrolled/review';
 import {useEntryStateDispatch} from '../../entryState';
 import {usePostMessageListener} from '../usePostMessageListener';
 import {EditorStateProvider, useEditorSelection} from './EditorState';
@@ -13,10 +14,12 @@ export function EntryDecorator({children}) {
 
   return (
     <EditorStateProvider>
-      <MessageHandler contentElementEditorCommandEmitter={contentElementEditorCommandEmitter} />
-      <ContentElementEditorCommandSubscriptionProvider emitter={contentElementEditorCommandEmitter}>
-        {children}
-      </ContentElementEditorCommandSubscriptionProvider>
+      <ReviewStateProvider>
+        <MessageHandler contentElementEditorCommandEmitter={contentElementEditorCommandEmitter} />
+        <ContentElementEditorCommandSubscriptionProvider emitter={contentElementEditorCommandEmitter}>
+          {children}
+        </ContentElementEditorCommandSubscriptionProvider>
+      </ReviewStateProvider>
     </EditorStateProvider>
   );
 }
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.js b/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.js
index 2e86e7c22e..7dbe23395c 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.js
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.js
@@ -15,6 +15,7 @@ export function SelectionRect(props) {
                                 [styles.inset]: props.inset,
                                 [styles.selected]: props.selected,
                                 [styles.draggable]: props.drag,
+                                [styles.hasCommentBadge]: props.commentBadge && !props.commentBadgeInset,
                                 [styles.start]: props.selected && props.start,
                                 [styles.end]: props.selected && props.end})}
          aria-label={props.ariaLabel}
@@ -22,6 +23,7 @@ export function SelectionRect(props) {
          data-scrollpoint={props.scrollPoint ? 'selection' : undefined}
          onClick={props.onClick}>
       {renderDragHandle(props)}
+      {renderCommentBadge(props)}
       {renderToolbar(props)}
 
       <InsertButton {...props} at="before" />
@@ -64,6 +66,20 @@ function renderDragHandle({drag, dragHandleTitle}) {
   );
 }
 
+function renderCommentBadge({commentBadge, commentBadgeInset}) {
+  if (!commentBadge) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.commentBadge,
+                               {[styles.commentBadgeInset]: commentBadgeInset})}
+         onClick={e => e.stopPropagation()}>
+      {commentBadge}
+    </div>
+  );
+}
+
 function renderToolbar({toolbarButtons, onToolbarButtonClick, start}) {
 
   if (toolbarButtons && start) {
diff --git a/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.module.css b/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.module.css
index 11bfaa71e6..aa1e8114b6 100644
--- a/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.module.css
+++ b/entry_types/scrolled/package/src/frontend/inlineEditing/SelectionRect.module.css
@@ -98,6 +98,11 @@
   width: calc(50% - 10px - 0.5em);
 }
 
+.hasCommentBadge:not(.full) .insert-before::after {
+  right: 5px;
+  width: calc(50% - 10px - 0.5em);
+}
+
 .full .insert::before,
 .full .insert::after {
   width: calc(50% - 5px + selectionPadding2);
@@ -175,7 +180,32 @@
   color: #fff;
 }
 
+.commentBadge {
+  position: absolute;
+  top: -7px;
+  right: 10px;
+  transform: translate(100%, -50%);
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.commentBadgeInset {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.full .commentBadge:not(.commentBadgeInset) {
+  right: 0;
+  transform: translate(0, 0);
+}
+
+.hasCommentBadge:not(.full):after {
+  top: 5px;
+}
+
 .inset .dragHandle,
+.inset .commentBadge,
 .inset .insert,
 .inset:after {
   display: none;
diff --git a/entry_types/scrolled/package/src/review/CommentBadge.js b/entry_types/scrolled/package/src/review/CommentBadge.js
index 3bf624b826..dbdc49c2fb 100644
--- a/entry_types/scrolled/package/src/review/CommentBadge.js
+++ b/entry_types/scrolled/package/src/review/CommentBadge.js
@@ -6,19 +6,35 @@ import {useCommentThreads} from './ReviewStateProvider';
 import CommentIcon from './images/comment.svg';
 import styles from './CommentBadge.module.css';
 
-export function CommentBadge({subjectType, subjectId, onClick, active, hidden}) {
+export function CommentBadge({subjectType, subjectId, onClick, mode}) {
   const threads = useCommentThreads(subjectType, subjectId);
+  const hasThreads = threads.length > 0;
 
-  if (hidden || (threads.length === 0 && !active)) {
+  const variant = resolveVariant(mode, hasThreads);
+
+  if (!variant) {
     return null;
   }
 
   return (
     <button role="status"
-            className={classNames(styles.badge, {[styles.active]: active})}
+            className={classNames(styles.badge, styles[variant])}
             onClick={onClick}>
-      <CommentIcon className={styles.icon} />
-      {threads.length > 0 && threads.length}
+      {variant !== 'dot' && <CommentIcon className={styles.icon} />}
+      {(variant === 'active' || variant === 'expanded') && threads.length > 1 ? threads.length : null}
     </button>
   );
 }
+
+function resolveVariant(mode, hasThreads) {
+  switch (mode) {
+  case 'active':
+    return 'active';
+  case 'icon':
+    return hasThreads ? 'expanded' : 'iconOnly';
+  case 'dot':
+    return hasThreads ? 'dot' : null;
+  default:
+    return hasThreads ? 'expanded' : null;
+  }
+}
diff --git a/entry_types/scrolled/package/src/review/CommentBadge.module.css b/entry_types/scrolled/package/src/review/CommentBadge.module.css
index 14e756ec3a..081cc5eece 100644
--- a/entry_types/scrolled/package/src/review/CommentBadge.module.css
+++ b/entry_types/scrolled/package/src/review/CommentBadge.module.css
@@ -1,5 +1,5 @@
 .badge {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: space(1);
   height: space(7);
@@ -22,7 +22,22 @@
   opacity: 1;
 }
 
+.iconOnly {
+  background: none;
+  color: currentColor;
+  box-shadow: none;
+  padding: 10px;
+  height: auto;
+}
+
+.dot {
+  width: 0.7rem;
+  height: 0.7rem;
+  padding: 0;
+}
+
 .icon {
-  width: 16px;
-  height: 16px;
+  display: block;
+  width: 15px;
+  height: 15px;
 }
diff --git a/entry_types/scrolled/package/src/review/NewThreadForm.module.css b/entry_types/scrolled/package/src/review/NewThreadForm.module.css
index 4644f34a03..e6f4bc364f 100644
--- a/entry_types/scrolled/package/src/review/NewThreadForm.module.css
+++ b/entry_types/scrolled/package/src/review/NewThreadForm.module.css
@@ -5,7 +5,8 @@
   padding: space(3);
   background: var(--ui-surface-color);
   border-radius: rounded(lg);
-  box-shadow: var(--ui-box-shadow);
+  box-shadow: var(--review-thread-box-shadow, var(--ui-box-shadow));
+  border: var(--review-thread-border, none);
 }
 
 .input {
diff --git a/entry_types/scrolled/package/src/review/ReviewMessageHandler.js b/entry_types/scrolled/package/src/review/ReviewMessageHandler.js
index a916715ced..cee34975b8 100644
--- a/entry_types/scrolled/package/src/review/ReviewMessageHandler.js
+++ b/entry_types/scrolled/package/src/review/ReviewMessageHandler.js
@@ -7,6 +7,7 @@ export const ReviewMessageHandler = {
   create({session, targetWindow}) {
     function handleMessage(event) {
       if (window.location.href.indexOf(event.origin) !== 0) return;
+      if (event.source !== targetWindow) return;
 
       const {type, payload} = event.data;
 
diff --git a/entry_types/scrolled/package/src/review/ReviewStateProvider.js b/entry_types/scrolled/package/src/review/ReviewStateProvider.js
index 4517e7392f..82d17d5bca 100644
--- a/entry_types/scrolled/package/src/review/ReviewStateProvider.js
+++ b/entry_types/scrolled/package/src/review/ReviewStateProvider.js
@@ -2,11 +2,12 @@ import React, {createContext, useContext, useEffect, useMemo, useReducer} from '
 
 const ReviewStateContext = createContext(null);
 
-export function ReviewStateProvider({children}) {
-  const [state, dispatch] = useReducer(reducer, {
-    currentUser: null,
-    threads: {}
-  });
+export function ReviewStateProvider({initialState, children}) {
+  const [state, dispatch] = useReducer(
+    reducer,
+    initialState,
+    initState
+  );
 
   useEffect(() => {
     function handleMessage(event) {
@@ -51,6 +52,15 @@ export function useCommentThreads(subjectType, subjectId) {
   );
 }
 
+function initState(initialState) {
+  if (initialState) {
+    return reducer({currentUser: null, threads: {}},
+                   {type: 'RESET', payload: initialState});
+  }
+
+  return {currentUser: null, threads: {}};
+}
+
 function reducer(state, action) {
   switch (action.type) {
   case 'RESET': {
diff --git a/entry_types/scrolled/package/src/review/Thread.module.css b/entry_types/scrolled/package/src/review/Thread.module.css
index e43be41564..c40d396e1d 100644
--- a/entry_types/scrolled/package/src/review/Thread.module.css
+++ b/entry_types/scrolled/package/src/review/Thread.module.css
@@ -6,7 +6,8 @@
   padding: space(3);
   background: var(--ui-surface-color);
   border-radius: rounded(lg);
-  box-shadow: var(--ui-box-shadow);
+  box-shadow: var(--review-thread-box-shadow, var(--ui-box-shadow));
+  border: var(--review-thread-border, none);
 }
 
 .chevronButton {
diff --git a/entry_types/scrolled/package/src/review/ThreadList.js b/entry_types/scrolled/package/src/review/ThreadList.js
index abceb86ce5..c66f954ca3 100644
--- a/entry_types/scrolled/package/src/review/ThreadList.js
+++ b/entry_types/scrolled/package/src/review/ThreadList.js
@@ -9,7 +9,7 @@ import {NewThreadForm} from './NewThreadForm';
 import NewTopicIcon from './images/newTopic.svg';
 import styles from './ThreadList.module.css';
 
-export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp, reversed, onDismiss}) {
+export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp, reversed, onDismiss, newTopicButtonClassName}) {
   const {t} = useI18n({locale: 'ui'});
   const threads = useCommentThreads(subjectType, subjectId);
   const [expandedThreadId, setExpandedThreadId] = useState(null);
@@ -24,7 +24,8 @@ export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp
     <div className={styles.container}>
       {!showNewForm &&
         <button className={classNames(styles.newTopicButton,
-                                          {[styles.reversed]: reversed})}
+                                      newTopicButtonClassName,
+                                      {[styles.reversed]: reversed})}
                 onClick={() => setFormToggled(true)}
                 aria-label={t('pageflow_scrolled.review.new_topic')}>
           <NewTopicIcon />
diff --git a/entry_types/scrolled/package/src/review/ThreadList.module.css b/entry_types/scrolled/package/src/review/ThreadList.module.css
index 35ee2aba97..a367a470fd 100644
--- a/entry_types/scrolled/package/src/review/ThreadList.module.css
+++ b/entry_types/scrolled/package/src/review/ThreadList.module.css
@@ -16,7 +16,7 @@
   background: var(--ui-surface-color);
   border: 0;
   border-radius: rounded();
-  box-shadow: var(--ui-box-shadow);
+  box-shadow: var(--review-thread-box-shadow, var(--ui-box-shadow));
   padding: space(1.5) space(2);
   cursor: pointer;
 }
diff --git a/entry_types/scrolled/package/src/testHelpers/renderWithReviewState.js b/entry_types/scrolled/package/src/testHelpers/renderWithReviewState.js
index b39912a3a7..b0039bcf75 100644
--- a/entry_types/scrolled/package/src/testHelpers/renderWithReviewState.js
+++ b/entry_types/scrolled/package/src/testHelpers/renderWithReviewState.js
@@ -1,26 +1,12 @@
 import React from 'react';
-import {render, act} from '@testing-library/react';
+import {render} from '@testing-library/react';
 
 import {ReviewStateProvider} from '../review/ReviewStateProvider';
 
 export function renderWithReviewState(ui, {commentThreads = [], currentUser = null} = {}) {
-  const result = render(
-    <ReviewStateProvider>
+  return render(
+    <ReviewStateProvider initialState={{currentUser, commentThreads}}>
       {ui}
     </ReviewStateProvider>
   );
-
-  if (commentThreads.length > 0 || currentUser) {
-    act(() => {
-      window.dispatchEvent(new MessageEvent('message', {
-        data: {
-          type: 'REVIEW_STATE_RESET',
-          payload: {currentUser, commentThreads}
-        },
-        origin: window.location.origin
-      }));
-    });
-  }
-
-  return result;
 }
diff --git a/entry_types/scrolled/spec/features/entry_previewer/commenting_on_content_elements_spec.rb b/entry_types/scrolled/spec/features/entry_previewer/commenting_on_content_elements_spec.rb
index 308c76d3b7..e2293f8f30 100644
--- a/entry_types/scrolled/spec/features/entry_previewer/commenting_on_content_elements_spec.rb
+++ b/entry_types/scrolled/spec/features/entry_previewer/commenting_on_content_elements_spec.rb
@@ -35,7 +35,7 @@
 
     visit(pageflow.revision_path(entry.draft))
 
-    expect(page).to have_css('[role="status"]', text: '1', wait: 10)
+    expect(page).to have_css('[role="status"]', wait: 10)
   end
 
   scenario 'sees thread comments when clicking badge' do
@@ -61,7 +61,7 @@
 
     visit(pageflow.revision_path(entry.draft))
 
-    find('[role="status"]', text: '1', wait: 10).click
+    find('[role="status"]', wait: 10).click
 
     expect(page).to have_text('Please review this', wait: 10)
   end
@@ -89,7 +89,7 @@
 
     visit(pageflow.revision_path(entry.draft))
 
-    find('[role="status"]', text: '1', wait: 10).click
+    find('[role="status"]', wait: 10).click
     expect(page).to have_text('Please review this', wait: 10)
 
     page.find('textarea', match: :first, wait: 10).fill_in(with: 'Looks good!')
@@ -116,6 +116,6 @@
     page.find('textarea', match: :first, wait: 10).fill_in(with: 'First comment')
     page.find('button[type="submit"]', match: :first).click
 
-    expect(page).to have_css('[role="status"]', text: '1', wait: 10)
+    expect(page).to have_css('[role="status"]', wait: 10)
   end
 end
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb
index c6d36da6bb..328b8e52da 100644
--- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb
+++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb
@@ -432,6 +432,14 @@ module PageflowScrolled
     end
 
     describe 'scrolled_editor_stylesheet_packs' do
+      it 'includes core frontend pack' do
+        entry = create(:published_entry, type_name: 'scrolled')
+
+        result = helper.scrolled_editor_stylesheet_packs(entry)
+
+        expect(result).to include('pageflow-scrolled-editor')
+      end
+
       it 'does not include editor packs without stylesheet option' do
         pageflow_configure do |config|
           config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
diff --git a/package/spec/review/ReviewSession-spec.js b/package/spec/review/ReviewSession-spec.js
index dfc6e075a9..d803818443 100644
--- a/package/spec/review/ReviewSession-spec.js
+++ b/package/spec/review/ReviewSession-spec.js
@@ -33,6 +33,28 @@ describe('ReviewSession', () => {
     });
   });
 
+  it('exposes state after fetch', async () => {
+    const request = jest.fn().mockResolvedValue({
+      currentUser: {id: 42, name: 'Alice'},
+      commentThreads: [
+        {id: 1, subjectType: 'CE', subjectId: 10, comments: [{id: 100, body: 'Hello'}]}
+      ]
+    });
+
+    const session = new ReviewSession({entryId: 5, request});
+
+    expect(session.state).toBeNull();
+
+    await session.fetch();
+
+    expect(session.state).toEqual({
+      currentUser: {id: 42, name: 'Alice'},
+      commentThreads: [
+        expect.objectContaining({id: 1})
+      ]
+    });
+  });
+
   it('emits change:thread after createThread', async () => {
     const request = jest.fn()
       .mockResolvedValueOnce({
@@ -75,6 +97,50 @@ describe('ReviewSession', () => {
     );
   });
 
+  it('updates state after createThread', async () => {
+    const request = jest.fn()
+      .mockResolvedValueOnce({
+        currentUser: {id: 42, name: 'Alice'},
+        commentThreads: []
+      })
+      .mockResolvedValueOnce({
+        id: 1,
+        subjectType: 'ContentElement',
+        subjectId: 10,
+        comments: [{id: 100, body: 'New thread'}]
+      });
+
+    const session = new ReviewSession({entryId: 5, request});
+    await session.fetch();
+    await session.createThread({subjectType: 'ContentElement', subjectId: 10, body: 'New thread'});
+
+    expect(session.state.commentThreads).toEqual([
+      expect.objectContaining({id: 1, comments: [expect.objectContaining({body: 'New thread'})]})
+    ]);
+  });
+
+  it('updates state after createComment', async () => {
+    const request = jest.fn()
+      .mockResolvedValueOnce({
+        currentUser: {id: 42, name: 'Alice'},
+        commentThreads: [
+          {id: 1, subjectType: 'CE', subjectId: 10, comments: [
+            {id: 100, body: 'First', creatorId: 42}
+          ]}
+        ]
+      })
+      .mockResolvedValueOnce({id: 101, body: 'Reply', creatorId: 42});
+
+    const session = new ReviewSession({entryId: 5, request});
+    await session.fetch();
+    await session.createComment({threadId: 1, body: 'Reply'});
+
+    expect(session.state.commentThreads[0].comments).toEqual([
+      expect.objectContaining({body: 'First'}),
+      expect.objectContaining({body: 'Reply'})
+    ]);
+  });
+
   it('emits change:thread with appended comment after createComment', async () => {
     const request = jest.fn()
       .mockResolvedValueOnce({
diff --git a/package/src/review/ReviewSession.js b/package/src/review/ReviewSession.js
index 5bdda095b9..093848e709 100644
--- a/package/src/review/ReviewSession.js
+++ b/package/src/review/ReviewSession.js
@@ -4,7 +4,11 @@ export class ReviewSession {
   constructor({entryId, request}) {
     this._entryId = entryId;
     this._request = request;
-    this._threads = {};
+    this._state = null;
+  }
+
+  get state() {
+    return this._state;
   }
 
   async createThread({subjectType, subjectId, body}) {
@@ -20,7 +24,7 @@ export class ReviewSession {
       }
     });
 
-    this._threads[thread.id] = thread;
+    this._upsertThread(thread);
     this.trigger('change:thread', thread);
   }
 
@@ -31,15 +35,16 @@ export class ReviewSession {
       payload: {comment: {body}}
     });
 
-    const thread = this._threads[threadId];
+    const thread = this._findThread(threadId);
 
     if (thread) {
-      this._threads[threadId] = {
+      const updatedThread = {
         ...thread,
         comments: [...thread.comments, comment]
       };
 
-      this.trigger('change:thread', this._threads[threadId]);
+      this._upsertThread(updatedThread);
+      this.trigger('change:thread', updatedThread);
     }
   }
 
@@ -49,14 +54,40 @@ export class ReviewSession {
       method: 'GET'
     });
 
-    data.commentThreads.forEach(thread => {
-      this._threads[thread.id] = thread;
-    });
-
-    this.trigger('reset', {
+    this._state = {
       currentUser: data.currentUser,
       commentThreads: data.commentThreads
-    });
+    };
+
+    this.trigger('reset', this._state);
+  }
+
+  _findThread(id) {
+    return this._state?.commentThreads.find(t => t.id === id);
+  }
+
+  _upsertThread(thread) {
+    if (!this._state) return;
+
+    const threads = this._state.commentThreads;
+    const index = threads.findIndex(t => t.id === thread.id);
+
+    if (index >= 0) {
+      this._state = {
+        ...this._state,
+        commentThreads: [
+          ...threads.slice(0, index),
+          thread,
+          ...threads.slice(index + 1)
+        ]
+      };
+    }
+    else {
+      this._state = {
+        ...this._state,
+        commentThreads: [...threads, thread]
+      };
+    }
   }
 }
 
diff --git a/rollup.config.js b/rollup.config.js
index 210d7fc194..4d0a270710 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -272,7 +272,7 @@ const pageflowScrolled = [
     external,
     plugins: [
       image({include: pageflowScrolledPackageRoot + '/src/editor/views/images/*.svg'}),
-      ...plugins()
+      ...plugins({extractCss: true})
     ]
   },
   {