diff --git a/app/components/client/playground-scripts.js b/app/components/client/playground-scripts.js
index 99f4bf9..3fe2752 100644
--- a/app/components/client/playground-scripts.js
+++ b/app/components/client/playground-scripts.js
@@ -23,9 +23,9 @@ document.querySelector("body").addEventListener("click", event => {
 
   if (
     event.target.classList &&
-    event.target.classList[0] === "playground__content__meme__canvas__thumbnail"
+    event.target.classList[0] === "playground-content__meme__canvas__thumbnail"
   ) {
-    for (const thumbnail of document.querySelectorAll(".playground__content__meme__canvas__thumbnail"))
+    for (const thumbnail of document.querySelectorAll(".playground-content__meme__canvas__thumbnail"))
       thumbnail.classList.remove("selected");
 
     event.target.classList.add("selected");
@@ -127,14 +127,14 @@ function initializePlayground() {
   document.querySelector(".playground").classList.add("waiting");
   document.querySelector("#fetch-claim-uri").value = "";
   document.querySelector("#fetch-claim-uri").focus();
-  document.querySelector(".playground__navigation__example:nth-child(1)").classList.add("active");
+  document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active");
 
   send(JSON.stringify({
     message: "landed on playground"
   }));
 
   setTimeout(() => {
-    document.querySelector(".playground__navigation__example:nth-child(1)").click();
+    document.querySelector(".playground-navigation__example:nth-child(1)").click();
   }, 300);
 }
 
@@ -237,15 +237,15 @@ const handleExamples = debounce(event => {
   let exampleNumber;
   const data = event.dataset;
 
-  if (!parseInt(document.querySelector(".playground__navigation__example.active").dataset.example)) return;
-  exampleNumber = parseInt(document.querySelector(".playground__navigation__example.active").dataset.example);
+  if (!parseInt(document.querySelector(".playground-navigation__example.active").dataset.example)) return;
+  exampleNumber = parseInt(document.querySelector(".playground-navigation__example.active").dataset.example);
 
   switch(data.action) {
     case "choose claim":
       fetchMetadata(exampleNumber, data.claimId);
 
-      if (document.querySelector(".playground__navigation__example:nth-child(3)").classList.contains("active"))
-        document.getElementById("fetch-claim-uri").value = event.alt + "#" + event.dataset.claimId;
+      if (document.querySelector(".playground-navigation__example:nth-child(3)").classList.contains("active"))
+        document.getElementById("fetch-claim-uri").value = event.dataset.name + "#" + event.dataset.claimId;
 
       break;
 
@@ -255,9 +255,9 @@ const handleExamples = debounce(event => {
       break;
 
     case "playground, example 1":
-      if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
-        document.getElementById("playground-loader").classList.remove("playground__content__meme");
-        document.getElementById("playground-loader").classList.add("playground__content__trends");
+      if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) {
+        document.getElementById("playground-loader").classList.remove("playground-content__meme");
+        document.getElementById("playground-loader").classList.add("playground-content__trends");
       }
 
       document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
@@ -266,10 +266,10 @@ const handleExamples = debounce(event => {
       if (document.getElementById("playground-url").style.display === "none")
         document.getElementById("playground-url").removeAttribute("style");
 
-      for (const example of document.querySelectorAll(".playground__navigation__example"))
+      for (const example of document.querySelectorAll(".playground-navigation__example"))
         example.classList.remove("active");
 
-      document.querySelector(".playground__navigation__example:nth-child(1)").classList.add("active");
+      document.querySelector(".playground-navigation__example:nth-child(1)").classList.add("active");
 
       document.getElementById("playground-loader").innerHTML = "";
       document.getElementById("playground-results").innerHTML = "";
@@ -284,18 +284,18 @@ const handleExamples = debounce(event => {
       break;
 
     case "playground, example 2":
-      if (document.getElementById("playground-loader").classList.contains("playground__content__trends")) {
-        document.getElementById("playground-loader").classList.remove("playground__content__trends");
-        document.getElementById("playground-loader").classList.add("playground__content__meme");
+      if (document.getElementById("playground-loader").classList.contains("playground-content__trends")) {
+        document.getElementById("playground-loader").classList.remove("playground-content__trends");
+        document.getElementById("playground-loader").classList.add("playground-content__meme");
       }
 
       document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
       document.getElementById("playground-url").style.display = "none";
 
-      for (const example of document.querySelectorAll(".playground__navigation__example"))
+      for (const example of document.querySelectorAll(".playground-navigation__example"))
         example.classList.remove("active");
 
-      document.querySelector(".playground__navigation__example:nth-child(2)").classList.add("active");
+      document.querySelector(".playground-navigation__example:nth-child(2)").classList.add("active");
 
       document.getElementById("playground-loader").innerHTML = "";
       document.getElementById("playground-results").innerHTML = "";
@@ -310,9 +310,9 @@ const handleExamples = debounce(event => {
       break;
 
     case "playground, example 3":
-      if (document.getElementById("playground-loader").classList.contains("playground__content__meme")) {
-        document.getElementById("playground-loader").classList.remove("playground__content__meme");
-        document.getElementById("playground-loader").classList.add("playground__content__trends");
+      if (document.getElementById("playground-loader").classList.contains("playground-content__meme")) {
+        document.getElementById("playground-loader").classList.remove("playground-content__meme");
+        document.getElementById("playground-loader").classList.add("playground-content__trends");
       }
 
       document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
@@ -321,10 +321,10 @@ const handleExamples = debounce(event => {
       if (document.getElementById("playground-url").style.display === "none")
         document.getElementById("playground-url").removeAttribute("style");
 
-      for (const example of document.querySelectorAll(".playground__navigation__example"))
+      for (const example of document.querySelectorAll(".playground-navigation__example"))
         example.classList.remove("active");
 
-      document.querySelector(".playground__navigation__example:nth-child(3)").classList.add("active");
+      document.querySelector(".playground-navigation__example:nth-child(3)").classList.add("active");
 
       document.getElementById("playground-loader").innerHTML = "";
       document.getElementById("playground-results").innerHTML = "";
@@ -358,7 +358,8 @@ function initCanvas() { // eslint-disable-line no-unused-vars
 
   ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
   ctx.fillStyle = "white";
-  ctx.font = "bold 48px 'Inter UI'";
+  ctx.font = "bold 48px 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+  // ctx.font = "bold 48px Arial";
   ctx.lineJoin = "round";
   ctx.lineWidth = 4;
   ctx.strokeStyle = "black";
diff --git a/app/components/playground.js b/app/components/playground.js
index 80a4e78..c4463a3 100644
--- a/app/components/playground.js
+++ b/app/components/playground.js
@@ -14,11 +14,11 @@ import raw from "choo/html/raw";
 
 export default () => dedent`
   <section class="playground">
-    <ul class="playground__navigation">
+    <ul class="playground-navigation">
       ${raw(navigation())}
     </ul>
     <p class="playground__description" id="playground-example-description"></p>
-    <section class="playground__content">${raw(example1())}</section>
+    <section class="playground-content">${raw(example1())}</section>
   </section>
 `;
 
@@ -28,12 +28,12 @@ export default () => dedent`
 
 function example1() {
   return html`
-    <div class="playground__content__urlbar" id="playground-url">
+    <div class="playground-content__urlbar" id="playground-url">
       <span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select a video below" type="text"/>
       <button class="button" data-action="execute claim" type="button">Resolve</button>
     </div>
 
-    <div class="playground__content__trends" id="playground-loader"></div>
+    <div class="playground-content__trends" id="playground-loader"></div>
     <div id="playground-results"></div>
 
     <script>
@@ -45,7 +45,7 @@ function example1() {
 function navigation() { // TODO: Save tutorial position to localStorage
   return dedent`
     <li
-      class="playground__navigation__example"
+      class="playground-navigation__example"
       data-action="playground, example 1"
       data-description="In this example, you can see what runs under the hood when selecting content to view in the LBRY app."
       data-example="1"
@@ -56,7 +56,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
     </li>
 
     <li
-      class="playground__navigation__example"
+      class="playground-navigation__example"
       data-action="playground, example 2"
       data-description="Sometimes you want to create content, not just consume it. In this example, you can create a meme and upload it to LBRY!"
       data-example="2"
@@ -67,7 +67,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
     </li>
 
     <li
-      class="playground__navigation__example"
+      class="playground-navigation__example"
       data-action="playground, example 3"
       data-description="In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead."
       data-example="3"
diff --git a/app/dist/scripts/sockets.js b/app/dist/scripts/sockets.js
index 9b83f6b..c08eb3b 100644
--- a/app/dist/scripts/sockets.js
+++ b/app/dist/scripts/sockets.js
@@ -64,7 +64,7 @@ function initializeWebSocketConnection() {
           initCanvas(); // eslint-disable-line
 
           setTimeout(() => {
-            document.querySelector(".playground__content__meme__canvas__thumbnail").click();
+            document.querySelector(".playground-content__meme__canvas__thumbnail").click();
           }, 500);
         }
 
@@ -72,7 +72,7 @@ function initializeWebSocketConnection() {
           document.getElementById("playground-example-description").classList.remove("success");
 
           document.getElementById("playground-example-description").innerHTML =
-            document.querySelector(".playground__navigation__example.active").dataset.description;
+            document.querySelector(".playground-navigation__example.active").dataset.description;
         }
 
         if (document.getElementById("temp-loader"))
diff --git a/app/sass/pages/_playground.scss b/app/sass/pages/_playground.scss
index 11abee1..e4e3b61 100644
--- a/app/sass/pages/_playground.scss
+++ b/app/sass/pages/_playground.scss
@@ -9,7 +9,6 @@
 
 .playground {
   top: 1rem;
-
   border-top: 1px solid rgba($lbry-gray-1, 0.3);
   position: relative;
 
@@ -32,18 +31,17 @@
 /*!
  * Playground | Navigation
  *
- * @class     .playground__navigation
+ * @class     .playground-navigation
  *
- * @class     .playground__navigation__example
+ * @class     .playground-navigation__example
  * @selector  {::before}
  * @selector  {:last-of-type}
  * @state     {.active}
  * @state     {:hover}
 **/
 
-.playground__navigation {
+.playground-navigation {
   width: 100%;
-
   list-style-type: none;
   padding-top: 1.5rem;
   padding-bottom: 1rem;
@@ -51,107 +49,107 @@
   &::after {
     @include clearfix;
   }
-}
 
-.playground__navigation__example {
-  width: 33.333333%;
-
-  cursor: pointer;
-  float: left;
-  position: relative;
-  text-align: center;
-
-  &::before {
-    width: 100%; height: 2.5rem;
-    top: -0.6rem; left: 0;
-
-    content: "example " attr(data-example);
-    font-size: 0.6rem;
-    font-style: italic;
-    line-height: 1.1;
-    position: absolute;
+  &__example {
+    width: 33.333333%;
+    cursor: pointer;
+    float: left;
+    position: relative;
     text-align: center;
-    text-transform: uppercase;
-  }
 
-  &:not(.active) {
+    &::before {
+      width: 100%; height: 2.5rem;
+      top: -0.6rem; left: 0;
+
+      content: "example " attr(data-example);
+      font-size: 0.6rem;
+      font-style: italic;
+      line-height: 1.1;
+      position: absolute;
+      text-align: center;
+      text-transform: uppercase;
+    }
+
+    &:not(.active) {
+      &::before,
+      button,
+      span {
+        color: $lbry-gray-1;
+      }
+    }
+
+    &.active,
+    &:hover {
+      button {
+        color: $lbry-teal-3;
+      }
+
+      &::before,
+      span {
+        color: $lbry-black;
+      }
+    }
+
+    &.completed {
+      &::after {
+        width: 100%; height: 100%;
+        top: 0; left: 0;
+
+        background-color: rgba($lbry-white, 0.7);
+        content: "✓";
+        font-size: 3rem;
+        line-height: 0.85;
+        position: absolute;
+        z-index: 10;
+      }
+    }
+
     &::before,
     button,
     span {
-      color: $lbry-gray-1;
+      transition: color 0.2s;
     }
-  }
 
-  &.active,
-  &:hover {
     button {
-      color: $lbry-teal-3;
+      background-color: transparent;
+      font-size: 1.25rem;
+      font-weight: 600;
     }
 
-    &::before,
     span {
-      color: $lbry-black;
+      display: block;
+      font-size: 1rem;
     }
   }
-
-  &.completed {
-    &::after {
-      width: 100%; height: 100%;
-      top: 0; left: 0;
-
-      background-color: rgba($lbry-white, 0.7);
-      content: "✓";
-      font-size: 3rem;
-      line-height: 0.85;
-      position: absolute;
-      z-index: 10;
-    }
-  }
-
-  &::before,
-  button,
-  span {
-    transition: color 0.2s;
-  }
-
-  button {
-    background-color: transparent;
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-
-  span {
-    display: block;
-    font-size: 1rem;
-  }
 }
 
+
+
 /*!
  * Playground | Content
  *
- * @class     .playground__content
+ * @class     .playground-content
  *
- * @class     .playground__content__meme
+ * @class     .playground-content__meme
  * @selector  {::after}
  *
- * @class     .playground__content__meme__canvas
+ * @class     .playground-content__meme__canvas
  *
- * @class     .playground__content__meme__canvas__thumbnail
+ * @class     .playground-content__meme__canvas__thumbnail
  * @selector  {:last-of-type}
  * @state     {.selected}
  *
- * @class     .playground__content__meme__editor
+ * @class     .playground-content__meme__editor
  *
- * @class     .playground__content__trends
+ * @class     .playground-content__trends
  * @selector  {::after}
  * @state     {:empty}
  *
- * @class     .playground__content__trend
- * @class     .playground__content__urlbar
+ * @class     .playground-content__trend
+ * @class     .playground-content__urlbar
 **/
 
-.playground__content {
-  // border-top: 1px solid rgba($lbry-black, 0.05);
+.playground-content {
   overflow-y: visible;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -174,7 +172,7 @@
   }
 }
 
-.playground__content__meme {
+.playground-content__meme {
   overflow-y: auto;
   position: relative;
 
@@ -183,7 +181,7 @@
   }
 }
 
-.playground__content__meme__canvas {
+.playground-content__meme__canvas {
   width: 48%;
 
   float: left;
@@ -198,7 +196,7 @@
   }
 }
 
-.playground__content__meme__canvas__thumbnail { // sass-lint:disable-line bem-depth // TODO: FIX THIS
+.playground-content__meme__canvas__thumbnail { // sass-lint:disable-line bem-depth // TODO: FIX THIS
   width: 5rem; height: 5rem;
 
   border-style: solid;
@@ -221,7 +219,7 @@
   }
 }
 
-.playground__content__meme__editor {
+.playground-content__meme__editor {
   width: 50%; min-height: 50vh;
   float: right;
 
@@ -344,12 +342,12 @@
   }
 }
 
-.playground__content__trends {
-  min-width: 0; min-height: 0;
+.playground-content__trends {
+  @extend .media-grid;
+  @include create-grid;
 
-  display: grid;
-  grid-gap: 1rem;
-  grid-template: repeat(1, 1fr) / repeat(3, 1fr);
+  min-width: 0; min-height: 0;
+  grid-gap: var(--spacing-m);
   position: relative;
 
   &:empty {
@@ -361,33 +359,28 @@
   }
 }
 
-.playground__content__trend {
-  img {
-    width: 100%; height: 213px;
+.playground-content__trend {
+  @extend .media;
 
-    cursor: pointer;
-    display: block;
-    margin-bottom: 0.5rem;
-    object-fit: cover;
-    object-position: center;
-    position: relative;
+  .media__subtitle {
+    font-size: 0.8rem;
   }
 
-  figcaption {
-    cursor: pointer;
-    font-size: 1rem;
-    line-height: 1.33;
+  .media__thumb {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-bottom: 0.5rem;
+  }
 
-    span {
-      color: rgba($lbry-black, 0.3);
-      display: block;
-      font-size: 0.8rem;
-      letter-spacing: 0.025rem;
-    }
+  .media__title {
+    @include line-clamp(2.4rem, 2);
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
   }
 }
 
-.playground__content__urlbar {
+.playground-content__urlbar {
   border: 1px solid $lbry-gray-1;
   display: flex;
   margin-bottom: 1rem;
diff --git a/app/sockets.js b/app/sockets.js
index f4ac927..54dd9ce 100644
--- a/app/sockets.js
+++ b/app/sockets.js
@@ -99,14 +99,22 @@ function generateContent(exampleNumber, displayTrendingContent) {
         for (const part of collection) {
           try {
             renderedContentCollection.push(`
-              <figure class="playground__content__trend">
-                <img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${makeImageSourceSecure(part.value.stream.metadata.thumbnail)}"/>
+              <section class="playground-content__trend">
+                <figure
+                  class="media__thumb"
+                  data-action="choose claim"
+                  data-claim-id="${part.name}"
+                  style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
+                </figure>
 
-                <figcaption data-action="choose claim" data-claim-id="${part.name}">
+                <div class="media__title">
                   ${part.value.stream.metadata.title}
-                  <span>${part.channel_name}</span>
-                </figcaption>
-              </figure>
+                </div>
+
+                <div class="media__subtitle">
+                  ${part.channel_name}
+                </div>
+              </section>
             `);
           } catch (err) {
             return; // TODO: Return nice error message
@@ -153,13 +161,23 @@ function generateContent(exampleNumber, displayTrendingContent) {
           part.channel_name
         ) {
           renderedContentCollection.push(`
-            <figure class="playground__content__trend">
-              <img alt="${part.name}" data-action="choose claim" data-claim-id="${part.claim_id}" src="${makeImageSourceSecure(part.value.stream.metadata.thumbnail)}"/>
-              <figcaption data-action="choose claim" data-claim-id="${part.claim_id}">
+            <section class="playground-content__trend">
+              <figure
+                class="media__thumb"
+                data-action="choose claim"
+                data-claim-id="${part.claim_id}"
+                data-name=${part.name}
+                style="background-image: url(${makeImageSourceSecure(part.value.stream.metadata.thumbnail)})">
+              </figure>
+
+              <div class="media__title">
                 ${part.value.stream.metadata.title}
-                <span>${part.channel_name}</span>
-              </figcaption>
-            </figure>
+              </div>
+
+              <div class="media__subtitle">
+                ${part.channel_name}
+              </div>
+            </section>
           `);
         }
       }
@@ -216,17 +234,17 @@ function generateMemeCreator(socket) {
   const renderedImages = [];
 
   for (const image of images)
-    renderedImages.push(`<img alt="${image.alt}" class="playground__content__meme__canvas__thumbnail" src="${image.src}"/>`);
+    renderedImages.push(`<img alt="${image.alt}" class="playground-content__meme__canvas__thumbnail" src="${image.src}"/>`);
 
   const memeCreator = html`
-    <div class="playground__content__meme__canvas">
+    <div class="playground-content__meme__canvas">
       <img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/>
       <canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
 
       ${renderedImages}
     </div>
 
-    <form class="playground__content__meme__editor">
+    <form class="playground-content__meme__editor">
       <h2>Image Text</h2>
 
       <fieldset>
diff --git a/package.json b/package.json
index fe22f90..5f4051e 100755
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "choo-websocket": "^2.0.0",
     "colorette": "^1.0.7",
     "cors": "^2.8.5",
-    "cron": "^1.5.0",
+    "cron": "^1.5.1",
     "date-format-lite": "^17.7.0",
     "decamelize": "^2.0.0",
     "dedent": "^0.7.0",
@@ -23,7 +23,7 @@
     "fastify-compress": "^0.7.1",
     "fastify-helmet": "^3.0.0",
     "fastify-plugin": "^1.3.0",
-    "fastify-static": "^0.14.0",
+    "fastify-static": "^1.0.0",
     "fastify-ws": "^1.0.0",
     "front-matter": "^3.0.1",
     "fs-exists-sync": "^0.1.0",
@@ -45,7 +45,7 @@
     "@babel/cli": "^7.2.0",
     "@babel/core": "^7.2.0",
     "@babel/plugin-external-helpers": "7.2.0",
-    "@babel/plugin-proposal-class-properties": "7.2.0",
+    "@babel/plugin-proposal-class-properties": "7.2.1",
     "@babel/plugin-proposal-decorators": "7.2.0",
     "@babel/plugin-proposal-export-namespace-from": "7.2.0",
     "@babel/plugin-proposal-function-sent": "7.2.0",
@@ -59,7 +59,7 @@
     "@inc/eslint-config": "^1.1.2",
     "@inc/sasslint-config": "^1.1.2",
     "@lbry/color": "^1.0.5",
-    "@lbry/components": "^1.4.2",
+    "@lbry/components": "^1.4.4",
     "eslint": "^5.9.0",
     "husky": "^1.2.0",
     "nodemon": "^1.18.7",