diff --git a/components/app/Appbar.vue b/components/app/Appbar.vue
index af10a670..e3424b01 100644
--- a/components/app/Appbar.vue
+++ b/components/app/Appbar.vue
@@ -22,7 +22,7 @@
 
       <!-- Must be connected to a server to cast, only supports media items on server -->
       <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center pt-0.5" @click="castClick">
-        <span class="material-icons" :class="isCasting ? 'text-success' : ''">cast</span>
+        <span class="material-icons">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
       </div>
 
       <nuxt-link v-if="user" class="h-7 mx-1.5" style="padding-top: 3px" to="/search">
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 13226b45..a1d97843 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -7,7 +7,7 @@
         <span class="material-icons text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">expand_more</span>
       </div>
       <div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer">
-        <span class="material-icons text-3xl" :class="isCasting ? (coverBgIsLight ? 'text-successDark' : 'text-success') : coverBgIsLight ? 'text-black' : ''" @click="castClick">cast</span>
+        <span class="material-icons text-3xl" :class="coverBgIsLight ? 'text-successDark' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
       </div>
       <div class="top-6 right-4 absolute cursor-pointer">
         <span class="material-icons text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>