diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js
index 240926b1cc..8a7ab80f68 100644
--- a/ui/src/hosts/components/HostsTable.js
+++ b/ui/src/hosts/components/HostsTable.js
@@ -84,9 +84,9 @@ const HostsTable = React.createClass({
   sortableClasses(key) {
     if (this.state.sortKey === key) {
       if (this.state.sortDirection === 'asc') {
-        return 'sortable-header sorting-up'
+        return 'sortable-header sorting-ascending'
       }
-      return 'sortable-header sorting-down'
+      return 'sortable-header sorting-descending'
     }
     return 'sortable-header'
   },
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index 540a75f8ad..09c3e0b911 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -125,13 +125,9 @@ table .monotype {
     cursor: pointer;
     color: $g19-ghost;
     background-color: $g5-pepper;
-
-    &:after {
-      opacity: 1;
-    }
   }
-  &.sorting-down,
-  &.sorting-up {
+  &.sorting-ascending,
+  &.sorting-descending {
     background-color: $g5-pepper;
     color: $g19-ghost;
 
@@ -139,11 +135,11 @@ table .monotype {
       opacity: 1;
     }
   }
-  &.sorting-down {
-
-    &:after {
-      transform: translateY(-50%) rotate(180deg);
-    }
+  &.sorting-ascending:after {
+    transform: translateY(-50%) rotate(180deg);
+  }
+  &.sorting-descending:after {
+    transform: translateY(-50%) rotate(0deg);
   }
 }