diff --git a/console/src/components/ApiExplorer/ApiExplorer.scss b/console/src/components/ApiExplorer/ApiExplorer.scss
index c352724c6d5b6..e8e273b0f3613 100644
--- a/console/src/components/ApiExplorer/ApiExplorer.scss
+++ b/console/src/components/ApiExplorer/ApiExplorer.scss
@@ -257,6 +257,16 @@
     cursor: pointer;
     padding-top: 8px;
     font-size: 16px;
+    float: right;
+    display: inline-block;
+  }
+  .showAccessKey{
+    cursor: pointer;
+    padding-top: 8px;
+    padding-right: 8px;
+    font-size: 16px;
+    float: left;
+    display: inline-block;
   }
   .apiRequestWrapper
   {
@@ -569,6 +579,7 @@
           border-top: 0;
           // padding: 5px;
           padding: 0px 5px;
+          min-width: 50px;
           .responseTableInput
           {
             background-color: transparent;
diff --git a/console/src/components/ApiExplorer/ApiRequest.js b/console/src/components/ApiExplorer/ApiRequest.js
index 1fcf5f285ae40..19cdc7b069012 100644
--- a/console/src/components/ApiExplorer/ApiRequest.js
+++ b/console/src/components/ApiExplorer/ApiRequest.js
@@ -24,6 +24,7 @@ class ApiRequest extends Component {
   constructor(props) {
     super(props);
     this.state = {};
+    this.state.accessKeyVisible = false;
     this.state.bodyAllowedMethods = ['POST'];
     this.state.tabIndex = 0;
     this.timer = null;
@@ -71,6 +72,10 @@ class ApiRequest extends Component {
     this.props.dispatch(removeRequestHeader(index));
   }
 
+  onShowAccessKeyClicked() {
+    this.setState({ accessKeyVisible: !this.state.accessKeyVisible });
+  }
+
   onNewHeaderKeyChanged(e) {
     this.handleTypingTimeouts();
     this.props.dispatch(addRequestHeader(e.target.value, ''));
@@ -267,11 +272,24 @@ class ApiRequest extends Component {
               onChange={this.onHeaderValueChanged.bind(this)}
               onFocus={this.handleFocus}
               onBlur={this.handleBlur}
-              type="text"
+              type={
+                header.key === 'X-Hasura-Access-Key' &&
+                !this.state.accessKeyVisible
+                  ? 'password'
+                  : 'text'
+              }
             />
           </td>
           {header.isNewHeader ? null : (
             <td>
+              {header.key === 'X-Hasura-Access-Key' ? (
+                <i
+                  className={styles.showAccessKey + ' fa fa-eye'}
+                  data-header-id={i}
+                  aria-hidden="true"
+                  onClick={this.onShowAccessKeyClicked.bind(this)}
+                />
+              ) : null}
               <i
                 className={styles.closeHeader + ' fa fa-times'}
                 data-header-id={i}