diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
index 350c4accb90..e94a7b2ae0d 100644
--- a/app/renderer/components/main/main.js
+++ b/app/renderer/components/main/main.js
@@ -67,6 +67,7 @@ const cx = require('../../../../js/lib/classSet')
 const eventUtil = require('../../../../js/lib/eventUtil')
 const siteSettings = require('../../../../js/state/siteSettings')
 const debounce = require('../../../../js/lib/debounce')
+const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
 const {getCurrentWindowId, isMaximized, isFocused, isFullScreen} = require('../../currentWindow')
 const {isDarwin, isWindows} = require('../../../common/lib/platformUtil')
 
@@ -687,7 +688,7 @@ class Main extends ImmutableComponent {
     const btbMode = getSetting(settings.BOOKMARKS_TOOLBAR_MODE)
     const showFavicon = (btbMode === bookmarksToolbarMode.TEXT_AND_FAVICONS || btbMode === bookmarksToolbarMode.FAVICONS_ONLY)
     const showOnlyFavicon = btbMode === bookmarksToolbarMode.FAVICONS_ONLY
-    const siteInfoIsVisible = this.props.windowState.getIn(['ui', 'siteInfo', 'isVisible'])
+    const siteInfoIsVisible = this.props.windowState.getIn(['ui', 'siteInfo', 'isVisible']) && !isSourceAboutUrl(activeFrame.get('location'))
     const braveryPanelIsVisible = shieldState.braveShieldsEnabled(activeFrame) &&
       this.props.windowState.get('braveryPanelDetail')
     const clearBrowsingDataPanelIsVisible = this.props.windowState.getIn(['ui', 'isClearBrowsingDataPanelVisible'])
@@ -737,8 +738,7 @@ class Main extends ImmutableComponent {
         <Navigator />
         {
           siteInfoIsVisible
-          ? <SiteInfo frameProps={activeFrame}
-            onHide={this.onHideSiteInfo} />
+          ? <SiteInfo />
           : null
         }
         {
diff --git a/app/renderer/components/main/siteInfo.js b/app/renderer/components/main/siteInfo.js
index 545d4367bc6..ae16ba4de62 100644
--- a/app/renderer/components/main/siteInfo.js
+++ b/app/renderer/components/main/siteInfo.js
@@ -3,235 +3,250 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const PropTypes = require('prop-types')
+const Immutable = require('immutable')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
 const webviewActions = require('../../../../js/actions/webviewActions')
+const windowActions = require('../../../../js/actions/windowActions')
+
+// State
+const tabState = require('../../../common/state/tabState')
 
 // Utils
 const cx = require('../../../../js/lib/classSet')
 const {isPotentialPhishingUrl} = require('../../../../js/lib/urlutil')
-const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
 const siteUtil = require('../../../../js/state/siteUtil')
 const platformUtil = require('../../../common/lib/platformUtil')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 // Styles
 const globalStyles = require('../styles/global')
 const commonStyles = require('../styles/commonStyles')
 
-class SiteInfo extends ImmutableComponent {
-  constructor () {
-    super()
+class SiteInfo extends React.Component {
+  constructor (props) {
+    super(props)
     this.onAllowRunInsecureContent = this.onAllowRunInsecureContent.bind(this)
     this.onDenyRunInsecureContent = this.onDenyRunInsecureContent.bind(this)
     this.onViewCertificate = this.onViewCertificate.bind(this)
   }
+
   onAllowRunInsecureContent () {
-    appActions.changeSiteSetting(siteUtil.getOrigin(this.location),
-      'runInsecureContent', true, this.isPrivate)
-    appActions.loadURLRequested(this.props.frameProps.get('tabId'), this.location)
-    this.props.onHide()
+    appActions.changeSiteSetting(siteUtil.getOrigin(this.props.location),
+      'runInsecureContent', true, this.props.isPrivate)
+    appActions.loadURLRequested(this.props.activeTabId, this.props.location)
+    this.onHide()
   }
+
   onDenyRunInsecureContent () {
-    appActions.removeSiteSetting(siteUtil.getOrigin(this.location),
-      'runInsecureContent', this.isPrivate)
-    appActions.loadURLRequested(this.props.frameProps.get('tabId'), this.location)
-    this.props.onHide()
+    appActions.removeSiteSetting(siteUtil.getOrigin(this.props.location),
+      'runInsecureContent', this.props.isPrivate)
+    appActions.loadURLRequested(this.props.activeTabId, this.props.location)
+    this.onHide()
   }
+
   onViewCertificate () {
-    this.props.onHide()
+    this.onHide()
     webviewActions.showCertificate()
   }
-  get isExtendedValidation () {
-    return this.props.frameProps.getIn(['security', 'isExtendedValidation'])
-  }
-  get isSecure () {
-    return this.props.frameProps.getIn(['security', 'isSecure'])
-  }
-  get isPrivate () {
-    return this.props.frameProps.getIn(['isPrivate'])
-  }
-  get runInsecureContent () {
-    return this.props.frameProps.getIn(['security', 'runInsecureContent'])
-  }
-  get isBlockedRunInsecureContent () {
-    return this.props.frameProps.getIn(['security', 'blockedRunInsecureContent'])
-  }
-  get partitionNumber () {
-    return this.props.frameProps.getIn(['partitionNumber'])
-  }
-  get location () {
-    return this.props.frameProps.getIn(['location'])
-  }
-  get maybePhishingLocation () {
-    return isPotentialPhishingUrl(this.props.frameProps.getIn(['location']))
-  }
-  render () {
-    if (isSourceAboutUrl(this.location)) {
-      return null
-    }
 
-    // Figure out the partition info display
-    let l10nArgs = {
-      partitionNumber: this.partitionNumber
-    }
+  onHide () {
+    windowActions.setSiteInfoVisible(false)
+  }
 
-    let secureIcon
-    if (this.isSecure === true && !this.runInsecureContent) {
+  get secureIcon () {
+    if (this.props.isFullySecured) {
       // fully secure
-      secureIcon =
-        <div className={css(styles.secureIcon__wrapper)}>
-          <span className={cx({
-            fa: true,
-            'fa-lock': true,
-            [css(styles.secureIcon__fa)]: true,
-            [css(styles.secureIcon__extendedValidation)]: this.isExtendedValidation
-          })} />
-          <span className={css(styles.secureIcon__label)}
-            data-test-id='secureConnection'
-            data-l10n-id='secureConnection'
-          />
-        </div>
-    } else if (this.isSecure === 1 && !this.runInsecureContent) {
+      return <div className={css(styles.secureIcon__wrapper)}>
+        <span className={cx({
+          fa: true,
+          'fa-lock': true,
+          [css(styles.secureIcon__fa)]: true,
+          [css(styles.secureIcon__extendedValidation)]: this.props.isExtendedValidation
+        })} />
+        <span
+          className={css(styles.secureIcon__label)}
+          data-test-id='secureConnection'
+          data-l10n-id='secureConnection'
+        />
+      </div>
+    } else if (this.props.isMixedContent) {
       // passive mixed content loaded
-      secureIcon =
-        <div className={css(styles.secureIcon__wrapper)}>
-          <span className={cx({
-            fa: true,
-            'fa-unlock': true,
-            [css(styles.secureIcon__fa)]: true
-          })} />
-          <span className={css(styles.secureIcon__label)}
-            data-test-id='partiallySecureConnection'
-            data-l10n-id='partiallySecureConnection'
-          />
-        </div>
+      return <div className={css(styles.secureIcon__wrapper)}>
+        <span className={cx({
+          fa: true,
+          'fa-unlock': true,
+          [css(styles.secureIcon__fa)]: true
+        })} />
+        <span
+          className={css(styles.secureIcon__label)}
+          data-test-id='partiallySecureConnection'
+          data-l10n-id='partiallySecureConnection'
+        />
+      </div>
     } else {
       // insecure
-      secureIcon =
-        <div className={css(styles.secureIcon__wrapper)}>
-          <span className={cx({
-            fa: true,
-            'fa-unlock': true,
-            [css(styles.secureIcon__fa)]: true
-          })} />
-          <span className={css(styles.secureIcon__label)}
-            data-test-id='insecureConnection'
-            data-l10n-id='insecureConnection'
-          />
-        </div>
+      return <div className={css(styles.secureIcon__wrapper)}>
+        <span className={cx({
+          fa: true,
+          'fa-unlock': true,
+          [css(styles.secureIcon__fa)]: true
+        })} />
+        <span
+          className={css(styles.secureIcon__label)}
+          data-test-id='insecureConnection'
+          data-l10n-id='insecureConnection'
+        />
+      </div>
     }
+  }
 
-    let partitionInfo
-    if (this.partitionNumber) {
-      partitionInfo =
-        <div className={css(styles.secureIcon__wrapper)}>
-          <span className={cx({
-            fa: true,
-            'fa-user': true,
-            [css(styles.secureIcon__fa)]: true
-          })} />
-          <span className={css(styles.secureIcon__label)}
-            data-test-id='partitionNumber'
-            data-l10n-args={JSON.stringify(l10nArgs)}
-            data-l10n-id='sessionInfo'
-          />
-        </div>
+  get partitionInfo () {
+    if (this.props.partitionNumber) {
+      // Figure out the partition info display
+      let l10nArgs = {
+        partitionNumber: this.props.partitionNumber
+      }
+
+      return <div className={css(styles.secureIcon__wrapper)}>
+        <span className={cx({
+          fa: true,
+          'fa-user': true,
+          [css(styles.secureIcon__fa)]: true
+        })} />
+        <span
+          className={css(styles.secureIcon__label)}
+          data-test-id='partitionNumber'
+          data-l10n-args={JSON.stringify(l10nArgs)}
+          data-l10n-id='sessionInfo'
+        />
+      </div>
     }
 
-    let connectionInfo = null
-    let viewCertificateButton = null
+    return null
+  }
 
+  get viewCertificateButton () {
+    // TODO(Anthony): Hide it until muon support linux
+    if (!platformUtil.isLinux()) {
+      return <div className={css(styles.flexJustifyEnd, styles.viewCertificateButton__wrapper)}>
+        <Button
+          l10nId='viewCertificate'
+          className='primaryButton'
+          testId='viewCertificate'
+          onClick={this.onViewCertificate}
+        />
+      </div>
+    }
+
+    return null
+  }
+
+  get connectionInfo () {
     const certErrl10nArgs = {
-      site: this.location
+      site: this.props.location
     }
 
-    // TODO(Anthony): Hide it until muon support linux
-    if (!platformUtil.isLinux()) {
-      viewCertificateButton =
+    if (this.props.maybePhishingLocation) {
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-l10n-id='phishingConnectionInfo' data-test-id='phishingConnectionInfo' />
+      </div>
+    } else if (this.props.isBlockedRunInsecureContent) {
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-test-id='runInsecureContentWarning' data-l10n-id='runInsecureContentWarning' />
         <div className={css(styles.flexJustifyEnd, styles.viewCertificateButton__wrapper)}>
-          <Button l10nId='viewCertificate'
+          <Button
+            l10nId='allowRunInsecureContent'
+            className='whiteButton'
+            testId='allowRunInsecureContentButton'
+            onClick={this.onAllowRunInsecureContent}
+          />
+          <Button
+            l10nId='dismissAllowRunInsecureContent'
             className='primaryButton'
-            testId='viewCertificate'
-            onClick={this.onViewCertificate}
+            testId='dismissAllowRunInsecureContentButton'
+            onClick={this.onHide}
           />
         </div>
-    }
-
-    if (this.maybePhishingLocation) {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-l10n-id='phishingConnectionInfo' data-test-id='phishingConnectionInfo' />
-        </div>
-    } else if (this.isBlockedRunInsecureContent) {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-test-id='runInsecureContentWarning' data-l10n-id='runInsecureContentWarning' />
-          <div className={css(styles.flexJustifyEnd, styles.viewCertificateButton__wrapper)}>
-            <Button l10nId='allowRunInsecureContent'
-              className='whiteButton'
-              testId='allowRunInsecureContentButton'
-              onClick={this.onAllowRunInsecureContent}
-            />
-            <Button l10nId='dismissAllowRunInsecureContent'
-              className='primaryButton'
-              testId='dismissAllowRunInsecureContentButton'
-              onClick={this.props.onHide}
-            />
-          </div>
-          {viewCertificateButton}
-        </div>
-    } else if (this.runInsecureContent) {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-test-id='denyRunInsecureContentWarning' data-l10n-id='denyRunInsecureContentWarning' />
-          <div className={css(styles.flexJustifyEnd, styles.viewCertificateButton__wrapper)}>
-            <Button l10nId='dismissDenyRunInsecureContent'
-              className='whiteButton'
-              testId='dismissDenyRunInsecureContentButton'
-              onClick={this.props.onHide}
-            />
-            <Button l10nId='denyRunInsecureContent'
-              className='primaryButton'
-              testId='denyRunInsecureContentButton'
-              onClick={this.onDenyRunInsecureContent}
-            />
-          </div>
-          {viewCertificateButton}
-        </div>
-    } else if (this.isSecure === true) {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-l10n-id='secureConnectionInfo' />
-          {viewCertificateButton}
-        </div>
-    } else if (this.isSecure === 1) {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-l10n-id='partiallySecureConnectionInfo' />
-          {viewCertificateButton}
-        </div>
-    } else if (this.isSecure === 2) {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-l10n-id='certErrConnectionInfo' data-l10n-args={JSON.stringify(certErrl10nArgs)} />
-          {viewCertificateButton}
+        {this.viewCertificateButton}
+      </div>
+    } else if (this.props.runInsecureContent) {
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-test-id='denyRunInsecureContentWarning' data-l10n-id='denyRunInsecureContentWarning' />
+        <div className={css(styles.flexJustifyEnd, styles.viewCertificateButton__wrapper)}>
+          <Button
+            l10nId='dismissDenyRunInsecureContent'
+            className='whiteButton'
+            testId='dismissDenyRunInsecureContentButton'
+            onClick={this.onHide}
+          />
+          <Button
+            l10nId='denyRunInsecureContent'
+            className='primaryButton'
+            testId='denyRunInsecureContentButton'
+            onClick={this.onDenyRunInsecureContent}
+          />
         </div>
+        {this.viewCertificateButton}
+      </div>
+    } else if (this.props.secureConnection) {
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-l10n-id='secureConnectionInfo' />
+        {this.viewCertificateButton}
+      </div>
+    } else if (this.props.partiallySecureConnection) {
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-l10n-id='partiallySecureConnectionInfo' />
+        {this.viewCertificateButton}
+      </div>
+    } else if (this.props.certErrorConnection) {
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-l10n-id='certErrConnectionInfo' data-l10n-args={JSON.stringify(certErrl10nArgs)} />
+        {this.viewCertificateButton}
+      </div>
     } else {
-      connectionInfo =
-        <div className={css(styles.connectionInfo__wrapper)}>
-          <div data-l10n-id='insecureConnectionInfo' />
-        </div>
+      return <div className={css(styles.connectionInfo__wrapper)}>
+        <div data-l10n-id='insecureConnectionInfo' />
+      </div>
     }
+  }
 
-    return <Dialog testId='siteInfoDialog' onHide={this.props.onHide} className='siteInfo' isClickDismiss>
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const isSecure = activeFrame.getIn(['security', 'isSecure'])
+    const runInsecureContent = activeFrame.getIn(['security', 'runInsecureContent'])
+
+    const props = {}
+    // used in renderer
+    props.isFullySecured = isSecure === true && !runInsecureContent
+    props.isMixedContent = isSecure === 1 && !runInsecureContent
+    props.isExtendedValidation = activeFrame.getIn(['security', 'isExtendedValidation'])
+    props.partitionNumber = activeFrame.get('partitionNumber')
+    props.location = activeFrame.get('location')
+    props.maybePhishingLocation = isPotentialPhishingUrl(props.location)
+    props.isBlockedRunInsecureContent = activeFrame.getIn(['security', 'blockedRunInsecureContent'])
+    props.runInsecureContent = activeFrame.getIn(['security', 'runInsecureContent'])
+    props.secureConnection = isSecure === true
+    props.partiallySecureConnection = isSecure === 1
+    props.certErrorConnection = isSecure === 2
+
+    // used in other function
+    props.isPrivate = activeFrame.get('isPrivate')
+    props.activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+
+    return props
+  }
+
+  render () {
+    return <Dialog testId='siteInfoDialog' onHide={this.onHide} className='siteInfo' isClickDismiss>
       <div onClick={(e) => e.stopPropagation()}
         className={cx({
           [css(commonStyles.flyoutDialog)]: true,
@@ -239,23 +254,20 @@ class SiteInfo extends ImmutableComponent {
           [css(styles.siteInfo__wrapper__large)]: (this.isBlockedRunInsecureContent || this.runInsecureContent)
         })}>
         {
-          secureIcon
+          this.secureIcon
         }
         {
-          partitionInfo
+          this.partitionInfo
         }
         {
-          connectionInfo
+          this.connectionInfo
         }
       </div>
     </Dialog>
   }
 }
 
-SiteInfo.propTypes = {
-  frameProps: PropTypes.object,
-  onHide: PropTypes.func
-}
+module.exports = ReduxComponent.connect(SiteInfo)
 
 const styles = StyleSheet.create({
   flexJustifyEnd: {
@@ -302,5 +314,3 @@ const styles = StyleSheet.create({
     maxWidth: '500px'
   }
 })
-
-module.exports = SiteInfo