diff --git a/src/components/cast/_cast.scss b/src/components/cast/_cast.scss
index 050e9fb07..3e39249c8 100644
--- a/src/components/cast/_cast.scss
+++ b/src/components/cast/_cast.scss
@@ -8,12 +8,20 @@
     background-color: rgba(255, 255, 255, 0);
     border: none;
     cursor: pointer;
-    --connected-color: rgba(1, 172, 205, 0.8);
+    --connected-color: #{$grayscale4};
     --disconnected-color: #{$grayscale4};
-  }
 
-  .cast-button:hover {
-    --disconnected-color: #{$white};
-    --connected-color: #{$brand-color};
+    &:hover {
+      --connected-color: #{$white};
+      --disconnected-color: #{$white};
+    }
+
+    &.cast-button-active {
+      --connected-color: rgba(1, 172, 205, 0.8);
+  
+      &:hover {
+        --connected-color: #{$brand-color};  
+      }
+    }
   }
 }
diff --git a/src/components/cast/cast.js b/src/components/cast/cast.js
index bd389baaa..97a54d116 100644
--- a/src/components/cast/cast.js
+++ b/src/components/cast/cast.js
@@ -73,6 +73,7 @@ class Cast extends Component {
    */
   render(props: any): ?React$Element<any> {
     if (props.isCasting || props.isCastAvailable) {
+      const className = props.isCasting ? `${style.castButton} ${style.castButtonActive}` : style.castButton;
       return (
         <div
           role="button"
@@ -81,7 +82,7 @@ class Cast extends Component {
           onClick={this.onClick}
           onKeyDown={this.onKeyDown}>
           <Tooltip label={this.props.castText}>
-            <google-cast-launcher className={style.castButton} tabIndex="0" />
+            <google-cast-launcher className={className} tabIndex="0" />
           </Tooltip>
         </div>
       );