diff --git a/ui/app/components/app/connected-accounts-permissions/connected-accounts-permissions.component.js b/ui/app/components/app/connected-accounts-permissions/connected-accounts-permissions.component.js
index 45f886912..6ccb5b16a 100644
--- a/ui/app/components/app/connected-accounts-permissions/connected-accounts-permissions.component.js
+++ b/ui/app/components/app/connected-accounts-permissions/connected-accounts-permissions.component.js
@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
+import CheckBox from '../../ui/check-box'
 
 export default class ConnectedAccountsPermissions extends PureComponent {
   static contextTypes = {
@@ -57,7 +58,8 @@ export default class ConnectedAccountsPermissions extends PureComponent {
           <ul className="connected-accounts-permissions__list">
             {permissions.map(({ key: permissionName }) => (
               <li key={permissionName} className="connected-accounts-permissions__list-item">
-                <i className="fas fa-check-square" />{t(permissionName)}
+                <CheckBox checked disabled id={permissionName} className="connected-accounts-permissions__checkbox" />
+                <label htmlFor={permissionName}>{t(permissionName)}</label>
               </li>
             ))}
           </ul>
diff --git a/ui/app/components/app/connected-accounts-permissions/index.scss b/ui/app/components/app/connected-accounts-permissions/index.scss
index 838e727dc..712d0b431 100644
--- a/ui/app/components/app/connected-accounts-permissions/index.scss
+++ b/ui/app/components/app/connected-accounts-permissions/index.scss
@@ -41,13 +41,11 @@
 
   &__list-item {
     display: flex;
+  }
 
-    i {
-      display: block;
-      padding-right: 8px;
-      font-size: 18px;
-      color: $Grey-800;
-    }
+  & &__checkbox {
+    margin: 0 8px 0 0;
+    font-size: 18px;
   }
 
   &__list-container {
diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss
index 9a17655ec..576147aed 100644
--- a/ui/app/components/app/permission-page-container/index.scss
+++ b/ui/app/components/app/permission-page-container/index.scss
@@ -62,11 +62,6 @@
       display: flex;
       align-items: center;
 
-      i {
-        font-size: 1.4rem;
-        color: $Grey-200;
-      }
-
       label {
         font-size: 14px;
         margin-left: 16px;
@@ -75,6 +70,11 @@
     }
   }
 
+  & &__checkbox {
+    font-size: 1.4rem;
+    margin: 0;
+  }
+
   &__content-container {
     display: flex;
     flex-direction: column;
diff --git a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
index c15e93a87..268c973bf 100644
--- a/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
+++ b/ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import PermissionsConnectHeader from '../../permissions-connect-header'
 import Tooltip from '../../../ui/tooltip-v2'
+import CheckBox from '../../../ui/check-box'
 
 export default class PermissionPageContainerContent extends PureComponent {
 
@@ -33,6 +34,8 @@ export default class PermissionPageContainerContent extends PureComponent {
       const description = t(permissionName)
       // don't allow deselecting eth_accounts
       const isDisabled = permissionName === 'eth_accounts'
+      const isChecked = Boolean(selectedPermissions[permissionName])
+      const title = isChecked ? t('permissionCheckedIconDescription') : t('permissionUncheckedIconDescription')
 
       return (
         <div
@@ -44,11 +47,14 @@ export default class PermissionPageContainerContent extends PureComponent {
             }
           }}
         >
-          { selectedPermissions[permissionName]
-            ? <i title={t('permissionCheckedIconDescription')} className="fa fa-check-square" />
-            : <i title={t('permissionUncheckedIconDescription')} className="fa fa-square" />
-          }
-          <label>{description}</label>
+          <CheckBox
+            disabled={isDisabled}
+            id={permissionName}
+            className="permission-approval-container__checkbox"
+            checked={isChecked}
+            title={title}
+          />
+          <label htmlFor={permissionName}>{description}</label>
         </div>
       )
     })
diff --git a/ui/app/components/ui/check-box/check-box.component.js b/ui/app/components/ui/check-box/check-box.component.js
index 5d062e0e8..b1c62433a 100644
--- a/ui/app/components/ui/check-box/check-box.component.js
+++ b/ui/app/components/ui/check-box/check-box.component.js
@@ -10,7 +10,7 @@ const CHECKBOX_STATE = {
 
 export const { CHECKED, INDETERMINATE, UNCHECKED } = CHECKBOX_STATE
 
-const CheckBox = ({ className, disabled, id, onClick, checked }) => {
+const CheckBox = ({ className, disabled, id, onClick, checked, title }) => {
   if (typeof checked === 'boolean') {
     checked = checked
       ? CHECKBOX_STATE.CHECKED
@@ -41,6 +41,7 @@ const CheckBox = ({ className, disabled, id, onClick, checked }) => {
       }
       readOnly
       ref={ref}
+      title={title}
       type="checkbox"
     />
   )
@@ -52,6 +53,7 @@ CheckBox.propTypes = {
   id: PropTypes.string,
   onClick: PropTypes.func,
   checked: PropTypes.oneOf([...Object.keys(CHECKBOX_STATE), true, false]).isRequired,
+  title: PropTypes.string,
 }
 
 CheckBox.defaultProps = {
diff --git a/ui/app/components/ui/check-box/index.scss b/ui/app/components/ui/check-box/index.scss
index 40273973d..446ce1683 100644
--- a/ui/app/components/ui/check-box/index.scss
+++ b/ui/app/components/ui/check-box/index.scss
@@ -18,6 +18,5 @@
   &:disabled {
     color: $Grey-100;
     cursor: not-allowed;
-    opacity: 0.5;
   }
 }