diff --git a/app/sass/pages/_playground.scss b/app/sass/pages/_playground.scss
index 67a52d9..b8398f1 100644
--- a/app/sass/pages/_playground.scss
+++ b/app/sass/pages/_playground.scss
@@ -250,6 +250,7 @@
   }
 
   .media__thumb {
+    background-image: linear-gradient(135deg, var(--lbry-teal-2), var(--lbry-blue-3) 100%);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
diff --git a/app/sockets.js b/app/sockets.js
index c528c7c..5d067d0 100644
--- a/app/sockets.js
+++ b/app/sockets.js
@@ -123,8 +123,8 @@ function generateContent(exampleNumber, displayTrendingContent) {
                   class="media__thumb"
                   data-action="choose claim"
                   data-claim-id="${part.name}"
-                  style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
-                </figure>
+                  ${part.value.stream.metadata.thumbnail.length ? `style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})"` : ""}
+                ></figure>
 
                 <div class="media__title">
                   ${part.value.stream.metadata.title}
@@ -359,6 +359,9 @@ async function getTrendingContent() {
 }
 
 function makeImageSourceSecure(url) {
+  if (!url || !url.length)
+    return url;
+
   const originalUrl = new URL(url);
 
   if (originalUrl.protocol !== "https")