diff --git a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
index ffff9deca3..e7b8818dcb 100644
--- a/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/TrackIcon/__snapshots__/index.jsx.snap
@@ -5,7 +5,7 @@ exports[`Matches shallow shapshot 1`] = `
   className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
 >
   <div
-    className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
+    className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
   >
     CH
   </div>
@@ -13,7 +13,7 @@ exports[`Matches shallow shapshot 1`] = `
     href="https://www.topcoder-dev.com/tco"
   >
     <div
-      className="src-shared-components-TrackIcon-___style__hidden___JXTEt"
+      className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7 src-shared-components-TrackIcon-___style__hidden___JXTEt"
     >
       TCO
     </div>
@@ -26,7 +26,7 @@ exports[`Matches shallow shapshot 2`] = `
   className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
 >
   <div
-    className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
+    className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
   >
     CH
   </div>
@@ -34,7 +34,7 @@ exports[`Matches shallow shapshot 2`] = `
     href="https://www.topcoder-dev.com/tco"
   >
     <div
-      className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
+      className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
     >
       TCO
     </div>
@@ -47,7 +47,7 @@ exports[`Matches shallow shapshot 3`] = `
   className="src-shared-components-TrackIcon-___style__trackIcon___3gJ9l"
 >
   <div
-    className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__main-icon___1q-1_"
+    className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__main-icon___1q-1_"
   >
     CH
   </div>
@@ -55,7 +55,7 @@ exports[`Matches shallow shapshot 3`] = `
     href="https://www.topcoder-dev.com/tco"
   >
     <div
-      className="src-shared-components-TrackIcon-___style__development___1LZdf src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
+      className="src-shared-components-TrackIcon-___style__CH___3YWAb src-shared-components-TrackIcon-___style__tco-icon___18ZV7"
     >
       TCO
     </div>
diff --git a/src/shared/components/TrackIcon/index.jsx b/src/shared/components/TrackIcon/index.jsx
index 411c71bf60..3553d8cf55 100644
--- a/src/shared/components/TrackIcon/index.jsx
+++ b/src/shared/components/TrackIcon/index.jsx
@@ -14,6 +14,10 @@ export default function TrackIcon({
 }) {
   const TCO_URL = `${MAIN_URL}/tco`;
   const trackStyle = track.replace(' ', '-').toLowerCase();
+  let abbreviationStyle = type.abbreviation;
+  if (['CH', 'F2F', 'TSK'].indexOf(abbreviationStyle) < 0) {
+    abbreviationStyle = '';
+  }
   return (
     <span styleName="trackIcon">
       {challengesUrl ? (
@@ -26,13 +30,13 @@ export default function TrackIcon({
         </a>
       ) : (
         <div
-          styleName={`${trackStyle} main-icon`}
+          styleName={`${abbreviationStyle} main-icon`}
         >
           {type.abbreviation}
         </div>
       )}
       <a href={`${TCO_URL}`}>
-        <div styleName={tcoEligible ? `${trackStyle} tco-icon` : 'hidden'}>
+        <div styleName={`${abbreviationStyle} tco-icon ${tcoEligible ? '' : 'hidden'}`}>
           TCO
         </div>
       </a>
diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss
index 62ef3d0b69..e8eb09ffab 100644
--- a/src/shared/components/TrackIcon/style.scss
+++ b/src/shared/components/TrackIcon/style.scss
@@ -5,9 +5,6 @@ $track-space-10: $base-unit * 2;
 $track-space-15: $base-unit * 3;
 $track-space-20: $base-unit * 4;
 $track-radius-4: $corner-radius * 2;
-$track-code-green: #35ac35;
-$track-code-blue: #2984bd;
-$track-code-turquose: #0ab88a;
 
 .trackIcon {
   display: flex;
@@ -34,25 +31,16 @@ $track-code-turquose: #0ab88a;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
-    &.design,
-    &.generic {
-      background: $track-code-blue;
-    }
-
-    &.develop,
-    &.development {
+    &.CH {
       background: $track-code-green;
     }
 
-    &.qa,
-    &.quality-assurance {
-      background: $track-code-turquose;
+    &.F2F {
+      background: $track-code-blue;
     }
 
-    &.data_science,
-    &.data-science,
-    &.data {
-      background: $tc-orange-110;
+    &.TSK {
+      background: $track-code-turquose;
     }
   }
 
@@ -69,29 +57,19 @@ $track-code-turquose: #0ab88a;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 
-    &.design,
-    &.generic {
-      color: $tc-light-blue-110;
-      background: $tc-light-blue-10;
-    }
-
-    &.develop,
-    &.development {
-      color: $tc-green-110;
-      background: $tc-green-10;
+    &.CH {
+      color: $track-code-green;
+      background: $track-code-green-light;
     }
 
-    &.qa,
-    &.quality-assurance {
-      color: #0ab88a;
-      background: #c1f5e7;
+    &.F2F {
+      color: $track-code-blue;
+      background: $track-code-blue-light;
     }
 
-    &.data_science,
-    &.data-science,
-    &.data {
-      color: $tc-orange-110;
-      background: $tc-orange-10;
+    &.TSK {
+      color: $track-code-turquose;
+      background: $track-code-turquose-light;
     }
   }
 
diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
index e9150ce43f..4c211c9c8e 100644
--- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
+++ b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx
@@ -13,21 +13,14 @@ import { config } from 'topcoder-react-utils';
 
 import {
   Tag,
-  DataScienceTrackTag,
-  DataScienceTrackEventTag,
-  DesignTrackTag,
-  DesignTrackEventTag,
   DevelopmentTrackTag,
-  DevelopmentTrackEventTag,
-  QATrackTag,
-  QATrackEventTag,
 } from 'topcoder-react-ui-kit';
 
 import { COMPETITION_TRACKS } from 'utils/tc';
 import VerifiedTag from 'components/challenge-listing/VerifiedTag';
 import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore';
 import { calculateScore } from '../../../utils/challenge-listing/helper';
-import style from './style.scss';
+import './style.scss';
 
 export default function ChallengeTags(props) {
   const {
@@ -42,66 +35,59 @@ export default function ChallengeTags(props) {
     openForRegistrationChallenges,
   } = props;
 
-  let EventTag;
-  let TrackTag;
-  switch (track) {
-    case COMPETITION_TRACKS.DS:
-      EventTag = DataScienceTrackEventTag;
-      TrackTag = DataScienceTrackTag;
-      break;
-    case COMPETITION_TRACKS.DES:
-      EventTag = DesignTrackEventTag;
-      TrackTag = DesignTrackTag;
-      break;
-    case COMPETITION_TRACKS.DEV:
-      EventTag = DevelopmentTrackEventTag;
-      TrackTag = DevelopmentTrackTag;
-      break;
-    case COMPETITION_TRACKS.QA:
-      EventTag = QATrackEventTag;
-      TrackTag = QATrackTag;
-      break;
-    default:
-      throw new Error('Wrong competition track value');
-  }
-
-
   const filteredChallenge = _.find(openForRegistrationChallenges, { id: challengeId });
   const matchSkills = filteredChallenge ? filteredChallenge.match_skills || [] : [];
   const matchScore = filteredChallenge ? filteredChallenge.jaccard_index || [] : 0;
 
   const tags = technPlatforms.filter(tag => !matchSkills.includes(tag));
+  const abbreviationName = challengeType ? challengeType.name : null;
+  let abbreviation;
+  switch (abbreviationName) {
+    case 'First2Finish':
+      abbreviation = 'F2F';
+      break;
+    case 'Challenge':
+      abbreviation = 'CH';
+      break;
+    case 'Task':
+      abbreviation = 'TSK';
+      break;
+    default:
+      abbreviation = null;
+  }
 
   return (
     <div>
       {
-        challengeType
-        && (
-          <div styleName={`type-tag ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
-            <TrackTag
+        abbreviation && (
+          <div styleName={`type-tag ${abbreviation} ${track === COMPETITION_TRACKS.QA ? 'qa' : ''}`}>
+            <Tag
               onClick={() => (
                 setImmediate(() => setChallengeListingFilter(
-                  { types: [challengeType.abbreviation] },
+                  { types: [abbreviation] },
                 ))
               )
               }
-              to={`${challengesUrl}?types[]=${encodeURIComponent(challengeType.abbreviation)}`}
+              to={`${challengesUrl}?types[]=${encodeURIComponent(abbreviation)}`}
             >
-              {challengeType.name}
-            </TrackTag>
+              {abbreviationName}
+            </Tag>
           </div>
         )
       }
       {
-        events.map(event => (
-          <EventTag
-            to={`https://${event}.topcoder.com`}
+        abbreviation ? events.map(event => (
+          <div
             key={event}
-            theme={track === COMPETITION_TRACKS.QA ? { button: style.qaTrackEventTag } : undefined}
+            styleName={`event-tag ${abbreviation}`}
           >
-            {event}
-          </EventTag>
-        ))
+            <Tag
+              to={`https://${event}.topcoder.com`}
+            >
+              {event}
+            </Tag>
+          </div>
+        )) : null
       }
       {
         matchScore > 0 && config.ENABLE_RECOMMENDER && (
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 341a5372e7..16115573b9 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @import '~styles/mixins';
 
 .challengeAction {
@@ -159,6 +160,98 @@
 
 .type-tag {
   display: inline-block;
+
+  a {
+    color: $tc-white;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: $tc-white;
+    }
+  }
+
+  &.CH {
+    a {
+      background: $track-code-green;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: $track-code-green;
+      }
+    }
+  }
+
+  &.F2F {
+    a {
+      background: $track-code-blue;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: $track-code-blue;
+      }
+    }
+  }
+
+  &.TSK {
+    a {
+      background: $track-code-turquose;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: $track-code-turquose;
+      }
+    }
+  }
+}
+
+.event-tag {
+  display: inline-block;
+
+  &.CH {
+    a {
+      background-color: $track-code-green-light;
+      color: $track-code-green;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: $track-code-green-light;
+        color: $track-code-green;
+      }
+    }
+  }
+
+  &.F2F {
+    a {
+      background-color: $track-code-blue-light;
+      color: $track-code-blue;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: $track-code-blue-light;
+        color: $track-code-blue;
+      }
+    }
+  }
+
+  &.TSK {
+    a {
+      background-color: $track-code-turquose-light;
+      color: $track-code-turquose;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: $track-code-turquose-light;
+        color: $track-code-turquose;
+      }
+    }
+  }
 }
 
 .qa {
diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss
index 1d0be4396c..0acd0a36f6 100644
--- a/src/styles/_mixins/_variables.scss
+++ b/src/styles/_mixins/_variables.scss
@@ -45,3 +45,11 @@ $listing-avatar-white: #f0f0f0;
 $profile-skill-badge: #227681;
 $profile-member-wins: #1e94a3;
 $profile-border-gray: #e9e9e9;
+
+/* track color */
+$track-code-green: #35ac35;
+$track-code-green-light: #d8fdd8;
+$track-code-blue: #2984bd;
+$track-code-blue-light: #bae1f9;
+$track-code-turquose: #0ab88a;
+$track-code-turquose-light: #c1f5e7;