diff --git a/config.js b/config.js
index c824e8527..2620d4863 100644
--- a/config.js
+++ b/config.js
@@ -25,9 +25,10 @@ const config = {
   // LOGO
   LOGO_TITLE: process.env.LOGO_TITLE,
   FAVICON: process.env.FAVICON,
-  LOGO_URL: process.env.LOGO_URL,
-  LOGO_TEXT_LIGHT_URL: process.env.LOGO_TEXT_LIGHT_URL,
-  LOGO_TEXT_DARK_URL: process.env.LOGO_TEXT_DARK_URL,
+  LOGO: process.env.LOGO,
+  LOGO_TEXT_LIGHT: process.env.LOGO_TEXT_LIGHT,
+  LOGO_TEXT_DARK: process.env.LOGO_TEXT_DARK,
+  AVATAR_DEFAULT: process.env.AVATAR_DEFAULT,
   // OG
   OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX,
   OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE,
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index feca6bcc3..7b961664c 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -15,6 +15,7 @@ import { useIsMobile } from 'effects/use-screensize';
 import NotificationBubble from 'component/notificationBubble';
 import NotificationHeaderButton from 'component/notificationHeaderButton';
 import ChannelThumbnail from 'component/channelThumbnail';
+import Logo from 'component/logo';
 // @if TARGET='app'
 import { remote } from 'electron';
 import { IS_MAC } from 'component/app/view';
@@ -258,7 +259,6 @@ const Header = (props: Props) => {
                 // @if TARGET='web'
                 label={LOGO_TITLE} // eslint-disable-line
                 // @endif
-                icon={ICONS.LBRY}
                 onClick={() => {
                   if (history.location.pathname === '/') window.location.reload();
                 }}
@@ -268,8 +268,9 @@ const Header = (props: Props) => {
                 }}
                 // @endif
                 {...homeButtonNavigationProps}
-              />
-
+              >
+                <Logo />
+              </Button>
               {!authHeader && (
                 <div className="header__center">
                   {/* @if TARGET='app' */}
diff --git a/ui/component/logo/index.js b/ui/component/logo/index.js
new file mode 100644
index 000000000..6d0f96f4b
--- /dev/null
+++ b/ui/component/logo/index.js
@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import Logo from './view';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { SETTINGS } from 'lbry-redux';
+
+const select = (state, props) => ({
+  currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
+});
+
+export default connect(select)(Logo);
diff --git a/ui/component/logo/view.jsx b/ui/component/logo/view.jsx
new file mode 100644
index 000000000..7d1ddd30a
--- /dev/null
+++ b/ui/component/logo/view.jsx
@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import * as ICONS from 'constants/icons';
+import { LOGO, LOGO_TEXT_LIGHT, LOGO_TEXT_DARK } from 'config';
+import Icon from 'component/common/icon';
+
+type Props = {
+  type: string,
+  currentTheme: string,
+};
+
+export default function Logo(props: Props) {
+  const { type, currentTheme } = props;
+  if (type === 'small') {
+    return LOGO ? <img src={LOGO} /> : <Icon icon={ICONS.LBRY} />;
+  } else {
+    if (LOGO_TEXT_LIGHT && LOGO_TEXT_DARK) {
+      return (
+        <>
+          {/*<img src={LOGO} className="mobile-only header__odysee" />*/}
+          <img src={currentTheme === 'light' ? LOGO_TEXT_DARK : LOGO_TEXT_LIGHT} className="header__odysee" />
+        </>
+      );
+    } else {
+      return <Icon icon={ICONS.LBRY} />;
+    }
+  }
+}
+//mobile-hidden