diff --git a/api/app/events/api.py b/api/app/events/api.py
index 5ede09f36..901916c4a 100644
--- a/api/app/events/api.py
+++ b/api/app/events/api.py
@@ -245,8 +245,9 @@ def post(self):
         args = self.req_parser.parse_args()
 
         user_id = g.current_user["id"]
+        event_id = request.args['id']
         current_user = user_repository.get_by_id(user_id)
-        if not current_user.is_admin:
+        if not (current_user.is_admin or current_user.is_event_response_viewer(event_id) or current_user.is_event_response_editor(event_id)):
             return FORBIDDEN
 
         if event_repository.exists_by_key(args['key']):
diff --git a/api/app/users/models.py b/api/app/users/models.py
index b19977735..94f19d28b 100644
--- a/api/app/users/models.py
+++ b/api/app/users/models.py
@@ -62,6 +62,7 @@ def __init__(self,
         self.deleted_datetime_utc = None
         self.verified_email = False
         self.agree_to_policy()
+        
 
     @property
     def full_name(self):
@@ -103,7 +104,25 @@ def _has_admin_role(self, event_id, admin_role_name):
                 return True
         
         return False
+    
+    def _has_read_only_role(self, event_id):
+        if self.event_roles is None:
+            return False
+        for event_role in self.event_roles:
+            if self.is_admin and event_role.event_id == event_id and (event_role.role == "read_only" or event_role.role == "response_viewer" or event_role.role == "response_editor"):
+                return True
+        
+        return False
 
+    def is_event_admin(self, event_id):
+        return self._has_admin_role(event_id, 'admin')
+    
+    def is_event_response_viewer(self, event_id):
+        return self._has_read_only_role(event_id, 'response_viewer')
+    
+    def is_event_response_editor(self, event_id):
+        return self._has_read_only_role(event_id, 'response_editor')
+    
     def is_event_admin(self, event_id):
         return self._has_admin_role(event_id, 'admin')
 
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 0b97b5a0c..90785360d 100755
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -22,7 +22,7 @@ import ReactGA from "react-ga";
 import "./App.css";
 import history from "./History";
 
-import { isEventAdmin, isRegistrationAdmin, isRegistrationVolunteer, isEventReviewer } from "./utils/user";
+import { isEventAdmin, isEventResponseViewerOnly, isEventResponseEditorOnly, isRegistrationAdmin, isRegistrationVolunteer, isEventReviewer } from "./utils/user";
 import { withTranslation } from 'react-i18next';
 import { userService } from "./services/user";
 
@@ -60,7 +60,9 @@ class EventNav extends Component {
         } id="eventNavbar">
 
           <ul className="navbar-nav">
-            {this.props.user &&
+            {!isEventResponseViewerOnly(this.props.user, this.props.event) &&
+              !isEventResponseEditorOnly(this.props.user, this.props.event) &&
+              this.props.user &&
               this.props.event &&
               this.props.event.is_application_open && (
                 <li className="nav-item">
@@ -74,7 +76,9 @@ class EventNav extends Component {
                   </NavLink>
                 </li>
               )}
-            {this.props.user && this.props.event && this.props.event.is_offer_open && (
+            {!isEventResponseViewerOnly(this.props.user, this.props.event) &&
+              !isEventResponseEditorOnly(this.props.user, this.props.event) &&
+              this.props.user && this.props.event && this.props.event.is_offer_open && (
               <li className="nav-item">
                 <NavLink
                   to={`/${this.props.eventKey}/offer`}
@@ -86,7 +90,9 @@ class EventNav extends Component {
                 </NavLink>
               </li>
             )}
-            {this.props.user &&
+            {!isEventResponseViewerOnly(this.props.user, this.props.event) &&
+              !isEventResponseEditorOnly(this.props.user, this.props.event) &&
+              this.props.user &&
                (
                 <li className="nav-item dropdown ">
                   <div
@@ -132,7 +138,8 @@ class EventNav extends Component {
                   </div>
                 </li>
               )}
-            {isEventAdmin(this.props.user, this.props.event) && (
+            {isEventAdmin(this.props.user, this.props.event) && !isEventResponseViewerOnly(this.props.user, this.props.event) &&
+              !isEventResponseEditorOnly(this.props.user, this.props.event) && (
               <AdminMenu t={t} label="Event Admin">
                 <NavLink
                     to={`/${this.props.eventKey}/eventConfig`}
@@ -206,7 +213,7 @@ class EventNav extends Component {
                     {t('Review Form')}
                   </NavLink>
                 </AdminMenu>
-            )}
+            )}         
             {isEventReviewer(this.props.user, this.props.event) &&
               this.props.event &&
               this.props.event.is_review_open && (
@@ -239,7 +246,8 @@ class EventNav extends Component {
                   </div>
                 </li>
               )}
-            {(isRegistrationAdmin(this.props.user, this.props.event) || isRegistrationVolunteer(this.props.user, this.props.event)) &&
+            {(isRegistrationAdmin(this.props.user, this.props.event) || isRegistrationVolunteer(this.props.user, this.props.event)) && !isEventResponseViewerOnly(this.props.user, this.props.event) &&
+              !isEventResponseEditorOnly(this.props.user, this.props.event) &&
               this.props.event &&
               this.props.event.is_registration_open && (
                 <li className="nav-item dropdown">
diff --git a/webapp/src/pages/ResponseList/components/ResponseListComponent.js b/webapp/src/pages/ResponseList/components/ResponseListComponent.js
index e6876a66d..6435475fa 100644
--- a/webapp/src/pages/ResponseList/components/ResponseListComponent.js
+++ b/webapp/src/pages/ResponseList/components/ResponseListComponent.js
@@ -13,6 +13,7 @@ import { reviewService } from '../../../services/reviews/review.service';
 import { ConfirmModal } from "react-bootstrap4-modal";
 import TagSelectorDialog from '../../../components/TagSelectorDialog';
 import { createColClassName } from "../../../utils/styling/styling";
+import { isEventResponseViewerOnly } from '../../../utils/user';
 
 class ResponseListComponent extends Component {
     constructor(props) {
@@ -373,42 +374,41 @@ class ResponseListComponent extends Component {
                         />
                     </div>
                 </div>
-
-                <form>
-                    <div className="card">
-                    <p className="h4 text-center mb-4">{t("Assign Reviewer")}</p>
-
-                    <div className="row">
-                        <p className="h6 text-center mb-3">{t("Filter the table above then enter a reviewer's email to assign them the filtered rows (the reviewer must already have a Baobab account)")}</p>
-                        
-                        <div className="col-md-10 pr-2">
-                            <FormTextBox
-                                id={"newReviewEmail"}
-                                name={'newReviewEmail'}
-                                placeholder={t("Email")}
-                                onChange={this.handleChange}
-                                value={newReviewerEmail}
-                                key={"newReviewEmail"} />
-                        </div>
-                        <div className="col-md-2 pr-2">
-                            <button
-                                className="btn btn-primary btn-block"
-                                onClick={() => { this.assignReviewer() }}
-                                disabled={!newReviewerEmail}>
-                                {t("Assign")}
-                            </button>
-                        </div>
-
-                        {reviewerAssignError && <span className="alert alert-danger">
-                            {JSON.stringify(this.state.reviewerAssignError)}
-                        </span>}
-
-                        {reviewerAssignSuccess && <span className="alert alert-success">
-                            <Trans i18nKey="reviewsAssigned">Assigned {{numReviewsAssigned}} reviews to {{assignedReviewerEmail}}</Trans>
-                        </span>}
-                    </div>
-                    </div>
-                </form>
+                
+                {(!isEventResponseViewerOnly(this.props.user && this.props.event) &&
+                  <form>
+                      <div className="card">
+                      <p className="h4 text-center mb-4">{t("Assign Reviewer")}</p>
+                      <div className="row">
+                          <p className="h6 text-center mb-3">{t("Filter the table above then enter a reviewer's email to assign them the filtered rows (the reviewer must already have a Baobab account)")}</p>
+                          
+                          <div className="col-md-10 pr-2">
+                              <FormTextBox
+                                  id={"newReviewEmail"}
+                                  name={'newReviewEmail'}
+                                  placeholder={t("Email")}
+                                  onChange={this.handleChange}
+                                  value={newReviewerEmail}
+                                  key={"newReviewEmail"} />
+                          </div>
+                          <div className="col-md-2 pr-2">
+                              <button
+                                  className="btn btn-primary btn-block"
+                                  onClick={() => { this.assignReviewer() }}
+                                  disabled={!newReviewerEmail}>
+                                  {t("Assign")}
+                              </button>
+                          </div>
+                          {reviewerAssignError && <span className="alert alert-danger">
+                              {JSON.stringify(this.state.reviewerAssignError)}
+                          </span>}
+                          {reviewerAssignSuccess && <span className="alert alert-success">
+                              <Trans i18nKey="reviewsAssigned">Assigned {{numReviewsAssigned}} reviews to {{assignedReviewerEmail}}</Trans>
+                          </span>}
+                      </div>
+                      </div>
+                  </form>
+                )}
 
                 <TagSelectorDialog
                     tags={this.state.filteredTags}
diff --git a/webapp/src/pages/eventConfig/components/EventConfigComponent.js b/webapp/src/pages/eventConfig/components/EventConfigComponent.js
index 30af8c130..e9f62e7e0 100644
--- a/webapp/src/pages/eventConfig/components/EventConfigComponent.js
+++ b/webapp/src/pages/eventConfig/components/EventConfigComponent.js
@@ -7,6 +7,7 @@ import FormTextBox from "../../../components/form/FormTextBox";
 import FormTextArea from "../../../components/form/FormTextArea";
 import FormDate from "../../../components/form/FormDate";
 import FormSelect from "../../../components/form/FormSelect";
+import { isEventResponseEditorOnly, isEventResponseViewerOnly } from "../../../utils/user";
 
 const APPLICATION_DATES = ["application_open", "application_close"];
 const REVIEW_DATES = ["review_open", "review_close"];
@@ -450,225 +451,223 @@ class EventConfigComponent extends Component {
     }
 
     const t = this.props.t;
-
-    return (
-      <div>
-        <div className="card">
-          <form>
-            <div className={"form-group row"}>
-              <label
-                className={"col-sm-2 col-form-label"}
-                htmlFor="organisation_name">
-                {t("Organisation")}
-              </label>
-
-              <div className="col-sm-10">
-                <input
-                  readOnly
-                  type="text"
-                  className={"form-control-plaintext readonly"}
-                  id="organisation_name"
-                  name="organisation_name"
-                  value={this.props.organisation.name}
-                />
-              </div>
-            </div>
-
-
-            {this.props.organisation.languages.map((lang) => (
-              <div className={"form-group row"} key={"name_div"+lang.code}>
-                <label
-                  className={"col-sm-2 col-form-label"} 
-                  htmlFor={"name_" + lang.code}>
-                  <span className="required-indicator">*</span>
-                  {isMultiLingual ? t(this.getFieldNameWithLanguage("Event Name", lang.description)) : t("Event Name")}
-                </label>
-
-                <div className="col-sm-10">
-                  <FormTextBox
-                    id={"name_" + lang.code}
-                    name={"name_" + lang.code}
-                    type="text"
-                    placeholder={isMultiLingual ? t(this.getFieldNameWithLanguage("Name of event", lang.description)) : t("Name of event")}
-                    required={true}
-                    onChange={e => this.updateEventTextField("name", e, lang.code)}
-                    value={updatedEvent.name[lang.code]}
-                  />
+      
+        return (
+          <div>
+            <div className="card">
+              <form>
+                <div className={"form-group row"}>
+                  <label
+                    className={"col-sm-2 col-form-label"}
+                    htmlFor="organisation_name">
+                    {t("Organisation")}
+                  </label>
+  
+                  <div className="col-sm-10">
+                    <input
+                      readOnly
+                      type="text"
+                      className={"form-control-plaintext readonly"}
+                      id="organisation_name"
+                      name="organisation_name"
+                      value={this.props.organisation.name}
+                    />
+                  </div>
                 </div>
-              </div>
-            ))}
-
-            <div className={"form-group row"}>
-              <label
-                className={"col-sm-2 col-form-label"}
-                htmlFor="event_type">
-                <span className="required-indicator">*</span>
-                {t("Event Type")}
-              </label>
-
-              <div className="col-sm-10">
-                <FormSelect
-                  id="event_type"
-                  name="event_type"
-                  defaultValue={updatedEvent.event_type || null}
-                  required={true}
-                  onChange={this.updateEventDropDown}
-                  options={[
-                    { value: "EVENT", label: t("Event") },
-                    { value: "AWARD", label: t("Award") },
-                    { value: "CALL", label: t("Call"),  },
-                    { value: "PROGRAMME", label: t("Programme") },
-                    { value: "JOURNAL", label: t("Journal") }
-                  ]}
-                />
-              </div>
-            </div>
-
-            <div className={"form-group row"}>
-              <label
-                className={"col-sm-2 col-form-label"}
-                htmlFor="travel_grant">
-                <span className="required-indicator">*</span>
-                {t("Awards Travel Grants")}
-              </label>
-
-              <div className="col-sm-10">
-                <FormSelect
-                  id="travel_grant"
-                  name="travel_grant"
-                  defaultValue={String(updatedEvent.travel_grant) || null}
-                  required={true}
-                  onChange={this.updateEventDropDown}
-                  options={[
-                    { value: "true", label: t("Yes") },
-                    { value: "false", label: t("No") }
-                  ]}
-                />
-              </div>
-            </div>
-
-            <div className={"form-group row"}>
-              <label 
-                className={"col-sm-2 col-form-label"}
-                htmlFor="key">
-                <span className="required-indicator">*</span>
-                {t("Event Key")}
-              </label>
-
-              <div className="col-sm-10">
-                <FormTextBox
-                  id="key"
-                  name="key"
-                  type="text"
-                  placeholder={t("Event key for URLs (e.g. indaba2023)")}
-                  required={true}
-                  onChange={e => this.updateEventTextField("key", e)}
-                  value={updatedEvent.key}
-                />
-              </div>
-            </div>
-
-            {this.props.organisation.languages.map((lang) => (
-              <div className={"form-group row"} key={"description_div"+lang.code}>
-                <label
-                  className={"col-sm-2 col-form-label"}
-                  htmlFor={"description_" + lang.code}>
-                  <span className="required-indicator">*</span>
-                  {isMultiLingual ? t(this.getFieldNameWithLanguage("Event Description", lang.description)) : t("Event Description")}
-                </label>
-
-                <div className="col-sm-10">
-                  <FormTextArea
-                    id={"description_" + lang.code}
-                    name={"description_" + lang.code}
-                    placeholder={isMultiLingual ? t(this.getFieldNameWithLanguage("Description of event", lang.description)) : t("Description of event")}
-                    required={true}
-                    rows={2}
-                    onChange={e => this.updateEventTextField("description", e, lang.code)}
-                    value={updatedEvent.description[lang.code]}
-                  />
+  
+                {this.props.organisation.languages.map((lang) => (
+                  <div className={"form-group row"} key={"name_div"+lang.code}>
+                    <label
+                      className={"col-sm-2 col-form-label"} 
+                      htmlFor={"name_" + lang.code}>
+                      <span className="required-indicator">*</span>
+                      {isMultiLingual ? t(this.getFieldNameWithLanguage("Event Name", lang.description)) : t("Event Name")}
+                    </label>
+                    <div className="col-sm-10">
+                      <FormTextBox
+                        id={"name_" + lang.code}
+                        name={"name_" + lang.code}
+                        type="text"
+                        placeholder={isMultiLingual ? t(this.getFieldNameWithLanguage("Name of event", lang.description)) : t("Name of event")}
+                        required={true}
+                        onChange={e => this.updateEventTextField("name", e, lang.code)}
+                        value={updatedEvent.name[lang.code]}
+                      />
+                    </div> 
+                  </div>
+                ))}
+  
+                <div className={"form-group row"}>
+                  <label
+                    className={"col-sm-2 col-form-label"}
+                    htmlFor="event_type">
+                    <span className="required-indicator">*</span>
+                    {t("Event Type")}
+                  </label>
+  
+                  <div className="col-sm-10">
+                    <FormSelect
+                      id="event_type"
+                      name="event_type"
+                      defaultValue={updatedEvent.event_type || null}
+                      required={true}
+                      onChange={this.updateEventDropDown}
+                      options={[
+                        { value: "EVENT", label: t("Event") },
+                        { value: "AWARD", label: t("Award") },
+                        { value: "CALL", label: t("Call"),  },
+                        { value: "PROGRAMME", label: t("Programme") },
+                        { value: "JOURNAL", label: t("Journal") }
+                      ]}
+                    />
+                  </div>
+                </div>
+  
+                <div className={"form-group row"}>
+                  <label
+                    className={"col-sm-2 col-form-label"}
+                    htmlFor="travel_grant">
+                    <span className="required-indicator">*</span>
+                    {t("Awards Travel Grants")}
+                  </label>
+  
+                  <div className="col-sm-10">
+                    <FormSelect
+                      id="travel_grant"
+                      name="travel_grant"
+                      defaultValue={String(updatedEvent.travel_grant) || null}
+                      required={true}
+                      onChange={this.updateEventDropDown}
+                      options={[
+                        { value: "true", label: t("Yes") },
+                        { value: "false", label: t("No") }
+                      ]}
+                    />
+                  </div>
+                </div>
+  
+                <div className={"form-group row"}>
+                  <label 
+                    className={"col-sm-2 col-form-label"}
+                    htmlFor="key">
+                    <span className="required-indicator">*</span>
+                    {t("Event Key")}
+                  </label>
+  
+                  <div className="col-sm-10">
+                    <FormTextBox
+                      id="key"
+                      name="key"
+                      type="text"
+                      placeholder={t("Event key for URLs (e.g. indaba2023)")}
+                      required={true}
+                      onChange={e => this.updateEventTextField("key", e)}
+                      value={updatedEvent.key}
+                    />
+                  </div>
+                </div>
+  
+                {this.props.organisation.languages.map((lang) => (
+                  <div className={"form-group row"} key={"description_div"+lang.code}>
+                    <label
+                      className={"col-sm-2 col-form-label"}
+                      htmlFor={"description_" + lang.code}>
+                      <span className="required-indicator">*</span>
+                      {isMultiLingual ? t(this.getFieldNameWithLanguage("Event Description", lang.description)) : t("Event Description")}
+                    </label>
+  
+                    <div className="col-sm-10">
+                      <FormTextArea
+                        id={"description_" + lang.code}
+                        name={"description_" + lang.code}
+                        placeholder={isMultiLingual ? t(this.getFieldNameWithLanguage("Description of event", lang.description)) : t("Description of event")}
+                        required={true}
+                        rows={2}
+                        onChange={e => this.updateEventTextField("description", e, lang.code)}
+                        value={updatedEvent.description[lang.code]}
+                      />
+                    </div>
+                  </div>
+                ))}
+  
+                <div className={"form-group row"}>
+                  <label className={"col-sm-2 col-form-label"} htmlFor="email_from">
+                    <span className="required-indicator">*</span>
+                    {t("Email From")}
+                  </label>
+  
+                  <div className="col-sm-10">
+                    <FormTextBox
+                      id="email_from"
+                      name="email_from"
+                      type="email"
+                      placeholder={t("Organisation email (e.g. indaba2023@deeplearningindaba.com)")}
+                      required={true}
+                      value={updatedEvent.email_from}
+                      onChange={e => this.updateEventTextField("email_from", e)}
+                      />
+                  </div>
+                </div>
+  
+                <div className={"form-group row"}>
+                  <label className={"col-sm-2 col-form-label"}
+                    htmlFor="url">
+                    <span className="required-indicator">*</span>
+                    {t("Event Website")}
+                  </label>
+  
+                  <div className="col-sm-10">
+                    <FormTextBox
+                      id="url"
+                      name="url"
+                      type="text"
+                      placeholder={t("Event website (e.g. www.deeplearningindaba.com)")}
+                      value={updatedEvent.url}
+                      required={true}
+                      onChange={e => this.updateEventTextField("url", e)}
+                      />
+                  </div>
+                </div>
+  
+                {updatedEvent.event_type && this.renderDatePickerTable()}
+  
+              </form>
+  
+              <hr></hr>
+  
+              <div className={"form-group row"}>
+                <div className={"col-sm-4 ml-md-auto"}>
+                  <Link to=".." className="btn btn-danger btn-lg btn-block">
+                    {t("Cancel")}
+                  </Link>
+                </div>
+                
+                <div className={"col-sm-4 "}>
+                  {isNewEvent ? (
+                    <button
+                      onClick={() => this.onClickCreate()}
+                      className="btn btn-success btn-lg btn-block"
+                      disabled={!allFieldsComplete}>
+                      {t("Create Event")}
+                    </button>
+                    ) :
+                    (
+                    <button
+                      onClick={() => this.onClickUpdate()}
+                      className="btn btn-success btn-lg btn-block"
+                      disabled={!allFieldsComplete}>
+                      {t("Update Event")}
+                    </button>
+                  )}
                 </div>
               </div>
-            ))}
-
-            <div className={"form-group row"}>
-              <label className={"col-sm-2 col-form-label"} htmlFor="email_from">
-                <span className="required-indicator">*</span>
-                {t("Email From")}
-              </label>
-
-              <div className="col-sm-10">
-                <FormTextBox
-                  id="email_from"
-                  name="email_from"
-                  type="email"
-                  placeholder={t("Organisation email (e.g. indaba2023@deeplearningindaba.com)")}
-                  required={true}
-                  value={updatedEvent.email_from}
-                  onChange={e => this.updateEventTextField("email_from", e)}
-                  />
-              </div>
-            </div>
-
-            <div className={"form-group row"}>
-              <label className={"col-sm-2 col-form-label"}
-                htmlFor="url">
-                <span className="required-indicator">*</span>
-                {t("Event Website")}
-              </label>
-
-              <div className="col-sm-10">
-                <FormTextBox
-                  id="url"
-                  name="url"
-                  type="text"
-                  placeholder={t("Event website (e.g. www.deeplearningindaba.com)")}
-                  value={updatedEvent.url}
-                  required={true}
-                  onChange={e => this.updateEventTextField("url", e)}
-                  />
+  
+              <div className={"form-group-row"}>
+                  {errors && showErrors && this.getErrorMessages(errors)}
               </div>
             </div>
-
-            {updatedEvent.event_type && this.renderDatePickerTable()}
-
-          </form>
-
-          <hr></hr>
-
-          <div className={"form-group row"}>
-            <div className={"col-sm-4 ml-md-auto"}>
-              <Link to=".." className="btn btn-danger btn-lg btn-block">
-                {t("Cancel")}
-              </Link>
-            </div>
-            
-            <div className={"col-sm-4 "}>
-              {isNewEvent ? (
-                <button
-                  onClick={() => this.onClickCreate()}
-                  className="btn btn-success btn-lg btn-block"
-                  disabled={!allFieldsComplete}>
-                  {t("Create Event")}
-                </button>
-                ) :
-                (
-                <button
-                  onClick={() => this.onClickUpdate()}
-                  className="btn btn-success btn-lg btn-block"
-                  disabled={!allFieldsComplete}>
-                  {t("Update Event")}
-                </button>
-              )}
-            </div>
-          </div>
-
-          <div className={"form-group-row"}>
-              {errors && showErrors && this.getErrorMessages(errors)}
           </div>
-        </div>
-      </div>
-    );
+        );
   }
 }
 
diff --git a/webapp/src/pages/eventHome/EventHome.js b/webapp/src/pages/eventHome/EventHome.js
index a63fec540..7a876d0c6 100755
--- a/webapp/src/pages/eventHome/EventHome.js
+++ b/webapp/src/pages/eventHome/EventHome.js
@@ -23,7 +23,7 @@ import Offer from "../offer";
 import OfferAdmin from "../offerAdmin";
 import { InvoiceAdminList } from "../invoices";
 import EventStatus from "../../components/EventStatus";
-import { isEventAdmin } from "../../utils/user";
+import { isEventAdmin, isEventResponseEditorOnly, isEventResponseViewerOnly} from "../../utils/user";
 import ResponseList from "../ResponseList/ResponseList";
 import ResponsePage from "../ResponsePage/ResponsePage";
 import ReviewDashboard from "../reviewDashboard";
@@ -48,7 +48,7 @@ class EventInfo extends Component {
       <div className="event-home">
         <h2>{event.description}</h2>
         <EventStatus longForm={true} event={event} />
-        {isEventAdmin(this.props.user, this.props.event) 
+        {isEventAdmin(this.props.user, this.props.event)
         && <EventStats event={this.props.event}/>}
       </div>
     );
@@ -127,159 +127,200 @@ class EventHome extends Component {
       );
     }
 
-    return (
-      <div>
-        <Route
-          exact
-          path={`${match.path}/`}
-          render={(props) => <EventInfo {...props} event={event} user={this.props.user}/>}
-        />
-        <Route
-          exact
-          path={`${match.path}/responseList`}
-          render={(props) => <ResponseList {...props} event={event} user={this.props.user}/>}
-        />
-        <Route
-          exact
-          path={`${match.path}/reviewDashboard`}
-          render={(props) => <ReviewDashboard {...props} event={event} user={this.props.user}/>}
-        />
-        <Route
-          exact
-          path={`${match.path}/invitationLetter`}
-          render={(props) => <InvitedLetter {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/apply`}
-          render={(props) => <Application {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/apply/new`}
-          render={(props) => <Application {...props} event={event} journalSubmissionFlag={true} /> }
-        />
-        <Route
-        exact
-          path={`${match.path}/eventAttendance`}
-          render={(props) => <Attendance {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/eventConfig`}
-          render={(props) => <EventConfig {...props} event={event} organisation={this.props.organisation} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/tagConfig`}
-          render={(props) => <TagConfig {...props} event={event} organisation={this.props.organisation} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/eventStats`}
-          render={(props) => <EventStats {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/reviewAssignment`}
-          render={(props) => <ReviewAssignment {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/reviewHistory`}
-          render={(props) => <ReviewHistory {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/invitedGuests`}
-          render={(props) => <InvitedGuests {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/invitedGuests/create`}
-          render={(props) => <CreateInvitedGuests {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/review`}
-          render={(props) => <Review {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/review/:id`}
-          render={(props) => <Review {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/reviewlist`}
-          render={(props) => <ReviewList {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/profile-list`}
-          render={(props) => <ProfileList {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/offer`}
-          render={(props) => <Offer {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/registration`}
-          render={(props) => <Registration {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/viewprofile/:id`}
-          render={(props) => <ViewProfile {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/registrationAdmin`}
-          render={(props) => <RegistrationAdmin {...props} event={event} />}
-        />
+    if (!isEventResponseViewerOnly(this.props.user, this.props.event) && !isEventResponseEditorOnly(this.props.user, this.props.event)) {
+      return (
+        <div>
+          <Route
+            exact
+            path={`${match.path}/`}
+            render={(props) => <EventInfo {...props} event={event} user={this.props.user}/>}
+          />
+          <Route
+            exact
+            path={`${match.path}/responseList`}
+            render={(props) => <ResponseList {...props} event={event} user={this.props.user}/>}
+          />
+          <Route
+            exact
+            path={`${match.path}/reviewDashboard`}
+            render={(props) => <ReviewDashboard {...props} event={event} user={this.props.user}/>}
+          />
+          <Route
+            exact
+            path={`${match.path}/invitationLetter`}
+            render={(props) => <InvitedLetter {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/apply`}
+            render={(props) => <Application {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/apply/new`}
+            render={(props) => <Application {...props} event={event} journalSubmissionFlag={true} /> }
+          />
           <Route
           exact
-          path={`${match.path}/responsePage/:id`}
-          render={(props) => <ResponsePage {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/applicationform`}
-          render={(props) => <ApplicationFormSetting
-            {...props}
-            event={event}
-            languages={organisation && organisation.languages}
-            />}
-        />
-        <Route
-          exact
-          path={`${match.path}/reviewForm`}
-          render={(props) => <ReviewForm
-            {...props}
-            event={event}
-            languages={organisation && organisation.languages}
-            />}
-        />
-        <Route
-          exact
-          path={`${match.path}/invoices-admin`}
-          render={(props) => <InvoiceAdminList {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/indemnity`}
-          render={(props) => <Indemnity {...props} event={event} />}
-        />
-        <Route
-          exact
-          path={`${match.path}/offerAdmin`}
-          render={(props) => <OfferAdmin {...props} event={event} organisation={this.props.organisation}/>}
-        />
+            path={`${match.path}/eventAttendance`}
+            render={(props) => <Attendance {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/eventConfig`}
+            render={(props) => <EventConfig {...props} event={event} organisation={this.props.organisation} user={this.props.user}/>}
+          />
+          <Route
+            exact
+            path={`${match.path}/tagConfig`}
+            render={(props) => <TagConfig {...props} event={event} organisation={this.props.organisation} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/eventStats`}
+            render={(props) => <EventStats {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/reviewAssignment`}
+            render={(props) => <ReviewAssignment {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/reviewHistory`}
+            render={(props) => <ReviewHistory {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/invitedGuests`}
+            render={(props) => <InvitedGuests {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/invitedGuests/create`}
+            render={(props) => <CreateInvitedGuests {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/review`}
+            render={(props) => <Review {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/review/:id`}
+            render={(props) => <Review {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/reviewlist`}
+            render={(props) => <ReviewList {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/profile-list`}
+            render={(props) => <ProfileList {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/offer`}
+            render={(props) => <Offer {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/registration`}
+            render={(props) => <Registration {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/viewprofile/:id`}
+            render={(props) => <ViewProfile {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/registrationAdmin`}
+            render={(props) => <RegistrationAdmin {...props} event={event} />}
+          />
+            <Route
+            exact
+            path={`${match.path}/responsePage/:id`}
+            render={(props) => <ResponsePage {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/applicationform`}
+            render={(props) => <ApplicationFormSetting
+              {...props}
+              event={event}
+              languages={organisation && organisation.languages}
+              />}
+          />
+          <Route
+            exact
+            path={`${match.path}/reviewForm`}
+            render={(props) => <ReviewForm
+              {...props}
+              event={event}
+              languages={organisation && organisation.languages}
+              />}
+          />
+          <Route
+            exact
+            path={`${match.path}/indemnity`}
+            render={(props) => <Indemnity {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/offerAdmin`}
+            render={(props) => <OfferAdmin {...props} event={event} organisation={this.props.organisation}/>}
+          />
 
-      </div>
-    );
+        </div>
+      );
+    }
+    else{
+      return (
+        <div>
+          <Route
+            exact
+            path={`${match.path}/responsePage/:id`}
+            render={(props) => <ResponsePage {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/applicationform`}
+            render={(props) => <ApplicationFormSetting
+              {...props}
+              event={event}
+              languages={organisation && organisation.languages}
+              />}
+          />
+          <Route
+            exact
+            path={`${match.path}/reviewForm`}
+            render={(props) => <ReviewForm
+              {...props}
+              event={event}
+              languages={organisation && organisation.languages}
+              />}
+          />
+          <Route
+            exact
+            path={`${match.path}/invoices-admin`}
+            render={(props) => <InvoiceAdminList {...props} event={event} />}
+          />
+          <Route
+            exact
+            path={`${match.path}/indemnity`}
+            render={(props) => <Indemnity {...props} event={event} />}
+          />
+          <Route
+              exact
+              path={`${match.path}/`}
+              render={(props) => <ResponseList {...props} event={event} user={this.props.user}/>}
+          />
+        </div>
+      );
+    }
   }
 }
 
diff --git a/webapp/src/pages/home/Home.js b/webapp/src/pages/home/Home.js
index c22485e0d..790f10900 100644
--- a/webapp/src/pages/home/Home.js
+++ b/webapp/src/pages/home/Home.js
@@ -5,6 +5,7 @@ import { eventService } from "../../services/events/events.service";
 import { organisationService } from "../../services/organisation/organisation.service";
 import EventStatus from "../../components/EventStatus";
 import { withTranslation } from 'react-i18next';
+import { isEventResponseEditorOnly, isEventResponseViewerOnly, isEventReadOnly } from '../../utils/user';
 
 class Home extends Component {
 
@@ -15,6 +16,7 @@ class Home extends Component {
             awards: null,
             journals: null,
             organisation: null,
+            event: null,
             errors: []
         }
     }
@@ -37,7 +39,8 @@ class Home extends Component {
                         journals: response.events.filter(e => e.event_type === 'JOURNAL'),
                         calls: response.events.filter(e => e.event_type === "CALL"  && (e.is_event_opening || e.is_event_open)),
                         programmes: response.events.filter(e => e.event_type === "PROGRAMME"  && (e.is_event_opening || e.is_event_open)),
-                        attended: response.events.filter(e => !e.is_event_opening)
+                        attended: response.events.filter(e => !e.is_event_opening),
+                        event: response.events
                     });
                 }
             });
@@ -63,12 +66,15 @@ class Home extends Component {
     }
 
     statusDisplay(e) {
-        if (e.event_type === 'JOURNAL') {
-           return <EventStatus longForm={false} submissionLink={true} event={e} />;
+        if (!isEventResponseViewerOnly(this.props.user, e) &&
+        !isEventResponseEditorOnly(this.props.user, e)) {
+            if (e.event_type === 'JOURNAL') {
+            return <EventStatus longForm={false} submissionLink={true} event={e} />;
+            }
+            else {
+                return <EventStatus longForm={false} event={e} />;
+            }
         }
-        else {
-            return <EventStatus longForm={false} event={e} />;
-         }
     }
 
     dateDisplay = (e) => {
@@ -114,7 +120,7 @@ class Home extends Component {
         if (this.state.organisation && this.state.organisation.name === "AI4D Africa" && this.props.i18n.language === "fr") {
             logo = "ai4d_logo_fr.png";
         }
-
+        
         return (
             <div>
                 <div>
@@ -131,8 +137,10 @@ class Home extends Component {
                     </div>
                 }
 
-                {this.props.user && this.props.user.is_admin &&
-                    <a href="../eventConfig" id="new_event_button" name="new_event_button" className="btn btn-primary">{this.props.t("Create New Event")}</a>
+                {!isEventResponseEditorOnly(this.props.user, this.state.event) &&
+                !isEventResponseViewerOnly(this.props.user, this.state.event) &&
+                this.props.user && this.props.user.is_admin && 
+                <a href="../eventConfig" id="new_event_button" name="new_event_button" className="btn btn-primary">{this.props.t("Create New Event")}</a>
                 }
 
                 {this.renderEventTable(this.state.upcomingEvents, "Upcoming Events")}
diff --git a/webapp/src/utils/user.js b/webapp/src/utils/user.js
index 1939905b2..fa86217e1 100644
--- a/webapp/src/utils/user.js
+++ b/webapp/src/utils/user.js
@@ -11,6 +11,30 @@ export const isEventAdmin = (user, event) => {
     );
   };
 
+  export const isEventResponseViewerOnly = (user, event) => {
+    if (!user) {
+      return false;
+    }
+    return (
+      (user.roles &&
+        user.roles.some(
+          r => r.role === "response-viewer" && event && r.event_id === event.id
+        ))
+    );
+  };
+
+  export const isEventResponseEditorOnly = (user, event) => {
+    if (!user) {
+      return false;
+    }
+    return (
+      (user.roles &&
+        user.roles.some(
+          r => r.role === "response-editor" && event && r.event_id === event.id
+        ))
+    );
+  };
+
   export const isRegistrationAdmin = (user, event) => {
     if (!user) {
       return false;