diff --git a/editors/demo/src/Editoria/Editoria.js b/editors/demo/src/Editoria/Editoria.js
index 3a72be1e77c3730d05315f894139f42e27619975..85de6f39e2597016ec20012b395aadd133303ed7 100644
--- a/editors/demo/src/Editoria/Editoria.js
+++ b/editors/demo/src/Editoria/Editoria.js
@@ -26,6 +26,11 @@ const user = {
   username: 'admin',
 };
 
+// const users = [{
+//   userId: 'b3cfc28e-0f2e-45b5-b505-e66783d4f946',
+//   username: 'admin',
+// }];
+
 const Editoria = () => {
   const [width] = useWindowSize();
 
@@ -62,7 +67,7 @@ const Editoria = () => {
         />
       </>
     ),
-    [layout, finalConfig],
+    [key, finalConfig, layout],
   );
   return <>{EditoriaComponent}</>;
 };
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index 6eed226c90b9b2ae9cb3d86302d0691f1f6bae94..75749f58572294e46d629f141a1f5d920cc79d90 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -42,6 +42,7 @@ const Wax = forwardRef((props, ref) => {
     readonly,
     value,
     user,
+    users,
     onChange,
     targetFormat,
     scrollMargin,
@@ -80,6 +81,7 @@ const Wax = forwardRef((props, ref) => {
             undefined
           }
           user={user}
+          users={users}
           value={value}
         >
           {({ editor }) => <WaxRender className={className} editor={editor} />}
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 5b0112f67024db71843fa49319967ddac274f099..d5d314222dbc71fc9aaaa7ea37db4e07f8870303 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/wax-prosemirror-core/src/WaxView.js
@@ -38,6 +38,7 @@ const WaxView = forwardRef((props, ref) => {
     readonly,
     autoFocus,
     user,
+    users,
     targetFormat,
     serializer,
     scrollMargin,
@@ -73,6 +74,7 @@ const WaxView = forwardRef((props, ref) => {
             dispatchTransaction,
             disallowedTools: [],
             user,
+            users,
             scrollMargin: scrollMargin || 200,
             scrollThreshold: scrollThreshold || 200,
             attributes: {
diff --git a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js b/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
index 2c7310e6fe2ecef635241968c755466256ffc31d..3f8c44cfd6c1993b30684344b1f499c884586b44 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ConnectedComment.js
@@ -28,7 +28,7 @@ export default ({ comment, top, commentId, recalculateTops }) => {
     pmViews,
     pmViews: {
       main: {
-        props: { user },
+        props: { user, users },
       },
     },
     app,
@@ -74,9 +74,14 @@ export default ({ comment, top, commentId, recalculateTops }) => {
 
   const onClickPost = ({ commentValue, title }) => {
     setClickPost(true);
+    let currentUser = users.find(u => u.currentUser === true);
+    if (user) {
+      currentUser = user;
+    }
     const obj = {
       content: commentValue,
-      displayName: user.username,
+      displayName: currentUser ? currentUser.username : 'Anonymous',
+      userId: currentUser ? currentUser.userId : '1',
       timestamp: Math.floor(Date.now()),
     };
 
diff --git a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js
index d93a906993f5392b402707d87738603673871e58..7059acf114d0265d0e49c96e64ee111c6080efcc 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentBox.js
@@ -133,6 +133,7 @@ CommentBox.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
+      userId: PropTypes.string,
       timestamp: PropTypes.string.number,
     }),
   ),
diff --git a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
index ef66d305fc864acd818380db699b3f34d1ae59ca..ca26962baca015fa40925abba7483662b78f1801 100644
--- a/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
+++ b/wax-prosemirror-services/src/CommentsService/components/ui/comments/CommentItemList.js
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { clone, uniqueId } from 'lodash';
 import { override, th } from '@pubsweet/ui-toolkit';
-
+import { WaxContext } from 'wax-prosemirror-core';
 import CommentItem from './CommentItem';
 
 const Wrapper = styled.div`
@@ -39,6 +39,15 @@ const CommentItemList = props => {
 
   const [items, setItems] = useState(data);
 
+  const context = useContext(WaxContext);
+  const {
+    pmViews: {
+      main: {
+        props: { users },
+      },
+    },
+  } = context;
+
   useEffect(() => {
     if (!active) {
       const first = clone(data[0]);
@@ -54,6 +63,8 @@ const CommentItemList = props => {
     }
   }, [active, data]);
 
+  const displayName = id => users.find(user => user.userId === id);
+
   return (
     <Wrapper active={active} className={className}>
       {title && <CommentTitle>{title}</CommentTitle>}
@@ -61,7 +72,9 @@ const CommentItemList = props => {
         <CommentItem
           active={active}
           content={item.content}
-          displayName={item.displayName}
+          displayName={
+            displayName(item.userId)?.displayName || item.displayName
+          }
           key={uniqueId('comment-item-')}
           timestamp={item.timestamp}
         />
@@ -84,6 +97,7 @@ CommentItemList.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
+      id: PropTypes.string,
       timestamp: PropTypes.number.isRequired,
     }),
   ),