diff --git a/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx b/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
index 30eb204a6..61355c38b 100644
--- a/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
+++ b/client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx
@@ -27,7 +27,8 @@ class ConnectConfigs extends Form {
     plugin: {},
     config: {},
     selectedType: '',
-    display: ''
+    display: '',
+    roles: JSON.parse(sessionStorage.getItem('roles'))
   };
 
   schema = {};
@@ -138,6 +139,7 @@ class ConnectConfigs extends Form {
     let title = '';
     let { formData } = this.state;
     const errors = [];
+    const roles = this.state.roles || {};
     const errorMessage = this.validateProperty({ name: plugin.name, value: formData[plugin.name] });
     if (errorMessage) {
       errors[plugin.name] = errorMessage;
@@ -199,7 +201,7 @@ class ConnectConfigs extends Form {
             className="form-control"
             value={formData[plugin.name]}
             name={plugin.name}
-            disabled={plugin.name === 'name' || plugin.name === 'connector.class'}
+            disabled={plugin.name === 'name' || plugin.name === 'connector.class' || !(roles.connect && roles.connect['connect/update']) }
             placeholder={plugin.defaultValue > 0 ? plugin.defaultValue : ''}
             onChange={({ currentTarget: input }) => {
               let { formData } = this.state;
@@ -260,6 +262,7 @@ class ConnectConfigs extends Form {
     group.forEach(element => {
       const rows = this.renderTableRows(element);
       const errors = [];
+      const roles = this.state.roles || {};
 
       groupDisplay.push(<tr>{rows}</tr>);
       if (element.name === 'transforms') {
@@ -304,6 +307,7 @@ class ConnectConfigs extends Form {
                   this.setState({ formData });
                 }}
                 name="UNIQUE_ID_OF_DIV"
+                readOnly={!(roles.connect && roles.connect['connect/update'])}
                 editorProps={{ $blockScrolling: true }}
                 style={{ width: '100%', minHeight: '25vh' }}
               />
@@ -368,7 +372,7 @@ class ConnectConfigs extends Form {
   render() {
     const { plugin, display } = this.state;
     const { name } = this.state.formData;
-
+    const roles = this.state.roles || {};
     return (
       <div>
         <form
@@ -410,16 +414,18 @@ class ConnectConfigs extends Form {
                   <tbody>{display}</tbody>
                 </table>
               </div>
-              <div style={{ left: 0, width: '100%' }} className="khq-submit">
-                <button
-                  type={'submit'}
-                  className="btn btn-primary"
-                  style={{ marginRight: '2%' }}
-                  disabled={this.validate()}
-                >
-                  Update
-                </button>
-              </div>
+              {roles.connect && roles.connect['connect/update'] && (
+                <div style={{ left: 0, width: '100%' }} className="khq-submit">
+                  <button
+                    type={'submit'}
+                    className="btn btn-primary"
+                    style={{ marginRight: '2%' }}
+                    disabled={this.validate()}
+                  >
+                    Update
+                  </button>
+                </div>
+              )}
             </React.Fragment>
           )}
         </form>
diff --git a/client/src/containers/Connect/ConnectList/ConnectList.jsx b/client/src/containers/Connect/ConnectList/ConnectList.jsx
index c24321176..45c5f0b45 100644
--- a/client/src/containers/Connect/ConnectList/ConnectList.jsx
+++ b/client/src/containers/Connect/ConnectList/ConnectList.jsx
@@ -111,7 +111,7 @@ class ConnectList extends Root {
     const roles = this.state.roles || {};
     let actions = [];
 
-    if (roles.connect && roles.connect['connect/update']) {
+    if (roles.connect && roles.connect['connect/read']) {
       actions.push(constants.TABLE_DETAILS);
     }
     if (roles.connect && roles.connect['connect/delete']) {
diff --git a/client/src/utils/Routes.js b/client/src/utils/Routes.js
index da6dc77f9..65132e046 100644
--- a/client/src/utils/Routes.js
+++ b/client/src/utils/Routes.js
@@ -240,7 +240,7 @@ class Routes extends Root {
               {roles && roles.connect && roles.connect['connect/read'] && (
                 <Route exact path="/ui/:clusterId/connect/:connectId" component={ConnectList} />
               )}
-              {roles && roles.connect && roles.connect['connect/update'] && (
+              {roles && roles.connect && roles.connect['connect/read'] && (
                 <Route
                   exact
                   path="/ui/:clusterId/connect/:connectId/definition/:definitionId/:tab?"