diff --git a/source/_includes/asides/component_navigation.html b/source/_includes/asides/component_navigation.html
index 24294a75006..d48887881fb 100644
--- a/source/_includes/asides/component_navigation.html
+++ b/source/_includes/asides/component_navigation.html
@@ -42,22 +42,30 @@
           {{ percentage | remove: ".0" }}%</a> of the active installations.
         {% endif %}
       {% endif %}
-
-      {%- if page.ha_iot_class %}
-        Its IoT class is <a href='/blog/2016/02/12/classifying-the-internet-of-things/#classifiers'>{{ page.ha_iot_class }}</a>
-      {%- endif -%}
-
-      {%- if page.ha_quality_scale %}
-        {% if page.ha_iot_class %}
-          and it
-        {% else %}
-          It
-        {% endif %}
-        scores {{page.ha_quality_scale}} on our <a href='/docs/quality_scale/'>quality scale</a>
-      {%- endif -%}{%- if page.ha_quality_scale or page.ha_iot_class %}.{%- endif -%}
     {% endif %}
   </div>
 
+    {%- if page.ha_iot_class %}
+    <div class='section'>
+      {% if page.ha_iot_class == "Assumed State" %}<iconify-icon icon='mdi:circle-half-full'></iconify-icon>{%- endif -%}
+      {% if page.ha_iot_class == "Cloud Polling" %}<iconify-icon icon='mdi:cloud-upload'></iconify-icon>{%- endif -%}
+      {% if page.ha_iot_class == "Cloud Push" %}<iconify-icon icon='mdi:cloud-download'></iconify-icon>{%- endif -%}
+      {% if page.ha_iot_class == "Local Polling" %}<iconify-icon icon='mdi:download-network-outline'></iconify-icon>{%- endif -%}
+      {% if page.ha_iot_class == "Local Push" %}<iconify-icon icon='mdi:upload-network-outline'></iconify-icon>{%- endif -%}
+      &nbsp;Its IoT class is <a href='/blog/2016/02/12/classifying-the-internet-of-things/#classifiers'>{{ page.ha_iot_class }}.</a>
+    </div>
+    {%- endif -%}
+  
+  {%- if page.ha_quality_scale %}
+  <div class='section'>  
+    {% if page.ha_quality_scale == "silver" %}🥈 This is a great integration!<br />{%- endif -%}
+    {% if page.ha_quality_scale == "gold" %}🥇 This is a solid integration!<br />{%- endif -%}
+    {% if page.ha_quality_scale == "platinum" %}🏆 Best of the best!<br />{%- endif -%}
+    {% if page.ha_quality_scale == "internal" %}🏠 Under core!<br />{%- endif -%}
+    It scores {{page.ha_quality_scale}} on our <a href='/docs/quality_scale/'>quality scale</a>
+  </div>
+  {%- endif -%}
+  
   {% if page.works_with %}
     {%- for type in page.works_with -%}
       <div class="section">