diff --git a/ui/js/page/discover/view.jsx b/ui/js/page/discover/view.jsx
index 3a4e2f6c7..2817fb946 100644
--- a/ui/js/page/discover/view.jsx
+++ b/ui/js/page/discover/view.jsx
@@ -15,22 +15,13 @@ class FeaturedCategory extends React.PureComponent {
     });
   }
 
-  componentDidMount() {
-    const prevIcon = ReactDOM.findDOMNode(this.refs.scrollPrevious);
-    const nextIcon = ReactDOM.findDOMNode(this.refs.scrollNext);
-    this.scrollPreviousHandler = this.handleScrollPrevious.bind(this);
-    this.scrollNextHandler = this.handleScrollNext.bind(this);
-    prevIcon.addEventListener("click", this.scrollPreviousHandler);
-    nextIcon.addEventListener("click", this.scrollNextHandler);
-  }
-
   handleScrollPrevious() {
     const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
     if (cardRow.scrollLeft > 0) {
       // check the visible cards
       const cards = cardRow.getElementsByTagName("section");
-      var firstVisibleCard = null;
-      var firstVisibleIdx = -1;
+      let firstVisibleCard = null;
+      let firstVisibleIdx = -1;
       for (var i = 0; i < cards.length; i++) {
         if (this.isCardVisible(cards[i], cardRow, false)) {
           firstVisibleCard = cards[i];
@@ -61,8 +52,8 @@ class FeaturedCategory extends React.PureComponent {
 
     // check the visible cards
     const cards = cardRow.getElementsByTagName("section");
-    var lastVisibleCard = null;
-    var lastVisibleIdx = -1;
+    let lastVisibleCard = null;
+    let lastVisibleIdx = -1;
     for (var i = 0; i < cards.length; i++) {
       if (this.isCardVisible(cards[i], cardRow, true)) {
         lastVisibleCard = cards[i];
@@ -108,8 +99,8 @@ class FeaturedCategory extends React.PureComponent {
     }
 
     const component = this;
-    var diff = target - cardRow.scrollLeft;
-    var tick = diff / duration * 10;
+    const diff = target - cardRow.scrollLeft;
+    const tick = diff / duration * 10;
     setTimeout(() => {
       cardRow.scrollLeft = cardRow.scrollLeft + tick;
       if (cardRow.scrollLeft === target) {
@@ -157,13 +148,6 @@ class FeaturedCategory extends React.PureComponent {
     return 1;
   }
 
-  componentWillUnmount() {
-    const prevIcon = ReactDOM.findDOMNode(this.refs.scrollPrevious);
-    const nextIcon = ReactDOM.findDOMNode(this.refs.scrollNext);
-    prevIcon.removeEventListener("click", this.scrollPreviousHandler);
-    nextIcon.removeEventListener("click", this.scrollNextHandler);
-  }
-
   render() {
     const { category, names } = this.props;
     const leftNavClassName =
@@ -176,10 +160,20 @@ class FeaturedCategory extends React.PureComponent {
     return (
       <div className="card-row card-row--small">
         <div className={leftNavClassName}>
-          <Icon ref="scrollPrevious" icon="icon-chevron-left" />
+          <a
+            className="card-row__scroll-button"
+            onClick={this.handleScrollPrevious.bind(this)}
+          >
+            <Icon icon="icon-chevron-left" />
+          </a>
         </div>
         <div className={rightNavClassName}>
-          <Icon ref="scrollNext" icon="icon-chevron-right" />
+          <a
+            className="card-row__scroll-button"
+            onClick={this.handleScrollNext.bind(this)}
+          >
+            <Icon icon="icon-chevron-right" />
+          </a>
         </div>
         <h3 className="card-row__header">
           {category}
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 3501c2748..a81470bfb 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -205,18 +205,19 @@ $height-card-small: $spacing-vertical * 15;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
+
   /*hacky way to give space for hover */
-  padding-right: 20px;
-  margin-right: -20px;
+  padding-right: 30px;
 }
 .card-row__items {
   width: 100%;
   overflow: hidden;
+
   /*hacky way to give space for hover */
   padding-top: 20px;
   margin-top: -20px;
-  padding-right: 20px;
-  margin-right: -20px;
+  padding-right: 30px;
+  margin-right: -30px;
 }
 .card-row__header {
   margin-bottom: $spacing-vertical / 3;
@@ -229,7 +230,7 @@ $height-card-small: $spacing-vertical * 15;
   top: ($font-size * 1.4 * $font-line-height) + ($spacing-vertical / 3);
   height: ($width-card-small * 9 / 16) + ($font-size * 0.82 * $font-line-height * 4) + ($spacing-vertical * 4/3)
 }
-.card-row__nav .icon {
+.card-row__nav .card-row__scroll-button {
   background: $color-bg;
   color: $color-help;
   box-shadow: $box-shadow-layer;
@@ -239,6 +240,13 @@ $height-card-small: $spacing-vertical * 15;
   left: 0;
   top: 36%;
   z-index: 2;
+  opacity: 0.5;
+  transition: transform 60ms ease-in-out;
+
+  &:hover {
+    opacity: 1.0;
+    transform: scale($card-link-scaling * 1.1)
+  }
 }
 .card-row__nav.left-nav {
   left: 0;
@@ -248,4 +256,4 @@ $height-card-small: $spacing-vertical * 15;
 }
 .card-row__nav.can-scroll {
   display: block
-}
\ No newline at end of file
+}