diff --git a/extras/popup/popup.css b/extras/popup/popup.css
index 2bc77431..879736c8 100644
--- a/extras/popup/popup.css
+++ b/extras/popup/popup.css
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
 
 html {
-  --radius: .5rem;
+  --radius: 0.5rem;
   width: 400px;
   font-family: "Inter", sans-serif;
   height: 500px;
@@ -55,7 +55,7 @@ a {
   margin: 2em;
   margin-bottom: 1rem;
   background: var(--feature-bg);
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   padding: 17px;
   padding-top: 5px;
   position: relative;
@@ -345,22 +345,22 @@ input:checked + .slider:before {
 .feature span.new-feature-tag {
   background-color: var(--theme);
   color: white;
-  padding: .25rem;
+  padding: 0.25rem;
   display: inline-block;
-  margin-left: .5rem;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  border-radius: .75rem;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: 0.75rem;
   position: relative;
-  top: -.15rem;
+  top: -0.15rem;
   user-select: none;
-  transition: opacity .3s, transform .3s;
+  transition: opacity 0.3s, transform 0.3s;
   opacity: 1;
   transform: none;
 }
 
 .feature span.new-feature-tag:hover {
-  opacity: .75;
+  opacity: 0.75;
   transform: scale(105%);
 }
 
@@ -380,11 +380,11 @@ span.new-feature-tag.beta {
 .warning-component {
   background-color: #fc8c4f20;
   border: 1.5px solid #fc8c4f;
-  border-radius: .5rem;
-  padding: .5rem;
-  font-size: .8rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.8rem;
   font-weight: 600;
-  margin-top: .5rem;
+  margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-bottom-width: 3px;
@@ -402,10 +402,10 @@ span.new-feature-tag.beta {
 .info-component {
   background-color: #fcd44f20;
   border: 1.5px solid #fcd44f;
-  border-radius: .5rem;
-  padding: .5rem;
-  font-size: .8rem;
-  margin-top: .5rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-bottom-width: 3px;
@@ -418,4 +418,14 @@ span.new-feature-tag.beta {
   margin-right: 0.5rem;
   margin-inline-end: 10px;
   transform: scale(1.15);
-}
\ No newline at end of file
+}
+
+.feature h3 .icon svg {
+  height: 1rem;
+  width: 1rem;
+  margin-right: 1.5rem;
+  position: relative;
+  left: 0.6rem;
+  transform: scale(1.5);
+  top: 0.1rem;
+}
diff --git a/extras/popup/popup.js b/extras/popup/popup.js
index f06dcff6..fe02ecae 100644
--- a/extras/popup/popup.js
+++ b/extras/popup/popup.js
@@ -762,6 +762,8 @@ async function getFeatures() {
       }
     }
 
+    div.appendChild(generateComponents(feature.components || []));
+
     var span = document.createElement("span");
     span.textContent =
       (chrome.i18n.getMessage("creditsText") || "Credits") + ": ";
@@ -801,8 +803,6 @@ async function getFeatures() {
     });
     div.appendChild(span);
 
-    div.appendChild(generateComponents(feature.components || []));
-
     if (
       feature.versionAdded?.replace("v", "") ===
       chrome.runtime.getManifest().version.toString()
@@ -835,6 +835,7 @@ async function getFeatures() {
       document.querySelector(".settings").appendChild(div);
     }
   }
+  getTrending()
 }
 getFeatures();
 
@@ -1293,22 +1294,48 @@ function generateComponents(components) {
             value = true;
           }
         }
+        if (cond.type === "version") {
+          if (cond.value === chrome.runtime.getManifest().version) {
+            value = true;
+          }
+        }
         conditions.push(value);
       });
 
       if (el.if.type === "any") {
-        if (!!conditions.find((cond) => cond)) {
-          div.appendChild(element);
+        if (!conditions.find((cond) => cond)) {
+          div.style.display = "none"
         }
       } else if (el.if.type === "all") {
-        if (conditions.find((cond) => !cond) === undefined) {
-          div.appendChild(element);
+        if (conditions.find((cond) => !cond) !== undefined) {
+          div.style.display = "none"
         }
       }
-    } else {
-      div.appendChild(element);
     }
+    div.appendChild(element);
   });
 
   return div;
 }
+
+async function getTrending() {
+  let data = await (await fetch("https://data.scratchtools.app/trending/")).json()
+
+  data.forEach(function(el) {
+    if (!document.querySelector(`div.feature[data-id='${el}']`)) return;
+
+    let icon = document.createElement("span")
+    icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m122-218-67-67 321-319 167 167 203-205H628v-95h278v278h-94v-115L542-303 375-470 122-218Z" fill="var(--theme)"/></svg>'
+    icon.className = "icon"
+
+    icon.addEventListener("click", function () {
+      ScratchTools.modals.create({
+        title: "Trending feature",
+        description:
+          "This feature is especially popular among ScratchTools users. Try it out!",
+      });
+    });
+
+    document.querySelector(`div.feature[data-id='${el}'] > h3`).prepend(icon)
+  })
+}
\ No newline at end of file
diff --git a/extras/style.css b/extras/style.css
index 0440125f..457b1f3e 100644
--- a/extras/style.css
+++ b/extras/style.css
@@ -25,11 +25,13 @@ a {
   cursor: pointer;
 }
 
-.more-settings-btn svg, .feedback-btn svg, .support-btn svg {
+.more-settings-btn svg,
+.feedback-btn svg,
+.support-btn svg {
   height: 1rem;
   position: relative;
   top: 0.2rem;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   width: 1rem;
 }
 
@@ -83,7 +85,7 @@ a {
   padding-left: 1.5rem !important;
   padding-right: 1.5rem !important;
   color: var(--primary-color);
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   padding: 1rem;
   padding-top: 5px;
   margin-bottom: 0px;
@@ -322,7 +324,7 @@ a {
 .section1 .note {
   color: rgba(0, 0, 0, 0.8);
   padding: 2em;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 .section1 .note.yellow {
@@ -491,7 +493,7 @@ button.secondary-btn {
   position: relative;
   top: 3.1rem;
   border-left: 2px solid var(--searchbar-bg);
-    margin-left: 0.5rem;
+  margin-left: 0.5rem;
 }
 
 .buttons button {
@@ -618,36 +620,36 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
   }
 
   .feedback-btn,
-  .more-settings-btn, .support-btn {
+  .more-settings-btn,
+  .support-btn {
     right: 1rem;
     left: inherit;
   }
 }
 
-
-.themes-div .dropdown{
+.themes-div .dropdown {
   position: relative;
-    display: inline-block;
-    margin-left: 1rem;
-    margin-right: 1rem;
-    height: max-content;
-    width: 12.5rem;
-    box-sizing: border-box;
-    background: var(--theme);
-    float: right;
-    margin-top: 3.8em;
-    right: -4.5em;
-    border-radius: 0 0 var(--radius) var(--radius);
-    overflow: hidden;
-    border: 1.5px solid rgba(0,0,0,0.1);
-    border-top: none;
-    box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
-}
-
-.themes-div .dropdown .item{
+  display: inline-block;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  height: max-content;
+  width: 12.5rem;
+  box-sizing: border-box;
+  background: var(--theme);
+  float: right;
+  margin-top: 3.8em;
+  right: -4.5em;
+  border-radius: 0 0 var(--radius) var(--radius);
+  overflow: hidden;
+  border: 1.5px solid rgba(0, 0, 0, 0.1);
+  border-top: none;
+  box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
+}
+
+.themes-div .dropdown .item {
   height: 2.5rem;
   width: 12.5rem;
-  color:white;
+  color: white;
   font-size: 1rem;
   background: var(--theme);
   padding: 0.5rem;
@@ -658,7 +660,7 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
   align-items: center;
   padding: 0.5em;
 }
-.themes-div .dropdown .item .circle{
+.themes-div .dropdown .item .circle {
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 50%;
@@ -669,12 +671,12 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
   margin-left: 0.5rem; */
 }
 
-.themes-div .dropdown .item#text{
+.themes-div .dropdown .item#text {
   float: left;
   margin-top: 0.5rem;
 }
-.themes-div .dropdown .item:hover{
-  background:color-mix(in srgb, var(--theme) 95%, black);
+.themes-div .dropdown .item:hover {
+  background: color-mix(in srgb, var(--theme) 95%, black);
 }
 
 .feedback-btn .notification {
@@ -693,23 +695,23 @@ body[data-filter="Egg"] .feature[data-type*="Egg"] {
 .feature span.new-feature-tag {
   background-color: var(--theme);
   color: white;
-  padding: .25rem;
+  padding: 0.25rem;
   display: inline-block;
-  margin-left: .5rem;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  border-radius: .75rem;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-radius: 0.75rem;
   position: relative;
-  top: -.15rem;
+  top: -0.15rem;
   line-height: normal;
   user-select: none;
-  transition: opacity .3s, transform .3s;
+  transition: opacity 0.3s, transform 0.3s;
   opacity: 1;
   transform: none;
 }
 
 .feature span.new-feature-tag:hover {
-  opacity: .75;
+  opacity: 0.75;
   transform: scale(105%);
 }
 
@@ -725,11 +727,11 @@ span.new-feature-tag.beta {
 .warning-component {
   background-color: #fc8c4f20;
   border: 1.5px solid #fc8c4f;
-  border-radius: .5rem;
-  padding: .5rem;
-  font-size: .8rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.8rem;
   font-weight: 600;
-  margin-top: .5rem;
+  margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-bottom-width: 3px;
@@ -747,10 +749,10 @@ span.new-feature-tag.beta {
 .info-component {
   background-color: #fcd44f20;
   border: 1.5px solid #fcd44f;
-  border-radius: .5rem;
-  padding: .5rem;
-  font-size: .8rem;
-  margin-top: .5rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  margin-bottom: 0.5rem;
   display: flex;
   align-items: center;
   border-bottom-width: 3px;
@@ -763,4 +765,21 @@ span.new-feature-tag.beta {
   margin-right: 0.5rem;
   margin-inline-end: 10px;
   transform: scale(1.15);
-}
\ No newline at end of file
+}
+
+.feature h3 .icon svg {
+  height: 1rem;
+  width: 1rem;
+  margin-right: 1.5rem;
+  position: relative;
+  left: 0.6rem;
+  transform: scale(1.5);
+  top: 0.1rem;
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.feature h3 .icon svg:hover {
+  opacity: 0.75;
+  transform: scale(1.8);
+  cursor: pointer;
+}