diff --git a/__tests__/shared/components/Header/__mocks__/profile-state.json b/__tests__/shared/components/Header/__mocks__/profile-state.json
new file mode 100644
index 0000000000..95ef452099
--- /dev/null
+++ b/__tests__/shared/components/Header/__mocks__/profile-state.json
@@ -0,0 +1,6 @@
+{
+  "description": "devxxxxxx",
+  "email": "liwanxiang@gmail.com",
+  "handle": "huanner",
+  "photoURL": "https://topcoder-dev-media.s3.amazonaws.com/member/profile/huanner-1552562543506.png"
+}
diff --git a/__tests__/shared/components/Header/__snapshots__/index.jsx.snap b/__tests__/shared/components/Header/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..311045f5f8
--- /dev/null
+++ b/__tests__/shared/components/Header/__snapshots__/index.jsx.snap
@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div>
+  <TopNav
+    loggedIn={true}
+    logo={
+      <Logo
+        height="20"
+        viewBox="0 0 54 20"
+        width="54"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    }
+    menu={
+      Array [
+        Object {
+          "href": "https://www.topcoder-dev.com",
+          "id": "business",
+          "title": "BUSINESS",
+        },
+        Object {
+          "id": "community",
+          "secondaryMenuForGuest": Array [
+            Object {
+              "href": "https://www.topcoder-dev.com/about",
+              "title": "Overview",
+            },
+            Object {
+              "href": "https://www.topcoder-dev.com/how-it-works/faqs/",
+              "title": "How It Works",
+            },
+            Object {
+              "href": "/community/learn",
+              "title": "Tracks",
+            },
+            Object {
+              "href": "https://www.topcoder-dev.com/about/why-crowdsourcing/",
+              "title": "Why Join",
+            },
+          ],
+          "secondaryMenuForLoggedInUser": Array [
+            Object {
+              "href": "/my-dashboard",
+              "title": "Dashboard",
+            },
+            Object {
+              "href": "/members/willFilledByUserName",
+              "id": "myprofile",
+              "title": "My Profile",
+            },
+            Object {
+              "href": "https://community.topcoder-dev.com/PactsMemberServlet?module=PaymentHistory&full_list=false",
+              "title": "Payments",
+            },
+          ],
+          "subMenu": Array [
+            Object {
+              "subMenu": Array [
+                Object {
+                  "href": "/challenges",
+                  "title": "All Challenges",
+                },
+                Object {
+                  "href": "https://arena.topcoder-dev.com",
+                  "title": "Competitive Programming",
+                },
+              ],
+              "title": "Compete",
+            },
+            Object {
+              "subMenu": Array [
+                Object {
+                  "href": "/community/competitive-programming",
+                  "title": "Competitive Programming",
+                },
+                Object {
+                  "href": "/community/data-science",
+                  "title": "Data Science",
+                },
+                Object {
+                  "href": "/community/design",
+                  "title": "Design",
+                },
+                Object {
+                  "href": "/community/development",
+                  "title": "Development",
+                },
+                Object {
+                  "href": "/community/qa",
+                  "title": "QA",
+                },
+              ],
+              "title": "Tracks",
+            },
+            Object {
+              "subMenu": Array [
+                Object {
+                  "href": "https://www.topcoder-dev.com/tco",
+                  "title": "TCO",
+                },
+                Object {
+                  "href": "/community/member-programs",
+                  "title": "Programs",
+                },
+                Object {
+                  "href": "https://apps.topcoder-dev.com/forums",
+                  "title": "Forums",
+                },
+                Object {
+                  "href": "/community/statistics",
+                  "title": "Statistics",
+                },
+                Object {
+                  "href": "/community/events",
+                  "title": "Events",
+                },
+                Object {
+                  "href": "https://www.topcoder-dev.com/blog",
+                  "title": "Blog",
+                },
+              ],
+              "title": "Explore",
+            },
+          ],
+          "title": "COMMUNITY",
+        },
+      ]
+    }
+    onChangeLevel1Id={[Function]}
+    openMore={true}
+    profileHandle="huanner"
+    rightMenu={
+      <LoginNav
+        accountMenu={
+          Array [
+            Object {
+              "href": "/settings/profile",
+              "title": "Settings",
+            },
+            Object {
+              "separator": true,
+            },
+            Object {
+              "href": "https://help.topcoder-dev.com/",
+              "title": "Help",
+            },
+            Object {
+              "href": "https://www.topcoder.com/about/",
+              "title": "About Topcoder",
+            },
+            Object {
+              "href": "https://www.topcoder-dev.com/logout",
+              "title": "Log Out",
+            },
+          ]
+        }
+        authURLs={
+          Object {
+            "href": "https://accounts.topcoder-dev.com/member/registration?utm_source=community-app-main",
+            "location": "https://accounts.topcoder-dev.com/member?retUrl=%S&utm_source=community-app-main",
+          }
+        }
+        loggedIn={true}
+        notificationButtonState="none"
+        notifications={Array []}
+        onMenuOpen={[Function]}
+        onSwitch={[Function]}
+        profile={
+          Object {
+            "description": "devxxxxxx",
+            "email": "liwanxiang@gmail.com",
+            "handle": "huanner",
+            "photoURL": "https://d1aahxkjiobka8.cloudfront.net/avatar/https%3A%2F%2Ftopcoder-dev-media.s3.amazonaws.com%2Fmember%2Fprofile%2Fhuanner-1552562543506.png?size=32",
+          }
+        }
+        showNotification={false}
+        switchText={
+          Object {
+            "href": "https://connect.topcoder-dev.com",
+            "title": "Switch to BUSINESS",
+          }
+        }
+      />
+    }
+    setOpenMore={[Function]}
+    theme="light"
+  />
+</div>
+`;
diff --git a/__tests__/shared/components/Header/index.jsx b/__tests__/shared/components/Header/index.jsx
new file mode 100644
index 0000000000..fde9dd1cf5
--- /dev/null
+++ b/__tests__/shared/components/Header/index.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Header from 'components/Header';
+
+import profileState from './__mocks__/profile-state.json';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<Header
+    profile={profileState}
+  />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/TopcoderHeader/Auth.jsx b/__tests__/shared/components/TopcoderHeader/Auth.jsx
deleted file mode 100644
index bfa7747b0a..0000000000
--- a/__tests__/shared/components/TopcoderHeader/Auth.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Auth from 'components/TopcoderHeader/Auth';
-import React from 'react';
-import Rnd from 'react-test-renderer/shallow';
-
-const rnd = new Rnd();
-
-test('Snapshot match', () => {
-  rnd.render((
-    <Auth />
-  ));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-  rnd.render((
-    <Auth column />
-  ));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/TopcoderHeader/__snapshots__/Auth.jsx.snap b/__tests__/shared/components/TopcoderHeader/__snapshots__/Auth.jsx.snap
deleted file mode 100644
index 44801f1196..0000000000
--- a/__tests__/shared/components/TopcoderHeader/__snapshots__/Auth.jsx.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Snapshot match 1`] = `
-<div
-  className="src-shared-components-TopcoderHeader-Auth-___style__auth___3X0_r"
->
-  <a
-    className="tc-btn-sm tc-btn-primary"
-    href="http://accounts.topcoder-dev.com/member/registration?utm_source=community-app-main"
-    role="button"
-  >
-    Join
-  </a>
-  <a
-    className="tc-btn-sm tc-btn-default"
-    href="http://accounts.topcoder-dev.com/member?utm_source=community-app-main"
-    onClick={[Function]}
-    role="button"
-  >
-    Log In
-  </a>
-</div>
-`;
-
-exports[`Snapshot match 2`] = `
-<div
-  className="column src-shared-components-TopcoderHeader-Auth-___style__auth___3X0_r"
->
-  <a
-    className="tc-btn-sm tc-btn-primary"
-    href="http://accounts.topcoder-dev.com/member/registration?utm_source=community-app-main"
-    role="button"
-  >
-    Join
-  </a>
-  <a
-    className="tc-btn-sm tc-btn-default"
-    href="http://accounts.topcoder-dev.com/member?utm_source=community-app-main"
-    onClick={[Function]}
-    role="button"
-  >
-    Log In
-  </a>
-</div>
-`;
diff --git a/__tests__/shared/components/TopcoderHeader/__snapshots__/index.jsx.snap b/__tests__/shared/components/TopcoderHeader/__snapshots__/index.jsx.snap
deleted file mode 100644
index 546376cf1c..0000000000
--- a/__tests__/shared/components/TopcoderHeader/__snapshots__/index.jsx.snap
+++ /dev/null
@@ -1,991 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Default render 1`] = `
-<div
-  className="src-shared-components-TopcoderHeader-___style__header___LwYWf"
-  onMouseLeave={[Function]}
-  role="banner"
->
-  <div
-    className="src-shared-components-TopcoderHeader-___style__main-desktop-header___oqm_l"
-  >
-    <a
-      aria-label="Topcoder Logo link to Topcoder Homepage"
-      className="src-shared-components-TopcoderHeader-___style__logo___2WLJ0"
-      href="https://www.topcoder-dev.com"
-    >
-      <LogoTopcoderWithName
-        height={53}
-        title="Topcoder Logo link to Topcoder Homepage"
-        viewBox="0 0 135 21"
-        width={135}
-        xmlns="http://www.w3.org/2000/svg"
-      />
-    </a>
-    <ul
-      className="src-shared-components-TopcoderHeader-___style__main-menu___1pz4L"
-      role="navigation"
-    >
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Compete"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          role="link"
-          tabIndex={0}
-        >
-          Compete
-        </span>
-      </li>
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Tracks"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <Link
-          to="https://www.topcoder-dev.com/community/learn"
-        >
-          Tracks
-        </Link>
-      </li>
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Community"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          role="link"
-          tabIndex={0}
-        >
-          Community
-        </span>
-      </li>
-    </ul>
-    <div
-      className="src-shared-components-TopcoderHeader-___style__right-menu___34OkD"
-    >
-      <span
-        className="src-shared-components-TopcoderHeader-___style__auth-align___29jCN"
-      >
-        <Auth
-          column={false}
-        />
-      </span>
-      <div
-        aria-label="Find members by username or skill"
-        className="src-shared-components-TopcoderHeader-___style__search-icon___3w5nA"
-        data-menu="search"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-        role="button"
-        tabIndex={0}
-      >
-        <MagnifyingGlass
-          height="18"
-          viewBox="0 0 18 18"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </div>
-    </div>
-  </div>
-  <SubMenu
-    closeMenu={[Function]}
-    currentSubMenuTitle=""
-    menu={null}
-    trigger={null}
-  />
-  <div
-    className="closed src-shared-components-TopcoderHeader-___style__search-field___2VMzu"
-    onMouseLeave={[Function]}
-    role="search"
-  >
-    <input
-      aria-label="Find members by username or skill"
-      onBlur={[Function]}
-      onKeyPress={[Function]}
-      placeholder="Find members by username or skill"
-    />
-  </div>
-  <Header
-    close={[Function]}
-    mainMenu={
-      Array [
-        Object {
-          "items": Array [
-            Object {
-              "icon": <IconNavRocket
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "/challenges",
-              "title": "All Challenges",
-            },
-            Object {
-              "icon": <IconNavCP
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://arena.topcoder-dev.com",
-              "title": "Competitive Programming",
-            },
-          ],
-          "title": "Compete",
-        },
-        Object {
-          "items": Array [
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookCP
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/competitive-programming",
-              "title": "Competitive Programming",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookData
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/data-science/",
-              "title": "Data Science",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookDesign
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/design",
-              "title": "Design",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBoolDevelop
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/development",
-              "title": "Development",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBoolDevelop
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/qa",
-              "title": "QA",
-            },
-          ],
-          "title": "Tracks",
-          "url": "https://www.topcoder-dev.com/community/learn",
-        },
-        Object {
-          "items": Array [
-            Object {
-              "enforceA": true,
-              "icon": <IconNavTcoGeneric
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder.com/tco",
-              "title": "TCO",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavPrograms
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/member-programs",
-              "title": "Programs",
-            },
-            Object {
-              "icon": <IconNavForums
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://apps.topcoder-dev.com/forums",
-              "title": "Forums",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavStatistics
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/statistics",
-              "title": "Statistics",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavEvents
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/events",
-              "title": "Events",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBlog
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/blog",
-              "title": "Blog",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavThrive
-                height="29"
-                viewBox="0 0 32 29"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/thrive",
-              "title": "Thrive",
-            },
-          ],
-          "title": "Community",
-        },
-      ]
-    }
-    open={[Function]}
-    opened={false}
-    profile={null}
-    userMenu={null}
-  />
-</div>
-`;
-
-exports[`Render with open menu 1`] = `
-<div
-  className="src-shared-components-TopcoderHeader-___style__header___LwYWf"
-  onMouseLeave={[Function]}
-  role="banner"
->
-  <div
-    className="src-shared-components-TopcoderHeader-___style__main-desktop-header___oqm_l"
-  >
-    <a
-      aria-label="Topcoder Logo link to Topcoder Homepage"
-      className="src-shared-components-TopcoderHeader-___style__logo___2WLJ0"
-      href="https://www.topcoder-dev.com"
-    >
-      <LogoTopcoderWithName
-        height={53}
-        title="Topcoder Logo link to Topcoder Homepage"
-        viewBox="0 0 135 21"
-        width={135}
-        xmlns="http://www.w3.org/2000/svg"
-      />
-    </a>
-    <ul
-      className="src-shared-components-TopcoderHeader-___style__main-menu___1pz4L"
-      role="navigation"
-    >
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6 src-shared-components-TopcoderHeader-___style__opened___1WPVI src-shared-components-TopcoderHeader-___style__current___1Hk7o"
-        data-menu="Compete"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          role="link"
-          tabIndex={0}
-        >
-          Compete
-        </span>
-      </li>
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Tracks"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <Link
-          to="https://www.topcoder-dev.com/community/learn"
-        >
-          Tracks
-        </Link>
-      </li>
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Community"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          role="link"
-          tabIndex={0}
-        >
-          Community
-        </span>
-      </li>
-    </ul>
-    <div
-      className="src-shared-components-TopcoderHeader-___style__right-menu___34OkD"
-    >
-      <span
-        className="src-shared-components-TopcoderHeader-___style__auth-align___29jCN"
-      >
-        <Auth
-          column={false}
-        />
-      </span>
-      <div
-        aria-label="Find members by username or skill"
-        className="src-shared-components-TopcoderHeader-___style__search-icon___3w5nA"
-        data-menu="search"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-        role="button"
-        tabIndex={0}
-      >
-        <MagnifyingGlass
-          height="18"
-          viewBox="0 0 18 18"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </div>
-    </div>
-  </div>
-  <SubMenu
-    closeMenu={[Function]}
-    currentSubMenuTitle="All Challenges"
-    menu={
-      Object {
-        "items": Array [
-          Object {
-            "icon": <div />,
-            "link": "/link",
-            "title": "Title",
-          },
-        ],
-        "title": "Compete",
-      }
-    }
-    trigger={null}
-  />
-  <div
-    className="closed src-shared-components-TopcoderHeader-___style__search-field___2VMzu"
-    onMouseLeave={[Function]}
-    role="search"
-  >
-    <input
-      aria-label="Find members by username or skill"
-      onBlur={[Function]}
-      onKeyPress={[Function]}
-      placeholder="Find members by username or skill"
-    />
-  </div>
-  <Header
-    close={[Function]}
-    mainMenu={
-      Array [
-        Object {
-          "items": Array [
-            Object {
-              "icon": <IconNavRocket
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "/challenges",
-              "title": "All Challenges",
-            },
-            Object {
-              "icon": <IconNavCP
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://arena.topcoder-dev.com",
-              "title": "Competitive Programming",
-            },
-          ],
-          "title": "Compete",
-        },
-        Object {
-          "items": Array [
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookCP
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/competitive-programming",
-              "title": "Competitive Programming",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookData
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/data-science/",
-              "title": "Data Science",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookDesign
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/design",
-              "title": "Design",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBoolDevelop
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/development",
-              "title": "Development",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBoolDevelop
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/qa",
-              "title": "QA",
-            },
-          ],
-          "title": "Tracks",
-          "url": "https://www.topcoder-dev.com/community/learn",
-        },
-        Object {
-          "items": Array [
-            Object {
-              "enforceA": true,
-              "icon": <IconNavTcoGeneric
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder.com/tco",
-              "title": "TCO",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavPrograms
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/member-programs",
-              "title": "Programs",
-            },
-            Object {
-              "icon": <IconNavForums
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://apps.topcoder-dev.com/forums",
-              "title": "Forums",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavStatistics
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/statistics",
-              "title": "Statistics",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavEvents
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/events",
-              "title": "Events",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBlog
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/blog",
-              "title": "Blog",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavThrive
-                height="29"
-                viewBox="0 0 32 29"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/thrive",
-              "title": "Thrive",
-            },
-          ],
-          "title": "Community",
-        },
-      ]
-    }
-    open={[Function]}
-    opened={false}
-    profile={null}
-    userMenu={null}
-  />
-</div>
-`;
-
-exports[`Render with specified profile 1`] = `
-<div
-  className="src-shared-components-TopcoderHeader-___style__header___LwYWf"
-  onMouseLeave={[Function]}
-  role="banner"
->
-  <div
-    className="src-shared-components-TopcoderHeader-___style__main-desktop-header___oqm_l"
-  >
-    <a
-      aria-label="Topcoder Logo link to Topcoder Homepage"
-      className="src-shared-components-TopcoderHeader-___style__logo___2WLJ0"
-      href="https://www.topcoder-dev.com"
-    >
-      <LogoTopcoderWithName
-        height={53}
-        title="Topcoder Logo link to Topcoder Homepage"
-        viewBox="0 0 135 21"
-        width={135}
-        xmlns="http://www.w3.org/2000/svg"
-      />
-    </a>
-    <ul
-      className="src-shared-components-TopcoderHeader-___style__main-menu___1pz4L"
-      role="navigation"
-    >
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Compete"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          role="link"
-          tabIndex={0}
-        >
-          Compete
-        </span>
-      </li>
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Tracks"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <Link
-          to="https://www.topcoder-dev.com/community/learn"
-        >
-          Tracks
-        </Link>
-      </li>
-      <li
-        className="src-shared-components-TopcoderHeader-___style__main-menu-item___2KIu6"
-        data-menu="Community"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-      >
-        <span
-          role="link"
-          tabIndex={0}
-        >
-          Community
-        </span>
-      </li>
-    </ul>
-    <div
-      className="src-shared-components-TopcoderHeader-___style__right-menu___34OkD"
-    >
-      <div
-        className="src-shared-components-TopcoderHeader-___style__user-menu___3CMgb"
-        data-menu="userMenu"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-        role="link"
-        tabIndex={0}
-      >
-        <div
-          className="src-shared-components-TopcoderHeader-___style__user-menu-handle___r6kbg"
-          style={
-            Object {
-              "color": "#555555",
-            }
-          }
-        />
-        <span>
-          <div
-            className="src-shared-components-TopcoderHeader-___style__avatar___3BqbY"
-          >
-            <ThemedAvatar
-              composeAdhocTheme="deeply"
-              composeContextTheme="softly"
-              mapThemrProps={[Function]}
-              themePriority="adhoc-context-default"
-            />
-          </div>
-        </span>
-      </div>
-      <div
-        aria-label="Find members by username or skill"
-        className="opened src-shared-components-TopcoderHeader-___style__search-icon___3w5nA"
-        data-menu="search"
-        onBlur={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onTouchStart={[Function]}
-        role="button"
-        tabIndex={0}
-      >
-        <MagnifyingGlass
-          height="18"
-          viewBox="0 0 18 18"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </div>
-    </div>
-  </div>
-  <SubMenu
-    closeMenu={[Function]}
-    currentSubMenuTitle=""
-    menu={null}
-    trigger={null}
-  />
-  <div
-    className="opened src-shared-components-TopcoderHeader-___style__search-field___2VMzu"
-    onMouseLeave={[Function]}
-    role="search"
-  >
-    <input
-      aria-label="Find members by username or skill"
-      onBlur={[Function]}
-      onKeyPress={[Function]}
-      placeholder="Find members by username or skill"
-    />
-  </div>
-  <Header
-    close={[Function]}
-    mainMenu={
-      Array [
-        Object {
-          "items": Array [
-            Object {
-              "icon": <IconNavRocket
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "/challenges",
-              "title": "All Challenges",
-            },
-            Object {
-              "icon": <IconNavCP
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://arena.topcoder-dev.com",
-              "title": "Competitive Programming",
-            },
-          ],
-          "title": "Compete",
-        },
-        Object {
-          "items": Array [
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookCP
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/competitive-programming",
-              "title": "Competitive Programming",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookData
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/data-science/",
-              "title": "Data Science",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBookDesign
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/design",
-              "title": "Design",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBoolDevelop
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/development",
-              "title": "Development",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBoolDevelop
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/qa",
-              "title": "QA",
-            },
-          ],
-          "title": "Tracks",
-          "url": "https://www.topcoder-dev.com/community/learn",
-        },
-        Object {
-          "items": Array [
-            Object {
-              "enforceA": true,
-              "icon": <IconNavTcoGeneric
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder.com/tco",
-              "title": "TCO",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavPrograms
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/member-programs",
-              "title": "Programs",
-            },
-            Object {
-              "icon": <IconNavForums
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://apps.topcoder-dev.com/forums",
-              "title": "Forums",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavStatistics
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/statistics",
-              "title": "Statistics",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavEvents
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/community/events",
-              "title": "Events",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavBlog
-                height="32"
-                viewBox="0 0 32 32"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/blog",
-              "title": "Blog",
-            },
-            Object {
-              "enforceA": true,
-              "icon": <IconNavThrive
-                height="29"
-                viewBox="0 0 32 29"
-                width="32"
-                xmlns="http://www.w3.org/2000/svg"
-              />,
-              "link": "https://www.topcoder-dev.com/thrive",
-              "title": "Thrive",
-            },
-          ],
-          "title": "Community",
-        },
-      ]
-    }
-    open={[Function]}
-    opened={false}
-    profile={Object {}}
-    userMenu={
-      Object {
-        "items": Array [
-          Object {
-            "enforceA": true,
-            "icon": <IconNavDashboard
-              height="32"
-              viewBox="0 0 32 32"
-              width="32"
-              xmlns="http://www.w3.org/2000/svg"
-            />,
-            "link": "https://www.topcoder-dev.com/my-dashboard",
-            "title": "Dashboard",
-          },
-          Object {
-            "enforceA": true,
-            "icon": <IconNavProfile
-              height="32"
-              viewBox="0 0 32 32"
-              width="32"
-              xmlns="http://www.w3.org/2000/svg"
-            />,
-            "link": "/members/undefined",
-            "title": "My Profile",
-          },
-          Object {
-            "icon": <IconNavWallet
-              height="32"
-              viewBox="0 0 32 32"
-              width="32"
-              xmlns="http://www.w3.org/2000/svg"
-            />,
-            "link": "https://community.topcoder-dev.com/PactsMemberServlet?module=PaymentHistory&full_list=false",
-            "title": "Payments",
-          },
-          Object {
-            "enforceA": true,
-            "icon": <IconNavSettings
-              height="32"
-              viewBox="0 0 32 32"
-              width="32"
-              xmlns="http://www.w3.org/2000/svg"
-            />,
-            "link": "/settings/profile",
-            "title": "Settings",
-          },
-          Object {
-            "enforceA": true,
-            "icon": <IconNavExit
-              height="32"
-              viewBox="0 0 32 32"
-              width="32"
-              xmlns="http://www.w3.org/2000/svg"
-            />,
-            "link": "https://www.topcoder-dev.com/logout",
-            "title": "Log Out",
-          },
-        ],
-        "title": "User",
-      }
-    }
-  />
-</div>
-`;
diff --git a/__tests__/shared/components/TopcoderHeader/desktop/SubMenu/__snapshots__/index.jsx.snap b/__tests__/shared/components/TopcoderHeader/desktop/SubMenu/__snapshots__/index.jsx.snap
deleted file mode 100644
index 4e034058ff..0000000000
--- a/__tests__/shared/components/TopcoderHeader/desktop/SubMenu/__snapshots__/index.jsx.snap
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Matches shallow shapshot 1`] = `
-<ul
-  className="src-shared-components-TopcoderHeader-desktop-SubMenu-___style__opened-menu___2t7di"
-  onMouseLeave={[Function]}
->
-  <Item
-    closeMenu={[Function]}
-    currentSubMenuTitle=""
-    enforceA={false}
-    icon="icon url"
-    link="menu url"
-    openNewTab={false}
-    title="title"
-  />
-</ul>
-`;
diff --git a/__tests__/shared/components/TopcoderHeader/desktop/SubMenu/index.jsx b/__tests__/shared/components/TopcoderHeader/desktop/SubMenu/index.jsx
deleted file mode 100644
index 3e91b14a24..0000000000
--- a/__tests__/shared/components/TopcoderHeader/desktop/SubMenu/index.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import Renderer from 'react-test-renderer/shallow';
-import TU from 'react-dom/test-utils';
-import SubMenu from 'components/TopcoderHeader/desktop/SubMenu';
-
-test('Matches shallow shapshot', () => {
-  const renderer = new Renderer();
-
-  renderer.render((
-    <SubMenu
-      closeMenu={_.noop}
-      menu={{ items: [{ title: 'title', icon: 'icon url', link: 'menu url' }] }}
-    />
-  ));
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-class Wrapper extends React.Component {
-  componentDidMount() {}
-
-  render() {
-    return <SubMenu {...this.props} />;
-  }
-}
-
-const closeMenu = jest.fn();
-const instance = TU.renderIntoDocument((<Wrapper
-  trigger={{
-    bottom: 10,
-    left: 0,
-    right: 10,
-    top: 0,
-  }}
-  closeMenu={closeMenu}
-/>));
-
-test('closeMenu cancelled', () => {
-  const menus = TU.scryRenderedDOMComponentsWithTag(instance, 'ul');
-  expect(menus).toHaveLength(1);
-  TU.Simulate.mouseLeave(menus[0], { pageY: 1 });
-  expect(closeMenu).not.toHaveBeenCalled();
-});
-
-test('closeMenu executed', () => {
-  const menus = TU.scryRenderedDOMComponentsWithTag(instance, 'ul');
-  expect(menus).toHaveLength(1);
-  TU.Simulate.mouseLeave(menus[0], { pageY: -1 });
-  expect(closeMenu).toHaveBeenCalled();
-});
diff --git a/__tests__/shared/components/TopcoderHeader/index.jsx b/__tests__/shared/components/TopcoderHeader/index.jsx
deleted file mode 100644
index 7012d92b18..0000000000
--- a/__tests__/shared/components/TopcoderHeader/index.jsx
+++ /dev/null
@@ -1,216 +0,0 @@
-/* eslint-env browser */
-
-import _ from 'lodash';
-import React from 'react';
-import TopcoderHeader from 'components/TopcoderHeader';
-import TU from 'react-dom/test-utils';
-
-import { JU } from 'topcoder-react-utils';
-
-const mockCloseMenu = jest.fn();
-const mockCloseSearch = jest.fn();
-const mockOpenMenu = jest.fn();
-const mockOpenSearch = jest.fn();
-
-function styleNameMatch(item, styleName) {
-  return item && item.className && item.className.match(styleName);
-}
-
-test('Default render', () => {
-  JU.shallowSnapshot((
-    <TopcoderHeader
-      closeMenu={_.noop}
-      closeMobileMenu={_.noop}
-      closeSearch={_.noop}
-      currentNav={{}}
-      openMenu={_.noop}
-      openMobileMenu={_.noop}
-      openSearch={_.noop}
-    />
-  ));
-});
-
-test('Render with open menu', () => {
-  JU.shallowSnapshot((
-    <TopcoderHeader
-      closeMenu={_.noop}
-      closeMobileMenu={_.noop}
-      closeSearch={_.noop}
-      currentNav={{
-        menuTitle: 'Compete',
-        subMenuTitle: 'All Challenges',
-      }}
-      openMenu={_.noop}
-      openedMenu={{
-        title: 'Compete',
-        items: [{
-          icon: <div />,
-          link: '/link',
-          title: 'Title',
-        }],
-      }}
-      openMobileMenu={_.noop}
-      openSearch={_.noop}
-    />
-  ));
-});
-
-test('Render with specified profile', () => {
-  JU.shallowSnapshot((
-    <TopcoderHeader
-      closeMenu={_.noop}
-      closeMobileMenu={_.noop}
-      closeSearch={_.noop}
-      currentNav={{}}
-      openMenu={_.noop}
-      openMobileMenu={_.noop}
-      openSearch={_.noop}
-      profile={{}}
-      searchOpened
-    />
-  ));
-});
-
-describe.skip('User input handling', () => {
-  let dom;
-  beforeAll(() => {
-    dom = JU.renderDom((
-      <TopcoderHeader
-        activeTrigger={{
-          bottom: 0,
-          left: 0,
-          right: 0,
-          top: 0,
-        }}
-        closeMenu={mockCloseMenu}
-        closeMobileMenu={_.noop}
-        closeSearch={mockCloseSearch}
-        currentNav={{}}
-        openMenu={mockOpenMenu}
-        openMobileMenu={_.noop}
-        openSearch={mockOpenSearch}
-        profile={{}}
-      />
-    ));
-  });
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test.skip('main-menu-item opens sub-menu when hovered', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/main-menu-item/));
-    expect(items.length).toBeGreaterThan(1);
-    TU.Simulate.mouseEnter(items[0]);
-    expect(mockOpenMenu).toHaveBeenCalled();
-  });
-
-  test.skip('main-menu-item closes sub-menu when mouse leaves downward', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/main-menu-item/));
-    expect(items.length).toBeGreaterThan(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -1 });
-    expect(mockCloseMenu).not.toHaveBeenCalled();
-  });
-
-  test.skip('main-menu-item closes sub-menu when mouse leaves not downards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/main-menu-item/));
-    expect(items.length).toBeGreaterThan(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -2 });
-    expect(mockCloseMenu).toHaveBeenCalled();
-  });
-
-  test.skip('user-menu handle opens sub-menu when hovered', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/user-menu/));
-    expect(items.length).toBeGreaterThan(1);
-    TU.Simulate.mouseEnter(items[0]);
-    expect(mockOpenMenu).toHaveBeenCalled();
-  });
-
-  test.skip('user-menu handle closes sub-menu when mouse leaves downwards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/user-menu/));
-    expect(items.length).toBeGreaterThan(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -1 });
-    expect(mockCloseMenu).not.toHaveBeenCalled();
-  });
-
-  test.skip('user-menu closes sub-menu when mouse leaves not downards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/user-menu/));
-    expect(items.length).toBeGreaterThan(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -2 });
-    expect(mockCloseMenu).toHaveBeenCalled();
-  });
-
-  test('search-icon opens search when hovered', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/search-icon/));
-    expect(items.length).toBe(1);
-    TU.Simulate.mouseEnter(items[0]);
-    expect(mockOpenSearch).toHaveBeenCalled();
-  });
-
-  test('search-icon closes search when mouse leaves downwards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/search-icon/));
-    expect(items.length).toBe(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -1 });
-    expect(mockCloseSearch).not.toHaveBeenCalled();
-  });
-
-  test('search-icon closes search when mouse leaves not downards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => item && item.className && item.className.match(/search-icon/));
-    expect(items.length).toBe(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -2 });
-    expect(mockCloseSearch).toHaveBeenCalled();
-  });
-
-  test('sub-menu closes when mouse leave downwards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => styleNameMatch(item, 'closed-menu'));
-    expect(items.length).toBe(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: 1 });
-    expect(mockCloseMenu).toHaveBeenCalled();
-  });
-
-  test('search-field closes when mouse leaves downwards', () => {
-    const items = TU.findAllInRenderedTree(dom, item => styleNameMatch(item, 'search-field'));
-    expect(items.length).toBe(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: 1 });
-    expect(mockCloseSearch).toHaveBeenCalled();
-  });
-
-  test('search-field won\'t close', () => {
-    const items = TU.findAllInRenderedTree(dom, item => styleNameMatch(item, 'search-field'));
-    expect(items.length).toBe(1);
-    TU.Simulate.mouseLeave(items[0], { pageY: -1 });
-    expect(mockCloseSearch).not.toHaveBeenCalled();
-  });
-
-  test('Enter submits search field', () => {
-    const items = TU.findAllInRenderedTree(dom, item => styleNameMatch(item, 'search-field'));
-    expect(items.length).toBe(1);
-    expect(items[0].children.length).toBe(1);
-    const input = items[0].children[0];
-    expect(input.tagName).toBe('INPUT');
-    TU.Simulate.keyPress(input, {
-      key: 'Enter',
-      target: {
-        value: 'SEARCH',
-      },
-    });
-    /* TODO: The commented out string below does not work with jest:
-     * window.location comes from jsdom and works differently from
-     * browser's window.location. Should be investigated how to make
-     * this check properly. */
-    // expect(window.location).toHaveBeenCalledWith('/search/members?q=SEARCH');
-  });
-
-  test('Other key won\'t submit', () => {
-    const items = TU.findAllInRenderedTree(dom, item => styleNameMatch(item, 'search-field'));
-    expect(items.length).toBe(1);
-    expect(items[0].children.length).toBe(1);
-    const input = items[0].children[0];
-    expect(input.tagName).toBe('INPUT');
-    TU.Simulate.keyPress(input, {
-      key: 'A',
-      target: {
-        value: 'SEARCH',
-      },
-    });
-  });
-});
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/Menu.jsx b/__tests__/shared/components/TopcoderHeader/mobile/Menu.jsx
deleted file mode 100644
index 75b1e61a83..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/Menu.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import R from 'react-test-renderer/shallow';
-import Menu from 'components/TopcoderHeader/mobile/Menu';
-
-const renderer = new R();
-
-test('Matches snapshot', () => {
-  renderer.render((
-    <Menu
-      close={_.noop}
-      mainMenu={[{
-        title: 'Menu title',
-        items: [{
-          icon: <div />,
-          link: '/LINK',
-          title: 'Item title',
-        }],
-      }]}
-    />
-  ));
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/Search.jsx b/__tests__/shared/components/TopcoderHeader/mobile/Search.jsx
deleted file mode 100644
index dc3901808c..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/Search.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import _ from 'lodash';
-import React from 'react';
-import Renderer from 'react-test-renderer/shallow';
-import Search from 'components/TopcoderHeader/mobile/Search';
-import TU from 'react-dom/test-utils';
-
-class SearchWrapper extends React.Component {
-  componentDidMount() {}
-
-  render() {
-    return (
-      <Search {...this.props} />
-    );
-  }
-}
-
-test('Matches shallow shapshot', () => {
-  const renderer = new Renderer();
-  renderer.render(<Search />);
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
-
-const page = TU.renderIntoDocument(<SearchWrapper />);
-
-test.skip('Handles Enter key', () => {
-  const items = TU.scryRenderedDOMComponentsWithClass(page, 'search');
-  const input = _.find(items[0].children, item => item && item.tagName === 'INPUT');
-  TU.Simulate.keyPress(input, {
-    key: 'Enter',
-    target: {
-      value: 'SEARCH',
-    },
-  });
-  /* TODO: We want to check here that /search/members?q=SEARCH
-   * was put into window.location, but inside jest test window.location
-   * comes from jsdom, and it is not really changed (at least,
-   * checking window.location returns a weird data structure,
-   * what is the way to access set url is not that clear).
-   * Should be investigated. */
-});
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/SubMenu.jsx b/__tests__/shared/components/TopcoderHeader/mobile/SubMenu.jsx
deleted file mode 100644
index 5664fa9230..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/SubMenu.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import R from 'react-test-renderer/shallow';
-import SubMenu from 'components/TopcoderHeader/mobile/SubMenu';
-
-const renderer = new R();
-
-test('Matches snapshot', () => {
-  renderer.render((
-    <SubMenu
-      subMenu={{
-        title: 'Menu title',
-        items: [{
-          icon: <div />,
-          link: '/LINK',
-          title: 'Item title',
-        }],
-      }}
-    />
-  ));
-  expect(renderer.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/UserMenu.jsx b/__tests__/shared/components/TopcoderHeader/mobile/UserMenu.jsx
deleted file mode 100644
index b1ad54d59f..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/UserMenu.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import Rnd from 'react-test-renderer/shallow';
-import UserMenu from 'components/TopcoderHeader/mobile/UserMenu';
-
-const rnd = new Rnd();
-
-test('Snapshot match', () => {
-  rnd.render((
-    <UserMenu
-      menu={{
-        title: 'Title',
-        items: [{
-          icon: <div />,
-          link: '/link',
-          title: 'Item title',
-        }],
-      }}
-      profile={{
-        handle: 'username',
-      }}
-    />
-  ));
-  expect(rnd.getRenderOutput()).toMatchSnapshot();
-});
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/Menu.jsx.snap b/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/Menu.jsx.snap
deleted file mode 100644
index a708f428ff..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/Menu.jsx.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Matches snapshot 1`] = `
-<div
-  className="src-shared-components-TopcoderHeader-mobile-Menu-___style__menu___3UwIt"
->
-  <div
-    className="src-shared-components-TopcoderHeader-mobile-Menu-___style__title___2L9ZL"
-  >
-    <LogoTopcoder
-      className="src-shared-components-TopcoderHeader-mobile-Menu-___style__tc-logo___2ebQz"
-      height="18"
-      viewBox="0 0 51 18"
-      width="51"
-      xmlns="http://www.w3.org/2000/svg"
-    />
-    [ topcoder ]
-    <span
-      className="src-shared-components-TopcoderHeader-mobile-Menu-___style__x-cross___th5Kv"
-      onClick={[Function]}
-      onKeyPress={[Function]}
-      role="button"
-      tabIndex={0}
-    >
-      ×
-    </span>
-  </div>
-  <Search />
-  <Auth
-    column={true}
-  />
-  <div
-    className="src-shared-components-TopcoderHeader-mobile-Menu-___style__separator___3LchD"
-  />
-  <SubMenu
-    hideTitle={false}
-    subMenu={
-      Object {
-        "items": Array [
-          Object {
-            "icon": <div />,
-            "link": "/LINK",
-            "title": "Item title",
-          },
-        ],
-        "title": "Menu title",
-      }
-    }
-  />
-</div>
-`;
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/Search.jsx.snap b/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/Search.jsx.snap
deleted file mode 100644
index 41cd1908c9..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/Search.jsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Matches shallow shapshot 1`] = `
-<div
-  className="src-shared-components-TopcoderHeader-mobile-Search-___style__search___101Ux"
->
-  <IconMagnifyingGlass
-    className="src-shared-components-TopcoderHeader-mobile-Search-___style__icon___aCkZk"
-    height="18"
-    viewBox="0 0 18 18"
-    width="18"
-    xmlns="http://www.w3.org/2000/svg"
-  />
-  <input
-    aria-label="Find members by username or skill"
-    onKeyPress={[Function]}
-    placeholder="Find members by username or skill"
-  />
-</div>
-`;
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/SubMenu.jsx.snap b/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/SubMenu.jsx.snap
deleted file mode 100644
index 97bd8033a4..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/SubMenu.jsx.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Matches snapshot 1`] = `
-<ul
-  className="src-shared-components-TopcoderHeader-mobile-SubMenu-___style__sub-menu___TEWxN"
->
-  <li
-    className="src-shared-components-TopcoderHeader-mobile-SubMenu-___style__title___3DKHU"
-  >
-    Menu title
-  </li>
-  <li
-    className="src-shared-components-TopcoderHeader-mobile-SubMenu-___style__item___2omud"
-  >
-    <a
-      href="/LINK"
-    >
-      Item title
-    </a>
-  </li>
-</ul>
-`;
diff --git a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/UserMenu.jsx.snap b/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/UserMenu.jsx.snap
deleted file mode 100644
index 9b6a9fd282..0000000000
--- a/__tests__/shared/components/TopcoderHeader/mobile/__snapshots__/UserMenu.jsx.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Snapshot match 1`] = `
-<div>
-  <div
-    className="src-shared-components-TopcoderHeader-mobile-UserMenu-___style__title___36eEX"
-  >
-    <a
-      href="/members/username"
-    >
-      <ThemedAvatar
-        composeAdhocTheme="deeply"
-        composeContextTheme="softly"
-        mapThemrProps={[Function]}
-        themePriority="adhoc-context-default"
-      />
-      <span
-        className="src-shared-components-TopcoderHeader-mobile-UserMenu-___style__handle___CL0Tq"
-        style={
-          Object {
-            "color": "#555555",
-          }
-        }
-      >
-        username
-      </span>
-    </a>
-  </div>
-  <SubMenu
-    hideTitle={true}
-    subMenu={
-      Object {
-        "items": Array [
-          Object {
-            "icon": <div />,
-            "link": "/link",
-            "title": "Item title",
-          },
-        ],
-        "title": "Title",
-      }
-    }
-  />
-</div>
-`;
diff --git a/__tests__/shared/containers/__snapshots__/TopcoderHeader.jsx.snap b/__tests__/shared/containers/__snapshots__/TopcoderHeader.jsx.snap
index 594b9e1c6f..1c2bdc7866 100644
--- a/__tests__/shared/containers/__snapshots__/TopcoderHeader.jsx.snap
+++ b/__tests__/shared/containers/__snapshots__/TopcoderHeader.jsx.snap
@@ -1,19 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Matches shallow snapshot 1`] = `
-<TopcoderHeader
-  activeTrigger={null}
+<Header
   closeMenu={[Function]}
   closeMobileMenu={[Function]}
   closeSearch={[Function]}
-  isMobile={false}
-  mobileMenuOpened={false}
   openMenu={[Function]}
   openMobileMenu={[Function]}
   openSearch={[Function]}
-  openedMenu={null}
   profile={Object {}}
-  searchOpened={false}
   setCurrentNav={[Function]}
   store={
     Object {
diff --git a/config/default.js b/config/default.js
index 4475c421f2..db896d63bf 100644
--- a/config/default.js
+++ b/config/default.js
@@ -260,6 +260,143 @@ module.exports = {
     title: 'Switch to BUSINESS',
     href: 'https://connect.topcoder-dev.com',
   },
+  HEADER_MENU: [
+    {
+      id: 'business',
+      title: 'BUSINESS',
+      href: 'https://www.topcoder-dev.com',
+    },
+    {
+      id: 'community', // required for 'Switch to BUSINESS' to work
+      title: 'COMMUNITY',
+      secondaryMenuForLoggedInUser: [
+        {
+          title: 'Dashboard',
+          href: '/my-dashboard',
+        },
+        {
+          id: 'myprofile',
+          title: 'My Profile',
+          href: '/members/willFilledByUserName',
+        },
+        {
+          title: 'Payments',
+          href: 'https://community.topcoder-dev.com/PactsMemberServlet?module=PaymentHistory&full_list=false',
+        },
+      ],
+      secondaryMenuForGuest: [
+        {
+          title: 'Overview',
+          href: 'https://www.topcoder-dev.com/about',
+        },
+        {
+          title: 'How It Works',
+          href: 'https://www.topcoder-dev.com/how-it-works/faqs/',
+        },
+        {
+          title: 'Tracks',
+          href: '/community/learn',
+        },
+        {
+          title: 'Why Join',
+          href: 'https://www.topcoder-dev.com/about/why-crowdsourcing/',
+        },
+      ],
+      subMenu: [
+        {
+          title: 'Compete',
+          subMenu: [
+            {
+              title: 'All Challenges',
+              href: '/challenges',
+            },
+            {
+              title: 'Competitive Programming',
+              href: 'https://arena.topcoder-dev.com',
+            },
+          ],
+        },
+        {
+          title: 'Tracks',
+          subMenu: [
+            {
+              title: 'Competitive Programming',
+              href: '/community/competitive-programming',
+            },
+            {
+              title: 'Data Science',
+              href: '/community/data-science',
+            },
+            {
+              title: 'Design',
+              href: '/community/design',
+            },
+            {
+              title: 'Development',
+              href: '/community/development',
+            },
+            {
+              title: 'QA',
+              href: '/community/qa',
+            },
+          ],
+        },
+        {
+          title: 'Explore',
+          subMenu: [
+            {
+              title: 'TCO',
+              href: 'https://www.topcoder-dev.com/tco',
+            },
+            {
+              title: 'Programs',
+              href: '/community/member-programs',
+            },
+            {
+              title: 'Forums',
+              href: 'https://apps.topcoder-dev.com/forums',
+            },
+            {
+              title: 'Statistics',
+              href: '/community/statistics',
+            },
+            {
+              title: 'Events',
+              href: '/community/events',
+            },
+            {
+              title: 'Blog',
+              href: 'https://www.topcoder-dev.com/blog',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  HEADER_MENU_THEME: 'light',
+  HEADER_AUTH_URLS: {
+    href: 'https://accounts.topcoder-dev.com/member/registration?utm_source=community-app-main',
+    location: 'https://accounts.topcoder-dev.com/member?retUrl=%S&utm_source=community-app-main',
+  },
+  ACCOUNT_MENU: [
+    {
+      title: 'Settings',
+      href: '/settings/profile',
+    },
+    { separator: true },
+    {
+      title: 'Help',
+      href: 'https://help.topcoder-dev.com/',
+    },
+    {
+      title: 'About Topcoder',
+      href: 'https://www.topcoder.com/about/',
+    },
+    {
+      title: 'Log Out',
+      href: 'https://www.topcoder-dev.com/logout',
+    },
+  ],
   // Config for TC EDU - THRIVE
   TC_EDU_BASE_PATH: '/thrive',
   TC_EDU_TRACKS_PATH: '/tracks',
diff --git a/config/production.js b/config/production.js
index 483bcceee6..99a369561f 100644
--- a/config/production.js
+++ b/config/production.js
@@ -56,6 +56,143 @@ module.exports = {
   FILESTACK: {
     SUBMISSION_CONTAINER: 'topcoder-submissions-dmz',
   },
+  HEADER_MENU: [
+    {
+      id: 'business',
+      title: 'BUSINESS',
+      href: 'https://www.topcoder.com',
+    },
+    {
+      id: 'community', // required for 'Switch to BUSINESS' to work
+      title: 'COMMUNITY',
+      secondaryMenuForLoggedInUser: [
+        {
+          title: 'Dashboard',
+          href: '/my-dashboard',
+        },
+        {
+          id: 'myprofile',
+          title: 'My Profile',
+          href: '/members/willFilledByUserName',
+        },
+        {
+          title: 'Payments',
+          href: 'https://community.topcoder.com/PactsMemberServlet?module=PaymentHistory&full_list=false',
+        },
+      ],
+      secondaryMenuForGuest: [
+        {
+          title: 'Overview',
+          href: 'https://www.topcoder.com/about',
+        },
+        {
+          title: 'How It Works',
+          href: 'https://www.topcoder.com/how-it-works/faqs/',
+        },
+        {
+          title: 'Tracks',
+          href: '/community/learn',
+        },
+        {
+          title: 'Why Join',
+          href: 'https://www.topcoder.com/about/why-crowdsourcing/',
+        },
+      ],
+      subMenu: [
+        {
+          title: 'Compete',
+          subMenu: [
+            {
+              title: 'All Challenges',
+              href: '/challenges',
+            },
+            {
+              title: 'Competitive Programming',
+              href: 'https://arena.topcoder.com',
+            },
+          ],
+        },
+        {
+          title: 'Tracks',
+          subMenu: [
+            {
+              title: 'Competitive Programming',
+              href: '/community/competitive-programming',
+            },
+            {
+              title: 'Data Science',
+              href: '/community/data-science',
+            },
+            {
+              title: 'Design',
+              href: '/community/design',
+            },
+            {
+              title: 'Development',
+              href: '/community/development',
+            },
+            {
+              title: 'QA',
+              href: '/community/qa',
+            },
+          ],
+        },
+        {
+          title: 'Explore',
+          subMenu: [
+            {
+              title: 'TCO',
+              href: 'https://www.topcoder.com/tco',
+            },
+            {
+              title: 'Programs',
+              href: '/community/member-programs',
+            },
+            {
+              title: 'Forums',
+              href: 'https://apps.topcoder.com/forums',
+            },
+            {
+              title: 'Statistics',
+              href: '/community/statistics',
+            },
+            {
+              title: 'Events',
+              href: '/community/events',
+            },
+            {
+              title: 'Blog',
+              href: 'https://www.topcoder.com/blog',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  HEADER_MENU_THEME: 'light',
+  HEADER_AUTH_URLS: {
+    href: 'https://accounts.topcoder.com/member/registration?utm_source=community-app-main',
+    location: 'https://accounts.topcoder.com/member?retUrl=%S&utm_source=community-app-main',
+  },
+  ACCOUNT_MENU: [
+    {
+      title: 'Settings',
+      href: '/settings/profile',
+    },
+    { separator: true },
+    {
+      title: 'Help',
+      href: 'https://help.topcoder.com/',
+    },
+    {
+      title: 'About Topcoder',
+      href: 'https://www.topcoder.com/about/',
+    },
+    {
+      title: 'Log Out',
+      href: 'https://www.topcoder.com/logout',
+    },
+  ],
   SECONDARY_MENU_FOR_LOGGED_USER: [
     {
       title: 'Dashboard',
diff --git a/package-lock.json b/package-lock.json
index 5c7725d3ff..024ed1945a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8494,9 +8494,12 @@
       "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
     },
     "hoist-non-react-statics": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-      "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "requires": {
+        "react-is": "16.11.0"
+      }
     },
     "home-or-tmp": {
       "version": "2.0.0",
@@ -13276,7 +13279,52 @@
       "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
       "dev": true,
       "requires": {
-        "find-up": "2.1.0"
+        "find-up": "3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "3.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "dev": true,
+          "requires": {
+            "p-locate": "3.0.0",
+            "path-exists": "3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
+          "integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
+          "dev": true,
+          "requires": {
+            "p-try": "2.2.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "dev": true,
+          "requires": {
+            "p-limit": "2.2.1"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "dev": true
+        }
       }
     },
     "pluralize": {
@@ -15409,6 +15457,13 @@
       "requires": {
         "hoist-non-react-statics": "1.2.0",
         "invariant": "2.2.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
+          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
+        }
       }
     },
     "react-dates": {
@@ -20063,7 +20118,7 @@
               "requires": {
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
-                "react-is": "^16.8.1"
+                "react-is": "16.11.0"
               }
             },
             "rc-slider": {
@@ -20282,7 +20337,7 @@
           "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
           "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
           "requires": {
-            "core-js": "^2.5.0"
+            "core-js": "2.6.10"
           },
           "dependencies": {
             "core-js": {
@@ -22602,7 +22657,7 @@
           "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
           "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
           "requires": {
-            "@babel/runtime": "^7.1.2"
+            "@babel/runtime": "7.6.3"
           }
         },
         "dom-serializer": {
@@ -26373,8 +26428,8 @@
           "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
           "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
           "requires": {
-            "define-properties": "^1.1.2",
-            "es-abstract": "^1.5.1"
+            "define-properties": "1.1.3",
+            "es-abstract": "1.16.0"
           }
         },
         "object.omit": {
@@ -27729,9 +27784,9 @@
           "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
           "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
           "requires": {
-            "@babel/runtime": "^7.2.0",
-            "prop-types": "^15.6.0",
-            "warning": "^4.0.1"
+            "@babel/runtime": "7.6.3",
+            "prop-types": "15.6.2",
+            "warning": "4.0.3"
           },
           "dependencies": {
             "warning": {
@@ -27887,8 +27942,8 @@
           "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.7.5.tgz",
           "integrity": "sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg==",
           "requires": {
-            "popper.js": "^1.12.5",
-            "prop-types": "^15.5.10"
+            "popper.js": "1.16.0",
+            "prop-types": "15.6.2"
           }
         },
         "react-portal": {
@@ -27939,12 +27994,12 @@
               "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
               "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
               "requires": {
-                "@babel/runtime": "^7.1.2",
-                "loose-envify": "^1.2.0",
-                "resolve-pathname": "^3.0.0",
-                "tiny-invariant": "^1.0.2",
-                "tiny-warning": "^1.0.0",
-                "value-equal": "^1.0.1"
+                "@babel/runtime": "7.6.3",
+                "loose-envify": "1.3.1",
+                "resolve-pathname": "3.0.0",
+                "tiny-invariant": "1.0.6",
+                "tiny-warning": "1.0.3",
+                "value-equal": "1.0.1"
               }
             },
             "isarray": {
diff --git a/src/shared/components/Header/index.jsx b/src/shared/components/Header/index.jsx
new file mode 100644
index 0000000000..4ea2d4855f
--- /dev/null
+++ b/src/shared/components/Header/index.jsx
@@ -0,0 +1,98 @@
+import _ from 'lodash';
+import React, { useState, useEffect } from 'react';
+import PT from 'prop-types';
+import { config } from 'topcoder-react-utils';
+import Logo from 'assets/images/tc-logo.svg';
+
+let TopNavRef;
+let LoginNavRef;
+
+try {
+  // eslint-disable-next-line global-require
+  const { TopNav, LoginNav } = require('navigation-component');
+  TopNavRef = TopNav;
+  LoginNavRef = LoginNav;
+} catch (e) {
+  // window is undefined
+}
+
+const Header = ({ profile }) => {
+  const [activeLevel1Id, setActiveLevel1Id] = useState();
+  const [path, setPath] = useState();
+  const [openMore, setOpenMore] = useState(true);
+
+  const handleChangeLevel1Id = (menuId) => {
+    setActiveLevel1Id(menuId);
+  };
+
+  const handleCloseOpenMore = () => {
+    setOpenMore(false);
+  };
+
+  const handleChangeOpenMore = (changedOpenMore) => {
+    setOpenMore(changedOpenMore);
+  };
+
+  const handleSwitchMenu = () => {
+    setActiveLevel1Id(config.HEADER_MENU[0].id);
+  };
+
+  let normalizedProfile = profile && _.clone(profile);
+  if (profile) {
+    normalizedProfile.photoURL = (_.has(profile, 'photoURL') && profile.photoURL !== null)
+      ? `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(profile.photoURL)}?size=32` : '';
+  } else {
+    normalizedProfile = null;
+  }
+
+  useEffect(() => {
+    setPath(window.location.pathname);
+  }, []);
+  if (TopNavRef) {
+    return (
+      <div>
+        <TopNavRef
+          menu={config.HEADER_MENU}
+          rightMenu={(
+            <LoginNavRef
+              loggedIn={!_.isEmpty(profile)}
+              notificationButtonState="none"
+              notifications={[]}
+              accountMenu={config.ACCOUNT_MENU}
+              switchText={config.ACCOUNT_MENU_SWITCH_TEXT}
+              onSwitch={handleSwitchMenu}
+              onMenuOpen={handleCloseOpenMore}
+              showNotification={false}
+              profile={normalizedProfile}
+              authURLs={config.HEADER_AUTH_URLS}
+            />
+          )}
+          logo={<Logo />}
+          theme={config.HEADER_MENU_THEME}
+          currentLevel1Id={activeLevel1Id}
+          onChangeLevel1Id={handleChangeLevel1Id}
+          path={path}
+          openMore={openMore}
+          setOpenMore={handleChangeOpenMore}
+          loggedIn={!_.isEmpty(profile)}
+          profileHandle={profile ? profile.handle : ''}
+        />
+      </div>
+    );
+  }
+
+  return (<div />);
+};
+
+Header.defaultProps = {
+  profile: null,
+};
+
+Header.propTypes = {
+  profile: PT.shape({
+    photoURL: PT.string,
+    handle: PT.string,
+  }),
+};
+
+export default Header;
diff --git a/src/shared/containers/TopcoderHeader.js b/src/shared/containers/TopcoderHeader.js
index 56971e94db..2f6b060f9f 100644
--- a/src/shared/containers/TopcoderHeader.js
+++ b/src/shared/containers/TopcoderHeader.js
@@ -2,15 +2,19 @@
  * Container for the standard Topcoder header.
  */
 
+import _ from 'lodash';
 import actions from 'actions/topcoder_header';
-import TopcoderHeader from 'components/TopcoderHeader';
+import TopcoderHeader from 'components/Header';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 export default connect(
   state => ({
     ...state.topcoderHeader,
-    profile: state.auth.profile,
+    profile: {
+      ...state.auth.profile,
+      ..._.pickBy({ roles: state.auth.user ? state.auth.user.roles : undefined }),
+    },
   }),
   dispatch => bindActionCreators(actions.topcoderHeader, dispatch),
 )(TopcoderHeader);
diff --git a/src/shared/routes/Topcoder/styles.scss b/src/shared/routes/Topcoder/styles.scss
index dba87220c9..1af7c46852 100644
--- a/src/shared/routes/Topcoder/styles.scss
+++ b/src/shared/routes/Topcoder/styles.scss
@@ -8,5 +8,6 @@
     display: flex;
     flex: 1 0 auto;
     position: relative;
+    z-index: 0;
   }
 }