diff --git a/web/modals/chat/message-reactions-modal.css b/web/modals/chat/message-reactions-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/message-reactions-modal.css
@@ -0,0 +1,16 @@
+div.modalContentContainer {
+  padding: 24px 32px 32px 32px;
+  color: var(--fg);
+  background-color: var(--modal-bg);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+  gap: 16px;
+}
+
+div.userRowContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -0,0 +1,46 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
+
+import Modal from '../modal.react';
+import css from './message-reactions-modal.css';
+
+type Props = {
+  +onClose: () => void,
+  +reactions: $ReadOnlyMap<string, MessageReactionInfo>,
+};
+
+function MessageReactionsModal(props: Props): React.Node {
+  const { onClose, reactions } = props;
+
+  const users = React.useMemo(() => {
+    const result = [];
+
+    for (const reaction of reactions.keys()) {
+      const reactionInfo = reactions.get(reaction);
+      invariant(reactionInfo, 'reactionInfo should be set');
+
+      reactionInfo.users.forEach(user => result.push({ ...user, reaction }));
+    }
+
+    return result.map(user => {
+      return (
+        <div key={user.id} className={css.userRowContainer}>
+          <div>{user.username}</div>
+          <div>{user.reaction}</div>
+        </div>
+      );
+    });
+  }, [reactions]);
+
+  return (
+    <Modal size="large" name="Reactions" onClose={onClose}>
+      <div className={css.modalContentContainer}>{users}</div>
+    </Modal>
+  );
+}
+
+export default MessageReactionsModal;