diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index 532b56e81..c6fa6d08a 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -29,8 +29,8 @@ exports[`App Header should match snapshot 1`] = `
           />
         </button>
       </div>
-      <div
-        class="app-header__logo-container app-header__logo-container--clickable"
+      <button
+        class="box app-header__logo-container app-header__logo-container--clickable box--flex-direction-row box--background-color-transparent"
         data-testid="app-header-logo"
       >
         <svg
@@ -220,7 +220,7 @@ exports[`App Header should match snapshot 1`] = `
           class="app-header__metafox-logo--icon"
           src="./images/logo/metamask-fox.svg"
         />
-      </div>
+      </button>
     </div>
   </div>
 </div>
diff --git a/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
index 43910d1d9..05928e417 100644
--- a/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
+++ b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
@@ -2,8 +2,8 @@
 
 exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
 <div>
-  <div
-    class="app-header__logo-container"
+  <button
+    class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
     data-testid="app-header-logo"
   >
     <div />
@@ -21,14 +21,14 @@ exports[`MetaFoxLogo does match snapshot with custodyImgSrc 1`] = `
       src="/test"
       width="42"
     />
-  </div>
+  </button>
 </div>
 `;
 
 exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is true 1`] = `
 <div>
-  <div
-    class="app-header__logo-container"
+  <button
+    class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
     data-testid="app-header-logo"
   >
     <div />
@@ -37,14 +37,14 @@ exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is
       class="app-header__metafox-logo--icon"
       src="./images/logo/metamask-fox.svg"
     />
-  </div>
+  </button>
 </div>
 `;
 
 exports[`MetaFoxLogo should match snapshot with img width and height default set to 42 1`] = `
 <div>
-  <div
-    class="app-header__logo-container"
+  <button
+    class="box app-header__logo-container box--flex-direction-row box--background-color-transparent"
     data-testid="app-header-logo"
   >
     <div />
@@ -55,6 +55,6 @@ exports[`MetaFoxLogo should match snapshot with img width and height default set
       src="./images/logo/metamask-fox.svg"
       width="42"
     />
-  </div>
+  </button>
 </div>
 `;
diff --git a/ui/components/ui/metafox-logo/metafox-logo.component.js b/ui/components/ui/metafox-logo/metafox-logo.component.js
index 721ae1780..25dafd5d8 100644
--- a/ui/components/ui/metafox-logo/metafox-logo.component.js
+++ b/ui/components/ui/metafox-logo/metafox-logo.component.js
@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Box from '../box/box';
+import { BackgroundColor } from '../../../helpers/constants/design-system';
 import MetaFoxHorizontalLogo from './horizontal-logo';
 
 export default class MetaFoxLogo extends PureComponent {
@@ -88,13 +90,15 @@ export default class MetaFoxLogo extends PureComponent {
     ///: END:ONLY_INCLUDE_IN
 
     return (
-      <div
+      <Box
+        as="button"
         onClick={onClick}
         className={classnames({
           'app-header__logo-container': !isOnboarding,
           'onboarding-app-header__logo-container': isOnboarding,
           'app-header__logo-container--clickable': Boolean(onClick),
         })}
+        backgroundColor={BackgroundColor.transparent}
         data-testid="app-header-logo"
       >
         {renderHorizontalLogo()}
@@ -115,7 +119,7 @@ export default class MetaFoxLogo extends PureComponent {
             this.renderCustodyIcon(iconProps, custodyImgSrc)
           ///: END:ONLY_INCLUDE_IN
         }
-      </div>
+      </Box>
     );
   }
 }
diff --git a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
index c024c8317..87b8c7a0f 100644
--- a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
+++ b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap
@@ -8,8 +8,8 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
     <div
       class="onboarding-app-header__contents"
     >
-      <div
-        class="onboarding-app-header__logo-container"
+      <button
+        class="box onboarding-app-header__logo-container box--flex-direction-row box--background-color-transparent"
         data-testid="app-header-logo"
       >
         <svg
@@ -199,7 +199,7 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
           class="onboarding-app-header__metafox-logo--icon"
           src="./images/logo/metamask-fox.svg"
         />
-      </div>
+      </button>
       <div
         class="dropdown"
       >