diff --git a/.circleci/config.yml b/.circleci/config.yml
index a2e1c3acba..a2ca3f33b7 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -364,7 +364,7 @@ workflows:
           filters:
             branches:
               only:
-                - new-tabs-theme
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         
diff --git a/package-lock.json b/package-lock.json
index d69bbb5673..cfeb8a5645 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15312,6 +15312,110 @@
         }
       }
     },
+    "navigation-component-tco": {
+      "version": "github:topcoder-platform/navigation-component-tco#4e00462db36509e3e5899dd42979cff252f3cbec",
+      "requires": {
+        "classnames": "2.2.6",
+        "lodash": "4.17.15",
+        "moment": "2.25.3",
+        "prop-types": "15.7.2",
+        "react-resize-detector": "4.2.3",
+        "topcoder-react-utils": "0.7.9"
+      },
+      "dependencies": {
+        "config": {
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/config/-/config-3.3.6.tgz",
+          "integrity": "sha512-Hj5916C5HFawjYJat1epbyY2PlAgLpBtDUlr0MxGLgo3p5+7kylyvnRY18PqJHgnNWXcdd0eWDemT7eYWuFgwg==",
+          "requires": {
+            "json5": "2.2.0"
+          }
+        },
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "16.13.1"
+          }
+        },
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "requires": {
+            "minimist": "1.2.5"
+          }
+        },
+        "react-redux": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz",
+          "integrity": "sha512-T52I52Kxhbqy/6TEfBv85rQSDz6+Y28V/pf52vDWs1YRXG19mcFOGfHnY2HsNFHyhP+ST34Aih98fvt6tqwVcQ==",
+          "requires": {
+            "@babel/runtime": "7.9.6",
+            "hoist-non-react-statics": "3.3.2",
+            "invariant": "2.2.4",
+            "loose-envify": "1.4.0",
+            "prop-types": "15.7.2",
+            "react-is": "16.13.1"
+          }
+        },
+        "redux": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz",
+          "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==",
+          "requires": {
+            "@babel/runtime": "7.9.6"
+          }
+        },
+        "serialize-javascript": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
+          "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A=="
+        },
+        "topcoder-react-utils": {
+          "version": "0.7.9",
+          "resolved": "https://registry.npmjs.org/topcoder-react-utils/-/topcoder-react-utils-0.7.9.tgz",
+          "integrity": "sha512-bH5t7lVTezl3rh2S1pguMWhUlJb39gOLLkCG9jwLCsMKTzri+LsOvpRJ6dOvYZPzA7GdmCgQNeGAoctiqAGb4g==",
+          "requires": {
+            "@babel/register": "7.12.13",
+            "@babel/runtime": "7.9.6",
+            "body-parser": "1.19.0",
+            "command-line-args": "5.1.1",
+            "command-line-usage": "5.0.5",
+            "compression": "1.7.4",
+            "config": "3.3.6",
+            "cookie-parser": "1.4.5",
+            "cross-env": "5.2.1",
+            "express": "4.17.1",
+            "helmet": "3.22.0",
+            "lodash": "4.17.15",
+            "moment": "2.25.3",
+            "morgan": "1.10.0",
+            "node-forge": "0.7.6",
+            "prop-types": "15.7.2",
+            "raf": "3.4.1",
+            "react": "16.13.1",
+            "react-css-super-themr": "2.3.0",
+            "react-dom": "16.13.1",
+            "react-helmet": "5.2.1",
+            "react-redux": "6.0.1",
+            "react-router-dom": "4.3.1",
+            "redux": "4.1.0",
+            "redux-actions": "2.6.5",
+            "redux-devtools": "3.5.0",
+            "redux-devtools-dock-monitor": "1.1.3",
+            "redux-devtools-log-monitor": "1.4.0",
+            "redux-promise": "0.6.0",
+            "request-ip": "2.1.3",
+            "serialize-javascript": "1.9.1",
+            "serve-favicon": "2.5.0",
+            "shortid": "2.2.15",
+            "url-parse": "1.4.7"
+          }
+        }
+      }
+    },
     "ncp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
diff --git a/package.json b/package.json
index 7c188001fd..a8eeeb48d2 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,8 @@
     "money": "^0.2.0",
     "morgan": "^1.9.0",
     "multer": "^1.4.2",
-    "navigation-component": "topcoder-platform/navigation-component#develop",
+    "navigation-component": "github:topcoder-platform/navigation-component#develop",
+    "navigation-component-tco": "github:topcoder-platform/navigation-component-tco#new-dev",
     "node-forge": "^0.7.5",
     "nuka-carousel": "^4.5.3",
     "postcss": "^6.0.23",
diff --git a/src/shared/components/Contentful/Menu/index.jsx b/src/shared/components/Contentful/Menu/index.jsx
index 31b946522e..7a35afefcd 100644
--- a/src/shared/components/Contentful/Menu/index.jsx
+++ b/src/shared/components/Contentful/Menu/index.jsx
@@ -244,7 +244,12 @@ export default function ContentfulMenu(props) {
       render={(menuData) => {
         const { fields } = Object.values(menuData.entries.items)[0];
         if (!fields) return null;
-        if (fields.theme === 'General - light' || fields.theme === 'General - dark') {
+        if (
+          fields.theme === 'General - light'
+          || fields.theme === 'General - dark'
+          || fields.theme === 'TCO22 - dark'
+          || fields.theme === 'TCO22 - light'
+        ) {
           // New navi style menu
           // we deligate to special custom component and lib
           return (
diff --git a/src/shared/containers/Contentful/MenuLoader/index.jsx b/src/shared/containers/Contentful/MenuLoader/index.jsx
index 35cef21d1e..ed695ecb78 100644
--- a/src/shared/containers/Contentful/MenuLoader/index.jsx
+++ b/src/shared/containers/Contentful/MenuLoader/index.jsx
@@ -78,8 +78,6 @@ class MenuLoaderContainer extends React.Component {
       return <LoadingIndicator />;
     }
     if (isomorphy.isClientSide()) {
-      // eslint-disable-next-line global-require
-      const { TopNav, LoginNav } = require('navigation-component');
       const logoToUse = !_.isEmpty(menuLogo) ? <img src={menuLogo.fields.file.url} alt="menu logo" /> : <Logo />;
       const menuTheme = fields.theme.split('- ');
       let normalizedProfile = auth.profile && _.clone(auth.profile);
@@ -89,12 +87,14 @@ class MenuLoaderContainer extends React.Component {
       } else {
         normalizedProfile = null;
       }
-      return (
-        <div>
-          <TopNav
+      if (fields.theme.indexOf('TCO22') !== -1) {
+        // eslint-disable-next-line global-require
+        const { TopNav: TopNavTCO, LoginNav: LoginNavTCO } = require('navigation-component-tco');
+        return (
+          <TopNavTCO
             menu={menu}
             rightMenu={(
-              <LoginNav
+              <LoginNavTCO
                 loggedIn={!_.isEmpty(auth.profile)}
                 notificationButtonState="none"
                 notifications={[]}
@@ -117,8 +117,41 @@ class MenuLoaderContainer extends React.Component {
             loggedIn={!_.isEmpty(auth.profile)}
             profileHandle={auth.profile ? auth.profile.handle : ''}
             logoLink={fields.logoLink}
+            backToTcUrl={fields.backToTcUrl}
+            backToTcUrlText={fields.backToTcUrlText}
           />
-        </div>
+        );
+      }
+      // eslint-disable-next-line global-require
+      const { TopNav, LoginNav } = require('navigation-component');
+      return (
+        <TopNav
+          menu={menu}
+          rightMenu={(
+            <LoginNav
+              loggedIn={!_.isEmpty(auth.profile)}
+              notificationButtonState="none"
+              notifications={[]}
+              accountMenu={config.ACCOUNT_MENU}
+              switchText={config.ACCOUNT_MENU_SWITCH_TEXT}
+              onSwitch={this.handleSwitchMenu}
+              onMenuOpen={this.handleCloseOpenMore}
+              profile={normalizedProfile}
+              auth={auth}
+              authURLs={config.HEADER_AUTH_URLS}
+            />
+              )}
+          logo={logoToUse}
+          theme={menuTheme[1]}
+          currentLevel1Id={activeLevel1Id}
+          onChangeLevel1Id={this.handleChangeLevel1Id}
+          path={path}
+          openMore={openMore}
+          setOpenMore={this.handleChangeOpenMore}
+          loggedIn={!_.isEmpty(auth.profile)}
+          profileHandle={auth.profile ? auth.profile.handle : ''}
+          logoLink={fields.logoLink}
+        />
       );
     }
     // no SSR for navi component yet
diff --git a/src/shared/utils/contentful.js b/src/shared/utils/contentful.js
index 76f1614077..cfef3213d5 100644
--- a/src/shared/utils/contentful.js
+++ b/src/shared/utils/contentful.js
@@ -103,6 +103,7 @@ export function menuItemBuilder(baseUrl, item) {
         title: item.fields.naviMenuLinkText || item.fields.name,
         href: item.fields.viewport ? target(baseUrl, item) : null,
         id: item.sys.id,
+        imageSrc: item.fields.naviMenuLinkImage ? `https:${item.fields.naviMenuLinkImage.fields.file.url}` : null,
       };
     case 'navigationMenuItem':
       return {