diff --git a/changes/changelog.d/637.bugfix b/changes/changelog.d/637.bugfix
new file mode 100644
index 0000000000000000000000000000000000000000..19764e419848dcee45127fcf504ef717d0f64297
--- /dev/null
+++ b/changes/changelog.d/637.bugfix
@@ -0,0 +1 @@
+Fixed greyed tracks in radio builder and detail page (#637)
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 521a66f8715d0fce86e569ea1c2daa41e20630f6..27a052269e460020b14fe56c4d9c98f80a5b288a 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -120,7 +120,14 @@ export default {
       this.isLoading = true
       let getTracks = new Promise((resolve, reject) => {
         if (self.track) {
-          resolve([self.track])
+          if (!self.track.uploads || self.track.uploads.length === 0) {
+            // fetch uploads from api
+            axios.get(`tracks/${self.track.id}/`).then((response) => {
+              resolve([response.data])
+            })
+          } else {
+            resolve([self.track])
+          }
         } else if (self.tracks) {
           resolve(self.tracks)
         } else if (self.playlist) {
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index fd8b2daaf134473aff45cef895b104bc3a7f6ba7..d3b7dc734b91b528561c764873de1a75e53b9317 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -1,7 +1,7 @@
 <template>
   <tr>
     <td>
-      <play-button class="basic icon" :discrete="true" :track="track"></play-button>
+      <play-button class="basic icon" :discrete="true" :is-playable="playable" :track="track"></play-button>
     </td>
     <td>
       <img class="ui mini image" v-if="track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
@@ -60,7 +60,8 @@ export default {
   props: {
     track: {type: Object, required: true},
     artist: {type: Object, required: false},
-    displayPosition: {type: Boolean, default: false}
+    displayPosition: {type: Boolean, default: false},
+    playable: {type: Boolean, required: false, default: false},
   },
   components: {
     TrackFavoriteIcon,
@@ -86,9 +87,9 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-
 tr:not(:hover) {
-  .favorite-icon:not(.favorited), .playlist-icon {
+  .favorite-icon:not(.favorited),
+  .playlist-icon {
     visibility: hidden;
   }
 }
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 9612accbc39d89fcbe569ff7be9c9dd020439430..937025807864f950f3c4dae60a503c7ca8b29f54 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -13,6 +13,7 @@
     </thead>
     <tbody>
       <track-row
+        :playable="playable"
         :display-position="displayPosition"
         :track="track"
         :artist="artist"
@@ -31,6 +32,7 @@ import Modal from '@/components/semantic/Modal'
 export default {
   props: {
     tracks: {type: Array, required: true},
+    playable: {type: Boolean, required: false, default: false},
     artist: {type: Object, required: false},
     displayPosition: {type: Boolean, default: false}
   },
@@ -48,7 +50,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 tr:not(:hover) .favorite-icon:not(.favorited) {
   display: none;
 }
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 5698a71f422d44568c6cfa63ff42f0edd9ca9be3..0a86958634b71c794fe44242b26b918fcaf4f13a 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -77,7 +77,7 @@
             </builder-filter>
           </tbody>
         </table>
-        <template v-if="checkResult">
+        <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
           <h3
             class="ui header"
             v-translate="{count: checkResult.candidates.count}"
@@ -85,7 +85,7 @@
             translate-plural="%{ count } tracks matching combined filters">
             %{ count } track matching combined filters
           </h3>
-          <track-table v-if="checkResult.candidates.sample" :tracks="checkResult.candidates.sample"></track-table>
+          <track-table v-if="checkResult.candidates.sample" :tracks="checkResult.candidates.sample" :playable="true"></track-table>
         </template>
       </section>
     </div>