diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index d99934917c9..0e43c125831 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -24,10 +24,7 @@
 
   .icons {
     .badge-notification {
-      color: $tertiary !important;
-      /* this !important is a terrible hack but the badge colors are
-      being overridden in a way I can't figure out on mobile, appears
-      to be a CSS precedence problem */
+      color: $secondary;
     }
 
     .active .icon {
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 18010ed49d3..65c04179c9a 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -91,10 +91,12 @@
   td {
     font-size: 14px;
   }
+
+  a.title {color: $primary;}
+  a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);}
+
   .main-link {
     font-size: 16px;
-      a {color: $primary;}
-      a:visited {color: scale-color($primary, $lightness: 50%);}
     i.score {
       color: $success;
       cursor: pointer;