diff --git a/src/assets/images/icon-circle.png b/src/assets/images/icon-circle.png
deleted file mode 100644
index cfd50ab680..0000000000
Binary files a/src/assets/images/icon-circle.png and /dev/null differ
diff --git a/src/assets/images/icon-circle.svg b/src/assets/images/icon-circle.svg
new file mode 100644
index 0000000000..303108a017
--- /dev/null
+++ b/src/assets/images/icon-circle.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.4001 7.00001C13.4001 10.5346 10.5347 13.4 7.0001 13.4C3.46548 13.4 0.600098 10.5346 0.600098 7.00001C0.600098 3.46538 3.46548 0.600006 7.0001 0.600006C10.5347 0.600006 13.4001 3.46538 13.4001 7.00001ZM7.8001 3.80001C7.8001 4.24183 7.44192 4.60001 7.0001 4.60001C6.55827 4.60001 6.2001 4.24183 6.2001 3.80001C6.2001 3.35818 6.55827 3.00001 7.0001 3.00001C7.44192 3.00001 7.8001 3.35818 7.8001 3.80001ZM6.2001 6.20001C5.75827 6.20001 5.4001 6.55818 5.4001 7.00001C5.4001 7.44183 5.75827 7.80001 6.2001 7.80001V10.2C6.2001 10.6418 6.55827 11 7.0001 11H7.8001C8.24192 11 8.6001 10.6418 8.6001 10.2C8.6001 9.75818 8.24192 9.40001 7.8001 9.40001V7.00001C7.8001 6.55818 7.44192 6.20001 7.0001 6.20001H6.2001Z" fill="#137D60"/>
+</svg>
diff --git a/src/shared/components/DateRangePicker/index.jsx b/src/shared/components/DateRangePicker/index.jsx
index 0a58006d46..f49ea5d300 100644
--- a/src/shared/components/DateRangePicker/index.jsx
+++ b/src/shared/components/DateRangePicker/index.jsx
@@ -246,11 +246,13 @@ function DateRangePicker(props) {
       setPreview({
         startDate: date,
         endDate: range.endDate || date,
+        color: '#137d60',
       });
     } else if (isEndDateFocused && date) {
       setPreview({
         startDate: range.startDate || date,
         endDate: date,
+        color: '#137d60',
       });
     }
 
@@ -368,13 +370,13 @@ function DateRangePicker(props) {
         {
           ...range,
           key: 'selection',
-          color: '#0B71E6',
+          color: '#137d60',
         },
         {
           startDate: activeDate,
           endDate: activeDate,
           key: 'active',
-          color: '#59A7FF',
+          color: '#137d60',
         },
       ];
     }
@@ -382,7 +384,7 @@ function DateRangePicker(props) {
       {
         ...range,
         key: 'selection',
-        color: '#0A81FF',
+        color: '#137d60',
       },
     ];
   };
@@ -453,6 +455,8 @@ function DateRangePicker(props) {
                 shownDate={getShownDate()}
                 preview={preview}
                 onPreviewChange={onPreviewChange}
+                rangeColors={'#137d60'}
+                color='#137d60'
               />
               <button
                 type="button"
diff --git a/src/shared/components/DateRangePicker/style.scss b/src/shared/components/DateRangePicker/style.scss
index 21b802f557..56f9560b3e 100644
--- a/src/shared/components/DateRangePicker/style.scss
+++ b/src/shared/components/DateRangePicker/style.scss
@@ -21,14 +21,20 @@
 
 .isRange {
   :global {
+    .rdrStartEdge, .rdrEndEdge {
+      color: $listing-checkbox-green !important;
+    }
+    .rdrDayHovered {
+      background: $listing-checkbox-green !important;
+    }
     .rdrDay {
-      .rdrStartEdge,
-      .rdrEndEdge {
-        background: $listing-checkbox-green !important;
+      .rdrInRange {
+        background: lighten($listing-checkbox-green, 30%) !important;
       }
 
-      .rdrInRange {
-        background: $listing-checkbox-green !important;
+      .rdrStartEdge,
+      .rdrEndEdge {
+        background: lighten($listing-checkbox-green, 30%) !important;
       }
     }
   }
@@ -114,10 +120,6 @@
       }
     }
 
-    .rdrMonthAndYearPickers select {
-      background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230B71E6' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat right 8px center;
-    }
-
     .rdrNextPrevButton {
       position: relative;
       width: 22px;
@@ -257,7 +259,7 @@
           width: 36px;
           height: 36px;
           left: 4px;
-          border: 1px solid $tc-dark-blue-70;
+          border: 1px solid lighten($listing-checkbox-green, 70%);
         }
 
         .rdrSelected,
@@ -272,7 +274,7 @@
         .rdrDayInPreview,
         .rdrDayStartPreview,
         .rdrDayEndPreview {
-          border-color: $tc-dark-blue-70;
+          border-color: lighten($listing-checkbox-green, 70%);
           top: 0;
           bottom: 0;
         }
diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss
index d3124e9e68..1d2d0d4701 100644
--- a/src/shared/components/SortingSelectBar/style.scss
+++ b/src/shared/components/SortingSelectBar/style.scss
@@ -133,6 +133,10 @@ $down-arrow-size: $base-unit;
       overflow: visible;
     }
 
+    .Select.is-focused:not(.is-open) > .Select-control {
+      border-color: #137d60 !important;
+    }
+
     .Select-value-label {
       @include roboto-regular;
 
diff --git a/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss b/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss
index 9bc816da96..521c7584bb 100644
--- a/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss
+++ b/src/shared/components/challenge-listing/ChallengeCard/NumRegistrants/style.scss
@@ -18,9 +18,12 @@
 }
 
 .tooltip {
-  font-weight: 500;
-  font-size: 13px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
   color: $tc-white;
   letter-spacing: 0;
-  padding: 15px;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #2a2a2a;
 }
diff --git a/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss b/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss
index 9bc816da96..521c7584bb 100644
--- a/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss
+++ b/src/shared/components/challenge-listing/ChallengeCard/NumSubmissions/style.scss
@@ -18,9 +18,12 @@
 }
 
 .tooltip {
-  font-weight: 500;
-  font-size: 13px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
   color: $tc-white;
   letter-spacing: 0;
-  padding: 15px;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #2a2a2a;
 }
diff --git a/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss
index 9ef4a445d9..c488224dd7 100644
--- a/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss
+++ b/src/shared/components/challenge-listing/ChallengeCard/Prize/Tip/style.scss
@@ -5,7 +5,7 @@ $prize-space-10: $base-unit * 2;
   @include roboto-regular;
 
   max-width: 480px;
-  padding: 15px;
+  padding: 10px 10px 0 10px;
   overflow: hidden;
 
   .bonuses {
@@ -15,15 +15,16 @@ $prize-space-10: $base-unit * 2;
   }
 
   h1 {
+    @include roboto-regular;
     border: none;
     color: $tc-white;
-    font-size: 15px;
-    line-height: 15px;
+    font-size: 14px;
+    line-height: 16px;
     margin: 0 0 $prize-space-10;
     padding: 0;
     text-align: left;
     text-transform: none;
-    font-weight: 700;
+    font-weight: 500;
   }
 }
 
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
index e5e48e110c..346f77683b 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
@@ -37,7 +37,7 @@ import ChallengeSearchBar from 'containers/challenge-listing/ChallengeSearchBar'
 import { challenge as challengeUtils } from 'topcoder-react-lib';
 import { createStaticRanges } from 'utils/challenge-listing/date-range';
 import ArrowIcon from 'assets/images/ico-arrow-down.svg';
-import CircleIcon from 'assets/images/icon-circle.png';
+import CircleIcon from 'assets/images/icon-circle.svg';
 import Button from '../Button';
 import UiSimpleRemove from '../../Icons/ui-simple-remove.svg';
 import BucketSelector from '../../Sidebar/BucketSelector';
@@ -646,7 +646,7 @@ export default function FiltersPanel({
                     className={style['tooltip-overlay']}
                     trigger={['hover', 'focus']}
                   >
-                    <img src={CircleIcon} alt="circle-icon" />
+                    <CircleIcon />
                   </Tooltip>
                 </div>
               </div>
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
index 678fbba077..1cdeb019c8 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
@@ -332,7 +332,7 @@ hr.hr {
           display: inline-block;
           line-height: 30px;
           min-width: 96px;
-          width: 128px;
+          width: 50%;
           margin-bottom: 6px;
 
           @include xs-to-md {
@@ -467,8 +467,8 @@ hr.hr {
 
             &:checked + .checkbox-label {
               &::before {
-                background-color: #0681ff;
-                border-color: #0681ff;
+                background-color: $listing-checkbox-green;
+                border-color: $listing-checkbox-green;
               }
 
               &::after {
@@ -590,6 +590,7 @@ hr.hr {
 
         .Select-menu-outer {
           margin-top: 1px;
+          font-size: 14px;
         }
       }
     }
@@ -610,11 +611,15 @@ hr.hr {
 
     .recommended-challenge-tooltip {
       position: absolute;
-      right: 48px;
+      right: 54px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       height: 100%;
+
+      @include xs-to-md {
+        left: 210px;
+      }
     }
   }
 }
diff --git a/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss b/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss
index e1048e8f16..8317d0bf3d 100644
--- a/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss
+++ b/src/shared/components/challenge-listing/NoRecommenderChallengeCard/style.scss
@@ -2,12 +2,12 @@
 
 .container {
   min-height: 178px;
-  background-color: #fff;
+  background-color: #f4f4f4;
   border-radius: 4px;
   display: flex;
   justify-content: center;
   flex-direction: column;
-  margin-top: 20px;
+  margin: 16px 24px 24px 24px;
 }
 
 .icon {
@@ -52,7 +52,6 @@
 
 .challenge-link {
   color: #2862b9;
-  text-decoration: underline;
 
   &:hover,
   &:active,
diff --git a/src/shared/components/challenge-listing/Tags.jsx b/src/shared/components/challenge-listing/Tags.jsx
index 02cfd22158..9f938ee9c3 100644
--- a/src/shared/components/challenge-listing/Tags.jsx
+++ b/src/shared/components/challenge-listing/Tags.jsx
@@ -13,8 +13,8 @@ import './style.scss';
 const VISIBLE_TAGS = 3;
 
 /**
- * Implements <Tags> component
- */
+  * Implements <Tags> component
+  */
 export default function Tags({
   expand, isExpanded, tags, onTechTagClicked, challengesUrl, recommended, verifiedTags,
 }) {
@@ -38,33 +38,33 @@ export default function Tags({
   const additionalTags = (items, verifiedTagIndex) => (
     <div styleName="additionalTagWrapper">
       {
-        items.map((item, index) => {
-          if (index < verifiedTagIndex) {
-            return (
-              <VerifiedTag
-                challengesUrl={challengesUrl}
-                item={item}
-                onClick={onClick}
-                recommended={recommended}
-              />
-            );
-          }
-          return (
-            (
-              <div styleName="additionalTag">
-                <Tag
-                  onClick={() => onClick(item.trim())}
-                  key={item}
-                  role="button"
-                  to={tagRedirectLink(item)}
-                >
-                  <span>{item}</span>
-                </Tag>
-              </div>
-            )
-          );
-        })
-      }
+         items.map((item, index) => {
+           if (index < verifiedTagIndex) {
+             return (
+               <VerifiedTag
+                 challengesUrl={challengesUrl}
+                 item={item}
+                 onClick={onClick}
+                 recommended={recommended}
+               />
+             );
+           }
+           return (
+             (
+               <div styleName="additionalTag">
+                 <Tag
+                   onClick={() => onClick(item.trim())}
+                   key={item}
+                   role="button"
+                   to={tagRedirectLink(item)}
+                 >
+                   <span>{item}</span>
+                 </Tag>
+               </div>
+             )
+           );
+         })
+       }
     </div>
   );
 
@@ -94,7 +94,6 @@ export default function Tags({
                       allTags.slice(VISIBLE_TAGS), verifiedTags.length - VISIBLE_TAGS,
                     )}
                     trigger={['hover', 'focus']}
-                    className="overlayTagBg"
                   >
                     <Tag
                       onClick={() => onClick(item.trim())}
diff --git a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss
index 628a494d85..db7634b56f 100644
--- a/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss
+++ b/src/shared/components/challenge-listing/Tooltips/ProgressBarTooltip/style.scss
@@ -14,6 +14,7 @@ div.progress-bar-tooltip {
   color: $tc-white;
   max-width: none;
   padding: 0 $base-unit * 3;
+  background-color: #2a2a2a;
 
   .rc-tooltip-inner {
     padding: 0 $base-unit * 3;
@@ -28,7 +29,7 @@ div.progress-bar-tooltip {
       line-height: $tip-space-15;
       min-width: $tip-offset;
       padding: $tip-space-15 0;
-      background: $tc-gray-80;
+      background: #2a2a2a;
       width: $tip-space-95;
 
       &:last-child {
diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx
index 51d2ed9f9a..87561f6c16 100644
--- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx
+++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/index.jsx
@@ -12,8 +12,8 @@ import Tooltip from 'components/Tooltip';
 import './style.scss';
 
 /**
- * Renders the tooltip's content.
- */
+  * Renders the tooltip's content.
+  */
 function Tip({
   track,
   type,
@@ -21,7 +21,7 @@ function Tip({
   const trackStyle = track.replace(' ', '-').toLowerCase();
   return (
     <div styleName="track-abbreviation-tooltip">
-      <div styleName={`header ${trackStyle}`}>
+      <div styleName="header">
         {type.name}
       </div>
       <div styleName="body">
@@ -46,8 +46,8 @@ function placeArrow(TooltipNode) {
 }
 
 /**
- * Renders the tooltip.
- */
+  * Renders the tooltip.
+  */
 function TrackAbbreviationTooltip({
   children,
   track,
diff --git a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss
index f73e9db228..f3a759b02d 100644
--- a/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss
+++ b/src/shared/components/challenge-listing/Tooltips/TrackAbbreviationTooltip/style.scss
@@ -8,32 +8,20 @@ $track-radius-4: $corner-radius * 2;
   min-width: $base-unit * 45;
   max-width: $base-unit * 60;
   line-height: $track-space-20 - 2;
-  padding: 15px;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #2a2a2a;
 
   .header {
-    font-weight: 700;
-    padding-left: $base-unit * 2;
-
-    &.design {
-      border-left: $track-radius-4 solid $tc-light-blue;
-    }
-
-    &.development {
-      border-left: $track-radius-4 solid $tc-green;
-    }
-
-    &.data-science {
-      border-left: $track-radius-4 solid $tc-orange;
-    }
-
-    &.quality-assurance {
-      border-left: $track-radius-4 solid $tc-purple-120;
-    }
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 16px;
+    margin-top: 5px;
   }
 
   .body {
-    font-weight: 300;
-    margin-top: $base-unit + 1;
-    color: $tc-gray-20;
+    font-weight: 400;
+    color: $tc-white;
+    font-size: 14px;
   }
 }
diff --git a/src/shared/components/challenge-listing/style.scss b/src/shared/components/challenge-listing/style.scss
index 245c7a87bd..5c02fe9435 100644
--- a/src/shared/components/challenge-listing/style.scss
+++ b/src/shared/components/challenge-listing/style.scss
@@ -144,6 +144,10 @@ $challenge-radius-4: $corner-radius * 2;
     font-size: 11px;
     color: $tco-black;
     font-weight: 500;
+
+    &:hover {
+      background-color: #d4d4d4;
+    }
   }
 }