diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index 0ea1793ca..f93e6f600 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -30,8 +30,6 @@
   }
 
   &__metafox-logo {
-    cursor: pointer;
-
     &--icon {
       height: 32px;
       @media screen and (min-width: $break-large) {
@@ -72,8 +70,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    cursor: pointer;
     flex: 0 0 auto;
+
+    &--clickable {
+      cursor: pointer;
+    }
   }
 
   &__account-menu-container {
diff --git a/ui/app/components/ui/metafox-logo/metafox-logo.component.js b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
index 041e354ef..4b1509c6e 100644
--- a/ui/app/components/ui/metafox-logo/metafox-logo.component.js
+++ b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 export default class MetaFoxLogo extends PureComponent {
   static propTypes = {
@@ -7,23 +8,30 @@ export default class MetaFoxLogo extends PureComponent {
     unsetIconHeight: PropTypes.bool,
   }
 
+  static defaultProps = {
+    onClick: undefined,
+  }
+
   render () {
-    const iconProps = this.props.unsetIconHeight ? {} : { height: 42, width: 42 }
+    const { onClick, unsetIconHeight } = this.props
+    const iconProps = unsetIconHeight ? {} : { height: 42, width: 42 }
 
     return (
       <div
-        onClick={this.props.onClick}
-        className="app-header__logo-container"
+        onClick={onClick}
+        className={classnames('app-header__logo-container', {
+          'app-header__logo-container--clickable': Boolean(onClick),
+        })}
       >
         <img
           height={30}
           src="/images/logo/metamask-logo-horizontal.svg"
-          className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+          className={classnames('app-header__metafox-logo', 'app-header__metafox-logo--horizontal')}
         />
         <img
           {...iconProps}
           src="/images/logo/metamask-fox.svg"
-          className="app-header__metafox-logo app-header__metafox-logo--icon"
+          className={classnames('app-header__metafox-logo', 'app-header__metafox-logo--icon')}
         />
       </div>
     )
diff --git a/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js b/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js
index 512866c38..68499b9ae 100644
--- a/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import MetaFoxLogo from '../../../components/ui/metafox-logo'
-import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 
 export default class PermissionsConnectHeader extends Component {
   static propTypes = {
@@ -14,7 +13,6 @@ export default class PermissionsConnectHeader extends Component {
       <div className="permissions-connect-header">
         <MetaFoxLogo
           unsetIconHeight
-          onClick={() => history.push(DEFAULT_ROUTE)}
         />
         <div className="permissions-connect-header__page-count">
           { `${page}/2` }