diff --git a/src/encoded/static/components/item-pages/CaseView/CaseStats.js b/src/encoded/static/components/item-pages/CaseView/CaseStats.js
index 77033e52bb..9b3450b378 100644
--- a/src/encoded/static/components/item-pages/CaseView/CaseStats.js
+++ b/src/encoded/static/components/item-pages/CaseView/CaseStats.js
@@ -36,7 +36,7 @@ function mapFeaturesToBadges(features = []) {
         const { display_title = null, '@id': featureID } = feature;
         return (
             // TODO: create own ~ `.tag` styling or override Bootstrap's default. Maybe.
-            <a className="badge badge-pill badge-info text-400 text-small d-inline-block me-03 mb-03 pb-04 link-underline-hover"
+            <a className="badge rounded-pill bg-info text-400 text-small d-inline-block me-03 mb-03 pb-04"
                 href={featureID} target="_blank" rel="noopener noreferrer" key={featureID}>
                 { display_title }
             </a>
diff --git a/src/encoded/static/scss/encoded/_base.scss b/src/encoded/static/scss/encoded/_base.scss
index e4f2140dba..3a2c665ddf 100644
--- a/src/encoded/static/scss/encoded/_base.scss
+++ b/src/encoded/static/scss/encoded/_base.scss
@@ -22,9 +22,11 @@ $modal-backdrop-opacity : 0.8;
 
 $facetlist-selected-term-color : #248bac;
 
-$badge-color-warning : #e29302;
-$badge-color-error : #bd0000;
-$badge-color-internal-action: #d0d0d0;
+$badge-padding-y: .25em;
+$badge-padding-x: .4em;
+$badge-font-size: 75%;
+$badge-border-radius: .25em;
+$badge-color: #fff;
 
 $font-family-sans-serif : "Source Sans Pro", "Work Sans", Helvetica, Arial, sans-serif;
 $font-family-serif : "Yrsa", "Times New Roman", Georgia, Times, serif;