diff --git a/frontend/src/components/dialog/group-members-dialog.js b/frontend/src/components/dialog/group-members-dialog.js
new file mode 100644
index 0000000000..b6b3e9dc83
--- /dev/null
+++ b/frontend/src/components/dialog/group-members-dialog.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  members: PropTypes.array.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class GroupMembers extends React.Component {
+
+  render() {
+    const { members } = this.props;
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{`${gettext('Group members')} (${members.length})`}</ModalHeader>
+        <ModalBody className="px-0">
+          <ul className="list-unstyled">
+            {members.map((item, index) => {
+              return <li key={index} className="group-member px-4 py-2 d-flex align-items-center">
+                <img src={item.avatar_url} alt={item.name} className="avatar" />
+                <span className="ml-2 text-truncate" title={item.name}>{item.name}</span>
+              </li>;
+            })}
+          </ul>
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+GroupMembers.propTypes = propTypes;
+
+export default GroupMembers;
diff --git a/media/img/info-id.png b/media/img/info-id.png
new file mode 100644
index 0000000000..318f83615a
Binary files /dev/null and b/media/img/info-id.png differ
diff --git a/media/img/info-organization.png b/media/img/info-organization.png
new file mode 100644
index 0000000000..6e63a3719f
Binary files /dev/null and b/media/img/info-organization.png differ