diff --git a/src/components/playlists/PlaylistCard.vue b/src/components/playlists/PlaylistCard.vue
index b0b468b7..7a081435 100644
--- a/src/components/playlists/PlaylistCard.vue
+++ b/src/components/playlists/PlaylistCard.vue
@@ -2,12 +2,23 @@
   <router-link
     :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
     :playlist="props.playlist"
-    class="p-card rounded shadow-sm"
+    class="p-card rounded"
   >
-    <div class="image rounded"></div>
+    <div
+      class="image rounded"
+      :style="{
+        backgroundImage: `url(${props.playlist.image})`,
+      }"
+    ></div>
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
-      <div class="count">{{ props.playlist.count }} Tracks</div>
+      <div class="count">
+        <span v-if="props.playlist.count == 0">No Tracks</span>
+        <span v-else-if="props.playlist.count == 1"
+          >{{ props.playlist.count }} Track</span
+        >
+        <span v-else>{{ props.playlist.count }} Tracks</span>
+      </div>
     </div>
   </router-link>
 </template>
@@ -23,7 +34,6 @@ const props = defineProps<{
 <style lang="scss">
 .p-card {
   width: 100%;
-  background: $gray;
   padding: $small;
   transition: all 0.2s ease;
 
@@ -36,9 +46,7 @@ const props = defineProps<{
 
   .image {
     min-width: 100%;
-    height: 10rem;
-    background-image: url("../../assets/images/eggs.jpg");
-    background-size: auto 10rem;
+    height: 11rem;
     transition: all 0.2s ease;
   }
 
@@ -51,7 +59,7 @@ const props = defineProps<{
 
     .count {
       font-size: $medium;
-      color: $indigo;
+      color: $gray1;
     }
   }
 }