diff --git a/ui/components/ui/metafox-logo/horizontal-logo.js b/ui/components/ui/metafox-logo/horizontal-logo.js
index a70a99fdf9b0..543d1a4b0f21 100644
--- a/ui/components/ui/metafox-logo/horizontal-logo.js
+++ b/ui/components/ui/metafox-logo/horizontal-logo.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 const LOGO_WIDTH = 162;
@@ -9,7 +9,22 @@ const FLASK_PILL_TEXT = 'var(--color-overlay-inverse)';
 const BETA_PILL_BACKGROUND = 'var(--color-primary-default)';
 const BETA_PIL_TEXT = 'var(--color-primary-inverse)';
 
-export default function MetaFoxHorizontalLogo({ theme = 'light', className }) {
+export default function MetaFoxHorizontalLogo({
+  theme: themeProps,
+  className,
+}) {
+  const [theme, setTheme] = useState(themeProps);
+
+  useEffect(() => {
+    setTheme(document.documentElement.getAttribute('data-theme'));
+  }, []);
+
+  useEffect(() => {
+    if (themeProps !== undefined) {
+      setTheme(themeProps);
+    }
+  }, [themeProps]);
+
   const fill = theme === 'dark' ? 'rgb(255,255,255)' : 'rgb(22,22,22)';
 
   switch (process.env.METAMASK_BUILD_TYPE) {
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index 0f7d40106530..df11210169f6 100644
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@@ -155,10 +155,10 @@ export default class UnlockPage extends Component {
     const { t } = this.context;
     const { onRestore } = this.props;
 
-    let needHelpText = t('needHelpLinkText');
+    let needHelpText = t('appNameMmi');
 
-    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-    needHelpText = t('appNameMmi');
+    ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
+    needHelpText = t('needHelpLinkText');
     ///: END:ONLY_INCLUDE_IN
 
     return (